/* Hausstil aus DESIGN.md, aber ohne Google Fonts (Vorgabe: keine externen Requests).
   Überschriften nehmen die Rückfallkette der Serife, Fließtext die Systemschrift. */
:root{
  --bg:#F6F4EE; --surface:#FFFFFF; --surface-2:#F0EEE7; --surface-3:#E7E4DA;
  --line:#E4E1D8; --line-strong:#CDC8BB;
  --ink:#1B1A17; --ink-2:#4E4C45; --ink-3:#6F6C63;
  --green:#24513F; --green-2:#2F6A52; --green-soft:#E3EEE8;
  --gold:#B8862B; --danger:#9B2C2C; --danger-soft:#F7E6E6;
  --hint-bg:hsl(40 70% 94%); --hint-ink:#6B4E10;
  --shadow:0 1px 2px rgba(27,26,23,.05), 0 14px 34px -18px rgba(27,26,23,.28);
  --r:16px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151614; --surface:#1D1E1B; --surface-2:#262823; --surface-3:#2F322C;
    --line:#33352F; --line-strong:#4A4D45;
    --ink:#EDEBE4; --ink-2:#B9B7AE; --ink-3:#9A988F;
    --green:#8CCDAA; --green-2:#6FBE94; --green-soft:#1F2E27;
    --gold:#D9B05F; --danger:#E08585; --danger-soft:#3A2323;
    --hint-bg:#2E2712; --hint-ink:#E4C77E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif); font-weight:700; text-wrap:balance; margin:0; letter-spacing:-.015em}
h1{font-size:clamp(32px,8vw,46px); line-height:1.08; letter-spacing:-.025em}
h2{font-size:clamp(25px,6vw,32px); line-height:1.15; margin-bottom:16px}
h3{font-size:19px; line-height:1.25; margin-bottom:6px}
p{margin:0 0 12px}
a{color:var(--green-2)}
button,input{font:inherit; color:inherit}
button,a,input{touch-action:manipulation}
:focus-visible{outline:2px solid var(--green-2); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

.wrap{max-width:720px; margin:0 auto; padding:0 20px}
.etikett{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.klein{font-size:14px; color:var(--ink-2)}

/* Kopf */
.kopf{padding-top:20px}
.marke{font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); text-decoration:none}

/* Abschnitte */
section{padding:48px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.hero{padding:28px 0 40px}
.hero .unterzeile{font-size:18px; color:var(--ink-2); margin:14px 0 22px}

/* Formularkarte */
.karte{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:var(--shadow)}
.feldname{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
input[type=email]{width:100%; min-height:50px; padding:12px 14px; font-size:17px; border:1px solid var(--line-strong);
  border-radius:12px; background:var(--surface)}
input[type=email]:focus-visible{outline:2px solid var(--green-2); outline-offset:1px; border-color:transparent}
.haken{display:flex; gap:10px; align-items:flex-start; margin:14px 0 16px; font-size:14px; color:var(--ink-2); line-height:1.45}
.haken input{width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--green)}
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.knopf{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:12px 22px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-weight:600; font-size:16px; text-decoration:none; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .15s}
.knopf:hover{transform:translateY(-1px); border-color:var(--line-strong)}
.knopf:active{transform:translateY(0)}
.knopf.primaer{background:var(--green); color:var(--bg); border-color:var(--green); width:100%}
.knopf[aria-busy=true]{opacity:.6; cursor:progress}

.hinweis{border-radius:12px; padding:12px 14px; font-size:14.5px; margin-top:12px; background:var(--hint-bg); color:var(--hint-ink)}
.hinweis.fehler{background:var(--danger-soft); color:var(--danger)}

/* Bilder */
.hero-bild{display:block; width:100%; height:auto; margin-top:28px; border-radius:var(--r); background:var(--surface-2)}
.pdf-bild{display:block; width:100%; max-width:260px; height:auto; margin:28px auto 0; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}

/* Bild-Platzhalter (nicht mehr in Benutzung) */
.bildplatz{margin-top:28px; border:1.5px dashed var(--line-strong); border-radius:var(--r); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em}
.bildplatz.quadrat{aspect-ratio:1/1}
.bildplatz.hoch{aspect-ratio:3/4; max-width:260px; margin-left:auto; margin-right:auto}

/* Listen */
.situationen{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.situationen li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; font-size:17px}
.punkte{list-style:none; padding:0; margin:0; display:grid; gap:18px}
.punkte li{display:grid; grid-template-columns:36px 1fr; gap:12px}
.nr{width:36px; height:36px; border-radius:50%; background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700}
.punkte p{color:var(--ink-2); margin:0}

/* Produktblock mit Werbekennzeichnung */
.werbung{background:var(--surface); border:1px solid var(--line-strong); border-radius:22px; padding:20px}
.werbemarke{display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); background:var(--surface-3); border-radius:999px; padding:4px 10px; margin-bottom:12px}
.werbung .knopf{width:100%; margin-top:8px; text-align:center}

/* FAQ */
details{border-bottom:1px solid var(--line); padding:4px 0}
summary{cursor:pointer; font-weight:600; font-size:17px; padding:12px 0; min-height:44px; list-style-position:outside}
details p{color:var(--ink-2)}

/* Fuß */
.fuss{border-top:1px solid var(--line); padding-top:32px; padding-bottom:48px; font-size:14px; color:var(--ink-2)}
.fuss nav{display:flex; gap:20px; margin-bottom:14px}
.fuss nav a{display:inline-block; padding:10px 0}

/* Rechtstexte */
.text{padding-top:28px; padding-bottom:48px}
.text h1{font-size:34px; margin-bottom:20px}
.text h2{font-size:21px; margin:28px 0 8px}
.text p,.text li{color:var(--ink-2)}
.zurueck{display:inline-block; padding:10px 0; margin-top:8px}
.nachsatz{margin:12px 0 0}
.abstand-oben{margin-top:20px}