@font-face{font-family:'Glock Grotesque';src:url('/fonts/GlockGrotesque2-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Glock Grotesque';src:url('/fonts/GlockGrotesque2-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Glock Grotesque';src:url('/fonts/GlockGrotesque2-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'NotoSerifDisplay_ExtraCondensed';src:url('/fonts/NotoSerifDisplay_ExtraCondensed-ExtraLight.ttf') format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:'NotoSerifDisplay_ExtraCondensed';src:url('/fonts/NotoSerifDisplay_ExtraCondensed-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'NotoSerifDisplay_ExtraCondensed';src:url('/fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url('/fonts/PPNeueMontreal-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url('/fonts/PPNeueMontreal-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url('/fonts/PPNeueMontreal-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
:root{
  --bg:#22201f; --panel:#1c1b18; --deep:#141311; --ink:#f3eee4; --ink-2:rgba(243,238,228,.62);
  --accent:#d4674f; --accent-strong:#A53A2A; --sand:#c9bfa8; --hair:rgba(243,238,228,.14); --r:14px;
}
html[data-theme="creme"]{
  /* --ink-2 Alpha .62 -> .68: rgba(34,32,31,.62) auf --panel #fff4c8 ergab
     gemessen 4.45:1 und riss WCAG AA (4.5:1) fuer Kleintext.
     Gleicher Farbton, nur dichter — verify/guard-contrast.mjs ist das Gate. */
  --bg:#fffada; --panel:#fff4c8; --deep:#f4eec9; --ink:#22201f; --ink-2:rgba(34,32,31,.68);
  --accent:#A53A2A; --hair:rgba(34,32,31,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:'PP Neue Montreal',system-ui,sans-serif;font-size:16px;line-height:1.45;-ms-overflow-style:none;scrollbar-width:none}
body::-webkit-scrollbar{display:none}
.disp{font-family:'NotoSerifDisplay_ExtraCondensed','Noto Serif Display',Georgia,serif}
header.zz{border-bottom:1px solid var(--hair)}
header.zz .hin{max-width:1060px;margin:0 auto;padding:15px 22px;display:flex;align-items:center;justify-content:space-between}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}
/* .ctl button (0,1,1) schlaegt .iconbtn (0,1,0) — ohne diese Regel quetscht das
   14px-Padding den 40px-Knopf auf ~6px Inhaltsbreite und das Icon kollabiert */
.ctl button.iconbtn{padding:0}
.iconbtn svg{width:24px;height:24px;flex-shrink:0}
.mark{font-size:26px;letter-spacing:-.044em;font-weight:200;text-transform:uppercase;white-space:nowrap}
.mark b{font-weight:700}
.ctl{display:flex;gap:8px}
.ctl button{background:none;border:1px solid var(--hair);border-radius:999px;color:var(--ink);font:inherit;font-size:13px;padding:5px 14px;cursor:pointer}
main.split{max-width:1060px;margin:0 auto;padding:26px 22px 60px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:stretch}
.visual{position:relative;border-radius:var(--r);overflow:hidden;min-height:100%;background:var(--deep)}
.visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.visual .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,19,17,.78),rgba(20,19,17,.08) 55%)}
.visual .caption{position:absolute;left:22px;right:22px;bottom:20px;color:#f3eee4}
.visual .caption .line1{font-family:'Glock Grotesque',sans-serif;font-size:32px;line-height:1.08;font-weight:700;letter-spacing:-.02em}
.visual .caption .line2{font-size:15px;opacity:.85;margin-top:6px}
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:22px}
.card h1{font-family:'Glock Grotesque',sans-serif;font-size:26px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.card .sub{color:var(--ink-2);font-size:14px;margin-bottom:18px}
.grid-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
/* display:grid schlaegt die UA-Regel fuer [hidden] — ohne diese Zeile ist hidden ein No-op */
.grid-presets[hidden]{display:none}
@media (max-width:480px){.grid-presets{grid-template-columns:repeat(2,1fr)}}
.preset{border:1px solid var(--hair);border-radius:10px;background:none;color:var(--ink);font:inherit;font-size:17px;padding:14px 0;cursor:pointer}
.preset[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
label.f{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:14px 0 6px}
input.f,textarea.f{width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:10px;color:var(--ink);font:inherit;padding:12px 14px;outline:none}
input.f:focus,textarea.f:focus{border-color:var(--accent)}
.teaser{display:flex;align-items:baseline;justify-content:space-between;border:1px dashed var(--hair);border-radius:10px;padding:12px 14px;margin-top:16px;font-size:14px}
.teaser strong{color:var(--accent);font-size:17px;font-weight:600}
.cta{width:100%;margin-top:18px;background:var(--accent-strong);border:0;border-radius:999px;color:#fff;font:inherit;font-size:16px;font-weight:600;padding:15px 0;cursor:pointer;transition:opacity .22s}
html[data-theme="creme"] .cta{color:#fffada}
.cta:disabled{opacity:.5;cursor:default}
.ghost{width:100%;margin-top:10px;background:none;border:1px solid var(--hair);border-radius:999px;color:var(--ink);font:inherit;font-size:14px;padding:11px 0;cursor:pointer}
.trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;color:var(--ink-2);font-size:12.5px;align-items:center}
.trust svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.err{color:var(--accent);font-size:14px;margin-top:10px;display:none}
#paywrap{display:none}
#payel{margin-top:14px}
.paysum{display:flex;justify-content:space-between;font-size:15px;border-bottom:1px solid var(--hair);padding-bottom:12px;margin-bottom:6px}
.paysum strong{font-weight:600}
.stripe-frame{margin-top:12px;border-radius:12px;overflow:hidden}
footer.zz{max-width:1060px;margin:0 auto;padding:0 22px 40px;font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer.zz .disp{letter-spacing:.02em;word-spacing:.18em;font-size:14px}
@media (max-width:860px){
  main.split{grid-template-columns:1fr;padding:20px 16px 48px}
  .visual{min-height:300px}
  header.zz .hin{padding:12px 16px}
  .mark{font-size:20px}
}