/* ─────────────────────────────────────────────────────────── Markenfarben
 *
 * Aus dem Logo entnommen: Navy #050E1D und Rot #E5111F.
 *
 * Das Rot ist als Textfarbe auf Weiß grenzwertig — 4,74:1 gegen Weiß, und
 * gegen die leicht getönte Grundfläche darunter. Deshalb gibt es drei
 * Abstufungen statt einer:
 *
 *   --marke-rot   #E5111F  Flächen, Logo, Kennzeichen — nie kleiner Text
 *   --rot-text    #C20E19  Schrift und Linien auf hellem Grund (6,2:1)
 *   --rot-hell    #FF6069  Schrift auf dunklem Grund (6,9:1)
 *
 * Wer das Rot überall gleich einsetzt, hat auf einem Vereinslaptop im
 * Sonnenlicht Text, den niemand mehr liest.
 *
 * ── Warum die Hauptknöpfe navy sind und nicht rot ──────────────────────
 *
 * Rot ist im Logo der Akzent, nicht die Masse — und es ist zugleich die
 * einzige Farbe, die "Achtung, das löscht etwas" sagen kann. Wären alle
 * Knöpfe rot, verlöre "Mitglied austragen" sein Signal. Deshalb: Navy
 * trägt die Handlung, Rot markiert die Marke (Logo, aktiver Menüpunkt,
 * Überschriftenlinie) und die Gefahr.
 */

:root {
  color-scheme: light dark;

  /* Marke */
  --navy-900: #050E1D;
  --navy-800: #0B1526;
  --navy-700: #162032;
  --marke-rot: #E5111F;
  --rot-text:  #C20E19;
  --rot-hell:  #FF6069;

  /* Zustandsfarben. Bewusst NICHT aus der Marke abgeleitet: "erledigt"
     grün und "Achtung" gelb liest jeder sofort, ein markenfarbenes
     Signal muss man erst lernen. */
  --gelb-600: #a35c07;
  --blau-600: #1d4ed8;
  --gruen-700: #15803d;
  --gut-flaeche: #dcfce7;
  --gut-schrift: #14532d;

  --grund:        #ffffff;
  --grund-2:      #f4f6f8;
  --grund-3:      #e7eaee;
  --linie:        #d3d9e0;
  --schrift:      #0b1220;
  --schrift-leise:#525d6b;
  --akzent:       var(--navy-900);
  --akzent-text:  #ffffff;
  --marke:        var(--marke-rot);
  /* Die Marke als SCHRIFT ist eine andere Farbe als die Marke als FLAECHE.
     #E5111F auf Weiss reicht fuer Flaechen, nicht fuer kleinen Text — und
     auf dunklem Grund erst recht nicht. Genau das stand oben schon als
     Regel in der Palette und war an einer Stelle trotzdem verletzt
     (Wortmarke „Herz", gefunden bei der Pruefung in 0.22.0). */
  --marke-schrift: var(--rot-text);
  --link:         var(--rot-text);
  --gefahr:       var(--rot-text);

  --radius: 10px;
  --radius-klein: 6px;
  --schatten: 0 1px 2px rgba(5,14,29,.06), 0 4px 12px rgba(5,14,29,.06);

  --raum-1: .25rem;
  --raum-2: .5rem;
  --raum-3: .75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;

  --kopf-hoehe: 3.5rem;
  --nav-breite: 15rem;

  --schriftart: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schriftart-fest: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dunkel"] {
  --grund:        #0B1526;
  --grund-2:      #050E1D;
  --grund-3:      #172236;
  --linie:        #27334a;
  --schrift:      #e9edf3;
  --schrift-leise:#98a3b4;
  --akzent:       #ffffff;
  --akzent-text:  #050E1D;
  --marke:        var(--marke-rot);
  --marke-schrift: var(--rot-hell);
  --link:         var(--rot-hell);
  --gefahr:       var(--rot-hell);
  --gut-flaeche:  #14532d;
  --gut-schrift:  #dcfce7;
  --schatten: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
}

/* Erhoehter Kontrast — nicht nur dunkler, sondern kontrastreicher. */
[data-theme="kontrast"] {
  --grund:        #000000;
  --grund-2:      #000000;
  --grund-3:      #1a1a1a;
  --linie:        #ffffff;
  --schrift:      #ffffff;
  --schrift-leise:#e6e6e6;
  --akzent:       #ffffff;
  --akzent-text:  #000000;
  --marke:        #FF6069;
  --marke-schrift: #FF8A90;
  --link:         #FF8A90;
  --gefahr:       #FF8A90;
  --gut-flaeche:  #000000;
  --gut-schrift:  #7CFFA8;
  --schatten: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --grund:        #0B1526;
    --grund-2:      #050E1D;
    --grund-3:      #172236;
    --linie:        #27334a;
    --schrift:      #e9edf3;
    --schrift-leise:#98a3b4;
    --akzent:       #ffffff;
    --akzent-text:  #050E1D;
    --marke-schrift: var(--rot-hell);
    --link:         var(--rot-hell);
    --gefahr:       var(--rot-hell);
    --gut-flaeche:  #14532d;
    --gut-schrift:  #dcfce7;
  }
}

* { box-sizing: border-box; }

/* `display: flex` schlaegt sonst das hidden-Attribut — und der
   Startbildschirm bleibt ueber der fertigen Anwendung stehen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--schriftart);
  font-size: 16px;
  line-height: 1.55;
  color: var(--schrift);
  background: var(--grund-2);
  -webkit-text-size-adjust: 100%;
}

/* Wer die Bewegung nicht will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.ueberspringen {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akzent);
  color: var(--akzent-text);
  padding: var(--raum-3) var(--raum-4);
  z-index: 100;
}
.ueberspringen:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

/* ---------------------------------------------------------------- Start */

.startbildschirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: var(--raum-4);
  color: var(--schrift-leise);
}
.herz { width: 82px; height: 70px; animation: puls 1.4s ease-in-out infinite; }
@keyframes puls {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.warnung { color: var(--gefahr); font-weight: 600; }

/* ----------------------------------------------------------------- Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  height: var(--kopf-hoehe);
  padding: 0 var(--raum-4);
  padding-top: env(safe-area-inset-top);
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--schrift);
  text-decoration: none;
}
.markequelle { position: absolute; width: 0; height: 0; overflow: hidden; }
.markezeichen { width: 30px; height: 26px; flex: 0 0 auto; }
/* Das K nimmt die Schriftfarbe an, das Herz bleibt in der Markenfarbe —
   damit funktioniert dasselbe Zeichen in allen vier Darstellungen. */
.kh-k    { fill: currentColor; }
.kh-herz { fill: var(--marke); }
/* "Klub" trägt die Grundfarbe, "Herz" die Marke — wie im Logo. */
.markeherz { color: var(--marke-schrift); }

@media (max-width: 420px) { .markename { display: none; } }

/* Anmeldeansicht: Navigation und Vereinswahl bleiben leer und werden
   deshalb ganz ausgeblendet. */
.ohne-rahmen .navigation,
.ohne-rahmen .vereinwahl,
.ohne-rahmen #menuKnopf,
.ohne-rahmen #kontoKnopf { display: none; }
.ohne-rahmen .huelle { grid-template-columns: 1fr; }
.ohne-rahmen .kopfrechts { margin-left: auto; }

.vereinwahl { margin-left: auto; }
.vereinwahl select { max-width: 16rem; }

.kopfrechts { display: flex; gap: var(--raum-1); }

.symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--schrift);
  font-size: 1.15rem;
  cursor: pointer;
}
.symbol:hover { background: var(--grund-3); }

/* ------------------------------------------------------------ Grundriss */

.huelle {
  display: grid;
  grid-template-columns: var(--nav-breite) 1fr;
  min-height: calc(100vh - var(--kopf-hoehe));
}

.navigation {
  background: var(--grund);
  border-right: 1px solid var(--linie);
  padding: var(--raum-4) var(--raum-2);
  overflow-y: auto;
}

.navigation a {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: 44px;
  padding: 0 var(--raum-3);
  border-radius: var(--radius-klein);
  color: var(--schrift);
  text-decoration: none;
  font-size: .95rem;
}
.navigation a:hover { background: var(--grund-3); }
.navigation a[aria-current="page"] {
  background: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--marke);
}
.navigation .navgruppe {
  margin: var(--raum-4) 0 var(--raum-1);
  padding: 0 var(--raum-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

.inhalt {
  padding: var(--raum-5);
  max-width: 68rem;
  width: 100%;
  /* Eine E-Mail-Adresse, eine IBAN, eine lange URL: ein Wort, das nicht
     umbricht, schiebt bei 320 Pixeln die ganze Seite zur Seite, und dann
     scrollt man auf JEDER Seite waagerecht, um den Text zu lesen
     (WCAG 1.4.10 — gefunden bei der Pruefung in 0.22.0, Ausloeser war eine
     Mailadresse in der Mitgliederliste). `anywhere` bricht nur, wenn es
     sonst nicht passt, und wirkt auf die Mindestbreite — genau darum geht
     es hier. Die Eigenschaft vererbt sich, ein Ort reicht. */
  overflow-wrap: anywhere;
}
.inhalt:focus { outline: none; }

/* Aber nicht auf Knöpfen.
   `anywhere` wirkt auf die MINDESTBREITE, und ein Raster aus drei Spalten
   nutzt das aus: Aus „SIEBENMETER" wird „SIEBENM / ETER", aus „2 MINUTEN"
   ein „2 MINUTE / N". Gefunden bei der Browserprüfung zu 0.27.0 in der
   Daumenzone des Tickers — dort steht die Beschriftung, die jemand mit
   dem Daumen blind treffen soll, und die darf nicht mitten im Wort
   brechen. `break-word` bricht nur, wenn das Wort allein nicht passt. */
button, .knopf, a.knopf { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 860px) {
  .huelle { grid-template-columns: 1fr; }
  .navigation {
    position: fixed;
    inset: var(--kopf-hoehe) auto 0 0;
    width: min(80vw, var(--nav-breite));
    transform: translateX(-100%);
    transition: transform .18s ease;
    z-index: 15;
  }
  .navigation.offen { transform: none; box-shadow: var(--schatten); }
  .inhalt { padding: var(--raum-4); }
  .vereinwahl select { max-width: 9rem; }
}
@media (min-width: 861px) { .nurschmal { display: none; } }

/* ----------------------------------------------------------- Textkörper */

h1 { font-size: 1.5rem; margin: 0 0 var(--raum-2); }
h2 { font-size: 1.15rem; margin: var(--raum-5) 0 var(--raum-2); }
/* Der einzige Ort, an dem Rot in der Flaeche vorkommt: ein kurzer Strich
   unter der Ueberschrift. Mehr braucht die Marke im Arbeitsalltag nicht. */
.karte > h2:first-child::after {
  content: ""; display: block; width: 2.2rem; height: 3px; margin-top: .4rem;
  background: var(--marke); border-radius: 2px;
}
h3 { font-size: 1rem;    margin: var(--raum-4) 0 var(--raum-2); }

.leise { color: var(--schrift-leise); font-size: .9rem; }
.mono  { font-family: var(--schriftart-fest); font-size: .85rem; }

.seitenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}

/* ---------------------------------------------------------------- Karte */

.karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-4);
  margin-bottom: var(--raum-4);
  box-shadow: var(--schatten);
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  align-items: start;          /* sonst zieht die längste Kachel alle mit */
  gap: var(--raum-4);
}

/* -------------------------------------------------------------- Bedienung */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: 44px;
  padding: 0 var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund);
  color: var(--schrift);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knopf:hover { background: var(--grund-3); }
button:disabled { opacity: .5; cursor: not-allowed; }

.knopf-haupt, button.haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}
.knopf-haupt:hover, button.haupt:hover { filter: brightness(1.08); }

button.gefahr {
  border-color: var(--gefahr);
  color: var(--gefahr);
}
button.gefahr:hover { background: var(--gefahr); color: #fff; }

button.schlicht {
  border: 0;
  background: transparent;
  min-height: 36px;
  padding: 0 var(--raum-2);
  color: var(--link);
}

.knopfreihe { display: flex; gap: var(--raum-2); flex-wrap: wrap; }

/* -------------------------------------------------------------- Formular */

label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: var(--raum-1); }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund);
  color: var(--schrift);
  font: inherit;
  font-size: .95rem;
}
textarea { min-height: 6rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; min-height: 1.15rem; }

.feld { margin-bottom: var(--raum-4); }
.feld .hinweis { font-size: .85rem; color: var(--schrift-leise); margin-top: var(--raum-1); font-weight: 400; }
.feld.fehler input, .feld.fehler select { border-color: var(--gefahr); }
.feld .fehlertext { color: var(--gefahr); font-size: .85rem; margin-top: var(--raum-1); }

.feldreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--raum-4);
}

fieldset { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: var(--raum-4); }
legend { font-weight: 600; padding: 0 var(--raum-2); }

/* --------------------------------------------------------------- Tabelle */

.tabellenrahmen { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--linie); }

table { width: 100%; border-collapse: collapse; background: var(--grund); }
th, td { padding: var(--raum-3); text-align: left; border-bottom: 1px solid var(--linie); }
th { background: var(--grund-2); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--schrift-leise); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--grund-2); }
td.rechts, th.rechts { text-align: right; }

/* Auf schmalen Geraeten werden Zeilen zu Karten. */
@media (max-width: 640px) {
  table.umbrechend thead { display: none; }
  table.umbrechend tr {
    display: block;
    border-bottom: 1px solid var(--linie);
    padding: var(--raum-2) 0;
  }
  table.umbrechend td {
    display: flex;
    justify-content: space-between;
    gap: var(--raum-4);
    border: 0;
    padding: var(--raum-1) var(--raum-3);
  }
  table.umbrechend td::before {
    content: attr(data-spalte);
    font-weight: 600;
    color: var(--schrift-leise);
    font-size: .85rem;
  }
}

/* ---------------------------------------------------------------- Marken */

.marke-kennzeichen {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .15em .6em;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--grund-3);
  color: var(--schrift-leise);
  white-space: nowrap;
}
.marke-kennzeichen.gut  { background: var(--gut-flaeche); color: var(--gut-schrift); }
.marke-kennzeichen.warn { background: #fef3c7; color: #92400e; }
.marke-kennzeichen.stop { background: #fee2e2; color: #991b1b; }
.marke-kennzeichen.info { background: #dbeafe; color: #1e40af; }

[data-theme="dunkel"] .marke-kennzeichen.gut  { background: var(--gut-flaeche); color: var(--gut-schrift); }
[data-theme="dunkel"] .marke-kennzeichen.warn { background: #78350f; color: #fef3c7; }
[data-theme="dunkel"] .marke-kennzeichen.stop { background: #7f1d1d; color: #fee2e2; }
[data-theme="dunkel"] .marke-kennzeichen.info { background: #1e3a8a; color: #dbeafe; }

/* Die Herkunft einer Einstellung — der wichtigste Hinweis im ganzen
   Einstellungsbereich. Wer nicht sieht, ob ein Wert geerbt ist, aendert
   ihn an der falschen Stelle. */
.herkunft { font-size: .78rem; color: var(--schrift-leise); }
.herkunft.geerbt::before  { content: "↳ geerbt von "; }
.herkunft.eigen::before   { content: "● hier gesetzt"; }
.herkunft.eigen           { color: var(--link); font-weight: 600; }
.herkunft.standard::before{ content: "○ Standardwert"; }
.herkunft.gesperrt::before{ content: "🔒 festgelegt von "; }

/* ----------------------------------------------------------- Rechte-Gitter */

.rechtegitter { overflow-x: auto; }
.rechtegitter table { font-size: .88rem; }
.rechtegitter th.modul { position: sticky; left: 0; background: var(--grund-2); z-index: 1; }
.rechtegitter td.modul { position: sticky; left: 0; background: var(--grund); font-weight: 600; }
.stufe { display: inline-block; min-width: 3.4rem; text-align: center; padding: .1em .5em; border-radius: var(--radius-klein); font-size: .78rem; font-weight: 600; }
.stufe.none  { background: var(--grund-3); color: var(--schrift-leise); }
.stufe.own   { background: #e0e7ff; color: #3730a3; }
.stufe.read  { background: #dbeafe; color: #1e40af; }
.stufe.write { background: #fef3c7; color: #92400e; }
.stufe.admin { background: #fee2e2; color: #991b1b; }

/* ------------------------------------------------------------ Meldungen */

.melder {
  position: fixed;
  right: var(--raum-4);
  bottom: var(--raum-4);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  z-index: 50;
  max-width: min(28rem, calc(100vw - 2rem));
}
.meldung {
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  box-shadow: var(--schatten);
  animation: einblenden .18s ease;
}
.meldung.fehler  { border-left-color: var(--gefahr); }
.meldung.warnung { border-left-color: var(--gelb-600); }
.meldung .titel  { font-weight: 600; }
.meldung .text   { font-size: .9rem; color: var(--schrift-leise); }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------- Dialog */

dialog {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(40rem, calc(100vw - 2rem));
  width: 100%;
  background: var(--grund);
  color: var(--schrift);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog .dialogkopf { padding: var(--raum-4); border-bottom: 1px solid var(--linie); font-weight: 700; }
dialog .dialogkoerper { padding: var(--raum-4); max-height: 60vh; overflow-y: auto; }
dialog .dialogfuss { padding: var(--raum-4); border-top: 1px solid var(--linie); display: flex; justify-content: flex-end; gap: var(--raum-2); }

/* ------------------------------------------------------------- Zustände */

.leerzustand {
  text-align: center;
  padding: var(--raum-6) var(--raum-4);
  color: var(--schrift-leise);
}
.leerzustand .grosses { font-size: 2.5rem; opacity: .5; }

.laden {
  display: grid;
  gap: var(--raum-2);
}
.laden .balken {
  height: 1rem;
  border-radius: var(--radius-klein);
  background: linear-gradient(90deg, var(--grund-3) 25%, var(--grund-2) 50%, var(--grund-3) 75%);
  background-size: 200% 100%;
  animation: schimmer 1.2s infinite;
}
@keyframes schimmer { to { background-position: -200% 0; } }

.baumliste { list-style: none; margin: 0; padding-left: var(--raum-5); }
.baumliste > li { padding: var(--raum-1) 0; border-left: 2px solid var(--linie); padding-left: var(--raum-3); }
/* `flex-wrap` und nicht mehr: Ein Abteilungsbaum mit drei Knoepfen je
   Zeile (Bearbeiten, Verschieben, Loeschen) ist bei 320 Pixeln breiter
   als der Bildschirm — und weil nichts umbrechen durfte, schob er die
   GANZE Seite nach rechts, Ueberschrift und Reiterleiste inklusive.
   Gefunden 0.30.0, entstanden mit dem dritten Knopf. */
.baumliste .knoten { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.baumliste .knoten > strong { min-width: 0; overflow-wrap: anywhere; }

/* Fuer die Ausdrucke, die im Verein immer noch gebraucht werden. */
@media print {
  .kopf, .navigation, .melder, .knopfreihe { display: none !important; }
  .huelle { grid-template-columns: 1fr; }
  .karte { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}