/* WordPress (Welle 2): Kopie aus dem Entwurf; -webkit-hyphens ergänzt, Safari- und Bewegungskorrekturen am Ende.
   ==========================================================================================
   Rollrasen Kahl – Ratgeber, Artikel, Liefergebiet und Stadtseite (Etappe 2, Sitzung C „Wissen und Region“, 17.10.2026)
   Baut auf morgentau.css auf (Farben, Schrift, Knöpfe, Karten, Sortenkarte, Zubehörkarte, Garantie, Beratung, Fragen).
   Abschnitt „Kopien“: Bauteile aus startseite.css und produkt.css mit gleichen Klassen und Werten, bis die Koordination
   sie nach morgentau.css zieht (Wunsch C 1 in briefing/etappe2-wuensche.md). Mobile first.
   ========================================================================================== */

/* ---------- Kopien aus startseite.css / produkt.css (gleiche Werte) ---------- */
.map.is-in .map__ring, .map.is-in .map__radius { opacity: 1; }
.artikel { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .artikel { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
/* ==========================================================================================
   Gemeinsam für die vier Seiten
   ========================================================================================== */

/* ---------- Seitenkopf: Brotkrumen, Kicker, H1, Einleitung, Bild oder Karte ---------- */
.seitenkopf { padding: 14px 0 clamp(44px, 6vw, 84px); }
.seitenkopf__raster { display: grid; gap: 28px; align-items: center; }
.seitenkopf__raster > * { min-width: 0; }
@media (min-width: 1000px) { .seitenkopf__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }
.seitenkopf h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.seitenkopf__lead { margin: 18px 0 0; max-width: 54ch; font-size: 1.0625rem; color: var(--tinte-2); }
@media (min-width: 768px) { .seitenkopf__lead { font-size: 1.1875rem; } }
.seitenkopf__bild { margin: 0; aspect-ratio: 3 / 2; box-shadow: var(--schatten-2); }
.seitenkopf__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.seitenkopf__meta .chip { min-height: 36px; background: var(--karte); }
.seitenkopf .plz { max-width: 520px; }
@media (max-width: 359px) { .seitenkopf h1 { font-size: 1.95rem; } .plz { grid-template-columns: 1fr; } }

/* ---------- Faktenkacheln (Stadtseite, Liefergebiet, Ratgeber) ---------- */
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; }
.fakten > div { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); }
.fakten dt { display: flex; align-items: center; gap: 8px; font: 600 .6875rem/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tannengruen); }
.fakten dt .icon { width: 17px; height: 17px; }
.fakten dd { margin: 0; font: 700 clamp(1rem, .9rem + .4vw, 1.125rem)/1.25 var(--kopf); color: var(--tinte); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.fakten dd small { display: block; margin-top: 3px; font: 500 .8125rem/1.35 var(--sans); color: var(--tinte-2); }
@media (min-width: 640px) { .fakten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) and (max-width: 1279px) { .seitenkopf .fakten--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Zustand mit Symbol und Text (nicht nur Farbe) */
.status { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: .35em .95em .35em .5em; border-radius: 999px; background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font: 600 .875rem/1.2 var(--sans); }
.status .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--tannengruen); color: #fff; stroke-width: 2.4; }
.status--weit { background: #F4EAD7; color: #5B4A1E; }
.status--weit .icon { background: #5B4A1E; }

/* ---------- Abschnittsfüße, kleine Hinweise ---------- */
.abschnitt__fuss { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 26px; }
.quelle { margin: 14px 0 0; font-size: .8125rem; color: var(--tinte-2); }

/* ---------- Zubehör-Teaser (Zubehörkarte .produkt aus morgentau.css) ---------- */
.teaser__raster { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.teaser__raster > * { min-width: 0; }
@media (min-width: 640px) { .teaser__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .teaser__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.teaser__raster .produkt .knoepfe { margin-top: auto; padding-top: 10px; }
.teaser__raster .produkt__bild { aspect-ratio: 4 / 3; }
.teaser__raster .produkt .btn { margin-top: 0; }
.teaser__service { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--r-l); }
.teaser__service h3 { position: relative; font-size: 1.5rem; font-weight: 600; }
.teaser__service p { position: relative; margin: 0; }
.teaser__service .btn { position: relative; margin-top: auto; align-self: flex-start; }
.teaser__spirale { position: absolute; right: -50px; bottom: -60px; width: 220px; height: 220px; color: var(--wald-700); fill: none; stroke: currentColor; stroke-width: 1.2; pointer-events: none; }
/* ==========================================================================================
   Ratgeber-Übersicht
   ========================================================================================== */
.themen { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.themen > * { min-width: 0; }
@media (min-width: 640px) { .themen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .themen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.thema { position: relative; }
.thema h3 a { color: inherit; text-decoration: none; }
.thema h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.thema h3 a:focus-visible { outline: none; }
.thema:focus-within { outline: 3px solid var(--tannengruen); outline-offset: 3px; }
.thema__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie); font-size: .8125rem; color: var(--tinte-2); }
.thema__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.thema__meta .icon { width: 15px; height: 15px; }
.thema__meta b { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--tannengruen); font-size: .9375rem; }
.thema__meta b .icon { width: 18px; height: 18px; margin: 0; transition: transform .25s var(--ease); }
.thema:hover .thema__meta b .icon { transform: translateX(3px); }
/* Rasenjahr: Pflege nach Monaten */
.jahrplan { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.jahrplan > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 4px 16px; align-items: start; padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); }
.jahrplan > li > :not(.jahrplan__monat) { grid-column: 2; }
.jahrplan__monat { grid-row: 1 / span 3; display: grid; place-items: center; align-self: start; width: 64px; height: 64px; border-radius: 16px; background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font: 700 .9375rem/1.1 var(--kopf); text-align: center; }
.jahrplan h3 { font-size: 1.1rem; }
.jahrplan p { margin: 0; color: var(--tinte-2); font-size: .9375rem; }
.jahrplan__tag { display: inline-flex; align-items: center; align-self: end; gap: 6px; margin-top: 8px; font: 600 .75rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tannengruen); }
.jahrplan__tag .icon { width: 15px; height: 15px; }
@media (min-width: 1000px) {
  .jahrplan { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
/* Zahlen auf einen Blick */
.zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.zahlen > div { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--r-m); background: rgb(243 240 232 / .06); border: 1px solid rgb(243 240 232 / .1); }
.zahlen dt { font: 800 clamp(1.55rem, 1.15rem + 1.5vw, 2.3rem)/1 var(--kopf); color: var(--hellgruen); letter-spacing: -.02em; }
.zahlen dd { margin: 0; color: var(--auf-dunkel-2); font-size: .9375rem; line-height: 1.45; }
@media (min-width: 900px) { .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* Rasenfinder-Hinweis */
.finder { display: grid; gap: 14px; align-items: center; padding: 22px; }
.finder h3 { font-size: 1.3rem; }
.finder p { margin: 0; color: var(--tinte-2); }
@media (min-width: 800px) { .finder { grid-template-columns: auto 1fr auto; gap: 20px; } }
.finder__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); }
/* ==========================================================================================
   Artikel-Vorlage
   ========================================================================================== */
.artikelseite .seitenkopf { padding-bottom: clamp(32px, 4vw, 56px); }
.artikelseite .seitenkopf h1 { font-size: clamp(2.05rem, 1.3rem + 2.8vw, 3.6rem); }
.artikel-raster { display: grid; gap: 28px; padding-bottom: var(--sektion); }
.artikel-raster > * { min-width: 0; }
@media (min-width: 1100px) { .artikel-raster { grid-template-columns: 290px minmax(0, 1fr); gap: 64px; align-items: start; } }
.seitenleiste { display: grid; gap: 18px; }
@media (min-width: 1100px) { .seitenleiste { position: sticky; top: calc(var(--kopf-h) + 24px); } }
.seitenleiste .beratung { margin-top: 0; }
@media (max-width: 1099px) { .seitenleiste .beratung { display: none; } }
/* Inhaltsverzeichnis: Handy aufklappbar, Desktop immer offen mit aktuellem Abschnitt */
.toc { border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--karte); }
.toc__knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 12px 18px;
  border: 0; border-radius: var(--r-l); background: none; color: var(--tinte); font: 600 1rem/1.2 var(--kopf); text-align: left;
}
.toc__knopf .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.toc.ist-offen .toc__knopf .icon { transform: rotate(180deg); }
.toc__titel { display: none; margin: 0; padding: 18px 20px 6px; font: 600 .75rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tannengruen); }
.toc__liste { margin: 0; padding: 0 10px 12px; list-style: none; counter-reset: toc; }
.toc__liste li { counter-increment: toc; }
.toc__liste a {
  display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 12px;
  color: var(--tinte-2); font-size: .9375rem; line-height: 1.35; text-decoration: none; transition: background-color .2s, color .2s;
}
.toc__liste a::before { content: counter(toc, decimal-leading-zero); flex: none; font: 700 .75rem/1 var(--kopf); color: var(--tannengruen); opacity: .7; }
.toc__liste a:hover { background: rgb(16 26 20 / .04); color: var(--tinte); }
.toc__liste a[aria-current="true"] { background: var(--hellgruen-flaeche); color: var(--tinte); font-weight: 600; }
.toc__liste a[aria-current="true"]::before { opacity: 1; }
@media (max-width: 1099px) { .toc:not(.ist-offen) .toc__liste { display: none; } }
@media (min-width: 1100px) { .toc__knopf { display: none; } .toc__titel { display: block; } }
/* Fließtext: 65–75 Zeichen je Zeile (ui-ux-pro-max: Line Length) */
.artikeltext { max-width: 70ch; }
.artikeltext > section { scroll-margin-top: calc(var(--kopf-h) + 20px); }
.artikeltext > section + section { margin-top: clamp(44px, 5vw, 68px); }
.artikeltext h2 { margin-bottom: 16px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.artikeltext h3 { margin: 28px 0 8px; font-size: 1.2rem; }
.artikeltext p { margin: 0 0 1em; }
.artikeltext .kicker { margin-bottom: 12px; }
.artikeltext .haken { margin: 16px 0 20px; }
.artikeltext .haken li { line-height: 1.5; }
.artikeltext figure.foto { margin: 26px 0 8px; aspect-ratio: 3 / 2; box-shadow: var(--schatten-1); }
.artikeltext figure.foto + .bildtext { margin: 0 0 22px; font-size: .8125rem; color: var(--tinte-2); }
.schritte-liste { display: grid; gap: 12px; margin: 18px 0 22px; padding: 0; list-style: none; counter-reset: sl; }
.schritte-liste li { position: relative; padding: 2px 0 0 44px; counter-increment: sl; line-height: 1.55; }
.schritte-liste li::before {
  content: counter(sl); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--tannengruen); color: #fff; font: 700 .875rem/1 var(--kopf);
}
/* Merkkasten mit Zahlen */
.merk { margin: 26px 0; padding: 20px; border: 1px solid rgb(29 77 53 / .16); border-radius: var(--r-l); background: var(--hellgruen-flaeche); }
.merk__titel { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tannengruen); }
.merk__titel .icon { width: 18px; height: 18px; }
.merk__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0; }
.merk__liste > div { display: grid; gap: 4px; align-content: start; }
.merk__liste dt { font: 800 clamp(1.45rem, 1.15rem + 1vw, 1.95rem)/1.05 var(--kopf); color: var(--tannengruen-dunkel); letter-spacing: -.02em; overflow-wrap: break-word; }
.merk__liste dd { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--tinte); }
@media (max-width: 359px) { .merk__liste { grid-template-columns: 1fr; } }
/* Tipp-Kasten */
.tipp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 22px 0; padding: 18px 20px; border-left: 3px solid var(--tannengruen); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--karte); box-shadow: var(--schatten-1); }
.tipp .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--tannengruen); }
.tipp p { margin: 0; }
.tipp b { display: block; margin-bottom: 2px; }
/* Video-Platzhalter (das Video der Live-Seite wird erst im Bau eingebunden) */
.video-platz { position: relative; margin: 26px 0 8px; aspect-ratio: 16 / 9; }
.video-platz::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 21 16 / .05), rgb(10 21 16 / .62)); pointer-events: none; }
.video-platz__knopf {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px; width: 100%; padding: 18px;
  border: 0; background: none; color: var(--auf-dunkel); text-align: center;
}
.video-platz__knopf .rund { width: 64px; height: 64px; border: 0; background: rgb(243 240 232 / .92); color: var(--nacht); }
.video-platz__knopf .rund .icon { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.video-platz__knopf b { font: 600 1.05rem/1.3 var(--kopf); text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.video-platz__knopf span:last-child { font-size: .8125rem; color: rgb(243 240 232 / .85); }
.video-platz__knopf:hover .rund { background: #fff; }
/* Weitere Artikel und Abschluss */
.weiter__raster { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .weiter__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.artikel-fehlt { padding: clamp(48px, 8vw, 120px) 0; }
[data-artikel-teil][hidden] { display: none; }
.finder { margin-top: 22px; }
/* ==========================================================================================
   Liefergebiet: Karte neben der Städteliste
   ========================================================================================== */
.gebiet__raster { display: grid; gap: 24px; align-items: start; }
.gebiet__raster > * { min-width: 0; }
@media (min-width: 1000px) {
  .gebiet__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
  .gebiet__karte { position: sticky; top: calc(var(--kopf-h) + 18px); }
}
.gebiet__karte { margin: 0; padding: clamp(12px, 2vw, 22px); }
.gebiet__werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.gebiet__werkzeug .segment { flex: 0 1 auto; }
.gebiet__werkzeug .mini { margin: 0; }
.gebiet__auswahl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; min-height: 64px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--elfenbein); }
.gebiet__auswahl p { margin: 0; font-size: .9375rem; color: var(--tinte-2); }
.gebiet__auswahl b { color: var(--tinte); }
.gebiet__auswahl .btn { grid-row: span 2; }
@media (max-width: 479px) { .gebiet__auswahl { grid-template-columns: 1fr; } .gebiet__auswahl .btn { grid-row: auto; justify-self: start; } }
/* Karte der Region: Marker in Bildschirm-Pixeln, unabhängig vom Ausschnitt */
.karte-region { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-m); background: #EEF3E6; touch-action: manipulation; }
.karte-region--stadt { aspect-ratio: 4 / 3; }
.karte-region .map__land { fill: rgb(255 255 255 / .34); stroke: rgb(29 77 53 / .42); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.karte-region .map__ring { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.karte-region .map__land-name { font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; fill: rgb(29 77 53 / .55); }
.karte-region .map__radius { font-size: 11px; }
.karte-region .map__route-line { stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.karte-region .map__route-label text { font-size: 11.5px; }
.karte-region .map__depot text { font-size: 12px; paint-order: stroke; stroke: rgb(243 240 232 / .85); stroke-width: 3px; stroke-linejoin: round; }
.karte-region .map__pulse { transform-box: fill-box; transform-origin: center; }
/* Nur die Städte sind bedienbar; Lager, Route, Orientierung und Beschriftungen fangen keine Klicks ab */
.karte-region :is(.map__area, .map__land, .map__ring, .map__radius-g, .map__land-g, .map__ort, .map__depot, .map__route) { pointer-events: none; }
/* Puls um das Lager, nicht um die Bildmitte */
.map__ort circle { fill: #EEF3E6; stroke: var(--tinte-2); stroke-width: 1.2; opacity: .7; }
.map__ort text { font: 500 11px var(--sans); fill: var(--tinte-2); opacity: .8; }
.map__stadt { opacity: 0; transition: opacity .5s var(--cd, .3s); }
.map__stadt text, .map__stadt .map__ziel { pointer-events: none; }
/* Treffer rechnet stadt.js über die nächste Stadt */
.map.is-in .map__stadt, .map.is-in .map__ort, .map.is-in .map__depot { opacity: 1; }
.map__ort, .map__depot { opacity: 0; transition: opacity .6s .5s; }
.map__stadt .map__punkt { fill: var(--tinte-2); stroke: #fff; stroke-width: 1.2; transition: fill .2s, r .2s; }
.map__stadt text { font: 500 11.5px var(--sans); fill: var(--tinte); paint-order: stroke; stroke: rgb(243 240 232 / .9); stroke-width: 3px; stroke-linejoin: round; transition: opacity .25s; }
.map__stadt[data-rang="1"] text { font-weight: 600; }
.map__stadt.ohne-text text { opacity: 0; }
.map__stadt.ist-gedimmt { opacity: .25; }
.map__stadt.ist-nachbar .map__punkt { fill: var(--tannengruen); }
.map__stadt.is-active .map__punkt { fill: var(--tannengruen); r: 6px; }
.map__stadt.is-active text { font-weight: 700; font-size: 13px; }
.map__stadt.is-active .map__ziel { opacity: 1; }
.map__ziel { fill: none; stroke: var(--tannengruen); stroke-width: 1.5; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .map__stadt.is-active .map__ziel { animation: zielpuls 2.2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes zielpuls { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.2); } }
.karte-region.wird-gezoomt .map__stadt text { opacity: 0; }
/* Städteliste nach Region: Suche, Filter (umbrechend, nie abgeschnitten), Ortslinks */
.suche { position: relative; }
.suche .eingabe { padding-left: 2.6em; }
.suche > .icon { position: absolute; left: 14px; bottom: 15px; width: 18px; height: 18px; color: var(--tinte-2); pointer-events: none; }
.regionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.regionen .chip { min-height: 44px; padding: 0 16px; background: var(--karte); font-size: .875rem; cursor: pointer; }
.regionen .chip[aria-pressed="true"] { background: var(--nacht); border-color: var(--nacht); color: var(--auf-dunkel); }
.regionen .chip span { opacity: .65; font-variant-numeric: tabular-nums; }
.staedte { display: grid; gap: 22px; margin-top: 16px; }
.region-gruppe h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 1.15rem; }
.region-gruppe h3 small { font: 500 .8125rem var(--sans); color: var(--tinte-2); }
.region-gruppe ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ort {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--tinte); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: border-color .2s, background-color .2s;
}
.ort small { font-size: .75rem; font-weight: 500; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.ort:hover, .ort.ist-markiert { border-color: var(--tannengruen); background: var(--hellgruen-flaeche); color: var(--tinte); }
.staedte__leer { margin: 18px 0 0; padding: 16px 18px; border-radius: var(--r-m); background: #F4EAD7; color: #5B4A1E; }
.staedte__leer a { color: inherit; font-weight: 600; }
/* Lieferinfos */
.lieferinfo__raster { display: grid; gap: 28px; align-items: start; }
.lieferinfo__raster > * { min-width: 0; }
@media (min-width: 1000px) { .lieferinfo__raster { grid-template-columns: 1fr 1fr; gap: 56px; } }
.zeilen--info > * { align-items: baseline; }
.zeilen--info dt { color: var(--tinte-2); }
.zeilen--info dd { margin: 0; font-weight: 600; text-align: right; }
.lager__zeiten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 10px; font-size: .9375rem; }
.lager__zeiten dt { color: var(--tinte-2); }
.lager__zeiten dd { margin: 0; }
.lager__km { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font: 600 .8125rem/1.2 var(--sans); }
.lager__km .icon { width: 15px; height: 15px; }
/* ==========================================================================================
   Stadtseite
   ========================================================================================== */
.stadtkopf .seitenkopf__raster { grid-template-areas: "text" "fakten" "karte"; align-items: start; }
.stadtkopf .seitenkopf__text { grid-area: text; }
.stadtkopf__fakten { grid-area: fakten; margin: 0; }
.stadtkopf__karte { grid-area: karte; margin: 0; padding: clamp(10px, 1.6vw, 18px); }
@media (min-width: 1000px) { .stadtkopf .seitenkopf__raster { grid-template-areas: "text karte" "fakten fakten"; row-gap: 36px; align-items: center; } }
.stadtkopf h1 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.4rem); }
.stadtkopf__karte figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; font-size: .8125rem; color: var(--tinte-2); }
.stadtkopf .status { margin-top: 20px; }
.wege__raster { display: grid; gap: 18px; align-items: start; }
.wege__raster > * { min-width: 0; }
@media (min-width: 1000px) { .wege__raster { grid-template-columns: 1fr 1fr; gap: 28px; } }
.weg { padding: clamp(20px, 3vw, 30px); }
.weg__kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.weg__kopf h3 { font-size: 1.45rem; }
.weg__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); }
.weg .plz { margin: 18px 0 6px; }
.weg .lager li { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.weg .lager li:last-child { border-bottom: 0; padding-bottom: 0; }
.weg .lager li:first-child { padding-top: 4px; }
.nachbarn__raster { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nachbarn__raster > * { min-width: 0; }
@media (min-width: 640px) { .nachbarn__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nachbarn__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.nachbar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center; padding: 14px 16px 14px 20px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.nachbar:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }
.nachbar__text { display: grid; gap: 2px; min-width: 0; }
.nachbar__region { margin: 0; font: 600 .6875rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tannengruen); }
.nachbar h3 { font-size: 1.2rem; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.nachbar h3 a { color: inherit; text-decoration: none; }
.nachbar h3 a::after { content: ""; position: absolute; inset: 0; }
.nachbar:focus-within { outline: 3px solid var(--tannengruen); outline-offset: 3px; }
.nachbar h3 a:focus-visible { outline: none; }
.nachbar__lager { margin: 0; font-size: .8125rem; color: var(--tinte-2); }
.nachbar__km { display: grid; justify-items: end; margin: 0; line-height: 1.2; text-align: right; }
.nachbar__km b { font: 700 1.15rem/1.1 var(--kopf); color: var(--tannengruen-dunkel); white-space: nowrap; }
.nachbar__km span { font-size: .75rem; color: var(--tinte-2); }
.nachbar__pfeil { width: 18px; height: 18px; color: var(--tannengruen); transition: transform .25s var(--ease); }
.nachbar:hover .nachbar__pfeil { transform: translateX(3px); }
.stadt-fehlt { padding: clamp(32px, 6vw, 80px) 0 var(--sektion); }
.stadt-fehlt .plz { max-width: 520px; }
[data-stadt-inhalt][hidden] { display: none; }

/* ---------- Legende, Lagerliste, Infotabelle ---------- */
.legende__stadt, .legende__lager { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }
.legende__stadt { background: var(--tinte-2); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linie); }
.legende__stadt--nah { background: var(--tannengruen); }
.legende__lager { background: var(--elfenbein); border: 3px solid var(--tannengruen); }
.gebiet__karte figcaption { display: grid; gap: 4px; margin-top: 10px; }
.gebiet__karte .liefern__legende { margin-top: 0; }
.gebiet__karte .liefern__legende i { margin-right: 6px; }
.gebiet__auswahl-text { font-size: .9375rem; color: var(--tinte-2); line-height: 1.45; }
.gebiet__auswahl-text b { color: var(--tinte); }
[data-auswahl-link][hidden] { display: none; }
.staedte__hinweis { margin: 4px 0 0; }
.lager__titel { margin: 0 0 4px; font-size: 1.15rem; }
.zeilen--info.karte { padding: 4px 20px; }
.zeilen--info { margin: 18px 0 0; }
.zeilen--info > div { display: grid; grid-template-columns: minmax(8em, 1fr) minmax(0, max-content); gap: 12px; }
.lager__adresse { margin: 0 0 6px; line-height: 1.45; }
.lieferinfo__bild { margin: 18px 0 0; aspect-ratio: 3 / 2; box-shadow: var(--schatten-1); }
.lieferinfo .lager { margin-top: 20px; }
.karten-quelle { margin: 0; font-size: .75rem; color: var(--tinte-2); }
.karten-quelle a { color: inherit; }
.stadtkopf__karte .karten-quelle { flex-basis: 100%; }
/* ==========================================================================================
   WordPress (Welle 2): Safari-Korrekturen und ruhige Bewegung (tools/welle2/bau_region.py)
   ========================================================================================== */
/* Suchfeld (type="search"): Safari zeichnet sonst eine eigene Form (runde Ecken, Schatten) und eine eigene Lupe; so gilt
   .eingabe wie beim PLZ-Feld, und der Text beginnt nach unserer Lupe */
#stadtsuche { -webkit-appearance: none; appearance: none; padding-left: 2.6em; }
#stadtsuche::-webkit-search-decoration, #stadtsuche::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
#stadtsuche::-webkit-search-cancel-button { margin-left: 8px; cursor: pointer; }
/* Flex-Text darf schrumpfen und umbrechen – sonst schiebt Safari die Seite in die Breite */
.fakten dt, .merk__titel, .status, .lager__km, .toc__liste a, .region-gruppe h3, .ort, .weg__kopf { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.fakten dt, .merk__titel, .lager__km, .region-gruppe h3 { -webkit-hyphens: auto; hyphens: auto; }
.status > span, .weg__kopf > h3, .region-gruppe li, .gebiet__auswahl-text { min-width: 0; overflow-wrap: break-word; }
/* Mitlaufende Karte im Liefergebiet: nie höher als das Fenster (1280 × 800 schnitt sonst Karte und Auswahl ab). 320 px =
   Werkzeugleiste, Legende, Auswahl, Quelle, Innenabstand und Luft; unter 700 px Fensterhöhe läuft die Karte nicht mit. */
@media (min-width: 1000px) {
  .gebiet__karte .karte-region { width: min(100%, calc(100vh - var(--kopf-h) - var(--karte-rest, 320px))); margin-inline: auto; }
  @supports (height: 100svh) { .gebiet__karte .karte-region { width: min(100%, calc(100svh - var(--kopf-h) - var(--karte-rest, 320px))); } }
}
@media (min-width: 1000px) and (max-height: 699px) {
  .gebiet__karte { position: static; }
  .gebiet__karte .karte-region { width: 100%; }
}
/* „Bewegung reduzieren“: Karte und Karten blenden nur über, nichts wächst, gleitet oder hebt sich (Wagen und Route regelt
   stadt.js: Route blendet ein, der Wagen steht am Ziel) */
@media (prefers-reduced-motion: reduce) {
  .karte-region .map__area { transform: none; }
  .nachbar, .nachbar:hover { transform: none; }
  .nachbar:hover .nachbar__pfeil, .thema:hover .thema__meta b .icon { transform: none; }
}
/* Wächter für die Prüfwerkzeuge: steht am Dateiende und fehlt, wenn die Datei nur halb geladen wurde */
:root { --ende-region: 1; }