/* ==========================================================================
   MoneyLevel – Stylesheet (Entwurf)
   Mobil zuerst: Grundregeln gelten fürs Handy, größere Bildschirme per @media.
   Schriften liegen lokal in /fonts (SIL OFL), kein Nachladen von Google.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

/* ---------- Markenfarben ---------- */
:root {
  --schwarz: #0A0A0A;
  --flaeche: #131210;      /* leicht aufgehellte Fläche für Abschnitte */
  --karte: #1A1814;        /* Kartenhintergrund */
  --linie: #3A3122;        /* dezente Goldlinie */
  --gold: #C8A35F;
  --gold-hell: #EAC97F;
  --sand: #E9DAB0;         /* Fließtext */
  --bronze: #8C6428;
  --text-leise: #BFB39A;   /* Nebentext, Kontrast > 7:1 auf Schwarz */
  --radius: 14px;
  --max: 1180px;
  --abstand: clamp(56px, 9vw, 112px);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--schwarz); color: var(--sand);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem; line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hell); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, .anton {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; color: #fff; margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 9vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 3.6vw, 1.55rem); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
.gold { color: var(--gold); }
.verlauf { background: linear-gradient(100deg, var(--bronze), var(--gold-hell) 45%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gold); color: #000; padding: 10px 14px; z-index: 100; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 32px, var(--max)); margin-inline: auto; }
.abschnitt { padding-block: var(--abstand); }
.abschnitt--flaeche { background: var(--flaeche); border-block: 1px solid #1f1c16; }
.kicker { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.einleitung { font-size: 1.08rem; color: var(--sand); max-width: 62ch; }
.leise { color: var(--text-leise); font-size: .92rem; }

/* ---------- Entwurfs-Hinweis und Platzhalter ---------- */
.entwurf-banner { line-height: 1.3; background: repeating-linear-gradient(45deg, #2b230f, #2b230f 12px, #221c0c 12px, #221c0c 24px); color: var(--gold-hell); text-align: center; font-size: .8rem; padding: 6px 12px; font-weight: 600; letter-spacing: .04em; }
.ph { background: rgba(234, 201, 127, .12); outline: 1px dashed var(--gold-hell); color: var(--gold-hell); padding: 0 .3em; border-radius: 4px; font-weight: 600; }
.ph-block { border: 2px dashed var(--gold); border-radius: var(--radius); padding: 20px; background: rgba(200, 163, 95, .06); }

/* ---------- Kopfbereich / Navigation ---------- */
/* Kopfzeile bewusst voll deckend: mit halbdurchsichtigem Grund plus
   backdrop-filter zeichnete Firefox das Logo sichtbar blasser als Chrome. */
.kopf { position: sticky; top: 0; z-index: 50; background: #0A0A0A; border-bottom: 1px solid #1f1c16; }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.kopf__logo img { height: 46px; width: auto; }
.menue-knopf { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--linie); color: var(--sand); font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.menue-knopf__striche { width: 18px; height: 2px; background: currentColor; position: relative; }
.menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.menue-knopf__striche::before { top: -6px; } .menue-knopf__striche::after { top: 6px; }
.nav { display: none; }
.nav.offen { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--schwarz); border-bottom: 1px solid var(--linie); padding: 8px 16px 20px; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 12px 4px; color: var(--sand); text-decoration: none; font-weight: 500; border-bottom: 1px solid #1f1c16; }
.nav a[aria-current="page"] { color: var(--gold-hell); }
.nav a.knopf--gold, .nav a.knopf--gold:hover { color: #0A0A0A; }
.nav .knopf { margin-top: 14px; border-bottom: 0; display: inline-flex; }
.no-js .nav { display: block; position: static; }
.no-js .menue-knopf { display: none; }

@media (min-width: 960px) {
  .menue-knopf { display: none; }
  .nav, .nav.offen { display: block; position: static; padding: 0; border: 0; background: none; }
  .nav ul { display: flex; align-items: center; gap: 4px; }
  .nav a { border: 0; padding: 8px 12px; font-size: .95rem; }
  .nav a:hover { color: #fff; }
  .nav .knopf { margin: 0 0 0 8px; }
  .kopf__logo img { height: 54px; }
}

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 12px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; font: inherit; font-weight: 600; line-height: 1.2; text-align: center; }
.knopf--gold { background: linear-gradient(180deg, var(--gold-hell), var(--gold)); color: #0A0A0A; }
.knopf--gold:hover { background: var(--gold-hell); color: #000; }
.knopf--rand { border-color: var(--gold); color: var(--gold-hell); background: transparent; }
.knopf--rand:hover { background: rgba(200, 163, 95, .12); color: #fff; }
.knopf--klein { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.knopf[aria-disabled="true"] { opacity: .7; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 40px 0; background:
  radial-gradient(60% 50% at 75% 40%, rgba(200, 163, 95, .18), transparent 70%), var(--schwarz); }
.hero__grid { display: grid; gap: 8px; align-items: end; }
.hero__text { padding-bottom: 8px; }
.hero h1 { margin-bottom: .3em; }
.hero__claim { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.2rem, 4.4vw, 1.8rem); color: var(--gold); letter-spacing: .03em; margin-bottom: .6em; }
.hero__lead { font-size: 1.08rem; max-width: 52ch; }
.hero__bulle { justify-self: center; width: auto; height: min(88vw, 380px); object-fit: contain; }
.hero__punkte { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 8px; }
.hero__punkte li { padding-left: 28px; position: relative; }
.hero__punkte li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(-45deg); }
/* Handy: Bulle rechts neben Kicker und Überschrift, damit er im ersten Bildschirm steht */
@media (max-width: 859px) {
  .hero__bulle { position: absolute; right: 0; top: 16px; height: 225px; z-index: 0; }
  .hero__text { position: relative; z-index: 1; }
  .hero__text > .kicker, .hero h1 { max-width: 66%; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
}
@media (min-width: 860px) {
  .hero { padding-top: 64px; }
  .hero__grid { grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; }
  .hero__text { padding-bottom: 56px; }
  .hero__bulle { height: min(76vh, 640px); align-self: end; }
}

/* ---------- Raster und Karten ---------- */
.raster { display: grid; gap: 16px; }
@media (min-width: 640px) { .raster--2, .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .raster--3 { grid-template-columns: repeat(3, 1fr); } .raster--4 { grid-template-columns: repeat(4, 1fr); } .raster--gap { gap: 24px; } }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.karte h3 { margin-bottom: .35em; }
.karte p:last-child { margin-bottom: 0; }
.saeule__nr { font-family: "Anton", sans-serif; font-size: 2.6rem; line-height: 1; color: var(--gold); opacity: .9; margin-bottom: 8px; }

/* Produktkarte */
.produkt { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.produkt[hidden] { display: none; }
.produkt__bild { aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.produkt__bild img { width: 100%; height: 100%; object-fit: cover; }
.produkt__platzhalter { aspect-ratio: 3 / 1; display: grid; place-items: center; background:
  radial-gradient(80% 80% at 50% 30%, rgba(200, 163, 95, .16), transparent 70%), #100f0c; }
.produkt__platzhalter img { width: 64px; opacity: .55; }
.produkt__inhalt { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.produkt__kat { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.produkt__titel { font-family: "Poppins", sans-serif; text-transform: none; font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: #fff; margin: 0; letter-spacing: 0; }
.produkt__unter { color: var(--text-leise); font-size: .9rem; margin: 0; }
.produkt__kurz { font-size: .95rem; margin: 6px 0 0; }
.produkt__fuss { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.preis { font-weight: 700; color: #fff; font-size: 1.1rem; }
.status { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.status--verfuegbar { background: var(--gold); color: #0A0A0A; }
.status--bald { background: #0A0A0A; color: var(--gold-hell); border: 1px solid var(--gold); }
.status--spaeter { background: #0A0A0A; color: var(--text-leise); border: 1px solid #555; }
.produkt__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ganze Karte klickbar */
.produkt__fuss .knopf { position: relative; z-index: 2; }

/* ---------- Shop: Suche und Filter ---------- */
.filter { display: grid; gap: 14px; margin-bottom: 26px; }
.suche { position: relative; }
.suche input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); color: #fff; font: inherit; }
.suche input::placeholder { color: #9d927c; }
.suche svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--gold); pointer-events: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; color: var(--sand); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #0A0A0A; font-weight: 600; }
.chip__zahl { opacity: .75; font-size: .8em; margin-left: 4px; }
.filter__zeile { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.umschalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .92rem; }
.umschalter input { width: 20px; height: 20px; accent-color: var(--gold); }
.treffer { font-size: .92rem; color: var(--text-leise); }
.leer { text-align: center; padding: 40px 16px; border: 1px dashed var(--linie); border-radius: var(--radius); }

/* Kategorie-Kacheln (Startseite) */
.kat-kachel { text-decoration: none; color: var(--sand); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; display: block; }
.kat-kachel:hover { border-color: var(--gold); color: #fff; }
.kat-kachel strong { display: block; color: #fff; font-size: 1.02rem; margin-bottom: 4px; }
.kat-kachel span { font-size: .88rem; color: var(--text-leise); }

/* ---------- Geschäftsideen ---------- */
.idee { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; min-height: 150px; padding-top: 76px !important; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.idee[hidden] { display: none; }
.idee__nr { position: absolute; top: 6px; right: 14px; font-family: "Anton", sans-serif; font-size: 4.2rem; line-height: 1; color: rgba(200, 163, 95, .16); }
.idee__bild { position: absolute; inset: 0; }
.idee__bild img { width: 100%; height: 100%; object-fit: cover; }
.idee__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.1), rgba(10,10,10,.92) 70%); }
.idee__inhalt { position: relative; z-index: 1; }
.idee__bereich { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.idee h3 { font-family: "Poppins", sans-serif; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.08rem; margin: 4px 0 8px; }
.idee--mit-bild { min-height: 260px; }
.idee a.idee__link { color: #fff; text-decoration: none; }
.idee a.idee__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* ---------- Gründer ---------- */
.gruender { display: grid; gap: 28px; align-items: center; }
.gruender__bild { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); max-width: 460px; }
@media (min-width: 860px) { .gruender { grid-template-columns: .85fr 1.15fr; gap: 56px; } }
.zitat-kasten { border-left: 4px solid var(--gold); padding: 6px 0 6px 18px; font-size: 1.1rem; color: #fff; margin: 20px 0; }

/* ---------- Sprüche-Slider ---------- */
.sprueche { text-align: center; }
.spruch { max-width: 820px; margin: 0 auto; min-height: 210px; display: flex; flex-direction: column; justify-content: center; }
.spruch__titel { font-family: "Anton", sans-serif; text-transform: uppercase; color: var(--gold); font-size: clamp(1.3rem, 4vw, 1.8rem); letter-spacing: .04em; margin-bottom: 12px; }
.spruch__text { font-size: clamp(1.15rem, 3.6vw, 1.6rem); line-height: 1.45; color: #fff; margin: 0; }
.spruch__steuerung { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.rund { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold-hell); font-size: 1.3rem; cursor: pointer; }
.rund:hover { background: rgba(200, 163, 95, .15); }
.spruch__zaehler { min-width: 70px; color: var(--text-leise); font-size: .9rem; }

/* ---------- Formular / Newsletter ---------- */
.formular { display: grid; gap: 12px; max-width: 560px; }
.formular label { font-weight: 600; font-size: .95rem; }
.formular input[type="email"], .formular input[type="text"] { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linie); background: #0f0e0b; color: #fff; font: inherit; }
.formular__meldung { font-size: .92rem; color: var(--gold-hell); min-height: 1.4em; }
/* Kontaktformular (kontakt.html -> kontakt.php) */
.formular--kontakt { max-width: 640px; margin-top: 28px; gap: 18px; }
.feld { display: grid; gap: 6px; }
.formular select, .formular textarea { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linie); background: #0f0e0b; color: #fff; font: inherit; }
.formular textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.formular select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible { border-color: var(--gold-hell); }
.formular--kontakt input[type="text"], .formular--kontakt input[type="email"], .formular select, .formular textarea { font-size: max(16px, 1rem); } /* 16px: kein Auto-Zoom auf dem iPhone */
.feld__hilfe { font-size: .88rem; color: var(--text-leise); }
.pflicht { color: var(--gold-hell); }
.feld--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.feld--check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--gold); }
.feld--check label { font-weight: 400; }
.formular--kontakt .knopf { justify-self: start; }
@media (max-width: 520px) { .formular--kontakt .knopf { justify-self: stretch; } }
.formular__fehler { margin: 0; padding: 14px 16px; border-radius: 12px; border: 2px solid #E07A5F; background: rgba(224, 122, 95, .1); color: #fff; }
/* Honeypot: für Menschen und Screenreader unsichtbar, aber nicht display:none (Bots erkennen das) */
.honig { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.newsletter { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .newsletter { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ---------- Werbung / Partner ---------- */
.werbung-label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: #2a2a2a; color: #fff; padding: 3px 8px; border-radius: 4px; }
.partner { border: 1px solid #444; border-radius: var(--radius); padding: 20px; background: #121212; }

/* ---------- Produktseite ---------- */
.produkt-hero { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .produkt-hero { grid-template-columns: 1.05fr .95fr; gap: 48px; } }
.produkt-hero__bild { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); }
.kaufbox { background: var(--karte); border: 1px solid var(--gold); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; }
.kaufbox .preis { font-size: 1.8rem; }
/* Kaufknopf, solange es noch keinen Digistore24-Link gibt (build.py: kaufknopf) */
.knopf--aus, .knopf--aus:hover { background: transparent; color: var(--gold-hell); border: 2px dashed var(--gold); cursor: not-allowed; }
.bald-hinweis { display: block; font-size: .92rem; line-height: 1.5; }
.knopfreihe .bald-hinweis { flex-basis: 100%; }
.upsell { border: 1px dashed var(--gold); border-radius: var(--radius); padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.upsell img { width: 54px; flex: 0 0 auto; }
.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.haken li { padding-left: 30px; position: relative; }
.haken li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(-45deg); }
.kreuz { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.kreuz li { padding-left: 30px; position: relative; }
.kreuz li::before, .kreuz li::after { content: ""; position: absolute; left: 4px; top: .75em; width: 16px; height: 3px; background: #b07a6a; }
.kreuz li::before { transform: rotate(45deg); } .kreuz li::after { transform: rotate(-45deg); }
.fotostreifen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fotostreifen img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (min-width: 760px) { .fotostreifen { grid-template-columns: repeat(4, 1fr); } }
.hinweis { border: 1px solid var(--linie); background: #100f0c; border-radius: var(--radius); padding: 18px 20px; font-size: .93rem; }

/* FAQ mit <details> */
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; color: #fff; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 1.6rem; color: var(--gold); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 18px; }

/* Fahrplan (Was wir vorhaben) */
.fahrplan { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: schritt; }
.fahrplan li { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 18px 18px 66px; position: relative; counter-increment: schritt; }
.fahrplan li::before { content: counter(schritt); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #0A0A0A; font-weight: 700; display: grid; place-items: center; }
.fahrplan strong { color: #fff; }
.fahrplan .jetzt { border-color: var(--gold); }

/* ---------- Rechtliches / Textseiten ---------- */
.textseite { max-width: 780px; }
.textseite h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-top: 1.6em; }

/* ---------- Fußbereich ---------- */
.fuss { border-top: 1px solid var(--linie); padding-block: 48px 28px; background: #070707; font-size: .93rem; }
.fuss__raster { display: grid; gap: 28px; }
@media (min-width: 800px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss h2 { font-family: "Poppins", sans-serif; text-transform: none; font-size: 1rem; font-weight: 700; letter-spacing: 0; color: #fff; margin-bottom: 10px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fuss a { color: var(--sand); text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); text-decoration: underline; }
.fuss__unten { margin-top: 36px; padding-top: 18px; border-top: 1px solid #1f1c16; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: var(--text-leise); font-size: .85rem; }
.fuss__logo { width: 180px; margin-bottom: 12px; }

/* ---------- Startseite: Ängste (Hassan, 18.09.2026) ---------- */
.abschnitt--schmal { padding-block: clamp(40px, 6vw, 72px); }
.angst-raster { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 700px) { .angst-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .angst-raster { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.angst { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.angst p { font-size: .96rem; }
.angst strong { color: #fff; }
.angst__satz { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: clamp(1.25rem, 3.6vw, 1.5rem) !important; line-height: 1.15; color: var(--gold-hell); margin-bottom: .7em; }
.angst__schritt { margin: auto 0 0 !important; padding: 12px 14px; border-left: 4px solid var(--gold); background: rgba(200, 163, 95, .08); border-radius: 0 10px 10px 0; }
.angst--fazit { border-color: var(--gold); justify-content: center; background: linear-gradient(160deg, #1f1a10, var(--karte) 60%); }
.werkzeuge-dezent { padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid #1f1c16; }
.werkzeuge-dezent .produkt { opacity: .95; }

/* ---------- 15-Minuten-Termingespräch (Hassan, 20.09.2026) ----------
   Ein Kasten mit Goldrand: fällt auf, ohne die Seite zu zerschneiden.
   Mobil untereinander, ab 900px zweispaltig (Text links, Ablauf + Knopf rechts). */
.gespraech {
  background: linear-gradient(160deg, #1f1a10, var(--karte) 62%);
  border: 1px solid var(--gold); border-radius: var(--radius);
  padding: clamp(22px, 4vw, 40px); display: grid; gap: 26px;
}
@media (min-width: 900px) { .gespraech { grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; } }
.gespraech h2 { font-size: clamp(1.55rem, 4.6vw, 2.4rem); margin-bottom: .35em; }
/* "unverbindlich und kostenlos" soll direkt unter der Überschrift auffallen */
.gespraech__frei { font-family: "Anton", Impact, sans-serif; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(1.1rem, 3.2vw, 1.4rem); color: var(--gold);
  margin: 0 0 .8em; }
.gespraech > div > :last-child { margin-bottom: 0; }
.gespraech__box { background: #100f0c; border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; display: grid; gap: 16px; align-content: start; }
.gespraech__box h3 { font-family: "Poppins", sans-serif; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.05rem; }
.gespraech__box .knopf { justify-self: start; }
@media (max-width: 520px) { .gespraech__box .knopf { justify-self: stretch; } }
/* schmale Variante des Fahrplans: passt in die Seitenspalte */
.fahrplan--schmal { gap: 10px; }
.fahrplan--schmal li { padding: 12px 14px 12px 56px; font-size: .95rem; }
.fahrplan--schmal li::before { left: 14px; top: 12px; width: 28px; height: 28px; font-size: .9rem; }

/* ==========================================================================
   HELLE ABSCHNITTE (Hassan, 20.09.2026, Entscheidung Andreas)
   ==========================================================================
   Prinzip wie im Businessplan-PDF: dunkle Trennbereiche, helle Textseiten.
   Ein Abschnitt bekommt dafür im HTML zusätzlich die Klasse "hell".
   Dunkel bleiben: Hero, Bulle, Fotostrecken, Sprüche, Produkt- und
   Ideenkacheln, Kopf und Fuß.

   Kontraste (WCAG AA, gegen Cremeweiß #FBF7EE gerechnet):
     Fließtext   #1B1A17   16,3:1   (AA + AAA)
     Nebentext   #5C564A    6,7:1   (AA)
     Goldakzent  #8C6428    5,0:1   (AA, auch für kleine Schrift)
     Links       #7A5620    6,4:1   (AA + AAA)
     Rahmen von Bedienelementen #8C8068  ~3,3:1 (AA für Nicht-Text)
   Das helle Markengold #EAC97F käme auf 1,4:1 und wird auf Hell NICHT
   verwendet. Es bleibt den dunklen Abschnitten vorbehalten.
   -------------------------------------------------------------------------- */
.hell {
  /* Flächen und Schrift umstellen: alles, was diese Variablen nutzt,
     zieht automatisch mit (Karten, Rahmen, Nebentext). */
  --flaeche: #F3EDDF;        /* abgesetzte helle Fläche */
  --karte: #FFFFFF;          /* Karten */
  --linie: #E2D7BE;          /* feine Trennlinien, nur Deko */
  --sand: #1B1A17;           /* Fließtext */
  --text-leise: #5C564A;     /* Nebentext */
  --creme: #FBF7EE;          /* Grundfläche */
  --linie-ui: #8C8068;       /* Rahmen von Bedienelementen, ≥ 3:1 */
  --gold-text: #8C6428;      /* Goldakzent, dunkel genug für Schrift */
  --link: #7A5620;
  --kopf-schrift: #14120E;
  background: var(--creme);
  color: var(--sand);
  border-block-color: var(--linie);
}
.hell.abschnitt--flaeche { background: var(--flaeche); }

/* ---------- Schrift ---------- */
.hell h1, .hell h2, .hell h3, .hell .anton { color: var(--kopf-schrift); }
.hell strong { color: var(--kopf-schrift); }
.hell .einleitung { color: var(--sand); }
.hell .kicker, .hell .gold, .hell .saeule__nr, .hell .angst__satz,
.hell .gespraech__frei, .hell .produkt__kat { color: var(--gold-text); }
.hell .saeule__nr { opacity: 1; }
.hell a { color: var(--link); }
.hell a:hover { color: var(--kopf-schrift); }
.hell :focus-visible { outline-color: var(--gold-text); }
.hell .verlauf { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-text); }

/* ---------- Karten und Kästen ---------- */
.hell .karte, .hell .angst, .hell .fahrplan li, .hell .hinweis,
.hell .gespraech__box, .hell .kat-kachel, .hell .partner { background: #FFFFFF; border-color: var(--linie); }
.hell .kat-kachel { color: var(--sand); }
.hell .kat-kachel strong { color: var(--kopf-schrift); }
.hell .kat-kachel:hover { border-color: var(--gold-text); color: var(--kopf-schrift); }
.hell .angst__schritt { background: rgba(140, 100, 40, .10); border-left-color: var(--gold-text); }
.hell .angst--fazit { background: linear-gradient(160deg, #F6EBD3, #FFFFFF 60%); border-color: var(--gold-text); }
/* Diese Überschrift trägt im HTML eine feste weiße Farbe, auf Hell wäre sie unlesbar */
.hell .angst--fazit .anton { color: var(--kopf-schrift) !important; }
.hell .zitat-kasten { border-left-color: var(--gold-text); color: var(--kopf-schrift); }
.hell .gespraech { background: linear-gradient(160deg, #FFFDF7, #F6EFE0 62%); border-color: #C0A368; }
.hell .kaufbox { background: #FFFFFF; border-color: var(--gold-text); }
.hell .upsell { border-color: var(--gold-text); }
.hell .preis { color: var(--kopf-schrift); }
.hell .leer { border-color: var(--linie-ui); }

/* Haken, Kreuze, Fahrplan-Ziffern */
.hell .haken li::before, .hell .hero__punkte li::before { border-color: var(--gold-text); }
.hell .kreuz li::before, .hell .kreuz li::after { background: #A0553E; }
.hell .fahrplan li::before { background: var(--gold-text); color: #FFFFFF; }
.hell .fahrplan .jetzt { border-color: var(--gold-text); }

/* ---------- Knöpfe ---------- */
/* Der Goldknopf bleibt unverändert: Schwarz auf Gold sind 8,9:1. */
.hell .knopf--rand { border-color: var(--gold-text); color: var(--link); }
.hell .knopf--rand:hover { background: rgba(140, 100, 40, .10); color: var(--kopf-schrift); }
.hell .knopf--aus, .hell .knopf--aus:hover { border-color: var(--gold-text); color: #6B4C1E; }

/* ---------- Suche, Chips, Filter ---------- */
.hell .suche input { background: #FFFFFF; border-color: var(--linie-ui); color: var(--sand); }
.hell .suche input::placeholder { color: #6B655A; }
.hell .suche svg { color: var(--gold-text); }
.hell .chip { border-color: var(--linie-ui); color: var(--sand); }
.hell .chip:hover { border-color: var(--gold-text); }
.hell .chip[aria-pressed="true"] { background: var(--gold-text); border-color: var(--gold-text); color: #FFFFFF; }
.hell .umschalter input { accent-color: var(--gold-text); }
.hell .treffer { color: var(--text-leise); }

/* ---------- Formular ---------- */
.hell .formular input[type="email"], .hell .formular input[type="text"],
.hell .formular textarea { background: #FFFFFF; border-color: var(--linie-ui); color: var(--sand); }
.hell .formular input:focus-visible, .hell .formular select:focus-visible,
.hell .formular textarea:focus-visible { border-color: var(--gold-text); }
/* Auswahlfeld: der kleine Pfeil wird aus zwei Verläufen gezeichnet. Weil hier die
   Fläche weiß wird, müssen Position, Größe und Wiederholung mit angegeben werden,
   sonst füllt der Verlauf das ganze Feld. Helles Gold wäre auf Weiß zu blass. */
.hell .formular select {
  background-color: #FFFFFF; border-color: var(--linie-ui); color: var(--sand);
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-text) 50%),
                    linear-gradient(135deg, var(--gold-text) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.hell .feld--check input { accent-color: var(--gold-text); }
.hell .feld__hilfe { color: var(--text-leise); }
.hell .pflicht { color: #8C2F17; }                         /* 6,1:1 auf Cremeweiß */
.hell .formular__meldung { color: #6B4C1E; }
.hell .formular__fehler { background: #FBE7E0; border-color: #B4462A; color: #1B1A17; }

/* ---------- FAQ ---------- */
.hell .faq details { border-bottom-color: var(--linie); }
.hell .faq summary { color: var(--kopf-schrift); }
.hell .faq summary::after { color: var(--gold-text); }

/* ---------- Bilder auf hellem Grund ----------
   Fotos bekommen einen weichen Schatten statt des dunklen Rahmens,
   sonst wirken sie auf Creme wie ausgeschnitten. */
.hell .fotostreifen img { box-shadow: 0 2px 12px rgba(20, 18, 14, .14); }
.hell .gruender__bild, .hell .produkt-hero__bild {
  border-color: var(--linie); background: #FFFFFF; box-shadow: 0 2px 16px rgba(20, 18, 14, .10);
}

/* ---------- Dunkle Inseln in hellen Abschnitten ----------
   Produkt- und Ideenkacheln bleiben dunkel (Wiedererkennung). Sie bringen
   ihre eigenen Farben mit, damit sie von der hellen Umgebung unberührt bleiben. */
.hell .produkt, .hell .idee { background: #1A1814; border-color: #3A3122; color: #E9DAB0; }
.hell .produkt__titel, .hell .idee h3, .hell .produkt .preis { color: #FFFFFF; }
.hell .produkt .produkt__kat, .hell .idee__bereich { color: var(--gold); }
.hell .produkt .leise, .hell .produkt__unter { color: #BFB39A; }
/* Status-Schildchen sitzen auf der dunklen Kachel und behalten ihre Farben */
.hell .produkt .status--spaeter { color: #BFB39A; border-color: #6B6455; }
.hell .produkt a, .hell .idee a, .hell .produkt .bald-hinweis a { color: var(--gold-hell); }
.hell .produkt .knopf--aus, .hell .produkt .knopf--aus:hover { border-color: var(--gold); color: var(--gold-hell); }
.hell .produkt .haken li::before { border-color: var(--gold); }

/* ---------- Entwurfs-Platzhalter auf Hell ---------- */
.hell .ph { background: rgba(140, 100, 40, .14); outline-color: var(--gold-text); color: #6B4C1E; }
.hell .ph-block { border-color: var(--gold-text); background: rgba(140, 100, 40, .06); }

/* ---------- Social-Icons im Fußbereich ---------- */
.fuss__social { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.fuss__social a { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie);
  color: var(--sand); transition: color .15s, border-color .15s, background .15s; }
.fuss__social a:hover { color: #0A0A0A; background: var(--gold); border-color: var(--gold); }

/* ---------- Community-Anmeldung ---------- */
.community-form { margin-top: 24px; }
.community-form__zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.community-form__zeile input[type="email"] {
  flex: 1 1 260px; min-height: 48px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--karte); color: var(--sand);
  font: inherit; }
.community-form__zeile input[type="email"]::placeholder { color: #8b8170; }
.community-form__zeile input[type="email"]:focus { border-color: var(--gold); outline: none; }
.community-form__ok { display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; font-size: .88rem; color: var(--text-leise); line-height: 1.5; }
.community-form__ok input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--gold); }