/* ============================================================
   Dreher Dachdecker - Design System
   Aesthetic: Premium German Handwerk
   Fonts: Syne (headings) + DM Sans (body)

   ============================================================ */

/* Schriften: siehe css/fonts.css - lokal gehostet, wird vor dieser Datei geladen. */

/* ── Variables ── */
:root {
  --green-primary:  #4caf47;
  --green-accent:   #4caf47;
  --green-dark:     #3A6B22;
  --green-light:    #EAF4E0;
  /*--dark:           #1C2B3A;
  --dark-2:         #263647;
  --dark-3:         #344D62;*/
  --dark:           #2B2B29;
  --dark-2:         #3A3A37;
  --dark-3:         #555550;
  --gray-700:       #3A3A38;
  --gray-600:       #555552;
  --gray-500:       #76766F;
  --gray-400:       #9A9993;
  --gray-300:       #CECEC9;
  --gray-200:       #E3E3DE;
  --gray-100:       #F1F1EC;
  --light:          #F7F7F3;
  --white:          #FFFFFF;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08),  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07),  0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.12), 0 10px 10px rgba(0,0,0,.05);
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  18px;
  --transition: all 0.3s ease;
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Fliesstext-Skala. Alle Beschreibungstexte laufen ueber diese Tokens, damit
     sich die Groesse zentral nachjustieren laesst statt an 40 Einzelregeln.
     Werte = bisherige Groessen + 12 %. Ueberschriften, Buttons, Navigation,
     Chips, Eyebrows, Meta-/Datumszeilen und Icons bleiben unberuehrt. */
  --text-xs:  0.90rem;   /* 14,4 px - kleinste Beschreibungen      (vorher .78-.82) */
  --text-sm:  0.98rem;   /* 15,7 px - Kartentexte                  (vorher .84-.90) */
  --text-md:  1.05rem;   /* 16,8 px - Blog-, Rechts-, Listentexte  (vorher .92-.96) */
  --text-lg:  1.12rem;   /* 17,9 px - Leistungs-/Unternehmenstexte (vorher 1.00)    */
  --text-xl:  1.18rem;   /* 18,9 px - Section-Intros, CTA, Header  (vorher 1.05)    */
  --text-2xl: 1.23rem;   /* 19,7 px - Hero-Lead                    (vorher 1.10)    */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; background-color: var(--dark); }
body {
  font-family: var(--font-body);
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--dark);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-size: 1.1rem; }
p  { color: var(--gray-600); line-height: 1.75; }
.lead { font-size: 1.1rem; color: var(--gray-500); }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}
.section    { padding: 88px 0; }
.section-sm { padding: 60px 0; }
.section-lg { padding: 120px 0; }

.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p  { max-width: 620px; margin: 0 auto; font-size: var(--text-xl); }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-accent);
  margin-bottom: 14px;
}

/* ── Icon-System (Google Material Symbols Rounded) ──────────────
   Einziges Icon-Set der Website. Verwendung:
     <span class="icon" aria-hidden="true">call</span>
   Reine Icon-Buttons zusaetzlich mit .icon-btn und aria-label.
   Groesse, Icon Weight, Farbe und Ausrichtung kommen ausschliesslich
   von hier - keine Inline-Styles, keine zweite Icon-Library. */
.icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  direction: ltr;
  color: currentColor;
  flex-shrink: 0;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'opsz' 24;
  user-select: none;
}
.icon-xs { font-size: 16px; font-variation-settings: 'opsz' 20; }
.icon-sm { font-size: 18px; font-variation-settings: 'opsz' 20; }
.icon-md { font-size: 24px; font-variation-settings: 'opsz' 24; }
.icon-lg { font-size: 32px; font-variation-settings: 'opsz' 40; }
.icon-xl { font-size: 44px; font-variation-settings: 'opsz' 48; }
.icon-2xl { font-size: 56px; font-variation-settings: 'opsz' 48; }

/* Reiner Icon-Button - einheitliche Flaeche, Hover- und Active-State */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.icon-btn:hover { background: rgba(0,0,0,.08); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible {
  outline: 2px solid var(--green-primary);
  outline-offset: 2px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: .025em;
  transition: var(--transition);
  cursor: pointer;
}
.btn-primary {
  background: var(--green-primary);
  color: var(--white);
  border: 2px solid var(--green-primary);
}
.btn-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(76,175,71,.35);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.55);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--dark);
  border-color: var(--white);
}
.btn-outline-green {
  background: transparent;
  color: var(--green-primary);
  border: 2px solid var(--green-primary);
}
.btn-outline-green:hover {
  background: var(--green-primary);
  color: var(--white);
}
.btn-ghost {
  color: var(--green-primary);
  padding-left: 0;
  padding-right: 0;
  border: none;
  font-weight: 600;
}
.btn-ghost:hover { color: var(--green-dark); }
.btn-ghost .arrow { transition: transform .2s; }
.btn-ghost:hover .arrow { transform: translateX(5px); }

/* ── Site Header / Nav ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--dark);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: var(--transition);
}
.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.22);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo svg { height: 48px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  padding: 9px 15px;
  color: rgba(255,255,255,.78);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--white);
  background: rgba(255,255,255,.09);
}
.nav-links a.active {
  color: var(--white);
}
.nav-cta {
  background: var(--green-primary) !important;
  color: var(--white) !important;
  margin-left: 10px;
  padding: 9px 20px !important;
}
.nav-cta:hover { background: var(--green-dark) !important; transform: translateY(-1px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* ── Toggle button ── */
  .nav-toggle {
    display: flex;
    width: 40px; height: 40px;
    flex-direction: column;
    justify-content: center; align-items: center;
    gap: 5px; padding: 0;
    position: relative;
    z-index: 2100;
  }
  .nav-toggle span { width: 22px; height: 2px; flex-shrink: 0; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Nav panel - hidden state (fixed top:0, full height) ── */
  /* Kein top-Wechsel zwischen open/closed → kein diagonaler Slide */
  .nav-links {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100dvh;
    background: var(--dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .38s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease;
    border-bottom: none;
    box-shadow: none;
    z-index: 1999;
    overflow-y: auto;
  }

  /* ── Nav panel - open state ── */
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  /* ── Nav items ── */
  .nav-links li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav-links li:first-child { border-top: 1px solid rgba(255,255,255,.07); }

  .nav-links a {
    display: block;
    padding: 22px 24px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255,255,255,.85);
    border-radius: 0;
    transition: color .2s, background .2s;
  }
  .nav-links a:hover {
    color: var(--green-accent);
    background: rgba(255,255,255,.05);
  }
  .nav-links a.active {
    color: var(--green-accent);
  }

  /* ── CTA in mobile nav ── */
  .nav-links li:last-child {
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
  }
  .nav-links .nav-cta {
    background: var(--green-primary) !important;
    color: var(--white) !important;
    margin: 0 !important;
    border-radius: var(--radius-sm) !important;
    padding: 15px 32px !important;
    font-size: 1.05rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: 300px;
    text-align: center;
  }
  .nav-links .nav-cta:hover { background: var(--green-dark) !important; }
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--dark);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg,  var(--dark) 0%,  var(--dark-2) 55%,  var(--dark-3)100%);
  /* Optionales Hintergrundfoto: Datei als images/hero-bg.jpg ablegen und
     die naechste Zeile einkommentieren. Pfad relativ zu css/ -> ../images/ */
  /* background-image: linear-gradient(140deg, rgba(43,43,41,.86) 0%, rgba(58,58,55,.86) 55%, rgba(85,85,80,.86) 100%), url('../images/hero-bg.jpg'); */
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 95% 95%, var(--green-primary) -200%, transparent 65%);
}
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: .025;
  background-image:
    linear-gradient(var(--white) 1px, transparent 1px),
    linear-gradient(90deg, var(--white) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Foto-Uebergang im Hero. Bis 1023 px unsichtbar - Handy und iPad hoch behalten
   den reinen Farbverlauf, und weil das Bild erst in der Media Query gesetzt
   wird, laden sie es auch nicht herunter. */
.hero-photo { display: none; }

@media (min-width: 1024px) {
  /* Ohne Mask-Unterstuetzung waere der Kasten eine harte Rechteckkante -
     dann lieber gar kein Foto. */
  @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {

    .hero-photo {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 64%;
      z-index: 1;                 /* ueber .hero-bg, unter .hero-content (z-index 2) */
      background: url('../images/Leistungen/Steildach/Steildach_7.webp') 30% 45% / cover no-repeat;

      /* Der Verlauf macht den Uebergang: 124deg statt 90deg kippt die Blendkante
         um 34 Grad nach der anderen Seite - die Blendkante laeuft damit von unten
         links nach oben rechts, auf 900 px Hero-Hoehe rund 600 px Versatz. Bis 22 % ist
         das Foto komplett unsichtbar, ab 82 % voll da - dazwischen blendet es
         weich ein. */
      -webkit-mask-image: linear-gradient(124deg,
        transparent 0%, transparent 22%, rgba(0,0,0,.45) 50%, #000 82%);
      mask-image: linear-gradient(124deg,
        transparent 0%, transparent 22%, rgba(0,0,0,.45) 50%, #000 82%);

      /* Erst unsichtbar; main.js setzt .is-loaded, sobald das Bild geladen
         ist, damit das Fade nicht ins Leere laeuft. */
      opacity: 0;
    }
    .hero-photo.is-loaded { animation: heroPhotoIn 1.4s ease-out both; }

    /* Das Foto ist deutlich heller als der Hero. Ein Schleier daempft es, damit
       Ueberschrift und Fliesstext auf ihrer Seite ruhig bleiben. */
    .hero-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(124deg,
        rgba(43,43,41,.96) 0%,
        rgba(43,43,41,.70) 30%,
        rgba(43,43,41,.36) 70%,
        rgba(43,43,41,.30) 100%);
    }
  }
}

@keyframes heroPhotoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (min-width: 1280px) {
  /* Ab hier ist der Container auf 1220 px gedeckelt und zentriert; der Kasten
     laesst sich deshalb an ihm ausrichten statt in Prozent mitzuwandern. */
  .hero-photo { left: calc(50% + 110px); }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding-top: 80px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--green-accent);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--green-accent);
}
.hero h1 {
  color: var(--white);
  margin-bottom: 26px;
  font-weight: 800;
}
.hero h1 em {
  font-style: normal;
  color: var(--green-accent);
}
.hero-lead {
  color: rgba(255,255,255,.7);
  font-size: var(--text-2xl);
  margin-bottom: 44px;
  max-width: 530px;
  line-height: 1.8;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-trust {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
}
.hero-trust-item .icon { color: var(--green-accent); flex-shrink: 0; }
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.35);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: .4; transform: scaleY(.6); }
}

/* ── Stats / Kennzahlen ── */
.stats {
  background: var(--green-primary);
  padding: 64px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat-item {
  text-align: center;
  padding: 20px 16px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  font-size: .88rem;
  color: rgba(255,255,255,.72);
  font-weight: 500;
}
@media (max-width: 680px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); }
  .stat-item:last-child { border-bottom: none; }
}
/* Stats 420px - 2-col bleibt, override weiter unten in Refinements */

/* ── Service Cards ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}
.service-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--green-accent);
}
.service-card-img {
  height: 195px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card-img .img-bg {
  position: absolute;
  inset: 0;
  transition: transform .45s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card:hover .img-bg { transform: scale(1.05); }
.service-card-body { padding: 24px; }
.service-card-body h3 { margin-bottom: 10px; font-size: 1.15rem; }
.service-card-body p  { font-size: var(--text-sm); line-height: 1.65; color: var(--gray-500); }
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--green-primary);
  font-family: var(--font-display);
}
.service-card-link .arrow { transition: transform .2s; }
.service-card:hover .service-card-link .arrow { transform: translateX(5px); }

/* ── Reference Cards ── */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.ref-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}
.ref-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.ref-card-img {
  height: 240px;
  position: relative;
  overflow: hidden;
}
.ref-card-img .img-bg {
  position: absolute;
  inset: 0;
  transition: transform .45s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ref-card:hover .img-bg { transform: scale(1.05); }
.ref-card-body { padding: 20px 24px 24px; }
.ref-tag {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 20px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ref-card-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.ref-card-body p  { font-size: var(--text-sm); color: var(--gray-500); }

/* Foto im Vorschaubild - fuellt die Kachel, ohne zu verzerren */
.ref-card-img .real-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Verlinkte Referenzkarte auf der Startseite -
   die ganze Karte fuehrt zur passenden Referenz auf referenzen.html */
.ref-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.ref-card-link .ref-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ref-card-link:focus-visible {
  outline: 3px solid var(--green-primary);
  outline-offset: 3px;
}
.ref-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ref-card-meta .ref-tag { margin-bottom: 0; }
.ref-card-meta + h3 { margin-top: 10px; }
.ref-card-year { font-size: .78rem; color: var(--gray-400); }

.ref-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}
.ref-card-place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--gray-500);
}
.ref-card-place .icon { color: var(--green-primary); }
.ref-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--green-primary);
}
.ref-card-more .arrow { transition: transform .2s ease; }
.ref-card-link:hover .ref-card-more .arrow { transform: translateX(5px); }

/* ── Company Preview (split layout) ── */
.company-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 800px) { .company-split { grid-template-columns: 1fr; gap: 44px; } }

.company-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* 3:2 passend zum Betriebsbild (2268 x 1517) - kein nennenswerter Beschnitt */
  aspect-ratio: 3 / 2;
}
.company-img-wrap .img-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, #253323 0%, #2C4E3C 40%, #3A6B22 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-text h2 { margin-bottom: 18px; }
.company-text > p { margin-bottom: 28px; }

.value-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-icon {
  width: 42px;
  height: 42px;
  background: var(--green-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green-primary);
}
.value-text h4 { font-size: .98rem; margin-bottom: 3px; }
.value-text p  { font-size: var(--text-sm); margin: 0; }

/* ── News Cards ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.news-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.news-card-img {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.news-card-img .img-bg {
  position: absolute;
  inset: 0;
  transition: transform .45s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-card:hover .img-bg { transform: scale(1.05); }
.news-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.news-cat {
  font-size: .7rem;
  font-weight: 700;
  color: var(--green-primary);
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.news-date { font-size: .78rem; color: var(--gray-400); }
.news-card-body h3 { font-size: 1.08rem; margin-bottom: 10px; }
.news-card-body p  { font-size: var(--text-sm); color: var(--gray-500); flex: 1; }
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--green-primary);
  font-family: var(--font-display);
}
.news-more .arrow { transition: transform .2s; }
.news-card:hover .news-more .arrow { transform: translateX(5px); }

/* ── Einsatzgebiet (Startseite) ── */
.area-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .area-split { grid-template-columns: 1fr; gap: 40px; } }

.area-text h2 { margin-bottom: 20px; }
.area-text p { font-size: var(--text-lg); }
.area-text p + p { margin-top: 16px; }

.area-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px;
}
@media (max-width: 480px) { .area-card { padding: 28px 22px; } }
.area-card h3 { margin-bottom: 20px; }

.area-list { display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--light);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 6px 14px 6px 10px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--gray-700);
}
.area-list .icon { color: var(--green-accent); }

.area-note { margin-top: 22px; font-size: var(--text-sm); }
.area-note a {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── CTA Section ── */
/* Unten deutlich mehr Luft als oben: CTA-Band und Footer teilen sich die
   Hintergrundfarbe --dark, dadurch verschmelzen beide optisch zu einem
   Block. Der groessere Innenabstand setzt die Buttons wieder vom Footer ab. */
.cta-section {
  background: var(--dark);
  padding: 88px 0 128px;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 15% 60%, rgba(76,175,71,.13) 0%, transparent 60%);
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-inner h2 { color: var(--white); margin-bottom: 18px; }
.cta-inner p  { color: rgba(255,255,255,.62); margin-bottom: 40px; font-size: var(--text-xl); }
.cta-actions  { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ── Contact Form ── */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; gap: 48px; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
label {
  font-size: .87rem;
  font-weight: 600;
  color: var(--gray-700);
  font-family: var(--font-display);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--dark);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  width: 100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(76,175,71,.12);
}
.form-group textarea { resize: vertical; min-height: 140px; }

.contact-sidebar {
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  color: var(--white);
}
.contact-sidebar h3 { color: var(--white); margin-bottom: 8px; }
.contact-sidebar > p { color: rgba(255,255,255,.6); font-size: .9rem; margin-bottom: 28px; }
.contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.contact-info-icon {
  width: 40px;
  height: 40px;
  background: rgba(76,175,71,.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-accent);
  flex-shrink: 0;
}
.contact-info-text { font-size: .88rem; }
.contact-info-text strong { display: block; color: rgba(255,255,255,.85); margin-bottom: 2px; font-family: var(--font-display); }
.contact-info-text a,
.contact-info-text span { color: rgba(255,255,255,.55); }
.contact-info-text a:hover { color: var(--green-accent); }
.opening-hours {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
  margin-top: 8px;
}
.opening-hours h4 { color: rgba(255,255,255,.8); font-size: .88rem; margin-bottom: 12px; }
.oh-row {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}

/* ── Page Header (subpages) ── */
.page-header {
  background: var(--dark);
  padding: 116px 0 52px;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(76,175,71,.1) 0%, transparent 60%);
}
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .02;
  background-image:
    linear-gradient(var(--white) 1px, transparent 1px),
    linear-gradient(90deg, var(--white) 1px, transparent 1px);
  background-size: 56px 56px;
}
.page-header-inner { position: relative; z-index: 1; }
.page-header h1 { color: var(--white); margin-bottom: 12px; }
/* min-height reserviert immer 2 Zeilen (mobil 3), damit der Kopf auf allen
   Unterseiten gleich hoch ist, egal wie lang die Einleitung ausfällt. */
.page-header p  { color: rgba(255,255,255,.62); max-width: 680px; min-height: 3.5em; font-size: var(--text-xl); }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: .82rem;
  color: rgba(255,255,255,.38);
}
.breadcrumb a { color: rgba(255,255,255,.5); transition: color .2s; }
.breadcrumb a:hover { color: var(--green-accent); }
.breadcrumb-sep { color: rgba(255,255,255,.22); }
@media (max-width: 768px) {
  .page-header { padding: 100px 0 40px; }
  .breadcrumb { margin-bottom: 12px; }
  .page-header h1 { margin-bottom: 10px; }
  .page-header p { font-size: var(--text-lg); min-height: 5.25em; }
}
@media (max-width: 480px) {
  .page-header h1 { font-size: 1.75rem; }
}

/* ── Team Grid ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px;
}
.team-card {
  text-align: center;
  padding: 36px 20px 28px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.team-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--green-accent);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--green-primary);
}
.team-card h4 { font-size: 1rem; margin-bottom: 4px; }
.team-role {
  font-size: .78rem;
  color: var(--green-primary);
  font-weight: 700;
  font-family: var(--font-display);
  margin-bottom: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.team-card p { font-size: var(--text-sm); color: var(--gray-500); }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--green-primary), rgba(76,175,71,.1));
}
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -33px; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-primary);
  border: 2.5px solid var(--white);
  box-shadow: 0 0 0 3px rgba(76,175,71,.2);
}
.timeline-year {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  color: var(--green-primary);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.timeline-item h4 { font-size: 1rem; margin-bottom: 5px; }
.timeline-item p  { font-size: var(--text-sm); color: var(--gray-500); margin: 0; }

/* ── Blog Detail ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

/* ── Highlight strip ── */
.highlight-strip {
  background: var(--green-light);
  border-left: 4px solid var(--green-primary);
  padding: 20px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 32px 0;
}
.highlight-strip p { color: var(--gray-700); margin: 0; font-size: .95rem; }

/* ── Footer ── */
.site-footer {
  position: relative;
  background: var(--dark);
  color: rgba(255,255,255,.6);
  padding: 112px 0 0;
}

/* ── Geschwungener oberer Footer-Abschluss ──
   Angelehnt an den Briefkopf: ein dunkler Bogen zieht die Footer-Kante nach
   oben, darauf reitet ein schmales gruenes Band als Akzent.
   Die Kurve liegt oberhalb des Footers und ueberlappt den vorherigen
   Abschnitt. Wo darueber eine gleichfarbige .cta-section steht, traegt das
   gruene Band die Form - deshalb ist es hier das fuehrende Element. */
.footer-curve {
  position: absolute;
  top: -72px;
  left: 0;
  right: 0;
  height: 72px;
  pointer-events: none;
  line-height: 0;
  z-index: 1;
}
.footer-curve svg {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-curve .curve-base   { fill: var(--dark); }
.footer-curve .curve-accent { fill: url(#footerCurveGradient); }
.footer-curve .curve-stop-a { stop-color: var(--green-dark); }
.footer-curve .curve-stop-b { stop-color: var(--green-primary); }

@media (max-width: 768px) {
  .footer-curve { top: -44px; height: 44px; }
}

/* Heller Abschnitt direkt ueber dem Footer (Referenzen, Anfrage, Impressum):
   Die Kurve ragt 72 px (mobil 44 px) in ihn hinein, vom normalen Innenabstand
   blieben sonst nur 16 bis 20 px bis zur Kurve. Gleicher Abstand nach unten
   wie beim .cta-section, damit die Luft zur Kurve ueberall gleich wirkt. */
.section:has(+ .site-footer) { padding-bottom: 128px; }

@media (max-width: 768px) {
  .section:has(+ .site-footer) { padding-bottom: 88px; }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 100px;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-seal-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) { .footer-seal-col { display: none; } }

.footer-brand > p {
  color: rgba(255,255,255,.48);
  font-size: var(--text-sm);
  margin-top: 20px;
  max-width: 280px;
  line-height: 1.7;
}
.footer-col h4 {
  color: rgba(255,255,255,.9);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: var(--font-display);
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  color: rgba(255,255,255,.48);
  font-size: .88rem;
  transition: color .2s;
}
.footer-col ul li a:hover { color: var(--green-accent); }
.footer-ci { display: flex; flex-direction: column; gap: 12px; }
.footer-ci-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.footer-ci-item svg, .footer-ci-item .icon { color: var(--green-accent); flex-shrink: 0; margin-top: 2px; }
.footer-ci-item p,
.footer-ci-item a {
  color: rgba(255,255,255,.48);
  font-size: var(--text-sm);
  margin: 0;
  line-height: 1.55;
}
.footer-ci-item a:hover { color: var(--green-accent); }

.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.28); margin: 0; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a {
  font-size: .8rem;
  color: rgba(255,255,255,.28);
  transition: color .2s;
}
.footer-bottom-links a:hover { color: var(--green-accent); }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }
.reveal-d5 { transition-delay: .5s; }

/* ── Placeholder image gradients ── */
.img-hero      { background: linear-gradient(140deg, #2B2B29 0%, #3A3A37 50%, #253324 100%); }
.img-steildach { background: linear-gradient(135deg, #2B2B29 0%, #3A3A37 100%); }
.img-flachdach { background: linear-gradient(135deg, #3A3A37 0%, #484845 100%); }
.img-fassade   { background: linear-gradient(135deg, #3A3A38 0%, #555552 100%); }
.img-spengler  { background: linear-gradient(135deg, #474743 0%, #595954 100%); }
.img-sanierung { background: linear-gradient(135deg, #3A2820 0%, #5A3E30 100%); }
.img-pv        { background: linear-gradient(150deg, #1C2535 0%, #1a3a6e 100%); }
.img-fenster   { background: linear-gradient(135deg, #253323 0%, #2E5030 100%); }
.img-daemmung  { background: linear-gradient(135deg, #5A3500 0%, #844E10 100%); }
.img-holzbau   { background: linear-gradient(135deg, #6B4A21 0%, #A9762F 100%); }
.img-company   { background: linear-gradient(140deg, #253323 0%, #2A5238 50%, #3A6B22 100%); }
.img-ref1      { background: linear-gradient(135deg, #2B2B29 0%, #3D3D3A 100%); }
.img-ref2      { background: linear-gradient(135deg, #353532 0%, #484845 100%); }
.img-ref3      { background: linear-gradient(135deg, #253323 0%, #2C5030 100%); }
.img-ref4      { background: linear-gradient(135deg, #3A2820 0%, #5A3E30 100%); }
.img-ref5      { background: linear-gradient(135deg, #1C2535 0%, #1A4070 100%); }
.img-ref6      { background: linear-gradient(135deg, #333331 0%, #474743 100%); }
.img-ref7      { background: linear-gradient(135deg, #2A3038 0%, #46525E 100%); }
.img-ref8      { background: linear-gradient(135deg, #3A3128 0%, #5B4B3A 100%); }
.img-news1     { background: linear-gradient(135deg, #253323 0%, #305232 100%); }
.img-news2     { background: linear-gradient(135deg, #2B2B29 0%, #3A3A37 100%); }
.img-news3     { background: linear-gradient(135deg, #3A2820 0%, #5A3A2A 100%); }
.img-team      { background: linear-gradient(135deg, #253323 0%, #2E5238 100%); }

/* placeholder icon inside img-bg */
.placeholder-icon {
  color: rgba(255,255,255,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  user-select: none;
}
/* Nur die Beschriftung, nicht das Icon selbst - sonst wuerde die
   Display-Schrift die Icon-Font ueberschreiben und der Icon-Name
   erschiene als Text. */
.placeholder-icon span:not(.icon) {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ── Utilities ── */
/* Nur fuer Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bg-light  { background: var(--light); }
.bg-white  { background: var(--white); }
.text-center { text-align: center; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

@media (max-width: 768px) {
  .section    { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: 16px; margin-bottom: 32px; }
}
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════════════════════
   NEUE BLÖCKE - Dreher Dach Erweiterung
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Mobile Nav → vollständig in @media (max-width: 900px) oben ── */

/* ── 2. Scroll-to-Top Button ── */
#scrollTopBtn {
  position: fixed;
  bottom: 32px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-primary);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s cubic-bezier(.25,.8,.25,1), transform .4s cubic-bezier(.25,.8,.25,1), background .2s;
  box-shadow: 0 4px 20px rgba(76,175,71,.35);
  pointer-events: none;
}
#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#scrollTopBtn:hover {
  background: var(--green-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(76,175,71,.45);
}

/* ── 3. Hero Text Rotation ── */
.hero-rotating-word {
  display: inline-block;
  font-style: normal;
  color: var(--green-accent);
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}
.hero-rotating-word.fade-out {
  opacity: 0;
  transform: translateY(10px);
}
.hero-rotating-word.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── 4. Process Timeline Section ── */
.process-section {
  background: var(--dark);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(76,175,71,.07) 0%, transparent 60%);
  pointer-events: none;
}
.process-section .section-header h2 { color: var(--white); }
.process-section .section-header p  { color: rgba(255,255,255,.55); }

.process-timeline-wrap {
  position: relative;
  max-width: 700px;
  margin: 64px auto 0;
  padding-left: 64px;
}
.process-line-track {
  position: absolute;
  left: 20px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
.process-line-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--green-accent), var(--green-primary));
  border-radius: 2px;
  transition: height .08s linear;
}
.process-step {
  position: relative;
  margin-bottom: 52px;
  opacity: .3;
  transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s ease;
}
.process-step:last-child { margin-bottom: 0; }
.process-step.active   { opacity: 1; transform: translateX(0); }

.process-step-dot {
  position: absolute;
  left: -52px;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 2.5px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  transition: background .4s, border-color .4s, color .4s, box-shadow .4s;
}
.process-step.active .process-step-dot {
  background: var(--green-primary);
  border-color: var(--green-accent);
  color: var(--white);
  box-shadow: 0 0 0 6px rgba(76,175,71,.18);
}
.process-step-num {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-accent);
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity .5s ease .1s;
}
.process-step.active .process-step-num { opacity: 1; }
.process-step h3 {
  color: var(--white);
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.process-step p {
  color: rgba(255,255,255,.5);
  font-size: var(--text-sm);
  line-height: 1.75;
  max-width: 520px;
  margin: 0;
}
.process-cta {
  text-align: center;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,.1);
  position: relative;
  z-index: 1;
}
.process-cta p {
  color: rgba(255,255,255,.55);
  font-size: var(--text-xl);
  margin-bottom: 24px;
}

/* ── 5. Zitat-Sektion ── */
.quote-section {
  background: var(--light);
  padding: 92px 0;
}
.quote-inner {
  max-width: 840px;
  margin: 0 auto;
  position: relative;
  padding-left: 24px;
}
.quote-mark-big {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14rem;
  line-height: .7;
  color: var(--green-accent);
  opacity: .14;
  position: absolute;
  left: -16px;
  top: -28px;
  font-style: normal;
  user-select: none;
  pointer-events: none;
  font-weight: 400;
}
.quote-accent-line {
  width: 44px;
  height: 3px;
  background: var(--green-accent);
  border-radius: 2px;
  margin-bottom: 32px;
}
.quote-text-body {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.quote-author-row {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.quote-avatar-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--green-accent);
  background: var(--green-light);
}
.quote-author-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}
.quote-author-text span {
  font-size: .84rem;
  color: var(--gray-500);
}

/* ── 6. Qualitäts-Sektion (Editorial / Parallax-Icons) ── */
.quality-section {
  background: var(--dark);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.quality-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 10% 80%, rgba(76,175,71,.07) 0%, transparent 55%);
  pointer-events: none;
}
.quality-section .section-header h2 { color: var(--white); }
.quality-section .section-header p  { color: rgba(255,255,255,.55); }

.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 64px;
}
@media (max-width: 900px) { .quality-grid { grid-template-columns: 1fr; gap: 52px; } }

.quality-args {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 48px;
}
@media (max-width: 520px) { .quality-args { grid-template-columns: 1fr; gap: 32px; } }

.quality-arg-icon {
  width: 48px;
  height: 48px;
  background: rgba(76,175,71,.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-accent);
  margin-bottom: 16px;
  transition: transform .3s ease;
}
.quality-arg:hover .quality-arg-icon { transform: translateY(-4px); }
.quality-arg h4 {
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.quality-arg p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.48);
  margin: 0;
  line-height: 1.7;
}

/* Parallax-Spalte rechts */
.quality-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .quality-visual { display: none; } }

.quality-img-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  will-change: transform;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.quality-img-card:nth-child(2) { margin-top: 48px; }
.quality-img-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}
.quality-img-card-fallback {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.2);
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .1em;
}

/* ── 7. Team Cards v2 ── */
.team-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 28px;
}
.team-card-v2 {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.team-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.team-card-v2-img {
  height: 260px;
  overflow: hidden;
  position: relative;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* z-index legt ein vorhandenes Foto ueber die Initialen. Fehlt die Datei,
   blendet onerror das img aus und die Initialen werden wieder sichtbar -
   der Platzhalter erscheint also nur dort, wo wirklich kein Bild ist. */
.team-card-v2-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .45s ease;
}
.team-card-v2:hover .team-card-v2-img img { transform: scale(1.04); }
.team-card-v2-img .team-initials {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--green-primary);
  opacity: .35;
  position: absolute;
}
.team-card-v2-body { padding: 24px; }
.team-card-v2-body h4 { font-size: 1.12rem; margin-bottom: 4px; }
.team-card-v2-body .team-role { margin-bottom: 12px; font-size: .78rem; }
.team-card-v2-body > p { font-size: var(--text-sm); color: var(--gray-500); margin-bottom: 6px; line-height: 1.65; }
.team-card-v2-resp {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-bottom: 14px;
}
.team-card-v2-resp strong {
  color: var(--gray-700);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.team-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.team-tag {
  background: var(--green-light);
  color: var(--green-dark);
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  font-family: var(--font-display);
  letter-spacing: .04em;
}

/* ── 8. Blog Expand/Collapse ── */
.post-expand {
  display: none;
  border-top: 1px solid var(--gray-200);
  margin-top: 18px;
  padding-top: 18px;
}
.post-expand.open { display: block; }
.post-expand p {
  font-size: var(--text-md);
  color: var(--gray-500);
  line-height: 1.75;
  margin-bottom: 12px;
}
.post-expand p:last-child { margin-bottom: 0; }
.post-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--green-primary);
  font-family: var(--font-display);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .2s;
}
.post-toggle:hover { color: var(--green-dark); }
.toggle-arrow {
  display: inline-block;
  transition: transform .3s ease;
  font-style: normal;
}
.post-toggle.open .toggle-arrow { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════
   BILDERGALERIE - eine Komponente fuer Leistungen, Referenzen
   und Blogbeitraege. Markup wird von js/gallery.js erzeugt,
   Bilddaten stehen in js/galleries.js.
   ══════════════════════════════════════════════════════════════ */

.gallery { position: relative; }

/* ── Vorschau (Image Carousel) ── */
.gallery-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  aspect-ratio: 4 / 3;
}
.gallery[data-ratio="16-10"] .gallery-stage { aspect-ratio: 16 / 10; }
.gallery[data-ratio="16-9"]  .gallery-stage { aspect-ratio: 16 / 9; }
.gallery[data-ratio="1-1"]   .gallery-stage { aspect-ratio: 1 / 1; }
.gallery[data-ratio="3-2"]   .gallery-stage { aspect-ratio: 3 / 2; }

/* Klickbare Bildflaeche - oeffnet die Lightbox */
.gallery-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  display: block;
}
.gallery-viewport:focus-visible {
  outline: 3px solid var(--green-primary);
  outline-offset: -3px;
}

/* data-lightbox="off" - reine Bilddarstellung, nicht anklickbar */
.gallery-viewport.is-static { cursor: default; }

.gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.gallery-slide.active { opacity: 1; }
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* schneidet zu, verzerrt nie */
  display: block;
}

/* Zoom-/Expand-Button, erscheint beim Hover ueber das Vorschaubild */
.gallery-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.55);
  color: var(--white);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.gallery:hover .gallery-expand,
.gallery:focus-within .gallery-expand { opacity: 1; transform: translateY(0); }
.gallery-expand:hover { background: rgba(0,0,0,.82); }
@media (hover: none) {
  .gallery-expand { opacity: 1; transform: none; }
}

/* Pagination Dots am unteren Rand des Vorschaubildes */
.gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.gallery-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  cursor: pointer;
  transition: background .25s ease, width .25s ease, transform .2s ease;
}
.gallery-dot:hover { background: rgba(255,255,255,.85); transform: scale(1.15); }
.gallery-dot.active {
  width: 26px;
  border-radius: 5px;
  background: var(--green-primary);
}
.gallery-dot:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Platzhalter, wenn fuer einen Eintrag (noch) kein Bild hinterlegt ist.
   Es werden bewusst keinerlei Galerie-Controls gerendert. */
.gallery-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,.22);
}
.gallery-placeholder span:not(.icon) {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Lightbox Gallery ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.93);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay { overscroll-behavior: contain; }

/* Gestenflaeche fuer Zoom, Pan und Wischen. Fuellt den Innenbereich des
   Overlays, damit auch ein Wisch neben dem Bild zaehlt und ein gezoomtes
   Bild bis an den Viewport-Rand laufen kann. touch-action:none schaltet
   native Gesten ab (Pinch, Doppeltipp-Zoom, Pull-to-Refresh) und haelt
   damit die Pointer-Capture waehrend der Geste am Leben.
   Bewusst ohne z-index und ohne transform: sonst entstuende ein Stacking
   Context und Close/Nav/Dots (position:fixed; z-index:3) lägen darunter. */
.lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.lightbox-img {
  max-width: min(94vw, 2000px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;   /* volles Originalseitenverhaeltnis */
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  transform-origin: 50% 50%;
  will-change: transform;
  transition: none;      /* waehrend der Geste kein Nachlauf */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.lightbox-img.lb-anim { transition: transform .2s cubic-bezier(.22,1,.36,1); }
.lightbox-stage.is-zoomed  .lightbox-img { cursor: grab; }
.lightbox-stage.is-panning .lightbox-img { cursor: grabbing; }

/* Dots stoeren im gezoomten Zustand */
.lightbox-dots { transition: opacity .2s ease; }
.lightbox-overlay.is-zoomed .lightbox-dots { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lightbox-img.lb-anim { transition: none; }
}
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.2);
}
.lightbox-close:hover { background: rgba(255,255,255,.25); }

/* Previous- / Next-Controls */
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.2);
}
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-nav:active { transform: translateY(-50%) scale(.94); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* Pagination Dots am unteren Rand der Lightbox */
.lightbox-dots {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  flex-wrap: wrap;
}
.lightbox-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .25s ease, width .25s ease, transform .2s ease;
}
.lightbox-dot:hover { background: rgba(255,255,255,.7); transform: scale(1.15); }
.lightbox-dot.active {
  width: 28px;
  border-radius: 5px;
  background: var(--green-primary);
}
.lightbox-dot:focus-visible,
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible {
  outline: 2px solid var(--green-primary);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .lightbox-overlay { padding: 8px; }
  .lightbox-img { max-width: 97vw; max-height: 80vh; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; width: 44px; height: 44px; }
}

/* ── 10. Bild-Darstellung (lokale Pfade) ── */
.img-bg.has-photo { background-image: none !important; }
.img-bg.has-photo .placeholder-icon { display: none; }

/* Das Foto liegt ueber dem Farbverlauf-Platzhalter. Fehlt die Datei,
   blendet onerror das img aus und der Farbverlauf wird wieder sichtbar. */
.service-card-img .real-img {
  z-index: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.service-card:hover .real-img { transform: scale(1.05); }

/* Company / Über uns Bild */
.company-img-wrap .real-img,
.about-img-wrap .real-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* News-Karten Bilder */
.news-card-img .real-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.news-card:hover .real-img { transform: scale(1.05); }

/* Leistungsseite Bilder */
.leistung-img .real-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Post-Bild im Blog */
.post-img .real-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.post-card:hover .real-img { transform: scale(1.05); }

/* ── 12. Google Maps Embed ── */
.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,.08);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
}

/* ── 13. Impressum / Datenschutz Seiten-Styles ── */
.legal-section { padding: 80px 0; }
.legal-section + .legal-section {
  border-top: 2px solid var(--gray-200);
}
.legal-content h2 { margin-bottom: 24px; }
.legal-content h3 { font-size: 1.15rem; margin: 32px 0 10px; }
.legal-content p  { margin-bottom: 14px; font-size: .95rem; }
.legal-content ul { margin: 12px 0 14px 24px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.legal-content ul li { font-size: .93rem; color: var(--gray-600); }
.legal-content a   { color: var(--green-primary); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   REFINEMENTS - Round 2
   ═══════════════════════════════════════════════════════════════ */

/* 1. Custom Cursor - Dach/Haus-Icon */
html, body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22'%3E%3Cpath d='M14 0L0 12h4v10h20V12h4L14 0z' fill='%234caf47' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 0, auto;
}
a, button, .btn, input, select, textarea, label, [role="button"],
.filter-btn, .post-toggle, .lightbox-close, .lightbox-trigger-icon,
.nav-toggle, .category-item, .tag, .recent-post, .service-card,
.ref-card, .ref-full-card, .news-card, .team-card-v2, .post-card {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22'%3E%3Cpath d='M14 0L0 12h4v10h20V12h4L14 0z' fill='%234caf47' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 0, pointer;
}

/* 2. Page Header - Title entry animation */
@keyframes pageHeaderIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-header-inner .breadcrumb {
  animation: pageHeaderIn .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-header-inner h1 {
  animation: pageHeaderIn .7s cubic-bezier(0.22, 1, 0.36, 1) .12s both;
}
.page-header-inner p {
  animation: pageHeaderIn .7s cubic-bezier(0.22, 1, 0.36, 1) .27s both;
}

/* 3. Mobile Hero - Prevent rotating word overflow */
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(1.45rem, 7vw, 1.95rem); line-height: 1.25; }
}

/* 4. Stats - Gestapelt auf kleinem Mobile */
@media (max-width: 420px) {
  .stat-number { font-size: clamp(2rem, 9vw, 2.6rem); }
  .stat-label  { font-size: .78rem; }
}

/* 5. Process Timeline - Hide numbers from dots */
.process-step-dot {
  font-size: 0 !important;
  color: transparent !important;
}

/* 6. Mobile Navbar → vollständig in @media (max-width: 900px) oben definiert */

/* 7. Footer - Center on mobile */
@media (max-width: 520px) {
  .footer-brand, .footer-col { text-align: center; }
  .footer-brand > p { margin-left: auto; margin-right: auto; }
  .footer-col ul  { align-items: center; }
  .footer-ci      { align-items: center; }
  .footer-ci-item { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .footer-ci-item svg, .footer-ci-item .icon { margin-top: 0 !important; }
  .footer-bottom  { flex-direction: column; align-items: center; text-align: center; }
  .footer-bottom-links { justify-content: center; }
  .site-footer .nav-logo { justify-content: center; }
}

/* 8. Leistungen - Hide service overview on mobile */
@media (max-width: 768px) {
  .leistungen-overview-mobile-hide { display: none; }
}

/* 9. Quality img fallback */
.quality-img-fallback {
  width: 100%; height: 280px;
  border-radius: var(--radius-md);
  display: none; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(76,175,71,.2) 0%, rgba(43,43,41,.7) 100%);
  color: rgba(255,255,255,.45);
  font-size: 3rem;
}

/* 10. Footer Siegel */
.footer-seal-img {
  width: 88px;
  height: auto;
  opacity: 0.75;
  transition: opacity 0.25s ease;
  display: block;
}
.footer-seal-img:hover { opacity: 1; }

/* 11. Mobile Hero - Eyebrow entfaellt, dafuer mehr Luft zur Navbar */
@media (max-width: 640px) {
  .hero-eyebrow { display: none; }
  .hero-content { padding-top: 132px; }
}

/* 12. CTA-Band und Footer - auf Mobile gedeckelter Abstand */
@media (max-width: 768px) {
  .cta-section { padding: 64px 0 88px; }
  .site-footer { padding-top: 80px; }
}

/* 13. Vollflaechig klickbare Karten ("Stretched Link")
   Der vorhandene "Mehr erfahren"-Link spannt ein Pseudo-Element ueber die
   ganze Karte. So bleibt es genau ein echter Link pro Karte - ein <a> um den
   <article> zu legen wuerde Ueberschrift und Text in den Linktext ziehen.
   .real-img liegt auf z-index 1 und damit unter der Klickflaeche. */
.service-card,
.news-card { position: relative; }

.service-card-link::after,
.news-more::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 14. Ansprungziele - Abstand zur fixen Navbar (74 px + Luft) */
.leistung-detail,
.blog-teaser { scroll-margin-top: 100px; }

/* 15. Kontaktformular - Statusmeldung, Feldfehler, Spamschutz */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--gray-300);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: var(--text-md);
  line-height: 1.55;
}
.form-status[hidden] { display: none; }   /* schlaegt display:flex */
.form-status .icon   { flex-shrink: 0; margin-top: 1px; }
.form-status:focus   { outline: 2px solid var(--green-primary); outline-offset: 2px; }

.form-status.is-success {
  border-color: var(--green-primary);
  background: var(--green-light);
  color: var(--green-dark);
}
.form-status.is-success .icon { color: var(--green-primary); }

.form-status.is-error {
  border-color: #C0392B;
  background: #FDECEA;
  color: #8F2A1E;
}
.form-status.is-error .icon { color: #C0392B; }

/* :not([type=checkbox]) schuetzt die Datenschutz-Checkbox vor dem Rahmen */
.form-group.has-error input:not([type="checkbox"]),
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #C0392B;
  background: #FFFAFA;
}
.form-group.has-error input:not([type="checkbox"]):focus,
.form-group.has-error select:focus,
.form-group.has-error textarea:focus {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,.14);
}
.form-group.has-error .checkbox-item input[type="checkbox"] {
  outline: 2px solid #C0392B;
  outline-offset: 2px;
}
.form-error-msg {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  color: #C0392B;
}

/* Honeypot - bewusst kein display:none, darauf pruefen Bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit { width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }
.btn:disabled,
.btn.is-loading {
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.btn.is-loading {
  background: var(--gray-500);
  border-color: var(--gray-500);
  color: var(--white);
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn.is-loading .icon { animation: btnSpin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading .icon { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TEAM-GRUPPENBILD (loest die Einzelkarten .team-card-v2 ab)
   Die alten .team-grid-v2 / .team-card-v2-Regeln bleiben vorerst
   stehen, falls wieder auf Einzelvorstellungen umgestellt wird.
   ═══════════════════════════════════════════════════════════════════ */
.team-group {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.team-group-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.team-group-img .img-bg {
  aspect-ratio: 16 / 9;
  position: relative;
}

.team-group-img .real-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-group-text {
  margin-top: 36px;
}

.team-group-text p {
  font-size: var(--text-md);
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 16px;
}

.team-group-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .team-group-img .img-bg {
    aspect-ratio: 4 / 3;
  }

  .team-group-text {
    margin-top: 28px;
    text-align: left;
  }
}