/*
Theme Name: RecSimple
Theme URI: https://recsimple.com/
Author: SmartbIT SG OG
Author URI: https://smartbit.at/
Description: Block-Theme fuer recsimple.com, Aussehen wie der statische Bau (Design Ruhig). Texte, Muster, Kopf und Fuss im Website-Editor aenderbar.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.2
Version: 1.1.0
License: proprietaer
Text Domain: recsimple
*/

/* ==== Teil 1–3 sind ERZEUGT von wordpress/theme/werkzeug/erzeugen.py aus docs/website (nicht hier aendern).
   Teil 4 kommt aus werkzeug/quellen/anpassung.css und passt die Klassen auf das Block-Markup an. ==== */

/* ==== Teil 1: gemeinsames Stylesheet der Vorlage ==== */
/* ==== Design „Skizze 1 Ruhig“ (2026-10-22). Dieser erste Style-Block ist das gemeinsame
     Stylesheet: der Bau setzt ihn auch in Danke, Abbruch und die Nischenseiten ein.
     Schrift Inter (SIL OFL 1.1) liegt unter /schriften/, nichts kommt von fremden Servern. ==== */
  :root{
    --grund:var(--wp--preset--color--grund,#ffffff); --flaeche:var(--wp--preset--color--flaeche,#f4f7f9); --linie:var(--wp--preset--color--linie,#dde4ea); --linie-aktiv:var(--wp--preset--color--linie-aktiv,#6b7684);
    --text:var(--wp--preset--color--text,#14181d); --text-leise:var(--wp--preset--color--text-leise,#4d5866);
    --akzent:var(--wp--preset--color--akzent,#1f7a34); --akzent-dunkel:var(--wp--preset--color--akzent-dunkel,#186b2c); --auf-akzent:var(--wp--preset--color--auf-akzent,#ffffff); --fokus:var(--wp--preset--color--fokus,#1d4ed8);
    --gruen-hauch:rgba(76,175,80,.16);
    --radius:18px;
    --schatten:0 1px 2px rgba(20,24,29,.05),0 12px 32px rgba(20,24,29,.07);
    --schatten-gross:0 2px 8px rgba(20,24,29,.08),0 40px 80px rgba(20,24,29,.16);
    --bahn:1120px;
    --schrift:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:17px;line-height:1.6;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
  img{max-width:100%;height:auto;display:block}
  h1,h2,h3{margin:0;letter-spacing:-.025em;text-wrap:balance}
  p{margin:0;text-wrap:pretty}
  a{color:var(--akzent-dunkel)}
  a:hover{color:var(--text)}
  :focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:8px}
  .bahn{max-width:var(--bahn);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
  .abschnitt{padding-block:clamp(64px,9vw,120px)}
  .kicker{display:block;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-dunkel);margin-bottom:14px}
  .titel{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;line-height:1.15}
  .unter{color:var(--text-leise);font-size:1.1rem;max-width:52ch;margin-top:14px}
  .mitte{text-align:center} .mitte .unter{margin-inline:auto}

  /* Sprunglink: unsichtbar, bis er per Tastatur den Fokus bekommt */
  .sprung{position:absolute;inset-inline-start:12px;top:-60px;z-index:60;background:var(--grund);color:var(--text);padding:10px 16px;border-radius:10px;font-weight:600}
  .sprung:focus{top:12px;box-shadow:var(--schatten)}
  main:focus{outline:none}

  /* Store-Knopf oder Store-Hinweis: entscheidet der Bau (store-link.txt) */
  html.ohne-store .nur-store{display:none}
  html.mit-store .nur-hinweis{display:none}

  /* Kopf */
  .kopf .bahn{display:flex;align-items:center;gap:24px;min-height:76px}
  .marke{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;color:var(--text);text-decoration:none;margin-inline-end:auto;min-height:44px}
  .marke picture{display:contents}
  .marke img{width:32px;height:32px;object-fit:contain;flex:none}
  .kopf nav{display:flex;align-items:center;gap:26px;font-size:.95rem}
  .kopf nav a{color:var(--text);text-decoration:none;font-weight:500}
  .kopf nav a:hover{color:var(--akzent-dunkel)}
  .kopf nav a[aria-current]{color:var(--akzent-dunkel)}
  .kopf nav a.knopf{color:var(--auf-akzent);padding:10px 20px;font-size:.95rem;white-space:nowrap}

  .knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--akzent);color:var(--auf-akzent);font-weight:600;text-decoration:none;border-radius:999px;padding:16px 30px;font-size:1.02rem;border:0;cursor:pointer;font-family:inherit;min-height:44px}
  .knopf:hover{background:var(--akzent-dunkel);color:var(--auf-akzent)}
  .knopf.leise{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--linie-aktiv)}
  .knopf.leise:hover{background:var(--flaeche);color:var(--text)}
  .hinweis{border:1px solid var(--linie-aktiv);border-radius:12px;background:var(--flaeche);padding:14px 18px;color:var(--text-leise);font-size:.95rem}

  /* Hero */
  .hero{text-align:center;padding-block:clamp(40px,7vw,96px) clamp(36px,5vw,56px)}
  .hero h1{font-size:clamp(2.3rem,5.6vw,4.2rem);font-weight:750;line-height:1.05;max-width:18ch;margin-inline:auto}
  .hero p{color:var(--text-leise);font-size:clamp(1.05rem,1.8vw,1.22rem);max-width:46ch;margin:22px auto 32px}
  .knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .hero small{display:block;margin-top:18px;color:var(--text-leise);font-size:.9rem}
  .hero small.zahlungsart{margin-top:14px}
  /* Merkmale über dem Titel (b2 A, 2026-10-26) */
  .marken{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .marken li{border:1px solid var(--linie-aktiv);border-radius:999px;padding:4px 14px;font-size:.88rem;font-weight:600;color:var(--text)}
  /* Nur für Bildschirmleser (Legende des Laufzeit-Umschalters) */
  .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  /* Sprachhinweis im Kopf: Die Startadresse / leitet auf /de/ um, Englisch ist ein Klick (2026-10-26) */
  .kopf nav a.sprachwechsel{font-weight:600}
  .sprachwechsel .kurz{display:none}

  /* Bühne mit der Animation (bleibt oben, b4 B). Reine CSS-Andeutung: der Text tippt sich ein. Kein Skript.
     Das Echtvideo steht als eigener Abschnitt weiter unten (#echtvideo), nur mit Eintrag in video.json. */
  .buehne{margin:0;padding:clamp(20px,5vw,72px) clamp(10px,4vw,56px);border-radius:32px;
    background:radial-gradient(60% 70% at 50% 0%,var(--gruen-hauch),transparent 70%),linear-gradient(180deg,var(--grund),var(--flaeche))}
  .video{position:relative;display:block;width:100%;max-width:920px;margin-inline:auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--flaeche);box-shadow:var(--schatten-gross);border:1px solid var(--linie)}
  /* Echtvideo (b4 B): stumm, Steuerleiste, preload none, Poster; assets/video.js startet es erst im Sichtbereich */
  .echt{text-align:center}
  .echt .unter{margin-inline:auto}
  .echt-video{display:block;width:100%;max-width:920px;margin:40px auto 0;aspect-ratio:16/9;border-radius:16px;background:#000;object-fit:contain;box-shadow:var(--schatten-gross)}
  /* Das Video hat keine Tonspur: keine Tonsteuerung in der Leiste (Chromium, Safari; Firefox zeigt sie ohne Tonspur gesperrt) */
  video.echt-video::-webkit-media-controls-mute-button,video.echt-video::-webkit-media-controls-volume-slider,video.echt-video::-webkit-media-controls-volume-control-container{display:none}
  .buehne figcaption{max-width:60ch;margin:22px auto 0;text-align:center;color:var(--text-leise);font-size:.98rem}
  .doc{position:absolute;inset:7% 9% 0;background:var(--grund);border-radius:12px 12px 0 0;box-shadow:0 0 0 1px var(--linie),0 10px 30px rgba(20,24,29,.08);padding:clamp(14px,3.4vw,44px)}
  .doc .leiste{display:flex;gap:6px;margin-bottom:clamp(10px,2.4vw,28px)}
  .doc .leiste i{width:clamp(6px,1vw,10px);height:clamp(6px,1vw,10px);border-radius:50%;background:var(--linie)}
  .zeile{height:clamp(5px,.8vw,9px);border-radius:5px;background:var(--flaeche);margin-bottom:clamp(7px,1.2vw,14px)}
  .zeile.b42{width:42%} .zeile.b28{width:28%} .zeile.b90{width:90%;margin-top:clamp(12px,2vw,24px)} .zeile.b76{width:76%}
  .feld{position:relative;margin-top:clamp(10px,2vw,22px);padding:clamp(8px,1.4vw,16px) clamp(10px,1.6vw,18px);border-radius:10px;box-shadow:inset 0 0 0 2px var(--akzent);font-size:clamp(.72rem,1.6vw,1.2rem);line-height:1.5;color:var(--text);overflow:hidden}
  .tipp{display:block;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:tippen 9s steps(46,end) infinite}
  .tipp.zwei{animation-name:tippen2}
  .cursor{display:inline-block;width:2px;height:1.1em;background:var(--akzent);vertical-align:-.15em;animation:blinken 1s steps(1) infinite}
  @keyframes tippen{0%,8%{clip-path:inset(0 100% 0 0)}38%,94%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
  @keyframes tippen2{0%,38%{clip-path:inset(0 100% 0 0)}70%,94%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
  @keyframes blinken{50%{opacity:0}}
  .zeiger{position:absolute;left:38%;top:58%;width:clamp(16px,2.4vw,28px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
  .klick{position:absolute;left:calc(38% - 10px);top:calc(58% - 10px);width:22px;height:22px;border-radius:50%;border:2px solid var(--akzent);opacity:0;animation:klick 9s infinite}
  @keyframes klick{0%{opacity:.9;transform:scale(.4)}6%{opacity:0;transform:scale(1.8)}100%{opacity:0}}
  .pille{position:absolute;right:6%;bottom:9%;display:flex;align-items:center;gap:10px;background:#1e1e1e;color:#e6e6e6;border-radius:999px;padding:6px 16px 6px 6px;font-size:clamp(.62rem,1.2vw,.9rem);box-shadow:0 8px 24px rgba(0,0,0,.22)}
  .pille .mic{width:clamp(22px,3vw,34px);height:clamp(22px,3vw,34px);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2px #4caf50}
  .pille svg{width:55%;stroke:#e6e6e6}

  /* In Ihren Programmen */
  .vier{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
  .fenster{border-radius:14px;background:var(--grund);border:1px solid var(--linie);box-shadow:var(--schatten);overflow:hidden;display:flex;flex-direction:column}
  .fenster .tl{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--flaeche);border-bottom:1px solid var(--linie);font-size:.74rem;color:var(--text-leise)}
  .fenster .tl i{width:8px;height:8px;border-radius:50%;background:var(--linie)}
  .fenster .tl span{margin-inline-start:6px}
  .fenster .inhalt{padding:14px;font-size:.86rem;line-height:1.5;flex:1}
  .fenster .meta{color:var(--text-leise);font-size:.76rem;border-bottom:1px solid var(--linie);padding-bottom:6px;margin-bottom:8px}
  .fenster mark{background:var(--gruen-hauch);color:var(--text);border-radius:4px;padding:1px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .fenster .adr{background:var(--flaeche);border-radius:999px;padding:4px 10px;font-size:.74rem;color:var(--text-leise);margin-bottom:10px}
  .fenster .feldname{font-size:.74rem;color:var(--text-leise);margin-bottom:4px}
  .fenster .eingabe{border:1.5px solid var(--linie-aktiv);border-radius:8px;padding:8px}
  .fenster h3{font-size:.95rem;padding:12px 14px 14px;border-top:1px solid var(--linie);font-weight:600}

  /* So geht's */
  .schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:56px;position:relative;list-style:none;padding:0}
  .schritte::before{content:"";position:absolute;left:16%;right:16%;top:27px;border-top:1.5px dashed var(--linie-aktiv)}
  .schritt{text-align:center;position:relative}
  .schritt .z{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--grund);border:1.5px solid var(--akzent);color:var(--akzent-dunkel);font-weight:700;font-size:1.15rem;display:grid;place-items:center}
  .schritt h3{font-size:1.15rem;margin-bottom:8px}
  .schritt p{color:var(--text-leise);max-width:30ch;margin-inline:auto}
  kbd{font-family:inherit;font-weight:700;font-size:.85em;border:1.5px solid var(--linie-aktiv);border-bottom-width:3px;border-radius:6px;padding:0 6px;background:var(--grund)}

  /* Kaufen */
  .kauf{background:var(--flaeche)}
  .preiskarte{max-width:860px;margin:48px auto 0;background:var(--grund);border-radius:24px;box-shadow:var(--schatten);display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden}
  .preiskarte .links{padding:clamp(24px,4vw,44px)}
  .preiskarte h3{font-size:1.35rem}
  .haken{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
  .haken li{display:flex;gap:10px;align-items:flex-start}
  .haken li::before{content:"";flex:none;width:18px;height:10px;margin-top:6px;border-left:2.5px solid var(--akzent-dunkel);border-bottom:2.5px solid var(--akzent-dunkel);transform:rotate(-45deg) translate(2px,-2px)}
  .preiskarte .rechts{padding:clamp(24px,4vw,44px);border-inline-start:1px solid var(--linie);display:grid;gap:14px;align-content:center}
  /* Laufzeit-Umschalter mit einem Großpreis (b5 C): zwei Optionsfelder, umgeblendet per CSS, kein Skript.
     Ohne :has() (alte Browser) stehen beide Preise untereinander. */
  /* Beide Knöpfe teilen sich die Breite und brechen um, statt hinauszuragen (Desktop en ragte 2026-10-27 um 49 px hinaus) */
  .laufzeit{border:0;margin:0;min-inline-size:0;max-width:100%;padding:4px;display:flex;justify-self:stretch;background:var(--flaeche);border-radius:18px;box-shadow:inset 0 0 0 1px var(--linie)}
  .laufzeit input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
  .laufzeit label{flex:1 1 0;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;overflow-wrap:anywhere;gap:4px 6px;padding:8px 10px;border-radius:14px;font-weight:600;cursor:pointer;color:var(--text-leise)}
  .laufzeit input:checked+label{background:var(--grund);color:var(--text);box-shadow:0 0 0 1.5px var(--akzent),0 1px 3px rgba(20,24,29,.12)}
  .laufzeit input:focus-visible+label{outline:3px solid var(--fokus);outline-offset:2px}
  .empf{font-size:.72rem;font-weight:700;background:var(--akzent);color:var(--auf-akzent);border-radius:999px;padding:2px 8px}
  .preisfeld{text-align:center}
  .preisfeld .gross{color:var(--text-leise);font-size:.95rem}
  .preisfeld .gross strong{display:inline-block;font-size:2.5rem;font-weight:750;line-height:1.1;color:var(--text);letter-spacing:-.02em;margin-inline-end:6px}
  .preisfeld .leise{color:var(--text-leise);font-size:.92rem;margin-top:4px}
  .rechts:has(#lz-jahr:checked) .p-monat,.rechts:has(#lz-monat:checked) .p-jahr{display:none}
  .pc-hinweis{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--linie-aktiv);border-radius:12px;padding:12px 14px;font-size:.92rem;line-height:1.5;color:var(--text)}
  .pc-hinweis svg{flex:none;width:22px;height:22px;stroke:var(--akzent-dunkel);margin-top:1px}
  /* Startweg als Zeitleiste über der Preiskarte (b6 C) */
  .startweg{list-style:none;padding:0;margin:44px auto 0;max-width:860px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative;counter-reset:sw}
  .startweg::before{content:"";position:absolute;inset-inline:16.6%;top:18px;border-top:2px solid var(--linie)}
  .startweg li{position:relative;counter-increment:sw;display:grid;gap:6px;justify-items:center;align-content:start;text-align:center}
  .startweg li::before{content:counter(sw);width:36px;height:36px;border-radius:50%;background:var(--akzent);color:var(--auf-akzent);font-weight:700;display:grid;place-items:center;margin-bottom:4px}
  .startweg h3{font-size:1rem}
  .startweg p{color:var(--text-leise);font-size:.9rem;max-width:30ch}
  .startweg .hinweis{font-size:.86rem}
  .testbedingung{color:var(--text);font-size:1rem;line-height:1.5;text-align:center}
  .preiskarte small{color:var(--text-leise);font-size:.86rem;text-align:center;line-height:1.5}
  /* Microsoft-Store-Abzeichen: offizielles Bild lokal, Hoehe 44 px = Mindestgroesse fuer Ziele */
  .store-abzeichen{display:inline-flex;align-self:center;border-radius:6px}
  .store-abzeichen img{display:block;width:auto;height:44px}
  .preiskarte .store-abzeichen{justify-self:center}
  .kleingedruckt{max-width:860px;margin:28px auto 0;display:grid;gap:10px;color:var(--text-leise);font-size:.86rem;line-height:1.55}

  /* Systemvoraussetzungen (b8, 2026-10-26): Tabelle Mindestens / Empfohlen, drei kurze Spalten bleiben am Handy lesbar */
  #system p{max-width:760px;margin:16px auto 0;color:var(--text-leise)}
  #system p.unter{text-align:center;color:var(--text);font-weight:600}
  .systab{width:100%;max-width:760px;margin:32px auto 8px;border-collapse:collapse}
  .systab th,.systab td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
  .systab thead th{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
  .systab tbody th{font-weight:600}

  /* Datenschutz direkt nach „Dort, wo Sie gerade schreiben" (b1 A): zwei gleich gebaute Karten, Selbsttest darunter */
  .schutz{text-align:center;padding-block:0 clamp(56px,8vw,96px)}
  .schutz .unter{margin-inline:auto}
  .schutz-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:860px;margin:40px auto 0;text-align:start}
  .schutz-karte{border:1px solid var(--linie);border-top:3px solid var(--linie-aktiv);border-radius:14px;padding:22px 24px;background:var(--grund);box-shadow:var(--schatten)}
  .schutz-karte.bleibt{border-top-color:var(--akzent)}
  .schutz-karte h3{font-size:1.1rem}
  .schutz-karte .leise{color:var(--text-leise);font-size:.9rem;margin-top:2px}
  .schutz-karte ul{margin:14px 0 0;padding-inline-start:20px;display:grid;gap:6px}
  .selbst{max-width:860px;margin:16px auto 0;background:var(--flaeche);border-radius:12px;padding:14px 20px;font-size:.95rem}

  /* Echte App-Bilder (b9): ein großes, zwei kleine */
  .ansicht{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin-top:48px}
  .ansicht figure{margin:0}
  .ansicht .gross{grid-column:1 / -1;max-width:920px;justify-self:center}
  .ansicht img{width:100%;border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten)}
  /* Einsatzbereiche (SEO b10 Nr. 4): Verweise auf die Zielgruppenseiten, aus seiten.json */
  .einsatz-liste{list-style:none;margin:36px auto 0;padding:0;max-width:920px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
  .einsatz-liste a{display:block;height:100%;padding:16px 20px;background:var(--grund);border:1px solid var(--linie);border-radius:14px;color:var(--text);font-weight:600}
  .einsatz-liste a:hover{border-color:var(--akzent)}
  .ansicht figcaption{margin-top:12px;text-align:center;color:var(--text-leise);font-size:.95rem}

  /* Runder Schwebeknopf am Handy (b8 C), mit Testtagen aus preise.json */
  .schwebe{display:none}

  /* Häufige Fragen */
  .fragen{background:var(--flaeche)}
  .faq{display:grid;gap:12px;max-width:820px;margin:40px auto 0}
  .faq details{background:var(--grund);border:1px solid var(--linie);border-radius:14px}
  .faq summary{cursor:pointer;padding:18px 22px;font-weight:600;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;list-style:none;border-radius:14px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-weight:700;color:var(--akzent-dunkel);flex:none}
  .faq details[open] summary::after{content:"\2212"}
  .faq details p{padding:0 22px 20px;color:var(--text-leise);font-size:.98rem}

  /* Fuß */
  .fuss{border-top:1px solid var(--linie);padding-block:28px;font-size:.92rem;color:var(--text-leise)}
  .fuss .bahn{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
  .fuss-spalten{display:flex;flex-wrap:wrap;gap:22px 56px;flex-basis:100%;order:3}
  .fuss nav.links{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;flex:1 1 420px;align-content:flex-start}
  .fuss nav.links.einsatz{flex:0 1 auto}
  .fuss-titel{flex-basis:100%;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin:0 0 2px}
  .fuss nav.links a,.fuss-knopf{color:var(--text-leise)}
  .fuss nav.links a:hover,.fuss-knopf:hover{color:var(--text)}
  .fuss nav.links a[aria-current]{color:var(--text);font-weight:600}
  .fuss nav.links a.kuendigen{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
  .fuss-knopf{font:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
  .fuss-anschrift{font-style:normal;flex-basis:100%;order:4;margin:0}
  .sprache{display:inline-flex;border:1.5px solid var(--linie-aktiv);border-radius:999px;overflow:hidden;font-weight:600;font-size:.85rem}
  .sprache a{padding:6px 14px;text-decoration:none;color:var(--text);min-height:32px;display:inline-flex;align-items:center}
  .sprache a[aria-current]{background:var(--text);color:var(--grund)}

  /* Impressum (Beschriftungen je Sprache, Firmendaten deutsch) */
  .impressum{border-top:1px solid var(--linie);background:var(--flaeche);padding-block:clamp(44px,6vw,72px)}
  .impressum h2{font-size:1.2rem;margin:0 0 clamp(26px,3vw,36px);padding-bottom:14px;border-bottom:1px solid var(--linie);position:relative}
  .impressum h2::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:40px;height:2px;background:var(--akzent)}
  .impressum-block{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start}
  .impressum-firma{border-top:1px solid var(--linie);padding-top:11px}
  .impressum-block .firma{font-weight:700;font-size:1.06rem;margin:0 0 .45em}
  .impressum-block address{font-style:normal;color:var(--text-leise);line-height:1.55;margin:0}
  .impressum-block dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:0 clamp(24px,4vw,48px);margin:0;border-bottom:1px solid var(--linie)}
  .impressum-block dl>div{border-top:1px solid var(--linie);padding-block:11px 12px}
  .impressum-block dt{color:var(--text-leise);font-size:.88rem;line-height:1.45}
  .impressum-block dd{margin:0;font-size:.97rem;line-height:1.5;overflow-wrap:anywhere}

  /* Einwilligungsbanner (assets/einwilligung.js): flache Leiste am unteren Rand über die ganze Breite, damit die
     Vorführung frei bleibt (b7 A, MUSS 18 vom 2026-10-26); Text links in kleiner Schrift, Knöpfe und „Einstellungen" rechts
     in einer Reihe; beide Hauptknöpfe gleich gestaltet. Solange sie offen ist, bekommt die Seite unten Platz,
     damit nichts dauerhaft darunter liegt (z. B. „Zurück zur Website" auf der Danke-Seite). */
  .einw[hidden],.einw [hidden]{display:none}
  .einw{position:fixed;inset-inline:0;bottom:0;z-index:50;max-height:70vh;overflow-y:auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 28px;align-items:center;
    background:var(--grund);color:var(--text);border-top:1px solid var(--linie);box-shadow:var(--schatten-gross);
    padding:10px max(clamp(16px,4vw,40px),calc((100% - var(--bahn)) / 2 + 40px)) calc(10px + env(safe-area-inset-bottom,0px));font-size:.78rem;line-height:1.45}
  body:has(.einw:not([hidden])){padding-bottom:180px}
  .einw:focus{outline:none}
  .einw h2{grid-column:1;font-size:.86rem;margin:0;letter-spacing:-.01em}
  .einw p{grid-column:1;margin:0;color:var(--text-leise)}
  .einw-wahl{grid-column:1;display:grid;gap:8px;margin:6px 0 0}
  .einw-zeile{display:flex;gap:12px;align-items:flex-start;color:var(--text-leise)}
  .einw-zeile input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--akzent)}
  .einw-zeile strong{color:var(--text)}
  .einw-knoepfe{grid-column:2;grid-row:1 / span 3;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;justify-content:flex-end}
  /* b7 A (2026-10-26): beide Knöpfe neutral und gleich, keiner wirkt durch Farbe als der „richtige" */
  .einw-knopf{flex:0 0 auto;min-width:9.5rem;min-height:44px;padding:8px 20px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;background:var(--grund);color:var(--text);border:0;box-shadow:inset 0 0 0 1.5px var(--linie-aktiv)}
  .einw-knopf:hover{background:var(--flaeche)}
  .einw-link{flex:0 0 auto;min-height:44px;padding:8px 6px;font:inherit;cursor:pointer;background:none;border:0;color:var(--akzent-dunkel);text-decoration:underline}
  .einw-link:hover{color:var(--text)}

  @media (max-width:980px){
    .vier{grid-template-columns:repeat(2,1fr)}
    .impressum-block{grid-template-columns:minmax(0,1fr);gap:24px}
    .impressum-firma{border-top:0;padding-top:0}
  }
  @media (max-width:760px){
    .kopf .bahn{gap:14px;min-height:64px}
    .kopf nav{gap:16px}
    .kopf nav .text{display:none}
    .schritte{grid-template-columns:1fr}.schritte::before{display:none}
    .preiskarte{grid-template-columns:minmax(0,1fr)}.preiskarte .rechts{border-inline-start:0;border-top:1px solid var(--linie)}
    /* Banner am Handy (b7 A): „Einstellungen" oben rechts, die beiden Knöpfe gleich breit nebeneinander */
    .einw{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px;padding-block-start:8px;font-size:.76rem;line-height:1.4}
    body:has(.einw:not([hidden])){padding-bottom:200px}
    .einw h2{grid-column:1 / -1;grid-row:1;align-self:center;font-size:.84rem;padding-inline-end:96px}
    .einw p,.einw-wahl{grid-column:1 / -1}
    .einw-knoepfe{display:contents}
    .einw-knopf{min-width:0;margin-top:6px;padding-inline:12px}
    .einw-link[data-einw="einstellungen"]{grid-column:2;grid-row:1;justify-self:end;min-height:32px;padding:4px 0;font-size:.8rem}
    .laufzeit{align-self:stretch}
    .einw-link[data-einw="speichern"]{grid-column:1 / -1;justify-self:start}
    .startweg{grid-template-columns:minmax(0,1fr);gap:24px}.startweg::before{display:none}
    .schutz-karten{grid-template-columns:minmax(0,1fr)}
    .ansicht{grid-template-columns:minmax(0,1fr)}
    .systab th,.systab td{padding:10px 8px;font-size:.92rem}
    .schwebe{position:fixed;z-index:40;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:84px;height:84px;border-radius:50%;
      display:grid;place-content:center;justify-items:center;text-align:center;background:var(--akzent);color:var(--auf-akzent);text-decoration:none;font-weight:700;font-size:1.02rem;line-height:1.15;box-shadow:0 6px 20px rgba(20,24,29,.28)}
    .schwebe:hover{background:var(--akzent-dunkel);color:var(--auf-akzent)}
    .schwebe small{font-size:.7rem;font-weight:600}
    .impressum{padding-bottom:120px}
  }
  @media (max-width:520px){
    .vier{grid-template-columns:1fr}
    .pille .wort{display:none}
    .marke{font-size:1rem;gap:8px}
    .marke img{width:28px;height:28px}
    .kopf nav{gap:12px;font-size:.9rem}
    .kopf nav a.knopf{padding:8px 14px;font-size:.88rem}
    .sprachwechsel .lang{display:none}.sprachwechsel .kurz{display:inline}
    .doc{inset:7% 5% 0}
    .feld{font-size:.6rem}
  }
  @media (max-width:420px){
    .kopf .bahn{padding-inline:14px;gap:10px}
    .marke{font-size:.95rem;gap:6px}
    .kopf nav{gap:10px;font-size:.88rem}
    .kopf nav a.knopf{padding:8px 12px;font-size:.85rem}
  }
  @media (prefers-reduced-motion:reduce){ .tipp{animation:none;clip-path:none} .cursor,.klick{animation:none} }

/* ==== Teil 2/3: Nischenseiten (aus dem statischen Bau) ==== */
/* Nur fuer die Nischenseiten (Design Ruhig); Grundwerte, Kopf, Fuss, Knoepfe und Banner kommen aus dem
     gemeinsamen Stylesheet der Startseite (der Style-Block davor). Eigene Klassen mit n-, damit nichts kollidiert. */
  .n-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,72px);align-items:center;padding-block:clamp(40px,7vw,88px)}
  .n-hero:not(:has(figure)){grid-template-columns:minmax(0,1fr);text-align:center}
  /* Ohne Kopfbild (einsprachige Zielgruppenseiten): Text und Knoepfe ebenfalls mittig, wie die Ueberschrift */
  .n-hero:not(:has(figure)) .n-gross,.n-hero:not(:has(figure)) .hinweis{margin-inline:auto}
  .n-hero:not(:has(figure)) .knoepfe{justify-content:center}
  .n-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:750;line-height:1.1}
  .n-hero .n-gross{color:var(--text-leise);font-size:clamp(1.05rem,1.7vw,1.2rem);max-width:46ch;margin:20px 0 28px}
  .n-hero .knoepfe{justify-content:flex-start}
  .n-hero .n-klein{color:var(--text-leise);font-size:.9rem;margin-top:18px}
  .n-hero .hinweis{margin-top:16px;max-width:52ch}
  .n-bild{margin:0}
  .n-bild img{margin-inline:auto;border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten-gross)}
  .n-hero .n-bild img{max-width:min(100%,420px)}
  .n-abschnitt{padding-block:clamp(56px,8vw,104px)}
  .n-ruhig{background:var(--flaeche)}
  .n-titel{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1.15;text-align:center;margin-bottom:clamp(32px,4vw,52px)}
  .n-schritte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,72px);align-items:center}
  .n-schritte:not(:has(figure)){grid-template-columns:minmax(0,1fr)}
  .n-schritte ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,30px);counter-reset:n}
  .n-schritte li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;counter-increment:n}
  .n-schritte li::before{content:counter(n);grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--akzent);color:var(--akzent-dunkel);font-weight:700;display:grid;place-items:center}
  .n-schritte h3{font-size:1.12rem;margin-bottom:4px}
  .n-schritte p{color:var(--text-leise)}
  .n-schritte .n-bild img{max-width:min(100%,380px)}
  .n-beispiele{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .n-beispiele article{background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:24px 24px 26px}
  .n-gruppe{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-dunkel);margin-bottom:10px}
  .n-beispiele h3{font-size:1.1rem;margin-bottom:8px}
  .n-beispiele .n-text{color:var(--text-leise)}
  .n-beispiele .n-nutzen{margin-top:12px;font-weight:600}
  .n-vertrauen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(24px,4vw,48px)}
  .n-vertrauen article{border-top:2px solid var(--akzent);padding-top:18px}
  .n-vertrauen h3{font-size:1.08rem;margin-bottom:6px}
  .n-vertrauen p{color:var(--text-leise)}
  .n-anders{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,64px);align-items:center}
  .n-anders h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:20px}
  .n-fachwort p{color:var(--text-leise);max-width:52ch}
  .n-fachwort .n-bild img{max-width:min(100%,460px)}
  .n-schluss{text-align:center}
  .n-schluss p{color:var(--text-leise);max-width:52ch;margin:14px auto 28px}
  .n-schluss .hinweis{margin:20px auto 0}
  .n-verweise{display:grid;gap:8px;color:var(--text-leise);font-size:.92rem;padding-block:28px}
  .n-verweise-titel{font-size:1rem;color:var(--text);margin-bottom:2px}
  .n-einsatz{margin:0;padding-inline-start:20px;display:grid;gap:4px}
  /* Verweiskachel auf den Preisblock der Startseite (b10 A, Teil 10): keine Betraege hier, nur der Weg dorthin */
  .n-kachel{max-width:760px;margin:0 auto clamp(48px,7vw,88px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
    border:1px solid var(--linie);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--schatten)}
  .n-kachel h2{font-size:1.1rem}
  .n-kachel p{color:var(--text-leise);font-size:.95rem;margin-top:4px;max-width:46ch}
  .n-krumen{padding-top:18px;font-size:.9rem;color:var(--text-leise)}
  .n-krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
  .n-krumen li+li::before{content:"\203A";margin-inline-end:8px;color:var(--text-leise)}
  .n-krumen a{color:var(--text-leise)}
  .n-krumen [aria-current]{color:var(--text)}
  .n-hero{padding-top:clamp(24px,5vw,64px)}
  @media (max-width:860px){
    .n-hero,.n-schritte,.n-anders{grid-template-columns:minmax(0,1fr)}
    .n-beispiele{grid-template-columns:minmax(0,1fr)}
  }

/* ==== Teil 2/3: Rechtstexte, nur body.page-template-page-recht (aus dem statischen Bau) ==== */
body.page-template-page-recht .kopf{border-bottom:1px solid var(--linie)}
body.page-template-page-recht .rechtstext{max-width:820px;padding-block:clamp(32px,5vw,56px) clamp(56px,8vw,88px);line-height:1.65}
body.page-template-page-recht .rechtstext h1{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;line-height:1.2;margin:0 0 .3rem}
body.page-template-page-recht .rechtstext .stand{color:var(--text-leise);margin:0 0 2rem}
body.page-template-page-recht .rechtstext h2{font-size:1.2rem;line-height:1.3;margin:2.2rem 0 .6rem;padding-top:.4rem}
body.page-template-page-recht .rechtstext h3{font-size:1.02rem;margin:1.4rem 0 .4rem}
body.page-template-page-recht .rechtstext p,body.page-template-page-recht .rechtstext li{margin:0 0 .8rem}
body.page-template-page-recht .rechtstext ol.abs{padding-inline-start:1.4rem}
body.page-template-page-recht .rechtstext ol.abs>li{margin-bottom:.9rem}
body.page-template-page-recht .rechtstext .kasten{border:1px solid var(--linie);background:var(--flaeche);border-radius:14px;padding:1rem 1.25rem;margin:1.2rem 0}
body.page-template-page-recht .rechtstext .kasten .knopf{margin-top:.2rem}
body.page-template-page-recht .rechtstext table{border-collapse:collapse;width:100%;margin:.6rem 0 1rem;font-size:.95rem}
body.page-template-page-recht .rechtstext th,body.page-template-page-recht .rechtstext td{text-align:start;padding:.5rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}
body.page-template-page-recht .rechtstext th{color:var(--text-leise);font-weight:600}
body.page-template-page-recht .rechtstext code{font-size:.93em}
body.page-template-page-recht .rechtstext .tabelle{overflow-x:auto}
body.page-template-page-recht .rechtstext .zeile{display:inline;height:auto;width:auto;margin:0;background:none;border-radius:0}
body.page-template-page-recht .fuss nav.links a[aria-current]{color:var(--text);font-weight:600}

/* ==== Teil 2/3: Fehlerseite, nur body.error404 (aus dem statischen Bau) ==== */
body.error404{min-height:100vh;display:flex;flex-direction:column;background:var(--flaeche)}
body.error404 .kopf{background:var(--grund);border-bottom:1px solid var(--linie)}
body.error404 .rueckkehr{flex:1;padding-block:clamp(48px,9vw,104px)}
body.error404 .rueckkehr .bahn{max-width:760px}
body.error404 .karte{background:var(--grund);border-radius:24px;box-shadow:var(--schatten);padding:clamp(28px,6vw,52px);text-align:center}
body.error404 .karte + .karte{margin-top:24px}
body.error404 .karte h1,body.error404 .karte h2{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:700;line-height:1.15;margin-bottom:18px}
body.error404 .karte p{color:var(--text-leise);margin-bottom:28px}
body.error404 .fuss{background:var(--grund)}

/* ==== Teil 2/3: Rueckkehrseite, nur body:has(.rueckkehr) (aus dem statischen Bau) ==== */
body:has(.rueckkehr){min-height:100vh;display:flex;flex-direction:column;background:var(--flaeche)}
body:has(.rueckkehr) .kopf{background:var(--grund);border-bottom:1px solid var(--linie)}
body:has(.rueckkehr) .rueckkehr{flex:1;padding-block:clamp(48px,9vw,104px)}
body:has(.rueckkehr) .rueckkehr .bahn{max-width:760px}
body:has(.rueckkehr) .karte{background:var(--grund);border-radius:24px;box-shadow:var(--schatten);padding:clamp(28px,6vw,52px);text-align:center}
body:has(.rueckkehr) .karte h1{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:700;line-height:1.15;margin-bottom:18px}
body:has(.rueckkehr) .karte p{color:var(--text-leise);margin-bottom:28px}
body:has(.rueckkehr) .karte .nebenweg{margin-bottom:0;font-size:.95rem}
body:has(.rueckkehr) .karte .hinweis{text-align:start}
body:has(.rueckkehr) .karte [data-weg][hidden]{display:none}
body:has(.rueckkehr) .fuss{background:var(--grund)}

/* ==== Teil 4: Anpassung an das Block-Markup ==== */
/* Gleiche Klassennamen wie die Vorlage; hier nur, was das Block-Markup anders verschachtelt
   (Knopf-Hülle, Navigation als Liste, Tabelle in figure, Impressum ohne dl). */

/* Kein Fluss-Abstand von WordPress: Abstände setzt allein dieses Stylesheet */
.wp-site-blocks{min-height:100vh}
.wp-block-group{box-sizing:border-box}

/* ---- Knöpfe: der Button-Block legt die Klasse auf die Hülle, gestaltet wird der Link ---- */
.wp-block-button.knopf{display:contents}
.wp-block-button.knopf>.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--akzent);color:var(--auf-akzent);font-weight:600;text-decoration:none;border-radius:999px;padding:16px 30px;font-size:1.02rem;line-height:1.6;border:0;cursor:pointer;font-family:inherit;min-height:44px;box-sizing:border-box;width:auto}
.wp-block-button.knopf>.wp-block-button__link:hover{background:var(--akzent-dunkel);color:var(--auf-akzent)}
.wp-block-button.knopf.leise>.wp-block-button__link{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--linie-aktiv)}
.wp-block-button.knopf.leise>.wp-block-button__link:hover{background:var(--flaeche);color:var(--text)}
.wp-block-buttons.knoepfe{gap:12px}

/* ---- Kopf: Teil "Kopf DE/EN" im <header class="kopf"> ---- */
.kopf .marke a{display:flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;min-height:44px}
.kopf .marke img{width:32px;height:32px;object-fit:contain;flex:none}
.kopf .wp-block-navigation{display:flex;align-items:center;gap:26px;font-size:.95rem}
.kopf .wp-block-navigation .wp-block-navigation__container{gap:26px;align-items:center;flex-wrap:nowrap}
.kopf .wp-block-navigation .wp-block-navigation-item__content{color:var(--text);text-decoration:none;font-weight:500;padding:0}
.kopf .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--akzent-dunkel)}
.kopf .wp-block-navigation .sprachwechsel>.wp-block-navigation-item__content{font-weight:600}
.kopf .wp-block-navigation .knopf>.wp-block-navigation-item__content{display:inline-flex;align-items:center;justify-content:center;background:var(--akzent);color:var(--auf-akzent);font-weight:600;border-radius:999px;padding:10px 20px;font-size:.95rem;white-space:nowrap;min-height:44px}
.kopf .wp-block-navigation .knopf>.wp-block-navigation-item__content:hover{background:var(--akzent-dunkel);color:var(--auf-akzent)}
/* Die Vorlage blendet .kopf nav .text am Handy aus; im Block-Markup sitzt die Klasse am Listeneintrag */
.kopf .wp-block-navigation li.text{display:flex}

/* ---- Hero ---- */
.hero p.klein{display:block;max-width:none;margin:18px auto 0;color:var(--text-leise);font-size:.9rem;line-height:1.6}
.hero p.klein.zahlungsart{margin-top:14px}

/* ---- Vier Beispielfenster: Fensterpunkte als Pseudo-Element, Markierung am Absatz ---- */
.fenster p.tl{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--flaeche);border-bottom:1px solid var(--linie);font-size:.74rem;color:var(--text-leise);line-height:1.6}
.fenster p.tl::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--linie);box-shadow:14px 0 0 var(--linie),28px 0 0 var(--linie);margin-inline-end:34px}
.fenster .inhalt>p.markiert,.fenster .eingabe>p.markiert{display:inline;background:var(--gruen-hauch);color:var(--text);border-radius:4px;padding:1px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fenster p.adr{display:inline-block}
.fenster .inhalt>p.adr{display:block;width:max-content;max-width:100%}

/* ---- So geht's: Nummern per Zähler statt fester Zahl ---- */
.wp-block-group.schritte{counter-reset:schritt;margin-block-end:1em}
.schritte>.schritt{counter-increment:schritt}
.schritte>.schritt::before{content:counter(schritt);width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--grund);border:1.5px solid var(--akzent);color:var(--akzent-dunkel);font-weight:700;font-size:1.15rem;display:grid;place-items:center;position:relative}

/* ---- Bilder und Video ---- */
.ansicht figure.wp-block-image{margin:0}
.ansicht figure.wp-block-image figcaption{margin:12px 0 0}
.wp-block-video.echt-video{display:block;width:100%;max-width:920px;margin:40px auto 0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:var(--schatten-gross)}
.wp-block-video.echt-video video{display:block;width:100%;height:100%;object-fit:contain}
.wp-block-video.echt-video video::-webkit-media-controls-mute-button,.wp-block-video.echt-video video::-webkit-media-controls-volume-slider,.wp-block-video.echt-video video::-webkit-media-controls-volume-control-container{display:none}

/* ---- Preiskarte: Betrag (Bindung recsimple/preise) und Einheit als zwei Absätze ---- */
.preisfeld .gross{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:6px;color:var(--text-leise);font-size:.95rem}
.preisfeld .gross .betrag{font-size:2.5rem;font-weight:750;line-height:1.1;color:var(--text);letter-spacing:-.02em}
.rechts:has(.laufzeit input[value="jahr"]:checked) .p-monat,.rechts:has(.laufzeit input[value="monat"]:checked) .p-jahr{display:none}
.pc-hinweis::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;background:var(--akzent-dunkel);
  -webkit-mask:url("assets/bilder/symbol-bildschirm.svg") center/contain no-repeat;
  mask:url("assets/bilder/symbol-bildschirm.svg") center/contain no-repeat}
.preiskarte .wp-block-buttons.knoepfe{display:grid}
.preiskarte .klein{color:var(--text-leise);font-size:.86rem;text-align:center;line-height:1.5}

/* ---- Systemvoraussetzungen: Tabellenblock (figure > table) ---- */
.wp-block-table.systab{overflow-x:auto}
.wp-block-table.systab table{width:100%;border-collapse:collapse;table-layout:auto}
.wp-block-table.systab :is(thead,tbody,tfoot){border:0}
.wp-block-table.systab :is(th,td){border:0;border-bottom:1px solid var(--linie);text-align:start;padding:12px 14px;vertical-align:top}
@media (max-width:760px){.wp-block-table.systab :is(th,td){padding:10px 8px;font-size:.92rem}}
.wp-block-table.systab thead th{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.wp-block-table.systab tbody th{font-weight:600}

/* ---- Häufige Fragen (Details-Block) ---- */
.faq .wp-block-details{margin:0}
.faq .wp-block-details>p{padding:0 22px 20px;color:var(--text-leise);font-size:.98rem}

/* ---- Schwebeknopf: Absatz mit Link (zweite Zeile kursiv gesetzt = klein) ---- */
.schwebe a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;color:inherit;text-decoration:none}
.schwebe strong{font-weight:700}
.schwebe em{font-style:normal;font-size:.7rem;font-weight:600}
.schwebe br{display:none}

/* ---- Fuß: Teil "Fuß DE/EN" im <footer class="fuss"> ---- */
.fuss .herkunft{margin:0}
/* Der Navigationsblock setzt die Klasse auch auf die Liste: Rahmen nur am nav */
.fuss ul.sprache{border:0;border-radius:0;font-size:inherit}
.fuss .sprache .wp-block-navigation__container{gap:0;flex-wrap:nowrap}
.fuss .sprache .wp-block-navigation-item__content{padding:6px 14px;text-decoration:none;color:var(--text);min-height:32px;display:inline-flex;align-items:center}
.fuss .sprache .aktiv>.wp-block-navigation-item__content{background:var(--text);color:var(--grund)}
.fuss .links{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;flex:1 1 420px;align-content:flex-start}
.fuss .links.einsatz{flex:0 1 auto}
.fuss .links .fuss-nav,.fuss .links .fuss-nav .wp-block-navigation__container{display:contents}
.fuss .links .wp-block-navigation-item__content{color:var(--text-leise);padding:0;text-decoration:underline}
.kopf ul.kopf-nav{font-size:inherit}
.fuss .links .wp-block-navigation-item__content:hover{color:var(--text)}
.fuss .links .kuendigen>.wp-block-navigation-item__content{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.fuss .links .current-menu-item>.wp-block-navigation-item__content{color:var(--text);font-weight:600}
.fuss .fuss-nav.wp-block-navigation{font-size:inherit}

/* ---- Impressum: Teil "Impressum DE/EN"; Angaben als Gruppen statt dl ---- */
.impressum-block .anschrift{color:var(--text-leise);line-height:1.55;margin:0}
.impressum-block .angaben{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:0 clamp(24px,4vw,48px);margin:0;border-bottom:1px solid var(--linie)}
.impressum-block .angaben>div{border-top:1px solid var(--linie);padding-block:11px 12px}
.impressum-block .dt{color:var(--text-leise);font-size:.88rem;line-height:1.45}
.impressum-block .dd{margin:0;font-size:.97rem;line-height:1.5;overflow-wrap:anywhere}

/* ---- Seitenvorlagen ---- */
.rueckkehr .wp-block-template-part{display:contents}
.rueckkehr .karte .knoepfe{margin-top:4px}
.seite{padding-block:clamp(32px,5vw,56px) clamp(56px,8vw,88px)}
.seite>h1,.hilfe>h1{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;line-height:1.2;margin:0 0 1.2rem}
.hilfe{max-width:820px;padding-block:clamp(32px,5vw,56px) clamp(56px,8vw,88px)}
.hilfe .entry-content>*+*,.seite .entry-content>*+*{margin-block-start:1rem}

/* ---- Kopf am Handy (neu 2026-10-28): Marke | Sprache als Umschalter mit Weltkugel | Anmelden als Rahmenknopf.
   „Kostenlos testen“ übernimmt am Handy der Schwebeknopf, damit die Kopfzeile nicht mehr gedrängt wirkt
   und „EN“ nicht wie ein Teil des Namens aussieht. ---- */
@media (max-width:760px){
  .kopf .wp-block-navigation li.text{display:none}
  .kopf .wp-block-navigation,.kopf .wp-block-navigation .wp-block-navigation__container{gap:16px}
}
@media (max-width:520px){
  .kopf .bahn{gap:12px}
  .kopf .wp-block-navigation,.kopf .wp-block-navigation .wp-block-navigation__container{gap:8px;font-size:.88rem}
  .kopf .wp-block-navigation li.knopf{display:none}
  .kopf .wp-block-navigation :is(.sprachwechsel,.anmelden)>.wp-block-navigation-item__content{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--linie-aktiv);font-weight:600;white-space:nowrap}
  .kopf .wp-block-navigation .sprachwechsel>.wp-block-navigation-item__content{color:var(--text-leise)}
  .kopf .wp-block-navigation .sprachwechsel>.wp-block-navigation-item__content::before{content:"";width:16px;height:16px;flex:none;background:currentColor;
    -webkit-mask:url("assets/bilder/symbol-weltkugel.svg") center/contain no-repeat;
    mask:url("assets/bilder/symbol-weltkugel.svg") center/contain no-repeat}
  .kopf .wp-block-navigation .anmelden>.wp-block-navigation-item__content{color:var(--text)}
}
@media (max-width:360px){
  .kopf .marke{font-size:.92rem}
  .kopf .wp-block-navigation .sprachwechsel>.wp-block-navigation-item__content{padding-inline:10px}
}
/* Anschrift im Fuss: statisch nur auf Unterseiten, die Startseite hat den Abschnitt Impressum (A9) */
body.page-template-startseite .fuss-anschrift{display:none}
/* Rechtstexte: Tabellen-Block ohne Kern-Rahmen und Figure-Rand, Linien wie im statischen Bau (A9: Datenschutz +60 px) */
.rechtstext .wp-block-table{margin:0}
.rechtstext .wp-block-table thead{border-bottom:0}
.rechtstext .wp-block-table :is(td,th){border:0;border-bottom:1px solid var(--linie)}
/* SEO-Unterseiten (B4): Fuss als Linkbereich in Spalten (Einsatzbereiche, Funktionen, Ratgeber, Rechtliches), je Spalte eine Liste */
/* nur mit mehreren Spalten; der schlichte Fuss (Danke, Abbruch: nur Rechtliches) bleibt eine Zeile wie im statischen Bau */
.fuss .fuss-spalten:has(>.links~.links){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:28px 40px;align-items:start}
.fuss .fuss-spalten:has(>.links~.links) .links{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:8px;flex:initial}
.fuss .fuss-spalten:has(>.links~.links) .fuss-titel{margin-bottom:4px}
.fuss .fuss-spalten:has(>.links~.links) .fuss-knopf{margin-top:4px}
/* Preis-/Testzeile der SEO-Unterseiten: Saetze aus mehreren Absaetzen, Betraege gebunden an recsimple/preise */
.rs-preiszeile{color:var(--text-leise);font-size:.95rem;margin-top:18px;max-width:52ch}
.n-hero:not(:has(figure)) .rs-preiszeile{margin-inline:auto}
.rs-preiszeile>p{display:inline;margin:0}
.rs-preiszeile>.rs-wert{color:var(--text);font-weight:600}
.rs-schlank{max-width:72ch}
.rs-schlank .n-titel{margin-bottom:clamp(18px,2.4vw,28px)}
.rs-schlank .n-text{color:var(--text-leise);font-size:1.05rem;text-align:center}
.rs-schlank .n-text+.n-text{margin-top:12px}

/* ---- Startseite: Kopf nach Skizze B, Rechner, „Jedes Wort nachprüfbar“ (B3, 2026-10-28) ---- */
.hero-b{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding-block:clamp(28px,4vw,48px) clamp(40px,6vw,72px)}
.hero-b h1{font-size:clamp(2.4rem,4.6vw,3.3rem);font-weight:800;line-height:1.05;letter-spacing:-.035em}
.hero-b h1 .gruen{color:var(--akzent)}
.hero-b .hero-b-unter{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--text-leise);line-height:1.5;max-width:31em;margin:20px 0 28px}
.hero-b ul.punkte{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:14px}
.hero-b .punkt{position:relative;display:flex;align-items:center;min-height:52px;padding-left:68px;font-weight:700;font-size:1.2rem;line-height:1.3}
.hero-b .punkt::before{content:"";position:absolute;left:0;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:14px;background:rgba(76,175,80,.16)}
.hero-b .punkt::after{content:"";position:absolute;left:9px;top:50%;width:34px;height:34px;margin-top:-17px;background:var(--akzent);
  -webkit-mask:var(--symbol) center/contain no-repeat;mask:var(--symbol) center/contain no-repeat}
.hero-b .punkt-pc{--symbol:url("assets/bilder/symbol-pc-schloss.svg")}
.hero-b .punkt-taste{--symbol:url("assets/bilder/symbol-taste-f9.svg")}
.hero-b .punkt-hoeren{--symbol:url("assets/bilder/symbol-hoeren.svg")}
.hero-b .knoepfe{justify-content:flex-start}
.hero-b .wp-block-button.knopf>.wp-block-button__link{padding:18px 36px;font-size:1.1rem;font-weight:700}
.hero-b p.klein{max-width:none;margin:12px 0 0;font-size:.84rem;line-height:1.5;color:var(--text-leise)}
.hero-b p.klein.fakten{margin-top:6px}
.hero-b-bild{position:relative;margin:0}
.hero-b-bild .schirm{background:var(--text);border-radius:20px;padding:14px;box-shadow:0 40px 80px rgba(20,24,29,.18)}
.hero-b-bild .blatt{position:relative;background:var(--grund);border-radius:10px;padding:26px 26px 60px;min-height:280px}
.hero-b-bild .strich{height:9px;border-radius:5px;background:var(--linie);margin-bottom:10px}
.hero-b-bild .strich.b45{width:45%} .hero-b-bild .strich.b30{width:30%} .hero-b-bild .strich.b80{width:80%;margin-top:16px} .hero-b-bild .strich.b62{width:62%}
.hero-b-bild .brief{margin:18px 0 0;font-size:1.02rem;line-height:1.6;border:2px solid var(--akzent);border-radius:10px;padding:12px 14px}
.hero-b-bild .schreibmarke{display:inline-block;width:2px;height:1.1em;background:var(--text);vertical-align:-3px;margin-left:1px}
.hero-b-bild .hoert{position:absolute;right:18px;bottom:16px;display:flex;gap:8px;align-items:center;background:var(--text);color:var(--grund);border-radius:999px;padding:7px 14px 7px 8px;font-size:.82rem}
.hero-b-bild .hoert i{width:22px;height:22px;border-radius:50%;border:2px solid #4caf50}
.hero-b-bild .fuss-pc{width:110px;height:40px;margin:0 auto;background:linear-gradient(#cfd7de,#b8c2cb);clip-path:polygon(30% 0,70% 0,85% 100%,15% 100%)}
.hero-b-bild .siegel{position:absolute;z-index:1;left:-30px;top:-26px;display:flex;gap:10px;align-items:center;background:var(--grund);border:1px solid var(--linie);border-radius:16px;padding:12px 16px;box-shadow:var(--schatten);font-weight:700;font-size:.98rem}
.hero-b-bild .siegel-symbol{width:30px;height:30px;flex:none;background:var(--text-leise);
  -webkit-mask:url("assets/bilder/symbol-wolke-aus.svg") center/contain no-repeat;mask:url("assets/bilder/symbol-wolke-aus.svg") center/contain no-repeat}
.rechner-huelle{padding-top:8px}
.pruef{padding-block:clamp(48px,6vw,72px) clamp(56px,7vw,90px)}
.pruef h2{font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:10px}
.pruef .pruef-satz{color:var(--text-leise);font-size:1.1rem;margin:0 0 26px}
.pruef-beispiel{margin:0;max-width:760px;background:var(--grund);border:1px solid var(--linie);border-radius:14px;padding:22px 26px;box-shadow:var(--schatten)}
.pruef-beispiel .diktat{margin:0;font-size:1.15rem;line-height:1.9}
.pruef-beispiel .wort-markiert{background:rgba(76,175,80,.16);border-bottom:3px solid var(--akzent);border-radius:4px;padding:1px 3px;font-weight:600}
.pruef-beispiel .abspielzeile{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:.82rem;color:var(--text-leise)}
.pruef-beispiel .abspielen{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--akzent)}
.pruef-beispiel .abspielen::after{content:"";position:absolute;inset:8px;background:var(--auf-akzent);
  -webkit-mask:url("assets/bilder/symbol-abspielen.svg") center/contain no-repeat;mask:url("assets/bilder/symbol-abspielen.svg") center/contain no-repeat}
@media (max-width:860px){
  .hero-b{grid-template-columns:1fr;gap:28px}
  .hero-b-bild{margin:10px 18px 0;max-width:520px}
}
@media (max-width:520px){
  .hero-b{padding-block:18px 40px}
  .hero-b .hero-b-unter{margin:16px 0 22px}
  .hero-b .punkt{min-height:44px;padding-left:58px;font-size:1.08rem}
  .hero-b .punkt::before{width:44px;height:44px;margin-top:-22px}
  .hero-b .punkt::after{left:8px;width:28px;height:28px;margin-top:-14px}
  .hero-b .knoepfe,.hero-b .wp-block-button.knopf>.wp-block-button__link{width:100%}
  .hero-b-bild .siegel{left:-12px;top:-20px;font-size:.88rem;padding:8px 12px}
  .hero-b-bild .siegel-symbol{width:24px;height:24px}
  .hero-b-bild .blatt{min-height:0;padding:18px 18px 54px}
  .hero-b-bild .brief{font-size:.95rem}
  .pruef-beispiel{padding:18px 18px}
  .pruef-beispiel .diktat{font-size:1.05rem;line-height:1.8}
}