﻿@font-face {
      font-family: 'Reddit Sans';
      src: url('assets/fonts/reddit-sans-v6-latin-300.woff2') format('woff2');
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Reddit Sans';
      src: url('assets/fonts/reddit-sans-v6-latin-300italic.woff2') format('woff2');
      font-weight: 300; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Reddit Sans';
      src: url('assets/fonts/reddit-sans-v6-latin-regular.woff2') format('woff2');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Reddit Sans';
      src: url('assets/fonts/reddit-sans-v6-latin-italic.woff2') format('woff2');
      font-weight: 400; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Reddit Sans';
      src: url('assets/fonts/reddit-sans-v6-latin-500.woff2') format('woff2');
      font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Reddit Sans';
      src: url('assets/fonts/reddit-sans-v6-latin-600.woff2') format('woff2');
      font-weight: 600; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Reddit Sans';
      src: url('assets/fonts/reddit-sans-v6-latin-700.woff2') format('woff2');
      font-weight: 700; font-style: normal; font-display: swap;
    }
  

    /* ─── Variablen ──────────────────────────────────────────────── */
    :root {
      --gruen:  #93c01f;
      --blau:   #13293e;
      --weiss:  #ffffff;
      --dunkel: #0d1e2e;
    }

    /* ─── Reset & Basis ──────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html  { scroll-behavior: smooth; }
    body  { background: var(--blau); color: var(--weiss); font-family: 'Reddit Sans', sans-serif; overflow-x: hidden; }

    ::-webkit-scrollbar       { width: 3px; }
    ::-webkit-scrollbar-track { background: var(--blau); }
    ::-webkit-scrollbar-thumb { background: var(--gruen); }

    /* ─── Animationen ────────────────────────────────────────────── */
    @keyframes fadeUp  { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn  { from { opacity: 0; }                              to { opacity: 1; } }
    @keyframes ticker  { from { transform: translateX(0); }                to { transform: translateX(-50%); } }

    /* ─── Scroll-Reveal ──────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .75s ease, transform .75s ease;
    }
    .reveal.sichtbar { opacity: 1; transform: translateY(0); }

    /* ─── Hilfeklassen ───────────────────────────────────────────── */
    .label {
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .gruen { color: var(--gruen); }

    .gitter {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(var(--gruen) 1px, transparent 1px),
        linear-gradient(90deg, var(--gruen) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: .06;
    }
    .gitter-sm { background-size: 30px 30px; opacity: .04; }

    /* ─── Buttons ────────────────────────────────────────────────── */
    .btn-gruen {
      display: inline-block;
      background: var(--gruen); color: var(--blau);
      border: none; border-radius: 2px;
      padding: 16px 44px;
      font-family: inherit; font-size: 14px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      cursor: pointer;
      transition: transform .25s, box-shadow .25s;
    }
    .btn-gruen:hover  { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(147,192,31,.35); }
    .btn-gruen.klein  { padding: 10px 24px; font-size: 13px; }
    .btn-gruen.gross  { padding: 18px 60px; font-size: 15px; }

    /* ─── Navigation ─────────────────────────────────────────────── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1002;
      padding: 20px 48px;
      display: flex; justify-content: space-between; align-items: center;
      transition: background .4s, backdrop-filter .4s, border-color .4s;
    }
    .nav.gescrollt {
      background: rgba(13,25,40,.96);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(147,192,31,.15);
    }

    .nav-logo { display: flex; align-items: center; gap: 12px; }
    .nav-logo img { height: 36px; width: auto; object-fit: contain; }
    .nav-logo-text { font-size: 20px; font-weight: 900; letter-spacing: .12em; color: var(--gruen); }

    .nav-links { display: flex; gap: 36px; align-items: center; }

    /* ─── Sprachumschalter ───────────────────────────────────────── */
    .lang-switch {
      display: flex; align-items: center; gap: 4px;
    }
    .lang-btn {
      background: none; border: none;
      color: rgba(255,255,255,.4);
      font-family: inherit; font-size: 11px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      cursor: pointer; padding: 5px 7px; border-radius: 3px;
      transition: color .2s, background .2s;
    }
    .lang-btn:hover { color: #fff; }
    .lang-btn.aktiv {
      color: var(--gruen);
      background: rgba(147,192,31,.12);
    }
    .lang-trenner {
      color: rgba(255,255,255,.18);
      font-size: 11px;
      user-select: none;
      pointer-events: none;
    }

    .nav-link {
      position: relative;
      font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
      color: var(--weiss); opacity: .75;
      text-decoration: none; cursor: pointer;
      transition: opacity .3s, color .3s;
    }
    .nav-link::after {
      content: ''; position: absolute; bottom: -3px; left: 0;
      width: 0; height: 2px; background: var(--gruen);
      transition: width .3s;
    }
    .nav-link:hover { opacity: 1; color: var(--gruen); }
    .nav-link:hover::after { width: 100%; }

    /* ─── Hero ───────────────────────────────────────────────────── */
    .hero {
      min-height: 100vh;
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
    }
    .hero-hintergrund {
      position: absolute; inset: 0; z-index: 0;
    }
    .hero-inhalt {
      position: relative; z-index: 1;
      margin-top: auto;
      padding: 0 48px 60px;
    }
    .hero-box {
      display: inline-block;
      background: rgba(13,25,40,.65);
      backdrop-filter: blur(12px);
      border-left: 3px solid var(--gruen);
      padding: 28px 36px; border-radius: 2px;
      max-width: fit-content;
    }
    .hero-eyebrow { animation: fadeUp .9s ease .3s both; }
    .hero-titel {
      font-size: clamp(38px, 5.5vw, 76px);
      font-weight: 700; line-height: .95; letter-spacing: -.02em;
      margin-top: 14px; margin-bottom: 24px;
      animation: fadeUp .9s ease .5s both;
    }
    .hero-buttons { display: flex; gap: 16px; animation: fadeUp .9s ease .7s both; }

    /* ─── Claim-Sektion ──────────────────────────────────────────── */
    .sek-claim {
      padding: 56px 64px;
      border-bottom: 1px solid rgba(147,192,31,.1);
    }
    .claim-bild {
      width: 100%; height: 420px;
      background: var(--dunkel);
      border-radius: 4px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative; overflow: hidden; margin-bottom: 40px;
    }
    .claim-bg-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .claim-overlay {
      position: absolute; inset: 0;
      background: rgba(13,25,40,.60);
    }
    .claim-inhalt {
      position: relative; z-index: 1;
      text-align: center; padding: 0 80px;
      display: flex; flex-direction: column; align-items: center; gap: 32px;
    }
    .claim-zitat {
      font-size: clamp(22px, 3vw, 40px);
      font-weight: 300; line-height: 1.4; font-style: italic; opacity: .9;
    }

    /* ─── Sektions-Kopf (allgemein) ──────────────────────────────── */
    .sek-kopf { margin-bottom: 56px; }
    .sek-titel {
      font-size: clamp(34px, 4vw, 60px);
      font-weight: 700; line-height: 1.1; margin-top: 12px;
    }

    /* ─── Video-Referenzen ───────────────────────────────────────── */
    .sek-videos { padding: 72px 64px; }

    .video-raster {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .video-karte {
      border: 1px solid rgba(147,192,31,.15);
      border-radius: 4px; overflow: hidden;
      transition: border-color .3s, transform .3s;
      cursor: pointer;
    }
    .video-karte:hover { border-color: rgba(147,192,31,.5); transform: translateY(-4px); }

    .video-vorschau {
      width: 100%; aspect-ratio: 16/9;
      background: linear-gradient(135deg, var(--blau), var(--dunkel));
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 16px; position: relative; overflow: hidden;
    }
    .video-thumb {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: .82;
      transition: transform .5s ease, opacity .3s;
    }
    .video-karte:hover .video-thumb {
      transform: scale(1.04);
      opacity: .55;
    }
    .play-btn {
      width: 48px; height: 48px; border-radius: 50%;
      border: 2px solid var(--gruen);
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1; flex-shrink: 0;
    }
    .play-btn::before {
      content: '';
      position: absolute;
      inset: -14px;
      border-radius: 50%;
      backdrop-filter: blur(10px);
      background: rgba(13,25,40,.25);
      border: 1px solid var(--gruen);
      z-index: -1;
    }
    .play-btn::after {
      content: '';
      width: 0; height: 0;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      border-left: 15px solid var(--gruen);
      margin-left: 3px;
    }
.video-info { padding: 20px 20px 24px; background: rgba(19,41,62,.6); }
    .video-typ { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); opacity: .8; }
    .video-titel { font-size: 18px; font-weight: 600; margin-top: 6px; }
    .video-kunde { font-size: 13px; opacity: .6; margin-top: 4px; }


    /* ─── Video-Modal ────────────────────────────────────────────── */
    .modal {
      display: none;
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,.88); backdrop-filter: blur(10px);
      align-items: center; justify-content: center;
      animation: fadeIn .2s ease;
    }
    .modal.offen { display: flex; }
    .modal-innen { position: relative; width: min(90vw, 1100px); }
    .modal-schliessen {
      position: absolute; top: -48px; right: 0;
      background: transparent;
      border: 1px solid rgba(147,192,31,.35); border-radius: 2px;
      color: var(--gruen);
      font-family: inherit; font-size: 12px; letter-spacing: .15em;
      padding: 9px 22px; cursor: pointer;
      transition: border-color .2s;
    }
    .modal-schliessen:hover { border-color: var(--gruen); }
    .modal-video { width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.6); }
    .modal-video iframe { width: 100%; height: 100%; border: none; display: block; }
    .modal-hinweis { text-align: center; margin-top: 16px; font-size: 11px; letter-spacing: .15em; opacity: .3; text-transform: uppercase; }

    /* ─── Leistungen (Karten) ────────────────────────────────────── */
    .sek-leistungen { padding: 72px 64px; background: rgba(0,0,0,.25); }
    .leistungen-intro {
      font-size: 16px; line-height: 1.8; opacity: .55; font-weight: 300;
      max-width: 600px; margin-top: 16px; margin-bottom: 52px;
    }
    .leistungen-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .leistung-karte {
      position: relative; border-radius: 4px; overflow: hidden;
      cursor: default; aspect-ratio: 3/4;
    }
    .lk-bg {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #0d1e2e 0%, #1a3550 50%, #0d2a1a 100%);
      transform: scale(1.05);
      filter: brightness(.7);
      transition: filter .5s ease, transform .5s ease;
    }
    .leistung-karte:hover .lk-bg { filter: blur(3px) brightness(.5); transform: scale(1.08); }
    .lk-bg-grid {
      position: absolute; inset: 0; opacity: .08;
      background-image:
        linear-gradient(var(--gruen) 1px, transparent 1px),
        linear-gradient(90deg, var(--gruen) 1px, transparent 1px);
      background-size: 30px 30px;
    }
    .lk-bar {
      position: absolute; top: 0; left: 0; right: 0;
      height: 3px; background: rgba(255,255,255,.2);
      transition: background .4s ease; z-index: 2;
    }
    .leistung-karte:hover .lk-bar { background: var(--gruen); }
    .lk-num {
      position: absolute; top: 20px; left: 24px; z-index: 2;
      font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
      color: var(--gruen); opacity: .75;
    }
    .lk-gradient {
      position: absolute; bottom: 0; left: 0; right: 0; height: 70%;
      background: linear-gradient(to top, rgba(10,18,28,.95) 0%, rgba(10,18,28,.6) 50%, transparent 100%);
      z-index: 1;
    }
    .lk-inhalt {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 0 24px 28px; z-index: 2;
      display: flex; flex-direction: column;
    }
    .lk-titel {
      font-size: 22px; font-weight: 700; line-height: 1.2;
      transform: translateY(0);
      transition: transform .45s cubic-bezier(.25,.46,.45,.94);
    }
    .leistung-karte:hover .lk-titel { transform: translateY(-12px); }
    .lk-beschr {
      font-size: 14px; line-height: 1.75; font-weight: 300;
      opacity: 0; max-height: 0; overflow: hidden; margin-top: 0;
      transition: opacity .45s ease .1s, max-height .45s cubic-bezier(.25,.46,.45,.94) .05s, margin-top .45s ease;
    }
    .leistung-karte:hover .lk-beschr { opacity: .8; max-height: 160px; margin-top: 10px; }

    /* ─── Über uns ───────────────────────────────────────────────── */
    .sek-ueber { padding: 72px 64px; }
    .ueber-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

    .ueber-text { padding-top: 16px; }
    .ueber-text p { font-size: 17px; line-height: 1.85; font-weight: 300; }
    .ueber-text p:first-child { opacity: .75; }
    .ueber-text p + p { margin-top: 28px; opacity: .65; }

    /* ─── Kunden-Ticker ──────────────────────────────────────────── */
    .sek-ticker {
      padding: 24px 0; overflow: hidden;
      background: rgba(0,0,0,.15);
      border-top: 1px solid rgba(147,192,31,.08);
      border-bottom: 1px solid rgba(147,192,31,.08);
    }
    .ticker-titel { margin-bottom: 20px; text-align: center; }
    .ticker-rahmen { overflow: hidden; }
    .ticker-spur {
      display: flex; width: max-content;
      animation: ticker 28s linear infinite;
    }
    .ticker-spur:hover { animation-play-state: paused; }
    .ticker-item {
      flex-shrink: 0; width: 200px; height: 80px; margin-right: 64px;
      display: flex; align-items: center; justify-content: center;
    }
    .ticker-item img {
      max-width: 160px; max-height: 56px;
      width: auto; height: auto;
      object-fit: contain;
      opacity: .55;
    }

    /* ─── Kontakt ────────────────────────────────────────────────── */
    .sek-kontakt { padding: 72px 64px; background: rgba(0,0,0,.2); position: relative; overflow: hidden; }
    .kontakt-glow {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 900px; height: 600px;
      background: radial-gradient(ellipse, rgba(147,192,31,.06), transparent 70%);
      pointer-events: none;
    }
    .kontakt-kopf { text-align: center; }
    .kontakt-titel {
      font-size: clamp(40px, 6vw, 88px);
      font-weight: 700; line-height: 1; letter-spacing: -.02em;
      margin-top: 16px; margin-bottom: 56px;
    }
    .kontakt-raster { max-width: 640px; margin: 0 auto; }

    /* Formular */
    .formular-felder { display: flex; flex-direction: column; gap: 20px; }
    .formular-zeile  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .formular-gruppe label {
      display: block; font-size: 13px; letter-spacing: .08em;
      opacity: .7; margin-bottom: 8px; text-transform: uppercase;
    }
    .formular-gruppe label .pflicht { color: var(--gruen); }
    .formular-gruppe label .optional { opacity: .4; }

    .eingabe {
      background: rgba(19,41,62,.5);
      border: 1px solid rgba(147,192,31,.2); border-radius: 2px;
      color: var(--weiss);
      font-family: inherit; font-size: 15px;
      outline: none; padding: 14px 18px; width: 100%;
      transition: border-color .3s;
    }
    .eingabe:focus    { border-color: var(--gruen); }
    .eingabe::placeholder { color: rgba(255,255,255,.3); }
    textarea.eingabe  { resize: vertical; min-height: 130px; }

    .formular-hinweis { font-size: 12px; opacity: .35; }
    .formular-aktionen { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
    .formular-email { color: var(--gruen); text-decoration: none; font-size: 14px; opacity: .65; }

    .formular-erfolg {
      display: none;
      padding: 48px 40px; text-align: center;
      border: 1px solid rgba(147,192,31,.3); border-radius: 4px;
      background: rgba(147,192,31,.05);
    }
    .formular-erfolg .haken { font-size: 40px; margin-bottom: 16px; }
    .formular-erfolg h3 { font-size: 22px; font-weight: 600; color: var(--gruen); }
    .formular-erfolg p  { opacity: .55; margin-top: 8px; }

    /* ─── Footer ─────────────────────────────────────────────────── */
    footer {
      padding: 40px 64px;
      border-top: 1px solid rgba(147,192,31,.1);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 20px;
    }
    .footer-logo { display: flex; align-items: center; gap: 12px; }
    .footer-logo img { height: 28px; width: auto; object-fit: contain; }
    .footer-copy { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .35; }
    .footer-copy a { color: var(--gruen); opacity: 1; text-decoration: none; }
    .footer-links { display: flex; gap: 20px; align-items: center; }
    .footer-link {
      font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
      color: var(--weiss); text-decoration: none; opacity: .4;
      transition: opacity .3s, color .3s;
    }
    .footer-link:hover { opacity: .8; color: var(--gruen); }
    .footer-trenner { width: 1px; height: 12px; background: rgba(255,255,255,.15); }
    .footer-social {
      color: var(--weiss); opacity: .3; text-decoration: none;
      display: flex; align-items: center; transition: opacity .3s, color .3s;
    }
    .footer-social:hover { opacity: .8; color: var(--gruen); }

    /* ─── Hero-Video (object-fit fix) ───────────────────────────── */
    .hero-hintergrund video {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }


    /* ─── Hamburger-Button (nur mobil sichtbar) ──────────────────── */
    .nav-hamburger {
      display: none;
      flex-direction: column; gap: 5px;
      background: none; border: none; cursor: pointer; padding: 6px;
    }
    .nav-hamburger span {
      width: 24px; height: 2px;
      background: var(--weiss); border-radius: 2px; display: block;
      transition: transform .3s, opacity .3s;
    }
    .nav-hamburger.aktiv span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.aktiv span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.aktiv span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ─── Formular: Fehlerfeld-Markierung ────────────────────────── */
    .eingabe.fehler { border-color: #e05555; animation: schütteln .4s ease; }
    @keyframes schütteln {
      0%,100% { transform: translateX(0); }
      25%      { transform: translateX(-6px); }
      75%      { transform: translateX(6px); }
    }

    /* ══════════════════════════════════════════════════════════════
       RESPONSIVE – Tablet  (≤ 960 px)
    ══════════════════════════════════════════════════════════════ */
    @media (max-width: 960px) {
      .nav  { padding: 18px 32px; }
      .hero-inhalt { padding: 0 32px 48px; }

      .sek-claim    { padding: 44px 32px; }
      .claim-inhalt { padding: 0 24px; }
      .claim-bild   { height: 340px; }

      .sek-videos         { padding: 56px 32px; }
      .sek-leistungen     { padding: 56px 32px; }
      .leistungen-grid    { grid-template-columns: repeat(2, 1fr); }

      .sek-ueber   { padding: 56px 32px; }
      .ueber-raster { gap: 40px; }

      .sek-kontakt     { padding: 56px 32px; }
      .kontakt-raster  { gap: 40px; }

      footer { padding: 32px 32px; }
    }

    /* ══════════════════════════════════════════════════════════════
       RESPONSIVE – Mobile  (≤ 640 px)
    ══════════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      /* Nav */
      .nav { padding: 14px 20px; }
      .nav-hamburger { display: flex; }
      .nav-links {
        display: flex;
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(13,25,40,1);
        flex-direction: column; padding: 80px 28px 40px;
        gap: 28px; z-index: 1001; align-items: flex-start;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
      }
      .nav-links.offen {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
      /* Backdrop-Blur der Navbar abschalten solange das Menü offen ist –
         das opake Overlay verdeckt ohnehin alles dahinter (verhindert GPU-Ruckeln) */
      body.menu-offen .nav,
      body.menu-offen .nav.gescrollt {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: transparent;
        transition: none;
      }
      .nav-links .nav-link  { font-size: 20px; letter-spacing: .15em; opacity: .9; }
      .nav-links .btn-gruen { width: 100%; text-align: center; padding: 14px; margin-top: 8px; }
      .nav-links .lang-switch {
        width: 100%; margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,.1);
        padding-top: 20px;
      }

      /* Hero */
      .hero-inhalt  { padding: 0 20px 36px; }
      .hero-box     { padding: 20px 24px; }
      .hero-buttons { flex-direction: column; }
      .hero-buttons .btn-gruen { width: 100%; text-align: center; }

      /* Claim */
      .sek-claim    { padding: 40px 20px; }
      .claim-inhalt { padding: 0; }
      .claim-bild   { height: 280px; }

      /* Video-Raster: 1 Spalte */
      .sek-videos   { padding: 44px 20px; }
      .video-raster { grid-template-columns: 1fr; }

      /* Leistungen: gestapelt */
      .sek-leistungen  { padding: 44px 20px; }
      .leistungen-grid { grid-template-columns: 1fr; }
      .leistung-karte  { aspect-ratio: 5/3; }
      /* Hover-Effekt auf Touch dauerhaft zeigen */
      .leistung-karte .lk-beschr    { opacity: .7; max-height: 160px; margin-top: 10px; }
      .leistung-karte .lk-titel     { transform: translateY(-12px); }
      .leistung-karte .lk-bar       { background: var(--gruen); }

      /* Über uns: gestapelt */
      .sek-ueber    { padding: 44px 20px; }
      .ueber-raster { grid-template-columns: 1fr; }

      /* Kontakt */
      .sek-kontakt     { padding: 44px 20px; }
      .kontakt-titel   { margin-bottom: 36px; }
      .formular-zeile  { grid-template-columns: 1fr; }

      /* Footer */
      footer {
        padding: 28px 20px; flex-direction: column;
        text-align: center; gap: 14px;
      }
      .footer-links { justify-content: center; }

      /* Modal: Schließen-Button */
      .modal-schliessen { top: -44px; font-size: 10px; padding: 8px 16px; }
    }
