/* ==========================================================================
   L4 — Mittlerer Erklaerteil der Landingpage
   Gehoert zu teile/landing-nutzen.html. Setzt css/warm-modern.css voraus.
   Nur Tokens aus warm-modern.css, keine eigenen Farb- oder Abstandswerte.
   Praefix: nutz-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rohmeldung wird nutzbare Chance
   -------------------------------------------------------------------------- */
.nutz-gegen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.08fr);
  gap: var(--s4);
  align-items: start;
}

/* Links: das Behoerdendeutsch als das, was es ist */
.nutz-roh {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
}
.nutz-roh__kopf {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nutz-roh__kopf svg { flex: none; }
.nutz-roh__text {
  font-size: var(--t-klein);
  line-height: 1.9;
  color: var(--text-muted);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.nutz-luecken {
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.nutz-luecken__rubrik {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s2);
}
.nutz-luecken__liste {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--t-klein);
  color: var(--text-muted);
}
.nutz-luecken__liste li { position: relative; padding-left: var(--s4); }
.nutz-luecken__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 0;
  border-top: 1px solid var(--border-strong);
}
.nutz-roh__fuss {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: var(--t-mikro);
  color: var(--text-muted);
}

/* Mitte: die Kante zwischen Rohtext und Aufbereitung */
.nutz-pfeil {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding-inline: var(--s2);
}
.nutz-pfeil__linie {
  width: 1px;
  flex: 1 1 auto;
  min-height: var(--s5);
  background: var(--border-strong);
}
.nutz-pfeil__kreis {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--forest);
  box-shadow: var(--sh-1);
}

/* Rechts: dieselbe Meldung, aufbereitet */
.nutz-ergebnis {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.nutz-ergebnis__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
.nutz-ergebnis__titel { font-size: var(--t-h4); }
.nutz-ergebnis__unter {
  margin-top: var(--s1);
  font-size: var(--t-basis);
  color: var(--text-muted);
}
.nutz-ergebnis .wm-score { flex: none; }
.nutz-felder {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

@media (max-width: 1023px) {
  .nutz-gegen { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .nutz-pfeil { flex-direction: row; padding-inline: 0; padding-block: var(--s1); }
  .nutz-pfeil__linie { width: auto; height: 1px; min-height: 0; min-width: var(--s5); }
  .nutz-pfeil__icon { transform: rotate(90deg); }
  .nutz-roh__text { text-align: left; }
}

/* --------------------------------------------------------------------------
   2. Die drei Nachweisstufen
   -------------------------------------------------------------------------- */
.nutz-stufenliste { border-top: 1px solid var(--border-strong); }
.nutz-stufe {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s5);
  align-items: start;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--border);
}
.nutz-stufe__probe { padding-top: var(--s2); }
.nutz-stufe__linie {
  display: block;
  height: 0;
  border-top-width: 3px;
  border-radius: 2px;
}
.nutz-stufe--belegt       .nutz-stufe__linie { width: 100%; border-top-style: solid;  border-top-color: var(--forest); }
.nutz-stufe--recherchiert .nutz-stufe__linie { width: 72%;  border-top-style: dashed; border-top-color: var(--clay); }
.nutz-stufe--unbestaetigt .nutz-stufe__linie { width: 48%;  border-top-style: dotted; border-top-color: var(--unconfirmed); }

.nutz-stufe__def {
  margin-top: var(--s3);
  font-size: var(--t-basis);
  color: var(--text-muted);
  max-width: 40ch;
}
.nutz-stufe__rubrik {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nutz-stufe__wert {
  margin-top: var(--s2);
  font-size: var(--t-basis);
  font-weight: 600;
}
.nutz-stufe__quelle {
  margin-top: var(--s1);
  font-size: var(--t-klein);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .nutz-stufe {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    padding-block: var(--s5);
  }
  .nutz-stufe__probe { padding-top: 0; }
  .nutz-stufe--belegt       .nutz-stufe__linie { width: 96px; }
  .nutz-stufe--recherchiert .nutz-stufe__linie { width: 72px; }
  .nutz-stufe--unbestaetigt .nutz-stufe__linie { width: 48px; }
  .nutz-stufe__def { margin-top: var(--s2); max-width: none; }
  .nutz-stufe__bsp {
    padding-top: var(--s3);
    border-top: 1px dashed var(--border);
  }
}

/* --------------------------------------------------------------------------
   3. Fuer wen — Reihe mit Trennlinien statt Karten
   -------------------------------------------------------------------------- */
.nutz-wen__reihe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nutz-wen__eintrag {
  padding-inline: var(--s5);
  border-left: 1px solid var(--border);
}
.nutz-wen__eintrag:first-child { padding-left: 0; border-left: 0; }
.nutz-wen__eintrag:last-child  { padding-right: 0; }
.nutz-wen__icon {
  display: inline-flex;
  color: var(--forest);
  margin-bottom: var(--s3);
}
.nutz-wen__titel {
  font-size: var(--t-gross);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.25;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.nutz-wen__text {
  margin-top: var(--s2);
  font-size: var(--t-basis);
  color: var(--text-muted);
}

@media (max-width: 1023px) {
  .nutz-wen__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutz-wen__eintrag { padding-inline: var(--s5); border-left: 1px solid var(--border); }
  .nutz-wen__eintrag:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .nutz-wen__eintrag:nth-child(2n)     { padding-right: 0; }
  .nutz-wen__eintrag:nth-child(n + 3) {
    margin-top: var(--s6);
    padding-top: var(--s6);
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 640px) {
  .nutz-wen__reihe { grid-template-columns: minmax(0, 1fr); }
  .nutz-wen__eintrag {
    padding-inline: 0;
    border-left: 0;
  }
  .nutz-wen__eintrag + .nutz-wen__eintrag {
    margin-top: var(--s5);
    padding-top: var(--s5);
    border-top: 1px solid var(--border);
  }
  .nutz-wen__eintrag:nth-child(n + 3) { margin-top: var(--s5); padding-top: var(--s5); }
}

/* --------------------------------------------------------------------------
   4. Was im Portal zur Verfuegung steht — dichte Liste
   -------------------------------------------------------------------------- */
.nutz-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s8);
  border-bottom: 1px solid var(--border);
}
.nutz-liste__eintrag {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding-block: var(--s3);
  border-top: 1px solid var(--border);
}
.nutz-liste__icon {
  flex: none;
  display: inline-flex;
  margin-top: 2px;
  color: var(--text-muted);
}
.nutz-liste__text { display: block; min-width: 0; }
.nutz-liste__titel {
  display: block;
  font-size: var(--t-basis);
  font-weight: 700;
}
.nutz-liste__zusatz {
  display: block;
  font-size: var(--t-klein);
  color: var(--text-muted);
  line-height: 1.5;
}
.nutz-nicht {
  margin-top: var(--s5);
  max-width: 70ch;
}

@media (max-width: 767px) {
  .nutz-liste { grid-template-columns: minmax(0, 1fr); }
}