/*
Theme Name: wettkonto.com
Description: Das Wettkonto als Lebenszyklus. Timeline/Step-Archetyp, Schiefer + Veilchen, Fraunces + Work Sans + DM Mono (self-hosted).
Version: 0.1.0
Author: iGaming
Text Domain: wettkonto-com
*/

/* ============================================================
   1 · Fonts — self-hosted (Fontsource), KEINE Google Fonts
   Alle Schnitte werden in functions.php vorgeladen (L-331: CLS)
   ============================================================ */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-wght.woff2") format("woff2-variations");
  font-weight:100 900;font-display:swap;font-style:normal;}
@font-face{font-family:"Work Sans";src:url("fonts/worksans-wght.woff2") format("woff2-variations");
  font-weight:100 900;font-display:swap;font-style:normal;}
@font-face{font-family:"DM Mono";src:url("fonts/dmmono-400.woff2") format("woff2");
  font-weight:400;font-display:swap;font-style:normal;}
@font-face{font-family:"DM Mono";src:url("fonts/dmmono-500.woff2") format("woff2");
  font-weight:500;font-display:swap;font-style:normal;}

/* ============================================================
   2 · Tokens — Design-Steckbrief Phase 1 (Stopp 1, 2026-09-21)
   ============================================================ */
:root{
  --wk-schiefer:#33383D;      /* Grund/Text */
  --wk-schiefer-90:#42484F;
  --wk-schiefer-60:#6B737C;
  --wk-schiefer-30:#AFB5BC;
  --wk-veilchen:#6D4AFF;      /* einzige Signalfarbe */
  --wk-veilchen-dunkel:#5334E0;
  --wk-veilchen-hell:#EEEAFF;
  --wk-nebel:#F2F3F5;         /* Flächen */
  --wk-nebel-rand:#E1E4E8;
  --wk-weiss:#FFFFFF;

  --wk-serif:"Fraunces",Georgia,serif;
  --wk-sans:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wk-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wk-max:72rem;
  --wk-text:40rem;
  --wk-gap:1.5rem;
  --wk-radius:6px;
  --wk-rand:1px solid var(--wk-nebel-rand);

  /* timeline-drag: re-parametrisiert (Element-Ledger 2026-09-21) */
  --wk-tl-dauer:320ms;
  --wk-tl-etappe-breite:11rem;
  --wk-tl-ton:var(--wk-veilchen);
}

/* ============================================================
   3 · Grundlagen
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--wk-weiss);color:var(--wk-schiefer);
  font-family:var(--wk-sans);font-size:1.0625rem;line-height:1.65;
  font-weight:400;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--wk-veilchen-dunkel);text-underline-offset:.18em;}
a:hover{color:var(--wk-schiefer);}
:focus-visible{outline:3px solid var(--wk-veilchen);outline-offset:2px;}

h1,h2,h3,h4{font-family:var(--wk-serif);color:var(--wk-schiefer);
  line-height:1.18;margin:0 0 .6em;font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 0;}
h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.9rem);letter-spacing:-.015em;}
h2{font-size:clamp(1.45rem,1.1rem + 1.4vw,2rem);margin-top:2.2em;}
h3{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);margin-top:1.8em;}
p,ul,ol{margin:0 0 1.15em;}
li{margin-bottom:.4em;}
strong{font-weight:600;}
.wk-mono,time,.wk-zahl{font-family:var(--wk-mono);font-variant-numeric:tabular-nums;}

.wk-shell{width:100%;max-width:var(--wk-max);margin-inline:auto;padding-inline:1rem;}
.wk-text{max-width:var(--wk-text);}
.wk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.wk-skip{position:absolute;left:-9999px;}
.wk-skip:focus{left:1rem;top:1rem;z-index:100;background:var(--wk-veilchen);
  color:#fff;padding:.6rem 1rem;border-radius:var(--wk-radius);}

/* ============================================================
   4 · Werbehinweis (Pflichthinweis) + Kopf
   ============================================================ */
.wk-adv{background:var(--wk-schiefer);color:#E8EAED;font-size:.8125rem;}
.wk-adv summary{cursor:pointer;padding:.5rem 1rem;max-width:var(--wk-max);
  margin-inline:auto;font-weight:500;letter-spacing:.02em;list-style:none;}
.wk-adv summary::-webkit-details-marker{display:none;}
.wk-adv summary::after{content:" +";font-family:var(--wk-mono);}
.wk-adv[open] summary::after{content:" \2212";}
.wk-adv-text{max-width:var(--wk-max);margin-inline:auto;padding:0 1rem 1rem;line-height:1.55;}
.wk-adv-text p{margin:0;}

.wk-kopf{border-bottom:var(--wk-rand);background:var(--wk-weiss);}
.wk-kopf-in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.9rem;}
.wk-marke{font-family:var(--wk-serif);font-size:1.3rem;font-weight:600;
  text-decoration:none;color:var(--wk-schiefer);}
.wk-marke span{color:var(--wk-veilchen);}
.wk-nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;margin:0;padding:0;}
.wk-nav a{text-decoration:none;color:var(--wk-schiefer-90);font-size:.95rem;font-weight:500;}
.wk-nav a:hover,.wk-nav .current-menu-item a{color:var(--wk-veilchen-dunkel);}

/* ============================================================
   5 · Etappenachse — Kern-Geste des Archetyps
   ============================================================ */
.wk-etappen{background:var(--wk-nebel);border-block:var(--wk-rand);padding-block:.75rem;}
.wk-etappen ol{display:flex;gap:0;list-style:none;
  /* Nur der Listen-Reset gehoert hierher. margin/padding auf 0 setzen wuerde die
     .wk-shell am selben Element ueberschreiben (hoehere Spezifitaet) — die Achse
     stand dann buendig am Fensterrand statt an der Inhaltskante (2026-09-21). */
  margin-block:0;margin-inline:auto;padding-block:0;
  /* .9rem weniger als die Shell: die Etappen-Links haben selbst .9rem Innenabstand.
     Ohne den Abzug beginnt die SICHTBARE Achse 14 px rechts der Inhaltskante. */
  padding-inline:calc(1rem - .9rem);
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.wk-etappen li{scroll-snap-align:start;flex:0 0 auto;}
.wk-etappen a{display:flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.4rem .9rem;font-size:.875rem;color:var(--wk-schiefer-60);white-space:nowrap;}
.wk-etappen a::before{content:attr(data-nr);font-family:var(--wk-mono);font-size:.75rem;
  width:1.4rem;height:1.4rem;display:grid;place-items:center;border-radius:50%;
  background:var(--wk-weiss);border:var(--wk-rand);color:var(--wk-schiefer-60);}
.wk-etappen a:hover{color:var(--wk-schiefer);}
/* Piktogramm der Etappe. Erbt die Farbe des Links, also auch den aktiven Zustand.
   Die Nummer bleibt: sie traegt die Reihenfolge, das Icon traegt die Bedeutung. */
.wk-etappen .wk-etappe-icon{width:1.15rem;height:1.15rem;flex:0 0 auto;
  margin-inline-start:-.15rem;opacity:.85;}
.wk-etappen a:hover .wk-etappe-icon,
.wk-etappen .ist-aktiv .wk-etappe-icon{opacity:1;}
.wk-etappen .ist-aktiv a{color:var(--wk-schiefer);font-weight:600;}
.wk-etappen .ist-aktiv a::before{background:var(--wk-veilchen);border-color:var(--wk-veilchen);color:#fff;}

/* ============================================================
   6 · Inhalt, Fakten-Elemente
   ============================================================ */
main{display:block;}
.wk-haupt{padding-block:2.5rem 3.5rem;}
.wk-lead{font-size:1.15rem;color:var(--wk-schiefer-90);max-width:var(--wk-text);}

.wk-fakt{border:var(--wk-rand);border-left:4px solid var(--wk-veilchen);
  border-radius:var(--wk-radius);padding:1.1rem 1.25rem;margin:1.8rem 0;background:var(--wk-weiss);}
.wk-fakt h3{margin-top:0;font-size:1.05rem;}
.wk-fakt p:last-child{margin-bottom:0;}

.wk-kacheln{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:1.8rem 0;}
.wk-kachel{border:var(--wk-rand);border-radius:var(--wk-radius);padding:1rem;background:var(--wk-nebel);}
.wk-kachel .wert{font-family:var(--wk-mono);font-size:1.75rem;font-weight:500;
  display:block;color:var(--wk-schiefer);font-variant-numeric:tabular-nums;}
.wk-kachel .bez{font-size:.8125rem;color:var(--wk-schiefer-60);display:block;margin-top:.2rem;}

.wk-cta{display:inline-block;background:var(--wk-veilchen);color:#fff;text-decoration:none;
  font-weight:600;padding:.7rem 1.4rem;border-radius:var(--wk-radius);border:0;cursor:pointer;}
.wk-cta:hover{background:var(--wk-veilchen-dunkel);color:#fff;}

/* ============================================================
   7 · timeline-drag — Fristenachse (Element-Ledger: wettkonto.com)
   Ohne Library: Pointer-Events + CSS-Transform. Ohne JS bleibt
   die Achse eine lesbare Liste.
   ============================================================ */
.wk-tl{margin:2rem 0;border:var(--wk-rand);border-radius:var(--wk-radius);
  background:var(--wk-nebel);padding:1rem 0;}
.wk-tl-kopf{padding:0 1rem .75rem;font-size:.875rem;color:var(--wk-schiefer-60);}
.wk-tl-spur{display:flex;gap:1rem;padding:0 1rem;list-style:none;margin:0;
  overflow-x:auto;scroll-snap-type:x proximity;}
.wk-tl.ist-greifbar .wk-tl-spur{cursor:grab;scrollbar-width:none;}
.wk-tl.ist-greifbar .wk-tl-spur::-webkit-scrollbar{display:none;}
.wk-tl.wird-gezogen .wk-tl-spur{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
/* waechst auf die freie Breite, damit wenige Etappen nicht angeschnitten
   wirken; erst wenn sie nicht mehr passen, wird die Achse scrollbar */
.wk-tl-etappe{flex:1 0 var(--wk-tl-etappe-breite);scroll-snap-align:start;
  background:var(--wk-weiss);border:var(--wk-rand);border-radius:var(--wk-radius);
  padding:.9rem 1rem;transition:border-color var(--wk-tl-dauer),transform var(--wk-tl-dauer);}
.wk-tl-etappe:hover{border-color:var(--wk-tl-ton);}
.wk-tl-etappe .tag{font-family:var(--wk-mono);font-size:.75rem;font-weight:500;
  color:var(--wk-tl-ton);text-transform:uppercase;letter-spacing:.06em;}
.wk-tl-etappe .was{font-weight:600;margin:.3rem 0 .2rem;}
.wk-tl-etappe .dazu{font-size:.875rem;color:var(--wk-schiefer-60);margin:0;}
.wk-tl-etappe.ist-marke{border-color:var(--wk-tl-ton);border-width:2px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .wk-tl-etappe{transition:none;}
  .wk-tl-spur{scroll-behavior:auto;}
}

/* ============================================================
   8 · Tabellen
   Muster 01 (Record → stapeln) und Muster 03 (Key-Columns +
   Row-Expander). 02 nur ohne CTA in der Zeile; 04/05 abgelehnt.
   ============================================================ */
.wk-tab-huelle{margin:1.8rem 0;}
/* Die Matrix ist mobil 17 px breiter als der Inhalt (CTA-Zelle nowrap); ohne eigenen Scrollbereich
   ragte sie in den Seitenrand und der Body-Guard schnitt sie ab (Visual-Sweep 4b, 2026-09-24). */
@media (max-width:767px){.wk-tab-huelle{overflow-x:auto;}}
.wk-tab{width:100%;border-collapse:collapse;font-size:.9375rem;}
.wk-tab caption{text-align:left;font-size:.875rem;color:var(--wk-schiefer-60);
  padding-bottom:.5rem;}
.wk-tab th,.wk-tab td{padding:.65rem .75rem;text-align:left;
  border-bottom:var(--wk-rand);vertical-align:top;}
.wk-tab thead th{background:var(--wk-nebel);font-family:var(--wk-sans);
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--wk-schiefer-60);font-weight:600;border-bottom:2px solid var(--wk-nebel-rand);}
.wk-tab tbody tr:hover{background:var(--wk-veilchen-hell);}
.wk-tab .wk-zahl{font-family:var(--wk-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
.wk-tab .nicht-ausgewiesen{color:var(--wk-schiefer-30);font-style:italic;}

/* --- Muster 01: Record-Stapel (Konto-Datenblatt, eine Marke) --- */
@media (max-width:767px){
  .wk-stapel table,.wk-stapel tbody,.wk-stapel tr,.wk-stapel td{display:block;width:100%;}
  .wk-stapel thead{position:absolute;clip-path:inset(50%);}
  .wk-stapel tr{border:var(--wk-rand);border-radius:var(--wk-radius);
    margin-bottom:.9rem;padding:.35rem .75rem;background:var(--wk-weiss);}
  .wk-stapel td{border-bottom:0;padding:.4rem 0;}
  .wk-stapel td::before{content:attr(data-label);display:block;
    font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
    color:var(--wk-schiefer-60);font-weight:600;}
  /* Falle aus dem Shelf: display:block schlaegt [hidden] */
  .wk-stapel [hidden]{display:none !important;}
}

/* --- Muster 03: Key-Columns + Row-Expander (Anbieter-Vergleich) ---
   Markup rendert AUSGEKLAPPT, das Skript klappt zu. Ohne JS bleibt
   die Tabelle vollstaendig lesbar. Detailzellen werden nie
   display:none gesetzt, damit sie indexierbar bleiben.          */
.wk-expander .wk-detail-zeile td{background:var(--wk-nebel);padding-top:.4rem;}
.wk-expander .wk-detail-liste{display:grid;grid-template-columns:auto 1fr;
  gap:.3rem .9rem;margin:0;font-size:.875rem;}
.wk-expander .wk-detail-liste dt{color:var(--wk-schiefer-60);font-weight:600;}
.wk-expander .wk-detail-liste dd{margin:0;}
.wk-mehr{background:none;border:var(--wk-rand);border-radius:var(--wk-radius);
  font:inherit;font-size:.8125rem;padding:.25rem .7rem;cursor:pointer;
  color:var(--wk-veilchen-dunkel);white-space:nowrap;}
.wk-mehr:hover{border-color:var(--wk-veilchen);}
.wk-expander tr.ist-zu .wk-detail-zeile,
.wk-expander .wk-detail-zeile[hidden]{display:none;}
@media (min-width:768px){
  /* Das Panel bleibt auch breit erreichbar: Angaben ohne eigene Spalte
     (Betreiber, Löschung) waeren sonst nur auf dem Handy zu sehen.
     Ausgeblendet wird breit nur, was ohnehin als Spalte dasteht. */
  .wk-expander .wk-nur-schmal{display:none;}
  .wk-expander .wk-cta-zelle{text-align:right;white-space:nowrap;}
  .wk-expander .wk-mehr-zelle.wk-nur-schmal{display:none;}
}
@media (max-width:767px){
  .wk-expander .wk-nur-breit{display:none;}
}

/* ============================================================
   9 · Methodik-Box (theme-snippets/methodik-box.php)
   ============================================================ */
.ig-methodik{border:var(--wk-rand);border-radius:var(--wk-radius);
  background:var(--wk-nebel);padding:1rem 1.25rem;margin:2.5rem 0 1.5rem;font-size:.9375rem;}
.ig-methodik h2,.ig-methodik h3{margin-top:0;font-size:1rem;font-family:var(--wk-sans);
  text-transform:uppercase;letter-spacing:.04em;color:var(--wk-schiefer-60);}
.ig-methodik dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;}
.ig-methodik dt{color:var(--wk-schiefer-60);font-weight:600;}
.ig-methodik dd{margin:0;}
.ig-methodik time{font-family:var(--wk-mono);}
/* Im Seitenkopf als schlanke Bylinie (W2, 2026-09-24): Autor und Pruefdatum im ersten Screen. */
.wk-artikel > header .ig-methodik{background:none;border:0;border-radius:0;padding:0;margin:.5rem 0 1.25rem;
  font-size:.8125rem;line-height:1.5;color:var(--wk-schiefer-60);}
.wk-artikel > header .ig-methodik a{color:inherit;}

/* KI-Bild-Kennzeichnung (theme-snippets/ki-bild.php) */
.ig-ki-badge{display:inline-block;font-size:.6875rem;font-family:var(--wk-mono);
  background:var(--wk-schiefer);color:#fff;padding:.15rem .45rem;border-radius:3px;}
figure figcaption{font-size:.8125rem;color:var(--wk-schiefer-60);margin-top:.4rem;}

/* ============================================================
   10 · Fuss
   ============================================================ */
.wk-fuss{background:var(--wk-schiefer);color:#C9CDD2;margin-top:4rem;
  padding-block:2.5rem 1.5rem;font-size:.9rem;}
.wk-fuss a{color:#fff;}
.wk-fuss-spalten{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));}
.wk-fuss h2{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--wk-sans);color:#8A9199;margin:0 0 .6rem;}
.wk-fuss ul{list-style:none;margin:0;padding:0;}
.wk-fuss li{margin-bottom:.35rem;}
.wk-rg{border-top:1px solid #4A5057;margin-top:2rem;padding-top:1rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;}
.wk-rg-text{font-weight:600;color:#fff;margin:0;display:flex;align-items:center;gap:.5rem;}
/* Das 18+-Siegel sitzt VOR dem Pflichtsatz und erbt dessen Farbe (currentColor im SVG). */
.wk-siegel-18{height:1.375rem;width:auto;flex:0 0 auto;}
.wk-rg-hilfe{margin:0;font-size:.8125rem;color:#C9CDD2;}
.wk-rg-hilfe a{color:#fff;}
.wk-siegel{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:.8125rem;}
/* Affiliate-Hinweis im Fuss: gleiche Mechanik wie der Werbehinweis im Kopf, aber auf der
   dunklen Flaeche schon drin — deshalb ohne eigenen Hintergrund und ohne Shell-Begrenzung. */
.wk-adv-fuss{background:none;color:inherit;margin-top:1.5rem;border-top:1px solid #4A5057;}
.wk-adv-fuss summary{padding:.75rem 0;max-width:none;}
.wk-adv-fuss .wk-adv-text{max-width:none;padding:0 0 .5rem;}
/* RG-Botschaft am Listing: leiser als der Footer-Satz, aber vollstaendig und wortgleich. */
.wk-rg-listing{font-size:.8125rem;color:var(--wk-schiefer-60);margin:.6rem 0 1.5rem;}

@media (max-width:640px){
  .wk-kopf-in{flex-direction:column;align-items:flex-start;gap:.6rem;}
  /* Eine schiebbare Zeile statt zweier Umbruchzeilen: gebrochen frisst das Menue
     den halben ersten Bildschirm. Gleiche Geste wie die Etappenachse darunter. */
  .wk-nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .wk-nav ul{flex-wrap:nowrap;}
  .wk-nav a{white-space:nowrap;}
  .wk-haupt{padding-block:1.75rem 2.5rem;}
}

/* CTA in der Tabellenzeile — der Grund, warum hier Muster 03 und nie 02 gilt */
.wk-cta-klein{padding:.35rem .8rem;font-size:.8125rem;white-space:nowrap;}
.wk-tab-cta{margin:1rem 0 0;}
.wk-beleg{display:block;margin-top:.35rem;font-size:.8125rem;color:var(--wk-schiefer-60);}
.wk-beleg a{color:inherit;}
@media (max-width:767px){
  /* Auf dem Stapel stehen CTA und Aufklapp-Knopf nebeneinander in einer Zeile. */
  .wk-expander .wk-cta-zelle{display:inline-block;padding-right:.5rem;}
  .wk-expander .wk-mehr-zelle{display:inline-block;}
  /* Anbieter ohne Tracker (wk_ohne_tracker): leere CTA-Zelle nicht als Strich stehen lassen. */
  .wk-expander .wk-cta-zelle:not(:has(a)){display:none;}
}

/* --- Tabellen aus dem Seiteninhalt (ohne Shortcode) ---
   Vergleichstabellen stehen teils direkt im Seiteninhalt, nicht im Shortcode. Dafuer griff
   lange KEINE Regel: die Tabellen standen ohne Rahmen, ohne Abstaende und ohne Mobilverhalten
   auf der Seite, weil alle Tabellenstile an .wk-tab bzw. .wk-stapel haengen.
   Muster 02 (horizontal scrollend) ist hier richtig: eine Vergleichstabelle ueber 15 Zeilen
   verliert beim Stapeln den Vergleich, der ihr Zweck ist. */
.wk-inhalt > table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;
  font-size:.9375rem;margin:1.8rem 0;-webkit-overflow-scrolling:touch;}
.wk-inhalt > table th,.wk-inhalt > table td{padding:.65rem .75rem;text-align:left;
  border-bottom:var(--wk-rand);vertical-align:top;}
.wk-inhalt > table thead th{background:var(--wk-nebel);font-family:var(--wk-sans);
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--wk-schiefer-60);font-weight:600;border-bottom:2px solid var(--wk-nebel-rand);
  white-space:nowrap;}
.wk-inhalt > table tbody tr:hover{background:var(--wk-veilchen-hell);}
.wk-inhalt > table tbody td:first-child{font-weight:600;white-space:nowrap;}

/* --- Anbieter-Logos ---
   Feste Box statt freier Groesse: 15 Marken untereinander brauchen eine gemeinsame
   optische Hoehe, sonst wirkt jede Zeile anders gewichtet. object-fit:contain haelt
   die Proportion, die Box haelt die Zeile ruhig. Drei Anbieter haben (noch) kein Logo;
   fuer die rendert gar kein Bild, kein Platzhalterkasten. */
.wk-marke-zelle{display:flex;align-items:center;gap:.6rem;}
.wk-logo{width:auto;height:1.4rem;max-width:5.5rem;object-fit:contain;object-position:left center;
  flex:0 0 auto;}
.wk-logo-gross{height:2rem;max-width:8rem;margin-inline-end:.5rem;vertical-align:middle;}
@media (max-width:767px){
  /* Im gestapelten Datenblatt steht das Logo ueber der Caption, nicht daneben. */
  .wk-stapel caption .wk-logo-gross{display:block;margin-block-end:.4rem;}
}
@media (max-width:359px){
  /* Unter 360 px zwingt das Logo die Markenspalte auf eine Breite, die die ganze
     Vergleichstabelle ueber den Viewport schiebt (gemessen: +61 px bei 320 px). Der
     Markenname allein traegt die Zeile dort genauso; das Logo ist Zierde, die Tabelle
     ist der Inhalt. */
  .wk-tab .wk-logo{display:none;}
}

/* --- Autorenportraet und Erklaer-Motiv --- */
.wk-portraet{margin:0 0 1rem;}
.wk-portraet img{width:5rem;height:5rem;border-radius:50%;object-fit:cover;
  background:var(--wk-nebel);}
.wk-motiv{margin:0 0 1.8rem;}
/* Keine Flaeche hinter dem Motiv: die Bilder haben selbst einen weissen Grund, jede
   eingefaerbte Buehne zeichnet ihn als Kasten nach. */
/* Hoehe gedeckelt, Proportion erhalten: die Motive kommen in unterschiedlichen
   Seitenverhaeltnissen aus der Generierung (von 1400x242 bis fast quadratisch). Ueber die
   volle Inhaltsbreite gerendert wuerde das hochformatige den halben Erstscreen belegen,
   das breite eine schmale Leiste. object-fit:contain haelt beide in derselben Buehne. */
.wk-motiv img{width:100%;height:auto;max-height:15rem;object-fit:contain;display:block;
  margin-inline:auto;}
@media (max-width:767px){ .wk-motiv img{max-height:10rem;} }

/* ============================================================
   11 · Konto-Finder (Startseite, erster Bildschirm)
   Radio + :checked schaltet die Gruppen, ohne JavaScript.
   ============================================================ */
.wk-finder{background:var(--wk-nebel);border:var(--wk-rand);border-radius:var(--wk-radius);
  padding:1.1rem 1rem 1rem;margin:1.2rem 0 2rem;}
.wk-finder-titel{margin:0 0 .75rem;font-size:clamp(1.2rem,1rem + .9vw,1.55rem);}
.wk-finder-radio{position:absolute;opacity:0;pointer-events:none;}
.wk-finder-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.wk-chip{display:inline-flex;align-items:center;min-height:2.5rem;padding:.4rem .95rem;
  border:1px solid var(--wk-schiefer-30);border-radius:999px;background:var(--wk-weiss);
  color:var(--wk-schiefer);font-size:.9375rem;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s;}
.wk-chip:hover{border-color:var(--wk-veilchen);color:var(--wk-schiefer);}
.wk-chip-kurz{display:none;}
.wk-chip-alle{border-style:dashed;}
#wkf-steuer:checked ~ .wk-finder-chips .wk-chip-steuer,
#wkf-schnell:checked ~ .wk-finder-chips .wk-chip-schnell,
#wkf-paypal:checked ~ .wk-finder-chips .wk-chip-paypal{background:var(--wk-veilchen);
  border-color:var(--wk-veilchen);color:#fff;}
#wkf-steuer:focus-visible ~ .wk-finder-chips .wk-chip-steuer,
#wkf-schnell:focus-visible ~ .wk-finder-chips .wk-chip-schnell,
#wkf-paypal:focus-visible ~ .wk-finder-chips .wk-chip-paypal{outline:3px solid var(--wk-veilchen);outline-offset:2px;}
.wk-finder-gruppe{list-style:none;margin:0;padding:0;display:none;gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));}
#wkf-steuer:checked ~ .wk-finder-steuer,
#wkf-schnell:checked ~ .wk-finder-schnell,
#wkf-paypal:checked ~ .wk-finder-paypal{display:grid;}
.wk-fk{background:var(--wk-weiss);border:var(--wk-rand);border-radius:var(--wk-radius);
  padding:.85rem .9rem;display:flex;flex-direction:column;gap:.45rem;margin:0;}
.wk-fk-kopf{display:flex;align-items:center;gap:.6rem;min-height:2rem;}
.wk-fk-logo{height:1.75rem;max-width:6.5rem;}
.wk-fk-marke{font-weight:600;}
.wk-fk-angabe{margin:0;font-family:var(--wk-mono);font-size:.875rem;line-height:1.45;color:var(--wk-schiefer-90);flex:1;}
.wk-fk-aktion{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.wk-fk-cta{padding:.55rem 1.1rem;font-size:.9375rem;}
.wk-fk-blatt{font-size:.875rem;}
.wk-finder-fuss{margin:.9rem 0 0;font-size:.75rem;line-height:1.5;color:var(--wk-schiefer-60);}
.wk-finder-fuss span{display:inline-block;margin-inline-end:.6rem;}
@media (max-width:640px){
  .wk-finder{padding:.9rem .75rem .8rem;margin-top:.8rem;}
  .wk-finder-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-.75rem;padding-inline:.75rem;}
  .wk-finder-chips::-webkit-scrollbar{display:none;}
  .wk-chip{white-space:nowrap;flex:none;}
  .wk-chip-lang{display:none;}
  .wk-chip-kurz{display:inline;}
  .wk-finder-gruppe{grid-template-columns:1fr;gap:.5rem;}
  .wk-fk{display:grid;grid-template-columns:1fr auto;grid-template-areas:"kopf aktion" "angabe aktion";
    align-items:center;column-gap:.75rem;row-gap:.2rem;padding:.65rem .75rem;}
  .wk-fk-kopf{grid-area:kopf;min-height:0;}
  .wk-fk-logo{height:1.35rem;max-width:5rem;}
  .wk-fk-angabe{grid-area:angabe;font-size:.8125rem;}
  .wk-fk-aktion{grid-area:aktion;flex-direction:column;align-items:stretch;gap:.25rem;text-align:center;}
  .wk-fk-cta{padding:.5rem .8rem;font-size:.875rem;white-space:nowrap;}
  .wk-fk-blatt{font-size:.75rem;}
}
@media (prefers-reduced-motion:reduce){ .wk-chip{transition:none;} }