/* Gemeinsames Look & Feel der statischen oeffentlichen Seiten (body.pp).
   Kopf/Fuss-Regeln selbst stehen in css/public-chrome.css bzw. landing.css;
   hier steht, was die alten Seitenstile daran hindert, sie zu verbiegen —
   und was Seiten ohne Markendesign (body.pp-legacy: Systemschrift, Blau,
   dunkler Verlauf) auf die Marke zieht.
   Wird NACH dem Inline-<style> der Seite geladen (siehe public-chrome-sync). */

/* ── Schutz des gemeinsamen Kopf/Fusses vor alten Seitenregeln ── */
body.pp .footer-nav{background:none;padding:0;display:block;position:static;height:auto}
body.pp #mainNav .nav-cta{background:none;padding:0;border-radius:0;font-size:inherit}
body.pp #mainNav .nav-logo,body.pp #mainNav .nav-logo:hover{text-decoration:none}
body.pp #mainNav .nav-logo-name{color:var(--navy)}
body.pp .btn,body.pp .btn:hover{text-decoration:none}
body.pp #mainNav .btn-primary,body.pp .nav-overlay .btn-primary{color:var(--cream)!important}
body.pp #mainNav .btn-outline,body.pp .nav-overlay .btn-outline{color:var(--navy)!important}
/* Das Menue ist ueberall fix; der Platz dafuer kommt EINMAL vom body —
   nicht von jeder Seitenvorlage auf ihre eigene Art. */
body.pp{font-family:var(--ff-b);padding-top:66px}
body.pp #mainNav{position:fixed;top:0;left:0;right:0;height:66px;z-index:100}
body.pp .nav-overlay{z-index:99}
/* Footer: alte Seitenregeln (eigene Hintergruende, Groessen) duerfen ihn nicht umfaerben */
body.pp footer{margin-top:0;background:#080d1a;color:rgba(255,255,255,.55);text-align:center;padding:2.25rem;font-size:.8rem;line-height:1.8;font-weight:300}
body.pp footer a{color:rgba(255,255,255,.62)}
body.pp footer a:hover{color:#fff}
body.pp footer .footer-col a{color:rgba(255,255,255,.62)}
body.pp footer .footer-col a:hover,body.pp footer .footer-col a:focus{color:#fff}
body.pp footer a{text-decoration:none}
body.pp footer a:hover{text-decoration:underline}
/* Der Hinweis auf sl-urlaubsplaner.de steht im Fliesstext und braucht seine
   Unterstreichung (axe link-in-text-block 1,23:1) - die Zeile darueber nahm sie weg. */
body.pp footer .footer-claim a{text-decoration:underline;text-underline-offset:2px}
body.pp #main-content:focus{outline:none}
/* Blaue Alt-Knoepfe der Rechtsratgeber auf den Marken-CTA ziehen */
body.pp .cta-btn{background:var(--amber);color:var(--navy);border-radius:99px;min-height:48px;display:inline-flex;align-items:center;padding:.7rem 1.75rem;font-weight:700;text-decoration:none}
body.pp .cta-btn:hover{background:#d49019;color:var(--navy);text-decoration:none}

/* ── Seiten ohne Markendesign ─────────────────────────────────── */
body.pp-legacy{
  --blue:#0f1729;--blue-light:#fef3dc;--green:#0db069;
  --gray-50:#f7f4ef;--gray-200:#e2ddd5;--gray-600:#3d4a60;--gray-900:#0f1729;
  font-family:var(--ff-b);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
body.pp-legacy h1,body.pp-legacy h2{font-family:var(--ff-h);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--navy)}
body.pp-legacy h3{font-family:var(--ff-b);color:var(--navy)}
body.pp-legacy .hero{background:var(--cream);color:var(--navy);padding:3.5rem 1.5rem 2.5rem;border-bottom:1px solid var(--border);text-align:center;min-height:0}
body.pp-legacy .hero h1{color:var(--navy);font-weight:700}
body.pp-legacy .hero p{color:var(--ink-2)}
body.pp-legacy .hero .badge,body.pp-legacy .badge{background:var(--amber-l);color:#8a5600;border:1px solid rgba(232,160,32,.35)}
/* Knoepfe ausnehmen: Sonst faerbt die Linkregel weisse Knopfschrift navy auf navy. */
body.pp-legacy .wrap a:not(.slup-nlc-btn):not(.nav-cta):not(.btn):not(.cta-btn),body.pp-legacy main a:not(.slup-nlc-btn):not(.nav-cta):not(.btn):not(.cta-btn),body.pp-legacy .crumb a,body.pp-legacy .crumb-bar a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
body.pp-legacy .wrap a:not(.slup-nlc-btn):not(.nav-cta):not(.btn):not(.cta-btn):hover,body.pp-legacy main a:not(.slup-nlc-btn):not(.nav-cta):not(.btn):not(.cta-btn):hover{color:#8a5600}
body.pp-legacy .crumb,body.pp-legacy .crumb-bar{color:var(--ink-2);font-size:.9rem}
body.pp-legacy .lead{border-left-color:var(--amber);color:var(--ink);background:#fff;border-radius:var(--r)}
body.pp-legacy .pain,body.pp-legacy .note,body.pp-legacy .sources{border-color:var(--border);border-radius:var(--r)}
body.pp-legacy .pain p,body.pp-legacy .faq-a{color:var(--ink-2)}
body.pp-legacy .faq-item{border-bottom-color:var(--border)}
body.pp-legacy .faq-q{min-height:48px;align-items:center;gap:1rem;color:var(--navy)}
body.pp-legacy .related{border-top-color:var(--border)}
body.pp-legacy .cta-box{background:var(--navy);border-radius:var(--r-lg)}
body.pp-legacy .cta-box h2{color:#fff}
body.pp-legacy .cta-box p{color:rgba(255,255,255,.78)}
/* a.nav-cta ist auf diesen Seiten der INHALTS-Knopf (im CTA-Kasten), nicht das Menue */
body.pp-legacy a.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.75rem;border-radius:99px;background:var(--amber);color:var(--navy)!important;font-size:1rem;font-weight:700;text-decoration:none}
body.pp-legacy a.nav-cta:hover{background:#d49019;text-decoration:none}
body.pp-legacy :focus-visible{outline:2px solid var(--navy);outline-offset:2px}
body.pp-legacy footer :focus-visible,body.pp-legacy .cta-box :focus-visible{outline-color:var(--amber)}
@media(max-width:600px){body.pp-legacy .hero{padding:2.5rem 1.25rem 2rem}}
/* Breite Tabellen sprengten am Handy die Seite (bis 249px Querscrollen der
   GANZEN Seite). Jetzt scrollt nur die Tabelle selbst. */
@media(max-width:760px){
  /* vw statt %: In Grid-/Flex-Spalten ohne min-width:0 waechst der Elternkasten
     mit der Tabelle mit, 100 % waeren dann selbst zu breit. */
  body.pp table{display:block;width:auto;min-width:0;max-width:calc(100vw - 2.5rem);overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.pp pre{max-width:calc(100vw - 2.5rem);overflow-x:auto}
  body.pp code{overflow-wrap:anywhere}
  body.pp .csv-preview{max-width:calc(100vw - 2.5rem);overflow-x:auto}
}

/* ── Rechtsseiten (AGB, AVV, Impressum, Kuendigen): Bootstrap-Seiten mit
      frueher lila Verlauf und Indigo-Ueberschriften → Markenfarben ── */
body.pp-legal{background:var(--cream);color:var(--ink)}
body.pp-legal .page-header{background:var(--cream);color:var(--navy);border-bottom:1px solid var(--border);padding:3rem 0 2rem}
body.pp-legal .page-header h1{font-family:var(--ff-h);font-weight:700;letter-spacing:-.02em;color:var(--navy)}
body.pp-legal .page-header p{color:var(--ink-2);opacity:1}
body.pp-legal .page-header .btn-light{background:#fff;border:1.5px solid var(--cream-3);color:var(--navy)}
body.pp-legal .legal-card{border:1px solid var(--border);box-shadow:none;border-radius:var(--r-lg)}
body.pp-legal .legal-card h2{color:var(--navy);border-bottom-color:var(--cream-3);font-family:var(--ff-h)}
body.pp-legal .legal-card p,body.pp-legal .legal-card li{color:var(--ink-2);font-size:1rem}
body.pp-legal .legal-card a,body.pp-legal main a:not(.btn){color:var(--navy);text-decoration:underline;text-underline-offset:3px}
body.pp-legal .version-badge{background:var(--amber-l);color:#8a5600}
body.pp-legal main .btn-primary{background:var(--navy);border-color:var(--navy);color:var(--cream)}
body.pp-legal main .btn-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
/* Bootstrap setzt Links im Menue und Footer sonst blau/unterstrichen */
body.pp #mainNav .nav-links a,body.pp .nav-overlay ul a{text-decoration:none}
body.pp #mainNav .nav-links{margin-bottom:0;padding-left:0}
body.pp .nav-overlay ul{padding-left:0}
body.pp .footer-col ul{padding-left:0;margin-bottom:0}
body.pp p.footer-col-title{margin:0 0 .5rem}
@media print{body.pp #mainNav,body.pp .nav-overlay,body.pp footer,body.pp .skip-link{display:none}body.pp{padding-top:0}}
/* Lange deutsche Komposita ("Auftragsverarbeitungsvertrag") sprengten am Handy die Seite.
   Silbentrennung nur noch auf sehr schmalen Displays: am Desktop trennte sie
   sonst "Installati-on" und kurze Woerter wie "je-dem" (#3688, S3). */
body.pp h1,body.pp h2,body.pp h3{overflow-wrap:break-word;hyphens:manual}
body.pp h1,body.pp h2{text-wrap:balance}
@media(max-width:400px){body.pp h1,body.pp h2,body.pp h3{hyphens:auto;-webkit-hyphenate-limit-before:4;hyphenate-limit-chars:10 4 4}}
/* Dunkle Kaesten: Ueberschriften und Links darin bleiben hell */
body.pp-legacy .cta-box h3,body.pp-legacy .cta h2,body.pp-legacy .cta h3,body.pp-legacy .cta p{color:#fff}
body.pp-legal .page-header .btn-outline-light,body.pp-legal .page-header .btn-outline-light:hover{color:var(--navy);border-color:var(--cream-3);background:#fff}
body.pp-legal .page-header .text-white,body.pp-legal .page-header a.text-white{color:var(--navy)!important}
/* Kontrast (automatisch gemessen, alle unter 3:1): Hero-Plaketten der Tools,
   hellgruene "Ja"-Zellen, hellgraue Fusszeilen der Rechtsseiten */
body.pp-legacy .hero-badge{background:var(--amber-l);color:#8a5600;border:1px solid rgba(232,160,32,.35)}
body.pp td.ok,body.pp .cmp-yes,body.pp .limit-icon.good{color:#0a6b41}
body.pp-legal main p[style*="color:rgba(0,0,0"],body.pp-legal main .text-muted,body.pp-legal main .text-muted a{color:var(--ink-2)!important}
body.pp .article-meta{color:var(--ink-2)}

/* ── Hilfezentrum und Einfuehrungsanleitungen (body.pp-hilfe) ──
   Beide Bereiche haben ein eigenes Variablen-Designsystem in Blau. Statt 900
   Zeilen CSS umzuschreiben, werden die Variablen auf die Marke umgebogen. */
body.pp-hilfe{
  --primary:#0f1729;--primary-light:#2e4270;--primary-dark:#1c2b4a;--accent:#e8a020;
  --gray-50:#f7f4ef;--gray-100:#ede9e1;--gray-200:#e2ddd5;--gray-300:#ddd8cd;
  --gray-400:#7a8599;--gray-500:#5b6678;--gray-600:#3d4a60;--gray-700:#2a3547;--gray-800:#0f1729;--gray-900:#0f1729;
  --bs-primary:#0f1729;--bs-primary-rgb:15,23,41;--bs-link-color:#0f1729;--bs-link-color-rgb:15,23,41;--bs-link-hover-color:#8a5600;--bs-link-hover-color-rgb:138,86,0;
  font-family:var(--ff-b);background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;
}
body.pp-hilfe h1,body.pp-hilfe h2{font-family:var(--ff-h);font-weight:700;letter-spacing:-.02em}
/* Alte fixe blaue Leiste bzw. blauer Verlaufskopf → ruhiger Seitenkopf unter dem Menue */
body.pp-hilfe .header,body.pp-hilfe .guide-header{position:static;background:var(--cream);color:var(--navy);box-shadow:none;border-bottom:1px solid var(--border);padding:2.5rem 1.5rem 2rem}
body.pp-hilfe .header h1,body.pp-hilfe .guide-header h1{color:var(--navy)}
body.pp-hilfe .header .bi{color:var(--amber)}
body.pp-hilfe .guide-header .subtitle{color:var(--ink-2);opacity:1}
body.pp-hilfe .guide-header .logo-badge{background:var(--amber-l);color:#8a5600;border:1px solid rgba(232,160,32,.35)}
body.pp-hilfe .header .btn-light,body.pp-hilfe .header .badge{background:#fff!important;color:var(--navy)!important;border:1.5px solid var(--cream-3)}
body.pp-hilfe main a:not(.btn),body.pp-hilfe .guide-content a:not(.btn),body.pp-hilfe .breadcrumb-bar a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
body.pp-hilfe main a:not(.btn):hover,body.pp-hilfe .guide-content a:not(.btn):hover{color:#8a5600}
body.pp-hilfe main .btn-primary,body.pp-hilfe .container .btn-primary{background:var(--navy);border-color:var(--navy);color:var(--cream)}
body.pp-hilfe main .btn-primary:hover,body.pp-hilfe .container .btn-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
body.pp-hilfe .btn-outline-primary{color:var(--navy);border-color:var(--navy);background:transparent}
body.pp-hilfe .btn-outline-primary:hover{background:var(--navy);color:var(--cream)}
body.pp-hilfe .text-primary{color:var(--navy)!important}
body.pp-hilfe .bg-primary{background-color:var(--navy)!important}
body.pp-hilfe .alert-info,body.pp-hilfe .alert-primary{background:var(--amber-l);border-color:rgba(232,160,32,.35);color:#5c3a00}
body.pp-hilfe .accordion-button:not(.collapsed){background:var(--amber-l);color:var(--navy);box-shadow:none}
body.pp-hilfe .accordion-button:focus{box-shadow:0 0 0 2px var(--navy)}
body.pp-hilfe .feature-icon{background:var(--amber-l);color:#8a5600}
/* Vorlese-Knopf und Trenner standen weiss auf dem frueheren blauen Kopf —
   auf Creme waeren sie unsichtbar (gemessen 1,1:1). 44px statt 36px Klickflaeche. */
body.pp-hilfe .tts-btn{width:44px;height:44px;border:2px solid var(--navy);background:#fff;color:var(--navy);backdrop-filter:none}
body.pp-hilfe .tts-btn:hover{background:var(--amber-l);border-color:var(--navy)}
body.pp-hilfe .tts-btn.playing{background:var(--red);border-color:var(--red);color:#fff}
body.pp-hilfe .tts-duration{color:var(--ink-2);font-size:.8rem}
body.pp-hilfe .breadcrumb-bar .sep{color:var(--ink-3)}
body.pp-hilfe .text-warning{color:#8a5600!important}
/* Weitere Bootstrap-Seiten im pp-legal-Rahmen (TOM, Trust Center, Beta-Danke-Seite) */
body.pp-legal .card,body.pp-legal .trust-card{border:1px solid var(--border);box-shadow:none;border-radius:var(--r-lg)}
body.pp-legal h2,body.pp-legal h3{color:var(--navy)}
body.pp-legal .btn-outline-primary{color:var(--navy);border-color:var(--navy)}
body.pp-legal .btn-outline-primary:hover{background:var(--navy);color:var(--cream)}
body.pp-legal .text-primary{color:var(--navy)!important}
/* Hellgraue Inline-Hinweise (#9ca3af, 2,3:1) — u. a. der Drittland-Hinweis im Trust Center */
body.pp-legal main [style*="#9ca3af"],body.pp-legal main [style*="#9CA3AF"]{color:var(--ink-2)!important}

/* ── Touch-Ziele (WCAG 2.2 SC 2.5.8, #3688) ──────────────────────────────
   Einzeln stehende Textlinks waren 15-17 px hoch: Glossar „Mehr zu …“,
   Brotkrumen, Weiter-Links, Impressum-Fusszeile. Mindestens 24 px (AA),
   Glossar-Links 44 px. Fliesstext-Links bleiben unberuehrt (Ausnahme der Regel). */
body.pp .term>a,body.pp .related a{display:inline-flex;align-items:center;min-height:44px}
body.pp .crumb a,body.pp .crumb-bar a,body.pp .breadcrumb-bar a,body.pp-legal .impressum-fuss a{display:inline-flex;align-items:center;min-height:32px}
/* Zeilenlaenge > 90 Zeichen auf breiten Displays (#3688, S2) */
body.pp aside.rechtshinweis p,body.pp .ax-legal p,body.pp-legal .legal-card p{max-width:68ch}