/* So-wie-du-Check: gekapseltes Stylesheet. Alles hängt an .swdc, alle Klassen beginnen mit sw-. */
/* Farbwelt dunkel (Fundament) als Standard, der abgesetzte Abschnitt jeweils umgekehrt */
.swdc { --bg: #0A2A20; --surface: #0E3A2C; --surface-2: #124635; --ink: #F6F3EC; --ink-2: #CBD5CE; --muted: #93A69B; --line: #1E5040; --line-strong: #2E6752; --accent: #C9A961; --gold: #C9A961; --gold-soft: #EBD9A6; --on-gold: #0A2A20; --bar-track: #184A39; --bar-fill: #9C8757; --z-red: #E46A55; --z-amber: #DDAA3A; --z-green: #5ECB8E; --crit-ink: #EE8B7B; --warn-ink: #E7B95E; --good-ink: #72CC97; --marker: #F6F3EC; --shadow: rgba(0, 0, 0, 0.55); color-scheme: dark; }
.swdc .sw-band { --bg: #F6F3EC; --surface: #FFFDF8; --surface-2: #EFE9DC; --ink: #0A2A20; --ink-2: #33483F; --muted: #66756D; --line: #E1D9C8; --line-strong: #CDBFA2; --accent: #7C6130; --gold: #C9A961; --gold-soft: #EBD9A6; --on-gold: #0A2A20; --bar-track: #E9E2D2; --bar-fill: #D6C08D; --z-red: #9E2F24; --z-amber: #C4841A; --z-green: #3FA36C; --crit-ink: #A63A2C; --warn-ink: #85570E; --good-ink: #2A7650; --marker: #0A2A20; --shadow: rgba(10, 42, 32, 0.28); color-scheme: light; }
.swdc[data-theme="light"] { --bg: #F6F3EC; --surface: #FFFDF8; --surface-2: #EFE9DC; --ink: #0A2A20; --ink-2: #33483F; --muted: #66756D; --line: #E1D9C8; --line-strong: #CDBFA2; --accent: #7C6130; --gold: #C9A961; --gold-soft: #EBD9A6; --on-gold: #0A2A20; --bar-track: #E9E2D2; --bar-fill: #D6C08D; --z-red: #9E2F24; --z-amber: #C4841A; --z-green: #3FA36C; --crit-ink: #A63A2C; --warn-ink: #85570E; --good-ink: #2A7650; --marker: #0A2A20; --shadow: rgba(10, 42, 32, 0.28); color-scheme: light; }
.swdc[data-theme="light"] .sw-band { --bg: #0A2A20; --surface: #0E3A2C; --surface-2: #124635; --ink: #F6F3EC; --ink-2: #CBD5CE; --muted: #93A69B; --line: #1E5040; --line-strong: #2E6752; --accent: #C9A961; --gold: #C9A961; --gold-soft: #EBD9A6; --on-gold: #0A2A20; --bar-track: #184A39; --bar-fill: #9C8757; --z-red: #E46A55; --z-amber: #DDAA3A; --z-green: #5ECB8E; --crit-ink: #EE8B7B; --warn-ink: #E7B95E; --good-ink: #72CC97; --marker: #F6F3EC; --shadow: rgba(0, 0, 0, 0.55); color-scheme: dark; }
@media (prefers-color-scheme: light) {
  .swdc[data-theme="auto"] { --bg: #F6F3EC; --surface: #FFFDF8; --surface-2: #EFE9DC; --ink: #0A2A20; --ink-2: #33483F; --muted: #66756D; --line: #E1D9C8; --line-strong: #CDBFA2; --accent: #7C6130; --gold: #C9A961; --gold-soft: #EBD9A6; --on-gold: #0A2A20; --bar-track: #E9E2D2; --bar-fill: #D6C08D; --z-red: #9E2F24; --z-amber: #C4841A; --z-green: #3FA36C; --crit-ink: #A63A2C; --warn-ink: #85570E; --good-ink: #2A7650; --marker: #0A2A20; --shadow: rgba(10, 42, 32, 0.28); color-scheme: light; }
  .swdc[data-theme="auto"] .sw-band { --bg: #0A2A20; --surface: #0E3A2C; --surface-2: #124635; --ink: #F6F3EC; --ink-2: #CBD5CE; --muted: #93A69B; --line: #1E5040; --line-strong: #2E6752; --accent: #C9A961; --gold: #C9A961; --gold-soft: #EBD9A6; --on-gold: #0A2A20; --bar-track: #184A39; --bar-fill: #9C8757; --z-red: #E46A55; --z-amber: #DDAA3A; --z-green: #5ECB8E; --crit-ink: #EE8B7B; --warn-ink: #E7B95E; --good-ink: #72CC97; --marker: #F6F3EC; --shadow: rgba(0, 0, 0, 0.55); color-scheme: dark; }
}

.swdc {
  --pad-x: clamp(16px, 4vw, 40px);
  --f-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-quote: Newsreader, Georgia, "Times New Roman", serif;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  padding: clamp(28px, 4vw, 52px) var(--pad-x);
  -webkit-font-smoothing: antialiased;
  text-align: left;
  scroll-margin-top: 90px;
  container-type: inline-size;
  container-name: swdc;
}
.swdc *, .swdc *::before, .swdc *::after { box-sizing: border-box; }
.swdc [hidden] { display: none !important; }
.swdc h1, .swdc h2, .swdc h3, .swdc h4, .swdc p, .swdc ul, .swdc ol, .swdc blockquote, .swdc figure, .swdc fieldset, .swdc legend, .swdc hr, .swdc pre {
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: normal; text-transform: none;
}
.swdc ul, .swdc ol { list-style: none; }
.swdc li { margin: 0; padding: 0; }
.swdc li::before, .swdc li::marker { content: none; }
.swdc b, .swdc strong { font-weight: 700; }
.swdc a { color: inherit; }
.swdc button, .swdc input, .swdc textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; margin: 0; }
.swdc button { line-height: 1.25; min-height: 0; width: auto; }
.swdc svg { overflow: visible; }
.swdc :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Typo */
.swdc .sw-display { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 6.2vw, 58px); line-height: 1.03; letter-spacing: -0.025em; text-wrap: balance; }
.swdc .sw-h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 3.6vw, 30px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.swdc .sw-h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.25; }
.swdc .sw-h4 { font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.3; }
.swdc .sw-eyebrow { font-family: var(--f-quote); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--accent); }
.swdc .sw-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.swdc .sw-body { color: var(--ink-2); max-width: 62ch; }
.swdc .sw-lead { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 50ch; text-wrap: pretty; }
.swdc .sw-muted { color: var(--muted); }
.swdc .sw-small { font-size: 14px; }
.swdc .sw-fine { font-size: 13px; color: var(--muted); line-height: 1.55; }
.swdc .sw-fine a { color: var(--accent); }

/* Buttons */
.swdc .sw-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 2px; font-weight: 600; font-size: 16px; line-height: 1.25;
  padding: 13px 22px; cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.swdc .sw-btn-primary { background: var(--gold); color: var(--on-gold); }
.swdc .sw-btn-primary:hover { background: var(--gold-soft); color: var(--on-gold); }
.swdc .sw-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.swdc .sw-btn-ghost:hover { border-color: var(--gold); color: var(--ink); background: transparent; }
.swdc .sw-btn[disabled] { opacity: .6; cursor: default; }
.swdc .sw-link {
  appearance: none; background: none; border: 0; padding: 0; font-size: 15px;
  color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong);
}
.swdc .sw-link:hover { color: var(--ink); text-decoration-color: var(--gold); background: none; }
.swdc .sw-mini { appearance: none; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; padding: 1px 9px; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: 4px; }
.swdc .sw-mini:hover { border-color: var(--gold); }
.swdc .sw-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.swdc .sw-tag { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--gold); color: var(--on-gold); padding: 2px 8px; border-radius: 2px; }

/* Screens */
.swdc .sw-screen { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.swdc .sw-screen-start { max-width: none; gap: 0; }
.swdc .sw-screen-result { max-width: 980px; gap: 44px; align-items: center; }
.swdc .sw-screen-result > * { width: 100%; max-width: 680px; }
.swdc .sw-screen-result > .sw-wide { max-width: 980px; }
.swdc .sw-icon { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* Start: Hero mit Vorschau */
.swdc .sw-hero { max-width: 980px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px 44px; align-items: center; }
.swdc .sw-hero-text { display: flex; flex-direction: column; gap: 16px; }
.swdc .sw-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.swdc .sw-hero-note { font-size: 14px; color: var(--muted); }
.swdc .sw-preview { max-width: 440px; justify-self: end; width: 100%; display: flex; flex-direction: column; }
.swdc .sw-pv-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 2px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.swdc .sw-pv-qcard { width: 84%; }
.swdc .sw-pv-dots { display: flex; gap: 5px; margin-bottom: 2px; }
.swdc .sw-pv-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.swdc .sw-pv-top { display: flex; justify-content: space-between; font-size: 12.5px; }
.swdc .sw-pv-top b { font-family: var(--f-display); }
.swdc .sw-pv-top span { color: var(--muted); }
.swdc .sw-pv-bar { height: 5px; background: var(--bar-track); border-radius: 2px; overflow: hidden; }
.swdc .sw-pv-bar i { display: block; height: 100%; width: 21%; background: var(--gold); }
.swdc .sw-pv-q { font-family: var(--f-quote); font-style: italic; font-size: 20px; line-height: 1.25; margin: 4px 0 2px; }
.swdc .sw-pv-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; }
.swdc .sw-pv-scale span { font-size: 11.5px; text-align: center; padding: 7px 2px; line-height: 1.2; }
.swdc .sw-pv-scale span + span { border-left: 1px solid var(--line-strong); }
.swdc .sw-pv-scale .on { background: var(--gold); color: var(--on-gold); font-weight: 600; }
/* Ergebnis-Karte liegt über der Fragekarte */
.swdc .sw-pv-res { position: relative; z-index: 1; width: 86%; margin: -64px 0 0 auto; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 2px; box-shadow: 0 24px 48px -24px var(--shadow); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.swdc .sw-pv-res-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.swdc .sw-pv-res-top em { font-style: normal; letter-spacing: .08em; border: 1px solid var(--line-strong); padding: 0 6px; border-radius: 2px; }
.swdc .sw-pv-score { display: flex; align-items: center; gap: 14px; }
.swdc .sw-pv-score b { font-family: var(--f-display); font-weight: 800; font-size: 46px; line-height: .9; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.swdc .sw-pv-score b small { font-size: .45em; letter-spacing: 0; margin-left: .04em; }
.swdc .sw-pv-score span { font-family: var(--f-display); font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.swdc .sw-pv-bars { display: grid; gap: 5px; }
.swdc .sw-pv-bars li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 11.5px; line-height: 1.2; color: var(--ink-2); }
.swdc .sw-pv-bars i { display: block; height: 5px; background: var(--bar-track); }
.swdc .sw-pv-bars b { display: block; height: 100%; background: var(--bar-fill); }
.swdc .sw-pv-bars li.sw-lo { color: var(--ink); font-weight: 600; }
.swdc .sw-pv-cmp { display: grid; gap: 8px; border-top: 1px solid var(--line-strong); padding-top: 12px; }
.swdc .sw-pv-cmp-t { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Beschriftete Vergleichsbalken (Vorschau oben und Kachel) */
.swdc .sw-cmp { display: grid; gap: 9px; }
.swdc .sw-cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.swdc .sw-cmp-row span { font-size: 12px; line-height: 1.25; color: var(--ink-2); }
.swdc .sw-cmp-row:not(.sw-n) span { color: var(--ink); font-weight: 600; }
.swdc .sw-cmp-row em { font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swdc .sw-cmp-row i { grid-column: 1 / -1; display: block; height: 6px; background: var(--bar-track); }
.swdc .sw-cmp-row b { display: block; height: 100%; background: var(--muted); }
.swdc .sw-cmp-row.sw-r b { background: var(--z-red); }
.swdc .sw-cmp-row.sw-a b { background: var(--z-amber); }
.swdc .sw-cmp-row.sw-g b { background: var(--z-green); }
.swdc .sw-pv-more { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.swdc .sw-pv-more svg { width: 15px; height: 15px; flex: none; }

/* Start: abgesetzter Abschnitt */
.swdc .sw-band { margin: 44px calc(var(--pad-x) * -1) 0; padding: 44px var(--pad-x) 48px; background: var(--bg); color: var(--ink); }
.swdc .sw-band-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.swdc .sw-parts { display: grid; gap: 12px; counter-reset: none; }
.swdc .sw-parts li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; }
.swdc .sw-part-no { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 3px 8px; border-radius: 2px; white-space: nowrap; margin-top: 2px; }
.swdc .sw-parts b { display: block; font-family: var(--f-display); font-size: 17px; line-height: 1.3; }
.swdc .sw-parts span.sw-part-sub { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 2px; }
.swdc .sw-gets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.swdc .sw-gets li { font-size: 12.5px; line-height: 1.3; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink-2); background: var(--bg); }
.swdc .sw-facts-v { display: grid; gap: 8px; }
.swdc .sw-facts-v li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.swdc .sw-rule { height: 1px; background: var(--line-strong); }
.swdc .sw-soft { font-size: 16px; color: var(--ink-2); }
.swdc .sw-lock { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.swdc .sw-lock svg { flex: none; width: 16px; height: 16px; color: var(--accent); margin-top: 3px; }
/* Start: Das bekommst du am Ende */
.swdc .sw-gallery { max-width: 980px; width: 100%; min-width: 0; margin: 56px auto 0; display: flex; flex-direction: column; gap: 24px; }
.swdc .sw-gal-head { display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.swdc .sw-gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.swdc .sw-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.swdc .sw-tile-part { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.swdc .sw-tile-vis { height: 166px; display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 4px 0 10px; padding: 12px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.swdc .sw-tile-t { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; line-height: 1.25; text-wrap: balance; }
.swdc .sw-tile-c { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.swdc .sw-gal-hint { display: none; font-size: 13px; color: var(--muted); }
.swdc .sw-gal-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; border-top: 1px solid var(--line-strong); padding-top: 22px; }
.swdc .sw-gal-foot p { color: var(--ink-2); max-width: 60ch; flex: 1 1 320px; }

/* Mini-Auswertungen in den Kacheln */
.swdc .sw-m-score b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 48px; line-height: .9; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.swdc .sw-m-score b small { font-size: .45em; letter-spacing: 0; margin-left: .04em; }
.swdc .sw-m-meter { position: relative; display: grid; grid-template-columns: 40fr 30fr 30fr; gap: 2px; height: 7px; margin-top: 16px; }
.swdc .sw-m-meter i:nth-child(1) { background: var(--z-red); }
.swdc .sw-m-meter i:nth-child(2) { background: var(--z-amber); }
.swdc .sw-m-meter i:nth-child(3) { background: var(--z-green); }
.swdc .sw-m-meter em { position: absolute; top: -5px; width: 2px; height: 17px; margin-left: -1px; background: var(--marker); }
.swdc .sw-m-meter-l { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 7px; }
.swdc .sw-m-bars { display: grid; grid-template-columns: max-content minmax(20px, 1fr); gap: 4px 10px; align-items: center; font-size: 10.5px; line-height: 1.12; }
.swdc .sw-m-bars li { display: contents; }
.swdc .sw-m-bars span { white-space: nowrap; color: var(--ink-2); }
.swdc .sw-m-bars li.sw-st span { color: var(--ink); font-weight: 600; }
.swdc .sw-m-bars i { display: block; height: 4px; background: var(--bar-track); }
.swdc .sw-m-bars b { display: block; height: 100%; background: var(--bar-fill); }
.swdc .sw-m-press { display: grid; gap: 8px; }
.swdc .sw-m-press div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; background: var(--surface); border-top: 2px solid var(--accent); padding: 8px 10px; }
.swdc .sw-m-press span { font-family: var(--f-display); font-weight: 700; font-size: 13px; line-height: 1.2; }
.swdc .sw-m-press b { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.swdc .sw-m-press em { grid-column: 1 / -1; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--crit-ink); }
.swdc .sw-m-say { font-family: var(--f-display); font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--ink); }
.swdc .sw-tile-vis .sw-cmp { gap: 6px; }
.swdc .sw-m-say.sw-crit { color: var(--crit-ink); }
.swdc .sw-m-say.sw-warn { color: var(--warn-ink); }
.swdc .sw-m-scale { padding-top: 24px; }
.swdc .sw-m-strip { position: relative; height: 9px; border-radius: 2px; }
.swdc .sw-m-strip i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.swdc .sw-m-strip u { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--accent); }
.swdc .sw-m-strip b { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--marker); box-shadow: 0 0 0 2px var(--bg); }
.swdc .sw-m-strip span { position: absolute; bottom: calc(100% + 7px); transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 700; line-height: 1.3; padding: 1px 6px; background: var(--marker); color: var(--bg); border-radius: 2px; font-variant-numeric: tabular-nums; }
.swdc .sw-m-key { display: grid; gap: 2px; margin-top: 12px; font-size: 10.5px; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.swdc .sw-m-key span::before { content: ""; display: inline-block; width: 0; height: 9px; border-left: 2px solid var(--ink); margin-right: 6px; vertical-align: -1px; }
.swdc .sw-m-key span.sw-w::before { border-left-style: dashed; border-left-color: var(--accent); }
.swdc .sw-m-rows { display: grid; }
.swdc .sw-m-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; line-height: 1.25; padding: 4px 0; border-bottom: 1px solid var(--line); }
.swdc .sw-m-row:last-child { border-bottom: 0; }
.swdc .sw-m-row span { color: var(--ink-2); min-width: 0; }
.swdc .sw-m-row b { font-family: var(--f-display); font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.swdc .sw-m-row.sw-mute b { color: var(--ink-2); font-weight: 500; }
.swdc .sw-m-row.sw-hi { background: var(--surface); margin-inline: -6px; padding-inline: 6px; }
.swdc .sw-m-row.sw-hi span { color: var(--ink); font-weight: 600; }
.swdc .sw-m-row.sw-hi b { color: var(--accent); }
.swdc .sw-m-row.sw-sum { border-top: 2px solid var(--ink); border-bottom: 0; }
.swdc .sw-m-row.sw-sum span, .swdc .sw-m-row.sw-sum b { color: var(--accent); font-weight: 700; }
.swdc .sw-m-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.swdc .sw-m-start div { border-top: 1px solid var(--line-strong); padding-top: 6px; display: flex; flex-direction: column; min-width: 0; }
.swdc .sw-m-start b { font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swdc .sw-m-start span { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.swdc .sw-m-later { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: var(--ink-2); line-height: 1.35; margin-top: 4px; }
.swdc .sw-m-later svg { width: 14px; height: 14px; color: var(--accent); flex: none; margin-top: 1px; }

/* Fragen */
.swdc .sw-qprog { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.swdc .sw-qprog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.swdc .sw-qprog-top b { font-family: var(--f-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.swdc .sw-qprog-top span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.swdc .sw-qbar { height: 8px; background: var(--bar-track); border-radius: 2px; overflow: hidden; }
.swdc .sw-qbar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s ease; }
.swdc .sw-qhead { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.swdc .sw-qsub { font-size: 14px; color: var(--muted); }
.swdc .sw-qprompt { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.swdc .sw-statement { font-family: var(--f-quote); font-style: italic; font-weight: 400; font-size: clamp(26px, 4.6vw, 36px); line-height: 1.22; text-wrap: pretty; min-height: 2.5em; margin-bottom: 6px; }
.swdc .sw-statement::before { content: "„"; color: var(--accent); }
.swdc .sw-statement::after { content: "“"; color: var(--accent); }
.swdc .sw-statement.sw-enter { animation: sw-rise .28s ease both; }
@keyframes sw-rise { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.swdc .sw-scale-ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: -12px; }
.swdc .sw-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; }
.swdc .sw-opt {
  appearance: none; display: flex; align-items: center; justify-content: center; min-height: 54px; text-align: center;
  padding: 10px 6px; background: var(--surface); color: var(--ink); line-height: 1.25;
  border: 0; border-radius: 0; font-size: 16px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.swdc .sw-opt + .sw-opt { border-left: 1px solid var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .swdc .sw-options:not(.sw-fresh) .sw-opt:not([aria-pressed="true"]):hover { background: var(--surface-2); color: var(--ink); }
}
.swdc .sw-opt[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); font-weight: 600; }
.swdc .sw-opt:focus-visible { outline-offset: -3px; }
.swdc .sw-qfoot { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.swdc .sw-hint { font-size: 13px; color: var(--muted); }

/* Überleitung zu Teil 2 */
.swdc .sw-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.swdc .sw-facts li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }

/* Teil 2: Formular */
.swdc .sw-form { display: flex; flex-direction: column; gap: 34px; margin-top: 8px; }
.swdc .sw-part { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.swdc .sw-part-head { display: flex; flex-direction: column; gap: 4px; }
.swdc .sw-part-head p { font-size: 15px; color: var(--ink-2); }
.swdc .sw-legend { font-weight: 600; margin-bottom: 10px; display: block; }
.swdc .sw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.swdc .sw-chip { position: relative; display: inline-block; margin: 0; }
.swdc .sw-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.swdc .sw-chip span { display: inline-block; padding: 8px 13px; font-size: 15px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.swdc .sw-chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.swdc .sw-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.swdc .sw-stage { display: flex; flex-direction: column; gap: 12px; }
.swdc .sw-plan-note { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 1px 7px; border-radius: 2px; }
.swdc .sw-offer-hint { font-size: 14.5px; color: var(--ink-2); background: var(--surface); border-left: 2px solid var(--accent); padding: 10px 14px; }
.swdc .sw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.swdc .sw-field { display: flex; flex-direction: column; gap: 6px; }
.swdc .sw-field.sw-full { grid-column: 1 / -1; }
.swdc .sw-field label { font-weight: 600; font-size: 15px; line-height: 1.35; margin: 0; display: block; color: var(--ink); }
.swdc .sw-need { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 0 5px; border-radius: 2px; vertical-align: 2px; }
.swdc .sw-help { font-size: 13px; color: var(--muted); line-height: 1.4; }
.swdc .sw-inputwrap { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 2px; }
.swdc .sw-inputwrap:focus-within { border-color: var(--gold); }
.swdc .sw-inputwrap.sw-invalid { border-color: var(--z-red); }
.swdc .sw-inputwrap input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; border-radius: 0; color: var(--ink); font-size: 17px; padding: 11px 12px; height: auto; font-variant-numeric: tabular-nums; outline: none; }
.swdc .sw-unit { padding-inline: 12px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.swdc .sw-err { font-size: 14px; color: var(--crit-ink); }
.swdc .sw-kv { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); background: var(--surface); padding: 10px 12px; }
.swdc .sw-kv b { font-variant-numeric: tabular-nums; color: var(--ink); }
.swdc .sw-kv .sw-more { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.swdc .sw-privacy { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--surface-2); border: 1px solid var(--accent); padding: 18px 20px; }
.swdc .sw-privacy svg { width: 30px; height: 30px; color: var(--accent); margin-top: 2px; }
.swdc .sw-privacy b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.swdc .sw-privacy p { color: var(--ink-2); font-size: 15.5px; }

/* Ergebnis: Teil 1 */
.swdc .sw-res-top { display: flex; flex-direction: column; gap: 14px; }
.swdc .sw-res-eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.swdc .sw-score-row { display: flex; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.swdc .sw-score-num { font-family: var(--f-display); font-weight: 800; font-size: clamp(76px, 15vw, 116px); line-height: .88; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.swdc .sw-score-num small { font-size: .42em; letter-spacing: 0; margin-left: .06em; }
.swdc .sw-score-say { font-family: var(--f-display); font-size: clamp(20px, 3vw, 24px); font-weight: 700; line-height: 1.2; }
.swdc .sw-meter { flex: 1; min-width: 220px; padding-bottom: 6px; }
.swdc .sw-meter-track { position: relative; display: grid; grid-template-columns: 40fr 30fr 30fr; gap: 3px; height: 10px; }
.swdc .sw-meter-track span:nth-child(1) { background: var(--z-red); }
.swdc .sw-meter-track span:nth-child(2) { background: var(--z-amber); }
.swdc .sw-meter-track span:nth-child(3) { background: var(--z-green); }
.swdc .sw-meter-marker { position: absolute; top: -7px; width: 3px; height: 24px; margin-left: -1.5px; background: var(--marker); }
.swdc .sw-meter-labels { display: grid; grid-template-columns: 40fr 30fr 30fr; gap: 3px; margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.swdc .sw-sec { display: flex; flex-direction: column; gap: 16px; }
.swdc .sw-bars { display: grid; gap: 12px; }
.swdc .sw-bars li { display: grid; grid-template-columns: 200px 1fr 56px; grid-template-areas: "name bar val"; align-items: center; gap: 14px; }
.swdc .sw-b-name { grid-area: name; font-size: 15px; }
.swdc .sw-bar { grid-area: bar; height: 8px; background: var(--bar-track); }
.swdc .sw-bar i { display: block; height: 100%; background: var(--bar-fill); }
.swdc .sw-b-val { grid-area: val; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink-2); }
.swdc .sw-bars li.sw-low .sw-b-name { font-weight: 600; color: var(--ink); }
.swdc .sw-bars li.sw-low .sw-b-val { color: var(--ink); font-weight: 600; }
.swdc .sw-bars li.sw-strong .sw-b-name { font-weight: 600; color: var(--ink); }
.swdc .sw-bars li.sw-strong .sw-b-val { color: var(--ink); font-weight: 700; }
/* Balken nach Wert: rot, orange, grün */
.swdc .sw-bars li.sw-r .sw-bar i, .swdc .sw-pv-bars li.sw-r b, .swdc .sw-m-bars li.sw-r b { background: var(--z-red); }
.swdc .sw-bars li.sw-a .sw-bar i, .swdc .sw-pv-bars li.sw-a b, .swdc .sw-m-bars li.sw-a b { background: var(--z-amber); }
.swdc .sw-bars li.sw-g .sw-bar i, .swdc .sw-pv-bars li.sw-g b, .swdc .sw-m-bars li.sw-g b { background: var(--z-green); }
.swdc .sw-press article.sw-r, .swdc .sw-m-press div.sw-r { border-top-color: var(--z-red); }
.swdc .sw-press article.sw-a, .swdc .sw-m-press div.sw-a { border-top-color: var(--z-amber); }
.swdc .sw-press article.sw-g, .swdc .sw-m-press div.sw-g { border-top-color: var(--z-green); }
.swdc .sw-b-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--crit-ink); border: 1px solid var(--z-red); padding: 0 6px; border-radius: 2px; vertical-align: 1px; white-space: nowrap; }
.swdc .sw-press { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.swdc .sw-press article { background: var(--surface); border-top: 2px solid var(--accent); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.swdc .sw-p-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.swdc .sw-p-val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; white-space: nowrap; }
.swdc .sw-press p { color: var(--ink-2); font-size: 15px; }
.swdc .sw-p-with { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; font-size: 14.5px; }
.swdc .sw-p-with b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 600; margin-bottom: 2px; }

/* Ergebnis: Teil 2 */
.swdc .sw-wage { background: var(--surface-2); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.swdc .sw-wage-lab { font-size: 15px; font-weight: 600; }
.swdc .sw-wage-num { font-family: var(--f-display); font-weight: 800; font-size: clamp(58px, 12vw, 86px); line-height: .92; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.swdc .sw-wage-num small { font-size: .38em; font-weight: 700; letter-spacing: 0; margin-left: .1em; }
.swdc .sw-wage-sub { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.swdc .sw-wage-text { color: var(--ink-2); font-size: 15.5px; max-width: 58ch; margin-top: 6px; }
.swdc .sw-contrast { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.swdc .sw-contrast div { display: flex; flex-direction: column; gap: 2px; }
.swdc .sw-contrast span { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
.swdc .sw-contrast b { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 7vw, 54px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.swdc .sw-contrast .sw-from b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--line-strong); }
.swdc .sw-contrast .sw-to b { color: var(--ink); }
.swdc .sw-contrast small { font-size: 12.5px; color: var(--muted); }
.swdc .sw-contrast svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 10px; }
.swdc .sw-contrast-say { font-family: var(--f-display); font-weight: 800; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; letter-spacing: -0.015em; margin-top: 8px; }
.swdc .sw-contrast-say.sw-crit { color: var(--crit-ink); }
.swdc .sw-contrast-say.sw-warn { color: var(--warn-ink); }
.swdc .sw-vs { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-top: 1px solid var(--line-strong); padding-top: 12px; margin-top: 10px; }
.swdc .sw-vs + .sw-vs { margin-top: 0; border-top-color: var(--line); padding-top: 10px; }
.swdc .sw-vs > span:first-child { font-size: 15px; color: var(--ink-2); }
.swdc .sw-vs small { display: block; font-size: 13px; color: var(--muted); }
.swdc .sw-vs-num { font-family: var(--f-display); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swdc .sw-duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px 36px; align-items: start; }
.swdc .sw-duo > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Strahl */
.swdc .sw-scale-wrap { position: relative; padding-top: 118px; margin-top: 4px; }
.swdc .sw-nband { position: relative; height: 14px; border-radius: 2px; }
.swdc .sw-thr { position: absolute; top: -7px; bottom: -7px; width: 2px; margin-left: -1px; background: var(--ink); }
.swdc .sw-thr.sw-min { background: var(--ink-2); }
.swdc .sw-thr.sw-wish { background: none; width: 0; border-left: 2px dashed var(--accent); margin-left: 0; }
.swdc .sw-ext { position: absolute; top: calc(100% + 7px); width: 2px; margin-left: -1px; background: var(--line-strong); }
.swdc .sw-thr.sw-wish + .sw-ext { width: 0; background: none; border-left: 2px dashed var(--accent); margin-left: 0; }
.swdc .sw-move { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ink); }
.swdc .sw-move::after { content: ""; position: absolute; right: -2px; top: 50%; margin-top: -6px; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.swdc .sw-pt { position: absolute; bottom: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.swdc .sw-pt i { display: block; width: 2px; height: 10px; background: var(--ink); }
.swdc .sw-pt span { display: flex; flex-direction: column; align-items: center; padding: 3px 9px; border-radius: 2px; font-variant-numeric: tabular-nums; line-height: 1.2; background: var(--marker); color: var(--bg); }
.swdc .sw-pt span small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: normal; max-width: 120px; text-align: center; line-height: 1.25; }
.swdc .sw-pt span b { font-size: 15px; font-weight: 700; }
.swdc .sw-pt.sw-t1 { z-index: 2; }
.swdc .sw-pt.sw-t2 { z-index: 1; }
.swdc .sw-pt.sw-t2 i { width: 0; height: 60px; background: none; border-left: 2px dashed var(--ink); }
.swdc .sw-pt.sw-t2 span { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.swdc .sw-ref { position: absolute; top: 100%; margin-top: 12px; transform: translateX(-50%); width: 108px; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.swdc .sw-ref b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.swdc .sw-ref small { display: block; font-size: 11px; }
.swdc .sw-ref.sw-wish b { color: var(--accent); }
.swdc .sw-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.swdc .sw-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; }
.swdc .sw-key .sw-k-r::before { background: var(--z-red); }
.swdc .sw-key .sw-k-a::before { background: var(--z-amber); }
.swdc .sw-key .sw-k-g::before { background: var(--z-green); }
.swdc .sw-key .sw-k-w::before { background: none; width: 0; border-left: 2px dashed var(--accent); border-radius: 0; }
.swdc .sw-ein { border-left: 3px solid var(--accent); padding-left: 14px; display: flex; flex-direction: column; gap: 4px; }
.swdc .sw-ein.sw-crit { border-left-color: var(--z-red); }
.swdc .sw-ein.sw-warn { border-left-color: var(--z-amber); }
.swdc .sw-ein.sw-good { border-left-color: var(--z-green); }
.swdc .sw-ein b { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.swdc .sw-ein.sw-crit b { color: var(--crit-ink); }
.swdc .sw-ein.sw-warn b { color: var(--warn-ink); }
.swdc .sw-ein.sw-good b { color: var(--good-ink); }
.swdc .sw-ein span { color: var(--ink-2); font-size: 15px; }

/* Stellschrauben */
.swdc .sw-screws { width: 100%; max-width: 360px; height: auto; display: block; }
.swdc .sw-screws .sw-sc { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.swdc .sw-screws .sw-scf { fill: var(--surface); stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.swdc .sw-screws .sw-ar { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.swdc .sw-screws .sw-ln { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.swdc .sw-screws .sw-box { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.5; }
.swdc .sw-screws .sw-ah { fill: var(--line-strong); }
.swdc .sw-screws text { fill: var(--ink); font-family: var(--f-display); font-size: 15px; font-weight: 700; }
.swdc .sw-screws text.sw-s { fill: var(--muted); font-family: var(--f-text); font-size: 12.5px; font-weight: 500; }
.swdc .sw-levers { display: grid; }
.swdc .sw-lever { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.swdc .sw-lever:last-child { border-bottom: 1px solid var(--line); }
.swdc .sw-l-t { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.swdc .sw-l-t b { display: block; color: var(--ink); font-weight: 600; }
.swdc .sw-l-v { text-align: right; font-family: var(--f-display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.swdc .sw-l-v small { display: block; font-family: var(--f-text); font-size: 13px; font-weight: 600; color: var(--accent); }
.swdc .sw-l-v em { display: block; font-family: var(--f-text); font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.swdc .sw-lever.sw-today .sw-l-v { color: var(--ink-2); }
.swdc .sw-lever.sw-both { background: var(--surface); padding-inline: 14px; }
.swdc .sw-caption { font-size: 13px; color: var(--muted); }
.swdc .sw-bridge { background: var(--surface-2); padding: 14px 16px; color: var(--ink-2); font-size: 15.5px; }
.swdc .sw-bridge b { color: var(--ink); }
.swdc .sw-others { background: var(--surface); border-left: 3px solid var(--accent); padding: 14px 16px; color: var(--ink-2); font-size: 15px; max-width: 76ch; }
.swdc .sw-others b { color: var(--ink); }

/* Wohin das Geld geht */
.swdc .sw-breakdown { display: grid; border-top: 1px solid var(--line-strong); }
.swdc .sw-bd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.swdc .sw-bd-l { display: flex; flex-direction: column; }
.swdc .sw-bd-l b { font-weight: 600; }
.swdc .sw-bd-l span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.swdc .sw-bd-v { font-family: var(--f-display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swdc .sw-bd-row.sw-minus .sw-bd-v { color: var(--ink-2); font-weight: 500; }
.swdc .sw-bd-row.sw-total { border-bottom: 0; border-top: 2px solid var(--ink); }
.swdc .sw-bd-row.sw-total b, .swdc .sw-bd-row.sw-total .sw-bd-v { color: var(--accent); }

/* Signal */
.swdc .sw-alarm { background: var(--surface-2); border-left: 4px solid var(--z-red); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.swdc .sw-alarm b { font-family: var(--f-display); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.swdc .sw-alarm p { color: var(--ink-2); font-size: 16px; max-width: 60ch; }

/* Startpunkt */
.swdc .sw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.swdc .sw-stat { border-top: 1px solid var(--line-strong); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.swdc .sw-stat-num { font-family: var(--f-display); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.swdc .sw-stat-lab { font-size: 13px; color: var(--muted); line-height: 1.35; }
.swdc .sw-keep { display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); border: 2px solid var(--accent); padding: 22px 22px 20px; }
.swdc .sw-keep-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.swdc .sw-keep-head svg { width: 34px; height: 34px; color: var(--accent); }
.swdc .sw-keep-title { display: block; font-family: var(--f-display); font-size: clamp(20px, 3vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.swdc .sw-keep-head p { margin-top: 6px; color: var(--ink-2); font-size: 16px; }
.swdc .sw-keep-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.swdc .sw-keep-actions .sw-btn { flex: 1 1 200px; }
.swdc .sw-keep textarea { width: 100%; min-height: 110px; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; padding: 10px; font-size: 14px; }
.swdc .sw-status { font-size: 14px; color: var(--good-ink); }
.swdc .sw-status.sw-bad { color: var(--crit-ink); }
.swdc .sw-mail-form { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
.swdc .sw-mail-form label { font-weight: 600; font-size: 15px; margin: 0; display: block; }
.swdc .sw-mail-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swdc .sw-mail-row input { flex: 1 1 220px; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; padding: 11px 12px; font-size: 16px; height: auto; }
.swdc .sw-mail-row input:focus { outline: none; border-color: var(--gold); }
.swdc .sw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.swdc .sw-mail-done { display: flex; flex-direction: column; gap: 10px; width: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
.swdc .sw-mail-preview, .swdc .sw-share-preview { background: var(--bg); border: 1px solid var(--line-strong); padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--f-text); }

/* Call to Action */
.swdc .sw-cta { background: var(--surface-2); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.swdc .sw-cta-title { font-family: var(--f-quote); font-style: italic; font-size: 25px; line-height: 1.3; color: var(--ink); }
.swdc .sw-cta p { color: var(--ink-2); max-width: 58ch; }
.swdc .sw-cta p b { color: var(--ink); }
.swdc .sw-exits { display: grid; gap: 6px; }
.swdc .sw-exits li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.swdc .sw-exits svg { width: 16px; height: 16px; color: var(--good-ink); margin-top: 4px; flex: none; }

/* Pop-up */
.swdc .sw-dialog { width: calc(100% - 32px); max-width: 560px; max-height: 88vh; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; padding: 26px 24px 22px; margin: auto; }
.swdc .sw-dialog::backdrop { background: rgba(4, 16, 12, 0.62); }
.swdc .sw-dialog[open] { display: flex; flex-direction: column; gap: 14px; }
.swdc .sw-dialog p { color: var(--ink-2); font-size: 15.5px; }
.swdc .sw-dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.swdc .sw-dlg-x { appearance: none; background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px; }
.swdc .sw-dlg-x:hover { color: var(--ink); background: none; }
.swdc .sw-dialog .sw-actions .sw-btn { flex: 1 1 200px; }

@container swdc (max-width: 860px) {
  .swdc .sw-duo { grid-template-columns: minmax(0, 1fr); }
  .swdc .sw-hero { grid-template-columns: minmax(0, 1fr); }
  .swdc .sw-preview { justify-self: start; }
  .swdc .sw-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container swdc (max-width: 560px) {
  .swdc .sw-fields, .swdc .sw-press { grid-template-columns: 1fr; }
  /* Auf dem Handy: Kacheln zum Wischen, damit die Startseite nicht endlos lang wird */
  .swdc .sw-gal-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--pad-x) * -1); padding: 2px var(--pad-x) 10px; scroll-padding-inline: var(--pad-x); scrollbar-width: thin; }
  .swdc .sw-tile { scroll-snap-align: start; }
  .swdc .sw-gal-hint { display: block; margin-top: -12px; }
  .swdc .sw-gal-foot .sw-btn { width: 100%; }
  .swdc .sw-opt { font-size: 14px; min-height: 58px; padding: 8px 4px; }
  .swdc .sw-bars li { grid-template-columns: 1fr 56px; grid-template-areas: "name val" "bar bar"; gap: 6px 12px; }
  .swdc .sw-cta { padding: 24px 20px; }
  .swdc .sw-wage { padding: 20px 18px 18px; }
  .swdc .sw-privacy, .swdc .sw-keep-head { grid-template-columns: 1fr; gap: 8px; }
  .swdc .sw-privacy { padding: 16px; }
  .swdc .sw-pv-qcard { width: 90%; }
  .swdc .sw-pv-res { width: 92%; margin-top: -56px; }
  .swdc .sw-contrast { grid-template-columns: minmax(0, 1fr); }
  .swdc .sw-contrast svg { transform: rotate(90deg); margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .swdc *, .swdc *::before, .swdc *::after { animation: none !important; transition: none !important; }
}