/* ─────────────────────────────────────────
       DESIGN TOKENS & RESET
    ───────────────────────────────────────── */
    :root {
      --oak:       #8B6A3E;
      --oak-light: #C4A97D;
      --oak-pale:  #F5EFE6;
      --walnut:    #3D2B1F;
      --cream:     #FAF7F2;
      --sand:      #E8DDD0;
      --ash:       #6B6057;
      --white:     #FFFFFF;
      --text:      #2A201A;
      --text-muted:#7A6B62;

      --ff-display: 'Jost', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
      --ff-body:    'Jost', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
      --ff-script:  'Betina Script', 'Snell Roundhand', 'Apple Chancery', cursive;

      --max-w: 1200px;
      --hdr-h: 78px;

      --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* ─────────────────────────────────────────
       WEBFONTS · alle lokal gehostet (DSGVO-sauber, keine Google-Fonts-CDN)
    ───────────────────────────────────────── */

    /* Jost – Variable Font, deckt Weights 300–600 ab */
    @font-face {
      font-family: 'Jost';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url('/assets/fonts/jost-variable.woff2') format('woff2-variations'),
           url('/assets/fonts/jost-variable.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Jost';
      font-style: italic;
      font-weight: 100 900;
      font-display: swap;
      src: url('/assets/fonts/jost-variable-italic.woff2') format('woff2-variations'),
           url('/assets/fonts/jost-variable-italic.woff2') format('woff2');
    }

    /* Betina Script – kommerzielle Lizenz, exklusiv für die Mellert-Wortmarke */
    @font-face {
      font-family: 'Betina Script';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url('/assets/fonts/betina-script-light.woff2') format('woff2'),
           url('/assets/fonts/betina-script-light.woff')  format('woff'),
           url('/assets/fonts/betina-script-light.otf')   format('opentype');
    }

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

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--ff-body);
      color: var(--text);
      background: var(--cream);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      /* clip erlaubt position:sticky in iOS Safari (hidden tut's nicht) */
      overflow-x: clip;
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }

    /* ─────────────────────────────────────────
       UTILITIES
    ───────────────────────────────────────── */
    .container {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-label {
      font-family: var(--ff-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--oak);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .section-label::after {
      content: '';
      display: inline-block;
      width: 40px;
      height: 1px;
      background: var(--oak-light);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ff-body);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 16px 36px;
      border: none;
      cursor: pointer;
      transition: all 0.3s var(--ease);
      position: relative;
      overflow: hidden;
    }
    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.08);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .btn:hover::after { opacity: 1; }

    /* Gemeinsamer CTA-Hover: lift + scale + warmer Oak-Glow */
    .btn:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 14px 36px rgba(196,169,125,0.45);
    }

    .btn-primary {
      background: var(--oak);
      color: var(--white);
      box-shadow: 0 4px 14px rgba(61,43,31,0.18);
    }
    .btn-primary:hover {
      background: var(--oak-light);
      color: var(--walnut);
    }

    .btn-ghost {
      background: transparent;
      color: var(--white);
      border: 1px solid rgba(255,255,255,0.45);
    }
    .btn-ghost:hover {
      background: var(--oak-light);
      color: var(--walnut);
      border-color: var(--oak-light);
    }

    .btn-outline {
      background: transparent;
      color: var(--oak);
      border: 1px solid var(--oak);
    }
    .btn-outline:hover {
      background: var(--oak-light);
      color: var(--walnut);
      border-color: var(--oak-light);
    }

    /* Arrow icon */
    .arrow { width: 18px; height: 18px; transition: transform 0.3s; }
    .btn:hover .arrow { transform: translateX(4px); }

    /* ─────────────────────────────────────────
       HEADER / NAV
    ───────────────────────────────────────── */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--hdr-h);
      z-index: 1000;
      transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }
    /* Container im Header muss 100% Höhe nehmen damit nav-inner korrekt vertikal zentrieren kann */
    header > .container { height: 100%; }
    header.scrolled {
      background: rgba(250,247,242,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 var(--sand);
    }

    .nav-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      color: var(--white);
      transition: color 0.4s;
    }
    /* Fischgrät-Grafik immer sichtbar */
    .logo .logo-mark {
      height: 54px;
      width: auto;
      opacity: 0.9;
      transition: height 0.3s var(--ease), filter 0.4s, opacity 0.4s;
    }
    /* JÜRGEN mellert (horizontal daneben, Default) */
    .logo .logo-juergen {
      height: 36px;
      width: auto;
      opacity: 0.9;
      transition: filter 0.4s, opacity 0.4s;
      display: block;
    }
    /* mellert-Wortmarke (nur im scrolled, initial versteckt) */
    .logo .logo-wordmark {
      display: none;
      height: 28px;
      width: auto;
      opacity: 0.9;
      transition: filter 0.4s, opacity 0.4s;
    }
    /* Logo-Stack: JÜRGEN mellert + PARKETTLEGERMEISTER untereinander (nur im initial-Zustand) */
    .logo .logo-stack {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
    .logo .logo-tagline {
      font-family: var(--ff-body);
      font-size: 9px;
      line-height: 1;
      font-weight: 400;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: inherit;
      opacity: 0.78;
      white-space: nowrap;
    }
    /* Scrolled: Grafik schrumpft, kompletter Stack raus, mellert-Wortmarke rein */
    header.scrolled .logo .logo-mark { height: 36px; }
    header.scrolled .logo .logo-stack { display: none; }
    header.scrolled .logo .logo-wordmark { display: block; }

    /* Farb-Modes: dunkel → invertiert, hell → original + weniger opacity */
    header[data-mode="dark"] .logo .logo-mark,
    header[data-mode="walnut"] .logo .logo-mark,
    header[data-mode="dark"] .logo .logo-juergen,
    header[data-mode="walnut"] .logo .logo-juergen,
    header[data-mode="dark"] .logo .logo-wordmark,
    header[data-mode="walnut"] .logo .logo-wordmark {
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }
    header[data-mode="cream"] .logo .logo-mark,
    header[data-mode="oak-pale"] .logo .logo-mark,
    header[data-mode="cream"] .logo .logo-juergen,
    header[data-mode="oak-pale"] .logo .logo-juergen,
    header[data-mode="cream"] .logo .logo-wordmark,
    header[data-mode="oak-pale"] .logo .logo-wordmark {
      filter: none;
      opacity: 0.72;
    }

    nav ul {
      display: flex;
      gap: 36px;
      align-items: center;
    }
    nav a {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      transition: color 0.3s;
      position: relative;
    }
    nav a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: var(--oak-light);
      transition: width 0.3s var(--ease);
    }
    nav a:hover { color: var(--white); }
    nav a:hover::after { width: 100%; }

    header.scrolled nav a { color: var(--ash); }
    header.scrolled nav a:hover { color: var(--walnut); }
    header.scrolled nav a::after { background: var(--oak); }

    .nav-cta {
      font-size: 12px !important;
      font-weight: 500 !important;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 10px 22px;
      background: var(--oak);
      color: var(--white) !important;
      box-shadow: 0 4px 14px rgba(61,43,31,0.18);
      transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s !important;
    }
    .nav-cta::after { display: none !important; }
    .nav-cta:hover {
      background: var(--oak-light) !important;
      color: var(--walnut) !important;
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 14px 36px rgba(196,169,125,0.45);
    }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      background: transparent;
      border: none;
      -webkit-appearance: none;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
    }
    .hamburger span {
      display: block;
      width: 26px; height: 2px;
      background: var(--white);
      transition: opacity 0.2s var(--ease);
    }
    header.scrolled .hamburger span { background: var(--walnut); }
    /* Open-State: alle 3 Striche verstecken, stattdessen sauberes X per pseudo-elements */
    .hamburger { position: relative; }
    .hamburger.open span { opacity: 0; }
    .hamburger.open::before,
    .hamburger.open::after {
      content: '';
      position: absolute;
      left: 50%; top: 50%;
      width: 26px; height: 2px;
      margin: -1px 0 0 -13px;
      background: var(--white);
    }
    .hamburger.open::before { transform: rotate(45deg); }
    .hamburger.open::after  { transform: rotate(-45deg); }
    header.scrolled .hamburger.open::before,
    header.scrolled .hamburger.open::after { background: var(--walnut); }

    /* Mobile nav drawer */
    .mobile-nav {
      display: none;
      position: fixed;
      top: var(--hdr-h); left: 0; right: 0;
      background: var(--cream);
      padding: 32px 24px 40px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
      transform: translateY(-110%);
      transition: transform 0.4s var(--ease);
      z-index: 999;
    }
    .mobile-nav.open { transform: translateY(0); }
    /* Abgedunkelte Fläche unter dem offenen Menü: Tipp außerhalb schließt es
       (liegt unter Header + Menü, damit das X weiter erreichbar bleibt) */
    .mobile-nav-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(61, 43, 31, 0.35);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
      z-index: 998;
    }
    .mobile-nav-backdrop.open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s var(--ease), visibility 0s;
    }
    .mobile-nav ul { flex-direction: column; gap: 0; }
    .mobile-nav a {
      display: block;
      padding: 16px 0;
      font-size: 14px;
      letter-spacing: 0.14em;
      color: var(--walnut);
      border-bottom: 1px solid var(--sand);
    }
    .mobile-nav a:hover { color: var(--oak); }
    .mobile-nav .nav-cta {
      margin-top: 24px;
      display: inline-block;
      color: var(--white) !important;
      background: var(--oak);
      padding: 14px 28px;
    }
    .mobile-nav .nav-cta:hover {
      background: var(--oak-light) !important;
      color: var(--walnut) !important;
    }

    /* ─────────────────────────────────────────
       HERO
    ───────────────────────────────────────── */
    #hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #3D2B1F; /* Walnut-Braun als linker Textgrund */
    }

    /* Grain texture overlay */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      z-index: 2;
      pointer-events: none;
      opacity: 0.6;
    }

    /* Hero-Bild: nur rechte 65% der Breite, startet bei 35%
       image-set lädt WebP wenn Browser's unterstützt (~228 KB), sonst JPEG (~371 KB) */
    .hero-bg {
      position: absolute;
      inset: 0 0 0 35%;
      background-image: url("/assets/fotos/web/team-gruppenbild.jpg");
      background-image: -webkit-image-set(
        url("/assets/fotos/web/team-gruppenbild.webp") type("image/webp"),
        url("/assets/fotos/web/team-gruppenbild.jpg") type("image/jpeg")
      );
      background-image: image-set(
        url("/assets/fotos/web/team-gruppenbild.webp") type("image/webp"),
        url("/assets/fotos/web/team-gruppenbild.jpg") type("image/jpeg")
      );
      background-size: cover;
      background-position: center;
      z-index: 0;
    }

    /* Weicher Fade links über das Bild (vom Walnut-Braun in Richtung Bild) */
    .hero-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(61, 43, 31, 1) 0%,
        rgba(61, 43, 31, 0.85) 15%,
        rgba(61, 43, 31, 0.5) 30%,
        rgba(61, 43, 31, 0.15) 45%,
        rgba(61, 43, 31, 0) 60%);
      pointer-events: none;
    }

    /* Sanfter unterer Verlauf: liegt auf #hero (ganze Breite), nicht nur auf dem Bild —
       sonst entsteht eine vertikale Kante zwischen gedunkeltem Bild und hellem Walnut-Bereich */
    #hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 70%, rgba(20, 12, 6, 0.5) 100%);
      pointer-events: none;
      z-index: 2;
    }

    /* Headline schlanker halten damit sie nicht in die rechte Bildhälfte rutscht */
    .hero-inner { max-width: 480px; padding-right: 40px; }

    /* Staggered Headline-Reveal beim Laden */
    .hero-headline .hl-line {
      display: block;
      opacity: 0;
      transform: translateY(32px);
      animation: hlReveal 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }
    .hero-headline .hl-line:nth-child(1) { animation-delay: 0.3s; }
    .hero-headline .hl-line:nth-child(2) { animation-delay: 0.7s; }
    .hero-headline .hl-line:nth-child(3) { animation-delay: 1.1s; }
    @keyframes hlReveal {
      to { opacity: 1; transform: translateY(0); }
    }

    /* Header-Shrink beim Scrollen */
    header {
      transition:
        height 0.3s var(--ease),
        background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.5s;
    }
    header.scrolled { height: 60px; }
    .logo .logo-mark { transition: height 0.3s var(--ease), filter 0.5s, opacity 0.4s; }
    .logo .logo-wordmark { transition: height 0.3s var(--ease), filter 0.5s, opacity 0.4s; }
    header.scrolled .logo .logo-mark { height: 34px; }
    header.scrolled .logo .logo-wordmark { height: 28px; }

    /* Dynamische Header-Farbvarianten je nach Section darunter */
    header[data-mode="dark"] {
      /* Transparent mit sanftem Dunkel-Gradient oben → Nav bleibt lesbar, Bild schimmert durch */
      background: linear-gradient(180deg, rgba(20,12,6,0.7) 0%, rgba(20,12,6,0.25) 60%, rgba(20,12,6,0) 100%);
      color: var(--white);
      border-bottom: 1px solid transparent;
    }
    header[data-mode="walnut"] {
      background: var(--walnut);
      color: var(--white);
      border-bottom: 1px solid rgba(196,169,125,0.12);
    }
    header[data-mode="cream"] {
      background: var(--cream);
      color: var(--walnut);
      border-bottom: 1px solid var(--sand);
    }
    header[data-mode="oak-pale"] {
      background: var(--oak-pale);
      color: var(--walnut);
      border-bottom: 1px solid var(--sand);
    }
    /* Logo-Darstellung je nach Mode */
    header[data-mode="dark"] .logo .logo-mark,
    header[data-mode="dark"] .logo .logo-wordmark,
    header[data-mode="walnut"] .logo .logo-mark,
    header[data-mode="walnut"] .logo .logo-wordmark {
      filter: brightness(0) invert(1);
      opacity: 0.85;
    }
    header[data-mode="cream"] .logo .logo-mark,
    header[data-mode="cream"] .logo .logo-wordmark,
    header[data-mode="oak-pale"] .logo .logo-mark,
    header[data-mode="oak-pale"] .logo .logo-wordmark {
      filter: none;
      opacity: 0.72;
    }
    /* Nav-Links */
    header[data-mode="dark"] nav a,
    header[data-mode="walnut"] nav a { color: rgba(255,255,255,0.85); }
    header[data-mode="dark"] nav a:hover,
    header[data-mode="walnut"] nav a:hover { color: var(--white); }
    header[data-mode="cream"] nav a,
    header[data-mode="oak-pale"] nav a { color: var(--ash); }
    header[data-mode="cream"] nav a:hover,
    header[data-mode="oak-pale"] nav a:hover { color: var(--walnut); }
    /* Hamburger */
    header[data-mode="dark"] .hamburger span,
    header[data-mode="walnut"] .hamburger span { background: var(--white); }
    header[data-mode="cream"] .hamburger span,
    header[data-mode="oak-pale"] .hamburger span { background: var(--walnut); }

    /* Service-Card 3D-Tilt vorbereitet (JS triggert) */
    .service-card {
      transform-style: preserve-3d;
      transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  box-shadow 0.25s;
      will-change: transform;
    }
    .service-card:hover { box-shadow: 0 24px 60px rgba(61, 43, 31, 0.18); }

    /* Mobile: Hero = Bild-Streifen oben + Textblock darunter auf walnut */
    @media (max-width: 900px) {
      #hero {
        min-height: auto;
        height: auto;
        display: block;
        background: var(--walnut);
        overflow: visible;
      }
      #hero::before,
      #hero::after { display: none; }

      .hero-bg {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        height: 240px;
        background-image: url("/assets/fotos/web/team-gruppenbild.jpg");
        background-size: 150% auto;
        background-position: 72% 45%;
        background-repeat: no-repeat;
        background-color: var(--walnut);
        transform: none !important;
        margin: 0 !important;
      }
      .hero-content { padding-top: 0; }
      .hero-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
          rgba(20,12,6,0) 70%,
          rgba(61,43,31,1) 100%);
      }

      .hero-content {
        position: static;
        padding: 36px 24px 16px;
      }
      .hero-inner { max-width: 100%; padding-right: 0; }
      .hero-badge { margin-bottom: 24px; }
      .hero-headline { margin-bottom: 20px; }
      .hero-sub { margin-bottom: 32px; }

      .hero-stats {
        position: static;
        display: flex;
        width: 100%;
        margin-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      .stat-item {
        flex: 1;
        padding: 14px 10px;
        border-left: 1px solid rgba(255,255,255,0.07);
      }
      .stat-item:first-child { border-left: none; }
      .stat-num { font-size: 28px; }
      .stat-label { font-size: 10px; }

      .scroll-hint { display: none !important; } /* generelle Scroll-Hint-Regel kommt im CSS nach dieser Media-Query, braucht !important */

      /* Header auf Mobile: durchgehend solides walnut (NICHT transparent/blurred —
         sonst beiger Hintergrund schimmert durch und Hamburger-Striche verschwinden) */
      header,
      header[data-mode="dark"],
      header[data-mode="walnut"] {
        background: var(--walnut) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      /* Header-Modes mit hellem Grund dürfen natürlich hell bleiben */
      header[data-mode="cream"] { background: var(--cream) !important; }
      header[data-mode="oak-pale"] { background: var(--oak-pale) !important; }

      /* Hamburger immer sichtbar: auf dunklem Header weiße Striche,
         auf hellem Header walnut */
      header[data-mode="cream"] .hamburger span,
      header[data-mode="oak-pale"] .hamburger span { background: var(--walnut) !important; }

      /* Mobile Logo: initial groß (Begrüßungs-Impact), beim Scroll kompakt */
      header:not(.scrolled) .logo .logo-mark { height: 46px; }
      header:not(.scrolled) .logo .logo-juergen {
        display: block;
        height: 26px;
      }
      header:not(.scrolled) .logo .logo-tagline { font-size: 8px; letter-spacing: 0.28em; }
      .logo { gap: 10px; }
      .logo .logo-stack { gap: 3px; }
      header.scrolled .logo .logo-mark { height: 28px; }
      header.scrolled .logo .logo-wordmark { height: 22px; }

      /* Header-Höhe initial großzügiger (für großes Logo), scrolled kompakter */
      header:not(.scrolled) { height: 88px; }
      header.scrolled { height: 56px; }

      /* Mobile-Nav-Drawer: hängt direkt am Header-Unterrand, folgt dem Shrink
         (sibling-Selektor greift weil mobile-nav direkt nach header im DOM kommt) */
      .mobile-nav {
        top: 88px;
        transition: top 0.3s var(--ease), transform 0.4s var(--ease);
      }
      header.scrolled ~ .mobile-nav { top: 56px; }
    }

    /* Decorative vertical accent bar */
    .hero-accent {
      position: absolute;
      top: 0; right: 18%;
      width: 1px;
      height: 100%;
      background: linear-gradient(180deg, transparent, rgba(196,169,125,0.3) 30%, rgba(196,169,125,0.15) 70%, transparent);
      z-index: 2;
    }

    .hero-content {
      position: relative;
      z-index: 3;
      padding-top: var(--hdr-h);
      width: 100%;
    }

    .hero-inner {
      max-width: 760px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--oak-light);
      margin-bottom: 36px;
      opacity: 0;
      animation: fadeUp 0.8s 0.3s var(--ease) forwards;
    }
    .hero-badge::before {
      content: '';
      display: block;
      width: 28px; height: 1px;
      background: var(--oak-light);
    }

    .hero-headline {
      font-family: var(--ff-display);
      font-size: clamp(48px, 7.5vw, 96px);
      font-weight: 300;
      line-height: 1.04;
      color: var(--white);
      letter-spacing: -0.01em;
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeUp 0.9s 0.5s var(--ease) forwards;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--oak-light);
    }

    .hero-sub {
      font-size: clamp(15px, 2vw, 18px);
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,0.65);
      max-width: 520px;
      margin-bottom: 52px;
      opacity: 0;
      animation: fadeUp 0.9s 0.7s var(--ease) forwards;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 0.9s 0.9s var(--ease) forwards;
    }

    .hero-tel {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.6);
      transition: color 0.3s;
    }
    .hero-tel:hover { color: var(--oak-light); }
    .hero-tel svg { opacity: 0.5; }

    .hero-reassurance {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.05em;
      color: var(--oak-light);
      opacity: 0.85;
    }
    .hero-reassurance svg { flex-shrink: 0; }

    /* Scroll indicator */
    .scroll-hint {
      position: absolute;
      bottom: 40px; left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      opacity: 0;
      animation: fadeIn 1s 1.4s var(--ease) forwards;
    }
    .scroll-hint span {
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
    }
    .scroll-line {
      width: 1px; height: 48px;
      background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    /* Stats bar */
    .hero-stats {
      position: absolute;
      bottom: 0; right: 0;
      z-index: 3;
      display: flex;
      opacity: 0;
      animation: fadeIn 1s 1.1s var(--ease) forwards;
    }
    .stat-item {
      padding: 28px 36px;
      background: rgba(255,255,255,0.04);
      border-left: 1px solid rgba(255,255,255,0.07);
      text-align: center;
    }
    .stat-item:first-child { border-left: none; }
    .stat-num {
      font-family: var(--ff-display);
      font-size: 36px;
      font-weight: 300;
      color: var(--oak-light);
      line-height: 1;
    }
    .stat-label {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-top: 6px;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.3; transform: scaleY(1); }
      50% { opacity: 0.7; transform: scaleY(0.8); }
    }

    /* ─────────────────────────────────────────
       TRUST BAR
    ───────────────────────────────────────── */
    .trust-bar {
      background: var(--walnut);
      padding: 20px 0;
      overflow: hidden;
    }
    .trust-marquee {
      display: flex;
      overflow: hidden;
    }
    .trust-track {
      display: flex;
      align-items: center;
      animation: trustScroll 40s linear infinite;
      /* Reduce motion respektieren */
    }
    .trust-group {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 32px;
      border-right: 1px solid rgba(255,255,255,0.1);
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.7);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .trust-item svg { color: var(--oak-light); flex-shrink: 0; }

    @keyframes trustScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-25%); } /* Vier identische Gruppen → nahtloser Loop bei -25% */
    }
    @media (prefers-reduced-motion: reduce) {
      .trust-track { animation: none; justify-content: center; flex-wrap: wrap; }
      .trust-group[aria-hidden] { display: none; }
    }
    @media (hover: hover) {
      .trust-bar:hover .trust-track { animation-play-state: paused; }
    }

    /* ─────────────────────────────────────────
       ABOUT / ÜBER UNS
    ───────────────────────────────────────── */
    #ueber-uns {
      padding: 120px 0;
      background: var(--cream);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-visual {
      position: relative;
    }

    /* Placeholder image — warm wooden texture frame */
    .about-img-frame {
      position: relative;
      aspect-ratio: 4/5;
      max-width: 440px;
    }
    .about-img-frame::before {
      content: '';
      position: absolute;
      top: 24px; left: 24px; right: -24px; bottom: -24px;
      border: 1px solid var(--oak-light);
      opacity: 0.4;
      z-index: 0;
    }
    .about-img-placeholder {
      position: relative;
      z-index: 1;
      width: 100%; height: 100%;
      background: linear-gradient(145deg, #C4A97D 0%, #8B6A3E 40%, #3D2B1F 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      color: rgba(255,255,255,0.5);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      overflow: hidden;
    }
    /* Wood-grain pattern in placeholder */
    .about-img-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(
          88deg,
          transparent,
          transparent 28px,
          rgba(255,255,255,0.03) 28px,
          rgba(255,255,255,0.03) 29px
        );
    }
    .about-img-placeholder svg {
      color: rgba(255,255,255,0.25);
      position: relative;
      z-index: 1;
    }
    .about-img-placeholder span { position: relative; z-index: 1; }

    /* Meisterbetrieb badge */
    .meister-badge {
      position: absolute;
      bottom: -20px; right: -20px;
      z-index: 2;
      width: 110px; height: 110px;
      background: var(--walnut);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      box-shadow: 0 8px 32px rgba(61,43,31,0.35);
    }
    .meister-badge .mb-top {
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--oak-light);
    }
    .meister-badge .mb-num {
      font-family: var(--ff-display);
      font-size: 28px;
      font-weight: 300;
      color: var(--white);
      line-height: 1;
    }
    .meister-badge .mb-bot {
      font-size: 8px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }

    .about-text { padding-right: 20px; }

    .about-text .section-label { margin-bottom: 20px; }

    .about-headline {
      font-family: var(--ff-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin-bottom: 28px;
    }
    .about-headline em {
      font-style: italic;
      color: var(--oak);
    }

    .about-lead {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.75;
      color: var(--ash);
      margin-bottom: 24px;
    }

    .about-body {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--text-muted);
      margin-bottom: 40px;
    }

    .about-facts {
      display: flex;
      gap: 40px;
      padding-top: 32px;
      border-top: 1px solid var(--sand);
    }
    .fact-item {}
    .fact-num {
      font-family: var(--ff-display);
      font-size: 40px;
      font-weight: 300;
      color: var(--oak);
      line-height: 1;
    }
    .fact-desc {
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 6px;
    }

    /* ─────────────────────────────────────────
       LEISTUNGEN / SERVICES
    ───────────────────────────────────────── */
    /* ─────────────────────────────────────────
       VIER ABSPRUNG-KARTEN
    ───────────────────────────────────────── */
    .nav-cards {
      padding: 110px 0 120px;
      background: var(--cream);
    }
    .nav-cards-header {
      max-width: 740px;
      margin: 0 auto 64px;
      text-align: center;
    }
    .nav-cards-header .section-label {
      justify-content: center;
      margin: 0 auto 20px;
    }
    .nav-cards-header .section-label::after { display: none; }
    .nav-cards-header .section-label::before {
      content: '';
      display: inline-block;
      width: 40px; height: 1px;
      background: var(--oak-light);
    }
    .nav-cards-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }
    .nav-cards-intro {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--ash);
      max-width: 520px;
      margin: 0 auto;
    }
    .nav-cards-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
    @media (min-width: 1100px) {
      .nav-cards-grid { grid-template-columns: repeat(4, 1fr); }
      .nav-card { aspect-ratio: 3 / 4.2; }
    }
    .nav-card {
      position: relative;
      display: block;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      color: var(--white);
      background: var(--walnut);
      text-decoration: none;
      transition: transform 0.4s var(--ease), box-shadow 0.4s;
      will-change: transform;
    }
    .nav-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 60px rgba(61, 43, 31, 0.3);
    }
    .nav-card-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.8s var(--ease), filter 0.6s;
      z-index: 1;
    }
    .nav-card:hover .nav-card-bg {
      transform: scale(1.08);
      filter: brightness(0.75);
    }
    /* Dark gradient overlay für bessere Textlesbarkeit – deutlich dunkler */
    .nav-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
        rgba(20, 12, 6, 0.55) 0%,
        rgba(20, 12, 6, 0.65) 45%,
        rgba(20, 12, 6, 0.95) 100%);
      z-index: 2;
    }
    /* Content absolut positioniert von unten: Elemente sitzen pixelgenau auf gleicher Höhe,
       egal wie viele Zeilen Text sie haben. Höhe wird fest reserviert. */
    .nav-card-content {
      position: absolute;
      inset: auto 36px 36px 36px;
      z-index: 3;
    }
    .nav-card-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--oak-light);
      line-height: 1.4;
      margin-bottom: 18px;
      /* Immer Platz für 2 Zeilen – kurze Labels sitzen unten in der Box,
         lange Labels (2 Zeilen) füllen die ganze Box → Titel darunter bleibt konstant */
      height: 2.8em;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }
    .nav-card-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 3.5vw, 44px);
      font-weight: 300;
      line-height: 1.05;
      margin-bottom: 16px;
      letter-spacing: -0.01em;
    }
    .nav-card-desc {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.55;
      color: rgba(255,255,255,0.85);
      margin-bottom: 24px;
      /* exakt 2 Zeilen, auch wenn Text kurz ist – Pfeil sitzt immer am gleichen Platz */
      height: calc(2 * 1.55em);
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .nav-card-arrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--oak-light);
      transition: gap 0.3s var(--ease), color 0.3s;
      white-space: nowrap; /* CTA bleibt immer 1-zeilig – sonst verschiebt sich der Titel darüber */
    }
    .nav-card:hover .nav-card-arrow {
      gap: 16px;
      color: var(--white);
    }

    /* Karten-spezifische Hintergrund-Bilder (alle echt von Mellerts Archiv) */
    .nav-card-leistungen .nav-card-bg {
      background-image: url('/assets/fotos-echt/nav-leistungen.jpg');
      background-position: center;
    }
    .nav-card-team .nav-card-bg {
      background-image: url('/assets/fotos/web/team-baum.jpg');
      background-position: 25% center;
    }
    .nav-card-referenzen .nav-card-bg {
      background-image: url('/assets/fotos-echt/nav-referenzen.jpg');
      background-position: center;
    }
    .nav-card-beratung .nav-card-bg {
      background-image: url('/assets/fotos-echt/nav-beratung.jpg');
      background-position: center;
    }

    @media (max-width: 900px) {
      .nav-cards-grid { grid-template-columns: 1fr; gap: 20px; }
      /* Content fließt natürlich — kein aspect-ratio-Crop mehr */
      .nav-card {
        aspect-ratio: auto !important;
        min-height: 320px;
        height: auto !important;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
      }
      .nav-card-content {
        position: relative !important;
        z-index: 3;
        inset: auto !important;
        padding: 32px 28px 28px;
        margin-top: auto;
      }
      .nav-card-label {
        height: auto !important;
        margin-bottom: 12px;
      }
      .nav-card-title {
        font-size: 32px;
        margin-bottom: 10px;
      }
      .nav-card-desc {
        height: auto !important;
        -webkit-line-clamp: unset;
        display: block;
        margin-bottom: 18px;
      }
    }

    /* ─────────────────────────────────────────
       SO ARBEITEN WIR · HORIZONTALE TIMELINE
    ───────────────────────────────────────── */
    .process-section {
      padding: 140px 0;
      background: var(--oak-pale);
      position: relative;
      overflow: hidden;
    }
    .process-header { margin-bottom: 100px; max-width: 720px; }
    .process-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin-top: 18px;
      letter-spacing: -0.01em;
    }
    /* ─────────────────────────────────────────
       LEISTUNGEN-UNTERSEITE · Services + Materialien
    ───────────────────────────────────────── */
    .svc-section {
      padding: 80px 0 100px;
      background: var(--cream);
    }
    .svc-header { margin-bottom: 56px; }
    .svc-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin-top: 18px;
      letter-spacing: -0.01em;
    }
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
    }
    .svc-card {
      position: relative;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      background: var(--walnut);
      color: var(--white);
      transition: transform 0.4s var(--ease);
    }
    .svc-card:hover { transform: translateY(-6px); }
    .svc-visual {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.8s var(--ease);
    }
    .svc-card:hover .svc-visual { transform: scale(1.06); }
    .svc-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(20,12,6,0.75) 0%,
        rgba(20,12,6,0.45) 50%,
        rgba(20,12,6,0.85) 100%);
      z-index: 1;
    }
    .svc-content {
      position: absolute;
      inset: 0;
      padding: 36px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      z-index: 2;
    }
    .svc-num {
      font-family: var(--ff-display);
      font-size: 48px;
      font-weight: 300;
      color: var(--oak-light);
      line-height: 1;
      margin-bottom: 12px;
      opacity: 0.85;
    }
    .svc-name {
      font-family: var(--ff-display);
      font-size: clamp(26px, 2.8vw, 34px);
      font-weight: 500;
      color: var(--white);
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }
    .svc-desc {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,0.85);
      max-width: 460px;
    }
    @media (max-width: 700px) {
      .svc-grid { grid-template-columns: 1fr; gap: 20px; }
      /* aspect-ratio 3/2 ist auf schmalem Viewport (iPhone 12 mini) zu niedrig →
         Nummer wird oben aus der Karte gecroppt. Deshalb aspect raus, Karte wächst mit Content */
      .svc-card {
        aspect-ratio: auto !important;
        min-height: 320px;
      }
      .svc-content {
        position: relative !important;
        inset: auto !important;
        padding: 32px 28px;
      }
      .svc-num { font-size: 36px; margin-bottom: 8px; }
    }

    /* ─────────────────────────────────────────
       HORIZONTAL-SCROLL MATERIALIEN
    ───────────────────────────────────────── */
    .hscroll-section {
      position: relative;
      /* Scroll-Weg skaliert mit Anzahl Items; ~45vh pro Item */
      height: 460vh;
      background: var(--oak-pale);
    }
    .hscroll-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .hscroll-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 80px 48px 40px;
      gap: 32px;
      flex-shrink: 0;
    }
    .hscroll-head-inner { max-width: 720px; }
    .hscroll-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin-top: 14px;
      letter-spacing: -0.01em;
    }
    .hscroll-progress {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .hscroll-progress-bar {
      width: 140px; height: 2px;
      background: rgba(139,106,62,0.2);
      position: relative;
      overflow: hidden;
    }
    .hscroll-progress-bar::after {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      background: var(--oak);
      width: var(--hscroll-progress, 0%);
      transition: width 0.1s linear;
    }
    .hscroll-hint {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--oak);
      opacity: 0.6;
      white-space: nowrap;
    }
    .hscroll-track-wrap {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .hscroll-track {
      display: flex;
      gap: 24px;
      padding: 0 48px 60px;
      height: 100%;
      align-items: center;
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }
    .hscroll-item {
      flex-shrink: 0;
      width: 400px;
      height: 65vh;
      max-height: 540px;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(61,43,31,0.18);
    }
    .hscroll-item::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
        rgba(20,12,6,0) 0%,
        rgba(20,12,6,0.15) 45%,
        rgba(20,12,6,0.88) 100%);
    }
    .hscroll-item-content {
      position: absolute;
      inset: auto 32px 32px 32px;
      color: var(--white);
      z-index: 2;
    }
    .hscroll-item-num {
      font-family: var(--ff-display);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.2em;
      color: var(--oak-light);
      display: block;
      margin-bottom: 10px;
    }
    .hscroll-item-name {
      font-family: var(--ff-display);
      font-size: 26px;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 10px;
      line-height: 1.1;
    }
    .hscroll-item-desc {
      font-size: 13px;
      font-weight: 300;
      line-height: 1.55;
      color: rgba(255,255,255,0.85);
      max-width: 320px;
    }

    /* Swipe-Hint nur auf Mobile sichtbar */
    .hscroll-swipe-hint { display: none; }

    /* Mobile Fallback: normaler vertikaler Scroll, kein Pin */
    @media (max-width: 900px) {
      .hscroll-section { height: auto; }
      .hscroll-sticky { position: static; height: auto; }
      .hscroll-head { padding: 60px 24px 30px; flex-direction: column; align-items: flex-start; }
      .hscroll-progress { display: none; }
      .hscroll-swipe-hint {
        display: block;
        margin-top: 18px;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--oak);
        opacity: 0.75;
      }
      .hscroll-track-wrap { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
      .hscroll-track { transform: none !important; padding: 0 24px 48px; height: auto; }
      .hscroll-item {
        width: 85vw;
        /* Responsiv statt starr 480px — auf kleinen iPhones (<700px Höhe) sonst zu groß */
        height: 65svh;
        min-height: 360px;
        max-height: 520px;
        scroll-snap-align: center;
      }
      /* Marquee-Band: auf Mobile deutlich schneller durchlaufen (!important weil die
         generelle Regel später im CSS steht und sonst überschreibt) */
      .marquee-track { animation-duration: 10s !important; }
    }

    /* Alte Materials-Grid Styles aus Legacy-Variante (ungenutzt) */
    .materials-section {
      padding: 100px 0 120px;
      background: var(--oak-pale);
    }
    .materials-header {
      margin-bottom: 64px;
      max-width: 720px;
    }
    .materials-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin: 18px 0 18px;
      letter-spacing: -0.01em;
    }
    .materials-intro {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--ash);
    }
    .materials-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
    }
    .material-item {
      cursor: default;
      transition: transform 0.4s var(--ease);
    }
    .material-item:hover { transform: translateY(-4px); }
    .material-image {
      aspect-ratio: 4 / 3;
      background-size: cover;
      background-position: center;
      margin-bottom: 14px;
      transition: box-shadow 0.4s;
    }
    .material-item:hover .material-image {
      box-shadow: 0 12px 32px rgba(61,43,31,0.18);
    }
    .material-name {
      font-family: var(--ff-display);
      font-size: 17px;
      font-weight: 500;
      color: var(--walnut);
      margin-bottom: 6px;
      letter-spacing: -0.005em;
    }
    .material-desc {
      font-size: 12px;
      font-weight: 300;
      line-height: 1.55;
      color: var(--ash);
    }
    @media (max-width: 1100px) {
      .materials-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 700px) {
      .materials-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    }
    @media (max-width: 420px) {
      .materials-grid { grid-template-columns: 1fr; }
    }

    /* Zeitreise-Timeline: Linie füllt sich, Kreise aktivieren sich nacheinander */
    .process-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    /* Statische Hintergrund-Linie (dezent grau) */
    .process-grid::before {
      content: '';
      position: absolute;
      top: 36px;
      left: 15%; right: 15%;
      height: 2px;
      background: rgba(139,106,62,0.25);
      z-index: 0;
    }
    /* Animierte Oak-Linie, wächst beim Scroll-Trigger */
    .process-grid::after {
      content: '';
      position: absolute;
      top: 36px;
      left: 15%;
      height: 2px;
      width: 0;
      background: var(--oak);
      z-index: 1;
      transition: width 2.8s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .process-grid.active::after { width: 70%; }

    .process-step {
      position: relative;
      text-align: center;
      padding: 0 12px;
      z-index: 2;
    }
    .process-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 72px; height: 72px;
      background: #a89787; /* inaktiv: gedämpftes braun-grau */
      color: var(--white);
      font-family: var(--ff-display);
      font-size: 22px;
      font-weight: 500;
      border-radius: 50%;
      margin: 0 auto 26px;
      box-shadow: 0 4px 14px rgba(61,43,31,0.18);
      transition:
        background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.5s;
    }
    /* Beim Hover: direkt Oak-Highlight */
    .process-step:hover .process-num {
      background: var(--oak);
      transform: scale(1.08);
      box-shadow: 0 10px 28px rgba(139,106,62,0.4);
    }
    /* Aktiviert durch JS wenn Timeline dort ankommt – mit kleinem Pulse */
    .process-step.step-active .process-num {
      background: var(--walnut);
      animation: stepPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 24px rgba(61,43,31,0.35);
    }
    @keyframes stepPulse {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.18); background: var(--oak); }
      100% { transform: scale(1); }
    }

    /* Titel + Desc: initial gedämpft, aktiviert sich mit dem Kreis */
    .process-step-title {
      font-family: var(--ff-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--walnut);
      margin-bottom: 12px;
      line-height: 1.15;
      opacity: 0.4;
      transform: translateY(8px);
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .process-step-desc {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--ash);
      max-width: 240px;
      margin: 0 auto;
      opacity: 0.4;
      transform: translateY(8px);
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
    }
    .process-step.step-active .process-step-title,
    .process-step.step-active .process-step-desc {
      opacity: 1;
      transform: translateY(0);
    }
    .process-icon { display: none; }
    @media (max-width: 900px) {
      .process-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 20px; }
      .process-grid::before { display: none; }
    }

    /* Mobile: horizontaler Swipe durch die 4 Steps mit Peek-Edge
       (nächster Step ragt rechts rein → Signal "da kommt noch was") */
    @media (max-width: 700px) {
      .process-section .container {
        max-width: 100%;
        padding: 0;
      }
      .process-header {
        padding: 0 24px;
        margin-bottom: 32px;
      }
      .process-grid {
        display: flex;
        grid-template-columns: unset;
        gap: 16px;
        padding: 10px 0 20px 24px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .process-grid::-webkit-scrollbar { display: none; }
      .process-grid::before,
      .process-grid::after { display: none; }

      .process-step {
        flex: 0 0 82vw; /* 82% Breite → nächster Step ragt 18% hinein als Peek */
        max-width: 360px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 24px 36px;
        background: var(--cream);
        border-radius: 2px;
        box-shadow: 0 2px 12px rgba(61,43,31,0.08);
        opacity: 1;
        position: relative;
      }
      /* Chevron-Pfeile direkt an jeder Karte: links=zurück, rechts=weiter */
      .process-step::before,
      .process-step::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.5;
        pointer-events: none;
      }
      .process-step::before {
        left: 8px;
        transform: scaleX(-1); /* Pfeil nach links */
      }
      .process-step::after {
        right: 8px;
      }
      /* Erste Karte: kein linker Pfeil (nichts vorher). Letzte: kein rechter. */
      .process-step:first-child::before,
      .process-step:last-child::after {
        display: none;
      }
      .process-step .process-step-title,
      .process-step .process-step-desc {
        opacity: 1;
        transform: none;
      }
      .process-step .process-num {
        background: var(--oak);
        width: 68px; height: 68px;
        font-size: 22px;
        margin-bottom: 20px;
      }
      .process-step-title { font-size: 22px; margin-bottom: 12px; }
      .process-step-desc { font-size: 14px; }

      /* Swipe-Hint unter der Headline */
      .process-header::after {
        content: '← wischen für mehr Schritte →';
        display: block;
        margin-top: 18px;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--oak);
        opacity: 0.7;
      }

      /* Prozess hat nur 4 Steps — Pfeil-Andeutung weggelassen, nur Text-Hint reicht
         (sonst verwirrt sie am letzten Step wo nicht mehr gewischt werden kann) */

      /* Material-Karten (hscroll-item): statische Chevron-Pfeile links+rechts
         direkt an jeder Karte, wie bei den Prozess-Karten */
      .hscroll-item { position: relative; }
      .hscroll-item::before,
      .hscroll-item::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EFE6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.75;
        pointer-events: none;
        z-index: 3;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
      }
      .hscroll-item::before {
        left: 8px;
        transform: scaleX(-1);
      }
      .hscroll-item::after {
        right: 8px;
      }
      .hscroll-item:first-child::before,
      .hscroll-item:last-child::after {
        display: none;
      }
    }
    /* process-pin-wrap ist auf allen Viewports jetzt ein normaler Durchlauf-Container */
    .process-pin-wrap { display: contents; }
    .process-progress-dots { display: none; }

    /* ─────────────────────────────────────────
       MARQUEE · LAUFENDES BAND
    ───────────────────────────────────────── */
    .marquee-band {
      background: var(--walnut);
      padding: 18px 0;
      overflow: hidden;
      border-top: 1px solid rgba(196,169,125,0.15);
      border-bottom: 1px solid rgba(196,169,125,0.15);
    }
    .marquee-track {
      display: flex;
      gap: 40px;
      white-space: nowrap;
      animation: marqueeScroll 50s linear infinite;
      font-family: var(--ff-display);
      font-size: clamp(16px, 1.6vw, 22px);
      font-weight: 300;
      color: var(--oak-light);
      letter-spacing: 0.02em;
    }
    .marquee-track span {
      flex-shrink: 0;
      padding-right: 40px;
    }
    .marquee-track em {
      color: var(--oak);
      opacity: 0.5;
      font-style: normal;
      margin: 0 6px;
    }
    @keyframes marqueeScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-33.33%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none; }
    }

    /* ─────────────────────────────────────────
       KUNDENZITAT · TESTIMONIAL
    ───────────────────────────────────────── */
    .testimonial-section {
      padding: 140px 0;
      background: var(--walnut);
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .testimonial-quote-mark {
      color: var(--oak-light);
      display: block;
      margin: 0 auto 32px;
    }
    .testimonial-text {
      font-family: var(--ff-display);
      font-size: clamp(26px, 3.2vw, 42px);
      font-weight: 300;
      line-height: 1.4;
      color: var(--white);
      max-width: 920px;
      margin: 0 auto;
      letter-spacing: -0.005em;
    }
    .testimonial-text em {
      font-style: italic;
      color: var(--oak-light);
      font-weight: 300;
    }
    .testimonial-attribution {
      margin-top: 36px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--oak-light);
      opacity: 0.7;
    }

    /* ─────────────────────────────────────────
       WERTE · PARALLAX-SECTION mit Parkett-Hintergrund
    ───────────────────────────────────────── */
    .values-section {
      position: relative;
      padding: 160px 0;
      background-image: url('/assets/texturen/parquet-dark.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed; /* echter Parallax auf Desktop */
      color: var(--white);
      overflow: hidden;
    }
    .values-section::before {
      content: '';
      position: absolute;
      inset: 0;
      /* Warmes Walnut-Overlay statt pure Schwarz – lässt das Parkett-Bild deutlich mehr durchleuchten */
      background: linear-gradient(180deg,
        rgba(61, 43, 31, 0.72) 0%,
        rgba(61, 43, 31, 0.58) 50%,
        rgba(61, 43, 31, 0.72) 100%);
    }
    .values-section > .container { position: relative; z-index: 2; }
    .values-header { margin-bottom: 80px; max-width: 720px; }
    .values-header .section-label { color: var(--oak-light); }
    .values-header .section-label::after { background: var(--oak-light); }
    .values-title {
      font-family: var(--ff-display);
      font-size: clamp(36px, 4.5vw, 56px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--white);
      margin-top: 18px;
      letter-spacing: -0.01em;
    }
    .values-title em {
      font-style: italic;
      color: var(--oak-light);
      font-weight: 300;
    }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
    .value-item {
      padding: 32px 24px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(196,169,125,0.15);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease);
    }
    .value-item:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(196,169,125,0.4);
      transform: translateY(-4px);
    }
    .value-icon {
      width: 42px; height: 42px;
      color: var(--oak-light);
      margin-bottom: 20px;
      opacity: 0.95;
    }
    .value-name {
      font-family: var(--ff-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 12px;
    }
    .value-desc {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.72);
    }
    /* iOS Fallback: background-attachment:fixed funktioniert nicht gut auf Touch */
    @media (max-width: 900px) {
      .values-section { background-attachment: scroll; padding: 100px 0; }
      .values-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    }
    @media (max-width: 560px) {
      .values-grid { grid-template-columns: 1fr; }
    }

    /* ─────────────────────────────────────────
       FAQ
    ───────────────────────────────────────── */
    .faq-section {
      padding: 120px 0;
      background: var(--cream);
      position: relative;
      overflow: hidden;
    }
    /* Logo als dezentes Wasserzeichen hinter dem Text */
    .faq-section::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 720px;
      height: 720px;
      background-image: url('/assets/logo/logo.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.045; /* niedrig damit Text gut lesbar bleibt */
      pointer-events: none;
      z-index: 0;
    }
    .faq-section > .container { position: relative; z-index: 1; }
    @media (max-width: 900px) {
      .faq-section::before {
        width: 480px; height: 480px;
        opacity: 0.04;
      }
    }
    .faq-header { margin-bottom: 56px; max-width: 720px; }
    .faq-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin-top: 18px;
      letter-spacing: -0.01em;
    }
    .faq-list {
      max-width: 820px;
      margin: 0 auto;
    }
    .faq-item {
      border-top: 1px solid var(--sand);
      padding: 0;
    }
    .faq-item:last-child { border-bottom: 1px solid var(--sand); }
    .faq-item summary {
      position: relative;
      padding: 28px 48px 28px 0;
      font-family: var(--ff-display);
      font-size: 20px;
      font-weight: 400;
      color: var(--walnut);
      cursor: pointer;
      list-style: none;
      transition: color 0.3s;
    }
    .faq-item summary:hover { color: var(--oak); }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      position: absolute;
      right: 8px; top: 50%;
      transform: translateY(-50%);
      font-size: 28px;
      font-weight: 300;
      color: var(--oak);
      transition: transform 0.3s var(--ease);
    }
    .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
    .faq-answer {
      padding: 0 48px 32px 0;
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--ash);
    }

    /* ─────────────────────────────────────────
       SHOWROOM
    ───────────────────────────────────────── */
    .showroom-section {
      padding: 130px 0;
      background: var(--walnut);
      color: var(--white);
    }
    .showroom-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .showroom-text .section-label { color: var(--oak-light); margin-bottom: 20px; }
    .showroom-text .section-label::after { background: var(--oak-light); }
    .showroom-title {
      font-family: var(--ff-display);
      font-size: clamp(36px, 4.5vw, 56px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--white);
      margin-bottom: 28px;
      letter-spacing: -0.01em;
    }
    .showroom-title em {
      font-style: italic;
      color: var(--oak-light);
      font-weight: 300;
    }
    .showroom-lead {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(255,255,255,0.75);
      margin-bottom: 36px;
    }
    .showroom-meta {
      padding: 24px 0;
      border-top: 1px solid rgba(196,169,125,0.2);
      border-bottom: 1px solid rgba(196,169,125,0.2);
      margin-bottom: 36px;
    }
    .showroom-meta-row {
      display: flex;
      gap: 12px;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255,255,255,0.7);
      padding: 6px 0;
    }
    .showroom-meta-row strong {
      min-width: 90px;
      font-weight: 500;
      color: var(--oak-light);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 11px;
      padding-top: 2px;
    }
    .showroom-visual {
      aspect-ratio: 9 / 16;
      max-width: 420px;
      background: rgba(255,255,255,0.03);
      overflow: hidden;
      position: relative;
      box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    }
    .showroom-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    @media (max-width: 900px) {
      .showroom-grid { grid-template-columns: 1fr; gap: 48px; }
      .showroom-visual { max-width: 420px; margin: 0 auto; }
    }

    /* ─────────────────────────────────────────
       INSTAGRAM-TEASER (ungenutzt – aufbewahrt für ggf. späteren Widget-Einbau)
    ───────────────────────────────────────── */
    .instagram-section {
      padding: 120px 0;
      background: var(--cream);
    }
    .instagram-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 56px;
      flex-wrap: wrap;
      gap: 32px;
    }
    .instagram-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin-top: 16px;
      letter-spacing: -0.01em;
    }
    .instagram-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
    }
    .instagram-item {
      aspect-ratio: 1 / 1;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
      transition: transform 0.4s var(--ease);
    }
    .instagram-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(61, 43, 31, 0);
      transition: background 0.3s;
    }
    .instagram-item:hover { transform: scale(0.97); }
    .instagram-item:hover::after { background: rgba(61, 43, 31, 0.3); }
    @media (max-width: 900px) {
      .instagram-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .statement-band {
      position: relative;
      padding: 140px 0;
      background: var(--oak-pale);
      text-align: center;
      overflow: hidden;
    }
    .statement-mark {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(200px, 25vw, 320px);
      height: auto;
      color: var(--oak);
      opacity: 0.08;
      pointer-events: none;
    }
    .statement-inner {
      position: relative;
      z-index: 2;
      max-width: 820px;
      margin: 0 auto;
    }
    .statement-label {
      justify-content: center;
      margin: 0 auto 32px;
    }
    .statement-label::after { display: none; }
    .statement-label::before {
      content: '';
      display: inline-block;
      width: 40px; height: 1px;
      background: var(--oak-light);
    }
    .statement-quote {
      font-family: var(--ff-display);
      font-size: clamp(24px, 2.8vw, 36px);
      font-weight: 300;
      line-height: 1.45;
      color: var(--walnut);
      letter-spacing: -0.005em;
    }
    .statement-quote em {
      font-style: italic;
      color: var(--oak);
      font-weight: 300;
    }
    .statement-divider {
      width: 48px;
      height: 1px;
      background: var(--oak-light);
      margin: 44px auto 24px;
    }
    .statement-signature {
      font-family: var(--ff-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--oak);
    }
    .statement-signature span {
      margin: 0 8px;
      color: var(--oak-light);
      opacity: 0.6;
    }

    #leistungen {
      padding: 120px 0;
      background: var(--walnut);
      position: relative;
      overflow: hidden;
    }

    /* Decorative background geometry */
    #leistungen::before {
      content: '';
      position: absolute;
      top: -150px; right: -150px;
      width: 500px; height: 500px;
      border: 1px solid rgba(196,169,125,0.08);
      border-radius: 50%;
    }
    #leistungen::after {
      content: '';
      position: absolute;
      top: -50px; right: -50px;
      width: 300px; height: 300px;
      border: 1px solid rgba(196,169,125,0.08);
      border-radius: 50%;
    }

    .leistungen-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 72px;
      flex-wrap: wrap;
      gap: 32px;
    }

    .leistungen-header .section-label { color: var(--oak-light); }
    .leistungen-header .section-label::after { background: rgba(196,169,125,0.4); }

    .leistungen-title {
      font-family: var(--ff-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 300;
      color: var(--white);
      line-height: 1.1;
      margin-top: 16px;
    }
    .leistungen-title em { font-style: italic; color: var(--oak-light); }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
    }

    .service-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      padding: 44px 32px 40px;
      transition: background 0.35s var(--ease), border-color 0.35s;
      position: relative;
      overflow: hidden;
      cursor: default;
    }
    .service-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 2px;
      background: var(--oak-light);
      transition: width 0.4s var(--ease);
    }
    .service-card:hover { background: rgba(255,255,255,0.07); }
    .service-card:hover::before { width: 100%; }

    .service-icon {
      width: 52px; height: 52px;
      margin-bottom: 28px;
      color: var(--oak-light);
      opacity: 0.85;
    }

    .service-number {
      position: absolute;
      top: 32px; right: 28px;
      font-family: var(--ff-display);
      font-size: 64px;
      font-weight: 300;
      color: rgba(196,169,125,0.06);
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .service-name {
      font-family: var(--ff-display);
      font-size: 26px;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 16px;
      line-height: 1.15;
    }

    .service-desc {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.5);
      margin-bottom: 28px;
    }

    .service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .service-tag {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 12px;
      border: 1px solid rgba(196,169,125,0.2);
      color: rgba(196,169,125,0.6);
    }

    /* ─────────────────────────────────────────
       REFERENZEN / PORTFOLIO
    ───────────────────────────────────────── */
    #referenzen {
      padding: 120px 0;
      background: var(--cream);
    }

    .ref-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: flex-end;
      margin-bottom: 64px;
    }

    .ref-title {
      font-family: var(--ff-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 300;
      color: var(--walnut);
      line-height: 1.1;
      margin-top: 16px;
    }
    .ref-title em { font-style: italic; color: var(--oak); }

    .ref-intro {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--text-muted);
      padding-top: 8px;
    }

    .ref-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3px;
    }

    .ref-card {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: var(--sand);
      cursor: pointer;
    }

    /* Placeholder image fill */
    .ref-card-bg {
      position: absolute;
      inset: 0;
      transition: transform 0.6s var(--ease);
    }
    .ref-card:hover .ref-card-bg { transform: scale(1.05); }

    .ref-card-bg-1 { background: linear-gradient(135deg, #C4A97D 0%, #8B6A3E 50%, #3D2B1F 100%); }
    .ref-card-bg-2 { background: linear-gradient(135deg, #6B4E2A 0%, #9E7A50 50%, #C8A97F 100%); }
    .ref-card-bg-3 { background: linear-gradient(135deg, #3D2B1F 0%, #6B4E2A 50%, #A07B52 100%); }
    .ref-card-bg-4 { background: linear-gradient(135deg, #8B6A3E 0%, #5C3D20 40%, #2E1A0E 100%); }

    /* Wood-grain on ref cards */
    .ref-card-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(
          85deg,
          transparent, transparent 20px,
          rgba(255,255,255,0.025) 20px, rgba(255,255,255,0.025) 21px
        );
    }

    .ref-img-label {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: rgba(255,255,255,0.2);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      z-index: 1;
      transition: opacity 0.4s;
    }
    .ref-card:hover .ref-img-label { opacity: 0; }

    .ref-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(20,10,5,0.88) 100%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 32px;
      opacity: 0;
      transition: opacity 0.4s var(--ease);
    }
    .ref-card:hover .ref-overlay { opacity: 1; }

    .ref-tag {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--oak-light);
      margin-bottom: 8px;
    }
    .ref-name {
      font-family: var(--ff-display);
      font-size: 22px;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 10px;
    }
    .ref-desc {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.7);
      line-height: 1.6;
    }

    /* Always-visible label strip at bottom */
    .ref-label-strip {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 16px 24px;
      background: linear-gradient(0deg, rgba(20,10,5,0.7) 0%, transparent 100%);
      z-index: 3;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      pointer-events: none;
    }
    .ref-strip-name {
      font-family: var(--ff-display);
      font-size: 17px;
      font-weight: 400;
      color: var(--white);
    }
    .ref-strip-type {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--oak-light);
    }

    .ref-cta-row {
      margin-top: 52px;
      text-align: center;
    }
    .ref-cta-row p {
      font-size: 14px;
      font-weight: 300;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    /* ─────────────────────────────────────────
       CONTACT / KONTAKT
    ───────────────────────────────────────── */
    #kontakt {
      padding: 120px 0 0;
      background: var(--oak-pale);
    }

    .contact-top {
      text-align: center;
      max-width: 600px;
      margin: 0 auto 72px;
    }
    .contact-top .section-label {
      justify-content: center;
      margin-bottom: 20px;
    }
    .contact-top .section-label::after { display: none; }
    .contact-top .section-label::before {
      content: '';
      display: inline-block;
      width: 40px; height: 1px;
      background: var(--oak-light);
    }

    .contact-headline {
      font-family: var(--ff-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 300;
      color: var(--walnut);
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .contact-headline em { font-style: italic; color: var(--oak); }

    .contact-sub {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--ash);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 0;
      background: var(--white);
      box-shadow: 0 20px 80px rgba(61,43,31,0.12);
    }

    /* Form side */
    .contact-form-wrap {
      padding: 60px 56px;
      border-right: 1px solid var(--sand);
    }

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

    .field-group {
      margin-bottom: 24px;
    }
    .field-group.full { grid-column: 1 / -1; }

    label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ash);
      margin-bottom: 8px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      width: 100%;
      padding: 14px 18px;
      border: 1px solid var(--sand);
      background: var(--cream);
      font-family: var(--ff-body);
      font-size: 14px;
      font-weight: 300;
      color: var(--text);
      outline: none;
      transition: border-color 0.3s, box-shadow 0.3s;
      -webkit-appearance: none;
    }
    input:focus, textarea:focus, select:focus {
      border-color: var(--oak);
      box-shadow: 0 0 0 3px rgba(139,106,62,0.1);
    }

    textarea {
      resize: vertical;
      min-height: 120px;
    }

    select { cursor: pointer; }

    .form-note {
      font-size: 12px;
      font-weight: 300;
      color: var(--text-muted);
      margin-top: 8px;
    }
    .req { color: var(--oak); font-weight: 500; }

    /* Honeypot: visuell verstecken, aber nicht via display:none (Bots würden das erkennen) */
    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px; height: 1px;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
    }

    /* DSGVO-Checkbox */
    .field-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-top: 8px;
    }
    .field-checkbox input[type="checkbox"] {
      flex-shrink: 0;
      width: 18px; height: 18px;
      margin-top: 2px;
      accent-color: var(--oak);
      cursor: pointer;
    }
    .field-checkbox label {
      font-size: 12px;
      font-weight: 300;
      line-height: 1.6;
      color: var(--ash);
      letter-spacing: 0;
      text-transform: none;
      margin: 0;
      cursor: pointer;
    }
    .field-checkbox label a { color: var(--oak); text-decoration: underline; }
    .field-checkbox label a:hover { color: var(--walnut); }

    /* Validation-States */
    input:invalid:not(:placeholder-shown),
    textarea:invalid:not(:placeholder-shown) {
      border-color: #a44;
    }
    input:valid:not(:placeholder-shown) {
      border-color: var(--oak-light);
    }

    /* Status-Nachrichten (Erfolg / Fehler) */
    .form-status {
      margin-top: 20px;
      font-size: 14px;
      line-height: 1.6;
      padding: 0;
      border-radius: 0;
      transition: all 0.3s;
    }
    .form-status.show-success {
      padding: 16px 20px;
      background: #e8f0e4;
      border-left: 3px solid #4a7c4e;
      color: #2d5230;
    }
    .form-status.show-error {
      padding: 16px 20px;
      background: #f5e6e6;
      border-left: 3px solid #a44;
      color: #7a2d2d;
    }
    .form-status.show-error ul {
      margin: 6px 0 0 18px;
      padding: 0;
    }
    .form-status.show-error li { list-style: disc; font-size: 13px; }

    .form-submit {
      margin-top: 32px;
    }
    .form-submit .btn { width: 100%; justify-content: center; padding: 18px; font-size: 13px; }
    .form-submit .btn[disabled] {
      opacity: 0.6;
      cursor: wait;
      transform: none !important;
      box-shadow: none !important;
    }

    /* Info side */
    .contact-info-wrap {
      padding: 60px 48px;
      background: var(--walnut);
      display: flex;
      flex-direction: column;
    }

    .contact-info-wrap .section-label { color: var(--oak-light); margin-bottom: 28px; }
    .contact-info-wrap .section-label::after { background: rgba(196,169,125,0.3); }

    .ci-headline {
      font-family: var(--ff-display);
      font-size: 28px;
      font-weight: 300;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 40px;
    }
    .ci-headline em { font-style: italic; color: var(--oak-light); }

    .ci-item {
      display: flex;
      gap: 16px;
      margin-bottom: 28px;
    }
    .ci-icon {
      flex-shrink: 0;
      width: 20px;
      color: var(--oak-light);
      margin-top: 2px;
    }
    .ci-content {}
    .ci-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-bottom: 4px;
    }
    .ci-value {
      font-size: 15px;
      font-weight: 300;
      color: var(--white);
      line-height: 1.5;
    }
    .ci-value a {
      color: var(--white);
      transition: color 0.3s;
    }
    .ci-value a:hover { color: var(--oak-light); }

    .ci-divider {
      height: 1px;
      background: rgba(255,255,255,0.07);
      margin: 8px 0 32px;
    }

    .ci-hours {}
    .ci-hours-title {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-bottom: 16px;
    }
    .ci-hour-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.65);
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* Google Maps placeholder */
    /* OpenStreetMap · Leaflet */
    .map-container {
      width: 100%;
      height: 320px;
      margin-top: 32px;
      background: #e8ddd0;
      z-index: 1;
    }
    .mellert-marker { background: transparent; border: none; }
    .leaflet-container {
      font-family: var(--ff-body) !important;
    }
    .leaflet-popup-content {
      font-size: 13px;
      line-height: 1.5;
      color: var(--walnut);
    }
    .leaflet-popup-content strong {
      font-family: var(--ff-display);
      font-size: 16px;
      font-weight: 500;
      color: var(--walnut);
    }
    .leaflet-control-attribution {
      font-size: 10px !important;
      background: rgba(250, 247, 242, 0.85) !important;
    }

    .map-directions {
      display: inline-block;
      margin-top: 14px;
      font-size: 12px;
      color: var(--oak);
      letter-spacing: 0.02em;
      transition: color 0.3s;
    }
    .map-directions:hover { color: var(--walnut); }

    /* ─────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────── */
    footer {
      background: var(--walnut);
      padding: 32px 0 24px;
      color: rgba(255,255,255,0.75);
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(196,169,125,0.15);
    }

    .footer-copy {
      font-size: 12px;
      font-weight: 300;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.04em;
    }

    .footer-links {
      display: flex;
      gap: 28px;
    }
    .footer-links a {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      transition: color 0.3s;
    }
    .footer-links a:hover { color: var(--oak-light); }
    .footer-insta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .footer-insta svg {
      stroke: currentColor;
      transition: transform 0.3s var(--ease);
    }
    .footer-insta:hover svg { transform: scale(1.1); }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      flex-wrap: wrap;
      gap: 10px;
    }
    .footer-credit {
      font-size: 11px;
      font-weight: 300;
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.08em;
    }
    .footer-credit a {
      color: var(--oak-light);
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: color 0.3s;
    }
    .footer-credit a:hover { color: var(--white); }

    /* ─────────────────────────────────────────
       SCROLL REVEAL
    ───────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(48px) scale(0.985);
      transition:
        opacity 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .reveal-delay-1 { transition-delay: 0.15s; }
    .reveal-delay-2 { transition-delay: 0.3s; }
    .reveal-delay-3 { transition-delay: 0.45s; }
    .reveal-delay-4 { transition-delay: 0.6s; }
    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
    }

    /* ─────────────────────────────────────────
       RESPONSIVE — MOBILE
    ───────────────────────────────────────── */
    @media (max-width: 1024px) {
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .about-grid { grid-template-columns: 1fr; gap: 60px; }
      .about-visual { max-width: 440px; }
      .about-text { padding-right: 0; }
    }

    @media (max-width: 768px) {
      nav ul { display: none; }
      .hamburger { display: flex; }
      .mobile-nav { display: block; }

      .hero-stats { display: none; }
      .hero-headline { font-size: clamp(40px, 10vw, 64px); }

      .services-grid { grid-template-columns: 1fr; gap: 0; }
      .service-card { padding: 36px 28px; }

      .ref-header { grid-template-columns: 1fr; }
      .ref-grid { grid-template-columns: 1fr; }
      .ref-card { aspect-ratio: 16/9; }

      .contact-grid { grid-template-columns: 1fr; }
      .contact-form-wrap { padding: 40px 28px; border-right: none; border-bottom: 1px solid var(--sand); }
      .contact-info-wrap { padding: 40px 28px; }
      .form-row { grid-template-columns: 1fr; }
      .leistungen-header { flex-direction: column; align-items: flex-start; }

      .trust-item { padding: 8px 20px; font-size: 11px; border-right-color: rgba(255,255,255,0.08); }
      .about-facts { gap: 24px; flex-wrap: wrap; }

      .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .footer-links {
        flex-wrap: wrap;
        gap: 14px 22px;
        width: 100%;
      }
      .footer-copy { font-size: 11px; line-height: 1.6; }

      .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; }

      #hero, #ueber-uns, #leistungen, #referenzen, #kontakt { padding-top: 80px; padding-bottom: 80px; }
    }

    @media (max-width: 480px) {
      .about-img-frame::before { display: none; }
      .meister-badge { width: 90px; height: 90px; bottom: -12px; right: -12px; }
      .meister-badge .mb-num { font-size: 24px; }
      /* trust-marquee bleibt auch auf schmalsten Viewports als Lauf-Band */
    }

    /* ─────────────────────────────────────────
       LEGAL · Impressum + Datenschutz
    ───────────────────────────────────────── */
    .legal-section {
      padding: 160px 0 120px;
      background: var(--cream);
    }
    .legal-container {
      max-width: 820px;
    }
    .legal-title {
      font-family: var(--ff-display);
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--walnut);
      margin: 20px 0 48px;
      letter-spacing: -0.01em;
    }
    .legal-title em {
      font-family: var(--ff-display);
      font-style: italic;
      font-weight: 300;
      color: var(--oak);
    }
    .legal-body {
      font-family: var(--ff-body);
      font-size: 15px;
      line-height: 1.75;
      color: var(--text);
    }
    .legal-body h2 {
      font-family: var(--ff-display);
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 500;
      color: var(--walnut);
      margin: 56px 0 20px;
      line-height: 1.2;
      letter-spacing: -0.005em;
    }
    .legal-body h2:first-child { margin-top: 0; }
    .legal-body h3 {
      font-family: var(--ff-display);
      font-size: 18px;
      font-weight: 500;
      color: var(--walnut);
      margin: 36px 0 12px;
    }
    .legal-body p { margin-bottom: 16px; }
    .legal-body ul {
      list-style: disc;
      margin: 0 0 16px 20px;
    }
    .legal-body li { margin-bottom: 4px; }
    .legal-body a {
      color: var(--oak);
      text-decoration: underline;
      text-underline-offset: 0.15em;
      transition: color 0.3s;
    }
    .legal-body a:hover { color: var(--walnut); }
    .legal-body strong { color: var(--walnut); font-weight: 500; }
    .legal-body code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.9em;
      background: var(--sand);
      padding: 2px 6px;
      border-radius: 2px;
    }
    .legal-note {
      margin-top: 60px;
      padding-top: 24px;
      border-top: 1px solid var(--sand);
      font-size: 12px;
      color: var(--text-muted);
      font-style: italic;
    }

    /* ─────────────────────────────────────────
       REFERENZEN · MASONRY-GRID + LIGHTBOX
    ───────────────────────────────────────── */
    .masonry-section {
      padding: 40px 0 120px;
      background: var(--cream);
    }
    .masonry-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 180px;
      gap: 12px;
      grid-auto-flow: dense; /* füllt Lücken automatisch */
    }
    .masonry-tile {
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      border: 0;
      padding: 0;
      cursor: pointer;
      color: inherit;
      transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                  box-shadow 0.5s;
      box-shadow: 0 6px 20px rgba(61,43,31,0.08);
    }
    .masonry-tile:hover {
      transform: scale(1.02);
      z-index: 2;
      box-shadow: 0 30px 70px rgba(61,43,31,0.3);
    }
    .masonry-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
        rgba(20,12,6,0)    15%,
        rgba(20,12,6,0.55) 55%,
        rgba(20,12,6,0.96) 100%);
      opacity: 0;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }
    .masonry-tile:hover::before { opacity: 1; }
    .masonry-info {
      position: absolute;
      bottom: 20px; left: 20px; right: 20px;
      text-align: left;
      color: #fff;
      opacity: 0;
      transform: translateY(14px);
      transition: all 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
      z-index: 2;
      text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    }
    .masonry-tile:hover .masonry-info {
      opacity: 1;
      transform: translateY(0);
    }
    .masonry-tag {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--oak-light);
      margin-bottom: 8px;
    }
    .masonry-name {
      font-family: var(--ff-display);
      font-size: clamp(18px, 1.6vw, 22px);
      font-weight: 500;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 10px;
    }
    .masonry-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--oak-light);
      transition: gap 0.3s;
    }
    .masonry-tile:hover .masonry-cta { gap: 14px; }

    /* Tile-Größen für Masonry-Rhythmus */
    .masonry-xl   { grid-column: span 2; grid-row: span 2; }
    .masonry-h    { grid-column: span 2; grid-row: span 1; }
    .masonry-v    { grid-column: span 1; grid-row: span 2; }
    .masonry-s    { grid-column: span 1; grid-row: span 1; }
    .masonry-wide { grid-column: span 4; grid-row: span 1; } /* lang & schmal (volle Breite, 1 Zeile) */
    @media (max-width: 1024px) {
      .masonry-wide { grid-column: span 3; }
    }
    @media (max-width: 700px) {
      .masonry-wide { grid-column: span 2; }
      /* Mobile-only: Logo-Tile stretcht sich auf volle Breite, Mark-Only-Tile ausgeblendet */
      .masonry-logo-wide-mobile { grid-column: span 2 !important; }
      .masonry-desktop-only { display: none; }
    }

    /* Dekoratives Logo-Tile (nicht klickbar, zeigt Markenpräsenz) */
    .masonry-logo-tile {
      background: var(--walnut);
      box-shadow: 0 6px 20px rgba(61,43,31,0.1);
      cursor: default;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .masonry-logo-tile:hover {
      transform: none;
      box-shadow: 0 6px 20px rgba(61,43,31,0.1);
    }
    .masonry-logo-tile::before { display: none; }
    .masonry-logo-inner {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }
    .masonry-logo-mark { height: 70px; width: auto; }
    .masonry-logo-text { height: 46px; width: auto; display: block; }
    .masonry-logo-stack {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .masonry-logo-tagline {
      font-family: var(--ff-body);
      font-size: 11px;
      line-height: 1;
      font-weight: 400;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--white);
      opacity: 0.65;
      white-space: nowrap;
    }

    /* Mark-Only-Tile: nur Fischgrät-Symbol auf Walnut, 1×2 vertikal */
    .masonry-mark-tile {
      background:
        radial-gradient(circle at 50% 40%, rgba(196,169,125,0.08), transparent 60%),
        var(--walnut);
      box-shadow: 0 6px 20px rgba(61,43,31,0.1);
      cursor: default;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .masonry-mark-tile:hover {
      transform: none;
      box-shadow: 0 6px 20px rgba(61,43,31,0.1);
    }
    .masonry-mark-tile::before { display: none; }
    .masonry-mark-inner {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .masonry-mark-only {
      height: 110px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.85;
    }

    /* Details-Tile: wie andere, aber warme Tönung über Material-Collage */
    .masonry-details-tile {
      background:
        linear-gradient(135deg, rgba(139,106,62,0.1), rgba(61,43,31,0.3)),
        url('/assets/referenzen/details/d2.jpg') center/cover;
    }

    @media (max-width: 1024px) {
      .masonry-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 700px) {
      .masonry-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
      }
    }
    @media (max-width: 460px) {
      .masonry-xl, .masonry-h, .masonry-v, .masonry-s {
        grid-column: span 1;
        grid-row: span 1;
      }
      .masonry-info { opacity: 1; transform: translateY(0); }
      .masonry-tile::before { opacity: 1; }
    }

    /* ─────────────────────────────────────────
       LIGHTBOX
    ───────────────────────────────────────── */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(10, 6, 3, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                  visibility 0s linear 0.4s;
      display: flex;
      flex-direction: column;
    }
    .lightbox.open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                  visibility 0s linear 0s;
    }
    .lb-stage {
      flex: 1;
      display: block;
      position: relative;
      padding: 70px 80px 20px;
      overflow: hidden;
    }
    /* Beide Bilder liegen übereinander — Cross-Fade ohne Format-Flicker */
    .lb-image {
      position: absolute;
      inset: 70px 80px 20px 80px;
      margin: auto;
      max-width: calc(100% - 160px);
      max-height: calc(100% - 90px);
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s linear;
    }
    .lb-image.active {
      opacity: 1;
      pointer-events: auto;
    }
    .lb-close {
      position: absolute;
      top: 20px; right: 20px;
      width: 48px; height: 48px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      z-index: 2;
      border-radius: 50%;
    }
    .lb-close:hover {
      background: rgba(255,255,255,0.2);
      transform: rotate(90deg);
    }
    .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 56px; height: 56px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 2;
      border-radius: 50%;
    }
    .lb-nav:hover {
      background: var(--oak);
      border-color: var(--oak);
      transform: translateY(-50%) scale(1.08);
    }
    .lb-prev { left: 20px; }
    .lb-next { right: 20px; }
    .lb-caption {
      padding: 20px 40px 32px;
      text-align: center;
      color: #fff;
    }
    .lb-title {
      font-family: var(--ff-display);
      font-size: 18px;
      font-weight: 400;
      color: #fff;
      margin-bottom: 6px;
    }
    .lb-counter {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--oak-light);
    }
    @media (max-width: 700px) {
      .lb-stage { padding: 60px 10px 10px; }
      .lb-image {
        inset: 60px 10px 10px 10px;
        max-width: calc(100% - 20px);
        max-height: calc(100% - 70px);
      }
      .lb-nav { width: 44px; height: 44px; }
      .lb-prev { left: 8px; }
      .lb-next { right: 8px; }
    }
    /* Lightbox-Buttons: Tap-Highlight + Default-Outline weg (schwarzer Rahmen bei Klick nervt),
       Keyboard-Fokus bleibt via focus-visible erhalten */
    .lightbox button {
      -webkit-tap-highlight-color: transparent;
      outline: none;
      -webkit-user-select: none;
      user-select: none;
    }
    .lightbox button:focus { outline: none; }
    .lightbox button:focus-visible { outline: 2px solid var(--oak-light); outline-offset: 2px; }

    /* ─────────────────────────────────────────
       HEADLINE-AKZENT · Jost Light Italic in Oak
       (Script-Font bleibt exklusiv der mellert-Marke im Logo vorbehalten)
    ───────────────────────────────────────── */
    h1 em, h2 em, h3 em,
    .hero-headline em, .about-headline em, .leistungen-title em,
    .ref-title em, .contact-headline em,
    .team-hero-title em, .team-grid-title em, .team-chef-name em,
    .ci-headline em {
      font-family: var(--ff-display);
      font-style: italic;
      font-weight: 300;
      font-size: 1em;
      letter-spacing: -0.005em;
      color: var(--oak);
    }
    /* Akzent auf dunklem Grund (Hero, Wide-Band) heller */
    #hero .hero-headline em,
    .team-wide-caption em { color: var(--oak-light); }

    /* Logo-Lockup im Header: Grafik + "mellert" in Allura */
    .logo {
      font-family: var(--ff-body);
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 13px;
    }
    .logo-script {
      font-family: var(--ff-script);
      font-size: 30px;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 400;
      line-height: 0.9;
      margin-left: 4px;
      color: var(--oak-light);
      transition: color 0.4s;
    }
    header.scrolled .logo-script { color: var(--oak); }

    /* Footer-Logo: Fischgrät + JÜRGEN mellert horizontal (wie auf Firmenfahrzeugen), kompakt */
    .footer-logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .footer-logo-mark {
      height: 40px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }
    .footer-logo-juergen {
      height: 22px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.9;
      display: block;
    }
    .footer-logo-stack {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
    }
    .footer-logo-tagline {
      font-family: var(--ff-body);
      font-size: 8px;
      line-height: 1;
      font-weight: 400;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      white-space: nowrap;
    }

    /* ─────────────────────────────────────────
       TEAM-SEITE
    ───────────────────────────────────────── */
    .team-hero {
      padding: 180px 0 80px;
      background: var(--cream);
    }
    .team-hero .section-label { margin-bottom: 20px; }
    .team-hero-title {
      font-family: var(--ff-display);
      font-size: clamp(44px, 6vw, 72px);
      font-weight: 300;
      color: var(--walnut);
      line-height: 1.05;
      margin-bottom: 24px;
    }
    .team-hero-title em { font-style: italic; color: var(--oak); }
    .team-hero-lead {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--ash);
      max-width: 640px;
    }

    .team-chef {
      padding: 80px 0 100px;
      background: var(--cream);
    }
    .team-chef-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 80px;
      align-items: center;
    }
    .team-chef-photo {
      aspect-ratio: 2 / 3;
      background-size: cover;
      background-position: center;
      box-shadow: 0 30px 80px rgba(61, 43, 31, 0.22);
      position: relative;
      overflow: hidden;
      will-change: transform;
    }
    .team-chef-photo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: inherit;
      background-size: cover;
      background-position: center;
      transform: scale(1.08);
      transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform;
    }
    .team-chef-photo.in-view::before {
      transform: scale(1);
    }
    .team-chef-photo::after {
      content: '';
      position: absolute;
      inset: -16px -16px 16px 16px;
      border: 1px solid var(--oak-light);
      z-index: -1;
    }

    /* Chef-Section Hintergrund-Element für Tiefe */
    .team-chef { position: relative; overflow: hidden; }
    .team-chef::before {
      content: '';
      position: absolute;
      top: 50%; right: -140px;
      transform: translateY(-50%);
      width: 580px; height: 580px;
      background-image: url('/assets/logo/logo.png');
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.04;
      pointer-events: none;
      z-index: 0;
    }
    .team-chef > .container { position: relative; z-index: 1; }
    .team-chef-info .section-label { margin-bottom: 18px; }
    .team-chef-name {
      font-family: var(--ff-display);
      font-size: clamp(38px, 4.5vw, 56px);
      font-weight: 400;
      color: var(--walnut);
      line-height: 1.1;
      margin-bottom: 12px;
    }
    .team-chef-role {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--oak);
      margin-bottom: 32px;
    }
    .team-chef-bio {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--text);
      margin-bottom: 22px;
    }
    .team-chef-quote {
      margin-top: 36px;
      padding: 24px 28px;
      border-left: 2px solid var(--oak);
      background: var(--oak-pale);
      font-family: var(--ff-display);
      font-style: italic;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--walnut);
    }
    /* Mobile-Only Portrait (zwischen Bio und Zitat) — auf Desktop verstecken */
    .team-chef-photo-mobile { display: none; }

    .team-milestones {
      padding: 36px 0;
      background: var(--oak-pale);
      border-top: 1px solid var(--sand);
      border-bottom: 1px solid var(--sand);
    }
    .team-milestones .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: center;
    }
    .milestone-item {
      text-align: center;
      padding: 0 20px;
      border-left: 1px solid rgba(139, 106, 62, 0.2);
    }
    .milestone-item:first-child { border-left: none; }
    .milestone-num {
      font-family: var(--ff-display);
      font-size: clamp(32px, 3.8vw, 48px);
      font-weight: 300;
      line-height: 1;
      color: var(--walnut);
      margin-bottom: 6px;
    }
    .milestone-value {
      font-family: var(--ff-display);
      font-size: clamp(22px, 2.4vw, 28px);
      font-weight: 500;
      font-style: italic;
      line-height: 1;
      color: var(--oak);
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }
    .milestone-desc {
      font-size: 13px;
      font-weight: 300;
      line-height: 1.55;
      color: var(--ash);
      max-width: 260px;
      margin: 0 auto;
    }
    @media (max-width: 700px) {
      .team-milestones { padding: 20px 0; }
      .team-milestones .container {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
        gap: 0;
      }
      .milestone-item {
        text-align: left;
        padding: 14px 0;
        border-left: none;
        border-top: 1px solid rgba(139,106,62,0.15);
        display: flex;
        align-items: baseline;
        gap: 14px;
      }
      .milestone-item:first-child { border-top: none; }
      .milestone-value {
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 0;
        color: var(--walnut);
        flex-shrink: 0;
        min-width: 100px;
      }
      .milestone-desc {
        font-size: 13px;
        line-height: 1.5;
        text-align: left;
        margin: 0;
        max-width: 100%;
      }
    }

    .team-wide {
      position: relative;
      height: 85vh;
      min-height: 520px;
      background-size: cover;
      background-position: center 65%;
      overflow: hidden;
    }
    /* Scroll-Parallax auf dem Baumshot (JS steuert transform) */
    .team-wide { will-change: background-position; }
    .team-wide::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(20,12,6,0.35) 0%, rgba(20,12,6,0.15) 50%, rgba(20,12,6,0.5) 100%);
    }
    .team-wide-caption {
      position: relative;
      z-index: 2;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 60px 24px;
      color: var(--white);
      display: flex;
      align-items: flex-end;
      height: 100%;
    }
    .team-wide-caption p {
      font-family: var(--ff-display);
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 300;
      line-height: 1.4;
      max-width: 620px;
    }

    .team-grid-section {
      padding: 120px 0;
      background: var(--cream);
    }
    .team-grid-head { margin-bottom: 56px; max-width: 680px; }
    .team-grid-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 300;
      color: var(--walnut);
      line-height: 1.1;
      margin: 18px 0 16px;
    }
    .team-grid-title em { font-style: italic; color: var(--oak); }
    .team-grid-sub {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--ash);
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
    }
    .team-member {
      display: flex;
      flex-direction: column;
    }
    .team-member-photo {
      aspect-ratio: 2 / 3;
      background-size: cover;
      background-position: center top;
      margin-bottom: 20px;
      box-shadow: 0 8px 24px rgba(61, 43, 31, 0.08);
      transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s;
      will-change: transform;
    }
    .team-member { transform-style: preserve-3d; perspective: 1000px; }
    .team-member:hover .team-member-photo {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 24px 60px rgba(61, 43, 31, 0.25);
    }
    .team-member-name {
      font-family: var(--ff-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--walnut);
      margin-bottom: 4px;
    }
    .team-member-role {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--oak);
      margin-bottom: 10px;
    }
    .team-member-bio {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.6;
      color: var(--ash);
    }
    .team-member-placeholder {
      font-size: 11px;
      font-style: italic;
      color: var(--text-muted);
      opacity: 0.7;
    }

    .team-cta {
      padding: 100px 0 140px;
      background: var(--oak-pale);
      text-align: center;
    }
    .team-cta h3 {
      font-family: var(--ff-display);
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 300;
      color: var(--walnut);
      margin-bottom: 20px;
    }
    .team-cta p {
      font-size: 15px;
      color: var(--ash);
      max-width: 500px;
      margin: 0 auto 32px;
      line-height: 1.7;
    }

    @media (max-width: 900px) {
      .team-chef-grid { grid-template-columns: 1fr; gap: 24px; }
      /* Desktop-Portrait auf Mobile verstecken; stattdessen team-chef-photo-mobile zwischen Bio und Zitat */
      .team-chef-photo { display: none; }
      .team-chef-photo-mobile {
        display: block;
        width: 100%;
        max-width: 360px;
        aspect-ratio: 3 / 4;
        margin: 24px auto 32px;
        background-size: cover;
        background-position: center 20%;
        box-shadow: 0 20px 50px rgba(61,43,31,0.18);
      }
      /* "DER CHEF"-Label kompakter */
      .team-chef-info .section-label { font-size: 10px; margin-bottom: 10px; }
      .team-chef-name { font-size: 32px; margin-bottom: 8px; }
      .team-chef-role { margin-bottom: 20px; font-size: 11px; }
      .team-chef-bio { font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
      .team-chef-quote { margin-top: 24px; font-size: 16px; padding: 20px 22px; }

      /* Abstände zwischen Hero-Lead und Chef-Section minimieren */
      .team-hero { padding-bottom: 32px; }
      .team-chef { padding: 32px 0 60px; }

      /* Hintergrund-Logo-Wasserzeichen auf Mobile weg (stört) */
      .team-chef::before { display: none; }

      /* Team-Baumshot auf Mobile: schmaler Streifen, kräftig rein-gezoomt (Natur oben+unten weg) */
      .team-wide {
        height: 260px;
        min-height: 260px;
        background-size: auto 220%;
        background-position: 18% 55%; /* weiter nach links → alle Personen sichtbar */
      }
      /* Fade an den Rändern */
      .team-wide::after {
        background: linear-gradient(180deg,
          var(--oak-pale) 0%,
          rgba(245, 239, 230, 0) 8%,
          rgba(250, 247, 242, 0) 92%,
          var(--cream) 100%);
      }
      /* Caption auf Mobile komplett ausgeblendet — reines Bild spricht für sich */
      .team-wide-caption { display: none; }

      /* Team-Mannschaft als kompakte Listen-Zeilen: Portrait links klein + Infos rechts */
      .team-grid { grid-template-columns: 1fr; gap: 0; }
      .team-member {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 0;
        border-bottom: 1px solid var(--sand);
      }
      .team-member:last-child { border-bottom: none; }
      .team-member-photo {
        flex: 0 0 96px;
        width: 96px;
        aspect-ratio: 3 / 4;
        margin-bottom: 0;
        box-shadow: 0 4px 14px rgba(61,43,31,0.1);
      }
      .team-member:hover .team-member-photo { transform: none; }
      .team-member-text { flex: 1; min-width: 0; }
      .team-member-name { font-size: 18px; margin-bottom: 2px; }
      .team-member-role { font-size: 10px; margin-bottom: 8px; }
      .team-member-bio { font-size: 13px; line-height: 1.55; }
    }
    @media (max-width: 560px) {
      .team-chef-photo::after { display: none; }
    }