im Satz zur eigenen Spalte */
.page-hilfe .hf-use{ display:block; position:relative; padding-left:1.5rem; font-size:var(--fs-body); color:var(--ink-soft); line-height:1.6; margin:0 0 clamp(20px,2.6vw,30px); }
.page-hilfe .hf-use .pip{ position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:var(--acid); border:2px solid var(--ink); }
.page-hilfe .hf-szenario{ padding:clamp(22px,3vw,34px); margin-bottom:clamp(16px,2vw,22px); }
.page-hilfe .hf-szenario h2{ font-size:var(--fs-h3); font-weight:900; letter-spacing:-.02em; margin:0 0 .9em; }
.page-hilfe .hf-steps{ list-style:none; counter-reset:hf; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.page-hilfe .hf-steps li{ counter-increment:hf; position:relative; padding-left:3rem; color:var(--ink-soft); line-height:1.6; min-width:0; } /* min-width:0: ein darf die Spalte nicht sprengen */
.page-hilfe .hf-steps li b{ color:var(--ink); }
.page-hilfe .hf-steps li::before{ content:counter(hf); position:absolute; left:0; top:0;
width:2rem; height:2rem; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%;
font-weight:900; font-size:var(--fs-sm); color:var(--ink); background:var(--paper); }
.page-hilfe .hf-steps a{ font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; text-decoration-color:var(--acid); }
/* Monospace nur für kopierbaren Code, nie für Labels */
.page-hilfe code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; background:var(--ash-soft); padding:.05em .35em; border-radius:4px; color:var(--ink); }
.page-hilfe pre{ max-width:100%; margin:.75rem 0 0; padding:.9rem 1.1rem; background:var(--ink); color:#fff; border-radius:var(--r-sm); overflow-x:auto; line-height:1.55; }
.page-hilfe pre code{ background:transparent; padding:0; color:inherit; font-size:.82rem; white-space:pre; }
.page-hilfe .hf-h2{ font-size:var(--fs-h3); font-weight:900; letter-spacing:-.02em; margin:clamp(26px,3.4vw,40px) 0 .8em; }
.page-hilfe .hf-haken{ margin:0; display:grid; gap:.9rem; }
.page-hilfe .hf-hake{ padding:clamp(18px,2.2vw,26px); }
.page-hilfe .hf-hake dt{ font-weight:800; letter-spacing:-.01em; margin:0 0 .35em; }
.page-hilfe .hf-hake dd{ margin:0; color:var(--ink-soft); line-height:1.6; }
.page-hilfe .hf-danach{ margin-top:clamp(26px,3.4vw,40px); padding:clamp(22px,3vw,34px); display:flex; gap:1.4rem 2rem; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--acid); }
.page-hilfe .hf-danach h2{ font-size:var(--fs-lead); font-weight:900; letter-spacing:-.02em; margin:0 0 .3em; }
.page-hilfe .hf-danach p{ margin:0; color:var(--ink); max-width:46ch; line-height:1.55; }
.page-hilfe .hf-danach .btn{ flex:none; }
/* Handy: lange Knopftexte brechen um, der Textblock darf schrumpfen */
.page-hilfe .hf-danach > div{ min-width:0; }
@media (max-width:560px){ .page-hilfe .btn{ white-space:normal; text-align:left; line-height:1.25; } .page-hilfe .hf-danach .btn{ flex:0 1 auto; } }
.page-hilfe .hf-more{ margin:clamp(22px,2.8vw,32px) 0 0; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:600; }
.page-hilfe .hf-more a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
.page-hilfe-index .hf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,20px); }
.page-hilfe-index .hf-card{ display:flex; flex-direction:column; gap:.55rem; padding:clamp(22px,2.8vw,32px); text-decoration:none; color:var(--ink); transition:transform .14s, box-shadow .14s; }
/* „Fang hier an“ ist ein Label: eckiger Tag, nie die runde Knopf-Form */
.page-hilfe-index .hf-card{ position:relative; }
.page-hilfe-index .hf-start{ position:absolute; top:-.7rem; left:1.2rem; background:var(--acid); color:var(--ink);
font-size:var(--fs-2xs); font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem;
border-radius:var(--r-tag); }
@media (hover:hover) and (pointer:fine){ .page-hilfe-index .hf-card:hover{ transform:translateY(-3px); box-shadow:9px 9px 0 var(--ink); } }
.page-hilfe-index .hf-card .ic{ font-size:var(--fs-h2); line-height:1; color:var(--ink); }
.page-hilfe-index .hf-card .nm{ font-weight:800; font-size:var(--fs-lead); letter-spacing:-.02em; }
.page-hilfe-index .hf-card .tg{ color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.5; }
/* Karten-Link der fünf Hubs, ein gemeinsamer Stil */
.page-funktionen-index .fn-card .go, .page-zielgruppen-index .fuer-card .go, .page-compare-overview .detail-card .go,
.page-hilfe-index .hf-card .go, .page-blog-index .post .go, .page-blog .art-card .go{ margin-top:auto; padding-top:.6rem; align-self:flex-start;
display:inline-flex; align-items:center; gap:.4em; font-weight:800; font-size:var(--fs-sm); color:var(--ink); }
.page-hilfe-index .hf-note{ margin:clamp(22px,2.8vw,32px) auto 0; text-align:center; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:600; max-width:60ch; }
.page-hilfe-index .hf-note a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
.page-hilfe-index .hf-gruppe{ font-size:var(--fs-sm); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:clamp(26px,3.2vw,40px) 0 .9rem; }
.page-hilfe-index .hf-gruppe:first-of-type{ margin-top:0; }
/* Am Handy kompakt: das Icon neben Name, Satz und Weg */
@media (max-width:600px){
.page-hilfe-index .hf-card{ display:grid; grid-template-columns:2rem 1fr; column-gap:.8rem; row-gap:.2rem; padding:16px 18px; }
.page-hilfe-index .hf-card .ic{ grid-row:1 / 4; font-size:1.6rem; }
}
@media (max-width:860px){
.page-hilfe-index .hf-grid{ grid-template-columns:1fr; }
.page-hilfe .hf-danach{ align-items:flex-start; flex-direction:column; }
}
/* Funktionen-Übersicht */
.page-funktionen-index .hf-hero{ padding-top:clamp(30px,5vw,60px); padding-bottom:clamp(18px,2.6vw,32px); text-align:center; background:transparent; }
.page-funktionen-index .hf-hero .wrap{ max-width:760px; }
.page-funktionen-index .hf-hero h1{ margin:.2em 0 .4em; }
.page-funktionen-index .hf-hero h1 em{ font-style:italic; }
.page-funktionen-index .hf-hero .lead{ max-width:58ch; margin-inline:auto; }
.page-funktionen-index .fn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,20px); }
/* Bereiche ohne Detailseite (Bericht, KI) als erste Reihe ohne Gruppenlabel */
.page-funktionen-index .fn-card{ position:relative; display:flex; flex-direction:column; padding:clamp(20px,2.2vw,26px); color:var(--ink); transition:transform .14s, box-shadow .14s; }
.page-funktionen-index .fn-card .kopf{ display:flex; align-items:center; gap:.6rem; margin:0 0 .45rem; }
.page-funktionen-index .fn-card .kopf i{ font-size:1.9rem; }
.page-funktionen-index .fn-card .nm{ font-family:var(--font-head); font-weight:800; font-size:var(--fs-h3); letter-spacing:-.05em; line-height:1; }
.page-funktionen-index .fn-card .nm a{ color:inherit; text-decoration:none; }
.page-funktionen-index .fn-card .nm a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.page-funktionen-index .fn-card .fr{ margin:0 0 1.1rem; font-size:var(--fs-lead); font-weight:500; line-height:1.3; color:var(--ink-soft); }
.page-funktionen-index .fn-card .fuss{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.4rem; }
.page-funktionen-index .fn-card .fuss .go{ margin-top:0; padding-top:0; }
.page-funktionen-index .fn-card .dazu{ position:relative; z-index:1; margin:0; font-size:var(--fs-sm); color:var(--ink-soft); }
.page-funktionen-index .fn-card .dazu a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
@media (hover:hover) and (pointer:fine){ .page-funktionen-index .fn-card:hover{ transform:translateY(-3px); box-shadow:9px 9px 0 var(--ink); } }
.page-funktionen-index .fn-note{ margin:clamp(26px,3.2vw,38px) auto 0; text-align:center; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:600; }
.page-funktionen-index .fn-note a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
@media (max-width:860px){ .page-funktionen-index .fn-grid{ grid-template-columns:1fr; } }
/* Funktionsseiten: Schritte, Beispielfragen, FAQ */
/* Anlässe und Tipps: ruhige Listen mit der .pip-Optik der Zielgruppenseiten */
/* Zum Weiterlesen: Weg in Blog und Hilfe */
.page-module .mod-faq .wrap{ max-width:760px; }
.page-module .mod-faq .head{ text-align:center; margin-bottom:clamp(18px,2.4vw,28px); }
.page-module .faq-list{ display:grid; gap:clamp(12px,1.6vw,16px); }
.page-module .faq-item{ padding:clamp(20px,2.4vw,28px); }
.page-module .faq-item h3{ font-size:var(--fs-body); letter-spacing:-.02em; margin:0 0 .5em; display:flex; gap:.6em; align-items:flex-start; }
.page-module .faq-item h3 i{ color:var(--ink); flex:0 0 auto; margin-top:.05em; }
.page-module .faq-item p{ color:var(--ink-soft); margin:0; line-height:1.6; font-size:var(--fs-body); }
/* Fragen jenseits der dritten zugeklappt, im Muster von /tarife */
:is(.page-module, .page-zielgruppen) .faq-zu{ background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-box); box-shadow:4px 4px 0 var(--ink); padding:1rem clamp(20px,2.4vw,28px); }
:is(.page-module, .page-zielgruppen) .faq-zu summary{ cursor:pointer; font-weight:800; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
:is(.page-module, .page-zielgruppen) .faq-zu summary::-webkit-details-marker{ display:none; }
:is(.page-module, .page-zielgruppen) .faq-zu summary{ position:relative; }
:is(.page-module, .page-zielgruppen) .faq-zu summary::after{ content:""; position:absolute; inset:-1rem -20px -.6rem; }
:is(.page-module, .page-zielgruppen) .faq-zu summary .ic{ transition:transform .2s; flex:0 0 auto; }
:is(.page-module, .page-zielgruppen) .faq-zu[open] summary .ic{ transform:rotate(45deg); }
:is(.page-module, .page-zielgruppen) .faq-zu .a p{ color:var(--ink-soft); margin:.7rem 0 0; line-height:1.6; }
:is(.page-module, .page-zielgruppen) .faq-zu a, .page-module .faq-item a{ color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* Welcher Weg wofür: unter dem Prüf-Feld der Funktions- und Für-Seiten */
.check-weg{ margin:1rem auto 0; max-width:40ch; font-size:var(--fs-sm); color:var(--ink); line-height:1.5; text-wrap:pretty; }
.check-start{ margin:.55rem 0 0; font-size:var(--fs-sm); font-weight:800; }
.check-start a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
/* Funktionsseite in der Antwort-Grammatik */
.krume{ font-size:var(--fs-sm); color:var(--ink-soft); margin:0 0 .9rem; }
/* Die vier Bereiche auf der öffentlichen 404, die Rechtstext-Karte darf sie nicht einrücken und unterstreichen */
.page-legal .legal-card .nf-bereiche{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.5rem; }
.page-legal .legal-card .nf-bereiche a{ display:block; font-weight:500; color:var(--ink-soft); text-decoration:none; padding:.55rem .8rem; border:2px solid var(--ash-soft); border-radius:var(--r-sm); }
.page-legal .legal-card .nf-bereiche a:hover{ background:transparent; border-color:var(--ink); color:var(--ink-soft); }
.page-legal .legal-card .nf-bereiche b{ color:var(--ink); margin-right:.35rem; }
.krume a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.krume [aria-current]{ color:var(--ink); font-weight:700; }
.page-module .feat-hinweis{ margin:.9rem auto 0; max-width:46ch; font-size:var(--fs-2sm); color:var(--ink-soft); line-height:1.5; text-wrap:pretty; }
:is(.page-module, .page-zielgruppen) :is(.feat-beweis, .feat-warum, .feat-lauf, .feat-blick) .wrap{ max-width:760px; }
:is(.page-module, .page-zielgruppen) :is(.feat-beweis, .feat-warum, .feat-lauf, .feat-blick) h2{ text-align:center; margin-bottom:.8rem; }
:is(.page-module, .page-zielgruppen) :is(.feat-warum, .feat-lauf, .feat-blick){ padding-top:0; }
.page-module .feat-warum .wrap{ max-width:1040px; }
:is(.page-module, .page-zielgruppen) .bsp-lbl{ display:table; margin:0 auto 1rem; font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); border:1.5px solid var(--ash); border-radius:var(--r-pill); padding:.2rem .7rem; background:var(--paper); }
.page-module .feat-fdk{ margin-top:clamp(18px,2.4vw,26px); padding:clamp(20px,2.6vw,30px); }
.page-module .feat-fdk .fdk{ margin-top:0; border-top:0; padding-top:0; }
.page-module .lauf{ list-style:none; counter-reset:lauf; margin:0; padding:0; display:grid; gap:1.1rem; }
.page-module .lauf li{ counter-increment:lauf; position:relative; padding-left:3.2rem; color:var(--ink-soft); line-height:1.6; }
.page-module .lauf li b{ display:block; color:var(--ink); }
.page-module .lauf li::before{ content:counter(lauf); position:absolute; left:0; top:-.1rem; width:2.2rem; height:2.2rem; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; font-weight:900; font-size:var(--fs-sm); color:var(--ink); background:var(--paper); }
.page-module .feat-lauf .mod-usefor{ margin:clamp(18px,2.4vw,26px) 0 0; }
:is(.page-module, .page-zielgruppen) .blick{ list-style:none; margin:0; padding:0; background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-box); box-shadow:6px 6px 0 var(--ink); }
:is(.page-module, .page-zielgruppen) .blick li{ display:grid; gap:.15rem; padding:.85rem 1.2rem; border-top:1px solid var(--ash-soft); line-height:1.5; }
:is(.page-module, .page-zielgruppen) .blick li:first-child{ border-top:0; }
:is(.page-module, .page-zielgruppen) .blick b{ color:var(--ink); }
:is(.page-module, .page-zielgruppen) .blick span{ color:var(--ink-soft); font-size:var(--fs-sm); }
.page-module .blick-dazu{ margin:1rem 0 0; font-size:var(--fs-sm); color:var(--ink-soft); text-align:center; line-height:1.7; }
:is(.page-module, .page-zielgruppen) :is(.blick-dazu, .branchen) a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
:is(.page-module, .page-zielgruppen) .branchen{ margin:clamp(18px,2.4vw,26px) 0 0; text-align:center; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.7; }
/* Kopie der KI-Antwort aus app.css (Antwort, Urteil), die Website lädt app.css nicht; synchron halten */
.ki-replik{ background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-card); box-shadow:6px 6px 0 var(--ink); padding:clamp(20px,3vw,30px); text-align:left; }
.ki-replik .as-bu{ margin:0 0 0 auto; max-width:72%; background:var(--ash-soft); border-radius:22px 22px 6px 22px; padding:14px 18px; font-weight:600; width:fit-content; }
.ki-replik .as-who{ display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--ink-soft); margin:22px 0 8px; }
.ki-replik .as-who i{ font-size:16px; color:var(--ink); }
.ki-replik .as-ba{ max-width:90%; border:1px solid var(--ash-soft); border-radius:22px 22px 22px 6px; padding:18px 22px; line-height:1.7; }
.ki-replik .as-ba :is(p, ul){ margin:0 0 .6em; }
.ki-replik .as-ba :is(p, ul):last-child{ margin:0; }
.ki-replik .as-ba .luecke{ color:var(--ink-soft); }
.ki-replik .as-ba mark.ich{ background:var(--acid); color:var(--ink); padding:.05em .25em; border-radius:5px; font-weight:600; }
.ki-replik .as-ba mark.andere{ background:var(--ash-soft); color:var(--ink); padding:.05em .25em; border-radius:5px; }
.ki-replik .as-ba .quelle{ font-weight:600; box-shadow:inset 0 -2px 0 var(--shadow); }
.ki-replik .as-urteil{ display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding-top:18px; border-top:1px solid var(--ash-soft); }
.ki-replik .as-urteil .zs{ margin-top:6px; }
.ki-replik .as-urteil b{ display:block; margin-bottom:2px; }
.ki-replik .as-leise{ color:var(--ink-soft); }
.ki-replik .as-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; font-size:.84rem; color:var(--ink-soft); align-items:center; }
.ki-replik .as-chips em{ font-style:normal; background:var(--ash-soft); border-radius:var(--r-pill); padding:3px 10px; color:var(--ink); }
.zs{ display:inline-block; width:11px; height:11px; border-radius:50%; flex:0 0 auto; vertical-align:middle; }
.zs.ok{ background:var(--good); }
.zs.open{ border:2px solid var(--amber-deep); }
.zs.half{ border:2px solid var(--amber-deep); background:linear-gradient(90deg, var(--amber-deep) 50%, transparent 50%); }
.zs.none{ width:12px; height:2px; border-radius:2px; background:var(--shadow); }
/* Kopie der Antwort-Seiten aus app.css (Frage, Satz, Zeilen, Trefferbild), synchron halten; im Kasten kleiner als dort als Überschrift */
.app-replik{ background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-card); box-shadow:6px 6px 0 var(--ink); padding:clamp(20px,3vw,30px); text-align:left; }
.app-replik .as-frage{ font-family:var(--font-head); font-weight:400; font-size:1.15rem; letter-spacing:-.03em; color:var(--ink-soft); margin:0; }
.app-replik .as-satz{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem); line-height:1.05; letter-spacing:-.05em; margin:.2em 0 .7em; text-wrap:balance; }
.app-replik .as-satz mark{ background:var(--ink); color:var(--paper); padding:0 .14em; border-radius:.1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.app-replik .as-leise{ color:var(--ink-soft); margin:0; }
.app-replik .as-krume{ font-size:var(--fs-sm); color:var(--ink-soft); margin:0 0 .2rem; }
.app-replik .as-krume b{ color:var(--ink); }
.app-replik :is(.as-liste, .as-track){ border:1px solid var(--ash-soft); }
/* „So stehst du da“ der Für-Seiten: die eine Sache mit dem Acid-Ring der Übersicht */
.stand-replik{ --gelb:#f0a019; }
.stand-replik .ki-liste{ border:1px solid var(--ash-soft); border-radius:var(--r-card); overflow:hidden; }
.stand-replik .ki-z{ border-top:1px solid var(--ash-soft); }
.stand-replik .ki-z:first-child{ border-top:0; }
.stand-replik .ki-zk{ display:grid; grid-template-columns:18px minmax(0,5fr) minmax(0,6fr); column-gap:16px; align-items:center; padding:16px 22px; min-height:64px; }
.stand-replik .ki-zk > i{ font-size:18px; }
.stand-replik .ki-q{ color:var(--ink-soft); }
.stand-replik .ki-a{ display:block; font-weight:650; }
.stand-replik .ki-a .zs{ margin-right:9px; border-color:var(--red); }
.stand-replik .ue-spur{ display:flex; gap:2px; height:8px; max-width:22rem; margin-top:9px; }
.stand-replik .ue-spur i{ display:block; min-width:6px; border-radius:3px; background:var(--ash); }
.stand-replik .ue-spur .ok{ background:var(--good); }
.stand-replik .ue-spur .half{ background:var(--gelb); }
.stand-replik .ue-spur .open{ background:var(--red); }
@media (max-width:700px){
.stand-replik .ki-zk{ grid-template-columns:18px minmax(0,1fr); }
.stand-replik .ki-a{ grid-column:2; margin-top:4px; }
}
.stand-replik .as-eine{ margin-top:18px; padding:20px 22px; background:var(--paper); border-radius:20px; box-shadow:0 0 0 3px var(--acid); }
.stand-replik .as-eine .k{ font-size:.95rem; color:var(--ink-soft); margin:0 0 4px; }
.stand-replik .as-eine .t{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); line-height:1.08; letter-spacing:-.05em; margin:0 0 .4em; text-wrap:balance; }
.stand-replik .as-eine .why{ margin:0; color:var(--ink-soft); text-wrap:pretty; }
.as-liste{ background:var(--paper); border-radius:var(--r-card); overflow:hidden; text-align:left; }
.as-zeile{ display:grid; grid-template-columns:minmax(150px,260px) 1fr; align-items:center; gap:6px; padding:15px 22px; border-top:1px solid var(--ash-soft); color:var(--ink); }
.as-zeile:first-child{ border-top:0; }
.as-zeile .lb{ font-weight:600; }
.as-zeile .tx{ color:var(--ink-soft); font-size:.94rem; display:flex; align-items:center; gap:10px; min-width:0; }
.as-zeile.mit-ic{ grid-template-columns:30px minmax(90px,170px) 1fr; }
.as-zeile .ic{ font-size:20px; }
.as-track{ background:var(--paper); border-radius:var(--r-card); padding:22px 24px 16px; text-align:left; }
.as-track :is(.tr-head, .tr-row){ display:grid; grid-template-columns:minmax(120px,190px) 1fr; }
.as-track .tr-head{ font-size:.75rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; padding-bottom:8px; }
.as-track .tr-head div:last-child{ display:grid; grid-template-columns:1fr 1fr 1fr; text-align:center; }
.as-track .tr-row{ align-items:center; height:40px; border-top:1px solid var(--ash-soft); }
.as-track .tr-row b{ font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:10px; }
.as-track .tr-bar{ position:relative; height:40px; background:linear-gradient(90deg,var(--ash-soft) 0 33.33%,transparent 33.33%); }
.as-track .tr-bar::before, .as-track .tr-bar::after{ content:""; position:absolute; top:8px; bottom:8px; width:1px; background:var(--ash-soft); }
.as-track .tr-bar::before{ left:33.33%; }
.as-track .tr-bar::after{ left:66.66%; }
.as-track .tr-dot{ position:absolute; top:50%; transform:translate(-50%,-50%); min-width:30px; height:24px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:.78rem; font-weight:800; display:grid; place-items:center; padding:0 7px; }
.as-track .tr-dot.p1{ background:var(--good); }
/* Ampel wie in den Bereichen Google und KI der App, die übrigen Kästen behalten Amber */
:is(.go-replik, .ki-replik, .we-replik){ --gelb:#f0a019; }
:is(.go-replik, .ki-replik, .we-replik) .zs.half{ border-color:var(--gelb); background:linear-gradient(90deg, var(--gelb) 50%, transparent 50%); }
:is(.go-replik, .ki-replik, .we-replik) .zs.open{ border-color:var(--red); }
.we-replik .as-satz{ margin-bottom:0; }
.we-replik .we-spur{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; height:12px; margin-top:28px; }
.we-replik .we-spur i{ display:block; border-radius:4px; background:var(--ash); }
.we-replik .we-spur .ok{ background:var(--good); }
.we-replik .we-spur .half{ background:var(--gelb); }
.we-replik .we-spur .open{ background:var(--red); }
.we-replik .we-vier{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; margin:14px 0 0; padding:0; }
.we-replik .we-vier li{ display:grid; gap:3px; align-content:start; padding-right:4px; }
.we-replik .we-vier .q{ font-size:.84rem; color:var(--ink-soft); white-space:nowrap; }
.we-replik .we-vier b{ display:flex; align-items:flex-start; gap:7px; font-size:.88rem; font-weight:700; line-height:1.3; }
.we-replik .we-vier .zs{ margin-top:.36em; }
.we-replik .we-vier .zs.none{ margin-top:.62em; }
.we-replik .we-vier .zs.none + span{ font-weight:400; color:var(--ink-soft); }
@media (max-width:900px){
.we-replik .we-vier{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:10px; }
.we-replik .we-vier li{ grid-template-columns:minmax(0,9.6rem) minmax(0,1fr); gap:12px; align-items:start; padding:9px 0; border-top:1px solid var(--ash); }
.we-replik .we-vier .q{ font-size:.92rem; }
.we-replik .we-vier b{ font-size:1rem; }
.we-replik .we-vier li:first-child{ border-top:0; }
}
.go-replik .as-satz{ margin-bottom:0; }
.go-replik .ki-vor{ margin:24px 0 0; color:var(--ink-soft); }
.go-replik .ki-gross{ list-style:none; display:flex; flex-wrap:wrap; gap:12px 40px; margin:14px 0 0; padding:0; }
.go-replik .ki-gross li{ display:grid; gap:2px; }
.go-replik .ki-gross b{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; letter-spacing:-.05em; line-height:1; }
.go-replik .ki-gross span{ display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--ink-soft); }
.go-replik .ki-spur{ display:flex; gap:2px; height:12px; margin-top:16px; }
.go-replik .ki-spur i{ display:block; min-width:6px; border-radius:4px; }
.go-replik .ki-spur .ok{ background:var(--good); }
.go-replik .ki-spur .half{ background:var(--gelb); }
.go-replik .ki-spur .open{ background:var(--red); }
.go-replik .ki-dk{ margin:18px 0 0; font-size:var(--fs-sm); color:var(--ink-soft); }
.go-replik .rep-bild{ margin-top:30px; padding-top:26px; border-top:1px solid var(--ash-soft); }
.go-replik .ki-h{ font-family:var(--font-head); font-weight:800; font-size:1.45rem; line-height:1.12; letter-spacing:-.05em; margin:.15em 0 0; text-wrap:balance; }
.go-replik .as-track{ margin-top:20px; }
.go-replik .tr-dot.p2{ background:var(--gelb); color:var(--ink); }
.go-replik .tr-dot.p3{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 2px var(--red); }
.go-replik .ki-fein{ font-size:var(--fs-sm); color:var(--ink-soft); margin:14px 0 0; text-wrap:pretty; }
@media (max-width:640px){
.go-replik .ki-vor{ margin-top:16px; }
.go-replik .ki-gross{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; }
.go-replik .ki-gross li{ grid-column:1 / -1; grid-template-columns:subgrid; gap:0 14px; align-items:center; }
.go-replik .ki-gross b{ font-size:2rem; text-align:right; }
.as-zeile{ grid-template-columns:1fr; padding:13px 16px; }
.as-zeile.mit-ic{ grid-template-columns:26px 1fr; }
.as-zeile.mit-ic .ic{ grid-row:1/3; }
.as-zeile.mit-ic .tx{ grid-column:2; }
.as-track{ padding:16px 14px 10px; }
.as-track :is(.tr-head, .tr-row){ grid-template-columns:104px 1fr; }
.as-track .tr-row{ height:auto; min-height:40px; }
.as-track .tr-row b{ white-space:normal; overflow:visible; font-size:.84rem; line-height:1.25; padding:6px 8px 6px 0; }
}
/* Warum in drei Sätzen, der Zusatz-Beweis, Wege in „Alles im Blick“ */
:is(.page-module, .page-zielgruppen) .warum-p{ max-width:var(--read); margin:0 auto; font-size:var(--fs-lead); line-height:1.55; color:var(--ink); text-align:center; text-wrap:pretty; }
.page-module .feat-zusatz{ padding-top:0; }
:is(.page-module, .page-zielgruppen) .blick b a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
:is(.page-module, .page-zielgruppen) .blick span a{ color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.page-zielgruppen .zg-profi{ max-width:var(--read); margin:1.2rem auto 0; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6; text-align:center; text-wrap:pretty; }
.page-zielgruppen .zg-profi b{ color:var(--ink); }
@media (max-width:640px){ .ki-replik{ padding:20px 16px; } .ki-replik .as-bu{ max-width:88%; } .ki-replik .as-ba{ max-width:100%; padding:14px 16px; } }
/* Neuigkeiten */
.page-neuigkeiten .hf-hero{ padding-top:clamp(30px,5vw,60px); padding-bottom:clamp(18px,2.6vw,32px); text-align:center; background:transparent; }
.page-neuigkeiten .hf-hero .wrap{ max-width:760px; }
.page-neuigkeiten .hf-hero h1{ margin:.2em 0 .4em; }
.page-neuigkeiten .hf-hero h1 em{ font-style:italic; }
.page-neuigkeiten .hf-hero .lead{ max-width:58ch; margin-inline:auto; }
.page-neuigkeiten .nk-wrap{ max-width:760px; }
.page-neuigkeiten .nk-release{ padding:clamp(22px,3vw,32px); margin-bottom:clamp(14px,1.8vw,20px); }
.page-neuigkeiten .nk-date{ font-size:var(--fs-lead); font-weight:900; letter-spacing:-.02em; margin:0 0 .8rem; }
/* Das Datum verlinkt auf seinen Eintrag */
.page-neuigkeiten .nk-date a{ color:inherit; text-decoration:none; }
.page-neuigkeiten .nk-date a:hover{ text-decoration:underline; text-underline-offset:4px; }
/* Newsletter als dunkles Band, im Blog wäre eine weiße Karte nur weiterer Inhalt */
.nl-block{ padding-block:clamp(26px,3.2vw,42px); }
/* Keine max-width, die Containerbreite kommt vom .wrap; max-width:none höbe jede Grenze auf */
.nl-inner{ background:var(--ink); color:var(--on-dark); border:2px solid var(--ink); border-radius:var(--r-box); box-shadow:6px 6px 0 var(--shadow); padding:clamp(24px,3.2vw,40px);
display:grid; grid-template-columns:1fr minmax(0,27rem); gap:clamp(22px,3.4vw,52px); align-items:center; }
@media (max-width:900px){ .nl-inner{ grid-template-columns:1fr; align-items:stretch; } }
/* Auf Ink wäre der Fokusring unsichtbar */
.nl-inner :focus-visible{ outline-color:var(--acid); }
/* Gemischt statt versal, damit das Band nicht mit dem Check-Abschluss konkurriert */
.nl-block h2{ font-size:var(--fs-h2); font-weight:900; letter-spacing:-.045em; line-height:.98; margin:0; color:var(--on-dark); text-wrap:balance; }
/* Unter 480 px bleibt --fs-h2 bei 48 px, der Titel stünde fast an der Kante */
@media (max-width:480px){ .nl-block h2{ font-size:2.25rem; hyphens:auto; } }
.nl-lead{ margin:.55rem 0 0; font-size:var(--fs-sm); color:var(--shadow); font-weight:600; line-height:1.6; max-width:46ch; }
.nl-form{ margin:0; }
.nl-row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; }
/* Einzige helle Fläche im Band, soll nach „hier tippst du“ aussehen */
.nl-row input[type=email]{ flex:1 1 15rem; min-width:0; border:2px solid var(--paper); border-radius:var(--r-pill); padding:.72em 1.1em; font:inherit; font-size:var(--fs-sm); background:var(--paper); color:var(--ink); }
@media (pointer:coarse){ .nl-row input[type=email]{ font-size:1rem; } }
.nl-row input[type=email]::placeholder{ color:#6b7076; }
.nl-row input[type=email]:focus-visible{ outline:3px solid var(--acid); outline-offset:2px; }
.nl-row .btn{ flex:0 0 auto; font-size:var(--fs-sm); }
.nl-consent{ display:flex; gap:.55rem; align-items:flex-start; margin-top:.95rem; font-size:var(--fs-sm); color:var(--shadow); font-weight:600; line-height:1.5; cursor:pointer; }
.nl-consent{ position:relative; }
.nl-consent::after{ content:""; position:absolute; inset:-12px 0; }
.nl-consent input{ flex:0 0 auto; margin-top:.2em; width:1.05em; height:1.05em; accent-color:var(--acid); }
/* Einzug rechnet mit --fs-sm der Zustimmungs-Zeile (Checkbox 1.05em plus gap .55rem) */
.nl-fine{ margin:.45rem 0 0 calc(1.05 * var(--fs-sm) + .55rem); font-size:var(--fs-tag); color:var(--shadow); font-weight:600; }
.nl-fine a{ color:var(--on-dark); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
/* Fehlerfall ohne Rot: eine Nachfrage an den Leser, kein Fehler der Seite */
.nl-flash{ margin:0 0 .95rem; padding:.7em 1em; border-radius:var(--r-tag); font-size:var(--fs-sm); font-weight:700; }
.nl-flash.is-ok{ background:var(--acid); color:var(--ink); }
.nl-flash.is-error{ background:var(--paper); color:var(--ink); }
/* Schmal volle Knopfbreite, als Touch-Ziel größer */
@media (max-width:560px){ .nl-row .btn{ flex:1 1 100%; } }
/* Bestätigen und Abmelden: schmale Seite mit einer Frage */
.page-neuigkeiten .nl-status-form{ margin-top:clamp(18px,2.4vw,28px); }
/* Label für Screenreader, ein Placeholder ist kein Label */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.page-neuigkeiten .nk-lead{ margin:-.4rem 0 1rem; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:600; line-height:1.6; }
.page-neuigkeiten .nk-list a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.page-neuigkeiten .nk-rubrik{ font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:1rem 0 .5rem; }
.page-neuigkeiten .nk-rubrik:first-of-type{ margin-top:0; }
.page-neuigkeiten .nk-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.page-neuigkeiten .nk-list li{ display:flex; gap:.7em; align-items:baseline; color:var(--ink-soft); line-height:1.55; font-size:var(--fs-body); }
.page-neuigkeiten .nk-pip{ flex:none; width:9px; height:9px; border-radius:50%; border:2px solid var(--ink); transform:translateY(-1px); }
.page-neuigkeiten .nk-pip.neu{ background:var(--acid); }
.page-neuigkeiten .nk-pip.fix{ background:var(--paper); }
.page-neuigkeiten .nk-note{ margin:clamp(20px,2.6vw,30px) auto 0; text-align:center; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:600; }
.page-neuigkeiten .nk-note a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
/* Blog-Inhaltsverzeichnis */
.page-blog .bl-toc{ background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-box); box-shadow:6px 6px 0 var(--ink);
padding:clamp(18px,2.2vw,26px); margin-bottom:clamp(24px,3vw,36px); }
.page-blog .bl-toc .t{ font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 .6rem; }
.page-blog .bl-toc ol{ margin:0; padding-left:1.3rem; display:grid; gap:.35rem; }
.page-blog .bl-toc li{ color:var(--ink-soft); font-size:var(--fs-sm); }
.page-blog .bl-toc a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
/* Teilen-Knöpfe ohne Acid, der eine Acid-Knopf der Seite gehört dem Footer-CTA */
.page-blog .bl-share{ max-width:var(--read); margin:1.4rem auto 0; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; }
.page-blog .bl-share .bs-lbl{ font-size:var(--fs-sm); font-weight:800; color:var(--ink-soft); margin-right:.2rem; }
.page-blog .bl-share .bs-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem; border:2px solid var(--ink); border-radius:9px; background:#fff; color:var(--ink); font:inherit; font-size:var(--fs-sm); font-weight:700; text-decoration:none; cursor:pointer; }
.page-blog .bl-share .bs-btn:hover{ background:var(--ink); color:#fff; }
.page-blog .bl-share .bs-btn.is-done{ background:var(--ink); color:#fff; }
/* Hub-Links im Hero unter der Unterzeile, deshalb zentriert */
.page-blog-index .hub-more, .page-neuigkeiten .hub-more{ margin:clamp(16px,2vw,24px) 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem; font-size:var(--fs-sm); font-weight:700; }
.page-blog-index .hub-more a, .page-neuigkeiten .hub-more a{ display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-soft); text-decoration:none; }
.page-blog-index .hub-more a:hover, .page-neuigkeiten .hub-more a:hover{ color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
.page-compare .cmp-pflege, .page-blog .bl-pflege{ max-width:var(--read); margin:1.2rem auto 0; text-align:center; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:600; }
.page-compare .cmp-pflege a, .page-blog .bl-pflege a{ color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--acid); }
.page-blog .bl-pflege{ text-align:left; margin-top:.9rem; }