/* ================================================================
   worktrain Hub – Stylesheet
   ================================================================ */
:root {
    --primary:#1F3A5A; --mid:#2C4F72; --accent:#4A6D8C;
    --light:#D6E4F0; --bg:#F4F6F9; --text:#222222;
    --gray:#5B6B7C; --line:#E0E6EE;
    --ok-bg:#E3F3E8; --ok-text:#1F6B3A;
    --fehler-bg:#F8E3E3; --fehler-text:#9B2C2C;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
    font-family:Arial, Helvetica, sans-serif; color:var(--text);
    background:var(--bg); line-height:1.5;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2 { line-height:1.3; }
code {
    font-family:Consolas, Menlo, monospace; font-size:.9em;
    background:#EEF1F5; padding:1px 5px; border-radius:4px;
}

/* --- Kopfzeile --- */
.topbar { background:var(--primary); }
.topbar-inner {
    max-width:1080px; margin:0 auto; padding:14px 24px;
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.marke { display:flex; align-items:center; gap:12px; }
.marke:hover { text-decoration:none; }
.marke img { height:30px; width:auto; display:block; }
.hub-label {
    color:#A8C4DC; font-size:12px; font-weight:bold;
    letter-spacing:.18em; text-transform:uppercase;
    padding-left:12px; border-left:1px solid #3A567A;
}
.hauptnav {
    margin-left:auto; display:flex; align-items:center;
    gap:18px; flex-wrap:wrap;
}
.hauptnav a {
    color:#D6E4F0; font-size:14px; padding:4px 0;
    border-bottom:2px solid transparent;
}
.hauptnav a:hover { color:#fff; text-decoration:none; }
.hauptnav a.aktiv { color:#fff; border-bottom-color:#A8C4DC; }
.nav-user { color:#8FA8C2; font-size:14px; }
.nav-trenner { width:1px; height:18px; background:#3A567A; }

/* --- Layout --- */
.inhalt { max-width:1080px; margin:0 auto; padding:34px 24px 50px; }
.intro { margin-bottom:24px; }
.intro h1 { font-size:25px; color:var(--primary); margin-bottom:6px; }
.intro p { color:var(--gray); font-size:15px; max-width:640px; }
.intro-mit-aktion {
    display:flex; align-items:flex-start;
    justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.seitenfuss {
    max-width:1080px; margin:0 auto; padding:22px 24px 32px;
    color:#9AA6B2; font-size:13px; border-top:1px solid var(--line);
}

/* --- Meldungen --- */
.meldung-ok, .meldung-fehler {
    padding:11px 15px; border-radius:9px; font-size:14px; margin-bottom:16px;
}
.meldung-ok     { background:var(--ok-bg);     color:var(--ok-text); }
.meldung-fehler { background:var(--fehler-bg); color:var(--fehler-text); }
.hinweis {
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:22px 24px; color:var(--gray); font-size:15px;
}

/* --- Tool-Raster --- */
.tool-raster {
    display:grid; gap:22px;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.tool {
    display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:24px; min-height:206px;
}
a.tool {
    color:var(--text);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.tool:hover {
    transform:translateY(-3px); border-color:var(--accent);
    box-shadow:0 10px 24px rgba(31,58,90,.13); text-decoration:none;
}
a.tool:focus-visible {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px var(--light), 0 10px 24px rgba(31,58,90,.13);
}
.tool-icon {
    width:48px; height:48px; border-radius:11px;
    background:var(--light); color:var(--mid);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
}
.tool-icon svg { width:25px; height:25px; }
.tool h2 { font-size:17px; color:var(--primary); margin-bottom:6px; }
.tool p { font-size:14px; color:var(--gray); flex:1; }
.tool-fuss {
    margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; font-size:13px;
}
.tool-fuss .oeffnen { color:var(--accent); font-weight:bold; }
.tool-fuss .zugang {
    color:#8A97A6; display:flex; align-items:center; gap:5px;
}
.tool-fuss .zugang svg { width:13px; height:13px; }
.platzhalter {
    border-style:dashed; background:transparent;
    align-items:center; justify-content:center; text-align:center;
}
.platzhalter .tool-icon { background:#EAEEF3; color:#A8B4C0; margin-bottom:12px; }
.platzhalter h2 { color:#8A97A6; font-size:15px; }
.platzhalter p { color:#A8B4C0; flex:none; }

/* --- Unter-Navigation --- */
.subnav {
    display:flex; gap:6px; margin-bottom:22px;
    border-bottom:1px solid var(--line);
}
.subnav a {
    color:var(--gray); font-size:14px; padding:9px 14px;
    border-bottom:2px solid transparent;
}
.subnav a:hover { color:var(--primary); text-decoration:none; }
.subnav a.aktiv {
    color:var(--primary); font-weight:bold; border-bottom-color:var(--primary);
}

/* --- Karten / Formulare --- */
.karte {
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:26px; max-width:660px;
}
.karte.schmal { max-width:420px; }
.formular .feld { margin-bottom:18px; }
.feld label, .feld-titel {
    display:block; font-size:14px; font-weight:bold;
    color:var(--primary); margin-bottom:6px;
}
.feld input[type=text], .feld input[type=email],
.feld input[type=password], .feld input[type=number],
.feld select {
    width:100%; padding:9px 11px; font-size:14px; font-family:inherit;
    border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text);
}
.feld input:focus, .feld select:focus {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px var(--light);
}
.feld-hinweis {
    display:block; font-size:12.5px; color:#8A97A6; margin-top:5px;
}
.mini-hinweis { font-size:12.5px; color:#9AA6B2; }
.check-zeile {
    display:flex; align-items:center; gap:9px;
    font-weight:normal; color:var(--text); font-size:14px; margin-bottom:0;
}
.check-zeile input { width:16px; height:16px; flex:none; }
.check-liste {
    display:flex; flex-direction:column; gap:10px;
    border:1px solid var(--line); border-radius:9px;
    padding:13px 15px; margin-bottom:8px;
}
.formular-aktionen {
    display:flex; gap:10px; align-items:center;
    margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}
.loeschen-form {
    margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
}

/* --- Buttons --- */
.btn {
    display:inline-block; padding:9px 18px; font-size:14px; font-family:inherit;
    border-radius:8px; border:1px solid transparent; cursor:pointer;
    text-align:center; line-height:1.4;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--mid); }
.btn-sek {
    background:#fff; color:var(--primary); border-color:var(--line);
}
.btn-sek:hover { background:#F0F3F7; }
.btn-gefahr { background:#fff; color:#9B2C2C; border-color:#E4C4C4; }
.btn-gefahr:hover { background:#F8E3E3; }
.btn-block { display:block; width:100%; }

/* --- Tabelle --- */
.tabelle-rahmen {
    background:#fff; border:1px solid var(--line);
    border-radius:14px; overflow:hidden;
}
.tabelle { width:100%; border-collapse:collapse; }
.tabelle th {
    background:var(--primary); color:#fff; text-align:left;
    font-size:13px; padding:11px 14px; font-weight:bold;
}
.tabelle td {
    padding:11px 14px; font-size:14px; border-top:1px solid var(--line);
}
.tabelle tbody tr:hover { background:#F6F8FB; }
.tabelle .zeile-inaktiv td { color:#9AA6B2; }
.td-aktion { text-align:right; white-space:nowrap; }

/* --- Abzeichen --- */
.badge {
    display:inline-block; padding:3px 9px; border-radius:20px;
    font-size:12px; font-weight:bold; white-space:nowrap;
}
.badge-admin   { background:var(--primary); color:#fff; }
.badge-gl      { background:var(--accent);  color:#fff; }
.badge-ma      { background:var(--light);   color:var(--mid); }
.badge-aktiv   { background:var(--ok-bg);   color:var(--ok-text); }
.badge-inaktiv { background:#EAEEF3;        color:#8A97A6; }

/* --- Login --- */
.login-body {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:20px;
}
.login-wrap { width:100%; max-width:380px; }
.login-card {
    background:#fff; border:1px solid var(--line); border-radius:14px;
    overflow:hidden; box-shadow:0 12px 32px rgba(31,58,90,.12);
}
.login-kopf {
    background:var(--primary); padding:22px 28px;
    display:flex; align-items:center; gap:12px;
}
.login-kopf img { height:27px; width:auto; }
.login-sub {
    color:#A8C4DC; font-size:12px; font-weight:bold;
    letter-spacing:.18em; text-transform:uppercase;
    padding-left:11px; border-left:1px solid #3A567A;
}
.login-feld { padding:28px; }
.login-feld h1 { font-size:20px; color:var(--primary); margin-bottom:18px; }
.login-feld label {
    display:block; font-size:14px; font-weight:bold;
    color:var(--primary); margin-bottom:6px;
}
.login-feld input {
    width:100%; padding:10px 12px; font-size:14px; font-family:inherit;
    border:1px solid var(--line); border-radius:8px; margin-bottom:16px;
}
.login-feld input:focus {
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--light);
}
.login-feld .btn { margin-top:4px; }

/* --- Responsiv --- */
@media (max-width:600px) {
    .topbar-inner { gap:12px; }
    .hauptnav { gap:14px; }
    .nav-trenner { display:none; }
    .intro h1 { font-size:21px; }
    .tool-raster { grid-template-columns:1fr; }
    .karte { padding:20px; }
    .formular-aktionen { flex-wrap:wrap; }
    .tabelle-rahmen { overflow-x:auto; }
}