/* =============================================================================================
   Stories als Magazin (1.21.0)
   Geladen nur auf Story-Übersicht und Story, wenn die Magazin-Ansicht aktiv ist
   (inc/stories-magazin.php). Alles ist unter .sm eingehängt und stört den Rest der Seite nicht.

   Inhalt
     1. Grundlagen: Raster-Maße, Farben, Schrift, Bausteine allgemein
     2. Bausteine der Übersicht (je ein Abschnitt, Namen wie template-parts/stories/baustein-*.php)
     3. Story-Welt (geöffnete Story)
     4. Mandelcroissant
     5. Bewegung (nur wenn erwünscht) und Handy
   Raster: 1 Feld = Breite/48 (--u), sichtbare Rasterzelle = 2 Felder (--c), am Handy Breite/16.
   Schwellen (dort, wo das Layout bricht): bis 820 px Handy-Anordnung; 600–820 px davon die Tablet-Lesebreite (Rand 48 px);
   ab 821 px Magazin-Raster; über 1440 px wandert der Rand (--rand) mit der Spalte mit; Fensterhöhe unter 520 px (Handy quer,
   Zoom 200 %) ohne „Scrollen“ und ohne Scroll-Bühnen. Textbreite --mass = 32em (60–75 Zeichen).
   ============================================================================================= */

/* ---------- 1. Grundlagen ---------- */
.sm {
	--u: calc(min(100vw - var(--scrollbar-width, 0px), 1440px) / 48); /* wie die Website: höchstens 1440 px breit */
	--c: calc(var(--u) * 2);
	--rand: max(calc(var(--u) * 3), calc((100vw - var(--scrollbar-width, 0px) - 1440px) / 2 + var(--u) * 3)); /* Seitenrand: über 1440 px mittig mit der Spalte */
	--mass: 32em; /* Textbreite: ca. 60–75 Zeichen je Zeile in der schmalen Köck-Schrift */
	--g: var(--jh-accent, #b0c7a6);
	--g-hell: color-mix(in srgb, var(--g) 28%, #fff);
	--serif: new-spirit-condensed, "Instrument Serif", Georgia, serif;
	--sans: acumin-pro-condensed, "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--ease-io: cubic-bezier(.77, 0, .175, 1);
	--t-s: 16px;
	--t-m: 18px;
	--t-l: 24px;
	color: #000;
	font-family: var(--sans);
	font-size: var(--t-m);
	line-height: 1.5;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

/* Hervorhebung in allen Stories gleich (1.46.3): ein Streifen in der Rasterfarbe hinter dem unteren Teil des Worts, von der
   Grundlinie aufwärts. Höhe --sm-streifen (Standard .3em); Stories mit Raster-Überschrift setzen eine halbe Zelle, dann liegt
   er genau zwischen Rasterlinie und halber Linie. Farbe --sm-streifen-farbe (Rasterfarbe der Übersicht), sonst --g. */
.sm .sm-streifen, .koeck-caro .kc-lead strong, .koeck-schwaiger .ws-lead strong, .koeck-roggi .kr-h2 strong {
	font-weight: inherit; text-decoration: underline var(--sm-streifen-farbe, var(--g));
	text-decoration-thickness: var(--sm-streifen, .3em); text-underline-offset: calc(var(--sm-streifen, .3em) * -1);
	text-decoration-skip-ink: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
.sm img { display: block; max-width: 100%; height: auto; }
.sm ::selection { background: var(--g); color: #000; }


/* Ein Baustein ist eine Karte: der ganze Baustein ist ein Link */
.sm-story { position: relative; }
.sm-karte { display: block; color: inherit; text-decoration: none; touch-action: manipulation; }
.sm-karte:focus-visible { outline: 3px solid #000; outline-offset: 6px; }

.sm-h { margin: 0; font-family: var(--serif); font-weight: 300; letter-spacing: -.03em; line-height: 1; text-wrap: balance; hyphens: manual; }
.sm-kicker { margin: 0 0 16px; font: 400 var(--t-s)/1.2 var(--sans); letter-spacing: .01em; }
.sm-kopfzeile .sm-h { padding-bottom: .12em; } /* Unterlängen des großen Titels (Backstage) berühren die Unterzeile nicht */
.sm-unterzeile { margin: 14px 0 0; font: 600 var(--t-s)/1.35 var(--sans); }
.sm-teaser { margin: 16px 0 0; max-width: 34em; font-size: var(--t-m); line-height: 1.5; hyphens: auto; }
.sm-satz { margin: 22px 0 0; max-width: 24em; font: 300 var(--t-l)/1.15 var(--serif); letter-spacing: -.01em; }
.sm-satz-von { margin: 10px 0 0; font: 600 var(--t-s)/1.3 var(--sans); }
.sm-mehr {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 0 6px;
	font: 600 14px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
	border-bottom: 2px solid currentColor; user-select: none; -webkit-user-select: none;
}
.sm-pfeil { display: inline-block; transition: transform .2s var(--ease-out); }

/* Fotos: füllen ihren Rahmen */
.sm-foto { position: relative; overflow: hidden; background: #eee; }
.sm-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.sm-karte img { -webkit-touch-callout: none; }

/* Sprungmarke je Story (Zurück aus der geöffneten Story): Platz fürs mitlaufende Menü lassen */
.sm-anker { display: block; height: 0; scroll-margin-top: 48px; } /* beim Ankommen ist das mitlaufende Menü eingefahren */

/* Köck-Raster (nur auf Weiß) */
.sm-raster { position: relative; isolation: isolate; }
/* 1.45.0: eigenes Raster-Element im Kärtchen für den Übergang (baustein-collage.php) – deckt den Raster der Karte genau ab */
.sm-karte > .sm-raster-vt { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sm-karte:has(> .sm-raster-vt)::before, .sm-karte:has(> .sm-raster-vt)::after { content: none; }
/* Wie der Raster im Kopf der Website: ein Feld Rand links und rechts, dazwischen nur ganze Zellen
   (Breite 46 Felder = 23 Zellen, am Handy 14 Felder = 7 Zellen), oben und unten mit geschlossener Linie.
   Die Höhe wird auf ganze Zellen gerundet (mask-repeat: round). Farbe = Seitenfarbe. */
.sm-raster::before, .sm-raster::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--u); right: var(--u); pointer-events: none; }
.sm-raster::before {
	background: var(--g);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 .5H60M.5 0V60' stroke='%23000' fill='none'/%3E%3C/svg%3E") 0 0 / var(--c) var(--c) repeat round;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 .5H60M.5 0V60' stroke='%23000' fill='none'/%3E%3C/svg%3E") 0 0 / var(--c) var(--c) repeat round;
}
.sm-raster::after { border: 1px solid var(--g); } /* schließt rechts und unten */
@media screen { .sm-raster.sm-raster--bild::before { -webkit-mask: var(--sm-maske) 0 0 / 100% 100% no-repeat; mask: var(--sm-maske) 0 0 / 100% 100% no-repeat; } } /* lange Raster: ein Bild in echter Größe (jhSmRasterMaske in stories-magazin.js); Druck bleibt gekachelt (andere Breite) */

/* Störer: grüne Raute, 7° gedreht */
.sm-stoerer { position: absolute; width: 150px; height: 150px; display: grid; place-items: center; text-align: center; transform: rotate(-7deg); z-index: 3; }
.sm-stoerer::before { content: ""; position: absolute; inset: 22px; background: var(--g); border-radius: 10px; transform: rotate(45deg); }
.sm-stoerer span { position: relative; max-width: 96px; font: 300 21px/1.02 var(--serif); letter-spacing: -.01em; hyphens: auto; -webkit-hyphens: auto; }

/* Pfeiltasten (Zeitleiste, Slideshow) */
.sm-pfeile { display: flex; gap: 10px; }
.sm-pfeile[hidden] { display: none; }
.sm-pfeile button {
	width: 48px; height: 48px; border: 0; border-radius: 0; background: var(--g); color: #000; cursor: pointer;
	font: 400 22px/1 var(--sans); touch-action: manipulation; user-select: none; -webkit-user-select: none;
	transition: transform .16s var(--ease-out), background-color .2s ease, color .2s ease;
}
.sm-pfeile button:active { transform: scale(.96); }
.sm-pfeile button:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* Hover nur mit Maus – am Handy bliebe er sonst nach dem Antippen „hängen“ */
@media (hover: hover) and (pointer: fine) {
	.sm-karte:hover .sm-foto img { transform: scale(1.025); }
	.sm-karte:hover .sm-pfeil { transform: translateX(4px); }
	.sm-pfeile button:hover { background: #000; color: #fff; }
}

/* ---------- 2. Bausteine ---------- */

/* Aufmacher */
.sm-aufmacher .sm-karte { display: grid; grid-template-columns: repeat(48, var(--u)); padding: calc(var(--c) * 2) 0 var(--c); }
.sm-aufmacher .sm-foto { grid-column: 17 / 49; grid-row: 1; height: calc(var(--c) * 11); }
.sm-aufmacher .sm-kopf { grid-column: 3 / 30; grid-row: 1; align-self: start; margin-top: var(--c); z-index: 2; }
.sm-aufmacher .sm-kicker { display: inline-block; background: #fff; padding: 6px 10px 6px 0; margin: 0; }
.sm-aufmacher .sm-h { font-size: calc(var(--u) * 3.3); line-height: 1.12; } /* 1.12: der weiße Kasten der nächsten Zeile deckt die Unterlängen (p, g) der vorigen nicht mehr ab */
.sm-aufmacher.sm-lang .sm-h { font-size: calc(var(--u) * 2.4); }
.sm-aufmacher .sm-h span { background: #fff; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .02em .14em .08em 0; }
.sm-aufmacher .sm-band { max-width: calc(var(--u) * 13); background: #fff; padding: 18px 18px 4px 0; margin-top: 28px; }

/* Porträt mit Zitat */
.sm-portraet .sm-karte { display: grid; grid-template-columns: repeat(48, var(--u)); grid-template-rows: 1fr auto 1fr; padding: var(--c) 0; }
.sm-portraet .sm-gross { grid-column: 3 / 21; grid-row: 1 / 4; aspect-ratio: 4 / 5; }
.sm-portraet .sm-zitat { grid-column: 24 / 47; grid-row: 1; align-self: end; margin: 0; }
.sm-portraet .sm-zitat p { margin: 0; max-width: 17em; font: 300 clamp(30px, 3.2vw, 48px)/1.08 var(--serif); letter-spacing: -.02em; text-indent: -.35em; }
.sm-portraet .sm-zitat cite { display: block; margin-top: 18px; font: 600 13px/1.3 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.sm-portraet .sm-text { grid-column: 24 / 40; grid-row: 2; align-self: start; margin-top: calc(var(--c) * 1.2); }
.sm-portraet .sm-h { font-size: calc(var(--u) * 1.6); }
.sm-portraet .sm-klein { grid-column: 41 / 47; grid-row: 2; align-self: end; aspect-ratio: 3 / 2; }
.sm-portraet .sm-karte:not(:has(.sm-zitat)) .sm-text { grid-row: 1 / 4; align-self: center; margin: 0; }
.sm-portraet .sm-karte:not(:has(.sm-zitat)) .sm-h { font-size: calc(var(--u) * 2.2); }

/* Zitat als Teaser */
.sm-zitatkarte .sm-karte { display: grid; grid-template-columns: repeat(48, var(--u)); padding: calc(var(--c) * 2) 0; background: var(--g-hell); }
.sm-zitatkarte .sm-zitat { grid-column: 5 / 34; margin: 0; }
.sm-zitatkarte .sm-zitat p { margin: 0; font: 300 calc(var(--u) * 3.2)/1.02 var(--serif); letter-spacing: -.03em; text-indent: -.42em; text-wrap: balance; }
.sm-zitatkarte .sm-zitat cite { display: block; margin-top: 30px; font: 600 15px/1.4 var(--sans); font-style: normal; }
.sm-zitatkarte .sm-von { grid-column: 5 / 30; margin: 22px 0 0; font-size: var(--t-s); }
.sm-zitatkarte .sm-von-titel { font-weight: 600; }
.sm-zitatkarte .sm-von .sm-mehr { margin: 0 0 0 10px; padding: 2px 0; }
.sm-zitatkarte .sm-foto { grid-column: 36 / 47; grid-row: 1 / 3; align-self: center; aspect-ratio: 4 / 5; } /* groß genug, dass man sieht, was drauf ist (Sauerteig, Küchenchef …) */

/* Bildpaar */
.sm-bildpaar .sm-karte { display: grid; grid-template-columns: repeat(48, var(--u)); padding: calc(var(--c) * 2) 0 calc(var(--c) * 3); }
.sm-bildpaar .sm-gross { grid-column: 3 / 27; grid-row: 1; aspect-ratio: 1 / 1; }
.sm-bildpaar .sm-klein { grid-column: 23 / 33; grid-row: 1; align-self: end; aspect-ratio: 4 / 5; margin-bottom: calc(var(--c) * -2); border: var(--u) solid #fff; border-right: 0; border-bottom: 0; z-index: 2; background: #eee; }
.sm-bildpaar .sm-text { grid-column: 34 / 48; grid-row: 1; align-self: center; padding-right: var(--u); } /* mittig neben dem Bildpaar: keine leere untere Hälfte */
.sm-bildpaar .sm-h { font-size: calc(var(--u) * 2.1); }
.sm-bildpaar.sm-gespiegelt .sm-gross { grid-column: 23 / 47; }
.sm-bildpaar.sm-gespiegelt .sm-klein { grid-column: 17 / 27; border-left: 0; border-right: var(--u) solid #fff; }
.sm-bildpaar.sm-gespiegelt .sm-text { grid-column: 3 / 16; padding: 0; }

/* Duett */
.sm-duett { display: grid; grid-template-columns: repeat(48, var(--u)); padding: var(--c) 0 calc(var(--c) * 2); }
.sm-duett-a { grid-column: 3 / 25; }
.sm-duett-b { grid-column: 29 / 47; margin-top: calc(var(--c) * 3); }
.sm-duett-a .sm-foto { aspect-ratio: 3 / 2; }
.sm-duett-b .sm-foto { aspect-ratio: 4 / 3; }
.sm-duett .sm-h { margin-top: 26px; font-size: calc(var(--u) * 1.9); line-height: 1; }
.sm-duett.sm-allein .sm-duett-a { grid-column: 3 / 33; }

/* Zweites, viertes … Vorkommen desselben Bausteins gespiegelt (sm-var-b, jh_sm_baustein()) */
@media (min-width: 821px) {
	.sm-var-b.sm-zitatkarte .sm-zitat { grid-column: 17 / 46; }
	.sm-var-b.sm-zitatkarte .sm-von { grid-column: 17 / 42; }
	.sm-var-b.sm-zitatkarte .sm-foto { grid-column: 3 / 14; }
	.sm-var-b.sm-panorama .sm-band { margin-left: auto; margin-right: calc(var(--u) * 2); }
	.sm-var-b.sm-aufmacher .sm-foto { grid-column: 1 / 33; }
	.sm-var-b.sm-aufmacher .sm-kopf { grid-column: 21 / 47; }
	/* Porträt gespiegelt: so stehen Zitatkarte und Porträt nicht beide mit dem Foto links untereinander */
	.sm-var-b.sm-portraet .sm-gross { grid-column: 28 / 46; }
	.sm-var-b.sm-portraet .sm-zitat { grid-column: 4 / 26; }
	.sm-var-b.sm-portraet .sm-text { grid-column: 4 / 20; }
	.sm-var-b.sm-portraet .sm-klein { grid-column: 20 / 26; }
	.sm-var-b.sm-portraet .sm-karte:not(:has(.sm-zitat)) .sm-text { grid-column: 4 / 24; }
	.sm-var-b.sm-aufmacher .sm-h span { padding-left: .14em; } /* der Titel beginnt hier auf dem Foto: Weiß auch links */
	.sm-var-b.sm-aufmacher .sm-kicker, .sm-var-b.sm-aufmacher .sm-band { padding-left: 18px; }
}

/* Raster-Collage */
.sm-collage { margin: calc(var(--c) * 2) 0; }
.sm-collage .sm-karte { position: relative; display: grid; grid-template-columns: repeat(48, var(--u)); grid-auto-rows: var(--c); }
.sm-collage .sm-text { grid-column: 3 / 19; grid-row: 2 / 10; z-index: 2; }
.sm-collage .sm-h { font-size: calc(var(--u) * 2.9); line-height: var(--c); }
.sm-collage.sm-lang .sm-h { font-size: calc(var(--u) * 2.1); line-height: calc(var(--u) * 2); }
.sm-collage .sm-teaser { padding: 0; } /* wie die CI: Schrift direkt im Raster, ohne weißen Kasten */
.sm-collage .sm-objekt { grid-column: 24 / 37; grid-row: 1 / 12; position: relative; justify-self: center; width: fit-content; max-width: 100%; height: 100%; }
.sm-collage .sm-objekt { display: flex; align-items: center; }
.sm-collage .sm-objekt img { height: auto; width: auto; max-height: 100%; max-width: 100%; } /* nie beschneiden: manche Fotos tragen eigene Beschriftungen im Bild */
/* freigestellt: das Produkt steht frei auf dem Raster – Weiß im Foto wird durchsichtig (multiply), die Box ist so groß wie das Foto */
.sm-collage.sm-frei .sm-objekt { grid-column: 23 / 40; width: fit-content; height: auto; align-self: center; justify-self: center; } /* freigestellt: größer; Box so groß wie das Foto, damit die Beschriftungs-Striche am Produkt enden */
.sm-collage.sm-frei .sm-objekt { justify-content: center; }
.sm-collage.sm-frei .sm-objekt img { width: auto; height: auto; max-width: 100%; max-height: calc(var(--c) * 10); mix-blend-mode: multiply; } /* hohe Freisteller (Mandelcroissant) bleiben im Raster */
.sm-collage:not(.sm-frei) .sm-objekt img { max-height: calc(100% - var(--c) * 2); } /* Foto direkt im Raster (CI, kein weißer Rahmen); oben und unten bleibt eine Rasterzeile frei */
.sm-collage .sm-stoerer { grid-column: 38 / 43; grid-row: 8 / 11; position: relative; }
/* Beschriftungen mit Strich: 1 und 3 links vom Foto, 2 rechts */
.sm-labs { display: contents; } /* Hülle der Beschriftungen – nur bei „groß“ eine eigene Box (Liste im Raster) */
.sm-lab { position: absolute; display: flex; width: max-content; align-items: center; gap: 0; max-width: calc(var(--u) * 9); font: 400 20px/1.25 var(--serif); letter-spacing: -.005em; }
/* Text der Beschriftung auf Weiß: keine Rasterlinie läuft durch die Buchstaben (Lesbarkeit), Strich bleibt frei auf dem Raster */
.sm-lab > span { padding: 0 10px; } /* ohne weißen Kasten (CI) – der Abstand hält den Strich vom Text weg */
.sm-lab::after { content: ""; flex: none; width: calc(var(--u) * 2.5); height: 1px; background: #000; } /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
/* alle Beschriftungen auf der Seite, die vom Text weg zeigt – so stößt keine an den Titel */
.sm-lab { left: calc(100% - var(--u) * 1.2); flex-direction: row-reverse; text-align: left; }
.sm-lab-1 { top: 26%; } .sm-lab-2 { top: 48%; } .sm-lab-3 { top: 76%; }
/* Foto links, Text rechts */
.sm-collage.sm-seite-links .sm-text { grid-column: 31 / 47; }
.sm-collage.sm-seite-links .sm-objekt { grid-column: 10 / 27; }
.sm-collage.sm-seite-links .sm-stoerer { grid-column: 22 / 27; grid-row: 9 / 12; } /* unten am Foto – nie in der Textspalte */
.sm-collage.sm-seite-links .sm-lab { left: auto; right: calc(100% - var(--u) * 1.2); flex-direction: row; text-align: right; max-width: calc(var(--u) * 8); } /* acht Felder Platz links vom Foto: Beschriftung in ein bis zwei Zeilen */
/* breit: großes Querformat neben dem Text */
.sm-collage.sm-seite-breit .sm-text { grid-column: 3 / 17; }
.sm-collage.sm-seite-breit .sm-objekt { grid-column: 19 / 47; grid-row: 2 / 11; align-items: center; }
.sm-collage.sm-seite-breit .sm-objekt img { width: 100%; height: auto; border: 0; mix-blend-mode: multiply; }
.sm-collage.sm-alpha .sm-objekt img { mix-blend-mode: normal; } /* nach „breit“: PNG mit Transparenz nie multiplizieren */
/* groß: Freisteller über zwei Drittel der Breite, ragt oben über den Raster hinaus; die Beschriftungen
   stehen als Liste unter „Mehr lesen“ im Raster (ohne Strich – sie würden sonst das Produkt verdecken) */
@media (min-width: 821px) {
	.sm-collage.sm-seite-gross { margin: calc(var(--c) * 3.5) 0; }
	.sm-collage.sm-seite-gross .sm-text { grid-column: 4 / 20; } /* endet vor dem Sackerl */
	.sm-collage.sm-seite-gross .sm-objekt { display: contents; } /* Foto und Beschriftungen werden eigene Felder des Rasters */
	.sm-collage.sm-seite-gross .sm-objekt img { grid-column: 19 / 49; grid-row: 1 / 12; align-self: start; width: 100%; max-width: none; max-height: none; margin-top: calc(var(--c) * -2); } /* bricht oben aus dem Raster aus */
	/* „Groß“ ohne Hochformat: die Beschriftungen stehen als Liste im Text unter „Mehr lesen“ (jh_sm_beschriftungen) –
	   halbe Zelle Zeilenabstand, eine halbe Zelle zwischen den Punkten, jede Grundlinie auf einer Raster- oder Halblinie.
	   Die Textzeile wächst mit (Zeile 2 mindestens 10 Zellen hoch), js 2b rundet auf ganze Zellen. */
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-karte { grid-template-rows: var(--c) minmax(calc(var(--c) * 10), auto); }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-text { grid-row: 2; }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-objekt img { grid-row: 1 / 3; }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-labs { display: block; position: relative; top: calc(var(--c) * 3 / 4 - .34em); margin-top: 0; font: 400 20px/1 var(--serif); }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-lab { position: static; display: block; width: auto; max-width: none; transform: none; line-height: calc(var(--c) / 2); }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-lab + .sm-lab { margin-top: calc(var(--c) / 2); }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-lab > span { display: block; padding-left: calc(var(--u) * 1.5 + 10px); text-indent: calc((var(--u) * 1.5 + 10px) * -1); text-wrap: pretty; }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-lab > span::before { content: ""; display: inline-block; width: calc(var(--u) * 1.5); height: 1px; margin-right: 10px; vertical-align: .3em; background: currentColor; } /* kurzer Strich wie bei den Beschriftungen am Foto – zeigt: Merkmale des Produkts */
	.sm-collage.sm-seite-gross .sm-lab::after { display: none; }
	.sm-collage.sm-seite-gross .sm-lab > span { padding-left: 0; } /* Liste beginnt auf der Rasterlinie wie der Titel */
}
/* groß + Hochformat (Mandelcroissant, Walnuss-Roggi): das Foto endet rechts auf Feld 36, damit die
   Beschriftungen rechts daneben im Raster Platz haben; das Foto ist höher als der Raster und ragt oben und unten hinaus;
   die Beschriftungen bleiben mit Strich am Foto (sie zeigen auf die Schichten) */
@media (min-width: 821px) {
	.sm-collage.sm-seite-gross.sm-hochformat .sm-objekt { display: flex; position: relative; grid-column: 20 / 37; grid-row: 1 / 12; align-self: start; justify-self: end; width: fit-content; height: auto; margin-top: calc(var(--c) * -1.5); }
	.sm-collage.sm-seite-gross.sm-hochformat .sm-objekt img { width: auto; height: calc(var(--c) * 14); max-height: none; margin: 0; }
	.sm-collage.sm-seite-gross.sm-hochformat .sm-lab { position: absolute; width: max-content; top: auto; left: calc(100% - var(--u) * 1.2); right: auto; flex-direction: row-reverse; max-width: calc(var(--u) * 10); line-height: 1.25; grid-column: auto; grid-row: auto; }
	.sm-collage.sm-seite-gross.sm-hochformat .sm-lab::after { display: block; }
	.sm-collage.sm-seite-gross.sm-hochformat .sm-lab > span { padding: 0 10px; }
	.sm-collage.sm-seite-gross.sm-hochformat .sm-lab-1 { top: 26%; } .sm-collage.sm-seite-gross.sm-hochformat .sm-lab-2 { top: 50%; } .sm-collage.sm-seite-gross.sm-hochformat .sm-lab-3 { top: 70%; }
}

/* Titel, Unterzeile und „Mehr lesen“ genau im Raster – wie das Menü im Kopf der Website:
   Raster dort und hier gleich groß (Zelle = --c = 60 px bei 1440 px, ein Feld Rand), Schrift 64 px auf 60 px
   (16/15 einer Zelle), jede Titelzeile steht mit der Grundlinie auf einer Rasterlinie (top-Verschiebung aus den
   Maßen der Schrift: Grundlinie liegt bei Zeilenhöhe/2 + 0,3375 em). Der Text beginnt und endet auf senkrechten
   Linien (ungerade Felder). Unterzeile und „Mehr lesen“ ohne weißen Kasten (CI); die Unterzeile
   wird per Script auf ganze Zellen gerundet (js 2b). Grundlinie = Zeilenhöhe/2 + 0,34 em (gemessen, Titel- und Textschrift). */
@media (min-width: 821px) {
	.sm-collage .sm-text { grid-column: 4 / 22; grid-row: 2 / 12; }
	.sm-collage.sm-seite-links .sm-text { grid-column: 32 / 48; }
	.sm-collage.sm-seite-breit .sm-text { grid-column: 4 / 18; }
	.sm-collage .sm-h, .sm-collage.sm-lang .sm-h, .sm-story.sm-collage .sm-h.sm-l, .sm-story.sm-collage .sm-h.sm-xl { position: relative; top: calc(var(--c) / 2 - .3375em); font-size: calc(var(--c) * 16 / 15); line-height: var(--c); letter-spacing: -.02em; }
	.sm-collage .sm-teaser { position: relative; box-sizing: border-box; max-width: none; margin: 0; padding: 0 var(--u) 0 0; }
	.sm-collage .sm-mehr { box-sizing: border-box; height: var(--c); margin: 0; padding: 0 0 10px; align-items: flex-end; } /* Unterstrich liegt auf der Rasterlinie */
}
@media (min-width: 821px) {
	.sm-collage .sm-teaser { top: calc(var(--c) * 3 / 4 - .34em); line-height: calc(var(--c) / 2); } /* halbe Zelle je Zeile: die erste Grundlinie und jede zweite liegen auf einer Rasterlinie – liest sich wie Text, keine Lücken */
}
@media (min-width: 821px) and (max-width: 999px) {
	.sm-collage .sm-teaser { font-size: 15px; } /* halbe Zelle ist hier nur 17–19 px hoch */
}
/* Kurze Titel über zwei Rasterzeilen (Wunsch Dominik Köck): doppelt so groß, Grundlinie wieder auf einer Linie –
   so bleibt neben einem Produkt keine große leere Rasterfläche. Lange Titel (sm-lang) und Tablet bleiben einzeilig hoch. */
@media (min-width: 1181px) {
	.sm-collage:not(.sm-lang) .sm-h, .sm-story.sm-collage:not(.sm-lang) .sm-h.sm-l { top: calc(var(--c) - .3375em); font-size: calc(var(--c) * 32 / 15); line-height: calc(var(--c) * 2); letter-spacing: -.025em; }
}

/* Vorher-Nachher-Schieber */
.sm-vergleich { display: grid; grid-template-columns: repeat(48, var(--u)); padding: calc(var(--c) * 2) 0; align-items: end; }
.sm-schieber { grid-column: 3 / 35; grid-row: 1; position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; background: #eee; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sm-schieber .sm-foto { position: absolute; inset: 0; }
.sm-schieber .sm-vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #fff; }
.sm-schieber .sm-vorher img { mix-blend-mode: multiply; }
.sm-schieber-regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; touch-action: pan-y; }
.sm-griff {
	position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; z-index: 2; pointer-events: none;
	transform: translateX(calc(var(--p, 50) * 1cqw)); /* nur transform – kein Layout pro Bild */
}
.sm-griff::before { content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; background: var(--g); transform: rotate(45deg); }
.sm-griff span { position: absolute; top: 50%; transform: translateY(-50%); font: 400 22px/1 var(--sans); color: #000; }
.sm-griff span:first-child { right: 6px; } .sm-griff span:last-child { left: 6px; }
.sm-schieber:has(.sm-schieber-regler:focus-visible) { outline: 3px solid #000; outline-offset: 4px; }
/* Feinschliff: Klick auf die Fläche gleitet kurz zum Ziel, beim Ziehen folgt der Griff dem Finger ohne Verzögerung */
.sm-schieber .sm-vorher { transition: clip-path .32s var(--ease-io); }
.sm-griff { transition: transform .32s var(--ease-io); } /* ease-in-out: Bewegung auf dem Bildschirm */
.sm-griff::before { transition: transform .16s var(--ease-out); }
.sm-schieber.sm-zieht .sm-vorher, .sm-schieber.sm-zieht .sm-griff { transition: none; }
.sm-schieber.sm-zieht .sm-griff::before { transform: rotate(45deg) scale(.9); }
.sm-vergleich .sm-text { grid-column: 37 / 47; grid-row: 1; align-self: end; padding-bottom: var(--c); }
.sm-vergleich .sm-h { font-size: calc(var(--u) * 2); }

/* Panorama */
.sm-panorama { margin-top: calc(var(--c) * 3); }
.sm-panorama .sm-foto { height: min(72vh, 720px); }
.sm-panorama .sm-band { position: relative; width: calc(var(--u) * 28); margin: calc(var(--c) * -2) 0 0 calc(var(--u) * 2); background: #fff; padding: var(--c) var(--c) 0 var(--u); }
.sm-panorama .sm-h { font-size: calc(var(--u) * 2.6); }
@media (min-width: 821px) { /* Band so breit wie sein Inhalt, Titel groß – auch bei langen Titeln (sonst greift die kleine Längen-Stufe) */
	.sm-panorama .sm-band { width: fit-content; max-width: calc(var(--u) * 20); padding: var(--c) var(--c) 0 calc(var(--u) * 1.5); }
	.sm-story.sm-panorama .sm-h, .sm-story.sm-panorama .sm-h.sm-l { font-size: calc(var(--u) * 2.6); line-height: 1.02; }
	.sm-story.sm-panorama .sm-h.sm-xl { font-size: calc(var(--u) * 2.2); line-height: 1.04; }
	.sm-panorama .sm-unterzeile { font-size: 18px; line-height: 1.35; margin-top: 22px; } /* Unterzeile lesbar, nicht als Fußnote */
	.sm-panorama .sm-satz { font-size: 24px; line-height: 1.25; }
}

/* Kolumne mit Zeichnung */
.sm-kolumne .sm-karte { display: grid; grid-template-columns: repeat(48, var(--u)); padding: var(--c) 0; }
.sm-kolumne .sm-zeichnung { grid-column: 3 / 19; mix-blend-mode: multiply; }
.sm-kolumne .sm-zeichnung img { width: 100%; }
.sm-kolumne .sm-text { grid-column: 22 / 46; align-self: center; }
.sm-kolumne .sm-h { font-size: calc(var(--u) * 2.1); }

/* Zeitleiste */
.sm-zeitleiste { padding: var(--c) 0; }
.sm-zeitleiste .sm-kopfzeile { padding: 0 calc(var(--u) * 3); }
.sm-zeitleiste .sm-h { font-size: calc(var(--u) * 3); line-height: .95; }
.sm-bahn { display: flex; gap: var(--u); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc(var(--u) * 3); padding: 42px calc(var(--u) * 3) 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sm-bahn::-webkit-scrollbar { display: none; }
.sm-bahn:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
.sm-station { flex: 0 0 calc(var(--u) * 9); scroll-snap-align: start; position: relative; padding-top: 34px; margin: 0; }
.sm-station::before { content: ""; position: absolute; left: 0; right: calc(var(--u) * -1); top: 9px; height: 1px; background: #000; } /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
.sm-station::after { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; background: var(--g); transform: rotate(45deg); }
.sm-station b { display: block; font: 300 34px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.sm-station i { display: block; margin: 8px 0 12px; font: 600 var(--t-s)/1.3 var(--sans); font-style: normal; }
.sm-station .sm-foto { aspect-ratio: 4 / 5; }
.sm-station-ohne { flex-basis: calc(var(--u) * 5); } /* Uhrzeit ohne Foto: schmal, der Zeitstrahl läuft durch */
.sm-station-feld { display: flex; align-items: flex-end; box-sizing: border-box; height: calc(var(--u) * 9 * 1.25); margin-top: calc(8px + var(--t-s) * 1.3 + 12px); padding: 16px 14px; background: var(--g-hell); font: 300 24px/1.08 var(--serif); letter-spacing: -.01em; hyphens: auto; } /* Oberkante wie die Fotos */
.sm-station-zitat { display: flex; flex-direction: column; justify-content: center; background: var(--g); padding: 28px 24px; margin-top: 34px; }
.sm-station-zitat::before, .sm-station-zitat::after { display: none; }
.sm-station-zitat p { margin: 0; font: 300 var(--t-l)/1.12 var(--serif); }
.sm-station-zitat cite { margin-top: 16px; font: 600 14px/1.3 var(--sans); font-style: normal; }
.sm-station-weiter { color: inherit; text-decoration: none; } /* Teaser-Ende: der Rest der Nacht steht in der Story */
.sm-station-weiter b { white-space: nowrap; }
.sm-weiter-feld { display: flex; align-items: flex-end; box-sizing: border-box; aspect-ratio: 4 / 5; margin-top: calc(8px + var(--t-s) * 1.3 + 12px); padding: 20px; background: var(--g); } /* so hoch wie ein Foto, Oberkante wie bei den Fotos */
.sm-station-weiter:hover .sm-mehr, .sm-station-weiter:focus-visible .sm-mehr { text-decoration-thickness: 2px; }
.sm-zeitleiste .sm-unten { display: flex; justify-content: space-between; align-items: center; padding: 6px calc(var(--u) * 3) 0; }

/* Nachtseite (Feste) und ruhige Nachtseite (Abende) – Schwarz, nie mit Raster */
.sm-nacht { background: #000; color: #fff; padding: calc(var(--c) * 2) 0; margin: calc(var(--c) * 2) 0; }
.sm-nacht-innen { display: grid; grid-template-columns: repeat(48, var(--u)); }
.sm-nacht .sm-text { grid-column: 3 / 30; }
.sm-nacht .sm-h { font-size: calc(var(--u) * 3.2); }
.sm-nacht .sm-teaser { color: #d4d4d4; }
.sm-nacht .sm-zitat { grid-column: 33 / 47; align-self: end; margin: 0; }
.sm-nacht .sm-zitat p { margin: 0; font: 300 var(--t-l)/1.15 var(--serif); }
.sm-nacht .sm-zitat cite { display: block; margin-top: 12px; font: 600 13px/1.4 var(--sans); font-style: normal; letter-spacing: .06em; }
.sm-slides { grid-column: 3 / 47; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; margin-top: var(--c); touch-action: pan-y; }
.sm-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.sm-slide.sm-an { opacity: 1; z-index: 1; }
.sm-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.sm-slide.sm-an img { transform: none; }
.sm-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 22px; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); font: 300 22px/1.2 var(--serif); } /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
.sm-slides .sm-punkte { position: absolute; left: 28px; top: 24px; z-index: 2; display: flex; gap: 6px; }
.sm-slides .sm-punkte i { width: 22px; height: 2px; background: rgba(255,255,255,.35); transition: background-color .3s ease; }
.sm-slides .sm-punkte i.sm-an { background: #fff; }
.sm-slides .sm-pfeile { position: absolute; right: 20px; top: 20px; z-index: 2; }
.sm-abend .sm-trio { grid-column: 3 / 47; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--u); margin-top: var(--c); }
.sm-abend .sm-trio .sm-foto { aspect-ratio: 3 / 4; background: #111; }
.sm-abend .sm-trio .sm-foto:first-child { aspect-ratio: auto; }

/* Zahlen */
.sm-zahlen .sm-karte { display: grid; grid-template-columns: repeat(48, var(--u)); padding: var(--c) 0; }
.sm-zahlen .sm-text { grid-column: 3 / 22; grid-row: 1; }
.sm-zahlen .sm-h { font-size: calc(var(--u) * 2.3); }
.sm-zahlen .sm-foto { grid-column: 3 / 22; grid-row: 2; aspect-ratio: 4 / 3; margin-top: 36px; }
.sm-zahlenliste { grid-column: 25 / 47; grid-row: 1 / 3; align-self: center; list-style: none; margin: 0; padding: 0; }
.sm-zahlenliste li { padding: 0 0 calc(var(--c) * .6); }
.sm-zahlenliste b { display: inline-block; margin-bottom: 8px; padding: .12em .2em 0; background: var(--g); font: 300 calc(var(--u) * 2.6)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.sm-zahlenliste span { display: block; max-width: 30em; font-size: var(--t-s); line-height: 1.4; }
.sm-zahlenliste .sm-stand { padding: 0; font-size: 14px; color: #555; }

/* Album */
.sm-album .sm-karte { display: grid; grid-template-columns: repeat(48, var(--u)); align-items: start; padding: var(--c) 0 calc(var(--c) * 1.5); }
.sm-album .sm-text { grid-column: 3 / 19; grid-row: 1; }
.sm-album .sm-h { font-size: calc(var(--u) * 2.5); }
.sm-abzug { position: relative; z-index: 1; margin: 0; padding: 10px 10px 14px; background: #f2f2ef; transition: transform .5s var(--ease-out); }
.sm-abzug .sm-foto { aspect-ratio: 4 / 5; background: #ddd; }
.sm-abzug img { filter: grayscale(1) contrast(1.05); }
.sm-abzug figcaption { margin-top: 10px; font: 300 19px/1.1 var(--serif); }
.sm-album .sm-abzug-1 { grid-column: 21 / 30; grid-row: 1 / 3; transform: rotate(-2deg); }
.sm-album .sm-abzug-2 { grid-column: 30 / 39; grid-row: 1 / 3; margin-top: var(--c); transform: rotate(1.5deg); }
.sm-album .sm-abzug-3 { grid-column: 39 / 48; grid-row: 1 / 3; margin-top: calc(var(--u) * .6); transform: rotate(-1.2deg); }
.sm-album .sm-satz { grid-column: 3 / 19; grid-row: 2; align-self: end; margin-top: var(--c); font-size: calc(var(--u) * 1.15); }
.sm-album .sm-satz-von { grid-column: 3 / 19; grid-row: 3; } /* wer es sagt: unter dem Zitat, nicht neben dem Titel */
@media (hover: hover) and (pointer: fine) {
	.sm-album .sm-karte:hover .sm-abzug { transform: rotate(0) scale(1.02); z-index: 2; }
}

/* Entwürfe (nur für die Redaktion sichtbar) */
.sm-entwurf { position: relative; }
.sm-entwurf > span { position: absolute; z-index: 20; top: 12px; left: calc(var(--u) * 3); padding: 6px 10px; background: #000; color: #fff; font: 600 13px/1 var(--sans); pointer-events: none; }
.sm-entwurf .sm-story { outline: 2px dashed rgba(0,0,0,.25); outline-offset: -2px; }
.sm-zahlenliste b { font-variant-numeric: tabular-nums; }

/* Lange Originaltitel kleiner (Klasse aus jh_sm_daten) – die Wörter bleiben, die Größe weicht */
.sm-story .sm-h.sm-l { font-size: calc(var(--u) * 1.75); line-height: 1.02; }
.sm-story .sm-h.sm-xl { font-size: calc(var(--u) * 1.5); line-height: 1.04; }
.sm-story.sm-aufmacher .sm-h.sm-l { font-size: calc(var(--u) * 2.3); line-height: 1.12; } /* Kästen pro Zeile: Abstand, damit Unterlängen frei bleiben */

/* ---------- 3. Story-Welt ---------- */
body.sm-welt-seite .main-container { padding-top: 0; }   /* der Platz fürs Menü entfällt */
body.sm-aktiv .nav.is-fixed { background: #fff; } /* Übersicht: das mitlaufende Menü deckt die ganze Spaltenbreite – sonst ragen schwarze Flächen links und rechts neben dem Raster hervor */
/* Vollbild auch auf Bildschirmen breiter als 1440 px (die Seite selbst ist höchstens 1440 px breit) */
.sm-held, .sm-naechste, .sm-buehne { width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2); }
.sm-welt { background: #000; color: #f2f2f2; border-image: linear-gradient(#000 0 0) fill 0 / / 0 100vmax; } /* taste-skill-ignore: Schwarz auch neben der 1440-px-Spalte (kein Verlauf, eine Fläche); der Fuß bleibt weiß */

/* Leiste: Logo, Schließen, Lesefortschritt */
.sm-leiste {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; max-width: none; margin: 0; grid-template-columns: none; grid-template-rows: none; justify-content: space-between; align-items: center;
	padding: max(16px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 28px max(18px, env(safe-area-inset-left, 0px));
	pointer-events: none; color: #fff;
	/* Apple „Scroll edge effect“ statt Balken: oben leicht abgedunkelt, damit Logo und Schließen über jedem Foto lesbar bleiben */
	background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
}
body:has(.sm-welt--hell) .sm-zu { background: rgba(255,255,255,.8); }
body:has(.sm-welt--hell) .sm-leiste { color: #000; background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0)); } /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
.sm-leiste a { pointer-events: auto; color: inherit; }
.sm-leiste-logo svg { width: 64px; height: auto; fill: currentColor; display: block; }
.sm-zu { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.45); touch-action: manipulation; transition: transform .2s var(--ease-out); }
.sm-zu:active { transform: scale(.94); }
.sm-zu:focus-visible, .sm-leiste-logo:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sm-zu:hover { transform: rotate(90deg); } }
.sm-fortschritt { position: fixed; z-index: 60; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; background: rgba(255,255,255,.12); pointer-events: none; }
.sm-fortschritt i { display: block; height: 100%; background: var(--jh-accent, #b0c7a6); transform-origin: 0 50%; transform: scaleX(0); }

/* Kopf: Foto über den ganzen Bildschirm, leichter schwarzer Verlauf */
.sm-held { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; overflow: hidden; } /* Mindesthöhe statt fester Höhe: bei niedrigen Fenstern (Handy quer, Laptop, Zoom) wächst der Kopf mit, nichts wird abgeschnitten */ /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
.sm-held-bild { position: absolute; inset: -6% 0 0 0; will-change: transform; }
.sm-held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sm-held-schatten { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9) 0, rgba(0,0,0,.65) 38%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.35) 100%); } /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
.sm-held-kopf { position: relative; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--rand) max(calc(var(--c) * 2), 112px); padding-bottom: calc(max(calc(var(--c) * 2), 112px) + env(safe-area-inset-bottom, 0px)); } /* oben Platz für Logo und Schließen, unten für „Scrollen“ */
.sm-held .sm-kicker { color: #fff; }
.sm-titel { margin: 0; max-width: 13em; font: 300 clamp(48px, calc(var(--u) * 4.2), 132px)/.92 var(--serif); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.sm-titel .sm-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.1em; }
.sm-titel .sm-w > span { display: inline-block; }
.sm-held-unterzeile { margin: 22px 0 0; font: 300 clamp(22px, 2vw, 30px)/1.2 var(--serif); color: #fff; }
.sm-scrollen { z-index: 3; position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); font: 400 var(--t-s)/1 var(--sans); letter-spacing: .02em; color: #fff; opacity: .9; }
.sm-scrollen::after { content: ""; display: block; width: 1px; height: 38px; margin: 12px auto 0; background: currentColor; transform-origin: top; }

/* Text der Story auf Schwarz */
.sm-welt-text { padding: calc(var(--c) * 2) calc(var(--u) * 3) calc(var(--c) * 3); color: #d9d9d9; font-size: var(--t-m); line-height: 1.65; }
.sm-welt-text > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.sm-welt-text p { margin: 0 0 1.1em; hyphens: auto; }
.sm-welt-text > p, .sm-welt-text .wp-block-group > p { max-width: var(--mass); margin-left: auto; margin-right: auto; } /* Zeilenlänge 60–75 Zeichen */
.sm-welt-text :is(.wp-block-column, .wp-block-group, .sm-i-kasten) > :is(p, ul, ol) { max-width: var(--mass); }
.sm-welt-text strong { color: #fff; }
.sm-welt-text a { color: #fff; text-decoration-color: var(--g); text-underline-offset: 3px; }
.sm-welt-text h2, .sm-welt-text h3, .sm-welt-text h4 { color: #fff; font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
.sm-welt-text h2 { margin: 1.4em auto .6em; font-size: clamp(30px, calc(var(--u) * 2), 56px); }
.sm-welt-text h3 { margin: 1.4em auto .5em; font-size: clamp(28px, 2.6vw, 44px); }
.sm-welt-text h4 { margin: 1.6em 0 .4em; font-size: clamp(24px, 2vw, 32px); }
.sm-welt-text h2 strong, .sm-welt-text h3 strong, .sm-welt-text h4 strong { font-weight: inherit; }
.sm-welt-text figure { margin: calc(var(--c) * 1.5) auto; }
.sm-welt-text figure img { width: 100%; height: auto; }
.sm-welt-text figure:not(.sm-slide, .sm-film-bild):not(.sm-i-vollbild *, .sm-i-streifen *) img { max-height: max(84svh, 300px); object-fit: contain; } /* Fotos höchstens einen Bildschirm hoch, ganz zu sehen; Breite bleibt (Vollbild und Bildleisten haben eigene Regeln) */
.sm-welt-text p.h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(33px, calc(1.8vw + 26px), 48px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; hyphens: manual; } /* Absatz im Stil „h3“ (Agentur-Klasse, rechnet nach Fensterbreite und schrumpft ab 768 px): fließend 33–48 px */
.sm-welt-text .text-small { font-size: max(14px, .82em); } /* Kleingedrucktes (Kurzbio, Hinweise): nie unter 14 px – die Agentur-Klasse rechnet am Handy und Tablet 10 px */
.sm-welt-text figcaption { margin-top: 12px; color: #a8a8a8; font: 300 var(--t-l)/1.2 var(--serif); }
.sm-welt-text .wp-block-columns { display: flex; gap: calc(var(--u) * 3); align-items: flex-start; max-width: 1300px; margin: calc(var(--c) * 2) auto; }
.sm-welt-text .wp-block-column { flex: 1 1 0; min-width: 0; }
/* „Bild bleibt, Text zieht vorbei“: Spalte nur mit Foto bleibt stehen, die Textspalte scrollt */
.sm-welt-text .wp-block-column:has(> figure.wp-block-image:only-child) { position: sticky; top: 12vh; }
.sm-welt-text .wp-block-column:has(> figure.wp-block-image:only-child) figure { margin: 0; }
/* Zitate */
.sm-welt-text blockquote, .sm-welt-text .wp-block-pullquote { position: relative; max-width: 1100px; margin: calc(var(--c) * 3) auto; padding: 120px 0 0; border: 0; text-align: left !important; }
/* Flächen mit eigener heller Hintergrundfarbe im Story-Text (z. B. „Schnellfragen“): dunkle Schrift (Klasse aus js/stories-magazin.js) */
.sm-welt-text .sm-helle-flaeche, .sm-welt-text .sm-helle-flaeche :is(p, strong, h2, h3, h4, li, a) { color: #000; }
.sm-welt-text blockquote::before { content: "„"; position: absolute; left: -.06em; top: -.42em; font: 300 200px/1 var(--serif); color: var(--g); }
.sm-welt-text blockquote p { margin: 0; color: #fff; font: 300 clamp(34px, calc(var(--u) * 2.6), 80px)/1.02 var(--serif); letter-spacing: -.02em; text-align: left !important; text-wrap: balance; hyphens: manual; }
.sm-welt-text blockquote cite { display: block; margin-top: 26px; font: 600 13px/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--g); }
/* Listen mit Köck-Raute */
.sm-welt-text ul { list-style: none; padding: 0; }
.sm-welt-text ul li { position: relative; padding-left: 26px; margin: 0 0 .6em; }
.sm-welt-text ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; background: var(--g); transform: rotate(45deg); }
/* Einstieg: der erste große Absatz füllt sich Wort für Wort, der Rest kommt danach */
.sm-einstieg { height: 210vh; position: relative; max-width: none !important; }
.sm-einstieg > h2 { position: sticky; top: 22vh; margin: 0 auto; max-width: 1100px; color: #fff; font-size: clamp(30px, calc(var(--u) * 2.1), 62px); line-height: 1.1; }
.sm-einstieg .sm-wd { opacity: .38; transition: opacity .4s ease; } /* noch nicht gelesen: 3,4:1 auf Schwarz, große Schrift bleibt lesbar */
.sm-einstieg .sm-wd.sm-an { opacity: 1; }
.sm-welt--hell .sm-einstieg .sm-wd { opacity: .5; } /* auf Weiß braucht es mehr Deckung für 3:1 */

/* Nächste Story */
.sm-naechste { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 80vh; min-height: 80svh; overflow: hidden; background: #000; color: #fff; text-decoration: none; } /* Mindesthöhe: lange Titel, große Systemschrift und Zoom lassen den Block wachsen statt hinauszuragen */
.sm-naechste img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform 1.2s var(--ease-out), opacity .6s ease; }
.sm-naechste-text { position: relative; display: block; padding: calc(var(--c) * 2) var(--rand); }
.sm-naechste .sm-kicker { display: block; color: var(--g); }
.sm-naechste .sm-h { display: block; max-width: 14em; font-size: clamp(34px, calc(var(--u) * 3.2), 96px); overflow-wrap: break-word; }
.sm-naechste .sm-h.sm-l { max-width: 18em; font-size: clamp(30px, calc(var(--u) * 2.4), 72px); }  /* lange Titel kleiner (Klasse aus naechste.php) */
.sm-naechste .sm-h.sm-xl { max-width: 22em; font-size: clamp(26px, calc(var(--u) * 1.8), 56px); }
@media (hover: hover) and (pointer: fine) { .sm-naechste:hover img { transform: scale(1.03); opacity: .7; } }
.sm-naechste:active img { transform: scale(1.01); transition-duration: .16s; }

/* Helle Story-Welt (besondere Seiten wie das Mandelcroissant) */
.sm-welt--hell { background: #fff; color: #000; border-image: linear-gradient(#fff 0 0) fill 0 / / 0 100vmax; } /* taste-skill-ignore: Fläche, kein Verlauf */
.sm-welt--hell .sm-welt-text { color: #000; }
.sm-welt--hell .sm-welt-text h2, .sm-welt--hell .sm-welt-text h3, .sm-welt--hell .sm-welt-text h4, .sm-welt--hell .sm-welt-text strong, .sm-welt--hell .sm-einstieg > h2,
.sm-welt--hell .sm-welt-text blockquote p, .sm-welt--hell .sm-welt-text a { color: #000; } /* Zitate waren weiß auf Weiß („Vom Reinken und Pilgern“) */
body:has(.sm-welt--hell) .sm-fortschritt { background: rgba(0,0,0,.08); }
/* Beim Mandelcroissant zeigt die Animation Unterzeile und Foto schon – die erste Zwischenzeile und das erste Foto
   im Text nicht doppelt (Story „Bon appétit mon chéri!“: „Schicht für Schicht ein Genuss.“ und das Croissant-Foto) */

/* ---------- 3a. Story innen: im Wechsel angeordnet (inc/stories-innen.php) ---------- */
.sm-welt-text > .sm-i { max-width: none; margin: calc(var(--c) * 2.5) 0; }
.sm-i figure { margin: 0; }
.sm-i figcaption { max-width: 34em; }
.sm-i h2, .sm-i h3, .sm-i h4 { margin-top: 0; }
.sm-i h4 { font-size: clamp(26px, 2.2vw, 40px); }
/* Vollbild: über die ganze Breite des Bildschirms (100vw; body.sm-welt-seite schneidet einen Rest Scrollleiste ab) */
body.sm-welt-seite { overflow-x: clip; } /* nicht .sm-welt: Vollbild ragt über die 1440-px-Spalte */
.sm-i-vollbild { width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2) !important; }
.sm-i-vollbild img { width: 100%; height: min(88svh, 62vw); object-fit: cover; }
.sm-i-vollbild figcaption { padding: 0 calc(var(--u) * 3); }
/* hoch: Hochformat ganz zeigen, mittig, nie beschnitten */
.sm-i-hoch { max-width: min(560px, 84svh * 0.75) !important; margin-left: auto !important; margin-right: auto !important; }
.sm-i-hoch img { width: 100%; height: auto; }
/* breit: innerhalb des Rasters, fast volle Breite */
.sm-i-breit { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; }
/* Paar: Foto bleibt stehen, Text zieht vorbei; jede zweite Paarung gespiegelt */
.sm-i-paar { display: grid; grid-template-columns: 5fr 6fr; gap: calc(var(--u) * 3); align-items: start; max-width: 1300px !important; margin-left: auto !important; margin-right: auto !important; }
.sm-i-paar .sm-i-bild { position: sticky; top: 12vh; }
.sm-i-paar .sm-i-text { padding-top: var(--c); }
.sm-i-paar .sm-i-text > :first-child { margin-top: 0; }
.sm-i-gespiegelt { grid-template-columns: 6fr 5fr; }
.sm-i-gespiegelt .sm-i-bild { order: 2; }
/* Text ohne Foto: versetzt, damit nicht alles in einer Achse steht (bewusst einspaltig: nie zurückscrollen müssen) */
.sm-i-text { max-width: min(720px, 100%) !important; }
.sm-i-text.sm-i-links { margin-left: calc(var(--u) * 4) !important; margin-right: auto !important; }
.sm-i-text.sm-i-rechts { margin-left: auto !important; margin-right: calc(var(--u) * 4) !important; }
.sm-i-text > :is(p, ul, ol), .sm-i-paar :is(p, ul, ol) { max-width: var(--mass) !important; margin-left: 0 !important; } /* 60–75 Zeichen je Zeile */
/* Bildpaar: zwei Fotos versetzt */
.sm-i-bildpaar { display: grid; grid-template-columns: 7fr 5fr; gap: calc(var(--u) * 2); align-items: start; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; }
.sm-i-bildpaar > :nth-child(2) { margin-top: calc(var(--c) * 4); }
/* Streifen: drei und mehr Fotos zum Wischen */
.sm-i-streifen { display: flex; gap: var(--u); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); overscroll-behavior-x: contain; scrollbar-width: none; width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2) !important; padding: 0 var(--rand); }
.sm-i-streifen::-webkit-scrollbar { display: none; }
.sm-i-streifen > figure { flex: 0 0 min(42vw, 560px); scroll-snap-align: start; }
.sm-i-streifen img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
/* 1.48.7: Ende des Streifens – Abstand rechts wie links (Safari lässt das padding-right im Scrollbereich weg, das letzte Bild klebte am Rand) */
.sm-i-streifen { padding-right: 0 !important; }
.sm-i-streifen::after { content: ""; flex: 0 0 max(0px, calc(var(--rand) - var(--u))); } /* zusammen mit dem Abstand (gap) so breit wie der Rand links */
.sm-i-streifen:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
/* Hülle mit Pfeilen (stories-magazin.js): Pfeile rechts unter dem Streifen, nur ab 821 px und nur, wenn es etwas zu blättern gibt */
.sm-i-streifen-huelle > .sm-i-streifen { margin-top: 0 !important; margin-bottom: 0 !important; }
.sm-i-streifen-huelle > .sm-pfeile { justify-content: flex-end; margin-top: 12px; }
.sm-i-streifen-huelle > .sm-pfeile button:disabled { opacity: .35; cursor: default; }
.sm-i-streifen-huelle > .sm-pfeile button:focus-visible { outline-color: var(--g); }
@media (hover: hover) and (pointer: fine) { .sm-welt:not(.sm-welt--hell) .sm-i-streifen-huelle > .sm-pfeile button:not(:disabled):hover { background: #fff; color: #000; } } /* dunkle Stories: Schwarz wäre unsichtbar */
@media (max-width: 820px) { .sm-i-streifen-huelle > .sm-pfeile { display: none; } }
/* ab 1024 px: bis zu vier Bilder stehen nebeneinander, ganz zu sehen – kein Blättern nötig */
@media (min-width: 1024px) {
	.sm-i-streifen:not(:has(> figure:nth-child(5))) { overflow: visible; justify-content: center; padding-right: var(--rand) !important; }
	.sm-i-streifen:not(:has(> figure:nth-child(5)))::after { content: none; }
	.sm-i-streifen:not(:has(> figure:nth-child(5))) > figure { flex: 1 1 0; min-width: 0; max-width: 560px; }
}
/* Zitat und Kästen */
.sm-i-zitat { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; }
.sm-i-zitat > p { max-width: 1100px !important; margin: 18px 0 0 !important; color: var(--g); font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.sm-i-kasten { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; }
/* Blockstil „Grüne Fläche (Story)“: Zitat oder Gruppe auf der Akzentfarbe, dunkle Schrift */
.sm-welt-text .is-style-sm-gruen { background: var(--g); color: #000; padding: calc(var(--c) * 1.5) calc(var(--c) * 2); }
.sm-welt-text .is-style-sm-gruen :is(p, h2, h3, h4, cite, li) { color: #000; }
.sm-welt-text blockquote.is-style-sm-gruen { padding-top: 150px; }
.sm-welt-text blockquote.is-style-sm-gruen::before { color: #000; left: calc(var(--c) * 2 - .06em); top: .1em; }
.sm-i-galerie { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 820px) {
	.sm-welt-text > .sm-i { margin: 56px 0; }
	.sm-i-paar, .sm-i-gespiegelt, .sm-i-bildpaar { display: block; }
	.sm-i-paar .sm-i-bild { position: static; margin-bottom: 24px; }
	.sm-i-text.sm-i-links, .sm-i-text.sm-i-rechts { margin-left: 0 !important; margin-right: 0 !important; }
	.sm-i-bildpaar > :nth-child(2) { width: 70%; margin: -12vw 0 0 auto; position: relative; }
	.sm-i-vollbild img { height: auto; max-height: 70svh; }
	.sm-i-hoch { max-width: min(100%, 560px) !important; } /* Hochformat am Tablet nicht bildschirmhoch */
	.sm-i-vollbild figcaption { padding: 0 var(--rand); }
	.sm-i-streifen { padding: 0 var(--rand); }
	.sm-i-streifen > figure { flex-basis: 78vw; }
}

/* ---------- 3b. Köpfe der Story-Welt: jede Story öffnet im Stil ihres Bausteins ---------- */
/* Zitat (Interviews) */
.sm-held--zitat { display: grid; grid-template-columns: 1fr 1fr; background: #000; }
.sm-held-portraet { position: relative; overflow: hidden; }
.sm-held-portraet img { width: 100%; height: 100%; object-fit: cover; }
.sm-held-seite { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--c) * 1.2); padding: calc(var(--c) * 2) calc(var(--u) * 3) calc(var(--c) * 2) calc(var(--u) * 2.5); }
.sm-held-zitat { margin: 0; }
.sm-held-zitat p { margin: 0; color: #fff; font: 300 clamp(32px, calc(var(--u) * 1.9), 56px)/1.06 var(--serif); letter-spacing: -.02em; text-indent: -.38em; text-wrap: balance; }
.sm-held-zitat cite { display: block; margin-top: 22px; color: var(--g); font: 600 var(--t-s)/1.3 var(--sans); font-style: normal; }
.sm-held--zitat .sm-held-kopf { position: static; padding: 0; }
.sm-held--zitat .sm-titel { font-size: clamp(30px, calc(var(--u) * 1.6), 48px); max-width: 16em; }
/* Raster (helle Seite) */
.sm-held--raster { background: #fff; color: #000; }
.sm-held-raster { flex: 1 1 auto; display: grid; grid-template-columns: repeat(48, var(--u)); justify-content: center; align-items: center; padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
.sm-held--raster .sm-held-kopf { position: relative; grid-column: 3 / 19; grid-row: 1; padding: 18px 18px 22px 0; background: #fff; z-index: 2; }
.sm-held--raster .sm-titel, .sm-held--raster .sm-kicker, .sm-held--raster .sm-held-unterzeile { color: #000; }
.sm-held--raster .sm-titel { font-size: clamp(40px, calc(var(--u) * 2.4), 76px); }
.sm-held-teaser { margin: 18px 0 0; font: 300 var(--t-l)/1.2 var(--serif); }
.sm-held-objekt { grid-column: 21 / 37; grid-row: 1; position: relative; justify-self: center; width: fit-content; max-width: 100%; height: min(76%, calc(var(--u) * 20)); } /* nie ein schmaler hoher Streifen (Tablet hochkant): höchstens etwa 4:5 */
.sm-held-objekt img { height: 100%; width: auto; max-width: 100%; object-fit: cover; border: var(--u) solid #fff; }
.sm-held-objekt.sm-frei { width: 100%; height: auto; }
.sm-held-objekt.sm-frei img { width: 100%; height: auto; border: 0; mix-blend-mode: multiply; }
/* Beschriftungen des Kopfs als Spalte rechts am Produkt: gleichmäßig über die Bildhöhe verteilt, nie übereinander */
.sm-held-labs { position: absolute; left: calc(100% - var(--u) * 1.2); top: 12%; bottom: 12%; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; z-index: 2; }
.sm-held-labs .sm-lab { position: relative; inset: auto; }
.sm-held--raster .sm-stoerer { grid-column: 40 / 45; grid-row: 1; align-self: end; margin-bottom: 14%; position: relative; }
/* Zeichnung (helle Seite) */
.sm-held--zeichnung { display: grid; grid-template-columns: repeat(48, var(--u)); justify-content: center; align-items: center; padding-block: calc(84px + env(safe-area-inset-top, 0px)) 72px; background: #fff; color: #000; }
.sm-held-zeichnung { grid-column: 3 / 25; mix-blend-mode: multiply; }
.sm-held-zeichnung img { width: 100%; height: auto; max-height: 80svh; object-fit: contain; }
.sm-held--zeichnung .sm-held-kopf { position: static; grid-column: 27 / 47; padding: 0; }
.sm-held--zeichnung .sm-titel, .sm-held--zeichnung .sm-kicker, .sm-held--zeichnung .sm-held-unterzeile { color: #000; }
.sm-held--zeichnung .sm-titel { font-size: clamp(36px, calc(var(--u) * 2.4), 72px); }
.sm-held-autor { margin: 0 0 18px; font: 600 var(--t-s)/1.3 var(--sans); }
.sm-welt--hell .sm-scrollen { color: #000; }
/* Slideshow (Feste, Abende) */
.sm-held-slides .sm-slide { position: absolute; inset: 0; margin: 0; }
.sm-held-slides .sm-slide img { width: 100%; height: 100%; object-fit: cover; }
.sm-held-slides .sm-punkte { position: absolute; z-index: 3; left: var(--rand); top: calc(100px + env(safe-area-inset-top, 0px)); display: flex; gap: 6px; }
.sm-held-slides .sm-punkte i { width: 22px; height: 2px; background: rgba(255,255,255,.35); transition: background-color .3s ease; }
.sm-held-slides .sm-punkte i.sm-an { background: #fff; }
.sm-held--slideshow .sm-held-kopf { z-index: 2; }
/* Filmstreifen (Zeitleisten): Titel bleibt stehen, Stationen ziehen waagrecht vorbei */
.sm-held--film { display: block; min-height: 0; height: 260vh; overflow: visible; background: #000; } /* die Stationen ziehen während 1,6 Bildschirmhöhen vorbei */
.sm-film-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--c) * 1.2); }
.sm-held--film .sm-held-kopf { position: static; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--rand) 0; }
.sm-held--film .sm-titel { font-size: clamp(40px, calc(var(--u) * 3), 96px); }
.sm-film-streifen { display: flex; gap: var(--u); padding: 0 var(--rand); width: max-content; will-change: transform; }
.sm-film-streifen { --film-b: min(calc(var(--u) * 13), max(calc((100svh - 460px) * .8), 180px)); } /* Fotobreite: nie höher als das Fenster erlaubt (Laptop) */
.sm-film-bild { flex: 0 0 auto; width: var(--film-b); margin: 0; }
.sm-film-bild img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.sm-film-ohne { width: calc(var(--film-b) * 7 / 13); } /* Uhrzeit ohne Foto: schmal, ein ruhiges Feld statt des Bildes */
.sm-film-feld { display: flex; align-items: flex-end; box-sizing: border-box; width: 100%; height: calc(var(--film-b) * 1.25); padding: 18px 16px; background: #161616; overflow-wrap: break-word; color: #fff; font: 300 clamp(18px, calc(var(--film-b) * .072), 28px)/1.08 var(--serif); letter-spacing: -.01em; hyphens: auto; } /* so hoch wie die Fotos (4:5 bei 13 Feldern); der Titel steht im Feld wie ein Kapitel */
.sm-film-bild figcaption { margin-top: 12px; color: #d9d9d9; font: 600 var(--t-s)/1.3 var(--sans); }
.sm-film-bild figcaption b { display: block; color: #fff; font: 300 34px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; margin-bottom: 6px; }
/* Vorher-Nachher über den ganzen Bildschirm */
.sm-held-schieber, .sm-held .sm-held-schieber { position: absolute; inset: 0; aspect-ratio: auto; height: auto; }
.sm-held-schatten--unten { background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 45%); pointer-events: none; z-index: 2; } /* taste-skill-ignore: Schutzverlauf unter dem Titel */
.sm-held--vergleich .sm-held-kopf { z-index: 3; pointer-events: none; }
.sm-held--vergleich .sm-griff { z-index: 4; }
.sm-held--vergleich .sm-griff::before, .sm-held--vergleich .sm-griff span { top: 34%; } /* Griff im oberen Drittel – unten steht der Titel (sonst liegt er bei niedrigen Fenstern darauf) */
.sm-held--vergleich .sm-schieber-regler { z-index: 5; }
/* Album: die alten Fotos fallen ins Bild */
.sm-held--album { display: grid; grid-template-columns: repeat(48, var(--u)); justify-content: center; align-items: center; padding-block: calc(84px + env(safe-area-inset-top, 0px)) 72px; background: #000; }
.sm-held--album .sm-held-kopf { position: static; grid-column: 3 / 20; padding: 0; }
.sm-held--album .sm-titel { font-size: clamp(40px, calc(var(--u) * 2.6), 84px); }
.sm-held-abzuege { grid-column: 21 / 48; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u); align-items: start; }
.sm-held-abzuege .sm-abzug { color: #000; }
.sm-held-abzuege .sm-abzug-1 { transform: rotate(-3deg); }
.sm-held-abzuege .sm-abzug-2 { margin-top: calc(var(--c) * 1.6); transform: rotate(2deg); }
.sm-held-abzuege .sm-abzug-3 { margin-top: calc(var(--c) * .6); transform: rotate(-1.5deg); }
/* Panorama: zieht langsam vorbei, Titel auf weißem Band */
.sm-held--panorama .sm-held-bild { inset: 0 -12% 0 0; }
.sm-held-band { position: absolute; left: calc(var(--rand) - var(--u)); right: auto; bottom: 0; max-width: calc(var(--u) * 30); padding: var(--c) var(--c) calc(var(--c) * .8) var(--u); background: #fff; }
.sm-held-band .sm-titel, .sm-held-band .sm-kicker, .sm-held-band .sm-held-unterzeile { color: #000; }
.sm-held-band .sm-titel { font-size: clamp(36px, calc(var(--u) * 2.6), 80px); }
/* Zahlen */
.sm-held-zahlen { list-style: none; display: flex; flex-wrap: wrap; gap: var(--c); margin: calc(var(--c) * .9) 0 0; padding: 0; }
.sm-held-zahlen b { display: inline-block; padding: .1em .2em 0; background: var(--g); color: #000; font: 300 clamp(40px, calc(var(--u) * 2.8), 88px)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.sm-held-zahlen span { display: block; margin-top: 10px; color: #fff; font: 600 var(--t-s)/1.3 var(--sans); }

/* ---------- 4. Mandelcroissant ---------- */
.sm-buehne { height: 320vh; position: relative; background: #fff; color: #000; }
.sm-buehne-innen { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: repeat(48, var(--u)); justify-content: center; align-items: center; } /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
.sm-buehne-raster {
	position: absolute; inset: 0;
	background-image: linear-gradient(var(--g) 1px, transparent 1px), linear-gradient(90deg, var(--g) 1px, transparent 1px); /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
	background-size: var(--c) var(--c); background-position: var(--u) 0;
}
.sm-buehne-text { grid-column: 3 / 19; position: relative; z-index: 3; background: #fff; padding: 18px 18px 22px 0; }
.sm-buehne-text .sm-h { font-size: calc(var(--u) * 3.1); line-height: calc(var(--u) * 3); }
.sm-buehne-lead { margin: 22px 0 0; font: 300 26px/1.15 var(--serif); }
.sm-croissant { grid-column: 22 / 42; position: relative; height: 94vh; height: 94svh; justify-self: center; container-type: size; }
.sm-ebene { position: absolute; height: auto; max-width: none; will-change: transform, opacity; backface-visibility: hidden; user-select: none; -webkit-user-select: none; pointer-events: none; -webkit-touch-callout: none; }
.sm-ebene.sm-schatten, .sm-ebene.sm-innenschatten { mix-blend-mode: multiply; }
.sm-mc-lab { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; margin-top: -.6em; white-space: nowrap; font: 300 22px/1.05 var(--serif); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s var(--ease-out); }
.sm-mc-lab i { display: block; width: calc(var(--u) * 3); height: 1px; background: #000; transform-origin: var(--o, left); transform: scaleX(0); transition: transform .2s var(--ease-out); } /* taste-skill-ignore: CI-Raster, Beschriftungsstrich wie im Magazin, Zeitachse, Schutzverlauf über Foto bzw. 100vh-Rückfall vor svh */
.sm-mc-lab.sm-an { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s var(--ease-out); }
.sm-mc-lab.sm-an i { transform: scaleX(1); transition: transform .8s var(--ease-out) .15s; }
.sm-mc-links { right: calc(100% - var(--x) + 1%); --o: right; }
.sm-mc-rechts { left: calc(var(--x) + 1%); flex-direction: row-reverse; }
.sm-mc-stoerer { right: -4%; bottom: 12%; opacity: 0; transform: rotate(-7deg) scale(.85); transition: opacity .25s ease, transform .3s var(--ease-out); }
.sm-mc-stoerer.sm-an { opacity: 1; transform: rotate(-7deg) scale(1); transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.35, .64, 1); }
.sm-buehne .sm-scrollen { color: #000; z-index: 5; transition: opacity .4s ease; }
@media (min-width: 821px) and (max-width: 1200px) {
	.sm-mc-rechts { left: auto; right: calc(100% - 23%); flex-direction: row; top: 47% !important; --o: right; }
}

/* ---------- 5. Bewegung – nur wenn erwünscht ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Erscheinen beim Scrollen */
	.sm-js .sm-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s var(--ease-out); }
	.sm-js .sm-rv.sm-in { opacity: 1; transform: none; }
	.sm-js .sm-rv .sm-foto img { transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
	.sm-js .sm-rv.sm-in .sm-foto img { transform: none; }
	/* das zweite Foto im Bildpaar und die Albumfotos kommen kurz nacheinander */
	.sm-js .sm-bildpaar.sm-rv .sm-klein { opacity: 0; transform: translateY(24px); transition: opacity .7s ease .12s, transform .9s var(--ease-out) .12s; }
	.sm-js .sm-bildpaar.sm-rv.sm-in .sm-klein { opacity: 1; transform: none; }
	.sm-js .sm-album.sm-rv .sm-abzug-2 { transition-delay: .06s; } .sm-js .sm-album.sm-rv .sm-abzug-3 { transition-delay: .12s; }
	/* Slideshow: Hauch Unschärfe beim Überblenden, nur am Desktop (am Handy zu teuer) */
	@media (hover: hover) and (pointer: fine) {
		.sm-slide { filter: blur(6px); transition: opacity 1.1s ease, filter 1.1s ease; }
		.sm-slide.sm-an { filter: none; }
	}
	/* Story-Welt: Titel Wort für Wort, Unterzeile danach */
	.sm-js .sm-titel .sm-w > span { transform: translateY(105%); transition: transform .9s var(--ease-out); }
	.sm-js .sm-welt.sm-da .sm-titel .sm-w > span { transform: none; }
	.sm-js .sm-held-unterzeile { opacity: 0; transform: translateY(12px); transition: opacity .7s ease .6s, transform .9s var(--ease-out) .6s; }
	.sm-js .sm-welt.sm-da .sm-held-unterzeile { opacity: 1; transform: none; }
	.sm-scrollen::after { animation: sm-hinweis 1.8s ease-in-out infinite; }
	/* nach dem Einstieg kommt der restliche Text */
	.sm-js .sm-nach-einstieg { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s var(--ease-out); }
	.sm-js .sm-nach-einstieg.sm-in { opacity: 1; transform: none; }
	/* Fotos der Story erscheinen weich */
	.sm-js .sm-welt-text figure { opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); } /* zurück zügig (1.57.0) */
	.sm-js .sm-welt-text figure.sm-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out); transition-delay: calc(var(--sm-stufe, 0) * 100ms); } /* hinein ruhig, ab Leseposition (1.57.0) */
	.sm-js .sm-welt-text blockquote::before { transform: scale(.6); transform-origin: 0 0; transition: transform 1.2s var(--ease-out); }
	.sm-js .sm-welt-text blockquote.sm-in::before { transform: none; }
	/* Köpfe: Raster-Beschriftungen nacheinander, Störer zuletzt; Album-Fotos fallen ins Bild; Panorama zieht vorbei */
	.sm-js .sm-held--raster .sm-lab { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .7s var(--ease-out); transition-delay: calc(.7s + var(--n, 0) * .18s); }
	.sm-js .sm-welt.sm-da .sm-held--raster .sm-lab { opacity: 1; transform: none; }
	.sm-js .sm-held--raster .sm-stoerer { opacity: 0; transform: rotate(-7deg) scale(.85); transition: opacity .5s ease 1.4s, transform .7s cubic-bezier(.34, 1.35, .64, 1) 1.4s; }
	.sm-js .sm-welt.sm-da .sm-held--raster .sm-stoerer { opacity: 1; transform: rotate(-7deg); }
	.sm-js .sm-held-abzuege .sm-abzug { opacity: 0; translate: 0 -40px; transition: opacity .6s ease, translate .9s var(--ease-out); }
	.sm-js .sm-held-abzuege .sm-abzug-2 { transition-delay: .15s; } .sm-js .sm-held-abzuege .sm-abzug-3 { transition-delay: .3s; }
	.sm-js .sm-welt.sm-da .sm-held-abzuege .sm-abzug { opacity: 1; translate: 0 0; }
	.sm-held--panorama .sm-held-bild img { animation: sm-pan 28s linear infinite alternate; }
	.sm-js .sm-held-zitat p .sm-w > span { transform: translateY(105%); transition: transform .9s var(--ease-out); }
	.sm-js .sm-welt.sm-da .sm-held-zitat p .sm-w > span { transform: none; }
	/* Öffnen: das Foto aus der Übersicht wächst zum Vollbild (View Transitions, Chrome und Safari) */
	@view-transition { navigation: auto; }
	::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.77, 0, .175, 1); }
	/* 1.45.0: Köck-Raster, der aus dem Kärtchen auf die ganze Story wächst (und zurück): nicht strecken, sondern beschneiden –
	   die Zellen bleiben gleich groß, es kommen welche dazu. Raster-Element mit view-transition-class „sm-raster“. */
	::view-transition-group(*.sm-raster) { overflow: clip; }
	::view-transition-old(*.sm-raster), ::view-transition-new(*.sm-raster) { width: auto; height: auto; object-fit: none; object-position: 0 0; }
	::view-transition-old(*.sm-raster) { animation-duration: .35s; }
	/* Titel und Unterzeile: der alte Text ist weg, bevor der neue (andere Umbruch, andere Größe) kommt – kein Doppelbild */
	::view-transition-old(*.sm-schrift) { animation-duration: .35s; animation-timing-function: ease-in; }
	::view-transition-new(*.sm-schrift) { animation-duration: .35s; animation-delay: .1s; animation-timing-function: ease-out; animation-fill-mode: both; } /* kurz überlappend: der Text bleibt sichtbar, wandert mit und tauscht dabei den Umbruch */
	::view-transition-old(root) { animation-duration: .25s; } /* der Text der Übersicht verschwindet schnell – kein Doppelbild mit dem Text der Story */
}
@keyframes sm-pan { from { transform: translateX(0); } to { transform: translateX(-9%); } }
@keyframes sm-hinweis { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) {
	.sm-einstieg { height: auto; }
	.sm-held--panorama .sm-held-bild img { animation: none; }
	.sm-held--film { height: auto; }
	.sm-film-buehne { position: static; height: auto; padding-bottom: 48px; }
	.sm-film-streifen { width: auto; overflow-x: auto; }
	.sm-einstieg > h2 { position: static; }
	.sm-einstieg .sm-wd { opacity: 1; }
	.sm-buehne { height: auto; }
	.sm-buehne-innen { position: relative; }
	.sm-buehne .sm-scrollen { display: none; }
	.sm-mc-lab, .sm-mc-stoerer { opacity: 1; transform: none; }
	.sm-mc-stoerer { transform: rotate(-7deg); }
	.sm-mc-lab i { transform: none; }
	.sm-slide img { transform: none; transition: none; }
}

/* ---------- Tablet ---------- */
@media (min-width: 821px) and (max-width: 1180px) {
	.sm-lab { font-size: 17px; } /* Beschriftungen auf dem Tablet ohne Umbruch je Wort */
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-labs { font-size: 15px; } /* Zelle hier nur ~35–50 px: kleinere Schrift */
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-lab { font-size: inherit; }
	.sm-collage.sm-seite-links .sm-lab { font-size: 15px; } /* links vom Foto ist wenig Platz: ohne Strich, kleiner */
	.sm-collage.sm-seite-links .sm-lab::after { display: none; }
	.sm-collage.sm-seite-links .sm-lab { right: calc(100% + 12px); } /* ohne Strich endet die Beschriftung vor dem Foto, nicht darauf */
	.sm-collage .sm-text { grid-column: 4 / 18; } /* beginnt auf einer Rasterlinie (ungerades Feld) */
}

/* ---------- Handy ---------- */
@media (max-width: 820px) {
	.sm { --u: calc((100vw - var(--scrollbar-width, 0px)) / 16); --rand: 16px; font-size: 17px; }
	.sm-aufmacher .sm-karte, .sm-portraet .sm-karte, .sm-zitatkarte .sm-karte, .sm-bildpaar .sm-karte, .sm-duett,
	.sm-collage .sm-karte, .sm-vergleich, .sm-kolumne .sm-karte, .sm-nacht-innen, .sm-zahlen .sm-karte, .sm-album .sm-karte { display: block; }

	.sm-aufmacher .sm-karte { padding: 48px 0 24px; }
	.sm-aufmacher .sm-foto { height: 115vw; }
	.sm-aufmacher .sm-kopf { margin: -90px 16px 0; position: relative; }
	.sm-aufmacher .sm-h, .sm-aufmacher.sm-lang .sm-h { font-size: 36px; line-height: 1.14; }
	.sm-aufmacher .sm-band { max-width: none; margin-top: 16px; }

	.sm-portraet .sm-karte { padding: 24px 16px; }
	.sm-portraet .sm-zitat { margin-top: 24px; }
	.sm-portraet .sm-zitat p { font-size: 26px; }
	.sm-portraet .sm-text { margin-top: 26px; }
	.sm-portraet .sm-h, .sm-portraet .sm-karte:not(:has(.sm-zitat)) .sm-h { font-size: 30px; }
	.sm-portraet .sm-klein { width: 55%; margin: 20px 0 0 auto; }

	.sm-zitatkarte .sm-karte { padding: 56px 16px; }
	.sm-zitatkarte .sm-zitat p { font-size: 34px; text-indent: 0; }
	.sm-portraet .sm-zitat p { text-indent: 0; }
	.sm-story .sm-h.sm-l { font-size: 30px; }
	.sm-story .sm-h.sm-xl { font-size: 26px; }
	.sm-zitatkarte .sm-foto { width: 46%; margin-top: 28px; }

	.sm-bildpaar .sm-karte { padding: 48px 16px 24px; }
	.sm-bildpaar .sm-klein, .sm-bildpaar.sm-gespiegelt .sm-klein { width: 58%; margin: -28vw 0 0 auto; position: relative; border-width: 10px; border-right: 0; border-bottom: 0; border-left: 10px solid #fff; }
	.sm-bildpaar.sm-gespiegelt .sm-klein { margin-left: 0; border-left: 0; border-right: 10px solid #fff; }
	.sm-bildpaar .sm-text, .sm-bildpaar.sm-gespiegelt .sm-text { margin-top: 24px; padding: 0; }
	.sm-bildpaar .sm-h { font-size: 34px; }

	.sm-duett { padding: 24px 16px 40px; }
	.sm-duett-b { margin-top: 56px; }
	.sm-duett .sm-h { font-size: 32px; }

	/* Raster-Collage am Handy genau im Raster (Zelle --c = 1/8 der Breite, wie am Desktop ein Feld Rand):
	   Text beginnt auf der zweiten senkrechten Linie, jede Titelzeile eine Zelle hoch mit der Grundlinie auf der Linie,
	   Unterzeile und Beschriftungen eine halbe Zelle je Zeile, „Mehr lesen“ und Fotos in ganzen Zellen. */
	.sm-collage { margin: 48px 0; }
	.sm-collage .sm-karte { padding: var(--c) calc(var(--u) + 12px) var(--c) calc(var(--u) + var(--c)); }
	.sm-collage .sm-h, .sm-collage.sm-lang .sm-h, .sm-story.sm-collage .sm-h.sm-l, .sm-story.sm-collage .sm-h.sm-xl { position: relative; top: calc(var(--c) / 2 - .3375em); font-size: calc(var(--c) * .8); line-height: var(--c); letter-spacing: -.012em; }
	.sm-collage .sm-teaser { position: relative; top: calc(var(--c) * 3 / 4 - .34em); max-width: none; margin: 0; font-size: 17px; line-height: calc(var(--c) / 2); text-wrap: pretty; }
	.sm-collage .sm-mehr { box-sizing: border-box; height: var(--c); margin: 0; padding: 0 0 10px; align-items: flex-end; }
	.sm-collage .sm-objekt, .sm-collage.sm-frei .sm-objekt, .sm-collage.sm-seite-breit .sm-objekt, .sm-collage.sm-seite-gross.sm-hochformat .sm-objekt { display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: auto; margin: 0; }
	.sm-collage .sm-objekt img { display: block; align-self: stretch; width: 100%; height: calc(var(--c) * 6); max-height: none; margin: 0; border: 0; object-fit: cover; }
	.sm-collage.sm-frei .sm-objekt img { align-self: center; width: auto; max-width: 100%; object-fit: contain; }
	.sm-collage.sm-hochformat .sm-objekt img { height: calc(var(--c) * 9); }
	/* Walnuss-Roggi: der Schatten fällt im Bild weit nach links – das Brot selbst in die Mitte rücken */
	.sm-collage .sm-objekt img[src*="walnuss-roggi_freigestellt"] { transform: translateX(-21%); }
	/* Beschriftungen als Liste unter dem Foto, Grundlinien auf Raster- und Halblinien */
	.sm-collage .sm-labs { display: block; position: relative; top: calc(var(--c) * 3 / 4 - .34em); font: 400 19px/1 var(--serif); }
	.sm-collage .sm-lab, .sm-collage.sm-seite-links .sm-lab, .sm-collage .sm-text > .sm-labs .sm-lab { position: static; display: block; width: auto; max-width: none; margin: 0; padding: 0; font-size: inherit; line-height: calc(var(--c) / 2); text-align: left; text-wrap: pretty; transform: none; }
	.sm-collage .sm-lab + .sm-lab, .sm-collage .sm-text > .sm-labs .sm-lab + .sm-lab { margin-top: calc(var(--c) / 2); }
	.sm-collage .sm-lab::after { display: none; }
	.sm-collage .sm-lab > span { padding: 0; }
	/* „groß“: die Liste steht im Text – am Handy wie bei den anderen Collagen unter dem Foto (Reihenfolge per order) */
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-karte { display: flex; flex-direction: column; }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-text { display: contents; }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-objekt { order: 1; }
	.sm-collage.sm-seite-gross:not(.sm-hochformat) .sm-mehr { align-self: flex-start; }
	.sm-collage .sm-text > .sm-labs { order: 2; }
	.sm-lab { max-width: 40vw; font-size: 17px; padding: 3px 0; }
	.sm-lab::after { display: none; }
	.sm-lab > span { padding: 0; }
	/* Kopf der Story am Handy ebenso: Beschriftungen als Liste unter dem Produkt */
	.sm-held--raster .sm-held-objekt { display: flex; flex-direction: column; align-items: flex-start; }
	.sm-held--raster .sm-held-objekt img { align-self: center; width: auto; max-width: 100%; max-height: 58svh; }
	.sm-held-labs { display: contents; }
	.sm-held--raster .sm-lab { position: static; width: auto; max-width: none; margin-top: 6px; text-align: left; }
	.sm-held--raster .sm-lab:first-of-type { margin-top: 16px; }
	.sm-collage .sm-stoerer { position: absolute; right: 16px; bottom: 30px; width: 120px; height: 120px; }

	.sm-vergleich { padding: 48px 0 24px; }
	.sm-schieber { aspect-ratio: 4 / 3; }
	.sm-vergleich .sm-text { padding: 24px 16px 0; }
	.sm-vergleich .sm-h { font-size: 34px; }

	.sm-panorama .sm-foto { height: 70vw; }
	.sm-panorama .sm-band { width: auto; margin: -40px 16px 0 0; padding: 26px 16px 0; }
	.sm-panorama .sm-h { font-size: 34px; }

	.sm-kolumne .sm-karte { padding: 24px 16px; }
	.sm-kolumne .sm-zeichnung { width: 80%; margin: 0 auto 20px; }
	.sm-kolumne .sm-h { font-size: 32px; }

	.sm-zeitleiste .sm-kopfzeile { padding: 0 16px; }
	.sm-zeitleiste .sm-h { font-size: 40px; }
	.sm-bahn { padding: 30px 16px 14px; gap: 16px; scroll-padding-inline: 16px; }
	.sm-station { flex-basis: 66vw; }
	.sm-station-ohne { flex-basis: 36vw; }
	.sm-station-feld { height: calc(66vw * 1.25); font-size: 21px; }
	.sm-station-zitat { flex-basis: 78vw; }
	.sm-station-zitat p { font-size: 20px; }
	.sm-zeitleiste .sm-unten { padding: 4px 16px 0; }
	.sm-zeitleiste .sm-pfeile { display: none; }

	.sm-nacht { padding: 56px 16px; }
	.sm-nacht .sm-h { font-size: 40px; }
	.sm-nacht .sm-zitat { margin-top: 24px; }
	.sm-nacht .sm-zitat p { font-size: 20px; }
	.sm-slides { aspect-ratio: 4 / 5; margin-top: 24px; }
	.sm-slide figcaption { font-size: 18px; padding: 48px 16px 16px; }
	.sm-abend .sm-trio { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
	.sm-abend .sm-trio .sm-foto:first-child { grid-column: 1 / 3; aspect-ratio: 3 / 2; }

	.sm-zahlen .sm-karte { padding: 24px 16px; }
	.sm-zahlen .sm-h { font-size: 32px; }
	.sm-zahlenliste { margin-top: 24px; }
	.sm-zahlenliste b { font-size: 44px; }

	.sm-album .sm-karte { padding: 24px 16px; }
	.sm-album .sm-h { font-size: 32px; }
	.sm-album .sm-abzug { width: 82%; margin: 18px auto 0; }
	.sm-album .sm-abzug-2 { margin-left: 16%; }
	.sm-album .sm-satz { margin-top: 26px; font-size: 22px; }

	/* Story-Welt */
	.sm-leiste-logo svg { width: 52px; }
	.sm-held-kopf { padding: calc(88px + env(safe-area-inset-top, 0px)) var(--rand) calc(120px + env(safe-area-inset-bottom, 0px)); }
	.sm-titel { font-size: clamp(40px, 8vw, 64px); line-height: .98; } /* wächst bis zum Tablet mit – kein Sprung bei 821 px */
	.sm-held-unterzeile { font-size: clamp(20px, 3vw, 26px); margin-top: 14px; }
	.sm-welt-text { padding: 48px var(--rand) 72px; font-size: 17px; }
	.sm-welt-text .wp-block-columns { display: block; }
	.sm-welt-text .wp-block-column:has(> figure.wp-block-image:only-child) { position: static; }
	.sm-welt-text blockquote, .sm-welt-text .wp-block-pullquote { padding-top: 78px; }
	.sm-welt-text blockquote::before { font-size: 130px; }
	.sm-welt-text blockquote p { font-size: clamp(28px, 5vw, 44px); }
	.sm-einstieg > h2 { top: 16vh; font-size: clamp(24px, 7.2vw, 30px); }
	.sm-welt-text h2 { font-size: clamp(24px, 7.2vw, 30px); overflow-wrap: break-word; hyphens: manual; } /* nie mitten im Wort trennen – die Größe passt sich so an, dass auch lange Wörter in die Zeile passen */
	.sm-naechste-text { padding: 72px var(--rand) 48px; }
	.sm-naechste .sm-h { font-size: clamp(30px, 8.6vw, 54px); }
	.sm-naechste .sm-h.sm-l { font-size: clamp(27px, 7.2vw, 44px); }
	.sm-naechste .sm-h.sm-xl { font-size: clamp(24px, 6.2vw, 36px); }

	/* Köpfe am Handy */
	.sm-held--zitat { display: block; height: auto; }
	.sm-held-portraet { height: 62svh; }
	.sm-held-seite { padding: 32px var(--rand) 96px; gap: 28px; }
	.sm-held-zitat p { font-size: clamp(28px, 5.4vw, 44px); text-indent: 0; }
	.sm-held--zitat .sm-scrollen { display: none; }
	.sm-held--zitat .sm-titel { font-size: clamp(28px, 5vw, 40px); }
	.sm-held-raster { display: block; padding: calc(84px + env(safe-area-inset-top, 0px)) calc(var(--u) + 12px) 48px; }
	.sm-held--raster { height: auto; min-height: 100svh; }
	.sm-held--raster .sm-held-kopf { padding: 0; }
	.sm-held--raster .sm-titel { font-size: clamp(36px, 7vw, 56px); }
	.sm-held-objekt { height: auto; margin: 24px auto 0; }
	.sm-held-objekt img { height: auto; width: 100%; }
	.sm-held--raster .sm-stoerer { position: absolute; right: 16px; bottom: 24px; width: 110px; height: 110px; margin: 0; }
	.sm-held--zeichnung { display: block; height: auto; min-height: 100svh; padding: calc(84px + env(safe-area-inset-top, 0px)) var(--rand) 96px; }
	.sm-held-zeichnung { width: 86%; margin: 0 auto 24px; }
	.sm-held--zeichnung .sm-titel { font-size: clamp(32px, 6vw, 52px); }
	.sm-film-streifen { --film-b: 66vw; padding: 0 var(--rand); } /* Einzug wie der Titel */
	.sm-film-ohne { width: 38vw; }
	.sm-film-feld { padding: 14px 12px; font-size: 18px; }
	.sm-held--film .sm-held-kopf { padding: calc(88px + env(safe-area-inset-top, 0px)) var(--rand) 0; }
	.sm-held--film .sm-titel { font-size: clamp(36px, 7vw, 60px); }
	.sm-held--album { display: block; height: auto; min-height: 100svh; padding: calc(84px + env(safe-area-inset-top, 0px)) var(--rand) 96px; }
	.sm-held--album .sm-titel { font-size: clamp(34px, 6.4vw, 56px); }
	.sm-held-abzuege { margin-top: 28px; grid-template-columns: 1fr 1fr; gap: 14px; }
	.sm-held-abzuege .sm-abzug-3 { display: none; }
	.sm-held-abzuege .sm-abzug figcaption { font-size: 14px; }
	.sm-held-band { left: 0; right: 16px; max-width: none; padding: 26px 16px 18px; }
	.sm-held-band .sm-titel { font-size: clamp(32px, 6vw, 52px); }
	.sm-held-zahlen { gap: 18px; }
	.sm-held-zahlen b { font-size: 40px; }
	/* Mandelcroissant */
	.sm-buehne { height: 300vh; }
	.sm-buehne-innen { display: block; }
	.sm-buehne-text { position: absolute; left: 16px; right: 16px; top: calc(76px + env(safe-area-inset-top, 0px)); padding: 0; background: transparent; }
	.sm-buehne-text .sm-h { font-size: 40px; line-height: 40px; }
	.sm-buehne-lead { font-size: 20px; margin-top: 10px; }
	.sm-croissant { position: absolute; left: 50%; top: calc(170px + env(safe-area-inset-top, 0px)); height: min(72svh, calc(100svh - 190px - env(safe-area-inset-top, 0px))); transform: translateX(-50%); }
	.sm-mc-lab { font-size: 14px; gap: 0; background: #fff; padding: 4px 8px; margin: 0; }
	.sm-mc-lab i { display: none; }
	.sm-mc-links { right: auto; left: 0; }
	.sm-mc-rechts { left: auto; right: 0; }
	.sm-mc-stoerer { width: 104px; height: 104px; right: 2%; }
	.sm-mc-stoerer span { font-size: 16px; }
}

/* ---------- Tablet hochkant (600–820 px): die Handy-Anordnung, aber mit Lesebreite statt Vollbreite ---------- */
@media (min-width: 600px) and (max-width: 820px) {
	.sm { --rand: 48px; } /* ein Seitenrand für Kopf, Text, Leisten und „Nächste Story“ */
	.sm-welt-text .sm-i-text, .sm-welt-text .sm-i-text.sm-i-links, .sm-welt-text .sm-i-text.sm-i-rechts { max-width: var(--mass) !important; margin-left: auto !important; margin-right: auto !important; }
	.sm-welt-text .sm-i-text > :is(p, ul, ol) { margin-left: auto !important; margin-right: auto !important; }
	.sm-i-paar .sm-i-bild { max-width: 560px; margin-left: auto; margin-right: auto; }
	.sm-held-portraet { height: min(62svh, 720px); }
}

/* ---------- Niedrige Fenster (Handy quer, kleine Laptops, Zoom 200 %): „Scrollen“ weg, Köpfe kompakter ---------- */
@media (max-height: 520px) {
	.sm-scrollen { display: none; }
	.sm-held-kopf:not(.sm-held-band) { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
	.sm-held-labs { top: 0; bottom: 0; }
	.sm-held-labs .sm-lab { font-size: 15px; }
	.sm-naechste { min-height: 0; }
	.sm-naechste-text { padding-top: 72px; padding-bottom: 40px; }
	/* Filmstreifen: keine Scroll-Bühne (zu wenig Höhe) – die Stationen als Wischleiste, Titel darüber */
	.sm-held--film { height: auto; }
	.sm-film-buehne { position: static; height: auto; padding-bottom: 40px; }
	.sm-film-streifen { --film-b: 200px; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); overscroll-behavior-x: contain; transform: none !important; }
	.sm-film-bild { scroll-snap-align: start; }
}

/* ---------- Zwischen den Stories (uebersicht.php) ----------
   Wie im Magazin trennt vor allem Weißraum zwei Geschichten; dazu eine einzige feine Linie in der CI-Farbe –
   so fein wie eine Linie des Köck-Rasters, über die Textbreite. Kein Zierelement: die Raute bleibt dem Störer
   vorbehalten, sonst verliert sie ihre Wirkung. */
.sm-trenner { height: 1px; margin: calc(var(--c) * 1.5) calc(var(--u) * 3); background: var(--g); } /* taste-skill-ignore: eine Rasterlinie als Seitenwechsel */
@media (max-width: 820px) { .sm-trenner { margin: 56px 16px; } }
.sm-uebersicht .sm-story:not(.sm-collage) { margin-top: 0; margin-bottom: 0; } /* den Abstand gibt die Trennlinie – keine doppelten Leerräume (z. B. vor dunklen Stories) */

/* ---------- Handy: Zitat im Bild (Porträt, Zitatkarte) ----------
   Am Handy steht der Satz aus dem Gespräch unten im Foto, weiß auf einem dunklen Verlauf – wie eine Magazinseite.
   Titel, Unterzeile und „Mehr lesen“ folgen darunter. Am Desktop bleibt alles wie gehabt. */
@media (max-width: 820px) {
	.sm-portraet .sm-karte, .sm-zitatkarte .sm-karte { display: grid; grid-template-columns: 100%; grid-template-rows: none; padding: 0 0 32px; }
	.sm-portraet, .sm-zitatkarte { margin-top: 32px; } /* Abstand zur Trennlinie – das Foto beginnt nicht direkt an der Linie */
	.sm-portraet .sm-karte > *, .sm-zitatkarte .sm-karte > * { grid-column: 1; grid-row: auto; min-width: 0; } /* Desktop-Spalten aufheben */
	.sm-portraet .sm-karte > .sm-gross, .sm-zitatkarte .sm-karte > .sm-foto { grid-row: 1; grid-column: 1; width: 100%; margin: 0; aspect-ratio: 4 / 5; }
	.sm-portraet .sm-gross::after, .sm-zitatkarte .sm-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,0) 66%); pointer-events: none; } /* taste-skill-ignore: Schutzverlauf über Foto – das Zitat steht im Bild */
	.sm-portraet .sm-karte > .sm-zitat, .sm-zitatkarte .sm-karte > .sm-zitat { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 1; margin: 0; padding: 0 16px 22px; color: #fff; }
	.sm-portraet .sm-zitat p, .sm-zitatkarte .sm-zitat p { font-size: 29px; line-height: 1.1; letter-spacing: -.012em; text-indent: -.4em; padding-left: .4em; text-wrap: balance; }
	.sm-portraet .sm-zitat cite, .sm-zitatkarte .sm-zitat cite { margin-top: 12px; font: 600 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
	.sm-portraet .sm-text { margin: 24px 16px 0; }
	.sm-portraet .sm-klein { width: 62%; margin: 24px 16px 0 auto; aspect-ratio: 3 / 2; }
	.sm-portraet .sm-karte:not(:has(.sm-zitat)) .sm-text { grid-row: 2; align-self: start; margin: 24px 16px 0; }
	.sm-portraet .sm-karte:not(:has(.sm-zitat)) .sm-h { font-size: 30px; line-height: 1.12; }
	.sm-portraet .sm-karte:not(:has(.sm-zitat)) .sm-gross::after { display: none; } /* ohne Zitat kein Verlauf */
	/* Aufmacher: Titel unter dem Foto, nicht auf weißen Kästchen darüber (CI: Schrift ohne Kasten) */
	.sm-aufmacher .sm-kopf { margin: 22px 16px 0; }
	.sm-aufmacher .sm-h span { background: none; padding: 0; }
	.sm-aufmacher .sm-h, .sm-aufmacher.sm-lang .sm-h, .sm-story.sm-aufmacher .sm-h.sm-l { font-size: 32px; line-height: 1.1; }
	.sm-aufmacher .sm-band { padding: 0; margin-top: 12px; background: none; }
	/* Panorama: kein großer Leerraum vor dem Foto, Band ohne Weiß-Kasten über dem Bild */
	.sm-panorama { margin-top: 24px; }
	.sm-panorama .sm-band { margin: 22px 16px 0; padding: 0; background: none; }
	.sm-panorama .sm-h, .sm-story.sm-panorama .sm-h.sm-l, .sm-story.sm-panorama .sm-h.sm-xl { font-size: 32px; line-height: 1.1; }
	.sm-zitatkarte .sm-von { margin: 22px 16px 0; font-size: 17px; line-height: 1.4; }
	.sm-zitatkarte .sm-von-titel { display: block; margin-bottom: 14px; font: 300 26px/1.12 var(--serif); letter-spacing: -.012em; }
	.sm-zitatkarte .sm-von .sm-mehr { margin: 0; }
	/* Titel am Handy etwas offener gesetzt – Spirit Condensed gibt es nur in Light, also lieber Platz als Gewicht */
	.sm-story .sm-h { letter-spacing: -.012em; }
}

/* ---------- Drucken / Als PDF sichern: nichts versteckt, keine Bewegung ---------- */
@media print {
	.sm *, .sm *::before, .sm *::after { transition: none !important; animation: none !important; }
	.sm-js .sm .sm-rv, .sm-js .sm-welt-text figure, .sm-js .sm-welt-text blockquote, .sm-js .sm .sm-wd, .sm-js .sm-bildpaar .sm-klein,
	.sm-js .sm-held-unterzeile, .sm-js .sm-nach-einstieg, .sm-js .sm-held--raster .sm-lab { opacity: 1 !important; transform: none !important; }
	.sm-js .sm-held--raster .sm-stoerer { opacity: 1 !important; }
	.sm-js .sm-held-abzuege .sm-abzug { opacity: 1 !important; translate: none !important; }
	.sm-leiste, .sm-fortschritt { display: none !important; } /* Leiste mit × nicht auf jeder Druckseite */
}

/* ---------- Große Bildschirme (1.54.0) ----------
   Über 1440 px tritt jede Story aus dem 1440-px-Rahmen der Website heraus und füllt den Bildschirm. Ihr Inhalt steht in
   einem Rahmen von 1440 px × --sm-x und wächst in Stufen mit (1,1 ab 1600, 1,35 ab 2000, 1,6 ab 2500, 1,85 ab 3000 px).
   Allgemeine Vorlage: --u und --rand rechnen mit dem Rahmen. Eigene Stories: Innenabstand bis zum Rahmen; ihre px-Größen
   wachsen über einen erzeugten Block am Ende des jeweiligen Stylesheets (calc(… * var(--sm-x))).
   „Nächste Story“ läuft randlos über die ganze Breite, der Text steht in der Lesebreite. */
.sm-welt { --sm-x: 1; --sm-b: calc(1440px * var(--sm-x)); }
@media (min-width: 1441px) {
	.sm-welt {
		width: calc(100vw - var(--scrollbar-width, 0px)); max-width: none; margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2); box-sizing: border-box;
		--u: calc(min(100vw - var(--scrollbar-width, 0px), var(--sm-b)) / 48);
		--rand: max(calc(var(--u) * 3), calc((100vw - var(--scrollbar-width, 0px) - var(--sm-b)) / 2 + var(--u) * 3));
	}
	.sm-welt--eigen:not(.koeck-party) { padding-left: calc((100vw - var(--scrollbar-width, 0px) - var(--sm-b)) / 2); padding-right: calc((100vw - var(--scrollbar-width, 0px) - var(--sm-b)) / 2); }
	.sm-welt--eigen .sm-naechste-text { padding-left: max(var(--rand, 48px), calc((100vw - var(--scrollbar-width, 0px) - var(--sm-b)) / 2 + var(--u) * 3)); padding-right: max(var(--rand, 48px), calc((100vw - var(--scrollbar-width, 0px) - var(--sm-b)) / 2 + var(--u) * 3)); }
}
@media (min-width: 1600px) { .sm-welt { --sm-x: 1.1; } }
@media (min-width: 2000px) { .sm-welt { --sm-x: 1.35; } }
@media (min-width: 2500px) { .sm-welt { --sm-x: 1.6; } }
@media (min-width: 3000px) { .sm-welt { --sm-x: 1.85; } }