/* webschmied.ch – eine Seite, drei Welten. Struktur zuerst, dann je Welt. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{font-family:var(--t-text);font-size:18px;line-height:1.55;color:var(--text);background:var(--grund);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--t-titel);font-weight:var(--w-titel);text-wrap:balance}
p,li,dd{text-wrap:pretty}
::selection{background:var(--auswahl);color:var(--auswahl-text)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--text);color:var(--grund);padding:10px 16px;border-radius:6px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

.rahmen{max-width:1320px;margin:0 auto;padding:0 40px}
@media (max-width:767px){.rahmen{padding:0 16px}}

/* Welt-Sichtbarkeit */
.nur-tafel,.nur-stickerei,.nur-auftrag{display:none}
html[data-welt="tafel"] .nur-tafel,html[data-welt="stickerei"] .nur-stickerei,html[data-welt="auftrag"] .nur-auftrag{display:block}

/* ---------- Kopf ---------- */
.kopf{position:absolute;inset:0 0 auto;z-index:20;color:var(--kopf-text,var(--text))}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none}
.marke-wort{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.035em;line-height:1}
.marke-wort span{font-weight:500;opacity:.62}
.marke-zeichen{width:40px;height:40px;overflow:visible}
.mz-amboss{fill:currentColor}
.mz-brief{fill:none;stroke:var(--held-grund);stroke-width:2.8;stroke-linejoin:round;stroke-linecap:round}
.mz-funke{fill:var(--marke-funke)}
.marke:hover .mz-funke{animation:funke .5s ease}
@keyframes funke{50%{transform:scale(1.5) rotate(45deg)}}
.mz-funke{transform-box:fill-box;transform-origin:center}
.nav{display:flex;gap:32px;list-style:none;font-size:16px;font-weight:500}
.nav a{text-decoration:none;opacity:.82;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s ease,opacity .2s}
.nav a:hover{opacity:1;background-size:100% 1.5px}
@media (max-width:900px){.nav{display:none}}
.kopf .knopf-klein{white-space:nowrap}
@media (max-width:480px){.kopf .knopf-klein{display:none}}

/* ---------- Knöpfe und Links ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--r-knopf);background:var(--knopf);color:var(--knopf-text);font-family:var(--t-knopf,var(--t-text));font-weight:700;font-size:17px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,background .2s,box-shadow .2s;box-shadow:var(--knopf-schatten,none)}
.knopf:hover{background:var(--knopf-hover)}
.knopf:active{transform:translateY(1px) scale(.99)}
.knopf-klein{min-height:44px;padding:0 20px;font-size:15px}
.textlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--link-linie)}
.textlink:hover{text-decoration-color:currentColor}

/* ---------- Held ---------- */
.held{position:relative;min-height:min(980px,100svh);display:flex;align-items:center;padding:128px 0 72px;background:var(--held-grund);color:var(--held-text);isolation:isolate;overflow:hidden}
.held-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;width:100%}
.held h1{font-size:var(--h1);line-height:var(--h1-zeile);letter-spacing:var(--h1-sperr)}
.lead{font-size:clamp(19px,1.45vw,22px);line-height:1.5;max-width:36ch;margin-top:28px;color:var(--held-text-2)}
.held-aktion{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:36px}
.held-bild{position:relative;min-width:0}
.held-bild figure{margin:0}
.held-bild figcaption{font-size:14px;margin-top:14px;color:var(--held-text-2)}
@media (max-width:1023px){.held{min-height:0;padding-top:112px}.held-in{grid-template-columns:1fr;gap:48px}}

/* Umschalter */
.welten{margin-top:48px;padding-top:24px;border-top:1px solid var(--held-linie);max-width:520px}
.welten-titel{font-size:15px;font-weight:600;margin-bottom:12px}
.welten-knoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.welt-knopf{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px 8px 8px;border-radius:var(--r-welt);border:1.5px solid var(--held-linie);font-size:15px;font-weight:600;text-align:left;line-height:1.15;transition:border-color .2s,background .2s,transform .15s}
.welt-knopf:hover{border-color:var(--held-text)}
.welt-knopf[aria-pressed="true"]{border-color:var(--held-text);background:var(--welt-aktiv);color:var(--welt-aktiv-text)}
.welt-knopf:active{transform:scale(.98)}
.wk-muster{flex:none;width:34px;height:34px;border-radius:calc(var(--r-welt) - 4px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.welt-knopf[data-ziel="tafel"] .wk-muster{background:linear-gradient(#2a2d30 0 48%,#0e0f10 48% 52%,#25282b 52%);position:relative}
.welt-knopf[data-ziel="tafel"] .wk-muster::after{content:"";position:absolute;inset:auto 7px 7px auto;width:9px;height:9px;border-radius:2px;background:#ffd400}
.welt-knopf[data-ziel="stickerei"] .wk-muster{background:radial-gradient(circle at 30% 35%,#fff 0 2.4px,transparent 3px),radial-gradient(circle at 70% 65%,#fff 0 2.4px,transparent 3px),radial-gradient(circle at 70% 30%,rgba(255,255,255,.7) 0 1.6px,transparent 2px),radial-gradient(circle at 30% 72%,rgba(255,255,255,.7) 0 1.6px,transparent 2px),#0d4f5c}
.welt-knopf[data-ziel="auftrag"] .wk-muster{background:linear-gradient(100deg,#2b3a8c 0 38%,#f6c9d0 38% 56%,#f7e36b 56% 74%,#fff 74%)}
.welten-notiz{font-size:15px;line-height:1.5;margin-top:14px;color:var(--held-text-2);max-width:46ch}
@media (max-width:480px){.welten-knoepfe{grid-template-columns:1fr}}

/* Leiste unten */
.welt-leiste{position:fixed;left:50%;bottom:16px;z-index:40;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;border-radius:var(--r-leiste);background:var(--leiste);color:var(--leiste-text);box-shadow:0 18px 40px -16px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.12);transform:translate(-50%,140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.welt-leiste.sichtbar{transform:translate(-50%,0)}
.wl-titel{font-size:13px;font-weight:600;opacity:.75;margin-right:4px}
.welt-leiste .welt-knopf{min-height:40px;padding:4px 12px 4px 4px;font-size:14px;border-color:transparent;border-radius:calc(var(--r-leiste) - 6px)}
.welt-leiste .wk-muster{width:30px;height:30px}
.welt-leiste .welt-knopf[aria-pressed="true"]{background:var(--leiste-aktiv);color:var(--leiste-aktiv-text);border-color:transparent}
@media (max-width:520px){.wl-titel{display:none}.welt-leiste .welt-knopf span:last-child{display:none}.welt-leiste .welt-knopf{padding:4px}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(88px,10vw,148px) 0;background:var(--grund);color:var(--text)}
.abschnitt-voll{background:var(--voll);color:var(--voll-text)}
.abschnitt h2{font-size:var(--h2);line-height:1.02;letter-spacing:var(--h2-sperr);max-width:18ch}
.einleitung{font-size:20px;max-width:56ch;margin-top:20px;color:var(--text-2)}
.abschnitt-voll .einleitung{color:var(--voll-text-2)}

/* Ablauf */
.ablauf{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px}
.ablauf h3{font-size:24px;line-height:1.15;margin:14px 0 8px}
.ablauf p{font-size:17px;color:var(--text-2);max-width:30ch}
.ab-zeit{display:block}
@media (max-width:900px){.ablauf{grid-template-columns:1fr 1fr;row-gap:48px}}
@media (max-width:560px){.ablauf{grid-template-columns:1fr}}

/* Pflege */
.zweispaltig{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end}
.adresse-muster{margin-top:36px;display:flex;flex-direction:column;gap:6px}
.adresse-muster span{font-size:15px;color:var(--voll-text-2)}
.adresse-muster b{font-size:clamp(18px,1.6vw,22px);font-weight:600;word-break:break-all}
.beispiel-hinweis{font-size:14px;margin-top:28px;color:var(--voll-text-2)}
@media (max-width:1023px){.zweispaltig{grid-template-columns:1fr;gap:40px}}

/* Mensch und KI */
.duo{display:grid;grid-template-columns:1fr 1fr;margin-top:56px}
.duo-teil{padding:8px 48px 8px 0}
.duo-teil+.duo-teil{padding:8px 0 8px 48px;border-left:var(--duo-linie)}
.duo h3{font-size:clamp(28px,2.6vw,38px);line-height:1.05}
.duo-rolle{margin:8px 0 22px;color:var(--text-2)}
.duo ul{list-style:none;display:grid;gap:12px}
.duo li{padding-left:28px;position:relative}
.duo li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--punkt)}
.duo-schluss{margin-top:48px;font-size:clamp(20px,1.8vw,26px);max-width:40ch;font-weight:500}
@media (max-width:820px){.duo{grid-template-columns:1fr}.duo-teil,.duo-teil+.duo-teil{padding:24px 0;border-left:0}.duo-teil+.duo-teil{border-top:var(--duo-linie)}}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:56px}
.leistungen div{padding:26px 0;border-top:var(--liste-linie)}
.leistungen dt{font-family:var(--t-titel);font-weight:var(--w-titel);font-size:clamp(22px,2vw,28px);line-height:1.1}
.leistungen dd{color:var(--text-2);margin-top:8px;max-width:46ch}
@media (max-width:820px){.leistungen{grid-template-columns:1fr}}

/* Referenzen */
.fall{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin-top:56px}
.fall-buehne{position:relative;aspect-ratio:4/3;border-radius:var(--r-buehne);overflow:hidden;background:var(--buehne)}
.fall-buehne canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;touch-action:pan-y;cursor:grab;z-index:1}
.fall-buehne canvas:active{cursor:grabbing}
.fall-ersatz{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b0b0d;transition:opacity .6s}
.drei-bereit canvas{opacity:1}
.drei-bereit .fall-ersatz{opacity:0;pointer-events:none}
.fall-tipp{position:absolute;z-index:2;left:18px;bottom:16px;pointer-events:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .4s}
.drei-bereit .fall-tipp{opacity:1}
.fall-text h3{font-size:clamp(30px,3vw,44px);line-height:1.05}
.fall-kunde{margin:8px 0 18px;color:var(--voll-text-2)}
.fall-text>p:not(.fall-kunde):not(.fall-link){max-width:44ch}
.farben{display:flex;gap:10px;margin-top:24px}
.farbe{width:36px;height:36px;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.18),0 0 0 2px transparent;transition:box-shadow .2s,transform .15s}
.farbe:hover{transform:scale(1.08)}
.farbe[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 3px var(--voll),0 0 0 5px var(--voll-text)}
.fall-link{margin-top:28px}
.referenzen{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0 36px;margin-top:72px}
.referenzen a{display:contents;text-decoration:none}
.referenzen li:has(a){cursor:pointer}
.referenzen li:has(a) b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--link-linie)}
.referenzen li{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-top:var(--ref-linie)}
.referenzen b{font-family:var(--t-titel);font-weight:var(--w-titel);font-size:clamp(19px,1.6vw,23px);line-height:1.15}
.referenzen span{font-size:15px;color:var(--voll-text-2)}
@media (max-width:1023px){.fall{grid-template-columns:1fr;gap:32px}.referenzen{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.referenzen{grid-template-columns:1fr}}

/* Preise */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:stretch}
.preis{padding:36px 32px;border-radius:var(--r-karte);background:var(--preis);color:var(--preis-text)}
.preis-haupt{background:var(--preis-haupt);color:var(--preis-haupt-text)}
.preis h3{font-size:22px;line-height:1.2}
.betrag{font-family:var(--t-zahl,var(--t-titel));font-weight:var(--w-zahl,var(--w-titel));font-size:clamp(44px,4.2vw,60px);line-height:1;margin:22px 0 4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.betrag small{display:block;font-family:var(--t-text);font-weight:500;font-size:15px;letter-spacing:0;margin-top:10px;opacity:.75}
.preis ul{list-style:none;margin-top:24px;display:grid;gap:10px;font-size:17px}
.preis li{padding-left:24px;position:relative}
.preis li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:2px;background:currentColor;opacity:.55}
.preis-hinweis{margin-top:20px;font-size:15px;color:var(--text-2)}
@media (max-width:960px){.preise{grid-template-columns:1fr}}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}
.kontakt address{font-style:normal;margin-top:36px;line-height:1.8;color:var(--voll-text-2)}
.kontakt address a{color:var(--voll-text);font-weight:600}
.formular{display:grid;gap:18px;padding:var(--form-pad,0);border-radius:var(--r-karte);background:var(--form);color:var(--form-text)}
.feld label{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.feld input,.feld textarea{width:100%;border:var(--feld-rand);border-radius:var(--r-feld);background:var(--feld);padding:14px 16px;font-size:17px;color:var(--feld-text);caret-color:var(--fokus);transition:border-color .2s,box-shadow .2s}
.feld textarea{resize:vertical;min-height:140px}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px var(--fokus-schein)}
.feld input::placeholder{color:var(--feld-platzhalter)}
.feld-fehler{font-weight:600;color:var(--fehler)}
.formular .knopf{justify-self:start}
.formular-notiz{font-size:14px;opacity:.75}
@media (max-width:1023px){.kontakt{grid-template-columns:1fr;gap:40px}}

.fuss{padding:36px 0 96px;background:var(--fuss);color:var(--fuss-text);font-size:15px}
.fuss-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fuss a{margin-left:18px;text-decoration:none}
.fuss a:hover{text-decoration:underline}

/* ---------- Übergang zwischen den Welten ---------- */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:.8s cubic-bezier(.75,0,.15,1) both vt-kreis}
html[data-vt="tafel"]::view-transition-new(root){animation-name:vt-klapp;animation-duration:.7s}
html[data-vt="auftrag"]::view-transition-new(root){animation-name:vt-blatt;animation-duration:.75s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes vt-kreis{from{clip-path:circle(0 at var(--vt-x) var(--vt-y))}to{clip-path:circle(150vmax at var(--vt-x) var(--vt-y))}}
@keyframes vt-klapp{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vt-blatt{from{transform:translateY(70vh) rotate(5deg);box-shadow:0 -30px 80px rgba(0,0,0,.4)}to{transform:none}}

/* =================================================================
   WELT 1: ABFAHRTSTAFEL
   ================================================================= */
html[data-welt="tafel"]{
  --grund:#e6e8e9;--text:#1d2023;--text-2:#4a5055;--voll:#1b1e21;--voll-text:#f2f3f1;--voll-text-2:#b3b9be;
  --held-grund:#e6e8e9;--held-text:#1d2023;--held-text-2:#4a5055;--held-linie:#c3c8cc;
  --t-titel:"Barlow Semi Condensed",system-ui,sans-serif;--t-text:"Barlow",system-ui,sans-serif;--t-knopf:"Barlow Semi Condensed",sans-serif;--w-titel:800;
  --h1:clamp(62px,7.9vw,128px);--h1-zeile:.88;--h1-sperr:-.02em;--h2:clamp(38px,4.4vw,66px);--h2-sperr:-.01em;
  --knopf:#1d2023;--knopf-text:#fff;--knopf-hover:#33383d;--r-knopf:6px;--link-linie:#ffd400;
  --r-welt:8px;--welt-aktiv:#1d2023;--welt-aktiv-text:#fff;
  --leiste:#1d2023;--leiste-text:#f2f3f1;--leiste-aktiv:#ffd400;--leiste-aktiv-text:#1d2023;--r-leiste:12px;
  --marke-funke:#e8b800;
  --fokus:#1d2023;--fokus-schein:rgba(255,212,0,.55);--auswahl:#ffd400;--auswahl-text:#1d2023;--fehler:#b42318;
  --duo-linie:2px solid #1d2023;--punkt:#ffd400;--liste-linie:1px solid #c3c8cc;--ref-linie:1px solid #3a3f44;
  --r-buehne:14px;--buehne:#16181a;--r-karte:10px;--preis:#fff;--preis-text:#1d2023;--preis-haupt:#1d2023;--preis-haupt-text:#fff;
  --form:transparent;--form-text:#f2f3f1;--feld:#25292d;--feld-text:#fff;--feld-rand:1.5px solid #3a3f44;--r-feld:6px;--feld-platzhalter:#7c848a;
  --fuss:#1b1e21;--fuss-text:#9aa1a6;
}
html[data-welt="tafel"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-welt="tafel"] .held,html[data-welt="tafel"] .abschnitt:not(.abschnitt-voll){background-color:transparent}
html[data-welt="tafel"] .held h1{font-weight:800}
html[data-welt="tafel"] .knopf{text-transform:none;letter-spacing:.01em}
html[data-welt="tafel"] .abschnitt-voll .knopf{background:#ffd400;color:#1d2023}
html[data-welt="tafel"] .abschnitt-voll .knopf:hover{background:#ffe14d}

/* Fallblatt-Tafel */
.tafel-buehne{perspective:1400px;container-type:inline-size}
.tafel{--fb:clamp(10px,calc((100cqi - 168px) / 34.7),20px);font-size:var(--fb);background:linear-gradient(#202326,#141618);border-radius:14px;padding:18px 20px 22px;box-shadow:0 2px 0 #3c4146 inset,0 -2px 0 #0a0b0c inset,0 50px 80px -40px rgba(10,12,14,.65),0 14px 24px -12px rgba(10,12,14,.4);}
.tafel-kopf,.tafel-zeile{display:grid;grid-template-columns:calc(5*var(--zl)) calc(11*var(--zl)) calc(12*var(--zl)) calc(12*var(--zl));column-gap:.9em;--zl:calc(.8em + 3px)}
.tafel-kopf{position:relative;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1em;color:#8d959b;padding-bottom:.55em;margin-bottom:.4em;border-bottom:1px solid #2e3236}
.tafel-kopf span{font-size:max(11px,.68em);letter-spacing:.02em}
.tafel-uhr{position:absolute;right:0;top:-.1em;font-size:.9em!important;color:#ffd400;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tafel-zeile{padding:.32em 0}
.tz{display:flex;gap:3px}
.fb{display:inline-block;width:.8em;height:1.36em;line-height:1.36em;text-align:center;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-style:normal;color:#f4f4f1;background:linear-gradient(#2c3034 0 49.2%,#0b0c0d 49.2% 50.8%,#26292d 50.8%);border-radius:2.5px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 1px 1px rgba(0,0,0,.6);transform-origin:50% 50%;backface-visibility:hidden}
.tafel-zeile[data-status="online"] .tz-status .fb{background:linear-gradient(#ffdb2e 0 49.2%,#9a8000 49.2% 50.8%,#f5cc00 50.8%);color:#17191b}
.tafel-zeile[data-status="arbeit"] .tz-status .fb{color:#ffd400}
.tafel-buehne figcaption{margin-left:4px}
@media (max-width:1023px){.tafel{transform:none}}
@media (max-width:640px){
  .tafel{--fb:clamp(10px,calc((100cqi - 104px) / 19.3),18px);padding:14px}
  .tafel-kopf,.tafel-zeile{grid-template-columns:calc(11*var(--zl)) calc(12*var(--zl))}
  .tz-zeit,.tz-aenderung,.tafel-kopf span:nth-child(1),.tafel-kopf span:nth-child(3){display:none!important}
}

/* Ablauf als Fahrplanlinie */
html[data-welt="tafel"] .ablauf{position:relative;padding-top:34px}
html[data-welt="tafel"] .ablauf::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;background:#1d2023;border-radius:2px}
html[data-welt="tafel"] .ablauf li{position:relative}
html[data-welt="tafel"] .ablauf li::before{content:"";position:absolute;left:0;top:-32px;width:20px;height:20px;border-radius:50%;background:#e6e8e9;border:4px solid #1d2023}
html[data-welt="tafel"] .ablauf li:last-child::before{background:#ffd400}
html[data-welt="tafel"] .ab-zeit{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:900px){html[data-welt="tafel"] .ablauf::before{display:none}html[data-welt="tafel"] .ablauf li::before{display:none}}

html[data-welt="tafel"] .adresse-muster b{font-family:"Barlow Condensed",sans-serif;font-size:clamp(20px,1.9vw,26px);color:#ffd400}

html[data-welt="tafel"] .duo h3{font-size:clamp(32px,3vw,44px)}
html[data-welt="tafel"] .leistungen dt{font-size:clamp(24px,2.2vw,30px)}
html[data-welt="tafel"] .referenzen b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(22px,1.9vw,27px)}
html[data-welt="tafel"] .fall-buehne{background:radial-gradient(120% 90% at 50% 30%,#2a2e32,#121416)}
html[data-welt="tafel"] .preis{box-shadow:0 1px 0 #c3c8cc}
html[data-welt="tafel"] .preis-haupt .betrag{color:#ffd400}
html[data-welt="tafel"] .betrag{font-family:"Barlow Condensed",sans-serif;font-weight:700}

/* =================================================================
   WELT 2: STICKEREI
   ================================================================= */
html[data-welt="stickerei"]{
  --grund:#f7f9f8;--text:#0b3b45;--text-2:#45666d;--voll:#0d4f5c;--voll-text:#ffffff;--voll-text-2:#b9d3d6;
  --held-grund:#0d4f5c;--held-text:#fff;--held-text-2:#c9dfe1;--held-linie:rgba(255,255,255,.28);--kopf-text:#fff;
  --t-titel:"Gloock",Georgia,serif;--t-text:"Albert Sans",system-ui,sans-serif;--w-titel:400;--w-marke:400;
  --h1:clamp(58px,7.2vw,116px);--h1-zeile:.96;--h1-sperr:-.015em;--h2:clamp(38px,4.3vw,64px);--h2-sperr:-.01em;
  --knopf:#d9c7a3;--knopf-text:#0b3b45;--knopf-hover:#e6d7b8;--r-knopf:999px;--link-linie:#e4572e;
  --r-welt:999px;--welt-aktiv:#fff;--welt-aktiv-text:#0b3b45;
  --leiste:#0b3b45;--leiste-text:#fff;--leiste-aktiv:#d9c7a3;--leiste-aktiv-text:#0b3b45;--r-leiste:999px;
  --marke-funke:#e4572e;
  --fokus:#e4572e;--fokus-schein:rgba(228,87,46,.3);--auswahl:#d9c7a3;--auswahl-text:#0b3b45;--fehler:#ffb4a1;
  --duo-linie:2px dashed #7fa7ad;--punkt:#e4572e;--liste-linie:2px dashed #b7cfd2;--ref-linie:1px solid rgba(255,255,255,.18);
  --r-buehne:28px;--buehne:#0a414c;--r-karte:28px;--preis:#fff;--preis-text:#0b3b45;--preis-haupt:#0d4f5c;--preis-haupt-text:#fff;
  --form:#fff;--form-text:#0b3b45;--form-pad:36px;--feld:#f4f7f7;--feld-text:#0b3b45;--feld-rand:1.5px solid #cfdfe1;--r-feld:14px;--feld-platzhalter:#7f9ca1;
  --fuss:#0a414c;--fuss-text:#9fc0c4;
}
html[data-welt="stickerei"] .held{background:#0d4f5c url("../img/spitze.webp") right center/auto 100% no-repeat}
html[data-welt="stickerei"] .held::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0d4f5c 0 32%,rgba(13,79,92,.82) 46%,rgba(13,79,92,0) 70%)}
html[data-welt="stickerei"] .held{padding:112px 0 210px}
html[data-welt="stickerei"] .held-bild{position:static}
html[data-welt="stickerei"] .spitze-buehne{position:absolute;left:0;right:0;bottom:18px}
html[data-welt="stickerei"] .nur-stickerei.spitze-buehne{display:flex}
html[data-welt="stickerei"] .knopf{font-weight:600}
html[data-welt="stickerei"] .welt-knopf[aria-pressed="true"] .wk-muster{box-shadow:0 0 0 1px #0b3b45}
html[data-welt="stickerei"] 
@media (max-width:1023px){
  html[data-welt="stickerei"] .held{background-size:160% auto;background-position:30% bottom;padding-bottom:200px}
  html[data-welt="stickerei"] .held::before{background:linear-gradient(180deg,#0d4f5c 0 52%,rgba(13,79,92,.78) 70%,rgba(13,79,92,.35))}
}

/* Lochkarte */
.lochkarte{position:relative;height:104px;background:#d9c7a3;background-image:repeating-linear-gradient(90deg,rgba(120,90,40,.05) 0 1px,transparent 1px 7px),linear-gradient(180deg,#e2d2b0,#cfbb93);box-shadow:0 18px 30px -18px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.4) inset;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lk-band{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;animation:lk-lauf 60s linear infinite}
.lk-band svg{height:96px;width:auto}
.lk-loch{fill:#06343d}
.lk-punkt{fill:rgba(80,60,25,.28)}
.lk-fuehrung{fill:#06343d;opacity:.8}
.lk-faden{position:absolute;left:-2%;right:-2%;top:52%;height:2px;background:#e4572e;box-shadow:0 1px 2px rgba(0,0,0,.25);transform:rotate(-.6deg)}
@keyframes lk-lauf{to{transform:translateX(calc(var(--lk-breite,2000px) / -2))}}
.spitze-buehne{flex-direction:column-reverse;gap:12px}
.spitze-buehne figcaption{text-align:center;color:#c9dfe1;padding:0 16px;margin-top:0!important}
.lk-text{color:#fff}
@media (prefers-reduced-motion:reduce){.lk-band{animation:none}}

/* Ablauf als Stichlinie */
html[data-welt="stickerei"] .ablauf{position:relative;padding-top:40px}
html[data-welt="stickerei"] .ablauf::before{content:"";position:absolute;left:0;right:0;top:14px;border-top:3px dashed #0d4f5c;opacity:.55}
html[data-welt="stickerei"] .ablauf li{position:relative}
html[data-welt="stickerei"] .ablauf li::before{content:"";position:absolute;left:0;top:-36px;width:18px;height:18px;background:linear-gradient(45deg,transparent 42%,#e4572e 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#e4572e 42% 58%,transparent 58%)}
html[data-welt="stickerei"] .ab-zeit{font-family:"Gloock",serif;font-size:34px;line-height:1;color:#0d4f5c}
@media (max-width:900px){html[data-welt="stickerei"] .ablauf::before,html[data-welt="stickerei"] .ablauf li::before{display:none}}

html[data-welt="stickerei"] .adresse-muster b{font-family:"Gloock",serif;font-weight:400;font-size:clamp(20px,2vw,28px)}

html[data-welt="stickerei"] .duo-schluss{font-family:"Gloock",serif;font-weight:400}
html[data-welt="stickerei"] .fall-buehne{background:radial-gradient(90% 80% at 50% 40%,#13687a,#083a44)}
html[data-welt="stickerei"] .fall-buehne::before{content:"";position:absolute;inset:0;background:url("../img/spitze.webp") 70% center/cover;opacity:.16;mix-blend-mode:screen}
html[data-welt="stickerei"] .referenzen{gap:16px}
html[data-welt="stickerei"] .referenzen li{border:0;background:#fff;color:#0b3b45;border-radius:4px;padding:20px 22px;outline:2px dashed #9dbfc3;outline-offset:-7px}
html[data-welt="stickerei"] .referenzen span{color:#5f7e83}
html[data-welt="stickerei"] .preis{box-shadow:0 0 0 1px #d7e5e6}
html[data-welt="stickerei"] .preis-haupt{background:linear-gradient(160deg,#0d4f5c 55%,rgba(13,79,92,.55)),url("../img/spitze.webp") right -140px bottom -150px/420px auto no-repeat,#0d4f5c;box-shadow:none}
html[data-welt="stickerei"] .betrag{font-family:"Gloock",serif}
html[data-welt="stickerei"] .formular .knopf{background:#0d4f5c;color:#fff}
html[data-welt="stickerei"] .formular .knopf:hover{background:#0b3b45}

/* =================================================================
   WELT 3: AUFTRAGSBLOCK
   ================================================================= */
html[data-welt="auftrag"]{
  --grund:#ffffff;--text:#1d2350;--text-2:#4f5680;--voll:#2b3a8c;--voll-text:#fff;--voll-text-2:#c4cbf0;
  --held-grund:#2b3a8c;--held-text:#fff;--held-text-2:#cfd5f5;--held-linie:rgba(255,255,255,.3);--kopf-text:#fff;
  --t-titel:"Schibsted Grotesk",system-ui,sans-serif;--t-text:"Schibsted Grotesk",system-ui,sans-serif;--w-titel:900;--w-marke:800;
  --h1:clamp(60px,7.6vw,124px);--h1-zeile:.9;--h1-sperr:-.04em;--h2:clamp(38px,4.4vw,66px);--h2-sperr:-.035em;
  --knopf:#f7e36b;--knopf-text:#1d2350;--knopf-hover:#fbec92;--r-knopf:12px;--link-linie:#f6c9d0;
  --r-welt:12px;--welt-aktiv:#f7e36b;--welt-aktiv-text:#1d2350;
  --leiste:#1d2350;--leiste-text:#fff;--leiste-aktiv:#f7e36b;--leiste-aktiv-text:#1d2350;--r-leiste:16px;
  --marke-funke:#f7e36b;
  --fokus:#7a1f5c;--fokus-schein:rgba(122,31,92,.22);--auswahl:#f7e36b;--auswahl-text:#1d2350;--fehler:#ffc2d6;
  --duo-linie:2px solid #1d2350;--punkt:#7a1f5c;--liste-linie:1.5px solid #d8dcf0;--ref-linie:1.5px solid rgba(255,255,255,.22);
  --r-buehne:6px;--buehne:#eef0fa;--r-karte:6px;--preis:#fff;--preis-text:#1d2350;--preis-haupt:#f7e36b;--preis-haupt-text:#1d2350;
  --form:#fff;--form-text:#1d2350;--form-pad:36px 36px 32px;--feld:transparent;--feld-text:#25308a;--feld-rand:0;--r-feld:0;--feld-platzhalter:#8a90b8;
  --fuss:#1d2350;--fuss-text:#aab2e0;--knopf-schatten:0 2px 0 #c9b43a;
}
html[data-welt="auftrag"] .abschnitt:not(.abschnitt-voll){background-image:repeating-linear-gradient(180deg,transparent 0 35px,#e7eaf6 35px 36px);background-attachment:local}
html[data-welt="auftrag"] .held{background-image:radial-gradient(120% 90% at 80% 40%,#3446a3,#2b3a8c 60%,#25327a)}

/* Ablauf als Abreisszettel */
html[data-welt="auftrag"] .ablauf{gap:0;background:#fff;box-shadow:0 1px 0 #d8dcf0,0 30px 50px -40px rgba(29,35,80,.5);border-radius:6px}
html[data-welt="auftrag"] .ablauf li{padding:28px 28px 32px}
html[data-welt="auftrag"] .ablauf li+li{background:linear-gradient(#b9bfdf 50%,transparent 0) 0 0/2px 10px repeat-y}
html[data-welt="auftrag"] .ab-zeit{font-family:"Caveat",cursive;font-weight:700;font-size:38px;line-height:1;color:#25308a;transform:rotate(-2deg);transform-origin:left}
@media (max-width:900px){html[data-welt="auftrag"] .ablauf li+li{background:none;border-top:2px dashed #b9bfdf}html[data-welt="auftrag"] .ablauf li:nth-child(2){border-top:0}}
@media (max-width:560px){html[data-welt="auftrag"] .ablauf li:nth-child(2){border-top:2px dashed #b9bfdf}}

html[data-welt="auftrag"] .adresse-muster b{font-family:"Caveat",cursive;font-size:clamp(26px,2.4vw,34px);color:#f7e36b}

html[data-welt="auftrag"] .duo-rolle{font-family:"Caveat",cursive;font-size:26px;color:#25308a;line-height:1.1}
html[data-welt="auftrag"] .leistungen dt{display:flex;gap:14px;align-items:center}
html[data-welt="auftrag"] .leistungen dt::before{content:"";flex:none;width:26px;height:26px;border:2px solid #1d2350;border-radius:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 13.5c2.5 2 4 4 5.5 7 3.5-7 7-11.5 13.5-17' fill='none' stroke='%237a1f5c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/22px no-repeat}
html[data-welt="auftrag"] .leistungen dd{padding-left:40px}
html[data-welt="auftrag"] .fall-buehne{background:#fff;box-shadow:0 30px 50px -30px rgba(8,12,50,.7)}
html[data-welt="auftrag"] .fall-buehne::before{content:"Muster";position:absolute;left:20px;top:16px;font-family:"Caveat",cursive;font-weight:700;font-size:30px;color:#25308a;transform:rotate(-4deg);z-index:1;pointer-events:none}
html[data-welt="auftrag"] .referenzen li{border-top:0;border-bottom:2px dashed rgba(255,255,255,.28)}
html[data-welt="auftrag"] .preis{box-shadow:0 1px 0 #d8dcf0,0 24px 40px -34px rgba(29,35,80,.6);-webkit-mask:radial-gradient(9px at 50% 100%,transparent 98%,#000) 50% 100%/18px 100% repeat-x;mask:radial-gradient(9px at 50% 100%,transparent 98%,#000) 50% 100%/18px 100% repeat-x;padding-bottom:48px}
html[data-welt="auftrag"] .preis-haupt .betrag{color:#1d2350}
html[data-welt="auftrag"] .formular{box-shadow:0 40px 60px -40px rgba(0,0,0,.55);background-image:linear-gradient(90deg,transparent 30px,#f6c9d0 30px 32px,transparent 32px)}
html[data-welt="auftrag"] .feld input,html[data-welt="auftrag"] .feld textarea{font-family:"Caveat",cursive;font-weight:700;font-size:28px;line-height:1.15;padding:6px 2px;border-bottom:2px solid #c9cee8}
html[data-welt="auftrag"] .feld textarea{background:repeating-linear-gradient(180deg,transparent 0 31px,#c9cee8 31px 33px);border-bottom:0;line-height:32px;padding-top:0}
html[data-welt="auftrag"] .feld input:focus,html[data-welt="auftrag"] .feld textarea:focus{box-shadow:none;border-color:#7a1f5c}
html[data-welt="auftrag"] .feld label{font-size:13px;color:#4f5680}
html[data-welt="auftrag"] .formular .knopf{background:#2b3a8c;color:#fff;box-shadow:none}
html[data-welt="auftrag"] .formular .knopf:hover{background:#1d2350}

/* ---------- Menschen (gleicher Inhalt, je Welt eigene Fassung) ---------- */
.menschen{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:64px}
.mensch{position:relative;display:flex;flex-direction:column}
.m-bild{margin:0;overflow:hidden}
.m-bild img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.m-text{padding-top:18px}
.m-name{font-weight:600;font-size:15px}
.mensch blockquote{font-size:18px;line-height:1.45;margin-top:8px}
.m-dauer{margin-top:14px;font-size:14px}
.m-dauer b{font-variant-numeric:tabular-nums}
@media (max-width:1100px){.menschen{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.menschen{grid-template-columns:1fr;gap:40px}}

/* Tafel: Schwarzweiss mit Fallblatt-Status */
html[data-welt="tafel"] .m-bild{border-radius:10px;background:#000}
html[data-welt="tafel"] .m-bild img{filter:grayscale(1) contrast(1.12) brightness(.92);transition:filter .5s ease}
html[data-welt="tafel"] .mensch:hover .m-bild img{filter:grayscale(0) contrast(1.02)}
html[data-welt="tafel"] .m-dauer{position:absolute;left:12px;top:12px;margin:0;display:flex;gap:6px;align-items:center}
html[data-welt="tafel"] .m-dauer span{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;color:#fff;background:#141618;padding:4px 8px;border-radius:3px}
html[data-welt="tafel"] .m-dauer b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;color:#17191b;background:linear-gradient(#ffdb2e 0 49%,#9a8000 49% 51%,#f5cc00 51%);padding:2px 9px;border-radius:3px;letter-spacing:.04em}
html[data-welt="tafel"] .m-name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;color:#ffd400}
html[data-welt="tafel"] .mensch blockquote{color:#e3e6e8}

/* Stickerei: Stickrahmen und Etikett */
html[data-welt="stickerei"] .m-bild{border-radius:50%;padding:9px;background:linear-gradient(145deg,#d8b07c,#9b6b3c 55%,#c9965f);box-shadow:0 26px 40px -24px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,255,255,.4)}
html[data-welt="stickerei"] .m-bild img{border-radius:50%;aspect-ratio:1;box-shadow:inset 0 0 0 3px rgba(0,0,0,.2)}
html[data-welt="stickerei"] .m-text{margin-top:-28px;position:relative;background:#f4ead6;color:#2f2410;border-radius:4px;padding:22px 20px 16px;outline:2px dashed rgba(47,36,16,.35);outline-offset:-7px;box-shadow:0 18px 30px -20px rgba(0,0,0,.6)}
html[data-welt="stickerei"] .m-name{font-family:"Gloock",serif;font-weight:400;font-size:20px}
html[data-welt="stickerei"] .m-dauer{color:#b23c17;font-weight:600}
html[data-welt="stickerei"] .mensch:nth-child(even){transform:translateY(36px)}

/* Auftrag: Polaroid mit Klebeband, landet beim Scrollen */
html[data-welt="auftrag"] .mensch{background:#fff;padding:12px 12px 20px;box-shadow:0 30px 40px -26px rgba(5,10,45,.75);color:#1d2350}
html[data-welt="auftrag"] .mensch::before{content:"";position:absolute;left:50%;top:-14px;width:96px;height:28px;margin-left:-48px;background:rgba(247,227,107,.78);box-shadow:0 1px 2px rgba(0,0,0,.15);transform:rotate(-3deg);z-index:2}
html[data-welt="auftrag"] .mensch:nth-child(1){transform:rotate(-2.5deg)}
html[data-welt="auftrag"] .mensch:nth-child(2){transform:rotate(1.8deg) translateY(22px)}
html[data-welt="auftrag"] .mensch:nth-child(3){transform:rotate(-1.2deg)}
html[data-welt="auftrag"] .mensch:nth-child(4){transform:rotate(2.4deg) translateY(16px)}
html[data-welt="auftrag"] .m-bild img{filter:saturate(1.05) contrast(1.04)}
html[data-welt="auftrag"] .m-name{font-size:13px;color:#4f5680}
html[data-welt="auftrag"] .mensch blockquote{font-family:"Caveat",cursive;font-weight:700;font-size:25px;line-height:1.1;color:#25308a}
html[data-welt="auftrag"] .m-dauer{position:absolute;right:14px;top:14px;margin:0;border:3px solid #7a1f5c;color:#7a1f5c;background:rgba(255,255,255,.6);border-radius:6px;padding:3px 9px;font-weight:800;transform:rotate(-8deg);mix-blend-mode:multiply}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html[data-welt="auftrag"] .mensch{animation:landen linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    html[data-welt="auftrag"] .mensch:nth-child(2){animation-name:landen2}
    html[data-welt="auftrag"] .mensch:nth-child(3){animation-name:landen3}
    html[data-welt="auftrag"] .mensch:nth-child(4){animation-name:landen4}
  }
}
@keyframes landen{from{transform:translateY(160px) rotate(-12deg);opacity:0}to{transform:rotate(-2.5deg);opacity:1}}
@keyframes landen2{from{transform:translateY(200px) rotate(10deg);opacity:0}to{transform:rotate(1.8deg) translateY(22px);opacity:1}}
@keyframes landen3{from{transform:translateY(180px) rotate(-9deg);opacity:0}to{transform:rotate(-1.2deg);opacity:1}}
@keyframes landen4{from{transform:translateY(220px) rotate(14deg);opacity:0}to{transform:rotate(2.4deg) translateY(16px);opacity:1}}

/* ---------- Auftrag: Werkbank, Zettel, Telefon ---------- */
html[data-welt="auftrag"] .held{background:linear-gradient(90deg,#2b3a8c 0 28%,rgba(43,58,140,.82) 46%,rgba(43,58,140,.25) 72%,rgba(43,58,140,.05)),url("../img/werkbank.webp") center/cover,#2b3a8c}
.werkstueck{position:relative;height:560px;max-width:660px;margin-left:auto}
.telefon{position:absolute;right:0;top:10px;width:250px;height:510px;border-radius:40px;background:#111;padding:10px;transform:rotate(4deg);box-shadow:0 50px 70px -30px rgba(0,0,0,.7),inset 0 0 0 2px #333}
.tel-schirm{height:100%;border-radius:31px;overflow:hidden;background:#fbf7f1;color:#2a1f17;font-family:"Schibsted Grotesk",sans-serif}
.tel-kopf{display:flex;justify-content:space-between;align-items:center;padding:30px 18px 12px;font-weight:800;font-size:15px}
.tel-kopf i{width:18px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor}
.tel-bild{height:150px;margin:0 12px;border-radius:16px;background:url("../img/marco.webp") center 30%/cover}
.tel-neu{margin:14px 12px 0;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 1px 0 #eadfd2;font-size:14px;line-height:1.3;display:flex;flex-direction:column;gap:4px}
.tel-neu b{align-self:flex-start;font-size:11px;font-weight:800;background:#f7e36b;padding:2px 7px;border-radius:99px}
.tel-neu.frisch{animation:frisch 1.6s ease-out}
@keyframes frisch{0%{box-shadow:0 0 0 0 rgba(247,227,107,.95);transform:scale(1.04)}60%{box-shadow:0 0 0 14px rgba(247,227,107,0)}100%{transform:none}}
.tel-zeilen{margin:12px 18px;display:grid;gap:9px;font-size:13px}
.tel-zeilen span{display:flex;justify-content:space-between;border-top:1px solid #ece3d8;padding-top:9px}
.tel-zeilen em{font-style:normal;font-weight:700}
.zettel{position:absolute;left:0;top:70px;width:min(380px,74%);padding:22px 24px 26px;background:#fff;color:#1d2350;border-radius:3px;transform:rotate(-3deg);box-shadow:0 40px 60px -28px rgba(5,10,45,.75),8px 8px 0 -2px #f7e36b,14px 15px 0 -4px #f6c9d0;background-image:repeating-linear-gradient(180deg,transparent 0 33px,#d7dbf0 33px 34px);background-position:0 112px;z-index:2}
.z-kopf{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #1d2350;padding-bottom:8px;font-weight:900;font-size:20px;letter-spacing:-.02em}
.z-kopf span:last-child{font-weight:500;font-size:13px;letter-spacing:0}
.zettel label{display:block;font-size:13px;color:#4f5680;margin:12px 0 4px}
.zettel textarea{width:100%;border:0;background:transparent;resize:none;font-family:"Caveat",cursive;font-weight:700;font-size:30px;line-height:34px;color:#25308a;caret-color:#7a1f5c;height:102px;padding:0}
.zettel textarea:focus{outline:none}
.zettel textarea::placeholder{color:#a9aed0}
.z-knopf{margin-top:10px;background:#2b3a8c;color:#fff;font-weight:700;font-size:15px;padding:11px 18px;border-radius:10px;transition:background .2s}
.z-knopf:hover{background:#1d2350}
.zettel:focus-within{box-shadow:0 40px 60px -28px rgba(5,10,45,.75),8px 8px 0 -2px #f7e36b,14px 15px 0 -4px #f6c9d0,0 0 0 3px #f7e36b}
/* Auftragsblatt */
.stempel{position:absolute;right:16px;top:58px;pointer-events:none;z-index:3;display:flex;flex-direction:column;align-items:center;padding:10px 20px 8px;border:5px double #7a1f5c;border-radius:12px;color:#7a1f5c;font-family:"Schibsted Grotesk",sans-serif;transform:rotate(-11deg);opacity:0;mix-blend-mode:multiply;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E") center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E") center/100% 100%}
.stempel b{font-size:clamp(26px,2.8vw,40px);font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.stempel span{font-size:clamp(15px,1.4vw,20px);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.stempel.gestempelt{animation:stempeln .55s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes stempeln{0%{opacity:0;transform:rotate(-11deg) scale(1.9)}55%{opacity:.95;transform:rotate(-11deg) scale(.94)}100%{opacity:.9;transform:rotate(-11deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.stempel{opacity:.9}.stempel.gestempelt{animation:none}}



@media (max-width:1023px){.werkstueck{margin:0 auto}}
@media (max-width:560px){.werkstueck{height:auto;display:flex;flex-direction:column;gap:28px;padding-bottom:20px}.zettel{position:relative;top:0;width:100%}.telefon{position:relative;align-self:center;width:230px;height:470px}}

/* ---------- Stickerei: roter Faden läuft mit dem Scrollen ---------- */
.faden-lauf{position:fixed;left:14px;top:0;width:28px;height:100vh;z-index:30;pointer-events:none;overflow:visible}
html[data-welt="stickerei"] .faden-lauf{display:block}
.faden-lauf path{fill:none;stroke:#e4572e;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1100;stroke-dashoffset:1100}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){.faden-lauf path{animation:naehen linear both;animation-timeline:scroll(root)}}
}
@supports not (animation-timeline:scroll()){.faden-lauf{display:none!important}}
@keyframes naehen{to{stroke-dashoffset:0}}
@media (max-width:767px){.faden-lauf{left:4px}}

/* ---------- WhatsApp neben Mail ---------- */
.wa-icon{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.kanaele{display:grid;gap:22px;margin-top:32px}
.kanaele .adresse-muster{margin-top:0}
.wa-nummer{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.wa-nummer .wa-icon{color:#25d366}
.adresse-muster .wa-nummer b{font-size:clamp(18px,1.6vw,22px);font-weight:600}
.kontakt address .wa-nummer{gap:8px;font-weight:600;color:var(--voll-text)}
.m-kanal{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-size:12px;font-weight:700;color:#0d7a3e;background:#dcf8e6;border-radius:99px;padding:2px 8px 2px 6px;vertical-align:1px}
.m-kanal .wa-icon{width:13px;height:13px;color:#25d366}
html[data-welt="tafel"] .m-kanal{background:#25d366;color:#0b2414;font-family:"Barlow",sans-serif}
html[data-welt="tafel"] .m-kanal .wa-icon{color:#0b2414}
.formular-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.knopf-wa{background:#25d366;color:#08331a}
.knopf-wa:hover{background:#3ee07a}
.knopf-wa .wa-icon{width:20px;height:20px}
html[data-welt="auftrag"] .formular .knopf-wa,html[data-welt="stickerei"] .formular .knopf-wa{background:#25d366;color:#08331a}
html[data-welt="tafel"] .abschnitt-voll .knopf-wa{background:#25d366;color:#08331a}
.z-knoepfe{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.z-knoepfe .z-knopf{margin-top:0;display:inline-flex;align-items:center;gap:7px}
.z-wa{background:#25d366!important;color:#08331a!important}
.z-wa:hover{background:#3ee07a!important}
.tel-schirm{position:relative}
.tel-hinweis{position:absolute;left:8px;right:8px;top:8px;z-index:3;display:grid;gap:2px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 10px 24px -8px rgba(0,0,0,.35);font-size:12px;line-height:1.3;transform:translateY(-130%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.tel-hinweis.zeigen{transform:none;opacity:1}
.th-app{font-weight:800;font-size:11px;display:flex;align-items:center;gap:6px}
.th-app::before{content:"";width:14px;height:14px;border-radius:4px;background:#2b3a8c}
.tel-hinweis[data-kanal="whatsapp"] .th-app::before{background:#25d366;border-radius:50%}
.th-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tel-neu small{font-size:11px;color:#8a7a6a}

/* ---------- Fallbeispiel: acht Fragen ---------- */
.fragen{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:56px;counter-reset:f}
.fragen li{padding:28px 0 30px;border-top:var(--liste-linie)}
.fragen h3{font-size:clamp(21px,1.8vw,26px);line-height:1.18}
.fragen p{color:var(--text-2);margin-top:10px;max-width:52ch}
.fragen-link{margin-top:40px}
@media (max-width:860px){.fragen{grid-template-columns:1fr}}
html[data-welt="tafel"] .fragen h3{font-size:clamp(23px,2vw,28px)}
html[data-welt="stickerei"] .fragen li{border-top:2px dashed #b7cfd2}
html[data-welt="auftrag"] .fragen li{border-top:0;background:#fff;margin:10px 0;padding:24px 26px;box-shadow:0 1px 0 #d8dcf0,0 20px 30px -28px rgba(29,35,80,.6)}
html[data-welt="auftrag"] .fragen{gap:0 28px}

/* Zweiter Fall: Shop mit echtem Bildschirmfoto */
.fall-zwei{grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:96px}
.fall-bild{display:block;border-radius:var(--r-buehne);overflow:hidden;box-shadow:0 40px 70px -40px rgba(0,0,0,.7);transform:perspective(1600px) rotateY(-5deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fall-bild:hover{transform:perspective(1600px) rotateY(0)}
.fall-bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
html[data-welt="tafel"] .fall-bild{outline:10px solid #26292d}
html[data-welt="stickerei"] .fall-bild{outline:2px dashed rgba(255,255,255,.4);outline-offset:10px}
html[data-welt="auftrag"] .fall-bild{transform:rotate(1.5deg);border-radius:4px;border:12px solid #fff}
html[data-welt="auftrag"] .fall-bild:hover{transform:rotate(0)}
@media (max-width:1023px){.fall-zwei{grid-template-columns:1fr}.fall-zwei .fall-bild{order:-1;transform:none}}

/* ---------- FAQ-Seite ---------- */
.held-faq{min-height:0;padding:150px 0 72px;display:block}
.held-faq h1{font-size:clamp(52px,6.4vw,104px);line-height:var(--h1-zeile);letter-spacing:var(--h1-sperr)}
.held-faq .lead{max-width:52ch}
.faq-suche{margin-top:40px;max-width:620px}
.faq-suche label{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.faq-suche input{width:100%;font-size:19px;padding:18px 20px;border-radius:var(--r-feld);border:1.5px solid var(--held-linie);background:rgba(255,255,255,.1);color:var(--held-text);caret-color:var(--fokus)}
.faq-suche input::placeholder{color:var(--held-text-2);opacity:.8}
.faq-suche input:focus{outline:none;border-color:var(--held-text);box-shadow:0 0 0 3px var(--fokus-schein)}
.faq-treffer{font-size:14px;margin-top:10px;min-height:1.4em;color:var(--held-text-2)}
.faq-inhalt{padding-top:72px}
.faq-raster{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}
.faq-nav{position:sticky;top:32px}
.faq-nav ul{list-style:none;display:grid;gap:4px}
.faq-nav a{display:block;padding:9px 14px;border-radius:var(--r-feld);text-decoration:none;font-weight:500;color:var(--text-2);transition:background .2s,color .2s}
.faq-nav a:hover{color:var(--text)}
.faq-nav a.aktiv{background:var(--knopf);color:var(--knopf-text)}
.faq-gruppe{scroll-margin-top:32px}
.faq-gruppe+.faq-gruppe{margin-top:80px}
.faq-gruppe h2{font-size:clamp(30px,3vw,44px);line-height:1.05;letter-spacing:var(--h2-sperr);margin-bottom:20px}
.frage{border-top:var(--liste-linie)}
.frage:last-child{border-bottom:var(--liste-linie)}
.frage summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer}
.frage summary::-webkit-details-marker{display:none}
.frage summary h3{font-family:var(--t-text);font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.3}
.frage summary:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;text-decoration-color:var(--link-linie)}
.f-zeichen{flex:none;position:relative;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;opacity:.75;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .2s}
.f-zeichen::before,.f-zeichen::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;margin:-.9px 0 0 -6px;background:currentColor}
.f-zeichen::after{transform:rotate(90deg);transition:transform .3s}
.frage[open] .f-zeichen{transform:rotate(180deg)}
.frage[open] .f-zeichen::after{transform:rotate(0)}
.antwort{padding:0 64px 26px 0;color:var(--text-2);max-width:72ch}
.frage[open] .antwort{animation:aufklappen .35s cubic-bezier(.2,.8,.2,1)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}}
.frage mark{background:var(--auswahl);color:var(--auswahl-text);border-radius:3px;padding:0 2px}
.faq-leer{font-size:20px;padding:40px 0}
.faq-knoepfe{margin-top:32px}
@media (max-width:900px){.faq-raster{grid-template-columns:1fr;gap:32px}.faq-nav{position:static}.faq-nav ul{display:flex;flex-wrap:wrap;gap:8px}.faq-nav a{border:1.5px solid var(--liste-linie-farbe,rgba(0,0,0,.15));padding:7px 12px;font-size:15px}.antwort{padding-right:0}}
@media (prefers-reduced-motion:reduce){.frage[open] .antwort{animation:none}}
html[data-welt="tafel"] .faq-nav a{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:18px}
html[data-welt="tafel"] .faq-nav a.aktiv{background:#1d2023;color:#ffd400}
html[data-welt="tafel"] .frage summary h3{font-family:"Barlow",sans-serif}
html[data-welt="tafel"] .frage[open]{background:linear-gradient(90deg,#ffd400 0 4px,transparent 4px)}
html[data-welt="tafel"] .frage[open] summary,html[data-welt="tafel"] .frage[open] .antwort{padding-left:20px}
html[data-welt="stickerei"] .faq-suche input{border-radius:999px;background:rgba(255,255,255,.08)}
html[data-welt="stickerei"] .frage{border-top:2px dashed #b7cfd2}
html[data-welt="stickerei"] .frage summary h3{font-family:"Gloock",serif;font-weight:400;font-size:clamp(20px,1.7vw,24px)}
html[data-welt="stickerei"] .faq-nav a.aktiv{background:#0d4f5c;color:#fff;border-radius:999px}
html[data-welt="stickerei"] .held-faq{background:#0d4f5c url("../img/spitze.webp") right -200px center/auto 120% no-repeat}
html[data-welt="stickerei"] .held-faq::before{background:linear-gradient(90deg,#0d4f5c 0 40%,rgba(13,79,92,.85) 60%,rgba(13,79,92,.3))}
html[data-welt="auftrag"] .held-faq{background:linear-gradient(90deg,#2b3a8c 0 40%,rgba(43,58,140,.85) 62%,rgba(43,58,140,.35)),url("../img/werkbank.webp") center/cover,#2b3a8c}
html[data-welt="auftrag"] .faq-suche input{background:#fff;color:#25308a;font-family:"Caveat",cursive;font-weight:700;font-size:28px;padding:12px 20px;border:0;border-radius:4px;box-shadow:6px 6px 0 -1px #f7e36b}
html[data-welt="auftrag"] .faq-suche input::placeholder{color:#a9aed0}
html[data-welt="auftrag"] .faq-gruppen{background:#fff;padding:12px 36px 40px;box-shadow:0 1px 0 #d8dcf0,0 30px 50px -40px rgba(29,35,80,.5);border-radius:6px}
html[data-welt="auftrag"] .faq-gruppe h2{padding-top:28px}
html[data-welt="auftrag"] .faq-gruppe h2::before{content:"";display:block;width:42px;height:6px;margin-bottom:14px;border-radius:3px;background:#f6c9d0}
html[data-welt="auftrag"] .faq-nav a.aktiv{background:#f7e36b;color:#1d2350}
html[data-welt="auftrag"] .antwort p{font-size:18px}
.nav a[aria-current="page"]{opacity:1;background-size:100% 1.5px}
html[data-welt="stickerei"] .held-faq{padding:150px 0 72px}

/* Farbwahl als Pinselstriche rechts in der Bühne, Formen wie auf surprise-for-business.ch */
.fall-buehne .farben{position:absolute;z-index:3;right:0;top:50%;transform:translateY(-50%);margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-right:0}
.fall-buehne .farbe{width:96px;height:34px;border-radius:0;box-shadow:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;filter:drop-shadow(0 5px 7px rgba(0,0,0,.35));translate:30px 0;transition:translate .3s cubic-bezier(.2,.8,.2,1),scale .3s cubic-bezier(.2,.8,.2,1),filter .3s}
.fall-buehne .farbe:hover{translate:16px 0;transform:none}
.fall-buehne .farbe[aria-pressed="true"]{translate:-6px 0;scale:1.08;box-shadow:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.fall-buehne .farbe[data-farbe="#e9e6df"]{filter:drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 5px 7px rgba(0,0,0,.3))}
.fall-buehne .farbe[data-farbe="#18181a"]{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 5px 7px rgba(0,0,0,.4))}
.fall-buehne .farbe:focus-visible{outline:none;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px var(--fokus))}
.fall-buehne .farbe:nth-child(1){-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M4,12 C5,5 12,2 22,3 L92,2 C104,1 112,6 114,13 C116,17 113,19 115,22 C117,26 112,33 103,36 C99,38 96,34 92,36 C88,38 84,35 80,37 L20,38 C10,38 2,33 4,26 Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M4,12 C5,5 12,2 22,3 L92,2 C104,1 112,6 114,13 C116,17 113,19 115,22 C117,26 112,33 103,36 C99,38 96,34 92,36 C88,38 84,35 80,37 L20,38 C10,38 2,33 4,26 Z' fill='black'/%3E%3C/svg%3E")}
.fall-buehne .farbe:nth-child(2){-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M2,15 C2,6 11,1 21,3 L88,3 C99,1 108,5 112,11 C115,15 110,18 113,21 C117,26 111,34 101,36 C96,37 94,33 89,35 C84,37 80,34 75,36 L16,38 C6,38 1,30 2,21 Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M2,15 C2,6 11,1 21,3 L88,3 C99,1 108,5 112,11 C115,15 110,18 113,21 C117,26 111,34 101,36 C96,37 94,33 89,35 C84,37 80,34 75,36 L16,38 C6,38 1,30 2,21 Z' fill='black'/%3E%3C/svg%3E")}
.fall-buehne .farbe:nth-child(3){-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M6,9 C10,2 17,1 27,3 L95,2 C106,2 114,7 116,14 C118,18 114,20 116,23 C118,28 111,35 101,37 C97,38 95,34 90,36 C86,37 83,34 78,36 L22,38 C11,38 3,31 6,23 Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M6,9 C10,2 17,1 27,3 L95,2 C106,2 114,7 116,14 C118,18 114,20 116,23 C118,28 111,35 101,37 C97,38 95,34 90,36 C86,37 83,34 78,36 L22,38 C11,38 3,31 6,23 Z' fill='black'/%3E%3C/svg%3E")}
.fall-buehne .farbe:nth-child(4){-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M3,13 C4,5 13,1 23,4 L84,3 C96,2 104,6 108,12 C111,16 106,19 109,22 C113,27 107,34 97,36 C93,37 90,33 86,35 C81,37 77,34 72,36 L19,37 C9,37 2,32 3,25 Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M3,13 C4,5 13,1 23,4 L84,3 C96,2 104,6 108,12 C111,16 106,19 109,22 C113,27 107,34 97,36 C93,37 90,33 86,35 C81,37 77,34 72,36 L19,37 C9,37 2,32 3,25 Z' fill='black'/%3E%3C/svg%3E")}
.fall-buehne .farbe:nth-child(5){-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M5,10 C7,3 15,1 25,3 L97,2 C109,1 117,8 118,15 C119,19 115,20 117,24 C119,29 112,36 102,37 C98,38 95,34 91,36 C87,38 83,35 79,37 L21,38 C10,38 3,32 5,24 Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M5,10 C7,3 15,1 25,3 L97,2 C109,1 117,8 118,15 C119,19 115,20 117,24 C119,29 112,36 102,37 C98,38 95,34 91,36 C87,38 83,35 79,37 L21,38 C10,38 3,32 5,24 Z' fill='black'/%3E%3C/svg%3E")}
.fall-buehne .farbe:nth-child(2),.fall-buehne .farbe:nth-child(5){height:37px;width:100px}
.fall-buehne .farbe:nth-child(3){height:31px;width:90px}

/* Tafel-Einstieg: Foto mit überlappender Anzeige */
.tafel-foto{margin:0 0 0 auto;width:84%;border-radius:14px;overflow:hidden;box-shadow:0 40px 60px -40px rgba(10,12,14,.55)}
.tafel-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:40% 30%}
.tafel-buehne .tafel{position:relative;z-index:2;margin-top:-26%;width:94%}
.tafel-buehne{position:relative}
@media (max-width:640px){.tafel-foto{width:100%}.tafel-buehne .tafel{margin-top:-14%;width:100%}}

/* Stickerei-Einstieg: Porträt im Stickrahmen über der Spitze */
html[data-welt="stickerei"] .atelier-rahmen{display:block;position:relative;width:min(420px,78%);margin:0 4% 0 auto}
.atelier-bild{aspect-ratio:4/5;border-radius:50%;padding:12px;background:linear-gradient(145deg,#e0b985,#9b6b3c 55%,#cf9b62);box-shadow:0 50px 70px -36px rgba(0,0,0,.75),inset 0 2px 4px rgba(255,255,255,.45)}
.atelier-bild img,.atelier-bild video{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.atelier-rahmen figcaption{position:absolute;right:8%;bottom:6%;font-size:11px!important;color:rgba(255,255,255,.75)!important;margin:0!important}
.atelier-rahmen::after{content:"";position:absolute;right:-2%;top:46%;width:40px;height:14px;border-radius:4px;background:linear-gradient(#c9965f,#8a5c32);box-shadow:0 2px 4px rgba(0,0,0,.4)}
@media (max-width:1023px){html[data-welt="stickerei"] .atelier-rahmen{margin:0 auto;width:min(320px,80%)}}
/* Auftrag-Einstieg: Polaroid auf der Werkbank */
.polaroid{position:absolute;left:-46px;bottom:-6px;width:178px;background:#fff;padding:9px 9px 34px;transform:rotate(-7deg);box-shadow:0 30px 40px -24px rgba(0,0,0,.7);z-index:1}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 25%}
.polaroid span{position:absolute;left:12px;bottom:8px;font-family:"Caveat",cursive;font-weight:700;font-size:20px;color:#25308a}
.polaroid::before{content:"";position:absolute;left:50%;top:-12px;width:80px;height:24px;margin-left:-40px;background:rgba(247,227,107,.8);transform:rotate(4deg)}
@media (max-width:1180px){.polaroid{display:none}}

/* Region */
.orte{list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.orte li{padding:8px 16px;border-radius:var(--r-knopf);border:var(--liste-linie);font-weight:500;font-size:16px}
html[data-welt="tafel"] .orte li{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:18px;background:#1d2023;color:#f4f4f1;border:0;border-radius:4px}
html[data-welt="stickerei"] .orte li{border:2px dashed #9dbfc3;border-radius:999px}
html[data-welt="auftrag"] .orte li{font-family:"Caveat",cursive;font-weight:700;font-size:24px;color:#25308a;border:0;background:#fff;box-shadow:0 1px 0 #d8dcf0}

/* Videos im Einstieg */
.tafel-foto video{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:40% 30%;background:#2a2d30}
.held-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
html[data-welt="auftrag"] .held-video{display:block}
html[data-welt="auftrag"] .held{background:linear-gradient(90deg,#2b3a8c 0 28%,rgba(43,58,140,.82) 46%,rgba(43,58,140,.25) 72%,rgba(43,58,140,.05)),#2b3a8c url("../img/werkbank.webp") center/cover}
html[data-welt="auftrag"] .held::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#2b3a8c 0 28%,rgba(43,58,140,.82) 46%,rgba(43,58,140,.25) 72%,rgba(43,58,140,.05))}
.polaroid img{height:auto}
html[data-welt="auftrag"]{--h1:clamp(54px,6.4vw,104px)}
html[data-welt="stickerei"]{--h1:clamp(52px,6.2vw,100px)}
html[data-welt="tafel"]{--h1:clamp(56px,6.8vw,112px)}
@media (max-width:600px){html[data-welt="auftrag"] .mensch{animation:none!important;transform:rotate(-1deg)!important}html[data-welt="auftrag"] .mensch:nth-child(even){transform:rotate(1deg)!important}}

/* ---------- WhatsApp von Anfang an ---------- */
.knopf-gross{min-height:60px;padding:0 30px;font-size:18px}
.knopf-gross .wa-icon{width:24px;height:24px}
.knopf-wa{gap:10px;box-shadow:0 10px 24px -12px rgba(18,140,70,.8)}
.knopf-zweit{background:transparent;color:var(--held-text);box-shadow:inset 0 0 0 1.5px var(--held-linie)}
.knopf-zweit:hover{background:rgba(127,127,127,.12);box-shadow:inset 0 0 0 1.5px var(--held-text)}
.kopf .knopf-wa{background:#25d366;color:#08331a}
.kopf .knopf-wa:hover{background:#3ee07a}
.held .knopf-wa,.held .knopf-wa:hover{color:#08331a}
html[data-welt="tafel"] .held .knopf-wa,html[data-welt="stickerei"] .held .knopf-wa,html[data-welt="auftrag"] .held .knopf-wa{background:#25d366}
html[data-welt="tafel"] .held .knopf-wa:hover,html[data-welt="stickerei"] .held .knopf-wa:hover,html[data-welt="auftrag"] .held .knopf-wa:hover{background:#3ee07a}
@media (max-width:480px){.kopf .knopf-klein.knopf-wa{display:inline-flex;padding:0 14px}.kopf .knopf-wa span{display:none}}

.wa-schwebend{position:fixed;right:20px;bottom:18px;z-index:45;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#25d366;color:#fff;text-decoration:none;box-shadow:0 14px 30px -10px rgba(10,80,40,.75),0 2px 6px rgba(0,0,0,.15);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.wa-schwebend.sichtbar{transform:scale(1)}
.wa-schwebend .wa-icon{width:32px;height:32px}
.wa-schwebend:hover{background:#1ebe5b}
.wa-blase{position:absolute;right:72px;white-space:nowrap;background:#fff;color:#111;font-size:14px;font-weight:600;padding:9px 14px;border-radius:14px 14px 4px 14px;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.wa-schwebend:hover .wa-blase,.wa-schwebend:focus-visible .wa-blase,.wa-schwebend.hallo .wa-blase{opacity:1;transform:none}
@media (max-width:600px){.wa-schwebend{width:54px;height:54px;right:14px;bottom:76px}.wa-blase{display:none}}
@media (prefers-reduced-motion:reduce){.wa-schwebend{transition:none}}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular-ok{font-size:19px;padding:12px 0}
.formular [hidden]{display:none!important}

.tafel-zeile,.tafel-kopf{width:max-content}
.tafel{overflow:hidden}
.held-aktion{gap:12px}.held-aktion .knopf-gross{padding:0 24px}

/* Tafel-Einstieg: Café-Frau gross, Anzeige darunter ohne Überlappung */
.tafel-foto{width:100%;margin:0;border-radius:18px;box-shadow:0 50px 80px -46px rgba(10,12,14,.6)}
.tafel-foto video{aspect-ratio:16/11;object-position:64% 28%}
.tafel-buehne .tafel{margin-top:18px;width:100%}
@media (min-width:1024px){
  html[data-welt="tafel"] .held-in{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr)}
  html[data-welt="tafel"] .held{padding-top:112px}
}
@media (max-width:640px){.tafel-buehne .tafel{margin-top:12px}}