/*
  app.css: Regeln einzelner Seiten und Bereiche. Grundbausteine stehen in basis.css, Tabellen in
  tabellen.css (T-1.192, E-109) -- neue Regeln dort, wo sie hingehoeren.
*/

/* --- Extraktionstest (T-1.0). Faellt mit der Testseite wieder weg. --- */

.breit { max-width: 96rem; margin: 1.5rem auto; padding: 0 1.5rem; }
.breit .karte { margin: 0 0 1.5rem; max-width: none; }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 70rem) { .split { grid-template-columns: 1fr; } }
.spalte { min-width: 0; }
.vorschau {
    width: 100%;
    height: 80vh;
    border: 1px solid var(--linie);
    border-radius: 10px;
    background: var(--flaeche);
}
pre.ocr {
    margin-top: 0.75rem;
    padding: 0.75rem;
    max-height: 30rem;
    overflow: auto;
    background: var(--grund);
    border: 1px solid var(--linie);
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Firmenauswahl (T-1.5b): eine Kachel je Firma, die zugleich der Knopf ist. */
.liste-kacheln {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.kachel {
    width: 100%;
    padding: 0.9rem 1rem;
    text-align: left;
    background: var(--flaeche);
    color: inherit;
    border: 1px solid var(--linie);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.kachel:hover { border-color: var(--akzent); }
.kachel.aktiv { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.kachel-name { font-weight: 600; }
.kachel-zusatz { font-size: 0.8rem; color: var(--gedaempft); }
/* Kunden-Dashboard (T-1.60): gesperrte Firma ohne Link, Verwaltungswege unter der Kachel */
.kachel-gesperrt { cursor: default; color: var(--gedaempft); background: transparent; }
.kachel-gesperrt:hover { border-color: var(--linie); }
.kachel-wege { margin: 0.3rem 0 0; font-size: 0.85rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.feldfehler { display: block; margin-top: 0.25rem; color: var(--fehler); font-size: 0.85rem; }
.befreiung { padding: 0.15rem 0; border-bottom: 1px dotted var(--linie); }
.befreiung label.wahl { margin-top: 0.2rem; color: inherit; flex-wrap: wrap; }
.befreiung label.wahl small { margin-left: 0.3rem; }
.befreiung details.erklaerung { margin: 0 0 0.3rem 1.6rem; font-size: 0.85rem; }
.befreiung details.erklaerung summary { cursor: pointer; color: var(--gedaempft); }
.befreiung details.erklaerung p { margin: 0.25rem 0; }
.umsatzsteuer .anteil > p.gedaempft { font-size: 0.85rem; margin: 0.6rem 0 0; }
.umsatzsteuer .anteil .zeile { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.umsatzsteuer .anteil .zeile label { flex: 1 1 8rem; margin-top: 0.4rem; }
/* Wege und Arbeitskontext in der Kopfleiste (T-1.8) */
.wege { display: flex; gap: 1rem; margin-left: 1.5rem; flex: 1; }
.wege a { color: var(--gedaempft); text-decoration: none; font-size: 0.92rem; }
.wege a:hover { color: var(--akzent); }
.kontext { font-size: 0.85rem; }
.kontext a { color: var(--akzent); text-decoration: none; }
.kontext a:hover { text-decoration: underline; }
.filter {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--grund);
    border: 1px solid var(--linie);
    border-radius: 8px;
}
/* Kopfzeile mit dem Knopf rechts oben (T-1.43), darunter die Felder in Spaltenfolge */
.filter-kopf { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.filter-kopf button { margin: 0; padding: 0.45rem 0.9rem; font-size: 0.92rem; }
.filter-kopf a { font-size: 0.9rem; }
.filter-felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.filter label { margin: 0; flex: 1 1 9rem; min-width: 8rem; }
.filter input, .filter select { margin-top: 0.25rem; padding: 0.4rem 0.55rem; font-size: 0.92rem; }
.blaettern { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; font-size: 0.9rem; color: var(--gedaempft); }
.split .karte { margin: 0; }
.beleg-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 70rem) { .beleg-detail { grid-template-columns: 1fr; } }
.beleg-detail .vorschau { height: 75vh; }
.beleg-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.beleg-form fieldset:disabled input, .beleg-form fieldset:disabled select { background: var(--grund); color: var(--gedaempft); }
.felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem 0.75rem; }
.felder label { margin-top: 0.4rem; }
.felder input, .felder select { padding: 0.4rem 0.55rem; font-size: 0.92rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; align-items: center; margin-top: 1rem; }
/* Hauptknoepfe der Belegzeile (T-1.209): durch eine Linie von den Positions-Knoepfen darueber getrennt,
   etwas kleiner; Rechnungskorrektur als schlichter Textknopf rechts */
.haupt-knoepfe { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--linie); gap: 0.5rem; }
.haupt-knoepfe button:not(.schlicht) { padding: 0.4rem 0.95rem; font-size: 0.9rem; }
.haupt-knoepfe form.inline { display: contents; }
.knoepfe button.knopf-korrektur { margin-left: auto; padding: 0.3rem 0.4rem; font-size: 0.88rem; color: var(--warnung); }
.knoepfe button.knopf-korrektur:hover { text-decoration: underline; }
.knoepfe button { margin: 0; }
/* Felder mit Platz: Lieferant und IBAN ueber zwei Spalten; je Position die
   Bezeichnung in voller Breite, die Werte darunter (Sitzung 12). */
.felder label.breit2, .felder div.breit2 { grid-column: span 2; }
.positionen { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.position { padding: 0.5rem 0.75rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); }
.position > label { margin-top: 0; }
.position .werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.position .werte label { margin-top: 0.4rem; }
.position .werte input { text-align: right; padding: 0.35rem 0.5rem; font-size: 0.9rem; }
/* E-Mail beim Lieferanten (T-1.139): nicht groesser als die Nachbarfelder, etwas niedriger */
.felder input[type="email"] { font-size: 0.88rem; padding: 0.3rem 0.5rem; }
.felder label.breit3 { grid-column: span 3; }
.felder label small { margin-left: 0.4rem; font-size: 0.75rem; }
/* Auswahlleiste ueber der Liste (Sitzung 12) */
.auswahlleiste { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 0.6rem 1rem; background: var(--ton-akzent); border: 1px solid var(--linie); border-radius: 8px; }
.auswahlleiste .auswahl-aktionen { margin-left: auto; display: flex; gap: 0.5rem; }
.auswahlleiste button { margin: 0; padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.auswahlleiste button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Das hidden-Attribut muss gegen display:flex gewinnen -- sonst steht die
   Leiste immer da (Sitzung 12, Befund des Auftraggebers). */
.auswahlleiste[hidden] { display: none; }
.felder label small { font-size: 0.75rem; }
/* Der Pfad ueber einer Box */
.pfad { font-size: 0.85rem; color: var(--gedaempft); margin: 0 0 0.5rem; }
/* Pfad-Links ohne Klasse tragen die Akzentfarbe (basis.css, "a:not([class])", Sitzung 23) -- grau bleiben
   nur Links mit eigener Klasse; so war es auch vor der Aufteilung (T-1.192) */
.pfad a { text-decoration: none; }
.pfad a[class] { color: var(--gedaempft); }
.pfad a:hover { color: var(--akzent); }
.pfad .seite { color: var(--text); font-weight: 600; }
.breit > .pfad { margin-top: 0.25rem; }
main.karte > .pfad { margin-top: -0.5rem; }
/*
  Reiterleiste der Arbeitsfenster (T-1.46): sitzt zwischen Pfad und Box; der
  aktive Reiter geht in die Box ueber. In einer main.karte-Seite steht sie
  oben in der Box, mit der Kante nach aussen gezogen.
*/
.reiter { display: flex; align-items: flex-end; gap: 0.25rem; margin: 0.4rem 0 0; padding: 0 0.5rem; }
.reiter .reiter-tab, .reiter .reiter-plus {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.9rem; font-size: 0.9rem; color: var(--gedaempft); text-decoration: none;
    background: var(--grund); border: 1px solid var(--linie); border-bottom: none;
    border-radius: 8px 8px 0 0; position: relative; top: 1px;
}
.reiter .reiter-tab:hover, .reiter .reiter-plus:hover { color: var(--text); }
.reiter .reiter-tab.aktiv { background: var(--flaeche); color: var(--text); font-weight: 600; }
.reiter .reiter-plus { padding: 0.35rem 0.7rem; font-weight: 600; }
.reiter .schliessen {
    margin: 0; padding: 0 0.2rem; border: none; background: none; color: var(--gedaempft);
    font-size: 1rem; line-height: 1; cursor: pointer;
}
.reiter .schliessen:hover { color: var(--fehler); }
.breit > .reiter + .karte { border-top-left-radius: 0; }
main.karte > .reiter { margin: 0 -2rem 1.25rem; padding: 0 1.5rem; border-bottom: 1px solid var(--linie); }
main.karte > .reiter .reiter-tab, main.karte > .reiter .reiter-plus { top: 1px; }
/* Die Box waechst mit den offenen Reitern (Melissa, Sitzung 20): fit-content nimmt die Breite der
   Leiste, der Text darunter bleibt bei seinen 42 rem, damit er nicht die Box aufzieht. */
main.karte:has(> .reiter) { width: fit-content; min-width: min(46rem, 100%); max-width: none; box-sizing: border-box; }
main.karte:has(> .reiter) > :not(.reiter) { max-width: 42rem; }
main.karte:has(> .reiter) > .reiter .reiter-tab { white-space: nowrap; }
/* Die zwei Tafeln rechts neben dem Beleg (Sitzung 13): Beleg und Lieferant */
.tafelwahl { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--linie); }
.tafel-knopf {
    margin: 0; padding: 0.35rem 0.9rem; font-size: 0.9rem; color: var(--gedaempft);
    background: var(--grund); border: 1px solid var(--linie); border-bottom: none;
    border-radius: 8px 8px 0 0; cursor: pointer; position: relative; top: 1px;
}
.tafel-knopf.aktiv { background: var(--flaeche); color: var(--text); font-weight: 600; }
.tafel-knopf .marke { display: inline-block; min-width: 1.1rem; margin-left: 0.3rem; padding: 0 0.3rem; border-radius: 4px; background: var(--ton-warnung); color: var(--warnung); font-size: 0.8rem; text-align: center; }
.tafel-knopf .marke.ok { background: var(--ton-erfolg); color: var(--erfolg); }
.tafel[hidden] { display: none; }
.felder label.mitknopf .feldzeile { display: flex; gap: 0.35rem; align-items: center; }
.felder label.mitknopf .feldzeile input { flex: 1; }
.felder .plus { margin: 0.25rem 0 0; padding: 0.3rem 0.6rem; font-weight: 600; line-height: 1; }
.tafel form.umhaengen { display: flex; align-items: flex-end; gap: 0.75rem; margin-top: 1rem; }
.tafel form.umhaengen label { margin: 0; flex: 1; }
.tafel form.umhaengen button { margin: 0; padding: 0.45rem 0.9rem; }
/* Lieferantenseite (T-1.15c): Formular links, Uebersicht rechts */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); gap: 2rem; align-items: start; }
.zweispaltig aside { padding: 0.75rem 1rem; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; }
.zweispaltig aside h3 { margin-top: 0; }
.felder textarea { width: 100%; padding: 0.4rem 0.55rem; font: inherit; font-size: 0.92rem; }
@media (max-width: 60rem) { .zweispaltig { grid-template-columns: 1fr; } }
.felder h3 { margin: 0.9rem 0 0; font-size: 0.9rem; }
.kontakt-neu { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; }
.vorformatiert { white-space: pre-wrap; }
ul.baum { list-style: none; padding: 0; margin: 0.75rem 0 0; }
ul.baum li.ast { margin-top: 0.6rem; font-weight: 600; color: var(--gedaempft); }
ul.baum li.ast::before { content: "\25B8 "; }
ul.baum li.blatt { padding: 0.15rem 0 0.15rem 1.25rem; display: flex; gap: 0.6rem; align-items: center; }
.spaltenliste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.75rem; margin: 0.25rem 0 0.75rem; }
.spaltenliste label.wahl { margin: 0; font-size: 0.9rem; }
.baum .posten { margin: 0.35rem 0; }
/* Unterposten deutlich eingerueckt, mit Fuehrungslinie (Sitzung 18) */
.baum .stufe2 { margin-left: 2rem; border-left: 2px solid var(--linie); padding-left: 0.5rem; }
.baum .stufe3 { margin-left: 4.5rem; border-left: 2px solid var(--linie); padding-left: 0.5rem; }
.baum .stufe4 { margin-left: 7rem; border-left: 2px solid var(--linie); padding-left: 0.5rem; }
.posten-kopf { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid transparent; }
.posten-kopf.ablage { background: var(--grund); border-color: var(--linie); }
.posten-kopf.summe { color: var(--gedaempft); font-style: italic; }
.posten-nummer { font-weight: 600; min-width: 4rem; }
.posten.ziel > .posten-kopf { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
form.zuordnung select { max-width: 22rem; font-size: 0.85rem; }
.posten-pflege { font-size: 0.85rem; }
.posten-pflege summary { cursor: pointer; color: var(--akzent); }
.posten-pflege form { margin-top: 0.3rem; }
/* Kacheln des Firmendashboards ziehen (T-1.66): Ziel links oder rechts, wie bei den Spalten. */
.kacheln-ziehbar > li { cursor: grab; }
.kacheln-ziehbar > li.wird-gezogen { opacity: 0.4; }
.kacheln-ziehbar > li.ziel-links > .kachel { box-shadow: inset 3px 0 0 var(--akzent, #2f5bd6); }
.kacheln-ziehbar > li.ziel-rechts > .kachel { box-shadow: inset -3px 0 0 var(--akzent, #2f5bd6); }
/* Stammdatenblatt des Lieferanten (T-1.68): Zahlung in vier Spalten, UID mit
   dem Kaestchen darunter in einer Zelle. */
.felder.felder4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.felder h3.breit4 { grid-column: span 4; }
.felder .feldgruppe { display: flex; flex-direction: column; }
.felder .feldgruppe label.wahl { margin-top: 0.3rem; font-size: 0.85rem; }
.zweispaltig aside .aside-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zweispaltig aside .aside-knoepfe button { margin: 0; padding: 0.35rem 0.7rem; font-size: 0.88rem; }
/* Baukasten fuer Text-Schemata auf dem Reiter Buchhaltung (T-1.56). */
.schema { margin-top: 0.4rem; }
.schema-teile { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.3rem; }
.schema-zeile { display: flex; gap: 0.25rem; align-items: center; padding: 0.2rem 0.35rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); }
.schema-zeile select { margin: 0; padding: 0.25rem 0.4rem; font-size: 0.88rem; }
.schema-zeile button.schlicht { padding: 0 0.3rem; line-height: 1; }
.schema-teile .plus { margin: 0; padding: 0.3rem 0.6rem; font-weight: 600; line-height: 1; }
.schema-vorschau { margin: 0.4rem 0 0; font-size: 0.9rem; }
.schema-vorschau code { padding: 0.1rem 0.4rem; background: var(--grund); border-radius: 4px; }
/* Kontowahl (Sitzung 16): Suchfeld mit aufklappender Trefferliste, "enthaelt" statt Dropdown. */
.kontowahl { position: relative; display: block; }
.kontowahl input[type="text"] { width: 100%; }
.kontowahl-liste { position: absolute; z-index: 20; left: 0; right: 0; max-height: 14rem; overflow-y: auto; margin: 0; padding: 0.2rem 0;
    list-style: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.kontowahl-liste li { padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.kontowahl-liste li:hover, .kontowahl-liste li.markiert { background: var(--grund); color: var(--akzent); }
.konto-kurz { display: block; white-space: nowrap; }
.kontierung h3 { margin-top: 1rem; }
.kontierung-zeile { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.kontierung-zeile .kontowahl { flex: 1; min-width: 14rem; }
.kontierung-zeile button { margin: 0; }
.klapp-leiste { margin: 0.75rem 0 -0.5rem; text-align: right; }
/* Gliederungsbaum: weniger Hoehe, Klick auf den Posten klappt ein (Sitzung 18). */
.baum.klappbar .posten { margin-top: 0.15rem; margin-bottom: 0.15rem; }
   /* nicht "margin" -- das nahm den Unterposten die Einrueckung (T-1.83) */
.baum.klappbar .posten-kopf { padding: 0.15rem 0.5rem; cursor: pointer; user-select: none; font-size: 0.92rem; }
.baum.klappbar .posten-kopf .pfeil { display: inline-block; width: 1em; transition: transform 0.15s; color: var(--gedaempft); }
.baum.klappbar .posten:not(.eingeklappt) > .posten-kopf .pfeil { transform: rotate(90deg); }
.baum.klappbar form.zuordnung select { padding: 0.15rem 0.4rem; font-size: 0.82rem; }
#bereiche { scroll-margin-top: 0.5rem; }
/* Sprungleiste (T-1.85): faehrt am rechten Rand mit, sobald man gescrollt hat -- nach oben,
   zu den Reitern bzw. Kontenklassen. */
.sprungleiste { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.2rem; z-index: 20;
                background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 0.4rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                opacity: 0; pointer-events: none; transition: opacity 0.15s; font-size: 0.82rem; }
.sprungleiste.sichtbar { opacity: 1; pointer-events: auto; }
.sprungleiste a, .sprungleiste button { display: block; text-align: left; padding: 0.15rem 0.5rem; border: none; background: none; color: var(--akzent); cursor: pointer; text-decoration: none; font: inherit; border-radius: 4px; }
.sprungleiste a:hover, .sprungleiste button:hover { background: var(--grund); }
.sprungleiste .oben { font-weight: 600; border-bottom: 1px solid var(--linie); margin-bottom: 0.2rem; padding-bottom: 0.3rem; }
/* Leiste "Markierte -> Posten" in der Gliederung (T-1.87): unten mitscrollend, nur bei Markierung. */
.markierte-leiste { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 21; display: flex; gap: 0.6rem; align-items: center;
                    background: var(--flaeche); border: 1px solid var(--akzent); border-radius: 8px; padding: 0.5rem 0.8rem; box-shadow: 0 2px 10px rgba(0,0,0,0.12); font-size: 0.9rem; }
.markierte-leiste select { max-width: 24rem; font-size: 0.85rem; }
.nummer-form { display: inline-flex; gap: 0.3rem; align-items: center; margin-left: 0.5rem; }
.nummer-form input { width: 7rem; padding: 0.2rem 0.4rem; font-size: 0.9rem; }
/* Buchungsblock entschlackt (T-1.88): kein Rahmen um das Fieldset, kleine Knoepfe in einer Zeile,
   kompakte Kontowahl; beide Tafeln (Beleg mit Buchung, Lieferant) fuellen dieselbe Spalte. */
.kontierung fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.kontierung-zeile { gap: 0.4rem; }
.kontierung-zeile .kontowahl { flex: 0 1 16rem; min-width: 11rem; }
.kontierung-zeile .kontowahl input[type="text"] { padding: 0.3rem 0.5rem; font-size: 0.88rem; }
.kontierung-zeile button, .meldung.vorschlag button { margin: 0; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.kontierung-zeile button.zweitrangig { border-width: 1px; }
.beleg-detail .spalte .tafel { width: 100%; box-sizing: border-box; }
.beleg-detail .tafel .felder input, .beleg-detail .tafel .felder select { max-width: 100%; box-sizing: border-box; }
.kontowahl-liste li.zuletzt::after { content: " · zuletzt"; color: var(--gedaempft); font-size: 0.75rem; }
/* Reiter Beleg in drei Bloecken (E-90): zweispaltige Datentabellen, die Datei links klebt beim
   Scrollen, damit sich rechts und links abgleichen lassen. */
.beleg-detail .spalte:first-child { position: sticky; top: 0.5rem; align-self: start; }
.beleg-detail .vorschau { height: calc(100vh - 2rem); }
.beleg-form h3 { margin: 0.75rem 0 0.25rem; }
/* Gliederung (Sitzung 18): Umgliedern-Leiste fest unter der Schema-Auswahl, Suche darunter,
   Sprungziel aus der Suche kurz hervorgehoben. */
.umgliedern-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; padding: 0.4rem 0.6rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); font-size: 0.88rem; }
.umgliedern-leiste select { max-width: 22rem; font-size: 0.85rem; margin: 0; }
.umgliedern-leiste button { margin: 0; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.umgliedern-leiste button[disabled] { opacity: 0.5; cursor: default; }
.suche-leiste { display: flex; gap: 0.4rem; align-items: center; margin: 0.25rem 0 0.75rem; }
.suche-leiste input[type="search"] { flex: 0 1 22rem; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.88rem; }
.suche-leiste button { margin: 0; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
/* Durchsicht Sitzung 18 zur Belegzeile: rechte Spalte schmaler und skalierend, schmale Datums-
   felder, Werte rechtsbuendig mit EUR, Ueberschriften mit Luft, Lieferant als Akkordeon. */
.beleg-detail { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.beleg-detail .spalte { min-width: 0; }
.beleg-detail .spalte h3 { margin: 1.4rem 0 0.35rem; }
.beleg-detail .spalte h3:first-of-type { margin-top: 0.5rem; }
.klapp-leiste { display: flex; gap: 0.3rem; align-items: center; justify-content: flex-end; }
.klapp-leiste button.schlicht[data-ebene] { padding: 0.1rem 0.45rem; border: 1px solid var(--linie); border-radius: 4px; }
.beleg-detail .spalte .tafel, .beleg-detail .spalte form, .beleg-detail .spalte details { max-width: 100%; box-sizing: border-box; }
.beleg-detail .spalte .kontowahl-liste { max-width: 100%; }
.klapp-leiste { margin: 0.5rem 0 0.6rem; }
/* Die Datei folgt per Skript (beleg-zeile.js); sticky greift in der scrollbaren Liste nicht */
.beleg-detail .spalte:first-child { position: static; will-change: transform; }
/* Gliederung (Durchsicht 3, Sitzung 19): Schema-Leiste statt Seitenblock, Ueberschrift immer neben der
   Nummer, das "bearbeiten"-Klappfeld ohne den allgemeinen details-Abstand (der schob im eigenen Schema
   jede Ueberschrift 1,5 rem nach unten). */
.schema-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.5rem 0; padding: 0.5rem 0.75rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); font-size: 0.9rem; }
.schema-leiste label { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; }
.schema-leiste select { margin: 0; padding: 0.25rem 0.4rem; font-size: 0.9rem; }
.schema-leiste button { margin: 0; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.schema-leiste details.schema-mehr { margin: 0; flex-basis: 100%; }
.schema-leiste details.schema-mehr summary { font-size: 0.88rem; }
.schema-leiste form.zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.2rem; }
.schema-leiste form.zeile input[type="text"] { width: auto; flex: 1 1 14rem; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.9rem; }
.schema-leiste form.zeile input.kurz { flex: 0 1 9rem; }
.schema-leiste form.zeile select { max-width: 22rem; }
.schema-leiste form.zeile .gedaempft { flex-basis: 100%; font-size: 0.85rem; }
.posten-kopf { flex-wrap: nowrap; }
.posten-kopf .posten-name { flex: 1 1 auto; min-width: 0; }
.posten-kopf .posten-nummer, .posten-kopf .gedaempft, .posten-kopf .pfeil, .posten-kopf .posten-pflege { flex: 0 0 auto; white-space: nowrap; }
.posten-kopf details.posten-pflege { margin: 0; }
.posten-kopf details.posten-pflege[open] { white-space: normal; }
.beleg-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
ul.meldungen { list-style: none; margin: 1rem 0 0; padding: 0; }
ul.meldungen li { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: baseline; padding: 0.55rem 0.75rem; border: 1px solid var(--linie); border-radius: 6px; margin-bottom: 0.5rem; font-size: 0.92rem; }
ul.meldungen li.ungelesen { border-left: 4px solid var(--akzent); background: var(--ton-akzent); }
ul.meldungen li.fehler.ungelesen { border-left-color: var(--fehler); background: var(--ton-fehler); }
ul.meldungen li.gelesen { color: var(--gedaempft); }
ul.meldungen .zeit { font-size: 0.82rem; color: var(--gedaempft); white-space: nowrap; }
ul.meldungen .art { font-weight: 600; }
ul.meldungen li.fehler .art { color: var(--fehler); }
ul.meldungen .text { flex: 1 1 20rem; }
ul.meldungen li button.schlicht { padding: 0 0.3rem; font-size: 0.85rem; }
.kurse-liste { max-height: 24rem; overflow-y: auto; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); }
.suche-leiste label.inline-label { display: flex; align-items: center; gap: 0.3rem; margin: 0; font-size: 0.85rem; }
.suche-leiste input.datum, .suche-leiste input.ganzkurz { width: auto; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.88rem; }
.kurstabellen-unten { margin-top: 1.5rem; }
.kurstabellen-unten form.zuordnung select { margin: 0; padding: 0.25rem 0.4rem; font-size: 0.88rem; max-width: 20rem; }
.suche-leiste label.wahl { margin: 0 0 0 0.5rem; font-size: 0.85rem; white-space: nowrap; }
/* EUR-Wert als eigene Zeile unter dem Betrag (Durchsicht: er lief sonst in die Satz-Spalte) */
.eur-wert[hidden] { display: none !important; }
   /* sonst schlaegt display:block das hidden-Attribut -- EUR stand doppelt (Sitzung 22) */
.eur-wert { display: inline; color: var(--gedaempft); font-size: 0.78rem; margin-left: 0.3rem; white-space: nowrap; }
/* Auswertungen (E-92): Schalter, Gliederung zweispaltig, Posten nach Stufe eingerueckt */
.suche-leiste .schalter { display: flex; gap: 0.8rem; align-items: center; }
.suche-leiste .schalter label.wahl { margin: 0; font-size: 0.88rem; white-space: nowrap; }
.gliederung-auswertung { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1.5rem; align-items: start; }
.gliederung-auswertung section h3 { margin-top: 0.5rem; }
/* Filter "nicht" (Sitzung 20): Haekchen rechts neben dem Feld, dreht die Bedingung um */
.filter-felder .feld-nicht { display: flex; align-items: center; gap: 0.35rem; }
.filter-felder .feld-nicht > input, .filter-felder .feld-nicht > select { flex: 1 1 auto; min-width: 0; }
.filter-felder label.nicht { display: flex; align-items: center; gap: 0.2rem; margin: 0; font-size: 0.78rem; white-space: nowrap; color: var(--gedaempft); }
.filter-felder label.nicht input { width: auto; margin: 0; }
/* Auswertung als Baum (Sitzung 20): Summe rechts im Postenkopf, Ergebniszeile hervorgehoben, Suche in der Klapp-Leiste */
.posten-kopf .posten-summe { flex: 0 0 auto; min-width: 7rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.posten-kopf .posten-summe.gedaempft { font-weight: 400; }
.auswertung-baum .ergebnis-zeile > .posten-kopf { font-weight: 600; border-top: 2px solid var(--linie); border-radius: 0; cursor: default; }
.klapp-leiste input.baum-suche { width: 16rem; margin: 0 0 0 0.75rem; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
/* Auswahl untereinander (Melissa, Sitzung 24): nutzt den Platz besser als nebeneinander */
.auswertung-filter .schalter { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; margin-top: 0.9rem; }
.auswertung-filter .schalter label.wahl { margin: 0; font-size: 0.88rem; white-space: nowrap; flex: 0 0 auto; min-width: 0; }
.auswertung-filter .filter-felder > button { margin-top: 1.3rem; }
.filter.belege-filter { margin-top: 0.4rem; padding: 0.5rem 0.75rem; }
.filter.belege-filter .filter-felder { gap: 0.4rem 0.6rem; }
.filter.belege-filter label { flex: 0 1 8.5rem; min-width: 6.5rem; font-size: 0.8rem; }
.filter.belege-filter input, .filter.belege-filter select { margin-top: 0.15rem; padding: 0.22rem 0.4rem; font-size: 0.82rem; }
.filter.belege-filter .filter-kopf { margin-bottom: 0.3rem; }
.filter.belege-filter .filter-kopf button { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
/* Feldkopf darf umbrechen (Melissa, Sitzung 24): "Interne Belegnummer" und "nicht" liefen sonst ins Nachbarfeld;
   die Felder stehen trotzdem auf einer Linie, weil .filter-felder unten ausrichtet */
.filter-felder .feldkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 0.3rem; white-space: normal; }
.filter-felder .feldkopf > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.filter-felder label.nicht { display: inline-flex; align-items: center; gap: 0.15rem; margin: 0; font-size: 0.72rem; color: var(--gedaempft); flex: 0 0 auto; min-width: 0; }
.filter-felder label.nicht input { width: auto; margin: 0; }
ul.wert-kontrollen { list-style: none; margin: 0.1rem 0 0.2rem; padding: 0; font-size: 0.78rem; color: var(--gedaempft); line-height: 1.5; }
ul.wert-kontrollen li.fehlt { color: var(--fehler); }
.kontrolle.ok { color: var(--erfolg); font-weight: 600; }
.kontrolle.fehlt { color: var(--fehler); font-weight: 600; }
/* Durchsicht Sitzung 23, zweite Runde (Melissa): jede Ansicht so breit wie die Beleg-Uebersicht
   (main.breit, 96 rem). Die Anmeldung bleibt schmal; Textabschnitte und Formularspalten behalten
   ihre Lesebreite, damit nur die Tabellen und Kachelreihen den Platz nutzen. */
main.karte { max-width: 96rem; }
main.karte.schmal { max-width: 22rem; }
main.karte:has(> .reiter) { width: auto; max-width: 96rem; }
main.karte:has(> .reiter) > :not(.reiter) { max-width: none; }
/* Kacheln erklaeren sich (Melissa, Sitzung 23): eine Zeile unter dem Namen, gedaempft und umbrechend */
.kachel-erklaerung { font-size: 0.8rem; color: var(--gedaempft); line-height: 1.35; }
.liste-kacheln { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
/* Kacheln gleich hoch und mit Griff (Melissa, Sitzung 23): das Gitter gibt allen Zeilen dieselbe Hoehe,
   die Kachel fuellt ihr Feld; die sechs Punkte rechts unten sind die Stelle zum Anfassen. */
.liste-kacheln { grid-auto-rows: 1fr; }
.liste-kacheln > li { display: flex; position: relative; }
.liste-kacheln > li > .kachel { flex: 1 1 auto; padding-bottom: 1.4rem; }
.kachel-erklaerung { margin-top: 0.1rem; }
.kachel-zusatz { margin-top: auto; }
.kachel-griff {
    position: absolute; right: 0.5rem; bottom: 0.45rem; width: 0.85rem; height: 1.1rem; cursor: grab;
    background-image: radial-gradient(currentColor 42%, transparent 44%);
    background-size: 0.42rem 0.36rem; color: var(--gedaempft); opacity: 0.55;
}
.kachel-griff:hover { opacity: 1; color: var(--akzent); }
.kachel-griff:active { cursor: grabbing; }
.modus-schalter { font-size: 0.95rem; line-height: 1; padding: 0 0.2rem; }
/* Firma bearbeiten in zwei Spalten (Melissa, Sitzung 23): links die Stammdaten, rechts Ablage und
   Übergabe; die Umsatzsteuer darunter über die ganze Breite. */
.formular-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
.formular-zwei > .spalte { min-width: 0; }
.formular-zwei > .spalte > h3:first-child { margin-top: 0; }
@media (max-width: 62rem) { .formular-zwei { grid-template-columns: 1fr; gap: 0; } }
.befreiung.keine { border-bottom: 1px solid var(--linie); padding-bottom: 0.35rem; }
/* "bearbeiten" liegt in der Firmenkachel (Melissa, Sitzung 23), unten rechts statt als Zeile darunter */
.liste-kacheln > li { position: relative; }
.kachel-weg { position: absolute; right: 0.6rem; bottom: 0.4rem; font-size: 0.8rem; color: var(--akzent); text-decoration: none; }
.kachel-weg:hover { text-decoration: underline; }
.liste-kacheln > li:has(> .kachel-weg) > .kachel { padding-bottom: 1.5rem; }
/* Belegzeile: die Breite der Vorschau ist verstellbar (Melissa, Sitzung 23) -- die Positionen brauchen
   bei vielen Spalten mehr Platz als die Datei. Der Griff zwischen beiden Spalten schiebt die Grenze,
   der Browser merkt sich den Stand (beleg-zeile.js). Vorgabe: die Felder haben mehr Platz als die Datei. */
.beleg-detail { grid-template-columns: minmax(12rem, var(--beleg-teiler, 0.85fr)) 6px minmax(0, 1.6fr); gap: 0 1rem; }
.beleg-teiler { align-self: stretch; width: 6px; border-radius: 3px; background: var(--linie); cursor: col-resize; }
.beleg-teiler:hover, .beleg-teiler.zieht { background: var(--akzent); }
@media (max-width: 70rem) { .beleg-detail { grid-template-columns: 1fr; } .beleg-teiler { display: none; } }
/* die PDF-Spalte deckt auch den Spalt bis zum Teiler ab, der Teiler bleibt greifbar darueber */
.beleg-detail > .spalte:first-child { position: relative; z-index: 2; box-shadow: calc(1rem + 1px) 0 0 var(--grund); }
.beleg-detail > .beleg-teiler { position: relative; z-index: 3; box-shadow: 0 0 0 1rem var(--grund); }
.beleg-detail > .spalte:first-child .vorschau { background: #fff; }
/* Erkennungshinweise (T-1.155) als eigener Block mit Beispielen darunter */
.hinweise-block { margin: 1.2rem 0 0; padding: 0.8rem 1rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); }
.hinweise-block h3 { margin: 0 0 0.2rem; }
.hinweise-block p.gedaempft { margin: 0 0 0.5rem; font-size: 0.88rem; }
.hinweise-block textarea { display: block; width: 100%; min-height: 7rem; padding: 0.6rem 0.7rem; border: 1px solid var(--linie); border-radius: 6px; font: inherit; font-size: 0.92rem; line-height: 1.5; box-sizing: border-box; resize: vertical; }
.hinweise-block ul.beispiele { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--gedaempft); font-size: 0.85rem; }
.hinweise-block ul.beispiele li { margin: 0.15rem 0; }
/* Benutzermenü oben rechts (Melissa, Sitzung 23): ein Knopf, darunter Ansicht, Benachrichtigungen,
   Protokolle, Firma wechseln und Abmelden. */
.benutzer-menue { position: relative; display: inline-flex; }
.benutzer-knopf { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 6px; color: inherit; font-size: 0.95rem; }
.benutzer-knopf:hover { border-color: currentColor; }
.benutzer-liste { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30; min-width: 14rem;
    display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem; border: 1px solid var(--linie);
    border-radius: 8px; background: var(--flaeche); color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.benutzer-liste[hidden] { display: none; }
.benutzer-liste a, .benutzer-liste button { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.4rem 0.5rem;
    border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; text-decoration: none; cursor: pointer; }
.benutzer-liste a:hover, .benutzer-liste button:hover { background: var(--ton-akzent); color: var(--akzent); }
.benutzer-liste form { margin: 0; }
.benutzer-liste .zaehler { margin-left: auto; padding: 0 0.4rem; border-radius: 10px; background: var(--fehler); color: var(--flaeche); font-size: 0.78rem; }
@media print {
    .kopf, .reiter, .tabellen-leiste, .export-knoepfe, .filter-klapp, .zurueck, .benutzer-menue { display: none !important; }
    main.karte, .karte, .breit { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
    table.liste, table.op-liste, table.saldenliste { width: 100%; table-layout: auto; font-size: 9pt; }
    table.liste th, table.liste td { padding: 0.15rem 0.3rem; }
    /* im Druck darf der Text umbrechen statt abgeschnitten zu werden */
    table.op-liste td.text { max-width: none; white-space: normal; }
    tr.klasse, tr.zwischensumme, tr { break-inside: avoid; }
    thead { display: table-header-group; }
    a { text-decoration: none; color: inherit; }
}

/* Rechnungskorrektur anfordern (T-1.195, E-107): gefuehrtes Fenster */
dialog.korrektur { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.2rem 1.5rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text); }
dialog.korrektur::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.korrektur h2 { margin: 0 0 0.6rem; }
dialog.korrektur fieldset { border: 1px solid var(--linie); border-radius: 8px; margin: 0 0 0.8rem; padding: 0.5rem 0.9rem 0.7rem; }
dialog.korrektur legend { font-weight: 600; padding: 0 0.3rem; }
dialog.korrektur label.wahl { display: flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0 0; color: var(--text); }
dialog.korrektur label.wahl input.kurz { width: 7rem; margin: 0; padding: 0.2rem 0.4rem; }
dialog.korrektur textarea { font-family: inherit; }

/* Lieferanteneinstellungen kompakt (T-1.200): Felder so breit wie ihr Inhalt, nebeneinander; eine Karte
   links, die UID-Uebersicht schmal rechts */
.zweispaltig.einstellungen { grid-template-columns: minmax(0, 36rem) minmax(15rem, 20rem); justify-content: start; }
.einstellungen-karte { padding: 0.25rem 1rem 1rem; border: 1px solid var(--linie); border-radius: 8px; }
.einstellungen-karte fieldset { margin: 0; padding: 0; border: 0; }
.einstellungen-karte h3 { margin: 0.9rem 0 0.2rem; font-size: 0.95rem; }
.einstellungen .reihe { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; }
.einstellungen .reihe label { margin: 0; font-size: 0.85rem; color: var(--gedaempft); }
.einstellungen .reihe input { margin-top: 0.15rem; padding: 0.35rem 0.55rem; font-size: 0.92rem; color: var(--text); }
.einstellungen .feld-bereich { width: 14rem; }
.einstellungen .feld-kurz { width: 8rem; }
.einstellungen .feld-lang { flex: 1 1 20rem; }
.einstellungen .knoepfe { margin-top: 0.9rem; }
.einstellungen-karte .abschnitt-unten { margin-top: 1rem; padding-top: 0.2rem; border-top: 1px solid var(--linie); }
.zweispaltig.einstellungen aside form button { margin: 0; }
@media (max-width: 48rem) { .zweispaltig.einstellungen { grid-template-columns: minmax(0, 1fr); } }

/* Zwei-Faktor-Anmeldung (T-1.37 Schritt 3) */
.zweispaltig.zfa { grid-template-columns: minmax(0, 20rem) minmax(0, 28rem); justify-content: start; }
.zfa img { display: block; margin: 0.5rem 0; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
code.geheimnis { display: inline-block; padding: 0.3rem 0.5rem; font-size: 0.85rem; letter-spacing: 0.05em; word-break: break-all; background: var(--grund); border: 1px solid var(--linie); border-radius: 4px; }
ul.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.4rem 1rem; max-width: 30rem; margin: 1rem 0; padding: 0.75rem 1rem; list-style: none; font-family: ui-monospace, Consolas, monospace; font-size: 1rem; background: var(--grund); border: 1px solid var(--linie); border-radius: 6px; }
.zfa-stand { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.zfa-app { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; margin: 0.3rem 0; }
.zfa-app input[name="code"] { width: 7rem; margin: 0; }
.zfa-app button { margin: 0; }
tr.verlauf-fehler td { color: var(--fehler); }
@media (max-width: 48rem) { .zweispaltig.zfa { grid-template-columns: minmax(0, 1fr); } }
/* Mein Konto: Abschnitte deutlich getrennt */
.mein-konto h2 { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.mein-konto h1 + h2, .mein-konto p.meldung + h2 { margin-top: 1rem; padding-top: 0; border-top: 0; }
.mein-konto table.liste { max-width: 48rem; }
/* Benutzer & Anmeldungen (T-1.37 Schritt 3) */
.benutzer-tabelle span.erfolg { color: var(--erfolg); }
.benutzer-tabelle span.fehler, .benutzer-tabelle td.fehler { color: var(--fehler); font-weight: 600; }
.benutzer-tabelle span.warnung { color: var(--warnung); }
.benutzer-tabelle tr.verlauf-zeile > td { padding-top: 0; border-top: 0; }
.benutzer-tabelle tr.verlauf-zeile summary { font-size: 0.82rem; color: var(--gedaempft); cursor: pointer; }
.benutzer-tabelle tr.verlauf-zeile table { margin: 0.3rem 0 0.6rem; max-width: 44rem; }
.benutzer-tabelle label.wahl { display: inline-flex; gap: 0.3rem; align-items: center; margin: 0; font-size: 0.82rem; }