/* ============================================================
   Läer und Rahenbrock — Website
   Typografie und Farbwelt abgestimmt auf lundr-bau.de:
   Inter (lokal ausgeliefert), Slate-Palette um #161826,
   weit laufende Versal-Labels, ruhige Flächen.
   ============================================================ */

/* Inter als Variable Font, lokal gehostet — keine Verbindung zu Google (DSGVO).
   Eine Datei deckt alle Schnitte von 100 bis 900 ab. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/inter-var.woff2') format('woff2');
}

:root{
  --bg:      oklch(96.5% 0.004 250);
  --surface: oklch(99% 0.003 250);
  --panel:   oklch(94% 0.005 250);
  --fg:      oklch(22% 0.012 256);
  --muted:   oklch(46% 0.012 256);
  --border:  oklch(88% 0.006 250);
  --accent:  oklch(48% 0.155 256);
  --accent-d:oklch(41% 0.15 258);
  --accent-l:oklch(63% 0.115 252);
  --ink:     #161826;
  --ink-2:   #1e2233;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  --radius: 0;   /* Kanten bleiben scharf — keine abgerundeten Ecken */

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sp-section: clamp(72px, 11vw, 168px);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Hoehe der festen Kopfleiste. Die Leiste ist jetzt immer sichtbar (Glas-
     flaeche), deshalb muss der Seiteninhalt genau um diesen Betrag nach
     unten ruecken, damit oben nichts verdeckt wird. */
  --headh: 98px;   /* 18px + 62px Logo + 18px */
  --headh-s: 76px; /* gescrollt: 12px + 52px + 12px */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--headh-s) + 16px)}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Platz fuer die feste Kopfleiste */
  padding-top:var(--headh);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ---- type ---- */
.display{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.022em;
  color:var(--fg);
  text-wrap:balance;
}
h1.display{font-size:clamp(38px,6.2vw,76px)}
h2.display{font-size:clamp(30px,4.4vw,54px)}
/* Zusatz in einer Ueberschrift: eigene Zeile, deutlich kleiner. */
.display .h-zusatz{display:block;font-size:.5em;line-height:1.2;margin-top:.45em;letter-spacing:-.01em;opacity:.92}
h3.display{font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.eyebrow{
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;display:inline-block}
.eyebrow.on-dark{color:var(--accent-l)}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:58ch;line-height:1.8;text-wrap:pretty}
.muted{color:var(--muted)}
.serif-num{font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sp-section)}
.section.tight{padding-block:clamp(48px,7vw,96px)}
.dark{background:var(--ink);color:oklch(90% 0.006 250)}
.dark .display{color:oklch(96% 0.005 250)}
.dark .lead,.dark .muted{color:oklch(72% 0.012 250)}
.surface{background:var(--surface)}
.rule{height:1px;background:var(--border);border:0}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:14px 24px;border:1px solid var(--fg);
  background:var(--fg);color:var(--bg);
  border-radius:var(--radius);cursor:pointer;
  transition:transform .4s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn.outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.tlink{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:14px;font-weight:500;letter-spacing:.01em;
  border-bottom:1px solid var(--accent);padding-bottom:3px;color:var(--fg);
  transition:gap .35s var(--ease),color .25s;
}
.tlink .arr{color:var(--accent);transition:transform .35s var(--ease)}
.tlink:hover{color:var(--accent)}
.tlink:hover .arr{transform:translateX(4px)}

/* ============ HEADER ============ */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);
  transition:padding .35s,box-shadow .35s;
  /* Die helle, leicht transparente Flaeche liegt dauerhaft an — nicht erst
     beim Scrollen. */
  background:color-mix(in oklch,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--border);
}
/* Beim Scrollen wird die Leiste nur noch etwas flacher. */
.site-head.scrolled{
  padding-block:12px;
  box-shadow:0 1px 20px rgba(15,17,26,.07);
}
.brand{display:flex;align-items:center;gap:13px;z-index:62}
.brand .logo{height:62px;width:auto;flex:none;transition:height .35s var(--ease)}
.brand .logo-white{display:none}
.site-head.scrolled .brand .logo{height:52px}
/* CTA im Header: ruhige Outline statt gefüllter Fläche — die volle Farbfläche
   wirkte im Kopfbereich zu schwer. Über dem Foto weiß umrandet, auf hellem
   Grund dunkel umrandet; beim Hover kehrt sich das Verhältnis um. */
.nav a.nav-cta{
  background:transparent;border:1px solid var(--fg);color:var(--fg);
  padding:11px 20px;font-weight:500;
}
.nav a.nav-cta::after{display:none}
.nav a.nav-cta:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}

.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:14.5px;font-weight:500;letter-spacing:.01em;position:relative;padding:4px 0;color:var(--fg)}
/* Die Unterstreichung nimmt die Farbe des Links an: auf dem transparenten
   Header über dem Foto also weiß, auf hellem Grund dunkel bzw. im Akzent. */
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:currentColor;transition:width .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--accent)}
.nav .nav-cta{margin-left:6px}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:62}
.burger span{width:26px;height:2px;background:var(--fg);transition:.3s var(--ease)}
.mobile-nav{
  position:fixed;inset:0;z-index:61;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--gut);
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{
  font-family:var(--font-display);font-size:clamp(34px,9vw,56px);letter-spacing:-.02em;
  color:oklch(94% 0 0);padding:8px 0;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:baseline;gap:16px;
}
.mobile-nav a .n{font-family:var(--font-body);font-size:13px;color:var(--accent);letter-spacing:.2em}
.mobile-nav a:hover{color:var(--accent)}
.mobile-nav .mfoot{margin-top:34px;color:rgba(255,255,255,.6);font-size:14px;line-height:2}
.mobile-nav .mfoot a{font-family:var(--font-body);font-size:15px;color:#fff;display:inline}
body.menu-open{overflow:hidden}
body.menu-open .burger.in-mobile span{background:#fff}
body.menu-open .burger.in-mobile span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger.in-mobile span:nth-child(2){opacity:0}
body.menu-open .burger.in-mobile span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;min-height:calc(100svh - var(--headh));display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,-1.5%)}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,13,12,.55) 0%,rgba(15,13,12,.12) 38%,rgba(15,13,12,.72) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vh,120px);color:#fff}
.hero h1{color:#fff;max-width:16ch}
/* Der Heroinhalt sitzt unten und waechst mit dem laengeren Text nach oben.
   Die Kopfleiste ueberdeckt ihn nicht mehr, deshalb reicht ein kleinerer
   Mindestabstand. */
.hero .hero-inner{padding-top:clamp(40px,7vh,86px)}
.hero .hero-sub{margin-top:24px;max-width:52ch;color:rgba(255,255,255,.85);font-size:clamp(17px,1.5vw,20px);line-height:1.7;text-wrap:pretty}
/* Der erste, kurze Satz soll auf einer Zeile stehen und nicht mit einem
   einzelnen Wort umbrechen; muss er doch umbrechen, werden die Zeilen
   gleichmaessig verteilt. */
.hero .hero-sub:first-of-type{max-width:none;text-wrap:balance}
/* Auf schmalen Schirmen bricht die Ueberschrift ohnehin um; der gesetzte
   Umbruch wuerde dort eine Zeile zu viel erzeugen. */
@media(max-width:520px){
  .hero h1 br{display:none}
  /* Auf kleinen Telefonen muss der laengere Text mit den Knoepfen in den
     sichtbaren Bereich passen — Schrift und Abstaende etwas enger. */
  .hero h1{font-size:clamp(28px,8.4vw,34px);line-height:1.15}
  .hero .hero-inner{padding-top:32px;padding-bottom:40px}
  .hero .hero-sub{margin-top:16px;font-size:16px;line-height:1.55}
  .hero .hero-cta{margin-top:26px}
}
/* Sehr kleine Geraete (iPhone SE): noch etwas enger, damit die Knoepfe ohne
   Scrollen sichtbar bleiben. */
@media(max-width:400px) and (max-height:700px){
  .hero .hero-inner{padding-bottom:32px}
  .hero .hero-sub{margin-top:14px}
  .hero .hero-cta{margin-top:22px}
}
.hero .hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}
.hero-meta{
  position:absolute;left:var(--gut);right:var(--gut);top:clamp(26px,5vh,52px);
  z-index:2;display:flex;justify-content:space-between;color:rgba(255,255,255,.7);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);display:block;animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* page hero (sub pages) */
.page-hero{position:relative;min-height:calc(62vh - var(--headh) * .5);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.page-hero .hero-media::after{background:linear-gradient(180deg,rgba(15,13,12,.5),rgba(15,13,12,.78))}
.page-hero .hero-inner{padding-bottom:clamp(44px,7vh,80px)}
.page-hero h1{color:#fff}
.page-hero .crumb{color:rgba(255,255,255,.65);font-size:13px;letter-spacing:.06em;margin-bottom:18px}
.page-hero .crumb a:hover{color:#fff}

/* ============ generic blocks ============ */
.kicker-row{display:flex;flex-direction:column;gap:18px;max-width:62ch}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.two-col.top{align-items:start}
.split-head{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
@media(max-width:860px){.two-col,.split-head{grid-template-columns:1fr;gap:32px}.split-head{align-items:start}}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.stat{background:var(--bg);padding:clamp(24px,3vw,40px) clamp(20px,2.5vw,32px)}
.dark .stat{background:var(--ink-2)}
.dark .stat-row{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}
.stat .v{font-family:var(--font-display);font-size:clamp(36px,4.4vw,58px);font-weight:500;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat .v .u{font-size:.45em;color:var(--accent);margin-left:.1em}
.stat .k{margin-top:12px;font-size:13.5px;color:var(--muted);letter-spacing:.02em}
.dark .stat .k{color:oklch(72% 0.012 250)}
@media(max-width:760px){.stat-row{grid-template-columns:1fr 1fr}}

/* service list */
.svc-list{border-top:1px solid var(--border)}
.svc{
  display:grid;grid-template-columns:64px 1fr auto;gap:clamp(16px,3vw,40px);align-items:start;
  /* Der seitliche Innenabstand ist konstant — dadurch kleben Ziffer und
     Kuerzel nie an der Kante der Hoverflaeche, und beim Hover bewegt sich
     nichts. */
  padding:clamp(26px,3.4vw,44px) clamp(22px,4.4vw,64px);
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
/* Hover ohne Layoutbewegung: früher schob ein padding-left die ganze Zeile
   zur Seite, was sichtbar gesprungen ist. Jetzt laufen nur die Fläche und
   eine Akzentkante ein — beide absolut positioniert, also ohne Umbruch. */
.svc::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--accent);opacity:.06;transition:width .45s var(--ease);z-index:0;
}
.svc::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--accent);transition:width .3s var(--ease);z-index:0;
}
.svc > *{position:relative;z-index:1}
/* (Die frühere .svc-bg-Lösung ist entfallen — Leistungszeilen nutzen jetzt
   dieselbe Darstellung wie auf der Startseite, siehe .svc.mit-bild.) */
/* Die Flaeche deckt genau die Zeile ab; der Abstand zum Text kommt aus dem
   Innenabstand der Zeile, nicht aus einer breiteren Flaeche. */
.svc:hover::before{width:100%}
.svc:hover::after{width:3px}
.svc .num{font-family:var(--font-display);font-size:14px;color:var(--accent);font-weight:600;letter-spacing:.06em;padding-top:10px;font-variant-numeric:tabular-nums}
.svc h3{font-family:var(--font-display);font-size:clamp(21px,2.3vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.svc p{margin-top:10px;color:var(--muted);max-width:60ch;font-size:15.5px}
.svc h3{transition:color .3s var(--ease)}
a.svc:hover h3{color:var(--accent)}
.svc .svc-go{align-self:center;color:var(--accent);font-size:22px;opacity:0;transform:translateX(-8px);transition:.4s var(--ease)}
.svc:hover .svc-go{opacity:1;transform:translateX(0)}
.svc .svc-tag{align-self:center;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:6px 12px;border-radius:var(--radius);white-space:nowrap}
.svc:hover .svc-tag{border-color:var(--accent);color:var(--accent)}
@media(max-width:680px){.svc{grid-template-columns:40px 1fr}.svc .svc-go,.svc .svc-tag{display:none}}

/* teaser cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px)}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.card .ph{aspect-ratio:4/3;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .ph img{transform:scale(1.06)}
.card .cb{padding:24px 24px 28px}
.card .cb .ck{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500}
.card .cb h3{font-family:var(--font-display);font-size:22px;font-weight:500;margin-top:10px;line-height:1.2;letter-spacing:-.02em}
.card .cb p{margin-top:10px;color:var(--muted);font-size:15px}

/* feature image block */
.figure{position:relative;overflow:hidden}
.figure img{width:100%;height:100%;object-fit:cover}
.figure.tall img{aspect-ratio:3/4}
.figure.wide img{aspect-ratio:16/10}
.figure .cap{position:absolute;left:0;bottom:0;padding:14px 18px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:12.5px;letter-spacing:.04em;width:100%}

/* gallery */
.gal{columns:3;column-gap:14px}
@media(max-width:900px){.gal{columns:2}}
@media(max-width:560px){.gal{columns:1}}
.gal figure{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;cursor:zoom-in;background:var(--ink)}
.gal figure img{width:100%;transition:transform 1s var(--ease),opacity .6s}
.gal figure:hover img{transform:scale(1.05)}
.gal figure figcaption{
  position:absolute;inset:auto 0 0 0;padding:30px 16px 14px;
  background:linear-gradient(transparent,rgba(15,13,12,.78));
  color:#fff;font-size:13px;letter-spacing:.03em;
  opacity:0;transform:translateY(8px);transition:.4s var(--ease);
}
.gal figure figcaption b{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em;display:block;margin-bottom:3px}
.gal figure:hover figcaption{opacity:1;transform:translateY(0)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(12,10,9,.94);display:none;align-items:center;justify-content:center;padding:5vw;opacity:0;transition:opacity .3s}
.lightbox.open{display:flex;opacity:1}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .lb-cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:14px;letter-spacing:.04em}
.lightbox .lb-x,.lightbox .lb-nav{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:30px;width:56px;height:56px;display:grid;place-items:center;opacity:.7;transition:opacity .2s}
.lightbox .lb-x:hover,.lightbox .lb-nav:hover{opacity:1}
.lightbox .lb-x{top:18px;right:18px;font-size:34px}
.lightbox .lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:10px;top:50%;transform:translateY(-50%)}

/* process steps */
.steps{display:grid;gap:1px;background:var(--border);border-block:1px solid var(--border)}
/* Feste Breite der Marken-Spalte: mit max-content bestimmt jede Zeile ihre
   eigene Breite, dadurch begannen "Die Gruendung", "Wachstum" und
   "Spezialist" an drei verschiedenen Stellen. Jetzt stehen sie in einer Flucht. */
.step{background:var(--bg);display:grid;grid-template-columns:clamp(120px,16vw,200px) 1fr;gap:clamp(20px,4vw,60px);padding:clamp(30px,4vw,56px) 0}
.step .sn{font-family:var(--font-display);font-size:clamp(40px,5vw,68px);font-weight:500;color:var(--accent);line-height:.95;letter-spacing:-.04em;padding-left:clamp(0px,1vw,8px);font-variant-numeric:tabular-nums}
.step h3{font-family:var(--font-display);font-size:clamp(22px,2.5vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.step p{margin-top:12px;color:var(--muted);max-width:60ch}
@media(max-width:640px){.step{grid-template-columns:1fr;gap:10px}.step .sn{font-size:42px}}

/* quote */
.quote{max-width:24ch}
.quote blockquote{font-family:var(--font-display);font-size:clamp(26px,3.4vw,44px);font-weight:500;line-height:1.24;letter-spacing:-.028em}
.quote .src{margin-top:26px;font-size:14px;letter-spacing:.04em;color:var(--muted)}
.quote .src b{color:var(--fg);font-weight:600}

/* ============ FORMS ============ */
.form{display:grid;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:600;letter-spacing:.04em}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:16px;color:var(--fg);
  background:var(--surface);border:1px solid var(--border);
  padding:14px 16px;border-radius:var(--radius);width:100%;
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 18%,transparent)}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--accent)}
.field .err{font-size:12.5px;color:var(--accent);display:none}
.field.bad .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5}
.check input{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;flex:none}
.form-ok{
  display:none;padding:28px;border:1px solid var(--accent);
  background:color-mix(in oklch,var(--accent) 7%,var(--surface));
  border-radius:var(--radius);
}
.form-ok.show{display:block}
.form-ok b{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em;display:block;margin-bottom:8px}

/* contact info list */
.cinfo{display:grid;gap:26px}
.cinfo .ci{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding-bottom:24px;border-bottom:1px solid var(--border)}
.cinfo .ci:last-child{border-bottom:0}
.cinfo .ci .ic{width:44px;height:44px;border:1px solid var(--border);display:grid;place-items:center;color:var(--accent);border-radius:var(--radius);flex:none}
.cinfo .ci .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.cinfo .ci .val{font-size:17px}
.cinfo .ci .val a:hover{color:var(--accent)}

/* map */
.mapfig{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--border);background:var(--panel)}
.mapfig iframe{width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.02)}

/* ============ FOOTER ============ */
.site-foot{background:var(--ink);color:oklch(80% 0.008 250);padding-top:clamp(64px,8vw,110px)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-top .display{color:#fff}
.foot-col h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:oklch(64% 0.012 250);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;color:oklch(82% 0.008 250);font-size:15px;line-height:1.5;margin-bottom:11px}
/* Footer-Links: kein Farbwechsel beim Hover, stattdessen wächst eine weiße
   Linie unter dem Text ein. */
.foot-col a{position:relative;width:fit-content}
.foot-col a::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:#fff;transition:width .32s var(--ease);
}
.foot-col a:hover::after,.foot-col a:focus-visible::after{width:100%}
.foot-brand .display{font-size:26px;margin-bottom:14px}
/* Das Logo wird ueberall in Originalfarben gezeigt. Auf der dunklen
   Footerflaeche verschwindet der graue Schriftzug, deshalb steht es dort
   auf einer hellen Platte. */
.foot-logo-platte{display:inline-block;background:var(--surface);padding:14px 18px;margin-bottom:20px}
.foot-logo{height:58px;width:auto;display:block}
.foot-brand p{max-width:34ch;color:oklch(70% 0.012 250);font-size:15px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:26px;font-size:13px;color:oklch(60% 0.012 250)}
.foot-bottom a{position:relative}
.foot-bottom a::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:#fff;transition:width .32s var(--ease);
}
.foot-bottom a:hover::after,.foot-bottom a:focus-visible::after{width:100%}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-media img,.hero-media video{animation:none;transform:scale(1.05)}
  .scroll-cue i{animation:none}
}

/* ---- responsive nav ---- */
@media(max-width:920px){
  .nav .nav-link,.nav .nav-cta{display:none}
  .burger{display:flex}
}
/* Der Scrollhinweis lag auf schmalen Schirmen ueber dem zweiten Knopf. */
@media(max-width:620px){.scroll-cue{display:none}}
/* Auf Telefonen wuerde eine 98px hohe Leiste zu viel vom Bild wegnehmen. */
@media(max-width:620px){
  :root{--headh:74px;--headh-s:64px}
  .site-head{padding-block:12px}
  .brand .logo{height:50px}
  .site-head.scrolled{padding-block:9px}
  .site-head.scrolled .brand .logo{height:46px}
}

/* ============ TEAM ============ */
.team-block{margin-top:clamp(44px,6vw,86px)}
.team-block:first-of-type{margin-top:0}
.team-head{display:flex;align-items:baseline;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:clamp(24px,3vw,40px)}
.team-head h2{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.022em}
.team-head .cnt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-left:auto;white-space:nowrap;border:1px solid var(--border);padding:6px 12px;flex:none}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
@media(max-width:980px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.team-grid{grid-template-columns:repeat(2,1fr)}}
.person .pf{aspect-ratio:1/1;overflow:hidden;background:var(--panel);border:1px solid var(--border)}
.person .pf img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.02);transition:filter .5s var(--ease),transform 1s var(--ease)}
.person:hover .pf img{filter:grayscale(0);transform:scale(1.03)}
.person .pf.empty{display:grid;place-items:center;color:var(--muted)}
.person .pf.empty span{font-family:var(--font-display);font-size:clamp(26px,3vw,38px);font-weight:500;letter-spacing:.01em;color:var(--accent);opacity:.55}
.person .pn{font-family:var(--font-display);font-size:clamp(16px,1.4vw,18px);font-weight:600;line-height:1.3;letter-spacing:-.015em;margin-top:16px}
.person .pr{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.person .pt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:7px;display:block}

/* ============ REFERENZ-LISTE + FILTER ============ */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,3vw,40px)}
.filter-bar button{
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.03em;
  padding:10px 18px;border:1px solid var(--border);background:transparent;color:var(--muted);
  border-radius:var(--radius);cursor:pointer;transition:color .25s,border-color .25s,background .25s;
}
.filter-bar button:hover{color:var(--fg);border-color:var(--fg)}
.filter-bar button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
/* ============ GESAMTUEBERSICHT ALS KARTEN ============
   Gleiche Darstellung wie die Projektkarten weiter oben: Bild oben,
   darunter Kategorie, Nummer, Titel und Zusatz. Der Filter bleibt. */
.reflist.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px)}
@media(max-width:900px){.reflist.karten{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.reflist.karten{grid-template-columns:1fr}}
.reflist .ri[hidden]{display:none}
.reflist .ri{cursor:pointer}
.reflist .ri .cb h3{font-size:20px;transition:color .25s var(--ease)}
.reflist .ri:hover .cb h3,
.reflist .ri:focus-visible .cb h3{color:var(--accent)}
.reflist .ri:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .reflist .ri .ph img{transition:none}
  .reflist .ri:hover .ph img{transform:none}
}
.reflist .ri a.rl:hover h3{color:var(--accent)}
@media(max-width:680px){
  .reflist .ri{grid-template-columns:38px 1fr;gap:12px}
  .reflist .ri .rc{grid-column:2;justify-self:start;margin-top:10px}
}
.filter-empty{padding:40px 0;color:var(--muted);display:none}
.filter-empty.show{display:block}

/* ============ PROJEKT-DETAIL ============ */
.projfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
@media(max-width:560px){.projfacts{grid-template-columns:1fr}}
.projfacts div{background:var(--bg);padding:22px 24px}
.projfacts dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.projfacts dd{font-family:var(--font-display);font-size:clamp(22px,2.3vw,28px);font-weight:500;line-height:1.2;margin-top:8px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metalist{display:grid;gap:22px}
.metalist .m{padding-bottom:18px;border-bottom:1px solid var(--border)}
.metalist .m:last-child{border-bottom:0;padding-bottom:0}
.metalist .m .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.metalist .m .v{font-size:16px;line-height:1.6}
.taglist{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.taglist span{font-size:13px;color:var(--muted);border:1px solid var(--border);padding:9px 15px;border-radius:var(--radius)}
.noimg{aspect-ratio:4/3;background:var(--ink);display:grid;place-items:center;text-align:center;padding:24px}
.noimg span{font-family:var(--font-display);font-size:clamp(20px,2.1vw,26px);font-weight:500;letter-spacing:-.02em;color:oklch(70% 0.02 258);line-height:1.25}
.noimg small{display:block;font-family:var(--font-body);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-l);margin-top:12px}

/* ============ KARRIERE ============ */
.joblist{border-top:1px solid var(--border)}
.joblist .job{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.joblist .job h3{font-family:var(--font-display);font-size:clamp(19px,2vw,23px);font-weight:500;letter-spacing:-.02em}
.joblist .job .jm{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.checklist{display:grid;gap:13px;margin-top:22px}
.checklist li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:16px;color:var(--muted)}
.checklist li::before{content:"";width:7px;height:7px;background:var(--accent);margin-top:9px;display:block}
.anchor-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.anchor-nav a{font-size:13px;font-weight:600;letter-spacing:.03em;padding:10px 18px;border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);transition:.25s}
.anchor-nav a:hover{color:var(--fg);border-color:var(--fg)}
.dark .anchor-nav a{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75)}
.dark .anchor-nav a:hover{color:#fff;border-color:#fff}

/* ============ MOBILE-NAVIGATION (8 Einträge) ============
   Das geschlossene Panel wird zusätzlich zur Transform unsichtbar geschaltet:
   Bei vielen Einträgen ist der Inhalt höher als das Panel und ragte sonst
   sichtbar in den Header. visibility blendet es größenunabhängig aus und nimmt
   die Links im geschlossenen Zustand aus der Tab-Reihenfolge. */
.mobile-nav{
  visibility:hidden;
  overflow-y:auto;overscroll-behavior:contain;
  justify-content:safe center;
  padding-block:clamp(56px,7vh,88px);
  transition:transform .5s var(--ease),visibility 0s linear .5s;
}
.mobile-nav.open{visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.mobile-nav a{font-size:clamp(26px,5.6vw,34px);padding:7px 0}
.mobile-nav .mfoot{margin-top:24px}
@media(prefers-reduced-motion:reduce){
  .mobile-nav{transition:none}
}

/* ============ KARTE MIT EINWILLIGUNG ============
   Die Karte lädt erst auf Klick — vorher entsteht keine Verbindung zu
   OpenStreetMap und es wird keine IP-Adresse übertragen (DSGVO). */
.map-consent{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:16px;padding:clamp(24px,4vw,48px);background:var(--panel);
  background-image:linear-gradient(135deg,color-mix(in oklch,var(--ink) 6%,transparent) 0 1px,transparent 1px 12px);
}
.map-consent p{max-width:52ch;color:var(--muted);font-size:15px;line-height:1.65}
.map-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px}
.mapfig.loaded .map-consent{display:none}

/* Bewerben-Button je Stelle */
.joblist .job{gap:24px}
.joblist .job .job-apply{flex:none;padding:11px 18px;font-size:13px}
@media(max-width:620px){
  .joblist .job{flex-direction:column;align-items:flex-start;gap:14px}
  .joblist .job .job-apply{width:auto}
}

/* ============================================================
   BEWEGUNG
   Aufbauend auf der Coming-Soon-Seite: ruhiges Aufsteigen beim
   Eintritt, gestaffelt in Gruppen. Alles wird bei
   prefers-reduced-motion vollständig abgeschaltet.
   ============================================================ */

/* Einblenden beim Laden (Hero) — Pendant zu .rise auf lundr-bau.de */
.rise{opacity:0;transform:translateY(16px);animation:rise .95s var(--ease) both}
@keyframes rise{to{opacity:1;transform:none}}
.r1{animation-delay:.05s}.r2{animation-delay:.15s}.r3{animation-delay:.25s}
.r4{animation-delay:.35s}.r5{animation-delay:.45s}.r6{animation-delay:.6s}

/* Gestaffeltes Erscheinen innerhalb einer Gruppe (--i wird per JS gesetzt) */
[data-stagger] > .reveal{transition-delay:calc(var(--i,0) * 70ms)}
.team-grid > .reveal{transition-delay:calc(var(--i,0) * 45ms)}
.reflist > .reveal{transition-delay:calc(var(--i,0) * 28ms)}

/* Bilder sanft einblenden, sobald sie geladen sind */
img[data-fade]{opacity:0;transition:opacity .7s var(--ease)}
img[data-fade].loaded{opacity:1}

/* Hero-Inhalt beim Scrollen leicht mitführen und ausblenden */
.hero-inner{will-change:transform,opacity}

/* Zahlen zählen weich hoch, ohne die Breite springen zu lassen */
.stat .v{font-variant-numeric:tabular-nums}

/* Filterwechsel in der Referenzliste */
.reflist .ri{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.reflist.filtering .ri{opacity:0;transform:translateY(6px)}

/* Karten heben sich beim Hover minimal an (ohne Schatten, nur Linie und Bild) */
.card{transition:border-color .35s var(--ease),transform .5s var(--ease)}
.card:hover{border-color:color-mix(in oklch,var(--accent) 45%,var(--border));transform:translateY(-3px)}
.person .pf{transition:border-color .35s var(--ease)}
.person:hover .pf{border-color:color-mix(in oklch,var(--accent) 45%,var(--border))}

/* Buttons: Druckpunkt */
.btn:active{transform:translateY(1px)}

@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;animation:none}
  [data-stagger] > .reveal,.team-grid > .reveal,.reflist > .reveal{transition-delay:0s !important}
  img[data-fade]{opacity:1;transition:none}
  .reflist .ri{transition:none}
  .card:hover{transform:none}
  .card,.person .pf{transition:none}
}

/* Verlinkte Referenzen als solche erkennbar machen */
.reflist .ri a.rl h3::after{
  content:"→";color:var(--accent);font-size:.78em;margin-left:.55em;
  display:inline-block;transition:transform .35s var(--ease);
}
.reflist .ri a.rl:hover h3::after{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .foot-col a::after,.foot-bottom a::after{transition:none}
}

@media(prefers-reduced-motion:reduce){
  .svc::before,.svc::after,.svc h3{transition:none}
}

/* ============ RECHTSTEXTE (Impressum, Datenschutz) ============ */
.legal{max-width:76ch}
.legal h2{font-family:var(--font-display);font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:-.022em;line-height:1.25;margin-top:clamp(40px,4.5vw,64px)}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--font-display);font-size:clamp(17px,1.7vw,19px);font-weight:600;letter-spacing:-.01em;margin-top:30px}
.legal p{margin-top:14px;color:var(--muted);line-height:1.8}
.legal p strong,.legal li strong{color:var(--fg);font-weight:600}
.legal ul{margin-top:14px;padding-left:0;list-style:none}
.legal li{position:relative;padding-left:22px;margin-top:9px;color:var(--muted);line-height:1.7}
.legal li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--accent)}
.legal a{border-bottom:1px solid var(--accent);padding-bottom:1px}
.legal a:hover{color:var(--accent)}
.legal .adr{margin-top:14px;color:var(--fg);line-height:1.8}
.legal .meta{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted)}
.legal-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.legal-toc a{font-size:13px;font-weight:500;letter-spacing:.02em;padding:9px 16px;border:1px solid var(--border);color:var(--muted);transition:color .25s,border-color .25s}
.legal-toc a:hover{color:var(--fg);border-color:var(--fg)}
.legal-note{
  margin-top:26px;padding:20px 22px;border-left:2px solid var(--accent);
  background:color-mix(in oklch,var(--accent) 5%,var(--surface));
  font-size:14.5px;color:var(--muted);line-height:1.7;
}

/* ============================================================
   MOBILE-KORREKTUREN
   ============================================================ */

/* Kennzahlen-Reihen: die Spaltenzahl stand früher als Inline-Style im HTML
   und hat die Media-Queries überschrieben — dreistellige Zahlen mit Einheit
   sprengten dadurch auf dem Telefon die Zeile. */
.stat-row.cols-3{grid-template-columns:repeat(3,1fr)}
.stat-row.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.stat-row.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stat-row,.stat-row.cols-3,.stat-row.cols-2{grid-template-columns:1fr}}

/* Formularfelder dürfen im Grid schrumpfen (sonst erzwingt die Mindestbreite
   der Eingabefelder einen horizontalen Überlauf). */
.form,.row2,.field,.cinfo,.cinfo .ci{min-width:0}
.field input,.field select,.field textarea{max-width:100%;min-width:0}

/* Tap-Ziele auf Touch-Geräten auf mindestens 44 px bringen */
@media(max-width:920px){
  .burger{padding:14px 10px}
}
@media(max-width:620px){
  .filter-bar button,.legal-toc a,.anchor-nav a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .joblist .job .job-apply{min-height:44px}
}

/* Lange Wörter in Rechtstexten und Tabellen sauber umbrechen */
.legal p,.legal li,.reflist .ri h3,.reflist .ri p{overflow-wrap:break-word}

/* Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen — sonst sprengt ein
   langer Projektname auf sehr schmalen Geräten (320 px) die Zeile. */
.reflist .ri > *,.svc > *,.joblist .job > *,.step > *{min-width:0}

/* Kategorie-Kennzeichnung: auf sehr schmalen Geräten umbrechen lassen —
   „Wohn- und Geschäftsanlagen" ist in einer Zeile breiter als der Bildschirm. */
@media(max-width:430px){
  .reflist .ri .rc{white-space:normal;font-size:11px;line-height:1.35;max-width:100%}
}

/* ============================================================
   LESBARKEIT ÜBER FOTOS
   Der helle Blauton der Eyebrow ging auf hellem Beton unter. Über Bildern
   deshalb Weiß mit weichem Schatten; in den flächig dunklen Abschnitten
   bleibt der blaue Akzent, dort trägt er.
   ============================================================ */
.hero .eyebrow.on-dark,
.page-hero .eyebrow.on-dark{
  color:#fff;
  text-shadow:0 1px 16px rgba(15,17,26,.75), 0 0 2px rgba(15,17,26,.5);
}
.hero h1,.page-hero h1{text-shadow:0 2px 26px rgba(15,17,26,.45)}
.hero .hero-sub{text-shadow:0 1px 18px rgba(15,17,26,.6)}
.page-hero .crumb{color:rgba(255,255,255,.78);text-shadow:0 1px 14px rgba(15,17,26,.6)}
.hero-meta{text-shadow:0 1px 12px rgba(15,17,26,.6)}

/* Verlauf im mittleren Bereich anziehen, damit Text auf hellen Motiven
   (Beton, Himmel) sicher steht — oben und unten bleibt es wie gehabt. */
.hero .hero-media::after{
  background:linear-gradient(180deg,
    rgba(15,17,26,.58) 0%,
    rgba(15,17,26,.20) 34%,
    rgba(15,17,26,.42) 62%,
    rgba(15,17,26,.80) 100%);
}
.page-hero .hero-media::after{
  background:linear-gradient(180deg,
    rgba(15,17,26,.52) 0%,
    rgba(15,17,26,.34) 40%,
    rgba(15,17,26,.62) 72%,
    rgba(15,17,26,.84) 100%);
}

/* ============================================================
   KONTRAST IN DUNKLEN ABSCHNITTEN
   Mehrere Bausteine greifen direkt auf --muted bzw. --fg zu. Auf dem
   dunklen Grund ergab das dunkelgrauen bis fast schwarzen Text.
   ============================================================ */
.dark .quote .src{color:oklch(74% 0.012 250)}
.dark .quote .src b{color:oklch(97% 0.004 250)}
/* Textlinks stehen auf dunklem Grund sonst in der dunklen Schriftfarbe. */
.dark .tlink{color:oklch(96% 0.005 250);border-bottom-color:var(--accent-l)}
.dark .tlink .arr{color:var(--accent-l)}
.dark .tlink:hover{color:var(--accent-l)}
.dark .metalist .m .k{color:oklch(70% 0.012 250)}
.dark .metalist .m{border-bottom-color:rgba(255,255,255,.14)}
.dark .metalist .m .v{color:oklch(92% 0.006 250)}
.dark .metalist .m .v a{color:#fff}
.dark .svc p,.dark .card .cb p,.dark .checklist li,.dark .taglist span{color:oklch(72% 0.012 250)}
.dark .svc,.dark .svc-list,.dark .joblist .job,.dark .taglist span{border-color:rgba(255,255,255,.16)}
.dark .svc h3,.dark .card .cb h3,.dark .step h3{color:oklch(96% 0.005 250)}
.dark .cinfo .ci .k{color:oklch(70% 0.012 250)}
.dark .cinfo .ci{border-bottom-color:rgba(255,255,255,.14)}
.dark .person .pr,.dark .reflist .ri p{color:oklch(72% 0.012 250)}

/* Fusszeile lag mit 4,47:1 knapp unter dem AA-Mindestkontrast */
.foot-bottom{color:oklch(68% 0.012 250)}

/* ============ HERO-VIDEO ============
   Das Standbild liegt darunter und traegt den ersten Paint. Das Video wird
   erst nach dem Laden der Seite geholt und blendet sich darueber. */
.hero-media .hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:none;opacity:0;transition:opacity 1s var(--ease);
  pointer-events:none;
}
.hero-media .hero-video.laeuft{opacity:1}
/* Solange das Video laeuft, ruht die Ken-Burns-Bewegung des Standbilds */
.hero-media:has(.hero-video.laeuft) img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .hero-media .hero-video{display:none}
}

/* Anfahrt ohne eingebettete Karte */
.anfahrt{border:1px solid var(--border);padding:clamp(24px,3.4vw,40px);background:var(--surface)}
.anfahrt .adr{margin-top:16px;font-size:17px;line-height:1.7}
.anfahrt p{color:var(--muted);margin-top:14px;line-height:1.7}

/* Lange Komposita (Freistellungsbescheinigung, Praequalifizierungsbestaetigung)
   duerfen auf schmalen Geraeten umbrechen. Automatische Silbentrennung ist
   bewusst aus: sie hat Woerter wie "ter-mintreu" oder Namen wie
   "Rahen-brock" getrennt. */
.svc h3,.svc p,.card .cb h3,.card .cb p,.team-head h2,.person .pn,.person .pr,.joblist .job h3{
  overflow-wrap:break-word;hyphens:manual;
}

/* ============ LEISTUNGSZEILEN MIT HINTERGRUNDBILD ============
   Innenabstand und Flaeche kommen aus der Grundregel oben; hier kommt nur
   das Foto dazu. */
/* Die Akzentflaeche der Zeile wird bei Bildzeilen ueber die Hintergrundfarbe
   gelegt, damit die Bildflaeche selbst nur den rechten Teil einnimmt. */
.svc.mit-bild{transition:background-color .45s var(--ease)}
.svc.mit-bild:hover{background-color:color-mix(in oklch,var(--accent) 6%,transparent)}
/* Die Bildflaeche deckt nur das rechte Drittel ab. Dadurch wird das Foto
   deutlich weniger hochskaliert (es bleibt scharf), und der Verlauf hat die
   ganze Flaechenbreite Zeit zum Ausblenden statt nur ein schmales Stueck. */
.svc.mit-bild::before{
  left:auto;right:0;width:34%;
  background-image:var(--bild);
  background-size:cover;background-position:center;
  filter:grayscale(.25) contrast(1.02);
  /* Mehrstufiger, weicher Verlauf — links laeuft er vollstaendig auf Null,
     genau dort endet auch der Fliesstext. */
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.94) 26%,rgba(0,0,0,.74) 46%,rgba(0,0,0,.44) 64%,rgba(0,0,0,.18) 82%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.94) 26%,rgba(0,0,0,.74) 46%,rgba(0,0,0,.44) 64%,rgba(0,0,0,.18) 82%,rgba(0,0,0,0) 100%);
  opacity:0;transition:opacity .55s var(--ease);
}
.svc.mit-bild:hover::before{width:34%;opacity:.85}
/* Das Kuerzel steht im Bildbereich und braucht deshalb eine eigene Flaeche,
   sonst ist es auf dunklen Motiven nicht mehr lesbar. Die Flaeche hat die
   Farbe des Seitenhintergrunds und faellt ohne Hover nicht auf. */
.svc.mit-bild .svc-tag{background:var(--bg)}
/* Der Fliesstext wird etwas schmaler gefuehrt, damit er auch bei mittleren
   Fensterbreiten vor dem Bildbereich endet und nicht auf dem Foto steht. */
.svc.mit-bild p{max-width:48ch}
/* Unterhalb von 1100 px bleibt neben dem Text kein Platz mehr fuer das Foto —
   dort zeigt die Zeile wieder die ruhige Akzentflaeche wie alle anderen. */
@media(max-width:1099px){
  .svc.mit-bild::before{
    left:0;right:auto;width:0;
    background-image:none;filter:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .svc.mit-bild:hover{background-color:transparent}
  .svc.mit-bild:hover::before{width:100%;opacity:.06}
}
@media(prefers-reduced-motion:reduce){
  .svc.mit-bild::before{transition:none}
}


/* ============ DIREKTER DRAHT (mitlaufend am rechten Rand) ============
   Sichtbar sind nur zwei Zeichen. Beim Ueberfahren faehrt die Beschriftung
   nach links aus — die Leiste haengt am rechten Rand, also waechst sie in den
   freien Seitenrand hinein und schiebt nichts weg. Unterhalb von 1200 px und
   bei niedrigen Fenstern bleibt sie aus; dort stehen Telefon und E-Mail im
   Menue und im Fussbereich. */
.direktdraht{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.direktdraht a{
  display:flex;align-items:center;
  background:var(--accent);color:#fff;overflow:hidden;
  transition:background .3s var(--ease);
}
.direktdraht .dd-zeichen{
  flex:none;width:64px;height:64px;
  display:grid;place-items:center;
}
.direktdraht .dd-zeichen svg{width:28px;height:28px;display:block}
.direktdraht .dd-text{
  white-space:nowrap;font-size:13.5px;font-weight:500;letter-spacing:.05em;
  max-width:0;opacity:0;padding-right:0;
  transition:max-width .45s var(--ease),opacity .3s var(--ease),padding-right .45s var(--ease);
}
.direktdraht a:hover,
.direktdraht a:focus-visible{background:var(--ink)}
.direktdraht a:hover .dd-text,
.direktdraht a:focus-visible .dd-text{max-width:240px;opacity:1;padding-right:20px}
@media(max-width:1199px){.direktdraht{display:none}}
@media(max-height:620px){.direktdraht{display:none}}
@media(prefers-reduced-motion:reduce){
  .direktdraht a,.direktdraht .dd-text{transition:none}
}