/* Werkzeug „Meine Gehaltszahl“ – alles unter .wz-sp- bzw. #wz-spanne */
#wz-spanne .wz-sp { font-family: Satoshi, "Helvetica Neue", Arial, sans-serif; color: var(--n-tinte); }
.wz-sp-kopf { max-width: 720px; margin-bottom: 40px; }
.wz-sp-modul { font-size: 12px; font-weight: 700; color: var(--n-leise-d); margin-bottom: 14px; }
#wz-spanne .wz-sp-titel { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.04; letter-spacing: -.035em; }
.wz-sp-intro { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--n-leise-d); }

.wz-sp-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; border-top: 2px solid var(--n-tinte); }
.wz-sp-form { padding: 30px 40px 36px 0; border-right: 1px solid #0000001f; }
.wz-sp-ergebnis { padding: 30px 0 36px 40px; min-width: 0; }

/* Eingaben */
.wz-sp-einheit { border: 0; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.wz-sp-einheit legend { font-size: 13px; font-weight: 700; color: var(--n-leise-d); margin-bottom: 10px; padding: 0; }
.wz-sp-einheit label { position: relative; flex: 1 1 140px; }
.wz-sp-einheit input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wz-sp-einheit label { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; border: 1px solid var(--n-tinte); font-size: 14px; font-weight: 700; cursor: pointer; background: #fff; }
.wz-sp-einheit label + label { border-left: 0; }
.wz-sp-einheit label:has(input:checked) { background: var(--n-tinte); color: #fff; }
.wz-sp-einheit label:has(input:focus-visible) { outline: 2px solid var(--n-orange); outline-offset: 2px; z-index: 1; }
.wz-sp-einheit .wz-sp-hilfe { flex-basis: 100%; margin-top: 10px; }

.wz-sp-schritt { padding: 22px 0; border-top: 1px solid #0000001f; }
.wz-sp-nr { font-size: 12px; font-weight: 900; color: var(--n-leise-d); margin-bottom: 8px; }
.wz-sp-label { display: block; font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.wz-sp-klein { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.wz-sp-hilfe { font-size: 14px; line-height: 1.55; color: var(--n-leise-d); margin: 6px 0 12px; }
.wz-sp-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-sp-feld { position: relative; }
.wz-sp-feld input { width: 100%; min-height: 52px; padding: 0 40px 0 14px; border: 1px solid #00000040; border-radius: 0; background: #fff; color: var(--n-tinte); font: 700 18px/1 Satoshi, sans-serif; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; }
.wz-sp-feld input::placeholder { color: #8a897f; font-weight: 500; }
.wz-sp-feld input:hover { border-color: var(--n-tinte); }
.wz-sp-feld input:focus-visible { outline: 2px solid var(--n-orange); outline-offset: 0; border-color: var(--n-tinte); }
.wz-sp-feld input[aria-invalid=true] { border-color: #b3261e; border-width: 2px; }
.wz-sp-euro { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--n-leise-d); pointer-events: none; }
.wz-sp-fehler { font-size: 13px; font-weight: 700; color: #b3261e; line-height: 1.4; margin-top: 6px; }
.wz-sp-fehler:empty { display: none; }

.wz-sp-check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 6px 0 22px; font-size: 15px; font-weight: 700; cursor: pointer; }
.wz-sp-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--n-tinte); cursor: pointer; flex: none; }
.wz-sp-check input:focus-visible { outline: 2px solid var(--n-orange); outline-offset: 2px; }
#wz-spanne .wz-sp-los { width: 100%; }
#wz-spanne .wz-sp-los:focus-visible, #wz-spanne .wz-sp-weiter .n-knopf:focus-visible, #wz-spanne .n-link:focus-visible { outline: 2px solid var(--n-orange); outline-offset: 3px; }
.wz-sp-lokal { font-size: 13px; color: var(--n-leise-d); margin-top: 12px; }

/* Ergebnis */
.wz-sp-leer { border: 1px dashed #00000040; padding: 30px; }
.wz-sp-leer-titel { font-size: 22px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 10px; }
.wz-sp-leer p:not(.wz-sp-leer-titel) { font-size: 15px; line-height: 1.6; color: var(--n-leise-d); }
.wz-sp-zwischen { font-size: 13px; font-weight: 900; margin-bottom: 14px; }
.wz-sp-notiz { font-size: 14px; line-height: 1.6; color: var(--n-leise-d); margin-top: 14px; }

.wz-sp-skala { position: relative; height: 18px; margin: 46px 0 46px; background: #00000012; }
.wz-sp-markt { position: absolute; top: 0; bottom: 0; background: #b9b8ad; }
.wz-sp-deine { position: absolute; top: 5px; height: 8px; background: var(--n-tinte); }
.wz-sp-marke { position: absolute; top: 0; height: 18px; width: 0; }
.wz-sp-marke::before { content: ""; position: absolute; left: -1px; width: 2px; background: var(--n-tinte); }
.wz-sp-marke span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wz-sp-marke-unten::before, .wz-sp-marke-oben::before { top: -8px; height: 26px; }
.wz-sp-marke-unten span, .wz-sp-marke-oben span { bottom: 26px; }
.wz-sp-marke-oben.wz-sp-hoch::before { top: -26px; height: 44px; }
.wz-sp-marke-oben.wz-sp-hoch span { bottom: 44px; }
.wz-sp-marke-ziel::before { top: 0; height: 30px; width: 4px; left: -2px; background: var(--n-orange); }
.wz-sp-marke-ziel span { top: 34px; background: var(--n-tinte); color: var(--n-orange); padding: 3px 7px; }
.wz-sp-marke.wz-sp-links span { transform: none; left: -1px; }
.wz-sp-marke.wz-sp-rechts span { transform: translateX(-100%); left: 1px; }
.wz-sp-skala-box .wz-sp-skala { margin-top: 64px; margin-bottom: 58px; }

.wz-sp-legende { display: grid; gap: 0; border-top: 1px solid #0000001f; }
.wz-sp-legende > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #0000001f; font-size: 14px; }
.wz-sp-legende dt { display: flex; align-items: center; gap: 10px; color: var(--n-leise-d); }
.wz-sp-legende dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.wz-sp-legende i { width: 16px; height: 8px; flex: none; }
.wz-sp-l-deine { background: var(--n-tinte); }
.wz-sp-l-markt { background: #b9b8ad; }

.wz-sp-warnungen { margin-top: 24px; display: grid; gap: 10px; }
.wz-sp-warnungen[hidden] { display: none; }
.wz-sp-warnung { padding: 14px 16px; border-left: 3px solid var(--n-tinte); background: #fff; font-size: 14px; line-height: 1.55; }
.wz-sp-warnung.wz-sp-ernst { border-left-color: #b3261e; font-weight: 700; }

.wz-sp-ziel { margin-top: 28px; padding: 26px 28px 28px; background: var(--n-tinte); color: #f4f4ee; }
.wz-sp-ziel-label { font-size: 13px; font-weight: 700; color: #c9c8bd; }
.wz-sp-ziel-zahl { margin-top: 6px; font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--n-orange); font-variant-numeric: tabular-nums; }
.wz-sp-ziel-text { margin-top: 14px; font-size: 14px; line-height: 1.6; color: #d6d5cb; max-width: 520px; }

.wz-sp-satz { margin-top: 30px; }
.wz-sp-zitat { margin: 0; padding: 22px 24px; background: #fff; border-left: 3px solid var(--n-tinte); font-size: 18px; line-height: 1.55; font-weight: 500; }
.wz-sp-zitat mark { background: none; color: inherit; font-weight: 700; border-bottom: 2px dashed var(--n-leise-d); }
#wz-spanne .wz-sp-kopieren { margin-top: 10px; }
.wz-sp-kopiert { font-size: 13px; color: var(--n-leise-d); min-height: 1em; margin-top: 4px; }

.wz-sp-blatt { margin-top: 30px; }
.wz-sp-blatt dl { border-top: 2px solid var(--n-tinte); }
.wz-sp-blatt dl > div { display: grid; grid-template-columns: 170px minmax(0, 150px) minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid #0000001f; align-items: baseline; }
.wz-sp-blatt dt { font-weight: 900; font-size: 16px; }
.wz-sp-blatt dt span { font-size: 12px; color: var(--n-leise-d); margin-right: 10px; font-variant-numeric: tabular-nums; }
.wz-sp-blatt dd { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wz-sp-blatt .wz-sp-blatt-info { font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--n-leise-d); white-space: normal; }
.wz-sp-blatt [data-wz-sp="einstieg-text"] { padding: 14px 16px; background: #fff; border-left: 3px solid var(--n-tinte); color: var(--n-tinte); }
.wz-sp-blatt [hidden] { display: none; }

/* Weiter zu Modul 09 */
.wz-sp-weiter { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 40px; padding-top: 28px; border-top: 2px solid var(--n-tinte); }
.wz-sp-weiter p { max-width: 560px; font-size: 17px; line-height: 1.55; font-weight: 700; }
.wz-sp-weiter-knoepfe { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; flex: none; }

@media (max-width: 900px) {
  .wz-sp-raster { grid-template-columns: minmax(0, 1fr); }
  .wz-sp-form { padding: 26px 0 30px; border-right: 0; }
  .wz-sp-ergebnis { padding: 30px 0 10px; border-top: 1px solid #0000001f; }
  .wz-sp-weiter { flex-direction: column; align-items: flex-start; }
  .wz-sp-blatt dl > div { grid-template-columns: minmax(0, 1fr) auto; }
  .wz-sp-blatt .wz-sp-blatt-info { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .wz-sp-paar { gap: 10px; }
  .wz-sp-feld input { font-size: 17px; padding-right: 30px; padding-left: 12px; }
  .wz-sp-euro { right: 10px; }
  .wz-sp-ziel { padding: 22px 20px; }
  .wz-sp-zitat { font-size: 16px; padding: 18px; }
  .wz-sp-marke span { font-size: 12px; }
  .wz-sp-weiter-knoepfe { width: 100%; }
  .wz-sp-weiter-knoepfe .n-knopf { width: 100%; }
}

/* Verhandlungsblatt drucken */
.wz-sp-drucken { margin-top: 18px; background: none; border: 0; padding: 0; cursor: pointer; }
.wz-sp-nurdruck { display: none; }
#wz-sp-druck { display: none; }
@media print {
  body.druck-blatt > *:not(#wz-sp-druck) { display: none !important; }
  body.druck-blatt { background: #fff !important; }
  body.druck-blatt #wz-sp-druck { display: block; padding: 12mm; color: #000; font-family: Satoshi, sans-serif; }
  #wz-sp-druck .wz-sp-drucken { display: none; }
  #wz-sp-druck .wz-sp-nurdruck { display: block; margin-top: 10mm; }
  .wz-sp-nurdruck p { font: 700 11pt Satoshi, sans-serif; margin-top: 6mm; }
  .wz-sp-nurdruck i { display: block; height: 9mm; border-bottom: 1px solid #000; }
  .wz-sp-nurdruck .wz-sp-druckfuss { font-weight: 500; font-size: 8pt; margin-top: 12mm; color: #444; }
}