/*
 * Gestaltungselemente der Marke FrameYourself.
 *
 * Sie sind nicht erfunden, sondern aus Annes vorhandenem Material abgeleitet:
 * Plakat A3, Flyer A6 (Vorder- und Rückseite), Visitenkarte und Ladentitel.
 * Wiederkehrend sind dort die Sprechblase, der gezackte Preis-Störer, das
 * posterisierte Porträt und die Brille aus dem Logo.
 */

/* ------------------------------------------------------------------ *
 * 1. Sprechblase — Anne spricht den Besucher direkt an.
 *    Auf beiden Flyerseiten das beherrschende Element.
 * ------------------------------------------------------------------ */

.fy-blase {
	position: relative;
	background: var(--weiss);
	border: 2px solid var(--rosa);
	border-radius: 34px;
	padding: 1.9rem 2.2rem;
	font-family: var(--schrift-hand);
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
	line-height: 1.45;
}

/* Der Zipfel: zwei übereinanderliegende Dreiecke, das obere in der
   Füllfarbe — so entsteht eine Kontur, die mitläuft. */
.fy-blase::before,
.fy-blase::after {
	content: "";
	position: absolute;
	left: 54px;
	width: 0;
	height: 0;
	border-style: solid;
}

.fy-blase::before {
	bottom: -30px;
	border-width: 30px 24px 0 0;
	border-color: var(--rosa) transparent transparent transparent;
}

.fy-blase::after {
	bottom: -25px;
	border-width: 26px 20px 0 0;
	border-color: var(--weiss) transparent transparent transparent;
}

/* Zipfel nach rechts statt nach links */
.fy-blase.ist-rechts::before,
.fy-blase.ist-rechts::after {
	left: auto;
	right: 54px;
	transform: scaleX(-1);
}

/* Auf farbigem Grund steht die Blase cremefarben statt weiß. */
.has-accent-background-color .fy-blase,
.has-contrast-background-color .fy-blase {
	background: var(--creme);
	border-color: var(--tinte);
}

.has-accent-background-color .fy-blase::after,
.has-contrast-background-color .fy-blase::after {
	border-top-color: var(--creme);
}

.has-accent-background-color .fy-blase::before,
.has-contrast-background-color .fy-blase::before {
	border-top-color: var(--tinte);
}

/* ------------------------------------------------------------------ *
 * 2. Preis-Störer — der gezackte Kreis von der Flyer-Rückseite.
 *    STEHT DERZEIT AUF KEINER SEITE. Er war kurz im Werkstatt-Abschnitt
 *    (erst als Stern, dann als Stempel, Abschnitt 16) und ist am
 *    2026-10-04 auf Michis Wunsch ganz herausgenommen worden. Der Code
 *    bleibt, weil es Annes eigenes Element vom Flyer ist: einsetzen heißt
 *    nur, die Klasse wieder in ein Pattern zu schreiben.
 * ------------------------------------------------------------------ */

.fy-stoerer {
	display: grid;
	place-content: center;
	text-align: center;
	aspect-ratio: 1;
	/* Gemessen: „Einstärkenbrille“ belegt bei dieser Schriftgröße 88 px.
	   Der Innenabstand steht bewusst in rem, nicht in Prozent: prozentuales
	   padding bezieht sich in CSS auf die Breite des ELTERNblocks, nicht des
	   Sterns — bei 768 px Fensterbreite blieben dadurch nur 35 px nutzbar
	   und das Wort brach mitten durch. Mit 2,2 rem bleiben überall rund
	   118 px, dazu eine weiche Trennstelle im Text als Rückfall. */
	width: clamp(188px, 16vw, 212px);
	padding: 2.2rem;
	box-sizing: border-box;
	background: var(--rosa);
	color: var(--tinte);
	/* 24-zackiger Stern, abwechselnd Radius 50 % und 41 % um die Mitte.
	   Gerechnet von `stern-polygon.py`, nicht von Hand getippt — die
	   vorherige Fassung behauptete dasselbe, hatte aber 40 statt 48 Punkte
	   und ihre Mitte bei 62,2 % statt 50 %. Der Stern saß dadurch rechts
	   in seinem Kasten und die mittig gesetzte Schrift sichtbar links
	   davon. Nach jeder Änderung an den Werten das Skript laufen lassen,
	   es rechnet sein Ergebnis selbst nach. */
	clip-path: polygon(
		50.00% 0.00%, 55.35% 9.35%, 62.94% 1.70%, 65.69% 12.12%, 75.00% 6.70%,
		74.96% 17.47%, 85.36% 14.64%, 82.53% 25.04%, 93.30% 25.00%, 87.88% 34.31%,
		98.30% 37.06%, 90.65% 44.65%, 100.00% 50.00%, 90.65% 55.35%, 98.30% 62.94%,
		87.88% 65.69%, 93.30% 75.00%, 82.53% 74.96%, 85.36% 85.36%, 74.96% 82.53%,
		75.00% 93.30%, 65.69% 87.88%, 62.94% 98.30%, 55.35% 90.65%, 50.00% 100.00%,
		44.65% 90.65%, 37.06% 98.30%, 34.31% 87.88%, 25.00% 93.30%, 25.04% 82.53%,
		14.64% 85.36%, 17.47% 74.96%, 6.70% 75.00%, 12.12% 65.69%, 1.70% 62.94%,
		9.35% 55.35%, 0.00% 50.00%, 9.35% 44.65%, 1.70% 37.06%, 12.12% 34.31%,
		6.70% 25.00%, 17.47% 25.04%, 14.64% 14.64%, 25.04% 17.47%, 25.00% 6.70%,
		34.31% 12.12%, 37.06% 1.70%, 44.65% 9.35%
	);
}

.fy-stoerer .fy-stoerer__was {
	font-size: 0.75rem;
	line-height: 1.2;
	font-weight: 600;
	hyphens: auto;
}

.fy-stoerer .fy-stoerer__preis {
	font-family: var(--schrift-hand);
	font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
	line-height: 1.05;
	margin-top: 0.25rem;
	display: block;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * 3. Die Brille aus dem Logo als Zeichen.
 *    Liegt als assets/bilder/brille.svg im Theme und nimmt currentColor an.
 * ------------------------------------------------------------------ */

.fy-brille {
	display: inline-block;
	width: 1em;
	aspect-ratio: 242 / 607;
	background: currentColor;
	-webkit-mask: url("bilder/brille-maske.svg") center / contain no-repeat;
	mask: url("bilder/brille-maske.svg") center / contain no-repeat;
	vertical-align: -0.1em;
}

/* Als Trenner zwischen zwei Abschnitten: liegende Brille, mittig. */
.fy-trenner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	color: var(--rosa);
}

.fy-trenner::before,
.fy-trenner::after {
	content: "";
	/* Gepunktet statt durchgezogen: liest sich wie eine Naht und passt zum
	   Handgemachten. Höhe 0 und stattdessen eine Rahmenlinie — eine
	   gepunktete Linie gibt es in CSS nur als Rahmen, nicht als Fläche. */
	height: 0;
	border-top: 3px dotted currentColor;
	flex: 0 1 110px;
	opacity: 0.5;
}

.fy-trenner .fy-brille {
	width: 1.9rem;
	/* 270° statt 90°: dieselbe liegende Brille, aber um 180° gedreht —
	   die Bügel zeigen jetzt zur anderen Seite (Michi, 2026-10-04). */
	transform: rotate(270deg);
}

/* Das Band gehört auf weißen Grund: die freigestellten Fassungen bringen
   Weiß mit, auf cremefarbenem Untergrund stünden sie in einem Kasten. */
.fy-band {
	background: #fff;
}

/* ------------------------------------------------------------------ *
 * 4. Fassungsband — ÜBERHOLT, steht auf keiner Seite mehr.
 *    Der Fassungs-Slider (Abschnitt 7) hat es am 2026-10-03 abgelöst:
 *    er zeigt dieselben Bilder einzeln und groß statt als Laufband.
 *    Code und Kurzbefehl `[fy_fassungsband]` bleiben liegen, falls das
 *    Band irgendwo noch gebraucht wird — wer aufräumt, kann beides
 *    zusammen entfernen (hier und in functions.php).
 *
 *    Echte Fassungen aus Annes Laden, die ruhig
 *    vorbeiziehen. Zwei identische Hälften, damit der Lauf nahtlos ist.
 * ------------------------------------------------------------------ */

.fy-band {
	--fy-band-dauer: 90s;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.fy-band__lauf {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	width: max-content;
	animation: fy-band-lauf var(--fy-band-dauer) linear infinite;
}

.fy-band:hover .fy-band__lauf,
.fy-band:focus-within .fy-band__lauf {
	animation-play-state: paused;
}

.fy-band img {
	display: block;
	height: clamp(84px, 9vw, 124px);
	width: auto;
	flex: none;
	/* Die Fassungen sind freigestellt und stehen auf weißem Grund — eine
	   Rundung würde eine Kante zeichnen, die es gar nicht gibt. */
	border-radius: 0;
}

@keyframes fy-band-lauf {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Wer Bewegung abbestellt hat, bekommt ein ruhendes Band. */
@media (prefers-reduced-motion: reduce) {
	.fy-band__lauf {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	.fy-band {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Bild im Brillenglas — ein Ausschnitt in der Form des Logo-Glases.
 * ------------------------------------------------------------------ */

.fy-glas {
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: 34% 32% 36% 38% / 30% 30% 40% 40%;
}

.fy-glas img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Der Ausschnitt sitzt oben, nicht mittig: das Glas ist hochkant
	   (5 : 6), das Foto ist hochkanter (3 : 4) — gemessen werden dadurch
	   rund 50 px in der Höhe abgeschnitten. Mittig verteilt wären das
	   25 px oben, und genau die hätten Annes Dutt gekostet (ihr Wunsch,
	   2026-10-04). Jetzt fällt alles unten weg, wo nur Hintergrund ist. */
	object-position: center top;
	display: block;
	border-radius: inherit;
}

/* Rosa Kontur um das Foto, wie die Fassung um ein Brillenglas.
   Vorher lag sie gleich groß, aber 14 px nach oben rechts versetzt
   darüber — gedacht als Anspielung auf das Glas über dem Buchstaben im
   Logo. Im Logo liegt dort aber eine ANDERE Form über dem Buchstaben;
   dieselbe Form leicht versetzt liest sich wie ein Druckversatz, nicht
   wie Absicht (Michi hat genau danach gefragt, 2026-10-04). Jetzt
   umschließt sie das Foto gleichmäßig. Zurück zum Versatz: `inset`
   wieder auf `-14px -14px 14px 14px`. */
.fy-glas-rahmen {
	position: relative;
}

.fy-glas-rahmen::before {
	content: "";
	position: absolute;
	inset: -16px;
	border: 3px solid var(--rosa);
	border-radius: 34% 32% 36% 38% / 30% 30% 40% 40%;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 6. Kleinigkeiten
 * ------------------------------------------------------------------ */

/* Zahl im Kreis für die vier Fragen an die Hersteller. */
.fy-zahl {
	display: inline-grid;
	place-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 999px;
	background: var(--rosa);
	color: var(--tinte);
	font-family: var(--schrift-hand);
	font-size: 1.25rem;
	line-height: 1;
}

/* Hersteller-Logos: gemeinsame Höhe, aber volle Deckkraft. Gemessen
   reicht ihre Helligkeit von 26 (Dick Moby) bis 127 (Markus T) — eine
   zurückgenommene Deckkraft lässt das hellste davon verschwinden, und
   ein Markenzeichen, das man nicht lesen kann, hilft niemandem. */
.fy-marke-logo img {
	height: 52px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.fy-marke-logo {
	margin-block-end: 0.2rem;
}

/* Die Karten heben sich beim Überfahren leicht an — in style.css
   definiert; hier nur der Verzicht bei abbestellter Bewegung. */
@media (prefers-reduced-motion: reduce) {
	.fy-karte:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * 7. Fassungs-Slider
 *
 * Grundlage ist eine waagerecht scrollbare Liste mit scroll-snap. Das
 * Skript ergänzt nur Weiterlauf, Pfeile und Punkte; ohne Skript bleibt
 * eine Reihe, die sich wischen und mit der Tastatur bedienen lässt.
 * ------------------------------------------------------------------ */

.fy-slider {
	position: relative;
	background: #fff;
	padding-block: 0.5rem 3.9rem;
}

.fy-slider__bahn {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	margin: 0;
	padding: 0 calc(50% - min(360px, 38vw));
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.fy-slider__bahn::-webkit-scrollbar {
	display: none;
}

.fy-slider__folie {
	flex: none;
	width: min(720px, 76vw);
	scroll-snap-align: center;
	margin: 0;
}

.fy-slider__folie img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Pfeile: nur sichtbar, wenn das Skript läuft — ohne es wären sie wirkungslos. */
.fy-slider__pfeil {
	display: none;
}

.fy-slider.ist-bedienbar .fy-slider__pfeil {
	display: grid;
	place-content: center;
	position: absolute;
	top: calc(50% - 1.7rem);
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid var(--tinte);
	border-radius: 999px;
	background: #fff;
	color: var(--tinte);
	cursor: pointer;
}

.fy-slider__pfeil svg {
	width: 24px;
	height: 24px;
}

.fy-slider__pfeil:hover {
	background: var(--rosa);
	border-color: var(--rosa);
}

.fy-slider__pfeil--zurueck { left: clamp(8px, 3vw, 40px); }
.fy-slider__pfeil--vor     { right: clamp(8px, 3vw, 40px); }

.fy-slider__punkte {
	display: none;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.4rem;
}

.fy-slider.ist-bedienbar .fy-slider__punkte {
	display: flex;
}

.fy-slider__punkt {
	/* Sichtbar ist nur der kleine Punkt; die Trefffläche ist 44 px hoch,
	   damit er sich auf dem Telefon sicher treffen lässt. Schmaler als
	   hoch ist in einer waagerechten Reihe vertretbar — nebeneinander
	   berühren sich die Flächen lückenlos. */
	width: 26px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.fy-slider__punkt::after {
	content: "";
	position: absolute;
	inset: 18px 9px;
	border-radius: 999px;
	background: #cdc3b8;
}

.fy-slider__punkt:hover::after {
	background: var(--rose);
}

.fy-slider__punkt[aria-current="true"]::after {
	inset: 16px 7px;
	background: var(--rosa);
}

.fy-slider__pfeil:focus-visible,
.fy-slider__punkt:focus-visible {
	outline: 3px solid var(--rose);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.fy-slider__folie { width: 86vw; }
	.fy-slider.ist-bedienbar .fy-slider__pfeil { display: none; }
}

/* ------------------------------------------------------------------ *
 * 8. Terminbuchung mit Einwilligung
 *
 * Vor dem Klick steht nur der Hinweiskasten; der Kalender von Umami View
 * wird erst danach eingefügt. Siehe assets/termin.js.
 * ------------------------------------------------------------------ */

.fy-termin__hinweis {
	max-width: 720px;
	margin-inline: auto;
	border: 2px solid var(--rosa);
	border-radius: 22px;
	background: var(--weiss);
	padding: clamp(1.5rem, 4vw, 2.6rem);
}

.fy-termin__titel {
	margin-block: 0 0.8rem;
	font-family: var(--schrift-hand);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
}

.fy-termin__hinweis p {
	margin-block: 0 0.9rem;
	line-height: 1.65;
}

.fy-termin__hinweis code {
	background: var(--creme);
	border-radius: 5px;
	padding: 1px 7px;
	font-size: 0.92em;
	word-break: break-all;
}

.fy-termin__rechtliches {
	font-size: 0.95rem;
}

.fy-termin__knopf {
	margin-block: 1.4rem 1.2rem;
}

/* Der Knopf trägt die Gestalt der übrigen Knöpfe, ist aber ein <button> —
   er führt nirgendwohin, sondern lädt etwas nach. */
.fy-termin__laden {
	border: 0;
	cursor: pointer;
	background: var(--tinte);
	color: var(--creme);
	border-radius: 999px;
	padding: 0.95rem 1.9rem;
	font-family: var(--schrift);
	font-size: var(--normal);
	font-weight: 600;
	min-height: 44px;
}

.fy-termin__laden:hover {
	background: var(--rose);
}

.fy-termin__laden:focus-visible {
	outline: 3px solid var(--rose);
	outline-offset: 3px;
}

.fy-termin__ohne {
	margin-block-end: 0;
	font-size: 0.95rem;
	color: var(--gedaempft);
}

.fy-termin__rahmen {
	border: 1px solid var(--linie);
	border-radius: 22px;
	overflow: hidden;
	background: var(--weiss);
	/* Umami View braucht Platz für seine Reiterleiste („Art des Termins“ …
	   „Ihre Daten“). In Lesebreite (720 px) schnitt der letzte Reiter ab.
	   Der Wert kommt vom Kurzbefehl — [fy_termin breite="1100"] —, damit
	   er sich ohne Eingriff ins CSS nachstellen lässt. */
	max-width: var(--fy-termin-breite, 960px);
	margin-inline: auto;
}

.fy-termin__rahmen:focus {
	outline: 3px solid var(--rose);
	outline-offset: 3px;
}

.fy-termin__rahmen iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Ohne JavaScript bliebe nur der Hinweis stehen, und der Knopf täte nichts.
   Dann führt ein echter Link zum Anbieter — in einem neuen Tab, damit die
   Entscheidung bewusst bleibt. */
.no-js .fy-termin__laden {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 9. Wortmarke in der Überschrift — statt des getippten „FrameYourself“
 *    steht dort Annes Logo selbst.
 * ------------------------------------------------------------------ */

/* Die Datei ist Annes Logo ohne die Zeile „Nachhaltige Brillen“, aus
   `eingang/ttl/frameyourself_logo.svg` abgeleitet. Der Schriftzug liegt
   darin als Pfad, nicht als Text: ein <img> lädt die Schriften der Seite
   nicht mit, Chilanka wäre sonst still durch eine Ersatzschrift getauscht.
   Die Tinte (#1F1C1A) steckt in der Datei und entspricht `contrast`. */
/* „bei“ und die Wortmarke bilden zusammen die zweite Zeile der
   Überschrift — als Flex-Reihe, damit das Logo den Rest der Zeile
   ausfüllt statt in fester Breite dazustehen (Michi, 2026-10-04).
   Inline ging das nicht: eine Inline-Grafik kennt den verbleibenden
   Platz ihrer Zeile nicht, sie kann ihn nur geschätzt bekommen. */
.fy-wortmarke-zeile {
	display: flex;
	align-items: center;
	gap: 0.2em;
}

.fy-wortmarke {
	/* `flex: 1 1 0` nimmt den ganzen Rest der Zeile; mit `auto` als Basis
	   rechnete der Browser mit der Eigenbreite der Datei weiter und ließe
	   rechts Platz übrig. Die Höhe folgt über das Seitenverhältnis. */
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	height: auto;
	/* KEINE Höhenbegrenzung. Ein erster Versuch hatte `max-height: 2.2em`
	   plus `object-fit: contain` — der Kasten füllte die Zeile dann zwar
	   bis zum rechten Rand, die gezeichnete Grafik aber nur zu 322 von
	   519 px; die restlichen 196 px waren leerer Kasten. Eine Messung des
	   Kastens hätte „passt genau" gemeldet, das Auge sah etwas anderes. */
}

/* ------------------------------------------------------------------ *
 * 10. Aufmacher: Textspalte auf die Höhe der Bildspalte ziehen.
 * ------------------------------------------------------------------ */

/* Die Bildspalte (Foto + Sprechblase) ist fast doppelt so hoch wie die
   Textspalte. Seit beide oben ausgerichtet sind, blieb unten links eine
   große Lücke. Statt sie dort zu sammeln, wird sie gleichmäßig zwischen
   die Textblöcke verteilt.

   Erst ab 782 px: darunter stapelt WordPress die Spalten untereinander,
   dort gibt es keine fremde Höhe, an die sich etwas anpassen müsste —
   `space-between` würde den Text nur grundlos auseinanderziehen. */
@media (min-width: 782px) {
	:is(.spalte, .spalte--fest).fy-aufmacher__text {
		/* `space-between` allein tat nichts: die Spalte trägt von der
		   Ausrichtung „oben“ ein `align-self: flex-start` und ist deshalb
		   nur so hoch wie ihr Inhalt — es gibt gar keinen freien Platz zu
		   verteilen. Erst `stretch` zieht sie auf die Höhe der Bildspalte. */
		/* Und `display: block` ignoriert `justify-content` schlicht —
		   die Spalte ist im Standard kein Flex-Behälter. */
		display: flex;
		flex-direction: column;
		align-self: stretch;
		justify-content: space-between;
	}
}

/* ------------------------------------------------------------------ *
 * 11. Anfahrtskarte.
 * ------------------------------------------------------------------ */

/* Die Karte ist eine SVG-Datei vom eigenen Server — keine fremden Kacheln,
   also geht auch keine Besucher-IP an Google oder OpenStreetMap. Erzeugt
   von `anfahrtskarte.py` aus dem lokalen OSM-Abzug. */
.fy-anfahrtskarte img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	border: 1px solid #EDE2D6;
	background: var(--creme);
}

.fy-anfahrtskarte figcaption {
	margin-block-start: 0.7em;
	font-size: var(--klein);
	color: var(--gedaempft);
}

/* ------------------------------------------------------------------ *
 * 12. Illustrationen im Flyer-Stil.
 * ------------------------------------------------------------------ */

/* Erzeugt von `illustrationen.py` aus Annes Flyer-Gestaltung. Sie liegen
   im Theme, nicht in der Mediathek — sie gehören zur Gestaltung. */
.fy-illu {
	margin-block: var(--raum-50);
}

.fy-illu img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}

.fy-illu figcaption {
	margin-block-start: 0.6em;
	font-size: var(--klein);
	color: var(--gedaempft);
	text-align: center;
}

/* In der Dreierreihe stehen sie enger beieinander und tragen nur ein
   Stichwort statt eines Satzes. */
.fy-illu--klein {
	margin-block: 0;
}

.fy-illu--klein figcaption {
	font-weight: 600;
	color: var(--tinte);
}

/* In der Dreierreihe haben die Bilder unterschiedliche Seitenverhältnisse
   (zwei quer, eins fast quadratisch) — nebeneinander sah das aus, als wäre
   eines verrutscht. Gleicher Kasten für alle, und `contain` statt `cover`:
   bei einer Illustration darf nichts abgeschnitten werden. */
.fy-illu--klein img {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--weiss, #FFFFFF);
}

/* ------------------------------------------------------------------ *
 * 13. Störer als Haltung statt als Preis.
 * ------------------------------------------------------------------ */

/* Der gezackte Stern von der Flyer-Rückseite trägt dort einen Preis. Hier
   trägt er einen Satz — darum darf der Text umbrechen, was der Preis
   (`white-space: nowrap`) ausdrücklich nicht darf. Bewusst **einmal** auf
   der ganzen Seite: zweimal wäre er Dekoration statt Aussage. */
.fy-stoerer--spruch .fy-stoerer__preis {
	white-space: normal;
	/* Der Stern ist zwar 243 px breit, aber nur der einbeschriebene Kreis
	   liegt sicher innen: die Zacken wechseln zwischen 50 % und 41 % Radius,
	   nutzbar sind also rund 0,82 der Breite. Bei 1,5 rem ragte
	   „Zuschauen" in die Zacken hinein und wurde links angeschnitten. */
	font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.45rem);
	line-height: 1.15;
	hyphens: auto;
}

/* Er sitzt über der oberen rechten Ecke des Fotos und ist leicht gedreht —
   wie aufgeklebt. Auf dem Telefon stünde er sonst halb außerhalb, dort
   rückt er in die Ecke und wird kleiner. */
.fy-stoerer-ecke {
	position: relative;
}

.fy-stoerer-ecke .fy-stoerer {
	position: absolute;
	z-index: 2;
	top: -28px;
	right: -34px;
	rotate: -9deg;
	/* `box-shadow` wäre hier wirkungslos: `clip-path` schneidet den Schatten
	   mit weg. `drop-shadow` folgt dagegen der ausgeschnittenen Form. */
	filter: drop-shadow(0 10px 20px rgba(31, 28, 26, 0.35));
}

/* WordPress gibt den Kindern einer Gruppe mit „constrained“-Layout eine
   Höchstbreite von 720 px und automatische Seitenränder. Im 212 px breiten
   Stern schob das den Text sichtbar nach links aus der Form heraus. */
.fy-stoerer > * {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 781px) {
	.fy-stoerer-ecke .fy-stoerer {
		width: clamp(150px, 42vw, 182px);
		padding: 1.7rem;
		top: -18px;
		right: -8px;
	}
}

/* Wer Bewegung abbestellt hat, bekommt ihn gerade statt gedreht. */
@media (prefers-reduced-motion: reduce) {
	.fy-stoerer-ecke .fy-stoerer {
		rotate: none;
	}
}

/* ------------------------------------------------------------------ *
 * 14. Annes Satz — die Sprechblase als ganzer Abschnitt.
 * ------------------------------------------------------------------ */

/* Dieselbe Blase wie im Aufmacher, nur groß. Die Schrift ist Chilanka,
   dieselbe wie im Logo: der Satz soll wie von ihr geschrieben wirken,
   nicht wie gesetzter Werbetext. */
.fy-blase--gross {
	padding: clamp(1.6rem, 1rem + 2.4vw, 2.8rem) clamp(1.4rem, 1rem + 2vw, 2.6rem);
}

.fy-blase--gross p {
	font-size: clamp(1.45rem, 1rem + 2.1vw, 2.35rem);
	line-height: 1.35;
}

/* Der Trenner braucht Luft um sich, sonst klebt die Brille am Text. */
.fy-trenner {
	margin-block: var(--raum-60);
}

/* ------------------------------------------------------------------ *
 * 15. Fokusring in den Farben der Marke.
 * ------------------------------------------------------------------ */

/* Vorher kam der orange Standardring des Browsers — er funktioniert, fällt
   aber aus der Palette und sieht auf dem cremefarbenen Grund wie ein Fehler
   aus. Zwei Ringe statt einem, weil die Seite helle UND dunkle Abschnitte
   hat: der dunkle liegt direkt am Element (sichtbar auf Creme), der helle
   außen herum (sichtbar auf dem dunklen Werkstatt-Abschnitt). So trägt
   immer einer der beiden, egal worauf das Element steht.

   Nur `:focus-visible`, nicht `:focus` — sonst bekäme auch jeder Mausklick
   einen Ring. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--creme);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--rose);
	border-radius: 3px;
}

/* Der Sprunglink erscheint beim ersten Tabulatorschritt oben links. Er
   steht auf eigenem Grund, deshalb hier nur der dunkle Ring. */
.skip-link:focus-visible {
	outline: 3px solid var(--rose);
	outline-offset: 2px;
	box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * 16. Störer als Stempel — EBENFALLS NICHT IM EINSATZ.
 *     Am 2026-10-04 gewählt und am selben Tag wieder herausgenommen.
 *     Bleibt als zweite Fassung des Elements aus Abschnitt 2 liegen.
 * ------------------------------------------------------------------ */

/* Dieselbe Stelle, dieselben zwei Zeilen — nur kein Zackenstern mehr,
   sondern ein Stempelabdruck mit doppelter Kontur. Passt besser zu einer
   Werkstatt als ein Preisstern vom Flyer.

   Der Stern (Abschnitt 2) bleibt im Stylesheet: er ist Annes eigenes
   Element von der Flyer-Rückseite und über `--spruch` jederzeit wieder
   einsetzbar. Welcher gilt, entscheidet allein die Klasse im Pattern. */
.fy-stoerer--stempel {
	clip-path: none;
	aspect-ratio: auto;
	width: clamp(168px, 15vw, 196px);
	padding: 0.95rem 1.2rem;
	background: var(--creme);
	color: var(--rose);
	border: 3px double var(--rose);
	border-radius: 6px;
}

.fy-stoerer--stempel .fy-stoerer__was {
	/* Nicht kleiner als 0,8 rem: bei 0,72 rem waren es 11,5 px, und der
	   Gerätetest hat das auf 19 von 19 Geräten als zu klein gemeldet.
	   Versalien mit Sperrung lesen sich ohnehin schlechter als gemischte
	   Schrift, da ist 13 px die sinnvolle Untergrenze. */
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.fy-stoerer--stempel .fy-stoerer__preis {
	font-family: var(--schrift-hand);
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
	line-height: 1.15;
	white-space: normal;
	margin-top: 0.15rem;
}

/* Der Stempel ist breiter als hoch und verträgt weniger Drehung als der
   Stern — bei -9° sah er umgekippt aus statt aufgedrückt. */
.fy-stoerer-ecke .fy-stoerer--stempel {
	top: 10px;
	right: -16px;
	rotate: -6deg;
	filter: drop-shadow(0 8px 16px rgba(31, 28, 26, 0.3));
}

@media (max-width: 781px) {
	.fy-stoerer-ecke .fy-stoerer--stempel {
		width: clamp(150px, 42vw, 180px);
		padding: 0.8rem 1rem;
		top: 6px;
		right: -6px;
	}
}

/* ------------------------------------------------------------------ *
 * 17. Annes Satz ohne Blase (Variante C).
 * ------------------------------------------------------------------ */

/* Statt der Sprechblase ein ruhiger Kasten mit einem überdimensionalen
   Anführungszeichen in Chilanka. Es ist Schmuck und wird deshalb von
   Vorleseprogrammen übersprungen — der Satz selbst trägt bereits ein
   richtiges Anführungszeichen im Text, es wäre sonst doppelt zu hören. */
.fy-zitat {
	/* Kein eigener Hintergrund: Weiß auf dem cremefarbenen Abschnitt
	   ergibt gemessen 1,07 Kontrast — das wäre kein sichtbarer Kasten,
	   nur eine Behauptung. Den Rahmen macht deshalb die Linie, und die
	   ist dafür etwas kräftiger als die üblichen Trennlinien im Theme. */
	background: transparent;
	border: 1px solid #E2D2C0;
	border-radius: 20px;
	padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem)
	         clamp(1.5rem, 1rem + 2.4vw, 3rem);
	position: relative;
}

.fy-zitat p {
	font-family: var(--schrift-hand);
	font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
	line-height: 1.38;
	margin: 0;
	padding-left: clamp(2rem, 1rem + 3vw, 3.6rem);
}

.fy-zitat::before {
	content: "\201E";
	position: absolute;
	left: clamp(1rem, 0.6rem + 1.4vw, 2rem);
	top: clamp(0.6rem, 0.2rem + 1.4vw, 1.6rem);
	font-family: var(--schrift-hand);
	font-size: clamp(4rem, 2rem + 7vw, 7rem);
	line-height: 1;
	color: var(--rosa);
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 18. Regionalkarte auf „Möglichst regional“.
 * ------------------------------------------------------------------ */

/* Hochformat (760 × 1352): in voller Lesebreite wäre sie über 1200 px
   hoch und würde die Seite erschlagen. Deshalb steht sie in einer
   schmalen Spalte neben dem Text und zusätzlich nach oben begrenzt. */
.fy-regionalkarte img {
	width: 100%;
	height: auto;
	max-height: 620px;
	object-fit: contain;
	object-position: center;
	display: block;
}