/* Branding SPEC §1: Moosgrün nur als Akzent (Kopfzeile, aktive Buttons, Rahmen), Arbeitsbereiche
   hell für gute Lesbarkeit der Erfassungsmasken. #114232 ist ein Näherungswert für RAL 6005 und
   wird am echten Logo feinjustiert (siehe README, offener Punkt). */
:root {
  --farbe-primaer: #114232;
  --farbe-primaer-hell: #1c5c47;
  --farbe-hintergrund: #f5f5f0;
  --farbe-flaeche: #ffffff;
  --farbe-text: #1a1a1a;
  --farbe-rand: #d8dcd9;
  --farbe-warnung: #b45309;
  --farbe-fehler: #b3261e;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

header.app-kopf {
  background: var(--farbe-primaer);
  color: #fff;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.app-kopf a { color: #fff; text-decoration: none; }

nav.app-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.25rem;
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rand);
}

nav.app-nav a {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  color: var(--farbe-primaer);
  text-decoration: none;
  font-size: 0.9rem;
}

nav.app-nav a.aktiv, nav.app-nav a:hover {
  background: var(--farbe-primaer);
  color: #fff;
}

/* Gruppierte Aufklapp-Navigation */
.nav-gruppe { position: relative; }
.nav-titel {
  background: transparent;
  color: var(--farbe-primaer);
  border: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
}
.nav-gruppe.offen .nav-titel,
.nav-gruppe.aktiv-gruppe .nav-titel,
.nav-titel:hover {
  background: var(--farbe-primaer);
  color: #fff;
}
.nav-untermenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  min-width: 190px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  z-index: 30;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.nav-gruppe.offen .nav-untermenu { display: flex; }
.nav-untermenu a {
  padding: 0.55rem 0.9rem;
  color: var(--farbe-text);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 0;
}
.nav-untermenu a:hover, .nav-untermenu a.aktiv {
  background: var(--farbe-primaer);
  color: #fff;
}

main {
  max-width: 960px;
  margin: 1.5rem auto;
  padding: 0 1rem 3rem;
}

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

h1, h2, h3 { margin-top: 0; }

.formular-zeile { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
label { font-size: 0.85rem; color: #444; }

input, select, textarea {
  padding: 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--farbe-primaer-hell);
  outline-offset: 1px;
}

button, .schaltflaeche {
  background: var(--farbe-primaer);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.55rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

button:hover { background: var(--farbe-primaer-hell); }
button.sekundaer { background: transparent; color: var(--farbe-primaer); border: 1px solid var(--farbe-primaer); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--farbe-rand); font-size: 0.92rem; }
th { color: #444; font-weight: 600; }

.hinweis-fehler { color: var(--farbe-fehler); font-size: 0.9rem; }
.hinweis-warnung { color: var(--farbe-warnung); font-size: 0.9rem; }
.hinweis-erfolg { color: var(--farbe-primaer); font-size: 0.9rem; }

.zentriert-formular {
  max-width: 380px;
  margin: 3rem auto;
}

/* Info-/Copyright-Button + Dialog */
.info-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 1;
  padding: 0;
  margin-right: 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.info-btn:hover { background: rgba(255, 255, 255, 0.18); }
.info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.info-overlay[hidden] { display: none; }
.info-box {
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 360px;
  margin: 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.info-box h2 { margin-top: 0; color: var(--farbe-primaer); }