/* tokens.css */
/* ---------------------------------------------------------------------------
art: kunde-projekt
titel: "Design-Tokens Policenwerkstatt (Richtung Dienstmarke)"
stand: 2026-10-14
schreiber: agent:speedbuild-design-lead
status: entwurf
kunde: Policenwerkstatt
quelle: 04_Design/designrichtung.md, 04_Design/analyse-altseite.md
---------------------------------------------------------------------------
   Einzige Quelle fuer Farben, Schriften, Groessen, Abstaende, Radien, Schatten.
   Praefix --pw-. Kontrastwerte (WCAG 2.1) stehen am Token.
   Schriften selbst gehostet (DSGVO), Dateien unter /assets/fonts/ ablegen:
     Archivo (variabel, wght 100..900, wdth 62..125), OFL
     Source Sans 3 (variabel, wght 200..900), OFL
   Dateinamen unten sind Vorgabe fuer den Bau-Agenten (Download offen).
   Breakpoints: 1024 px (Tablet), 767 px (Mobil). Fluide Werte zwischen 390 und 1440 px.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo/archivo-latin-wdth-wght.woff2") format("woff2-variations"),
       url("../assets/fonts/archivo/archivo-latin-wdth-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo/archivo-latin-ext-wdth-wght.woff2") format("woff2-variations"),
       url("../assets/fonts/archivo/archivo-latin-ext-wdth-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3/source-sans-3-latin-wght.woff2") format("woff2-variations"),
       url("../assets/fonts/source-sans-3/source-sans-3-latin-wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3/source-sans-3-latin-wght-italic.woff2") format("woff2-variations"),
       url("../assets/fonts/source-sans-3/source-sans-3-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ===================== 1. FARBEN (Basis) ===================== */
  --pw-nacht:        #0b1830;  /* Buehne: Hero, Dreiklang, Footer. Weiss 17,68:1 */
  --pw-navy:         #1f2a52;  /* Logo-Navy (gemessen), Hauptfarbe. Weiss 13,90:1, Papier 12,83:1 */
  --pw-navy-hover:   #2a376a;  /* Weiss 11,33:1 */
  --pw-blau:         #1d55a0;  /* Aktion auf hell. Weiss 7,34:1, Papier 6,78:1 */
  --pw-blau-hover:   #174582;  /* Weiss 9,50:1 */
  --pw-signal:       #5cb0f2;  /* Blaulicht: Aktion/Fokus auf dunkel. Nacht 7,53:1, Navy 5,92:1. NIE Text auf Weiss (2,35:1) */
  --pw-signal-hell:  #a9d4f7;  /* Hervorhebung auf dunkel. Nacht 11,32:1 */
  --pw-tinte:        #162038;  /* Fliesstext auf hell. Weiss 16,18:1, Papier 14,95:1 */
  --pw-stahl-dunkel: #566074;  /* Sekundaertext auf hell. Weiss 6,32:1, Papier 5,84:1 */
  --pw-stahl:        #8a93a3;  /* Sekundaertext auf dunkel. Nacht 5,71:1. Auf hell nur Grafik (3,10:1) */
  --pw-silber:       #c9cfd8;  /* WERKSTATT-Silber: Linien, Rahmen, ruhende Verben auf dunkel. Nacht 11,28:1 */
  --pw-nebel:        #e7ebf1;  /* Flaechen, Felder, Kartenrand. Tinte 13,52:1 */
  --pw-papier:       #f4f6f9;  /* helle Sektion mit Wuerfelmuster. Tinte 14,95:1 */
  --pw-weiss:        #ffffff;
  --pw-eis:          #e6f0fa;  /* helle Schutzflaeche Schuetzen. Tinte 14,10:1, Navy 12,13:1 */

  --pw-alarm:        #c0303b;  /* nur Schadenfall und Fehler. Weiss 5,63:1 */
  --pw-erfolg:       #1f7a4d;  /* Weiss 5,32:1 */
  --pw-warnung:      #9a5b00;  /* Weiss 5,43:1 */

  /* ===================== 2. ROLLEN (je Flaeche umschalten, siehe .pw-dunkel) ===================== */
  --pw-bg:           var(--pw-weiss);
  --pw-bg-alt:       var(--pw-papier);
  --pw-fg:           var(--pw-tinte);
  --pw-fg-muted:     var(--pw-stahl-dunkel);
  --pw-heading:      var(--pw-navy);
  --pw-link:         var(--pw-blau);
  --pw-link-hover:   var(--pw-blau-hover);
  --pw-line:         var(--pw-nebel);
  --pw-line-strong:  var(--pw-silber);
  --pw-action-bg:    var(--pw-blau);
  --pw-action-fg:    var(--pw-weiss);
  --pw-action-hover: var(--pw-blau-hover);
  --pw-focus:        var(--pw-blau);
  --pw-focus-width:  3px;
  --pw-focus-offset: 2px;
  --pw-star:         var(--pw-navy);
  /* Sekundaerbutton (Kontur): hell Navy-Kontur (Weiss 13,90:1), dunkel Silber-Kontur mit weisser Schrift (Nacht 17,68:1, Kontur 11,28:1) */
  --pw-btn2-line:    var(--pw-navy);
  --pw-btn2-fg:      var(--pw-navy);
  --pw-btn2-hover-bg: var(--pw-navy);
  --pw-btn2-hover-fg: var(--pw-weiss);

  /* Lichtleiste (aktiver Menuepunkt, Tab, Karten-Hover, Hero-Streifen) */
  --pw-lichtleiste:  linear-gradient(90deg, var(--pw-blau) 0%, var(--pw-signal) 100%);
  --pw-lichtleiste-hoehe: 3px;
  /* Text auf Bild: Navy-Verlauf von unten */
  --pw-scrim: linear-gradient(0deg, rgba(11, 24, 48, 0.92) 0%, rgba(11, 24, 48, 0.55) 45%, rgba(11, 24, 48, 0) 100%);
  /* Seitlicher Scrim fuer Hero (Text links) */
  --pw-scrim-links: linear-gradient(90deg, rgba(11, 24, 48, 0.96) 0%, rgba(11, 24, 48, 0.75) 40%, rgba(11, 24, 48, 0) 75%);

  /* Wuerfelmuster der Broschuere 2016, als SVG-Kachel. Linien Navy 5 %. [Entwurf: am Broschuerenmuster pruefen] */
  --pw-muster-wuerfel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%231f2a52' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M17.32 0L34.64 10V30L17.32 40L0 30V10Z'/%3E%3Cpath d='M17.32 20V40M17.32 20L0 10M17.32 20L34.64 10'/%3E%3Cpath d='M17.32 40V60M0 50L17.32 40M34.64 50L17.32 40M0 50V60M34.64 50V60M0 0V10M34.64 0V10'/%3E%3C/g%3E%3C/svg%3E");

  /* ===================== 3. SCHRIFT ===================== */
  --pw-font-display: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pw-font-text:    "Source Sans 3", "Source Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --pw-fw-regular:  400;
  --pw-fw-medium:   500;
  --pw-fw-semibold: 600;
  --pw-fw-h3:       650;
  --pw-fw-bold:     700;
  --pw-fw-h1:       750;
  --pw-fw-display:  800;

  /* Breite (font-stretch, Archivo) */
  --pw-wdth-display: 118%;   /* Versalien-Momente, Echo der Wortmarke POLICEN */
  --pw-wdth-h1:      104%;   /* klarheit-konzept 2.2: H1 Archivo 750, Breite 104 */
  --pw-wdth-normal:  100%;

  /* Groessen, fluid 390 bis 1440 px */
  --pw-fs-display: clamp(2.5rem, 1.5714rem + 3.8095vw, 5rem);        /* 40 / 80, Archivo 800, Versalien */
  --pw-fs-h1:      clamp(2.125rem, 1.7071rem + 1.7143vw, 3.25rem);   /* 34 / 52 (QA-Schleife 1, Befund 20: Sprung zum Fliesstext 18 px kleiner, 56 war 3,1-fach) */
  --pw-fs-h2:      clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem);     /* 28 / 40 */
  --pw-fs-h3:      clamp(1.3125rem, 1.1964rem + 0.4762vw, 1.625rem); /* 21 / 26 */
  --pw-fs-h4:      clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);   /* 18 / 20 */
  --pw-fs-lead:    clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem); /* 19 / 22 */
  --pw-fs-body:    clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 / 18 */
  --pw-fs-small:   1rem;       /* 16 (QA-Schleife 1, Befund 20: war 15; Sekundaertext in Karten, Infoboxen, Footer ruhiger lesbar) */
  --pw-fs-label:   0.875rem;   /* 14, Archivo 650, normale Schreibung (keine Versal-Labels, Regel A5) */
  --pw-fs-button:  1rem;       /* 16, Archivo 650, gemischte Schreibung */
  --pw-fs-verb:    var(--pw-fs-h4);  /* Versal-Moment Verben/Dreiklang in Fliesszusammenhang */
  --pw-fs-verb-fit: 10.2cqi; /* Obergrenze fuer Versal-Titel in einer Spalte mit container-type (VERTEIDIGEN. = 8,9 em bei Breite 118): passt mit 9 % Luft */
  --pw-fs-titel-fit: 11.5cqi; /* Obergrenze fuer Display-Titel in gemischter Schreibung mit Sternkaestchen davor (USP-Tafel): Unabhaengig. = 6,3 em plus Stern */
  --pw-fs-wort-fit: 7.5cqi; /* Obergrenze fuer Kastentitel mit langen Komposita ohne Fuge (Jahresarbeitsentgelt, 20 Buchstaben = 12 em): Wort passt immer in den Kasten */
  --pw-fs-formel:  clamp(1.75rem, 12cqi, 3rem); /* 28 / 48, an die Spaltenbreite gekoppelt (Container-Einheit): EINZIGARTIG braucht 7,6 em, 12cqi laesst 9 % Luft, Woerter brechen nie (Wunsch 33e) */

  --pw-lh-display: 0.95;
  --pw-lh-h1:      1.05;
  --pw-lh-h2:      1.14;
  --pw-lh-h3:      1.25;
  --pw-lh-h4:      1.35;
  --pw-lh-lead:    1.55;
  --pw-lh-body:    1.65;    /* ruhiger Grauwert (Nuernberger-Ruhe), 18 px -> 29,7 px Zeilenabstand */
  --pw-lh-small:   1.5;
  --pw-lh-label:   1.2;

  --pw-ls-display: 0.01em;    /* breite Versalien brauchen etwas Luft */
  --pw-ls-h1:      -0.015em;
  --pw-ls-h2:      -0.01em;
  --pw-ls-h3:      0;
  --pw-ls-label:   0.01em;    /* Labels in normaler Schreibung */
  --pw-ls-button:  0.01em;    /* Buttons in gemischter Schreibung */
  --pw-ls-verb:    0.06em;    /* nur Versal-Momente (.pw-verb, Wortmarke, Dreiklang) */
  --pw-btn-case:   none;      /* Buttons gemischte Schreibung (Regel A5). Versal nur ueber .pw-verb */

  --pw-measure:       31em;   /* 65 bis 75 Zeichen Source Sans 3 (gemessen 0,43 em je Zeichen) */
  --pw-prose-measure: var(--pw-measure);
  --pw-flow:          1.1em;  /* Abstand zwischen Absaetzen, waechst mit der Schrift */
  --pw-flow-h:        1.6em;  /* Luft vor Zwischenueberschriften im Fliesstext */

  /* ===================== 4. ABSTAENDE UND RASTER (4er-Raster) ===================== */
  --pw-space-4:   4px;
  --pw-space-8:   8px;
  --pw-space-12:  12px;
  --pw-space-16:  16px;
  --pw-space-24:  24px;
  --pw-space-32:  32px;
  --pw-space-48:  48px;
  --pw-space-64:  64px;
  --pw-space-96:  96px;
  --pw-space-128: 128px;

  --pw-content-max: 1200px;
  --pw-text-max:    760px;
  --pw-columns:     12;
  --pw-fuge:        24px;     /* mobil 16 px, siehe Media Query */
  --pw-page-margin: clamp(1.25rem, 0.2286rem + 4.1905vw, 4rem);   /* 20 / 64 */
  --pw-section-y:   clamp(4.5rem, 3.3857rem + 4.5714vw, 7.5rem);  /* 72 / 120, grosszuegiger (Nuernberger-Ruhe) */
  --pw-footer-y:    clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem);     /* 48 / 72, Footer ruhiger als Sektionen */
  --pw-footer-y-mobil: var(--pw-space-32);                         /* mobil kompakt (Ziel Footer < 1 000 px) */
  --pw-touch:       44px;     /* Mindest-Touchziel (WCAG 2.5.5) */
  --pw-touch-l:     48px;     /* Akkordeon-Kopf, Menue-Buttons */
  --pw-footer-link-h: 36px;   /* Footer-Linkzeile Desktop (Maus); mobil und bei grobem Zeiger var(--pw-touch) */
  --pw-head-gap:    clamp(2rem, 1.6286rem + 1.5238vw, 3rem);       /* 32 / 48, Headline zu Inhalt */
  --pw-header-h:    76px;     /* Hauptleiste (klarheit-konzept 1.1), mobil 64 px */
  --pw-header-kompakt: 64px;  /* Hauptleiste beim Scrollen; Sticky-Versatz fuer Ankerleiste */
  --pw-metaleiste-h: 34px;    /* Metaleiste (scrollt weg, mobil ausgeblendet) */
  --pw-crumb-h:     52px;     /* Brotkrumen-Zeile unter dem Kopf */
  --pw-anker-h:     52px;     /* Ankerleiste, Ziele mind. 44 px; mobil 48 px */
  --pw-anker-top:   var(--pw-header-kompakt);  /* sticky ab 1024 px direkt unter der kompakten Hauptleiste */

  /* Seitenraster mit Inhaltsverzeichnis (toc layout karte, alt) */
  --pw-prose-gap-h2: var(--pw-space-48);
  --pw-toc-col:      16rem;
  --pw-toc-gap:      var(--pw-space-64);
  --pw-toc-top:      calc(var(--pw-header-h) + var(--pw-metaleiste-h) + var(--pw-space-32));
  --pw-crumb-sep:    "/";

  /* Seitenkopf, Kacheln, Anker (vorher nur Fallbacks in page_header.css, cards.css, toc.css) */
  --pw-kopf-min-h:           560px;
  --pw-fs-anker:             1rem;
  --pw-kachel-bild-h:        clamp(12rem, 9rem + 9vw, 17rem);
  --pw-kachel-bild-h-gross:  clamp(14rem, 8rem + 14vw, 22rem);

  /* ===================== 5. RADIEN (kantig wie das Schild) ===================== */
  --pw-radius-2:  2px;    /* Tags, Lichtleiste */
  --pw-radius-6:  6px;    /* Buttons, Felder, Icon-Kachel */
  --pw-radius-10: 10px;   /* Karten */
  --pw-radius-16: 16px;   /* Bildflaechen */
  --pw-radius-button: var(--pw-radius-6);
  --pw-radius-field:  var(--pw-radius-6);
  --pw-radius-card:   var(--pw-radius-10);
  --pw-radius-media:  var(--pw-radius-16);
  /* Portraet in Schildform (Annaeherung an den Logo-Umriss, am Vektorlogo pruefen) */
  --pw-shield-clip: polygon(0% 6%, 50% 0%, 100% 6%, 100% 58%, 50% 100%, 0% 58%);
  /* Schildkante: schraege linke Bildkante im geteilten Kopf und in der Collage (klarheit-konzept 2.2) */
  --pw-schildkante: 9%;
  --pw-schildkante-clip: polygon(var(--pw-schildkante) 0, 100% 0, 100% 100%, 0 100%);

  /* ===================== 6. SCHATTEN (navy getoent, nur auf hell) ===================== */
  --pw-shadow-1: 0 1px 2px rgba(31, 42, 82, 0.06), 0 4px 12px rgba(31, 42, 82, 0.06);
  --pw-shadow-2: 0 2px 4px rgba(31, 42, 82, 0.08), 0 12px 32px rgba(31, 42, 82, 0.12);
  --pw-line-dunkel:   rgba(201, 207, 216, 0.16);              /* Silber 16 %: Trennlinien auf Nacht (Grafik, kein Text) */
  --pw-border-dunkel: 1px solid var(--pw-line-dunkel);       /* statt Schatten auf dunklen Flaechen */

  /* ===================== 7. KOMPONENTEN ===================== */
  --pw-button-h:       48px;
  --pw-button-pad-x:   var(--pw-space-24);
  --pw-button-arrow-shift: 4px;
  --pw-field-h:        48px;
  --pw-card-pad:       var(--pw-space-32);   /* mobil 24 px */
  --pw-icon-size:      24px;
  --pw-icon-stroke:    1.75;
  --pw-icon-tile:      48px;
  --pw-star-box:       20px;                 /* Sternmarke, Rand 1,5 px */
  --pw-star-stroke:    1.5px;
  /* Sternform (aus dem Logo), Maske fuer alle Sternkaestchen */
  --pw-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E");
  /* Saeulenzeichen (Sternkaestchen-Varianten) */
  --pw-mark-size:    var(--pw-star-box);
  --pw-mark-size-l:  32px;
  --pw-mark-size-xl: 48px;
  --pw-mark-stroke:  var(--pw-star-stroke);
  --pw-badge-bg:       rgba(11, 24, 48, 0.72);    /* AI-Badge auf Bildern: Nacht, halbtransparent */
  --pw-badge-line:     rgba(201, 207, 216, 0.5);  /* Silber-Rand des Badges, 50 % */
  --pw-fs-badge:       0.6875rem;                 /* 11, Archivo 700 */
  --pw-hero-dauer:     7000ms;                    /* Startseiten-Slider: Standzeit je Folie */
  /* Hero-Cover im Look der Altseite: fast schwarzer Grund, Nachtblau, violette und magentafarbene Lichtschleier, Vignette */
  --pw-hero-grund:     #05070f;                   /* fast schwarz */
  --pw-hero-violett:   rgba(108, 62, 214, 0.38);  /* Lichtschleier violett */
  --pw-hero-magenta:   rgba(206, 46, 168, 0.22);  /* Lichtschleier magenta */
  --pw-hero-blau:      rgba(29, 85, 160, 0.30);   /* Lichtschleier blau (Blaulicht) */
  --pw-hero-vignette:  radial-gradient(ellipse 120% 95% at 62% 48%, rgba(5, 7, 15, 0) 42%, rgba(5, 7, 15, 0.62) 78%, rgba(5, 7, 15, 0.92) 100%);
  --pw-hero-scrim:     linear-gradient(90deg, rgba(5, 7, 15, 0.96) 0%, rgba(5, 7, 15, 0.82) 30%, rgba(11, 24, 48, 0.35) 55%, rgba(11, 24, 48, 0) 72%);

  /* ===================== 7b. SAEULEN (aus css/sections/_tokens-pillars.css uebernommen 14.10.2026) =====================
     Jede Saeule hat einen Akzent INNERHALB der Palette, keine neue Markenfarbe.
       versichern  = Logo-Navy (Siegel: Kontur-Kaestchen, Stern navy)
       schuetzen   = Blau/Eis (Schutzflaeche: Kaestchen blau gefuellt, Stern weiss)
       verteidigen = Nacht + Alarm sparsam (Einsatz: Kaestchen nacht, rote Lichtkante unten) */
  --pw-versichern-accent:       var(--pw-navy);
  --pw-versichern-tint:         var(--pw-nebel);
  --pw-versichern-lichtleiste:  linear-gradient(90deg, var(--pw-navy) 0%, var(--pw-blau) 100%);
  --pw-schuetzen-accent:        var(--pw-blau);
  --pw-schuetzen-tint:          var(--pw-eis);
  --pw-schuetzen-lichtleiste:   linear-gradient(90deg, var(--pw-blau) 0%, var(--pw-signal) 100%);
  --pw-verteidigen-accent:      var(--pw-nacht);
  --pw-verteidigen-tint:        var(--pw-nebel);
  /* Lichtleiste des Wagens: Blau, am Ende kurzes Rotlicht (Alarm nie mehr als 15 % der Leiste) */
  --pw-verteidigen-lichtleiste: linear-gradient(90deg, var(--pw-nacht) 0%, var(--pw-blau) 45%, var(--pw-signal) 85%, var(--pw-alarm) 85%, var(--pw-alarm) 100%);
  /* Aktive Saeule (Standard neutral = Versichern) */
  --pw-pillar-accent:      var(--pw-versichern-accent);
  --pw-pillar-tint:        var(--pw-versichern-tint);
  --pw-pillar-lichtleiste: var(--pw-lichtleiste);

  /* ===================== 8. BEWEGUNG ===================== */
  --pw-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --pw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pw-dur-fast:   160ms;   /* Buttons, Stern fuellen */
  --pw-dur-base:   200ms;   /* Karten-Hover */
  --pw-dur-slow:   240ms;   /* Lichtleiste, Akkordeon */
  --pw-dur-reveal: 400ms;   /* Einblenden beim Scrollen */
  --pw-reveal-shift: 12px;
  --pw-lift:       -2px;

  /* ===================== 9. EBENEN ===================== */
  --pw-z-header:  100;
  --pw-z-overlay: 200;
  --pw-z-modal:   300;
}

/* Dunkle Flaechen (Hero, Dreiklang, Footer): Rollen umschalten */
.pw-dunkel {
  --pw-bg:           var(--pw-nacht);
  --pw-bg-alt:       var(--pw-navy);
  --pw-fg:           var(--pw-weiss);
  --pw-fg-muted:     var(--pw-silber);
  --pw-heading:      var(--pw-weiss);
  --pw-link:         var(--pw-signal);
  --pw-link-hover:   var(--pw-signal-hell);
  --pw-line:         var(--pw-line-dunkel);
  --pw-line-strong:  var(--pw-stahl);
  --pw-action-bg:    var(--pw-signal);
  --pw-action-fg:    var(--pw-nacht);
  --pw-action-hover: var(--pw-signal-hell);
  --pw-focus:        var(--pw-signal);
  --pw-star:         var(--pw-silber);
  --pw-btn2-line:    var(--pw-silber);
  --pw-btn2-fg:      var(--pw-weiss);
  --pw-btn2-hover-bg: var(--pw-navy-hover);   /* Weiss 11,33:1 */
  --pw-btn2-hover-fg: var(--pw-weiss);
}

/* Saeule je Seite: page_header setzt data-pillar, ueber :has() gilt sie fuer die ganze Seite;
   jede Sektion mit eigenem data-pillar ueberschreibt lokal. */
.pw-body:has(.c-page-header[data-pillar="versichern"]), [data-pillar="versichern"] {
  --pw-pillar-accent: var(--pw-versichern-accent); --pw-pillar-tint: var(--pw-versichern-tint); --pw-pillar-lichtleiste: var(--pw-versichern-lichtleiste);
}
.pw-body:has(.c-page-header[data-pillar="schuetzen"]), [data-pillar="schuetzen"] {
  --pw-pillar-accent: var(--pw-schuetzen-accent); --pw-pillar-tint: var(--pw-schuetzen-tint); --pw-pillar-lichtleiste: var(--pw-schuetzen-lichtleiste);
}
.pw-body:has(.c-page-header[data-pillar="verteidigen"]), [data-pillar="verteidigen"] {
  --pw-pillar-accent: var(--pw-verteidigen-accent); --pw-pillar-tint: var(--pw-verteidigen-tint); --pw-pillar-lichtleiste: var(--pw-verteidigen-lichtleiste);
}

/* Papier-Sektion mit Wuerfelmuster */
.pw-papier {
  --pw-bg: var(--pw-papier);
  background-color: var(--pw-papier);
  background-image: var(--pw-muster-wuerfel);
}

@media (max-width: 767px) {
  :root {
    --pw-fuge:     16px;
    --pw-card-pad: var(--pw-space-24);
    --pw-header-h: 64px;
    --pw-anker-h:  48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pw-dur-fast:   0ms;
    --pw-dur-base:   0ms;
    --pw-dur-slow:   0ms;
    --pw-dur-reveal: 0ms;
    --pw-reveal-shift: 0px;
    --pw-lift:       0px;
  }
}

/* base.css */
/* base.css: Reset und Typografie. Nur Tokens aus tokens.css, keine festen Werte.
   Ruhige Grundtypografie (B6, 14.10.2026): Zeilenabstand 1,65, Absatzabstand 1,1 em, Lesemass 31 em fuer
   Fliesstext in .pw-prose und Lead. Ueberschriften bleiben Archivo (Markencharakter), nie versal (Regel A5). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pw-bg);
  color: var(--pw-fg);
  font-family: var(--pw-font-text);
  font-size: var(--pw-fs-body);
  line-height: var(--pw-lh-body);
  font-weight: var(--pw-fw-regular);
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--pw-space-16); color: var(--pw-heading); font-family: var(--pw-font-display); text-transform: none; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
/* Ueberschriften trennen nur an den weichen Trennstellen aus build.mjs (U+00AD, Kompositfugen), nie per Woerterbuch
   (Polish 33e: "Authen-tisch.", "Cy-berrisiken", "Jahresar-beitsentgelt"). Passt ein Wort nicht, wird die Schrift an die Spalte gekoppelt. */
h1 { font-size: var(--pw-fs-h1); line-height: var(--pw-lh-h1); font-weight: var(--pw-fw-h1); font-stretch: var(--pw-wdth-h1); letter-spacing: var(--pw-ls-h1); margin-bottom: var(--pw-space-24); }
h2 { font-size: var(--pw-fs-h2); line-height: var(--pw-lh-h2); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-h2); margin-bottom: var(--pw-space-24); }
h3 { font-size: var(--pw-fs-h3); line-height: var(--pw-lh-h3); font-weight: var(--pw-fw-h3); margin-bottom: var(--pw-space-12); }
h4 { font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); font-weight: var(--pw-fw-h3); margin-bottom: var(--pw-space-8); }
p { margin: 0 0 var(--pw-flow); text-wrap: pretty; }
a { color: var(--pw-link); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--pw-link-hover); }
:focus-visible { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset); }
ul, ol { margin: 0 0 var(--pw-flow); padding-left: 1.25rem; }
/* Listenabstand nur fuer Fliesstext-Listen (QA-Schleife 1, Befund 12): klassenlose Listen und Listen in .pw-prose.
   Komponenten-Listen (Footer, Brotkrumen, Menue, Karten) setzen ihren Abstand selbst, sonst sitzt das erste Element hoeher. */
:where(ul:not([class]), ol:not([class]), .pw-prose ul, .pw-prose ol) > li + li { margin-top: 0.35em; }
strong, b { font-weight: var(--pw-fw-semibold); }
address { font-style: normal; }
figure, blockquote { margin: 0; }
summary { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* layout.css */
/* layout.css: Container, Sektionen, Flaechen, Hilfsklassen.
   Flaechen per Feld "ground": weiss | papier (Wuerfelmuster) | tint | nacht. Nie zwei gleiche Flaechen hintereinander.
   Breakpoints: 1024 und 767. */
.l-container { width: 100%; max-width: calc(var(--pw-content-max) + 2 * var(--pw-page-margin)); margin-inline: auto; padding-inline: var(--pw-page-margin); }
.l-section { padding-block: var(--pw-section-y); }

.is-weiss { background: var(--pw-weiss); color: var(--pw-fg); }
.is-papier { background-color: var(--pw-papier); background-image: var(--pw-muster-wuerfel); color: var(--pw-fg); }
.is-tint { background: var(--pw-nebel); color: var(--pw-fg); }
/* is-nacht spiegelt die Rollen von .pw-dunkel aus tokens.css (Aenderungen dort hier nachziehen) */
.is-nacht {
  --pw-bg: var(--pw-nacht); --pw-bg-alt: var(--pw-navy); --pw-fg: var(--pw-weiss); --pw-fg-muted: var(--pw-silber);
  --pw-heading: var(--pw-weiss); --pw-link: var(--pw-signal); --pw-link-hover: var(--pw-signal-hell);
  --pw-line: var(--pw-line-dunkel); --pw-line-strong: var(--pw-stahl);
  --pw-action-bg: var(--pw-signal); --pw-action-fg: var(--pw-nacht); --pw-action-hover: var(--pw-signal-hell);
  --pw-focus: var(--pw-signal); --pw-star: var(--pw-silber);
  --pw-btn2-line: var(--pw-silber); --pw-btn2-fg: var(--pw-weiss); --pw-btn2-hover-bg: var(--pw-navy-hover); --pw-btn2-hover-fg: var(--pw-weiss);
  background: var(--pw-nacht); color: var(--pw-fg);
}

.l-grid { display: grid; gap: var(--pw-fuge); }
.l-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.l-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.l-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pw-skip { position: absolute; left: var(--pw-space-16); top: -4rem; z-index: var(--pw-z-modal); padding: var(--pw-space-8) var(--pw-space-16); background: var(--pw-nacht); color: var(--pw-weiss); }
.pw-skip:focus { top: var(--pw-space-8); }

/* components.css */
/* components.css: Bausteine nach 04_Design/designrichtung.md. Praefix pw-. Werte nur aus tokens.css.
   Sektionsspezifisches steht in css/sections/<typ>.css (Klassen c-<typ>__element). */

/* Versal-Momente: EINZIGE erlaubte Stelle fuer text-transform: uppercase in der Basis (Regel A5).
   .pw-verb = die drei Verben VERSICHERN. SCHUETZEN. VERTEIDIGEN. (Navigation, Hubs), .pw-dreiklang = Dreiklang-Zeile,
   .pw-wortmarke = Logo-Wortmarke. Footer-Marke steht in der Altseiten-Schreibung "POLICEN Werkstatt" (site.marke), ohne Versal-Umsetzung.
   Alles andere (Buttons, Labels, Legenden) in normaler Schreibung. */
.pw-verb, .pw-dreiklang, .pw-wortmarke {
  font-family: var(--pw-font-display); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-display);
  letter-spacing: var(--pw-ls-verb); text-transform: uppercase;
}
.pw-dreiklang { display: flex; flex-wrap: wrap; gap: var(--pw-space-8) var(--pw-space-24); margin: 0; padding: 0; list-style: none; font-size: var(--pw-fs-verb); line-height: var(--pw-lh-h4); }
.pw-dreiklang > li { margin: 0; }
.pw-dreiklang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pw-heading); text-decoration: none; background: var(--pw-pillar-lichtleiste) left bottom / 0 var(--pw-lichtleiste-hoehe) no-repeat; transition: background-size var(--pw-dur-slow) var(--pw-ease-out); }
.pw-dreiklang a:hover, .pw-dreiklang a:focus-visible, .pw-dreiklang a[aria-current] { background-size: 100% var(--pw-lichtleiste-hoehe); color: var(--pw-heading); }

/* Buttons: Archivo 650, gemischte Schreibung, kantig (Radius 6). Farben ueber Rollen (hell: Blau, dunkel: Signal).
   Gefuellt (.pw-btn) = Primaer, hoechstens einer je Viewport (Regel A7). Kontur: .pw-btn--sekundaer (Header) bzw. --ghost. */
.pw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pw-space-8); min-height: var(--pw-button-h);
  padding: 0 var(--pw-button-pad-x); border: 2px solid var(--pw-action-bg); border-radius: var(--pw-radius-button);
  background: var(--pw-action-bg); color: var(--pw-action-fg); cursor: pointer; text-decoration: none;
  font-family: var(--pw-font-display); font-size: var(--pw-fs-button); font-weight: var(--pw-fw-h3);
  letter-spacing: var(--pw-ls-button); text-transform: var(--pw-btn-case); line-height: 1.15; text-align: center; text-wrap: balance;
  transition: background var(--pw-dur-fast) var(--pw-ease-out), border-color var(--pw-dur-fast) var(--pw-ease-out);
}
.pw-btn::after { content: "\2192"; transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
.pw-btn:hover { background: var(--pw-action-hover); border-color: var(--pw-action-hover); color: var(--pw-action-fg); }
.pw-btn:hover::after { transform: translateX(var(--pw-button-arrow-shift)); }
.pw-btn--ghost { background: transparent; border-color: var(--pw-navy); color: var(--pw-navy); }
.pw-btn--ghost:hover { background: var(--pw-navy); border-color: var(--pw-navy); color: var(--pw-weiss); }
.is-nacht .pw-btn--ghost, .pw-dunkel .pw-btn--ghost { background: transparent; border-color: var(--pw-silber); color: var(--pw-silber); }
.is-nacht .pw-btn--ghost:hover, .pw-dunkel .pw-btn--ghost:hover { background: transparent; border-color: var(--pw-weiss); color: var(--pw-weiss); }
.pw-btn--plain::after { content: none; }
/* Sekundaer (Kontur): Header-Button "Erstgespraech vereinbaren" (klarheit-konzept 1.1). Hell Navy-Kontur, dunkel Silber-Kontur
   mit weisser Schrift; im Header immer die dunkle Fassung. Kein Pfeil, damit er neben dem Kopf-CTA leiser bleibt. */
.pw-btn--sekundaer { background: transparent; border-color: var(--pw-btn2-line); color: var(--pw-btn2-fg); }
.pw-btn--sekundaer::after { content: none; }
.pw-btn--sekundaer:hover { background: var(--pw-btn2-hover-bg); border-color: var(--pw-btn2-hover-bg); color: var(--pw-btn2-hover-fg); }
.pw-header .pw-btn--sekundaer { --pw-btn2-line: var(--pw-silber); --pw-btn2-fg: var(--pw-weiss); --pw-btn2-hover-bg: var(--pw-navy-hover); --pw-btn2-hover-fg: var(--pw-weiss); }
.pw-header .pw-btn--sekundaer:hover { border-color: var(--pw-weiss); }
.pw-actions { display: flex; flex-wrap: wrap; gap: var(--pw-space-16); align-items: center; margin: var(--pw-space-24) 0 0; }

/* Text, Listen (Sternkaestchen als Listenzeichen), Medien */
.pw-prose > :last-child { margin-bottom: 0; }
.pw-prose > :where(p, ul, ol, h2, h3, h4, blockquote) { max-width: var(--pw-measure); }
.pw-prose > :where(h2, h3, h4):not(:first-child) { margin-top: var(--pw-flow-h); }
.pw-prose ul { list-style: none; padding-left: 0; }
.pw-prose ul > li { position: relative; padding-left: calc(var(--pw-star-box) + var(--pw-space-12)); margin-bottom: var(--pw-space-8); }
.pw-prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: var(--pw-star-box); height: var(--pw-star-box); border: var(--pw-star-stroke) solid var(--pw-star); border-radius: var(--pw-radius-2); }
.pw-prose ul > li::after {
  content: ""; position: absolute; left: 0; top: 0.2em; width: var(--pw-star-box); height: var(--pw-star-box); background: var(--pw-star);
  -webkit-mask: var(--pw-star-shape) center / 100% no-repeat; mask: var(--pw-star-shape) center / 100% no-repeat;
}
.pw-lead { font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); max-width: var(--pw-measure); }
.pw-muted { color: var(--pw-fg-muted); }
.pw-head { max-width: var(--pw-text-max); margin-bottom: var(--pw-head-gap); }
.pw-head > :last-child { margin-bottom: 0; }
.pw-media { position: relative; }
.pw-media img { width: 100%; border-radius: var(--pw-radius-media); object-fit: cover; }
/* Bildnachweise werden nie sichtbar gerendert (Vorgabe Alexander 14.10.2026); image_credit bleibt Datenfeld fuer die Bildnachweis-Seite. */
.pw-media figcaption, .pw-credit { display: none; }

/* AI-Badge: klein, oben rechts auf KI-Bildern. Zwei Wege, gleiches Aussehen:
   a) <span class="pw-ai-badge" title="KI-generiertes Bild">AI</span> per Toggle image_ai/image_ki,
   b) <span class="pw-ai-badge" data-credit="{{ image_credit }}"></span>: erscheint nur, wenn der Nachweis "KI" nennt. */
.pw-ai-badge {
  position: absolute; z-index: 2; right: var(--pw-space-12); top: var(--pw-space-12);
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 20px; padding: 0 var(--pw-space-4);
  border: 1px solid var(--pw-badge-line); border-radius: var(--pw-radius-2); background: var(--pw-badge-bg); color: var(--pw-weiss);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-badge); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-button); line-height: 1;
  pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pw-ai-badge[data-credit] { display: none; }
.pw-ai-badge[data-credit*="KI-"], .pw-ai-badge[data-credit*="KI "], .pw-ai-badge[data-credit*="Higgsfield"] { display: inline-flex; }
.pw-ai-badge[data-credit]::before { content: "AI"; content: "AI" / "KI-generiertes Bild"; }

/* Karte: weiss, Rand Nebel, Lichtleiste oben im Hover */
.pw-card {
  position: relative; padding: var(--pw-card-pad); border: 1px solid var(--pw-nebel); border-radius: var(--pw-radius-card);
  background: var(--pw-weiss); color: var(--pw-tinte); box-shadow: var(--pw-shadow-1);
  --pw-fg: var(--pw-tinte); --pw-fg-muted: var(--pw-stahl-dunkel); --pw-heading: var(--pw-navy); --pw-link: var(--pw-blau); --pw-link-hover: var(--pw-blau-hover); --pw-action-bg: var(--pw-blau); --pw-action-fg: var(--pw-weiss); --pw-action-hover: var(--pw-blau-hover); --pw-focus: var(--pw-blau); --pw-star: var(--pw-navy);
  transition: transform var(--pw-dur-base) var(--pw-ease-out), box-shadow var(--pw-dur-base) var(--pw-ease-out);
}
.pw-card h3 { color: var(--pw-navy); }
.pw-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-card) var(--pw-radius-card) 0 0; background: var(--pw-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.pw-card:hover { transform: translateY(var(--pw-lift)); box-shadow: var(--pw-shadow-2); }
.pw-card:hover::before { transform: scaleX(1); }
.pw-card .pw-muted { color: var(--pw-stahl-dunkel); }

/* Lichtleiste fuer aktiven Zustand */
.pw-lichtleiste { content: ""; display: block; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); border-radius: var(--pw-radius-2); }

/* Header, Navigation, Mega-Menue, Bereichsleiste, Brotkrumen: css/nav.css */

/* Footer: dunkel. QA-Schleife 1 (Paket A, 14.10.2026): ruhiger Abschluss wie bei einem grossen Versicherer.
   Desktop: Markenblock (Wortmarke, ein Satz, zwei Bueros als Adressbloecke, Mail) links, drei Linkspalten rechts.
   Mobil (<= 767 px): Bueros zweispaltig, Linkspalten als Akkordeons (details), Rechtslinks zweispaltig. Ziel < 1 000 px.
   Kontrast auf Nacht: Weiss 17,68:1, Silber 11,28:1 (Sekundaertext), Fokus Signal auf Nacht (siehe tokens.css). */
.pw-footer { position: relative; background: var(--pw-nacht); color: var(--pw-weiss); padding-block: var(--pw-footer-y); font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.pw-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); opacity: 0.7; }
.pw-footer a { color: var(--pw-weiss); text-decoration: none; }
.pw-footer a:hover { color: var(--pw-signal-hell); text-decoration: underline; }
.pw-footer ul { margin: 0; padding: 0; list-style: none; }
.pw-footer__grid { display: grid; gap: var(--pw-space-48) var(--pw-space-32); grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); }
.pw-footer__name { margin: 0 0 var(--pw-space-12); font-family: var(--pw-font-display); font-size: var(--pw-fs-h4); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-display); letter-spacing: var(--pw-ls-h3); line-height: var(--pw-lh-label); }
.pw-footer__blurb { max-width: 30em; margin: 0 0 var(--pw-space-24); color: var(--pw-silber); }
.pw-footer__offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-24); margin-bottom: var(--pw-space-4); padding-top: var(--pw-space-24); border-top: var(--pw-border-dunkel); }
.pw-footer__office { display: flex; flex-direction: column; font-style: normal; color: var(--pw-silber); }
.pw-footer__office-ort { margin-bottom: var(--pw-space-4); color: var(--pw-weiss); font-family: var(--pw-font-display); font-weight: var(--pw-fw-h3); }
.pw-footer__tel, .pw-footer__mail a { display: inline-flex; align-items: center; min-height: var(--pw-touch); white-space: nowrap; font-weight: var(--pw-fw-semibold); }
.pw-footer__mail, .pw-footer__hours { margin: 0; color: var(--pw-silber); }
.pw-footer__title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--pw-space-8); color: var(--pw-silber); font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-h3); letter-spacing: var(--pw-ls-label); line-height: var(--pw-lh-label); list-style: none; pointer-events: none; }
.pw-footer__title::-webkit-details-marker { display: none; }
@media (max-width: 1023px) { .pw-footer__title { min-height: 44px; } }  /* Touch-Flaeche auch bei 768 bis 1023 */
.pw-footer__links li, .pw-footer__legal li { margin: 0; }
.pw-footer__links a { display: inline-flex; align-items: center; min-height: var(--pw-footer-link-h); }
.pw-footer__note { max-width: var(--pw-content-max); margin: var(--pw-space-48) 0 0; padding-top: var(--pw-space-24); border-top: var(--pw-border-dunkel); color: var(--pw-silber); font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }
.pw-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--pw-space-8) var(--pw-space-24); align-items: center; justify-content: space-between; margin-top: var(--pw-space-24); padding-top: var(--pw-space-16); border-top: var(--pw-border-dunkel); }
.pw-footer__copy { margin: 0; color: var(--pw-silber); }
.pw-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--pw-space-24); }
.pw-footer__legal a { display: inline-flex; align-items: center; min-height: var(--pw-touch); color: var(--pw-silber); }
.pw-footer :focus-visible { outline-color: var(--pw-signal); }
@media (max-width: 1023px) {
  .pw-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .pw-footer { padding-block: var(--pw-footer-y-mobil); }
  .pw-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pw-footer__brand { margin-bottom: var(--pw-space-16); }
  .pw-footer__blurb { display: none; }  /* mobil nur Marke, Bueros, Mail: Footer < 1 000 px */
  .pw-footer__offices { gap: var(--pw-space-16); padding-top: var(--pw-space-16); margin-bottom: 0; }
  .pw-footer__col { border-top: var(--pw-border-dunkel); }
  .pw-footer__col:last-child { border-bottom: var(--pw-border-dunkel); }
  .pw-footer__title { min-height: var(--pw-touch-l); margin: 0; color: var(--pw-weiss); font-size: var(--pw-fs-body); cursor: pointer; pointer-events: auto; }
  .pw-footer__title::after { content: ""; width: 0.55em; height: 0.55em; margin-right: var(--pw-space-4); border-right: 2px solid var(--pw-silber); border-bottom: 2px solid var(--pw-silber); transform: translateY(-25%) rotate(45deg); transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
  .pw-footer__fold[open] > .pw-footer__title::after { transform: translateY(25%) rotate(-135deg); }
  .pw-footer__links { padding-bottom: var(--pw-space-12); columns: 2; column-gap: var(--pw-space-16); }
  .pw-footer__links li { break-inside: avoid; }
  .pw-footer__note { margin-top: var(--pw-space-16); padding-top: 0; border-top: 0; }
  .pw-footer__bottom { flex-direction: column; align-items: stretch; gap: var(--pw-space-4); margin-top: var(--pw-space-16); font-size: var(--pw-fs-label); }
  .pw-footer__legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--pw-space-16); }
}
@media (max-width: 767px), (pointer: coarse) {
  .pw-footer { --pw-footer-link-h: var(--pw-touch); }
}

/* Mobile Sticky-Leiste: Anruf und Termin. Nur unter 1024 px. Hoehe = Button plus Rand. */
.pw-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--pw-z-header); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--pw-nacht); border-top: var(--pw-border-dunkel); }
.pw-sticky__btn { min-width: 0; text-align: center; overflow-wrap: normal; hyphens: manual; text-wrap: balance; display: flex; align-items: center; justify-content: center; min-height: calc(var(--pw-button-h) + var(--pw-space-8)); padding: var(--pw-space-8); color: var(--pw-weiss); text-decoration: none; font-family: var(--pw-font-display); font-size: var(--pw-fs-button); font-weight: var(--pw-fw-h3); letter-spacing: var(--pw-ls-button); text-transform: var(--pw-btn-case); }
.pw-sticky__btn--date { background: var(--pw-signal); color: var(--pw-nacht); }
.pw-sticky__btn:focus-visible { outline-color: var(--pw-weiss); outline-offset: -4px; }
body.pw-body { padding-bottom: calc(var(--pw-button-h) + var(--pw-space-8)); }
@media (min-width: 1024px) {
  .pw-sticky { display: none; }
  body.pw-body { padding-bottom: 0; }
}


/* Footer-Feinheiten (Lichtleiste, Linkstil, Touch-Ziele) stehen seit QA-Schleife 1 im Footer-Block oben. */
.c-cta-band .pw-btn { text-align: center; }

/* Saeulenzeichen = Sternkaestchen in drei Varianten (aus css/sections/_pillar-mark.css uebernommen 14.10.2026).
   Markup: <span class="pw-mark pw-mark--versichern|schuetzen|verteidigen|stern" aria-hidden="true"></span>
   Groessen: pw-mark--l (32 px), pw-mark--xl (48 px). Auf dunklen Flaechen (is-nacht, pw-dunkel) automatisch hell. */
.pw-mark {
  --mark-line: var(--pw-star); --mark-fill: transparent; --mark-star: var(--pw-star); --mark-edge: transparent;
  position: relative; display: inline-block; flex: none; vertical-align: -0.2em;
  width: var(--pw-mark-size); height: var(--pw-mark-size);
  border: var(--pw-mark-stroke) solid var(--mark-line); border-radius: var(--pw-radius-2);
  background: var(--mark-fill); box-shadow: inset 0 calc(-1 * var(--pw-lichtleiste-hoehe)) 0 var(--mark-edge);
}
.pw-mark::after {
  content: ""; position: absolute; inset: 0; background: var(--mark-star);
  -webkit-mask: var(--pw-star-shape) center / 100% no-repeat; mask: var(--pw-star-shape) center / 100% no-repeat;
}
.pw-mark--l { --pw-mark-size: var(--pw-mark-size-l); --pw-mark-stroke: 2px; }
.pw-mark--xl { --pw-mark-size: var(--pw-mark-size-xl); --pw-mark-stroke: 2px; border-radius: var(--pw-radius-6); }
/* Versichern: das Siegel (Kontur, Stern navy) */
.pw-mark--versichern, .pw-mark--stern { --mark-line: var(--pw-navy); --mark-star: var(--pw-navy); }
/* Schuetzen: die Schutzflaeche (blau gefuellt, Stern weiss) */
.pw-mark--schuetzen { --mark-line: var(--pw-blau); --mark-fill: var(--pw-blau); --mark-star: var(--pw-weiss); }
/* Verteidigen: der Einsatz (nacht gefuellt, Stern weiss, Rotlicht-Kante unten) */
.pw-mark--verteidigen { --mark-line: var(--pw-nacht); --mark-fill: var(--pw-nacht); --mark-star: var(--pw-weiss); --mark-edge: var(--pw-alarm); }
/* Auf dunkel */
.is-nacht .pw-mark--versichern, .pw-dunkel .pw-mark--versichern, .is-nacht .pw-mark--stern, .pw-dunkel .pw-mark--stern { --mark-line: var(--pw-silber); --mark-star: var(--pw-silber); }
.is-nacht .pw-mark--schuetzen, .pw-dunkel .pw-mark--schuetzen { --mark-line: var(--pw-signal); --mark-fill: var(--pw-signal); --mark-star: var(--pw-nacht); }
.is-nacht .pw-mark--verteidigen, .pw-dunkel .pw-mark--verteidigen { --mark-line: var(--pw-silber); --mark-fill: var(--pw-nacht); --mark-star: var(--pw-weiss); }
/* Karten auf dunkel sind hell: dort wieder helle Fassung */
.is-nacht .pw-card .pw-mark--versichern, .is-nacht .pw-card .pw-mark--stern { --mark-line: var(--pw-navy); --mark-star: var(--pw-navy); }

/* nav.css */
/* nav.css: Header, Hauptnavigation, Mega-Menue, Off-Canvas (mobil), Brotkrumen (und die nicht mehr eingebundenen Leisten).
   Markup: partials/header.html, nav.html, breadcrumb.html (subnav.html und subnav-produkte.html liegen nur noch als Dateien).
   Verhalten: js/main.js. Konzept: 04_Design/klarheit-konzept.md Abschnitt 1.
   Werte nur aus tokens.css; navigationseigene Werte stehen unten als --pw-nav-* (eine Stelle zum Nachsteuern).
   Hierarchie: Verben Archivo 800 Versalien (Markenmoment) > Kategorien Archivo 650 > Produkte Source Sans 3 400. */

:root {
  --pw-nav-meta-h:        34px;                      /* Metaleiste inkl. Rand; js/main.js misst und ueberschreibt */
  --pw-nav-bar-h:         76px;                      /* Hauptleiste Desktop; kompakt: --pw-header-kompakt */
  --pw-nav-sticky-h:      110px;                     /* sichtbare Sticky-Hoehe fuer Anker (scroll-padding); js/main.js misst */
  --pw-nav-sub-h:         48px;                      /* Bereichsleiste (nicht mehr eingebunden) */
  --pw-nav-sub-bg:        color-mix(in srgb, var(--pw-navy) 62%, var(--pw-nacht));
  --pw-nav-sub-fs:        0.875rem;
  --pw-nav-sub-stretch:   92%;
  --pw-nav-fw-kategorie:  var(--pw-fw-h3);           /* 650: Kategorien */
  --pw-nav-fw-produkt:    var(--pw-fw-regular);      /* 400: Produkte */
  --pw-nav-mega-title-fs: 1.0625rem;                 /* 17 */
  --pw-nav-mega-link-fs:  0.90625rem;                /* 14,5 */
  --pw-nav-mega-link-lh:  1.4;
  --pw-nav-mega-gap-x:    24px;
  --pw-nav-mega-gap-y:    32px;
  --pw-nav-mega-img-h:    84px;
  --pw-nav-mega-card-w:   270px;
  --pw-nav-sub-img-h:     120px;                     /* kleine Panels: Bild 4:3 */
  --pw-nav-verb-fs-mobil: 1.75rem;                   /* 28 */
  --pw-nav-thumb-w:       56px;                      /* mobil: Zeilenbild 56 x 42 */
  --pw-nav-thumb-h:       42px;
  --pw-nav-mega-line:     color-mix(in srgb, var(--pw-silber) 16%, transparent);
  --pw-nav-hover-bg:      color-mix(in srgb, var(--pw-signal) 10%, transparent);
  --pw-nav-chip-h:        36px;
  --pw-nav-crumb-fs:      0.9375rem;                 /* 15 */
  --pw-nav-crumb-h:       52px;
  --pw-nav-offcanvas-w:   26rem;
  --pw-nav-backdrop:      color-mix(in srgb, var(--pw-nacht) 55%, transparent);
  --pw-nav-fade:          24px;
  --pw-nav-hover-delay:   120ms;                     /* nur Doku; Wert steht in js/main.js */
  /* Farben im Panel (mobil dunkel, ab 1024 px weiss; siehe Desktop-Block) */
  --pw-nv-title:  var(--pw-weiss);
  --pw-nv-text:   var(--pw-silber);
  --pw-nv-link:   var(--pw-signal-hell);
  --pw-nv-line:   var(--pw-nav-mega-line);
}

/* ===================== Header (sticky, nacht) ===================== */
.pw-header {
  --pw-fg: var(--pw-weiss); --pw-fg-muted: var(--pw-silber); --pw-heading: var(--pw-weiss); --pw-link: var(--pw-signal); --pw-link-hover: var(--pw-signal-hell);
  --pw-line: var(--pw-nav-mega-line); --pw-line-strong: var(--pw-stahl); --pw-action-bg: var(--pw-signal); --pw-action-fg: var(--pw-nacht); --pw-action-hover: var(--pw-signal-hell); --pw-focus: var(--pw-signal);
  position: sticky; top: 0; z-index: var(--pw-z-header); background: var(--pw-navy); color: var(--pw-weiss);
}
.pw-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--pw-lichtleiste); opacity: 0.6; pointer-events: none; }
html { scroll-padding-top: var(--pw-nav-sticky-h); }
.pw-header__bar { position: relative; background: var(--pw-navy); }
.pw-header__inner { display: flex; align-items: center; gap: var(--pw-space-8); min-height: var(--pw-header-h); }
.pw-header__brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; min-height: 44px; padding: 0; background: transparent; color: var(--pw-navy); text-decoration: none; }
.pw-header__logo { height: calc(var(--pw-header-h) - 32px); width: auto; }
/* Altes PNG-Logo (navy auf transparent) braucht eine helle Platte auf dem Header */
.pw-header__brand--platte { padding: var(--pw-space-4) var(--pw-space-8); background: var(--pw-weiss); border-radius: var(--pw-radius-6); }
.pw-header__brand--platte .pw-header__logo { height: calc(var(--pw-header-h) - 36px); }

/* Hauptleiste: CTA als Sekundaerbutton (Kontur Silber), Regel A7 */
.pw-header__cta { display: none; white-space: nowrap; }
.pw-header__cta::after { content: "→"; }  /* Pfeil wie im Mockup (sekundaer setzt ihn sonst aus) */

.pw-header__toggle, .pw-header__phone-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--pw-line-strong); border-radius: var(--pw-radius-6); background: transparent; color: var(--pw-weiss); cursor: pointer; }
.pw-header__phone-btn { border-color: transparent; }
.pw-header__phone-btn:hover, .pw-header__phone-btn[aria-expanded="true"] { background: var(--pw-nav-hover-bg); }
.pw-header__phone { position: relative; z-index: 3; }
.pw-header__phone-list { position: absolute; right: 0; top: calc(100% + var(--pw-space-8)); z-index: 3; min-width: 15rem; margin: 0; padding: var(--pw-space-8); list-style: none; background: var(--pw-weiss); border-radius: var(--pw-radius-card); box-shadow: var(--pw-shadow-2); }
.pw-header__phone-list[hidden] { display: none; }
.pw-header__phone-link { display: flex; align-items: center; gap: var(--pw-space-8); min-height: 48px; padding: 0 var(--pw-space-12); border-radius: var(--pw-radius-6); color: var(--pw-navy); text-decoration: none; font-size: var(--pw-fs-small); }
.pw-header__phone-link strong { font-weight: var(--pw-fw-bold); }
.pw-header__phone-link:hover { background: var(--pw-nebel); }
.pw-header__phone-link:focus-visible { outline-color: var(--pw-blau); }
.pw-header__burger, .pw-header__burger::before, .pw-header__burger::after { display: block; width: 20px; height: 2px; background: var(--pw-weiss); content: ""; position: relative; transition: transform var(--pw-dur-base) var(--pw-ease-out), background-color var(--pw-dur-fast) linear; }
.pw-header__burger::before { position: absolute; top: -6px; }
.pw-header__burger::after { position: absolute; top: 6px; }
.pw-header__toggle[aria-expanded="true"] .pw-header__burger { background: transparent; }
.pw-header__toggle[aria-expanded="true"] .pw-header__burger::before { transform: translateY(6px) rotate(45deg); }
.pw-header__toggle[aria-expanded="true"] .pw-header__burger::after { transform: translateY(-6px) rotate(-45deg); }

/* Metaleiste (nur ab 1024 px): Nacht, 34 px */
.pw-meta { display: none; background: var(--pw-nacht); border-bottom: var(--pw-border-dunkel); color: var(--pw-silber); font-size: 0.8125rem; }
.pw-meta__inner { display: flex; justify-content: flex-end; }
.pw-meta__list { display: flex; flex-wrap: wrap; gap: 0 var(--pw-space-24); margin: 0; padding: 0; list-style: none; }
.pw-meta__link { display: inline-flex; align-items: center; min-height: 34px; color: var(--pw-silber); text-decoration: none; white-space: nowrap; }
.pw-meta__link strong { margin-left: 0.3em; color: var(--pw-weiss); font-weight: var(--pw-fw-semibold); }
.pw-meta__link:hover { color: var(--pw-weiss); text-decoration: underline; text-underline-offset: 0.2em; }
.pw-meta__link:focus-visible { outline-color: var(--pw-signal); }

/* Listen der Navigation: kein Abstand aus der globalen Regel li + li (Befund 12, base.css), sonst sitzt das erste Element hoeher (z. B. Mega Schuetzen/Verteidigen 149 vs. 155 px) */
.pw-nav__list > li, .pw-nav__sub > li, .pw-mega__list > li, .pw-nav__phones > li, .pw-nav__utility > li, .pw-meta__list > li, .pw-crumbs__list > li, .pw-header__phone-list > li { margin-top: 0; }

/* ===================== Hauptnavigation: gemeinsame Teile ===================== */
.pw-nav__list, .pw-nav__sub, .pw-mega__list, .pw-nav__phones, .pw-nav__utility { list-style: none; margin: 0; padding: 0; }
.pw-nav__link { display: block; color: var(--pw-weiss); text-decoration: none; white-space: nowrap; font-family: var(--pw-font-display); font-weight: var(--pw-fw-display); font-stretch: 112%; letter-spacing: var(--pw-ls-display); }  /* Versal ueber .pw-verb (Regel A5) */
.pw-nav__link:hover { color: var(--pw-signal-hell); }
.pw-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--pw-radius-6); background: transparent; color: var(--pw-silber); cursor: pointer; }
.pw-nav__toggle:hover { color: var(--pw-weiss); }
.pw-nav__toggle svg { transition: transform var(--pw-dur-base) var(--pw-ease-out); }
.pw-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pw-nav__panel[hidden] { display: none; }

/* Schaden melden: Textlink mit rotem Punkt (Aufgabe, kein Menuepunkt) */
.pw-nav__alarm { display: inline-flex; align-items: center; gap: var(--pw-space-8); min-height: 44px; color: var(--pw-weiss); text-decoration: none; white-space: nowrap; font-family: var(--pw-font-text); font-size: 1rem; font-weight: var(--pw-fw-semibold); }
.pw-nav__alarm::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pw-alarm); }
.pw-nav__alarm:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* Mega: Kategorie = Bild + Name (ein Link), darunter hoechstens 3 Produkte und "Alle n" */
.pw-mega__title { display: block; color: var(--pw-nv-title); text-decoration: none; }
.pw-mega__img { display: block; height: var(--pw-nav-mega-img-h); margin-bottom: var(--pw-space-12); border-radius: var(--pw-radius-6); overflow: hidden; background: var(--pw-nebel); }
.pw-mega__img--leer, .pw-nav__subimg--leer { background: var(--pw-nebel) url("../assets/img/pw-bildmarke.svg") center / auto 46% no-repeat; }  /* Fallback ohne Bild */
.pw-mega__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.pw-mega__title:hover .pw-mega__img img { transform: scale(1.04); }
.pw-mega__name { display: block; font-family: var(--pw-font-display); font-size: var(--pw-nav-mega-title-fs); font-weight: var(--pw-nav-fw-kategorie); line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.pw-mega__title:hover .pw-mega__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pw-mega__title[aria-current="page"] .pw-mega__name, .pw-mega__title.is-active .pw-mega__name { box-shadow: inset 0 calc(-1 * var(--pw-lichtleiste-hoehe)) 0 var(--pw-signal); }
.pw-mega__link { display: block; padding-block: 3px; color: var(--pw-nv-text); text-decoration: none; font-family: var(--pw-font-text); font-size: var(--pw-nav-mega-link-fs); font-weight: var(--pw-nav-fw-produkt); line-height: var(--pw-nav-mega-link-lh); hyphens: auto; overflow-wrap: normal; -webkit-hyphens: auto; }
.pw-mega__link:hover { color: var(--pw-nv-title); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.pw-mega__link[aria-current="page"] { color: var(--pw-nv-title); font-weight: var(--pw-fw-semibold); }
.pw-mega__all { display: inline-flex; align-items: center; gap: var(--pw-space-8); padding-block: 3px; color: var(--pw-nv-link); text-decoration: none; font-family: var(--pw-font-text); font-size: var(--pw-nav-mega-link-fs); font-weight: var(--pw-fw-semibold); }
.pw-mega__all svg { transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
.pw-mega__all:hover svg { transform: translateX(4px); }
.pw-mega__list { margin-top: var(--pw-space-8); }
.pw-mega__desc { margin: var(--pw-space-8) 0 0; font-family: var(--pw-font-text); font-size: var(--pw-nav-mega-link-fs); line-height: var(--pw-nav-mega-link-lh); color: var(--pw-nv-text); }

/* Mega: Randspalte Produktnavigator (Nacht, Streifenwagen) */
.pw-mega__card { display: flex; flex-direction: column; overflow: hidden; background: var(--pw-nacht); border-radius: var(--pw-radius-card); color: var(--pw-weiss); }
.pw-mega__card-media { position: relative; flex: none; height: 150px; }
.pw-mega__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; }
.pw-mega__card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pw-space-12); padding: var(--pw-space-24) var(--pw-space-24) var(--pw-space-24); }
.pw-mega__card-title { margin: 0; font-family: var(--pw-font-display); font-size: 1.25rem; font-weight: var(--pw-fw-bold); line-height: 1.2; color: var(--pw-weiss); }
.pw-mega__card-text { margin: 0; font-family: var(--pw-font-text); font-size: var(--pw-nav-mega-link-fs); line-height: 1.45; color: var(--pw-silber); }
.pw-mega__card-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--pw-space-16); min-height: 48px; padding: 0 var(--pw-space-16) 0 var(--pw-space-24); border-radius: var(--pw-radius-button); background: var(--pw-signal); color: var(--pw-nacht); text-decoration: none; font-family: var(--pw-font-display); font-size: var(--pw-fs-button); font-weight: var(--pw-fw-bold); line-height: 1; transition: background var(--pw-dur-fast) var(--pw-ease-out); }
.pw-mega__card-btn svg { flex: none; transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
.pw-mega__card-btn:hover { background: var(--pw-signal-hell); }
.pw-mega__card-btn:hover svg { transform: translateX(4px); }
.pw-mega__card-link { display: inline-flex; align-items: center; min-height: 36px; color: var(--pw-signal-hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; font-family: var(--pw-font-text); font-size: var(--pw-nav-mega-link-fs); }
.pw-mega__card-link:hover { color: var(--pw-weiss); }

/* Schuetzen/Verteidigen: kleines Panel, drei Eintraege nebeneinander */
.pw-nav__sub { display: grid; align-items: start; gap: var(--pw-space-24); }
.pw-nav__subitem { position: relative; }
.pw-nav__sublink { display: block; color: var(--pw-nv-title); text-decoration: none; }
.pw-nav__subimg { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: var(--pw-space-12); border-radius: var(--pw-radius-6); overflow: hidden; background: var(--pw-nebel); }
.pw-nav__subimg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.pw-nav__sublink:hover .pw-nav__subimg img { transform: scale(1.04); }
.pw-nav__subtitle { display: block; font-family: var(--pw-font-display); font-size: var(--pw-nav-mega-title-fs); font-weight: var(--pw-nav-fw-kategorie); line-height: 1.25; }
.pw-nav__sublink:hover .pw-nav__subtitle { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pw-nav__subtext { display: block; margin-top: var(--pw-space-4); font-family: var(--pw-font-text); font-size: var(--pw-nav-mega-link-fs); line-height: var(--pw-nav-mega-link-lh); color: var(--pw-nv-text); }
.pw-nav__sublink[aria-current="page"] .pw-nav__subtitle { box-shadow: inset 0 calc(-1 * var(--pw-lichtleiste-hoehe)) 0 var(--pw-signal); }
.pw-nav__subitem--alarm { padding-left: var(--pw-space-16); border-left: 4px solid var(--pw-alarm); }
.pw-nav__subphones { display: grid; gap: 2px; margin-top: var(--pw-space-12); }
.pw-nav__subphone { display: inline-flex; gap: 0.3em; color: var(--pw-nv-text); text-decoration: none; font-family: var(--pw-font-text); font-size: var(--pw-nav-mega-link-fs); }
.pw-nav__subphone strong { color: var(--pw-nv-title); font-weight: var(--pw-fw-semibold); }
.pw-nav__subphone:hover { text-decoration: underline; }

.pw-nav__mobile-extra { display: none; }

/* ===================== Mobil (< 1024 px): Off-Canvas, zwei Ebenen ===================== */
@media (max-width: 1023px) {
  .pw-nav {
    position: fixed; z-index: 2; top: var(--pw-nav-top, var(--pw-header-h)); right: 0; bottom: 0; width: min(100%, var(--pw-nav-offcanvas-w));
    overflow-y: auto; overscroll-behavior: contain; padding: var(--pw-space-8) var(--pw-page-margin) var(--pw-space-32);
    background: var(--pw-nacht); border-left: var(--pw-border-dunkel);
    /* clip-path statt translateX: ein verschobenes fixed-Element verbreitert mobil die Seite */
    clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path var(--pw-dur-slow) var(--pw-ease-out), visibility 0s linear var(--pw-dur-slow);
  }
  .pw-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--pw-dur-slow) var(--pw-ease-out), visibility 0s; }
  .pw-nav-backdrop { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; top: var(--pw-nav-top, var(--pw-header-h)); background: var(--pw-nav-backdrop); }
  .pw-nav-backdrop[hidden] { display: none; }
  html.pw-nav-offen { overflow: hidden; }

  /* Ebene 1: die drei Verben gross */
  .pw-nav__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: var(--pw-border-dunkel); }
  .pw-nav__link { flex: 1; padding: var(--pw-space-16) 0; font-size: var(--pw-nav-verb-fs-mobil); }
  .pw-nav__link.is-active { color: var(--pw-signal-hell); }
  .pw-nav__panel { flex-basis: 100%; padding: 0 0 var(--pw-space-16); }
  .pw-mega { padding: 0; }
  .pw-mega__cols, .pw-nav__sub { display: grid; gap: 0; }

  /* Ebene 2: Zeilen mit Bild 56 x 42, Tippen oeffnet die Kategorieseite; keine Produkte */
  .pw-mega__group { border-top: 1px solid var(--pw-nv-line); }
  .pw-mega__list, .pw-mega__all, .pw-mega__desc { display: none; }
  .pw-mega__title, .pw-nav__sublink { display: flex; align-items: center; gap: var(--pw-space-16); min-height: 56px; padding: var(--pw-space-8) 0; }
  .pw-mega__img, .pw-nav__subimg { flex: none; width: var(--pw-nav-thumb-w); height: var(--pw-nav-thumb-h); margin: 0; aspect-ratio: auto; }
  .pw-mega__title.is-active .pw-mega__name { color: var(--pw-signal-hell); box-shadow: none; }
  .pw-nav__subitem { border-top: 1px solid var(--pw-nv-line); }
  .pw-nav__subtitle { font-size: 1.0625rem; }
  .pw-nav__subtext, .pw-nav__subphones { display: none; }
  .pw-nav__subitem--alarm { padding-left: var(--pw-space-16); }
  .pw-mega__card { margin-top: var(--pw-space-16); flex-direction: row; align-items: center; }
  .pw-mega__card-media, .pw-mega__card-text, .pw-mega__card-title { display: none; }
  .pw-mega__card-body { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--pw-space-16); }

  /* Schaden melden unter den Verben: Kante Alarm-Rot */
  .pw-nav__item--action { border-bottom: 0; padding-top: var(--pw-space-16); }
  .pw-nav__alarm { flex: 1; min-height: 56px; padding: 0 var(--pw-space-16); border-left: 4px solid var(--pw-alarm); background: color-mix(in srgb, var(--pw-alarm) 14%, transparent); font-size: 1.0625rem; }
  .pw-nav__alarm::before { display: none; }

  .pw-nav__mobile-extra { display: grid; gap: var(--pw-space-12); padding-top: var(--pw-space-16); }
  .pw-nav__phones { display: grid; gap: var(--pw-space-8); }
  .pw-nav__phone { display: flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 48px; border: 1.5px solid var(--pw-silber); border-radius: var(--pw-radius-button); color: var(--pw-weiss); text-decoration: none; font-size: var(--pw-fs-small); }
  .pw-nav__phone strong { font-weight: var(--pw-fw-bold); }
  .pw-nav__cta { justify-content: center; }
  .pw-nav__utility { display: flex; flex-wrap: wrap; gap: 0 var(--pw-space-24); }
  .pw-nav__utility-link { display: flex; align-items: center; min-height: 44px; color: var(--pw-silber); text-decoration: none; font-size: var(--pw-fs-small); }
  .pw-nav__utility-link:hover { color: var(--pw-weiss); text-decoration: underline; }
}
@media (min-width: 1024px) {
  .pw-header__phone { display: none; }
}

/* ===================== Desktop (ab 1024 px) ===================== */
@media (min-width: 1024px) {
  .pw-header { top: calc(-1 * var(--pw-nav-meta-h)); }   /* Metaleiste scrollt weg, Hauptzeile bleibt */
  .pw-meta { display: block; }
  .pw-header__toggle, .pw-nav-backdrop { display: none; }
  .pw-header__cta { display: inline-flex; }
  .pw-header__inner { min-height: var(--pw-nav-bar-h); gap: var(--pw-space-16); transition: min-height var(--pw-dur-base) var(--pw-ease-out); }
  .pw-header__logo, .pw-header__brand--platte .pw-header__logo { height: 48px; transition: height var(--pw-dur-base) var(--pw-ease-out); }
  .pw-header.is-compact .pw-header__inner { min-height: var(--pw-header-kompakt); }
  .pw-header.is-compact .pw-header__logo, .pw-header.is-compact .pw-header__brand--platte .pw-header__logo { height: 42px; }

  .pw-nav { flex: 1; min-width: 0; display: flex; margin: 0; }
  .pw-nav__list { flex: 1; display: flex; align-items: center; gap: var(--pw-space-8); }
  .pw-nav__item { position: static; display: flex; align-items: center; }
  .pw-nav__item--action { margin-left: auto; }
  .pw-nav__link {
    position: relative; padding: var(--pw-space-12); font-size: clamp(1.0625rem, 0.6rem + 0.6vw, 1.25rem);
    background: var(--pw-lichtleiste) no-repeat; background-size: 0 var(--pw-lichtleiste-hoehe); background-position: var(--pw-space-12) calc(100% - var(--pw-space-4));
    transition: background-size var(--pw-dur-slow) var(--pw-ease-out), color var(--pw-dur-fast) var(--pw-ease-out);
  }
  .pw-nav__link:hover, .pw-nav__item.is-open > .pw-nav__link { background-size: calc(100% - 2 * var(--pw-space-12)) var(--pw-lichtleiste-hoehe); }
  .pw-nav__link.is-active, .pw-nav__link[aria-current="page"] { background-size: calc(100% - 2 * var(--pw-space-12)) var(--pw-lichtleiste-hoehe); color: var(--pw-weiss); }
  .pw-nav__toggle { width: 24px; height: 40px; margin-left: calc(-1 * var(--pw-space-8)); }

  /* Panels: weiss, volle Breite, Inhalt 1200 px */
  .pw-nav__panel {
    --pw-nv-title: var(--pw-navy); --pw-nv-text: var(--pw-stahl-dunkel); --pw-nv-link: var(--pw-blau); --pw-nv-line: var(--pw-nebel); --pw-focus: var(--pw-blau);
    position: absolute; z-index: 1; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--pw-nav-bar-h) - var(--pw-nav-meta-h)); overflow-y: auto; padding: 0;
    background: var(--pw-weiss); color: var(--pw-tinte); border-top: 1px solid var(--pw-nebel); box-shadow: var(--pw-shadow-2);
  }
  .pw-mega { display: grid; grid-template-columns: minmax(0, 1fr) var(--pw-nav-mega-card-w); gap: var(--pw-space-32); padding-block: var(--pw-space-32); }
  .pw-mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pw-nav-mega-gap-y) var(--pw-nav-mega-gap-x); align-content: start; }
  .pw-mega__card { align-self: stretch; }
  .pw-nav__panel--small .l-container { padding-block: var(--pw-space-32); }
  .pw-nav__sub { grid-template-columns: repeat(3, minmax(0, 15rem)); gap: var(--pw-space-32) var(--pw-space-24); }
  .pw-nav__subimg { aspect-ratio: auto; height: var(--pw-nav-sub-img-h); }
  .pw-nav__sublink:focus-visible, .pw-mega__title:focus-visible { outline-offset: 4px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .pw-mega { --pw-nav-mega-card-w: 220px; gap: var(--pw-space-24); }
  .pw-mega__cols { --pw-nav-mega-gap-x: 16px; }
}

/* Hauptleiste passt in jeder Breite von 1024 bis 1920 ohne Ueberlappung, Umbruch oder Abstand unter 24 px
   (geprueft per CDP in 20-px-Schritten). Drei Stufen: Logo, Verben und Textlink schrumpfen per clamp,
   der CTA ist unter 1280 px nur ein Kalender-Icon (Label bleibt fuer Screenreader), ab 1280 px mit Text. */
@media (min-width: 1024px) {
  .pw-header__inner { gap: var(--pw-space-24); }
  .pw-header__brand { margin-right: 0; }
  .pw-header__logo, .pw-header__brand--platte .pw-header__logo { height: clamp(36px, 1.5vw + 21px, 42px); }
  .pw-header.is-compact .pw-header__logo, .pw-header.is-compact .pw-header__brand--platte .pw-header__logo { height: clamp(34px, 1.2vw + 20px, 38px); }
  .pw-nav__list { gap: 0; justify-content: flex-start; }
  .pw-nav__item--action { margin-left: auto; padding-left: var(--pw-space-24); }
  .pw-nav__link { font-size: clamp(0.9375rem, 0.3rem + 0.85vw, 1.075rem); padding-inline: var(--pw-space-8); background-position: var(--pw-space-8) calc(100% - var(--pw-space-4)); }
  .pw-nav__link:hover, .pw-nav__item.is-open > .pw-nav__link, .pw-nav__link.is-active, .pw-nav__link[aria-current="page"] { background-size: calc(100% - 2 * var(--pw-space-8)) var(--pw-lichtleiste-hoehe); }
  .pw-nav__item + .pw-nav__item { margin-left: var(--pw-space-12); }
  .pw-nav__item--action { margin-left: auto; }
  .pw-nav__alarm { font-size: 0.875rem; }
  .pw-header__cta { flex: none; padding-inline: var(--pw-space-16); font-size: 0.875rem; }
  .pw-header__cta-icon { display: none; }
}
@media (min-width: 1280px) {
  .pw-nav__alarm, .pw-header__cta { font-size: 0.9375rem; }
}
@media (min-width: 1024px) and (max-width: 1159px) {
  .pw-header__cta { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .pw-header__cta::after { content: none; }
  .pw-header__cta-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pw-header__cta-icon { display: block; }
}

/* ===================== Horizontale Leisten (Bereichsleiste, Produktleiste): scrollbar mit weicher Kante ===================== */
[data-subnav-scroll] { position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
[data-subnav-scroll]::-webkit-scrollbar { display: none; }
[data-subnav-scroll].has-more-right { mask-image: linear-gradient(90deg, currentColor calc(100% - var(--pw-nav-fade)), transparent); }
[data-subnav-scroll].has-more-left { mask-image: linear-gradient(90deg, transparent, currentColor var(--pw-nav-fade)); }
[data-subnav-scroll].has-more-left.has-more-right { mask-image: linear-gradient(90deg, transparent, currentColor var(--pw-nav-fade), currentColor calc(100% - var(--pw-nav-fade)), transparent); }

/* Bereichsleiste (Kategorien), Teil des Sticky-Headers */
.pw-subnav { background: var(--pw-nav-sub-bg); }
.pw-subnav__inner { min-width: 0; display: flex; align-items: stretch; gap: var(--pw-space-16); }
.pw-subnav__list { flex: 1; min-width: 0; margin: 0 0 0 calc(-1 * var(--pw-space-12)); padding: 0; list-style: none; }
.pw-subnav__list > li { flex: none; }
.pw-subnav__link, .pw-subnav__extra {
  display: flex; align-items: center; gap: var(--pw-space-8); height: var(--pw-nav-sub-h); padding: 0 var(--pw-space-12); white-space: nowrap; text-decoration: none;
  font-family: var(--pw-font-display); font-size: var(--pw-nav-sub-fs); font-weight: var(--pw-nav-fw-kategorie); font-stretch: var(--pw-nav-sub-stretch); color: var(--pw-silber);
}
.pw-subnav__link {
  background: var(--pw-lichtleiste) no-repeat; background-size: 0 var(--pw-lichtleiste-hoehe); background-position: var(--pw-space-12) 100%;
  transition: background-size var(--pw-dur-slow) var(--pw-ease-out), color var(--pw-dur-fast) var(--pw-ease-out);
}
.pw-subnav__link:hover { color: var(--pw-weiss); background-size: calc(100% - 2 * var(--pw-space-12)) var(--pw-lichtleiste-hoehe); }
.pw-subnav__link.is-active, .pw-subnav__link[aria-current] { color: var(--pw-weiss); background-size: calc(100% - 2 * var(--pw-space-12)) var(--pw-lichtleiste-hoehe); }
.pw-subnav__link:focus-visible, .pw-subnav__extra:focus-visible { outline-offset: -3px; }
.pw-subnav__extra { flex: none; margin-right: calc(-1 * var(--pw-space-12)); color: var(--pw-signal-hell); border-left: var(--pw-border-dunkel); }
.pw-subnav__extra:hover, .pw-subnav__extra[aria-current="page"] { color: var(--pw-weiss); }
@media (max-width: 1365px) {
  .pw-subnav__extra span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1023px) {
  .pw-subnav__extra { display: none; }
  .pw-subnav__list { margin-inline: calc(-1 * var(--pw-page-margin)); padding-inline: calc(var(--pw-page-margin) - var(--pw-space-12)); }
}

/* Produktleiste (zweite Ebene), scrollt mit der Seite */
.pw-subnav2 { background: var(--pw-weiss); border-bottom: 1px solid var(--pw-nebel); }
.pw-subnav2__list { gap: var(--pw-space-8); margin: 0; padding: var(--pw-space-12) 0; list-style: none; }
.pw-subnav2__list > li { flex: none; }
.pw-subnav2__link {
  display: inline-flex; align-items: center; height: var(--pw-nav-chip-h); padding: 0 var(--pw-space-12); white-space: nowrap; text-decoration: none;
  font-family: var(--pw-font-text); font-size: var(--pw-fs-small); font-weight: var(--pw-nav-fw-produkt); color: var(--pw-tinte);
  border: 1px solid var(--pw-silber); border-radius: var(--pw-radius-6); background: var(--pw-weiss);
  transition: border-color var(--pw-dur-fast) var(--pw-ease-out), background-color var(--pw-dur-fast) var(--pw-ease-out);
}
.pw-subnav2__link:hover { border-color: var(--pw-navy); color: var(--pw-navy); }
.pw-subnav2__link[aria-current="page"] { background: var(--pw-navy); border-color: var(--pw-navy); color: var(--pw-weiss); font-weight: var(--pw-fw-semibold); }
.pw-subnav2__link:focus-visible { outline-offset: 1px; }
@media (max-width: 1023px) {
  .pw-subnav2__list { margin-inline: calc(-1 * var(--pw-page-margin)); padding-inline: var(--pw-page-margin); }
}

/* ===================== Brotkrumen (unter dem Kopf, eigene Zeile 52 px; eingebunden vom page_header) ===================== */
.pw-crumbs { background: var(--pw-weiss); border-top: 1px solid var(--pw-nebel); }
.pw-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--pw-nav-crumb-h); margin: 0; padding: 0; list-style: none; font-family: var(--pw-font-text); font-size: var(--pw-nav-crumb-fs); line-height: var(--pw-lh-small); color: var(--pw-stahl-dunkel); }
.pw-crumbs__item { display: inline-flex; align-items: center; }
.pw-crumbs__item + .pw-crumbs__item::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 var(--pw-space-12) 0 var(--pw-space-8);
  border-top: 1.5px solid var(--pw-stahl); border-right: 1.5px solid var(--pw-stahl); transform: rotate(45deg);
}
.pw-crumbs__link { display: inline-flex; align-items: center; min-height: 32px; color: var(--pw-stahl-dunkel); text-decoration: none; }
.pw-crumbs__link:hover { color: var(--pw-blau); text-decoration: underline; text-decoration-thickness: 1px; }
.pw-crumbs__current { color: var(--pw-navy); font-weight: var(--pw-fw-semibold); }
@media (max-width: 1023px) {
  .pw-crumbs__list { min-height: 44px; }
  .pw-crumbs__link { min-height: 44px; min-width: 44px; justify-content: center; }  /* Touch-Ziel 44 px */
}

/* Zustaende anderer Bausteine, die von der Navigation abhaengen */
/* Mobil-Leiste erst nach dem Seitenkopf (js/main.js: data-armed, is-visible); ohne JS bleibt sie sichtbar */
.pw-sticky[data-armed] { transition: transform var(--pw-dur-base) var(--pw-ease-out), visibility 0s linear var(--pw-dur-base); }
.pw-sticky[data-armed]:not(.is-visible) { transform: translateY(100%); visibility: hidden; }
.pw-sticky[data-armed].is-visible { visibility: visible; transition: transform var(--pw-dur-base) var(--pw-ease-out), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .pw-sticky[data-armed] { transition: none; } }
html.pw-nav-offen .pw-sticky { display: none; }                 /* Mobil-Leiste verdeckt sonst das Menueende */
body:has(.c-form--focus) [data-subnav], body:has(.c-form--focus) .pw-subnav2 { display: none; }  /* Formular-Fokus wie [data-nav] in form.css */

/* ===================== Nach oben (partials/to-top.html, js/main.js) ===================== */
/* Dezent: 48 px, Nacht mit Silberkante, Schildkante oben links. Die Flaeche (__face) traegt den Clip, der Anker den Fokusring (clip-path wuerde ihn abschneiden).
   Unten rechts; der Anmerkungs-Knopf sitzt unten links (tools/annotate), die Mobil-Leiste ueber die ganze Breite: mobil sitzt der Knopf darueber. */
.pw-totop {
  position: fixed; z-index: var(--pw-z-header); right: var(--pw-space-16); bottom: var(--pw-space-16);
  display: block; width: 48px; height: 48px; color: var(--pw-weiss); text-decoration: none;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--pw-nacht) 35%, transparent));
}
.pw-totop__face {
  display: grid; place-items: center; width: 100%; height: 100%;
  clip-path: var(--pw-schildkante-clip, polygon(9% 0, 100% 0, 100% 100%, 0 100%));
  background: var(--pw-nacht); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-silber) 45%, transparent);
  opacity: 0.88; transition: background-color var(--pw-dur-fast, 150ms) var(--pw-ease-out), color var(--pw-dur-fast, 150ms) var(--pw-ease-out), opacity var(--pw-dur-fast, 150ms) var(--pw-ease-out);
}
.pw-totop:hover .pw-totop__face { opacity: 1; background: var(--pw-navy); color: var(--pw-signal-hell); }
.pw-totop:focus-visible { outline: var(--pw-focus-width, 3px) solid var(--pw-signal); outline-offset: 3px; }
.pw-totop:focus-visible .pw-totop__face { opacity: 1; background: var(--pw-signal); color: var(--pw-nacht); }
.pw-totop[data-armed] { transition: opacity var(--pw-dur-base) var(--pw-ease-out), transform var(--pw-dur-base) var(--pw-ease-out), visibility 0s linear var(--pw-dur-base); }
.pw-totop[data-armed]:not(.is-visible) { opacity: 0; visibility: hidden; transform: translateY(8px); }
.pw-totop[data-armed].is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--pw-dur-base) var(--pw-ease-out), transform var(--pw-dur-base) var(--pw-ease-out), visibility 0s; }
@media (max-width: 1023px) {
  .pw-totop { bottom: calc(var(--pw-sticky-h, 64px) + var(--pw-space-16)); }  /* ueber der Mobil-Leiste (Hoehe misst js/main.js) */
}
@media (prefers-reduced-motion: reduce) { .pw-totop[data-armed], .pw-totop[data-armed].is-visible, .pw-totop__face { transition: none; } .pw-totop[data-armed]:not(.is-visible) { transform: none; } }
html.pw-nav-offen .pw-totop { display: none; }
@media print { .pw-totop { display: none; } }


/* sections/_ai-badge.css */
/* _ai-badge.css: abgeloest am 14.10.2026 (Paket B6, design-lead). Datei bleibt (nichts loeschen), ist aber leer.
   Das AI-Badge .pw-ai-badge steht einzig in css/components.css (oben rechts im Bild-Container; Sektionen setzen nur die Lage).
   Die frueher hier gesetzte Lage unten rechts war wirkungslos (top aus components.css gewann). */

/* sections/_pillar-mark.css */
/* _pillar-mark.css: abgeloest am 14.10.2026 (Paket B6, design-lead). Datei bleibt (nichts loeschen), ist aber leer.
   Das Saeulenzeichen .pw-mark (Sternkaestchen versichern|schuetzen|verteidigen|stern, Groessen --l/--xl)
   steht jetzt am Ende von css/components.css. */

/* sections/_tokens-pillars.css */
/* _tokens-pillars.css: abgeloest am 14.10.2026 (Paket B6, design-lead). Datei bleibt (nichts loeschen), ist aber leer.
   Saeulen-Tokens (--pw-versichern-*, --pw-schuetzen-*, --pw-verteidigen-*, --pw-pillar-*, --pw-eis, --pw-star-shape,
   --pw-mark-*, --pw-prose-measure, --pw-toc-*, --pw-crumb-sep) und die data-pillar-Umschaltung stehen jetzt in
   css/tokens.css (Abschnitt 7b und nach .pw-dunkel). Neue Werte nur dort eintragen. */

/* sections/cards.css */
/* cards: Karten, Varianten raster | liste | verben (Dreiklang als Karten) | formel (Markenformel auf dunkel) | themenwelt (Bildkarten-Mosaik) */
.c-cards__list { list-style: none; margin: 0; padding: 0; }
.c-cards__item { display: flex; flex-direction: column; gap: var(--pw-space-8); }
.c-cards__body { display: flex; flex-direction: column; gap: inherit; flex: 1 1 auto; min-width: 0; }
.c-cards__fallback { display: none; }
.c-cards__item-anchor { color: inherit; text-decoration: none; }
.c-cards__item-anchor::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.c-cards__item--link:has(.c-cards__item-anchor:focus-visible) { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset); }
.c-cards__item-anchor:focus-visible { outline: 0; }
.c-cards__item-title { margin-bottom: 0; }
.c-cards__item-text { margin-bottom: 0; color: var(--pw-fg-muted); }
.c-cards__item-link { margin: auto 0 0; padding-top: var(--pw-space-8); font-weight: var(--pw-fw-semibold); }
.c-cards__item-link a { display: inline-flex; align-items: center; gap: var(--pw-space-8); min-height: 44px; }
.c-cards__media img { aspect-ratio: 16 / 10; }
.c-cards--liste .c-cards__list { display: block; }
.c-cards--liste .c-cards__item { margin-bottom: var(--pw-space-16); }

/* ---------- verben: VERSICHERN. SCHUETZEN. VERTEIDIGEN. ---------- */
.c-cards--verben .pw-head { max-width: 48rem; }
.c-cards--verben .c-cards__intro { font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); }
.c-cards--verben .c-cards__list { counter-reset: verb; }
.c-cards--verben .c-cards__item { counter-increment: verb; gap: var(--pw-space-12); padding-top: calc(var(--pw-card-pad) + 3rem); overflow: hidden; }
.c-cards--verben .c-cards__item::after {
  content: "0" counter(verb); position: absolute; left: var(--pw-card-pad); top: var(--pw-space-24);
  font-family: var(--pw-font-display); font-size: 2.75rem; font-weight: var(--pw-fw-display); font-stretch: 112%; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--pw-silber); pointer-events: none;
}
.c-cards--verben .c-cards__item-title {
  display: flex; align-items: center; gap: var(--pw-space-12);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); font-weight: var(--pw-fw-display); font-stretch: 112%; letter-spacing: var(--pw-ls-display); line-height: 1.05;
}
.c-cards--verben .c-cards__item-title::before {
  content: ""; flex: none; width: var(--pw-star-box); height: var(--pw-star-box);
  border: var(--pw-star-stroke) solid var(--pw-navy); border-radius: var(--pw-radius-2);
  background: linear-gradient(var(--pw-navy), var(--pw-navy)) center / 0 0 no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0.75' y='0.75' width='22.5' height='22.5' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0.75' y='0.75' width='22.5' height='22.5' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
  background-color: var(--pw-navy); border: 0;
}
.c-cards--verben .c-cards__item-text { font-size: var(--pw-fs-body); color: var(--pw-tinte); }
.c-cards--verben .c-cards__item-link a::after { content: "\2192"; transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
.c-cards--verben .c-cards__item:hover .c-cards__item-link a::after { transform: translateX(var(--pw-button-arrow-shift)); }
.c-cards--verben .pw-actions .pw-btn { background: transparent; border-color: var(--pw-navy); color: var(--pw-navy); }
.c-cards--verben .pw-actions .pw-btn:hover { background: var(--pw-navy); color: var(--pw-weiss); }

/* ---------- formel: POLICEN + WERKSTATT = EINZIGARTIG ---------- */
.c-cards--formel .pw-head { margin-bottom: var(--pw-space-48); }
/* Titel als echte H2 statt Label (Wunsch 33e: wirkte wie Eyebrow) */
.c-cards--formel .c-cards__title { margin: 0; color: var(--pw-weiss); font-size: var(--pw-fs-h3); line-height: var(--pw-lh-h3); }
.c-cards--formel .c-cards__list { display: grid; gap: var(--pw-space-64); grid-template-columns: 1fr; }
.c-cards--formel .pw-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--pw-fg); --pw-fg-muted: var(--pw-silber); }
.c-cards--formel .pw-card:hover { transform: none; box-shadow: none; }
.c-cards--formel .c-cards__item { position: relative; gap: var(--pw-space-16); container-type: inline-size; }
.c-cards--formel .c-cards__item-title {
  padding-bottom: var(--pw-space-16); font-size: var(--pw-fs-formel); font-weight: var(--pw-fw-display); font-stretch: 108%; line-height: 0.95; letter-spacing: var(--pw-ls-display);
  white-space: nowrap; overflow-wrap: normal; hyphens: manual;
  background: linear-gradient(var(--pw-line-strong), var(--pw-line-strong)) left bottom / 100% 1px no-repeat;
}
.c-cards--formel .c-cards__item:nth-child(1) .c-cards__item-title { color: var(--pw-weiss); }
.c-cards--formel .c-cards__item:nth-child(2) .c-cards__item-title { color: var(--pw-silber); }
.c-cards--formel .c-cards__item:nth-child(3) .c-cards__item-title { color: var(--pw-signal); background: var(--pw-lichtleiste) left bottom / 100% var(--pw-lichtleiste-hoehe) no-repeat; }
.c-cards--formel .c-cards__item-text { max-width: 24rem; color: var(--pw-silber); }
/* Operatoren + und = (ueberschreibt die Lichtleiste der Karte, die hier nicht gebraucht wird) */
.c-cards--formel .pw-card::before { content: none; }
.c-cards--formel .c-cards__item:nth-child(n+2)::before {
  position: absolute; left: 0; right: auto; top: calc(-1 * var(--pw-space-64)); height: var(--pw-space-64); width: auto;
  display: flex; align-items: center; background: none; border-radius: 0; transform: none; transition: none;
  font-family: var(--pw-font-display); font-size: 2.5rem; font-weight: var(--pw-fw-bold); line-height: 1; color: var(--pw-signal);
}
.c-cards--formel .c-cards__item:nth-child(2)::before { content: "+"; }
.c-cards--formel .c-cards__item:nth-child(3)::before { content: "="; }
@media (min-width: 1024px) {
  .c-cards--formel .c-cards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--pw-space-96); }
  .c-cards--formel .c-cards__item:nth-child(n+2)::before { top: 0; left: calc(-1 * var(--pw-space-48)); height: var(--pw-space-32); transform: translateX(-50%); font-size: 3rem; }
}

/* ---------- Raster: columns steuert die Spaltenzahl wirklich (Layout-Klasse l-grid--N bleibt auto-fit, hier fest) ---------- */
.c-cards__list.l-grid--2, .c-cards__list.l-grid--3, .c-cards__list.l-grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .c-cards__list.l-grid--2, .c-cards__list.l-grid--3, .c-cards__list.l-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .c-cards__list.l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-cards__list.l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* lange Titel: nicht abschneiden; Titel trennen nur an den weichen Trennstellen aus build.mjs (U+00AD), Text an Silben */
.c-cards__item-title, .c-cards__item-text { min-width: 0; overflow: visible; text-overflow: clip; overflow-wrap: break-word; word-break: normal; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
.c-cards__item-title { hyphens: manual; }
.c-cards__item { min-width: 0; }

/* ---------- themenwelt: Bildkarten-Mosaik, ganze Karte ist Link (Konzept 3.1) ----------
   Flex statt Raster: grosse Karten doppelt breit, Reihen fuellen sich ohne Luecken, kein gleichmaessiges Dreier-Raster. */
.c-cards--themenwelt .pw-head { max-width: 46rem; margin-bottom: var(--pw-space-48); }
.c-cards--themenwelt .c-cards__intro { font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); }
.c-cards--themenwelt .c-cards__list { display: flex; flex-wrap: wrap; gap: var(--pw-fuge); counter-reset: kachel; }
.c-cards--themenwelt .c-cards__item { counter-increment: kachel; margin: 0; flex: 1 1 100%; gap: var(--pw-space-8); padding: 0; overflow: hidden; }
.c-cards--themenwelt .pw-card::before { z-index: 3; }
.c-cards--themenwelt .c-cards__media, .c-cards--themenwelt .c-cards__fallback { flex: none; height: var(--pw-kachel-bild-h, clamp(12rem, 9rem + 9vw, 17rem)); margin: 0; overflow: hidden; }
.c-cards--themenwelt .c-cards__media img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; transition: transform var(--pw-dur-reveal) var(--pw-ease-out); }
.c-cards--themenwelt .c-cards__item--link:hover .c-cards__media img { transform: scale(1.04); }
/* ohne Bild (QA-Schleife 1, Befund 4): ruhige helle Flaeche statt Navy-Block. Papier mit Wuerfelmuster, Schildkante unten links,
   kleines Sternkaestchen rechts, laufende Nummer als Konturziffer links. Drei Toene im Wechsel, damit nie zwei gleiche Flaechen
   nebeneinander stehen. Hat keine Karte der Liste ein Bild, schrumpft der Bildbereich auf ein Drittel; neben echten Bildern
   behaelt er deren Hoehe, damit die Titel auf einer Linie bleiben. */
.c-cards--themenwelt .c-cards__fallback {
  --fb-fill: var(--pw-papier); --pw-star: var(--pw-navy);
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pw-space-16);
  padding: var(--pw-space-16) var(--pw-space-24);
  background: var(--pw-muster-wuerfel), var(--fb-fill);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pw-schildkante) 100%, 0 calc(100% - var(--pw-space-12)));
}
.c-cards--themenwelt .c-cards__item:nth-child(3n+2) .c-cards__fallback { --fb-fill: var(--pw-eis); }
.c-cards--themenwelt .c-cards__item:nth-child(3n) .c-cards__fallback { --fb-fill: var(--pw-nebel); }
.c-cards--themenwelt .c-cards__fallback::before {
  content: counter(kachel, decimal-leading-zero);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-h2); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-display); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--pw-stahl); font-variant-numeric: tabular-nums;
}
.c-cards--themenwelt .c-cards__fallback .pw-mark { --pw-mark-size: var(--pw-mark-size-l); opacity: 0.55; transition: transform var(--pw-dur-slow) var(--pw-ease-out), opacity var(--pw-dur-fast) var(--pw-ease-out); }
.c-cards--themenwelt .c-cards__item--link:hover .c-cards__fallback .pw-mark { opacity: 1; transform: rotate(-8deg); }
.c-cards--themenwelt .c-cards__list:not(:has(.c-cards__media)) .c-cards__fallback { height: calc(var(--pw-kachel-bild-h) / 3); min-height: calc(var(--pw-space-64) + var(--pw-space-24)); }
.c-cards--themenwelt .c-cards__body { gap: var(--pw-space-8); padding: var(--pw-space-24) var(--pw-space-24) var(--pw-space-24); }
.c-cards--themenwelt .c-cards__item-title { font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); }
.c-cards--themenwelt .c-cards__item-text { font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.c-cards--themenwelt .c-cards__item--gross .c-cards__item-text { font-size: var(--pw-fs-body); line-height: var(--pw-lh-body); max-width: var(--pw-prose-measure); }
/* Pfeil unten rechts: zeigt, dass die ganze Karte fuehrt */
.c-cards--themenwelt .c-cards__item--link .c-cards__body::after {
  content: "\2192"; align-self: flex-start; margin-top: auto; padding-top: var(--pw-space-8);
  color: var(--pw-blau); font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); line-height: 1;
  transition: transform var(--pw-dur-fast) var(--pw-ease-out);
}
.c-cards--themenwelt .c-cards__item--link:hover .c-cards__body::after { transform: translateX(var(--pw-button-arrow-shift)); }
.c-cards--themenwelt .c-cards__item--link:hover .c-cards__item-title { color: var(--pw-blau); }
.c-cards--themenwelt .c-cards__actions { margin-top: var(--pw-space-48); }
.c-cards--themenwelt .c-cards__actions .pw-btn { background: transparent; border-color: var(--pw-navy); color: var(--pw-navy); }
.c-cards--themenwelt .c-cards__actions .pw-btn:hover { background: var(--pw-navy); color: var(--pw-weiss); }
.c-cards--themenwelt.is-nacht .c-cards__actions .pw-btn { border-color: var(--pw-silber); color: var(--pw-silber); }
.c-cards--themenwelt.is-nacht .c-cards__actions .pw-btn:hover { background: transparent; border-color: var(--pw-weiss); color: var(--pw-weiss); }
@media (min-width: 640px) {
  .c-cards--themenwelt .c-cards__item { flex: 1 1 calc(50% - var(--pw-fuge)); }
  .c-cards--themenwelt .c-cards__item--gross { flex-basis: 100%; }
}
@media (min-width: 1024px) {
  .c-cards--themenwelt .c-cards__item { flex: 1 1 calc(33.333% - var(--pw-fuge)); }
  .c-cards--themenwelt .c-cards__item--gross { flex: 2 1 calc(45% - var(--pw-fuge)); }
  .c-cards--themenwelt .c-cards__item--gross .c-cards__media, .c-cards--themenwelt .c-cards__list:has(.c-cards__media) .c-cards__item--gross .c-cards__fallback { height: var(--pw-kachel-bild-h-gross, clamp(14rem, 8rem + 14vw, 22rem)); }
  .c-cards--themenwelt .c-cards__list:not(:has(.c-cards__media)) .c-cards__item--gross .c-cards__fallback { height: calc(var(--pw-kachel-bild-h-gross) / 3); }
  .c-cards--themenwelt .c-cards__item--gross .c-cards__body { padding: var(--pw-space-32) var(--pw-space-32) var(--pw-space-24); } /* unten wie die kleinen Karten: Pfeile einer Reihe auf einer Linie (Polish 33e) */
  .c-cards--themenwelt .c-cards__item--gross .c-cards__item-title { font-size: var(--pw-fs-h3); line-height: var(--pw-lh-h3); }
}
@media (min-width: 1200px) {
  .c-cards--themenwelt .c-cards__item { flex-basis: calc(22% - var(--pw-fuge)); }
  .c-cards--themenwelt .c-cards__item--gross { flex-basis: calc(45% - var(--pw-fuge)); }
}

/* sections/checklist.css */
/* checklist: Kriterien mit Sternkaestchen. Varianten zweispaltig | liste; ground nacht als dunkler Markenmoment (Produktseite Sektion 4). */
.c-checklist__list { display: grid; gap: 0 var(--pw-space-48); margin: 0; padding: 0; list-style: none; counter-reset: check; }
.c-checklist__item { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pw-space-16); align-items: start; padding-block: var(--pw-space-24); border-top: 1px solid var(--pw-line-strong); }
.c-checklist__item .pw-mark { margin-top: 0.15em; }
.c-checklist__item-title { margin: 0 0 var(--pw-space-4); font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); }
.c-checklist__item-text { margin: 0; color: var(--pw-fg-muted); max-width: var(--pw-prose-measure); }
@media (min-width: 768px) {
  .c-checklist--zweispaltig .c-checklist__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .c-checklist--liste .c-checklist__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--pw-space-64); align-items: start; }
}

/* nacht: der dunkle Markenmoment der Produktseite. Linien zart, Titel weiss, Text Silber, Zeichen hell; Lichtleiste unter der H2 */
.c-checklist.is-nacht .c-checklist__item { border-top-color: var(--pw-line-dunkel); }
.c-checklist.is-nacht .c-checklist__item-title { color: var(--pw-weiss); }
.c-checklist.is-nacht .c-checklist__item-text { color: var(--pw-silber); }
.c-checklist.is-nacht .c-checklist__intro { color: var(--pw-silber); }
.c-checklist.is-nacht .c-checklist__title::after { content: ""; display: block; width: calc(var(--pw-space-48) + var(--pw-space-8)); height: var(--pw-lichtleiste-hoehe); margin-top: var(--pw-space-24); border-radius: var(--pw-radius-2); background: var(--pw-lichtleiste); }
.c-checklist.is-nacht .c-checklist__item .pw-mark--versichern, .c-checklist.is-nacht .c-checklist__item .pw-mark--stern { --mark-line: var(--pw-signal); --mark-star: var(--pw-signal); }
.c-checklist.is-nacht .c-checklist__list { border-bottom: 1px solid var(--pw-line-dunkel); }

/* sections/contact_card.css */
/* contact_card: Ansprechpartner als Kontext-CTA. kompakt = Karte im Lesefluss, gross = Seitenabschluss mit Zeile Weitere Bausteine und Dreiklang. */
.c-contact-card__panel { display: grid; gap: var(--pw-space-24); }
.c-contact-card__title { margin-bottom: var(--pw-space-12); }
.c-contact-card__text { max-width: var(--pw-prose-measure); color: var(--pw-fg-muted); }
.c-contact-card__media img { aspect-ratio: 4 / 3; object-position: 50% 20%; }
.c-contact-card__people { display: grid; gap: var(--pw-space-16); margin: var(--pw-space-24) 0 0; padding: 0; list-style: none; }
.c-contact-card__person { display: grid; gap: var(--pw-space-4); padding-left: var(--pw-space-16); border-left: var(--pw-lichtleiste-hoehe) solid var(--pw-line-strong); }
.c-contact-card__person:first-child { border-image: var(--pw-pillar-lichtleiste) 1; border-image-width: 0 0 0 var(--pw-lichtleiste-hoehe); }
.c-contact-card__name { color: var(--pw-heading); font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); }
.c-contact-card__role { color: var(--pw-fg-muted); font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.c-contact-card__phone { justify-self: start; display: inline-flex; align-items: center; min-height: var(--pw-touch); font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); font-variant-numeric: tabular-nums; }

/* kompakt: weisse Karte mit Rand, Bild links */
.c-contact-card--kompakt .c-contact-card__panel {
  padding: var(--pw-card-pad); border: 1px solid var(--pw-nebel); border-radius: var(--pw-radius-card); background: var(--pw-weiss); box-shadow: var(--pw-shadow-1);
  --pw-fg: var(--pw-tinte); --pw-fg-muted: var(--pw-stahl-dunkel); --pw-heading: var(--pw-navy); --pw-link: var(--pw-blau); --pw-link-hover: var(--pw-blau-hover);
  --pw-action-bg: var(--pw-blau); --pw-action-fg: var(--pw-weiss); --pw-action-hover: var(--pw-blau-hover); --pw-focus: var(--pw-blau); --pw-line-strong: var(--pw-silber);
  color: var(--pw-tinte);
}
.c-contact-card--kompakt .c-contact-card__title { font-size: var(--pw-fs-h3); line-height: var(--pw-lh-h3); }
.c-contact-card--kompakt .c-contact-card__people { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.c-contact-card--kompakt .pw-actions { margin-top: var(--pw-space-24); }
@media (min-width: 768px) {
  .c-contact-card--kompakt .c-contact-card__panel:has(.c-contact-card__media) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--pw-space-32); align-items: center; }
  .c-contact-card--kompakt .c-contact-card__media img { aspect-ratio: 1 / 1; }
}

/* gross: Seitenabschluss, Bild gross links, liegt ueber dem schwebenden Inhaltsverzeichnis */
.c-contact-card--gross { position: relative; z-index: 2; }
@media (min-width: 1024px) {
  .c-contact-card--gross .c-contact-card__panel:has(.c-contact-card__media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pw-space-64); align-items: center; }
  .c-contact-card--gross .c-contact-card__media img { aspect-ratio: 5 / 4; }
}
.c-contact-card__media { position: relative; }
@media (max-width: 767px) {
  .c-contact-card .pw-actions .pw-btn { width: 100%; }
}

/* gross: Makler-Foto mit Schildkante, Titel groesser */
.c-contact-card--gross .c-contact-card__media img { border-radius: 0; clip-path: var(--pw-schildkante-clip); }
.c-contact-card--gross .c-contact-card__title { max-width: 24ch; text-wrap: balance; } /* 24ch statt 18ch: kurze Titel wie "Lieber direkt sprechen?" bleiben einzeilig (Polish 33e) */
.c-contact-card--gross .c-contact-card__actions { margin-top: var(--pw-space-32); }

/* Abschlusszeile: Weitere Bausteine (ersetzt related) und Dreiklang (ersetzt pillar_switch) */
.c-contact-card__more:not(:has(nav)) { display: none; }
.c-contact-card__more {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--pw-space-32) var(--pw-space-64); margin-top: var(--pw-space-64); padding-top: var(--pw-space-32); border-top: 1px solid var(--pw-line-strong);
}
.c-contact-card__more-title { margin: 0 0 var(--pw-space-12); color: var(--pw-fg-muted); font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-semibold); letter-spacing: var(--pw-ls-label); }
.c-contact-card__link-list > li { margin: 0; }
.c-contact-card__link-list { display: flex; flex-wrap: wrap; gap: var(--pw-space-4) var(--pw-space-32); margin: 0; padding: 0; list-style: none; }
.c-contact-card__link {
  display: inline-flex; align-items: center; gap: var(--pw-space-8); min-height: 44px;
  font-family: var(--pw-font-display); font-weight: var(--pw-fw-semibold); text-decoration: none;
}
.c-contact-card__link::after { content: "\2192"; transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
.c-contact-card__link:hover { text-decoration: underline; }
.c-contact-card__link:hover::after { transform: translateX(var(--pw-button-arrow-shift)); }
.c-contact-card__dreiklang .pw-dreiklang { gap: var(--pw-space-4) var(--pw-space-32); }
.c-contact-card__dreiklang .c-contact-card__verb {
  position: relative; display: inline-flex; align-items: center; gap: var(--pw-space-12); min-height: 44px;
  color: var(--pw-fg-muted); text-decoration: none; transition: color var(--pw-dur-fast) var(--pw-ease-out);
}
.c-contact-card__verb .pw-mark { opacity: 0.5; transition: opacity var(--pw-dur-fast) var(--pw-ease-out); }
.c-contact-card__verb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: var(--pw-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.c-contact-card__verb:hover { color: var(--pw-heading); }
.c-contact-card__verb:hover .pw-mark { opacity: 1; }
.c-contact-card__verb:hover::after { transform: scaleX(1); }
[data-saeule="versichern"] .c-contact-card__verb--versichern,
[data-saeule="schuetzen"] .c-contact-card__verb--schuetzen,
[data-saeule="verteidigen"] .c-contact-card__verb--verteidigen { color: var(--pw-heading); }
[data-saeule="versichern"] .c-contact-card__verb--versichern .pw-mark,
[data-saeule="schuetzen"] .c-contact-card__verb--schuetzen .pw-mark,
[data-saeule="verteidigen"] .c-contact-card__verb--verteidigen .pw-mark { opacity: 1; }

/* sections/contact_options.css */
/* contact_options: Varianten raster | liste; data-kind (termin | anfrage | rueckruf | anruf) setzt den Akzentbalken */
.c-contact-options__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-24); }
.c-contact-options__item { display: flex; flex-direction: column; border-top: 4px solid var(--pw-action-bg); }
.c-contact-options__item[data-kind="anruf"] { border-top-color: var(--pw-nacht); }
.c-contact-options__item[data-kind="rueckruf"] { border-top-color: var(--pw-action-hover); }
.c-contact-options__item[data-kind="anfrage"] { border-top-color: var(--pw-fg-muted); }
.c-contact-options__item-title { margin-bottom: var(--pw-space-8); }
.c-contact-options__item-text { color: var(--pw-fg-muted); }
.c-contact-options__item .pw-actions { margin-top: auto; padding-top: var(--pw-space-8); }
@media (min-width: 768px) {
  .c-contact-options--raster .c-contact-options__list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .c-contact-options--liste .c-contact-options__item { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--pw-space-24); }
}
/* Polish 33e: in der Viererreihe (1280) brach "Rueckruf anfordern" um; schmalerer Innenabstand haelt die Beschriftung einzeilig */
.c-contact-options .pw-btn { --pw-button-pad-x: var(--pw-space-16); }

/* sections/cta_band.css */
/* cta_band: Varianten balken | karte | geteilt | schlicht */
.c-cta-band { padding-block: var(--pw-space-48); }
.c-cta-band__panel { display: grid; gap: var(--pw-space-24); align-items: center; }
.c-cta-band__title { margin-bottom: var(--pw-space-8); }
.c-cta-band__text { margin: 0; max-width: 40rem; }

.c-cta-band--balken .c-cta-band__panel { padding: var(--pw-space-48) var(--pw-space-24); border-radius: var(--pw-radius-16); background: var(--pw-nacht); color: var(--pw-weiss); }
.c-cta-band--balken .pw-btn { background: var(--pw-weiss); border-color: var(--pw-weiss); color: var(--pw-nacht); }
.c-cta-band--balken .pw-btn--ghost { background: transparent; color: var(--pw-weiss); }
.c-cta-band--balken :focus-visible { outline-color: var(--pw-weiss); }

.c-cta-band--karte .c-cta-band__panel { padding: var(--pw-space-48) var(--pw-space-24); border: 1px solid var(--pw-line); border-radius: var(--pw-radius-16); background: var(--pw-weiss); color: var(--pw-fg); }

.c-cta-band--schlicht .c-cta-band__panel { justify-items: center; text-align: center; }
.c-cta-band--schlicht .pw-actions { justify-content: center; }

@media (min-width: 1024px) {
  .c-cta-band--balken .c-cta-band__panel,
  .c-cta-band--karte .c-cta-band__panel { padding: var(--pw-space-64) var(--pw-space-64); }
  .c-cta-band--geteilt .c-cta-band__panel:has(.c-cta-band__media) { grid-template-columns: 1.2fr 0.8fr; gap: var(--pw-space-64); }
}

/* geteilt auf dunkler Flaeche: Bild mit Lichtleiste, Text ruhig */
.c-cta-band--geteilt.is-nacht { padding-block: var(--pw-section-y); }
.c-cta-band--geteilt .c-cta-band__title { font-size: var(--pw-fs-h2); }
.c-cta-band--geteilt .c-cta-band__text { font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); color: var(--pw-fg-muted); }
.c-cta-band--geteilt .c-cta-band__media { position: relative; }
.c-cta-band--geteilt .c-cta-band__media img { aspect-ratio: 4 / 3; }
.c-cta-band--geteilt .c-cta-band__media::before { content: ""; position: absolute; left: var(--pw-space-24); right: var(--pw-space-24); top: 0; z-index: 1; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); border-radius: var(--pw-radius-2); }
.c-cta-band--balken .c-cta-band__panel { position: relative; overflow: hidden; }
.c-cta-band--balken .c-cta-band__panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); }
.c-cta-band--balken .c-cta-band__text { color: var(--pw-silber); }
.c-cta-band--balken .c-cta-band__title { color: var(--pw-weiss); }
@media (min-width: 1024px) {
  .c-cta-band--geteilt .c-cta-band__panel:has(.c-cta-band__media) { grid-template-columns: 1fr 1fr; }
  .c-cta-band--geteilt .c-cta-band__media { order: -1; }
}

/* sections/facts.css */
/* facts: Merksaetze mit Sternkaestchen. Grosse Archivo-Saetze, getrennt durch feine Linien, auf dunkel ein Markenmoment. */
.c-facts__list { display: grid; gap: var(--pw-space-32); margin: 0; padding: 0; list-style: none; }
.c-facts__item { display: grid; align-content: start; gap: var(--pw-space-16); padding-top: var(--pw-space-24); border-top: 1px solid var(--pw-line-strong); }
.c-facts__item-title { margin: 0; max-width: 18ch; font-size: var(--pw-fs-h3); font-weight: var(--pw-fw-bold); font-stretch: var(--pw-wdth-h1); line-height: var(--pw-lh-h3); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; min-width: 0; }
/* lange Komposita (z. B. Versicherungskaufmann) trennen an den weichen Trennstellen aus build.mjs, nie hart */
.c-facts__item-text { margin: 0; color: var(--pw-fg-muted); max-width: 30em; }
/* Lichtleiste auf der Linie des ersten Merksatzes: der Einstieg */
.c-facts__item:first-child { border-image: var(--pw-pillar-lichtleiste) 1; border-image-width: 3px 0 0 0; }
.is-nacht .c-facts__item:first-child { border-image: var(--pw-lichtleiste) 1; }
@media (min-width: 768px) {
  .c-facts--3 .c-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-facts--2 .c-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-facts__list { gap: var(--pw-space-48) var(--pw-space-32); }
}

/* sections/faq.css */
/* faq: native details/summary, Varianten einspaltig | zweispaltig */
.c-faq__list { max-width: 50rem; }
.c-faq__item { border-bottom: 1px solid var(--pw-line); }
.c-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-16); min-height: 44px; padding: var(--pw-space-16) 0; font-weight: 600; list-style: none; }
.c-faq__q::-webkit-details-marker { display: none; }
.c-faq__q::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; }
.c-faq__item[open] > .c-faq__q::after { content: "\2212"; }
.c-faq__a { padding-bottom: var(--pw-space-16); color: var(--pw-fg-muted); }
@media (min-width: 1024px) {
  .c-faq--zweispaltig .c-faq__inner { display: grid; grid-template-columns: 1fr 2fr; gap: var(--pw-space-64); align-items: start; }
  .c-faq--zweispaltig .c-faq__list { max-width: none; }
}

/* sections/form.css */
/* form.css: gemeinsame Formularbausteine fuer sections/form_*.html und form_danke.html (Klassen c-form__*, c-form-done__*).
   Werte nur aus tokens.css. Touch-Ziele mindestens 44 px. Ohne JS (.is-js fehlt) stehen alle Schritte untereinander.
   Alarm-Rot (--pw-alarm) nur in .c-form--alarm (Schadenmeldung) und bei Fehlermeldungen.
   Polish 14.10.2026 (Wunsch 33d): ruhiger, kompakter Satz wie bei grossen Versicherern. Feinlinien statt 2-px-Rahmen,
   Fokus als blauer Ring, Feldpaare (.c-form__row), Datenschutz-Abschluss (.c-form__final). Im Modal verdichtet modal.css weiter. */

/* Reduziertes Layout auf Formularseiten (Konzept 3.6; nur im <main>, nicht im Modal js/modal-forms.js): keine Hauptnavigation, keine Sticky-Leiste, Telefon bleibt */
body:has(main .c-form--focus) [data-nav],
body:has(main .c-form--focus) [data-nav-toggle],
body:has(main .c-form--focus) .pw-header__cta,
body:has(main .c-form--focus) .pw-sticky { display: none; }

.c-form__grid { display: grid; gap: var(--pw-space-48); align-items: start; }
.c-form__title { margin-bottom: var(--pw-space-8); }
.c-form__intro { max-width: var(--pw-measure); margin-bottom: var(--pw-space-24); }
.c-form__main { min-width: 0; }

/* Formular-Karte */
.c-form__form {
  padding: var(--pw-card-pad); background: var(--pw-weiss); border: 1px solid var(--pw-line-strong);
  border-top: 4px solid var(--pw-action-bg); border-radius: var(--pw-radius-card);
}
.is-papier .c-form__form { box-shadow: var(--pw-shadow-1); }

/* Fortschritt */
.c-form__progress { display: none; list-style: none; margin: 0 0 var(--pw-space-8); padding: 0; gap: var(--pw-space-8); counter-reset: none; }
.c-form__progress-text { display: none; margin: 0 0 var(--pw-space-16); color: var(--pw-fg-muted); font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }
.is-js .c-form__progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.is-js .c-form__progress-text { display: block; }
.c-form__progress li { position: relative; }
.c-form__progress-btn {
  display: flex; align-items: baseline; gap: var(--pw-space-8); width: 100%; min-height: 44px; padding: var(--pw-space-8) 0 0;
  background: none; border: 0; border-top: 3px solid var(--pw-nebel); color: var(--pw-fg-muted); font: inherit; text-align: left; cursor: pointer;
}
.c-form__progress li[aria-current="step"] .c-form__progress-btn { border-top-color: var(--pw-action-bg); color: var(--pw-heading); }
.c-form__progress li.is-done .c-form__progress-btn { border-top-color: var(--pw-navy); color: var(--pw-heading); }
.c-form__progress-btn:focus-visible { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset); }
.c-form__progress-no { font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); font-size: var(--pw-fs-label); line-height: var(--pw-lh-label); }
.c-form__progress-title { display: none; font-size: var(--pw-fs-label); line-height: var(--pw-lh-label); }

/* Schritte */
.c-form__step { min-width: 0; margin: 0 0 var(--pw-space-24); padding: 0; border: 0; }
.c-form__step[hidden] { display: none; }
.c-form__legend {
  display: flex; align-items: baseline; gap: var(--pw-space-8); width: 100%; margin: 0 0 var(--pw-space-16); padding: 0;
  font-family: var(--pw-font-display); font-size: var(--pw-fs-h4); font-weight: var(--pw-fw-h3); line-height: var(--pw-lh-h4); color: var(--pw-heading);
}
.c-form__legend:focus { outline: none; }
.c-form__legend:focus-visible { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset); }
.c-form__legend-no { color: var(--pw-fg-muted); }
.c-form:not(:has(.is-js)) .c-form__legend-no { display: none; }
.is-js .c-form__legend-no:not(:empty)::after { content: "."; }
.c-form__step-intro { margin-bottom: var(--pw-space-16); }

/* Felder */
.c-form__field { margin: 0 0 var(--pw-space-24); }
.c-form__field[hidden], .c-form__choice[hidden], .c-form__note[hidden] { display: none; }
.c-form__row { display: grid; gap: 0 var(--pw-space-16); }
.c-form__row > .c-form__field { min-width: 0; }
@media (min-width: 560px) { .c-form__row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.c-form__label {
  display: block; margin: 0 0 var(--pw-space-8); padding: 0; font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold);
  color: var(--pw-heading); line-height: var(--pw-lh-label);
}
.c-form__req { font-size: var(--pw-fs-label); font-weight: var(--pw-fw-regular); color: var(--pw-fg-muted); }
.c-form__hint { margin: calc(-1 * var(--pw-space-4)) 0 var(--pw-space-8); color: var(--pw-fg-muted); font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }
.c-form__input {
  display: block; width: 100%; min-height: var(--pw-field-h); padding: var(--pw-space-12) var(--pw-space-16);
  background: var(--pw-weiss); color: var(--pw-tinte); border: 1px solid var(--pw-stahl); border-radius: var(--pw-radius-field);
  font: inherit; font-size: var(--pw-fs-small); line-height: var(--pw-lh-label);
  transition: border-color var(--pw-dur-fast) var(--pw-ease-out), box-shadow var(--pw-dur-fast) var(--pw-ease-out);
}
.c-form__textarea { min-height: 8rem; resize: vertical; line-height: var(--pw-lh-small); }
.c-form__input:hover { border-color: var(--pw-navy); }
.c-form__input:focus { outline: none; border-color: var(--pw-blau); box-shadow: 0 0 0 2px var(--pw-blau); }
.c-form__file-input { padding: var(--pw-space-12); background: var(--pw-papier); border-style: dashed; cursor: pointer; }
.c-form__count { margin: var(--pw-space-4) 0 0; font-size: var(--pw-fs-label); text-align: right; }
.c-form__error {
  display: flex; align-items: flex-start; gap: var(--pw-space-8); margin: var(--pw-space-8) 0 0; color: var(--pw-alarm);
  font-size: var(--pw-fs-label); font-weight: var(--pw-fw-semibold); line-height: var(--pw-lh-small);
}
.c-form__error::before {
  content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-top: 0.1em;
  border-radius: 50%; background: var(--pw-alarm); color: var(--pw-weiss); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); line-height: 1;
}
.c-form__error[hidden] { display: none; }
.has-error .c-form__input { border-color: var(--pw-alarm); box-shadow: 0 0 0 1px var(--pw-alarm); }
.has-error .c-form__input:focus { box-shadow: 0 0 0 2px var(--pw-alarm); }
.has-error .c-form__label { color: var(--pw-alarm); }

/* Auswahl: Radio als Liste, Chips oder Kacheln; Checkbox */
.c-form__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.c-form__choices { display: grid; gap: var(--pw-space-8); }
.c-form__choice {
  position: relative; display: flex; align-items: flex-start; gap: var(--pw-space-12); min-height: 44px; padding: var(--pw-space-12) var(--pw-space-16);
  background: var(--pw-weiss); border: 1px solid var(--pw-stahl); border-radius: var(--pw-radius-field); cursor: pointer;
  transition: border-color var(--pw-dur-fast) var(--pw-ease-out), background var(--pw-dur-fast) var(--pw-ease-out), box-shadow var(--pw-dur-fast) var(--pw-ease-out);
}
.c-form__choice:hover { border-color: var(--pw-navy); }
.c-form__choice input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pw-navy); cursor: pointer; }
.c-form__choice-text { display: flex; flex-direction: column; gap: 0; }
.c-form__choice-title { font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold); color: var(--pw-heading); line-height: var(--pw-lh-label); }
.c-form__choice-desc { color: var(--pw-fg-muted); font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }
.c-form__choice:has(input:checked) { border-color: var(--pw-navy); background: var(--pw-nebel); box-shadow: inset 0 0 0 1px var(--pw-navy); }
.c-form__choice:has(input:focus-visible) { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset); }
.c-form__choices--chips { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), max-content)); }
.c-form__choices--chips .c-form__choice { padding-block: var(--pw-space-8); align-items: center; }
.c-form__choices--chips .c-form__choice input { margin-top: 0; }
.c-form__choices--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.has-error .c-form__choice { border-color: var(--pw-alarm); }

.c-form__check { display: flex; align-items: flex-start; gap: var(--pw-space-12); min-height: 44px; padding: var(--pw-space-8) 0; cursor: pointer; font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }
.c-form__check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pw-navy); cursor: pointer; }
.c-form__check:has(input:focus-visible) { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset); }
.has-error .c-form__check input { outline: 2px solid var(--pw-alarm); outline-offset: 1px; }

/* Abschluss vor dem Absenden: Datenschutz-Checkbox */
.c-form__final { margin: 0 0 var(--pw-space-16); padding-top: var(--pw-space-16); border-top: 1px solid var(--pw-line); }
.c-form__final[hidden] { display: none; }
.c-form__final .c-form__field { margin-bottom: 0; }

/* Dateiliste */
.c-form__files { list-style: none; margin: var(--pw-space-8) 0 0; padding: 0; display: grid; gap: var(--pw-space-8); }
.c-form__files[hidden] { display: none; }
.c-form__file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pw-space-8); padding: var(--pw-space-4) var(--pw-space-12); background: var(--pw-nebel); border-radius: var(--pw-radius-field); font-size: var(--pw-fs-label); }
.c-form__file-remove { min-height: 44px; min-width: 44px; padding: 0 var(--pw-space-12); background: none; border: 0; color: var(--pw-link); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* Hinweise im Formular */
.c-form__note { margin: 0 0 var(--pw-space-16); padding: var(--pw-space-12) var(--pw-space-16); background: var(--pw-papier); border-left: 3px solid var(--pw-blau); border-radius: var(--pw-radius-field); font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }
.c-form__note > :last-child { margin-bottom: 0; }
.c-form__details { margin: 0 0 var(--pw-space-16); font-size: var(--pw-fs-small); }
.c-form__details summary { display: flex; align-items: center; min-height: 44px; font-weight: var(--pw-fw-semibold); color: var(--pw-link); cursor: pointer; }
.c-form__details ul { margin: 0 0 var(--pw-space-12); padding-left: 1.2em; }
.c-form__context { margin: 0 0 var(--pw-space-16); padding: var(--pw-space-12) var(--pw-space-16); background: var(--pw-nebel); border-radius: var(--pw-radius-field); font-size: var(--pw-fs-small); }
.c-form__context[hidden] { display: none; }
.c-form__legal { margin: 0 0 var(--pw-space-16); color: var(--pw-fg-muted); font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }

/* Fehlerzusammenfassung */
.c-form__summary { margin: 0 0 var(--pw-space-16); padding: var(--pw-space-12) var(--pw-space-16); background: var(--pw-weiss); border: 1px solid var(--pw-alarm); border-left-width: 4px; border-radius: var(--pw-radius-field); font-size: var(--pw-fs-small); }
.c-form__summary[hidden] { display: none; }
.c-form__summary-title { margin: 0 0 var(--pw-space-4); font-size: var(--pw-fs-small); color: var(--pw-alarm); }
.c-form__summary ul { margin: 0; padding-left: 1.2em; }
.c-form__summary a { display: inline-block; padding-block: var(--pw-space-4); color: var(--pw-tinte); }

/* Navigation: Zurueck links, Weiter und Absenden rechts */
.c-form__nav { display: flex; flex-wrap: wrap; gap: var(--pw-space-12); align-items: center; }
.c-form__nav [hidden] { display: none; }
.c-form__back { order: 0; }
.c-form__next, .c-form__send { margin-left: auto; }
.c-form__nav .pw-btn { min-height: 48px; }
.c-form:not(:has(.is-js)) .c-form__back, .c-form:not(:has(.is-js)) .c-form__next { display: none; }

/* Honeypot: aus dem Sichtfeld, nicht per display:none */
.c-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Vertrauensblock */
.c-form__trust { display: block; font-size: var(--pw-fs-small); }
.c-form__trust:hover { transform: none; box-shadow: var(--pw-shadow-1); }
.c-form__trust::before { content: none; }
.c-form__aside-title { font-size: var(--pw-fs-h4); margin-bottom: var(--pw-space-8); }
.c-form__aside-sub { margin: var(--pw-space-24) 0 var(--pw-space-8); font-size: var(--pw-fs-small); }
.c-form__aside-text { margin: 0 0 var(--pw-space-8); }
.c-form__next-steps { margin: 0; padding-left: 1.4em; }
.c-form__next-steps li { margin-bottom: var(--pw-space-4); }
.c-form__phones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.c-form__phones li { display: flex; flex-wrap: wrap; gap: var(--pw-space-8); align-items: baseline; }
.c-form__phones a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--pw-fw-semibold); }
.c-form__phone-label { min-width: 6.5rem; color: var(--pw-fg-muted); }
.c-form__status, .c-form__privacy { margin: var(--pw-space-16) 0 0; font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); color: var(--pw-fg-muted); }
.c-form__proven { margin-top: var(--pw-space-16); padding-top: var(--pw-space-16); border-top: 1px solid var(--pw-nebel); font-size: var(--pw-fs-label); }
.c-form__proven p { margin: 0; }

/* Schaden: Alarm-Farbe nur hier */
.c-form__alarm { margin: 0 0 var(--pw-space-24); padding: var(--pw-space-12) var(--pw-space-16); border: 1px solid var(--pw-alarm); border-left-width: 4px; border-radius: var(--pw-radius-field); background: var(--pw-weiss); font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.c-form__alarm p { margin: 0 0 var(--pw-space-4); }
.c-form__alarm p:first-child { color: var(--pw-alarm); font-family: var(--pw-font-display); font-size: var(--pw-fs-small); font-weight: var(--pw-fw-bold); }
.c-form__alarm > :last-child { margin-bottom: 0; }
.c-form--alarm .c-form__form { border-top-color: var(--pw-alarm); }
.c-form--alarm .c-form__phones a { font-size: var(--pw-fs-body); }

/* Erfolgsseite */
.c-form-done__inner { max-width: var(--pw-text-max); }
.c-form-done__summary { margin: var(--pw-space-24) 0; }
.c-form-done__summary[hidden] { display: none; }
.c-form-done__summary dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--pw-space-8) var(--pw-space-16); margin: 0; }
.c-form-done__summary dt { color: var(--pw-fg-muted); }
.c-form-done__summary dd { margin: 0; font-weight: var(--pw-fw-semibold); }
.c-form-done__steps { margin: var(--pw-space-24) 0 0; padding-left: 1.4em; }
.c-form-done__steps li { margin-bottom: var(--pw-space-8); }

/* Variante ohne Fokus-Layout (Kontaktseite): schmal, ohne Vertrauensblock-Spalte */
.c-form--plain .c-form__aside { display: none; }
.c-form--plain .c-form__main { max-width: var(--pw-text-max); }

@media (max-width: 767px) {
  .c-form__form { padding: var(--pw-space-24) var(--pw-space-16); }
  .c-form__phone-label { min-width: 0; }
  .c-form-done__summary dl { grid-template-columns: 1fr; gap: 0; }
  .c-form-done__summary dd { margin-bottom: var(--pw-space-8); }
  .c-form__nav .pw-btn { flex: 1 1 100%; margin-left: 0; }
  .c-form__back { order: 1; }
}
@media (min-width: 768px) {
  .c-form__progress-title { display: block; }
}
@media (min-width: 1024px) {
  .c-form--focus .c-form__grid { grid-template-columns: minmax(0, 1fr) 22rem; }
  .c-form__aside { position: sticky; top: calc(var(--pw-header-h) + var(--pw-space-24)); }
}

/* sections/hero.css */
/* hero: Varianten start | kompakt | zentriert, dazu der Startseiten-Slider (c-hero--slider, sobald items gesetzt sind) */
.c-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pw-space-48); align-items: center; }
.c-hero__copy { min-width: 0; }
/* Lange deutsche Komposita (Berufsunfaehigkeitsversicherung) duerfen mobil nicht ueberlaufen: fluid kleiner, Silbentrennung */
.c-hero__title { margin-bottom: var(--pw-space-16); font-size: min(var(--pw-fs-h1), 8.2vw); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.c-hero__text { max-width: 40rem; font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); }
.c-hero__media img { aspect-ratio: 4 / 3; }
.c-hero--kompakt { padding-block: var(--pw-space-48); }
.c-hero--kompakt .c-hero__title { margin-bottom: var(--pw-space-8); }
.c-hero--zentriert .c-hero__inner { text-align: center; justify-items: center; }
.c-hero--zentriert .pw-actions { justify-content: center; }
@media (min-width: 1024px) {
  .c-hero--start .c-hero__inner:has(.c-hero__media) { grid-template-columns: 1.1fr 0.9fr; }
  .c-hero--start { padding-block: var(--pw-space-96); }
}

/* ---------- Startseiten-Slider ----------
   Alle Folien liegen im selben Rasterfeld: die Hoehe steht fest, kein Layoutsprung.
   Ohne JS waehlt die Radiogruppe die Folie; js/hero-slider.js setzt .is-auto (Autoplay), .is-paused und .is-active. */
.c-hero--slider {
  --hero-h: clamp(560px, 86svh, 760px);
  --hero-fade: 900ms;
  --hero-verb-fs: min(var(--pw-fs-display), 8.6vw);
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-areas: "stage"; grid-template-columns: minmax(0, 1fr);
  background: var(--pw-nacht); color: var(--pw-weiss);
}
.c-hero__slides { grid-area: stage; display: grid; grid-template-columns: minmax(0, 1fr); }
.c-hero__top, .c-hero__controls { grid-area: stage; position: relative; z-index: 3; }

/* Folie */
.c-hero__slide {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--hero-h);
  visibility: hidden; opacity: 0; transition: opacity var(--hero-fade) var(--pw-ease-in-out), visibility 0s linear var(--hero-fade);
}
.c-hero__slide[data-slide="1"],
.c-hero--slider:has(#hero-slide-1:checked) .c-hero__slide[data-slide="1"],
.c-hero--slider:has(#hero-slide-2:checked) .c-hero__slide[data-slide="2"],
.c-hero--slider:has(#hero-slide-3:checked) .c-hero__slide[data-slide="3"],
.c-hero--slider:has(#hero-slide-4:checked) .c-hero__slide[data-slide="4"],
.c-hero--slider:has(#hero-slide-5:checked) .c-hero__slide[data-slide="5"] { visibility: visible; opacity: 1; z-index: 1; transition: opacity var(--hero-fade) var(--pw-ease-in-out), visibility 0s; }
.c-hero--slider:has(.c-hero__radio:checked:not(#hero-slide-1)) .c-hero__slide[data-slide="1"] { visibility: hidden; opacity: 0; z-index: 0; transition: opacity var(--hero-fade) var(--pw-ease-in-out), visibility 0s linear var(--hero-fade); }

.c-hero__slide-media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.c-hero__slide-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 62% 50%); }
/* image_focus der Folie gilt vor dem Register-Fokus, den build.mjs inline setzt (Bilder aus anderen Einsaetzen, z. B. USP-Keyframes) */
.c-hero__slide-media img[style*="--fokus"] { object-position: var(--fokus) !important; }
.c-hero--slider { background: var(--pw-hero-grund); }
/* Lichtschleier der Altseite (violett, magenta, blau) entfaellt seit Hero 2026b: die Motive sind fotorealistisch (Wunsch 31),
   ein Farbschleier wuerde sie wieder kuenstlich wirken lassen. Vignette und Dunkel links bzw. unten bleiben (::after). */
.c-hero__slide-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--pw-hero-vignette), linear-gradient(0deg, var(--pw-hero-grund) 0%, color-mix(in srgb, var(--pw-hero-grund) 82%, transparent) 34%, color-mix(in srgb, var(--pw-hero-grund) 10%, transparent) 64%, color-mix(in srgb, var(--pw-hero-grund) 55%, transparent) 100%);
}
/* Optionale Personen-Ebene (person_image, freigestelltes PNG): zwischen Motiv und Text */
/* unten und rechts angeschnitten; mobil kleiner im oberen rechten Bereich, damit der Text unten frei bleibt */
.c-hero__person { position: absolute; z-index: 1; right: calc(-1 * var(--pw-space-32)); bottom: 38%; height: 44%; max-width: 88%; width: auto; object-fit: contain; object-position: right bottom; pointer-events: none; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--pw-hero-grund) 80%, transparent)); -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%); mask-image: linear-gradient(0deg, transparent 0%, #000 22%); }
.c-hero__slide-media .pw-ai-badge { z-index: 2; top: calc(var(--pw-space-24) + var(--pw-space-4)); right: var(--pw-page-margin); }

.c-hero__slide-copy { position: relative; z-index: 2; min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; padding-top: var(--pw-space-96); padding-bottom: calc(var(--pw-space-96) + var(--pw-space-8)); }
.c-hero__slide-verb {
  display: flex; align-items: center; gap: 0.2em; margin: 0 0 var(--pw-space-12); color: var(--pw-weiss);
  font-family: var(--pw-font-display); font-size: var(--hero-verb-fs); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-display);
  line-height: var(--pw-lh-display); letter-spacing: var(--pw-ls-display); text-transform: uppercase;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--pw-nacht) 60%, transparent);
}
.c-hero__slide-text { margin: 0 0 var(--pw-space-24); max-width: 30rem; color: var(--pw-nebel); font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); }
.c-hero__slide-action { margin: 0; }

/* Sternmarke vor dem Verb */
.c-hero__star { position: relative; flex: none; width: 0.34em; height: 0.34em; min-width: 18px; min-height: 18px; border: var(--pw-star-stroke) solid currentColor; border-radius: var(--pw-radius-2); color: var(--pw-signal); }
.c-hero__star::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Kopfzeile: die H1 klein, damit die Bilder tragen */
.c-hero__top { align-self: start; padding-top: var(--pw-space-24); pointer-events: none; }
.c-hero__title-start {
  margin: 0; max-width: 36ch; padding-right: var(--pw-space-48); color: var(--pw-nebel);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-lead); font-weight: var(--pw-fw-bold); font-stretch: var(--pw-wdth-normal);
  line-height: var(--pw-lh-lead); letter-spacing: normal; text-transform: none;
  text-shadow: 0 1px 16px color-mix(in srgb, var(--pw-nacht) 70%, transparent);
}

/* Lesbarkeit der H1-Zeile (Live-QA mobil): unter 1440 px liegt sie ueber dem hellen Poster; eigener Schleier hinter der Zeile, mindestens 4,5 : 1 */
@media (max-width: 1439px) {
  .c-hero__top { isolation: isolate; }
  .c-hero__top::before {
    content: ""; position: absolute; z-index: -1; inset: 0 0 calc(-1 * var(--pw-space-32)) 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 7, 15, 0.86) 0%, rgba(5, 7, 15, 0.8) 55%, rgba(5, 7, 15, 0) 100%);
  }
}

/* Steuerung: Folienreiter mit Lichtleiste als Fortschritt (bis zu fuenf Folien) */
.c-hero__controls { align-self: end; display: flex; align-items: flex-end; gap: var(--pw-space-16); padding-bottom: var(--pw-space-24); }
.c-hero__tabs { display: flex; flex: 1; gap: var(--pw-space-12); margin: 0; padding: 0; border: 0; min-width: 0; }
.c-hero__tab {
  flex: 1 1 0; max-width: 13rem; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--pw-space-8); min-height: 44px; padding-top: var(--pw-space-8);
  color: var(--pw-stahl); cursor: pointer; user-select: none;
  font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: normal; text-transform: none; line-height: var(--pw-lh-label);
  transition: color var(--pw-dur-base) var(--pw-ease-out);
}
.c-hero__tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-hero__tab:hover { color: var(--pw-nebel); }
@media (max-width: 639px) {
  .c-hero__tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .c-hero__tab { justify-content: center; }
}
.c-hero__tab-bar { position: relative; display: block; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: color-mix(in srgb, var(--pw-silber) 28%, transparent); overflow: hidden; }
.c-hero__tab-bar::after { content: ""; position: absolute; inset: 0; background: var(--pw-lichtleiste); box-shadow: 0 0 14px color-mix(in srgb, var(--pw-signal) 70%, transparent); transform: scaleX(0); transform-origin: left; }
.c-hero__radio:checked + .c-hero__tab { color: var(--pw-weiss); }
.c-hero__radio:checked + .c-hero__tab .c-hero__tab-bar { background: color-mix(in srgb, var(--pw-silber) 60%, transparent); }
.c-hero__radio:checked + .c-hero__tab .c-hero__tab-bar::after { transform: scaleX(1); }
.c-hero__radio:focus-visible + .c-hero__tab { outline: var(--pw-focus-width) solid var(--pw-signal); outline-offset: var(--pw-focus-offset); border-radius: var(--pw-radius-2); }

/* Pause-Knopf entfaellt (Wunsch Alexander 14.10.2026): Autoplay pausiert bei Hover und Fokus, bei reduced motion laeuft es nicht. */

/* Bewegung nur ohne reduced motion: Fortschritt, langsamer Zoom, Text steigt ein */
@media (prefers-reduced-motion: no-preference) {
  .c-hero--slider.is-auto .c-hero__radio:checked + .c-hero__tab .c-hero__tab-bar::after { animation: pw-hero-progress var(--pw-hero-dauer) linear both; }
  .c-hero--slider.is-auto.is-paused .c-hero__radio:checked + .c-hero__tab .c-hero__tab-bar::after { animation-play-state: paused; }
  .c-hero__slide.is-active img { animation: pw-hero-zoom calc(var(--pw-hero-dauer) + var(--hero-fade)) var(--pw-ease-out) both; }
  .c-hero--slider.is-paused .c-hero__slide.is-active img { animation-play-state: paused; }
  .c-hero__slide.is-active .c-hero__slide-copy > * { animation: pw-hero-rise 700ms var(--pw-ease-out) both; }
  .c-hero__slide.is-active .c-hero__slide-text { animation-delay: 120ms; }
  .c-hero__slide.is-active .c-hero__slide-action { animation-delay: 220ms; }
}
@keyframes pw-hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pw-hero-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes pw-hero-rise { from { opacity: 0; transform: translateY(var(--pw-space-24)); } to { opacity: 1; transform: none; } }

/* Mobil und Tablet: das Motiv fuellt nur den oberen Teil der Folie, der Text steht darunter auf dunklem Grund.
   So liegt das grosse Verb nicht ueber dem Tuerlogo (Hero 2026b). Fokus der Bilder 90% 55%. */
@media (max-width: 1023px) {
  .c-hero__slide-media { inset: 0 0 auto 0; height: 64%; }
  .c-hero__slide-media::after { background: linear-gradient(0deg, var(--pw-hero-grund) 0%, color-mix(in srgb, var(--pw-hero-grund) 60%, transparent) 12%, transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--pw-hero-grund) 70%, transparent) 0%, transparent 24%); }
}

/* Lichtstreifen am unteren Rand: die Lichtleiste des Wagens */
.c-hero__lichtstreifen { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--pw-lichtleiste-hoehe); background: linear-gradient(90deg, color-mix(in srgb, var(--pw-blau) 0%, transparent) 0%, var(--pw-blau) 20%, var(--pw-signal) 50%, var(--pw-blau) 80%, color-mix(in srgb, var(--pw-blau) 0%, transparent) 100%); opacity: 0.9; }

@media (min-width: 1024px) {
  .c-hero--slider { --hero-h: clamp(600px, calc(100svh - var(--pw-header-h) - var(--pw-space-96)), 840px); }
  .c-hero__slide { justify-content: center; }
  .c-hero__slide-media::after { background: var(--pw-hero-vignette), var(--pw-hero-scrim), linear-gradient(0deg, color-mix(in srgb, var(--pw-hero-grund) 85%, transparent) 0%, transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--pw-hero-grund) 55%, transparent) 0%, transparent 22%); }
  .c-hero__person { bottom: calc(-1 * var(--pw-space-48)); height: 90%; max-width: 50%; right: calc(-1 * var(--pw-space-64)); -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 18%); mask-image: linear-gradient(0deg, transparent 0%, #000 18%); }
  .c-hero__slide-media .pw-ai-badge { z-index: 2; top: var(--pw-space-32); }
  .c-hero__slide-copy { padding-top: var(--pw-space-64); padding-bottom: var(--pw-space-96); }
  /* Einheitliche Fluchtlinie (Wunsch 33b): Text reserviert vier Zeilen, damit Stern, Verb, Button und Linie
     auf allen Folien an derselben Stelle stehen und beim Wechsel nicht springen */
  .c-hero__slide-text { min-height: calc(4em * var(--pw-lh-lead)); }
  .c-hero__top { padding-top: var(--pw-space-32); }
  .c-hero__title-start { max-width: 64ch; }
  .c-hero__controls { padding-bottom: var(--pw-space-32); }
}

/* ---------- Folie mit Hintergrundvideo (Wunsch 44, Hero 2026d) ----------
   Das Bild der Folie ist das Poster (erstes Keyframe, sofort sichtbar, LCP). Das Video liegt deckungsgleich darueber
   und blendet erst ein, wenn es laeuft (.is-bereit, gesetzt von js/hero-slider.js). Kein Layoutsprung.
   --hero-video-halt: Ruhe an jedem Keyframe; --hero-video-rampe: sanftes Abbremsen und Anfahren davor und danach;
   --hero-video-keyframes: so viele Keyframes zeigt die Folie, bevor der Slider weiterschaltet. */
.c-hero--slider { --hero-video-halt: 1600ms; --hero-video-rampe: 700ms; --hero-video-keyframes: 2; }
.c-hero__slide-video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 62% 50%);
  opacity: 0; transition: opacity var(--hero-fade) var(--pw-ease-in-out); pointer-events: none; background: transparent;
}
.c-hero__slide-video.is-bereit { opacity: 1; }
/* Mit Video kein Zoom auf dem Poster: das Video bringt die Bewegung, der Zoom wuerde beim Einblenden springen */
.c-hero__slide-media:has(.c-hero__slide-video) img { animation: none !important; }
/* Lesbarkeit: zusaetzlicher Scrim hinter Verb und Satz, weil das Video hellere Szenen durchfaehrt */
.c-hero__slide:has(.c-hero__slide-video) .c-hero__slide-media::after {
  background: var(--pw-hero-vignette), var(--pw-hero-scrim), linear-gradient(0deg, var(--pw-hero-grund) 0%, color-mix(in srgb, var(--pw-hero-grund) 82%, transparent) 30%, color-mix(in srgb, var(--pw-hero-grund) 20%, transparent) 62%, color-mix(in srgb, var(--pw-hero-grund) 60%, transparent) 100%);
}
@media (max-width: 1023px) {
  .c-hero__slide:has(.c-hero__slide-video) .c-hero__slide-media::after { background: linear-gradient(0deg, var(--pw-hero-grund) 0%, color-mix(in srgb, var(--pw-hero-grund) 60%, transparent) 14%, transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--pw-hero-grund) 75%, transparent) 0%, transparent 26%); }
}
@media (min-width: 1024px) {
  .c-hero__slide:has(.c-hero__slide-video) .c-hero__slide-media::after { background: var(--pw-hero-vignette), var(--pw-hero-scrim), linear-gradient(0deg, color-mix(in srgb, var(--pw-hero-grund) 88%, transparent) 0%, transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--pw-hero-grund) 60%, transparent) 0%, transparent 24%); }
}
/* Standzeit der Videofolie: das Skript setzt --hero-dauer-folie, solange diese Folie aktiv ist */
@media (prefers-reduced-motion: no-preference) {
  .c-hero--slider.is-auto .c-hero__radio:checked + .c-hero__tab .c-hero__tab-bar::after { animation-duration: var(--hero-dauer-folie, var(--pw-hero-dauer)); }
}
@media (prefers-reduced-motion: reduce) { .c-hero__slide-video { display: none; } }

/* sections/infobox.css */
/* infobox: Box mit Sternkaestchen, allein oder als Randspalte neben Fliesstext.
   Varianten (Farbe und Zeichen): hinweis | tipp | merksatz | beispiel | fakt | schaden. Alarm-Rot nur bei schaden. */
.c-infobox { --box-bg: var(--pw-nebel); --box-edge: var(--pw-pillar-lichtleiste); --box-fg: var(--pw-tinte); }
.c-infobox__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pw-space-32); align-items: start; }
.c-infobox__flow, .c-infobox__title, .c-infobox__body, .c-infobox__box { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.c-infobox__body > * { max-width: var(--pw-prose-measure); }
.c-infobox__box {
  position: relative; padding: var(--pw-space-24) var(--pw-space-24) var(--pw-space-24) var(--pw-space-32);
  border-radius: 0 var(--pw-radius-card) var(--pw-radius-card) 0; background: var(--box-bg); color: var(--box-fg);
  --pw-fg: var(--pw-tinte); --pw-fg-muted: var(--pw-stahl-dunkel); --pw-heading: var(--pw-navy); --pw-link: var(--pw-blau); --pw-link-hover: var(--pw-blau-hover); --pw-star: var(--pw-navy); --pw-focus: var(--pw-blau);
}
.c-infobox__box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pw-lichtleiste-hoehe); background: var(--box-edge); }
.c-infobox__label { display: flex; align-items: center; gap: var(--pw-space-8); margin: 0 0 var(--pw-space-12); color: var(--pw-stahl-dunkel); font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-label); line-height: var(--pw-lh-label); }
.c-infobox__box > .c-infobox__mark { display: block; margin-bottom: var(--pw-space-16); }
.c-infobox__mark { --mark-line: var(--pw-navy); --mark-star: var(--pw-navy); }
.c-infobox__title, .c-infobox__box-title { hyphens: manual; }
.c-infobox__box-title { margin: 0 0 var(--pw-space-8); font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); text-wrap: balance; }
.c-infobox__box-text { font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.c-infobox__box-text > :last-child { margin-bottom: 0; }
.c-infobox__link { margin: var(--pw-space-12) 0 0; font-family: var(--pw-font-display); font-size: var(--pw-fs-small); font-weight: var(--pw-fw-bold); }
.c-infobox__link a::after { content: " \2192"; }

/* Varianten */
.c-infobox--tipp { --box-bg: var(--pw-eis); --box-edge: var(--pw-schuetzen-lichtleiste); }
.c-infobox--tipp .c-infobox__box > .c-infobox__mark { display: block; margin-bottom: var(--pw-space-16); }
.c-infobox__mark { --mark-line: var(--pw-blau); --mark-fill: var(--pw-blau); --mark-star: var(--pw-weiss); }
.c-infobox--merksatz { --box-bg: var(--pw-weiss); }
.c-infobox--merksatz .c-infobox__box { border: 1px solid var(--pw-nebel); border-left: 0; box-shadow: var(--pw-shadow-1); }
.c-infobox--merksatz .c-infobox__box-title { font-size: var(--pw-fs-h3); line-height: var(--pw-lh-h3); font-stretch: var(--pw-wdth-h1); }
.c-infobox--beispiel { --box-bg: var(--pw-papier); --box-edge: var(--pw-silber); }
.c-infobox--beispiel .c-infobox__box { background-image: var(--pw-muster-wuerfel); }
.c-infobox--fakt { --box-bg: var(--pw-navy); --box-fg: var(--pw-weiss); --box-edge: var(--pw-lichtleiste); }
.c-infobox--fakt .c-infobox__box { --pw-fg: var(--pw-weiss); --pw-fg-muted: var(--pw-silber); --pw-heading: var(--pw-weiss); --pw-link: var(--pw-signal); --pw-link-hover: var(--pw-signal-hell); --pw-star: var(--pw-silber); --pw-focus: var(--pw-signal); }
.c-infobox--fakt .c-infobox__label { color: var(--pw-silber); }
.c-infobox--fakt .c-infobox__box > .c-infobox__mark { display: block; margin-bottom: var(--pw-space-16); }
.c-infobox__mark { --mark-line: var(--pw-silber); --mark-star: var(--pw-silber); }
.c-infobox--fakt .c-infobox__box-title { font-size: var(--pw-fs-h2); line-height: var(--pw-lh-h2); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-h1); }
.c-infobox--schaden { --box-bg: var(--pw-weiss); --box-edge: var(--pw-alarm); }
.c-infobox--schaden .c-infobox__box { border: 1px solid var(--pw-nebel); border-left: 0; }
.c-infobox--schaden .c-infobox__box > .c-infobox__mark { display: block; margin-bottom: var(--pw-space-16); }
.c-infobox__mark { --mark-line: var(--pw-nacht); --mark-fill: var(--pw-nacht); --mark-star: var(--pw-weiss); --mark-edge: var(--pw-alarm); }
/* explizite Saeule schlaegt die Variante */
.c-infobox .c-infobox__mark.pw-mark--versichern { --mark-line: var(--pw-navy); --mark-fill: transparent; --mark-star: var(--pw-navy); }
.c-infobox .c-infobox__mark.pw-mark--schuetzen { --mark-line: var(--pw-blau); --mark-fill: var(--pw-blau); --mark-star: var(--pw-weiss); }
.c-infobox .c-infobox__mark.pw-mark--verteidigen { --mark-line: var(--pw-nacht); --mark-fill: var(--pw-nacht); --mark-star: var(--pw-weiss); --mark-edge: var(--pw-alarm); }

/* Layout */
.c-infobox--allein .c-infobox__box { max-width: 46rem; }
@media (min-width: 1024px) {
  .c-infobox--neben_text .c-infobox__inner:has(.c-infobox__flow) { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--pw-space-48); }
  .c-infobox--neben_text .c-infobox__box { margin-top: calc(var(--pw-fs-h2) * 1.1 + var(--pw-space-16)); }
}
/* Polish 33e: Kastentitel trennen nur an Fugen; lange Woerter ohne Fuge passen ueber die an die Kastenbreite gekoppelte Schrift */
.c-infobox__box { container-type: inline-size; }
.c-infobox__box-title { font-size: min(var(--pw-fs-h4), var(--pw-fs-wort-fit)); }
.c-infobox--merksatz .c-infobox__box-title { font-size: min(var(--pw-fs-h3), var(--pw-fs-wort-fit)); }
.c-infobox--fakt .c-infobox__box-title { font-size: min(var(--pw-fs-h2), var(--pw-fs-wort-fit)); }

/* sections/lebensweg.css */
/* lebensweg: Lebensphasen als Fotoreihe an einer Lichtleiste (Paket C7, Schuetzen-Hub).
   Mobil: horizontal wischbare Reihe mit Einrasten, Lichtleiste je Karte durchgehend.
   Ab 1024 px: versetzte Collage auf 14 Spalten, ungerade Phasen oberhalb, gerade unterhalb der Lichtleiste,
   leichter Parallax per animation-timeline view() (nur wenn unterstuetzt und ohne reduced motion). Kein JS. */
.c-lebensweg { --lw-punkt: var(--pw-space-16); --lw-reihe: var(--pw-space-48); --lw-drift: var(--pw-space-16); overflow: hidden; }
.c-lebensweg__lead { font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); color: var(--pw-fg-muted); max-width: var(--pw-measure); }

/* Bahn: mobil Scroller bis an den Rand */
.c-lebensweg__bahn {
  margin-inline: calc(-1 * var(--pw-page-margin));
  padding-inline: var(--pw-page-margin);
  scroll-padding-inline: var(--pw-page-margin);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--pw-line-strong) transparent;
  padding-bottom: var(--pw-space-16);
}
.c-lebensweg__bahn:focus-visible { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset); }
.c-lebensweg__list { display: flex; gap: var(--pw-fuge); margin: 0; padding: 0; list-style: none; counter-reset: phase; }
.c-lebensweg__list::after { content: ""; flex: 0 0 1px; }
.c-lebensweg__item { flex: 0 0 min(80%, 20rem); scroll-snap-align: start; margin: 0; counter-increment: phase; }
.c-lebensweg__item::marker { content: none; }

.c-lebensweg__card { position: relative; display: flex; flex-direction: column; height: 100%; }
.c-lebensweg__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--pw-radius-media); background: var(--pw-navy); }
.c-lebensweg__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform var(--pw-dur-reveal) var(--pw-ease-out); }
/* ohne Bild (QA-Schleife 1, Befund 4): helle Flaeche statt Navy. Papier, Eis oder Nebel im Wechsel mit Wuerfelmuster,
   Schildkante unten links, Phasennummer als Konturziffer, kleines Schutzzeichen. Nie zwei gleiche Flaechen nebeneinander.
   Mobil gleiche Hoehe wie ein Foto (die Lichtleiste laeuft durch), Desktop auf ein flaches Band verkuerzt. */
.c-lebensweg__media--leer {
  --lw-fill: var(--pw-papier);
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pw-space-16);
  padding: var(--pw-space-16) var(--pw-space-24);
  border-radius: 0; background: var(--pw-muster-wuerfel), var(--lw-fill); box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pw-schildkante) 100%, 0 calc(100% - var(--pw-space-12)));
}
.c-lebensweg__item:nth-child(3n+2) .c-lebensweg__media--leer { --lw-fill: var(--pw-eis); }
.c-lebensweg__item:nth-child(3n) .c-lebensweg__media--leer { --lw-fill: var(--pw-nebel); }
.c-lebensweg__media--leer::before {
  content: counter(phase, decimal-leading-zero);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-h2); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-display); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--pw-stahl); font-variant-numeric: tabular-nums;
}
.c-lebensweg__media--leer.pw-dunkel .pw-mark { --pw-mark-size: var(--pw-mark-size-l); --mark-line: var(--pw-blau); --mark-fill: var(--pw-blau); --mark-star: var(--pw-weiss); opacity: 0.6; transition: opacity var(--pw-dur-fast) var(--pw-ease-out); }
.c-lebensweg__card:hover .c-lebensweg__media--leer .pw-mark { opacity: 1; }

/* Punkt auf der Lichtleiste; die Linie laeuft mobil durch alle Karten */
.c-lebensweg__punkt { position: relative; display: block; height: var(--lw-punkt); margin-block: var(--pw-space-16); }
.c-lebensweg__punkt::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--pw-fuge)); top: 50%; height: var(--pw-lichtleiste-hoehe); transform: translateY(-50%); background: var(--pw-pillar-lichtleiste); }
.c-lebensweg__item:last-child .c-lebensweg__punkt::before { right: 0; }
.c-lebensweg__punkt::after { content: ""; position: absolute; left: 0; top: 0; width: var(--lw-punkt); height: var(--lw-punkt); box-sizing: border-box; border-radius: 50%; border: var(--pw-lichtleiste-hoehe) solid var(--pw-pillar-accent); background: var(--pw-bg); }

.c-lebensweg__name { margin: 0 0 var(--pw-space-8); font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); }
.c-lebensweg__link { color: var(--pw-heading); text-decoration: none; background: var(--pw-pillar-lichtleiste) left bottom / 0 var(--pw-lichtleiste-hoehe) no-repeat; transition: background-size var(--pw-dur-slow) var(--pw-ease-out); }
.c-lebensweg__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--pw-radius-media); }
.c-lebensweg__link:focus-visible { outline: none; }
.c-lebensweg__card:focus-within { outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-space-8); border-radius: var(--pw-radius-media); }
.c-lebensweg__card:hover .c-lebensweg__link { background-size: 100% var(--pw-lichtleiste-hoehe); }
.c-lebensweg__card:hover .c-lebensweg__media img { transform: scale(1.03); }
.c-lebensweg__text { margin: 0; font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); color: var(--pw-fg-muted); }

/* Desktop: versetzte Collage an einer durchgehenden Lichtleiste */
@media (min-width: 1024px) {
  .c-lebensweg__bahn { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .c-lebensweg__list {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-template-rows: auto var(--lw-punkt) auto;
    column-gap: var(--pw-fuge);
    row-gap: 0;
    position: relative;
  }
  .c-lebensweg__list::after { content: none; }
  .c-lebensweg__list::before {
    content: ""; grid-row: 2; grid-column: 1 / -1; align-self: center;
    height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: var(--pw-pillar-lichtleiste);
  }
  .c-lebensweg__item { min-width: 0; }
  .c-lebensweg__item:nth-child(odd) { grid-row: 1 / 3; align-self: end; }
  .c-lebensweg__item:nth-child(even) { grid-row: 2 / 4; align-self: start; }
  /* oben 1, 3, 5 auf Spalten 1, 5, 9; unten 2, 4, 6 um zwei Spalten versetzt auf 3, 7, 11 */
  .c-lebensweg__item:nth-child(1) { grid-column: 1 / span 4; }
  .c-lebensweg__item:nth-child(2) { grid-column: 3 / span 4; }
  .c-lebensweg__item:nth-child(3) { grid-column: 5 / span 4; }
  .c-lebensweg__item:nth-child(4) { grid-column: 7 / span 4; }
  .c-lebensweg__item:nth-child(5) { grid-column: 9 / span 4; }
  .c-lebensweg__item:nth-child(6) { grid-column: 11 / span 4; }

  .c-lebensweg__card { height: auto; }
  .c-lebensweg__item:nth-child(odd) .c-lebensweg__punkt { order: 3; margin: 0; }
  .c-lebensweg__item:nth-child(odd) .c-lebensweg__copy { padding-bottom: var(--lw-reihe); }
  .c-lebensweg__item:nth-child(even) .c-lebensweg__punkt { order: -1; margin: 0; }
  .c-lebensweg__item:nth-child(even) .c-lebensweg__media { margin-top: var(--lw-reihe); aspect-ratio: 3 / 2; }
  .c-lebensweg__item:nth-child(odd) .c-lebensweg__copy { order: 1; }
  .c-lebensweg__item:nth-child(odd) .c-lebensweg__media { order: 0; margin-bottom: var(--pw-space-16); }
  .c-lebensweg__item:nth-child(even) .c-lebensweg__copy { margin-top: var(--pw-space-16); }
  .c-lebensweg__punkt::before { content: none; }
  .c-lebensweg__item:nth-child(3n) .c-lebensweg__media { aspect-ratio: 5 / 4; }
  .c-lebensweg__media { box-shadow: var(--pw-shadow-2); }
  .c-lebensweg__item:nth-child(n) .c-lebensweg__media.c-lebensweg__media--leer { aspect-ratio: 5 / 2; box-shadow: none; }
  .c-lebensweg__text { max-width: 24em; }
}

/* Parallax: Karten oben und unten driften gegenlaeufig, nur mit Scroll-Timeline und ohne reduced motion */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .c-lebensweg__item:nth-child(odd) .c-lebensweg__media img { animation: c-lebensweg-drift-auf linear both; animation-timeline: view(); animation-range: cover; }
    .c-lebensweg__item:nth-child(even) .c-lebensweg__media img { animation: c-lebensweg-drift-ab linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes c-lebensweg-drift-auf { from { transform: translateY(var(--lw-drift)) scale(1.08); } to { transform: translateY(calc(-1 * var(--lw-drift))) scale(1.08); } }
@keyframes c-lebensweg-drift-ab { from { transform: translateY(calc(-1 * var(--lw-drift))) scale(1.08); } to { transform: translateY(var(--lw-drift)) scale(1.08); } }

/* sections/legal_text.css */
/* legal_text: Impressum, Erstinformation, Datenschutz */
.c-legal-text__body { max-width: 46rem; }
.c-legal-text__stand { font-size: 0.9375rem; }
.c-legal-text .pw-prose h3 { margin-top: var(--pw-space-24); font-size: 1.125rem; }
.c-legal-text .pw-prose { overflow-wrap: anywhere; }

/* sections/modal.css */
/* modal.css: Anfrageformulare im Modal (js/modal-forms.js). Klassen pw-modal, pw-modal__*; Modifikator pw-modal--alarm (Schaden melden).
   Werte nur aus tokens.css. Aufbau: feste Kopfzeile (Titel, Schliessen), nur der Inhalt scrollt (overscroll contain),
   Weiter/Absenden klebt unten im Inhalt. Desktop: zentriertes Fenster bis 60rem. Mobil (bis 767 px): Vollbild mit 100dvh.
   Die Formular-Sektion (.c-form) wird unveraendert uebernommen; hier nur Rahmen und Verdichtung (Polish 14.10.2026, Wunsch 33d). */

/* Scroll-Lock; --pw-scrollbar setzt das Skript, damit die Seite nicht springt */
html.pw-modal-open { overflow: hidden; padding-right: var(--pw-scrollbar, 0); }

.pw-modal {
  --pw-modal-pad: var(--pw-space-32);
  box-sizing: border-box; width: min(60rem, calc(100vw - 2 * var(--pw-space-24))); max-width: none;
  max-height: calc(100dvh - 2 * var(--pw-space-24)); margin: auto; padding: 0; overflow: hidden;
  background: var(--pw-weiss); color: var(--pw-fg); border: 0; border-radius: var(--pw-radius-card); box-shadow: var(--pw-shadow-2);
}
.pw-modal:not([open]) { display: none; }
.pw-modal::backdrop { background: color-mix(in srgb, var(--pw-nacht) 72%, transparent); }
.pw-modal[open] { animation: pw-modal-in var(--pw-dur-slow) var(--pw-ease-out); }
.pw-modal[open]::backdrop { animation: pw-modal-fade var(--pw-dur-slow) var(--pw-ease-out); }
@keyframes pw-modal-in { from { opacity: 0; transform: translateY(var(--pw-space-16)); } to { opacity: 1; transform: none; } }
@keyframes pw-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.pw-modal__panel { display: flex; flex-direction: column; max-height: inherit; height: 100%; min-height: 0; }

/* Kopf: Nacht-Band mit Lichtleiste (Alarm-Linie bei Schaden melden), fest */
.pw-modal__head {
  position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-16);
  padding: var(--pw-space-8) var(--pw-space-8) var(--pw-space-8) var(--pw-modal-pad); background: var(--pw-nacht); color: var(--pw-weiss);
}
.pw-modal__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); }
.pw-modal--alarm .pw-modal__head::after { height: var(--pw-space-4); background: var(--pw-alarm); }
.pw-modal__title {
  margin: 0; color: var(--pw-weiss); font-family: var(--pw-font-display); font-size: var(--pw-fs-h4); font-weight: var(--pw-fw-h3);
  line-height: var(--pw-lh-h4); letter-spacing: var(--pw-ls-h3);
}
/* Titel ist nur Ziel fuer programmatischen Fokus (tabindex -1), daher ohne Ring */
.pw-modal__title:focus { outline: none; }
.pw-modal__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--pw-weiss); border: 0; border-radius: var(--pw-radius-button); cursor: pointer;
  transition: background var(--pw-dur-fast) var(--pw-ease-out), color var(--pw-dur-fast) var(--pw-ease-out);
}
.pw-modal__close:hover { background: var(--pw-navy); }
.pw-modal__close:focus-visible { outline: var(--pw-focus-width) solid var(--pw-signal); outline-offset: calc(-1 * var(--pw-focus-width)); }

/* Inhalt: nur dieser Bereich scrollt; Abstand unten fuer die klebende Aktionsleiste */
.pw-modal__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--pw-space-24) var(--pw-modal-pad) var(--pw-modal-pad);
  scroll-padding-block: var(--pw-space-24) calc(var(--pw-field-h) + var(--pw-space-48));
}
.pw-modal__body:focus { outline: none; }
.pw-modal__lead { max-width: var(--pw-measure); margin: 0 0 var(--pw-space-16); color: var(--pw-fg-muted); font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.pw-modal__lead[hidden] { display: none; }
.pw-modal__lead > * { margin-bottom: 0; }
.pw-modal__loading { margin: 0; padding: var(--pw-space-48) 0; color: var(--pw-fg-muted); text-align: center; }

/* uebernommene Sektion: ohne Sektionsabstand, ohne eigenen Hintergrund, ohne Container-Rand; Formular ohne Karte (das Fenster ist die Karte) */
.pw-modal .c-form, .pw-modal .c-form-done { padding: 0; background: none; }
.pw-modal .l-container { max-width: none; padding-inline: 0; }
.pw-modal .c-form__grid { gap: var(--pw-space-24); }
.pw-modal .c-form__form { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.pw-modal .c-form__field { margin-bottom: var(--pw-space-16); }
.pw-modal .c-form__step { margin-bottom: var(--pw-space-16); }
.pw-modal .c-form__alarm { margin-bottom: var(--pw-space-16); }
.pw-modal .c-form__progress-text { margin-bottom: var(--pw-space-12); }
.pw-modal .c-form-done__inner { max-width: none; }

/* Aktionsleiste klebt am unteren Rand des Inhalts, damit Weiter und Absenden immer erreichbar sind */
.pw-modal .c-form__nav {
  position: sticky; bottom: calc(-1 * var(--pw-modal-pad)); z-index: 1;
  margin: 0 calc(-1 * var(--pw-modal-pad)) calc(-1 * var(--pw-modal-pad)); padding: var(--pw-space-12) var(--pw-modal-pad) var(--pw-modal-pad);
  background: var(--pw-weiss); border-top: 1px solid var(--pw-line);
}

/* Vertrauensblock im Modal: leise Nebenspalte */
.pw-modal .c-form__aside { position: static; }
.pw-modal .c-form__trust { padding: var(--pw-space-16) var(--pw-space-24); background: var(--pw-papier); border: 0; box-shadow: none; font-size: var(--pw-fs-label); line-height: var(--pw-lh-small); }
.pw-modal .c-form__trust:hover { box-shadow: none; }
.pw-modal .c-form__aside-title { font-size: var(--pw-fs-small); }
.pw-modal .c-form__aside-sub { margin-top: var(--pw-space-16); font-size: var(--pw-fs-label); }
.pw-modal .c-form__phones li { flex-direction: column; align-items: flex-start; gap: 0; }
.pw-modal .c-form__phone-label { min-width: 0; }
.pw-modal .c-form__phones a, .pw-modal.pw-modal--alarm .c-form__phones a { min-height: 44px; font-size: var(--pw-fs-small); }
@media (min-width: 1024px) {
  .pw-modal .c-form--focus .c-form__grid { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--pw-space-32); }
  /* Nebenspalte: Aktionsleiste nur unter dem Formular */
  .pw-modal .c-form__nav { margin-right: 0; padding-right: 0; }
}

/* Rueckfrage beim Schliessen mit Eingaben */
.pw-modal__confirm {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pw-space-16);
  padding: var(--pw-space-16) var(--pw-modal-pad); background: var(--pw-weiss); border-top: 4px solid var(--pw-navy); box-shadow: var(--pw-shadow-2);
}
.pw-modal__confirm[hidden] { display: none; }
.pw-modal__confirm-text { margin: 0; font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold); color: var(--pw-heading); }
.pw-modal--alarm .pw-modal__confirm { border-top-color: var(--pw-alarm); }
.pw-modal__confirm-actions { display: flex; flex-wrap: wrap; gap: var(--pw-space-12); }

/* Mobil: Vollbild in voller Hoehe */
@media (max-width: 767px) {
  .pw-modal {
    --pw-modal-pad: var(--pw-space-16);
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
  }
  .pw-modal[open] { animation-name: pw-sheet-in; }
  @keyframes pw-sheet-in { from { transform: translateY(var(--pw-space-48)); opacity: 0; } to { transform: none; opacity: 1; } }
  .pw-modal__head { padding-block: var(--pw-space-4); }
  .pw-modal__body { padding-top: var(--pw-space-16); padding-bottom: calc(var(--pw-modal-pad) + env(safe-area-inset-bottom, 0px)); }
  .pw-modal .c-form__nav { padding-bottom: calc(var(--pw-modal-pad) + env(safe-area-inset-bottom, 0px)); }
  .pw-modal__confirm-actions, .pw-modal__confirm-actions .pw-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pw-modal[open], .pw-modal[open]::backdrop { animation: none; }
}

/* sections/page_header.css */
/* page_header: Seitenkopf fuer Unterseiten. H1, Lead, Haekchen, CTAs, Bild, Saeulen-Kompass; darunter die Brotkrumen-Zeile.
   Varianten: hell (Textkopf) | buehne (dunkel, Bild vollflaechig mit Scrim) | geteilt (Produkt: Text links, Bild rechts
   bis an den Fensterrand mit Schildkante) | collage (Kategorie: drei versetzte Bilder mit Schildkante, leichter Parallax).
   geteilt ohne Bild und collage ohne ein einziges Bild sehen aus wie hell: eine ruhige Textspalte, kein Wasserzeichen. Saeule ueber data-pillar (_tokens-pillars.css).
   Keine sichtbaren Bildunterschriften; KI-Bilder mit pw-ai-badge. Werte nur aus tokens.css. */
.c-page-header { position: relative; isolation: isolate; overflow: hidden; overflow-x: clip; min-width: 0; max-width: 100%; display: grid; padding-block: var(--pw-space-48) 0; }
.c-page-header:not(:has(.c-page-header__compass)) { padding-bottom: var(--pw-space-64); }
.c-page-header__inner { position: relative; z-index: 1; }
.c-page-header__copy { max-width: 54rem; min-width: 0; }

.c-page-header__title { max-width: 22ch; margin-bottom: var(--pw-space-24); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; min-width: 0; }
/* Trennung: build.mjs setzt weiche Trennstellen (U+00AD) in lange Komposita; hyphens manual trennt nur dort, in jedem Browser gleich.
   Produkt- und Kategoriekopf: H1 kleiner als die Hub-H1, damit Komposita an der Fuge trennen statt hart zu brechen. */
@media (min-width: 768px) {
  .c-page-header--geteilt .c-page-header__title, .c-page-header--collage .c-page-header__title { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); max-width: 24ch; }
  .c-page-header--geteilt.c-page-header--bild .c-page-header__title, .c-page-header--collage:has(.c-page-header__tile img) .c-page-header__title { font-size: clamp(1.875rem, 1rem + 2vw, 2.75rem); }
}
/* Lichtleiste der Saeule unter der H1 (56 x 3 px): das Orientierungszeichen der Seite */
.c-page-header__title::after { content: ""; display: block; width: calc(var(--pw-space-48) + var(--pw-space-8)); height: var(--pw-lichtleiste-hoehe); margin-top: var(--pw-space-24); border-radius: var(--pw-radius-2); background: var(--pw-pillar-lichtleiste); }
.c-page-header__lead { max-width: var(--pw-prose-measure); color: var(--pw-fg); }
.c-page-header__lead > :last-child { margin-bottom: 0; }
.c-page-header__actions { margin-top: var(--pw-space-32); }

/* Haekchen: drei Zeilen mit Sternkaestchen statt Haken */
.c-page-header__checks { display: grid; gap: var(--pw-space-12); margin: var(--pw-space-24) 0 0; padding: 0; list-style: none; }
.c-page-header__check { margin: 0; display: flex; align-items: flex-start; gap: var(--pw-space-12); color: var(--pw-fg); line-height: var(--pw-lh-small); }
.c-page-header__check-mark { margin-top: 0.1em; }

/* Bild */
.c-page-header__media { position: relative; margin: 0; }
.c-page-header__media img { width: 100%; height: 100%; object-fit: cover; }

/* hell mit Bild: mobil Bild oben, ab 1024 rechts angeschnitten mit Schildkante */
.c-page-header--hell.c-page-header--bild { padding-top: 0; }
.c-page-header--hell .c-page-header__media { order: -1; margin-bottom: var(--pw-space-32); }
.c-page-header--hell .c-page-header__media img { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .c-page-header--hell.c-page-header--bild { padding-top: var(--pw-space-64); }
  .c-page-header--hell .c-page-header__media { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 44%; margin: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
  .c-page-header--hell .c-page-header__media img { aspect-ratio: auto; }
  .c-page-header--hell.c-page-header--bild .c-page-header__copy { max-width: min(46rem, 52%); }
}

/* buehne: dunkler Kopf, Bild vollflaechig, Text links auf Scrim */
.c-page-header--buehne { min-height: clamp(26rem, 60vh, 38rem); align-content: end; }
.c-page-header--buehne .c-page-header__media { position: absolute; inset: 0; z-index: 0; }
.c-page-header--buehne .c-page-header__media::after { content: ""; position: absolute; inset: 0; background: var(--pw-scrim); }
@media (min-width: 1024px) {
  .c-page-header--buehne .c-page-header__media::after { background: var(--pw-scrim-links); }
  .c-page-header--buehne { padding-top: var(--pw-space-128); }
}
.c-page-header--buehne .c-page-header__compass { border-top-color: var(--pw-line); }

/* ---------- geteilt und collage: immer weiss, helle Rollen ---------- */
.c-page-header--geteilt, .c-page-header--collage {
  --pw-fg: var(--pw-tinte); --pw-fg-muted: var(--pw-stahl-dunkel); --pw-heading: var(--pw-navy); --pw-link: var(--pw-blau); --pw-link-hover: var(--pw-blau-hover);
  --pw-action-bg: var(--pw-blau); --pw-action-fg: var(--pw-weiss); --pw-action-hover: var(--pw-blau-hover); --pw-focus: var(--pw-blau); --pw-star: var(--pw-navy);
  background: var(--pw-weiss); color: var(--pw-tinte);
}
/* zweiter Weg als Textlink, nicht als Button (ein gefuellter Button im ersten Viewport) */
.c-page-header--geteilt .c-page-header__cta2, .c-page-header--collage .c-page-header__cta2 {
  min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--pw-link);
  font-family: var(--pw-font-display); font-weight: var(--pw-fw-semibold); letter-spacing: var(--pw-ls-label); text-transform: none;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em;
}
.c-page-header--geteilt .c-page-header__cta2::after, .c-page-header--collage .c-page-header__cta2::after { content: none; }
.c-page-header--geteilt .c-page-header__cta2:hover, .c-page-header--collage .c-page-header__cta2:hover { background: none; color: var(--pw-link-hover); text-decoration-color: var(--pw-pillar-accent, currentColor); }
.c-page-header--geteilt .c-page-header__actions, .c-page-header--collage .c-page-header__actions { gap: var(--pw-space-16) var(--pw-space-32); }

/* geteilt mit Bild: mobil Bild oben 4:3 mit schraeger Unterkante, ab 1024 rechts bis an den Fensterrand */
.c-page-header--geteilt.c-page-header--bild { padding-top: 0; }
.c-page-header--geteilt .c-page-header__media { order: -1; margin-bottom: var(--pw-space-32); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pw-space-24)), 0 100%); }
.c-page-header--geteilt .c-page-header__media img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .c-page-header--geteilt.c-page-header--bild { min-height: var(--pw-kopf-min-h, 560px); padding-block: 0; align-content: center; }
  .c-page-header--geteilt.c-page-header--bild .c-page-header__inner { padding-block: var(--pw-space-96); }
  .c-page-header--geteilt.c-page-header--bild .c-page-header__copy { max-width: 46%; }
  .c-page-header--geteilt .c-page-header__media { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; left: 49%; margin: 0; clip-path: var(--pw-schildkante-clip); }
  .c-page-header--geteilt .c-page-header__media img { aspect-ratio: auto; }
  .c-page-header--geteilt .c-page-header__title { max-width: none; }
}

/* ---------- collage: drei Bilder versetzt, je Schildkante, weisse Fuge folgt der Kante ---------- */
.c-page-header__collage { position: relative; aspect-ratio: 4 / 3; margin-bottom: var(--pw-space-32); }
/* ohne ein einziges echtes Bild: keine Collage aus Ersatzflaechen, Kopf wie hell */
.c-page-header__collage:not(:has(img)) { display: none; }
.c-page-header__tile {
  position: absolute; margin: 0; padding: var(--pw-space-8); background: var(--pw-weiss);
  clip-path: var(--pw-schildkante-clip);
}
.c-page-header__tile img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--pw-schildkante-clip); }
.c-page-header__tile--1 { z-index: 1; top: 0; right: 0; width: 64%; height: 64%; }
.c-page-header__tile--2 { z-index: 2; top: 30%; left: 0; width: 50%; height: 46%; }
.c-page-header__tile--3 { z-index: 3; bottom: 0; right: 8%; width: 46%; height: 42%; }
/* fehlendes Bild neben echten Bildern (nur slot): helle Papierflaeche mit Wuerfelmuster und kleinem Sternkaestchen, je Kachel ein anderer Ton */
.c-page-header__tile--leer { display: grid; place-items: center; --tile-fill: var(--pw-papier); }
.c-page-header__tile--leer::before { content: ""; position: absolute; inset: var(--pw-space-8); background: var(--pw-muster-wuerfel), var(--tile-fill); clip-path: var(--pw-schildkante-clip); }
.c-page-header__tile--leer .pw-mark { position: relative; z-index: 1; opacity: 0.5; }
.c-page-header__tile--2.c-page-header__tile--leer { --tile-fill: var(--pw-pillar-tint); }
.c-page-header__tile--3.c-page-header__tile--leer { --tile-fill: var(--pw-nebel); }
.c-page-header--collage .c-page-header__inner { display: flex; flex-direction: column; }
.c-page-header--collage .c-page-header__collage { order: -1; }
.c-page-header--collage:has(.c-page-header__tile img) { padding-top: var(--pw-space-24); }
@media (min-width: 1024px) {
  .c-page-header--collage .c-page-header__inner:has(.c-page-header__tile img) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--pw-space-64); align-items: center;
  }
  .c-page-header--collage:has(.c-page-header__tile img) { min-height: var(--pw-kopf-min-h, 560px); padding-block: var(--pw-space-64); }
  .c-page-header--collage .c-page-header__collage { order: 0; aspect-ratio: 1 / 1; max-height: 34rem; margin: 0; }
  .c-page-header--collage:has(.c-page-header__tile img) .c-page-header__title { max-width: none; }
}
/* leichter Parallax nur der mittleren Kachel, ohne JavaScript; Fallback und reduced motion: statisch */
@keyframes c-page-header-drift { from { translate: 0 var(--pw-space-32); } to { translate: 0 calc(-1 * var(--pw-space-32)); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .c-page-header__tile--2 { animation: c-page-header-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

/* Ohne Bild: ruhiger Textkopf, kein Wasserzeichen (QA-Schleife 1, Befund 5). Kopfspalte 60 Zeichen Lesemass, H1 bis 30 Zeichen je Zeile.
   Produkt- und Kategoriekopf ohne Bild: rechts laeuft das Wuerfelmuster der Marke weich aus, die Haelfte wirkt bewusst, nicht leer. */
.c-page-header:not(.c-page-header--bild):not(.c-page-header--buehne):not(:has(.c-page-header__tile img)) .c-page-header__copy { max-width: min(54rem, 100%); }
.c-page-header:not(.c-page-header--bild):not(.c-page-header--buehne):not(:has(.c-page-header__tile img)) .c-page-header__lead { max-width: 60ch; }
@media (min-width: 1024px) {
  .c-page-header { padding-top: var(--pw-space-64); }
  .c-page-header--geteilt:not(.c-page-header--bild) .c-page-header__title,
  .c-page-header--collage:not(:has(.c-page-header__tile img)) .c-page-header__title { max-width: 20em; }
  .c-page-header--geteilt:not(.c-page-header--bild)::before,
  .c-page-header--collage:not(:has(.c-page-header__tile img))::before {
    content: ""; position: absolute; z-index: 0; inset: 0 0 0 50%; pointer-events: none;
    background: var(--pw-muster-wuerfel), var(--pw-papier);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--pw-nacht) 45%);
    mask-image: linear-gradient(90deg, transparent 0, var(--pw-nacht) 45%);
    clip-path: var(--pw-schildkante-clip);
  }
}

/* Saeulen-Kompass (nur Hubs und /konzept/): drei Segmente, aktive Saeule mit Lichtleiste */
.c-page-header__compass-wrap { position: relative; z-index: 1; }
.c-page-header__compass { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--pw-space-48); border-top: 1px solid var(--pw-line-strong); }
.c-page-header__point {
  position: relative; display: flex; align-items: center; gap: var(--pw-space-12); min-height: 56px; padding: var(--pw-space-16) var(--pw-space-8) var(--pw-space-16) 0;
  color: var(--pw-fg-muted); text-decoration: none;
  font-size: var(--pw-fs-small);
}
.c-page-header__point .pw-mark { opacity: 0.4; transition: opacity var(--pw-dur-fast) var(--pw-ease-out); }
.c-page-header__point::before { content: ""; position: absolute; left: 0; right: var(--pw-space-16); top: -2px; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: var(--pw-pillar-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.c-page-header__point:hover { color: var(--pw-heading); }
.c-page-header__point:hover .pw-mark { opacity: 1; }
.c-page-header[data-pillar="versichern"] .c-page-header__point--versichern,
.c-page-header[data-pillar="schuetzen"] .c-page-header__point--schuetzen,
.c-page-header[data-pillar="verteidigen"] .c-page-header__point--verteidigen { color: var(--pw-heading); }
.c-page-header[data-pillar="versichern"] .c-page-header__point--versichern .pw-mark,
.c-page-header[data-pillar="schuetzen"] .c-page-header__point--schuetzen .pw-mark,
.c-page-header[data-pillar="verteidigen"] .c-page-header__point--verteidigen .pw-mark { opacity: 1; }
.c-page-header[data-pillar="versichern"] .c-page-header__point--versichern::before,
.c-page-header[data-pillar="schuetzen"] .c-page-header__point--schuetzen::before,
.c-page-header[data-pillar="verteidigen"] .c-page-header__point--verteidigen::before { transform: scaleX(1); }

/* ---------- Brotkrumen-Zeile unter dem Kopf (Konzept 1.4): weiss, Linie oben, 15 px, aktuelle Seite Navy ---------- */
.c-page-header__crumbs .pw-crumbs { border-top: 1px solid var(--pw-nebel); border-bottom: 0; background: var(--pw-weiss); }
.c-page-header__crumbs .pw-crumbs__list { min-height: var(--pw-crumb-h); padding-block: var(--pw-space-4); font-size: var(--pw-fs-small); color: var(--pw-stahl-dunkel); }
.c-page-header__crumbs .pw-crumbs__current { color: var(--pw-navy); font-weight: var(--pw-fw-semibold); }
.c-page-header__crumbs:not(:has(.pw-crumbs)) { display: none; }

@media (max-width: 767px) {
  .c-page-header { padding-top: var(--pw-space-32); }
  .c-page-header--geteilt.c-page-header--bild { padding-top: 0; }
  .c-page-header__point { flex-direction: column; align-items: flex-start; gap: var(--pw-space-8); font-size: var(--pw-fs-label); letter-spacing: var(--pw-ls-button); }
  .c-page-header__title { font-size: clamp(1.5rem, 5.6vw + 0.2rem, 2.125rem); }
  .c-page-header__actions .pw-btn { width: 100%; min-height: var(--pw-button-h); height: auto; padding-block: var(--pw-space-12); white-space: normal; text-align: center; line-height: var(--pw-lh-label); }
  .c-page-header--geteilt .c-page-header__actions .c-page-header__cta2, .c-page-header--collage .c-page-header__actions .c-page-header__cta2 { width: auto; padding-block: 0; }
  .c-page-header__point { font-stretch: var(--pw-wdth-normal); letter-spacing: 0.02em; }
  .c-page-header__crumbs .pw-crumbs__list { min-height: var(--pw-space-48); }
}

/* sections/pillar_switch.css */
/* pillar_switch: der Dreiklang als Navigation. gross = Seitenende (Markenmoment), kompakt = Leiste am Seitenanfang.
   Jede Saeule mit eigenem Zeichen und eigener Lichtleiste (Tokens in _tokens-pillars.css). */
.c-pillar-switch { position: relative; z-index: 2; }
.c-pillar-switch__title { margin-bottom: var(--pw-head-gap); }
.c-pillar-switch__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pw-line-strong); }
.c-pillar-switch__item { position: relative; border-bottom: 1px solid var(--pw-line); }
.c-pillar-switch__item::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: var(--pw-pillar-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.c-pillar-switch__item.is-current::before, .c-pillar-switch__item:hover::before, .c-pillar-switch__item:focus-within::before { transform: scaleX(1); }
.c-pillar-switch__link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pw-space-8) var(--pw-space-24); align-items: center; padding: var(--pw-space-32) var(--pw-space-24) var(--pw-space-32) 0; color: var(--pw-fg); text-decoration: none; }
.c-pillar-switch__link .pw-mark { grid-row: span 2; }
.c-pillar-switch__label {  /* Label = eines der drei Verben (Versal erlaubt nach A5); Ziel: Klasse .pw-verb im Markup */
  color: var(--pw-heading); font-family: var(--pw-font-display); font-size: var(--pw-fs-h2); font-weight: var(--pw-fw-display);
  font-stretch: var(--pw-wdth-display); letter-spacing: var(--pw-ls-display); line-height: var(--pw-lh-h2);
}
a.c-pillar-switch__link .c-pillar-switch__label { color: var(--pw-fg-muted); transition: color var(--pw-dur-fast) var(--pw-ease-out); }
a.c-pillar-switch__link:hover .c-pillar-switch__label, a.c-pillar-switch__link:focus-visible .c-pillar-switch__label { color: var(--pw-heading); }
.c-pillar-switch__link { position: relative; }
a.c-pillar-switch__link::after { content: "\2192"; position: absolute; right: var(--pw-space-8); top: var(--pw-space-32); color: var(--pw-fg-muted); font-family: var(--pw-font-display); font-size: var(--pw-fs-h3); font-weight: var(--pw-fw-bold); transition: transform var(--pw-dur-fast) var(--pw-ease-out), color var(--pw-dur-fast) var(--pw-ease-out); }
a.c-pillar-switch__link:hover::after { transform: translateX(var(--pw-button-arrow-shift)); color: var(--pw-link); }
.c-pillar-switch__text { grid-column: 2; max-width: 30em; color: var(--pw-fg-muted); font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.c-pillar-switch__here { grid-column: 2; color: var(--pw-link); font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold); }  /* gemischte Schreibung (Regel A5) */

@media (min-width: 1024px) {
  .c-pillar-switch__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; }
  .c-pillar-switch__item { border-bottom: 0; }
  .c-pillar-switch__item + .c-pillar-switch__item { border-left: 1px solid var(--pw-line); }
  .c-pillar-switch__item + .c-pillar-switch__item .c-pillar-switch__link { padding-left: var(--pw-space-32); }
  .c-pillar-switch__link { grid-template-columns: 1fr; align-content: start; gap: var(--pw-space-16); height: 100%; padding-block: var(--pw-space-48) var(--pw-space-16); }
  .c-pillar-switch__link .pw-mark { grid-row: auto; margin-bottom: var(--pw-space-8); }
  .c-pillar-switch__text, .c-pillar-switch__here { grid-column: 1; }
  .c-pillar-switch__label { font-size: clamp(1.75rem, 0.9rem + 1.4vw, 2.5rem); }
  a.c-pillar-switch__link::after { top: var(--pw-space-48); right: var(--pw-space-24); }
}

/* kompakt: schmale Leiste */
.c-pillar-switch--kompakt { padding-block: 0; }
.c-pillar-switch--kompakt .c-pillar-switch__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-pillar-switch--kompakt .c-pillar-switch__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
.c-pillar-switch--kompakt .c-pillar-switch__item { border-bottom: 0; }
.c-pillar-switch--kompakt .c-pillar-switch__item::before { top: auto; bottom: 0; }
.c-pillar-switch--kompakt .c-pillar-switch__link { grid-template-columns: auto 1fr; gap: var(--pw-space-12); padding: var(--pw-space-16) var(--pw-space-8) var(--pw-space-16) 0; }
.c-pillar-switch--kompakt .pw-mark { --pw-mark-size: var(--pw-star-box); --pw-mark-stroke: var(--pw-star-stroke); grid-row: auto; margin: 0; border-radius: var(--pw-radius-2); }
.c-pillar-switch--kompakt .c-pillar-switch__label { font-size: var(--pw-fs-small); letter-spacing: var(--pw-ls-label); }
.c-pillar-switch--kompakt a.c-pillar-switch__link::after { position: static; font-size: var(--pw-fs-small); }
.c-pillar-switch--kompakt .c-pillar-switch__text,.c-pillar-switch--kompakt .c-pillar-switch__here { display: none; }

/* sections/product_navigator.css */
/* product_navigator: Lebenslagen-Kacheln (voll) bzw. Chips (kompakt), Ich-bin-Filterzeile, Suche, Kategorie-Akkordeons, Merken-Stern, Uebergabeleiste.
   Logik in js/navigator.js. Varianten kompakt | voll. Werte nur ueber --pw-* aus tokens.css. Keine Versalien in dieser Sektion.
   Ohne JS ([data-ready="false"]) zeigt die Sektion die Themenliste. */
.c-product-navigator__intro { margin-bottom: 0; }

/* ohne JS: nur Liste; mit JS: nur Navigator */
.c-product-navigator__stage[data-ready="false"] .c-product-navigator__app { display: none; }
.c-product-navigator__stage[data-ready="true"] .c-product-navigator__fallback { display: none; }
.c-product-navigator__fallback-list { margin: var(--pw-space-16) 0 var(--pw-space-24); padding-left: var(--pw-space-24); }
.c-product-navigator__fallback-list li { margin-bottom: var(--pw-space-8); }

/* Formular: Lebenslage oben, darunter eine Zeile mit Ich bin und Suche */
.c-product-navigator__form { display: grid; gap: var(--pw-space-32); margin-bottom: var(--pw-space-8); justify-items: stretch; max-width: 100%; }
.c-product-navigator__form [data-nav-reset] { justify-self: start; min-height: 44px; text-transform: none; letter-spacing: 0; font-size: var(--pw-fs-small); }
.c-product-navigator__group { border: 0; margin: 0; padding: 0; min-width: 0; max-width: 100%; }
.c-product-navigator__group legend, .c-product-navigator__search label {
  display: block; padding: 0; margin-bottom: var(--pw-space-12); font-family: var(--pw-font-display); font-size: var(--pw-fs-body); font-weight: var(--pw-fw-h3);
  letter-spacing: 0; text-transform: none; color: var(--pw-heading);
}
.c-product-navigator__chips { display: flex; flex-wrap: wrap; gap: var(--pw-space-8); max-width: 100%; }
.c-product-navigator__filterrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pw-space-24) var(--pw-space-32); width: 100%; }

/* Chip (Ich bin; in kompakt auch Lebenslage): aria-pressed schaltet; aktiv = Navy-Flaeche mit Lichtleiste unten */
.c-product-navigator__chip {
  position: relative; min-height: 44px; padding: 0 var(--pw-space-16); border: 1.5px solid var(--pw-line-strong); border-radius: var(--pw-radius-6);
  background: var(--pw-weiss); color: var(--pw-tinte); font: inherit; font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold); cursor: pointer; overflow: hidden;
  transition: background var(--pw-dur-fast) var(--pw-ease-out), border-color var(--pw-dur-fast) var(--pw-ease-out), color var(--pw-dur-fast) var(--pw-ease-out);
}
.c-product-navigator__chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.c-product-navigator__chip:hover { border-color: var(--pw-navy); }
.c-product-navigator__chip[aria-pressed="true"] { background: var(--pw-navy); border-color: var(--pw-navy); color: var(--pw-weiss); }
.c-product-navigator__chip[aria-pressed="true"]::after { transform: scaleX(1); }

/* Suche: klein, rechts in der Filterzeile */
.c-product-navigator__search { width: min(100%, 17rem); }
.c-product-navigator__search label { margin-bottom: var(--pw-space-8); font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold); }
.c-product-navigator__search input { width: 100%; min-height: 44px; padding: 0 var(--pw-space-16); border: 1.5px solid var(--pw-line-strong); border-radius: var(--pw-radius-field); background: var(--pw-weiss); color: var(--pw-tinte); font: inherit; font-size: var(--pw-fs-small); }
.c-product-navigator--kompakt .c-product-navigator__search { width: min(100%, 22rem); }

.c-product-navigator__chip:focus-visible, .c-product-navigator__tile:focus-visible, .c-product-navigator__search input:focus-visible, .c-product-navigator__keep:focus-visible, .c-product-navigator__acc summary:focus-visible, .c-product-navigator .pw-btn:focus-visible {
  outline: var(--pw-focus-width) solid var(--pw-focus); outline-offset: var(--pw-focus-offset);
}

/* Lebenslagen als Bildkacheln (voll): 3 x 3, mobil 2 Spalten, Kachel 4:3, Titel unter dem Bild */
.c-product-navigator__chips.c-product-navigator__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-space-24) var(--pw-fuge); width: 100%; }
.c-product-navigator__tile {
  display: flex; flex-direction: column; gap: var(--pw-space-12); min-width: 0; padding: 0; border: 0; background: transparent; color: var(--pw-heading); font: inherit; text-align: left; cursor: pointer;
}
.c-product-navigator__tile-media {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--pw-radius-card); background: var(--pw-nebel); box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--pw-dur-base) var(--pw-ease-out), transform var(--pw-dur-base) var(--pw-ease-out);
}
.c-product-navigator__tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fallback ohne Bild: ruhige helle Flaeche ohne Zeichen (keine Quadrate in Serie) */
.c-product-navigator__tile-media[data-fallback] { background: var(--pw-nebel); }
/* Lichtleiste unter dem Bild */
.c-product-navigator__tile-media i, .c-product-navigator__tile-title { font-style: normal; }
.c-product-navigator__tile-title { position: relative; font-family: var(--pw-font-display); font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); font-weight: var(--pw-fw-h3); padding-bottom: var(--pw-space-8); }
.c-product-navigator__tile-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: var(--pw-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.c-product-navigator__tile:hover .c-product-navigator__tile-media { transform: translateY(-2px); }
.c-product-navigator__tile[aria-pressed="true"] .c-product-navigator__tile-media { box-shadow: 0 0 0 3px var(--pw-navy); }
.c-product-navigator__tile[aria-pressed="true"] .c-product-navigator__tile-title::after { transform: scaleX(1); }

.c-product-navigator__status { min-height: 1.5em; margin: var(--pw-space-32) 0 var(--pw-space-16); color: var(--pw-fg-muted); font-size: var(--pw-fs-small); }

/* Ergebnisse: Gruppen, Karten */
.c-product-navigator__groups { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-48); }
.c-product-navigator--voll .c-product-navigator__groups { gap: 0; border-top: 1px solid var(--pw-line-strong); }
.c-product-navigator__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-fuge); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.c-product-navigator__cat-title { display: flex; align-items: center; gap: var(--pw-space-12); margin: 0 0 var(--pw-space-16); padding-bottom: var(--pw-space-8); border-bottom: 1px solid var(--pw-line-strong); font-family: var(--pw-font-display); font-size: var(--pw-fs-h3); line-height: var(--pw-lh-h3, 1.25); font-weight: var(--pw-fw-h3); letter-spacing: 0; text-transform: none; color: var(--pw-navy); }

/* Akkordeon (voll): details, Titel H3, Anzahl, Pfeil */
.c-product-navigator__acc { border-bottom: 1px solid var(--pw-line-strong); }
.c-product-navigator__acc summary { display: flex; align-items: center; gap: var(--pw-space-16); min-height: 64px; cursor: pointer; list-style: none; }
.c-product-navigator__acc summary::-webkit-details-marker { display: none; }
.c-product-navigator__acc .c-product-navigator__cat-title { flex: 1; margin: 0; padding: 0; border: 0; }
.c-product-navigator__acc summary:hover .c-product-navigator__cat-title { color: var(--pw-navy-hover); }
.c-product-navigator__count { min-width: 2rem; padding: 2px var(--pw-space-8); border-radius: var(--pw-radius-2); background: var(--pw-nebel); color: var(--pw-navy); font-size: var(--pw-fs-small); font-weight: var(--pw-fw-bold); text-align: center; }
.c-product-navigator__chev { flex: none; width: 10px; height: 10px; margin: 0 var(--pw-space-8) 4px 0; border-right: 2px solid var(--pw-navy); border-bottom: 2px solid var(--pw-navy); transform: rotate(45deg); transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.c-product-navigator__acc[open] .c-product-navigator__chev { transform: rotate(-135deg); margin-bottom: -4px; }
.c-product-navigator__acc[open] > .c-product-navigator__grid { padding: var(--pw-space-8) 0 var(--pw-space-32); }

.c-product-navigator__card {
  position: relative; display: flex; flex-direction: column; gap: var(--pw-space-8); min-width: 0; padding: var(--pw-space-24) var(--pw-space-24) var(--pw-space-24); padding-right: calc(var(--pw-space-24) + 44px); border: 1px solid var(--pw-nebel); border-radius: var(--pw-radius-card);
  background: var(--pw-weiss); color: var(--pw-tinte); box-shadow: var(--pw-shadow-1);
}
.c-product-navigator__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-card) var(--pw-radius-card) 0 0; background: var(--pw-line-strong); }
.c-product-navigator__card-title { margin: 0; font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); color: var(--pw-navy); overflow-wrap: normal; word-break: normal; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
.c-product-navigator__card-text { flex: 1; margin: 0; font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }

/* Prioritaet nur bei gewaehlter Lebenslage: gefuellter Stern = wichtig, Kontur = sinnvoll. Kein Rot. */
.c-product-navigator__prio { display: inline-flex; align-items: center; gap: var(--pw-space-8); margin: 0; font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold); color: var(--pw-navy); }
.c-product-navigator__prio svg { width: 16px; height: 16px; fill: none; stroke: var(--pw-navy); stroke-width: 1.6; stroke-linejoin: round; }
.c-product-navigator__prio[data-prio="wichtig"] svg { fill: var(--pw-navy); }

/* Merken: Stern-Button, 44 px, oben rechts */
.c-product-navigator__keep { position: absolute; top: var(--pw-space-12); right: var(--pw-space-12); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--pw-radius-6); background: transparent; color: var(--pw-navy); cursor: pointer; transition: background var(--pw-dur-fast) var(--pw-ease-out); }
.c-product-navigator__keep:hover { background: var(--pw-nebel); }
.c-product-navigator__keep svg { width: 24px; height: 24px; fill: none; stroke: var(--pw-navy); stroke-width: 1.6; stroke-linejoin: round; transition: fill var(--pw-dur-fast) var(--pw-ease-out), transform var(--pw-dur-fast) var(--pw-ease-out); }
.c-product-navigator__keep[aria-pressed="true"] svg { fill: var(--pw-navy); transform: scale(1.1); }

.c-product-navigator__more { margin: var(--pw-space-32) 0 0; }
.c-product-navigator__note { margin: var(--pw-space-32) 0 0; font-size: var(--pw-fs-small); color: var(--pw-fg-muted); }
.c-product-navigator__bar {
  position: sticky; bottom: var(--pw-space-16); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pw-space-12) var(--pw-space-24);
  margin-top: var(--pw-space-32); padding: var(--pw-space-16) var(--pw-space-24); border-radius: var(--pw-radius-card); background: var(--pw-nacht); color: var(--pw-weiss);
  box-shadow: var(--pw-shadow-2); font-weight: var(--pw-fw-semibold);
  --pw-action-bg: var(--pw-signal); --pw-action-fg: var(--pw-nacht); --pw-action-hover: var(--pw-signal-hell); --pw-focus: var(--pw-signal);
}
.c-product-navigator [hidden] { display: none !important; }

@media (max-width: 767px) {
  .c-product-navigator__chips.c-product-navigator__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-16); }
  .c-product-navigator__tile-title { font-size: var(--pw-fs-body); }
  .c-product-navigator__search { width: 100%; }
  .c-product-navigator__bar { bottom: calc(var(--pw-space-16) + 72px); }
  .c-product-navigator__bar .pw-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-product-navigator__chip::after, .c-product-navigator__tile-media, .c-product-navigator__tile-title::after, .c-product-navigator__chev, .c-product-navigator__keep svg { transition: none; }
  .c-product-navigator__tile:hover .c-product-navigator__tile-media { transform: none; }
}

/* sections/provenexpert.css */
/* provenexpert: helle Karte. Lokale Leiste = Fallback (ohne JS bzw. waehrend das Widget laedt), Widget (style=white) kommt aus js/provenexpert.js */
/* ground nacht ist hier nicht vorgesehen: Sektion liegt auf papier, Rollen zurueck auf hell */
.c-provenexpert.is-nacht {
  --pw-fg: var(--pw-tinte); --pw-fg-muted: var(--pw-stahl-dunkel); --pw-heading: var(--pw-navy); --pw-link: var(--pw-blau); --pw-link-hover: var(--pw-blau-hover);
  --pw-line: var(--pw-nebel); --pw-line-strong: var(--pw-silber); --pw-star: var(--pw-navy); --pw-focus: var(--pw-blau);
  background-color: var(--pw-papier); background-image: var(--pw-muster-wuerfel); color: var(--pw-fg);
}
.c-provenexpert__card { background: var(--pw-weiss); color: var(--pw-fg); border: 1px solid var(--pw-line-strong); border-radius: var(--pw-radius-card); padding: var(--pw-space-24); max-width: 62rem; margin-inline: auto; min-height: 14.4rem; display: flex; flex-direction: column; justify-content: center; }
.c-provenexpert__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-12) var(--pw-space-32); }
.c-provenexpert__bar p { margin: 0; }
.c-provenexpert__brand { font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); font-size: var(--pw-fs-h4); letter-spacing: var(--pw-ls-label); color: var(--pw-heading); }
.c-provenexpert__stars { display: inline-flex; gap: var(--pw-space-4); }
.c-provenexpert__star { width: var(--pw-star-box); height: var(--pw-star-box); background: var(--pw-star); -webkit-mask: var(--pw-star-shape) center / contain no-repeat; mask: var(--pw-star-shape) center / contain no-repeat; transform: scale(1.4); }
.c-provenexpert__score strong { font-size: var(--pw-fs-h3); font-weight: var(--pw-fw-bold); color: var(--pw-heading); }
.c-provenexpert__count, .c-provenexpert__stand { color: var(--pw-fg-muted); font-size: var(--pw-fs-small); }
.c-provenexpert__link { margin-left: auto !important; }
.c-provenexpert__link a { color: var(--pw-link); }
.c-provenexpert__link a:hover { color: var(--pw-link-hover); }
.c-provenexpert__widget:empty { display: none; }
/* Widget geladen: lokale Leiste weicht, Karte wird zur Huelle des Widgets (dessen eigener Rahmen zaehlt) */
.c-provenexpert.is-live .c-provenexpert__bar { display: none; }
.c-provenexpert.is-live .c-provenexpert__card { background: transparent; border: 0; padding: 0; min-height: 0; }
.c-provenexpert .pewl { margin-inline: auto; border-radius: var(--pw-radius-card); }
/* kompakt: schmale Leiste, kein Kopf; die Huelle reserviert nur die Leistenhoehe, das Widget darf sie ueberschreiten */
.c-provenexpert--kompakt { padding-block: var(--pw-space-24); }
.c-provenexpert--kompakt .c-provenexpert__card { padding: var(--pw-space-16) var(--pw-space-24); min-height: 14.4rem; }
.c-provenexpert--kompakt .c-provenexpert__brand { font-size: var(--pw-fs-body); }
.c-provenexpert--kompakt .c-provenexpert__score strong { font-size: var(--pw-fs-lead); }
@media (max-width: 767px) {
  .c-provenexpert__link { margin-left: 0 !important; }
  .c-provenexpert__bar { gap: var(--pw-space-8) var(--pw-space-24); }
  .c-provenexpert__card { min-height: 13.3rem; }
  .c-provenexpert--kompakt .c-provenexpert__card { min-height: 13.3rem; }
}

/* sections/quote.css */
/* quote: Zitatband, Varianten zentriert | links */
.c-quote__figure { max-width: 50rem; margin-inline: auto; }
.c-quote__text p { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); line-height: 1.4; font-weight: 500; }
.c-quote__by { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--pw-space-8); margin-top: var(--pw-space-16); }
.c-quote__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.c-quote__name { font-weight: 600; }
.c-quote--zentriert .c-quote__figure { text-align: center; }
.c-quote--zentriert .c-quote__by { justify-content: center; }
.c-quote--links .c-quote__figure { margin-inline: 0; }

/* sections/related.css */
/* related: verwandte Produkte als kompakte Karten (ganze Karte klickbar). Beendet den Lesefluss neben toc. */
.c-related { position: relative; z-index: 2; }
.c-related__head { display: flex; flex-wrap: wrap; gap: var(--pw-space-16) var(--pw-space-32); align-items: baseline; justify-content: space-between; margin-bottom: var(--pw-head-gap); }
.c-related__title { margin: 0; }
.c-related__all { margin: 0; }
.c-related__all a { font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); }
.c-related__all a::after { content: " \2192"; }
.c-related__list { display: grid; gap: var(--pw-fuge); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.c-related__card { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--pw-space-12); height: 100%; text-decoration: none; }
.c-related__card::before { background: var(--pw-pillar-lichtleiste); }
.c-related__item-title { margin: var(--pw-space-8) 0 0; hyphens: auto; overflow-wrap: break-word; font-size: var(--pw-fs-h4); line-height: var(--pw-lh-h4); }
.c-related__item-text { margin: 0; color: var(--pw-stahl-dunkel); font-size: var(--pw-fs-small); line-height: var(--pw-lh-small); }
.c-related__arrow::before { content: "\2192"; display: inline-block; color: var(--pw-blau); font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
.c-related__card:hover .c-related__arrow::before { transform: translateX(var(--pw-button-arrow-shift)); }
.c-related__card:hover .c-related__item-title { color: var(--pw-blau); }
.c-related__item-title { overflow-wrap: anywhere; }

/* sections/steps.css */
/* steps: Ablauf, Varianten horizontal | vertikal; vertikal mit image zweispaltig (Liste links, Bild rechts mitlaufend) */
.c-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-24); }
.c-steps__item { position: relative; }
.c-steps__number { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--pw-space-8); border-radius: 50%; background: var(--pw-action-bg); color: var(--pw-weiss); font-weight: 700; }
.is-nacht .c-steps__number { background: var(--pw-weiss); color: var(--pw-nacht); }
.c-steps__item-title { margin-bottom: var(--pw-space-8); hyphens: auto; }
.c-steps__item-text { margin: 0; color: var(--pw-fg-muted); max-width: var(--pw-measure); font-size: var(--pw-fs-body); line-height: var(--pw-lh-body); }
.is-nacht .c-steps__item-text { color: var(--pw-nebel); }
.c-steps__item-link { margin: var(--pw-space-8) 0 0; font-weight: var(--pw-fw-semibold); }

/* Bild je Schritt (optional): Querformat ueber dem Titel */
.c-steps__item-media { margin: 0 0 var(--pw-space-16); max-width: 24rem; }
.c-steps__item-media img { display: block; height: var(--pw-kachel-bild-h); }

/* Bild der Sektion (nur vertikal) */
.c-steps__media { margin: var(--pw-space-32) 0 0; }
.c-steps__media img { display: block; height: var(--pw-kachel-bild-h-gross); }
.c-steps--horizontal .c-steps__media { display: none; }
@media (max-width: 1023px) { .c-steps__media { display: none; } }  /* Ausgleichsbild nur zweispaltig; mobil Seitenhoehe sparen */

@media (min-width: 768px) {
  .c-steps--horizontal .c-steps__list { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .c-steps--vertikal .c-steps__list { max-width: 46rem; gap: var(--pw-space-32); }
  .c-steps--vertikal .c-steps__item { padding-left: 3.5rem; }
  .c-steps--vertikal .c-steps__number { position: absolute; left: 0; top: 0; }
}

@media (min-width: 1024px) {
  /* vertikal mit Bild: zwei ausgeglichene Spalten, Bild laeuft beim Lesen mit */
  .c-steps--vertikal.c-steps--mit-bild .c-steps__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pw-space-64); align-items: start; }
  .c-steps--vertikal.c-steps--mit-bild .c-steps__list { max-width: none; }
  .c-steps--vertikal.c-steps--mit-bild .c-steps__media { position: sticky; top: calc(var(--pw-header-kompakt) + var(--pw-space-32)); margin: 0; }
  .c-steps--vertikal.c-steps--mit-bild .c-steps__media img { height: auto; min-height: var(--pw-kachel-bild-h-gross); max-height: calc(100vh - var(--pw-header-kompakt) - var(--pw-space-64)); }
}

/* sections/team.css */
/* team */
.c-team__list { list-style: none; margin: 0; padding: 0; }
.c-team__media img { aspect-ratio: 1 / 1; max-width: 16rem; }
.c-team__name { margin: var(--pw-space-8) 0 0; }
.c-team__role { margin-bottom: var(--pw-space-8); }
.c-team__text { color: var(--pw-fg-muted); }
.c-team__line { margin-bottom: 0.25rem; }
.c-team__line a { display: inline-block; padding-block: 0.5rem; }

/* sections/teaser_duo.css */
/* teaser_duo: zwei grosse Bildteaser unter dem Startseiten-Hero. Bild fuellt die Kachel, Text unten auf Nacht-Verlauf,
   ganze Kachel ueber den Titel-Link klickbar. Optionale Callouts im Sternkaestchen-Stil auf dem Bild. */
.c-teaser-duo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-fuge); }
.c-teaser-duo__item {
  --pw-fg: var(--pw-weiss); --pw-heading: var(--pw-weiss);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(440px, 62vw, 600px);
  overflow: hidden; border-radius: var(--pw-radius-media); background: var(--pw-nacht); color: var(--pw-weiss); box-shadow: var(--pw-shadow-2);
}
.c-teaser-duo__media { position: absolute; inset: 0; margin: 0; }
.c-teaser-duo__media img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: var(--fokus, 50% 50%); transition: transform 1200ms var(--pw-ease-out); }
.c-teaser-duo__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--pw-nacht) 0%, color-mix(in srgb, var(--pw-nacht) 82%, transparent) 30%, color-mix(in srgb, var(--pw-nacht) 0%, transparent) 62%);
}
.c-teaser-duo__body { position: relative; z-index: 1; padding: var(--pw-card-pad); }
.c-teaser-duo__title {
  margin: 0 0 var(--pw-space-8); color: var(--pw-weiss);
  font-size: var(--pw-fs-h2); line-height: var(--pw-lh-h2); letter-spacing: var(--pw-ls-h2);
}
.c-teaser-duo__link { color: inherit; text-decoration: none; }
.c-teaser-duo__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.c-teaser-duo__link:focus-visible { outline: none; }
.c-teaser-duo__item:has(.c-teaser-duo__link:focus-visible) { outline: var(--pw-focus-width) solid var(--pw-blau); outline-offset: var(--pw-focus-offset); }
.c-teaser-duo__text { margin: 0 0 var(--pw-space-16); max-width: 32rem; color: var(--pw-nebel); }
.c-teaser-duo__more {
  display: inline-flex; align-items: center; gap: var(--pw-space-8); margin: 0; color: var(--pw-signal);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-button); font-weight: var(--pw-fw-bold); letter-spacing: normal; text-transform: none;
}
.c-teaser-duo__more::after { content: "\2192"; transition: transform var(--pw-dur-fast) var(--pw-ease-out); }
.c-teaser-duo__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out); }
.c-teaser-duo__item:hover::before { transform: scaleX(1); }
.c-teaser-duo__item:hover .c-teaser-duo__more { color: var(--pw-signal-hell); }
.c-teaser-duo__item:hover .c-teaser-duo__more::after { transform: translateX(var(--pw-button-arrow-shift)); }
@media (prefers-reduced-motion: no-preference) {
  .c-teaser-duo__item:hover .c-teaser-duo__media img { transform: scale(1.04); }
}

/* Callouts: Sternkaestchen mit Begriff, ueber dem Bild verteilt */
.c-teaser-duo__callouts { position: absolute; z-index: 1; left: var(--pw-card-pad); right: calc(var(--pw-card-pad) + var(--pw-space-48)); top: var(--pw-card-pad); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pw-space-8); }
.c-teaser-duo__callout {
  display: inline-flex; align-items: center; gap: var(--pw-space-8); padding: var(--pw-space-4) var(--pw-space-12) var(--pw-space-4) var(--pw-space-8);
  border: 1px solid var(--pw-badge-line); border-radius: var(--pw-radius-2); background: var(--pw-badge-bg); color: var(--pw-weiss);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: normal; text-transform: none; line-height: var(--pw-lh-label);
}
.c-teaser-duo__star { position: relative; flex: none; width: 16px; height: 16px; border: var(--pw-star-stroke) solid var(--pw-signal); border-radius: var(--pw-radius-2); color: var(--pw-signal); }
.c-teaser-duo__star::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.c-teaser-duo__media .pw-ai-badge { top: var(--pw-card-pad); bottom: auto; right: var(--pw-card-pad); }

@media (min-width: 1024px) {
  .c-teaser-duo__list { grid-template-columns: 1fr 1fr; gap: var(--pw-space-32); }
  .c-teaser-duo__item { min-height: 600px; }
  .c-teaser-duo__body { padding: var(--pw-space-48); }
  .c-teaser-duo__callouts { left: var(--pw-space-48); right: calc(var(--pw-space-48) + var(--pw-space-48)); top: var(--pw-space-48); flex-direction: column; align-items: flex-start; }
  .c-teaser-duo__media .pw-ai-badge { top: var(--pw-space-48); right: var(--pw-space-48); }
}

/* sections/teaser_grid.css */
/* teaser_grid: Bildkacheln, ganze Kachel ueber den Titel-Link klickbar */
.c-teaser-grid__list { list-style: none; margin: 0; padding: 0; }
.c-teaser-grid__item { position: relative; display: flex; flex-direction: column; gap: var(--pw-space-8); }
.c-teaser-grid__media img { aspect-ratio: 3 / 2; }
.c-teaser-grid__item-title { margin: var(--pw-space-8) 0 0; }
.c-teaser-grid__link { color: var(--pw-fg); text-decoration: none; }
.c-teaser-grid__link::after { content: ""; position: absolute; inset: 0; }
.c-teaser-grid__item:hover .c-teaser-grid__link { color: var(--pw-action-bg); text-decoration: underline; }
.is-nacht .c-teaser-grid__link { color: var(--pw-weiss); }
.c-teaser-grid__item-text { margin: 0; color: var(--pw-fg-muted); }
.c-teaser-grid__more { margin: 0; font-weight: 600; color: var(--pw-action-bg); }

/* sections/testimonials.css */
/* testimonials: Varianten raster | einzeln */
.c-testimonials__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-24); }
.c-testimonials__figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.c-testimonials__quote p { font-size: 1.125rem; }
.c-testimonials__by { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--pw-space-8); }
.c-testimonials__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.c-testimonials__name { font-weight: 600; }
@media (min-width: 768px) {
  .c-testimonials--raster .c-testimonials__list { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .c-testimonials--einzeln .c-testimonials__list { max-width: 46rem; }
}

/* film: Kundenstimmen als Film-Poster mit Play-Hinweis (Video folgt, bis dahin nur Standbild) */
.c-testimonials--film .c-testimonials__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.c-testimonials--film .c-testimonials__item { padding: 0; overflow: hidden; container-type: inline-size; }
.c-testimonials--film .c-testimonials__figure { gap: var(--pw-space-8); padding-bottom: var(--pw-card-pad); }
.c-testimonials--film .c-testimonials__by { display: contents; }
.c-testimonials--film .c-testimonials__avatar { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; object-fit: cover; object-position: 60% 30%; margin-bottom: var(--pw-space-16); }
.c-testimonials--film .c-testimonials__name { order: -1; padding-inline: var(--pw-card-pad); font-family: var(--pw-font-display); font-size: var(--pw-fs-h4); font-weight: var(--pw-fw-bold); color: var(--pw-navy); }
.c-testimonials--film .c-testimonials__role { order: -1; padding-inline: var(--pw-card-pad); font-size: var(--pw-fs-small); }
.c-testimonials--film .c-testimonials__quote { padding-inline: var(--pw-card-pad); margin-top: var(--pw-space-8); }
.c-testimonials--film .c-testimonials__quote p { margin: 0; font-size: var(--pw-fs-body); color: var(--pw-stahl-dunkel); }
.c-testimonials--film .c-testimonials__item::after {
  content: ""; position: absolute; left: 50%; top: 37.5cqw; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; background: color-mix(in srgb, var(--pw-nacht) 78%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pw-weiss) 70%, transparent);
  -webkit-mask: none; pointer-events: none;
}
.c-testimonials--film .c-testimonials__item .c-testimonials__figure::after {
  content: ""; position: absolute; left: 50%; top: 37.5cqw; width: 18px; height: 22px; transform: translate(-35%, -50%); z-index: 1;
  background: var(--pw-weiss); clip-path: polygon(0 0, 100% 50%, 0 100%); pointer-events: none;
}

/* sections/text.css */
/* text: Varianten schmal | breit | zweispaltig */
.c-text--schmal .l-container > * { max-width: 46rem; }
.c-text--breit .c-text__body { max-width: 60rem; }
@media (min-width: 768px) {
  .c-text--zweispaltig .c-text__body { columns: 2; column-gap: var(--pw-space-48); }
  .c-text--zweispaltig .c-text__body > * { break-inside: avoid-column; }
}

/* sections/text_image.css */
/* text_image: Varianten bild-rechts | bild-links | bild-oben. Ohne Bild: Ueberschrift links, Text rechts (QA-Schleife 1, Befund 19). */
.c-text-image__inner { display: grid; gap: var(--pw-space-48); align-items: center; }
.c-text-image--bild-oben .c-text-image__media { order: -1; }
@media (min-width: 1024px) {
  .c-text-image--bild-rechts .c-text-image__inner:has(.c-text-image__media),
  .c-text-image--bild-links .c-text-image__inner:has(.c-text-image__media) { grid-template-columns: 1fr 1fr; }
  .c-text-image--bild-links .c-text-image__media { order: -1; }
  .c-text-image--bild-oben .c-text-image__copy { max-width: 46rem; }
}

/* ohne Bild: keine leere Haelfte. Ab 1024 px redaktionelle Zweiteilung 5 : 7, Ueberschrift mit Lichtleiste der Saeule links */
.c-text-image__inner:not(:has(.c-text-image__media)) .c-text-image__title { hyphens: manual; overflow-wrap: break-word; }
@media (min-width: 1024px) {
  .c-text-image__inner:not(:has(.c-text-image__media)) .c-text-image__copy {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--pw-space-96); align-items: start;
  }
  .c-text-image__inner:not(:has(.c-text-image__media)) .c-text-image__title { grid-column: 1; grid-row: 1 / span 2; margin: 0; text-wrap: balance; }
  .c-text-image__inner:not(:has(.c-text-image__media)) .c-text-image__title::after { content: ""; display: block; width: calc(var(--pw-space-48) + var(--pw-space-8)); height: var(--pw-lichtleiste-hoehe); margin-top: var(--pw-space-24); border-radius: var(--pw-radius-2); background: var(--pw-pillar-lichtleiste); }
  .c-text-image__inner:not(:has(.c-text-image__media)) .c-text-image__copy > :not(.c-text-image__title) { grid-column: 2; }
}

/* sections/toc.css */
/* toc: Sprungmarken langer Seiten. Varianten leiste (Standard) | karte (alt, nicht mehr verwendet).
   leiste: eine Zeile Textlinks direkt unter den Brotkrumen, Linie unten in Silber, aktiver Anker mit Lichtleiste 3 px unten;
   ab 1024 px sticky unter der kompakten Hauptleiste; mobil horizontal scrollbar mit Verlauf am rechten Rand, Ziele 44 px.
   karte: unter 1200 px Linkliste als Karte im Fluss, ab 1200 px sticky links neben dem Lesefluss. */
.c-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; scroll-target-group: auto; }
.c-toc__contact { display: none; }

/* ---------- leiste ---------- */
.c-toc--leiste { position: relative; z-index: 3; background: var(--pw-weiss); border-bottom: 1px solid var(--pw-silber); }
.c-toc--leiste .c-toc__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.c-toc--leiste .c-toc__frame { padding-inline: 0; }
.c-toc--leiste .c-toc__list {
  display: flex; gap: var(--pw-space-32); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-inline: var(--pw-page-margin);
  -webkit-mask-image: linear-gradient(90deg, var(--pw-nacht) 0, var(--pw-nacht) calc(100% - var(--pw-space-48)), transparent 100%);
  mask-image: linear-gradient(90deg, var(--pw-nacht) 0, var(--pw-nacht) calc(100% - var(--pw-space-48)), transparent 100%);
}
.c-toc--leiste .c-toc__list::-webkit-scrollbar { display: none; }
.c-toc--leiste .c-toc__item { flex: none; margin: 0; }
.c-toc--leiste .c-toc__item:nth-child(n+6) { display: none; }
.c-toc--leiste .c-toc__link {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--pw-anker-h); min-width: var(--pw-touch); white-space: nowrap;
  color: var(--pw-navy); text-decoration: none;
  font-family: var(--pw-font-display); font-size: var(--pw-fs-anker, 1rem); font-weight: var(--pw-fw-semibold); letter-spacing: var(--pw-ls-label);
  transition: color var(--pw-dur-fast) var(--pw-ease-out);
}
.c-toc--leiste .c-toc__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2);
  background: var(--pw-pillar-lichtleiste); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-dur-slow) var(--pw-ease-out);
}
.c-toc--leiste .c-toc__link:hover { color: var(--pw-blau); }
.c-toc--leiste .c-toc__link:hover::after { transform: scaleX(0.4); }
.c-toc--leiste .c-toc__link:target-current { color: var(--pw-navy); }
.c-toc--leiste .c-toc__link:target-current::after { transform: scaleX(1); }
.c-toc--leiste .c-toc__link:focus-visible { outline-offset: -2px; }
/* Sprungziele nicht unter Hauptleiste und Ankerleiste verstecken */
.c-toc--leiste ~ [id] { scroll-margin-top: calc(var(--pw-anker-top) + var(--pw-anker-h) + var(--pw-space-16)); }
@media (min-width: 1024px) {
  .c-toc--leiste { position: sticky; top: var(--pw-anker-top); }
  .c-toc--leiste .c-toc__frame { padding-inline: var(--pw-page-margin); }
  .c-toc--leiste .c-toc__list { gap: calc(var(--pw-space-32) + var(--pw-space-8)); padding-inline: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- karte (alt) ---------- */
.c-toc--karte { padding-block: var(--pw-space-32) 0; background: var(--pw-weiss); }
.c-toc--karte .c-toc__panel { padding: var(--pw-space-24); border: 1px solid var(--pw-nebel); border-radius: var(--pw-radius-card); background: var(--pw-weiss); color: var(--pw-tinte); }
.c-toc--karte .c-toc__title { margin: 0 0 var(--pw-space-12); color: var(--pw-stahl-dunkel); font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); line-height: var(--pw-lh-label); }
.c-toc--karte .c-toc__item { counter-increment: toc; }
.c-toc--karte .c-toc__link {
  position: relative; display: flex; gap: var(--pw-space-12); align-items: baseline; min-height: 44px; padding: var(--pw-space-8) 0 var(--pw-space-8) var(--pw-space-16);
  border-left: 2px solid var(--pw-nebel); color: var(--pw-tinte); text-decoration: none; font-size: var(--pw-fs-small); line-height: var(--pw-lh-small);
  transition: color var(--pw-dur-fast) var(--pw-ease-out), border-color var(--pw-dur-fast) var(--pw-ease-out);
}
.c-toc--karte .c-toc__link::before { content: counter(toc, decimal-leading-zero); flex: none; color: var(--pw-stahl-dunkel); font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); font-variant-numeric: tabular-nums; }
.c-toc--karte .c-toc__link:hover { color: var(--pw-blau); border-left-color: var(--pw-blau); }
.c-toc--karte .c-toc__link:target-current { color: var(--pw-navy); font-weight: var(--pw-fw-semibold); border-image: var(--pw-pillar-lichtleiste) 1; border-image-width: 0 0 0 3px; }

@media (min-width: 768px) and (max-width: 1199px) {
  .c-toc--karte .c-toc__list { columns: 2; column-gap: var(--pw-space-32); }
  .c-toc--karte .c-toc__item { break-inside: avoid; }
}

@media (min-width: 1200px) {
  .c-toc--karte { position: sticky; top: var(--pw-toc-top); z-index: 1; height: 0; padding: 0; background: none; }
  .c-toc--karte .c-toc__frame { position: relative; }
  .c-toc--karte .c-toc__panel { position: absolute; top: var(--pw-space-48); left: var(--pw-page-margin); width: var(--pw-toc-col); box-shadow: var(--pw-shadow-1); }
  .c-toc--karte .c-toc__contact { display: block; margin-top: var(--pw-space-24); padding-top: var(--pw-space-24); border-top: 1px solid var(--pw-nebel); }
  .c-toc--karte .c-toc__contact-label { margin: 0 0 var(--pw-space-4); color: var(--pw-stahl-dunkel); font-size: var(--pw-fs-small); }
  .c-toc--karte .c-toc__phone { margin: 0 0 var(--pw-space-16); }
  .c-toc--karte .c-toc__phone a { color: var(--pw-navy); font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); text-decoration: none; }
  .c-toc--karte .c-toc__phone a:hover { color: var(--pw-blau); text-decoration: underline; }
  .c-toc--karte .c-toc__cta { margin: 0; }
  .c-toc--karte .c-toc__cta .pw-btn { width: 100%; padding-inline: var(--pw-space-16); font-size: var(--pw-fs-label); }

  /* Lesefluss rueckt rechts neben die Karte */
  .c-toc--karte ~ .l-section:not(.c-related, .c-related ~ *, .c-pillar-switch, .c-pillar-switch ~ *, .c-contact-card--gross, .c-contact-card--gross ~ *) > .l-container {
    padding-left: calc(var(--pw-page-margin) + var(--pw-toc-col) + var(--pw-toc-gap));
  }
}

/* Lesefluss: Fliesstext langer Seiten auf 65 bis 75 Zeichen begrenzen (spaeter global in text.css) */
.c-toc ~ .c-text .c-text__body > * { max-width: var(--pw-prose-measure); }

/* pages/onepager.css */
/* pages/onepager.css: Scroll-Geschichte "Versichern. Schuetzen. Verteidigen." (Sektionstyp onepager).
   Ausnahme laut design-steuerung.md (css/pages nur fuer den One-Pager). Werte nur ueber --pw-* aus tokens.css.
   Ebenen: Akt-Flaechen (is-nacht | is-papier | is-weiss) unten, darueber die 3D-Buehne (sticky, transparent),
   darueber Text und Bilder, ganz oben die seitliche Akt-Leiste. Kein eigener Kopf, Header und Footer kommen vom Layout. */
/* Stand 14.10.2026 (Alexander): die Geschichte ist komplett hell, Akte im Wechsel papier/weiss, keine Bilder. Die Szene folgt
   dem Grund je Akt (js/onepager.js liest data-ground). Regeln fuer is-nacht bleiben nur als lesbarer Rueckfall fuer das CMS. */

/* Lenis (sanftes Scrollen) verträgt kein scroll-behavior: smooth aus base.css */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.c-onepager { position: relative; }

/* ---------- 3D-Buehne ---------- */
.c-onepager__buehne { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c-onepager__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.c-onepager__canvas { display: block; width: 100%; height: 100%; }
.c-onepager__fallback { display: none; position: absolute; top: 50%; right: 12%; width: min(30vw, 320px); height: auto; transform: translateY(-40%); }
.c-onepager__fallback-schild { fill: var(--pw-navy); stroke: var(--pw-silber); stroke-width: 4; }
.c-onepager__fallback-stern { fill: var(--pw-weiss); }
.c-onepager.ohne-webgl .c-onepager__canvas { display: none; }
.c-onepager.ohne-webgl .c-onepager__fallback { display: block; }

/* ---------- Seitliche Akt-Leiste (dezent, rechts, ab 768 px) ---------- */
.c-onepager__schiene { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.c-onepager__fortschritt {
  position: sticky; top: 50vh; float: right; margin-right: var(--pw-space-12); transform: translateY(-50%);
  pointer-events: auto; padding: var(--pw-space-12) var(--pw-space-8);
  background: var(--pw-weiss); border: 1px solid var(--pw-nebel); border-radius: var(--pw-radius-10); box-shadow: var(--pw-shadow-1);
  --rail-fg: var(--pw-stahl-dunkel); --rail-aktiv: var(--pw-navy); --rail-linie: var(--pw-nebel);
  transition: background var(--pw-dur-slow) var(--pw-ease-out), border-color var(--pw-dur-slow) var(--pw-ease-out);
}
.c-onepager__fortschritt.is-dunkel {
  background: var(--pw-navy); border: var(--pw-border-dunkel); box-shadow: none;
  --rail-fg: var(--pw-silber); --rail-aktiv: var(--pw-weiss); --rail-linie: var(--pw-stahl);
}
.c-onepager__fortschritt :focus-visible { outline-color: var(--pw-signal); }
.c-onepager__akte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-4); }
.c-onepager__aktlink {
  position: relative; display: grid; justify-items: center; gap: var(--pw-space-4); min-width: 32px; min-height: 44px;
  padding: var(--pw-space-4); color: var(--rail-fg); text-decoration: none; border-radius: var(--pw-radius-6);
}
.c-onepager__aktlink:hover, .c-onepager__aktlink[aria-current="step"] { color: var(--rail-aktiv); }
.c-onepager__stern { position: relative; width: 16px; height: 16px; border: var(--pw-star-stroke) solid currentColor; border-radius: var(--pw-radius-2); }
.c-onepager__stern::after {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity var(--pw-dur-fast) var(--pw-ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.c-onepager__aktlink[aria-current="step"] .c-onepager__stern::after, .c-onepager__aktlink.is-erledigt .c-onepager__stern::after, .c-onepager__aktlink:hover .c-onepager__stern::after { opacity: 1; }
.c-onepager__leiste { width: 20px; height: var(--pw-lichtleiste-hoehe); background: var(--rail-linie); border-radius: var(--pw-radius-2); overflow: hidden; }
.c-onepager__leiste i { display: block; width: 100%; height: 100%; background: var(--pw-lichtleiste); transform-origin: left; transform: scaleX(var(--fortschritt, 0)); }
/* Name als Hinweis links neben der Leiste, nur bei Hover und Fokus sichtbar (fuer Screenreader immer da) */
.c-onepager__aktname {
  position: absolute; right: calc(100% + var(--pw-space-16)); top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: var(--pw-space-4) var(--pw-space-8); border-radius: var(--pw-radius-2); background: var(--pw-nacht); color: var(--pw-weiss);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-label);
  clip-path: inset(50%); opacity: 0; transition: opacity var(--pw-dur-fast) var(--pw-ease-out);
}
.c-onepager__aktlink:hover .c-onepager__aktname, .c-onepager__aktlink:focus-visible .c-onepager__aktname { clip-path: none; opacity: 1; }

/* ---------- Akte ---------- */
.c-onepager__akt { position: relative; display: flex; align-items: flex-start; padding-block: var(--pw-section-y); }
.c-onepager__inner { position: relative; z-index: 2; width: 100%; }
.c-onepager__spalte { display: flex; flex-direction: column; gap: var(--pw-space-24); width: min(100%, 34rem); container-type: inline-size; }
.c-onepager__akt--links, .c-onepager__akt--rechts { min-height: 135vh; }
.c-onepager__akt--links .c-onepager__spalte { margin-right: auto; }
.c-onepager__akt--rechts .c-onepager__spalte { margin-left: auto; }
.c-onepager__akt--buehne { min-height: 130vh; text-align: center; }
.c-onepager__akt--buehne .c-onepager__spalte { width: min(100%, var(--pw-text-max)); margin-inline: auto; align-items: center; }
.c-onepager__buehne + .c-onepager__schiene + .c-onepager__akt { padding-top: clamp(var(--pw-space-64), 14vh, var(--pw-space-128)); }
/* Epilog: genau ein Bildschirm, Text unten; das Schild ruht oben und wird nie ueberquert (Buehne endet mit dem Akt) */
.c-onepager__akt--buehne:last-child { align-items: flex-end; min-height: 100vh; min-height: 100svh; padding-bottom: var(--pw-space-48); }
/* Flaechenwechsel papier/weiss ohne Naht (QA-Schleife 1, Befund 31): das Schild der Buehne ueberquert die Grenze,
   daher laeuft die Papierflaeche samt Wuerfelmuster in den letzten bzw. ersten 40vh weich in Weiss aus */
.c-onepager__akt.is-papier:has(+ .c-onepager__akt.is-weiss) {
  background-image: linear-gradient(to bottom, transparent calc(100% - 40vh), var(--pw-weiss)), var(--pw-muster-wuerfel);
}
.c-onepager__akt.is-weiss + .c-onepager__akt.is-papier {
  background-image: linear-gradient(to bottom, var(--pw-weiss), transparent 40vh), var(--pw-muster-wuerfel);
}
.c-onepager__akt.is-weiss + .c-onepager__akt.is-papier:has(+ .c-onepager__akt.is-weiss) {
  background-image: linear-gradient(to bottom, var(--pw-weiss), transparent 40vh, transparent calc(100% - 40vh), var(--pw-weiss)), var(--pw-muster-wuerfel);
}

/* Ohne Bild keine Bildflaeche (14.10.2026, Wunsch Alexander: die 3D-Szene traegt die Geschichte allein) */
.c-onepager__bild:not(:has(img)) { display: none; }

/* Ueberschriften im Stil der Verben (Archivo 800, breit). Versal nur ueber .pw-verb im Markup (die drei Verben), der Epilog in normaler Schreibung */
.c-onepager__titel {
  margin: 0; font-family: var(--pw-font-display); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-display);
  font-size: min(var(--pw-fs-display), var(--pw-fs-verb-fit)); line-height: var(--pw-lh-display); letter-spacing: var(--pw-ls-display); color: var(--pw-heading);
}
.c-onepager__titel--dreiklang { width: min-content; margin-inline: auto; font-size: min(clamp(2.5rem, 1rem + 5.4vw, 6.25rem), var(--pw-fs-verb-fit)); text-align: left; }
.c-onepager__titel--dreiklang .split-wort { display: block; }
.c-onepager__titel--dreiklang .split-wort:nth-of-type(n+2) { color: var(--pw-silber); }
.is-papier .c-onepager__titel--dreiklang .split-wort:nth-of-type(n+2), .is-weiss .c-onepager__titel--dreiklang .split-wort:nth-of-type(n+2) { color: var(--pw-stahl-dunkel); }
.c-onepager__akt--buehne:last-child .c-onepager__titel { font-size: var(--pw-fs-h1); font-stretch: var(--pw-wdth-h1); }
/* Lichtleiste unter dem Titel */
.c-onepager__titel::after { content: ""; display: block; width: 4.5rem; height: var(--pw-lichtleiste-hoehe); margin-top: var(--pw-space-16); border-radius: var(--pw-radius-2); background: var(--pw-lichtleiste); }
.c-onepager__akt--buehne .c-onepager__titel::after { margin-inline: auto; }
.c-onepager__titel--dreiklang::after { margin-inline: 0; }

/* Buchstaben-Aufbau (JS teilt, Lesetext bleibt per aria-label) */
.split-wort { display: inline-block; white-space: nowrap; max-width: 100%; }
/* Mobil (QA-Schleife 1, Befund 6): Woerter bleiben ganz, der Dreiklang nimmt die volle Breite und die Schrift
   skaliert so, dass das laengste Wort (VERTEIDIGEN.) in die Spalte passt. Nie Buchstabensaeule. */
@media (max-width: 599px) {
  .c-onepager__titel--dreiklang { width: 100%; max-width: 100%; font-size: min(var(--pw-fs-display), 9.2vw); }
  /* H2 der Akte stehen auf der Tafel (zusaetzlich 2 x 16 px Innenabstand) */
  .c-onepager__titel:not(.c-onepager__titel--dreiklang) { font-size: min(var(--pw-fs-display), 8.2vw); }
  .c-onepager__titel { overflow-wrap: normal; hyphens: manual; }
}
.split-maske { display: inline-block; overflow: hidden; padding-bottom: 0.06em; vertical-align: bottom; }
.split-zeichen { display: inline-block; }

.c-onepager__kernsatz { margin: 0; max-width: var(--pw-measure); font-family: var(--pw-font-display); font-size: var(--pw-fs-h3); line-height: var(--pw-lh-h3); font-weight: var(--pw-fw-h3); color: var(--pw-heading); }
.is-nacht .c-onepager__kernsatz { color: var(--pw-signal-hell); }
.c-onepager__text { max-width: var(--pw-measure); color: var(--pw-fg); }
.c-onepager__akt--buehne .c-onepager__text { font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); }
.c-onepager__akt--buehne .c-onepager__kernsatz { margin-inline: auto; }

/* Lebensphasen: laufen mit dem Pruefstrahl der Szene mit */
.c-onepager__phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--pw-space-8); counter-reset: phase; }
.c-onepager__phasen li {
  counter-increment: phase; padding-top: var(--pw-space-12); border-top: var(--pw-lichtleiste-hoehe) solid var(--pw-line-strong);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-small); font-weight: var(--pw-fw-semibold); line-height: var(--pw-lh-h4); color: var(--pw-fg-muted);
  transition: border-color var(--pw-dur-slow) var(--pw-ease-out), color var(--pw-dur-slow) var(--pw-ease-out);
}
.c-onepager__phasen li::before { content: counter(phase, decimal-leading-zero); display: block; margin-bottom: var(--pw-space-4); font-size: var(--pw-fs-label); letter-spacing: var(--pw-ls-label); color: var(--pw-fg-muted); }
.c-onepager__phasen li.is-aktiv { border-top-color: var(--pw-focus); color: var(--pw-heading); }

/* Bild: Lichtleiste oben, ruhige Flaeche in Token-Farbe, solange kein Bild da ist */
.c-onepager__bild { position: relative; }
.c-onepager__bild::before { content: ""; position: absolute; left: var(--pw-space-24); right: var(--pw-space-24); top: 0; z-index: 1; height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: var(--pw-lichtleiste); }
.c-onepager__bildflaeche { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--pw-radius-media); background: var(--pw-line); }
.c-onepager__bildflaeche img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; border-radius: 0; }
.is-papier .c-onepager__bildflaeche, .is-weiss .c-onepager__bildflaeche { box-shadow: var(--pw-shadow-2); }
.is-nacht .c-onepager__bildflaeche { border: var(--pw-border-dunkel); }

/* Mobile Kurzfassung: ab 768 px nur die volle Fassung, darunter Kurztext mit aufklappbarer Langfassung */
.c-onepager__text--kurz { display: none; }
.c-onepager__mehr { margin-top: var(--pw-space-12); }
.c-onepager__mehr summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--pw-link); font-weight: var(--pw-fw-semibold); text-decoration: underline; text-underline-offset: 0.3em; }
.c-onepager__mehr[open] summary { margin-bottom: var(--pw-space-8); }

/* Aktionen */
.c-onepager__aktion { margin: 0; }
.c-onepager__cta--schaden { background: transparent; border-color: var(--pw-alarm); color: var(--pw-fg); }
.c-onepager__cta--schaden:hover { background: transparent; border-color: var(--pw-alarm); color: var(--pw-heading); }
.c-onepager__cta--schaden::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pw-alarm); }
.c-onepager__cta--textlink { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--pw-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.c-onepager__cta--textlink:hover { background: transparent; color: var(--pw-link-hover); }

/* Scroll-Hinweis mit Sternmarke, ohne Huepfen */
.c-onepager__hinweis { display: inline-flex; align-items: center; gap: var(--pw-space-12); margin: var(--pw-space-24) 0 0; color: var(--pw-fg-muted); font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-label); }
.c-onepager__hinweis-stern { position: relative; width: var(--pw-star-box); height: var(--pw-star-box); border: var(--pw-star-stroke) solid var(--pw-star); border-radius: var(--pw-radius-2); }
.c-onepager__hinweis-stern::after {
  content: ""; position: absolute; inset: 0; background: var(--pw-star);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5l1.9 4.3 4.6.4-3.5 3 1.1 4.6L12 15.4 7.9 17.8 9 13.2l-3.5-3 4.6-.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Einblenden (nur mit JS und erlaubter Bewegung): Deckkraft und 12 px */
.c-onepager.is-bewegt [data-reveal] { opacity: 0; transform: translateY(var(--pw-reveal-shift)); }

/* ---------- Tablet und Mobil ---------- */
@media (max-width: 1024px) {
  .c-onepager__akt--links .c-onepager__spalte, .c-onepager__akt--rechts .c-onepager__spalte { width: min(100%, 30rem); }
}
@media (max-width: 767px) {
  .c-onepager__schiene { display: none; }
  .c-onepager__akt--links, .c-onepager__akt--rechts { min-height: auto; }
  /* Schild steht oben sichtbar, Text laeuft auf einer Tafel in Flaechenfarbe darueber */
  .c-onepager__akt--links .c-onepager__spalte, .c-onepager__akt--rechts .c-onepager__spalte, .c-onepager__akt--buehne:last-child .c-onepager__spalte {
    width: 100%; margin-top: 42vh; padding: var(--pw-space-24) var(--pw-space-16);
    background: color-mix(in srgb, var(--pw-bg) 92%, transparent); border-radius: var(--pw-radius-card);
  }
  .is-papier .c-onepager__spalte { --pw-bg: var(--pw-papier); }
  .c-onepager__akt--buehne:last-child .c-onepager__spalte { margin-top: 30vh; }
  .c-onepager__phasen { grid-template-columns: 1fr 1fr; }
  .c-onepager__text--voll { display: none; }
  .c-onepager__text--kurz { display: block; }
  .c-onepager__mehr > p:first-of-type, .c-onepager__mehr > p { margin-top: 0; }
  .c-onepager__fallback { right: auto; left: 50%; top: 22%; width: 52vw; transform: translate(-50%, -30%); }
}

/* Bewegung reduziert: keine Einblendungen */
@media (prefers-reduced-motion: reduce) {
  .c-onepager.is-bewegt [data-reveal] { opacity: 1; transform: none; }
}

/* AI-Badge: Gestaltung kommt aus .pw-ai-badge (components.css, Design-Lead); hier nur die Lage im Bild.
   Deckender Nacht-Grund statt halbtransparent (QA-Schleife 1, Befund 30): Weiss auf Nacht 17,68:1 unabhaengig vom Bild */
.c-onepager__ai { position: absolute; right: var(--pw-space-12); bottom: var(--pw-space-12); z-index: 1; }
.c-onepager .pw-ai-badge { background: var(--pw-nacht); }

/* pages/usp.css */
/* pages/usp.css: USP-One-Pager "Die Abnahme" (Sektionstyp usp_stage, Seite /vorteile/).
   Ausnahme laut design-steuerung.md (css/pages nur fuer One-Pager). Werte nur ueber --pw-* aus tokens.css,
   Transparenzen per color-mix. Zwei Modi:
   - statisch (Vorgabe: ohne JS, mobil, prefers-reduced-motion): Kapitel als Folge grosser Bilder, Callout darunter.
   - Buehne (.c-usp.is-buehne, gesetzt von js/usp.js ab 900 px): Sticky-Buehne mit Keyframes, Texttafeln scrollen darueber.
   Schreibung: keine Versalien auf dieser Seite (Regel A5, QA-Schleife 1 Befund 15); Versal gibt es nur ueber .pw-verb. */

.c-usp { position: relative; overflow-x: clip; --usp-header: var(--pw-header-h); --usp-buehne-h: calc(100vh - var(--usp-header)); }
@supports (height: 100svh) { .c-usp { --usp-buehne-h: calc(100svh - var(--usp-header)); } }
.c-usp__lauf { position: relative; }

/* ---------- Sternkaestchen (Pruefmarke) ---------- */
.c-usp__stern {
  position: relative; display: inline-block; flex: none; width: var(--pw-star-box); height: var(--pw-star-box);
  border: var(--pw-star-stroke) solid var(--usp-stern-linie, var(--pw-silber)); border-radius: var(--pw-radius-2);
  background: var(--usp-stern-fond, transparent);
  transition: background var(--pw-dur-slow) var(--pw-ease-out), border-color var(--pw-dur-slow) var(--pw-ease-out);
}
.c-usp__stern::after {
  content: ""; position: absolute; inset: 0; background: var(--usp-stern-farbe, var(--pw-silber));
  -webkit-mask: var(--pw-star-shape) center / 100% no-repeat; mask: var(--pw-star-shape) center / 100% no-repeat;
  transition: background var(--pw-dur-slow) var(--pw-ease-out);
}
.is-geprueft .c-usp__stern, .c-usp__stern.is-geprueft { --usp-stern-linie: var(--pw-signal); --usp-stern-fond: var(--pw-signal); --usp-stern-farbe: var(--pw-nacht); }

/* ---------- Statischer Modus (Vorgabe) ---------- */
.c-usp__buehne { display: none; }
.c-usp__kapitelliste { padding-block: var(--pw-space-24) var(--pw-section-y); }
.c-usp__kapitel {
  width: min(100% - 2 * var(--pw-page-margin), var(--pw-content-max)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pw-space-32); padding-block: var(--pw-space-48);
}
.c-usp__kapitel + .c-usp__kapitel { border-top: var(--pw-border-dunkel); }
.c-usp__bild { margin: 0; }
.c-usp__bildflaeche { position: relative; overflow: hidden; border-radius: var(--pw-radius-media); background: var(--pw-navy); }
.c-usp__bildflaeche img { display: block; width: 100%; height: auto; aspect-ratio: 2752 / 1536; object-fit: cover; }

/* Punkt und Linie im Bild (Koordinaten --px/--py setzt js/usp.js aus data-punkt-x/-y) */
.c-usp__punkt { display: none; }
.c-usp.is-js .c-usp__punkt {
  display: block; position: absolute; z-index: 1; left: calc(var(--px, 50) * 1%); top: calc(var(--py, 50) * 1%); bottom: 0; width: 0;
}
.c-usp.is-js .c-usp__bild:not(:has(.c-usp__callout)) .c-usp__punkt { display: none; } /* Punkt ohne Begriff (Finale): nur auf der Buehne */
.c-usp__punkt::before {
  content: ""; position: absolute; left: calc(var(--pw-space-12) / -2 - 1px); top: calc(var(--pw-space-12) / -2 - 1px);
  width: var(--pw-space-12); height: var(--pw-space-12); border-radius: 50%; background: var(--pw-signal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pw-signal) 30%, transparent), 0 0 18px var(--pw-signal);
}
.c-usp__punkt::after { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1.5px; background: var(--pw-signal); }
.c-usp__callout {
  position: relative; display: inline-flex; align-items: center; gap: var(--pw-space-8); padding-top: var(--pw-space-16);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold);
  letter-spacing: var(--pw-ls-label); line-height: var(--pw-lh-label); color: var(--pw-weiss);
}
.c-usp__bild .c-usp__callout { display: inline-flex; } /* gegen .pw-media figcaption { display: none } */
.c-usp.is-js .c-usp__callout { margin-left: clamp(0px, calc(var(--px, 0) * 1% - var(--pw-star-box) / 2), calc(100% - 15rem)); }
.c-usp.is-js .c-usp__callout::before {
  content: ""; position: absolute; top: 0; left: calc(var(--pw-star-box) / 2 - 1px); height: var(--pw-space-16); width: 1.5px; background: var(--pw-signal);
}

/* Texttafel */
.c-usp__tafel { min-width: 0; max-width: var(--pw-measure); container-type: inline-size; }
.c-usp__titel {
  margin: 0 0 var(--pw-space-16); display: flex; align-items: center; gap: var(--pw-space-16);
  font-family: var(--pw-font-display); font-size: min(var(--pw-fs-display), var(--pw-fs-titel-fit)); font-weight: var(--pw-fw-display); font-stretch: var(--pw-wdth-display);
  letter-spacing: var(--pw-ls-display); line-height: var(--pw-lh-display); color: var(--pw-weiss);
}
.c-usp__titel--h1 { display: block; font-size: var(--pw-fs-h1); font-weight: var(--pw-fw-h1); font-stretch: var(--pw-wdth-h1); letter-spacing: var(--pw-ls-h1); line-height: var(--pw-lh-h1); text-transform: none; }
.c-usp__stern--titel { width: calc(var(--pw-star-box) * 1.6); height: calc(var(--pw-star-box) * 1.6); }
.c-usp__kernsatz { margin: 0 0 var(--pw-space-16); font-family: var(--pw-font-display); font-size: var(--pw-fs-h3); font-weight: var(--pw-fw-h3); line-height: var(--pw-lh-h3); color: var(--pw-signal-hell); }
.c-usp__text { color: var(--pw-silber); }
.c-usp__text p { margin: 0 0 var(--pw-space-12); }
.c-usp__messpunkte { list-style: none; margin: var(--pw-space-16) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pw-space-8) var(--pw-space-16); }
.c-usp__messpunkte li {
  display: inline-flex; min-width: 0; align-items: center; gap: var(--pw-space-8);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-label); color: var(--pw-weiss);
}
.c-usp__messpunkte li:nth-child(2) .c-usp__stern { transition-delay: 120ms; }
.c-usp__messpunkte li:nth-child(3) .c-usp__stern { transition-delay: 240ms; }
.c-usp__messpunkte li:nth-child(4) .c-usp__stern { transition-delay: 360ms; }
.c-usp__messpunkte li:nth-child(5) .c-usp__stern { transition-delay: 480ms; }
.c-usp__aktionen { margin: var(--pw-space-24) 0 0; display: flex; flex-wrap: wrap; gap: var(--pw-space-12); }
.c-usp__hinweis {
  margin: var(--pw-space-32) 0 0; display: inline-flex; align-items: center; gap: var(--pw-space-8);
  font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-label); color: var(--pw-stahl);
}

/* Finale statisch: Pruefmarken in einer Zeile, Lichtleiste darueber */
.c-usp__kapitel--finale .c-usp__tafel { position: relative; padding-top: var(--pw-space-24); }
.c-usp__kapitel--finale .c-usp__tafel::before { content: ""; position: absolute; left: 0; top: 0; width: 6rem; height: var(--pw-lichtleiste-hoehe); background: var(--pw-lichtleiste); border-radius: var(--pw-radius-2); box-shadow: 0 0 16px var(--pw-signal); }
.c-usp__kapitel--finale .c-usp__titel { font-size: var(--pw-fs-h1); }

@media (max-width: 599px) {
  .c-usp__titel:not(.c-usp__titel--h1) { font-size: var(--pw-fs-h2); gap: var(--pw-space-12); }
  .c-usp__stern--titel { width: var(--pw-star-box); height: var(--pw-star-box); }
}

@media (min-width: 900px) {
  .c-usp__kapitel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--pw-space-48); padding-block: var(--pw-space-64); }
  .c-usp__kapitel--text-rechts .c-usp__bild { order: 0; }
  .c-usp__kapitel--intro, .c-usp__kapitel--finale { grid-template-columns: minmax(0, 1fr); }
  .c-usp__kapitel--intro .c-usp__tafel, .c-usp__kapitel--finale .c-usp__tafel { max-width: 44rem; }
  .c-usp__kapitel--intro .c-usp__tafel { order: -1; }
}

/* ---------- Buehnen-Modus ---------- */
.c-usp.is-buehne .c-usp__buehne {
  display: block; position: sticky; top: var(--usp-header); z-index: 0; height: var(--usp-buehne-h); overflow: hidden;
  container-type: size; background: var(--pw-nacht);
}
.c-usp.is-buehne .c-usp__kapitelliste { position: relative; z-index: 1; margin-top: calc(-1 * var(--usp-buehne-h)); padding: 0; pointer-events: none; }
.c-usp.is-buehne .c-usp__kapitel {
  display: block; width: auto; height: calc(var(--usp-buehne-h) * 2); margin: 0; padding: 0 var(--pw-page-margin); border: 0;
}
.c-usp.is-buehne .c-usp__kapitel--intro { height: calc(var(--usp-buehne-h) * 1.5); }
.c-usp.is-buehne .c-usp__kapitel--finale { height: calc(var(--usp-buehne-h) * 2.3); }
.c-usp.is-buehne .c-usp__bild { display: none; }
.c-usp.is-buehne .c-usp__tafel {
  position: sticky; top: calc(var(--usp-header) + var(--usp-tafel-y, var(--usp-buehne-h) * 0.16)); width: min(30rem, 36vw); max-width: none;
  margin-top: var(--usp-tafel-y, calc(var(--usp-buehne-h) * 0.16)); pointer-events: auto;
}
/* --usp-tafel-y setzt js/usp.js, wenn eine hohe Tafel sonst in die Lichtleiste unten ragen wuerde (QA-Schleife 1, Befund 16) */
.c-usp.is-buehne .c-usp__kapitel--intro .c-usp__tafel { width: min(36rem, 44vw); margin-top: var(--usp-tafel-y, calc(var(--usp-buehne-h) * 0.1)); top: calc(var(--usp-header) + var(--usp-tafel-y, var(--usp-buehne-h) * 0.1)); }
.c-usp.is-buehne .c-usp__kapitel--text-rechts .c-usp__tafel { margin-left: auto; margin-right: var(--pw-space-48); }
.c-usp.is-buehne .c-usp__titel:not(.c-usp__titel--h1) { font-size: var(--pw-fs-h1); }
.c-usp.is-buehne .c-usp__titel { text-shadow: 0 2px 24px var(--pw-nacht); }
.c-usp.is-buehne .c-usp__text { color: var(--pw-nebel); text-shadow: 0 1px 12px var(--pw-nacht); }
/* Lesbarkeit auf belebten Fotos (Keyframes 2026b, Wimmelbilder): weicher Nacht-Hof hinter der Tafel, Kanten laufen aus */
.c-usp.is-buehne .c-usp__tafel { isolation: isolate; }
.c-usp.is-buehne .c-usp__kapitel:not(.c-usp__kapitel--finale) .c-usp__tafel::before { /* Finale behaelt seine Lichtleiste */
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--pw-space-48)) calc(-1 * var(--pw-space-64));
  background: radial-gradient(farthest-side, color-mix(in srgb, var(--pw-nacht) 58%, transparent) 50%, transparent);
  pointer-events: none;
}

/* Keyframe-Rahmen: deckt die Buehne ab wie object-fit: cover, Punkte in Prozent bleiben deckungsgleich */
.c-usp__frame { position: absolute; left: 50%; top: 50%; width: max(100cqw, 179.17cqh); aspect-ratio: 2752 / 1536; transform: translate(-50%, -50%); }
.c-usp__ebene { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; transform-origin: var(--ox, 50%) var(--oy, 50%); }
.c-usp__ebene[hidden] { display: none; }
.c-usp__ebene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-usp__ziel { position: absolute; left: calc(var(--px, 50) * 1%); top: calc(var(--py, 50) * 1%); width: 0; height: 0; }
.c-usp__ziel::before, .c-usp__ziel::after {
  content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  transform: scale(var(--punkt, 0)); transition: transform var(--pw-dur-slow) var(--pw-ease-out);
}
.c-usp__ziel::before { background: var(--pw-signal); box-shadow: 0 0 20px var(--pw-signal); }
.c-usp__ziel::after { border: 1.5px solid var(--pw-signal); animation: usp-puls 2.4s var(--pw-ease-out) infinite; }
@keyframes usp-puls { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 3.2; } }

/* Lichtbalken-Lichtakzent im Finale (CSS-Ebene, langsam, kein Stroboskop) */
.c-usp__licht { position: absolute; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.c-usp__licht--blau { left: calc(var(--px, 50) * 1% - 3%); top: calc(var(--py, 50) * 1%); background: radial-gradient(closest-side, color-mix(in srgb, var(--pw-signal) 75%, transparent), color-mix(in srgb, var(--pw-blau) 30%, transparent) 45%, transparent); }
.c-usp__licht--rot { left: calc(var(--px, 50) * 1% + 4%); top: calc(var(--py, 50) * 1% - 1%); background: radial-gradient(closest-side, color-mix(in srgb, var(--pw-alarm) 80%, transparent), color-mix(in srgb, var(--pw-alarm) 25%, transparent) 45%, transparent); }
.c-usp__ebene.is-an .c-usp__licht--blau { animation: usp-blau 2.8s var(--pw-ease-in-out) infinite alternate; }
.c-usp__ebene.is-an .c-usp__licht--rot { animation: usp-rot 2.8s var(--pw-ease-in-out) infinite alternate; }
@keyframes usp-blau { from { opacity: 0.85; } to { opacity: 0.25; } }
@keyframes usp-rot { from { opacity: 0.2; } to { opacity: 0.8; } }

/* Abdunklung hinter der Texttafel, Seite wechselt weich */
.c-usp__scrim { position: absolute; inset: 0; pointer-events: none; }
.c-usp__scrim::before, .c-usp__scrim::after { content: ""; position: absolute; inset: 0; transition: opacity 600ms var(--pw-ease-out); }
.c-usp__scrim::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pw-nacht) 90%, transparent) 0%, color-mix(in srgb, var(--pw-nacht) 68%, transparent) 30%, transparent 58%),
    linear-gradient(0deg, color-mix(in srgb, var(--pw-nacht) 85%, transparent) 0%, transparent 22%);
}
.c-usp__scrim::after {
  opacity: 0;
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--pw-nacht) 90%, transparent) 0%, color-mix(in srgb, var(--pw-nacht) 68%, transparent) 30%, transparent 58%),
    linear-gradient(0deg, color-mix(in srgb, var(--pw-nacht) 85%, transparent) 0%, transparent 22%);
}
.c-usp__scrim.is-rechts::before { opacity: 0; }
.c-usp__scrim.is-rechts::after { opacity: 1; }

/* Callout-Linien und Sternkaestchen auf der Buehne (Lage setzt js/usp.js) */
.c-usp__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.c-usp__linien line { stroke: var(--pw-signal); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--pw-signal)); }
.c-usp__marken { position: absolute; inset: 0; pointer-events: none; }
.c-usp__marke {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: var(--pw-space-8);
  padding: var(--pw-space-8) var(--pw-space-12); border: var(--pw-border-dunkel); border-radius: var(--pw-radius-2);
  background: color-mix(in srgb, var(--pw-nacht) 78%, transparent); color: var(--pw-weiss); white-space: nowrap;
  font-family: var(--pw-font-display); font-size: var(--pw-fs-label); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-label); line-height: 1;
  opacity: 0; will-change: transform, opacity;
}

/* KI-Hinweis auf der Buehne und im Bild: deckender Nacht-Grund statt halbtransparent (QA-Schleife 1, Befund 30),
   Weiss auf Nacht 17,68:1 unabhaengig vom Bild */
.c-usp .pw-ai-badge { background: var(--pw-nacht); }
.c-usp__ai { top: var(--pw-space-16); right: var(--pw-space-16); }
.c-usp__ai[hidden] { display: none; }

/* Fortschritt: Lichtleiste mit fuenf Pruefmarken (Abnahmeprotokoll) */
.c-usp__fortschritt { position: absolute; z-index: 2; left: var(--pw-page-margin); right: var(--pw-page-margin); bottom: var(--pw-space-24); }
.c-usp__leiste { position: absolute; left: calc(var(--pw-star-box) / 2); right: calc(var(--pw-star-box) / 2); top: calc(var(--pw-star-box) / 2 + var(--pw-space-12) - 1px); height: var(--pw-lichtleiste-hoehe); border-radius: var(--pw-radius-2); background: color-mix(in srgb, var(--pw-silber) 22%, transparent); }
.c-usp__leiste i { position: absolute; inset: 0; border-radius: inherit; background: var(--pw-lichtleiste); box-shadow: 0 0 12px var(--pw-signal); transform: scaleX(var(--fuellung, 0)); transform-origin: left; }
.c-usp__protokoll { position: relative; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.c-usp__protokoll li { flex: 0 0 auto; }
.c-usp__protokoll li:nth-child(2), .c-usp__protokoll li:nth-child(3), .c-usp__protokoll li:nth-child(4) { display: flex; justify-content: center; }
.c-usp__protokoll-link {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--pw-space-8); min-height: 44px; padding-block: var(--pw-space-12) 0;
  color: var(--pw-stahl); text-decoration: none;
  font-family: var(--pw-font-display); font-size: var(--pw-fs-badge); font-weight: var(--pw-fw-bold); letter-spacing: var(--pw-ls-label); line-height: 1;
  transition: color var(--pw-dur-slow) var(--pw-ease-out);
}
.c-usp__protokoll li:nth-child(2) .c-usp__protokoll-link, .c-usp__protokoll li:nth-child(3) .c-usp__protokoll-link, .c-usp__protokoll li:nth-child(4) .c-usp__protokoll-link { align-items: center; }
.c-usp__protokoll li:last-child .c-usp__protokoll-link { align-items: flex-end; }
.c-usp__protokoll-link .c-usp__stern { background: var(--usp-stern-fond, var(--pw-nacht)); }
.c-usp__protokoll-link:hover, .c-usp__protokoll-link[aria-current] { color: var(--pw-weiss); }
.c-usp__protokoll-link[aria-current] .c-usp__stern { --usp-stern-linie: var(--pw-weiss); --usp-stern-farbe: var(--pw-weiss); }
.c-usp__protokoll-link.is-geprueft .c-usp__stern { --usp-stern-linie: var(--pw-signal); --usp-stern-fond: var(--pw-signal); --usp-stern-farbe: var(--pw-nacht); }
.c-usp__protokoll-link:focus-visible { outline: 2px solid var(--pw-signal); outline-offset: 4px; }

/* Einblenden der Tafeln: native Scroll-Driven Animations, sonst IntersectionObserver (.is-sichtbar) */
@supports (animation-timeline: view()) {
  .c-usp.is-buehne .c-usp__kapitel { view-timeline: --usp-kapitel block; }
  .c-usp.is-buehne .c-usp__tafel { animation: usp-tafel linear both; animation-timeline: --usp-kapitel; animation-range: cover 0% cover 100%; }
  .c-usp.is-buehne .c-usp__kapitel--intro .c-usp__tafel { animation-name: usp-tafel-intro; }
  .c-usp.is-buehne .c-usp__kapitel--finale .c-usp__tafel { animation-name: usp-tafel-finale; }
}
@keyframes usp-tafel { 0%, 10% { opacity: 0; translate: 0 3rem; } 24% { opacity: 1; translate: 0 0; } 70% { opacity: 1; translate: 0 0; } 84%, 100% { opacity: 0; translate: 0 -2rem; } }
@keyframes usp-tafel-intro { 0%, 60% { opacity: 1; translate: 0 0; } 78%, 100% { opacity: 0; translate: 0 -2rem; } }
@keyframes usp-tafel-finale { 0%, 10% { opacity: 0; translate: 0 3rem; } 24%, 100% { opacity: 1; translate: 0 0; } }
.c-usp.is-buehne.ohne-sda .c-usp__tafel { opacity: 0; translate: 0 2rem; transition: opacity 500ms var(--pw-ease-out), translate 500ms var(--pw-ease-out); }
.c-usp.is-buehne.ohne-sda .c-usp__kapitel.is-sichtbar .c-usp__tafel { opacity: 1; translate: 0 0; }

/* ---------- Heller Abschnitt: persoenliches Wort mit Unterschrift ---------- */
.c-usp__wort { padding-block: var(--pw-section-y); }
.c-usp__wort-inner { display: grid; justify-items: start; gap: var(--pw-space-16); max-width: calc(46rem + 2 * var(--pw-page-margin)); }
.c-usp__wort-leiste { width: 6rem; }
.c-usp__wort-titel { margin: var(--pw-space-8) 0 0; color: var(--pw-navy); }
.c-usp__wort-text { font-size: var(--pw-fs-lead); line-height: var(--pw-lh-lead); }
.c-usp__unterschrift { display: block; width: min(100%, 410px); height: auto; margin-top: var(--pw-space-8); }
.c-usp__unterschrift--leer { display: grid; place-items: center; min-height: 130px; border: 1px dashed var(--pw-stahl); border-radius: var(--pw-radius-6); color: var(--pw-stahl-dunkel); }
.c-usp__wort-link { font-family: var(--pw-font-display); font-weight: var(--pw-fw-bold); }
.c-usp__wort-link::after { content: " \2192"; }

/* ---------- Reduzierte Bewegung: statisch, Marken sofort gefuellt ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-usp .c-usp__stern { --usp-stern-linie: var(--pw-signal); --usp-stern-fond: var(--pw-signal); --usp-stern-farbe: var(--pw-nacht); transition: none; }
  .c-usp__ziel::after { animation: none; }
}

/* ---------- Scroll-Video (data-usp-video, js/usp.js setzt .is-video, sobald das Video bereit ist) ----------
   Das Video liegt im Keyframe-Rahmen ueber den Bild-Ebenen und deckt die Buehne ab; Tafeln steuert js/usp.js
   ueber --usp-tafel-o (ein im Halt am Keyframe, aus waehrend der Fahrt). Callouts gibt es im Video nicht. */
.c-usp__video {
  position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 600ms var(--pw-ease-out); will-change: transform; pointer-events: none; background: transparent;
}
.c-usp.is-buehne.is-video .c-usp__video { opacity: 1; }
.c-usp.is-buehne.is-video .c-usp__ebene { visibility: hidden; transition: visibility 0s linear 700ms; }
.c-usp.is-buehne.is-video .c-usp__linien, .c-usp.is-buehne.is-video .c-usp__marken { display: none; }
.c-usp.is-buehne.is-video .c-usp__kapitel[data-usp-kapitel] .c-usp__tafel {
  animation: none; transition: none;
  opacity: var(--usp-tafel-o, 0); translate: 0 calc((1 - var(--usp-tafel-o, 0)) * 1.25rem);
}
.c-usp.is-buehne.is-video .c-usp__kapitel.is-aus .c-usp__tafel { pointer-events: none; }
.c-usp.is-buehne.is-video .c-usp__ai { z-index: 2; }

/* ---------- Mobile Buehne (nur mit Video, .is-mobil unter 900 px): Bildausschnitt oben, Tafel darunter ---------- */
.c-usp.is-buehne.is-mobil .c-usp__frame {
  left: 0; top: 0; width: max(100cqw, 100.3cqh); transform: translateX(var(--usp-frame-x, -20%));
}
.c-usp.is-buehne.is-mobil .c-usp__scrim::before {
  background: linear-gradient(180deg, transparent 0%, transparent 34%, color-mix(in srgb, var(--pw-nacht) 70%, transparent) 46%, var(--pw-nacht) 58%, var(--pw-nacht) 100%);
}
.c-usp.is-buehne.is-mobil .c-usp__scrim::after { display: none; }
.c-usp.is-buehne.is-mobil .c-usp__scrim.is-rechts::before { opacity: 1; }
.c-usp.is-buehne.is-mobil .c-usp__kapitel { padding: 0 var(--pw-page-margin); }
.c-usp.is-buehne.is-mobil .c-usp__kapitel .c-usp__tafel,
.c-usp.is-buehne.is-mobil .c-usp__kapitel--intro .c-usp__tafel {
  width: auto; max-width: 34rem; margin-left: 0; margin-right: 0;
  margin-top: var(--usp-tafel-y, calc(var(--usp-buehne-h) * 0.5)); top: calc(var(--usp-header) + var(--usp-tafel-y, var(--usp-buehne-h) * 0.5));
}
.c-usp.is-buehne.is-mobil .c-usp__kapitel:not(.c-usp__kapitel--finale) .c-usp__tafel::before { inset: calc(-1 * var(--pw-space-24)) calc(-1 * var(--pw-space-16)); }
.c-usp.is-buehne.is-mobil .c-usp__titel:not(.c-usp__titel--h1) { font-size: var(--pw-fs-h2); gap: var(--pw-space-12); }
.c-usp.is-buehne.is-mobil .c-usp__stern--titel { width: var(--pw-star-box); height: var(--pw-star-box); }
.c-usp.is-buehne.is-mobil .c-usp__kernsatz { margin-bottom: var(--pw-space-8); }
.c-usp.is-buehne.is-mobil .c-usp__messpunkte, .c-usp.is-buehne.is-mobil .c-usp__hinweis { display: none; }
.c-usp.is-buehne.is-mobil .c-usp__linien, .c-usp.is-buehne.is-mobil .c-usp__marken { display: none; }
.c-usp.is-buehne.is-mobil .c-usp__fortschritt { bottom: var(--pw-space-12); }
.c-usp.is-buehne.is-mobil .c-usp__protokoll-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-usp.is-buehne.is-mobil .c-usp__protokoll-link { min-width: 44px; align-items: center; }