/* Bausteine der Kostenseite und des Ratgebers (Seitensitzung Kostenseite, 04.11.2026), von Hand.
   Grundwerte, Kopf, Knöpfe und Fuß kommen aus unterseiten-basis.css, Seitenkopf und Überzeile aus unterseiten.css.
   Fragen wie auf der Ablaufseite (ablauf.css), damit beide gleich aussehen. */

/* Abschnittskopf: Titel links, Einleitung rechts, beide oben bündig */
.abschnittskopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.abschnittskopf h2{max-width:16ch;text-wrap:balance}
.abschnittskopf p{font-size:1.125rem;line-height:1.7;color:var(--tinte);max-width:34em;text-wrap:pretty}

/* Häufige Fragen: Ausklapper ohne Skript */
.fragen{padding-block:clamp(56px,7vw,104px);background:#fff;border-block:1px solid var(--linie)}
.fragen .innen{display:grid;grid-template-columns:1fr;gap:28px}
.fragen h2{text-wrap:balance}
.fragen__liste{border-top:1px solid var(--tinte)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:24px;align-items:center;padding:22px 0;cursor:pointer;list-style:none;font:500 1.25rem/1.3 "Familjen Grotesk",system-ui,sans-serif;letter-spacing:-.01em;color:var(--tinte);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";width:24px;height:24px;background:linear-gradient(var(--tinte),var(--tinte)) center/14px 2px no-repeat,linear-gradient(var(--tinte),var(--tinte)) center/2px 14px no-repeat;transition:transform .2s ease}
.frage[open] summary::after{transform:rotate(45deg)}
.frage summary:hover{color:var(--p700)}
.frage summary:focus-visible{outline:2px solid var(--p600);outline-offset:4px;border-radius:4px}
.frage__antwort{padding:0 48px 26px 0;max-width:38em}
.frage__antwort p{color:var(--text);line-height:1.6;text-wrap:pretty}
.frage__antwort p+p{margin-top:14px}
.frage__links{display:flex;flex-wrap:wrap;gap:12px 28px}
.frage__links .pfeillink{color:var(--tinte)}
@media (min-width:1100px){
  .fragen .innen{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(40px,5vw,80px);align-items:start}
  .fragen h2{max-width:12ch;text-box:trim-start cap alphabetic}
  @supports not (text-box:trim-start cap alphabetic){.fragen h2{margin-top:-.2em}}
}

/* Weiterlesen: Verweis auf den Ratgeber beziehungsweise auf die Kostenseite */
.weiterlesen{padding-block:clamp(48px,6vw,88px) 0}
.weiterlesen__karte{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;grid-template-areas:"ueber text" "titel text" "titel link";column-gap:clamp(40px,5vw,80px);row-gap:10px;align-items:start;padding:clamp(28px,3.4vw,48px);background:var(--p50);border-radius:24px}
.weiterlesen__ueber{grid-area:ueber;font-weight:500;font-size:.95rem;color:var(--p700)}
.weiterlesen__titel{grid-area:titel;max-width:16ch;text-wrap:balance;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.125rem)}
/* Text rechts beginnt auf der Versalhöhe der Überzeile links (Ausrichtungs-Check A2) */
.weiterlesen__text{grid-area:text;align-self:start;font-size:1.0625rem;line-height:1.65;color:var(--tinte);max-width:34em}
.weiterlesen__link{grid-area:link;justify-self:start;align-self:end;color:var(--tinte)}
.weiterlesen__link:focus-visible{outline:2px solid var(--p600);outline-offset:3px;border-radius:2px}

/* Stand, Prüfvermerk und Quellen */
.vermerk{padding-block:clamp(40px,5vw,64px) clamp(56px,7vw,96px)}
.vermerk .innen{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);row-gap:16px;align-items:start;padding-top:24px}
.vermerk .innen::before{content:"";position:absolute;top:0;left:var(--rand);right:var(--rand);height:1px;background:var(--linie)}
.vermerk__zeilen{display:grid;gap:4px}
.vermerk__pruefer{font-weight:600;color:var(--tinte)}
.vermerk__pruefer[hidden]{display:none}
.vermerk__stand{font-size:.95rem;line-height:1.55;color:var(--leise)}
.vermerk__quelle{font-size:.9rem;line-height:1.65;color:var(--leise);max-width:46em;text-wrap:pretty}
.vermerk__quelle a,.quellen a{color:var(--p700);font-weight:500;text-underline-offset:3px}
/* Kein grauer Tipp-Schleier am iPhone (Simulator, 04.11.2026) */
.weiterlesen__link,.vermerk__quelle a,.quellen a,.frage__links a,.rg-text a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.vermerk__quelle a:focus-visible,.quellen a:focus-visible{outline:2px solid var(--p600);outline-offset:2px;border-radius:2px}

/* Zifferkachel im Format des Signets (wie ablauf.css), auch im Rechner */
.az{display:grid;place-items:center;width:31px;height:48px;border-radius:var(--kachel-ecke);background:var(--schwarz);color:#fff;font:700 31px/1 "Familjen Grotesk",system-ui,sans-serif;padding-bottom:1px}

/* Am Handy hat die Leiste des Rechners Vorrang vor der Daumenleiste; die Nummer im Kopf bleibt dann sichtbar */
html.pr-leiste-an .dock{transform:translateY(100%);visibility:hidden}
html.pr-leiste-an .kopf--dock .kopf__nummer{display:inline-block}
html.pr-leiste-an .kopf--dock .kopf__menue{margin-left:0}

@media (max-width:1000px){
  .abschnittskopf{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .weiterlesen__karte{grid-template-columns:minmax(0,1fr);grid-template-areas:"ueber" "titel" "text" "link";row-gap:12px}
  .weiterlesen__link{margin-top:6px}
  .vermerk .innen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .frage summary{font-size:1.125rem;padding:18px 0}
  .frage__antwort{padding-right:0}
}