/* ============================================================
   Take Part — Website v4 · „Hell & Typografisch"
   Brücke zwischen v1 (weiß, luftig, leicht verspielt) und v3
   (große Serifen, editorial). Native Scroll. SplitText + DrawSVG
   für feine Reveals. Alles lokal → kein Cookie-Banner.
   ============================================================ */

@font-face { font-family:"Lora"; src:url("../fonts/Lora-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Lora"; src:url("../fonts/Lora-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Lora"; src:url("../fonts/Lora-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --white:#FFFFFF; --paper:#FDFAF4; --cream:#F8F1E5; --cream2:#F3EADA; --card:#FFFFFF;
  --ink:#241A11; --ink2:#5F5341; --muted:#9C8D77;
  --amber:#F29B18; --amber-d:#E08A0C; --glut:#B7710A;
  --sage:#7E9B6B; --blush:#D98C6A; --sky:#8AA6C0; --herz:#D64545;
  --line:#EDE4D3; --line2:#E3D7C2;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1200px; --gut:clamp(22px,4.5vw,64px);
  --r:20px; --r-l:30px;
  --sh:0 2px 4px rgba(60,42,20,.04), 0 20px 46px -24px rgba(60,42,20,.30);
  --sh-l:0 40px 90px -50px rgba(60,42,20,.5);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
html,body{overflow-x:clip;}  /* Sicherheitsnetz gegen horizontales Scrollen */
body{font-family:var(--sans);color:var(--ink);background:var(--white);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;}
h1,h2,h3,.serif{font-family:var(--serif);letter-spacing:-.018em;line-height:1.06;text-wrap:balance;}
::selection{background:var(--amber);color:#fff;}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:6px;}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);}

.lbl{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--glut);
  display:inline-flex;align-items:center;gap:9px;}
.lbl::before{content:"";width:22px;height:1.5px;background:var(--amber);}
.lbl.c{justify-content:center;}

/* Buttons / Stores */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15.5px;
  padding:13px 22px;border-radius:14px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s,background .2s,box-shadow .2s;}
.btn-primary{background:linear-gradient(135deg,#F6A62C 0%,#E58A0E 100%);color:#fff;
  box-shadow:0 10px 22px -8px rgba(224,133,12,.7), inset 0 1px 0 rgba(255,255,255,.28);
  padding:12px 22px;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 30px -10px rgba(224,133,12,.82), inset 0 1px 0 rgba(255,255,255,.28);}
.btn-primary .arw{display:inline-block;transition:transform .25s;}
.btn-primary:hover .arw{transform:translateX(4px);}
/* Nav-CTA auf DE-Umschalter-Größe */
.nav-right .btn-primary{padding:8px 16px;font-size:13.5px;border-radius:11px;gap:7px;}
.stores{display:flex;flex-wrap:wrap;gap:13px;}
.store{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;padding:11px 19px 11px 17px;
  border-radius:14px;transition:transform .2s,background .2s;box-shadow:0 12px 26px -16px rgba(36,26,17,.8);}
.store:hover{transform:translateY(-3px);background:#160f08;}
.store svg{width:25px;height:25px;flex:none;}
.store .st{display:flex;flex-direction:column;line-height:1.12;text-align:left;}
.store .st small{font-size:10px;letter-spacing:.3px;opacity:.82;}
.store .st b{font-size:16.5px;font-weight:600;font-family:var(--sans);}

/* ===================== Nav ===================== */
.nav{position:sticky;top:0;z-index:70;transition:background .3s ease;}
/* Nur die Deckkraft wechselt beim Scrollen — kein Rahmen, kein Schatten: beides
   würde die Höhe des Headers ändern bzw. hart einblenden und sichtbar ruckeln. */
.nav.scrolled{background:rgba(255,255,255,.94);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.brand{display:inline-flex;align-items:center;gap:11px;}
.brand img{width:40px;height:40px;border-radius:12px;flex:none;box-shadow:0 6px 15px -8px rgba(242,155,24,.9);}
.brand .name{font-family:var(--serif);font-size:21px;font-weight:600;}
.nav-mid{display:flex;gap:34px;}
.nav-mid a{font-size:15px;color:var(--ink2);transition:.18s;}
.nav-mid a:hover{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:20px;}
.lang{position:relative;}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--line2);border-radius:11px;
  padding:8px 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;}
.lang-btn:hover{background:var(--cream);}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--sh);padding:6px;display:none;min-width:154px;z-index:80;}
.lang-menu.open{display:block;}
.lang-menu button{display:flex;width:100%;gap:10px;align-items:center;background:none;border:none;font:inherit;font-size:14.5px;
  padding:9px 12px;border-radius:9px;cursor:pointer;color:var(--ink);text-align:left;}
.lang-menu button:hover{background:var(--cream);} .lang-menu button.on{color:var(--glut);font-weight:700;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s;}
.nav-toggle span+span{margin-top:5px;}

/* ===================== Hero ===================== */
.hero{position:relative;padding:60px 0 70px;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(70% 60% at 84% 12%, #FCEBCF66 0%, transparent 55%),
             radial-gradient(50% 50% at 6% 92%, #E1EAD766 0%, transparent 55%);}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:36px;align-items:center;}
.hero-grid > *{min-width:0;}  /* Grid-Spalten dürfen unter Inhalts-Mindestbreite schrumpfen */
.hero-copy{max-width:560px;}
.hero h1{font-size:clamp(46px,7vw,86px);font-weight:400;letter-spacing:-.025em;line-height:0.98;margin-top:22px;}
.hero h1 em{font-style:italic;color:var(--glut);}
.hero .lead{font-size:19px;color:var(--ink2);margin:24px 0 30px;max-width:470px;}
.hero .fine{font-size:13.5px;color:var(--muted);margin-top:18px;display:flex;align-items:center;gap:8px;}
.hero .fine .d{width:5px;height:5px;border-radius:50%;background:var(--amber);}
.js .h-split{visibility:hidden;}
.js .fade{opacity:0;}

/* Bühne mit Phone + verspielten Kärtchen */
.stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px;}
.confetti{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.confetti i{position:absolute;top:-16px;width:9px;height:9px;border-radius:2px;opacity:.7;animation:fall linear infinite;}
@keyframes fall{0%{transform:translateY(-16px) rotate(0);opacity:0;}12%{opacity:.7;}100%{transform:translateY(660px) rotate(300deg);opacity:.1;}}
@media (prefers-reduced-motion:reduce){.confetti{display:none;}}
.floatc{position:absolute;z-index:5;background:#fff;border:1px solid var(--line);border-radius:15px;padding:11px 13px;
  box-shadow:var(--sh);display:flex;gap:10px;align-items:center;width:196px;}
.floatc.a{top:52px;right:-34px;} .floatc.b{bottom:66px;left:-14px;}
.floatc .i{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:17px;}
.floatc .i.av{border-radius:50%;object-fit:cover;}
.floatc .t{font-size:13px;font-weight:700;line-height:1.2;} .floatc .s{font-size:11.5px;color:var(--ink2);}

/* Phone (App-UI, warm/verspielt aus v1) */
.phone{position:relative;width:300px;flex:none;background:#100c07;border-radius:46px;padding:11px;box-shadow:var(--sh-l);}
.phone::after{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:25px;background:#000;border-radius:15px;z-index:4;}
.scr{position:relative;border-radius:36px;overflow:hidden;background:var(--paper);aspect-ratio:293/620;}
.scr .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.au{position:absolute;inset:0;display:flex;flex-direction:column;}
.au .sb{height:44px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 6px;font-size:12.5px;font-weight:600;}
.au .bd{padding:8px 18px;flex:1;}
.au .ey{font-size:9.5px;font-weight:800;letter-spacing:1.4px;color:var(--glut);text-transform:uppercase;}
.au .ti{font-family:var(--serif);font-size:24px;margin:2px 0 14px;}
.au .seg{display:flex;background:var(--cream);border-radius:13px;padding:4px;gap:4px;margin-bottom:15px;}
.au .seg span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:7px 0;border-radius:9px;color:var(--ink2);}
.au .seg span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.au .row{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:10px;}
.au .cv{width:42px;height:52px;border-radius:4px 6px 6px 4px;flex:none;position:relative;background:linear-gradient(135deg,#E28A12,#F29B18);box-shadow:inset -5px 0 8px -5px rgba(0,0,0,.25);}
.au .cv::after{content:"";position:absolute;top:-3px;right:8px;width:6px;height:17px;background:var(--herz);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);}
.au .cv.b{background:linear-gradient(135deg,#6f88a8,#33455C);} .au .cv.b::after{background:var(--amber);}
.au .rt{font-size:13.5px;font-weight:700;} .au .rs{font-size:11px;color:var(--ink2);}
.au .tb{height:62px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around;background:rgba(255,255,255,.7);}
.au .tb i{width:20px;height:20px;border-radius:5px;background:var(--line2);display:block;}
.au .tb i.p{width:40px;height:40px;border-radius:50%;background:var(--amber);margin-top:-12px;box-shadow:0 8px 16px -6px rgba(242,155,24,.8);}

/* ===================== Marker / Section ===================== */
.section{padding:96px 0;}
.s-head{max-width:640px;margin:0 auto 54px;text-align:center;}
.s-head h2{font-size:clamp(32px,4.4vw,52px);font-weight:400;letter-spacing:-.02em;margin-top:16px;}
.s-head h2 em{font-style:italic;color:var(--glut);}
.s-head p{font-size:18px;color:var(--ink2);margin-top:16px;}

/* Anlässe — editorial Serifen-Liste (aus v3), aber hell */
.occ{background:var(--cream);}
.occ .head{max-width:820px;margin:0 auto 46px;text-align:center;}
.occ .head .lbl{margin-bottom:20px;}
.occ .head h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);font-weight:400;letter-spacing:-.01em;line-height:1.12;color:var(--ink2);}
.occ .head h2 em{font-style:italic;color:var(--glut);}
/* Anlässe — die Litanei dominiert, Headline ordnet sie nur ein.
   Block + balance: Zeilen werden gleichmäßig umbrochen, kein einzelnes Wort unten. */
.occ-list{display:block;text-align:center;text-wrap:balance;max-width:1000px;margin:0 auto;}
.occ-item{display:inline-block;vertical-align:baseline;font-family:var(--serif);font-size:clamp(34px,6.2vw,78px);
  font-weight:400;letter-spacing:-.015em;line-height:1.42;color:var(--ink);transition:color .3s ease;}
.occ-item:nth-child(even){font-style:italic;color:var(--glut);}  /* Rhythmus: abwechselnd schwarz/orange */
.occ-item:not(:last-child)::after{content:"·";display:inline-block;color:var(--amber);
  margin:0 .5ch;font-size:.42em;vertical-align:.42em;font-style:normal;opacity:.7;}
.occ-item:hover{color:var(--amber-d);}

/* Features — verspielte Karten (aus v1), verfeinert */
.f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.f{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:28px;transition:transform .25s,box-shadow .25s;box-shadow:var(--sh);}
.f:hover{transform:translateY(-6px);box-shadow:var(--sh-l);}
.f .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:24px;margin-bottom:18px;}
.f h3{font-size:20px;font-weight:600;letter-spacing:-.01em;}
.f p{font-size:15px;color:var(--ink2);margin-top:8px;}
.ic-amber{background:#FCEBCF;} .ic-sage{background:#E1EAD7;} .ic-sky{background:#DEE7F0;}
.ic-blush{background:#F6E0D5;} .ic-lila{background:#E8E1F0;} .ic-sand{background:var(--cream2);}

/* So geht's — 3 Schritte, leicht verspielt */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.step{text-align:center;}
.step .seal{width:64px;height:64px;margin:0 auto 20px;border-radius:20px;background:linear-gradient(140deg,var(--amber),var(--amber-d));
  color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:25px;font-weight:700;
  box-shadow:0 12px 24px -8px rgba(242,155,24,.75);transform:rotate(-4deg);}
.step:nth-child(2) .seal{transform:rotate(3deg);} .step:nth-child(3) .seal{transform:rotate(-2deg);}
.step h3{font-size:21px;font-weight:600;} .step p{color:var(--ink2);font-size:15.5px;margin-top:8px;max-width:280px;margin-inline:auto;}

/* Get — heller Panel + gezeichneter Unterstrich */
.get{padding:100px 0;}
.get-panel{position:relative;background:linear-gradient(155deg,#FFFFFF,#FBF3E4);border:1px solid var(--line2);border-radius:36px;
  padding:70px 40px;text-align:center;overflow:hidden;box-shadow:var(--sh);}
.get-panel .conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
/* line-height: SplitText legt für den Masken-Effekt ein overflow:hidden um jede Zeile.
   Dessen Höhe = Zeilenhöhe — bei den globalen 1.06 werden Unterlängen (g, j, p, q) abgeschnitten. */
.get-panel h2{font-size:clamp(38px,5.6vw,72px);font-weight:400;letter-spacing:-.02em;padding:0 .12em;line-height:1.3;}
.get-panel h2 em{font-style:italic;color:var(--glut);}
.get-panel .uline{display:block;margin:2px auto 0;width:min(230px,52%);height:15px;color:var(--amber);overflow:visible;}
.get-panel p{color:var(--ink2);font-size:18px;margin:22px auto 32px;max-width:440px;}
.get-panel .stores{justify-content:center;}

/* ===================== Footer ===================== */
.footer{background:var(--ink);color:#E9DDCA;padding:60px 0 30px;}
.footer a{color:#C6B69A;transition:.18s;} .footer a:hover{color:#fff;}
.f-grid2{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer .brand .name{color:#fff;} .f-about{color:#B7A585;font-size:15px;margin-top:16px;max-width:300px;}
.f-col h4{font-family:var(--sans);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#9C8A6E;margin-bottom:15px;font-weight:700;}
.f-col a{display:block;font-size:15px;margin-bottom:10px;}
.f-bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding-top:24px;font-size:13.5px;color:#A2916F;}
.f-bot .heart{color:var(--amber);}

/* ===================== Showcase (Gäste-Fähigkeiten, abwechselnd) ===================== */
.showcase{padding:96px 0 40px;}  /* Oben identisch zu .section, unten knapper (Rows bringen eigenes Padding mit) */
.show-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;
  padding:56px 0;}
.show-row + .show-row{border-top:1px solid var(--line);}
.show-row.flip .show-vis{order:-1;}   /* Bild links, Text rechts */
.show-copy .lbl{margin-bottom:16px;}
.show-copy h3{font-size:clamp(27px,3.6vw,42px);font-weight:400;letter-spacing:-.02em;}
.show-copy h3 em{font-style:italic;color:var(--glut);}
.show-copy p{color:var(--ink2);font-size:17px;margin-top:15px;max-width:440px;}
.show-copy .qual{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;font-weight:700;
  color:var(--glut);background:#FCEBCF;border-radius:999px;padding:8px 15px;}
.show-vis{display:flex;justify-content:center;}
.vcard{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:26px;
  padding:22px;box-shadow:var(--sh);position:relative;}

/* Rich-Text-Karte */
.rt-tools{display:flex;gap:6px;margin-bottom:16px;}
.rt-tools b{width:32px;height:32px;border-radius:9px;background:var(--cream);display:grid;place-items:center;
  font-size:14px;font-weight:800;color:var(--ink2);font-family:var(--serif);}
.rt-tools b.on{background:var(--amber);color:#fff;}
.rt-body{font-size:16px;line-height:1.6;color:var(--ink);}
.rt-body .cur{display:inline-block;width:2px;height:1.1em;background:var(--amber);vertical-align:-2px;margin-left:1px;animation:blink 1.1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.rt-body .cur{animation:none;}}

/* Foto/Video-Szene */
.scene{width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;display:block;}
img.scene{height:auto;object-fit:cover;}
.qbadge{position:absolute;top:34px;right:34px;background:rgba(20,14,8,.82);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.4px;padding:6px 11px;border-radius:999px;backdrop-filter:blur(4px);display:flex;gap:6px;align-items:center;}
.qbadge .dot{width:6px;height:6px;border-radius:50%;background:#5FD08A;}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);}
.play::after{content:"";border-left:16px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;}

/* Zeichnungs-Karte — Herz zentriert im Zeichenfeld */
.draw{width:100%;aspect-ratio:4/3;border-radius:16px;background:var(--paper);position:relative;overflow:hidden;
  border:1px dashed var(--line2);display:flex;align-items:center;justify-content:center;}
.draw svg{width:74%;height:74%;display:block;}
.palette{display:flex;gap:10px;margin-top:18px;justify-content:center;}
.palette span{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 2px 5px rgba(0,0,0,.12);}
.palette span:first-child{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 0 0 3px rgba(214,69,69,.28),0 2px 5px rgba(0,0,0,.12);}

/* ===================== Event-Modus (eigene Sektion, dunkel-warm) ===================== */
.event{background:linear-gradient(160deg,#2A1E12,#3A2A18);color:#F3E7D3;overflow:hidden;position:relative;padding:100px 0;}
.event::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 78% 20%,rgba(242,155,24,.2),transparent 55%);}
.event .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.event .wrap > *{min-width:0;}
.event .lbl{color:var(--amber);} .event .lbl::before{background:var(--amber);}
.event h2{font-size:clamp(30px,4.2vw,50px);font-weight:400;letter-spacing:-.02em;color:#FBF2E2;margin:16px 0 18px;}
.event h2 em{font-style:italic;color:var(--amber);}
.event p{color:#D8C7AC;font-size:18px;line-height:1.7;}
.event-vis{position:relative;}
/* Kiosk — Gerät steht am Fest, aufs Gästebuch gesperrt */
.kiosk{max-width:470px;margin:0 auto;position:relative;}
.kiosk::before{content:"";position:absolute;inset:-8% -10% 6%;background:radial-gradient(60% 55% at 50% 35%,rgba(242,155,24,.28),transparent 62%);filter:blur(6px);z-index:0;}
/* iPad-Gehäuse: umlaufender Rahmen, Alu-Kante, Frontkamera an der langen Oberkante */
.ipad{position:relative;z-index:1;padding:15px;border-radius:34px;
  background:linear-gradient(160deg,#33333a,#131316 42%,#1e1e23);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75),inset 0 0 0 1.5px rgba(255,255,255,.13);}
.ipad::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:#42424b;box-shadow:inset 0 0 2px rgba(0,0,0,.9);}
.kiosk-screen{position:relative;z-index:1;background:linear-gradient(170deg,#FFFDF9,#FBF3E7);
  border-radius:19px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  aspect-ratio:4/3;padding:36px 34px;}
.k-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-d);}
.k-title{font-family:var(--serif);font-size:clamp(23px,3.2vw,31px);color:var(--ink);line-height:1.18;letter-spacing:-.01em;}
.k-field{width:100%;max-width:290px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;
  color:var(--muted);text-align:left;display:flex;align-items:center;font-size:15.5px;box-shadow:0 2px 8px -6px rgba(60,42,20,.4);}
.k-caret{width:2px;height:17px;background:var(--glut);margin-right:7px;animation:blink 1.1s step-end infinite;}
.k-btn{background:linear-gradient(135deg,var(--amber),var(--glut));color:#fff;font-weight:700;padding:12px 30px;border-radius:12px;
  font-size:15.5px;box-shadow:0 12px 24px -12px rgba(242,155,24,.8);}

/* ===================== Reveal ===================== */
.js .rev{opacity:0;}
@media (prefers-reduced-motion:reduce){.js .fade,.js .rev{opacity:1!important;} .js .h-split{visibility:visible!important;}}

/* ===================== Responsive ===================== */
@media (max-width:920px){
  /* Einspaltig: display:contents löst die Textspalte auf, damit sich das Phone
     zwischen Lead und Store-Buttons schieben kann (Buttons unter das Mockup). */
  .hero-grid{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
  .hero-copy{display:contents;}
  .hero-copy > *{width:100%;max-width:640px;}
  .hero-copy .lbl{order:1;justify-content:center;}
  .hero-copy h1{order:2;}
  .hero-copy .lead{order:3;margin-left:auto;margin-right:auto;}
  .stage{order:4;min-height:0;margin-top:8px;} .floatc{display:none;}
  /* Konfetti bleibt hinter dem Phone, die Ebene reicht dafür bis in die Seitenränder
     der Seite hinaus — sonst bliebe neben dem Gerät nur ~20px Fallraum. */
  .confetti{left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));}
  .hero-copy .stores{order:5;justify-content:center;margin:22px 0 6px;}
  .f-grid{grid-template-columns:repeat(2,1fr);} .steps{grid-template-columns:1fr;gap:34px;}
  .f-grid2{grid-template-columns:1fr 1fr;}
  .event .wrap{grid-template-columns:1fr;gap:40px;} .event-vis{order:2;}
}
@media (max-width:760px){
  .show-row{grid-template-columns:1fr;gap:26px;}
  .show-row.flip .show-vis{order:2;}
  .show-vis{max-width:460px;margin:0 auto;width:100%;}
}
@media (max-width:600px){
  body{font-size:16px;} .section{padding:66px 0;}
  .nav-mid{display:none;} .nav-toggle{display:block;}
  .nav-right{gap:12px;} .nav-right .btn-primary{display:none;}  /* CTA steckt im Hamburger + Hero */
  .nav.open .nav-mid{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:2px;background:var(--white);border-bottom:1px solid var(--line);padding:12px var(--gut) 18px;box-shadow:0 14px 24px -18px rgba(60,42,20,.5);}
  .nav.open .nav-mid a{padding:11px 2px;font-size:17px;}
  .f-grid{grid-template-columns:1fr;} .f-grid2{grid-template-columns:1fr;}
  .get-panel{padding:48px 22px;}
  .event{padding:74px 0;} .kiosk-screen{padding:30px 24px;gap:15px;} .ipad{padding:11px;border-radius:26px;}
  .phone{width:min(300px,72vw);} .stage{min-width:0;}
  /* Store-Buttons kompakter, damit sie auch auf schmalen Displays nebeneinander bleiben */
  .stores{gap:10px;flex-wrap:nowrap;}
  .store{padding:9px 14px 9px 12px;gap:8px;border-radius:12px;}
  .store svg{width:21px;height:21px;}
  .store .st small{font-size:9px;} .store .st b{font-size:14.5px;}
  .occ .head{margin-bottom:40px;} .occ-item{line-height:1.42;}
  .lang-menu{right:auto;left:0;}
}
@media (max-width:380px){
  .hero h1{font-size:42px;} .occ-item{line-height:1.38;}
  .stores{gap:8px;}
  .store{padding:8px 11px 8px 10px;gap:6px;}
  .store svg{width:19px;height:19px;}
  .store .st small{font-size:8.5px;} .store .st b{font-size:13px;}
}

/* ===================== Rechtstexte (Impressum / Terms) ===================== */
.legal{padding:120px 0 90px;background:var(--white);}
.legal-wrap{max-width:760px;margin:0 auto;padding:0 var(--gut);}
.legal a.back{font-size:14.5px;color:var(--glut);font-weight:600;display:inline-flex;gap:6px;align-items:center;margin-bottom:26px;}
.legal h1{font-size:clamp(32px,5vw,48px);font-weight:400;margin-bottom:8px;}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:34px;}
.legal h2{font-size:22px;font-weight:600;margin:34px 0 12px;}
.legal p,.legal li{color:var(--ink2);font-size:16px;margin-bottom:12px;}
.legal ul{padding-left:22px;} .legal strong{color:var(--ink);}
.legal .box{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:18px 0;}
.legal a[href^="mailto"],.legal a[href^="http"]{color:var(--glut);font-weight:600;}

/* FAQ-Akkordeon (natives <details> — funktioniert ohne JS) */
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:10px;}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:15px 48px 15px 20px;
  font-size:16.5px;font-weight:600;color:var(--ink);border-radius:var(--r);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{background:var(--paper);}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;margin-top:-7px;width:8px;height:8px;
  border-right:2px solid var(--glut);border-bottom:2px solid var(--glut);transform:rotate(45deg);transition:transform .25s;}
.faq[open] summary{background:var(--paper);border-radius:var(--r) var(--r) 0 0;}
.faq[open] summary::after{margin-top:-3px;transform:rotate(-135deg);}
.faq .a{padding:14px 20px 4px;}
.faq .a p:last-child{margin-bottom:14px;}
.legal .faq + h2{margin-top:38px;}

/* Muss nach den .legal-Regeln stehen — sonst gewinnt deren spätere Deklaration */
@media (max-width:920px){
  .legal{padding:88px 0 72px;}
}
@media (max-width:600px){
  .legal{padding:60px 0 58px;}
  .legal h1{margin-bottom:6px;} .legal .updated{margin-bottom:26px;}
}

.btn-ghost{background:transparent;border-color:var(--line2);color:var(--ink);}
.btn-ghost:hover{background:var(--cream);transform:translateY(-2px);}