/* =========================================================================
   SÜDI — Onepager "laut"
   Inspiriert von Sticker-/Zine-Ästhetik: fette Versalien, harte Schatten,
   Bogenkanten, Ordner-Stapel, Zackensiegel.
   ========================================================================= */


:root{
  --bg:#F7F7F5; --paper:#fff; --ink:#161410; --ink-soft:#5a564e;
  --blue:#0A67D9; --blue-100:#e4eefb;
  --studio:#0A67D9; --schmeckt:#630801; --pink:#FF9BD2;
  --zeigt:#F14704; --cream:#FDFEB3; --tbd:#115604; --neon:#ADFF1D;
  --accent:var(--blue); --accent-ink:#fff; --accent-soft:var(--blue-100);

  --display:'Slofyn', system-ui, sans-serif;
  --font:'Cottorway', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --wrap:1240px; --r:28px; --r-sm:18px;
  --hard:4px 4px 0 var(--ink);
  --ease:cubic-bezier(.2,.7,.2,1);
  --seal:polygon(100.0% 50.0%,99.2% 51.3%,97.2% 52.5%,94.6% 53.5%,92.5% 54.5%,91.6% 55.5%,92.2% 56.7%,94.0% 58.2%,96.2% 59.8%,97.9% 61.5%,98.3% 62.9%,97.2% 64.0%,94.9% 64.6%,92.2% 64.9%,89.9% 65.3%,88.8% 66.1%,89.1% 67.4%,90.4% 69.3%,92.1% 71.4%,93.3% 73.5%,93.3% 75.0%,92.0% 75.7%,89.6% 75.7%,86.9% 75.4%,84.6% 75.1%,83.3% 75.6%,83.2% 76.9%,84.0% 79.1%,85.1% 81.6%,85.7% 83.9%,85.4% 85.4%,83.9% 85.7%,81.6% 85.1%,79.1% 84.0%,76.9% 83.2%,75.6% 83.3%,75.1% 84.6%,75.4% 86.9%,75.7% 89.6%,75.7% 92.0%,75.0% 93.3%,73.5% 93.3%,71.4% 92.1%,69.3% 90.4%,67.4% 89.1%,66.1% 88.8%,65.3% 89.9%,64.9% 92.2%,64.6% 94.9%,64.0% 97.2%,62.9% 98.3%,61.5% 97.9%,59.8% 96.2%,58.2% 94.0%,56.7% 92.2%,55.5% 91.6%,54.5% 92.5%,53.5% 94.6%,52.5% 97.2%,51.3% 99.2%,50.0% 100.0%,48.7% 99.2%,47.5% 97.2%,46.5% 94.6%,45.5% 92.5%,44.5% 91.6%,43.3% 92.2%,41.8% 94.0%,40.2% 96.2%,38.5% 97.9%,37.1% 98.3%,36.0% 97.2%,35.4% 94.9%,35.1% 92.2%,34.7% 89.9%,33.9% 88.8%,32.6% 89.1%,30.7% 90.4%,28.6% 92.1%,26.5% 93.3%,25.0% 93.3%,24.3% 92.0%,24.3% 89.6%,24.6% 86.9%,24.9% 84.6%,24.4% 83.3%,23.1% 83.2%,20.9% 84.0%,18.4% 85.1%,16.1% 85.7%,14.6% 85.4%,14.3% 83.9%,14.9% 81.6%,16.0% 79.1%,16.8% 76.9%,16.7% 75.6%,15.4% 75.1%,13.1% 75.4%,10.4% 75.7%,8.0% 75.7%,6.7% 75.0%,6.7% 73.5%,7.9% 71.4%,9.6% 69.3%,10.9% 67.4%,11.2% 66.1%,10.1% 65.3%,7.8% 64.9%,5.1% 64.6%,2.8% 64.0%,1.7% 62.9%,2.1% 61.5%,3.8% 59.8%,6.0% 58.2%,7.8% 56.7%,8.4% 55.5%,7.5% 54.5%,5.4% 53.5%,2.8% 52.5%,0.8% 51.3%,0.0% 50.0%,0.8% 48.7%,2.8% 47.5%,5.4% 46.5%,7.5% 45.5%,8.4% 44.5%,7.8% 43.3%,6.0% 41.8%,3.8% 40.2%,2.1% 38.5%,1.7% 37.1%,2.8% 36.0%,5.1% 35.4%,7.8% 35.1%,10.1% 34.7%,11.2% 33.9%,10.9% 32.6%,9.6% 30.7%,7.9% 28.6%,6.7% 26.5%,6.7% 25.0%,8.0% 24.3%,10.4% 24.3%,13.1% 24.6%,15.4% 24.9%,16.7% 24.4%,16.8% 23.1%,16.0% 20.9%,14.9% 18.4%,14.3% 16.1%,14.6% 14.6%,16.1% 14.3%,18.4% 14.9%,20.9% 16.0%,23.1% 16.8%,24.4% 16.7%,24.9% 15.4%,24.6% 13.1%,24.3% 10.4%,24.3% 8.0%,25.0% 6.7%,26.5% 6.7%,28.6% 7.9%,30.7% 9.6%,32.6% 10.9%,33.9% 11.2%,34.7% 10.1%,35.1% 7.8%,35.4% 5.1%,36.0% 2.8%,37.1% 1.7%,38.5% 2.1%,40.2% 3.8%,41.8% 6.0%,43.3% 7.8%,44.5% 8.4%,45.5% 7.5%,46.5% 5.4%,47.5% 2.8%,48.7% 0.8%,50.0% 0.0%,51.3% 0.8%,52.5% 2.8%,53.5% 5.4%,54.5% 7.5%,55.5% 8.4%,56.7% 7.8%,58.2% 6.0%,59.8% 3.8%,61.5% 2.1%,62.9% 1.7%,64.0% 2.8%,64.6% 5.1%,64.9% 7.8%,65.3% 10.1%,66.1% 11.2%,67.4% 10.9%,69.3% 9.6%,71.4% 7.9%,73.5% 6.7%,75.0% 6.7%,75.7% 8.0%,75.7% 10.4%,75.4% 13.1%,75.1% 15.4%,75.6% 16.7%,76.9% 16.8%,79.1% 16.0%,81.6% 14.9%,83.9% 14.3%,85.4% 14.6%,85.7% 16.1%,85.1% 18.4%,84.0% 20.9%,83.2% 23.1%,83.3% 24.4%,84.6% 24.9%,86.9% 24.6%,89.6% 24.3%,92.0% 24.3%,93.3% 25.0%,93.3% 26.5%,92.1% 28.6%,90.4% 30.7%,89.1% 32.6%,88.8% 33.9%,89.9% 34.7%,92.2% 35.1%,94.9% 35.4%,97.2% 36.0%,98.3% 37.1%,97.9% 38.5%,96.2% 40.2%,94.0% 41.8%,92.2% 43.3%,91.6% 44.5%,92.5% 45.5%,94.6% 46.5%,97.2% 47.5%,99.2% 48.7%);
}

*,*::before,*::after{box-sizing:border-box} *{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
html:focus-within{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
p{max-width:62ch}
.wrap{width:min(100% - 2rem, var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:1000;background:var(--blue);color:#fff;padding:.7rem 1.1rem;border-radius:12px;font-weight:700}
.skip-link:focus{top:1rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.dots{background-image:radial-gradient(color-mix(in srgb,var(--ink) 14%,transparent) 1.2px,transparent 1.6px);background-size:22px 22px}

/* ---------- Typo ---------- */
.loud{font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
.h-xl{font-size:clamp(3rem,10.5vw,9.5rem)}
.h-l{font-size:clamp(2.4rem,7vw,5.6rem)}
.h-m{font-size:clamp(1.8rem,4.2vw,3.2rem)}
.script{font-family:var(--font);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0}
.slofyn{font-family:var(--display);font-weight:400}
.lead{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-style:italic;font-weight:500}
.tags span::before{content:'['} .tags span::after{content:']'}

/* ---------- Stickers / Labels ---------- */
.label{display:inline-flex;align-items:center;gap:.5rem;font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;
  background:var(--zeigt);color:#fff;padding:.45rem .85rem;border-radius:8px;transform:rotate(-4deg);
  box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--zeigt)}
.label--ink{background:var(--ink);color:var(--neon);box-shadow:none;transform:rotate(-2deg);border-radius:999px;padding:.5rem 1rem}
.label--ink .dot{width:9px;height:9px;border-radius:50%;background:var(--neon);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.hl{display:inline-block;background:var(--neon);color:var(--ink);padding:0 .18em .04em;border-radius:.12em;transform:rotate(-2deg);
  box-shadow:5px 5px 0 var(--ink);position:relative}
.seal{display:grid;place-items:center;text-align:center;clip-path:var(--seal);aspect-ratio:1;padding:16%;
  background:var(--c,var(--neon));color:var(--t,var(--ink));font-weight:900;line-height:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:900;text-transform:uppercase;font-size:.92rem;letter-spacing:.03em;
  padding:.8rem 1.1rem .8rem 1.3rem;border-radius:14px;border:2.5px solid var(--ink);box-shadow:var(--hard);
  background:var(--paper);color:var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease);white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-neon{background:var(--neon)}
.btn-ink{background:var(--ink);color:var(--bg);box-shadow:4px 4px 0 var(--neon)}
.btn .ic{width:26px;height:26px;border-radius:50%;background:var(--zeigt);color:#fff;display:grid;place-items:center;font-size:.9rem;
  border:2px solid var(--ink);transition:transform .2s var(--ease)}
.btn:hover .ic{transform:rotate(-45deg)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- Scallop edges ---------- */
.scallop{height:22px;background:
  radial-gradient(circle at 50% 100%,var(--c) 0 16px,transparent 16.5px) 0 0/32px 22px repeat-x,
  linear-gradient(var(--c),var(--c)) bottom/100% 5px no-repeat}
.scallop--down{transform:scaleY(-1)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:200;padding:.8rem 0;transition:background .2s,box-shadow .2s}
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand img{height:40px;width:auto}
.nav-right{display:flex;align-items:center;gap:.7rem}
.nav-right .btn{padding:.55rem .9rem;font-size:.8rem;box-shadow:3px 3px 0 var(--ink)}
.nav-toggle{width:46px;height:46px;border-radius:13px;border:2.5px solid var(--ink);background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink);position:relative;z-index:2}
.nav-toggle span{position:relative;width:20px;height:2.5px;background:var(--ink);transition:.25s}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:20px;height:2.5px;background:var(--ink);transition:.25s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.nav-links{position:fixed;inset:0;z-index:1;background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:5rem max(1.2rem,6vw) 2rem;gap:.1rem;clip-path:circle(0 at calc(100% - 3rem) 2.4rem);transition:clip-path .55s var(--ease);visibility:hidden}
.nav-links[data-open="true"]{clip-path:circle(150% at calc(100% - 3rem) 2.4rem);visibility:visible}
.nav-links a{font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,7.5vw,5rem);line-height:1;width:fit-content;transition:color .15s,transform .2s var(--ease)}
.nav-links a:hover{color:var(--neon);transform:translateX(10px) rotate(-1deg)}
.nav-links a small{font-family:var(--display);font-size:.4em;text-transform:none;opacity:.7;margin-left:.4rem;vertical-align:middle}
.nav-links .nav-meta{margin-top:2rem;font-weight:500;opacity:.85;font-size:1rem}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(7rem,14vw,10rem) 0 0;text-align:center;overflow:hidden}
.hero-cloud{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-cloud span{position:absolute;border-radius:50%;background:#fff;filter:drop-shadow(0 6px 20px rgba(0,0,0,.04))}
.hero h1{margin-top:1.4rem}
.hero h1 .line{display:block}
.hero .face{display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;margin:0 .05em;animation:wobble 3.2s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(10deg) translateY(-6px)}}
.hero .script{color:var(--zeigt);font-size:.62em;display:inline-block;transform:translateY(-.08em)}
.hero .lead{margin:1.6rem auto 0;max-width:46ch;color:var(--ink-soft)}
.hero .btn-row{justify-content:center;margin-top:2rem}

/* Polaroids */
.polaroids{display:flex;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);margin:clamp(2.6rem,6vw,4.5rem) auto 0;padding:0 1rem clamp(3rem,6vw,5rem);flex-wrap:wrap}
.pol{--c:var(--studio);width:clamp(150px,20vw,230px);background:var(--paper);border-radius:var(--r-sm);padding:9px 9px 0;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);transition:transform .3s var(--ease);position:relative}
.pol:nth-child(1){transform:rotate(-6deg) translateY(16px)} .pol:nth-child(2){transform:rotate(3deg)}
.pol:nth-child(3){transform:rotate(-2deg) translateY(10px)} .pol:nth-child(4){transform:rotate(5deg) translateY(-6px)}
.pol:hover{transform:rotate(0) translateY(-10px) scale(1.04);z-index:2}
.pol-img{container-type:inline-size;aspect-ratio:4/5;border-radius:12px;background:var(--c);display:grid;place-items:center;overflow:hidden;position:relative}
.pol-img b{font-family:var(--display);font-weight:400;font-size:17cqi;color:var(--t,#fff);transform:rotate(-8deg)}
.pol-img::after{content:'';position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.18) 1.2px,transparent 1.6px) 0 0/14px 14px}
.pol-cap{position:relative;margin:0 -9px;padding:1.1rem .8rem .9rem;font-weight:700;font-size:.9rem;line-height:1.2;color:#fff;background:var(--c);
  border-radius:0 0 var(--r-sm) var(--r-sm);margin-top:-6px}
.pol-cap::before{content:'';position:absolute;left:0;right:0;top:-10px;height:12px;
  background:radial-gradient(circle at 50% 100%,var(--c) 0 8px,transparent 8.5px) 0 0/16px 12px repeat-x}

/* ---------- Ticker ---------- */
.ticker{background:var(--blue);color:#fff;transform:rotate(-2deg);margin:-1.5rem -2vw 0;padding:1rem 0;overflow:hidden;
  border-block:3px solid var(--ink);position:relative;z-index:3}
.ticker-track{display:flex;gap:2.4rem;width:max-content;animation:tick 32s linear infinite;font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.6rem);white-space:nowrap}
.ticker-track span::after{content:'✦';margin-left:2.4rem;color:var(--neon)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Section heads ---------- */
.section{padding-block:clamp(4.5rem,9vw,8rem)}
.head{text-align:center;display:grid;justify-items:center;gap:1.2rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.head .script{color:var(--zeigt);font-size:.55em;display:block;margin-top:.15em}

/* ---------- Ordner-Stapel (vier Welten) ---------- */
.stack{display:grid}
.folder{--c:var(--studio);--t:#fff;--pop:var(--neon);position:relative;color:var(--t)}
.folder + .folder{margin-top:-48px}
.folder-tab{display:inline-flex;align-items:center;gap:.6rem;background:var(--c);margin-left:var(--tx,24px);
  padding:.75rem 1.4rem .9rem;border-radius:20px 20px 0 0;font-weight:900;text-transform:uppercase;font-size:.85rem;letter-spacing:.08em;
  position:relative;top:2px}
.folder-tab .n{font-family:var(--display);font-size:1.15rem;color:var(--pop);letter-spacing:0}
.folder-body{background:var(--c);border-radius:var(--r);padding:clamp(1.4rem,3.5vw,3rem) clamp(1.2rem,3.5vw,3rem) calc(clamp(1.4rem,3.5vw,3rem) + 48px);
  box-shadow:0 -14px 40px -20px rgba(0,0,0,.45)}
.folder:last-child .folder-body{padding-bottom:clamp(1.4rem,3.5vw,3rem)}
.folder--studio{--tx:24px}
.folder--schmeckt{--c:var(--schmeckt);--pop:var(--pink);--tx:clamp(24px,22%,300px)}
.folder--zeigt{--c:var(--zeigt);--pop:var(--cream);--tx:clamp(24px,44%,600px)}
.folder--tbd{--c:var(--tbd);--pop:var(--neon);--tx:clamp(24px,66%,880px)}
.f-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.4rem,4vw,3.4rem);align-items:center}
.f-name{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,9vw,7.5rem);line-height:.85;color:var(--pop)}
.f-name small{display:block;font-size:.38em;color:var(--t);opacity:.9}
.folder .tags{color:var(--pop);margin:.9rem 0 1.1rem}
.folder p{margin-bottom:.9rem}
.folder .btn-row{margin-top:1.4rem}
.frame{position:relative;border:6px solid var(--paper);border-radius:22px;aspect-ratio:4/3;background:
  radial-gradient(color-mix(in srgb,var(--pop) 35%,transparent) 1.4px,transparent 1.8px) 0 0/18px 18px,
  color-mix(in srgb,var(--c) 70%,#000);display:grid;place-items:center;overflow:visible}
.frame > span{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--pop);opacity:.8;transform:rotate(-6deg);text-align:center;padding:1rem}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.frame .seal{position:absolute;width:clamp(92px,11vw,128px);right:-26px;top:-30px;--c:var(--pop);--t:var(--ink);font-size:clamp(.8rem,1.1vw,1rem);
  animation:spin 18s linear infinite}
.frame .seal b{display:block;font-size:1.8em}
@keyframes spin{to{transform:rotate(360deg)}}

/* Detail-Zeile im Ordner */
.f-more{margin-top:clamp(1.8rem,4vw,2.8rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1rem}
.f-more h3{font-weight:900;text-transform:uppercase;font-size:.9rem;letter-spacing:.06em;margin-bottom:.6rem}
.note{background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:var(--r-sm);padding:1.2rem 1.3rem;box-shadow:var(--hard)}
.note--ghost{background:rgba(255,255,255,.1);color:inherit;border-color:rgba(255,255,255,.35);box-shadow:none}
.list li{display:flex;gap:.55rem;padding:.3rem 0}
.list li::before{content:'✦';color:var(--c)}
.note--ghost .list li::before{color:var(--pop)}
.hint{font-size:.85rem;opacity:.75;margin-top:.8rem}

/* Preise (CMS rendert .tile/.price/.feature-list/.badge) */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:1rem;margin-top:clamp(1.8rem,4vw,2.8rem)}
.prices .tile{background:var(--paper);color:var(--ink);border:2.5px solid var(--ink)!important;border-radius:var(--r-sm);padding:1.3rem;box-shadow:var(--hard);position:relative}
.prices .tile:nth-child(2){transform:rotate(-1.5deg);background:var(--neon)}
.prices .tile h3{font-weight:900;text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}
.prices .price{font-weight:900;font-size:2.4rem;line-height:1;margin:.4rem 0 .2rem}
.prices .price small{font-size:.4em;font-weight:700;opacity:.7}
.prices .feature-list li{display:flex;gap:.5rem;padding:.25rem 0;font-size:.95rem}
.prices .feature-list li::before{content:'✓';font-weight:900;color:var(--c)}
.prices .badge{position:absolute;top:-14px;right:14px;background:var(--zeigt);color:#fff;font-weight:900;text-transform:uppercase;font-size:.7rem;
  letter-spacing:.06em;padding:.3rem .65rem;border-radius:8px;transform:rotate(4deg);border:2px solid var(--ink)}

/* Grundriss */
.plan{display:block;background:var(--paper);border-radius:var(--r-sm);padding:8px;border:2.5px solid var(--ink);box-shadow:var(--hard);transform:rotate(1.5deg);transition:transform .2s}
.plan:hover{transform:rotate(0) scale(1.02)}
.plan img{border-radius:10px}

/* ---------- Fakten-Siegel ---------- */
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.6rem,2.5vw,2rem);margin-top:clamp(3rem,6vw,5rem)}
.facts .seal{width:clamp(140px,19vw,200px);font-size:clamp(.78rem,1.1vw,.95rem);text-transform:uppercase}
.facts .seal b{display:block;font-size:2.6em;margin-bottom:.15em;text-transform:none}
.facts .seal:nth-child(1){--c:var(--blue);--t:#fff;transform:rotate(-8deg)}
.facts .seal:nth-child(2){--c:var(--neon);transform:rotate(5deg) translateY(14px)}
.facts .seal:nth-child(3){--c:var(--pink);--t:var(--schmeckt);transform:rotate(-3deg)}
.facts .seal:nth-child(4){--c:var(--zeigt);--t:var(--cream);transform:rotate(9deg) translateY(8px)}

/* ---------- Programm (dunkel) ---------- */
.dark{--c:var(--schmeckt);background:var(--schmeckt);color:#fff;position:relative}
.dark .dots-l{background-image:radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.6px);background-size:22px 22px}
.dark .head .script{color:var(--pink)}
.dark .label{box-shadow:0 0 0 3px var(--schmeckt),0 0 0 5px var(--pink);background:var(--pink);color:var(--schmeckt)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(1.2rem,3vw,2rem)}
.card{background:var(--paper);color:var(--ink);border-radius:var(--r-sm);padding:9px;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
  display:flex;flex-direction:column;transition:transform .25s var(--ease)}
.card:nth-child(3n+1){transform:rotate(-2.5deg)} .card:nth-child(3n+2){transform:rotate(1.5deg) translateY(12px)} .card:nth-child(3n){transform:rotate(-1deg)}
.card:hover{transform:rotate(0) translateY(-6px)}
.card .c-media{aspect-ratio:16/10;border-radius:12px;background:var(--blue-100)}
.card .c-body{padding:1rem .7rem .8rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card .badge{align-self:flex-start;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  padding:.3rem .65rem;border-radius:8px;background:var(--blue);color:#fff;transform:rotate(-3deg)}
.card .c-date{font-weight:800;font-size:.85rem;color:var(--zeigt)}
.card h3{font-weight:900;text-transform:uppercase;font-size:1.35rem;line-height:1}
.card p{font-size:.95rem;color:var(--ink-soft)}
.past-head{margin:clamp(3.5rem,7vw,5rem) 0 1.6rem;text-align:center}

/* ---------- Buchen ---------- */
.book{background:var(--neon);border:3px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);
  padding:clamp(1.8rem,5vw,4rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;position:relative}
.book .seal{--c:var(--blue);--t:#fff;width:clamp(120px,14vw,170px);font-size:.9rem;text-transform:uppercase;transform:rotate(10deg);justify-self:center}
.book .seal b{display:block;font-size:2.4em}
.booking-embed{grid-column:1/-1}
.booking-embed iframe{background:#fff;border:3px solid var(--ink)!important}

/* ---------- Über uns ---------- */
.meet{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.meet-photo{position:relative;aspect-ratio:4/5;border-radius:var(--r);background:var(--blue);display:grid;place-items:center;
  border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-2deg)}
.meet-photo img{width:62%;animation:wobble 4s ease-in-out infinite}
.bubble{position:absolute;background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;padding:.6rem 1.1rem;font-weight:700;
  font-size:.95rem;box-shadow:var(--hard);white-space:nowrap}
.bubble--a{top:8%;right:-8%;transform:rotate(4deg)} .bubble--b{bottom:10%;left:-8%;transform:rotate(-5deg)}
.meet h2 .script{display:block;color:var(--zeigt);font-size:.5em;margin-top:.3em}
.meet p{margin-top:1rem}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.6rem,5vw,4rem);align-items:start}
.faq details{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--hard);padding:1.1rem 1.3rem;transition:background .2s}
.faq details+details{margin-top:1rem}
.faq details[open]{background:var(--cream)}
.faq summary{cursor:pointer;list-style:none;font-weight:800;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:0 0 32px;height:32px;border-radius:50%;background:var(--neon);border:2px solid var(--ink);
  display:grid;place-items:center;font-weight:900;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.7rem}

/* ---------- Kontakt ---------- */
.contact{--c:var(--blue);background:var(--blue);color:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact a.u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.contact .info{display:grid;gap:1.4rem;margin-top:2rem;font-size:1.1rem}
.contact .info h3{font-weight:900;text-transform:uppercase;font-size:.8rem;letter-spacing:.1em;color:var(--neon);margin-bottom:.2rem}
.map-embed{margin-top:2rem}
.map-embed iframe{border:3px solid var(--ink)!important}
.form{display:grid;gap:1rem}
.form-card{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);
  padding:clamp(1.4rem,3.5vw,2.4rem);transform:rotate(1deg)}
.form-card h3{font-weight:900;text-transform:uppercase;font-size:1.6rem;line-height:1;margin-bottom:1rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.field input,.field textarea,.field select{font:inherit;padding:.8rem 1rem;border:2.5px solid var(--ink);border-radius:12px;background:var(--bg);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;background:#fff;box-shadow:3px 3px 0 var(--blue)}
.form .hint{opacity:.7;margin:0}
.form .hint a{text-decoration:underline}
.form .btn{justify-self:start}
.form-status{margin:6rem auto 0;padding:.9rem 1.2rem;border-radius:12px;background:var(--zeigt);color:#fff;font-weight:700;border:2.5px solid var(--ink)}
.form-status a{text-decoration:underline}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#cfccc4;padding:clamp(3rem,6vw,5rem) 0 2rem;overflow:hidden}
.nl{display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:end;padding-bottom:clamp(2.4rem,5vw,4rem);border-bottom:1px solid rgba(255,255,255,.14)}
.nl h2{color:#fff}
.nl h2 .hl{box-shadow:5px 5px 0 var(--zeigt)}
.nl form{display:flex;gap:.6rem;flex-wrap:wrap}
.nl input{font:inherit;padding:.8rem 1rem;border-radius:12px;border:2.5px solid var(--neon);background:transparent;color:#fff;min-width:min(280px,100%)}
.nl .btn{box-shadow:4px 4px 0 var(--zeigt)}
.nl-wa{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;max-width:34ch}
.nl-wa p{color:rgba(255,255,255,.85);margin:0}
.nl-wa .btn{display:inline-flex;align-items:center;gap:.55rem}
.nl-wa .wa-ic{width:1.25em;height:1.25em;flex:0 0 auto}
.footer-word{font-weight:900;text-transform:uppercase;color:var(--bg);font-size:clamp(4rem,27vw,24rem);line-height:.8;letter-spacing:-.03em;
  margin:clamp(2rem,5vw,4rem) 0 1.4rem;white-space:nowrap}
.footer-word span{color:var(--blue)}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.9rem}
.footer-row nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.footer-row a:hover{color:#fff}

/* ---------- Consent ---------- */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:300;max-width:500px;margin-inline:auto;background:var(--paper);
  border:3px solid var(--ink);border-radius:var(--r-sm);padding:1.1rem 1.2rem;box-shadow:6px 6px 0 var(--ink)}
.consent p{font-size:.9rem}
.consent .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.consent .btn{font-size:.75rem;padding:.55rem .85rem;box-shadow:3px 3px 0 var(--ink)}
.consent[hidden]{display:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .f-grid,.book,.meet,.faq,.contact-grid,.nl{grid-template-columns:1fr}
  .frame .seal{right:-8px}
  .folder-tab{font-size:.72rem;padding:.65rem 1rem .8rem}
  .folder--schmeckt{--tx:18%} .folder--zeigt{--tx:30%} .folder--tbd{--tx:46%}
  .folder-tab .t{display:none}
  .bubble--a{right:2%} .bubble--b{left:2%}
}
@media (max-width:560px){
  .nav-right .btn{display:none}
  .pol{width:42%}
  .polaroids{gap:.8rem}
  .pol-cap{font-size:.78rem}
  .folder-tab{margin-left:calc(var(--tx) - 12px)}
  .frame .seal{width:84px;top:-22px}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;translate:0 28px;transition:opacity .7s var(--ease),translate .7s var(--ease),transform .25s var(--ease)}
  .js .reveal.in{opacity:1;translate:0 0}
}

/* Schmale Screens: Grid-Kinder dürfen schrumpfen */
.stack > *, .f-grid > *, .meet > *, .faq > *, .contact-grid > *, .book > *, .nl > *{min-width:0}
.f-name{font-size:clamp(2.6rem,13vw,7.5rem)}
@media (max-width:420px){ .btn{white-space:normal} .folder-tab{padding:.6rem .8rem .75rem} }
html,body{overflow-x:clip}

/* Fixes: Siegel-Padding (Prozent bezieht sich auf Containerbreite), CMS-Karten im Ordner */
.seal{padding:0}
.seal > span{max-width:72%}
.frame .seal{font-size:clamp(.85rem,1.2vw,1.05rem);text-transform:uppercase}
.folder .card{transform:none;box-shadow:var(--hard);border:2.5px solid var(--ink)}
.folder .card:nth-child(2){transform:rotate(-1deg)}
.folder .card .c-media{display:none}
.dark .card .c-media{background-image:radial-gradient(rgba(0,0,0,.12) 1.2px,transparent 1.6px);background-size:14px 14px}
[hidden]{display:none!important}
.nav-links{overflow-y:auto;justify-content:safe center}

/* ---------- Welten-Sticker (Hero) ---------- */
.stickers{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:clamp(2.6rem,6vw,4.5rem) auto 0;padding:0 1rem clamp(3.5rem,7vw,6rem)}
.stk{--c:var(--studio);--t:#fff;--shape:none;--rad:0;width:clamp(150px,21vw,250px);aspect-ratio:1;margin:0 -10px;position:relative;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.22));transform:rotate(var(--r,0deg));transition:transform .35s var(--ease);z-index:1}
.stk:hover{transform:rotate(0) scale(1.08);z-index:5}
.stk-ring,.stk-in{display:grid;place-items:center;width:100%;height:100%;clip-path:var(--shape);border-radius:var(--rad)}
.stk-ring{background:var(--paper);padding:9px}
.stk-in{background:var(--c);color:var(--t);text-align:center;align-content:center;gap:.25rem;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.6px);background-size:14px 14px}
.stk-in small{font-family:var(--display);font-size:clamp(.9rem,1.4vw,1.1rem);opacity:.85}
.stk-in b{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);line-height:.9;color:var(--pop,var(--t))}
.stk-in em{font-style:normal;font-weight:900;text-transform:uppercase;font-size:clamp(.62rem,.9vw,.78rem);letter-spacing:.08em}
.stk--studio{--rad:26%;--r:-8deg}
.stk--schmeckt{--c:var(--schmeckt);--pop:var(--pink);--shape:var(--seal);--r:5deg;margin-top:-30px}
.stk--schmeckt .stk-in b{font-size:clamp(1.3rem,2.4vw,2.1rem)}
.stk--zeigt{--c:var(--zeigt);--pop:var(--cream);--shape:polygon(50.0% 0.0%,58.9% 11.0%,71.7% 5.0%,74.9% 18.7%,89.1% 18.8%,86.0% 32.6%,98.7% 38.9%,90.0% 50.0%,98.7% 61.1%,86.0% 67.4%,89.1% 81.2%,74.9% 81.3%,71.7% 95.0%,58.9% 89.0%,50.0% 100.0%,41.1% 89.0%,28.3% 95.0%,25.1% 81.3%,10.9% 81.2%,14.0% 67.4%,1.3% 61.1%,10.0% 50.0%,1.3% 38.9%,14.0% 32.6%,10.9% 18.8%,25.1% 18.7%,28.3% 5.0%,41.1% 11.0%);--r:-4deg;margin-top:20px}
.stk--zeigt .stk-ring{padding:12px}
.stk--tbd{--c:var(--tbd);--pop:var(--neon);--rad:50%;--r:9deg;margin-top:-16px}
@media (prefers-reduced-motion:no-preference){
  .stk:nth-child(odd) .stk-ring{animation:bob 4s ease-in-out infinite}
  .stk:nth-child(even) .stk-ring{animation:bob 4s ease-in-out -2s infinite}
  @keyframes bob{50%{transform:translateY(-8px)}}
}
@media (max-width:560px){ .stk{width:46%;margin:-6px -4px} }

/* ---------- Footer-Logo ---------- */
.footer-logo{width:clamp(140px,22vw,260px);height:auto;color:var(--bg);margin:clamp(2rem,4vw,3rem) 0 1.4rem}

/* ---------- Smiley: Kreise ---------- */
.meet-photo{background:repeating-radial-gradient(circle at 50% 50%,var(--zeigt) 0 34px,var(--cream) 34px 68px)}
.meet-photo img{width:58%;filter:drop-shadow(6px 6px 0 var(--ink))}

/* ---------- Rückblick ---------- */
.past-head{margin:clamp(4rem,8vw,6rem) 0 clamp(2rem,4vw,3rem)}
#cms-events-past .card{position:relative}
#cms-events-past .card::after{content:'war richtig gut ✓';position:absolute;top:-16px;right:-10px;background:var(--neon);color:var(--ink);
  font-weight:900;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;padding:.45rem .75rem;border-radius:999px;
  border:2.5px solid var(--ink);transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}

/* ---------- Partner ---------- */
.partner-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,2rem)}
.pt{--c:var(--paper);--t:var(--ink);background:var(--c);color:var(--t);border:3px solid var(--ink);border-radius:var(--r-sm);
  box-shadow:6px 6px 0 var(--ink);padding:clamp(1.2rem,3vw,2rem) clamp(1.4rem,3.5vw,2.4rem);display:grid;gap:.4rem;text-align:center;
  transition:transform .25s var(--ease)}
.pt b{font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:.95;letter-spacing:-.01em}
.pt span{font-family:var(--display);font-size:clamp(1rem,1.6vw,1.25rem);opacity:.9}
.pt--gaffel{--c:var(--blue);--t:#fff;transform:rotate(-4deg)}
.pt--korken{--c:var(--schmeckt);--t:var(--pink);transform:rotate(2.5deg) translateY(10px)}
.pt--wiewaldi{--c:var(--cream);transform:rotate(-2deg)}
.pt--funghi{--c:var(--neon);transform:rotate(4deg) translateY(6px)}
.pt:hover{transform:rotate(0) scale(1.05)}
.partner-cta{text-align:center;margin:clamp(2.4rem,5vw,3.4rem) auto 0;font-weight:700;font-size:1.1rem}
.partner-cta a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;color:var(--zeigt)}

/* Welt-Farben, die cms-render.js für Kartenflächen nutzt */
:root{--studio-soft:#cfe0f8;--schmeckt-soft:var(--pink);--zeigt-soft:#ffc9a8;--zeigt-cream:var(--cream);--tbd-soft:#d9f99d}

/* ---------- Fotos in Ordner-Rahmen ---------- */
.frame--photo{aspect-ratio:4/5;max-height:620px;width:100%;justify-self:center}
.frame--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px}
.frame--photo .seal{z-index:2}

/* ---------- Buchungskalender ---------- */
.booking-frame{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-sm);box-shadow:6px 6px 0 var(--ink);
  overflow:hidden;min-height:760px;display:grid;place-items:center;margin-bottom:1.4rem}
.booking-frame p{font-weight:800;text-transform:uppercase;opacity:.6}
.booking-frame iframe{width:100%;height:760px;border:0;display:block}

/* Leerer "Demnächst"-Zustand */
#cms-events > .hint{grid-column:1/-1;text-align:center;margin:0 auto;opacity:1;font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--pink)!important}
.next-cta{justify-content:center;margin-top:1.8rem}
.next-cta .btn{box-shadow:4px 4px 0 var(--pink)}

/* Karten: feste Maximalbreite, zentriert */
.cards{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),340px));justify-content:center}
/* Einzelnes kommendes Event = Feature-Karte */
#cms-events{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),340px))}
#cms-events > .card:only-child{grid-column:1/-1;max-width:920px;width:100%;justify-self:center;display:grid;grid-template-columns:1fr 1.2fr;gap:.4rem;transform:rotate(-1.5deg)}
#cms-events > .card:only-child .c-media{aspect-ratio:auto;min-height:260px;height:100%}
#cms-events > .card:only-child .c-body{padding:1.6rem 1.4rem;justify-content:center}
#cms-events > .card:only-child h3{font-size:clamp(2rem,4.5vw,3.4rem)}
#cms-events > .card:only-child p{font-size:1.05rem}
#cms-events > .card:only-child .c-date{font-size:1.05rem}
#cms-events:has(> .card:only-child){grid-template-columns:1fr}
@media (max-width:700px){ #cms-events > .card:only-child{grid-template-columns:1fr} #cms-events > .card:only-child .c-media{min-height:180px} }

/* Kalender-Ersatz, wenn Einbetten nicht erlaubt ist (z. B. lokale Vorschau) */
.booking-frame--link{min-height:0;padding:clamp(2rem,5vw,3.4rem) 1.4rem;text-align:center;
  background:var(--paper) radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1.2px,transparent 1.6px) 0 0/18px 18px}
.booking-frame--link p{opacity:1!important}
.booking-frame--link .bf-big{font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.booking-frame--link .bf-small{font-weight:500;text-transform:none;margin:.6rem auto 1.4rem}
.booking-frame--link + .btn-row .btn-ink{display:none}

/* ---------- Partner-Logos ---------- */
.pt{width:clamp(200px,22vw,260px);aspect-ratio:5/4;place-items:center;align-content:center;gap:.8rem;padding:1.4rem}
.pt img{max-width:85%;max-height:110px;width:auto;height:auto;object-fit:contain}
.pt--gaffel img{max-height:70px}
.pt--funghi img{max-height:120px}
.pt--korken{--c:var(--cream);--t:var(--ink)}
.pt--wiewaldi{--c:var(--neon);--t:var(--ink)}
.pt--funghi{--c:var(--schmeckt);--t:var(--pink)}
.pt span{font-size:clamp(.95rem,1.4vw,1.1rem)}
.pt--gaffel img{max-height:none;width:72%}
.pt--wiewaldi img{max-height:none;width:88%}

/* Partner: nur Logos, Farben passend zur Logo-Farbe */
.pt{aspect-ratio:3/2}
.pt img{max-width:78%;max-height:70%;width:auto;height:auto}
.pt--gaffel{--c:var(--cream)} .pt--gaffel img{width:62%;max-height:75%}
.pt--korken{--c:var(--neon)}
.pt--wiewaldi{--c:var(--pink)} .pt--wiewaldi img{width:82%}
.pt--funghi{--c:var(--blue)} .pt--funghi img{max-height:78%}
.pt{grid-template-columns:100%;justify-items:center}
.pt img{width:80%;max-width:none;max-height:none}
.pt--gaffel img{width:62%}
.pt--korken img{width:76%}
.pt--wiewaldi img{width:84%}
.pt--funghi img{width:auto;height:82%;max-height:150px}

/* Kopfleiste: Weichzeichner auf eigener Ebene. backdrop-filter direkt am Header
   würde das fixierte Vollbild-Menü auf die Header-Höhe einsperren. */
.site-header.scrolled{background:none;backdrop-filter:none;box-shadow:none}
.site-header::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .2s;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.site-header.scrolled::before{opacity:1}

/* Instagram oben */
.nav-insta{width:46px;height:46px;border-radius:13px;border:2.5px solid var(--ink);background:var(--pink);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink);transition:transform .15s var(--ease)}
.nav-insta:hover{transform:translate(-2px,-2px) rotate(-6deg)}

/* Partner sind Links */
.partner-wall li{display:block}
a.pt:focus-visible{outline:3px solid var(--blue);outline-offset:4px}