/*
 * Grundlayout: Schriften, Elemente, App-Shell (Sidebar, Topbar, Inhalt), Responsiveness, Druck.
 * Nur Tokens aus tokens.css, keine Farbwerte. Komponenten stehen in komponenten.css.
 */

@font-face {
  font-family: "Sora";
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Sora.67f16b0da16d.ttf") format("truetype-variations");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSans.335a2b2a3a64.ttf") format("truetype-variations");
}

/* ---------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Fokus nie unter der Topbar (WCAG 2.4.11): Die Topbar ist auf jeder Breite genau eine Zeile hoch */
  scroll-padding-top: calc(var(--topbar-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
}

[data-theme] { background: var(--bg); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-titel);
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-2); text-underline-offset: 2px; }
a:hover { color: var(--accent-2-hover); }

code, kbd { font-family: var(--font-mono); font-size: .92em; }
table { font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--ink); }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mit-js .nur-ohne-js { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-2);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ---------------------------------------------------------------- App-Shell */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-breite) minmax(0, 1fr);
  min-height: 100vh;
}

.app__haupt { display: flex; flex-direction: column; min-width: 0; }

/* Marke (auch im öffentlichen Layout) */
.marke {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.marke__zeichen {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--accent-grad);
  box-shadow: var(--marke-glow);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  flex: none;
}
.marke__text { display: flex; flex-direction: column; line-height: var(--lh-titel); min-width: 0; }
.marke__titel { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-base); }
.marke__unter { font-size: 11px; color: var(--ink-muted); }

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-5) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  z-index: 60;
}
.sidebar__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1); }
.sidebar__einklappen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  flex: none;
}
.sidebar__einklappen:hover { background: var(--surface-2); color: var(--ink); }
.sidebar__einklappen-auf { display: none; }

.nav { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.nav__gruppe--system { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.nav__gruppentitel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 var(--space-3);
  margin: 0 0 var(--space-1);
}
.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav__eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 6px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--dauer) ease, color var(--dauer) ease;
}
.nav__eintrag:hover { background: var(--surface-2); color: var(--ink); }
.nav__eintrag--aktiv { background: var(--accent-soft); color: var(--accent-2); }
.nav__icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.nav__icon .icon { width: 15px; height: 15px; }
.nav__eintrag--aktiv .nav__icon { background: var(--accent-grad); color: var(--on-accent); }
.nav__titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__zusatz {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}
.nav__zusatz .icon { width: 12px; height: 12px; }
.nav__zaehler {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-2);
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}
.nav__zaehler--dezent { background: var(--surface-2); color: var(--ink-muted-on-tint); font-weight: 600; }

.sidebar__fuss { border-top: 1px solid var(--border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.nutzerchip { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-1); min-width: 0; }
.nutzerchip__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nutzerchip__name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nutzerchip__rolle { font-size: 11px; color: var(--ink-muted); }
.nutzerchip__abmelden { margin: 0; }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--avatar-grad);
  color: var(--on-avatar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  flex: none;
}
.avatar--klein { width: 32px; height: 32px; font-size: 12px; }

/* Eingeklappte Sidebar (nur Desktop; Zustand aus localStorage, gesetzt von thema.js) */
@media (min-width: 861px) {
  html[data-sidebar="eingeklappt"] .app { grid-template-columns: var(--sidebar-schmal) minmax(0, 1fr); }
  html[data-sidebar="eingeklappt"] .sidebar { padding-left: var(--space-2); padding-right: var(--space-2); align-items: center; }
  html[data-sidebar="eingeklappt"] .marke__text,
  html[data-sidebar="eingeklappt"] .nav__titel,
  html[data-sidebar="eingeklappt"] .nav__zusatz,
  html[data-sidebar="eingeklappt"] .nav__gruppentitel,
  html[data-sidebar="eingeklappt"] .nutzerchip__text,
  html[data-sidebar="eingeklappt"] .nutzerchip__abmelden span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html[data-sidebar="eingeklappt"] .sidebar__kopf { flex-direction: column; align-items: center; }
  html[data-sidebar="eingeklappt"] .nav__eintrag { justify-content: center; position: relative; }
  html[data-sidebar="eingeklappt"] .nav__zaehler { position: absolute; top: 0; right: 0; min-width: 18px; padding: 0 5px; font-size: 10px; }
  html[data-sidebar="eingeklappt"] .sidebar__einklappen-zu { display: none; }
  html[data-sidebar="eingeklappt"] .sidebar__einklappen-auf { display: block; }
}

.sidebar-hintergrund { position: fixed; inset: 0; background: var(--overlay); z-index: 55; }

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--topbar-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar__menue {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ziel-touch);
  height: var(--ziel-touch);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.topbar__brotkrumen { min-width: 0; flex: 0 1 auto; }
.topbar__status { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.topbar__hilfe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink-muted);
}
.topbar__hilfe:hover { background: var(--surface-2); color: var(--ink); }

.umgebungsbanner {
  padding: var(--space-1) var(--space-6);
  background: var(--warning-soft);
  color: var(--warning-ink);
  border-bottom: 1px solid var(--warning);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

/* Inhalt */
.inhalt { width: 100%; padding: var(--space-7) var(--space-7) var(--space-8); margin: 0; }
.inhalt:focus { outline: none; }
.inhalt--lesen { max-width: calc(var(--breite-lesen) + 2 * var(--space-7)); }
.inhalt--detail { max-width: calc(var(--breite-lesen) + var(--breite-steckbrief) + var(--space-6) + 2 * var(--space-7)); }
.inhalt--breit { max-width: none; }
.inhalt > * + * { margin-top: var(--space-5); }

/* Öffentliches Layout (Anmeldung, später Formulare für Träger) */
.oeffentlich { background: var(--bg); }
.oeffentlich__kopf { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface); }
.oeffentlich__inhalt { max-width: 720px; margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-8); }
.oeffentlich__inhalt:focus { outline: none; }

/* ---------------------------------------------------------------- Responsiveness (UI-KONZEPT 7) */

@media (max-width: 1279px) {
  .inhalt { padding: var(--space-6) var(--space-6) var(--space-8); }
}

@media (max-width: 860px) {
  .app { display: block; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-breite);
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform var(--dauer) ease;
    box-shadow: var(--shadow-lift);
    visibility: hidden;
  }
  .sidebar--offen { transform: translateX(0); visibility: visible; }
  .sidebar__einklappen { display: none; }
  .topbar { padding: var(--space-2) var(--space-4); gap: var(--space-1); flex-wrap: nowrap; height: var(--topbar-h); }
  .ohne-js .topbar { flex-wrap: wrap; height: auto; }
  .topbar__menue { display: inline-flex; }
  .topbar__brotkrumen { flex: 1 1 0; min-width: 0; }
  /* Brotkrumen mobil: nur das letzte Glied, einzeilig mit Auslassung */
  .topbar__brotkrumen .brotkrumen__liste { flex-wrap: nowrap; }
  .topbar__brotkrumen .brotkrumen__glied:not(:last-child) { display: none; }
  .topbar__brotkrumen .brotkrumen__glied:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__brotkrumen .brotkrumen__glied:last-child::before { content: none; }
  .topbar__status { margin-left: 0; gap: var(--space-1); flex: none; }
  .topbar__status:empty { display: none; }
  .topbar__hilfe { width: var(--ziel-touch); height: var(--ziel-touch); flex: none; }
  .umgebungsbanner { padding: var(--space-1) var(--space-4); }
  .inhalt { padding: var(--space-5) var(--space-4) var(--space-8); }
}

@media (max-width: 640px) {
  :root { --row-h: var(--ziel-touch); }
  h1 { font-size: 22px; }
}

/* ---------------------------------------------------------------- Bewegung und Druck */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .sidebar, .topbar, .umgebungsbanner, .toasts, .skip-link, .nur-bildschirm, .seitenkopf__aktionen,
  .detail__aktionen, .filterleiste, .seiten { display: none !important; }
  .app { display: block; }
  body, [data-theme] { background: none; color: black; }
  .inhalt { padding: 0; max-width: none; }
  .karte { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}