/* S9-05: Marketing › Kunden › Segmente (kunden_segmente.js). Tokens aus styles.css */
.ks { display: grid; gap: 18px; }
.ks-karte { display: grid; gap: 12px; padding: 22px 24px; }
.ks-karte p { margin: 0; }
.ks-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.ks-kopf .h2, .ks-karte > .h2 { margin: 0; }
.ks-kacheln { margin-bottom: 0; }
.ks-pre { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ks-pre li { display: flex; gap: 10px; }
.ks-pre li.ok > span:first-child { color: var(--ok); font-weight: 600; }
.ks-pre li.offen > span:first-child { color: var(--crit); font-weight: 600; }
.ks .tabelle { width: 100%; }
@media (max-width: 600px) { .ks-karte { padding: 18px 16px; } .ks .tabelle { font-size: 14px; } }
/* N-07b: Abo & Wiederkauf (kunden_abo.js) */
.ka-gruende { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.ka-gruende li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.kb-raster td.kb-s1 { background: color-mix(in srgb, var(--ok) 6%, transparent); }
.kb-raster td.kb-s2 { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.kb-raster td.kb-s3 { background: color-mix(in srgb, var(--ok) 26%, transparent); }
.kb-raster td.kb-s4 { background: color-mix(in srgb, var(--ok) 40%, transparent); }
/* E-119: Lernen › Gegenprüfung (gegenpruefung.js) */
.gp { display: grid; gap: 14px; }
.gp-kopf { display: grid; gap: 10px; }
.gp-kopf p { margin: 0; }
.gp-karte { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 16px; align-items: start; }
.gp-karte p { margin: 4px 0 0; line-height: 1.45; }
.gp-alt { opacity: .65; }
.gp-entscheid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.gp-entscheid input { flex: 1 1 220px; }
.gp-regeln { display: grid; gap: 4px; }
.gp-regeln > p { margin: 0 0 6px; }
.gp-regel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.gp-regel p { margin: 4px 0; line-height: 1.45; }
.gp-regel .gp-entscheid { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 760px) { .gp-karte, .gp-regel { grid-template-columns: 1fr; } }
/* L-01: Lernen › Zahlen je Anzeige (was_wirkt.js) */
.ww { display: grid; gap: 14px; }
.ww-wahl { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ww-balken { position: relative; height: 10px; border-radius: 5px; background: var(--neutral-bg); min-width: 140px; margin-bottom: 4px; }
.ww-fuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.ww-fuell.ww-gruen { background: var(--ok); } .ww-fuell.ww-gelb { background: var(--warn); } .ww-fuell.ww-rot { background: var(--crit); }
.ww-fuell.ww-wenig { background: var(--line-strong); }
.ww-ziel { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
tr.ww-wenig td { color: var(--muted); }
.ww-form-inhalt { display: grid; gap: 8px; padding: 6px 0; }
.ww-form-inhalt label { display: grid; gap: 4px; }
.ww-wahl .seg { flex-wrap: wrap; max-width: 100%; }
.ww { min-width: 0; }
/* Z-01: alle Zielgruppen je Plattform */
.ks .ks-alt td { color: var(--muted); }
.ks .ks-rot td:first-child { color: var(--crit); font-weight: 600; }
.ks-nutzung summary { cursor: pointer; }
.ks-nutzung ul { margin: 6px 0 0; padding-left: 18px; }
.ks-alte > summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.ks-alte[open] > summary { margin-bottom: 8px; }
.ks-her { display: none; color: var(--muted); font-size: 12px; }
@media (max-width: 600px) {
  .ks .ks-her { display: block; }
  .ks .ks-zg thead, .ks .ks-zg .ks-her-spalte { display: none; }
  .ks .ks-zg tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 10px 12px; }
  .ks .ks-zg tr + tr { border-top: 1px solid var(--line); }
  .ks .ks-zg td { padding: 0; border: 0; text-align: left; }
  .ks .ks-zg td:first-child, .ks .ks-zg td:last-child { grid-column: 1 / -1; }
  .ks .ks-zg td[data-l]::before { content: attr(data-l) " "; color: var(--muted); font-size: 12px; }
  .ks .ks-zg td:first-child, .ks-nutzung li { overflow-wrap: anywhere; }
  .ks-nutzung ul { padding-left: 14px; }
}