*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Inter – lokal eingebunden, keine externe Verbindung zu Google Fonts */
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/inter-latin-100-normal.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/inter-latin-200-normal.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/inter-latin-300-normal.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }

    :root {
      --black: #080808;
      --white: #ffffff;
      --border: rgba(255,255,255,0.12);
      --muted: rgba(255,255,255,0.55);
      --muted-strong: rgba(255,255,255,0.82);
      --pad-x: 48px;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ─── HEADER (Topbar + Nav) ───────────────────── */
    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: var(--black);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 36px;
      padding: 11px var(--pad-x);
      border-bottom: 1px solid var(--border);
    }

    .topbar a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted-strong);
      text-decoration: none;
      font-size: 12.5px;
      font-weight: 400;
      letter-spacing: .02em;
      /* Größere Tippfläche für Anrufen/Mailen. Das negative Margin hebt die
         Layoutwirkung wieder auf — die Kopfhöhe muss exakt 170px bleiben,
         weil #leistungen und #projekte damit rechnen (calc(100vh - 170px)). */
      padding: 12px 8px;
      margin: -12px -8px;
      transition: color .2s;
    }
    .topbar a:hover { color: var(--white); }
    .topbar svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .85; }

    nav {
      background: var(--black);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--pad-x);
      height: 130px;
      border-bottom: 1px solid var(--border);
    }

    /* Logo: echte Bilddatei (Negativ-Version, weiß auf dunkel) */
    .logo {
      display: block;
      flex-shrink: 0;
      line-height: 0;
      text-decoration: none;
    }
    .logo img {
      height: 94px;
      width: auto;
      display: block;
    }

    /* Menüpunkte auf volle Kopfbereich-Höhe strecken. Dadurch liegt die
       Oberkante des Untermenüs (top: 100%) exakt auf der Trennlinie des
       Kopfbereichs — es hängt sichtbar daran, statt darunter zu schweben. */
    .nav-links { display: flex; gap: 56px; list-style: none; align-self: stretch; align-items: stretch; }
    .nav-links > li { display: flex; align-items: center; }
    .nav-links a {
      color: var(--white);
      text-decoration: none;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.04em;
      /* Größere Tippfläche: Auf dem iPad wird die Desktop-Navigation
         angezeigt, die reine Texthöhe (ca. 20px) ist zum Antippen zu klein.
         Das Padding vergrößert nur den Trefferbereich, nicht die Optik. */
      padding: 13px 0;
      transition: opacity .2s;
    }
    .nav-links a:hover { opacity: .5; }
    .nav-links a.active {
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-thickness: 1px;
    }

    /* ─── UNTERMENÜ (prozess) ─────────────────────── */
    .has-sub { position: relative; }
    .sub-menu {
      position: absolute;
      top: 100%;          /* = Unterkante des Kopfbereichs, bündig */
      left: -24px;
      min-width: 300px;
      list-style: none;
      background: #0d0d0d;
      border: 1px solid var(--border);
      border-top: none;   /* die Linie des Kopfbereichs übernimmt den Abschluss */
      /* Kein vertikales Padding hier — das saß vorher am Container und ließ
         beim Hover über den ersten/letzten Eintrag eine 10px-Lücke zum
         Rand stehen, der Hover-Balken war oben/unten nicht bündig. Der
         Abstand kommt jetzt vom Innenabstand der Links selbst. */
      padding: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s;
      z-index: 60;
    }
    .has-sub:hover .sub-menu,
    .has-sub:focus-within .sub-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .sub-menu li { display: block; }
    .sub-menu a {
      display: flex;
      align-items: baseline;
      gap: 14px;
      padding: 11px 24px;
      font-size: 13px;
      color: var(--muted-strong);
      white-space: nowrap;
      transition: color .2s, background .2s;
    }
    .sub-num {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: .08em;
      transition: color .2s;
    }
    .sub-menu a:hover { color: var(--white); background: rgba(255,255,255,.06); opacity: 1; }
    .sub-menu a:hover .sub-num { color: var(--white); }

    /* ─── HERO ────────────────────────────────────── */
    #hero {
      /* min-height statt height: Auf sehr kleinen Geräten (z. B. iPhone SE)
         passt der Hero-Text plus Statistik-Leiste nicht in eine Bildschirm-
         höhe (gemessen: 808px Inhalt bei nur 667px verfügbarer Höhe). Mit
         fester height + overflow:hidden wurde die zweite Statistik-Zeile
         dadurch abgeschnitten. min-height lässt den Abschnitt in diesem
         Fall minimal über den Bildschirmrand hinauswachsen, statt Inhalt zu
         verlieren — auf allen normal großen Bildschirmen ändert sich optisch
         nichts, dort füllt der Inhalt die Fläche ohnehin exakt aus. */
      min-height: 100vh;   /* Fallback für sehr alte Browser */
      min-height: 100dvh;  /* korrekt für iOS Safari (dynamische Adressleiste) */
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 0;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    @keyframes heroKenBurns {
      0%   { transform: scale(1); }
      100% { transform: scale(1.15); }
    }
    .hero-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 32%;
      display: block;
      filter: brightness(1.16) contrast(1.04) saturate(1.12);
      animation: heroKenBurns 12s ease-in-out infinite alternate;
    }
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,.16) 75%);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 170px var(--pad-x) 0 var(--pad-x);
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 760px;
      padding-bottom: 60px;
    }

    .label {
      font-size: 11px;
      font-weight: 300;
      letter-spacing: .14em;
      color: var(--muted);
      margin-bottom: 28px;
      text-transform: lowercase;
    }

    h1 {
      font-size: clamp(48px, 5.5vw, 76px);
      line-height: 1.08;
      letter-spacing: -.025em;
      font-weight: 200;
      margin-bottom: 32px;
    }

    h1 strong { font-weight: 700; }

    .hero-sub {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      margin-bottom: 44px;
      max-width: 400px;
    }

    .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

    .btn-fill {
      background: var(--white);
      color: #000;
      padding: 15px 30px;
      font-size: 13px;
      font-family: inherit;
      font-weight: 400;
      letter-spacing: .06em;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: opacity .2s;
    }
    .btn-fill:hover { opacity: .85; }

    .btn-outline {
      background: transparent;
      color: var(--white);
      padding: 15px 30px;
      font-size: 13px;
      font-family: inherit;
      font-weight: 400;
      letter-spacing: .06em;
      border: 1.5px solid rgba(255,255,255,.6);
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      line-height: inherit; /* damit <button> exakt wie <a> aussieht */
      transition: border-color .2s, background .2s;
    }
    .btn-outline:hover { background: rgba(255,255,255,.07); border-color: var(--white); }

    /* ─── STATS BAR ───────────────────────────────── */
    .stats-bar {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: var(--black);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .stat {
      padding: 28px 40px;
      text-align: center;
      border-right: 1px solid var(--border);
    }
    .stat:last-child { border-right: none; }
    .stat-num {
      display: block;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1;
      margin-bottom: 6px;
    }
    .stat-lbl {
      font-size: 11px;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .06em;
    }

    /* ─── SHARED SECTION ──────────────────────────── */
    section { padding: 110px var(--pad-x); scroll-margin-top: 170px; }

    /* Leistungen-Intro: randlos, gleiches Schema wie die Prozess-Phasen —
       Bild füllt die komplette rechte Hälfte über die volle Höhe.
       Höhe = Bildschirm MINUS fixem Kopfbereich (170px), damit Überschrift,
       Bild und die drei Punkte inkl. Fließtext gemeinsam sichtbar sind.
       Ohne den Abzug läge der untere Teil der Punkte unter dem Bildrand. */
    #leistungen {
      min-height: calc(100vh - 170px);   /* Fallback */
      min-height: calc(100dvh - 170px);  /* siehe Hinweis bei #hero */
      display: flex;
      flex-direction: column;
    }
    .promise-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      flex: 1;
      /* Bewusst niedrig: die Punkte-Reihe darunter bekommt IMMER ihre volle
         Höhe, das Bild gibt nach. Ein zu hoher Wert hier drückt die Sektion
         über den Bildschirm hinaus und schneidet die Punkte unten ab. */
      min-height: 260px;
    }
    .promise-left {
      padding: 56px var(--pad-x);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .promise-left h2 { margin-top: 16px; }

    .promise-media {
      position: relative;
      margin: 0;
      overflow: hidden;
      border-left: 1px solid var(--border);
    }
    /* Absolut positioniert — sonst bestimmt das Bild über sein eigenes
       Seitenverhältnis die Höhe der Sektion (height:100% greift nicht,
       solange die Elternhöhe noch nicht feststeht) und drückt die Punkte
       darunter aus dem sichtbaren Bereich. So füllt es nur den Platz,
       der übrig bleibt. */
    .promise-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.06);
      transition: transform 1.3s cubic-bezier(.16,1,.3,1);
    }
    .fade-in.visible .promise-media img { transform: scale(1); }
    /* Abdunkelung liegt auf voller Breite, damit der Verlauf sauber ausläuft ... */
    .promise-media::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 55%;
      background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 45%, transparent 100%);
      pointer-events: none;
    }
    /* ... der Text selbst bleibt ein schmaler Block wie im Entwurf */
    .promise-media figcaption {
      position: absolute;
      left: 40px;
      bottom: 36px;
      z-index: 2;
      max-width: 330px;
      font-size: 13px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,.92);
    }

    h2 {
      font-size: clamp(36px, 4.5vw, 60px);
      font-weight: 200;
      line-height: 1.1;
      letter-spacing: -.025em;
    }

    .body-text {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.85;
      color: var(--muted);
    }

    /* ─── USP GRID ────────────────────────────────── */
    .usp-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--border);
    }

    .usp {
      padding: 34px 44px 40px 44px;
      border-right: 1px solid var(--border);
    }
    .usp:last-child { border-right: none; }

    .usp-num {
      display: block;
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 14px;
      font-weight: 300;
      letter-spacing: .06em;
    }

    .usp h3 {
      font-size: 21px;
      font-weight: 200;
      margin-bottom: 5px;
    }

    .usp-sub {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 16px;
      font-weight: 300;
    }

    .usp p { font-size: 13px; line-height: 1.75; color: var(--muted); }

    /* Flache Laptop-Bildschirme: Überschrift und Abstände zurücknehmen,
       sonst ist die Textspalte selbst zu hoch und drückt die Punkte raus */
    @media (min-width: 901px) and (max-height: 850px) {
      .promise-left { padding: 34px var(--pad-x); }
      .promise-left h2 { font-size: clamp(30px, 3.1vw, 42px); }
      .usp { padding: 26px 44px 32px 44px; }
      .usp p { font-size: 12.5px; line-height: 1.7; }

      /* Projekte ebenso zurücknehmen, damit die Bildreihe Höhe behält */
      #projekte { padding-top: 60px; }
      .proj-intro { margin-bottom: 32px; column-gap: 48px; }
      .proj-intro h2 { font-size: clamp(30px, 3.1vw, 42px); }
      .proj-arrows { margin-top: 24px; }
      .proj-arrow { width: 46px; height: 46px; }
      .proj-slider { min-height: 250px; }
    }

    /* Sehr flache Fenster: lieber normal fließen lassen als quetschen */
    @media (min-width: 901px) and (max-height: 700px) {
      #leistungen { min-height: 0; }
      .promise-split { min-height: 300px; }
      #projekte { min-height: 0; }
    }

    /* ─── PROZESS ─────────────────────────────────── */
    #leistungen { padding: 0; }
    #prozess { padding: 0; }

    .phase {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 92vh;    /* Fallback */
      min-height: 92dvh;   /* siehe Hinweis bei #hero */
      border-top: 1px solid var(--border);
      scroll-margin-top: 170px;   /* Anker aus dem Untermenü nicht unter das Menü springen lassen */
    }

    .phase-left {
      padding: 100px var(--pad-x);
      display: flex;
      flex-direction: column;
      gap: 64px;
    }

    .phase-top h2 { margin-top: 16px; }

    .phase-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .1em;
      margin-bottom: 8px;
    }

    .phase-title {
      font-size: 26px;
      font-weight: 300;
      margin-bottom: 20px;
    }

    .phase-body {
      font-size: 13.5px;
      line-height: 1.85;
      color: var(--muted);
      margin-bottom: 24px;
    }

    .phase-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .phase-list li {
      font-size: 13.5px;
      color: var(--muted);
      padding-left: 18px;
      position: relative;
    }
    .phase-list li::before {
      content: '—';
      position: absolute;
      left: 0;
      opacity: .45;
      font-size: 11px;
      top: 3px;
    }

    .phase-right {
      position: relative;
      overflow: hidden;
      border-left: 1px solid var(--border);
    }

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

    /* placeholder when no real image */
    .img-ph { width: 100%; height: 100%; display: block; }

    .gewerke {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-top: 36px;
    }

    .gewerk {
      padding: 14px 0;
      font-size: 13.5px;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
    }

    /* ─── PROJEKTE ────────────────────────────────── */
    /* Projekte: Überschrift, Pfeile und Bildreihe zusammen auf einen
       Bildschirm (Höhe = Bildschirm minus fixem Kopfbereich). Die Bildreihe
       nimmt den Platz, der übrig bleibt — deshalb KEINE feste Kachelhöhe. */
    #projekte {
      padding-bottom: 0;
      min-height: calc(100vh - 170px);   /* Fallback */
      min-height: calc(100dvh - 170px);  /* siehe Hinweis bei #hero */
      display: flex;
      flex-direction: column;
    }

    .proj-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* Nur Spaltenabstand — ein gemeinsamer gap würde zusätzlich 64px
         zwischen Überschriften- und Pfeilzeile einfügen und die Sektion
         unnötig in die Höhe treiben. Der Abstand zu den Pfeilen kommt
         aus deren margin-top. */
      column-gap: 64px;
      row-gap: 0;
      margin-bottom: 48px;
      align-items: end;
    }
    /* Pfeile sind ein eigenes Rasterfeld unter der Überschrift. Dadurch
       rutschen sie beim Umbruch auf schmalen Geräten automatisch ans Ende,
       also direkt über den Slider, den sie steuern. */
    .proj-headline { grid-column: 1; grid-row: 1; }
    .proj-right    { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
    .proj-arrows   { grid-column: 1; grid-row: 2; }

    .proj-right { display: flex; flex-direction: column; gap: 20px; }
    .proj-right p { font-size: 13.5px; line-height: 1.85; color: var(--muted); }

    /* ─── PROJEKTE-SLIDER ─────────────────────────── */
    .proj-slider {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      flex: 1;
      min-height: 280px;   /* Untergrenze, damit die Bilder nie zu flach werden */
      scroll-snap-type: x mandatory;
      border-top: 1px solid var(--border);
      /* KEIN scroll-behavior: smooth hier — der nahtlose Rücksprung des
         Endlos-Karussells muss ohne Animation passieren. Sanftes Scrollen
         steuert das JS gezielt über behavior: 'smooth'. */
      scrollbar-width: none;
      -ms-overflow-style: none;
      cursor: grab;
    }
    .proj-slider::-webkit-scrollbar { display: none; }
    .proj-slider.is-dragging { cursor: grabbing; }
    /* Verhindert, dass beim Ziehen das Bild selbst "mitgenommen" oder
       Text markiert wird — sonst bricht die Geste ab */
    .proj-card-bg, .proj-name {
      user-select: none;
      -webkit-user-drag: none;
    }

    .proj-card {
      flex: 0 0 33.3333%;     /* 3 Kacheln gleichzeitig sichtbar */
      scroll-snap-align: start;
      position: relative;
      overflow: hidden;
      border-right: 1px solid var(--border);
      cursor: pointer;
    }

    /* Pfeile sitzen unter der Überschrift, nicht mehr auf den Bildern */
    .proj-arrows {
      display: flex;
      gap: 12px;
      margin-top: 40px;
    }
    .proj-arrow {
      width: 52px;
      height: 52px;
      border: 1.5px solid rgba(255,255,255,.5);
      background: transparent;
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s;
    }
    .proj-arrow:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
    .proj-arrow svg { width: 20px; height: 20px; }

    /* Absolut positioniert — sonst gibt das Bild über sein eigenes
       Seitenverhältnis die Kachelhöhe vor und sprengt die Sektion
       (gleiche Ursache wie beim Leistungen-Bild). */
    .proj-card-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .proj-card:hover .proj-card-bg { transform: scale(1.04); }

    .proj-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
    }

    .proj-name {
      position: absolute;
      bottom: 24px;
      left: 28px;
      font-size: 15px;
      font-weight: 300;
      z-index: 2;
    }

    /* ─── IMAGEVIDEO ──────────────────────────────── */
    .video-facade {
      position: relative;
      aspect-ratio: 21 / 7;
      margin-top: 40px;
      overflow: hidden;
      cursor: pointer;
      border: 1px solid var(--border);
    }
    .video-poster {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s ease;
    }
    .video-facade::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.25);
      pointer-events: none;
    }
    .video-facade:hover .video-poster { transform: scale(1.03); }
    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(4px);
      border: 1.5px solid rgba(255,255,255,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .25s ease, transform .25s ease;
    }
    .play-btn svg { margin-left: 4px; }
    .video-facade:hover .play-btn { background: rgba(255,255,255,0.22); transform: translate(-50%, -50%) scale(1.06); }

    /* ─── ÜBER UNS ────────────────────────────────── */
    .about-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr 0.62fr;
      gap: 56px;
      margin-top: 56px;
    }

    /* Team-Fotos als schmale Spalte am rechten Rand */
    .team-column {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .about-left h2 { margin-bottom: 44px; }
    .about-left p { font-size: 13.5px; line-height: 1.9; color: var(--muted); margin-bottom: 22px; }

    .values { display: flex; flex-direction: column; gap: 52px; }

    .value h3 {
      font-size: 22px;
      font-weight: 200;
      margin-bottom: 12px;
    }

    .value p { font-size: 13.5px; line-height: 1.85; color: var(--muted); }

    .team-photo {
      margin: 0;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .team-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: grayscale(.15);
      transition: transform .5s ease, filter .5s ease;
    }
    .team-photo:hover img { transform: scale(1.04); filter: grayscale(0); }

    /* ─── KONTAKT ─────────────────────────────────── */
    #kontakt { background: #050505; }

    .kontakt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }

    .kontakt-left .label { margin-bottom: 32px; }

    .kontakt-left h2 {
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 200;
      line-height: 1.12;
      letter-spacing: -.025em;
      margin-bottom: 28px;
    }

    .kontakt-left .body-text { margin-bottom: 48px; }

    /* ─── KARTE (Zwei-Klick) ──────────────────────── */
    /* Feste Höhe auf der Hülle: dadurch ist der Platzhalter großzügiger UND
       die geladene Karte exakt gleich hoch — beim Öffnen springt nichts.
       Ohne feste Höhe würde die Karte über die volle Breite im 16:9-Format
       über 1000px hoch werden. */
    .karte-huelle {
      margin-top: 44px;
      height: 460px;
      border: 1px solid var(--border);
      background: #0d0d0d;
      overflow: hidden;
    }
    .karte-platzhalter {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 44px 32px;
    }
    /* Symbol im Kreis — selbst gezeichnet, damit nichts extern geladen wird */
    .karte-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      margin-bottom: 20px;
    }
    .karte-icon svg { width: 24px; height: 24px; }

    .karte-laden {
      background: none;
      border: none;
      /* Padding vergrößert die Tippfläche auf ein fingerfreundliches Maß */
      padding: 12px 10px;
      margin: -12px -10px;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 400;
      letter-spacing: .04em;
      color: var(--white);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 5px;
      text-decoration-thickness: 1px;
      transition: opacity .2s;
    }
    .karte-laden:hover { opacity: .65; }

    .karte-adresse {
      margin-top: 14px;
      font-size: 13px;
      font-weight: 400;
      color: var(--muted-strong);
      letter-spacing: .02em;
    }
    .karte-info {
      margin-top: 18px;
      font-size: 11.5px;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      max-width: 430px;
    }
    .karte-info a { color: var(--muted-strong); text-decoration: underline; text-underline-offset: 3px; }
    /* Zweiter Absatz schließt direkt an — nur Zeilenumbruch, keine Leerzeile */
    .karte-info + .karte-info { margin-top: 0; }
    .karte-info a:hover { color: var(--white); }
    /* Karte füllt die Hülle exakt aus -> gleiche Höhe wie der Platzhalter */
    .karte-huelle iframe { width: 100%; height: 100%; border: 0; display: block; }

    dl { display: flex; flex-direction: column; gap: 14px; }

    .dl-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
    .dl-row dt { font-size: 12px; color: var(--muted); padding-top: 1px; }
    .dl-row dd { font-size: 13.5px; }
    /* Vertikales Padding an Inline-Links vergrößert nur die Tippfläche,
       die Zeilenhöhe bleibt unberührt — kein Layout-Einfluss. */
    .dl-row dd a { color: var(--white); text-decoration: none; transition: opacity .2s; padding: 9px 0; }
    .dl-row dd a:hover { opacity: .6; }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    /* Honeypot: unsichtbar für Menschen, aber im DOM für Bots vorhanden */
    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .span-2 { grid-column: 1 / -1; }

    .f-input, .f-select, .f-textarea {
      width: 100%;
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.22);
      color: var(--white);
      padding: 15px 18px;
      font-size: 13.5px;
      font-family: inherit;
      font-weight: 300;
      outline: none;
      transition: border-color .2s;
      -webkit-appearance: none;
      border-radius: 0;
    }

    .f-group { position: relative; }
    .f-group .f-input { padding-left: 46px; }
    .f-icon {
      position: absolute;
      left: 16px; top: 50%;
      transform: translateY(-50%);
      width: 16px; height: 16px;
      color: rgba(255,255,255,.4);
      pointer-events: none;
    }

    .f-input:focus, .f-select:focus, .f-textarea:focus {
      border-color: rgba(255,255,255,.6);
    }

    .f-input::placeholder, .f-textarea::placeholder {
      color: rgba(255,255,255,.3);
    }

    .f-select { color: rgba(255,255,255,.3); }
    .f-select.chosen { color: var(--white); }
    .f-select option { background: #111; color: var(--white); }

    .f-textarea { height: 155px; resize: vertical; }

    /* ─── CONSENT CHECKBOX ────────────────────────── */
    .consent-row { margin-top: 4px; }

    .checkbox-wrap {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
    }

    .checkbox-wrap input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0; height: 0;
    }

    .checkbox-box {
      flex-shrink: 0;
      width: 18px; height: 18px;
      margin-top: 2px;
      border: 1.5px solid rgba(255,255,255,.4);
      position: relative;
      transition: border-color .2s, background .2s;
    }

    .checkbox-wrap input:checked + .checkbox-box {
      background: var(--white);
      border-color: var(--white);
    }

    .checkbox-wrap input:checked + .checkbox-box::after {
      content: '';
      position: absolute;
      left: 5px; top: 1px;
      width: 5px; height: 9px;
      border: solid var(--black);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .checkbox-wrap input:focus-visible + .checkbox-box {
      outline: 2px solid rgba(255,255,255,.6);
      outline-offset: 2px;
    }

    .consent-text {
      font-size: 12.5px;
      line-height: 1.65;
      color: var(--white);
    }
    .consent-text a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); }
    .consent-text a:hover { text-decoration-color: var(--white); }

    .form-note {
      font-size: 11px;
      color: var(--muted);
      margin-top: 12px;
      line-height: 1.6;
    }
    .form-note a { color: var(--muted); text-decoration: underline; }

    /* Erfolgs-/Fehler-/Validierungsmeldung: deutlich größer und als Callout
       abgesetzt, damit sie nicht in der kleinen Fußzeile untergeht. */
    .form-note.is-result {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.6;
      padding: 14px 18px;
      color: var(--white);
      border-left: 2px solid var(--white);
      background: rgba(255,255,255,.04);
    }
    .form-note.is-error {
      color: #ffb3b3;
      border-left-color: #ff8a8a;
    }
    .form-note a:hover { color: var(--white); }

    /* ─── FOOTER ──────────────────────────────────── */
    footer {
      background: #000;
      border-top: 1px solid var(--border);
      padding: 28px var(--pad-x);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer-brand { font-size: 13px; }
    .footer-brand strong { font-weight: 600; }

    .footer-mitte {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
    }

    .footer-copy {
      font-size: 12px;
      color: rgba(255,255,255,.62);
      letter-spacing: .02em;
      text-align: center;
    }

    /* Dezenter Hinweis auf die Umsetzung — bewusst zurückhaltend,
       damit er die Marke des Kunden nicht überlagert */
    .footer-credit {
      font-size: 11.5px;
      color: rgba(255,255,255,.5);
      letter-spacing: .03em;
      text-align: center;
    }
    .footer-credit a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,.18);
      transition: color .2s, border-color .2s;
    }
    .footer-credit a:hover { color: var(--white); border-color: var(--white); }

    .footer-nav { display: flex; gap: 40px; list-style: none; }
    .footer-nav a { padding: 10px 0; }
    /* Aktuelle Rechtsseite hervorheben — gleiche Auszeichnung wie im Hauptmenü */
    .footer-nav a.active {
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-thickness: 1px;
      opacity: 1;
    }
    .footer-nav a {
      color: var(--muted);
      text-decoration: none;
      font-size: 13px;
      font-weight: 300;
      transition: color .2s;
    }
    .footer-nav a:hover { color: var(--white); }

    /* ─── BURGER ─────────────────────────────────── */
    .burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
    }
    .burger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--white);
      transition: transform .3s ease, opacity .3s ease;
    }
    .burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .burger.open span:nth-child(2) { opacity: 0; width: 0; }
    .burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    /* ─── SCROLL ANIMATIONS ───────────────────────── */
    .fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Bilder: sanfter Zoom-Reveal beim Reinscrollen, oben drauf auf fade-in */
    .phase-img,
    .proj-card-bg,
    .team-photo img {
      transform: scale(1.09);
      transition: transform 1.3s cubic-bezier(.16,1,.3,1), filter .5s ease;
    }
    .fade-in.visible .phase-img,
    .fade-in.visible .proj-card-bg,
    .fade-in.visible .team-photo img {
      transform: scale(1);
    }
    /* Hover-Effekte bleiben nach dem Reveal erhalten */
    .fade-in.visible .team-photo:hover img { transform: scale(1.04); filter: grayscale(0); }
    .fade-in.visible .proj-card:hover .proj-card-bg { transform: scale(1.04); }

    /* ─── LIGHTBOX ────────────────────────────────── */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(4,4,4,.96);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 80px 100px;
      opacity: 0;
      transition: opacity .25s ease;
    }
    .lightbox[hidden] { display: none; }
    .lightbox.is-open { opacity: 1; }

    .lb-figure {
      margin: 0;
      max-width: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }
    .lb-figure img {
      max-width: 100%;
      /* Platz für die Bildunterschrift freihalten, damit das Bild nie abgeschnitten wird */
      max-height: calc(100vh - 190px);   /* Fallback */
      max-height: calc(100dvh - 190px);  /* siehe Hinweis bei #hero */
      object-fit: contain;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }
    .lb-figure figcaption {
      display: flex;
      align-items: baseline;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .lb-name { font-size: 15px; font-weight: 300; color: var(--white); letter-spacing: .02em; }
    .lb-count { font-size: 12px; color: var(--muted); letter-spacing: .08em; }

    .lb-close,
    .lb-arrow {
      position: absolute;
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.45);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s;
      z-index: 2;
    }
    .lb-close:hover,
    .lb-arrow:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

    .lb-close { top: 26px; right: 26px; width: 46px; height: 46px; }
    .lb-close svg { width: 20px; height: 20px; }
    .lb-arrow { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
    .lb-arrow svg { width: 20px; height: 20px; }
    .lb-prev { left: 26px; }
    .lb-next { right: 26px; }

    /* Seite im Hintergrund nicht mitscrollen lassen */
    body.lb-open { overflow: hidden; }

    /* Anklickbare Projektbilder erkennbar machen */
    .proj-card { cursor: zoom-in; }
    .proj-slider.is-dragging .proj-card { cursor: grabbing; }

    /* ─── RESPONSIVE ─────────────────────────────── */
    /* Mit acht Menüpunkten wird die Leiste auf schmalen Desktops zu breit:
       ohne diese Staffelung stößt das Menü ab ca. 1100px ans Logo und ragt
       bei 950px sogar über den Bildschirmrand hinaus. */
    @media (max-width: 1450px) and (min-width: 901px) {
      .nav-links { gap: 36px; }
    }
    @media (max-width: 1180px) and (min-width: 901px) {
      .nav-links { gap: 22px; }
      .nav-links a { font-size: 13.5px; letter-spacing: .02em; }
    }

    @media (max-width: 1300px) and (min-width: 901px) {
      .proj-card { flex: 0 0 50%; }
      .proj-slider { min-height: 260px; }

      /* Schmalere Spalten: Überschrift verkleinern, sonst bricht ein langes
         Wort wie "realisierungspartner." um und lässt "ihr" allein stehen */
      h2 { font-size: clamp(30px, 3.2vw, 40px); }

      /* Tablet: 3 Spalten wären zu eng -> Text/Werte oben, Fotos als Reihe darunter */
      .about-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
      .team-column {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 20px;
      }
      .team-column .team-photo { flex: 1; }
    }

    @media (max-width: 900px) {
      /* Hero: Der seitliche Verlauf passt nur zum zweispaltigen Desktop-Layout.
         Mobil steht der Text über die volle Breite und lag dadurch teilweise
         auf hellen Bildbereichen (Fenster/Vorhang). Deshalb hier von oben
         nach unten abdunkeln. */
      .hero-bg::after {
        background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.68) 38%, rgba(0,0,0,.82) 100%);
      }

      /* Überschriften mitskalieren statt fester 36px-Untergrenze — sonst
         bleiben bei langen Wörtern einzelne Wörter allein in der Zeile */
      h2 { font-size: clamp(26px, 6.6vw, 33px); }
      /* Zeilenlänge begrenzen: auf Tablets sonst über 100 Zeichen pro Zeile */
      .usp p, .promise-media figcaption, .proj-right p, .body-text,
      .about-left p, .value p, .phase-left p { max-width: 62ch; }

      .video-facade { aspect-ratio: 4 / 3; }
      /* Text neben den Icons bleibt jetzt auch mobil/tablet sichtbar (statt
         nur Icons). Eigenes, engeres Seitenpolster nötig: die Topbar nutzte
         bisher noch var(--pad-x)=48px wie am Desktop, obwohl die Navigation
         direkt darunter längst auf 24px reduziert war — dadurch war schlicht
         zu wenig Platz für Telefonnummer + E-Mail nebeneinander. */
      .topbar { padding: 8px 20px; gap: 14px; }
      .topbar a { gap: 6px; }
      .topbar a span { white-space: nowrap; }
      nav { padding: 0 24px; height: 80px; }

      /* Burger sichtbar, Desktop-Links versteckt */
      .burger { display: flex; }
      .nav-links {
        display: none;
        position: fixed;
        top: 116px; left: 0; right: 0; bottom: 0;
        background: #000;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 36px;
        gap: 36px;
        z-index: 99;
      }
      .nav-links.open { display: flex; }
      .nav-links a {
        font-size: 28px;
        font-weight: 200;
        letter-spacing: -.01em;
        /* Kein zusätzliches Padding nötig: bei 28px Schrift ist die
           Tippfläche ohnehin groß genug. Mit Padding passten auf kleinen
           iPhones die letzten Menüpunkte nicht mehr aufs Bild. */
        padding: 0;
      }

      /* Untermenü mobil: kein Hover-Dropdown, sondern eingerückt sichtbar */
      .nav-links { overflow-y: auto; padding-top: 28px; padding-bottom: 28px; justify-content: flex-start; gap: 24px; }
      .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        min-width: 0;
        padding: 14px 0 0 0;
        margin-top: 0;
      }
      .sub-menu a {
        font-size: 15px;
        padding: 7px 0 7px 18px;
        border-left: 1px solid var(--border);
        white-space: normal;
      }
      /* Mobil: Streckung aufheben, sonst stünde das Untermenü NEBEN dem Link */
      .nav-links { align-items: flex-start; }
      .nav-links > li { display: block; }

      /* Logo kleiner auf Mobile */
      .logo img { height: 58px; }

      /* Hero */
      .hero-content {
        padding: 0 24px;
        padding-top: 128px;
      }
      h1 { font-size: clamp(36px, 10vw, 56px); }

      /* Sektionen */
      section { padding: 64px 24px; scroll-margin-top: 116px; }
      .phase { scroll-margin-top: 116px; }
      .usp-grid, .about-grid, .kontakt-grid,
      .proj-intro, .phase, .promise-split { grid-template-columns: 1fr; }
      /* Mobil darf die Sektion normal fließen, sonst wird es gequetscht */
      #leistungen { min-height: 0; display: block; }
      .promise-left { padding: 56px 24px; }
      .promise-media { border-left: none; border-top: 1px solid var(--border); min-height: 340px; }
      .promise-media figcaption { left: 22px; right: 22px; bottom: 24px; max-width: none; font-size: 13px; }
      /* Mobil: Team-Fotos wieder untereinander in voller Breite */
      .team-column { margin-top: 8px; }

      /* USP */
      .usp { border-right: none; border-bottom: 1px solid var(--border); padding: 36px 24px; }
      .usp:first-child { padding-top: 36px; }
      .usp:last-child { border-bottom: none; padding-bottom: 56px; }

      /* Prozess */
      .phase-left { padding: 64px 24px; }
      .phase-right { min-height: 300px; border-left: none; border-top: 1px solid var(--border); }

      /* Projekte: eine Kachel pro Ansicht, nächste blitzt an -> Wischen wird erkennbar */
      /* Mobil normal fließen lassen statt auf einen Bildschirm zwingen */
      #projekte { min-height: 0; display: block; }
      .proj-card { flex: 0 0 86%; }
      .proj-slider { flex: none; min-height: 0; height: 340px; }
      .proj-arrow { width: 46px; height: 46px; }
      /* Umbruch: Raster-Zuweisung aufheben, damit die Pfeile ans Ende
         rutschen und direkt über dem Slider stehen */
      .proj-headline, .proj-right, .proj-arrows { grid-column: auto; grid-row: auto; }
      .proj-arrows { margin-top: 4px; margin-bottom: 4px; }

      /* Lightbox mobil: weniger Rand, Pfeile unten statt seitlich am Bild */
      .lightbox { padding: 70px 16px 96px 16px; }
      .lb-figure img { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); }
      .lb-close { top: 16px; right: 16px; width: 42px; height: 42px; }
      .lb-arrow { top: auto; bottom: 22px; transform: none; width: 46px; height: 46px; }
      .lb-prev { left: calc(50% - 56px); }
      .lb-next { right: calc(50% - 56px); }

      /* Stats */
      .stats-bar { grid-template-columns: repeat(2, 1fr); }
      .stat:nth-child(2) { border-right: none; }
      /* 2x2-Raster: obere Reihe braucht eine Trennlinie nach unten,
         sonst hängen die beiden Reihen ohne Abgrenzung aneinander */
      .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
      .stat { padding: 22px 20px; }

      /* Footer */
      footer { flex-direction: column; gap: 20px; padding: 28px 24px; }
      .footer-nav { gap: 24px; }


      /* Karte */
      .karte-huelle { margin-top: 48px; }
      .karte-huelle { height: 400px; margin-top: 32px; }
      .karte-platzhalter { padding: 34px 22px; }

      /* Formular */
      .form-grid { grid-template-columns: 1fr; }
    }

    /* ─── LEGAL PAGES (Impressum / Datenschutz) ───── */
    .legal-page {
      padding-top: 210px;
      padding-bottom: 120px;
      max-width: 780px;
      /* Sicherheitsnetz: In Rechtstexten stehen sehr lange Komposita
         (z. B. "Verbraucherstreitbeilegung/Universalschlichtungsstelle").
         Ohne das bricht so ein Wort nicht um und schiebt auf dem Handy die
         ganze Seite seitwärts. Weiche Trennstellen im Text ergänzen das. */
      overflow-wrap: break-word;
      hyphens: auto;
    }
    .legal-page h1 {
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 200;
      letter-spacing: -.025em;
      margin-bottom: 40px;
    }
    .legal-page h2 {
      font-size: 20px;
      font-weight: 400;
      margin-top: 44px;
      margin-bottom: 14px;
    }
    .legal-page h3 {
      font-size: 15.5px;
      font-weight: 500;
      margin-top: 30px;
      margin-bottom: 10px;
    }
    .legal-page h4 {
      font-size: 13.5px;
      font-weight: 600;
      margin-top: 18px;
      margin-bottom: 6px;
    }
    .legal-page p, .legal-page li {
      font-size: 13.5px;
      line-height: 1.85;
      color: var(--muted);
      margin-bottom: 16px;
    }
    .legal-page li { margin-bottom: 8px; }
    .legal-page ul { margin: 0 0 18px 18px; }
    .legal-page a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
    .legal-page a:hover { text-decoration-color: var(--white); }
    .legal-page .todo {
      display: inline-block;
      margin-top: 40px;
      padding: 14px 18px;
      border: 1px dashed rgba(255,255,255,.3);
      font-size: 12px;
      color: rgba(255,255,255,.6);
    }

    @media (max-width: 900px) {
      .legal-page { padding-top: 148px; }
    }

    /* Kleine Geräte (z. B. iPhone SE, 667px hoch): Mit acht Menüpunkten plus
       drei Unterpunkten passt das Menü sonst nicht aufs Bild — "kontakt" und
       "anfahrt" lägen unsichtbar unter dem Rand. Nur hier kompakter, damit
       die großzügige Menüoptik auf normalen Handys erhalten bleibt. */
    @media (max-width: 900px) and (max-height: 730px) {
      .nav-links { gap: 16px; padding-top: 20px; padding-bottom: 20px; }
      .nav-links a { font-size: 22px; }
      .sub-menu { padding-top: 10px; }
      .sub-menu a { font-size: 13.5px; padding: 5px 0 5px 16px; }
    }