/*
Theme Name: Inesmaria
Theme URI: https://www.inesmaria.at
Author: Inesmaria
Description: Schlankes Theme für das Atelier Inesmaria – Maßanfertigung, Änderung, Stick & Druck und Shop. Ohne Page-Builder, Schriften lokal (DSGVO).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietär
Text Domain: inesmaria
WC requires at least: 8.0
*/
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/hanken-grotesk-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/great-vibes-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/playfair-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/archivo-black-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jost-latin-500-normal.woff2) format("woff2")}

/* Konzept „Kreide & Maßband, leise“: Weiß und warmes Off-White, Tiefblau als einzige Handlungsfarbe, Maßband-Gelb nur als feine Markierung. Leichte große Grotesk (Hanken Grotesk 300), Haarlinien statt Konturen, ruhiges 12-Spalten-Raster. */
:root{
  --paper:#ebe4d8; --paper2:#e0d7c8; --white:#f7f3ec; --ink:#111214; --ink2:#34353a; --muted:#5d5e63; --line:#d9d1c3; --line2:#c9bfae; --head:#331c31;
  --blue:#3b2039; --blue-ink:#ffffff; --blue-soft:#ece2e9; --tape:#bfa06a; --tape-ink:#111214; --ok:#1e7b4b;
  --display:"Hanken Grotesk","Helvetica Neue",system-ui,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:0; --r-lg:0; --wrap:1320px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink2);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;font-weight:300;letter-spacing:-.03em;text-wrap:balance;line-height:1.02}
p{margin:0}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.tag::before{content:"";width:22px;height:1px;background:var(--tape);box-shadow:0 0 0 .5px var(--tape)}
.h-xl{font-size:clamp(52px,9vw,140px);line-height:.92;letter-spacing:-.05em}
.h-l{font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.04em}
.h-m{font-size:clamp(28px,3vw,42px);line-height:1.05}
.h-s{font-size:22px;line-height:1.15;font-weight:400;letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.6;max-width:36em;color:var(--ink2);font-weight:400}
.muted{color:var(--muted)}
.blue{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:0;font:500 15px/1 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid var(--blue);background:var(--blue);color:var(--blue-ink);transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:#2a1628;border-color:#2a1628}
.btn--ink{background:var(--ink);border-color:var(--ink)}
.btn--ink:hover{background:#000;border-color:#000}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn--ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--sm{min-height:42px;padding:0 20px;font-size:14px}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:0;border:1px solid var(--line2);background:transparent;cursor:pointer;font-size:14px;color:var(--ink);transition:.15s}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pill small{font-family:var(--mono);font-size:11px;opacity:.6}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.live{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.live i{width:7px;height:7px;border-radius:0;background:#b8483a;flex:none}
.live.open i{background:var(--ok);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(30,123,75,.45)}80%,100%{box-shadow:0 0 0 8px rgba(30,123,75,0)}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;background:var(--ink);color:#fff;padding:13px 22px;border-radius:0;font-size:14px;z-index:80;transition:.3s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
input[type=text],input[type=email],input[type=number],select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line2);border-radius:0;padding:13px 15px;width:100%;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
label.f{display:grid;gap:7px;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:.01em}
input[type=range]{width:100%;accent-color:var(--blue)}

/* Tape: eine feine Maßband-Linie */
.tape{height:30px;position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.tape-inner{position:absolute;inset:0 -200px 0 -200px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 100px) 0 0/100px 12px repeat-x,
  repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 10px) 0 0/10px 6px repeat-x;
  will-change:transform}
.tape-nums{position:absolute;left:0;bottom:3px;display:flex;font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.tape-nums span{width:100px;padding-left:4px}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--tape);z-index:70;width:0}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--head)}
.notice{background:#241422;color:#cdbcc8;font-size:12px;letter-spacing:.04em;text-align:center;padding-block:8px}
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--head);color:#efe5ec;transition:box-shadow .3s}
.head.scrolled{box-shadow:0 18px 40px -28px rgba(25,10,22,.8)}
.head::after{display:none;content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;background:
  repeating-linear-gradient(90deg,rgba(191,160,106,.9) 0 1px,transparent 1px 50px) 0 100%/50px 7px repeat-x,
  repeating-linear-gradient(90deg,rgba(191,160,106,.45) 0 1px,transparent 1px 10px) 0 100%/10px 4px repeat-x;
  background-repeat:repeat-x;background-position:0 100%}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.head-bar{display:flex;align-items:center;gap:6px}
.head-bar:first-child{gap:44px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:34px;width:auto}
.nav{position:relative;display:flex;gap:4px}
.nav a{position:relative;z-index:1;text-decoration:none;font-size:15px;color:#d6c6d2;padding:10px 14px;white-space:nowrap;transition:color .25s}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav-ind{position:absolute;bottom:-14px;height:2px;background:var(--tape);left:0;width:0;transition:left .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:0;pointer-events:none}
.nav-ind::after{content:"";position:absolute;left:50%;top:-5px;width:0;height:0;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--tape);border-top:0}
.nav-ind.on{opacity:1}
.head .live{color:#efe5ec;font-size:12px;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:0;margin-right:6px}
.ibtn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:0;border:0;background:transparent;cursor:pointer;color:#fff;text-decoration:none;transition:background .2s}
.ibtn:hover{background:rgba(255,255,255,.1)}
.ibtn b{position:absolute;top:6px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:0;background:var(--tape);color:var(--ink);font:600 10px/1 var(--body);display:grid;place-items:center;transition:transform .25s}
.ibtn b.bump{transform:scale(1.3)}
.ibtn b:empty{display:none}
.menu{display:none}
@media (max-width:1180px){.head .live{display:none}}
@media (max-width:1060px){
  .nav{position:fixed;left:0;right:0;top:calc(76px + env(safe-area-inset-top,0px));flex-direction:column;gap:0;background:var(--head);padding:12px max(24px,env(safe-area-inset-right,0px)) 28px max(64px,env(safe-area-inset-left,0px));opacity:0;transform:translateY(-6px);pointer-events:none;transition:.25s;box-shadow:0 30px 40px -30px rgba(0,0,0,.6)}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav a{font-family:var(--display);font-weight:300;font-size:32px;letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav a[aria-current="page"]{color:var(--tape)}
  .nav-ind{display:none}
  .menu{display:grid}
}

/* Hero */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;padding-block:72px 64px}
.hero-txt{grid-column:1/8;display:flex;flex-direction:column;gap:32px}
.hero-txt .h-xl>span{display:block}
.hero-txt .h-xl .dot{color:var(--blue)}
.stack{grid-column:8/13;position:relative;aspect-ratio:4/5;cursor:pointer;border:0;background:var(--line);padding:0;border-radius:0;overflow:hidden}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease,transform 6s ease}
.stack img:nth-child(1){z-index:3;opacity:1;transform:scale(1.04)}
.stack img:nth-child(2),.stack img:nth-child(3){z-index:1;opacity:0}
.stack-hint{position:absolute;z-index:4;left:20px;right:20px;bottom:18px;display:flex;gap:6px}
.stack-hint i{flex:1;height:2px;background:rgba(255,255,255,.45);border-radius:0;overflow:hidden}
.stack-hint i.on{background:#fff}
.stack-badge{position:absolute;z-index:4;left:20px;top:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:0;padding:8px 14px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink)}
.stack-badge strong{font-weight:500}
.stack-badge .mono{color:var(--muted)}
@media (max-width:900px){.hero-txt,.stack{grid-column:1/-1}}

/* Bento */
.sec{padding-block:120px}
.sec-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:48px}
.sec-top>div{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:18px}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(160px,auto);gap:16px}
.tile{position:relative;border-radius:0;overflow:hidden;background:var(--white);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:30px;text-decoration:none;color:var(--ink2);min-height:300px;border:1px solid var(--line);transition:border-color .3s}
.tile:hover{border-color:var(--line2)}
.tile h3{font-size:clamp(28px,2.8vw,38px)}
.tile p{max-width:28em}
.tile .go{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:0;border:1px solid currentColor;display:grid;place-items:center;font-size:16px;transition:background .3s,color .3s,border-color .3s;color:var(--ink);opacity:.8}
.tile:hover .go{background:var(--blue);border-color:var(--blue);color:#fff;opacity:1}
.tile.photo{color:#fff;border:0}
.tile.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.tile.photo:hover img{transform:scale(1.04)}
.tile.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.66),rgba(10,10,12,0) 58%)}
.tile.photo>*:not(img){position:relative;z-index:1}
.tile.photo h3,.tile.photo .go,.tile.photo .mono{color:#fff}
.tile.blue{background:var(--blue);border:0;color:#d9ddff}.tile.blue h3,.tile.blue .go,.tile.blue .mono{color:#fff}
.tile.blue:hover .go{background:#fff;color:var(--blue);border-color:#fff}
.tile.tapey{background:#f6f3ea;border-color:#ece5cf}
.t-a{grid-column:span 3;grid-row:span 2}.t-b{grid-column:span 3}.t-c{grid-column:span 3}
.t-d{grid-column:span 2}.t-e{grid-column:span 2}.t-f{grid-column:span 2}
@media (max-width:900px){.bento{grid-template-columns:minmax(0,1fr)}.t-a,.t-b,.t-c,.t-d,.t-e,.t-f{grid-column:auto;grid-row:auto}}
.tile svg.mini{position:absolute;top:30px;left:30px;width:44%;max-width:210px;height:auto}

/* Index list */
.viewtoggle{display:inline-flex;border:1px solid var(--line2);border-radius:0;padding:3px}
.viewtoggle button{border:0;background:transparent;padding:7px 14px;cursor:pointer;font-size:13px;border-radius:0;color:var(--muted)}
.viewtoggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.index{border-top:1px solid var(--line2)}
.irow{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,180px) 130px 40px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:color .2s}
.irow:hover{color:var(--blue)}
.irow .no{font-family:var(--mono);font-size:11px;color:var(--muted)}
.irow .nm{font-family:var(--display);font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1}
.irow .ct{font-size:14px;color:var(--muted)}
.irow .pr{font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.irow .ar{text-align:right;transition:transform .3s;opacity:.5}
.irow:hover .ar{transform:translateX(4px);opacity:1}
@media (max-width:760px){.irow{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}.irow .no,.irow .ar{display:none}.irow .ct{grid-column:1}.irow .pr{grid-row:1/3;grid-column:2}}
.peek{position:fixed;left:0;top:0;width:220px;aspect-ratio:3/4;border-radius:0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);pointer-events:none;z-index:45;opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .25s,transform .25s}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}
@media (hover:none){.peek{display:none}}

/* Product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:48px 20px}
.pc{position:relative;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink);animation:rise .5s both}
@keyframes rise{from{opacity:.001;transform:translateY(8px)}}
.pc-media{position:relative;aspect-ratio:3/4;border-radius:0;overflow:hidden;background:#efeeea}
.pc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:opacity .6s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pc-media img+img{opacity:0}
.pc:hover .pc-media img+img{opacity:1}
.pc:hover .pc-media img:first-child{transform:scale(1.03)}
.pc-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pc-meta strong{font-weight:400;font-size:17px}
.pc-meta span{font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.pc-cat{font-size:13px;color:var(--muted);margin-top:-10px}
.heart{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:0;border:0;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;color:var(--ink);opacity:0;transition:opacity .25s}
.pc:hover .heart,.heart[aria-pressed="true"],.heart:focus-visible{opacity:1}
@media (hover:none){.heart{opacity:1}}
.heart svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.heart[aria-pressed="true"]{color:var(--blue)}
.heart[aria-pressed="true"] svg{fill:var(--blue)}
.cover-link{position:absolute;inset:0;z-index:1}
.empty{padding:56px 24px;text-align:center;border:1px solid var(--line);border-radius:0;grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--white)}

/* Ines */
.ines{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:center}
.ines .pic{grid-column:1/6;border-radius:0;overflow:hidden;aspect-ratio:4/5;background:#efeeea}
.ines .pic img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.ines .txt{grid-column:7/13;display:flex;flex-direction:column;gap:28px}
.quote{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.2vw,44px);line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.facts div{border-top:1px solid var(--line2);padding-top:14px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.facts b{font-weight:500;color:var(--ink)}
@media (max-width:900px){.ines .pic,.ines .txt{grid-column:1/-1}}

/* Band */
.band{background:var(--blue);color:#dccfd8;border-radius:0;padding:clamp(32px,5vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px}
.band h2{color:#fff}
.band>div:first-child{grid-column:1/7;display:flex;flex-direction:column;gap:22px}
.band>div:last-child{grid-column:8/13}
@media (max-width:900px){.band>div:first-child,.band>div:last-child{grid-column:1/-1}}
.band .live{color:#fff}
.hours{display:flex;flex-direction:column;font-size:15px}
.hours div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);color:#e3e6ff;font-variant-numeric:tabular-nums}
.hours div.today{color:#fff;font-weight:500}
.hours div.today span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:0;background:var(--tape);margin-right:10px;vertical-align:middle}
.band .btn{background:#fff;color:var(--blue);border-color:#fff}
.band .btn:hover{background:var(--tape);border-color:var(--tape);color:var(--ink)}

/* Footer */
.foot{margin-top:120px;background:var(--ink);color:#b9babf;padding-block:88px 28px}
.foot a{color:#fff;text-decoration:none}.foot a:hover{color:var(--tape)}
.foot-big{font-family:var(--display);font-weight:300;color:#fff;font-size:clamp(44px,7vw,104px);line-height:.95;letter-spacing:-.05em;margin-bottom:72px}
.foot-big a{color:var(--tape)}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px;font-size:15px}
.foot-cols h4{font-family:var(--body);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:#fff;margin-bottom:14px}
.foot-cols nav{display:flex;flex-direction:column;gap:8px}
.foot-cols .mono{color:#b9babf}
.foot-bottom{margin-top:72px;padding-top:22px;border-top:1px solid #2a2b2f;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px}
.foot-bottom nav{display:flex;gap:20px}
.foot-bottom a{color:#b9babf}
.foot-logo{height:42px;width:auto;margin-bottom:14px}

.phead{padding-block:88px 48px;display:flex;flex-direction:column;gap:24px}

.tools{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding-block:18px;margin-bottom:40px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line)}
.tools select{width:auto;min-height:40px;padding:7px 14px;border-radius:0;font-size:14px}

/* Product */
.pdp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px;padding-block:48px 96px}
.gal{grid-column:1/8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gal button{all:unset;cursor:zoom-in;aspect-ratio:3/4;border-radius:0;overflow:hidden;background:#efeeea}
.gal button:first-child{grid-column:1/-1;aspect-ratio:4/5}
.gal button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.gal img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1.2s}
.gal button:hover img{transform:scale(1.02)}
.info{grid-column:8/13;position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:24px}
@media (max-width:980px){.gal,.info{grid-column:1/-1}.info{position:static}}
.crumb{font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink)}
.price{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.price small{display:block;font-size:12px;color:var(--muted)}
.sizetape{position:relative;background:var(--white);border:1px solid var(--line2);border-radius:0;overflow-x:auto;scrollbar-width:none}
.sizetape::-webkit-scrollbar{display:none}
.sizetape .ticks{display:flex;min-width:max-content;background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 8px) 0 0/8px 6px repeat-x}
.sizetape button{width:50px;height:58px;border:0;background:none;cursor:pointer;font:400 14px var(--body);font-variant-numeric:tabular-nums;color:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;position:relative;transition:color .15s}
.sizetape button::before{content:"";position:absolute;top:0;left:50%;width:1px;height:14px;background:var(--ink2)}
.sizetape button:hover{color:var(--blue)}
.sizetape button[aria-pressed="true"]{color:var(--blue);font-weight:600}
.sizetape button[aria-pressed="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--blue);border-radius:0}
.sizetape button[aria-pressed="true"]::before{background:var(--blue);height:18px;width:2px}
.sizetape button.rec{background:linear-gradient(to bottom,rgba(242,201,76,.35),rgba(242,201,76,0))}
.sz-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.sz-head strong{color:var(--ink);font-weight:500;font-size:15px}
.lnk{border:0;background:none;padding:0;cursor:pointer;color:var(--blue);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:14px}
.advisor{background:var(--white);border:1px solid var(--line);border-radius:0;padding:20px;display:flex;flex-direction:column;gap:14px}
.advisor .f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.advisor input{padding:10px 12px}
.advice{font-size:15px;color:var(--ink);min-height:1.4em}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:0;height:52px}
.qty button{width:44px;height:100%;border:0;background:none;cursor:pointer;font-size:18px;color:var(--ink2)}
.qty output{min-width:24px;text-align:center;font-variant-numeric:tabular-nums}
details{border-top:1px solid var(--line);padding-block:16px}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:500;color:var(--ink);list-style:none;display:flex;justify-content:space-between;font-size:15px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:300;font-size:20px;line-height:1}
details[open] summary::after{content:"−"}
details>*:not(summary){margin-top:12px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;font-size:14px;width:100%;min-width:360px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--line)}
th{color:var(--ink);font-weight:500}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(250,250,248,.97);display:grid;place-items:center;padding:24px}
.lightbox img{max-height:88vh;width:auto;border-radius:0}
.lightbox button{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px));background:var(--ink);color:#fff;border:0;border-radius:0;width:46px;height:46px;font-size:16px;cursor:pointer}

/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(17,18,20,.28);backdrop-filter:blur(2px);z-index:70;opacity:0;pointer-events:none;transition:.3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);z-index:75;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:28px;padding-top:calc(28px + env(safe-area-inset-top,0px));padding-right:calc(28px + env(safe-area-inset-right,0px));box-shadow:-30px 0 60px -40px rgba(0,0,0,.35)}
.drawer.on{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line2)}
.di{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding-block:22px}
.ci{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:16px;align-items:center}
.ci img{width:70px;aspect-ratio:3/4;object-fit:cover;border-radius:0}
.ci .n{color:var(--ink);font-size:16px}
.ci .s{font-size:13px;color:var(--muted)}
.ci .mini{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-variant-numeric:tabular-nums;font-size:14px}
.ci .mini button{width:26px;height:26px;border-radius:0;border:1px solid var(--line2);background:none;cursor:pointer}
.ci .p{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.ci .rm{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;margin-top:6px}
.df{border-top:1px solid var(--line2);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.sum{display:flex;justify-content:space-between;font-size:17px;color:var(--ink)}
.sum span:last-child{font-variant-numeric:tabular-nums}
.freebar{height:2px;background:var(--line2);border-radius:0;overflow:hidden}
.freebar i{display:block;height:100%;background:var(--tape);width:0;transition:width .5s}

/* Studios */
.studio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;padding-block:16px 112px;align-items:start}
.stage{grid-column:1/8;position:sticky;top:104px;border-radius:0;background:var(--paper2);padding:28px;display:flex;flex-direction:column;gap:14px}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.stage svg{width:100%;height:auto;display:block;max-height:68vh}
.panel{grid-column:8/13;display:flex;flex-direction:column;gap:0}
@media (max-width:980px){.stage,.panel{grid-column:1/-1}.stage{position:static}}
.ctl{padding:22px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.ctl:first-child{padding-top:0}
.ctl:last-of-type{border-bottom:0}
.ctl h3{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ctl h3 small{font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;color:var(--muted)}
.sw-row{display:flex;flex-wrap:wrap;gap:12px}
.sw{width:30px;height:30px;border-radius:0;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;transition:box-shadow .15s}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--blue)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:1px solid var(--line2);background:transparent;padding:9px 16px;border-radius:0;cursor:pointer;font-size:14px;color:var(--ink2);transition:.15s}
.seg button:hover{border-color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.fonts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fonts button{min-height:54px;border-radius:0;border:1px solid var(--line2);background:var(--white);cursor:pointer;font-size:20px;color:var(--ink);overflow:hidden;transition:.15s}
.fonts button[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
.motifs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.motifs button{aspect-ratio:1;border-radius:0;border:1px solid var(--line2);background:var(--white);cursor:pointer;display:grid;place-items:center;font-size:12px;color:var(--muted)}
.motifs button[aria-pressed="true"]{border-color:var(--blue)}
.motifs svg{width:56%;height:56%;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.motifs button[aria-pressed="true"] svg{stroke:var(--blue)}
.setlist{display:flex;flex-direction:column;gap:8px}
.setitem{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:0;background:var(--white)}
.setitem .chip{width:36px;height:36px;border-radius:0;border:1px solid rgba(0,0,0,.1)}
.setitem p{font-size:14px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.setitem small{display:block;font-size:12px;color:var(--muted)}
.setitem button{border:0;background:none;cursor:pointer;font-size:12px;text-decoration:underline;color:var(--muted)}
.sizes-qty{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.sizes-qty label{display:grid;gap:6px;text-align:center;font-size:12px;color:var(--muted)}
.sizes-qty input{text-align:center;padding:10px 4px}
.upload{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;border:1px dashed var(--line2);border-radius:0;padding:18px;cursor:pointer;background:var(--white);font-size:14px;color:var(--ink2);text-align:center;transition:.15s}
.upload:hover{border-color:var(--blue);color:var(--blue)}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.drag-hint{font-size:12px;color:var(--muted)}
#shirt-svg [data-layer]{cursor:grab}
#shirt-svg [data-layer].dragging{cursor:grabbing}

/* Booking */
.book{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;padding-block:16px 112px;align-items:start}
.book-l{grid-column:1/8;display:flex;flex-direction:column;gap:0}
.book-r{grid-column:9/13;position:sticky;top:110px}
@media (max-width:980px){.book-l,.book-r{grid-column:1/-1}.book-r{position:static}}
.stp{padding:28px 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:18px;transition:opacity .25s}
.stp[aria-disabled="true"]{opacity:.35;pointer-events:none}
.stp-h{display:flex;align-items:baseline;gap:14px}
.stp-h b{font-weight:400;font-size:13px;color:var(--blue);font-variant-numeric:tabular-nums}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.days button{flex:0 0 72px;scroll-snap-align:start;border:1px solid var(--line2);background:var(--white);border-radius:0;padding:12px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);transition:.15s}
.days button:hover{border-color:var(--ink)}
.days button small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.days button strong{font-size:24px;font-weight:300}
.days button:disabled{opacity:.3;cursor:not-allowed;background:transparent}
.days button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.days button[aria-pressed="true"] small{color:#dccfd8}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slots .pill{font-variant-numeric:tabular-nums}
.slots .pill:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.slots .pill[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.ticket{background:var(--white);border:1px solid var(--line);border-radius:0;padding:30px;display:flex;flex-direction:column;gap:16px;position:relative;box-shadow:0 30px 60px -45px rgba(0,0,0,.35)}
.ticket::before{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;background:var(--tape)}
.ticket dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px;color:var(--ink)}
.ticket dt{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding-top:3px}
.ticket dd{margin:0}
.ticket hr{border:0;border-top:1px dashed var(--line2);margin:4px 0;width:100%}

/* Atelier */
.svc-rows{display:flex;flex-direction:column}
.svc-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:center;padding-block:56px;border-top:1px solid var(--line)}
.svc-row .pic{grid-column:1/7;aspect-ratio:4/3;border-radius:0;overflow:hidden;background:#efeeea}
.svc-row .pic img{width:100%;height:100%;object-fit:cover}
.svc-row .tx{grid-column:8/13;display:flex;flex-direction:column;gap:18px}
.svc-row:nth-child(even) .pic{grid-column:7/13;order:2}.svc-row:nth-child(even) .tx{grid-column:1/6}
@media (max-width:900px){.svc-row .pic,.svc-row .tx,.svc-row:nth-child(even) .pic,.svc-row:nth-child(even) .tx{grid-column:1/-1;order:0}}
.svc-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svc-row li{font-size:13px;border:1px solid var(--line2);border-radius:0;padding:6px 14px;color:var(--ink2)}

/* Contact */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;padding-block:16px 112px}
.contact>div{grid-column:1/6;display:flex;flex-direction:column;gap:24px}
.contact form{grid-column:7/13}
@media (max-width:900px){.contact>div,.contact form{grid-column:1/-1}}
.cform{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
textarea{min-height:160px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check input{margin-top:4px;width:17px;height:17px;accent-color:var(--blue)}
.copyrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.copyrow span{font-size:16px;color:var(--ink);user-select:all;min-width:0;overflow-wrap:anywhere}
.copyrow button{border:0;background:none;padding:6px 0;font-size:13px;cursor:pointer;color:var(--blue);text-decoration:underline;text-underline-offset:3px;flex:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Hero vollflächig */
.hero2{position:relative;height:min(46vw,64vh);min-height:400px;width:100%;overflow:hidden;background:#2b2a28;color:#fff}
#stack{position:absolute;inset:0;cursor:pointer}
#stack>.sl:nth-child(1){z-index:2;opacity:1}
#stack>.sl:nth-child(n+2){z-index:1;opacity:0}
#stack>.sl{position:absolute;inset:0;display:flex;gap:3px;background:#1b1b1d;transition:opacity 1.2s ease}
#stack>.sl img{position:static;flex:1 1 0;min-width:0;height:100%;object-fit:cover;object-position:50% 18%;transition:transform 8s ease}
#stack>.sl:nth-child(1) img{transform:scale(1.03)}

.hero2::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to left,rgba(14,16,22,.62) 0%,rgba(14,16,22,.3) 38%,rgba(14,16,22,0) 62%),linear-gradient(to top,rgba(14,16,22,.45),rgba(14,16,22,0) 40%)}
.hero2-txt{position:absolute;left:0;right:0;bottom:0;z-index:4;padding-block:0 48px;pointer-events:none}
.hero2-txt .in{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.hero2-txt .in>div{display:flex;flex-direction:column;gap:22px;max-width:600px;pointer-events:auto;background:rgba(18,19,22,.58);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);padding:clamp(24px,3vw,40px);border-radius:0}
.rot{display:inline-grid;vertical-align:top}
.rot>span{grid-area:1/1;transition:opacity .7s ease,transform .7s ease;white-space:nowrap}
.rot>span:not(.on){opacity:0;transform:translateY(.25em)}
.hero2 .h-xl{font-size:clamp(42px,5.6vw,88px)}
@media (max-width:760px){.hero2::after{background:linear-gradient(to top,rgba(14,16,22,.78),rgba(14,16,22,0) 70%)}.hero2-txt .in{flex-direction:column;align-items:flex-start}}
.hero2 h1{color:#fff}
.hero2 h1>span{display:block}
.hero2 .dot{color:var(--tape)}
.hero2 .lead{color:#ebe7e0}
.hero2 .live{color:#fff}
.btn--light{background:#fffefc;border-color:#fffefc;color:var(--ink)}
.btn--light:hover{background:var(--tape);border-color:var(--tape);color:var(--ink)}
.btn--line{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn--line:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero2 .stack-hint{position:static;display:flex;gap:6px;width:150px;pointer-events:auto}
.hero2 .stack-hint button{all:unset;cursor:pointer;flex:1;height:14px;display:flex;align-items:center}
.hero2 .stack-hint button i{display:block;width:100%;height:2px;background:rgba(255,255,255,.4);border-radius:0}
.hero2 .stack-hint button.on i{background:#fff}
.hero2 .stack-hint button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.hero2::after{background:linear-gradient(to top,rgba(14,16,22,.38),rgba(14,16,22,0) 20%)!important}
.hero-ind{position:absolute;left:0;right:0;bottom:0;z-index:4}
.hero-ind .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px}
.hero-ind .live{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero-ind .stack-hint{position:static;display:flex;gap:6px;width:150px}
.hero-ind .stack-hint button{all:unset;cursor:pointer;flex:1;height:14px;display:flex;align-items:center}
.hero-ind .stack-hint button i{display:block;width:100%;height:2px;background:rgba(255,255,255,.45);border-radius:0;box-shadow:0 0 6px rgba(0,0,0,.3)}
.hero-ind .stack-hint button.on i{background:#fff}
.hero-ind .stack-hint button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-cap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 48px;align-items:end;padding-block:56px 40px}
.hero-cap h1{grid-column:1/8;font-size:clamp(50px,7.6vw,124px)}
.hero-cap h1>span{display:block}
.hero-cap .dot{color:var(--tape)}
.hero-cap-r{grid-column:8/13;display:flex;flex-direction:column;gap:26px;padding-bottom:14px}
@media (max-width:900px){.hero-cap h1,.hero-cap-r{grid-column:1/-1}}

/* Werkstatt-Paneele */
.panels{display:flex;gap:12px;height:clamp(460px,62vh,620px)}
.panel-x{position:relative;flex:1 1 0;min-width:0;border-radius:0;overflow:hidden;text-decoration:none;color:#fff;transition:flex-grow .8s cubic-bezier(.2,.7,.2,1);background:#3a3936}
.panels:hover .panel-x{flex-grow:.75}
.panels .panel-x:hover,.panels .panel-x:focus-visible{flex-grow:2.3}
.panel-x img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.panel-x:hover img{transform:scale(1.04)}
.panel-x::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,16,22,.78),rgba(14,16,22,.05) 60%)}
.px-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:30px;display:flex;flex-direction:column;gap:10px}
.px-k{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tape)}
.panel-x h3{color:#fff;font-size:clamp(24px,2.3vw,34px);white-space:nowrap}
.panel-x p{color:#e4e1da;max-width:30em}
.panel-x p,.px-go{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s,opacity .5s}
.px-go{font-size:14px;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);align-self:flex-start;padding-bottom:2px}
.panel-x:hover p,.panel-x:hover .px-go,.panel-x:focus-visible p,.panel-x:focus-visible .px-go{max-height:120px;opacity:1}
@media (hover:none){.panel-x p,.px-go{max-height:120px;opacity:1}}
@media (max-width:900px){.panels{flex-direction:column;height:auto}.panel-x{flex:none;min-height:260px}.panels:hover .panel-x,.panels .panel-x:hover{flex-grow:0}.panel-x h3{white-space:normal}.panel-x p,.px-go{max-height:120px;opacity:1}}
.tone{background:var(--paper2)}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>.pc{scroll-snap-align:start;animation:none}
@media (max-width:1060px){.hscroll{grid-auto-columns:calc((100% - 40px)/3)}}
@media (max-width:760px){.hscroll{grid-auto-columns:72%}}
.car-ctl{display:flex;align-items:center;gap:10px}
.sec-top>.car-ctl{flex:0 0 auto;flex-direction:row;flex-wrap:nowrap}
.car-ctl .btn{margin-left:6px}
.car-ctl .arr{width:46px;height:46px;border-radius:0;border:1px solid var(--line2);background:transparent;cursor:pointer;font-size:16px;color:var(--ink);transition:.2s}
.car-ctl .arr:hover{border-color:var(--ink);background:var(--white)}
.car-bar{height:1px;background:var(--line2);margin-top:28px;position:relative}
.car-bar i{position:absolute;left:0;top:-.5px;height:2px;background:var(--ink);width:25%;transition:left .3s,width .3s}

/* Kleiderstange */
.rail-wrap{position:relative}
.rail-wrap::before{content:"";position:absolute;left:0;right:0;top:27px;height:4px;border-radius:0;background:linear-gradient(180deg,#ddd7cc,#9f978a);box-shadow:0 3px 4px -1px rgba(0,0,0,.18);z-index:0}
.rail{position:relative;z-index:1;display:flex;gap:40px;overflow-x:auto;padding:24px max(24px,env(safe-area-inset-right,0px)) 28px max(64px,env(safe-area-inset-left,0px));scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity;user-select:none}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.hang{flex:0 0 clamp(210px,21vw,270px);display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);scroll-snap-align:start;transform-origin:50% 0;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hang:hover,.hang:focus-visible{transform:rotate(-1.6deg)}
.hanger{width:48%;height:auto;margin-bottom:-3px;overflow:visible;fill:none;stroke:#8a8377;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hang-img{position:relative;width:100%;aspect-ratio:3/4;border-radius:0;overflow:hidden;background:#ddd7cc;box-shadow:0 28px 40px -30px rgba(0,0,0,.55)}
.hang-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:opacity .7s;pointer-events:none}
.hang-img img+img{opacity:0}
.hang:hover .hang-img img+img{opacity:1}
.hang-n{margin-top:18px;font-size:17px;text-align:center}
.hang-p{font-size:13px;color:var(--muted);text-align:center}
@media (max-width:760px){.rail{padding-left:max(30px,env(safe-area-inset-left,0px));gap:28px}.hang{flex-basis:62vw}}

/* Showroom */
.show{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px;padding-bottom:40px;align-items:start}
.show-stage{grid-column:1/7;position:sticky;top:100px;display:flex;flex-direction:column;gap:14px}
.show-frame{position:relative;aspect-ratio:4/5;max-height:calc(100vh - 230px);width:100%;border-radius:0;overflow:hidden;background:var(--paper2);cursor:zoom-in}
.show-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:opacity .55s ease}
.show-cap{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink2)}
.show-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.show-thumbs button{all:unset;cursor:pointer;width:52px;aspect-ratio:3/4;border-radius:0;overflow:hidden;opacity:.45;transition:opacity .2s}
.show-thumbs button:hover{opacity:.8}
.show-thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 1px var(--paper),0 0 0 2px var(--ink)}
.show-thumbs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.show-thumbs img{width:100%;height:100%;object-fit:cover}
.show-side{grid-column:7/13;min-width:0}
.show-tools{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line2)}
.show-tools select{width:auto;min-height:38px;padding:6px 14px;border-radius:0;font-size:14px;background:transparent}
.show-list{list-style:none;margin:0;padding:0}
.srow{border-bottom:1px solid var(--line)}
.srow-h{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:22px 0;align-items:baseline}
.srow-h:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.srow-n{font-family:var(--display);font-weight:300;font-size:clamp(28px,2.8vw,42px);letter-spacing:-.03em;line-height:1.05;color:#8d8b86;transition:color .3s}
.srow-h:hover .srow-n,.srow.on .srow-n{color:var(--ink)}
.srow-m{grid-column:1;font-size:13px;color:var(--muted)}
.srow-p{grid-row:1;grid-column:2;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.srow-b{padding:0 0 30px;display:flex;flex-direction:column;gap:18px;animation:open .4s ease both}
@keyframes open{from{opacity:.001;transform:translateY(-4px)}}
.srow-b p{max-width:36em}
.srow-mimg{display:none}
.qsizes{display:flex;flex-wrap:wrap;gap:6px}
.qsizes button{min-width:42px;height:36px;border-radius:0;border:1px solid var(--line2);background:transparent;cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink2);transition:.15s}
.qsizes button:hover{border-color:var(--ink)}
.qsizes button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.srow-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.srow-act .heart,.buy .heart{position:static;opacity:1;border:1px solid var(--line2);background:transparent}
@media (max-width:980px){.show-stage{display:none}.show-side{grid-column:1/-1}.srow-mimg{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.srow-mimg img{height:300px;width:auto;max-width:none;border-radius:0}}

/* Produktseite */
.strip{display:flex;gap:10px;overflow-x:auto;padding:28px max(24px,env(safe-area-inset-right,0px)) 0 max(64px,env(safe-area-inset-left,0px));scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;user-select:none}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip button{all:unset;flex:0 0 auto;height:clamp(420px,70vh,760px);aspect-ratio:3/4;border-radius:0;overflow:hidden;scroll-snap-align:start;cursor:zoom-in;background:var(--paper2)}
.strip button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.strip img{width:100%;height:100%;object-fit:cover;pointer-events:none}
@media (max-width:760px){.strip{padding-left:max(30px,env(safe-area-inset-left,0px))}.strip button{height:auto;width:78vw}}
.pdp2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px;padding-block:56px 96px;align-items:start}
.pdp2-main{grid-column:1/7;display:flex;flex-direction:column;gap:26px}
.matline{display:flex;flex-wrap:wrap;gap:8px}
.matline span{font-size:13px;border:1px solid var(--line2);border-radius:0;padding:5px 12px;color:var(--ink2)}
.buy{grid-column:8/13;position:sticky;top:100px;background:var(--white);border:1px solid var(--line);border-radius:0;padding:28px;display:flex;flex-direction:column;gap:24px}
.buy-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.adj-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.adj-chips .pill{min-height:34px;font-size:13px;padding:0 13px}
@media (max-width:980px){.pdp2-main,.buy{grid-column:1/-1}.buy{position:static}}

/* Atelier */
.sw4{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px;align-items:stretch}
.sw4-media{grid-column:1/8;position:relative;border-radius:0;overflow:hidden;min-height:clamp(380px,62vh,640px);background:var(--paper2)}
.sw4-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .8s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.sw4-media img.on{opacity:1;transform:none}
.sw4-side{grid-column:8/13;display:flex;flex-direction:column;gap:28px;justify-content:space-between}
.sw4-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line2)}
.sw4-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;color:#8d8b86;transition:color .3s,padding .4s}
.sw4-tabs button small{font-family:var(--body);font-size:13px;letter-spacing:0;color:var(--muted)}
.sw4-tabs button:hover{color:var(--ink)}
.sw4-tabs button[aria-selected="true"]{color:var(--ink);padding-left:14px;box-shadow:inset 2px 0 0 var(--tape)}
.sw4-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sw4-panel{display:flex;flex-direction:column;gap:16px;animation:open .45s ease both}
.sw4-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sw4-panel li{font-size:13px;border:1px solid var(--line2);border-radius:0;padding:6px 14px}
@media (max-width:980px){.sw4-media,.sw4-side{grid-column:1/-1}.sw4-media{min-height:320px}}
.proc{position:relative}
.proc-tape{position:relative;height:44px;margin-bottom:40px;background:#26272b;border-radius:0;overflow:hidden}
.proc-tape::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(246,243,238,.4) 0 1px,transparent 1px 10px) 0 0/10px 8px repeat-x,repeating-linear-gradient(90deg,rgba(246,243,238,.85) 0 1px,transparent 1px 50px) 0 0/50px 16px repeat-x}
.proc-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(191,160,106,.35);border-right:2px solid var(--tape);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.proc-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:-84px;position:relative;margin-bottom:40px}
.proc-steps button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:58px;padding-top:12px}
.proc-steps button i{width:14px;height:14px;border-radius:0;background:#26272b;border:2px solid #cfcbc3;margin-left:-7px;transition:.3s}
.proc-steps button.done i{background:var(--tape);border-color:var(--tape)}
.proc-steps button[aria-selected="true"] i{background:var(--paper);border-color:var(--tape);box-shadow:0 0 0 4px rgba(191,160,106,.35)}
.proc-steps button span{font-size:13px;color:var(--muted)}
.proc-steps button strong{display:block;font-weight:400;font-size:17px;color:var(--ink);margin-top:2px}
.proc-steps button:focus{outline:none}
.proc-steps button:focus-visible strong{text-decoration:underline;text-decoration-color:var(--tape);text-underline-offset:4px}
.proc-steps button:first-child i{margin-left:0}
.proc-detail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;align-items:center}
.proc-detail .t{grid-column:1/7;display:flex;flex-direction:column;gap:18px;animation:open .45s ease both}
.proc-detail .t .big{font-family:var(--display);font-weight:300;font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.proc-detail .pic{grid-column:8/13;aspect-ratio:4/5;max-height:640px;border-radius:0;overflow:hidden;background:#ddd7cc}
.proc-detail .pic img{width:100%;height:100%;object-fit:cover;animation:open .6s ease both}
@media (max-width:860px){.proc-steps{grid-template-columns:minmax(0,1fr);margin-top:0;gap:0}.proc-tape{display:none}.proc-steps button{flex-direction:row;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.proc-steps button i{margin-left:0}.proc-detail .t,.proc-detail .pic{grid-column:1/-1}}
.finder{background:var(--white);border:1px solid var(--line);border-radius:0;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px}
.finder-q{grid-column:1/8;display:flex;flex-direction:column;gap:28px}
.finder-q h3{font-family:var(--body);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.garments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:520px){.garments{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f-extra{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.garments button{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line2);border-radius:0;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:var(--ink2);text-align:center;transition:.2s}
.garments button svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.garments button:hover{border-color:var(--ink)}
.garments button[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.garments button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.finder-r{grid-column:8/13;background:var(--paper2);border-radius:0;padding:28px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.finder-r .big{font-family:var(--display);font-weight:300;font-size:28px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
@media (max-width:900px){.finder-q,.finder-r{grid-column:1/-1}}

/* Galerie */
.gal-bar{position:sticky;top:calc(76px + env(safe-area-inset-top,0px));z-index:20;background:rgba(235,228,216,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line2);border-bottom:1px solid var(--line);margin-bottom:32px}
.gal-bar-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-block:14px}
.expo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px;padding-bottom:80px}
.expo-list{grid-column:1/6;padding-bottom:30vh}
.expo-ch{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:56px 0 8px;border-bottom:1px solid var(--line2);display:flex;justify-content:space-between}
.expo-ch:first-child{padding-top:0}
.expo-item{min-height:46vh;padding:28px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;justify-content:center;transition:opacity .4s}
.expo-item .no{font-family:var(--mono);font-size:12px;color:var(--muted)}
.expo-item h3{font-weight:300;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;color:#9a9893;transition:color .4s}
.expo-item.on h3{color:var(--ink)}
.expo-item .lnk{align-self:flex-start;opacity:0;transition:opacity .3s}
.expo-item.on .lnk,.expo-item .lnk:focus-visible{opacity:1}
.expo-m{display:none}
.expo-stage{grid-column:6/13;position:sticky;top:calc(150px + env(safe-area-inset-top,0px));height:calc(100vh - 190px);align-self:start;display:flex;flex-direction:column;gap:14px}
.expo-frame{position:relative;flex:1;min-height:0;background:var(--paper2);cursor:zoom-in;border:0;padding:0;width:100%}
.expo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s ease}
.expo-meta{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--ink2)}
.expo-meta .mono{color:var(--muted)}
@media (max-width:900px){.expo-stage{display:none}.expo-list{grid-column:1/-1;padding-bottom:0}.expo-item{min-height:0}.expo-item h3{color:var(--ink)}.expo-item .lnk{opacity:1}.expo-m{display:block;width:100%;height:auto;margin-top:8px}}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;padding-bottom:80px}
.sheet figure{margin:0;position:relative;aspect-ratio:1;overflow:hidden;background:var(--paper2)}
.sheet button{all:unset;position:absolute;inset:0;cursor:zoom-in}
.sheet button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.sheet img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter .5s,transform 1s}
.sheet figure:hover img,.sheet button:focus-visible img{filter:none;transform:scale(1.04)}
.sheet figcaption{position:absolute;left:0;bottom:0;right:0;padding:24px 10px 8px;font-size:12px;color:#fff;background:linear-gradient(to top,rgba(14,16,22,.65),rgba(14,16,22,0));opacity:0;transition:opacity .3s;pointer-events:none}
.sheet figure:hover figcaption{opacity:1}
.sheet .num{position:absolute;top:6px;left:8px;font-family:var(--mono);font-size:10px;color:#fff;mix-blend-mode:difference;pointer-events:none}
@media (hover:none){.sheet img{filter:none}}
.viewer{position:fixed;inset:0;z-index:95;background:rgba(17,18,20,.97);color:#e9e6df;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(16px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
.v-top{display:flex;align-items:center;gap:16px}
.v-top #v-cap{flex:1;font-size:15px}
.v-top .mono{color:#a9a69f}
.v-x{width:44px;height:44px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;font-size:16px}
.v-stage{position:relative;display:grid;place-items:center;min-height:0;touch-action:pan-y}
.v-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .35s}
.v-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.3);background:rgba(17,18,20,.4);color:#fff;cursor:pointer;font-size:18px}
.v-nav:hover{background:#fff;color:var(--ink)}
#v-prev{left:0}#v-next{right:0}
.v-thumbs{display:flex;gap:4px;overflow-x:auto;padding-top:14px;scrollbar-width:none;justify-content:safe center}
.v-thumbs::-webkit-scrollbar{display:none}
.v-thumbs button{all:unset;cursor:pointer;flex:0 0 auto;height:54px;overflow:hidden;opacity:.4;transition:opacity .2s}
.v-thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 1px var(--tape)}
.v-thumbs button:focus-visible{outline:2px solid #fff}
.v-thumbs img{height:100%;width:auto;max-width:none}

/* Stick & Druck */
.hoop-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px;align-items:center}
.hoop-wrap{grid-column:1/7;background:var(--paper2);padding:clamp(20px,4vw,48px);display:grid;place-items:center}
.hoop-wrap svg{width:100%;max-width:480px;height:auto}
.hoop-ctl{grid-column:7/13;display:flex;flex-direction:column;gap:22px}
.ctl-h{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.ctl-h span{text-transform:none;letter-spacing:0;font-weight:400}
@media (max-width:900px){.hoop-wrap,.hoop-ctl{grid-column:1/-1}}
.pex{display:flex;flex-direction:column;gap:28px}
.pex-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line2)}
.pex-tabs button{all:unset;cursor:pointer;padding:14px 20px;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s}
.pex-tabs button:hover{color:var(--ink)}
.pex-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--tape)}
.pex-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pex-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:center}
.pex-stage{grid-column:1/7;position:relative;background:var(--white);padding:28px;display:grid;place-items:center}
.pex-stage svg{width:100%;max-width:420px;height:auto}
.pex-stage path,.pex-stage text{transition:fill .5s}
.pex-label{position:absolute;top:16px;left:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pex-txt{grid-column:7/13;display:flex;flex-direction:column;gap:18px;animation:open .4s ease both}
.pex-txt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pex-txt li{font-size:13px;border:1px solid var(--line2);padding:6px 14px}
@media (max-width:900px){.pex-stage,.pex-txt{grid-column:1/-1}}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0;border-top:1px solid var(--line2)}
.how li{padding:28px 28px 28px 0;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line)}
.how li span{font-family:var(--mono);font-size:12px;color:var(--tape)}
.how h3{font-weight:400;font-size:24px;letter-spacing:-.02em}
/* Größen-Raster */
.szgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.szgrid button{position:relative;border:0;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);background:transparent;cursor:pointer;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--ink);transition:background .15s,color .15s}
.szgrid button b{font-weight:400;font-size:17px;font-variant-numeric:tabular-nums}
.szgrid button small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.szgrid button:hover{background:var(--paper2)}
.szgrid button[aria-pressed="true"]{background:var(--blue);color:#fff}
.szgrid button[aria-pressed="true"] small{color:#dccfd8}
.szgrid button.rec::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 12px 12px 0;border-color:transparent var(--tape) transparent transparent}
.szgrid button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;z-index:1}
.szgrid.sm{grid-template-columns:repeat(8,minmax(0,1fr))}
.szgrid.sm button{height:46px}
.szgrid.sm button b{font-size:15px}
@media (max-width:520px){.szgrid.sm{grid-template-columns:repeat(5,minmax(0,1fr))}}
.szinfo{font-size:14px;color:var(--ink2);margin-top:10px;min-height:1.5em;font-variant-numeric:tabular-nums}

/* Vertikales Maßband */
.vtape{position:fixed;left:0;top:0;bottom:0;width:30px;background:#26272b;z-index:55;overflow:hidden}
.vtape-in{position:absolute;left:0;right:0;top:0;will-change:transform;background:
  repeating-linear-gradient(180deg,rgba(246,243,238,.35) 0 1px,transparent 1px 10px) right 0/7px 10px repeat-y,
  repeating-linear-gradient(180deg,rgba(246,243,238,.6) 0 1px,transparent 1px 50px) right 0/12px 50px repeat-y,
  repeating-linear-gradient(180deg,rgba(246,243,238,.9) 0 1px,transparent 1px 100px) right 0/18px 100px repeat-y}
.vtape-in span{display:block;height:100px;font:500 9px/1 var(--mono);color:#cfcbc3;padding:4px 0 0 3px}
.vmark{position:fixed;left:0;top:50%;width:30px;height:2px;background:var(--tape);z-index:56;pointer-events:none}
.vmark b{position:absolute;left:36px;top:-11px;background:#26272b;color:#fff;font:500 11px/1 var(--mono);padding:5px 8px;border-radius:0;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s}
.vmark b.on{opacity:1}
.wrap{padding-left:max(64px,env(safe-area-inset-left,0px))}
@media (max-width:760px){.vtape,.vmark{width:14px}.vtape-in span{color:transparent}.vmark b{display:none}.wrap{padding-left:max(30px,env(safe-area-inset-left,0px))}}

/* ===== WordPress-Ergänzungen ===== */
[hidden]{display:none!important}
html{scroll-padding-top:110px}
body{margin:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;text-decoration:none}
.skip:focus{left:16px}
.admin-bar .head{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .head{top:0}}
.admin-bar .gal-bar{top:calc(76px + var(--wp-admin--admin-bar--height,32px))}
@media (max-width:600px){.admin-bar .gal-bar{top:76px}}
.admin-bar .expo-stage{top:182px;height:calc(100vh - 222px)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.phead--sm{padding-bottom:24px}
.contact-pic{margin-top:32px;aspect-ratio:4/3;overflow:hidden}
.contact-pic img{width:100%;height:100%;object-fit:cover}
.foot-bottom nav ul,.foot-bottom ul{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.nav ul{list-style:none;margin:0;padding:0;display:contents}
.nav li{display:contents}
.pdesc p{margin:0 0 .8em}
.pdesc p:last-child{margin:0}
.di.busy{opacity:.5;pointer-events:none}
.btn.disabled{opacity:.45;pointer-events:none}
.ci>span{width:64px;height:80px;background:var(--paper2)}
/* Fließtext-Seiten (AGB, Impressum, Datenschutz, FAQ) */
.prose{max-width:820px;padding-bottom:96px;font-size:17px}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(26px,3vw,34px);margin-top:1.6em}
.prose h3{font-size:22px;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.2em}
.prose a{color:var(--blue)}
.prose img{height:auto}
.prose table{border-collapse:collapse;width:100%}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:8px;text-align:left}
.prose details{border-top:1px solid var(--line);padding:14px 0}
.prose summary{cursor:pointer;font-weight:500;color:var(--ink)}
.prose .entry{padding:24px 0;border-bottom:1px solid var(--line)}
/* WooCommerce Warenkorb / Kasse / Konto */
.wc-page{padding-bottom:96px}
.wc-page .button,.wc-page button.button,.wc-page .wc-block-components-button,.wc-page input[type=submit]{background:var(--blue)!important;color:#fff!important;border-radius:0!important;border:0;padding:14px 22px;font:inherit;font-weight:500}
.wc-page input,.wc-page select,.wc-page textarea,.wc-page .wc-block-components-text-input input{border-radius:0!important}
.wc-page a{color:var(--blue)}
.woocommerce-store-notice,.demo_store{display:none!important}
/* MOBILE-FIXES */
html{overflow-x:hidden;overflow-x:clip}
.drawer{transform:none;clip-path:inset(0 0 0 100%);transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
.drawer.on{clip-path:inset(0 0 0 0)}
@media (max-width:900px){.hero,.ines,.band,.pdp,.studio,.book,.svc-row,.contact,.hero-cap,.show,.pdp2,.sw4,.proc-detail,.finder,.expo,.hoop-sec,.pex-body{grid-template-columns:minmax(0,1fr)!important}.hero>*,.ines>*,.band>*,.pdp>*,.studio>*,.book>*,.svc-row>*,.contact>*,.hero-cap>*,.show>*,.pdp2>*,.sw4>*,.proc-detail>*,.finder>*,.expo>*,.hoop-sec>*,.pex-body>*{grid-column:1/-1!important;min-width:0}}
/* HERO3 */
.hero3{background:var(--head);color:#efe5ec}
.h3-track{display:flex;gap:6px;height:clamp(420px,min(48vw,70vh),720px)}
.h3-p{position:relative;margin:0;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;background:#1b1b1d;transition:flex-grow .9s cubic-bezier(.2,.7,.2,1)}
.h3-p.on{flex-grow:calc(var(--g) * 2.2 + .6);cursor:default}
.h3-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);filter:saturate(.7) brightness(.62);transition:transform 6s ease,filter .9s ease}
.h3-p.on img{transform:scale(1);filter:none}
.h3-p:not(.on):hover img{filter:saturate(.9) brightness(.8)}
.h3-p figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;gap:12px;align-items:baseline;padding:40px 22px 18px;font-size:14px;letter-spacing:.02em;color:#fff;background:linear-gradient(to top,rgba(24,12,22,.62),rgba(24,12,22,0));opacity:0;transform:translateY(8px);transition:opacity .6s .35s,transform .6s .35s}
.h3-p.on figcaption{opacity:1;transform:none}
.h3-p figcaption .mono{color:var(--tape)}
.h3-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.hero3 .live{color:#fff}
.h3-dots{display:flex;gap:6px;width:180px}
.h3-dots button{all:unset;cursor:pointer;flex:1;height:16px;display:flex;align-items:center}
.h3-dots button i{position:relative;display:block;width:100%;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.h3-dots button.on i::after{content:"";position:absolute;inset:0;background:var(--tape);transform-origin:left;animation:h3prog 6s linear forwards}
.h3-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes h3prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .h3-track{height:auto;gap:8px;padding:0 24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .h3-track::-webkit-scrollbar{display:none}
  .h3-p,.h3-p.on{flex:0 0 84%;aspect-ratio:4/5;scroll-snap-align:center;cursor:default}
  .h3-p img,.h3-p.on img{transform:none;filter:none}
  .h3-p figcaption{opacity:1;transform:none;padding:32px 16px 14px;font-size:13px}
  .h3-bar{padding-block:12px 14px}
  .h3-bar .live{font-size:13px}
  .h3-dots{width:110px}
  .h3-dots button.on i::after{animation:none}
}
@media (prefers-reduced-motion:reduce){.h3-p,.h3-p img{transition:none}.h3-dots button.on i::after{animation:none}}
/* Werkstatt-Karten mobil gut lesbar */
@media (max-width:900px),(hover:none){
  .panel-x::after{background:linear-gradient(to top,rgba(24,12,22,.9) 0%,rgba(24,12,22,.66) 50%,rgba(24,12,22,.22) 100%)}
  .px-txt{text-shadow:0 1px 12px rgba(0,0,0,.35)}
  .panel-x{min-height:300px}
}
/* /HERO3 */
/* MOBILE2 */
input[type=tel]{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line2);border-radius:0;padding:13px 15px;width:100%;transition:border-color .15s}
input[type=tel]:focus{outline:none;border-color:var(--blue)}
.check>span{flex:1;min-width:0}
@media (max-width:760px){
  .sec{padding-block:72px}
  .phead{padding-block:56px 32px}
  .sec-top{margin-bottom:32px}
  .proc-steps{display:flex!important;overflow-x:auto;gap:8px;margin:0 -24px 28px!important;padding:0 24px 4px;scrollbar-width:none}
  .proc-steps::-webkit-scrollbar{display:none}
  .proc-steps button{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line2);background:transparent}
  .proc-steps button[aria-selected="true"]{border-color:var(--tape);background:var(--white)}
  .proc-steps button span{display:none}
  .proc-steps button strong{margin:0;font-size:15px;white-space:nowrap}
  .proc-detail .pic{max-height:440px}
  #filters,#g-f{flex-wrap:nowrap;overflow-x:auto;margin-inline:-24px;padding-inline:24px;scrollbar-width:none}
  #filters::-webkit-scrollbar,#g-f::-webkit-scrollbar{display:none}
  #filters .pill,#g-f .pill{flex:0 0 auto}
  .gal-bar-in{gap:10px;padding-block:10px}
  .gal-bar-in>#g-f{width:calc(100% + 48px)}
}
body{overflow-x:visible}
.admin-bar .show-stage{top:132px}
.foot-bottom .credits{color:#8d8e93}
@media (min-width:761px){.h3-bar .live{visibility:hidden}}
.h3-p figcaption{background:linear-gradient(to top,rgba(24,12,22,.75),rgba(24,12,22,0))}
@media (max-width:900px){.ines .pic,.proc-detail .pic,.contact-pic{max-width:520px}}
@media (max-width:900px){.nav a{font-size:22px;padding:11px 0;letter-spacing:-.01em}}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
.expo-m{cursor:zoom-in}
/* /MOBILE2 */
/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start;padding-bottom:112px}
.faq-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:22px}
.admin-bar .faq-side{top:142px}
.faq-search{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ink);padding:6px 0}
.faq-search svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;flex:none}
.faq-search input{all:unset;flex:1;min-width:0;font-size:17px;color:var(--ink);padding:8px 0}
.faq-search input::placeholder{color:var(--muted)}
.faq-cats{display:flex;flex-wrap:wrap;gap:8px}
.faq-help{margin-top:12px;background:var(--head);color:#e6dbe3;padding:26px;display:flex;flex-direction:column;gap:12px}
.faq-help .mono{color:var(--tape)}
.faq-help .btn{background:#fff;color:var(--head)}
.faq-help .lnk{color:#fff}
.faq-list{border-top:1px solid var(--line2)}
.faq-item{border-bottom:1px solid var(--line2)}
.faq-h{margin:0;font:inherit}
.faq-q{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:44px 1fr 28px;gap:12px;align-items:center;padding:24px 0;transition:padding .3s}
.faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.faq-n{font-family:var(--mono);font-size:12px;color:var(--muted);transition:color .3s}
.faq-t{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.9vw,25px);line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.faq-i{position:relative;width:28px;height:28px;border:1px solid var(--line2);transition:background .3s,border-color .3s}
.faq-i::before,.faq-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .35s,background .3s}
.faq-i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-q:hover .faq-t{color:var(--blue)}
.faq-q:hover .faq-i{border-color:var(--ink)}
.faq-item.open .faq-n{color:var(--tape)}
.faq-item.open .faq-i{background:var(--head);border-color:var(--head)}
.faq-item.open .faq-i::before{background:#fff}
.faq-item.open .faq-i::after{transform:translate(-50%,-50%) rotate(0);background:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden;padding-left:56px;padding-right:40px;color:var(--ink2);display:flex;flex-direction:column;gap:10px}
.faq-item.open .faq-a-in{padding-bottom:28px}
.faq-a-in p{margin:0}
.faq-a-in a{color:var(--blue)}
.faq-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.faq-item mark{background:rgba(191,160,106,.35);color:inherit}
.faq-empty{padding:28px 0;color:var(--muted)}
@media (max-width:900px){
  .faq{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-side{position:static}
  .faq-help{order:3}
  .faq-cats{flex-wrap:nowrap;overflow-x:auto;margin-inline:-24px;padding-inline:24px;scrollbar-width:none}
  .faq-cats::-webkit-scrollbar{display:none}
  .faq-cats .pill{flex:0 0 auto}
  .faq-q{grid-template-columns:30px 1fr 26px;padding:20px 0}
  .faq-a-in{padding-left:42px;padding-right:0}
}
@media (prefers-reduced-motion:reduce){.faq-a,.faq-i::before,.faq-i::after{transition:none}}
@media (max-width:900px){.faq-side{display:contents}.faq-search{order:1}.faq-cats{order:2}.faq-list{order:3}.faq-help{order:4;margin-top:8px}}
.faq-h,.faq-t{hyphens:manual}
/* /FAQ */
/* LEGAL */
.lg-head{padding-bottom:36px}
.lg-meta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;border-top:1px solid var(--line2);padding-top:18px}
.lg-switch{display:flex;gap:6px;flex-wrap:wrap}
.lg-switch a{font-size:14px;text-decoration:none;color:var(--ink2);border:1px solid var(--line2);padding:7px 14px;transition:.2s}
.lg-switch a:hover{border-color:var(--ink)}
.lg-switch a[aria-current="page"]{background:var(--head);border-color:var(--head);color:#fff}
.lg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start;padding-bottom:112px}
.lg--single{grid-template-columns:minmax(0,1fr)}
.lg-toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 140px);overflow:auto;scrollbar-width:thin}
.admin-bar .lg-toc{top:142px}
.lg-toc summary{list-style:none;cursor:default;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc summary small{letter-spacing:0;text-transform:none}
.lg-toc ol{list-style:none;margin:0;padding:0}
.lg-toc li a{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:9px 0;font-size:14.5px;line-height:1.35;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s}
.lg-toc li a span{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}
.lg-toc li a:hover,.lg-toc li a.on{color:var(--ink)}
.lg-toc li a.on span{color:var(--tape)}
.lg-top{font-size:13px;color:var(--muted)}
.lg-body{max-width:760px;font-size:16.5px;line-height:1.7;color:var(--ink2)}
.lg-body>*+*{margin-top:1em}
.lg-body h3{scroll-margin-top:120px;display:flex;gap:16px;align-items:baseline;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;color:var(--ink);margin-top:2.4em;padding-top:1.1em;border-top:1px solid var(--line2)}
.lg-body h3:first-child{margin-top:0}
.lg-n{font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--tape);flex:none;transform:translateY(-2px)}
.lg-body p,.lg-body ul,.lg-body ol{max-width:68ch}
.lg-body ul{padding-left:0;list-style:none}
.lg-body ul li{position:relative;padding-left:22px;margin:.45em 0}
.lg-body ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--tape)}
.lg-body a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.lg-body strong{color:var(--ink);font-weight:500}
.lg-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);margin:1.4em 0}
.lg-fact{background:var(--white);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.lg-fact>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lg-fact>div{color:var(--ink);line-height:1.5}
@media (max-width:900px){
  .lg{grid-template-columns:minmax(0,1fr);gap:24px}
  .lg-toc{position:static;max-height:none;overflow:visible}
  .lg-toc details{border:1px solid var(--line2);padding:14px 16px;background:var(--white)}
  .lg-toc summary{cursor:pointer;border-bottom:0;padding:0}
  .lg-toc details[open] summary{padding-bottom:10px;border-bottom:1px solid var(--line2)}
  .lg-top{display:none}
  .lg-facts{grid-template-columns:minmax(0,1fr)}
  .lg-body h3{scroll-margin-top:96px}
}
/* /LEGAL */
/* /MOBILE-FIXES */

/* FACTS */
.kfacts-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.kfacts-g>div{background:var(--white);padding:22px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kfacts-g dt{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.kfacts-g dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
@media (max-width:600px){.kfacts-g{grid-template-columns:1fr}.kfacts-g>div{padding:18px}}
/* /FACTS */

/* Kontakt-Button im Header */
.hcta{display:inline-flex;align-items:center;min-height:38px;padding:0 18px;margin-right:8px;background:#efe5ec;color:var(--head);border:1px solid #efe5ec;font:500 13px/1 var(--body);letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.hcta:hover,.hcta:focus-visible{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hcta[aria-current]{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
@media (max-width:480px){.hcta{min-height:34px;padding:0 12px;font-size:12px;margin-right:2px}}

/* Maßband am Handy schmäler */
@media (max-width:760px){
  .vtape,.vmark{width:8px}
  .vtape-in{background-size:4px 10px,6px 50px,8px 100px}
  .wrap,.rail,.strip{padding-left:max(24px,env(safe-area-inset-left,0px))}
}