/* ============================================================
   GH WOHNANLAGENBETREUUNG — Design-System „Klar · Blau" (Runde 3)
   Geteilt über alle Seiten. Farbwelt weiß/grau/blau. Fonts self-hosted.
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-500.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600.woff2') format('woff2')}

:root{
  --navy:#234E7C; --navy-deep:#15324f;
  --blue:#2f6db3; --blue-deep:#245a97;
  /* --mute lag bei #697480 und damit auf den grauen Flaechen unter dem
     WCAG-AA-Grenzwert: 4,40:1 auf --soft, 4,24:1 auf --soft-2, noetig sind 4,5.
     Um vier Prozent abgedunkelt reicht es ueberall (4,54:1 im schlechtesten Fall),
     der Farbton bleibt unveraendert. */
  --grey:#6E757C; --ink:#1b232d; --mute:#656f7b;
  --bg:#ffffff; --soft:#f4f6f9; --soft-2:#eef2f8;
  --line:#e3e8ee; --line-strong:#d3dbe6;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,30,45,.05),0 18px 40px -26px rgba(20,30,45,.4);
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1240px;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em;line-height:1.14;text-wrap:balance}
.wrap{max-width:var(--max);margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
svg.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.visible{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

.eyebrow{display:inline-flex;align-items:center;font-family:var(--font-sans);font-weight:600;font-size:.85rem;letter-spacing:.01em;color:var(--blue)}
.eyebrow.on-dark{color:#8fbdf0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:10px;padding:.8rem 1.3rem;font-weight:700;cursor:pointer;border:1px solid transparent;font-size:.95rem;transition:transform .15s var(--ease),background .2s,border-color .2s;white-space:nowrap}
.btn .ic{width:1.05em;height:1.05em}
.btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)} .btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff} .btn-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn:disabled,.btn:disabled:hover{cursor:not-allowed;opacity:.42;filter:saturate(.45);transform:none;box-shadow:none}
.btn-arrow .ic:last-child{transition:transform .2s var(--ease)}.btn-arrow:hover .ic:last-child{transform:translateX(3px)}

/* ===== header ===== */
header.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
header.nav.nav--hero{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
header.nav.nav--hero .brand img{filter:brightness(0) invert(1)}
header.nav.nav--hero .nav__links{color:rgba(255,255,255,.86)}
header.nav.nav--hero .nav__links a:hover{color:#fff}
header.nav.nav--hero .nav__cta{color:#fff;background:rgba(10,31,51,.28);border-color:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
header.nav.nav--hero .nav__cta:hover{color:var(--navy);background:#fff;border-color:#fff}
header.nav.nav--hero .burger{border-color:rgba(255,255,255,.58)}
header.nav.nav--hero .burger span{background:#fff}
header.nav.nav--hero.nav--solid{background:rgba(255,255,255,.96);border-bottom-color:var(--line);box-shadow:0 8px 24px rgba(10,31,51,.08)}
/* Bewusst brightness(1) invert(0) statt "none": zwischen einer Filterliste und
   "none" interpoliert der Browser nicht -- die Logofarbe waere hart umgesprungen,
   waehrend die Groesse noch lief. Gleiche Funktionen auf beiden Seiten blenden. */
header.nav.nav--hero.nav--solid .brand img{filter:brightness(1) invert(0)}
header.nav.nav--hero.nav--solid .nav__links{color:var(--mute)}
header.nav.nav--hero.nav--solid .nav__links a:hover{color:var(--navy)}
header.nav.nav--hero.nav--solid .nav__cta{color:#fff;background:var(--navy);border-color:var(--navy);backdrop-filter:none}
header.nav.nav--hero.nav--solid .nav__cta:hover{background:var(--navy-deep);color:#fff}
header.nav.nav--hero.nav--solid .burger,header.nav.nav--hero.nav--menu .burger{border-color:var(--line-strong)}
header.nav.nav--hero.nav--solid .burger span,header.nav.nav--hero.nav--menu .burger span{background:var(--ink)}
.nav__in{display:flex;align-items:center;gap:1.2rem;height:64px;transition:height .3s var(--ease)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--navy);margin-left:-3px}
/* Groesse ueber transform statt height: eine Hoehen-Animation laesst den
   Browser bei jedem Bild neu umbrechen, transform laeuft auf dem Compositor.
   transform-origin links, damit die Marke am Rand stehen bleibt und nicht wandert. */
.brand img{height:46px;width:auto;display:block;transform-origin:left center;
  transition:transform .3s var(--ease),filter .3s var(--ease)}
/* Marke beim Ankommen groesser: solange der Kopf transparent ueber dem Hero
   liegt, kostet zusaetzliche Hoehe optisch nichts. Sobald gescrollt wird,
   schrumpft beides auf das normale Mass zurueck und macht dem Text Platz.
   Die Zustaende nav--hero/nav--solid und ihr Uebergang sind schon da --
   hier haengt sich nur die Groesse mit ein. */
header.nav.nav--hero .nav__in{height:80px}
header.nav.nav--hero .brand img{transform:scale(1.35)}
header.nav.nav--hero.nav--solid .nav__in{height:64px}
header.nav.nav--hero.nav--solid .brand img{transform:none}
.nav__links{display:flex;gap:1.3rem;margin-left:auto;font-weight:600;font-size:.92rem;color:var(--mute)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--navy)}
.nav__cta{margin-left:.4rem}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;background:none;border:1px solid var(--line-strong);border-radius:9px;padding:9px;cursor:pointer;margin-left:auto;position:relative;z-index:41;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .18s var(--ease)}
#burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{display:none}

/* Leistungen-Dropdown (Markup ruestet gh.js nach). Oeffnet per Hover UND
   Tastatur-Fokus; der unsichtbare ::before ueberbrueckt die Luecke zwischen
   Link und Panel, damit der Mauszeiger unterwegs nicht "abstuerzt". */
.nav-drop{position:relative;display:inline-flex;align-items:center}
/* Hintergrund-Pille am ausgeklappten Nav-Punkt; negative Margins gleichen das
   Padding aus, damit der Abstand zu den Nachbarpunkten unveraendert bleibt. */
.nav-drop__link{padding:.4rem .65rem;margin:-.4rem -.65rem;border-radius:999px;transition:background .18s var(--ease)}
.nav-drop:hover .nav-drop__link,.nav-drop:focus-within .nav-drop__link,.nav-drop.offen .nav-drop__link{background:var(--soft)}
header.nav.nav--hero:not(.nav--solid) .nav-drop:hover .nav-drop__link,header.nav.nav--hero:not(.nav--solid) .nav-drop:focus-within .nav-drop__link,header.nav.nav--hero:not(.nav--solid) .nav-drop.offen .nav-drop__link{background:rgba(255,255,255,.16)}
.nav-drop__link::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);margin-left:.45rem;opacity:.65}
.nav-drop::before{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:1.1rem;display:none}
.nav-drop:hover::before,.nav-drop:focus-within::before{display:block}
.nav-drop__panel{position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%) translateY(6px);min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px -20px rgba(20,30,45,.4);padding:.45rem;opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.nav-drop:hover .nav-drop__panel,.nav-drop:focus-within .nav-drop__panel,.nav-drop.offen .nav-drop__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop__panel a{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:8px;color:var(--ink);font-size:.9rem;font-weight:600;white-space:nowrap}
.nav-drop__panel .ic{width:17px;height:17px;color:var(--blue);flex:none}
.nav-drop__panel .nav-drop__alle{margin-top:.35rem;border-top:1px solid var(--line);border-radius:0 0 9px 9px;color:var(--navy)}
/* Spezifischer als die Hero-Regel (weisse Nav-Links ueber dem Startseiten-Bild),
   sonst waere der Panel-Hover dort weiss auf weiss. */
header.nav .nav-drop__panel a:hover,header.nav.nav--hero .nav-drop__panel a:hover{background:var(--soft);color:var(--navy)}
@media(max-width:860px){
  /* Im Burger-Menue gibt es kein Panel; display:contents laesst den Link als
     direktes Kind wirken, damit die Menue-Styles greifen wie zuvor. Die
     negativen Margins der Hover-Pille muessen hier weg, sonst rueckt
     "Leistungen" gegenueber den anderen Punkten aus. */
  .nav-drop{display:contents}
  .nav-drop::before,.nav-drop__panel{display:none!important}
  .nav-drop__link::after{display:none}
  .nav-drop__link{margin:0;border-radius:0}
  .nav-drop:hover .nav-drop__link,.nav-drop:focus-within .nav-drop__link,.nav-drop.offen .nav-drop__link{background:none}
}
@media(max-width:860px){
  .burger{display:flex}
  .nav__cta{display:none}
  /* Am Handy ist die Kopfhoehe knappes Gut -- dort bleibt die Marke beim
     normalen Mass, auch ueber dem Hero. */
  header.nav.nav--hero .nav__in{height:64px}
  header.nav.nav--hero .brand img{transform:none}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(20,30,45,.42);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);z-index:34}
  .nav-scrim.open{opacity:1;visibility:visible}
  .nav__links{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(82vw,320px);flex-direction:column;align-items:stretch;background:#fff;margin:0;padding:calc(64px + 1.2rem) 1.5rem 1.5rem;gap:0;transform:translateX(100%);transition:transform .3s var(--ease);box-shadow:-24px 0 60px -24px rgba(20,30,45,.45);z-index:35;display:flex}
  .nav__links.open{transform:translateX(0)}
  .nav__links a{padding:.95rem .2rem;border-bottom:1px solid var(--line);font-size:1.08rem;color:var(--ink)}
}

/* ===== hero (Startseite) ===== */
/* Text am unteren Rand statt zentriert: so bleibt er auf jeder Bildschirmhoehe
   gleich weit unten, ohne bei flachen Fenstern aus dem Hero zu laufen. */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:0;color:#fff}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,31,51,.94) 0%,rgba(16,45,72,.82) 34%,rgba(21,50,79,.48) 58%,rgba(21,50,79,.10) 82%,rgba(21,50,79,.04) 100%)}
.hero__content{width:100%;padding-top:8rem;padding-bottom:3.5rem}
.hero h1{font-size:clamp(2.35rem,5.6vw,4.25rem);margin:1rem 0 1.2rem;max-width:20ch;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero h1 em{font-style:normal;color:inherit}
.hero p{color:rgba(255,255,255,.88);font-size:1.1rem;max-width:48ch;text-shadow:0 1px 12px rgba(0,0,0,.24)}
.hero .eyebrow{color:#a9d1ff}
.hero .cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.hero .btn-navy{background:#fff;color:var(--navy)}.hero .btn-navy:hover{background:#eef4fa;color:var(--navy-deep)}
.hero .btn-ghost{border-color:rgba(255,255,255,.68);color:#fff;background:rgba(10,31,51,.18)}.hero .btn-ghost:hover{border-color:#fff;background:#fff;color:var(--navy)}
.hero__assure{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:rgba(255,255,255,.8);margin-top:1.3rem}
.hero__assure .ic{color:#a9d1ff}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--navy-deep);overflow:hidden}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Hero-Auftakt: Bild faehrt aus 112 % langsam auf 100 %, die Texte blenden
   versetzt darueber ein. Reduced Motion schaltet beides oben global ab. */
@keyframes hero-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__media img{animation:hero-zoom 3s ease-out both}
.hero__content>*{animation:hero-in .75s var(--ease) both}
.hero__content>.eyebrow{animation-delay:.20s}
.hero__content>h1{animation-delay:.34s}
.hero__content>p{animation-delay:.48s}
.hero__content>.cta{animation-delay:.62s}
@media(max-width:820px){
  /* Einziger Ort fuer den Abstand der Hero-Karte von oben — das Ortsschild rechnet daran mit. */
  /* Bildband oben, Karte schiebt sich darueber — darunter normale Seitenflaeche. */
  .hero{min-height:auto;align-items:flex-start;padding:0 0 2.25rem;background:var(--bg);
    --hero-bild:clamp(15rem,38svh,21rem);--hero-ueberlappung:3.25rem;
    --hero-card-top:calc(var(--hero-bild) - var(--hero-ueberlappung))}
  .hero__media{top:0;bottom:auto;height:var(--hero-bild)}
  .hero::after{top:0;bottom:auto;height:var(--hero-bild)}
  .hero::after{background:linear-gradient(180deg,rgba(10,31,51,.08) 0%,rgba(10,31,51,.18) 35%,rgba(10,31,51,.48) 100%)}
  .hero__content{width:calc(100% - 2rem);margin:var(--hero-card-top) 1rem 1rem;padding:1.55rem 1.35rem 1.4rem;background:rgba(255,255,255,.82);color:var(--ink);border:1px solid rgba(255,255,255,.55);border-radius:20px;box-shadow:0 20px 60px rgba(10,31,51,.28);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15)}
  /* Ohne backdrop-filter (aeltere Browser) waere der Text auf dem Foto schlecht lesbar
     — dort bleibt die Karte deckend. */
  @supports not (backdrop-filter:blur(1px)){.hero__content{background:rgba(255,255,255,.96)}}
  .hero h1{font-size:clamp(2.25rem,11vw,3.35rem);max-width:20ch;color:var(--navy);text-shadow:none;margin:.75rem 0 1rem}
  /* Auf der transparenten Karte reicht --mute nicht fuer AA — daher --ink. */
  .hero p{max-width:38ch;color:var(--ink);text-shadow:none;font-size:1rem}
  .hero .eyebrow{color:var(--blue-deep)}
  .hero .cta{display:grid;grid-template-columns:1fr;margin-top:1.25rem}
  .hero .btn-navy{background:var(--navy);color:#fff}.hero .btn-navy:hover{background:var(--navy-deep);color:#fff}
  .hero .btn-ghost{border-color:var(--line-strong);color:var(--navy);background:transparent}.hero .btn-ghost:hover{border-color:var(--navy);background:var(--soft);color:var(--navy)}
  .hero__assure{color:var(--ink);align-items:flex-start;margin-top:1rem}.hero__assure .ic{color:var(--blue);flex:0 0 auto;margin-top:.12rem}
  .hero__media img{object-position:67% center}
}

/* ===== Inner-Page Hero ===== */
.page-hero{background:var(--soft);border-bottom:1px solid var(--line);padding:3.4rem 0}
.page-hero .eyebrow{margin-bottom:.7rem}
.page-hero h1{font-size:clamp(2rem,4.6vw,3rem);max-width:22ch}
.page-hero p{color:var(--mute);font-size:1.12rem;max-width:60ch;margin-top:1rem}

/* ===== creds strip ===== */
.creds{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.creds__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-top:1.6rem;padding-bottom:1.6rem}
.cred{display:flex;align-items:center;gap:.7rem}
.cred .ci{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--navy);display:grid;place-items:center;flex:none}
.cred .ci .ic{width:1.15rem;height:1.15rem}
.cred b{display:block;font-size:.9rem;line-height:1.2;color:var(--ink)}
.cred span{font-size:.76rem;color:var(--mute)}
@media(max-width:860px){.creds__in{grid-template-columns:1fr 1fr;gap:1.2rem}}
@media(max-width:560px){.creds__in{grid-template-columns:1fr 1fr;gap:.85rem .65rem;padding-top:1.15rem;padding-bottom:1.15rem}.cred{gap:.5rem;align-items:flex-start}.cred .ci{width:34px;height:34px;border-radius:9px}.cred .ci .ic{width:1rem;height:1rem}.cred b{font-size:.78rem}.cred span{font-size:.67rem;line-height:1.35}}

/* ===== section base ===== */
section{padding:5rem 0}
.sec-h{max-width:760px;margin-bottom:2.2rem}
.sec-h .eyebrow{margin-bottom:.9rem}
.sec-h h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.sec-h p{color:var(--mute);font-size:1.05rem;margin-top:.8rem}
.soft{background:var(--soft)}

/* ===== Leistungs-Karten ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.svc{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.5rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.svc:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.svc .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.svc .ic-wrap{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);transition:all .25s var(--ease)}
.svc:hover .ic-wrap{background:var(--navy);color:#fff;border-color:var(--navy)}
.svc .ic-wrap .ic,.svc .ic-wrap .ic-alt{grid-column:1;grid-row:1;width:1.3rem;height:1.3rem;transition:opacity .3s var(--ease),transform .45s var(--ease)}
.svc .ic-wrap .ic-alt{opacity:0;transform:rotate(-90deg) scale(.4)}
.svc:hover .ic-wrap .ic:not(:only-child){opacity:0;transform:rotate(90deg) scale(.4)}
.svc:hover .ic-wrap .ic-alt{opacity:1;transform:rotate(0) scale(1)}
.svc h3{font-size:1.08rem;margin-bottom:.4rem}
.svc p{color:var(--mute);font-size:.9rem;line-height:1.55}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ===== Leistungs-Sprungnavigation ===== */
.service-nav-section{padding:1.5rem 0;border-bottom:1px solid var(--line);background:#fff}
.service-nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* Label immer in der eigenen Zeile: inline liess der Umbruch je nach Breite
   einen einzelnen Chip (Bautrocknung) verloren in Zeile zwei stehen. */
.service-nav>span{width:100%;color:var(--mute);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.15rem}
.service-nav a{border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;color:var(--navy);font-size:.88rem;font-weight:700;line-height:1.2;transition:color .2s,background .2s,border-color .2s,transform .2s}
.service-nav a:hover{color:#fff;background:var(--navy);border-color:var(--navy);transform:translateY(-1px)}
/* Umbruchzone: hier wuerde Flex je nach Breite 5+1 oder 4+2 umbrechen -- stattdessen
   fester 3er-Grid (zwei Dreierreihen). Darueber passen alle sechs in eine Reihe,
   darunter greift das Mobil-Layout mit frei umbrechenden, kleineren Chips. */
@media(min-width:641px) and (max-width:1079px){
  .service-nav{display:grid;grid-template-columns:repeat(3,max-content);gap:.6rem}
  .service-nav>span{grid-column:1/-1;margin-bottom:0}
  .service-nav a{text-align:center}
}
@media(max-width:560px){.service-nav-section{padding:1rem 0}.service-nav{gap:.45rem}.service-nav>span{width:100%;margin-bottom:.15rem}.service-nav a{font-size:.82rem;padding:.48rem .7rem}}

/* ===== Zielgruppen ===== */
.zg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.zg{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.zg:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue)}
.zg h3{font-size:1.12rem;margin-bottom:.4rem}
.zg p{color:var(--mute);font-size:.92rem;line-height:1.55}
.zg--primary{border-color:var(--navy);border-width:1.5px;position:relative;background:linear-gradient(180deg,#eff5fb,#fff)}
.zg-badge{display:inline-block;font-family:var(--font-sans);font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--navy);padding:.25rem .65rem;border-radius:999px;margin-bottom:.7rem}
@media(max-width:820px){.zg-grid{grid-template-columns:1fr}}

/* ===== Entlastung (HV) ===== */
.entlastung{background:var(--soft-2)}
.relief-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.relief{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem}
.relief-ic{width:44px;height:44px;border-radius:11px;background:var(--soft);color:var(--navy);display:grid;place-items:center;flex:none}
.relief-ic .ic{width:1.3rem;height:1.3rem}
.relief h3{font-size:1.05rem;margin-bottom:.35rem}
.relief p{color:var(--mute);font-size:.9rem;line-height:1.55}
/* ===== Crew-Liste =====
   Namen statt Fotos. Drei Spalten (Name, Rolle, Zugehoerigkeit), getrennt
   durch dieselbe feine Linie wie die Rasterliste -- eine Formsprache.
   Mobil rutscht die Zugehoerigkeit unter den Namen. */
.crew{list-style:none;margin:1.6rem 0 0;padding:0}
.crew li{display:grid;grid-template-columns:8rem 1fr auto;align-items:baseline;gap:.2rem 1.2rem;padding:.9rem 0;border-top:1px solid var(--line-strong)}
.crew b{font-family:var(--font-serif);font-weight:500;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink)}
.crew .rolle{color:var(--mute)}
.crew .seit{color:var(--mute);font-size:.85rem;white-space:nowrap}
/* Mobil: Name und Zugehoerigkeit teilen sich die erste Zeile, die Rolle
   steht darunter. Ohne die feste Zuweisung landet jedes Feld in einer
   eigenen Zeile und der Eintrag wird dreimal so hoch. */
@media(max-width:640px){
  .crew li{grid-template-columns:1fr auto;row-gap:.15rem}
  .crew b{grid-area:1/1}
  .crew .seit{grid-area:1/2}
  .crew .rolle{grid-area:2/1/auto/-1;font-size:.92rem}
}
.crew-note{margin-top:1.4rem;padding:1.1rem 1.3rem;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius)}
.crew-note p{margin:0;color:var(--mute);font-size:.95rem}
.crew-note p + p{margin-top:.5rem}
.crew-note a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:2px solid var(--blue)}
@media(max-width:760px){.relief-grid{grid-template-columns:1fr}}

/* Prüf-Badge — temporär, VOR LAUNCH entfernen */
.pruef{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-sans);font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:#d1301c;padding:.14rem .5rem;border-radius:999px;vertical-align:middle;margin-left:.4rem;white-space:nowrap;box-shadow:0 1px 5px rgba(209,48,28,.45)}
.pruef::before{content:"⚠"}
/* Variante: nicht „stimmt das?", sondern „Einwilligung des Verfassers fehlt noch". */
.pruef--frei{background:var(--navy);box-shadow:0 1px 5px rgba(35,78,124,.45)}
.pruef--frei::before{content:"✍"}

/* ===== Über uns Split ===== */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.5rem;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:24px;padding:2rem}
.about__media{position:relative}
.about__photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:16px;display:block;background:linear-gradient(150deg,var(--grey),#55606b)}
/* Freigestelltes Chef-Portrait: steht auf einer hellen Markenflaeche statt in einem
   Bildausschnitt. Die Dateien sind bereits auf 4:5 beschnitten (mit Kopffreiheit oben),
   deshalb schneidet cover nichts weg — object-position haelt die Schulterkante unten buendig. */
.about__photo--frei{object-position:center bottom;border:1px solid var(--line);
  background:linear-gradient(165deg,var(--soft-2) 0%,#dbe4f1 100%)}
.about__badge{position:absolute;left:-8px;bottom:-10px;background:var(--navy);color:#fff;border-radius:10px;padding:.62rem .78rem .58rem;box-shadow:0 10px 24px rgba(10,31,51,.22)}
.about__badge .about__badge-year{display:flex;align-items:baseline;gap:.3rem;margin-bottom:.12rem;font-size:1.08rem;line-height:1;font-weight:700;letter-spacing:-.015em;opacity:1;text-transform:none}
.about__badge .about__badge-year span,.about__badge .about__badge-year b{font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:inherit;opacity:1;text-transform:none}
.about__badge>span:last-child{display:block;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.82;line-height:1.25}
.about__lead{font-size:1.35rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:.7rem 0 1rem;color:var(--ink)}
.about__text p{color:var(--mute);margin-bottom:.9rem}
.about__quote{border-left:3px solid var(--blue);padding-left:1.2rem;margin:1.4rem 0;font-size:1.1rem;color:var(--navy);line-height:1.4}
.sig{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem}
.sig-name{font-weight:700}.sig-role{font-size:.8rem;color:var(--mute)}
/* Variante: lange Geschichte — Foto oben ausgerichtet und mitlaufend */
.about--story{align-items:start}
.about--story .about__media{position:sticky;top:88px}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:1.5rem;padding:1.1rem}.about__photo{aspect-ratio:4/3}.about__badge{left:auto;right:10px;bottom:10px;padding:.5rem .62rem .46rem;border-radius:9px;box-shadow:0 8px 20px rgba(10,31,51,.28)}.about__badge .about__badge-year{font-size:.95rem}.about__badge>span:last-child{font-size:.52rem}.about--story .about__media{position:relative;top:auto}}
/* Das Portrait bleibt auch mobil hochkant — im 4:3-Rahmen wuerde der Kopf abgeschnitten.
   Begrenzt wird die ganze Medienspalte, damit das „seit 1997"-Badge am Bild klebt. */
@media(max-width:820px){
  /* .about--zitat setzt weiter unten 1/1 — hier bewusst hoeher gewichtet, sonst Kopf ab. */
  .about__photo--frei,.about--zitat .about__photo.about__photo--frei{aspect-ratio:4/5}
  .about__media--frei{max-width:320px;margin-inline:auto}
  /* Echtes Foto statt Freisteller: bleibt ebenfalls hochkant, sonst schneidet
     der 4:3-Rahmen oben den Kopf ab. Ohne Verlaufsflaeche und ohne Rahmen --
     die braucht nur ein freigestelltes Motiv, das sonst im Nichts schwebt. */
  .about__photo--foto{aspect-ratio:4/5}
}

/* ===== Ablauf-Timeline =====
   Horizontal mit Verbindungslinie (Desktop) → vertikal (Mobil). */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;margin-top:1rem}
.flow-step{position:relative}
.flow-step::before{content:"";position:absolute;top:22px;left:52px;right:-1.8rem;height:2px;background:var(--line-strong);z-index:0}
.flow-step:last-child::before{display:none}
.flow-num{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-sans);font-size:1.2rem;font-weight:700;line-height:1}
.flow-step h3{font-size:1.05rem;margin:1.1rem 0 .4rem}
.flow-step p{color:var(--mute);font-size:.92rem;line-height:1.6}
@media(max-width:860px){
  .flow{grid-template-columns:1fr;grid-auto-rows:1fr;gap:0}
  .flow-step{padding-left:3.8rem;padding-bottom:1.8rem}
  .flow-step:last-child{padding-bottom:0}
  .flow-step::before{top:52px;left:22px;right:auto;width:2px;height:calc(100% - 52px)}
  .flow-num{position:absolute;left:0;top:0}
  .flow-step h3{margin-top:.55rem}
}

/* ===== Ablauf-Rahmen + Hinweis-Pille ===== */
.ablauf{background:var(--soft-2)}
.steps-note{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.88rem;color:var(--navy);background:#fff;border:1px solid var(--line);padding:.55rem .95rem;border-radius:9px}
.steps-note .ic{color:var(--blue)}

/* ===== Proof / Vorher-Nachher / Vertrauen ===== */
.case{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
.case-side{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:#fff}
.case-side.after{border-color:#bcd3ec;background:#f2f7fc}
.case-tag{font-weight:700;font-size:.82rem;margin-bottom:1rem;display:block;color:var(--mute)}
.case-side.after .case-tag{color:var(--navy)}
.case-line{display:flex;gap:.7rem;margin-bottom:.8rem;font-size:.92rem;color:var(--mute)}
.case-line:last-child{margin-bottom:0}
.case-line .mark{font-weight:700;flex:none}
.case-side.before .mark{color:var(--grey)}.case-side.after .mark{color:var(--blue)}
@media(max-width:680px){.case{grid-template-columns:1fr}}
/* ===== Modal (native <dialog>, cookiefrei, ohne Fremd-Library) ===== */
/* margin:auto ist hier Pflicht: Der globale Reset (*{margin:0}) loescht die
   UA-Regel, mit der der Browser ein natives <dialog> von selbst zentriert --
   ohne diese Zeile klebt das Fenster oben links. */
.modal{border:0;padding:0;margin:auto;border-radius:18px;max-width:min(560px,92vw);width:100%;background:#fff;color:var(--ink);box-shadow:0 30px 90px -24px rgba(15,30,50,.55)}
.modal::backdrop{background:rgba(16,26,42,.55)}
.modal__in{position:relative;padding:1.9rem}
.modal__in h3{font-size:1.18rem;margin:0 0 .2rem;padding-right:2.4rem}
.modal__eyebrow{font-family:var(--font-sans);font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:.7rem}
.modal__in p{font-size:.9rem;line-height:1.62;color:var(--mute);margin:.75rem 0 0}
.modal__x{position:absolute;top:.85rem;right:.85rem;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-size:1.15rem;line-height:1;display:grid;place-items:center;transition:background .18s,border-color .18s}
.modal__x:hover{background:var(--soft);border-color:var(--line-strong)}
@media(prefers-reduced-motion:no-preference){
  .modal[open]{animation:modal-auf .22s var(--ease) both}
  @keyframes modal-auf{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
}
@media(max-width:560px){.modal__in{padding:1.4rem}}

/* ===== Kundenstimmen (echte Google-Rezensionen, kein Google-Embed → cookiefrei) ===== */
.stimmen{border:1px solid var(--line-strong);border-radius:16px;padding:2rem;background:linear-gradient(180deg,#fff,var(--soft))}
.stimmen-head{text-align:center;margin-bottom:1.7rem}
.stimmen-head h3{font-size:1.25rem;margin:0 0 .6rem}
/* Sterne bewusst goldgelb: etablierte UI-Konvention, kein Marken-Akzent (CI bleibt orange-frei). */
.stimmen-stars{color:#d99b00;letter-spacing:.08em;font-size:1.05rem;line-height:1}
.stimmen-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.stimme{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.35rem;display:flex;flex-direction:column}
.stimme .stimmen-stars{font-size:.9rem;margin-bottom:.6rem}
.stimme blockquote{margin:0 0 .9rem;font-size:.98rem;line-height:1.55;color:var(--ink)}
.stimme cite{font-style:normal;font-size:.8rem;color:var(--mute);margin-top:auto}
/* Bewertungen aendern sich. Ohne Datum ist die Zahl in einem Jahr
   eine Behauptung -- mit Datum bleibt sie eine Momentaufnahme. */
.stimmen-note{margin:1.4rem 0 0;font-size:.74rem;line-height:1.5;color:var(--mute);text-align:center;max-width:64ch;margin-left:auto;margin-right:auto}
/* Ohne Unterstrich waren die beiden Verweise vom Fliesstext nicht zu
   unterscheiden -- niemand sieht, dass man hier klicken kann. */
.stimmen-note a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px}
.stimmen-note a:hover{color:var(--navy)}
@media(max-width:700px){.stimmen{padding:1.4rem}.stimmen-grid{grid-template-columns:1fr}}
.vert{background:var(--soft);border:1px solid var(--line);border-radius:24px;padding:2.6rem 2.2rem;margin-bottom:2rem}
.vert-head{text-align:center;max-width:600px;margin:0 auto 2rem}
.vert-head .eyebrow{justify-content:center;margin-bottom:.7rem}
.vert-head h2{font-size:clamp(1.5rem,3vw,2.1rem)}
/* auto-fit statt fester Dreier-Teilung: mit der vierten Kachel (Liegenschaften)
   bricht das Raster sonst in 3 + 1 und die letzte steht allein. */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.6rem}
.vcard{text-align:center}
.vcard .big{font-family:var(--font-sans);font-size:3.2rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1}
.vcard .big .u{color:var(--blue);font-size:.55em}
.vcard h3{font-size:1.05rem;margin:.45rem 0 .3rem}
.vcard p{color:var(--mute);font-size:.9rem}
@media(max-width:760px){
  .vert{padding:2rem 1rem;border-radius:20px}
  .vert-head{margin-bottom:1.5rem;padding:0 .35rem}
  .vgrid{grid-template-columns:1fr;gap:1rem}
  .vcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.1rem;box-shadow:0 12px 28px -24px rgba(20,30,45,.45)}
  .vcard .big{font-size:2.8rem}
  .vcard h3{margin:.55rem 0 .35rem}
  .vcard p{max-width:28ch;margin:0 auto;line-height:1.5}
}

/* ===== Kontakt-Block ===== */
.contact{background:var(--navy-deep);color:#fff}
.contact .sec-h h2{color:#fff}
.contact-body{border-top:1px solid rgba(255,255,255,.14);margin-top:1.6rem;padding-top:1.6rem}
.contact-intro{color:rgba(255,255,255,.72);max-width:52ch;margin-bottom:1.2rem}
/* Zwei Spalten fuer die Kontaktwege; die sechste Zeile ist der Weg zum
   Kontaktformular - bewusst im selben Zeilen-Stil wie die anderen Wege. */
.citem-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
/* Verschiebung per transform statt padding-left: padding wuerde die Textbreite
   verringern und laengere Eintraege (E-Mail, Adresse) beim Hovern umbrechen lassen. */
.citem{display:flex;align-items:center;gap:1rem;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.14);transition:transform .2s var(--ease)}
.citem:hover{transform:translateX(.4rem)}
.citem .ci{width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:11px;display:grid;place-items:center;color:#8fbdf0;flex:none}
/* Deckkraft .5 ergab auf --navy-deep nur 4,47:1 -- knapp unter dem AA-Grenzwert
   von 4,5. Mit .58 sind es 5,47:1, die Zeile bleibt trotzdem zurueckhaltend. */
.citem .l{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.58)}
.citem .v{font-weight:700;font-size:1.05rem}
.citem .v a:hover{color:#8fbdf0}
/* .emergency-top lebt weiter auf der Kontaktseite (Notfall-Zeile im CTA-Band);
   der Notfall-Kasten der Startseite ist mit Fassung 08 entfallen. */
.emergency-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.emergency-top strong{font-size:1.02rem}
/* Geltungsbereich des Notdienstes: steht bewusst leiser als der Aufruf darueber.
   Er soll Ortsfremde bremsen, ohne echten Anrufern im Ernstfall im Weg zu stehen. */
.notdienst-geltung{margin-top:.85rem;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.62)}
/* Nach einem Knopf braucht der Satz mehr Luft: direkt darunter sah er aus wie
   eine Beschriftung des Knopfes statt wie ein eigener Hinweis. Gilt fuer jeden
   Knopf davor, nicht nur im .emergency-Block -- auf der Kontaktseite steht
   derselbe Hinweis in einem .cta-band. */
.btn + .notdienst-geltung{margin-top:1.35rem}
@media(max-width:820px){
  .citem-grid{grid-template-columns:1fr}
}

/* ===== Leistungs-Blöcke mit Einsatzfoto ===== */
/* Echte Fotos vom eigenen Geraet neben den Leistungslisten: sie belegen die
   Versprechen direkt daneben (eigener Maschinenpark statt Behauptung). */
.leistung-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:2.4rem;align-items:center}
.leistung-foto{margin:0}
.leistung-foto img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 18px 40px -22px rgba(20,30,45,.4)}
@media(max-width:820px){.leistung-cols{grid-template-columns:1fr;gap:1.3rem}}

/* ===== CTA-Band (Unterseiten) ===== */
.cta-band{background:var(--navy-deep);color:#fff;border-radius:24px;padding:2.6rem 2.2rem;text-align:center}
.cta-band h2{color:#fff;margin-bottom:.6rem}
.cta-band p{color:rgba(255,255,255,.8);max-width:48ch;margin:0 auto 1.4rem}

/* ===== Prose (Recht/Text) ===== */
.prose{max-width:72ch}
.prose h2{font-size:1.4rem;margin:2rem 0 .8rem}
.prose h3{font-size:1.1rem;margin:1.4rem 0 .5rem}
.prose p,.prose li{color:var(--ink);margin-bottom:.8rem;line-height:1.7}
.prose ul{padding-left:1.2rem;margin-bottom:1rem}
.prose a{color:var(--blue);text-decoration:underline}
/* ===== Leistungsliste =====
   Zweispaltiges Raster statt Aufzaehlungszeichen: eine feine Linie ueber
   jedem Punkt traegt die Gliederung, mobil wird daraus eine Spalte. */
.prose ul.raster{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
.prose ul.raster li{padding:.85rem 0;margin-bottom:0;border-top:1px solid var(--line-strong);line-height:1.5}
@media(max-width:640px){.prose ul.raster{grid-template-columns:1fr}}

/* ===== Ablauf Schadenmeldung ===== */
/* grid-auto-rows:1fr macht alle Schritte so hoch wie den hoechsten — damit sind die
   Abstaende zwischen den Kreisen gleich, egal wie lang der jeweilige Text ist.
   Ein fester min-height-Wert wuerde bei anderer Textlaenge oder Breite wieder driften. */
.report-steps{display:grid;gap:0;grid-auto-rows:1fr}
/* min-height gibt den Schritten einen festen Rhythmus: ohne sie richtet sich der
   Abstand zwischen den Kreisen nach der Textlaenge, und ein Schritt mit nur einer
   Zeile sitzt sichtbar naeher am naechsten. */
.report-step{position:relative;display:grid;grid-template-columns:2.35rem 1fr;gap:.85rem;padding:0 0 1.35rem;align-items:start}
.report-step:last-child{padding-bottom:0}
.report-step:not(:last-child)::after{content:"";position:absolute;left:1.13rem;top:2.25rem;bottom:.15rem;width:1px;background:linear-gradient(var(--blue),var(--line))}
.report-step__number{position:relative;z-index:1;width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-size:.82rem;font-weight:700;box-shadow:0 6px 18px rgba(10,31,51,.16)}
.report-step__done{background:#2f855a;font-size:1rem;box-shadow:0 6px 18px rgba(47,133,90,.22)}
.report-step strong{display:block;color:var(--navy);font-size:1rem;line-height:1.35;margin:.05rem 0 .2rem}
.report-step p{color:var(--mute);font-size:.91rem;line-height:1.55;margin:0}

/* ===== Formular ===== */
.form{display:grid;gap:1.1rem;max-width:640px}
.field{display:grid;gap:.35rem}
.field label{font-size:.85rem;font-weight:600;color:var(--ink)}
.field input,.field textarea,.field select{font-family:var(--font-sans);font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:.75rem .9rem;width:100%;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,109,179,.14)}
.field textarea{min-height:130px;resize:vertical}
/* Kurzes Textfeld: hoch genug, dass ein langer Platzhalter vollstaendig lesbar ist,
   aber nicht so hoch, dass es nach Aufsatz aussieht. */
.field textarea.kompakt{min-height:6.8rem}
.field .hint{font-size:.78rem;color:var(--mute)}
.file-upload{position:relative;display:flex;align-items:center;gap:.85rem;min-height:52px;padding:.4rem .9rem .4rem .4rem;background:#fff;border:1px dashed var(--line-strong);border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}
.file-upload:hover{border-color:var(--blue);background:var(--soft)}
.file-upload:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,109,179,.14)}
.file-upload.is-dragging{border-color:var(--blue);background:#edf5ff;box-shadow:0 0 0 4px rgba(47,109,179,.13);transform:translateY(-1px)}
.file-upload input[type="file"]{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;border-radius:0;opacity:0;cursor:pointer}
.file-upload__button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;flex:0 0 auto;min-height:40px;padding:.55rem .8rem;border-radius:9px;background:var(--navy);color:#fff;font-size:.86rem;font-weight:700;line-height:1;box-shadow:0 5px 14px rgba(10,31,51,.16)}
.file-upload__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute);font-size:.86rem}
.file-upload.is-dragging .file-upload__name{color:var(--navy);font-weight:700}
.file-upload__name.hat-fehler{color:#b8291a;font-weight:600}
/* "oder Foto hier ablegen" ist ein Drag-und-Drop-Hinweis - auf Touch gibt es
   kein Ablegen, dort bleibt der leere Zustand stumm. Vorschau und Fehlermeldung
   (hat-bild/hat-fehler) erscheinen weiterhin. */
@media(max-width:860px){.file-upload__name:not(.hat-bild):not(.hat-fehler){display:none}}
@media(max-width:480px){.file-upload{align-items:stretch;flex-direction:column;gap:.55rem;padding:.55rem}.file-upload__name{padding:0 .25rem .2rem;text-align:center}.file-upload__button{width:100%}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.seg{display:flex;gap:.5rem;flex-wrap:wrap}
/* Schlanker als ein Knopf: Chips sind Auswahl, keine Aktion (Christian, Runde 3).
   Die Mobil-Kacheln der Schadensmeldung behalten ihre 56px-Touch-Flaeche. */
.seg label{position:relative;display:inline-flex;align-items:center;min-height:36px;border:1px solid var(--line-strong);border-radius:999px;padding:.3rem .85rem;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .18s}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg label:hover{border-color:var(--navy)}
.seg label:has(input:checked){border-color:var(--navy);background:var(--soft);color:var(--navy)}
/* Variante: feste Anzahl Optionen gleichmäßig in einer Zeile (Segmented Control) */
.seg--row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
/* Tastatur-Fokus muss sichtbar sein, obwohl der Knopf selbst durchsichtig ist. */
.seg label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}

/* Fehlende Pflichtangabe erst markieren, wenn jemand das Feld verlassen oder
   abgeschickt hat -- nicht schon beim ersten Antippen. */
.form input:user-invalid,.form textarea:user-invalid,.form select:user-invalid{border-color:#d1301c;background:#fff6f5}
.seg:has(input:user-invalid) label{border-color:#d1301c}
.form-pflicht{margin:0 0 1.2rem;font-size:.85rem;color:var(--mute)}
.seg--row label{justify-content:center;text-align:center;padding:.3rem .5rem;font-size:.85rem;line-height:1.25}
@media(max-width:560px){.seg--row{grid-template-columns:1fr}}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--mute)}
.consent input{margin-top:.25rem}
/* Der Verweis auf die Datenschutzerklaerung war vom Fliesstext nicht zu
   unterscheiden -- niemand klickt, was nicht nach Link aussieht. */
.consent a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.consent a:hover,.consent a:focus-visible{color:var(--blue);text-decoration-thickness:2px}
.form-note{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;font-size:.9rem;color:var(--ink)}
/* Unter dem Absenden-Knopf: leiser Hinweis, keine Box -- er beantwortet nur
   die Frage "kriege ich was?", er soll nicht mit dem Knopf konkurrieren. */
.form-hinweis-kopie{margin-top:.6rem;font-size:.85rem;color:var(--mute)}


/* ===== footer ===== */
footer{background:var(--navy-deep);color:#fff;padding:2.4rem 0 2rem;border-top:1px solid rgba(255,255,255,.1)}
footer .cols{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
footer .fbrand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:700}
footer .fbrand img{height:76px;width:auto;display:block}
/* Muss NACH der Regel oben stehen, nicht im Handy-Block weiter oben: bei
   gleicher Spezifitaet gewinnt die spaetere Regel, sonst bliebe es bei 76px. */
@media(max-width:860px){footer .fbrand img{height:60px}}
footer a{color:rgba(255,255,255,.8)}footer a:hover{color:#fff}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.9rem}
footer .legal{opacity:.55;font-size:.78rem;margin-top:1.4rem}

/* ===== Mobil-Feinschliff ===== */
@media(max-width:560px){
  section{padding:3.5rem 0}
  .vert{padding:1.9rem 1.3rem}
  .about{padding:1.4rem}
  .hero h1{margin:.7rem 0 .9rem}
  .hero .cta{flex-direction:column;align-items:stretch;gap:.6rem}
  .hero .cta .btn{width:100%;justify-content:center;padding:.95rem 1.3rem}
  .hero__assure{align-items:flex-start}
}

/* ===== Floating-Kontakt-Buttons (von gh.js injiziert, nicht auf kontakt.html) =====
   z-index 33 liegt bewusst UNTER Scrim (34) und Menü-Panel (35): bei offenem
   Mobilmenü sollen die Buttons nicht darüber schweben. */
.fab{position:fixed;right:1rem;bottom:1rem;z-index:33;display:flex;flex-direction:column;gap:.55rem;align-items:flex-end}
/* Am Desktop schwebt nur der E-Mail-Knopf; "Jetzt anrufen" doppelte dort die
   sichtbare Telefonnummer. Am Handy bleiben beide (Daumen-Weg). */
@media(min-width:861px){.fab .fab--call{display:none}}
.fab a{display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1.05rem;border-radius:999px;font-family:var(--font-sans);font-weight:700;font-size:.85rem;line-height:1;white-space:nowrap;box-shadow:0 6px 22px -6px rgba(15,30,50,.45);border:1px solid transparent;transition:transform .16s var(--ease),background .2s}
.fab a:hover{transform:translateY(-2px)}
.fab .ic{width:1.15em;height:1.15em;flex:0 0 auto}
.fab .fab--call{background:var(--navy);color:#fff}
.fab .fab--call:hover{background:var(--navy-deep)}
.fab .fab--alt{background:#fff;color:var(--navy);border-color:var(--line-strong)}
.fab .fab--alt:hover{background:var(--soft-2)}
.fab .fab-desk{display:inline-flex}
.fab .fab-mob{display:none}
.fab .fab-txt-desk{display:inline}
.fab .fab-txt-mob{display:none}
@media(max-width:860px){
  .fab{right:.8rem;bottom:.8rem;gap:.5rem}
  .fab a{padding:.68rem .95rem;font-size:.8rem}
  .fab .fab-desk{display:none}
  .fab .fab-mob{display:inline-flex}
  .fab .fab-txt-desk{display:none}
  .fab .fab-txt-mob{display:inline}
}
@media print{.fab{display:none}}
/* Im Kundenbereich sitzt Christians Feedback-Leiste unten rechts — Buttons weichen nach oben.
   Die Klasse setzt nur die Auslieferungs-Kopie; auf der Live-Seite greift die Regel nie. */
.review-aktiv .fab{bottom:5.2rem}
@media(max-width:860px){.review-aktiv .fab{bottom:4.8rem}}


/* Karte im Scroll-Fokus (Klasse setzt gh.js, nur unter 560px). Steht bewusst am
   Dateiende, damit sie die Grundrahmen der Kartentypen ueberschreibt. */
@media(max-width:560px){
  .im-fokus{border-color:var(--blue);box-shadow:0 10px 28px -14px rgba(20,45,80,.42);
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
  .svc.im-fokus .ic-wrap{background:var(--navy);color:#fff;border-color:var(--navy)}
  .svc.im-fokus .ic-wrap .ic:not(:only-child){opacity:0;transform:rotate(90deg) scale(.4)}
  .svc.im-fokus .ic-wrap .ic-alt{opacity:1;transform:rotate(0) scale(1)}
}

/* Zitat-Fassung des Über-uns-Blocks auf der Startseite: nur Zitat, Signatur und Link,
   alles auf einer Mittelachse. Foto bleibt, aber schmaler — Christian: „Bild evtl. kleiner". */
.about--zitat{grid-template-columns:.6fr 1.4fr;align-items:center}
.about--zitat .about__text{text-align:center;display:flex;flex-direction:column;align-items:center}
.about--zitat .about__quote{max-width:36ch;margin:0 auto}
.about--zitat .sig{justify-content:center}
@media(max-width:820px){
  .about--zitat{grid-template-columns:1fr}
  .about--zitat .about__photo{width:100%;aspect-ratio:1/1;max-width:none;margin:0 auto}
}

/* Honeypot: aus dem Blickfeld geschoben statt display:none — manche Bots ueberspringen
   ausgeblendete Felder, verschobene fuellen sie aus. Fuer Screenreader per aria-hidden
   und tabindex="-1" im Markup ausgenommen. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ===== Mobilansicht der Maengelanzeige =====
   Wer dieses Formular am Handy ausfuellt, tut das fast immer unterwegs: im
   Treppenhaus, einhaendig, im Stehen. Deshalb ist das hier die normale
   Mobilansicht der Seite und nicht an den QR-Code gekoppelt -- ueber den kommt
   nur die vorbelegte Adresse dazu.

   Zwei Eingriffe: die Reihenfolge dreht sich (Notfall zuerst, dann Objekt, dann
   Foto, dann Antippen, Tippen zuletzt) und die Antippflaechen werden groesser.
   Sortiert wird ueber order, damit ohne CSS nichts durcheinandergeraet.

   Am Schreibtisch bleibt das zweispaltige Formular, wie es war. */
@media(max-width:820px){
  .form--melden{gap:1.9rem}
  .form--melden .field{gap:.55rem}
  .form--melden > *{order:20}
  .form--melden [data-feld="notfall"]{order:1}
  .form--melden .form-pflicht{order:2;margin-bottom:0}
  .form--melden [data-feld="objekt"]{order:3}
  .form--melden [data-feld="foto"]{order:4}
  .form--melden [data-feld="ort"]{order:5}
  .form--melden [data-feld="art"]{order:6}
  .form--melden [data-feld="beschreibung"]{order:7}
  .form--melden [data-feld="kontakt"]{order:8}
  .form--melden .consent{order:9}
  .form--melden [data-feld="senden"]{order:10}

  /* Der Notfall-Hinweis steht hier ganz oben und muss auffallen: wer bei
     Rohrbruch meldet, soll anrufen statt zu tippen. */
  .form--melden [data-feld="notfall"]{background:#fff6f5;border-color:#f3c9c3}
  .form--melden [data-feld="notfall"] a{display:inline-block;margin-top:.3rem;
    font-size:1.05rem;font-weight:700;color:#b8291a}

  /* Antippflaechen durchgehend ueber 48 px, damit im Stehen nichts danebengeht. */
  .form--melden .seg{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .form--melden .seg label{min-height:56px;justify-content:flex-start;border-radius:12px;
    padding:.85rem 1.1rem;font-size:.9rem;line-height:1.3;hyphens:auto}
  .form--melden .file-upload{min-height:76px;border-width:2px}
  .form--melden .file-upload__button{min-height:52px;padding:.8rem 1.1rem;font-size:.95rem}
  .form--melden [data-feld="senden"] .btn{width:100%;justify-content:center;
    min-height:56px;font-size:1.05rem}
  .form--melden .form-row{grid-template-columns:1fr}

  /* Die Floating-Buttons laegen sonst ueber den Antippflaechen. Die Notfallnummer
     steht auf dieser Seite ohnehin ganz oben im Formular. */
  body.seite-melden .fab{display:none}
}

/* Unter 360 px wird zweispaltig zu eng. Darueber bleiben die Chips ueber 150 px
   breit, das trifft man auch im Stehen sicher -- einspaltig waere die Seite bei
   14 Optionen dreimal so lang. */
@media(max-width:359px){
  .form--melden .seg{grid-template-columns:1fr}
}


/* Zweiter Foto-Weg: Kamera direkt. Nur mobil sinnvoll -- am Schreibtisch gibt es
   in aller Regel keine, und der Dateidialog deckt dort alles ab. */
.foto-kamera{display:none}
@media(max-width:820px){
  .foto-kamera{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    width:100%;min-height:52px;margin-top:.6rem;padding:.8rem 1.1rem;border-radius:12px;
    border:1.5px solid var(--navy);background:#fff;color:var(--navy);
    font-family:var(--font-sans);font-size:.95rem;font-weight:700;cursor:pointer}
  .foto-kamera:hover{background:var(--soft)}
  .foto-kamera .ic{width:1.15em;height:1.15em}
}

/* Foto-Vorschau statt Dateiname. Handy-Aufnahmen heissen 17858798120458859745.jpg --
   das Bild beantwortet die einzige Frage, die zaehlt: ist es das richtige? */
.file-upload__name.hat-bild{display:flex;align-items:center;gap:.7rem;min-width:0;
  overflow:visible;white-space:normal}
.file-upload__vorschau{flex:0 0 auto;width:44px;height:44px;object-fit:cover;
  border-radius:8px;border:1px solid var(--line-strong);background:var(--soft)}
.file-upload__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-weight:600}
/* Liegt ueber dem unsichtbaren Datei-Feld (z-index 2), sonst waere es nicht klickbar. */
.file-upload__weg{position:relative;z-index:3;flex:0 0 auto;width:30px;height:30px;
  display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;
  background:#fff;color:var(--mute);font-size:1.2rem;line-height:1;cursor:pointer;
  font-family:var(--font-sans);padding:0}
.file-upload__weg:hover{border-color:#d1301c;color:#d1301c}
@media(max-width:820px){
  .file-upload__vorschau{width:56px;height:56px}
  .file-upload__weg{width:36px;height:36px}
}

/* ===== Karriere: Vorteile und Stellen =====
   Die Vorteile gelten fuer alle Stellen und stehen deshalb einmal oben, offen
   sichtbar -- sie sind das Recruiting-Argument. Gefaltet wird nur die einzelne
   Stelle: wer Reinigungskraft sucht, interessiert der Hausmeister nicht. */
.vorteile{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.85rem 2rem;margin-top:.4rem}
.vorteile li{position:relative;padding-left:1.9rem;color:var(--mute);line-height:1.5}
.vorteile li b{color:var(--ink);font-weight:600}
.vorteile li::before{content:"";position:absolute;left:0;top:.42em;width:1.15rem;height:1.15rem;
  border-radius:50%;background:var(--blue);
  -webkit-mask: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 13l4 4L19 7'/%3E%3C/svg%3E") center/78% no-repeat;
  mask: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 13l4 4L19 7'/%3E%3C/svg%3E") center/78% no-repeat}

/* <details> statt JavaScript: funktioniert ohne Skript, bleibt druckbar und
   fuer Suchmaschinen lesbar -- bei einer Stellenanzeige beides wichtig. */
.stelle{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:1rem;
  overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.stelle[open]{border-color:var(--line-strong);box-shadow:var(--shadow)}
.stelle summary{display:flex;align-items:center;gap:1.1rem;padding:1.3rem 1.5rem;cursor:pointer;
  list-style:none;min-height:64px}
.stelle summary::-webkit-details-marker{display:none}
.stelle summary:hover{background:var(--soft)}
.stelle summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.stelle-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--soft-2);
  color:var(--navy);display:grid;place-items:center;font-size:1.25rem}
.stelle-kopf{flex:1;min-width:0}
.stelle-titel{display:block;font-family:var(--font-serif);font-size:1.15rem;font-weight:600;
  color:var(--navy-deep);line-height:1.25}
.stelle-form{display:block;font-size:.88rem;color:var(--mute);margin-top:.15rem}
.stelle-pfeil{flex:0 0 auto;width:12px;height:12px;border-right:2.5px solid var(--navy);
  border-bottom:2.5px solid var(--navy);transform:rotate(45deg);margin-right:.35rem;
  transition:transform .22s var(--ease)}
.stelle[open] .stelle-pfeil{transform:rotate(-135deg)}
.stelle-inhalt{padding:0 1.5rem 1.5rem;border-top:1px solid var(--line);margin-top:-1px;padding-top:1.3rem}
.stelle-spalten{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.4rem}
.stelle-inhalt h3{font-family:var(--font-sans);font-size:.68rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:.7rem}
.stelle-inhalt ul{list-style:none}
.stelle-inhalt li{position:relative;padding-left:1.1rem;color:var(--mute);line-height:1.55;
  margin-bottom:.45rem}
.stelle-inhalt li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--line-strong)}
@media(max-width:760px){
  .vorteile{grid-template-columns:1fr;gap:.75rem}
  .stelle summary{padding:1.1rem 1.1rem;gap:.85rem}
  .stelle-ic{width:40px;height:40px;font-size:1.1rem}
  .stelle-titel{font-size:1.05rem}
  .stelle-inhalt{padding:1.2rem 1.1rem 1.3rem}
  .stelle-spalten{grid-template-columns:1fr;gap:1.4rem}
}

/* Schwebende Kontakt-Knoepfe verschwinden ueber dem Footer -- dort stehen Telefon,
   Mail und die Links ausgeschrieben, und der Knopf verdeckte sie teilweise.
   visibility statt display, damit der Uebergang laeuft und der Knopf im
   ausgeblendeten Zustand nicht per Tastatur erreichbar bleibt. */
.fab{transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.fab--versteckt{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}