/* ═══════════════════════════════════════════════════════════════════════════
   ratgeber.css: Ratgeber-Übersicht, Artikel und Tool-Seiten (WAC-3)

   Die Seiten erzeugt build-ratgeber.js aus content/ratgeber/*.md. Hülle,
   Warteliste und Fußzeile sind die der Landing (DESIGN §3.1), hier als
   eigene Datei, weil die Landing ihren Stil inline trägt. Dazwischen steht
   eine zentrierte Lesespalte (§3.2) mit etwa 68 Zeichen Zeilenlänge.

   Jeder Wert kommt aus tokens.css (§1.1, §2): kein Farb-, Größen-, Radius-,
   Schatten- oder Dauer-Literal, Abstände nur aus der Skala, einzige
   Umbruchkante 760 px (§3.3). tests/design-regeln.test.js liest diese Datei.
   Ausnahme vom Token-Zwang ist wie überall nur die Wortmarke (§2.1).
   ═══════════════════════════════════════════════════════════════════════════ */

@property --btn-role { syntax: '*'; inherits: false; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
html[data-theme="dark"] { color-scheme: dark; }
body {
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-body);
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button { font: inherit; color: inherit; }
.wrap { max-width: calc(var(--results-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ico { width: var(--ico-md); height: var(--ico-md); flex: none; stroke-width: var(--ico-stroke); }
.ico-sm { width: var(--ico-sm); height: var(--ico-sm); }

/* ── Fokus (§2.9): ein Ring, nur per Tastatur; er gewinnt gegen Knopfschatten ── */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a:focus-visible, button:focus-visible, summary:focus-visible, .rg-tabelle:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }
.wl-form input:focus, .wl-form input:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring-input) !important; }

/* ── Knöpfe (§4.1): Primär, Sekundär, Ruhig ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--control-h); padding: 0 var(--btn-px); border-radius: var(--btn-r);
  border: 1px solid transparent; font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ico { width: var(--ico-sm); height: var(--ico-sm); }
.btn-lg { min-height: calc(var(--control-h) + 6px); font-size: var(--fs-md); }
.btn-primary { --btn-role: primary; background: var(--btn-primary-bg); color: var(--on-accent); box-shadow: var(--btn-primary-shadow); }
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); }
.btn-secondary {
  --btn-role: secondary; background: var(--btn-secondary-bg); border-color: var(--btn-secondary-line); color: var(--ink);
  box-shadow: var(--btn-secondary-shadow); }
.btn-secondary:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--line-strong); }

/* ═══ Kopfzeile (§3.1): die Hülle der Landing, in beiden Modi dunkel ═══ */
header.nav {
  position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-h);
  background: var(--chrome-bg); color: var(--chrome-ink); border-bottom: 1px solid var(--chrome-line); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: var(--s6); }
.jt-logo { display: inline-flex; align-items: center; gap: var(--s3); flex: none; border-radius: var(--r-md); }
.jt-tile {
  width: var(--brand-tile); height: var(--brand-tile); flex: none; display: grid; place-items: center;
  border-radius: var(--brand-tile-r); background: var(--brand-tile-bg); color: var(--brand-tile-ink); }
.jt-mark { width: 21px; height: 21px; }
.jt-word { font: 800 18px/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -0.022em; color: var(--chrome-ink); }
.jt-word i { font-style: normal; color: var(--brand-word-accent); }
.nav-links {
  display: flex; align-items: center; gap: var(--s1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a, .nav-signin {
  display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--s3); flex: none;
  border-radius: var(--r-md); color: var(--chrome-ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-links a:hover, .nav-signin:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
/* Wo du bist, zeigt das Wahl-Muster der Hülle (§4.2), nicht Violett. */
.nav-links a[aria-current="page"] { background: var(--chrome-sel-bg); color: var(--chrome-sel-ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex: none; }
.kopf-ico {
  --btn-role: quiet; display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--chrome-ink-2); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.kopf-ico:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.nav-cta { background: transparent; border-color: var(--chrome-btn-line); color: var(--chrome-ink); }
.nav-cta:hover:not(:disabled) { background: var(--chrome-hover); }

/* ═══ Lesespalte ═══
   Die Spalte misst in der Schrift des Fließtexts (--fs-lg), damit 68ch
   wirklich rund 68 Zeichen sind. Kopf, Meta und Kästen setzen ihre eigene
   Größe aus der Skala. */
.rg-main { padding: var(--s10) var(--gutter) var(--s16); }
.rg-col { max-width: 68ch; margin: 0 auto; font-size: var(--fs-lg); }
.rg-col + .rg-col { margin-top: var(--s16); }
[id] { scroll-margin-top: calc(var(--topbar-h) + var(--s4)); }

/* Brotkrumen: Start › Ratgeber › Artikel */
.rg-krumen ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.rg-krumen li { display: inline-flex; align-items: center; gap: var(--s2); }
.rg-krumen li + li::before { content: "›"; color: var(--ink-3); }
.rg-krumen a { border-radius: var(--r-sm); color: var(--ink-2); }
.rg-krumen a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rg-krumen [aria-current] { color: var(--ink-3); }

.rg-col h1 {
  margin-top: var(--s6); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-strong);
  line-height: var(--lh-tight); letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance; }
.rg-meta { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--ink-3); }
.rg-meta time, .rg-karte-meta time { font-variant-numeric: tabular-nums; }
.rg-lead { margin-top: var(--s4); color: var(--ink-2); }
.rg-lead p + p { margin-top: var(--s3); }
.rg-lead a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-sm); }

/* „Kurz gesagt“: der Antwortabsatz der Seite, als Karte (§4.5) abgesetzt. */
.rg-kurz {
  margin-top: var(--s8); padding: var(--s5) var(--s6);
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: var(--card-shadow);
  color: var(--ink); }
.rg-kurz strong { font-weight: var(--fw-strong); }

/* Inhaltsverzeichnis aus den H2 */
.rg-toc { margin-top: var(--s8); padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rg-toc .rg-toc-titel {
  margin: 0; font-family: var(--font-ui); font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); color: var(--label-ink); }
.rg-toc ol { margin-top: var(--s2); padding-left: var(--s6); font-size: var(--fs-md); color: var(--ink-3); }
.rg-toc li { padding: var(--s1) 0; }
.rg-toc li::marker { font-variant-numeric: tabular-nums; }
.rg-toc a { border-radius: var(--r-sm); color: var(--ink-2); }
.rg-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Fließtext ── */
.rg-text { margin-top: var(--s8); color: var(--ink-2); }
.rg-text > * + * { margin-top: var(--s4); }
.rg-text h2, .rg-faq h2, .rg-weiter h2 {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-strong);
  line-height: var(--lh-tight); letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance; }
.rg-text h3 {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-strong);
  line-height: var(--lh-tight); letter-spacing: var(--display-tracking); color: var(--ink); }
.rg-text > h2 { margin-top: var(--s16); }
.rg-text > h3 { margin-top: var(--s8); }
.rg-text > h2 + h3 { margin-top: var(--s6); }
.rg-text strong { font-weight: var(--fw-strong); color: var(--ink); }
.rg-text a:not(.btn) { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-tint-2); text-underline-offset: 3px; border-radius: var(--r-sm); }
.rg-text a:not(.btn):hover { text-decoration-color: currentColor; }
.rg-text ul, .rg-text ol { padding-left: var(--s6); }
.rg-text li + li { margin-top: var(--s2); }
.rg-text li::marker { color: var(--ink-3); }
.rg-text ol > li::marker { font-variant-numeric: tabular-nums; }

/* Beispieltexte aus einem Anschreiben stehen auf Papier (§1.2, §2.4): weiß
   in beiden Modi, in der Dokumentschrift. */
.rg-beispiel {
  padding: var(--s5) var(--s6); border-radius: var(--sheet-r); border: 1px solid var(--line);
  background: var(--paper); color: var(--paper-ink); box-shadow: var(--sheet-shadow); font-family: var(--font-doc); }
.rg-beispiel p + p { margin-top: var(--s3); }

/* Vorlagen (Prompts, Mails): ruhige Fläche mit Kopier-Knopf darunter. */
.rg-vorlage { padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.rg-vorlage blockquote { color: var(--ink); }
.rg-vorlage blockquote p + p { margin-top: var(--s2); }
.rg-vorlage .rg-kopieren { margin-top: var(--s3); }
.rg-kopieren.is-kopiert { border-color: var(--success); color: var(--success); }

/* Tabellen scrollen auf schmalen Bildschirmen in ihrem Rahmen, nicht die Seite. */
.rg-tabelle {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  -webkit-overflow-scrolling: touch; }
.rg-tabelle table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-md); }
.rg-tabelle th {
  padding: var(--s3) var(--s4); text-align: left; vertical-align: bottom; background: var(--surface-2);
  font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); color: var(--label-ink); }
.rg-tabelle td { padding: var(--s3) var(--s4); vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-2); }
.rg-tabelle td:first-child { color: var(--ink); }

/* Checkliste zum Abhaken (nur für den Moment, nichts wird gespeichert). */
.rg-text .rg-checkliste { list-style: none; padding-left: 0; }
.rg-aufgabe label { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.rg-aufgabe input {
  flex: none; width: var(--ico-sm); height: var(--ico-sm); margin-top: var(--s1); accent-color: var(--ink); cursor: pointer; }
.rg-aufgabe input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* CTA-Kasten im Text: Satz, Primärknopf, Zusatzzeile. */
.rg-text > .rg-cta, .rg-kurz + .rg-text > .rg-cta:first-child { margin-top: var(--s6); }
.rg-cta {
  padding: var(--s5) var(--s6); border-radius: var(--card-r); border: 1px solid var(--card-line);
  background: var(--card-bg); box-shadow: var(--card-shadow); color: var(--ink); }
.rg-cta a:not(.btn) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.rg-cta-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.rg-cta p + .rg-cta-aktion { margin-top: var(--s4); }
.rg-cta-zusatz { font-size: var(--fs-xs); color: var(--ink-3); }

/* ═══ FAQ: Aufklapper wie auf der Landing ═══ */
.rg-faq { margin-top: var(--s16); }
.faq { margin-top: var(--s6); border-top: 1px solid var(--line); font-size: var(--fs-md); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s2); border-radius: var(--r-md); font-weight: var(--fw-medium); color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--hover-bg); }
.faq summary .ico { color: var(--ink-3); transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq .a { padding: 0 var(--s2) var(--s5); color: var(--ink-2); }

/* ═══ Artikelkarten: Übersicht und „Weiterlesen“ ═══ */
.rg-karten { list-style: none; margin-top: var(--s6); display: grid; gap: var(--s4); }
.rg-karte {
  position: relative; padding: var(--s5) var(--s6); border-radius: var(--card-r); border: 1px solid var(--card-line);
  background: var(--card-bg); box-shadow: var(--card-shadow);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.rg-karte:hover { border-color: var(--card-line-hover); box-shadow: var(--card-shadow-hover); }
.rg-karte h3 {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-strong);
  line-height: var(--lh-tight); letter-spacing: var(--display-tracking); color: var(--ink); }
/* Die ganze Karte ist Klickfläche; der Link bleibt der einzige Tab-Halt. */
.rg-karte h3 a { border-radius: var(--r-sm); }
.rg-karte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--card-r); }
.rg-karte h3 a:focus-visible { box-shadow: none !important; }
.rg-karte h3 a:focus-visible::after { box-shadow: var(--focus-ring); }
.rg-karte p { margin-top: var(--s2); font-size: var(--fs-md); color: var(--ink-2); }
.rg-karte .rg-karte-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.rg-hub .rg-cta { margin-top: var(--s8); }

/* ═══ Warteliste (wie auf der Landing) ═══ */
.cta { padding: var(--s16) 0; background: var(--surface); border-top: 1px solid var(--line); }
.cta-inner { max-width: 40rem; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.cta-tile { margin: 0 auto var(--s6); width: 48px; height: 48px; }
.cta-tile .jt-mark { width: 32px; height: 32px; }
.cta h2 {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-strong);
  line-height: var(--lh-tight); letter-spacing: var(--display-tracking); }
.cta-lead { margin: var(--s4) auto 0; font-size: var(--fs-lg); color: var(--ink-2); }
.wl { margin: var(--s8) auto 0; max-width: 30rem; text-align: left; }
.wl-label { display: block; margin-bottom: var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.wl-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.wl-row input {
  flex: 1 1 220px; min-width: 0; height: var(--control-h); padding: 0 var(--s3);
  border-radius: var(--input-r); border: 1px solid var(--input-line); background: var(--input-bg); color: var(--ink);
  font-family: inherit; font-size: var(--fs-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.wl-row input::placeholder { color: var(--ink-3); }
.wl-row input[aria-invalid="true"] { border-color: var(--danger); }
.wl-row .btn { flex: none; }
.wl-note { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); }
.wl-ok {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--card-r);
  background: var(--success-tint); color: var(--success); font-weight: var(--fw-medium); }
.wl-err { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--fs-sm); color: var(--danger); }

/* ═══ Fußzeile (wie auf der Landing) ═══ */
footer.ft { background: var(--surface); border-top: 1px solid var(--line); padding: var(--s16) 0 var(--s10); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s10); }
.ft .jt-word { color: var(--ink); }
.ft .jt-word i { color: var(--accent-ink); }
.ft-about { max-width: 22rem; margin-top: var(--s4); color: var(--ink-2); }
.ft-col h2 { margin-bottom: var(--s4); font-size: var(--label-size); font-weight: var(--label-weight); color: var(--label-ink); letter-spacing: var(--label-tracking); }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.ft-col a { border-radius: var(--r-sm); color: var(--ink-2); transition: color var(--dur-fast) var(--ease-out); }
.ft-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ft-bottom {
  margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: var(--s3); font-size: var(--fs-xs); color: var(--ink-3); }
.ft-bottom .eu { display: inline-flex; align-items: center; gap: var(--s2); }
.ft-bottom .eu::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--success); }

/* ═══ Fingerbedienung: Trefferflächen 44 px (§2.3), unter 16 px zoomt iOS ═══ */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .btn, .kopf-ico, .nav-signin { min-height: var(--touch-min); }
  .kopf-ico { width: var(--touch-min); height: var(--touch-min); }
  .jt-logo { min-height: var(--touch-min); min-width: var(--touch-min); }
  .wl-row input { height: var(--touch-min); font-size: var(--fs-input-touch); }
  .rg-krumen a, .rg-toc a, .ft-col a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
  .rg-toc li { padding: 0; }
  .rg-aufgabe label { min-height: var(--touch-min); align-items: center; padding: var(--s1) 0; }
  .rg-aufgabe input { margin-top: 0; }
  .rg-text .rg-checkliste li + li { margin-top: 0; }
}

/* ═══ Mobil (≤ 760 px), die einzige Umbruchkante (§3.3) ═══ */
@media (max-width: 760px) {
  .nav-inner { gap: var(--s2); }
  .nav-links, .nav-cta, header.nav .jt-word { display: none; }
  .nav-right { gap: var(--s1); }
  .rg-main { padding: var(--s6) var(--gutter) var(--s10); }
  .rg-col h1 { margin-top: var(--s4); }
  .rg-kurz, .rg-cta, .rg-karte { padding: var(--s4) var(--s5); }
  .rg-beispiel { padding: var(--s4); }
  .rg-vorlage { padding: var(--s4); }
  .rg-text > h2, .rg-faq { margin-top: var(--s10); }
  .rg-cta .btn { flex: 1 1 auto; }
  .faq summary { padding: var(--s4) var(--s2); }
  .cta { padding: var(--s10) 0; }
  .ft-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .ft-col ul { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Rückfall für „Prompt kopieren“ ohne Clipboard-API: unsichtbares Feld. */
.rg-kopierfeld { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }