/* ==========================================================================
   Portfolio-Karte — Abschnitt "Unsere Verkäufe" (assets/karte/karte.css)
   ==========================================================================

   Gehört zu inc/portfolio-karte/block.php::wb_karte_abschnitt_html().

   ── NUR DESKTOP ────────────────────────────────────────────────────────
   Jede Regel dieser Datei ist auf `body.wb-desktop` begrenzt. Die mobile
   Fassung hat ihr eigenes, unabhängiges Stylesheet (mobile/assets/css/*.css)
   und wird von dieser Datei nicht berührt.

   ── KEINE FREMDEN HOSTS ────────────────────────────────────────────────
   Keine @import, keine Web-Font-Anfrage, kein Bild von außen. Schrift läuft
   über `font-family: inherit`, also über die ohnehin schon geladene
   Theme-Schrift.

   ── FARBEN UND NACHGERECHNETE KONTRASTE ────────────────────────────────
   Dieselbe achromatische Markenpalette wie in mobile/assets/css/critical.css
   (dort als CSS-Variablen im globalen :root — auf Desktop nicht geladen,
   deshalb hier lokal auf dem Abschnitt selbst neu deklariert, nicht global).

   Jede Kombination mit der WCAG-Formel nachgerechnet (relative Luminanz,
   nicht geschätzt):

     #333333 auf #FFFFFF   = 12,63 : 1   Fließtext, Zahlen in den Kacheln
     #5A544F auf #FFFFFF   =  7,46 : 1   Nebentext (Label unter den Zahlen)
     #FFFFFF auf #333333   = 12,63 : 1   CTA-Schrift auf der CTA-Fläche
     #847870 auf #FFFFFF   =  4,28 : 1   Kachel-Rahmen (> 3:1, WCAG 1.4.11)
     #1199FF auf #FFFFFF   =  2,99 : 1   Fokusring — aus dem Bestand über-
                                          nommen, nicht neu erfunden
     #E3DDD8 auf #FFFFFF   =  1,35 : 1   NUR als 1px-Trennlinie zwischen
                                          Kennzahlen und Ortsliste verwendet
                                          — dieser Kontrast trägt keine
                                          Fläche und keinen Rahmen eines
                                          Bedienelements, und wird auch
                                          nirgends dafür eingesetzt.

   ========================================================================== */

body.wb-desktop .wb-karte-abschnitt {
	--wbk-ink: #333333;
	--wbk-ink-soft: #5A544F;
	--wbk-edge: #847870;
	--wbk-sand: #E3DDD8;
	--wbk-focus: #1199FF;
	--wbk-white: #FFFFFF;

	box-sizing: border-box;
	padding: 64px 0;
	color: var(--wbk-ink);
	font-family: inherit;

	/* Der Abschnitt ist das Ziel des Menuepunkts „Portfolio"
	   (id="portfolioImmobilien", siehe block.php). Die Seitennavigation ist
	   fixiert und misst 73 px — ohne diesen Halt landet die Ueberschrift
	   „Unsere letzten Verkäufe" beim Sprung darunter und der Besucher sieht
	   als erstes den Fliesstext. Derselbe Wert wie bei den Sprungmarken der
	   Artikelseite (style.css, `.wissen-article__content h2[id]`). */
	scroll-margin-top: 96px;
}

body.wb-desktop .wb-karte-abschnitt *,
body.wb-desktop .wb-karte-abschnitt *::before,
body.wb-desktop .wb-karte-abschnitt *::after {
	box-sizing: inherit;
}

/* ── Lesebreite ───────────────────────────────────────────────────────────
   Die Maximalbreite sitzt seit der Randlos-Karte NICHT mehr am <section>,
   sondern an den beiden Innenbehältern darin (siehe block.php, Abschnitt
   "ZWEI INNENBEHAELTER"). Der Abschnitt selbst läuft über die ganze Breite,
   damit `.wb-karte-karte` als sein direktes Kind randlos laufen kann — ohne
   `100vw`, das auf Systemen mit sichtbarer Scrollleiste eine waagerechte
   Scrollleiste über die ganze Startseite erzeugen würde. Das seitliche
   Polster von 24px steht jetzt hier statt am Abschnitt. */
/* ── DIESELBE FLUCHT WIE DER REST DER STARTSEITE (07.09.2026) ─────────────
   1400 statt 1100, und dasselbe Polster wie überall. Auf Ansage des
   Betreibers: der Abschnitt darüber (die drei Prinzipien von „als Partner")
   und dieser hier sollen auf denselben Spalten sitzen, damit der Übergang
   nicht springt.

   Gemessen bei 1440 px, vorher:

       Prinzipien   36 … 1389,  Spaltengrenzen bei 487 und 938
       Karte       187 … 1239,  Spaltengrenzen bei 521 und 904

   Die Karte war der EINZIGE Ausreißer der Startseite — Hero, Verkaufsprozess,
   Partner und Netzwerk stehen alle auf 1400. Danach fluchten beide auf
   36 … 1389 mit Grenzen bei 487 und 938.

   ── DIE KARTE SELBST BLEIBT RANDLOS ──────────────────────────────────────
   `.wb-karte-karte` haengt als direktes Kind am ABSCHNITT, nicht an diesem
   Innenbehälter (siehe block.php, „ZWEI INNENBEHAELTER"). Sie läuft deshalb
   weiter über die volle Fensterbreite; nachgemessen mit dieser Änderung:
   0 … 1425 bei 1440 px Fenster, Canvas inklusive. */
body.wb-desktop .wb-karte-abschnitt__inhalt {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(16px, 1.6vw, 24px);
}

/* ── Überschrift und Lead ─────────────────────────────────────────────── */

body.wb-desktop .wb-karte-abschnitt__headline {
	margin: 0 0 16px;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--wbk-ink);
}

body.wb-desktop .wb-karte-abschnitt__lead {
	margin: 0 0 40px;
	max-width: 62ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wbk-ink-soft);
}

/* ── Kennzahlen ───────────────────────────────────────────────────────────
   <dl> mit bis zu vier <div>-Gruppen (je <dd>/<dt>/optional zweites <dd>).
   Ein <dl>, das <div> um seine <dt>/<dd>-Paare gruppiert, ist gültiges
   HTML5 und bleibt trotzdem ein einziges, zusammenhängendes Aufzählungs-
   element für Screenreader. */

/* Drei gleiche Drittel, KEIN Abstand dazwischen (07.09.2026).

   Vorher `auto-fit, minmax(180px, 1fr)` mit 24px Abstand — das ergab drei
   Spalten, deren Grenzen aber nirgends auf denen des Abschnitts darüber
   lagen. Die Haarlinien der drei Prinzipien und die der drei Kennzahlen
   standen um gut dreißig Pixel versetzt.

   `gap: 0` ist dabei kein Verzicht: der Abstand entsteht am Feld selbst
   (`padding: 0 24px` unten), und die Trennlinie sitzt AN ihm. Genau die
   Bauart der drei Prinzipien im Partner-Abschnitt — nur so fallen beide
   Linienpaare aufeinander. */
body.wb-desktop .wb-karte-kennzahlen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0 0 48px;
	padding: 32px 0;
	border-top: 1px solid var(--wbk-sand);
	border-bottom: 1px solid var(--wbk-sand);
}

body.wb-desktop .wb-karte-kennzahl {
	padding: 0 24px;
	border-left: 1px solid var(--wbk-edge);
}

body.wb-desktop .wb-karte-kennzahl:first-child {
	border-left: none;
	padding-left: 0;
}

body.wb-desktop .wb-karte-kennzahl__wert {
	margin: 0;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--wbk-ink);
}

body.wb-desktop .wb-karte-kennzahl__label {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--wbk-ink-soft);
}

body.wb-desktop .wb-karte-kennzahl__zusatz {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--wbk-ink-soft);
}

/* ── Ortsliste — der SEO-/GEO-Teil und zugleich die Fassung ohne Karte ── */

body.wb-desktop .wb-karte-orte__headline {
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--wbk-ink);
}

/* DIE MINDESTBREITE IST NEU GERECHNET: 340 STATT 300 (07.09.2026).

   Die alten 300 waren mit der alten Lesebreite verrechnet: bei 1100px
   abzüglich 2×24px Polster blieben 1052px, und 3 × 300 + 2 × 40 = 980 passte
   hinein — dreispaltig. Mit 320px Mindestbreite und 48px Abstand wären es
   1056px gewesen, vier Pixel zu viel, und `auto-fill` wäre auf ZWEI Spalten
   zurückgefallen.

   Mit dem breiteren Behälter (1400 statt 1100, siehe oben) stimmt die
   Rechnung nicht mehr: bei 1354px Inhalt passen 4 × 300 + 3 × 40 = 1320
   hinein, `auto-fill` machte also VIER Spalten à 308px — und bei 4 von 45
   Orten rutschte der Ankersatz dadurch auf eine dritte Zeile.

   Naheliegend wäre `repeat(3, 1fr)` gewesen. Das ist aber starr: bei einem
   900px-Fenster ergäbe es drei Spalten à 262px, schmaler als die Untergrenze,
   die die alte Regel aus gutem Grund hatte. Die Anpassung an schmale Fenster
   soll bleiben, nur die Zahl muss stimmen.

   340px ist die Zahl. Nachgerechnet über die Fensterbreiten:

       900 – 1100 px    2 Spalten à 414–512
       1200 – 1366 px   3 Spalten à 361–414
       ab 1440 px       3 Spalten à 424   (Behälter ist bei 1400 gedeckelt)

   Vier Spalten kommen damit nie mehr vor. Und die 424px sind ein Gewinn:
   gemessen passt der Ankersatz dadurch bei 33 von 45 Einträgen auf EINE
   Zeile statt auf zwei — die Liste wurde kürzer, nicht länger.

   `gap: 0` in der Senkrechten — der Abstand zwischen zwei Einträgen entsteht
   durch ihr eigenes Polster, sonst stünde die Trennlinie nicht mittig
   zwischen zwei Zeilen.

   Der untere Abstand sitzt NICHT mehr hier, sondern am CTA: zwischen die
   Liste und den Knopf kann seit der Klappe noch der Griff treten, und ein
   fester Abstand an der Liste würde ihn abtrennen, statt ihn als letzte
   Zeile derselben Aufstellung wirken zu lassen. */
body.wb-desktop .wb-karte-orte__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 0 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Ein Eintrag: Name links, Anzahl rechts, beide auf DERSELBEN Zeile ─────
   Zweispaltiges Raster statt flex mit `margin-left: auto`. Der Unterschied
   zählt, sobald ein Eintrag eine zweite Zeile bekommt (Ankersatz bei Orten
   mit Seite): die Anzahl bleibt über `grid-row: 1` an der ERSTEN Zeile
   hängen, statt — wie zuvor bei umbrechenden Sätzen — allein oben rechts in
   der Luft zu stehen.

   Die Trennlinien fluchten dabei von selbst über alle Spalten: ein <li> ist
   Rasterzelle der äußeren Liste und wird auf die Höhe der höchsten Zelle
   SEINER Rasterzeile gestreckt (`align-items: stretch` ist die Vorgabe), die
   untere Kante liegt also je Zeile überall gleich. */
body.wb-desktop .wb-karte-orte__eintrag {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	align-items: baseline;
	align-content: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--wbk-sand);
}

body.wb-desktop .wb-karte-orte__ort {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--wbk-ink);
}

/* Der Link umfasst BEIDE Zeilen (Ortsname + Ankersatz) und ist deshalb selbst
   ein Blockelement in Spalte 1. Unterstrichen wird nur der Ortsname — die
   ganze zweizeilige Fläche zu unterstreichen wäre ein Balken, kein Link. */
body.wb-desktop .wb-karte-orte__link {
	display: block;
	grid-column: 1;
	color: var(--wbk-ink);
	text-decoration: none;
}

body.wb-desktop .wb-karte-orte__link .wb-karte-orte__ort {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.wb-desktop .wb-karte-orte__link:hover,
body.wb-desktop .wb-karte-orte__link:focus-visible {
	color: var(--wbk-ink-soft);
}

body.wb-desktop .wb-karte-orte__link:hover .wb-karte-orte__ort,
body.wb-desktop .wb-karte-orte__link:focus-visible .wb-karte-orte__ort {
	color: var(--wbk-ink-soft);
}

/* Zweite Zeile, nur bei Orten MIT Stadtteilseite — siehe block.php,
   "WARUM DER ANKERSATZ NUR NOCH AM LINK HAENGT". Das <strong> darin kommt aus
   der gepflegten Ankertabelle und darf nicht so fett werden wie der Ortsname
   darüber, sonst konkurrieren zwei Fettungen in einem Eintrag. */
body.wb-desktop .wb-karte-orte__anker {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--wbk-ink-soft);
}

body.wb-desktop .wb-karte-orte__anker strong {
	font-weight: 600;
}

/* `grid-row: 1` hält die Anzahl auf der Zeile des Ortsnamens, auch wenn der
   Link darunter noch eine zweite Zeile hat. Tabellenziffern lassen die Zahlen
   über alle Einträge hinweg senkrecht fluchten. */
body.wb-desktop .wb-karte-orte__anzahl {
	grid-column: 2;
	grid-row: 1;
	color: var(--wbk-ink-soft);
	font-size: 14px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ── Die Klappe über den restlichen Orten ─────────────────────────────────
   `<details>`/`<summary>`, ohne eine Zeile JavaScript — dasselbe Muster wie
   `wb_si_klappe_html()` in der Mobilfassung. Der entscheidende Punkt steht
   in block.php: alle Ortsnamen und Ankertexte stehen auch ZUGEKLAPPT
   vollständig im HTML und werden deshalb voll gewertet. Wer den Rest erst
   beim Klick nachlüde, verlöre ihn für die Indexierung.

   Der Griff ist als letzte Zeile derselben Aufstellung gestaltet: dieselbe
   Trennlinie wie ein Ortseintrag, mittig statt links, damit er sich als
   Bedienelement und nicht als weiterer Ort liest. */

body.wb-desktop .wb-karte-orte__griff {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wbk-sand);
	font-size: 16px;
	font-weight: 700;
	color: var(--wbk-ink);
	cursor: pointer;
	/* Das Standarddreieck beider Rendering-Engines abschalten — Chrome und
	   Safari brauchen dafür je eine eigene Regel. */
	list-style: none;
}

body.wb-desktop .wb-karte-orte__griff::-webkit-details-marker {
	display: none;
}

/* Steht die Klappe UNMITTELBAR unter der Überschrift, hat sie keine offene
   Liste über sich, deren letzte Trennlinie ihre obere Kante bildet — dann
   braucht der Griff eine eigene. Ohne sie hinge die Beschriftung frei unter
   der Überschrift und läse sich nicht mehr als Bedienleiste. Der Selektor
   greift genau in diesem Fall: sobald oben wieder Orte offen stehen (siehe
   wb_karte_ortsliste_teilen(), $offen > 0), steht dazwischen ein <ul> und
   die Regel fasst nicht mehr — keine doppelte Linie. */
body.wb-desktop .wb-karte-orte__headline + .wb-karte-orte__klappe .wb-karte-orte__griff {
	border-top: 1px solid var(--wbk-sand);
}

/* Eigener Winkel statt des abgeschalteten Dreiecks: zwei Kanten eines
   Quadrats, um 45 Grad gedreht. Zeigt zu, wenn zu — und dreht sich beim
   Aufklappen nach oben. */
body.wb-desktop .wb-karte-orte__griff::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wbk-ink);
	border-bottom: 2px solid var(--wbk-ink);
	transform: rotate(45deg) translate(-2px, -2px);
}

body.wb-desktop .wb-karte-orte__klappe[open] .wb-karte-orte__griff::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

body.wb-desktop .wb-karte-orte__griff:hover {
	color: var(--wbk-ink-soft);
}

/* Der Griff ist tastaturbedienbar (nativ, ohne tabindex) — er braucht
   deshalb denselben sichtbaren Fokusring wie die Links im Abschnitt. Die
   Regel weiter unten fasst nur `a`, ein `<summary>` ist keiner. */
body.wb-desktop .wb-karte-orte__griff:focus-visible {
	outline: 2px solid var(--wbk-focus);
	outline-offset: 2px;
}

/* Welche der beiden Beschriftungen sichtbar ist. Zwei echte <span> statt
   eines CSS-`content`: ein über `content` eingesetzter Text ist nicht
   markierbar und wird von Vorleseprogrammen uneinheitlich behandelt. */
body.wb-desktop .wb-karte-orte__griff-auf {
	display: none;
}

body.wb-desktop .wb-karte-orte__klappe[open] .wb-karte-orte__griff-zu {
	display: none;
}

body.wb-desktop .wb-karte-orte__klappe[open] .wb-karte-orte__griff-auf {
	display: inline;
}

/* ── CTA ──────────────────────────────────────────────────────────────── */

/* ── Warum der Knopf eine eigene Ebene bekommt ────────────────────────────
   Befund vom 01.09.2026: beim Scrollen wurde der Knopf kurz von einer
   weissen Flaeche ueberdeckt. Nachgemessen an der Testseite:

     .container-image-big__image-block — der weisse Bildkasten des DARAUF
     FOLGENDEN Abschnitts "Das gesamte Netzwerk" — traegt `z-index: -10`.
     Sein Kasten reicht waagerecht von 99 bis 702 Pixel und deckt damit
     genau die linke Haelfte des mittig stehenden Knopfes (518 bis 839) ab.

   Senkrecht ueberlappen sich beide NIE: ueber den gesamten Scrollweg
   gemessen bleibt der Abstand konstant bei 64 Pixeln (dem unteren Polster
   dieses Abschnitts), und der Bildkasten traegt kein `transform`. Es ist
   also kein Layoutfehler, sondern ein Fehler beim Neuzeichnen waehrend des
   Scrollens: ein Element mit negativem z-index gehoert in den
   Wurzel-Stapelkontext und wird dort in einer eigenen Ebene gezeichnet —
   waehrend des Scrollens kann diese Ebene kurzzeitig ueber unpositionierten
   Inhalt geraten, und der Knopf war genau das.

   `position: relative` plus `z-index: 1` hebt ihn in die Ebene der
   positionierten Elemente. Die wird immer NACH allem Unpositionierten und
   nach jedem negativen z-index gezeichnet, also auch waehrend des Scrollens.
   Am Layout aendert sich nichts: kein `top`/`left`, der Knopf bleibt ein
   `inline-block` an derselben Stelle.

   DIE 1 IST NICHT BELIEBIG. Auf dieser Seite liegt die feste Kopfleiste
   (`.nav-class`) bei `z-index: 9` und der Cookie-Hinweis bei 1000 — beide
   nachgemessen. Ein hoeherer Wert hier wuerde den Knopf beim Vorbeiscrollen
   ueber die Kopfleiste schieben und aus einem Darstellungsfehler einen
   echten machen. */

body.wb-desktop .wb-karte-cta {
	/* Der Abstand zur Ortsliste sitzt seit der Klappe hier, siehe dort. */
	margin: 48px 0 0;
	text-align: center;
	position: relative;
	z-index: 1;
}

body.wb-desktop .wb-karte-cta__link {
	display: inline-block;
	padding: 16px 40px;
	background: var(--wbk-ink);
	color: var(--wbk-white);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
}

body.wb-desktop .wb-karte-cta__link:hover {
	background: var(--wbk-ink-soft);
}

/* ── Fokus — sichtbar für Tastaturbedienung, auf allen Links im Abschnitt ── */

body.wb-desktop .wb-karte-abschnitt a:focus-visible {
	outline: 2px solid var(--wbk-focus);
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Die Karte selbst (Aufgabe 7, assets/karte/karte.js)
   ══════════════════════════════════════════════════════════════════════════

   ── WARUM HIER KEIN "display" AUF DEM UNSICHTBAREN ZUSTAND STEHT ─────────
   `.wb-karte-karte` trägt in block.php das `hidden`-Attribut, solange
   karte.js den Behälter nicht selbst freigibt (siehe dort). Eine
   Autoren-Regel schlägt in der Kaskade IMMER die UA-Regel `[hidden] {
   display: none }`, unabhängig von der Spezifität — würde diese Datei also
   irgendwo ein `display` auf `.wb-karte-karte` setzen, würde der Behälter
   sichtbar, OBWOHL `hidden` noch steht. Deshalb setzt keine Regel hier
   `display` auf dem Behälter selbst; Höhe und Aussehen wirken erst, sobald
   `hidden` entfernt ist (dann greift das UA-Standard-`display: block`).

   ── KEINE ÜBERGANGSANIMATION ───────────────────────────────────────────────
   Kein `transition`, kein `animation` auf Behälter oder Marker — ein
   Einblenden wäre genau die Art Bewegung, die `prefers-reduced-motion`
   ausdrücklich nicht haben will (siehe karte.js, Kopfkommentar). */

/* ── RANDLOS ÜBER DIE VOLLE BREITE ────────────────────────────────────────
   Kein `border`, kein `border-radius`: die Karte ist keine Kachel im Text,
   sondern ein eigener Streifen über die ganze Seitenbreite. Sie braucht keine
   Umrandung mehr, weil sie nicht mehr in einer Textspalte steht — der Rahmen
   hätte auf voller Breite wie ein Kasten um nichts gewirkt. Die Breite selbst
   entsteht nicht hier, sondern dadurch, dass `.wb-karte-abschnitt` seine
   Maximalbreite an `.wb-karte-abschnitt__inhalt` abgegeben hat (siehe oben).

   Weiterhin KEIN `display` in dieser Regel — siehe Kopfkommentar dieses
   Abschnitts: eine Autorenregel mit `display` würde das `hidden`-Attribut aus
   block.php aushebeln und den leeren Behälter sichtbar machen.

   `overflow: hidden` bleibt: MapLibre zeichnet sein Canvas exakt auf die
   Behältergröße, die HTML-Marker darüber können aber am Rand überstehen.

   ── `isolation: isolate` — DIE KARTE IST EINE EIGENE STAPELWELT ───────────
   Ergänzt am 01.09.2026, zusammen mit der Korrektur "Bedienelemente über die
   Marker" weiter unten. Ohne diese eine Zeile wären alle z-index-Werte
   INNERHALB der Karte Werte der SEITE.

   Das ist keine Theorie: karte.js vergibt an die Marker bis zu 1001 (die
   kleinere Zahl liegt oben, siehe dort), und die Bedienelemente stehen jetzt
   auf 1100. Die feste Kopfleiste dieses Themes liegt bei 9, der
   Cookie-Hinweis bei 1000 — nachgezählt und in Paket 24 schon einmal
   dokumentiert, als der CTA-Knopf aus demselben Grund verrutschte. Ein
   Marker mit 1001 hätte sich also beim Vorbeiscrollen ÜBER die Kopfleiste
   geschoben.

   MapLibre selbst hilft dagegen nicht: `.maplibregl-map` setzt zwar
   `position: relative`, aber ohne `z-index` — und das allein macht keinen
   Stapelkontext auf. `isolation: isolate` macht genau das und sonst nichts:
   keine Auswirkung auf Layout, Größe oder Zeichnung. Von hier an zählt die
   ganze Karte nach außen als EINE Schicht, und innen darf jede Zahl stehen,
   die gebraucht wird. */
body.wb-desktop .wb-karte-karte {
	height: 640px;
	margin: 0 0 48px;
	overflow: hidden;
	isolation: isolate;
	background: var(--wbk-white);
}

/* MapLibre erzeugt sein eigenes <canvas> und die Kontroll-Elemente erst zur
   Laufzeit — diese Regeln greifen deshalb erst, sobald karte.js die Karte
   tatsächlich aufgebaut hat. */
body.wb-desktop .wb-karte-karte .maplibregl-canvas:focus-visible {
	outline: 2px solid var(--wbk-focus);
	outline-offset: -2px;
}

/* ── BEDIENELEMENTE UEBER DIE MARKER (Befund vom 01.09.2026) ──────────────
   Betreiber-Befund: "wenn man die Karte mit gedrückter Maustaste bewegt,
   kann man mit einem Kreis die Legende unten links überdecken."

   Nachgesehen, woran es liegt: MapLibre gibt seinen vier Eck-Behältern in
   vendor/maplibre-gl.css `z-index: 2`. Unsere Marker bekommen von karte.js
   dagegen `--wbk-marker-z` bis 1000, angefasst sogar 1001 (siehe dort,
   "Stapelreihenfolge"). Der Marker gewinnt also zwangsläufig — nicht nur
   beim Ziehen, sondern immer, wenn ein Ort geografisch in einer Ecke
   liegt. Die Quellenangabe unten rechts trifft dasselbe.

   1100 liegt über allem, was karte.js je vergibt. Dass diese Zahl der
   Kopfleiste (9) und dem Cookie-Hinweis (1000) nicht in die Quere kommt,
   liegt an `isolation: isolate` auf `.wb-karte-karte` weiter oben: die
   Karte ist damit eine eigene Stapelwelt, und alle Zahlen hier gelten nur
   innerhalb von ihr. Ohne diese Zeile wäre 1100 ein Wert der SEITE.

   Die Legende bekommt zusätzlich `pointer-events: none` (weiter unten):
   sie erklärt nur und hat nichts zum Anklicken. Ohne das schluckte sie in
   ihrer Ecke jedes Ziehen — die Karte bliebe dort einfach stehen. */
body.wb-desktop .wb-karte-karte .maplibregl-ctrl-top-left,
body.wb-desktop .wb-karte-karte .maplibregl-ctrl-top-right,
body.wb-desktop .wb-karte-karte .maplibregl-ctrl-bottom-left,
body.wb-desktop .wb-karte-karte .maplibregl-ctrl-bottom-right {
	z-index: 1100;
}

/* Dezentes Zoompaar statt der Google-typischen Knopfleiste: nur die zwei
   Zoom-Knöpfe, kein Kompass (dragRotate ist ohnehin aus, siehe karte.js). */
body.wb-desktop .wb-karte-karte .maplibregl-ctrl-group {
	border: 1px solid var(--wbk-sand);
	box-shadow: none;
	border-radius: 4px;
	overflow: hidden;
}

body.wb-desktop .wb-karte-karte .maplibregl-ctrl-group button {
	width: 32px;
	height: 32px;
}

/* "Übersicht" — der Weg zurück aus der Tiefe, siehe karte.js. Bewusst mit
   Wort statt Symbol: ein Haus- oder Pfeilsymbol müsste erst erklärt werden,
   und für Erklärung ist auf einer Karte kein Platz. Gleiche Kante, gleicher
   Rahmen und gleiche Höhe wie das Zoompaar darüber, damit die drei
   Bedienelemente als eine Gruppe gelesen werden. */
body.wb-desktop .wb-karte-zurueck {
	display: block;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--wbk-sand);
	border-radius: 4px;
	background: var(--wbk-white);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--wbk-ink);
	cursor: pointer;
}

body.wb-desktop .wb-karte-zurueck:hover {
	color: var(--wbk-ink-soft);
}

body.wb-desktop .wb-karte-zurueck:focus-visible {
	outline: 2px solid var(--wbk-focus);
	outline-offset: 2px;
}

/* `hidden` schlägt sonst nicht durch: die Regel darüber setzt `display:
   block` und gewinnt gegen die Vorgabe des Browsers für [hidden]. */
body.wb-desktop .wb-karte-zurueck[hidden] {
	display: none;
}

/* ── Legende zur Flächenfarbe (01.09.2026) ────────────────────────────────
   Fünf Felder mit den tatsächlichen Klassengrenzen. Gebaut von karte.js
   (`legendeBauen()`), dort steht auch, warum sie ein MapLibre-Control ist
   und warum sie `aria-hidden` trägt.

   Die FARBEN der Felder stehen bewusst NICHT hier, sondern als Inline-Stil
   aus karte.js: es sind dieselben fünf Werte, die auch die Flächen füllen,
   und die stehen in STUFEN_FARBEN. Zwei Listen an zwei Orten, die
   auseinanderlaufen können, wären genau der Fehler, bei dem die Legende
   irgendwann etwas anderes behauptet als die Karte.

   Halbtransparentes Weiss wie bei der Quellenangabe gegenüber: die Legende
   sitzt über der Karte und soll die Fläche darunter nicht ganz verstellen. */
body.wb-desktop .wb-karte-legende {
	/* Sie erklärt nur, sie hat nichts zum Anklicken. Ohne diese Zeile
	   schluckt sie jedes Ziehen, das in ihrer Ecke beginnt — MapLibre setzt
	   auf `.maplibregl-ctrl` von sich aus `pointer-events: auto`, und die
	   Klasse trägt die Legende, weil sie ein Control ist. */
	pointer-events: none;
	margin: 0 0 10px 10px;
	padding: 8px 10px;
	border: 1px solid var(--wbk-sand);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.92);
	font-family: inherit;
}

body.wb-desktop .wb-karte-legende__titel {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wbk-ink);
}

body.wb-desktop .wb-karte-legende__reihe {
	display: flex;
	gap: 2px;
}

/* Jede Stufe ist eine eigene Spalte: Farbfeld oben, Spanne darunter. Die
   Mindestbreite hält die Felder gleich breit, auch wenn "11–15" mehr Platz
   braucht als "1–2" — ungleich breite Felder läsen sich wie ungleich große
   Klassen. */
body.wb-desktop .wb-karte-legende__stufe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 34px;
}

body.wb-desktop .wb-karte-legende__feld {
	display: block;
	width: 100%;
	height: 10px;
	border-radius: 2px;
}

body.wb-desktop .wb-karte-legende__text {
	font-size: 10px;
	line-height: 1;
	color: var(--wbk-ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Quellenangabe — CC BY 4.0 (Bremer Umrisse), dl-de/by-2-0 (Kreisflächen),
   Natural Earth (Nachbarländer) und ODbL (Ortskoordinaten), siehe
   assets/karte/geo/QUELLEN.md. `compact: false` in karte.js hält sie
   dauerhaft lesbar statt hinter einem "i"-Symbol versteckt. */
body.wb-desktop .wb-karte-karte .maplibregl-ctrl-attrib {
	background: rgba(255, 255, 255, 0.85);
	font-family: inherit;
	font-size: 11px;
	color: var(--wbk-ink-soft);
}

body.wb-desktop .wb-karte-karte .maplibregl-ctrl-attrib a {
	color: var(--wbk-ink-soft);
}

/* ── Marker — HTML-Overlay, von karte.js erzeugt (Aufgaben 7 + 8) ─────────
   Fläche skaliert mit der Anzahl (Formel in karte.js), gedeckelt bei 76 px,
   monochrom: Kreis in --wbk-ink (#333), Zahl in Weiß.

   ── EIN ELEMENT, ZWEI ROLLEN ────────────────────────────────────────────
   `.wb-karte-marker` ist entweder ein `<a href>` (Ort mit Stadtteilseite)
   oder ein `<div role="img" tabindex="0">` (ohne Seite - bei den heutigen
   12 Orten: alle) - Begründung in karte.js, Kopfkommentar "HOVER, FOKUS UND
   KLICK". Alle Kind-Elemente sind rein dekorativ (`aria-hidden`,
   `pointer-events: none`) - Klick, Hover und Fokus landen IMMER auf dem
   äußeren Element, nie zufällig auf einem Kind.

   ── GRUNDGRÖSSE ALS EIGENSCHAFT, NICHT ALS INLINE-BREITE ────────────────
   karte.js setzt `--wbk-marker-basis` (die berechnete Grundgröße, 44–76 px)
   statt `width`/`height` direkt. So kann diese Datei mit gewöhnlicher
   CSS-Spezifität auf :hover/:focus umschalten, ohne `!important`. */

body.wb-desktop .wb-karte-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	/* MUSS absolute sein, nicht relative (Befund K1): MapLibre setzt die
	   Position selbst nur ueber die Klasse .maplibregl-marker
	   (position: absolute; left: 0; top: 0;), NIE inline per style.position -
	   und diese Regel hier (0,2,1: body.wb-desktop + .wb-karte-marker)
	   schlaegt sie in der Spezifitaet (0,1,0), unabhaengig von der
	   Ladereihenfolge. Mit "relative" bleibt der Marker im normalen
	   Dokumentfluss, MapLibres Koordinaten-Transform kommt dann nur noch
	   ON TOP der Flussposition an - jeder Marker rutscht um die Hoehe seines
	   Vorgaengers nach unten. "absolute" nimmt ihn aus dem Fluss, MapLibres
	   left:0/top:0/transform positioniert ihn dann tatsaechlich an der
	   Koordinate. Bezugsrahmen bleibt trotzdem gewahrt: MapLibre setzt
	   position:relative auf den Kartenbehaelter selbst (Klasse
	   .maplibregl-map, siehe vendor/maplibre-gl.css) - Foto, Namensschild und
	   Textkarte unten (ebenfalls position: absolute) positionieren sich
	   weiterhin gegen DIESEN Marker, nicht gegen den Kartenbehaelter, weil
	   ein absolut positioniertes Element genauso ein Bezugsrahmen fuer seine
	   absolut positionierten Kinder bleibt wie ein relativ positioniertes. */
	position: absolute;
	width: var(--wbk-marker-basis);
	height: var(--wbk-marker-basis);
	border-radius: 50%;
	background: var(--wbk-ink);
	/* Weisser Trennring (Befund vom 01.09.2026: im Norden ueberlappen sich
	   Bremerhaven, Schiffdorf, Loxstedt und Brake). Zwei dunkle Kreise, die
	   einander beruehren, verschmelzen ohne Ring optisch zu einer Flaeche; der
	   2px-Ring in Weiss trennt sie sichtbar, ohne eine sichtbare Umrandung
	   hinzuzufuegen — er verschwindet ueber weissem Kartengrund. Der bisherige
	   Schlagschatten bleibt dahinter erhalten. */
	box-shadow: 0 0 0 2px var(--wbk-white), 0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: default;
	text-decoration: none;
	/* Kleinere Zahl liegt oben (karte.js setzt --wbk-marker-z aus der Anzahl):
	   sonst verdeckt eine grosse Scheibe wie Bremerhaven (11) den daneben
	   liegenden Einzelverkauf vollstaendig. Als benutzerdefinierte Eigenschaft
	   und nicht als style.zIndex, damit die Hover-/Fokus-Regel weiter unten
	   sie ohne !important ueberschreiben kann — eine Inline-Deklaration
	   schluege jede Stylesheet-Regel. Derselbe Grund wie bei
	   --wbk-marker-basis. */
	z-index: var(--wbk-marker-z, 1);
	transition: width 0.2s ease, height 0.2s ease;

	/* ── SEIT DEM 01.09.2026 IST DER MARKER EIN <button> ODER EIN <a> ──────
	   Vorher war der nicht verlinkte Marker ein <div role="img"> und tat beim
	   Anklicken nichts. Jetzt zoomt jeder Marker (siehe karte.js, "WAS EIN
	   KLICK TUT"), und ein Element, das auf Klick und Eingabetaste reagiert,
	   ist ein Knopf.

	   Ein <button> bringt allerdings die Vorgaben des Browsers mit —
	   Systemschrift, eigener Rahmen, eigenes Polster, mittige Textausrichtung,
	   unter Safari zusaetzlich ein eigenes Aussehen. Die vier Zeilen hier
	   raeumen das ab; ohne sie waere die Scheibe kein Kreis mehr, sondern ein
	   grauer Kasten mit Systemschrift darin. */
	appearance: none;
	border: 0;
	padding: 0;
	font: inherit;
}

/* Der Zeiger sagt, was passiert: die Lupe beim Zoomen, die Hand beim Link.
   Vorher trug nur der verlinkte Marker einen Zeigerwechsel, weil er als
   einziger ueberhaupt etwas tat - inzwischen tun es alle. */
body.wb-desktop button.wb-karte-marker {
	cursor: zoom-in;
}

body.wb-desktop a.wb-karte-marker {
	cursor: pointer;
}

/* ── Hover UND Fokus — dieselbe Wirkung (Spec §11) ─────────────────────────
   Kreis waechst auf 76 px, feiner Ring in --wbk-sand. Gilt fuer JEDEN
   Marker, auch ohne Foto - eine ruhige, einheitliche Rueckmeldung "hier
   bist du gerade", kein Sonderfall fuer die (heute: alle) Orte ohne Bild. */
body.wb-desktop .wb-karte-marker:hover,
body.wb-desktop .wb-karte-marker:focus {
	width: 76px;
	height: 76px;
	box-shadow: 0 0 0 2px var(--wbk-white), 0 0 0 5px var(--wbk-sand), 0 1px 3px rgba(0, 0, 0, 0.3);
	/* Der angefasste Marker UND seine Textkarte muessen ueber allen Nachbarn
	   liegen — sonst schiebt sich bei den dicht stehenden Orten im Norden ein
	   fremder Marker vor die gerade geoeffnete Textkarte. Hoeher als jeder
	   Wert, den karte.js in --wbk-marker-z schreibt (dort hoechstens 1000). */
	z-index: 1001;
}

/* Sichtbarer Fokusring, INNEN (outline-offset negativ) statt außen - wie
   schon beim maplibregl-canvas weiter oben in dieser Datei. Nachgerechnet
   (nicht wie die Randnotiz oben, wo der Ring außen auf Weiß sitzt und nur
   2,99 : 1 erreicht): --wbk-focus (#1199FF) auf --wbk-ink (#333333), dem
   tatsächlichen Marker-Hintergrund an dieser Stelle, ergibt 4,23 : 1 -
   deutlich über den 3 : 1 aus WCAG 1.4.11.

   Der zusätzliche Vorfahren-Selektor `.wb-karte-karte` ist hier kein
   Zufall: er hebt die Spezifität ÜBER die allgemeine Regel
   ".wb-karte-abschnitt a:focus-visible" weiter oben in dieser Datei, die
   sonst auf verlinkten Markern (<a>) gewinnen und den außen liegenden,
   nur 2,99 : 1 kontrastierenden Ring zurückbringen würde. */
body.wb-desktop .wb-karte-karte .wb-karte-marker:focus-visible {
	outline: 2px solid var(--wbk-focus);
	outline-offset: -2px;
}

body.wb-desktop .wb-karte-marker__zahl {
	color: var(--wbk-white);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	font-family: inherit;
	pointer-events: none;
}

/* Foto — nur vorhanden, wenn karte.js eintrag.bild bekommt (Modifikator
   .wb-karte-marker--foto). Deckt den ganzen Kreis, dieselbe Rundung wie der
   Marker selbst; startet unsichtbar und blendet erst bei Hover/Fokus ein -
   AUSSER unter .wb-karte-karte--ruhig, siehe weiter unten. */
body.wb-desktop .wb-karte-marker__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

body.wb-desktop .wb-karte-marker--foto:hover .wb-karte-marker__zahl,
body.wb-desktop .wb-karte-marker--foto:focus .wb-karte-marker__zahl {
	opacity: 0;
	transition: opacity 0.2s ease;
}

body.wb-desktop .wb-karte-marker--foto:hover .wb-karte-marker__foto,
body.wb-desktop .wb-karte-marker--foto:focus .wb-karte-marker__foto {
	opacity: 1;
}

body.wb-desktop .wb-karte-marker__name {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	/* Deckend statt halbtransparent, dazu eine Haarlinie: wo zwei
	   Namensschilder einander ueberlappen (im Norden unvermeidlich), bleibt so
	   erkennbar, wo das eine aufhoert und das naechste anfaengt. Halbtransparent
	   liefen beide Beschriftungen ineinander und keine war mehr lesbar. */
	background: var(--wbk-white);
	box-shadow: 0 0 0 1px var(--wbk-sand);
	color: var(--wbk-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.15s ease;
}

/* Auf Hover/Fokus weicht die schlichte Namens-Beschriftung der Textkarte
   (mehr Inhalt, siehe unten) - beide gleichzeitig waeren doppelt. */
body.wb-desktop .wb-karte-marker:hover .wb-karte-marker__name,
body.wb-desktop .wb-karte-marker:focus .wb-karte-marker__name {
	opacity: 0;
}

/* ── Textkarte — erscheint bei Hover UND Fokus, "daneben" (Schritt 3) ─────
   Name, Anzahl immer; Aufteilung nach Art und Zeitraum nur, wenn karte.js
   sie tatsaechlich anlegt (siehe dort, textkarteBauen()) - keine leere
   Zeile, kein Platzhalter. Rein dekorativ (aria-hidden in karte.js),
   deshalb ohne eigene Interaktion: pointer-events: none. */
body.wb-desktop .wb-karte-marker__karte {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	margin-left: 10px;
	min-width: 140px;
	padding: 10px 14px;
	border: 1px solid var(--wbk-sand);
	border-radius: 4px;
	background: var(--wbk-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

body.wb-desktop .wb-karte-marker:hover .wb-karte-marker__karte,
body.wb-desktop .wb-karte-marker:focus .wb-karte-marker__karte {
	opacity: 1;
	visibility: visible;
}

body.wb-desktop .wb-karte-marker__karte-name {
	margin: 0 0 2px;
	color: var(--wbk-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

body.wb-desktop .wb-karte-marker__karte-zeile {
	margin: 0;
	color: var(--wbk-ink-soft);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
}

/* ── prefers-reduced-motion — als Klasse, nicht als @media (Aufgabe 8) ─────
   karte.js liest window.matchMedia EINMAL beim Kartenaufbau und setzt
   `.wb-karte-karte--ruhig` auf den Behaelter - Begruendung dort, Kopf-
   kommentar "prefers-reduced-motion" (Vorschauseite mit gestubbtem
   matchMedia, wie im KI-Suchplugin). Kein Wachsen (Breite/Hoehe bleiben auf
   der Grundgroesse), keine Ueberblendung - das Foto ERSCHEINT, es blendet
   nicht ein. */
body.wb-desktop .wb-karte-karte--ruhig .wb-karte-marker,
body.wb-desktop .wb-karte-karte--ruhig .wb-karte-marker__zahl,
body.wb-desktop .wb-karte-karte--ruhig .wb-karte-marker__foto,
body.wb-desktop .wb-karte-karte--ruhig .wb-karte-marker__name,
body.wb-desktop .wb-karte-karte--ruhig .wb-karte-marker__karte {
	transition: none;
}

body.wb-desktop .wb-karte-karte--ruhig .wb-karte-marker:hover,
body.wb-desktop .wb-karte-karte--ruhig .wb-karte-marker:focus {
	width: var(--wbk-marker-basis);
	height: var(--wbk-marker-basis);
}