/* ==========================================================================
   V&V Bauunternehmen GmbH — Website-Stylesheet
   Ein einziges, wartbares Stylesheet. Aufbau:
     1. Schriften        2. Design-Tokens     3. Reset & Basis
     4. Layout-Helfer    5. Header / Nav      6. Buttons
     7. Hero (Start)     8. Kennzahlen        9. Reveal-Animation
     10. Leistungs-Index 11. Leistungs-Kacheln 12. Referenz-Filter + Karten
     13. Über uns        14. Galerie          15. Auftraggeber-Band
     16. Kontakt & Karte 17. Footer           18. Unterseiten-Hero / Prose
   ========================================================================== */

/* 1. Schriften — Syne Variable Font, lokal gehostet (DSGVO-konform) */
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* 2. Design-Tokens */
:root {
  --color-ink:#1a1a1a;
  --color-ink-soft:#444444;
  --color-concrete:#f2f0ed;
  --color-concrete-dim:#e6e2dc;
  --color-accent:#b5342c;
  --color-accent-dim:#8f2921;
  --color-accent-light:#e2685f;
  --color-white:#ffffff;
  --color-grey-mid:#888888;
  --color-grey-line: rgba(0,0,0,0.09);

  --font-display: 'Syne', system-ui, -apple-system, sans-serif;
  --font-text: 'Syne', system-ui, -apple-system, sans-serif;

  --fs-hero:clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
  --fs-h1:clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem);
  --fs-h2:clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --fs-h3:clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-lead:clamp(0.95rem, 0.9rem + 0.22vw, 1.1rem);
  --fs-body:0.9375rem;
  --fs-small:0.8125rem;
  --fs-micro:0.7rem;

  --sp-1:0.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-6:3rem; --sp-8:4rem; --sp-12:6rem; --sp-16:8rem;

  --content-max:78rem;
  --text-max:42rem;
  --radius:3px;
  --header-h:80px;
  --focus-ring:3px solid var(--color-accent);
  --ease:cubic-bezier(0.65, 0, 0.35, 1);
  --dur:0.6s;
}

/* 3. Reset & Basis */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); color-scheme:light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
}
body {
  margin:0; font-family:var(--font-text); font-size:var(--fs-body);
  line-height:1.6; color:var(--color-ink); background:var(--color-concrete);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0; letter-spacing:-0.02em; text-wrap:balance; }
p { margin:0 0 var(--sp-3); }
ul,ol { margin:0; padding:0; list-style:none; }
button { font-family:inherit; cursor:pointer; }
a,button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:var(--focus-ring); outline-offset:3px; }

.skip-link {
  position:absolute; left:var(--sp-2); top:-100px; z-index:1000;
  background:var(--color-ink); color:var(--color-white);
  padding:var(--sp-2) var(--sp-3); transition:top 0.15s ease;
}
.skip-link:focus { top:var(--sp-2); }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 4. Layout-Helfer */
.container { max-width:var(--content-max); margin-inline:auto; padding-inline:var(--sp-4); }
@media (max-width:640px){ .container{ padding-inline:var(--sp-3); } }
section { padding-block:var(--sp-12); }
@media (max-width:640px){ section{ padding-block:var(--sp-8); } }
.text-center { text-align:center; }
.bg-ink { background:transparent; color:inherit; }
.eyebrow-accent, .eyebrow {
  color:var(--color-accent); font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; font-size:var(--fs-micro);
  font-family:var(--font-text); display:block;
}
/* Akzent-Eyebrows auf dunklen Flächen aufhellen (WCAG-AA-Kontrast) */
.hero .eyebrow, .page-hero .eyebrow { color:var(--color-accent-light); }
.section-head { max-width:var(--text-max); margin-bottom:var(--sp-6); }
.section-head h2 { font-size:var(--fs-h2); margin-top:var(--sp-2); }
.section-head p { margin-top:var(--sp-3); color:var(--color-grey-mid); font-size:var(--fs-lead); }
.chevron-divider {
  display:flex; align-items:center; gap:var(--sp-2);
  margin-block:var(--sp-8); color:var(--color-accent);
}
.chevron-divider::before, .chevron-divider::after { content:""; height:1px; flex:1; background:var(--color-grey-line); }
.chevron-divider svg { width:1.4rem; height:1.4rem; flex-shrink:0; fill:var(--color-accent); }

/* 5. Header / Nav — merged with hero; transparent, subtle backdrop */
.site-header {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); min-height:80px;
  padding:0.5rem var(--sp-4);
  color:var(--color-white);
}
/* Blur/Hintergrund als Pseudoelement, damit der Header KEIN Bezugsrahmen für
   das position:fixed-Mobilmenü wird (sonst füllt inset:0 nur den Header). */
.site-header::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(17,17,17,0.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.site-logo { display:inline-flex; align-items:center; text-decoration:none; }
.site-logo img { height:68px; width:auto; }
@media (max-width:640px){ .site-logo img { height:52px; } }
.nav-toggle {
  display:none; position:relative; z-index:110; background:none; color:inherit;
  border:1px solid rgba(255,255,255,0.4); border-radius:var(--radius);
  width:44px; height:44px; align-items:center; justify-content:center;
}
.main-nav { display:flex; align-items:center; gap:var(--sp-4); }
.main-nav ul { display:flex; gap:var(--sp-4); }
.main-nav ul a {
  text-decoration:none; font-size:var(--fs-small); font-weight:500;
  letter-spacing:0.03em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:2px solid transparent; transition:border-color 0.2s ease;
}
.main-nav ul a:hover, .main-nav ul a[aria-current="page"] { border-bottom-color:var(--color-accent); }
.main-nav .btn { color:inherit; }
@media (max-width:860px){
  .nav-toggle { display:inline-flex; }
  .main-nav {
    position:fixed; inset:0; background:var(--color-ink);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:var(--sp-4); padding:var(--sp-8) var(--sp-4);
    transform:translateY(-100%); visibility:hidden;
    transition:transform 0.3s ease, visibility 0.3s ease;
  }
  .main-nav.is-open { transform:translateY(0); visibility:visible; overscroll-behavior:contain; }
  .main-nav ul { flex-direction:column; gap:var(--sp-4); }
  .main-nav ul a { font-size:var(--fs-h3); }
  /* Burger wird im offenen Zustand zum X (aria-expanded schaltet das JS) */
  .nav-toggle[aria-expanded="true"] svg { display:none; }
  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[aria-expanded="true"]::after {
    content:""; position:absolute; top:50%; left:50%;
    width:20px; height:2px; background:currentColor;
  }
  .nav-toggle[aria-expanded="true"]::before { transform:translate(-50%,-50%) rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after  { transform:translate(-50%,-50%) rotate(-45deg); }
}

/* 6. Buttons */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px; padding:0.85rem 1.75rem;
  font-family:var(--font-text); font-weight:600; font-size:var(--fs-small);
  letter-spacing:0.02em; text-transform:uppercase; text-decoration:none;
  border:none; border-radius:var(--radius);
  background:transparent; transition:background 0.2s ease, color 0.2s ease;
}
.btn-primary { background:var(--color-accent); color:var(--color-white); }
.btn-primary:hover { background:var(--color-accent-dim); border-color:var(--color-accent-dim); }
.btn-ghost-light { color:var(--color-white); border:1px solid rgba(255,255,255,0.5); }
.btn-ghost-light:hover { background:rgba(255,255,255,0.12); }
.btn-ghost-dark { color:var(--color-ink); background:var(--color-concrete-dim); border:1px solid rgba(0,0,0,0.18); }
.btn-ghost-dark:hover { background:var(--color-ink); color:var(--color-white); border-color:var(--color-ink); }

/* 7. Hero (Startseite) */
.hero {
  position:relative; min-height:min(88vh, 760px);
  display:flex; align-items:center;
  background:var(--color-ink); color:var(--color-white); overflow:hidden;
  /* pull hero under the transparent header so header overlays the hero without a white gap */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--sp-12) + var(--header-h));
}
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
/* Hero slideshow */
.hero-slides { position:absolute; inset:0; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease; will-change:opacity; }
.hero-slide.is-active { opacity:1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }
.hero-media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,9,9,0.85) 0%, rgba(10,9,9,0.6) 45%, rgba(10,9,9,0.3) 100%);
}
.hero-inner { position:relative; z-index:1; padding-block:var(--sp-12); }
.hero .eyebrow { margin-bottom:var(--sp-3); }
.hero h1 { font-size:var(--fs-hero); max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,0.4); }
.hero .lead {
  font-family:var(--font-text); font-size:var(--fs-lead); max-width:46ch;
  margin:var(--sp-4) 0 var(--sp-6); color:rgba(255,255,255,0.9);
}
.hero-actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* 8. Kennzahlen */
.stats { background:transparent; color:var(--color-ink); padding-block:var(--sp-6); }
.stats .stat-value { color:var(--color-ink); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); text-align:center; }
.stat-value {
  font-family:var(--font-display); font-weight:700; font-size:clamp(1rem,0.6rem + 1.6vw,3.25rem);
  font-variant-numeric:tabular-nums; color:var(--color-ink);
}
.stat-label { font-size:var(--fs-micro); letter-spacing:0.1em; text-transform:uppercase; color:var(--color-grey-mid); margin-top:var(--sp-1); }
@media (max-width:640px){ .stats-grid{ grid-template-columns:1fr; gap:var(--sp-6); } }

/* 9. Reveal-Animation (progressive enhancement) */
.js-reveal { opacity:0; transform:translateY(24px); }
.js-reveal.is-visible { opacity:1; transform:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.no-js .js-reveal, .reveals-off .js-reveal { opacity:1; transform:none; }

/* 10. Leistungs-Index (Startseite) — typografische Liste */
.toc-list { width:100%; }
.toc-row { display:flex; align-items:center; gap:var(--sp-1); padding-block:var(--sp-2); border-bottom:1px solid var(--color-grey-line); }
.toc-list .toc-row:first-child { border-top:1px solid var(--color-grey-line); }
.toc-num { flex-shrink:0; width:2rem; font-size:var(--fs-micro); font-weight:600; letter-spacing:0.04em; color:var(--color-grey-mid); font-variant-numeric:tabular-nums; }
.toc-name { flex:1; min-width:0; font-size:var(--fs-small); transition:color 0.2s ease; }
.toc-name a { text-decoration:none; color:inherit; word-break:break-word; display:block; }
.toc-leader { display:none; }
.toc-detail { display:none; }
.toc-row:hover .toc-name, .toc-row:focus-within .toc-name { color:var(--color-accent); }

/* 11. Leistungsverzeichnis (Detailseite) — editoriale, gruppierte Liste, keine Bilder */
.lv-top { margin-bottom:var(--sp-3); }
/* Tabellen-Kopfzeile — spiegelt die Spalten der Zeilen, verankert die Dokument-Metapher */
.lv-colhead {
  display:grid; grid-template-columns:minmax(15rem,20rem) 1fr; column-gap:var(--sp-8);
  padding-bottom:var(--sp-2); border-bottom:2px solid var(--color-ink);
  font-size:var(--fs-micro); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--color-ink-soft); font-weight:600;
}
.lv-group-title {
  font-size:var(--fs-small); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-accent); font-weight:600;
  margin:var(--sp-6) 0 0; padding:0 0 var(--sp-2) var(--sp-3);
}
.lv-group:first-of-type .lv-group-title { margin-top:var(--sp-4); }
.lv-list { list-style:none; margin:0; padding:0; }
.lv-row {
  position:relative;
  display:grid; grid-template-columns:minmax(15rem,20rem) 1fr;
  column-gap:var(--sp-8); row-gap:var(--sp-2);
  align-items:start;
  padding:var(--sp-4) 0 var(--sp-4) var(--sp-3);
  border-top:1px solid var(--color-grey-line);
}
.lv-row::before {
  content:""; position:absolute; left:0; top:var(--sp-4); bottom:var(--sp-4); width:3px;
  background:var(--color-accent); transform:scaleY(0); transform-origin:top;
  transition:transform 0.35s var(--ease);
}
@media (hover:hover){
  .lv-row:hover::before { transform:scaleY(1); }
}
.lv-head h3 { font-size:var(--fs-h2); line-height:1.05; margin:0; }
.lv-figure {
  display:block; margin-top:var(--sp-2);
  font-size:var(--fs-small); color:#616161; font-variant-numeric:tabular-nums;
}
.lv-body p { margin:0; color:var(--color-ink-soft); font-size:var(--fs-lead); line-height:1.65; max-width:54ch; }
/* Abschluss-Block: Kontext-Satz über dem CTA statt frei schwebendem Button */
.lv-cta { margin-top:var(--sp-8); text-align:center; }
.lv-cta p {
  max-width:52ch; margin:0 auto var(--sp-4);
  font-size:var(--fs-lead); color:var(--color-ink-soft); line-height:1.6;
}
@media (max-width:720px){
  .lv-colhead { display:none; }
  .lv-group-title { padding-left:var(--sp-3); }
  .lv-row {
    grid-template-columns:1fr; column-gap:0; row-gap:var(--sp-3);
    padding:var(--sp-4) 0 var(--sp-4) var(--sp-3);
  }
  .lv-head h3 { font-size:var(--fs-h1); }
}

/* 12. Referenzen — Filter + Projektkarten */
.filter-bar { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-6); }
.filter-btn {
  min-height:44px; padding:0.55rem 1.1rem; font-family:var(--font-text); font-size:var(--fs-small);
  font-weight:500; letter-spacing:0.02em; color:var(--color-ink);
  background:var(--color-white); border:1px solid var(--color-grey-line);
  border-radius:100px; transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-btn:hover { border-color:var(--color-ink); }
.filter-btn[aria-pressed="true"] { background:var(--color-ink); color:var(--color-white); border-color:var(--color-ink); }
.filter-count { color:var(--color-grey-mid); font-size:var(--fs-small); margin-bottom:var(--sp-4); }

.project-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr)); gap:var(--sp-4); }
.project-card {
  display:flex; flex-direction:column; background:var(--color-white);
  border:1px solid var(--color-grey-line); border-radius:var(--radius); overflow:hidden;
}
.project-card.is-hidden { display:none; }
.project-media { position:relative; aspect-ratio:4/3; background:var(--color-concrete-dim); overflow:hidden; }
/* absolut positioniert → 4:3-Fläche wird IMMER erzwungen, auch bei Hochformat-Bildern */
.project-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-year {
  position:absolute; top:var(--sp-2); left:var(--sp-2);
  background:var(--color-ink); color:var(--color-white);
  font-size:var(--fs-micro); font-weight:600; letter-spacing:0.04em;
  padding:0.25rem 0.6rem; border-radius:var(--radius); font-variant-numeric:tabular-nums;
}
.project-body { padding:var(--sp-3) var(--sp-4) var(--sp-4); display:flex; flex-direction:column; flex:1; }
/* Titel auf 2 Zeilen fixieren (reserviert Höhe, egal ob 1 oder 2 Zeilen) */
.project-body h3 {
  font-size:var(--fs-h3); line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  min-height:calc(2 * 1.25em);
}
/* Beschreibung auf feste Zeilenzahl klammern UND reservieren → alle Karten gleich hoch */
.project-scope {
  color:var(--color-grey-mid); font-size:var(--fs-small); line-height:1.5; margin-top:var(--sp-2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  min-height:calc(2 * 1.5em);
}
.project-meta {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--color-grey-line);
}
/* Größenklasse statt konkretem Preis */
.project-class {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-micro);
  text-transform:uppercase; letter-spacing:0.08em; color:var(--color-ink);
}
.project-class::before {
  content:""; flex:none; width:0.5rem; height:0.5rem; border-radius:1px;
  background:var(--color-accent);
}
.project-place { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:0.06em; color:var(--color-grey-mid); }
/* Eine Tag-Reihe reservieren (Tags passen auf dem Desktop in eine Zeile),
   damit auch Karten ohne bzw. mit einem Gewerk-Tag gleich hoch bleiben */
.project-tags {
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:0.4rem;
  margin-top:var(--sp-3); min-height:1.4rem;
}
.project-tags span { font-size:var(--fs-micro); color:var(--color-grey-mid); background:var(--color-concrete); border:1px solid var(--color-grey-line); border-radius:100px; padding:0.15rem 0.6rem; }
.filter-empty { color:var(--color-grey-mid); padding-block:var(--sp-6); }

/* Reference slideshow (bg-ink, no boxes) */
.ref-slideshow { position:relative; }
.ref-slide { display:none; }
.ref-slide.is-active {
  display:grid; grid-template-columns:1fr;
  gap:var(--sp-4);
}
.ref-slide-media { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; }
.ref-slide-media img { width:100%; height:100%; object-fit:cover; }
.ref-highlight {
  position:absolute; z-index:1; top:var(--sp-2); left:var(--sp-2);
  padding:0.4rem 0.75rem; background:var(--color-ink); color:var(--color-white);
  font-size:var(--fs-micro); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
}
.ref-slide--lead .ref-slide-media { outline:3px solid var(--color-accent); outline-offset:-3px; }
.ref-slide--lead .ref-highlight { background:var(--color-accent); }
.ref-slide--featured .ref-slide-body h3 { font-size:clamp(1.45rem,1.1rem + 1vw,2.15rem); }
.ref-slide-body h3 { font-size:var(--fs-h2); color:var(--color-ink); margin-bottom:var(--sp-2); }
.ref-slide-body .ref-scope { color:var(--color-grey-mid); font-size:var(--fs-lead); margin:var(--sp-3) 0 var(--sp-4); }
.ref-slide-body .ref-meta {
  display:flex; justify-content:flex-start; align-items:baseline;
  gap:var(--sp-4); margin-bottom:var(--sp-4);
}
.ref-slide-body .ref-value { font-family:var(--font-display); font-weight:700; font-size:1.8rem; color:var(--color-ink); font-variant-numeric:tabular-nums; }
.ref-slide-body .ref-place { font-size:var(--fs-small); text-transform:uppercase; letter-spacing:0.06em; color:var(--color-grey-mid); }
.ref-nav { display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-6); }
.ref-nav-btns { display:flex; gap:var(--sp-2); }
.ref-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:none; border:1px solid var(--color-grey-line); color:var(--color-ink);
  cursor:pointer; transition:background 0.2s ease, border-color 0.2s ease;
  font-size:1.2rem;
}
.ref-btn:hover { background:var(--color-concrete-dim); border-color:var(--color-ink); }
.ref-dots { display:flex; gap:0.5rem; align-items:center; }
.ref-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(0,0,0,0.18); border:none; cursor:pointer;
  padding:0; transition:background 0.2s ease, transform 0.2s ease;
}
.ref-dot.is-active { background:var(--color-ink); transform:scale(1.35); }

/* Split-Layout (Leistungen + Referenzen nebeneinander) */
.split-section { padding-block:var(--sp-12); }
@media (max-width:640px){ .split-section { padding-block:var(--sp-8); } }
.split-layout {
  display:grid; grid-template-columns:7fr auto 13fr;
  align-items:stretch; gap:0;
  max-width:var(--content-max); margin-inline:auto; padding-inline:var(--sp-4);
}
@media (max-width:640px){ .split-layout{ padding-inline:var(--sp-3); } }
.split-col { padding-inline:var(--sp-6); display:flex; flex-direction:column; min-width:0; overflow-wrap:break-word; word-break:break-word; }
.split-col:first-child { padding-left:0; }
.split-col:last-child { padding-right:0; }
.split-col-footer { margin-top:auto; padding-top:var(--sp-8); }
.split-divider {
  width:1px; align-self:stretch;
  background:var(--color-grey-line);
  margin-block:var(--sp-2);
  margin-inline:var(--sp-8);
  position:relative;
}
.split-divider::after {
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%;
  background:var(--color-accent);
}
@media (max-width:900px){
  .split-layout { grid-template-columns:1fr; }
  .split-col { padding-inline:0; }
  .split-divider { width:auto; height:1px; align-self:auto; margin-block:var(--sp-8); }
}


.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; }
.feature-row + .feature-row { margin-top:var(--sp-12); }
.feature-row:nth-child(even) .feature-media { order:2; }
.feature-media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.feature-text h2 { font-size:var(--fs-h2); max-width:18ch; margin-bottom:var(--sp-3); }
.feature-text p { color:var(--color-grey-mid); }
@media (max-width:800px){
  .feature-row { grid-template-columns:1fr; gap:var(--sp-4); }
  .feature-row:nth-child(even) .feature-media { order:0; }
}

/* Über uns: Geschäftsführung und Unternehmenswerte */
.about-card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.about-card { padding:var(--sp-4); background:var(--color-white); border:1px solid var(--color-grey-line); }
.about-card h3 { font-size:var(--fs-h2); margin-bottom:var(--sp-1); }
.about-card-role { color:var(--color-accent); font-size:var(--fs-small); font-weight:600; }
.about-card p:last-child { color:var(--color-grey-mid); margin-bottom:0; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.value-card { padding-top:var(--sp-3); border-top:2px solid var(--color-ink); }
.value-card h3 { margin:0 0 var(--sp-2); font-size:var(--fs-h3); }
.value-card p { color:var(--color-grey-mid); font-size:var(--fs-small); margin:0; }
@media (max-width:900px){ .values-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .about-card-grid,.values-grid { grid-template-columns:1fr; } }

/* 14. Galerie */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px,100%),1fr)); gap:var(--sp-3); }
.gallery-grid figure { margin:0; }
.gallery-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.gallery-grid figcaption { font-size:var(--fs-micro); color:var(--color-grey-mid); padding-top:var(--sp-1); }

/* 16. Kontakt & Karte */
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:var(--sp-8); align-items:start; }
@media (max-width:760px){ .contact-grid { grid-template-columns:1fr; gap:var(--sp-6); } }
.contact-block { margin-bottom:var(--sp-6); }
.contact-block h2 { font-size:var(--fs-h3); margin-bottom:var(--sp-2); }
.contact-block address { font-style:normal; line-height:1.9; }
.contact-block a { color:var(--color-accent); }
.hours-list { display:grid; grid-template-columns:auto 1fr; gap:0.4rem var(--sp-4); font-size:var(--fs-small); }
.hours-list dt { color:var(--color-grey-mid); }
.hours-list dd { margin:0; font-variant-numeric:tabular-nums; }

.map-frame { aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--color-concrete-dim); margin-top:var(--sp-3); }
.map-frame:empty { display:none; }
.consent-card {
  background:var(--color-ink); color:var(--color-white);
  padding:var(--sp-6) var(--sp-4); border-radius:var(--radius); text-align:left;
}
.consent-card p { color:rgba(255,255,255,0.85); }
.consent-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }

/* Formular */
.form-field { margin-bottom:var(--sp-4); }
.form-field label { display:block; font-size:var(--fs-small); font-weight:600; margin-bottom:var(--sp-1); }
.form-field input, .form-field textarea {
  width:100%; min-height:44px; padding:0.75rem 1rem;
  font-family:var(--font-text); font-size:var(--fs-body);
  border:1px solid var(--color-grey-line); border-radius:var(--radius);
  background:var(--color-white); color:var(--color-ink);
}
.form-field textarea { min-height:160px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus { outline:var(--focus-ring); outline-offset:1px; }
.form-hint { font-size:var(--fs-micro); color:var(--color-grey-mid); margin-top:var(--sp-1); }
.form-status { padding:var(--sp-2) var(--sp-3); border-radius:var(--radius); margin-bottom:var(--sp-3); font-size:var(--fs-small); }
.form-status:empty { display:none; }
.form-status.success { background:#e4efe4; color:#234d23; }
.form-status.error { background:#f6e4e2; color:var(--color-accent-dim); }

/* 17. Footer */
.site-footer { background:var(--color-ink); color:rgba(255,255,255,0.85); padding-block:var(--sp-8) var(--sp-6); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-6); }
.footer-logo img { height:64px; width:auto; margin-bottom:var(--sp-3); }
.footer-grid h2 { font-size:var(--fs-h3); color:var(--color-white); margin-bottom:var(--sp-3); }
.footer-grid address { font-style:normal; line-height:1.8; }
.footer-nav a, .footer-grid a { text-decoration:none; color:rgba(255,255,255,0.75); }
.footer-nav li { margin-bottom:var(--sp-1); }
.footer-nav a:hover, .footer-grid a:hover { color:var(--color-white); }
/* per JS eingefuegter "Cookie-Einstellungen"-Button — sieht aus wie ein Footer-Link */
.footer-linkbtn {
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-align:left;
  color:rgba(255,255,255,0.75);
}
.footer-linkbtn:hover { color:var(--color-white); }
.footer-linkbtn:focus-visible { outline:2px solid var(--color-accent-light); outline-offset:2px; }
.footer-bottom {
  margin-top:var(--sp-8); padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,0.15);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2);
  font-size:var(--fs-micro); color:rgba(255,255,255,0.55);
}
@media (max-width:760px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid { grid-template-columns:1fr; } }

/* 17b. Datenschutz-/Consent-Banner (nicht-blockierende Leiste unten) */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--color-ink); color:var(--color-white);
  border-top:3px solid var(--color-accent);
  box-shadow:0 -12px 40px rgba(0,0,0,0.28);
}
.cookie-banner[hidden] { display:none; }
.cookie-banner-inner {
  max-width:var(--content-max); margin:0 auto; padding:var(--sp-4);
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6);
}
.cookie-banner-text { flex:1 1 30rem; }
.cookie-banner-text h2 { font-size:var(--fs-h3); color:var(--color-white); margin:0 0 var(--sp-1); }
.cookie-banner-text p { margin:0; font-size:var(--fs-small); line-height:1.6; color:rgba(255,255,255,0.85); max-width:74ch; }
.cookie-banner-text a { color:var(--color-accent-light); text-decoration:underline; }
.cookie-banner-text a:hover { color:var(--color-white); }
.cookie-banner-actions { display:flex; gap:var(--sp-2); flex:0 0 auto; }
/* Gleichwertige Buttons — kein Dark Pattern: identische Groesse/Gewichtung */
.cookie-btn { min-width:9.5rem; justify-content:center; cursor:pointer; }
.cookie-btn-accept { background:var(--color-accent); color:var(--color-white); }
.cookie-btn-accept:hover { background:var(--color-accent-dim); }
.cookie-btn-decline { background:var(--color-white); color:var(--color-ink); }
.cookie-btn-decline:hover { background:var(--color-concrete-dim); }
@media (max-width:640px){
  .cookie-banner-actions { width:100%; }
  .cookie-btn { flex:1 1 0; min-width:0; }
}

/* 18. Unterseiten-Hero / Prose */
.page-hero { background:var(--color-ink); color:var(--color-white); padding-block:var(--sp-12) var(--sp-8); }
.page-hero h1 { font-size:var(--fs-h1); max-width:24ch; margin-top:var(--sp-3); }
.page-hero .lead { font-family:var(--font-text); font-size:var(--fs-lead); color:rgba(255,255,255,0.8); max-width:60ch; margin-top:var(--sp-3); }
/* Page-hero slideshow */
.page-hero { position:relative; overflow:hidden; }
.page-hero-slides { position:absolute; inset:0; }
.page-hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease; will-change:opacity; }
.page-hero-slide.is-active { opacity:1; }
.page-hero-slide img { width:100%; height:100%; object-fit:cover; }
.page-hero-slides::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,9,9,0.85) 0%, rgba(10,9,9,0.55) 50%, rgba(10,9,9,0.35) 100%);
}
.page-hero .container { position:relative; z-index:1; }
.prose { max-width:var(--text-max); }
.prose h2 { font-size:var(--fs-h2); margin-top:var(--sp-8); margin-bottom:var(--sp-3); }
.prose h3 { font-size:var(--fs-h3); margin-top:var(--sp-6); margin-bottom:var(--sp-2); }
.prose p, .prose li { color:var(--color-ink-soft); }
.prose ul { list-style:disc; padding-left:1.4rem; margin-bottom:var(--sp-3); }
.prose li { margin-bottom:var(--sp-1); }
.prose a { color:var(--color-accent); }

/* 19. Referenz-Detailseite */
.breadcrumb { padding-block:var(--sp-3); font-size:var(--fs-micro); color:rgba(255,255,255,0.6); }
.breadcrumb a { color:rgba(255,255,255,0.85); text-decoration:none; }
.breadcrumb a:hover { color:var(--color-white); }
.breadcrumb-sep { margin-inline:0.5em; opacity:0.5; }

.detail-hero { position:relative; min-height:min(56vh, 480px); display:flex; align-items:flex-end; background:var(--color-ink); color:var(--color-white); overflow:hidden; }
.detail-hero-media { position:absolute; inset:0; }
.detail-hero-media img { width:100%; height:100%; object-fit:cover; }
.detail-hero-media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,9,0.15) 0%, rgba(10,9,9,0.55) 60%, rgba(10,9,9,0.85) 100%);
}
.detail-hero-inner { position:relative; z-index:1; padding-block:var(--sp-8) var(--sp-6); }
.detail-hero h1 { font-size:var(--fs-h1); max-width:26ch; margin-top:var(--sp-2); }
.detail-hero .lead { font-family:var(--font-text); font-size:var(--fs-lead); color:rgba(255,255,255,0.85); margin-top:var(--sp-2); }

.steckbrief-bar { background:var(--color-white); border-bottom:1px solid var(--color-grey-line); padding-block:var(--sp-4); }
.steckbrief-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.steckbrief-key { display:block; font-size:var(--fs-micro); letter-spacing:0.08em; text-transform:uppercase; color:var(--color-grey-mid); margin-bottom:0.3rem; }
.steckbrief-value { font-family:var(--font-display); font-weight:700; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.steckbrief-value.is-accent { color:var(--color-accent); }
@media (max-width:900px){ .steckbrief-grid { grid-template-columns:repeat(2,1fr); gap:var(--sp-3); } }

.detail-body { display:grid; grid-template-columns:3fr 2fr; gap:var(--sp-8); align-items:start; }
.detail-body h2 { font-size:var(--fs-h2); margin-bottom:var(--sp-3); }
.detail-body p { color:var(--color-grey-mid); }
.detail-sidebar { background:var(--color-concrete); border:1px solid var(--color-grey-line); border-radius:var(--radius); padding:var(--sp-4); }
.detail-sidebar h3 { font-size:var(--fs-h3); margin-bottom:var(--sp-3); }
.detail-sidebar ul { list-style:none; margin-bottom:var(--sp-4); }
.detail-sidebar li { position:relative; padding-left:1.4rem; margin-bottom:var(--sp-2); color:var(--color-ink-soft); }
.detail-sidebar li::before { content:""; position:absolute; left:0; top:0.55em; width:8px; height:8px; background:var(--color-accent); border-radius:50%; }
.detail-sidebar .btn { width:100%; justify-content:center; }
@media (max-width:800px){ .detail-body { grid-template-columns:1fr; } }

.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr)); gap:var(--sp-4); }

/* Vertiefende Inhalte auf Referenz-Detailseiten */
.project-insights { background:var(--color-white); }
.insights-intro { max-width:52rem; margin-bottom:var(--sp-6); }
.insights-intro h2 { font-size:var(--fs-h2); margin:var(--sp-2) 0 var(--sp-3); }
.insights-intro p { color:var(--color-ink-soft); }
.insight-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-8); }
.insight-figure { position:relative; margin:0; overflow:hidden; background:var(--color-concrete-dim); }
.insight-figure img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.insight-figure figcaption { position:absolute; right:0; bottom:0; max-width:calc(100% - 1rem); padding:0.22rem 0.45rem; background:rgba(10,9,9,0.76); color:rgba(255,255,255,0.82); font-size:0.625rem; line-height:1.3; letter-spacing:0.02em; }
.insights-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(280px,2fr); gap:var(--sp-8); align-items:start; }
.process-list { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); counter-reset:phase; }
.process-card { border-top:2px solid var(--color-accent); padding-top:var(--sp-3); counter-increment:phase; }
.process-card::before { content:"0" counter(phase); display:block; color:var(--color-accent); font-family:var(--font-display); font-weight:700; font-size:var(--fs-small); margin-bottom:var(--sp-2); }
.process-card h3 { font-size:var(--fs-h3); margin-bottom:var(--sp-2); }
.process-card p { color:var(--color-grey-mid); font-size:var(--fs-small); margin:0; }
.scope-chart { background:var(--color-concrete); border:1px solid var(--color-grey-line); padding:var(--sp-4); }
.scope-chart h3 { font-size:var(--fs-h3); margin-bottom:var(--sp-2); }
.scope-chart > p { color:var(--color-grey-mid); font-size:var(--fs-small); margin-bottom:var(--sp-4); }
.scope-bar { margin-top:var(--sp-3); }
.scope-bar-head { display:grid; gap:0.15rem; font-size:var(--fs-small); margin-bottom:0.5rem; }
.scope-bar-head span:last-child { color:var(--color-grey-mid); line-height:1.45; }
.scope-track { height:8px; background:var(--color-concrete-dim); overflow:hidden; }
.scope-fill { display:block; height:100%; width:var(--bar-width); background:var(--color-accent); transform-origin:left; }
.insight-note { margin-top:var(--sp-6); padding-left:var(--sp-3); border-left:2px solid var(--color-accent); max-width:52rem; color:var(--color-ink-soft); }
@media (max-width:900px){ .insights-grid { grid-template-columns:1fr; } }
@media (max-width:680px){ .process-list, .insight-gallery { grid-template-columns:1fr; } }

/* Partnerdarstellung auf der Startseite */
.partner-panel { display:grid; grid-template-columns:minmax(0,3fr) minmax(260px,2fr); align-items:center; gap:var(--sp-8); }
.partner-copy h2 { font-size:var(--fs-h2); margin:var(--sp-2) 0 var(--sp-3); }
.partner-copy p { color:var(--color-ink-soft); max-width:58ch; }
.partner-logo-card { min-height:260px; display:grid; place-items:center; padding:var(--sp-6); background:var(--color-white); border:1px solid var(--color-grey-line); }
.partner-logo-card img { width:min(100%, 390px); max-height:190px; object-fit:contain; }
@media (max-width:760px){ .partner-panel { grid-template-columns:1fr; gap:var(--sp-4); } .partner-logo-card { min-height:210px; } }

/* ============================================================
   20. Strukturelle Trennlinien (horizontal + vertikal)
   ============================================================ */

/* Horizontal: zwischen allen Sektionen — kurze zentrierte Linie statt volle Breite */
main > section + section { position:relative; }
main > section + section::before {
  content:''; display:block;
  width:70%; height:1px;
  background:var(--color-grey-line);
  margin:0 auto var(--sp-8);
}
main > section.hero + section::before,
main > section.page-hero + section::before { display:none; }

/* Stats: kurze zentrierte Linien oben/unten */
.stats { position:relative; }
.stats::before, .stats::after {
  content:''; display:block;
  width:70%; height:1px;
  background:var(--color-grey-line);
  margin:0 auto;
}
.stats::before { margin-bottom:var(--sp-8); }
.stats::after  { display:none; }
.stats-grid > div { padding-inline:var(--sp-6); position:relative; }
.stats-grid > div:first-child { padding-left:0; }
.stats-grid > div:last-child { padding-right:0; }
/* Vertical divider: 50% height, vertically centred — not full-edge */
.stats-grid > div:not(:last-child)::after {
  content:''; position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:28%;
  background:var(--color-grey-line);
}
@media (max-width:640px){
  .stats-grid > div { padding-inline:0; padding-block:var(--sp-3); }
  .stats-grid > div:not(:last-child)::after { display:none; }
  .stats-grid > div:not(:last-child) { border-bottom:1px solid var(--color-grey-line); }
}

/* Footer: vertikale Trennlinien zwischen Spalten */
.footer-grid > div + div { border-left:1px solid rgba(255,255,255,0.1); padding-left:var(--sp-6); }
@media (max-width:760px){ .footer-grid > div + div { border-left:none; border-top:1px solid rgba(255,255,255,0.1); padding-left:0; padding-top:var(--sp-4); } }

/* Über-uns: kurze zentrierte Trennlinie zwischen Feature-Zeilen */
.feature-row + .feature-row { position:relative; padding-top:var(--sp-12); margin-top:0; }
.feature-row + .feature-row::before {
  content:''; display:block;
  width:70%; height:1px;
  background:var(--color-grey-line);
  margin:0 auto var(--sp-8);
}

/* Referenzen: kurze Linie unter Filter-Bar */
.filter-bar { position:relative; padding-bottom:var(--sp-4); }
.filter-bar::after {
  content:''; display:block;
  width:70%; height:1px;
  background:var(--color-grey-line);
  margin:var(--sp-4) auto 0;
}

/* Kontakt: kurze Trennlinie zwischen Kontaktblöcken */
.contact-block { position:relative; padding-bottom:var(--sp-4); margin-bottom:var(--sp-4); }
.contact-block:not(:last-child)::after {
  content:''; display:block;
  width:70%; height:1px;
  background:var(--color-grey-line);
  margin:var(--sp-4) 0 0;
}

/* Referenz-Detailseite: kurze Linie über Steckbrief */
.steckbrief-bar { position:relative; }
.steckbrief-bar::before {
  content:''; display:block;
  width:70%; height:1px;
  background:var(--color-grey-line);
  margin:0 auto var(--sp-4);
}

/* Contact grid: vertikale Trennlinie zwischen Info und Formular */
@media (min-width:760px){
  .contact-grid > div + div { position:relative; padding-left:var(--sp-8); }
  .contact-grid > div + div::before {
    content:''; position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:1px; height:28%;
    background:var(--color-grey-line);
  }
}