/* ===========================================================================
   Zweite Gestaltung "elegant" (06.11.2026)
   Chefarzt: "ein bisschen zusaetzliche Eleganz", Vorbild
   summit.longevity-horizons.com; "1.-7. ja, 8. spaeter, 9. spaeter".
   Seit 06.11.2026 fest ("fest einschalten"), nach site.css geladen. Alles hier
   ueberschreibt site.css; nichts dort ist geaendert.

   1. Warmer Grund (Elfenbein) statt kuehlem Grau-Gruen
   2. Gold als zweite Akzentfarbe: Messing auf hell (lesbar), helles Gold
      nur auf dunklem Grund. Rot bleibt fuer Logo, Hauptknoepfe, Verweise.
   3. Dunkle Baender: Leitsatz, "Die SGK in Zahlen"
   4. Groessere Titel, mehr Luft
   5. Kopf der Startseite wie bisher, mit Gold-Akzenten
   6. Ruhigere Karten und Knoepfe
   7. Sanftes Einblenden (elegant.js)
   =========================================================================== */

:root.stil-elegant{
  --bg:#F7F3EA;
  --surface:#FFFDF8;
  --surface-2:#EFE8DA;
  --line:#E4DBC9;
  --feld-grund:#F7F3EA;
  --gold:#B8955A;        /* Linien, Zierrat */
  --gold-hell:#E2C995;   /* nur auf dunklem Grund */
  --messing:#7A5E31;     /* Schrift in Gold auf hellem Grund, 5:1 */
  --nacht:#1D1814;
  --nacht-2:#2A221C;
  --nacht-schrift:#F2ECDF;
  --nacht-leise:#C9BFAE;
}
@media (prefers-color-scheme: dark){
  :root.stil-elegant:not([data-theme="light"]){
    --bg:#13100D;
    --surface:#1B1713;
    --surface-2:#231D18;
    --line:#342B23;
    --feld-grund:#2E2620;
    --gold:#B8955A;
    --gold-hell:#E2C995;
    --messing:#D7BA80;
    --nacht:#0C0A08;
    --nacht-2:#18130F;
  }
}
:root.stil-elegant[data-theme="dark"]{
  --bg:#13100D;
  --surface:#1B1713;
  --surface-2:#231D18;
  --line:#342B23;
  --feld-grund:#2E2620;
  --gold:#B8955A;
  --gold-hell:#E2C995;
  --messing:#D7BA80;
  --nacht:#0C0A08;
  --nacht-2:#18130F;
}

/* ---- Schrift ------------------------------------------------------------ */
.stil-elegant h1, .stil-elegant h2{font-weight:420; letter-spacing:-0.012em;}
/* Rubrik: statt Festbreitenschrift die Grundschrift, weit gesperrt, Messing */
.stil-elegant .eyebrow{
  font-family:"Work Sans", -apple-system, "Segoe UI", sans-serif;
  font-weight:500; font-size:0.86rem; letter-spacing:0.22em;
  color:var(--messing);
}

/* ---- Menue: feine Goldlinie beim Darueberfahren --------------------------- */
.stil-elegant nav.mainnav a:hover{color:var(--ink);}
.stil-elegant nav.mainnav > ul > li > a{position:relative;}
.stil-elegant nav.mainnav > ul > li > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:10px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.stil-elegant nav.mainnav > ul > li:first-child > a::after{left:0;}
.stil-elegant nav.mainnav > ul > li > a:hover::after{transform:scaleX(1);}

/* ---- Knoepfe ------------------------------------------------------------ */
.stil-elegant .btn{border-radius:0; padding:15px 28px; letter-spacing:0.02em;
  transition:background .3s, color .3s, border-color .3s;}
/* Kein Anheben beim Darueberfahren: alle Knoepfe bleiben gleich ruhig (Chefarzt, 06.11.2026). */
.stil-elegant .btn-ghost{border-color:var(--messing); color:var(--ink);}
.stil-elegant .btn-ghost:hover{background:var(--messing); border-color:var(--messing); color:var(--bg);}

/* ---- Abschnitte auf der Startseite: mehr Luft, groessere Titel ----------- */
.seite-start main > section:not(.hero){padding:112px 0;}
.seite-start main > section h2{font-size:clamp(1.9rem, 3.3vw, 2.7rem); line-height:1.12;}
.seite-start section.alt{background:var(--surface); border-color:var(--line);}
@media (max-width:560px){ .seite-start main > section:not(.hero){padding:72px 0;} }

/* ---- 5. Kopf der Startseite ----------------------------------------------
   Wie bisher: helles Foto, Schrift links, gleiche Hoehe; nur die Akzente in
   Gold und Messing. Der bildschirmhohe dunkle Kopf war ihm zu dunkel, und im
   Dunkelmodus stand der Mond verloren oben (06.11.2026: "Gerne mehr anlehnen
   an Original"). */
.seite-start .hero-band-hell{border-bottom:0;}
.seite-start .hero-band-hell .eyebrow{display:flex; align-items:center; gap:16px;}
.seite-start .hero-band-hell .eyebrow::before{content:""; flex:0 0 40px; height:1px; background:var(--gold);}
.seite-start .hero-band-hell .hero-claim{font-style:italic;}
.seite-start .hero-band-hell .btn-ghost{background:rgba(255,255,255,.86); border-color:var(--messing); color:#242220;}
.seite-start .hero-band-hell .btn-ghost:hover{background:#fff; border-color:var(--messing); color:#242220;}

/* ---- Krankheiten unter dem Kopf ----------------------------------------- */
.seite-start main > section.beschwerden{padding:96px 0 24px;}
.seite-start .beschwerden-titel{font-size:clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom:32px;}
.seite-start .beschwerden-liste{gap:16px;}
.seite-start .beschwerde{
  border:1px solid var(--line); border-left:1px solid var(--line);
  padding:20px 20px 22px;
  transition:border-color .35s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.seite-start .beschwerde:hover{
  background:var(--surface); border-color:var(--gold);
  transform:translateY(-3px); box-shadow:0 18px 34px -24px rgba(60,40,10,.45);
}

/* ---- Einleitung: feine Goldlinie statt roter Balken ---------------------- */
.seite-start main > section.startseite-einleitung{padding:88px 0 104px;}
.seite-start .einleitung-text{border-left:1px solid var(--gold); padding-left:32px; gap:22px;}
.seite-start .einleitung-text .einleitung-auftakt{font-size:clamp(1.45rem, 2.5vw, 1.95rem); line-height:1.38;}

/* ---- 3. Dunkles Band: Leitsatz ------------------------------------------ */
.seite-start main > section.zitat-band{
  padding:128px 0; text-align:center; color:var(--nacht-schrift);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(184,149,90,.16), rgba(184,149,90,0) 70%),
    var(--nacht);
}
.zitat-band blockquote{margin:0 auto; max-width:900px;}
.zitat-band p{
  margin:0; font-family:"Fraunces", Georgia, serif; font-weight:420;
  font-size:clamp(2rem, 4.6vw, 3.6rem); line-height:1.12; letter-spacing:-0.01em; text-wrap:balance;
  max-width:16ch; margin-left:auto; margin-right:auto;
}
.zitat-band cite{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:34px; font-style:normal; font-size:0.86rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-hell);
}
.zitat-band cite::before, .zitat-band cite::after{content:""; flex:0 0 48px; height:1px; background:var(--gold-hell); opacity:.7;}
@media (max-width:560px){
  .seite-start main > section.zitat-band{padding:88px 0;}
  .zitat-band cite{letter-spacing:0.1em; font-size:0.78rem;}
  .zitat-band cite::before, .zitat-band cite::after{flex-basis:24px;}
}

/* ---- 6. Drei Wege: Haarlinie statt roter Oberkante ----------------------- */
.seite-start main > section.wege{padding:112px 0;}
.seite-start .weg{
  border:1px solid var(--line); border-top:1px solid var(--gold); padding:36px 32px 32px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.seite-start .weg:hover{transform:translateY(-3px); box-shadow:0 22px 40px -28px rgba(60,40,10,.5);}

/* ---- 3. Dunkles Band: Akademie und Zahlen -------------------------------- */
.seite-start main > section.belege{
  background:var(--nacht); color:var(--nacht-schrift); border:0;
}
.seite-start section.belege h2{color:var(--nacht-schrift);}
.seite-start section.belege .eyebrow{color:var(--gold-hell);}
.seite-start section.belege p, .seite-start section.belege .beleg-desc,
.seite-start section.belege .akademie-block p{color:var(--nacht-leise);}
.seite-start section.belege .akademie-block,
.seite-start section.belege .beleg,
.seite-start section.belege .belege-liste .beleg:last-child{border-color:rgba(226,201,149,.22);}
.seite-start section.belege .beleg-zahl{color:var(--gold-hell); font-size:clamp(2.2rem, 3.6vw, 2.9rem);}
.seite-start section.belege a, .seite-start section.belege .weiter-link{color:var(--gold-hell);}
.seite-start section.belege a:hover{color:#F3E2BC;}
.seite-start section.belege .beleg-nowrap::after{background-color:var(--gold-hell);}

/* ---- 7. Bewegung (elegant.js setzt die Klassen) --------------------------
   Seit 06.11.2026 deutlicher (Chefarzt: "1.-3. ja, 4. nein"): Abschnitte mit
   laengerem Weg, Karten gestaffelt. Kein Parallax, kein Hochzaehlen, keine
   wachsenden Linien (Chefarzt). */
.einblenden-an main > section.einblenden{opacity:0; transform:translateY(44px);
  transition:opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1);}
.einblenden-an main > section.einblenden.sichtbar{opacity:1; transform:none;}
/* Karten und Listeneintraege nacheinander (Verzoegerung setzt elegant.js) */
.einblenden-an .einblenden-kind{opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.einblenden-an section.sichtbar .einblenden-kind{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .einblenden-an main > section.einblenden, .einblenden-an .einblenden-kind{opacity:1; transform:none; transition:none;}
}
@media print{
  .einblenden-an main > section.einblenden, .einblenden-an .einblenden-kind{opacity:1 !important; transform:none !important;}
}

/* ---- Unterseiten: Rubrik im dunklen Kopf in hellem Gold ------------------ */
.stil-elegant .page-hero-welle .eyebrow,
.stil-elegant .page-hero-bild .eyebrow{color:var(--gold-hell);}

/* ---- Dunkelmodus: Rubrik im Kopf der Startseite golden ------------------- */
@media (min-width:901px){
  :root.seite-start[data-theme="dark"] .hero-band-hell .eyebrow{color:var(--gold-hell);}
}
@media (min-width:901px) and (prefers-color-scheme: dark){
  :root.seite-start:not([data-theme="light"]) .hero-band-hell .eyebrow{color:var(--gold-hell);}
}

/* ---- Dunkelmodus: alles Gold, hell alles Rot (06.11.2026) ------------------
   Chefarzt zuerst: "Im Dunkelmodus wirken die rote Zeichnungen und
   Ueberschriften sehr grell. Koennte man im Dunkel diese in Gold zeichnen?",
   dann: "Alles golden im Dunkelmodus und alles rot wie bisher im hellen
   Modus. Also auch das Logo im Dunkelmodus gold."
   --accent (Schrift) hellgold, --accent-fill (Zeichen, Schaubilder, Linien)
   mittleres Gold. Logo: Wellen im Goldverlauf, Linie gold (app/stil.php).
   Kopfband der Unterseiten: Wellen und Sonne gold (--welle-rot,
   app/wellenband.php). Knoepfe: im Dunkeln als goldener Umriss (unten).
   */
@media (prefers-color-scheme: dark){
  :root.stil-elegant:not([data-theme="light"]){
    --accent:#E2C995;
    --accent-fill:#B08A45;
    --accent-tint:rgba(176,138,69,0.22);
    --logo-wellen:url(#sgk-logo-gold);
    --logo-linie:#C9A35E;
    --logo-gold-1:#B38C47; --logo-gold-2:#E9CF92; --logo-gold-3:#BF9A57;
    --welle-rot:#D4AE68;
    --welle-ufer:rgba(212,174,104,0.06);
  }
}
:root.stil-elegant[data-theme="dark"]{
  --accent:#E2C995;
  --accent-fill:#B08A45;
  --accent-tint:rgba(176,138,69,0.22);
  --logo-wellen:url(#sgk-logo-gold);
  --logo-linie:#C9A35E;
  --logo-gold-1:#B38C47; --logo-gold-2:#E9CF92; --logo-gold-3:#BF9A57;
  --welle-rot:#D4AE68;
  --welle-ufer:rgba(212,174,104,0.06);
}
/* Dunkel: Knoepfe als Umriss (goldener Rahmen, goldene Schrift), beim
   Darueberfahren eine feine Goldtoenung - die Schrift bleibt sichtbar
   (Chefarzt: "die Button in Gold zu prominent. Lieber Outline", "Bei Mouse
   Over verschwindet der Text"). Gewaehlte Felder (Skalen, Filter) leicht
   golden getoent. Hell bleibt alles wie bisher; darum nur in den zwei
   Dunkel-Bloecken. Die hellen Teile der Zeichen standen im Dunkeln fest auf
   Rosa (#FF8080, site.css) - darum "roetlich"; jetzt Gold. */
@media (prefers-color-scheme: dark){
  :root.stil-elegant:not([data-theme="light"]) .zusage-icon .h{fill:#E2C995; fill-opacity:.32;}
  :root.stil-elegant:not([data-theme="light"]) .btn-ghost:is(:hover, :focus-visible){background-color:rgba(226,201,149,.14); border-color:#E2C995; color:#F6E7C6;}
  :root.stil-elegant:not([data-theme="light"]) :is(.btn-primary, .anmeldeformular .btn-ghost, .et-drucken .btn-ghost, .kriterien-versand > summary, .unterlagen-knopf, .suchfeld button, .suchform button, .indikationen > summary::after, .aufklapper-deutlich > summary::after){
    background-color:transparent; border:1px solid #C9A35E; color:#E2C995;
  }
  :root.stil-elegant:not([data-theme="light"]) :is(.btn-primary, .anmeldeformular .btn-ghost, .et-drucken .btn-ghost, .kriterien-versand > summary, .unterlagen-knopf, .suchfeld button, .suchform button):is(:hover, :focus-visible){
    background-color:rgba(226,201,149,.14); border-color:#E2C995; color:#F6E7C6; box-shadow:none;
  }
  :root.stil-elegant:not([data-theme="light"]) :is(.news-filter-knopf[aria-pressed="true"], .gf-skala input:checked + span, .ab-leiste input:checked + span, .wiki-ansicht a[aria-current], .matrix-tabelle td.m1, .matrix-feld.m1, .unterlagen-art, .mobile-auf[aria-expanded="true"]){
    background-color:rgba(226,201,149,.18); border-color:#C9A35E; color:#F2DDB0;
  }
}
:root.stil-elegant[data-theme="dark"] .zusage-icon .h{fill:#E2C995; fill-opacity:.32;}
:root.stil-elegant[data-theme="dark"] .btn-ghost:is(:hover, :focus-visible){background-color:rgba(226,201,149,.14); border-color:#E2C995; color:#F6E7C6;}
:root.stil-elegant[data-theme="dark"] :is(.btn-primary, .anmeldeformular .btn-ghost, .et-drucken .btn-ghost, .kriterien-versand > summary, .unterlagen-knopf, .suchfeld button, .suchform button, .indikationen > summary::after, .aufklapper-deutlich > summary::after){
  background-color:transparent; border:1px solid #C9A35E; color:#E2C995;
}
:root.stil-elegant[data-theme="dark"] :is(.btn-primary, .anmeldeformular .btn-ghost, .et-drucken .btn-ghost, .kriterien-versand > summary, .unterlagen-knopf, .suchfeld button, .suchform button):is(:hover, :focus-visible){
  background-color:rgba(226,201,149,.14); border-color:#E2C995; color:#F6E7C6; box-shadow:none;
}
:root.stil-elegant[data-theme="dark"] :is(.news-filter-knopf[aria-pressed="true"], .gf-skala input:checked + span, .ab-leiste input:checked + span, .wiki-ansicht a[aria-current], .matrix-tabelle td.m1, .matrix-feld.m1, .unterlagen-art, .mobile-auf[aria-expanded="true"]){
  background-color:rgba(226,201,149,.18); border-color:#C9A35E; color:#F2DDB0;
}

/* ---- Deutlichere Wechsel der Hintergruende (06.11.2026) -------------------
   Chefarzt: "Der Wechsel von den Hintergrundfarben ist zu dezent ...
   «Alle Krankheiten haben Ursachen.» ist kaum vom Rest zu unterscheiden.
   Auch im Dunkelmodus sollten hier deutliche Unterschiede zu sehen sein."
   Hell: Elfenbein im Wechsel mit Sand (statt fast Weiss), Baender tiefdunkel.
   Dunkel: Baender warmes Bronzebraun mit Goldschein und Goldlinien statt
   noch dunkler als der Grund; Wechselabschnitte ein helleres Braun. */
:root.stil-elegant{--sand:#F1ECE2; --abschnitt-linie:rgba(184,149,90,.38);}
@media (prefers-color-scheme: dark){
  :root.stil-elegant:not([data-theme="light"]){--sand:#2C2218; --nacht:#2C2218; --band-schein:rgba(226,201,149,.22); --band-linie:rgba(226,201,149,.38);}
}
:root.stil-elegant[data-theme="dark"]{--sand:#2C2218; --nacht:#2C2218; --band-schein:rgba(226,201,149,.22); --band-linie:rgba(226,201,149,.38);}
.seite-start main > section.alt:not(.belege){background:var(--sand); border-color:transparent;}
.seite-start main > section.zitat-band{
  background:
    radial-gradient(ellipse 60% 85% at 50% 0%, var(--band-schein, rgba(184,149,90,.16)), rgba(184,149,90,0) 70%),
    var(--nacht);
  border-top:1px solid var(--band-linie, transparent); border-bottom:1px solid var(--band-linie, transparent);
}
.seite-start main > section.belege{
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, var(--band-schein, rgba(184,149,90,.10)), rgba(184,149,90,0) 70%),
    var(--nacht);
  border-top:1px solid var(--band-linie, transparent); border-bottom:1px solid var(--band-linie, transparent);
}
/* Zweiter heller Ton nur angedeutet, dazu eine feine Goldlinie zwischen den
   hellen Abschnitten (Chefarzt, 06.11.2026: "Ist diese zweite Charakterfarbe
   im Hellmodus nicht zu viel?", dann "1. ja 2. JA"). Dunkel: keine Linie
   (dort tragen die Braun-Toene den Wechsel). */
.seite-start main > section.alt:not(.belege){border-top:1px solid var(--abschnitt-linie); border-bottom:1px solid var(--abschnitt-linie);}
@media (prefers-color-scheme: dark){
  :root.stil-elegant:not([data-theme="light"]){--abschnitt-linie:transparent;}
}
:root.stil-elegant[data-theme="dark"]{--abschnitt-linie:transparent;}