* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(180deg, #eef3f8 0%, #f7f9fc 100%);
    color: #1f2937;
}
a { color: #0f4c81; }
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0f4c81 0%, #116ea1 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(15, 76, 129, .25);
}
.topnav { display:flex; gap:12px; align-items:center; }
.topnav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
}
.topnav a:hover { background: rgba(255,255,255,.2); }
.topnav .user-pill { padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.13); font-size: .84rem; }
.logout-form { margin: 0; }
.logout-form button { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.15); box-shadow: none; }
.brand { display:flex; align-items:center; gap:14px; font-size:20px; font-weight:700; }
.brand img { display:block; max-width: 100%; }
.page { padding: 24px; }
.muted { opacity: .78; font-size: 12px; }
button, .btn, input[type=file]::file-selector-button {
    border: 0;
    background: linear-gradient(135deg, #0f4c81 0%, #116ea1 100%);
    color: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(17,110,161,.2);
}
button:hover, .btn:hover, input[type=file]::file-selector-button:hover { filter: brightness(1.04); }
input, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d5deea;
    border-radius: 12px;
    background: #fff;
}
label { display:block; font-weight:700; margin-bottom:6px; }
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(31,41,55,.08);
}
.data-table th {
    background: #edf5fb;
    color: #0f4c81;
    text-align: left;
    padding: 14px;
    font-size: 14px;
}
.data-table td {
    padding: 14px;
    border-top: 1px solid #edf2f7;
}
.note { margin-top: 8px; font-size: 13px; color: #64748b; }
.admin-shell {
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
    gap: 24px;
    align-items: start;
}
.sidebar {
    position: sticky;
    top: 24px;
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 14px 30px rgba(31,41,55,.08);
}
.sidebar h1 { margin: 0 0 6px 0; font-size: 28px; }
.sidebar .muted { display:block; margin-bottom: 20px; }
.sidebar-menu {
    display: grid;
    gap: 12px;
}
.sidebar-menu a {
    display: block;
    text-decoration: none;
    color: #1f2937;
    background: linear-gradient(180deg, #f8fbff 0%, #edf5fb 100%);
    border: 1px solid #d9e7f3;
    border-radius: 18px;
    padding: 14px 16px;
    font-weight: 700;
}
.sidebar-menu a small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-weight: 400;
}
.content-stack {
    display: grid;
    gap: 24px;
}
.admin-group {
    display: grid;
    gap: 18px;
}
.group-title {
    margin: 0;
    font-size: 26px;
    color: #0f4c81;
}
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.card {
    background: #fff;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 14px 30px rgba(31,41,55,.08);
    border: 1px solid #e7eef6;
}
.card.hero {
    background: linear-gradient(135deg, #ffffff 0%, #f2f8fc 100%);
}
.card h2 { margin-top: 0; margin-bottom: 16px; font-size: 24px; }
.card h3 { margin-top: 0; margin-bottom: 12px; font-size: 18px; color: #0f4c81; }
.card.danger {
    border: 1px solid #f4caca;
    background: linear-gradient(180deg, #fff 0%, #fff4f4 100%);
}
.form-row {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
}
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.logo-preview {
    min-height: 84px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding: 12px;
    border-radius: 18px;
    background: repeating-conic-gradient(#f4f7fa 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
    border: 1px solid #dbe5ef;
    margin-bottom: 16px;
}
.stat-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.stat {
    background: linear-gradient(180deg, #f8fbff 0%, #edf5fb 100%);
    border-radius: 18px;
    padding: 16px;
    border: 1px solid #d9e7f3;
}
.stat strong { display:block; font-size:28px; color:#0f4c81; margin-bottom:4px; }
.section-anchor { scroll-margin-top: 30px; }
@media (max-width: 980px) {
    .admin-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; }
}

/* Aktiver Sidebar-Link */
.sidebar-menu a.active {
    background: linear-gradient(135deg, #0f4c81 0%, #116ea1 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(15,76,129,.3);
}
.sidebar-menu a.active small { color: rgba(255,255,255,.75); }
.sidebar-menu a:hover:not(.active) {
    background: linear-gradient(180deg, #e2eeff 0%, #d5e8f7 100%);
    border-color: #a8c8e8;
}

/* Fahrtenbuch */
.triplog-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.triplog-filter {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.triplog-filter input, .triplog-filter select {
    padding: 8px 12px; border: 1px solid #d5deea; border-radius: 10px;
    background: #fff; font-size: .875rem; width: auto;
}
.badge-online  { background:#dcfce7; color:#15803d; padding:3px 10px; border-radius:99px; font-size:.75rem; font-weight:600; }
.badge-offline { background:#fef2f2; color:#dc2626; padding:3px 10px; border-radius:99px; font-size:.75rem; font-weight:600; }

/* Anmeldung und Benutzerverwaltung */
.auth-page { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 28px 12px; }
.auth-card { width: min(430px, 100%); background:#fff; border:1px solid #e2e8f0; border-radius:24px; padding:32px; box-shadow:0 24px 60px rgba(15,23,42,.14); }
.auth-card h1 { margin: 8px 0; color:#0f4c81; }
.auth-card > p { margin:0 0 24px; color:#64748b; }
.auth-icon { font-size:2.4rem; }
.form-group { margin-bottom:16px; }
.auth-check { display:flex; gap:9px; align-items:center; margin:4px 0 20px; font-weight:600; }
.auth-check input { width:auto; }
.auth-submit { width:100%; font-size:1rem; }
.validation-error { color:#b91c1c; font-size:.82rem; margin:6px 0; }
.validation-error:empty { display:none; }
.notice-success,.notice-error,.notice-info { padding:13px 16px; border-radius:12px; font-weight:650; }
.notice-success { background:#ecfdf5; color:#166534; border:1px solid #bbf7d0; }
.notice-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.notice-info { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; margin-bottom:18px; }
.user-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.user-header h2 { margin:0; }
.user-subline { display:block; margin-top:4px; color:#64748b; }
.user-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.user-actions form { margin:0; }
.btn-small,.btn-danger-small { border:0; border-radius:8px; padding:7px 10px; text-decoration:none; font-size:.78rem; font-weight:700; cursor:pointer; box-shadow:none; }
.btn-small { background:#e0f2fe; color:#075985; }
.btn-danger-small { background:#fee2e2; color:#991b1b; }
.btn-secondary { background:#e2e8f0; color:#334155; box-shadow:none; }
.form-card { width:min(680px, 100%); }
.table-scroll { overflow:auto; }
@media (max-width: 760px) {
    .topbar { align-items:flex-start; flex-direction:column; }
    .topnav { width:100%; flex-wrap:wrap; }
    .page { padding:14px; }
    .user-header { align-items:flex-start; flex-direction:column; }
}