/* Isartaler Zaun – Gestaltung „Isartal Präzision“.
   Farben aus dem Logo: Petrol #0B594C, Grün #457F0B, Hellgrün #6ABF17. Dunkle Flächen in tiefem Petrol.
   Schriften lokal: Raleway (Überschriften, SIL OFL) und Roboto (Text, Apache 2.0). Kein Abruf bei Google. */
@font-face{font-family:Raleway;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/raleway-300.woff2) format('woff2')}
@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/raleway-400.woff2) format('woff2')}
@font-face{font-family:Raleway;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/raleway-700.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/roboto-400.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/roboto-500.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/roboto-700.woff2) format('woff2')}

:root{
  --nacht:#03201B; --nacht-2:#062C25; --petrol:#0B594C; --gruen:#457F0B; --lime:#6ABF17; --glow:#A6E35A;
  --mint:#E6EEED; --hell:#F5F8F7; --text:#0E1B18; --text-2:#45534F; --linie:#D3DEDB;
  --auf-dunkel:#E9F2EF; --auf-dunkel-2:#A9C2BB; --glas:rgba(255,255,255,.06); --glas-rand:rgba(255,255,255,.14);
  --r:18px; --max:1240px; --kopf:84px;
  --verlauf:linear-gradient(135deg,var(--gruen),#2F7531 55%,var(--petrol));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.65 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--petrol)}
h1,h2,h3{font-family:Raleway,sans-serif;line-height:1.12;margin:0 0 .55em;letter-spacing:-.01em}
h1{font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-weight:300;font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-weight:700;font-size:1.25rem}
h1 b,h2 b{font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.schmal{max-width:860px}
.mitte{text-align:center}
.mitte.schmal{margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:8px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.leuchten{color:var(--gruen)}
.dunkel .leuchten,.hero .leuchten{color:var(--glow)}

/* Fortschrittsbalken beim Scrollen */
.fortschritt{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--verlauf);z-index:60}

/* Kopf */
header.kopf{position:sticky;top:0;z-index:50;height:var(--kopf);display:flex;align-items:center;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid rgba(11,89,76,.1);transition:box-shadow .3s}
header.kopf.schatten{box-shadow:0 10px 30px rgba(3,32,27,.08)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;position:relative}
.logo img{width:170px}
nav.haupt ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
nav.haupt a{display:block;text-decoration:none;color:var(--text);padding:10px 14px;border-radius:999px;font-size:15px;font-weight:500;transition:background .2s,color .2s}
nav.haupt a:hover{background:var(--mint)}
nav.haupt a[aria-current=page]{color:var(--petrol);background:rgba(106,191,23,.16)}
.kopf-aktion{display:flex;align-items:center;gap:10px}
.tel-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--petrol);font-weight:700;white-space:nowrap;padding:10px 8px;min-height:44px;min-width:44px}
.tel-link svg{width:18px;height:18px}
.menue-knopf{display:none}
.menue-knopf summary{list-style:none;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--mint)}
.menue-knopf summary::-webkit-details-marker{display:none}
.menue-knopf summary span,.menue-knopf summary span::before,.menue-knopf summary span::after{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:transform .25s,background .25s}
.menue-knopf summary span::before,.menue-knopf summary span::after{content:"";position:absolute;left:0}
.menue-knopf summary span::before{top:-7px}
.menue-knopf summary span::after{top:7px}
.menue-knopf[open] summary span{background:transparent}
.menue-knopf[open] summary span::before{transform:translateY(7px) rotate(45deg)}
.menue-knopf[open] summary span::after{transform:translateY(-7px) rotate(-45deg)}

/* Knöpfe */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;background:var(--verlauf);color:#fff;text-decoration:none;font:700 16px Roboto,sans-serif;border:0;cursor:pointer;box-shadow:0 10px 28px -12px rgba(69,127,11,.85),inset 0 1px 0 rgba(166,227,90,.45);transition:transform .2s,box-shadow .2s;isolation:isolate;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s;z-index:-1}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(69,127,11,.95),inset 0 1px 0 rgba(166,227,90,.6)}
.btn:hover::after{transform:translateX(120%)}
.btn svg{width:20px;height:20px;flex:none}
.btn.klein{min-height:44px;padding:10px 18px;font-size:15px}
.btn.glas{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.glas:hover{background:rgba(255,255,255,.2)}
.btn.rand{background:transparent;color:var(--petrol);border:1.5px solid var(--petrol);box-shadow:none}
.btn.rand:hover{background:var(--petrol);color:#fff}
.aktionen{display:flex;flex-wrap:wrap;gap:12px}

/* Dunkle Flächen */
.dunkel{background:var(--nacht);color:var(--auf-dunkel);position:relative;overflow:hidden}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.dunkel p{color:var(--auf-dunkel-2)}
.dunkel a:not(.btn){color:var(--glow)}
.raster-licht::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 400px at 85% 0%,rgba(106,191,23,.18),transparent 70%),
  radial-gradient(500px 500px at 0% 100%,rgba(11,89,76,.55),transparent 70%);pointer-events:none}
.dunkel>.wrap{position:relative;z-index:1}

/* Startbereich */
.hero{position:relative;min-height:calc(100svh - var(--kopf));display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--nacht)}
.hero-bild{position:absolute;inset:0;background:center/cover no-repeat}
.hero-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,32,27,.25) 0%,rgba(3,32,27,.35) 40%,rgba(3,32,27,.94) 100%),linear-gradient(90deg,rgba(3,32,27,.7),transparent 65%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:110px;padding-bottom:64px}
.hero .wrap>div:first-child{max-width:760px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#D6E5E0;max-width:36em;margin-bottom:1.8em}
.glaskarte{background:var(--glas);border:1px solid var(--glas-rand);border-radius:var(--r);padding:24px}
.hero-fakten{list-style:none;margin:30px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:12px 36px;color:#D6E5E0;font-size:15.5px}
.hero-fakten b{display:block;font:300 2.2rem/1.05 Raleway,sans-serif;color:#fff;margin-bottom:2px}
.scroll-hinweis{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.scroll-hinweis::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:maus 1.8s infinite}
@keyframes maus{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* Ortsleiste */
.orte-leiste{background:var(--nacht-2);color:var(--auf-dunkel-2);border-top:1px solid rgba(255,255,255,.06)}
.orte-leiste .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding-top:18px;padding-bottom:18px}
.orte-leiste span{color:var(--glow);font-weight:500;font-size:15px}
.orte-leiste ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.orte-leiste li{font:400 1.02rem Raleway,sans-serif;color:#fff}
.orte-leiste li:not(:last-child)::after{content:"·";margin:0 12px;color:var(--auf-dunkel-2)}

/* Abschnitte */
section{padding:110px 0;position:relative}
.hell{background:var(--hell)}
.mint{background:var(--mint)}
.kopftext{max-width:760px;margin-bottom:52px}
.kopftext.mitte{margin-left:auto;margin-right:auto}
.kopftext p{font-size:1.12rem;color:var(--text-2)}
.dunkel .kopftext p{color:var(--auf-dunkel-2)}

/* Bento-Raster */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:18px}
.kachel{position:relative;border-radius:var(--r);padding:28px;background:#fff;border:1px solid var(--linie);overflow:hidden;isolation:isolate}
.kachel h3{color:var(--petrol)}
.kachel p{color:var(--text-2);margin:0}
.kachel .symbol{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(106,191,23,.14);margin-bottom:18px}
.kachel .symbol img{width:40px}
.k-gross{grid-column:span 3;grid-row:span 2;padding:0;color:#fff;border:0;display:flex;align-items:flex-end;min-height:380px}
.k-gross img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s}
.k-gross:hover img{transform:scale(1.05)}
.k-gross::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(3,32,27,.92));z-index:-1}
.k-gross div{padding:30px}
.k-gross h3{color:#fff;font:300 2rem/1.15 Raleway,sans-serif}
.k-gross p{color:#D6E5E0}
.k-3{grid-column:span 3}
.k-2{grid-column:span 2}
.k-dunkel{background:var(--nacht);border-color:transparent}
.k-dunkel h3{color:#fff}
.k-dunkel p{color:var(--auf-dunkel-2)}
.k-verlauf{background:var(--verlauf);border:0;color:#fff}
.k-verlauf h3,.k-verlauf p{color:#fff}

/* Planer-Teaser */
.planer-teaser{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.schritt-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.schritt-liste li{counter-increment:s;display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--glas);border:1px solid var(--glas-rand)}
.schritt-liste li::before{content:counter(s,decimal-leading-zero);font:700 14px Roboto,sans-serif;color:var(--nacht);background:var(--glow);border-radius:10px;width:40px;height:40px;display:grid;place-items:center;flex:none}
.schritt-liste b{color:#fff;display:block}
.schritt-liste span{color:var(--auf-dunkel-2);font-size:15px}

/* Ablauf */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;counter-reset:a}
.ablauf li{position:relative;counter-increment:a}
.ablauf li::before{content:counter(a);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--lime);color:var(--petrol);font:700 1.3rem Raleway,sans-serif;margin-bottom:18px;box-shadow:0 0 0 8px var(--hell)}
.ablauf h3{color:var(--petrol);margin-bottom:.3em}
.ablauf p{color:var(--text-2);margin:0;font-size:16px}

/* Karussell Referenzen */
.karussell{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,420px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 22px 18px;margin:0 -22px;scrollbar-width:thin;scrollbar-color:var(--lime) transparent}
.karussell figure{margin:0;scroll-snap-align:start;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--nacht-2)}
.karussell img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.karussell figure:hover img{transform:scale(1.05)}
.karussell figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 16px;border-radius:12px;background:rgba(3,32,27,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:500;font-size:15px}
.karussell-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.karussell-kopf .kopftext{margin:0}

/* Zitat */
.zitat{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.zitat img{width:220px;height:260px;object-fit:cover;object-position:top;border-radius:var(--r);background:var(--nacht-2)}
.zitat blockquote{margin:0}
.zitat blockquote p{font:300 clamp(1.5rem,3vw,2.3rem)/1.3 Raleway,sans-serif;color:#fff;margin-bottom:.7em}
.zitat cite{font-style:normal;color:var(--glow);font-weight:500}
.sterne{color:var(--glow);display:flex;gap:4px;margin-bottom:12px}
.sterne svg{width:20px;height:20px}

/* Zaunarten */
.arten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;list-style:none;margin:0;padding:0}
.art{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;color:#fff;isolation:isolate;display:flex;align-items:flex-end;background:var(--nacht)}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(3,32,27,.95));z-index:-1}
.art:hover img,.art:focus-within img{transform:scale(1.06)}
.art div{padding:24px;width:100%}
.art h3{color:#fff;font:300 1.7rem/1.15 Raleway,sans-serif;margin-bottom:.3em}
.art p{color:#D6E5E0;font-size:15.5px;margin:0 0 14px}
.art a{color:var(--glow);font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center;padding:6px 0}
.art a::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.art a:hover::after{transform:translateX(4px)}
.materialien{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.materialien span{padding:8px 16px;border-radius:999px;border:1px solid var(--glas-rand);background:var(--glas);color:#fff;font-weight:500;font-size:15px}

/* Galerie mit Filter */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.filter button{font:500 15px Roboto,sans-serif;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--linie);background:#fff;color:var(--text);cursor:pointer;transition:all .2s}
.filter button:hover{border-color:var(--lime)}
.filter button[aria-pressed=true]{background:var(--nacht);border-color:var(--nacht);color:#fff}
.filter button span{opacity:.6;margin-left:4px}
.galerie{columns:4 250px;column-gap:16px}
.galerie figure{margin:0 0 16px;break-inside:avoid;position:relative;border-radius:14px;overflow:hidden;background:var(--mint)}
.galerie figure[hidden]{display:none}
.galerie a{display:block;cursor:zoom-in}
.galerie img{width:100%;transition:transform .6s}
.galerie figure:hover img{transform:scale(1.04)}
.galerie figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 12px;border-radius:10px;background:rgba(3,32,27,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:14px;font-weight:500}

/* Großansicht */
.leuchtkasten{position:fixed;inset:0;z-index:80;background:rgba(3,20,17,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:60px 70px}
.leuchtkasten.offen{display:flex}
.leuchtkasten img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.leuchtkasten p{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;margin:0;font-weight:500}
.leuchtkasten button{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.leuchtkasten button svg{width:22px;height:22px}
.leuchtkasten button:hover{background:rgba(255,255,255,.2)}
.lk-zu{top:16px;right:16px}
.lk-zurueck{left:12px;top:50%;margin-top:-26px}
.lk-vor{right:12px;top:50%;margin-top:-26px}

/* Projekt-Highlight */
.projekt{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.projekt-bilder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.projekt-bilder a:first-child{grid-column:1/-1}
.projekt-bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.fakten{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 28px}
.fakten span{padding:10px 16px;border-radius:12px;background:var(--glas);border:1px solid var(--glas-rand);color:#fff;font-size:15px}
.fakten b{color:var(--glow)}

/* Über uns */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.zwei img{border-radius:var(--r);width:100%}
.werte{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.punkte{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:12px}
.punkte li{padding-left:34px;position:relative}
.punkte li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--verlauf) ;mask:none}
.punkte li::after{content:"";position:absolute;left:7px;top:8px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Seitenkopf Unterseiten */
.seitenkopf{padding:120px 0 90px}
.seitenkopf.mit-bild{background:center/cover no-repeat}
.seitenkopf.mit-bild::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,32,27,.55),rgba(3,32,27,.95))}
.seitenkopf h1{max-width:16em}
.seitenkopf p{font-size:1.15rem;max-width:40em}

/* FAQ */
.suche{position:relative;margin-bottom:34px}
.suche input{width:100%;font:inherit;font-size:1.1rem;padding:18px 20px 18px 54px;min-height:60px;border-radius:999px;border:1px solid var(--linie);background:#fff}
.suche svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--text-2)}
.suche-leer{color:var(--text-2)}
.faq h2{font-size:1.5rem;font-weight:700;color:var(--petrol);margin:44px 0 14px}
.faq details{background:#fff;border:1px solid var(--linie);border-radius:14px;margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--lime);box-shadow:0 10px 30px -18px rgba(11,89,76,.5)}
.faq summary{cursor:pointer;padding:18px 56px 18px 22px;font-weight:500;list-style:none;position:relative;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border:solid var(--gruen);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 22px 18px;margin:0;color:var(--text-2)}

/* Formulare */
.formular{max-width:820px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld.voll{grid-column:1/-1}
.feld label,.gruppe legend{font-weight:500}
.feld input,.feld textarea,.feld select{font:inherit;color:var(--text);background:#fff;border:1px solid #A9B9B5;border-radius:12px;padding:13px 16px;min-height:52px;width:100%}
.feld textarea{min-height:140px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:3px solid rgba(106,191,23,.45);outline-offset:0;border-color:var(--petrol)}
.hinweis{font-size:14px;color:var(--text-2)}
.zustimmung{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.zustimmung input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--petrol)}
.pflicht{grid-column:1/-1;font-size:14px;color:var(--text-2);margin:0}
.formular .btn[type=submit]{margin-top:10px}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{border-radius:14px;padding:16px 20px;margin-bottom:24px;font-weight:500}
.meldung.ok{background:#E3F2D3;color:#2E5508}
.meldung.fehler{background:#FDE3E2;color:#8A0906}
.formkarte{background:#fff;border-radius:24px;padding:40px;box-shadow:0 30px 80px -40px rgba(3,32,27,.45);border:1px solid var(--linie)}

/* Zaun-Planer */
.planer{max-width:920px;margin:0 auto}
.planer-fortschritt{display:flex;gap:6px;margin-bottom:28px}
.planer-fortschritt i{flex:1;height:6px;border-radius:3px;background:var(--linie);transition:background .3s}
.planer-fortschritt i.an{background:var(--verlauf)}
.planer-status{font-size:14px;color:var(--text-2);margin:-16px 0 24px}
.schritt{border:0;margin:0 0 34px;padding:0}
.schritt>legend{font:300 clamp(1.6rem,3vw,2.2rem)/1.2 Raleway,sans-serif;color:var(--text);margin-bottom:6px;padding:0}
.schritt>legend b{font-weight:700}
.schritt>p{color:var(--text-2);margin-bottom:22px}
.js .planer .schritt{display:none}
.js .planer .schritt.aktiv{display:block;animation:rein .4s ease}
@keyframes rein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.wahl label{position:relative;cursor:pointer;display:block}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl .k{display:flex;flex-direction:column;height:100%;border-radius:16px;border:2px solid var(--linie);background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.wahl img{aspect-ratio:4/3;object-fit:cover;width:100%}
.wahl .k span{padding:12px 14px;font-weight:500;line-height:1.3}
.wahl .k small{display:block;color:var(--text-2);font-weight:400;font-size:14px;margin-top:2px}
.wahl label:hover .k{border-color:#9FD06A;transform:translateY(-2px)}
.wahl input:checked+.k{border-color:var(--lime);box-shadow:0 0 0 4px rgba(106,191,23,.2)}
.wahl input:checked+.k::after{content:"";position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.wahl input:focus-visible+.k{outline:3px solid var(--lime);outline-offset:3px}
.wahl.text .k{justify-content:center;min-height:72px}
.laenge{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.laenge input[type=range]{width:100%;accent-color:var(--lime);height:44px}
.laenge output{font:300 2.6rem/1 Raleway,sans-serif;color:var(--petrol);min-width:4.5ch;text-align:right}
.laenge output small{font-size:1rem;color:var(--text-2)}
.planer-nav{display:flex;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.nur-js{display:none}
.js .nur-js{display:inline-flex}
.js .ohne-js{display:none}
.zusammenfassung{background:var(--mint);border-radius:16px;padding:20px 22px;margin-bottom:24px}
.zusammenfassung dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.zusammenfassung dt{color:var(--text-2)}
.zusammenfassung dd{margin:0;font-weight:500}

/* Karte zum Messen */
.messen{margin-top:18px;border:1px dashed #A9B9B5;border-radius:16px;padding:18px}
.messen[hidden]{display:none}
.karte{height:420px;border-radius:12px;overflow:hidden;margin-top:12px;background:var(--mint)}
.karte-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.karte-zeile input{flex:1 1 220px;font:inherit;padding:12px 14px;min-height:48px;border:1px solid #A9B9B5;border-radius:12px}
.messwert{font-weight:700;color:var(--petrol)}

/* Fotos hochladen */
.fotos{border:2px dashed #A9B9B5;border-radius:16px;padding:22px;text-align:center;background:#fff;transition:border-color .2s,background .2s}
.fotos.drueber{border-color:var(--lime);background:#F4FBEC}
.fotos input{display:block;margin:12px auto 0;max-width:100%}
.vorschau{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.vorschau img{width:86px;height:86px;object-fit:cover;border-radius:10px}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:start}
.direkt{display:grid;gap:14px}
.direkt a,.direkt div{display:flex;gap:14px;align-items:center;padding:20px;border-radius:16px;background:var(--glas);border:1px solid var(--glas-rand);color:#fff;text-decoration:none}
.direkt a:hover{background:rgba(255,255,255,.1)}
.direkt svg{width:26px;height:26px;color:var(--glow);flex:none}
.direkt small{display:block;color:var(--auf-dunkel-2);font-size:14px}

/* Rechtstexte */
.recht h2{font:700 1.4rem Raleway,sans-serif;color:var(--petrol);margin-top:1.8em}
.recht address{font-style:normal;margin-bottom:1em}

/* Schlussaufruf */
.aufruf{text-align:center}
.aufruf h2{max-width:14em;margin-left:auto;margin-right:auto}

/* Fuß */
footer.fuss{background:#021512;color:var(--auf-dunkel-2);font-size:15px;padding:64px 0 28px}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:40px}
.fuss-logo{display:inline-block;background:#fff;border-radius:14px;padding:10px 14px;margin-bottom:16px}
.fuss-logo img{width:150px}
footer.fuss h2{font:700 14px Roboto,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px}
footer.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer.fuss a{color:#fff;text-decoration:none;display:inline-block;padding:10px 0}
footer.fuss a:hover{color:var(--glow)}
.fuss-unten{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* Leiste unten am Handy */
.handy-leiste{display:none}


@media (max-width:1080px){
  nav.haupt a{padding:10px 10px;font-size:14.5px}
  .tel-link span{display:none}
}
@media (max-width:960px){
  :root{--kopf:72px}
  .logo img{width:140px}
  .menue-knopf{display:block}
  nav.haupt{display:none}
  /* absolut statt fixed: der Glas-Effekt (backdrop-filter) im Kopf würde fixed auf die Kopfhöhe begrenzen */
  .kopf .wrap{position:static}
  .menue-knopf[open]~nav.haupt{display:block;position:absolute;left:0;right:0;top:100%;height:calc(100vh - var(--kopf));height:calc(100dvh - var(--kopf));background:#fff;border-top:1px solid var(--linie);overflow:auto}
  .menue-knopf[open]~nav.haupt ul{flex-direction:column;padding:20px 22px;gap:6px}
  nav.haupt a{font:300 1.8rem Raleway,sans-serif;padding:12px 16px;border-radius:14px}
  .kopf-aktion .btn{display:none}
  .hero .wrap,.planer-teaser,.projekt,.zwei,.kontakt-raster,.zitat{grid-template-columns:1fr}
  .hero .wrap{gap:28px;padding-top:80px;padding-bottom:70px}
  .bento{grid-template-columns:1fr 1fr}
  .k-gross,.k-3{grid-column:1/-1}
  .k-2{grid-column:span 1}
  .ablauf{grid-template-columns:1fr 1fr;row-gap:36px}
  .werte{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-raster>div:first-child{grid-column:1/-1}
  section{padding:76px 0}
  .zitat img{width:160px;height:190px}
  .handy-leiste{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:45;padding:8px;border-radius:999px;background:rgba(3,32,27,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.3);transform:translateY(140%);transition:transform .35s}
  .handy-leiste.da{transform:none}
  .handy-leiste a{min-height:48px;padding:10px 14px;font-size:15px}
  .handy-leiste .btn.glas{border-color:rgba(255,255,255,.2)}
  footer.fuss{padding-bottom:100px}
  .leuchtkasten{padding:60px 8px 70px}
  .lk-zurueck,.lk-vor{top:auto;bottom:10px;margin:0}
  .lk-zurueck{left:12px}.lk-vor{right:12px}
  .leuchtkasten p{bottom:24px;padding:0 76px;font-size:14px}
}
@media (max-width:600px){
  body{font-size:16px}
  .felder{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .k-2{grid-column:1/-1}
  .ablauf{grid-template-columns:1fr}
  .formkarte{padding:24px 18px;border-radius:18px}
  .wahl{grid-template-columns:1fr 1fr}
  .laenge output{font-size:2rem}
  .karte{height:340px}
  .fuss-raster{grid-template-columns:1fr}
  .aktionen .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-bild{transform:none}
}

/* Hintergrundbilder (als Klassen, weil die Sicherheitsregeln keine style-Attribute erlauben) */
.bg-start{background-image:url(/img/hero-start.jpg)}
.bg-tor{background-image:url(/img/bg-tor.jpg)}
.bg-laerche{background-image:url(/img/bg-laerche.jpg)}
.bg-ueber{background-image:url(/img/bg-ueber.jpg)}
.bg-beratung{background-image:url(/img/bg-beratung.jpg)}
.bg-faq{background-image:url(/img/bg-faq.jpg)}
.bg-kontakt{background-image:url(/img/bg-kontakt.jpg)}

[hidden]{display:none!important}
[data-abstand]{margin-top:16px}
[data-mitte]{justify-content:center}
.nur-js-block{display:none}
.js .nur-js-block{display:block}
.hinweis-titel{display:block;margin-bottom:8px}
@media (max-width:600px){
  .hero h1{font-size:2.35rem}
  .hero-bild::after{background:linear-gradient(180deg,rgba(3,32,27,.5) 0%,rgba(3,32,27,.75) 45%,rgba(3,32,27,.96) 100%)}
  .hero .wrap{padding-top:56px}
  h2{font-size:1.9rem}
  section{padding:64px 0}
}
.hero h1{font-size:clamp(2.3rem,5vw,4.2rem)}
.hero-bild::after{background:linear-gradient(180deg,rgba(3,32,27,.35) 0%,rgba(3,32,27,.5) 40%,rgba(3,32,27,.95) 100%),linear-gradient(90deg,rgba(3,32,27,.8),rgba(3,32,27,.2) 70%)}

/* Projekt-Karten (Referenzen) */
.projektliste{display:grid;gap:34px}
.projektkarte{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;background:#fff;border:1px solid var(--linie);border-radius:24px;padding:18px;box-shadow:0 30px 60px -45px rgba(3,32,27,.5)}
.projektkarte.gedreht .pk-medien{order:2}
.pk-medien{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:16/11}
.pk-medien>a,.pk-video{position:relative;overflow:hidden;border-radius:16px;background:var(--mint);display:block}
.pk-medien>a:first-child,.pk-video{grid-row:1/3}
.pk-medien img,.pk-video video{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.pk-medien>a:hover img{transform:scale(1.05)}
.pk-video::after{content:"Video";position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(3,32,27,.6);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pk-text{padding:10px 18px 10px 0}
.projektkarte.gedreht .pk-text{padding:10px 0 10px 18px}
.pk-text h3{font:300 clamp(1.6rem,2.6vw,2.1rem)/1.15 Raleway,sans-serif;color:var(--text);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips span{padding:6px 12px;border-radius:999px;background:rgba(106,191,23,.14);color:var(--petrol);font-size:14px;font-weight:500}
.pk-text p{color:var(--text-2)}
@media (max-width:960px){
  .projektkarte{grid-template-columns:1fr;gap:18px;padding:12px}
  .projektkarte.gedreht .pk-medien{order:0}
  .pk-text,.projektkarte.gedreht .pk-text{padding:4px 10px 12px}
}
.karussell>a{display:block;scroll-snap-align:start;color:inherit;text-decoration:none}
.karussell>a figure{height:100%}
.pk-zitat{margin:0 0 18px;padding:16px 18px;background:var(--hell);border-radius:14px}
.pk-zitat p{margin:0 0 6px;font-style:italic;color:var(--text)}
.pk-zitat cite{font-style:normal;font-size:14px;color:var(--petrol);font-weight:500}

/* Feinschliff (impeccable) */
h3 svg,.k-gross p svg{width:1em;height:1em;vertical-align:-.12em}
::selection{background:rgba(106,191,23,.32);color:inherit}
.dunkel ::selection,.hero ::selection{background:rgba(166,227,90,.4);color:#fff}
input,textarea{caret-color:var(--gruen)}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
html{scrollbar-color:var(--petrol) var(--mint)}
.ohne-leiste .handy-leiste{display:none}
.ohne-leiste footer.fuss{padding-bottom:28px}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}