/* Dark-Version (05.11.2026): gleiche Marke, umgedreht. Aubergine-Schwarz als Grund, Ivory als Schrift, Gold als Akzent.
   Schalter: js/tunein-theme.js, Wahl bleibt in localStorage „4t-theme“. */
html[data-theme="dark"] {
  color-scheme: dark;
  /* 2. Fassung (05.11.): heller Grund statt fast Schwarz, Flächen nur eine Stufe heller, Schrift kräftiger */
  --paper: #2b1b23;
  --card: #34222b;
  --ink: #FAF4EF;
  --mute: #D8C8CF;
  --line: rgba(250, 244, 239, 0.16);
  --accent: #EBC074;
  --forest: #4a1531;
  --s1: #3b2832; --s2: #36242d; --s3: #36242d; --s4: #36242d; --s5: #3b2832;
  --glass: rgba(250, 244, 239, 0.06);
}
html[data-theme="dark"] body { font-weight: 400; }  /* Lato 300 wirkt hell auf dunkel zu dünn */
html.theme-anim, html.theme-anim body, html.theme-anim body * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }

/* Kopfzeile: beim Scrollen dunkle Leiste und das helle Logo */
html[data-theme="dark"] .nav.is-scrolled { box-shadow: 0 1px 0 rgba(241,233,228,0.08); }
html[data-theme="dark"] .nav .logo .logo-on-light { opacity: 0 !important; }
html[data-theme="dark"] .nav .logo .logo-on-dark { opacity: 1 !important; }
html[data-theme="dark"] .intro .intro-logo { background: var(--paper); }

/* Knöpfe: „dunkle“ Umrissknöpfe werden hell */
html[data-theme="dark"] .btn.dark:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-theme="dark"] .reset-split .btn.dark { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
html[data-theme="dark"] .week-nav button.text-link { border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .week-nav button.text-link:hover, html[data-theme="dark"] .week-nav button.text-link:focus-visible { background: var(--ink); color: var(--paper); }

/* Stundenplan */
html[data-theme="dark"] .sg-root .sg-card { --c: #E7A9C8; }
html[data-theme="dark"] .sg-root .sg-card.cat-pilates { --c: var(--sage); } html[data-theme="dark"] .sg-root .sg-card.cat-fitness { --c: #9fb3c4; } html[data-theme="dark"] .sg-root .sg-card.cat-meditacija { --c: #d9bd78; } html[data-theme="dark"] .sg-root .sg-card.cat-privatno { --c: #c3b4d3; }
html[data-theme="dark"] .sg-root a.sg-card:hover { box-shadow: 0 10px 28px -14px rgba(0,0,0,0.6); }
html[data-theme="dark"] .sg-root .sg-status.ok, html[data-theme="dark"] .sg-root .sg-flip.is-mine .sg-cta { color: #9cc79a; }
html[data-theme="dark"] .sg-root .sg-strip button.is-active { background: var(--forest); color: var(--ivory); }

/* Formulare und Hinweise */
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color: var(--ink); background-color: transparent; }
html[data-theme="dark"] select option { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .field-err { color: #f0a597; }
html[data-theme="dark"] [aria-invalid="true"] { border-color: #f0a597 !important; box-shadow: 0 1px 0 #f0a597; }


/* Schalter */
.theme-toggle { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: .2rem; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; opacity: .8; transition: opacity .2s, transform .5s cubic-bezier(.2,.8,.2,1), background .2s; }
.theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; transform: rotate(-20deg); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle svg path:only-child { fill: currentColor; stroke: none; }
@media (max-width: 420px) { .theme-toggle { width: 2.1rem; height: 2.1rem; margin-left: 0; } }

/* Logos mit Aubergine-Schrift: helle Fassung (Chrome, Safari, Edge; sonst bleibt das Original) */
html[data-theme="dark"] .wm-inline { content: url("../img/brand/4TUNEin_Schriftzug_White.svg"); }
html[data-theme="dark"] .sf-brand img { content: url("../img/brand/4TUNEin_Ganesha_Horizontal_WhiteGold.svg"); }
html[data-theme="dark"] .rec-lock { color: #5E1239; }
@media (max-width: 860px) { .theme-toggle { width: 2rem; height: 2rem; border-color: transparent; margin-left: -.2rem; } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } }
/* Handy-Kopfzeile (05.11.): Logo schon ab 480 px klein (vorher erst ab 420, dazwischen wurde HR/EN abgeschnitten); Blog-Knopf weicht dem Schalter */
@media (max-width: 480px) {
  html[data-page="site"] .logo img, .logo img { height: 36px; }
  .nav .nav-pill { display: none !important; }
  .nav .nav-cta { padding-left: .9rem; padding-right: .9rem; }
}
@media (max-width: 380px) { .logo img { height: 30px; } .nav .nav-cta { padding-left: .65rem; padding-right: .65rem; letter-spacing: .08em; } .lang button { min-width: 1.8rem; } }
@media (max-width: 340px) { .nav .nav-cta { font-size: .6rem; padding: .45rem .5rem; } .lang button { min-width: 1.5rem; } .nav nav { gap: .3rem; } }