@font-face {
      font-family: 'Geist';
      src: url('https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 80px; }
    body { font-family: 'Geist', system-ui, sans-serif; color: #1a2236; background: var(--white); overflow-x: hidden; line-height: 1.6; }

    

    .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
    .section { padding: 100px 0; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: var(--primary); background: var(--tint); border-radius: 100px; padding: 5px 14px;
      margin-bottom: 20px;
    }
    .tag-orange { color: var(--primary-d); background: var(--tint); }
    .tag-green  { color: var(--dark2); background: #f0f1f2; }
    h1,h2,h3,h4 { line-height: 1.15; font-weight: 800; }
    h1 { font-size: clamp(2.2rem,4.5vw,3.8rem); }
    h2 { font-size: clamp(1.8rem,3.2vw,2.7rem); }
    h3 { font-size: 1.25rem; font-weight: 700; }
    .lead { font-size: 1.1rem; color: var(--gray-600); max-width: 585px; }
    .text-center { text-align: center; }
    .text-center .lead { margin: 0 auto; }
    .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }

    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: .95rem; transition: var(--transition); }
    .btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 4px 16px rgba(53,153,131,.35); }
    .btn-primary:hover { background: var(--primary-l); transform: translateY(-2px); }
    .btn-outline { border: 2px solid var(--gray-200); color: var(--gray-800); background: transparent; }
    .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--tint); }

    /* Button size system - use alongside .cg-btn / .cg-btn-outline */
    .cg-btn, .cg-btn-outline {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
      width: fit-content; border: none; border-radius: var(--radius); box-shadow: var(--shadow);
      color: var(--white); font-weight: 600; text-decoration: none; white-space: nowrap;
      flex-shrink: 0; cursor: pointer; transition: var(--transition);
    }

    /* Nav */
    .logo img, .logo svg { height: 32px; width: auto; display: block; }
    @media (max-width: 1024px) {
      .logo img, .logo svg { height: 28px; }
      body .page-header { padding-top: 100px; }
    }
    .footer-brand svg.logo { height: 30px; }

    /* Specs */
    #specs { background: var(--white); }
    .specs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 56px; }
    .specs-table { border-radius: var(--radius-lg); overflow: hidden; border: 1.5px solid var(--gray-200); }
    .specs-table table { width: 100%; border-collapse: collapse; }
    .specs-table thead th { background: var(--primary); color: var(--white); text-align: left; padding: 16px 20px; font-size: .88rem; font-weight: 700; }
    .specs-table tbody tr { border-bottom: 1px solid var(--gray-100); }
    .specs-table tbody tr:last-child { border-bottom: none; }
    .specs-table tbody tr:hover { background: var(--gray-50); }
    .specs-table td { padding: 14px 20px; font-size: .92rem; }
    .specs-table td:first-child { color: var(--gray-600); font-weight: 500; }
    .specs-table td:last-child { font-weight: 700; color: var(--dark); }
    .specs-visual { display: flex; flex-direction: column; gap: 20px; }
    .spec-highlight { padding: 28px; border-radius: var(--radius); border-left: 4px solid var(--primary); background: var(--tint); }
    .spec-highlight h4 { color: var(--dark); margin-bottom: 6px; }
    .spec-highlight p { color: var(--gray-600); font-size: .92rem; }

    /* FAQ */
    #faq { background: var(--white); }
    .faq-wrap { max-width: 800px; margin: 56px auto 0; }
    .faq-item { border-bottom: 1px solid var(--gray-200); }
    .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; font-weight: 600; font-size: 1rem; transition: color var(--transition); }
    .faq-q:hover { color: var(--primary); }
    .faq-arrow { transition: transform var(--transition); font-size: 1.2rem; color: var(--gray-400); flex-shrink: 0; }
    .faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--primary); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
    .faq-item.open .faq-a { max-height: 300px; }
    .faq-a-inner { padding-bottom: 20px; color: var(--gray-600); font-size: .95rem; line-height: 1.8; }

    /* Footer */
    footer { background: var(--deep); color: rgba(255,255,255,.55); padding: 60px 0 32px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
    .footer-brand .logo { height: 30px; width: auto; margin-bottom: 16px; display: block; }
    .footer-brand p { font-size: .88rem; line-height: 1.7; max-width: 260px; }
    .footer-col h4 { color: var(--white); font-size: .9rem; margin-bottom: 16px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a { font-size: .88rem; color: rgba(255,255,255,.5); transition: color var(--transition); }
    .footer-col a:hover { color: var(--white); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
    .footer-bottom p { font-size: .82rem; }
    .footer-legal { display: flex; gap: 24px; }
    .footer-legal a { font-size: .82rem; color: rgba(255,255,255,.4); transition: color var(--transition); }
    .footer-legal a:hover { color: rgba(255,255,255,.8); }

    /* Cookie */
    #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--deep); color: rgba(255,255,255,.8); padding: 20px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; box-shadow: 0 -4px 32px rgba(0,0,0,.3); transform: translateY(0); transition: transform 0.4s ease; }
    #cookie-banner.hidden { transform: translateY(120%); }
    #cookie-banner p { font-size: .88rem; flex: 1; }
    #cookie-banner p a { color: var(--neutral); text-decoration: underline; }
    .cookie-btns { display: flex; gap: 10px; }
    .cookie-accept { background: var(--primary); color: var(--white); padding: 10px 22px; border-radius: 6px; font-weight: 600; font-size: .88rem; border: none; cursor: pointer; transition: var(--transition); }
    .cookie-accept:hover { background: var(--primary-d); }
    .cookie-decline { background: transparent; color: var(--white); padding: 10px 22px; border-radius: 6px; font-weight: 600; font-size: .88rem; border: 1px solid rgba(255,255,255,.6); cursor: pointer; transition: var(--transition); }
    .cookie-decline:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
    @media (max-width: 600px) {
      #cookie-banner { padding: 16px 18px; gap: 12px; flex-direction: column; align-items: stretch; }
      #cookie-banner p { font-size: .82rem; flex: none; }
      .cookie-btns { width: 100%; gap: 10px; }
      .cookie-accept, .cookie-decline { flex: 1; text-align: center; padding: 13px 16px; }
    }

    /* Animations */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }

    /* Page header */
    .page-header { padding: 124px 0 60px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
    .page-header h1 { font-size: clamp(2rem,4vw,3rem); color: var(--dark); margin-bottom: 16px; }
    .page-header p { color: var(--gray-600); font-size: 1.1rem; max-width: 580px; }

    /* ── Technik-Seite: durchgehendes Dokument, keine Tabs ── */
    .tech-section { background: var(--white); padding: 0 0 80px; }
    .tech-header { padding: 110px 0 8px; }
    .tech-page-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--dark); margin: 0; line-height: 1.15; }

    /* Kategorien: 3 Tabs statt Textliste */
    .tech-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 24px 0; }
    .tech-cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 30px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); transition: var(--transition); cursor: pointer; text-align: left; width: 100%; }
    .tech-cat-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
    .tech-cat-card h3 { color: var(--dark); font-size: 1.35rem; }
    .tech-cat-card span { color: var(--gray-600); font-size: .88rem; }
    .tech-cat-card h3 .tech-cat-suffix { color: var(--gray-400); font-size: inherit; font-weight: inherit; }
    .tech-cat-card.active h3 .tech-cat-suffix { color: var(--gray-400); }
    .tech-cat-card.active { border-color: var(--primary); background: var(--tint); }
    .tech-cat-card.active h3 { color: var(--primary-d); }

    /* Hotspot-Foto: Übersicht der Hauptmerkmale, Klick zeigt Detailkarte rechts. Foto bewusst etwas größer als die Karte daneben. */
    .tech-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 24px 0; align-items: center; }
    .tech-hotspot-photo { position: relative; max-width: 560px; width: 100%; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: var(--white); }
    .tech-hotspot-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }

    /* Hotspots: großer Kreis mit kleinem Punkt, der beim Anklicken fast den ganzen Kreis füllt */
    .tech-hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); border: none; padding: 0; cursor: pointer; box-shadow: var(--shadow); z-index: 3; }
    .tech-hotspot-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); transition: width .25s ease, height .25s ease; }
    .tech-hotspot:hover .tech-hotspot-dot { width: 15px; height: 15px; }
    .tech-hotspot.active .tech-hotspot-dot { width: 24px; height: 24px; }

    /* Detailkarte: kurze Vorschau des passenden Punkts weiter unten (per JS erzeugt), Foto und Text nebeneinander.
       Feste Höhe, damit jede Karte exakt gleich groß ist, unabhängig von der Textlänge (längere Texte werden geclamped). */
    #tech-hero-detail { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px; max-width: 560px; width: 100%; height: 340px; margin: 0 auto; display: flex; align-items: center; }
    #tech-hero-detail .tech-row { display: flex; align-items: center; gap: 18px; padding: 0; border: 0; width: 100%; }
    #tech-hero-detail .tech-row-img { height: 240px; flex-shrink: 0; margin-bottom: 0; border-radius: 12px; overflow: hidden; }
    #tech-hero-detail .tech-row--photo .tech-row-img.is-portrait { width: auto; aspect-ratio: 3/4; }
    #tech-hero-detail .tech-row--photo .tech-row-img.is-landscape { width: auto; aspect-ratio: 4/3; }
    #tech-hero-detail .tech-row-body { flex: 1; min-width: 0; }
    #tech-hero-detail .tech-row-num { display: inline-block; margin-bottom: 8px; }
    #tech-hero-detail .tech-row-body p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
    #tech-hero-detail .tech-hero-more { margin-top: 14px; padding: 6px 14px; font-size: .74rem; gap: 5px; }
    #tech-hero-detail .tech-hero-more svg { width: 12px; height: 12px; }
    #tech-hero-detail .thd-teaser-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    #tech-hero-detail .thd-teaser-bullets li { font-size: .86rem; color: var(--gray-600); line-height: 1.4; padding-left: 14px; position: relative; }
    #tech-hero-detail .thd-teaser-bullets li::before { content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

    /* Etappe 0: Leerzustand von #tech-hero-detail, bevor ein Hotspot angeklickt wurde.
       Bewusst NICHT im Karten-Look (kein Weiß/Schatten/Padding) - überschreibt dafür gezielt
       die Basisregel oben. Sobald ein Hotspot geklickt wird, entfernt showDetail() diese Klasse
       endgültig, ein Zurück zu diesem Zustand ist nicht vorgesehen. */
    #tech-hero-detail.tech-hero-detail--empty {
      background-color: transparent;
      background-image: radial-gradient(circle, rgba(53,153,131,.25) 1px, transparent 1.6px);
      background-size: 20px 20px;
      box-shadow: none;
      padding: 0;
      position: relative;
    }
    #tech-hero-detail.tech-hero-detail--empty::before,
    #tech-hero-detail.tech-hero-detail--empty::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border: 1.5px solid var(--primary);
      opacity: .35;
      pointer-events: none;
    }
    #tech-hero-detail.tech-hero-detail--empty::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
    #tech-hero-detail.tech-hero-detail--empty::after { bottom: 14px; right: 14px; border-left: none; border-top: none; }

    .thd-empty { position: relative; z-index: 1; width: 100%; max-width: 460px; margin: 0 auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
    .thd-statement { margin: 0; font-size: 1.3rem; line-height: 1.32; font-weight: 800; color: var(--dark); letter-spacing: -.01em; border-left: 3px solid var(--primary); padding-left: 16px; }
    .thd-facts { display: flex; flex-direction: column; }
    .thd-fact { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-top: 1px solid var(--gray-200); }
    .thd-fact:first-child { border-top: none; padding-top: 0; }
    .thd-fact:last-child { padding-bottom: 0; }
    .thd-icon { width: 21px; height: 21px; flex-shrink: 0; color: var(--primary); }
    .thd-flag { display: inline-flex; flex-shrink: 0; width: 26px; height: 15.6px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(16,14,14,.12); }
    .thd-flag svg { display: block; width: 100%; height: 100%; }
    .thd-text { font-size: .86rem; font-weight: 600; color: var(--gray-600); line-height: 1.4; }
    .thd-hint { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--gray-400); }
    .thd-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

    /* Mobil: Hotspot-Foto bleibt sichtbar, Detailkarte rutscht darunter statt daneben */
    @media (max-width: 768px) {
      .tech-hero-grid { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px 0; }
      .tech-hotspot-photo { max-width: 420px; }
      #tech-hero-detail { height: auto; min-height: 200px; padding: 20px; }
      #tech-hero-detail .tech-row { flex-direction: column; align-items: flex-start; gap: 14px; }
      #tech-hero-detail .tech-row-img,
      #tech-hero-detail .tech-row--photo .tech-row-img.is-portrait,
      #tech-hero-detail .tech-row--photo .tech-row-img.is-landscape { width: 100%; height: auto; aspect-ratio: 4/3; }
      .thd-empty { padding: 20px 22px; }
      .thd-statement { font-size: 1.1rem; }
    }

    /* Inhalt: ein Panel pro Kategorie, nur eines sichtbar */
    .tech-body { padding: 44px 24px 0; border-top: 1px solid var(--gray-200); margin-top: 44px; }
    .tech-panel { display: none; }
    .tech-panel.active { display: block; }
    .tech-rows { display: flex; flex-direction: column; }
    .tech-row { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--gray-100); }
    .tech-row:first-child { border-top: 1px solid var(--gray-100); }
    .tech-row-num { font-size: .7rem; font-weight: 700; color: var(--primary); letter-spacing: .1em; padding-top: 4px; opacity: .6; }
    .tech-row-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; line-height: 1.3; }
    .tech-row-body p { font-size: .875rem; color: var(--gray-600); margin: 0; line-height: 1.65; }
    .tech-row-specs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .tech-row-specs li { font-size: .875rem; color: var(--gray-600); line-height: 1.5; padding-left: 16px; position: relative; }
    .tech-row-specs li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
    .tech-row-specs strong { color: var(--dark); font-weight: 700; }
    .tech-spec-jump { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: .68rem; font-weight: 700; text-decoration: none; vertical-align: middle; transition: background var(--transition), transform var(--transition); }
    .tech-spec-jump:hover { background: var(--primary-d); transform: scale(1.12); }

    /* Hardware-Zeilen mit echtem Foto: breiter, Bild links */
    .tech-row--photo { grid-template-columns: 350px 1fr; align-items: center; }
    .tech-row--photo .tech-row-img { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; }
    .tech-row--photo .tech-row-img img, .tech-row--photo .tech-row-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .tech-row--photo .tech-row-num { display: block; padding-top: 0; margin-bottom: 6px; }
    .tech-row-img--placeholder { display: flex; align-items: center; justify-content: center; background: var(--gray-100); border: 1.5px dashed var(--gray-200); color: var(--gray-400); font-size: .85rem; font-weight: 600; }
    .tech-slider { position: relative; }
    .tech-row--photo .tech-row-img.tech-slider .tech-slide { display: none; position: absolute; inset: 0; }
    .tech-row--photo .tech-row-img.tech-slider .tech-slide.active { display: block; }
    .tech-row--photo .tech-row-img.tech-slider .tech-slide.tech-slide--flip-180 { transform: rotate(180deg); transform-origin: center; }
    .tech-slider-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
    .tech-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.1); padding: 0; cursor: pointer; }
    .tech-dot.active { background: var(--primary); border-color: var(--primary); }
    .tech-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(16,14,14,.82); border: 1.5px solid rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: background .2s ease, transform .2s ease; z-index: 2; }
    .tech-slider-arrow--prev { left: 10px; }
    .tech-slider-arrow--next { right: 10px; }
    .tech-slider-arrow:hover { background: rgba(16,14,14,1); transform: translateY(-50%) scale(1.08); }
    .tech-slider-arrow svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

    @media (max-width: 768px) {
      /* Kategorien: schmale, sticky Segmented-Control statt 3 große Karten,
         damit man beim Scrollen durch lange Merkmal-Listen die Orientierung behält. */
      .tech-cat-grid {
        grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 20px 16px 14px;
        position: sticky; top: 61px; z-index: 40; background: var(--white);
        border-bottom: 1px solid var(--gray-200);
      }
      .tech-cat-card { padding: 10px 6px; gap: 2px; align-items: center; text-align: center; border-radius: 10px; }
      .tech-cat-card h3 { font-size: .82rem; }
      .tech-cat-card span { font-size: .68rem; }
      .tech-cat-suffix { display: none; }
      /* .tech-body hatte einen eigenen Trennstrich + große Abstände, die jetzt zusammen
         mit der Trennlinie der sticky Tab-Leiste eine doppelte Linie mit totem Raum ergaben. */
      .tech-body { border-top: none; margin-top: 0; padding-top: 24px; }
      .tech-row--photo { grid-template-columns: 1fr; }

      /* Titel vor Foto: sonst sieht man beim Scrollen erst ein Foto und weiß nicht,
         zu welchem Punkt es gehört, weil Nummer/Titel erst danach kommen. Text/Specs
         sind eingeklappt ohnehin unsichtbar, dadurch steht effektiv nur der Titel vorm Foto. */
      .tech-row--photo .tech-row-body { order: -1; }

      /* Karten-Look statt dünner Trennlinie: jeder Punkt wirkt jetzt als eigener,
         klar abgegrenzter Container statt als durchlaufende Liste. */
      .tech-row {
        border-bottom: none;
        margin-bottom: 14px;
        padding: 18px 16px;
        background: var(--white);
        border: 1px solid var(--gray-100);
        border-radius: var(--radius);
      }
      .tech-row-body p {
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
      }
      .tech-row:last-child { margin-bottom: 0; }

      /* Merkmal-Zeilen: eingeklappt nur Titel (+ Foto bei Hardware), Text/Specs klappen per Klick auf */
      .tech-row-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
      .tech-row-header h3 {
        margin-bottom: 0;
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .tech-row-toggle {
        flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--gray-100);
        display: flex; align-items: center; justify-content: center;
        transition: transform var(--transition), background var(--transition);
      }
      .tech-row-toggle svg { width: 11px; height: 11px; stroke: var(--gray-600); }
      .tech-row--open .tech-row-toggle { background: var(--tint); transform: rotate(180deg); }
      .tech-row--open .tech-row-toggle svg { stroke: var(--primary); }
      .tech-row-body p.tech-row-collapsible,
      .tech-row-specs.tech-row-collapsible {
        max-height: 0; overflow: hidden; margin-top: 0 !important;
        transition: max-height .35s ease, margin-top .35s ease;
      }
      .tech-row--open .tech-row-body p.tech-row-collapsible { margin-top: 8px !important; }
      .tech-row--open .tech-row-specs.tech-row-collapsible { margin-top: 12px !important; }
    }

    @media (max-width: 1024px) {
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      h1 { font-size: 2rem; }
      h2 { font-size: 1.65rem; }
      .section { padding: 72px 0; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    }
  
    /* Kontakt-Block: einheitlich in base.css definiert */

    /* ── Footer (einheitlich, hell & zentriert) ── */
    /* Footer (horizontal, dunkelgrün) */
    footer { background: var(--deep); color: rgba(255,255,255,.6); padding: 48px 0 26px; text-align: left; }
    .ft-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
    .ft-brand { max-width: 380px; min-width: 240px; }
    .ft-brand svg { height: 36px; width: auto; margin-bottom: 16px; display: block; }
    .ft-brand p { font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.55); margin: 0; }
    .ft-col h4 { color: var(--white); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
    .ft-social a { display: inline-flex; width: 42px; height: 42px; background: rgba(255,255,255,.1); border-radius: 8px; align-items: center; justify-content: center; transition: var(--transition); }
    .ft-social a:hover { background: var(--primary); transform: translateY(-2px); }
    .ft-social svg { width: 22px; height: 22px; fill: var(--white); }
    .ft-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
    .ft-copy { font-size: .82rem; color: rgba(255,255,255,.45); margin: 0; }
    @media (max-width: 600px) { .ft-bottom { flex-direction: column-reverse; align-items: flex-start; } }

      .investors-strip { background: var(--white); padding: 10px 0 28px; border-top: 1px solid var(--gray-200); overflow: hidden; }
    .investors-divider { display: flex; align-items: center; gap: 16px; padding: 0 48px; margin-bottom: 14px; }
    .investors-divider::before, .investors-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
    .investors-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-400); white-space: nowrap; }
    .marquee-wrap { overflow: hidden; }
    .marquee-track { display: flex; align-items: center; gap: 90px; width: max-content; cursor: grab; user-select: none; }
    .marquee-track.dragging { cursor: grabbing; }
    .marquee-track a { display: block; line-height: 0; flex-shrink: 0; }
    .marquee-track img { height: 48px; width: auto; max-width: 200px; object-fit: contain; display: block; pointer-events: none; }

    /* ═══ TECHNISCHE MERKMALE ═══ */
    #tech-merkmale { background: #0c1e15; padding: 80px 0 72px; }
    #tech-merkmale h2 { text-align: center; color: var(--white); font-size: clamp(1.6rem, 2.4vw, 2.6rem); margin-bottom: 52px; }
    #tech-merkmale .adv-accent { margin-bottom: 20px; }
    .tech-diagram svg { width: 100%; display: block; }
    .tm-pill { fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.2); stroke-width: 1; transition: fill .2s, stroke .2s; }
    .tm-text { fill: rgba(255,255,255,0.75); font-family: inherit; transition: fill .2s; }
    .tm-end-dot { fill: #2a5c42; transition: fill .2s; }
    .tm-line { stroke: #1d4030; fill: none; transition: stroke .2s, stroke-width .2s; }
    .tm-label { cursor: pointer; }
    .tm-label:hover .tm-pill { fill: rgba(255,255,255,0.13); stroke: rgba(255,255,255,0.35); }
    .tm-label:hover .tm-text { fill: var(--white); }
    .tm-label:hover .tm-line { stroke: #2d6648; }
    .tm-label.tm-active .tm-pill { fill: var(--primary); stroke: var(--primary); }
    .tm-label.tm-active .tm-text { fill: var(--white); }
    .tm-label.tm-active .tm-end-dot { fill: var(--primary); }
    .tm-label.tm-active .tm-line { stroke: var(--primary); stroke-width: 1.5px; }
    .tech-detail-wrap { margin-top: 28px; min-height: 90px; padding: 22px 28px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; display: flex; align-items: center; }
    .tech-detail-wrap .td-hint { color: rgba(255,255,255,0.25); font-size: 1rem; margin: 0; width: 100%; text-align: center; }
    .tech-detail-wrap .td-content { display: none; width: 100%; }
    .tech-detail-wrap.has-content .td-hint { display: none; }
    .tech-detail-wrap.has-content .td-content { display: block; }
    .td-content h4 { color: var(--primary); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
    .td-content ul { margin: 0; padding-left: 20px; }
    .td-content li { color: rgba(255,255,255,0.7); font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.85; }
    .tm-hl-bat rect { fill: rgba(80,220,170,0.55) !important; stroke: #7affdb !important; }
    @keyframes tm-led-glow { 0%,100%{opacity:.9} 50%{opacity:.1} }
    .tm-hl-leds circle { fill: #7affdb !important; animation: tm-led-glow .65s ease-in-out infinite; }
    .tm-hl-scale rect { fill: rgba(80,220,170,0.45) !important; stroke: #7affdb !important; }
    #tm-body { transition: transform 500ms cubic-bezier(0.4,0,0.2,1), opacity 400ms ease; }
    #tm-bin  { transition: transform 500ms cubic-bezier(0.4,0,0.2,1), opacity 400ms ease; }

/* ---- */

.ncls-1{fill:none;stroke:#161616;stroke-miterlimit:10;stroke-width:9px;}.ncls-2{fill:var(--primary);}.ncls-3{fill:#c5dfb5;}.ncls-4{fill:#d8d8d8;}

/* ---- */

.flw-1{fill:none;stroke:var(--white);stroke-miterlimit:10;stroke-width:9px;}.flw-2{fill:var(--primary);}.flw-3{fill:#c5dfb5;}.flw-4{fill:#d8d8d8;}

@media (max-width: 768px) {
  .investors-strip .marquee-track { gap: 40px; }
  .investors-strip .marquee-track img { height: 30px; max-width: 120px; }
}