/* ============================================================
   THE TRUE OAK — Nacht-Design (Entwurf)
   Zieht das dunkle Himmels-Design des Baum-Heros über die
   gesamte Website. Wird NACH styles.css geladen und überschreibt
   gezielt Farben; Layout und Abstände bleiben unverändert.
   ============================================================ */

:root{
  color-scheme: dark;
  /* Panels (Karten, FAQ, Formulare) statt Creme jetzt dunkles Waldgrün-Schwarz */
  --cream:#0b120d;
  --sand:#0e1811;
  --ink:#e6e0d2;
  --muted:#a89f8c;
  --line:rgba(200,162,74,.22);
  --gold:#c8a24a;
  --gold-light:#ecd9a6;
  --oak-green-300:#7ba887;
  --ok:#79c78f;
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --shadow-sm:0 4px 14px rgba(0,0,0,.45);
}

/* Nachthimmel als Grundfläche der ganzen Seite */
html{
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(120,96,44,.08), transparent 70%),
    radial-gradient(1300px 720px at 12% 28%, rgba(46,84,52,.11), transparent 70%),
    radial-gradient(1300px 720px at 88% 72%, rgba(31,84,74,.13), transparent 70%),
    #04070a;
}
body{ background:transparent; color:var(--ink); }

h1,h2,h3,.display{ color:#f2ecdd; }
a{ color:#d9c98f; }

/* --- Sternenhimmel hinter allen Sektionen (Element kommt aus night-sky.js) --- */
#nightSky{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
#nightSky .nstar{
  position:absolute;
  border-radius:50%;
  background:#e9f0ea;
  animation:nskyTwinkle var(--tw,4s) ease-in-out var(--twd,0s) infinite alternate;
}
#nightSky .nstar.warm{ background:#efe0b4; }
@keyframes nskyTwinkle{
  from{opacity:var(--omin,.18)}
  to{opacity:var(--omax,.8)}
}
@media (prefers-reduced-motion:reduce){
  #nightSky .nstar{ animation:none; opacity:var(--omax,.5); }
}

/* --- Header --- */
.site-header{
  background:rgba(5,9,7,.82);
  border-bottom:1px solid rgba(236,217,166,.12);
}
.brand b{ color:#ecd9a6; }
.nav-links a{ color:#d6d0c0; }
.nav-links a:hover{ color:#ecd9a6; }
.nav-toggle span{ background:#e6cf9c; }

/* --- Sektionen: Wechsel heller Bänder jetzt als sanfte Aufhellung im Dunkel --- */
.hero{ background:transparent; }
.section-sand{ background:rgba(233,240,234,.035); }
.section-green{ background:#11271a; }

/* --- Buttons --- */
.btn-ghost{
  color:#e8e2d4;
  border-color:rgba(200,162,74,.45);
}
.btn-ghost:hover{ background:rgba(200,162,74,.14); }

/* --- Karten & Listen --- */
.tier .price{ color:#ecd9a6; }
.faq summary{ color:#e9dfc3; }
.pill-gold{ color:#ecd9a6; }
.pill-grey{ background:#1c2620; color:#b6ac95; }
.kurs-card{ background:#132b1c; }

/* --- Footer: dunkler als das Waldgrün des hellen Designs --- */
.site-footer{ background:#081208; }

/* --- Formulare --- */
/* Zwischenüberschriften im Erstgespräch-Formular (dort per Seiten-CSS dunkelgrün) */
.sec-head h2.sec-title{ color:#e9dfc3; }
.form-card{ background:#0b120d; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field textarea, .field select{
  background:#0d1512;
  color:var(--ink);
  border-color:rgba(236,217,166,.18);
}
.scale label{ background:#0d1512; border-color:rgba(236,217,166,.18); }
.toast{ background:#1f3d2b; }

/* ============================================================
   Akzente — Wichtiges soll aus dem Dunkel herausstechen
   ============================================================ */

/* Gold-Buttons (Haupt-CTAs) leuchten leicht, beim Hover stärker */
.btn-gold{
  box-shadow:0 0 24px rgba(200,162,74,.35), 0 4px 14px rgba(0,0,0,.45);
}
.btn-gold:hover{
  box-shadow:0 0 40px rgba(222,186,106,.55), 0 14px 40px rgba(0,0,0,.55);
}

/* Kicker-Zeilen über Überschriften in hellerem Gold */
.eyebrow{ color:#e2c375; }

/* Schritt-Nummern (Dein Weg) mit Gold-Ring statt dunklem Kreis */
.step .n{
  background:#143220;
  color:#ecd9a6;
  border:1px solid rgba(200,162,74,.55);
  box-shadow:0 0 14px rgba(200,162,74,.2);
}

/* Angebots-Karte „Beliebt" deutlich hervorgehoben */
.tier.featured{
  background:#101d14;
  border-color:rgba(222,186,106,.7);
  box-shadow:0 0 0 1px rgba(222,186,106,.22), 0 0 42px rgba(200,162,74,.16), var(--shadow);
}
.tier .tag{ box-shadow:0 0 16px rgba(222,186,106,.5); }

/* „Kostenlos"-Badge leuchtet */
.pill-gold-solid{ box-shadow:0 0 16px rgba(222,186,106,.4); }

/* Kurs-Karte als Blickfang mit Gold-Rahmen */
.card.kurs-card{
  border:1px solid rgba(222,186,106,.42);
  box-shadow:0 0 42px rgba(46,84,52,.4), var(--shadow-sm);
}

/* Krisenhinweis im Footer: warm abgesetzt statt unterzugehen */
.crisis-note{
  background:rgba(190,120,70,.10);
  border:1px solid rgba(226,160,96,.45);
  border-left:4px solid #e0a060;
  color:#f0e6d2;
}
.crisis-note b{ color:#ffd9a8; }

/* Krisen-Box im Erstgespräch-Formular (Seiten-CSS ist hell-rosa → dunkel & auffällig).
   .form-card davor nötig: schlägt das später ladende Seiten-<style> per Spezifität. */
.form-card .crisis-inline{
  background:rgba(150,60,40,.18);
  border:1px solid rgba(230,140,110,.5);
  border-left:4px solid #e08a6a;
  color:#f6d9c8;
}
.form-card .crisis-inline b{ color:#ffc9a8; }

/* Datenschutz-Hinweis unterm Absenden-Knopf besser lesbar */
p.submit-note{ color:#cfc4a8; }

/* Aktives Formularfeld golden markiert */
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:rgba(222,186,106,.7);
  box-shadow:0 0 0 3px rgba(200,162,74,.22);
}

/* Gewählter Skalen-Wert hebt sich klar ab */
.scale input:checked + label{
  background:#2e5434;
  border-color:#7ba887;
  color:#fff;
  box-shadow:0 0 12px rgba(123,168,135,.35);
}