/* ratgeber.css: Ratgeberteile der Sammlungsseiten (E-075) und der Leistungsseiten (E-074), Theme blechline.
   Anlass: Inhaberbefund 2026-10-19 "Text mit Dropdown, nicht ordentlich formatiert, schaut schrecklich aus".
   Wird nur auf Sammlungs- und Leistungsseiten geladen (functions.php), damit site.css im Budget (<= 40 KB) bleibt.
   Regeln wie site.css: nur Token-Werte, kein Text unter 13 px, Tippziele >= 44 px, Bewegung <= 220 ms, sichtbarer Fokus (tokens.css). */

/* Kopf einer Sammlung: Direktantwort als Leitsatz, nicht als Fließtext in Grau */
.b-sammlung__intro{max-width:66ch;color:var(--bl-ink);font-size:var(--t-text);line-height:1.6}
@media (min-width:760px){.b-sammlung__intro{font-size:clamp(18px,.5vw + 14px,20px)}}

/* Direktantwort der Leistungsseiten */
.b-rat-antwort{background:var(--weich-blau);padding-block:var(--s-5)}
.b-rat-antwort .b-direktantwort{max-width:56rem;margin:0;padding-left:var(--s-4);border-left:4px solid var(--bl-blau-500);font-size:var(--t-text);line-height:1.6;color:var(--bl-ink)}
@media (min-width:760px){.b-rat-antwort{padding-block:var(--s-6)}.b-rat-antwort .b-direktantwort{font-size:clamp(18px,.5vw + 14px,20px);padding-left:var(--s-5)}}

/* Ratgeber: eine lesbare Spalte (rund 72 Zeichen), klare Überschriftenfolge */
.b-ratgeber,.b-faqz,.b-passt{padding-block:var(--s-6)}
@media (min-width:760px){.b-ratgeber,.b-faqz,.b-passt{padding-block:var(--s-8)}}
.b-ratgeber,.b-passt{border-top:1px solid var(--bl-linie)}
.b-rat{max-width:62ch;min-width:0}
.b-rat__text>*{max-width:none}
/* mit Inhaltsverzeichnis: ab 1100 px rechts neben dem Text (nicht klebend, M2) */
@media (min-width:1100px){
  .b-rat--toc{display:grid;grid-template-columns:minmax(0,62ch) minmax(15rem,21rem);column-gap:var(--s-8);align-items:start;max-width:none}
  .b-rat--toc>.b-eyebrow,.b-rat--toc>.b-rat__text{grid-column:1}
  .b-rat--toc>.b-rat__toc{grid-column:2;grid-row:1/span 2;margin:0}
}
.b-rat__text h2{font-size:var(--t-h2);line-height:1.15;margin:var(--s-7) 0 var(--s-4);scroll-margin-top:var(--s-4)}
.b-rat__text>h2:first-child{margin-top:0}
.b-rat__text h3{font-size:var(--t-h3);line-height:1.25;margin:var(--s-6) 0 var(--s-3)}
.b-rat__text p{max-width:none;margin:0 0 var(--s-4);line-height:1.7}
.b-rat__text p:last-child{margin-bottom:0}
.b-rat__text strong{font-weight:700}
.b-rat__text :is(ul,ol){margin:0 0 var(--s-5);padding-left:1.4em;list-style:disc}
.b-rat__text ol{list-style:decimal}
.b-rat__text li{margin:0 0 var(--s-2);padding-left:.2em;line-height:1.6}
.b-rat__text li::marker{color:var(--bl-blau-600);font-weight:700}
.b-rat__text li>:is(ul,ol){margin:var(--s-2) 0 0}
.b-rat__text a{overflow-wrap:anywhere}

/* Tabellen: scrollbare Hülle, per Tastatur erreichbar (role=region, tabindex=0) */
.b-rat__tabelle{overflow-x:auto;margin:var(--s-5) 0;background:#fff;border:1px solid var(--bl-linie-2);border-radius:var(--r-m);-webkit-overflow-scrolling:touch}
.b-rat__tabelle table{width:100%;border-collapse:collapse;font-size:var(--t-klein);text-align:left}
/* feste Mindestbreite nur ab vier Spalten; Tabellen mit zwei oder drei Spalten passen auf das Handy */
.b-rat__tabelle table:has(tr>:nth-child(4)){min-width:34rem}
.b-rat__tabelle th,.b-rat__tabelle td{overflow-wrap:break-word}
.b-rat__tabelle th,.b-rat__tabelle td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--bl-linie);vertical-align:top;line-height:1.45}
.b-rat__tabelle thead th{background:var(--weich-blau);border-bottom:2px solid var(--bl-blau-100);font-weight:700;color:var(--bl-ink)}
.b-rat__tabelle tbody tr:last-child>*{border-bottom:0}
.b-rat__tabelle tbody th{font-weight:700;color:var(--bl-ink)}
.b-rat__tabelle:focus-visible{outline:2px solid var(--bl-blau-500);outline-offset:2px}

/* Inhaltsverzeichnis (ab 600 Wörtern) */
.b-rat__toc{margin:0 0 var(--s-6);padding:var(--s-4) var(--s-5);background:var(--weich-blau);border:1px solid var(--bl-blau-100);border-radius:var(--r-m)}
.b-rat__toc-titel{margin:0 0 var(--s-2);font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-h3);line-height:1.2;color:var(--bl-ink)}
.b-rat__toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.b-rat__toc li{margin:0;counter-increment:toc;break-inside:avoid}
.b-rat__toc a{display:flex;align-items:baseline;gap:var(--s-3);min-height:44px;padding:var(--s-2) 0;border-bottom:1px solid var(--bl-blau-100);color:var(--bl-ink);font-weight:600;line-height:1.35;text-decoration:none}
.b-rat__toc li:last-child a{border-bottom:0}
.b-rat__toc a::before{content:counter(toc,decimal-leading-zero);flex:none;min-width:1.7em;font-family:var(--bl-f-kopf);font-weight:700;color:var(--bl-blau-600)}
.b-rat__toc a:hover{color:var(--bl-blau-600)}

/* FAQ: ganze Zeile klickbar, Plus/Minus, Antworten stehen im HTML */
.b-faqz{background:var(--weich)}
.b-faqz__in{max-width:54rem}
.b-faqz__liste{border-top:1px solid var(--bl-linie-2)}
.b-faqz__item{border-bottom:1px solid var(--bl-linie-2)}
.b-faqz__item>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:60px;padding:var(--s-3) var(--s-2);list-style:none;cursor:pointer;border-radius:var(--r-s);transition:background var(--m-fast) var(--m-kurve)}
.b-faqz__item>summary::-webkit-details-marker{display:none}
.b-faqz__item>summary:hover{background:var(--bl-blau-50)}
.b-faqz__frage{font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-h3);line-height:1.25;color:var(--bl-ink)}
.b-faqz__sym{position:relative;flex:none;width:32px;height:32px;background:#fff;border:2px solid var(--bl-linie-2);border-radius:var(--r-s);transition:border-color var(--m-base) var(--m-kurve)}
.b-faqz__sym::before,.b-faqz__sym::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--bl-blau-600)}
.b-faqz__sym::after{transform:rotate(90deg);transition:transform var(--m-base) var(--m-kurve)}
.b-faqz__item[open]>summary .b-faqz__sym{border-color:var(--bl-blau-500)}
.b-faqz__item[open]>summary .b-faqz__sym::after{transform:rotate(0)}
.b-faqz__antwort{padding:0 calc(32px + var(--s-4) + var(--s-2)) var(--s-4) var(--s-2)}
.b-faqz__antwort p{max-width:66ch;margin:0;color:var(--bl-text-2);line-height:1.65}
@media (max-width:599px){.b-faqz__antwort{padding-right:var(--s-2)}}
@media (prefers-reduced-motion:reduce){.b-faqz__sym::after{transition:none}}

/* Passt dazu: Linkkacheln, alle gleich hoch */
.b-passt .b-kopfzeile{margin-bottom:var(--s-4)}
.b-passt__links{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:var(--s-2)}
@media (min-width:600px){.b-passt__links{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}}
@media (min-width:960px){.b-passt__links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.b-passt__links>li{display:flex;min-width:0}
.b-passt__link{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"art ico" "titel ico";column-gap:var(--s-3);row-gap:var(--s-1);align-content:center;align-items:center;min-height:76px;min-width:0;padding:var(--s-3) var(--s-4);background:#fff;border:1px solid var(--bl-linie-2);border-radius:var(--r-m);color:var(--bl-ink);text-decoration:none;transition:border-color var(--m-base) var(--m-kurve)}
.b-passt__link:hover{border-color:var(--bl-blau-500);color:var(--bl-ink)}
.b-passt__art{grid-area:art;font-family:var(--bl-f-kopf);font-weight:600;font-size:var(--t-mikro);letter-spacing:.12em;text-transform:uppercase;color:var(--bl-blau-600)}
.b-passt__titel{grid-area:titel;font-family:var(--bl-f-kopf);font-weight:700;font-size:var(--t-h3);line-height:1.2;hyphens:manual;overflow-wrap:normal}
.b-passt__link .b-ico{grid-area:ico;width:20px;height:20px;color:var(--bl-blau-600)}
.b-passt__gruppe{margin-top:var(--s-6)}
.b-passt .b-kopfzeile+.b-passt__gruppe{margin-top:0}
.b-passt__gruppe h3{margin:0 0 var(--s-3);font-size:var(--t-h3)}
.b-passt__gruppe .bp-leist{margin-top:0}
.b-rat-antwort+.bp-leist{margin-block:var(--s-5) var(--s-6)}

/* Rasterabschnitte der Kategorien (E-082, Vorschlag 2026-10-19 §5.2): Zwischenueberschriften statt Unterseiten */
.b-abschnitt+.b-abschnitt{margin-top:var(--s-7)}
.b-abschnitt__titel{font-size:var(--t-h2);line-height:1.15;margin:0 0 var(--s-4);hyphens:manual;overflow-wrap:normal;scroll-margin-top:var(--s-4)}
.b-abschnitt__titel a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.b-abschnitt__titel a:hover{text-decoration:underline}

/* Einleitung der Landing-Produkte (E-082), ueber dem Datenblatt */
.b-landing{padding-block:var(--s-5) var(--s-2)}
.b-landing__intro{max-width:66ch;color:var(--bl-ink);font-size:var(--t-text);line-height:1.6}
.b-landing__intro p{margin:0}
@media (min-width:760px){.b-landing__intro{font-size:clamp(18px,.5vw + 14px,20px)}}