/* Fidanova Treuhand – Frontend. Farben/Gestaltung nach
   docs/vorgaben/Access_Formulare_Vorschau.html */
:root {
    --navy: #1F3864;
    --navy-light: #2E4C82;
    --teal: #2E7D6E;
    --teal-light: #E1F0EC;
    --bg: #F4F5F7;
    --card: #FFFFFF;
    --border: #D8DCE2;
    --text: #1E2430;
    --muted: #6B7280;
    --amber: #B8860B; --amber-bg: #FBF3DF;
    --green: #1D7A4C; --green-bg: #E7F5EC;
    --red: #B23A3A;   --red-bg: #FBEAEA;
    /* Aliasse für ältere Views */
    --fg: var(--text); --dim: var(--muted); --line: var(--border); --accent: var(--teal); --warn: var(--red);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", Calibri, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
}
a { color: var(--teal); }
code { background: #eceef1; padding: .1em .35em; border-radius: 3px; font-size: .92em; }

/* Kopf */
.topbar {
    background: var(--navy); color: #fff;
    padding: 10px 24px 10px 40px; display: flex; align-items: center; justify-content: space-between;
}
.topbar .brand-link { color: #fff; text-decoration: none; }
.topbar h1 { font-size: 15px; font-weight: 600; margin: 2px 0 0; }
.topbar .env { font-size: 11px; opacity: .7; }
.topbar .sprachwahl { font-size: 11px; white-space: nowrap; }
.topbar .sprachwahl a { color: #cfd9ea; text-decoration: none; padding: 2px 3px; }
.topbar .sprachwahl a.aktiv { color: #fff; font-weight: 700; }
.kicker {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: #9db4d6; font-weight: 700;
}

/* Marke: Icon auf hellem Chip + Wortmarke, links im Kopf mit Luft zum restlichen Text */
.brand-lockup { display: flex; align-items: center; gap: 26px; }
.brand-chip {
    flex: none; width: 56px; height: 56px; border-radius: 12px; background: #fdfcf9;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.brand-chip img { width: 46px; height: 46px; }
.brand-wortmarke {
    display: block; margin: 2px 0; color: #fff;
    font-family: "Segoe UI Semibold", "Segoe UI", Arial, sans-serif;
    font-size: 25px; font-weight: 700; letter-spacing: .14em;
    line-height: 1; text-transform: uppercase;
}

/* Globale Reiter */
.tabs { display: flex; flex-wrap: wrap; background: var(--navy-light); padding: 0 24px; }
.tabs a {
    padding: 9px 16px; color: #cfd9ea; font-size: 12.5px; text-decoration: none;
    border-bottom: 3px solid transparent;
}
.tabs a.active { color: #fff; border-bottom-color: var(--teal); background: rgba(255,255,255,.06); }
.tabs a:hover { color: #fff; }

.wrap { max-width: 980px; margin: 20px auto; padding: 0 20px 48px; }
.foot {
    max-width: 980px; margin: 2rem auto 0; padding: 20px 20px 0; color: var(--muted); font-size: 11px;
    border-top: 1px solid var(--border);
}
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 14px; }
.foot-grid strong { color: var(--text); font-size: 11.5px; }
.foot-grid a { color: var(--teal); }
.foot-klein { padding: 10px 0 20px; opacity: .75; }
@media print { .foot { display: none; } }

h1 { font-size: 18px; margin: .2rem 0 1rem; }
h2 { font-size: 14px; color: var(--navy); margin: 1.4rem 0 .5rem; }
h3 { font-size: 12.5px; color: var(--navy); margin: 0 0 .6rem; }
.back { margin: 0 0 .3rem; font-size: 12px; }
.hint, .note { color: var(--muted); font-size: 11px; margin-top: .8rem; }

/* Mandanten-Unternavigation */
.subnav { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 1.2rem; border-bottom: 1px solid var(--border); }
.subnav a {
    padding: 7px 13px; text-decoration: none; color: var(--muted); font-size: 12.5px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a.active { color: var(--navy); border-bottom-color: var(--teal); font-weight: 600; }
.subnav a:hover { color: var(--navy); }

/* Mandanten-Navigation mit Dropdowns */
.mnav { margin: 0 0 1.1rem; }
.mnav-items {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px;
    border-bottom: 1px solid var(--border);
}
.mnav-burger {
    display: none; font: inherit; font-size: 14px; font-weight: 600;
    color: var(--navy); background: #fff; border: 1px solid var(--border);
    border-radius: 4px; padding: 10px 14px; cursor: pointer; width: 100%; text-align: left;
}
.mnav-home, .mnav-item, .mnav-toggle {
    font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 0;
    padding: 8px 13px; text-decoration: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.mnav-home { color: var(--teal); font-weight: 600; }
.mnav-item:hover, .mnav-toggle:hover, .mnav-home:hover { color: var(--navy); }
.mnav-item.aktiv { color: var(--navy); border-bottom-color: var(--teal); font-weight: 600; }
.mnav-gruppe { position: relative; }
.mnav-gruppe.aktiv > .mnav-toggle { color: var(--navy); border-bottom-color: var(--teal); font-weight: 600; }
.mnav-caret { font-size: 9px; opacity: .6; }
.mnav-menu {
    position: absolute; left: 0; top: 100%; z-index: 30; min-width: 210px;
    background: #fff; border: 1px solid var(--border); border-radius: 0 4px 4px 4px;
    box-shadow: 0 6px 20px rgba(31,56,100,.13); padding: 4px; display: none;
}
.mnav-gruppe:hover > .mnav-menu,
.mnav-gruppe:focus-within > .mnav-menu { display: block; }
.mnav-menu a {
    display: block; padding: 7px 10px; font-size: 12.5px; color: var(--text);
    text-decoration: none; border-radius: 3px;
}
.mnav-menu a:hover { background: var(--teal-light); color: var(--navy); }
.mnav-menu a.aktiv { color: var(--navy); font-weight: 600; background: var(--teal-light); }
.mandant-titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media print { .mnav { display: none !important; } }

/* Karten */
.card, .karte {
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    padding: 18px 22px; margin-bottom: 16px;
}
.card > h2:first-child, .karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.karte h2 { border-bottom: 1px solid var(--border); padding-bottom: 8px; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.karte dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; margin: 0; }
.karte dt { color: var(--muted); font-size: 11px; }
.karte dd { margin: 0; }

/* Formulare */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.field { display: block; }
.field label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 6px 8px; font-size: 13px; border: 1px solid var(--border);
    border-radius: 3px; background: #fcfcfd; color: var(--text); font-family: inherit;
}
.field input:disabled, .field select:disabled { background: #f0f1f3; color: #555; }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.btn {
    padding: 6px 14px; font-size: 12px; border-radius: 4px; border: 1px solid var(--border);
    background: #fff; cursor: pointer; color: var(--navy); text-decoration: none; display: inline-block;
    font-family: inherit;
}
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn:hover { border-color: var(--navy); }
.select-mandant, select.inline { padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }

/* Tabellen */
table.liste, table.daten { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--card); }
table.liste th, table.daten th {
    text-align: left; background: var(--teal-light); color: var(--navy); padding: 7px 8px;
    font-weight: 600; border-bottom: 1px solid var(--border); text-transform: none; letter-spacing: 0;
}
table.liste td, table.daten td { padding: 6px 8px; border-bottom: 1px solid #eceef1; }
table.liste tr:hover td, table.daten tr:hover td { background: #f8f9fb; }
table.liste tfoot td { border-top: 1px solid var(--border); background: #f6f7f9; font-weight: 600; }
.num { text-align: right; }
.mono { font-variant-numeric: tabular-nums; font-family: "Segoe UI", Consolas, monospace; }
.dim { color: var(--muted); }
.neg, .num.neg { color: var(--red); }
tr.zwischen td { background: #f6f7f9; font-weight: 600; }
tr.ergebnis td { border-top: 2px solid var(--navy); font-weight: 700; font-size: 12.5px; }
.storniert { text-decoration: line-through; color: var(--muted); }
/* Buchung weicht von der Buchhaltung des Kunden ab (Spalte AbweichungKunde) */
tr.abweichung td { background: #fdecea; }
tr.abweichung td:first-child { box-shadow: inset 3px 0 0 #b42318; }
.abw-text { color: #b42318; font-size: 11px; font-weight: 600; }
/* Gegenseitige Rechnungen (Firma ist Kunde und Lieferant) – blau im Journal */
tr.gegenseitig td { background: #e3edfc; }
tr.gegenseitig td:first-child { box-shadow: inset 3px 0 0 #1d5bd8; }
tr.gegenseitig.abweichung td { background: #fdecea; }
.gegenseitig-text { color: #1d5bd8; font-weight: 600; }
/* Korrekturbuchungen der Treuhand – orange im Journal */
tr.korrektur td { background: #fff1e0; }
tr.korrektur td:first-child { box-shadow: inset 3px 0 0 #e67e00; }
tr.korrektur.abweichung td { background: #fdecea; }
.korrektur-text { color: #e67e00; font-weight: 600; }

/* Badges / Status */
.badge, .tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.tag { background: var(--teal-light); color: var(--navy); }
.badge.active, .status.ok { background: var(--green-bg); color: var(--green); }
.badge.lgav { background: var(--amber-bg); color: var(--amber); }
.status { padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; }
.status.fehlt { background: var(--red-bg); color: var(--red); }
.status.wird { background: var(--amber-bg); color: var(--amber); }
.warn { color: var(--red); font-weight: 600; font-size: 12px; }

.jahr-wahl { display: flex; gap: 4px; margin: 1rem 0; flex-wrap: wrap; }
.jahr-wahl a {
    padding: 4px 11px; border: 1px solid var(--border); border-radius: 4px; text-decoration: none;
    color: var(--muted); background: #fff; font-size: 12px;
}
.jahr-wahl a.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.vorlagen { list-style: none; padding: 0; margin: .5rem 0; }
.vorlagen li { padding: .3rem 0; }

pre.fehler { background: #fff; border: 1px solid var(--border); padding: 1rem; overflow-x: auto; font-size: 11px; white-space: pre-wrap; }
table.kompakt th, table.kompakt td { padding: .3rem .6rem; }

.aktionen { display: flex; gap: 6px; margin: 0 0 14px; }
.aktionen .btn { font-size: 12px; }

/* Vollständigkeitsprüfung */
table.pruefliste td { border-bottom: 1px solid #eceef1; vertical-align: top; }
.pruef { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center;
    border-radius: 50%; font-size: 12px; font-weight: 700; }
.pruef.ok    { background: var(--green-bg); color: var(--green); }
.pruef.fehlt { background: var(--red-bg);   color: var(--red); }
.pruef.offen { background: #eceef1;         color: var(--muted); }
@media print { .aktionen, .topbar, .tabs, .subnav, .jahr-wahl, .toolbar, .foot, form.toolbar, .back { display: none !important; } .wrap { max-width: none; margin: 0; padding: 0; } }
/* Druck: Tabellen nie abschneiden – volle Breite, normale Tabellendarstellung, Zahlen sichtbar */
@media print {
    @page { size: A4; margin: 1.5cm 1.4cm; }
    html, body { overflow: visible !important; max-width: none !important; background: #fff; }
    .card, .karte { overflow: visible !important; border: 0; padding: 0; box-shadow: none; }
    table.liste, table.daten { display: table !important; width: 100% !important; overflow: visible !important;
        white-space: normal !important; table-layout: auto; font-size: 9pt; }
    table.liste td, table.liste th, table.daten td, table.daten th { padding: 3px 5px; overflow-wrap: break-word; }
    table.liste td[style*="nowrap"], table.liste th[style*="nowrap"] { overflow-wrap: normal; }
    table.liste td:last-child, table.liste th:last-child, table.daten td:last-child, table.daten th:last-child { padding-right: 0; }
    /* Eingabefelder wie Text drucken, Knöpfe weglassen (z. B. Kontenplan) */
    table.liste input, table.liste select, table.daten input, table.daten select {
        border: 0 !important; background: none !important; padding: 0 !important; font: inherit; color: inherit;
        -webkit-appearance: none; appearance: none; width: auto !important; max-width: 100%; }
    table.liste .btn, table.daten .btn, table.liste button, table.daten button { display: none !important; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
    h2 { break-after: avoid; }
    a[href]::after { content: none !important; }
}

/* ============================================================
   Mobil / kleine Bildschirme (Handy, schmales Tablet)
   ============================================================ */
@media screen and (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { font-size: 14px; }

    /* Kopf: Logo kleiner, skaliert mit, kein Wegscrollen nach rechts */
    .topbar { padding: 8px 12px; flex-wrap: wrap; gap: 8px 12px; }
    .brand-lockup { gap: 12px; }
    .brand-chip { width: 40px; height: 40px; border-radius: 9px; }
    .brand-chip img { width: 32px; height: 32px; }
    .brand-wortmarke { font-size: 17px; letter-spacing: .1em; }
    .kicker { font-size: 9px; }
    .topbar .env { font-size: 10px; }

    /* Globale Reiter */
    .tabs { padding: 0 8px; }
    .tabs a { padding: 8px 11px; }

    /* Inhaltsbreite */
    .wrap { margin: 14px auto; padding: 0 12px 32px; }

    /* Mandanten-Navigation: Hamburger-Menü wie gewohnt am Handy.
       ☰ tippen -> ganze Liste klappt auf; Gruppen per Tipp auf/zu;
       aktueller Punkt farblich hinterlegt. */
    .mnav { border-bottom: 1px solid var(--border); }
    .mnav-burger { display: block; margin-bottom: 0; }
    .mnav.offen .mnav-burger { border-radius: 4px 4px 0 0; }
    .mnav-items { display: none; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 0; }
    .mnav.offen .mnav-items {
        display: flex; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 4px 4px;
    }
    .mnav-home, .mnav-item, .mnav-gruppe { width: 100%; margin: 0; }
    .mnav-home, .mnav-item, .mnav-toggle {
        padding: 13px 14px; font-size: 14px; white-space: normal; margin-bottom: 0;
        border-bottom: 1px solid var(--border); border-top: 0;
    }
    .mnav-gruppe:last-child .mnav-toggle, .mnav-items > *:last-child { border-bottom: 0; }
    .mnav-toggle {
        width: 100%; display: flex; justify-content: space-between; align-items: center;
    }
    .mnav-caret { font-size: 17px; opacity: .9; transition: transform .15s; }
    .mnav-gruppe.auf .mnav-caret { transform: rotate(180deg); }

    /* Untermenü: nur per Klick (JS setzt .auf) – nicht mehr über :hover/:focus,
       damit es sich am Handy auch wieder schliessen lässt */
    .mnav-gruppe:hover > .mnav-menu,
    .mnav-gruppe:focus-within > .mnav-menu { display: none; }
    .mnav-menu {
        position: static; min-width: 0; width: 100%;
        border: 0; border-radius: 0; box-shadow: none; padding: 4px 0; background: #f7f8fa;
    }
    .mnav-gruppe.auf > .mnav-menu { display: block; }
    .mnav-menu a { padding: 11px 14px 11px 26px; font-size: 14px; }

    /* Aktueller Menüpunkt deutlich hinterlegt */
    .mnav-home.aktiv, .mnav-item.aktiv,
    .mnav-gruppe.aktiv > .mnav-toggle,
    .mnav-menu a.aktiv { background: var(--teal-light); color: var(--navy); font-weight: 600; }

    /* Formulare / Kartengitter: eine Spalte, Text darf umbrechen */
    .grid, .grid.two { grid-template-columns: 1fr; }
    .karten, .foot-grid { grid-template-columns: 1fr; }
    .card, .karte { padding: 14px; overflow-wrap: anywhere; }
    .karte dl { grid-template-columns: 1fr; gap: 0; }
    .karte dt { margin-top: .6rem; }
    .karte dd { margin-bottom: .2rem; }

    /* Breite Tabellen scrollen in sich selbst, statt die ganze Seite zu verschieben */
    .card, .karte { overflow-x: auto; }
    table.liste, table.daten {
        display: block; width: 100%; overflow-x: auto;
        -webkit-overflow-scrolling: touch; white-space: nowrap;
    }
    /* Schmale Tabellen (wenige Spalten) passen ohne Scrollen – umbrechen lassen */
    table.liste.schmal, table.daten.schmal {
        display: table; white-space: normal; table-layout: fixed;
    }
    table.schmal th, table.schmal td { padding: .35rem .4rem; font-size: 12px; overflow-wrap: anywhere; }

    /* Werkzeugleisten umbrechen lassen */
    .toolbar, .aktionen, .mandant-titel { flex-wrap: wrap; }
    .subnav { overflow-x: auto; flex-wrap: nowrap; }
}

/* Nur-Ansicht (Stufe C, Revisor R): Formulare, die etwas ändern würden, ausblenden –
   der Server lehnt solche Anfragen ohnehin ab (Kernel::pruefeBerechtigung). */
.nur-ansicht main form[method="post"],
.nur-ansicht main form[method="POST"] { display: none !important; }
.revisor-hinweis { border-left: 3px solid var(--teal, #2E7D6E); padding-left: .6rem; }
@media print { .revisor-hinweis { display: none !important; } }
/* Handelsregister-Suche bei „Neuer Mandant“ */
.zefix-liste { position: absolute; z-index: 20; left: 0; right: 0; background: #fff; border: 1px solid var(--border, #d0d7e2); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.zefix-treffer { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #eef1f6; padding: 7px 10px; cursor: pointer; font: inherit; }
.zefix-treffer:hover { background: #eef4ff; }
.zefix-treffer span { color: var(--muted, #667); font-size: 12px; }
.zefix-alt strong, .zefix-alt span { color: #b42318; }
.zefix-leer { padding: 7px 10px; color: var(--muted, #667); }
.zefix-info > div, .zefix-info > a { margin-top: 4px; display: block; }
.zefix-ok { color: #1a7f37; }
.zefix-warnung { color: #b42318; font-weight: 600; }
.zefix-person { font-size: 12px; padding: 2px 8px; margin: 2px 4px 2px 0; }
/* Ablagefläche für Dateien (Ziehen und Ablegen) */
.ablage { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 120px; border: 3px dashed #b8c4d6; border-radius: 12px; padding: 22px 16px; background: #f8fafc; cursor: pointer; transition: background .15s, border-color .15s; }
.ablage.drueber { border-color: var(--navy, #1F3864); background: #e2ebfa; transform: scale(1.01); }
.ablage.erfasst { border-style: solid; border-color: #1a7f37; background: #eaf6ee; }
.ablage.erfasst .ablage-text { display: block; color: var(--navy, #1F3864); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.ablage-text { display: block; color: var(--navy, #1F3864); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.ablage-dateien { display: block; margin-top: 6px; font-size: 12px; word-break: break-all; }
.ablage-dateien.fehler { color: #b42318; }
.field:has(> .ablage) { grid-column: 1 / -1; }

/* Transparenzregister (TJPG) auf dem Deckblatt: Ablagen mit Datei oder Foto, Fenster für Foto/Unterschrift */
.tj-person { border: 1px solid var(--border, #d0d7e2); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.tj-person > summary { cursor: pointer; }
.tj-neu { border-style: dashed; }
.tj-rot { color: #b42318; font-weight: 600; }
.tj-ok { color: #13653a; font-weight: 600; }
.field.fehlt label { color: #b42318; font-weight: 600; }
.field.fehlt input, .field.fehlt select { border-color: #d92d20; background: #fff5f4; }
.tj-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 10px 0; }
.tj-doc { border: 1px solid var(--border, #d0d7e2); border-radius: 8px; padding: 8px 10px; background: #fafbfd; }
.tj-doc.fehlt { border: 2px solid #d92d20; background: #fff5f4; }
.tj-doc-kopf { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tj-doc-knoepfe { margin-top: 6px; }
.tj-doc-knoepfe .btn { min-height: 40px; display: inline-flex; align-items: center; }
.tj-foto { cursor: pointer; }
.tj-vorschau figure { display: inline-flex; align-items: center; gap: 4px; margin: 6px 8px 0 0; }
.tj-vorschau figure img { height: 64px; border: 1px solid #ccd; border-radius: 4px; }
.tj-vorschau .btn { padding: 2px 8px; }
.tj-sig { height: 34px; vertical-align: middle; background: #fff; border: 1px solid #dde; border-radius: 4px; }
.tj-pulsieren { animation: tj-puls 1.4s ease-in-out infinite; }
@keyframes tj-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(29, 91, 216, .55); } 50% { box-shadow: 0 0 0 8px rgba(29, 91, 216, 0); } }
.tj-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 20, 40, .55); overflow-y: auto; padding: 12px; }
.tj-modal[hidden] { display: none; }
.tj-modal-box { background: #fff; border-radius: 12px; max-width: 760px; margin: 0 auto; padding: 14px; }
.tj-modal [hidden] { display: none !important; }
body.tj-modal-offen { overflow: hidden; }
.vo-editor-flaeche { position: relative; width: 100%; touch-action: none; }
.vo-editor-flaeche canvas { width: 100%; height: auto; display: block; border-radius: 6px; }
.vo-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; }
.vo-poly { fill: rgba(220, 53, 69, .10); stroke: none; }
.alle-ok .vo-poly { fill: rgba(25, 135, 84, .22); }
.vo-seite-linie { stroke: #dc3545; stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.vo-seite-linie.ok { stroke: #19a35a; stroke-width: 6; }
.alle-ok .vo-ecke { stroke: #19a35a; }
.vo-editor-flaeche canvas.vo-lupe { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45); pointer-events: none; z-index: 5; }
.vo-status { font-weight: 600; color: #b42318; margin: 6px 0; }
.vo-status.ok { color: #13653a; }
.vo-ecke { fill: rgba(255, 255, 255, .85); stroke: #1d5bd8; stroke-width: 3; vector-effect: non-scaling-stroke; cursor: grab; touch-action: none; }
.tj-modal-foto:has(.alle-ok) .vo-zuschneiden { background: #19a35a; border-color: #19a35a; }
.tj-modal .btn { min-height: 44px; display: inline-flex; align-items: center; }
.vo-text { max-height: 42vh; overflow: auto; border: 1px solid var(--border, #d0d7e2); border-radius: 8px; padding: 6px 14px; font-size: 13.5px; background: #fafbfd; margin-bottom: 12px; }
.vo-text h1 { font-size: 16px; } .vo-text h1 small { display: block; font-size: 12px; font-weight: normal; }
.vo-text h2 { font-size: 14px; }
.vo-text .tab, .vo-text .wb-unterschriften, .vo-text h2:first-of-type { display: none; }
.vo-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 15px; }
.vo-check input { width: 22px; height: 22px; flex: none; }
.vo-pad-rahmen { position: relative; border: 2px dashed #9fb0cc; border-radius: 10px; background: #fff; }
.vo-pad { width: 100%; height: 210px; display: block; touch-action: none; }
.vo-pad-linie { position: absolute; left: 16px; right: 16px; bottom: 34px; border-top: 1px solid #9fb0cc; color: #9fb0cc; font-size: 13px; padding-top: 4px; pointer-events: none; }
.vorschlag-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .vorschlag-chips .btn { font-size: 12px; padding: 2px 8px; background: #eef6ff; }
details.mehr { margin-top: 8px; } details.mehr > summary { cursor: pointer; color: var(--muted, #667); font-size: 13px; }
.tj-doc .ablage { padding: 8px 10px; min-height: 0; font-size: 13px; }
.tj-doc .ablage .ablage-text { font-size: 13px; }
.tj-modal-box { position: relative; }
.tj-schliessen { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef1f6; font-size: 20px; cursor: pointer; z-index: 6; }
.tj-modal-foto, .tj-modal-unterschrift { padding-top: 34px; }
.tj-pad-voll { position: fixed; inset: 0; z-index: 1100; background: #fff; display: flex; flex-direction: column; padding: 8px; }
.tj-pad-voll[hidden] { display: none; }
.tj-pad-voll .vo-pad-rahmen { flex: 1; min-height: 0; }
.tj-pad-voll .vo-pad { height: 100%; }
.tj-pad-voll .vo-pad-linie { bottom: 22%; font-size: 15px; }
.tj-pad-knoepfe { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
.tj-pad-knoepfe .btn { min-height: 46px; font-size: 16px; }
.tj-quer-hinweis { display: none; }
.tj-pad-voll.hochkant .tj-quer-hinweis { display: block; position: absolute; top: 30%; left: 0; right: 0; text-align: center; font-size: 20px; font-weight: 700; color: #1d5bd8; pointer-events: none; }
.tj-pad-voll .vo-meldung { margin: 4px 0 0; }

/* Ablage als Quadrat (Dokumente, unterschriebene Fassung): grosse Fläche, daneben Hinweis + Speichern */
.ablage-quadrat { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.ablage-quadrat .ablage { width: min(100%, 280px); aspect-ratio: 1 / 1; min-height: 0; padding: 18px; box-sizing: border-box; }
.ablage-quadrat .ablage::before { content: '📄'; font-size: 52px; line-height: 1; margin-bottom: 10px; }
.ablage-quadrat .ablage.erfasst::before { content: '✅'; }
.ablage-quadrat .ablage-dateien { max-height: 70px; overflow: auto; }
.ablage-seite { flex: 1 1 220px; }
/* Eigene Kamera mit Rahmen */
.tj-kamera { position: fixed; inset: 0; z-index: 1200; background: #000; }
.tj-kamera[hidden] { display: none; }
.tj-kamera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tj-kamera-rahmen { position: absolute; border: 4px solid #fff; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); transition: border-color .2s; }
.tj-kamera-rahmen.ok { border-color: #19d36a; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5), 0 0 18px #19d36a; }
.tj-kamera-knoepfe { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; }
.tj-kamera .btn { background: rgba(0, 0, 0, .45); color: #fff; border-color: rgba(255, 255, 255, .8); min-height: 44px; }
.vo-aufloesung { font-weight: 600; }
.tj-kamera-knoepfe { flex-wrap: wrap; gap: 10px; }
.tj-kamera .tj-kamera-fertig { background: #19a35a; border-color: #19a35a; }
.tj-kamera-kopf { position: absolute; top: 0; left: 0; right: 0; padding: max(14px, env(safe-area-inset-top)) 60px 10px; text-align: center; color: #fff; text-shadow: 0 1px 3px #000; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.tj-kamera-schritt { margin: 0 0 4px; font-size: 24px; font-weight: 800; }
.tj-kamera-text { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.tj-kamera-info { margin: 6px 0 0; color: #7dffb0; font-weight: 700; font-size: 14px; }
.tj-kamera.gespeichert .tj-kamera-schritt { color: #7dffb0; font-size: 30px; }
.tj-kamera.gespeichert .tj-kamera-rahmen { border-color: #19d36a; background: rgba(25, 211, 106, .18); }
.tj-kamera-zu { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.45); color: #fff; font-size: 20px; z-index: 2; }
.tj-kamera .tj-ausloeser { width: auto; height: auto; border-radius: 8px; border: 1px solid rgba(255,255,255,.8); }
.tj-kamera [hidden] { display: none !important; }
.tj-papier { margin-top: 8px; } .tj-papier > summary { cursor: pointer; font-size: 13px; color: var(--muted, #667); }