/* F4SHN.HAUS · Shop the look · Prototyp 01.11.2026
   Bildsprache: Datenblatt (Papier, grosse Nummern, Farbblöcke, Strichcode, Stempel), Schrift Glancyr (Titel) und Bricolage (Text). */
@font-face{font-family:"Playfair Display";src:url(../fonts/PlayfairDisplay-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Playfair Display";font-style:italic;src:url(../fonts/PlayfairDisplay-italic.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/Newsreader-normal.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Newsreader;font-style:italic;src:url(../fonts/Newsreader-italic.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/Jost-normal.woff2) format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:Glancyr;src:url(../fonts/Glancyr-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:Glancyr;src:url(../fonts/Glancyr-SemiBold.otf) format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:Bricolage;src:url(../fonts/BricolageGrotesque-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Bricolage;src:url(../fonts/BricolageGrotesque-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{
  --papier:#ECE6DA;--papier-2:#E3DCCD;--karte:#F6F2EA;--tinte:#15121C;--grau:#6E675E;--linie:rgba(21,18,28,.16);
  --magenta:#DC00F4;--gelb:#F7C800;--blau:#2F45E8;--minze:#A8EDD0;--rot:#F2523F;
  --f-titel:Glancyr,"Bodoni 72",Didot,Georgia,serif;--f-text:Bricolage,"Helvetica Neue",Arial,sans-serif;
  --rand:clamp(16px,4vw,64px);--ease:cubic-bezier(.22,.61,.12,1);--r:0px;
  --kino-accent:#DC00F4;--kino-on-accent:#fff;--kino-ink:#15121C;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 17px/1.6 var(--f-text);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{overflow-wrap:break-word;font-family:var(--f-titel);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0}
h1 i,h2 i,.lk-t i,.sk-t i,.notizen i{font-style:normal;font-weight:600;color:var(--magenta)}
.mini{font:700 11px/1.35 var(--f-text);letter-spacing:.14em;text-transform:uppercase}
.klein{font-size:13px;line-height:1.5;color:var(--grau)}
.nr{font:700 clamp(28px,3vw,40px)/.9 var(--f-text);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nr.gross{font-size:clamp(64px,9vw,128px)}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}

/* Kopf */
.proto{background:var(--tinte);color:var(--papier);text-align:center;font:700 10.5px/1 var(--f-text);letter-spacing:.16em;text-transform:uppercase;padding:8px 16px}
.kopf{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:12px var(--rand);background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.marke img{height:36px;width:auto}
.hauptnav{display:flex;gap:26px;margin:0 auto}
.hauptnav a{text-decoration:none;font:700 13px/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;padding:8px 0;border-bottom:2px solid transparent}
.hauptnav a:hover,.hauptnav a[aria-current]{border-color:var(--magenta)}
.tasten{display:flex;gap:6px;margin-left:auto}
.taste{position:relative;width:42px;height:42px;display:grid;place-items:center;border:0;background:none;text-decoration:none}
.taste svg{width:23px;height:23px;fill:none;stroke:var(--tinte);stroke-width:1.7}
.taste b{position:absolute;top:3px;right:1px;min-width:18px;height:18px;border-radius:9px;background:var(--magenta);color:#fff;font:700 11px/18px var(--f-text);text-align:center;padding:0 4px}
.taste b:empty{display:none}
.taste.puls b{animation:puls .5s var(--ease)}
@keyframes puls{50%{transform:scale(1.5)}}
.menue{display:none}

/* Knöpfe */
.knopf{text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:2px solid var(--tinte);background:none;text-decoration:none;font:700 13px/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase;transition:transform .2s var(--ease),background .2s}
.knopf:hover{transform:translateY(-2px)}
.knopf.haupt{background:var(--magenta);border-color:var(--magenta);color:#fff}
.knopf.dunkel{background:var(--tinte);color:var(--papier)}
.knopf.hell{border-color:#fff;color:#fff}
.knopf.rand[aria-pressed=true]{background:var(--tinte);color:var(--papier)}
.knopf[disabled]{opacity:.35;pointer-events:none}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--tinte);background:none;padding:8px 14px;font:700 12px/1 var(--f-text);letter-spacing:.06em;text-transform:uppercase;border-radius:40px}
.chip[aria-pressed=true],.chip[aria-selected=true]{background:var(--tinte);color:var(--papier)}

/* Startseite: Held */
.held{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100svh - 96px);background:var(--tinte);color:#fff;padding:clamp(32px,5vw,72px) var(--rand)}
.held-in{max-width:640px}
.held h1{font-size:clamp(48px,6.6vw,112px);margin:18px 0 22px}
.held h1 i{color:var(--gelb)}
.held-rahmen{position:relative;background:var(--papier);color:var(--tinte);padding:12px 12px 18px;transform:rotate(1.2deg);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.held-kopf{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 12px}
.held-film{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#ddd}
.held-farben{display:flex;gap:4px;margin-top:12px}.held-farben i{flex:1;height:10px}
.held-stempel{right:-26px;bottom:-30px;background:var(--gelb);color:var(--tinte);opacity:1;border-color:var(--tinte)}
.held p{max-width:560px;font-size:19px;margin:0}

/* Titelgeschichte */
.titelgeschichte,.stl{margin:clamp(40px,7vw,96px) var(--rand);background:var(--karte);border:1px solid var(--linie)}
.tg-kopf,.stl-kopf{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--linie)}
.code{display:inline-flex;height:22px;gap:2px;align-items:stretch}
.code i{background:var(--tinte);display:block}
.tg-in{display:grid;grid-template-columns:1fr 1.25fr;gap:0}
.tg-text{padding:clamp(22px,4vw,56px);display:flex;flex-direction:column}
.tg-text h2{font-size:clamp(34px,4.6vw,64px);margin:10px 0 14px}
.tg-liste{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--linie)}
.tg-liste li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:15px}
.tg-liste b{font-variant-numeric:tabular-nums}
.tg-film{background:var(--blk);padding:clamp(18px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:12px;color:var(--blk-ink)}
.tg-film .klein{color:inherit;opacity:.8}

/* Discover-Band */
.disco-band{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;background:var(--gelb);padding:clamp(40px,7vw,100px) var(--rand);overflow:hidden}
.disco-band h2{font-size:clamp(46px,6.5vw,104px);margin:14px 0 18px}
.disco-band h2 i{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:.08em;text-underline-offset:.08em}
.disco-band p{max-width:440px}
.deck{position:relative;height:clamp(300px,36vw,460px)}
.mini-karte{position:absolute;left:50%;top:50%;width:clamp(190px,22vw,290px);aspect-ratio:3/4;transform:translate(-50%,-50%) rotate(var(--r));background:#fff;padding:10px 10px 46px;box-shadow:0 22px 50px rgba(21,18,28,.25);transition:transform .5s var(--ease)}
.mini-karte img{width:100%;height:100%;object-fit:cover}
.mini-karte:nth-child(1){margin-left:-70px}.mini-karte:nth-child(3){margin-left:70px}
.disco-band:hover .mini-karte:nth-child(3){transform:translate(-20%,-52%) rotate(14deg)}

/* Bänder, Raster */
.band{padding:clamp(40px,6vw,88px) var(--rand)}
.band-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px;border-bottom:2px solid var(--tinte);padding-bottom:14px}
.band-kopf h2{font-size:clamp(34px,4.4vw,62px)}
.band-kopf>a{font:700 13px/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
.sk{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.sk[hidden]{display:none}
.sk-bild{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--papier-2);margin-bottom:6px}
.sk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sk:hover .sk-bild img{transform:scale(1.04)}
.sk-stil{position:absolute;left:12px;top:12px;background:var(--blk);color:var(--blk-ink);font:700 11px/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px}
.sk-film{position:absolute;right:12px;top:12px;background:var(--tinte);color:#fff;font:700 11px/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px}
.sk-t{font:700 clamp(22px,2vw,28px)/1.08 var(--f-titel)}
.sk-k{color:var(--grau);font-size:15px}
.welten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.welt{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:260px;padding:20px;background:var(--blk);color:var(--blk-ink);text-decoration:none;overflow:hidden}
.welt img{position:absolute;right:-12%;bottom:-8%;width:62%;aspect-ratio:3/4;object-fit:cover;transform:rotate(6deg);box-shadow:0 14px 30px rgba(0,0,0,.25);transition:transform .5s var(--ease)}
.welt:hover img{transform:rotate(0) translateY(-10px)}
.welt-t{font:700 clamp(28px,2.8vw,40px)/1 var(--f-titel);position:relative;z-index:1}
.welt-k{max-width:55%;font-size:14px;position:relative;z-index:1}
.welt:first-child{grid-column:span 2}
.welt-pfeil{position:absolute;right:20px;bottom:10px;font:700 80px/1 var(--f-titel)}
.filme{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fk{position:relative;aspect-ratio:16/10;overflow:hidden;text-decoration:none;background:var(--tinte);color:#fff}
.fk img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .6s var(--ease)}
.fk:hover img{transform:scale(1.05)}
.fk-t{position:absolute;left:14px;bottom:12px;font:700 20px/1.05 var(--f-titel)}
.fk-p{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;background:var(--magenta);display:grid;place-items:center;font-size:14px}
.notizen{list-style:none;margin:0;padding:0}
.notizen a{display:grid;grid-template-columns:90px 1fr 160px;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--linie);text-decoration:none;font:700 clamp(20px,2.2vw,30px)/1.1 var(--f-titel)}
.notizen a:hover{background:var(--karte)}
.notizen .mini{text-align:right}

/* Seitenkopf */
.seitenkopf{padding:clamp(32px,5vw,72px) var(--rand) clamp(20px,3vw,36px)}
.seitenkopf h1{font-size:clamp(40px,5.2vw,84px);margin:12px 0 14px}
.seitenkopf p{max-width:600px;margin:0}
.dunkel-kopf{background:var(--tinte);color:var(--papier);padding-bottom:clamp(40px,6vw,80px)}
.dunkel-kopf h1 i{color:var(--gelb)}

/* Looks */
.filter{padding:0 var(--rand);display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px}
.fz{display:flex;flex-direction:column;gap:10px}
.fz input[type=range]{accent-color:var(--magenta);width:100%}
.chip.farbe-black::before,.chip.farbe-brown::before,.chip.farbe-camel::before,.chip.farbe-light::before,.chip.farbe-grey::before,.chip.farbe-colour::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px;border:1px solid var(--linie)}
.farbe-black::before{background:#15121C}.farbe-brown::before{background:#5B3A26}.farbe-camel::before{background:#C19A6B}.farbe-light::before{background:#F4EFE3}.farbe-grey::before{background:#8A8C93}.farbe-colour::before{background:conic-gradient(#F2523F,#F7C800,#A8EDD0,#2F45E8,#DC00F4,#F2523F)}
.treffer{grid-column:1/-1;margin:0}
.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px)}
.lk{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.lk:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(21,18,28,.12)}
.lk[hidden]{display:none}
.lk-kopf{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px}
.lk-t{font:700 20px/1.1 var(--f-titel)}
.lk-blk{position:relative;background:var(--blk);aspect-ratio:5/4;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.lk-foto{width:100%;height:100%;object-fit:cover}
.lk-teile{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lk-teile img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;background:#fff}
.lk-fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px}
.lk-fuss .mini{color:var(--grau);font-size:10px}
.lk-preis{font:700 18px/1 var(--f-text);white-space:nowrap}
.leer{font-size:18px}

/* Beitrag */
.b-kopf{display:grid;grid-template-columns:1fr 1fr;min-height:min(86svh,860px);border-bottom:1px solid var(--linie)}
.b-titel{padding:clamp(28px,5vw,80px) var(--rand);display:flex;flex-direction:column;justify-content:center}
.b-meta{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px}
.b-meta .mini{color:var(--grau)}
.b-titel h1{font-size:clamp(40px,5.4vw,88px)}
.b-kurz{font-size:20px;max-width:560px;margin:20px 0 4px}
.b-bild{margin:0;position:relative;background:var(--blk);padding:clamp(16px,3vw,44px)}
.b-bild img{width:100%;height:100%;object-fit:cover}
.b-bild figcaption{position:absolute;right:clamp(18px,3vw,46px);bottom:clamp(18px,3vw,46px);background:rgba(21,18,28,.7);color:#fff;font-size:11px;padding:4px 8px}
.b-urteil{background:var(--blk);color:var(--blk-ink);padding:clamp(28px,5vw,64px) var(--rand)}
.b-urteil p{font:700 clamp(24px,3vw,44px)/1.15 var(--f-titel);max-width:1100px;margin:12px 0 0}
.b-text{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,80px) 16px;font-size:19px;line-height:1.7}
.b-text h2{font-size:clamp(28px,3vw,40px);margin:48px 0 14px}
.b-text blockquote{margin:36px 0;padding:0 0 0 22px;border-left:6px solid var(--magenta);font:700 clamp(24px,2.6vw,34px)/1.2 var(--f-titel)}
.b-text a{text-decoration-color:var(--magenta);text-decoration-thickness:2px}
.qref{font-size:11px;vertical-align:super;text-decoration:none;color:var(--magenta);font-weight:700;margin-left:2px}
body .kino-frame{--kino-accent:#DC00F4;--kino-on-accent:#fff;--kino-ink:#15121C}
.b-film{max-width:1100px;margin:0 auto 40px;padding:0 var(--rand);display:flex;flex-direction:column;gap:12px}
.quellen{max-width:720px;margin:0 auto;padding:20px 16px 60px;font-size:13px;color:var(--grau)}
.quellen ol{padding-left:20px}
.duell{max-width:900px;margin:0 auto clamp(30px,5vw,70px);padding:clamp(24px,4vw,48px);background:var(--tinte);color:var(--papier);text-align:center}
.duell h2{font-size:clamp(28px,3.4vw,46px);margin:12px 0 24px}
.duell h2 i{color:var(--gelb)}
.wahlen{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wahl{min-height:64px;border:2px solid var(--papier);background:none;font:700 16px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.wahl:hover,.wahl[aria-pressed=true]{background:var(--magenta);border-color:var(--magenta);color:#fff}
.duell .ergebnis{color:var(--papier);opacity:.8}

/* Shop the look */
.stl-in{display:grid;grid-template-columns:1fr 1.1fr}
.stl-brett{position:relative;background:var(--blk);color:var(--blk-ink);padding:clamp(20px,3vw,44px)}
.stl-brett-t{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px}
.stl-brett-t h2{font-size:clamp(32px,3.8vw,54px)}
.stl-brett-t h2 i{color:inherit;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:.09em}
.stl-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stl-st{position:relative;margin:0;background:#fff;aspect-ratio:3/4;transition:opacity .25s,transform .25s var(--ease)}
.stl-st img{width:100%;height:100%;object-fit:cover}
.stl-st b{position:absolute;left:8px;top:8px;width:30px;height:30px;border-radius:50%;background:var(--tinte);color:#fff;display:grid;place-items:center;font:700 12px/1 var(--f-text)}
.stl-st.aus{opacity:.25;transform:scale(.96)}
.stl-st.hell{outline:3px solid var(--magenta);outline-offset:2px}
.stempel{position:absolute;right:clamp(16px,2.5vw,36px);bottom:clamp(16px,2.5vw,36px);width:96px;height:96px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;text-align:center;transform:rotate(-12deg);opacity:.75}
.stempel span{font:700 13px/1 var(--f-text);letter-spacing:.12em}
.stempel small{position:absolute;bottom:16px;font-size:7.5px;letter-spacing:.08em;text-transform:uppercase}
.stl-liste{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column}
.stl-liste ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinte)}
.stl-z{display:grid;grid-template-columns:28px 36px 1fr auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--linie);transition:opacity .2s}
.stl-z.aus{opacity:.4}
.an input{position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer}
.an{position:relative;display:block;width:24px;height:24px;margin-top:2px}
.an span{display:block;width:24px;height:24px;border:2px solid var(--tinte);background:#fff}
.an input:checked+span{background:var(--tinte);box-shadow:inset 0 0 0 4px #fff}
.an input:focus-visible+span{outline:3px solid var(--magenta);outline-offset:2px}
.znr{font:700 18px/1.2 var(--f-text);font-variant-numeric:tabular-nums}
.zt{display:flex;flex-direction:column;gap:3px}
.zt .mini{color:var(--grau);font-size:10px}
.zn{font-weight:700;font-size:16px;line-height:1.25}
.zw{font-size:13px;color:var(--grau);line-height:1.4}
.zr{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.zp{font-weight:700;white-space:nowrap}
.gr{border:1.5px solid var(--tinte);background:#fff;padding:6px 8px;font:600 13px var(--f-text);max-width:110px}
.gr.fehlt{border-color:var(--rot);box-shadow:0 0 0 2px var(--rot)}
.gr-eine{font-size:12px;color:var(--grau)}
.zshop{font:700 11px/1 var(--f-text);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid var(--magenta);padding-bottom:2px;white-space:nowrap}
.stl-summe{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:20px 0 4px}
.proshop{display:flex;flex-direction:column;font-size:13px;margin-top:6px}
.stl-total{text-align:right}
.stl-total span{display:block;font:700 clamp(22px,2.4vw,30px)/1.1 var(--f-text)}
.stl-total small{color:var(--grau)}
.stl-knoepfe{display:grid;grid-template-columns:1.5fr 1fr;gap:10px;margin:18px 0 10px}

/* Discover */
.disco{padding:clamp(18px,2.5vw,36px) var(--rand) 80px;display:flex;flex-direction:column;align-items:center;text-align:center}
.disco-kopf h1{font-size:clamp(36px,4.6vw,72px);margin:10px 0 8px}
.fortschritt{width:min(420px,80vw);height:4px;background:var(--linie);margin:18px auto 0}
.fortschritt i{display:block;height:100%;width:0;background:var(--magenta);transition:width .3s}
.stapel{position:relative;width:min(380px,88vw,calc((100svh - 450px) * .7));aspect-ratio:3/4.3;margin:24px 0}
.dk{position:absolute;inset:0;background:var(--karte);border:1px solid var(--linie);box-shadow:0 26px 60px rgba(21,18,28,.18);display:flex;flex-direction:column;text-align:left;user-select:none;touch-action:none;cursor:grab;transition:transform .45s var(--ease),opacity .45s}
.dk:active{cursor:grabbing}
.dk.zieht{transition:none}
.dk-bild{position:relative;flex:1;overflow:hidden;background:var(--blk)}
.dk-bild>img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.dk-teile{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:6px}
.dk-teile img{width:52px;height:64px;object-fit:cover;background:#fff;border:2px solid #fff}
.dk-text{padding:14px 16px 16px}
.dk-text b{display:block;font:700 22px/1.08 var(--f-titel);margin-top:4px}
.dk-stempel{position:absolute;top:24px;padding:8px 14px;border:4px solid;font:700 28px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:rotate(-14deg);background:rgba(255,255,255,.85)}
.dk-stempel.ja{left:20px;color:#0E9F6E}.dk-stempel.nein{right:20px;color:var(--rot);transform:rotate(14deg)}.dk-stempel.super{left:50%;margin-left:-70px;top:auto;bottom:120px;color:var(--magenta);transform:none}
.dk:nth-last-child(2){transform:scale(.95) translateY(16px)}
.dk:nth-last-child(n+3){transform:scale(.9) translateY(32px);opacity:.6}
.disco-knoepfe{display:flex;gap:22px;align-items:center}
.rund{width:66px;height:66px;border-radius:50%;border:2px solid var(--tinte);background:var(--karte);font-size:24px;transition:transform .2s var(--ease),background .2s}
.rund:hover{transform:scale(1.08)}
.rund.super{width:52px;height:52px;font-size:20px;color:var(--magenta);border-color:var(--magenta)}
.rund.ja:hover{background:#0E9F6E;color:#fff;border-color:#0E9F6E}.rund.nein:hover{background:var(--rot);color:#fff;border-color:var(--rot)}
.geschmack{width:100%;max-width:1200px;margin-top:20px;text-align:left}
.geschmack h2{font-size:clamp(36px,5vw,72px);margin:10px 0 24px}
.achsen{display:grid;gap:18px;margin-bottom:40px;max-width:720px}
.achse{display:grid;grid-template-columns:110px 1fr 110px;gap:14px;align-items:center;font:700 13px/1 var(--f-text);text-transform:uppercase;letter-spacing:.08em}
.achse span:last-child{text-align:right}
.achse-balken{position:relative;height:14px;background:var(--papier-2);border:1px solid var(--linie)}
.achse-balken i{position:absolute;top:-6px;width:24px;height:24px;border-radius:50%;background:var(--magenta);margin-left:-12px;transition:left .8s var(--ease)}
.geschmack h3{margin:0 0 14px}
.klein-raster{grid-template-columns:repeat(3,1fr)}

/* Build */
.bauen{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(20px,3vw,48px);padding:0 var(--rand) 80px;align-items:start}
.bauen-wahl>.chips{margin-bottom:22px}
.reihe{margin-bottom:26px}
.reihe h3{font:700 11px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.reihe-band{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.wahlkarte{flex:0 0 150px;scroll-snap-align:start;border:2px solid transparent;background:var(--karte);padding:0;text-align:left;transition:border-color .2s,transform .2s var(--ease)}
.wahlkarte img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#fff}
.wahlkarte span{display:block;padding:8px 9px;font-size:12px;line-height:1.3}
.wahlkarte b{display:block;font-size:13px}
.wahlkarte[aria-pressed=true]{border-color:var(--magenta);transform:translateY(-4px)}
.puppe{position:sticky;top:90px;background:var(--karte);border:1px solid var(--linie);padding:18px;display:flex;flex-direction:column;gap:12px}
.puppe-kopf{display:flex;justify-content:space-between;align-items:center}
.puppe-feld{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:260px;background:var(--minze);padding:12px;align-content:start}
.puppe-feld figure{margin:0;position:relative;background:#fff;aspect-ratio:3/4}
.puppe-feld figure img{width:100%;height:100%;object-fit:cover}
.puppe-feld figure b{position:absolute;left:6px;top:6px;width:26px;height:26px;border-radius:50%;background:var(--tinte);color:#fff;font:700 11px/26px var(--f-text);text-align:center}
.puppe-feld .platz{grid-column:1/-1;align-self:center;text-align:center;padding:40px 10px;font:700 18px/1.2 var(--f-titel)}
.puppe-summe{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--tinte);padding-top:10px}
.puppe-summe b{font-size:20px}

/* Watch */
.watch{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px)}
.wk{display:flex;flex-direction:column;gap:14px}
.wk:first-child{grid-column:1/-1}
.wk-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.wk-t h2{font-size:clamp(26px,2.8vw,40px);flex:1 1 100%}
.wk-t p{margin:0;flex:1}

/* Bag und Kasse */
.kasse{padding:0 var(--rand) 80px}
.schritte{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 26px;counter-reset:s}
.schritte li{flex:1;border-top:4px solid var(--linie);padding-top:10px;font:700 12px/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau);counter-increment:s}
.schritte li::before{content:counter(s,decimal-leading-zero) " "}
.schritte li[aria-current],.schritte li.erledigt{border-color:var(--magenta);color:var(--tinte)}
.kasse-in{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(20px,3vw,48px);align-items:start}
.kasse-summe{position:sticky;top:90px;background:var(--karte);border:1px solid var(--linie);padding:20px;display:flex;flex-direction:column;gap:12px}
.summe-zeilen div,.summe-total{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0}
.summe-total{border-top:2px solid var(--tinte);padding-top:12px;font-weight:700;font-size:18px;flex-direction:column}
.summe-total small{font-weight:400;color:var(--grau);font-size:12px}
.shopblock{background:var(--karte);border:1px solid var(--linie);margin-bottom:18px}
.shopblock h3{display:flex;justify-content:space-between;align-items:center;font:700 13px/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;padding:14px 16px;border-bottom:1px solid var(--linie);margin:0}
.tz{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:14px 16px;border-bottom:1px solid var(--linie);align-items:start}
.tz:last-child{border-bottom:0}
.tz img{width:84px;aspect-ratio:3/4;object-fit:cover;background:#fff}
.tz-n{font-weight:700;line-height:1.25}
.tz-m{font-size:13px;color:var(--grau);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.tz-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.menge{display:inline-flex;border:1.5px solid var(--tinte)}
.menge button{width:30px;height:30px;border:0;background:none;font-weight:700}
.menge span{min-width:26px;text-align:center;line-height:30px;font-weight:700}
.weg{border:0;background:none;font-size:12px;text-decoration:underline;color:var(--grau);padding:0}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.felder label{display:flex;flex-direction:column;gap:6px;font:700 12px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase}
.felder .breit{grid-column:1/-1}
.felder input,.felder select{font:400 16px var(--f-text);padding:12px;border:1.5px solid var(--tinte);background:#fff;text-transform:none;letter-spacing:0}
.felder input.fehlt{border-color:var(--rot);box-shadow:0 0 0 2px var(--rot)}
.fehler{color:var(--rot);font-weight:700}
.versand label{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--karte);border:1px solid var(--linie);margin-bottom:10px}
.schritt h2{font-size:clamp(28px,3vw,40px);margin-bottom:8px}
.fertig{background:var(--minze);padding:clamp(24px,4vw,48px)}
.fertig h2{font-size:clamp(36px,5vw,64px);margin:10px 0 14px}
.shops-fertig{display:grid;gap:12px;margin:22px 0}
.shopfertig{background:#fff;padding:16px;display:flex;flex-direction:column;gap:10px}
.shopfertig ul{margin:0;padding-left:18px;font-size:14px}

/* Gemerkt, Textseiten */
.teile-raster{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:30px}
.tk{background:var(--karte);border:1px solid var(--linie);text-decoration:none;font-size:13px}
.tk img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#fff}
.tk span{display:block;padding:8px}
.gemerkt-looks{margin-bottom:40px}
.band>h2.mini{margin:0 0 14px}
.textseite{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,90px) 16px}
.textseite h1{font-size:clamp(40px,6vw,80px);margin:12px 0 20px}
.textseite h2{font-size:28px;margin:36px 0 10px}
.textseite li{margin-bottom:6px;font-size:15px}

/* Fuss */
.fuss{background:var(--tinte);color:var(--papier);padding:56px var(--rand) 32px;margin-top:40px}
.fuss-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.fuss img{filter:invert(1);height:46px;width:auto;margin-bottom:12px}
.fuss nav{display:flex;flex-direction:column;gap:10px}
.fuss nav a{text-decoration:none;font-size:15px}
.fuss nav a:hover{color:var(--gelb)}
.fuss .hinweis{grid-column:1/-1;font-size:12px;opacity:.7;margin:10px 0 0;max-width:900px}
.strich{grid-column:1/-1;height:6px;background:linear-gradient(90deg,var(--gelb) 0 20%,var(--minze) 20% 40%,var(--blau) 40% 60%,var(--rot) 60% 80%,var(--magenta) 80%)}

/* Meldung */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 60px));visibility:hidden;background:var(--tinte);color:var(--papier);padding:14px 20px;font-weight:700;font-size:14px;z-index:90;transition:transform .35s var(--ease);display:flex;gap:16px;align-items:center;max-width:calc(100vw - 32px)}
.toast.zeigt{transform:translate(-50%,0);visibility:visible}
.toast a{color:var(--gelb)}

/* Einblenden beim Scrollen */
.rein{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rein.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rein{opacity:1;transform:none}}

/* Tablet */
@media (max-width:1060px){
  .held{grid-template-columns:1fr}.held-rahmen{transform:none}.held-stempel{right:10px;bottom:-24px}
  .hauptnav{gap:16px}.looks,.raster3,.klein-raster{grid-template-columns:repeat(2,1fr)}
  .welten{grid-template-columns:repeat(2,1fr)}.filme{grid-template-columns:repeat(2,1fr)}
  .tg-in,.stl-in,.b-kopf{grid-template-columns:minmax(0,1fr)}.b-bild{aspect-ratio:3/2}
  .teile-raster{grid-template-columns:repeat(3,1fr)}
}
/* Handy */
@media (max-width:760px){
  body{font-size:16px}
  .menue{display:grid}
  .hauptnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--papier);border-bottom:2px solid var(--tinte);padding:8px var(--rand)}
  .hauptnav.offen{display:flex}.hauptnav a{padding:14px 0;font-size:15px}
  .kopf{gap:10px}.marke img{height:30px}
  .looks,.raster3,.klein-raster,.welten,.filme,.watch,.filter{grid-template-columns:1fr}
  .welt:first-child{grid-column:auto}
  .disco-band{grid-template-columns:1fr}.deck{height:300px}
  .notizen a{grid-template-columns:56px 1fr}.notizen .mini{display:none}
  .stl-raster{grid-template-columns:repeat(2,1fr)}
  .stl-z{grid-template-columns:26px 30px 1fr;grid-template-areas:"a n t" "a n r"}
  .stl-z .an{grid-area:a}.stl-z .znr{grid-area:n}.stl-z .zt{grid-area:t}.stl-z .zr{grid-area:r;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left}
  .stl-knoepfe{grid-template-columns:1fr}
  .stl-summe{flex-direction:column;align-items:flex-start}.stl-total{text-align:left}
  .stempel{width:74px;height:74px}.stempel span{font-size:10px}
  .bauen,.kasse-in{grid-template-columns:minmax(0,1fr)}.puppe,.kasse-summe{position:static}
  .felder{grid-template-columns:1fr}
  .fuss-in{grid-template-columns:1fr}
  .tz{grid-template-columns:64px 1fr}.tz img{width:64px}.tz-r{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
  .teile-raster{grid-template-columns:repeat(2,1fr)}
  .achse{grid-template-columns:70px 1fr 70px;font-size:11px}
  .b-text{font-size:17px}
  .wahlen{grid-template-columns:1fr}
  .schritte li{font-size:10px;letter-spacing:.04em}
}

/* ================= Fassung 2 (01.11.2026): Modehaus statt Datenblatt =================
   Sonny: «überhaupt nicht fashionlike». Gemessen bei Prada, Jacquemus, Zara, SSENSE: grosses Bild, dünne Schrift, Papier und Schwarz, Farbe nur aus der Kleidung. */
:root{--papier:#F3EFE8;--papier-2:#E7E1D6;--karte:#F8F5F0;--tinte:#141210;--grau:#6F6A63;--linie:rgba(20,18,16,.14);
  --f-titel:Newsreader,"Times New Roman",serif;--f-text:Newsreader,Georgia,serif;--f-ui:Jost,"Futura","Helvetica Neue",sans-serif;--magenta:#141210}
body{font:400 18px/1.6 var(--f-text);background:var(--papier)}
h1,h2,h3{font-weight:300;letter-spacing:-.015em;line-height:1.04}
h1 i,h2 i,.lk-t i,.sk-t i,.notizen i,.ek-t i,.paar-t i{color:inherit;font-style:italic;font-weight:300}
.mini,.knopf,.chip,.hauptnav a,.tl,.lnk,.zshop,.zt .mini,.lk-fuss .mini,.stl-total small,.gr,.schritte li,.felder label,.toast{font-family:var(--f-ui)}
.mini{font-weight:400;font-size:11px;letter-spacing:.18em}
.code,.stempel,.proto,.strich,.sk-stil,.sk-film{display:none!important}
.nr{font:300 14px/1 var(--f-ui);letter-spacing:.12em}
.knopf{min-height:46px;font-weight:400;letter-spacing:.16em;font-size:12px;border-width:1px}
.knopf.haupt{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.knopf:hover{transform:none;opacity:.8}
.chip{border-width:1px;font-weight:400;letter-spacing:.12em;font-size:11px;padding:9px 16px}
:focus-visible{outline-color:var(--tinte)}
body .kino-frame{--kino-accent:#F3EFE8;--kino-on-accent:#141210;--kino-ink:#141210}
.lnk{font:400 12px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px;margin-right:28px}
.lnk.hell{color:var(--papier)}
/* Kopf */
.kopf{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px var(--rand);background:var(--papier);backdrop-filter:none;border-bottom:1px solid var(--linie)}
.kopf .marke img{height:52px;width:auto}
.hauptnav{margin:0;gap:28px}
.hauptnav a{font-weight:400;font-size:11.5px;letter-spacing:.18em;border:0;padding:6px 0}
.hauptnav a[aria-current]{border-bottom:1px solid var(--tinte)}
.tasten{justify-content:flex-end;align-items:center;gap:24px}
.tl{text-decoration:none;font:400 11.5px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase}
.tl b{font-weight:400}.tl b:not(:empty)::before{content:"("}.tl b:not(:empty)::after{content:")"}
/* Aufmacher: Bildpaar randlos */
.held2{position:relative;height:calc(100svh - 89px);min-height:520px;background:#111}
.paar{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;opacity:0;transition:opacity 1.6s ease;text-decoration:none;color:#fff}
.paar.an{opacity:1;z-index:1}
.paar img{width:100%;height:100%;object-fit:cover}
.paar.an img{animation:atmen 9s ease-out both}
@keyframes atmen{from{transform:scale(1.04)}to{transform:scale(1)}}
.paar::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent)}
.paar-text{position:absolute;left:var(--rand);bottom:clamp(28px,5vh,56px);z-index:2;display:flex;flex-direction:column;gap:12px;max-width:760px}
.paar-t{font:300 clamp(34px,4.4vw,68px)/1.02 var(--f-titel);letter-spacing:-.015em}
.unter{text-decoration:underline;text-underline-offset:6px}
.held-punkte{position:absolute;right:var(--rand);bottom:clamp(30px,5vh,58px);z-index:3;display:flex;gap:8px}
.held-punkte i{width:28px;height:1px;background:rgba(255,255,255,.45)}.held-punkte i.an{background:#fff}
.leitsatz{text-align:center;font:300 clamp(22px,2.2vw,30px)/1.3 var(--f-titel);margin:clamp(48px,7vw,96px) auto;max-width:900px;padding:0 16px}
/* Titelgeschichte */
.cover{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,90px);padding:0 var(--rand);align-items:center}
.cover-bild{display:block;aspect-ratio:4/5;overflow:hidden}
.cover-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cover-bild:hover img{transform:scale(1.03)}
.cover-text h2{font-size:clamp(40px,5vw,78px);margin:16px 0 18px}
.cover-text p{font-size:19px;max-width:520px;color:#3b3732}
.teile4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 28px}
.tk{display:flex;flex-direction:column;gap:5px;text-decoration:none;font-size:14px;background:none;border:0}
.tk img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#ECE8E1;margin-bottom:6px}
.tk .mini{font-size:10px;color:var(--grau)}
.tk-n{font-family:var(--f-ui);font-size:12.5px;line-height:1.35}
.tk-p{font-family:var(--f-ui);font-size:12.5px;color:var(--grau)}
/* Index */
.index-band{margin-top:clamp(64px,9vw,130px);background:var(--tinte);color:var(--papier);text-align:center;padding:clamp(64px,9vw,130px) var(--rand)}
.index-band h2{font-size:clamp(38px,5.4vw,84px);margin:22px auto 24px}
.index-band p{max-width:560px;margin:0 auto 34px;opacity:.8}
/* Redaktions-Raster */
.band-kopf{border-bottom:1px solid var(--tinte)}
.band-kopf h2{font-size:clamp(30px,3.4vw,48px)}
.band-kopf>a{font:400 11.5px/1 var(--f-ui);letter-spacing:.18em}
.ed-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px) clamp(16px,2vw,32px)}
.ek{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.ek-bild{overflow:hidden;aspect-ratio:3/4;background:var(--papier-2);margin-bottom:6px}
.ek-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ek:hover .ek-bild img{transform:scale(1.03)}
.ek-t{font:300 22px/1.12 var(--f-titel)}
.ek-k{font-size:15px;color:var(--grau);line-height:1.45}
.ek.gross{grid-column:span 2;grid-row:span 2}.ek.gross .ek-bild{aspect-ratio:4/5}.ek.gross .ek-t{font-size:clamp(30px,3vw,44px)}
.ek.mittel{grid-column:span 2}.ek.mittel .ek-bild{aspect-ratio:16/10}.ek.mittel .ek-t{font-size:26px}
.ek.klein .ek-k{display:none}
.archiv{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;margin-top:28px}
.ek[hidden]{display:none}
.rubriken{margin-bottom:8px}
/* Film */
.film-band{margin:clamp(40px,6vw,90px) 0;background:var(--tinte);padding:clamp(28px,4vw,64px) var(--rand) 28px}
.film-in{max-width:1300px;margin:0 auto}
.film-unter{max-width:1300px;margin:16px auto 0;color:var(--papier);font-size:16px}
.film-unter a{color:var(--papier)}
.tk-reihe{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
/* Fuss */
.fuss{background:var(--papier);color:var(--tinte);border-top:1px solid var(--tinte)}
.fuss-in{grid-template-columns:1.4fr 1fr 1fr}
.fuss nav a{font:400 12px/1.4 var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
.fuss nav a:hover{color:var(--grau)}
.fuss img{filter:none}
.brief p{margin:8px 0 14px;font-size:20px}
.brief-form{display:flex;gap:8px;max-width:420px}
.brief-form input{flex:1;border:0;border-bottom:1px solid var(--tinte);background:none;font:400 16px var(--f-text);padding:10px 0}
.fuss-marke{grid-column:1/-1;width:100%!important;height:auto!important;margin:40px 0 0}
.fuss .hinweis{opacity:.6}
/* Beitrag */
.b-kopf{grid-template-columns:1fr 1fr;border:0;min-height:calc(100svh - 89px)}
.b-titel h1{font-size:clamp(42px,5vw,84px);margin-top:18px}
.b-kurz{font-size:21px;color:#3b3732}
.b-meta{margin:0}
.b-bild{padding:0;background:none}
.b-bild figcaption{background:none;font:400 10px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;right:16px;bottom:14px}
.b-urteil{background:none;color:var(--tinte);border-top:1px solid var(--tinte);border-bottom:1px solid var(--tinte);margin:0 var(--rand);padding:clamp(36px,5vw,72px) 0;text-align:center}
.b-urteil p{font:300 italic clamp(26px,3vw,44px)/1.25 var(--f-titel);margin:16px auto 0;max-width:1000px}
.b-text{font-size:20px;line-height:1.72}
.b-text h2{font-size:clamp(28px,3vw,40px)}
.b-text blockquote{border:0;text-align:center;font:300 italic clamp(28px,3vw,42px)/1.2 var(--f-titel);padding:0;margin:56px -8%}
.qref{color:var(--grau)}
.b-film{margin-bottom:64px}
/* Shop the look ruhig */
.stl{background:none;border:0;border-top:1px solid var(--tinte)}
.stl-kopf{border:0;padding:24px 0 8px}
.stl-in{grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px)}
.stl-brett{background:none;color:var(--tinte);padding:0}
.stl-brett-t h2{font-size:clamp(34px,3.6vw,56px)}
.stl-brett-t h2 i{text-decoration:none}
.stl-raster{grid-template-columns:repeat(2,1fr);gap:14px}
.stl-st{background:#ECE8E1}
.stl-st b{width:auto;height:auto;border-radius:0;background:none;color:var(--tinte);font:400 11px var(--f-ui);letter-spacing:.12em;left:10px;top:10px}
.stl-st.hell{outline:1px solid var(--tinte)}
.stl-liste{padding:0}
.stl-liste ol{border-top:1px solid var(--tinte)}
.znr{font:400 12px/1.6 var(--f-ui);letter-spacing:.1em}
.zn{font:400 17px/1.3 var(--f-text)}
.zp{font:400 14px var(--f-ui)}
.zshop{border-bottom-color:var(--tinte);font-weight:400;letter-spacing:.14em}
.an span{border-width:1px}
.stl-total span{font:300 30px/1.1 var(--f-titel)}
.duell{background:none;color:var(--tinte);border:1px solid var(--tinte)}
.duell h2 i{color:inherit}
.wahl{border:1px solid var(--tinte);font:400 12px var(--f-ui);letter-spacing:.18em}
.wahl:hover,.wahl[aria-pressed=true]{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.duell .ergebnis{color:var(--grau)}
/* Karten anderer Seiten ruhig */
.lk{border:0;background:none}.lk:hover{box-shadow:none}
.lk-t{font:300 21px/1.12 var(--f-titel)}
.lk-blk{background:var(--papier-2)}
.lk-preis{font:400 14px var(--f-ui)}
.seitenkopf h1{font-weight:300}
.dunkel-kopf h1 i{color:inherit}
.dk-text b{font:300 24px/1.1 var(--f-titel)}
.rund{border-width:1px;background:none}
.rund.super{color:var(--tinte);border-color:var(--tinte)}
.achse-balken i{background:var(--tinte)}
.fortschritt i{background:var(--tinte)}
.puppe-feld{background:var(--papier-2)}
.wahlkarte[aria-pressed=true]{border-color:var(--tinte)}
.puppe-feld figure b{background:none;color:var(--tinte);font:400 10px var(--f-ui)}
.fertig{background:var(--papier-2)}
.taste b{background:var(--tinte)}
@media (max-width:1060px){.cover{grid-template-columns:1fr}.ed-raster,.archiv{grid-template-columns:repeat(2,1fr)}.tk-reihe{grid-template-columns:repeat(4,1fr)}.b-kopf{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .kopf{grid-template-columns:auto 1fr auto;padding:12px 16px}.kopf .marke{grid-column:1;grid-row:1}.kopf .marke img{height:34px}
  .tasten{grid-column:3;gap:14px}.tl:first-child{display:none}
  .hauptnav{grid-column:1/-1}
  .paar{grid-template-columns:1fr}.paar img:nth-child(2){display:none}
  .held2{height:78svh}
  .ed-raster,.archiv{grid-template-columns:1fr 1fr;gap:28px 14px}.ek.gross,.ek.mittel{grid-column:1/-1}.ek-t{font-size:19px}
  .teile4{grid-template-columns:repeat(2,1fr)}.tk-reihe{grid-template-columns:repeat(2,1fr)}
  .b-text blockquote{margin:40px 0}
  .stl-in{grid-template-columns:minmax(0,1fr)}
}

/* ================= Fassung 3 (01.11.2026): Allure-Mischung nach Sonnys Screenshots =================
   Muster-Rand (Couture), Blumen über dem Kopf (Elite), Tafel-Bahn mit Nummernquadrat und kursiver zweiter Zeile (Startseite). Playfair Display wie Allure. */
:root{--f-titel:"Playfair Display",Georgia,serif;--papier:#FFFFFF;--karte:#FFFFFF;--papier-2:#F1EFEB}
body{background:#ECEBE8 url(plissee_rand.png) repeat;background-size:200px 400px}
.kasten{max-width:min(1320px,88vw);margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
h1,h2,h3,.ek-t,.lk-t,.paar-t,.sv-t,.tafel-t,.stl-total span,.dk-text b{font-family:var(--f-titel);font-weight:400;letter-spacing:0}
h1 i,h2 i,.ek-t i,.lk-t i,.sv-t i,.tafel-t i{font-weight:400}
/* Kopf mit Blumen */
.kopf3{position:relative;z-index:40}
.blumen{position:relative;background:#111 url(blumen_29099663.jpg) center 40%/cover}
.blumen::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,12,8,.55),rgba(8,12,8,.2) 70%)}
.kopf3-in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:30px var(--rand) 26px;color:#fff}
.marke3{display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;color:#fff}
.marke3 img{width:clamp(260px,34vw,560px);height:auto}
.unterzeile{display:flex;align-items:center;gap:16px;font:italic 400 clamp(15px,1.3vw,19px)/1 var(--f-titel)}
.unterzeile::before,.unterzeile::after{content:"";width:clamp(40px,7vw,120px);height:1px;background:rgba(255,255,255,.75)}
.kopf3 .tl{color:#fff}
.kopf3 .tasten{justify-content:flex-end;gap:24px}
.kopf3 .menue svg{stroke:#fff}
.hauptnav.schwarz{display:flex;justify-content:center;gap:clamp(18px,3vw,46px);background:#000;padding:22px 16px;margin:0;position:sticky;top:0}
.hauptnav.schwarz a{color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.2em}
.hauptnav.schwarz a:hover,.hauptnav.schwarz a[aria-current]{color:#fff;border:0}
.kopf3{position:static}.hauptnav.schwarz{z-index:45}
/* Tafel-Bahn */
.bahn3{position:relative;overflow:hidden;height:max(460px,calc(100vh - 290px));background:#fff;margin-top:6px}
.bahn3-spur{display:flex;gap:6px;height:100%;transition:transform .9s cubic-bezier(.22,.61,.12,1)}
.tafel{position:relative;flex:0 0 min(70%,1100px);height:100%;overflow:hidden;color:#fff;text-decoration:none;background:#111}
.tafel img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,.61,.12,1),filter .6s}
.tafel:not(.aktiv) img{filter:brightness(.7)}
.tafel.aktiv img{transform:scale(1.02)}
.tafel::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);pointer-events:none}
.tafel-nr{position:absolute;left:0;bottom:clamp(120px,17vh,170px);z-index:2;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;padding:12px 14px;font:400 30px/1 var(--f-titel)}
.tafel-nr b{font:400 13px/1.4 var(--f-ui);letter-spacing:.12em}
.tafel-t{position:absolute;left:clamp(20px,2.4vw,34px);bottom:clamp(24px,4vh,44px);z-index:2;display:flex;flex-direction:column;font:400 clamp(30px,3.6vw,58px)/1.1 var(--f-titel);max-width:90%}
.tafel-t i{font-style:italic}
.bahn3-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:56px;height:56px;border:0;background:none;color:#fff;font:300 64px/1 var(--f-titel)}
.bahn3-pfeil.links{left:clamp(8px,2vw,40px)}.bahn3-pfeil.rechts{right:clamp(8px,2vw,40px)}
.bahn3-punkte{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
.bahn3-punkte i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}.bahn3-punkte i.aktiv{background:#fff}
/* Stil-Kacheln */
.stil-reihe{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.stil-reihe.gross{grid-template-columns:repeat(3,1fr);gap:20px}
.stil-k{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4.4;overflow:hidden;text-decoration:none;color:#fff;padding:18px}
.stil-k img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.12,1)}
.stil-k::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.stil-k:hover img{transform:scale(1.05)}
.stil-n{position:relative;z-index:1;font:italic 400 clamp(24px,2vw,34px)/1 var(--f-titel)}
.stil-k .mini{position:relative;z-index:1;margin-top:8px;opacity:.85}
.index-band{background:#000}
.fuss{background:#fff}
/* Stil-Seiten: drei andere Gestaltungen */
.sv-wechsel{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;padding:18px 16px;border-bottom:1px solid var(--linie)}
.sv-wechsel a{font:400 11.5px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--grau)}
.sv-wechsel a[aria-current]{color:inherit;border-bottom:1px solid currentColor;padding-bottom:4px}
.sv-held{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:78vh;overflow:hidden}
.sv-held-in{position:relative;z-index:2;padding:var(--rand)}
.sv-held h1{font-size:clamp(64px,9vw,150px);line-height:.95;margin:14px 0 18px}
.sv-kurz{font:italic 400 clamp(20px,2vw,28px)/1.3 var(--f-titel)}
.sv-foto{margin:0;height:100%}.sv-foto img{width:100%;height:100%;object-fit:cover}
.sv-lauf{display:none}
.sv-text{max-width:760px;margin:0 auto;padding:clamp(48px,6vw,90px) 16px;text-align:center;font-size:22px;line-height:1.6}
.sv-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sv-look{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.sv-bild{aspect-ratio:3/4;overflow:hidden}.sv-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.sv-look:hover .sv-bild img{transform:scale(1.04)}
.sv-t{font-size:24px;line-height:1.15}
.sv-t i{font-style:italic}
.v-atelier .kasten{background:#F6F1E9}
.v-atelier .sv-held{grid-template-columns:1fr 1fr;padding:clamp(24px,4vw,60px);gap:clamp(24px,4vw,60px)}
.v-atelier .sv-foto{padding:14px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08);height:auto;aspect-ratio:4/5}
.v-atelier .sv-held h1{font-style:italic}
.v-atelier .sv-bild{padding:10px;background:#fff}
.v-noir .kasten{background:#0B0B0B;color:#F2EEE8}
.v-noir .sv-held{grid-template-columns:1fr;min-height:92vh}
.v-noir .sv-foto{position:absolute;inset:0}.v-noir .sv-foto img{opacity:.55}
.v-noir .sv-held-in{text-align:center;justify-self:center}
.v-noir .sv-held h1{font-size:clamp(80px,13vw,220px);font-style:italic}
.v-noir .band-kopf{border-color:#F2EEE8}.v-noir .tk .mini,.v-noir .tk-p{color:#A39D94}.v-noir .sv-wechsel{border-color:rgba(255,255,255,.15)}.v-noir .sv-wechsel a{color:#8d877f}.v-noir .sv-wechsel a[aria-current]{color:#fff}
.v-noir .fuss{background:#0B0B0B;color:#F2EEE8;border-color:#333}.v-noir .fuss img{filter:invert(1)}.v-noir .brief-form input{border-color:#F2EEE8;color:#F2EEE8}
.v-kinetik .sv-held{grid-template-columns:1fr 1fr;align-items:end}
.v-kinetik .sv-lauf{display:block;position:absolute;top:8%;left:0;white-space:nowrap;z-index:1;pointer-events:none}
.v-kinetik .sv-lauf span{display:inline-block;font:700 clamp(90px,14vw,230px)/1 var(--f-ui);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px #141210;will-change:transform}
.v-kinetik .sv-held h1{font:600 clamp(60px,8vw,130px)/.9 var(--f-ui);text-transform:uppercase;letter-spacing:-.03em}
.v-kinetik .sv-foto{transform:rotate(2deg) translateY(-6%);height:86%;margin-right:var(--rand);box-shadow:0 30px 60px rgba(0,0,0,.2)}
.v-kinetik .sv-looks .sv-look:nth-child(3n+2){transform:translateY(60px)}
.v-kinetik .sv-text{font:400 26px/1.4 var(--f-ui)}
@media (max-width:1060px){.stil-reihe{grid-template-columns:repeat(3,1fr)}.tafel{flex-basis:84%}.sv-looks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  body{background:#fff}.kasten{max-width:none}.fuss-in{grid-template-columns:minmax(0,1fr)}.kopf3-in{grid-template-columns:1fr auto;padding:18px 16px}.kopf3-links{display:none}.marke3{align-items:flex-start}.marke3 img{width:200px}.unterzeile{font-size:13px}.unterzeile::before{display:none}
  .hauptnav.schwarz{display:none}.hauptnav.schwarz.offen{display:flex;flex-direction:column;align-items:center;position:static}
  .bahn3{height:70svh}.tafel{flex-basis:88%}.bahn3-pfeil{display:none}
  .stil-reihe,.stil-reihe.gross{grid-template-columns:repeat(2,1fr)}
  .sv-held,.v-atelier .sv-held,.v-kinetik .sv-held{grid-template-columns:1fr}.sv-looks{grid-template-columns:1fr}.v-kinetik .sv-looks .sv-look:nth-child(3n+2){transform:none}.v-kinetik .sv-foto{transform:none;margin:0 16px;height:auto}
}

/* ================= Fassung 4 (01.11.2026): nach Sonnys Kritik zu Fassung 3 ================= */
/* 1. Rand: scharfes Vektor-Muster aus dem echten F.H-Monogramm statt verpixeltem Plissee */
body{background:#EDEBE6 url(rand_monogramm.svg) repeat;background-size:128px 128px}
/* 7. Übersichten schwarz-weiss, beim Darüberfahren in Farbe; Beitrag und geöffnete Stilwelt in Farbe */
.sk-bild img,.ek-bild img,.stil-k img,.tafel img,.cover-bild img,.lk-foto,.dk-bild>img,.sv-look .sv-bild img{filter:grayscale(1) contrast(1.04);transition:filter .7s var(--ease),transform 1s var(--ease)}
.sk:hover .sk-bild img,.sk:focus-visible .sk-bild img,.ek:hover .ek-bild img,.ek:focus-visible .ek-bild img,.stil-k:hover img,.stil-k:focus-visible img,.tafel.aktiv:hover img,.cover-bild:hover img,.lk:hover .lk-foto,.dk:hover .dk-bild>img,.sv-look:hover .sv-bild img{filter:grayscale(0) contrast(1)}
.tafel:not(.aktiv) img{filter:grayscale(1) brightness(.7)}
.b-bild img,.sv-foto img{filter:none}
@media (hover:none){.dk-bild>img{filter:none}}
/* 3. Umfrage erklärt */
.duell-info{max-width:520px;margin:-10px auto 22px}.duell-info a{color:inherit}
.duell .ergebnis b{font-weight:600}
/* Stempel mit Monogramm */
.stempel img{width:46px;height:46px}
/* 4.-6. Fuss: schwarz, Original-Logo mit gelber 4 und magenta Punkt */
.fuss4{background:#0B0B0B;color:#EDEBE6;padding:clamp(56px,7vw,96px) var(--rand) 28px;margin-top:clamp(48px,6vw,90px)}
.fuss4-marke{display:flex;flex-direction:column;align-items:center;gap:18px;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid rgba(237,235,230,.16)}
.fuss4-marke img{width:clamp(240px,34vw,480px);height:auto;display:block}
.fuss4 .unterzeile{color:rgba(237,235,230,.75)}
.fuss4 .unterzeile::before,.fuss4 .unterzeile::after{background:rgba(237,235,230,.35)}
.fuss4-spalten{display:grid;grid-template-columns:repeat(3,1fr) 1.5fr;gap:32px;padding:clamp(36px,4vw,56px) 0}
.fuss4 nav{display:flex;flex-direction:column;gap:12px}
.fuss4 .mini{color:#F7C800;margin-bottom:6px;letter-spacing:.2em}
.fuss4 nav a{color:#EDEBE6;text-decoration:none;font:400 15px/1.3 var(--f-titel);transition:color .2s}
.fuss4 nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:#DC00F4;text-underline-offset:5px}
.fuss4 .brief p{font:italic 400 22px/1.3 var(--f-titel);margin:4px 0 16px}
.fuss4 .brief-form{display:flex;border-bottom:1px solid #EDEBE6}
.fuss4 .brief-form input{flex:1;min-width:0;background:none;border:0;color:#EDEBE6;padding:12px 0;font:400 15px var(--f-ui)}
.fuss4 .brief-form input::placeholder{color:rgba(237,235,230,.5)}
.fuss4 .brief-form button{background:none;border:0;color:#EDEBE6;font:400 11px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.fuss4 .brief-form button:hover{color:#F7C800}
.fuss4-unten{display:flex;align-items:center;gap:18px;padding-top:22px;border-top:1px solid rgba(237,235,230,.16)}
.fuss4-mono{width:40px;height:40px;flex:none}
.fuss4-unten p{margin:0;font:400 12px/1.5 var(--f-ui);color:rgba(237,235,230,.55);max-width:820px}
.v-noir .fuss4{border-top:1px solid #333}
/* 9. Wear or Skip: grosse Karte, gleich grosse Knöpfe mit Wort */
.stapel{width:min(560px,92vw,calc((100svh - 330px) * .74));aspect-ratio:4/5.4;margin:20px 0 26px}
.dk-teile img{width:64px;height:80px}
.dk-text b{font-size:28px}
.disco-knoepfe{display:flex;gap:clamp(24px,5vw,56px);align-items:flex-start;justify-content:center}
.dkn{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--tinte)}
.dkn .kreis{width:72px;height:72px;border-radius:50%;border:1px solid var(--tinte);display:grid;place-items:center;transition:background .2s,color .2s,transform .2s var(--ease)}
.dkn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dkn:hover .kreis,.dkn:focus-visible .kreis{background:var(--tinte);color:#fff;transform:translateY(-2px)}
.dkn.super:hover .kreis{background:#DC00F4;border-color:#DC00F4}
.dkn .mini{font-size:11px}
/* 11. Build: ganzer Katalog */
.bauen4{display:grid;grid-template-columns:230px minmax(0,1fr) 330px;gap:clamp(18px,2.5vw,36px);padding:0 var(--rand) 80px;align-items:start}
.filter4{position:sticky;top:80px;display:flex;flex-direction:column;gap:18px}
.filter4 .chips{display:flex;flex-wrap:wrap;gap:6px}
.filter4 .chip{padding:7px 11px;font-size:10.5px}
.filter4 .fz{display:flex;flex-direction:column;gap:8px}
.suche4{display:flex;flex-direction:column;gap:8px}
.suche4 input,#sort4{border:0;border-bottom:1px solid var(--tinte);background:none;padding:8px 0;font:400 15px var(--f-ui);border-radius:0}
.filter4 input[type=range]{width:100%;accent-color:#0B0B0B}
.farbe-black i,.farbe-brown i,.farbe-camel i,.farbe-light i,.farbe-grey i,.farbe-colour i{display:none}
.kk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 16px}
.kk{display:flex;flex-direction:column;gap:5px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.kk-bild{position:relative;aspect-ratio:3/4;background:#F4F2EE;overflow:hidden;outline:1px solid transparent;transition:outline-color .2s}
.kk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kk:hover .kk-bild img{transform:scale(1.04)}
.kk-plus{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font:300 20px/1 var(--f-ui);box-shadow:0 2px 10px rgba(0,0,0,.12);transition:background .2s,color .2s}
.kk:hover .kk-plus{background:#0B0B0B;color:#fff}
.kk[aria-pressed=true] .kk-bild{outline:2px solid #0B0B0B;outline-offset:-2px}
.kk[aria-pressed=true] .kk-plus{background:#0B0B0B;color:#fff}
.kk .mini{font-size:10px;color:var(--grau)}
.kk-n{font:400 15px/1.25 var(--f-titel)}
.kk-p{font:400 13px var(--f-ui)}
.katalog4 .treffer{margin:0 0 14px}
.mehr4{margin:34px auto 0;display:block}
.puppe4{position:sticky;top:80px;border:1px solid var(--linie);padding:18px;display:flex;flex-direction:column;gap:12px;background:#fff}
.slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.slots li{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linie);min-height:54px}
.slots li .mini{font-size:9.5px;color:var(--grau)}
.slot-inhalt{font:italic 400 13px var(--f-titel);color:#B4AEA5;display:flex;align-items:center;gap:10px;position:relative}
.slots li.voll .slot-inhalt{color:var(--tinte);font:400 12.5px/1.3 var(--f-ui)}
.slot-inhalt img{width:42px;height:54px;object-fit:cover;flex:none;background:#F4F2EE}
.slot-inhalt b{font-weight:500}
.slot-weg{margin-left:auto;background:none;border:0;font:300 22px/1 var(--f-ui);cursor:pointer;color:var(--grau)}
.puppe4 .knopf{width:100%}
/* 12. Teilen-Bilder */
.tb-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 16px}
.tb{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.tb img{width:100%;aspect-ratio:9/16;object-fit:cover;box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 30px rgba(0,0,0,.08);transition:transform .5s var(--ease)}
.tb:hover img{transform:translateY(-4px)}
@media (max-width:1060px){.bauen4{grid-template-columns:200px minmax(0,1fr)}.puppe4{grid-column:1/-1;position:static}.fuss4-spalten{grid-template-columns:repeat(3,1fr)}.fuss4 .brief{grid-column:1/-1}}
@media (max-width:760px){
  .bauen4{grid-template-columns:minmax(0,1fr)}.filter4{position:static}.kk-raster{grid-template-columns:repeat(2,1fr)}
  .fuss4-spalten{grid-template-columns:1fr 1fr}.fuss4 .brief{grid-column:1/-1}
  .tb-raster{grid-template-columns:repeat(2,1fr)}
  .stapel{width:min(92vw,calc((100svh - 300px) * .74))}
}
/* 5. Weitere Logo-Fassungen: Hausmarke auf About, Monogramm im Rand, Fuss, Stempel und auf den Teilen-Bildern */
.logo-buehne{margin:0 auto 40px;max-width:360px}
.logo-buehne img{width:100%;height:auto;display:block;box-shadow:0 30px 60px rgba(0,0,0,.18)}
/* Wear or Skip am Bildschirm: Karte rechts so gross wie das Fenster, Erklärung und Knöpfe links */
@media (min-width:1000px){
  .disco{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kopf stapel" "knoepfe stapel" "geschmack geschmack";column-gap:clamp(40px,5vw,90px);align-items:center;text-align:left;padding-top:clamp(24px,3vw,44px)}
  .disco-kopf{grid-area:kopf;align-self:end}
  .disco-kopf h1{font-size:clamp(48px,5vw,84px);line-height:1}
  .disco-kopf .klein{font-size:16px;max-width:420px}
  .disco .fortschritt{margin:22px 0 0;max-width:420px}
  .stapel{grid-area:stapel;width:min(580px,calc((100svh - 120px) * .74));margin:0}
  .disco-knoepfe{grid-area:knoepfe;align-self:start;justify-content:flex-start;margin-top:34px}
  .geschmack{grid-area:geschmack}
}
h1.leitsatz{font-weight:300}
@media (max-width:760px){.stapel{width:min(86vw,calc((100svh - 260px) * .74))}.disco{padding-top:10px}.disco-kopf h1{font-size:34px}}

/* ================= Fassung 5 (01.11.2026, Sonny: «diese Linien waren schon schön [...] kombiniert mit dem FH, damit es Tiefe bekommt») ================= */
body{background:#ECE9E3 url(rand_falten_fh.svg) repeat;background-size:240px 640px}
.kasten{box-shadow:0 0 0 1px rgba(40,30,20,.05),0 40px 90px rgba(60,48,36,.16),0 10px 26px rgba(60,48,36,.08)}
/* Fuss mit Leben: dunkle Falten, Licht von oben, gelbe Haarlinie, grosses Monogramm als Wasserzeichen */
.fuss4{position:relative;overflow:hidden;background:#0B0B0B url(falten_dunkel.svg) repeat;background-size:240px 640px;isolation:isolate}
.fuss4::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(247,200,0,.10),transparent 60%),radial-gradient(ellipse 50% 50% at 90% 100%,rgba(220,0,244,.10),transparent 70%),linear-gradient(180deg,rgba(11,11,11,.2),rgba(11,11,11,.75))}
.fuss4::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#F7C800 30%,#F7C800 70%,transparent)}
.fuss4-marke{position:relative}
.fuss4-marke::before{content:"";position:absolute;left:50%;top:50%;width:min(520px,80vw);aspect-ratio:1;transform:translate(-50%,-50%);background:url(logo_fh.svg) center/contain no-repeat;opacity:.035;z-index:-1;pointer-events:none}
.fuss4-spalten>*{position:relative;padding-left:16px}
.fuss4-spalten>*::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:linear-gradient(180deg,rgba(247,200,0,.6),rgba(237,235,230,.08))}
.fuss4 .brief{background:rgba(255,255,255,.035);border:1px solid rgba(237,235,230,.12);padding:20px 22px}
.fuss4 .brief::before{display:none}
.fuss4-mono{filter:drop-shadow(0 0 12px rgba(220,0,244,.35))}
/* Wear or Skip: Knöpfe unter der Karte wie bei Tinder, Wisch-Hinweis mit Vorführung */
.stapel-buehne{position:relative;display:flex;flex-direction:column;align-items:center}
.seite-wort{position:absolute;top:42%;font:400 11px var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--grau);opacity:0;transition:opacity .4s}
.seite-wort.links{right:calc(100% + 18px)}.seite-wort.rechts{left:calc(100% + 18px)}
.stapel-buehne .seite-wort{left:auto;right:auto}
.stapel-buehne{--b:0px}
.stapel-buehne .seite-wort.links{left:-92px}.stapel-buehne .seite-wort.rechts{right:-92px}
.stapel-buehne.hinweis .seite-wort,.stapel-buehne:hover .seite-wort{opacity:1}
.wisch-hinweis{position:absolute;left:50%;top:38%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;margin:0;padding:12px 18px;background:rgba(11,11,11,.82);color:#fff;font:400 12px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .4s}
.wisch-hinweis svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;animation:hand 2.4s ease-in-out infinite}
.stapel-buehne.hinweis .wisch-hinweis{opacity:1}
.dk.vorfuehren{animation:vorfuehren 2.4s cubic-bezier(.45,0,.2,1) .6s infinite}
@keyframes vorfuehren{0%,100%{transform:none}25%{transform:translateX(-46px) rotate(-4deg)}50%{transform:none}75%{transform:translateX(46px) rotate(4deg)}}
@keyframes hand{0%,100%{transform:none}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.dk.vorfuehren .dk-stempel.nein{animation:stempel-l 2.4s .6s infinite}.dk.vorfuehren .dk-stempel.ja{animation:stempel-r 2.4s .6s infinite}
@keyframes stempel-l{20%,30%{opacity:.9}0%,45%,100%{opacity:0}}@keyframes stempel-r{70%,80%{opacity:.9}0%,55%,100%{opacity:0}}
@media (min-width:1000px){
  .disco{grid-template-areas:"kopf buehne" "knoepfe buehne" "geschmack geschmack"}
  .stapel-buehne{grid-area:buehne}
  .stapel{width:min(540px,calc((100svh - 250px) * .74))}
  .disco-knoepfe{grid-area:auto;margin-top:22px;justify-content:center;align-self:auto}
  .stapel-buehne>.disco-knoepfe{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){.dk.vorfuehren,.wisch-hinweis svg{animation:none}}
/* Kartei (Fassung 5) */
.kartei{padding:clamp(40px,5vw,72px) var(--rand) clamp(30px,4vw,60px);border-bottom:1px solid var(--linie);overflow:hidden}
.kartei-kopf{text-align:center;margin-bottom:10px}.kartei-kopf h2{font-size:clamp(34px,3.6vw,56px);margin:10px 0 8px}
.kartei-buehne{position:relative;height:min(760px,88vh);perspective:1800px;perspective-origin:50% -20%;outline:none;overflow:hidden}
.kartei-stapel{position:absolute;left:50%;top:180px;width:min(500px,86vw);height:calc(100% - 230px);transform:translateX(-50%);transform-style:preserve-3d}
.karte{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,.61,.12,1),visibility 0s linear .35s;cursor:pointer;will-change:transform}
.karte-innen{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.7,.1,1)}
.karte.offen{cursor:default}.karte.offen .karte-innen{transform:rotateY(180deg) scale(1.04)}
.karte-vorne,.karte-hinten{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#FBFAF7;border:1px solid rgba(21,18,28,.14);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 50px rgba(40,30,20,.16)}
.karte-vorne{display:flex;flex-direction:column;padding:14px 14px 0}
.karte-vorne img{flex:1;min-height:0;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .7s}
.karte.vorne:hover .karte-vorne img{filter:none}
.reiter{position:absolute;top:-30px;left:calc(14px + var(--r-x,0px));height:30px;padding:0 16px;display:flex;align-items:center;background:#FBFAF7;border:1px solid rgba(21,18,28,.14);border-bottom:0;font:400 12px var(--f-ui);letter-spacing:.16em}
.karte:nth-child(3n+2) .reiter{--r-x:120px}.karte:nth-child(3n) .reiter{--r-x:240px}
.karte.vorne .reiter{background:#0B0B0B;color:#fff}
.karte-titel{padding:14px 4px 16px}.karte-titel b{display:block;font:400 26px/1.15 var(--f-titel);margin-top:6px}.karte-titel i{font-style:italic}
.karte-hinten{transform:rotateY(180deg);padding:22px 24px;display:flex;flex-direction:column;gap:12px;overflow:auto;
  background:#FBFAF7 repeating-linear-gradient(180deg,transparent 0 31px,rgba(47,69,232,.12) 31px 32px);background-position:0 70px}
.karte-hinten::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:1px;background:rgba(220,0,244,.35)}
.kh-kopf{display:flex;justify-content:space-between;align-items:center}
.kk-code{display:flex;gap:2px;height:24px}.kk-code i{background:#0B0B0B}
.karte-hinten h3{font:400 30px/1.1 var(--f-titel);margin:4px 0 4px}.karte-hinten h3 i{font-style:italic}
.kh-teile{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kh-teile li{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;font:400 13px/1.3 var(--f-ui)}
.kh-teile img{width:54px;height:68px;object-fit:cover;background:#fff}
.kh-teile b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);font-weight:400}
.kh-teile em{font-style:normal}
.kh-fuss{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--tinte);padding-top:14px}
.kh-fuss>span{display:flex;flex-direction:column;margin-right:auto}.kh-fuss b{font:400 26px var(--f-titel)}
.kh-zu{position:absolute;top:10px;right:12px;background:none;border:0;font:300 28px/1 var(--f-ui);cursor:pointer}
.kartei-pfeil{position:absolute;top:50%;width:52px;height:52px;border-radius:50%;border:1px solid var(--tinte);background:#fff;font:300 26px/1 var(--f-titel);cursor:pointer;z-index:200}
.kartei-pfeil.hoch{left:calc(50% - min(520px,86vw)/2 - 90px)}.kartei-pfeil.runter{right:calc(50% - min(520px,86vw)/2 - 90px)}
.kartei-pfeil:hover{background:#0B0B0B;color:#fff}
.kartei-zaehler{position:absolute;left:0;right:0;bottom:6px;text-align:center;color:var(--grau)}
@media (max-width:760px){.kartei-pfeil{top:auto;bottom:30px}.kartei-pfeil.hoch{left:16px}.kartei-pfeil.runter{right:16px}.kartei-buehne{height:640px}.karte-titel b{font-size:21px}}
@media (prefers-reduced-motion:reduce){.karte,.karte-innen{transition:none}}
.karte-vorne,.karte-hinten{opacity:var(--o,1);transition:opacity .5s}
/* Fassung 5b (Sonny 01.11. ~20:2x): Wasserzeichen verwirrt -> je ein F.H in den Ecken; Menüleiste edel; Unterzeile violett */
.fuss4-marke::before{display:none}
.fuss4::before{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(247,200,0,.10),transparent 60%),radial-gradient(ellipse 50% 50% at 90% 100%,rgba(220,0,244,.10),transparent 70%),linear-gradient(180deg,rgba(11,11,11,.2),rgba(11,11,11,.75)),url(logo_fh.svg) left 28px top 28px/86px no-repeat,url(logo_fh.svg) right 28px top 28px/86px no-repeat}
.hauptnav.schwarz{background:#0B0B0B url(falten_dunkel.svg) repeat;background-size:240px 640px;box-shadow:inset 0 1px 0 rgba(247,200,0,.45),inset 0 -1px 0 rgba(220,0,244,.35)}
.hauptnav.schwarz a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:#DC00F4;text-underline-offset:8px}
.kopf3 .unterzeile{color:#EBA3F7}
.fuss4 .unterzeile{color:#D98BEA}

/* ================= Fassung 6 «Lookbook» (Sonny: Datenblätter 001, 003, 013, Six ways to walk, One parcel; «dass es nicht kitschig ist») =================
   Regel: Farbfläche nur IN den Blättern und Lineups, eine Farbe je Blatt; alles andere bleibt weiss, schwarz und Playfair. */
.blatt{display:flex;flex-direction:column;gap:14px;background:#F6F3EC;color:#0B0B0B;text-decoration:none;padding:22px 24px 18px;border:1px solid rgba(11,11,11,.12);box-shadow:0 1px 0 #fff inset;transition:transform .5s var(--ease),box-shadow .5s}
.blatt:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(40,30,20,.14)}
.bl-kopf{display:flex;justify-content:space-between;border-bottom:1px solid #0B0B0B;padding-bottom:8px}
.bl-kopf .mini{font-size:9.5px}
.bl-titel{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.bl-nr{font:500 clamp(54px,5vw,78px)/.85 var(--f-ui);letter-spacing:-.04em}
.bl-name b{display:block;font:400 20px/1.1 var(--f-titel)}.bl-name i{display:block;font:italic 400 20px/1.1 var(--f-titel)}
.bl-name small{display:block;margin-top:6px;font:400 10px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.bl-stempel{width:66px;height:66px;border-radius:50%;border:1px solid #0B0B0B;display:grid;place-items:center;position:relative}
.bl-stempel img{width:30px;filter:invert(1)}.bl-stempel small{position:absolute;bottom:7px;font:400 7px var(--f-ui);letter-spacing:.1em}
.bl-feld{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;background:var(--bf);color:var(--bt);padding:18px;position:relative;min-height:300px}
.bl-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font:400 12px/1.3 var(--f-ui)}
.bl-liste li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;border-bottom:1px solid color-mix(in srgb,var(--bt) 22%,transparent);padding-bottom:7px}
.bl-liste b{font-weight:500}.bl-liste small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.bl-liste em{font-style:normal;white-space:nowrap}
.bl-foto{position:relative;background:#fff;padding:6px;transform:rotate(1.4deg);box-shadow:0 14px 30px rgba(0,0,0,.18);align-self:start}
.bl-foto>img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transition:filter .7s}
.blatt:hover .bl-foto>img{filter:none}
.bl-teile{position:absolute;left:-18px;bottom:-14px;display:flex;gap:4px}
.bl-teile img{width:40px;height:50px;object-fit:cover;background:#fff;border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.bl-summe{position:absolute;left:18px;bottom:16px;text-align:left}
.bl-summe small{display:block;font:400 9px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.bl-summe b{font:500 30px/1 var(--f-ui);letter-spacing:-.02em}
.bl-fuss{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}
.bl-notiz{font:400 13px/1.45 var(--f-titel);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-notiz .mini{display:block;font-size:9px;margin-bottom:4px}
.bl-code{display:flex!important;gap:2px;height:30px}.bl-code i{background:#0B0B0B}
.bl-bahn{display:grid;grid-auto-flow:column;grid-auto-columns:min(620px,86vw);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 26px}
.bl-bahn .blatt{scroll-snap-align:start}
.bl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(560px,100%),1fr));gap:26px}
/* Lineups wie «Six ways to walk» */
.lineup{padding:clamp(40px,5vw,72px) var(--rand) 10px}
.lu-band{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;background:var(--lf);padding:clamp(18px,3vw,40px) clamp(14px,3vw,40px)}
.lu-band span{display:grid;place-items:center}
.lu-band img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.13) contrast(1.22);transition:transform .6s var(--ease)}
.lu-band span:hover img{transform:translateY(-8px) rotate(-3deg)}
.lu-namen{list-style:none;margin:0;padding:12px 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;border-top:1px solid #0B0B0B;margin-top:0}
.lu-namen li{font:400 13px/1.3 var(--f-titel)}.lu-namen b{display:block;font:400 9.5px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:3px}
.lu-namen em{display:block;font:400 12px var(--f-ui);font-style:normal;margin-top:4px}
/* «One look. Four shops. One bag.» mit zwei Telefonen */
.paket{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,60px);align-items:center;background:#A8EDD0;margin:clamp(40px,6vw,90px) var(--rand) 0;padding:clamp(30px,5vw,70px);overflow:hidden}
.paket h2{font-size:clamp(40px,4.4vw,70px);line-height:1;margin:12px 0 18px}.paket p{max-width:380px}
.telefone{position:relative;height:clamp(380px,40vw,520px)}
.tel{position:absolute;left:4%;top:4%;width:46%;aspect-ratio:9/19;background:#0B0B0B;border-radius:34px;padding:9px;box-shadow:0 30px 60px rgba(0,0,0,.28);transform:rotate(-6deg)}
.tel.zwei{left:46%;top:12%;transform:rotate(5deg)}
.tel-schirm{position:relative;height:100%;border-radius:26px;overflow:hidden;background:#111}
.tel-schirm>img{width:100%;height:100%;object-fit:cover}
.tel-karte{position:absolute;left:10px;right:10px;bottom:12px;background:#fff;padding:10px 12px;font:400 13px/1.25 var(--f-titel)}
.tel-karte b{display:block;font:500 11px var(--f-ui)}.tel-karte small{display:block;margin-top:8px;background:#0B0B0B;color:#fff;text-align:center;padding:7px;font:400 9px var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
.tel-schirm.hell{background:#fff;padding:22px 10px 10px;display:flex;flex-direction:column;gap:8px}
.tel-kopf{font:400 18px var(--f-titel);padding:4px 4px 8px;border-bottom:1px solid #0B0B0B}
.tel-zeile{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;font:400 9px/1.25 var(--f-ui)}
.tel-zeile img{width:34px;height:42px;object-fit:cover;background:#F1EFEB}.tel-zeile b{font-weight:500}.tel-zeile em{font-style:normal}
.tel-knopf{margin-top:auto;background:#DC00F4;color:#fff;text-align:center;padding:10px;font:400 9px var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
/* Beitrag: Shop the look als Blatt */
.blatt-stl .stl-brett{background:var(--bf);color:var(--bt);padding:clamp(20px,3vw,40px)}
.blatt-stl .stl-brett-t h2,.blatt-stl .stl-brett-t .nr{color:var(--bt)}
/* Fuss in Fassung 6: das zweite Wasserzeichen-Muster zum Vergleich, ein grosses F.H über den ganzen Fuss */
.fuss4::before{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(247,200,0,.10),transparent 60%),radial-gradient(ellipse 50% 50% at 90% 100%,rgba(220,0,244,.10),transparent 70%),linear-gradient(180deg,rgba(11,11,11,.25),rgba(11,11,11,.8)),url(logo_fh.svg) center 55%/min(1100px,140%) no-repeat}
@media (max-width:760px){.bl-feld{grid-template-columns:1fr}.paket{grid-template-columns:1fr;margin:30px 0 0}.lu-band,.lu-namen{grid-auto-columns:minmax(120px,1fr);overflow-x:auto}.bl-titel{grid-template-columns:auto 1fr}.bl-stempel{display:none}}
/* Sonny 01.11. 20:3x: nur die Linien links und rechts der Unterzeile in der Farbe des Punktes, Schrift wie vorher.
   Kein F.H im Fuss (weder Ecken noch gross): je ein F.H aussen auf dem Falten-Rand, links und rechts neben der Seite. */
.kopf3 .unterzeile{color:#fff}.fuss4 .unterzeile{color:rgba(237,235,230,.75)}
.unterzeile::before,.unterzeile::after,.fuss4 .unterzeile::before,.fuss4 .unterzeile::after{background:#DC00F4!important;height:1px}
.fuss4::before{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(247,200,0,.10),transparent 60%),radial-gradient(ellipse 50% 50% at 90% 100%,rgba(220,0,244,.10),transparent 70%),linear-gradient(180deg,rgba(11,11,11,.2),rgba(11,11,11,.75))}
.fuss4-marke::before{display:none}
.kasten{position:relative}
.kasten::before,.kasten::after{content:"";position:absolute;bottom:clamp(160px,18vw,260px);width:clamp(40px,3.4vw,62px);aspect-ratio:1;background:url(logo_fh_dunkel.svg) center/contain no-repeat;opacity:.55;pointer-events:none}
.kasten::before{left:calc((100vw - 100%) / -4 - clamp(20px,1.7vw,31px))}
.kasten::after{right:calc((100vw - 100%) / -4 - clamp(20px,1.7vw,31px))}
@media (max-width:760px){.kasten::before,.kasten::after{display:none}}
/* Sonny 01.11. 20:4x (Bildschirmfotos 9 und 10): F.H im Fuss links und rechts, in der Mitte des Logo-Bereichs, oberhalb der Trennlinie. Nicht aussen auf dem Rand. */
.kasten::before,.kasten::after{display:none}
.fuss4-marke{position:relative}
.fuss4-marke::before,.fuss4-marke::after{content:"";display:block!important;position:absolute;top:50%;width:clamp(54px,5vw,78px);aspect-ratio:1;transform:translateY(-62%);background:url(logo_fh.svg) center/contain no-repeat;opacity:.9;z-index:1;pointer-events:none}
.fuss4-marke::before{left:clamp(0px,2vw,30px)}.fuss4-marke::after{right:clamp(0px,2vw,30px)}
/* Menü enger, jeder Punkt wie «Stories» bei Fassung 1: gleicher Abstand links und rechts, Strich darunter in Magenta beim Darüberfahren und auf der offenen Seite */
.hauptnav.schwarz{gap:0;padding:0 16px}
.hauptnav.schwarz a{padding:20px clamp(12px,1.3vw,20px) 17px;border-bottom:2px solid transparent;text-decoration:none!important;transition:color .2s,border-color .2s}
.hauptnav.schwarz a:hover,.hauptnav.schwarz a[aria-current]{color:#fff;border-bottom-color:#DC00F4}
@media (max-width:760px){.fuss4-marke::before,.fuss4-marke::after{display:none!important}}
/* Sonny 01.11. 21:0x: F.H genau auf der goldenen Linie der Spalte «Read» (links) und auf der rechten Kante der Spalte «Sunday Letter» (rechts);
   Abstand unten zur Trennlinie gleich wie der Abstand von der Trennlinie zu «Read». */
.fuss4-marke::before,.fuss4-marke::after{top:auto;transform:none;bottom:clamp(36px,4vw,56px)}
.fuss4-marke::before{left:0}.fuss4-marke::after{right:0}
/* Oberes Menü wie die Spalten im Fuss: vor jedem Punkt die feine goldene Linie, gleicher Abstand links und rechts wie bei «Stories» */
.hauptnav.schwarz{gap:0;padding:14px 16px}
.hauptnav.schwarz a{position:relative;padding:6px 18px 6px 18px;border-bottom:0}
.hauptnav.schwarz a::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:linear-gradient(180deg,rgba(247,200,0,.7),rgba(237,235,230,.08))}
.hauptnav.schwarz a:last-child::after{content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;background:linear-gradient(180deg,rgba(247,200,0,.7),rgba(237,235,230,.08))}
.hauptnav.schwarz a:hover,.hauptnav.schwarz a[aria-current]{color:#fff;border-bottom:0;text-decoration:underline!important;text-decoration-color:#DC00F4!important;text-underline-offset:7px;text-decoration-thickness:1px}

/* Sonny 01.11. 22:1x («ja» zur Tiefenanalyse): jede Falte so breit wie ihr Menüpunkt. Alle Punkte gleich breit (--fw),
   Faltenkachel = 2 Falten = 2 mal --fw, auf die Mitte gesetzt: jede goldene Linie liegt auf einer Faltenkante. */
.hauptnav.schwarz{--fw:150px;background-size:calc(var(--fw) * 2) calc(var(--fw) * 16 / 3);background-position:calc(50% + 0px) 0;background-repeat:repeat}
.hauptnav.schwarz a{flex:0 0 var(--fw);width:var(--fw);box-sizing:border-box;padding-left:0;padding-right:0;text-align:center}
@media (max-width:1240px){.hauptnav.schwarz{--fw:120px}.hauptnav.schwarz a{font-size:11px;letter-spacing:.14em}}
/* F.H im Fuss: Bild eng auf die Buchstaben zugeschnitten (logo_fh_eng.svg), damit die sichtbare Kante auf der Linie liegt
   und der Abstand Buchstabenboden zu Trennlinie gleich ist wie Trennlinie zu «Read». */
.fuss4-marke::before,.fuss4-marke::after{width:clamp(45px,4.15vw,65px);aspect-ratio:414.75/221.25;background:url(logo_fh_eng.svg) center/100% 100% no-repeat;bottom:clamp(36px,4vw,56px)}
/* Faltenkante dort zeigen, wo sie senkrecht steht (Wellenspitze, 160 von 640 Einheiten, 34 Einheiten nach rechts): Kante gerade wie die goldene Linie */
.hauptnav.schwarz{background-position:calc(50% + 0px - var(--fw) * 34 / 120 + 1.5px) calc(50% - 0px);background-position-y:calc(26px - var(--fw) * 4 / 3)}
/* Touch (Sonny 03.11.2026): ohne Maus wird ein Foto farbig, sobald es beim Scrollen in der Bildmitte liegt */
@media (hover:none){.sk.farbig .sk-bild img,.ek.farbig .ek-bild img,.stil-k.farbig img,.tafel.aktiv.farbig img,.cover-bild.farbig img,.lk.farbig .lk-foto,.dk.farbig .dk-bild>img,.sv-look.farbig .sv-bild img{filter:grayscale(0) contrast(1)}}