/* Lauf-Seite */

.parameter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; }
.regler.breit { grid-column: 1 / -1; }
.regler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.regler-kopf label { margin: 0; }
.regler-kopf output { font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.regler input { margin: 10px 0 4px; }
.regler .hinweis { margin: 6px 0 0; line-height: 1.5; }
.skala { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--grau-2); }
.schalter { display: flex; flex-wrap: wrap; gap: 10px 28px; grid-column: 1 / -1; }
.schalter label {
  /* Häkchen links, umbrechender Text bündig daneben (hängender Einzug) */
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0; font-size: 14px; line-height: 1.4; color: var(--tinte); font-weight: 400;
}
/* Häkchen (17 px) mittig zur ersten Textzeile (14 px × 1,4 ≈ 19,6 px) */
.schalter input[type="checkbox"] { flex: none; margin: 1px 0 0; }

.spalten { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }

/* Personen */
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.person { background: var(--karte); border: 1px solid var(--linie-2); border-radius: 10px; padding: 14px 16px; }
.person-kopf { display: flex; align-items: baseline; gap: 10px; }
.person-kopf h3 { flex: 1 1 auto; }
.person-min { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.abw { font-size: 13px; color: var(--grau-2); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.abw.auffaellig { color: var(--braun); font-weight: 600; }
.zuf { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; font-size: 12px; color: var(--grau-2); }
.zuf-balken { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.zuf-balken div { height: 100%; background: var(--gruen); }

.aufgaben { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aufgabe {
  display: flex; align-items: first baseline; gap: 8px; font-size: 13px; line-height: 1.35;
  padding: 4px 0 4px 9px; border-left: 3px solid var(--linie-3);
}
.aufgabe.gern { border-left-color: var(--gruen); }
.aufgabe.nicht { border-left-color: var(--braun-akzent); }
.aufgabe-name { flex: 1 1 auto; min-width: 0; }
.aufgabe-min { color: var(--grau-2); font-variant-numeric: tabular-nums; }
.marke-klein {
  font-size: 11px; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  background: var(--papier); border: 1px solid var(--linie); color: var(--grau);
}
.pin {
  font: inherit; font-size: 12px; line-height: 1; width: 24px; height: 22px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 5px; background: none; color: var(--linie-3); cursor: pointer;
}
.pin:hover { color: var(--grau); border-color: var(--linie); }
.pin.aktiv { color: var(--tinte); }

/* Diff */
.diff-box { background: var(--karte); border: 1px solid var(--linie-2); border-radius: 10px; padding: 16px 18px; }
.diff-box > .klein { margin: 0 0 12px; }
.diff { list-style: none; margin: 0; padding: 0; }
.diff li { padding: 11px 0 11px 12px; border-top: 1px solid var(--linie-2); border-left: 3px solid var(--braun-akzent); }
.diff li.bleibt { border-left-color: var(--linie-3); }
.diff-aufgabe { font-size: 14px; font-weight: 500; }
.diff-wer { font-size: 14px; margin: 3px 0; }
.diff-wer .von { color: var(--grau-2); text-decoration: line-through; text-decoration-color: var(--grau-3); }
.diff-warum { font-size: 13px; line-height: 1.5; color: var(--grau); }
#diff-alle { margin-top: 8px; }

.pins { margin-top: 16px; background: var(--karte); border: 1px solid var(--linie-2); border-radius: 10px; padding: 16px 18px; }
.pins .hinweis { margin: 4px 0 10px; line-height: 1.5; }
#pins { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
#pins li { display: flex; gap: 8px; align-items: baseline; }
#pins li span:nth-child(2) { flex: 1 1 auto; }
.pin-symbol { font-size: 12px; }
.pin-neu { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.pin-neu select { font-size: 14px; padding: 7px 9px; }

.annahme {
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between;
  margin-top: 32px; padding: 20px 22px; border: 2px solid var(--tinte); border-radius: 12px; background: var(--karte);
}
.annahme p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 720px; }

@media (max-width: 900px) {
  .spalten { grid-template-columns: 1fr; }
  .pin-neu { grid-template-columns: 1fr; }
}

.parameter-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.parameter-kopf h2 { margin-bottom: 14px; }

/* Während der Rechnung: Resultat halb überblendet, Fortschritt obenauf */
.ergebnis-bereich { position: relative; min-height: 140px; }
.rechnet {
  position: absolute; inset: 0; z-index: 5; border-radius: 12px;
  background: rgba(242, 239, 232, 0.6);
}
.rechnet[hidden] { display: none; }
.rechnet-karte {
  position: sticky; top: 24px; margin: 24px auto 0; width: min(420px, calc(100% - 32px));
  background: var(--karte); border: 1px solid var(--linie-3); border-radius: 12px;
  padding: 18px 20px; box-shadow: 0 8px 28px rgba(28, 27, 25, 0.12);
}
.rechnet-titel { font-weight: 600; margin-bottom: 8px; }
.rechnet-text { font-size: 13px; color: var(--grau); font-variant-numeric: tabular-nums; }