/* Gartenbau Erdmann, Entwurf im Stil von fieldoperations.net (Torben, 26.09.2026:
   "sehr nah an der Field Operations Seite, auch an der Schrift").
   Schrift: TeX Gyre Heros, freie Helvetica-Nachbildung (Field Operations nutzt
   die Kaufschrift Helvetica Now). Farben wie das Vorbild: Weiss, fast Schwarz,
   Grau. Raster: 16 Spalten am Rechner, 6 am Handy, 16 px Abstand.
   Wird NACH farbverlaeufe.css geladen. Von Hand gepflegt. */
html,body{height:auto !important;min-height:100%;overflow-y:auto !important;
  overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}

@font-face{font-family:"Heros";src:url("/mx/jardineria-cervera/schriften/heros-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Heros";src:url("/mx/jardineria-cervera/schriften/heros-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --tinte:#0d0d0d; --weiss:#fff; --grau:#6b6b6b; --grau-hell:#cfcfcf; --flaeche:#f5f5f5;
  --weiss-60:rgba(255,255,255,.6);
  /* Farbwelt Gartenbau Erdmann (28.09.2026): Blattgruen, junges Laub, Seeblau, Erdton.
     Ruhig und heimisch, passt zum Bodensee. Chroma bleibt unter 0.22. */
  --gruen:#33613d; --gruen-hell:#7aa356; --blau:#4a7b94; --erde:#a8825a;
  --akzent:#33613d;
  --rand:12px; --luecke:12px; --spalten:6;
  --kopf-hoehe:56px;
  --dur-takt:.9s;
  --ease-feder:cubic-bezier(.34,1.56,.64,1);
  /* Schriftgroessen wie das Vorbild (f-display-01, f-heading-01, f-body-01) */
  --display:2.25rem; --display-2:1.875rem; --titel:1.125rem; --text:1rem; --klein:.875rem;
}
@media (min-width:640px){:root{--rand:16px;--luecke:16px;--spalten:16;--display:3.5rem;--display-2:2.875rem;--titel:1.5rem;--text:1.125rem}}
@media (min-width:1024px){:root{--display:4.25rem;--display-2:3.5rem;--titel:1.75rem}}
@media (min-width:1440px){:root{--display:5.25rem;--display-2:4.25rem;--titel:2rem;--text:1.25rem}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--kopf-hoehe)}
body{margin:0;background:var(--weiss);color:var(--tinte);
  font-family:"Heros","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:var(--text);
  line-height:1.3;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  hyphens:manual;overflow-wrap:normal;word-break:keep-all;font-variant-numeric:tabular-nums}
h1,h2,h3,p{margin:0;font-weight:400}
h1,h2,h3,p,li,a,span,label{hyphens:manual;overflow-wrap:normal;word-break:keep-all}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
.zusammen{display:inline-block;text-decoration:inherit}
.nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-9999px}.sprung:focus{left:var(--rand);top:8px;z-index:50;background:#fff;padding:8px}

/* Raster: 16 Spalten wie das Vorbild */
.raster{display:grid;grid-template-columns:repeat(var(--spalten),minmax(0,1fr));column-gap:var(--luecke);padding:0 var(--rand)}
.display{font-size:var(--display);line-height:1.05;letter-spacing:-.02em;font-weight:700}
.display-2{font-size:var(--display-2);line-height:1.05;letter-spacing:-.02em;font-weight:700}
.titel{font-size:var(--titel);line-height:1.12;letter-spacing:-.015em;font-weight:700}
.klein{font-size:var(--klein);line-height:1.3}
.grau{color:var(--grau)}
.label{font-size:var(--klein);line-height:1.3;font-weight:700}
.pfeil-link{display:inline-flex;align-items:center;gap:8px;font-size:var(--klein);font-weight:700}
.pfeil-link svg{flex:none}
.unterstrichen{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}

/* ---------- Wow-Kopf (aus docs/wow/kopf/index.html, Torben 26.09.2026) ----------
   Film ueber die ganze Breite. Ein Fluss (Torben, 26.09.2026): der Uebergang beginnt,
   waehrend der Film noch im weissen Nebel ist. Aus dem Weiss entstehen gleichzeitig das
   Standbild rechts, der weisse Verlauf links und darauf Logo, Satz, Text, Knoepfe. Kein Kasten. */
@font-face{font-family:"Manrope Logo";src:url("/mx/jardineria-cervera/schriften/manrope-logo.woff2") format("woff2");font-weight:200 800;font-display:swap}
.wow{--dur-takt:.3s;--gruen:#7aa356;--blau:#4a7b94;--gruen-dunkel:#33613d;
  position:relative;width:100%;min-height:calc(100svh - var(--leiste,0px));overflow:hidden;background:#fff;color:#1d2a22}
.wow-stand,.wow-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.wow-film{opacity:1;transition:opacity calc(var(--dur-takt)*2) var(--ease-in-out)}
.wow.hell .wow-film{opacity:0}
.wow-buehne{position:absolute;inset:0}
.wow-deck{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;transition:opacity var(--dur-2) var(--ease-in-out)}
.wow-buehne.laeuft .wow-deck{opacity:0}
.wow.hell .wow-buehne{opacity:0;pointer-events:none;transition:opacity calc(var(--dur-takt)*2) var(--ease-in-out)}
.wow-verlauf{position:absolute;inset:0;pointer-events:none;opacity:0;background-color:transparent;
  background-image:linear-gradient(90deg in oklab,#f4f8f0 0%,#f7faf4 30%,rgba(250,252,248,.82) 44%,rgba(255,255,255,0) 62%);
  transition:opacity calc(var(--dur-takt)*1.5) var(--ease-out)}
.wow.hell .wow-verlauf{opacity:1}
/* Nasser Schluss (Torben, 29./30.09.2026): Die Regner spruehen die Scheibe in drei Durchgaengen
   nass, am Filmende liegt links dichter Nebel. Das letzte Filmbild bleibt stehen. Die Seite legt
   nur noch einen leichten Schleier unter die Textspalte (52 %, wandert mit der Spalte mit, damit
   es auch auf sehr breiten Bildschirmen passt). Gemessen hinter jeder Textzeile, 1280 bis 2560 px:
   mindestens 4,6:1. Ohne Schleier fiel die Ueberschrift bis auf 2,2:1, wo Zeilen weit nach rechts
   laufen. Nur im breiten Querformat; sonst wie bisher Standbild mit Verlauf. */
@media (min-width:901px) and (min-aspect-ratio:3/2){
  .wow.nass.hell .wow-film,.wow.nass.hell .wow-buehne{opacity:1}
  .wow.nass .wow-verlauf{--tl:max(var(--rand),calc((100% - 1320px)/2 + 40px));
    background-image:linear-gradient(90deg in oklab,rgb(247 250 244/.52) 0,rgb(247 250 244/.52) calc(var(--tl) + 500px),rgb(255 255 255/0) calc(var(--tl) + 780px));
    transition:opacity calc(var(--dur-takt)*8) var(--ease-in-out)}
}
/* Handy-Endbild (Torben, 28.09.2026: "Endbild zeigt keinen Garten mehr, sondern nur See"):
   Am Ende liegt der Text auf der unteren Hälfte, genau dort, wo Garten und Haus sind.
   Deshalb gleitet das Standbild nach dem Film ruhig nach oben, bis der Garten über dem
   Text steht. Erst wenn der Film ausgeblendet ist, sonst stehen zwei Bilder übereinander. */
@media (max-aspect-ratio:4/5){
  .wow .wow-stand{transition:transform calc(var(--dur-takt)*6) var(--ease-in-out) calc(var(--dur-takt)*2)}
  .wow.hell .wow-stand{transform:translateY(-7%)}
}
@media (max-aspect-ratio:4/5) and (prefers-reduced-motion:reduce){.wow .wow-stand{transition:none}}
/* Weicher Übergang zum nächsten Bild (Torben, 26.09.2026): unten läuft der Kopf in Weiß aus,
   die Projekt-Bühne beginnt oben in Weiß und geht erst dann in den Himmel über. */
.wow-unten{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;pointer-events:none;background-color:transparent;
  background-image:linear-gradient(180deg in oklab,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.84) 75%,#fff 100%)}
.wow-seite{position:relative;z-index:2;min-height:calc(100svh - var(--leiste,0px));display:grid;grid-template-columns:minmax(0,600px) 1fr;
  align-items:center;padding:96px var(--rand) 64px;opacity:0;transform:translateY(14px);
  transition:opacity calc(var(--dur-takt)*5) var(--ease-in-out) calc(var(--dur-takt)*.5),transform calc(var(--dur-takt)*5) var(--ease-in-out) calc(var(--dur-takt)*.5)}
@media (min-width:1024px){.wow-seite{padding-left:max(var(--rand),calc((100% - 1320px)/2 + 40px))}}
.wow.hell .wow-seite{opacity:1;transform:none}
.wow-logo{display:flex;align-items:center;gap:22px;max-width:520px}
.wow-zeichen{width:150px;flex:none;height:auto;overflow:visible;display:block}
/* Zeichen "Garten am See" (Torbens Wahl, 28.09.2026): zwei Huegel als Garten,
   darunter die Seeflaeche und ein Streifen Erde. */
.wow-z-huegel-a{fill:var(--gruen-dunkel)} .wow-z-huegel-b{fill:var(--gruen)}
.wow-z-wasser{fill:var(--blau)} .wow-z-erde{fill:var(--erde)}
.wow-z-huegel-a,.wow-z-huegel-b,.wow-z-wasser,.wow-z-erde{transform-box:view-box}
.wow-wort{display:flex;flex-direction:column;line-height:1.1;font-family:"Manrope Logo","Heros",sans-serif}
.wow-wort b{font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:.14em;color:#23301f;white-space:nowrap}
.wow-wort b i{font-style:normal;display:inline-block}
.wow-wort b i:nth-child(n+4){color:var(--gruen)}
.wow-wort small{font-size:clamp(11px,1vw,14px);letter-spacing:.22em;text-transform:uppercase;color:#5f6b5a;margin-top:8px;white-space:nowrap}
/* Die Huegel wachsen aus der Grundlinie, dann laeuft der See von links ein,
   zuletzt der Streifen Erde. Danach hebt und senkt sich der See ganz leise. */
.wow-logo.an .wow-z-huegel-a{transform-origin:30px 57px;animation:wow-huegel calc(var(--dur-takt)*2.2) var(--ease-feder) calc(var(--dur-takt)*.4) both}
.wow-logo.an .wow-z-huegel-b{transform-origin:70px 57px;animation:wow-huegel calc(var(--dur-takt)*2.2) var(--ease-feder) calc(var(--dur-takt)*1) both}
.wow-logo.an .wow-z-wasser{animation:wow-welle calc(var(--dur-takt)*2.2) var(--ease-out) calc(var(--dur-takt)*1.6) both,wow-atmen calc(var(--dur-takt)*14) var(--ease-in-out) calc(var(--dur-takt)*5) infinite}
.wow-logo.an .wow-z-erde{animation:wow-welle calc(var(--dur-takt)*2) var(--ease-out) calc(var(--dur-takt)*2.3) both}
.wow-logo.an .wow-wort b i{animation:wow-buchstabe calc(var(--dur-takt)*1.4) var(--ease-out) calc(var(--dur-takt)*(1.6 + var(--n)*.16)) both}
.wow-logo.an .wow-wort small{animation:wow-oval calc(var(--dur-takt)*2) var(--ease-out) calc(var(--dur-takt)*3.2) both}
@keyframes wow-oval{from{opacity:0;transform:scale(.85)}}
@keyframes wow-huegel{from{opacity:0;transform:translateY(12px) scaleY(.45)}}
@keyframes wow-atmen{0%,100%{transform:translateY(0)}50%{transform:translateY(.8px)}}
@keyframes wow-welle{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wow-wiegen{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes wow-fliessen{0%,100%{transform:translateX(0)}50%{transform:translateX(1.6px)}}
@keyframes wow-buchstabe{from{opacity:0;transform:translateY(10px)}}
.wow h1{font-weight:700;letter-spacing:-.02em;font-size:clamp(28px,3.3vw,44px);line-height:1.12;margin:26px 0 18px;color:#1d2a22}
.wow h1 b{color:#33613d;font-weight:700}
.wow-text{font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:#3e4a43;max-width:52ch;margin:0 0 18px}
.wow-leistungen{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:540px}
.wow-leistungen li{display:flex;align-items:center;gap:9px;min-height:40px;padding:8px 12px;background:#fff;border:1px solid #b9c8b3;border-radius:10px;
  font-size:var(--klein);font-weight:600;line-height:1.25;color:#2c3a30}
.wow-leistungen li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gruen)}
.wow-ref{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;margin:0 0 26px;max-width:540px;font-size:var(--klein);line-height:1.5;color:#3e4a43}
.wow-ref span{flex-basis:100%;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5f6b5a}
.wow-ref b{font-weight:600;white-space:nowrap}
.wow-ref b+b::before{content:"·";margin:0 10px;color:var(--gruen);font-weight:700}
.wow-knoepfe{display:flex;gap:14px;flex-wrap:wrap}
.wow-knopf{font-weight:700;font-size:var(--klein);padding:14px 24px;border-radius:999px;background:var(--gruen-dunkel);color:#fff}
.projekte-schluss{--gruen:#7aa356;--gruen-dunkel:#33613d;grid-column:1/-1;margin-top:48px;padding-top:40px;border-top:1px solid #c9d4c3}
@media (min-width:640px){.projekte-schluss{grid-column:5/17}}
.projekte-schluss .wow-leistungen{max-width:none}
.wow-knopf.leise{background:#fff;color:var(--gruen-dunkel);border:1px solid #9fb398}
@media (max-width:900px){
  .wow-stand,.wow-film,.wow-deck{object-position:50% 50%}
  /* Am Handy gibt der Verlauf das Bild frueher frei, sonst liegt der ganze Garten
     wie hinter Milchglas (Wow-Kritiker, 28.09.2026). Unter dem Logo bleibt er deckend. */
  .wow-verlauf{background-image:linear-gradient(0deg in oklab,#f5f9f2 0%,#f7faf4 48%,rgba(250,252,248,.7) 57%,rgba(255,255,255,0) 66%)}
  /* Am Handy fuellen Film und Standbild den ganzen Kopf (Hochformat-Fassungen),
     der Text liegt darunter auf dem weissen Verlauf. Vorher endete das Standbild
     bei 62 % und wurde dabei um 38 % seiner Hoehe beschnitten (Wow-Waechter, 28.09.2026). */
  .wow .wow-stand{object-position:50% 42%}
  .wow-seite{grid-template-columns:1fr;align-items:end;padding:34vh var(--rand) 20px}
  /* Knopf "Noch einmal ansehen" am Handy oben auf dem Bild, unten stuende er im
     Text. Leise gehalten, sonst ist er das kraeftigste Element im Kopf
     (Wow-Kritiker, 28.09.2026). */
  .wow .film-nochmal{bottom:auto;top:calc(var(--kopf-hoehe) + 10px);
    background:rgba(255,255,255,.72);border-color:rgba(29,42,34,.12);
    padding:7px 11px;font-size:12px;color:#3e4a43}
  .wow-zeichen{width:96px} .wow-logo{gap:14px}
  .wow-leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wow-ref{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}
  .wow-ref span{grid-column:1/-1}
  .wow-ref b{white-space:normal}
  .wow-ref b+b::before{content:none}
}
@media (prefers-reduced-motion:reduce){.wow-logo.an *{animation:none !important}}
@media (max-width:380px){.wow-zeichen{width:70px}.wow-logo{gap:10px}.wow-wort b{font-size:22px;letter-spacing:.1em}.wow-wort small{font-size:10px;letter-spacing:.12em}}
.film-knopf{position:absolute;right:var(--rand);bottom:var(--rand);z-index:3;display:none;align-items:center;gap:8px;
  background:#fff;color:var(--tinte);border:0;padding:10px 14px;font:inherit;font-size:var(--klein);font-weight:700;cursor:pointer}
.film-buehne.film-blockiert .film-knopf{display:inline-flex}
/* "Ver de nuevo": erscheint, sobald ein Film durchgelaufen ist (Kopf und Mosaico) */
.film-nochmal{position:absolute;right:var(--rand);bottom:var(--rand);z-index:3;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--tinte);border:1px solid rgba(29,42,34,.18);padding:10px 14px;font:inherit;font-size:var(--klein);font-weight:700;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease-in-out),visibility 0s linear var(--dur-2)}
.wow.hell .film-nochmal,.mosaico.hell .film-nochmal{opacity:1;visibility:visible;transition:opacity var(--dur-2) var(--ease-in-out) var(--dur-3),visibility 0s}

/* ---------- Kopfzeile: steht unter der Eroeffnung und klebt dann oben ---------- */
.kopfzeile{position:sticky;top:0;z-index:30;background:#fff;height:var(--kopf-hoehe)}
.kopfzeile.ueber-film{position:fixed;left:0;right:0;top:var(--kopf-oben,0px);background-color:transparent;
  background-image:linear-gradient(180deg in oklab,rgba(255,255,255,.94),rgba(255,255,255,.7) 60%,rgba(255,255,255,0));
  opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease-in-out),background-color var(--dur-2) var(--ease-in-out)}
.kopfzeile.ueber-film.sichtbar{opacity:1;pointer-events:auto}
.kopfzeile.ueber-film.fest{background-color:#fff;background-image:none}
/* Flaeche ueber der Kopfzeile (Torben, 05.10.2026): Am iPhone (Safari 26,
   Telegram) ist die Browserleiste oben durchsichtig. Die Kopfzeile klebt
   darunter, im Spalt darueber schien beim Rollen der Inhalt durch. Ein
   deckender Streifen in der Farbe der Kopfzeile reicht von ihr nach oben.
   Bei .kopf-ueber erst mit .kopf-fest, sonst laege er ueber dem Kopfbild.
   Die Kaufleiste kommt darueber, sonst verdeckt der Streifen sie oben.
   Hier mit .ueber-film: erst im Zustand .fest. */
.kopfzeile::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;
  background-color:#fff;pointer-events:none}
.kopfzeile.ueber-film::before{visibility:hidden}
.kopfzeile.ueber-film.fest::before{visibility:visible}
.kauf-leiste{position:relative;z-index:51}
.kopf-innen{height:100%;align-items:center}
.marke{grid-column:1/5;font-family:"Manrope Logo","Heros",sans-serif;font-weight:800;font-size:1.125rem;letter-spacing:.14em;line-height:1;color:#23301f}
.marke span{color:#7aa356}
.hauptmenue{display:contents}
.hauptmenue a{font-size:var(--klein);font-weight:700;padding:6px 0}
.hauptmenue a:hover,.hauptmenue a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.hauptmenue a:nth-child(1){grid-column:5/8}
.hauptmenue a:nth-child(2){grid-column:8/11}
.hauptmenue a:nth-child(3){grid-column:11/14}
.hauptmenue a:nth-child(4){grid-column:14/17}
.menue-knopf{display:none}
@media (max-width:639px){
  .marke{grid-column:1/5;font-size:1.0625rem}
  .menue-knopf{display:block;grid-column:5/7;justify-self:end;background:none;border:0;font:inherit;font-size:1.0625rem;font-weight:700;padding:10px 0;color:inherit;cursor:pointer}
  .hauptmenue{display:none}
  .kopfzeile.offen .hauptmenue{display:flex;flex-direction:column;gap:6px;position:fixed;left:0;right:0;top:var(--kopf-hoehe);bottom:0;background:#fff;padding:24px var(--rand)}
  .kopfzeile.offen .hauptmenue a{font-size:2rem;letter-spacing:-.02em;padding:4px 0}
}

/* ---------- Projekte: Vollbild mit Liste unten links ---------- */
.projekte-buehne{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--tinte);color:#fff}
.projekte-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.pb-oben{position:absolute;left:0;right:0;top:0;height:30%;z-index:1;pointer-events:none;background-color:transparent;
  background-image:linear-gradient(180deg in oklab,#fff 0%,rgba(255,255,255,.84) 22%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.18) 74%,rgba(255,255,255,0) 100%)}
.projekte-buehne::before{content:"";position:absolute;inset:0;z-index:1;background-color:transparent;
  background-image:linear-gradient(0deg in oklab,rgba(13,13,13,.9),rgba(13,13,13,.72) 45%,rgba(13,13,13,.3) 70%,rgba(13,13,13,0) 88%)}
.projekte-inhalt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:var(--rand);align-items:end}
.projekt-liste{grid-column:1/-1;list-style:none;margin:0 0 20px;padding:0}
@media (min-width:640px){.projekt-liste{grid-column:1/12}}
.projekt-liste li{font-size:var(--display-2);line-height:1.02;letter-spacing:-.02em;font-weight:700;color:rgba(255,255,255,.72);
  transition:color var(--dur-3) var(--ease-out)}
.projekt-liste li.aktiv{color:#fff}
.projekte-titel{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:var(--klein);font-weight:700;margin-bottom:14px}
.projekte-titel::before{content:"";width:7px;height:7px;background:#fff}
.projekte-fuss{grid-column:1/-1}

/* ---------- Abschnittskopf wie "Latest News" ---------- */
.abschnitt{padding:clamp(56px,7vw,88px) 0 0}
.abschnitt-kopf{row-gap:14px;margin-bottom:32px}
.abschnitt-kopf .label{grid-column:1/-1}
.abschnitt-kopf .titel{grid-column:1/-1}
@media (min-width:640px){.abschnitt-kopf .label{grid-column:1/5}.abschnitt-kopf .titel{grid-column:5/15}}

/* ---------- Leistungen wie die Projektseite: Bild ueber ganze Breite, Zeile darunter ---------- */
.leistung{margin-bottom:48px;row-gap:10px}
.leistung:last-child{margin-bottom:0}
.leistung{margin-left:0;margin-right:0}
.leistung figcaption{display:contents}
.leistung .bild{grid-column:1/-1}
.leistung img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--flaeche);display:block;
  /* Bild und Beschriftung passen immer zusammen auf einen Bildschirm (Torben, 26.09.2026:
     am MacBook war das Bild hoeher als das Fenster, der Text rutschte darunter weg). Das Bild
     wird dann oben und unten beschnitten statt hoeher als der Bildschirm. */
  max-height:max(280px,calc(100svh - var(--kopf-hoehe,56px) - var(--leiste,0px) - 112px))}
.gross-bild img{max-height:max(280px,calc(100svh - var(--kopf-hoehe,56px) - var(--leiste,0px) - 112px))}
.leistung .name{grid-column:1/-1}
.leistung .satz{grid-column:1/-1}
@media (min-width:640px){.leistung .name{grid-column:1/9}.leistung .satz{grid-column:9/16}}
.leistung .name b,.leistung .satz{font-weight:700}
.leistung .name b{display:block}

/* ---------- Weitere Leistungen wie "Latest News": Bild links, Text rechts, Linien ---------- */
.liste-mit-bild{list-style:none;margin:0;padding:0 var(--rand)}
.liste-mit-bild li{border-top:1px solid var(--grau-hell);padding:12px 0;display:grid;align-items:start;
  grid-template-columns:repeat(var(--spalten),minmax(0,1fr));column-gap:var(--luecke);row-gap:10px}
.liste-mit-bild li:last-child{border-bottom:1px solid var(--grau-hell)}
.liste-mit-bild img{grid-column:1/3;width:100%;aspect-ratio:16/9;object-fit:cover}
.liste-mit-bild .text{grid-column:3/7;display:flex;flex-direction:column;gap:6px}
@media (min-width:640px){.liste-mit-bild img{grid-column:1/5}.liste-mit-bild .text{grid-column:5/13}}

/* ---------- Estudio: grosse Aussage mit unterstrichenen Woertern ---------- */
.gross-text{grid-column:1/-1;font-size:var(--titel);line-height:1.12;letter-spacing:-.015em;font-weight:700}
@media (min-width:640px){.gross-text{grid-column:1/13;font-size:calc(var(--titel)*1.18)}}
.gross-text a{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.12em}
.gross-bild{margin:32px 0 0;padding:0 var(--rand)}
.gross-bild img{width:100%;aspect-ratio:16/9;object-fit:cover}
.zweiter-text{margin-top:40px}

/* ---------- Ablauf wie die Team-Liste: Beschriftung links, vier Schritte rechts ---------- */
.ablauf{margin-top:56px;row-gap:24px}
.ablauf .label{grid-column:1/-1}
.schritte{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--luecke)}
@media (min-width:640px){.ablauf .label{grid-column:1/5}.schritte{grid-column:5/17;grid-template-columns:repeat(4,minmax(0,1fr))}}
.schritt{position:relative;padding-top:14px;display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:8px}
.schritt::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grau-hell)}
.schritt::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--tinte);
  animation:takt-linie calc(var(--dur-takt)*12) linear infinite}
.schritt:nth-child(2)::after{animation-delay:calc(var(--dur-takt)*3)}
.schritt:nth-child(3)::after{animation-delay:calc(var(--dur-takt)*6)}
.schritt:nth-child(4)::after{animation-delay:calc(var(--dur-takt)*9)}
@keyframes takt-linie{0%{width:0;opacity:1}22%{width:100%;opacity:1}25%{width:100%;opacity:0}100%{width:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.schritt::after{animation:none}}
.schritt .nummer{font-size:var(--klein);font-weight:700;color:var(--grau)}
.schritt h3{font-size:var(--text);font-weight:700;line-height:1.2}
.schritt p{font-size:var(--klein);line-height:1.4}

/* ---------- Proyectos y clientes: helle Flaeche, vier Karten 2x2 (Torben, 26.09.2026:
   "zu unruhig und unstrukturiert, wie ein Word-Dokument"). Karten rechts in der
   Inhaltsspalte, die linke Spalte bleibt wie ueberall nur fuer die Beschriftung.
   Kopf und Liste liegen per subgrid in der ganzen Reihe auf einer Linie. ---------- */
.projekte-band{--band:#eef2ea;background:var(--band);margin-top:clamp(56px,7vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.projekte-band .abschnitt-kopf{margin-bottom:28px}
.gruppen{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:0 var(--luecke)}
@media (min-width:640px){.gruppen{grid-column:5/17;grid-template-columns:repeat(2,minmax(0,1fr))}}
.gruppe{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0;margin-bottom:var(--luecke);
  background:#fff;border:1px solid #c9d3c0;padding:18px 20px 8px}
.gruppe-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--tinte)}
.gruppe-kopf .nummer{font-size:var(--klein);font-weight:700;color:#5d7a3d}
.gruppe h3{font-size:var(--text);font-weight:700;line-height:1.2}
.gruppe-kopf .anzahl{font-size:var(--klein);color:var(--grau);white-space:nowrap}
.gruppe ul{list-style:none;margin:0;padding:0;align-self:start}
.gruppe li{font-size:var(--klein);line-height:1.35;padding:10px 0;border-bottom:1px solid #e3e8dd}
.gruppe li:last-child{border-bottom:0}

/* ---------- Kontakt: Wege rechts mit eigener Linie, gleich hoch wie das Formular ---------- */
.kontakt{padding-bottom:40px}
@media (min-width:640px){.kontakt{padding-bottom:56px}}
.kontakt-raster{row-gap:28px;align-items:stretch}
.formular{grid-column:1/-1;display:grid;gap:18px}
.kontakt-wege{grid-column:1/-1;display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--tinte);padding-top:20px}
@media (min-width:1024px){.formular{grid-column:5/12}.kontakt-wege{grid-column:13/17;border-top:0;padding-top:0;
  border-left:1px solid var(--grau-hell);padding-left:24px}}
.feld label{display:block;font-size:var(--klein);font-weight:700;margin-bottom:4px}
.feld input,.feld textarea{width:100%;font:inherit;font-size:var(--text);color:var(--tinte);background:#fff;border:0;
  border-bottom:1px solid var(--tinte);border-radius:0;padding:8px 0;-webkit-appearance:none}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--tinte);outline-offset:4px}
.senden{justify-self:start;display:inline-flex;align-items:center;gap:10px;background:var(--tinte);color:#fff;border:0;
  border-radius:0;padding:14px 22px;font:inherit;font-size:var(--klein);font-weight:700;cursor:pointer}
.senden:hover{background:#333}
.hinweis{font-size:var(--klein);color:var(--grau)}
/* Telefonnummern in der Fusszeile stehen untereinander buendig (Torben, 15.09.2026):
   die Beschriftung bekommt eine eigene feste Spalte, sonst schiebt "WhatsApp"
   die Ziffern gegen "Telefon" um 18 px aus der Flucht. */
.fuss-block i.wozu{font-style:normal;display:inline-block;min-width:5.6em}

.weg{padding-bottom:18px;border-bottom:1px solid var(--grau-hell)}
.weg:last-child{border-bottom:0;padding-bottom:0}
.weg b{display:block;font-size:var(--klein);color:var(--grau);font-weight:700;margin-bottom:4px}
.weg a{font-size:calc(var(--text)*1.2);font-weight:700;line-height:1.15}

/* ---------- Fusszeile wie das Vorbild: schwarz, Buero links, Mail rechts ---------- */
.fusszeile{background:var(--tinte);color:#fff;padding:56px 0 var(--rand)}
.fuss-oben{row-gap:28px;align-content:start}
.fuss-block{grid-column:1/-1;font-size:var(--klein);line-height:1.4}
.fuss-block b{display:block;color:#fff}
.fuss-block span,.fuss-block .g{color:#a3a3a3;display:block}
.fuss-block a{color:#fff;font-weight:700;display:inline-block;margin-bottom:10px}
@media (min-width:640px){.fuss-block:nth-child(1){grid-column:1/5}.fuss-block:nth-child(2){grid-column:5/9}.fuss-block:nth-child(3){grid-column:11/17}}
.fuss-unten{margin-top:40px;row-gap:10px;font-size:var(--klein);align-items:end}
.fuss-unten>*{grid-column:1/-1}
@media (min-width:640px){.fuss-unten>:nth-child(1){grid-column:1/5}.fuss-unten>:nth-child(2){grid-column:5/11}.fuss-unten>:nth-child(3){grid-column:11/17;justify-self:end;text-align:right}}
.fuss-unten a{text-decoration:underline;text-underline-offset:3px}
.fuss-unten .hfa-fuss{color:#fff;font-size:var(--klein)}

/* ---------- Kauf-Leiste (Baukasten, 19.09.2026) ---------- */
/* Kauf-Leiste (nur solange die Seite eine Demo ist): führt zur honeyflow-Verkaufsseite.
   Weiss mit honeyflow-Logo: stößt an keine Kundenfarbe hart an und ist als Rahmen von
   honeyflow erkennbar, nicht als Teil der Kundenseite (Torben, 19.09.2026). */
.kauf-leiste{background:#fff;border-bottom:3px solid #5a6b2f;padding:9px max(20px,calc((100% - 1080px)/2));display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:center}
.kauf-leiste::before{content:"";flex:none;width:158px;height:33px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-52 -52 497.93 104%22%3E%3Cpath d=%22M0.00,-44.00 L38.11,-22.00 L38.11,22.00 L0.00,44.00 L-38.11,22.00 L-38.11,-22.00Z%22 fill=%22none%22 stroke=%22%230d1b34%22 stroke-width=%227%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0.00,-25.80 L12.12,-18.80 L12.12,-4.80 L0.00,2.20 L-12.12,-4.80 L-12.12,-18.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M-13.62,-2.20 L-1.50,4.80 L-1.50,18.80 L-13.62,25.80 L-25.75,18.80 L-25.75,4.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M13.62,-2.20 L25.75,4.80 L25.75,18.80 L13.62,25.80 L1.50,18.80 L1.50,4.80Z%22 fill=%22%230d1b34%22/%3E%3Cg transform=%22translate(74,19)%22%3E%3Cpath transform=%22translate(0.00,0) scale(0.03519,-0.03519)%22 d=%22M876 0V510Q876 547 872.0 604.5Q868 662 847.0 720.0Q826 778 778.5 817.0Q731 856 644 856Q609 856 569.0 845.0Q529 834 494.0 802.5Q459 771 436.5 710.0Q414 649 414 548L258 622Q258 750 310.0 862.0Q362 974 466.5 1043.0Q571 1112 730 1112Q857 1112 937.0 1069.0Q1017 1026 1061.5 960.0Q1106 894 1125.0 822.5Q1144 751 1148.0 692.0Q1152 633 1152 606V0ZM138 0V1440H380V700H414V0Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(44.76,0) scale(0.03519,-0.03519)%22 d=%22M626 -30Q463 -30 340.0 43.0Q217 116 148.5 244.5Q80 373 80 540Q80 709 150.0 837.5Q220 966 343.0 1038.0Q466 1110 626 1110Q789 1110 912.5 1037.0Q1036 964 1105.0 835.5Q1174 707 1174 540Q1174 372 1104.5 243.5Q1035 115 911.5 42.5Q788 -30 626 -30ZM626 224Q757 224 821.5 312.5Q886 401 886 540Q886 684 820.5 770.0Q755 856 626 856Q537 856 480.0 816.0Q423 776 395.5 705.0Q368 634 368 540Q368 395 433.5 309.5Q499 224 626 224Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(88.88,0) scale(0.03519,-0.03519)%22 d=%22M876 0V510Q876 547 872.0 604.5Q868 662 847.0 720.0Q826 778 778.5 817.0Q731 856 644 856Q609 856 569.0 845.0Q529 834 494.0 802.5Q459 771 436.5 710.0Q414 649 414 548L258 622Q258 750 310.0 862.0Q362 974 466.5 1043.0Q571 1112 730 1112Q857 1112 937.0 1069.0Q1017 1026 1061.5 960.0Q1106 894 1125.0 822.5Q1144 751 1148.0 692.0Q1152 633 1152 606V0ZM138 0V1080H380V722H414V0Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(133.63,0) scale(0.03519,-0.03519)%22 d=%22M642 -30Q476 -30 349.5 41.5Q223 113 151.5 238.5Q80 364 80 526Q80 703 150.0 834.0Q220 965 343.0 1037.5Q466 1110 626 1110Q796 1110 915.0 1030.0Q1034 950 1091.0 805.0Q1148 660 1131 464H862V564Q862 729 809.5 801.5Q757 874 638 874Q499 874 433.5 789.5Q368 705 368 540Q368 389 433.5 306.5Q499 224 626 224Q706 224 763.0 259.0Q820 294 850 360L1122 282Q1061 134 929.5 52.0Q798 -30 642 -30ZM284 464V666H1000V464Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(176.42,0) scale(0.03519,-0.03519)%22 d=%22M278 -480 486 92 490 -76 20 1080H302L618 262H554L868 1080H1140L530 -480Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(216.53,0) scale(0.03519,-0.03519)%22 d=%22M230 0V1076Q230 1117 232.0 1169.0Q234 1221 248.5 1274.0Q263 1327 302 1370Q352 1426 410.5 1446.5Q469 1467 524.0 1468.5Q579 1470 618 1470H752V1250H628Q564 1250 533.0 1217.5Q502 1185 502 1140V0ZM60 870V1080H752V870Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(243.69,0) scale(0.03519,-0.03519)%22 d=%22M160 0V1470H432V0Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(264.52,0) scale(0.03519,-0.03519)%22 d=%22M626 -30Q463 -30 340.0 43.0Q217 116 148.5 244.5Q80 373 80 540Q80 709 150.0 837.5Q220 966 343.0 1038.0Q466 1110 626 1110Q789 1110 912.5 1037.0Q1036 964 1105.0 835.5Q1174 707 1174 540Q1174 372 1104.5 243.5Q1035 115 911.5 42.5Q788 -30 626 -30ZM626 224Q757 224 821.5 312.5Q886 401 886 540Q886 684 820.5 770.0Q755 856 626 856Q537 856 480.0 816.0Q423 776 395.5 705.0Q368 634 368 540Q368 395 433.5 309.5Q499 224 626 224Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(308.64,0) scale(0.03519,-0.03519)%22 d=%22M370 0 40 1082 306 1080 502 436 701 1080H927L1126 436L1322 1080H1588L1258 0H1050L814 704L578 0Z%22 fill=%22%230d1b34%22/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat}
.kauf-leiste .kauf-knopf{display:inline-flex;align-items:center;gap:10px;background:#0d1b34;color:#fff;
  font-weight:700;font-size:15px;text-decoration:none;padding:9px 20px;border-radius:999px;white-space:normal;line-height:1.35;max-width:100%}
.kauf-leiste .kauf-knopf:hover{background:#5a6b2f}
.kauf-leiste .kauf-knopf svg{flex:none}
@media (max-width:560px){
  .kauf-leiste{padding:8px 12px;gap:10px}
  .kauf-leiste::before{width:34px;height:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-52 -52 104 104%22%3E%3Cpath d=%22M0.00,-44.00 L38.11,-22.00 L38.11,22.00 L0.00,44.00 L-38.11,22.00 L-38.11,-22.00Z%22 fill=%22none%22 stroke=%22%230d1b34%22 stroke-width=%227%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0.00,-25.80 L12.12,-18.80 L12.12,-4.80 L0.00,2.20 L-12.12,-4.80 L-12.12,-18.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M-13.62,-2.20 L-1.50,4.80 L-1.50,18.80 L-13.62,25.80 L-25.75,18.80 L-25.75,4.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M13.62,-2.20 L25.75,4.80 L25.75,18.80 L13.62,25.80 L1.50,18.80 L1.50,4.80Z%22 fill=%22%230d1b34%22/%3E%3C/svg%3E")}
  .kauf-leiste .kauf-knopf{font-size:14px;padding:8px 14px;flex:1;justify-content:center}
}

/* ---------- Hidrosiembra: weiße Planungslinien über dem Foto (26.09.2026) ---------- */
.leistung .bild.hs{position:relative;overflow:hidden}
.hs-linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#fff;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));transition:opacity var(--dur-3) var(--ease-out)}
.hs.an .hs-linien{opacity:1}
.hs-raster path,.hs-hoehen path,.hs-flaeche,.hs-front,.hs-leit{stroke-dasharray:1;stroke-dashoffset:1}
.hs-raster path{stroke-width:1;opacity:.55}
.hs-flaeche{stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1}
.hs-hoehen path{stroke-width:1.8;opacity:0}
.hs-front{stroke-width:3.5}
.hs-punkt circle{fill:#fff;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.hs-punkt .hs-ring{fill:none;stroke:#fff;stroke-width:1.5}
.hs-punkt text{fill:#fff;stroke:none;font-family:inherit;font-size:26px;letter-spacing:.01em;opacity:0}
.hs-punkt .hs-fett{font-weight:700;font-size:30px}
.hs-leit{stroke-width:1.2;opacity:.8}
/* Zeichnen: Raster, Umriss, Höhenlinien, Front, Punkte. Bleibt danach stehen (Torben, 26.09.2026) */
.hs.an .hs-raster path{animation:hs-zieh calc(var(--dur-takt)*1.6) var(--ease-out) both}
.hs.an .hs-flaeche{animation:hs-zieh calc(var(--dur-takt)*2.2) var(--ease-in-out) calc(var(--dur-takt)*.8) both}
.hs.an .hs-hoehen path{animation:hs-hoehe calc(var(--dur-takt)*1.4) var(--ease-out) calc(var(--dur-takt)*(2 + var(--i)*.35)) both}
.hs.an .hs-front{animation:hs-zieh calc(var(--dur-takt)*1.2) var(--ease-out) calc(var(--dur-takt)*3.4) both}
.hs.an .hs-punkt circle{animation:hs-pop calc(var(--dur-takt)*.6) var(--ease-out) calc(var(--dur-takt)*(4.2 + var(--i)*.7)) both}
.hs.an .hs-punkt .hs-ring{animation:hs-ring calc(var(--dur-takt)*1.6) var(--ease-out) calc(var(--dur-takt)*(4.2 + var(--i)*.7)) both}
.hs.an .hs-leit{animation:hs-zieh calc(var(--dur-takt)*.7) var(--ease-out) calc(var(--dur-takt)*(4.5 + var(--i)*.7)) both}
.hs.an .hs-punkt text{animation:hs-text calc(var(--dur-takt)*.8) var(--ease-out) calc(var(--dur-takt)*(5 + var(--i)*.7)) both}
@keyframes hs-zieh{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hs-hoehe{from{stroke-dashoffset:1;opacity:0}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes hs-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes hs-ring{from{opacity:0;transform:scale(.3)}40%{opacity:.9}to{opacity:0;transform:scale(1.6)}}
@keyframes hs-text{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:639px){.hs-punkt text,.hs-leit{display:none}.hs-linien{stroke-width:2.5}.hs-raster path{stroke-width:1.5}}
@media (prefers-reduced-motion:reduce){.hs-linien{display:none}}

/* ---------- Uebergang Projektfoto -> 3D-Modell (Torben, 26.09.2026) ----------
   Links (ueber "Todos los proyectos" und der Textspalte) bleibt die harte Kante. Rechts, wo das
   Modell beginnt, wird das Foto heller und laeuft unten in den Dunstton ueber dem See (#a9c4d2) aus.
   Das Modell beginnt oben mit genau diesem Ton und blendet dann in den See und die Alpen.
   Steht in stil.css mit #planung, damit es die Dateien des 3D-Chats (projektierung.css) nicht
   beruehrt und trotzdem Vorrang hat. */
/* Handy: ueber die ganze Breite (dort gibt es keine Textspalte links), der Streifen ist niedriger und
   die Projektliste steht darueber, damit die weisse Schrift auf dem dunklen Foto bleibt. */
.pb-unten{position:absolute;left:0;right:0;bottom:0;height:96px;z-index:1;pointer-events:none;
  background-color:transparent;
  background-image:linear-gradient(180deg in oklab,rgba(169,196,210,0) 0%,rgba(169,196,210,.4) 36%,rgba(169,196,210,.86) 68%,#a9c4d2 88%,#a9c4d2 100%)}
@media (max-width:1023px){.projekte-inhalt{padding-bottom:calc(var(--rand) + 64px)}}
@media (min-width:1024px){
  .projekte-buehne::before{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 24%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.5) 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 24%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.5) 100%)}
  .pb-unten{height:24%;
    background-image:linear-gradient(180deg in oklab,rgba(169,196,210,0) 0%,rgba(169,196,210,.3) 38%,rgba(169,196,210,.72) 64%,rgba(169,196,210,.96) 82%,#a9c4d2 90%,#a9c4d2 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 21%,#000 25.7%);
    mask-image:linear-gradient(90deg,transparent 0%,transparent 21%,#000 25.7%)}
}
.projekte-inhalt{z-index:2}
#planung .g-flaeche::before{content:"";position:absolute;left:0;right:0;top:0;height:16%;z-index:3;pointer-events:none;
  background-color:transparent;
  background-image:linear-gradient(180deg in oklab,#a9c4d2 0%,rgba(169,196,210,.6) 40%,rgba(169,196,210,0) 100%)}
/* Handy: Uebergang dunkel -> Tuerkis -> helles Meer gestreckt (Torben, 26.09.2026, 20:49, iPhone:
   "das blau dunkel und hell etwas laenger, dass es nicht so eng aufeinander ist"). Die Projektliste
   rueckt dafuer nach oben, der Tuerkis-Streifen am Foto und der Auslauf oben im Modell werden laenger. */
@media (max-width:1023px){
  .projekte-inhalt{padding-bottom:calc(var(--rand) + 150px)}
  .pb-unten{height:300px;
    background-image:linear-gradient(180deg in oklab,rgba(169,196,210,0) 0%,rgba(169,196,210,.16) 26%,rgba(169,196,210,.48) 52%,rgba(169,196,210,.86) 74%,#a9c4d2 88%,#a9c4d2 100%)}
  #planung .g-flaeche::before{height:32%;
    background-image:linear-gradient(180deg in oklab,#a9c4d2 0%,rgba(169,196,210,.78) 22%,rgba(169,196,210,.4) 55%,rgba(169,196,210,.12) 80%,rgba(169,196,210,0) 100%)}
}
@media (min-width:1024px){
  #planung .g-modell{margin-right:calc(-1 * var(--rand))}
  #planung:not(.g-fest) .g-modell{margin-top:-16px}
}

/* ---------- Ruhigere Farben im 3D-Modell (Torben, 26.09.2026, 16:08: "das uebernehmen wir") ----------
   Fotos und Filme sind ueber werkzeuge/beruhigen.py gedaempft. Das Modell zeichnet seine Farben
   selbst, deshalb hier derselbe Schritt als Filter. Die tuerkisen Uebergaenge (Foto -> Modell)
   bekommen denselben Filter, damit keine Kante entsteht. Nicht auf .g-ersatz und .g-film legen:
   Ersatzbild und Rundgang-Film sind schon gedaempft. */
#planung .g-flaeche canvas{filter:saturate(.82) contrast(.96)}

/* Schwarze Haarlinie zwischen Projektfoto und 3D-Modell (Torben, 26.09.2026, Safari am Mac):
   Der Abschnitt ist 100svh hoch, auf dem Retina-Bildschirm bleibt unten ein Bruchteil eines Pixels
   frei, durch den der fast schwarze Grund (--tinte) scheint. Deshalb ragt das Foto 2 px ueber die
   Kante (wird abgeschnitten), und der Grund ist rechts, wo das Foto in Tuerkis auslaeuft, selbst
   tuerkis. Den Filter oben nur auf das Modell legen, nicht auf die Uebergaenge: Safari rundet die
   Flaeche eines gefilterten Elements, und genau an dieser Kante darf nichts wackeln. */
.projekte-buehne img{height:calc(100% + 2px)}
.projekte-buehne{background-color:#a9c4d2}
/* Zweite Linie (Torben, 28.09.2026, Safari am Mac, Gartenbau Erdmann): Das Foto ragt jetzt 2 px
   ueber die Kante, der helle Auslauf .pb-unten endet aber genau an der Kante. Safari rundet beides
   verschieden, und eine Bildzeile des Fotos blitzt als dunkle Linie durch (gemessen: 1 Geraetepixel,
   Farbe wechselt mit dem Foto). Deshalb reicht der Auslauf 4 px ueber die Kante und ist auf den
   letzten 6 px deckend. So liegt unter der Kante immer die Uebergangsfarbe, egal wie gerundet wird. */
.projekte-buehne .pb-unten{bottom:-4px;
  background-image:linear-gradient(180deg in oklab,rgba(169,196,210,0) 0%,rgba(169,196,210,.18) 28%,rgba(169,196,210,.5) 58%,rgba(169,196,210,.86) 84%,#a9c4d2 calc(100% - 6px),#a9c4d2 100%)}
@media (min-width:1024px){
  .projekte-buehne .pb-unten{
    background-image:linear-gradient(180deg in oklab,rgba(169,196,210,0) 0%,rgba(169,196,210,.35) 45%,rgba(169,196,210,.85) 85%,#a9c4d2 calc(100% - 6px),#a9c4d2 100%)}
}
@media (min-width:1024px){
  .projekte-buehne{background-color:var(--tinte);
    background-image:linear-gradient(in oklab 90deg,var(--tinte) 0%,var(--tinte) 21%,#a9c4d2 25.7%,#a9c4d2 100%)}
}

/* ---------- Handy entzerrt (Torben, 28.09.2026: "auf mobile wirkt sie teilweise noch ein bisschen
   gedrungen", Foto mit den Projekten und das Modell danach) ----------
   Projektliste: kleinere Schrift, mehr Zeilenabstand, damit die sieben Namen nicht als Block auf dem
   Foto kleben. 3D-Bereich: Modell und Bedienung passen weiter auf einen Bildschirm, aber die Bedienung
   bekommt mehr Luft und groessere Schrift, das Modell gibt dafuer Hoehe ab. Mit #planung, damit es
   Vorrang vor projektierung.css hat, ohne die Datei des 3D-Chats anzufassen. */
@media (max-width:639px){
  .projekt-liste{margin-bottom:26px}
  .projekt-liste li{font-size:1.5rem;line-height:1.22}
  .projekte-titel{margin-bottom:18px}
  /* Der Schwimmteich soll frei bleiben (Torben, 28.09.2026, iPhone: "deutlich mehr noch von dem Pool
     zu sehen ... das weiter nach unten schieben und das Foto laenger machen"). Das Hochformat-Foto
     (800 x 1433, also 179vw hoch) steht in voller Hoehe oben, der Teich liegt bei 50 bis 74 % davon.
     Der Abschnitt ist 340 px laenger als das Foto: die Namen beginnen erst auf dem Lavendel darunter,
     dort wird es dunkel, und ganz unten laeuft es wie bisher ins Hellblau des Modells aus. */
  .projekte-buehne{height:calc(179vw + 340px);min-height:0;
    background-color:var(--tinte);
    background-image:linear-gradient(180deg in oklab,var(--tinte) 0%,var(--tinte) calc(100% - 60px),#a9c4d2 100%)}
  .projekte-buehne img{bottom:auto;height:calc(179vw + 2px);object-position:50% 0%}
  .pb-oben{height:calc(179vw * .2)}
  .projekte-buehne::before{top:calc(179vw * .74);
    background-image:linear-gradient(180deg in oklab,rgba(13,13,13,0) 0,rgba(13,13,13,.5) calc(179vw * .1),rgba(13,13,13,.86) calc(179vw * .2),rgba(13,13,13,.97) calc(179vw * .26),rgba(13,13,13,.97) 100%)}
}
@media (max-width:1023px){
  #planung.g-buehne{gap:22px;padding-bottom:14px}
  #planung .g-seite h2{font-size:19px}
  #planung .g-daten{margin-top:10px;font-size:12.5px;column-gap:12px}
  #planung .g-daten div{padding:4px 0}
  #planung .g-steuer{margin-top:16px;column-gap:12px}
  #planung .g-gruppe h3{font-size:12.5px;padding-bottom:5px;margin-bottom:3px}
  #planung .g-gruppe ul{margin-bottom:12px}
  #planung .g-gruppe li,#planung .g-steuer button{height:32px}
  #planung .g-steuer button{font-size:15px}
  #planung .g-paar .g-name{font-size:15px}
  #planung .g-hinweis{font-size:12.5px;padding-top:6px}
}
/* Niedrigere Handys (Safari mit eingeblendeten Leisten): die Luft waechst mit der Hoehe, damit das
   Modell nie zu klein wird. Unter 760 px etwas knapper, unter 700 px wieder die kompakten Werte
   des 3D-Chats (gemessen 28.09.2026: bei 664 px blieben dem Modell sonst nur 166 px). */
@media (max-width:1023px) and (max-height:759px){
  #planung.g-buehne{gap:16px;padding-bottom:10px}
  #planung .g-daten{margin-top:6px}
  #planung .g-daten div{padding:3px 0}
  #planung .g-steuer{margin-top:10px}
  #planung .g-gruppe ul{margin-bottom:8px}
  #planung .g-gruppe li,#planung .g-steuer button{height:29px}
}
@media (max-width:1023px) and (max-height:699px){
  #planung.g-buehne{gap:12px;padding-bottom:6px}
  #planung .g-seite h2{font-size:17px}
  #planung .g-daten{margin-top:4px;font-size:11.5px}
  #planung .g-daten div{padding:2px 0}
  #planung .g-steuer{margin-top:6px}
  #planung .g-gruppe h3{font-size:11.5px;padding-bottom:3px;margin-bottom:1px}
  #planung .g-gruppe ul{margin-bottom:6px}
  #planung .g-gruppe li,#planung .g-steuer button{height:26px}
  #planung .g-steuer button,#planung .g-paar .g-name{font-size:14px}
  #planung .g-hinweis{font-size:11.5px;padding-top:2px}
}

/* Sehr schmale Handys (320 px): die Kennzahlen wieder so klein wie im 3D-Chat, sonst passt "Beregnet" nicht */
@media (max-width:360px){#planung .g-daten{font-size:10.5px;column-gap:8px}}

/* ================================================================ UNTERSEITEN
   Leistungen, Übersicht, Über uns, Kontakt, Impressum, Datenschutz
   (werkzeuge/bausteine-unterseiten.py, 28.09.2026). Gleiche Bausteine wie die
   Startseite, dazu nur das, was es dort nicht gibt: Seitenkopf mit Brotkrumen,
   Punkte, Fließtext, Fragen, Kontaktband, Zeitentabelle und Rechtstext.
   Grundsatz "Nebeneinander heißt gleich hoch und gleich breit": die Punkte
   liegen per subgrid auf denselben Zeilen, damit Überschrift neben Überschrift
   und Text neben Text steht, auch bei verschieden langen Texten. */

/* ---------- Seitenkopf ---------- */
.seitenkopf{padding:clamp(24px,4vw,40px) 0 0;row-gap:16px}
.brotkrumen{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:var(--klein);color:var(--grau)}
.brotkrumen a{text-decoration:underline;text-underline-offset:3px}
.brotkrumen a:hover{color:var(--tinte)}
.brotkrumen span[aria-hidden]{color:var(--grau-hell)}
.sk-titel{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
.sk-titel .label{color:var(--grau)}
.sk-text{grid-column:1/-1;display:grid;gap:12px;max-width:62ch}
.sk-text p{line-height:1.45}
@media (min-width:640px){
  .seitenkopf{padding-top:clamp(36px,5vw,64px);row-gap:22px}
  .sk-titel{grid-column:1/9}
  .sk-text{grid-column:9/17;align-self:end}
}

/* ---------- Punkte: zwei Spalten, gleiche Zeilen (subgrid) ---------- */
.punkte{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr);gap:22px var(--luecke)}
@media (min-width:640px){.punkte{grid-column:5/17;grid-template-columns:repeat(2,minmax(0,1fr))}}
.punkt{position:relative;padding-top:14px;display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:8px}
.punkt::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grau-hell)}
.punkt h3{font-size:var(--text);font-weight:700;line-height:1.2}
.punkt p{font-size:var(--klein);line-height:1.45;color:var(--grau)}

/* ---------- Fließtext ---------- */
.fliess{grid-column:1/-1;display:grid;gap:14px;max-width:66ch}
.fliess p{line-height:1.5}
@media (min-width:640px){.fliess{grid-column:5/15}}

/* ---------- Fragen und Antworten ---------- */
.fragen{grid-column:1/-1}
@media (min-width:640px){.fragen{grid-column:5/15}}
.frage{border-top:1px solid var(--grau-hell)}
.fragen .frage:last-of-type{border-bottom:1px solid var(--grau-hell)}
.frage summary{list-style:none;cursor:pointer;padding:16px 28px 16px 0;position:relative;
  font-weight:700;font-size:var(--text);line-height:1.25}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:4px;top:22px;width:9px;height:9px;
  border-right:2px solid var(--tinte);border-bottom:2px solid var(--tinte);
  transform:rotate(45deg);transition:transform var(--dur-2) var(--ease-out)}
.frage[open] summary::after{transform:rotate(-135deg);top:26px}
.frage p{padding:0 28px 18px 0;font-size:var(--klein);line-height:1.5;color:var(--grau);max-width:62ch}

/* ---------- Kontaktband am Fuß jeder Unterseite ---------- */
.band-kontakt{--gruen:#7ea252;--gruen-dunkel:#2d4a2a;margin-top:clamp(40px,5vw,72px);
  padding:clamp(36px,5vw,64px) 0 clamp(36px,5vw,64px);background:#eef2ea}
.band-innen{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media (min-width:640px){.band-innen{grid-column:5/15}}
.band-kontakt .wow-text{margin:0;max-width:56ch}

/* ---------- Bilder auf Unterseiten ---------- */
.gross-bild a{display:block}
.schmal-bild img{max-height:min(38svh,340px)}
.liste-mit-bild .text h3 a:hover,.leistung .name b a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Erreichbarkeit als Tabelle (nie als Satz) ---------- */
.zeiten{grid-column:1/-1;border-collapse:collapse;width:100%;max-width:520px;margin-bottom:28px}
@media (min-width:640px){.zeiten{grid-column:1/8;margin-bottom:0}.kontakt .fliess{grid-column:9/16}}
.zeiten th,.zeiten td{text-align:left;padding:10px 0;border-bottom:1px solid var(--grau-hell);
  font-size:var(--klein);font-weight:400;vertical-align:baseline}
.zeiten th{font-weight:700;padding-right:18px}
.zeiten td{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Anschrift und Hinweiskasten ---------- */
.anschrift{font-size:calc(var(--text)*1.05);font-weight:700;line-height:1.35;display:block}
.demo-kasten{grid-column:1/-1;border:1px solid var(--grau-hell);background:var(--flaeche);
  padding:20px 22px;display:grid;gap:10px}
@media (min-width:640px){.demo-kasten{grid-column:5/15}}
.demo-kasten p{font-size:var(--klein);line-height:1.5;color:var(--grau);max-width:74ch}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext{grid-column:1/-1;max-width:70ch;display:grid;gap:10px}
@media (min-width:640px){.rechtstext{grid-column:5/15}}
.rechtstext h2{font-size:var(--text);font-weight:700;line-height:1.2;margin-top:22px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{font-size:var(--klein);line-height:1.55;color:var(--grau)}
.rechtstext a{text-decoration:underline;text-underline-offset:3px;color:var(--tinte)}

/* Bild in der Liste steckt jetzt in einem Link (er fuehrt auf die Leistung).
   Damit es die Spalte behaelt, erbt der Link die Rasterangaben des Bildes. */
.liste-mit-bild li>a{grid-column:1/3;display:block}
.liste-mit-bild li>a img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:640px){.liste-mit-bild li>a{grid-column:1/5}}
/* Fusszeile: jede Verweisliste untereinander, nicht in einer Zeile. */
.fusszeile .fuss-block a{display:block;margin-bottom:8px}

/* Mailadressen und Begriffe mit Bindestrich brechen nie um (Regel "Keine
   Worttrennung"): inline-block allein genuegt nicht, an einem Bindestrich
   trennt der Browser trotzdem ("info@gartenbau-" / "erdmann.de"). */
.zusammen{white-space:nowrap}
/* Damit die Mailadresse in die schmale Kontaktspalte passt, steht sie dort
   eine Stufe kleiner als die Telefonnummern. */
.kontakt-wege .weg a[href^="mailto:"]{font-size:var(--text)}
/* Erreichbarkeit: Tabelle links, Hinweise rechts, beide auf einer Linie. */
@media (min-width:640px){.zeiten-abschnitt .fliess{grid-column:9/16;margin-top:0}}