/* Werkzeug-Unterseiten Runde 5 (P31–P36): alle Funktionen, Umschlag-Anatomie, Fachabschnitte, Vergleichstabelle, Video.
 * Nur auf site/tool.html geladen. Farben nur aus tokens.css, Hover nur Farbe und Schatten. */

/* ---------- Alle Funktionen ---------- */
.wz-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.wz-feat { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.wz-feats-img { margin-bottom: 20px; }
.wz-feats-img.n-1 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.wz-feats-img.n-2, .wz-feats-img.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-feats-img .wz-feat-img img { height: 240px; }
.wz-feats-text .wz-feat { grid-template-rows: auto; }
.wz-feats-text.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wz-feats-text.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-feats-text.n-1 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.wz-feat-img { display: grid; place-items: center; margin: 0; padding: 18px; background: linear-gradient(160deg, var(--v-100), var(--v-50)); border-bottom: 1px solid var(--line); }
.wz-feat-img img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: center; border-radius: 6px; box-shadow: 0 12px 24px -14px rgba(14, 11, 31, .5); }
.wz-feat-img.contain img { object-fit: contain; box-shadow: none; filter: drop-shadow(0 10px 16px rgba(14, 11, 31, .22)); }
.wz-feat-body { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 22px 24px 24px; }
.wz-feat-body h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -.006em; }
.wz-feat-ic { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--paper-2); color: var(--accent-ink); }
.wz-feat-ic svg { width: 22px; height: 22px; }
.wz-feat-body p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-text); color: var(--ink-2); }

/* ---------- Umschlag-Anatomie ---------- */
.wz-anat { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.wz-anat-fig { margin: 0; min-width: 0; }
.wz-anat-img { position: relative; border-radius: 6px; box-shadow: 0 24px 48px -24px rgba(14, 11, 31, .55); }
.wz-anat-img img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* Beschnitt: gestrichelte Schnittlinie 3 mm innen (bei 6-Zoll-Breite x2 + Rücken ≈ 1 % der Breite) */
.wz-anat-bleed { position: absolute; inset: 1.36% 1.03%; border: 1.5px dashed rgba(255, 255, 255, .92); border-radius: 2px; box-shadow: 0 0 0 1px rgba(14, 11, 31, .25); pointer-events: none; }
.wz-anat-spine { position: absolute; top: 0; bottom: 0; border-inline: 1.5px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); pointer-events: none; }
.wz-pin { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 2px solid #fff; box-shadow: 0 6px 14px -4px rgba(14, 11, 31, .55); font-family: var(--font-display); font-size: .875rem; font-weight: 720; }
.wz-pin.static { position: static; flex: none; margin: 0; }
.wz-anat-fig figcaption { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.wz-anat-legend { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.wz-anat-legend li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.wz-anat-legend b { display: block; font-size: 1.0625rem; font-weight: 700; }
.wz-anat-legend p { margin: 2px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }

/* ---------- Fachabschnitte ---------- */
.wz-deep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.wz-deep-head { display: grid; gap: 14px; min-width: 0; }
.wz-deep-head h2, .wz-deep-head .lead { margin: 0; }
.wz-deep-head .lead { color: var(--ink-2); }
.wz-deep-body { display: grid; gap: 22px; min-width: 0; }
.wz-prose { max-width: none; font-size: 1.0625rem; color: var(--ink-2); }
.wz-prose h3 { margin-top: 1.4em; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.wz-prose ul, .wz-prose ol { padding-left: 1.2em; }
.wz-prose li + li { margin-top: .4em; }
.wz-prose a { color: var(--v-600); text-decoration: underline; text-underline-offset: .18em; overflow-wrap: anywhere; }
.wz-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.wz-cards > li { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.wz-cards h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.wz-cards p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.wz-cards p + p { margin-top: 6px; }
.wz-groups { display: grid; gap: 22px; }
.wz-group h3 { margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; }
.wz-group .shop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Vergleichstabelle ---------- */
.wz-cmp-task { display: flex; align-items: flex-start; gap: 10px; max-width: 820px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--paper-2); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.wz-cmp-task svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--accent-ink); }
.wz-cmp { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sheet); box-shadow: var(--shadow-1); overflow: hidden; }
.wz-cmp table.tbl { font-size: .9375rem; }
.wz-cmp .tbl th, .wz-cmp .tbl td { padding: 14px 18px; line-height: 1.45; }
.wz-cmp thead th { white-space: normal; font-size: .8125rem; vertical-align: bottom; background: var(--paper-2); }
.wz-cmp tbody th[scope="row"] { width: 18%; background: transparent; font-size: var(--fs-sm); font-weight: 650; color: var(--ink); white-space: normal; }
/* Unsere Spalte (V2): Logo im Kopf, Akzentrahmen über die ganze Spalte, Haken je Zelle, kräftige Schrift */
.wz-cmp .wz-us { position: relative; background: var(--v-50); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.wz-cmp thead .wz-us { width: 41%; padding-top: 18px; padding-bottom: 14px; background: var(--v-100); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 5px 0 var(--accent); }
.wz-cmp tbody tr:last-child .wz-us { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent); }
.wz-logo { display: block; width: auto; height: 34px; }
.wz-cmp td.wz-us { font-weight: 650; color: var(--ink); }
/* N6: der Haken hängt in einer eigenen Spalte links neben dem Text (absolut), der Text beginnt überall an derselben
   Kante: Tabelle = Kopf-Logo und Zellentext, Karten = wie der Text der Konkurrenz darunter. */
.wz-us-txt { position: relative; display: block; }
.wz-us-txt > svg { position: absolute; left: -28px; top: 1px; width: 20px; height: 20px; color: var(--accent); stroke-width: 2.4; }
@media (min-width: 641px) {
  .wz-cmp .tbl td.wz-us, .wz-cmp .tbl thead th.wz-us { padding-left: 46px; }
}
.wz-us-mark { display: none; }
/* Die anderen: neutral, leiser */
.wz-cmp thead .wz-them { font-weight: 600; color: var(--ink-3); }
.wz-cmp td.wz-them { color: var(--ink-3); font-weight: 450; }
.wz-cmp sup { margin-left: 2px; font-size: .6875rem; line-height: 0; }
.wz-cmp sup a { color: var(--ink-3); text-decoration: none; }
.wz-cmp sup a:hover { color: var(--v-600); text-decoration: underline; }
.wz-cmp-foot { display: grid; gap: 8px; margin-top: 14px; }
.wz-stand { margin: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.wz-notes { display: grid; gap: 4px; margin: 0; padding-left: 1.6em; font-size: var(--fs-src); line-height: 1.5; color: var(--ink-3); }
.wz-notes li { scroll-margin-top: 96px; overflow-wrap: anywhere; }
.wz-notes li:target { color: var(--ink); }
.wz-notes a { color: var(--ink-3); text-decoration-color: var(--rule-strong); }
.wz-marks { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); }

/* ---------- Video ---------- */
.wz-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wz-videos.n-2 { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); align-items: start; }
.wz-video { margin: 0; min-width: 0; }
.wz-video-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--nacht); aspect-ratio: 16 / 9; }
.wz-video.is-short .wz-video-frame { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
.wz-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wz-video-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.wz-video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wz-video-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-weight: 680; box-shadow: var(--shadow-2); transition: box-shadow 180ms ease, background-color 180ms ease; }
.wz-video-btn svg { width: 22px; height: 22px; }
.wz-video-play:hover .wz-video-btn { background: var(--accent-hover, var(--accent)); box-shadow: 0 16px 32px -12px rgba(14, 11, 31, .6); }
.wz-video-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.wz-video figcaption { display: grid; gap: 4px; margin-top: 10px; }
.wz-video figcaption small { font-size: var(--fs-xs); color: var(--ink-3); }

@media (max-width: 1079px) {
  .wz-feats-img.n-1, .wz-feats-text.n-1 { max-width: none; }
  .wz-feats, .wz-feats-text.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-anat, .wz-deep { grid-template-columns: minmax(0, 1fr); }
  .wz-group .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .wz-videos.n-2 { grid-template-columns: minmax(0, 1fr); }
  .wz-cards { grid-template-columns: minmax(0, 1fr); }
}
/* ab 640 px macht site.css (.tbl-cards) aus jeder Zeile eine Karte, Spaltenkopf je Zelle als data-label */
@media (max-width: 640px) {
  .wz-cmp { border: 0; background: none; box-shadow: none; overflow: visible; }
  .wz-cmp tr { border-radius: var(--radius-lg); background: var(--sheet); box-shadow: var(--shadow-1); }
  .wz-cmp tbody th[scope="row"] { width: auto; font-size: 1.0625rem; }
  .wz-cmp .tbl td, .wz-cmp .tbl th { padding: 12px 14px; }
  .wz-cmp .wz-us, .wz-cmp tbody tr:last-child .wz-us { box-shadow: inset 4px 0 0 var(--accent); background: var(--v-50); }
  .tbl-wrap.tbl-cards.wz-cmp tbody td.wz-us::before { display: none; }
  .wz-us-mark { display: block; }
  .wz-us-txt > svg { left: -26px; }
  .wz-logo-sm { display: block; width: auto; height: 22px; margin-top: 1px; }
  .wz-cmp td.wz-them { font-size: var(--fs-sm); }
  .tbl-wrap.tbl-cards.wz-cmp tbody td { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .wz-feats, .wz-feats-text.n-4, .wz-feats-text.n-2, .wz-feats-img.n-2, .wz-feats-img.n-4 { grid-template-columns: minmax(0, 1fr); }
  .wz-feat-img img, .wz-feats-img .wz-feat-img img { height: 190px; }
  .wz-group .shop-list { grid-template-columns: minmax(0, 1fr); }
  .wz-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: .75rem; }
  .wz-pin.static { width: 28px; height: 28px; }
}