@charset "UTF-8";

/* ============================================================
   MITGLIEDERPORTAL — Farbschemata (Dunkel, Rosa, Waldgrün)
   ============================================================
   Die Schemata werden nicht automatisch von der Systemeinstellung
   übernommen, sondern ausschließlich über die Knöpfe in der
   Fußzeile gewählt. Standard bleibt Hell. Die Wahl merkt sich der
   Browser (localStorage "mg-theme"); ein Inline-Skript im
   Seitenkopf setzt sie vor dem ersten Rendern, damit nichts
   aufflackert.

   Werte identisch zur Veranstaltungsverwaltung und zum
   Funktionstrainingsmodul, damit alle Anwendungen der Rheuma-Liga
   dieselbe Designsprache sprechen. Kontraste sind dort auf
   WCAG AA (≥ 4,5:1) geprüft.

   Weil die gesamte Oberfläche über Farbtokens gestaltet ist,
   genügt hier im Wesentlichen das Umdefinieren dieser Tokens.
   ============================================================ */


/* ============================================================
   DUNKEL
   ============================================================ */

html[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0F1419;
  --surface:       #1A1F26;
  --border:        #2D333B;
  --border-light:  #242930;
  --text:          #EBEBEB;
  --text-mid:      #B4B4B0;
  --text-muted:    #9A9A95;

  --navy:          #4A6AA8;
  --navy-light:    #5C7DBF;
  --navy-muted:    #4C5F85;
  --navy-wash:     #1D2A42;
  --navy-tint:     #161F30;

  --copper:        #D98F5E;
  --copper-dark:   #BC7645;
  --copper-light:  #2D1F17;
  --copper-wash:   #351F14;

  --sea:           #45A09D;
  --sea-dark:      #6FC0BD;
  --sea-light:     #14312F;
  --plum:          #A284BE;
  --plum-light:    #2A1E32;
  --amber:         #D1A445;
  --amber-light:   #2A2217;
  --rose:          #D18697;
  --rose-light:    #2E1D23;

  --danger:        #DB5746;
  --danger-light:  #371611;
  --success:       #4AA366;
  --success-light: #10301A;

  /* Akzentfarbe für Text und Verknüpfungen: deutlich heller als --navy,
     das hier das Navigationsband trägt. #90B4EE auf #1A1F26 ergibt
     7,6:1 — auch auf den getönten Flächen (z. B. --sea-light) über 6:1. */
  --akzent:        #90B4EE;
  /* Hebt die „neu"-Marke über die 4,5:1-Grenze (war 4,28:1). */
  --copper-dark:   #D89261;

  --sh-xs: 0 1px 2px rgba(0,0,0,.35);
  --sh-sm: 0 1px 4px rgba(0,0,0,.40);
  --sh-md: 0 4px 16px rgba(0,0,0,.50);
  --sh-lg: 0 12px 34px rgba(0,0,0,.60);
  --focus-ring: rgba(92,125,191,.45);
}

/* Navigationsband: tieferer Ton als --navy, sonst leuchtet das Band. */
html[data-theme="dark"] { --nav-bg: #16203A; }

/* Das Vereinslogo ist dunkle Schrift auf transparentem Grund — im
   dunklen Schema bekommt es eine eigene helle Fläche, sonst wäre es
   nicht lesbar.

   Kein reines Weiß, sondern der Papierton des hellen Schemas: Weiß
   leuchtet auf dunklem Grund und zieht den Blick von der Seite weg.
   Der hauchdünne Rand zeigt die Kante, damit die Platte gewollt wirkt
   und nicht wie ein Loch.

   Die feste Höhe von 46 px ist entfallen: Sie war nötig, solange die
   Leiste nicht mitwuchs, machte das Logo aber im dunklen Schema
   kleiner als im hellen. Jetzt gibt die Leiste die Höhe frei
   (style.css, Abschnitt Kopfleiste). */
html[data-theme="dark"] .header-logo {
  box-sizing: content-box;
  background: #F4F5F3;
  border-radius: var(--r-md);
  padding: 4px 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .header-portal::before { background: var(--border); }
html[data-theme="dark"] .begruessung {
  background: linear-gradient(115deg, #1D2A42 0%, #2B211A 100%);
  border-color: #2D333B;
}
html[data-theme="dark"] .begruessung h1 { color: #DCE6F7; }
html[data-theme="dark"] .begruessung strong { color: var(--copper); }
html[data-theme="dark"] .meldung--erfolg  { color: #9BD9AF; }
html[data-theme="dark"] .meldung--fehler  { color: #F0A79B; }
html[data-theme="dark"] .meldung--warnung { color: #E6C77A; }

/* Kacheln der Ampeltafel: Im Dunkelschema ist die Tönung dunkel, die
   Schrift muss also hell sein. Dieselben Farbwerte wie bei den
   Meldungen darüber — sie sind dort schon auf Kontrast geprüft. */
html[data-theme="dark"] {
  --ampelschrift-gelb: #E6C77A;
  --ampelschrift-rot:  #F0A79B;
}
html[data-theme="dark"] .ampelkachel--gelb .ampelkachel__zusatz,
html[data-theme="dark"] .ampelkachel--rot  .ampelkachel__zusatz { color: var(--text); }
html[data-theme="dark"] .btn-zweit { background: var(--surface); color: var(--text); }
/* Kupfer ist im dunklen Schema hell — darauf gehört dunkle Schrift,
   weiße ergäbe nur 2,6:1. */
html[data-theme="dark"] .btn-primaer { color: #241203; }
html[data-theme="dark"] .btn-primaer:hover { color: #241203; }
html[data-theme="dark"] .btn-zweit:hover { background: var(--navy-wash); color: #fff; }
html[data-theme="dark"] .termin__datum { background: var(--navy); }
html[data-theme="dark"] .termin__monat,
html[data-theme="dark"] .termin__jahr { opacity: 1; }
/* Schrift auf den hellen Tönungen der Gesamtampel und Notaus-Bilanz. */
html[data-theme="dark"] {
  --success-text: #9BD9AF;
  --amber-text:   #E6C77A;
  --danger-text:  #F0A79B;
}
/* Rot ist im Dunkelschema hell — weiße Schrift darauf ergab 3,8:1. */
html[data-theme="dark"] .btn-gefahr { color: #1A0B08; }
html[data-theme="dark"] .btn-gefahr:hover { background: #F0A79B; color: #1A0B08; }
/* Kupferflächen wie beim Primärknopf: dunkle Schrift. */
html[data-theme="dark"] .verwaltung__zahl,
html[data-theme="dark"] .mg-hilfe-vorlesen--aktiv { color: #241203; }
/* Die Symbole der technischen Prüfung auf dunklem Grund. */
html[data-theme="dark"] .befund--gut > i,
html[data-theme="dark"] .pruefkopf--gut .pruefkopf__ampel > i { color: #9BD9AF; }
html[data-theme="dark"] .befund--warnung > i,
html[data-theme="dark"] .pruefkopf--warnung .pruefkopf__ampel > i { color: #E6C77A; }
html[data-theme="dark"] .befund--fehler > i,
html[data-theme="dark"] .pruefkopf--fehler .pruefkopf__ampel > i { color: #F0A79B; }
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239A9A95' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body.anmeldeseite {
  background: linear-gradient(180deg, #0B1017 0%, #16202F 100%);
}


/* ============================================================
   ROSA — warmes Rosé statt grellem Pink
   ============================================================ */

html[data-theme="pink"] {
  color-scheme: light;

  --bg:            #FDF5F8;
  --surface:       #FFFFFF;
  --border:        #F0D9E1;
  --border-light:  #F7E6EC;
  --text:          #2A1A22;
  --text-mid:      #6B4757;
  --text-muted:    #7C566A;   /* war #8E6877 = 4,46:1 — knapp unter AA */

  --navy:          #B83A6F;
  --navy-light:    #C84F82;
  --navy-muted:    #C98BA6;
  --navy-wash:     #FBE5EE;
  --navy-tint:     #FEF1F6;

  --copper:        #A83E5E;   /* weiße Schrift darauf: 5,3:1 (war 4,46:1) */
  --copper-dark:   #8E3049;
  --copper-light:  #FBE7EE;
  --copper-wash:   #F8DCE5;

  --sea:           #5A8F9C;
  --sea-dark:      #3F6B77;
  --sea-light:     #ECF3F5;
  --plum:          #77468C;   /* auf --plum-light: 5,4:1 (war 4,17:1) */
  --plum-light:    #F1E7F6;
  --amber:         #8A5E18;   /* war #B07A2E = 3,31:1 auf --amber-light */
  --amber-light:   #FBF1DE;
  --rose:          #9D3B4C;   /* auf --rose-light: 5,4:1 (war 4,34:1) */
  --rose-light:    #FBEAEC;

  --danger:        #B83232;
  --danger-light:  #FBEAEA;
  --success:       #2A7A4C;
  --success-light: #E7F3EC;

  --sh-xs: 0 1px 2px rgba(184,58,111,.06);
  --sh-sm: 0 1px 4px rgba(184,58,111,.08), 0 1px 2px rgba(184,58,111,.05);
  --sh-md: 0 4px 16px rgba(184,58,111,.10), 0 1px 4px rgba(184,58,111,.05);
  --sh-lg: 0 12px 40px rgba(184,58,111,.14), 0 2px 8px rgba(184,58,111,.06);
  --focus-ring: rgba(184,58,111,.22);
}

/* Auf dem Himbeerband reichten 80 % Weiß nicht (4,03:1). */
html[data-theme="pink"] .navpunkt,
html[data-theme="pink"] .navpunkt__text { color: #FFFFFF; }

html[data-theme="pink"] .begruessung {
  background: linear-gradient(115deg, var(--navy-wash) 0%, var(--copper-light) 100%);
}
html[data-theme="pink"] body.anmeldeseite {
  /* Unteres Ende dunkler: Dort steht die Fußzeile in Weiß (vorher 2,4:1). */
  background: linear-gradient(180deg, rgba(184,58,111,.94) 0%, rgba(168,52,101,.96) 100%);
}
/* Marke und Zähler auf dem Himbeerband brauchen ein helleres Kupfer. */
html[data-theme="pink"] { --copper-hell: #FFD9A8; }


/* ============================================================
   WALDGRÜN — ruhiges, erdiges Tannengrün
   ============================================================ */

html[data-theme="green"] {
  color-scheme: light;

  --bg:            #F4F6F1;
  --surface:       #FFFFFF;
  --border:        #DCE4D4;
  --border-light:  #E8EDE2;
  --text:          #1A2218;
  --text-mid:      #4B5944;
  --text-muted:    #63715B;   /* war #6B7A63 = 4,21:1 — knapp unter AA */

  --navy:          #2D5A3D;
  --navy-light:    #3F7553;
  --navy-muted:    #8AA994;
  --navy-wash:     #E6EFE8;
  --navy-tint:     #F0F5F0;

  --copper:        #5B6C24;   /* weiße Schrift darauf: 5,4:1 (war 4,47:1) */
  --copper-dark:   #47551A;
  --copper-light:  #F0F2DD;
  --copper-wash:   #E8EDCC;

  --sea:           #2B7A78;
  --sea-dark:      #1F5C5A;
  --sea-light:     #E1F0EF;
  --plum:          #6B5295;
  --plum-light:    #EDE6F4;
  --amber:         #7E5B11;   /* war #A87A1A = 3,32:1 auf --amber-light */
  --amber-light:   #F8EED1;
  --rose:          #8F3F4E;   /* auf --rose-light: 5,5:1 (war 4,36:1) */
  --rose-light:    #F7E6E8;

  --danger:        #B33A2E;
  --danger-light:  #FBEAE7;
  --success:       #2A7A4C;
  --success-light: #DCEEDF;

  --sh-xs: 0 1px 2px rgba(45,90,61,.06);
  --sh-sm: 0 1px 4px rgba(45,90,61,.08), 0 1px 2px rgba(45,90,61,.05);
  --sh-md: 0 4px 16px rgba(45,90,61,.10), 0 1px 4px rgba(45,90,61,.05);
  --sh-lg: 0 12px 40px rgba(45,90,61,.14), 0 2px 8px rgba(45,90,61,.06);
  --focus-ring: rgba(45,90,61,.22);
}

html[data-theme="green"] .begruessung {
  background: linear-gradient(115deg, var(--navy-wash) 0%, var(--copper-light) 100%);
}
html[data-theme="green"] body.anmeldeseite {
  background: linear-gradient(180deg, rgba(45,90,61,.94) 0%, rgba(52,96,70,.96) 100%);
}


/* ============================================================
   DRUCK — nie in einem Farbschema drucken
   ============================================================ */

@media print {
  /* Papier ist hell: jedes Farbschema fällt auf die Werte des hellen
     Schemas zurück — alle Tokens, nicht nur fünf. Vorher druckten
     Dunkel-Nutzer graue Schrift und dunkle Tabellenköpfe. */
  html[data-theme] {
    --navy: #1B2A4A;
    --navy-light: #2D4166;
    --navy-muted: #8B97AD;
    --navy-wash: #EEF1F6;
    --navy-tint: #F6F8FB;
    --copper: #A25832;
    --copper-dark: #8A4A28;
    --copper-hell: #E0A171;
    --nav-bg: var(--navy);
    --copper-light: #FDF3EE;
    --copper-wash: #F9EDE6;
    --sea: #2B7A78;
    --sea-dark: #1F5C5A;
    --sea-light: #EBF5F5;
    --plum: #7C5295;
    --plum-light: #F4EFF8;
    --amber: #8A6508;
    --amber-light: #FDF6E3;
    --rose: #B44D5E;
    --rose-light: #FBF0F1;
    --bg: #F5F4F1;
    --surface: #FFFFFF;
    --border: #E4E1DB;
    --border-light: #EDEBE6;
    --text: #1F1F1E;
    --text-mid: #555550;
    --text-muted: #66635C;
    --danger: #C0392B;
    --danger-light: #FDF0EF;
    --success: #1A7A3A;
    --success-light: #E8F5EC;
    --success-text: #12572A;
    --amber-text: #6B4E06;
    --danger-text: #8E2A20;
    --focus-ring: rgba(27, 42, 74, 0.20);
    --akzent: var(--navy);
    --sp-2xs: 2px;
    --sp-md: 16px;
    --sp-2xl: 48px;
    --skala: 1;
    --font: 'Open Sans', "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --fs-2xs: calc(0.75rem   * var(--skala));
    --fs-xs: calc(0.8125rem * var(--skala));
    --fs-sm: calc(0.9375rem * var(--skala));
    --fs-base: calc(1.0625rem * var(--skala));
    --fs-md: calc(1.125rem  * var(--skala));
    --fs-lg: calc(1.3125rem * var(--skala));
    --fs-xl: calc(1.5625rem * var(--skala));
    --fs-2xl: calc(1.9375rem * var(--skala));
    --r-sm: 6px;
    --ease: cubic-bezier(.22,.68,0,1);
    --dur: 180ms;
    --max-w: 1160px;
    --nav-h: 62px;
  }
}