/* =========================================================
   GAULKE TIEFBAU — Onepager
   Palette: Anthrazit · Stein · Olive (Logo) · Sand
   Typo: Barlow Condensed (Display) · IBM Plex Sans (Text)
   ========================================================= */

:root{
  --dark:        #111411;
  --anthracite:  #1c1f1a;
  --olive:       #6f7a3a;
  --olive-dark:  #4e5728;
  --olive-dim:   rgba(111,122,58,0.14);
  --sand:        #d8c7a3;
  --sand-dim:    rgba(216,199,163,0.14);
  --stone:       #f3f1ea;
  --white:       #fbfaf6;
  --surface:     #ffffff;
  --text:        #1a1a1a;
  --muted:       #6b6b63;
  --muted-light: #9aa08e;

  --line:        rgba(26,26,26,0.12);
  --line-dark:   rgba(255,255,255,0.10);

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap: 1180px;
  --radius: 8px;
  --radius-lg: 16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--stone);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
/* Nur dort, wo tatsaechlich lange, nicht umbrechbare Zeichenketten stehen
   (E-Mail-Adressen, URLs). Frueher stand das global auf dem body - dadurch
   wurde auch die Headline mitten im Wort getrennt ("LEISTUNGSSTAR|KER").
   Ueberschriften brechen grundsaetzlich nur zwischen Woertern. */
.footer-meta, .legal-main, .form-privacy, .kontakt-plate{ overflow-wrap:break-word; }
h1, h2, h3, h4, .display-xl, .display-lg{ overflow-wrap:normal; word-break:normal; hyphens:none; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- typografie ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0 0 14px;
}
.eyebrow-sand{ color:var(--sand); }

.display-xl{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(46px, 7.2vw, 92px);
  line-height:1.0;
  letter-spacing:0.01em;
  margin:14px 0 24px;
  color:var(--stone);
}
.display-lg{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(32px, 4vw, 50px);
  line-height:1.08;
  letter-spacing:0.02em;
  margin:0 0 18px;
}
.ink-olive{ color:#98a55a; }

.lead{ font-size:17px; line-height:1.65; color:var(--muted); max-width:56ch; margin:0 0 30px; }
.lead-light{ color:#c4c8b6; }

.sect-head{ max-width:720px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; font-size:14.5px; letter-spacing:0.04em; text-transform:uppercase;
  padding:13px 26px; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer;
  transition:transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--olive); color:#fff; box-shadow:0 8px 24px rgba(78,87,40,0.32); }
.btn-primary:hover{ background:#7d8a45; }
.btn-ghost{ border-color:rgba(243,241,234,0.5); color:var(--stone); }
.btn-ghost:hover{ border-color:var(--stone); background:rgba(243,241,234,0.08); }
.btn-lg{ padding:16px 30px; font-size:15px; }
.btn-block{ display:flex; width:100%; margin-top:20px; }
.btn-whatsapp{
  display:flex; width:100%; margin-top:20px;
  background:rgba(255,255,255,0.08); color:var(--stone);
  border:1px solid var(--line-dark);
}
.btn-whatsapp:hover{ background:rgba(111,122,58,0.3); border-color:var(--olive); }
/* Routenplaner: gleiche Optik wie WhatsApp, engerer Abstand darueber */
.btn-route{
  display:flex; width:100%; margin-top:10px;
  background:rgba(255,255,255,0.08); color:var(--stone);
  border:1px solid var(--line-dark);
}
.btn-route:hover{ background:rgba(111,122,58,0.3); border-color:var(--olive); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(17,20,17,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}

/* Lesefortschritt an der Oberkante des Headers.
   Als Kind des stickenden Headers positioniert, damit es beim Scrollen
   automatisch mitlaeuft. Der Balken wird per scaleX skaliert statt
   ueber width - das laeuft auf der GPU und erzwingt kein Re-Layout. */
.scroll-progress{
  position:absolute; top:0; left:0; right:0; height:3px;
  z-index:101; pointer-events:none;
  background:rgba(243,241,234,0.07);
}
.scroll-progress span{
  display:block; height:100%; width:100%;
  background:var(--olive);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}
.header-row{
  display:flex; align-items:center; gap:24px;
  min-height:72px;
}

.logo{
  display:flex; align-items:center;
  margin-right:auto;
  padding:6px 0;
  transition:opacity 0.15s ease;
}
.logo:hover{ opacity:0.85; }
.logo-img{
  display:block;
  width:auto; height:52px;
}
.logo-badge{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:5px; flex-shrink:0;
  background:var(--olive);
  font-family:var(--font-display); font-size:15px; font-weight:800;
  color:#fff; letter-spacing:0.03em;
}
.logo-badge--sm{ width:26px; height:26px; border-radius:4px; font-size:12px; }

/* Die Menue-Ebene ist auf grossen Screens layout-neutral: display:contents
   nimmt den Container aus dem Fluss, Navigation und CTA sitzen dadurch
   direkt in der Header-Zeile wie zuvor. Erst mobil wird er zur Flaeche. */
.nav-overlay{ display:contents; }

.main-nav{ display:flex; gap:28px; }
.main-nav a{
  font-size:13.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:#a3a898; transition:color 0.15s ease;
  /* "Baumaschinenfuehrer" ist deutlich laenger als das fruehere "Personal".
     Ohne nowrap brach dadurch "Ueber uns" auf mittleren Breiten zweizeilig um. */
  white-space:nowrap;
}
.main-nav a:hover{ color:var(--stone); }

.header-cta{ display:flex; align-items:center; gap:20px; }
.tel-link{
  font-size:14px; font-weight:600; color:var(--stone);
  display:flex; align-items:center; gap:7px;
}
.tel-link svg{ color:#98a55a; }

.nav-toggle{ display:none; }

/* ---------- hero ----------
   Ebenen:
     z0 .hero-media   Video, volle Breite (Standbild darunter)
     z1 .hero-panel   halbtransparenter Abdunklungsverlauf von links
     z1 .hero-scrim   Abdunklung an Ober- und Unterkante
     z4 .hero-content Text und Buttons

   Alle Abdunklungen sind bewusst halbtransparent und ohne harte Kante:
   das Motiv soll durchscheinen und nirgends abgeschnitten wirken.  */
.hero{
  position:relative;
  /* Genau bis zur Fensterunterkante: 88vh liess den Header ausser Acht,
     dadurch blitzte das Kennzahlenband darunter hervor.
     svh statt vh, damit mobile Browserleisten kein Springen ausloesen.
     Untergrenze, damit der Inhalt in flachen Fenstern nicht gequetscht
     wird - dort ist ein schmaler Streifen das kleinere Uebel. */
  --header-h:73px;
  min-height:max(620px, calc(100vh - var(--header-h)));
  min-height:max(620px, calc(100svh - var(--header-h)));
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  color:var(--stone);
  background:var(--dark);
}

/* Ebene 1: Bewegtbild ueber die volle Breite, Posterbild darunter.
   Das Video liegt UEBER dem Fallback und deckt es ab, sobald es
   laeuft - so gibt es keinen Blitzer beim Umschalten. */
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero-fallback{ position:absolute; inset:0; }
.hero-video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:0; transition:opacity 0.6s ease;
}
.hero-video.is-playing{ opacity:1; }

/* Ebene 2: weicher Abdunklungsverlauf statt Diagonalschnitt.
   Kein clip-path - eine harte Kante zerteilt die Drohnenaufnahme, deren
   Motiv sich ueber das ganze Bild zieht. Der Verlauf laeuft ueber die
   halbe Breite aus und legt sich unmerklich unter den Text.
   Halbtransparent, damit das Bild auch links durchscheint. */
.hero-panel{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(6,8,8,0.94) 0%,
    rgba(6,8,8,0.88) 22%,
    rgba(6,8,8,0.66) 40%,
    rgba(6,8,8,0.36) 58%,
    rgba(6,8,8,0.14) 78%,
    rgba(6,8,8,0.06) 100%);
}

/* Abdunklung an Ober- und Unterkante: traegt Navigation und
   Kennzahlenleiste und fasst das Bild ein */
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, rgba(15,17,14,0.78) 0%, rgba(15,17,14,0) 32%),
    linear-gradient(180deg, rgba(15,17,14,0.5) 0%, rgba(15,17,14,0) 22%);
}

/* Ebene 3: Text */
.hero-content{
  position:relative; z-index:4;
  /* Vorher clamp(96px, 13vh, 168px): auf hohen Desktop-Fenstern stand der
     Block dadurch weit unten und der Raum unter dem Header blieb leer.
     Der mobile Wert wird weiter unten im 760px-Block ueberschrieben. */
  padding-top:clamp(40px, 6.5vh, 100px);
}
/* Sandton statt Olive: das Olivgruen (#6f7a3a) kommt selbst auf der
   dunkelsten Stelle des Panels nur auf 4,26:1 und liegt damit unter den
   4,5:1, die WCAG AA fuer diese Schriftgroesse verlangt. Ueber dem
   hellen Staub im Video war es praktisch unlesbar. Sand erreicht rund
   7:1 und ist derselbe Ton, der in den dunklen Sektionen ohnehin
   verwendet wird. */
.hero-content .eyebrow{ color:var(--sand); }
/* Breiteres Raster als der Rest der Seite: rueckt den Text im Hero
   naeher an den Rand, ohne die auto-Zentrierung aufzugeben.
   Ab 1400px greift die Begrenzung, darunter bleibt es beim Standard. */
/* Frueher wurde .hero-content ab 1400px auf max-width:1400px verbreitert.
   Der Rest der Seite laeuft aber in .wrap mit 1180px, dadurch begann der
   Hero-Text 110px weiter links als Logo und alle Sektionen darunter - eine
   sichtbar gebrochene Fluchtlinie. Der Hero bleibt jetzt in derselben
   Spalte wie alles andere. */
/* Textspalte schmal halten, Container bleibt aber auf dem 1180er-Raster
   linksbuendig zu Logo und Navigation */
.hero-content > *{ max-width:min(560px, 42vw); }
.hero-sub{ font-size:16.5px; line-height:1.65; color:#c9cdb9; margin:0 0 34px; }
/* Die Abdunklung faellt zur Bildmitte hin stark ab, damit der Bagger
   durchkommt. Der weiche Schatten sichert den Text dort ab, ohne die
   Flaeche wieder zuzuziehen. */
.hero-content .eyebrow,
.hero-content h1,
.hero-sub{ text-shadow:0 2px 20px rgba(6,8,8,0.6); }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- kennzahlen ----------
   Eigenes helles Band unter dem Hero. Bewusst NICHT im Foto: dort lag
   es als schwarzer Riegel quer ueber dem Bild. Jetzt laeuft das Foto
   bis zur Unterkante durch und die Zahlen stehen fuer sich. */
/* Weiss statt Sandton: hebt das Band vom gleichfarbigen Leistungs-
   bereich darunter ab, sonst verschmelzen beide */
.facts-band{
  background:var(--white);
  border-bottom:1px solid var(--line);
}

.hero-facts{
  display:flex; align-items:stretch;
}
.hf-item{
  display:flex; flex-direction:column; gap:6px; justify-content:center;
  padding:30px 40px 30px 0;
}
.hf-num{
  font-family:var(--font-display); font-size:38px; font-weight:700;
  color:var(--olive); line-height:1; letter-spacing:0.01em;
}
.hf-label{
  font-size:12.5px; color:var(--muted); letter-spacing:0.04em;
}
.hf-divider{
  width:1px; background:var(--line);
  margin-right:40px; flex-shrink:0;
}

/* ---------- sections ---------- */
.section{ padding:96px 0; }
.s-stone{ background:var(--stone); }
.s-white{ background:var(--white); }
.s-sand{ background:#ece7d8; }
.s-dark{ background:var(--anthracite); color:var(--stone); }

/* ---------- leistungen: vier bauphasen ----------
   Ersetzt die frühere Liste aus 13 gleichrangigen Kacheln. Die
   Positionen folgen einer Bauabfolge - gruppiert liest sie sich als
   Ablauf statt als Katalog und braucht rund ein Drittel der Hoehe. */
.phasen-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px;
  margin-top:48px;
}
.phase{
  border-top:2px solid var(--olive);
  padding-top:20px;
}
.phase-num{
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--olive);
  margin:0 0 8px;
}
.phase h3{
  font-family:var(--font-display); font-size:21px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em;
  margin:0 0 10px; line-height:1.15;
  color:var(--text);
}
.phase-lead{
  font-size:13px; line-height:1.55; color:var(--muted);
  margin:0 0 18px;
}
.phase-list{ list-style:none; margin:0; padding:0; }
.phase-list li{
  font-size:14px; line-height:1.4; color:var(--text);
  padding:11px 0;
  border-top:1px solid var(--line);
}
.phase-list li:last-child{ border-bottom:1px solid var(--line); }

/* ---------- wasserzeichen ----------
   Grosser Konturschriftzug im Sektionshintergrund. Wort kommt aus
   data-watermark="...", damit die Regel fuer alle Sektionen gilt.
   Auf hellen Flaechen braucht die Kontur mehr Deckkraft als auf
   dunklen: dunkle Linie auf Hell hat weniger Eigenleuchten. */
[data-watermark]{ position:relative; overflow:hidden; }
[data-watermark]::before{
  content:attr(data-watermark);
  position:absolute; right:-20px; bottom:-30px;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(120px, 18vw, 240px); line-height:1;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(26,26,26,0.10);
  pointer-events:none;
  user-select:none;
}
/* Dunkle Sektionen: helle Kontur im Sandton. Deutlich hoehere Deckkraft
   als die urspruenglichen 0.07 - dort war der Schriftzug kaum zu ahnen. */
.s-dark[data-watermark]::before{
  -webkit-text-stroke:1px rgba(216,199,163,0.20);
}
.personal-grid{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center;
}
.personal-copy .btn{ margin-top:6px; }

.personal-roles{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
}
.personal-role{
  border-top:1px solid var(--line-dark);
  padding:28px 0;
}
.pr-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:10px;
}
.personal-role h3{
  font-family:var(--font-display); font-size:24px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em;
  margin:0; color:var(--stone);
}
.pr-badge{
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--sand); background:var(--sand-dim);
  border:1px solid rgba(216,199,163,0.25);
  padding:5px 12px; border-radius:20px;
  white-space:nowrap;
}
.personal-role p{ font-size:14px; line-height:1.6; color:#a9ad9c; margin:0 0 14px; }
.pr-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.pr-tags span{
  font-size:12.5px; font-weight:600; letter-spacing:0.03em;
  color:#c4c8b6;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line-dark);
  padding:6px 13px; border-radius:4px;
}

/* ---------- referenzen ---------- */
.ref-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:48px;
}
.ref-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 8px 28px rgba(17,20,17,0.1);
}
.ref-card--wide{ grid-column:1 / -1; }
.ref-media{ display:block; }
.ref-media img{
  width:100%; object-fit:cover; display:block;
  transition:transform 0.4s ease;
}
.ref-card--wide .ref-media img{ height:380px; }
.ref-card:not(.ref-card--wide) .ref-media img{ height:260px; }
.ref-card:hover .ref-media img{ transform:scale(1.04); }
.ref-overlay{
  position:absolute; bottom:0; left:0; right:0;
  padding:28px 28px 24px;
  background:linear-gradient(0deg, rgba(15,17,14,0.92) 0%, rgba(15,17,14,0) 100%);
  color:var(--stone);
}
.ref-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background:var(--olive);
  padding:4px 11px; border-radius:20px; margin-bottom:10px;
}
.ref-overlay h3{
  font-family:var(--font-display); font-size:22px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em;
  margin:0 0 8px; color:#fff;
}
.ref-overlay p{ font-size:13.5px; line-height:1.55; color:#c4c8b6; margin:0; }
.ref-note{ margin-top:20px; font-size:13px; color:var(--muted); }

/* ---------- vorher/nachher (compare slider) ---------- */
.ref-compare{ margin-top:72px; }
.ref-compare-title{
  font-family:var(--font-display); font-size:26px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.03em; margin:0 0 10px;
}
.compare{
  position:relative; margin-top:8px; aspect-ratio:16/9; max-height:560px;
  border-radius:var(--radius-lg); overflow:hidden; user-select:none;
  box-shadow:0 24px 50px rgba(17,20,17,0.16);
  /* pan-y: senkrechtes Wischen bleibt Seitenscroll, waagerechtes Ziehen
     gehoert dem Regler. Ohne diese Zeile beansprucht der Browser auf dem
     Touchgeraet jede Geste ueber der 450px hohen Flaeche fuers Scrollen. */
  touch-action:pan-y;
  /* zweite Zeile erhaelt zusaetzlich das Zwei-Finger-Zoomen; Browser, die
     das Schluesselwort nicht kennen, behalten die Zeile darueber */
  touch-action:pan-y pinch-zoom;
  cursor:ew-resize;
}
.compare-media{ position:absolute; inset:0; }
/* Der unsichtbare range-Input liegt nicht mehr als Klickflaeche obendrauf
   (pointer-events:none), dadurch landet ein Mausklick direkt auf dem Bild -
   und Bilder sind im Browser von Haus aus ziehbar. Ohne diese Zeilen zieht
   man beim Bedienen des Reglers das Bild aus der Seite heraus, samt
   Vorschau-Geist. Die Gesten braucht ohnehin nur .compare selbst. */
.compare img, .compare-label{ pointer-events:none; -webkit-user-drag:none; user-select:none; }
.compare-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.compare-after{ inset:auto; top:0; left:0; height:100%; width:50%; overflow:hidden; }
/* Zuschnitt per clip-path statt per Breite. Eine Breitenaenderung stoesst in
   jedem Frame ein neues Layout samt Neuzeichnen des Bildes an - genau das
   macht das Ziehen ruckelig, nach rechts staerker als nach links, weil die
   Flaeche waechst. clip-path schneidet nur zu, das Layout bleibt unberuehrt.
   Die Klasse setzt script.js, aber nur wenn der Browser clip-path kann;
   sonst bleibt es bei der Breitenloesung oben. */
.compare--clip .compare-after{
  width:100%; overflow:visible;
  -webkit-clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
          clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.compare--clip .compare-after-inner{ width:100%; }
.compare--clip .compare-handle{ left: var(--pos, 50%); }
.compare-after-inner{ position:absolute; top:0; left:0; height:100%; }
/* Kein transform hier: die Breite der inneren Ebene setzt script.js auf
   die volle Breite der Vergleichsbox. Beide Bilder muessen deckungs-
   gleich liegen, sonst springt das Motiv an der Trennlinie und man
   vergleicht zwei verschiedene Bildausschnitte. */
.compare-after-inner img{ height:100%; object-fit:cover; }
.compare-label{
  position:absolute; top:16px; font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:#fff; background:rgba(17,20,17,0.65); backdrop-filter:blur(6px);
  padding:6px 12px; border-radius:20px;
}
/* compare-after ist die linke (Vorher-)Ebene, compare-before die
   rechte Basis (Nachher) - Labels sitzen jeweils aussen */
.compare-after .compare-label{ left:16px; }
.compare-before .compare-label{ right:16px; }
.compare-handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:var(--olive);
  transform:translateX(-50%); pointer-events:none;
}
.compare-handle::after{
  content:''; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--olive);
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
}
.compare-handle::before{
  content:'‹ ›'; position:absolute; top:50%; left:50%; transform:translate(-50%,-52%);
  color:#fff; font-size:14px; font-weight:700; letter-spacing:0.05em; z-index:1;
}
/* Der Regler bleibt fuer Tastaturbedienung im DOM (Tab + Pfeiltasten),
   die Zeigerbedienung uebernimmt aber script.js auf .compare. Grund: auf
   iOS springt ein range-Input beim Tippen nicht zur Position, man muesste
   exakt den unsichtbaren 44px-Griff treffen. */
.compare-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; pointer-events:none; -webkit-appearance:none; appearance:none;
  background:transparent; z-index:5;
}
.compare-range::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:100%; }

/* ---------- über uns ---------- */
/* Schmalere Bildspalte: das Inhaberfoto ist KI-generiert und soll
   bewusst zurueckhaltend stehen, nicht bildschirmfuellend. */
.ueber-grid{ display:grid; grid-template-columns:0.62fr 1.38fr; gap:56px; align-items:center; }
.ueber-media{
  margin:0;
  max-width:320px;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 20px 44px rgba(17,20,17,0.14);
}
/* picture ist von Haus aus inline und wuerde sonst eine Zeilenhoehe
   unter dem Bild erzeugen */
.ueber-media picture{ display:block; }
.ueber-media img{ width:100%; height:auto; object-fit:cover; aspect-ratio:4/5; display:block; }
.ueber-media figcaption{
  font-size:12.5px; font-weight:600; letter-spacing:0.03em;
  color:var(--muted);
  padding:12px 14px; background:var(--white);
  border-top:1px solid var(--line);
}

.spec-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.spec-list li{ display:flex; gap:16px; align-items:flex-start; }
.spec-marker{
  width:22px; height:2px; margin-top:11px; flex-shrink:0;
  background:var(--olive);
}
.spec-list h3{
  font-family:var(--font-body); font-size:15.5px; font-weight:700;
  margin:0 0 4px; color:var(--text);
}
.spec-list p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }

/* ---------- rezensionen ---------- */
.rez-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:48px;
}
.rez-card{
  position:relative;
  margin:0;
  padding:32px 28px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column;
}
/* Grosses Anfuehrungszeichen als Marke, dekorativ */
.rez-card::before{
  content:'\201C';
  position:absolute; top:6px; left:22px;
  font-family:var(--font-display); font-size:76px; font-weight:800;
  line-height:1; color:var(--olive); opacity:0.18;
  pointer-events:none;
}
.rez-card blockquote{
  position:relative;
  margin:0 0 22px;
  font-size:14.5px; line-height:1.65; color:var(--text);
  flex:1;
}
.rez-card figcaption{
  display:flex; flex-direction:column; gap:3px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.rez-name{ font-size:14px; font-weight:700; color:var(--text); }
.rez-role{ font-size:12.5px; color:var(--muted); }

/* ---------- einsatzgebiet ---------- */
.gebiet-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:56px; align-items:center; }
.gebiet-towns{ display:flex; flex-wrap:wrap; gap:9px; margin:4px 0 0; }
.gebiet-towns span{
  font-size:12.5px; font-weight:600; letter-spacing:0.03em;
  color:var(--olive-dark);
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(111,122,58,0.25);
  padding:7px 14px; border-radius:4px;
}

.gebiet-scope{ display:flex; justify-content:center; }
.scope-svg{ width:100%; max-width:380px; }
.scope-ring{ fill:none; stroke:rgba(111,122,58,0.4); stroke-width:1; stroke-dasharray:4 6; }
.scope-ring-outer{ stroke:rgba(78,87,40,0.6); stroke-dasharray:2 5; }
.scope-cross{ stroke:rgba(111,122,58,0.16); stroke-width:1; }
.scope-center{ fill:var(--olive-dark); }
.scope-label{ font-family:var(--font-body); font-size:11px; fill:#8a8874; }
.scope-center-label{ font-family:var(--font-body); font-size:12px; font-weight:700; fill:var(--olive-dark); letter-spacing:0.06em; }

/* Dunkle Variante der Einsatzgebiet-Sektion.
   Oliv und Dunkeloliv tragen auf Anthrazit nicht mehr - Radar, Ortsschilder
   und Raster wechseln deshalb auf den Sandton. */
.s-dark .gebiet-towns span{
  color:#c4c8b6;
  background:rgba(255,255,255,0.05);
  border-color:var(--line-dark);
}
/* Deutlich kraeftiger als die Erstfassung: auf Anthrazit war die
   Grafik kaum zu erkennen. Ringe zusaetzlich etwas staerker gezeichnet. */
.s-dark .scope-ring{ stroke:rgba(216,199,163,0.62); stroke-width:1.4; }
.s-dark .scope-ring-outer{ stroke:rgba(216,199,163,0.42); stroke-width:1.2; }
.s-dark .scope-cross{ stroke:rgba(216,199,163,0.22); }
.s-dark .scope-center{ fill:var(--sand); }
.s-dark .scope-label{ fill:#b7bca8; }
.s-dark .scope-center-label{ fill:var(--sand); }

/* ---------- kontakt ---------- */
.kontakt{ position:relative; padding:110px 0 96px; overflow:hidden; color:var(--stone); background:var(--dark); }
.kontakt-media{ position:absolute; inset:0; z-index:0; }
.kontakt-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.kontakt-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(15,17,14,0.97) 8%, rgba(15,17,14,0.86) 45%, rgba(15,17,14,0.62) 100%);
}
.kontakt-inner{ position:relative; z-index:2; }
.kontakt-intro{ margin-bottom:44px; max-width:640px; }

/* stretch statt start: beide Spalten enden auf gleicher Hoehe */
.kontakt-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:stretch; }
.kontakt-side{ display:flex; flex-direction:column; gap:20px; }

/* ---------- card system ---------- */
.card{ border-radius:var(--radius-lg); padding:26px 28px; }
.card--glass{
  background:rgba(17,20,17,0.64);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border:1px solid var(--line-dark);
  color:var(--stone);
  box-shadow:0 24px 50px rgba(0,0,0,0.35);
}
.card-head{
  font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--sand);
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px solid var(--line-dark);
}
.card dl{ margin:0; display:grid; grid-template-columns:1fr; gap:14px; }
.card dl > div{ display:flex; flex-direction:column; gap:4px; }
.card dt{ font-size:11px; letter-spacing:0.05em; color:#84887a; text-transform:uppercase; }
.card dd{ margin:0; font-size:14.5px; font-weight:600; color:var(--stone); }
.card a:hover{ color:var(--sand); }

/* ---------- kontakt form ---------- */
/* Als Flex-Spalte, damit das Nachrichtenfeld den Resthoehe fuellt und
   das Formular buendig mit der rechten Spalte abschliesst */
/* Kein backdrop-filter und kein transform auf diesem Element: beide erzeugen
   einen neuen Bezugsrahmen, an dem Chrome die native Auswahlliste des
   <select> falsch positioniert - sie klappte weit oberhalb des Feldes auf.
   Das Formular ist deshalb auch aus revealTargets in script.js genommen.
   Der Hintergrund wird etwas deckender, um die fehlende Weichzeichnung
   auszugleichen. */
.kontakt-form{
  position:relative; width:100%; display:flex; flex-direction:column;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:rgba(17,20,17,0.84);
}
.form-row{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-row--grow{ flex:1; min-height:150px; }
.form-row--grow textarea{ flex:1; }
/* #8d927f erreichte auf der Formularkarte nur 4,18:1 und lag damit unter
   den 4,5:1, die WCAG AA fuer diese Groesse verlangt. #9aa08e kommt auf
   4,98:1 - derselbe Ton, der als --muted-light bereits im Einsatz ist. */
.form-row label{ font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-light); }
.form-row input, .form-row textarea, .form-row select{
  font-family:var(--font-body); font-size:15px; color:var(--text);
  background:rgba(255,255,255,0.96); border:1.5px solid transparent;
  border-radius:var(--radius); padding:12px 14px; resize:vertical;
}
.form-row select{ cursor:pointer; }
.form-row input::placeholder, .form-row textarea::placeholder{ color:#9a988b; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none; border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(111,122,58,0.22);
}
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin:14px 0 0; font-size:13.5px; min-height:1.2em; }
.form-status.is-success{ color:#a8b56a; }
.form-status.is-error{ color:#f08c74; }

/* ---------- mini-ablauf ---------- */
.mini-ablauf{
  list-style:none; margin:0;
  display:flex; flex-direction:column; gap:0;
  counter-reset:step;
}
.mini-ablauf li{
  display:grid; grid-template-columns:34px 1fr; column-gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--line-dark);
  counter-increment:step;
}
.mini-ablauf li:last-child{ border-bottom:none; padding-bottom:2px; }
.mini-ablauf li::before{
  content:counter(step, decimal-leading-zero);
  font-family:var(--font-display); font-size:15px; font-weight:700;
  color:var(--sand);
  grid-row:1 / span 2;
  padding-top:1px;
}
.mini-ablauf strong{ font-size:14px; font-weight:700; color:var(--stone); }
.mini-ablauf span{ grid-column:2; font-size:12.5px; color:#8d927f; margin-top:2px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--dark); color:#a8ad9b; padding:28px 0; border-top:1px solid var(--line-dark); }
.footer-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; font-size:12.5px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; color:#b8bda9; }
.footer-row p{ margin:0; }
.footer-meta{ color:#a8ad9b; }
/* flex-wrap ist hier Pflicht: die Liste wuchs von fuenf auf sechs Links und
   sprengte auf schmalen Displays den Container. Das machte das ganze
   Dokument breiter als den Viewport - die Seite liess sich seitlich
   schieben und der fixierte WhatsApp-Button wurde angeschnitten. */
.footer-legal{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; }
.footer-legal a{ color:#a8ad9b; transition:color 0.15s; }
.footer-legal a:hover{ color:var(--sand); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:12px;
  padding-top:14px; margin-top:14px; border-top:1px solid rgba(255,255,255,0.06);
}
.footer-ai{ margin:0; color:#a8ad9b; }
.footer-credit{ font-size:13px; font-weight:600; color:var(--sand); letter-spacing:0.01em; transition:color 0.15s; white-space:nowrap; }
.footer-credit:hover{ color:var(--olive); }
.footer-credit strong{ font-weight:700; }

/* ---------- rechtsseiten (impressum/datenschutz) ---------- */
.legal-main{ padding:72px 0 96px; }
.legal-main .wrap{ max-width:820px; }
.legal-main h1{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(32px, 4vw, 48px); letter-spacing:0.02em; margin:0 0 32px;
}
.legal-main h2{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:22px; letter-spacing:0.03em; margin:40px 0 12px;
}
/* h3/h4 fuer die tiefer gegliederte Datenschutzerklaerung. Bewusst in der
   Textschrift statt in der Display-Schrift: die Ebenen liegen dicht
   beieinander und sollen sich nicht gegenseitig ueberschreien. */
.legal-main h3{
  font-family:var(--font-body); font-weight:700;
  font-size:17px; line-height:1.4; color:var(--text);
  margin:30px 0 10px;
}
.legal-main h4{
  font-family:var(--font-body); font-weight:600;
  font-size:15px; line-height:1.45; color:var(--text);
  margin:22px 0 8px;
}
.legal-main p, .legal-main li{ font-size:15px; line-height:1.7; color:var(--muted); }
.legal-main ul{ margin:0 0 16px; padding-left:20px; }
.legal-main li{ margin-bottom:8px; }

/* Die Widerspruchs-Absaetze stehen bei eRecht24 in Versalien. Vollflaechige
   Grossbuchstaben lesen sich schlecht, deshalb etwas kleiner, mit mehr
   Zeilenabstand und abgesetzt - der Wortlaut bleibt unveraendert. */
/* Quellenangabe unter den Rechtstexten: abgesetzt, damit sie nicht als
   Teil der Erklaerung gelesen wird, aber klar sichtbar. */
.legal-source{
  margin-top:48px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:13px !important; color:var(--muted-light) !important;
}

.legal-caps{
  font-size:13.5px !important; line-height:1.75 !important;
  letter-spacing:0.01em;
  padding:16px 18px; border-left:3px solid var(--line);
  background:rgba(26,26,26,0.03);
  border-radius:0 var(--radius) var(--radius) 0;
}
.legal-main a{ color:var(--olive-dark); text-decoration:underline; }
.legal-hint{
  padding:14px 18px; border-left:3px solid var(--olive);
  background:var(--olive-dim); border-radius:0 var(--radius) var(--radius) 0;
  font-size:13.5px !important; color:var(--text) !important;
}

/* ---------- floating widgets (a11y links, chat rechts) ---------- */
.a11y-widget, .chat-widget{ position:fixed; bottom:22px; z-index:200; }
.a11y-widget{ left:22px; }
.chat-widget{ right:22px; }

/* Zurueck nach oben: steht rechts neben dem Barrierefreiheit-Widget.
   Eigener fixierter Container statt Kind des Widgets, damit das
   Einstellungs-Panel weiter an seinem Anker haengt. */
.totop-widget{ position:fixed; left:88px; bottom:22px; z-index:200; }
.totop-btn{
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
             background-color 0.15s ease;
}
.totop-btn.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

.float-btn{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  border:none; cursor:pointer;
  background:var(--olive); color:#fff;
  box-shadow:0 10px 28px rgba(17,20,17,0.35);
  transition:transform 0.15s ease, background-color 0.15s ease;
}
.float-btn:hover{ transform:translateY(-2px); background:#7d8a45; }

.chat-widget{ display:flex; flex-direction:column; align-items:center; gap:12px; }

.float-panel{
  position:absolute; bottom:66px; width:290px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(17,20,17,0.28);
  overflow:hidden;
}
.a11y-panel{ left:0; }
.chat-panel{ right:0; }

.float-panel-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:var(--dark); color:var(--stone);
}
.float-panel-head strong{
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
}
.float-panel-close{
  margin-left:auto; background:none; border:none; cursor:pointer;
  color:#8d927f; font-size:14px; padding:4px 6px; line-height:1;
}
.float-panel-close:hover{ color:var(--stone); }

/* a11y panel */
.a11y-options{ display:flex; flex-direction:column; padding:10px; gap:4px; }
.a11y-option{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:none; border-radius:var(--radius);
  background:none; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--text);
  transition:background-color 0.15s ease;
}
.a11y-option:hover{ background:var(--stone); }
.a11y-option[aria-pressed="true"]{ background:var(--olive-dim); color:var(--olive-dark); font-weight:700; }
.a11y-option-icon{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:var(--stone); font-size:13px; font-weight:700; font-style:normal;
}
.a11y-option[aria-pressed="true"] .a11y-option-icon{ background:var(--olive); color:#fff; }
.a11y-reset{
  display:block; width:calc(100% - 20px); margin:0 10px 12px;
  padding:9px; border:1px solid var(--line); border-radius:var(--radius);
  background:none; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--muted);
}
.a11y-reset:hover{ border-color:var(--olive); color:var(--olive-dark); }

/* chat panel */
.chat-head{ padding:14px 16px; }
.chat-avatar{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--olive); color:#fff;
  font-family:var(--font-display); font-size:14px; font-weight:800;
}
.chat-head-txt{ display:flex; flex-direction:column; gap:2px; }
.chat-status{ font-size:11.5px; color:#8d927f; display:flex; align-items:center; gap:6px; }
.chat-status i{
  width:7px; height:7px; border-radius:50%;
  background:#6db34f; display:inline-block;
}
.chat-body{ padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--stone); }
.chat-bubble{
  background:var(--surface); border:1px solid var(--line);
  border-radius:4px 14px 14px 14px;
  padding:11px 14px; font-size:13.5px; line-height:1.55; color:var(--text);
  max-width:92%;
}
.chat-actions{ display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.chat-action{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:var(--radius);
  background:var(--olive); color:#fff;
  font-size:13.5px; font-weight:600;
  transition:background-color 0.15s ease, transform 0.15s ease;
}
.chat-action:hover{ background:#7d8a45; transform:translateY(-1px); }
.chat-action svg{ flex-shrink:0; }

/* ---------- barrierefreiheit-modi ---------- */
/* Groessere Schrift. font-size auf :root wirkt hier nicht, weil die
   ganze Seite feste px-Groessen nutzt - die skalieren nicht mit der
   Wurzel. zoom vergroessert die gerenderte Seite zuverlaessig und
   erhaelt das Layout; die fixierten Widgets bleiben am Fensterrand. */
html.a11y-big-text body{ zoom:1.15; }
html.a11y-underline-links a{ text-decoration:underline; }
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
html.a11y-no-motion .reveal{ opacity:1 !important; transform:none !important; }
/* Filter NIEMALS auf body legen: ein Filter macht das Element zum
   Bezugsrahmen fuer position:fixed. Die schwebenden Schaltflaechen
   haengen dann am Dokumentende statt am Fenster und sind nicht mehr
   erreichbar - man kommt aus dem Modus nicht mehr heraus.
   Stattdessen je Bereich einzeln, die fixierten Elemente eingeschlossen:
   ein Filter auf dem Element selbst laesst dessen eigene Fixierung
   unberuehrt, nur Nachfahren waeren betroffen. */
html.a11y-grayscale{ --a11y-filter:grayscale(1); }
html.a11y-high-contrast{ --a11y-filter:contrast(1.18); }
html.a11y-high-contrast.a11y-grayscale{ --a11y-filter:grayscale(1) contrast(1.18); }

.site-header,
main,
.site-footer,
.legal-main,
.a11y-widget,
.chat-widget{ filter:var(--a11y-filter, none); }
html.a11y-high-contrast .lead,
html.a11y-high-contrast .phase-lead{ color:#3a3a34; }
html.a11y-high-contrast .lead-light,
html.a11y-high-contrast .personal-role p,
html.a11y-high-contrast .spec-list p{ color:#e0e3d6; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .phasen-grid{ gap:26px; }
  .phase h3{ font-size:19px; }
}
@media (max-width: 1024px){
  .tel-link{ display:none; }
  .main-nav{ gap:18px; }
  .main-nav a{ font-size:12.5px; }
  .header-row{ gap:16px; }
}
@media (max-width: 980px){
  .phasen-grid{ grid-template-columns:repeat(2, 1fr); gap:36px 40px; }
  .personal-grid{ grid-template-columns:1fr; gap:44px; }
  [data-watermark]::before{ font-size:120px; }
  .ueber-grid{ grid-template-columns:1fr; gap:36px; }
  /* Foto oben, nicht ueber die volle Breite gezogen. Sobald das Raster
     einspaltig wird, steht es sonst linksbuendig allein in der Zeile -
     deshalb hier mittig ausrichten. */
  /* width:100% ist hier noetig: allein mit margin-inline:auto wechselt ein
     Grid-Element von "Spalte fuellen" auf Inhaltsbreite und schrumpft
     dadurch auf 170px. Erst fuellen, dann deckeln, dann zentrieren. */
  .ueber-media{ width:100%; max-width:260px; margin-inline:auto; }
  .gebiet-grid{ grid-template-columns:1fr; }
  .gebiet-scope{ order:-1; }
  .kontakt-grid{ grid-template-columns:1fr; }
  .ref-card--wide .ref-media img{ height:280px; }
  .rez-grid{ grid-template-columns:1fr 1fr; }
  .hf-item{ padding:18px 24px 18px 0; }
  .hf-divider{ margin-right:24px; }

  /* Schmaler Screen: Verlauf von oben nach unten statt seitlich,
     der Text steht hier ueber der ganzen Breite. Oben bewusst duenn,
     damit das Video sichtbar bleibt - erst ab der Textkante zieht es zu. */
  .hero-panel{
    background:linear-gradient(180deg,
      rgba(8,10,10,0.16) 0%,
      rgba(8,10,10,0.26) 26%,
      rgba(8,10,10,0.58) 44%,
      rgba(8,10,10,0.80) 62%,
      rgba(8,10,10,0.90) 100%);
  }
  /* Der obere Scrim traegt hier nur die Navigation, nicht die halbe Flaeche */
  .hero-scrim{
    background:
      linear-gradient(0deg, rgba(15,17,14,0.55) 0%, rgba(15,17,14,0) 26%),
      linear-gradient(180deg, rgba(15,17,14,0.62) 0%, rgba(15,17,14,0) 14%);
  }
  .hero-media img{ object-position:62% 50%; }
  /* Kein volles Ausreizen der Breite: haelt die Zeilenlaenge lesbar */
  .hero-content > *{ max-width:min(100%, 640px); }
}

@media (max-width: 760px){
  /* Die Menue-Ebene ist ein Geschwisterelement innerhalb der Header-Zeile,
     deshalb muessen Schalter und Logo ausdruecklich darueber liegen -
     sonst verdeckt die Ebene das Kreuz. */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0;
    position:relative; z-index:130;
  }
  .logo{ position:relative; z-index:130; }
  .nav-toggle span{
    width:100%; height:2px; background:var(--stone); border-radius:2px;
    transition:transform 0.34s cubic-bezier(0.68,-0.3,0.27,1.3), opacity 0.2s ease;
  }
  /* Burger wird zum Kreuz */
  .site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; transform:scaleX(0); }
  .site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Bildschirmfuellende Menue-Ebene. Sie faehrt als Vorhang von oben
     herunter - translate laeuft auf der GPU und bleibt ruhig. */
  .nav-overlay{
    display:flex; flex-direction:column; justify-content:center;
    position:fixed; inset:0; z-index:120;
    padding:104px 26px calc(34px + env(safe-area-inset-bottom));
    overflow-y:auto;
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(111,122,58,0.30) 0%, rgba(111,122,58,0) 58%),
      linear-gradient(165deg, #14170f 0%, #0b0d09 100%);
    visibility:hidden;
    transform:translateY(-100%);
    transition:transform 0.52s cubic-bezier(0.65,0,0.35,1), visibility 0.52s;
    will-change:transform;
  }
  .site-header.nav-open .nav-overlay{
    visibility:visible;
    transform:translateY(0);
  }

  /* Schriftzug als ruhiger Hintergrund, wie in den Sektionen */
  .nav-overlay::after{
    content:"GAULKE"; position:absolute; left:-4px; bottom:6px; z-index:0;
    font-family:var(--font-display); font-weight:700; font-size:23vw;
    letter-spacing:0.02em; line-height:1; color:transparent;
    -webkit-text-stroke:1px rgba(216,199,163,0.09);
    pointer-events:none; user-select:none;
  }

  .nav-overlay .main-nav{
    display:flex; flex-direction:column; gap:0;
    position:relative; z-index:1; counter-reset:navitem;
  }
  .nav-overlay .main-nav a{
    display:flex; align-items:baseline; gap:16px;
    padding:17px 2px; border-bottom:1px solid rgba(243,241,234,0.09);
    color:var(--stone); font-size:15px; letter-spacing:normal;
    opacity:0; transform:translateY(22px);
  }
  .nav-overlay .main-nav a::before{
    counter-increment:navitem;
    content:counter(navitem, decimal-leading-zero);
    font-family:var(--font-body); font-size:11.5px; font-weight:700;
    letter-spacing:0.14em; color:var(--olive-light, #98a55a);
    flex:0 0 auto; transform:translateY(-2px);
  }
  .nav-overlay .nav-label{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(27px, 8.2vw, 42px); letter-spacing:0.02em; line-height:1.04;
  }
  .nav-overlay .main-nav a:active .nav-label{ color:var(--sand); }

  /* Kontaktblock unten in der Ebene */
  .nav-overlay .header-cta{
    display:flex; flex-direction:column; align-items:stretch; gap:14px;
    position:relative; z-index:1; margin-top:34px;
    opacity:0; transform:translateY(22px);
  }
  .nav-overlay .tel-link{
    display:flex; justify-content:center; align-items:center; gap:9px;
    font-size:16px; font-weight:700; color:var(--stone);
    padding:13px 16px; border:1px solid rgba(243,241,234,0.16); border-radius:var(--radius);
  }
  .nav-overlay .btn-primary{ text-align:center; justify-content:center; padding:15px 20px; font-size:14px; }

  /* Gestaffelter Auftritt der Zeilen */
  .site-header.nav-open .nav-overlay .main-nav a,
  .site-header.nav-open .nav-overlay .header-cta{
    animation:navZeileRein 0.5s cubic-bezier(0.22,0.9,0.3,1) forwards;
  }
  .site-header.nav-open .nav-overlay .main-nav a:nth-child(1){ animation-delay:0.16s; }
  .site-header.nav-open .nav-overlay .main-nav a:nth-child(2){ animation-delay:0.22s; }
  .site-header.nav-open .nav-overlay .main-nav a:nth-child(3){ animation-delay:0.28s; }
  .site-header.nav-open .nav-overlay .main-nav a:nth-child(4){ animation-delay:0.34s; }
  .site-header.nav-open .nav-overlay .main-nav a:nth-child(5){ animation-delay:0.40s; }
  .site-header.nav-open .nav-overlay .header-cta{ animation-delay:0.48s; }

  @keyframes navZeileRein{
    to{ opacity:1; transform:translateY(0); }
  }

  /* Header bleibt ueber der Ebene, damit das Kreuz klickbar ist.
     Wichtig: solange das Menue offen ist, muss der Header fest sitzen.
     Der Sperrmechanismus setzt overflow:hidden auf das Wurzelelement -
     damit verliert position:sticky seinen Scrollbereich und der Header
     springt an seine statische Stelle weit oberhalb des Sichtfensters
     zurueck. Das Kreuz war dadurch schlicht ausserhalb des Bildes. */
  .site-header.nav-open{
    position:fixed; top:0; left:0; right:0;
    background:transparent; backdrop-filter:none; border-bottom-color:transparent;
  }
  .site-header.nav-open .header-row{ position:relative; z-index:130; }
  .site-header.nav-open .scroll-progress{ opacity:0; }
  /* Seite dahinter stilllegen */
  html.nav-locked, html.nav-locked body{ overflow:hidden; }

  @media (prefers-reduced-motion: reduce){
    .nav-overlay{ transition:none; transform:none; opacity:0; }
    .site-header.nav-open .nav-overlay{ opacity:1; transform:none; }
    .site-header.nav-open .nav-overlay .main-nav a,
    .site-header.nav-open .nav-overlay .header-cta{ animation:none; opacity:1; transform:none; }
  }

  /* Wasserzeichen an die Bildschirmbreite binden: "PERSONAL" ist rund
     das 3,8-fache der Schriftgroesse breit, bei 120px lief es weit ueber
     die Kante hinaus und wurde mittendrin abgeschnitten. 23vw haelt das
     Wort vollstaendig im Bild, der Rest bleibt eine ruhige Kontur. */
  [data-watermark]::before{
    font-size:22vw;
    right:14px; bottom:-6px;
    -webkit-text-stroke-width:0.9px;
  }

  /* Mobil hoehere Untergrenze: Ueberschrift bricht auf drei Zeilen und
     die Schaltflaechen stehen untereinander */
  .hero{
    min-height:max(660px, calc(100vh - var(--header-h)));
    min-height:max(660px, calc(100svh - var(--header-h)));
  }
  /* Deutlich hoeher als zuvor (war clamp(120px, 26svh, 200px)): auf hohen
     Handydisplays stand die Headline sonst erst im unteren Drittel, der
     Platz darueber blieb ungenutzt. Der Bagger im Bild bleibt trotzdem
     rechts neben dem Text sichtbar. */
  .hero-content{ padding-top:clamp(56px, 11svh, 104px); }
  /* Der 100deg-Verlauf dunkelt nur die linke Seite ab - auf dem Desktop
     steht der Text genau dort. Mobil laeuft er ueber die volle Breite und
     stand rechts ungeschuetzt auf dem Bild. Deshalb hier ein senkrechter
     Verlauf: oben kraeftig, wo Eyebrow und Headline sitzen, nach unten
     deutlich schwaecher, damit der Bagger sichtbar bleibt. */
  .hero-panel{
    background:linear-gradient(180deg,
      rgba(6,8,8,0.80) 0%,
      rgba(6,8,8,0.72) 38%,
      rgba(6,8,8,0.52) 68%,
      rgba(6,8,8,0.28) 100%);
  }
  .display-xl{ font-size:clamp(34px, 9.6vw, 58px); }
  .hero-facts{ flex-wrap:wrap; }
  .hf-divider{ display:none; }
  /* Zwei Spalten statt Umbruch ins Leere */
  .hf-item{ flex:0 0 50%; padding:18px 16px 18px 0; }
  .hf-num{ font-size:30px; }

  .section{ padding:68px 0; }

  /* Phasen mobil: einspaltig gestapelt */
  .phasen-grid{ grid-template-columns:1fr; gap:30px; margin-top:32px; }
  .phase h3{ font-size:19px; }
  .phase-lead{ margin-bottom:12px; }
  .phase-list li{ padding:9px 0; font-size:13.5px; }

  .personal-role h3{ font-size:20px; }
  .pr-head{ flex-wrap:wrap; }

  .rez-grid{ grid-template-columns:1fr; gap:16px; }
  .rez-card{ padding:28px 22px 22px; }

  .ref-grid{ grid-template-columns:1fr; }
  .ref-card--wide{ grid-column:1; }
  .ref-card--wide .ref-media img,
  .ref-card:not(.ref-card--wide) .ref-media img{ height:220px; }
  .compare{ aspect-ratio:3/4; }
  .compare-handle::before{ font-size:12px; }

  .kontakt{ padding:80px 0 60px; }
  /* Nur die seitlichen Raender anfassen: die Kurzform padding:0 18px
     hat zuvor das padding-top von .hero-content ueberschrieben. */
  .wrap{ padding-left:18px; padding-right:18px; }

  .footer-row{ flex-direction:column; align-items:flex-start; }

  /* Floating widgets mobil */
  .a11y-widget{ left:14px; bottom:14px; }
  .chat-widget{ right:14px; bottom:14px; }
  /* Schaltflaeche ist mobil 48px breit, Abstand entsprechend enger */
  .totop-widget{ left:72px; bottom:14px; }
  .float-btn{ width:48px; height:48px; }
  .float-panel{ width:min(290px, calc(100vw - 28px)); bottom:60px; }
}

/* =========================================================
   ERGAENZUNGEN SEO/AEO/A11Y — Skip-Link, FAQ, Formularhinweis
   ========================================================= */

/* ---------- Skip-Link ----------
   Liegt ausserhalb des Sichtfelds und faehrt erst bei Tastaturfokus ein.
   Erspart Screenreader- und Tastaturnutzern die komplette Navigation. */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  padding:10px 18px; border-radius:var(--radius);
  background:var(--olive); color:#fff;
  font-family:var(--font-body); font-size:15px; font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Inline-Links im Fliesstext ----------
   Sichtbar unterstrichen: ein Link darf sich nicht allein durch die
   Farbe vom Text unterscheiden (WCAG 1.4.1). */
.inline-link{
  color:var(--olive-dark);
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}
.inline-link:hover{ color:var(--olive); }
.lead-light .inline-link, .s-dark .inline-link{ color:var(--sand); }

/* ---------- FAQ ---------- */
.faq-list{
  margin-top:48px;
  border-top:1px solid var(--line);
  max-width:900px;
}

.faq-item{
  border-bottom:1px solid var(--line);
}

.faq-item summary{
  display:flex; align-items:flex-start; gap:16px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }

/* Ueberschrift bleibt semantisch h3, optisch aber Teil der Zeile */
.faq-item summary h3{
  margin:0; flex:1;
  font-family:var(--font-display);
  font-size:21px; font-weight:700; line-height:1.3;
  letter-spacing:0.01em;
}

/* Plus/Minus als reines CSS-Zeichen — kein zusaetzliches Markup noetig */
.faq-item summary::after{
  content:"";
  flex-shrink:0;
  width:20px; height:20px;
  margin-top:3px;
  background:
    linear-gradient(var(--olive),var(--olive)) center/100% 2px no-repeat,
    linear-gradient(var(--olive),var(--olive)) center/2px 100% no-repeat;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{
  transform:rotate(90deg);
  background:linear-gradient(var(--olive),var(--olive)) center/100% 2px no-repeat;
}

.faq-item summary:hover h3{ color:var(--olive-dark); }
.faq-item summary:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }

.faq-answer{ padding:0 36px 26px 0; max-width:70ch; }
.faq-answer p{ margin:0 0 14px; font-size:16px; line-height:1.7; color:var(--muted); }
.faq-answer p:last-child{ margin-bottom:0; }
.faq-answer ul, .faq-answer ol{ margin:0 0 14px; padding-left:20px; }
.faq-answer li{ font-size:16px; line-height:1.7; color:var(--muted); margin-bottom:7px; }
.faq-answer strong{ color:var(--text); }

.faq-cta{ margin:44px 0 0; }

/* ---------- Datenschutzhinweis am Formular ---------- */
.form-privacy{
  margin:14px 0 0;
  font-size:13px; line-height:1.55;
  color:rgba(255,255,255,0.72);
}
.form-privacy a{
  color:var(--sand);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-privacy a:hover{ color:#fff; }

/* ---------- Footer: NAP-Zeile ---------- */
.footer-meta a{
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-meta a:hover{ color:var(--sand); }

@media (max-width: 760px){
  .faq-item summary{ padding:18px 0; gap:12px; }
  .faq-item summary h3{ font-size:19px; }
  .faq-answer{ padding-right:0; }
  .faq-list{ margin-top:34px; }
}