/* Alexo Tattoo Atelier. Regeln aus DESIGN.md. */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-normal-latin.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-normal-latin-ext.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-normal-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-normal-latin-ext.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  --tinte:#0C0D10;--flaeche:#15171C;--flaeche2:#1C1F25;--linie:#2B2E36;--papier:#ECE9E4;--grau:#9EA1A9;--zinnober:#F0563C;--zinnober-dunkel:#C8432C;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--s7:64px;--s8:104px;--s9:168px;
  --rand:20px;--max:1320px;--r:4px;
  --kopf:'Bricolage Grotesque',"Arial Narrow",sans-serif;--text:'Figtree',system-ui,sans-serif;
  --leiste:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
html:has(.seite-anfrage){scroll-padding-top:0}
body{margin:0;background:var(--tinte);color:var(--papier);font:400 17px/1.6 var(--text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:#fff}
::selection{background:var(--zinnober);color:var(--tinte)}
input,textarea{caret-color:var(--zinnober)}
html{scrollbar-color:#3a3e47 var(--tinte)}
:focus-visible{outline:2px solid var(--zinnober);outline-offset:3px}
h1,h2,h3{font-family:var(--kopf);font-stretch:75%;font-weight:760;line-height:.95;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,9.2vw,96px)}
h2{font-size:clamp(32px,5.6vw,60px)}
h3{font-size:clamp(22px,2.4vw,28px)}
p{margin:0 0 1em}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--papier);max-width:46ch}
.klein{font-size:14px;color:var(--grau)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:-999px;top:8px;background:var(--zinnober);color:var(--tinte);padding:8px 14px;z-index:100;border-radius:var(--r)}
.sprung:focus{left:8px}
.rahmen{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.ic{width:1.15em;height:1.15em;flex:none}

/* Knöpfe und Links */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;background:var(--zinnober);color:var(--tinte);border:0;border-radius:var(--r);font:650 17px/1.1 var(--text);text-decoration:none;cursor:pointer;transition:background-color .18s ease,transform .18s ease}
.knopf:hover{background:#ff6a50;color:var(--tinte)}
.knopf:active{transform:translateY(1px)}
.knopf-klein{min-height:40px;padding:0 14px;font-size:15px}
.knopf-zweit{background:transparent;color:var(--papier);border:1px solid var(--linie)}
.knopf-zweit:hover{background:var(--flaeche2);color:#fff}
.knopf-wa{background:#25D366;color:#0b1a10}
.knopf-wa:hover{background:#3be07a;color:#0b1a10}
.knopf[disabled]{opacity:.55;cursor:progress}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:.35em}
.textlink:hover{text-decoration-color:var(--zinnober)}
.textlinks{display:flex;flex-wrap:wrap;gap:var(--s5)}
.link-knopf{background:none;border:0;padding:6px 0;color:var(--grau);font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:.25em;cursor:pointer;text-align:left}
.link-knopf:hover{color:var(--papier)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:rgba(12,13,16,.97);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.gescrollt{border-bottom-color:var(--linie)}
.kopf-innen{display:flex;align-items:center;gap:var(--s4);min-height:68px}
.marke-link{text-decoration:none;margin-right:auto}
.marke{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.marke b{font:800 26px/1 var(--kopf);font-stretch:75%;letter-spacing:.06em}
.marke span{font-size:13px;color:var(--grau);letter-spacing:.04em}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{text-decoration:none}
.nav-kontakt{display:none}
.menue-knopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--linie);border-radius:var(--r);color:var(--papier);cursor:pointer}
.menue-knopf .zu{display:none}
.menue-knopf[aria-expanded=true] .zu{display:inline}
.menue-knopf[aria-expanded=true] .auf{display:none}
.menue-knopf .ic{width:22px;height:22px}
.kopf-cta{display:none}
@media (max-width:1079px){
  .nav{position:fixed;inset:68px 0 0;background:var(--tinte);padding:var(--s5) var(--rand) var(--s7);display:none;flex-direction:column;overflow:auto;border-top:1px solid var(--linie)}
  .nav.offen{display:flex}
  .nav li{border-bottom:1px solid var(--linie)}
  .nav a{display:block;padding:16px 0;font:760 34px/1 var(--kopf);font-stretch:75%}
  .nav a[aria-current=page]{color:var(--zinnober)}
  .nav-kontakt{display:block;margin-top:var(--s5);color:var(--grau);font-size:15px}
  body.menue-offen{overflow:hidden}
}
@media (min-width:640px){.kopf-cta{display:inline-flex}}
@media (min-width:1080px){
  .menue-knopf{display:none}
  .nav ul{display:flex;gap:26px}
  .nav a{font-size:15px;color:var(--grau);padding:8px 0;border-bottom:1px solid transparent}
  .nav a:hover{color:var(--papier)}
  .nav a[aria-current=page]{color:var(--papier);border-bottom-color:var(--zinnober)}
}
.kopf-schlicht{position:relative}
.kopf-ort{font-size:14px;color:var(--grau)}
@media (max-width:420px){.kopf-ort{display:none}}

/* Werk mit Werkschild */
.werk{margin:0}
.werk picture{background:var(--flaeche);aspect-ratio:4/5;overflow:hidden}
.werk img{width:100%;height:100%;object-fit:cover}
.werk figcaption{display:flex;flex-direction:column;gap:2px;padding-top:10px;margin-top:10px;border-top:1px solid var(--linie)}
.werk-motiv{font-size:15px;font-weight:600}
.werk-daten{font-size:13px;color:var(--grau);letter-spacing:.02em}

/* Held */
.held{display:grid;gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s7)}
.held h1{max-width:11ch}
.held .lede{margin-top:var(--s5)}
.held-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s5)}
.held-fuss{margin-top:var(--s5);font-size:14px;color:var(--grau)}
.held-bilder{display:grid;grid-template-columns:repeat(12,1fr);align-items:start}
.held-gross{grid-column:1/10;grid-row:1}
.held-klein{grid-column:8/13;grid-row:1;margin-top:58%;position:relative;z-index:1}
.held-klein picture{outline:10px solid var(--tinte)}
.held-gross figcaption{max-width:54%}
@media (max-width:999px){.held{padding-top:var(--s4);gap:var(--s5)}.held-bilder{order:-1}.held-klein{margin-top:48%}}
@media (min-width:1000px){
  .held{grid-template-columns:5fr 6fr;align-items:end;padding-top:var(--s7);padding-bottom:var(--s8)}
  .held-text{padding-bottom:var(--s7)}
}

/* Abschnitte */
.abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.salon-abschnitt{padding:var(--s7) 0}
.salon{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s4)}
.salon .werk:nth-child(even){margin-top:var(--s7)}
@media (min-width:1000px){
  .salon{gap:var(--s7) var(--s6)}
  .salon .werk:nth-child(even){margin-top:0}
  .salon{grid-template-columns:5fr 4fr 4fr;align-items:start}
  .salon .werk{grid-column:auto}
  .salon .werk:nth-child(3n+2){margin-top:var(--s8)}
  .salon .werk:nth-child(3n+3){margin-top:var(--s6)}
}
}

/* Stil-Index */
.stilindex-abschnitt{padding-top:var(--s7);padding-bottom:var(--s7)}
.stilindex{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.stilindex li{border-bottom:1px solid var(--linie)}
.stilindex a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3) var(--s4);padding:var(--s5) 0;text-decoration:none}
.si-nr{font:600 13px/1 var(--text);color:var(--grau);letter-spacing:.06em;align-self:start;padding-top:.6em}
.si-name{font:760 clamp(30px,5vw,56px)/1 var(--kopf);font-stretch:75%;transition:color .2s}
.si-name small{display:block;font:400 16px/1.5 var(--text);color:var(--grau);margin-top:var(--s3);max-width:56ch}
.si-bilder{display:none;gap:8px}
.si-bilder picture{width:72px;aspect-ratio:4/5;overflow:hidden;background:var(--flaeche)}
.si-bilder img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3);transition:filter .25s}
.si-pfeil{color:var(--grau);transition:transform .2s,color .2s}
.si-pfeil .ic{width:28px;height:28px}
.stilindex a:hover .si-name{color:#fff}
.stilindex a:hover .si-pfeil{color:var(--zinnober);transform:translateX(4px)}
.stilindex a:hover img{filter:none}
@media (min-width:760px){
  .stilindex a{grid-template-columns:1fr auto 40px}
  .si-bilder{display:flex}
  .stilindex-gross .si-bilder picture{width:96px}
}
.nicht-angeboten{margin-top:var(--s5);color:var(--grau);font-size:15px}

/* Preisband */
.preisband{background:var(--flaeche);padding:var(--s7) 0;margin:var(--s7) 0}
.preisband-innen{display:grid;gap:var(--s5)}
.preisband-zahl{font:780 clamp(48px,9vw,112px)/.92 var(--kopf);font-stretch:75%;margin:0}
.preisband p{max-width:52ch}
@media (min-width:1000px){.preisband-innen{grid-template-columns:6fr 5fr;align-items:end;gap:var(--s7)}}
.preisliste{margin:0;display:grid}
.preisliste div{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-bottom:1px solid var(--linie)}
.preisliste dt{color:var(--grau);font-size:14px}
.preisliste dd{margin:0;font-weight:600}
@media (min-width:640px){.preisliste div{grid-template-columns:200px 1fr;gap:var(--s4)}}

/* Atelier-Teaser */
.atelier-teaser{display:grid;gap:var(--s6);padding-top:var(--s7);padding-bottom:var(--s7)}
.atelier-bild{aspect-ratio:4/5;overflow:hidden;max-width:520px}
.atelier-bild img{width:100%;height:100%;object-fit:cover}
.atelier-text h2{margin-bottom:var(--s5)}
.atelier-text p{max-width:52ch}
@media (min-width:1000px){.atelier-teaser{grid-template-columns:5fr 6fr;align-items:center;gap:var(--s8)}}

/* Abschluss */
.abschluss{border-top:1px solid var(--linie);padding:var(--s8) 0;margin-top:var(--s7)}
.abschluss-innen{display:grid;gap:var(--s5)}
.abschluss h2{max-width:14ch}
.abschluss p{max-width:48ch;color:var(--grau)}
@media (min-width:1000px){.abschluss-innen{grid-template-columns:7fr 5fr;align-items:end}}

/* Seitenkopf, Pfad */
.seitenkopf{padding-top:var(--s6);padding-bottom:var(--s6)}
.seitenkopf h1{margin-bottom:var(--s5)}
.pfad{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--grau);margin-bottom:var(--s5)}
.pfad a{text-decoration:none}
.pfad a:hover{color:var(--papier);text-decoration:underline}

/* Filter und Galerie */
.filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:var(--s5);scrollbar-width:none}
.filter::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--linie);border-radius:var(--r);background:transparent;color:var(--papier);font:500 15px/1 var(--text);cursor:pointer;white-space:nowrap}
.chip span{color:var(--grau);font-size:13px}
.chip[aria-pressed=true]{background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.chip[aria-pressed=true] span{color:#55585f}
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s4);padding-bottom:var(--s7)}
.galerie .werk[hidden]{display:none}
@media (min-width:1000px){.galerie{grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s5)}.galerie .werk:nth-child(3n+2){margin-top:var(--s7)}.galerie.gefiltert .werk{margin-top:0}}
.galerie-klein{padding-bottom:0}
@media (min-width:1000px){.galerie-klein{grid-template-columns:repeat(4,1fr)}.galerie-klein .werk:nth-child(3n+2){margin-top:0}.galerie-klein .werk:nth-child(even){margin-top:var(--s6)}}

/* Stil-Seite */
.stil-held{display:grid;gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s7)}
.stil-held .lede{margin:var(--s5) 0 var(--s5)}
.stil-held-bild{max-width:560px}
@media (min-width:1000px){.stil-held{grid-template-columns:6fr 5fr;align-items:end;gap:var(--s8)}}
.text-abschnitte{display:grid;gap:var(--s6);padding-top:var(--s5);padding-bottom:var(--s7)}
.ta{display:grid;gap:var(--s4);border-top:1px solid var(--linie);padding-top:var(--s5)}
.ta h2{font-size:clamp(26px,3.4vw,40px)}
.ta p{max-width:62ch;color:#d8d5d0}
@media (min-width:1000px){.ta{grid-template-columns:4fr 7fr;gap:var(--s7)}}
.andere-stile{padding-top:var(--s7)}
.andere-titel{font-size:clamp(22px,2.6vw,28px);margin-bottom:var(--s4)}
.andere-stile ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.andere-stile a{font:700 22px/1.2 var(--kopf);font-stretch:75%}

/* Ablauf */
.schritte{list-style:none;margin:0;padding:0}
.schritte li{display:grid;grid-template-columns:56px 1fr;gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--linie)}
.s-nr{font:780 48px/.9 var(--kopf);font-stretch:75%;color:var(--zinnober)}
.schritte h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:var(--s3)}
.schritte p{max-width:58ch;color:#d8d5d0;margin:0}
@media (min-width:1000px){.schritte li{grid-template-columns:120px 4fr 7fr;align-items:start}.schritte li>div{display:contents}.s-nr{font-size:72px}}

/* Atelier */
.adresse-raster{display:grid;gap:var(--s7);padding-bottom:var(--s7)}
.adresse-gross{font:760 clamp(28px,4vw,44px)/1.05 var(--kopf);font-stretch:75%;margin-bottom:var(--s4)}
.termin-hinweis{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s4) var(--s5);max-width:46ch}
.entfernungen h2{font-size:clamp(26px,3.2vw,36px)}
.entfernungen dl{margin:var(--s4) 0 var(--s5);display:grid}
.entfernungen dl div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--linie)}
.entfernungen dd{margin:0;color:var(--grau);font-variant-numeric:tabular-nums}
@media (min-width:1000px){.adresse-raster{grid-template-columns:1fr 1fr}}

/* Über */
.ueber{display:grid;gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s7)}
.ueber-bild picture{aspect-ratio:4/5;overflow:hidden;max-width:560px}
.ueber-bild img{width:100%;height:100%;object-fit:cover}
.ueber-text h1{margin-bottom:var(--s4)}
.ueber-text h2{font-size:clamp(26px,3.2vw,36px);margin:var(--s6) 0 var(--s4)}
.ueber-text p{max-width:58ch}
@media (min-width:1000px){.ueber{grid-template-columns:5fr 6fr;gap:var(--s8);align-items:start}.ueber-bild{position:sticky;top:100px}}

/* FAQ */
.faq{border-top:1px solid var(--linie);padding-bottom:var(--s7)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:22px 0;cursor:pointer;list-style:none;font:700 clamp(20px,2.4vw,26px)/1.15 var(--kopf);font-stretch:75%}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;width:18px;height:18px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;transition:transform .2s}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq details p{max-width:62ch;color:#d8d5d0;padding-bottom:var(--s5);margin:0}

/* Recht */
.recht{max-width:780px;padding-bottom:var(--s7)}
.recht h2{font-size:clamp(22px,2.6vw,28px);margin:var(--s6) 0 var(--s3)}
.recht p{color:#d8d5d0}

/* Fuß */
.fuss{background:var(--flaeche);padding:var(--s7) 0 calc(var(--s5) + var(--leiste));margin-top:var(--s7);font-size:15px;color:var(--grau)}
.fuss a{color:var(--papier);text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;gap:var(--s6);margin-bottom:var(--s6)}
.fuss-marke{margin-bottom:var(--s4)}
.fuss-titel{color:var(--papier);font-weight:600;margin-bottom:var(--s3)}
.fuss-recht{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);padding-top:var(--s5);border-top:1px solid var(--linie);margin:0;font-size:14px;align-items:center}
.fuss-recht .link-knopf{color:var(--papier);text-decoration:none;font-size:14px;padding:0}
@media (min-width:1000px){.fuss-raster{grid-template-columns:5fr 4fr 3fr}}

/* Mobile Leiste */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:rgba(12,13,16,.94);border-top:1px solid var(--linie);transform:translateY(110%);transition:transform .25s ease}
.leiste .knopf{width:100%}
.leiste.sichtbar{transform:none}
@media (min-width:640px){.leiste{display:none}}

/* Einwilligung */
.einwilligung{position:fixed;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:60;max-width:520px;background:var(--flaeche2);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s5);font-size:15px}
.einwilligung p{color:#d8d5d0}
.ew-titel{font-weight:700;color:var(--papier)!important;margin-bottom:6px}
.ew-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ew-knoepfe .knopf{min-height:46px;padding:0 10px}
@media (min-width:640px){.einwilligung{left:var(--s5);bottom:var(--s5)}}

/* ---------- Anfrage-Seite ---------- */
.anfrage-kopf{padding-bottom:var(--s6)}
.streifen{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 var(--rand) 0;scroll-snap-type:x mandatory}
.streifen::-webkit-scrollbar{display:none}
.streifen picture{flex:0 0 38%;aspect-ratio:4/5;overflow:hidden;scroll-snap-align:start;background:var(--flaeche)}
.streifen img{width:100%;height:100%;object-fit:cover}
@media (min-width:760px){.streifen{max-width:var(--max);margin:0 auto}.streifen picture{flex:1 1 0}}
.anfrage-einstieg{padding-top:var(--s5);max-width:820px}
.anfrage-einstieg h1{font-size:clamp(40px,8vw,84px);margin-bottom:var(--s4)}
.fakten{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:15px;color:var(--grau)}
.fakten li:not(:last-child)::after{content:" ·";margin-left:10px;color:#5b5f68}
.anfrage-unten{padding-top:var(--s6);font-size:14px;color:var(--grau)}
.seite-anfrage .fuss{margin-top:var(--s6)}

/* ---------- Anfrage-Check ---------- */
.check-rahmen{max-width:820px}
.check{position:relative}
.check:has(#f-kontakt[hidden]){padding-bottom:58vh}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check-stand{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s4);padding:12px 0;background:var(--tinte);font-size:13px;color:var(--grau);font-variant-numeric:tabular-nums}
.balken{flex:1;height:3px;background:var(--linie);border-radius:2px;overflow:hidden}
.balken i{display:block;height:100%;width:10%;background:var(--zinnober);transition:width .3s ease}
.frage{scroll-margin-top:52px;border:0;margin:0;padding:var(--s6) 0 var(--s5);border-top:1px solid var(--linie);min-width:0}
.frage.neu{animation:auftauchen .32s ease-out both}
@keyframes auftauchen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.frage-titel{float:left;width:100%;display:flex;gap:14px;align-items:baseline;padding:0;font:760 clamp(30px,6vw,46px)/1 var(--kopf);font-stretch:75%;margin-bottom:var(--s4)}
.frage-nr{font:600 14px/1 var(--text);color:var(--zinnober);min-width:18px}
.frage-hilfe{color:var(--grau);font-size:16px;margin:-4px 0 var(--s5) 32px;max-width:52ch}
.frage-titel+*{clear:both}
.frage .frage-hilfe+*{margin-top:0}

.stilwahl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--s3)}
@media (min-width:760px){.stilwahl{grid-template-columns:repeat(3,1fr)}}
.stilkarte{position:relative;display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--flaeche);transition:border-color .15s}
.stilkarte input,.antwort input,.chip input{position:absolute;opacity:0;pointer-events:none}
.stilkarte picture{aspect-ratio:1/1;overflow:hidden}
.stilkarte img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.stilkarte>span{padding:10px 12px 12px;font-size:15px;line-height:1.25}
.stilkarte small{display:block;color:var(--grau);font-size:13px;margin-top:4px}
.stilkarte-offen{justify-content:center;min-height:120px}
.stilkarte:hover img{transform:scale(1.03)}
.stilkarte:has(input:checked){border-color:var(--zinnober);box-shadow:inset 0 0 0 1px var(--zinnober)}
.stilkarte:has(input:focus-visible),.antwort:has(input:focus-visible),.chip:has(input:focus-visible),.haken:has(input:focus-visible){outline:2px solid var(--zinnober);outline-offset:2px}

.wahl{display:grid;gap:10px;margin-bottom:var(--s3)}
.antwort{position:relative;display:flex;align-items:center;min-height:60px;padding:14px 18px;border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche);cursor:pointer;transition:border-color .15s,background-color .15s}
.antwort:hover{border-color:#4a4e58}
.a-text b{display:block;font-weight:600;font-size:17px}
.a-text small{display:block;color:var(--grau);font-size:14px;margin-top:2px}
.antwort:has(input:checked){border-color:var(--zinnober);background:#1f1512}
.antwort:has(input:checked)::after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--zinnober)}

.feld{display:grid;gap:6px;margin-bottom:var(--s4)}
.feld>span{font-size:15px;font-weight:600}
.feld small{color:var(--grau);font-weight:400}
input[type=text],input:not([type]),input[type=tel],input[type=email],textarea{width:100%;background:var(--flaeche);color:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:14px 14px;font:400 17px/1.4 var(--text);transition:border-color .15s}
textarea{resize:vertical;min-height:120px}
input:focus,textarea:focus{outline:none;border-color:var(--zinnober)}
::placeholder{color:#858992}
.feld-fehler,.senden-fehler{color:#ff8a73;font-size:15px;margin:0 0 var(--s3)}
.knopf-weiter{margin-top:var(--s2)}
.hinweis{background:var(--flaeche2);border:1px solid var(--linie);padding:var(--s4) var(--s5);margin:var(--s4) 0;border-radius:var(--r)}
.hinweis p{margin:0;color:#d8d5d0}
.hinweis b{color:var(--papier)}

.karte{display:flex;justify-content:center;gap:var(--s6);margin:0 0 var(--s5)}
.karte figure{margin:0;text-align:center}
.karte svg{width:120px;height:auto;display:block}
.karte figcaption{font-size:13px;color:var(--grau);margin-top:6px}
.karte .zone{fill:#2a2d34;stroke:var(--tinte);stroke-width:1;cursor:pointer;transition:fill .15s}
.karte .zone:hover{fill:#3d414b}
.karte .zone.an{fill:var(--zinnober)}
.karte .zone[data-z=finger]{fill:#1d1f24;cursor:not-allowed}
.karte .neutral{fill:#1d1f24}
@media (min-width:760px){.karte svg{width:150px}}
.stellen{display:flex;flex-wrap:wrap;gap:8px}
.stellen .chip{position:relative;min-height:44px}
.stellen .chip:has(input:checked){background:var(--zinnober);color:var(--tinte);border-color:var(--zinnober)}
.chip-gesperrt{color:var(--grau);border-style:dashed}

.preisinfo{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s5);margin-bottom:var(--s4)}
.preis-zahl{font:780 clamp(34px,6vw,52px)/1 var(--kopf);font-stretch:75%;margin-bottom:var(--s3)}
.preisinfo p:last-child{margin:0;color:#d8d5d0}

.plz-zeile{display:flex;flex-wrap:wrap;align-items:end;gap:var(--s3) var(--s5)}
.feld-plz{width:160px;margin-bottom:var(--s2)}
.feld-plz input{font-size:22px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.plz-ergebnis{margin:0 0 18px;font-size:16px;color:var(--grau);flex:1;min-width:200px}
.plz-ergebnis b{color:var(--papier)}
.plz-ergebnis.weit b{color:#ffb19f}

.felder{display:grid;gap:0 var(--s4)}
@media (min-width:640px){.felder{grid-template-columns:1fr 1fr}.feld-breit{grid-column:1/-1}}
.bilder{margin:var(--s3) 0 var(--s5);padding:var(--s4) var(--s5);border:1px dashed var(--linie);border-radius:var(--r)}
.bilder-titel{font-weight:600;margin-bottom:var(--s3)}
.bilder-titel small{color:var(--grau);font-weight:400}
.bilder-liste{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s3)}
.bilder-liste:empty{display:none}
.vorschau{position:relative;width:84px;height:84px;border-radius:var(--r);overflow:hidden;background:var(--flaeche)}
.vorschau img{width:100%;height:100%;object-fit:cover}
.vorschau button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(12,13,16,.85);color:var(--papier);cursor:pointer;font-size:16px;line-height:1}
.bilder-knopf{min-height:44px;cursor:pointer}
.bilder-hilfe{font-size:14px;color:var(--grau);margin:var(--s3) 0 0}
.haken{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#d8d5d0;margin-bottom:var(--s5);cursor:pointer}
.haken input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--zinnober)}
.knopf-senden{width:100%;min-height:58px;font-size:18px}
@media (min-width:640px){.knopf-senden{width:auto}}

/* Danke */
.danke{max-width:760px;padding-top:var(--s7);padding-bottom:var(--s7)}
.danke h1{margin-bottom:var(--s5);font-size:clamp(40px,8vw,80px)}
.danke .lede{margin-bottom:var(--s5)}
.danke .knopf-wa{margin:var(--s3) 0 var(--s5);min-height:58px}
.danke-zusammenfassung{white-space:pre-line;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s4) var(--s5);font-size:15px;color:#d8d5d0}

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

/* Anfrageseite: Beweis, Vorteile, Kundenstimmen (12.10.2026) */
.beweis{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 var(--s4);font-size:15px;color:var(--grau)}
.beweis b{color:var(--papier);font-family:var(--kopf);font-size:18px;font-weight:760}
.beweis-g{width:24px;height:24px;border-radius:50%;background:#fff;color:#4285F4;font:700 14px/24px Arial,sans-serif;text-align:center}
.beweis-sterne{color:#F6B91A;letter-spacing:2px;font-size:16px}
.beweis-trenn{color:#5b5f68}
.vorteile{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:10px}
.vorteile li{position:relative;padding-left:34px;font-size:17px;line-height:1.4}
.vorteile li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--zinnober) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat}
.lp-sprung{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:var(--s6) 0 0}
.lp-sprung span{font-size:14px;color:var(--grau)}
.lp-zitat{margin:var(--s6) 0 0;padding:var(--s5);background:var(--flaeche);border-radius:12px;border:1px solid var(--linie)}
.lp-zitat blockquote{margin:0;font-family:var(--kopf);font-stretch:85%;font-weight:700;font-size:clamp(20px,3vw,26px);line-height:1.2}
.lp-zitat figcaption,.stimmen-raster figcaption{margin-top:10px;font-size:13px;letter-spacing:.04em;color:var(--grau)}
.lp-stimmen{padding-top:var(--s8)}
.lp-stimmen h2{margin-bottom:var(--s4)}
.stimmen-raster{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:900px){.stimmen-raster{grid-template-columns:1.3fr 1fr 1fr}}
.stimmen-raster figure{margin:0;padding:var(--s5);background:var(--flaeche);border:1px solid var(--linie);border-radius:12px}
.stimmen-raster blockquote{margin:0;font-size:17px;line-height:1.55}
@media (max-width:700px){.beweis-trenn{display:none}.beweis>span:last-child,.beweis{row-gap:4px}}
.beweis-zert{flex-basis:100%}@media (min-width:701px){.beweis-zert{flex-basis:auto}}