/* Peak Advisors -- Artikelbausteine, Ergaenzung zu /wissen/glossar.css
   Stand 07.09.2026. Nur neue Bausteine: Tabellen, Checkliste, Rechenkasten,
   FAQ, Quellenliste, Autorenbox. Farben und Typografie unveraendert. */

.wa-body{padding:44px 0 8px}
.wa-body h2{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--white);margin:38px 0 12px;font-weight:600}
.wa-body h3{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--white);margin:26px 0 8px;font-weight:600}
.wa-body p{font-size:16px;line-height:1.8;color:var(--text);margin-bottom:12px}
.wa-body a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.35)}
.wa-body a:hover{color:var(--gold-light)}
.wa-body strong{color:var(--white);font-weight:600}
.wa-body ul:not([class]){padding-left:22px;margin:0 0 16px}
.wa-body ul:not([class]) li{color:var(--text);line-height:1.8;margin-bottom:6px}

.wa-tw{overflow-x:auto;margin:20px 0;border:1px solid var(--karte-linie);border-radius:10px;background:var(--navy-mid)}
/* Der Standard-Scrollbalken des Browsers legte sich als breiter grauer Riegel unter
   jede breite Tabelle und sah aus wie ein Bedienelement. Jetzt schmal und im Farbklang,
   und er erscheint nur, wenn die Tabelle wirklich breiter ist. Befund 13.09.2026. */
.wa-tw{scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
.wa-tw::-webkit-scrollbar{height:6px}
.wa-tw::-webkit-scrollbar-track{background:transparent}
.wa-tw::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px}
/* Verdichtete Fassung fuer Tabellen mit vielen Spalten. */
.wa-tw.kompakt table{min-width:0;font-size:13px}
.wa-tw.kompakt th,.wa-tw.kompakt td{padding:9px 9px}
.wa-tw.kompakt thead th{letter-spacing:.6px}
.wa-tw.kompakt td{white-space:nowrap}
.wa-tw.kompakt td[colspan]{white-space:normal}
.th-sub{display:block;color:var(--faint);font-size:10px;letter-spacing:.4px;text-transform:none;font-weight:400;margin-top:3px}
/* Wertetabelle mit einer Zeile je Spalte: als umbrechendes Gitter statt als Tabelle,
   die sonst auf jedem Bildschirm seitlich scrollen muesste. */
.wa-faktoren{margin:20px 0}
.wa-fk-gitter{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0}
@media(max-width:620px){.wa-fk-gitter{grid-template-columns:repeat(4,1fr)}}
@media(max-width:400px){.wa-fk-gitter{grid-template-columns:repeat(3,1fr)}}
.wa-fk{border:1px solid var(--karte-linie);border-radius:8px;background:var(--navy-mid);padding:10px 6px;text-align:center}
.wa-fk dt{color:var(--gold);font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:0}
.wa-fk dd{color:var(--white);font-size:17px;font-weight:600;margin:6px 0 0;font-variant-numeric:tabular-nums}
.wa-faktoren figcaption{font-size:12px;color:var(--faint);padding:10px 2px 0;line-height:1.6}
.wa-tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.wa-tw caption{caption-side:bottom;text-align:left;font-size:12px;color:var(--faint);padding:10px 14px 12px;line-height:1.6}
.wa-tw th,.wa-tw td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.55}
.wa-tw thead th{color:var(--gold);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;background:rgba(23,51,90,.55)}
.wa-tw tbody th{color:var(--white);font-weight:600}
.wa-tw td{color:var(--text)}
.wa-tw tbody tr:last-child th,.wa-tw tbody tr:last-child td{border-bottom:0}
.wa-num{white-space:normal;word-break:normal}

.wa-check{list-style:none;padding:0;margin:18px 0}
.wa-check li{position:relative;padding:0 0 0 28px;margin-bottom:10px;font-size:15px;line-height:1.7;color:var(--text)}
.wa-check li:before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border:1px solid var(--gold);border-radius:3px}

.wa-calc{border:1px solid var(--karte-linie);border-radius:12px;background:var(--navy-mid);padding:22px;margin:24px 0}
.wa-calc-h{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.wa-calc table{width:100%;border-collapse:collapse;font-size:14px}
.wa-calc td{padding:7px 0;border-bottom:1px solid var(--border);color:var(--text)}
.wa-calc td:last-child{text-align:right;color:var(--white);white-space:nowrap}
.wa-calc tr:last-child td{border-bottom:0;font-weight:600}

.wa-faq{margin:18px 0 8px}
.wa-faq details{border:1px solid var(--karte-linie);border-radius:10px;background:var(--navy-mid);margin-bottom:10px}
.wa-faq summary{cursor:pointer;padding:14px 18px;font-size:15px;font-weight:600;color:var(--white);list-style:none}
.wa-faq summary::-webkit-details-marker{display:none}
.wa-faq summary:after{content:"+";float:right;color:var(--gold);font-weight:400}
.wa-faq details[open] summary:after{content:"–"}
.wa-faq details p{padding:0 18px 16px;margin:0;font-size:15px;line-height:1.75;color:var(--text)}

.wa-src{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--border)}
.wa-src h2{margin-top:0}
.wa-src ol{margin:0;padding-left:20px}
.wa-src li{font-size:13px;line-height:1.7;color:var(--faint);margin-bottom:8px}
.wa-src a{color:var(--muted);border-bottom:1px solid rgba(126,159,184,.3)}

.wa-author{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--karte-linie);border-radius:12px;background:var(--navy-mid);padding:22px;margin:34px 0 0}
.wa-author-chip{flex:0 0 44px;height:44px;border-radius:8px;background:var(--gold-faint);border:1px solid rgba(201,168,76,.4);display:flex;align-items:center;justify-content:center;color:#D8BD6E;font-weight:600;font-size:15px}
.wa-author-n{color:var(--white);font-weight:600;font-size:15px;margin-bottom:4px}
.wa-author p{font-size:13px;line-height:1.7;color:var(--faint);margin:0 0 6px}
.wa-updated{font-size:12px;color:var(--faint);margin-top:14px}

@media(max-width:640px){
 .wa-body h2{font-size:20px}
 .wa-author{flex-direction:column;gap:12px}
}

/* Ergaenzungen fuer die ausgebauten Begriffsartikel */
.wa-body{padding:44px 0 8px}
.wa-body h2:first-child{margin-top:0}
.wa-kurz{border:1px solid var(--karte-linie);border-radius:12px;background:var(--navy-mid);padding:18px 22px;margin:0 0 26px}
.wa-kurz-h{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.wa-kurz p{font-size:15px;line-height:1.75;color:var(--text);margin:0}
.wa-formel{border-left:3px solid var(--gold);background:var(--gold-faint);padding:14px 18px;border-radius:0 8px 8px 0;margin:18px 0;font-size:15px;line-height:1.7;color:var(--white)}
.wa-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}
.wa-zweispalt>div{border:1px solid var(--karte-linie);border-radius:10px;background:var(--navy-mid);padding:16px 18px}
.wa-zweispalt h3{margin:0 0 8px;font-size:15px}
.wa-zweispalt ul{list-style:none;padding:0;margin:0}
.wa-zweispalt li{font-size:14px;line-height:1.7;color:var(--text);padding-left:16px;position:relative}
.wa-zweispalt li:before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--gold)}
@media(max-width:640px){.wa-zweispalt{grid-template-columns:1fr}}

/* Korrektur 13.09.2026: Der Rechenkasten scrollte auf schmalen Bildschirmen seitlich.
   Der Balken sah aus wie ein Bedienelement und war ohne Tastatur nicht erreichbar
   (axe: scrollable-region-focusable). Jetzt bricht jede Zeile um, nichts scrollt. */
@media(max-width:840px){
 .wa-calc td,.wa-calc tr{display:block}
 .wa-calc td{padding:2px 0;border-bottom:0}
 .wa-calc td:first-child{color:var(--faint);font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding-top:10px}
 .wa-calc td:last-child{text-align:left;white-space:normal;padding-bottom:10px;border-bottom:1px solid var(--border)}
 .wa-calc tr:last-child td:last-child{border-bottom:0}
}

/* Druckausgabe, Ergänzung für design.css (ans Ende anhängen) und wissen/glossar.css.
   Befund Tiefenprüfung 11.09.2026: ohne diesen Block druckt Chromium helle Schrift
   auf weißem Papier (Hintergründe werden nicht gedruckt), dazu Cookie-Banner und Navigation. */
@media print {
  :root { --navy:#fff; --gold:#8a6d1f; }
  html, body, .sec, .sec.hell, .hero, .final, .kontakt, .karte, .wa-kurz, .paar, .weg, .schritt,
  .preisblock, .aussage, .vertiefung, article, .tabelle, .rechtstext, .glossar, .kachel {
    background:#fff !important; color:#111 !important; box-shadow:none !important; border-color:#bbb !important;
  }
  h1, h2, h3, h4, .lead, .sub, p, li, td, th, dt, dd, blockquote, .eyebrow, .quote, .rolle, .wa-kurz-h, .n, .stat, .stat * {
    color:#111 !important; text-shadow:none !important;
  }
  h1 em, .gold, .eyebrow, .wa-kurz-h { color:#6b5416 !important; }
  a { color:#111 !important; text-decoration:underline; }
  a[href^="http"]:not([href*="peak-advisors.de"])::after { content:" (" attr(href) ")"; font-size:.85em; color:#444; }
  nav, .mobilmenue, .nav-burger, #cookie-banner, .skip-link, .scroll-hint, .hero-bg, .trust, .btn, .btns, .more,
  .formular, .msf, .overlay, .suche, .fchip, .field, .chips, video, iframe, .final .haken, footer .cb-btns { display:none !important; }
  .rv, .split .w > span, .chip { opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  .hero, .hero.klein { min-height:0 !important; padding:0 0 12mm !important; }
  .hero-in, .paar, .raster, .wege, .schritte, .zahlen { display:block !important; }
  .bild img, picture img { max-width:60mm !important; height:auto !important; }
  details { open:true; } details > * { display:block !important; }
  .tabelle-wrap { overflow:visible !important; }
  h2, h3 { page-break-after:avoid; break-after:avoid; }
  .karte, .weg, .schritt, .wa-kurz, tr, li, blockquote { page-break-inside:avoid; break-inside:avoid; }
  @page { margin:18mm 16mm; }
  footer { border-top:1px solid #bbb !important; background:#fff !important; color:#444 !important; font-size:10pt; }
  footer a { text-decoration:none; }
  body::after { content:"peak-advisors.de · Christian Sperling · Grote Gert 16, 47495 Rheinberg · 02843 7120771"; display:block; margin-top:8mm; font-size:9pt; color:#444; }
}

/* Lange Komposita dehnen auf 320-px-Geraeten sonst das gesamte Layout. Befund 12.09.2026. */
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:460px){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}}

/* Tabellen unterhalb 840 px als gestapelte Bloecke statt seitlich scrollbar.
   Befund 13.09.2026: 80 der 100 Seiten zeigten darunter einen Scrollbalken, der
   aussah wie ein Bedienelement. Ab 841 px passt jede Tabelle nachweislich in ihre
   Spalte, gemessen ueber alle Seiten. Die Rollen im Markup (role="table" bis
   role="cell", gesetzt in src/lib/tabellen.ts) halten die Tabellensemantik, die
   display:block sonst entfernt. */
@media (max-width:840px){
 .wa-tw{overflow-x:visible;border:0;background:none;border-radius:0}
 .wa-tw table{display:block;width:100%;min-width:0;border-collapse:collapse}
 .wa-tw thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .wa-tw tbody{display:block}
 .wa-tw tbody tr{display:block;border:1px solid var(--karte-linie);border-radius:12px;background:var(--navy-mid);padding:14px 16px;margin-bottom:10px}
 .wa-tw tbody tr:last-child{margin-bottom:0}
 .wa-tw tbody th,.wa-tw tbody td{display:block;width:auto;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .wa-tw tbody th{color:var(--white);font-weight:600;font-size:15px;line-height:1.4;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
 .wa-tw tbody td{color:var(--text);font-size:14px;line-height:1.55;padding-top:7px}
 .wa-tw tbody td:first-child{padding-top:0;color:var(--white);font-weight:600;font-size:15px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
 /* Beschriftung und Wert nebeneinander: ein Block bleibt so halb so hoch. */
 .wa-tw tbody td[data-spalte]{display:grid;grid-template-columns:14ch minmax(0,1fr);gap:4px 14px;align-items:start}
 .wa-tw tbody td[data-spalte]:before{content:attr(data-spalte);color:var(--gold);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;font-weight:500;line-height:1.75;overflow-wrap:anywhere;min-width:0}
 @media (max-width:430px){.wa-tw tbody td[data-spalte]{grid-template-columns:1fr;gap:1px}}
 .wa-tw caption,.wa-tw>caption{display:block;caption-side:bottom;text-align:left;padding:10px 2px 0;font-size:12px;color:var(--faint);line-height:1.6}
}