/*
Theme Name: Taxi Arfaoui
Theme URI: https://luarmedia.de/
Description: Website des Taxibetriebs Arfaoui in Tübingen. Eigenständiges klassisches Theme ohne Framework, ohne Buildschritt, ohne Bibliothek. Mobile first, dunkle Grundfläche, scrollgetriebene Bewegung in nativem CSS, Bilder als AVIF mit WebP- und JPEG-Rückfall. Ersetzt einen Aufbau aus Slider Revolution und Everest Forms, der 1,4 MB brauchte, um eine Telefonnummer anzuzeigen. Betreut von LuarMedia.
Author: LuarMedia
Author URI: https://luarmedia.de/
Version: 3.8.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taxi-arfaoui
*/

/* =====================================================================
   TAXI ARFAOUI
   Fassung 2.1.0 — "TÜBINGEN FÄHRT BESSER."

   Fassung 1 war ein Baukasten: weisse Flaeche, brave Kleinschreibung,
   saubere Raster, null Bewegung. Technisch in Ordnung, gestalterisch
   austauschbar. Verworfen.

   Diese Fassung folgt der Hausschrift von LuarMedia, nachgemessen an
   luarmedia.de: Grundflaeche #0A0A0A, Archivo, Haarlinien bei 13 %
   Deckkraft, --ease cubic-bezier(.16,1,.3,1), Zeiten .28 / .55 / 1.05 s
   und ein Dauerdrift von 9 s. Der Schlusspunkt jeder Leitzeile ist kein
   Punkt, sondern ein gefuelltes Quadrat in der Akzentfarbe.

   Die Akzentfarbe ist hier nicht das LuarMedia-Orange, sondern das
   Taxigelb der Logokachel: #FFCF01.

   MOBILE FIRST. Jede Grundregel gilt fuer das Telefon. Die
   @media-Abfragen fuegen nur hinzu, was auf grossen Flaechen moeglich
   wird — nie umgekehrt. Fahrgaeste stehen am Bordstein, nicht am
   Schreibtisch.

   BEWEGUNG, die Regeln:
     1. Nur transform, opacity, filter. Nie eine Layouteigenschaft.
     2. Scrollgetrieben nativ ueber animation-timeline: view().
        Keine Bibliothek, kein Scroll-Listener, 0 KB. GSAP waere rund
        50 KB fuer etwas, das der Compositor besser kann.
     3. Ohne Unterstuetzung: ein IntersectionObserver setzt .ist-da.
        Ohne JavaScript: alles sofort sichtbar. Kein Inhalt haengt an
        einer Animation.
     4. prefers-reduced-motion schaltet alles ab, Endzustand sofort.
   ===================================================================== */

@font-face {
	font-family: 'Archivo';
	src: url('assets/fonts/archivo-latin-var.woff2') format('woff2-variations'),
	     url('assets/fonts/archivo-latin-var.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	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;
}

/* ---------------------------------------------------------------------
   TOKEN
   --------------------------------------------------------------------- */
:root {
	/* Flaechen. Gestuft, damit etwas auf etwas liegen kann. */
	--bg:          #0A0A0A;
	--surface:     #141414;
	--surface-2:   #1B1B1B;
	--schwarz:     #000000;

	/* Schrift. Kein reines Weiss — das flimmert auf Schwarz. */
	--ink:         #F1F1F1;
	--ink-dim:     rgba(241,241,241,.62);
	/* 0,52 statt 0,38: gemessen ergab 0,38 nur 3,25:1 auf --bg und damit
	   weniger als die 4,5:1, die WCAG AA fuer Fliesstext verlangt. Dieser
	   Ton traegt Brotkrumen, Bildunterschriften und Formularhinweise —
	   und ein Teil der Fahrgaeste kommt von Krankenfahrten. */
	--ink-faint:   rgba(241,241,241,.52);

	/* Akzent: das Gelb der Logokachel, nachgemessen #FFCF01. */
	--gelb:        #FFCF01;
	--gelb-tief:   #E0B600;
	--gelb-ink:    #140F00;

	--hair:        rgba(241,241,241,.13);
	--hair-2:      rgba(241,241,241,.26);

	--maxw:        1440px;
	--maxw-text:   68ch;
	--gut:         clamp(20px, 4.4vw, 72px);
	/* Von 168 auf 128 Pixel: Gemessen standen zwischen zwei Bloecken 158
	   Pixel, waehrend unter einer Ueberschrift nur 14 Pixel Platz war.
	   Dieses Verhaeltnis liess die Seite auseinanderfallen. */
	--space:       clamp(68px, 8.5vw, 128px);
	--space-eng:   clamp(48px, 7vw, 104px);

	--radius:      4px;
	--radius-pill: 999px;

	--ease:        cubic-bezier(.16, 1, .3, 1);
	--ease-io:     cubic-bezier(.76, 0, .24, 1);
	--t-fast:      .28s;
	--t-normal:    .55s;
	--t-slow:      1.05s;
	--t-drift:     9s;

	--font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   GRUNDGERUEST
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
	background: var(--bg);
	/* clip statt hidden: Der Hero laesst den Wagen absichtlich ueber
	   beide Raender hinauslaufen, das darf keine waagerechte Bildlaufleiste
	   erzeugen. "hidden" waere hier falsch — es erzeugt einen
	   Scrollcontainer und bricht damit position: sticky im Kopfbereich.
	   "clip" schneidet nur ab und laesst sticky in Ruhe. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 400;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1; letter-spacing: -.03em; }

:focus-visible {
	outline: 3px solid var(--gelb);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--gelb); color: #000; }

.sprungmarke {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	padding: .9rem 1.4rem; background: var(--gelb); color: #000;
	font-weight: 700; text-decoration: none;
}
.sprungmarke:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------------
   DAS QUADRAT
   Der Schlusspunkt jeder Leitzeile. Kein Satzzeichen, sondern eine
   gefuellte Flaeche — dieselbe Geste wie das "luarmedia." auf der
   Agenturseite, hier im Taxigelb und quadratisch, weil das Schachbrett
   der Logokachel aus Quadraten besteht.
   --------------------------------------------------------------------- */
/* Zusammen mit dem letzten Wort, nie allein auf einer neuen Zeile.
   Gemessen: Auf der Krankenfahrten-Seite stand das Quadrat als einzelnes
   Zeichen in Zeile vier. */
.zus { white-space: nowrap; }

.pkt {
	display: inline-block;
	width: .34em; height: .34em;
	margin-left: .06em;
	background: var(--gelb);
	vertical-align: baseline;
}
.pkt--dunkel { background: #000; }

/* ---------------------------------------------------------------------
   HUELLE
   --------------------------------------------------------------------- */
.huelle {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}
.huelle--text > * { max-width: var(--maxw-text); }

/* ---------------------------------------------------------------------
   TYPOGRAFIE — DISPLAY
   Versalien, eng gesetzt, gross genug, dass die Zeile den Rahmen fuellt.
   --------------------------------------------------------------------- */
.display {
	text-transform: uppercase;
	font-weight: 800;
	line-height: .86;
	letter-spacing: -.035em;
}

.vorzeile {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 1rem;
}

/* Der Lebendpunkt: zeigt "wir sind wach". Ein Taxibetrieb, der 24/7
   erreichbar ist, darf das auch sichtbar machen. */
.leuchte {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--gelb);
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   KNOEPFE — Pillenform wie auf luarmedia.de
   --------------------------------------------------------------------- */
.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: 1rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: .84rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--t-fast) var(--ease),
	            color var(--t-fast) var(--ease),
	            border-color var(--t-fast) var(--ease),
	            transform var(--t-fast) var(--ease);
}
.knopf--voll { background: var(--gelb); border-color: var(--gelb); color: #000; }
.knopf--voll:hover { background: #FFF; border-color: #FFF; transform: translateY(-2px); }

/* Bewusst nicht vollstaendig durchsichtig: Dieser Knopf liegt im Hero
   ueber dem Fahrzeugbild. Ohne eigene Flaeche schien das gelbe Auto
   hindurch und die Beschriftung war nicht mehr zu lesen. */
.knopf--rand {
	background: rgba(10,10,10,.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-color: var(--hair-2);
	color: var(--ink);
}
.knopf--rand:hover {
	background: rgba(10,10,10,.8);
	border-color: var(--gelb); color: var(--gelb);
	transform: translateY(-2px);
}

.knopf--dunkel { background: #000; border-color: #000; color: var(--gelb); }
.knopf--dunkel:hover { background: #1B1B1B; border-color: #1B1B1B; transform: translateY(-2px); }

.knopf--gross { padding: 1.15rem 2rem; font-size: .92rem; }
/* Auf dem schmalen Telefon passt "Festpreis erfragen · 07071 650182" nicht
   in eine Zeile — gemessen 405 statt 375 Pixel. Statt die Schrift zu
   verkleinern darf die Beschriftung hier umbrechen. Die Nummer bleibt
   zusammen: eine umgebrochene Telefonnummer ist schlimmer als zwei Zeilen. */
@media (max-width: 420px) {
	.knopf--gross { padding: 1rem 1.3rem; white-space: normal; text-align: center; }
	.knopf--gross .nr { white-space: nowrap; }
}

/* Die Nummer im Knopf bleibt lesbar gross und wird nicht gesperrt. */
.knopf .nr { font-size: 1.06em; letter-spacing: -.01em; }

/* ---------------------------------------------------------------------
   KOPF
   Mobile: Marke links, Nummer als Pille rechts, Menue als Vollbild.
   --------------------------------------------------------------------- */
.kopf {
	position: sticky; top: 0; z-index: 100;
	border-bottom: 1px solid var(--hair);
	/* KEIN backdrop-filter hier — er wuerde diesen Kasten zum
	   Bezugsrahmen fuer position:fixed machen und das Vollflaechenmenue
	   auf Kopfhoehe zusammenstauchen. Der Weichzeichner liegt deshalb
	   auf .kopf__glas darunter. */
}
.kopf__glas {
	position: absolute; inset: 0; z-index: 0;
	background: rgba(10,10,10,.82);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	pointer-events: none;
}
.kopf__innen {
	position: relative; z-index: 1;
	max-width: var(--maxw); margin-inline: auto;
	padding: .7rem var(--gut);
	display: flex; align-items: center; gap: .8rem;
}
.kopf__marke {
	position: relative; z-index: 95;
	line-height: 0; flex: 0 1 auto; min-width: 0;
}

/* Das Logo steht so, wie es geliefert wurde — ohne Kasten, ohne
   Hinterlegung. Ein erster Versuch hatte es auf eine weisse Flaeche
   gesetzt, damit die anthrazitfarbene Plakette sich vom Grund abhebt.
   Das sah nach aufgeklebtem Schild aus. Die Marke traegt sich selbst.

   Breiter gesetzt als zuvor: Die gelieferte Fassung ohne Schlagschatten
   hat ein Seitenverhaeltnis von 3,97:1 statt 2,85:1. Bei gleicher Breite
   waere sie deutlich flacher und damit optisch kleiner. */
.kopf__logo {
	width: clamp(146px, 38vw, 210px);
	height: auto;
}

.kopf__ruf { position: relative; z-index: 95; margin-left: auto; min-width: 0; }
.kopf__ruf .knopf { padding: .7rem .95rem; font-size: .72rem; }
@media (max-width: 400px) {
	/* Auf sehr schmalen Geraeten nur noch die Ziffern — der Knopf darf
	   nicht die Marke daneben zerdruecken. */
	.kopf__ruf .knopf { padding: .68rem .8rem; font-size: .7rem; }
	.kopf__logo { width: 112px; }
}
.kopf__ruf-lang { display: none; }

.kopf__schalter {
	position: relative; z-index: 95;
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	cursor: pointer;
}
.kopf__schalter i {
	display: block; width: 17px; height: 1.5px; background: var(--ink);
	position: relative;
	transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.kopf__schalter i::before, .kopf__schalter i::after {
	content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
	transition: transform var(--t-fast) var(--ease);
}
.kopf__schalter i::before { top: -5px; }
.kopf__schalter i::after  { top:  5px; }
.menue-offen .kopf__schalter i { background: transparent; }
.menue-offen .kopf__schalter i::before { transform: translateY(5px) rotate(45deg); }
.menue-offen .kopf__schalter i::after  { transform: translateY(-5px) rotate(-45deg); }

/* Menue als Vollflaeche — auf dem Telefon der einzige Weg, der nicht
   kneift. Ohne JavaScript bleibt es einfach offen und sichtbar. */
.hat-js .kopf__menue {
	/* Unter Marke, Rufnummer und Schalter (z-index 95), aber ueber allem
	   anderen. Sonst verschwaende der Schliessen-Knopf hinter der
	   eigenen Flaeche — genau das war beim ersten Versuch der Fall. */
	position: fixed; inset: 0; z-index: 90;
	display: flex; flex-direction: column; justify-content: center;
	padding: 5.5rem var(--gut) 2rem;
	background: var(--bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0; visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--t-normal) var(--ease),
	            transform var(--t-normal) var(--ease),
	            visibility var(--t-normal);
}
.hat-js .menue-offen .kopf__menue { opacity: 1; visibility: visible; transform: none; }

.menue { display: grid; gap: .2rem; }
.menue a {
	display: block;
	padding: .55rem 0;
	font-size: clamp(1.5rem, 7vw, 2.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.menue a:hover { color: var(--gelb); transform: translateX(6px); }
.menue .ist-aktiv > a, .menue .current-menu-item > a { color: var(--gelb); }

.kopf__menue-fuss {
	margin-top: 2.2rem; padding-top: 1.4rem;
	border-top: 1px solid var(--hair);
	display: grid; gap: .8rem;
}
.kopf__menue-fuss .knopf { width: 100%; }
.kopf__menue-zeile { font-size: .8rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   HERO — das Plakat
   Volle Bildhoehe, Leitzeile unten verankert, Wagen vollflaechig.
   --------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding-top: 5rem;
	overflow: hidden;
	background: var(--bg);
	isolation: isolate;
}

/* Lichtdrift: ein warmer Schein, der sehr langsam wandert. Das ist der
   einzige Dauerloop im Hero. 9 Sekunden, geringe Amplitude, kein
   Zurueckspringen. */
.hero::before {
	content: '';
	position: absolute; z-index: -2;
	top: -30%; left: -20%; width: 110%; height: 110%;
	background: radial-gradient(45% 45% at 50% 50%, rgba(255,207,1,.16), transparent 70%);
	filter: blur(30px);
	animation: lichtDrift var(--t-drift) var(--ease-io) infinite alternate;
}
@keyframes lichtDrift {
	from { transform: translate3d(-4%, -2%, 0) scale(1);    opacity: .75; }
	to   { transform: translate3d( 6%,  3%, 0) scale(1.08); opacity: 1; }
}

/* Der Zeigerfleck folgt der Maus. Auf Touch passiert nichts — ein
   vorgetaeuschter Zeigerzustand ist schlimmer als keiner. */
.hero::after {
	content: '';
	position: absolute; z-index: -1; inset: 0;
	background: radial-gradient(260px 260px at var(--mx, 50%) var(--my, 40%), rgba(255,207,1,.10), transparent 70%);
	opacity: 0;
	transition: opacity var(--t-slow) var(--ease);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.hero:hover::after { opacity: 1; }
}

.hero__bild {
	position: relative;
	width: 100%;
	margin-bottom: -6%;
	pointer-events: none;
}
.hero__bild img {
	width: 126%;
	max-width: none;
	margin-left: -13%;
	filter: drop-shadow(0 30px 60px rgba(0,0,0,.65));
}

.hero__text {
	position: relative;
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--gut) clamp(2.5rem, 7vw, 4.5rem);
}

.hero__titel {
	font-size: clamp(2.9rem, 15.5vw, 12rem);
	text-transform: uppercase;
	line-height: .84;
	letter-spacing: -.045em;
	margin-bottom: 1.2rem;
	/* KEIN overflow-wrap hier. Der erste Versuch hatte break-word
	   gesetzt — auf dem Schreibtisch zerlegte das "TÜBINGEN" in
	   "TÜBI / NGE / N.", weil die Textspalte damals nur die halbe
	   Breite hatte. Die Loesung ist nicht, das Wort zu brechen, sondern
	   der Zeile die volle Breite zu geben (siehe 900px-Abfrage). */
}
.hero__titel .zeile { display: block; }
/* Die zweite Zeile tritt zurueck — sie traegt die Aussage, nicht das
   Schlagwort. Zwei gleich laute Zeilen ergeben keine Ordnung. */
.hero__titel .zeile--leise { color: var(--ink-dim); }

.hero__satz {
	max-width: 34ch;
	font-size: clamp(1rem, 3.6vw, 1.14rem);
	color: var(--ink-dim);
	margin-bottom: 1.6rem;
}
.hero__knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.hero__knoepfe .knopf { width: 100%; }

.hero__marken {
	display: flex; flex-wrap: wrap; gap: .45rem 1rem;
	margin-top: 1.6rem; padding-top: 1.2rem;
	border-top: 1px solid var(--hair);
	font-size: .72rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--ink-faint);
}

/* ---------------------------------------------------------------------
   LAUFBAND
   Ein Taxibetrieb ist Bewegung. Das Band traegt seine Reihe doppelt und
   wandert genau eine Reihenbreite — der Neustart ist deshalb nahtlos.
   --------------------------------------------------------------------- */
.band {
	border-block: 1px solid var(--hair);
	background: var(--surface);
	overflow: hidden;
	padding-block: .85rem;
}
.band__spur {
	display: flex; width: max-content;
	animation: bandLauf 32s linear infinite;
}
.band:hover .band__spur { animation-play-state: paused; }
.band__reihe {
	display: flex; align-items: center; gap: 2.2rem;
	padding-right: 2.2rem;
	font-size: .78rem; font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--ink-dim);
	white-space: nowrap;
}
.band__reihe b { color: var(--gelb); font-weight: 800; }
.band__karo {
	width: 22px; height: 12px; flex: 0 0 auto;
	background-image:
		linear-gradient(45deg, var(--gelb) 25%, transparent 25%, transparent 75%, var(--gelb) 75%),
		linear-gradient(45deg, var(--gelb) 25%, transparent 25%, transparent 75%, var(--gelb) 75%);
	background-size: 6px 6px;
	background-position: 0 0, 3px 3px;
	background-color: #000;
}
@keyframes bandLauf { to { transform: translate3d(-50%, 0, 0); } }

/* ---------------------------------------------------------------------
   ABSCHNITTE
   --------------------------------------------------------------------- */
.abs { padding-block: var(--space); }
.abs--eng { padding-block: var(--space-eng); }
.abs--flaeche { background: var(--surface); }

.abs__titel {
	font-size: clamp(2rem, 9vw, 4.2rem);
	text-transform: uppercase;
	line-height: .88;
	letter-spacing: -.04em;
	/* Gemessen waren es 14 Pixel unter einer 67 Pixel hohen Zeile. Das
	   klebte. Der Abstand richtet sich jetzt nach der Schriftgroesse
	   selbst, damit er auf jeder Bildbreite stimmt. */
	margin-bottom: .42em;
}
.abs__vor {
	/* Groesser und breiter als zuvor. Bei 17,6 Pixeln neben einer
	   67-Pixel-Zeile war der Sprung fast vierfach — es fehlte die
	   mittlere Stufe, und die Spalte war mit 464 von 1313 Pixeln so
	   schmal, dass rechts daneben eine tote Flaeche stand. */
	max-width: 58ch;
	font-size: clamp(1.02rem, 1.6vw, 1.3rem);
	line-height: 1.6;
	color: var(--ink-dim);
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.abs__vor a { color: var(--gelb); text-underline-offset: 3px; }

/* ---------------------------------------------------------------------
   LEISTUNGEN
   Auf dem Telefon eine Liste, kein Kachelraster. Eine Zeile pro Fahrt,
   mit Nummer — schneller zu ueberfliegen als fuenf Kaesten.
   --------------------------------------------------------------------- */
.fahrten { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.fahrt { border-bottom: 1px solid var(--hair); }
.fahrt__a {
	position: relative;
	display: grid;
	/* minmax(0, 1fr) statt 1fr: Eine auto-Spur waechst bis zur
	   min-content-Breite ihres Inhalts. "PERSONENBEFÖRDERUNG" ist ein
	   unteilbares Wort von 19 Zeichen und sprengte damit auf dem Telefon
	   die Zeile um 38 Pixel. */
	grid-template-columns: 2.6rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: .55rem 1rem;
	padding: 1.7rem 0;
	text-decoration: none;
	transition: padding var(--t-normal) var(--ease);
}
/* Die gelbe Flaeche faehrt von links ein. Sie liegt hinter dem Text,
   nicht darueber, und greift in die Randzone hinein. */
.fahrt__a::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 calc(var(--gut) * -1);
	width: calc(100% + var(--gut) * 2);
	background: var(--gelb);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-normal) var(--ease);
	z-index: -1;
}
.fahrt__nr {
	font-size: .74rem; font-weight: 800; letter-spacing: .12em;
	color: var(--gelb);
	transition: color var(--t-fast) var(--ease);
}
.fahrt__name {
	grid-column: 2;
	font-size: clamp(1.05rem, 5.2vw, 2.1rem);
	font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
	text-transform: uppercase;
	/* Notbremse fuer sehr schmale Geraete: Trennung erlaubt, damit ein
	   langes Wort umbricht statt ueberzulaufen. */
	overflow-wrap: break-word;
	hyphens: auto;
}
.fahrt__text {
	grid-column: 2; margin: .5rem 0 0;
	font-size: 1.04rem; line-height: 1.55; color: var(--ink-dim);
	max-width: 62ch;
	transition: color var(--t-fast) var(--ease);
}
.fahrt__pfeil {
	display: none;
	grid-row: 1; grid-column: 3;
	font-size: 1.2rem; color: var(--ink-faint);
	transition: transform var(--t-normal) var(--ease), color var(--t-fast) var(--ease);
}

@media (hover: hover) {
	.fahrt__a:hover::before, .fahrt__a:focus-visible::before { transform: scaleX(1); }
	.fahrt__a:hover, .fahrt__a:focus-visible { color: #000; }
	.fahrt__a:hover .fahrt__nr, .fahrt__a:hover .fahrt__text,
	.fahrt__a:hover .fahrt__pfeil { color: #000; }
	.fahrt__a:hover .fahrt__pfeil { transform: translateX(8px); }
}

/* ---------------------------------------------------------------------
   AUSSAGE — "TÜBINGEN FÄHRT BESSER."
   Die Zeile stammt vom Betrieb selbst, aus einem Beitrag im eigenen
   TikTok-Kanal. Sie wird nicht erfunden, sie wird uebernommen.
   --------------------------------------------------------------------- */
.aussage {
	position: relative;
	padding-block: var(--space);
	background: var(--bg);
	overflow: hidden;
}
.aussage__zeile {
	font-size: clamp(2.6rem, 14vw, 9.5rem);
	text-transform: uppercase;
	font-weight: 800;
	/* Zwei Anlaeufe: erst .84 (zu gedraengt, die Umlaute stiessen an),
	   dann 1.02 (zu lose, die Zeilen zerfielen). .955 haelt sie als
	   Block zusammen und laesst Ü und Ä trotzdem Platz. */
	line-height: .955;
	letter-spacing: -.04em;
	margin: 0;
}
.aussage__zeile .zeile { display: block; }
.aussage__unten {
	display: grid; gap: 1.2rem;
	margin-top: clamp(2rem, 6vw, 3rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--hair);
}
.aussage__satz {
	/* 16 Pixel unter einer 152-Pixel-Zeile war ein Sprung um das
	   Neuneinhalbfache. */
	font-size: clamp(1.05rem, 1.5vw, 1.32rem);
	line-height: 1.6;
	color: var(--ink-dim);
	max-width: 52ch;
	margin: 0;
}
.aussage__nr {
	font-size: clamp(1.6rem, 8vw, 2.6rem);
	font-weight: 800; letter-spacing: -.03em;
	text-decoration: none; color: var(--ink);
	transition: color var(--t-fast) var(--ease);
}
.aussage__nr:hover { color: var(--gelb); }

/* ---------------------------------------------------------------------
   FLOTTE
   --------------------------------------------------------------------- */
.flotte__gitter { display: grid; gap: 1rem; }
.wagen {
	position: relative;
	background: var(--schwarz);
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--t-normal) var(--ease);
}
.wagen:hover { border-color: var(--hair-2); }
.wagen__bild { position: relative; background: #000; }
.wagen__foto { width: 100%; }
.wagen__text { padding: .2rem 1.2rem 1.4rem; }
.wagen__rolle {
	font-size: .68rem; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--gelb); margin-bottom: .35rem;
}
.wagen__marke { font-size: .78rem; color: var(--ink-faint); margin-bottom: .05rem; }
.wagen__modell {
	font-size: 1.25rem; text-transform: uppercase;
	letter-spacing: -.03em; margin-bottom: .3rem;
}
.wagen__baujahr { font-size: .86rem; color: var(--ink-faint); margin-bottom: .75rem; }
.wagen__satz { font-size: .98rem; line-height: 1.55; color: var(--ink-dim); margin: 0; }

/* ---------------------------------------------------------------------
   GEBIET — die gelbe Flaeche
   Der einzige helle Abschnitt. Genau deshalb wirkt er.
   --------------------------------------------------------------------- */
.gebiet { background: var(--gelb); color: #000; padding-block: var(--space); }
.gebiet .abs__titel { color: #000; }
.gebiet__satz { color: rgba(0,0,0,.72); max-width: 38ch; }
.gebiet__orte {
	display: grid; gap: 0;
	margin-top: 2rem;
	border-top: 2px solid rgba(0,0,0,.22);
}
/* Der Verweis fuellt die ganze Zeile. Vorher war nur der Ortsname
   anklickbar — 27 Pixel hoch in einer 50 Pixel hohen Zeile, also ein
   Tippziel, das man auf dem Telefon danebentrifft. */
.gebiet__orte a {
	display: flex; align-items: center; flex: 1 1 auto;
	min-height: 3.1rem; margin-block: -.5rem;
}
.gebiet__orte li {
	display: flex; align-items: center; gap: .6rem;
	min-height: 3.1rem; padding: .5rem 0;
	border-bottom: 2px solid rgba(0,0,0,.22);
	font-weight: 800; font-size: .98rem;
	text-transform: uppercase; letter-spacing: -.01em;
	/* Ortsnamen sind lang und haben keine Trennstelle, an der ein Browser
	   von sich aus umbricht. "Kirchentellinsfurt" lief deshalb bis zu 99
	   Pixel aus seiner Spalte heraus und legte sich ueber "Kusterdingen"
	   — gemessen bei jeder Breite von 900 bis 1920 Pixeln.
	   hyphens trennt nach deutschen Regeln (das Dokument ist als de-DE
	   ausgezeichnet), overflow-wrap ist der Riegel fuer den Fall, dass
	   ein Browser keine Trennmuster mitbringt. */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: anywhere;
}
.gebiet__orte li > * { min-width: 0; }
.gebiet__orte li::before {
	content: ''; width: 14px; height: 2px; background: #000; flex: 0 0 auto;
	transition: width var(--t-fast) var(--ease);
}
.gebiet__orte li:hover::before { width: 26px; }
.gebiet .knopf { margin-top: 1.6rem; }

/* ---------------------------------------------------------------------
   STIMMEN
   --------------------------------------------------------------------- */
/* ====================================================================
   FLUGHAFENSTRECKEN
   ==================================================================== */

/* Eckdaten statt Bild. Entfernung und Fahrzeit sind die beiden Zahlen,
   wegen derer jemand die Seite aufruft -- sie stehen deshalb vor dem
   ersten Absatz und nicht darin. */
.eck {
	display: grid; gap: 1px; margin: 0;
	background: var(--hair);
	border: 1px solid var(--hair); border-radius: var(--radius);
	overflow: hidden;
}
.eck > div { background: var(--schwarz); padding: 1rem 1.2rem 1.1rem; }
.eck dt {
	font-size: .68rem; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .3rem;
}
.eck__klein {
	display: block; font-size: .62rem; letter-spacing: .1em;
	font-weight: 600; opacity: .72; margin-top: .1rem;
}
.eck dd {
	margin: 0; font-size: clamp(1.25rem, 3.2vw, 1.6rem); font-weight: 800;
	letter-spacing: -.03em; line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
/* Wortangaben im Eckdatenstreifen -- "Landkreis Reutlingen" braucht
   mehr Zeilen als "30 km" und darf deshalb kleiner setzen. */
.eck__wort { font-size: clamp(.98rem, 2.3vw, 1.18rem); letter-spacing: -.015em; line-height: 1.2; }
.eck__quelle {
	font-size: .8rem; color: var(--ink-faint); margin: .9rem 0 0; max-width: 60ch;
}

@media (min-width: 560px) { .eck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .eck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ====================================================================
   DER RECHNER
   ==================================================================== */

.rechner {
	background: var(--schwarz); border: 1px solid var(--hair);
	border-radius: var(--radius); overflow: hidden;
	display: grid; gap: 1px; background: var(--hair);
	margin-top: 1.4rem;
}
.rechner__eingabe, .rechner__ergebnis { background: var(--schwarz); padding: 1.4rem; }
.rechner__feld { margin-bottom: 1.4rem; border: 0; padding: 0; }
.rechner__feld:last-child { margin-bottom: 0; }
.rechner__label {
	display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; padding: 0;
}
.rechner__kmzeile { display: flex; align-items: center; gap: 1rem; }
.rechner__km {
	font-size: 1.15rem; font-weight: 800; white-space: nowrap;
	font-variant-numeric: tabular-nums; min-width: 5.5rem; text-align: right;
}

/* Der Regler. Eigene Spur, damit er nicht nach Systemeinstellung aussieht. */
/* Der Regler ist 44 Pixel hoch, nicht 4. Die sichtbare Spur wird
   getrennt gezeichnet — ein 4 Pixel duenner Streifen sieht zwar fein
   aus, ist auf einem Telefon aber kaum zu treffen. Die Flaeche zum
   Greifen ist deshalb so hoch wie jedes andere Tippziel der Seite. */
.rechner__kmzeile input[type="range"] {
	flex: 1 1 auto; -webkit-appearance: none; appearance: none;
	height: 44px; background: transparent; cursor: pointer;
	outline-offset: 2px; margin: 0;
}
.rechner__kmzeile input[type="range"]::-webkit-slider-runnable-track {
	height: 4px; border-radius: 2px; background: var(--hair-2);
}
.rechner__kmzeile input[type="range"]::-moz-range-track {
	height: 4px; border-radius: 2px; background: var(--hair-2);
}
.rechner__kmzeile input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--gelb); border: 0; margin-top: -11px;
}
.rechner__kmzeile input[type="range"]::-moz-range-thumb {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--gelb); border: 0;
}

/* Suchfeld statt Adresseingabe. Kein fremder Server, kein Nachladen,
   keine Einwilligung noetig — und es deckt die Ziele ab, um die es
   tatsaechlich geht. Begruendung im Kopf von template-parts/rechner.php. */
.rechner__suche {
	width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
	background: rgba(255,255,255,.04);
	border: 1px solid var(--hair-2); border-radius: var(--radius);
	padding: .85rem 1rem; min-height: 48px;
	-webkit-appearance: none; appearance: none;
}
.rechner__suche::placeholder { color: var(--ink-faint); }
.rechner__suche:focus-visible { border-color: var(--gelb); }
/* Das Kreuzchen, das Safari und Chrome in ein type="search" setzen, ist
   winzig und traegt die Systemfarbe. Weg damit — geleert wird ueber die
   Tastatur oder indem man ein Ziel antippt. */
.rechner__suche::-webkit-search-cancel-button { -webkit-appearance: none; }

.rechner__hinweis { font-size: .82rem; color: var(--ink-faint); margin: .7rem 0 0; }

/* Die beiden Auswahlfelder und der Tauschknopf dazwischen. */
.rechner__wahlfeld { position: relative; margin-bottom: 1rem; }
.rechner__tausch {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: -.4rem 0 .6rem auto;
	font-size: 1.1rem; line-height: 1;
	background: transparent; color: var(--ink-dim);
	border: 1px solid var(--hair-2); border-radius: 50%;
	cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.rechner__tausch:hover { border-color: var(--gelb); color: var(--gelb); }

/* Die Liste klappt unter dem Feld auf. Ueber der Seite schwebend statt
   im Fluss, damit das Ergebnis darunter nicht bei jedem Tastendruck
   springt — ein huepfendes Ergebnis liest niemand. */
.rechner__liste {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
	margin-top: .35rem; max-height: 15rem; overflow-y: auto;
	background: var(--schwarz);
	border: 1px solid var(--hair-2); border-radius: var(--radius);
	box-shadow: 0 18px 40px rgba(0,0,0,.55);
	-webkit-overflow-scrolling: touch;
}
.rechner__nichts { font-size: .86rem; color: var(--ink-dim); margin: 0; padding: .9rem 1rem; }

.rechner__mehr { margin-top: .4rem; }
.rechner__mehr > summary {
	font-size: .82rem; color: var(--ink-faint); cursor: pointer;
	min-height: 44px; display: flex; align-items: center;
}
.rechner__mehr > summary:hover { color: var(--gelb); }
.rechner__strecke {
	font-size: .84rem; font-weight: 700; color: var(--ink); margin: 0 0 .35rem;
	font-variant-numeric: tabular-nums;
}
.rechner__liste .rechner__gruppe, .rechner__gruppe {
	font-size: .62rem; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ink-faint);
	margin: 0; padding: .7rem 1rem .35rem;
	background: rgba(255,255,255,.03);
	position: sticky; top: 0;
}
.rechner__ziel {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	width: 100%; min-height: 48px; padding: .7rem 1rem;
	font: inherit; text-align: left; cursor: pointer;
	background: transparent; color: var(--ink);
	border: 0; border-top: 1px solid var(--hair);
	border-left: 3px solid transparent;
	transition: background var(--t-fast) var(--ease);
}
.rechner__ziel:hover { background: rgba(255,255,255,.05); }
.rechner__ziel--an { border-left-color: var(--gelb); background: rgba(255,207,1,.07); }
/* Die Tastaturauswahl muss sich von der getroffenen Wahl unterscheiden —
   sonst weiss man beim Pfeiltastenlauf nicht, wo man gerade steht. */
.rechner__ziel--tastatur { background: rgba(255,255,255,.09); outline: 2px solid var(--gelb); outline-offset: -2px; }
.rechner__zielname { font-size: .95rem; font-weight: 600; }
.rechner__zielkm {
	font-size: .78rem; color: var(--ink-faint); white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.rechner__ziel--an .rechner__zielkm { color: var(--gelb); }
.rechner__leer { font-size: .86rem; color: var(--ink-dim); margin: .9rem 0 0; }

.rechner__ruf { margin-top: 1.2rem; align-self: start; }

.rechner__zeit { display: grid; gap: .5rem; }
.rechner__wahl { display: flex; align-items: center; gap: .6rem; cursor: pointer;
	font-size: .95rem; min-height: 44px; }
.rechner__wahl input { accent-color: var(--gelb); width: 18px; height: 18px; }

.rechner__ergebnis { display: flex; flex-direction: column; justify-content: center; }
.rechner__etikett {
	font-size: .68rem; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .2rem;
}
.rechner__preis {
	font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 800;
	letter-spacing: -.045em; line-height: 1; margin: 0 0 .5rem;
	color: var(--gelb); font-variant-numeric: tabular-nums;
}
.rechner__formel { font-size: .84rem; color: var(--ink-dim); margin: 0; line-height: 1.5; }
.rechner__klein {
	font-size: .86rem; color: var(--ink-dim); margin: 1rem 0 0; max-width: 64ch;
}

@media (min-width: 760px) {
	.rechner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
	.rechner__eingabe, .rechner__ergebnis { padding: 1.7rem; }
}

/* ====================================================================
   PREISE
   ==================================================================== */

/* Der Hinweiskasten fuer eine bevorstehende Tarifaenderung. Er ist das
   einzige Element der Seite mit gelber Flaeche -- eine Preisaenderung
   ist die eine Nachricht, die hier niemand uebersehen soll. */
.merk {
	background: var(--gelb); color: #000;
	border-radius: var(--radius);
	padding: clamp(1.3rem, 3.4vw, 2rem);
}
.merk__marke {
	font-family: var(--font); font-size: .7rem; font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase;
	margin: 0 0 .4rem; opacity: .72;
}
.merk__titel {
	font-size: clamp(1.4rem, 3.8vw, 1.9rem); font-weight: 800;
	text-transform: uppercase; letter-spacing: -.025em;
	line-height: 1.05; margin: 0 0 .7rem;
}
.merk p { margin: 0 0 .7rem; max-width: 56ch; }
.merk p:last-child { margin-bottom: 0; }
.merk__klein { font-size: .9rem; opacity: .78; }
.merk__liste { list-style: none; margin: 0 0 .9rem; padding: 0; }
.merk__liste li {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: .2rem 1rem; padding: .42rem 0;
	border-top: 1px solid rgba(0, 0, 0, .18);
	/* Auf schmalen Geraeten passen "Großraumzuschlag" und die beiden
	   Zahlen nicht nebeneinander — bei 320 Pixeln lief die Zeile 67 Pixel
	   aus ihrem Kasten. Sie darf deshalb umbrechen; die Zahlen bleiben
	   dank margin-left rechts stehen, auch wenn sie in die zweite Zeile
	   rutschen. */
	flex-wrap: wrap;
}
.merk__was { flex: 1 1 auto; min-width: 0; }
.merk__liste li:first-child { border-top: 0; }
.merk__was { font-size: .93rem; }
.merk__zahlen { white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto; }
.merk__zahlen s { opacity: .5; margin-right: .35rem; }
.merk__zahlen b { font-weight: 800; }

/* Zwei Tarifspalten: Tag und Nacht. Auf schmalen Geraeten untereinander. */
.tarif__paar { display: grid; gap: 1rem; margin-bottom: 1rem; }
.tarif {
	background: var(--schwarz); border: 1px solid var(--hair);
	border-radius: var(--radius); padding: 1.3rem 1.4rem 1.1rem;
}
.tarif__titel {
	font-size: 1.15rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: -.02em; margin: 0 0 .15rem;
}
.tarif__zeit {
	font-size: .82rem; color: var(--ink-faint);
	margin: 0 0 1rem; line-height: 1.45;
}
.tarif__liste { margin: 0; }
.tarif__liste > div {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 1rem; padding: .52rem 0; border-top: 1px solid var(--hair);
}
.tarif__liste > div:first-child { border-top: 0; padding-top: 0; }
.tarif__liste dt { font-size: .95rem; color: var(--ink-dim); margin: 0; }
.tarif__liste dd {
	margin: 0; font-weight: 700; font-size: 1.02rem;
	white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tarif__liste--breit {
	background: var(--schwarz); border: 1px solid var(--hair);
	border-radius: var(--radius); padding: 1.1rem 1.4rem;
}
.tarif__erklaer {
	display: block; font-size: .78rem; color: var(--ink-faint);
	line-height: 1.45; margin-top: .12rem; max-width: 42ch;
}
.tarif__quelle {
	font-size: .82rem; color: var(--ink-faint); margin: 1.1rem 0 0;
}
.tarif__quelle a { color: var(--ink-dim); }
.tarif__quelle a:hover { color: var(--gelb); }
.tarif__quelle--fuss { margin-block: clamp(2rem, 5vw, 3.4rem); max-width: 62ch; }

@media (min-width: 720px) {
	.tarif__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Die Gesamtnote ueber den Zitaten. Sie ist die Zahl, die zaehlt --
   deshalb steht sie in Plakatgroesse und nicht im Fliesstext. Die Sterne
   sind fuer das Auge da, die Vorlesesoftware bekommt den Satz darunter. */
.note {
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: .1rem .6rem; margin-bottom: .55rem;
}
.note__stern { color: var(--gelb); font-size: 1.05rem; letter-spacing: .08em; }
.note__zahl {
	font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 800;
	letter-spacing: -.04em; line-height: 1;
}
.note__von { font-size: .93rem; color: var(--ink-dim); }

.stimmen__gitter { display: grid; gap: 1rem; }
.stimme {
	background: var(--surface);
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	padding: 1.5rem 1.4rem 1.2rem;
	display: flex; flex-direction: column;
}
.stimme__text { margin: 0 0 1rem; }
.stimme__text p { font-size: .96rem; color: var(--ink); margin: 0; }
.stimme__stern { color: var(--gelb); font-size: .82rem; letter-spacing: .18em; margin-bottom: .7rem; }
.stimme__name {
	margin-top: auto; font-size: .78rem; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---------------------------------------------------------------------
   ANFRAGE
   --------------------------------------------------------------------- */
.anfrage { background: var(--surface); padding-block: var(--space); }
.anfrage__ruf { margin-bottom: 2.6rem; }
.anfrage__gross { color: var(--ink-dim); max-width: 32ch; margin-bottom: 1.4rem; }
.anfrage__klein { margin-top: 1.2rem; font-size: .86rem; color: var(--ink-faint); }
.anfrage__klein a { color: var(--gelb); text-underline-offset: 3px; }

.anfrage__formular {
	background: var(--bg);
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	padding: clamp(1.3rem, 5vw, 2rem);
}
.anfrage__titel { font-size: 1.3rem; text-transform: uppercase; margin-bottom: .4rem; }
.anfrage__hinweis { font-size: .88rem; color: var(--ink-faint); margin-bottom: 1.4rem; }

/* ---------------------------------------------------------------------
   FORMULAR
   --------------------------------------------------------------------- */
.formular__honig {
	position: absolute; left: -9999px;
	width: 1px; height: 1px; overflow: hidden;
}
/* Auch das Feld darin, nicht nur sein Behaelter: Sonst taucht es in jeder
   Pruefung der Tippziele als 22 Pixel hohes Element auf. */
.formular__honig input { width: 1px; height: 1px; padding: 0; border: 0; }
.formular__reihe { display: grid; gap: 0; }

.feld { margin-bottom: .9rem; }
.feld label {
	display: block; margin-bottom: .3rem;
	font-size: .72rem; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.pflicht { color: var(--gelb); }

.feld input, .feld select, .feld textarea {
	width: 100%; padding: .85rem .9rem;
	background: var(--surface-2);
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	font-family: inherit; font-size: 1rem; color: var(--ink);
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.feld select { appearance: none; background-image: none; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
	outline: none; background: #000;
	border-color: var(--gelb);
	box-shadow: 0 0 0 3px rgba(255,207,1,.2);
}
.feld textarea { resize: vertical; min-height: 6rem; }
.feld ::placeholder { color: rgba(241,241,241,.46); }

.formular__datenschutz { font-size: .8rem; color: var(--ink-faint); line-height: 1.5; }
.formular__datenschutz a { color: var(--ink-dim); }
.formular__verordnung {
	background: rgba(255,207,1,.07);
	border-left: 2px solid var(--gelb);
	padding: .8rem 1rem; margin-bottom: 1.2rem;
	font-size: .82rem; color: var(--ink-dim); line-height: 1.5;
}
.formular__verordnung strong { color: var(--ink); }
.formular__senden { margin: 0; }
.formular__senden .knopf { width: 100%; }
.formular__antwort { margin: .9rem 0 0; font-size: .9rem; font-weight: 600; }
.formular__antwort.ist-gut { color: #7BD89B; }
.formular__antwort.ist-schlecht { color: #FF8F7A; }

.meldung { padding: .9rem 1rem; border-radius: var(--radius); font-size: .9rem; margin-bottom: 1.1rem; }
.meldung--gut { background: rgba(123,216,155,.1); border-left: 2px solid #7BD89B; }
.meldung--schlecht { background: rgba(255,143,122,.1); border-left: 2px solid #FF8F7A; }

/* ---------------------------------------------------------------------
   LEISTUNGSSEITEN
   --------------------------------------------------------------------- */
.pfad { border-bottom: 1px solid var(--hair); }
.pfad .huelle {
	padding-block: .7rem;
	font-size: .7rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.pfad a { text-decoration: none; }
.pfad a:hover { color: var(--gelb); }
.pfad span { margin-inline: .4rem; }

.lkopf { position: relative; padding-top: clamp(2.5rem, 8vw, 4.5rem); overflow: hidden; }
.lkopf__titel {
	/* 8.2vw und nicht mehr: Das laengste unteilbare Wort dieser
	   Ueberschriften ist "BESORGUNGSFAHRTEN" mit 17 Zeichen. Bei 11vw
	   lief es auf dem Telefon ueber den Rand — gemessen wurde
	   "KRANKENFAHRTE" mit abgeschnittenem N. Bei 8.2vw passt auch das
	   laengste Wort noch auf ein 320-Pixel-Geraet. */
	font-size: clamp(1.75rem, 8.2vw, 5.6rem);
	text-transform: uppercase; line-height: .88; letter-spacing: -.04em;
	margin-bottom: 1rem;
}
.lkopf__vor {
	font-size: clamp(1rem, 3.6vw, 1.18rem);
	color: var(--ink-dim); max-width: 46ch; margin-bottom: 1.6rem;
}
.lkopf__knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.lkopf__knoepfe .knopf { width: 100%; }
.lkopf__bild {
	margin-top: 2rem;
	border: 1px solid var(--hair); border-radius: var(--radius);
	overflow: hidden; background: #000;
}

/* ---------------------------------------------------------------------
   BANNERFLAECHE

   Erster Versuch: das Banner ueber die volle Breite, Kante an Kante mit
   den Textabschnitten. Ergebnis war eine Platte, die aufgeklebt aussah —
   harte Kanten, kein Bezug zur Seite, und die eigene Schrift des Banners
   wirkte neben der Seitenschrift geschrumpft.

   Jetzt: ein gerahmtes Stueck mit Luft drumherum, weicher Schein
   dahinter, Haarrand und Eintrittsbewegung. Es liegt sichtbar AUF der
   Seite statt in ihr zu stecken — und wird dadurch zum Motiv statt zum
   Fremdkoerper.
   --------------------------------------------------------------------- */
.banner {
	position: relative;
	padding-block: clamp(2rem, 6vw, 4.5rem);
}
.banner__rahmen {
	position: relative;
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}
/* Der Schein liegt hinter dem Bild und nimmt ihm die harte Kante. */
.banner__rahmen::before {
	content: '';
	position: absolute;
	inset: 6% var(--gut) -4%;
	background: radial-gradient(60% 70% at 50% 50%, rgba(255,207,1,.16), transparent 72%);
	filter: blur(46px);
	z-index: 0;
	pointer-events: none;
}
.banner__bild {
	position: relative;
	z-index: 1;
	border: 1px solid var(--hair);
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}
.banner__bild img { width: 100%; height: auto; }

/* Auf schmalen Geraeten waere die Schrift im Banner rund vier Pixel hoch.
   Abschneiden ist nicht erlaubt und waere auch falsch — also bekommt das
   Banner dort eine eigene Bahn zum Wischen: es liegt in mehr als doppelter
   Bildbreite da und laesst sich seitlich ziehen. */
.banner__bahn { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.banner__bahn::-webkit-scrollbar { height: 3px; }
.banner__bahn::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 3px; }
.banner__bahn img { width: 230%; max-width: none; }

.banner__wisch {
	display: flex; align-items: center; gap: .5rem;
	margin: .7rem 0 0;
	font-size: .68rem; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--ink-faint);
}
.banner__wisch::after {
	content: ''; flex: 1 1 auto; height: 1px;
	background: linear-gradient(90deg, var(--hair), transparent);
}

@media (min-width: 900px) {
	.banner__bahn { overflow: visible; }
	.banner__bahn img { width: 100%; }
	.banner__wisch { display: none; }
}

.bildband { padding-block: clamp(1.5rem, 4vw, 3rem); }
.bildband picture {
	display: block;
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	overflow: hidden;
	line-height: 0;
}
.bildband img { width: 100%; height: auto; }

.ltext { padding-block: var(--space-eng); }
.block { margin-bottom: clamp(2.2rem, 7vw, 3.4rem); }
.block:last-child { margin-bottom: 0; }
.block__titel {
	font-size: clamp(1.4rem, 6vw, 2.1rem);
	text-transform: uppercase; letter-spacing: -.03em;
	margin-bottom: .8rem; padding-top: 1rem;
	border-top: 2px solid var(--gelb);
	display: inline-block;
}
.block p { color: var(--ink-dim); }
.block p strong { color: var(--ink); }

.haken { margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.haken li {
	position: relative; padding-left: 1.6rem;
	font-size: .96rem; color: var(--ink-dim);
}
.haken li::before {
	content: ''; position: absolute; left: 0; top: .55em;
	width: 9px; height: 9px; background: var(--gelb);
}
.haken li strong { color: var(--ink); }

.block--eigen { border-top: 1px dashed var(--hair); padding-top: 1.4rem; }

/* Fragen */
.fragen { background: var(--surface); padding-block: var(--space-eng); }
.fragen__liste { border-top: 1px solid var(--hair); }
.frage { border-bottom: 1px solid var(--hair); }
.frage__titel {
	list-style: none; cursor: pointer;
	padding: 1.1rem 2.4rem 1.1rem 0; position: relative;
	font-weight: 800; font-size: 1rem; letter-spacing: -.02em;
	text-transform: uppercase;
}
.frage__titel::-webkit-details-marker { display: none; }
.frage__titel::after {
	content: ''; position: absolute; right: .4rem; top: 50%;
	width: 12px; height: 2px; background: var(--gelb);
	transform: translateY(-50%);
}
.frage__titel::before {
	content: ''; position: absolute; right: .4rem; top: 50%;
	width: 12px; height: 2px; background: var(--gelb);
	transform: translateY(-50%) rotate(90deg);
	transition: transform var(--t-normal) var(--ease), opacity var(--t-fast) var(--ease);
}
.frage[open] .frage__titel::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.frage__text { padding-bottom: 1.1rem; }
.frage__text p { color: var(--ink-dim); font-size: .95rem; margin: 0; max-width: 62ch; }

/* ---------------------------------------------------------------------
   EINFACHE SEITEN
   --------------------------------------------------------------------- */
.seite__kopf { padding-block: clamp(2.5rem, 8vw, 4.5rem) clamp(1.4rem, 4vw, 2.4rem); }
.seite__titel {
	font-size: clamp(2.2rem, 10vw, 4.6rem);
	text-transform: uppercase; line-height: .88; letter-spacing: -.04em;
	margin-bottom: 1rem;
}
.seite__vor { font-size: clamp(1rem, 3.6vw, 1.18rem); color: var(--ink-dim); margin-bottom: 1.5rem; }
.seite__fliess { padding-block: clamp(2.5rem, 7vw, 4rem); }
.seite__fliess p, .seite__fliess li { color: var(--ink-dim); }
.seite__fliess h2 { font-size: 1.4rem; text-transform: uppercase; margin: 2rem 0 .7rem; }
.seite__fliess h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.seite__fliess ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1.1em; }
.seite__fliess a { color: var(--gelb); text-underline-offset: 3px; }

.kontaktdaten__gitter { display: grid; gap: 1.6rem; }
.kontaktdaten__block { border-top: 2px solid var(--gelb); padding-top: 1rem; }
.kontaktdaten__block h2 {
	font-size: .72rem; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem;
}
.kontaktdaten__gross {
	font-size: 1.3rem; font-weight: 800; font-style: normal;
	letter-spacing: -.03em; line-height: 1.3; margin-bottom: .5rem;
}

/* Zweite Rufnummer: bewusst kleiner als die erste. Es soll auf einen
   Blick klar sein, welche Nummer die Hauptnummer ist. */
.kontaktdaten__zweit { font-size: .92rem; color: var(--ink-dim); margin-top: .35rem; }
.kontaktdaten__zweit a { color: inherit; }
.kontaktdaten__zweit a:hover { color: var(--gelb); }

/* Der App-Hinweis. Kleiner als alles darueber, ohne Knopf und ohne
   Ladenlogos: er soll auffindbar sein, nicht einladend. */
.app {
	font-size: .92rem; line-height: 1.6; color: var(--ink-dim);
	max-width: 62ch; margin-top: clamp(1.6rem, 3.4vw, 2.6rem);
}
.app em { font-style: normal; color: var(--ink); }
.app a { color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.app a:hover { color: var(--gelb); }
.kontaktdaten__gross a { text-decoration: none; }
.kontaktdaten__gross a:hover { color: var(--gelb); }
.kontaktdaten__block p:last-child { font-size: .88rem; color: var(--ink-faint); }

.wegweiser { margin-top: 1.6rem; border-top: 1px solid var(--hair); }
.wegweiser li { border-bottom: 1px solid var(--hair); }
.wegweiser a {
	display: block; padding: .9rem 0;
	font-weight: 800; text-transform: uppercase; text-decoration: none;
	letter-spacing: -.02em;
	transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wegweiser a:hover { color: var(--gelb); transform: translateX(6px); }

/* ---------------------------------------------------------------------
   FUSS
   --------------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--hair); padding-top: var(--space-eng); }
.fuss__innen {
	max-width: var(--maxw); margin-inline: auto;
	padding: 0 var(--gut) 2.5rem;
	display: grid; gap: 2.2rem;
}
.fuss__logo {
	width: clamp(168px, 46vw, 215px);
	height: auto;
	margin-bottom: 1.1rem;
}
.fuss__satz { font-size: .88rem; color: var(--ink-dim); max-width: 30ch; }
.fuss__titel {
	font-size: .68rem; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--gelb); margin-bottom: .8rem;
}
.fuss__liste { display: grid; gap: .4rem; }
.fuss__liste a { font-size: .9rem; color: var(--ink-dim); text-decoration: none; }
.fuss__liste a:hover { color: var(--ink); }
.fuss__liste--profile { margin-top: 1rem; grid-auto-flow: column; justify-content: start; gap: 1rem; }
.fuss__adresse { font-style: normal; font-size: .9rem; color: var(--ink-dim); margin-bottom: .8rem; line-height: 1.6; }
/* Die wichtigste Verknuepfung der ganzen Website. Sie war 32 Pixel hoch —
   unter jedem Schwellenwert fuer ein Tippziel, und das ausgerechnet bei
   der Nummer. */
.fuss__telefon {
	display: inline-flex; align-items: center; min-height: 44px;
	font-size: 1.25rem; font-weight: 800;
	letter-spacing: -.03em; text-decoration: none; margin-bottom: .3rem;
}
.fuss__telefon:hover { color: var(--gelb); }
.fuss__mail { font-size: .9rem; color: var(--ink-dim); text-decoration: none; }
.fuss__zeiten { font-size: .84rem; color: var(--ink-dim); margin-top: .8rem; }
.fuss__zeiten strong { color: var(--gelb); }

.fuss__schluss {
	border-top: 1px solid var(--hair);
	max-width: var(--maxw); margin-inline: auto;
	padding: 1.2rem var(--gut);
	display: grid; gap: .4rem;
	font-size: .76rem; color: var(--ink-faint);
}
.fuss__schluss p { margin: 0; }
.fuss__schluss a { color: var(--ink-dim); }

/* ---------------------------------------------------------------------
   WHATSAPP
   Zeichen und Schrift in einer Zeile. Bewusst kein WhatsApp-Gruen: die
   Seite hat eine Akzentfarbe, und ein zweites kraeftiges Gruen daneben
   zieht die Aufmerksamkeit vom Anruf weg. Das Zeichen allein genuegt,
   es ist bekannt genug.
   --------------------------------------------------------------------- */
[data-whatsapp] { display: inline-flex; align-items: center; gap: .55rem; }
.wa__zeichen { flex: 0 0 auto; }

.anfrage__wege { display: flex; flex-wrap: wrap; gap: .7rem; }
.ruf-leiste { display: flex; gap: .5rem; }
.ruf-leiste .knopf { width: auto; flex: 1 1 auto; justify-content: center; }
.ruf-leiste__wa { flex: 0 0 auto; }
.kontaktdaten__wa { color: var(--ink); }
.kontaktdaten__wa:hover { color: var(--gelb); }

/* ---------------------------------------------------------------------
   WEGWEISER KLINIK -> STANDORT
   Eine Liste, keine <table>: Auf dem Telefon muesste eine Tabelle
   entweder seitlich scrollen oder umbrechen, und beides liest sich
   schlecht, wenn man sie im Wartezimmer aufschlaegt. Als Liste stapelt
   sich jede Zeile sauber.

   Hervorgehoben ist, was am jeweiligen Standort liegt. Die Hervorhebung
   laeuft ueber Schriftfarbe UND einen gelben Balken, nicht ueber Farbe
   allein -- sonst waere der Unterschied fuer jemanden mit Farbsehschwaeche
   nicht vorhanden.
   --------------------------------------------------------------------- */
.wegw { list-style: none; margin: 1.6rem 0 0; padding: 0;
	border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.wegw__zeile {
	display: grid; gap: .1rem .9rem; align-items: baseline;
	grid-template-columns: 1fr auto;
	padding: .75rem 1rem .8rem 1rem;
	border-top: 1px solid var(--hair);
	border-left: 3px solid transparent;
	color: var(--ink-dim);
}
.wegw__zeile:first-child { border-top: 0; }
.wegw__zeile--hier { border-left-color: var(--gelb); color: var(--ink); background: rgba(255,207,1,.04); }
.wegw__name { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.wegw__wo {
	font-size: .66rem; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-faint);
	justify-self: end; white-space: nowrap;
}
.wegw__zeile--hier .wegw__wo { color: var(--gelb); }
.wegw__str { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-faint); }

@media (min-width: 620px) {
	.wegw__zeile { grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 12rem); }
	.wegw__wo  { justify-self: start; }
	.wegw__str { grid-column: auto; }
}

/* ---------------------------------------------------------------------
   EINWILLIGUNG

   Ein Streifen am unteren Rand, keine Sperrschicht ueber der Seite. Der
   Inhalt bleibt lesbar und die Rufnummer im Kopf erreichbar — wer nur
   anrufen will, kommt an diesem Banner vorbei, ohne es wegzuklicken.

   Die beiden Knoepfe sind GLEICH gross und gleich auffaellig. "Ablehnen"
   steht links, weil dort der Lesefluss zuerst hinkommt. Eine Ablehnung,
   die kleiner, blasser oder weiter weg ist als die Annahme, gilt als
   nicht freiwillig erteilte Einwilligung.
   --------------------------------------------------------------------- */
.einwilligung {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
	background: var(--surface);
	border-top: 2px solid var(--gelb);
	box-shadow: 0 -18px 50px rgba(0,0,0,.6);
	padding: clamp(1.1rem, 3vw, 1.7rem) var(--gut)
	         calc(clamp(1.1rem, 3vw, 1.7rem) + env(safe-area-inset-bottom));
	animation: einwilligung-auf var(--t-normal) var(--ease) both;
}
@keyframes einwilligung-auf {
	from { transform: translateY(100%); }
	to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .einwilligung { animation: none; } }

.einwilligung__innen {
	max-width: var(--maxw); margin-inline: auto;
	display: grid; gap: 1.1rem;
}
.einwilligung__titel {
	font-size: clamp(1.05rem, 2.6vw, 1.25rem); font-weight: 800;
	text-transform: uppercase; letter-spacing: -.02em;
	margin: 0 0 .4rem; line-height: 1.15;
}
.einwilligung__titel:focus-visible { outline: 3px solid var(--gelb); outline-offset: 4px; }
.einwilligung__text p { margin: 0 0 .5rem; max-width: 62ch; font-size: .96rem; }
.einwilligung__text p:last-child { margin-bottom: 0; }
.einwilligung__klein { font-size: .86rem; color: var(--ink-dim); }
.einwilligung__klein a { color: var(--ink); text-underline-offset: .2em; }
.einwilligung__klein a:hover { color: var(--gelb); }

/* Beide Knoepfe teilen sich die Breite zu gleichen Teilen. */
.einwilligung__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.einwilligung__knoepfe .knopf { width: 100%; justify-content: center; text-align: center; }

/* "Ablehnen" als gefuellte helle Flaeche statt als blosser Umriss.
   Ein Umrissknopf neben einem gefuellten liest sich als die schwaechere
   von zwei Moeglichkeiten — und eine Ablehnung, die schwaecher wirkt als
   die Annahme, ist der haeufigste Angriffspunkt gegen Cookie-Banner.
   Jetzt sind beide gefuellt, gleich gross, gleich klar. Unterschiedlich
   ist nur die Farbe, damit man sie auseinanderhaelt. */
.einwilligung__knoepfe .knopf--rand {
	background: var(--ink); color: #000; border-color: var(--ink);
}
.einwilligung__knoepfe .knopf--rand:hover {
	background: #fff; border-color: #fff; color: #000;
}

@media (min-width: 760px) {
	.einwilligung__innen {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center; gap: 2rem;
	}
	.einwilligung__knoepfe { grid-template-columns: auto auto; }
	.einwilligung__knoepfe .knopf { min-width: 11rem; }
}

/* Solange gefragt wird, treten Ruf-Leiste und Anrufknopf zurueck — sonst
   lägen drei Elemente uebereinander am unteren Rand. Danach sind sie
   sofort wieder da. */
.fragt-nach .ruf-leiste { transform: translateY(110%); }
.fragt-nach .rufknopf { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); }

/* ---------------------------------------------------------------------
   SCHWEBENDER ANRUFKNOPF
   Auf dem Desktop das Gegenstueck zur Ruf-Leiste, die dort ausgeblendet
   ist. Ruhend ein gelber Kreis mit Hoerer; bei Zeigerkontakt oder
   Tastaturfokus faehrt die Nummer daneben aus.

   Zur Bewegung: ein Ring, der alle paar Sekunden einmal aufgeht, und ein
   kurzes Neigen des Hoerers. Beides mit langer Pause dazwischen — ein
   dauerhaft zappelndes Element liest sich als Werbebanner, und genau das
   soll es nicht sein. Bei "prefers-reduced-motion" steht alles still.
   --------------------------------------------------------------------- */
.rufknopf {
	position: fixed; right: var(--gut); bottom: 1.6rem; z-index: 95;
	display: none;                       /* erst ab 900 px, siehe unten */
	align-items: center; gap: 0;
	height: 62px; padding: 0 5px 0 0;
	background: var(--gelb); color: #000;
	border-radius: var(--radius-pill);
	box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
	text-decoration: none;
	opacity: 0; visibility: hidden;
	transform: translateY(14px) scale(.9);
	transition:
		opacity var(--t-normal) var(--ease),
		visibility var(--t-normal) var(--ease),
		transform var(--t-normal) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}
.rufknopf.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
.rufknopf:hover { box-shadow: 0 14px 38px rgba(255,207,1,.28), 0 2px 8px rgba(0,0,0,.4); }

/* Der Hoerer sitzt in einem quadratischen Feld, damit der Kreis rund
   bleibt, solange die Nummer eingefahren ist. */
.rufknopf__hoerer {
	width: 62px; height: 62px; flex: 0 0 auto;
	display: grid; place-items: center;
	position: relative; z-index: 1;
}

/* Die Nummer: Breite von 0 auf Inhalt. max-width statt width, damit die
   Zahl nicht gequetscht wird, waehrend sie ausfaehrt. */
.rufknopf__nr {
	max-width: 0; overflow: hidden; white-space: nowrap;
	font-weight: 800; font-size: .95rem; letter-spacing: .01em;
	transition: max-width var(--t-normal) var(--ease),
	            padding-right var(--t-normal) var(--ease);
	padding-right: 0;
}
.rufknopf:hover .rufknopf__nr,
.rufknopf:focus-visible .rufknopf__nr { max-width: 12rem; padding-right: 1.1rem; }

/* Der Ring geht aus dem Kreis heraus und verschwindet. */
.rufknopf__ring {
	position: absolute; inset: 0;
	border-radius: var(--radius-pill);
	border: 2px solid var(--gelb);
	opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.rufknopf.ist-sichtbar .rufknopf__ring { animation: ruf-ring 4.5s var(--ease) infinite; }
	.rufknopf.ist-sichtbar .rufknopf__hoerer svg { animation: ruf-neigen 4.5s var(--ease) infinite; }
	.rufknopf:hover .rufknopf__ring,
	.rufknopf:hover .rufknopf__hoerer svg { animation-play-state: paused; }
}

@keyframes ruf-ring {
	0%, 70%  { transform: scale(1);    opacity: 0; }
	72%      { transform: scale(1);    opacity: .85; }
	100%     { transform: scale(1.65); opacity: 0; }
}
@keyframes ruf-neigen {
	0%, 66%, 100% { transform: rotate(0); }
	70%  { transform: rotate(-12deg); }
	74%  { transform: rotate(10deg); }
	78%  { transform: rotate(-7deg); }
	82%  { transform: rotate(4deg); }
	86%  { transform: rotate(0); }
}

@media (min-width: 900px) { .rufknopf { display: inline-flex; } }

/* ---------------------------------------------------------------------
   RUF-LEISTE
   --------------------------------------------------------------------- */
.ruf-leiste {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	padding: .6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(10,10,10,.94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--hair);
	transform: translateY(110%);
	transition: transform var(--t-normal) var(--ease);
}
.ruf-leiste.ist-sichtbar { transform: none; }
/* KEIN width:100% hier. Die Leiste ist eine Flex-Zeile mit zwei Knoepfen
   (Anruf + WhatsApp); width:100% haette das flex:1 1 auto von weiter oben
   ueberschrieben, beide Knoepfe haetten die volle Breite beansprucht und
   der zweite waere bei 375 px um 67 Pixel rechts hinausgelaufen.
   flex:1 1 auto fuellt die Zeile ohnehin, auch wenn nur ein Knopf dasteht. */
.ruf-leiste .knopf { min-width: 0; }
body { padding-bottom: 4.8rem; }
.menue-offen { overflow: hidden; }

/* =====================================================================
   GROESSERE FLAECHEN
   Ab hier kommt hinzu, was auf dem Telefon nicht ginge.
   ===================================================================== */

@media (min-width: 620px) {
	/* grid-template-columns MUSS hier zurueckgesetzt werden. Sonst bleibt
	   die eine 1fr-Spalte aus der Grundregel stehen, der zweite Knopf
	   landet in einer impliziten Spalte — und der erste zieht sich ueber
	   die gesamte Restbreite. Gemessen: 530 statt 250 Pixel. */
	.hero__knoepfe,
	.lkopf__knoepfe {
		grid-template-columns: none;
		grid-auto-flow: column;
		justify-content: start;
	}
	.hero__knoepfe .knopf,
	.lkopf__knoepfe .knopf { width: auto; }
	.formular__reihe { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
	.flotte__gitter, .stimmen__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gebiet__orte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
	.kontaktdaten__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
	.fuss__schluss { grid-auto-flow: column; justify-content: space-between; }
}

@media (min-width: 900px) {
	body { padding-bottom: 0; }
	.ruf-leiste { display: none; }

	/* Der Hero als Plakat: Die Leitzeile nimmt die ganze Breite, der
	   Wagen liegt rechts dahinter und faehrt aus dem Bild. */
	.hero { display: block; position: relative; }
	.hero__text {
		position: relative; z-index: 2;
		padding-bottom: clamp(3rem, 6vw, 5rem);
	}
	/* Der Wagen haengt am INHALT, nicht am Bildschirmrand.
	   Vorher war er 62 Prozent der Fensterbreite — auf einem 1920er
	   Schirm also fast 1200 Pixel breit, und die Front ragte quer ueber
	   den zweiten Knopf. Jetzt ist er nach oben gedeckelt und sein
	   rechter Rand folgt der Inhaltsspalte: Auf breiten Schirmen wird
	   die Zusatzbreite zu Luft, nicht zu einem groesseren Auto. */
	.hero__bild {
		position: absolute; z-index: 1;
		bottom: 0;
		right: calc(max(0px, (100vw - var(--maxw)) / 2) - 2.5vw);
		width: min(60%, 860px);
		margin-bottom: 0;
	}
	.hero__bild img { width: 116%; margin-left: 0; }

	/* Damit die Zeile den Wagen nicht ueberschreibt, bleiben Satz und
	   Knoepfe in der linken Haelfte — die Ueberschrift darf darueber
	   hinweggehen. */
	.hero__satz { font-size: clamp(1.16rem, 1.5vw, 1.42rem); line-height: 1.55; max-width: 32ch; }
	.hero__knoepfe { grid-auto-flow: column; justify-content: start; width: fit-content; }
	/* Breiter, seit der Wagen nicht mehr so weit hereinragt. Vorher
	   rutschte "KURIERFAHRTEN" als einzelnes Wort in eine zweite Zeile. */
	.hero__marken { max-width: 46%; }
	.hero__titel { position: relative; z-index: 2; }

	/* Auf breiten Schirmen wird die Zeile zweispaltig: Bezeichnung links,
	   Beschreibung rechts daneben. Vorher stand beides untereinander in
	   der linken Haelfte und zwischen Text und Pfeil klafften rund 700
	   Pixel Nichts — die Zeile sah unfertig aus. Jetzt traegt sie ihre
	   Breite. */
	.fahrt__a {
		grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.25fr) 2.5rem;
		align-items: baseline;
		column-gap: clamp(1.2rem, 2.5vw, 2.6rem);
		padding: 2.1rem 0;
	}
	.fahrt__name { grid-column: 2; grid-row: 1; }
	.fahrt__text { grid-column: 3; grid-row: 1; margin-top: 0; max-width: 46ch; }
	.fahrt__pfeil { display: block; grid-column: 4; grid-row: 1; justify-self: end; }

	.aussage__unten { grid-template-columns: 1fr auto; align-items: end; }

	.flotte__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.flotte__gitter > .wagen:first-child { grid-column: span 2; }

	.stimmen__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gebiet__innen { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem,5vw,4rem); align-items: stretch; }
	/* Die Ortsliste fuellte ihre Spalte nur oben und liess unten rechts
	   ein Loch in der gelben Flaeche. Groessere Zeilen mit mehr Hoehe
	   bringen beide Spalten auf eine Laenge — und die Orte sind hier der
	   eigentliche Inhalt, nicht Beiwerk. */
	.gebiet__orte {
		margin-top: 0;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-content: space-between;
	}
	.gebiet__orte li { min-height: 4.1rem; font-size: 1.06rem; }
	.gebiet__text { display: flex; flex-direction: column; }
	.gebiet__text .knopf { margin-top: auto; align-self: flex-start; }

	.anfrage__innen { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem,5vw,4rem); align-items: start; }
	.anfrage__ruf { margin-bottom: 0; }

	.lkopf__innen { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; }
	/* Ohne Fahrzeugfoto braucht der Kopf keine zweite Spalte. Der Text
	   bekommt dann die Breite, die er zum Atmen braucht. */
	.lkopf__innen--einspaltig { display: block; }
	/* 22 statt 18 Zeichen: Bei 18 brach "DU BLEIBST, ES FÄHRT" um und
	   riss das Quadrat auf eine eigene Zeile. */
	.lkopf__innen--einspaltig .lkopf__titel { max-width: 22ch; }
	.lkopf__innen--einspaltig .lkopf__vor { max-width: 52ch; }
	.lkopf__bild { margin-top: 0; }

	.kontaktdaten__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Sechs Spalten waeren auf jeder Breite zu duenn. Zwei Reihen zu
	   dritt: oben Marke, Fahrten, Orte — unten Krankenfahrten, Kontakt,
	   Rechtliches. Der Logoblock steht damit ueber der Marke und nicht
	   allein in einer Zeile. */
	.fuss__innen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
}

@media (min-width: 1100px) {
	.fuss__innen { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr .9fr; gap: 2.2rem; }
}

/* ---------------------------------------------------------------------
   WAAGERECHTES MENUE — erst ab 1240 px

   Gemessen: Bei 900 bis 1600 px Bildbreite lief der letzte Menuepunkt
   ueber die Rufnummer. Sechs Punkte, Logo und Rufnummernpille brauchen
   zusammen mehr Platz, als unter 1240 px vorhanden ist — auch mit engen
   Abstaenden. Darunter bleibt es deshalb beim Vollflaechenmenue. Ein
   Balken, der sich selbst zerdrueckt, ist keine Navigation.

   Zusaetzlich sind zwei Bezeichnungen gekuerzt: "Flughafentransfer"
   wurde zu "Flughafen", "Besorgungsfahrten" zu "Besorgungen". Die
   Seitentitel bleiben vollstaendig.
   --------------------------------------------------------------------- */
@media (min-width: 1360px) {
	.kopf__schalter { display: none; }
	.hat-js .kopf__menue,
	.kopf__menue {
		position: static; inset: auto; display: block;
		padding: 0; background: none;
		opacity: 1; visibility: visible; transform: none;
		margin-left: auto;
		min-width: 0;
	}
	.menue { grid-auto-flow: column; align-items: center; gap: clamp(.85rem, 1.5vw, 1.5rem); }
	.menue a {
		padding: .3rem 0;
		font-size: .72rem; font-weight: 800;
		letter-spacing: .1em; line-height: 1.2;
	}
	.menue a:hover { transform: none; }
	.kopf__menue-fuss { display: none; }
	.kopf__ruf { margin-left: clamp(.9rem, 2vw, 1.6rem); }
	.kopf__ruf-lang { display: inline; }
	.kopf__logo { width: 196px; }
}

@media (min-width: 1200px) {
	.hero__titel { letter-spacing: -.05em; }
}

/* ---------------------------------------------------------------------
   SEHR BREITE UND SEHR HOHE SCHIRME

   100svh heisst auf einem 1080 Pixel hohen Schirm auch 1080 Pixel Hero —
   darueber stand dann ein Viertel der Flaeche leer, weil der Inhalt unten
   verankert ist. Gedeckelt wirkt die Anlage geschlossen statt leer.
   --------------------------------------------------------------------- */
@media (min-width: 1240px) {
	.hero { min-height: min(100svh, 880px); }
}

/* Jenseits von 1440 Pixeln waechst nicht mehr die Schrift, sondern die
   Luft. Eine Leitzeile, die mit dem Fenster mitwaechst, wird auf grossen
   Schirmen zur Litfasssaeule. */
@media (min-width: 1600px) {
	.huelle, .kopf__innen, .fuss__innen, .fuss__schluss, .hero__text { padding-inline: 5rem; }
}

/* ---------------------------------------------------------------------
   TELEFON IM QUERFORMAT

   Gemessen bei 844 x 390: Der Hero war 1142 Pixel hoch, der Anrufknopf lag
   damit weit unter der Falte. Die Rufnummer im Kopf bleibt zwar immer
   sichtbar, aber die Hauptseite soll ihre Handlung nicht verstecken.

   Bei niedrigen Bildhoehen faellt deshalb das Fahrzeugbild weg und die
   Leitzeile wird kleiner. Der Wagen ist Schmuck, der Knopf ist der Zweck.
   --------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
	.hero { min-height: 0; padding-top: 2.9rem; }
	.hero__bild { display: none; }
	.hero__titel { font-size: clamp(1.9rem, 5.6vw, 2.7rem); line-height: .9; margin-bottom: .55rem; }
	.hero__satz { margin-bottom: .8rem; font-size: .86rem; line-height: 1.4; max-width: 52ch; }
	.hero__marken { display: none; }
	.hero__text { padding-bottom: 1rem; }
	.hero .vorzeile { margin-bottom: .5rem; font-size: .62rem; }
	.hero__knoepfe .knopf { padding: .85rem 1.4rem; }
}

/* =====================================================================
   TIPPZIELE AUF DEM TELEFON

   Gemessen auf 320 bis 430 Pixel Bildbreite: Die Verweise in der
   Fusszeile waren 16 Pixel hoch, die Kontaktangaben 23, der Pfad 13. Ein
   Finger trifft das nicht zuverlaessig — die uebliche Untergrenze liegt
   bei 44 Pixeln. Auf dem Schreibtisch mit Zeigegeraet ist das unnoetig,
   deshalb gilt es nur bis 900 Pixel.

   Die Formularfelder selbst waren in Ordnung: 16 Pixel Schrift und 47
   Pixel hoch. Das ist wichtig, denn unter 16 Pixeln zoomt iOS beim
   Antippen in die Seite hinein.
   ===================================================================== */
@media (max-width: 900px) {
	.fuss__liste a,
	.wegweiser a,
	.pfad a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.fuss__liste { gap: 0; }
	.pfad .huelle { padding-block: .35rem; }

	/* Marke im Kopf: das Bild ist flach, der Verweis darf es nicht sein. */
	.kopf__marke { display: inline-flex; align-items: center; min-height: 44px; }

	/* Rufnummer und Mailadresse auf der Kontaktseite sind dort die
	   eigentliche Handlung — sie bekommen Flaeche statt nur Schrift. */
	.kontaktdaten__gross a {
		display: inline-flex; align-items: center;
		min-height: 44px;
	}
	.fuss__telefon,
	.fuss__mail { min-height: 44px; display: inline-flex; align-items: center; }

	/* Die Rufnummer im Kopf war mit knapp zwoelf Pixeln kleiner gesetzt
	   als jeder Fliesstext — beim wichtigsten Element der Seite. */
	.kopf__ruf .knopf { padding: .78rem 1rem; font-size: .78rem; }
	.kopf__ruf .nr { font-size: 1.1em; }

	/* Feldbeschriftungen: 11,5 Pixel in Versalien lesen sich muehsam. */
	.feld label { font-size: .78rem; }
}

/* =====================================================================
   BEWEGUNG
   ===================================================================== */

/* --- Eintritt beim Scrollen -------------------------------------------
   Erst nativ ueber view(). Wo das fehlt, setzt ein IntersectionObserver
   die Klasse .ist-da. Ohne JavaScript und ohne view() bleibt alles
   sichtbar — die Grundregel lautet: kein Inhalt haengt an Bewegung.
   --------------------------------------------------------------------- */
.js-motion .auf { opacity: 0; transform: translate3d(0, 22px, 0); }
.js-motion .auf.ist-da {
	opacity: 1; transform: none;
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.auf {
			opacity: 0;
			transform: translate3d(0, 22px, 0);
			animation: aufSteigen both linear;
			animation-timeline: view();
			/* Nur der entry-Bereich, nicht gemischt mit cover.
			   "entry 10% cover 26%" lief bei hohen Elementen nie zu Ende:
			   gemessen standen die Bewertungskarten mittig im Bild und
			   blieben bei 50 % Deckkraft haengen. Mit einem reinen
			   entry-Bereich ist die Bewegung abgeschlossen, sobald das
			   Element zu 45 % eingetreten ist.

			   45 % und nicht mehr: Ein hohes Element am Seitenende kann
			   nie vollstaendig eintreten, weil darunter nichts mehr
			   kommt. Gemessen blieb das Anfrageformular bei 87 %
			   haengen — es traegt deshalb gar keine Eintrittsbewegung
			   mehr, und die Schwelle liegt tiefer. */
			animation-range: entry 0% entry 45%;
		}
	}
}
@keyframes aufSteigen { to { opacity: 1; transform: none; } }

/* --- Die Leitzeile im Hero -------------------------------------------
   Zeile fuer Zeile, mit Versatz. Laeuft einmal beim Laden, nicht beim
   Scrollen: der Hero steht beim Laden bereits im Bild.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.hero__titel .zeile,
	.hero .vorzeile,
	.hero__satz,
	.hero__knoepfe,
	.hero__marken {
		animation: heroAuf var(--t-slow) var(--ease) both;
	}
	.hero .vorzeile          { animation-delay: .05s; }
	.hero__titel .zeile:nth-child(1) { animation-delay: .16s; }
	.hero__titel .zeile:nth-child(2) { animation-delay: .27s; }
	.hero__satz              { animation-delay: .40s; }
	.hero__knoepfe           { animation-delay: .50s; }
	.hero__marken            { animation-delay: .60s; }

	.hero__bild { animation: wagenAuf 1.4s var(--ease) both .2s; }
}
@keyframes heroAuf {
	from { opacity: 0; transform: translate3d(0, 26px, 0); }
	to   { opacity: 1; transform: none; }
}
/* Der Wagen faehrt herein. Einmal, ruhig, ohne Federn. */
@keyframes wagenAuf {
	from { opacity: 0; transform: translate3d(9%, 0, 0); }
	to   { opacity: 1; transform: none; }
}

/* --- Der Lebendpunkt -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.leuchte { animation: leuchtPuls 2.6s var(--ease-io) infinite; }
}
@keyframes leuchtPuls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,207,1,.5); opacity: 1; }
	50%      { box-shadow: 0 0 0 7px rgba(255,207,1,0); opacity: .75; }
}

/* --- Die Wagen fahren vor ---------------------------------------------
   Jeder Wagen kommt an einer eigenen Stelle der Scrollstrecke an, nicht
   zu einer eigenen Zeit. Wer zurueckscrollt, sieht die Bewegung
   rueckwaerts — das ist der Unterschied zwischen scrollgetrieben und
   zeitgesteuert.
   --------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
		.wagen__foto {
			animation: wagenVor both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 65%;
		}
	}
}
@keyframes wagenVor {
	from { opacity: .35; transform: translate3d(-7%, 0, 0) scale(1.04); }
	to   { opacity: 1;   transform: none; }
}

/* --- Das Banner kommt herein --------------------------------------------
   Ueber die Scrollstrecke, nicht ueber die Zeit: Es richtet sich auf und
   nimmt seine volle Groesse an, waehrend es ins Bild kommt. Der Schein
   dahinter kommt einen Tick spaeter — dadurch liest es sich, als loese
   sich das Motiv von der Flaeche ab, statt nur einzublenden.
   ------------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.banner__bild {
			animation: bannerAn both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
		.banner__rahmen::before {
			animation: scheinAn both linear;
			animation-timeline: view();
			animation-range: entry 10% entry 75%;
		}
	}
}
@keyframes bannerAn {
	from { opacity: .25; transform: scale(.955) translate3d(0, 26px, 0); }
	to   { opacity: 1;   transform: none; }
}
@keyframes scheinAn {
	from { opacity: 0; transform: scale(.9); }
	to   { opacity: 1; transform: none; }
}

/* --- Aussage: die Zeilen steigen ueber die Strecke auf ---------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.aussage__zeile .zeile {
			animation: zeileAuf both linear;
			animation-timeline: view();
		}
		/* Gestaffelt ueber die Strecke, nicht ueber die Zeit: Jede Zeile
		   steigt an einer eigenen Stelle des Scrollwegs auf. Wer
		   zurueckscrollt, sieht die Bewegung rueckwaerts. */
		.aussage__zeile .zeile:nth-child(1) { animation-range: entry 5%  entry 45%; }
		.aussage__zeile .zeile:nth-child(2) { animation-range: entry 12% entry 52%; }
		.aussage__zeile .zeile:nth-child(3) { animation-range: entry 19% entry 59%; }
	}
}
@keyframes zeileAuf {
	from { opacity: 0; transform: translate3d(0, .32em, 0); }
	to   { opacity: 1; transform: none; }
}

/* --- Barrierefreiheit: nicht verhandelbar ----------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
	.auf, .js-motion .auf { opacity: 1 !important; transform: none !important; }
	.hero::before, .hero::after { animation: none; }
	.band__spur { animation: none; }
}

/* ---------------------------------------------------------------------
   SEHR SCHMALE GERAETE

   Gemessen bei 320 und 340 Pixeln: "TÜBINGEN" im Hero und "FÜNF
   MERCEDES" auf der Fahrzeugseite brauchten samt Quadrat mehr Platz, als
   die Zeile hergab — das Quadrat rutschte auf eine eigene Zeile und stand
   dort als einzelnes Zeichen.

   Greift nur unterhalb von 380 Pixeln. Die Leitzeile auf allen Telefonen
   zu verkleinern, waere der falsche Preis fuer einen Randfall.

   Der Block steht bewusst hier am Ende: Ein erster Versuch weiter oben
   wurde von der spaeteren Grunddefinition wieder ueberschrieben — die
   Medienabfrage griff, die Schriftgroesse blieb trotzdem stehen.
   --------------------------------------------------------------------- */
@media (max-width: 379px) {
	.hero__titel  { font-size: 13.2vw; }
	.seite__titel { font-size: 8.6vw; }
	.lkopf__titel { font-size: 7.4vw; }
	.abs__titel   { font-size: 8.4vw; }
}

/* =====================================================================
   DRUCK
   ===================================================================== */
@media print {
	.kopf__menue, .kopf__schalter, .ruf-leiste, .rufknopf, .einwilligung, .anfrage__formular,
	.band, .hero__bild, .stimmen, .fahrten { display: none !important; }
	body { padding: 0; background: #fff; color: #000; }
	.hero, .aussage, .flotte, .anfrage, .fuss, .abs--flaeche { background: #fff !important; color: #000 !important; }
	h1, h2, h3, .abs__titel, .hero__titel { color: #000 !important; }
	a[href^="tel:"]::after { content: ' (' attr(href) ')'; font-size: .8em; }
}