/* =========================================================
   IBZ – Ingenieurbüro Zechner
   Design System / Stylesheet
   ========================================================= */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
}

:root {
  /* Brand colors */
  --primary: #020617;
  --accent: #1dde9f;
  --accent-hover: #15b882;
  --accent-text: #0d7a56;   /* Grün für Text auf Hell – erfüllt WCAG AA */
  --bg-main: #ffffff;
  --bg-alt: #f8fafc;
  --text-main: #0f172a;
  --text-light: #475569;
  --border: #e2e8f0;

  /* Dark-surface variants (footer, CTA band, hero overlays) */
  --text-inverse: #ffffff;
  --text-inverse-muted: #94a3b8;
  --border-dark: rgba(255, 255, 255, 0.12);
  --bg-dark-alt: #0b1220;

  /* Radius */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;

  /* Shadow */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.08);

  /* Motion */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Type */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --fs-h2: clamp(2rem, 2.8vw + 1rem, 3.25rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --fs-display: clamp(2.5rem, 4.5vw + 1rem, 5rem);
  --tracking-tight: -0.035em;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 84px;

  /* Marquee */
  --marquee-duration: 32s;
}

/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  font-size: 16px;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

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

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--primary);
}

h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
h4 { font-size: 1.125rem; letter-spacing: -0.01em; }

p {
  color: var(--text-light);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-light);
  line-height: 1.55;
}

strong { color: var(--text-main); }

.text-inverse,
.text-inverse p,
.text-inverse h1,
.text-inverse h2,
.text-inverse h3 {
  color: var(--text-inverse);
}

.text-inverse .lead,
.text-inverse p {
  color: var(--text-inverse-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
  border-radius: 2px;
}

.text-inverse .eyebrow {
  color: var(--accent);
}

.section-head {
  max-width: 46rem;
  margin-bottom: 3rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Editorial numbered section marker, e.g. "01" above a heading */
.section-marker {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.section-marker .num {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 500;
  color: #808c9d;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.section-marker .eyebrow {
  margin-bottom: 0;
}

.text-inverse .section-marker .num {
  color: var(--border-dark);
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2.5px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--primary); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: var(--transition);
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--accent);
  color: var(--primary);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-dark {
  background: var(--primary);
  color: #fff;
}

.btn-dark:hover {
  background: #131c31;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.text-inverse .btn-outline {
  border-color: var(--border-dark);
  color: #fff;
}

.text-inverse .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-block { width: 100%; }

.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: var(--transition);
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 13px;
}

.brand-name {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1;
}

@media (max-width: 560px) {
  .brand-mark { width: 44px; height: 44px; border-radius: 11px; }
  .brand-name { font-size: 1.3rem; }
}

.brand-logo {
  height: 34px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-list a,
.nav-dropdown-toggle {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
  position: relative;
  padding: 0.4rem 0;
  transition: var(--transition);
}

.nav-list > li > a:not(.btn)::before,
.nav-dropdown-toggle::before {
  content: "+";
  display: inline-block;
  margin-right: 0.4em;
  color: var(--accent-text);
  font-weight: 700;
}

.nav-list a:hover,
.nav-list a[aria-current="page"],
.nav-dropdown-toggle:hover,
.has-dropdown[data-open="true"] .nav-dropdown-toggle {
  color: var(--primary);
}

.nav .btn {
  color: inherit;
}

.nav .btn-primary {
  color: var(--primary);
}

.nav .btn-dark,
.nav .btn-outline {
  color: #fff;
}

.nav-list a[aria-current="page"]::after,
.nav-dropdown-toggle.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Dropdown (Leistungen) */
.has-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
}

.nav-dropdown-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.has-dropdown[data-open="true"] .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: grid;
  gap: 0.15rem;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 16rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
  z-index: 50;
}

.has-dropdown[data-open="true"] .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.dropdown-menu a span {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-light);
  margin-top: 0.1rem;
}

.dropdown-menu a:hover {
  background: var(--bg-alt);
  color: var(--primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: var(--transition);
  margin-inline: auto;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* WICHTIG - hier nichts zurückdrehen:
     Ein backdrop-filter macht das Element zum Bezugsrahmen für
     position:fixed. Der Kopfbereich ist nur 84 px hoch – das
     aufgeklappte Menü würde dadurch auf diese Höhe zusammenschrumpfen,
     obwohl sein Inhalt rund 330 px braucht. Sichtbar wäre nur der
     erste Menüpunkt, alles darunter abgeschnitten.
     Auf schmalen Bildschirmen deshalb abschalten. Der Hintergrund
     muss dann deckend sein, weil ohne Weichzeichner sonst der
     Seiteninhalt durchscheint. */
  .site-header {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem var(--gutter) 2.5rem;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-slow);
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid var(--border);
  }

  .nav-list a {
    display: block;
    padding: 1.1rem 0.25rem;
    font-size: 1.05rem;
  }

  .nav .header-cta {
    margin-top: 1.5rem;
  }

  .header-actions .header-cta.desktop-only {
    display: none;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: var(--bg-alt);
    padding: 0;
    margin: 0 0 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .has-dropdown[data-open="true"] .dropdown-menu {
    max-height: 30rem;
    /* Muss hier stehen: Die Desktop-Regel für den geöffneten Zustand
       zentriert das Menü mit translateX(-50%) unter dem Schalter. Sie
       hat höhere Spezifität als das .dropdown-menu weiter oben in
       diesem Media-Block und würde das aufgeklappte Menü sonst um die
       halbe Breite nach links aus dem Bild schieben. */
    transform: none;
  }

  .has-dropdown[data-open="true"] {
    padding-bottom: 0.5rem;
  }

  .nav-dropdown-toggle {
    width: 100%;
    /* Nicht space-between: Der Schalter enthaelt drei Teile - das "+"
       aus ::before, den Text und den Pfeil. space-between haette sie
       gleichmaessig verteilt und "Leistungen" dadurch in die Mitte
       gerueckt, waehrend "Ueber mich" und "Kontakt" links stehen.
       Stattdessen alles nach links, nur der Pfeil per auto-Rand rechts. */
    justify-content: flex-start;
    padding: 1.1rem 0.25rem;
  }

  .nav-dropdown-toggle svg {
    margin-left: auto;
  }

  .dropdown-menu a {
    /* display/flex-direction müssen hier wiederholt werden: Das weiter
       oben stehende ".nav-list a { display: block }" hat dieselbe
       Spezifität, steht aber später als die Grundregel für
       .dropdown-menu a - ohne diese Zeilen würden Leistungsname und
       Untertitel in einer Zeile aneinanderkleben. */
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem;
    border-radius: 0;
  }
}

@media (min-width: 901px) {
  .nav .mobile-only { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--bg-alt) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(2,6,23,0.035) 1px, transparent 1px),
    linear-gradient(rgba(2,6,23,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
}

.hero h1 {
  max-width: 54rem;
  margin-bottom: 1.75rem;
}

.hero .lead {
  max-width: 36rem;
  margin-bottom: 2.5rem;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.75rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.hero-stat strong {
  display: block;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: var(--tracking-tight);
}

.hero-stat span {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ---------- Hero: headline lines + cycling image band ---------- */
.hero-line {
  display: block;
}

.hero-media-row {
  display: flex;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin: clamp(0.5rem, 1.4vw, 1.1rem) 0;
}

.hero-media {
  display: block;
  position: relative;
  width: clamp(5rem, 13vw, 12rem);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-alt);
  flex-shrink: 0;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-media img.is-current {
  opacity: 1;
}

/* Hero facts row (label over value, like the reference) */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.hero-fact .label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-bottom: 0.35rem;
}

.hero-fact .value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.015em;
}

/* ---------- Certification row (replaces "worked with") ---------- */
.cert-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 7vw, 5.5rem);
}

.cert-row img {
  /* max-height statt height: Mit fixer Hoehe und der globalen Regel
     img { max-width: 100% } wird ein breites Logo auf schmalen
     Bildschirmen gestaucht - das Siegel "Ingenieurbueros" (560x116)
     lief so bei 375 px Breite 13 % zu flach. Mit max-height skaliert
     es stattdessen proportional herunter. */
  max-height: clamp(80px, 9vw, 110px);
  height: auto;
  width: auto;
  object-fit: contain;
}

.cert-label {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 2.5rem;
}

/* ---------- Work rows (services with images) ---------- */
.work-list {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.work-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
  color: inherit;
}

.work-row:first-child { border-top: none; padding-top: 0; }

@media (max-width: 820px) {
  .work-row { grid-template-columns: 1fr; }
  .work-row .work-media { order: -1; }
}

.work-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
}

.work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-row:hover .work-media img,
.work-row:focus-visible .work-media img {
  transform: scale(1.04);
}

.work-num {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1rem;
  display: block;
}

.work-row h3 {
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  margin-bottom: 0.9rem;
}

.work-row p { margin-bottom: 1.25rem; }

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.work-tags span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
}

.work-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}

.work-cta svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.work-row:hover .work-cta svg { transform: translateX(4px); }
.work-row:hover .work-cta { color: var(--accent-text); }

/* ---------- Simple single-bar footer ---------- */
.footer-simple {
  border-top: 1px solid var(--border);
  padding-block: 2rem;
  background: var(--bg-main);
}

.footer-simple-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-size: 0.85rem;
  color: var(--text-light);
}

.footer-simple-inner p { font-size: inherit; margin: 0; }

.footer-simple-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.footer-simple-links a {
  font-weight: 600;
  color: var(--text-light);
  transition: var(--transition);
}

.footer-simple-links a:hover { color: var(--primary); }

/* ---------- Trust / badge strip ---------- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  padding-block: 2.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-strip img {
  height: 56px;
  width: auto;
  filter: grayscale(15%);
}

.trust-strip-text {
  font-size: 0.85rem;
  color: var(--text-light);
  max-width: 15rem;
}

/* ---------- Marquee (credentials strip) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 1.75rem;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.text-inverse .marquee {
  border-color: var(--border-dark);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}

.marquee-item img {
  height: 34px;
  width: auto;
}

.marquee-item .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  transition: var(--transition);
  height: 100%;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(29, 222, 159, 0.45);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(29, 222, 159, 0.12);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

.card h3 {
  margin-bottom: 0.65rem;
  font-size: 1.2rem;
}

.card p {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.card-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.card-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.card:hover .card-link svg {
  transform: translateX(3px);
}

.service-card--featured {
  background: var(--primary);
  border-color: var(--primary);
}

.service-card--featured h3,
.service-card--featured p {
  color: #fff;
}
.service-card--featured p { color: var(--text-inverse-muted); }

.service-card--featured .card-icon {
  background: rgba(29, 222, 159, 0.18);
  color: var(--accent);
}

.service-card--featured .card-link { color: var(--accent); }

/* Value / philosophy cards */
.value-card {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

.value-card:first-child { border-top: none; }

.value-card .num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  letter-spacing: 0.06em;
}

/* ---------- Stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 760px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

.stat {
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--bg-alt);
  text-align: left;
}

.stat strong {
  display: block;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat span {
  font-size: 0.875rem;
  color: var(--text-light);
}

/* ---------- Process / steps ---------- */
.process-list {
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
}

.process-step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.process-step::before {
  content: counter(step, decimal-leading-zero);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.process-step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.process-step p { font-size: 0.925rem; margin: 0; }

/* ---------- About / portrait ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}

.portrait-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.portrait-frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.quote-block {
  border-left: 3px solid var(--accent);
  padding-left: 1.5rem;
  margin-block: 1.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary);
  font-style: normal;
}

/* ---------- FAQ ---------- */
.faq-list {
  display: grid;
  gap: 0.9rem;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 1.5rem;
  transition: var(--transition);
}

.faq-item[open] {
  border-color: rgba(29, 222, 159, 0.45);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .icon-plus {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-alt);
  position: relative;
  transition: var(--transition);
}

.faq-item summary .icon-plus::before,
.faq-item summary .icon-plus::after {
  content: "";
  position: absolute;
  background: var(--primary);
  border-radius: 2px;
  transition: var(--transition);
}

.faq-item summary .icon-plus::before {
  left: 6px; right: 6px; top: 11px; height: 2px;
}
.faq-item summary .icon-plus::after {
  top: 6px; bottom: 6px; left: 11px; width: 2px;
}

.faq-item[open] summary .icon-plus {
  background: var(--accent);
}

.faq-item[open] summary .icon-plus::after {
  transform: scaleY(0);
}

.faq-item .faq-answer {
  padding-bottom: 1.5rem;
  font-size: 0.95rem;
  max-width: 42rem;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 20%, rgba(29,222,159,0.25), transparent 55%);
  pointer-events: none;
}

.cta-band-text { position: relative; max-width: 34rem; }
.cta-band-actions { position: relative; display: flex; gap: 1rem; flex-wrap: wrap; }

.cta-band h2 { color: #fff; margin-bottom: 0.75rem; }
.cta-band p { color: var(--text-inverse-muted); }

/* ---------- Statement band (full-bleed editorial moment) ---------- */
.statement-band {
  background: var(--primary);
  color: #fff;
  padding-block: clamp(5rem, 12vw, 9rem);
  position: relative;
  overflow: hidden;
}

.statement-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 20%, rgba(29,222,159,0.18), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(29,222,159,0.12), transparent 45%);
  pointer-events: none;
}

.statement-band .container {
  position: relative;
}

.statement-band p.statement {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  max-width: 58rem;
  color: #fff;
}

.statement-band p.statement .muted-inline {
  color: var(--text-inverse-muted);
}

.statement-band p.statement .accent-inline {
  color: var(--accent);
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-main);
}

.form-group .optional {
  font-weight: 400;
  color: var(--text-light);
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: var(--transition);
  font-size: 0.975rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(29, 222, 159, 0.15);
}

.form-group textarea { resize: vertical; min-height: 140px; }

.form-group input:invalid[data-touched="true"],
.form-group textarea:invalid[data-touched="true"] {
  border-color: #e11d48;
}

.field-hint {
  font-size: 0.8rem;
  color: #e11d48;
  min-height: 1em;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--text-light);
}

.form-status {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  display: none;
}

.form-status.is-visible { display: block; }
.form-status.success { background: rgba(29,222,159,0.14); color: #0d7a56; }
.form-status.error { background: rgba(225,29,72,0.1); color: #be123c; }

/* Bedingte Zusatzfelder (z. B. Energieausweis) */
[hidden] { display: none !important; }

.conditional-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  animation: conditional-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes conditional-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .conditional-block { animation: none; }
}

.conditional-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

.radio-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.radio-group legend {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-main);
  padding: 0;
}

.radio-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: #fff;
  cursor: pointer;
  font-size: 0.925rem;
  transition: var(--transition);
}

.radio-option:hover { border-color: var(--accent); }

.radio-option input {
  accent-color: var(--accent-hover);
  margin: 0;
}

.radio-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(29, 222, 159, 0.12);
  font-weight: 600;
}

/* honeypot */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Contact / map ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
}

@media (max-width: 950px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.nap-list {
  display: grid;
  margin-top: 0.5rem;
}

.nap-item {
  padding-block: 1.35rem;
  border-top: 1px solid var(--border);
}

.nap-item:first-child {
  border-top: none;
  padding-top: 0;
}

.nap-item h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}

.nap-item p, .nap-item a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.nap-item a:hover { color: var(--accent-text); }

.map-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 340px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  position: absolute;
  inset: 0;
}

.map-consent {
  position: relative;
  text-align: center;
  padding: 2.5rem 1.5rem;
  max-width: 22rem;
}

.map-consent h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.map-consent p { font-size: 0.875rem; margin-bottom: 1.25rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--primary);
  color: var(--text-inverse-muted);
  padding-block: 4.5rem 2rem;
}

.site-footer p {
  color: var(--text-inverse-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

.footer-brand .brand-logo { height: 40px; margin-bottom: 1.25rem; }
.footer-brand p { max-width: 22rem; font-size: 0.9rem; }

.footer-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-badges img { height: 44px; width: auto; }

.footer-heading {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.footer-links { display: grid; gap: 0.8rem; }
.footer-links a { font-size: 0.9rem; transition: var(--transition); }
.footer-links a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.825rem;
}

.footer-bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom-links a:hover { color: var(--accent); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-light);
  padding-top: 2rem;
}

.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--text-main); font-weight: 600; }

/* ---------- Page header (service / legal pages) ---------- */
.page-header {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.page-header h1 { max-width: 42rem; }
.page-header .lead { max-width: 38rem; margin-top: 1.25rem; }

/* ---------- Prose (legal pages) ---------- */
.prose {
  max-width: 46rem;
}

.prose h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  margin-bottom: 0.9rem;
}

.prose h2:first-child { margin-top: 0; }

.prose p {
  margin-bottom: 1.1rem;
  font-size: 0.975rem;
}

.prose ul {
  margin-bottom: 1.1rem;
  padding-left: 1.25rem;
}

.prose ul li {
  list-style: disc;
  margin-bottom: 0.5rem;
  color: var(--text-light);
  font-size: 0.975rem;
}

.prose a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.prose strong { color: var(--text-main); }

.download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.download-card .file-meta { font-size: 0.8rem; color: var(--text-light); }

/* ---------- Badges inline (icon+label) ---------- */
.icon-list { display: grid; }

.icon-list-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 1.35rem;
  border-top: 1px solid var(--border);
}

.icon-list-item:first-child {
  border-top: none;
  padding-top: 0;
}

.icon-list-item .card-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.icon-list-item h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.icon-list-item p { font-size: 0.925rem; margin: 0; }

/* ---------- Scroll reveal ---------- */
/* Hidden only once .js is set on <html> (see inline head script) so
   content stays visible by default if JavaScript fails to load. */
.reveal {
  /* Deckkraft absichtlich viel schneller als die Bewegung: Solange ein
     Text halbtransparent ist, mischt sich seine Farbe mit dem Hintergrund
     und der Kontrast sinkt unter den WCAG-Grenzwert. Pruefwerkzeuge wie
     Lighthouse messen mitten in der Animation und melden dann - je nach
     Zeitpunkt - Kontrastfehler, obwohl die Farben im Ruhezustand passen.
     0,25 s Einblenden + 0,7 s Bewegung sieht praktisch gleich aus,
     verkuerzt das kritische Fenster aber auf ein Drittel. */
  transition: opacity 0.25s linear,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Fehlerseite 404 ---------- */
.error-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.error-links li {
  border-bottom: 1px solid var(--border);
}

.error-links a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  padding: 1.25rem 0.25rem;
  text-decoration: none;
  color: var(--text-main);
  transition: padding-left 0.25s ease, background-color 0.25s ease;
}

.error-links a:hover,
.error-links a:focus-visible {
  padding-left: 1rem;
  background-color: var(--bg-alt);
}

.error-links strong {
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.error-links span {
  color: var(--text-light);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .error-links a { display: block; }
  .error-links span { display: block; margin-top: 0.25rem; }
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }
.muted { color: var(--text-light); }
.nowrap { white-space: nowrap; }

@media print {
  .site-header, .site-footer, .nav-toggle, .hero-cta-row, .cta-band { display: none !important; }
  body { color: #000; }
}