/* ===================================================================
   Schiller Bau – Design System  ·  Prototyp B „Architekt-Premium"
   Statisch · DSGVO-konform · responsiv · ohne externe Abhängigkeiten
   =================================================================== */

/* === Selbst gehostete Schriften (DSGVO-konform, lokal, kein CDN) ===
   Inter (Text/UI) · Schibsted Grotesk (Display/Headlines) · woff2, font-display: swap */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/schibsted-500.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/schibsted-600.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/schibsted-700.woff2') format('woff2'); }

:root {
  --ink: #1A1A1A;
  --ink-soft: #3A3A3A;
  --paper: #FFFFFF;
  --sun: #F5B742;
  --sun-bright: #FFC93C;
  --sun-soft: #FFE9A8;
  --sun-pale: #FFF6DC;
  --sand: #F0E5C4;
  --sand-soft: #FFF6DC;
  --line: #E8DEC0;
  --muted: #6E6A63;
  --accent: #F5B742;
  --accent-text: #9A6B00; /* dunkleres Bernstein für Text auf Weiß (≈4,6:1, WCAG AA) */
  /* Selbst gehostete Schriften mit System-Fallback */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --display: 'Schibsted Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw: 1320px;
  /* Eckenradien – einheitlich & dezent abgerundet */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  /* Spacing-Skala (4px-Basis) */
  --space-2xs: 0.5rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2.5rem;
  --space-lg: clamp(3rem, 6vw, 5rem);
  --space-xl: clamp(4rem, 9vw, 8rem);
  /* Zeilenhöhen */
  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  /* Bewegung – eine Sprache, an einer Stelle steuerbar */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.85s;
  /* Getönte, mehrschichtige Schatten (warmer Ton bindet an die Palette) */
  --shadow-sm: 0 1px 2px rgba(40,33,20,0.06), 0 2px 6px rgba(40,33,20,0.05);
  --shadow-md: 0 4px 10px rgba(40,33,20,0.06), 0 14px 34px rgba(40,33,20,0.10);
  --shadow-lg: 0 8px 18px rgba(40,33,20,0.08), 0 24px 50px rgba(40,33,20,0.13);
  --shadow-sun: 0 12px 26px rgba(245,183,66,0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Skip-Link (Accessibility) */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 200; font-size: 0.85rem;
  transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 3.5vw, 2.5rem); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); }
h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em; }
p { color: var(--ink-soft); }

/* Mono labels */
.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.label-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
  display: block;
}

/* Buttons */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 1.6rem;
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out), box-shadow 0.25s ease;
  font-family: var(--sans);
}
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(-130%); transition: transform 0.6s ease; z-index: 0;
}
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--sun); color: var(--ink); border: 1px solid var(--sun); }
.btn-primary:hover { background: var(--sun-bright); border-color: var(--sun-bright); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(245,183,66,0.38); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26,26,26,0.18); }
.btn-link {
  color: var(--ink); border-bottom: 1px solid var(--ink);
  padding-bottom: 0.25rem; font-weight: 500; font-size: 0.9rem;
  display: inline-block; transition: color 0.15s, border-color 0.15s;
}
.btn-link:hover { color: var(--accent); border-color: var(--accent); }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* Header */
header.site {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}
header.site.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* nur vertikales Padding – horizontales kommt von .container, sonst kleben Logo/Burger am Rand */
  padding-block: 0.4rem;
  gap: 1.5rem;
}
.logo { display: flex; align-items: center; }
.logo img { height: 80px; width: auto; display: block; }
@media (max-width: 900px) { .logo img { height: 64px; } }
@media (max-width: 540px) { .logo img { height: 52px; } }
nav.main ul { display: flex; gap: 2.2rem; list-style: none; font-size: 0.85rem; justify-content: center; }
nav.main a { color: var(--ink-soft); position: relative; padding: 0.3rem 0; transition: color 0.2s; }
nav.main a:hover, nav.main a.active { color: var(--ink); }
nav.main a::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 1.5px; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease-out); }
nav.main a:hover::after { transform: scaleX(1); }
nav.main a.active::after { transform: scaleX(1); background: var(--ink); }
.nav-cta { display: flex; gap: 0.75rem; justify-content: flex-end; align-items: center; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; line-height: 1; color: var(--ink); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem clamp(1.5rem, 6vw, 4rem);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-inout);
  visibility: hidden;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }
.mobile-nav ul { list-style: none; }
.mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-nav a {
  display: block; padding: 1.1rem 0;
  font-family: var(--display); font-size: clamp(1.5rem, 6vw, 2.2rem);
  color: var(--paper);
}
.mobile-nav a:hover { color: var(--sun); }
.mobile-nav .close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none; color: var(--paper);
  font-size: 2rem; cursor: pointer; line-height: 1;
}
.mobile-nav .m-contact { margin-top: 2rem; font-family: var(--mono); font-size: 0.8rem; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; }
@media (max-width: 900px) {
  nav.main { display: none; }
  .menu-toggle { display: block; }
  .nav-cta .btn-ghost { display: none; }
  .nav { grid-template-columns: 1fr auto; }
}

/* ===== Hero (Startseite) ===== */
.hero {
  padding: clamp(4rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--sun-pale) 0%, var(--paper) 60%);
  position: relative; overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }

/* ===== Animierte Sonne (Hero, SVG) ===== */
.sun-stage { position: absolute; top: -160px; right: -120px; width: 560px; height: 560px; z-index: 0; pointer-events: none; }
@media (max-width: 900px) { .sun-stage { width: 440px; height: 440px; top: -150px; right: -150px; } }
@media (max-width: 540px) { .sun-stage { width: 360px; height: 360px; top: -130px; right: -140px; opacity: 0.9; } }
.sun-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.sun-rays-g, .sun-disc, .sun-glow-c { transform-box: fill-box; transform-origin: center; }
.sun-rays-g { animation: sunSpin 90s linear infinite; }
.sun-rays-g line { stroke: #F5B742; stroke-width: 2.6; stroke-linecap: round; opacity: 0.55; }
.sun-disc { fill: #F5B742; animation: sunPulse 7s ease-in-out infinite; }
.sun-glow-c { fill: #F5B742; opacity: 0.16; animation: sunGlow 7s ease-in-out infinite; }
@keyframes sunSpin { to { transform: rotate(360deg); } }
@keyframes sunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sunGlow { 0%, 100% { opacity: 0.12; transform: scale(1); } 50% { opacity: 0.24; transform: scale(1.08); } }
.hero h1 { margin: 0.5rem 0 1.5rem; max-width: 16ch; }
.hero-meta {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem; align-items: end;
  padding-top: 2rem; border-top: 1px solid var(--line); margin-top: 3rem;
}
@media (max-width: 900px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta .hero-lede { grid-column: 1 / -1; }
}
.hero-lede { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink); max-width: 50ch; }
/* Nur die Zahl, nicht das Mono-Label darunter (sonst erbt .label die Display-Größe) */
.hero-stat > span:first-child { font-family: var(--display); font-size: clamp(2rem, 3.5vw, 3rem); display: block; line-height: 1; margin-bottom: 0.4rem; }
.hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-image {
  aspect-ratio: 21/9; margin-top: 3rem; position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)),
    repeating-linear-gradient(90deg, #c8c2b6, #c8c2b6 18px, #b8b2a4 18px, #b8b2a4 36px);
}
.hero-image .ph-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.95); font-family: var(--mono); font-size: 0.85rem;
  letter-spacing: 0.02em; text-align: center; padding: 1rem;
}
.hero-image-meta {
  position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
  display: flex; justify-content: space-between; align-items: end; color: white;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 2;
}

/* ===== Page-Hero (Unterseiten) ===== */
.page-hero {
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--sun-pale) 0%, var(--paper) 65%);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; top: -180px; right: -160px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--sun) 0%, transparent 70%);
  opacity: 0.35; border-radius: 50%;
}
.page-hero > * { position: relative; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); margin: 0.8rem 0 1.2rem; max-width: 18ch; }
.page-hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink); max-width: 60ch; }
.breadcrumb { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: 0.5; }

/* Sections */
section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-head { display: block; margin-bottom: 3rem; }
.section-head .label { display: block; margin-bottom: 1rem; }
.section-head p { margin-top: 1.25rem; max-width: 60ch; }

/* Prose */
.prose p { margin-bottom: 1.25rem; max-width: 68ch; font-size: 1.02rem; }
.prose h2 { margin: 2.5rem 0 1.25rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.prose h3 { margin: 2rem 0 0.9rem; }
.prose ul, .prose ol { margin: 0 0 1.5rem 1.2rem; max-width: 66ch; }
.prose li { margin-bottom: 0.5rem; color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose a:not(.btn):not(.btn-link) { color: var(--ink); border-bottom: 1px solid var(--sun); }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--ink); max-width: 60ch; line-height: 1.5; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

/* Placeholder image block (reusable) */
.ph {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.22)),
    repeating-linear-gradient(45deg, #c8c2b6, #c8c2b6 14px, #b8b2a4 14px, #b8b2a4 28px);
}
.ph.dark {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4)),
    repeating-linear-gradient(135deg, #2a2a2a, #2a2a2a 14px, #353535 14px, #353535 28px);
}
.ph .ph-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9); font-family: var(--mono); font-size: 0.78rem;
  text-align: center; padding: 1rem; line-height: 1.4;
}
.ph.dark .ph-label { color: rgba(255,255,255,0.6); }
.ph .ph-label, .hero-image .ph-label { z-index: 2; }
/* Dezenter Lichtschimmer auf Platzhaltern */
.ph::before, .hero-image::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.12) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: shimmer 6.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
/* Echte Bilder in Platzhalter-Boxen */
.imgbox { position: relative; overflow: hidden; border-radius: var(--r-md); }
.has-img { background: none !important; }
.has-img::before { display: none !important; }
.hero-image > img, .feature-image > img, .gallery-card .img > img, .team-card .avatar > img, .imgbox > img, .imgbox > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0;
}
.ratio-21-9 { aspect-ratio: 21/9; }
.ratio-16-9 { aspect-ratio: 16/9; }
.ratio-4-3  { aspect-ratio: 4/3; }
.ratio-5-4  { aspect-ratio: 5/4; }
.ratio-4-5  { aspect-ratio: 4/5; }
.ratio-1-1  { aspect-ratio: 1/1; }

/* Services grid – abgerundete Karten */
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.service-item {
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 2.4vw, 2.4rem) clamp(1.5rem, 2vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.25s ease, background 0.25s ease;
}
.service-item:hover { transform: translateY(-5px); background: var(--sun-pale); border-color: var(--sun); box-shadow: 0 18px 40px rgba(26,26,26,0.09); }
.service-item:hover h3 { color: var(--ink); }
.service-item:hover .more { color: var(--accent); border-color: var(--accent); }
.service-num { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.06em; margin-bottom: 1.25rem; display: block; }
.service-item h3 { margin-bottom: 0.85rem; max-width: 18ch; }
.service-item p { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: 1.5rem; flex: 1 1 auto; }
.service-item .more {
  align-self: flex-start; margin-top: auto;
  font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 0.2rem; transition: color 0.15s, border-color 0.15s;
}
.service-item .more:hover { color: var(--accent); border-color: var(--accent); }
/* Startseite: 4 Disziplinen als ausgewogenes 2×2-Raster */
#leistungen .services { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { #leistungen .services { grid-template-columns: 1fr; } }

/* Story (dark) */
.story-section { background: var(--ink); color: var(--paper); }
.story-section h2 { color: var(--paper); }
.story-section p { color: rgba(255,255,255,0.7); }
.story-section .label { color: rgba(255,255,255,0.5); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }
.story-content h2 { margin: 0.6rem 0 1.5rem; }
.story-content p { font-size: 1.05rem; max-width: 50ch; margin-bottom: 1.5rem; }
.timeline { list-style: none; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.15); }
.timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.timeline strong { font-family: var(--display); font-size: 1.4rem; color: var(--accent); }
.timeline span { color: rgba(255,255,255,0.7); font-size: 0.95rem; }

/* Feature project */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
.feature-image { aspect-ratio: 5/4; }
.feature-image.imgbox { border-radius: 0; }
.feature-content { padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.feature-content h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0.5rem 0 1.5rem; }
.feature-content p { margin-bottom: 1.5rem; max-width: 45ch; }
.feature-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 1.5rem; }
.feature-stats div { padding: 1.25rem 1rem; border-right: 1px solid var(--line); }
.feature-stats div:last-child { border-right: none; }
.feature-stats div:first-child { padding-left: 0; }
.feature-stats strong { font-family: var(--display); font-size: 1.5rem; display: block; }
.feature-stats small { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* KPI strip / counters */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 760px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi { padding: 2.5rem 1.5rem; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: none; }
@media (max-width: 760px) { .kpi:nth-child(2n) { border-right: none; } }
.kpi .num { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; display: block; margin-bottom: 0.5rem; }
.kpi .cap { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

/* Trust strip */
.trust-strip { padding: 3rem 0; background: var(--sun); border-block: 4px solid var(--sun-bright); }
.trust-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.trust-grid span { font-family: var(--display); font-size: 1rem; color: var(--ink); white-space: nowrap; font-weight: 500; }

/* Partner-Logo-Strip */
.logo-strip { background: var(--paper); border-block: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.logo-strip .logo-label { display: block; text-align: center; margin-bottom: 2rem; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.logo-row a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.6rem 0.9rem; border-radius: var(--r-sm);
  transition: background 0.2s ease, transform 0.25s var(--ease-out);
}
.logo-row a:hover { background: var(--sun-pale); transform: translateY(-2px); }
.logo-row img { height: 46px; width: auto; filter: grayscale(1); opacity: 0.62; transition: filter 0.25s, opacity 0.25s; }
.logo-row a:hover img { filter: grayscale(0); opacity: 1; }
.logo-fallback { font-family: var(--display); font-size: 1rem; color: var(--muted); }
@media (max-width: 540px) { .logo-row img { height: 36px; } }

/* Quote */
.quote-section { padding: clamp(5rem, 10vw, 9rem) 0; }
.quote { max-width: 900px; margin: 0 auto; }
.quote .label { display: block; margin-bottom: 2rem; }
.quote blockquote { font-family: var(--display); font-size: clamp(1.6rem, 3.5vw, 3rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 2rem; }
.quote-author { display: flex; gap: 1rem; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); }
.quote-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--sand); flex: none; overflow: hidden; }
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Video (DSGVO – Klick zum Laden) */
.video-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; border: none; width: 100%; color: var(--paper); background: transparent; overflow: hidden; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-facade::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,26,26,0.35), rgba(26,26,26,0.72));
  transition: background 0.3s ease;
}
.video-facade:hover::after { background: linear-gradient(180deg, rgba(26,26,26,0.3), rgba(26,26,26,0.66)); }
.video-facade:hover .play { transform: scale(1.08); background: var(--sun-bright); box-shadow: 0 12px 30px rgba(245,183,66,0.45); }
.video-facade .play { width: 78px; height: 78px; border-radius: 50%; background: var(--sun); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.55rem; padding-left: 5px; margin-bottom: 1.1rem; transition: transform 0.25s ease, background 0.2s, box-shadow 0.25s; box-shadow: 0 8px 22px rgba(0,0,0,0.3); }
.video-facade .vtext { max-width: 46ch; }
.video-facade .vtext strong { display: block; font-family: var(--display); font-size: 1.3rem; margin-bottom: 0.4rem; }
.video-facade .vtext span { font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.video-facade .vinner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.quote-author-text strong { display: block; font-weight: 500; }
.quote-author-text span { font-size: 0.85rem; color: var(--muted); }

/* Testimonials grid */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.testi-card { border: 1px solid var(--line); padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; transition: border-color 0.25s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
.testi-card:hover { border-color: var(--sun); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,26,26,0.08); }
.testi-card blockquote { font-family: var(--display); font-size: 1.25rem; line-height: 1.35; }
.testi-card .who { display: flex; gap: 0.85rem; align-items: center; margin-top: auto; }

/* CTA */
.cta-section { background: var(--ink); color: var(--paper); padding: clamp(5rem, 10vw, 9rem) 0; }
.cta-section.sun { background: var(--sun); color: var(--ink); border-block: 4px solid var(--sun-bright); }
.cta-section h2 { color: var(--paper); }
.cta-section.sun h2 { color: var(--ink); }
.cta-section .label { color: rgba(255,255,255,0.5); }
.cta-section.sun .label { color: var(--ink-soft); }
.cta-section p { color: rgba(255,255,255,0.7); max-width: 50ch; }
.cta-section.sun p { color: var(--ink-soft); }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn-on-dark.btn-primary { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.btn-on-dark.btn-primary:hover { background: var(--sun-bright); border-color: var(--sun-bright); }
.btn-on-dark.btn-ghost { color: var(--paper); border-color: var(--paper); }
.btn-on-dark.btn-ghost:hover { background: var(--paper); color: var(--ink); }
.cta-section.sun .btn-on-dark.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta-section.sun .btn-on-dark.btn-primary:hover { background: var(--paper); color: var(--ink); }
.cta-section.sun .btn-on-dark.btn-ghost { color: var(--ink); border-color: var(--ink); }
.cta-section.sun .btn-on-dark.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Steps / process */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.step { padding: 2.25rem 1.5rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.step:last-child { border-right: none; }
@media (max-width: 760px) { .step { border-right: none; } }
.step .n { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.1em; display: block; margin-bottom: 1rem; }
.step h3 { margin-bottom: 0.6rem; }
.step p { font-size: 0.92rem; color: var(--muted); }

/* Bullet feature list */
.feature-list { list-style: none; display: grid; gap: 1rem; max-width: 60ch; }
.feature-list li { position: relative; padding-left: 1.9rem; line-height: 1.55; }
.feature-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.feature-list li strong { font-weight: 600; }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.team-card { border: 1px solid var(--line); overflow: hidden; transition: border-color 0.25s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
.team-card:hover { border-color: var(--sun); transform: translateY(-5px); box-shadow: 0 16px 36px rgba(26,26,26,0.10); }
.team-card .avatar { aspect-ratio: 4/5; transition: transform 0.5s ease; }
.team-card:hover .avatar { transform: scale(1.05); }
.team-card .body { padding: 1.25rem; }
.team-card h3 { margin-bottom: 0.3rem; }
.team-card .role { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.8rem; }
.team-card .contact { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-soft); }
.team-card .contact a:hover { color: var(--accent); }
.dept-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }

/* Filter chips (gallery, team) */
.chip {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.55rem 1rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  cursor: pointer; transition: all 0.15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.gallery-card { border: 1px solid var(--line); overflow: hidden; transition: border-color 0.25s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
.gallery-card:hover { border-color: var(--sun); transform: translateY(-5px); box-shadow: 0 18px 40px rgba(26,26,26,0.12); }
.gallery-card .img { aspect-ratio: 4/3; transition: transform 0.55s ease; }
.gallery-card:hover .img { transform: scale(1.06); }
.gallery-card .meta { padding: 1.1rem 1.25rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.gallery-card h3 { font-size: 1.05rem; }
.gallery-card .tag { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
.gallery-card[hidden] { display: none; }

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--line); max-width: 860px; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink);
}
.acc-head .icon { font-family: var(--mono); font-size: 1.4rem; color: var(--accent); transition: transform 0.25s; flex: none; }
.acc-item.open .acc-head .icon { transform: rotate(45deg); }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.acc-panel-inner { padding: 0 0 1.5rem; color: var(--ink-soft); max-width: 70ch; }

/* Forms */
.form { display: grid; gap: 1.25rem; max-width: 640px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  padding: 0.85rem 1rem; border: 1px solid var(--line); background: var(--paper); width: 100%;
  transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun-pale); }
.field textarea { min-height: 140px; resize: vertical; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.85rem; color: var(--ink-soft); }
.consent input { margin-top: 0.25rem; }
.form-note { font-size: 0.8rem; color: var(--muted); }
.form-success { padding: 1.25rem 1.5rem; background: var(--sun-pale); border: 1px solid var(--sun); font-size: 0.95rem; display: none; }
.form-success.show { display: block; }

/* Contact info blocks */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.info-block { padding: 2.25rem 0; border-bottom: 1px solid var(--line); }
.info-block h3 { margin-bottom: 1rem; }
.info-block p { font-size: 0.95rem; margin-bottom: 0.35rem; }
.info-block a:hover { color: var(--accent); }

/* DSGVO map placeholder (two-click consent) */
.map-consent { position: relative; aspect-ratio: 16/9; border: 1px solid var(--line); background: var(--sand-soft); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.map-consent .inner { max-width: 42ch; }
.map-consent p { font-size: 0.9rem; margin-bottom: 1.25rem; }
.map-frame { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--line); }

/* News list */
.news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background 0.15s; }
.news-row:hover { background: var(--sun-pale); }
.news-row .date { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.news-row h3 { font-size: 1.15rem; }
.news-row .cat { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
@media (max-width: 640px) { .news-row { grid-template-columns: 1fr; gap: 0.4rem; } }

/* Partner / badges grid */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; }
.badge { border: 1px solid var(--line); padding: 1.5rem; transition: border-color 0.25s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
.badge:hover { border-color: var(--sun); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(26,26,26,0.08); }
.badge h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.badge p { font-size: 0.85rem; color: var(--muted); }

/* Footer */
footer.site-footer { background: var(--paper); color: var(--ink); padding: 4rem 0 2rem; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid .brand .footer-logo { display: inline-block; line-height: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.footer-grid .brand .footer-logo:hover { opacity: 0.75; }
.footer-grid .brand .footer-logo img { width: 150px; height: auto; display: block; }
.footer-grid .brand p { font-size: 0.9rem; max-width: 32ch; margin-top: 1.25rem; }
footer.site-footer h4 { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 1.25rem; font-weight: 500; }
footer.site-footer ul { list-style: none; }
footer.site-footer li { margin-bottom: 0.5rem; }
footer.site-footer a { font-size: 0.92rem; color: var(--ink-soft); }
footer.site-footer a:hover { color: var(--accent); }
.footer-bottom { padding-top: 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

/* Cookie banner */
.cookie-banner {
  position: fixed; bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
  max-width: 460px; margin-left: auto;
  background: var(--ink); color: var(--paper);
  padding: 1.5rem; font-size: 0.85rem; z-index: 120;
  transform: translateY(150%); transition: transform 0.4s var(--ease-inout);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner h5 { font-family: var(--display); font-size: 1rem; margin-bottom: 0.5rem; font-weight: 500; }
.cookie-banner p { color: rgba(255,255,255,0.7); margin-bottom: 1rem; font-size: 0.8rem; line-height: 1.5; }
.cookie-banner a { border-bottom: 1px solid rgba(255,255,255,0.4); }
.cookie-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-actions .btn { padding: 0.65rem 1.1rem; font-size: 0.75rem; }

/* ===== Animations (dezent & edel) ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }
.reveal-delay-5 { transition-delay: 0.50s; }

/* Parallax target (subtle) */
.parallax { will-change: transform; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .parallax { transform: none !important; }
}

/* Utilities */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.text-center { text-align: center; }
.divider { height: 1px; background: var(--line); border: 0; }

/* ===== Einheitliche, dezente Rundungen (Polish) ===== */
.testi-card { border-radius: var(--r-md); }
.team-card { border-radius: var(--r-md); }
.gallery-card { border-radius: var(--r-md); }
.badge { border-radius: var(--r-sm); }
.chip { border-radius: var(--r-pill); }
.field input, .field select, .field textarea { border-radius: var(--r-sm); }
.field textarea { border-radius: var(--r-sm); }
.form-success { border-radius: var(--r-sm); }
.map-consent, .map-frame { border-radius: var(--r-lg); }
.cookie-banner { border-radius: var(--r-md); }
.cookie-actions .btn { border-radius: var(--r-pill); }
.quote-author img { border-radius: 50%; }
.steps { border-radius: var(--r-md); overflow: hidden; }
.info-grid { border-radius: var(--r-md); }

/* ===================================================================
   PREMIUM-SCHUB (Welle 2) – Veredelung von Design & Motion
   Designsprache unverändert; nur Tiefe, Material & edlere Bewegung.
   =================================================================== */

/* --- Akzent-Text mit AA-Kontrast (kleine Mono-Labels auf Weiß) --- */
.service-num, .step .n, .news-row .cat, .acc-head .icon { color: var(--accent-text); }
.btn-link:hover, .info-block a:hover, footer.site-footer a:hover,
.team-card .contact a:hover { color: var(--accent-text); }
.btn-link:hover { border-color: var(--accent-text); }
.service-item:hover .more, .service-item .more:hover { color: var(--accent-text); border-color: var(--accent-text); }

/* --- Getönte, konsistente Schatten-Skala --- */
.service-item:hover, .gallery-card:hover, .team-card:hover { box-shadow: var(--shadow-lg); }
.testi-card:hover, .badge:hover { box-shadow: var(--shadow-md); }
.btn-primary:hover { box-shadow: var(--shadow-sun); }

/* --- Zeilenhöhe dichter bei Display-nahem Text + ruhigere Umbrüche --- */
.hero-lede, .page-hero .lede, .lead { line-height: var(--leading-snug); }
h1, h2 { text-wrap: balance; }
.hero-lede, .page-hero .lede, .prose p { text-wrap: pretty; }
h1, .page-hero h1, .hero h1 { overflow-wrap: break-word; hyphens: auto; }

/* --- Material: feiner Grain/Noise auf großen Farbflächen --- */
.story-section, .cta-section, .hero { position: relative; }
.story-section > .container, .cta-section > .container { position: relative; z-index: 1; }
.story-section::before, .cta-section::before, .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: 0.05;
}
.cta-section.sun::before, .hero::after { opacity: 0.03; }

/* --- Bilder: dezenter Innen-Ring + Tonangleich --- */
.imgbox, .hero-image { box-shadow: inset 0 0 0 1px rgba(26,26,26,0.06); }
.imgbox > img, .imgbox > picture > img, .hero-image > img, .feature-image > img { filter: saturate(1.03) contrast(1.02); }

/* --- Edlere Referenz-Karten: Bild als Fläche + Caption-Reveal beim Hover --- */
.gallery-card:has(.meta) { position: relative; }
.gallery-card:has(.meta) .img::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 35%, rgba(26,26,26,0.82));
  opacity: 0; transition: opacity 0.45s var(--ease-out);
}
.gallery-card:has(.meta):hover .img::after { opacity: 1; }
.gallery-card:has(.meta) .meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.1rem 1.25rem; color: #fff;
  transform: translateY(10px); opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.gallery-card:has(.meta):hover .meta { transform: none; opacity: 1; }
.gallery-card:has(.meta) .meta h3 { color: #fff; }
.gallery-card:has(.meta) .meta .tag { color: rgba(255,255,255,0.72); }
@media (hover: none) {
  .gallery-card:has(.meta) .img::after { opacity: 1; }
  .gallery-card:has(.meta) .meta { opacity: 1; transform: none; }
}

/* --- Hero veredelt: weicher Lichtpunkt hinter der Sonne, feinere Strahlen --- */
.hero {
  background:
    radial-gradient(120% 90% at 85% -10%, var(--sun-soft) 0%, transparent 55%),
    linear-gradient(135deg, var(--sun-pale) 0%, var(--paper) 60%);
}
.sun-disc { fill: url(#sunGrad); }
.sun-rays-g line { stroke: #E8A93A; stroke-width: 1.7; opacity: 0.4; }
.sun-glow-c { opacity: 0.14; }

/* --- Motion: Bild-Reveal als „Curtain" (transform-basiert, zuverlässig) ---
   Eine paper-farbene Blende retrahiert nach oben, das Bild settled von scale(1.08)→1. */
.img-reveal { position: relative; }
.img-reveal::after {
  content: ""; position: absolute; inset: -1px; z-index: 3;
  background: var(--paper); transform-origin: top;
  transition: transform 1.05s var(--ease-out);
}
.img-reveal > img { transform: scale(1.08); transition: transform 1.25s var(--ease-out); }
.img-reveal.is-shown::after { transform: scaleY(0); }
.img-reveal.is-shown > img { transform: none; }

/* --- Motion: zeilenweises Headline-Reveal (Masked Line Stagger) --- */
.reveal-lines { opacity: 1 !important; transform: none !important; }
.reveal-lines .ln { display: block; overflow: hidden; padding-bottom: 0.03em; }
.reveal-lines .ln > span { display: block; transform: translateY(115%); transition: transform 0.9s var(--ease-out); }
.reveal-lines.is-visible .ln > span { transform: none; }

/* --- Motion: Counter-Settle + Spotlight auf Primär-CTA --- */
.count-done { animation: countSettle 0.24s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes countSettle { 0%{transform:scale(1);} 45%{transform:scale(1.045);} 100%{transform:scale(1);} }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.42), transparent 60%);
  opacity: 0; transition: opacity var(--dur-base) ease;
}
.btn-primary:hover::before { opacity: 1; }

/* --- Sonne driftet beim Scrollen sanft mit --- */
.sun-stage { transform: translateY(var(--sun-y, 0)); opacity: var(--sun-o, 1); }

/* --- Seitenübergang (Fade-in beim Laden, Fade-out bei interner Navigation) ---
   WICHTIG: Enter-Transform liegt auf <main>, NICHT auf <body> – ein transformierter
   <body> würde zum Bezugsrahmen für position:fixed und bräche Cookie-Banner/Mobile-Menü.
   Exit nur per Opacity (für Fixed-Elemente unbedenklich). */
.page-enter { animation: pageIn 0.6s var(--ease-out) both; }
@keyframes pageIn { from { transform: translateY(10px); } to { transform: none; } }
.page-leave { opacity: 0; transition: opacity 0.18s ease; }

/* --- Cookie-Banner deutlich als schwebende Karte (Schatten) --- */
.cookie-banner { box-shadow: 0 18px 50px rgba(26,26,26,0.30); }

/* --- Lightbox (Referenz-/Projektgalerie) --- */
.gallery-card { cursor: pointer; }
.gallery-card:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.lightbox {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(18, 16, 12, 0.92);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure {
  margin: 0; max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 0.9rem; align-items: center;
}
.lightbox img {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: var(--r-sm); box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  background: #1a1a1a; transform: scale(0.96); transition: transform 0.4s var(--ease-out);
}
.lightbox.open img { transform: scale(1); }
.lightbox figcaption {
  width: 100%; color: #fff; display: flex; gap: 0.75rem;
  align-items: baseline; justify-content: space-between; flex-wrap: wrap;
}
.lightbox figcaption strong { font-family: var(--display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; }
.lightbox figcaption .lb-tag { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.65); }
.lb-btn {
  position: absolute; background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
  width: 48px; height: 48px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  transition: background 0.2s ease, transform 0.2s var(--ease-out);
}
.lb-btn:hover { background: rgba(255,255,255,0.22); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: 1.9rem; }
.lb-prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lb-next:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 600px) { .lb-prev, .lb-next { display: none; } }

/* --- Formular-Validierung: Feldzustände --- */
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }
.field-err { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.03em; color: #C0392B; }
.field-err:empty { display: none; }
.consent.invalid { color: #C0392B; }
.consent.invalid input { outline: 2px solid #C0392B; outline-offset: 2px; }

/* --- will-change nach dem Reveal freigeben (kein Dauer-Hint) --- */
.reveal.is-visible { will-change: auto; }

/* --- Team-Platzhalter: ruhige Premium-Variante mit Monogramm statt Schraffur --- */
.ph.avatar { background: linear-gradient(160deg, #232323, #141414) !important; }
.ph.avatar::before { display: none !important; }
.ph.avatar .ph-label {
  color: var(--sun); font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: 0.04em;
}

/* --- Leeres Testimonial-Avatar → Monogramm statt leerer Kreis --- */
.quote-avatar { display: flex; align-items: center; justify-content: center; }
.quote-avatar.is-initial { background: var(--ink); color: var(--sun); font-family: var(--display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }

/* --- Mobile-Feinschliff: Hero-Meta einspaltig stapeln (kein Label-Overflow) --- */
@media (max-width: 600px) {
  .hero-meta { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero-meta > * { min-width: 0; }
  .hero-stat span:first-child { font-size: 2rem; }
}

/* --- Reduced-Motion: neue Effekte neutralisieren --- */
@media (prefers-reduced-motion: reduce) {
  .img-reveal::after { display: none !important; }
  .img-reveal > img { transform: none !important; }
  .reveal-lines .ln > span { transform: none !important; }
  .sun-stage { transform: none !important; opacity: 1 !important; }
  .page-enter, .page-leave { animation: none !important; opacity: 1 !important; transform: none !important; }
  .count-done { animation: none !important; }
  .subnav { transition: none !important; }
}

/* --- Untermenüs in der Hauptnavigation (Unternehmen, Leistungen) --- */
nav.main .has-sub { position: relative; }
/* Unsichtbare Brücke über den Abstand, damit das Menü beim Runterfahren offen bleibt */
nav.main .has-sub::after {
  content: ""; position: absolute; left: -1rem; right: -1rem; top: 100%; height: 0.9rem;
}
nav.main .subnav {
  position: absolute; top: calc(100% + 0.9rem); left: 50%;
  display: block; min-width: 15rem; padding: 0.5rem 0; margin: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-0.4rem);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  z-index: 10;
}
nav.main .has-sub:hover .subnav,
nav.main .has-sub:focus-within .subnav {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
nav.main .subnav li { display: block; }
nav.main .subnav a {
  display: block; padding: 0.55rem 1.25rem; white-space: nowrap;
  border-left: 2px solid transparent;
}
/* Die gelbe Unterstreichung der Toplevel-Links gilt hier nicht */
nav.main .subnav a::after { display: none; }
nav.main .subnav a:hover { color: var(--ink); border-left-color: var(--sun); }
nav.main .subnav a.active { color: var(--ink); border-left-color: var(--ink); }

/* Mobil: Unterpunkte dauerhaft eingerückt unter dem Hauptpunkt */
.mobile-nav {
  overflow-y: auto;
  /* "safe" verhindert, dass zentrierter Inhalt bei Überlänge oben unerreichbar abgeschnitten wird */
  justify-content: safe center;
  /* Platz für den Schließen-Button, wenn die Liste oben anliegt */
  padding-block-start: 4.5rem;
}
.mobile-nav .m-sub { margin: 0 0 0.9rem; }
.mobile-nav .m-sub li { border-bottom: none; }
.mobile-nav .m-sub a {
  padding: 0.35rem 0 0.35rem 1rem;
  font-family: var(--sans); font-size: 1rem; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.68);
  border-left: 2px solid rgba(255,255,255,0.18);
}
.mobile-nav .m-sub a:hover { color: var(--sun); border-left-color: var(--sun); }
.mobile-nav .m-sub a.active { color: var(--paper); border-left-color: var(--sun); }
.mobile-nav .has-sub > a { padding-bottom: 0.6rem; }

/* --- Telefon-Button: bei engem Header nur noch das Icon statt der umbrechenden Nummer --- */
.btn-tel { white-space: nowrap; }
.btn-tel .tel-icon { display: none; flex: none; }
@media (max-width: 1279px) {
  .btn-tel { padding-inline: 1.15rem; }
  .btn-tel .tel-label { display: none; }
  .btn-tel .tel-icon { display: block; }
}

/* ===================================================================
   FEINSCHLIFF (Welle 4) – Handwerk, nicht neue Designsprache
   Ziel: die Stellen schließen, an denen die Seite nach Vorlage aussieht.
   Reihenfolge: Material & Typo → Rhythmus → Komponenten → Hero.
   =================================================================== */

:root {
  /* Hairlines etwas neutraler: das warme Beige las sich auf Weiß vergilbt */
  --line: #E7E2D6;

  /* Mikro-Typografie: drei Stufen statt sieben zufälliger Tracking-Werte */
  --track-micro: 0.14em;  /* Sektions-Labels */
  --track-meta: 0.10em;   /* Tags, Meta-Zeilen, Captions */
  --track-data: 0.04em;   /* Kontaktdaten, Ziffernblöcke */

  /* Gemeinsame Bildtonung – bindet 20 Jahre Aufnahme-Historie zusammen */
  --img-grade: saturate(1.02) contrast(1.03);
  --img-grade-archive: saturate(0.94) contrast(1.06) sepia(0.07) brightness(1.01);
}

/* --- Ziffern laufen nicht mehr in der Breite, während die Counter zählen --- */
.kpi .num,
.hero-stat > span:first-child,
.feature-stats strong,
.timeline strong,
.news-row .date {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Optisches Tracking: große Grade enger, kleine Grade offener --- */
h1 { letter-spacing: -0.038em; line-height: 0.98; }
h2 { letter-spacing: -0.028em; line-height: 1.03; }
h3 { letter-spacing: -0.012em; }
.quote blockquote { letter-spacing: -0.028em; }

/* --- Mono-Labels auf die drei Stufen normalisieren --- */
.label, .logo-label { letter-spacing: var(--track-micro); }
.breadcrumb, .hero-image-meta, .gallery-card .tag, .news-row .cat,
.kpi .cap, .feature-stats small, .step .n, .field label,
.footer-bottom, .lightbox figcaption .lb-tag { letter-spacing: var(--track-meta); }
.team-card .contact, .mobile-nav .m-contact, .service-num { letter-spacing: var(--track-data); }

/* --- Deutsche Komposita: Trennung erst dort, wo die Spalte wirklich eng wird.
   Auf Desktop trennte `hyphens:auto` mitten in Wörtern wie „Po-roton" – unschön. --- */
@media (max-width: 620px) {
  .prose p, .prose li, .service-item p, .step p, .badge p { hyphens: auto; }
}
.service-item p, .step p, .badge p, .prose p { overflow-wrap: break-word; }

/* --- Fokus: sichtbar auf Weiß UND auf den dunklen Flächen --- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.story-section :focus-visible,
.cta-section:not(.sun) :focus-visible,
.mobile-nav :focus-visible,
.cookie-banner :focus-visible,
.lightbox :focus-visible { outline-color: var(--sun-bright); }

::selection { background: var(--sun-soft); color: var(--ink); }

/* --- Touch-Targets (Filter-Chips, Burger) auf 44px --- */
.chip { min-height: 44px; display: inline-flex; align-items: center; }
.menu-toggle { width: 44px; height: 44px; padding: 0; }
@media (max-width: 900px) { .menu-toggle { display: grid; place-items: center; } }
/* Auf schmalen Schirmen drückte der Anfrage-Button den Header auseinander */
@media (max-width: 540px) {
  .nav-cta { gap: 0.5rem; }
  .nav-cta .btn-primary { padding: 0.7rem 1.1rem; font-size: 0.8rem; }
}

/* ===== Vertikaler Rhythmus =====
   Die Grundskala bleibt großzügig – der Weißraum war nie das Problem.
   Geändert wird nur eine Sache: an jeder Naht standen bisher 128 px unten
   plus 128 px oben, also 256 px, unabhängig davon, ob dort inhaltlich ein
   Schnitt ist. Zusammenhängende helle Sektionen rücken deshalb moderat
   zusammen, getönte Blöcke behalten ihre volle Luft und werden dadurch
   zur Zäsur. Inline-Paddings im HTML gewinnen weiterhin.
   Innenmaße der Bausteine bleiben unangetastet. */
section + section:not(.story-section):not(.cta-section) {
  padding-top: clamp(3rem, 6.5vw, 5.5rem);
}
section:not(.story-section):not(.cta-section):has(+ section:not(.story-section):not(.cta-section)) {
  padding-bottom: clamp(3rem, 6.5vw, 5.5rem);
}
/* Überschrift darf die Kartenbreite nutzen – 18ch erzwang Umbrüche wie
   „Sonnenhaus & e4-“ / „Ziegel“ mitten im Begriff. */
.service-item h3 { max-width: none; }

/* ===== Bildtonung ===== */
.imgbox > img, .imgbox > picture > img, .hero-image > img, .feature-image > img,
.team-card .avatar > img, .video-poster {
  filter: var(--img-grade);
}
/* Galerie & Kundenstimmen: gemischtes Archivmaterial, stärker zusammengezogen */
.gallery-card .img > img, .quote-avatar img, .testi-card .who img {
  filter: var(--img-grade-archive);
}

/* ===== Komponenten: eine Hover-Sprache statt vier ===== */
.service-item:hover, .gallery-card:hover, .team-card:hover,
.testi-card:hover, .badge:hover {
  transform: translateY(-3px);
  border-color: var(--sun);
  box-shadow: var(--shadow-md);
}
/* Der volle Gelb-Flächenwechsel wirkte wie ein Bootstrap-Hover –
   stattdessen eine feine Lichtkante oben, die von links einläuft. */
.service-item { position: relative; background: var(--surface); }
.service-item:hover { background: var(--surface); }
.service-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--sun); border-radius: var(--r-md) var(--r-md) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.service-item:hover::before { transform: scaleX(1); }

/* Buttons: Shine-Sweep UND Spotlight lagen übereinander – Sweep entfällt,
   der weichere Spotlight auf dem Primär-Button bleibt. */
.btn::after { display: none; }

/* ===== Partner-Logos optisch normalisieren =====
   Alle Dateien sind auf 100px Höhe normiert, dadurch war ein 5,5:1-Logo
   optisch fünfmal so schwer wie ein quadratisches Signet. Höhe gegenläufig
   zum Seitenverhältnis staffeln gleicht die Fläche an. */
/* Neun Logos in einer Flex-Zeile brachen zu 7+2 um. Als Raster wirkt der
   Umbruch gesetzt statt zufällig. */
.logo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 2rem) 0; }
.logo-row > a { justify-self: center; }
@media (max-width: 900px) { .logo-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logo-row { grid-template-columns: repeat(2, 1fr); } }
.logo-row img { height: 38px; width: auto; object-fit: contain; }
.logo-row img[src*="hausbaufuehrer"] { height: 28px; }
.logo-row img[src*="ABAU"] { height: 31px; }
.logo-row img[src*="MWH_Logo"] { height: 34px; }
.logo-row img[src*="ankoe"] { height: 36px; }
.logo-row img[src*="klimaaktiv"] { height: 38px; }
.logo-row img[src*="sentinel"] { height: 39px; }
.logo-row img[src*="koppensteiner"] { height: 42px; }
.logo-row img[src*="sonnenhaus_web"] { height: 45px; }
.logo-row img[src*="bauherrenhilfe"] { height: 46px; }
@media (max-width: 540px) { .logo-row img { height: 30px; } .logo-row img[src*="bauherrenhilfe"] { height: 38px; } }

/* --- Feature-Block: das Bild ließ rechts unter sich Weißraum stehen, weil
   aspect-ratio das Stretchen der Grid-Zelle überstimmt hat. --- */
@media (min-width: 901px) {
  .feature-image { aspect-ratio: auto; min-height: 100%; }
}

/* ===== Video-Fassade: Text nach unten links statt gestauchter Mittelblock ===== */
.video-facade { align-items: flex-end; justify-content: flex-start; text-align: left; padding: clamp(1.5rem, 3vw, 2.5rem); }
.video-facade .vinner { align-items: center; flex-direction: row; gap: 1.25rem; }
.video-facade .play { width: 56px; height: 56px; font-size: 1.15rem; margin-bottom: 0; flex: none; }
.video-facade .vtext { max-width: 40ch; }
.video-facade .vtext strong { font-size: clamp(1.1rem, 1.8vw, 1.45rem); }
.video-facade .vtext span { font-size: 0.8rem; line-height: 1.45; display: block; color: rgba(255,255,255,0.72); }
.video-facade::after { background: linear-gradient(180deg, rgba(26,26,26,0.15) 30%, rgba(26,26,26,0.78)); }

/* ===================================================================
   FLÄCHE: Kalkputz statt Bildschirmweiß
   Der Hero zeigt eine verputzte Wand – der Rest der Seite setzt dieselbe
   Fläche fort. Zwei Ebenen: ein Papierton als Grund, reines Weiß nur noch
   für Karten und Bedienelemente, dazu dieselbe Körnung wie im Render.
   =================================================================== */

:root {
  --paper: #FAF8F3;    /* Grundfläche – warmes Off-White */
  --surface: #FFFFFF;  /* Karten, Eingabefelder, Menüflächen */
}

/* Karten heben sich jetzt durch den Tonunterschied ab, nicht durch Schatten.
   .chip.active und .service-item:hover behalten ihre eigenen Flächen. */
.service-item, .testi-card, .team-card, .gallery-card, .badge,
.feature, nav.main .subnav,
.chip, .field input, .field select, .field textarea {
  background: var(--surface);
}
.hero-kpi { background: rgba(255, 255, 255, 0.7); }

/* Diese beiden trugen ausdrücklich --paper und würden damit das Korn
   des Body-Hintergrunds mit einer glatten Fläche zudecken. */
.logo-strip, footer.site-footer { background: transparent; }

/* Korn auf dem Papier. Liegt auf dem Body-Hintergrund, scrollt also mit dem
   Inhalt – ein fixierter Overlay-Layer läse sich wie Schmutz auf dem Schirm.
   Die Deckkraft steckt im SVG (feFuncA slope), damit kein mix-blend-mode
   nötig ist. Dunkle und farbige Sektionen decken die Fläche ab und bringen
   ihre eigene, kräftigere Körnung mit. */
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.085'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ===== Responsive-Nachzügler aus dem Audit (F1, F3, F5) ===== */
@media (max-width: 560px) { .feature-stats { grid-template-columns: 1fr 1fr; } .feature-stats div:nth-child(3) { border-right: none; } }
@media (max-width: 540px) { .timeline li { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ===================================================================
   HERO – von der Clipart-Sonne zur Licht-Studie
   Die rotierenden Speichen waren das billigste Element der Seite.
   Ersatz: ein gerichtetes Lichtfeld plus ein Sonnenstand-Diagramm aus
   Haarlinien – näher an einer Architektenzeichnung als an einem Icon.
   =================================================================== */

/* Lichtfeld: warme Quelle oben rechts, kühler Gegenhalt unten links,
   damit die Fläche Tiefe bekommt statt flach gelb zu waschen. */
.hero {
  background:
    radial-gradient(58% 78% at 82% -6%, rgba(255,201,60,0.42) 0%, rgba(255,201,60,0.10) 42%, transparent 68%),
    radial-gradient(70% 60% at 8% 108%, rgba(232,222,192,0.40) 0%, transparent 62%),
    linear-gradient(168deg, var(--sun-pale) 0%, var(--paper) 46%, var(--paper) 100%);
}

/* Speichen entfallen ersatzlos */
.sun-rays-g { display: none !important; }

/* Sonnenscheibe und Bloom entfallen ebenfalls: mit der Lichtstudie im Hero
   gäbe es zwei konkurrierende Hauptmotive, und die Scheibe kollidierte mit
   dem Medienfeld. Es bleibt das Sonnenstand-Diagramm aus Haarlinien –
   ruhig, architektonisch, und es trägt das „Sonnenkraft“-Motiv weiter. */
.sun-bloom, .sun-disc { display: none; }

.sun-stage { width: 760px; height: 760px; top: -300px; right: -260px; opacity: 0.85; }
.sun-svg { overflow: visible; }
/* Muss nach der Desktop-Zeile stehen: gleiche Spezifität, sonst gewinnt oben. */
@media (max-width: 900px) { .sun-stage { width: 560px; height: 560px; top: -230px; right: -220px; } }
@media (max-width: 540px) { .sun-stage { width: 420px; height: 420px; top: -170px; right: -190px; opacity: 0.6; } }

/* Haarlinien, eine gestrichelt – technisch, nicht dekorativ */
.sun-arcs circle { fill: none; stroke: #C98F27; }
.sun-arcs .a1 { stroke-width: 0.55; opacity: 0.32; }
.sun-arcs .a2 { stroke-width: 0.5; opacity: 0.22; stroke-dasharray: 2.5 4.5; }
.sun-arcs .a3 { stroke-width: 0.45; opacity: 0.14; }
.sun-arcs { transform-box: fill-box; transform-origin: center; animation: arcDrift 240s linear infinite; }
@keyframes arcDrift { to { transform: rotate(360deg); } }

/* ===== Hero: Zusage zuerst, Lichtstudie als randloser Streifen =====
   Der Render ist 1920×824, also liegende Lichtbänder in 2,33:1. Die
   vorherige zweispaltige Fassung presste ihn in ein 3:2-Feld und schnitt
   ihn damit auf seiner schwachen Achse an. Jetzt steht die Headline
   allein und groß, darunter läuft der Loop über die volle Breite nahe an
   seinem Eigenformat. Bewusst liegt kein Text über dem wandernden Licht:
   dessen Kontrast schwankt über die acht Sekunden des Loops.
   Das Kennzahlenband schließt bündig an und ersetzt zugleich die eigene
   KPI-Sektion weiter unten, die zwei Werte des Heros doppelt zeigte. */
.hero-type { padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.hero-eyebrow { display: block; margin-bottom: 1.35rem; color: var(--accent-text); }
.hero-type h1 {
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  letter-spacing: -0.05em; max-width: 15ch; margin: 0 0 1.6rem;
}
/* Lede und Buttons teilen sich eine Zeile auf gemeinsamer Grundlinie,
   damit die Headline darüber ungestört stehen bleibt. */
.hero-row {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: end;
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
/* Erst ab 980 px nebeneinander: die beiden Buttons belegen zusammen rund
   390 px, darunter bliebe der Lede keine lesbare Zeilenlänge mehr. */
@media (min-width: 980px) {
  .hero-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}
.hero-type .hero-lede { color: var(--ink-soft); max-width: 50ch; margin-bottom: 0; }
.hero-actions { margin-top: 0; }

/* Streifen: randlos, ohne Rundung, ohne Rahmenlinie. Feste Höhe statt
   aspect-ratio + max-height – diese Kombination rechnet die Breite zurück
   und lässt den Streifen rechts auslaufen.
   Kein eigenes ::after auf .hero-image – das gehört der Curtain-Maske
   aus .img-reveal und würde sie sonst überschreiben. */
.hero-strip {
  aspect-ratio: auto; height: clamp(200px, 32vw, 560px);
  margin-top: 0; border-radius: 0; box-shadow: none;
}
.hero-strip > video { object-position: center; }

/* Kennzahlenband bündig unter dem Streifen: Zusage → Bild → Beleg liest
   sich als ein Block statt als drei gestapelte Elemente. */
.hero-kpi { margin-top: 0; background: rgba(255,255,255,0.5); }
.hero-kpi .kpi { padding: clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.15rem, 1.8vw, 1.75rem); }
.hero-kpi .num { font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* Medien-Slot: nimmt Bild oder Loop auf, gleiche Geometrie und gleiches Reveal.
   Ohne eigenen Hintergrund – .has-img setzt dort ohnehin background:none. */
.hero-image > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0; filter: var(--img-grade);
}
.img-reveal > video { transform: scale(1.08); transition: transform 1.25s var(--ease-out); }
.img-reveal.is-shown > video { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .img-reveal > video { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sun-disc, .sun-arcs { animation: none !important; }
}

/* ==========================================================================
   WELLE 5 – Hero mit Projektfoto statt Lichtstudie
   --------------------------------------------------------------------------
   Der Loop lief randlos über die volle Fensterbreite. Ein Foto verträgt das
   nicht: keine Projektaufnahme im Bestand ist breiter als 900 px, über
   1440 px wären das 1,6× Upscale (auf Retina mehr). Deshalb Zweispalter –
   das Bild sitzt in einer rund 640 px breiten Spalte und läuft nur nach
   rechts aus dem Container heraus.

   Die Regeln stehen bewusst am Dateiende und überschreiben die Basis über
   die Reihenfolge, nicht über höhere Spezifität. Media Queries direkt hinter
   der jeweiligen Basiszeile – sie erhöhen die Spezifität nicht und würden
   sonst von einer späteren Basiszeile geschlagen.
   ========================================================================== */
.hero-photo { padding-bottom: clamp(3rem, 5vw, 4.5rem); }

/* padding-left spiegelt die Containerkante, padding-right bleibt 0, damit
   das Bild rechts randlos ausläuft. */
.hero-split {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  padding-left: max(1.25rem, calc((100% - var(--maxw)) / 2 + 2.5rem));
  padding-right: 0;
}
/* Erst ab 980 px nebeneinander – darunter bliebe weder dem Text noch dem
   Bild eine brauchbare Breite. */
@media (min-width: 980px) {
  .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Unter 980 px steht das Bild unter dem Text und bekommt beide Kanten
   zurück, sonst hängt es einseitig am Rand. */
@media (max-width: 979px) {
  .hero-split { padding-right: max(1.25rem, calc((100% - var(--maxw)) / 2 + 2.5rem)); }
}

.hero-copy { max-width: 40rem; }
/* Die 7,2vw der Vollbreiten-Fassung ergäben in der halben Spalte über 100 px
   Schriftgrad. Zurück auf ein Maß, das in ~640 px noch umbricht. */
.hero-photo h1 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); max-width: 14ch; }

/* Feste Höhe statt aspect-ratio + max-height: diese Kombination rechnet die
   Breite zurück und lässt das Feld rechts auslaufen. */
.hero-figure {
  aspect-ratio: auto; height: clamp(360px, 42vw, 600px); margin-top: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(26,26,26,0.06), 0 24px 60px rgba(40,33,20,0.14);
}
@media (max-width: 979px) {
  .hero-figure { border-radius: var(--r-lg); height: clamp(300px, 56vw, 460px); }
}
/* Das Kind sitzt rechts im Bild, links bleibt so noch Hausfläche stehen. */
.hero-figure > img { object-position: 76% 50%; }

/* Bildunterschrift als Pille auf dem Bild – nur Ort und Typ, kein Fließtext:
   der Kontrast der Aufnahme trägt keine längere Zeile. */
.hero-figure-cap {
  position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  background: rgba(250,248,243,0.9); backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink);
}
.hero-figure-cap .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
}

/* Zusagenzeile unter den Buttons, gleiche Mono-Optik wie die KPI-Captions. */
.hero-meta-strip {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
}
.hero-meta-strip .sep { color: var(--line); }

/* ==========================================================================
   HERO-FEINSCHLIFF (Welle 5): Buttons, Foto-Einbindung, Unterlängen
   Wie die Wellen davor: Überschreiben über Reihenfolge, Media Queries direkt
   hinter der jeweiligen Basiszeile.
   ========================================================================== */

/* Zeilen-Reveal: .ln schneidet per overflow:hidden ab. Bei line-height < 1
   fielen Unterlängen (g, p, y) weg – sichtbar erst mit „nachhaltig“. Mehr
   Innenraum unten, per negativem Margin wieder ausgeglichen, damit sich der
   Zeilenabstand nicht ändert. */
.reveal-lines .ln { padding-bottom: 0.16em; margin-bottom: -0.16em; }

/* Buttons im Hero: klarer Abstand zum Lede (eine ältere Regel setzte ihn
   auf 0), etwas größere Schrift bei weniger Polsterung, damit die Pillen
   nicht klobig wirken. Der Sekundär-Button tritt zurück: heller Grund,
   feine Kontur statt schwarzem Rahmen. */
.hero-photo .hero-actions {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  gap: 0.75rem; align-items: center;
}
.hero-photo .hero-actions .btn {
  min-height: 3.25rem; padding: 0 1.5rem;
  font-size: 0.95rem; letter-spacing: 0; justify-content: center;
}
.hero-photo .hero-actions .btn-ghost {
  background: rgba(255,255,255,0.7);
  border-color: rgba(26,26,26,0.16);
}
.hero-photo .hero-actions .btn-ghost:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
/* Schmale Displays: beide Buttons gleich breit untereinander. */
@media (max-width: 540px) {
  .hero-photo .hero-actions { flex-direction: column; align-items: stretch; }
}
.hero-photo .hero-meta-strip { margin-top: clamp(2rem, 3.5vw, 2.5rem); }
/* Schmal bricht die Zusagenzeile um und die zweite Zeile begann mit einem
   verwaisten Trennpunkt. Dort stattdessen ein 2×2-Raster ohne Punkte. */
@media (max-width: 540px) {
  .hero-photo .hero-meta-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
  .hero-photo .hero-meta-strip .sep { display: none; }
}

/* Foto: im Container statt rechts randlos auslaufend, rundum gerundet –
   so steht es ruhig neben dem Text wie die übrigen Bildflächen der Seite.
   Höhe nah am Eigenformat (900×450): bei ~640 px Spaltenbreite und 480 px
   Höhe wird die Quelle nur rund 1,07-fach skaliert statt 1,33-fach, das
   Bild bleibt schärfer und verliert weniger vom Haus. */
.hero-split {
  padding-right: max(1.25rem, calc((100% - var(--maxw)) / 2 + 2.5rem));
}
.hero-figure {
  height: clamp(320px, 33vw, 480px);
  border-radius: var(--r-lg);
}
@media (max-width: 979px) {
  .hero-figure { height: clamp(240px, 52vw, 420px); }
}

/* ==========================================================================
   LOGO-LEISTE SYMMETRISCH (Welle 6)
   Das feste 5er-Raster ließ 8 Logos als 5 + 3 stehen, die Restreihe hing
   links. Jetzt gleich breite Zellen in einer zentrierenden Flex-Reihe:
   8 Logos laufen als 4 + 4 (mobil 2 × 4), angebrochene Reihen – etwa die
   5 Logos der Leistungsseite auf dem Tablet – stehen mittig.
   ========================================================================== */
.logo-row {
  --cols: 5;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 2vw, 2rem) 0;
}
.logo-row:has(> a:nth-child(8):last-child) { --cols: 4; }
@media (max-width: 900px) {
  .logo-row { --cols: 3; }
  .logo-row:has(> a:nth-child(8):last-child) { --cols: 4; }
}
@media (max-width: 560px) {
  .logo-row, .logo-row:has(> a:nth-child(8):last-child) { --cols: 2; }
}
.logo-row > a { flex: 0 0 calc(100% / var(--cols)); justify-self: auto; }
/* Die Zelle ist jetzt spaltenbreit – eine gelbe Hover-Fläche darüber wäre
   ein breiter Balken. Rückmeldung gibt das eingefärbte Logo. */
.logo-row a:hover { background: transparent; }

/* ==========================================================================
   LEISTUNGS-ICONS STARTSEITE (Welle 7)
   Kleine Strich-Icons vor der Nummer der vier Disziplinen. Bewusst am
   .service-num und nicht an der Karte: .service-item::before ist schon der
   Hover-Balken (Welle 4) und würde sonst still ersetzt. Inline-SVG als
   data-URI – keine externe Ressource. Farbe = --accent-text (#9A6B00).
   Zuordnung über a[href*="…"], nicht $=".html": Netlify (Pretty URLs)
   schreibt die Links beim Ausliefern auf /leistungen/tiefbau ohne .html um.
   ========================================================================== */
#leistungen .service-num {
  display: flex; align-items: center; justify-content: space-between;
}
#leistungen .service-num::before {
  content: ""; flex: none; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-sm);
  background: var(--sun-pale) center / 1.5rem no-repeat;
}
/* Haus mit Ziegelverband */
#leistungen .service-item:has(a[href*="massivwerthaus"]) .service-num::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7M5 9.5V20h14V9.5M5 14h14M5 17h14M9 11v3M15 11v3M12 14v3M9 17v3M15 17v3'/%3E%3C/svg%3E"); }
/* Haus mit Erneuerungspfeil */
#leistungen .service-item:has(a[href*="sanierung"]) .service-num::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7M5 9.5V20h14V9.5M14.8 13.2a3.2 3.2 0 1 0 .4 2.9M15 10.8v2.6h-2.6'/%3E%3C/svg%3E"); }
/* Bagger */
#leistungen .service-item:has(a[href*="tiefbau"]) .service-num::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18.5A1.5 1.5 0 0 1 4.5 17h8a1.5 1.5 0 0 1 0 3h-8A1.5 1.5 0 0 1 3 18.5zM4.5 17v-4.5h3V9.5h2.8l1.2 3V17M11.5 12.5 16 6.5l4.5 3M20.5 9.5v3.2a1 1 0 0 1-1 1h-1.6'/%3E%3C/svg%3E"); }
/* Ziegelstapel */
#leistungen .service-item:has(a[href*="baustoffhandel"]) .service-num::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15h8v5H3zM13 15h8v5h-8zM8 9h8v5H8zM2 21.5h20'/%3E%3C/svg%3E"); }

/* ==========================================================================
   LEISTUNGSKARTEN-HOVER (Welle 8)
   Die Lichtkante (.service-item::before, Welle 4) ist ein gerades 2-px-
   Rechteck und kann der Kartenrundung nicht folgen – ihre Enden ragten
   eckig über die runden Ecken hinaus. overflow:hidden schneidet sie an der
   Innenkante der Karte zu, die Kante läuft so sauber in die Rundung.
   Schatten und Hover-Versatz der Karte selbst sind davon nicht betroffen.
   ========================================================================== */
.service-item { overflow: hidden; }
.service-item::before { border-radius: 0; }

/* ==========================================================================
   FORMULARVERSAND (Welle 9) – Netlify Forms
   .hp ist das Honeypot-Feld für Bots: für Menschen unsichtbar, aber nicht
   display:none, damit einfache Bots es noch ausfüllen. .form-error ist das
   Gegenstück zu .form-success, gleiche Box, Fehlerton statt Gelb.
   ========================================================================== */
.hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.form-error {
  padding: 1.25rem 1.5rem; border-radius: var(--r-sm);
  background: #FDF0EE; border: 1px solid #E2A79C; color: #8A2A1B;
  font-size: 0.95rem;
}
.form-error[hidden] { display: none; }
.form-error a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   SOCIAL LINKS (Welle 10) – Facebook / Instagram in Footer und Mobil-Menü
   Reine Links mit Inline-SVG, es wird nichts von Meta geladen (DSGVO).
   ========================================================================== */
.social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink);
  transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.social a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mobile-nav .social a { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); }
.mobile-nav .social a:hover { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   KORREKTURRUNDE 3 (Welle 11) – Planungsseite, Bildreihen, Partnerleiste
   ========================================================================== */
/* Bestandsaufnahme: Scan + Plan in Originalformat (1219×469), weiß hinterlegt –
   ein 4:3-Ausschnitt würde Gebäude und Planüberlagerung abschneiden. */
.ratio-scan { aspect-ratio: 1219 / 469; background: #fff; }
.ratio-scan > img { object-fit: contain; }
/* 3D-Video im Bildrahmen: füllt die 16:9-Box, Steuerelemente bleiben sichtbar. */
.video-box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #e9e4d8; }
/* Zwei Fotos untereinander neben dem Text (Tiefbau) – Lightbox greift über .gallery. */
.gallery.gallery-stack { grid-template-columns: 1fr; gap: 1rem; }
/* Zweierreihe (Wohnbau & Gewerbe) statt des auto-fill-Rasters, das sonst
   zwei von vier Spalten leer ließe. */
.gallery.gallery-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .gallery.gallery-2 { grid-template-columns: 1fr; } }
/* Partnerleiste mit genau 6 Logos (Startseite nach Wegfall von Sentinel und
   Wienerberger): 6 in einer Reihe, darunter 3 + 3, mobil 2 × 3. */
.logo-row:has(> a:nth-child(6):last-child) { --cols: 6; }
@media (max-width: 900px) { .logo-row:has(> a:nth-child(6):last-child) { --cols: 3; } }
@media (max-width: 560px) { .logo-row:has(> a:nth-child(6):last-child) { --cols: 2; } }