/*
Theme Name: Weserburg Immobilien
Author: ivis Media Berlin
Author URI: https://ivis.media
Description: Theme für Weserburg Immobilien
Version: 1.0
Requires at least: 5.9
Tested up to: 5.9.2
Requires PHP: 7.3
Text Domain: weserburg
*/
/* === Footer Info Overlay === */
.footer-row {
    position: relative;
    overflow: hidden;
}
.footer-info-overlay {
    position: absolute;
    top: 50%;
    right: 0;
    width: 21%;
    transform: translateX(110%) translateY(-50%);
    transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 100;
}
.footer-info-overlay.fio-visible {
    transform: translateX(0) translateY(-50%);
}
.fio-inner {
    position: relative;
    background-color: #d9c4ab;
    padding: 38px 30px;
    font-family: "Montserrat", sans-serif;
    color: #000;
    box-sizing: border-box;
}
.fio-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.22);
    pointer-events: none;
}
.fio-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    color: #000;
    margin: 0 0 18px 0;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.fio-text {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: #000;
    margin: 0 0 24px 0;
    position: relative;
    z-index: 1;
}
.fio-subheading {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 10px 0;
    position: relative;
    z-index: 1;
}
.fio-phone {
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin: 0 0 22px 0;
    position: relative;
    z-index: 1;
}
.fio-link {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: #000;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}
.fio-link:hover { opacity: 0.7; }
/* ═══════════════════════════════════════════════════════════════════════
   WISSEN-BEREICH — Uebersicht, Kategorie, Artikel (02.09.2026 neu gefasst)
   ───────────────────────────────────────────────────────────────────────
   Der Betreiber hat die Artikelseite am 02.09.2026 angesehen: Umbruch,
   Ueberschriften und Gesamtbild passten nicht. Zwei Ursachen, eine davon
   ein echter Fehler.

   ── 1. DER FEHLER: <nav> IST IN DIESEM THEME EIN RESERVIERTER SELEKTOR ──
   `style.min.css` gestaltet das NACKTE Element:

       nav { position: fixed; top: 0; width: 100%; z-index: 9 }

   Gemeint ist die Seitennavigation, getroffen wird jedes `<nav>` im
   Dokument. Auf der Artikelseite stehen DREI davon, und am ausgelieferten
   Stand nachgemessen klebten alle drei oben am Fensterrand:

     · nav.nav-class                  die echte Seitennavigation
     · nav.breadcrumb                 fixiert, Breite 1200 statt der Spalte
     · nav.wissen-article__navigation fixiert bei y=40, Breite 1440

   Die Folge war nicht nur haesslich: die Brotkrume lag MIT DEMSELBEN
   z-index UEBER der Seitennavigation und verdeckte sie — die Artikelseite
   hatte kein Menue und kein Logo mehr. Und „Zurueck zur Wissens-Uebersicht"
   stand nicht unten, wo es im Template steht, sondern oben ueber der
   Kategorie. Genau das war im Bildschirmfoto zu sehen.

   Dieselbe Falle hat am 24.08. das Sprungmarken-Verzeichnis der
   Bewertungsseite erwischt; der Reset dafuer steht in
   `inc/desktop-seiten.php` und gilt nur fuer die zwei dort gebauten
   Seiten. Er ist hier bewusst NICHT eingebunden, sondern wiederholt:
   dieser Block gehoert zu den Wissen-Vorlagen, jener zu den Seiten. Wer
   kuenftig ein `<nav>` in eine Vorlage schreibt, braucht den Reset erneut.

   ── 2. DIE OPTIK: DIE SEITE SPRACH EINE ANDERE SPRACHE ─────────────────
   Der erste Entwurf brachte eine eigene Palette mit — `#8b6f47` als Akzent
   und `#1a1a1a` als Textfarbe. Beides steht nirgends sonst auf dieser
   Website. Die CI kennt `#333333` und `#E3DDD8`, dazu drei Zwischenstufen;
   die Ueberschriften wogen 700 und 800, waehrend das Theme 400 und 500
   setzt. Deshalb wirkte die Seite wie von einer anderen Website.

   Die Werte unten sind dieselben wie in `inc/desktop-seiten.php` — H1
   clamp(28,3.4vw,44) in 500, H2 clamp(24,2.6vw,32) in 400, Fliesstext-
   Links in `--wb-ink` mit Unterstrich in `--wb-line`.

   ── ZUR DUNKLEN FLAECHE DES AUFRUFS ────────────────────────────────────
   Der Aufruf-Kasten war eine grosse Flaeche in `#1a1a1a` mit einem weissen
   Knopf darin. Die CI-Regel dazu steht in `critical.css`: `#333333` ist
   Textfarbe UND Knopfflaeche, deshalb rationiert — „jede zusaetzliche
   dunkle Flaeche nimmt dem Button genau so viel Wirkung, wie sie selbst
   gewinnt". Der Kasten ist jetzt Sand mit einem dunklen Knopf darin. Das
   ist die Anordnung, die der Funnel ueberall sonst benutzt.
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Marken-Toene, wie in critical.css und inc/desktop-seiten.php. Hier
   als Variablen, weil dieser Block sie zwei Dutzend Mal braucht. Der
   Praefix haelt sie von allem fern, was WPCode spaeter einstreut. */
:root {
	--wb-ink: #333333;
	--wb-ink-soft: #5a544f;
	--wb-sand: #e3ddd8;
	--wb-sand-deep: #d6cec6;
	--wb-line: #c9c0b7;
	--wb-edge: #847870;
	--wb-focus: #1199ff;
	/* Der Cremeton. Am 09.09.2026 vereinheitlicht: das Theme fuehrte
	   zusaetzlich #f7f4ed im Kontaktfenster, zwei Stufen daneben. Die
	   Begruendung steht im Kopf von `.wb-partner`. */
	--wb-creme: #F5F2EE;
}

/* Dieses Theme hat kein `box-sizing: border-box` als Vorgabe — es ist
   aelter als die Gewohnheit. Innerhalb der Wissen-Vorlagen gilt es, sonst
   rechnet jedes Polster oben drauf: bei 560 px Fensterbreite gemessen
   stand der Aufruf-Kasten 20 px ueber den rechten Rand hinaus und die
   ganze Seite liess sich seitlich schieben. Bewusst auf diese beiden
   Wurzelklassen begrenzt — die uebrige Website ist auf content-box
   gebaut und bleibt es. */
.wissen-single *,
.wissen-single *::before,
.wissen-single *::after,
.wissen-uebersicht *,
.wissen-uebersicht *::before,
.wissen-uebersicht *::after {
	box-sizing: border-box;
}

/* ── Der Reset, siehe Kopfkommentar. Gilt fuer JEDES <nav> in einer
      Wissen-Vorlage, auch fuer eines, das es noch nicht gibt. ────────── */
.wissen-single nav,
.wissen-uebersicht nav {
	position: static !important;
	top: auto !important;
	width: auto !important;
	z-index: auto !important;
	background: none !important;
	box-shadow: none !important;
}

.wissen-single nav::before,
.wissen-single nav::after,
.wissen-uebersicht nav::before,
.wissen-uebersicht nav::after { content: none !important; }


/* ── Die Seitennavigation braucht auf dieser Seite ihren dunklen Zustand ──
   Die Navigation ist fuer einen dunklen Hero gebaut: weisse Schrift, weisses
   Logo, durchsichtiger Grund. `app.min.js` schaltet sie erst ab 30 px
   Scrollhoehe auf Dunkel um (Klasse `scrolledDown`).

   Die Artikelseite hat keinen Hero. Oben stand die Navigation deshalb weiss
   auf Weiss — Logo, Menue und Burger waren VORHANDEN, aber unsichtbar. Im
   Bildschirmfoto des Betreibers sieht man sie als hellgraue Schemen.

   Hier wird der dunkle Zustand von Anfang an gesetzt, aber NUR fuer die
   Artikelseite: Uebersicht und Kategorieseite tragen den Foto-Hero und
   brauchen die weisse Fassung.

   Das `!important` an den Logos ist noetig, weil `app.min.js` beim
   Zurueckscrollen `display` INLINE zuruecksetzt — ohne das blitzte oben
   wieder das weisse Logo auf.

   DASSELBE GILT FUER /kontakt/ UND /immobilie-bewerten/ auf dem Desktop.
   Beide sind ebenfalls ohne Hero gebaut und haben oben keine sichtbare
   Navigation. Nicht mitgeaendert, weil sie ein eigener Auftrag sind —
   der Ort dafuer waere inc/desktop-seiten.php. */
/* Die Flaeche kommt an das `nav` SELBST und nicht an sein `::after`.
   Der erste Versuch hat das Pseudoelement zur weissen Leiste aufgeblasen,
   so wie es `nav.scrolledDown::after` tut — und damit „Kontakt" und die
   Telefonnummer verdeckt: `::after` ist das letzte Kind des `nav`, beide
   sind positioniert und beide haben `z-index: auto`, also gewinnt die
   Reihenfolge im Dokument. Der Hintergrund des Elements liegt dagegen
   unter allen Kindern. Der dekorative Streifen bleibt dabei, wo er ist —
   er ist weiss auf Weiss und faellt nicht auf. */
body.single-wissen nav { background-color: #ffffff; }

body.single-wissen nav ul.navbar-before-desktop li a { color: var(--wb-ink); }

body.single-wissen nav ul.navbar-before-desktop li a::after { background-color: var(--wb-ink); }

body.single-wissen .navbar-burger-toggle span.burger-span { background-color: var(--wb-ink); }

body.single-wissen .logo-header-weserburg-white-big { display: none !important; }

body.single-wissen .logo-header-weserburg-dunkel-big {
	display: block !important;
	position: relative;
}


/* ═══ ARTIKELSEITE ═══════════════════════════════════════════════════ */

/* Die Seitennavigation ist fixiert und misst 73 px. Ohne diesen Abstand
   laege die Brotkrume darunter — sie steht als erstes Element im Fluss,
   und der Fluss beginnt am Fensterrand. */
.wissen-single {
	padding-top: 118px;
	font-family: "Montserrat", sans-serif;
}

/* Brotkrume und Artikel teilen sich EINE Spaltenbreite. Vorher trug die
   Brotkrume `container-content` (1160 px) und der Artikel 780 — die beiden
   standen sichtbar nicht uebereinander. */
.wissen-single .breadcrumb,
.wissen-single .wissen-article,
.wissen-single .wissen-related {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

.breadcrumb {
	padding-top: 0;
	padding-bottom: 0;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wb-ink-soft);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: 6px;
	color: var(--wb-line);
}

.breadcrumb__item a {
	color: var(--wb-ink-soft);
	text-decoration: none;
}

.breadcrumb__item a:hover { text-decoration: underline; }

.breadcrumb__item--current { color: var(--wb-ink); }


/* ── Kopf des Artikels ─────────────────────────────────────────────── */
.wissen-article {
	padding-top: 28px;
	padding-bottom: 88px;
}

/* Versalien mit Sperrung, in der weichen Textstufe. Vorher `#8b6f47` —
   ein Goldbraun, das es auf dieser Website sonst nirgends gibt. */
.wissen-article__kategorie {
	display: block;
	margin-bottom: 14px;
}

.wissen-article__kategorie a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wb-ink-soft);
	text-decoration: none;
}

.wissen-article__kategorie a:hover { color: var(--wb-ink); }

.wissen-article__title {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.22;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wb-ink);
	margin: 0 0 22px;
}

/* Die drei Angaben standen mit 20 px Abstand nebeneinander und lasen sich
   als ein Satz. Ein Trennpunkt macht sie zu drei Angaben. */
.wissen-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	font-size: 13px;
	color: var(--wb-ink-soft);
	border-bottom: 1px solid var(--wb-line);
	padding-bottom: 20px;
	margin-bottom: 40px;
}

.wissen-article__meta > * + *::before {
	content: "·";
	margin-right: 14px;
	color: var(--wb-line);
}

.wissen-article__hero-img {
	margin: 0 0 40px;
}

.wissen-article__hero-img img {
	width: 100%;
	height: auto;
	display: block;
}


/* ── Inhaltsverzeichnis ────────────────────────────────────────────────
   Ein `<nav>` mitten im Inhalt — genau die Falle aus dem Kopfkommentar.
   Der Reset weiter oben faengt sie ab. */
.wissen-toc {
	margin: 0 0 44px;
	padding: 22px 26px;
	border-top: 2px solid var(--wb-ink);
	border-bottom: 1px solid var(--wb-line);
	background: none;
}

.wissen-toc__titel {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wb-ink-soft);
}

.wissen-toc__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	/* Zwei Spalten, wo Platz ist — ein einspaltiges Verzeichnis mit zehn
	   Eintraegen schiebt den Text weit nach unten. */
	columns: 2;
	column-gap: 32px;
}

/* Haengender Einzug, und zwar mit flex.
   Der erste Entwurf haengte die Ziffer als `::before` mit `margin-right`
   davor. Das ist ein Zeichen IM Textfluss: bricht der Eintrag um, faengt
   die zweite Zeile wieder ganz links an — unter der Ziffer statt unter dem
   Wort. Bei den Eintraegen 1, 5 und 7 war das zu sehen.

   `text-indent: -2em` mit `padding-left: 2em` waere die klassische
   Loesung und hier die falsche: „10." ist breiter als „1.", ein fester
   Einzug passt also nur einer Sorte Ziffer.

   Als Flex-Zeile ist die Ziffer eine eigene Spalte. Sie steht
   rechtsbuendig in ihrer Breite, damit der Punkt von „1." und „10."
   uebereinander liegt, und der Text daneben bricht in seiner eigenen
   Spalte um. */
.wissen-toc__eintrag {
	display: flex;
	gap: 0 8px;
	margin: 0 0 7px;
	break-inside: avoid;
	counter-increment: toc;
	font-size: 14px;
	line-height: 1.45;
}

.wissen-toc__eintrag::before {
	content: counter(toc) ".";
	flex: 0 0 auto;
	/* 1.8em und nicht 1.5: bei 1.5 ragte „10." zwei Pixel darueber hinaus
	   und schob seinen Text als einziger nach rechts. Nachgemessen. */
	min-width: 1.8em;
	text-align: right;
	color: var(--wb-edge);
	font-variant-numeric: tabular-nums;
}

.wissen-toc__eintrag a {
	color: var(--wb-ink);
	text-decoration: none;
}

.wissen-toc__eintrag a:hover { text-decoration: underline; }

/* Die Seitennavigation ist fixiert und misst 73 px. Ohne diesen Halt
   landet ein Sprungziel darunter — derselbe Wert wie auf den gebauten
   Desktopseiten. */
.wissen-article__content h2[id] { scroll-margin-top: 96px; }


/* ── Der Fliesstext, als Magazinseite ──────────────────────────────────
   Der Betreiber wollte „wie ein Magazin oder eine Zeitung". Fuenf Mittel
   machen den Unterschied, und keines davon ist eine neue Schrift:

   1. EIN VORSPANN. Der erste Absatz steht groesser und leichter als der
      Rest. Er greift automatisch — `> p:first-of-type` — damit er auch
      dann da ist, wenn im Editor niemand an eine Klasse denkt.
   2. EINE INITIALE. Drei Zeilen hoch, am ersten Absatz nach der ersten
      Zwischenueberschrift. Das ist die Stelle, an der in einer Zeitung
      der Text beginnt; der Vorspann davor ist noch Ankuendigung.
   3. EIN SCHMALERES SATZBILD. 62 Zeichen je Zeile statt 78. Die
      Textspalte bleibt 780 px breit, der Satz darin wird schmaler —
      das ist der eigentliche Grund, warum eine Zeitungsspalte ruhig
      wirkt.
   4. LUFT UEBER DEN ZWISCHENUEBERSCHRIFTEN, nicht darunter. Eine
      Ueberschrift gehoert zu dem, was unter ihr steht.
   5. AUSGEZEICHNETE EINSCHUEBE: Zitat, Kasten, Tabelle. Sie
      unterbrechen die Spalte und geben dem Auge Halt.

   Was bewusst FEHLT: eine Serifenschrift. Sie waere das naheliegende
   Zeitungsmittel — und sie waere ein fremder Font. Die Website laedt
   seit August keine fremden Hosts mehr (`test-fremde-hosts.php` faengt
   den naechsten Versuch ab), und eine zweite Schrift im Theme waere
   400 KB fuer eine Seite. Montserrat traegt das hier mit Groesse,
   Laufweite und Weissraum. */
.wissen-article__content {
	font-size: 18px;
	line-height: 1.72;
	color: var(--wb-ink);
}

/* Das Satzmass haengt an den TEXTELEMENTEN, nicht am Kasten darum.
   Der erste Entwurf hatte `max-width: 34em` am Container — dann sind
   Tabelle, Zitat und Infokasten mit eingeschnuert, und der Magazineffekt
   ist weg. Er entsteht ja gerade aus dem Gegensatz: schmaler Satz,
   breite Einschuebe. 34em sind rund 62 Zeichen je Zeile. */
.wissen-article__content > p,
.wissen-article__content > ul,
.wissen-article__content > ol,
.wissen-article__content > h3 {
	max-width: 34em;
}

/* 1. Der Vorspann. */
.wissen-article__content > p:first-of-type,
.wissen-article__content > p.wb-vorspann {
	font-size: 21px;
	line-height: 1.55;
	font-weight: 300;
	color: var(--wb-ink);
	margin: 0 0 32px;
	max-width: 30em;
}

/* 2. Die Initiale. `float` und nicht `position`: nur so laufen die
      folgenden Zeilen wirklich um sie herum. Die Zeile darf dabei nicht
      auseinanderfallen, deshalb line-height 0.82 und ein gemessener
      Versatz nach unten. */
.wissen-article__content > h2:first-of-type + p::first-letter {
	float: left;
	font-size: 62px;
	line-height: 0.82;
	font-weight: 500;
	color: var(--wb-ink);
	padding: 6px 10px 0 0;
	margin-top: 2px;
}

.wissen-article__content p { margin: 0 0 24px; }

/* 4. */
.wissen-article__content h2 {
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wb-ink);
	margin: 56px 0 18px;
	max-width: 22em;
}

/* Der feine Strich ueber jeder Zwischenueberschrift ist das
   Zeitungsmittel schlechthin: er trennt Abschnitte, ohne Platz zu
   kosten. Vor der ERSTEN steht keiner — dort trennt schon der
   Vorspann. */
.wissen-article__content h2::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--wb-ink);
	margin-bottom: 22px;
}

.wissen-article__content > h2:first-of-type::before { content: none; }

.wissen-article__content h3 {
	font-size: 20px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--wb-ink);
	margin: 38px 0 10px;
}

.wissen-article__content > *:first-child { margin-top: 0; }

.wissen-article__content ul,
.wissen-article__content ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.wissen-article__content li { margin-bottom: 10px; }

.wissen-article__content li::marker { color: var(--wb-edge); }

/* Nummerierte Schritte tragen in einem Magazin die Ziffer sichtbar. */
.wissen-article__content ol {
	list-style: none;
	padding-left: 0;
	counter-reset: schritt;
}

.wissen-article__content ol > li {
	counter-increment: schritt;
	position: relative;
	padding-left: 42px;
}

.wissen-article__content ol > li::before {
	content: counter(schritt);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 28px;
	text-align: right;
	font-weight: 600;
	font-size: 17px;
	color: var(--wb-edge);
	font-variant-numeric: tabular-nums;
}

.wissen-article__content strong { font-weight: 600; }

/* Ohne diese Regel nimmt der Browser sein Standardblau — das Theme setzt
   fuer Fliesstext-Links keine Farbe. Derselbe Fund wie bei den gebauten
   Desktopseiten am 24.08. */
.wissen-article__content a {
	color: var(--wb-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wb-edge);
}

.wissen-article__content a:hover { text-decoration-color: var(--wb-ink); }

/* 5a. Das Zitat als herausgehobener Satz, nicht als eingerueckter Block.
       Ohne Anfuehrungszeichen: das Zitat stammt aus dem eigenen Text,
       ein Zitatzeichen behauptete eine fremde Quelle. */
.wissen-article__content blockquote {
	margin: 40px 0;
	padding: 26px 0;
	border-top: 1px solid var(--wb-line);
	border-bottom: 1px solid var(--wb-line);
	border-left: 0;
	background: none;
	font-size: clamp(20px, 2.2vw, 25px);
	line-height: 1.4;
	font-weight: 300;
	color: var(--wb-ink);
	font-style: normal;
	text-align: center;
}

.wissen-article__content blockquote p {
	margin: 0;
	max-width: 26em;
	margin-left: auto;
	margin-right: auto;
}

/* 5b. Der Infokasten. */
.wissen-article__content .wb-kasten {
	margin: 36px 0;
	padding: 26px 28px;
	background: var(--wb-sand);
}

.wissen-article__content .wb-kasten__titel {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wb-ink-soft);
}

.wissen-article__content .wb-kasten ul,
.wissen-article__content .wb-kasten ol {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

.wissen-article__content .wb-kasten ol { list-style: decimal; }

.wissen-article__content .wb-kasten li {
	font-size: 16px;
	line-height: 1.6;
	padding-left: 0;
}

.wissen-article__content .wb-kasten li::before { content: none; }

.wissen-article__content .wb-kasten p:last-child { margin-bottom: 0; }

/* Der Hinweiskasten traegt keine Flaeche, sondern eine Kante: er ist eine
   Einschraenkung, keine Zusammenfassung. */
.wissen-article__content .wb-kasten--hinweis {
	background: none;
	border-left: 3px solid var(--wb-edge);
	padding: 4px 0 4px 22px;
	font-size: 16px;
	color: var(--wb-ink-soft);
}

/* 5c. Die Tabelle. Zeilenlinien statt Rahmen — ein Gitter aus vier
       Seiten macht aus einer Uebersicht ein Formular. */
.wissen-article__content table {
	width: 100%;
	margin: 36px 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.55;
}

.wissen-article__content thead th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wb-ink-soft);
	border-bottom: 2px solid var(--wb-ink);
	padding: 0 16px 10px 0;
}

.wissen-article__content tbody td {
	vertical-align: top;
	border-bottom: 1px solid var(--wb-line);
	padding: 14px 16px 14px 0;
}

.wissen-article__content tbody td:first-child { font-weight: 600; }

.wissen-article__content tbody td:last-child { padding-right: 0; }

/* Auf schmalen Schirmen darf die Tabelle scrollen, statt die Seite zu
   sprengen. Bei 526 px Fensterbreite gemessen: die Tabelle stand mit
   506 px in einer 335 px breiten Spalte, das Dokument war 151 px breiter
   als der Schirm — die ganze Seite liess sich seitlich schieben.

   Der Kasten darum ist noetig, weil sich eine Tabelle nicht selbst
   scrollen kann, ohne ihre Zeilenaufteilung zu verlieren. Im
   Block-Editor bringt WordPress ihn als `.wp-block-table` mit; im
   eingesetzten HTML steht er als `.wb-tabelle` im Text. */
.wissen-article__content .wb-tabelle,
.wissen-article__content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 36px 0;
}

.wissen-article__content .wb-tabelle > table,
.wissen-article__content .wp-block-table > table {
	margin: 0;
	min-width: 32em;
}

.wissen-article__content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 36px 0 0;
}

.wissen-article__content figure { margin: 36px 0; }

.wissen-article__content figcaption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wb-ink-soft);
}

.wissen-article__content hr {
	border: 0;
	border-top: 1px solid var(--wb-line);
	margin: 44px 0;
}


/* ── Autorenkasten ─────────────────────────────────────────────────── */
/* Ohne Fuellung, nur mit einer Linie darueber.
   Der erste Entwurf gab ihm dieselbe Sandflaeche wie dem Aufruf-Kasten
   darunter — zwei Sandflaechen mit 24 px Abstand lesen sich als EINE, die
   in der Mitte einen Sprung hat. Der Aufruf ist jetzt die einzige Flaeche
   des Artikels und damit sein Blickfang. */
.wissen-article__autor-box {
	margin: 56px 0 0;
	padding: 26px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wb-line);
}

.autor-box__name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--wb-ink);
	margin-bottom: 2px;
}

.autor-box__rolle {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wb-ink-soft);
	margin-bottom: 12px;
}

.autor-box__bio {
	font-size: 14px;
	line-height: 1.65;
	color: var(--wb-ink-soft);
	margin: 0;
}


/* ── Der Aufruf ────────────────────────────────────────────────────── */
/* Sand statt Schwarz, siehe Kopfkommentar. Der dunkle Knopf darin ist der
   einzige dunkle Fleck des Kastens — und damit der Blickfang. */
.wissen-article__cta-box {
	margin: 44px 0 0;
	padding: 40px 32px;
	background: var(--wb-sand);
	color: var(--wb-ink);
	text-align: center;
}

.wissen-article__cta-box h3 {
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.3;
	font-weight: 500;
	color: var(--wb-ink);
	margin: 0 0 10px;
}

.wissen-article__cta-box p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wb-ink-soft);
	margin: 0 auto 26px;
	max-width: 34em;
}

/* `.btn-text` und `.btn-text-black` bringen aus style.min.css Versalien und
   zwei Unterstrich-Balken mit, die beim Ueberfahren wachsen. Hier soll ein
   gefuellter Knopf stehen — die Balken werden deshalb abgeschaltet, nicht
   uebermalt. */
.wissen-article__cta-box .btn-text-black {
	display: inline-block;
	margin: 0;
	padding: 17px 32px;
	min-height: 44px;
	background: var(--wb-ink);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--wb-ink);
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
	box-sizing: border-box;
}

.wissen-article__cta-box .btn-text-black::before,
.wissen-article__cta-box .btn-text-black::after { content: none; }

.wissen-article__cta-box .btn-text-black:hover,
.wissen-article__cta-box .btn-text-black:focus-visible {
	background: transparent;
	color: var(--wb-ink);
}

.wissen-article__cta-box .btn-text-black:focus-visible {
	outline: 2px solid var(--wb-focus);
	outline-offset: 3px;
}


/* ── Zurueck ───────────────────────────────────────────────────────── */
.wissen-article__navigation {
	margin-top: 48px;
	border-top: 1px solid var(--wb-line);
	padding-top: 24px;
}

.wissen-article__back {
	font-size: 14px;
	font-weight: 600;
	color: var(--wb-ink);
	text-decoration: none;
}

.wissen-article__back:hover { text-decoration: underline; }


/* ── Weitere Artikel ───────────────────────────────────────────────── */
.wissen-related {
	padding-top: 8px;
	padding-bottom: 88px;
}

.wissen-related__titel {
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.3;
	font-weight: 400;
	color: var(--wb-ink);
	margin: 0 0 28px;
}


/* ═══ UEBERSICHT UND KATEGORIE ═══════════════════════════════════════ */

.wissen-filter { padding: 40px 20px 20px; }

.wissen-filter__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wissen-filter__btn {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 10px 20px;
	border: 1px solid var(--wb-edge);
	color: var(--wb-ink);
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.wissen-filter__btn:hover,
.wissen-filter__btn--active {
	background: var(--wb-ink);
	border-color: var(--wb-ink);
	color: #ffffff;
}

.wissen-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
	padding: 40px 20px 80px;
}

.wissen-card {
	background: #ffffff;
	border: 1px solid var(--wb-line);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s;
}

.wissen-card:hover { box-shadow: 0 10px 34px rgba(80, 60, 40, 0.13); }

.wissen-card__img-wrap {
	display: block;
	overflow: hidden;
	aspect-ratio: 16/9;
}

.wissen-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.wissen-card:hover .wissen-card__img { transform: scale(1.03); }

.wissen-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wissen-card__kategorie {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wb-ink-soft);
	margin-bottom: 10px;
}

.wissen-card__title {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--wb-ink);
	margin: 0 0 12px;
}

.wissen-card__title a {
	color: inherit;
	text-decoration: none;
}

.wissen-card__title a:hover { text-decoration: underline; }

.wissen-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wb-ink-soft);
	margin: 0 0 16px;
	flex: 1;
}

.wissen-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--wb-line);
	padding-top: 14px;
	margin-top: auto;
}

.wissen-card__datum {
	font-size: 12px;
	color: var(--wb-ink-soft);
}

.wissen-card__link {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wb-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wb-ink);
	padding-bottom: 2px;
}

.wissen-card__link:hover { border-color: var(--wb-line); }

.wissen-grid--related {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	padding: 0;
	gap: 24px;
}


/* ── Blaetterwerk ──────────────────────────────────────────────────── */
.wissen-pagination { padding: 10px 20px 70px; }

.wissen-pagination .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.wissen-pagination .page-item a,
.wissen-pagination .page-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--wb-edge);
	color: var(--wb-ink);
	text-decoration: none;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 600;
}

.wissen-pagination .page-item .current,
.wissen-pagination .page-item a:hover {
	background: var(--wb-ink);
	border-color: var(--wb-ink);
	color: #ffffff;
}


/* ── Hero der Uebersicht ───────────────────────────────────────────── */
.wissen-hero-kategorie {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 12px;
}

.hero-subtitle {
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #e8e3d8;
	max-width: 600px;
	margin: 0 auto;
}

.wissen-leer {
	padding: 60px 20px 80px;
	font-size: 17px;
	color: var(--wb-ink-soft);
}


/* ── Schmale Schirme ───────────────────────────────────────────────── */
@media (max-width: 768px) {
	.wissen-single { padding-top: 96px; }

	.wissen-single .breadcrumb,
	.wissen-single .wissen-article,
	.wissen-single .wissen-related {
		padding-left: 18px;
		padding-right: 18px;
	}

	.wissen-article {
		padding-top: 20px;
		padding-bottom: 60px;
	}

	.wissen-article__content { font-size: 17px; }

	.wissen-article__content > p:first-of-type,
	.wissen-article__content > p.wb-vorspann { font-size: 19px; }

	.wissen-article__content h2 { margin-top: 44px; }

	.wissen-article__content > h2:first-of-type + p::first-letter {
		font-size: 52px;
	}

	/* Zwei Spalten waeren auf dem Telefon zwei Zeichen breit. */
	.wissen-toc__liste { columns: 1; }

	.wissen-toc { padding: 18px 20px; }

	.wissen-article__content .wb-kasten { padding: 20px 20px; }

	.wissen-article__content table { font-size: 14px; }

	.wissen-article__cta-box { padding: 30px 20px; }

	.wissen-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
	}

	.wissen-filter__inner { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO-KNOPF „Immobilie sofort bewerten" (02.09.2026)
   ───────────────────────────────────────────────────────────────────────
   Der zweite Weg in den Bewertungs-Funnel, unter der Suchleiste auf der
   Startseite. Markup und Begruendung in
   inc/template-parts/hero-section.php.

   Diese Datei und nicht assets/css/style.css: ausgeliefert wird
   `assets/css/style.min.css`, die unminifizierte Fassung daneben liegt
   nur als Quelle im Theme und erreicht keinen Besucher. Das hier ist die
   Theme-Stylesheet-Datei, die header.php zusaetzlich einbindet — und die
   Stelle, an der auch die uebrigen neueren Ergaenzungen stehen (Wissen).
   Sie laedt NACH style.min.css, ueberschreibt also bei gleicher
   Spezifitaet.

   ── WARUM EIN EIGENER MODIFIKATOR UND NICHT .btn-white ─────────────────
   `.btn-white` gibt es im Theme laengst (weiss gefuellt, Schrift in
   CI-Anthrazit) — nur benutzt es niemand. Der Betreiber hat sich am
   02.09.2026 aus drei gegenuebergestellten Fassungen fuer den UMRISS
   entschieden: ruhiger auf dem Foto, tritt hinter die Suchleiste zurueck
   und fuellt sich erst beim Ueberfahren. `.btn-white` bleibt unberuehrt
   fuer den Fall, dass die Fuellung doch einmal gebraucht wird.
   ═══════════════════════════════════════════════════════════════════════ */

.hero-section-main__cta {
	margin: 2.6rem 0 0;
}

.btn-umriss-hell {
	display: inline-block;
	color: #ffffff;
	background-color: transparent;
	/* `.btn-big` setzt border: 0 — hier wird er wieder gesetzt. Zwei Pixel,
	   nicht einer: ein Haarstrich verliert auf einem Foto mit hellen Stellen
	   den Halt. */
	border: 2px solid #ffffff;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn-umriss-hell:hover,
.btn-umriss-hell:focus-visible {
	color: #333333;
	background-color: #ffffff;
}

/* Sichtbarer Fokusring, ABGESETZT nach aussen: der Knopf steht auf einem
   Foto, ein innen liegender Ring ginge im Bildrauschen unter. #1199FF ist
   die Fokusfarbe des uebrigen Themes (--c-focus). */
.btn-umriss-hell:focus-visible {
	outline: 2px solid #1199ff;
	outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   KONTAKTFENSTER „Jetzt ein persoenliches Gespraech vereinbaren" (02.09.2026)
   ───────────────────────────────────────────────────────────────────────
   Der Menuepunkt „Kontakt" oeffnet dieses Fenster (#gespraechVereinbarenModal,
   Markup in footer.php). Bis hierher war es eine helle Sandflaeche
   (rgba(227,221,216,.9) aus style.min.css) mit weissen Kaesten ohne
   Beschriftung — auf dem Hero-Foto stand es praktisch ohne Kontrast.

   Neu ist die Bildsprache der Vorlage des Betreibers: dunkle, durchsichtige
   Flaeche, kleine Versalbeschriftungen ueber jedem Feld, cremefarbene
   abgerundete Kaesten, alles in einem eigenen Gruppenkasten.

   ── WARUM ALLES NUR CSS IST ────────────────────────────────────────────
   Der Formularinhalt kommt NICHT aus dem Theme. footer.php gibt das
   ACF-Feld `text_des_fensters_modal_fenster` von Seite 53 aus; darin steckt
   der Contact-Form-7-Baustein 68. An diesem Markup laesst sich von hier aus
   nichts aendern — es steht in WordPress.

   Folge fuer die Beschriftungen: sie haengen als ::before an
   `.wpcf7-form-control-wrap[data-name="…"]`. Wer das Formular in WordPress
   umbaut und ein Feld umbenennt, verliert dessen Beschriftung stillschweigend
   — dann ist Abschnitt 6 nachzuziehen. Die saubere Fassung waere ein echtes
   <label> im CF7-Baustein; das ist ein Backend-Handgriff, kein Themecode.

   ── WARUM DIESE DATEI ──────────────────────────────────────────────────
   Wie beim Hero-Knopf: ausgeliefert wird `assets/css/style.min.css`, die
   unminifizierte Fassung daneben erreicht keinen Besucher. Diese Datei laedt
   header.php zusaetzlich, also NACH style.min.css.

   ── WARUM STELLENWEISE !important ──────────────────────────────────────
   footer.php setzt weiter unten `.modal-content{…!important}` in einem
   Inline-<style> — Inline im Footer schlaegt jede externe Datei. Ueberboten
   wird das nur mit hoeherer Spezifitaet UND !important, deshalb steht der
   Id-Selektor vor jeder Regel. Er ist zugleich die Abgrenzung: das
   PDF-Ratgeber-Fenster benutzt dieselbe Klasse `.modal-content` und bleibt
   unberuehrt (footer.php:941 nimmt dieses Fenster ausdruecklich aus).

   ── ZUR CI ─────────────────────────────────────────────────────────────
   Die Regel „#333333 ist Text UND CTA-Flaeche, deshalb rationiert" gilt fuer
   helle Seiten. Hier ist die Flaeche selbst dunkel — ein dunkler Knopf
   verschwaende darin. Der Absendeknopf kehrt sich deshalb um: cremefarben
   gefuellt, Schrift in Anthrazit. Das ist dieselbe Ueberlegung, aus der
   `.btn-umriss-hell` im Hero entstanden ist.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hinterlegung ─────────────────────────────────────────────────────
   Bewusst NUR abgedunkelt und NICHT unscharf. Der erste Entwurf hatte hier
   `blur(7px)` — und damit war der Glaseffekt weg: wenn das Foto schon
   ausserhalb des Kastens unscharf ist, gibt es keinen Unterschied mehr, an
   dem sich eine Scheibe erkennen liesse. Scharf aussen, unscharf innen: das
   IST der Effekt. */
#gespraechVereinbarenModal {
	background-color: rgba(14, 12, 10, 0.42);
	padding: 2rem 1rem;
	box-sizing: border-box;
}

/* ── 2. Die Flaeche ──────────────────────────────────────────────────── */
#gespraechVereinbarenModal .modal-content {
	position: relative !important;
	/* `100vw` und nicht `100%`: bezogen ist `100%` auf die Flaeche des
	   Fensters — und die ist auf der Desktopfassung breiter als der Schirm,
	   sobald der Seiteninhalt ueberlaeuft (bei 700px gemessen: 832px Kasten
	   auf 700px Schirm, halb rechts hinaus). `.wb-pdf-download-modal` rechnet
	   aus demselben Grund schon so. */
	width: min(52rem, calc(100vw - 2rem)) !important;
	max-width: none !important;
	max-height: min(90vh, 100%) !important;
	padding: clamp(1.75rem, 3vw, 2.5rem) !important;
	/* Die eigentliche Scheibe.
	   Die Deckkraft traegt hier NICHT die Lesbarkeit. Waere sie es, muesste
	   sie so hoch stehen, dass vom Foto nichts mehr durchkommt — genau das
	   war der erste Entwurf mit 0.82. Den Kontrast macht `brightness()` IM
	   Filter: es dunkelt ab, was hinter der Scheibe liegt, gleich stark bei
	   Abendhimmel wie bei heller Fassade. Die Tinte gibt nur den warmen Ton.

	   0.18 und brightness(.6) sind der zweite Nachschliff. Der Preis dafuer
	   steht in Abschnitt 5: die kleine Schrift bekommt ihre Unterlage jetzt
	   INNEN, im Formularkasten. Eine gleichmaessig dunkle Scheibe waere die
	   einfachere, aber eben auch die undurchsichtige Loesung. */
	background-color: rgba(28, 25, 22, 0.18) !important;
	-webkit-backdrop-filter: blur(20px) saturate(170%) brightness(0.6);
	backdrop-filter: blur(20px) saturate(170%) brightness(0.6);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.1);
	color: #ffffff;
	/* `html`/`body` setzen hyphens:auto. Im engen Formular trennt das mitten
	   im Wort („genomme-nen"), und zwar genau in der Zeile, die rechtlich
	   gelesen werden soll. */
	-webkit-hyphens: none;
	hyphens: none;
	/* Der Kasten scrollt bei kleinen Fenstern in sich. Der helle
	   Systembalken schnitte sonst durch die abgerundete Ecke. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

/* Ohne backdrop-filter gibt es keine Scheibe, sondern ein Fenster aus 42 %
   Tinte — und darauf ist weisse Schrift auf einem hellen Foto nicht mehr zu
   lesen. Dann traegt die Deckkraft doch wieder. Betrifft aeltere Firefox-
   Staende, in denen der Filter hinter einem Schalter lag. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#gespraechVereinbarenModal .modal-content {
		background-color: rgba(28, 25, 22, 0.93) !important;
	}
}

#gespraechVereinbarenModal .modal-content::-webkit-scrollbar {
	width: 8px;
}

#gespraechVereinbarenModal .modal-content::-webkit-scrollbar-track {
	background: transparent;
}

#gespraechVereinbarenModal .modal-content::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.28);
	border-radius: 4px;
}

/* ── 3. Kopf ─────────────────────────────────────────────────────────── */
#gespraechVereinbarenModal .modal-content > h2 {
	margin: 0 0 0.85rem;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	line-height: 1.2;
	font-weight: 400;
	color: #ffffff;
	padding-right: 3rem;
	/* Der Kopf steht ohne Unterlage direkt auf der Scheibe. Der Schatten ist
	   kein Schmuck: er haelt die Buchstabenkante, wenn hinter der Scheibe
	   zufaellig eine helle Stelle des Fotos liegt. */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.62);
}

#gespraechVereinbarenModal .modal-content > p {
	margin: 0;
	max-width: 42rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	/* Volle Deckkraft, weil der Grund keine ist. Zusammen mit dem Schatten
	   traegt der Satz auch ueber der hellsten Stelle des Hero-Fotos. */
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.62);
}

/* ── 4. Schliessen ───────────────────────────────────────────────────── */
#gespraechVereinbarenModal .closeModal {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	float: none;
	margin: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.78);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#gespraechVereinbarenModal .closeModal:hover,
#gespraechVereinbarenModal .closeModal:focus-visible {
	background-color: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

#gespraechVereinbarenModal .closeModal svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* ── 5. Der Formularkasten ───────────────────────────────────────────── */
#gespraechVereinbarenModal .pop-up-form {
	display: flex;
	flex-wrap: wrap;
	/* Abstand und Polster sind auf die Einwilligungszeile hin gerechnet, nicht
	   nach Gefuehl gewaehlt — siehe Abschnitt 8. */
	gap: 0 1.5rem;
	margin-top: 1.75rem !important;
	padding: clamp(0.875rem, 1.75vw, 1.25rem);
	/* Hier liegt der Kontrast der Scheibe.
	   Bis zum zweiten Nachschliff hellte dieser Kasten AUF (7 % Weiss) —
	   passend zu einer dunklen Flaeche. Jetzt ist die Flaeche luftig, und
	   der Kasten uebernimmt die Aufgabe umgekehrt: er dunkelt genau dort,
	   wo die kleine Schrift steht (Beschriftungen, Einwilligung). Aussen
	   bleibt die Scheibe damit durchsichtig, innen ist sie lesbar.
	   Gerechnet gegen Weiss dahinter: 255·0.6 → Tinte → 130 → Kasten → 89.
	   Beschriftung 4,7:1, Einwilligungszeile 5,5:1. */
	background-color: rgba(16, 14, 12, 0.36);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	box-sizing: border-box;
}

/* Die beiden Spalten. `flex-basis` gilt in der Hauptachse — sobald das Theme
   ab 992px auf `flex-direction: column` umstellt (siehe Abschnitt 12), waere
   18rem eine MINDESTHOEHE je Spalte, kein Mindestbreite mehr. Deshalb wird
   die Basis dort wieder auf `auto` gestellt. */
#gespraechVereinbarenModal .pop-up-form__left,
#gespraechVereinbarenModal .pop-up-form__right {
	flex: 1 1 18rem;
	width: auto;
	min-width: 0;
	padding: 0;
}

#gespraechVereinbarenModal .pop-up-form__left-section,
#gespraechVereinbarenModal .pop-up-form__right-section {
	height: auto;
	padding: 0;
	margin-bottom: 0.95rem;
}

#gespraechVereinbarenModal .pop-up-form p {
	margin: 0;
}

/* ── 6. Beschriftungen ───────────────────────────────────────────────── */
#gespraechVereinbarenModal .pop-up-form .wpcf7-form-control-wrap {
	display: block;
}

#gespraechVereinbarenModal .pop-up-form .wpcf7-form-control-wrap::before {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

#gespraechVereinbarenModal .wpcf7-form-control-wrap[data-name="wunschtermin"]::before  { content: "Wunschtermin"; }
#gespraechVereinbarenModal .wpcf7-form-control-wrap[data-name="verkaufsgrund"]::before { content: "Grund f\00FCr den Verkauf"; }
#gespraechVereinbarenModal .wpcf7-form-control-wrap[data-name="kontaktart"]::before    { content: "Bevorzugter Kontaktweg"; }
#gespraechVereinbarenModal .wpcf7-form-control-wrap[data-name="Name"]::before          { content: "Name"; }
#gespraechVereinbarenModal .wpcf7-form-control-wrap[data-name="telefonnummer"]::before { content: "Telefon"; }
#gespraechVereinbarenModal .wpcf7-form-control-wrap[data-name="email"]::before         { content: "E-Mail"; }

/* ── 7. Die Felder ───────────────────────────────────────────────────── */
#gespraechVereinbarenModal .pop-up-form input[type="text"],
#gespraechVereinbarenModal .pop-up-form input[type="tel"],
#gespraechVereinbarenModal .pop-up-form input[type="email"],
#gespraechVereinbarenModal .pop-up-form input[type="date"],
#gespraechVereinbarenModal .pop-up-form select {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	min-height: 3rem;
	margin-bottom: 0;
	padding: 0 1.05rem;
	background-color: var(--wb-creme, #F5F2EE);
	border: 1px solid transparent;
	border-radius: 10px;
	color: #333333;
	font-size: 1rem;
	line-height: 1.35;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

#gespraechVereinbarenModal .pop-up-form select {
	padding-right: 3rem;
	background-position: calc(100% - 1.15rem) center;
}

#gespraechVereinbarenModal .pop-up-form input::placeholder {
	color: transparent;
}

#gespraechVereinbarenModal .pop-up-form input:focus,
#gespraechVereinbarenModal .pop-up-form select:focus {
	border: 1px solid transparent;
	background-color: #ffffff;
	outline: 2px solid #1199ff;
	outline-offset: 2px;
}

#gespraechVereinbarenModal .pop-up-form input[type="date"]::before {
	content: none;
}

/* Der Kalenderknopf.
   Das Theme geht hier einen Umweg: es blendet den ECHTEN Knopf aus
   (`display:none; width:0; background:0 0`) und malt daneben ein Zeichen als
   `input[type=date]::before`. Das sieht gleich aus, ist aber nichts, worauf
   man klicken kann — und das ::before sitzt ohne `top` am oberen Rand, was
   im hoeheren Feld auffiele.

   Hier steht wieder der echte Knopf da. Drei Dinge muessen dafuer zusammen
   passieren, sonst bleibt er unsichtbar:
   · `display:block` und eine Groesse — das Theme setzt beides auf null;
   · ein Hintergrundbild — `background:0 0` hat das Zeichen von Chrome
     geloescht, ohne das ist der Knopf da und leer;
   · `position:absolute` — sonst steht er in Chrome direkt hinter
     „tt.mm.jjjj" statt am rechten Rand. Der Anker dafuer ist das
     `position:relative`, das `input[type=date]` im Theme ohnehin traegt.
   Die Adresse ist relativ zu DIESER Datei, also zur Themewurzel. */
#gespraechVereinbarenModal .pop-up-form input[type="date"]::-webkit-calendar-picker-indicator {
	display: block;
	position: absolute;
	right: 1.15rem;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	width: 20px;
	height: 20px;
	background-image: url("assets/img/icons/kalender-icon.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.6;
	cursor: pointer;
}

#gespraechVereinbarenModal .pop-up-form input[type="date"].wunschterminField::after {
	content: none;
}

/* ── 8. Einwilligung ─────────────────────────────────────────────────── */
/* ── DER UMBRUCH DER EINWILLIGUNGSZEILE ──────────────────────────────────
   „Hiermit akzeptiere ich die von mir zur Kenntnis genommenen
   Datenschutzerklaerung." stand auf DREI Zeilen, und es fehlten dafuer
   ganze acht Pixel: die erste Zeile braucht in Montserrat 306 px, zur
   Verfuegung standen 306. „Kenntnis" rutschte damit auf die zweite Zeile
   und riss den Rest hinterher.

   Geholt sind die Pixel an zwei Stellen, ohne die Schrift zu verkleinern —
   eine Einwilligung ist die letzte Zeile, an der man Groesse spart:
   der Spaltenabstand von 2 auf 1,5rem und das Polster des Formularkastens
   von 1,5 auf 1,25rem. Macht 318 px, also zwoelf Pixel Luft.

   WER AN DIESEN DREI WERTEN DREHT, PRUEFT DIESE ZEILE. Zwoelf Pixel sind
   nicht viel. Gemessen wurde mit der echten Montserrat; faellt sie aus,
   ist die Ersatzschrift schmaler, der Umbruch also nicht in Gefahr.

   `text-wrap: balance` verteilt die zwei Zeilen gleichmaessig (277/277
   statt 306/247). Wo es fehlt, bricht der Browser wie bisher um. */
#gespraechVereinbarenModal .position-relative {
	margin: 0.35rem 0 0 24px;
}

#gespraechVereinbarenModal .wpcf7-list-item-label {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	text-wrap: balance;
}

#gespraechVereinbarenModal .wpcf7-list-item-label a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Das Kaestchen ist im Theme ein ::before am Text — die eigentliche Box ist
   unsichtbar geschaltet. Alle Masse dort stehen mit !important, deshalb hier
   auch. Der Haken selbst wird im Theme nie sichtbar: die unangehakte Regel
   setzt `content:"" !important`, die angehakte ein `content:"√"` OHNE
   !important — und verliert damit immer. Auf der hellen Flaeche fiel das
   nicht auf, weil die dunkle Fuellung als Rueckmeldung genuegte. */
#gespraechVereinbarenModal input[type="checkbox"].form-checkbox + span::before {
	margin-top: 4px !important;
	height: 18px !important;
	width: 18px !important;
	left: -24px !important;
	border-radius: 4px !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	background-color: transparent !important;
	color: #333333;
	font-size: 13px;
	line-height: 17px;
	text-align: center;
}

#gespraechVereinbarenModal input[type="checkbox"].form-checkbox:checked + span::before {
	content: "\2713" !important;
	background-color: var(--wb-creme, #F5F2EE) !important;
	border-color: var(--wb-creme, #F5F2EE) !important;
}

#gespraechVereinbarenModal input[type="checkbox"].form-checkbox + span::after,
#gespraechVereinbarenModal input[type="checkbox"].form-checkbox:checked + span::after {
	background-color: transparent !important;
	visibility: hidden !important;
}

/* ── 9. Der Knopf ────────────────────────────────────────────────────── */
#gespraechVereinbarenModal .pop-up-form .wpcf7-submit {
	width: 100%;
	min-height: 3.1rem;
	margin: 0.6rem 0 0 !important;
	padding: 0.9rem 1.375rem;
	background-color: var(--wb-creme, #F5F2EE);
	color: #333333;
	border: 0;
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: background-color 0.25s ease-in-out, transform 0.25s ease-in-out;
}

#gespraechVereinbarenModal .pop-up-form .wpcf7-submit::before,
#gespraechVereinbarenModal .pop-up-form .wpcf7-submit::after {
	content: none;
}

#gespraechVereinbarenModal .pop-up-form .wpcf7-submit:hover,
#gespraechVereinbarenModal .pop-up-form .wpcf7-submit:focus-visible {
	background-color: #ffffff;
	color: #333333;
	transform: translateY(-1px);
}

#gespraechVereinbarenModal .pop-up-form .wpcf7-submit:focus-visible {
	outline: 2px solid #1199ff;
	outline-offset: 3px;
}

/* ── 10. Spamschutz-Hinweis ──────────────────────────────────────────── */
#gespraechVereinbarenModal .wb-cf7-consent-hint {
	margin: 1.35rem 0 0;
	padding: 0.8rem 1.05rem;
	font-size: 0.8125rem;
	background-color: rgba(16, 14, 12, 0.36);
	border-left: 3px solid #4fc3c5;
	border-radius: 0 10px 10px 0;
	color: rgba(255, 255, 255, 0.88);
}

#gespraechVereinbarenModal .wb-cf7-consent-hint__btn {
	color: #7fd7d8;
}

/* ── 11. Rueckmeldungen ──────────────────────────────────────────────── */
#gespraechVereinbarenModal .wpcf7-response-output {
	margin: 1.5rem 0 0 !important;
	padding: 0.9rem 1.15rem;
	border-radius: 10px;
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
	font-size: 0.9375rem;
	line-height: 1.5;
}

#gespraechVereinbarenModal .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #ffb4a8;
}

/* Ohne das bliebe der Hinweis unter dem Feld die einzige Markierung — auf
   sechs gleich aussehenden hellen Kaesten ist das zu wenig. */
#gespraechVereinbarenModal .pop-up-form input.wpcf7-not-valid,
#gespraechVereinbarenModal .pop-up-form select.wpcf7-not-valid {
	border: 1px solid #d1584a;
	box-shadow: 0 0 0 3px rgba(209, 88, 74, 0.28);
}

#gespraechVereinbarenModal .screen-reader-response {
	color: inherit;
}

/* ── Die Bestaetigung nach dem Absenden (10.09.2026) ───────────────────────
   Sie tritt an die Stelle des Formulars, statt darunter zu haengen. Der
   Kasten ist dunkel, deshalb ist hier alles hell — und der Knopf traegt
   dieselbe cremefarbene Fuellung wie der Absendeknopf daneben, damit er als
   dasselbe Bauteil gelesen wird und nicht als Warnung. */
#gespraechVereinbarenModal .wb-kontakt-danke {
	padding: 2rem 0 0.5rem;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
}

#gespraechVereinbarenModal .wb-kontakt-danke__titel {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

#gespraechVereinbarenModal .wb-kontakt-danke__text {
	margin: 0 0 1.75rem;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.6;
	color: #ffffff;
}

/* Das Element davor: `.wb-seo a` und die Modal-Regeln faerben jeden Link,
   und eine reine Klasse verliert dagegen. Derselbe Grund wie beim mobilen
   Knopf am 07.09.2026 — schwarze Schrift auf schwarzem Grund. */
#gespraechVereinbarenModal a.wb-kontakt-danke__tel,
#gespraechVereinbarenModal .wb-kontakt-danke__text a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

#gespraechVereinbarenModal button.wb-kontakt-danke__btn {
	min-height: 44px;
	padding: 12px 24px;
	background-color: var(--wb-creme, #F5F2EE);
	color: #333333;
	border: 1px solid var(--wb-creme, #F5F2EE);
	border-radius: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
}

#gespraechVereinbarenModal button.wb-kontakt-danke__btn:hover {
	opacity: 0.88;
}

/* ── 12. Schmale Schirme ─────────────────────────────────────────────────
   `style.min.css` stellt `.pop-up-form` ab 992px auf `flex-direction: column`
   und beide Spalten auf volle Breite. Das war richtig, solange der Kasten
   seitenbreit war — seit dem zweiten Nachschliff ist er 52rem breit, und
   zwischen 769 und 992 haetten beide Spalten bequem Platz. Gestapelt wuerde
   das Fenster dort ohne Not so hoch, dass es in sich scrollt.

   Deshalb steht die Richtung in diesem Bereich ausdruecklich wieder auf
   `row`, und der Umbruch faellt auf 768px. Der Grund, warum es beim ersten
   Entwurf falsch war, gilt weiter: es darf nur EINEN Umbruchpunkt geben.
   Der liegt jetzt hier statt im Theme — und deshalb muss die Richtung im
   Bereich darueber aktiv zurueckgeholt werden, nicht bloss die Basis. */
@media (min-width: 769px) and (max-width: 992px) {
	#gespraechVereinbarenModal .pop-up-form {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

/* Gestapelt ist `flex-basis` eine HOEHE, keine Breite. 18rem waeren dann
   eine Mindesthoehe je Spalte. */
@media (max-width: 768px) {
	#gespraechVereinbarenModal .pop-up-form__left,
	#gespraechVereinbarenModal .pop-up-form__right {
		flex: 0 0 auto;
	}
}

@media (max-width: 640px) {
	#gespraechVereinbarenModal {
		padding: 1rem 0.75rem;
	}

	#gespraechVereinbarenModal .modal-content {
		padding: 1.75rem 1.25rem 2rem !important;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   KEIN SPRUNG BEIM OEFFNEN DES BURGER-MENUES (04.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   ── DER BEFUND, IM BROWSER GEMESSEN ───────────────────────────────────────
   `assets/js/app.min.js` schaltet beim Klick auf den Burger die Klasse
   `lock-scroll` auf den <body>, und die setzt `overflow: hidden`. Damit
   verschwindet die senkrechte Scrollleiste — und die fuenfzehn Pixel, die
   sie belegt hat, gibt die Seite frei:

       clientWidth vorher   885 px
       clientWidth nachher  900 px

   Alles wird also fuenfzehn Pixel breiter. Das ist der „kleine Sprung oder
   Zoom": kein Zoom, sondern eine Seite, die schlagartig breiter wird.
   Dasselbe passiert beim Kontaktfenster, das dieselbe Klasse benutzt.

   ── DREI WEGE, DIE NICHT FUNKTIONIERT HABEN ───────────────────────────────
   Alle drei am ausgelieferten Stand ausprobiert, nicht ueberlegt:

   1. `scrollbar-gutter: stable` — wirkungslos. Die Eigenschaft reserviert
      keinen Platz, wenn `overflow: hidden` gilt; der Sprung blieb bei
      exakt 15 px, auf <html> wie auf <body>.
   2. `padding-right` auf dem <body> — wirkungslos. Die Abschnitte richten
      sich nicht nach der Body-Breite; Hero, Inhalt und Fussbereich wurden
      trotzdem breiter.
   3. `<html>` dauerhaft mit `overflow-y: scroll` — haelt zwar die Breite,
      SETZT ABER DEN SCROLLSTAND AUF NULL. Wer in der Mitte der Seite das
      Menue oeffnet, steht danach oben. Ein kleiner Sprung gegen einen
      grossen getauscht.

   ── WAS FUNKTIONIERT ──────────────────────────────────────────────────────
   `padding-right` auf dem <html>-Element. Gemessen bleiben Hero, Inhalt,
   Fussbereich, das Burger-Symbol UND der Scrollstand unveraendert.

   Die Navigation braucht ihre eigene Zeile: sie ist `position: fixed` und
   haengt damit am Ansichtsfenster, nicht am Innenabstand von <html>. Und
   sie braucht `border-box` dazu, sonst addiert sich das Polster auf ihre
   Breite, statt sie von innen zu verkleinern — dann wandert das
   Burger-Symbol wieder um dieselben 15 px.

   Dass die Leiste selbst fuenfzehn Pixel breiter wird, ist gewollt: sie
   fuellt genau den Streifen, den die Scrollleiste freigegeben hat.

   ── DIE BREITE STEHT NICHT FEST IM CODE ───────────────────────────────────
   `--wb-leiste` misst footer.php zur Laufzeit. Auf einem Mac mit
   ueberlagernden Scrollleisten sind es null Pixel — dort gibt es den
   Sprung gar nicht, und ein fest eingetragener Wert wuerde einen
   erzeugen, wo keiner war.
   ══════════════════════════════════════════════════════════════════════════ */

html.wb-leiste-ausgleich {
	padding-right: var(--wb-leiste, 0px);
}

html.wb-leiste-ausgleich nav {
	box-sizing: border-box;
	padding-right: var(--wb-leiste, 0px);
}


/* ══════════════════════════════════════════════════════════════════════════
   DIE AUGENBRAUE IM HERO DER STARTSEITE                          04.09.2026
   ══════════════════════════════════════════════════════════════════════════
   Sie traegt das Suchwort („Immobilienmakler fuer Bremen und die Region"),
   das weder im Titel noch in der H1 vorkam. Begruendung im Kopf von
   inc/template-parts/hero-section.php.

   ── SIE UEBERNIMMT EINE VORHANDENE FORM, STATT EINE ZWEITE ZU ERFINDEN ────
   Dieselbe Gestaltung wie `.wissen-hero-kategorie` weiter oben: klein,
   Versalien, weit gesperrt, weiss. Zwei Augenbrauen in zwei Formen waeren
   zwei Formen zu viel — und der Wissen-Bereich hat seine zuerst gehabt.

   ── WARUM NICHT `.wissen-hero-kategorie` MITBENUTZEN ──────────────────────
   Weil der Klassenname dann luege. Eine Klasse, die „Wissen-Kategorie"
   heisst und im Hero der Startseite steht, kostet den naechsten Leser genau
   die Minute, die dieser Absatz spart.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-section-main__eyebrow {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 14px;
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO: ZWEITER KNOPF UND DIE DREI ZUSAGEN                      04.09.2026
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DIE ECKEN (04.09.2026) ───────────────────────────────────────────────
   `btn-big` aus `style.min.css` liefert die Knoepfe mit `border-radius: 0`.
   Gemessen: 0 px, waehrend im Vertrauensblock direkt darunter 9, 10 und
   14 px stehen — die Seite sprach an dieser Stelle zwei Formensprachen.

   10 px, weil das der Wert des Bewertungs-Knopfes in der Handlungskarte
   ist: die beiden sind die HANDLUNGEN der Startseite und sollen dieselbe
   Form haben. Nicht 14 (das gehoert den Karten, nicht den Knoepfen) und
   nicht rund (der runde Pfeil in der Suchleiste ist der einzige Kreis und
   soll es bleiben). */
.hero-section-main__cta .btn-big {
	border-radius: 10px;
}

/* Die Knopfzeile wird zur Reihe. `gap` statt Rand: ein Rand am letzten Knopf
   verschoebe die Zeile aus der Mitte, und genau das faellt im Hero auf. */
.hero-section-main__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0;
}

/* ── DIE RANGFOLGE DER BEIDEN KNOEPFE ─────────────────────────────────────
   Der erste ist gefuellt, der zweite im Umriss.

   Gefuellt heisst hier CREMEFARBEN, nicht dunkel: „auf dieser Flaeche kehrt
   der Knopf sich um" — dieselbe Regel wie im Marktbericht-Baustein und im
   Kontaktfenster. Eine dunkle Fuellung waere auf dem Foto ein Loch.

   Der erste Entwurf hat die Rangfolge ueber die Rahmenstaerke versucht
   (2 px gegen 1 px, gleiches Schriftgewicht). Gemessen: beide Knoepfe
   242 px breit, der Unterschied auf dem Bild nicht zu sehen. Zwei gleich
   laute Angebote sind kein Angebot. */
/* ── ANTHRAZIT UND WEISS, AUF ANSAGE DES BETREIBERS (04.09.2026) ──────────
   Der erste Knopf war zwischenzeitlich cremefarben (#F7F4ED), nach der
   Umkehrregel des Marktbericht-Bausteins. Der Betreiber hat das zweimal
   anders bestellt und beim zweiten Mal ausdruecklich: anthrazit fuer den
   ersten, „NICHT CREME oder SAND. Einfach weiss!" fuer den zweiten.

   Das beruehrt die CI-Regel zur Rationierung dunkler Flaechen — auf einem
   Foto ist eine dunkle Fuellung normalerweise ein Loch. Hier traegt sie
   trotzdem, weil der zweite Knopf daneben reinweiss ist: die beiden bilden
   ein Paar, und das Paar liest sich als eine Entscheidung mit zwei
   Antworten statt als zwei konkurrierende Angebote.

   Beide GEFUELLT, keiner im Umriss: auf dem Bild gewinnt die Flaeche gegen
   die Linie. */
.hero-section-main__cta .btn-umriss-hell--voll {
	background: var(--wb-ink, #333333);
	border-color: var(--wb-ink, #333333);
	color: #ffffff;
}

.hero-section-main__cta .btn-umriss-hell--voll:hover {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

/* Reinweiss (#ffffff), NICHT das Creme der Marke. Ausdrueckliche Ansage. */
.hero-section-main__cta .btn-umriss-hell--leise {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--wb-ink, #333333);
}

.hero-section-main__cta .btn-umriss-hell--leise:hover {
	background: transparent;
	color: #ffffff;
}

/* ── Die drei Zusagen ─────────────────────────────────────────────────────
   Sie stehen unter den Knoepfen und duerfen NICHT wie eine vierte Handlung
   aussehen: kleiner Text, kein Rahmen, keine Flaeche. Was sie tragen, ist
   der Haken — er sagt „erledigt", nicht „hier klicken". */
.hero-section-main__zusagen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 30px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.hero-section-main__zusagen li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #ffffff;
}

.hero-zusage__haken {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

/* Kreis gefuellt, Haken ausgespart: auf dem Foto liest sich das auch dort
   noch, wo der Hintergrund hell ist. Ein Haken ohne Kreis verschwaende in
   der Wasserspiegelung. */
.hero-zusage__haken circle { fill: #ffffff; }
.hero-zusage__haken path   { stroke: var(--wb-ink, #333333); }


/* ══════════════════════════════════════════════════════════════════════════
   DER VERTRAUENSBLOCK DER STARTSEITE                            04.09.2026
   ══════════════════════════════════════════════════════════════════════════
   Drei Spalten unter dem Hero: die Argumente, der Beleg, der naechste
   Schritt. Begruendung im Kopf von
   `inc/template-parts/startseite-vertrauen.php`.

   ── DIE SPALTENBREITEN SIND NICHT GLEICH ──────────────────────────────────
   1,15fr / 1fr / 0,95fr. Die Argumente brauchen die meiste Zeile, weil dort
   fuenf Zeilen Text stehen; die Handlungskarte die wenigste, weil sie aus
   vier kurzen Bloecken besteht. Drei gleiche Spalten saehen ordentlicher aus
   und laesen sich schlechter.

   ── UMBRUCH IN ZWEI SCHRITTEN ─────────────────────────────────────────────
   Unter 1100 px stehen Argumente und Beleg nebeneinander, die Handlungskarte
   darunter ueber die volle Breite. Erst unter 780 px alles untereinander.
   Der Zwischenschritt existiert, weil die Handlungskarte quer besser
   aussieht als zu dritt gequetscht.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   ZUERST: box-sizing. DAS WAR DER FEHLER.
   ══════════════════════════════════════════════════════════════════════════
   Das Theme setzt `border-box` an dreizehn Stellen — aber NICHT global. Der
   Knopf der Handlungskarte erbte deshalb `content-box`, und `width: 100 %`
   meint dort die Flaeche OHNE Polster und Rahmen. Gemessen am 04.09.2026 auf
   der ausgelieferten Seite:

       Platz in der Karte      312 px
       Knopf tatsaechlich      340 px      (100 % + 2x12 Polster + 2x2 Rahmen)
       Ueberstand               28 px      davon 5 px ueber die Kartenkante

   Der Knopf stand also sichtbar aus seinem Feld heraus. Der
   Marktbericht-Baustein hat gegen genau das seit dem 03.09. einen Reset
   (`.wb-mb *`); dieser Block hatte keinen. Zwei Bausteine, dieselbe Falle,
   einmal bedacht und einmal vergessen.
   ══════════════════════════════════════════════════════════════════════════ */

.wb-vertrauen,
.wb-vertrauen *,
.wb-vertrauen *::before,
.wb-vertrauen *::after {
	box-sizing: border-box;
}

/* ── DER BLOCK RUECKT NACH OBEN ───────────────────────────────────────────
   Zwischen Hero und Block klafften 213 px. Nur 37 davon waren mein Polster —
   die anderen 176 sind die Marge, die `.hero-section-main` aus
   `style.min.css` mitbringt. An meinen eigenen Werten zu drehen haette also
   hoechstens ein Sechstel des Abstands bewegt.

   Nur auf der STARTSEITE (`body.home`): auf allen anderen Seiten folgt dem
   Hero kein Vertrauensblock, und dort ist die grosse Marge richtig. */
body.home .hero-section-main {
	margin-bottom: clamp(28px, 3vw, 46px);
}

/* ── DIE H1 DER STARTSEITE IST EIN SATZ, KEIN SCHILD ──────────────────────
   `style.min.css` setzt `.hero-section-main h1 { text-transform: uppercase;
   font-weight: 500 }`. Solange dort „Ihr persoenlicher Immobilienmakler im
   Herzen des Nordens" stand, war das eine Zeile in Versalien — vertretbar.

   Seit dem 04.09.2026 steht dort ein SATZ mit Punkt: „Jede
   Immobiliensituation ist anders – schildern Sie uns Ihre." In Versalien
   gesetzt ruft ein Satz, statt zu sprechen; die Skizze des Betreibers zeigt
   ihn in Satzschrift, und in Versalien war er ausserdem 128 statt 53 Pixel
   hoch (gemessen bei 1.600 px).

   NUR auf der Startseite: die uebrigen Seiten tragen dort weiterhin
   Titelzeilen, keine Saetze. */
body.home .hero-section-main h1 {
	text-transform: none;
	font-weight: 300;
	font-size: clamp(30px, 3.3vw, 46px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.wb-vertrauen {
	--wb-stern: var(--wb-ink, #333333);   /* auf Gold umstellen: ein Wert */

	/* ── EIN POLSTER FUER ALLE DREI SPALTEN ───────────────────────────────
	   Die beiden Karten hatten verschiedene Werte (34 px und 38 px), und die
	   linke Spalte gar keinen. Gemessen am 04.09.2026 bei 1440 px begann der
	   Text der drei Spalten bei 742, 777 und 780 Pixeln — drei Anfaenge auf
	   drei Hoehen.

	   Ein gemeinsamer Wert ist die halbe Miete fuer „alles auf einer Linie";
	   die andere Haelfte ist das `padding-top` der linken Spalte weiter
	   unten, das kein Kasten, aber derselbe Abstand ist. */
	--wb-v-polster: clamp(18px, 1.6vw, 24px);

	/* Oben knapper als unten: das zieht den Block naeher an den Hero heran,
	   ohne ihn an den folgenden Abschnitt zu kleben. Zusammen mit den
	   kleineren Schriftgraden bringt das den Abschnitt von 649 auf 434
	   Pixel — genau das Drittel, das der Betreiber verlangt hat. */
	padding: clamp(28px, 2.6vw, 40px) 0 clamp(32px, 3.2vw, 48px);
	background: #ffffff;
	font-family: "Montserrat", sans-serif;
}

/* ── DREI GLEICH BREITE SPALTEN ───────────────────────────────────────────
   Vorher 1,15 / 1 / 0,95 — nach der Ueberlegung, die linke Spalte trage mit
   fuenf Zeilen den meisten Text. Gemessen war das Ergebnis 398 / 346 /
   329 px, und die SCHMALSTE Spalte trug die laengsten Woerter: „Was ist Ihre
   Immobilie wirklich wert?" brach auf drei Zeilen und trennte dabei
   „Im-mobilie", der Knopf darunter auf zwei.

   Die Bullets links brechen dagegen gutmuetig — sie sind kurz und ihr
   Umbruch faellt nicht auf. Gleiche Drittel geben der rechten Spalte rund
   28 px zurueck, und das reicht.

   ── `stretch` STATT `start` ──────────────────────────────────────────────
   Der Kern der Sache. Mit `start` ist jede Spalte so hoch wie ihr Inhalt:
   gemessen 394 / 397 / 423 px, also drei verschiedene Unterkanten. Mit
   `stretch` sind alle drei so hoch wie die hoechste, und die Elemente, die
   unten stehen sollen, werden per `margin-top: auto` dorthin geschoben. */
/* ── BREITER ALS DIE UEBRIGEN ABSCHNITTE ──────────────────────────────────
   `container-content` deckelt bei 1.160 px. Bei 1.600 px Fenster blieben
   damit 220 px Rand auf jeder Seite — gemessen —, und drei Spalten a 347 px
   wirkten in dieser Flaeche verloren.

   Dieser Block ist der einzige der Seite, der DREI Spalten nebeneinander
   traegt; er braucht die Breite, die ein Fliesstext nicht braucht. 1.400 px
   lassen bei 1.600 noch 100 px Rand je Seite und bleiben unter der
   randlosen Breite der Karte darunter.

   Der Abstand zwischen den Spalten waechst mit: mehr Breite ohne mehr Luft
   dazwischen ergaebe drei Bloecke, die aneinanderkleben. */
.wb-vertrauen__raster {
	max-width: 1400px;
	display: grid;
	/* ── DIE LINKE SPALTE IST SCHMALER, UND DAS HAT EINEN GRUND ────────────
	   Mit drei gleichen Dritteln sind die KAESTEN gleich weit auseinander —
	   auf der ausgelieferten Seite gemessen: 58 und 58 Pixel. Gesehen wird
	   trotzdem ein Unterschied, und der Betreiber hat ihn gemeldet.

	   Ursache: die beiden Karten haben eine Kante, die linke Spalte hat
	   blossen Text. Der laengste Aufzaehlungspunkt endete 30 px vor der
	   Spaltenkante (mit `Range.getClientRects()` an den echten Zeilen
	   gemessen, nicht am Kasten). Der Blick misst von der letzten Letter
	   bis zur Kartenkante — also 88 px links gegen 58 px rechts.

	   Eine schmalere Spalte laesst den Text naeher an die eigene Kante
	   ruecken. Die 30 px gehen an die beiden Karten, die sie ohnehin besser
	   brauchen koennen als eine Aufzaehlung. */
	grid-template-columns: 0.9fr 1fr 1fr;
	gap: clamp(28px, 3.6vw, 60px);
	align-items: stretch;
}

/* Alle drei Spalten sind Saeulen: oben faengt der Inhalt an, unten wird das
   letzte Element an die Kante geschoben. Nur so stehen sowohl die ersten als
   auch die letzten Zeilen auf einer Linie. */
.wb-vertrauen__warum,
.wb-stimmenkarte,
.wb-startkarte {
	display: flex;
	flex-direction: column;
}

/* ── DIE LINKE SPALTE HAT GAR KEIN POLSTER ────────────────────────────────
   Das ist die dritte Fassung dieser Regel, und die Begruendung ist es wert:

   Zuerst hatte sie keins — dann begann ihr Text auf der Oberkante der
   beiden Karten, waehrend deren Text 24 px tiefer stand. Ich habe daraufhin
   oben und unten dasselbe Polster wie die Karten gesetzt, damit die TEXTE
   fluchten. Am 04.09.2026 hat der Betreiber daran zweimal beanstandet, die
   linke Spalte stehe nicht auf einer Hoehe.

   ── WARUM ER RECHT HAT, OBWOHL DIE MESSUNG FLUCHTETE ──────────────────────
   Auf der ausgelieferten Seite gemessen: Kastenoberkanten 986/986/986,
   Ueberschriften 1049/1049, Unterkanten 1313/1313/1313. Rechnerisch war
   alles buendig.

   Nur sieht das Auge keine Rechnung. Die beiden Karten haben eine SICHTBARE
   Kante bei 986; die linke Spalte hat keine, ihr erstes Sichtbares ist Text
   bei 1010. Verglichen wird Kante mit Text — und der Text steht dann 24 px
   zu tief.

   Ohne Polster deckt sich der Textblock links mit den Kanten der Karten.
   Das fluchtet nicht nur, es SIEHT auch so aus, und darauf kommt es an. */
.wb-vertrauen__warum {
	padding: 0;
}

/* ── KEINE AUTOMATISCHE SILBENTRENNUNG IN DEN UEBERSCHRIFTEN ──────────────
   Das Theme setzt `hyphens: auto` (gemessen). In Fliesstext ist das
   richtig; in einer 30-px-Ueberschrift ergibt es „Was ist Ihre Im-mobilie
   wirklich wert?" — und ein getrenntes Markenwort liest sich wie ein
   Satzfehler. */
.wb-vertrauen__titel,
.wb-startkarte__titel {
	hyphens: manual;
}

@media (max-width: 1100px) {
	.wb-vertrauen__raster { grid-template-columns: 1fr 1fr; }
	.wb-startkarte { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
	.wb-vertrauen__raster { grid-template-columns: 1fr; }
	.wb-startkarte { grid-column: auto; }
}

/* ── Spalte 1: die Argumente ──────────────────────────────────────────── */

.wb-vertrauen__kicker,
.wb-startkarte__kicker {
	margin: 0 0 9px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wb-ink-soft, #5A544F);
}

/* ── DIE ZEILE LINKS SITZT AUF DER KANTE DER BEIDEN KARTEN ────────────────
   Die Spalte hat kein Polster, ihr Kasten beginnt also exakt dort, wo die
   Karten ihre Kante haben. Die BUCHSTABEN begannen trotzdem deutlich tiefer,
   und danach sieht man.

   Am 04.09.2026 auf der ausgelieferten Seite ausgerechnet, mit den echten
   Glyphenmassen aus `measureText()` statt geschaetzt:

       Schriftgrad                       11 px
       Zeilenhoehe (aus dem Theme)       27 px   <- der Uebeltaeter
       halber Durchschuss                 8 px
       Rest bis zur Versaloberkante       3,3 px
       ────────────────────────────────────────
       Versalien standen                 11,3 px unter der Kastenoberkante

   Die 27 px kommen aus der `p`-Regel des Themes und sind fuer einen
   Fliesstext richtig — fuer eine 10-px-Marke sind sie das Zweieinhalbfache
   ihrer eigenen Hoehe.

   `line-height: 1` nimmt den Durchschuss weg. Der Rest von rund 3 px ist
   der Abstand zwischen Zeilenoberkante und Versalhoehe der Schrift selbst;
   den holt der negative Rand. Er ist an Montserrat gebunden — wer die
   Schrift wechselt, misst ihn neu. */
.wb-vertrauen__warum .wb-vertrauen__kicker {
	line-height: 1;
	margin-top: -3px;
}

.wb-vertrauen__titel,
.wb-startkarte__titel {
	margin: 0 0 16px;
	/* Eine Stufe kleiner, damit „Mehr als ein Makler." in eine Zeile passt.
	   Zweizeilig bestimmte diese Ueberschrift die Hoehe der ganzen Reihe —
	   und damit den Leerraum in den beiden Karten daneben. */
	font-size: clamp(20px, 1.65vw, 24px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wb-ink, #333333);
	/* Die H2 des Themes traegt sonst Versalien aus style.min.css. Hier nicht:
	   „Mehr als ein Makler." ist ein Satz und soll wie einer gelesen werden. */
	text-transform: none;
}

.wb-vorteile {
	margin: 0 0 20px;
	/* Der Abstand nach unten ist eine Untergrenze, kein fester Wert: was
	   darueber hinausgeht, verteilt `margin-top: auto` am Knopf. */
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.wb-vorteil {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	/* 13 px, nicht 14: drei der fuenf Punkte brechen in einer 358-px-Spalte
	   auf zwei Zeilen, und JEDE dieser Zeilen bestimmt die Hoehe der ganzen
	   Reihe — und damit den Leerraum in den beiden Karten daneben. Eine
	   Stufe kleiner spart zwei Umbrueche. */
	font-size: 13px;
	line-height: 1.45;
	color: var(--wb-ink, #333333);
}

.wb-vorteil__haken {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	margin-top: 1px;
}

.wb-vorteil__haken circle { fill: var(--wb-ink, #333333); }
.wb-vorteil__haken path   { stroke: #ffffff; }

/* Der Weiterweg ist ein Umriss, keine Flaeche: die einzige gefuellte dunkle
   Flaeche dieses Abschnitts gehoert der Handlungskarte rechts. Zwei davon
   nebeneinander teilen die Aufmerksamkeit statt sie zu buendeln. */
.wb-vertrauen__mehr {
	/* An die Unterkante geschoben — dadurch endet die linke Spalte auf
	   derselben Linie wie die beiden Karten. `align-self` haelt den Knopf
	   dabei auf seiner natuerlichen Breite; ohne das zoege ihn die Saeule
	   ueber die ganze Spalte. */
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid var(--wb-edge, #847870);
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wb-ink, #333333);
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}

.wb-vertrauen__mehr:hover {
	background: var(--wb-sand, #E3DDD8);
	border-color: var(--wb-ink, #333333);
	color: var(--wb-ink, #333333);
}

.wb-vertrauen__pfeil { transition: transform .2s; }
.wb-vertrauen__mehr:hover .wb-vertrauen__pfeil,
.wb-startkarte__knopf:hover .wb-vertrauen__pfeil { transform: translateX(3px); }

/* ── Spalte 2: der Beleg ──────────────────────────────────────────────── */

.wb-stimmenkarte {
	display: flex;
	flex-direction: column;
	padding: var(--wb-v-polster);
	border: 1px solid var(--wb-line, #C9C0B7);
	border-radius: 14px;
	background: #ffffff;
}

/* ── DIE STERNE ───────────────────────────────────────────────────────────
   Zwei Schichten uebereinander: eine blasse volle Reihe, darueber dieselbe
   Reihe in der Akzentfarbe, auf den echten Anteil beschnitten. 4,9 von 5
   ergibt 98 % — vier volle Sterne und einer fast voll.

   Fuenf volle Sterne zu zeigen waere eine kleine Uebertreibung an genau der
   Stelle, an der Vertrauen entstehen soll.

   `--wb-stern` steht oben auf dem Abschnitt. Wer Gold will, aendert dort
   einen Wert und sonst nichts. */
.wb-sterne {
	position: relative;
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 1px;
}

.wb-sterne__leer { color: var(--wb-line, #C9C0B7); }

.wb-sterne__voll {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--wb-stern);
}

.wb-sterne__wert {
	margin: 8px 0 14px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wb-ink-soft, #5A544F);
}

.wb-sterne__wert strong { color: var(--wb-ink, #333333); }

/* ── DER LEERRAUM WIRD VERTEILT, NICHT GESAMMELT ──────────────────────────
   Die linke Spalte ist mit fuenf Punkten die hoechste, und `stretch` zieht
   die beiden Karten auf dieselbe Hoehe. Der Ueberschuss muss also irgendwo
   hin — die Frage ist nur, wohin.

   Gesammelt an einer Stelle sieht er aus wie ein Fehler: gemessen am
   04.09.2026 klaffte zwischen Zitat und Fusszeile ein Loch von 87 Pixeln.
   Auf die beiden Seiten des Zitats verteilt liest er sich als Luft. */
.wb-stimmenkarte__buehne {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wb-stimme { margin: 0; }

.wb-stimme__text {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--wb-ink, #333333);
	/* Die Anfuehrungszeichen stehen im Markup, nicht als CSS-Beiwerk: sie
	   gehoeren zum Zitat und muessen mitkopiert werden. */
	quotes: none;
}

.wb-stimme__meta {
	font-size: 12px;
	line-height: 1.5;
	color: var(--wb-ink-soft, #5A544F);
}

.wb-stimme__einzelfall {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--wb-edge, #847870);
}

.wb-stimmenkarte__steuerung {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 13px;
	border-top: 1px solid var(--wb-line, #C9C0B7);
}

/* 44 px sind die kleinste Flaeche, die sich zuverlaessig treffen laesst —
   auch mit der Maus, nicht nur am Finger. */
.wb-stimmen__pfeil {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--wb-line, #C9C0B7);
	border-radius: 50%;
	background: none;
	font-size: 17px;
	color: var(--wb-ink, #333333);
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.wb-stimmen__pfeil:hover {
	border-color: var(--wb-ink, #333333);
	background: var(--wb-sand, #E3DDD8);
}

.wb-stimmen__pfeil:focus-visible,
.wb-stimmen__punkt:focus-visible {
	outline: 2px solid var(--wb-focus, #1199FF);
	outline-offset: 2px;
}

.wb-stimmen__punkte { display: flex; gap: 9px; }

/* Der Punkt selbst ist 9 px, die Trefferflaeche 26 — das Polster ist
   durchsichtig und zaehlt trotzdem. Ein 9-px-Ziel waere unbedienbar. */
.wb-stimmen__punkt {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wb-line, #C9C0B7);
	cursor: pointer;
	box-shadow: 0 0 0 8px transparent;
	transition: background-color .2s;
}

.wb-stimmen__punkt.is-aktiv { background: var(--wb-ink, #333333); }

/* ── Spalte 3: der naechste Schritt ───────────────────────────────────── */

/* Sand, nicht Weiss: die Karte ist die einzige Flaeche des Abschnitts, die
   sich vom Grund abhebt — und damit die einzige, die „hier entlang" sagt. */
.wb-startkarte {
	padding: var(--wb-v-polster);
	background: var(--wb-sand, #E3DDD8);
	border-radius: 14px;
}

/* Kleiner als die H2 links: die Spalte ist rund 330 px breit, und mit der
   gemeinsamen Groesse brach „Was ist Ihre Immobilie wirklich wert?" auf drei
   Zeilen. Gemessen am 04.09.2026: 37,4 px Schrift, 129 px Hoehe, drei
   Zeilen. Zwei Zeilen lesen sich als eine Frage, drei als ein Absatz. */
.wb-startkarte__titel {
	margin-bottom: 10px;
	font-size: clamp(18px, 1.45vw, 21px);
}

.wb-startkarte__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wb-ink-soft, #5A544F);
}

/* Die EINE gefuellte dunkle Flaeche dieses Abschnitts. Die CI-Regel dazu
   steht in mobile/assets/css/critical.css: „#333333 ist Text UND
   Knopfflaeche und deshalb rationiert — jede zusaetzliche dunkle Flaeche
   nimmt dem Button genau so viel Wirkung, wie sie selbst gewinnt."
   Deshalb ist der Weiterweg links ein Umriss. */
.wb-startkarte__knopf {
	/* Der Ueberschuss steht VOR dem Knopf, nicht dahinter. Vorher hing die
	   Schlusszeile allein an der Unterkante und liess 78 Pixel zwischen sich
	   und dem Knopf — das sah nach vergessenem Inhalt aus. Jetzt sitzt die
	   Luft zwischen Beschreibung und Handlung, wo sie als Absatz gelesen
	   wird, und Knopf plus Schlusszeile bleiben zusammen. */
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	/* Waagerecht knapp gehalten: „Immobilienbewertung starten" ist 27
	   Zeichen und brach in der Spalte auf zwei Zeilen. */
	padding: 0 12px;
	border: 2px solid var(--wb-ink, #333333);
	border-radius: 10px;
	background: var(--wb-ink, #333333);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.wb-startkarte__knopf:hover {
	background: transparent;
	color: var(--wb-ink, #333333);
}

.wb-startkarte__knopf:focus-visible {
	outline: 2px solid var(--wb-focus, #1199FF);
	outline-offset: 3px;
}

/* `margin: auto 0 0` als EIN Wert, nicht `margin-top: auto` plus `margin: 0`.
   Der erste Entwurf hatte beides in dieser Reihenfolge, und die Kurzform
   weiter unten setzte das `auto` wieder auf null zurueck — die Zeile stand
   danach 85 px zu hoch, gemessen. Zwei Regeln fuer dieselbe Eigenschaft in
   einem Block gewinnt immer die letzte. */
.wb-startkarte__mikro {
	margin: 0;
	padding-top: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wb-ink-soft, #5A544F);
}

.wb-startkarte__schloss {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--wb-ink-soft, #5A544F);
}

.wb-startkarte__schloss rect { fill: var(--wb-ink-soft, #5A544F); stroke: none; }


/* ══════════════════════════════════════════════════════════════════════════
   DER VERKAUFSPROZESS ALS 3x2-RASTER                            04.09.2026
   ══════════════════════════════════════════════════════════════════════════
   Ersetzt den Textblock, der die sechs Schritte untereinander auffuehrte:
   2.146 px hoch, 26 % der Startseite. Begruendung im Kopf von
   `inc/template-parts/startseite-verkaufsprozess.php`.

   ── KEINE KARTEN, SONDERN EIN RASTER ──────────────────────────────────────
   Sechs Kaesten mit Rahmen, Radius und Schatten waeren sechs Dinge. Ein
   Raster mit Haarlinien ist EIN Ding mit sechs Feldern — und genau das soll
   der Prozess sein.

   Deshalb: keine Rahmen aussen, keine Radien, keine Schatten. Die Linien
   entstehen als 1-px-Kanten AN den Feldern, nicht als Rahmen UM sie.

   ── WIE DIE LINIEN ENTSTEHEN, OHNE DOPPELT ZU LIEGEN ──────────────────────
   Jedes Feld bekommt eine Linie oben und links; die erste Zeile verliert
   ihre obere, die erste Spalte ihre linke. So liegt zwischen zwei Feldern
   genau EINE Linie statt zweier aufeinander — zwei 1-px-Linien nebeneinander
   ergeben eine 2-px-Linie, und die sieht man.
   ══════════════════════════════════════════════════════════════════════════ */

/* Oben deutlich mehr Luft als unten. Der Abschnitt darueber endet mit drei
   Kaesten, dieser beginnt mit einem Raster — gemessen stiessen die beiden
   mit 0 px aneinander und liessen sichtbar nur 118 px zwischen dem letzten
   Text oben und dem ersten hier. Zusammen mit der Trennlinie darunter macht
   das aus zwei aneinandergeschobenen Abschnitten zwei Abschnitte. */
.wb-prozess {
	padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 4.4vw, 76px);
	background: #ffffff;
	font-family: "Montserrat", sans-serif;
}

/* Die Huelle traegt Breite und Seitenpolster; das Raster darunter ist nur
   noch das zweispaltige Gitter. Vorher war beides dieselbe Ebene — mit der
   Trennlinie ueber der vollen Breite geht das nicht mehr. */
.wb-prozess__innen {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(16px, 1.6vw, 24px);
}

/* ── DIE TRENNLINIE MIT DEM TEXT DARIN ────────────────────────────────────
   Zwei Striche als `::before`/`::after`, die sich den Rest der Zeile teilen.
   `flex: 1 1 0` auf beiden, damit der Text wirklich in der MITTE steht und
   nicht dort, wo seine Laenge ihn zufaellig hinstellt.

   Die Striche sind Gestaltung und stehen deshalb nicht im Text — ein
   Vorleseprogramm hoert nur die Einordnung. */
.wb-prozess__trenner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.8vw, 28px);
	margin: 0 0 clamp(34px, 3.4vw, 56px);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--wb-ink-soft, #5A544F);
}

.wb-prozess__trenner::before,
.wb-prozess__trenner::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--wb-line, #C9C0B7);
}

.wb-prozess *,
.wb-prozess *::before,
.wb-prozess *::after {
	box-sizing: border-box;
}

/* 40 / 60 — der Auftrag nennt 38–42 zu 58–62 Prozent. Die Textspalte traegt
   Ueberschrift und Knopf, das Raster sechs Felder; das Raster braucht mehr.
   Dieselbe Breite wie der Vertrauensblock darueber: die beiden sollen als
   ein Paar gelesen werden, nicht als zwei verschieden breite Abschnitte. */
.wb-prozess__raster {
	display: grid;
	grid-template-columns: 0.67fr 1fr;
	gap: clamp(32px, 4vw, 68px);
	align-items: start;
}

/* ── Links ────────────────────────────────────────────────────────────── */

.wb-prozess__kicker {
	margin: 0 0 12px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--wb-ink-soft, #5A544F);
}

/* `text-transform: none` ist noetig: `style.min.css` setzt h2 auf Versalien.
   Diese Ueberschrift ist ein Satz mit Punkt. */
.wb-prozess__titel {
	margin: 0 0 18px;
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.18;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	hyphens: manual;
	color: var(--wb-ink, #333333);
}

.wb-prozess__lead {
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wb-ink-soft, #5A544F);
}

/* Die EINE gefuellte Flaeche dieses Abschnitts — dieselbe Form und Groesse
   wie der Bewertungs-Knopf im Vertrauensblock darueber. Zwei Handlungen auf
   zwei Bildschirmhoehen sollen gleich aussehen, sonst wirkt die zweite wie
   eine andere Art von Angebot. */
.wb-prozess__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border: 2px solid var(--wb-ink, #333333);
	border-radius: 10px;
	background: var(--wb-ink, #333333);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.wb-prozess__cta:hover {
	background: transparent;
	color: var(--wb-ink, #333333);
}

.wb-prozess__cta:focus-visible {
	outline: 2px solid var(--wb-focus, #1199FF);
	outline-offset: 3px;
}

.wb-prozess__pfeil { transition: transform .2s; }
.wb-prozess__cta:hover .wb-prozess__pfeil { transform: translateX(3px); }

/* ── Rechts: das Raster ───────────────────────────────────────────────── */

.wb-prozess__gitter {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.wb-prozess__schritt {
	padding: clamp(18px, 1.8vw, 26px);
	border-top: 1px solid var(--wb-line, #C9C0B7);
	border-left: 1px solid var(--wb-line, #C9C0B7);
	transition: background-color .2s;
}

/* Erste Zeile ohne obere, erste Spalte ohne linke Kante — sonst rahmt das
   Raster sich selbst ein, und genau das soll es nicht. */
.wb-prozess__schritt:nth-child(-n + 3) { border-top: 0; }
.wb-prozess__schritt:nth-child(3n + 1) { border-left: 0; }

/* Sehr dezent, wie verlangt: nur die Flaeche wird eine Spur waermer. Kein
   Heben, kein Springen, keine Bewegung — der Prozess ist zum Lesen da. */
.wb-prozess__schritt:hover {
	background: #FBFAF8;
}

.wb-prozess__marke {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

/* Umriss, nie gefuellt. `currentColor` haelt Icon und Text zusammen. */
.wb-prozess__icon {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--wb-ink, #333333);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── DIE NUMMER IST GROSS UND FAST NICHT DA ───────────────────────────────
   Sie soll den Ablauf erkennbar machen, ohne wie eine Nummerierung zu
   wirken. Das gelingt ueber die GROESSE bei sehr geringem Kontrast: 26 px
   in einem Ton, der nur zwei Stufen ueber Weiss liegt. Waere sie klein und
   dunkel, laese man sie als Listenzeichen. */
.wb-prozess__nr {
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #E3DFDA;
}

.wb-prozess__schritt-titel {
	margin: 0 0 7px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wb-ink, #333333);
}

.wb-prozess__schritt-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wb-ink-soft, #5A544F);
}

/* ── Umbruch ──────────────────────────────────────────────────────────────
   Unter 1100 px stehen Text und Raster untereinander, das Raster bleibt
   dreispaltig. Erst unter 780 px wird es zweispaltig — einspaltig waere es
   wieder die lange Liste, die dieser Umbau gerade abgeschafft hat. */
@media (max-width: 1100px) {
	.wb-prozess__raster { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
	.wb-prozess__gitter { grid-template-columns: repeat(2, 1fr); }
	.wb-prozess__schritt:nth-child(-n + 3) { border-top: 1px solid var(--wb-line, #C9C0B7); }
	.wb-prozess__schritt:nth-child(3n + 1) { border-left: 1px solid var(--wb-line, #C9C0B7); }
	.wb-prozess__schritt:nth-child(-n + 2) { border-top: 0; }
	.wb-prozess__schritt:nth-child(2n + 1) { border-left: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   „WESERBURG IMMOBILIEN ALS PARTNER"                            04.09.2026
   ══════════════════════════════════════════════════════════════════════════
   Ersetzt den Baustein „Wichtiger Text" mit dieser Ueberschrift: 1.064 px
   hoch, 16 % der Startseite, 145 Woerter am Stueck. Begruendung im Kopf von
   `inc/template-parts/startseite-partner.php`.

   ── DER KAPITELWECHSEL ────────────────────────────────────────────────────
   Der Abschnitt davor erklaert, WAS beim Verkauf geschieht — sachlich,
   nummeriert, in einem Raster. Dieser erklaert, WIE beraten wird. Damit man
   das beim Scrollen merkt, ohne es zu lesen, wechselt der Grund von Weiss
   auf ein warmes Creme.

   ── WELCHES CREME, UND WARUM DIESES ────────────────────────────────────────
   `#F5F2EE`, auf Ansage des Betreibers vom 04.09.2026. Er hat die Farbe
   gemessen und benannt:

       urspruenglich   R 0,959  G 0,951  B 0,940   ->  #F5F2EE
       mein Entwurf    R 0,966  G 0,959  B 0,936   ->  #F7F4ED

   (Beide Messungen tragen dieselbe kleine Abweichung — Farbmanagement des
   Bildschirms. Der Abstand zu #F5F2EE ist 2,7, der zu #F7F4ED 6,7.)

   **DIESER TON IST NICHT AUS DEM THEME.** Er stand ausschliesslich in dem
   Backend-Schnipsel, der diesen Abschnitt frueher per JavaScript umbaute.
   Das Theme fuehrt `#F7F4ED` — neunmal, im Marktbericht-Baustein und auf
   dem hellen Hero-Knopf. Mit dieser Zeile hat die Seite also ZWEI
   Creme-Toene, die sich um zwei Stufen unterscheiden.

   Das ist eine Entscheidung des Betreibers und keine des Themes. Wer sie
   spaeter vereinheitlichen will, hat zwei Wege: diesen Wert auf `#F7F4ED`
   zurueckdrehen, oder die neun anderen Fundstellen auf `#F5F2EE` ziehen.
   Beides ist eine Zeile bzw. eine Suche-und-Ersetze — aber es sollte
   jemand ENTSCHEIDEN, statt dass es so bleibt, weil niemand hingesehen hat.

   Bewusst weiterhin nicht das kraeftigere Sand `#E3DDD8`: das wirkte als
   Kasten. Der Ton soll den Rhythmus tragen, nicht auffallen.
   ══════════════════════════════════════════════════════════════════════════ */

.wb-partner {
	/* Oben grosszuegig: der Prozess darueber ist abgeschlossen, hier faengt
	   etwas Neues an. Der Farbwechsel allein traegt den Bruch nicht. */
	padding: clamp(52px, 5.2vw, 84px) 0 clamp(44px, 4.4vw, 70px);
	background: var(--wb-creme, #F5F2EE);
	font-family: "Montserrat", sans-serif;
}

.wb-partner *,
.wb-partner *::before,
.wb-partner *::after {
	box-sizing: border-box;
}

.wb-partner__innen {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(16px, 1.6vw, 24px);
}

/* 37 / 63 — der Auftrag nennt 35–40 zu 60–65 Prozent. Die linke Spalte soll
   bewusst leer bleiben; sie ist der Gegenpol zur Textspalte, kein zweiter
   Textblock. */
.wb-partner__raster {
	display: grid;
	grid-template-columns: 0.59fr 1fr;
	gap: clamp(36px, 4.6vw, 80px);
	align-items: start;
}

/* ── Links ────────────────────────────────────────────────────────────── */

.wb-partner__kicker {
	margin: 0 0 16px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wb-ink-soft, #5A544F);
}

/* `text-transform: none`: `style.min.css` setzt h2 auf Versalien. Der
   Firmenname gehoert nicht geschrien. */
.wb-partner__titel {
	margin: 0 0 26px;
	font-size: clamp(28px, 2.6vw, 40px);
	line-height: 1.16;
	font-weight: 600;
	letter-spacing: -0.015em;
	text-transform: none;
	hyphens: manual;
	color: var(--wb-ink, #333333);
}

/* Der kurze Strich. 56 px, drei Pixel stark — dieselbe Geste, die der
   Backend-Schnipsel vorher hatte; sie war das einzig Gute daran. Nur in
   `--wb-ink` statt in dessen `#1A1A1A`. */
.wb-partner__strich {
	width: 56px;
	height: 3px;
	background: var(--wb-ink, #333333);
}

/* ── Rechts ───────────────────────────────────────────────────────────── */

/* Die Absaetze muessen „auf den ersten Blick voneinander unterscheidbar"
   sein — ausdrueckliche Vorgabe. Das traegt der Abstand zwischen ihnen, und
   die begrenzte Zeilenlaenge: ueber rund 78 Zeichen findet das Auge den
   Zeilenanfang nicht mehr zuverlaessig. */
.wb-partner__spalte-rechts p {
	margin: 0 0 18px;
	/* 68 Zeichen: der Auftrag verlangt „keine zu langen Zeilen", und ueber
	   rund 75 findet das Auge den Zeilenanfang nicht mehr zuverlaessig. 62
	   waren es zuerst — das kostete drei Zeilen mehr, ohne besser lesbar zu
	   sein. */
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--wb-ink-soft, #5A544F);
}

.wb-partner__spalte-rechts p:last-of-type { margin-bottom: 30px; }

/* Derselbe Knopf wie im Verkaufsprozess: gleiche Form, gleiche Groesse,
   gleicher Radius. Zwei Handlungen auf zwei Bildschirmhoehen sollen gleich
   aussehen, sonst wirkt die zweite wie eine andere Art von Angebot. */
.wb-partner__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border: 2px solid var(--wb-ink, #333333);
	border-radius: 10px;
	background: var(--wb-ink, #333333);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.wb-partner__cta:hover {
	background: transparent;
	color: var(--wb-ink, #333333);
}

.wb-partner__cta:focus-visible {
	outline: 2px solid var(--wb-focus, #1199FF);
	outline-offset: 3px;
}

.wb-partner__pfeil { transition: transform .2s; }
.wb-partner__cta:hover .wb-partner__pfeil { transform: translateX(3px); }

/* ── Der waagerechte Abschluss: drei Prinzipien ───────────────────────────
   Keine Karten, keine Rahmen, keine Flaechen — nur eine Linie darueber und
   Haarlinien dazwischen. Dieselbe Bauart wie im Verkaufsprozess: die Linien
   entstehen AN den Feldern, das erste bekommt keine. */
.wb-partner__prinzipien {
	margin: clamp(38px, 3.8vw, 60px) 0 0;
	padding: clamp(26px, 2.6vw, 40px) 0 0;
	border-top: 1px solid var(--wb-line, #C9C0B7);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.wb-partner__prinzip {
	padding: 0 clamp(20px, 2.4vw, 40px);
	border-left: 1px solid var(--wb-line, #C9C0B7);
}

.wb-partner__prinzip:first-child { border-left: 0; padding-left: 0; }

.wb-partner__icon {
	width: 26px;
	height: 26px;
	margin-bottom: 14px;
	fill: none;
	stroke: var(--wb-ink, #333333);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wb-partner__prinzip-titel {
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wb-ink, #333333);
}

.wb-partner__prinzip-text {
	margin: 0;
	max-width: 30ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wb-ink-soft, #5A544F);
}

/* ── Umbruch ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.wb-partner__raster { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
	.wb-partner__prinzipien { grid-template-columns: 1fr; gap: 26px; }
	.wb-partner__prinzip { border-left: 0; padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NETZWERK — „Unser Netzwerk für Ihren Erfolg" (Paket 41, 07.09.2026)
   Gehört zu inc/template-parts/startseite-netzwerk.php. Die Begründungen für
   den AUFBAU stehen dort; hier steht nur, was das Aussehen betrifft.

   ── DER GRUND IST WIEDER #F5F2EE ───────────────────────────────────────────
   Derselbe Creme wie im Partner-Abschnitt, und aus demselben Grund: der
   Abschnitt davor (die Verkaufskarte) und der danach (der Bilderslider) sind
   weiß. Der Farbwechsel trägt den Rhythmus.

   Die beiden Cremeflächen liegen weit auseinander — Partner steht bei rund
   einem Drittel der Seite, dieser hier hinter der Karte. Sie verschmelzen
   also nicht; sie reimen sich.

   ── WAS INNEN NOCH EINMAL ABGESETZT IST ────────────────────────────────────
   Die Partnerleiste und der Abschluss. Beide bekommen keine eigene Fläche,
   sondern eine Haarlinie darüber. Drei Flächen übereinander wären ein
   Setzkasten; die Vorlage zeigt drei Bänder, die zusammengehören.
   ══════════════════════════════════════════════════════════════════════════ */

.wb-netz {
	padding: clamp(52px, 5.2vw, 84px) 0 0;
	background: var(--wb-creme, #F5F2EE);
	font-family: "Montserrat", sans-serif;
	color: var(--wb-ink, #333333);
}

.wb-netz *,
.wb-netz *::before,
.wb-netz *::after { box-sizing: border-box; }

.wb-netz__innen {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(16px, 1.6vw, 24px);
}

/* Links etwas breiter: dort steht die Zeichnung, und die braucht Fläche, um
   nicht zum Piktogramm zu schrumpfen.

   ── `stretch` STATT `start` (07.09.2026) ──────────────────────────────────
   Vorher stand hier `align-items: start`, und damit war die rechte Spalte nur
   so hoch wie ihr Inhalt: gemessen endete sie 158 px ÜBER dem Fuß der
   Zeichnung. Auf Ansage des Betreibers sollen beide Spalten auf derselben
   Grundlinie enden. Dafür muss die rechte Spalte erst einmal die volle Höhe
   bekommen — den Rest erledigt `margin-top: auto` an den Kennzahlen. */
.wb-netz__raster {
	display: grid;
	grid-template-columns: 1fr 0.82fr;
	gap: clamp(28px, 3.6vw, 64px);
	align-items: stretch;
}

/* ── Überschriften ─────────────────────────────────────────────────────── */

.wb-netz__kicker {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wb-ink-soft, #5A544F);
}

/* Der Kicker der rechten Spalte trägt in der Vorlage einen Strich, der die
   Zeile nach rechts austrägt. Als Flex-Kind, damit er den Rest der Zeile
   nimmt statt eine feste Breite zu raten. */
.wb-netz__kicker--strich {
	display: flex;
	align-items: center;
	gap: 14px;
}

.wb-netz__kicker--strich::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wb-line, #c9c0b7);
}

/* `text-transform: none`: style.min.css setzt h2 und h3 auf Versalien. */
.wb-netz__titel {
	margin: 0 0 clamp(18px, 2vw, 28px);
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.14;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-transform: none;
	text-align: left;
	hyphens: manual;
	color: var(--wb-ink, #333333);
}

.wb-netz__titel--rechts { margin-bottom: clamp(16px, 1.8vw, 24px); }

.wb-netz__absatz {
	margin: 0 0 16px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--wb-ink-soft, #5A544F);
}

/* Nur für Screenreader — Text, der die Bedienung erklärt, aber das Bild
   nicht stören darf. */
.wb-netz__vorlesen {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ══ DIE ZEICHNUNG ═════════════════════════════════════════════════════════
   Ein Quadrat. Alles darin sitzt in Prozent — die Mittelpunkte rechnet PHP
   aus den Winkeln aus und schreibt sie als `left`/`top` an die Knoten.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── LINKSBÜNDIG, NICHT MITTIG (07.09.2026) ────────────────────────────────
   Vorher `margin: 0 auto`. Bei 1440 px ergab das 47 px Luft zwischen der
   Spaltenkante und der Zeichnung — die Überschrift darüber begann also weiter
   links als das Bild darunter, und diese Stufe sah man.

   Auf Ansage des Betreibers steht die Zeichnung jetzt auf derselben Kante wie
   „Unser Netzwerk für Ihren Erfolg". Die Luft, die dadurch rechts von ihr
   entsteht, ist kein Verlust: der Kasten ist quadratisch, der Inhalt rund —
   an seinen Ecken war ohnehin nichts. Sie vergrößert den Abstand zur
   Textspalte, und der ist genau da richtig. */
/* ── DER KASTEN IST NICHT DAS BILD (07.09.2026, zweiter Anlauf) ────────────
   Beim ersten Versuch endeten beide Spalten auf derselben Linie — nur war
   das die Linie des KASTENS, nicht die des Bildes. Der Betreiber hat den
   Knopf rechts sofort als „zu tief" erkannt, und er hatte recht:

       Unterkante des Kastens      4372
       tiefste Beschriftung        4352
                                   ---- 20 px toter Streifen

   Der Kasten ist quadratisch, weil die Zeichnung rund ist. Ihre beiden
   unteren Kreise stehen aber nicht am tiefsten Punkt des Kreises, sondern
   bei 64°, und darunter bleibt Papier. Wer Kästen ausrichtet, richtet
   deshalb nicht aus, was man sieht.

   Zwei Zeilen beheben das:

   `margin-bottom: -22px` zieht die Unterkante des Kastens auf die
   Unterkante der tiefsten Beschriftung. 22 px, gemessen bei 660 px
   Kastenbreite — in der zweispaltigen Fassung ist der Kasten IMMER 660
   (die Spalte ist dort nie schmaler als 676), die Zahl ist also fest und
   nicht geraten.

   `max-width: 660px` statt 620 ist der zweite Teil, und der ist nicht
   Kosmetik: seit dem dritten Absatz ist die rechte Spalte zwischen 1320
   und 1420 px mit 777 px HÖHER als die Zeichnung mit 756. Sie gäbe dort
   die Zeilenhöhe vor, und unter der Zeichnung entstünde wieder ein Loch —
   nur auf der anderen Seite. Mit 660 misst die Zeichnung 794 und ist
   damit überall die höhere; `margin-top: auto` an den Kennzahlen hat
   immer Spiel.

   Nachgemessen bei 1320, 1366, 1400, 1440, 1600 und 1920 px: der Fuß des
   Knopfes steht auf 0 px genau auf der tiefsten Beschriftung. */
.wb-netz__diagramm {
	position: relative;
	width: 100%;
	max-width: 660px;
	aspect-ratio: 1 / 1;
	margin: 0 auto -22px 0;
}

.wb-netz__linien {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	overflow: visible;
}

/* Die Ringe sind das Leiseste im Bild: sie sollen die Ordnung zeigen, nicht
   das Auge halten. `vector-effect` hält die Linie bei jeder Größe gleich
   dünn — ohne das skaliert sie mit der viewBox und wird auf großen
   Bildschirmen zum Balken. */
.wb-netz__ring,
.wb-netz__speiche {
	stroke: var(--wb-line, #c9c0b7);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.55;
}

.wb-netz__ring--innen { opacity: 0.35; }
.wb-netz__punkt { fill: var(--wb-line, #c9c0b7); stroke: none; opacity: 0.8; }

/* ── Die Nabe ──────────────────────────────────────────────────────────── */

.wb-netz__nabe {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 28%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(51, 51, 51, 0.07);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	padding: 6%;
}

/* Die Striche über und unter „WB" — dieselbe Geste wie in der Wortmarke im
   Seitenkopf. */
.wb-netz__nabe-kuerzel {
	font-size: clamp(19px, 2.4vw, 32px);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 7px 2px;
	border-top: 1.5px solid var(--wb-ink, #333333);
	border-bottom: 1.5px solid var(--wb-ink, #333333);
	color: var(--wb-ink, #333333);
}

.wb-netz__nabe-name {
	font-size: clamp(6px, 0.72vw, 9px);
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wb-ink-soft, #5A544F);
}

/* ── Die sieben Knoten ─────────────────────────────────────────────────── */

.wb-netz__knoten {
	position: absolute;
	width: 21.5%;
	transform: translate(-50%, -50%);
}

/* Ein offener Knoten legt sich über seine Nachbarn, nicht unter sie. */
.wb-netz__knoten[open] { z-index: 6; }

.wb-netz__griff {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	border-radius: 50%;
}

/* Das Dreieck, das Safari und Chrome von sich aus vor ein `summary` setzen. */
.wb-netz__griff::-webkit-details-marker { display: none; }
.wb-netz__griff::marker { content: ""; }

.wb-netz__griff:focus-visible {
	outline: 2px solid var(--wb-focus, #1199ff);
	outline-offset: 4px;
}

/* Der weiße Ring um jedes Foto entsteht als zweiter Schatten, nicht als
   `border`: so bleibt das Bild volle Breite und der Kreis exakt rund. */
.wb-netz__kreis {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 0 0 5px #ffffff, 0 8px 22px rgba(51, 51, 51, 0.09);
	transition: transform .25s ease, box-shadow .25s ease;
}

.wb-netz__kreis img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wb-netz__griff:hover .wb-netz__kreis {
	transform: translateY(-2px);
	box-shadow: 0 0 0 5px #ffffff, 0 12px 26px rgba(51, 51, 51, 0.14);
}

/* Die Beschriftung sitzt auf der unteren Kante des Kreises. `white-space:
   nowrap` bis 1100 px: „Banken & Finanzierung" bricht sonst mitten im
   kaufmännischen Und. */
.wb-netz__name {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 45%);
	max-width: 190%;
	padding: 5px 13px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 3px 12px rgba(51, 51, 51, 0.10);
	font-size: clamp(9px, 0.82vw, 12px);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--wb-ink, #333333);
	text-align: center;
}

/* Das „+". Zwei Striche in einem weißen Kreis; im geöffneten Zustand dreht
   der senkrechte weg — aus dem Plus wird ein Minus, ohne zweites Symbol. */
.wb-netz__plus {
	position: absolute;
	right: 0;
	bottom: 15%;
	width: clamp(18px, 1.7vw, 24px);
	height: clamp(18px, 1.7vw, 24px);
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 2px 9px rgba(51, 51, 51, 0.16);
}

.wb-netz__plus::before,
.wb-netz__plus::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 44%;
	height: 1.5px;
	background: var(--wb-ink, #333333);
	transform: translate(-50%, -50%);
	transition: transform .2s ease, opacity .2s ease;
}

.wb-netz__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.wb-netz__knoten[open] .wb-netz__plus::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* Die Erläuterung. Sie schwebt unter ihrem Knoten und legt sich dabei über
   die Zeichnung — deshalb der kräftigere Schatten und der weiße Grund. */
.wb-netz__erklaerung {
	position: absolute;
	left: 50%;
	top: calc(100% + 20px);
	transform: translateX(-50%);
	width: 240px;
	max-width: 78vw;
	padding: 14px 16px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 14px 34px rgba(51, 51, 51, 0.16);
	z-index: 7;
}

.wb-netz__erklaerung p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.62;
	color: var(--wb-ink-soft, #5A544F);
}

/* Die untere Reihe klappt nach OBEN auf: unter ihr wäre kein Platz mehr, der
   Kasten stünde sonst in der Partnerleiste. Getroffen werden die Knoten 4 und
   5 von sieben — die beiden unteren. */
.wb-netz__knoten:nth-of-type(4) .wb-netz__erklaerung,
.wb-netz__knoten:nth-of-type(5) .wb-netz__erklaerung {
	top: auto;
	bottom: calc(100% + 20px);
}

/* ══ RECHTE SPALTE ═════════════════════════════════════════════════════════ */

/* Damit `margin-top: auto` an den Kennzahlen greifen kann, muss die Spalte
   selbst ein Flexbehälter sein — im Raster ist sie nur eine Zelle. */
.wb-netz__spalte-rechts {
	display: flex;
	flex-direction: column;
}

/* Drei Felder, getrennt durch Haarlinien, die AN den Feldern hängen — genau
   wie die drei Prinzipien im Partner-Abschnitt. Das erste bekommt keine.

   ── `margin-top: auto` (07.09.2026) ───────────────────────────────────────
   Der Absatz darüber endet, wo er endet; Kennzahlen und Knöpfe fallen ans
   untere Ende der Spalte und stehen damit auf derselben Grundlinie wie der
   Fuß der Zeichnung daneben. Auf Ansage des Betreibers.

   Der Mindestabstand steht deshalb als `padding-top` da und nicht als
   `margin-top`: `auto` würde ihn überschreiben, und dann klebten die
   Kennzahlen am Text, sobald die Spalte einmal keine Luft übrig hat. */
.wb-netz__kennzahlen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: auto 0 clamp(24px, 2.8vw, 36px);
	padding: clamp(22px, 2.6vw, 34px) 0 0;
	list-style: none;
}

.wb-netz__kennzahl {
	padding: 0 16px;
	border-left: 1px solid var(--wb-line, #c9c0b7);
}

.wb-netz__kennzahl:first-child { border-left: 0; padding-left: 0; }

.wb-netz__kennzahl-icon {
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 12px;
	fill: none;
	stroke: var(--wb-ink, #333333);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wb-netz__kennzahl-zahl {
	display: block;
	font-size: clamp(19px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wb-ink, #333333);
}

.wb-netz__kennzahl-titel {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--wb-ink-soft, #5A544F);
}

/* Trägt das Feld keine Ziffernzeile, übernimmt der Titel deren Gewicht —
   sonst steht die Kachel neben den beiden anderen wie eine Fußnote. */
.wb-netz__kennzahl-titel--allein {
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wb-ink, #333333);
}

.wb-netz__kennzahl-text {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wb-ink-soft, #5A544F);
}

/* ── Die zwei Handlungen ───────────────────────────────────────────────── */

.wb-netz__aktionen {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
	flex-wrap: wrap;
}

/* Derselbe Knopf wie im Verkaufsprozess und im Partner-Abschnitt — gleiche
   Höhe, gleicher Radius, gleiche Farbe. Drei Handlungen auf einer Seite
   sollen gleich aussehen. */
.wb-netz__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 26px;
	border: 2px solid var(--wb-ink, #333333);
	border-radius: 10px;
	background: var(--wb-ink, #333333);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.wb-netz__cta:hover,
.wb-netz__cta:focus-visible {
	background: transparent;
	color: var(--wb-ink, #333333);
}

.wb-netz__pfeil { transition: transform .2s; }
.wb-netz__cta:hover .wb-netz__pfeil { transform: translateX(3px); }

/* Die zweite Handlung ist bewusst KEIN Knopf: zwei gleich starke Knöpfe
   nebeneinander stellen zwei gleich große Fragen, und der Besucher
   beantwortet dann keine. */
.wb-netz__cta-zweit {
	font-size: 13px;
	line-height: 1.4;
	color: var(--wb-ink-soft, #5A544F);
	text-decoration: none;
	border-bottom: 1px solid var(--wb-line, #c9c0b7);
	padding-bottom: 3px;
	transition: color .2s, border-color .2s;
}

.wb-netz__cta-zweit:hover,
.wb-netz__cta-zweit:focus-visible {
	color: var(--wb-ink, #333333);
	border-color: var(--wb-ink, #333333);
}

/* ══ DAS KARUSSELL UNTER DEM NETZWERK (14.09.2026) ═════════════════════════

   Seit der Netzwerk-Abschnitt (cremefarben) direkt ueber dem Karussell
   steht, klebte das Foto an seiner Unterkante — ohne einen Pixel Abstand.
   Das Foto wirkte oben abgeschnitten, und der Wechsel von Creme zu Weiss
   fiel mit der Bildkante zusammen. Auf der Live-Seite steht darueber ein
   weisser Textblock, und das Foto hat Luft.

   `~` statt `+`: zwischen beiden Abschnitten steht ein <script>. */
.wb-netz ~ #sliderBildLinks { margin-top: clamp(72px, 8vw, 128px); }

/* Der Textkasten gleitet per transform (slider-bild-links.php). */
.carousel-information__cell__text-section { will-change: transform; }

/* Bis 992 px steht der Kasten UNTER dem Foto (style.min.css setzt dort,
   in derselben Grenze, margin-top:-10px). Dort gibt es nichts zu ueberlappen; ein Kasten, der
   64 px tiefer hereinrutscht, saehe nach einem Ladefehler aus. */
@media only screen and (max-width: 992px) {
	.carousel-information__cell__text-section { transform: none !important; }
}

/* ══ DIE PARTNERLEISTE ═════════════════════════════════════════════════════ */

.wb-netz__leiste {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(20px, 2.4vw, 40px);
	margin-top: clamp(48px, 5vw, 78px);
	padding: clamp(24px, 2.6vw, 34px) 0;
	border-top: 1px solid var(--wb-line, #c9c0b7);
}

.wb-netz__leiste-titel {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--wb-ink-soft, #5A544F);
}

.wb-netz__strich {
	display: block;
	width: 46px;
	height: 2px;
	margin-top: 12px;
	background: var(--wb-ink, #333333);
}

/* Eine waagerechte Rolle. Auf breiten Bildschirmen passen alle sieben
   Kacheln hinein und es gibt nichts zu rollen; darunter rollt sie, mit
   Rastpunkten, damit sie nicht zwischen zwei Kacheln stehen bleibt. */
.wb-netz__gewerke {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wb-netz__gewerke::-webkit-scrollbar { display: none; }

.wb-netz__gewerke:focus-visible {
	outline: 2px solid var(--wb-focus, #1199ff);
	outline-offset: 3px;
}

.wb-netz__gewerk {
	/* ── GLEICH BREIT (14.09.2026) ──────────────────────────────────────
	   Bis dahin `1 1 auto` mit 104 bis 190 px: jede Kachel so breit wie ihr
	   Wort. Gemessen bei 1440 px: 174, 143, 110, 104, 104, 131, 190 — sieben
	   verschiedene Breiten nebeneinander, vom Betreiber beanstandet.

	   `1 1 0` teilt den Platz gleich, unabhaengig vom Text. Lange Namen
	   brechen dann in zwei Zeilen; die Kacheln bleiben trotzdem gleich hoch,
	   weil die Reihe sie auf die hoechste streckt.

	   Die Mindestbreite ist die, bei der das laengste EINZELNE Wort
	   („Bauunternehmen", 89 px in Montserrat 11,5 px, plus 24 px Polster)
	   noch ungebrochen hineinpasst. Reicht der Platz dafuer nicht, laeuft
	   die Rolle ueber — und erst dann erscheinen die Pfeile. Gemessen
	   zwischen 800 und 1920 px Fensterbreite: 128 px liefen bei 1000 px um
	   19 px ueber (Pfeile fuer nichts), 120 px bei 1150 px um 5 px (letzte
	   Kachel angeschnitten). 116 px passen ueberall, wo die Leiste
	   dreispaltig steht. */
	flex: 1 1 0;
	min-width: 116px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 12px;
	border-radius: 6px;
	background: #ffffff;
	text-align: center;
}

.wb-netz__gewerk-icon {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--wb-ink, #333333);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wb-netz__gewerk-name {
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--wb-ink-soft, #5A544F);
}

.wb-netz__pfeile { display: flex; gap: 10px; }

/* ── DIE PFEILE WAREN IMMER DA (14.09.2026) ─────────────────────────────
   Das Skript setzt `hidden`, wenn nichts ueberlaeuft — und die Zeile
   darueber hat es wirkungslos gemacht: `display: flex` aus einer Klasse
   schlaegt die `display: none` des Browsers fuer `[hidden]`. Gemessen bei
   1440 px: hidden = true, display = flex, Rolle 1032 von 1032 px.
   Dieselbe Falle wie im Ratgeber-Fenster (assets/css/ratgeber.css). */
.wb-netz__pfeile[hidden] { display: none; }

/* Ohne Pfeile bekommt die Rolle auch deren Spalte. Sonst bliebe rechts eine
   leere Luecke in Pfeilbreite stehen, und die Kacheln endeten vor der
   Linie darueber.
   Nur oberhalb von 1100 px: darunter steht die Leiste einspaltig (siehe
   weiter unten), und diese Regel ist spezifischer — ohne die Grenze
   stuenden Titel und Kacheln dort wieder nebeneinander. */
@media (min-width: 1101px) {
	.wb-netz__leiste:has(> .wb-netz__pfeile[hidden]) { grid-template-columns: auto 1fr; }
}

.wb-netz__blaettern {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--wb-line, #c9c0b7);
	border-radius: 50%;
	background: transparent;
	color: var(--wb-ink, #333333);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s, border-color .2s, opacity .2s;
}

.wb-netz__blaettern svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wb-netz__blaettern:hover:not(:disabled) {
	background: #ffffff;
	border-color: var(--wb-ink, #333333);
}

.wb-netz__blaettern:disabled { opacity: 0.35; cursor: default; }

/* ══ DER ABSCHLUSS ═════════════════════════════════════════════════════════ */

.wb-netz__abschluss {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: clamp(20px, 3vw, 48px);
	padding: clamp(26px, 3vw, 40px) 0 clamp(30px, 3.4vw, 46px);
	border-top: 1px solid var(--wb-line, #c9c0b7);
}

.wb-netz__satz {
	margin: 0;
	font-size: clamp(17px, 1.9vw, 26px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wb-ink, #333333);
}

.wb-netz__skyline-block { text-align: right; }

/* Gezeichnet, nicht fotografiert — und deshalb in der Farbe der Seite statt
   in der eines Fotos. Sie ist Schmuck: `aria-hidden` steht im Markup. */
.wb-netz__skyline {
	display: block;
	width: clamp(180px, 24vw, 300px);
	height: auto;
	fill: none;
	stroke: var(--wb-line, #c9c0b7);
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wb-netz__skyline-wort {
	margin: 8px 0 0;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wb-ink-soft, #5A544F);
}

/* ══ SCHMALERE BILDSCHIRME ═════════════════════════════════════════════════ */

/* ── UNTER 1320 px STEHT DIE ZEICHNUNG ÜBER DEM TEXT ──────────────────────
   Nebeneinander bliebe für beide zu wenig: die Zeichnung würde zum
   Piktogramm, der Text zur Spalte von 30 Zeichen.

   ── WARUM 1320 UND NICHT MEHR 1100 (07.09.2026) ──────────────────────────
   Seit die beiden Spalten auf derselben Grundlinie enden sollen, ist die
   Grenze nicht mehr Geschmack, sondern gemessen. Die Zeichnung ist ein
   Quadrat und damit so hoch wie ihre Spalte breit; der Text daneben wird in
   einer schmaleren Spalte LÄNGER. Unterhalb einer bestimmten Breite kann die
   Zeichnung deshalb nicht mehr mithalten, und unter ihr klafft ein Loch.

   Gemessen, Abstand zwischen dem Fuß der Zeichnung und der Unterkante:

       ab 1320 px      2 px      — steht
       1280 px        52 px
       1240 px        71 px
       1200 px       111 px
       1120 px       206 px

   Bei 1320 kippt es, also steht die Grenze dort. Ein Laptop mit 1366 px
   bekommt weiter zwei Spalten, einer mit 1280 die gestapelte Fassung — und
   die ist dort ohnehin die bessere: die Zeichnung bekommt die volle Breite
   statt 620 px. */
@media (max-width: 1320px) {
	.wb-netz__raster { grid-template-columns: 1fr; gap: 36px; }
	/* `margin: 0 auto` setzt den negativen Rand von oben zurueck: gestapelt
	   gibt es nichts mehr auszurichten, und der tote Streifen unter der
	   Zeichnung ist dort der normale Abstand zum Text darunter. */
	.wb-netz__diagramm { max-width: 520px; margin: 0 auto; }
	.wb-netz__absatz { max-width: 72ch; }
	/* Gestapelt gibt es nichts mehr nach unten zu schieben — die Kennzahlen
	   folgen wieder direkt auf den Text. */
	.wb-netz__kennzahlen { margin-top: 0; }
}

/* Die Leiste bleibt bis 1100 dreiteilig: sieben Kacheln nebeneinander
   brauchen weniger Platz als Zeichnung UND Textspalte. Sie steht dann
   untereinander — Titel, Kacheln, Pfeile. Die Pfeile gehoeren dabei nach
   rechts; links unter die Kacheln gesetzt sehen sie aus wie ein vergessener
   Rest, nicht wie eine Bedienung. */
@media (max-width: 1100px) {
	.wb-netz__leiste { grid-template-columns: 1fr; gap: 20px; }
	.wb-netz__pfeile { justify-content: flex-end; }
}

/* ── Und unter 780 px hört die Zeichnung auf, eine zu sein ────────────────
   Sieben Kreise auf einem Ring brauchen Fläche. Auf einem Telefon wird der
   Ring so klein, dass die Beschriftungen übereinanderliegen und die
   Aufklapper aus dem Bild ragen.
   Dann wird daraus, was es inhaltlich ohnehin ist: eine Liste von sieben
   Partnern. Die Nabe entfällt — die Wortmarke steht drei Zeilen weiter oben
   im Titel, und ein zweites Mal sagt sie nichts Neues. */
@media (max-width: 780px) {
	.wb-netz { padding-top: 40px; }

	.wb-netz__diagramm {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 14px;
		aspect-ratio: auto;
		max-width: none;
		margin-top: 8px;
	}

	.wb-netz__linien,
	.wb-netz__nabe { display: none; }

	.wb-netz__knoten {
		position: static;
		width: auto;
		transform: none;
	}

	.wb-netz__griff {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.wb-netz__kreis { width: 76%; }

	.wb-netz__name {
		position: static;
		transform: none;
		max-width: 100%;
		margin-top: -12px;
		white-space: normal;
	}

	.wb-netz__plus { right: 8%; bottom: 22%; }

	/* Im Listenbild klappt der Text ganz normal darunter auf — kein
	   schwebender Kasten, nichts, was über den Rand ragen könnte. */
	.wb-netz__erklaerung,
	.wb-netz__knoten:nth-of-type(4) .wb-netz__erklaerung,
	.wb-netz__knoten:nth-of-type(5) .wb-netz__erklaerung {
		position: static;
		top: auto;
		bottom: auto;
		transform: none;
		width: auto;
		max-width: none;
		margin-top: 12px;
		box-shadow: 0 6px 18px rgba(51, 51, 51, 0.10);
	}

	.wb-netz__kennzahlen { grid-template-columns: 1fr; gap: 18px; }
	.wb-netz__kennzahl { border-left: 0; padding: 0; }

	.wb-netz__abschluss { grid-template-columns: 1fr; align-items: start; }
	.wb-netz__skyline-block { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIE NETZWERKSEITE
   ══════════════════════════════════════════════════════════════════════════

   Vorlage: `page-unser-qualifiziertes-vorgehen-beim-verkauf-ihrer-immobilie
   .php`, Text: `inc/netzwerkseite-daten.php`.

   ── DER FEHLER, DEN DIESER BLOCK BEHEBT (09.09.2026) ──────────────────────
   Die erste Fassung hatte eine allgemeine Regel `.wb-nwseite p` mit
   Spezifitaet (0,1,1). Jede besondere Absatzklasse — `__lead`, `__ergebnis`,
   `__fach`, `__zitat`, `__zusatz` — hat nur (0,1,0) und verlor. An der
   ausgelieferten Seite gemessen:

       .wb-nwseite__lead   margin  0px 0px 18px   statt  22px 0 34px

   Die gesamte Abstandsarbeit war damit wirkungslos, und zwar lautlos: im
   Stylesheet stand alles richtig da. Es ist derselbe Fehlertyp, an dem am
   07.09.2026 schon ein Knopf schwarz auf schwarz stand (`.wb-seo a` schlaegt
   jede reine Klasse).

   ── DIE LOESUNG: `:where()` STATT `!important` ─────────────────────────────
   `:where(.wb-nwseite) p` hat die Spezifitaet des ELEMENTS, also (0,0,1) —
   `:where()` selbst zaehlt null. Jede Klassenregel gewinnt damit von selbst,
   ohne Reihenfolgeglueck und ohne eine Sammlung von `!important`.

   Die Grundregeln stehen deshalb konsequent in `:where()`, die besonderen
   Regeln als gewoehnliche Klassen darunter.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Der Kopf, wenn er auf hellem Grund steht ──────────────────────────────
   Der Header ist fuer die Startseite gebaut: dort liegt er ueber einem
   dunklen Foto, deshalb sind Logo, Navigation und Burger weiss. Erst beim
   Scrollen setzt ein Skript `scrolledDown` und schaltet sie auf dunkel.

   Diese Seite hat kein Foto. Die Klasse `wb-kopf-dunkel` (aus
   `inc/netzwerkseite.php`) schaltet dieselben Eigenschaften von Anfang an —
   KEINE zweite Header-Komponente, nur der andere Zustand der bestehenden.

   Die Selektoren sind eng: sie greifen nur unter `body.wb-kopf-dunkel`. Auf
   der Startseite und allen anderen Seiten aendert sich nichts. */

body.wb-kopf-dunkel nav.nav-class {
	background: #ffffff;
	border-bottom: 1px solid var(--wb-line, #c9c0b7);
}

/* ── DAS LOGO VERSCHWAND BEIM SCROLLEN (gemeldet und gemessen 09.09.2026) ──
   Diese zwei Zeilen standen zuerst OHNE `!important` da — und der Kopf war
   nach dem ersten Scrollen wieder weiss auf Creme. Gemessen:

     1 oben, frisch geladen   hell: none            dunkel: block   ✓
     2 gescrollt              hell: display:none    (INLINE)        ✓
     5 zurueck nach oben      hell: display:block   (INLINE)        ✗

   Das Skript des Themes schreibt die Umschaltung als INLINE-Style auf die
   beiden <img>. Inline schlaegt jedes Stylesheet, egal wie spezifisch. Beim
   Laden gibt es die Inline-Styles noch nicht, deshalb sah es richtig aus —
   bis man einmal gescrollt hatte.

   `!important` ist hier kein Notnagel, sondern das einzige Mittel, das eine
   Inline-Deklaration ueberhaupt ueberstimmen kann. Es sind GENAU ZWEI
   Deklarationen, beide auf diese Seite begrenzt; keine Sammlung.

   Der Zustand ist hier ausserdem konstant: die Seite ist durchgehend hell,
   das dunkle Logo ist in JEDER Scrollstellung das richtige. Es gibt also
   nichts, was das Skript hier noch sinnvoll umschalten koennte. */
body.wb-kopf-dunkel .logo-header-weserburg-white-big { display: none !important; }
body.wb-kopf-dunkel .logo-header-weserburg-dunkel-big { display: block !important; }

/* NUR das Desktop-Kontaktmenue. Die Links im Burger-Overlay liegen auf
   dunklem Grund und muessen weiss bleiben — sie wuerden hier sonst
   unsichtbar. */
body.wb-kopf-dunkel nav.nav-class .navbar-before-desktop a { color: var(--wb-ink, #333333); }

body.wb-kopf-dunkel .burger-span { background-color: var(--wb-ink, #333333); }

/* Das Burger-Kreuz im geoeffneten Zustand liegt auf dem dunklen Overlay und
   bleibt deshalb weiss. */
body.wb-kopf-dunkel #headerMobileMenuCheckbox:checked ~ .burger-span { background-color: #ffffff; }

/* ── Die Seite ─────────────────────────────────────────────────────────────
   Kein eigener Grund mehr auf `.wb-nwseite`: den tragen die Sektionen. Ein
   Grund hier waere der schmale Streifen, der bei kurzen Seiten unter dem
   letzten Abschnitt sichtbar bliebe. */

.wb-nwseite {
	color: var(--wb-ink, #333333);
	font-family: "Montserrat", sans-serif;
	background: #ffffff;
}

.wb-nwseite *,
.wb-nwseite *::before,
.wb-nwseite *::after { box-sizing: border-box; }

/* ── Die Sektionen: Grund ueber die volle Breite ───────────────────────── */

.wb-nwseite__sektion { width: 100%; }
.wb-nwseite__sektion--creme { background: var(--wb-creme, #F5F2EE); }
.wb-nwseite__sektion--weiss { background: #ffffff; }

/* Die fixierte Navigation misst 73 px. Ein Sprungziel ohne dieses Polster
   verschwindet darunter — gemessen, nicht geschaetzt. Auf schmalen Fenstern
   ist der Kopf kleiner, deshalb ein eigener Wert im Media Query unten. */
.wb-nwseite__sektion[id] { scroll-margin-top: 88px; }

/* ── Das Raster ────────────────────────────────────────────────────────────
   Ein Container, von allen Sektionen benutzt — daher stehen sie auf
   derselben linken und rechten Achse. Keine Verschachtelung: `__innen` ist
   der EINZIGE Ort mit seitlichem Polster.

   Aussenabstand nach Fensterbreite, wie in der Vorgabe:
   1280 px → 48 · Tablet → 32 · Telefon → 20 · sehr schmal → 16 */

.wb-nwseite {
	/* Der Aussenabstand als Variable, damit die Hoechstbreite ihn
	   MITRECHNEN kann — sonst addieren sich beide.

	   Zuerst stand hier `max-width: 1200px` mit Polster darin. Bei 1280 px
	   ergab das 40 px Rand plus 48 px Polster: der Text begann bei 88 statt
	   bei 48. Mit `calc()` stimmt beides zugleich — bei 1280 ist der Rand 48
	   und der Text 1184 breit, ab 1296 bleibt der Text bei 1200. */
	--nw-rand: 20px;
}

@media (min-width: 600px)  { .wb-nwseite { --nw-rand: 32px; } }
@media (min-width: 1024px) { .wb-nwseite { --nw-rand: 48px; } }
@media (max-width: 359px)  { .wb-nwseite { --nw-rand: 16px; } }

.wb-nwseite__innen {
	max-width: calc(1200px + 2 * var(--nw-rand));
	margin: 0 auto;
	padding-inline: var(--nw-rand);
	padding-block: 56px;
}

@media (min-width: 600px)  { .wb-nwseite__innen { padding-block: 64px; } }
@media (min-width: 1024px) { .wb-nwseite__innen { padding-block: 84px; } }

/* Der Einstieg braucht oben Luft fuer die fixierte Navigation. */
.wb-nwseite__sektion:first-child .wb-nwseite__innen { padding-block-start: 132px; }
@media (min-width: 1024px) { .wb-nwseite__sektion:first-child .wb-nwseite__innen { padding-block-start: 156px; } }

/* ── Grundtypografie, bewusst mit NULL Klassen-Spezifitaet ─────────────────
   Siehe Kopfkommentar: `:where()` zaehlt nicht mit, jede Klassenregel unten
   gewinnt deshalb ohne `!important`. */

:where(.wb-nwseite) h1 {
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.14;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: none;
	margin: 16px 0 0;
	/* 17ch ergaben bei 1280 px nur 527 px Breite und vier Zeilen, rechts
	   blieb eine grosse leere Flaeche. 26ch nutzen bei 1280 rund 800 px und
	   ergeben zwei bis drei Zeilen. */
	max-width: 26ch;
}

:where(.wb-nwseite) h2 {
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -.015em;
	margin: 10px 0 16px;
	max-width: 24ch;
}

:where(.wb-nwseite) h3 {
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 14px;
	max-width: 30ch;
}

:where(.wb-nwseite) p {
	margin: 0 0 18px;
	line-height: 1.7;
	color: var(--wb-ink-soft, #5a544f);
	/* 55–70 Zeichen je Zeile: darueber verliert das Auge die Zeile. */
	max-width: 66ch;
}

:where(.wb-nwseite) p:last-child { margin-bottom: 0; }

/* ── Keine automatische Worttrennung in Ueberschriften und Knoepfen ────────
   Die Seite erbt `hyphens: auto` aus dem Theme. Bei einer Ueberschrift macht
   das „Immobilienver-kauf" — gemessen. Im Fliesstext ist die Trennung
   nuetzlich und bleibt.

   `text-wrap: balance` verteilt die Zeilen einer Ueberschrift gleichmaessig;
   Browser ohne Unterstuetzung ignorieren die Zeile. */

.wb-nwseite h1,
.wb-nwseite h2,
.wb-nwseite h3,
.wb-nwseite .wb-netz__cta,
.wb-nwseite .wb-netz__cta-zweit,
.wb-nwseite__lead,
.wb-nwseite__kernaussage,
.wb-nwseite__reiter,
.wb-nwseite__faq summary,
body.wb-kopf-dunkel nav.nav-class a {
	hyphens: manual;
	-webkit-hyphens: manual;
}

.wb-nwseite h1,
.wb-nwseite h2,
.wb-nwseite h3 { text-wrap: balance; }

/* ── Wiederkehrende Kleinteile ─────────────────────────────────────────── */

.wb-nwseite__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wb-ink-soft, #5a544f);
	margin: 0;
	max-width: none;
}

.wb-nwseite__kopf { max-width: 760px; }

/* ── 1. Einstieg ───────────────────────────────────────────────────────────
   Die Handlungen stehen UNMITTELBAR unter der Einleitung, nicht in einer
   eigenen Spalte weit rechts unten. Genau das war der Befund. */

.wb-nwseite__lead {
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.35;
	font-weight: 500;
	color: var(--wb-ink, #333333);
	margin: 20px 0 28px;
	/* 30ch brachen „Fachleuten." allein in die zweite Zeile. */
	max-width: 46ch;
}

/* Angenehme Lesebreite; die rechte Kontur bleibt unter der der H1. */
.wb-nwseite__einstieg { max-width: 62ch; }

.wb-nwseite__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	margin-top: 28px;
}

/* ── 2. Verkaufssituationen ────────────────────────────────────────────── */

.wb-nwseite__auswahl {
	display: flex;
	gap: 0;
	margin: 30px 0 0;
	border-bottom: 1px solid var(--wb-line, #c9c0b7);
}

.wb-nwseite__reiter {
	flex: 1;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	text-align: left;
	padding: 15px 18px 15px 0;
	color: var(--wb-ink-soft, #5a544f);
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
}

.wb-nwseite__reiter[aria-pressed="true"] {
	border-bottom-color: var(--wb-ink, #333333);
	color: var(--wb-ink, #333333);
}

.wb-nwseite__reiter-nr {
	display: block;
	font-size: 10px;
	letter-spacing: .14em;
	margin-bottom: 7px;
}

.wb-nwseite__reiter:focus-visible {
	outline: 2px solid var(--wb-focus, #1199ff);
	outline-offset: 3px;
}

/* 55/45 — Text und Entscheidungshilfe bleiben ausgewogen. */
.wb-nwseite__situation {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 48px;
	padding-top: 36px;
}

.wb-nwseite__situation[hidden] { display: none; }

.wb-nwseite__ergebnis {
	border-left: 2px solid var(--wb-ink, #333333);
	padding-left: 16px;
	margin: 22px 0 0;
	color: var(--wb-ink, #333333);
}

/* Die Entscheidungshilfe auf dem WEISSEN Abschnitt: dezent creme, kein
   Schatten, keine Drehung. Sie ist ein Merkzettel, kein Requisit. */
.wb-nwseite__dokument {
	padding: 28px;
	background: var(--wb-creme, #F5F2EE);
	border: 1px solid var(--wb-line, #c9c0b7);
	align-self: start;
}

.wb-nwseite__dokument-kopf {
	margin-bottom: 14px;
}

.wb-nwseite__dokument-titel {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wb-ink, #333333);
	margin: 0 0 12px;
	max-width: none;
}

.wb-nwseite__fragen {
	padding: 0;
	list-style: none;
	counter-reset: wbfrage;
	margin: 0;
}

.wb-nwseite__fragen li {
	counter-increment: wbfrage;
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wb-line, #c9c0b7);
	/* Die Fragen tragen den Block — sie stehen deshalb im Ink, nicht in der
	   weichen Stufe, und eine Spur groesser als vorher. */
	font-size: 15px;
	line-height: 1.6;
	color: var(--wb-ink, #333333);
}

/* Nur zwischen den Fragen eine Linie, nicht unter der letzten. */
.wb-nwseite__fragen li:last-child { border-bottom: 0; padding-bottom: 0; }

.wb-nwseite__fragen li::before {
	/* Zurueckhaltend, aber lesbar: die Nummer ordnet, sie ruft nicht. */
	content: counter(wbfrage);
	color: var(--wb-edge, #847870);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	padding-top: 3px;
}

.wb-nwseite__fach {
	/* Groesser als vorher (11 px war eine Fussnote) und mit deutlichem
	   Abstand zur letzten Frage. */
	font-size: 13px;
	line-height: 1.7;
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--wb-line, #c9c0b7);
	letter-spacing: .03em;
	max-width: none;
}

/* ── 3. Aus unserer Praxis ─────────────────────────────────────────────────
   Ein Drittel Zwischenueberschrift, zwei Drittel Text. */

.wb-nwseite__praxis-intro {
	max-width: 62ch;
	font-size: 18px;
	line-height: 1.65;
	margin: 22px 0 0;
}

.wb-nwseite__story {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 48px;
	margin-top: 40px;
}

.wb-nwseite__story-marke,
.wb-nwseite__story-text {
	border-top: 1px solid var(--wb-line, #c9c0b7);
	padding-top: 20px;
}

.wb-nwseite__story-marke--ohne-linie,
.wb-nwseite__story-text--ohne-linie { border-top: 0; padding-top: 0; }

/* Die Kernaussage ist eine Feststellung, kein Zitat — und sie laeuft nicht
   ueber die ganze Seitenbreite. */
.wb-nwseite__kernaussage {
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wb-ink, #333333);
	max-width: 44ch;
	margin: 40px 0;
	padding-left: 20px;
	border-left: 3px solid var(--wb-edge, #847870);
}

/* ── 4. Rollen ─────────────────────────────────────────────────────────── */

.wb-nwseite__rollen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 32px;
}

.wb-nwseite__rollen article {
	border-top: 1px solid var(--wb-line, #c9c0b7);
	padding-top: 20px;
}

.wb-nwseite__rollen h3 { margin: 14px 0 10px; max-width: none; }
.wb-nwseite__rollen p { font-size: 15px; max-width: none; }

/* ── 5. Fragen und Antworten ───────────────────────────────────────────────
   Ein Drittel Ueberschrift, zwei Drittel Fragen. Das Plus/Minus steht
   rechts, der Standardmarker ist entfernt — sonst stuenden zwei Zeichen da. */

.wb-nwseite__faq {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 48px;
}

.wb-nwseite__faq .wb-nwseite__kopf { max-width: none; }

.wb-nwseite__faq details {
	border-bottom: 1px solid var(--wb-line, #c9c0b7);
}

.wb-nwseite__faq details:first-child { border-top: 1px solid var(--wb-line, #c9c0b7); }

/* Die ganze Zeile ist anklickbar, nicht nur der Text. */
.wb-nwseite__faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	cursor: pointer;
	padding: 20px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wb-ink, #333333);
	list-style: none;
}

.wb-nwseite__faq summary::-webkit-details-marker { display: none; }
.wb-nwseite__faq summary::marker { content: ""; }

/* Das Zeichen in der Formensprache des Hauses: eine Linie, keine Grafik. */
.wb-nwseite__faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--wb-edge, #847870);
	transition: transform .2s;
}

.wb-nwseite__faq details[open] summary::after { content: "\2013"; }

.wb-nwseite__faq summary:focus-visible {
	outline: 2px solid var(--wb-focus, #1199ff);
	outline-offset: 2px;
}

.wb-nwseite__faq details p {
	font-size: 15px;
	margin: 0 0 20px;
	max-width: 62ch;
}

/* ── 6. Kontakt und Anschluss ──────────────────────────────────────────────
   Der Knopf steht DIREKT unter dem Text, nicht in einer weit entfernten
   Spalte. Genau das war der Befund. */

.wb-nwseite__kontakt { max-width: 66ch; }

.wb-nwseite__kontakt .wb-nwseite__aktionen { margin-top: 26px; }

.wb-nwseite__zusatz {
	font-size: 14px;
	margin: 0;
	max-width: none;
	flex: 1 1 100%;
}

.wb-nwseite__verwandt {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 40px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--wb-line, #c9c0b7);
	max-width: none;
}

/* ── Schmale Fenster ───────────────────────────────────────────────────────
   Ein Umbruch, kein zweiter: unter 900 px traegt keine zweite Spalte mehr
   einen Absatz. Die Reiter brechen um, statt seitlich zu scrollen — eine
   Scrollpflicht war ausdruecklich ausgeschlossen. */

@media (max-width: 900px) {
	.wb-nwseite__situation,
	.wb-nwseite__story,
	.wb-nwseite__faq,
	.wb-nwseite__rollen {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.wb-nwseite__auswahl { flex-wrap: wrap; border-bottom: 0; }

	.wb-nwseite__reiter {
		flex: 1 1 100%;
		padding: 14px 0;
		border-bottom: 1px solid var(--wb-line, #c9c0b7);
	}

	.wb-nwseite__reiter-nr { display: inline; margin-right: 12px; }

	.wb-nwseite__story-text { border-top: 0; padding-top: 0; }
	.wb-nwseite__kernaussage { margin: 30px 0; }
	.wb-nwseite__dokument { padding: 22px; }
	.wb-nwseite__sektion[id] { scroll-margin-top: 76px; }
	.wb-nwseite__sektion:first-child .wb-nwseite__innen { padding-block-start: 108px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   DIE CF7-RUECKMELDUNG STAND ZWEIMAL DA (10.09.2026)
   ══════════════════════════════════════════════════════════════════════════

   ── DER BEFUND, AM GELIEFERTEN HTML GEMESSEN ──────────────────────────────

   Contact Form 7 gibt jede Rueckmeldung an ZWEI Stellen aus:

     <div class="screen-reader-response">   VOR dem Formular, fuer Screenreader
     <form …>
     <div class="wpcf7-response-output">    NACH dem Formular, die sichtbare

   Auf wb-test nachgemessen: beide genau EINMAL vorhanden, ein Formular
   (wpcf7-f68-o1), CF7 6.1.5. Es waren also nicht zwei Formulare, sondern ein
   Formular mit zwei Ausgabestellen.

   Weggeclippt wird die obere ausschliesslich von CF7s EIGENEM Stylesheet —
   und das liefert diese Installation nicht aus: functions.php:37 ruft
   wp_deregister_style( 'contact-form-7' ) (im Block „/// Speeeeeeeeeed").
   Damit verliert .screen-reader-response seine Clip-Regel und wird ein
   normaler, sichtbarer Absatz ueber dem Formular. Im Kontaktfenster stand
   „…ist ein Fehler aufgetreten" deshalb zweimal.

   ── WARUM ES SO LANGE UNBEMERKT BLIEB ─────────────────────────────────────

   Es ist zweimal als FARBproblem behandelt worden, nie als Dopplung:

     assets/css/style.min.css    .screen-reader-response { color: #00f }
     style.css, Abschnitt 11     …im Kontaktfenster { color: inherit }

   Beide Regeln FAERBEN das Element, keine versteckt es. Wer den sichtbaren
   Doppelgaenger sieht und ihm eine passende Farbe gibt, hat den Befund
   gesehen und die Ursache nicht.

   ── WARUM HIER NICHT display: none STEHT ──────────────────────────────────

   Das Element ist der aria-live-Bereich des Formulars: ein Screenreader
   liest daraus vor, was nach dem Absenden passiert ist. `display: none`
   nimmt es aus dem Accessibility-Baum, und die Rueckmeldung wird unhoerbar.
   Deshalb dieselbe Clip-Technik, die CF7 selbst benutzt — aus dem Bild, aber
   im Baum.

   ── ZWEI ENTSCHEIDUNGEN, DIE ERKLAERUNG BRAUCHEN ──────────────────────────

   Kein !important: nichts im Bestand setzt `position` oder `display` auf
   dieses Element, die beiden vorhandenen Regeln faerben nur.

   Die Farbregel im Kontaktfenster bleibt absichtlich stehen. Geht diese
   Regel einmal verloren — neu erzeugte style.min.css, nicht gezogene
   Versionsmarke —, ist die Meldung dann wenigstens lesbar und nicht blau
   auf Dunkel. Zwei Netze fuer denselben Fall, das aeussere kostet nichts. */

.wpcf7 .screen-reader-response,
.screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUR FUER SCREENREADER (12.09.2026)
   ═══════════════════════════════════════════════════════════════════════════

   Gebraucht von den Feldbeschriftungen des Kontaktformulars
   (inc/kontakt-formular.php). CF7 hatte dort nur `placeholder` — der
   verschwindet beim Tippen und wird als Beschriftung nicht zuverlaessig
   vorgelesen. Jetzt traegt jedes Feld ein echtes <label>, sichtbar nur fuer
   den Screenreader. Das Aussehen bleibt dadurch unveraendert.

   WARUM ALS KLASSE UND NICHT INLINE: der Fensterinhalt laeuft durch
   wp_kses, und `safecss_filter_attr()` prueft auch die Eigenschaften INNEN
   im style-Attribut. `clip-path`, `clip` und `visibility` stehen NICHT in
   WordPress' Liste — inline waere die Klemmung lautlos entfallen und jede
   Beschriftung stuende sichtbar ueber ihrem Feld. Am 12.09.2026 mit dem
   echten wp_kses nachgemessen.

   Kein `display: none`: das nimmt das Element aus dem Accessibility-Baum,
   und dann ist die Beschriftung wieder weg — der Zweck dieser Regel.
   ═══════════════════════════════════════════════════════════════════════════ */

.wb-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Der Absendeknopf ist gesperrt, bis der Datenschutz-Haken sitzt — und darf
   dann auch gesperrt AUSSEHEN. CF7 hat den Knopf genauso gesperrt, nur sah
   man es nicht: es gab keine Regel dafuer, und CF7s eigenes Stylesheet ist
   hier deregistriert (functions.php, Block „/// Speeeeeeeeeed"). Wer klickte,
   erlebte einen Knopf, der nichts tut.

   Dieselben Werte wie `.wb-netz__blaettern:disabled` weiter oben — ein
   zweites Erscheinungsbild fuer denselben Zustand waere schlechter als
   keines. */
#gespraechVereinbarenModal .wpcf7-submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}