/* ============================================================
   „Wie wir helfen" / „How We Help" – Auswahl der eigenen Ausgangslage.

   Drei Schaltflächen, darunter ein Detailfeld für die jeweils gewählte Lage,
   plus Vergleichstabelle und Glossar. Ausschließlich bestehende Design-Tokens
   (Farben, Schriftgrößen, Abstände, Radien) – kein eigenes Farbschema.
   Ohne JavaScript bleiben alle drei Detailfelder sichtbar; das Skript blendet
   erst beim Laden die nicht gewählten aus (Progressive Enhancement).
   ============================================================ */

/* ---------- Auswahlreihe ---------- */
.wwh__picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:var(--space-6);}
@media (max-width:820px){ .wwh__picker{grid-template-columns:1fr;} }

.wwh__opt{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;text-align:left;cursor:pointer;
  background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-5);font-family:var(--font-body);transition:border-color .15s,box-shadow .15s,transform .15s;}
.wwh__opt:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.wwh__opt:focus-visible{outline:2px solid var(--brass-500);outline-offset:3px;}

/* Gewählte Lage: Messingkante links + kräftigerer Rahmen – derselbe Akzent wie sonst auf der Website. */
.wwh__opt[aria-pressed="true"]{border-color:var(--brass-500);box-shadow:var(--shadow-md);
  background:var(--surface-tint);}
.wwh__opt[aria-pressed="true"] .wwh__optt{color:var(--brass-700);}

.wwh__optt{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-lg);
  line-height:var(--lh-snug);color:var(--text-strong);}
.wwh__opts{font-size:var(--text-sm);line-height:1.5;color:var(--text-muted);font-style:italic;}

/* ---------- Detailfeld ---------- */
.wwh__panel{background:var(--surface-card);border:1px solid var(--border);border-left:4px solid var(--brass-500);
  border-radius:var(--radius-lg);padding:clamp(1.2rem,3vw,var(--space-7));}
.wwh__panel + .wwh__panel{margin-top:var(--space-4);}   /* nur ohne JavaScript sichtbar */
.wwh__ptag{display:inline-block;font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent);margin-bottom:.5rem;}
.wwh__ph{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);
  line-height:var(--lh-snug);color:var(--text-strong);margin:0 0 var(--space-3);}
.wwh__panel p{font-size:var(--text-base);line-height:var(--lh-relaxed);color:var(--text-body);margin:0 0 var(--space-3);}

.wwh__dl{display:grid;gap:.7rem;margin:var(--space-4) 0 0;}
@media (min-width:700px){ .wwh__dl{grid-template-columns:auto 1fr;column-gap:1.3rem;align-items:baseline;} }
.wwh__dt{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;}
.wwh__dd{font-size:var(--text-base);line-height:1.55;color:var(--text-body);margin:0;}

/* Honorarblock – abgesetzt, weil es die meistgesuchte Angabe auf dieser Seite ist. */
.wwh__fee{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--navy-050);
  border-radius:var(--radius-md);}
.wwh__feev{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-medium);color:var(--text-strong);}
.wwh__feen{display:block;margin-top:.3rem;font-size:var(--text-sm);line-height:1.5;color:var(--text-muted);}
.wwh__cta{margin-top:var(--space-5);}

/* ---------- Vergleichstabelle ---------- */
.wwh-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.wwh-tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:38rem;}
.wwh-tbl th,.wwh-tbl td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--border);vertical-align:top;
  line-height:1.5;}
.wwh-tbl thead th{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);border-bottom-width:2px;}
.wwh-tbl tbody th{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-base);
  color:var(--text-strong);white-space:nowrap;}
.wwh-tbl td{color:var(--text-body);}
.wwh-tbl tbody tr:last-child th,.wwh-tbl tbody tr:last-child td{border-bottom:0;}

/* ---------- Glossar ---------- */
.wwh-gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-4);}
.wwh-gloss__t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-base);
  color:var(--text-strong);margin:0 0 .4rem;}
.wwh-gloss p{font-size:var(--text-sm);line-height:1.55;color:var(--text-body);margin:0;}