/* ============================================================
   MOBILE PASS — Portmann Prüfservice
   ============================================================

   REGELN (HARD):
   - Diese Datei enthält AUSSCHLIESSLICH Mobile-Änderungen.
   - JEDE Regel MUSS innerhalb @media (max-width: 768px) liegen.
   - KEINE Rule darf Desktop beeinflussen.
   - KEINE Änderungen an css/style.css für Mobile-Anpassungen.
   - KEINE Änderungen an css/bundle.css (wird generiert).
   - Geladen NACH css/bundle.css in index.php (siehe <link>).

   Referenz Desktop-Soll: portmann-hostpoint-2026-05-22-1600-FULL.zip
   ============================================================ */

@media (max-width: 1024px) {

  /* ============================================================
     SEKTION 01 — HERO (Pass 1)
     Christoph-Portrait full-bleed oben, sanfter Fade nach unten in Navy,
     Content sitzt auf dem Fade im unteren Drittel des Viewports.
     ============================================================ */

  /* Hero als full-height Stack mit absolutem Foto-Layer */
  .hero {
    position: relative !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background:
      radial-gradient(140% 80% at 50% 0%, #11315a 0%, #0A2540 60%, #051a2d 100%) !important;
  }

  /* Foto-Layer: füllt oberen Bereich, fadet weich nach unten in Transparenz.
     WICHTIG: style.css definiert ab @media (max-width: 768px) eine konkurrierende
     „Foto-Card"-Variante mit max-width:520px + margin:auto + aspect-ratio:4/3 +
     border-radius. Wir überschreiben hier alle diese Properties explizit, damit
     das Hero edge-to-edge full-bleed bleibt. */
  .hero__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 60vh !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    order: 0 !important;
    isolation: auto !important;
    /* Mobile-optimierte Variante (800px, 48KB statt 76KB).
       Wird via <link rel="preload"> in index.php vorab geladen für besseren LCP. */
    background-image: url('../assets/images/christoph-portrait-mobile.webp');
    /* Hintergrund ist Hochformat 1045×1400. „cover" + „center 35%" zentriert
       Christoph schön im sichtbaren Bereich auf allen Devices:
       - iPhone 5/SE (overflow 88px): zeigt ca. 7%-86% vom Bild → Helm sichtbar
       - iPhone 11–16 (kaum overflow): zeigt fast komplett
       - iPad Mini/Air (overflow 400-500px): zeigt 14%-74% → Christoph zentral
       Lower wäre „zu tief", higher würde Helm oben anschneiden. */
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
  }

  /* Tablet (769–1024): Portrait deckt komplett, ohne blaue Ränder seitlich.
     ACHTUNG: Das Hintergrundbild ist Hochformat 1045×1400. Bei „auto 117%"
     (nur Höhe gesetzt) bleibt die Breite proportional zu schmal für Tablets
     ab ~600px Breite. Daher: cover. Vorher waren die mask-image-Properties
     fälschlich orphan im @media-Block — fix durch Verschachtelung in .hero__bg. */
  @media (min-width: 769px) {
    .hero__bg {
      /* Tablet bekommt das größere Originalbild (1045×1400) zurück,
         da Mobile-Variante (800px) bei iPad Pro unscharf wäre. */
      background-image: url('../assets/images/christoph-portrait.webp') !important;
      background-size: cover !important;
      background-position: center 35% !important;
      /* Sanfter Fade unten — Foto endet weich, Content liegt darunter */
      -webkit-mask-image: linear-gradient(180deg,
        #000 0%,
        #000 80%,
        rgba(0,0,0,0.5) 92%,
        transparent 100%) !important;
      mask-image: linear-gradient(180deg,
        #000 0%,
        #000 80%,
        rgba(0,0,0,0.5) 92%,
        transparent 100%) !important;
    }
  }

  /* Blur-Band über den unteren Bildbereich — fügt eine sanfte Unschärfe
     in die Übergangszone, damit Content lesbarer und Foto weicher endet */
  .hero__bg::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 45% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
    backdrop-filter: blur(8px) saturate(1.05) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 50%, #000 100%);
  }

  /* Bestehende <picture>/<img> im Foto-Layer ausblenden, wir nutzen background-image */
  .hero__bg picture,
  .hero__bg img {
    display: none !important;
  }

  /* Vordergrund-Overlays/Mesh komplett aus auf Mobile */
  .hero__bg-veil,
  .hero__bg-blur,
  .hero__mesh {
    display: none !important;
  }

  /* Hero-Inner: Content beginnt erst im unteren Drittel, über dem Fade */
  .hero__inner {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    /* Content beginnt etwa mittig im Viewport (kurz unter Christophs Arm) */
    padding: 40vh var(--container-px) var(--s-6) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s-3) !important;
    flex: 1 1 auto !important;
  }

  /* Content-Stack zurücksetzen (Desktop nutzt Transform/Grid teilweise) */
  .hero__content {
    width: 100% !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s-3) !important;
  }

  /* Eyebrow-Pille: kompakt, gut lesbar auf dunklem Fade */
  .hero__eyebrow {
    align-self: flex-start !important;
    margin: 0 !important;
  }

  /* Headline: zwei Zeilen, eng line-height — +5% größer */
  .hero__title {
    margin: 0 !important;
    font-size: clamp(1.79rem, 7.35vw, 2.31rem) !important;
    line-height: 1.1 !important;
  }

  /* Subtext */
  .hero__sub {
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Check-Liste kompakt, Kreise grün */
  .hero__checks {
    margin: var(--s-2) 0 0 !important;
    gap: var(--s-3) !important;
  }
  /* Nur die Wrapper-Span ist der Kreis */
  .hero__checks .hero__check-icon {
    background: rgba(34, 197, 94, 0.18) !important;
    border: 1px solid rgba(34, 197, 94, 0.55) !important;
    color: #22C55E !important;
    border-radius: 50% !important;
  }
  /* SVG drin ist transparent, Stroke nutzt currentColor → grün */
  .hero__checks .hero__check-icon svg {
    background: transparent !important;
    border: 0 !important;
    color: #22C55E !important;
    fill: none !important;
    stroke: currentColor !important;
  }

  /* Actions: voller Breite, untereinander */
  .hero__actions {
    flex-direction: column !important;
    gap: var(--s-2) !important;
    margin-top: var(--s-3) !important;
  }
  .hero__actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Signatur: Avatar + Text-Block, als Gruppe horizontal zentriert.
     Reihenfolge bleibt (Avatar links, Text rechts), Text linksbündig. */
  .hero__signature {
    margin-top: var(--s-4) !important;
    padding-top: var(--s-4) !important;
    border-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--s-3) !important;
    text-align: left !important;
  }
  /* Signature-Text: jede Span auf eigene Zeile (Name / Rolle / Städte) */
  .hero__signature-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
  }
  .hero__signature-text strong,
  .hero__signature-text span {
    display: block !important;
  }

  /* ============================================================
     SEKTION 02 — LEISTUNG (Editorial Flow)
     Karten-Chrome raus, Items als offene Liste mit Hairline-Dividern.
     Watermark-Numbers prominent rechts.
     ============================================================ */

  /* SN EN 15635 Block (Feature-Card Media) auf Mobile ausblenden —
     Inhalt der Feature-Card fließt direkt als erstes Editorial-Item */
  .bento__card--feature .bento__card-media {
    display: none !important;
  }

  /* Bento-Container: einfacher vertikaler Stack ohne Grid-Gaps */
  .section--leistung .bento {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin-top: var(--s-8) !important;
  }

  /* Alle Bento-Items als offene Editorial-Blöcke (kein Card-Frame) */
  .section--leistung .bento__card {
    position: relative !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.85rem 0 2rem !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Hairline-Divider zwischen Items — statisch grau, ohne Animation */
  .section--leistung .bento__card {
    position: relative !important;
  }
  .section--leistung .bento__card + .bento__card {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  }

  /* Card-Head: Icon links + Tag-Pille rechts auf einer Linie */
  .section--leistung .bento__card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: var(--s-4) !important;
  }
  .section--leistung .bento__card .card__icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    color: var(--accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .section--leistung .bento__card .card__icon-wrap svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
  }

  /* Tag-Pille mit Nummer + Bereich (z.B. "01 · Sicherheit") */
  .section--leistung .bento__tag {
    background: rgba(37, 99, 235, 0.06) !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important;
    color: var(--accent) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }

  /* Headline */
  .section--leistung .bento__card h3 {
    font-family: var(--font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
    color: var(--text) !important;
    margin: 0 0 var(--s-3) !important;
  }

  /* Body / Lead-Text */
  .section--leistung .bento__card p,
  .section--leistung .bento__card .bento__lead {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: var(--text-soft) !important;
    margin: 0 0 var(--s-4) !important;
  }

  /* Bullet-Check-Liste — kompakt, kein BG */
  .section--leistung .bento__check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s-2) !important;
  }
  .section--leistung .bento__check-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--s-2) !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    color: var(--text) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .section--leistung .bento__check-list li svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    color: var(--accent) !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  /* Watermark — auf Mobil weg, die Nummer steht eh schon in der Tag-Pille */
  .section--leistung .bento__card[data-watermark]::after {
    display: none !important;
  }
  /* Text nutzt volle Breite — Watermark liegt darunter im Hintergrund */
  .section--leistung .bento__card-head,
  .section--leistung .bento__card h3,
  .section--leistung .bento__card p,
  .section--leistung .bento__card .bento__lead,
  .section--leistung .bento__check-list {
    position: relative !important;
    z-index: 1 !important;
    padding-right: 0 !important;
  }

  /* Banner-Card #06 — gleiche Editorial-Struktur wie Items 01-05:
     Icon links + Tag-Pille rechts oben, Headline, Body, Stats, Watermark "06" */
  .section--leistung .bento__card--banner {
    padding: 1.75rem 0 2rem !important;
    display: block !important;
    background: transparent !important;
    text-align: left !important;
    color: var(--text) !important;
  }
  .section--leistung .bento__card--banner * {
    text-align: left !important;
  }
  /* Wrapper für Icon + Tag-Pille auf einer Linie (vor h3/p) */
  .section--leistung .bento__card--banner > .bento__banner-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    color: var(--accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 var(--s-4) !important;
    float: left;
  }
  .section--leistung .bento__card--banner .bento__banner-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  /* Inline span ".bento__num" zur Tag-Pille umbauen (oben rechts):
     - aus DOM-Position rausnehmen → absolute top-right
     - alle Inverse-Styles überschreiben
     - "· Dokumentation" via ::after anhängen */
  .section--leistung .bento__card--banner .bento__num {
    display: inline-flex !important;
    align-items: center !important;
    position: absolute !important;
    top: 1.75rem !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    background: rgba(37, 99, 235, 0.06) !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important;
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-family: var(--font-sans, inherit) !important;
    /* font-size: 0 versteckt den "06"-Textknoten; ::after restored Größe */
    font-size: 0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  /* Pille zeigt nur "Dokumentation" (kein "06") */
  .section--leistung .bento__card--banner .bento__num::after {
    content: 'Dokumentation' !important;
    font-size: 0.85rem !important;
  }
  /* Watermark "06" auf Mobile komplett weg — Section spricht von "Fünf Bereiche" */
  .section--leistung .bento__card--banner::after {
    display: none !important;
    content: none !important;
  }
  /* Content-Wrapper: clear nach dem floated Icon,
     position: static damit Pille relativ zur Banner-Card positioniert */
  .section--leistung .bento__card--banner .bento__banner-content {
    clear: both !important;
    padding-top: var(--s-2) !important;
    position: static !important;
  }
  .section--leistung .bento__card--banner h3 {
    color: var(--text) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(1.45rem, 6vw, 1.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 var(--s-3) !important;
  }
  .section--leistung .bento__card--banner p {
    color: var(--text-soft) !important;
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
    margin: 0 0 var(--s-5) !important;
    padding-right: 0 !important;
  }
  /* Stats (24h / Tagsfertig / 10 J.) auf Mobil weg — Info kommt
     bereits aus dem Hero-Bullet und der Bericht-Sektion */
  .section--leistung .bento__card--banner .bento__banner-stats {
    display: none !important;
  }
  /* Watermark "06" als ::after — über der Trennlinie (über den Stats),
     im Body/Headline-Bereich wie bei den anderen Cards
     WICHTIG: inset: auto überschreibt den Desktop-Default (inset: 0) */
  .section--leistung .bento__card--banner::after {
    content: '06' !important;
    position: absolute !important;
    inset: auto 0 7rem auto !important;
    top: auto !important;
    left: auto !important;
    right: 0 !important;
    bottom: 7rem !important;
    width: auto !important;
    height: auto !important;
    font-family: var(--font-display) !important;
    font-size: 5.5rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
    color: var(--accent) !important;
    opacity: 0.12 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: transparent !important;
    -webkit-text-fill-color: var(--accent) !important;
  }

  /* Body-Wrapper im Feature-Card: kein extra padding/border */
  .section--leistung .bento__card--feature .bento__card-body {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* ============================================================
     SEKTION 03 — AUDIT-REVEAL (Scanner)
     Mobile bekommt die VOLLE Desktop-Animation:
     - Bild full-screen
     - Scanner-Streifen läuft beim Scroll
     - Audit-Zonen erscheinen
     - Hotspots erscheinen
     - Bericht-Karte fadet rein
     ============================================================ */
  /* Section = exakt 100svh (small viewport — bleibt stabil beim Scroll,
     URL-Bar-Collapse triggert keinen resize). KEIN Padding, KEIN Sticky. */
  .audit-reveal {
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100vh !important;
    height: 100svh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #031422 !important;
  }
  .audit-reveal__sticky {
    position: relative !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100vh !important;
    height: 100svh !important;
    width: 100% !important;
    display: block !important;
  }
  .audit-reveal__stage {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #031422 !important;
    overflow: hidden !important;
    /* Stage transform deaktivieren — kein Wackeln/Skalieren beim Scrollen */
    transform: none !important;
  }
  /* Bild füllt Stage komplett.
     object-position: zentriert den Gang horizontal in Bildschirmmitte.
     KEIN transform-scale beim Scroll (kein Größer/Kleiner-Wackeln). */
  .audit-reveal__stage img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 60% center !important;
    transform: none !important;
    filter: saturate(0.85) contrast(1.05) brightness(0.6) !important;
  }

  /* Zone-Linien Mobile:
     ROT (rechts): startet an --x und extendet nach RECHTS (origin left)
     ORANGE/GRÜN (links): endet an --x und extendet nach LINKS (origin right) */
  .audit-reveal .audit-zone--red {
    transform-origin: left center !important;
  }
  .audit-reveal .audit-zone--orange,
  .audit-reveal .audit-zone--green {
    transform-origin: right center !important;
  }
  /* Initial state (vor Animation) — Orange/Grün versetzt nach links */
  .audit-reveal .audit-zone--orange,
  .audit-reveal .audit-zone--green {
    transform: translateX(-100%) rotate(var(--r)) scaleX(0) !important;
  }
  /* Aktiv-States: ROT extendet rechts (translateX 0) */
  .audit-reveal[data-stage="4"] .audit-zone--red {
    transform: rotate(var(--r)) scaleX(1) !important;
  }
  /* Aktiv-States: ORANGE + GRÜN extenden links (translateX -100%) */
  .audit-reveal[data-stage="2"] .audit-zone--green,
  .audit-reveal[data-stage="3"] .audit-zone--orange,
  .audit-reveal[data-stage="3"] .audit-zone--green,
  .audit-reveal[data-stage="4"] .audit-zone--green,
  .audit-reveal[data-stage="4"] .audit-zone--orange {
    transform: translateX(-100%) rotate(var(--r)) scaleX(1) !important;
  }

  .audit-reveal .audit-hotspot--orange {
    --x: 32% !important;
    --y: 32% !important;
  }
  .audit-reveal .audit-zone--orange {
    --x: 32% !important;
    --y: 45% !important;
    --w: 22% !important;
  }

  .audit-reveal .audit-hotspot--red {
    --x: 72% !important;
    --y: 42% !important;
  }
  .audit-reveal .audit-zone--red {
    --x: 72% !important;
    --y: 56% !important;
    --w: 22% !important;
  }

  .audit-reveal .audit-hotspot--green {
    --x: 28% !important;
    --y: 52% !important;
  }
  .audit-reveal .audit-zone--green {
    --x: 32% !important;
    --y: 77% !important;
    --w: 22% !important;
  }

  /* Im Final-Stage (4): ALLE Hotspots voll sichtbar — kein dimmen */
  .audit-reveal[data-stage="4"] .audit-hotspot--green,
  .audit-reveal[data-stage="4"] .audit-hotspot--orange,
  .audit-reveal[data-stage="3"] .audit-hotspot--green {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .audit-reveal[data-stage="4"] .audit-zone--green,
  .audit-reveal[data-stage="4"] .audit-zone--orange,
  .audit-reveal[data-stage="3"] .audit-zone--green {
    opacity: 1 !important;
  }

  /* Hotspot-Box: Inhalt (Punkt + Text) HORIZONTAL ZENTRIERT in der Box */
  .audit-reveal .audit-hotspot {
    min-width: 180px !important;
    width: max-content !important;
    max-width: 240px !important;
    padding: 0.45rem 1.1rem !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 0.85rem !important;
    row-gap: 5px !important;
    white-space: normal !important;
  }
  .audit-reveal .audit-hotspot i {
    position: static !important;
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    align-self: center !important;
    width: 12px !important;
    height: 12px !important;
    box-shadow:
      0 0 0 5px color-mix(in srgb, currentColor 20%, transparent),
      0 0 16px currentColor !important;
  }
  .audit-reveal .audit-hotspot strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .audit-reveal .audit-hotspot small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.8rem !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
    color: rgba(241, 245, 249, 0.85) !important;
    white-space: nowrap !important;
  }
  /* Connector-Linie (::before) — zentriert unter der Box, verbindet zur Zone */
  .audit-reveal .audit-hotspot::before {
    height: 76px !important;
    width: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
    background: linear-gradient(180deg, currentColor 0%, currentColor 70%, transparent 100%) !important;
    opacity: 0.85 !important;
    box-shadow: 0 0 8px currentColor !important;
  }
  /* ROTER und GRÜNER Strahl: senkrecht nach unten wie der orangene.
     Box-Position ist über dem jeweiligen Regal, sodass der Strahl
     direkt auf das Regal zeigt. */
  .audit-reveal .audit-hotspot--red::before,
  .audit-reveal .audit-hotspot--green::before {
    transform: translateX(-50%) !important;
  }

  /* Strahl-Richtung: ORANGE und GRÜN sind links → bright zur LINKEN Seite,
     damit der Strahl ins linke Regal zeigt. ROT bleibt nach rechts gerichtet. */
  .audit-reveal .audit-zone--orange {
    background: linear-gradient(270deg, transparent, #F59E0B, #FFF3C4) !important;
  }
  .audit-reveal .audit-zone--green {
    background: linear-gradient(270deg, transparent, #22C55E, #D9FFE6) !important;
  }

  /* Bottom-Vignette: unteres Drittel des Bilds sanft abdunkeln,
     damit Fokus auf Hotspots / Bericht-Karte liegt */
  .audit-reveal__stage::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 38% !important;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(3, 20, 34, 0.45) 60%,
      rgba(3, 20, 34, 0.82) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Scanner aktivieren (Audit-Zonen bleiben ausgeblendet — User-Wunsch) */
  .audit-reveal__scan {
    display: block !important;
  }

  /* Content-Text (Eyebrow + H2 + Sub) ausblenden — User will nur Bild */
  .audit-reveal__content {
    display: none !important;
  }

  /* Hotspots: Font-Größen (Padding kommt aus der spezifischen Regel oben) */
  .audit-reveal .audit-hotspot {
    font-size: 0.85rem !important;
  }
  .audit-reveal .audit-hotspot strong {
    font-size: 0.85rem !important;
  }
  .audit-reveal .audit-hotspot small {
    font-size: 0.7rem !important;
  }

  /* Bericht-Karte kompakter, weniger dominant — gibt dem Bild mehr Raum */
  .audit-reveal .audit-report-card {
    position: absolute !important;
    width: calc(100% - 2 * var(--container-px)) !important;
    max-width: 320px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(20px) !important;
    bottom: var(--s-10) !important;
    top: auto !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.82rem !important;
    z-index: 6 !important;
  }
  .audit-reveal[data-stage="4"] .audit-report-card {
    transform: translateX(-50%) translateY(0) !important;
  }
  .audit-reveal .audit-report-card__eyebrow {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
    letter-spacing: 0.12em !important;
  }
  .audit-reveal .audit-report-card strong {
    font-size: 0.95rem !important;
    margin-bottom: 0.4rem !important;
  }
  .audit-reveal .audit-report-card ul {
    gap: 0.25rem !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .audit-reveal .audit-report-card li {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .audit-reveal .audit-report-card li b {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* ============================================================
     SEKTION 04 — AMPEL (Bericht-Section: 3 farbige Karten)
     - Karten in Container-Breite (nicht full-bleed)
     - Sticky-Stack beim Scrollen: nachfolgende Karten schieben sich über
     - Tap zeigt Bild prominenter
     ============================================================ */
  /* WICHTIG: section + container müssen overflow: visible haben,
     sonst funktioniert position: sticky nicht. */
  #bericht.section--bericht {
    overflow: visible !important;
  }
  #bericht > .container {
    overflow: visible !important;
  }
  #bericht .ampel {
    display: block !important;
    grid-template-columns: none !important;
    padding-bottom: 25vh !important;
    margin-bottom: var(--s-10) !important;
    overflow: visible !important;
  }
  #bericht .ampel__item {
    position: sticky !important;
    margin: 0 0 var(--s-5) 0 !important;
    width: 100% !important;
    min-height: 320px !important;
    padding: 2rem 1.6rem !important;
    border-radius: var(--r-xl) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow:
      0 28px 56px rgba(15, 23, 42, 0.22),
      0 6px 14px rgba(15, 23, 42, 0.1) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: min-height 360ms ease !important;
    transform: none !important;
  }
  /* Tap → Body-Text UND Headline verschwinden, nur Icon + Tag + Bild bleiben */
  #bericht .ampel__item.is-active p,
  #bericht .ampel__item.is-active h3 {
    opacity: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    transition: opacity 240ms ease, max-height 360ms ease !important;
    overflow: hidden !important;
  }
  #bericht .ampel__item p,
  #bericht .ampel__item h3 {
    transition: opacity 320ms ease, max-height 420ms ease !important;
    max-height: 300px !important;
    overflow: hidden !important;
  }
  /* Active state: Karte behält volle Höhe, Bild dominiert (kein Shrink) */
  /* Sticky-tops gestaffelt — jede Karte ragt ein Stück über die vorherige */
  #bericht .ampel__item:nth-child(1) { top: calc(var(--header-h) + 8px) !important; }
  #bericht .ampel__item:nth-child(2) { top: calc(var(--header-h) + 24px) !important; }
  #bericht .ampel__item:nth-child(3) { top: calc(var(--header-h) + 40px) !important; }

  /* Bild stets sichtbar (vorher 0.08) — aber zurückhaltend */
  #bericht .ampel__bg {
    opacity: 0.18 !important;
    filter: saturate(0.85) blur(0.5px) !important;
    transform: scale(1.02) !important;
  }
  /* Tap/Click → Bild voll sichtbar, scharf, gleiche Größe */
  #bericht .ampel__item.is-active .ampel__bg {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    transition: opacity 480ms ease, filter 480ms ease, transform 480ms ease !important;
  }
  /* Hover-State auf Touch deaktivieren (sonst stuck-hover Effekt) */
  #bericht .ampel__item:hover .ampel__bg {
    opacity: 0.18 !important;
    filter: saturate(0.85) blur(0.5px) !important;
    transform: scale(1.02) !important;
  }
  #bericht .ampel__item.is-active:hover .ampel__bg,
  #bericht .ampel__item.is-active .ampel__bg {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
  }

  /* Bilder-Overlay: dunkle Schicht damit Text immer lesbar */
  #bericht .ampel__item::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
      rgba(15, 23, 42, 0.15) 0%,
      rgba(15, 23, 42, 0.35) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: opacity 480ms ease !important;
  }
  #bericht .ampel__item.is-active::after {
    opacity: 0.5 !important;
  }

  /* Text + Icons über das Bild lifen */
  #bericht .ampel__head,
  #bericht .ampel__item h3,
  #bericht .ampel__item p {
    position: relative !important;
    z-index: 2 !important;
  }
  #bericht .ampel__item h3 {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
    margin-top: var(--s-4) !important;
    margin-bottom: var(--s-3) !important;
  }
  #bericht .ampel__item p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  #bericht .ampel__icon {
    width: 44px !important;
    height: 44px !important;
  }
  #bericht .ampel__icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  #bericht .ampel__tag {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.78rem !important;
  }

  /* ============================================================
     BERICHT-META — "Ihr Bericht. Lückenlos."
     Box-in-Box wirkt auf Mobil nested. Äußere Box-Optik weg,
     innere Elemente (Note + Bullets) bleiben als eigene Karten.
     ============================================================ */
  .bericht-meta {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .bericht-meta::before,
  .bericht-meta::after {
    display: none !important;
  }
  .bericht-meta__head {
    margin-bottom: var(--s-6) !important;
    text-align: center !important;
  }
  .bericht-meta__eyebrow {
    margin-bottom: var(--s-3) !important;
  }
  .bericht-meta h3 {
    font-size: clamp(1.7rem, 7vw, 2.1rem) !important;
    line-height: 1.15 !important;
  }
  .bericht-meta__body {
    gap: var(--s-4) !important;
  }
  .bericht-meta__left {
    gap: var(--s-4) !important;
  }
  .bericht-meta__mockup {
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Note-Banner ("Aufbewahrungspflicht") → flach, ohne dunkle Box.
     Icon links + Text, eine Hairline drüber und drunter. */
  .bericht-meta__note {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: var(--s-3) !important;
    padding: var(--s-5) 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: var(--text) !important;
    overflow: visible !important;
    margin-top: var(--s-2) !important;
  }
  .bericht-meta__note::before {
    display: none !important;
  }
  .bericht-meta__note-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    color: var(--accent) !important;
    border-radius: 10px !important;
  }
  .bericht-meta__note-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .bericht-meta__note-text strong {
    color: var(--text) !important;
    font-size: 1rem !important;
  }
  .bericht-meta__note-text span {
    color: var(--text-soft, rgba(15, 23, 42, 0.65)) !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  /* Bullet-Liste → flach, mit Hairline-Trennern wie in Sektion 2 */
  .bullet-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }
  .bullet-list li {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
    padding: var(--s-4) 0 !important;
    transform: none !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: var(--text-soft) !important;
  }
  .bullet-list li:hover {
    transform: none !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
  }
  .bullet-list__icon {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
  }

  /* ============================================================
     SEKTION 05 — PFLICHT & SCHUTZ
     Mobile-Tweaks für den Ohne/Mit-Compare-Block.
     ============================================================ */
  /* Mobile-Tweaks für Compare-Block (Basis-Styles in style.css) */
  .section--pflicht .pflicht__compare {
    margin-top: var(--s-4) !important;
  }
  .section--pflicht .pflicht__compare-card {
    padding: var(--s-6) var(--s-5) !important;
  }
  .section--pflicht .pflicht__compare-head > div > strong {
    font-size: 1.15rem !important;
  }
  .section--pflicht .pflicht__compare-icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .section--pflicht .pflicht__compare-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  .section--pflicht .pflicht__compare li {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    padding-left: 1.85rem !important;
  }
  .section--pflicht .pflicht__compare li::before {
    width: 1.3rem !important;
    height: 1.3rem !important;
    top: 0.15em !important;
  }
  .section--pflicht .pflicht__compare-card--bad li::before {
    font-size: 0.72rem !important;
  }
  .section--pflicht .pflicht__compare-card--good li::before {
    font-size: 0.72rem !important;
  }


  /* Section-Heads alle einheitlich auf Mobil — 2rem (32px) wie Sektion
     Ablauf/Bericht/Collab/Preise/FAQ */
  .leistung__head h2,
  .pflicht__head-section h2,
  .ablauf__head h2,
  .bericht__head h2,
  .collab__head h2,
  .preise__head h2,
  .faq__head h2 {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
  }

  /* ============================================================
     SEKTION 07 — PREISE
     Inhalt zentriert (Editorial-Look), Trust-Block als
     Hairline-Footer im Card statt eigene Box-in-Box.
     ============================================================ */
  .section--preise .preise__card-left,
  .section--preise .preise__map-head {
    text-align: center !important;
  }
  .section--preise .preise__featured-tag,
  .section--preise .preise__map-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .section--preise .preise__featured-price {
    justify-content: center !important;
  }
  .section--preise .preise__featured-list {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  .section--preise .preise__cta {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .section--preise .preise__trust {
    margin-top: var(--s-5) !important;
    padding: var(--s-4) 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--s-2) !important;
  }
  .section--preise .preise__trust-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
  }
  .section--preise .preise__trust-item + .preise__trust-item::before {
    display: none !important;
  }
  .section--preise .preise__trust-item strong {
    font-size: 0.95rem !important;
  }
  .section--preise .preise__trust-item span {
    font-size: 0.65rem !important;
    letter-spacing: 0.06em !important;
  }

  /* ============================================================
     SEKTION 09 — FAQ (Editorial: keine Karten, nur Hairlines)
     ============================================================ */
  .section--faq .faq {
    column-count: 1 !important;
    column-gap: 0 !important;
  }
  .section--faq .faq__item {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .section--faq .faq__item:last-child {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  }
  .section--faq .faq__item[open] {
    box-shadow: none !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }
  .section--faq .faq__item summary {
    padding: var(--s-5) var(--s-12) var(--s-5) 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
  .section--faq .faq__item summary::after {
    right: 0 !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 1.25rem !important;
  }
  .section--faq .faq__item p {
    padding: 0 var(--s-8) var(--s-5) 0 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  /* Norm-Bar am unteren Hero-Rand:
     - gleicher Hintergrund wie Hero (transparent → Hero-Navy)
     - keine border-top-Linie
     - keine Trennstriche zwischen Items */
  .hero__norms {
    position: relative !important;
    z-index: 1 !important;
    margin-top: auto !important;
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .hero__norms ul,
  .hero__norms li {
    border: 0 !important;
    box-shadow: none !important;
  }
  .hero__norms li + li::before,
  .hero__norms li::before,
  .hero__norms li::after {
    display: none !important;
    content: none !important;
  }

  /* ============================================================
     WHATSAPP-FAB — erst sichtbar nach kurzem Scroll
     Initial unsichtbar + nicht klickbar. is-visible kommt per JS
     ============================================================ */
  .wa-fab {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) scale(0.92) !important;
    pointer-events: none !important;
    transition: opacity 260ms ease,
                transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 260ms !important;
  }
  .wa-fab.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    transition: opacity 260ms ease,
                transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s !important;
  }
  /* is-hidden trumpft is-visible (Hero + Kontakt: kein Floating-FAB) */
  .wa-fab.is-hidden,
  .wa-fab.is-visible.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) scale(0.92) !important;
  }

  /* ============================================================
     HEADER — Frosted-Glass (iOS-Stil) auf Mobile
     Sehr transparent, starker Blur — das Foto schimmert klar
     durch ohne dass die Bar als opaker Streifen wirkt.
     ============================================================ */
  .header {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: background-color 240ms ease,
                backdrop-filter 240ms ease,
                box-shadow 240ms ease,
                border-bottom-color 240ms ease !important;
  }
  /* Nach Scroll: deutlich opaker + stärkerer Blur, damit darunterliegender
     Content sauber abgesetzt ist */
  .header.is-scrolled {
    background: rgba(245, 248, 254, 0.78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
    backdrop-filter: blur(18px) saturate(1.6) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 1px 12px rgba(15, 23, 42, 0.06) !important;
  }
  /* Mobile: nur Logo + Burger, kein Phone- oder CTA-Button in der Bar */
  .header .btn--phone,
  .header .header__actions {
    display: none !important;
  }

  /* ============================================================
     AUDIT-PASS 2026-05-23 — Folge-Verbesserungen aus Senior-Review
     ============================================================ */

  /* Collab-Portrait prominent über Benefits (Christoph = Differenzierer) */
  .collab__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s-8) !important;
  }
  .collab__portrait-card {
    order: -1 !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    aspect-ratio: 4 / 5 !important;
  }
  .collab__portrait-card img {
    border-radius: 24px !important;
  }

  /* Audit-Reveal Mobile-Override entfernt (User-Feedback 2026-05-23):
     Plates haben Scanner-Animation gestört. Zurück zum Original-Verhalten. */

  /* Kontakt-Signature: auf Mobil ausgeblendet — kommt redundant
     im Footer direkt darunter nochmal. */
  .kontakt-cta__signature {
    display: none !important;
  }
}