/* Verwaltung von marina.direct – lokale Nachbildung.
   Farben, Abstände, Rundungen und Schattierungen sind aus dem Design-System von
   marina.direct übernommen, damit die lokale Verwaltung genauso aussieht.
   Keine externen Schriften oder Bibliotheken – alles liegt hier. */

:root {
  /* Grundfarben */
  --md-navy-900:#001a3a; --md-navy-800:#002b5c; --md-navy-700:#003a75;
  --md-navy-600:#004080; --md-navy-500:#0066cc;
  --md-wave-700:#0077b0; --md-wave-500:#00a8e8; --md-wave-300:#7fd4f4; --md-wave-100:#e0f7ff;
  --md-sky-200:#cce4f7; --md-sky-100:#e8f4fd;
  --md-grey-900:#101c26; --md-grey-800:#1d2a36; --md-grey-700:#2f3f4e; --md-grey-600:#445667;
  --md-grey-500:#5f7385; --md-grey-400:#8599ab; --md-grey-300:#b3c6d5; --md-grey-200:#d0dee8;
  --md-grey-100:#e4edf3; --md-grey-50:#f2f7fa; --md-white:#fff;
  --md-sand-100:#f5f0e8; --md-sand-200:#d9c7a1;

  --tone-success-bg:#e2f4ea; --tone-success-fg:#17663f;
  --tone-warning-bg:#fdf1dd; --tone-warning-fg:#8a5300;
  --tone-danger-bg:#fbe6e6;  --tone-danger-fg:#8c2323;
  --tone-info-bg:#e3f1fa;    --tone-info-fg:#12557f;
  --tone-neutral-bg:#e4edf3; --tone-neutral-fg:#445667;

  /* Rollen */
  --bg:#f2f7fa; --bg-raised:#fff; --bg-sunken:#e8f4fd; --bg-brand:#002b5c;
  --text:#101c26; --text-muted:#445667; --text-subtle:#5f7385; --text-link:#004080;
  --text-accent:#0077b0; --text-inverse:#fff;
  --border:#d0dee8; --border-strong:#b3c6d5; --border-focus:#00a8e8;
  --on-sea:#fff; --on-sea-muted:rgba(255,255,255,.78);
  --gradient-sea:linear-gradient(135deg,#002b5c 0%,#004080 50%,#004a8f 100%);

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(6,22,38,.08);
  --shadow-md:0 4px 14px rgba(6,22,38,.10);
  --shadow-lg:0 12px 32px rgba(6,22,38,.16);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem;

  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.8125rem; --text-base:.9375rem;
  --text-md:1rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem;

  --font-sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;

  --seite:248px;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:var(--text-base)/1.55 var(--font-sans);
  font-variant-numeric:tabular-nums;
}
a { color:var(--text-link); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0 0 var(--space-3); line-height:1.2; letter-spacing:-.01em; font-weight:700; }
h1 { font-size:var(--text-2xl); }
h2 { font-size:var(--text-xl); }
h3 { font-size:var(--text-lg); }
p  { margin:0 0 var(--space-3); }
:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; border-radius:var(--radius-sm); }

/* ── Gerüst: Seitenleiste + Inhalt ─────────────────────────────────────── */
.layout { display:grid; grid-template-columns:var(--seite) 1fr; min-height:100vh; }
.layout--blank { grid-template-columns:1fr; }

.seite {
  background:var(--gradient-sea); color:var(--on-sea);
  display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-5) var(--space-4);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.marke { display:flex; align-items:center; gap:10px; color:var(--on-sea); text-decoration:none; }
.marke:hover { text-decoration:none; }
.marke svg { flex:none; }
.marke b { display:block; font-size:var(--text-md); font-weight:700; letter-spacing:-.01em; }
.marke span { display:block; font-size:var(--text-xs); color:var(--on-sea-muted); }

.nav { display:flex; flex-direction:column; gap:2px; }
.nav-gruppe {
  margin:var(--space-4) 0 var(--space-1); padding:0 10px;
  font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.55); font-weight:600;
}
.nav-gruppe:first-child { margin-top:0; }
.nav a {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:var(--radius-md); color:var(--on-sea-muted);
  font-size:var(--text-base); text-decoration:none; transition:background .12s, color .12s;
}
.nav a:hover { background:rgba(255,255,255,.10); color:var(--on-sea); text-decoration:none; }
.nav a.aktiv { background:rgba(255,255,255,.16); color:var(--on-sea); font-weight:600; }
.nav a .zahl {
  margin-left:auto; background:var(--md-wave-500); color:var(--md-navy-900);
  border-radius:var(--radius-pill); padding:1px 7px; font-size:var(--text-2xs); font-weight:700;
}
.nav svg { flex:none; opacity:.9; }
.seite-fuss { margin-top:auto; font-size:var(--text-xs); color:rgba(255,255,255,.55); }
.seite-fuss a { color:var(--on-sea-muted); }

.inhalt { display:flex; flex-direction:column; min-width:0; }
.kopf {
  display:flex; align-items:center; gap:var(--space-4);
  padding:0 var(--space-6); height:3.75rem;
  background:var(--bg-raised); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:5;
}
.kopf .titel { font-weight:600; font-size:var(--text-md); }
.kopf-rechts { margin-left:auto; display:flex; align-items:center; gap:var(--space-3); color:var(--text-muted); font-size:var(--text-sm); }
.kopf .ort { color:var(--text-subtle); font-size:var(--text-sm); }
.wrap { padding:var(--space-6); max-width:1180px; width:100%; }
.lead { color:var(--text-muted); max-width:70ch; }
.klein { font-size:var(--text-sm); color:var(--text-muted); }
.leer { color:var(--text-subtle); padding:var(--space-5); background:var(--bg-raised);
        border:1px dashed var(--border-strong); border-radius:var(--radius-lg); text-align:center; }

/* ── Karten und Kacheln ────────────────────────────────────────────────── */
.karte {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-5); margin:0 0 var(--space-5);
}
.karte > h2:first-child, .karte > h3:first-child { margin-top:0; }

.kacheln { display:grid; gap:var(--space-4); margin:0 0 var(--space-5);
           grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.kachel {
  background:var(--bg-raised); border:1px solid var(--border); border-left:3px solid var(--md-wave-500);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:2px;
}
.kachel b { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.kachel span { font-size:var(--text-sm); color:var(--text-muted); }
.kachel.warnt { border-left-color:var(--tone-warning-fg); }
.kachel.warnt b { color:var(--tone-warning-fg); }
.kachel a { color:inherit; }

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.tab {
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  margin:0 0 var(--space-5); font-size:var(--text-base);
}
.tab th, .tab td { padding:10px 14px; text-align:left; vertical-align:top; }
.tab thead th {
  background:var(--md-grey-50); color:var(--text-muted);
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.tab tbody tr + tr td { border-top:1px solid var(--md-grey-100); }
.tab tbody tr:hover td { background:var(--md-grey-50); }
.tab td.zahl, .tab th.zahl { text-align:right; font-variant-numeric:tabular-nums; }
.tab-rollt { overflow-x:auto; margin:0 0 var(--space-5); }
.tab-rollt .tab { margin:0; min-width:720px; }

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius-md); border:1px solid transparent;
  background:var(--md-navy-800); color:var(--text-inverse);
  font:550 var(--text-sm)/1.2 var(--font-sans); cursor:pointer;
  text-decoration:none; transition:background .12s, box-shadow .12s, transform .06s;
}
.btn:hover { background:var(--md-navy-700); text-decoration:none; box-shadow:var(--shadow-sm); }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn.hell { background:var(--bg-raised); color:var(--text); border-color:var(--border-strong); }
.btn.hell:hover { background:var(--md-grey-50); }
.btn.akzent { background:var(--md-wave-700); }
.btn.akzent:hover { background:var(--md-wave-500); color:var(--md-navy-900); }
.btn.gefahr { background:var(--tone-danger-fg); }
.btn.gefahr:hover { background:#6f1c1c; }
.btn.mini { padding:4px 10px; font-size:var(--text-xs); }
.tun { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }

/* ── Abzeichen ─────────────────────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:5px; padding:2px 10px;
  border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:600;
  background:var(--tone-neutral-bg); color:var(--tone-neutral-fg); white-space:nowrap;
}
.pill.ok    { background:var(--tone-success-bg); color:var(--tone-success-fg); }
.pill.warn  { background:var(--tone-warning-bg); color:var(--tone-warning-fg); }
.pill.gefahr{ background:var(--tone-danger-bg);  color:var(--tone-danger-fg); }
.pill.info  { background:var(--tone-info-bg);    color:var(--tone-info-fg); }
.pill.pub   { background:var(--tone-success-bg); color:var(--tone-success-fg); }

/* ── Hinweise ──────────────────────────────────────────────────────────── */
.hinweis {
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  border:1px solid transparent; border-left-width:3px; margin:0 0 var(--space-4);
  background:var(--tone-info-bg); color:var(--tone-info-fg); border-left-color:var(--tone-info-fg);
}
.hinweis.ok     { background:var(--tone-success-bg); color:var(--tone-success-fg); border-left-color:var(--tone-success-fg); }
.hinweis.warn   { background:var(--tone-warning-bg); color:var(--tone-warning-fg); border-left-color:var(--tone-warning-fg); }
.hinweis.fehler,
.hinweis.gefahr { background:var(--tone-danger-bg);  color:var(--tone-danger-fg);  border-left-color:var(--tone-danger-fg); }
.hinweis a { color:inherit; text-decoration:underline; }

/* ── Formulare ─────────────────────────────────────────────────────────── */
.formular { display:grid; gap:var(--space-4); }
.formular.reihe { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:end; }
.formular.reihe > .btn, .formular.reihe > div > .btn { justify-self:start; }
.feld { display:flex; flex-direction:column; gap:4px; min-width:0; }
.feld label { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); }
.feld input, .feld select, .feld textarea,
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  width:100%; padding:8px 12px; font:var(--text-base)/1.4 var(--font-sans); color:var(--text);
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  transition:border-color .12s, box-shadow .12s;
}
.feld input:focus, .feld select:focus, .feld textarea:focus,
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(0,168,232,.18);
}
textarea { min-height:100px; resize:vertical; }
fieldset { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); }
legend { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:0 6px; }

/* ── Schlüssel/Wert, Balken, Sonstiges ─────────────────────────────────── */
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px var(--space-4); margin:0; }
.kv dt { color:var(--text-muted); font-size:var(--text-sm); }
.kv dd { margin:0; }
.balken { height:8px; border-radius:var(--radius-pill); background:var(--md-grey-100); overflow:hidden; min-width:80px; }
.balken > span { display:block; height:100%; background:var(--md-wave-500); }
code, .mono { font-family:var(--font-mono); font-size:var(--text-sm);
              background:var(--md-grey-100); padding:1px 6px; border-radius:var(--radius-sm); }
hr { border:0; border-top:1px solid var(--border); margin:var(--space-5) 0; }

/* ── Fotos zur Prüfung ── */
.foto-raster { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.foto { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); }
.foto img { display: block; width: 100%; height: 130px; object-fit: cover; }
.foto figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; }
.foto-text { display: flex; gap: 6px; width: 100%; }
.foto-text input { flex: 1; min-width: 0; padding: 6px 8px; font-size: var(--text-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
.anmeldung { min-height:100vh; display:grid; place-items:center; padding:var(--space-5);
             background:var(--bg); }
.anmeldung .box { width:100%; max-width:26rem; }
.anmeldung .marke { color:var(--md-navy-800); margin:0 0 var(--space-4); }
.anmeldung .marke span { color:var(--text-muted); }
.anmeldung .karte { box-shadow:var(--shadow-md); }

/* ── Reiter (Unterseiten eines Bereichs) und Konto im Kopf – Umbau 01.10.2026 ── */
.nav a { font-size:var(--text-md); padding:10px 12px; }
.reiter { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 var(--space-5); border-bottom:1px solid var(--border); }
.reiter a {
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; margin-bottom:-1px;
  color:var(--text-muted); font-size:var(--text-sm); font-weight:500; text-decoration:none;
  border:1px solid transparent; border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.reiter a:hover { color:var(--text); background:var(--md-grey-50); text-decoration:none; }
.reiter a.aktiv { color:var(--md-navy-800); background:var(--bg-raised); border-color:var(--border); border-bottom-color:var(--bg-raised); font-weight:600; }
.reiter .zahl { background:var(--tone-warning-bg, #fff3cd); color:var(--tone-warning-fg, #8a5a00); border-radius:var(--radius-pill);
                padding:0 7px; font-size:var(--text-2xs); font-weight:700; }
.kopf-konto { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); text-decoration:none; }
.kopf-konto:hover { color:var(--text); text-decoration:none; }

.tab.protokoll { table-layout:fixed; width:100%; }
.tab.protokoll th:nth-child(1) { width:9.5rem; } .tab.protokoll th:nth-child(2) { width:14rem; }
.tab.protokoll th:nth-child(3) { width:8rem; }  .tab.protokoll th:nth-child(4) { width:13rem; }
.tab.protokoll td { overflow-wrap:anywhere; } .tab.protokoll td:first-child { white-space:nowrap; }
.tab.protokoll td:last-child { font-size:var(--text-sm); color:var(--text-muted); }

/* ── Übersicht: zu erledigen ── */
.aufgaben { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.aufgaben a { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border);
              border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text); text-decoration:none; }
.aufgaben a:hover { border-color:var(--border-strong); background:var(--md-grey-50); text-decoration:none; }
.aufgaben b { min-width:2.2rem; text-align:center; background:var(--tone-warning-bg, #fff3cd); color:var(--tone-warning-fg, #8a5a00);
              border-radius:var(--radius-pill); padding:2px 8px; font-variant-numeric:tabular-nums; }
.aufgaben .pfeil { margin-left:auto; color:var(--text-subtle); }
.erledigt { color:var(--tone-success-fg, #1e7e34); }

/* ── Schmale Fenster ───────────────────────────────────────────────────── */
@media (max-width:860px) {
  .layout { grid-template-columns:1fr; }
  .seite { position:static; height:auto; }
  .nav { flex-direction:row; flex-wrap:wrap; }
  .nav-gruppe { display:none; }
  .nav a { padding:6px 10px; }
  .seite-fuss { display:none; }
  .wrap { padding:var(--space-4); }
  .kopf { padding:0 var(--space-4); }
  .kopf-konto span { display:none; }
  .reiter { flex-wrap:nowrap; overflow-x:auto; }
  .reiter a { white-space:nowrap; }
}