/* Basis-Stylesheet dguv
   ---------------------------------------------------------------
   Die Tokens sind an die Werte aus theme.json gebunden, nicht kopiert.
   Wer eine Farbe aendern will, aendert sie dort - hier nie. Die Hexwerte
   hinter dem Komma sind reine Ausfallsicherung, falls das Preset-CSS
   einmal nicht geladen wird (z.B. in einer isolierten Vorschau).
   --------------------------------------------------------------- */
  :root {
    /* Text und Akzent */
    --ink:          var(--wp--preset--color--text, #1c2731);
    --slate:        var(--wp--preset--color--dunkel, #283745);
    --blue:         var(--wp--preset--color--akzent, #007bf9);
    --blue-dark:    var(--wp--preset--color--akzent-dunkel, #0060c4);
    --muted:        var(--wp--preset--color--text-gedeckt, #5a6b7a);

    /* Flaechen und Linien */
    --bg:           var(--wp--preset--color--flaeche, #ffffff);
    --bg-soft:      var(--wp--preset--color--flaeche-hell, #f3f7fb);
    --bg-blue-tint: var(--wp--preset--color--flaeche-akzent, #eaf3fe);
    --line:         var(--wp--preset--color--linie, #dfe7ee);

    /* Auf dunklem Grund: eigene Leiter, weil --blue auf Slate zu wenig
       Kontrast hat. Betrifft Hero, Digital-Block, CTA-Baender, Footer. */
    --akzent-hell:  var(--wp--preset--color--akzent-hell, #6FB4FB);
    --lede-hell:    var(--wp--preset--color--lede-hell, #9FC9F7);
    --text-hell:    var(--wp--preset--color--text-hell, #B9C7D3);
    --text-hell-kr: var(--wp--preset--color--text-hell-kraeftig, #E8EEF4);

    /* Signalfarben. Beide kommen an genau einer Stelle vor. */
    --warnung:      var(--wp--preset--color--warnung, #D9822B);
    --bewertung:    var(--wp--preset--color--bewertung, #F5A623);

    /* Radius-System. Der abgenommene Entwurf laeuft eckig (alle Werte 0).
       Fuer die runde Variante: 14px / 10px / 999px in theme.json. */
    --radius:       var(--wp--custom--radius--basis, 0px);
    --radius-sm:    var(--wp--custom--radius--klein, 0px);
    --radius-pill:  var(--wp--custom--radius--pille, 0px);

    /* Die einzige Beschleunigungskurve der Seite. */
    --ease:         var(--wp--custom--ease, cubic-bezier(0.16, 1, 0.3, 1));

    /* Container */
    --wrap:         var(--wp--custom--container--breite, 1200px);
    --wrap-rand:    var(--wp--custom--container--rand, 24px);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    /* Absicherung gegen die Textautomatik mobiler Browser, die lange Absätze
       eigenmächtig vergrößert und kurze nicht. Hier gemessen kein Unterschied,
       auf echten Android-Geräten kann sie bei langen Lesestrecken greifen. */
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }
  /* WordPress' Block-Bibliothek bringt :where(figure) { margin: 0 0 1em } und
     :where(figcaption) { margin: .5em 0 1em } mit. :where() hat Spezifitaet
     null, genauso wie der *-Reset darueber, also entscheidet die Reihenfolge,
     und die Block-CSS wird nach dem Theme ausgegeben. Ein Elementselektor hat
     Spezifitaet 0,0,1 und gewinnt unabhaengig von der Reihenfolge.

     Gemessen hat das eine Sektion um 16px verschoben: der Rand der figure
     zaehlt zur Rasterzeile, obwohl die figure selbst gleich hoch blieb.

     Steht nur hier und nicht im Entwurf: dort gibt es keine Block-Bibliothek. */
  figure, figcaption { margin: 0; }


  /* Schrift, Schriftgroesse, Zeilenhoehe und Textfarbe kommen aus
     theme.json (styles.typography und styles.color). Hier bleibt nur die
     Flaeche, weil sie zum Sektionsrhythmus gehoert.

     Der Footer ist das Ende der Seite. Auf kurzen Seiten waere der Inhalt
     sonst kuerzer als das Fenster und unter dem Footer bliebe die weisse
     Body-Flaeche stehen. Die Spalte streckt sich deshalb auf mindestens
     Fensterhoehe und der Inhaltsbereich nimmt den Rest.

     Nur die vier direkten Kinder von body werden dadurch Flex-Elemente:
     Topbar, Kopfbereich, main und Footer. Die Sektionen liegen in main und
     bleiben im normalen Fluss, ihr Abstandsverhalten aendert sich nicht. */
  body {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  main { flex: 1 0 auto; }
  body > footer { flex-shrink: 0; }
  /* height:auto ist Pflicht. WordPress schreibt an jedes Bild width- und
     height-Attribute; ohne diese Regel gilt die Attributhöhe als Layouthöhe
     und aspect-ratio greift nicht. Im HTML-Prototyp fiel das nicht auf, weil
     dort keine Maßattribute standen. */
  img { max-width: 100%; display: block; height: auto; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-rand); }

  /* Groesse, Gewicht, Zeilenhoehe, Laufweite und Farbe der Ueberschriften
     stehen in theme.json unter styles.elements. Hier steht nur, was
     theme.json nicht ausdruecken kann.
     Nicht wieder hier festlegen: theme.json erzeugt ":root :where(h1)", und
     das ":root" schlaegt ein blankes "h1". Eine Regel an dieser Stelle waere
     wirkungslos und wuerde trotzdem wie die gueltige aussehen. */
  h1, h2, h3 { text-wrap: balance; }
  p  { max-width: 65ch; }
  /* Lange URLs und Normbezeichnungen im Bestandstext sprengen sonst das
     Raster — auf einer Seite lief die Sektion 477px über die Breite hinaus. */
  p, li, h1, h2, h3, h4, .mt, .ms { overflow-wrap: anywhere; }
  .muted { color: var(--muted); }
  /* Sprungziele unterhalb der klebenden Navigation (73px) landen lassen. */
  main [id] { scroll-margin-top: 100px; }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--blue); color: #fff;
    font-weight: 600; font-size: 1rem; font-family: inherit;
    padding: 14px 26px; border-radius: var(--radius-pill);
    transition: background .25s var(--ease), transform .15s var(--ease);
    white-space: nowrap;
    /* border/cursor: .btn läuft inzwischen auch auf <button> (Formular V2) */
    border: 0; cursor: pointer;
  }
  /* Auf sehr schmalen Displays läuft der lange CTA-Text sonst aus dem Bild. */
  @media (max-width: 480px) { .btn { white-space: normal; } }
  .btn:hover { background: var(--blue-dark); }
  .btn:active { transform: scale(0.98); }
  .btn.ghost {
    background: transparent; color: var(--slate);
    border: 1.5px solid var(--line);
  }
  .btn.ghost:hover { border-color: var(--blue); color: var(--blue); }

  /* ---------- Topbar ---------- */
  .topbar {
    background: var(--slate); color: #cfdae4;
    font-size: 0.82rem;
  }
  .topbar .wrap {
    display: flex; justify-content: space-between; align-items: center;
    gap: 28px; padding-top: 7px; padding-bottom: 7px;
  }
  .topbar .claim { color: #9fb3c5; }
  .topbar .contact { display: flex; gap: 28px; }
  @media (max-width: 860px) { .topbar .claim { display: none; } }
  .topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
  .topbar a:hover { color: #fff; }
  .topbar i { color: var(--blue); font-size: 1rem; }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  header.nav .wrap {
    position: relative; /* Bezugsrahmen für das volle MegaMenü */
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; gap: 20px;
  }
  .logo img { height: 46px; width: auto; }
  .nav .btn { padding: 11px 22px; font-size: 0.9rem; }

  nav.main ul { list-style: none; display: flex; gap: 2px; }
  /* Die Listenpunkte füllen die Headerhöhe, damit die Panels sauber unter
     der Headerkante ansetzen und nicht in sie hineinragen. */
  nav.main > ul { height: 72px; align-items: center; }
  nav.main > ul > li { position: relative; display: flex; align-items: center; height: 100%; }
  /* Das breite Panel spannt über den ganzen Container, deshalb darf sein
     Listenelement keinen eigenen Bezugsrahmen aufmachen. */
  nav.main > ul > li.full { position: static; }

  /* Labels sind im Original Versalien — keine CSS-Transformation, so steht
     es im Quelltext. Kleiner Grad + Sperrung hält sie trotzdem ruhig. */
  nav.main .top {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.06em; color: var(--slate);
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    transition: color .2s, background .2s;
  }
  nav.main .top:hover, nav.main li:focus-within > .top {
    color: var(--blue); background: var(--bg-soft);
  }
  nav.main .caret { font-size: 0.7rem; opacity: 0.45; transition: transform .25s var(--ease); }
  nav.main li:hover > .top .caret, nav.main li:focus-within > .top .caret {
    transform: rotate(180deg); opacity: 1;
  }

  /* Angemeldet liegt die WordPress-Adminleiste fest am oberen Rand, mit
     z-index 99999. Die klebende Navigation rutscht sonst darunter und ihre
     obere Haelfte wird abgeschnitten. Die Leiste ist 32px hoch, unter 782px
     46px, und ab 600px scrollt sie mit (position: absolute), dann braucht es
     keinen Versatz. Betrifft nur angemeldete Benutzer, nie Besucher. */
  body.admin-bar header.nav { top: 32px; }
  @media screen and (max-width: 782px) {
    body.admin-bar header.nav { top: 46px; }
  }
  @media screen and (max-width: 600px) {
    body.admin-bar header.nav { top: 0; }
  }

  /* ---------- MegaMenü-Panels ---------- */
  .mega {
    position: absolute; top: calc(100% + 12px); left: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 26px 64px rgba(40, 55, 69, 0.16);
    padding: 26px; z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  /* Unsichtbare Brücke: sonst reisst der Hover in der Lücke zum Panel ab. */
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }
  nav.main li:hover > .mega, nav.main li:focus-within > .mega {
    opacity: 1; visibility: visible; transform: none;
  }
  .mega.wide { left: 0; right: 0; }
  .mega.med { width: 580px; }
  .mega.narrow { width: 320px; }

  .mega-cols { display: grid; gap: 26px 32px; }
  .mega.wide .mega-cols { grid-template-columns: repeat(3, 1fr) 240px; }
  .mega.med .mega-cols { grid-template-columns: 1fr 1fr; }

  .mega ul.mega-list { display: block; }
  .mega-list li + li { margin-top: 2px; }
  /* Icon links, Titel und Untertitel rechts untereinander. */
  .mega-list a {
    display: grid; grid-template-columns: auto 1fr; gap: 1px 13px; align-items: center;
    padding: 9px 12px; border-radius: var(--radius-sm); color: var(--slate);
    transition: background .2s;
  }
  .mega-list.no-icon a { grid-template-columns: 1fr; }
  .mega-list a:hover { background: var(--bg-soft); }
  .mega-list i {
    grid-row: span 2; font-size: 1.4rem; color: var(--blue);
    line-height: 1; transition: transform .2s var(--ease);
  }
  .mega-list a:hover i { transform: scale(1.12); }
  .mega-list .mt {
    font-size: 0.9rem; font-weight: 600; line-height: 1.3;
    transition: color .2s;
  }
  .mega-list a:hover .mt { color: var(--blue); }
  .mega-list .ms {
    font-size: 0.775rem; font-weight: 400; line-height: 1.35; color: var(--muted);
  }
  /* Einträge ohne Untertitel: Icon nicht über zwei Zeilen strecken. */
  .mega-list a:not(:has(.ms)) i { grid-row: auto; }

  .mega-teaser {
    background: var(--bg-soft); border-radius: var(--radius-sm); padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .mega-teaser img { border-radius: var(--radius-sm); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; }
  .mega-teaser .btn { justify-content: center; font-size: 0.88rem; padding: 12px 18px; }

  /* Panel nach Gruppen: eine Spalte je Gruppe, der Teaser bleibt rechts.
     Die Zahl der Gruppen setzt navigation.php als --gruppen. */
  .mega.wide .mega-cols.gruppen { grid-template-columns: repeat(var(--gruppen, 2), 1fr) 240px; }
  .mega.wide .mega-cols.gruppen:not(:has(.mega-teaser)) { grid-template-columns: repeat(var(--gruppen, 2), 1fr); }
  .mega-head {
    margin: 0 0 8px; padding: 0 12px;
    font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--ink);
  }
  /* Abstand zur letzten Zeile wie oben zum Panelrand (16px + 9px Polster
     der Zeile). Unter der Linie oben und unten je 16px, damit der Link
     mittig in seinem Streifen sitzt. */
  .mega:has(> .mega-fuss) { padding-bottom: 16px; }
  .mega-fuss {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 24px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  }
  .mega-fuss a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.9rem; font-weight: 600; color: var(--ink); transition: color .2s;
  }
  .mega-fuss a:hover { color: var(--blue); }
  .mega-fuss i { color: var(--blue); transition: transform .2s var(--ease); }
  .mega-fuss a:hover i { transform: translateX(3px); }

  /* ---------- Hamburger ---------- */
  .nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--slate); font-size: 1.4rem; cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--blue); color: var(--blue); }
  .nav-toggle .ph-x { display: none; }
  .nav-toggle[aria-expanded="true"] .ph-x { display: block; }
  .nav-toggle[aria-expanded="true"] .ph-list { display: none; }

  /* ---------- Mobil ---------- */
  @media (max-width: 1150px) {
    .nav-toggle { display: flex; }
    nav.main {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      background: #fff; border-bottom: 1px solid var(--line);
      box-shadow: 0 26px 64px rgba(40, 55, 69, 0.16);
      padding: 10px 24px 24px;
      max-height: calc(100dvh - 72px); overflow-y: auto;
    }
    nav.main.open { display: block; }
    nav.main > ul { flex-direction: column; gap: 0; height: auto; align-items: stretch; }
    nav.main > ul > li { display: block; height: auto; }
    nav.main .top { width: 100%; font-size: 0.82rem; padding: 13px 8px; }
    nav.main .caret { display: none; }
    /* Panels sind mobil ausgeklappter Teil des Flusses, kein Overlay. */
    .mega, .mega.wide, .mega.med, .mega.narrow {
      position: static; width: auto; opacity: 1; visibility: visible; transform: none;
      border: 0; box-shadow: none; border-radius: 0;
      padding: 0 0 12px 10px;
    }
    .mega::before { display: none; }
    .mega.wide .mega-cols, .mega.med .mega-cols { grid-template-columns: 1fr; gap: 0; }
    .mega-teaser { display: none; }
    .mega-list a { padding: 9px 10px; }
    .mega.wide .mega-cols.gruppen,
    .mega.wide .mega-cols.gruppen:not(:has(.mega-teaser)) { grid-template-columns: 1fr; gap: 0; }
    .mega-head {
      margin: 10px 0 2px; padding: 0 10px;
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--muted);
    }
    .mega-fuss { justify-content: flex-start; margin-top: 6px; padding: 0 10px; border-top: 0; }
    .mega-fuss a { padding: 9px 0; }
    .nav-cta-mobile { display: block; margin-top: 16px; }
    .nav-cta-mobile .btn { width: 100%; justify-content: center; }
  }
  .nav-cta-mobile { display: none; }
  @media (max-width: 620px) { .nav .btn.nav-cta { display: none; } }

  /* ---------- Kopfbereich auf Telefonen ----------
     Zwei Dinge, die bis 620px auseinanderlaufen:

     1. Das Logo ist mit 46px Hoehe und rund 245px Breite auf einem 320er
        Display zwei Drittel der Fensterbreite.
     2. Die Hoehe steht fest, die Box schrumpft als Flex-Element aber mit.
        Dadurch wird das Logo gestaucht und laeuft unter den Hamburger, der
        damit nicht mehr zuverlaessig zu treffen ist.

     flex-shrink: 0 verhindert das Stauchen, die kleinere Hoehe schafft den
     Platz dafuer. Bei 320px bleiben so 36px Luft zwischen beiden. */
  @media (max-width: 620px) {
    .logo { flex-shrink: 0; }
    .logo img { height: 36px; }
  }

  /* ---------- Hero ---------- */
  .hero { overflow: hidden; background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%); }
  /* Bild links, Text rechts. Die Trust-Zeile spannt unter beide Spalten. */
  .hero .wrap {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px;
    align-items: center; padding-top: 56px; padding-bottom: 56px;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800; color: var(--slate);
  }
  .hero h1 .claim {
    display: block; margin-top: 6px;
    font-size: 0.5em; font-weight: 700; letter-spacing: -0.01em;
  }
  .hero h1 em { font-style: normal; color: var(--blue); }
  .hero .lede {
    margin-top: 22px; font-size: 1.08rem; color: var(--muted); max-width: 46ch;
  }
  .hero .cta-row {
    margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  }
  /* ---------- USP-Bullets ---------- */
  .usp { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
  .usp li { display: flex; gap: 12px; align-items: flex-start; }
  .usp i { font-size: 1.35rem; color: var(--blue); flex-shrink: 0; line-height: 1.25; }
  .usp span { font-size: 0.97rem; color: var(--muted); line-height: 1.5; }
  .usp b { color: var(--slate); font-weight: 600; }

  /* ---------- Trust-Zeile im Hero ---------- */
  .hero-trust {
    grid-column: 1 / -1; margin-top: 44px; padding-top: 30px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  }
  .google-card {
    display: grid; gap: 3px; flex-shrink: 0;
    padding: 14px 20px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius);
  }
  .google-card .g-label {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
  }
  .google-card .g-stars { display: flex; gap: 2px; color: var(--bewertung); font-size: 0.95rem; }
  .google-card .g-meta { font-size: 0.82rem; color: var(--muted); }
  .google-card .g-meta b { color: var(--slate); font-weight: 700; font-size: 0.95rem; }

  .hero-kunden { flex: 1; min-width: 260px; }
  .hero-kunden .hk-label { display: block; font-size: 0.82rem; color: var(--muted); }
  .hk-logos {
    margin-top: 12px; display: flex; align-items: center;
    gap: 28px; flex-wrap: wrap;
  }
  .hk-logos img {
    height: 30px; width: auto; max-width: 106px; object-fit: contain;
    filter: grayscale(1); opacity: 0.55; transition: filter .3s, opacity .3s;
  }
  .hk-logos a:hover img { filter: grayscale(0); opacity: 1; }
  .hero-visual { position: relative; }
  .hero-visual img {
    border-radius: var(--radius);
    box-shadow: 0 24px 64px rgba(40, 55, 69, 0.18);
    width: 100%; height: 460px; object-fit: cover;
  }
  .hero-badge {
    position: absolute; left: -18px; bottom: -18px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 18px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 12px 32px rgba(40, 55, 69, 0.12);
    font-size: 0.88rem; font-weight: 600; color: var(--slate);
  }
  .hero-badge i { font-size: 1.6rem; color: var(--blue); }
  @media (max-width: 860px) {
    .hero .wrap { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 56px; }
    .hero-badge { left: 12px; bottom: -14px; }
  }

  /* ---------- Sections base ---------- */
  section { padding: 88px 0; }
  section.tight { padding: 64px 0; }
  .eyebrow {
    display: inline-block; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
    margin-bottom: 14px;
  }

  /* ---------- Footer ---------- */
  /* Auf "body > footer" begrenzt: ein blankes "footer" trifft sonst auch
     semantische <footer>-Elemente in Bloecken — etwa die Quellenangabe im
     Zitat, die dann den dunklen Seitenfuss-Hintergrund erbt. */
  /* border-top: trennt den Footer, wenn direkt davor eine dunkle Sektion
     (CTA-Band) steht — sonst verschmelzen beide Slate-Flächen. */
  body > footer {
    background: var(--slate); color: var(--text-hell); padding: 72px 0 36px; font-size: 0.92rem;
    border-top: 1px solid rgba(255,255,255,.09);
  }
  .foot-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 48px;
  }
  body > footer .logo-w img { height: 32px; width: auto; }
  body > footer h4, body > footer .foot-h { color: #fff; font-size: 0.95rem; margin-bottom: 18px; font-weight: 600; }
  body > footer ul { list-style: none; display: grid; gap: 10px; }
  body > footer ul a { transition: color .2s; }
  body > footer ul a:hover { color: #fff; }
  .foot-badges { display: flex; gap: 20px; align-items: center; margin-top: 20px; }
  .foot-badges img { height: 40px; width: auto; background: #fff; border-radius: var(--radius-sm); padding: 6px; }
  .foot-bottom {
    margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.82rem; color: var(--text-hell); /* #8296a7 hatte 3,98:1 */
  }
  .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
  .foot-cookie, .foot-cookie a, .foot-cookie button { color: var(--text-hell); text-decoration: underline; text-underline-offset: 2px; transition: color .2s; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
  .foot-cookie a:hover, .foot-cookie button:hover { color: #fff; }
  @media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .leistung-card img, .btn, .zg-card { transition: none; }
  }

  /* ================================================================
     Aus leistung-photovoltaik.html uebernommen: diese Sektionen sind
     inzwischen globale Bloecke und gehoeren ins gemeinsame System.
     ================================================================ */

  /* ================================================================
     Seitenspezifisch: Leistungsseite. Alles Übrige kommt aus style.css.
     ================================================================ */

  /* H-Struktur 1:1 wie im Original: diese Seite hat genau 9 Überschriften
     (H1, 2x H2, 2x H3, 4x H4), alle im oberen Teil. Die global geteilten
     Blöcke unten tragen im Original KEINE Heading-Tags. Deshalb sind ihre
     Titel hier <p>/<span> und werden nur optisch wie Überschriften gesetzt. */
  .section-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.02em; color: var(--slate);
    text-wrap: balance;
  }
  .t3 { font-weight: 600; line-height: 1.2; color: var(--slate); }
  .kunden .section-title {
    font-size: 1rem; font-weight: 600; color: var(--muted);
    text-align: center; letter-spacing: 0.02em;
    /* Der globale Absatz ist auf 65ch begrenzt. text-align zentriert dann nur
       innerhalb dieser 65ch, und die Zeile stand links neben der Mitte der
       Logoleiste. */
    max-width: none;
  }

  /* ---------- Fließtext ---------- */
  /* Eigene, mittige Lesespalte. Mit der vollen Containerbreite und 65ch
     Absatzbreite stünde der Text linksbündig und die rechte Hälfte leer —
     bei kurzen Absätzen unauffällig, bei langen Textseiten unruhig. */
  .prose.soft { background: var(--bg-soft); }
  .prose .wrap { max-width: 760px; }
  .prose p, .prose li { max-width: none; }
  .prose-bild { max-width: none; }
  /* Bilder im Fließtext */
  .prose-bild {
    border-radius: var(--radius); margin: 28px 0;
    width: 100%; max-height: 460px; object-fit: cover;
  }
  /* Mehrere Bilder eines Abschnitts nebeneinander. */
  .prose-galerie {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; margin: 28px 0;
  }
  .prose-galerie img {
    width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: cover; border-radius: var(--radius-sm);
  }
  .prose h1 { color: var(--slate); }
  .prose h2 { margin-top: 56px; color: var(--slate); }
  .prose p { margin-top: 18px; font-size: 1.05rem; color: var(--muted); }
  /* Rechtstexte: Zwischenueberschriften, Listen und Links im Fliesstext. */
  .prose h3 { margin-top: 36px; color: var(--slate); }
  .prose h4 { margin-top: 28px; font-size: 1.05rem; font-weight: 600; color: var(--slate); }
  .prose ul, .prose ol { margin-top: 14px; padding-left: 22px; font-size: 1.05rem; color: var(--muted); }
  .prose li { margin-top: 6px; line-height: 1.65; }
  .prose li::marker { color: var(--blue); }
  .prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
  .prose a:hover { color: var(--blue-dark); }
  .rechtstext { padding: 72px 0 96px; }
  .rechtstext h1 { margin-bottom: 8px; }

  /* Bilder im Fliesstext der Textmodule. Einzelbild volle Breite, mehrere
     nebeneinander. Geteilt von Text-Split und Text-TOC. */
  .ts-body img, .tt-body img {
    display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover;
    margin-top: 28px; border-radius: var(--radius);
  }
  .text-galerie {
    display: grid; gap: 14px; margin-top: 28px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .text-galerie img { margin-top: 0; aspect-ratio: 3 / 4; max-height: none; }

  /* Links im Fliesstext. Global gibt es bewusst kein a:hover und keine
     Linkfarbe (siehe CLAUDE.md), deshalb hier auf die Textmodule begrenzt. */
  .ts-body a, .tt-body a, .bk-unten a, .einwaende .antwort a {
    color: var(--blue); text-decoration: underline; text-underline-offset: 2px;
    text-decoration-thickness: 1px; transition: color .2s;
  }
  .ts-body a:hover, .tt-body a:hover, .bk-unten a:hover, .einwaende .antwort a:hover { color: var(--blue-dark); }

  /* Fliesstext aus WYSIWYG-Feldern (dguv_text). Der Container traegt die
     Klasse, die vorher am <p> stand; Schrift und Farbe erben die Absaetze. */
  .dguv-text > * + * { margin-top: 0.75em; }
  .dguv-text p { max-width: inherit; }
  .dguv-text ul, .dguv-text ol { padding-left: 1.25em; }
  .dguv-text li + li { margin-top: 0.35em; }
  .dguv-text li::marker { color: var(--blue); }
  .dguv-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
  .dguv-text a:hover { color: var(--blue); }
  .dguv-text strong { font-weight: 700; color: inherit; }

  /* ---------- Zitat ---------- */
  .zitat { background: var(--bg-soft); }
  .zitat .wrap {
    display: grid; grid-template-columns: 132px 1fr; gap: 36px; align-items: center;
    max-width: 940px;
  }
  .zitat-portrait img {
    width: 132px; height: 132px; border-radius: var(--radius-pill); object-fit: cover;
  }
  .zitat blockquote p {
    font-size: clamp(1.1rem, 2.1vw, 1.4rem); font-weight: 500;
    line-height: 1.45; color: var(--slate); letter-spacing: -0.01em;
    max-width: none;
  }
  .zitat footer { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
  .zitat-name { font-weight: 700; color: var(--slate); font-size: 0.95rem; }
  .zitat-rolle { font-size: 0.85rem; color: var(--muted); }
  @media (max-width: 700px) {
    .zitat .wrap { grid-template-columns: 1fr; gap: 22px; }
  }

  /* ---------- Claim mit Nutzenliste ---------- */
  .claim-block { background: var(--slate); color: var(--text-hell-kr); }
  .claim-block .wrap {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center;
  }
  .claim-bild img { border-radius: var(--radius); width: 100%; height: auto; }
  .claim-aussage {
    font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.15;
    letter-spacing: 0.01em; color: #fff; text-transform: uppercase;
  }
  .claim-aussage span { display: block; color: var(--lede-hell); }
  .claim-block .lede { margin-top: 16px; color: var(--text-hell); font-size: 1.02rem; }
  .claim-punkte { list-style: none; margin-top: 24px; display: grid; gap: 11px; }
  .claim-punkte li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-hell-kr); }
  .claim-punkte i { color: var(--akzent-hell); font-size: 1.2rem; flex-shrink: 0; }
  @media (max-width: 860px) {
    .claim-block .wrap { grid-template-columns: 1fr; gap: 32px; }
  }

  .hero-tag {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    color: #dce7f1; font-size: 0.82rem; font-weight: 600;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .hero-tag i { color: var(--akzent-hell); font-size: 1.05rem; }

  .hero-facts {
    margin-top: 52px; display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .hero-facts .fact {
    padding: 18px 20px; border-radius: var(--radius);
    background: rgba(20,30,40,.5); border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .hero-facts i { color: var(--akzent-hell); font-size: 1.5rem; }
  .hero-facts b { display: block; margin-top: 8px; color: #fff; font-size: 1rem; font-weight: 700; }
  .hero-facts span { display: block; margin-top: 3px; color: #a8b8c6; font-size: 0.85rem; line-height: 1.45; }

  @media (max-width: 860px) {
    /* Geteilt mit dem Digital-Block, deshalb hier und nicht beim Hero. */
    .hero-facts { grid-template-columns: 1fr; margin-top: 36px; }
  }

  /* ---------- Hinweis auf leere Bloecke ----------
     Nur im Editor sichtbar. Ohne ihn steht dort eine leere Flaeche, und
     niemand sieht, ob der Block kaputt ist oder nur auf Inhalt wartet. */
  .dguv-leer {
    padding: 28px 24px;
    border: 1px dashed var(--line);
    background: var(--bg-soft);
    color: var(--muted);
    font-size: 0.92rem;
    text-align: center;
  }