/* Ergänzungen für Listen, Belegmaske und Ansichten (nach dem Haupt-Stil geladen) */

/* Nur für Vorleseprogramme (Überschrift ohne sichtbaren Platz) */
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Listen per Tastatur: erste Zelle ist ein echter Link/Knopf (Tab → Enter öffnet), die ganze Zeile bleibt klickbar */
.zeilen-link { display: block; color: inherit; text-decoration: none; }
a.zeilen-link:hover { text-decoration: none; }
button.zeilen-link { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.tabelle tr.klick:has(.zeilen-link:focus-visible) td { background: color-mix(in srgb, var(--text) 4%, transparent); }

/* Einträge, die jetzt Knöpfe sind (Postfach, Chatliste) – sehen aus wie vorher */
button.eintrag, button.chat-eintrag { border: 0; background: transparent; font: inherit; color: inherit; text-align: left; width: 100%; margin: 0; }
button.chat-eintrag.an { background: var(--akzent-weich); }
.liste .eintrag .haupt[role="button"] { cursor: pointer; border-radius: 8px; }
.datei-kachel:focus-visible, .ablage:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Kartentitel sind h2 (Hierarchie h1 → h2), sehen aber aus wie die bisherigen h3 */
.karten-titel { font-size: 15px; font-weight: 620; letter-spacing: -.012em; margin: 0 0 10px; line-height: 1.2; }
.karten-kopf .karten-titel { margin: 0; }
.leer .karten-titel { color: var(--text); margin-bottom: 6px; font-size: 16px; }
.projekt-gruppe h2 { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 14px; font-weight: 620; letter-spacing: -.012em; }
.board-spalte h2.kopf { letter-spacing: normal; line-height: inherit; margin: 0; }

/* Belegmaske: Titel in der Leiste ist die h1 der Seite */
.beleg-leiste h1.titel-text { font: inherit; font-weight: 650; letter-spacing: inherit; margin: 0; line-height: inherit; }
.papier .p-titel .entwurf { text-transform: uppercase; }
/* sichtbare Hilfe unter „Leistung“ (nur in der Maske – die PDF entsteht auf dem Server) */
.papier .p-feldhilfe { font-family: var(--schrift); font-size: 11px; line-height: 1.35; color: #6b6b6b; text-align: right; margin: -.5mm 0 1.2mm; }
/* ungültige Zahl: Hinweis direkt unter dem Feld statt nur als Tooltip */
.papier .feld-hinweis { font-family: var(--schrift); font-size: 11px; line-height: 1.3; color: var(--fehler, #c0392b); text-align: right; margin-top: 2px; white-space: normal; }
.papier .p-tab td:has(> .feld-hinweis), .papier .p-summen .z > span:first-child { position: relative; }
.papier .p-tab .feld-hinweis, .papier .p-summen .feld-hinweis { position: absolute; right: 0; top: calc(100% + 2px); z-index: 6; white-space: nowrap; margin: 0; padding: 3px 7px; border-radius: 6px; background: #fff; border: 1px solid color-mix(in srgb, var(--fehler, #c0392b) 35%, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.papier .p-summen .feld-hinweis { left: 0; right: auto; }
/* Knopftext je nach Breite: „Zahlung erfassen“ breit, „Zahlung“ am Handy */
.beleg-leiste .wort-kurz { display: none; }
@media (max-width: 700px) {
  .beleg-leiste .wort-lang { display: none; }
  .beleg-leiste .wort-kurz { display: inline; }
  /* Status gehört auch am Handy in die Leiste; der Mahn-Hinweis passt dort nicht hin */
  .beleg-leiste .titel a.chip { display: none !important; }
  .beleg-leiste h1.titel-text { min-width: 0; position: relative; }   /* hält die versteckte Belegart (absolut) im Titel — sonst zählte sie als waagrechter Überlauf */
  .beleg-leiste .titel-art { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* nur Nummer zeigen, Vorleser hören die Belegart */
  .papier .p-feldhilfe { text-align: left; font-size: 12.5px; margin: 0 0 6px; }
  .papier .p-tab .feld-hinweis { position: static; white-space: normal; border: 0; box-shadow: none; padding: 2px 0 0; background: none; font-size: 12.5px; }
}

/* Chat: Titel ist die h1 */
h1.chat-titel { font-size: inherit; font-weight: 650; letter-spacing: inherit; line-height: 1.3; margin: 0; }

/* Einstellungen: Speichern-Leiste erst zeigen, wenn etwas geändert wurde */
.speicher-leiste[data-geaendert="nein"] { display: none; }

/* Anleitung: Technik-Teil eingeklappt */
details.technik { margin-top: 22px; }
details.technik > summary { cursor: pointer; }
details.technik > summary h2 { font-size: 17px; display: inline; margin: 0 !important; vertical-align: middle; }

/* ---- Integration (Schlussrechnung, § 35a, Sicherungen, Importe) ---- */
/* Abzugszeilen der Schlussrechnung: Text vom Server darf umbrechen, Betrag bleibt oben rechts */
.papier .p-summen .z.abzug { align-items: flex-start; gap: 3mm; padding: .4mm 0; }
.papier .p-summen .z.abzug > span:first-child { flex: 1; min-width: 0; line-height: 4mm; }
.papier .p-summen .z.abzug > span.zahlen { white-space: nowrap; line-height: 4mm; }
.papier .p-summen .z.abzug.nur-info > span:first-child { color: #666; }
.papier .p-summen .z.abzug a:hover { text-decoration: underline !important; }
/* § 35a: Hinweis wie in der PDF (klein, volle Breite); Tipps nur in der Maske */
.papier .p-hinweis-35a { font-size: 8.6pt; line-height: 1.4; color: #333; margin-top: 3mm; }
.papier .maske-tipp, .papier .lohn-hinweis { display: block; font-family: var(--schrift); font-size: 11px; line-height: 1.35; color: #6b6b6b; }   /* 5,3:1 auf Weiß */
.papier button.lohn-hinweis { border: 0; background: none; padding: 0; margin: .5mm 0 0; cursor: pointer; text-align: left; text-decoration: underline dotted; text-underline-offset: 2px; }   /* ist ein Knopf, soll auch so aussehen */
.papier button.lohn-hinweis:hover, .papier button.lohn-hinweis:focus-visible { color: var(--text); text-decoration: underline; }
/* Hinweis über dem Papier (z. B. Abschlag in Schlussrechnung aufgegangen) – nicht Teil des Belegs */
.beleg-hinweis-oben { max-width: calc(210mm + 32px); margin: 18px auto -14px; padding: 0 16px; }
.beleg-hinweis-oben:empty { display: none; }
.beleg-hinweis-oben .hinweis-box { margin: 0; }
.beleg-hinweis-oben a { font-weight: 600; }
/* Guthaben nach Storno: Text und darunter die beiden Wege (übertragen / erstatten) */
.guthaben-box .knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.guthaben-box .knopf-reihe .knopf { font-weight: 600; }
.guthaben-box .g-kurz { display: none; }
@media (max-width: 860px) { .guthaben-box .g-lang { display: none; } .guthaben-box .g-kurz { display: inline; } }
@media (max-width: 860px) {
  .beleg-hinweis-oben { margin: 10px 0 0; padding: 0 12px; }
  .papier .maske-tipp, .papier .lohn-hinweis { font-size: 12.5px; }
  .papier .p-summen .z.abzug { padding: 5px 0 2px; }
  .papier .p-summen .z.abzug > span:first-child, .papier .p-summen .z.abzug > span.zahlen { line-height: 1.4; }
  .papier .p-hinweis-35a { font-size: 13px; }
}

/* Projekt ohne Firmenzahlen (Mitarbeiter/in): zwei Kennzahlen auch am Handy nebeneinander */
@media (max-width: 860px) { .raster.projekt-zahlen.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sicherungen: Liste mit Download je Tag */
.sicherungen-liste { margin-top: 4px; }
.sicherungen-liste .eintrag { align-items: center; }
details.sicherungen-mehr { margin-top: 8px; }
details.sicherungen-mehr > summary { cursor: pointer; font-size: 13.5px; padding: 4px 0; }

/* Kunden: Liste gekürzt */
.liste-begrenzt { margin: 4px 8px 10px; }

/* Leistungen aus Excel: Prüfergebnis im Dialog */
.import-ergebnis:empty { display: none; }
.import-ergebnis { margin-top: 12px; }
.import-ergebnis.veraltet { opacity: .45; }
.import-zusammenfassung { margin: 0 0 8px; font-size: 14px; }
ul.import-fehler { margin: 0 0 10px; padding: 10px 12px 10px 28px; border-radius: 10px; background: var(--fehler-weich); font-size: 13.5px; max-height: 180px; overflow: auto; }
ul.import-fehler li + li { margin-top: 4px; }
.import-vorschau, .import-hinweise { overflow: auto; max-height: 240px; border: 1px solid var(--linie); border-radius: 10px; }
.import-hinweise { max-height: 50vh; }

/* ---- Wissen: „Was dein Agent weiß“ (public/js/wissen.js) ---- */
.wissen-seite { max-width: 980px; }
.wissen-lauf { margin-bottom: 16px; }
.wissen-lauf-kopf { display: flex; gap: 12px; align-items: flex-start; }
.wissen-lauf-kopf .karten-titel { margin-bottom: 4px; }
.wissen-lauf-kopf p { margin: 0 0 12px; max-width: 68ch; }
.wissen-symbol { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--karte-2); border: 1px solid var(--linie); }
.wissen-leer p { margin: 4px 0 12px; max-width: 64ch; }
.wissen-aufnahmen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.wissen-aufnahme { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linie); background: var(--karte-2); cursor: pointer; }
.wissen-aufnahme input { margin-top: 3px; flex: none; }
.wissen-aufnahme span { display: flex; flex-direction: column; min-width: 0; }
.wissen-aufnahme b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wissen-aufnahme small { color: var(--leise); font-size: 12.5px; }
.wissen-schaetzung { margin: 0 0 10px; }
.wissen-letzter { padding: 10px 12px; border-radius: 12px; background: var(--karte-2); margin-bottom: 10px; font-size: 14px; }
.wissen-letzter.fehler { background: var(--fehler-weich); }
.wissen-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.wissen-fortschritt { display: grid; gap: 8px; margin: 4px 0 12px; }
.wissen-fortschritt-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; align-items: center; }
.wissen-fortschritt-zeile span { min-width: 0; }
.wissen-neu { display: flex; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 16px; border-radius: 16px; background: var(--akzent-weich, var(--karte-2)); border: 1px solid var(--linie); }
.wissen-neu > div { flex: 1; min-width: 0; }
.wissen-reiter { margin-bottom: 14px; }
.wissen-reiter .reiter button { gap: 6px; }
.wissen-zahl { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11.5px; font-weight: 650; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); }
.wissen-zahl.neu { background: var(--text); color: var(--hinter, #fff); }
.wissen-bereich-kopf { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin: 0 2px 12px; flex-wrap: wrap; }
.wissen-bereich-kopf p { margin: 0; flex: 1 1 320px; }
.wissen-liste { display: grid; gap: 12px; }
.wissen-liste > *, .wissen-eintrag > * { min-width: 0; }   /* lange Fundstellen (Mail-Betreff) sprengen am Handy nicht die Breite */
.wissen-eintrag { display: grid; gap: 8px; }
.wissen-eintrag.gestrichen { opacity: .55; }
.wissen-eintrag.gestrichen h3 { text-decoration: line-through; }
.wissen-eintrag-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wissen-eintrag-kopf h3 { margin: 0; font-size: 15.5px; font-weight: 640; letter-spacing: -.01em; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wissen-status.vorgeschlagen, .wissen-status.offen { background: var(--text); color: var(--hinter, #fff); border-color: transparent; }
.wissen-status.aktiv, .wissen-status.bestaetigt, .wissen-status.beantwortet { background: var(--ok-weich); color: var(--ok); border-color: transparent; }
.wissen-text { margin: 0; }
.wissen-felder { display: grid; gap: 6px; }
.wissen-feld { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.wissen-feld > span { color: var(--leise); font-size: 13px; padding-top: 1px; }
.wissen-feld code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--karte-2); border: 1px solid var(--linie); overflow-wrap: anywhere; }
.wissen-feld q { quotes: "„" "“"; color: var(--text-2); white-space: pre-line; }
.wissen-merkmale { display: flex; gap: 6px; flex-wrap: wrap; }
.wissen-schritte { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.wissen-positionen { overflow-x: auto; }
.wissen-positionen table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.wissen-positionen td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.wissen-positionen td.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wissen-quellen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wissen-quelle { display: inline-flex; gap: 5px; align-items: center; height: 26px; padding: 0 9px; border-radius: 13px; font: inherit; font-size: 12.5px; color: var(--text-2); background: var(--karte-2); border: 1px solid var(--linie); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.wissen-quelle:hover, button.wissen-quelle:focus-visible { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.wissen-quelle.still { cursor: default; }
.wissen-aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 2px; }
.wissen-verlauf { margin-left: auto; font-size: 12.5px; color: var(--leise); }
.wissen-verlauf summary { cursor: pointer; }
.wissen-verlauf ol { margin: 6px 0 0; padding-left: 18px; }
.wissen-antwort { display: flex; gap: 8px; align-items: flex-end; }
.wissen-antwort textarea { flex: 1; min-height: 44px; resize: vertical; }
.wissen-leer-bereich p { margin: 0; }
.wissen-gestrichen-schalter { justify-self: start; }
.wissen-fundstelle { display: grid; gap: 12px; }
.wissen-fund-bild img { width: 100%; max-height: 58vh; object-fit: contain; border-radius: 12px; border: 1px solid var(--linie); background: #f3f3f3; display: block; }
.wissen-fund-leiste { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.wissen-zitat { margin: 0; padding: 8px 12px; border-left: 3px solid var(--text); background: var(--karte-2); border-radius: 0 10px 10px 0; font-size: 14px; }
.wissen-gesprochen { display: grid; gap: 4px; max-height: 26vh; overflow: auto; font-size: 14px; }
.wissen-gesprochen p { margin: 0; padding: 2px 6px; border-radius: 6px; }
.wissen-gesprochen p.an { background: var(--akzent-weich, var(--karte-2)); }
@media (max-width: 700px) {
  .wissen-feld { grid-template-columns: 1fr; gap: 2px; }
  .wissen-aufnahmen { grid-template-columns: 1fr; }
  .wissen-knoepfe { justify-content: stretch; }
  .wissen-knoepfe .knopf { flex: 1 1 auto; justify-content: center; }
  .wissen-antwort { flex-direction: column; align-items: stretch; }
  .wissen-aktionen .knopf { flex: 1 1 auto; justify-content: center; }
  .wissen-verlauf { margin-left: 0; width: 100%; }
  .wissen-neu { flex-wrap: wrap; }
  .wissen-lauf-kopf .wissen-symbol { display: none; }
}
@media (max-width: 700px) {
  .wissen-neu > div { flex: 1 1 calc(100% - 34px); }
  .wissen-neu > .knopf { width: 100%; justify-content: center; }
  .wissen-positionen td.leise.klein { display: none; }   /* Fundstelle der Position: am Handy zu eng, steht unter „Quelle“ */
}