/* DW Interieur Construction — Entwurf V1
   Mood: hell/Corporate · CI aus dem Logo (Blau #01AEFE, Grau #646465)
   Engine: GSAP + ScrollTrigger + SplitText + Lenis (assets/js/main.js) */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/montserrat-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-var.woff2) format('woff2')}

:root{
  /* CI — hier tauschen */
  --blau:#01AEFE;
  --blau-tief:#0076B4;      /* Textlinks auf Weiß, Kontrast ≥ 4,5:1 */
  --blau-hell:#E6F5FD;
  --blau-gross:#0099E0;     /* Logo-Blau für große Schrift auf Weiß, Kontrast ≥ 3:1 */
  --blau-zart:#BFE9FF;      /* Akzent auf Grau, Kontrast ≥ 4,5:1 */
  --grau:#646465;           /* Logo-Grau */
  --grau-tief:#4B4B4D;
  --grau-nacht:#39393B;
  --tinte:#2E2E30;
  --text:#454548;
  --text-leise:#646465;
  --grund:#F5F7FA;          /* Seitengrund wie Borgartz (hell-bg), Wunsch Akis 23.09.2026 – vorher #FDFDFD */
  --flaeche:#EBEEF3;        /* Wechselabschnitte: eine Stufe dunkler, gleicher kühler Ton wie --grund */
  --linie:#DEDEE0;
  --nacht:#39393B;
  --weiss:#FFFFFF;

  --kopf:'Montserrat',system-ui,sans-serif;
  --lauf:'Inter',system-ui,sans-serif;

  --r:12px;
  --r-k:8px;
  /* Hausform: drei Ecken rund, unten rechts eckig */
  --form:var(--r) var(--r) 0 var(--r);
  --form-k:var(--r-k) var(--r-k) 0 var(--r-k);
  --rand:clamp(1.25rem,4vw,3.5rem);
  --breite:82rem;
  --abschnitt:clamp(4.5rem,9vw,8.5rem);
  --kopfhoehe:76px;
  --ease:cubic-bezier(.2,.75,.35,1);

  /* Ebenen */
  --z-kopf:100; --z-menue:90; --z-mobilcta:80; --z-skip:200;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopfhoehe) + 1rem)}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--lauf);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--blau-tief);text-underline-offset:.2em}
a:hover{color:var(--tinte)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:var(--form-k)}
h1,h2,h3,h4{font-family:var(--kopf);color:var(--tinte);margin:0;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(2.05rem,4.7vw,3.85rem);font-weight:700;line-height:1.07;letter-spacing:-.022em}
h2{font-size:clamp(1.65rem,3.1vw,2.7rem);font-weight:700;line-height:1.12;letter-spacing:-.018em}
h3{font-size:clamp(1.12rem,1.5vw,1.3rem);font-weight:650;line-height:1.3;letter-spacing:-.005em}
p{margin:0 0 1.1em;max-width:66ch}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:absolute;left:1rem;top:-5rem;z-index:var(--z-skip);background:var(--tinte);color:var(--weiss);padding:.8rem 1.1rem;border-radius:var(--form-k)}
.skip:focus{top:1rem;color:var(--weiss)}

.huelle{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:var(--abschnitt)}
.abschnitt--flaeche{background:var(--flaeche)}
.abschnitt--grau{background:var(--grau);color:rgba(255,255,255,.93)}
.abschnitt--grau h2,.abschnitt--grau h3,.abschnitt--grau strong{color:var(--weiss)}
.abschnitt--grau p,.abschnitt--grau .lead,.abschnitt--grau li{color:rgba(255,255,255,.93)}   /* Fließtext auf Logo-Grau immer weiß (Kundin 22.09.2026) */
.abschnitt--grau .marke-zeile{color:var(--weiss)}
.abschnitt--grau .ablauf__linie{background:rgba(255,255,255,.28)}
.abschnitt--grau .ablauf li::before{background:var(--grau);color:var(--weiss)}
.abschnitt--grau .weitere a{color:var(--weiss);border-color:rgba(255,255,255,.28)}
.abschnitt--grau .weitere a:hover{color:var(--blau-zart)}
.abschnitt--grau .weitere a span{color:var(--blau-zart)}
.abschnitt--grau .weitere a:last-child,.abschnitt--grau .weitere a:nth-last-child(2){border-color:rgba(255,255,255,.28)}
.lead{font-size:clamp(1.1rem,1.35vw,1.25rem);line-height:1.6;color:var(--text)}

/* Logo-Motiv: gesperrte Versalien zwischen zwei Linien */
.marke-zeile{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--kopf);font-weight:600;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grau);margin:0 0 1.4rem}
.marke-zeile::before{content:"";width:2.4rem;height:2px;background:var(--blau)}

/* offene Angaben im Entwurf sichtbar markieren */
mark.offen{background:#FFF1B8;color:#4A3B00;padding:.05em .35em;border-radius:var(--form-k);font-style:normal}

/* ---------- Knöpfe ---------- */
.knopf{--bg:var(--blau);--fg:var(--tinte);display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.1rem;padding:.85rem 1.5rem;border:1.5px solid var(--bg);border-radius:var(--form-k);background:var(--bg);color:var(--fg);font-family:var(--kopf);font-weight:650;font-size:.93rem;letter-spacing:.01em;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease)}
.knopf:hover{--bg:var(--grau);--fg:var(--weiss);color:var(--fg)}
.knopf:active{transform:translateY(1px) scale(.99)}
.knopf svg{width:1.05rem;height:1.05rem;flex:none;transition:transform .35s var(--ease)}
.knopf:hover svg{transform:translateX(4px)}
.knopf--linie{--bg:transparent;--fg:var(--tinte);border-color:var(--grau)}
.knopf--linie:hover{--bg:var(--grau);--fg:var(--weiss)}
.knopf--dunkel{--bg:var(--grau-nacht);--fg:var(--weiss)}
.knopf--dunkel:hover{--bg:var(--weiss);--fg:var(--tinte)}
.knopf--hell-linie{--bg:transparent;--fg:var(--weiss);border-color:rgba(255,255,255,.55)}
.knopf--hell-linie:hover{--bg:var(--weiss);--fg:var(--tinte);border-color:var(--weiss)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem}
.textlink{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;font-family:var(--kopf);font-weight:650;font-size:.93rem;color:var(--tinte);text-decoration:none;border-bottom:2px solid var(--blau);padding-bottom:.1rem}
.textlink svg{width:1rem;height:1rem;transition:transform .35s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ---------- Kopf / Navigation ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:var(--z-kopf);height:var(--kopfhoehe);background:rgba(245,247,250,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.kopf.ist-gescrollt{border-color:var(--linie);box-shadow:0 8px 30px -22px rgba(30,45,60,.5)}
.kopf__innen{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.kopf__logo{display:flex;align-items:center;gap:.9rem;min-height:44px;text-decoration:none}
.kopf__logo img{height:46px;width:auto}
.kopf__wort{display:grid;font-family:var(--kopf);font-weight:600;font-size:.66rem;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--grau)}
@media (min-width:520px){.kopf__wort{display:block;font-size:.7rem}.kopf__wort span+span::before{content:" "}}
@media (min-width:1080px) and (max-width:1519px){.kopf__wort{display:none}}
@media (min-width:1520px){.kopf__wort{display:grid}.kopf__wort span+span::before{content:none}}
.kopf__logo .logo-neg{display:none}
.js .kopf[data-dunkel]:not(.ist-hell):not(.menue-offen){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent;box-shadow:none}
.js .kopf[data-dunkel]:not(.ist-hell):not(.menue-offen) .logo-neg{display:block}
.js .kopf[data-dunkel]:not(.ist-hell):not(.menue-offen) .logo-pos{display:none}
.js .kopf[data-dunkel]:not(.ist-hell):not(.menue-offen) .kopf__wort,.js .kopf[data-dunkel]:not(.ist-hell):not(.menue-offen) .nav__link{color:var(--weiss)}
.js .kopf[data-dunkel]:not(.ist-hell):not(.menue-offen) .burger span{background:var(--weiss)}
.nav{display:none}
.nav__liste{display:flex;align-items:center;gap:clamp(.2rem,1.2vw,1.4rem)}
.nav__link{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;min-height:44px;padding:.3rem .5rem;background:none;border:0;font-family:var(--kopf);font-weight:550;font-size:.92rem;color:var(--tinte);text-decoration:none;cursor:pointer;position:relative}
.nav__link::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.35rem;height:2px;background:var(--blau);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after,.nav__link[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__link svg{width:.7rem;height:.7rem;transition:transform .3s var(--ease)}
.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Mega-Menü: öffnet bündig ab dem linken Rand von „Leistungen" und läuft nach rechts bis zur Knopfkante (Breite setzt main.js) */
.nav__punkt{position:static}
.nav{position:relative}
.nav__panel{position:absolute;top:calc(100% + 16px);left:.5rem;width:min(60rem,72vw);background:var(--weiss);border:1px solid var(--linie);border-top:3px solid var(--blau);border-radius:0 0 0 var(--r);box-shadow:0 40px 80px -36px rgba(40,40,44,.45),0 12px 24px -18px rgba(40,40,44,.25);padding:clamp(.8rem,1.4vw,1.3rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:.35rem;opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);transition:opacity .25s,clip-path .5s var(--ease),visibility .5s}
.nav__panel::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.nav__punkt.ist-offen .nav__panel{opacity:1;visibility:visible;clip-path:inset(0 -5% -20% -5%)}
.mega__punkt{display:grid;grid-template-columns:4rem 1fr;gap:.9rem;align-items:center;min-height:5rem;padding:.5rem;border-radius:var(--form-k);color:var(--tinte);text-decoration:none;opacity:0;transform:translateY(10px);transition:background .2s,opacity .4s var(--ease),transform .5s var(--ease)}
.nav__punkt.ist-offen .mega__punkt{opacity:1;transform:none;transition-delay:0s,calc(var(--i) * 35ms + 80ms),calc(var(--i) * 35ms + 80ms)}
.mega__punkt:hover,.mega__punkt[aria-current="page"]{background:var(--flaeche)}
.mega__bild{display:block;width:4rem;height:4rem;overflow:hidden;border-radius:var(--form-k);background:var(--flaeche)}
.mega__bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mega__punkt:hover .mega__bild img{transform:scale(1.1)}
.mega__text{display:grid;gap:.15rem}
.mega__nr{font-family:var(--kopf);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau-tief);font-variant-numeric:tabular-nums}
.mega__text strong{font-family:var(--kopf);font-weight:600;font-size:.9rem;line-height:1.3;color:var(--tinte);hyphens:auto}
.mega__punkt--projekte{background:var(--grau)}
.mega__punkt--projekte .mega__nr{color:var(--blau-zart)}
.mega__punkt--projekte strong{color:var(--weiss)}
.mega__punkt--projekte:hover,.mega__punkt--projekte[aria-current="page"]{background:var(--grau-tief)}
@media (prefers-reduced-motion:reduce){.mega__punkt{opacity:1;transform:none}.nav__panel{clip-path:none}}
.kopf__cta{display:none}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:48px;height:48px;padding:12px;background:none;border:0;cursor:pointer}
.burger span{display:block;height:2px;background:var(--tinte);transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.menue{position:fixed;inset:var(--kopfhoehe) 0 0 0;z-index:var(--z-menue);background:var(--grund);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:1.5rem var(--rand) 7rem;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility .55s}
.menue.ist-offen{clip-path:inset(0 0 0 0);visibility:visible}
.menue__titel{font-family:var(--kopf);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin:1.4rem 0 .4rem}
.menue a{display:flex;gap:.9rem;align-items:baseline;min-height:48px;padding:.75rem 0;border-bottom:1px solid var(--linie);font-family:var(--kopf);font-weight:600;font-size:1.02rem;line-height:1.3;color:var(--tinte);text-decoration:none}
.menue a span{color:var(--blau-tief);font-size:.8rem;font-weight:700;min-width:1.4rem}
.menue .knopf{margin-top:1.6rem;width:100%;border-bottom:1.5px solid var(--blau)}

@media (min-width:1080px){
  .nav{display:block}.kopf__cta{display:inline-flex}.burger,.menue{display:none}
}

main{padding-top:var(--kopfhoehe)}

/* ---------- Hero: Text links auf Weiß, Bild rechts mit weicher Kante ----------
   Der Text steht ohne JavaScript im Quelltext und ist sofort sichtbar (Suchmaschinen, LCP).
   Bewegung gibt es nur als leichte Fahrt auf dem Bild – nichts, was Text verdeckt. */
.hero2{position:relative;background:var(--grund);overflow:clip;min-height:calc(100dvh - var(--kopfhoehe));display:flex;align-items:center;padding-block:clamp(2rem,5vh,4rem)}
.hero2__bild{position:absolute;inset:0 0 0 auto;width:min(62%,64rem);z-index:0;pointer-events:none}
.hero2__bild::after{content:none}
/* Weiche Kante nur am linken Rand, streng waagerecht (bei schrägem Winkel bliebe am linken Rand oben/unten ein sichtbarer Streifen): das Bild trägt den Übergang Rohbau→fertig selbst, der Verlauf
   darf ihn nicht wegblenden, deshalb ist er kürzer als die Maske der Doppelbelichtung zuvor. */
.hero2__bild{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 14%,rgba(0,0,0,.8) 23%,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.46) 14%,rgba(0,0,0,.8) 23%,#000 34%)}
.hero2__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;will-change:transform}
/* Dachlinie als feine Zeichnung über dem Bild */
.hero2__dach{position:absolute;z-index:2;right:clamp(1.5rem,4vw,4.5rem);top:clamp(2rem,8vh,5rem);width:clamp(14rem,30vw,30rem);height:auto;overflow:visible;pointer-events:none;filter:drop-shadow(0 6px 22px rgba(20,20,25,.6))}
/* Desktop: das Logo wird am Übergang Weiß → Bild nachgebaut. Der senkrechte Logo-Balken (links neben dem D)
   steht in der weichen Kante, das Dach setzt in Logo-Proportion darauf auf. Maße in Anteilen der Dachbreite:
   Balkenmitte bei 29,6 %, Balkenbreite 4,8 %, Balkenoberkante 17 % unter dem First (verschwindet im blauen Dachbalken). */
.hero2{--bildb:min(62%,64rem);--dw:clamp(17rem,34vw,32rem);--dtop:clamp(3.5rem,8vh,6rem);--stabx:calc(max(calc(100% - var(--bildb) + var(--bildb) * .06),calc(max((100% - var(--breite)) / 2,0px) + var(--rand) + 30rem + 1.25rem + var(--dw) * .0238)) + var(--versatz,0px))}
/* --stabx (Balkenmitte): am Beginn des Übergangs, mindestens 1,25rem rechts der Textspalte (Knöpfe und Fließtext enden bei 30rem).
   --versatz setzt main.js: so weit nach rechts wie nötig, damit der volle Dachüberstand die Überschrift nicht berührt.
   Ohne JavaScript gilt ein fester, sicherer Versatz. */
html:not(.js) .hero2{--versatz:8rem}
@media (min-width:1200px){.hero2__punkte{max-width:30rem}}
/* Kein Aufblitzen beim Laden: Dachbalken und Logo-Balken sind unsichtbar, bis main.js sie zeichnet bzw. einblendet.
   Bei reduzierter Bewegung oder ohne GSAP setzt main.js/der Kopf „bewegung-aus“ – dann steht alles sofort da. */
.js:not(.bewegung-aus) .hero2 [data-wisch]{stroke-dasharray:2000;stroke-dashoffset:2000}
.js:not(.bewegung-aus) .hero2__stab{transform:scaleY(0)}   /* wächst beim Scrollen von unten (main.js) */
.hero2__logo-dach,.hero2__stab{position:absolute;z-index:2;pointer-events:none;transition:none!important}  /* ohne Übergang: main.js misst die Lage direkt nach dem Setzen */
.hero2__logo-dach{top:var(--dtop);left:calc(var(--stabx) - var(--dw) * .2958);width:var(--dw);height:auto;overflow:visible;filter:drop-shadow(0 4px 14px rgba(20,20,25,.22))}
.hero2__stab{left:calc(var(--stabx) - var(--dw) * .0238);width:calc(var(--dw) * .0476);top:calc(var(--dtop) + var(--dw) * .17);bottom:0;background:var(--blau);transform-origin:50% 100%}
.hero2__dach{display:none}
/* Schmale Desktops (900–1199 px): die Überschrift läuft dort breiter als 30rem – der Balken hält Abstand zur ganzen Textspalte. */
@media (min-width:900px) and (max-width:1199px){.hero2{--stabx:calc(var(--rand) + 34rem + 1.25rem + var(--dw) * .0238 + var(--versatz,0px))}}
.hero2__innen{position:relative;z-index:1;width:100%}
.hero2__text{max-width:34rem}
.hero2__text .marke-zeile{margin-bottom:1.1rem}
.hero2 h1{margin-bottom:1.2rem}
.hero2 h1 span{color:var(--blau-gross)}
.hero2 .lead{margin-bottom:1.8rem;max-width:30rem}
.hero2__punkte{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linie);font-family:var(--kopf);font-weight:550;font-size:.88rem;color:var(--tinte)}
.hero2__punkte li{display:flex;align-items:center;gap:.6rem}
.hero2__punkte li::before{content:"";width:.95rem;height:.55rem;border-left:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);transform:rotate(-45deg) translateY(-2px);flex:none}
@media (max-width:899px){
  /* Handy: erst das Bild, darunter der Text (Akis 23.09.2026). Das Bild läuft unten weich in den Grund aus. */
  .hero2{min-height:0;padding-block:0 clamp(1.5rem,4vh,2.5rem);flex-direction:column;align-items:stretch}
  .hero2__bild{position:relative;inset:auto;width:100%;height:78vw;max-height:30rem;margin:0;order:1}
  .hero2__bild{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 24%);mask-image:linear-gradient(0deg,transparent 0,#000 24%)}
  /* Handy: das Logo-Dach sitzt unten am Bildrand direkt über der Überschrift, bündig mit der Textspalte (Akis 23.09.2026).
     Es liegt außerhalb der Bildmaske – das Dach im Bild selbst (.hero2__dach) würde dort ausgeblendet. */
  .hero2__dach,.hero2__stab{display:none}
  .hero2__logo-dach{--mdw:min(62vw,17rem);left:var(--rand);width:var(--mdw);top:calc(min(78vw,30rem) - var(--mdw) * .2833 - .1rem);filter:none}
  .hero2__innen{order:2;margin-top:.6rem}   /* Luft unter dem Logo-Dach am Bildrand */
  .hero2__text{max-width:none}
}
@media (prefers-reduced-motion:reduce){.hero2__foto{transform:none!important}}

/* ---------- Bad-Bildfolge: zehn Zustände, beim Scrollen überblendet ----------
   Alle Bilder liegen deckungsgleich übereinander. Ohne JavaScript und bei reduzierter Bewegung
   liegt das letzte (fertige Bad) oben und die Marke zeigt „10 / 10“ – main.js setzt beim Start auf Stufe 1. */
.badfolge{--bad-b:min(58rem,calc((100svh - var(--kopfhoehe) - 16.5rem) * 16 / 9));padding-bottom:0}   /* folgt ein weißer Abschnitt: dessen Innenabstand reicht, sonst doppelter Weißraum */
@media (max-width:899px){.badfolge{--bad-b:none}}
/* niedrige Desktop-Bildschirme: Kopf kompakter, damit Kopf + Bühne unter der Kopfzeile Platz haben */
@media (min-width:900px) and (max-height:859px){
  .badfolge{--bad-b:min(58rem,calc((100svh - var(--kopfhoehe) - 15.75rem) * 16 / 9))}
  .badfolge__kopf{gap:.35rem;margin-bottom:1rem}
  .badfolge__kopf h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
  .badfolge__kopf .lead{font-size:.95rem}
}
.badfolge__kopf{max-width:var(--bad-b);margin-inline:auto;margin-bottom:clamp(1.25rem,2.5vw,2rem);gap:.6rem}
.badfolge__kopf .lead{max-width:40rem;margin:0}
/* Überschrift und Bühne werden gemeinsam angeheftet – beides muss unter der Kopfzeile auf einen Bildschirm passen */
.badfolge__halter{padding-block:.5rem}
.badfolge__buehne{position:relative;max-width:var(--bad-b);margin-inline:auto;aspect-ratio:16/9;overflow:hidden;border-radius:var(--form);background:var(--flaeche);isolation:isolate}
.badfolge__buehne img,.badfolge__leinwand{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Film-Fassung: die Leinwand liegt über dem Standbild, sobald das erste Bild gezeichnet ist */
.badfolge__leinwand{display:block;opacity:0;transition:opacity .4s}
.badfolge__buehne.ist-film .badfolge__leinwand{opacity:1}
.badfolge__marke{position:absolute;left:clamp(.75rem,2vw,1.25rem);bottom:clamp(.9rem,2.2vw,1.5rem);z-index:2;display:flex;align-items:baseline;gap:.45rem;margin:0;padding:.55rem .95rem .6rem;
  background:rgba(253,253,253,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--form-k);font-family:var(--kopf);box-shadow:0 6px 24px rgba(20,20,25,.12)}
.badfolge__nr{font-weight:750;font-size:1.05rem;color:var(--blau-gross);font-variant-numeric:tabular-nums}
.badfolge__von{font-weight:600;font-size:.8rem;color:var(--text-leise);font-variant-numeric:tabular-nums}
.badfolge__text{margin-left:.35rem;font-weight:600;font-size:.9rem;color:var(--tinte)}
.badfolge__balken{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:rgba(255,255,255,.4)}
.badfolge__balken span{display:block;height:100%;background:var(--blau);transform-origin:left center}
.badfolge__hinweis{max-width:var(--bad-b);margin:.8rem auto 0;font-size:.8rem;color:var(--text-leise)}
.badschritte{list-style:none;margin:clamp(2.5rem,5vw,4rem) auto 0;padding:0;max-width:var(--bad-b);display:grid;gap:2rem 1.75rem;grid-template-columns:minmax(0,1fr);counter-reset:bad}
@media (min-width:600px){.badschritte{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* fünf Spalten nur, wenn die Bühne (und damit --bad-b) volle Breite hat – auf niedrigen Bildschirmen wird sie schmaler */
@media (min-width:1100px) and (min-height:860px){.badschritte{grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem 1.25rem}}
.badschritte li{position:relative;padding-top:3.1rem;counter-increment:bad;min-width:0}
/* volle Ziffern statt Kontur: die Montserrat-Konturen überlappen sich innen sichtbar */
.badschritte li::before{content:counter(bad,decimal-leading-zero);position:absolute;left:0;top:-.1rem;font-family:var(--kopf);font-weight:700;font-size:2.3rem;line-height:1;color:var(--blau);font-variant-numeric:tabular-nums}
.badschritte__stufen{display:block;margin-bottom:.35rem;font-family:var(--kopf);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise)}
.badschritte h3{font-size:1.08rem;margin-bottom:.45rem}
.badschritte p{margin:0;font-size:.95rem}
@media (max-width:899px){
  /* Handy: Bühne randlos über die ganze Breite (Akis 23.09.2026) – Überschrift und Hinweis bleiben in der Textspalte */
  .badfolge__buehne{aspect-ratio:4/3;max-width:none;margin-inline:calc(-1 * var(--rand));border-radius:0}
  .badfolge__marke{left:var(--rand)}
  .badfolge__text{font-size:.82rem}
}

/* ---------- Bad-Bildfolge am Desktop als Vollbild (Akis 23.09.2026, nach Prototyp prototyp-bad-vollbild.html) ----------
   Die Bühne füllt die ganze Breite und die Höhe unter der Kopfzeile. Überschrift, Hinweis und Stufenmarke liegen
   als Overlay auf dem Bild; ein heller Schleier oben hält die Überschrift lesbar. Handy: eingebettete Fassung wie oben. */
.badfolge__schleier{display:none}
@media (min-width:900px){
  .badfolge{--bad-b:64rem;--bad-links:max(var(--rand),calc((100% - var(--breite)) / 2 + var(--rand)));padding-top:0}
  .badfolge__halter{padding:0}
  .badfolge__halter > .huelle{position:relative;max-width:none;padding:0}
  .badfolge__buehne{max-width:none;width:100%;height:calc(100svh - var(--kopfhoehe));min-height:30rem;aspect-ratio:auto;border-radius:0;background:var(--grau-nacht)}
  .badfolge__schleier{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(245,247,250,.95) 0%,rgba(245,247,250,.84) 22%,rgba(245,247,250,.5) 34%,rgba(245,247,250,0) 48%),
               linear-gradient(0deg,rgba(20,20,25,.34) 0%,rgba(20,20,25,0) 24%)}
  .badfolge__kopf{position:absolute;z-index:2;top:clamp(1.25rem,4vh,3rem);left:var(--bad-links);right:var(--rand);max-width:40rem;margin:0}
  .badfolge__kopf h2{max-width:22ch}
  .badfolge__marke{left:var(--bad-links);bottom:clamp(1.25rem,4vh,2.5rem);padding:.6rem 1rem .65rem}
  .badfolge__nr{font-size:1.15rem}
  .badfolge__text{font-size:.95rem}
  .badfolge__balken{height:5px}
  /* Hinweis klein unten rechts auf dem dunklen Verlauf */
  .badfolge__hinweis{position:absolute;z-index:2;right:var(--bad-links);bottom:clamp(1.4rem,4vh,2.7rem);max-width:24rem;margin:0;text-align:right;
    color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.45)}
  .badfolge .badschritte{margin-top:clamp(2.5rem,5vw,4rem)}
}
@media (min-width:1100px){.badfolge .badschritte{grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem 1.25rem}}

/* ---------- Wer wir sind ---------- */
.zweier{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center}
.zweier h2{margin-bottom:1.4rem}
.zweier .knopf,.zweier .textlink{margin-top:1.2rem}
.bildrahmen{position:relative;overflow:hidden;background:var(--flaeche);border-radius:var(--form)}
.bildrahmen img{width:100%;height:100%;object-fit:cover}
.bildrahmen--hoch{aspect-ratio:4/5}
.bildrahmen--quer{aspect-ratio:16/10}
.bildpaar{position:relative;padding:0 0 12% 14%}
.bildpaar .bildrahmen:nth-child(2){position:absolute;left:0;bottom:0;width:44%;aspect-ratio:3/4;border:.5rem solid var(--grund)}
.abschnitt--flaeche .bildpaar .bildrahmen:nth-child(2){border-color:var(--flaeche)}
@media (min-width:900px){.zweier{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.zweier--gedreht{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.zweier--gedreht>:first-child{order:2}}

/* ---------- Leistungen als schlanke Kacheln mit Symbol (Wunsch Akis 23.09.2026) ---------- */
.kopfzeile{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.kacheln{display:grid;gap:clamp(.6rem,1.2vw,1rem);grid-template-columns:1fr}
@media (min-width:640px){.kacheln{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kacheln{grid-template-columns:repeat(3,1fr)}}
.lkachel{display:flex}
.lkachel__link{position:relative;display:grid;gap:.45rem;align-content:start;width:100%;padding:clamp(1.1rem,1.8vw,1.5rem);background:var(--weiss);border:1px solid var(--linie);border-radius:var(--form);color:var(--tinte);text-decoration:none;transition:border-color .3s,box-shadow .4s var(--ease),transform .4s var(--ease)}
.lkachel__link:hover{border-color:var(--blau);box-shadow:0 22px 40px -32px rgba(20,60,90,.5);transform:translateY(-2px)}
.lkachel__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.35rem}
.lkachel__symbol{width:2.2rem;height:2.2rem;flex:none;color:var(--blau-tief);fill:currentColor;transition:transform .4s var(--ease)}
.lkachel__link:hover .lkachel__symbol{transform:scale(1.08)}
.lkachel__nr{font-family:var(--kopf);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--text-leise);font-variant-numeric:tabular-nums}
.lkachel h3{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.3}
.lkachel p{font-size:.93rem;line-height:1.5;color:var(--text);margin:0}
.lkachel__pfeil{display:inline-flex;margin-top:.5rem;color:var(--blau-tief)}
.lkachel__pfeil svg{width:1.05rem;height:1.05rem;transition:transform .35s var(--ease)}
.lkachel__link:hover .lkachel__pfeil svg{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.lkachel__link,.lkachel__symbol,.lkachel__pfeil svg{transition:none}}

/* ---------- Markenblock „Aus einer Hand" ---------- */
.block-blau{position:relative;background:var(--blau);color:var(--tinte);overflow:hidden}
.block-blau h2{max-width:20ch;margin-bottom:1.6rem}
.block-blau p{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.5;font-weight:500;color:var(--tinte);max-width:44ch}
.block-blau .knopf{margin-top:2rem}
.block-blau__dach{position:absolute;right:6%;bottom:12%;width:min(38rem,48%);opacity:.24;pointer-events:none}
@media (max-width:899px){.block-blau__dach{bottom:3%;right:4%;width:58%}}
.block-blau__dach polygon{fill:var(--weiss)}
.block-blau .huelle{position:relative}

/* ---------- Zielgruppen ---------- */
.seitlich{display:grid;gap:2.5rem}
.zeilen>li{display:grid;gap:.5rem;padding-block:1.7rem;border-top:1px solid var(--linie)}
.zeilen>li:last-child{border-bottom:1px solid var(--linie)}
.zeilen h3{font-size:clamp(1.25rem,2vw,1.6rem)}
@media (min-width:900px){
  .seitlich{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .seitlich__fest{position:sticky;top:calc(var(--kopfhoehe) + 2.5rem)}
  .zeilen>li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem;padding-block:2.2rem}
}

/* ---------- Ablauf ---------- */
.ablauf{position:relative;display:grid;gap:0;counter-reset:schritt}
.ablauf__linie{position:absolute;left:1.15rem;top:.5rem;bottom:.5rem;width:2px;background:var(--linie)}
.ablauf__linie span{position:absolute;inset:0;background:var(--blau);transform-origin:top;transform:scaleY(1)}
.ablauf li{position:relative;padding:0 0 2.2rem 3.6rem;counter-increment:schritt}
.ablauf li:last-child{padding-bottom:0}
.ablauf li::before{content:counter(schritt);position:absolute;left:0;top:-.1rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;background:var(--weiss);border:2px solid var(--blau);border-radius:50%;font-family:var(--kopf);font-weight:700;font-size:.95rem;color:var(--tinte)}

.ablauf strong{display:block;font-family:var(--kopf);font-weight:650;font-size:1.2rem;color:var(--tinte);margin-bottom:.35rem}
.abschnitt--grau .ablauf strong{color:var(--weiss)}
.ablauf p{font-size:1rem}
@media (min-width:900px){
  .ablauf{grid-template-columns:repeat(4,1fr);gap:2rem}
  .ablauf__linie{left:0;right:0;top:1.15rem;bottom:auto;width:auto;height:2px}
  .ablauf__linie span{transform-origin:left;transform:scaleX(1)}
  .ablauf li{padding:3.6rem 1rem 0 0}
  .ablauf li::before{top:0}
}

/* ---------- Einsatzgebiet-Karte ---------- */
.ringe{width:100%;height:auto;max-width:34rem;margin-inline:auto;display:block;overflow:visible}
.ringe circle.ring{fill:none;stroke:var(--grau);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:3 6}
.ringe circle.ring--kern{fill:var(--blau-hell);stroke:var(--blau);stroke-opacity:1;stroke-dasharray:none}
.ringe .ort circle{fill:var(--grau)}
.ringe .ort text{font-family:var(--kopf);font-weight:550;font-size:13px;fill:var(--tinte)}
.ringe .sitz circle{fill:var(--blau)}
.ringe .sitz text{font-weight:700;font-size:15px}
.ringe .km{font-family:var(--kopf);font-weight:600;font-size:11px;letter-spacing:.12em;fill:var(--text-leise)}
.orte{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.orte li{font-family:var(--kopf);font-weight:550;font-size:.85rem;color:var(--tinte);border:1px solid var(--linie);background:var(--weiss);padding:.4rem .8rem;border-radius:var(--form-k)}
@media (max-width:640px){.ringe .fern{display:none}.ringe .ort text{font-size:17px}.ringe .sitz text{font-size:19px}.ringe .km{font-size:14px}}

/* ---------- Vorher / Nachher ---------- */
.vn{display:grid;gap:1.5rem}
.vn__reiter{display:flex;flex-wrap:wrap;gap:.5rem}
.vn__reiter button{min-height:44px;padding:.55rem 1rem;border:1.5px solid var(--linie);background:var(--weiss);border-radius:var(--form-k);font-family:var(--kopf);font-weight:600;font-size:.86rem;color:var(--tinte);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.vn__reiter button[aria-selected="true"]{background:var(--grau);border-color:var(--grau);color:var(--weiss)}
.vn__buehne{position:relative;width:100%;max-width:34rem;margin-inline:auto;aspect-ratio:3/4;overflow:hidden;background:var(--flaeche);border-radius:var(--form);touch-action:pan-y;user-select:none;--pos:50%}
.vn__buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vn__vorher{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vn__griff{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--weiss);box-shadow:0 0 0 1px rgba(30,35,39,.15);pointer-events:none}
.vn__griff::after{content:"";position:absolute;top:50%;left:50%;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;border-radius:50%;background:var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2327' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/1.5rem no-repeat;box-shadow:0 6px 20px -6px rgba(0,0,0,.5)}
.vn__marke{position:absolute;bottom:.8rem;padding:.3rem .6rem;background:rgba(30,35,39,.78);color:var(--weiss);font-family:var(--kopf);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--form-k);pointer-events:none}
.vn__marke--v{left:.8rem}.vn__marke--n{right:.8rem}
.vn__regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.vn__buehne:has(.vn__regler:focus-visible){outline:3px solid var(--blau);outline-offset:3px}
@media (min-width:900px){.vn--seitlich{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(2.5rem,5vw,5rem)}}

.streifen{display:flex;gap:clamp(.6rem,1.2vw,1rem);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;margin-top:clamp(2.5rem,5vw,4rem);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.streifen figure{flex:none;width:clamp(12rem,22vw,17rem);margin:0;scroll-snap-align:start}
.streifen .bildrahmen{aspect-ratio:3/4}
.streifen figcaption{margin-top:.55rem;font-size:.84rem;color:var(--text-leise)}

/* ---------- Galerie + Großansicht ---------- */
/* Bildausschnitte: Person in den Blick rücken, ohne das Foto selbst zu bearbeiten */
.bildrahmen img.fokus-inhaber{object-position:62% 60%}
.bildrahmen img.fokus-zoom{position:absolute;max-width:none;width:190%;height:190%;left:-68%;top:0}
.galerie__filter{display:flex;flex-wrap:wrap;gap:.5rem}
.galerie__filter button{min-height:44px;padding:.55rem 1rem;border:1.5px solid var(--linie);background:var(--weiss);border-radius:var(--form-k);font-family:var(--kopf);font-weight:600;font-size:.86rem;color:var(--tinte);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.galerie__filter button[aria-pressed="true"]{background:var(--grau);border-color:var(--grau);color:var(--weiss)}
.galerie{display:grid;gap:clamp(1.2rem,2.4vw,2rem)}
.galerie [hidden]{display:none!important}
.galerie__zwischen{font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:650;color:var(--tinte);padding-top:.4rem;border-top:1px solid var(--linie);padding-top:1.2rem}
.galerie__zwischen:first-child{border-top:0;padding-top:0}
.galerie__raster{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1vw,.9rem)}
@media (min-width:600px){.galerie__raster{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.galerie__raster{grid-template-columns:repeat(5,1fr)}}
/* Vorher/Nachher-Reihen: links vorher, rechts nachher */
.serien{display:grid;gap:clamp(1.2rem,2.2vw,1.8rem)}
.serie{display:grid;gap:.6rem}
.serie__titel{font-size:.95rem;font-weight:650;color:var(--tinte)}
.serie__bilder{display:grid;grid-template-columns:repeat(var(--m,2),minmax(0,1fr));gap:clamp(.5rem,1vw,.9rem)}
@media (min-width:700px){.serie__bilder{grid-template-columns:repeat(var(--n),minmax(0,14rem))}}
.serie figure{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem;min-width:0}
.serie .galerie__bild{width:100%}
/* Startseite „Ihr Betrieb" ohne Bilder (Wunsch Kundin 22.09.2026) */
.einspaltig{max-width:46rem}
.einspaltig h2{margin-bottom:1.4rem}
.einspaltig .knopf{margin-top:1.2rem}
.serie__stufe{font-family:var(--kopf);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}
.serie__stufe--nachher{color:var(--blau-tief)}
@media (max-width:699px){.serie__stufe{font-size:.62rem;letter-spacing:.06em;overflow-wrap:anywhere}}
.galerie__bild{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--form);background:var(--flaeche);cursor:zoom-in}
.abschnitt--flaeche .galerie__bild{background:var(--weiss)}
.galerie__bild[hidden]{display:none}
.galerie__bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.galerie__bild:hover img{transform:scale(1.05)}
.galerie__bild::after{content:"";position:absolute;right:.6rem;top:.6rem;width:2rem;height:2rem;border-radius:var(--form-k);background:rgba(46,46,48,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/1.1rem no-repeat;opacity:0;transition:opacity .25s}
.galerie__bild:hover::after,.galerie__bild:focus-visible::after{opacity:1}

.gross{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:rgba(30,30,32,.94);color:var(--weiss)}
.gross::backdrop{background:rgba(30,30,32,.6)}
.gross__innen{position:relative;width:100%;height:100%;display:grid;grid-template-rows:1fr auto;padding:clamp(3.6rem,6vw,4.5rem) clamp(1rem,5vw,5rem) 1rem}
.gross__bild{position:relative;min-height:0}
.gross__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gross__text{display:flex;justify-content:space-between;gap:1.5rem;padding-top:.9rem;font-size:.92rem;color:#D8D8DA}
.gross__zahl{font-family:var(--kopf);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.gross button{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;border:0;border-radius:var(--form-k);background:rgba(255,255,255,.12);color:var(--weiss);cursor:pointer;transition:background .25s}
.gross button:hover{background:var(--blau);color:var(--tinte)}
.gross button svg{width:1.3rem;height:1.3rem}
.gross__zu{top:1rem;right:1rem}
.gross__vor{right:1rem;top:50%;margin-top:-1.5rem}
.gross__zurueck{left:1rem;top:50%;margin-top:-1.5rem}
@media (max-width:700px){.gross__vor,.gross__zurueck{top:auto;bottom:3.6rem;margin:0}.gross__innen{padding-bottom:7.4rem}.gross__text{flex-direction:column;gap:.2rem}}

/* ---------- FAQ ---------- */
.faq details{border-top:1px solid var(--linie)}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:3.5rem;padding:1.2rem 0;cursor:pointer;list-style:none;font-family:var(--kopf);font-weight:650;font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.35;color:var(--tinte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.1rem;height:1.1rem;background:linear-gradient(var(--tinte),var(--tinte)) center/100% 2px no-repeat,linear-gradient(var(--tinte),var(--tinte)) center/2px 100% no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 1.5rem}
.faq .staffel{margin:.2rem 0 1rem;display:grid;gap:.35rem;max-width:26rem}
.faq .staffel li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .8rem;background:var(--flaeche);border-radius:var(--form-k);font-variant-numeric:tabular-nums}
.abschnitt--flaeche .faq .staffel li{background:var(--weiss)}
.faq .staffel li span:last-child{font-weight:650;color:var(--tinte)}

/* ---------- Abschluss-CTA ---------- */
.cta{position:relative;background:var(--flaeche);overflow:hidden}
.cta__innen{display:grid;gap:1.6rem;justify-items:start;max-width:46rem}
.cta h2{max-width:18ch}
.cta__dach{position:absolute;right:7%;top:50%;width:min(28rem,36%);transform:translateY(-50%);opacity:.5;pointer-events:none;overflow:visible}
@media (max-width:899px){.cta__dach{display:none}}

/* ---------- Unterseiten-Kopf ---------- */
/* Brotkrumen: dezent, ohne Hinterlegung – kleines Haus-Symbol, feine Pfeil-Trenner */
.pfad{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .5rem;margin-bottom:1.6rem;font-family:var(--lauf);font-weight:400;font-size:.82rem;color:var(--text-leise)}
.pfad li{display:inline-flex;align-items:center;gap:.55rem;min-width:0}
.pfad a{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;color:var(--text-leise);text-decoration:none;transition:color .2s}
.pfad a:hover{color:var(--blau-tief)}
.pfad li:first-child a::before{content:"";width:.9rem;height:.9rem;flex:none;background:var(--grau);opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%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'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center/contain no-repeat}
.pfad li+li::before{content:"";width:.42rem;height:.42rem;flex:none;border-right:1.5px solid var(--grau);border-top:1.5px solid var(--grau);transform:rotate(45deg);opacity:.45}
.pfad [aria-current="page"]{color:var(--tinte);font-weight:500;overflow-wrap:anywhere}
.ukopf{padding-block:clamp(2rem,4vw,3.5rem) clamp(3rem,6vw,5rem)}
.ukopf__raster{display:grid;gap:2.5rem;align-items:center}
.ukopf h1{font-size:clamp(1.9rem,4vw,3.3rem);margin-bottom:1.4rem}
.ukopf .lead{margin-bottom:1.8rem}
.ukopf__nr{font-family:var(--kopf);font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-bottom:1rem;display:block}
@media (min-width:900px){.ukopf__raster{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem,6vw,6rem)}}
.ukopf--schmal .ukopf__raster{grid-template-columns:1fr}
.ukopf--schmal h1{max-width:22ch}

/* ---------- Leistungsseite: Inhalt ---------- */
.inhalt{display:grid;gap:2.5rem}
.toc{display:none}
.punkt{padding-block:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--linie);display:grid;gap:.8rem}
.punkt h2{font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.22;letter-spacing:-.01em}
.punkt p{font-size:1.05rem}
.einschub{margin:clamp(1rem,2vw,1.6rem) 0 clamp(1.6rem,3vw,2.6rem);display:grid;gap:clamp(.6rem,1.2vw,1rem)}
.einschub--zwei{grid-template-columns:1fr 1fr}
.einschub--hoch{max-width:24rem}
.einschub figure{margin:0}
.einschub figcaption{margin-top:.5rem;font-size:.84rem;color:var(--text-leise)}
@media (min-width:1000px){
  .inhalt{grid-template-columns:minmax(0,3.2fr) minmax(0,7fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .toc{display:block;position:sticky;top:calc(var(--kopfhoehe) + 2rem);max-height:calc(100dvh - var(--kopfhoehe) - 4rem);overflow-y:auto;padding-right:.5rem}
  .toc__titel{font-family:var(--kopf);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-bottom:.9rem}
  .toc a{display:block;padding:.5rem 0 .5rem 1rem;border-left:2px solid var(--linie);font-size:.9rem;line-height:1.35;color:var(--text-leise);text-decoration:none;transition:color .2s,border-color .2s}
  .toc a:hover{color:var(--tinte)}
  .toc a.ist-aktiv{color:var(--tinte);font-weight:600;border-color:var(--blau)}
}

.weitere{display:grid;gap:0}
.weitere a{display:flex;align-items:baseline;gap:1rem;min-height:3.4rem;padding:1rem 0;border-top:1px solid var(--linie);font-family:var(--kopf);font-weight:600;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.3;color:var(--tinte);text-decoration:none;transition:padding-left .35s var(--ease),color .2s}
.weitere a:last-child{border-bottom:1px solid var(--linie)}
.weitere a:hover{padding-left:.8rem;color:var(--blau-tief)}
.weitere a span{color:var(--blau-tief);font-size:.8rem;font-weight:700;min-width:1.6rem;font-variant-numeric:tabular-nums}
@media (min-width:900px){.weitere{grid-template-columns:1fr 1fr;column-gap:3rem}.weitere a:nth-last-child(2){border-bottom:1px solid var(--linie)}}

/* ---------- Über uns ---------- */
.werte{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--form);overflow:hidden}
.werte li{background:var(--weiss);padding:clamp(1.3rem,2.4vw,2rem);display:grid;gap:.5rem;align-content:start}
.werte strong{font-family:var(--kopf);font-weight:650;font-size:1.15rem;color:var(--tinte)}
@media (min-width:700px){.werte{grid-template-columns:1fr 1fr}}
.team{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.person{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;padding:clamp(1.3rem,2.4vw,2rem);background:var(--weiss);border:1px solid var(--linie);border-radius:var(--form)}
.person__kuerzel{width:4rem;height:4rem;display:grid;place-items:center;background:var(--blau-hell);color:var(--blau-tief);font-family:var(--kopf);font-weight:700;font-size:1.2rem;letter-spacing:.04em;border-radius:var(--form-k)}
.person h3{font-size:1.25rem;margin-bottom:.3rem}
.person p{font-size:.98rem}
@media (min-width:800px){.team{grid-template-columns:1fr 1fr}}
.liste-haken{display:grid;gap:.5rem}
.liste-haken li{position:relative;padding-left:1.7rem;font-size:1rem;line-height:1.5}
.liste-haken li::before{content:"";position:absolute;left:.1rem;top:.45em;width:.8rem;height:.45rem;border-left:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);transform:rotate(-45deg)}

/* ---------- Kontakt / Formular ---------- */
.kontakt{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:start}
@media (min-width:1000px){.kontakt{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.form{display:grid;gap:1.3rem}
.form__zeile{display:grid;gap:1.3rem}
@media (min-width:700px){.form__zeile{grid-template-columns:1fr 1fr}}
.feld{display:grid;gap:.45rem;align-content:start}
/* Auswahlbox überall gleich hoch wie die Eingabefelder: Safari ignoriert sonst Höhe und Innenabstand */
.form .feld select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%232E2E30' stroke-width='1.8'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;background-size:.8rem}   /* nicht strecken: Nachbarfeld mit Hinweistext darf die Eingabe nicht verschieben */
.feld label,.feld legend{font-family:var(--kopf);font-weight:600;font-size:.9rem;color:var(--tinte);padding:0}
.feld small{font-size:.84rem;color:var(--text-leise)}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld select,.feld textarea{width:100%;min-height:3.1rem;padding:.75rem .9rem;border:1.5px solid #AEB8C0;border-radius:var(--form-k);background:var(--weiss);color:var(--tinte);font:inherit;transition:border-color .2s,box-shadow .2s}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--blau-tief);box-shadow:0 0 0 3px rgba(1,174,254,.3)}
.feld input[type=file]{font:inherit;font-size:.95rem;min-height:44px}
fieldset.feld{border:0;margin:0;padding:0;min-width:0}
.wahl{display:grid;gap:.4rem;margin-top:.3rem}
@media (min-width:700px){.wahl{grid-template-columns:1fr 1fr}}
.wahl label,.haken{display:flex;gap:.7rem;align-items:flex-start;min-height:44px;padding:.55rem .7rem;border:1px solid var(--linie);border-radius:var(--form-k);background:var(--weiss);font-family:var(--lauf);font-weight:400;font-size:.95rem;line-height:1.4;color:var(--text);cursor:pointer}
.wahl input,.haken input{width:1.2rem;height:1.2rem;margin-top:.12rem;accent-color:var(--blau-tief);flex:none}
.haken{border:0;background:none;padding-left:0}
.hinweis{padding:1rem 1.1rem;border-left:3px solid var(--blau);background:var(--blau-hell);font-size:.95rem;color:var(--tinte)}
.hinweis[hidden]{display:none}
.hinweis--entwurf{border-color:#C9A100;background:#FFF6CF}
.form__status{border-color:#2E9E5B;background:#E9F7EF}
.form__status--fehler{border-color:#C0392B;background:#FDECEA}
.knopf[aria-busy="true"]{opacity:.6;cursor:progress}
.kontaktkarte{display:grid;gap:1.4rem;padding:clamp(1.4rem,2.6vw,2.2rem);background:var(--flaeche);border-radius:var(--form)}
.kontaktkarte h2{font-size:1.4rem}
.kontaktkarte dl{margin:0;display:grid;gap:1rem}
.kontaktkarte dt{font-family:var(--kopf);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grau);margin-bottom:.2rem}
.kontaktkarte dd{margin:0;color:var(--tinte)}
.kontaktkarte a{color:var(--tinte)}

/* ---------- Ortslisten ---------- */
.zonen{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:800px){.zonen{grid-template-columns:repeat(3,1fr)}}
.zone{padding:clamp(1.3rem,2.4vw,2rem);background:var(--weiss);border:1px solid var(--linie);border-top:3px solid var(--blau);border-radius:var(--form)}
.zone h2{font-size:1.2rem;margin-bottom:1rem}
.zone li{padding:.45rem 0;border-bottom:1px solid var(--linie);font-size:.98rem}
.zone li:last-child{border:0}

/* ---------- Fuß ---------- */
.fuss{background:var(--grau-nacht);color:#D2D2D4;font-size:.95rem;padding-block:clamp(3.5rem,7vw,6rem) 0}
.fuss a{color:#F0F0F1;text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.fuss a:hover{color:var(--blau)}
.fuss__raster{display:grid;gap:2.5rem}
.fuss__logo img{height:74px;width:auto;margin-bottom:1.4rem}
.fuss__titel{font-family:var(--kopf);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#A9A9AC;margin:0 0 1rem}
.fuss p{max-width:36ch}
.fuss address{font-style:normal;line-height:1.7}
.fuss__recht{margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.4rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-size:.84rem;color:#A9A9AC}
.fuss__recht nav{display:flex;gap:1.4rem}
.fuss .fuss__ki{max-width:none;margin:0;padding-block:.9rem 0;text-align:center;text-wrap:balance;font-size:.72rem;line-height:1.6;color:#A8A8AB}
.fuss .fuss__ki a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Rechtstexte (Impressum): ruhige Lesespalte */
.rechtstext{max-width:44rem}
.rechtstext h2{font-size:1.1rem;margin:2rem 0 .5rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{margin:0}
.rechtstext p + p{margin-top:.75rem}
.fuss .fuss__avidis{max-width:none;margin:0;padding-block:1.1rem 1.4rem;border-top:1px solid rgba(255,255,255,.1);text-align:center;text-wrap:balance;line-height:2;font-family:var(--kopf);font-weight:500;font-size:.72rem;letter-spacing:.05em;color:#A8A8AB}
.fuss .fuss__avidis a{display:inline;white-space:nowrap;min-height:0;padding-block:.7rem;color:#CFCFD2;font-weight:600;letter-spacing:.12em;text-decoration:none;transition:color .25s}
.fuss .fuss__avidis a:hover{color:var(--blau)}
.herz{display:inline-block;width:.95em;height:.95em;margin:0 .15em;vertical-align:-.14em;fill:var(--blau);transform-origin:50% 60%}
/* AVIDIS-Standard: das Herz schlägt dauerhaft und leise (Doppelschlag, dann Pause) */
.herz{animation:herzschlag 2.4s ease-in-out infinite}
@keyframes herzschlag{0%,32%,100%{transform:scale(1)}11%{transform:scale(1.2)}20%{transform:scale(1.04)}26%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.herz{animation:none}}
@media (min-width:800px){.fuss__raster{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,3fr)}}
@media (min-width:1100px){.fuss__raster{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr) minmax(0,3fr)}}

/* ---------- Mobile Aktionsleiste ---------- */
.mobil-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobilcta);display:grid;grid-template-columns:1fr 1.5fr;gap:1px;background:var(--linie);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom);transform:translateY(110%);transition:transform .5s var(--ease)}
.mobil-cta.ist-da{transform:none}
.mobil-cta a{display:flex;align-items:center;justify-content:center;min-height:3.4rem;padding:.5rem;font-family:var(--kopf);font-weight:650;font-size:.9rem;text-decoration:none;background:var(--weiss);color:var(--tinte)}
.mobil-cta a:last-child{background:var(--blau)}
@media (max-width:1079px){body{padding-bottom:calc(3.4rem + env(safe-area-inset-bottom))}}
@media (min-width:1080px){.mobil-cta{display:none}}

/* ---------- Animations-Grundzustände (nur mit JS) ---------- */
.js [data-split]{visibility:hidden}
.js.bewegung-aus [data-split]{visibility:visible}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .kachel img{transition:none}
}
@media print{.kopf,.mobil-cta,.menue{display:none}main{padding-top:0}}