/* ==========================================================================
   FrameYourself — Grundgestaltung
   --------------------------------------------------------------------------
   Ersetzt die rund 60 kB CSS, die WordPress je Seite in den Kopf geschrieben
   hat. Alle Zahlen hier sind an der WordPress-Fassung GEMESSEN (Playwright,
   gerechnete Werte bei 1280 und 390 px), nicht aus theme.json nachgerechnet:
   die Schriftgrößen waren dort fließend, 1.75rem kam als 30 px heraus.

   Aufbau
     1  Tokens           Farben, Abstände, Schriften, Breiten
     2  Grundgerüst      Zurücksetzen, Grundschrift, Verweise
     3  Überschriften
     4  Bänder           die waagerechten Abschnitte
     5  Reihen & Spalten
     6  Takt             der Abstand zwischen Geschwistern
     7  Bausteine        Knöpfe, Bilder, Linien, Tabellen, Listen, Karten
     8  Textstile
     9  Kopf             Logo, Menü, Telefon, Knopf
    10  Fuß
    11  Kleine Breiten

   Die Markenelemente (Sprechblase, Trenner, Slider, Zitat, Fokusring …)
   stehen weiter in marke.css. Diese Datei bringt nur das Gerüst.
   ========================================================================== */

/* ------------------------------------------------------- 0 Schriften */

/* Lokal ausgeliefert — es geht nichts an Google. Die beiden Dateien je
   Schrift trennen das lateinische Grundalphabet vom erweiterten; wer nur
   deutsche Umlaute liest, lädt die zweite nie.

   Diese vier Regeln standen in WordPress in einem der 23 erzeugten
   <style>-Blöcke. Beim ersten Umbau sind sie mit weggefallen — und das
   fiel nur auf, weil ein Knopf 10 px breiter war als vorher: ohne sie
   fällt „Quicksand“ still auf die Systemschrift zurück, mit demselben
   Namen in jeder Messung. */

@font-face {
	font-family: Quicksand;
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/stil/fonts/quicksand-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Quicksand;
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/stil/fonts/quicksand-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Chilanka;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/stil/fonts/chilanka-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Chilanka;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/stil/fonts/chilanka-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- 1 Tokens */

:root {
	/* Farben. Die Namen sind die, die im Haus benutzt werden. */
	--creme:      #FBF6F0;
	--weiss:      #FFFFFF;
	--tinte:      #1F1C1A;
	--gedaempft:  #5A534E;
	--blass:      #8A8078;
	--rosa:       #DE8787;
	--salbei:     #B1C5A4;
	--sand:       #C2A990;
	--rose:       #A14A4A;
	--linie:      #EDE2D6;

	/* Abstandsskala. Die Nummern bleiben, weil der Inhalt sie benennt. */
	--raum-20: 0.75rem;
	--raum-30: 1.25rem;
	--raum-40: 1.75rem;
	--raum-50: 2.5rem;
	--raum-60: 3.5rem;
	--raum-70: 5rem;
	--raum-80: 6.5rem;

	/* Schrift. Die clamp()-Ausdrücke sind die gemessenen Originalwerte —
	   die Größen wachsen mit der Fensterbreite. */
	--schrift:      Quicksand, system-ui, -apple-system, sans-serif;
	--schrift-hand: Chilanka, Quicksand, cursive;

	--klein:       clamp(0.9rem,    0.9rem    + ((1vw - 0.2rem) * 0.093), 0.95rem);
	--normal:      clamp(1rem,      1rem      + ((1vw - 0.2rem) * 0.117), 1.0625rem);
	--gross:       clamp(1.0625rem, 1.063rem  + ((1vw - 0.2rem) * 0.348), 1.25rem);
	--riesig:      clamp(1.375rem,  1.375rem  + ((1vw - 0.2rem) * 0.93),  1.875rem);
	--titel:       clamp(2rem,      2rem      + ((1vw - 0.2rem) * 1.395), 2.75rem);
	--schlagzeile: clamp(2.5rem,    2.5rem    + ((1vw - 0.2rem) * 2.558), 3.875rem);

	/* Maße */
	--lesebreite: 720px;   /* Fließtext */
	--breitbreite: 1180px; /* Bilder, Spalten, Kopf und Fuß */
	--rand: var(--raum-40);
	--takt: 1.5rem;        /* Abstand zwischen Geschwistern */
}

/* ----------------------------------------------------------- 2 Grundgerüst */

/* **Kein globales `border-box`.** Das wäre die übliche Zeile, hier aber
   falsch: marke.css ist gegen das Standard-Modell geschrieben. Die
   Hinweisbox der Terminbuchung hat `max-width: 720px` **plus** 41,6 px
   Polster — mit `border-box` wurde daraus eine 720 px breite Box mit
   633 px Text, und der Satz brach drei Zeilen früher um. Deshalb
   `border-box` nur dort, wo es gebraucht wird. */
.band, .karte, .gruppe, .gruppe--fluss, .spalte, .spalte--fest,
.knopf, .kopf, .fuss {
	box-sizing: border-box;
}

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--creme);
	color: var(--tinte);
	font-family: var(--schrift);
	font-size: var(--normal);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }

/* **Kein `display: block`.** Das sieht nach Aufräumen aus, ändert aber
   die Größenrechnung: ein Bild mit `width: 100 %` in einem
   `inline-block` fällt dann auf seine eigene Größe zurück. Die
   Anfahrtskarte war dadurch 302 statt 1180 px breit. `vertical-align`
   erledigt, wofür `display: block` sonst gebraucht wird. */
img { height: auto; vertical-align: bottom; }

a { color: inherit; text-decoration: underline; }
a:hover { color: var(--rose); }

/* Nur sichtbar, wenn mit der Tastatur angesprungen — der eigentliche
   Fokusring steht in marke.css. */
.sprungmarke {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.sprungmarke:focus {
	position: static;
	width: auto; height: auto;
	clip-path: none;
	padding: 0.6rem 1rem;
	background: var(--tinte);
	color: var(--creme);
}

/* ------------------------------------------------------- 3 Überschriften */

h1, h2, h3, h4 { margin: 0; }

h1 {
	font-family: var(--schrift-hand);
	font-size: var(--schlagzeile);
	font-weight: 400;
	line-height: 1.15;
}

h2 {
	font-family: var(--schrift-hand);
	font-size: var(--titel);
	font-weight: 400;
	line-height: 1.18;
}

h3 {
	font-family: var(--schrift);
	font-size: var(--riesig);
	font-weight: 700;
	line-height: 1.3;
}

h4 {
	font-family: var(--schrift);
	font-size: var(--gross);
	font-weight: 700;
	line-height: 1.4;
}

p { margin: 0; }

/* Nur die Abstände oben und unten zurücksetzen — der seitliche
   Einzug von 40 px ist Browser-Standard und gewollt: das Zitat rückt
   dadurch sichtbar aus dem Text heraus. */
blockquote { margin-block: 0; }

/* ------------------------------------------------------------- 4 Bänder */

/* Ein Band läuft über die ganze Breite und hält den Inhalt in der Mitte.
   Die Abstände oben und unten kommen aus dem Inhalt (--oben/--unten). */
.band {
	padding-inline: var(--rand);
	padding-block: var(--oben, 0) var(--unten, 0);
}

.band--creme  { background: var(--creme); }
.band--weiss  { background: var(--weiss); }
.band--rosa   { background: var(--rosa); }
.band--salbei { background: var(--salbei); }
.band--sand   { background: var(--sand); }
.band--tinte  { background: var(--tinte); color: var(--creme); }

/* Im dunklen Band bleiben Verweise lesbar. */
.band--tinte a { color: var(--creme); }
.band--tinte a:hover { color: var(--rosa); }

/* Jedes Kind eines Bandes bekommt seine eigene Höchstbreite: Fließtext
   720 px, ein Bildband oder eine Spaltenreihe 1180 px, `voll` die ganze
   Breite. Das ist dasselbe Modell, das WordPress „constrained layout“
   nannte — und es muss je Kind gelten, nicht fürs ganze Band. */
.band > * {
	max-width: var(--lesebreite);
	margin-inline: auto;
}
.band > .breit { max-width: var(--breitbreite); }
.band > .voll  { max-width: none; }

/* Eine breite Gruppe spannt 1180 px auf, hält ihren eigenen Fließtext aber
   wieder auf Lesebreite — sonst liefe die Überschrift über die ganze
   Breite. Spalten sind davon ausgenommen, die sind ohnehin schmaler. */
.gruppe > * {
	max-width: var(--lesebreite);
	margin-inline: auto;
}
.gruppe > .breit { max-width: var(--breitbreite); }

/* Eine Gruppe im freien Fluss reicht ihre Breite an die Kinder durch —
   der Terminkalender soll die vollen 1180 px nutzen, nicht 720. */
.gruppe--fluss > * + * { margin-top: var(--takt); }

.lese  { max-width: var(--lesebreite);  margin-inline: auto; }
.breit { max-width: var(--breitbreite); margin-inline: auto; }

/* ------------------------------------------------- 5 Reihen und Spalten */

.reihe {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--zeile, var(--takt)) var(--spalt, var(--raum-40));
	/* `normal` statt `flex-start`: die Spalten einer Reihe sind gleich
	   hoch, auch wenn eine weniger Inhalt hat. Mit `flex-start` schrumpfte
	   die Karte in den Öffnungszeiten auf ihren Textinhalt. */
	align-items: normal;
}

.reihe--mittig { align-items: center; }

/* Ohne eigene Breite teilen die Spalten den Platz gleichmäßig. */
.spalte { flex: 1 1 0; min-width: 0; }

/* Mit eigener Breite wächst sie nicht über sie hinaus. Die Breite kommt
   vom Inhalt und steht am Element; der Ersatzwert `auto` fängt den Fall
   ab, dass sie fehlt — ohne ihn wäre die Spalte dann 0 breit. */
.spalte--fest { flex: 0 1 var(--breite, auto); min-width: 0; }

/* -------------------------------------------------------------- 6 Takt */

/* Geschwister in einem Textfluss stehen einen Takt auseinander. Das ist
   dasselbe, was WordPress „blockGap“ nannte — gemessen 24 px. */
main > * + *,
.fuss__innen > * + *,
.band > * + *,
.spalte > * + *,
.spalte--fest > * + *,
.karte > * + *,
.gruppe > * + * {
	margin-top: var(--takt);
}

/* `.lese` und `.breit` sind reine Breitenangaben und dürfen keinen Takt
   auslösen. Sie stehen auch auf Reihen — und dort bekam dadurch die
   zweite Spalte 24 px Abstand nach oben, die Reihe wurde 24 px höher als
   in der alten Fassung. Auf jeder Seite mit zwei Spalten. */

/* Erstes und letztes Kind halten keinen Abstand nach außen — dafür ist
   das Polster des Behälters da. Das `:root :where(…)` ist kein Zierrat:
   es hebt die Spezifität gerade so weit, dass die Regel eine eigene
   Angabe wie `.fy-trenner { margin-block: 3.5rem }` übersteuert, ohne
   `!important` zu brauchen. Ohne sie war jedes Band mit einem Trenner am
   Ende 56 px zu hoch. */
:root :where(main, .band, .spalte, .spalte--fest, .karte, .gruppe,
             .gruppe--fluss, .fuss__innen) > :first-child {
	margin-block-start: 0;
}
:root :where(main, .band, .spalte, .spalte--fest, .karte, .gruppe,
             .gruppe--fluss, .fuss__innen) > :last-child {
	margin-block-end: 0;
}

/* Ein Behälter kann einen eigenen Takt vorgeben. Als Klasse, nicht als
   Variable — warum, steht in bauen.py bei `taktklasse`. */
.takt-0  > * + * { margin-top: 0; }
.takt-20 > * + * { margin-top: var(--raum-20); }
.takt-30 > * + * { margin-top: var(--raum-30); }

/* --------------------------------------------------------- 7 Bausteine */

.knoepfe {
	display: flex;
	flex-wrap: wrap;
	/* Mittig, nicht gestreckt: der Umrissknopf ist absichtlich flacher als
	   der volle. Ohne diese Zeile zog er sich auf dessen Höhe. */
	align-items: center;
	/* 0,7 rem, nicht ein ganzer Takt: zwei Knöpfe nebeneinander gehören
	   als Paar gelesen. Mit 24 px standen sie zu weit auseinander, und
	   auf dem Telefon, wo sie umbrechen, wurde die Zeile 13 px höher. */
	gap: 0.7rem;
}
.knoepfe--mittig { justify-content: center; }

.knopf {
	display: inline-block;
	padding: 0.9rem 1.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--tinte);
	color: var(--creme);
	font-family: var(--schrift);
	font-size: var(--normal);
	font-weight: 600;
	line-height: 1.65;
	text-decoration: none;
	cursor: pointer;
}
.knopf:hover { background: var(--rose); color: var(--creme); }

/* Die zweite Stufe: nur Umriss, und bewusst kleiner als der volle Knopf —
   sie steht meist neben ihm und soll ihm nicht den Rang ablaufen. Die
   Maße (1 px Rand, 0,6/1 rem Polster) sind aus der bisherigen Fassung
   übernommen; ein 2-px-Rand mit vollem Polster machte den Knopf 10 px
   höher und ließ das Paar ungleich wirken. */
.knopf--linie {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
	padding: calc(0.6rem - 1px) calc(1rem - 1px);
}
.knopf--linie:hover { background: var(--tinte); color: var(--creme); }

figure { margin: 0; }

/* `border-box` auch hier: ein Bild mit Rahmen (die Anfahrtskarte hat
   einen) wäre sonst zwei Pixel breiter als seine Spur. */
figure img { border-radius: 20px; box-sizing: border-box; }

/* Ein verlinktes Bild steht in einem `inline-block`. Das hinterlässt
   unter ihm acht Pixel Luft — den Platz unter der Schriftlinie. Das ist
   kein Versehen aus der alten Fassung, sondern dort genauso, und es
   zeigt sich nur als weißer Streifen auf weißem Grund. Bewusst
   übernommen, damit der Vergleich gegen die alte Fassung scharf bleibt;
   `display: block` würde die acht Pixel entfernen. */
.figur a { display: inline-block; }

/* Ein breit gesetztes Bild füllt seine Spur aus. Ohne diese zwei Zeilen
   fällt es auf seine eigene Größe zurück — bei der Anfahrtskarte (einer
   SVG ohne width/height, also 216 px „natürlich“ breit) waren das statt
   1180 nur 302 px. */
.figur.breit > a, .figur.voll > a { width: 100%; }
.figur.breit img, .figur.voll img { width: 100%; height: auto; }

figcaption {
	margin-top: 0.6rem;
	/* Ein Em Luft nach unten. Der Abstand fällt aus der Figur heraus und
	   setzt sich an die Spalte an — deshalb waren die Illustrationsreihen
	   ohne ihn 15 px flacher als vorher. */
	margin-bottom: 1em;
	font-size: var(--klein);
	color: var(--gedaempft);
}

hr.trennlinie {
	height: 0;
	margin: var(--takt) 0 0;
	border: 0;
	border-top: 1px solid var(--linie);
}

table { border-collapse: collapse; width: 100%; }

/* Ein Zitat: Handschrift, groß, auf hellem Grund. Die Maße standen in
   theme.json unter `core/quote` — ohne eigene Regel wäre der Block auf
   Fließtextgröße zusammengefallen (162 px hoch gegen 56). */
/* Ohne Element im Selektor: `blockquote.zitat` wäre spezifischer als
   die Taktregel des Behälters, und das Zitat bekäme keinen Abstand nach
   oben. */
.zitat {
	/* 2,5 rem Luft nach unten, gemessen an der alten Fassung. Beim
	   nächsten Geschwister fällt der Takt (1,5 rem) damit zusammen —
	   übrig bleibt der größere Wert. */
	margin-bottom: var(--raum-50);
	padding: 1.4rem 1.6rem;
	border-radius: 18px;
	background: var(--creme);
	/* Die Handschrift steht in --riesig, und ein deutsches Kompositum
	   („Wegwerfgesellschaft") passt damit auf dem Telefon nicht in die
	   203 px Innenbreite: gemessen 2026-10-16 lief der Text 1 px aus der
	   Karte. Die Überschriften haben dieselben zwei Zeilen schon (Z. 675);
	   `schmal.py` sieht so einen Überlauf nicht, der prüft nur den
	   Seitenrand, nicht den Kastenrand. */
	overflow-wrap: break-word;
	hyphens: auto;
	font-family: var(--schrift-hand);
	font-size: var(--riesig);
	font-style: normal;
	/* 1,3 statt der 1,65 des Fließtextes — gemessen an der alten Fassung.
	   Große Schrift braucht weniger Durchschuss; mit 1,65 wurde das Zitat
	   32 px höher. */
	line-height: 1.3;
}

ul.liste { margin: 0; padding-left: 1.2rem; }
ul.liste li + li { margin-top: 0.4rem; }

/* Eine Karte: heller Grund, gerundet. Rundung, Polster und Rand kommen
   aus dem Inhalt — sie sind je Karte verschieden, und eine Vorgabe zu
   raten hat beim ersten Versuch jede Karte verformt. */
.karte { border-radius: 22px; }
.karte--creme { background: var(--creme); }
.karte--weiss { background: var(--weiss); }
.karte--salbei { background: var(--salbei); }
.karte--rosa { background: var(--rosa); }

/* ------------------------------------------------------- 8 Textstile */

.gedaempft { color: var(--gedaempft); }
.blass     { color: var(--blass); }
.rose      { color: var(--rose); }
.rosa      { color: var(--rosa); }
.tinte     { color: var(--tinte); }
.hell      { color: var(--creme); }

.t-klein       { font-size: var(--klein); }
.t-gross       { font-size: var(--gross); }
.t-riesig      { font-size: var(--riesig); }
.t-titel       { font-size: var(--titel); }
.t-schlagzeile { font-size: var(--schlagzeile); }

.versalien   { text-transform: uppercase; }
.fett        { font-weight: 700; }
.handschrift { font-family: var(--schrift-hand); }
.mittig        { text-align: center; }
.rechts        { text-align: right; }
.linksbuendig  { text-align: left; }

/* Zwischen Kopf, Inhalt und Fuß steht ein Takt. Das ist kein Zufall der
   alten Fassung, sondern sichtbar: ein schmaler cremefarbener Streifen
   trennt den dunklen Fuß vom letzten Band. */
main, footer { margin-top: var(--takt); }

/* ----------------------------------------------------------- 9 Kopf */

.kopf {
	background: var(--weiss);
	border-bottom: 1px solid var(--linie);
	padding-inline: var(--rand);
	padding-block: var(--raum-30);
}

.kopf__innen {
	max-width: var(--breitbreite);
	margin-inline: auto;
	display: flex;
	/* Umbrechen, sobald es eng wird: auf dem Telefon rutschen Telefon und
	   Knopf in eine zweite Zeile. Ohne diese Zeile quetschte sich alles in
	   eine — die Kopfzeile war 70 px flacher als vorher. */
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--raum-40);
}

.kopf__logo img { width: 92px; height: auto; }

.menue ul {
	display: flex;
	gap: var(--raum-40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.menue a {
	text-decoration: none;
	font-weight: 500;
	padding-block: 0.5rem;
	display: inline-block;
}
.menue a:hover { text-decoration: underline; }

.kopf__rechts {
	display: flex;
	align-items: center;
	gap: var(--raum-30);
	flex-wrap: nowrap;
}
.kopf__telefon { font-weight: 600; white-space: nowrap; }

/* Der Knopf im Kopf ist flacher als die Knöpfe im Inhalt. */
.kopf .knopf { padding: 0.7rem 1.5rem; }

/* Der Schalter für das Menü auf kleinen Breiten. */
.menue__schalter,
.menue__zu {
	display: none;
	background: none;
	border: 0;
	padding: 0.6rem;
	cursor: pointer;
	color: inherit;
	line-height: 0;
}

/* ------------------------------------------------------------ 10 Fuß */

.fuss {
	background: var(--tinte);
	color: var(--creme);
	padding-inline: var(--rand);
	padding-block: var(--raum-60) var(--raum-50);
}
.fuss__innen { max-width: var(--breitbreite); margin-inline: auto; }
.fuss a { color: var(--creme); }
.fuss a:hover { color: var(--rosa); }

.fuss .reihe { --spalt: var(--raum-60); --zeile: var(--raum-50); }

.fuss__marke {
	font-family: var(--schrift-hand);
	font-size: var(--riesig);
	margin-bottom: var(--raum-20);
}
.fuss__anschrift { color: #C8BCB0; }

/* Im Fuß sind die Spaltentitel h2, nicht h3: auf Impressum und
   Datenschutzerklärung steht im Inhalt nur die h1, und ein h3 direkt
   darunter wäre ein Sprung in der Gliederung. Aussehen unverändert. */
.fuss h2 {
	font-family: var(--schrift);
	font-size: var(--normal);
	font-weight: 700;
	line-height: 1.3;
	color: var(--creme);
	margin-bottom: var(--raum-20);
}
.fuss__links { line-height: 1.9; }

/* Die Verweise im Fuß stehen untereinander und sind damit eine Liste,
   kein Fließtext. Als reine Inline-Elemente waren sie nur 20 px hoch —
   zu wenig, um sie auf dem Telefon sicher zu treffen (Mindestmaß 24 px).
   `inline-block` mit derselben Zeilenhöhe macht die Fläche so hoch wie
   die Zeile, ohne dass sich am Abstand etwas ändert. */
.fuss__links a,
.kopf__telefon a {
	display: inline-block;
	line-height: 1.9;
}

/* Telefonnummer und E-Mail sind überall Ziele zum Antippen, nie beiläufige
   Wörter im Satz. Als reine Inline-Elemente waren sie 20 px hoch; so füllt
   die Fläche die Zeile aus. Sie sind kurz genug, um nie umzubrechen. */
a[href^="tel:"],
a[href^="mailto:"],
/* Der Verweis auf die Datenschutzerklärung des Kalenderanbieters steht
   allein in seiner Zeile und ist damit auch ein Ziel, kein Wort im Satz. */
.fy-termin__rechtliches a {
	display: inline-block;
	min-height: 24px;
}

.fuss hr {
	height: 0;
	border: 0;
	border-top: 1px solid #4A433E;
	margin: var(--raum-50) 0 var(--raum-40);
}
.fuss__zeile { font-size: var(--klein); color: #A1968C; }

/* -------------------------------------------------- 11 Kleine Breiten */

/* Unter 782 px stapeln die Spalten — dieselbe Grenze, die WordPress
   benutzt hat, damit sich am Umbruchverhalten nichts ändert. */
@media (max-width: 781px) {
	.reihe { flex-wrap: wrap; }
	.spalte, .spalte--fest { flex-basis: 100%; }
}

@media (max-width: 599px) {
	.kopf__logo img { width: 68px; }
}

/* Das Menü wird unter 900 px zur Schublade: darüber ist in einer Zeile
   mit Logo, Telefon und Knopf kein Platz mehr für fünf Punkte. */
@media (max-width: 900px) {
	.menue__schalter { display: inline-block; }

	.menue__liste {
		position: fixed;
		inset: 0;
		z-index: 50;
		background: var(--weiss);
		padding: var(--raum-70) var(--rand) var(--raum-40);
		overflow-y: auto;
		display: none;
	}
	.menue--offen .menue__liste { display: block; }
	.menue--offen .menue__zu {
		display: block;
		position: fixed;
		top: 1rem; right: 1rem;
		z-index: 51;
	}
	.menue__liste ul {
		flex-direction: column;
		gap: var(--raum-30);
	}
	.menue__liste a { font-size: var(--riesig); }
	body.menue-offen { overflow: hidden; }
}

/* ------------------------------------------- 12 Übernommen aus dem Theme

   Diese Regeln standen bisher in der style.css des WordPress-Themes. Sie
   sind eigene Arbeit, keine WordPress-Erzeugnisse — nur die Selektoren
   heißen jetzt anders. Jede hat einen Grund, der danebensteht.
   -------------------------------------------------------------------- */

/* Karten in den Rastern heben sich beim Überfahren leicht an. */
.fy-karte { transition: transform .15s ease; }
.fy-karte:hover { transform: translateY(-3px); }

/* Bilder in Karten schließen oben bündig ab, auch wenn der Block seine
   eigene Rundung mitbringt. */
.fy-karte > .figur img { display: block; width: 100%; object-fit: cover; }

/* Kartentitel sind Verweise, sollen aber nicht wie welche aussehen — die
   ganze Karte ist das Ziel, die Unterstreichung stört das Raster. */
.fy-karte h3 a { text-decoration: none; }
.fy-karte h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Die Öffnungszeiten-Tabelle: zwei Spalten, ohne Rahmenwerk. */
.fy-zeiten table { border-collapse: collapse; width: 100%; }
.fy-zeiten td { border: 0; padding: 6px 0; vertical-align: top; }
.fy-zeiten td:first-child {
	font-weight: 600;
	white-space: nowrap;
	padding-right: 24px;
	width: 1%;
}

/* Sprungziele landen sonst unter der Kopfzeile. */
:target { scroll-margin-top: 96px;

}

/* Lange Einzelwörter in Überschriften: „Datenschutzerklärung“ ist in
   Chilanka bei voller Größe 416 px breit und sprengte auf dem Telefon den
   Textbereich (319 px) — die ganze Seite wurde quer scrollbar. Die Seite
   ist als lang="de" ausgezeichnet, der Browser trennt also nach deutschen
   Regeln. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }

/* Mindestens 44 px: das übliche Maß, um etwas mit dem Daumen sicher zu
   treffen. Gilt für den Menüschalter und die Menüpunkte. */
.menue__schalter, .menue__zu {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}
.menue a { min-height: 44px; display: inline-flex; align-items: center; }

/* Nur in der ausgeklappten Schublade: dort sind die Punkte untereinander
   und brauchen jeder eine eigene Fläche. In der Kopfzeile gilt das nicht —
   dort machte das zusätzliche Polster die Zeile zwei Pixel höher. */
.menue--offen .menue__liste a { display: block; padding-block: 9px; }

/* Hintergrund und Polster für einzelne Textstellen — die rosa Auszeichnung
   über der Hauptüberschrift. Sie umschließt ihren Text, statt die Spalte
   zu füllen. */
.grund-rosa   { background: var(--rosa); }
.grund-salbei { background: var(--salbei); }
.grund-sand   { background: var(--sand); }
.grund-creme  { background: var(--creme); }
.grund-weiss  { background: var(--weiss); }
p[class*="grund-"] { width: fit-content; max-width: 100%; }

/* ------------------------------------------- 13 Die kleine Anne

   Sie steht an der Sprechseite der Blase, also dort, wo der Zipfel
   hinzeigt. Absolut gesetzt: so ändert sie die Höhe der Spalte nicht und
   schiebt nichts weg. Gezeichnet von `chibi.py`.
   -------------------------------------------------------------------- */

/* Die Maße sind gemessen, nicht geschätzt: bei 1280 px endet der Text in
   der Blase 30 px über ihrem unteren Rand, und bis zum Ende des Bandes
   sind es von dort 109 px. 110 px Breite ergeben 150 px Höhe; mit
   `bottom: -130px` beginnt sie unter der letzten Textzeile und endet
   gerade noch im Band. */
.fy-chibi {
	position: absolute;
	left: -26px;
	bottom: -130px;
	width: 110px;
	margin: 0;
	pointer-events: none;
}

/* Die allgemeine Bildrundung gilt hier nicht — die Figur hat keinen
   Hintergrund, der gerundet werden könnte. */
.fy-chibi img { border-radius: 0; width: 100%; }

@media (max-width: 781px) {
	/* Am 2026-10-16 ragte die Figur auf Michis Telefon ins nächste Band und
	   überdeckte die Überschrift „Kurze Wege". Lokal war es bei KEINER Breite
	   und KEINER Schriftgröße nachstellbar — der Grund stand trotzdem in den
	   Zahlen: zwischen Blasenunterkante und Bandende lagen 108 px, die Figur
	   hing 100 px hinunter. **10 px Spielraum.** Jede Abweichung im Umbruch,
	   in der Emoji-Höhe oder durch Androids Textvergrößerung kippt das.

	   Der Überhang bleibt bei -100 px — er ist richtig, die Figur soll unter
	   der Blase hervorschauen. Falsch war, dass das Band nicht dafür
	   ausgelegt war. Es bekommt deshalb ausdrücklich Fuß; damit hängt es
	   nicht mehr vom Textumbruch ab, ob die Figur ins nächste Band ragt.

	   `:has()` beherrscht jeder Browser seit 2022. Wo nicht, bleibt es beim
	   alten Verhalten — kein Rückschritt, nur keine Verbesserung. */
	.fy-chibi { width: 90px; bottom: -100px; left: -10px; }
}

/* Der Bandfuß gilt für ALLE Breiten, nicht nur fürs Telefon. Am 2026-10-16
   stand diese Regel zunächst im Media-Query darüber — am Schreibtisch blieb
   es deshalb kaputt, und dort ist es sogar schlimmer: die Figur ist 150 statt
   123 px hoch und hängt 130 statt 100 px hinunter.

   Gemessen OHNE diese Regel, Luft zwischen Figurunterkante und Bandende:

       390 px   +66     781 px   +66     782 px   +95
       900 px   -16    1024 px   -19    1280 px   -19
      1440 px   -19    1920 px   -19    2000 px   -19

   Ab 900 px ragte sie also heraus, und zwar schon vor jeder meiner
   Änderungen — meine erste Messung zeigte es, und ich habe es übergangen,
   weil es am Schreibtisch unauffällig aussah. 7rem reicht für beide Fälle:
   Telefon +66, Schreibtisch +35. */
.band:has(.fy-chibi) { padding-bottom: 7rem; }


/* ─── 14. Herstellerkarten: Adresszeile ────────────────────────────────
   Annes Wunsch vom 2026-10-13, die Hersteller zu ihren Seiten zu
   verlinken. Das Logo ist klickbar, darunter steht die Adresse sichtbar —
   ein klickbares Logo allein erkennt niemand ohne Maus.

   Das `min-height` ist nicht Zierde: in `--klein` ist die Zeile nur 18 px
   hoch, WCAG 2.2 (2.5.8) verlangt 24 px Tippfläche. `arbeit/pruefung/rest.py`
   hat die 18 px gemeldet, nachdem die Links eingebaut waren. */
.fy-marke-adresse a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}