/* ==================== WO ÄNDERE ICH WAS? ====================
   Farben / Schriften ........ :root (direkt unter diesem Kommentar)
   Header + Burger ........... "HEADER"
   Menü-Overlay .............. "MENÜ-OVERLAY"
   Hero (Bild-Filter, Titel) . "HERO"
   Hero-Link (Pfeil-Link) .... ".link-arrow"
   Zahlen-Kästchen ........... "Zahlen: stark transparentes Milchglas"
   Dienstleistungen / Intro .. "SECTIONS"
   Footer .................... "FOOTER"
   Hero-Video ................ ".hero-video" (Datei: video/hero.mp4, im HTML bei "HERO")
   Bilder (Pfade) ............ :root: --hero-img, --logo-img, --team-1, --team-2 (Dateien in ../img/)
   Texte/HTML ................ index.html (Kommentare wie "HERO", "INTRO")
   Zähl-Animation / Menü ..... js/main.js (data-count im HTML = Zielzahl)
   ============================================================ */
:root{
  --hero-img:url('../img/hero.png');
  --logo-img:url('../img/logo.png');
  --team-1:url('../img/team-1.png');
  --team-2:url('../img/team-2.png');
  --navy:#1b2340;
  --navy-2:#141b33;
  --navy-3:#0e1326;
  --blue:#5b6f9c;
  --blue-deep:#34508c;
  --blue-soft:#a9bff0;
  --line:#2b3558;
  --ink:#1b2340;
  --muted:#5c6480;
  --white:#fff;
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(20px,5vw,88px);
  --container:1500px; /* gemeinsame Inhaltsbreite: alle Abschnitte richten sich daran aus */

  /* Schriftskala (Regel: kleinste Schrift 18px, Stufen mind. 8px auseinander, Zeilenhöhe = Schrift + 10px)
     Gilt für die ganze Seite AUSSER Hero (der darf grösser/speziell sein). */
  --fs-p:18px;  --lh-p:28px;     /* Text, Labels, Buttons, Footer */
  --fs-h3:26px; --lh-h3:36px;    /* Kartentitel, Listentitel */
  --fs-h2:42px; --lh-h2:52px;    /* Abschnittstitel */
  --fs-hero:clamp(2.5rem,5.8vw,5rem); /* Hero-Titel (frei, gross) */
}
@media (max-width:720px){
  :root{ --fs-h2:34px; --lh-h2:44px; }   /* Handy: H2 kleiner, Rest bleibt */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:var(--fs-p);color:var(--ink);background:#fff;line-height:var(--lh-p);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
body.menu-open{overflow:hidden}

/* Alle Haupt- und Übertitel (H1 + H2) in Source Serif 4 */
h1,h2{font-family:'Source Serif 4', Georgia, serif;font-weight:600}

/* ============ HEADER (nur Logo + Burger) ============ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.header.scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:12px var(--gutter);
  box-shadow:0 1px 0 rgba(27,35,64,.08);
}
/* Logo (Bild, Seitenverhältnis 185:90). Bilddatei: img/logo.png (Pfad im :root) */
.logo{
  display:block;aspect-ratio:185/90;
  background:var(--logo-img) center/contain no-repeat;
  font-size:0;color:transparent;overflow:hidden;
  transition:height .35s ease;
}

.header{--hb:56px}            /* Höhe von Logo UND Burger */
.header.scrolled{--hb:44px}
.logo{height:var(--hb)}
.burger{
  display:flex;align-items:center;gap:16px;background:none;border:0;color:#fff;
  padding:0;transition:color .3s ease;
}
.header.scrolled .burger{color:var(--ink)}
.burger-label{font-size:var(--fs-p);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.burger-icon{
  width:calc(var(--hb)*.6);height:var(--hb);color:inherit;  /* Farbe der Striche = Farbe von .burger (weiss auf Hero, dunkel im weissen Header) */
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;
  transition:width .35s ease,height .35s ease;
}
.burger-icon i{display:block;height:3px;background:currentColor;width:100%;transition:width .3s ease}
.burger-icon i:nth-child(2){width:72%}
.burger:hover .burger-icon i:nth-child(2){width:100%}

/* ============ MENÜ-OVERLAY ============ */
.menu{
  position:fixed;inset:0;z-index:200;background:var(--navy);color:#fff;
  display:grid;grid-template-columns:1.2fr 1fr;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .65s cubic-bezier(.77,0,.18,1), visibility 0s linear .65s;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .65s cubic-bezier(.77,0,.18,1), visibility 0s}
.menu-top{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter)}
.menu-close{display:flex;align-items:center;gap:14px;background:none;border:0;color:#fff;font-size:var(--fs-p);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.menu-close .x{width:28px;height:28px;position:relative}
.menu-close .x::before,.menu-close .x::after{content:"";position:absolute;left:0;top:13px;width:100%;height:2px;background:#fff}
.menu-close .x::before{transform:rotate(45deg)}
.menu-close .x::after{transform:rotate(-45deg)}
.menu-nav{display:flex;flex-direction:column;justify-content:center;padding:120px var(--gutter) 60px}
.menu-nav a{
  display:flex;align-items:baseline;gap:22px;
  font-family:var(--serif);font-size:clamp(2rem,4.2vw,3.5rem);font-weight:400;line-height:1.25;
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1);
  transition:color .25s ease, padding-left .25s ease;
}
/* Einblend-Animation: gilt für die Hauptpunkte (Links und die Gruppe "Dienstleistungen") */
.menu-nav > a,.menu-nav > .menu-group{
  opacity:0;transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease, color .25s ease, padding-left .25s ease;
}
.menu-nav .bar{flex:none;align-self:center;width:34px;height:5px;background:var(--blue);transition:width .3s ease,background .3s ease}
.menu-nav a:hover .bar{width:64px;background:var(--blue-soft)}
.menu.open .menu-nav > a,.menu.open .menu-nav > .menu-group{opacity:1;transform:none}
.menu.open .menu-nav > :nth-child(1){transition-delay:.25s,.25s,.25s,.25s}
.menu.open .menu-nav > :nth-child(2){transition-delay:.31s,.31s,.31s,.31s}
.menu.open .menu-nav > :nth-child(3){transition-delay:.37s,.37s,.37s,.37s}
.menu.open .menu-nav > :nth-child(4){transition-delay:.43s,.43s,.43s,.43s}
.menu.open .menu-nav > :nth-child(5){transition-delay:.49s,.49s,.49s,.49s}
.menu-nav a:hover{color:var(--blue-soft);padding-left:12px}
.menu-nav > a:hover{transition-delay:0s}

/* Untermenü "Dienstleistungen" */
.menu-group-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.1)}
.menu-group-row > a{flex:1;border-bottom:0}
.sub-toggle{
  flex:none;width:64px;background:none;border:0;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.sub-toggle span{ /* Pfeil nach unten, dreht sich beim Öffnen */
  width:14px;height:14px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .3s ease,color .25s ease;
}
.sub-toggle:hover{color:var(--blue-soft)}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.sub > ul{overflow:hidden;list-style:none;min-height:0}
.menu-group.open .sub{grid-template-rows:1fr}
.menu-group.open .sub-toggle span{transform:translateY(3px) rotate(-135deg)}
@media (hover:hover){  /* Maus: beim Drüberfahren aufklappen. Tastatur: wenn ein Element Fokus hat */
  .menu-group:hover .sub,.menu-group:has(:focus-visible) .sub{grid-template-rows:1fr}
  .menu-group:hover .sub-toggle span,.menu-group:has(:focus-visible) .sub-toggle span{transform:translateY(3px) rotate(-135deg)}
}
.sub a{
  font-family:var(--sans);font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:400;
  padding:12px 0 12px 56px;color:rgba(255,255,255,.85);
}
.sub a:hover{padding-left:68px}
.sub li:last-child a{border-bottom:0}
.menu-side{
  background:var(--navy-2);padding:120px var(--gutter) 60px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.menu-side h4{font-size:var(--fs-p);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-soft);font-weight:500;margin-bottom:14px}
.menu-side p,.menu-side a{font-size:var(--fs-p);color:rgba(255,255,255,.88);line-height:var(--lh-p)}
.menu-side a:hover{color:#fff;text-decoration:underline}
.menu-block{margin-bottom:36px}
.menu-cta{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  border:1px solid rgba(255,255,255,.5);padding:14px 26px;font-size:var(--fs-p);
  transition:background .25s ease,color .25s ease;
}
.menu-side .menu-cta:hover{background:#fff;color:var(--navy);text-decoration:none} /* spezifischer als .menu-side a:hover, sonst weiss auf weiss */

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px var(--gutter) 48px;overflow:hidden;isolation:isolate;
  background:var(--navy);
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background:var(--hero-img) center 60%/cover no-repeat;
  transform:scale(1.06);
  animation:heroZoom 14s ease-out forwards;
}
@keyframes heroZoom{to{transform:scale(1)}}
/* Hero-Video: liegt über dem Bild (--hero-img bleibt als Fallback/Ladebild), blendet ein sobald es läuft */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-video.playing{opacity:1}
/* Dunkelblauer Filter: oben/links für den Text, unten für die Zahlen, Mitte bleibt offen fürs Bild */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(14,22,52,.62) 0%,rgba(14,22,52,.3) 55%,rgba(14,22,52,.08) 100%),
    linear-gradient(180deg,rgba(14,22,52,.35) 0%,rgba(14,22,52,.12) 30%,rgba(14,22,52,.12) 52%,rgba(14,22,52,.78) 100%),
    rgba(27,35,80,.16);
}
.hero-content{max-width:820px;margin-bottom:clamp(40px,9vh,110px)}
.eyebrow{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.92);margin-bottom:22px}
.eyebrow em{font-style:normal;opacity:.5;margin:0 .6em}
.hero h1{
  font-family:var(--serif);font-weight:600;line-height:1.08;
  font-size:var(--fs-hero);letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(10,16,40,.35);
}
.hero h1{text-wrap:balance}
.hero h1 .accent{color:var(--blue-soft);white-space:nowrap} /* 'nicht allein.' bricht nie auseinander */
.hero-lead{margin-top:26px;max-width:540px;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:300;color:rgba(255,255,255,.94);line-height:1.6;text-shadow:0 1px 14px rgba(10,16,40,.4)}
.hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 28px;font-size:var(--fs-p);font-weight:500;
  border:1px solid #fff;color:#fff;background:transparent;transition:background .25s ease,color .25s ease,gap .25s ease;
}
.btn:hover{background:#fff;color:var(--navy);gap:18px}
.btn.solid{background:#fff;color:var(--navy)}
.btn.solid:hover{background:var(--blue-soft);border-color:var(--blue-soft)}
.btn.dark{color:var(--ink);border-color:var(--ink)}
.btn.dark:hover{background:var(--ink);color:#fff}

/* ===== Text-Link mit Pfeil (z.B. "Unsere Dienstleistungen →" im Hero) ===== */
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--blue-soft);font-size:var(--fs-p);font-weight:400;
  border:0;background:none;padding:4px 0;
  transition:gap .25s ease,color .25s ease;
}
.link-arrow:hover{gap:16px;color:#fff}

/* Variante für hellen Hintergrund (z.B. Intro-Abschnitt) */
.link-arrow.on-light{color:var(--blue-deep);font-weight:500}
.link-arrow.on-light:hover{color:var(--ink)}

/* Zahlen: stark transparentes Milchglas (wie Hoheleye) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{
  display:flex;align-items:center;gap:22px;
  padding:22px 26px;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(14px) brightness(.8);-webkit-backdrop-filter:blur(14px) brightness(.8);
  box-shadow:0 10px 34px rgba(8,12,32,.22);
  opacity:0;transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease, background .3s ease;
}
.stat.in{opacity:1;transform:none}
.stat:nth-child(2){transition-delay:.12s}
.stat:nth-child(3){transition-delay:.24s}
.stat:nth-child(4){transition-delay:.36s}
.stat:hover{background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 100%)}
.stat-num{
  font-family:var(--serif);font-weight:600;font-size:clamp(2rem,3.4vw,3rem);line-height:1;
  min-width:2.4ch;font-variant-numeric:tabular-nums;
}
.stat-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.45)}
.stat-label{font-size:.88rem;line-height:1.4;color:rgba(255,255,255,.95);font-weight:500}
.scroll-hint{
  position:absolute;right:var(--gutter);top:50%;writing-mode:vertical-rl;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);
  display:flex;align-items:center;gap:14px;
}
.scroll-hint::after{content:"";width:1px;height:60px;background:rgba(255,255,255,.7);animation:pulse 2s ease-in-out infinite;transform-origin:top}
@keyframes pulse{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ============ SECTIONS ============ */
section{position:relative}
.intro{padding:clamp(70px,10vw,140px) var(--gutter);display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,8vw,140px);align-items:center;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto}
.intro h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-h2)}
.intro p.sub{margin:16px 0 30px;color:var(--muted);max-width:440px}
.points{border-top:1px solid var(--ink)}
.point{padding:28px 10px 30px;border-bottom:1px solid var(--ink)}
.point h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;display:flex;align-items:center;gap:14px;margin-bottom:8px}
.point h3::before{content:"";width:11px;height:11px;background:var(--blue);flex:none}
.point p{color:var(--muted);font-size:var(--fs-p);line-height:var(--lh-p);padding-left:25px}

.services{background:var(--navy);color:#fff;padding:clamp(60px,8vw,110px) var(--gutter)}
.services-inner{max-width:var(--container);margin:0 auto}
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.services h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-h2)}
.tabs{display:flex;gap:8px}
.tab{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:9px 20px;font-size:var(--fs-p);transition:all .25s ease}
.tab.active,.tab:hover{background:#fff;color:var(--navy)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:#fff;color:var(--ink);padding:26px 30px 28px;position:relative;
  display:flex;flex-direction:column;gap:8px;min-height:190px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.card::before{content:"";width:34px;height:5px;background:var(--blue);margin-bottom:12px}
.card h3{font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-h3)}
.card p{color:var(--muted);font-size:var(--fs-p);line-height:var(--lh-p);flex:1}
.card a{color:var(--blue);font-size:var(--fs-p);font-weight:500;margin-top:6px}
.card a:hover{text-decoration:underline}
.card.hidden{display:none}

/* ============ TEAM-SEITE ============ */
[hidden]{display:none!important}
.page-head{background:var(--navy);color:#fff;padding:190px var(--gutter) 90px;position:relative;overflow:hidden}
.page-head::after{content:attr(data-mark);position:absolute;right:var(--gutter);bottom:-70px;font-family:var(--serif);font-weight:700;font-size:15rem;line-height:1;color:rgba(91,111,156,.13);pointer-events:none}
.page-head-inner{max-width:var(--container);margin:0 auto;position:relative;z-index:1}
.page-head h1{font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1.1}
.page-head p{margin-top:20px;max-width:560px;color:rgba(255,255,255,.85);font-size:var(--fs-p);line-height:var(--lh-p);font-weight:300}
.team{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:clamp(60px,8vw,110px) var(--gutter);display:grid;gap:clamp(60px,8vw,100px)}
.member{
  display:grid;grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(32px,6vw,90px);align-items:start;
  border-top:1px solid var(--ink);padding-top:44px;
}
.member-photo{
  aspect-ratio:3/4;background:var(--team-img) center top/cover no-repeat;
  filter:grayscale(1);box-shadow:16px 16px 0 var(--blue);margin:0 16px 16px 0;
}
.role{display:flex;align-items:center;gap:12px;color:var(--blue);font-size:var(--fs-p);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.role::before{content:"";width:11px;height:11px;background:var(--blue)}
.member h2{font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:22px}
.member-text p{color:var(--muted);max-width:620px;margin-bottom:14px}
.member-facts{list-style:none;margin:26px 0 0;border-top:1px solid rgba(27,35,64,.2);max-width:620px}
.member-facts li{display:flex;gap:24px;padding:12px 0;border-bottom:1px solid rgba(27,35,64,.2);font-size:var(--fs-p)}
.member-facts span{min-width:130px;color:var(--muted)}
.member-facts a{color:var(--blue);font-weight:500}
.member-facts a:hover{text-decoration:underline}
.member-list{list-style:none;max-width:660px}
.member-list li{position:relative;padding:5px 0 5px 24px;color:var(--ink)}
.member-list li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;background:var(--blue)}
.member-list ul{list-style:none;margin:6px 0 4px}
.member-list ul li{color:var(--muted);font-size:var(--fs-p);padding:3px 0 3px 22px}
.member-list ul li::before{width:6px;height:6px;background:none;border:1.5px solid var(--blue);top:.85em}
.network{background:var(--navy);color:#fff;padding:clamp(56px,7vw,90px) var(--gutter)}
.network-inner{max-width:var(--container);margin:0 auto}
.network h2{font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:16px}
.network p{max-width:760px;color:rgba(255,255,255,.88);font-size:var(--fs-p);line-height:var(--lh-p)}
.network strong{color:#fff;font-weight:600}
@media (max-width:720px){
  .member{grid-template-columns:1fr}
  .member-photo{max-width:300px}
  .member-facts li{flex-direction:column;gap:2px}
  .page-head::after{font-size:8rem}
}

/* ============ FOOTER (dunkler als Dienstleistungen, damit der Übergang sauber ist) ============ */
footer{
  background:var(--navy-3);color:#fff;padding:80px var(--gutter) 28px;position:relative;
}
footer::before{ /* feine Akzentlinie als Übergang */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue) 50%,var(--blue-soft));
}
.footer-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
footer .logo{height:64px}
.footer-about{margin-top:22px;color:rgba(255,255,255,.7);font-size:var(--fs-p);max-width:340px}
footer h4{font-size:var(--fs-p);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:10px}
footer h4::before{content:"";width:8px;height:8px;background:var(--blue)}
footer ul{list-style:none}
footer li,footer address{font-style:normal;color:rgba(255,255,255,.72);font-size:var(--fs-p);line-height:var(--lh-p)}
footer a:hover{color:#fff}
.addr{margin-top:18px}
.footer-bottom{max-width:var(--container);margin:50px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:var(--fs-p);color:rgba(255,255,255,.5)}

/* ============ UNTERSEITEN: KONTAKT + DIENSTLEISTUNG ============ */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px;color:rgba(255,255,255,.7)}
.crumbs a{color:var(--blue-soft)}
.crumbs a:hover{color:#fff;text-decoration:underline}

.btn.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.navy:hover{background:#fff;color:var(--navy)}

.contact,.service-body{
  max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;
  padding:clamp(60px,8vw,110px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(40px,6vw,100px);align-items:start;
}

/* Formular */
.form{display:grid;gap:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-weight:500}
.req{color:var(--blue)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:#fff;width:100%;
  border:1px solid var(--ink);border-radius:0;padding:12px 16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{min-height:180px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-deep);box-shadow:0 0 0 3px var(--blue-soft);
}
.check{display:flex;gap:14px;align-items:flex-start}
.check input{flex:none;width:24px;height:24px;margin-top:2px;accent-color:var(--blue-deep)}
.form-note{color:var(--muted)}
.form-success{border:1px solid var(--ink);border-left:6px solid var(--blue);padding:36px}
.form-success h2{font-size:var(--fs-h3);line-height:var(--lh-h3);margin-bottom:10px}
.form-success p{color:var(--muted);margin-bottom:24px}

/* Info-Box (Kontakt-Seite und Dienstleistungs-Seite) */
.info-card{background:var(--navy);color:#fff;padding:36px 36px 28px}
.info-card::before{content:"";display:block;width:34px;height:5px;background:var(--blue-soft);margin-bottom:22px}
.info-card h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;margin-bottom:14px}
.info-card > p{color:rgba(255,255,255,.85);margin-bottom:22px}
.info-cta{margin-bottom:30px}
.info-block{margin-bottom:24px}
.info-block h4{font-size:var(--fs-p);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:6px}
.info-card a:not(.btn){color:#fff}
.info-card a:not(.btn):hover{text-decoration:underline}

/* Dienstleistungs-Seite */
.service-main h2{font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:20px}
.service-main h2:not(:first-child){margin-top:60px}
.service-main p{color:var(--muted);max-width:680px;margin-bottom:16px}
.service-main .member-list{max-width:680px}
.steps{list-style:none;max-width:680px;border-top:1px solid var(--ink)}
.steps li{padding:22px 0 24px;border-bottom:1px solid var(--ink)}
.steps li::before{content:"";display:block;width:34px;height:5px;background:var(--blue);margin-bottom:12px}
.steps strong{display:block;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;margin-bottom:4px}
.steps span{color:var(--muted)}
.service-aside{position:sticky;top:110px}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .intro{grid-template-columns:1fr}
  .contact,.service-body{grid-template-columns:1fr}
  .service-aside{position:static}
  .cards{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .scroll-hint{display:none}
}
@media (max-width:720px){
  .menu{grid-template-columns:1fr;overflow-y:auto}
  .menu-side{padding-top:40px}
  .burger-label{display:none}
  .sub a{padding-left:34px}
  .sub a:hover{padding-left:44px}
  .cards{grid-template-columns:1fr}
  /* Zahlen als Liste untereinander: Zahl | Strich | Text, alle Texte linksbündig auf einer Linie */
  .stats{grid-template-columns:1fr;gap:10px}
  .stat{display:grid;grid-template-columns:92px 1px 1fr;align-items:center;gap:16px;padding:14px 18px}
  .stat-num{min-width:0}
  .stat-label{font-size:1rem}
  .eyebrow{letter-spacing:.08em;font-size:.75rem;text-wrap:balance}
  .eyebrow em{margin:0 .35em}
  .tabs{flex-wrap:wrap}
  .form-row{grid-template-columns:1fr}
  .info-card{padding:28px 24px 20px}
  .tab{padding:8px 14px}
  .hero{padding-top:110px}
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .hero-video{display:none}   /* wer reduzierte Bewegung eingestellt hat, sieht nur das Bild */
  .stat{opacity:1;transform:none}
}


/* ==================================================================
   ÜBER UNS
   ================================================================== */
.about{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:clamp(60px,8vw,110px) var(--gutter);display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.about h2,.locations h2{font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:24px}
.about-text p{color:var(--muted);max-width:640px;margin-bottom:16px}
.timeline{list-style:none;border-top:1px solid rgba(27,35,64,.2)}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid rgba(27,35,64,.2)}
.timeline strong{font-family:var(--serif);font-size:var(--fs-h3);line-height:var(--lh-h3);color:var(--navy);font-weight:600}
.timeline span{color:var(--muted)}
.quote{background:var(--navy);color:#fff;padding:clamp(60px,8vw,110px) var(--gutter)}
.quote-inner{max-width:var(--container);margin:0 auto}
.quote-text{font-family:var(--serif);font-size:var(--fs-h2);line-height:var(--lh-h2);max-width:900px;font-weight:600}
.quote-sub{margin-top:20px;color:var(--blue-soft);letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-p)}
.locations{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:clamp(60px,8vw,110px) var(--gutter)}
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.loc{border-top:5px solid var(--blue);background:#f3f5f9;padding:36px}
.loc h3{font-size:var(--fs-h3);line-height:var(--lh-h3);margin:4px 0 14px}
.loc address{font-style:normal;color:var(--muted);margin-bottom:22px}
.map{display:block;width:100%;height:360px;border:0;margin:0 0 22px;background:#dfe4ee}
.about-cta{margin-top:26px}
@media (max-width:1000px){
  .about{grid-template-columns:1fr}
}
@media (max-width:720px){
  .loc-grid{grid-template-columns:1fr}
  .loc{padding:28px 24px}
  .map{height:300px}
  .timeline li{grid-template-columns:1fr;gap:4px}
}