/* ═══════════════════════════════════════════════════════════════
   THEME-BASE · Qigong64
   Stand: 2026-06-17 (Wasser-Wald-Welt hinzu)
   5 Codex-Themes als [data-theme="..."] Attribut
   Modern CSS Custom Properties · respektiert prefers-color-scheme
   Wasser-Wald = Default-Welt von Qigong64 (Welt-Eintritt-Stimmung)
   ═══════════════════════════════════════════════════════════════ */

/* ── Presse-Schrift Cormorant Garamond (selbst gehostet, an Presse angeglichen 23.06.) ── */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant/cormorant-300.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant/cormorant-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant/cormorant-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/cormorant/cormorant-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant/cormorant-300i.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant/cormorant-400i.woff2") format("woff2")}

/* ── Default: Codex-Dark ── */
:root,
[data-theme="dark"] {
  --qg-bg:         #04050d;
  --qg-bg-2:       #080b1a;
  --qg-bg-3:       #0c1025;
  --qg-text:       #E7E5DF;
  --qg-muted:      #9AA1C6;
  --qg-dim:        #5A6088;
  --qg-sand:       #B8AE9A;
  --qg-sand-soft:  rgba(184,174,154,.12);
  --qg-sand-glow:  rgba(184,174,154,.18);
  --qg-gold:       #B8860B;
  --qg-gold-light: #D4A840;
  --qg-gold-glow:  rgba(184,134,11,.15);
  --qg-success:    #6FCF97;
  --qg-warn:       #D4A840;
  --qg-danger:     #E07474;

  --qg-line:       rgba(184,174,154,.15);
  --qg-line-soft:  rgba(255,255,255,.05);

  /* Typografie */
  --qg-font-body:    "Cormorant Garamond", Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --qg-font-heading: "Cormorant Garamond", Georgia, 'Iowan Old Style', serif;
  --qg-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Größen-Skala — MC10-Standard: Body ≥ 16 px für Lese-Komfort */
  --qg-fs-tiny:  12px;
  --qg-fs-sm:    14px;
  --qg-fs-base:  16px;  /* Body min. 16 px (WCAG/Lese-Standard) */
  --qg-fs-lg:    19px;  /* Lesetexte 18-20 px */
  --qg-fs-xl:    24px;
  --qg-fs-h1:    32px;
  --qg-fs-h2:    20px;
  --qg-line-length: 66ch; /* Optimale Zeilenlänge */

  /* Spacing-System (Atem-Verwandt: 4 als Grundeinheit) */
  --qg-sp-1: 4px;
  --qg-sp-2: 8px;
  --qg-sp-3: 12px;
  --qg-sp-4: 16px;
  --qg-sp-5: 24px;
  --qg-sp-6: 32px;
  --qg-sp-7: 48px;
  --qg-sp-8: 64px;

  /* Radius */
  --qg-br-sm:  6px;
  --qg-br-md:  10px;
  --qg-br-lg:  14px;
  --qg-br-pill: 999px;

  /* Übergänge */
  --qg-tx-fast:    .15s ease;
  --qg-tx-smooth:  .3s ease;
  --qg-tx-slow:    .6s ease;
  --qg-tx-theme:   background-color .4s ease, color .4s ease, border-color .4s ease;

  /* Schatten + Glow */
  --qg-shadow-soft: 0 4px 16px rgba(0,0,0,.4);
  --qg-shadow-glow: 0 0 24px var(--qg-gold-glow);

  /* Atem-Tempi (CSS-Custom-Props → JS-übersetzbar) */
  --qg-atem-tempo:   12s; /* Default Box-Breath 4-4-4-4 */
  --qg-atem-skala:   0.4; /* Start-Skalierung des Atem-Kreises */
}

/* ── Codex-Sand-Hell (Tag / Pergament) ── */
[data-theme="sand-hell"] {
  --qg-bg:         #F5F1E8;
  --qg-bg-2:       #ECE5D3;
  --qg-bg-3:       #DDD3B8;
  --qg-text:       #2A2820;
  --qg-muted:      #6B6452;
  --qg-dim:        #9C9072;
  --qg-sand:       #8A7A5A;
  --qg-sand-soft:  rgba(138,122,90,.10);
  --qg-sand-glow:  rgba(138,122,90,.18);
  --qg-gold:       #8B5A00;
  --qg-gold-light: #B07A20;
  --qg-gold-glow:  rgba(139,90,0,.12);
  --qg-line:       rgba(138,122,90,.20);
  --qg-line-soft:  rgba(0,0,0,.05);
  --qg-shadow-soft: 0 4px 16px rgba(0,0,0,.08);
}

/* ── Codex-Wasser (Tief, vor Schlaf, Hex 29-Familie) ── */
[data-theme="wasser"] {
  --qg-bg:         #050a1a;
  --qg-bg-2:       #0a1230;
  --qg-bg-3:       #101840;
  --qg-text:       #D8E0EC;
  --qg-muted:      #8AA0BD;
  --qg-dim:        #5A7090;
  --qg-sand:       #6B8AAB;
  --qg-sand-soft:  rgba(107,138,171,.12);
  --qg-sand-glow:  rgba(107,138,171,.18);
  --qg-gold:       #4A8AC0;
  --qg-gold-light: #8AB8D8;
  --qg-gold-glow:  rgba(74,138,192,.15);
  --qg-line:       rgba(107,138,171,.18);
}

/* ── Codex-Feuer (Klar, Morgen, Hex 30/1) ── */
[data-theme="feuer"] {
  --qg-bg:         #18080A;
  --qg-bg-2:       #2A1015;
  --qg-bg-3:       #3A1520;
  --qg-text:       #FFEDD8;
  --qg-muted:      #D8A088;
  --qg-dim:        #A07058;
  --qg-sand:       #D8AA80;
  --qg-sand-soft:  rgba(216,170,128,.12);
  --qg-sand-glow:  rgba(216,170,128,.20);
  --qg-gold:       #FF9F40;
  --qg-gold-light: #FFC080;
  --qg-gold-glow:  rgba(255,159,64,.18);
  --qg-line:       rgba(216,170,128,.18);
}

/* ── Wasser-Wald (Default-Welt von Qigong64, Eintritts-Stimmung) ───────────
   Stand: 2026-06-17
   Tiefer See am Waldrand am Abend.
   Sand-Slot = Cyan (Wasser-Akzent), Gold-Slot = Jade (Wald-Akzent).
   So bleibt die Codex-Struktur (sand/gold als Rollen) erhalten — nur die
   Farbtöne wechseln. Alle Detail-Seiten, Player und Karten erben automatisch.
   ────────────────────────────────────────────────────────────────────── */
[data-theme="wasser-wald"],
:root:not([data-theme]) {
  /* Wasser-Wald = Qigong-Default-Identität (blau, Wasser-Welt). :root:not([data-theme])
     = Pre-JS-Fallback für jede Qigong-Seite (Specificity schlägt :root). Typo ist
     separat an die Presse angeglichen (Cormorant), Farbe bleibt blau (23.06.). */
  --qg-bg:         #0a2540;            /* Tiefblau · See am Abend */
  --qg-bg-2:       #0d2d4a;            /* Sanfter Wasser-Untergrund */
  --qg-bg-3:       #11385a;            /* Karten-Hintergrund */
  --qg-text:       #E8F4F8;            /* Helles Wasser-Licht */
  --qg-muted:      #8ab8c8;
  --qg-dim:        #5a8898;
  --qg-sand:       #5fb3d4;            /* Cyan-Akzent (war Sand) */
  --qg-sand-soft:  rgba(95,179,212,.12);
  --qg-sand-glow:  rgba(95,179,212,.20);
  --qg-gold:       #7ab891;            /* Jade-Akzent (war Gold) */
  --qg-gold-light: #9fcfb0;
  --qg-gold-glow:  rgba(122,184,145,.18);
  --qg-line:       rgba(95,179,212,.16);
  --qg-line-soft:  rgba(255,255,255,.04);
  --qg-shadow-soft: 0 4px 18px rgba(0,0,0,.5);
  --qg-shadow-glow: 0 0 28px rgba(122,184,145,.22);
}

/* ── Schriftgröße-Skala (Settings-Modal) ── */
[data-fontsize="lg"] {
  --qg-fs-base: 17px;
  --qg-fs-sm:   15px;
  --qg-fs-lg:   20px;
  --qg-fs-h1:   34px;
  --qg-fs-h2:   20px;
}
[data-fontsize="xl"] {
  --qg-fs-base: 19px;
  --qg-fs-sm:   17px;
  --qg-fs-lg:   22px;
  --qg-fs-h1:   38px;
  --qg-fs-h2:   22px;
}

/* ── Auto-Light bei system prefers-color-scheme (Initial-Hint) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Nur ein Hinweis — wirkt nur wenn user kein Theme gesetzt hat */
    color-scheme: light dark;
  }
}

/* ── Reduced-Motion Respekt (Modus-übergreifend) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Body / HTML Basis ── */
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
[data-theme="sand-hell"] html { color-scheme: light; }

body {
  margin: 0;
  background: var(--qg-bg);
  color: var(--qg-text);
  font-family: var(--qg-font-body);
  font-size: var(--qg-fs-base);
  line-height: 1.65;
  transition: var(--qg-tx-theme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Modern Reset (sanft) ── */
*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: var(--qg-gold-light); transition: color var(--qg-tx-fast); }
a:hover { color: var(--qg-sand); }

/* ── View Transitions API (sanfte Seitenwechsel, opt-in) ── */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .4s;
  }
}

/* ═══ Einheitliche Qigong-Bereichsnavigation (oben) — wasser-wald · 28.06. ═══
   Eine Zeile mit allen 7 Bereichen, auf JEDER Qigong-Seite identisch (absolute Links).
   q-topnav ist sticky (reserviert Platz); qg-topnav ist fixed (47px, kein Platzhalter)
   → dort die Bereichszeile um 47px nach unten schieben. */
.qg-sec-nav {
  display: flex; flex-wrap: wrap; gap: 2px 20px;
  justify-content: center; align-items: center;
  padding: 10px 16px;
  background: var(--qg-bg-2, #0d2d4a);
  border-bottom: 1px solid var(--qg-line, rgba(255,255,255,.10));
  font-family: var(--qg-font-mono, ui-monospace, monospace);
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.6;
}
.qg-sec-nav a { color: var(--qg-sand, #5fb3d4); text-decoration: none; padding: 3px 2px; white-space: nowrap; transition: color .2s ease; }
.qg-sec-nav a:hover { color: var(--qg-gold-light, #cfe8f2); }
.qg-sec-nav a[aria-current="page"] { color: var(--qg-text, #E8F4F8); border-bottom: 1px solid var(--qg-sand, #5fb3d4); }
.qg-topnav + .qg-sec-nav { margin-top: 47px; }
@media (max-width: 600px) {
  .qg-sec-nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 0 16px; -webkit-overflow-scrolling: touch; }
  .qg-sec-nav::-webkit-scrollbar { display: none; }
}

/* ═══ EIN einheitlicher Qigong-Footer (.qg-foot) — wasser-wald · 28.06. ═══
   Ersetzt die zwei Alt-Systeme (.qg-footer / .q-footer). Universell in theme-base. */
.qg-foot {
  text-align: center; padding: 40px 20px 48px; margin-top: 48px;
  border-top: 1px solid var(--qg-line, rgba(255,255,255,.08));
  background: var(--qg-bg-2, #0d2d4a); color: var(--qg-muted, #7fa6bd);
  font-family: var(--qg-font-mono, ui-monospace, monospace);
  font-size: 13px; line-height: 1.7;
}
.qg-foot p { margin: 0 auto 10px; }   /* auto → zentriert auch die max-width-Boxen (Scholarship) */
.qg-foot-claim strong { color: var(--qg-sand, #5fb3d4); letter-spacing: 2px; }
.qg-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; }
.qg-foot-nav a { color: var(--qg-sand, #5fb3d4); text-decoration: none; }
.qg-foot-nav a:hover { color: var(--qg-gold-light, #cfe8f2); }
.qg-foot-scholar { max-width: 560px; margin: 6px auto 12px; font-size: 12px; color: var(--qg-dim, #5a7a8f); }
.qg-foot-scholar a { color: var(--qg-sand, #5fb3d4); }
.qg-foot-spende { margin: 14px 0 10px; }
.qg-foot-spende a { display: inline-block; padding: 7px 22px; border: 1px solid #5fb3d4; border-radius: 999px; color: #5fb3d4; font-size: 13px; letter-spacing: 1.5px; text-decoration: none; transition: background .2s ease; }
.qg-foot-spende a:hover { background: rgba(95,179,212,.12); }
.qg-foot-sig { color: var(--qg-dim, #5a7a8f); font-size: 12px; letter-spacing: 1px; margin-top: 8px; }