/**
 * Synapsenbrenner - Modul baukasten, Gestaltung der drei Einzelstuecke (HL-B3, 17.10.2026).
 * Baut auf familien.css auf (Karte, Label, Spur, Chips, Knopf, Werte, Ziel-Liste, Zweispalter sb-bkf-sicht--weit).
 * Eigene Teile: sb-bkf-gw-* (gezeitenwelle), sb-bkf-hk-* (hoehenkarte), sb-bkf-lt-* (leuchtturm), sb-bkf-es-* (gemeinsam: Namen und Nordpfeil auf Flaechen).
 * Farben aus den Theme-Token mit Ersatzwert; Wasser- und Gelaendetoene sind Bildfarben ohne Token.
 */

/* Gemeinsam: Namen auf einer Flaeche (Lage r, l, o, u setzt das Skript), Nordpfeil */
.sb-baukasten-wz .sb-bkf-es-name { position: absolute; transform: translate(10px, -50%); font: 700 12.5px/1.15 var(--sb-schrift-text, "Source Sans 3", sans-serif); color: var(--sb-petrol-900, #021c1e); background: rgba(255, 255, 255, .88); border-radius: 6px; padding: 2px 6px; white-space: nowrap; pointer-events: none; }
.sb-baukasten-wz .sb-bkf-es-name[data-sb-bkf-lage="l"] { transform: translate(calc(-100% - 10px), -50%); }
.sb-baukasten-wz .sb-bkf-es-name[data-sb-bkf-lage="o"] { transform: translate(-50%, calc(-100% - 9px)); }
.sb-baukasten-wz .sb-bkf-es-name[data-sb-bkf-lage="u"] { transform: translate(-50%, 9px); }
.sb-baukasten-wz .sb-bkf-es-name[data-sb-bkf-lage="ro"] { transform: translate(6px, calc(-100% - 5px)); }
.sb-baukasten-wz .sb-bkf-es-name[data-sb-bkf-lage="lo"] { transform: translate(calc(-100% - 6px), calc(-100% - 5px)); }
.sb-baukasten-wz .sb-bkf-es-name[data-sb-bkf-lage="ru"] { transform: translate(6px, 5px); }
.sb-baukasten-wz .sb-bkf-es-name[data-sb-bkf-lage="lu"] { transform: translate(calc(-100% - 6px), 5px); }
@media (max-width: 600px) { .sb-baukasten-wz .sb-bkf-es-name { font-size: 11px; padding: 1px 4px; } }
.sb-baukasten-wz .sb-bkf-es-name--vorn { z-index: 3; background: #fff; box-shadow: 0 2px 8px rgba(2, 28, 30, .25); }
.sb-baukasten-wz [data-sb-bkf-pkt][role="button"] { cursor: pointer; }
.sb-baukasten-wz .sb-bkf-es-nord { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--sb-petrol-900, #021c1e); font: 800 13px/28px var(--sb-schrift-titel, Montserrat, sans-serif); text-align: center; }

/* ===== gezeitenwelle ===== */
.sb-baukasten-wz .sb-bkf-gw-steuer { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-end; margin: 4px 0 10px; }
.sb-baukasten-wz .sb-bkf-gw-steuer .sb-bkf-feld { margin: 0; }
.sb-baukasten-wz .sb-bkf-gw-steuer .sb-bkf-knopf { margin: 0 0 6px; }
.sb-baukasten-wz .sb-bkf-gw-uhr { margin: 6px 0 4px; }
.sb-baukasten-wz .sb-bkf-gw-uhr .sb-bkf-label { font-size: 14px; }
.sb-baukasten-wz .sb-bkf-gw-bild { position: relative; border-radius: var(--sb-radius-s, 12px); overflow: hidden; }
.sb-baukasten-wz .sb-bkf-gw-bild svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 250; }
.sb-baukasten-wz .sb-bkf-gw-himmel { fill: #eaf4f6; }
.sb-baukasten-wz .sb-bkf-gw-wasser { transition: transform .25s ease-out; }
.sb-baukasten-wz .sb-bkf-gw-welle { animation: sb-bkf-gw-welle 3.2s linear infinite; }
@keyframes sb-bkf-gw-welle { to { transform: translateX(60px); } }
.sb-baukasten-wz .sb-bkf-gw-boden { fill: #e2cf9f; }
.sb-baukasten-wz .sb-bkf-gw-kante { fill: none; stroke: #9b8458; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-marke { stroke: var(--sb-petrol-700, #004445); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .55; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-grund { fill: #d9c69a; }
.sb-baukasten-wz .sb-bkf-gw-latte { fill: #fff; stroke: var(--sb-petrol-700, #004445); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-teilung { stroke: var(--sb-petrol-700, #004445); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-ueber { position: absolute; inset: 0; pointer-events: none; }
.sb-baukasten-wz .sb-bkf-gw-pkt { position: absolute; transform: translate(-50%, -135%); width: 26px; height: 26px; border-radius: 50%; background: var(--sb-petrol-700, #004445); color: #fff; font: 800 13px/26px var(--sb-schrift-titel, Montserrat, sans-serif); text-align: center; box-shadow: 0 0 0 2px #fff; }
.sb-baukasten-wz .sb-bkf-gw-pkt--unten { transform: translate(-50%, 35%); }
.sb-baukasten-wz .sb-bkf-gw-markenname { position: absolute; right: 8px; transform: translateY(-115%); font: 700 11.5px/1.2 var(--sb-schrift-text, "Source Sans 3", sans-serif); color: var(--sb-petrol-700, #004445); background: rgba(255, 255, 255, .8); border-radius: 4px; padding: 1px 5px; }
.sb-baukasten-wz .sb-bkf-gw-skala { position: absolute; left: calc(53% + 6px); transform: translateY(-50%); font: 700 12px/1 var(--sb-schrift-text, "Source Sans 3", sans-serif); color: var(--sb-petrol-900, #021c1e); }
.sb-baukasten-wz .sb-bkf-gw-kurve { margin: 10px 0 0; }
.sb-baukasten-wz .sb-bkf-gw-kurve svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 96; overflow: visible; }
.sb-baukasten-wz .sb-bkf-gw-linie { fill: none; stroke: var(--sb-petrol-700, #004445); stroke-width: 3; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-linie--andere { stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .45; }
.sb-baukasten-wz .sb-bkf-gw-schwelle { stroke: var(--sb-orange, #dd9933); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-fenster { fill: var(--sb-mint, #77c49b); opacity: .22; }
.sb-baukasten-wz .sb-bkf-gw-jetzt { fill: var(--sb-gelb, #e5de00); stroke: var(--sb-petrol-900, #021c1e); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-zeiten { display: flex; justify-content: space-between; font: 600 12.5px/1.2 var(--sb-schrift-text, "Source Sans 3", sans-serif); opacity: .8; margin-top: 2px; gap: 6px; }
.sb-baukasten-wz .sb-bkf-gw-zeiten small { display: block; font-weight: 400; }
.sb-baukasten-wz .sb-bkf-gw-zeiten span:nth-child(2) { text-align: center; }
.sb-baukasten-wz .sb-bkf-gw-zeiten span:last-child { text-align: right; }
.sb-baukasten-wz .sb-bkf-gw-stand { margin: 14px 0 4px; }
.sb-baukasten-wz .sb-bkf-gw-stand .sb-bkf-gross { margin-bottom: 2px; }
.sb-baukasten-wz .sb-bkf-gw-phase { margin: 0 0 8px; }
.sb-baukasten-wz .sb-bkf-gw-meldung { display: inline-block; background: var(--sb-gelb, #e5de00); color: var(--sb-petrol-900, #021c1e); font-weight: 700; border-radius: 10px; padding: 7px 12px; margin: 0 8px 8px 0; }
.sb-baukasten-wz .sb-bkf-gw-kacheln h3 { font-size: 17px; margin: 14px 0 8px; }
.sb-baukasten-wz .sb-bkf-gw-zonen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sb-baukasten-wz .sb-bkf-gw-zonen li { display: grid; grid-template-columns: 26px 1fr; gap: 0 8px; align-items: center; border-radius: 12px; padding: 8px 10px; transition: background .25s; }
.sb-baukasten-wz .sb-bkf-gw-zonen em { grid-column: 2; font-style: normal; font-size: 13.5px; }
.sb-baukasten-wz .sb-bkf-gw-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--sb-petrol-700, #004445); color: #fff; font: 800 13px/26px var(--sb-schrift-titel, Montserrat, sans-serif); text-align: center; grid-row: span 2; }
.sb-baukasten-wz .sb-bkf-gw-trocken { background: #f4ecd6; }
.sb-baukasten-wz .sb-bkf-gw-nass { background: #dcecf3; }
.sb-baukasten-wz .sb-bkf-gw-nass em { color: #1f6f8b; }
.sb-baukasten-wz .sb-bkf-gw-texte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.sb-baukasten-wz .sb-bkf-gw-texte > div { background: #f3f6f5; border-radius: 12px; padding: 12px 14px; }
.sb-baukasten-wz .sb-bkf-gw-texte h3 { margin: 0 0 4px; font-size: 16px; }
@media (max-width: 600px) {
	.sb-baukasten-wz .sb-bkf-gw-bild svg { aspect-ratio: 600 / 340; }
	.sb-baukasten-wz .sb-bkf-gw-pkt { width: 22px; height: 22px; font-size: 12px; line-height: 22px; }
	.sb-baukasten-wz .sb-bkf-gw-markenname { display: none; }
	.sb-baukasten-wz .sb-bkf-gw-zonen { grid-template-columns: 1fr 1fr; }
	.sb-baukasten-wz .sb-bkf-gw-steuer .sb-bkf-knopf { width: 100%; }
}

/* ===== hoehenkarte ===== */
.sb-baukasten-wz .sb-bkf-hk-flaeche { position: relative; border-radius: var(--sb-radius-s, 12px); overflow: hidden; margin-bottom: 14px; background: #6fa8c6; }
.sb-baukasten-wz .sb-bkf-hk-flaeche canvas { display: block; width: 100%; height: auto; }
.sb-baukasten-wz .sb-bkf-hk-pkt { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sb-gelb, #e5de00); box-shadow: 0 0 0 2.5px var(--sb-petrol-900, #021c1e); transition: background .2s; }
.sb-baukasten-wz .sb-bkf-hk-pkt--unter { background: #fff; box-shadow: 0 0 0 2.5px #1f6f8b; }
.sb-baukasten-wz .sb-bkf-hk-stab { position: absolute; left: 12px; bottom: 12px; border-bottom: 3px solid #fff; color: #fff; font: 700 12px/1.2 var(--sb-schrift-text, "Source Sans 3", sans-serif); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); padding-bottom: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.sb-baukasten-wz .sb-bkf-hk-skala { display: flex; justify-content: space-between; font-size: 13px; opacity: .75; }
.sb-baukasten-wz .sb-bkf-hk-spielen { margin-top: 4px; }
.sb-baukasten-wz .sb-bkf-hk-anteil { margin: 12px 0 6px; }
.sb-baukasten-wz .sb-bkf-hk-anteil p { margin: 6px 0 0; }
.sb-baukasten-wz .sb-bkf-hk-info .sb-bkf-sicht-ziele { margin-top: 12px; }

/* ===== leuchtturm ===== */
.sb-baukasten-wz .sb-bkf-lt { display: grid; gap: 18px; }
.sb-baukasten-wz .sb-bkf-lt-nacht { background: var(--sb-petrol-900, #021c1e); color: #e8f1ee; border-color: transparent; }
.sb-baukasten-wz .sb-bkf-lt-nacht .sb-bkf-werte div { border-top-color: rgba(255, 255, 255, .2); }
.sb-baukasten-wz .sb-bkf-lt-buehne { position: relative; border-radius: var(--sb-radius-s, 12px); overflow: hidden; }
.sb-baukasten-wz .sb-bkf-lt-buehne svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 260; }
@media (max-width: 600px) { .sb-baukasten-wz .sb-bkf-lt-buehne svg { aspect-ratio: 600 / 400; } .sb-baukasten-wz .sb-bkf-lt-name { font-size: 11px; } }
.sb-baukasten-wz .sb-bkf-lt-himmel { fill: #0a2a33; }
.sb-baukasten-wz .sb-bkf-lt-sterne { fill: #fff; opacity: .55; }
.sb-baukasten-wz .sb-bkf-lt-meer { fill: #06323b; }
.sb-baukasten-wz .sb-bkf-lt-fels { fill: #031417; }
.sb-baukasten-wz .sb-bkf-lt-turm { fill: #e9ece8; }
.sb-baukasten-wz .sb-bkf-lt-laterne { fill: #3c4b4f; }
.sb-baukasten-wz .sb-bkf-lt-dach { fill: #b4532f; }
.sb-baukasten-wz .sb-bkf-lt-lampe { fill: #5e5a3a; transition: fill .08s; }
.sb-baukasten-wz .sb-bkf-lt-schiff { fill: #02181b; }
.sb-baukasten-wz .sb-bkf-lt-licht { opacity: 0; transition: opacity .12s; }
.sb-baukasten-wz .sb-bkf-lt-licht.sb-bkf-lt-an { opacity: 1; }
.sb-baukasten-wz .sb-bkf-lt-an .sb-bkf-lt-lampe { fill: #fffbe0; }
.sb-baukasten-wz .sb-bkf-lt-name { position: absolute; left: 14px; bottom: 8px; margin: 0; font: 700 13px/1.2 var(--sb-schrift-titel, Montserrat, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.sb-baukasten-wz .sb-bkf-lt-takt { margin: 14px 0 6px; }
.sb-baukasten-wz .sb-bkf-lt-spur { position: relative; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sb-baukasten-wz .sb-bkf-lt-spur i { position: absolute; top: 0; bottom: 0; background: var(--sb-gelb, #e5de00); border-radius: 3px; }
.sb-baukasten-wz .sb-bkf-lt-kopf { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 2px; }
.sb-baukasten-wz .sb-bkf-lt-skala { display: flex; justify-content: space-between; font-size: 12.5px; opacity: .7; margin-top: 3px; }
.sb-baukasten-wz .sb-bkf-lt-zaehlen { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0 4px; }
.sb-baukasten-wz .sb-bkf-lt-zaehlen > div { flex: 1 1 200px; min-width: 0; }
.sb-baukasten-wz .sb-bkf-lt-zaehlen p { margin: 0; }
.sb-baukasten-wz .sb-bkf-lt-blitz { margin: 0; min-width: 120px; min-height: 52px; font-size: 18px; }
.sb-baukasten-wz .sb-bkf-lt-schalter { margin: 0; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.sb-baukasten-wz .sb-bkf-lt-zahl { font-weight: 700; }
.sb-baukasten-wz .sb-bkf-lt-ergebnis { font-size: 15px; opacity: .9; min-height: 1.4em; }
.sb-baukasten-wz .sb-bkf-lt-ergebnis.sb-bkf-lt-ok { color: var(--sb-gelb, #e5de00); font-weight: 700; opacity: 1; }
.sb-baukasten-wz .sb-bkf-lt-karte { position: relative; }
.sb-baukasten-wz .sb-bkf-lt-karte svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.sb-baukasten-wz .sb-bkf-lt-see { fill: #f1f3f0; }
.sb-baukasten-wz .sb-bkf-lt-ring { fill: none; stroke: #1f6f8b; stroke-width: 1; stroke-dasharray: 3 5; opacity: .5; }
.sb-baukasten-wz .sb-bkf-lt-reich { fill: rgba(229, 222, 0, .22); stroke: #b8a900; stroke-width: 2; }
.sb-baukasten-wz .sb-bkf-lt-mitte { fill: var(--sb-petrol-900, #021c1e); transition: fill .1s; }
.sb-baukasten-wz .sb-bkf-lt-mitte.sb-bkf-lt-an { fill: var(--sb-gelb, #e5de00); }
.sb-baukasten-wz .sb-bkf-lt-reich-text { position: absolute; left: 50%; transform: translate(-50%, -120%); font: 800 13px/1.2 var(--sb-schrift-titel, Montserrat, sans-serif); color: #6b6200; background: rgba(255, 255, 255, .85); border-radius: 6px; padding: 1px 6px; }
.sb-baukasten-wz .sb-bkf-lt-ort { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px #8a9590; }
.sb-baukasten-wz .sb-bkf-lt-ort--drin { background: var(--sb-gelb, #e5de00); box-shadow: 0 0 0 2.5px var(--sb-petrol-900, #021c1e); }
.sb-baukasten-wz .sb-bkf-lt-karte .sb-bkf-es-nord { right: max(10px, calc(50% - 220px)); }
.sb-baukasten-wz .sb-bkf-lt-seite { position: relative; border-radius: var(--sb-radius-s, 12px); overflow: hidden; margin: 6px 0 10px; }
.sb-baukasten-wz .sb-bkf-lt-seite svg { display: block; width: 100%; height: auto; }
.sb-baukasten-wz .sb-bkf-lt-tag { fill: #d6e6ec; }
.sb-baukasten-wz .sb-bkf-lt-kap { fill: #7d8a63; }
.sb-baukasten-wz .sb-bkf-lt-feuer { fill: var(--sb-gelb, #e5de00); stroke: #8a7f00; stroke-width: 1.5; transition: r .2s; }
.sb-baukasten-wz .sb-bkf-lt-feuer--zu { fill: #c9c9b8; stroke: #9a9a8a; }
.sb-baukasten-wz .sb-bkf-lt-wolke { fill: #fbfcfc; opacity: .94; }
.sb-baukasten-wz .sb-bkf-lt-see-seite { fill: #2e6f80; }
.sb-baukasten-wz .sb-bkf-lt-seitenname { position: absolute; transform: translate(-50%, -100%); font: 800 12.5px/1.2 var(--sb-schrift-titel, Montserrat, sans-serif); color: var(--sb-petrol-900, #021c1e); background: rgba(255, 255, 255, .85); border-radius: 5px; padding: 1px 5px; }
@media (max-width: 600px) {
	.sb-baukasten-wz .sb-bkf-lt-blitz { flex: 1 1 100%; }
	.sb-baukasten-wz .sb-bkf-lt-schalter { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-baukasten-wz .sb-bkf-gw-welle { animation: none; }
	.sb-baukasten-wz .sb-bkf-gw-wasser, .sb-baukasten-wz .sb-bkf-gw-zonen li { transition: none; }
}

/* ---------- gezeitenwelle ohne Meter (HL-B5): Kurve niedrig bis hoch, Marken, Grenze, Viertel ---------- */
.sb-baukasten-wz .sb-bkf-gw-r-kurve { margin: 6px 0 0; }
.sb-baukasten-wz .sb-bkf-gw-r-nummern { position: relative; height: calc(var(--sb-bkf-reihen, 1) * 28px); }
.sb-baukasten-wz .sb-bkf-gw-r-nr { position: absolute; bottom: calc(var(--sb-bkf-reihe, 0) * 28px); transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--sb-petrol-700, #004445); color: #fff; font: 800 12.5px/24px var(--sb-schrift-titel, Montserrat, sans-serif); text-align: center; box-shadow: 0 0 0 2px #fff; }
.sb-baukasten-wz .sb-bkf-gw-r-grenzname { position: absolute; bottom: calc(var(--sb-bkf-reihe, 0) * 28px + 2px); transform: translateX(-50%); background: #b4532f; color: #fff; font: 700 12px/1 var(--sb-schrift-text, "Source Sans 3", sans-serif); border-radius: 6px; padding: 5px 6px; }
.sb-baukasten-wz .sb-bkf-gw-r-flaeche { position: relative; border-radius: var(--sb-radius-s, 12px); overflow: hidden; background: #eaf4f6; }
.sb-baukasten-wz .sb-bkf-gw-r-flaeche svg { display: block; width: 100%; height: auto; }
.sb-baukasten-wz .sb-bkf-gw-r-wasser { opacity: .55; }
.sb-baukasten-wz .sb-bkf-gw-r-strich { stroke: var(--sb-petrol-700, #004445); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-r-punkt { fill: #fff; stroke: var(--sb-petrol-700, #004445); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-r-grenze { stroke: #b4532f; stroke-width: 3; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-r-jetztlinie { stroke: var(--sb-petrol-900, #021c1e); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.sb-baukasten-wz .sb-bkf-gw-r-hoch, .sb-baukasten-wz .sb-bkf-gw-r-niedrig { position: absolute; left: 6px; transform: translateY(-50%); font: 700 11.5px/1 var(--sb-schrift-text, "Source Sans 3", sans-serif); color: var(--sb-petrol-700, #004445); background: rgba(255, 255, 255, .8); border-radius: 4px; padding: 2px 5px; }
.sb-baukasten-wz .sb-bkf-gw-r-bandname { position: absolute; top: 4px; transform: translateX(-50%); font: 700 11px/1.1 var(--sb-schrift-text, "Source Sans 3", sans-serif); color: var(--sb-petrol-900, #021c1e); text-align: center; white-space: nowrap; }
.sb-baukasten-wz .sb-bkf-gw-band--niedrig { fill: #f4ecd6; background: #f4ecd6; }
.sb-baukasten-wz .sb-bkf-gw-band--auflaufend { fill: #e1eef3; background: #e1eef3; }
.sb-baukasten-wz .sb-bkf-gw-band--hoch { fill: #cfe3ec; background: #cfe3ec; }
.sb-baukasten-wz .sb-bkf-gw-band--ablaufend { fill: #e7f1e9; background: #e7f1e9; }
.sb-baukasten-wz .sb-bkf-gw-r-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin: 2px 0 6px; }
.sb-baukasten-wz .sb-bkf-gw-r-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid #c9d6d1; vertical-align: -2px; margin-right: 5px; }
.sb-baukasten-wz .sb-bkf-gw-r-zeiten { position: relative; height: 34px; font: 600 12.5px/1.2 var(--sb-schrift-text, "Source Sans 3", sans-serif); opacity: .8; margin-top: 3px; }
.sb-baukasten-wz .sb-bkf-gw-r-zeit { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.sb-baukasten-wz .sb-bkf-gw-r-zeit--links { transform: none; text-align: left; }
.sb-baukasten-wz .sb-bkf-gw-r-zeit--rechts { transform: translateX(-100%); text-align: right; }
.sb-baukasten-wz .sb-bkf-gw-r-zeit small { display: block; font-weight: 400; }
.sb-baukasten-wz .sb-bkf-gw-r-pegel { display: flex; align-items: center; gap: 8px; max-width: 360px; font-size: 13px; margin: 0 0 8px; }
.sb-baukasten-wz .sb-bkf-gw-r-pegel i { flex: 1; height: 10px; border-radius: 999px; background: var(--sb-grau-200, #e5e7eb); overflow: hidden; }
.sb-baukasten-wz .sb-bkf-gw-r-pegel b { display: block; height: 100%; background: #1f6f8b; border-radius: 999px; transition: width .2s; }
.sb-baukasten-wz .sb-bkf-gw-r-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sb-baukasten-wz .sb-bkf-gw-r-liste li { display: grid; grid-template-columns: 26px 1fr; gap: 0 8px; align-items: center; background: #f3f6f5; border-radius: 12px; padding: 8px 10px; }
.sb-baukasten-wz .sb-bkf-gw-r-liste em { grid-column: 2; font-style: normal; font-size: 14px; }
.sb-baukasten-wz .sb-bkf-gw-r-grenzzeile .sb-bkf-gw-nr { background: #b4532f; }
.sb-baukasten-wz .sb-bkf-gw-r-passend h3 { font-size: 17px; margin: 16px 0 8px; }
.sb-baukasten-wz .sb-bkf-gw-r-orte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sb-baukasten-wz .sb-bkf-gw-r-orte li { border: 2px solid var(--sb-grau-200, #e5e7eb); border-radius: 12px; padding: 10px 12px; opacity: .6; transition: opacity .2s, border-color .2s; }
.sb-baukasten-wz .sb-bkf-gw-r-orte li.sb-bkf-gw-r-an { opacity: 1; border-color: var(--sb-mint, #77c49b); background: #e3f4ea; }
.sb-baukasten-wz .sb-bkf-gw-r-orte p { margin: 4px 0 0; font-size: 14.5px; }
.sb-baukasten-wz .sb-bkf-gw-r-marke { display: inline-block; margin-left: 8px; font: 700 11.5px/1 var(--sb-schrift-text, "Source Sans 3", sans-serif); background: #1d6b41; color: #fff; border-radius: 999px; padding: 4px 8px; vertical-align: 2px; }
.sb-baukasten-wz .sb-bkf-gw-texte ol { margin: 6px 0 0; padding-left: 20px; }
.sb-baukasten-wz--dunkel .sb-bkf-gw-r-orte li { border-color: rgba(255, 255, 255, .25); }
.sb-baukasten-wz--dunkel .sb-bkf-gw-r-orte li.sb-bkf-gw-r-an { color: var(--sb-text, #1f2937); }
@media (max-width: 600px) {
	.sb-baukasten-wz .sb-bkf-gw-r-zeit { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-baukasten-wz .sb-bkf-gw-r-pegel b, .sb-baukasten-wz .sb-bkf-gw-r-orte li { transition: none; }
}