/* ═══════════════════════════════════════════════════════════════
   Kopffrei · Nachtanstrich
   Wird nach dem seiteneigenen <style> geladen und dreht die
   bestehende helle Gestaltung auf den Nachtlook. Die Seiten sind
   fast durchgehend über Farbtoken gebaut — deshalb genügt hier
   ein neuer Tokensatz plus ein paar gezielte Korrekturen für die
   Stellen, an denen Blau oder Marineblau fest verdrahtet ist.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Grundflächen */
  --bg:          #0A0E10;
  --card:        #0E1417;
  --dark:        #0A0E10;
  --dark-2:      #06090A;
  --dark-card:   #0E1417;

  /* Schrift */
  --ink:         #F2F6F5;
  --text:        rgba(242, 246, 245, .66);
  --muted:       rgba(242, 246, 245, .34);
  --light-text:  #F2F6F5;
  --light-body:  rgba(242, 246, 245, .66);
  --light-muted: rgba(242, 246, 245, .34);

  /* Linien */
  --line:        rgba(242, 246, 245, .11);
  --hairline:    rgba(242, 246, 245, .11);
  --dark-line:   rgba(242, 246, 245, .11);

  /* Akzent: aus Blau wird das Licht */
  --blue:        #F5B05E;
  --blue-btn:    #F5B05E;
  --blue-text:   #F5B05E;
  --blue-light:  #F5B05E;
  --blue-tint:   rgba(245, 176, 94, .10);

  /* Ergänzungen aus dem Entwurf */
  --licht:       #F5B05E;
  --rost:        #C4674A;
  --kante-hell:  rgba(242, 246, 245, .24);

  --radius: 16px;
  --display: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --shadow-soft: 0 2px 6px rgba(3, 5, 6, .4), 0 20px 44px -18px rgba(3, 5, 6, .6);
  --shadow-lift: 0 4px 10px rgba(3, 5, 6, .45), 0 30px 60px -20px rgba(3, 5, 6, .7);
}

html { background: var(--dark-2); }
body { background: var(--bg); color: var(--text); }
::selection { background: var(--licht); color: #1A1206; }

/* ─────────── Knöpfe ─────────── */

.btn { border-radius: 999px; }
.btn-blue { background: var(--licht); color: #1A1206;
            box-shadow: 0 10px 30px rgba(245, 176, 94, .16); }
.btn-blue:hover { background: #F7BC77; box-shadow: 0 16px 38px rgba(245, 176, 94, .26); }
.btn-ghost, .btn-outline { border-color: var(--kante-hell); color: var(--ink); }
.btn-ghost:hover, .btn-outline:hover { background: rgba(242, 246, 245, .08); }
.nav-links .btn { color: #1A1206; }

/* ─────────── Navigation ─────────── */

nav { background: rgba(6, 9, 10, .9); border-bottom: 1px solid var(--line);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.logo { color: var(--ink); }
.logo span { color: var(--licht); }
.nav-links a { color: var(--text); }
.nav-links a:hover { color: var(--ink); }

/* ─────────── Flächen, die vorher hell waren ─────────── */

.card, .step-card, .proc, .found-close, .faq details,
.invest, .depends, .media-cap, .vs-fix, .brain-center {
  background: var(--card); border-color: var(--line); color: var(--text);
}
.card h3, .step-card h3, .proc h3, .faq summary,
.invest .amount, .depends h4, .vs-fix h3, .brain-center h3 { color: var(--ink); }

h1, h2, h3, h4, .about h2, .cta-sec h2, .hero p.lead strong,
.quote-sec blockquote strong, .about-text p strong, .credit-box strong { color: var(--ink); }

/* ─────────── Akzentflächen: Blau raus, Licht rein ─────────── */

.hero::before, .quote-sec::before, .cta-sec::before, .portrait::after {
  background: radial-gradient(circle, rgba(245, 176, 94, .16), transparent 70%);
}
.hero::after, .cta-sec::after, .quote-sec cite::before, .quote-sec cite::after {
  background: linear-gradient(90deg, transparent, rgba(245, 176, 94, .45), transparent);
}
.vs-fix, .brain-center, .invest, .found-close, .credit-box {
  border: 1px solid rgba(245, 176, 94, .32);
}
.credit-box { background: rgba(245, 176, 94, .08); }
.badge { background: var(--licht); color: #1A1206; }
.step-card:hover, .proc:hover, .faq details[open] { border-color: rgba(245, 176, 94, .45); }
.eyebrow, .kicker { color: var(--text); }
.eyebrow::before, .kicker::before { background: var(--licht); }

/* ─────────── Bildbänder ─────────── */

.hero-media::after {
  background:
    linear-gradient(96deg, rgba(6,9,10,.95) 0%, rgba(6,9,10,.82) 36%, rgba(6,9,10,.5) 70%, rgba(6,9,10,.2) 100%),
    linear-gradient(180deg, rgba(6,9,10,.38) 0%, rgba(6,9,10,.22) 45%, rgba(6,9,10,.6) 100%);
}
.media-band::after {
  background: linear-gradient(90deg, rgba(6,9,10,.86) 0%, rgba(6,9,10,.5) 42%, rgba(6,9,10,.06) 78%, transparent 100%);
}
.portrait { box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7); }

/* ─────────── Fußzeile ─────────── */

footer { background: var(--dark-2); border-top: 1px solid var(--line); color: var(--text); }
footer a { color: var(--text); }
footer a:hover { color: var(--licht); }

/* ─────────── Formulare und Demo ─────────── */

input, textarea, select {
  background: rgba(242, 246, 245, .05); border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--licht); outline-offset: 2px; }

/* ─────────── Consent-Leiste ─────────── */

#consent, .consent, [id*="cookie"] {
  background: rgba(10, 14, 16, .96); border-top: 1px solid var(--line); color: var(--text);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

:focus-visible { outline: 2px solid var(--licht); outline-offset: 3px; }

/* ─────────── Consent-Fenster ───────────
   Wird per JavaScript samt eigenem <style> eingehängt, also nach dieser
   Datei. Deshalb hier über höhere Spezifität statt über die Reihenfolge. */

body #kf-consent {
  background: rgba(12, 17, 20, .97);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
body #kf-consent p { color: var(--text); }
body #kf-consent a { color: var(--licht); }
body #kf-consent .kf-c-ico { filter: drop-shadow(0 6px 14px rgba(245, 176, 94, .3)); }
body #kf-consent .kf-c-ico > rect { fill: var(--licht); }
body #kf-consent .kf-c-ico > g { fill: #1A1206; }
body #kf-consent .kf-c-no { background: rgba(242, 246, 245, .08); color: var(--ink); }
body #kf-consent .kf-c-no:hover { background: rgba(242, 246, 245, .14); }
body #kf-consent .kf-c-yes { background: var(--licht); color: #1A1206;
                             box-shadow: 0 8px 20px -6px rgba(245, 176, 94, .5); }
body #kf-consent .kf-c-yes:hover { background: #F7BC77; }

/* ─────────── Fotos ins Nachtklima holen ───────────
   Die Aufnahmen stammen aus der hellen Fassung und sind fuer den
   Nachtlook zu bunt und zu hell. Statt neue Bilder zu bestellen,
   werden sie hier gedaempft — dieselbe Behandlung wie beim Hotel
   auf der Startseite. */

.hero-media img, .media-band img {
  filter: brightness(.68) saturate(.78) contrast(1.06);
}
.hero-media img { opacity: .55; }

/* ═══════════════════════════════════════════════════════════════
   Bildmarke (Cloche)
   Inline-SVG in Navigation und Fußzeile. Erbt über currentColor
   die Farbe ihres Umfelds, damit sie überall zum Text passt.
   ═══════════════════════════════════════════════════════════════ */

.marke-bild{
  width:1.05em; height:auto; flex:none;
  fill:var(--licht); color:var(--licht);
  overflow:visible;
}

/* Navigation: Marke als Verweis auf die Startseite */
.wortmarke,
a.logo{
  display:inline-flex; align-items:center; gap:.5em;
  text-decoration:none; color:var(--ink);
}
.wortmarke b,
a.logo b{ color:var(--licht); font-weight:inherit; }
.wortmarke:hover .marke-bild,
a.logo:hover .marke-bild{ filter:brightness(1.12); }

/* Der frühere Leuchtpunkt ist durch die Bildmarke ersetzt */
.wortmarke > i{ display:none; }

/* Fußzeile */
.fuss-wort b{ color:var(--licht); }
footer .marke-bild{ width:1.15em; margin-right:.12em; vertical-align:-.14em; }

/* Auf der 404-Seite steht die Marke allein über der Überschrift */
body > div > .wortmarke{ margin-bottom:18px; font-size:19px; font-weight:700; }