/* ==========================================================================================
   Rollrasen Kahl Morgentau – Welle 2, Service-Seiten: Verlegeservice, Abhollager, Kontakt, Über uns.
   Kopie von site/css/service.css des freigegebenen Entwurfs (Etappe 2, Sitzung B, 17.10.2026) mit gezählten
   Änderungen aus tools/welle2/bau_service.py – nicht hier bearbeiten, sondern dort und neu bauen. Geändert: Ersatzwerte
   für svh, -webkit-hyphens, Kennzeichnung des Lagerfotos; Ergänzungen für WordPress stehen am Ende der Datei.
   Mobile first, baut auf morgentau.css auf. Kein Braun in der Oberfläche.
   ========================================================================================== */

/* ---------- Kopien (bis die Koordination sie nach morgentau.css zieht; Wünsche B 1, B 2, C 1) ----------
   Gleiche Klassennamen und Werte wie in startseite.css und produkt.css, damit der Umzug nichts verändert. */
.dunkel .brotkrumen ol, .dunkel .brotkrumen a { color: var(--auf-dunkel-2); }
.dunkel .brotkrumen li:not(:last-child)::after { color: rgb(243 240 232 / .38); }
.dunkel .brotkrumen a:hover { color: var(--auf-dunkel); }
.dunkel .brotkrumen [aria-current] { color: var(--auf-dunkel); }

/* ---------- Seitenkopf: Hero der Service-Seiten ----------
   --foto: Foto über die ganze Breite, Kopf liegt darüber (kopf--ueber-foto); Handy: Foto oben, Text darunter.
   --geteilt: Text links, gerahmtes Foto oder Kontaktkacheln rechts (Abhollager, Kontakt). */
.seitenkopf { position: relative; isolation: isolate; overflow: hidden; background: var(--nacht); color: var(--auf-dunkel); }
.seitenkopf--foto { margin-top: calc(-1 * var(--kopf-h)); padding-top: var(--kopf-h); }
.seitenkopf__bild, .seitenkopf__schleier { position: absolute; left: 0; right: 0; top: 0; height: clamp(300px, 56vh, 540px); height: clamp(300px, 56svh, 540px); }
.seitenkopf__bild { z-index: -2; }
.seitenkopf__bild .buehne__still img { object-position: var(--bild-x, 50%) var(--bild-y, 50%); }
.seitenkopf__bild--gespiegelt .buehne__still, .seitenkopf__bild--gespiegelt .buehne__canvas { transform: scaleX(-1); }
.seitenkopf__schleier {
  z-index: -1;
  background: linear-gradient(180deg, rgb(10 21 16 / .7) 0%, rgb(10 21 16 / .12) 26%, rgb(10 21 16 / .2) 52%, rgb(10 21 16 / .82) 82%, var(--nacht) 100%);
}
.seitenkopf__bild > .ki-hinweis { top: calc(var(--kopf-h) + 8px); bottom: auto; }
.seitenkopf__inhalt { position: relative; display: flex; flex-direction: column; padding-bottom: clamp(36px, 6vw, 64px); }
.seitenkopf .brotkrumen ol { margin: 0; }
.seitenkopf__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 660px; margin-top: clamp(140px, 25vh, 250px); margin-top: clamp(140px, 25svh, 250px); }
.seitenkopf__text .kicker { margin: 0; }
.seitenkopf__titel { font-size: clamp(2.3rem, 1.25rem + 3.7vw, 4.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; -webkit-hyphens: auto; hyphens: auto; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.seitenkopf__lead { max-width: 46ch; margin: 0; font-size: 1.0625rem; color: rgb(243 240 232 / .86); }
.seitenkopf__text .knoepfe { margin-top: 6px; }
.seitenkopf .knoepfe .btn { flex: 1 1 auto; }
/* Ab 320 px: lange Knopftexte dürfen umbrechen statt über den Rand zu laufen */
@media (max-width: 399px) { .service-seite .btn { white-space: normal; text-align: center; } }
@media (min-width: 560px) { .seitenkopf .knoepfe .btn { flex: 0 1 auto; } }
.seitenkopf__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 32px; padding-top: 22px; border-top: 1px solid rgb(243 240 232 / .12); }
.seitenkopf__punkte { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.seitenkopf__punkte li { display: flex; align-items: center; gap: 10px; color: var(--auf-dunkel); white-space: nowrap; }
.seitenkopf__punkte .icon { color: var(--hellgruen); width: 20px; height: 20px; }
@media (min-width: 700px) { .seitenkopf__punkte { display: flex; flex-wrap: wrap; gap: 10px 28px; } }
@media (min-width: 900px) {
  .seitenkopf--foto { display: flex; flex-direction: column; min-height: clamp(580px, 86vh, 860px); min-height: clamp(580px, 86svh, 860px); }
  .seitenkopf--foto .seitenkopf__bild, .seitenkopf--foto .seitenkopf__schleier { bottom: 0; height: auto; }
  .seitenkopf--foto .seitenkopf__schleier {
    background:
      linear-gradient(90deg, rgb(10 21 16 / .88) 0%, rgb(10 21 16 / .7) 30%, rgb(10 21 16 / .22) 58%, rgb(10 21 16 / 0) 78%),
      linear-gradient(180deg, rgb(10 21 16 / .62) 0%, rgb(10 21 16 / 0) 20%, rgb(10 21 16 / 0) 66%, rgb(10 21 16 / .78) 100%);
  }
  .seitenkopf--foto .seitenkopf__inhalt { flex: 1; }
  .seitenkopf--foto .seitenkopf__text { flex: 1; justify-content: center; margin-top: 0; padding-block: clamp(28px, 6vh, 72px); }
  .seitenkopf__bild > .ki-hinweis { top: auto; bottom: 10px; right: 12px; }
}
/* Geteilter Seitenkopf: Text links, Foto oder Kacheln rechts */
.seitenkopf--geteilt { padding-block: clamp(20px, 3vw, 36px) clamp(44px, 6vw, 80px); }
.seitenkopf--geteilt .seitenkopf__raster { display: grid; gap: 28px; align-items: center; }
.seitenkopf--geteilt .seitenkopf__raster > * { min-width: 0; }
.seitenkopf--geteilt .seitenkopf__text { margin-top: 12px; }
.seitenkopf--geteilt .seitenkopf__titel { font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.6rem); -webkit-hyphens: manual; hyphens: manual; }
@media (min-width: 1000px) { .seitenkopf--geteilt .seitenkopf__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
/* ==========================================================================================
   Verlegeservice
   ========================================================================================== */

/* ---------- Pakete ---------- */
.vs-pakete { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .vs-pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } }
.vs-paket { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 24px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.vs-paket:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.vs-paket.ist-gewaehlt { box-shadow: 0 0 0 3px var(--rasengruen), var(--schatten-2); }
.vs-paket.karte--nacht.ist-gewaehlt { box-shadow: 0 0 0 3px var(--hellgruen), var(--schatten-2); }
.vs-paket__marke { position: absolute; top: -14px; left: 24px; }
.vs-paket__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vs-paket h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); letter-spacing: -.02em; }
.vs-paket__umfang { display: inline-flex; gap: 4px; }
.vs-paket__umfang i { width: 18px; height: 6px; border-radius: 3px; background: var(--linie); }
.vs-paket__umfang i.ist-an { background: var(--rasengruen); }
.dunkel .vs-paket__umfang i { background: rgb(243 240 232 / .16); }
.dunkel .vs-paket__umfang i.ist-an { background: var(--hellgruen); }
.vs-paket__text { margin: 0; font: 500 1.0625rem/1.5 var(--sans); }
.vs-paket .haken { font-size: .9375rem; }
.vs-paket__preis { display: grid; gap: 2px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linie); }
.vs-paket__preis b { font: 700 1.15rem/1.25 var(--kopf); }
.vs-paket__preis span { font-size: .875rem; color: var(--tinte-2); }
.dunkel .vs-paket__preis { border-color: rgb(243 240 232 / .12); }
.dunkel .vs-paket__preis span { color: var(--auf-dunkel-2); }
.vs-paket .btn { margin-top: 4px; }
.vs-pakete__fuss { display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0; font-size: .9375rem; }
.vs-pakete__fuss .icon { flex: none; margin-top: .2em; color: var(--tannengruen); }
.vs-pakete__fuss a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }

/* ---------- Leistungsvergleich ---------- */
.vs-tabelle { overflow: hidden; }
.vs-tabelle__tabelle { font-size: .9375rem; }
.vs-tabelle__tabelle thead th { padding-block: 18px; font: 700 1.05rem/1.2 var(--kopf); letter-spacing: -.01em; background: transparent; }
.vs-tabelle__tabelle tbody th { width: 31%; font: 600 .9375rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinte); }
.vs-tabelle__tabelle td { color: var(--tinte-2); }
.vs-tabelle__tabelle td .icon { width: 22px; height: 22px; color: var(--rasengruen); stroke-width: 2.2; }
.vs-tabelle__tabelle .ist-hervor { background: var(--hellgruen-flaeche); }
.vs-tabelle__tabelle thead .ist-hervor { color: var(--tannengruen-dunkel); }
@media (max-width: 599px) {
  /* Handy: jede Leistung als Block mit drei Spalten darunter; Rollen im HTML halten die Tabellen-Bedeutung */
  .vs-tabelle__tabelle, .vs-tabelle__tabelle tbody { display: block; }
  .vs-tabelle__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs-tabelle__tabelle tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
  .vs-tabelle__tabelle tbody tr:last-child { border-bottom: 0; }
  .vs-tabelle__tabelle tbody th { grid-column: 1 / -1; width: auto; padding: 14px 16px 2px; border-bottom: 0; font-size: .9375rem; }
  .vs-tabelle__tabelle td { display: grid; align-content: start; gap: 4px; padding: 6px 8px 14px 16px; border-bottom: 0; font-size: .875rem; }
  .vs-tabelle__tabelle td::before { content: attr(data-spalte); font: 600 .6875rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
  .vs-tabelle__tabelle .ist-hervor { background: transparent; }
  .vs-tabelle__tabelle td.ist-hervor::before { color: var(--tannengruen); }
}

/* ---------- Ablauf mit Fotos ---------- */
.vs-schritte { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .vs-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } }
@media (min-width: 1100px) { .vs-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vs-schritt { position: relative; display: grid; align-content: start; gap: 8px; }
.vs-schritt__bild { aspect-ratio: 16 / 9; margin-bottom: 10px; border-radius: var(--r-l); }
@media (min-width: 700px) { .vs-schritt__bild { aspect-ratio: 4 / 3; } }
.vs-schritt__nr {
  position: absolute; left: 14px; top: 14px; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgb(243 240 232 / .24); background: rgb(10 21 16 / .62); color: var(--auf-dunkel); font: 700 1rem/1 var(--kopf);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vs-schritt h3 { font-size: 1.3rem; }
.vs-schritt p { margin: 0; color: var(--auf-dunkel-2); font-size: .9375rem; }

/* ---------- Vorher / Nachher ---------- */
.vs-vorher__hinweis { margin: 12px 0 0; text-align: right; }

/* ---------- Versprechen ---------- */
.vs-versprechen .kopfzeile { margin-bottom: clamp(24px, 3vw, 40px); }
.vs-versprechen__raster { display: grid; gap: 16px; }
@media (min-width: 1000px) { .vs-versprechen__raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; } }
.vs-garantie { position: relative; overflow: hidden; display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3.2vw, 40px); border-radius: var(--r-l); }
.vs-garantie h3 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.vs-garantie p { margin: 0; color: var(--auf-dunkel-2); font-size: 1.0625rem; max-width: 40ch; }
.vs-garantie .garantie__siegel { background: rgb(140 192 132 / .16); color: var(--hellgruen); }
.vs-garantie > :not(.vs-garantie__spirale) { position: relative; }
.vs-garantie__spirale { position: absolute; right: -70px; bottom: -90px; width: 280px; height: 280px; color: var(--wald-700); fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.vs-versprechen__liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vs-versprechen__liste li { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
.vs-versprechen__liste h3 { font-size: 1.15rem; margin-bottom: 4px; }
.vs-versprechen__liste p { margin: 0; font-size: .9375rem; }
.vs-versprechen__liste a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.vs-versprechen__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); }
.vs-versprechen__icon .icon--fill { color: var(--stern); }

/* ---------- Anfrage: Rahmen ---------- */
.vs-anfrage__raster { display: grid; gap: 22px; align-items: start; }
.vs-anfrage__raster > * { min-width: 0; }
.vs-anfrage__info { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-xl); }
@media (min-width: 1000px) {
  .vs-anfrage__raster { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 28px; }
  .vs-anfrage__info { position: sticky; top: calc(var(--kopf-h) + 24px); }
}
.vs-anfrage__info h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); }
.vs-anfrage__wege { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.vs-anfrage__wege li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.vs-anfrage__wege span { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid rgb(243 240 232 / .25); color: var(--hellgruen); font: 700 .875rem/1 var(--kopf); }
.vs-anfrage__schutz { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: var(--r-s); background: rgb(243 240 232 / .06); color: var(--auf-dunkel-2); font-size: .875rem; }
.vs-anfrage__schutz .icon { flex: none; margin-top: .1em; color: var(--hellgruen); }
.vs-anfrage__tel { margin: 18px 0 0; font-size: .9375rem; }
.vs-anfrage__tel a { display: inline-flex; align-items: center; min-height: 44px; font: 700 1.2rem/1 var(--kopf); }
/* ==========================================================================================
   Formulare (Anfrage und Kontakt): Schrittanzeige, Felder, Wahlkacheln, Fotos, Fehler, Bestätigung
   ========================================================================================== */
.anfrage { padding: clamp(20px, 3vw, 36px); border-radius: var(--r-xl); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.anfrage fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.anfrage legend { padding: 0; }
.anfrage__schritt { display: grid; gap: 18px; margin-top: 22px !important; }
.js .anfrage__schritt:not(.ist-aktiv) { display: none; }
.anfrage__schritt:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .js .anfrage__schritt.ist-aktiv { animation: steigen .45s var(--ease) both; } }
.anfrage__titel { margin-bottom: 12px; font: 700 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.2 var(--kopf); letter-spacing: -.01em; color: var(--tinte); }
.anfrage__pflicht { margin: 0; }
.anfrage__paket { margin: 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font-size: .9375rem; }
.anfrage__felder { display: grid; grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr); gap: 16px 12px; }
.anfrage__felder > * { min-width: 0; }
.anfrage .feld[hidden], .anfrage [data-wenn][hidden] { display: none; }
.anfrage .feld > label, .anfrage .feld > .label, .anfrage legend.label { font: 600 .875rem/1.3 var(--sans); color: var(--tinte); }
.anfrage legend.label { margin-bottom: 8px; }
textarea.eingabe { min-height: 92px; resize: vertical; line-height: 1.5; }
.anfrage { container-type: inline-size; }
/* Link im Satz: größere Tippfläche ohne Zeilensprung */
.anfrage__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--linie); }
.anfrage__knoepfe .btn--akzent { margin-left: auto; }
.anfrage__knoepfe .btn.ist-laedt { pointer-events: none; opacity: .8; }
.anfrage__knoepfe .btn.ist-laedt .icon { animation: senden 0.9s var(--ease) infinite; }
@keyframes senden { 50% { transform: translate(3px, -3px); opacity: .4; } }
@media (max-width: 479px) {
  .anfrage__knoepfe { flex-direction: column-reverse; }
  .anfrage__knoepfe .btn { width: 100%; margin-left: 0; }
}
/* Kaufleiste (Handy) tritt zurück, solange die Anfrage im Blick ist */
body.anfrage-im-blick .kaufleiste.ist-sichtbar { transform: translateY(110%); }
/* ==========================================================================================
   Abhollager
   ========================================================================================== */
.al-hof { aspect-ratio: 3 / 2; border-radius: var(--r-xl); box-shadow: var(--schatten-2); }
.al-hof__hinweis {
  position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border: 1px dashed rgb(243 240 232 / .55); border-radius: 999px; background: rgb(10 21 16 / .72); color: var(--auf-dunkel);
  font: 600 .8125rem/1.2 var(--sans); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.al-hof__hinweis .icon { width: 16px; height: 16px; color: var(--hellgruen); }
.seitenkopf--geteilt .seitenkopf__punkte { margin: 4px 0 0; }
.al-lager__raster { display: grid; gap: 18px; }
@media (min-width: 900px) { .al-lager__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.al-lagerkarte { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.al-lagerkarte__kopf { display: flex; align-items: center; gap: 14px; }
.al-lagerkarte h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); -webkit-hyphens: auto; hyphens: auto; }
.al-adresse { font: 600 1.0625rem/1.45 var(--sans); font-style: normal; color: var(--tinte); }
.al-zeiten { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.al-zeiten caption { caption-side: top; padding: 0 0 8px; text-align: left; color: var(--tannengruen); font: 600 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.al-zeiten th, .al-zeiten td { padding: 10px 12px; border-top: 1px solid var(--linie); text-align: left; vertical-align: top; color: var(--tinte); }
.al-zeiten th { width: 38%; font-weight: 600; white-space: nowrap; }
.al-zeiten tr.ist-zu th, .al-zeiten tr.ist-zu td { color: var(--tinte-2); font-weight: 400; }
.al-zeiten tr.ist-heute > * { background: var(--hellgruen-flaeche); }
.al-zeiten tr.ist-heute th { box-shadow: inset 3px 0 0 var(--rasengruen); }
.heute-marke { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--rasengruen); color: #fff; font: 600 .6875rem/1.4 var(--sans); letter-spacing: .04em; vertical-align: 1px; }
.al-lieferzeit { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--leinen); font-size: .9375rem; }
.al-lieferzeit .icon { flex: none; color: var(--tannengruen); }
.al-route { margin-top: auto; }
.al-abholung { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .al-abholung { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.al-abholung li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--r-m); font-size: .9375rem; }
.al-abholung .icon { flex: none; width: 22px; height: 22px; color: var(--tannengruen); }
.al-liefern__raster { display: grid; gap: 32px; align-items: center; }
.al-liefern__raster > * { min-width: 0; }
@media (min-width: 1000px) { .al-liefern__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.al-fakten { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.al-fakten li { display: flex; gap: 14px; align-items: flex-start; }
.al-fakten h3 { margin-bottom: 2px; font-size: 1.1rem; }
.al-fakten p { margin: 0; font-size: .9375rem; }
.al-fakten__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); }
.al-liefern__bild { aspect-ratio: 4 / 3; box-shadow: var(--schatten-2); }
.al-gebiet__raster { display: grid; gap: 32px; align-items: start; }
.al-gebiet__raster > * { min-width: 0; }
@media (min-width: 1000px) { .al-gebiet__raster { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; } }
@media (max-width: 479px) { .al-gebiet .plz { grid-template-columns: minmax(0, 1fr); } }
.al-gebiet__hinweis a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.map__depot.ist-naechstes .map__depot-ring { fill: var(--hellgruen-flaeche); stroke-width: 3; }
.map__depot.ist-naechstes text { fill: var(--tannengruen-dunkel); }
@media (prefers-reduced-motion: no-preference) {
  .map__depot.ist-naechstes .map__depot-ring { transform-box: fill-box; transform-origin: center; animation: lagerpuls 1.1s var(--ease) 2; }
}
@keyframes lagerpuls { 50% { transform: scale(1.5); } }
/* Handy: Kartenschrift lesbar (die Karte ist dort nur ca. 300 px breit) */
@media (max-width: 599px) {
  .al-gebiet .map__city text { font-size: 10px; }
  .al-gebiet .map__depot text { font-size: 10.5px; }
  .al-gebiet .map__radius, .al-gebiet .map__route-label text { font-size: 10px; }
  .al-gebiet .map__route-label rect { width: 84px; x: -42px; height: 22px; y: -13px; rx: 11px; }
}
/* ==========================================================================================
   Kontakt
   ========================================================================================== */
.ko-wege { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ko-weg {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 88px; padding: 18px 20px;
  border: 1px solid rgb(243 240 232 / .14); border-radius: var(--r-l); background: rgb(243 240 232 / .05); text-decoration: none;
  transition: background-color .2s, border-color .2s, transform .3s var(--ease);
}
.dunkel a.ko-weg, .dunkel a.ko-weg:hover { color: var(--auf-dunkel); }
.ko-weg:hover { background: rgb(243 240 232 / .1); border-color: rgb(243 240 232 / .3); transform: translateY(-2px); }
.ko-weg--haupt { border-color: transparent; background: var(--rasengruen); box-shadow: 0 14px 30px -14px rgb(46 125 50 / .55); }
.ko-weg--haupt:hover { border-color: transparent; background: var(--rasengruen-dunkel); }
.ko-weg__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(243 240 232 / .1); color: var(--hellgruen); }
.ko-weg--haupt .ko-weg__icon { background: rgb(255 255 255 / .16); color: #fff; }
.ko-weg__icon .icon { width: 24px; height: 24px; }
.ko-weg__text { display: grid; gap: 3px; min-width: 0; }
.ko-weg__text small { color: var(--auf-dunkel-2); font: 600 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ko-weg__text b { font: 700 clamp(1.15rem, .9rem + 1.3vw, 1.6rem)/1.15 var(--kopf); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ko-weg__text span { color: var(--auf-dunkel-2); font-size: .875rem; }
.ko-weg--haupt .ko-weg__text small, .ko-weg--haupt .ko-weg__text span { color: #fff; }
.ko-weg__pfeil { opacity: .6; transition: transform .25s var(--ease); }
.ko-weg:hover .ko-weg__pfeil { transform: translateX(3px); }
@media (max-width: 399px) {
  .ko-weg { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 18px; }
  .ko-weg__pfeil { display: none; }
  .ko-weg__icon { width: 44px; height: 44px; }
}
.ko-raster { display: grid; gap: 22px; align-items: start; }
.ko-raster > * { min-width: 0; }
@media (min-width: 1000px) {
  .ko-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; }
  .ko-seite { position: sticky; top: calc(var(--kopf-h) + 24px); }
}
.ko-form__titel { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.ko-form__text { margin: 8px 0 0; }
.ko-felder { margin-top: 22px; }
.ko-form .anfrage__knoepfe { margin-top: 22px; }
.ko-seite { display: grid; gap: 18px; }
.ko-verlegung { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 12px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); }
.ko-verlegung h2, .ko-lager h2 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem); }
.ko-verlegung p { margin: 0; color: var(--auf-dunkel-2); }
.ko-verlegung__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(140 192 132 / .16); color: var(--hellgruen); }
.ko-lager { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); }
.ko-lager__liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ko-lager__liste li { display: flex; gap: 14px; align-items: flex-start; }
.ko-lager__liste h3 { margin-bottom: 2px; font-size: 1.05rem; }
.ko-lager__liste p { margin: 0; font-size: .9375rem; }
.ko-themen__raster { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ko-themen__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ko-thema { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 20px; color: var(--tinte); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ko-thema:hover { color: var(--tinte); transform: translateY(-3px); box-shadow: var(--schatten-2); }
.ko-thema b { display: block; font: 700 1.1rem/1.25 var(--kopf); }
.ko-thema > span:not(.ko-thema__icon) > span { display: block; margin-top: 3px; color: var(--tinte-2); font-size: .875rem; }
.ko-thema__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hellgruen-flaeche); color: var(--tannengruen); }
.ko-thema__pfeil { color: var(--tannengruen); transition: transform .25s var(--ease); }
.ko-thema:hover .ko-thema__pfeil { transform: translateX(3px); }
/* ==========================================================================================
   Über uns
   ========================================================================================== */
.uu-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
@media (min-width: 900px) { .uu-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.uu-zahlen > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: clamp(16px, 2.4vw, 26px); border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--karte); }
.uu-zahlen dt { color: var(--tinte-2); font-size: .875rem; line-height: 1.4; }
.uu-zahlen dd { margin: 0; color: var(--tannengruen); font: 800 clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem)/1 var(--kopf); letter-spacing: -.02em; }
.uu-zahlen dd small { color: var(--tinte-2); font: 600 .9375rem/1 var(--sans); letter-spacing: 0; }
.uu-geschichte__raster { display: grid; gap: 36px; align-items: start; }
.uu-geschichte__raster > * { min-width: 0; }
@media (min-width: 1000px) { .uu-geschichte__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.uu-geschichte__untertitel { margin: 26px 0 12px; font-size: 1.15rem; }
.uu-zeitleiste { display: grid; margin: 0; padding: 0; list-style: none; }
.uu-zeitleiste li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding-bottom: 30px; }
.uu-zeitleiste li:last-child { padding-bottom: 0; }
.uu-zeitleiste li::before { content: ""; position: absolute; left: 37px; top: 44px; bottom: 0; width: 2px; background: var(--linie); }
.uu-zeitleiste li:last-child::before { display: none; }
.uu-zeitleiste__jahr { display: grid; place-items: center; width: 76px; height: 44px; border-radius: 999px; background: var(--nacht); color: var(--hellgruen); font: 700 1rem/1 var(--kopf); }
.uu-zeitleiste h3 { margin-bottom: 4px; padding-top: 10px; font-size: 1.2rem; }
.uu-zeitleiste p { margin: 0; }
.uu-weg__feld img { object-position: 50% 75%; }
.uu-ansprechpartner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 18px; padding: 20px 22px; }
.uu-ansprechpartner > div { flex: 1 1 220px; min-width: 0; }
.uu-ansprechpartner__initial { width: 56px; height: 56px; flex: none; font-size: 1.05rem; }
.uu-ansprechpartner__rolle { margin: 0 0 4px; color: var(--tannengruen); font: 600 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.uu-ansprechpartner h3 { font-size: 1.3rem; }
.uu-ansprechpartner p.leise { margin: 4px 0 0; overflow-wrap: anywhere; }
.uu-ansprechpartner a { display: inline-flex; align-items: center; min-height: 44px; }
/* Kopien aus startseite.css (Bewertungen), gleiche Namen und Werte */
.uu-stimmen__raster { display: grid; gap: 16px; }
@media (min-width: 700px) { .uu-stimmen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uu-stimmen__raster .stimmen__zahl { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .uu-stimmen__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .uu-stimmen__raster .stimmen__zahl { grid-column: auto; } }
.uu-garantie { margin-top: 18px; }
.uu-kontakt__raster { display: grid; gap: 28px; align-items: start; }
.uu-kontakt__raster > * { min-width: 0; }
@media (min-width: 1000px) { .uu-kontakt__raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.uu-kontakt__mehr { margin-top: 10px; }
.uu-kontakt__text .knoepfe + .mini { margin-top: 12px; }
/* ==========================================================================================
   Welle 2 (WordPress): Ergänzungen zum Entwurf
   ========================================================================================== */
/* Bestätigung nach dem Senden: Statuszeile (Gestalt wie die frühere Entwurfszeile in morgentau.css) */
.bestaetigung__status { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--nacht); color: var(--auf-dunkel); font-weight: 600; font-size: .9375rem; }
.bestaetigung__status .icon { flex: none; color: var(--hellgruen); }
.bestaetigung__status > span { min-width: 0; }
/* Formular nicht angebunden oder ohne JavaScript: Telefon und E-Mail statt Senden-Knopf (service.js, nichtAngebunden) */
.anfrage__offline { display: flex; flex: 1 1 100%; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: var(--r-s); background: var(--hellgruen-flaeche); color: var(--tannengruen-dunkel); font-size: .9375rem; line-height: 1.45; }
.anfrage__offline .icon { flex: none; margin-top: .15em; }
.anfrage__offline > span { min-width: 0; }
.anfrage__offline a { font-weight: 700; overflow-wrap: anywhere; }
.anfrage__form > .anfrage__offline { margin-top: 18px; }
/* Fotoauswahl: Hinweis, wenn Fotos über der Grenze des Formulars nicht übernommen wurden */
.hochladen__hinweis { color: var(--tannengruen-dunkel); font-weight: 500; }
/* Safari: Flex-Text darf schmaler werden als sein längstes Wort (sonst wird die Seite breiter) */
.vs-versprechen__liste li > div, .al-fakten li > div, .ko-lager__liste li > div, .al-lieferzeit > span, .al-abholung li > span,
.vs-pakete__fuss > span, .vs-anfrage__schutz > span, .service-seite .lager li > div { min-width: 0; }
/* „Zufriedenheitsgarantie“ bei 320 px: Die Rasterspalte darf schmaler werden als das Wort; getrennt wird an der weichen
   Trennstelle im HTML (Zufriedenheits-garantie) – nicht abgeschnitten (overflow: hidden) und nicht irgendwo */
.vs-garantie { grid-template-columns: minmax(0, 1fr); }
.vs-garantie h3, .uu-garantie h3 { -webkit-hyphens: manual; hyphens: manual; }
/* Safari vor Version 17 trennt nur mit Präfix: gemeinsame Bauteile aus morgentau.css auf diesen Seiten */
.service-seite .wahlkachel, .service-seite .vergleich__tabelle { -webkit-hyphens: auto; }
/* „Bewegung reduzieren“: ruhige Fassung (Überblenden, Deckkraft) statt Bewegung oder gar nichts – Skill apple-animationen */
@media (prefers-reduced-motion: reduce) {
  .js .anfrage__schritt.ist-aktiv { animation: einblenden .4s ease both; }
  .anfrage__knoepfe .btn.ist-laedt .icon { animation: senden-ruhig 1.2s ease-in-out infinite; }
  .bestaetigung:not([hidden]) .bestaetigung__icon { animation: einblenden .5s ease both; }
  .map__depot.ist-naechstes .map__depot-ring { animation: lagerblinken 1.1s ease 2; }
  .vs-paket:hover, .ko-weg:hover, .ko-thema:hover, .ko-weg:hover .ko-weg__pfeil, .ko-thema:hover .ko-thema__pfeil { transform: none; }
}
@keyframes senden-ruhig { 50% { opacity: .35; } }
@keyframes lagerblinken { 50% { opacity: .45; } }
/* Wächter für die Prüfwerkzeuge: steht am Dateiende und fehlt, wenn die Datei nur halb geladen wurde */
:root { --ende-service: 1; }