/*
Theme Name: Big 5
Theme URI: https://www.big5-gmbh.de
Author: Stumpp und Partner
Author URI: https://stumppundpartner.agency
Description: Individuelles Full-Site-Editing-Theme für die Big 5 GmbH, Bühl/Baden. Onepager für Elektro, Heizung, Sanitär, PV und Klima.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 2.7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: big5
Tags: full-site-editing, blog, one-column, custom-colors, custom-logo, custom-menu
*/

/* ==========================================================================
   1. Variablen
   ========================================================================== */

:root {
	/* Luft ober- und unterhalb JEDES Abschnitts – das ist der senkrechte
	   Rhythmus der ganzen Seite, nicht die Einstellung eines einzelnen
	   Blocks. Eine Änderung hier verschiebt alle neun Abschnitte
	   gleichzeitig, und genau das ist der Sinn: Der Rhythmus gehört ins
	   Theme, nicht in achtzehn einzeln gepflegte Abstandshalter.
	   Soll ein einzelner Abschnitt ausscheren, bekommt er im Editor die
	   Klasse big5-section--ohne-abstand. */
	--big5-section-pad: 7rem;

	--big5-nav-h: 104px;          /* Höhe der Nav ganz oben */
	--big5-nav-h-scrolled: 72px;  /* Höhe der Nav nach dem Scrollen */
	--big5-progress-h: 3px;       /* Stärke des Fortschrittsbalkens */
	--big5-anim: 0.3s ease;

	/* Wie schnell der Fortschrittsbalken einblendet. Bewusst kurz –
	   er soll beim ersten Scrollen sofort da sein. */
	--big5-progress-fade: 0.2s;

	/* Wie weit der Hero-Text über der senkrechten Mitte steht.
	   Größere Zahl = weiter oben. 0 = genau mittig, negative Werte
	   schieben ihn nach unten. 1rem entspricht 16 Pixeln. */
	--big5-hero-hoch: 1.5rem;

	/* Wie stark die Leistungskacheln beim Überfahren wachsen.
	   1 = gar nicht, 1.05 wäre schon deutlich zu viel. */
	--big5-karte-zoom: 1.025;

	/* Icon in den Leistungskacheln: Größe und Abstand zum Text.
	   Der Abstand ist gleichzeitig die Einrückung des Textes. */
	--big5-karte-icon: 2.75rem;
	--big5-karte-icon-gap: 1.25rem;

	/* Das abgedunkelte Band hinter dem Text der Leistungskacheln.
	   Farbe ist Blau 2 mit Deckkraft – der letzte Wert steuert, wie viel
	   vom Bild durchscheint. Der Innenabstand bestimmt, wie viel Luft
	   ober- und unterhalb des Textes bleibt, und damit die Bandhöhe. */
	--big5-karte-band: rgba(3, 41, 103, 0.88);
	--big5-karte-band-pad: 1.5rem 2rem;

	/* Bildausschnitt der Leistungskacheln auf dem Handy. Dort liegt der
	   Text nicht mehr über dem Bild, sondern darunter – das Bild braucht
	   deshalb ein eigenes, festes Format. 16 / 9 ist ein ruhiger Streifen,
	   3 / 2 wäre höher, 21 / 9 flacher. Auf dem Desktop ohne Wirkung. */
	--big5-karte-ratio-mobil: 16 / 9;

	/* Bildausschnitt der Team-Portraits. 1 / 1 = quadratisch.
	   Andere Werte: 4 / 5 hochkant, 3 / 2 quer. */
	--big5-team-ratio: 1 / 1;

	/* Team-Reihe: Abstand zwischen den Portraits und Anzahl der Personen
	   pro Zeile. Der Wert hier gilt für den Desktop; Tablet, Handy quer und
	   Handy hochkant überschreiben ihn weiter unten – je an einer Stelle,
	   die Rasterregel selbst steht nur einmal.
	   Mehr Personen als Spalten rutschen von selbst in die nächste Zeile:
	   bei 7 Personen und 4 Spalten also 4 oben, 3 darunter. */
	--big5-team-gap: 1.75rem;
	--big5-team-spalten: 4;

	/* Vergrößerung beim Überfahren.
	   --big5-teamfoto-zoom: das große Gruppenbild, Rahmen bleibt stehen.
	   --big5-portrait-zoom: die Portraits, wachsen samt Rahmen.
	   Bildzoom darf etwas langsamer laufen als ein Button – bei einer
	   großen Fläche wirkt eine schnelle Bewegung hektisch. */
	--big5-teamfoto-zoom: 1.06;
	--big5-portrait-zoom: 1.04;
	--big5-zoom-anim: 0.5s ease;

	/* Bildausschnitt der beiden Geschäftsbilder im Abschnitt "Einblicke". */
	--big5-galerie-ratio: 3 / 2;

	/* Bildergalerie im Abschnitt "Einblicke".
	   --big5-slider-sichtbar bestimmt, wie viele Bilder gleichzeitig ins
	   Bild passen. 2.7 heißt: zwei ganz, vom dritten rund zwei Drittel –
	   der Anschnitt ist der Hinweis, dass es weitergeht.
	   Die Bildbreite wird daraus berechnet, es gibt keinen festen Wert:
	   sie wächst und schrumpft mit dem Fenster. */
	--big5-slider-sichtbar: 2.7;
	--big5-slider-gap: 1.75rem;
	--big5-slider-ratio: 3 / 2;
	/* Dasselbe Verhältnis noch einmal als Zahl (3 geteilt durch 2).
	   Wird gebraucht, um die Bildhöhe zu berechnen und die Pfeile exakt
	   auf Bildmitte zu setzen – mit "3 / 2" kann CSS nicht rechnen.
	   Beide Werte müssen zusammenpassen. */
	--big5-slider-ratio-zahl: 1.5;
	--big5-slider-punkt: 10px;
	--big5-slider-pfeil: 3rem;
	--big5-slider-pfeil-abstand: 1rem;

	/* Schwebender Anruf-Knopf auf dem Handy, wo er nur noch aus dem Hörer
	   besteht: Kantenlänge des Quadrats und Größe des Symbols darin.
	   Eckig wie alle Knöpfe der Seite – auf dem Desktop behält er Text
	   und bleibt unberührt. */
	--big5-call-size: 3.5rem;
	--big5-call-icon: 1.4rem;

	/* Markenlaufband vor dem Footer.
	   --big5-marken-tempo: Geschwindigkeit in Pixeln pro Sekunde.
	     Größere Zahl = schneller. 45 ist ruhiges Lesetempo. Die Dauer wird
	     daraus berechnet, nicht fest eingetragen – dadurch läuft das Band
	     immer gleich schnell, egal wie viele Marken darin stehen.
	   --big5-marken-abstand: Abstand zwischen zwei Marken.
	   --big5-marken-pad: Luft ober- und unterhalb des Bandes.
	   --big5-marken-blende: weiche Kante links und rechts. 0 = harte Kante,
	     wie bei der Bildergalerie. Ein Wert wie 6rem lässt die Marken an
	     beiden Rändern ausblenden – die Mechanik bleibt eingebaut. */
	--big5-marken-tempo: 45;
	--big5-marken-abstand: 5rem;
	--big5-marken-pad: 0;
	--big5-marken-blende: 0;

	/* Seitenverhältnis der Standortkarte.
	   21 / 9 ist ein flaches Band. 16 / 9 wäre höher, 3 / 1 noch flacher. */
	--big5-map-ratio: 21 / 9;

	/* Terminbuchung: Icon-Größe, Abstand zum Text und Höhe des Buchungs-
	   fensters. Die Höhe ist bewusst großzügig – siehe Abschnitt 19. */
	--big5-termin-icon: 4rem;
	--big5-termin-icon-gap: 1.5rem;
	--big5-booking-h: clamp(700px, 85vh, 1000px);

	/* Linienstärke des Trennelement-Blocks. Gilt für alle Trennelemente
	   außer der Linie im Footer. */
	--big5-separator-h: 3px;

	/* Kontaktformular: Breite des Kastens, Innenabstand des Kastens
	   und Innenabstand der einzelnen Eingabefelder. */
	--big5-form-breite: 52rem;
	--big5-form-pad: 2.5rem;
	--big5-form-feld-pad: 0.8rem 1rem;

	/* Scroll-Hinweis unten im Hero: Abstand zum Bildschirmrand, Breite des
	   Pfeils, Strecke und Dauer der Auf-und-ab-Bewegung. */
	--big5-scrollhint-bottom: 2rem;
	--big5-scrollhint-size: 1.5rem;
	--big5-scrollhint-weg: 7px;
	--big5-scrollhint-tempo: 2.2s;

	/* Winkel nach unten, wird als Maske verwendet – die Farbe im SVG ist
	   dabei egal, sichtbar wird nur die Form. */
	--big5-icon-chevron: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2014%22%3E%3Cpath%20d=%22M2%202%2012%2012%2022%202%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%223%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");

	/* Pfeil im Auswahlfeld, in Blau hell. */
	--big5-icon-pfeil: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2012%208%22%3E%3Cpath%20d=%22M1%201.5%206%206.5%2011%201.5%22%20fill=%22none%22%20stroke=%22%230167ab%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");

	/* Telefon-Icon als SVG-Maske. Die Farbe kommt über currentColor,
	   das Icon passt sich damit automatisch an weiß bzw. blau an. */
	--big5-icon-tel: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E");
}

/* Wiederverwendbares Icon-Element */
.big5-icon::before {
	content: "";
	flex: 0 0 auto;
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask-image: var(--big5-icon-tel);
	mask-image: var(--big5-icon-tel);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

html {
	scroll-behavior: smooth;
	/* Anker-Sprünge dürfen nicht unter der fixierten Nav landen */
	scroll-padding-top: calc(var(--big5-nav-h-scrolled) + 1rem);
}

/* Header, Main und Footer sind die drei obersten Blöcke der Seite, und
   zwischen allen Blöcken setzt WordPress den blockGap (1,25rem) – als
   margin-block-start auf jeden Block ab dem zweiten. Das ergibt einen
   Streifen unter der Nav und einen zweiten zwischen letztem Abschnitt und
   Footer. Beide sollen weg: Diese drei Blöcke stoßen direkt aneinander.

   Elementnamen statt "> * + *": Damit ist die Regel spezifischer als die
   von WordPress erzeugte und gewinnt unabhängig von der Reihenfolge, in
   der die Stylesheets im Kopf landen. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Vollbreite Abschnitte müssen direkt aneinander stoßen.
   WordPress setzt zwischen allen Blöcken einen Abstand (blockGap). Zwischen
   zwei Abschnitten entsteht dadurch eine Lücke. Klassennamen doppelt, damit
   die Regel die von WordPress erzeugten Layout-Regeln sicher überwiegt. */
.big5-hero.big5-hero,
.big5-section.big5-section,
main > .wp-block-post-content {
	margin-block-start: 0;
	margin-block-end: 0;
}


/* ==========================================================================
   2. Header / Navigation
   ========================================================================== */

header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: var(--wp--preset--color--weiss);
	box-shadow: var(--wp--preset--shadow--nav);
	transition: background-color var(--big5-anim), box-shadow var(--big5-anim);
}

/* Ganz oben auf der Seite: keine Bar, Logo und Menü stehen frei über dem Hero. */
.big5-at-top header.wp-block-template-part {
	background-color: transparent;
	box-shadow: none;
}

.big5-nav {
	position: static;
}

.big5-nav__inner {
	min-height: var(--big5-nav-h-scrolled);
	gap: 2.5rem;
	transition: min-height var(--big5-anim);
}

.big5-at-top .big5-nav__inner {
	min-height: var(--big5-nav-h);
}

.big5-nav__right {
	gap: 2.5rem;
}

/* --- Logo --- */
.wp-block-site-logo.big5-logo {
	line-height: 0;
}

.wp-block-site-logo.big5-logo img {
	display: block;
	width: auto;
	height: 48px;
	max-width: none;
	transition: height var(--big5-anim);
}

.big5-at-top .wp-block-site-logo.big5-logo img {
	height: 86px;
}

/* --- Menü --- */
.big5-nav .big5-menu {
	gap: 1.5rem;
}

.big5-nav .big5-menu a,
.big5-nav .big5-nav__tel a {
	color: var(--wp--preset--color--blau-dunkel);
	text-decoration: none;
	transition: color var(--big5-anim);
}

.big5-at-top .big5-nav .big5-menu a,
.big5-at-top .big5-nav .big5-nav__tel a {
	color: var(--wp--preset--color--weiss);
}

/* Im geöffneten Burger-Menü gilt das NICHT.
 *
 * Weiße Schrift ist für Links gedacht, die über dem dunklen Hero stehen.
 * Im Overlay steht der Text auf Weiß – dort war er weiß auf Weiß:
 * anklickbar, aber unsichtbar. Das war der Grund, warum das Menü ganz
 * oben auf der Seite leer aussah.
 *
 * Angesprochen wird die Klasse is-menu-open, die WordPress setzt, solange
 * das Overlay offen ist – nicht eine Bildschirmbreite. Der Burger taucht
 * je nach Lage des Geräts bei ganz verschiedenen Breiten auf; eine
 * Breitenregel würde im Querformat wieder danebenliegen. */
.big5-at-top .big5-nav .big5-menu .is-menu-open a {
	color: var(--wp--preset--color--blau-dunkel);
}

.big5-at-top .big5-nav .big5-menu .is-menu-open a:hover,
.big5-at-top .big5-nav .big5-menu .is-menu-open .current-section > a {
	color: var(--wp--preset--color--orange);
}

/* --- Menü-Schalter (Burger, nur auf dem Handy sichtbar) ---
 *
 * Das Symbol ist ein SVG mit fill: currentColor, holt seine Farbe also
 * aus "color". Es erbt sie NICHT von den Menü-Links, weil die Regeln
 * oben auf a-Elemente zielen – deshalb blieb der Burger ganz oben
 * dunkelblau und stand dunkel auf dem dunklen Hero.
 *
 * Ganz oben orange, ab der weißen Bar wieder dunkelblau. */
.big5-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--blau-dunkel);
	transition: color var(--big5-anim);
}

.big5-at-top .big5-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--orange);
}

/* Das Schließen-Kreuz sitzt immer im weißen Overlay und bleibt deshalb
   immer dunkel – unabhängig davon, ob die Seite gescrollt ist. */
.big5-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--blau-dunkel);
}

.big5-nav .big5-menu a:hover,
.big5-nav .big5-nav__tel a:hover,
.big5-at-top .big5-nav .big5-menu a:hover,
.big5-at-top .big5-nav .big5-nav__tel a:hover {
	color: var(--wp--preset--color--orange);
}

/* Der aktive Abschnitt wird per JS markiert. */
.big5-nav .big5-menu .current-section > a {
	color: var(--wp--preset--color--orange);
}

.big5-nav__tel {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	white-space: nowrap;
	font-weight: 500;
	color: var(--wp--preset--color--blau-dunkel);
	transition: color var(--big5-anim);
}

.big5-at-top .big5-nav__tel {
	color: var(--wp--preset--color--weiss);
}

.big5-nav__tel a {
	color: inherit;
}

/* --- Fortschrittsbalken ---
 *
 * Der Balken wird von functions.php direkt vor </body> ausgegeben, nicht
 * als Block im Header. Damit ist er ein direktes Kind von <body> – kein
 * Vorfahre kann ihn auf Inhaltsbreite zwingen oder ihm einen Blockabstand
 * verpassen. Die volle Bildschirmbreite ist so garantiert.
 *
 * Die vertikale Position kommt aus --big5-nav-h-real. Diese Variable misst
 * assets/js/scroll.js an der tatsächlichen Höhe der Nav-Bar – währenddessen
 * auch Bild für Bild, solange die Nav-Bar ihre Höhe animiert. Der Balken
 * wandert dadurch exakt mit der Unterkante der Nav-Bar nach oben.
 *
 * Deshalb hier bewusst KEINE eigene Übergangsanimation auf "top": die
 * Bewegung kommt schon aus der gemessenen Höhe. Eine zweite Animation
 * darüber würde nur nachlaufen und ruckeln.
 *
 * Sichtbar wird der Balken über die Klasse .big5-scrolled am <body> –
 * gesetzt ab dem ersten gescrollten Pixel, unabhängig davon, wann die
 * Nav-Bar erscheint.
 */
.big5-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--big5-nav-h-real, 104px) - var(--big5-progress-h));
	z-index: 1000;
	height: var(--big5-progress-h);
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--big5-progress-fade) ease;
}

.big5-scrolled .big5-progress {
	opacity: 1;
}

.big5-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: left center;
	transform: scaleX(var(--big5-progress, 0));
	background-image: linear-gradient(
		90deg,
		#fbc177 0%,
		#f68b1e 55%,
		#c8620a 100%
	);
	will-change: transform;
}


/* ==========================================================================
   3. Sections – gemeinsame Grundlagen
   ========================================================================== */

/* Bewusst OHNE Hintergrundfarbe. Ein Abschnitt ohne Modifikator-Klasse ist
   dadurch durchsichtig und nimmt die Farbe der Gruppe an, in der er steckt.
   Erst die Modifikatoren unten färben ihn. So deckt ein Abschnitt nicht mehr
   ungewollt eine Farbe zu, die du außen herum gesetzt hast. */
.big5-section {
	padding-block: var(--big5-section-pad);
}

/* Abschnitt ohne eigenen Abstand. Im Editor unter Erweitert → Zusätzliche
   CSS-Klasse(n) zu ergänzen, wenn du die Abstände dieses einen Abschnitts
   lieber selbst mit Abstandshalter-Blöcken setzen willst. Gilt für jeden
   Abschnitt, nicht nur für das Laufband. */
.big5-section--ohne-abstand {
	padding-block: 0;
}

/* --weiss und --grau sind beide weiß. Der Name --grau stammt aus der Zeit
   vor der Design-Umstellung; Abschnitte, die noch in der Seite stehen,
   könnten ihn tragen und sollen deswegen nicht plötzlich ausscheren. */
.big5-section--weiss,
.big5-section--grau {
	background-color: var(--wp--preset--color--weiss);
}

/* Wenn ein einzelner Abschnitt doch hellgrau sein soll:
   Im Editor unter Erweitert → Zusätzliche CSS-Klasse(n) diese Klasse
   ergänzen. big5-section--weiss darf dabei stehen bleiben, denn diese
   Regel steht später in der Datei und überwiegt damit. */
.big5-section--hellgrau {
	background-color: var(--wp--preset--color--grau);
}

/* --- Trennelement ---
 *
 * Trennstriche setzt du selbst im Editor über den Block "Trennelement".
 * Hier wird nur die Linienstärke angehoben, weil die Voreinstellung von
 * WordPress für diese Seite zu zart ist.
 *
 * Die Farbe kommt über currentColor, also aus der Farbe, die du im Editor
 * rechts unter "Farbe" wählst. Dadurch bleibt die Farbwahl bei dir.
 *
 * Ausgenommen sind der Punkte-Stil, der gar keine Linie zeichnet, und die
 * Linie im Footer, die bewusst dünn bleibt.
 */
.wp-block-separator:not(.is-style-dots):not(.big5-footer__linie) {
	border-top: 0;
	border-bottom: var(--big5-separator-h) solid currentColor;
}

.big5-h2 {
	margin-bottom: 1rem;
}

.big5-kicker {
	margin-bottom: 0.25rem;
	letter-spacing: 0.02em;
	font-weight: 700;
}

.big5-lead {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: 3rem;
	font-size: var(--wp--preset--font-size--m);
}


/* ==========================================================================
   4. Hero
   ========================================================================== */

.big5-hero {
	min-height: clamp(620px, 100vh, 1020px);
	padding: 0;
}

/* Der Hero-Inhalt startet exakt auf Höhe des Logos in der Navigation.
 *
 * Das Logo sitzt am linken Rand der Inhaltsbreite. Damit der Hero-Text
 * dort ebenfalls beginnt, ist der Container um den Seitenabstand BREITER
 * als die Inhaltsbreite und bekommt denselben Abstand als Innenabstand.
 * Ergebnis: die Textkante liegt auf derselben Linie wie die Logokante.
 *
 * Cover und Hero-Gruppe nutzen bewusst das Standard-Layout ("Fluss"),
 * nicht "Inhaltsbreite". WordPress setzt bei "Inhaltsbreite" nämlich
 * margin-left/right: auto mit !important auf alle Kindelemente – damit
 * lässt sich linksbündig nicht mehr herstellen, ohne selbst !important
 * zu benutzen.
 */
.big5-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: calc(
		var(--wp--style--global--content-size) +
		2 * var(--wp--preset--spacing--40)
	);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	text-align: left;
}

/* Vertikale Lage des Hero-Textes.
 *
 * Der Cover-Block zentriert seinen Inhalt senkrecht. Bisher stand hier ein
 * padding-top – das ist als Stellschraube untauglich: Innenabstand macht den
 * Kasten höher, und ein höherer Kasten wird wieder mittig ausgerichtet. Von
 * 4rem Innenabstand kam also nur die Hälfte als Verschiebung an.
 *
 * Deshalb jetzt eine einzige, ehrliche Stellschraube: --big5-hero-hoch sagt,
 * wie weit der Text ÜBER der optischen Mitte steht. Größere Zahl = weiter
 * oben, 0 = exakt mittig. Weil die Verschiebung über position:relative läuft,
 * ändert sie nichts an der Höhe des Heros. */
.big5-hero__content {
	max-width: 42rem;
	margin-inline: 0;
	text-align: left;
	position: relative;
	top: calc(-1 * var(--big5-hero-hoch));
}

.big5-hero__content > * {
	margin-inline: 0;
	text-align: left;
}

/* Zwei Klassen, damit die Abstände die Layout-Regeln von WordPress
   überwiegen – das Fluss-Layout setzt sonst margin-block-end auf 0. */
.big5-hero__content .big5-hero__kicker {
	margin-block: 0 1.25rem;
	letter-spacing: 0.01em;
	opacity: 0.95;
}

.big5-hero__content .big5-hero__title {
	margin-block: 0 2.5rem;
	line-height: 1.12;
}

/* Beide Buttons gleich breit (Breite des längeren Textes), Block linksbündig. */
.big5-hero__buttons {
	width: max-content;
	max-width: 100%;
	gap: 0.75rem;
	align-items: stretch;
	justify-content: flex-start;
	margin-inline: 0;
}

.big5-hero__buttons .wp-block-button__link {
	display: block;
	text-align: center;
	min-width: 17rem;
}

.big5-hero__siegel {
	position: absolute;
	right: 5%;
	bottom: 14%;
	width: 5.5rem;
	margin: 0;
}

.big5-hero__siegel img {
	width: 100%;
	height: auto;
}


/* ==========================================================================
   5. Leistungen
   ========================================================================== */

.big5-gewerke {
	gap: 2rem;
	margin-bottom: 3.5rem;
}

.big5-gewerke__item {
	gap: 0.5rem;
}

.big5-gewerke__item p {
	margin: 0;
}

.big5-gewerke__label {
	font-weight: 700;
}

.big5-gewerke__icon {
	margin: 0;
	line-height: 0;
}

.big5-gewerke__icon img {
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
	display: block;
}

.big5-karten {
	gap: 1.75rem;
}

.big5-karten + .big5-karten {
	margin-top: 1.75rem;
}

/* Innenabstand bewusst 0: Die Abdunklung sitzt nicht mehr auf der ganzen
   Kachel, sondern nur als Band hinter dem Text. Das Band braucht die volle
   Kachelbreite, deshalb darf die Kachel selbst keinen Rand freihalten. */
.big5-karte {
	min-height: 22rem;
	position: relative;
	padding: 0;
	overflow: hidden;
	transition:
		transform var(--big5-anim),
		box-shadow var(--big5-anim);
}

/* Die ganzflächige Abdunklung des Cover-Blocks wird abgeschaltet.
   Der Regler "Overlay-Deckkraft" im Editor hat für diese Kacheln damit
   keine Wirkung mehr – die Farbe des Bandes steht in --big5-karte-overlay. */
.big5-karte .wp-block-cover__background {
	opacity: 0;
}

/* Beim Überfahren wächst die Kachel leicht und wirft einen Schatten.
   Die Vergrößerung ist bewusst klein – 1.025 entspricht bei einer
   630 px breiten Kachel rund 8 px je Seite. Das reicht als Reaktion und
   passt noch in den Abstand zur Nachbarkachel, ohne dass sich beide
   überlappen. Zum Anpassen: --big5-karte-zoom ganz oben in dieser Datei. */
.big5-karte:hover,
.big5-karte:focus-within {
	transform: scale(var(--big5-karte-zoom));
	box-shadow: 0 12px 30px rgba(3, 41, 103, 0.22);
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.big5-karte {
		transition: box-shadow var(--big5-anim);
	}

	.big5-karte:hover,
	.big5-karte:focus-within {
		transform: none;
	}
}

/* Klassenname doppelt: nur so überwiegt die Regel das width:auto,
   das WordPress bei gesetzter Inhaltsposition mitliefert. */
.wp-block-cover.big5-karte.big5-karte .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Icon links, Text rechts daneben.
   Der Abstand zwischen beiden ergibt sich aus dem gap – dadurch rückt
   der Text automatisch ein, ohne dass irgendwo eine feste Einrückung
   gepflegt werden muss. Ändert sich die Icon-Größe, verschiebt sich der
   Text von selbst mit. */
/* Das Band. Seine Höhe ergibt sich allein aus dem Inhalt plus Innenabstand.
   Bei langem Text wächst es, bei kurzem schrumpft es – ohne feste Höhe und
   ohne Media Query. Auf schmalen Bildschirmen, wo der Text mehr Zeilen
   braucht, passt es sich damit von selbst an. */
/* Die Höhe des Bandes wird von assets/js/scroll.js angeglichen, sobald die
   Kacheln nebeneinander stehen – als min-height, nicht als height. Dadurch
   kann das Band immer noch wachsen, wenn jemand einen längeren Text
   einträgt; angeglichen wird dann beim nächsten Laden auf den neuen
   Höchstwert. Der Text bleibt oben im Band stehen: So liegen Icon und
   Überschrift aller vier Kacheln auf einer Linie, und die zusätzliche Luft
   landet unter der letzten Textzeile, wo sie nicht auffällt. */
.big5-karte__inhalt {
	width: 100%;
	gap: var(--big5-karte-icon-gap);
	align-items: flex-start;
	padding: var(--big5-karte-band-pad);
	background-color: var(--big5-karte-band);
}

.big5-karte__icon {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

.big5-karte__icon img {
	display: block;
	width: var(--big5-karte-icon);
	height: var(--big5-karte-icon);
	object-fit: contain;
}

/* min-width: 0 erlaubt dem Text, innerhalb des Flex-Layouts umzubrechen.
   Ohne diese Zeile würde eine lange Zeile die Kachel auseinanderdrücken. */
.big5-karte__text {
	flex: 1 1 auto;
	min-width: 0;
}

.big5-karte h3 {
	margin-block: 0 0.35rem;
	line-height: 1.3;
}

.big5-karte p {
	margin: 0;
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.55;
}


/* ==========================================================================
   6. Leitbild + Kennzahl
   ========================================================================== */

.big5-werte {
	gap: 1.5rem 2rem;
	margin-bottom: 3.5rem;
}

.big5-wert {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.big5-wert::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--orange);
}

.big5-kennzahl-wrap {
	max-width: 26rem;
	margin-inline: auto;
}

/* Farbverhältnis umgedreht: früher weiße Box auf grauem Abschnitt,
   jetzt graue Box auf weißem Abschnitt. Die Fläche trägt sich damit
   selbst – Rahmen und Schatten sind überflüssig geworden. */
.big5-kennzahl {
	padding: 2.5rem 2rem;
	background-color: var(--wp--preset--color--grau);
}

.big5-kennzahl__wert {
	margin: 0;
	font-weight: 700;
	line-height: 1;
	/* Gleich breite Ziffern, damit die Zahl beim Hochzählen nicht springt. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.big5-kennzahl__label {
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-weight: 700;
}

.big5-fussnote {
	margin-top: 0.6rem;
	margin-bottom: 0;
	opacity: 0.8;
}


/* ==========================================================================
   7. Über uns
   ========================================================================== */

.big5-text-2col {
	gap: 3rem;
	margin-top: 2.5rem;
	margin-bottom: 4rem;
}

.big5-text-2col p {
	margin-block: 0 1.5rem;
	line-height: 1.75;
}

.big5-fakten {
	gap: 1.75rem;
	max-width: 56rem;
	margin-inline: auto;
	margin-bottom: 4rem;
}

/* Die Hintergrundfarbe steht bewusst hier im CSS und nicht mehr als
   Block-Einstellung im Markup. WordPress hängt an die Farbklassen aus
   dem Editor ein !important – wäre die Farbe dort gesetzt, ließe sie
   sich später nur noch im Editor ändern, nicht mehr zentral hier. */
.big5-fakt {
	height: 100%;
	padding: 1.25rem 1.5rem;
	background-color: var(--wp--preset--color--grau);
}

.big5-fakt__wert {
	margin: 0 0 0.25rem;
	line-height: 1.2;
	font-weight: 700;
}

.big5-fakt__text {
	margin: 0;
	line-height: 1.4;
}

/* Der Rahmen bleibt, nur das Bild darin wächst.
   Möglich wird das durch overflow:hidden am Rahmen plus transform am Bild:
   transform verändert nur die Darstellung, nicht den Platz, den das Bild im
   Layout einnimmt. Der Rahmen behält deshalb exakt seine Maße und schneidet
   den überstehenden Teil ab. */
.big5-teamfoto {
	margin: 0;
	overflow: hidden;
}

.big5-teamfoto img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--big5-zoom-anim);
}

.big5-teamfoto:hover img {
	transform: scale(var(--big5-teamfoto-zoom));
}

.big5-bildtext {
	margin-top: 1rem;
	line-height: 1.6;
}


/* ==========================================================================
   8. Team
   ========================================================================== */

/* Raster statt Flexbox – nicht aus Vorliebe, sondern aus Not: WordPress
   schreibt seinen Spalten ab 782px Breite ein "flex-wrap: nowrap !important"
   vor. Solange die Reihe Flexbox ist, gibt es deshalb keinen Zeilenumbruch,
   egal wie viele Personen darin stehen – sie werden nur immer schmaler.
   Dagegen hilft keine Spezifität, nur ein eigenes !important, und das ist
   in diesem Theme ausgeschlossen. Im Raster ist flex-wrap bedeutungslos,
   und das display:flex selbst trägt kein !important.
   minmax(0, 1fr) statt 1fr, damit eine lange E-Mail-Adresse die Spalte
   nicht auseinanderdrücken kann. */
.big5-team.big5-team {
	display: grid;
	grid-template-columns: repeat(calc(var(--big5-team-spalten) * 2), minmax(0, 1fr));
	gap: var(--big5-team-gap);
	margin-top: 2.5rem;
}

/* Doppelt so viele Rasterspalten wie Personen pro Zeile, jede Person über
   zwei davon. Klingt nach Umweg, ist aber der einzige Weg, eine letzte
   Zeile mittig zu setzen: Drei Personen in vier Spalten müssen um eine
   HALBE Spalte einrücken, und eine halbe Spalte gibt es nur, wenn man die
   Spalten vorher halbiert.
   Die Breite ändert sich dadurch nicht. Eine Person belegt zwei Unter-
   spalten plus den Zwischenraum dazwischen – nachgerechnet ergibt das
   exakt dieselbe Breite wie eine ganze Spalte im einfachen Raster.
   Eingerückt wird die letzte Zeile von assets/js/scroll.js: Nur dort ist
   bekannt, wie viele Personen tatsächlich drinstehen. Ohne JavaScript
   steht sie linksbündig – also genau so wie bisher, nichts bricht. */
.big5-team.big5-team > .wp-block-column {
	grid-column-end: span 2;
}

/* Hier wächst das ganze Bild samt Rahmen – anders als beim Teamfoto oben,
   wo der Rahmen stehen bleibt. Deshalb kein overflow:hidden. */
.big5-team__foto {
	margin: 0 0 0.75rem;
	line-height: 0;
	transition: transform var(--big5-zoom-anim);
}

.big5-team__foto:hover {
	transform: scale(var(--big5-portrait-zoom));
	/* Damit das vergrößerte Portrait über den Nachbarn liegt und nicht
	   von ihnen angeschnitten wird. */
	position: relative;
	z-index: 1;
}

/* Fester Bildausschnitt, damit alle Portraits gleich hoch sind und die
   Namen darunter auf einer Linie liegen – auch wenn ein Foto mal anders
   proportioniert hochgeladen wird. Bei quadratischen Vorlagen wird
   dadurch nichts beschnitten. */
.big5-team__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--big5-team-ratio);
	object-fit: cover;
	display: block;
}

.big5-team__name {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
}

.big5-team__rolle {
	margin: 0;
	line-height: 1.3;
}

.big5-team__mail {
	margin: 0.15rem 0 0;
	line-height: 1.3;
	overflow-wrap: anywhere;
}


/* ==========================================================================
   9. Einblicke / Galerie
   ========================================================================== */

.big5-galerie {
	gap: 1.75rem;
}

.big5-galerie__bild {
	margin: 0;
}

.big5-galerie__bild img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--big5-galerie-ratio);
	object-fit: cover;
	display: block;
}

.big5-galerie__bild figcaption {
	margin-top: 0.6rem;
	text-align: left;
}


/* ==========================================================================
   10. Öffnungszeiten + Kontakt
   ========================================================================== */

.big5-info-2col {
	gap: 3rem;
}

.big5-info-2col .big5-h2 {
	margin-bottom: 2.5rem;
}

.wp-block-table.big5-zeiten {
	margin: 0;
}

.big5-zeiten table {
	border-collapse: collapse;
	width: 100%;
	max-width: 30rem;
}

.big5-zeiten td {
	border: 0;
	padding: 0.35rem 1rem 0.35rem 0;
	color: var(--wp--preset--color--blau-hell);
	vertical-align: top;
}

.big5-zeiten td:first-child {
	width: 9rem;
}

/* Der heutige Tag wird per JS mit .is-heute markiert. */
.big5-zeiten tr.is-heute td:first-child {
	color: var(--wp--preset--color--orange);
	font-weight: 700;
}

/* Hervorhebung nur über die Schriftstärke, nicht über eine dunklere
   Farbe. Fetter Text bleibt im normalen Blau. */
.big5-zeiten tr.is-heute td:last-child {
	font-weight: 700;
}

.big5-zeiten__hinweis {
	margin-top: 2rem;
	line-height: 1.7;
}

.big5-zeiten__hinweis a {
	color: var(--wp--preset--color--orange);
}

.big5-kontaktliste {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.big5-kontakt__zeile {
	gap: 0.85rem;
	align-items: flex-start;
}

.big5-kontakt__icon {
	margin: 0;
	line-height: 0;
	flex: 0 0 auto;
	padding-top: 0.15rem;
}

.big5-kontakt__icon img {
	width: 1.4rem;
	height: 1.4rem;
	object-fit: contain;
	display: block;
}

.big5-kontakt__zeile p {
	margin: 0;
	line-height: 1.45;
}

.big5-kontakt__label {
	font-weight: 700;
}


/* ==========================================================================
   11. Schwebender "anrufen"-Button
   ========================================================================== */

/* Der Schatten besteht aus drei Ebenen:
   1. ein blauer Tiefenschatten – der hebt den Button von der Seite ab
   2. ein enger oranger Schein direkt am Rand
   3. ein weiter, schwacher oranger Schein als Streulicht
   Wer den Glow stärker oder schwächer will, ändert die letzten Zahlen
   der beiden orangen Zeilen (Deckkraft, 0 bis 1). */
.big5-call {
	position: fixed;
	right: 2.5rem;
	bottom: 2.5rem;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.8rem 2.5rem;
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--weiss);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.2;
	text-decoration: none;
	box-shadow:
		0 6px 18px rgba(3, 41, 103, 0.18),
		0 0 20px rgba(246, 139, 30, 0.45),
		0 0 46px rgba(246, 139, 30, 0.22);
	transition:
		background-color var(--big5-anim),
		box-shadow var(--big5-anim),
		transform var(--big5-anim);
}

.big5-call:hover,
.big5-call:focus {
	background-color: #d76f08;
	color: var(--wp--preset--color--weiss);
	box-shadow:
		0 10px 24px rgba(3, 41, 103, 0.22),
		0 0 26px rgba(246, 139, 30, 0.65),
		0 0 58px rgba(246, 139, 30, 0.32);
}


/* ==========================================================================
   12. Footer
   ========================================================================== */

.big5-footer {
	padding-block: 3.5rem 1.5rem;
}

/* Im Footer ist nur die Spaltenüberschrift fett – alles andere normal.
   Ohne diese Regel erbt die mittlere Spalte die Stärke der Überschrift. */
.big5-footer p,
.big5-footer td,
.big5-footer a {
	font-weight: 400;
}

.big5-footer .big5-footer__titel {
	font-weight: 700;
}

.big5-footer a {
	color: var(--wp--preset--color--weiss);
}

.big5-footer a:hover {
	color: var(--wp--preset--color--orange);
}

.big5-footer__top {
	gap: 3rem;
}

.wp-block-site-logo.big5-footer__logo {
	margin-bottom: 1.5rem;
	line-height: 0;
}

.wp-block-site-logo.big5-footer__logo img {
	display: block;
	width: auto;
	height: 68px;
	max-width: none;
}

.big5-footer__claim,
.big5-footer__text {
	margin: 0;
	line-height: 1.7;
}

.big5-footer__titel {
	margin: 0 0 0.6rem;
	font-weight: 700;
}

.wp-block-table.big5-footer__zeiten {
	margin: 0;
}

.big5-footer__zeiten table {
	border-collapse: collapse;
	width: 100%;
}

.big5-footer__zeiten td {
	border: 0;
	padding: 0.1rem 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--weiss);
}

.big5-footer__zeiten td:last-child {
	text-align: right;
}

.big5-footer__zeiten tr.is-heute td {
	color: var(--wp--preset--color--orange);
}

.big5-footer__linie {
	margin-block: 2.5rem 1.25rem;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	background: none;
	height: 0;
}

.big5-footer__bottom {
	gap: 1rem;
}

.big5-footer__bottom p {
	margin: 0;
}

.big5-footer__recht a {
	text-decoration: none;
}


/* ==========================================================================
   13. Unterseiten (Impressum, Datenschutz, AGB)
   ========================================================================== */

.big5-subpage {
	padding-top: calc(var(--big5-nav-h) + 3rem);
	padding-bottom: 6rem;
}

/* Fehlerseite (404). Sie hat wenig Inhalt – ohne Mindesthöhe rutschte der
   Footer auf großen Bildschirmen bis unter die Navigation und die Seite sähe
   nach Panne statt nach Hinweis aus. Der Abstand zwischen den Absätzen kommt
   aus den Blockabständen, deshalb steht hier nur diese eine Regel. */
.big5-404 {
	min-height: 60vh;
}

.big5-subpage__titel {
	margin-bottom: 2rem;
}


/* ==========================================================================
   14. Mobil – vorläufige Notversorgung
   Die finale Mobil-Ansicht bauen wir in einem eigenen Schritt.
   ========================================================================== */

@media (max-width: 599px) {
	:root {
		--wp--style--global--content-size: calc(100vw - 2.5rem);
		--wp--style--global--wide-size: calc(100vw - 2.5rem);
		--big5-nav-h: 76px;
		--big5-nav-h-scrolled: 64px;

		/* Auf dem Handy braucht der Rhythmus weniger Luft. Nur die
		   Variable wird überschrieben, nicht die Regel darunter – der
		   Abstand bleibt an einer einzigen Stelle definiert. */
		--big5-section-pad: 3.5rem;
	}

	.big5-at-top .wp-block-site-logo.big5-logo img {
		height: 56px;
	}

	.wp-block-site-logo.big5-logo img {
		height: 42px;
	}

	.big5-nav__tel {
		display: none;
	}

	.big5-hero__buttons,
	.big5-hero__buttons .wp-block-button__link {
		width: 100%;
		min-width: 0;
	}

	/* Auf 362px Kachelbreite sind 2rem Rand pro Seite Luxus, den der Text
	   besser gebrauchen kann. Auf dem Tablet ist die Kachel fast 500px
	   breit – dort bleibt es bei 2rem. */
	.big5-karte {
		--big5-karte-band-pad: 1.5rem 1.25rem;
	}

	.big5-hero__siegel {
		width: 4rem;
		right: 1.25rem;
		bottom: 8%;
	}

	/* Eine Person pro Zeile. Das stand hier bisher NICHT – gestapelt hat
	   bis jetzt WordPress selbst, über ein flex-basis: 100% !important auf
	   den Spalten. Mit dem Wechsel auf Raster greift das nicht mehr, und
	   ohne diese Zeile stünden hochkant vier Personen nebeneinander. Was
	   vorher stillschweigend funktionierte, muss jetzt dastehen. */
	.big5-team {
		--big5-team-spalten: 1;
	}

	/* Die Pfeile der Bildergalerie liegen im Rahmen, nicht in der Bahn.
	   Die Variablen müssen deshalb an beiden Elementen überschrieben
	   werden – sonst rechnet der Rahmen weiter mit der Desktop-Anzahl
	   sichtbarer Bilder, kommt auf eine viel zu kleine Bildhöhe und
	   setzt die Pfeile entsprechend zu weit oben ab. */
	.big5-slider-wrap,
	.big5-slider {
		--big5-slider-sichtbar: 1.15;
		--big5-slider-pfeil: 2.5rem;
	}
}


/* ==========================================================================
   15. Buttons – Hover-Verhalten für die gesamte Seite

   Bewusst am Ende der Datei: so überwiegt diese Regel alle vorherigen
   Button-Definitionen, ohne dass irgendwo die Spezifität hochgeschraubt
   werden muss.

   Zwei Klassen im Selektor, weil WordPress sie je nach Block unterschiedlich
   vergibt: .wp-block-button__link am klassischen Button-Block,
   .wp-element-button zusätzlich an Buttons aus anderen Blöcken
   (Suche, Datei, Kommentarformular, später auch das Kontaktformular).
   ========================================================================== */

.wp-element-button,
.wp-block-button__link,
.big5-form__submit,
.big5-call {
	transition:
		background-color var(--big5-anim),
		color var(--big5-anim),
		box-shadow var(--big5-anim),
		transform var(--big5-anim);
}

.wp-element-button:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.big5-form__submit:hover,
.big5-form__submit:focus-visible,
.big5-call:hover,
.big5-call:focus-visible {
	transform: translateY(-2px);
}

/* Beim Klicken wieder absetzen – das gibt dem Druck ein Gefühl. */
.wp-element-button:active,
.wp-block-button__link:active,
.big5-call:active {
	transform: translateY(0);
	transition-duration: 0.05s;
}

/* Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt
   Farbwechsel und Glow, aber keine Bewegung. */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.big5-call {
		transition:
			background-color var(--big5-anim),
			color var(--big5-anim),
			box-shadow var(--big5-anim);
	}

	.wp-element-button:hover,
	.wp-element-button:focus-visible,
	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible,
	.big5-call:hover,
	.big5-call:focus-visible {
		transform: none;
	}
}


/* ==========================================================================
   16. Einblend-Animation beim Scrollen

   Vergabe im Editor über "Zusätzliche CSS-Klasse(n)":

     big5-reveal      Element blendet ein und fährt dabei von unten hoch
     big5-delay-1     zusätzlich 0,15 s später starten
     big5-delay-2     zusätzlich 0,30 s später starten
     big5-delay-3     zusätzlich 0,45 s später starten
     big5-delay-4     zusätzlich 0,60 s später starten

   Die Verzögerungen sind für nebeneinanderstehende Elemente gedacht –
   vier Kacheln, die nacheinander erscheinen, wirken lebendiger als vier,
   die gleichzeitig aufploppen. Immer zusammen mit big5-reveal angeben,
   also z. B.:  big5-reveal big5-delay-2

   Der Effekt hängt an der Klasse .big5-js am <html>-Element. Die setzt
   functions.php per JavaScript. Ist JavaScript aus, bleibt alles sichtbar
   und es passiert schlicht nichts – Inhalte verschwinden nie.
   ========================================================================== */

:root {
	--big5-reveal-shift: 28px;  /* wie weit das Element von unten hochfährt */
	--big5-reveal-time: 0.7s;   /* Dauer der Animation */
	--big5-reveal-delay: 0.1s;  /* Grundverzögerung nach dem Auslösen */
}

.big5-js .big5-reveal {
	opacity: 0;
	transform: translateY(var(--big5-reveal-shift));
	transition:
		opacity var(--big5-reveal-time) ease,
		transform var(--big5-reveal-time) cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--big5-reveal-delay);
	will-change: opacity, transform;
}

.big5-js .big5-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.big5-js .big5-reveal.big5-delay-1 {
	transition-delay: calc(var(--big5-reveal-delay) + 0.15s);
}

.big5-js .big5-reveal.big5-delay-2 {
	transition-delay: calc(var(--big5-reveal-delay) + 0.3s);
}

.big5-js .big5-reveal.big5-delay-3 {
	transition-delay: calc(var(--big5-reveal-delay) + 0.45s);
}

.big5-js .big5-reveal.big5-delay-4 {
	transition-delay: calc(var(--big5-reveal-delay) + 0.6s);
}

/* Im Editor nicht animieren – sonst bearbeitet man unsichtbare Blöcke. */
.editor-styles-wrapper .big5-reveal {
	opacity: 1;
	transform: none;
}

/* Reduzierte Bewegung: Inhalte sind da, aber sie bewegen sich nicht. */
@media (prefers-reduced-motion: reduce) {
	.big5-js .big5-reveal,
	.big5-js .big5-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   17. Standortkarte

   Bewusst nur zwei Ebenen: der Abschnitt und darin die Karte. Jede weitere
   Hülle bringt eine eigene Hintergrundfarbe ins Spiel, die verdecken kann,
   was darunter liegt.

   Sobald Real Cookie Banner aktiv ist, ersetzt das Plugin das iframe durch
   seinen Platzhalter. Beide füllen denselben Rahmen aus, damit die Seite
   beim Zustimmen nicht springt.
   ========================================================================== */

.big5-map {
	position: relative;
	aspect-ratio: var(--big5-map-ratio);
	min-height: 220px;
	overflow: hidden;
}

/* Gilt für das iframe genauso wie für den Platzhalter des Cookie-Banners. */
.big5-map > * {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
}


/* ==========================================================================
   18. Kontaktformular (Contact Form 7)

   Damit das hier greift, muss das Formular die Struktur aus der
   Setup-Anleitung verwenden. Contact Form 7 gibt sonst je nach Vorlage
   ganz unterschiedliches HTML aus.

   Der äußere Kasten heißt .big5-formular und wird im Editor der Gruppe
   zugewiesen, in der das Formular steckt. Er zentriert und begrenzt die
   Breite – deshalb klebt das Formular danach nicht mehr am Rand.
   ========================================================================== */

/* Bewusst ohne Hintergrundfarbe: Die Farbe des Kastens legst du im Editor
   an der Gruppe fest. Stünde sie hier, würde deine Einstellung im Editor
   sie ohnehin überstimmen – WordPress hängt an Farbklassen aus dem Editor
   ein !important. Zwei Quellen für dieselbe Farbe führen nur zu Rätseln. */
.big5-formular {
	max-width: var(--big5-form-breite);
	margin-inline: auto;
	padding: var(--big5-form-pad);
}

/* --- Feldraster ---
   Zwei Spalten für die ersten vier Felder, die Nachricht über beide.
   Unter 600px fällt alles automatisch auf eine Spalte zurück. */
.big5-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.75rem;
}

.big5-form__field--voll {
	grid-column: 1 / -1;
}

@media (max-width: 599px) {
	.big5-form__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Beschriftung --- */
.big5-form__field {
	display: block;
}

.big5-form__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--blau-hell);
}

/* Contact Form 7 verpackt jedes Feld in ein <span>. Ohne display:block
   säße das Eingabefeld in einer Textzeile statt als eigener Block. */
.big5-formular .wpcf7-form-control-wrap {
	display: block;
}

/* --- Eingabefelder ---
   Hellgrau und randlos auf dem weißen Kasten. Die Schrift wird geerbt,
   sonst nähme der Browser seine eigene und die Felder fielen aus dem
   Schriftbild der Seite. */
.big5-formular input[type="text"],
.big5-formular input[type="email"],
.big5-formular input[type="tel"],
.big5-formular input[type="url"],
.big5-formular input[type="number"],
.big5-formular input[type="date"],
.big5-formular select,
.big5-formular textarea {
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	outline: 0;
	background-color: var(--wp--preset--color--grau);
	padding: var(--big5-form-feld-pad);
	font: inherit;
	color: var(--wp--preset--color--blau-dunkel);
	transition: box-shadow var(--big5-anim);
}

.big5-formular textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Beim Hineinklicken eine orange Kante statt des Browser-Rahmens.
   inset-Schatten statt border, damit das Feld nicht um 2px springt. */
.big5-formular input:focus,
.big5-formular select:focus,
.big5-formular textarea:focus {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--orange);
}

.big5-formular ::placeholder {
	color: rgba(1, 103, 171, 0.55);
	opacity: 1;
}

/* --- Auswahlfeld ---
   appearance:none nimmt dem Feld das Aussehen des Betriebssystems, sonst
   ließe es sich nicht an die übrigen Felder angleichen. Dadurch fällt
   auch der System-Pfeil weg – deshalb hier ein schlichter eigener.
   Ohne ihn wäre nicht erkennbar, dass sich das Feld aufklappen lässt. */
.big5-formular select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	background-image: var(--big5-icon-pfeil);
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem auto;
	cursor: pointer;
}

/* --- Hinweistext unter den Feldern --- */
.big5-form__hinweis {
	margin-block: 1rem 1.75rem;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.6;
	color: var(--wp--preset--color--blau-hell);
}

.big5-form__hinweis a {
	color: var(--wp--preset--color--orange);
	text-decoration: underline;
}

/* --- Absende-Button --- */
.big5-form__aktion {
	text-align: center;
}

.big5-formular .big5-form__submit {
	display: inline-block;
	border: 0;
	border-radius: 0;
	padding: 0.85rem 2.5rem;
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--weiss);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.big5-formular .big5-form__submit:hover,
.big5-formular .big5-form__submit:focus-visible {
	background-color: #d76f08;
}

/* --- Meldungen von Contact Form 7 --- */
.big5-formular .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--xs);
	color: #c0392b;
}

.big5-formular .wpcf7-response-output {
	margin: 1.5rem 0 0;
	border: 0;
	border-left: var(--big5-separator-h) solid var(--wp--preset--color--orange);
	padding: 0.85rem 1.25rem;
	background-color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--blau-hell);
}

.big5-formular .wpcf7-spinner {
	margin: 0 0 0 0.75rem;
}


/* ==========================================================================
   19. Terminbuchung (Microsoft Bookings)

   Anders als bei der Karte hier bewusst KEIN Seitenverhältnis, sondern eine
   feste Höhe: Bookings ist eine mehrstufige Oberfläche, deren Inhalt sich
   je nach Schritt ändert. Ein iframe kann seine Höhe nicht selbst an den
   Inhalt anpassen – fällt der Rahmen zu knapp aus, muss der Besucher
   innerhalb des Rahmens scrollen. Deshalb großzügig.
   ========================================================================== */

.big5-termin__kopf {
	gap: var(--big5-termin-icon-gap);
	align-items: center;
	margin-bottom: 2.5rem;
}

.big5-termin__icon {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

.big5-termin__icon img {
	display: block;
	width: var(--big5-termin-icon);
	height: var(--big5-termin-icon);
	object-fit: contain;
}

.big5-termin__text .big5-h2 {
	margin-bottom: 0.25rem;
}

.big5-termin__lead {
	margin: 0;
}

.big5-booking {
	background-color: var(--wp--preset--color--grau);
}

/* Gilt für das iframe genauso wie für den Platzhalter des Cookie-Banners,
   damit die Seite beim Zustimmen nicht springt. */
.big5-booking > * {
	display: block;
	width: 100%;
	height: var(--big5-booking-h);
	border: 0;
	margin: 0;
}


/* ==========================================================================
   20. Scroll-Hinweis im Hero

   Wird von functions.php direkt vor </body> ausgegeben, nur auf der
   Startseite. position:fixed bezieht sich damit auf das Browserfenster –
   der Hinweis sitzt immer am unteren Bildschirmrand, unabhängig davon,
   wie hoch der Hero tatsächlich ist.

   Er verschwindet, sobald gescrollt wird. Gesteuert über dieselbe Klasse
   .big5-at-top am <body>, die auch die Nav-Bar schaltet.
   ========================================================================== */

.big5-scrollhint {
	position: fixed;
	left: 50%;
	bottom: var(--big5-scrollhint-bottom);
	transform: translateX(-50%);
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0;
	/* Unsichtbar heißt auch: nicht anklickbar. Sonst läge ein
	   durchsichtiger Link über dem Inhalt darunter. */
	pointer-events: none;
	transition: opacity var(--big5-anim), color var(--big5-anim);
}

.big5-at-top .big5-scrollhint {
	opacity: 1;
	pointer-events: auto;
}

.big5-scrollhint:hover,
.big5-scrollhint:focus-visible {
	color: var(--wp--preset--color--orange);
}

.big5-scrollhint__pfeil {
	display: block;
	width: var(--big5-scrollhint-size);
	height: calc(var(--big5-scrollhint-size) * 0.58);
	background-color: currentColor;
	-webkit-mask-image: var(--big5-icon-chevron);
	mask-image: var(--big5-icon-chevron);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	animation: big5-nicken var(--big5-scrollhint-tempo) ease-in-out infinite;
}

/* Langsames Auf und Ab. Bewusst eine kleine Strecke – eine große Bewegung
   zieht Aufmerksamkeit vom Inhalt ab, statt nur einen Hinweis zu geben. */
@keyframes big5-nicken {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(var(--big5-scrollhint-weg));
	}
}

@media (prefers-reduced-motion: reduce) {
	.big5-scrollhint__pfeil {
		animation: none;
	}
}


/* Wer im Betriebssystem reduzierte Bewegung eingestellt hat, sieht die
   Bilder ohne Zoom. */
@media (prefers-reduced-motion: reduce) {
	.big5-teamfoto:hover img,
	.big5-team__foto:hover {
		transform: none;
	}
}


/* ==========================================================================
   21. Bildergalerie (Slider)

   Bewusst kein Karussell-Plugin und kein nachgebautes Scrollen per
   JavaScript, sondern echtes Scrollen des Browsers mit Einrastpunkten
   (scroll-snap). Vorteile: Wischen auf dem Handy funktioniert von selbst,
   Tastaturbedienung ebenfalls, und die Galerie bleibt benutzbar, falls
   das JavaScript einmal nicht lädt – dann ist sie eben nur ohne Pfeile.

   Pfeile und Punkte baut assets/js/scroll.js automatisch. Du fügst im
   Editor nur Bilder hinzu, um den Rest musst du dich nicht kümmern.
   ========================================================================== */

/* Die Maße stehen bewusst auf Umhüllung UND Galerie. CSS-Variablen
   vererben sich nach unten – so kennen auch die Pfeile, die in der
   Umhüllung liegen, die Bildbreite und können sich auf Bildmitte
   setzen. Ständen sie nur an der Galerie, wäre der Wert für die Pfeile
   unbekannt, die Berechnung ungültig und der Pfeil würde nach unten
   aus dem Bild rutschen. */
.big5-slider-wrap,
.big5-slider {
	/* Abstand vom Bildschirmrand bis zur Inhaltskante. Dadurch beginnt das
	   erste Bild exakt dort, wo auch Überschrift und Text beginnen –
	   während die Galerie nach rechts über die Inhaltsbreite hinausläuft. */
	--big5-slider-offset: max(
		(100vw - var(--wp--style--global--content-size)) / 2,
		var(--wp--preset--spacing--40)
	);
	/* Sichtbar ist der Bereich von der linken Inhaltskante bis zum rechten
	   Bildschirmrand – also nur EIN Seitenabstand, nicht zwei. Der rechte
	   Innenabstand liegt außerhalb des Blickfelds und wird erst beim
	   Weiterblättern erreicht. */
	--big5-slider-viewport: calc(100vw - var(--big5-slider-offset));
	--big5-slider-breite: calc(
		(var(--big5-slider-viewport) -
			(var(--big5-slider-sichtbar) - 1) * var(--big5-slider-gap)) /
		var(--big5-slider-sichtbar)
	);
}

.big5-slider {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--big5-slider-gap);
	align-items: flex-start;
	margin-top: 1rem;
	padding-inline: var(--big5-slider-offset);

	/* Weitergeblättert wird ausschließlich über die Pfeile und Punkte.
	   overflow:hidden verhindert freies Scrollen von Hand – programmgesteuert
	   lässt sich der Bereich trotzdem verschieben, genau das tun die Pfeile.
	   Ohne diese Zeile könnte eine leicht schräge Trackpad-Geste versehentlich
	   die Galerie erwischen statt die Seite zu scrollen. */
	overflow-x: hidden;
	scroll-padding-inline-start: var(--big5-slider-offset);

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.big5-slider::-webkit-scrollbar {
	display: none;
}

/* Auf Geräten ohne Maus – also Touch – bleibt das Wischen erlaubt.
   Dort ist es die natürliche Geste, und es gibt kein Trackpad, das
   sich verirren könnte. Abgefragt wird die Eingabeart, nicht die
   Bildschirmbreite: ein schmales Fenster am Rechner ist kein Handy. */
@media (hover: none) {
	.big5-slider {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
	}
}

.big5-slider__bild {
	flex: 0 0 var(--big5-slider-breite);
	margin: 0;
	scroll-snap-align: start;
}

/* Zeigt an, dass hier nichts von Hand geschoben wird. */
@media (hover: hover) {
	.big5-slider {
		cursor: default;
	}
}

.big5-slider__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--big5-slider-ratio);
	object-fit: cover;
}

.big5-slider__bild figcaption {
	margin-top: 0.6rem;
	text-align: left;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--blau-hell);
}

/* --- Umhüllung ---
   Wird vom JavaScript um die Galerie gelegt und dient den Pfeilen als
   Bezugsrahmen. Ohne sie müssten die Pfeile sich am Abschnitt ausrichten,
   der oben und unten 7rem Innenabstand hat – sie säßen dann zu tief. */
.big5-slider-wrap {
	position: relative;
}

/* --- Punkte unterhalb der Galerie, mittig --- */
.big5-slider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.big5-slider-nav__punkte {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.big5-slider-nav__punkt {
	width: var(--big5-slider-punkt);
	height: var(--big5-slider-punkt);
	border: 0;
	border-radius: 0;
	padding: 0;
	background-color: var(--wp--preset--color--grau);
	cursor: pointer;
	transition: background-color var(--big5-anim);
}

.big5-slider-nav__punkt:hover {
	background-color: rgba(246, 139, 30, 0.5);
}

.big5-slider-nav__punkt.is-aktiv {
	background-color: var(--wp--preset--color--orange);
}

/* --- Pfeile: links und rechts über den Bildern ---
   Senkrecht auf Bildmitte, nicht auf Mitte der Kachel: Die Bildbeschreibung
   sitzt unter dem Bild und würde den Pfeil sonst nach unten ziehen. Die
   Bildhöhe ergibt sich aus Bildbreite geteilt durch das Seitenverhältnis. */
.big5-slider-pfeil {
	position: absolute;
	top: calc(
		var(--big5-slider-breite) / var(--big5-slider-ratio-zahl) / 2
	);
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--big5-slider-pfeil);
	height: var(--big5-slider-pfeil);
	border: 0;
	border-radius: 0;
	padding: 0;
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--weiss);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(3, 41, 103, 0.25);
	transition: background-color var(--big5-anim), opacity var(--big5-anim);
}

/* Beide Pfeile sitzen am Bildschirmrand, nicht an der Inhaltskante.
   Der linke müsste sonst beim Weiterblättern mitwandern – das ginge nur
   mit JavaScript, das die Position laufend an den Scrollstand koppelt.
   Am Rand steht er einfach still und ist immer dort, wo man ihn sucht. */
.big5-slider-pfeil--zurueck {
	left: var(--big5-slider-pfeil-abstand);
}

.big5-slider-pfeil--vor {
	right: var(--big5-slider-pfeil-abstand);
}

.big5-slider-pfeil::before {
	content: "";
	width: 45%;
	height: 45%;
	background-color: currentColor;
	-webkit-mask-image: var(--big5-icon-chevron);
	mask-image: var(--big5-icon-chevron);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Derselbe Winkel wie beim Scroll-Hinweis, nur gedreht. */
.big5-slider-pfeil--zurueck::before {
	transform: rotate(90deg);
}

.big5-slider-pfeil--vor::before {
	transform: rotate(-90deg);
}

.big5-slider-pfeil:hover:not(:disabled) {
	background-color: #d76f08;
}

/* Am Anfang bzw. Ende ausgegraut statt versteckt – ein Pfeil, der
   verschwindet, lässt die Steuerung springen. */
.big5-slider-pfeil:disabled {
	opacity: 0.25;
	cursor: default;
}

/* Die Handy-Werte der Galerie stehen bewusst NICHT hier, sondern oben im
   gemeinsamen Handy-Block bei den übrigen mobilen Anpassungen – dort
   müssen sie an .big5-slider-wrap und .big5-slider gleichzeitig gesetzt
   werden, damit Bahn und Pfeile mit derselben Bildhöhe rechnen. */


/* ==========================================================================
   22. Markenlaufband
   ========================================================================== */

/* Der Kasten schneidet ab, was seitlich aus dem Bild läuft. Ohne ihn
   würde die Bahn die ganze Seite waagerecht scrollbar machen. */
/* Hier stand einmal width: 100% – das war falsch und hat rechts einen
   Streifen offen gelassen.
   Warum: "alignfull" wirkt nicht über die Breite, sondern über negative
   Außenabstände. WordPress zieht den Block links und rechts um je das
   Seitenpolster der Seite (1,25rem) nach außen und lässt die Breite auf
   auto stehen, damit er den gewonnenen Platz auch ausfüllt. Steht die
   Breite dagegen fest auf 100%, bezieht sie sich auf den Inhaltsbereich
   des Elternelements – also auf Bildschirmbreite MINUS beide Polster.
   Der negative Abstand links schiebt den Block dann bis an den linken
   Rand, rechts fehlen ihm aber beide Polster: 40 Pixel Lücke.
   Deshalb: keine Breite setzen. */
.big5-marken-wrap {
	overflow: hidden;
	padding-block: var(--big5-marken-pad);

	/* Weiche Kanten links und rechts. Ein Markenname, der an der
	   Bildschirmkante hart abgeschnitten wird, sieht nach Fehler aus –
	   ein Auslaufen nach nichts sieht nach Absicht aus.
	   --big5-marken-blende auf 0 setzen ergibt die harte Kante. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--big5-marken-blende), #000 calc(100% - var(--big5-marken-blende)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--big5-marken-blende), #000 calc(100% - var(--big5-marken-blende)), transparent 100%);
}

/* Die Bahn enthält dieselbe Markenreihe mehrfach hintereinander.
   Die Kopien legt JavaScript an – siehe assets/js/scroll.js. */
.big5-marken-bahn {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation: big5-marken-lauf var(--big5-marken-dauer, 40s) linear infinite;
}

/* Verschoben wird um exakt eine Reihenlänge. Weil direkt dahinter
   dieselbe Reihe noch einmal steht, ist der Sprung zurück auf null
   nicht zu sehen – daraus entsteht die Endlosigkeit. */
@keyframes big5-marken-lauf {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-1 * var(--big5-marken-strecke, 0px)), 0, 0);
	}
}

/* Doppelter Klassenname: die Umbruch- und Abstandsregeln, die WordPress
   für Flex-Gruppen erzeugt, dürfen hier nicht gewinnen. Ein Umbruch
   würde das Band zerreißen, ein anderer Abstand die Naht sichtbar
   machen. flex: 0 0 auto verhindert, dass die Reihe zusammengestaucht
   wird – ihre gemessene Breite ist die Strecke der Animation. */
.big5-marken.big5-marken {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: var(--big5-marken-abstand);
	align-items: baseline;
	margin: 0;
}

/* Zeilenhöhe bewusst 1.25 und nicht knapper: Ubuntu belegt vom
   Großbuchstaben-Oberrand bis zur Unterlänge rund 1.12 der Schriftgröße.
   Bei 1.1 ragen Ober- und Unterlängen minimal aus der Zeile heraus – und
   weil der Kasten seitlich abschneiden muss, schneidet er sie oben und
   unten gleich mit ab. Die 1.25 sind der Grund, warum das Band trotz
   --big5-marken-pad: 0 nicht hauteng um die Buchstaben sitzt. */
.big5-marke {
	margin: 0;
	white-space: nowrap;
	font-weight: 700;
	line-height: 1.25;
}

/* --- Das Band ohne Bewegung ---
 *
 * Solange die Reihe direktes Kind des Kastens ist, hat JavaScript sie nicht
 * in eine Bahn gepackt. Das passiert in genau zwei Fällen: kein JavaScript,
 * oder der Besucher hat im Betriebssystem "Animationen reduzieren"
 * eingeschaltet. Letzteres ist Absicht – ein endlos laufendes Band ist
 * genau das, was dabei aufhören soll.
 *
 * Aufhören heißt aber nicht "unfertig aussehen". Hier stand vorher nur ein
 * padding-inline-start von 1,25rem. Der Kommentar behauptete "Inhaltskante",
 * der Wert war aber bloß das Seitenpolster der Seite – die Marken klebten
 * also am Bildschirmrand, während die Überschrift darüber auf der
 * Inhaltskante stand. Vier Namen linksbündig am Rand, rechts daneben nichts:
 * das sah nach Fehler aus, obwohl es das gewollte Verhalten war.
 *
 * Jetzt beginnt die Reihe wirklich auf der Inhaltskante, endet auch dort
 * und darf umbrechen. Damit liest sie sich als das, was sie ist: eine
 * Aufzählung der geführten Marken. Dieselbe Rechnung wie bei der
 * Bildergalerie – ein Wert, zwei Verwendungen wären hier falsch gewesen. */
.big5-marken-wrap > .big5-marken.big5-marken {
	flex-wrap: wrap;
	row-gap: 0.75rem;
	padding-inline: max(
		(100vw - var(--wp--style--global--content-size)) / 2,
		var(--wp--preset--spacing--40)
	);
}

/* Sicherheitsnetz: Wer Bewegung im System abgeschaltet hat, bekommt
   eine stehende Reihe. */
@media (prefers-reduced-motion: reduce) {
	.big5-marken-bahn {
		animation: none;
	}
}


/* ==========================================================================
   23. Handy – beide Lagen und Querformat

   Hochkant wird über die Breite erkannt (bis 599px), quer über die geringe
   Höhe. Das ist der Kern des Problems, das im Querformat auftrat: Ein
   iPhone liegend ist rund 874px BREIT – damit greift keine einzige Regel,
   die an "max-width: 599px" hängt. Die Seite hielt das Gerät schlicht für
   einen Desktop, obwohl nur 402px Höhe zur Verfügung standen.
   ========================================================================== */

/* --- Anruf-Knopf: auf jedem Handy nur das Symbol ---
 *
 * Steht in einer eigenen, mit Komma verknüpften Abfrage (= "oder"), damit
 * die Regeln nur einmal existieren und nicht in zwei Blöcken gepflegt
 * werden müssen.
 *
 * Das Wort "Anrufen" bleibt im Quelltext stehen: Es ist der Name des
 * Knopfes für Screenreader und Sprachsteuerung – ein Quadrat ohne
 * Beschriftung wäre dort namenlos. Es wird nur unsichtbar gemacht.
 * Weil das Hörer-Symbol seine Größe sonst in em von genau dieser
 * Schriftgröße ableitet, würde es dabei mitschrumpfen. Deshalb die
 * feste Größe darunter. */
@media (max-width: 599px), (orientation: landscape) and (max-height: 480px) {
	.big5-call {
		right: 1rem;
		bottom: 1rem;
		width: var(--big5-call-size);
		height: var(--big5-call-size);
		padding: 0;
		gap: 0;
		font-size: 0;
	}

	.big5-call.big5-icon::before {
		width: var(--big5-call-icon);
		height: var(--big5-call-icon);
	}

	/* --- Menü-Schalter ganz nach außen ---
	 *
	 * Auf dem Desktop steht das Menü links, die Telefonnummer rechts – dort
	 * ist das die Leserichtung der Leiste. Sobald das Menü aber zum Burger
	 * zusammenklappt, öffnet es ein rechtsbündiges Overlay. Steht der
	 * Schalter dann nicht selbst am rechten Rand, klappen die Einträge
	 * neben ihm auf statt unter ihm.
	 *
	 * Getauscht wird nur die Anzeigereihenfolge, nicht der Quelltext. Im
	 * Editor bleibt die Reihenfolge damit unverändert, und auf dem Desktop
	 * ändert sich nichts. */
	.big5-nav__right .big5-nav__tel {
		order: 1;
	}

	.big5-nav__right .big5-menu {
		order: 2;
	}
}


/* --- Nur Querformat ---
   Bewusst NICHT an eine Breite gehängt, sondern an die Höhe: Liegend hat
   ein Handy reichlich Breite und kaum Höhe. Alles, was hier stört, stört
   wegen der fehlenden Höhe. */
@media (orientation: landscape) and (max-height: 480px) {

	:root {
		/* Eine 104px hohe Leiste frisst ein Viertel von 402px Höhe. */
		--big5-nav-h: 68px;
		--big5-nav-h-scrolled: 56px;

		/* Der Hero wird hier nicht mittig ausgerichtet, sondern beginnt
		   unter der Nav – eine Verschiebung aus der Mitte ergibt dann
		   keinen Sinn mehr. */
		--big5-hero-hoch: 0rem;
	}

	.big5-at-top .wp-block-site-logo.big5-logo img {
		height: 46px;
	}

	.wp-block-site-logo.big5-logo img {
		height: 38px;
	}

	/* --- Burger auch im Querformat ---
	   WordPress schaltet bei "overlayMenu: mobile" ab 600px Breite auf die
	   waagerechte Leiste um. Liegend sind 874px Breite da, also klappte das
	   Menü aus – fünf Menüpunkte plus Telefonnummer plus großes Logo passten
	   aber nicht in eine Zeile, und die Nummer wurde rechts abgeschnitten.
	   Diese beiden Regeln stellen den Zustand von unter 600px wieder her. */
	.big5-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.big5-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* --- Hero: unter die Nav statt in die Mitte ---
	   Senkrecht zentrierter Text in einem 620px hohen Hero landet bei nur
	   402px Fensterhöhe zwangsläufig unter dem Logo. Hier wächst der Hero
	   deshalb mit seinem Inhalt und beginnt mit sicherem Abstand unter der
	   Leiste. */
	.big5-hero {
		min-height: 0;
		padding-block: calc(var(--big5-nav-h) + 1.5rem) 3rem;
	}
}


/* ==========================================================================
   24. Schmale Bildschirme – Regeln, die für mehrere Geräte gelten

   Hier stehen die Regeln, die weder rein "Handy" noch rein "Tablet" sind,
   sondern von der verfügbaren Breite abhängen. Sie stehen bewusst nur an
   dieser einen Stelle und werden über verknüpfte Abfragen (Komma = "oder")
   den jeweiligen Geräten zugeteilt – doppelte Pflege wäre die sichere
   Quelle für auseinanderlaufende Werte.
   ========================================================================== */

/* --- Leistungskacheln: Bild oben, Text darunter ---
 *
 * Auf dem Desktop teilen sich Bild und Text dieselbe Fläche: Der Text liegt
 * als Band unten auf dem Bild. Das geht auf, weil die Kachel dort rund
 * 630px breit ist und der Text nur drei Zeilen braucht.
 *
 * Sobald die Kachel schmaler wird, kippt das Verhältnis. Zwei Kacheln
 * nebeneinander auf einem Tablet hochkant sind rund 480px breit, auf dem
 * Handy 362px. Derselbe Text braucht dann fünf bis sieben Zeilen und belegt
 * mit der Überschrift den größten Teil der Kachelhöhe – vom Bild bleibt ein
 * Streifen. Die Fläche ist dort schlicht nicht zweimal vorhanden.
 *
 * Deshalb bricht die Kachel auf: Das Bild wird aus dem Hintergrund geholt
 * und bekommt ein eigenes festes Format, der Text steht als Block darunter.
 * Beides voll sichtbar, nichts gequetscht, nichts ausgeblendet.
 *
 * Die Abfrage greift bei Hochformat bis 1024px – das deckt Handy und Tablet
 * hochkant ab – und zusätzlich bei allem unter 600px Breite. Handys quer
 * bleiben bewusst außen vor: Dort stehen die Kacheln in zwei Spalten mit
 * rund 400px, und die bisherige Darstellung war unbeanstandet. */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 599px) {

	/* Das :has() ist eine Sicherung: Nur wenn im Cover-Block wirklich ein
	   Bild-Element steckt, wird umgebaut. Bei einer Kachel ohne Bild bliebe
	   sonst eine leere Fläche stehen. */
	.big5-karte:has(> img.wp-block-cover__image-background) {
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	/* Klassenname doppelt: Der Cover-Block von WordPress zieht sein Bild
	   mit position:absolute über die ganze Kachel. Diese Regel muss die
	   Kernregel sicher überwiegen, unabhängig davon, in welcher Reihenfolge
	   die Stylesheets im Kopf landen. */
	.big5-karte.big5-karte > img.wp-block-cover__image-background {
		position: relative;
		inset: auto;
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		aspect-ratio: var(--big5-karte-ratio-mobil);
		object-fit: cover;
	}

	/* Das Band steht jetzt auf weißem Grund statt auf dem Bild – die
	   Teildurchsichtigkeit würde es hier nur aufhellen. Überschrieben wird
	   die Variable, nicht die Regel: Die Farbe bleibt an einer Stelle
	   definiert. */
	.big5-karte {
		--big5-karte-band: var(--wp--preset--color--blau-dunkel);
	}
}


/* --- Team: drei Personen pro Zeile ---
 *
 * Fünf Portraits in einer Reihe sind erst ab Desktop-Breite groß genug.
 * Auf einem iPad Pro 11" hochkant (834px) bleiben je 136px pro Person.
 *
 * Der erste Versuch über flex-wrap ist gescheitert, und zwar aus einem
 * Grund, gegen den keine Spezifität hilft: WordPress schreibt seinen
 * Spalten ab 782px ein "flex-wrap: nowrap !important" vor. Dagegen kommt
 * man nur mit einem eigenen !important an – und das ist in diesem Theme
 * ausgeschlossen.
 *
 * Der Ausweg führt deshalb am Streit vorbei statt hindurch: Die Reihe wird
 * von Flexbox auf ein Raster umgestellt. Dort ist flex-wrap bedeutungslos,
 * ebenso das "flex-basis: 100% !important", das WordPress unterhalb von
 * 782px auf jede Spalte legt. Das display:flex selbst trägt kein
 * !important und lässt sich sauber überschreiben.
 *
 * Nebeneffekt: Es braucht keine Regel mehr für die einzelnen Spalten und
 * keine Breitenrechnung. Die Spaltenzahl steht an genau einer Stelle.
 * minmax(0, 1fr) statt 1fr, damit eine lange E-Mail-Adresse die Spalte
 * nicht auseinanderdrücken kann.
 *
 * Anzahl über --big5-team-spalten änderbar, 2 statt 3 ist eine
 * Zahl entfernt. Der Abstand kommt aus derselben gap-Regel wie vorher –
 * Raster und Flexbox verwenden dieselbe Eigenschaft.
 *
 * Die Untergrenze von 600px ist wichtig und war zuerst nicht da: Auf dem
 * Handy hochkant sollen die Personen einzeln untereinander stehen. Solange
 * die Reihe Flexbox war, hat das WordPress selbst erledigt – über genau
 * jenes flex-basis: 100% !important. Diese Abfrage hat das Handy also von
 * Anfang an miterfasst, die Regel kam nur nie durch. Mit dem Wechsel auf
 * Raster fällt der Schutz weg, und die Grenze muss hier stehen. */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 480px) {

	.big5-team {
		--big5-team-spalten: 3;
	}
}