/* =====================================================================
   design.css - gemeinsames Aussehen aller Verwaltungs-Unterseiten
   (gleicher Stil wie overview.php / verwaltung.php, "Design A").

   Wird in jeder Unterseite NACH deren eigenem <style> eingebunden und
   überschreibt damit Farben, Schriften, Tabellen, Knöpfe und Meldungen.
   Breiten und seitenspezifische Layouts bleiben in den Seiten selbst.
   ===================================================================== */

:root {
    --blau: #0b63b6;
    --blau-dunkel: #0b4f8a;
    --blau-hell: #eaf2fc;
    --rand: #e3e8ec;
    --rand-hell: #eef1f3;
    --grau: #6b7780;
    --text: #2b2f33;
    --gruen: #2e9d5b;
    --rot: #b3261e;
    --bg: #f3f6f8;
}

/* ---------- Grundlayout ---------- */
* { box-sizing: border-box; }
body {
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
    margin: 0;
    padding: 20px 16px 40px;
}
a { color: var(--blau); }
h1, h2 { color: var(--blau-dunkel); font-size: 20px; margin-top: 0; line-height: 1.3; }
h3 { font-size: 16px; color: var(--text); }
h4 { font-size: 14px; }

.card {
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 20px 22px;
}

/* ---------- Kopfleiste (aus layout.php) ---------- */
.wz-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin: 0 auto 16px;
    width: 100%;
}
/* Seiten, deren body als Flex-Zeile zentriert (z.B. reset_data.php,
   change_password.php): Kopfleiste über den Inhalt statt daneben */
body:has(> .wz-kopf) { flex-direction: column; align-items: center; justify-content: flex-start; height: auto; min-height: 100vh; }
.wz-kopf-links, .wz-kopf-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-bereich {
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; background: var(--blau-hell); color: var(--blau-dunkel);
}
.wz-bereich.admin { background: #f3e5f5; color: #6a1b9a; }
.wz-knopf {
    padding: 8px 13px; border-radius: 7px; text-decoration: none; font-weight: 600; font-size: 13px;
    border: 1px solid #d5dde3; background: #fff; color: var(--text);
    display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
.wz-knopf:hover { background: #f0f4f7; border-color: #c3cdd4; }

/* ---------- Formulare ---------- */
label { color: #3b454c; }
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="tel"], input[type="search"], input[type="password"], input[type="file"],
select, textarea {
    border: 1px solid #d5dde3;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--blau);
    outline-offset: 0;
    border-color: var(--blau);
}
input[type="file"] { padding: 6px; }

/* ---------- Knöpfe ---------- */
.btn, button,
.btn-speichern, .btn-download, .btn-uebernehmen, .btn-senden, .btn-save, .btn-primary,
.btn-upload, .btn-ersetzen, .btn-suchen, .btn-login, .btn-zurueck, .btn-cancel, .btn-grau,
.btn-danger, .sekundaer {
    font-family: inherit;
    border-radius: 7px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
/* Hauptaktion: blau */
.btn-speichern, .btn-download, .btn-uebernehmen, .btn-senden, .btn-save, .btn-primary,
.btn-upload, .btn-ersetzen, .btn-suchen, .btn-login {
    background: var(--blau);
    color: #fff;
    border: 1px solid var(--blau);
    padding: 10px 18px;
    font-size: 14px;
}
.btn-speichern:hover, .btn-download:hover, .btn-uebernehmen:hover, .btn-senden:hover, .btn-save:hover,
.btn-primary:hover, .btn-upload:hover, .btn-ersetzen:hover, .btn-suchen:hover, .btn-login:hover {
    background: var(--blau-dunkel);
    border-color: var(--blau-dunkel);
}
.btn-download.disabled { background: #cfd8dc; border-color: #cfd8dc; color: #fff; }
/* Nebenaktion: weiß mit Rand */
.btn-zurueck, .btn-cancel, .btn-grau, .sekundaer {
    background: #fff;
    color: var(--text);
    border: 1px solid #d5dde3;
    padding: 9px 16px;
    font-size: 13.5px;
}
.btn-zurueck:hover, .btn-cancel:hover, .btn-grau:hover, .sekundaer:hover { background: #f0f4f7; }
/* Gefährlich: rot */
.btn-danger { background: #d32f2f; color: #fff; border: 1px solid #d32f2f; padding: 10px 18px; font-size: 14px; }
.btn-danger:hover { background: #b71c1c; }

/* ---------- Tabellen ---------- */
table { border-collapse: collapse; font-size: 13.5px; }
th, td { border: 1px solid #e6eaed; padding: 8px 10px; }
th { background: #f5f7f9; color: #4a565e; font-weight: 600; }
tr:hover td { background: #fafcfd; }
.tabelle-scroll { border: 1px solid var(--rand); border-radius: 8px; }
.tabelle-scroll table { margin-top: 0 !important; }

/* ---------- Meldungen ---------- */
.status-ok, .success, .ok, .erfolg, .success-box, .ergebnis-ok {
    background: #e6f4ea; color: #1e6b3d; border: 1px solid #b9dfc6;
    border-radius: 8px; padding: 11px 14px; font-weight: 600;
}
.status-fehler, .error, .fehler, .ergebnis-fehler {
    background: #fdecea; color: var(--rot); border: 1px solid #f3c2c2;
    border-radius: 8px; padding: 11px 14px; font-weight: 600;
}
.status-warnung, .warn-box, .warnbox {
    background: #fff4e5; color: #6d4100; border: 1px solid #ffcc80;
    border-radius: 8px; padding: 11px 14px;
}
.ok-zeile { color: #1e6b3d; }
.fehler-zeile { color: var(--rot); }
.hinweis, .feld-hinweis { color: var(--grau); font-size: 13px; }

/* ---------- Login-Seite (aus layout.php) ---------- */
body.wz-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.wz-login-karte {
    background: #fff; border: 1px solid var(--rand); border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,.08); padding: 28px 26px; width: 100%; max-width: 380px; text-align: center;
}
.wz-login-karte h2 { margin: 10px 0 6px; font-size: 19px; }
.wz-login-karte p { color: var(--grau); font-size: 14px; margin: 0 0 16px; }
.wz-login-karte input[type="password"] { width: 100%; font-size: 16px; padding: 11px; text-align: center; margin-bottom: 12px; }
.wz-login-karte .btn-login { width: 100%; padding: 12px; font-size: 15px; }
.wz-login-karte .error { margin-bottom: 12px; font-size: 13.5px; }
.wz-login-karte .wz-login-zurueck { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--grau); text-decoration: none; }

@media (max-width: 700px) {
    body { padding: 14px 10px 30px; }
    .card { padding: 16px 14px; }
    h1, h2 { font-size: 18px; }
}