/* werkzeuge.css — Oberfläche der kollaborativen Werkzeuge (Hub + einzelne Tools).
   Baut auf core/base.css, themes/tokens.js und live/live.css auf. */

/* ---- Hub / Intro ---- */
.wz-hero{ text-align:center; padding:1rem 0 .4rem; }
.wz-hero h1{ margin:.2rem 0; color:var(--navy); font-size:clamp(1.6rem,5vw,2.4rem); }
.wz-hero p{ color:var(--muted); max-width:720px; margin:.2rem auto; }

/* Kachelgitter nutzt .tool-grid/.tool-card aus live.css; hier nur Ergänzungen. */
.wz-card{ position:relative; }
.wz-card__row{ display:flex; align-items:center; gap:.6rem; }
.wz-card .tool-card__icon{ line-height:1; }
.wz-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }

/* ---- Bereichs-Kopf eines Werkzeugs ---- */
.wz-tophead{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
.wz-tophead .spacer{ flex:1; }
.wz-tophead strong{ color:var(--navy); }

/* ---- Modus-Wahl (Host / lokal) ---- */
.wz-modes{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:720px; margin:1.2rem auto; }
@media (max-width:560px){ .wz-modes{ grid-template-columns:1fr; } }

/* ---- Karten / Eingabezeilen ---- */
.wz-row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.6rem 0; }
.wz-row > input, .wz-row > textarea, .wz-row > select{ flex:1 1 14rem; min-width:0; }
.wz-grow{ flex:1 1 auto; }
.wz-muted{ color:var(--muted); font-size:.9rem; }
.wz-err{ color:var(--bad); font-weight:700; min-height:1.2em; }
.wz-empty{ color:var(--muted); text-align:center; padding:1.4rem; }

/* ================================================================
   PINNWAND (Padlet/TaskCards-artig)
   ================================================================ */

/* Farbpalette der Karten (gemeinsam für Karte + Farbwähler) */
.pin-card.c-yellow,.pin-color.c-yellow{ --cc:#fff7c7; }
.pin-card.c-pink,.pin-color.c-pink{ --cc:#ffd7e6; }
.pin-card.c-blue,.pin-color.c-blue{ --cc:#d4e7ff; }
.pin-card.c-green,.pin-color.c-green{ --cc:#d6f3df; }
.pin-card.c-orange,.pin-color.c-orange{ --cc:#ffe1c2; }
.pin-card.c-violet,.pin-color.c-violet{ --cc:#e7d9ff; }
.pin-card.c-red,.pin-color.c-red{ --cc:#ffd5d0; }
.pin-card.c-white,.pin-color.c-white{ --cc:#ffffff; }

/* Untertitel + Suchleiste */
.pin-sub{ color:var(--muted); margin:.1rem 0 .6rem; }
.pin-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.pin-toolbar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.2rem 0 .9rem; }
.pin-toolbar .spacer{ flex:1 1 auto; }
.pin-add{ font-weight:800; }
.pin-search{ flex:1 1 12rem; min-width:0; max-width:22rem; }
.pin-sort{ flex:0 0 auto; }

/* Segment-Umschalter (Spalten/Raster usw.) */
.pin-seg{ display:inline-flex; border:1.5px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; background:var(--soft); }
.pin-seg__btn{ font:inherit; font-weight:700; background:transparent; border:0; border-left:1px solid var(--line);
  padding:.45rem .8rem; min-height:var(--tap); cursor:pointer; color:var(--muted); }
.pin-seg__btn:first-child{ border-left:0; }
.pin-seg__btn[aria-pressed=true]{ background:var(--accent); color:var(--accent-ink); }

/* ---- Spalten (Shelf) ---- */
.pin-cols{ display:flex; gap:1rem; align-items:flex-start; overflow-x:auto; padding-bottom:.6rem; margin:.4rem 0 1rem; }
.pin-col{ flex:0 0 19rem; max-width:88vw; display:flex; flex-direction:column;
  background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-card); padding:.6rem; }
.pin-col__head{ display:flex; align-items:center; gap:.4rem; margin:.1rem .1rem .5rem; }
.pin-col__title{ font-weight:800; color:var(--navy); flex:1 1 auto; min-width:0; word-break:break-word; }
.pin-col__count{ font-weight:800; color:var(--muted); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:.05rem .5rem; font-size:.8rem; }
.pin-col__tools{ display:flex; gap:.2rem; flex:0 0 auto; }
.pin-col__tools .wz-mini{ min-width:34px; padding:.2rem .4rem; }
.pin-col__rename{ flex:1 1 auto; min-width:0; font-weight:800; }
.pin-col__cards{ display:flex; flex-direction:column; gap:.7rem; max-height:min(66vh,640px); overflow-y:auto; padding:.1rem; }
.pin-col__add{ margin-top:.5rem; background:transparent; border:1.5px dashed var(--line); color:var(--muted);
  border-radius:var(--radius-btn); font-weight:700; padding:.5rem; cursor:pointer; }
.pin-col__add:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:640px){
  .pin-cols{ flex-direction:column; overflow-x:visible; align-items:stretch; }
  .pin-col{ flex:1 1 auto; max-width:100%; }
  .pin-col__cards{ max-height:none; }
  .pin-search{ max-width:none; }
}

/* ---- Raster (freie Wand, Masonry) ---- */
.pin-board{ columns:16rem; column-gap:1rem; margin:.4rem 0 1rem; }
.pin-board .pin-card{ break-inside:avoid; margin:0 0 1rem; }

/* ---- Karte ---- */
.pin-card{ position:relative; background:var(--cc,#fff7c7); border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-card); box-shadow:var(--shadow); padding:.55rem .7rem .5rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pin-card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(29,53,87,.18); }
.pin-card__grip{ position:absolute; top:.25rem; right:.3rem; background:rgba(0,0,0,.06); border:0;
  border-radius:var(--radius-sm); color:#3a3f50; cursor:grab; line-height:1; padding:.1rem .35rem; font-size:1rem; min-height:auto; touch-action:none; }
.pin-card__grip:hover{ background:rgba(0,0,0,.14); }
.pin-card__grip:active{ cursor:grabbing; }
.pin-card__open{ display:block; width:100%; text-align:left; background:transparent; border:0; padding:0; cursor:pointer; }
.pin-card__media{ display:block; margin:-.55rem -.7rem .5rem; }
.pin-card__media img{ display:block; width:100%; max-height:220px; object-fit:cover;
  border-radius:var(--radius-card) var(--radius-card) 0 0; background:rgba(0,0,0,.05); }
.pin-card__title{ margin:.1rem 0 .2rem; color:#1f2433; font-size:1.02rem; line-height:1.25; word-break:break-word; }
.pin-card__text{ color:#272c3a; white-space:pre-wrap; word-break:break-word; margin:.1rem 0; }
.pin-muted{ color:#6b7184; font-style:italic; }
.pin-card__link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.4rem; max-width:100%;
  background:rgba(0,0,0,.06); border-radius:var(--radius-pill); padding:.2rem .6rem; font-size:.82rem; font-weight:700; color:#1f2433; }
.pin-card__link-tx{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pin-card__foot{ display:flex; align-items:center; gap:.35rem; margin-top:.5rem; }
.pin-card__author{ font-weight:700; font-size:.8rem; color:#3a3f50; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pin-react{ display:inline-flex; align-items:center; gap:.25rem; background:rgba(0,0,0,.06); border:0;
  border-radius:var(--radius-pill); padding:.2rem .55rem; min-height:34px; font-weight:800; color:#1f2433; cursor:pointer; }
.pin-react:hover{ background:rgba(0,0,0,.12); }
.pin-react.liked{ background:color-mix(in srgb,var(--bad) 22%,transparent); color:var(--bad); }
.pin-react__n{ font-size:.82rem; }

/* Drag-Visuals */
.pin-card--ghost{ position:fixed; z-index:9999; margin:0; pointer-events:none; opacity:.92;
  box-shadow:0 18px 40px rgba(0,0,0,.3); }
.pin-card--placeholder{ border:2px dashed var(--accent); border-radius:var(--radius-card);
  background:color-mix(in srgb,var(--accent) 10%,transparent); margin:0 0 .7rem; }
.pin-board .pin-card--placeholder{ break-inside:avoid; }

/* ---- Farbwähler (im Editor) ---- */
.pin-colors{ display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.pin-color{ width:34px; height:34px; min-height:34px; border-radius:50%; border:2px solid rgba(0,0,0,.18);
  padding:0; cursor:pointer; background:var(--cc,#fff); }
.pin-color[aria-pressed=true]{ outline:3px solid var(--accent); outline-offset:2px; }

/* ---- Leerzustand ---- */
.pin-empty{ text-align:center; color:var(--muted); padding:2rem 1rem; }
.pin-empty__em{ font-size:2.6rem; }
.pin-empty p{ margin:.4rem 0 .8rem; }

/* ---- Modal ---- */
body.pin-modal-open{ overflow:hidden; }
.pin-modal{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  background:rgba(16,24,40,.55); padding:16px; }
.pin-modal__card{ background:var(--paper); color:var(--ink); width:100%; max-width:560px; border-radius:var(--radius-card);
  box-shadow:var(--shadow); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
.pin-modal__head{ display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem .4rem; }
.pin-modal__head h2{ margin:0; color:var(--head); flex:1 1 auto; font-size:1.2rem; }
.pin-modal__close{ flex:0 0 auto; background:var(--soft); border:0; border-radius:50%; width:38px; height:38px;
  min-height:38px; font-size:1.1rem; cursor:pointer; color:var(--ink); }
.pin-modal__body{ padding:.4rem 1.1rem; overflow:auto; }
.pin-modal__body label{ display:block; font-weight:700; color:var(--navy); margin:.55rem 0 .2rem; }
.pin-modal__body input, .pin-modal__body textarea, .pin-modal__body select{ width:100%; }
.pin-modal__foot{ display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; padding:.7rem 1.1rem 1.1rem; }
.pin-more{ margin-top:.7rem; border:1px solid var(--line); border-radius:var(--radius-btn); padding:.3rem .6rem; }
.pin-more summary{ cursor:pointer; font-weight:700; color:var(--accent); padding:.3rem 0; }
.pin-beamer-card{ max-width:480px; }

/* ---- Karten-Detail ---- */
.pin-detail__media{ margin:0 -1.1rem .6rem; }
.pin-detail__media img{ display:block; width:100%; max-height:46vh; object-fit:contain; background:#0b0e16; }
.pin-detail__title{ margin:.2rem 0 .4rem; color:var(--head); }
.pin-detail__text{ white-space:pre-wrap; word-break:break-word; color:var(--ink); }
.pin-detail__link{ display:inline-block; margin:.5rem 0; font-weight:700; word-break:break-all; }
.pin-detail__meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.7rem 0; padding:.5rem 0; border-top:1px solid var(--line); }
.pin-detail__meta .pin-card__author{ flex:1 1 auto; font-size:.92rem; }
.pin-detail__ch{ margin:.6rem 0 .3rem; color:var(--navy); font-size:1rem; }
.pin-cmts{ display:flex; flex-direction:column; gap:.4rem; margin:.3rem 0; }
.pin-cmt{ display:flex; align-items:baseline; gap:.45rem; background:var(--soft); border-radius:var(--radius-btn); padding:.4rem .6rem; }
.pin-cmt__who{ font-weight:800; color:var(--navy); flex:0 0 auto; font-size:.85rem; }
.pin-cmt__tx{ flex:1 1 auto; word-break:break-word; }
.pin-cmt__del{ flex:0 0 auto; background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; padding:0 .2rem; }
.pin-cmt__del:hover{ color:var(--bad); }
.pin-cmt-form{ display:flex; gap:.5rem; margin-top:.6rem; }
.pin-cmt-form input{ flex:1 1 auto; min-width:0; }
.pin-confirm{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; width:100%; margin-top:.5rem; color:var(--bad); font-weight:700; }

@media (prefers-reduced-motion: reduce){
  .pin-card{ transition:none; }
  .pin-card:hover{ transform:none; }
}

.wz-mini{ background:rgba(0,0,0,.06); border:0; border-radius:var(--radius-pill); min-height:36px; padding:.2rem .55rem;
  font-weight:700; color:#1f2433; cursor:pointer; }

/* ---- Dokument-Blöcke ---- */
.wz-doc{ display:flex; flex-direction:column; gap:.8rem; margin:1rem 0; max-width:820px; }
.wz-block{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:.8rem 1rem; }
.wz-block__text{ white-space:pre-wrap; word-break:break-word; }
.wz-block__foot{ display:flex; align-items:center; gap:.5rem; margin-top:.5rem; font-size:.82rem; color:var(--muted); }
.wz-block__author{ flex:1; font-weight:700; }

/* ---- Gruppenwahl ---- */
.wz-groups{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin:1rem 0; align-items:start; }
.wz-group{ background:var(--panel); border:1.5px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:.9rem; }
.wz-group.full{ opacity:.7; }
.wz-group.mine{ outline:3px solid var(--accent); }
.wz-group__name{ font-weight:800; color:var(--navy); font-size:1.1rem; }
.wz-group__cap{ font-weight:800; color:var(--accent); margin:.3rem 0; }
.wz-group__cap .of{ color:var(--muted); font-weight:700; }
.wz-group__members{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0; }
.wz-member{ background:var(--soft); border-radius:var(--radius-pill); padding:.15rem .55rem; font-size:.8rem; font-weight:700; }
.wz-group__bar{ height:8px; background:var(--soft); border-radius:var(--radius-pill); overflow:hidden; border:1px solid var(--line); margin:.4rem 0; }
.wz-group__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.wz-tag-full{ display:inline-block; font-size:.72rem; font-weight:800; color:var(--bad); }

/* ---- Wortwolke ---- */
.wz-cloud{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:baseline; justify-content:center; margin:1rem 0; }
.wz-cloud .w{ font-weight:800; color:var(--navy); line-height:1.1; }

/* ---- Picker (Zufallsrad) ---- */
.wz-wheel-wrap{ display:flex; flex-direction:column; align-items:center; gap:.8rem; margin:1rem 0; }
.wz-wheel{ position:relative; width:min(360px,80vw); height:min(360px,80vw); }
.wz-wheel svg{ width:100%; height:100%; display:block; transition:transform 4s cubic-bezier(.16,.84,.3,1); }
.wz-wheel__pin{ position:absolute; top:-6px; left:50%; transform:translateX(-50%); font-size:1.8rem; z-index:2; }
.wz-pick-result{ font-size:clamp(1.4rem,5vw,2.4rem); font-weight:900; color:var(--accent); text-align:center; min-height:1.4em; }
.wz-drawn{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0; }
.wz-drawn .d{ background:var(--soft); border-radius:var(--radius-pill); padding:.2rem .6rem; font-weight:700; font-size:.85rem; color:var(--muted); text-decoration:line-through; }

/* ---- Timer ---- */
.wz-clock{ text-align:center; margin:1rem 0; }
.wz-clock__time{ font-family:var(--font-mono); font-weight:900; letter-spacing:.02em; line-height:1;
  font-size:clamp(3.5rem,22vw,12rem); color:var(--navy); font-variant-numeric:tabular-nums; }
.wz-clock__time.warn{ color:var(--warn); }
.wz-clock__time.done{ color:var(--bad); animation:wzpulse 1s var(--ease) infinite; }
@keyframes wzpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.wz-clock__progress{ height:14px; background:var(--soft); border-radius:var(--radius-pill); overflow:hidden; border:1px solid var(--line);
  max-width:680px; margin:1rem auto; }
.wz-clock__progress i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .9s linear; }
.wz-preset{ background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.4rem .9rem; }
.wz-preset.is-on{ background:var(--accent); color:#fff; border-color:transparent; }

/* ---- Exit-Ticket ---- */
.wz-ticket{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow);
  padding:1rem; max-width:640px; margin:1rem auto; }
.wz-ticket label{ display:block; font-weight:700; color:var(--navy); margin:.8rem 0 .2rem; }
.wz-ticket .hint{ color:var(--muted); font-weight:400; font-size:.86rem; }
.wz-wall{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin:1rem 0; align-items:start; }
.wz-wall__card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:.8rem; }
.wz-wall__card h4{ margin:.1rem 0 .4rem; color:var(--navy); font-size:.95rem; }
.wz-wall__card ul{ margin:.2rem 0; padding-left:1.1rem; }
.wz-wall__name{ font-weight:800; color:var(--accent); margin-bottom:.3rem; }

/* ---- Gemeinsames ---- */
.wz-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:1rem; margin:.8rem 0; }
.wz-count-line{ font-weight:800; color:var(--accent); }
.wz-toggle{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; }

/* ================================================================
   DENKWERKZEUGE (lokal, ganzjaehrig) — gemeinsame Bausteine
   ================================================================ */
/* Ergebnis-/Verdikt-Box (Argument + Fehlschluss) */
.ar-verdict{ margin-top:.8rem; padding:.7rem .9rem; border-radius:var(--radius-card); border:1.5px solid var(--line); background:var(--soft); }
.ar-verdict p{ margin:0; font-weight:600; }
.ar-verdict.good{ border-color:color-mix(in srgb,var(--good,#26890c) 55%,transparent); background:color-mix(in srgb,var(--good,#26890c) 12%,transparent); }
.ar-verdict.warn{ border-color:color-mix(in srgb,var(--warn,#9a6a00) 55%,transparent); background:color-mix(in srgb,var(--warn,#9a6a00) 12%,transparent); }
.ar-verdict.bad{ border-color:color-mix(in srgb,var(--bad,#e21b3c) 55%,transparent); background:color-mix(in srgb,var(--bad,#e21b3c) 10%,transparent); }

/* ---- Argument rekonstruieren ---- */
.ar-list{ display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0; }
.ar-row{ display:flex; align-items:flex-start; gap:.5rem; }
.ar-row > textarea{ flex:1 1 auto; min-width:0; resize:vertical; }
.ar-tag{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:2.1rem; height:2.1rem;
  background:var(--accent); color:var(--accent-ink,#fff); border-radius:var(--radius-pill); font-weight:800; font-size:.85rem; padding:0 .5rem; }
.ar-tag.k{ background:var(--navy); }
.ar-rowtools{ display:flex; gap:.2rem; flex:0 0 auto; }
.ar-concl{ border-left:4px solid var(--navy); }
.ar-concl textarea{ resize:vertical; }
.ar-preview .ar-standard{ list-style:none; margin:.4rem 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ar-preview .ar-standard li{ display:flex; align-items:flex-start; gap:.5rem; line-height:1.4; }
.ar-concline{ display:flex; align-items:flex-start; gap:.5rem; margin-top:.6rem; padding-top:.6rem; border-top:1.5px dashed var(--line); font-weight:700; color:var(--navy); line-height:1.4; }
.ar-check{ padding:.6rem 0; border-top:1px solid var(--line); }
.ar-check:first-of-type{ border-top:0; }
.ar-check__q{ margin:.1rem 0 .4rem; font-weight:600; }
.ar-check__opts{ display:flex; gap:.4rem; flex-wrap:wrap; }
.ar-opt{ background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.35rem .8rem;
  font-weight:700; font-size:.9rem; cursor:pointer; min-height:var(--tap); }
.ar-opt.is-on.ar-opt--ja{ background:color-mix(in srgb,var(--good,#26890c) 85%,#000 0%); color:#fff; border-color:transparent; }
.ar-opt.is-on.ar-opt--nein{ background:var(--bad,#e21b3c); color:#fff; border-color:transparent; }
.ar-opt.is-on.ar-opt--unsicher{ background:var(--warn,#9a6a00); color:#fff; border-color:transparent; }

/* ---- Zwei-Achsen-Werkzeug ---- */
.za-axinputs{ display:flex; flex-direction:column; gap:.2rem; margin-top:.4rem; }
.za-axlabel{ font-weight:800; color:var(--navy); flex:0 0 auto; min-width:6.5rem; }
.za-svg{ display:block; width:min(520px,92vw); height:auto; margin:.4rem auto; touch-action:none; }
.za-svg .za-dot{ cursor:grab; }
.za-svg .za-dot:active{ cursor:grabbing; }
.za-svg .za-dot:focus{ outline:none; }
.za-svg .za-dot:focus circle{ stroke:var(--accent); stroke-width:4; }
.za-prow{ display:flex; align-items:center; gap:.5rem; margin:.4rem 0; }
.za-prow > input{ flex:1 1 auto; min-width:0; }
.za-swatch{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); }

/* ---- Fehlschluss-Check ---- */
.fs-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.fs-tab{ background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.45rem 1rem;
  font-weight:700; cursor:pointer; min-height:var(--tap); }
.fs-tab.is-on{ background:var(--accent); color:var(--accent-ink,#fff); border-color:transparent; }
.fs-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin:1rem 0; align-items:start; }
.fs-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); padding:.9rem; }
.fs-card__head{ display:flex; align-items:center; gap:.5rem; }
.fs-card__icon{ font-size:1.5rem; line-height:1; }
.fs-card__name{ margin:0; color:var(--navy); font-size:1.02rem; }
.fs-card__what{ margin:.5rem 0; color:var(--ink); }
.fs-card__ex{ margin:.4rem 0; color:var(--muted); font-style:italic; }
.fs-card__test summary{ cursor:pointer; font-weight:700; color:var(--accent); }
.fs-card__test p{ margin:.4rem 0 0; }
.fs-checkrow{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-start; justify-content:space-between;
  padding:.7rem 0; border-top:1px solid var(--line); }
.fs-checkrow:first-of-type{ border-top:0; }
.fs-checkrow.hit{ background:color-mix(in srgb,var(--bad,#e21b3c) 8%,transparent); border-radius:var(--radius-btn); padding:.7rem .6rem; }
.fs-checkrow.ok{ background:color-mix(in srgb,var(--good,#26890c) 8%,transparent); border-radius:var(--radius-btn); padding:.7rem .6rem; }
.fs-checkrow__main{ flex:1 1 16rem; min-width:0; }
.fs-checkrow__q{ font-size:1rem; }
.fs-checkrow__test{ margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }
.fs-checkrow__opts{ display:flex; gap:.4rem; flex-wrap:wrap; flex:0 0 auto; }
.fs-opt{ background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.35rem .7rem;
  font-weight:700; font-size:.88rem; cursor:pointer; min-height:var(--tap); }
.fs-opt.is-on.fs-opt--frei{ background:var(--good,#26890c); color:#fff; border-color:transparent; }
.fs-opt.is-on.fs-opt--drin{ background:var(--bad,#e21b3c); color:#fff; border-color:transparent; }
.fs-opt.is-on.fs-opt--unsicher{ background:var(--warn,#9a6a00); color:#fff; border-color:transparent; }