/* LIMI Gartenbau 2026 nach Codex-Entwurf (Auftrag 14). Werte aus _material/referenz/codex-entwurf/index.html,
   Herleitung in _docs/GESTALTUNG-codex.md. Wird allein geladen (ohne main.css). */

@font-face {
  font-family: "Eurostile Extended";
  src: url("/assets/fonts/eurostile-extended-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #f6f6f0;
  --flaeche: #ecefe3;
  --weiss: #fff;
  --text: #28352a;
  --text-leise: #586052;
  --text-fein: #626d5c;
  --gruen: #316e00;
  --gruen-tief: #245400;
  --gruen-hell: #6dce30;
  --punkt: #63af27;
  --linie: #d8ddcf;
  --linie-stark: #bbc5b1;
  --nacht: #1f2a1d;
  --fehler: #a32a1d;
  --titel: "Eurostile Extended", "Arial Black", Arial, sans-serif;
  --fliess: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rand: 64px;
  --abschnitt: 112px;
  --r-bild: 20px;
  --r-gross: 140px;
  --kopf-hoehe: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--fliess); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--titel); font-weight: 700; hyphens: none; overflow-wrap: normal; }
p { margin: 0; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }

.rahmen { max-width: 1440px; margin-inline: auto; padding-inline: var(--rand); }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--gruen); color: var(--weiss); padding: 12px 18px; border-radius: 30px; }
.sprung:focus { top: 12px; }

.kicker { display: flex; align-items: center; gap: 11px; font-family: var(--fliess); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); }
/* Auftrag 15: Blätter aus dem Logo (limi-blatt.svg, Originalpfade) statt Punkt. Je Abschnitt höchstens ein Blatt-Element. */
.kicker::before { content: ""; width: 16px; height: 16px; margin-top: -3px; background: url("/assets/img/logo/limi-blatt.svg") center / contain no-repeat; flex-shrink: 0; }

/* Knopf: Pille mit schrägem Pfeil */
.knopf { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; padding: 14px 22px 14px 24px; border: 0; border-radius: 40px; background: var(--gruen); color: var(--weiss); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s; }
.knopf:hover { background: var(--gruen-tief); transform: translateY(-2px); }
.knopf .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.knopf--hell { background: var(--weiss); color: var(--text); }
.knopf--hell:hover { background: var(--flaeche); }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; border-bottom: 1px solid #89977f; }
.textlink .icon { width: 16px; height: 16px; }
.textlink:hover { color: var(--gruen); border-color: var(--gruen); }
.kreis { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; flex-shrink: 0; transition: transform .25s, background .25s; }
.kreis .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.marke { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 20px; background: var(--gruen); color: var(--weiss); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; vertical-align: 2px; }

/* Kopf: klebt oben, gleitet beim Runterscrollen weg und beim Hochscrollen zurück (Auftrag 16, limi26.js). Nur transform. */
.kopf { position: sticky; top: 0; z-index: 40; background: var(--grund); transition: transform .32s cubic-bezier(.22, .61, .36, 1); }
.kopf.ist-weg { transform: translateY(-100%); }
/* Schatten des Kopfes (Auftrag 67): eigene Ebene, die nur per opacity einblendet. Ein animierter box-shadow am Kopf selbst wurde bei jedem Scrollschritt neu gerastert (bis 89 ms je Frame, Ruckeln). */
.kopf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: 0 10px 24px rgba(31, 42, 29, .06); opacity: 0; transition: opacity .32s; }
.kopf.ist-gescrollt::after { opacity: 1; }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--kopf-hoehe); padding-top: env(safe-area-inset-top, 0px); }
.kopf__logo img { width: 184px; height: auto; }
.nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 32px; }
.nav__liste { display: flex; gap: 6px; margin: 0 auto; padding: 0; list-style: none; }
.nav__punkt { position: relative; }
.nav__punkt > a, .nav__auf { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; background: none; font-size: 15px; font-weight: 600; cursor: pointer; }
.nav__auf .icon { width: 16px; height: 16px; transition: transform .2s; }
.nav__auf[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav__punkt > a:hover, .nav__auf:hover { color: var(--gruen); }
.nav__punkt--nur-mobil { display: none; }
/* Mega-Menü Leistungen (Auftrag 18): öffnet per Hover sofort, schließt mit 250 ms Verzögerung (limi26.js).
   Die Fläche hängt am Kopf, nicht am Menüpunkt; ::before ist die unsichtbare Brücke über den Spalt. */
.nav__punkt--mega { position: static; }
.nav__unter { position: absolute; left: 50%; top: calc(100% - 14px); z-index: 30; display: grid; grid-template-columns: 1fr 290px; gap: 28px; width: min(1080px, calc(100% - 2 * var(--rand))); padding: 18px 18px 18px 14px; background: var(--weiss); border-radius: 20px; box-shadow: 0 24px 48px rgba(31, 42, 29, .16); visibility: hidden; opacity: 0; transform: translate(-50%, 8px); transition: opacity .18s ease-out, transform .22s cubic-bezier(.22, .61, .36, 1), visibility 0s .22s; }
.nav__unter::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.nav__auf[aria-expanded="true"] + .nav__unter { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }
.mega__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: 0; padding: 0; list-style: none; }
.mega__liste a { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 8px 12px 8px 8px; border-radius: 14px; }
.mega__liste a:hover, .mega__liste a:focus-visible { background: var(--flaeche); }
.mega__liste a:hover .mega__titel { color: var(--gruen); }
.mega__bild { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.mega__bild--blatt { background: var(--gruen) url("/assets/img/logo/limi-blatt.svg") center / 30px no-repeat; }
.mega__text { display: grid; gap: 2px; min-width: 0; }
.mega__titel { font-size: 15px; font-weight: 700; line-height: 1.3; }
.mega__titel .marke { margin-left: 6px; }
.mega__satz { font-size: 13px; line-height: 1.4; color: var(--text-fein); }
.mega__kontakt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 26px 24px; border-radius: 16px 16px 16px 56px; background: var(--flaeche); }
.mega__kontakt-titel { font-family: var(--titel); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -.3px; }
.mega__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 700; }
.mega__tel .icon { width: 18px; height: 18px; color: var(--gruen); }
.mega__tel:hover { color: var(--gruen); }
.mega__kontakt .knopf { margin-top: 10px; align-self: stretch; white-space: nowrap; }
.nav__kontakt { display: flex; align-items: center; gap: 26px; }
.nav__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav__tel .icon { width: 18px; height: 18px; color: var(--gruen); }
.kopf__menue { display: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid #bec6b7; border-radius: 30px; background: transparent; font-weight: 600; cursor: pointer; }
.kopf__menue .icon { width: 18px; height: 18px; }
.kopf__menue-auf, .kopf__menue-zu { display: inline-flex; align-items: center; gap: 8px; }
.kopf__menue-zu, .kopf__menue[aria-expanded="true"] .kopf__menue-auf { display: none; }
.kopf__menue[aria-expanded="true"] .kopf__menue-zu { display: inline-flex; }

/* Einstieg */
.einstieg__raster { display: grid; grid-template-columns: 46% 54%; position: relative; }
.einstieg__text { padding: 64px 32px 72px 0; align-self: center; }
.einstieg h1 { display: grid; gap: 0; font-size: clamp(40px, 4.15vw, 60px); line-height: 1.14; letter-spacing: -1.6px; }
.einstieg h1 .kicker { margin-bottom: 30px; letter-spacing: 2px; line-height: 1.4; }
.einstieg__zeile { display: block; }
.einstieg h1 em { font-style: normal; color: var(--gruen); }
.einstieg__lead { max-width: 420px; margin-top: 28px; font-size: 18px; line-height: 1.65; color: var(--text-leise); }
.einstieg__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.einstieg__google { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; min-height: 44px; font-size: 14px; color: var(--text-fein); }
.einstieg__google strong { color: var(--text); }
.einstieg__google:hover strong { color: var(--gruen); }
/* Grüner Verlaufsschwung unter der Bewertungszeile (Auftrag 19): einziger Schwung der Seite */
.unterstrich { position: absolute; left: 4px; bottom: -6px; width: calc(100% + 8px); height: 16px; overflow: visible; pointer-events: none; }
.einstieg__bild { position: relative; margin: 0; min-height: 640px; border-radius: 24px 24px 24px var(--r-gross); overflow: hidden; background: #89977f; }
.einstieg__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% center; }
.einstieg__bild::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(17, 26, 15, .78)); }
/* Bildzeile (Auftrag 18): kurze Werbezeile in Eurostile auf einem Foto, höchstens eine je Abschnitt, nie eine Aussage über das Foto.
   Lesbar über den dunklen Verlauf am unteren Bildrand (::after der Bildfläche). */
.bildzeile { position: absolute; z-index: 1; left: 48px; right: 40px; bottom: 44px; max-width: 460px; font-family: var(--titel); font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; letter-spacing: -.4px; color: var(--weiss); text-shadow: 0 1px 12px rgba(10, 16, 9, .35); }
.einstieg__bild .bildzeile { left: auto; right: 44px; text-align: right; max-width: 380px; }

.brucke { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 32px 30px; font-size: 13px; color: var(--text-fein); }
.brucke::after { content: none; }
.brucke p:first-child { display: flex; align-items: center; gap: 10px; }
.brucke strong { color: var(--text); font-weight: 600; }
.brucke a { display: inline-flex; align-items: center; min-height: 40px; color: var(--gruen); font-weight: 600; }
.brucke__linie { width: 32px; height: 1px; background: #a4b095; }
.einstieg { border-bottom: 0; }
.einstieg .brucke { border-bottom: 1px solid var(--linie); }

/* Abschnitte */
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt__kopf { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 40px; }
.abschnitt__kopf h2, .betrieb h2, .gebiet h2, .kontakt h2 { margin-top: 18px; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.2; letter-spacing: -.8px; max-width: 680px; }
.abschnitt__kopf > p { max-width: 340px; font-size: 16px; line-height: 1.65; color: var(--text-fein); }

/* Leistungen: drei Bildkarten, Rest als Linkzeile */
.karten { display: grid; grid-template-columns: 1.38fr 1fr 1fr; gap: 22px; }
.karte-bild { position: relative; display: block; height: 380px; overflow: hidden; border-radius: var(--r-bild); background: #7a8970; color: var(--weiss); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.karte-bild::after { content: ""; position: absolute; inset: 20% 0 0; background: linear-gradient(transparent, rgba(17, 30, 17, .84)); }
.karte-bild__text { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 26px; display: block; }
.karte-bild__text small { display: block; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; opacity: .9; }
.karte-bild__titel { display: block; margin: 12px 56px 0 0; font-family: var(--titel); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -.3px; }
.karte-bild .kreis { position: absolute; right: 0; bottom: 0; }
.karte-bild:hover img { transform: scale(1.045); }
.karte-bild:hover .kreis { background: var(--gruen); border-color: var(--gruen); transform: translate(2px, -2px); }

/* Leistungsraster: alle 10 Leistungen als Bildkarte, zwei groß (Auftrag 16). Mobil ein wischbares Band. */
.leistungsraster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.leistungsraster__punkt { min-width: 0; }
.leistungsraster__punkt--gross { grid-column: span 2; }
.leistungsraster__punkt--breit { grid-column: span 2; }
.leistungsraster .karte-bild { height: 300px; }
.leistungsraster__punkt--gross .karte-bild { height: 420px; }
.leistungsraster .karte-bild__titel { margin-top: 0; padding-bottom: 0; font-size: 18px; }
.leistungsraster__punkt--gross .karte-bild__titel { font-size: 24px; }
.karte-bild__satz { display: block; margin: 8px 56px 0 0; font-size: 14px; line-height: 1.45; opacity: .92; }
.karte-bild > .marke { position: absolute; z-index: 1; left: 26px; top: 24px; margin: 0; padding: 5px 12px; background: var(--weiss); color: var(--gruen-tief); }
.karte-bild--flaeche { background: linear-gradient(140deg, var(--gruen-tief) 0%, var(--gruen) 55%, #4f9a1c 100%); }
.karte-bild--flaeche::after { content: none; }
.karte-bild__blatt { position: absolute; right: -24px; top: -20px; width: 170px !important; height: 170px !important; opacity: .22; filter: brightness(0) invert(1); transform: rotate(-14deg); }
.leistungsraster__hinweis { display: none; }

.weitere { display: flex; align-items: baseline; gap: 12px 28px; padding-top: 28px; }
.weitere__titel { font-size: 16px; font-weight: 700; white-space: nowrap; }
.weitere__liste { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; list-style: none; }
.weitere__liste a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: #4a5644; border-bottom: 1px solid var(--linie-stark); }
.weitere__liste a .icon { width: 14px; height: 14px; }
.weitere__liste a:hover { color: var(--gruen); border-color: var(--gruen); }
.weitere__satz { margin: 0; font-size: 16px; color: var(--text-leise); }
.weitere .marke { margin: 0 2px 0 4px; }

/* Projekte: ungleich gewichtete Bildflächen, Text unter dem Bild */
.projekte { background: var(--flaeche); }
.projekte__raster { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-areas:
  "g g g g g g g a a a a a"
  "g g g g g g g b b b b b"
  "c c c c d d d d d d d d"; gap: 40px 24px; }
.projekt { position: relative; margin: 0; }
.projekt img { width: 100%; object-fit: cover; border-radius: 16px; }
.projekt--gross { grid-area: g; }
.projekt--gross img { height: 640px; border-radius: 20px var(--r-gross) 20px 20px; }
.projekt--gross::after { content: ""; position: absolute; inset: 50% 0 0; border-radius: 0 0 20px 20px; background: linear-gradient(transparent, rgba(17, 26, 15, .78)); pointer-events: none; }
.projekt--a { grid-area: a; }
.projekt--b { grid-area: b; }
.projekt--c { grid-area: c; }
.projekt--c img { border-radius: 16px 16px 16px 72px; }
.projekt--d { grid-area: d; }
.projekt--a img, .projekt--b img, .projekt--c img, .projekt--d img { height: 100%; min-height: 240px; }
/* Auftrag 18: ohne Bildunterschriften. Feste Zeilenhöhen, damit das große Bild mit den beiden rechten bündig abschließt. */
@media (min-width: 1024px) {
  .projekte__raster { grid-template-rows: 308px 308px 440px; gap: 24px; }
  .projekt--gross img { height: 100%; }
}

/* Band (Auftrag 31/32): Foto in voller Breite, gerade Kanten, Text im Seitenraster links auf dunklem Verlauf (Schotter als ruhiger Textgrund).
   Foto gegenläufig ≤ 24 px (JS, transform), Spruch blendet einmal ein, reduced motion statisch. Nur `/`, vor dem Kontaktabschnitt. */
.fotoband { position: relative; display: flex; align-items: center; min-height: 520px; overflow: hidden; background: var(--nacht); color: var(--weiss); isolation: isolate; }
.fotoband__bild { position: absolute; inset: -24px 0; z-index: -2; will-change: transform; }
.fotoband__bild img, .fotoband__bild picture { display: block; width: 100%; height: 100%; }
.fotoband__bild img { object-fit: cover; object-position: 60% 50%; }
.fotoband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15, 26, 12, .9) 0%, rgba(15, 26, 12, .78) 34%, rgba(15, 26, 12, .3) 62%, rgba(15, 26, 12, 0) 80%); }
.fotoband__rahmen { width: 100%; }
.fotoband__inhalt { display: grid; justify-items: start; gap: 32px; max-width: 640px; padding-block: 72px; }
.fotoband__spruch { font-family: var(--titel); font-weight: 700; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; color: var(--weiss); }
.fotoband__spruch, .fotoband__inhalt .knopf { will-change: transform, opacity; }

/* Betrieb */
.betrieb__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.betrieb__bild { position: relative; }
.betrieb__bild img { width: 100%; height: 560px; object-fit: cover; border-radius: var(--r-gross) 20px 20px 20px; }
/* Kennzahl (Auftrag 18): Inhalt waagerecht und senkrecht mittig. Auf Bildern unten rechts überstehend. */
.kennzahl { display: grid; place-content: center; justify-items: center; gap: 6px; width: 230px; min-height: 150px; margin: 0; padding: 24px 22px; border-radius: 20px 20px 20px 64px; background: linear-gradient(135deg, rgba(36, 84, 0, .82) 0%, rgba(49, 110, 0, .74) 100%), var(--gruen-tief) url("/assets/img/fotos/blaetter-kachel-480.webp") center / cover; color: var(--weiss); text-align: center; }
.kennzahl strong { font-family: var(--titel); font-size: 44px; line-height: 1; }
.kennzahl span { font-size: 14px; line-height: 1.4; max-width: 170px; }
.betrieb__bild .kennzahl { position: absolute; right: -28px; bottom: -28px; }
/* Auftrag 20: Kennzahl mit Blättertextur, stark grün abgedunkelt (nur Startseite, „20+“). */
/* Auftrag 52: Blatt-Struktur gilt für jede Kennzahl-Kachel; --blatt bleibt als Alias ohne eigene Regel. */
.betrieb__text > p:not(.kicker) { margin-top: 20px; max-width: 520px; font-size: 17px; line-height: 1.7; color: var(--text-leise); }
.steckbrief { display: grid; gap: 0; margin: 34px 0 0; max-width: 520px; border-top: 1px solid var(--linie); }
.steckbrief div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.steckbrief dt { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-fein); padding-top: 3px; }
.steckbrief dd { margin: 0; }
.steckbrief a { display: inline-flex; align-items: center; min-height: 40px; margin-block: -10px; color: var(--gruen); font-weight: 600; }

/* Bewertung: dunkles Band mit Schwung */
.bewertung { padding-block: 0 var(--abschnitt); }
.bewertung__band { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 20px 40px; padding: 48px 56px; overflow: hidden; border-radius: 20px 20px var(--r-gross) 20px; background: var(--nacht); color: var(--weiss); }
.bewertung__wert { display: flex; align-items: baseline; gap: 14px; font-size: 64px; line-height: 1; letter-spacing: -1px; }
.bewertung__wert small { font-family: var(--fliess); font-size: 14px; font-weight: 400; letter-spacing: 0; max-width: 110px; line-height: 1.35; opacity: .85; }
.bewertung__text { max-width: 360px; font-size: 15px; line-height: 1.6; color: #d9dfd2; }
.bewertung .sterne { display: inline-flex; gap: 4px; }
.sterne svg { width: 22px; height: 22px; fill: #f2b631; }
.einstieg__google .sterne svg { width: 17px; height: 17px; }
.sterne svg.leer { fill: #c9cfc0; }
.einstieg__google .sterne { display: inline-flex; gap: 2px; }
.bewertung__band > * { position: relative; z-index: 1; }
.bewertung__band::before { content: ""; position: absolute; right: -36px; top: -44px; width: 240px; height: 240px; background: url("/assets/img/logo/limi-blatt.svg") center / contain no-repeat; opacity: .14; transform: rotate(-12deg); pointer-events: none; }

/* Einsatzgebiet */
.gebiet { padding-top: 0; }
.gebiet__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.gebiet__text > p:not(.kicker) { margin-top: 20px; max-width: 520px; color: var(--text-leise); }

.karte { margin: 0; }
.karte__feld { overflow: hidden; border-radius: 20px var(--r-gross) 20px 20px; background: var(--flaeche); }
.karte svg { display: block; width: 100%; height: auto; }
.karte__flaeche { fill: #dbe8cc; }
.karte__rhein { fill: none; stroke: #b9cfd8; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.karte__fluss { font-size: 11px; fill: #557885; letter-spacing: 2px; text-transform: uppercase; }
.karte__stadt { fill: var(--weiss); stroke: var(--gruen); stroke-width: 2.5; }
.karte__name { paint-order: stroke; stroke: var(--flaeche); stroke-width: 4px; stroke-linejoin: round; font-family: var(--fliess); font-size: 17px; font-weight: 600; fill: var(--text); }
.karte__name--gross { font-size: 17px; font-weight: 700; letter-spacing: 2px; fill: var(--gruen-tief); }
.karte__sitz-punkt { fill: var(--gruen); stroke: var(--weiss); stroke-width: 3; }
.karte__schild { fill: var(--weiss); stroke: var(--gruen); stroke-width: 1.5; }
.karte__sitz-text { font-family: var(--fliess); font-size: 17px; font-weight: 700; fill: var(--gruen-tief); }
.karte__namen--schmal { display: none; }
.karte figcaption { margin-top: 14px; max-width: 560px; font-size: 13px; line-height: 1.55; color: var(--text-fein); }

/* Kontakt */
.kontakt { padding-top: 0; }
.kontakt__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; padding: 72px; border-radius: var(--r-gross) 20px 20px 20px; background: var(--weiss); }
.kontakt__text > p:not(.kicker) { margin-top: 20px; max-width: 460px; color: var(--text-leise); }
.wege { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.wege a { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; font-size: 18px; font-weight: 600; }
.wege small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-fein); }
.wege .kreis { width: 52px; height: 52px; border-color: var(--linie-stark); color: var(--gruen); }
.wege .kreis--voll { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.wege a:hover .kreis { transform: scale(1.06); }
.kontakt__adresse { margin-top: 28px; font-style: normal; font-size: 14px; color: var(--text-fein); }
.kontakt__formular h3 { font-size: 20px; letter-spacing: -.3px; margin-bottom: 20px; }

.formular { display: grid; gap: 18px; }
.feld { display: grid; gap: 6px; }
.feld label { font-size: 14px; font-weight: 600; }
.feld__optional { font-weight: 400; color: var(--text-fein); }
.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"], .feld textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--linie-stark); border-radius: 14px; background: var(--grund); font-size: 16px; }
.feld textarea { resize: vertical; min-height: 96px; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(109, 206, 48, .35); }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.feld input[aria-invalid="true"]:focus, .feld textarea[aria-invalid="true"]:focus { border-color: var(--fehler); box-shadow: 0 0 0 3px rgba(163, 42, 29, .22); }
.feld--haken { grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.feld--haken input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gruen); }
.feld--haken label { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--text-leise); }
.feld--haken a { color: var(--gruen); text-decoration: underline; }
.feld--haken input[aria-invalid="true"] { outline: 2px solid var(--fehler); outline-offset: 2px; }
.feld--honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld__fehler { font-size: 14px; line-height: 1.4; color: var(--fehler); }
.feld__fehler:empty { display: none; }
.feld--haken .feld__fehler { grid-column: 1 / -1; }
.formular__turnstile:empty { display: none; }
.formular__hinweis { font-size: 14px; line-height: 1.5; color: var(--text-leise); }
.formular__hinweis a { color: var(--gruen); text-decoration: underline; }
.formular .knopf { justify-self: start; }
.formular .knopf:disabled { opacity: .7; cursor: wait; transform: none; }
.meldung { min-height: 1.5em; font-size: 15px; }
.meldung:empty { display: none; }
.meldung.ist-fehler { padding: 12px 16px; border-radius: 12px; background: #f8e9e6; color: var(--fehler); }
.meldung.ist-erfolg { padding: 12px 16px; border-radius: 12px; background: #e6f3dc; color: var(--gruen-tief); }
.meldung.ist-laden { color: var(--text-fein); }
.meldung a { font-weight: 700; white-space: nowrap; text-decoration: underline; }

/* Fuß (Auftrag 17): ohne Leistungen, Einsatzgebiet, Schwung und Trennstrich. Ein Logo-Blatt als Akzent. */
.fuss { position: relative; overflow: hidden; padding: 80px 0 20px; background: var(--nacht); color: #d9dfd2; font-size: 15px; }
.fuss::before { content: ""; position: absolute; right: -60px; bottom: -70px; width: 300px; height: 300px; background: url("/assets/img/logo/limi-blatt.svg") center / contain no-repeat; opacity: .08; transform: rotate(-12deg); pointer-events: none; }
.fuss > * { position: relative; }
.fuss a:hover { color: var(--gruen-hell); }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss__raster { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.fuss__logo { width: 240px; }
.fuss__claim { margin: 0 0 10px; font-family: var(--titel); font-size: 22px; line-height: 1.25; letter-spacing: -.3px; color: var(--weiss); }
.fuss__unten { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 56px; font-size: 13px; color: #aab3a3; }
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss__unten a { display: inline-flex; align-items: center; min-height: 40px; }
.mobilleiste { display: none; }

/* Bewegung: nur der Schwung blendet sich beim Laden einmal von links ein. Inhalte sind sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .unterstrich { transform-origin: left center; animation: schwung-ein .9s .45s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes schwung-ein { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Unterseiten (Auftrag U1): gleiche Bausteine wie die Startseite, nur Varianten */
.einstieg--unterseite .einstieg__bild { min-height: 560px; }
.einstieg--unterseite h1 { font-size: clamp(34px, 3vw, 44px); line-height: 1.12; hyphens: manual; overflow-wrap: normal; }
.einstieg--unterseite .einstieg__text > .kicker { margin-bottom: 26px; }
/* Ort als kleinere zweite Zeile in derselben H1 (Auftrag 18): normale Schrift, nicht hervorgehoben */
.h1-ort { display: block; margin-top: 12px; font-family: var(--fliess); font-size: .42em; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--text-leise); }
.abschnitt__kennzahl { display: flex; align-items: center; gap: 32px; }
.abschnitt__kennzahl .kennzahl { flex-shrink: 0; width: 200px; min-height: 128px; }
.abschnitt__kennzahl > p:not(.kennzahl) { max-width: 300px; font-size: 16px; line-height: 1.65; color: var(--text-fein); }
/* Rezensionen im Bewertungsband (Auftrag 18): nur echte Texte aus dem Places-Abruf, sonst nicht ausgegeben */
.bewertung__stimmen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 40px; margin: 16px 0 0; padding: 28px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .16); }
.bewertung__stimmen figure { margin: 0; }
.bewertung__stimmen blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: #e4e9de; }
.bewertung__stimmen figcaption { margin-top: 12px; font-size: 13px; color: #aab3a3; }
.einstieg--unterseite .einstieg__text { padding-block: 56px 64px; }
.einstieg__bild--flaeche { display: grid; place-items: center; background: linear-gradient(140deg, var(--gruen-tief) 0%, var(--gruen) 55%, #4f9a1c 100%); }
.einstieg__bild--flaeche::after { content: none; }
.einstieg__bild--flaeche img { position: static; width: 46%; height: auto; opacity: .3; filter: brightness(0) invert(1); }
.betrieb__raster--ohne-bild { grid-template-columns: 1fr; }
.betrieb__raster--ohne-bild .betrieb__text { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-content: start; }
.betrieb__raster--ohne-bild .betrieb__text > * { grid-column: 1; }
.betrieb__raster--ohne-bild .steckbrief { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; align-self: start; }
.betrieb--leistung .betrieb__raster { align-items: stretch; }
.betrieb--leistung .betrieb__bild img { height: 100%; min-height: 560px; }
.betrieb__text h2 + p { margin-top: 24px; }
.steckbrief dd { color: var(--text-leise); }
.betrieb__text--leistung .steckbrief div { grid-template-columns: 190px 1fr; }
.betrieb__text--leistung .steckbrief dt { hyphens: auto; overflow-wrap: anywhere; }
.abschnitt__titel { margin-top: 18px; font-family: var(--titel); font-weight: 700; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.2; letter-spacing: -.8px; }

.ablauf { padding-top: 0; }
.ablauf__liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ablauf__liste li { padding-top: 22px; border-top: 2px solid var(--gruen); }
.ablauf__nr { display: block; font-family: var(--titel); font-weight: 700; font-size: 15px; color: var(--gruen); }
.ablauf__liste h3 { margin-top: 14px; font-size: 18px; line-height: 1.3; letter-spacing: -.2px; }
.ablauf__liste p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-leise); }

/* Auftrag F1: Reihe hat kein festes Startseiten-Raster (Zeilen, Areas); doppelte Klasse schlägt die Media-Queries des Startrasters */
.projekte__raster.projekte__raster--reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-rows: none; grid-auto-rows: auto; grid-template-areas: none; gap: 22px; }
.projekte__raster--reihe .projekt { display: block; }
.projekte__raster--reihe .projekt img { display: block; height: 320px; }

.faq__raster { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
.faq h2 { margin-top: 18px; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.2; letter-spacing: -.8px; }
.faq__liste { border-top: 1px solid var(--linie-stark); }
.faq__eintrag { border-bottom: 1px solid var(--linie-stark); }
.faq__eintrag summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__eintrag summary h3 { font-family: var(--fliess); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.faq__eintrag summary:hover h3 { color: var(--gruen); }
.faq__zeichen { position: relative; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--linie-stark); border-radius: 50%; }
.faq__zeichen::before, .faq__zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: var(--gruen); transform: translate(-50%, -50%); transition: transform .2s; }
.faq__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__eintrag[open] .faq__zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__eintrag p { max-width: 640px; padding: 0 56px 22px 0; color: var(--text-leise); }

.verwandt { padding-top: 0; }
.leistungsraster--drei { grid-template-columns: repeat(3, 1fr); }

.leistungszeilen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; margin: 0; padding: 0; list-style: none; }
.leistungszeile { padding: 28px 0 30px; border-top: 1px solid var(--linie-stark); }
.leistungszeile h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.3px; }
.leistungszeile p { margin: 12px 0 10px; max-width: 520px; color: var(--text-leise); }
.gebiet--stadt { padding-top: var(--abschnitt); }
.gebiet--stadt .gebiet__text > p + p { margin-top: 14px; }
.gebiet--stadt .karte__name--an { fill: var(--gruen-tief); font-weight: 700; }

.seitenkopf { padding: 72px 0 56px; }
.seitenkopf h1 { hyphens: auto; overflow-wrap: break-word; margin-top: 22px; font-size: clamp(34px, 3.5vw, 52px); line-height: 1.15; letter-spacing: -1.2px; }
.seitenkopf__lead { margin-top: 22px; max-width: 620px; font-size: 18px; line-height: 1.65; color: var(--text-leise); }
.seitenkopf + .kontakt { padding-top: 56px; }
.seitenkopf--fehler { padding-bottom: 112px; }
.abschnitt--text { padding-top: 56px; }
.rechtstext { max-width: 760px; }
.rechtstext h2 { overflow-wrap: anywhere; hyphens: auto; margin: 40px 0 12px; font-size: 22px; line-height: 1.3; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin: 28px 0 8px; font-family: var(--fliess); font-size: 18px; }
.rechtstext p, .rechtstext ul, .rechtstext address { margin: 0 0 14px; font-style: normal; color: var(--text-leise); overflow-wrap: anywhere; }
.rechtstext a { color: var(--gruen); text-decoration: underline; }

/* Breiten */
@media (max-width: 1300px) {
  .leistungsraster { grid-template-columns: 1fr 1fr; }
  .leistungsraster__punkt--gross { grid-column: auto; }
  .leistungsraster__punkt--gross .karte-bild { height: 380px; }
  .leistungsraster--drei { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1600px) { .einstieg h1 { font-size: 60px; } }

@media (max-width: 1240px) {
  /* Mega-Menü bis 1240 px: Kontaktkachel als Zeile unter den Leistungen */
  .nav__unter { grid-template-columns: 1fr; gap: 12px; }
  .mega__kontakt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 16px 20px 16px 24px; border-radius: 14px; }
  .mega__kontakt .kicker { display: none; }
  .mega__kontakt-titel { font-size: 17px; margin-right: auto; }
  .mega__kontakt .knopf { margin-top: 0; align-self: auto; }
  .fuss__raster { gap: 40px; }
  .fuss__claim { font-size: 19px; }
  :root { --rand: 40px; --abschnitt: 96px; }
  .nav__tel { display: none; }
  .einstieg__bild { min-height: 600px; }
  .karte-bild__titel { font-size: 17px; margin-right: 0; padding-bottom: 52px; }
  .kontakt__raster { padding: 56px; gap: 56px; }
  .bewertung__band { grid-template-columns: auto 1fr auto; }
  .bewertung__text { grid-column: 1 / -1; grid-row: 2; max-width: 560px; }
}

@media (max-width: 1023px) {
  :root { --kopf-hoehe: 88px; }
  .kopf__logo img { width: 160px; }
  .kopf__menue { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 20px; padding: 12px var(--rand) 28px; background: var(--grund); box-shadow: 0 24px 30px rgba(31, 42, 29, .1); max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto; }
  .nav.ist-offen { display: flex; }
  .nav__liste { flex-direction: column; gap: 0; margin: 0; }
  .nav__punkt { border-bottom: 1px solid var(--linie); }
  .nav__punkt--nur-mobil { display: block; }
  .nav__punkt > a, .nav__auf { width: 100%; justify-content: space-between; min-height: 56px; padding: 0; font-size: 18px; }
  /* Unter 1024 px bleibt das Mega-Menü die bisherige aufklappbare Liste: ohne Bild, Satz und Kontaktkachel */
  .nav__unter { display: none; position: static; width: auto; padding: 0 0 12px; box-shadow: none; background: transparent; visibility: visible; opacity: 1; transform: none; transition: none; }
  .nav__unter::before, .mega__bild, .mega__satz, .mega__kontakt { display: none; }
  .nav__auf[aria-expanded="true"] + .nav__unter { display: block; transform: none; }
  .mega__liste { display: block; }
  .mega__liste a { min-height: 42px; padding: 0 0 0 14px; font-size: 16px; }
  .mega__titel { font-size: 16px; font-weight: 400; }
  .nav__kontakt { flex-direction: column; align-items: stretch; gap: 12px; }
  .nav__tel { display: inline-flex; justify-content: center; min-height: 52px; border: 1px solid var(--linie-stark); border-radius: 40px; }
  .nav__kontakt .knopf { justify-content: center; }

  .einstieg__text { padding: 40px 28px 56px 0; --tp: 28px; }
  .einstieg__bild { min-height: 560px; }
  .abschnitt__kopf { display: block; }
  .abschnitt__kopf > p { margin-top: 18px; max-width: 560px; }
  .abschnitt__kennzahl { margin-top: 18px; }
  .karten { grid-template-columns: 1fr 1fr; }
  .karte-bild:first-child { grid-column: 1 / -1; height: 400px; }
  .karte-bild { height: 300px; }
  .leistungsraster { grid-template-columns: 1fr 1fr; gap: 18px; }
  .leistungsraster__punkt--gross .karte-bild { height: 380px; }
  .leistungsraster .karte-bild { height: 280px; }
  .projekte__raster { grid-template-columns: 1fr 1fr; grid-template-areas: "g g" "a b" "c d"; }
  .projekt--gross img { height: 520px; }
  .projekt--c img, .projekt--d img { height: 360px; }
  .projekt--a img, .projekt--b img { height: 280px; }
  .betrieb__raster, .gebiet__raster, .kontakt__raster, .faq__raster { grid-template-columns: 1fr; gap: 56px; }
  .betrieb__raster--ohne-bild .betrieb__text { display: block; }
  .betrieb__raster--ohne-bild .steckbrief { margin-top: 34px; }
  .betrieb--leistung .betrieb__bild img { height: 480px; min-height: 0; }
  .ablauf__liste { grid-template-columns: 1fr 1fr; }
  .leistungsraster--drei { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .leistungsraster--drei .karte-bild__satz { display: none; }
  .leistungszeilen { grid-template-columns: 1fr; }
  .einstieg--unterseite .einstieg__bild { min-height: 480px; }
  .betrieb__bild { margin-right: 28px; }
  .betrieb__bild img { height: 480px; }
  .bewertung__band { grid-template-columns: auto 1fr; }
  .bewertung__band .knopf { grid-column: 1 / -1; justify-self: start; }
  .bewertung__text { grid-column: 1 / -1; }
  .fuss__claim { font-size: 20px; }
  .mobilleiste { display: grid; grid-template-columns: 1fr 1fr; position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--grund); border-top: 1px solid var(--linie-stark); }
  .mobilleiste a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 40px; border: 1px solid var(--linie-stark); font-weight: 600; font-size: 15px; }
  .mobilleiste a:first-child { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
  .mobilleiste .icon { width: 18px; height: 18px; }
  body { padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); }
  body.menue-offen .mobilleiste { display: none; }
}

@media (max-width: 899px) {
  .einstieg__raster { grid-template-columns: 1fr; }
  .einstieg__text { padding: 28px 0 40px; --tp: 0px; }
  .einstieg__lead { max-width: 560px; }
  .einstieg__google { margin-top: 28px; }
  .einstieg__bild { min-height: 0; height: 520px; }
}

@media (max-width: 700px) {
  :root { --rand: 24px; --abschnitt: 72px; --r-gross: 85px; --kopf-hoehe: 80px; }
  body { font-size: 16px; }
  .kopf__logo img { width: 146px; }
  .einstieg h1 { font-size: clamp(30px, 8.4vw, 46px); letter-spacing: -1px; }
  .einstieg h1 .kicker { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 22px; }
  .einstieg__lead { font-size: 16px; margin-top: 20px; }
  .einstieg__aktion { margin-top: 26px; }
  .einstieg__bild { height: 400px; border-radius: 18px 18px 18px var(--r-gross); }
  .brucke { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; padding-block: 28px 24px; }
  .abschnitt__kopf { margin-bottom: 28px; }
  .abschnitt__kopf h2, .betrieb h2, .gebiet h2, .kontakt h2 { font-size: clamp(24px, 7vw, 30px); margin-top: 14px; }
  .abschnitt__kopf > p { font-size: 15px; }
  .karten { grid-template-columns: 1fr; gap: 14px; }
  .karte-bild, .karte-bild:first-child { height: 290px; border-radius: 15px; grid-column: auto; }
  .karte-bild__text { left: 20px; right: 20px; bottom: 20px; }
  .karte-bild__titel { font-size: 20px; margin-right: 52px; padding-bottom: 0; }
  .leistungsraster { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); overscroll-behavior-x: contain; scrollbar-width: none; }
  .leistungsraster::-webkit-scrollbar { display: none; }
  .leistungsraster__punkt { scroll-snap-align: start; }
  .leistungsraster__punkt--gross { grid-column: auto; }
  .leistungsraster .karte-bild, .leistungsraster__punkt--gross .karte-bild { height: 340px; }
  .leistungsraster .karte-bild__titel, .leistungsraster__punkt--gross .karte-bild__titel { font-size: 19px; margin-right: 0; }
  .karte-bild__satz { margin-right: 52px; }
  .leistungsraster__hinweis { display: block; margin-top: 12px; font-size: 13px; color: var(--text-fein); }
  .weitere { flex-direction: column; align-items: flex-start; gap: 4px; }
  .projekte__raster { grid-template-columns: 1fr; grid-template-areas: "g" "a" "b" "c" "d"; gap: 14px; }
  .projekt--gross img { height: 380px; }
  .projekt--a img, .projekt--b img, .projekt--d img { height: 240px; }
  .projekt--c img { height: 420px; }
  .betrieb__raster { gap: 56px; }
  .betrieb__bild { margin-right: 0; }
  .betrieb__bild img, .betrieb--leistung .betrieb__bild img { height: 320px; }
  .kennzahl { width: 190px; min-height: 124px; padding: 18px 16px; border-radius: 16px 16px 16px 44px; }
  .kennzahl strong { font-size: 34px; }
  .kennzahl span { font-size: 13px; }
  .betrieb__bild .kennzahl { right: 12px; bottom: -32px; }
  .bildzeile { left: 24px; right: 24px; bottom: 26px; font-size: 21px; }
  .einstieg__bild .bildzeile { right: 24px; }
  .steckbrief div { grid-template-columns: 90px 1fr; }
  .betrieb__text--leistung .steckbrief div { grid-template-columns: 1fr; gap: 4px; }
  .bewertung__band { grid-template-columns: 1fr; gap: 16px; padding: 36px 28px 48px; }
  .bewertung__wert { font-size: 52px; }
  .bewertung__band .knopf { justify-self: stretch; }
  .ablauf__liste { grid-template-columns: 1fr; gap: 28px; }
  .leistungsraster--drei { grid-template-columns: none; }
  .projekte__raster.projekte__raster--reihe .projekt img { height: 260px; }
  .faq__raster { gap: 28px; }
  .faq__eintrag summary h3 { font-size: 16px; }
  .faq__eintrag p { padding-right: 0; }
  .leistungszeile h2 { font-size: 19px; }
  .seitenkopf { padding: 44px 0 36px; }
  .seitenkopf h1 { font-size: clamp(26px, 7.2vw, 34px); }
  .seitenkopf__lead { font-size: 16px; }
  .h1-ort { font-size: .5em; margin-top: 8px; }
  .abschnitt__kennzahl { flex-direction: column; align-items: flex-start; gap: 20px; }
  .einstieg--unterseite .einstieg__bild { height: 340px; min-height: 0; }
  .einstieg--unterseite .einstieg__text { padding-block: 28px 40px; }
  .rechtstext h2 { font-size: 19px; }
  .karte__name { font-size: 25px; }
  .karte__name--gross { font-size: 25px; letter-spacing: 1px; }
  .karte__sitz-text { font-size: 25px; }
  .karte__fluss { font-size: 16px; }
  .karte__namen--breit { display: none; }
  .karte__namen--schmal { display: inline; }
  .kontakt__raster { padding: 36px 22px; gap: 44px; border-radius: var(--r-gross) 18px 18px 18px; }
  .wege a { font-size: 16px; }
  .wege .kreis { width: 46px; height: 46px; }
  .formular .knopf { justify-self: stretch; }
  .fuss { padding-top: 56px; }
  .fuss::before { width: 200px; height: 200px; right: -50px; bottom: -40px; }
  .fuss__raster { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .fuss__logo { width: 190px; }
  .fuss__claim { font-size: 18px; }
  .fuss__unten { flex-direction: column; align-items: flex-start; margin-top: 36px; }
}

@media (max-width: 380px) {
  .einstieg__aktion .knopf { width: 100%; }
}

/* Hero V2/V3 (Auftrag 23, nur über ?hero=2 / ?hero=3): Vollbild-Einstieg. Kopf liegt transparent über dem Bild.
   Bewegung nur transform/opacity: Zoom 1.06 → 1 beim Laden, H1 zeilenweise, Parallax max. 40 px (limi26.js). reduced motion: statisch. */
.hero2 { position: relative; display: flex; align-items: flex-end; min-height: max(560px, 100vh); min-height: max(560px, 100svh); overflow: hidden; background: var(--nacht); color: var(--weiss); }
.hero2__bild { position: absolute; inset: -40px 0 0; will-change: transform; }
.hero2__bild picture, .hero2__bild img { display: block; width: 100%; height: 100%; }
.hero2__bild img { object-fit: cover; object-position: 50% 62%; transform-origin: 30% 80%; animation: hero2-zoom 2.2s cubic-bezier(.22, .61, .36, 1) both; }
/* Lesbarkeit: dunkelgrüner Verlauf von links und von unten, schmaler Streifen oben für den Kopf */
.hero2::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 30, 12, .74) 0%, rgba(15, 30, 12, .52) 38%, rgba(15, 30, 12, .08) 70%, transparent 100%),
              linear-gradient(0deg, rgba(15, 30, 12, .6) 0%, rgba(15, 30, 12, .2) 40%, transparent 62%),
              linear-gradient(180deg, rgba(15, 30, 12, .55) 0%, transparent 24%); }
.hero2__inhalt { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--kopf-hoehe) + 48px); padding-bottom: calc(clamp(64px, 8vw, 118px) + 28px); }
.hero2 h1 { display: grid; justify-items: start; gap: 0; font-size: clamp(38px, min(7vw, 15svh), 112px); line-height: 1.04; letter-spacing: -.035em; color: var(--weiss); }
.hero2 h1 .kicker { margin-bottom: clamp(18px, 3svh, 30px); font-size: 12px; letter-spacing: 2px; line-height: 1.4; color: var(--weiss); }
.hero2 h1 em { font-style: normal; color: var(--gruen-hell); }
.hero2__zeile { display: block; animation: hero2-zeile .9s cubic-bezier(.22, .61, .36, 1) both; }
.hero2 .kicker + .hero2__zeile { animation-delay: .25s; }
.hero2__zeile + .hero2__zeile { animation-delay: .45s; }
.hero2__lead { max-width: 520px; margin-top: clamp(16px, 2.6svh, 28px); font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .94); animation: hero2-zeile .9s cubic-bezier(.22, .61, .36, 1) .7s both; }
.hero2__aktion { margin-top: clamp(20px, 3.4svh, 32px); animation: hero2-zeile .9s cubic-bezier(.22, .61, .36, 1) .85s both; }
.hero2 .textlink { border-color: rgba(255, 255, 255, .7); color: var(--weiss); }
.hero2 .textlink:hover { color: var(--gruen-hell); border-color: var(--gruen-hell); }
.hero2 .einstieg__google { margin-top: clamp(20px, 4svh, 40px); color: rgba(255, 255, 255, .92); animation: hero2-zeile .9s cubic-bezier(.22, .61, .36, 1) 1s both; }
.hero2 .einstieg__google strong { color: var(--weiss); }
.hero2 .einstieg__google:hover strong { color: var(--gruen-hell); }
.hero2__kurve { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(64px, 8vw, 118px); fill: var(--grund); pointer-events: none; }
.hero2__folge .brucke { border-bottom: 1px solid var(--linie); }
.hero2__folge + .abschnitt { border-top: 0; }
@keyframes hero2-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes hero2-zeile { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Kopf über dem Bild (Auftrag 25): scroll-gekoppelt. --p läuft 0 → 1 über die ersten 120 px Scroll (limi26.js), bei offenem Menü 1.
   Die helle Logo-Pille (::before) wächst per clip-path von der Pille (--pl/--pr/--pt/--pb, gemessen am Logo) zur vollen Leiste,
   die Rundung läuft aus, der Schatten (::after) blendet ein, Menütexte laufen von Weiß zu Dunkelgrün. Logo bleibt an Ort und Stelle.
   Nur clip-path, opacity, Farben: kein Layout, CLS 0. Ohne JS: --p = 0, Leiste bleibt Pille (Seite nur mit ?hero). */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.hat-hero .kopf { --p: 0; --pl: 46px; --pr: 262px; --pt: 20px; --pb: 20px; --ra: 40px; position: fixed; left: 0; right: 0; background: none; box-shadow: none;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), --p .16s linear; }
.hat-hero .kopf.ist-gescrollt { box-shadow: none; }
.hat-hero .kopf::before, .hat-hero .kopf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hat-hero .kopf::before { background: var(--grund);
  clip-path: inset(calc((1 - var(--p)) * var(--pt)) calc((1 - var(--p)) * (100% - var(--pr))) calc((1 - var(--p)) * var(--pb)) calc((1 - var(--p)) * var(--pl)) round calc((1 - var(--p)) * var(--ra)) calc((1 - var(--p)) * var(--ra)) calc((1 - var(--p)) * var(--ra)) calc((1 - var(--p)) * 14px)); }
.hat-hero .kopf::after { z-index: -2; transition: none; box-shadow: 0 10px 24px rgba(31, 42, 29, .06); opacity: var(--p); }
.hat-hero .kopf .nav__punkt > a, .hat-hero .kopf .nav__auf, .hat-hero .kopf .nav__tel { color: color-mix(in srgb, var(--text) calc(var(--q, 0) * 100%), var(--weiss)); text-shadow: 0 1px 10px rgba(10, 20, 8, calc(.45 * (1 - var(--q, 0)))); }
.hat-hero .kopf .nav__tel .icon { color: color-mix(in srgb, var(--gruen) calc(var(--q, 0) * 100%), var(--gruen-hell)); }
.hat-hero .kopf .kopf__menue { background-color: var(--grund); color: var(--text); border-color: color-mix(in srgb, #bec6b7 calc(var(--q, 0) * 100%), transparent); }
@media (prefers-reduced-motion: reduce) { .hat-hero .kopf { transition: none; } }

@media (max-width: 1023px) {
  .hero2__inhalt { padding-bottom: calc(clamp(64px, 8vw, 118px) + 92px); }
}
@media (max-width: 700px) {
  .hero2::before { background: linear-gradient(0deg, rgba(15, 30, 12, .9) 0%, rgba(15, 30, 12, .76) 52%, rgba(15, 30, 12, .34) 76%, transparent 100%), linear-gradient(180deg, rgba(15, 30, 12, .55) 0%, transparent 24%); }
  .hero2__bild img { object-position: 50% 50%; }
  .hero2 h1 { font-size: clamp(34px, 10.4vw, 48px); letter-spacing: -.03em; }
  .hero2__lead { font-size: 16px; }
  .hero2__aktion { flex-direction: column; align-items: stretch; gap: 6px; }
  .hero2__aktion .knopf { width: 100%; }
  .hero2__aktion .textlink { align-self: flex-start; }
  .hero2__inhalt { padding-top: calc(var(--kopf-hoehe) + 28px); }
  .hero2 .einstieg__google { margin-top: 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2__bild img, .hero2__zeile, .hero2__lead, .hero2__aktion, .hero2 .einstieg__google { animation: none; }
  .hero2__bild { will-change: auto; }
}
/* Kopf zwischen 1024 und 1240 px: nichts umbrechen (Abnahme Auftrag 23) */
.nav__punkt > a, .nav__auf, .nav__kontakt .knopf { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1240px) {
  .kopf__innen { gap: 16px; }
  .nav { gap: 12px; }
  .nav__punkt > a, .nav__auf { padding: 0 8px; font-size: 14px; }
  .nav__kontakt .knopf { gap: 14px; padding: 12px 18px 12px 20px; font-size: 14px; }
  .kopf__logo img { width: 152px; }
}

/* Mobil-Feinschliff (Auftrag 28): Textsatz, Mindestgrößen, Touch-Ziele. Nur Handy, Desktop unverändert. */
@media (max-width: 1023px) {
  p, li, dd { text-wrap: pretty; }
  h1, h2, h3, .bildzeile, .fuss__claim { text-wrap: balance; }
  .einstieg__lead, .betrieb__text > p, .gebiet__text > p, .kontakt__text > p, .rechtstext p, .rechtstext li, .faq__eintrag p, .bewertung__text, dd { hyphens: auto; overflow-wrap: break-word; }
  .nowrap, .kennzahl strong, .brucke a, .wege a, .fuss address a { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .kicker, .einstieg h1 .kicker { font-size: 12px; letter-spacing: 1.6px; }
  .steckbrief dt, small, .kontakt__raster small { font-size: 12px; }
  .marke { font-size: 11px; }
  .brucke { font-size: 14px; }
  .leistungsraster__hinweis, .kennzahl span, .fuss__unten, .karte-bild__satz, figcaption, .karte__erklaerung { font-size: 14px; }
  .abschnitt__kopf > p, .bewertung__text, .faq__eintrag p { font-size: 16px; }
  .fuss { font-size: 16px; }
  .fuss__unten nav { gap: 0 8px; }
  .fuss__unten a { min-height: 44px; padding-inline: 8px; margin-inline: -8px; }
  .fuss__unten span { padding-block: 8px; }
  .feld--haken { align-items: flex-start; }
  .feld--haken input { width: 24px; height: 24px; margin: 10px 4px 10px 0; flex-shrink: 0; }
  .feld--haken label { font-size: 15px; padding-block: 10px; }
  .wege a, .kontakt__text a, .einstieg__google a { min-height: 44px; display: inline-flex; align-items: center; }
  .karte-bild__titel { margin-right: 64px; }
  .karte-bild__text { left: 24px; right: 24px; }
  .karte__fluss { font-size: 14px; }
}
@media (max-width: 1023px) {
  .karte figcaption, .bewertung__stimmen figcaption { font-size: 14px; }
  .wege small, .karte-bild__text small { font-size: 12px; }
  .marke { font-size: 12px; }
  .brucke { font-size: 14px; }
  .brucke a, .kontakt__raster dd a, .kontakt__raster li a, .nav__tel { min-height: 44px; }
  .brucke a, .kontakt__raster dd a { display: inline-flex; align-items: center; }
  .einstieg__google { font-size: 15px; }
  .karte-bild__text, .karte-bild__titel { overflow-wrap: anywhere; hyphens: auto; }
}
@media (max-width: 700px) {
  .einstieg--unterseite h1 { font-size: clamp(22px, 6.6vw, 34px); }
  .einstieg h1 { font-size: clamp(28px, 8vw, 46px); }
}
@media (max-width: 380px) {
  .wege a { font-size: 15px; overflow-wrap: anywhere; }
}
.nowrap { white-space: nowrap; }
@media (max-width: 1023px) {
  .ablauf__liste p { font-size: 16px; }
  .hero2 .einstieg__google, .hero2 .einstieg__google strong, .hero2 .einstieg__google span { font-size: 14px; }
  dd a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 700px) {
  .einstieg--unterseite h1 { font-size: clamp(21px, 6.2vw, 34px); hyphens: manual; }
}
@media (max-width: 1023px) { .steckbrief a { min-height: 44px; margin-block: -2px; } .formular__hinweis { font-size: 16px; } .formular__hinweis a { display: flex; align-items: center; min-height: 44px; } }
@media (max-width: 700px) { .einstieg--unterseite .h1-ort { font-size: 15px; margin-top: 10px; } }
@media (max-width: 1023px) { .einstieg__lead { hyphens: manual; } }

/* Mobil, Runde nach frischer Abnahme (Auftrag 28) */
@media (max-width: 1023px) {
  p, li, dd, .einstieg__lead, .betrieb__text > p, .gebiet__text > p, .kontakt__text > p, .faq__eintrag p, .bewertung__text { hyphens: manual; }
  .bewertung + .abschnitt { padding-top: 0; }
  .kicker, .kontakt__raster h3 { text-wrap: balance; }
  .kontakt__raster h3 { line-height: 1.2; }
  .steckbrief div { align-items: baseline; }
  .mobilleiste { padding-inline: 16px; }
  .brucke__punkt { white-space: pre; }
}
@media (max-width: 700px) {
  .brucke__linie { display: none; }
  .brucke p:last-child { display: block; }
  .brucke__punkt { display: none; }
  .brucke p:last-child a { display: flex; min-height: 44px; }
}
@media (max-width: 374px) {
  .knopf { gap: 12px; padding-inline: 20px 18px; }
  .bewertung__band .knopf span { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .fuss__unten { font-size: 15px; }
  .fuss__unten nav { gap: 0 12px; }
  .einstieg__aktion .textlink { font-size: 16px; }
  .brucke strong, .brucke p { hyphens: manual; }
}
@media (max-width: 380px) {
  .einstieg__google { flex-wrap: wrap; gap: 6px 12px; }
  .bewertung__wert small { max-width: none; }
  .kontakt__raster .kicker { letter-spacing: 1px; }
}

/* Hero V5/V6 (Auftrag 29, Freepik-Fotos): Verlauf von links und unten, Kopfstreifen oben. V5 Arbeiter mittig, Rasen links als Textgrund; V6 Pool oben, Erdfläche links unten. */
.hero2.hero2--rollrasen .hero2__bild img { object-position: 50% 30%; }
.hero2.hero2--rollrasen::before { background: linear-gradient(90deg, rgba(15, 30, 12, .84) 0%, rgba(15, 30, 12, .66) 38%, rgba(15, 30, 12, .14) 68%, transparent 84%), linear-gradient(0deg, rgba(15, 30, 12, .72) 0%, rgba(15, 30, 12, .26) 42%, transparent 64%), linear-gradient(180deg, rgba(15, 30, 12, .55) 0%, transparent 24%); }
@media (max-width: 700px) {
  .hero2.hero2--rollrasen .hero2__bild img { object-position: 50% 10%; }
}
@media (max-width: 1023px) {
  .hero2.hero2--rollrasen::before { background: linear-gradient(0deg, rgba(15, 30, 12, .92) 0%, rgba(15, 30, 12, .84) 56%, rgba(15, 30, 12, .56) 76%, rgba(15, 30, 12, .1) 94%), linear-gradient(180deg, rgba(15, 30, 12, .55) 0%, transparent 22%); }
}

/* Band schmal und mobil: Tablet 440 px, Handy 420 px mit Text unten (Verlauf von unten), Knopf ≥ 52 px */
@media (max-width: 1023px) {
  .fotoband { min-height: 440px; }
  .fotoband__inhalt { padding-block: 56px; }
}
@media (max-width: 700px) {
  .fotoband { align-items: flex-end; min-height: 420px; }
  .fotoband__bild img { object-position: 50% 20%; }
  .fotoband::before { background: linear-gradient(0deg, rgba(15, 26, 12, .94) 0%, rgba(15, 26, 12, .86) 42%, rgba(15, 26, 12, .35) 68%, rgba(15, 26, 12, 0) 86%); }
  .fotoband__inhalt { max-width: none; padding-block: 40px 24px; gap: 24px; }
  .fotoband__spruch { font-size: clamp(26px, 8vw, 34px); }
  .fotoband__inhalt .knopf { width: 100%; min-height: 52px; justify-content: space-between; }
}

/* Auftrag 33: Luft zwischen Foto-Band und Kontaktabschnitt (Desktop 96, Tablet 80, Handy 60) */
.fotoband + .kontakt { padding-top: 96px; }
@media (max-width: 1023px) { .fotoband + .kontakt { padding-top: 80px; } }
@media (max-width: 700px) { .fotoband + .kontakt { padding-top: 60px; } }


/* Auftrag 33: Einsatzgebiet als Text, Städtenamen als Textlinks im Fließtext (Treffer 44 px hoch) */
.gebiet__orte { line-height: 1.7; }
.gebiet__ort { white-space: nowrap; }
.gebiet__orte a { display: inline-block; padding: 12px 3px; margin: -6px -3px; line-height: 1.25; color: var(--gruen); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gebiet__orte a:hover { color: var(--gruen-tief); }
.gebiet__text .textlink { margin-top: 20px; }

/* Lkw im Hero (Auftrag 49): Freisteller mit Kontaktschatten, fährt einmal von rechts ein. Platz über width/height reserviert, Bild niedrig priorisiert. */
.knopf--klein { min-height: 44px; gap: 14px; padding: 10px 14px 10px 18px; font-size: 14px; }
.knopf--klein .icon { width: 18px; height: 18px; }
.lkwfahrt { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; pointer-events: none; }
.lkwfahrt .knopf { pointer-events: auto; }
/* Etikett am Lkw (Auftrag 66, ersetzt die Lage aus Auftrag 64/65): Es steht neben dem Fahrzeug im freien Hintergrund, nämlich über der Containermulde, ohne ein Pixel des Lkw zu decken.
   Knopf 44 px hoch (zugleich die Trefferfläche), 15 px Schrift, weißer Grund; dünner Zeiger (Strich mit kleinem Punkt) taucht nur kurz in die Fahrzeugfläche ein.
   Es fährt als Kind des Fahrzeugs mit und blendet erst ein (250 ms), wenn der Lkw steht (Klasse .lkwfahrt--steht, gesetzt von limi26.js; ohne JS oder bei reduced motion sofort sichtbar). */
.lkwfahrt__etikett { position: absolute; z-index: 2; left: 70%; bottom: calc(100% + 8px); display: block; transform: translateX(var(--ex, -50%)); pointer-events: none; }
.lkwfahrt__etikett .knopf { position: relative; min-height: 44px; gap: 12px; padding: 9px 14px 9px 18px; font-size: 15px; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s; }
.lkwfahrt__etikett .knopf:hover, .lkwfahrt__etikett .knopf:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10, 20, 8, .3); }
.lkwfahrt__etikett .knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lkwfahrt__zeiger { position: absolute; left: 50%; top: calc(100% - 1px); width: 2px; height: 22px; margin-left: -1px; border-radius: 1px; background: #fff; }
.lkwfahrt__zeiger::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.lkwfahrt--puls.lkwfahrt--steht .lkwfahrt__zeiger::after { animation: lkw-puls 1.1s ease-out .3s 2 both; }
@keyframes lkw-puls { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
.lkwfahrt--bewegt .lkwfahrt__etikett { opacity: 0; visibility: hidden; transform: translate(var(--ex, -50%), 6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.lkwfahrt--bewegt.lkwfahrt--steht .lkwfahrt__etikett { opacity: 1; visibility: visible; transform: translateX(var(--ex, -50%)); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
/* Ab 1024 px steht das Etikett links vor der Front (Auftrag 66), in Höhe von Fahrerhaus und Kühlergrill; der Zeiger zeigt waagerecht auf die Fahrzeugkante.
   Darunter (Handy, Tablet hochkant) fehlt links der Platz, dort steht es über der Containermulde. */
@media (min-width: 1024px) {
  .lkwfahrt__etikett { --ex: 0px; left: auto; right: calc(100% + 12px); bottom: auto; top: calc(36% - 22px); }
  .lkwfahrt__zeiger { left: calc(100% - 1px); top: 50%; width: 28px; height: 2px; margin: -1px 0 0; }
  .lkwfahrt__zeiger::after { left: auto; right: -5px; bottom: auto; top: 50%; margin: -5px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .lkwfahrt__etikett .knopf { transition: none; } .lkwfahrt--puls.lkwfahrt--steht .lkwfahrt__zeiger::after { animation: none; } }
.lkwfahrt__fahrzeug { position: relative; width: 100%; --dx: min(110vw, 1700px); --dy: 0px; }
.lkwfahrt__lkw { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1000 / 749; }
/* Schattenebene (Auftrag 53): SVG im Koordinatensystem des Lkw-Bildes (1536 x 1024), Lkw-Rahmen (198, 52) bis (1429, 974); läuft als Kind des Fahrzeugs mit */
.lkwfahrt__schatten { opacity: 0; position: absolute; left: -16.08%; top: -5.64%; width: 124.78%; height: 111.06%; max-width: none; pointer-events: none; }
.lkwfahrt--gezeichnet .lkwfahrt__schatten { opacity: 1; }
.lkwfahrt--vor .lkwfahrt__fahrzeug { transform: translate3d(var(--dx), var(--dy), 0); }
/* Lkw steht vollständig über der Bodenrundung (Boden der Kurve = clamp(64px, 8vw, 118px)), Breite aus Höhe und Breite des Fensters, Platz für das Etikett oben */
.hero2--lkw { --lkw-b: clamp(260px, min(27vw, 33svh), 460px); }
.hero2__lkw { position: absolute; z-index: 3; right: calc(max(0px, (100vw - 1440px) / 2) + var(--rand)); bottom: calc(clamp(64px, 8vw, 118px) + 14px); width: var(--lkw-b); }
@media (max-width: 1023px) {
  .hero2--lkw { --lkw-b: clamp(240px, min(32vw, 34svh), 380px); }
}
@media (max-width: 700px) {
  .hero2--lkw { --lkw-b: min(72vw, 300px); }
  .hero2__lkw { left: auto; right: 16px; bottom: 84px; }
  .hero2--lkw .hero2__inhalt { padding-bottom: calc(84px + var(--lkw-b) * .749 + 112px); }
  .lkwfahrt__etikett { left: 64%; }
}

/* Containerdienst-Einstieg (Auftrag 63): Szenenbild des Grafik-Bots (3:2) füllt den Bildrahmen des normalen Einstiegs, der Lkw steht im Bild (rechts, 55 bis 94 % der Breite).
   object-position rechts, damit er bei jedem Rahmenformat vollständig bleibt. Feste Höhe, sonst liefert Grid-Stretch keine Höhe. */
.einstieg--unterseite .einstieg__bild--szene { height: 560px; min-height: 0; background: #8a6f5a; }
.einstieg__bild--szene::after { content: none; }
/* Auftrag 67: festes Bild ohne Bewegung. Cover, object-position rechts/unten-mitte, der Lkw bleibt bei jedem Rahmenformat vollständig. */
.einstieg__bild--szene img { width: 100%; height: 100%; object-fit: cover; object-position: 92% 60%; }
@media (max-width: 899px) {
  .einstieg--unterseite .einstieg__bild--szene { height: 520px; }
}
@media (max-width: 700px) {
  .einstieg--unterseite .einstieg__bild--szene { height: 340px; }
}
@media (max-width: 700px) {
  .hero2.hero2--rollrasen.hero2--lkw::before { background: linear-gradient(0deg, rgba(15, 30, 12, .92) 0%, rgba(15, 30, 12, .84) 56%, rgba(15, 30, 12, .56) 76%, rgba(15, 30, 12, .1) 94%), linear-gradient(180deg, rgba(15, 30, 12, .72) 0%, rgba(15, 30, 12, .5) 26%, transparent 46%); }
}

/* Auftrag 55: Leistungsblöcke der Stadtseiten (Baustein Bild + Text, gespiegelt) und Stadtteilliste */
.betrieb--stadtblock { padding-top: 0; }
.betrieb--stadtblock .betrieb__bild { margin: 0; }
.betrieb--stadtblock .betrieb__bild figcaption { margin-top: 10px; font-size: 14px; color: var(--text-fein); }
.betrieb--stadtblock .betrieb__raster { align-items: center; }
.betrieb--stadtblock .betrieb__bild img { height: 420px; }
.betrieb--spiegel .betrieb__bild { order: 2; }
.stadtteile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 18px 0 0; padding: 0; list-style: none; }
.stadtteile li { padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 17px; }
@media (max-width: 1023px) { .betrieb--spiegel .betrieb__bild { order: 0; } .betrieb--stadtblock .betrieb__bild img { height: 360px; } }
@media (max-width: 700px) { .betrieb--stadtblock .betrieb__bild img { height: 260px; } .stadtteile { gap: 0 20px; } .stadtteile li { font-size: 16px; overflow-wrap: anywhere; hyphens: auto; } }

/* Auftrag 56: Containerdienst-Streifen auf Leistungsseiten (Lkw-Kreis, ein Satz, kleiner Knopf) */
.containerstreifen { padding: 0 0 clamp(40px, 5vw, 72px); }
.containerstreifen__raster { display: flex; align-items: center; gap: 22px; padding: 18px 24px; border: 1px solid var(--linie); border-radius: var(--r-gross) 20px 20px 20px; background: var(--flaeche, transparent); }
.containerstreifen__kreis { flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; }
.containerstreifen__kreis img { width: 100%; height: 100%; object-fit: cover; }
.containerstreifen p { margin: 0; flex: 1; font-size: 17px; }
.containerstreifen .knopf { flex: none; }
@media (max-width: 700px) {
  .containerstreifen__raster { flex-wrap: wrap; padding: 18px; gap: 14px 16px; }
  .containerstreifen p { flex-basis: calc(100% - 90px); }
  .containerstreifen .knopf { margin-left: 84px; }
}

/* Überschrift im Einstieg richtet sich nach der Spaltenbreite, nicht nach dem Fenster (Auftrag 58):
   das längste Wort (Natursteinarbeiten, Landschaftsbau) passt immer in die Textspalte und läuft nie unter das Bild. */
.einstieg__text { container-type: inline-size; min-width: 0; }
/* Auftrag 59: H1 nie kleiner als die größte H2 der Seite (--h2-gr); passt das längste Wort nicht, bricht es mobil per &shy; um statt zu schrumpfen */
:root { --h2-gr: clamp(28px, 2.9vw, 42px); }
@media (max-width: 700px) { :root { --h2-gr: clamp(28px, 7vw, 30px); } }
.einstieg h1 { font-size: clamp(18px, 6.4cqi, 60px); }
.einstieg--unterseite h1 { font-size: max(var(--h2-gr), min(calc((100cqi - var(--tp, 32px)) / (var(--wl, 18) * .72)), 44px)); }
.einstieg--unterseite .h1-ort { font-size: clamp(15px, 1.3vw, 18px); }
.einstieg h1 .wort { white-space: nowrap; }
@media (max-width: 440px) { .einstieg h1 .wort { white-space: normal; } }

/* Kartentitel richten sich nach der Kartenbreite (Auftrag 58): kein Wort wird getrennt oder läuft aus der Karte */
.karte-bild { container-type: inline-size; }
.leistungsraster .karte-bild__titel, .karte-bild__titel { font-size: clamp(12px, 6.4cqi, 20px); overflow-wrap: normal; hyphens: manual; }
.leistungsraster__punkt--gross .karte-bild__titel { font-size: clamp(14px, 6.4cqi, 24px); }
.karte-bild__text { overflow-wrap: normal; hyphens: manual; }
.karte-bild__text { right: 16px; }
.leistungsraster--drei .karte-bild__titel, .leistungsraster .karte-bild__titel { margin-right: 0; }
/* Containerdienst-Block (Auftrag 63): Szene 16:10 im Format 4:3, Lkw (59 bis 91 % der Breite) bleibt durch object-position rechts vollständig */
.betrieb--stadtblock .betrieb__bild--szene img { height: auto; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: 90% 50%; }
/* Karte Containerdienst (Auftrag 63): Szene 16:10 in hoher Karte, Lkw rechts halten */
.karte-bild img.karte-bild__szene { object-position: 88% 50%; }
.leistungsraster--drei .karte-bild__text { left: 16px; right: 12px; }
/* Telefon-Textlink im Einstieg: Trefferfläche mindestens 44 px (Auftrag 58) */
.einstieg__aktion .textlink { display: inline-flex; align-items: center; min-height: 44px; }