/*
 * Eigene Story „Vom Reinken und Pilgern“ (Kolumne Werner Schwaiger, Heft 4) – alles im Namensraum .koeck-schwaiger (Präfix ws-).
 * Wie im Heft: dicker rosa Rahmen (Pantone 198 U) um die ganze Seite; Lexikon erfundener Backwerke.
 * Handy zuerst; ab 1100 px Raster mit 12 Spalten, Reise-Karte links (läuft mit), Legenden rechts.
 * Schwellen: 600 px (Tablet: Text in Lesebreite), 1100 px (Raster), Fensterhöhe unter 520 px (Handy quer).
 */
/* Rahmenbreite auf dem body, damit auch die Leiste (außerhalb der Story) sie kennt */
/* --ws-so / --ws-su / --ws-ss: sichere Abstände (Statusleiste, Home-Leiste, Kamera-Aussparung quer); die Seite reicht
   hier bis an den Bildschirmrand (viewport-fit=cover, Filter jh_viewport), der Rahmen deckt diese Zonen rosa ab. */
body:has(.koeck-schwaiger) { --ws-rb: 12px; --ws-so: env(safe-area-inset-top, 0px); --ws-su: env(safe-area-inset-bottom, 0px); --ws-ss: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --ws-ro: calc(var(--ws-rb) + var(--ws-so)); --ws-rs: calc(var(--ws-rb) + var(--ws-ss)); }
@media (min-width: 600px) { body:has(.koeck-schwaiger) { --ws-rb: 16px; } }
@media (min-width: 1100px) { body:has(.koeck-schwaiger) { --ws-rb: 22px; } }
.koeck-schwaiger {
	--ws-rosa: #df6e85; /* Pantone 198 U (CMYK 0/70/30/0) am Bildschirm */
	--ws-g: var(--jh-accent, #b0c7a6);
	--ws-grau: #555;
	--ws-rand: calc(var(--ws-rs, 12px) + 18px);
	background: #fff; color: #000;
	font: 400 18px/1.55 var(--sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.koeck-schwaiger p { margin: 0; }
.koeck-schwaiger img { display: block; width: 100%; height: auto; }

/* Rahmen: liegt fest am Bildschirmrand, wie der Seitenrand im Heft; Logo und Schließen stehen innerhalb.
   Seiten: Umrandung über die volle Höhe (iOS: 100lvh, bleibt stehen, wenn Safari seine Leisten ein- und ausfährt).
   Oben und unten eigene Leisten mit Hintergrundfarbe: Safari ab iOS 26 färbt Statusleiste und Browserleiste nach festen
   Elementen am oberen und unteren Rand – so läuft das Rosa dort weiter, wo die Seite selbst nicht hinkommt. */
.koeck-schwaiger .ws-rahmen { position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 60; border-inline: var(--ws-rs) solid var(--ws-rosa); pointer-events: none; }
/* nur iOS-Safari (schwebende Leisten): bis unter die Browserleiste; Chrome für Android hätte die Unterkante sonst zunächst außerhalb */
@supports (-webkit-touch-callout: none) { .koeck-schwaiger .ws-rahmen { height: 100lvh; } }
.koeck-schwaiger .ws-rahmen-o, .koeck-schwaiger .ws-rahmen-u { position: fixed; left: 0; right: 0; background-color: var(--ws-rosa); pointer-events: auto; } /* echte, „anfassbare“ Leisten: so erkennt Safari sie als Rand */
.koeck-schwaiger .ws-rahmen-o { top: 0; height: var(--ws-ro); }
.koeck-schwaiger .ws-rahmen-u { bottom: 0; height: calc(var(--ws-rb) + var(--ws-su)); }

body:has(.koeck-schwaiger) .sm-leiste { top: var(--ws-ro); left: var(--ws-rs); right: var(--ws-rs); padding-top: 16px; padding-inline: 18px; } /* Abstand zur Aussparung gibt schon der Rahmen */
body:has(.koeck-schwaiger) .sm-fortschritt { top: var(--ws-ro); left: var(--ws-rs); right: var(--ws-rs); width: auto; }

/* 1 · Kopf */
.koeck-schwaiger .ws-held { padding: calc(80px + var(--ws-ro)) var(--ws-rand) 0; }
.koeck-schwaiger .ws-kicker { margin-bottom: .2em !important; font: 600 14px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.koeck-schwaiger .ws-h { margin: 18px 0 0; font: 300 clamp(44px, min(13vw, 18svh), 150px)/.94 var(--serif); letter-spacing: -.02em; hyphens: manual; text-transform: none; }
.koeck-schwaiger .ws-h > span { display: block; }
.koeck-schwaiger .ws-z2 { padding-left: .6em; }
.koeck-schwaiger .ws-unter { margin-top: 18px; font-size: clamp(22px, 6vw, 28px); line-height: 1.1; letter-spacing: 0; }
.koeck-schwaiger .ws-vorspann { margin-top: 28px; max-width: 24em; font: 400 21px/1.3 var(--serif); padding-left: 14px; border-left: 3px solid var(--ws-rosa); }
.koeck-schwaiger .ws-lead { margin-top: 24px; max-width: 26em; font: 300 21px/1.35 var(--serif); }
/* .ws-lead strong: Hervorhebung wie in allen Stories (stories-magazin.css, „sm-streifen“) */

/* 2 · Einstieg */
.koeck-schwaiger .ws-vor { padding: 0 var(--ws-rand); margin-top: 56px; }
.koeck-schwaiger .ws-p { margin-top: 18px; max-width: 30em; hyphens: auto; }
.koeck-schwaiger .ws-zitat { margin: 40px 0; padding: 0; border: 0; }
.koeck-schwaiger .ws-zitat p { font: 300 clamp(28px, 7.4vw, 44px)/1.1 var(--serif); letter-spacing: -.01em; text-wrap: balance; hyphens: manual; color: #000; } /* am Handy kein hängendes „ (zu nah am Rahmen) */

/* Reise-Karte (schwaiger-karte.php): am Handy ein Streifen unter der Leiste, der dem Punkt folgt (JS: Kamera).
   --ws-k = Pixel pro Karteneinheit (setzt das JS), damit Schrift und Striche bei jeder Größe gleich groß bleiben. */
.koeck-schwaiger { --ws-oben: calc(var(--ws-ro) + 64px); --ws-streifen: clamp(132px, 22svh, 180px); }
.koeck-schwaiger .ws-reise { margin-top: 72px; }
/* Der Streifen klebt direkt unter dem Rahmen und reicht hinter Logo und Schließen hinauf: kein Text blitzt dazwischen durch */
.koeck-schwaiger .ws-karte { --ws-kamera: 1; --ws-streifen-modus: 1; position: sticky; top: var(--ws-ro); z-index: 4; margin: 0 var(--ws-rs); padding-top: calc(var(--ws-oben) - var(--ws-ro)); background: #fbeef1; border-bottom: 1.5px solid #000; } /* Kante zum Text, der darunter durchläuft */
.koeck-schwaiger .ws-karte { transition: opacity .4s ease, visibility 0s linear 0s; }
.koeck-schwaiger .ws-karte.ws-fertig { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; } /* Handy: wieder daheim → Schluss und Kurzbiografie frei */
.koeck-schwaiger .ws-karte-flaeche { position: relative; height: var(--ws-streifen); overflow: hidden; container-type: inline-size; }
.koeck-schwaiger .ws-karte:not(.ws-kamera) .ws-karte-flaeche { overflow: visible; } /* ganze Karte: Beschriftungen dürfen über den Rand */
.koeck-schwaiger .ws-karte svg { display: block; width: 100%; height: 100%; overflow: visible; }
.koeck-schwaiger.ws-js .ws-karte.ws-kamera svg { position: absolute; left: 0; top: 0; width: calc(100cqi * 360 / 240); /* Ausschnitt: 240 von 360 Karteneinheiten */ height: auto; transform-origin: 0 0; will-change: transform; }
.koeck-schwaiger .ws-karte svg { --ws-k: 1.4; }
.koeck-schwaiger .ws-etappe path { fill: none; stroke: #000; stroke-width: calc(1.6px / var(--ws-k)); stroke-linecap: round; stroke-linejoin: round; }
.koeck-schwaiger .ws-etappe--blass path { stroke: #d9a3ae; }
.koeck-schwaiger .ws-weg--pilger path { stroke-width: calc(3.2px / var(--ws-k)); stroke-dasharray: 0 calc(7px / var(--ws-k)); } /* Schritte */
.koeck-schwaiger .ws-weg--wurf path { stroke-dasharray: calc(5px / var(--ws-k)) calc(5px / var(--ws-k)); } /* Flugbahn */
.koeck-schwaiger .ws-weg--strasse path { stroke-width: calc(2.2px / var(--ws-k)); } /* Straße */
.koeck-schwaiger .ws-etappe path.ws-schwellen { stroke-width: calc(max(5px, 8px * min(1, var(--ws-k))) / var(--ws-k)); stroke-linecap: butt; stroke-dasharray: calc(1.5px / var(--ws-k)) calc(6px / var(--ws-k)); } /* Gleis */
.koeck-schwaiger .ws-berg path { fill: #8a5a64; }
.koeck-schwaiger .ws-berg text { font: italic 400 calc(max(13px, 15px * min(1, var(--ws-k))) / var(--ws-k)) var(--serif); fill: #6e4650; text-anchor: end; } /* 1.48.7: größer (vorher 11–13 px) */
.koeck-schwaiger .ws-berg--rechts text { text-anchor: start; }
/* Großaufnahme am Handy: Bergnamen über dem Gipfel, mittig – seitlich wurden sie am Rand abgeschnitten (Semmering) */
.koeck-schwaiger .ws-karte.ws-kamera .ws-berg text { display: none; } /* Großaufnahme am Handy: nur die Gipfel – die Namen fielen je nach Ausschnitt seitlich, oben oder unten aus dem Streifen; die ganze Karte (quer, Tablet, Desktop) zeigt sie */
/* Beschriftungen mit Hof in der Kartenfarbe: bleiben lesbar, wenn ein Weg darunter durchläuft */
.koeck-schwaiger .ws-karte text:not(.ws-pin-nr) { paint-order: stroke; stroke: #fbeef1; stroke-width: calc(4px / var(--ws-k)); stroke-linejoin: round; }
.koeck-schwaiger .ws-spur { fill: none; stroke: none; }
.koeck-schwaiger .ws-maske { fill: none; stroke: #fff; stroke-width: 14; }
.koeck-schwaiger .ws-heim rect { fill: #000; }
.koeck-schwaiger .ws-heim text { font: 600 calc(13px / var(--ws-k)) var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.koeck-schwaiger .ws-pin { cursor: pointer; }
.koeck-schwaiger .ws-pin-feld { fill: transparent; r: max(24px, calc(24px / var(--ws-k))); } /* Tippfläche mind. 48 px */
.koeck-schwaiger .ws-pin-punkt { fill: #fff; stroke: #000; stroke-width: calc(1.5px / var(--ws-k)); transition: fill .3s ease, transform .15s ease; transform-box: fill-box; transform-origin: center; r: calc(12px / var(--ws-k)); }
.koeck-schwaiger .ws-pin.ws-dort .ws-pin-punkt { fill: var(--ws-rosa); }
.koeck-schwaiger .ws-pin-nr { font: 600 calc(13px / var(--ws-k)) var(--sans); text-anchor: middle; }
.koeck-schwaiger .ws-pin-ort { transform: translateX(calc(14px / var(--ws-k))); } /* Abstand zum Ort bleibt in Pixeln gleich */
.koeck-schwaiger .ws-pin-ort--links { transform: translateX(calc(-14px / var(--ws-k))); }
.koeck-schwaiger .ws-pin-ort { font: 400 calc(max(13px, 17px * min(1, var(--ws-k))) / var(--ws-k)) var(--serif); } /* kleine Karte: etwas kleiner, damit die Orte nicht kollidieren */
.koeck-schwaiger .ws-reisende circle { fill: var(--ws-rosa); stroke: #000; stroke-width: calc(1.5px / var(--ws-k)); r: calc(7px / var(--ws-k)); }
.koeck-schwaiger .ws-reisende .ws-reisende-hof { fill: rgba(223, 110, 133, .28); stroke: none; r: calc(15px / var(--ws-k)); }
.koeck-schwaiger .ws-pin:active .ws-pin-punkt { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .koeck-schwaiger .ws-pin:hover .ws-pin-punkt { transform: scale(1.12); } }
.koeck-schwaiger .ws-pin:focus-visible { outline: none; }
.koeck-schwaiger .ws-pin:focus-visible .ws-pin-feld { stroke: #000; stroke-width: calc(3px / var(--ws-k)); }

/* 3 · Legenden */
.koeck-schwaiger .ws-legende { padding: 0 var(--ws-rand); margin-top: 72px; scroll-margin-top: calc(var(--ws-oben) + var(--ws-streifen) + 24px); }
.koeck-schwaiger .ws-legende:first-of-type { margin-top: 48px; }
.koeck-schwaiger .ws-l-nr { font: 300 88px/.8 var(--serif); color: var(--ws-rosa); }
.koeck-schwaiger .ws-l-ort { margin-top: 12px; font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.koeck-schwaiger .ws-legende h2 { margin: 8px 0 0; padding: 0; font: 300 clamp(32px, 9vw, 40px)/1.04 var(--serif); letter-spacing: -.01em; text-transform: none; text-wrap: balance; hyphens: manual; }
.koeck-schwaiger .ws-l-text p { margin-top: 18px; max-width: 30em; hyphens: auto; }
.koeck-schwaiger .ws-zeichnung { margin: 32px auto 0; width: min(100% - 40px, 440px); } /* Platz zum Schwanken, ohne unter den Rahmen zu geraten */
.koeck-schwaiger .ws-zeichnung > div { transform-origin: 50% 92%; will-change: transform; } /* dreht um die Füße */
.koeck-schwaiger .ws-zeichnung:not(.ws-zeichnung--frei) img { mix-blend-mode: multiply; } /* JPEG mit weißem Grund */

/* 4 · Schluss */
.koeck-schwaiger .ws-ende { margin: 120px var(--ws-rand) 0; padding-top: 40px; border-top: 1.5px solid #000; }
.koeck-schwaiger .ws-ende-text p { margin-top: 16px; max-width: 28em; font: 300 22px/1.35 var(--serif); }
.koeck-schwaiger .ws-ende .ws-zitat { margin: 40px 0; }
.koeck-schwaiger .ws-foto { margin: 32px 0 0; max-width: 640px; }
.koeck-schwaiger .ws-bio { margin-top: 40px; max-width: 34em; font-size: 15px; line-height: 1.5; color: var(--ws-grau); }
.koeck-schwaiger .sm-naechste { margin-top: 96px; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
	.koeck-schwaiger.ws-js:not([data-ws-aus]) .ws-held > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
	.koeck-schwaiger.ws-js:not([data-ws-aus]) .ws-held .ws-h { transition-delay: .06s; }
	.koeck-schwaiger.ws-js:not([data-ws-aus]) .ws-held .ws-vorspann { transition-delay: .18s; }
	.koeck-schwaiger.ws-js:not([data-ws-aus]) .ws-held .ws-lead { transition-delay: .26s; }
	.koeck-schwaiger.ws-js.ws-da:not([data-ws-aus]) .ws-held > * { opacity: 1; transform: none; }
	.koeck-schwaiger.ws-js:not([data-ws-aus]) .ws-auf { opacity: 0; transform: translateY(20px); transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.16, 1, .3, 1); } /* zurück: zügig */
	.koeck-schwaiger.ws-js:not([data-ws-aus]) .ws-auf.ws-sicht { opacity: 1; transform: none; transition: opacity 1.1s cubic-bezier(.23, 1, .32, 1), transform 1.4s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--sm-stufe, 0) * 100ms); } /* hinein: ruhig (1.57.0) */
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) and (max-width: 1099px) {
	.koeck-schwaiger { --ws-rand: calc(var(--ws-rs) + 40px); }
	.koeck-schwaiger .ws-p, .koeck-schwaiger .ws-l-text p { max-width: 27em; }
	/* Tablet quer: Lesespalte mittig statt links mit leerer rechter Hälfte */
	.koeck-schwaiger .ws-held, .koeck-schwaiger .ws-vor, .koeck-schwaiger .ws-legende { max-width: 760px; margin-inline: auto; }
	.koeck-schwaiger .ws-ende { max-width: calc(760px - 2 * var(--ws-rand)); margin-inline: auto; }
	.koeck-schwaiger { --ws-streifen: clamp(170px, 20svh, 230px); }
	.koeck-schwaiger .ws-karte { --ws-kamera: 0; } /* breiter, niedriger Streifen: ganze Karte statt Großaufnahme */
	.koeck-schwaiger .ws-zitat p { text-indent: -.32em; }
}

/* 1.48.7: Kopfleiste deckend, wo die Karte daneben steht (Handy quer, ab 1100 px) – sonst lief der Text halb sichtbar unter
   Logo und Schließen durch. Am Handy hoch nicht: dort hängt der Kartenstreifen direkt darunter. */
@media (max-height: 520px) and (min-width: 540px), (min-width: 1100px) {
	body:has(.koeck-schwaiger) .sm-leiste { background: linear-gradient(to bottom, #fff 52%, rgba(255, 255, 255, 0) 74%); } /* taste-skill-ignore: Schutzverlauf unter Logo und Schließen */
}

/* ---------- Handy quer / niedrige Fenster ---------- */
@media (max-height: 520px) and (max-width: 1099px) {
	.koeck-schwaiger .ws-held { padding-top: calc(64px + var(--ws-ro)); }
	.koeck-schwaiger .ws-zeichnung { width: min(100%, 70svh); }
}
/* Handy quer: Karte links (ganz), Text rechts – ein Streifen oben ließe zu wenig Platz zum Lesen */
@media (max-height: 520px) and (min-width: 540px) and (max-width: 1099px) {
	.koeck-schwaiger .ws-reise { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; padding-left: var(--ws-rand); }
	.koeck-schwaiger .ws-karte { --ws-kamera: 0; --ws-streifen-modus: 0; grid-column: 1; grid-row: 1 / span 20; top: var(--ws-oben); margin: 0; padding: 0; border: 0; }
	.koeck-schwaiger .ws-karte-flaeche { height: auto; }
	.koeck-schwaiger .ws-legende, .koeck-schwaiger .ws-ende { grid-column: 2; max-width: none; margin-inline: 0; }
	.koeck-schwaiger .ws-legende { scroll-margin-top: calc(var(--ws-oben) + 8px); }
	.koeck-schwaiger .ws-ende { margin-left: var(--ws-rand); margin-right: var(--ws-rand); }
}

/* ---------- ab 1100 px ---------- */
@media (min-width: 1100px) {
	.koeck-schwaiger { --ws-rand: clamp(56px, 5vw, 80px); --ws-sp: 24px; }
	.koeck-schwaiger .ws-zitat p { text-indent: -.32em; }
	.koeck-schwaiger .ws-held { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ws-sp); padding-top: 140px; }
	.koeck-schwaiger .ws-kicker, .koeck-schwaiger .ws-h { grid-column: 1 / 13; }
	.koeck-schwaiger .ws-h { margin-top: 28px; font-size: clamp(96px, 9.4vw, 150px); line-height: .98; }
	.koeck-schwaiger .ws-unter { font-size: clamp(26px, 2vw, 32px); margin-top: 28px; }
	.koeck-schwaiger .ws-vorspann { grid-column: 1 / 6; grid-row: 3; align-self: start; margin-top: 40px; font-size: clamp(22px, 1.7vw, 26px); }
	.koeck-schwaiger .ws-lead { grid-column: 7 / 12; grid-row: 3; margin-top: 40px; font-size: clamp(22px, 1.7vw, 26px); }
	.koeck-schwaiger .ws-vor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ws-sp); margin-top: 120px; }
	.koeck-schwaiger .ws-vor .ws-p { grid-column: 2 / 7; max-width: 30em; }
	.koeck-schwaiger .ws-vor .ws-zitat { grid-column: 8 / 12; grid-row: 1 / span 3; align-self: center; margin: 0; }
	/* Reise: Karte links und läuft mit (ganz, ohne Kamera), Legenden rechts */
	.koeck-schwaiger .ws-reise { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ws-sp); align-items: start; margin-top: 160px; padding: 0 var(--ws-rand); }
	.koeck-schwaiger .ws-karte { --ws-kamera: 0; --ws-streifen-modus: 0; grid-column: 1 / 6; grid-row: 1 / span 20; top: 120px; margin: 0; padding: 12px; border: 0; }
	.koeck-schwaiger .ws-karte-flaeche { height: auto; }
	.koeck-schwaiger .ws-legende { grid-column: 7 / 13; padding: 0; margin-top: 0; scroll-margin-top: 120px; }
	.koeck-schwaiger .ws-legende + .ws-legende { margin-top: 140px; }
	.koeck-schwaiger .ws-l-kopf { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; }
	.koeck-schwaiger .ws-l-nr { grid-row: 1 / span 2; }
	.koeck-schwaiger .ws-legende h2 { grid-column: 2; font-size: clamp(40px, 3.2vw, 52px); }
	.koeck-schwaiger .ws-l-text p { max-width: 30em; font-size: 19px; }
	.koeck-schwaiger .ws-zeichnung { margin: 40px 0 0; width: min(100%, 440px); }
	.koeck-schwaiger .ws-legende .ws-zitat { margin: 48px 0 0; }
	.koeck-schwaiger .ws-ende { grid-column: 7 / 13; margin: 160px 0 0; }
	.koeck-schwaiger .ws-ende-text p { font-size: 24px; }
	.koeck-schwaiger .sm-naechste { margin-top: 160px; }
}
@media (min-width: 1600px) {
	.koeck-schwaiger .ws-karte { grid-column: 1 / 7; } /* große Bildschirme: Karte größer, keine verlorene linke Hälfte */
	.koeck-schwaiger .ws-legende, .koeck-schwaiger .ws-ende { grid-column: 8 / 13; }
}
@media (min-width: 1100px) and (max-height: 700px) {
	.koeck-schwaiger .ws-held { padding-top: 104px; }
	.koeck-schwaiger .ws-h { font-size: clamp(80px, 17svh, 120px); }
}

/* Drucken: Rahmen als Seitenrand weglassen, alles sichtbar */
@media print {
	.koeck-schwaiger .ws-rahmen, .koeck-schwaiger .ws-rahmen-o, .koeck-schwaiger .ws-rahmen-u { display: none; }
	.koeck-schwaiger .ws-auf, .koeck-schwaiger .ws-held > * { opacity: 1 !important; transform: none !important; }
	.koeck-schwaiger [data-ws-reinken] { transform: none !important; }
	.koeck-schwaiger .ws-reise { display: block !important; }
	.koeck-schwaiger .ws-legende, .koeck-schwaiger .ws-ende { grid-column: auto !important; }
	.koeck-schwaiger .ws-l-kopf { break-inside: avoid-page; break-after: avoid-page; }
	.koeck-schwaiger .ws-karte, .koeck-schwaiger .sm-naechste { display: none !important; }
}

/* ---------- Große Bildschirme (1.54.0, erzeugt): ab 1441 px wachsen alle Größen mit --sm-x (stories-magazin.css) ---------- */
@media (min-width: 1441px) {
	body:has(.koeck-schwaiger) { --ws-so: env(safe-area-inset-top, 0px); --ws-su: env(safe-area-inset-bottom, 0px); --ws-ss: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --ws-rb: calc(22px * var(--sm-x, 1)); }
	.koeck-schwaiger { font: 400 calc(18px * var(--sm-x, 1))/1.55 var(--sans); --ws-oben: calc(var(--ws-ro) + calc(64px * var(--sm-x, 1))); --ws-streifen: clamp(calc(132px * var(--sm-x, 1)), 22svh, calc(180px * var(--sm-x, 1))); --ws-rand: clamp(calc(56px * var(--sm-x, 1)), 5vw, calc(80px * var(--sm-x, 1))); --ws-sp: calc(24px * var(--sm-x, 1)); }
	body:has(.koeck-schwaiger) .sm-leiste { top: var(--ws-ro); left: var(--ws-rs); right: var(--ws-rs); padding-top: calc(16px * var(--sm-x, 1)); padding-inline: calc(18px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-held { padding: calc(calc(80px * var(--sm-x, 1)) + var(--ws-ro)) var(--ws-rand) 0; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ws-sp); padding-top: calc(140px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-kicker { margin-bottom: .2em !important; font: 600 calc(14px * var(--sm-x, 1))/1.2 var(--sans); }
	.koeck-schwaiger .ws-h { margin: calc(18px * var(--sm-x, 1)) 0 0; font: 300 clamp(calc(44px * var(--sm-x, 1)), min(13vw, 18svh), calc(150px * var(--sm-x, 1)))/.94 var(--serif); margin-top: calc(28px * var(--sm-x, 1)); font-size: clamp(calc(96px * var(--sm-x, 1)), 9.4vw, calc(150px * var(--sm-x, 1))); }
	.koeck-schwaiger .ws-vorspann { max-width: 24em; font: 400 calc(21px * var(--sm-x, 1))/1.3 var(--serif); padding-left: calc(14px * var(--sm-x, 1)); margin-top: calc(40px * var(--sm-x, 1)); font-size: clamp(calc(22px * var(--sm-x, 1)), 1.7vw, calc(26px * var(--sm-x, 1))); }
	.koeck-schwaiger .ws-lead { max-width: 26em; font: 300 calc(21px * var(--sm-x, 1))/1.35 var(--serif); margin-top: calc(40px * var(--sm-x, 1)); font-size: clamp(calc(22px * var(--sm-x, 1)), 1.7vw, calc(26px * var(--sm-x, 1))); }
	.koeck-schwaiger .ws-vor { padding: 0 var(--ws-rand); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ws-sp); margin-top: calc(120px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-p { margin-top: calc(18px * var(--sm-x, 1)); max-width: 30em; }
	.koeck-schwaiger .ws-zitat { margin: calc(40px * var(--sm-x, 1)) 0; padding: 0; }
	.koeck-schwaiger .ws-zitat p { font: 300 clamp(calc(28px * var(--sm-x, 1)), 7.4vw, calc(44px * var(--sm-x, 1)))/1.1 var(--serif); }
	.koeck-schwaiger .ws-karte { padding-top: calc(var(--ws-oben) - var(--ws-ro)); top: calc(120px * var(--sm-x, 1)); margin: 0; padding: calc(12px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-berg text { font: italic 400 calc(max(calc(13px * var(--sm-x, 1)), calc(15px * var(--sm-x, 1)) * min(1, var(--ws-k))) / var(--ws-k)) var(--serif); }
	.koeck-schwaiger .ws-heim text { font: 600 calc(calc(13px * var(--sm-x, 1)) / var(--ws-k)) var(--sans); }
	.koeck-schwaiger .ws-pin-nr { font: 600 calc(calc(13px * var(--sm-x, 1)) / var(--ws-k)) var(--sans); }
	.koeck-schwaiger .ws-pin-ort { font: 400 calc(max(calc(13px * var(--sm-x, 1)), calc(17px * var(--sm-x, 1)) * min(1, var(--ws-k))) / var(--ws-k)) var(--serif); }
	.koeck-schwaiger .ws-legende:first-of-type { margin-top: calc(48px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-l-nr { font: 300 calc(88px * var(--sm-x, 1))/.8 var(--serif); }
	.koeck-schwaiger .ws-l-ort { margin-top: calc(12px * var(--sm-x, 1)); font: 600 calc(13px * var(--sm-x, 1))/1 var(--sans); }
	.koeck-schwaiger .ws-legende h2 { margin: calc(8px * var(--sm-x, 1)) 0 0; padding: 0; font: 300 clamp(calc(32px * var(--sm-x, 1)), 9vw, calc(40px * var(--sm-x, 1)))/1.04 var(--serif); font-size: clamp(calc(40px * var(--sm-x, 1)), 3.2vw, calc(52px * var(--sm-x, 1))); }
	.koeck-schwaiger .ws-l-text p { margin-top: calc(18px * var(--sm-x, 1)); max-width: 30em; font-size: calc(19px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-ende { padding-top: calc(40px * var(--sm-x, 1)); margin: calc(160px * var(--sm-x, 1)) 0 0; }
	.koeck-schwaiger .ws-ende-text p { margin-top: calc(16px * var(--sm-x, 1)); max-width: 28em; font: 300 calc(22px * var(--sm-x, 1))/1.35 var(--serif); font-size: calc(24px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-ende .ws-zitat { margin: calc(40px * var(--sm-x, 1)) 0; }
	.koeck-schwaiger .ws-foto { margin: calc(32px * var(--sm-x, 1)) 0 0; max-width: calc(640px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-bio { margin-top: calc(40px * var(--sm-x, 1)); max-width: 34em; font-size: calc(15px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-unter { font-size: clamp(calc(26px * var(--sm-x, 1)), 2vw, calc(32px * var(--sm-x, 1))); margin-top: calc(28px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-reise { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ws-sp); margin-top: calc(160px * var(--sm-x, 1)); padding: 0 var(--ws-rand); }
	.koeck-schwaiger .ws-legende + .ws-legende { margin-top: calc(140px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-l-kopf { grid-template-columns: auto 1fr; column-gap: calc(20px * var(--sm-x, 1)); }
	.koeck-schwaiger .ws-zeichnung { margin: calc(40px * var(--sm-x, 1)) 0 0; width: min(100%, calc(440px * var(--sm-x, 1))); }
	.koeck-schwaiger .ws-legende .ws-zitat { margin: calc(48px * var(--sm-x, 1)) 0 0; }
	.koeck-schwaiger .sm-naechste { margin-top: calc(160px * var(--sm-x, 1)); }
}