/* Gestaltung der Unterschriften-App. Gleiche Handschrift wie die
   Rechnungsfreigabe (SUT-Grün, ruhige Flächen), aber deutlich weniger Teile -
   die App kann genau zwei Dinge: einreichen und unterschreiben. */
:root {
    --sut-gruen: #2f6b3a;
    --sut-gruen-dunkel: #1f4b28;
    --rot: #a4302b;
    --grau: #6b6b6b;
    --hintergrund: #f5f6f3;
    --rahmen: #d8dcd3;
}

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
    background: var(--hintergrund);
    color: #222;
}

.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sut-gruen-dunkel);
    color: white;
    padding: 0.6rem 1.2rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.topnav a { color: white; text-decoration: none; margin-left: 1rem; }
.topnav a:hover { text-decoration: underline; }
.marke a { font-weight: 700; margin: 0; }
.navrechts { display: flex; align-items: center; flex-wrap: wrap; }
.benutzer-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
}

.inhalt { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem 3rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
.hinweis { color: var(--grau); font-size: 0.9rem; }
.hinweis.warnung { color: #8a6114; background: #fdf4e3; padding: 0.5rem 0.8rem; border-radius: 6px; }
.fehler { color: var(--rot); font-weight: 600; }
.leer { color: var(--grau); font-style: italic; }

/* --- Anmeldung ---------------------------------------------------------- */
.anmeldekasten {
    max-width: 380px;
    margin: 3rem auto;
    background: white;
    border: 1px solid var(--rahmen);
    border-radius: 10px;
    padding: 1.5rem;
}

/* --- Formulare ---------------------------------------------------------- */
.aktion-form { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.8rem; }
.aktion-form.senkrecht { flex-direction: column; align-items: stretch; }
.aktion-form label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--grau); gap: 0.2rem; }
.aktion-form input[type="text"], .aktion-form input[type="password"] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--rahmen);
    border-radius: 6px;
    font-size: 1rem;
    min-width: 14rem;
}
.aktion-form label.haken { flex-direction: row; align-items: center; gap: 0.4rem; color: #222; }
.aktion-form.loeschen-form { margin-top: 2rem; }

.button {
    display: inline-block;
    background: white;
    color: var(--sut-gruen-dunkel);
    border: 1px solid var(--sut-gruen);
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { background: #eef3ec; }
.button.primaer { background: var(--sut-gruen); border-color: var(--sut-gruen-dunkel); color: white; }
.button.primaer:hover { background: var(--sut-gruen-dunkel); }
.button.neutral { border-color: var(--rahmen); color: #444; }
.button.gefahr { border-color: var(--rot); color: var(--rot); }
.button.gefahr:hover { background: #fbeaea; }
.button.gross { font-size: 1.05rem; padding: 0.7rem 1.4rem; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Ablegefläche für den Upload ---------------------------------------- */
.upload-form {
    background: white;
    border: 1px solid var(--rahmen);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: stretch;
}
.ablegeflaeche {
    border: 2px dashed var(--sut-gruen);
    border-radius: 10px;
    background: #f3f7f2;
    padding: 1.6rem 1rem;
    text-align: center;
    cursor: pointer;
}
.ablegeflaeche:focus { outline: 3px solid #b9d3b6; }
.ablegeflaeche.bereit { background: #e3efe1; border-style: solid; }
.ablegeflaeche.belegt { border-style: solid; background: #eef3ec; }
.ablege-symbol { font-size: 1.6rem; color: var(--sut-gruen); }
.ablege-datei { margin-top: 0.4rem; font-weight: 700; color: var(--sut-gruen-dunkel); }
.bemerkung-feld { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--grau); gap: 0.2rem; }
.bemerkung-feld input { padding: 0.45rem 0.6rem; border: 1px solid var(--rahmen); border-radius: 6px; font-size: 1rem; }

/* --- Listen -------------------------------------------------------------- */
.liste { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--rahmen); border-radius: 8px; overflow: hidden; }
.liste th, .liste td { padding: 0.6rem 0.7rem; text-align: left; border-bottom: 1px solid var(--rahmen); vertical-align: top; }
.liste th { background: #eef0ec; font-size: 0.85rem; }
.liste tr:last-child td { border-bottom: none; }
.liste.schmal td { font-size: 0.85rem; color: #444; }
.offen-zeile { background: #fdf9ec; }
.gesperrt-zeile { background: #f7f1f1; color: var(--grau); }
.aktionen { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.aktionen .reihe { margin: 0; }

.status-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.status-badge.fertig { background: #e7f0e5; color: var(--sut-gruen-dunkel); border: 1px solid var(--sut-gruen); }
.status-badge.offen { background: #fdf4e3; color: #8a6114; border: 1px solid #d9ac54; }
.status-badge.gesperrt { background: #fbeaea; color: var(--rot); border: 1px solid var(--rot); }

.passwort-kasten { background: #fdf9ec; border: 2px solid #d9ac54; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
.passwort-anzeige { font-family: Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.4rem 0; user-select: all; }

.pdf-rahmen { border: 1px solid var(--rahmen); border-radius: 8px; overflow: hidden; background: white; height: 70vh; margin: 1rem 0; }
.pdf-rahmen embed { width: 100%; height: 100%; }

/* --- Unterschriften-Editor ---------------------------------------------- */
.editor { margin: 1rem 0 2rem; }
.editor-leiste {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    background: white;
    border: 1px solid var(--rahmen);
    border-radius: 8px;
    padding: 0.7rem 1rem;
}
.variante-wahl { display: flex; gap: 1rem; flex-wrap: wrap; }
.variante-wahl .haken { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--sut-gruen-dunkel); }
.groesse-regler { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--grau); }
.groesse-regler input[type="range"] { width: 10rem; }
.seiten-wahl { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }

.blatt {
    position: relative;
    display: inline-block;
    margin: 0.8rem 0;
    border: 1px solid var(--rahmen);
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    max-width: 100%;
    /* Verhindert, dass das Ziehen der Unterschrift die Seite mitscrollt -
       auf dem Handy sonst kaum bedienbar. */
    touch-action: none;
}
.seitenbild { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.unterschrift {
    position: absolute;
    cursor: grab;
    touch-action: none;
    border: 1px dashed rgba(47, 107, 58, 0.8);
    background: rgba(47, 107, 58, 0.05);
}
.unterschrift.wird-bewegt { cursor: grabbing; border-style: solid; background: rgba(47, 107, 58, 0.12); }
.unterschrift img { width: 100%; height: 100%; pointer-events: none; user-select: none; }

/* Anfasser bewusst groß: Auf dem Handy trifft man mit dem Finger keine
   8-Pixel-Ecke. */
.anfasser {
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sut-gruen);
    border: 3px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: nwse-resize;
    touch-action: none;
}

@media (max-width: 640px) {
    .inhalt { margin: 1rem auto; }
    .editor-leiste { gap: 0.8rem; }
    .groesse-regler input[type="range"] { width: 100%; }
    .liste th, .liste td { padding: 0.5rem 0.4rem; font-size: 0.9rem; }
}