/* Layout: Papier-Collage auf einer Mittelachse. Jeder Abschnitt ist ein Bogen Papier in einer Markenfarbe, Streifen und Sticker kleben darauf. */

:root{
  --ink:#2B0A12;     /* Night Wine */
  --orange:#FF6A1A;  /* Sundown Orange */
  --pink:#FF4FA3;    /* Sunset Pink */
  --blush:#FFC1DA;   /* Blush */
  --cream:#FFF4EC;   /* Cream */
  --f-display:"GC Vank","Bebas Neue","Arial Narrow",Impact,sans-serif;
  --f-accent:"Palmira Club","Brush Script MT",cursive;
  --f-text:"The Talk","Helvetica Neue",Arial,sans-serif;
  --gut:max(24px, env(safe-area-inset-left, 0px));
  --gut-r:max(24px, env(safe-area-inset-right, 0px));
  --fs-body:17px;
  --fs-small:14px;
  --fs-cap:13px;
  --fs-h2:clamp(44px, 13vw, 84px);
  --shadow:drop-shadow(0 8px 12px rgba(43,10,18,.22));
  color-scheme:light;
}
@media (min-width:900px){:root{--gut:max(80px, env(safe-area-inset-left, 0px));--gut-r:max(80px, env(safe-area-inset-right, 0px));--fs-body:18px;--fs-small:15px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{background-color:var(--top,var(--blush))}
body{margin:0;background:var(--top,var(--blush));position:relative;color:var(--ink);font-family:var(--f-text);font-size:var(--fs-body);line-height:1.5;font-weight:400;overflow-x:hidden}
body::after{content:"";position:absolute;inset:0;background:url("../img/grain.png");opacity:.035;pointer-events:none;z-index:50}
img,video,svg{max-width:100%}
a{color:inherit}
p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:4px;border-radius:2px}

/* ---------- Abschnitte ---------- */
.sec{position:relative;overflow:hidden;isolation:isolate}
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r);padding-block:88px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px}
@media (min-width:900px){.wrap{padding-block:128px;gap:48px}}
.bg-blush{background:var(--blush)} .bg-orange{background:var(--orange)} .bg-ink{background:var(--ink);color:var(--cream);--focus:var(--cream)}
.bg-cream{background:var(--cream)} .bg-pink{background:var(--pink)}
.sheet{position:absolute;inset:-8%;z-index:0;pointer-events:none;display:none}

/* ---------- Papierstreifen ---------- */
.paper{display:inline-block;filter:var(--shadow);will-change:transform}
.strip{
  --tilt:-2deg;
  display:inline-block;padding:.2em .35em .04em;
  font-family:var(--f-display);text-transform:uppercase;line-height:1.1;white-space:nowrap;font-weight:400;letter-spacing:.005em;
  clip-path:polygon(1% 6%,34% 0,66% 4%,99% 1%,100% 52%,98% 97%,63% 100%,31% 96%,0 100%,2% 50%);
  transform:translateY(var(--wy,0px)) rotate(calc(var(--tilt) + var(--wr,0deg)));
}
.t-r{--tilt:2deg} .t-0{--tilt:-1deg}
.s-orange{background:var(--orange);color:var(--ink)}
.s-pink{background:var(--pink);color:var(--ink)}
.s-cream{background:var(--cream);color:var(--ink)}
.s-blush{background:var(--blush);color:var(--ink)}
.s-ink{background:var(--ink);color:var(--cream)}
.stack{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;font-weight:400}
.h2{font-size:var(--fs-h2)}

/* ---------- Sticker ---------- */
.sticker{--tilt:-6deg;--s:44px;width:calc(var(--s) * 1.65);height:calc(var(--s) * 1.65);border-radius:50%;display:grid;place-items:center;flex:none;
  transform:translateY(var(--wy,0px)) rotate(calc(var(--tilt) + var(--wr,0deg)))}
.sticker svg{width:var(--s);height:var(--s);display:block}
.sticker.r{--tilt:7deg}
.k-pink{background:var(--pink);color:var(--ink)} .k-cream{background:var(--cream);color:var(--ink)}
.k-blush{background:var(--blush);color:var(--ink)} .k-orange{background:var(--orange);color:var(--ink)}
.k-ink{background:var(--ink);color:var(--cream)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;filter:var(--shadow);-webkit-tap-highlight-color:transparent}
.btn span{display:inline-block;font-family:var(--f-text);font-weight:700;font-size:19px;line-height:1.2;padding:18px 34px 17px;min-height:56px;
  clip-path:polygon(1% 6%,34% 0,66% 4%,99% 1%,100% 52%,98% 97%,63% 100%,31% 96%,0 100%,2% 50%);
  transform:rotate(-2deg) scale(1);transition:transform 150ms steps(2)}
.btn.big span{font-size:22px;padding:22px 44px 21px}
@media (hover:hover){.btn:hover span{transform:rotate(2deg) scale(1.04)}}
.btn:active span{transform:rotate(-2deg) scale(.96)}
.b-orange span{background:var(--orange);color:var(--ink)}
.b-pink span{background:var(--pink);color:var(--ink)}
.b-ink span{background:var(--ink);color:var(--cream)}
.b-cream span{background:var(--cream);color:var(--ink)}

.lead{max-width:34ch;font-weight:500;font-size:calc(var(--fs-body) + 2px);line-height:1.45;text-wrap:balance}
.small{font-size:var(--fs-small);font-weight:500;letter-spacing:.01em}

/* ---------- Kopf ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:var(--gut);padding-right:var(--gut-r)}
.top .home{display:block;color:var(--ink);width:120px}
.top .home .logo-svg{display:block;width:120px;height:auto;aspect-ratio:3176/1629}
.top .btn span{font-size:16px;padding:12px 20px 11px;min-height:44px}

/* ---------- Hero ---------- */
.hero .wrap{padding-top:calc(120px + env(safe-area-inset-top,0px));gap:36px}
.hero-logo{margin:0;color:var(--ink);font-size:inherit}
.hero-logo .logo-svg{display:block;width:min(300px,70vw);height:auto;aspect-ratio:3176/1629}
.hero-title{display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-title .strip{font-size:clamp(66px, 21vw, 168px)}
.hero-title .accent{font-family:var(--f-accent);text-transform:none;font-size:clamp(40px, 11vw, 76px);padding:.18em .45em .12em;line-height:1.2}
.date .strip{font-size:clamp(26px, 7.4vw, 44px);letter-spacing:.02em}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:18px}
.film{margin:16px 0 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.film .frame{position:relative;background:var(--ink);padding:10px;filter:var(--shadow);transform:rotate(-1deg);width:100%;max-width:960px}
.film video{display:block;width:100%;height:auto;background:var(--ink)}
.film .v-hoch{aspect-ratio:9/16;max-height:78vh;width:auto;margin:0 auto}
.film .v-quer{aspect-ratio:16/9;display:none}
.film .frame.hoch{width:auto;max-width:100%}
@media (min-width:760px){.film .v-hoch{display:none}.film .v-quer{display:block}.film .frame.hoch{width:100%}}
.film figcaption{font-size:var(--fs-cap);font-weight:500;max-width:52ch}

/* ---------- Ablauf ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:48px;width:100%;max-width:980px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.step{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.step .strip{font-size:clamp(40px, 11vw, 58px)}
.step p{font-weight:500;max-width:24ch}
.step .num{font-family:var(--f-text);font-weight:700;font-size:var(--fs-cap);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Preis ---------- */
.price .price-strip{font-size:clamp(110px, 34vw, 190px);padding:.14em .3em 0;line-height:1}
.price-strip sup{font-family:var(--f-text);font-weight:700;font-size:.3em;vertical-align:top;position:relative;top:.28em;margin-left:.06em}
.per{font-weight:500;font-size:calc(var(--fs-body) + 2px);margin-top:-16px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;text-align:left}
.list li{display:flex;align-items:center;gap:20px;font-weight:500;font-size:calc(var(--fs-body) + 1px);min-width:0}
.list .sticker{--s:30px}

/* ---------- Wann und wo ---------- */
.where{display:grid;gap:40px;width:100%;max-width:980px;align-items:stretch}
@media (min-width:900px){.where{grid-template-columns:1fr 1fr}}
.facts{background:var(--blush);padding:32px 28px;display:flex;flex-direction:column;gap:24px;text-align:left;transform:rotate(-1deg);filter:var(--shadow)}
.facts .row{display:flex;gap:18px;align-items:center}
.facts .sticker{--s:28px}
.facts dt{font-size:var(--fs-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.facts dd{margin:2px 0 0;line-height:1.4}
.facts dd b{font-weight:700}
.mapcard{background:var(--ink);color:var(--cream);padding:32px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transform:rotate(1deg);filter:var(--shadow);--focus:var(--cream)}
.mapcard .sticker{--s:40px}
.mapcard address{font-style:normal;line-height:1.5}
.mapcard address b{font-family:var(--f-display);font-weight:400;font-size:34px;text-transform:uppercase;display:block;letter-spacing:.01em}
.mapnote{font-size:var(--fs-cap);opacity:.85;max-width:30ch}

/* ---------- Fragen ---------- */
.faq{width:100%;max-width:760px;display:flex;flex-direction:column;gap:14px;text-align:left}
.faq details{background:var(--cream);filter:drop-shadow(0 4px 8px rgba(43,10,18,.14))}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-weight:700;font-size:calc(var(--fs-body) + 1px);min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-text);font-weight:700;font-size:30px;line-height:1;transition:transform 150ms steps(2);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 22px;max-width:60ch}
.faq h3{margin:0;font:inherit}

/* ---------- Idee ---------- */
.idea-text{max-width:46ch;font-weight:500;font-size:calc(var(--fs-body) + 1px);text-wrap:pretty}

/* ---------- Abschluss ---------- */
.closing .meta{font-weight:700;font-size:calc(var(--fs-body) + 1px)}
.closing .q{font-size:var(--fs-small);font-weight:500}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--cream);--focus:var(--cream)}
.foot .wrap{padding-block:72px calc(120px + env(safe-area-inset-bottom,0px));gap:28px}
@media (min-width:760px){.foot .wrap{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
.foot .logo{color:var(--pink);width:180px}
.foot .logo .logo-svg{display:block;width:180px;height:auto;aspect-ratio:3176/1629}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;font-weight:500}
.foot nav a{text-underline-offset:4px;padding:8px 2px;display:inline-block}
.foot .ig{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;font-size:calc(var(--fs-body) + 1px);padding:8px}
.foot .ig svg{width:26px;height:26px}
.foot .fine{font-size:var(--fs-cap);opacity:.8}

/* ---------- Fester Button am Handy ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;
  padding:12px var(--gut-r) calc(14px + env(safe-area-inset-bottom,0px)) var(--gut);
  transform:translateY(130%);transition:transform 250ms steps(3);pointer-events:none}
.dock.on{transform:none;pointer-events:auto}
.dock .btn{width:100%;max-width:420px;text-align:center}
.dock .btn span{width:100%;font-size:18px}
@media (min-width:760px){.dock{display:none}}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}

/* ---------- Ebenen: Anfrage, Impressum, Datenschutz ---------- */
dialog{border:0;padding:0;margin:auto;width:min(680px,100% - 32px);max-height:min(88dvh,900px);background:var(--cream);color:var(--ink);overflow:auto;box-shadow:0 20px 50px rgba(43,10,18,.35)}
dialog::backdrop{background:rgba(43,10,18,.72)}
.dlg{padding:56px 28px 36px;display:flex;flex-direction:column;gap:20px}
@media (min-width:600px){.dlg{padding:64px 48px 44px}}
.dlg .strip{font-size:clamp(38px,10vw,56px);align-self:flex-start}
.dlg h3{margin:12px 0 0;font-size:var(--fs-body);font-weight:700}
.dlg p,.dlg li{max-width:62ch}
.dlg ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.close{position:absolute;top:12px;right:12px;width:48px;height:48px;border:0;background:var(--ink);color:var(--cream);border-radius:50%;font:700 26px/1 var(--f-text);cursor:pointer;display:grid;place-items:center;--focus:var(--ink)}
form{display:flex;flex-direction:column;gap:18px}
label{font-weight:700;font-size:var(--fs-small);display:flex;flex-direction:column;gap:6px}
input,select{font:500 17px/1.3 var(--f-text);color:var(--ink);background:#fff;border:2px solid var(--ink);padding:14px 14px;min-height:52px;border-radius:0;width:100%}
input:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.check{flex-direction:row;align-items:flex-start;gap:12px;font-weight:500;line-height:1.45}
.check input{width:24px;height:24px;min-height:24px;flex:none;margin-top:1px;accent-color:var(--ink)}
.form-note{font-size:var(--fs-small)}
.sent{background:var(--blush);padding:22px;display:flex;flex-direction:column;gap:8px}
.sent b{font-size:calc(var(--fs-body) + 2px)}
.btn-submit{align-self:flex-start;border:0;background:none;padding:0;cursor:pointer}

/* ---------- Bewegung: Startzustand (nur mit JavaScript und ohne reduzierte Bewegung) ---------- */
.motion [data-in]{visibility:hidden}
.motion .sec[data-prev]:not(.done){background:var(--prevc)}
.motion .sec[data-prev]:not(.in) .wrap{opacity:0}
.motion .sec[data-prev] .sheet{display:block;visibility:hidden}

/* ================================================================== */
/* Ergänzungen für WordPress                                           */
/* ================================================================== */

.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Kopf */
.top-nav{display:flex;align-items:center;gap:20px}
.nav-link{font-weight:700;font-size:16px;text-decoration:none;padding:10px 2px;min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-underline-offset:5px}
.nav-link:hover{text-decoration:underline}
@media (max-width:420px){.top-nav{gap:12px}.top .home,.top .home .logo-svg{width:96px}}

/* Überschriften-Varianten */
.h2-small{margin:0}
.h2-small .strip{font-size:clamp(36px,10vw,60px)}
.mid .strip,.strip.mid{font-size:clamp(40px,11vw,64px)}
.h2 .strip{font-size:var(--fs-h2)}
h1.h2,h2.h2{margin:0}
.state-note .strip{font-size:clamp(34px,9vw,56px)}
.hero-title{margin:0;font-weight:400}

/* Preis */
.price{margin:0}
.price-strip{font-size:clamp(110px,34vw,190px);padding:.14em .3em 0!important;line-height:1!important}
.tax{font-size:var(--fs-cap);max-width:44ch;opacity:.9;margin-top:-24px}

/* Video: nur eine Ausrichtung vorhanden */
.film video.only{display:block!important}
.film .frame:not(.hoch) video.v-quer{display:block}

/* Hinweise */
.notice{background:var(--cream);color:var(--ink);padding:16px 20px;font-weight:700;max-width:44ch;filter:var(--shadow);transform:rotate(-1deg)}
.notice.ok{background:var(--ink);color:var(--cream)}
.live{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(30px,8vw,44px);line-height:1;letter-spacing:.01em}

/* Formulare in Ebenen und auf Seiten */
.dlg-wrap .dlg{gap:18px}
.dlg h2{margin:0}
.dlg h2 .strip{font-size:clamp(38px,10vw,56px)}
.form-error{background:var(--blush);padding:14px 16px;font-weight:700}
.book,.wl-form{display:flex;flex-direction:column;gap:18px;text-align:left;width:100%}
.help{font-weight:500;font-size:var(--fs-cap)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.summary{background:var(--blush);padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-small)}
.summary b{font-size:calc(var(--fs-body) + 1px)}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:2px solid var(--ink);margin-top:10px;padding-top:10px;font-size:var(--fs-body);font-variant-numeric:tabular-nums}
.summary .total b{font-family:var(--f-text);font-weight:700;font-size:24px}
.fine{font-size:var(--fs-cap);line-height:1.5}
.submit{align-self:stretch;border:0;background:none;padding:0;cursor:pointer;text-align:center}
.submit span{width:100%}
.formcard{background:var(--cream);color:var(--ink);padding:28px 24px;width:100%;max-width:560px;filter:var(--shadow);transform:rotate(-.6deg)}
.wrap.narrow{max-width:760px}

/* Ergebnis-Seiten */
.result .facts{max-width:520px;width:100%;margin:0}
.btn-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
button.btn{border:0;background:none;padding:0;cursor:pointer;font:inherit}

/* Rechtstexte */
.legal .wrap{align-items:flex-start;text-align:left}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:14px}
.prose h2{font-family:var(--f-text);font-weight:700;font-size:calc(var(--fs-body) + 3px);margin:18px 0 0;line-height:1.3}
.prose p,.prose li{line-height:1.6}
.prose a{text-underline-offset:3px}

/* Event-Übersicht */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:48px;width:100%;max-width:1040px}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,1fr);gap:56px 48px}}
.card{position:relative;padding:36px 28px 32px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;filter:var(--shadow);transform:rotate(-1.2deg);min-width:0}
.card.r{transform:rotate(1.2deg)}
.c-orange{background:var(--orange);color:var(--ink)} .c-pink{background:var(--pink);color:var(--ink)}
.c-blush{background:var(--blush);color:var(--ink)} .c-ink{background:var(--ink);color:var(--cream);--focus:var(--cream)}
.card h3{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,10vw,56px);line-height:1.02;letter-spacing:.005em;text-wrap:balance}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3 a:focus-visible{outline:none}
.card:has(a:focus-visible){outline:3px solid var(--focus,var(--ink));outline-offset:6px}
.c-date .strip{font-size:clamp(22px,6vw,30px)}
.c-meta{font-weight:500}
.c-state{font-weight:700}
.past{list-style:none;margin:0;padding:0;width:100%;max-width:640px;display:flex;flex-direction:column;text-align:left}
.past li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0;border-top:1px solid rgba(255,244,236,.25)}
.past a{font-weight:700;color:var(--cream)}

@media (prefers-reduced-motion:reduce){.card,.card.r,.formcard,.notice{transform:none}}

/* Textlink statt zweitem gefüllten Knopf (eine Hauptaktion je Ansicht) */
.btn.b-line{filter:none}
.btn.b-line span{background:none;clip-path:none;transform:none!important;padding:10px 2px;min-height:44px;display:inline-flex;align-items:center;font-size:17px;color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;text-decoration-color:var(--orange)}
.btn.b-line.on-dark span{color:var(--cream);text-decoration-color:var(--pink)}
.btn.b-line:hover span{text-decoration-color:currentColor}
.top .btn.b-line span{font-size:16px}

/* Lange Streifen kleiner setzen (kein Überlauf bei 320 px) */
.hero-title .strip.len-l{font-size:clamp(50px,15vw,130px)}
.hero-title .strip.len-xl{font-size:clamp(38px,11.5vw,104px)}
.h2 .strip.len-l,.stack .strip.len-l{font-size:clamp(38px,10.5vw,74px)}
.h2 .strip.len-xl,.stack .strip.len-xl{font-size:clamp(32px,8.6vw,62px)}
.paper{max-width:100%}

/* Wann und wo: beide Karten linksbündig, gleiche Kante */
.mapcard{align-items:flex-start;justify-content:flex-start;text-align:left}
.nav-link[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px}
.price-strip.len-l{font-size:clamp(76px,22vw,150px)}
.top-nav .btn span{white-space:nowrap}
@media (max-width:379px){.top-nav .btn{display:none}}
/* WordPress-Leiste für Admins nicht über das Logo legen */
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}