/* LNL-Erhebung – Oberfläche des Fragebogens. Ergänzt basis.css. */

/* ----------------------------------------------------------- Gerüst */
.rahmen { display: grid; grid-template-columns: var(--sidebar-b) 1fr; min-height: 100vh; }
.seitenleiste { background: var(--flaeche); border-right: 1px solid var(--linie); padding: 18px 0 40px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.seitenleiste .marke { padding: 0 18px 14px; border-bottom: 1px solid var(--linie); margin-bottom: 12px; }
.seitenleiste .marke img { width: 148px; display: block; }
.seitenleiste .marke .wer { font-size: .82em; color: var(--grau); margin-top: 10px; line-height: 1.35; }
.seitenleiste .marke .wer b { color: var(--text); display: block; font-size: 1.05em; }
.inhalt { padding: 26px 34px 80px; max-width: 1180px; min-width: 0; }

/* ----------------------------------------------------------- Kapitelliste */
.kap-liste { list-style: none; margin: 0; padding: 0 10px; }
.kap-liste li { margin-bottom: 2px; }
.kap-knopf { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 9px;
  border: 0; background: none; border-radius: 7px; cursor: pointer; font-size: .9em; line-height: 1.3; color: var(--text); }
.kap-knopf:hover { background: #ECF1F8; }
.kap-knopf[aria-current="true"] { background: var(--blau); color: #fff; font-weight: 600; }
.kap-knopf .nr { flex: 0 0 1.55rem; height: 1.55rem; border-radius: 50%; background: #DDE5F0; color: var(--blau);
  display: inline-flex; align-items: center; justify-content: center; font-size: .78em; font-weight: 700; }
.kap-knopf[aria-current="true"] .nr { background: rgba(255,255,255,.22); color: #fff; }
.kap-knopf .titel { flex: 1 1 auto; }
.kap-knopf .quote { flex: 0 0 auto; font-size: .76em; color: var(--grau); font-variant-numeric: tabular-nums; }
.kap-knopf[aria-current="true"] .quote { color: rgba(255,255,255,.85); }
.kap-knopf.fertig .nr { background: var(--gruen); color: #fff; }
.kap-knopf.fertig[aria-current="true"] .nr { background: rgba(255,255,255,.3); }

/* ----------------------------------------------------------- Fortschritt */
.fortschritt-gross { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fortschritt-gross .zahl { font-size: 1.9em; font-weight: 700; color: var(--blau); line-height: 1;
  font-variant-numeric: tabular-nums; }
.balken { flex: 1 1 220px; height: 9px; background: #E8EDF4; border-radius: 999px; overflow: hidden; min-width: 160px; }
.balken > i { display: block; height: 100%; background: var(--blau2); border-radius: 999px; transition: width .25s; }
.balken.fertig > i { background: var(--gruen); }
.fortschritt-gross .text { font-size: .88em; color: var(--grau); }

/* ----------------------------------------------------------- Abschnitt und Frage */
.abschnitt { margin: 0 0 26px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; overflow: hidden; }
.abschnitt > h3 { margin: 0; padding: 11px 18px; background: var(--hellblau); color: var(--blau);
  font-size: 1em; border-bottom: 1px solid var(--linie2); }
.abschnitt .a-inhalt { padding: 6px 18px 14px; }
.abschnitt .a-hinweis { padding: 9px 18px; background: #FBFCFE; border-bottom: 1px solid var(--linie);
  font-size: .86em; color: #4A5565; }

.frage { display: grid; grid-template-columns: 1fr 15rem; gap: 10px 20px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid #F1F3F7; }
.frage:last-child { border-bottom: 0; }
.frage > .f-text { font-size: .94em; line-height: 1.4; }
.frage > .f-text .pflicht { color: var(--orange); margin-left: 4px; font-weight: 700; }
.frage > .f-text .f-hinweis { display: block; font-size: .83em; color: var(--grau); margin-top: 3px; }
.frage > .f-feld { display: flex; flex-direction: column; gap: 4px; }
.frage.breit { grid-template-columns: 1fr; }
.frage.ungueltig .eingabe { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(184,80,80,.12); }
.feld-fehler { font-size: .8em; color: var(--rot); }
.feld-vorjahr { font-size: .78em; color: var(--grau); }
.feld-vorjahr button { border: 0; background: none; color: var(--blau2); cursor: pointer; padding: 0;
  font: inherit; text-decoration: underline; }

/* Eingabe mit Einheit */
.mit-einheit { display: flex; align-items: stretch; }
.mit-einheit .eingabe { border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right;
  font-variant-numeric: tabular-nums; }
.mit-einheit .einheit { display: inline-flex; align-items: center; padding: 0 10px; background: var(--flaeche);
  border: 1px solid #CDD5E0; border-left: 0; border-radius: 0 7px 7px 0; font-size: .85em; color: var(--grau);
  white-space: nowrap; }

/* Zwei Schalter statt Freitext */
.marker-reihe { display: flex; gap: 6px; }
.marker-knopf { border: 1px solid var(--linie2); background: #fff; border-radius: 999px; padding: 1px 10px;
  font-size: .76em; color: var(--grau); cursor: pointer; }
.marker-knopf:hover { border-color: var(--blau2); color: var(--blau2); }
.marker-knopf[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }

/* ----------------------------------------------------------- Matrix */
.matrix { margin: 12px 0 4px; max-width: 100%; }
.matrix .m-rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix > .m-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 7px; }
.matrix > .m-kopf .m-titel { font-size: .94em; font-weight: 600; }
.matrix-tab { width: 100%; border-collapse: collapse; font-size: .88em; }
.matrix-tab th, .matrix-tab td { border: 1px solid var(--linie); padding: 5px 7px; vertical-align: middle; }
.matrix-tab thead th { background: var(--hellblau); color: var(--blau); font-weight: 600; text-align: left;
  font-size: .92em; line-height: 1.25; }
.matrix-tab tbody th { background: #FBFCFE; font-weight: 500; text-align: left; white-space: normal;
  min-width: 11rem; }
.matrix-tab td { padding: 3px 4px; }
.matrix-tab .eingabe { padding: 4px 7px; border-radius: 5px; text-align: right; font-variant-numeric: tabular-nums; }
.matrix-tab tr.gesperrt td .eingabe { background: var(--flaeche); color: var(--grau); }
.matrix .m-alle { background: #FFFBF4; border: 1px solid #F0DCC2; border-radius: 7px; padding: 8px 12px;
  margin-bottom: 8px; font-size: .86em; }
.matrix .m-alle .caption { margin: 3px 0 0; }

/* ----------------------------------------------------------- Fussleiste */
.fussleiste { position: sticky; bottom: 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--linie);
  padding: 11px 0 12px; margin-top: 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  backdrop-filter: blur(4px); }
.fussleiste .stand { font-size: .82em; color: var(--grau); margin-left: auto; }

/* ----------------------------------------------------------- Prüfung */
.pruef-zeile { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #F1F3F7; font-size: .9em; }
.pruef-zeile:last-child { border-bottom: 0; }
.stufe { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .76em; font-weight: 600; }
.stufe.fehler { background: #FBEDED; color: var(--rot); }
.stufe.hinweis { background: #FFF6EA; color: #9A5B16; }
.stufe.ok { background: var(--gruen-hell); color: var(--gruen-dunkel); }

/* ----------------------------------------------------------- Admin */
.liste-tab { width: 100%; border-collapse: collapse; font-size: .89em; background: #fff; }
.liste-tab th, .liste-tab td { border-bottom: 1px solid var(--linie); padding: 7px 9px; text-align: left; }
.liste-tab thead th { background: var(--hellblau); color: var(--blau); border-bottom: 1px solid var(--linie2);
  position: sticky; top: 0; z-index: 1; }
.liste-tab tbody tr:hover { background: #FAFBFD; }
.liste-tab td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-pille { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .78em; font-weight: 600; }
.status-pille.offen { background: #F1F3F7; color: var(--grau); }
.status-pille.in_arbeit { background: #FFF6EA; color: #9A5B16; }
.status-pille.abgeschlossen { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 20px; flex-wrap: wrap; }
.reiter button { border: 0; background: none; padding: 9px 14px; cursor: pointer; font-size: .94em;
  color: var(--grau); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter button:hover { color: var(--blau2); }
.reiter button[aria-current="true"] { color: var(--blau); font-weight: 600; border-bottom-color: var(--blau); }

/* ----------------------------------------------------------- Handy */
@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .seitenleiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); }
  .inhalt { padding: 18px 16px 70px; }
  .frage { grid-template-columns: 1fr; }
  .frage > .f-feld { max-width: 18rem; }
  .matrix-tab { min-width: 34rem; }
  .matrix-tab tbody th { min-width: 8rem; }
}

/* ---------- 1.1: Verwaltung ---------- */
.kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.kpi { background: var(--weiss); border: 1px solid var(--linie2); border-radius: var(--radius); padding: 12px 14px; border-left: 4px solid var(--blau); }
.kpi.gut { border-left-color: var(--gruen); } .kpi.warn { border-left-color: var(--orange); }
.kpi .z { font-size: 1.7rem; font-weight: 700; color: var(--blau); line-height: 1.1; }
.kpi .t { font-weight: 600; } .kpi .s { font-size: .85rem; color: var(--grau); }
.verteilung { display: flex; gap: 8px; flex-wrap: wrap; }
.verteilung div { background: var(--hellblau); border-radius: 8px; padding: 6px 12px; text-align: center; min-width: 70px; }
.verteilung span { display: block; font-size: .8rem; color: var(--grau); } .verteilung b { font-size: 1.2rem; color: var(--blau); }
.mini-balken { display: inline-block; width: 140px; height: 8px; border-radius: 4px; background: var(--linie); vertical-align: middle; overflow: hidden; }
.mini-balken i { display: block; height: 100%; background: var(--blau3); } .mini-balken.fertig i { background: var(--gruen); }
.warn-txt { color: var(--orange); font-weight: 600; }
.unterreiter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.unterreiter button[data-kf], .unterreiter button[data-rff], .unterreiter button[data-kg] { border: 1px solid var(--linie2); background: var(--weiss); border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; }
.unterreiter button.aktiv { background: var(--blau); color: #fff; border-color: var(--blau); }
.liste-tab tr.klick { cursor: pointer; } .liste-tab tr.klick:hover td { background: var(--flaeche); }
.liste-tab tr.detail td { background: var(--flaeche); padding: 10px 16px; }
.d-titel { font-weight: 700; color: var(--blau); margin: 6px 0 4px; }
.offen-liste { columns: 2; font-size: .9rem; } .offen-liste div { break-inside: avoid; padding: 1px 0; }
.pruef-zeile { display: flex; gap: 10px; align-items: center; padding: 3px 0; } .pruef-zeile > span:nth-child(2) { flex: 1; }
.auswahl-liste { max-height: 260px; overflow: auto; border: 1px solid var(--linie2); border-radius: 8px; padding: 6px 10px; margin: 6px 0 10px; }
.auswahl-liste label { display: block; padding: 3px 0; }
.zwei-sp { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 14px; }
.fe-form label.klein { display: block; margin-top: 8px; }
.bed-zeile { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 6px; margin-bottom: 4px; }
.fe-tab tr.aus td { color: var(--grau2); background: #fafafa; } .fe-tab .id { color: var(--grau2); }
.modal { max-width: min(760px, 94vw); max-height: 90vh; overflow: auto; }
code.url { display: block; word-break: break-all; background: var(--flaeche); padding: 6px 10px; border-radius: 6px; margin: 6px 0; }
.bogen-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.gefahr-rand { border-color: var(--rot) !important; }
.rf-karte { border: 1px solid var(--linie2); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; background: var(--weiss); }
.rf-karte.beantwortet { border-left-color: var(--blau3); } .rf-karte.erledigt { border-left-color: var(--gruen); opacity: .85; }
.rf-kopf { margin-bottom: 6px; } .rf-kopf .status-pille { float: right; }
.rf-msg { border-radius: 8px; padding: 6px 10px; margin: 4px 0; max-width: 85%; }
.rf-msg.wir { background: var(--hellblau); } .rf-msg.sie { background: var(--eigen); margin-left: auto; }
.status-pille.beantwortet { background: #E6EEF8; color: var(--blau2); } .status-pille.erledigt { background: var(--gruen-hell); color: var(--gruen-dunkel); }
/* Teilnehmer: Rückfragen und Hinweise */
.rf-banner { border: 1px solid var(--orange); background: #FFF6EC; border-radius: var(--radius); padding: 10px 14px; margin: 10px 0 14px; }
.rf-zeile { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 4px 0; border-top: 1px solid #F3DFC9; margin-top: 4px; }
.rf-marke { border: 0; border-radius: 50%; width: 20px; height: 20px; font-weight: 700; font-size: 12px; cursor: pointer; background: var(--hellblau); color: var(--blau); margin-left: 6px; vertical-align: middle; }
.rf-marke.offen { background: var(--orange); color: #fff; } .rf-marke.neu { opacity: .35; } .rf-marke.neu:hover { opacity: 1; }
td .rf-marke { margin: 2px 0 0; }
.feld-fehler.nur-hinweis { color: #9A5A12; background: #FFF6EC; }
.unplausibel .eingabe { border-color: var(--orange); }
.blinken { animation: blinken 0.7s 3; } @keyframes blinken { 50% { background: #FFF1D6; } }
.kap-offen { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.kap-offen details { background: var(--weiss); border: 1px solid var(--linie2); border-radius: 8px; padding: 3px 10px; }
.kap-offen details[open] { flex-basis: 100%; }
.kap-offen summary { cursor: pointer; font-size: .9rem; }

/* 1.3.0 – Import, Editor, Versandplan */
.status-pille.ok { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.status-pille.info { background: #E6EEF8; color: var(--blau2); }
.status-pille.grau { background: #F1F3F7; color: var(--grau); }
.status-pille.fehler { background: #FDECEA; color: #A93226; }
.modal.breit { width: min(980px, 96vw); max-width: 96vw; }
.regel-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; padding: 6px; border: 1px solid #E3E8F0; border-radius: 8px; background: #FAFBFD; }
.regel-zeile .eingabe { width: auto; margin: 0; }
.regel-zeile [data-r-text] { flex: 1 1 14rem; }
.regel-zeile [hidden] { display: none !important; }
.fe-regeln { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #D5DCE6; }
.fe-schieb .knopf { padding: 2px 7px; min-width: 0; margin-right: 2px; }
.fe-tab tr.fe-gruppe-start > td { border-top: 2px solid #D5DCE6; }
.plan-tab td { vertical-align: middle; }
.plan-tab .eingabe { margin: 0; width: auto; }
.plan-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border: 1px solid #E3E8F0; border-radius: 10px; background: #FAFBFD; margin: 6px 0; }
.plan-zeile .eingabe { width: auto; margin: 0; }
.plan-check { min-width: 16rem; display: inline-flex; gap: 6px; align-items: center; }
.plan-status { flex: 1 1 auto; text-align: right; font-size: .82rem; color: var(--grau); }
/* Sortierbare Tabellen */
th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortierbar i { font-style: normal; font-size: .75em; margin-left: 4px; color: #9DB4D3; }
th.sortierbar.aktiv i { color: var(--blau); }
th.sortierbar:hover { color: var(--blau2); }
.status-pille { white-space: nowrap; }
/* Datenkontrolle */
.dk-modus { display: flex; gap: 0; margin: 2px 0 14px; border: 1px solid var(--linie2); border-radius: 10px; overflow: hidden; width: fit-content; }
.dk-modus button { border: 0; background: #fff; padding: 8px 16px; cursor: pointer; font: inherit; color: #444; }
.dk-modus button + button { border-left: 1px solid var(--linie2); }
.dk-modus button.aktiv { background: var(--blau); color: #fff; font-weight: 600; }
.dk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.dk-kpi { border: 1px solid var(--linie2); border-radius: 10px; padding: 10px 14px; background: #fff; display: flex; flex-direction: column; }
.dk-kpi span { font-size: .82rem; color: var(--grau); } .dk-kpi b { font-size: 1.7rem; color: var(--blau); line-height: 1.2; } .dk-kpi small { color: var(--grau); }
.dk-zwei { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .dk-zwei { grid-template-columns: 1fr; } }
.dk-st { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.dk-st.F { background: #FBE5E2; color: #A93226; } .dk-st.H { background: #FDF2DC; color: #9A5B16; } .dk-st.I { background: #F1F3F7; color: var(--grau); }
.dk-n { display: inline-block; min-width: 24px; text-align: center; font-weight: 700; border-radius: 6px; padding: 0 5px; }
.dk-n.F { background: #FBE5E2; color: #A93226; } .dk-n.H { background: #FDF2DC; color: #9A5B16; }
.dk-tab tr.offen > td { background: #F5F8FC; }
.dk-bef { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dk-bef th { text-align: left; font-size: .76rem; color: var(--grau); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--linie2); }
.dk-bef td { padding: 5px 6px; border-bottom: 1px solid #EEF2F7; vertical-align: top; }
.jw-schritte { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: jw; display: grid; gap: 10px; }
.jw-schritte li { counter-increment: jw; position: relative; padding: 12px 14px 12px 54px; border: 1px solid var(--linie2); border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.jw-schritte li::before { content: counter(jw); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 700; display: grid; place-items: center; }
.jw-schritte li.fertig::before { content: "✓"; background: var(--gruen); }
.jw-schritte li.gesperrt { opacity: .75; }
.jw-schritte li > span { font-size: .9rem; color: #374151; }
.dk-begr { margin-top: 4px; padding: 4px 8px; background: #EEF5FD; border-left: 3px solid var(--blau2); color: #1E3A5F; font-style: italic; }
/* 1.5.3: breite Tabellen im Admin scrollen innerhalb des Inhalts statt die ganze Seite zu verbreitern */
#reiter-inhalt { overflow-x: auto; }
@media (max-width: 1100px) { .tn-tab td.nowrap { white-space: normal; } .tn-tab td.nowrap .knopf { margin: 1px 0; } }

/* 2.0 – mehrere Umfragen */
.admin-titel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.umfrage-marke { font-size: .55em; font-weight: 600; padding: 3px 12px; border-radius: 999px; background: #E6EEF8; color: var(--blau2); letter-spacing: .01em; }
.umfrage-marke.frei { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.umfrage-schalter { width: auto; max-width: 16rem; margin: 0; padding: 4px 8px; font-size: .85em; }
.liste-tab tr.aus td { color: var(--grau2); }
.modal .knopf-reihe .knopf { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 700px) { .umfrage-schalter { max-width: 11rem; } }
@media (max-width: 700px) {
  #oben-rechts { left: 0; right: 0 !important; top: 0 !important; justify-content: flex-end; padding: 6px 10px; background: #fff; border-bottom: 1px solid #E5E9F0; }
  #oben-rechts > span.klein { display: none; }
  body:has(#oben-rechts):not(:has(.fb)) { padding-top: 46px; }
}

/* 2.1: Administration breiter, Reiter auf einer Zeile */
.inhalt.admin-seite { max-width: 1720px; }
.admin-seite > .reiter, .admin-seite .reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.admin-seite .reiter button { white-space: nowrap; padding: 9px 11px; }