/* ---------------------------------------------------------------------------
 * Verfahrensdokumentation: die Vorlage als ausfuellbares Formular.
 *
 * Nur diese eine Seite laedt diese Datei. Sie ergaenzt kassensicherung.css um
 * drei Dinge: die Eingabefelder, die Werkzeugleiste – und eine Druckfassung,
 * die ausschliesslich das Dokument enthaelt. Alles, was nur die Vorlage
 * erklaert, traegt die Klasse .template-only und verschwindet im Druck.
 * ------------------------------------------------------------------------- */

/* --------------------------- Werkzeugleiste ------------------------------ */

.vdbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-sm);
}

.vdbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}

.vdbar-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.vdbar-count { font-size: 13.5px; color: var(--ink-700); white-space: nowrap; }
.vdbar-count b { font-variant-numeric: tabular-nums; }

.vdbar-meter {
    width: 120px;
    height: 6px;
    border-radius: 3px;
    background: var(--ink-100);
    overflow: hidden;
    flex: none;
}

.vdbar-meter i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--green-600);
    transition: width 0.25s ease;
}

.vdbar-saved { font-size: 12.5px; color: var(--ink-500); }
.vdbar-saved.is-warn { color: var(--coral-600); }

.vdbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.vdbtn {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.2;
    padding: 8px 12px;
    border: 1px solid var(--ink-200);
    border-radius: 7px;
    background: #fff;
    color: var(--ink-700);
    cursor: pointer;
}

.vdbtn:hover { background: var(--ink-50); color: var(--midnight-800); border-color: var(--ink-400); }
.vdbtn:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 2px; }

.vdbtn-primary {
    background: var(--midnight-800);
    border-color: var(--midnight-800);
    color: #fff;
    font-weight: 500;
}

.vdbtn-primary:hover { background: var(--midnight-900); border-color: var(--midnight-900); color: #fff; }

/* ---------------------------- Eingabefelder ------------------------------ */
/* Auszufuellende Stelle. Absichtlich auffaellig: Eine Verfahrensdokumentation
   mit stehengebliebenem Platzhalter ist schlimmer als eine mit sichtbarer
   Luecke. Gefuellte Felder wechseln nach Gruen – so sieht man beim Blaettern,
   was noch fehlt. */

.fld {
    display: inline;
    padding: 1px 5px;
    border-radius: 3px;
    background: #fff3cd;
    box-shadow: inset 0 -2px 0 var(--amber-600);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: var(--midnight-800);
    font-weight: 500;
    cursor: text;
    white-space: pre-wrap;
}

/* Leere Felder brauchen eine Mindestbreite, sonst ist ein Platzhalter „…“
   kaum zu treffen. */
.fld:empty { display: inline-block; min-width: 4.5em; }
.fld:empty::before { content: attr(data-ph); color: #96803f; font-weight: 400; font-style: italic; }

.fld:hover { background: #ffeeb0; }
.fld:focus { outline: 2px solid var(--sky-400); outline-offset: 1px; background: #fff; }

.fld.is-filled { background: var(--green-50); box-shadow: inset 0 -2px 0 var(--green-600); }
.fld.is-filled:hover { background: #dcf0e6; }

.fld-demo { cursor: default; }

/* Leerzeilen der Vordrucke: dieselbe Logik, nur als ganze Tabellenzelle. */
table.fill td.blank[contenteditable] { cursor: text; }
table.fill td.blank[contenteditable]:hover { background: #fffaea; }
table.fill td.blank[contenteditable]:focus { outline: 2px solid var(--sky-400); outline-offset: -2px; background: #fff; }
table.fill td.blank.is-filled { background: var(--green-50); }

.sigline { height: 56px; }

/* Werkzeugleiste und Inhaltsverzeichnis kleben beide oben – das Verzeichnis
   muss darunter beginnen, sonst verschwindet sein Kopf unter der Leiste. */
html { scroll-padding-top: 92px; }
.toc { top: 88px; max-height: calc(100vh - 112px); }

@media (max-width: 900px) {
    .vdbar-inner { padding: 10px 20px; }
    .vdbar-saved { width: 100%; }
}

/* --------------------------- Sichtbarkeiten ------------------------------ */

.printonly { display: none; }
.toc-intro { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ink-100); }
.toc-intro a { padding-left: 8px; }
.toc-intro a::before { content: none; }

/* -------------------------------- Druck ---------------------------------- */
/* Im Druck steht nur die Dokumentation: keine Werkzeugleiste, keine Hinweise
   zur Vorlage, keine Navigation. Nicht ausgefuellte Felder erscheinen als
   Platzhalter – dann laesst sich der Ausdruck von Hand vervollstaendigen. */

@media print {
    .template-only { display: none !important; }
    .printonly { display: block; }

    .printsub {
        font-size: 11pt;
        color: #333;
        margin: 6pt 0 0;
    }

    .printsub b { font-size: 12pt; color: #000; }

    .pagehead { padding-bottom: 10pt; margin-bottom: 18pt; }

    .fld {
        background: none !important;
        box-shadow: none !important;
        padding: 0;
        color: #000;
        font-weight: 500;
    }

    .fld:empty { display: inline; min-width: 0; }
    .fld:empty::before { color: #555; font-style: italic; font-weight: 400; }

    table.fill td.blank[contenteditable] { background: none !important; }
    table.fill td.blank { height: 30pt; }

    .sigline { height: 40pt; }

    /* Die Vordrucke beginnen auf einer neuen Seite – sie werden einzeln
       ausgedruckt, kopiert und ausgefuellt. */
    #anlagen { page-break-before: always; break-before: page; }

    footer.docfoot { display: none !important; }
}