/* =============================================================================
   Modul-Bibliothek II — 50 weitere Layout-Templates.
   Bauen auf dem Raster- und Bewegungssystem (zz-motion.css) auf und benutzen
   dessen Klassen; keine eigenen Zeiten, keine eigenen Prozentwerte.
   Reihenfolge: Raster · Bewegung · Video · Dialog · Editorial · Handel · System
   ============================================================================= */

/* ============================ A · RASTER UND BILDANORDNUNG ================= */

/* 21 band-edge — Bildwand ohne Abstand, Beschriftung mittig auf dem Bild.
   Das Muster aus den grossen Haeusern: die Bilder beruehren sich, der Schnitt
   zwischen ihnen ist die einzige Linie. */
.m-band{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
.m-band a{position:relative;display:block;overflow:hidden;isolation:isolate}
.m-band .im{height:min(74svh,760px)}
.m-band .lb{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;color:#fff;z-index:2;padding:0 .8rem;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.m-band .lb::after{content:"";display:block;width:34px;height:1px;background:#fff;
  margin:.6rem auto 0;transform:scaleX(0);transition:transform var(--t-s) var(--e)}
.m-band a:hover .lb::after{transform:scaleX(1)}
/* Zwei Schleier: der flaechige gibt der Bildwand Tiefe, der schmale Streifen in
   der Mitte traegt die Beschriftung. Ohne ihn haengt weisser Text auf einem
   beliebigen Foto — auf einem hellen Motiv waeren das 1,4:1. Der Streifen ist
   vertikal eng (18 % Radius), damit das Motiv sichtbar bleibt. */
.m-band a::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(140% 18% at 50% 50%,rgba(0,0,0,.66) 0%,rgba(0,0,0,.46) 60%,rgba(0,0,0,0) 100%),
             linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.3));
  transition:background var(--t-m) var(--e)}
.m-band a:hover::before{background:radial-gradient(140% 18% at 50% 50%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.44) 60%,rgba(0,0,0,0) 100%),
             linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.2))}
@media(max-width:900px){.m-band{grid-auto-flow:row}.m-band .im{height:min(38svh,340px)}}

/* 22 mosaic — ein grosses Bild, drei kleine daneben, alle randlos */
.m-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:0}
.m-mosaic>*:first-child{grid-row:1/3}
.m-mosaic .im{height:min(38svh,380px)}
.m-mosaic>*:first-child .im{height:min(76svh,760px)}
@media(max-width:900px){.m-mosaic{grid-template-columns:1fr 1fr}
  .m-mosaic>*:first-child{grid-row:auto;grid-column:1/-1}
  .m-mosaic>*:first-child .im{height:min(44svh,420px)}}

/* 23 poster-pair — zwei Plakate, Text unter dem Bild statt darauf */
.m-poster .im{aspect-ratio:3/4}
.m-poster .t{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,2.3rem);line-height:1;margin-top:.9rem}
.m-poster .s{font-size:12.5px;color:var(--ink2);margin-top:.35rem}

/* 24 stack-four — vier gleiche Spalten mit Text darunter */
.m-stack4 .im{aspect-ratio:4/5}
.m-stack4 .n{font-family:var(--f-label,var(--sans));font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.m-stack4 .t{font-size:14px;margin-top:.2rem}

/* 25 asym-lead — grosses Bild links, schmale Textspalte rechts, Text unten buendig */
.m-asym .im{aspect-ratio:3/2}
.m-asym .side{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding-bottom:.4rem}

/* 26 column-read — drei Textspalten wie im Blatt, keine Bilder */
.m-cols3 p{font-size:14px;color:var(--ink2);max-width:none}
.m-cols3 h3{font-family:var(--mark);font-weight:400;text-transform:uppercase;
  font-size:1.15rem;margin-bottom:.5rem}

/* 27 duo-edge — zwei randlose Bilder, dazwischen nur die Kante */
.m-duoedge{display:grid;grid-template-columns:1fr 1fr;gap:0}
.m-duoedge .im{height:min(80svh,820px)}
@media(max-width:900px){.m-duoedge{grid-template-columns:1fr}.m-duoedge .im{height:min(46svh,440px)}}

/* 28 tri-portrait — drei Hochformate mit viel Luft dazwischen */
.m-tri .im{aspect-ratio:2/3}
.m-tri .cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}

/* 29 full-figure — ein einziges Bild ueber die volle Breite, Text daneben klein */
.m-figure .im{aspect-ratio:21/9}
.m-figure .meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}

/* 30 half-bleed — Bild laeuft ueber den rechten Seitenrand hinaus */
.m-halfbleed{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
.m-halfbleed .media{margin-right:calc(var(--pad-x)*-1)}
.m-halfbleed .im{aspect-ratio:4/3}
@media(max-width:900px){.m-halfbleed{grid-template-columns:1fr}
  .m-halfbleed .media{margin-right:calc(var(--pad-x)*-1);margin-left:calc(var(--pad-x)*-1)}}

/* 31 grid-quilt — zwoelfteiliges Raster mit bewusst ungleichen Feldern */
.m-quilt .im{height:100%}
.m-quilt .a{aspect-ratio:4/5}.m-quilt .b{aspect-ratio:1/1}.m-quilt .c{aspect-ratio:3/4}

/* 32 side-index — schmales Verzeichnis links, grosses Bild rechts */
.m-sideidx ol{list-style:none;padding:0;margin:0;counter-reset:x}
.m-sideidx li{counter-increment:x;border-top:.5px solid var(--line);padding:.75rem 0;
  display:flex;gap:.9rem;align-items:baseline;font-size:14px}
.m-sideidx li:last-child{border-bottom:.5px solid var(--line)}
.m-sideidx li::before{content:counter(x,decimal-leading-zero);font-size:10.5px;
  letter-spacing:.14em;color:var(--muted);min-width:22px}
.m-sideidx .im{aspect-ratio:4/5}

/* ================================ B · BEWEGUNG ============================ */

/* 33 reveal-stack — Bilder erscheinen gestaffelt beim Hereinscrollen */
.m-revstack .im{aspect-ratio:4/5}

/* 34 layer-pair — zwei Ebenen, die sich beim Scrollen unterschiedlich weit
   bewegen. Sehr wenig Weg — der Effekt darf nicht auffallen. */
.m-layer{position:relative;min-height:min(96svh,980px)}
.m-layer .back{position:absolute;inset:0}
.m-layer .back .im{height:100%}
.m-layer .front{position:relative;z-index:2;width:min(48%,520px);margin-left:auto;
  background:var(--paper);padding:clamp(1.4rem,3vw,2.6rem)}
.m-layer .front .im{aspect-ratio:3/4}
@media(max-width:900px){.m-layer{min-height:0}.m-layer .back{position:static}
  .m-layer .back .im{aspect-ratio:4/3;height:auto}
  .m-layer .front{width:auto;margin:-3rem 1rem 0}}

/* 35 swap-grid — beim Zeigen wechselt das Bild statt zu zoomen */
.m-swap .cell{position:relative;overflow:hidden;aspect-ratio:4/5}
.m-swap .cell .im{position:absolute;inset:0;height:100%}
.m-swap .t{font-size:13px;margin-top:.6rem}
.m-swap .p{font-size:12px;color:var(--muted)}

/* 36 marquee-line — endlos laufende Zeile, haelt beim Zeigen an */
.m-marquee{border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);
  padding:clamp(.8rem,2vh,1.4rem) 0}
.m-marquee .marquee>span{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,4.2rem);line-height:1}

/* 37 sticky-caption — das Bild laeuft, die Bildunterschrift bleibt stehen */
.m-stickycap{display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.4rem,3vw,3rem)}
.m-stickycap .side{position:sticky;top:calc(var(--chdr-h,150px) + 2rem);align-self:start}
.m-stickycap .rows>*+*{margin-top:var(--gap)}
.m-stickycap .im{aspect-ratio:3/2}
@media(max-width:900px){.m-stickycap{grid-template-columns:1fr}.m-stickycap .side{position:static}}

/* 38 mask-reveal — das Bild wird beim Erscheinen von unten freigelegt */
.m-mask .im{aspect-ratio:16/9}

/* 39 count-row — Zahlen zaehlen einmal hoch, wenn sie ins Bild kommen */
.m-count{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line)}
.m-count .c{background:var(--paper);padding:clamp(1.2rem,3vh,2rem) 1.2rem}
.m-count .v{font-family:var(--mark);font-weight:400;font-size:clamp(2.4rem,4vw,4rem);
  line-height:1;font-variant-numeric:tabular-nums}
.m-count .l{font-size:12.5px;color:var(--ink2);margin-top:.4rem}

/* 40 drag-rail — Bildstrecke, die man mit der Maus ziehen kann */
.m-drag{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 var(--pad-x)}
.m-drag .i{flex:0 0 clamp(240px,30vw,440px);scroll-snap-align:start}
.m-drag .im{aspect-ratio:4/5}
.m-drag .cap{font-size:11.5px;color:var(--muted);margin-top:.5rem}

/* 41 compare — Schieberegler zwischen zwei Zustaenden desselben Motivs */
.m-compare{position:relative;overflow:hidden;aspect-ratio:16/9;cursor:ew-resize;user-select:none}
.m-compare .a,.m-compare .b{position:absolute;inset:0}
.m-compare .b{clip-path:inset(0 0 0 var(--split,50%))}
.m-compare .bar{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;
  background:var(--signal);z-index:3;pointer-events:none}
.m-compare .bar::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border:1.5px solid var(--signal);border-radius:50%;
  background:rgba(0,0,0,.15)}
/* Beschriftung sitzt auf dem Motiv, also traegt sie ihre eigene Flaeche —
   ein Schlagschatten allein ist kein messbarer Kontrast. */
.m-compare .lg{position:absolute;bottom:.9rem;z-index:4;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;background:rgba(22,19,15,.72);
  padding:.3rem .55rem;border-radius:2px;backdrop-filter:saturate(120%)}
.m-compare .lg.l{left:1rem}.m-compare .lg.r{right:1rem}

/* 42 pin-steps — ein Bild bleibt stehen, der Text wechselt in Etappen */
.m-pin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem)}
.m-pin .media{position:sticky;top:calc(var(--chdr-h,150px) + 1.5rem);align-self:start}
.m-pin .media .im{aspect-ratio:4/5}
.m-pin .steps>*{min-height:70svh;display:flex;flex-direction:column;justify-content:center}
.m-pin .steps h3{font-family:var(--mark);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,2.4vw,2.1rem);margin-bottom:.7rem}
@media(max-width:900px){.m-pin{grid-template-columns:1fr}.m-pin .media{position:static}
  .m-pin .steps>*{min-height:0;margin-top:2rem}}

/* ============================== C · VIDEO ================================= */

.vid{position:relative;overflow:hidden;background:var(--stage)}
.vid>video{width:100%;height:100%;object-fit:cover;display:block}
/* Der Schleier muss dort tragen, wo der Text steht — und zwar bei JEDEM Clip.
   Ein Video kann morgen hell sein; .05 oben und .42 unten reichten dafuer nicht.
   Unten schwer, weil die Aussage im Vollbild-Video unten links sitzt. */
.vid .sc{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.20) 40%,rgba(0,0,0,.58) 72%,rgba(0,0,0,.80) 100%)}
/* Beschriftungen auf Medium tragen VOLLES Weiss. Eine 10px-Vorzeile mit 75 %
   Deckkraft ergab auf dem Schleier 2,5:1 — die Deckkraft ist hier kein Stil,
   sondern ein Lesbarkeitsfehler. Ohne diese Regel greift .eyebrow{--muted}. */
.vid .cnt .eyebrow,.vid .cnt .lbl,.vid .cnt .cap{color:#fff}
/* Beim Zitat steht der Text mittig — dort liegt der Schleier als enger Streifen. */
.m-vidquote .sc{background:radial-gradient(150% 30% at 50% 50%,rgba(0,0,0,.70) 0%,rgba(0,0,0,.52) 65%,rgba(0,0,0,.14) 100%),
  linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.28))}

/* 43 video-full — Vollbild-Video mit Aussage unten links */
.m-vidfull{height:100svh;min-height:520px}
.m-vidfull>video{position:absolute;inset:0}
.m-vidfull .cnt{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:clamp(1.8rem,7vh,4rem);
  z-index:2;color:#fff;max-width:var(--maxw);margin:0 auto}

/* 44 video-split — Video neben Text, halbe Hoehe */
.m-vidsplit .vid{aspect-ratio:4/5}

/* 45 video-trio — drei kleine Schleifen nebeneinander */
.m-vidtrio .vid{aspect-ratio:9/16}
.m-vidtrio .cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}

/* 46 video-quote — Video als Grund, Zitat darauf, Text linksbuendig */
.m-vidquote{height:min(92svh,900px);min-height:420px;display:grid;align-items:center}
.m-vidquote>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-vidquote .cnt{position:relative;z-index:2;color:#fff;width:100%;padding:0 var(--pad-x);
  max-width:min(26ch,var(--maxw));margin:0 auto;text-align:left}

/* 47 video-band — randloses Video-Band, halbe Hoehe, ohne Text */
.m-vidband{height:min(56svh,600px)}
.m-vidband>video{position:absolute;inset:0}

/* 48 video-inline — Video im Textfluss, mit Bildunterschrift */
.m-vidinline .vid{aspect-ratio:16/9}
.m-vidinline .cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}

/* =============================== D · DIALOG =============================== */

/* 49 ask-bar — Eingabezeile, die unten am Rand klebt und beim Scrollen waechst */
.m-askbar{position:sticky;bottom:clamp(.8rem,2vh,1.4rem);z-index:40;
  padding:0 var(--pad-x);pointer-events:none}
.m-askbar .in{pointer-events:auto;max-width:min(760px,100%);margin:0 auto;
  display:flex;align-items:center;gap:.8rem;background:var(--paper);
  border:.5px solid var(--line);border-radius:100px;
  padding:.7rem 1.1rem;transition:padding var(--t-m) var(--e),max-width var(--t-m) var(--e),
          border-color var(--t-s) var(--e),box-shadow var(--t-m) var(--e)}
.m-askbar.wide .in{max-width:min(980px,100%);padding:1rem 1.4rem;
  box-shadow:0 18px 40px -30px rgba(22,19,15,.5)}
.m-askbar .in:focus-within{border-color:var(--ink)}
.m-askbar input{flex:1;border:none;background:none;outline:none;font-size:14.5px;min-width:0}
.m-askbar input::placeholder{color:var(--muted)}
.m-askbar .go{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.m-askbar .go .ico{width:15px;height:15px}

/* 50 ask-chips — Vorschlaege als Chips ueber der Eingabe */
.m-chips2{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:.8rem}
.m-chips2 button{border:.5px solid var(--line);border-radius:100px;padding:.4rem 1rem;
  font-size:12.5px;background:var(--paper);transition:border-color var(--t-s) var(--e),
  background var(--t-s) var(--e),color var(--t-s) var(--e)}
.m-chips2 button:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* 51 ask-answer — Antwortlauf: Text erscheint, dann treten Bilder nach */
.m-answer{max-width:66ch}
.m-answer .said{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.m-answer .txt{font-size:clamp(15px,1.3vw,17.5px);line-height:1.6}
.m-answer .picks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:1.6rem;max-width:none}
.m-answer .picks .im{aspect-ratio:3/4}
.m-answer .picks .t{font-size:12px;margin-top:.5rem}
.m-answer .picks .p{font-size:11.5px;color:var(--muted)}
@media(max-width:700px){.m-answer .picks{grid-template-columns:repeat(2,1fr)}}

/* 52 ask-thread — Verlauf aus Frage und Antwort */
.m-thread .q{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.05;padding:1.1rem 0;
  border-top:.5px solid var(--line)}
.m-thread .a{font-size:14.5px;color:var(--ink2);padding-bottom:1.4rem;max-width:64ch}

/* 53 ask-inline — kurze Antwort mitten im Text, farblich abgesetzt */
.m-askinline{border-left:2px solid var(--signal);padding:.2rem 0 .2rem 1.2rem}
.m-askinline .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal)}
.m-askinline p{font-size:14.5px;margin-top:.4rem}

/* ============================== E · EDITORIAL ============================= */

/* 54 pull-quote — ein Satz tritt aus dem Lesetext heraus */
.m-pull{border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);
  padding:clamp(1.6rem,4vh,2.8rem) 0;margin:clamp(1.6rem,4vh,2.6rem) 0}
.m-pull .q{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.02;max-width:20ch}

/* 55 chapter — Kapitelauftakt: Nummer, Titel, eine Zeile */
.m-chapter{border-top:2px solid var(--ink);padding-top:1.1rem}
.m-chapter .n{font-family:var(--f-label,var(--sans));font-size:11px;letter-spacing:.24em;color:var(--muted)}
.m-chapter h2{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(2rem,5vw,4rem);line-height:.96;margin:.5rem 0 .6rem}

/* 56 read-two — zweispaltiger Lesetext mit Initiale */
.m-read2{columns:2;column-gap:clamp(1.8rem,4vw,3.6rem);font-size:15px;color:var(--ink2)}
.m-read2 p{max-width:none;margin-bottom:1rem;break-inside:avoid}
.m-read2 p:first-child::first-letter{font-family:var(--mark);font-weight:400;float:left;
  font-size:3.4em;line-height:.82;padding:.06em .12em 0 0;color:var(--ink)}
@media(max-width:760px){.m-read2{columns:1}}

/* 57 annotated — Bild mit nummerierten Marken */
.m-annot{position:relative}
.m-annot .im{aspect-ratio:4/3}
.m-annot .pt{position:absolute;width:22px;height:22px;border-radius:50%;
  border:1px solid #fff;color:#fff;font-size:10px;display:flex;align-items:center;
  justify-content:center;background:rgba(22,19,15,.82);transform:translate(-50%,-50%);
  transition:background var(--t-s) var(--e)}
.m-annot .pt:hover{background:var(--signal)}
.m-annot .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;margin-top:1.2rem}
.m-annot .keys .k{font-size:12.5px;color:var(--ink2);display:flex;gap:.6rem}
.m-annot .keys .k b{font-weight:400;color:var(--signal);font-variant-numeric:tabular-nums}

/* 58 glossary — Begriff und Erklaerung in zwei Spalten */
.m-gloss dl{margin:0}
.m-gloss .row{display:grid;grid-template-columns:1fr 2fr;gap:clamp(1rem,3vw,3rem);
  padding:.9rem 0;border-top:.5px solid var(--line)}
.m-gloss .row:last-child{border-bottom:.5px solid var(--line)}
.m-gloss dt{font-family:var(--mark);font-weight:400;text-transform:uppercase;font-size:1.1rem}
.m-gloss dd{margin:0;font-size:13.5px;color:var(--ink2)}
@media(max-width:700px){.m-gloss .row{grid-template-columns:1fr;gap:.3rem}}

/* 59 accordion — Fragen, die sich oeffnen */
.m-acc .it{border-top:.5px solid var(--line)}
.m-acc .it:last-child{border-bottom:.5px solid var(--line)}
.m-acc .h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 0;text-align:left;font-size:15px}
.m-acc .h .pm{width:14px;height:14px;position:relative;flex-shrink:0}
.m-acc .h .pm::before,.m-acc .h .pm::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--t-s) var(--e),opacity var(--t-s) var(--e)}
.m-acc .h .pm::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.m-acc .h .pm::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.m-acc .it.on .h .pm::after{transform:scaleY(0);opacity:0}
.m-acc .bd{max-height:0;overflow:hidden;transition:max-height var(--t-m) var(--e)}
.m-acc .bd-in{padding-bottom:1.2rem;font-size:14px;color:var(--ink2);max-width:70ch}

/* 60 margin-note — Text mit Randnotizen */
.m-margin{display:grid;grid-template-columns:1fr 220px;gap:clamp(1.4rem,3vw,3rem)}
.m-margin .notes{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:1.4rem}
.m-margin .notes b{display:block;color:var(--ink2);font-weight:400;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.3rem}
@media(max-width:900px){.m-margin{grid-template-columns:1fr}}

/* 61 letter — Brief-/Manifestblock auf abgesetzter Flaeche */
.m-letter{background:var(--surface);padding:clamp(1.8rem,5vw,4rem)}
.m-letter .body{font-size:clamp(15px,1.3vw,17px);max-width:60ch}
.m-letter .sig{font-family:var(--mark);font-weight:400;text-transform:uppercase;
  font-size:1.2rem;margin-top:1.6rem}

/* 62 credits — Mitwirkende als schmale Liste */
.m-credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.4rem}
.m-credits .r b{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:.25rem}
.m-credits .r span{font-size:13.5px}

/* =============================== F · HANDEL =============================== */

/* 63 lookbook — ein Look mit Punkten auf den getragenen Stuecken */
.m-look{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.4rem,3vw,3rem)}
.m-look .im{aspect-ratio:3/4}
.m-look .list .r{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;
  padding:.75rem 0;border-top:.5px solid var(--line)}
.m-look .list .r:last-child{border-bottom:.5px solid var(--line)}
.m-look .list .th{aspect-ratio:3/4;background:var(--surface) center/cover no-repeat}
.m-look .list .nm{font-size:13px}
.m-look .list .pr{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:800px){.m-look{grid-template-columns:1fr}}

/* 64 product-strip — schmale Produktleiste, waagerecht scrollbar */
.m-pstrip{display:flex;gap:var(--gap);overflow-x:auto;padding:0 var(--pad-x);
  scroll-snap-type:x proximity}
.m-pstrip .p{flex:0 0 clamp(150px,17vw,220px);scroll-snap-align:start}
.m-pstrip .im{aspect-ratio:3/4}
.m-pstrip .t{font-size:12px;margin-top:.5rem}
.m-pstrip .pr{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 65 spec-table — Masse und Angaben als ruhige Tabelle */
.m-spec{width:100%;border-collapse:collapse;font-size:13.5px}
.m-spec th{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:400;text-align:left;padding:.6rem 1rem .6rem 0;border-bottom:.5px solid var(--line)}
.m-spec td{padding:.65rem 1rem .65rem 0;border-bottom:.5px solid var(--line-soft);
  color:var(--ink2);font-variant-numeric:tabular-nums}
.m-spec td:first-child{color:var(--ink)}

/* 66 places — Standorte als Liste mit Bild */
.m-places .r{display:grid;grid-template-columns:120px 1fr auto;gap:clamp(1rem,2.4vw,2rem);
  align-items:center;padding:1rem 0;border-top:.5px solid var(--line)}
.m-places .r:last-child{border-bottom:.5px solid var(--line)}
.m-places .th{aspect-ratio:3/2;background:var(--surface) center/cover no-repeat}
.m-places .ci{font-family:var(--mark);font-weight:400;text-transform:uppercase;font-size:1.25rem}
.m-places .ad{font-size:12.5px;color:var(--ink2)}
@media(max-width:700px){.m-places .r{grid-template-columns:80px 1fr}.m-places .go{grid-column:2}}

/* 67 empty-state — Leerzustand, ruhig und ohne Entschuldigung */
.m-empty{text-align:center;padding:clamp(3rem,10vh,6rem) var(--pad-x)}
.m-empty h3{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.6rem}
.m-empty p{font-size:14px;color:var(--muted);margin:0 auto 1.6rem}

/* 68 price-note — Preisangabe mit Bezug, nie eine Zahl allein */
.m-price{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.m-price .v{font-family:var(--mark);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);
  font-variant-numeric:tabular-nums}
.m-price .u{font-size:12px;color:var(--muted)}

/* =============================== G · SYSTEM =============================== */

/* 69 slim-nav — der schmale Kopf fuer Rechtstexte: eine Zeile, kein Logo */
.slimhdr{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:.5px solid var(--line-soft)}
.slimhdr .in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:.55rem var(--pad-x);max-width:var(--maxw);margin:0 auto}
.slimhdr .nav{display:flex;gap:clamp(.9rem,2vw,1.9rem);overflow-x:auto}
.slimhdr a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;transition:color var(--t-xs) var(--e)}
.slimhdr a:hover,.slimhdr a.on{color:var(--ink)}
.slimhdr .side{display:flex;gap:1rem;align-items:center;flex-shrink:0}

/* 70 legal-doc — Rechtstext mit Sprungmarken links */
.m-legal{display:grid;grid-template-columns:230px 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:start}
.m-legal .toc{position:sticky;top:calc(var(--slim-h,44px) + 1.6rem);align-self:start}
.m-legal .toc a{display:block;font-size:12.5px;color:var(--muted);padding:.32rem 0;
  border-left:1px solid transparent;padding-left:.8rem;margin-left:-.8rem;
  transition:color var(--t-xs) var(--e),border-color var(--t-xs) var(--e)}
.m-legal .toc a:hover,.m-legal .toc a.on{color:var(--ink);border-color:var(--signal)}
.m-legal .doc h2{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.5rem,2.8vw,2.2rem);margin:2.4rem 0 .8rem;scroll-margin-top:calc(var(--slim-h,44px) + 1.4rem)}
.m-legal .doc h2:first-child{margin-top:0}
.m-legal .doc p{font-size:14px;color:var(--ink2);margin-bottom:.9rem;max-width:74ch}
.m-legal .doc ul{margin:0 0 1rem 1.1rem;font-size:14px;color:var(--ink2)}
.m-legal .doc li{margin:.35rem 0}
.m-legal .upd{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:2.4rem;padding-top:1rem;border-top:.5px solid var(--line)}
@media(max-width:900px){.m-legal{grid-template-columns:1fr}.m-legal .toc{position:static;
  display:flex;gap:1rem;overflow-x:auto;padding-bottom:.8rem;border-bottom:.5px solid var(--line)}
  .m-legal .toc a{border-left:none;padding-left:0;margin-left:0;white-space:nowrap}}

/* 71 crumb — schmale Brotkrume */
.m-crumb{display:flex;gap:.5rem;align-items:center;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.m-crumb a:hover{color:var(--ink)}
.m-crumb .sep{opacity:.5}

/* 72 consent — Einwilligung: Leiste unten, Auswahl in derselben Flaeche */
.zzc-veil{position:fixed;inset:0;z-index:90;background:rgba(22,19,15,.4);
  opacity:0;visibility:hidden;transition:opacity var(--t-m) var(--e),visibility 0s linear var(--t-m)}
.zzc-veil.on{opacity:1;visibility:visible;transition:opacity var(--t-m) var(--e),visibility 0s}
.zzc{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--paper);
  border-top:.5px solid var(--line);transform:translateY(101%);
  transition:transform var(--t-m) var(--e)}
.zzc.on{transform:none}
.zzc .in{max-width:var(--maxw);margin:0 auto;padding:clamp(1.2rem,3vw,2rem) var(--pad-x)}
.zzc .top{display:grid;grid-template-columns:1fr auto;gap:clamp(1rem,3vw,2.6rem);align-items:end}
.zzc h3{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;margin-bottom:.6rem}
.zzc p{font-size:13px;color:var(--ink2);max-width:64ch}
.zzc p a{text-decoration:underline;text-underline-offset:3px}
.zzc .btns{display:flex;gap:.6rem;flex-wrap:wrap}
.zzc .b{border:.5px solid var(--ink);padding:.7rem 1.3rem;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;white-space:nowrap;
  transition:background var(--t-s) var(--e),color var(--t-s) var(--e)}
.zzc .b.solid{background:var(--ink);color:var(--paper)}
.zzc .b:hover{background:var(--ink);color:var(--paper)}
.zzc .b.solid:hover{background:transparent;color:var(--ink)}
.zzc .b.ghost{border-color:var(--line);color:var(--ink2)}
.zzc .opts{max-height:0;overflow:hidden;transition:max-height var(--t-m) var(--e)}
.zzc.det .opts{max-height:min(48vh,460px);overflow-y:auto}
.zzc .opt{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;
  padding:1rem 0;border-top:.5px solid var(--line-soft)}
.zzc .opt:first-child{margin-top:1.4rem}
.zzc .opt .nm{font-size:14px;font-weight:600}
.zzc .opt .ds{font-size:12.5px;color:var(--ink2);margin-top:.2rem;max-width:62ch}
.zzc .opt .vd{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.tg2{width:42px;height:24px;border-radius:999px;background:var(--line);border:none;
  position:relative;flex-shrink:0;transition:background var(--t-s) var(--e)}
.tg2::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--paper);transition:transform var(--t-s) var(--e)}
.tg2.on{background:var(--ink)}.tg2.on::after{transform:translateX(18px)}
.tg2[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.zzc .top{grid-template-columns:1fr}.zzc .btns{width:100%}
  .zzc .b{flex:1;text-align:center}}

/* 73 newsletter-inline — Anmeldung mitten im Fluss, nicht als Popup */
.m-news{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3.4rem);align-items:end}
.m-news form{display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--ink);
  padding-bottom:.7rem}
.m-news input{flex:1;border:none;background:none;outline:none;font-size:15px;min-width:0}
.m-news input::placeholder{color:var(--muted)}
.m-news button{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.m-news .fine{font-size:10.5px;color:var(--muted);margin-top:.8rem}
@media(max-width:800px){.m-news{grid-template-columns:1fr}}

/* 74 lang-switch — Sprach- und Regionwahl als ruhige Liste */
.m-lang{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line-soft)}
.m-lang a{background:var(--paper);padding:.9rem 1rem;display:flex;gap:.7rem;align-items:baseline;
  transition:background var(--t-s) var(--e)}
.m-lang a:hover{background:var(--surface)}
.m-lang .cc{font-size:10px;letter-spacing:.1em;color:var(--muted);min-width:20px}
.m-lang .nm{font-size:13.5px}

/* 75 toast — kurze Rueckmeldung, verschwindet von selbst */
.zzt{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,120%);z-index:96;
  background:var(--ink);color:var(--paper);padding:.75rem 1.3rem;font-size:12.5px;
  border-radius:100px;transition:transform var(--t-m) var(--e)}
.zzt.on{transform:translate(-50%,0)}