/* Simsalabon Webseite · Look „Zauber“ (Nachthimmel, Gold, Smaragd), bewusst immer dunkel wie die App.
   Schriften selbst gehostet (DSGVO): Great Vibes = Schriftzug, Exo 2 = Überschriften, Inter = Text.
   Layout: eine ruhige Spalte, Kopf mit Bon-Karte, darunter Abschnitte im Rhythmus 72px. */
@font-face{font-family:"Great Vibes";src:url(fonts/great-vibes-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Exo 2";src:url(fonts/exo-2-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Exo 2";src:url(fonts/exo-2-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --night:#0b0d1a; --sky:#1d2347; --card:#151a2d; --line:#2a2f48;
  --ink:#f6f2e8; --mut:#bdb8cc; --gold:#ecc96a; --gold-deep:#c99a2e; --emerald:#4fd1a5; --violet:#b79cff;
  --paper:#fbf8f2; --paper-ink:#24212f; --paper-mut:#6d6878;
  --f-script:"Great Vibes","Snell Roundhand","Apple Chancery",cursive;
  --f-head:"Exo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1080px; color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:400 17px/1.6 var(--f-body);
  background:radial-gradient(120% 70% at 50% -10%,var(--sky) 0%,var(--night) 62%) no-repeat,var(--night);position:relative;overflow-x:hidden}
body::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.7;
  background-image:radial-gradient(1.3px 1.3px at 12% 8%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 28% 22%,#fff6 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 71% 6%,#fffa 50%,transparent 51%),radial-gradient(1px 1px at 86% 18%,#fff7 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 52% 30%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 6% 40%,#fff6 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 94% 44%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 40% 56%,#fff4 50%,transparent 51%);
  background-size:100% 900px;background-repeat:repeat-y}
.wrap{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:#f6dc92}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-head);font-weight:800;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}

/* Kopfleiste */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold)}
.brand img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px #ffffff1a}
.brand span{font:400 36px/1 var(--f-script);text-shadow:0 0 22px #ecc96a40}
.top nav{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.top nav a{color:var(--mut);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}

/* Held */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:40px 72px}
.eyebrow{font:500 14px/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:18px}
.hero h1{font-size:clamp(38px,6vw,64px);letter-spacing:-.01em}
.hero h1 em{font:400 1.2em/1 var(--f-script);color:var(--gold);letter-spacing:0;padding-right:.08em}
.lead{font-size:19px;color:var(--mut);max-width:34em;margin-top:22px}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.store{display:flex;align-items:center;gap:12px;padding:11px 18px 11px 14px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;color:var(--ink)}
.store svg{width:26px;height:26px;flex:none}
.store small{display:block;font-size:12px;color:var(--mut);line-height:1.2}
.store b{display:block;font:600 16px/1.2 var(--f-body)}
.soon{margin-top:16px;font-size:15px;color:var(--mut)}

/* Der Bon */
.bon-stage{position:relative;display:flex;justify-content:center;padding-block:10px 44px}
.bon{position:relative;width:min(100%,330px);background:var(--paper);color:var(--paper-ink);font:400 14px/1.55 var(--f-mono);
  padding:26px 24px 34px;transform:rotate(2.2deg);box-shadow:0 30px 60px -20px #000c,0 0 70px #ecc96a1f;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.bon .shop{text-align:center;font-weight:600;letter-spacing:.08em}
.bon .meta{text-align:center;color:var(--paper-mut);font-size:12px;margin-bottom:12px}
.bon .row{display:flex;justify-content:space-between;gap:12px}
.bon .row span:last-child{font-variant-numeric:tabular-nums}
.bon .row.ok span:first-child::after{content:" ✓";color:#0e8a66;font-weight:700}
.bon hr{border:0;border-top:1px dashed #b9b3a6;margin:12px 0}
.bon .sum{font-weight:700;font-size:16px}
.stamp{position:absolute;right:-12px;bottom:-14px;transform:rotate(-12deg);background:var(--night);color:var(--gold);
  border:2px solid var(--gold);border-radius:12px;padding:8px 14px;font:800 15px/1.2 var(--f-head);text-align:center;box-shadow:0 10px 30px #0008}
.stamp small{display:block;font:400 22px/1 var(--f-script);color:var(--ink);margin-top:2px}
.spark{position:absolute;color:var(--gold);filter:drop-shadow(0 0 8px #ecc96acc)}
.spark.a{top:-6px;left:8%;width:26px}.spark.b{top:38%;right:-4px;width:16px;color:var(--violet)}
@media (prefers-reduced-motion:no-preference){.spark{animation:tw 2.8s ease-in-out infinite}.spark.b{animation-delay:1.1s}@keyframes tw{50%{opacity:.35;transform:scale(.8)}}}

/* Abschnitte */
section.block{padding-block:56px;border-top:1px solid var(--line)}
.sec-h{max-width:40em;margin-bottom:30px}
.sec-h h2{font-size:clamp(28px,3.6vw,38px)}
.sec-h p{color:var(--mut);margin-top:10px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;min-width:0}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--gold);color:var(--gold);font:800 20px/1 var(--f-head);margin-bottom:14px}
.steps h3,.feat h3{font-size:20px;margin-bottom:6px}
.steps p,.feat p{color:var(--mut)}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
.feat{min-width:0;padding-top:18px;border-top:1px solid var(--line)}
.feat .k{font:500 13px/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald);margin-bottom:10px}
.looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.look{border-radius:18px;padding:22px;min-width:0;border:1px solid var(--line)}
.look h3{font-size:20px}.look p{margin-top:6px;font-size:15px}
.look.z{background:radial-gradient(120% 90% at 50% 0%,#1d2347,#0b0d1a);color:var(--ink)}
.look.z h3{font:400 34px/1 var(--f-script);color:var(--gold)}
.look.s{background:var(--paper);color:var(--paper-ink);border-color:transparent}
.look.s p{color:var(--paper-mut)}
.look.g{background:#fffdf8;color:#111;border-color:transparent}
.look.g h3{font-size:28px}.look.g p{font-size:19px;color:#222}
.promise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.promise li{min-width:0}
.promise b{display:block;font:800 20px/1.25 var(--f-head);color:var(--gold);margin-bottom:4px}
.promise span{color:var(--mut);font-size:15px}
.story{font:400 clamp(26px,3.4vw,36px)/1.35 var(--f-head);font-weight:500;max-width:28em;text-wrap:balance}
.story em{font:400 1.25em/1 var(--f-script);color:var(--gold)}
.note{margin-top:22px;font-size:14px;color:var(--mut)}

/* Fuß */
footer{border-top:1px solid var(--line);margin-top:24px;padding-block:36px 48px;color:var(--mut);font-size:15px}
footer .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px}
footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}
footer nav a{color:var(--ink);text-decoration:none}
footer nav a:hover{color:var(--gold)}
.sig{font-size:14px}.sig b{font-weight:600;color:var(--ink)}.sig .ki{color:var(--violet)}

/* Unterseiten (Hilfe, Rechtliches) */
.page{max-width:46em;padding-block:24px 40px}
.page h1{font-size:clamp(32px,5vw,46px);margin-bottom:10px}
.page .intro{color:var(--mut);font-size:18px;margin-bottom:28px}
.page h2{font-size:24px;margin:38px 0 10px}
.page h3{font-size:19px;margin:28px 0 8px}
.page p,.page ul,.page ol{margin:0 0 14px}
.page li{margin-bottom:6px}
.page ul,.page ol{padding-left:1.3em}
.draft{border:1.5px dashed var(--gold);border-radius:14px;padding:14px 18px;margin-bottom:28px;color:var(--ink);background:#ecc96a12}
.draft b{color:var(--gold)}
.fill{background:#ecc96a26;color:var(--gold);border-radius:6px;padding:1px 6px;font-weight:600}
details{border-top:1px solid var(--line);padding-block:14px}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:500 19px/1.4 var(--f-head);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:24px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--mut)}
.mail{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.mail code{font:600 17px/1 var(--f-body);color:var(--gold);user-select:all}
.mail button{font:600 14px/1 var(--f-body);color:var(--night);background:var(--gold);border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.path{font-weight:600;color:var(--ink)}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:24px 56px}
  .steps,.feats,.looks{grid-template-columns:minmax(0,1fr)}
  .promise{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stamp{right:0}
}
@media (max-width:520px){
  .top nav{display:none}
  .promise{grid-template-columns:minmax(0,1fr)}
  body{font-size:16px}
}

/* Einblick: Bildschirme seitlich blättern (27.10.) */
.shots{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;margin-inline:-2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.shots figure{flex:0 0 clamp(190px,22vw,240px);margin:0;scroll-snap-align:start;min-width:0}
.shots img{display:block;width:100%;height:auto}
.shots figcaption{margin-top:6px;font-size:15px;color:var(--mut);text-align:center}
.shots figcaption b{display:block;font:800 17px/1.3 var(--f-head);color:var(--ink)}
/* Bon aufteilen */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.split h2{font-size:clamp(30px,4vw,44px)}
.split h2 em{font:400 1.2em/1 var(--f-script);color:var(--gold);padding-right:.06em}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;color:var(--ink)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--emerald);font-weight:700}
.split-b{display:flex;gap:14px;justify-content:center}
.split-b img{width:min(48%,250px);height:auto}
.split-b img:last-child{margin-top:48px}
@media (max-width:760px){.split{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){.shots{-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);mask-image:linear-gradient(to right,#000 86%,transparent)}}