:root {
  --red: #b3141b;
  --red-dark: #8c0f15;
  --bg: #f3f4f6;
  --panel: #ffffff;
  --line: #d9dce1;
  --text: #1c1f24;
  --muted: #6b7280;
  --ok: #1b7f3b;
  --warn: #b45309;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); }
h1, h2, h3 { margin: 0 0 8px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--red-dark); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.topbar { display: flex; align-items: center; justify-content: space-between; background: var(--red); color: #fff; padding: 8px 16px; height: 44px; }
.topbar .brand { font-weight: 700; font-size: 16px; }
.topbar .tag { font-weight: 400; font-size: 12px; opacity: .85; margin-left: 8px; }
.topbar nav { display: flex; gap: 16px; align-items: center; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .who { opacity: .85; }

.btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 6px; cursor: pointer; font: inherit; text-decoration: none; }
.btn:hover { background: #f0f1f3; }
.btn.primary { background: var(--red); border-color: var(--red-dark); color: #fff; }
.btn.primary:hover { background: var(--red-dark); }
.btn.danger { color: #a40000; border-color: #e3b4b4; }
.btn.big { width: 100%; padding: 10px; font-size: 15px; font-weight: 600; margin-bottom: 6px; }

input, select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
label { display: block; font-size: 12px; color: var(--muted); }
label input, label select { margin-top: 2px; color: var(--text); }

.alert { padding: 8px 12px; border-radius: 6px; margin: 8px 0; word-break: break-word; }
.alert.err { background: #fde8e8; color: #8a1c1c; border: 1px solid #f3b8b8; }
.alert.ok { background: #e6f4ea; color: #14532d; border: 1px solid #b7e0c3; }
.alert.warn { background: #fff4e0; color: #7a4a00; border: 1px solid #f1d49b; }

.badge { padding: 1px 6px; border-radius: 10px; font-size: 11px; }
.badge.ok { background: #e6f4ea; color: var(--ok); }
.badge.warn { background: #fff4e0; color: var(--warn); }

/* Login / Setup */
body.auth { display: flex; align-items: center; justify-content: center; }
.auth-box { background: #fff; padding: 28px; border-radius: 10px; width: 360px; box-shadow: 0 6px 24px rgba(0,0,0,.12); border-top: 5px solid var(--red); }
.auth-box form { display: grid; gap: 12px; margin-top: 12px; }

/* App */
body.app { display: flex; flex-direction: column; height: 100vh; }
.layout { flex: 1; display: grid; grid-template-columns: 390px 1fr; min-height: 0; }
.panel { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 8px 14px 24px; }
.panel section { padding: 10px 0; border-bottom: 1px solid var(--line); }
.row { display: flex; gap: 8px; margin: 6px 0; align-items: center; }
.row.two > * { flex: 1; }
.row .full { width: 100%; }
#mapWrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; }

ul.results { list-style: none; margin: 4px 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; max-height: 190px; overflow-y: auto; }
ul.results:empty { display: none; }
ul.results li { padding: 6px 8px; cursor: pointer; border-bottom: 1px solid #eee; }
ul.results li:last-child { border-bottom: 0; }
ul.results li:hover { background: #fdecec; }
ul.results small { color: var(--muted); }

.subinfo { font-size: 12px; margin-top: 6px; }
.subinfo table { width: 100%; border-collapse: collapse; }
.subinfo td { padding: 2px 4px; border-bottom: 1px solid #f0f0f0; }
.subinfo td:first-child { color: var(--muted); width: 45%; }

table.grid { width: 100%; border-collapse: collapse; background: #fff; }
table.grid th, table.grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.grid th { background: #f7f7f8; font-size: 12px; }
table.grid.compact th, table.grid.compact td { padding: 4px 6px; font-size: 12px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #000; vertical-align: -2px; margin-right: 4px; }
.disclaimer { color: var(--muted); border-bottom: 0 !important; }

/* Admin */
main.admin { max-width: 1200px; margin: 16px auto; padding: 0 16px; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tabs a { padding: 8px 14px; background: #e5e7eb; border-radius: 6px 6px 0 0; text-decoration: none; color: var(--text); }
.tabs a.active { background: #fff; font-weight: 600; border-bottom: 2px solid var(--red); }
.inline-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 20px; }
.inline-form label { min-width: 160px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; background: #fff; padding: 16px; border-radius: 8px; }
.form-grid .check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.form-grid .check input { width: auto; margin: 0; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
form.mini { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
td.actions { white-space: nowrap; }

/* Leaflet-Details */
.wind-label { background: rgba(255,255,255,.9); border: 1px solid #333; border-radius: 4px; padding: 1px 5px; font-size: 11px; white-space: nowrap; }
.src-pin { width: 18px; height: 18px; border-radius: 50%; background: #000; border: 3px solid #fff; box-shadow: 0 0 0 2px #000; }
.leaflet-container { font: inherit; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 60vh; }
  .panel { max-height: 55vh; border-right: 0; border-bottom: 1px solid var(--line); }
  body.app { height: auto; }
}
@media print {
  .topbar, .panel { display: none !important; }
  .layout { display: block; }
  #mapWrap { position: static; height: 100vh; }
  #map { position: static; height: 100vh; }
}

.opacity-row { margin-top: 10px; }
.opacity-row input[type=range] { padding: 0; border: 0; margin-top: 4px; }

/* ===== Portal-Layout ===== */
.shell { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 230px; flex: none; background: #24272d; color: #e5e7eb; padding: 12px 0; overflow-y: auto; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: #d1d5db; text-decoration: none; border-left: 4px solid transparent; }
.sidebar a:hover { background: #31353c; color: #fff; }
.sidebar a.active { background: #3a1517; border-left-color: var(--red); color: #fff; font-weight: 600; }
.sidebar .ico { font-size: 18px; width: 24px; text-align: center; }
.content { flex: 1; min-width: 0; overflow-y: auto; }
.content.full { overflow: hidden; display: flex; }
.content.full .layout { flex: 1; min-width: 0; }
body.is-full .sidebar { width: 58px; }
body.is-full .sidebar a { padding: 11px 0; justify-content: center; }
body.is-full .sidebar .lbl { display: none; }

.page { max-width: 1100px; margin: 0 auto; padding: 22px 24px 48px; }
.page h1 { font-size: 24px; margin: 0 0 14px; }
.page h2 { font-size: 17px; margin: 22px 0 10px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.card.welcome { border-left: 4px solid var(--red); }
.news-card h3 { margin: 6px 0 4px; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--text); }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { color: var(--red); }
.news-card p { margin: 0; color: #374151; }
.news-card.pinned { border-left: 4px solid var(--red); background: #fffafa; }
.article h1 { margin-top: 10px; }
.article .body { font-size: 15px; line-height: 1.6; }
.meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-block; background: #eef0f3; border-radius: 10px; padding: 1px 9px; font-size: 12px; }
.chip.pin { background: #fde8e8; color: #8a1c1c; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; }
.tile:hover { border-color: var(--red); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.tile .ico { font-size: 28px; }
.tile.accent { background: var(--red); color: #fff; border-color: var(--red-dark); }
.tile.accent:hover { background: var(--red-dark); }
.two-col { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; }
.filelist { list-style: none; padding: 0; margin: 0; }
.filelist li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.filters { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.filters input { flex: 1; min-width: 200px; width: auto; }
.filters select { width: auto; }
.form-stack { display: grid; gap: 12px; }
.form-stack textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.form-stack .check, label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.form-stack .check input, label.check input { width: auto; margin: 0; }
.upload-box summary { cursor: pointer; margin-bottom: 8px; }
.pager { display: flex; gap: 6px; margin-top: 12px; }
table.files td { vertical-align: top; }
.nowrap { white-space: nowrap; }
.perm-form { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.perm-form label { display: flex; align-items: center; gap: 6px; color: var(--text); }
.perm-form input { width: auto; margin: 0; }
.alert.warn { background: #fff4e0; color: #7a4a00; border: 1px solid #f1d49b; }
a { color: #9b1118; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: auto; padding: 0; }
  .sidebar nav { flex-direction: row; overflow-x: auto; }
  .sidebar a { border-left: 0; border-bottom: 3px solid transparent; padding: 10px 14px; white-space: nowrap; }
  .sidebar a.active { border-bottom-color: var(--red); }
  body.is-full .sidebar { width: auto; }
  body.is-full .sidebar .lbl { display: inline; }
  .two-col { grid-template-columns: 1fr; }
  .content { overflow: visible; }
  body.app { height: auto; min-height: 100vh; }
}
@media print { .sidebar { display: none !important; } }

/* ===== Kalender ===== */
.cal-nav { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.cal-nav strong { min-width: 160px; text-align: center; font-size: 17px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal-head { background: #f7f7f8; padding: 6px; text-align: center; font-weight: 600; font-size: 12px; }
.cal-day { background: #fff; min-height: 96px; padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day.other { background: #f6f6f7; color: var(--muted); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--red); }
.cal-num { font-size: 12px; font-weight: 600; }
.cal-ev { display: block; color: #fff; text-decoration: none; font-size: 11.5px; padding: 1px 5px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev:hover { filter: brightness(.9); }
.ev-detail { margin-top: 14px; }
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.color-picker label { cursor: pointer; }
.color-picker input { position: absolute; opacity: 0; width: 0; }
.color-picker span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.color-picker input:checked + span { box-shadow: 0 0 0 3px #000; }
.color-picker input:focus-visible + span { outline: 2px solid #1d6fd1; outline-offset: 3px; }
.form-stack .row.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* ===== Übungsauswertung ===== */
.page.wide { max-width: 1500px; }
.ex-wrap { overflow-x: auto; }
table.ex { border-collapse: collapse; background: #fff; font-size: 13px; width: 100%; }
table.ex th, table.ex td { border: 1px solid #333; padding: 3px 6px; text-align: center; }
table.ex .ex-title { background: #ea9999; font-size: 22px; padding: 6px; }
table.ex thead th { background: #93c47d; }
table.ex .ex-name { text-align: left; min-width: 170px; background: inherit; white-space: nowrap; }
table.ex tbody tr:nth-child(even) td { background: #e5e5e5; }
table.ex td.ex-cell input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
table.ex td.ex-cell input:disabled { cursor: default; }
table.ex td.ex-pct.good { background: #6aa84f !important; font-weight: 600; }
table.ex td.ex-pct.bad { background: #ea9999 !important; }
table.ex tbody tr:hover td { filter: brightness(.96); }
.role-matrix td.center, .role-matrix th:not(:first-child) { text-align: center; }
.role-matrix input { width: auto; }
@media (max-width: 860px) { .cal-day { min-height: 64px; } .cal-ev { font-size: 10px; } }

/* ===== Logo / Kopfzeile ===== */
.topbar { background: #fff; color: var(--text); border-bottom: 4px solid var(--red); height: 56px; }
.topbar a, .topbar .who { color: var(--text); }
.topbar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 15px; }
.topbar .brand:hover { text-decoration: none; }
.topbar .tag { color: var(--muted); }
.logo-top { height: 40px; width: auto; display: block; }
.auth-box .logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 12px; }
.sidebar .count { margin-left: auto; background: var(--red); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 700; }
@media (max-width: 560px) { .topbar .brand span { display: none; } }

.auth-box h1, .auth-box > p { text-align: center; }

body.auth { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url('login-bg.jpg') center / cover no-repeat fixed; }
.auth-box { box-shadow: 0 10px 40px rgba(0,0,0,.45); }

/* Kacheln immer nebeneinander */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow-x: auto; }
.tile { min-width: 0; }
[hidden] { display: none !important; }

/* Kacheln: immer eine Reihe, schrumpfen passend zur Seitenbreite (kein Schieber) */
.tiles { overflow: visible; gap: clamp(6px, 1vw, 12px); }
.tile { padding: clamp(8px, 1.2vw, 16px); overflow-wrap: anywhere; hyphens: auto; text-align: center; align-items: center; }
.tile strong { font-size: clamp(11px, 1.15vw, 15px); line-height: 1.2; }
.tile .small { font-size: clamp(9px, .85vw, 12px); line-height: 1.25; }
.tile .ico { font-size: clamp(20px, 2.4vw, 28px); }
@media (max-width: 560px) { .tile .small { display: none; } }

.logo-top.patch { height: 46px; }

/* ===== Profil / Avatar ===== */
.topbar .who { display: flex; align-items: center; gap: 8px; text-decoration: none; opacity: 1; }
.topbar .who:hover span:last-child { text-decoration: underline; }
.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex: none; background: #e5e7eb; }
.avatar.small { width: 32px; height: 32px; font-size: 14px; }
.avatar.big { width: 140px; height: 140px; font-size: 56px; }
.avatar.initial { background: var(--red); color: #fff; font-weight: 700; }
.avatar-big { display: flex; justify-content: center; margin-bottom: 12px; }
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }

/* Verfasser mit Profilbild */
.avatar.tiny { width: 22px; height: 22px; font-size: 11px; }
.author { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; color: var(--text); font-weight: 600; }
.meta-line { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ===== Dunkelmodus (html[data-theme="dark"]; Umschalter oben rechts) ===== */
.theme-btn { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.theme-btn:hover { background: rgba(128,128,128,.18); }
.theme-float { position: fixed; top: 12px; right: 12px; z-index: 50; background: rgba(255,255,255,.85); }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418; --panel: #1c1f24; --line: #343942; --text: #e6e8eb; --muted: #9aa1ab;
  --ok: #5fcf85; --warn: #f0a74a;
}
html[data-theme="dark"] .theme-float { background: rgba(28,31,36,.85); }
html[data-theme="dark"] a { color: #ff8a90; }
html[data-theme="dark"] .btn { background: #262a31; color: var(--text); }
html[data-theme="dark"] .btn:hover { background: #30353d; }
html[data-theme="dark"] .btn.primary { background: var(--red); color: #fff; }
html[data-theme="dark"] .btn.primary:hover { background: var(--red-dark); }
html[data-theme="dark"] .btn.danger { color: #ff8a8a; border-color: #6b3030; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] .form-stack textarea, html[data-theme="dark"] textarea { background: #14171b; color: var(--text); border-color: var(--line); }
html[data-theme="dark"] input:disabled { background: #1c1f24; color: var(--muted); }
html[data-theme="dark"] .alert.err { background: #3a1c1c; color: #ffb4b4; border-color: #6b3030; }
html[data-theme="dark"] .alert.ok { background: #1b3325; color: #a8e6bd; border-color: #2f5a3f; }
html[data-theme="dark"] .alert.warn { background: #3a2e17; color: #f3cd8b; border-color: #6b5426; }
html[data-theme="dark"] .badge.ok { background: #1b3325; }
html[data-theme="dark"] .badge.warn { background: #3a2e17; }
html[data-theme="dark"] .auth-box, html[data-theme="dark"] .card, html[data-theme="dark"] .tile, html[data-theme="dark"] .inline-form,
html[data-theme="dark"] .form-grid, html[data-theme="dark"] table.grid, html[data-theme="dark"] .cal-day { background: var(--panel); }
html[data-theme="dark"] .tile.accent { background: var(--red); }
html[data-theme="dark"] .auth-box { box-shadow: 0 10px 40px rgba(0,0,0,.7); }
html[data-theme="dark"] .news-card.pinned { background: #271b1c; }
html[data-theme="dark"] .news-card p { color: #c5cad1; }
html[data-theme="dark"] .chip { background: #2a2e35; color: var(--text); }
html[data-theme="dark"] .chip.pin { background: #4a2326; color: #ffb4b4; }
html[data-theme="dark"] table.grid th, html[data-theme="dark"] .cal-head { background: #23272d; }
html[data-theme="dark"] .subinfo td { border-bottom-color: #2a2e35; }
html[data-theme="dark"] ul.results li { border-bottom-color: #2a2e35; }
html[data-theme="dark"] ul.results li:hover { background: #2f2023; }
html[data-theme="dark"] .tabs a { background: #262a31; }
html[data-theme="dark"] .tabs a.active { background: var(--panel); }
html[data-theme="dark"] .cal-day.other { background: #17191d; }
html[data-theme="dark"] .color-picker span { border-color: var(--panel); }
html[data-theme="dark"] .color-picker input:checked + span { box-shadow: 0 0 0 3px #fff; }
html[data-theme="dark"] .avatar { background: #2a2e35; }
html[data-theme="dark"] .avatar.initial { background: var(--red); }
html[data-theme="dark"] .topbar { background: #1c1f24; color: var(--text); }
html[data-theme="dark"] .topbar a, html[data-theme="dark"] .topbar .who { color: var(--text); }
html[data-theme="dark"] .sidebar { background: #14161a; }
html[data-theme="dark"] .wind-label { background: rgba(28,31,36,.92); color: var(--text); }
/* Übungsauswertung */
html[data-theme="dark"] table.ex { background: var(--panel); color: var(--text); }
html[data-theme="dark"] table.ex th, html[data-theme="dark"] table.ex td { border-color: #555b66; }
html[data-theme="dark"] table.ex .ex-title { background: #7a3535; color: #fff; }
html[data-theme="dark"] table.ex thead th { background: #3c6330; color: #fff; }
html[data-theme="dark"] table.ex tbody tr:nth-child(even) td { background: #252930; }
html[data-theme="dark"] table.ex td.ex-pct.good { background: #3f7d2c !important; color: #fff; }
html[data-theme="dark"] table.ex td.ex-pct.bad { background: #7a3535 !important; color: #fff; }
html[data-theme="dark"] .panel { background: var(--panel); }
html[data-theme="dark"] .panel section { border-bottom-color: var(--line); }

/* Kacheln: alte auto-fit-Spaltenregel aufheben, alle Kacheln gleich breit in einer Reihe */
.tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* Logo: im Dunkelmodus die helle Schriftvariante, ohne weisses Feld */
.logo-dark { display: none !important; }
html[data-theme="dark"] .logo-light { display: none !important; }
html[data-theme="dark"] .logo-top.logo-dark { display: block !important; }
html[data-theme="dark"] .auth-box .logo.logo-dark { display: block !important; }

/* Dunkelmodus: Seitenleiste weiss */
html[data-theme="dark"] .sidebar a, html[data-theme="dark"] .sidebar a:hover, html[data-theme="dark"] .sidebar a.active { color: #fff; }

/* Dunkelmodus: Kacheln weiss */
html[data-theme="dark"] .tile, html[data-theme="dark"] .tile:hover, html[data-theme="dark"] .tile strong, html[data-theme="dark"] .tile .small { color: #fff; }

/* ===== Tablet / Handy ===== */
.nav-toggle { display: none; background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 6px; width: 44px; height: 44px; font-size: 22px; line-height: 1; cursor: pointer; margin-right: 8px; flex: none; }
.nav-backdrop { display: none; }
.auth-box { width: min(360px, 92vw); }

@media (max-width: 1024px) {
  /* Seitenleiste wird zum ausklappbaren Menü */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { padding: 6px 12px; }
  .topbar .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .shell { flex-direction: row; }
  .sidebar { position: fixed; top: 56px; bottom: 0; left: 0; width: 280px; max-width: 86vw; z-index: 60; padding: 8px 0;
             transform: translateX(-102%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(0,0,0,.4); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 55; }
  body.nav-open { overflow: hidden; }
  .sidebar nav { flex-direction: column; overflow: visible; }
  .sidebar a, body.is-full .sidebar a { border-left: 4px solid transparent; border-bottom: 0; padding: 15px 20px; white-space: normal; justify-content: flex-start; }
  .sidebar a.active { border-left-color: var(--red); border-bottom-color: transparent; }
  body.is-full .sidebar, body.is-full .sidebar .lbl { width: 280px; }
  body.is-full .sidebar .lbl { display: inline; width: auto; }
  .content { min-width: 0; }
  .page { padding: 16px 14px 40px; }
  /* Tabellen seitlich scrollbar statt die Seite zu sprengen */
  table.grid { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main.admin { padding: 0 12px; }
  .tabs { flex-wrap: wrap; }
  .profile-grid { grid-template-columns: 1fr; }
}

/* Touch-Bedienung: größere Ziele, kein Zoom beim Tippen in Felder (iOS) */
@media (pointer: coarse), (max-width: 1024px) {
  .btn { min-height: 44px; padding: 10px 16px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { min-height: 44px; font-size: 16px; }
  .perm-form label, label.check { min-height: 32px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .tabs a { padding: 12px 18px; }
  .theme-btn { width: 44px; height: 44px; }
  .filelist li { padding: 10px 0; }
  table.ex td.ex-cell input { width: 26px; height: 26px; }
  .cal-ev { padding: 4px 6px; }
  .cal-nav .btn { min-width: 44px; }
  ul.results li { padding: 12px 10px; }
}

/* Ausbreitung auf Tablet: Bedienfeld schmaler, Karte nebendran; im Hochformat untereinander */
@media (min-width: 861px) and (max-width: 1024px) {
  .layout { grid-template-columns: 340px 1fr; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 70vh; }
  .panel { max-height: none; overflow: visible; }
  .content.full { display: block; overflow: visible; }
}

/* Telefon */
@media (max-width: 700px) {
  .topbar .who span:last-child { display: none; }
  .tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .page h1 { font-size: 20px; }
  .cal-day { min-height: 56px; }
  .cal-ev { font-size: 0; padding: 0; height: 8px; border-radius: 4px; }  /* nur farbige Balken, Details per Klick */
  .page-head { flex-wrap: wrap; gap: 8px; }
}

/* Ausbreitung im Hochformat: Karte oben (bleibt beim Scrollen sichtbar), Bedienfeld darunter */
@media (max-width: 860px) {
  .layout { display: flex; flex-direction: column; }
  #mapWrap { order: -1; position: sticky; top: 0; z-index: 5; height: 46vh; min-height: 280px; flex: none; border-bottom: 3px solid var(--red); }
  .panel { flex: none; border-right: 0; }
}