/* Custom Order Portal – Kundenseite
   Hell, sportlich, grün. Überschriften Barlow Condensed, Text Manrope. */

@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(../fonts/barlowc-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(../fonts/barlowc-800.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(../fonts/manrope-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format("woff2")}
/* Gravurschriften */
@font-face{font-family:"Great Vibes";font-display:swap;src:url(../fonts/greatvibes.woff2) format("woff2")}
@font-face{font-family:"Dancing Script";font-display:swap;src:url(../fonts/dancing.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-display:swap;src:url(../fonts/playfair.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(../fonts/montserrat.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-weight:500;font-display:swap;src:url(../fonts/cinzel.woff2) format("woff2")}
@font-face{font-family:"Roboto Mono";font-weight:500;font-display:swap;src:url(../fonts/robotomono.woff2) format("woff2")}
@font-face{font-family:Pacifico;font-display:swap;src:url(../fonts/pacifico.woff2) format("woff2")}

:root{
  --brand:#14B866;            /* überschrieben aus den Einstellungen */
  --brand-ink:#0F2A1D;
  --brand-text:color-mix(in oklab,var(--brand) 62%,#04140b);  /* Grün, das auf Hell als Text lesbar ist */
  --brand-soft:color-mix(in oklab,var(--brand) 12%,#fff);
  --brand-line:color-mix(in oklab,var(--brand) 35%,#fff);
  --bg:#F6F8F4;
  --bg-alt:#EDF2EA;
  --surface:#FFFFFF;
  --ink:#101A14;
  --text:#1B2620;
  --muted:#56645B;
  --line:#DCE4DA;
  --danger:#C2362B;
  --warn:#B86E00;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(16,26,20,.05),0 10px 30px -12px rgba(16,26,20,.18);
  --shadow-lg:0 2px 4px rgba(16,26,20,.05),0 30px 60px -24px rgba(16,26,20,.28);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1400px;
  --gut:clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--brand-text);text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:color-mix(in oklab,var(--brand) 35%,#fff);color:var(--ink)}
:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 70%,#000);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:800;color:var(--ink);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:0;text-wrap:balance}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;padding:10px 14px;z-index:100;border-radius:8px}
.skip:focus{left:8px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- Kopfzeile ---------- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar-in{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);min-width:0}
.logo-img{height:58px;width:auto;display:block}
.f-brand .logo-img{height:96px}
.side-brand .logo-img{height:64px}
.wordmark{font:800 26px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.mainnav{display:flex;gap:6px;margin-left:auto}
.mainnav a{color:var(--text);text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px;border-radius:999px;transition:background .2s}
.mainnav a:hover{background:var(--bg-alt)}
.cartlink{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--ink);background:var(--surface);border:1px solid var(--line);transition:transform .2s var(--ease-out)}
.cartlink:hover{transform:translateY(-1px)}
.cartcount{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--brand);color:#04140b;font:700 12px/21px var(--body);text-align:center}
.cartcount.bump{animation:bump .5s var(--ease-out)}
@keyframes bump{40%{transform:scale(1.35)}}
.menubtn{display:none;width:46px;height:46px;border:0;background:var(--ink);border-radius:50%;cursor:pointer;position:relative}
.menubtn span{position:absolute;left:14px;right:14px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease-out),top .35s var(--ease-out)}
.menubtn span:first-child{top:18px}.menubtn span:last-child{top:26px}
.menubtn[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.menubtn[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}
.mobilemenu{position:fixed;inset:72px 0 0;z-index:39;background:var(--bg);padding:24px var(--gut) 40px;overflow:auto;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out)}
.mobilemenu.open{opacity:1;transform:none}
.mobilemenu nav{display:flex;flex-direction:column}
.mobilemenu nav a{font:800 34px/1 var(--display);text-transform:uppercase;color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-out),transform .45s var(--ease-out)}
.mobilemenu.open nav a{opacity:1;transform:none}
.mobilemenu.open nav a:nth-child(2){transition-delay:.04s}.mobilemenu.open nav a:nth-child(3){transition-delay:.08s}
.mobilemenu.open nav a:nth-child(4){transition-delay:.12s}.mobilemenu.open nav a:nth-child(5){transition-delay:.16s}.mobilemenu.open nav a:nth-child(6){transition-delay:.2s}
.mm-contact{margin-top:28px;font-weight:700;font-size:18px}
@media (max-width:860px){.mainnav{display:none}.menubtn{display:block}.cartlink{margin-left:auto}}

/* ---------- Schaltflächen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:14px;border:2px solid transparent;font:700 16px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease-out),box-shadow .25s,background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand);color:#04140b;box-shadow:0 8px 20px -10px color-mix(in oklab,var(--brand) 80%,#000)}
.btn-primary:hover{background:color-mix(in oklab,var(--brand) 88%,#000);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#25352c;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{min-height:64px;padding:0 30px;font-size:17px;border-radius:16px}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn .arrow{transition:transform .25s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btn.loading{pointer-events:none;position:relative;color:transparent}
.btn.loading::after{content:"";position:absolute;width:20px;height:20px;border:2.5px solid #04140b;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(28px,5vw,72px) 0 clamp(64px,8vw,120px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.hero h1{font-size:clamp(3rem,7.4vw,6rem);line-height:.88;letter-spacing:-.015em}
.hero h1 .hl{color:var(--brand-text);display:block}
.hero-lead{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--muted);max-width:52ch;margin:28px 0 36px}
.hero-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:14px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:32px;color:var(--muted);font-size:14px;font-weight:600}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta svg{color:var(--brand-text)}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}.hero-stage{order:-1}}
@media (max-width:520px){.hero-ctas{grid-template-columns:1fr}.hero-ctas .btn{width:100%}}

/* Dschungel-Blätter (Markenwelt), wiegen langsam von selbst */
.hero-leaves{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-leaves svg{position:absolute;color:var(--brand);opacity:.13;transform-origin:0 100%;animation:sway 18s ease-in-out infinite}
.hero-leaves .l1{left:-60px;top:-40px;width:340px;transform:rotate(18deg)}
.hero-leaves .l2{right:-80px;top:30px;width:300px;animation-delay:-6s;animation-duration:22s}
.hero-leaves .l3{right:30%;bottom:-120px;width:260px;opacity:.09;animation-delay:-11s}
.hero>.wrap{position:relative;z-index:1}
@keyframes sway{0%,100%{rotate:-3deg}50%{rotate:4deg}}
.logo-sticker{position:absolute;left:0;top:0;width:24%;z-index:3;rotate:-9deg;filter:drop-shadow(0 10px 14px rgba(16,26,20,.18));animation:float 13s ease-in-out -5s infinite}
.logo-sticker img{width:100%;height:auto;display:block}

/* Farbband in den Linienfarben der Marke: schräge Felder, Wörter groß und blass */
.lines{display:flex;height:clamp(150px,18vw,240px);overflow:hidden;background:#fff}
.lines span{flex:1;min-width:0;position:relative;margin-left:-3vw;clip-path:polygon(3vw 0,100% 0,calc(100% - 3vw) 100%,0 100%);
  background:linear-gradient(160deg,var(--c1),var(--c2));display:grid;place-items:center;overflow:hidden}
.lines span:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - 3vw) 100%,0 100%)}
.lines span:last-child{clip-path:polygon(3vw 0,100% 0,100% 100%,0 100%)}
.lines b{font:800 clamp(1.5rem,2.9vw,3.2rem)/.9 var(--display);text-transform:uppercase;color:#fff;opacity:.95;rotate:-8deg;text-align:center;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.12);animation:lift 6s ease-in-out infinite}
.lines span:nth-child(2) b{animation-delay:-1s}.lines span:nth-child(3) b{animation-delay:-2s}.lines span:nth-child(4) b{animation-delay:-3s}.lines span:nth-child(5) b{animation-delay:-4s}.lines span:nth-child(6) b{animation-delay:-5s}
@keyframes lift{0%,100%{translate:0 6px}50%{translate:0 -6px}}
@media (max-width:720px){.lines span:nth-child(n+5){display:none}.lines span:nth-child(4){clip-path:polygon(3vw 0,100% 0,100% 100%,0 100%)}.lines b{font-size:clamp(1.2rem,6vw,2rem)}}

/* Bühne: Handyhülle + Anhänger mit Laserlinie */
.hero-stage{position:relative;aspect-ratio:1/0.92;min-height:340px}
.stage-plate{position:absolute;inset:6% 0 0 8%;border-radius:32px;background:
  linear-gradient(var(--bg-alt),var(--bg-alt)) padding-box;
  overflow:hidden}
.stage-plate::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;opacity:.7}
.crop{position:absolute;width:26px;height:26px;border-color:var(--ink);border-style:solid;opacity:.55}
.crop.tl{top:18px;left:18px;border-width:2px 0 0 2px}.crop.tr{top:18px;right:18px;border-width:2px 2px 0 0}
.crop.bl{bottom:18px;left:18px;border-width:0 0 2px 2px}.crop.br{bottom:18px;right:18px;border-width:0 2px 2px 0}
.hero-phone{position:absolute;left:18%;top:2%;width:42%;aspect-ratio:9/18.6;border-radius:13% / 6.3%;background:#111;padding:2.2%;box-shadow:var(--shadow-lg);animation:float 9s ease-in-out infinite;transform-origin:50% 80%}
.hero-phone .case-art{position:relative;width:100%;height:100%;border-radius:11.5% / 5.6%;overflow:hidden;background:var(--brand)}
.case-art .art{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.case-art .art.on{opacity:1}
.case-art .cam{position:absolute;left:7%;top:3.5%;width:40%;aspect-ratio:1;border-radius:22%;background:rgba(10,14,12,.86);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.case-art .cam i{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3c4a43,#050706 60%);box-shadow:0 0 0 2px #1d2622}
.case-art .cam i:nth-child(1){left:10%;top:10%}.case-art .cam i:nth-child(2){left:10%;bottom:10%}.case-art .cam i:nth-child(3){right:10%;top:33%}
.preview-tag{position:absolute;right:6%;bottom:4%;background:rgba(255,255,255,.88);color:var(--ink);font:700 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:6px}
.hero-pendant{position:absolute;right:4%;bottom:6%;width:40%;animation:float 11s ease-in-out -3s infinite}
.hero-pendant svg{width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(16,26,20,.22))}
.laser-text{font-family:"Great Vibes",cursive;font-size:56px;fill:none;stroke:#3b3f3c;stroke-width:1.1;stroke-dasharray:420;stroke-dashoffset:420;animation:engrave 7s var(--ease-out) infinite}
.laser-dot{fill:var(--brand);filter:drop-shadow(0 0 3px var(--brand));animation:laser 7s var(--ease-out) infinite}
@keyframes engrave{0%{stroke-dashoffset:420;fill:transparent}55%{stroke-dashoffset:0;fill:transparent}70%,92%{stroke-dashoffset:0;fill:#3b3f3c}100%{stroke-dashoffset:0;fill:transparent;opacity:0}}
@keyframes laser{0%{transform:translateX(0);opacity:1}55%{transform:translateX(150px);opacity:1}60%,100%{transform:translateX(150px);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}

/* ---------- Abschnitte ---------- */
.section{padding:clamp(72px,9vw,140px) 0;position:relative}
.section-alt{background:linear-gradient(180deg,var(--bg) 0,var(--bg-alt) 120px,var(--bg-alt) calc(100% - 120px),var(--bg) 100%)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{font-size:clamp(2.4rem,5vw,4.2rem)}
.sec-head p{color:var(--muted);font-size:1.1rem;max-width:56ch;margin:0}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* Ablauf als Laufband mit Linie */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:31px;left:32px;right:32px;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);opacity:.25}
.step{position:relative}
.step-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--ink);margin-bottom:22px;position:relative;z-index:1;transition:background .3s}
.step.is-in .step-ico{background:var(--brand)}
.step-ico svg{width:28px;height:28px}
.step h3{font-size:1.7rem;margin-bottom:10px}
.step p{color:var(--muted);margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.step{display:grid;grid-template-columns:64px 1fr;gap:0 18px}.step-ico{margin:0;grid-row:span 2}}

/* Zwei Produktwelten */
.worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.world{position:relative;display:flex;flex-direction:column;min-height:520px;border-radius:28px;overflow:hidden;background:var(--surface);text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .45s var(--ease-out),box-shadow .45s}
.world:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.world-media{position:relative;flex:1;min-height:280px;background:var(--brand-soft);overflow:hidden}
.world-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.world:hover .world-media img{transform:scale(1.04)}
.world-body{padding:28px 32px 32px;display:flex;justify-content:space-between;align-items:end;gap:20px}
.world-body h3{font-size:clamp(2rem,3.4vw,3rem)}
.world-body p{color:var(--muted);margin:10px 0 0;max-width:40ch}
.world-go{flex:none;width:58px;height:58px;border-radius:50%;background:var(--brand);display:grid;place-items:center;transition:transform .35s var(--ease-out)}
.world:hover .world-go{transform:rotate(-45deg)}
@media (max-width:860px){.worlds{grid-template-columns:1fr}.world{min-height:420px}}

/* Gezeichnete Produktmotive (wenn noch keine Fotos hochgeladen sind) */
.motif{position:absolute;inset:0;display:grid;place-items:center}
.motif svg{width:70%;max-width:360px;height:auto}
.motif .draw{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.4s var(--ease-out)}
.is-in .motif .draw{stroke-dashoffset:0}

/* Beispiele: alle nebeneinander, kein Slider */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);aspect-ratio:4/5}
.gallery figure:nth-child(even){transform:translateY(32px)}
.gallery img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.gallery{grid-template-columns:1fr 1fr}.gallery figure:nth-child(even){transform:none}}

/* Vorteile als Liste mit großen Zahlen statt Karten */
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.perk{padding:32px 28px 8px 0;border-right:1px solid var(--line)}
.perk:last-child{border-right:0}
.perk+.perk{padding-left:28px}
.perk h3{font-size:1.9rem;margin-bottom:12px}
.perk p{color:var(--muted)}
.perk svg{width:36px;height:36px;color:var(--brand-text);margin-bottom:18px}
@media (max-width:860px){.perks{grid-template-columns:1fr}.perk{border-right:0;border-bottom:1px solid var(--line);padding:28px 0!important}}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,96px)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:700;font-size:1.1rem;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:14px;height:14px;margin-top:6px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(225deg)}
.faq-list .ans{padding:0 0 22px;color:var(--muted);max-width:68ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* Abholung */
.pickup{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;background:var(--surface);border-radius:32px;padding:clamp(28px,5vw,64px);box-shadow:var(--shadow)}
.pickup h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:18px}
.pickup dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0}
.pickup dt{font-weight:700;color:var(--ink)}
.pickup dd{margin:0;color:var(--muted)}
.store-sign{position:relative;aspect-ratio:4/3;border-radius:24px;background:var(--brand-soft);overflow:hidden}
.store-sign svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:860px){.pickup{grid-template-columns:1fr}}

/* ---------- Reveals ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* ---------- Konfigurator ---------- */
.cfg{padding:clamp(20px,3vw,40px) 0 96px}
.cfg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
.cfg-head h1{font-size:clamp(2.4rem,5vw,4rem)}
.stepper{display:flex;gap:6px;list-style:none;margin:0;padding:0;counter-reset:st}
.stepper li{counter-increment:st;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted);padding:8px 14px 8px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.stepper li::before{content:counter(st);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);color:var(--ink);font-size:12px}
.stepper li.on{color:var(--ink);border-color:var(--ink)}
.stepper li.on::before{background:var(--brand)}
.stepper li.done::before{content:"✓";background:var(--ink);color:#fff}
@media (max-width:700px){.stepper li span{display:none}.stepper li{padding:6px}}

.cfg-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:clamp(20px,3vw,48px);align-items:start}
.cfg-stage{position:sticky;top:96px;background:var(--surface);border-radius:28px;box-shadow:var(--shadow);padding:clamp(16px,2.5vw,32px);min-height:420px}
.cfg-panel{display:flex;flex-direction:column;gap:18px}
@media (max-width:980px){.cfg-grid{grid-template-columns:1fr}.cfg-stage{position:relative;top:0}}

.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,2.4vw,28px)}
.card h2{font-size:1.9rem;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.card h2 .stepno{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 15px/1 var(--body)}
.card.locked{opacity:.5;pointer-events:none}
.card .hint{color:var(--muted);font-size:14px;margin:0 0 14px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{position:relative}
.chip-opt input{position:absolute;opacity:0;pointer-events:none}
.chip-opt span{display:flex;align-items:center;min-height:48px;padding:0 18px;border-radius:12px;border:2px solid var(--line);background:var(--surface);font-weight:700;cursor:pointer;transition:border-color .2s,background .2s}
.chip-opt input:checked+span{border-color:var(--ink);background:var(--brand-soft)}
.chip-opt input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.chip-opt span:hover{border-color:#9aa79e}

.opt-list{display:grid;gap:10px}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .opt-box{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 18px;border-radius:14px;border:2px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s}
.opt input:checked+.opt-box{border-color:var(--ink);background:var(--brand-soft)}
.opt input:focus-visible+.opt-box{outline:3px solid var(--brand);outline-offset:2px}
.opt-name{font-weight:700;color:var(--ink)}
.opt-price{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.opt-price s{color:var(--muted);font-weight:400;margin-right:6px}
.opt-desc{grid-column:1/-1;color:var(--muted);font-size:14px}

label.field{display:block;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px}
.input,select.input,textarea.input{width:100%;min-height:52px;padding:12px 16px;border-radius:12px;border:2px solid var(--line);background:#fff;font:500 16px/1.4 var(--body);color:var(--ink);transition:border-color .2s,box-shadow .2s}
textarea.input{min-height:96px;resize:vertical}
.input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 25%,transparent)}
.input::placeholder{color:#7d8a82}
.input.invalid{border-color:var(--danger)}
.field-err{color:var(--danger);font-size:14px;margin:6px 0 0;font-weight:600}
.field-help{color:var(--muted);font-size:13px;margin:6px 0 0}
.counter{float:right;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.counter.over{color:var(--danger)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.check{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:15px;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink)}

/* Upload-Feld */
.drop{position:relative;display:grid;place-items:center;text-align:center;gap:8px;padding:32px 20px;border:2px dashed #b9c6bc;border-radius:16px;background:var(--bg);cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--brand-soft)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop strong{font-size:17px;color:var(--ink)}
.drop small{color:var(--muted)}
.drop svg{width:40px;height:40px;color:var(--brand-text)}
.upl{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;margin-top:12px}
.upl img,.upl .ph{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--bg-alt)}
.upl-name{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-meta{font-size:13px;color:var(--muted)}
.bar{height:6px;border-radius:6px;background:var(--bg-alt);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(0);transition:transform .2s linear}
.upl-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.linkbtn{background:none;border:0;padding:6px 0;font:700 14px var(--body);color:var(--brand-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.handy-btn{margin-top:10px}
.handy{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.handy-qr{width:200px;height:200px;padding:8px;background:#fff;border-radius:10px;box-sizing:content-box}
.handy-qr img,.handy-qr canvas{display:block;width:200px;height:200px}
@media (max-width:560px){.handy{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* Qualitätsanzeige */
.quality{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--bg);font-size:14px}
.q-dot{width:12px;height:12px;border-radius:50%;grid-row:span 2}
.q-sehr_gut .q-dot,.q-gut .q-dot{background:#17A35A}.q-ausreichend .q-dot{background:#E2A000}.q-kritisch .q-dot{background:var(--danger)}
.q-kritisch{background:#FCEDEB}
.quality strong{color:var(--ink)}
.quality span{color:var(--muted)}

/* Editor */
.editor{position:relative;display:grid;place-items:center;user-select:none;-webkit-user-select:none}
.editor canvas{touch-action:none;cursor:grab;max-height:min(70vh,640px);width:auto;height:auto}
.editor canvas:active{cursor:grabbing}
.ed-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:700 14px var(--body);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.tool:hover{border-color:var(--ink)}
.tool svg{width:18px;height:18px}
.zoomrow{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:12px;font-size:13px;color:var(--muted);font-weight:600}
.zoomrow input[type=range]{width:min(320px,60vw);accent-color:var(--ink)}
.stage-note{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--bg);font-size:13px;color:var(--muted)}
.stage-note b{color:var(--ink)}
.empty-stage{display:grid;place-items:center;text-align:center;min-height:380px;color:var(--muted);gap:10px}
.empty-stage svg{width:120px;height:auto;opacity:.9}

/* Preisleiste */
.pricebar{position:sticky;bottom:0;z-index:20;margin-top:6px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:16px 18px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.pricebar .p-label{font-size:13px;color:var(--muted);font-weight:600}
.pricebar .p-total{font:800 32px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.pricebar .btn{flex:1;max-width:320px}
.breakdown{font-size:13px;color:var(--muted);margin:4px 0 0}
@media (max-width:980px){.pricebar{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));border-radius:18px}.cfg{padding-bottom:140px}}

/* Gravur-Vorschau */
.engrave-stage{display:grid;place-items:center;min-height:440px}
.engrave-stage svg{width:100%;max-width:560px;height:auto}
.side-switch{display:inline-flex;background:var(--bg);border-radius:12px;padding:4px;gap:4px;margin:0 auto 12px}
.side-switch button{min-height:40px;padding:0 16px;border:0;border-radius:9px;background:transparent;font:700 14px var(--body);color:var(--muted);cursor:pointer}
.side-switch button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.prod{position:relative}
.prod input{position:absolute;opacity:0;pointer-events:none}
.prod .prod-box{display:flex;flex-direction:column;height:100%;border:2px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .2s}
.prod input:checked+.prod-box{border-color:var(--ink)}
.prod input:focus-visible+.prod-box{outline:3px solid var(--brand);outline-offset:2px}
.prod-img{aspect-ratio:4/3;background:var(--brand-soft);display:grid;place-items:center}
.prod-img{background:var(--bg-alt)}
.prod-img img{width:100%;height:100%;object-fit:contain;padding:12%;filter:drop-shadow(0 8px 10px rgba(16,26,20,.18))}
.prod-img svg{width:52%;height:auto}
.prod-t{padding:10px 12px 12px}
.prod-t strong{display:block;color:var(--ink);font-size:15px;line-height:1.3}
.prod-t span{font-size:13px;color:var(--muted)}
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.font-opt input{position:absolute;opacity:0;pointer-events:none}
.font-opt{position:relative}
.font-opt span{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:8px 12px;border:2px solid var(--line);border-radius:12px;cursor:pointer;background:#fff}
.font-opt b{font-size:22px;font-weight:400;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-opt small{font-size:11px;color:var(--muted);font-family:var(--body)}
.font-opt input:checked+span{border-color:var(--ink);background:var(--brand-soft)}
.font-opt input:focus-visible+span{outline:3px solid var(--brand)}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.seg label{position:relative}
.seg input{position:absolute;opacity:0}
.seg span{display:grid;place-items:center;min-width:52px;min-height:44px;cursor:pointer;font-weight:700}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--brand);outline-offset:-3px}

/* ---------- Warenkorb / Kasse ---------- */
.page{padding:clamp(24px,4vw,56px) 0 120px}
.page h1{font-size:clamp(2.6rem,5.6vw,4.4rem);margin-bottom:28px}
.checkout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:clamp(20px,3vw,48px);align-items:start}
@media (max-width:980px){.checkout{grid-template-columns:1fr}}
.line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.line:first-child{padding-top:0}
.line-img{width:96px;height:96px;border-radius:14px;background:var(--bg-alt);object-fit:cover;display:grid;place-items:center;overflow:hidden}
.line-img svg{width:48px}
.line h3{font:700 17px/1.35 var(--body);text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 6px}
.line .det{font-size:14px;color:var(--muted);white-space:pre-line;margin:0;overflow-wrap:anywhere}
.line .lp{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.line .err{color:var(--danger);font-weight:600;font-size:14px}
@media (max-width:560px){.line{grid-template-columns:72px minmax(0,1fr)}.line-img{width:72px;height:72px}.line .lp{grid-column:2;text-align:left}}
.summary{position:sticky;top:96px}
.sumrow{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-variant-numeric:tabular-nums}
.sumrow.total{border-top:2px solid var(--ink);margin-top:8px;padding-top:14px;font:800 30px/1 var(--display);color:var(--ink)}
.notice{padding:14px 16px;border-radius:14px;background:var(--bg);font-size:14px;color:var(--muted)}
.notice-warn{background:#FFF5E0;color:#6b4300}
.notice-err{background:#FCEDEB;color:#8a1f16;font-weight:600}
.notice-ok{background:var(--brand-soft);color:var(--ink)}
.legal-box{font-size:14px;color:var(--muted);display:grid;gap:12px}
.empty{text-align:center;padding:64px 20px}
.empty svg{width:120px;margin:0 auto 20px}

/* Bestätigung / Status */
.done{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.done-badge{font:800 clamp(3rem,8vw,6rem)/.9 var(--display);text-transform:uppercase;color:var(--ink)}
.orderno{display:inline-block;font:800 34px/1 var(--display);letter-spacing:.04em;background:var(--brand);color:#04140b;padding:12px 18px;border-radius:12px;margin:18px 0}
@media (max-width:860px){.done{grid-template-columns:1fr}}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding-bottom:22px;position:relative}
.timeline li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:#fff;margin:5px 0 0 7px;z-index:1}
.timeline li::after{content:"";position:absolute;left:13px;top:20px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li.done::before{background:var(--brand);border-color:var(--brand)}
.timeline li.cur::before{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 5px var(--brand-soft)}
.timeline b{color:var(--ink)}
.timeline small{display:block;color:var(--muted)}

.legal{max-width:880px}
.legal h1{margin-bottom:24px}
.legal .txt h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:40px 0 12px}
.legal .txt h3{font-size:1.15rem;margin:28px 0 8px}
.legal .txt p{margin:0 0 14px;overflow-wrap:anywhere}

/* ---------- Fußzeile ---------- */
.footer{background:linear-gradient(180deg,var(--bg) 0,var(--bg-alt) 80px);padding:72px 0 28px;margin-top:40px}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.f-brand p{color:var(--muted);max-width:40ch;margin-top:16px}
.f-h{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.footer p{font-size:15px;color:var(--muted)}
.footer a{color:var(--text)}
.f-small{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:860px){.footer-in{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media (max-width:480px){.footer-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .hero-leaves svg,.logo-sticker,.lines b,.hero-case,.hero-tag{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .laser-text{stroke-dashoffset:0;fill:#3b3f3c}
}
@media print{.topbar,.footer,.pricebar,.mobilemenu{display:none!important}}

/* Grid-Kinder dürfen schrumpfen – sonst schiebt breiter Inhalt die Seite seitlich */
.cfg-grid>*,.checkout>*,.hero-grid>*,.done>*,.faq>*,.pickup>*{min-width:0}
@media (max-width:980px){.cfg-stage:has(#stage-empty:not([hidden])){display:none}}

@media (max-width:960px){.logo-sticker{display:none}}
.promo{padding:clamp(8px,2vw,24px) 0 clamp(40px,6vw,88px)}
.promo img{display:block;width:100%;max-width:1180px;margin:0 auto;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.case-example{margin:0 auto 8px;max-width:420px;width:100%}
.case-example img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.case-example figcaption{margin-top:12px;font:800 1.3rem/1 var(--display);text-transform:uppercase;color:var(--brand-text);text-align:center}
.world-media img.contain{object-fit:contain;background:#fff;padding:12px}
.hero-case{position:absolute;left:20%;top:0;width:38%;animation:float 9s ease-in-out infinite;transform-origin:50% 80%}
.hero-case img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(16,26,20,.28))}
.hero-tag{position:absolute;right:3%;top:8%;width:30%;animation:float 11s ease-in-out -3s infinite;transform-origin:50% 0}
.hero-tag img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
.hero-tag{filter:drop-shadow(0 24px 28px rgba(16,26,20,.25))}
/* Schutzfolien: grünes Band mit Finder wie bei greenmnky.de */
.films-band{background:radial-gradient(120% 140% at 85% 0,#2FD45A 0,var(--brand) 55%,#0E6E30 100%);color:#fff;padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px)}
.films-band h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.8rem)}
.films-sub{font-size:clamp(1rem,1.3vw,1.15rem);max-width:60ch;margin:14px 0 32px;opacity:.95}
.finder{background:#fff;color:var(--text);border-radius:var(--radius);padding:clamp(18px,2.4vw,28px);max-width:980px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4);display:grid;gap:16px}
.finder>b{font-size:18px;color:var(--ink)}
.finder-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.finder label span{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.finder select:disabled{opacity:.55}
.finder-q{max-width:420px}
@media (max-width:720px){.finder-row{grid-template-columns:1fr}}
.films-result{padding-bottom:0}
.films-kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);margin:0 0 6px}
.films-result h2,.films-types h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:24px}
.film-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.film-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 20px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.film-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--c)}
.film-card b{font-size:1.25rem;color:var(--ink)}
.film-card span{font-size:14px;line-height:1.5;color:var(--muted)}
.film-card em{font-style:normal;font-size:12px;font-weight:700;color:var(--brand-text);margin-top:auto}

/* GREENMNKY-Look: weiß, klare Grotesk, Pillen-Bedienelemente, weniger Deko */
:root{--bg:#FFFFFF;--bg-alt:#F4F6F4;--display:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;--line:#E3E8E4}
h1,h2,h3{font-weight:700;text-transform:none;letter-spacing:-.03em;line-height:1.05}
.section-alt{background:var(--bg-alt)}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.035em}
.hero h1 .hl{display:inline;color:inherit}
.hero h1 .first{color:var(--brand);display:block}
.btn{border-radius:999px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:none}
.btn-primary:hover{background:color-mix(in oklab,var(--brand) 88%,#000)}
.chip-opt span{border-radius:999px;border-width:1px}
.chip-opt input:checked+span{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
input.input,select.input{border-radius:999px;border-width:1px;padding-left:20px;padding-right:20px}
textarea.input{border-width:1px}
.card{box-shadow:none;border:1px solid var(--line)}
.hero-leaves,.logo-sticker,.crop,.stage-plate::before{display:none}
.stage-plate{background:var(--bg-alt)}
.sec-head h2{font-size:clamp(2rem,3.8vw,3.2rem)}
.empty-photo{width:min(300px,70%);height:auto;margin:0 auto 18px;display:block;filter:drop-shadow(0 20px 24px rgba(16,26,20,.2))}
.prod-img{position:relative;overflow:hidden}.prod-img img{position:absolute;inset:0}
.prod-img img{padding:7%}
/* Blätter-Hintergrund (Einstellung „Hintergrundbild“) */
.films-band{background:linear-gradient(100deg,rgba(6,40,18,.82) 0,rgba(6,40,18,.55) 55%,rgba(6,40,18,.25) 100%),var(--leaves,none) center/cover,radial-gradient(120% 140% at 85% 0,#2FD45A 0,var(--brand) 55%,#0E6E30 100%)}
.promo{padding:clamp(24px,4vw,56px) 0 clamp(56px,7vw,110px)}
.promo img{box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
/* Startseite: Blätter großflächig, aber dezent hinter Hero und Banner */
.home-leaves{background:linear-gradient(180deg,rgba(255,255,255,0) 75%,#fff 100%),linear-gradient(90deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.62) 45%,rgba(255,255,255,.3) 100%),var(--leaves,none) center top/cover fixed}
@media (max-width:860px),(prefers-reduced-motion:reduce){.home-leaves{background-attachment:scroll}}
.home-leaves .stage-plate{background:rgba(255,255,255,.55);backdrop-filter:blur(2px)}
.home-leaves .hero-lead,.home-leaves .hero-meta{color:#26332B}
.home-leaves .world{box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.home-leaves .sec-head p{color:#1B2620;font-weight:600}
.partner-logo{display:flex;align-items:center;padding-left:18px;margin-left:18px;border-left:1px solid var(--line);height:40px}
.partner-logo img{height:34px;width:auto;display:block}
@media (max-width:520px){.partner-logo{padding-left:12px;margin-left:12px}.partner-logo img{height:24px}}
.world-media{aspect-ratio:4/3;flex:none;min-height:0}.world-media img{position:absolute;inset:0}
.home-leaves{background:linear-gradient(90deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.62) 45%,rgba(255,255,255,.3) 100%),var(--leaves,none) center/cover fixed}
.home-leaves .section-alt{background:rgba(255,255,255,.55)}
.home-leaves .pickup,.home-leaves .faq-list details{background:rgba(255,255,255,.92)}
.home-leaves .faq-list details{border-radius:14px;padding:0 18px;margin-bottom:8px}
.home-leaves .store-sign{background:rgba(255,255,255,.7)}
.home-leaves p{color:#26332B}
.home-leaves .section-alt{background:transparent}
/* Aktionen und Störer */
.events{padding-bottom:clamp(24px,4vw,56px)}
.event-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.event{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);display:flex;flex-direction:column}
.event img{display:block;width:100%;height:auto}
.event-body{padding:22px 24px 26px;display:grid;gap:10px;justify-items:start}
.event-body h3{font-size:1.4rem}
.event-body p{margin:0;color:var(--muted)}
.stoerer{position:absolute;z-index:4;right:-6px;top:-18px;width:clamp(96px,10vw,132px);aspect-ratio:1;border-radius:50%;background:var(--sc);color:#fff;display:grid;place-content:center;text-align:center;padding:12px;rotate:12deg;text-decoration:none;box-shadow:0 14px 30px -12px color-mix(in oklab,var(--sc) 70%,#000);animation:stoerer 4s ease-in-out infinite}
.stoerer b{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1;font-weight:800;letter-spacing:-.02em}
.stoerer span{font-size:12px;font-weight:700;line-height:1.2;margin-top:4px}
@keyframes stoerer{0%,100%{scale:1}50%{scale:1.06}}
@media (prefers-reduced-motion:reduce){.stoerer{animation:none}}
.logo-img[src$=".svg"]{height:44px}
.event-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.event-body{padding:16px 18px 20px}
.event-body:empty{display:none}
.event-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),380px));justify-content:center}
.event a img{transition:transform .5s var(--ease-out)}.event a:hover img{transform:scale(1.03)}
.linkbtn.danger{color:var(--danger)}

.films-banner{display:block;width:100%;max-width:1100px;height:auto;border-radius:20px}
.event-media{position:relative;overflow:hidden}
.event .countdown{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;margin:0;display:flex;gap:10px;justify-content:center;align-items:baseline;padding:10px 14px;border-radius:999px;background:rgba(16,26,20,.88);color:#fff;font-size:.95rem;line-height:1.2}
.countdown-label{opacity:.75}
.countdown-time{font-variant-numeric:tabular-nums;font-weight:700}
.countdown.is-live{background:var(--brand)}.countdown.is-live .countdown-label{display:none}
.event-grid{align-items:stretch}
.event-meta{display:grid;gap:12px;padding:16px 18px 18px;justify-items:start}
.event-place{display:flex;gap:8px;align-items:flex-start;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.35}
.event-place svg{flex:none;color:var(--brand);margin-top:1px}
.event-place:hover span{text-decoration:underline}
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.signup img{width:100%;height:auto;border-radius:var(--radius);display:block}
.signup-facts{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.signup-facts li{display:flex;gap:10px;align-items:flex-start}
.signup-facts b{min-width:72px}
.signup-bonus{background:color-mix(in oklab,var(--brand) 14%,#fff);border-radius:14px;padding:14px 18px;font-weight:700;margin:0 0 22px}
.signup-code{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:.12em;margin:10px 0 6px}
@media (max-width:860px){.signup{grid-template-columns:1fr}}
.event-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));justify-content:stretch}
.event-noimg{aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 24px 72px;background:linear-gradient(150deg,var(--brand),color-mix(in oklab,var(--brand) 55%,#0B2A18));color:#fff}
.event-noimg h3{color:#fff;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.15;margin:0}
.home-leaves .event-noimg p{color:rgba(255,255,255,.85);margin:0;font-weight:600}
.promo-row{display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:22px;align-items:stretch}
.promo-row picture{display:block}
.promo-row picture img{display:block;width:100%;height:auto}
.partner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;background:#fff;border-radius:var(--radius);box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.partner img{width:min(100%,260px);height:auto}
.home-leaves .partner span{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);padding:5px 12px;border-radius:999px;background:color-mix(in oklab,var(--brand) 18%,#fff)}
@media (max-width:720px){.promo-row{grid-template-columns:1fr}.partner{padding:22px}}
.promo .partner img{box-shadow:none;border-radius:0;margin:0}
.partner{gap:10px;padding:14px}
.partner img{width:auto;max-width:100%;height:clamp(120px,11vw,190px)}
/* Aktion ohne Bild: ohne Farbe nur Text + Timer, mit Farbe als Fläche */
.event:has(.event-noimg:not(.has-color)){background:none;box-shadow:none}
.event-noimg{background:none;color:var(--ink);padding:8px 4px}
.event-noimg h3{color:var(--ink)}
.home-leaves .event-noimg p{color:var(--ink)}
.event-noimg:not(.has-color) ~ .countdown,.event-media:has(.event-noimg:not(.has-color)) .countdown{position:static;margin-top:12px;display:inline-flex;left:auto;right:auto;bottom:auto}
.event-media:has(.event-noimg:not(.has-color)){display:flex;flex-direction:column-reverse;justify-content:flex-end}
.event-noimg.has-color{background:var(--card);color:var(--card-ink);padding:24px 24px 72px;aspect-ratio:1;border-radius:0}
.event-noimg.has-color h3,.home-leaves .event-noimg.has-color p{color:var(--card-ink)}
.event .countdown{white-space:nowrap}
.event-media:has(.event-noimg:not(.has-color)){aspect-ratio:1;justify-content:center;align-items:flex-start}
.event-noimg:not(.has-color){aspect-ratio:auto}
.event-grid{align-items:start}
/* Preisliste Folienarten */
.film-prices{list-style:none;margin:22px 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.film-prices li{background:#fff;border:1px solid var(--line);border-top:5px solid var(--c);border-radius:var(--radius);padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.film-prices b{color:var(--ink)}
.film-prices span{font-weight:800;color:var(--ink);white-space:nowrap}
.film-card .film-add{margin-top:6px;width:100%}
#pstage .editor{display:grid;place-items:center}
#pstage canvas{display:block;border-radius:14px;cursor:grab}
.layer-tools{margin-top:12px;display:grid;gap:8px}

/* Echtfotos auf der Hüllenseite */
.real{padding:clamp(48px,7vw,96px) 0}
.real h2{font-size:clamp(2rem,3.6vw,3rem);margin:0 0 8px}
.real h2 em{font-style:normal;color:var(--brand-text)}
.real-sub{color:var(--muted);margin:0 0 clamp(24px,3vw,40px)}
.real-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.real-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.real-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.real-grid figcaption{padding:14px 18px;font-weight:700;font-size:1.15rem}
@media (max-width:860px){.real-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.real-grid figcaption{padding:10px 12px;font-size:1rem}}

/* Gravurmaterialien auf der Startseite */
.mat-list{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.mat-list span{font:700 12px/1 var(--body);padding:6px 10px;border-radius:99px;background:var(--surface,#fff);border:1px solid var(--line);color:var(--ink)}

/* Gravur: Materialauswahl als eigener Schritt */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mat-opt{position:relative}
.mat-opt input{position:absolute;opacity:0;pointer-events:none}
.mat-opt span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .2s,background .2s}
.mat-opt .mat-sw{grid-row:1/3;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.mat-opt b{font-weight:700;line-height:1.2}
.mat-opt small{font-size:12.5px;color:var(--muted);line-height:1.3}
.mat-opt span:hover{border-color:#9aa79e}
.mat-opt input:checked+span{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.mat-opt input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}

/* Gravur: Hinweis, wohin der Kunde noch muss */
@keyframes needs-attn{0%,100%{box-shadow:0 0 0 0 rgba(22,140,52,0)}30%{box-shadow:0 0 0 4px rgba(22,140,52,.35)}}
.needs-attn{animation:needs-attn 1.2s ease-out 2;border-radius:16px}
@media (prefers-reduced-motion:reduce){.needs-attn{animation:none;outline:3px solid rgba(22,140,52,.5);outline-offset:4px}}