/*
 * Eigene Story „Der saure Fritz“ (Heft 4, S. 2–3) – alles im Namensraum .koeck-fritz (Präfix kf-).
 * 1.90.0 – Welt „Fritz lebt – auch gerade jetzt“: weiße Seite wie im Heft, großer Titel, Fritz im Glas; daneben
 * „Fritz, jetzt gerade“ (gezeichneter Bottich, Stand nach der echten Uhrzeit, Angaben aus dem Text); Schütten randlos;
 * Text in Lesebreite; „Luftschlösser“ mit aufsteigenden Bläschen über der Krume; Zitat.
 * Größen in px × --kq (1; über 1440 px = --sm-x). Keine Schatten, keine Verläufe.
 */
.koeck-fritz {
	--kq: 1;
	--kf-ink: #111;
	--kf-grau: #595959;  /* 7:1 auf Weiß */
	--kf-teig: #ece6d6;  /* Fritz im Bottich */
	--kf-flaeche: #f5f2ea; /* Grund des Kastens „Fritz, jetzt gerade“ */
	--kf-rand: 20px;
	background: #fff; color: var(--kf-ink);
	font: 400 calc(18px * var(--kq))/1.55 var(--sans); text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
.koeck-fritz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.koeck-fritz figure { margin: 0; }

/* 1 · Titelseite */
.koeck-fritz .kf-seite1 { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
.koeck-fritz .kf-titel { padding: 0 var(--kf-rand); }
.koeck-fritz .kf-h { margin: 0; color: var(--kf-ink); font: 300 clamp(32px, min(13.6vw, 20svh), 128px)/.94 var(--serif); letter-spacing: -.02em; max-width: 6.2em; hyphens: manual; overflow-wrap: normal; }
.koeck-fritz .kf-unter { margin: 22px 0 0; max-width: 22em; font: 300 clamp(20px, 5.6vw, 24px)/1.3 var(--serif); }
.koeck-fritz .kf-glas { margin: 36px auto 0; max-width: min(100%, 68svh); }
.koeck-fritz .kf-glas .kf-bild { aspect-ratio: 4 / 5; overflow: hidden; background: #ececec; }
.koeck-fritz .kf-bu { margin: 10px var(--kf-rand) 0; font-size: calc(15px * var(--kq)); line-height: 1.4; color: var(--kf-grau); }

/* 2 · Fritz, jetzt gerade */
.koeck-fritz .kf-jetzt { margin: 40px var(--kf-rand) 0; padding: calc(22px * var(--kq)) calc(22px * var(--kq)) calc(20px * var(--kq)); border-radius: calc(20px * var(--kq)); background: var(--kf-flaeche); max-width: calc(460px * var(--kq)); box-sizing: border-box; }
.koeck-fritz .kf-jetzt-k { margin: 0 0 calc(16px * var(--kq)); font: 300 clamp(26px, 7vw, calc(32px * var(--kq)))/1.05 var(--serif); letter-spacing: -.015em; text-transform: none; }
.koeck-fritz .kf-jetzt-innen { display: grid; grid-template-columns: clamp(72px, 30%, calc(128px * var(--kq))) minmax(0, 1fr); gap: calc(20px * var(--kq)); align-items: end; }
.koeck-fritz .kf-bottich { display: block; width: 100%; height: auto; overflow: visible; }
.koeck-fritz .kf-rand { fill: none; stroke: var(--kf-ink); stroke-width: 2.5; stroke-linejoin: round; }
.koeck-fritz .kf-griff { fill: none; stroke: var(--kf-ink); stroke-width: 2.5; stroke-linecap: round; }
.koeck-fritz .kf-teig { fill: var(--kf-teig); }
.koeck-fritz .kf-kuppe { fill: none; stroke: var(--kf-ink); stroke-width: 2; }
.koeck-fritz .kf-stand { transform: translateY(calc(var(--y, 40) * 1px)); } /* fritz.js setzt --y (Oberkante des Teigs) */
.koeck-fritz .kf-blase { fill: #fff; stroke: var(--kf-ink); stroke-width: 1.5; }
.koeck-fritz .kf-werte { margin: 0; }
.koeck-fritz .kf-wert { margin-top: calc(12px * var(--kq)); }
.koeck-fritz .kf-wert:first-child { margin-top: 0; }
.koeck-fritz .kf-wert[hidden] { display: none; }
.koeck-fritz .kf-wert dt { font-size: calc(13px * var(--kq)); line-height: 1.25; color: var(--kf-grau); hyphens: auto; overflow-wrap: break-word; }
.koeck-fritz .kf-wert dd { margin: calc(2px * var(--kq)) 0 0; font: 300 calc(21px * var(--kq))/1.1 var(--serif); font-variant-numeric: tabular-nums; hyphens: auto; overflow-wrap: break-word; }
.koeck-fritz .kf-wert--uhr dd { font-size: calc(30px * var(--kq)); }
.koeck-fritz .kf-jetzt-hinweis { margin: calc(14px * var(--kq)) 0 0; font-size: calc(14px * var(--kq)); line-height: 1.4; color: var(--kf-grau); }

/* 3 · Das Schütten: randlos */
.koeck-fritz .kf-schuett { margin: 64px 0 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ececec; }

/* 4 · Text in Lesebreite */
.koeck-fritz .kf-seite2 { padding: 0 var(--kf-rand); }
.koeck-fritz .kf-text { max-width: 25.5em; margin: 0 auto; padding-top: 48px; }
.koeck-fritz .kf-text p { margin: 0 0 1.1em; hyphens: auto; overflow-wrap: break-word; }
.koeck-fritz .kf-text h2 { margin: 1.6em 0 .4em; color: var(--kf-ink); font: 300 clamp(26px, 7vw, calc(32px * var(--kq)))/1.1 var(--serif); letter-spacing: -.01em; text-transform: none; text-wrap: balance; }

/* Luftschlösser: Krume mit aufsteigenden Bläschen */
.koeck-fritz .kf-luft { position: relative; margin: 8px 0 40px; }
.koeck-fritz .kf-luft-bild { aspect-ratio: 1; overflow: hidden; background: #ececec; }
.koeck-fritz .kf-blasen { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; height: auto; pointer-events: none; }
.koeck-fritz .kf-blasen circle { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.koeck-fritz .kf-luft-wort { position: absolute; left: 12px; top: calc(12px); padding: 8px 12px; background: #fff; font: 300 calc(22px * var(--kq))/1 var(--serif); }

/* 5 · Zitat, Brot */
.koeck-fritz .kf-zitat { max-width: 27em; margin: 56px auto 0; padding: 0; border: 0; }
.koeck-fritz .kf-zitat p { margin: 0; color: var(--kf-ink); font: 300 clamp(30px, 9vw, calc(44px * var(--kq)))/1.05 var(--serif); letter-spacing: -.015em; text-indent: -.32em; text-wrap: balance; }
.koeck-fritz .kf-zitat cite { display: block; margin-top: 14px; font: 400 calc(15px * var(--kq))/1.3 var(--sans); font-style: normal; color: var(--kf-grau); }
.koeck-fritz .kf-brot { max-width: 27em; margin: 48px auto 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ececec; }
.koeck-fritz .sm-naechste { margin-top: 96px; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
	.koeck-fritz.kf-js .kf-w { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 70ms + 120ms); }
	.koeck-fritz.kf-js .kf-da .kf-w { opacity: 1; transform: none; }
	.koeck-fritz.kf-js .kf-schuett img { clip-path: inset(0 0 100% 0); }
	.koeck-fritz.kf-js .kf-auf { opacity: 0; transform: translateY(24px); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
	.koeck-fritz.kf-js .kf-auf.kf-sicht { opacity: 1; transform: none; transition-duration: 1.1s, 1.4s; transition-delay: calc(var(--sm-stufe, 0) * 100ms); }
	/* Fritz arbeitet: die Bläschen im Bottich steigen langsam (nur solange zu sehen, fritz.js setzt kf-lebt) */
	.koeck-fritz .kf-jetzt.kf-lebt .kf-blase { animation: kf-steigen 6s ease-in-out infinite; animation-delay: calc(var(--b) * -1.2s); }
	/* Rühren: kurz zusammenfallen (fritz.js setzt kf-ruehren zur vollen und halben Stunde) */
	.koeck-fritz .kf-jetzt.kf-ruehren .kf-bottich { animation: kf-wackeln .9s cubic-bezier(.2, .8, .2, 1); }
	/* Luftschlösser: Bläschen steigen am Scrollen (fritz.js setzt --s von 0 bis 1) */
	.koeck-fritz.kf-js .kf-blasen circle { --t: clamp(0, calc(var(--s, 0) * 1.6 - var(--v) * .6), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 30px)) scale(calc(.5 + var(--t) * .5)); } /* steigen in ihre Endlage; px = Einheiten der Zeichnung */
	.koeck-fritz .kf-stand { transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
	.koeck-fritz.kf-js .kf-schuett { background: none; } /* beim Aufdecken keine graue Fläche wie ein nicht geladenes Bild */
}
@keyframes kf-steigen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kf-wackeln { 0% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } 100% { transform: rotate(0); } }

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
	.koeck-fritz { --kf-rand: 48px; }
	.koeck-fritz .kf-glas { margin-inline: auto; }
	.koeck-fritz .kf-bu { margin-inline: 0; }
}

/* ---------- Desktop: wie die Doppelseite im Heft ---------- */
@media (min-width: 900px) {
	.koeck-fritz { --kf-rand: 56px; font-size: calc(19px * var(--kq)); }
	.koeck-fritz .kf-seite1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 56px; padding: calc(120px * var(--kq)) var(--kf-rand) 0; }
	.koeck-fritz .kf-titel { grid-column: 1; grid-row: 1; padding: 0; }
	.koeck-fritz .kf-h { font-size: clamp(64px, 7.2vw, calc(124px * var(--kq))); }
	.koeck-fritz .kf-glas { grid-column: 2; grid-row: 1 / 3; margin: 0; padding-left: 56px; border-left: 1px solid var(--kf-ink); max-width: none; } /* die senkrechte Linie aus dem Heft */
	.koeck-fritz .kf-glas .kf-bild { aspect-ratio: 3 / 4; max-height: 86svh; }
	.koeck-fritz .kf-bu { max-width: 24em; margin: 10px 0 0; }
	.koeck-fritz .kf-jetzt { grid-column: 1; grid-row: 2; align-self: start; margin: 48px 0 0; }
	.koeck-fritz .kf-schuett { margin-top: calc(96px * var(--kq)); aspect-ratio: auto; height: min(86svh, calc(900px * var(--kq))); }
	.koeck-fritz .kf-text { max-width: 26em; padding-top: calc(80px * var(--kq)); }
	.koeck-fritz .kf-luft { margin-inline: -3em; }
	.koeck-fritz .kf-luft-bild { aspect-ratio: 4 / 3; }
	.koeck-fritz .kf-blasen { aspect-ratio: 4 / 3; }
	.koeck-fritz .kf-zitat { max-width: 18em; margin-top: calc(96px * var(--kq)); }
	.koeck-fritz .kf-zitat p { font-size: clamp(40px, 3.6vw, calc(58px * var(--kq))); }
	.koeck-fritz .kf-brot { max-width: 32em; }
}
@media (min-width: 1000px) { .koeck-fritz .sm-naechste { margin-top: 160px; } }
@media (min-width: 1441px) {
	.koeck-fritz { --kq: var(--sm-x, 1); --kf-rand: calc(56px * var(--kq)); }
	.koeck-fritz .kf-unter { font-size: calc(24px * var(--kq)); }
	.koeck-fritz .kf-seite1, .koeck-fritz .kf-glas { gap: 0 calc(56px * var(--kq)); }
	.koeck-fritz .kf-glas { padding-left: calc(56px * var(--kq)); }
	.koeck-fritz .sm-naechste { margin-top: calc(160px * var(--sm-x, 1)); }
}
@media (max-width: 259px) {
	.koeck-fritz { --kf-rand: 14px; }
	.koeck-fritz .kf-jetzt-innen { grid-template-columns: minmax(0, 1fr); }
	.koeck-fritz .kf-bottich { max-width: 80px; }
	.koeck-fritz .kf-jetzt { padding: 16px 14px; }
	.koeck-fritz .kf-h, .koeck-fritz .kf-text h2 { hyphens: auto; overflow-wrap: anywhere; }
	.koeck-fritz .kf-luft-wort { left: 6px; top: 6px; padding: 5px 8px; font-size: 17px; }
}

/* Drucken */
@media print {
	.koeck-fritz .kf-w, .koeck-fritz .kf-auf { opacity: 1 !important; transform: none !important; }
	.koeck-fritz .kf-schuett img { clip-path: none !important; }
	.koeck-fritz .kf-blasen { display: none; }
	.koeck-fritz .kf-jetzt { break-inside: avoid; }
}
/* Schmale Handys und große Schrift: Bottich über den Angaben */
@media (max-width: 359px) {
	.koeck-fritz .kf-jetzt-innen { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.koeck-fritz .kf-bottich { max-width: 96px; }
}