/* Fahrzeugakte — Tablet zuerst. Grosse Trefferflaechen, Bedienung mit Handschuhen.
   Keine Web-Fonts, kein CDN: laedt nichts nach, funktioniert offline. */

:root{
  --blau:#1f3a5f; --blau-hell:#2f5c96;
  --gruen:#1a7f37; --gelb:#b8860b; --rot:#c0392b; --grau:#65707c;
  --linie:#dfe3e8; --flaeche:#f5f7f9; --weiss:#fff;
  --radius:10px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--flaeche); color:#16202b;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.45;
}
main{max-width:1100px; margin:0 auto; padding:16px 16px 80px}
h1{font-size:1.5rem; margin:.6em 0 .3em}
h2{font-size:1.15rem; margin:1.4em 0 .5em}
a{color:var(--blau-hell)}

/* Kopf */
.kopf{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--blau); color:#fff; padding:10px 16px; position:sticky; top:0; z-index:20;
}
.marke{color:#fff; text-decoration:none; font-weight:600; letter-spacing:.2px}
.marke span{opacity:.65; font-weight:400}
.kopf-rechts{display:flex; align-items:center; gap:12px; font-size:.9rem}
.rolle{background:rgba(255,255,255,.16); padding:3px 10px; border-radius:20px}
.abmelden{color:#dbe6f3}

/* Meldungen */
.meldung{max-width:1100px; margin:12px auto 0; padding:10px 14px; border-radius:var(--radius); font-size:.95rem}
.meldung.gut{background:#e7f5eb; color:#14612b; border:1px solid #b6e0c2}
.meldung.schlecht{background:#fdecea; color:#8c2318; border:1px solid #f2c2bd}

/* Fahrzeugzeile */
.fahrzeugzeile{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:12px 14px; margin-top:14px;
}
.kennz{background:#eef1f5; border:1px solid var(--linie); border-radius:5px; padding:2px 8px; margin-left:10px; font-weight:600}
.kennz.gross{display:inline-block; font-size:1.2rem; margin:6px 0}
.fin{color:var(--grau); font-size:.85rem; margin-left:10px; font-variant-numeric:tabular-nums}
.antrieb{background:var(--blau); color:#fff; border-radius:20px; padding:2px 10px; font-size:.78rem; margin-left:10px}
.unterzeile{color:var(--grau); margin:.2em 0 1em}

/* Knoepfe */
.knopf{
  display:inline-block; background:var(--blau); color:#fff; border:0; border-radius:var(--radius);
  padding:12px 18px; font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer;
}
.knopf.leise{background:#fff; color:var(--blau); border:1px solid var(--linie)}

/* Stationsleiste (Arbeitspositionen) */
.stationsleiste{display:flex; gap:8px; overflow-x:auto; padding:14px 0 4px; -webkit-overflow-scrolling:touch}
.station{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--weiss); border:1px solid var(--linie); border-radius:24px;
  padding:9px 15px; color:#16202b; min-height:44px;
}
.station .nr{background:var(--blau); color:#fff; border-radius:50%; width:24px; height:24px;
  display:grid; place-items:center; font-size:.8rem; font-weight:700}
.station.aktiv{background:var(--blau); color:#fff; border-color:var(--blau)}
.station.aktiv .nr{background:#fff; color:var(--blau)}
.station .name{white-space:nowrap; font-size:.92rem}

/* Fortschritt */
.ap-kopf{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.fortschritt{min-width:220px}
.fortschritt span{font-size:.85rem; color:var(--grau)}
.balken{background:#e4e8ed; border-radius:6px; height:9px; overflow:hidden; margin-bottom:5px}
.balken i{display:block; height:100%; background:var(--gruen); transition:width .25s}
.balken.klein{height:5px; margin:6px 0 0}
.fortschritt.gross .balken{height:13px}

/* Pruefpunkte */
.punkte{display:grid; gap:14px; margin-top:16px}
.punkt{
  background:var(--weiss); border:1px solid var(--linie); border-left:5px solid var(--linie);
  border-radius:var(--radius); padding:14px;
}
.punkt.fertig{border-left-color:var(--gruen)}
.punkt-kopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.punkt-kopf h2{flex:1 1 12ch}
.punkt-kopf h2{margin:0; font-size:1.05rem; font-weight:600; flex:1}
.knr{background:#eef1f5; border-radius:5px; padding:3px 9px; font-weight:700; font-size:.85rem; color:var(--blau)}
.haken{color:var(--gruen); font-size:1.3rem; opacity:0}
.punkt.fertig .haken{opacity:1}
.hinweis{color:var(--grau); font-size:.86rem; margin:6px 0 0}
.hinweis.regel{color:var(--gelb)}

/* Bewertungsstufen — die vier grossen Knoepfe */
.stufen{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px}
.stufe{
  min-height:62px; border:2px solid var(--linie); background:var(--weiss); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:.8rem; color:#44505d; cursor:pointer; padding:6px 4px;
}
.stufe .zeichen{font-size:1.5rem; line-height:1}
.stufe:active{transform:scale(.97)}
.stufe.gewaehlt{color:#fff}
.s-ok.gewaehlt{background:var(--gruen); border-color:var(--gruen)}
.s-eingeschraenkt.gewaehlt{background:var(--gelb); border-color:var(--gelb)}
.s-mangel.gewaehlt{background:var(--rot); border-color:var(--rot)}
.s-entfaellt.gewaehlt{background:var(--grau); border-color:var(--grau)}

/* Messwerte und Felder */
.messwerte{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px}
.messfeld span, .feld span{display:block; font-size:.82rem; color:var(--grau); margin-bottom:4px}
.messfeld em{font-style:normal}
.grenze{color:var(--rot); font-weight:600; margin-left:5px}
.pflicht{color:var(--rot); font-weight:600}
input, textarea, select{
  width:100%; padding:12px; font-size:1rem; font-family:inherit;
  border:1px solid #c9d0d8; border-radius:8px; background:#fff;
}
input:disabled{background:#f0f2f4; color:#9aa4ae}
input:focus, textarea:focus, select:focus{outline:3px solid #cfe0f5; border-color:var(--blau-hell)}
.bedingt-felder{display:grid; gap:10px; margin-top:12px}
/* Fotos ------------------------------------------------------------------ */
.fotobereich{border:1px dashed #c9d0d8; border-radius:8px; padding:10px}
.aufnahme{margin-top:8px; min-height:48px}          /* Handschuhgroesse */
.galerie{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.galerie:empty{display:none}
.bild{position:relative; margin:0; width:120px}
.bild img{width:120px; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--linie);
  background:#eef1f5; display:block}
.bild figcaption{font-size:.72rem; color:var(--grau); margin-top:3px; line-height:1.2;
  overflow-wrap:anywhere}
.bild .weg{position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%;
  border:0; background:rgba(22,32,43,.72); color:#fff; font-size:.9rem; cursor:pointer}
.bild .weg:hover{background:var(--rot)}
.motive{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.motiv{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 12px;
  border:1px solid var(--linie); background:var(--weiss); border-radius:20px; cursor:pointer;
  font-size:.85rem; color:#16202b}
.motiv .haken{color:var(--gruen); opacity:0; font-size:.95rem}
.motiv.erledigt{border-color:var(--gruen); background:#f0f8f2}
.motiv.erledigt .haken{opacity:1}
.motiv:active{transform:scale(.97)}

/* Status je Punkt */
.status{margin:10px 0 0; font-size:.86rem; min-height:1.2em; color:var(--grau)}
.status.gut{color:var(--gruen)}
.status.offen{color:var(--gelb)}
.status.fehler{color:var(--rot)}
.status.automatisch{color:var(--rot); font-weight:600}
.status.offline{color:var(--blau-hell)}

/* Karten (Fahrzeugliste) */
.karten{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:10px}
.karte{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:14px; text-decoration:none; color:inherit; display:block; position:relative;
}
.karte-kopf{display:flex; justify-content:space-between; align-items:center; gap:8px}
.status-etikett{display:inline-block; margin-top:10px; font-size:.75rem; padding:3px 9px;
  border-radius:20px; background:#eef1f5; color:var(--grau)}
.s-offen{background:#fdf3e0; color:var(--gelb)}

/* Stationsliste auf der Vorgangsseite */
.stationen-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.station-karte{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:12px 14px; text-decoration:none; color:inherit;
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
}
.station-karte .nr{background:var(--blau); color:#fff; border-radius:50%; width:28px; height:28px;
  display:grid; place-items:center; font-weight:700; font-size:.85rem}
.station-karte .zahl{color:var(--grau); font-size:.85rem; font-variant-numeric:tabular-nums}
.station-karte .balken{grid-column:1/-1}
.station-karte.fertig{border-color:#b6e0c2; background:#f4fbf6}

/* Tabelle */
.tabelle{width:100%; border-collapse:collapse; background:var(--weiss);
  border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden}
.tabelle th, .tabelle td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--linie); font-size:.92rem}
.tabelle th{background:#eef1f5; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:var(--grau)}
.tabelle tr.offen{background:#fffaf2}
.etikett{border-radius:20px; padding:2px 9px; font-size:.78rem; color:#fff}
.b-mangel{background:var(--rot)}
.b-eingeschraenkt{background:var(--gelb)}
.zaehler{background:#eef1f5; border-radius:20px; padding:1px 9px; font-size:.8rem; color:var(--grau)}

/* Sperre */
.sperre{background:#fffaf2; border:1px solid #f0dcb8; border-left:5px solid var(--gelb);
  border-radius:var(--radius); padding:12px 14px}
.sperre p{margin:.3em 0}

/* Formulare */
.formular{display:grid; gap:12px; max-width:420px; margin-top:12px}
.formular label span{display:block; font-size:.82rem; color:var(--grau); margin-bottom:4px}
.anmeldebox{max-width:380px; margin:8vh auto; background:var(--weiss);
  border:1px solid var(--linie); border-radius:var(--radius); padding:24px}
details.neu{margin-top:26px; background:var(--weiss); border:1px solid var(--linie);
  border-radius:var(--radius); padding:12px 14px}
details.neu summary{cursor:pointer; font-weight:600}
.leer{color:var(--grau)}

/* Handys */
@media (max-width:560px){
  .stufe .text{display:none}
  .stufe{min-height:66px}
  main{padding:12px 12px 70px}
}

/* Fahrzeug anlegen (DMS-PDF) */
.anlegen-zeile{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px}
.uploadbox{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0 20px}
.ablage{flex:1 1 320px; border:2px dashed #c9d0d8; border-radius:var(--radius);
  padding:22px; background:var(--weiss); text-align:center; cursor:pointer}
.ablage input{width:auto; border:0; padding:0; background:none}
.ablage-text{display:block; color:var(--grau); font-size:.85rem; margin-top:8px}
.infobox{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:14px 16px}
.infobox h2{font-size:.95rem; margin:.9em 0 .2em}
.infobox h2:first-child{margin-top:0}
.infobox p{margin:.2em 0; font-size:.92rem; color:#39434e}

/* Antriebsart waehlen */
.antriebswahl{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:16px 0}
.antriebsknopf{
  min-height:120px; border:2px solid var(--linie); background:var(--weiss); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.antriebsknopf:hover{border-color:var(--blau); background:#f7faff}
.antriebsknopf .kuerzel{font-size:1.5rem; font-weight:700; color:var(--blau)}
.antriebsknopf .langtext{font-size:.95rem}
.antriebsknopf .anzahl{font-size:.8rem; color:var(--grau)}
.offener-schritt{margin:10px 0 0; font-size:.86rem; color:var(--gelb); font-weight:600}
.meldung.achtung{background:#fffaf2; color:#7a5a12; border:1px solid #f0dcb8; border-left:5px solid var(--gelb)}
.freiwillig{color:var(--grau); font-weight:600}
.merker{margin:10px 0 0; padding:8px 11px; font-size:.86rem; border-radius:8px;
  background:#fffaf2; border-left:4px solid var(--gelb); color:#7a5a12}
.todo{margin:8px 0 0; padding:8px 11px; background:#f2f6fb; border-left:4px solid var(--blau-hell);
  border-radius:6px; font-size:.9rem; color:#2b3a4a}

/* Weiter-Leiste und Ersatzdatum */
.weiter-leiste{display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:22px; flex-wrap:wrap}
.ersatzdatum{margin-top:6px; background:#eef1f5; border:1px solid var(--linie); border-radius:6px;
  padding:6px 10px; font-size:.8rem; color:var(--blau); cursor:pointer; width:auto}
.ersatzdatum:hover{background:#e2e8f0}

/* Station 1 — Zugang, Schadenskarte, Druckbogen -------------------------- */
.wahl{display:grid; gap:10px; max-width:640px}
.wahlfeld{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center;
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:12px 14px;
  cursor:pointer}
.wahlfeld input{grid-row:span 2; width:22px; height:22px}
.wahlname{font-weight:600}
.wahlhinweis{font-size:.84rem; color:var(--grau)}
.wahlfeld:has(input:checked){border-color:var(--blau); box-shadow:0 0 0 2px #cfe0f5}

.kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:0 0 18px}
.kachel{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; text-decoration:none; color:#16202b;
  background:var(--weiss); border:1px solid var(--linie); border-left:5px solid var(--linie);
  border-radius:var(--radius); padding:12px 14px}
.kachel.fertig{border-left-color:var(--gruen)}
.kachel .nr{grid-row:span 2; background:var(--blau); color:#fff; border-radius:50%; width:28px; height:28px;
  display:grid; place-items:center; font-size:.85rem; font-weight:700}
.kachel .name{font-weight:600}
.kachel .zahl{font-size:.82rem; color:var(--grau); font-variant-numeric:tabular-nums}

.karte{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:16px; margin:0 0 16px}
.karte h2{margin:0 0 8px; font-size:1.05rem}
.anlage-form{display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:12px}
.anlagenliste{margin:12px 0 0; padding-left:18px}
.offenliste{margin:0; padding-left:18px; color:var(--gelb)}
.liste{width:100%; border-collapse:collapse}
.liste td{border-top:1px solid var(--linie); padding:8px 6px; vertical-align:top}
.liste tr.offen td{background:#fdf7ec}

.schadenskarte{margin-top:14px; border-top:1px solid var(--linie); padding-top:12px}
.schadenliste{display:grid; gap:12px; margin-bottom:12px}
.schaden{border:1px solid var(--linie); border-left:5px solid var(--gelb); border-radius:var(--radius);
  padding:12px; background:#fcfdfe}
.schaden.vollstaendig{border-left-color:var(--gruen)}
.schaden-kopf{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.schaden-kopf .weg{border:0; background:transparent; color:var(--rot); font-size:1.1rem; cursor:pointer;
  width:36px; height:36px; border-radius:50%}
.schaden-kopf .weg:hover{background:#fdecea}
.haken-feld{display:inline-flex; align-items:center; gap:6px; margin:0 14px 6px 0; font-size:.9rem}
.haken-feld input{width:20px; height:20px}

.druckleiste{display:flex; gap:10px; justify-content:flex-end; margin-bottom:12px}
.druckbogen{background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:26px;
  max-width:900px; margin:0 auto}
.bogenkopf{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
  border-bottom:2px solid #16202b; padding-bottom:12px}
.bogenkopf h1{margin:0; font-size:1.3rem}
.stammdaten{border-collapse:collapse; font-size:.86rem}
.stammdaten th{text-align:left; color:var(--grau); font-weight:600; padding:2px 14px 2px 0}
.einleitung{font-size:.92rem}
.fragengruppe{margin-top:18px; break-inside:avoid}
.fragengruppe h2{font-size:1rem; border-bottom:1px solid var(--linie); padding-bottom:4px}
.frage{margin:0 0 14px; break-inside:avoid}
.fragetext{margin:0 0 6px; font-size:.92rem}
.antwortzeile{margin:0 0 6px; display:flex; align-items:center; gap:10px}
.kasten{display:inline-block; border:1.5px solid #16202b; width:52px; text-align:center;
  font-size:.82rem; padding:2px 0}
.linie{display:block; border-bottom:1px solid #16202b; flex:1; height:1.1em}
.linie.lang{width:100%}
.belehrung{margin-top:20px; font-size:.86rem; border:1px solid var(--linie); padding:10px; border-radius:6px}
.unterschriften{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; margin-top:34px}
.unterschriften p{margin:4px 0 0; font-size:.78rem; color:var(--grau)}
.bogenfuss{margin-top:24px; font-size:.78rem; color:var(--grau); border-top:1px solid var(--linie);
  padding-top:8px}
@media print{
  .kopf, .druckleiste, .meldung{display:none}
  body{background:#fff}
  .druckbogen{border:0; padding:0; max-width:none}
}

/* Interview: woher stammt die Antwort ------------------------------------ */
.punkt.interview{border-left-color:var(--blau-hell)}
.punkt.interview.fertig{border-left-color:var(--gruen)}
.quelle{font-size:.72rem; border-radius:20px; padding:3px 10px; white-space:nowrap;
  border:1px solid var(--linie); color:var(--grau); background:#fff}
.q-verkaeufer{border-color:var(--blau-hell); color:var(--blau); background:#eef4fb; font-weight:600}
.q-beides{border-color:var(--blau-hell); color:var(--blau); background:#f6f9fd}
.q-papiere{border-color:#c9d0d8; color:var(--grau)}
.q-eigen{border-color:#c9d0d8; color:var(--grau)}
.wortlaut{margin:10px 0 4px; padding:10px 14px; border-left:3px solid var(--blau-hell);
  background:#f4f8fd; border-radius:0 8px 8px 0; font-size:1.02rem; line-height:1.45}
.wortlaut::before{content:"„"}
.wortlaut::after{content:"“"}
.abschnitt-hinweis{margin:2px 0 0; max-width:70ch; color:var(--grau); font-size:.86rem;
  line-height:1.45}
.ap-kopf{align-items:start}

.betrag{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600}
.summe{margin:12px 0 0; padding-top:10px; border-top:1px solid var(--linie)}
.summe strong{font-size:1.15rem; font-variant-numeric:tabular-nums; margin-right:10px}
.kostenfeld input{max-width:220px}

/* Vorbesitzererklaerung: vorausgefuellte Antworten ----------------------- */
.kasten.gesetzt{background:#16202b; color:#fff; font-weight:700}
.kasten.gesetzt::before{content:"±2a0"}
.antwortzeile .linie{position:relative; padding:0 4px; font-size:.9rem; line-height:1.3;
  white-space:pre-wrap; word-break:break-word; min-height:1.2em}
.nicht-drucken{max-width:900px; margin-left:auto; margin-right:auto}
@media print{ .nicht-drucken{display:none} }

/* Stationsbrett ---------------------------------------------------------- */
.stationsbrett{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.stationskachel{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; text-decoration:none;
  color:#16202b; background:var(--weiss); border:1px solid var(--linie);
  border-left:5px solid var(--linie); border-radius:var(--radius); padding:14px 16px}
.stationskachel.aktiv{border-left-color:var(--blau)}
.stationskachel.unfertig{background:#fafbfc; color:var(--grau)}
.stationskachel .nr{grid-row:span 3; background:var(--blau); color:#fff; border-radius:50%;
  width:34px; height:34px; display:grid; place-items:center; font-weight:700}
.stationskachel.unfertig .nr{background:#aab4c0}
.stationskachel .name{font-weight:600; font-size:1.02rem}
.stationskachel .beschreibung{font-size:.82rem; color:var(--grau); line-height:1.35}
.stationskachel .zahlen{font-size:.88rem; margin-top:4px}
.stationskachel .zahlen b{font-size:1.1rem; font-variant-numeric:tabular-nums}
.marke{display:inline-block; font-size:.74rem; border-radius:20px; padding:2px 9px;
  margin-left:6px; white-space:nowrap}
.marke.offen{background:#eaf3ff; color:var(--blau); border:1px solid #bcd6f5; font-weight:600}
.marke.wartet{background:#fdf7ec; color:var(--gelb); border:1px solid #eddcb9}
.marke.fertig{background:#eef8f1; color:var(--gruen); border:1px solid #c6e6d1}
.marke.unfertig{grid-column:2; justify-self:start; background:#f1f3f5; color:var(--grau);
  border:1px solid var(--linie); margin:6px 0 0}

.fahrzeugliste{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px}
.fahrzeugkarte{background:var(--weiss); border:1px solid var(--linie); border-left:5px solid var(--linie);
  border-radius:var(--radius); padding:14px 16px}
.fahrzeugkarte.offen{border-left-color:var(--blau)}
.fahrzeugkarte.wartet{border-left-color:var(--gelb)}
.fahrzeugkarte.fertig{border-left-color:var(--gruen)}
.fahrzeugkarte .kopfzeile{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.fahrzeugkarte .fortschritt{margin:10px 0 0}
.karten-fuss{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px}

.hervorgehoben{animation:aufblitzen 2.4s ease-out}
@keyframes aufblitzen{
  0%{box-shadow:0 0 0 4px #ffd98a} 12%{box-shadow:0 0 0 4px #ffd98a}
  100%{box-shadow:0 0 0 4px rgba(255,217,138,0)}
}

/* Station 1: zwei Bearbeiter ---------------------------------------------- */
.rollenblock{margin:0 0 22px}
.rollenkopf{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:2px}
.rollenkopf h2{margin:0; font-size:1.1rem}
.rollenkopf .fortschritt{flex:1; min-width:200px; max-width:340px; margin:0}
.rollenblock .unterzeile{margin:0 0 10px; max-width:70ch}
.rollenblock .kacheln{margin-bottom:0}
.rollenblock.r-ankaeufer .kachel{border-left-color:#b9cdea}
.rollenblock.r-bewerter .kachel{border-left-color:#c9d0d8}
.rollenblock .kachel.fertig{border-left-color:var(--gruen)}
.rollenmarke{display:inline-block; font-size:.76rem; border-radius:20px; padding:3px 11px;
  border:1px solid var(--linie); background:#fff; color:var(--grau); margin:2px 0 6px}
.rollenmarke.r-ankaeufer{border-color:var(--blau-hell); color:var(--blau); background:#eef4fb;
  font-weight:600}
.rollenmarke.r-bewerter{border-color:#c9d0d8; background:#f5f7f9}
.station.fremde-rolle{opacity:.55}
.station.fremde-rolle.aktiv{opacity:1}

/* Freie Kostenzeilen ------------------------------------------------------ */
.kostenzeilen{margin-top:14px; border-top:1px solid var(--linie); padding-top:12px}
.zeilenkopf, .kostenzeile{display:grid; grid-template-columns:1fr 150px 44px; gap:8px;
  align-items:center}
.zeilenkopf{font-size:.8rem; color:var(--grau); margin-bottom:4px}
.zeilenkopf span:nth-child(2){text-align:right}
.kostenzeile{margin-bottom:8px}
.kostenzeile input[data-feld="betrag"]{text-align:right; font-variant-numeric:tabular-nums}
.kostenzeile .weg{border:0; background:transparent; color:var(--grau); font-size:1rem;
  cursor:pointer; height:44px; border-radius:8px}
.kostenzeile .weg:hover{background:#fdecea; color:var(--rot)}
.zwischensumme{margin:10px 0 0; text-align:right; font-variant-numeric:tabular-nums}
.zwischensumme strong{font-size:1.05rem}