/* ============================================================
   WK Academy — Artikelseite

   Aufbau: Kopfzeile, Titel, eingebettetes Deck, darunter der
   ausführliche Fließtext. Ergänzt deck.css, ersetzt es nicht.
   ============================================================ */

html, body { height: auto; background: var(--cream); }
body { line-height: 1.6; }

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  background: rgba(246,242,236,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
}
.kopf .marke {
  font-family: var(--serif); font-size: 20px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.kopf .marke span { color: var(--muted); }
.kopf nav { display: flex; gap: 26px; font-size: 14.5px; }
.kopf nav a { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--ink); }

/* ---------- Rahmen ---------- */

.beitrag { max-width: 1120px; margin: 0 auto; padding: 56px 32px 0; }

.brotkrume { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.brotkrume a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hair); }
.brotkrume a:hover { color: var(--accent); border-color: var(--accent); }
.brotkrume span { margin: 0 8px; opacity: .5; }

.beitrag > h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02; letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 20ch;
  margin-bottom: 20px;
}
.anriss {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.55; font-weight: 300;
  color: var(--muted); max-width: 60ch;
  margin-bottom: 12px;
}
.meta-zeile {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: 13px; color: var(--muted-2);
  padding: 16px 0 0; margin-bottom: 44px;
  border-top: 1px solid var(--hair);
  margin-top: 28px;
}

/* ---------- Deck-Bereich ---------- */

.deck-block { margin-bottom: 18px; }
.deck-hinweis {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 12.5px; color: var(--muted-2);
  margin-bottom: 76px;
}
.deck-hinweis kbd {
  font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--hair); border-radius: 4px;
  padding: 2px 6px; background: var(--soft); color: var(--muted);
}

/* ---------- Fließtext ---------- */

.text { max-width: 68ch; margin: 0 auto; }

.text > * + * { margin-top: 22px; }

.text h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.12; letter-spacing: -.018em;
  text-wrap: balance;
  margin-top: 64px;
}
.text h2:first-child { margin-top: 0; }
.text h3 {
  font-size: 18.5px; font-weight: 600; letter-spacing: -.005em;
  margin-top: 40px; margin-bottom: -8px;
}
.text p { font-size: 17.5px; line-height: 1.72; font-weight: 300; color: var(--ink); max-width: none; }
.text strong { font-weight: 600; }
.text em { font-family: var(--serif); font-style: italic; font-size: 1.06em; }

.text a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 1px;
  transition: color .2s ease;
}
.text a:hover { color: var(--accent); }

.text ul, .text ol { padding-left: 0; list-style: none; display: grid; gap: 12px; }
.text li { font-size: 17.5px; line-height: 1.62; font-weight: 300; padding-left: 26px; position: relative; }
.text ul > li::before {
  content: ''; position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.text ol { counter-reset: n; }
.text ol > li { counter-increment: n; }
.text ol > li::before {
  content: counter(n); position: absolute; left: 0; top: .06em;
  font-family: var(--mono); font-size: 12.5px; color: var(--accent);
}

/* Merkkasten für die eine Aussage, die hängen bleiben soll */
.merke {
  background: var(--soft);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 26px 28px;
  margin-top: 40px;
}
.merke p { font-family: var(--serif); font-size: 23px; line-height: 1.35; letter-spacing: -.01em; }
.merke p + p { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; }

/* Tabellen im Artikel */
.text table { width: 100%; border-collapse: collapse; margin-top: 34px; font-size: 16px; }
.text th {
  text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; padding: 0 16px 11px 0;
  border-bottom: 1px solid var(--hair);
}
.text td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--hair); font-weight: 300; line-height: 1.5; vertical-align: top; }
.text td:first-child { font-weight: 500; }
/* Schmale Handys: lange Woerter in Tabellenzellen umbrechen statt die Seite zu verbreitern */
.text th, .text td { overflow-wrap: anywhere; hyphens: auto; }

/* Frage-und-Antwort-Teil */
.faq { margin-top: 64px; }
.faq h2 { margin-top: 0; }
.faq .frage { border-top: 1px solid var(--hair); padding-top: 24px; margin-top: 24px; }
.faq .frage h3 { margin-top: 0; margin-bottom: 10px; font-size: 18.5px; }
.faq .frage p { margin-top: 0; }

/* Hinweiskasten (z. B. Rechtsthemen) */
.hinweis {
  border: 1px solid var(--hair); border-radius: 14px;
  padding: 20px 22px; margin-top: 36px;
  background: var(--soft);
}
.hinweis p { font-size: 15px; line-height: 1.62; color: var(--muted); }

/* ---------- Abschluss ---------- */

.abschluss { max-width: 1120px; margin: 96px auto 0; padding: 0 32px 96px; }
.abschluss h2 {
  font-family: var(--serif); font-weight: 400; font-size: 32px;
  letter-spacing: -.018em; margin-bottom: 28px;
  padding-top: 40px; border-top: 1px solid var(--hair);
}
.weiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.weiter a {
  display: block; text-decoration: none; color: inherit;
  background: var(--soft); border: 1px solid var(--hair); border-radius: 16px;
  padding: 24px 26px;
  transition: transform .22s cubic-bezier(.25,1,.5,1), border-color .22s ease;
}
.weiter a:hover { transform: translateY(-3px); border-color: var(--accent-w); }
.weiter .lbl { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--accent); margin-bottom: 10px; }
.weiter .t { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.2; letter-spacing: -.012em; margin-bottom: 8px; }
.weiter .k { display: block; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-weight: 300; }

.fusszeile {
  border-top: 1px solid var(--hair);
  padding: 30px 32px 60px;
  font-size: 14px; color: var(--muted);
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
}
.fusszeile a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.fusszeile a:hover { color: var(--accent); border-color: var(--accent); }
.fusszeile__wege { flex-basis: 100%; order: 3; line-height: 1.8; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 760px) {
  .kopf { padding: 14px 20px; flex-wrap: wrap; row-gap: 6px; }   /* Navigation war breiter als das Handy (waagerechter Scroll) */
  .kopf .marke { font-size: 17px; }
  .kopf nav { gap: 16px; flex-wrap: wrap; font-size: 14px; }
  .beitrag { padding: 34px 20px 0; }
  .abschluss { padding: 0 20px 64px; margin-top: 64px; }
  .fusszeile { padding: 24px 20px 48px; }
  .deck-hinweis { margin-bottom: 48px; }
  .text h2 { margin-top: 48px; }
  .text p, .text li { font-size: 16.5px; }
  .merke p { font-size: 20px; }
}

/* Sprunglink: nur bei Tastaturfokus sichtbar. WCAG 2.4.1 (Level A) --
   ohne ihn muss sich jeder Tastaturnutzer auf JEDER Seite erst durch
   Logo, fuenf Navigationspunkte, Login und CTA arbeiten. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:#161512; color:#F6F2EC;
  padding:10px 18px; border-radius:0 0 8px 0;
  font-size:14px; font-weight:500; text-decoration:none;
}
.skip:focus{ left:0; }

/* Grosse Bildschirme: Die ganze Seite waechst proportional mit (Schrift, Abstaende, Bilder,
   Ringe, Inhaltsverzeichnis), statt nur breiter zu werden und Loecher zu bekommen. Wirkt wie die
   Zoomstufe des Browsers. Stufen so gewaehlt, dass die Layoutbreite nie unter ~1900 px faellt
   (dort ist alles nachgemessen); unter 2000 px Fensterbreite unveraendert. zoom: Chrome, Safari,
   Firefox ab 126; aeltere Browser zeigen die Seite einfach in normaler Groesse. */
@media (min-width: 2000px) { html { zoom: 1.05; } }
@media (min-width: 2150px) { html { zoom: 1.12; } }
@media (min-width: 2300px) { html { zoom: 1.2; } }
@media (min-width: 2450px) { html { zoom: 1.27; } }
@media (min-width: 2600px) { html { zoom: 1.35; } }