/* ================================================================
   lakesights · Site-Stylesheet
   Design-System „Layered Depth": dunkler Navy-Markenrahmen,
   heller Mittelteil, Ebenen-Systemgrafik. Gilt für alle Seiten;
   seitenspezifische Komponenten liegen im <style> der jeweiligen Seite.
   ================================================================ */

    /* ---------- Tokens ---------- */
    :root {
      --navy:        #0B3041;
      --navy-2:      #0A2A39;
      --navy-deep:   #07202C;
      /* Grundton der Kopfleiste. Sie liegt dort mit .86 Deckkraft über dem
         Inhalt; als Flächenfarbe von Bedienelementen wird derselbe Ton
         deckend verwendet. */
      --navy-bar:    #092431;
      --teal:        #1A6B70;
      --teal-bright: #3DB1B8;
      --teal-soft:   #5BC5CB;   /* Akzent auf dunklem Grund */
      --teal-link:   #7AD2D8;   /* Links auf dunklem Grund */
      --mist:        #AECACD;   /* Betrieb/Ops-Abstufung */
      --ink:         #1a2e2f;
      --ink-mid:     #4a6a6c;
      --paper:       #FBFCFC;
      --paper-2:     #EFF4F4;
      --card:        #FFFFFF;
      --line:        #E2EAEA;
      --line-2:      #D2DEDE;

      --w92: rgba(255,255,255,.92);
      --w86: rgba(255,255,255,.86);
      --w72: rgba(255,255,255,.72);
      --glass:      rgba(255,255,255,.055);
      --glass-line: rgba(255,255,255,.14);

      --focus: #1A6B70;

      /* Höhe der fixierten Kopfleiste, ergibt sich aus deren Inhalt */
      --head-h: 73px;

      --r-lg: 18px;
      --r-md: 14px;
      --r-sm: 10px;

      --shadow-card: 0 1px 2px rgba(11,48,65,.05), 0 16px 44px -20px rgba(11,48,65,.18);
      --shadow-card-hover: 0 2px 4px rgba(11,48,65,.05), 0 26px 56px -22px rgba(11,48,65,.26);

      /* Seitenbreite wie auf lakesights.de – füllt große Screens spürbar besser */
      --container: 87.5rem;   /* 1400px */
      --container-text: 60rem; /* schmalere Spur für reine Textblöcke */
      --pad-x: clamp(1.25rem, 4.5vw, 2.5rem);
      --sec-y: clamp(4.5rem, 9vw, 7.5rem);

      --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
      --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

      color-scheme: light;
    }

    /* ---------- Reset / Basis ---------- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { overflow-x: hidden; overflow-x: clip; }
    html { scroll-behavior: auto; }
    /* Der Browser schreibt die Farbe des Wurzelelements in den Überscroll-Bereich
       fort. Ohne diese Regel erbt er dort das Weiß der Seite und setzt eine harte
       weiße Kante an den dunklen Hero oben und die dunkle Fußzeile unten. */
    html { background: var(--navy-deep); }
    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }
    }
    body {
      overflow-x: hidden; overflow-x: clip;
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.65;
      color: var(--ink);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body.no-scroll { overflow: hidden; }
    img, svg, video { display: block; max-width: 100%; }
    img { height: auto; }
    ul { list-style: none; }
    [hidden] { display: none !important; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    input, textarea { font: inherit; color: inherit; }
    p, li, blockquote { overflow-wrap: break-word; }
    /* Silbentrennung nur auf schmalen Screens, wo lange Komposita sonst
       überlaufen. Ab Tablet keine Trennstriche in Überschriften. */
    h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
    @media (min-width: 768px) {
      h1, h2, h3 { hyphens: manual; }
    }
    ::selection { background: var(--teal-bright); color: #06222E; }

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

    .skip {
      position: fixed; top: -100px; left: 1rem; z-index: 100;
      padding: .75rem 1.25rem; border-radius: 999px;
      background: var(--navy); color: #fff; font-weight: 600; font-size: .9rem;
      transition: top .2s ease;
    }
    .skip:focus-visible { top: 1rem; outline-color: var(--teal-soft); }

    .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }

    /* Genau die Höhe der fixierten Kopfleiste. Mehr, und beim Ankersprung bleibt
       ein Streifen der vorherigen Sektion sichtbar; weniger, und der Kopf
       überdeckt den Sektionsanfang. */
    section[id] { scroll-margin-top: var(--head-h); }

    /* ---------- Typo-Bausteine ---------- */
    .kicker {
      display: block;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 1rem;
    }
    h1 {
      font-size: clamp(2.15rem, 1.1rem + 4.4vw, 3.55rem);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: -.018em;
      color: #fff;
    }
    h2 {
      font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.45rem);
      line-height: 1.15;
      font-weight: 700;
      letter-spacing: -.015em;
      color: var(--ink);
      margin-bottom: 1.1rem;
    }
    /* Groessere Statement-Ueberschrift, Schriftart wie alle Ueberschriften */
    .h2-lg {
      font-size: clamp(1.85rem, 1.15rem + 2.7vw, 2.9rem);
      line-height: 1.18;
    }
    .sec-lead {
      font-size: clamp(1.05rem, 1rem + .3vw, 1.175rem);
      line-height: 1.7;
      color: var(--ink-mid);
      max-width: 44rem;
    }

    /* ---------- Sections ---------- */
    .sec { padding-block: var(--sec-y); }
    .sec-head { text-align: center; margin-bottom: clamp(2.75rem, 6vw, 4.25rem); }
    .sec-head .sec-lead { margin-inline: auto; }
    .sec-light { background: var(--paper); }
    .sec-light.alt { background: var(--paper-2); }

    .sec-dark {
      --focus: var(--teal-link);
      position: relative;
      overflow: hidden;
      color: var(--w86);
    }
    .sec-dark h2 { color: #fff; }
    .sec-dark .kicker { color: var(--teal-soft); }
    .sec-dark .sec-lead { color: var(--w86); }

    /* ---------- Buttons & Links ---------- */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
      min-height: 48px;
      padding: .8rem 1.7rem;
      border-radius: 999px;
      font-weight: 600; font-size: 1rem; line-height: 1.2;
      transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .btn-primary { background: var(--teal-bright); color: #06222E; }
    .btn-primary:hover { background: #4FC0C7; transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(61,177,184,.55); }
    .btn-primary:active { transform: translateY(0); }
    .btn-lg { padding: .95rem 2.1rem; font-size: 1.05rem; }
    /* Sekundär: für Sprünge innerhalb der Seite, damit sie dem gefüllten
       Konversions-Button nicht die Aufmerksamkeit nehmen */
    .btn-ghost {
      border: 1px solid rgba(26,107,112,.35);
      color: var(--teal);
      background: transparent;
      transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    }
    .btn-ghost:hover { background: rgba(26,107,112,.07); border-color: var(--teal); color: #14585D; }
    .btn-ghost svg { width: 18px; height: 18px; flex: 0 0 auto; }

    .arrow-link {
      display: inline-flex; align-items: center; gap: .45rem;
      min-height: 44px;
      font-weight: 600; font-size: .975rem;
      color: var(--teal);
    }
    .arrow-link .arr { display: inline-block; transition: transform .2s ease; }
    .arrow-link:hover { color: #14585D; }
    .arrow-link:hover .arr { transform: translateX(4px); }

    /* ============================================================
       Header
       ============================================================ */
    .site-head {
      position: fixed; inset: 0 0 auto 0; z-index: 70;
      transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
      border-bottom: 1px solid transparent;
    }
    .site-head.is-scrolled {
      background: rgba(9,36,49,.86);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom-color: rgba(255,255,255,.08);
    }
    .head-inner {
      max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x);
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      height: 72px;
    }
    .brand {
      display: inline-flex; align-items: center; gap: .6rem;
      font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: #fff;
      min-height: 44px;
    }
    /* Logo steht immer auf dunklem Grund und wird deshalb weiß eingefärbt */
    .brand img { width: 30px; height: 30px; filter: brightness(0) invert(1); }

    /* Navigation sitzt links neben dem Logo, nicht mittig */
    .main-nav {
      display: none; align-items: center; gap: clamp(.25rem, 1.4vw, 1rem);
      margin-left: clamp(1rem, 3.5vw, 3rem);
      margin-right: auto;
    }
    .main-nav a {
      display: inline-flex; align-items: center;
      min-height: 44px; padding: .3rem .7rem;
      font-size: .95rem; font-weight: 500; color: var(--w86);
      border-radius: 999px;
      transition: color .2s ease, background-color .2s ease;
    }
    .main-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }

    /* ---------- Dropdown „Unsere Leistungen" ---------- */
    .nav-drop { position: relative; }
    .nav-drop-btn {
      display: inline-flex; align-items: center; gap: .4rem;
      min-height: 44px; padding: .3rem .7rem;
      font-size: .95rem; font-weight: 500; color: var(--w86);
      border-radius: 999px;
      transition: color .2s ease, background-color .2s ease;
    }
    .nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn { color: #fff; background: rgba(255,255,255,.08); }
    .nav-drop-btn svg { width: 14px; height: 14px; transition: transform .25s ease; }
    .nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }

    .nav-drop-panel {
      position: absolute; top: calc(100% + .5rem); left: 0; z-index: 5;
      width: min(23rem, calc(100vw - 2rem));
      padding: .5rem;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 16px;
      background: rgba(10,42,57,.97);
      -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
      box-shadow: 0 26px 60px -24px rgba(0,0,0,.7);
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; transform: none; }
    /* Auf Zeigegeräten öffnet bereits der Hover – Klick bleibt für Touch und Tastatur zuständig */
    @media (hover: hover) and (pointer: fine) {
      .nav-drop:hover .nav-drop-panel { opacity: 1; visibility: visible; transform: none; }
      .nav-drop:hover .nav-drop-btn { color: #fff; background: rgba(255,255,255,.08); }
      .nav-drop:hover .nav-drop-btn svg { transform: rotate(180deg); }
    }
    .nav-drop-panel a {
      display: block; min-height: 0; padding: .75rem .85rem;
      border-radius: 11px;
    }
    .nav-drop-panel a:hover { background: rgba(255,255,255,.08); }
    .nd-title { display: block; font-size: .95rem; font-weight: 600; color: #fff; }

    .head-actions { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.25rem); }
    .btn-head { display: none; min-height: 44px; padding: .6rem 1.3rem; font-size: .925rem; }

    /* ---------- Sprachumschalter ----------
       Baut auf .nav-drop auf und erbt damit dessen Verhalten aus site.js:
       Klick, Hover, Escape und Klick nach außen. Das Menü öffnet nach rechts,
       weil der Umschalter am rechten Rand der Kopfleiste sitzt. */
    .lang-drop { display: none; }
    .lang-drop .nav-drop-btn { gap: .35rem; padding: .3rem .6rem; }
    .lang-globe { width: 17px; height: 17px; flex: 0 0 auto; }
    /* .nav-drop-btn svg dreht beim Öffnen um 180°. Das gilt dem Pfeil, nicht
       dem Globus daneben. */
    .nav-drop.is-open .nav-drop-btn .lang-globe,
    .nav-drop:hover .nav-drop-btn .lang-globe { transform: none; }
    .lang-code { font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
    .lang-drop .nav-drop-panel {
      left: auto; right: 0;
      width: 12rem;
    }
    .lang-drop .nav-drop-panel a {
      display: flex; align-items: center; justify-content: space-between; gap: .75rem;
      font-size: .95rem; font-weight: 500; color: var(--w86);
    }
    .lang-drop .nav-drop-panel a:hover { color: #fff; }
    /* Die aktive Sprache trägt einen Haken statt einer Farbfläche, damit die
       Auswahl auch ohne Farbwahrnehmung erkennbar bleibt. */
    .lang-drop .nav-drop-panel a[aria-current="true"] { color: #fff; font-weight: 600; }
    .lang-check { width: 15px; height: 15px; flex: 0 0 auto; color: var(--teal-soft); opacity: 0; }
    .lang-drop .nav-drop-panel a[aria-current="true"] .lang-check { opacity: 1; }

    /* Im Mobile-Menü als zwei nebeneinanderliegende Schaltflächen */
    .mnav-lang {
      display: flex; align-items: center; gap: .5rem;
      margin-top: 1.75rem;
    }
    .mnav-lang-label {
      display: flex; align-items: center; gap: .4rem;
      margin-right: .35rem;
      font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
      color: var(--teal-soft);
    }
    .mnav-lang-label svg { width: 15px; height: 15px; }
    .mnav-lang a {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 44px; min-width: 56px; padding: .3rem 1rem;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      font-size: .95rem; font-weight: 600; color: var(--w86);
      transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    }
    .mnav-lang a:hover { color: #fff; border-color: rgba(255,255,255,.4); }
    .mnav-lang a[aria-current="true"] {
      color: #06222E; background: var(--teal-soft); border-color: var(--teal-soft);
    }

    @media (prefers-reduced-motion: reduce) {
      .mnav-lang a { transition: none; }
    }

    .site-head, .mnav { --focus: var(--teal-link); }

    /* Burger */
    .burger {
      position: relative; z-index: 80;
      display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
      width: 44px; height: 44px;
      border-radius: 10px;
    }
    .burger span {
      display: block; width: 22px; height: 2px; border-radius: 2px;
      background: #fff;
      transition: transform .3s ease, opacity .2s ease;
    }
    .burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger.is-open span:nth-child(2) { opacity: 0; }
    .burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile-Menü */
    .mnav {
      position: fixed; inset: 0; z-index: 60;
      display: flex; flex-direction: column;
      padding: 6.25rem var(--pad-x) 2.5rem;
      background:
        radial-gradient(120% 70% at 85% 0%, rgba(61,177,184,.12), transparent 55%),
        linear-gradient(180deg, var(--navy-2), var(--navy-deep));
      visibility: hidden; opacity: 0; transform: translateY(-8px);
      transition: opacity .3s ease, transform .3s ease, visibility .3s;
      overflow-y: auto;
    }
    .mnav.open { visibility: visible; opacity: 1; transform: none; }
    .mnav ul { display: flex; flex-direction: column; }
    .mnav ul a {
      display: flex; align-items: center;
      min-height: 56px;
      font-size: 1.45rem; font-weight: 600; color: #fff;
      border-bottom: 1px solid rgba(255,255,255,.09);
    }
    .mnav ul a:hover { color: var(--teal-soft); }
    /* Gruppenüberschrift im Mobile-Menü (Unsere Leistungen) */
    .mnav-group {
      padding: 1.5rem 0 .5rem;
      font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
      color: var(--teal-soft);
    }
    .mnav-group:first-child { padding-top: 0; }
    .mnav ul.mnav-sub a { font-size: 1.25rem; padding-left: .9rem; }
    /* Einzelner Punkt ohne Gruppe (Blog): gleicher Abstand wie vor einer Gruppenüberschrift */
    .mnav ul.mnav-solo { margin-top: 1.5rem; }
    .mnav-cta { margin-top: 2rem; }
    .mnav-lang { display: flex; align-items: center; gap: .45rem; margin-top: 1.75rem; font-size: .95rem; font-weight: 600; }

    @media (min-width: 1024px) {
      .main-nav { display: flex; }
      .lang-drop { display: block; }
      .btn-head { display: inline-flex; }
      .burger { display: none; }
      .mnav { display: none; }
    }

    /* ============================================================
       1 · Hero
       ============================================================ */
    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 6.5rem 0 5.5rem;
      background:
        radial-gradient(120% 90% at 78% 8%, rgba(61,177,184,.16), transparent 55%),
        linear-gradient(172deg, #0C3648 0%, var(--navy) 48%, var(--navy-2) 100%);
      overflow: hidden;
    }
    .hero-media, .hero-media video {
      position: absolute; inset: 0; width: 100%; height: 100%;
    }
    .hero-media video { object-fit: cover; }
    .hero-veil {
      position: absolute; inset: 0;
      background:
        radial-gradient(85% 60% at 50% 42%, rgba(11,48,65,.12), rgba(7,26,36,.42) 100%),
        linear-gradient(180deg, rgba(7,26,36,.74) 0%, rgba(9,38,52,.55) 45%, rgba(10,42,57,.94) 100%);
    }
    .hero-inner { position: relative; text-align: center; }
    .hero-kicker { color: var(--teal-soft); margin-bottom: 1.25rem; }
    /* Kap. 1.3: groesserer Zeilenabstand und mehr Abstand zum Lead */
    .hero h1 { max-width: 54rem; margin-inline: auto; line-height: 1.22; }
    .h1-l2 { display: block; }
    .hero-sub {
      max-width: 40rem;
      /* Unten kein Abstand mehr: der Hero trägt keine Schaltfläche, der frühere
         Abstand hinterließ nur eine Lücke über dem Scroll-Hinweis. */
      margin: 2.4rem auto 0;
      font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
      line-height: 1.7;
      color: var(--w86);
    }
    .hero-sub-l2 { display: block; }
    .hero-cue {
      position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
      color: rgba(255,255,255,.6);
      display: none;
    }
    @media (min-width: 768px) {
      .hero-cue { display: block; }
      .hero-cue svg { animation: cueFloat 2.6s ease-in-out infinite; }
    }
    @keyframes cueFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(7px); }
    }

    /* ---------- Kompakter Seiten-Hero (Unterseiten, dunkel) ----------
       Der fixe Header ist transparent mit weißer Schrift – jede Seite
       muss deshalb oben mit einer dunklen Fläche beginnen. */
    .page-hero {
      position: relative; overflow: hidden;
      /* Kap. 1.3: feste Mindesthoehe, damit die dunkle Flaeche beim
         Seitenwechsel nicht springt. Die Vorgabe nennt 560px; die
         Systemgrafik der Anwendungsseite traegt eine Ebene mehr und braucht
         606px. Bei 560px waere genau der Sprung geblieben, den die Regel
         verhindern soll, deshalb der gemeinsame Wert. */
      min-height: 610px;
      display: flex; align-items: center;
      padding: calc(72px + clamp(2.5rem, 5vw, 3.5rem)) 0 clamp(2.5rem, 5vw, 3.5rem);
      background:
        radial-gradient(110% 80% at 82% 10%, rgba(61,177,184,.14), transparent 55%),
        linear-gradient(172deg, #0C3648 0%, var(--navy) 55%, var(--navy-2) 100%);
      color: var(--w86);
      --focus: var(--teal-link);
    }
    .page-hero > .container { width: 100%; }
    .page-hero .kicker { color: var(--teal-soft); }
    .page-hero h1 {
      color: #fff;
      font-size: clamp(2rem, 1.25rem + 3vw, 2.9rem);
      max-width: 46rem;
    }
    .page-hero-lead {
      margin: 1.15rem 0 1.9rem;
      font-size: clamp(1.02rem, 1rem + .3vw, 1.15rem);
      line-height: 1.7;
      color: var(--w86);
      max-width: 36rem;
    }
    .page-hero-grid {
      display: grid; grid-template-columns: minmax(0, 1fr);
      gap: clamp(2.25rem, 5vw, 3.5rem);
      align-items: center;
    }
    @media (min-width: 900px) {
      .page-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
    }

    /* ============================================================
       2 · Was wir machen (helle Section, Text links / Grafik rechts)
       ============================================================ */
    /* Weiche Lichtstimmung hinter der Grafik, damit das dunkle Panel nicht
       wie aufgeklebt wirkt, sondern in der Fläche liegt. */
    .sec-system {
      background:
        radial-gradient(70% 70% at 78% 45%, rgba(26,107,112,.05), transparent 72%),
        var(--paper);
    }

    /* Zweispaltiger Aufbau: links Text, rechts Systemgrafik */
    /* Text und Grafik liegen auf einer gemeinsamen Fläche, damit sie als ein
       Objekt gelesen werden und nicht als zwei lose Blöcke nebeneinander.
       Der Verlauf zieht von links nach rechts zur Grafik hin an. */
    .system-grid {
      display: grid; grid-template-columns: minmax(0, 1fr);
      gap: clamp(2.25rem, 4.5vw, 3.5rem);
      align-items: center;
      position: relative; z-index: 0;
      padding: clamp(1.6rem, 3.5vw, 3rem);
      border: 1px solid var(--line);
      border-radius: clamp(20px, 2.5vw, 30px);
      background:
        radial-gradient(90% 130% at 92% 50%, rgba(26,107,112,.09), transparent 68%),
        var(--card);
      /* Schatten nach unten: bildet die Überleitung zur Leistungs-Section */
      box-shadow:
        0 1px 2px rgba(11,48,65,.05),
        0 26px 44px -30px rgba(11,48,65,.22),
        0 60px 90px -55px rgba(11,48,65,.4);
    }
    @media (min-width: 1024px) {
      .system-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* Kicker und Grafik starten auf derselben Oberkante, der Text läuft
           darunter aus. Zentriert wirkte die Spalte gegenüber der Grafik unruhig. */
        align-items: start;
      }
    }
    .system-copy .sec-lead { max-width: 34rem; }
    /* Ohne das sitzt der Kicker wegen seiner Zeilenhöhe rund 5px unter der
       Oberkante der Grafik. Mit line-height 1 fluchten beide Oberkanten. */
    .system-copy .kicker { line-height: 1; margin-bottom: 1.15rem; }
    .system-cta { margin-top: clamp(1.6rem, 3vw, 2.1rem); }
    .system-copy h2 { margin-bottom: 1.1rem; }

    /* ---------- Systemgrafik (dunkles Panel auf heller Section) ---------- */
    .sysgraf {
      position: relative;
      max-width: 40rem;
      margin-inline: auto;
      /* Ab Zweispaltigkeit füllt die Grafik ihre Spalte und schließt rechts
         bündig mit den Karten darunter ab. */
      --sysgraf-fill: 0;
      padding: clamp(1.4rem, 3vw, 2.1rem);
      border-radius: 26px;
      background:
        radial-gradient(80% 60% at 50% 0%, rgba(61,177,184,.16), transparent 65%),
        linear-gradient(170deg, #0E3B4E 0%, var(--navy) 55%, var(--navy-2) 100%);
      /* kein Schlagschatten: die Grafik liegt flach auf der gemeinsamen Fläche,
         den Schatten trägt die Fläche selbst */
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .sys-stack { position: relative; }

    /* Ebene: App (aktiv, Akzent) */
    .sys-app {
      position: relative;
      padding: 1.05rem 1.15rem 1.15rem;
      border: 1px solid rgba(61,177,184,.5);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(61,177,184,.17), rgba(61,177,184,.06));
      box-shadow: 0 0 46px -12px rgba(61,177,184,.35), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .sys-app-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; }
    .sys-dot { width: 7px; height: 7px; border-radius: 50%; background: #7CD6DB; flex: 0 0 auto; }
    .sys-tag {
      font-size: .72rem; font-weight: 600; letter-spacing: .18em;
      white-space: nowrap;
    }
    .sys-tag--app { color: #7CD6DB; }
    .sys-tag--plt { color: #8FD0D4; }

    .sys-ui { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: end; }
    .sys-input {
      display: flex; align-items: center; gap: .5rem;
      min-width: 0;
      padding: .55rem .55rem .55rem .9rem;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      background: rgba(7,26,36,.45);
    }
    .sys-q {
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: .8rem; color: rgba(255,255,255,.8);
    }
    /* Auf schmalen Screens passt die Beispielfrage nie in eine Zeile. Umbrechen
       ist dort besser als abschneiden, sonst bleibt die Frage unlesbar. */
    @media (max-width: 559.98px) {
      .sys-q { white-space: normal; text-overflow: clip; line-height: 1.45; }
      .sys-input { align-items: flex-start; border-radius: 16px; }
      .sys-send { margin-top: -.15rem; }
    }
    .sys-send {
      flex: 0 0 auto; margin-left: auto;
      width: 26px; height: 26px; border-radius: 50%;
      display: grid; place-items: center;
      background: rgba(61,177,184,.92); color: #06222E;
    }
    .sys-send svg { width: 13px; height: 13px; }
    .sys-chart {
      display: flex; align-items: flex-end; justify-content: center; gap: 7px;
      height: 56px; padding: 0 .25rem;
    }
    .sys-chart i {
      width: 9px; border-radius: 3px 3px 1px 1px;
      height: var(--h);
      background: linear-gradient(180deg, #4FC0C7, #1A6B70);
      transform-origin: bottom;
    }
    .sys-chart i:last-child {
      background: linear-gradient(180deg, #8ADDE2, #3DB1B8);
      box-shadow: 0 0 14px -2px rgba(124,214,219,.5);
    }

    /* Ebene: Datenplattform (ruhig, breit) */
    .sys-platform {
      display: flex; align-items: center; justify-content: center; gap: .6rem;
      padding: 1.35rem 1rem;
      border: 1px solid rgba(70,160,166,.45);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(26,107,112,.36), rgba(26,107,112,.16));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
    }
    .sys-platform svg { width: 16px; height: 16px; color: #8FD0D4; flex: 0 0 auto; }

    /* Gemeinsame Optik aller Datenlinien: laufende Punkte von unten nach oben */
    .sys-line {
      width: 2px; border-radius: 2px;
      background-image: repeating-linear-gradient(0deg, rgba(91,197,203,.85) 0 5px, transparent 5px 12px);
      animation: flowUp 1.05s linear infinite;
    }
    @keyframes flowUp { to { background-position-y: -12px; } }

    /* ---- Verbindung: Pfeil nach oben mit laufender Linie darunter ----
       Dieselbe Einheit sowohl von der Plattform zur App als auch von jeder
       Datenquelle in die Plattform. */
    .sys-access {
      display: grid; justify-items: center; align-content: center;
      gap: .3rem;
      height: 46px;
    }
    /* Vielfaches der Musterlänge von 12px (5px Strich + 7px Lücke), sonst wird
       das Muster am oberen Ende mitten im Zyklus abgeschnitten. */
    .sys-access .sys-line { height: 24px; }
    .sys-access-tip {
      width: 0; height: 0;
      border-inline: 5px solid transparent;
      border-bottom: 7px solid rgba(122,210,216,.85);
    }

    /* Vier Quellen, vier Verbindungen: im selben Spaltenraster wie die Kacheln,
       damit jede exakt über der Mitte ihrer Kachel sitzt. */
    .sys-merge {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    /* Bewusst ohne versetzte Verzögerungen: liefen die vier Linien phasenverschoben,
       stand über einer Kachel ein Strich und über der nächsten eine Lücke. */

    /* Bezeichner unter den Quellkacheln */
    .sys-caption {
      margin-top: .7rem;
      text-align: center;
      font-size: .66rem; font-weight: 600; letter-spacing: .2em;
      color: rgba(255,255,255,.5);
    }

    /* Quellsysteme */
    .sys-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .sys-tile {
      display: flex; align-items: center; justify-content: center;
      padding: .7rem .4rem;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 10px;
      background: rgba(255,255,255,.06);
      font-size: .78rem; font-weight: 500; letter-spacing: .04em;
      color: rgba(255,255,255,.8);
      white-space: nowrap;
    }

    @media (max-width: 479.98px) {
      /* Kacheln stehen 2x2: Sammelschiene und Stichleitungen ziehen mit,
         sonst sitzen sie nicht mehr über der Mitte ihrer Kachel. */
      .sys-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sys-merge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sys-merge .sys-access:nth-of-type(3), .sys-merge .sys-access:nth-of-type(4) { display: none; }
    }
    @media (min-width: 560px) {
      .sys-ui { grid-template-columns: minmax(0, 1fr) 128px; }
      .sys-chart { justify-content: flex-end; padding: 0; }
    }
    @media (min-width: 1024px) {
      .sysgraf { max-width: none; margin-inline: 0; }
    }

    /* ---------- Überleitung von der Systemgrafik zu den Leistungen ----------
       Trägt die Kompetenzaussage: eine feine Trennmarke, die Kernaussage und
       darunter drei überprüfbare Belege statt Eigenschaftswörtern. */
    .services-lead {
      margin-top: clamp(3.5rem, 7vw, 5.5rem);
      text-align: center;
    }
    /* Kapitelmarke: Haarlinien laufen nach außen aus, in der Mitte steht die
       Auszeichnung. Trägt den Übergang allein, deshalb etwas mehr Gewicht als
       ein normaler Kicker. */
    .sl-rule {
      display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center; gap: clamp(1rem, 3.5vw, 2.25rem);
      max-width: 46rem; margin-inline: auto;
    }
    .sl-rule::before, .sl-rule::after {
      content: ""; height: 1px;
      background: linear-gradient(90deg, transparent, var(--line-2));
    }
    .sl-rule::after { background: linear-gradient(90deg, var(--line-2), transparent); }
    .sl-label {
      font-size: .82rem; font-weight: 600;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--teal);
      white-space: nowrap;
    }
    /* ---------- Drei Pillar-Karten (hell) ---------- */
    .cards3 {
      display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
      margin-top: clamp(3rem, 6vw, 4.5rem);
    }
    .services-lead + .cards3 { margin-top: clamp(2.25rem, 4vw, 3rem); }
    @media (min-width: 768px) and (max-width: 1023.98px) {
      .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cards3 > :last-child { grid-column: 1 / -1; }
    }
    @media (min-width: 1024px) {
      .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    }

    .gcard {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
      padding: 1.9rem 1.7rem 1.5rem;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 20px;
      /* Gleiche Schattensprache wie die Fläche darüber, sonst wirken die
         Karten dagegen flach. */
      box-shadow:
        0 1px 2px rgba(11,48,65,.05),
        0 18px 32px -24px rgba(11,48,65,.22),
        0 46px 70px -52px rgba(11,48,65,.4);
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    /* Einheitlicher Strich über allen drei Karten, je Ebene eingefärbt */
    .gcard::before {
      content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
      background: var(--acc1);
    }
    .gcard:hover {
      transform: translateY(-4px);
      border-color: var(--line-2);
      box-shadow:
        0 1px 2px rgba(11,48,65,.05),
        0 26px 44px -26px rgba(11,48,65,.28),
        0 62px 92px -55px rgba(11,48,65,.45);
    }
    /* Eine Akzentfarbe für alle drei Karten: die Leistungen sind gleichrangig,
       eine Farbfolge hätte eine Rangfolge nahegelegt, die es nicht gibt. Das
       frühere #8FB2B6 lag mit 2,24:1 zudem unter der Mindestanforderung von
       3:1 für grafische Elemente (WCAG 2.1) und wurde als „deaktiviert“ gelesen. */
    .gcard--bau, .gcard--app, .gcard--ops { --acc1: var(--teal); --acc-text: var(--teal); }

    /* Fluide Größe und engere Sperrung: die längeren Verbtitel bleiben damit
       auf jeder Breite einzeilig, sonst brechen die drei Karten ungleich um. */
    /* Kap. 1.2: Versalien bleiben den Kickern vorbehalten, Kartentitel in
       gemischter Schreibweise. */
    .gcard-t {
      font-size: clamp(1.08rem, .78rem + .55vw, 1.35rem);
      font-weight: 700; letter-spacing: -.005em;
      color: var(--ink);
      margin-bottom: .75rem;
    }
    .gcard-p { font-size: .96rem; line-height: 1.68; color: var(--ink-mid); margin-bottom: 1.4rem; }
    .gcard .arrow-link { margin-top: auto; font-size: .95rem; }

    /* Pillen (nur noch auf Unterseiten verwendet) */
    .pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
    .pills li {
      padding: .34rem .8rem;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      font-size: .79rem; font-weight: 500;
      color: var(--w86);
      white-space: nowrap;
    }

    /* ============================================================
       3 · Die App in Aktion
       ============================================================ */
    .appshot {
      max-width: 62.5rem; margin-inline: auto;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 30px 70px -30px rgba(11,48,65,.3), 0 2px 6px rgba(11,48,65,.05);
    }
    /* Die nachgebildete Fensterleiste (.winbar) ist entfallen: Dekoration ohne
       Aussage, die eine fremde Betriebssystemoberfläche nachahmte. */

    .vph-wrap { max-width: 47.5rem; margin: clamp(2.25rem, 5vw, 3.25rem) auto 0; }
    .vph {
      position: relative;
      aspect-ratio: 16 / 9;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
      border: 1.5px dashed var(--line-2);
      border-radius: 16px;
      background:
        radial-gradient(60% 70% at 50% 40%, rgba(61,177,184,.06), transparent 75%),
        #EBF1F1;
      padding: 1.5rem;
      text-align: center;
    }
    .vph-play {
      width: 64px; height: 64px; border-radius: 50%;
      display: grid; place-items: center;
      background: #fff;
      border: 1.5px solid rgba(26,107,112,.45);
      box-shadow: 0 10px 26px -12px rgba(11,48,65,.28);
      color: var(--teal);
    }
    .vph-play svg { width: 22px; height: 22px; margin-left: 2px; }
    .vph-text { font-size: .95rem; font-weight: 500; color: var(--ink-mid); letter-spacing: .01em; }

    /* ---------- Eigene Abspielfläche über dem Video ----------
       Mit controls zeigt der Browser seine eigene Bedienleiste über dem
       Standbild, in eigener Optik je Browser und Betriebssystem und auf dem
       Mobilgerät über einem erheblichen Teil des Bildes. Stattdessen liegt bis
       zum Start eine eigene Schaltfläche darüber; die Browsersteuerung wird
       erst beim Abspielen eingeblendet (siehe site.js). */
    .vplay { position: relative; }
    /* Ohne Abdunklung: das Standbild bleibt unangetastet, allein die
       Schaltfläche zeigt an, dass hier ein Video liegt. */
    .vplay-btn {
      position: absolute; inset: 0;
      display: grid; place-items: center;
      border-radius: inherit;
      background: transparent;
    }
    .vplay.is-playing .vplay-btn { display: none; }
    /* Milchglas statt gefüllter Kreisfläche: die Schaltfläche legt sich über
       das Standbild, statt ein Loch hineinzustanzen. Der Rand hält sie auch
       über hellen Bildstellen sichtbar. */
    .vplay-ic {
      position: relative;
      width: 82px; height: 82px; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--navy-bar);
      border: 1.5px solid rgba(255,255,255,.5);
      color: #fff;
      box-shadow: 0 12px 40px -10px rgba(7,32,44,.5);
      transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
    }
    /* Ring, der beim Überfahren nach außen aufgeht */
    .vplay-ic::before {
      content: ""; position: absolute; inset: -11px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.35);
      opacity: 0; transform: scale(.88);
      transition: opacity .25s ease, transform .25s ease;
    }
    .vplay-ic svg { width: 26px; height: 26px; margin-left: 3px; }
    /* Beim Überfahren bleibt der Farbton, die Fläche hellt nur eine Stufe auf.
       Die Rückmeldung trägt vor allem der aufgehende Ring. */
    .vplay-btn:hover .vplay-ic {
      background: var(--navy);
      border-color: rgba(255,255,255,.85);
      transform: scale(1.05);
    }
    .vplay-btn:hover .vplay-ic::before { opacity: 1; transform: scale(1); }
    .vplay-btn:focus-visible .vplay-ic::before { opacity: 1; transform: scale(1); }
    @media (max-width: 559.98px) {
      .vplay-ic { width: 64px; height: 64px; border-width: 1.25px; }
      .vplay-ic svg { width: 21px; height: 21px; }
      .vplay-ic::before { inset: -8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .vplay-btn, .vplay-ic, .vplay-ic::before { transition: none; }
      .vplay-btn:hover .vplay-ic { transform: none; }
    }

    /* ---------- Pfeile zum Durchschalten der Bühne ----------
       Liegen links und rechts über der Bühne und schalten zyklisch durch die
       Reiter (site.js, data-tabs-prev/-next). Die Zone spannt exakt das
       16:9-Feld der Bühne auf, dadurch sitzen die Knöpfe auf Bildmitte und
       nicht auf der Mitte von Bild plus Bildunterschrift. Gestaltung wie die
       Abspielfläche: Navy der Kopfleiste, weißer Rand. */
    .show-stage { position: relative; }
    .show-navzone {
      position: absolute; top: 0; left: 0; right: 0;
      aspect-ratio: 16 / 9;
      pointer-events: none;
      z-index: 2;
    }
    .show-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      pointer-events: auto;
      width: 46px; height: 46px; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--navy-bar); color: #fff;
      border: 1.5px solid rgba(255,255,255,.5);
      box-shadow: 0 10px 30px -12px rgba(7,32,44,.55);
      transition: background-color .2s ease, border-color .2s ease, transform .2s ease,
                  opacity .25s ease, visibility .25s;
    }
    /* Während das Video läuft, verdecken die Pfeile den Inhalt: ausblenden,
       bei Pause oder Ende kommen sie zurück (site.js setzt die Klasse). */
    .is-video-playing .show-nav { opacity: 0; visibility: hidden; }
    .show-nav svg { width: 20px; height: 20px; }
    .show-nav--prev { left: clamp(.6rem, 2vw, 1.1rem); }
    .show-nav--next { right: clamp(.6rem, 2vw, 1.1rem); }
    .show-nav:hover {
      background: var(--navy);
      border-color: rgba(255,255,255,.85);
      transform: translateY(-50%) scale(1.06);
    }
    @media (max-width: 559.98px) {
      .show-nav { width: 44px; height: 44px; border-width: 1.25px; }
      .show-nav svg { width: 18px; height: 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .show-nav { transition: none; }
      .show-nav:hover { transform: translateY(-50%); }
    }

    .sec-more { text-align: center; margin-top: clamp(2rem, 4.5vw, 2.75rem); }

    /* Funktions-Kacheln unter dem App-Screenshot */
    .app-tiles {
      display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
      max-width: 62.5rem;
      margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
    }
    @media (min-width: 640px) { .app-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
    .atile { margin: 0; }
    .atile-media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 10px 30px -18px rgba(11,48,65,.22), 0 1px 3px rgba(11,48,65,.05);
    }
    .atile-media img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: left top;
    }
    .atile-media--demo {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
      border: 1.5px dashed var(--line-2);
      background:
        radial-gradient(70% 80% at 50% 35%, rgba(61,177,184,.14), transparent 75%),
        linear-gradient(160deg, #10394C, var(--navy-2));
    }
    .atile-media--demo .vph-play { width: 52px; height: 52px; }
    .atile-media--demo .vph-play svg { width: 18px; height: 18px; }
    .atile-cap {
      display: flex; align-items: center; gap: .5rem;
      margin-top: .65rem;
      font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
      color: var(--ink-mid);
    }
    .atile-cap::before {
      content: ""; flex: 0 0 auto;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--teal-bright);
    }

    /* ============================================================
       4 · Wo stehen Sie heute?
       ============================================================ */
    .entry3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    @media (min-width: 768px) and (max-width: 1023.98px) {
      .entry3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .entry3 > :last-child { grid-column: 1 / -1; }
    }
    @media (min-width: 1024px) {
      .entry3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    }
    .ecard {
      display: flex; flex-direction: column;
      padding: 1.9rem 1.7rem 1.5rem;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-card);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .ecard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--line-2); }
    .e-num {
      font-size: .8rem; font-weight: 600; letter-spacing: .12em;
      color: #6D8A8C;
      margin-bottom: 1.1rem;
    }
    .ecard h3 { font-size: 1.17rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: .6rem; }
    .ecard p { font-size: .96rem; color: var(--ink-mid); margin-bottom: 1.1rem; }
    .ecard .arrow-link { margin-top: auto; font-size: .95rem; }

    /* ============================================================
       6 · Case Study
       ============================================================ */
    .case {
      display: grid; grid-template-columns: minmax(0, 1fr);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }
    @media (min-width: 1024px) {
      .case { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
    }
    .case-body { padding: clamp(1.9rem, 4.5vw, 3.5rem); }
    .case-client {
      font-size: .93rem; font-weight: 600; color: var(--ink);
      letter-spacing: .01em;
      margin-bottom: 1.9rem;
    }
    .case-kpi { margin-bottom: 1.6rem; }
    .kpi-num {
      display: block;
      font-size: clamp(3.3rem, 2.2rem + 4.6vw, 5.1rem);
      font-weight: 700; letter-spacing: -.03em; line-height: 1;
      color: var(--navy);
    }
    .kpi-num::after {
      content: ""; display: block;
      width: 58px; height: 4px; border-radius: 2px;
      margin-top: .85rem;
      background: linear-gradient(90deg, var(--teal), var(--teal-bright));
    }
    .kpi-sub { display: block; margin-top: .8rem; font-size: .98rem; color: var(--ink-mid); }
    .case-text { font-size: .99rem; color: var(--ink-mid); margin-bottom: 1.6rem; max-width: 34rem; }
    .case-quote {
      border-left: 3px solid #BFE3E5;
      padding: .2rem 0 .2rem 1.1rem;
      margin-bottom: 1.7rem;
      font-size: .95rem; color: var(--ink-mid);
    }
    .case-media { position: relative; min-height: 240px; }
    .case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 1023.98px) {
      .case-media { order: 2; aspect-ratio: 16 / 9; min-height: 0; }
      .case-media img { position: absolute; }
    }

    /* ============================================================
       7 · Technologie & Vertrauen
       ============================================================ */
    .trust4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    @media (min-width: 640px) { .trust4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.75rem; } }
    @media (min-width: 1024px) { .trust4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .tfield { display: flex; flex-direction: column; }
    .t-icon {
      width: 46px; height: 46px; border-radius: 12px;
      display: grid; place-items: center;
      background: #E7F1F0;
      color: var(--teal);
      margin-bottom: 1rem;
    }
    .t-icon svg { width: 24px; height: 24px; }
    .tfield h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
    .tfield p { font-size: .93rem; color: var(--ink-mid); }

    /* ---------- Abschluss-CTA ohne Formular ----------
       Wird von /betrieb/ und der Success Story genutzt, deshalb global. */
    .cta-solo { max-width: 46rem; margin-inline: auto; text-align: center; }
    .cta-solo .contact-lead { margin-inline: auto; }
    .cta-solo .contact-founders { justify-content: center; flex-wrap: wrap; }
    .cta-act { margin-top: 2.5rem; }

    /* ---------- Rechtsseiten: Impressum, Datenschutz ----------
       Reine Textseiten. Schmale Spur, Abschnitte durch Haarlinien getrennt. */
    /* Linke Kante bündig mit Titel und Vorspann des Heros: zentriert stünde der
       Fließtext gegenüber der Überschrift eingerückt, das liest sich wie ein
       Versatz. Die schmale Spur bleibt, sie wächst nur nach rechts aus. */
    .legal { max-width: var(--container-text); margin-inline: 0; }
    .legal-block + .legal-block {
      margin-top: clamp(2rem, 4vw, 2.75rem);
      padding-top: clamp(2rem, 4vw, 2.75rem);
      border-top: 1px solid var(--line);
    }
    .legal h2 {
      font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
      font-weight: 700; line-height: 1.35; color: var(--ink);
      margin-bottom: .8rem;
    }
    .legal p, .legal li { font-size: .98rem; line-height: 1.75; color: var(--ink-mid); }
    .legal p + p { margin-top: .9rem; }
    .legal ul { margin-top: .8rem; padding-left: 1.2rem; list-style: disc; }
    .legal li + li { margin-top: .35rem; }
    .legal a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
    .legal a:hover { color: var(--ink); }
    .legal-stand {
      margin-top: clamp(2rem, 4vw, 2.75rem);
      padding-top: clamp(2rem, 4vw, 2.75rem);
      border-top: 1px solid var(--line);
      font-size: .9rem; color: var(--ink-mid);
    }

    /* ---------- Kompakte Technik-/Compliance-Marker am Fuß einer Sektion ----------
       Kurzform von .trust4 ohne Fließtext. Wird auf der Startseite und auf
       /anwendung/ verwendet, deshalb hier global statt je Seite dupliziert. */
    .tech-sep {
      height: 1px; border: 0;
      max-width: 64rem;
      margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
      background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
    }
    /* Gleich breite Spalten, damit die Karten trotz unterschiedlich langer
       Beschriftungen dieselbe Größe haben und bündig zum Block darüber stehen. */
    .tech-row {
      display: grid; grid-template-columns: minmax(0, 1fr);
      gap: .85rem;
      max-width: 64rem;
      margin: clamp(2rem, 4vw, 2.75rem) auto 0;
    }
    @media (min-width: 560px) { .tech-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
    @media (min-width: 900px) { .tech-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .tech-item {
      display: flex; align-items: center; gap: .8rem;
      padding: 1rem 1.15rem;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      /* nur ein Hauch Schatten: der volle Kartenschatten lässt so flache Kacheln schweben */
      box-shadow: 0 1px 2px rgba(11,48,65,.05);
      font-size: .92rem; font-weight: 600; line-height: 1.4;
      color: var(--ink);
    }
    .tech-ic {
      flex: 0 0 auto;
      width: 34px; height: 34px; border-radius: 10px;
      display: grid; place-items: center;
      background: #E7F1F0;
      color: var(--teal);
    }
    .tech-ic svg { width: 18px; height: 18px; }

    /* ============================================================
       8 · Abschluss-CTA + Kontakt (dunkle Akzentfläche)
       ============================================================ */
    .sec-cta {
      background:
        radial-gradient(90% 55% at 50% 0%, rgba(61,177,184,.15), transparent 60%),
        linear-gradient(180deg, var(--navy) 0%, #092836 100%);
    }
    .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4.5rem); }
    @media (min-width: 1024px) {
      .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
    }
    .contact-intro h2 { margin-bottom: 1.2rem; }
    .contact-lead { font-size: clamp(1.02rem, 1rem + .25vw, 1.15rem); line-height: 1.7; color: var(--w86); max-width: 34rem; }

    .contact-founders { margin-top: 2.25rem; display: flex; align-items: center; gap: 1rem; }
    .avatars { display: flex; }
    .avatar {
      width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
      position: relative;
      background: var(--paper-2);
      border: 2px solid rgba(255,255,255,.4);
      flex: 0 0 auto;
    }
    .avatar + .avatar { margin-left: -12px; }
    /* Fotos bleiben unbehandelt, keine Duotone-Einfärbung */
    .avatar img {
      width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
    }
    .avatar-names { font-size: .95rem; font-weight: 500; color: var(--w86); }

    .contact-panel {
      background: var(--glass);
      border: 1px solid var(--glass-line);
      border-radius: 20px;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      padding: clamp(1.5rem, 3.5vw, 2.4rem);
    }
    .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    @media (min-width: 560px) { .form-row.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .form-group { margin-bottom: 1rem; min-width: 0; }
    .form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
    .form-label-row label { font-size: .84rem; font-weight: 600; color: var(--w86); }
    .form-opt { font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.55); }
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="tel"],
    .contact-form textarea {
      width: 100%;
      min-height: 48px;
      padding: .75rem .95rem;
      font-size: 1rem;
      color: #fff;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 12px;
      transition: border-color .2s ease, background-color .2s ease;
    }
    .contact-form textarea { min-height: 120px; resize: vertical; }
    .contact-form input:hover, .contact-form textarea:hover { border-color: rgba(255,255,255,.34); }
    .contact-form input:focus-visible, .contact-form textarea:focus-visible {
      outline: 2px solid var(--teal-link); outline-offset: 1px;
      border-color: transparent;
      background: rgba(255,255,255,.09);
    }
    .form-submit { width: 100%; margin-top: .4rem; }
    .form-submit:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }
    .form-privacy { margin-top: .9rem; font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.66); }
    .form-error {
      margin-top: .9rem; padding: .8rem 1rem;
      border: 1px solid rgba(255,164,164,.4);
      border-radius: 10px;
      background: rgba(255,120,120,.09);
      font-size: .88rem; color: #FFC9C9;
    }
    .form-success { text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem) 1rem; }
    .fs-icon {
      width: 52px; height: 52px; border-radius: 50%;
      display: grid; place-items: center;
      margin: 0 auto 1.1rem;
      background: rgba(61,177,184,.16);
      border: 1px solid rgba(61,177,184,.5);
      color: var(--teal-link);
    }
    .fs-icon svg { width: 24px; height: 24px; }
    .fs-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: .4rem; }
    .form-success p { color: var(--w86); }
    .form-mailto { margin-top: 1.2rem; font-size: .9rem; color: var(--w72); }
    .form-mailto a {
      color: var(--teal-link); font-weight: 600;
      text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(122,210,216,.45);
    }
    .form-mailto a:hover { text-decoration-color: currentColor; }

    /* ============================================================
       Footer
       ============================================================ */
    .footer {
      background: var(--navy-deep);
      border-top: 1px solid rgba(255,255,255,.07);
      color: var(--w72);
      padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
      --focus: var(--teal-link);
    }
    .foot-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .foot-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    @media (min-width: 560px) {
      .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    }
    @media (min-width: 900px) {
      .foot-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 3rem; }
    }
    .foot-brand .brand { font-size: 1.1rem; }
    .fcol h3 {
      font-size: .74rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
      color: rgba(255,255,255,.58);
      margin-bottom: .6rem;
    }
    .fcol a {
      display: inline-flex; align-items: center;
      min-height: 44px;
      font-size: .95rem; color: var(--w86);
      transition: color .2s ease;
    }
    .fcol a:hover { color: var(--teal-soft); }
    .foot-bottom {
      margin-top: clamp(2.5rem, 5vw, 3.5rem);
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,.08);
      display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    }
    .foot-social {
      display: grid; place-items: center;
      width: 44px; height: 44px; border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      color: var(--w86);
      transition: color .2s ease, border-color .2s ease, background-color .2s ease;
    }
    .foot-social:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
    .foot-social svg { width: 19px; height: 19px; }
    .foot-copy { font-size: .84rem; color: rgba(255,255,255,.55); }

    /* ============================================================
       Tabs (Durchklick-Muster, z. B. Beispielfragen)
       ============================================================ */
    .tabs-bar {
      display: flex; flex-wrap: wrap; gap: .25rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: clamp(2rem, 4vw, 2.75rem);
    }
    .tab-btn {
      position: relative;
      min-height: 48px;
      padding: .75rem 1.05rem;
      font-size: .95rem; font-weight: 600; line-height: 1.35;
      color: var(--ink-mid);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      text-align: left;
      transition: color .2s ease, border-color .2s ease;
    }
    .tab-btn:hover { color: var(--ink); }
    .tab-btn[aria-selected="true"] { color: var(--teal); border-bottom-color: var(--teal); }
    .tab-panel[hidden] { display: none !important; }

    /* Unter 768px als zweizeiliges Raster statt waagerecht scrollbarer Leiste.
       Scrollbar war ausgeblendet: bei 390px Breite standen zwei der vier Reiter
       außerhalb des Sichtfelds, ohne jeden Hinweis darauf. Als Raster ist jeder
       Reiter ohne Bedienschritt sichtbar. */
    @media (max-width: 767.98px) {
      .tabs-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        border-bottom: 0;
      }
      /* Bewusst über .tabs-bar gebunden: Reiterleisten aus Miniaturen
         (.show-bar auf der Startseite) bringen ihre eigenen Maße mit und dürfen
         von diesen Pillenmaßen nicht erfasst werden. */
      .tabs-bar .tab-btn {
        min-height: 46px;
        padding: .55rem .7rem;
        margin-bottom: 0;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        font-size: .9rem;
        text-align: center;
      }
      .tabs-bar .tab-btn[aria-selected="true"] {
        border-color: var(--teal);
        background: rgba(26,107,112,.08);
      }
      /* Bei ungerader Anzahl läuft der letzte Reiter über beide Spalten, statt
         als halbbreiter Rest in der zweiten Zeile zu hängen. */
      .tabs-bar .tab-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }

    /* ============================================================
       Einblendungen (nur mit JS + ohne reduced motion aktiv)
       ============================================================ */
    @media (prefers-reduced-motion: no-preference) {
      .js .rv {
        opacity: 0; transform: translateY(18px);
        transition: opacity .65s ease, transform .65s cubic-bezier(.2, .65, .25, 1);
        transition-delay: var(--d, 0s);
      }
      .js .rv.in { opacity: 1; transform: none; }
    }

    /* ---------- Reduced Motion: alles ruhigstellen ---------- */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .hero-cue { display: none !important; }
    }