/* Intranet Fahrzeuggutachten Bayern – CI: Dunkelblau #2e3644, Gold #ffd618, Schwarz #1d1d1d, Weiß, Schrift Outfit */

@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url("/schrift/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url("/schrift/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --blau: #2e3644;
  --blau-tief: #262d39;
  --blau-hell: #3b4557;
  --blau-zart: #e9ebef;
  --gold: #ffd618;
  --gold-zart: #fff7cc;
  --schwarz: #1d1d1d;
  --weiss: #ffffff;
  --grund: #f3f4f6;
  --flaeche: #ffffff;
  --linie: #e2e4e9;
  --text: #1d1d1d;
  --leise: #5e6675;
  --schatten: 0 1px 2px rgba(29, 29, 29, .06), 0 4px 16px rgba(46, 54, 68, .06);
  --schatten-hoch: 0 2px 4px rgba(29, 29, 29, .06), 0 12px 32px rgba(46, 54, 68, .12);
  --rund: 14px;
  --breite-leiste: 264px;
  --rauten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cpath d='M24 0 48 14 24 28 0 14Z' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: 16px; line-height: 1.55; color: var(--text); background: var(--grund);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
a { color: var(--blau); text-decoration-color: rgba(46, 54, 68, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -.01em; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

svg.klein { width: 15px; height: 15px; vertical-align: -2px; flex: none; }
.knopf svg { width: 18px; height: 18px; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.fehlertext { color: #b42318; min-height: 1.2em; margin: 0; font-size: .92rem; }

/* ---------- Knöpfe, Felder ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: 10px; padding: .7rem 1.15rem; font-weight: 600; cursor: pointer;
  background: var(--blau); color: var(--weiss); text-decoration: none; transition: transform .08s, box-shadow .15s, background .15s;
}
.knopf:hover { background: var(--blau-hell); }
.knopf:active { transform: translateY(1px); }
.knopf-gold { background: var(--gold); color: var(--blau); }
.knopf-gold:hover { background: #ffdf47; }
.knopf-rand { background: transparent; color: var(--blau); box-shadow: inset 0 0 0 1.5px var(--linie); }
.knopf-rand:hover { background: var(--blau-zart); }
.knopf-klein { padding: .45rem .8rem; font-size: .9rem; border-radius: 8px; }
.knopf[disabled] { opacity: .55; cursor: default; }
.breit { width: 100%; }
.knopf-text { background: none; border: 0; padding: .25rem .4rem; cursor: pointer; color: var(--leise); font-size: .88rem; border-radius: 6px; }
.knopf-text:hover { color: var(--blau); background: var(--blau-zart); }
.knopf-text.hell { color: rgba(255, 255, 255, .7); }
.knopf-text.hell:hover { color: var(--weiss); background: rgba(255, 255, 255, .08); }

label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
input:not([type=checkbox]), textarea, select {
  width: 100%; border: 1.5px solid var(--linie); border-radius: 10px; padding: .7rem .85rem; background: var(--weiss);
  font-weight: 400; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 4px rgba(255, 214, 24, .35); }
textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }

/* ---------- Laden ---------- */
.laden { position: fixed; inset: 0; display: grid; place-items: center; background: var(--blau); z-index: 50; }
.laden-raute { width: 28px; height: 28px; background: var(--gold); transform: rotate(45deg); animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { transform: rotate(225deg) scale(.7); opacity: .6; } }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100%; display: grid; place-items: center; background: var(--blau); position: relative; overflow: hidden; padding: 24px 16px; }
.anmeldung-rauten { position: absolute; inset: 0; background-image: var(--rauten); background-size: 48px 28px;
  mask-image: radial-gradient(ellipse at 85% 10%, #000 0%, transparent 55%), radial-gradient(ellipse at 10% 95%, #000 0%, transparent 45%);
  -webkit-mask-image: radial-gradient(ellipse at 85% 10%, #000 0%, transparent 55%); }
.anmeldung-inhalt { position: relative; width: min(420px, 100%); display: grid; gap: 28px; justify-items: center; }
.anmeldung-logo { width: 260px; height: auto; }
.anmeldung-karte { width: 100%; background: var(--weiss); border-radius: 20px; padding: 32px 28px 26px; display: grid; gap: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border-top: 5px solid var(--gold); }
.anmeldung-karte h1 { font-size: 1.7rem; }
.anmeldung-karte p { margin: 0; }

/* ---------- App-Gerüst ---------- */
.app { display: flex; min-height: 100%; }
.seitenleiste {
  position: fixed; inset: 0 auto 0 0; width: var(--breite-leiste); background: var(--blau); color: var(--weiss);
  display: flex; flex-direction: column; z-index: 30; overflow-y: auto;
  background-image: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, .12)), var(--rauten);
  background-size: auto, 48px 28px; background-position: 0 0, 0 0;
}
.seitenleiste::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--blau) 0%, rgba(46, 54, 68, .97) 40%, rgba(46, 54, 68, .9) 100%); z-index: -1; }
.seitenleiste-logo { display: block; padding: 26px 30px 18px; }
.seitenleiste-logo img { width: 100%; height: auto; display: block; }
.navigation { display: grid; gap: 2px; padding: 8px 14px; }
.nav-gruppe { margin: 18px 14px 6px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 600; }
.nav-punkt {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: rgba(255, 255, 255, .82);
  text-decoration: none; font-weight: 500; position: relative; transition: background .15s, color .15s;
}
.nav-punkt svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.nav-punkt:hover { background: rgba(255, 255, 255, .07); color: var(--weiss); }
.nav-punkt.aktiv { background: rgba(255, 255, 255, .1); color: var(--weiss); }
.nav-punkt.aktiv::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); }
.nav-punkt.aktiv svg { color: var(--gold); opacity: 1; }
.nav-punkt.unter { padding: 7px 14px 7px 46px; font-size: .92rem; color: rgba(255, 255, 255, .65); }
.nav-punkt.unter.aktiv::before { display: none; }
.nav-punkt.unter.aktiv { color: var(--gold); background: none; }
.zaehler { margin-left: auto; background: var(--gold); color: var(--blau); font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.zaehler.leise { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.seitenleiste-fuss { margin-top: auto; padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; gap: 8px; }
.ich { display: flex; align-items: center; gap: 10px; color: var(--weiss); text-decoration: none; flex: 1; min-width: 0; }
.ich span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; background: var(--gold); color: var(--blau); }
.avatar.blau { background: var(--blau); color: var(--gold); }
.avatar.grau { background: var(--blau-zart); color: var(--blau); }

.haupt { flex: 1; margin-left: var(--breite-leiste); min-width: 0; display: flex; flex-direction: column; }
.kopfleiste {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 32px;
  background: rgba(243, 244, 246, .85); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
}
.kopfleiste.schatten { border-bottom-color: var(--linie); }
.menue-knopf { display: none; }
.suche { position: relative; flex: 1; max-width: 640px; }
.suche input { padding-left: 2.6rem; padding-right: 2.6rem; background: var(--weiss); border-color: var(--weiss); box-shadow: var(--schatten); }
.suche-symbol { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--leise); }
.suche kbd { position: absolute; right: .8rem; top: 50%; translate: 0 -50%; font: 600 .75rem/1 "Outfit", sans-serif; color: var(--leise); border: 1px solid var(--linie); border-radius: 6px; padding: 3px 7px; background: var(--grund); }
.suchtreffer {
  position: absolute; top: calc(100% - 4px); left: 32px; width: min(640px, calc(100% - 64px)); max-height: 70vh; overflow: auto;
  background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten-hoch); padding: 8px;
}
.treffer { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; }
.treffer:hover, .treffer.aktiv { background: var(--blau-zart); }
.treffer-symbol { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--blau); color: var(--gold); flex: none; }
.treffer-symbol svg { width: 18px; height: 18px; }
.treffer-symbol.wissen { background: var(--gold-zart); color: var(--blau); }
.treffer b { display: block; font-weight: 600; }
.treffer small { color: var(--leise); }

.inhalt { padding: 8px 32px 64px; width: 100%; max-width: 1280px; outline: none; }

/* ---------- Bausteine ---------- */
.karte { background: var(--flaeche); border-radius: var(--rund); box-shadow: var(--schatten); }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
.karte-kopf h2 { font-size: 1.08rem; display: flex; align-items: center; gap: 10px; }
.karte-kopf h2 svg { width: 20px; height: 20px; color: var(--blau); }
.karte-inhalt { padding: 14px 22px 20px; }
.seitentitel { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 18px 0 22px; }
.seitentitel h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; }
.seitentitel p { margin: .3rem 0 0; color: var(--leise); }
.pfadleiste { font-size: .88rem; color: var(--leise); margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pfadleiste a { color: var(--leise); text-decoration: none; }
.pfadleiste a:hover { color: var(--blau); }

.pille { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-live { background: var(--blau); color: var(--weiss); }
.status-live::before { background: var(--gold); }
.status-in-arbeit { background: var(--gold); color: var(--blau); }
.status-geplant { background: transparent; color: var(--blau); box-shadow: inset 0 0 0 1.5px var(--blau); }
.status-abgeschaltet { background: var(--linie); color: var(--leise); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: .45rem .9rem; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1.5px var(--linie); color: var(--blau); font-weight: 500; font-size: .9rem; text-decoration: none; cursor: pointer; border: 0; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--blau); }
.chip.aktiv { background: var(--blau); color: var(--weiss); box-shadow: none; }
.chip.aktiv b { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.leer { padding: 28px; text-align: center; color: var(--leise); }

/* ---------- Start ---------- */
.held {
  position: relative; overflow: hidden; margin-top: 18px; border-radius: 20px; padding: 34px 36px; color: var(--weiss);
  background: var(--blau); box-shadow: var(--schatten-hoch);
}
.held::after { content: ""; position: absolute; right: -40px; top: -30px; width: 55%; height: 140%; background-image: var(--rauten); background-size: 48px 28px; transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.held > * { position: relative; z-index: 1; }
.held-datum { color: var(--gold); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.held h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 6px 0 4px; font-weight: 300; }
.held h1 b { font-weight: 700; }
.held p { margin: 0; color: rgba(255, 255, 255, .75); max-width: 560px; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; }
.kennzahl { text-decoration: none; color: var(--weiss); }
.kennzahl b { display: block; font-size: 2.4rem; font-weight: 800; color: var(--gold); line-height: 1; }
.kennzahl span { font-size: .88rem; color: rgba(255, 255, 255, .72); }

.start-raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; margin-top: 24px; align-items: start; }
.start-links, .start-rechts { display: grid; gap: 24px; min-width: 0; }
.bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.bereich {
  position: relative; display: grid; gap: 10px; padding: 18px; border-radius: var(--rund); background: var(--flaeche); box-shadow: var(--schatten);
  text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; overflow: hidden;
}
.bereich:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.bereich::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); transition: width .25s; }
.bereich:hover::after { width: 100%; }
.bereich-symbol { width: 42px; height: 42px; border-radius: 12px; background: var(--blau); color: var(--gold); display: grid; place-items: center; }
.bereich-symbol svg { width: 22px; height: 22px; }
.bereich b { font-size: 1.02rem; }
.bereich small { color: var(--leise); }

.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; }
.zeitleiste li { position: relative; padding: 0 0 16px 26px; }
.zeitleiste li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.zeitleiste li::after { content: ""; position: absolute; left: 9px; top: 20px; bottom: 2px; width: 1.5px; background: var(--linie); }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li:last-child::after { display: none; }
.zeitleiste time { font-size: .8rem; color: var(--leise); font-weight: 600; }
.zeitleiste a { font-weight: 600; text-decoration: none; }
.zeitleiste a:hover { text-decoration: underline; }
.zeitleiste p { margin: 2px 0 0; }

.notiz-mini { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--linie); }
.notiz-mini:first-child { border-top: 0; padding-top: 0; }
.notiz-mini a { font-weight: 600; font-size: .9rem; text-decoration: none; }
.notiz-mini p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notiz-mini small { color: var(--leise); }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat-verlauf { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; scroll-behavior: smooth; }
.chat-tag { align-self: center; font-size: .75rem; font-weight: 600; color: var(--leise); background: var(--grund); padding: 3px 12px; border-radius: 999px; margin: 10px 0 6px; }
.blase-reihe { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.blase-reihe.eigen { align-self: flex-end; flex-direction: row-reverse; }
.blase-reihe .avatar { width: 28px; height: 28px; font-size: .72rem; }
.blase-reihe.folge .avatar { visibility: hidden; }
.blase { padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; background: var(--blau-zart); position: relative; min-width: 80px; }
.eigen .blase { background: var(--blau); color: var(--weiss); border-radius: 16px 16px 4px 16px; }
.blase b { display: block; font-size: .78rem; color: var(--blau); margin-bottom: 1px; }
.eigen .blase b { display: none; }
.blase p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.blase a { color: inherit; }
.blase small { display: flex; justify-content: flex-end; gap: 8px; font-size: .7rem; opacity: .6; margin-top: 2px; }
.blase button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font-size: .7rem; opacity: 0; }
.blase:hover button, .blase:focus-within button { opacity: 1; }
.chat-eingabe { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--linie); align-items: flex-end; }
.chat-eingabe textarea { min-height: 44px; max-height: 160px; resize: none; border-radius: 22px; padding: .6rem 1rem; }
.chat-eingabe .knopf { border-radius: 50%; width: 44px; height: 44px; padding: 0; flex: none; }
.chat-eingabe .knopf svg { width: 20px; height: 20px; }
.chat-karte { height: 520px; display: flex; flex-direction: column; overflow: hidden; }
.chat-seite { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; height: calc(100vh - 190px); min-height: 420px; }
.chat-seite .karte { display: flex; flex-direction: column; overflow: hidden; }
.online { display: grid; gap: 10px; }
.online div { display: flex; align-items: center; gap: 10px; }
.online-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-zart); margin-left: auto; }

/* ---------- Anleitungen ---------- */
.raster-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.anl-karte {
  display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--flaeche); border-radius: var(--rund); box-shadow: var(--schatten);
  text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; border-top: 3px solid transparent;
}
.anl-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-top-color: var(--gold); }
.anl-karte-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.anl-karte-bereich { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .06em; }
.anl-karte-bereich svg { width: 16px; height: 16px; }
.anl-karte h3 { font-size: 1.12rem; }
.anl-karte p { margin: 0; color: var(--leise); font-size: .95rem; flex: 1; }
.anl-karte-fuss { display: flex; gap: 14px; font-size: .8rem; color: var(--leise); flex-wrap: wrap; }
.anl-karte-fuss span { display: inline-flex; align-items: center; gap: 5px; }
.anl-karte-fuss svg { width: 14px; height: 14px; }
.bereich-ueberschrift { display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; font-size: 1.2rem; }
.bereich-ueberschrift:first-of-type { margin-top: 6px; }
.bereich-ueberschrift .bereich-symbol { width: 34px; height: 34px; border-radius: 10px; }
.bereich-ueberschrift .bereich-symbol svg { width: 18px; height: 18px; }

.doku-kopf { margin-top: 14px; padding: 30px 34px; border-radius: 20px; background: var(--blau); color: var(--weiss); position: relative; overflow: hidden; }
.doku-kopf::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background-image: var(--rauten); background-size: 48px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.doku-kopf > * { position: relative; z-index: 1; }
.doku-kopf .anl-karte-bereich { color: var(--gold); }
.doku-kopf h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 8px 0 6px; }
.doku-kopf p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 720px; font-size: 1.05rem; }
.doku-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: .88rem; color: rgba(255, 255, 255, .75); align-items: center; }
.doku-meta .status-live { background: rgba(255, 255, 255, .14); }
.doku-meta .status-geplant { color: var(--weiss); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.doku-meta span { display: inline-flex; align-items: center; gap: 6px; }
.doku-meta svg { width: 15px; height: 15px; color: var(--gold); }
.doku-raster { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; margin-top: 24px; align-items: start; }
.doku-rechts { position: sticky; top: 84px; display: grid; gap: 18px; }
.gliederung { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gliederung a { display: block; padding: 5px 10px; border-radius: 8px; text-decoration: none; color: var(--leise); font-size: .92rem; border-left: 2px solid transparent; }
.gliederung a:hover { color: var(--blau); background: var(--grund); }
.gliederung a.aktiv { color: var(--blau); border-left-color: var(--gold); font-weight: 600; border-radius: 0 8px 8px 0; }
.gliederung .e3 a { padding-left: 22px; font-size: .86rem; }

.text { padding: 30px 36px 34px; font-size: 1.02rem; }
.text > :first-child { margin-top: 0; }
.text h2 { font-size: 1.4rem; margin: 2.1rem 0 .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--grund); display: flex; align-items: center; gap: 10px; scroll-margin-top: 90px; }
.text h2::before { content: ""; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); flex: none; }
.text h3 { font-size: 1.12rem; margin: 1.6rem 0 .5rem; scroll-margin-top: 90px; }
.text h4 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.text p { margin: .7rem 0; }
.text ul, .text ol { padding-left: 1.4rem; margin: .7rem 0; }
.text li { margin: .3rem 0; }
.text li::marker { color: var(--blau); font-weight: 700; }
.text ol { counter-reset: schritt; list-style: none; padding-left: 0; }
.text ol > li { counter-increment: schritt; position: relative; padding-left: 2.6rem; min-height: 1.9rem; margin: .65rem 0; }
.text ol > li::before { content: counter(schritt); position: absolute; left: 0; top: -.05rem; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--blau); color: var(--gold); font-weight: 700; font-size: .88rem; display: grid; place-items: center; }
.text code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; background: var(--grund); padding: .12em .4em; border-radius: 5px; overflow-wrap: anywhere; }
.text pre { background: var(--blau-tief); color: #f3f4f6; padding: 16px 18px; border-radius: 12px; overflow-x: auto; }
.text pre code { background: none; padding: 0; color: inherit; }
.text .hinweis { margin: 1rem 0; padding: 14px 18px 14px 20px; background: var(--gold-zart); border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; }
.text .hinweis p { margin: .3rem 0; }
.tabelle { overflow-x: auto; margin: 1rem 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linie); }
.text table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.text th { background: var(--blau); color: var(--weiss); text-align: left; font-weight: 600; padding: 10px 14px; }
.text td { padding: 9px 14px; border-top: 1px solid var(--linie); vertical-align: top; }
.text tr:nth-child(even) td { background: #fafafb; }

/* ---------- Notizen ---------- */
.notizen { margin-top: 24px; }
.notiz-form { display: grid; gap: 10px; }
.notiz-form .zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.notiz { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--linie); }
.notiz:first-of-type { border-top: 0; }
.notiz-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.notiz-kopf b { font-weight: 600; }
.notiz-kopf small { color: var(--leise); }
.notiz p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notiz-text { flex: 1; min-width: 0; }

/* ---------- Wissen ---------- */
.kategorien { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.liste { display: grid; }
.listen-eintrag { display: flex; gap: 14px; align-items: center; padding: 14px 22px; text-decoration: none; color: inherit; border-top: 1px solid var(--linie); }
.listen-eintrag:first-child { border-top: 0; }
.listen-eintrag:hover { background: #fafafb; }
.listen-eintrag b { display: block; font-weight: 600; }
.listen-eintrag small { color: var(--leise); }
.listen-eintrag .rechts { margin-left: auto; text-align: right; flex: none; color: var(--leise); font-size: .82rem; }
.stichwoerter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.stichwort { font-size: .8rem; background: rgba(255, 255, 255, .12); color: var(--weiss); padding: 2px 10px; border-radius: 999px; }
.anhaenge { display: grid; gap: 8px; }
.anhang { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; box-shadow: inset 0 0 0 1.5px var(--linie); }
.anhang:hover { box-shadow: inset 0 0 0 1.5px var(--blau); }
.anhang svg { width: 22px; height: 22px; color: var(--blau); flex: none; }
.anhang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 500; }
.anhang small { color: var(--leise); flex: none; }

/* ---------- Tabellen (Admin) ---------- */
.verwaltung { width: 100%; border-collapse: collapse; }
.verwaltung th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); padding: 10px 22px; font-weight: 600; }
.verwaltung td { padding: 12px 22px; border-top: 1px solid var(--linie); }
.verwaltung tr.inaktiv td { color: var(--leise); }
.formular-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }

/* ---------- Meldung ---------- */
.meldung { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; background: var(--schwarz); color: var(--weiss); padding: 12px 20px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; z-index: 60; box-shadow: var(--schatten-hoch); max-width: calc(100% - 32px); }
.meldung.zeigen { opacity: 1; translate: -50% 0; }
.meldung.fehler { background: #b42318; }

/* ---------- Schmal ---------- */
@media (max-width: 1100px) {
  .start-raster, .doku-raster { grid-template-columns: minmax(0, 1fr); }
  .doku-rechts { position: static; order: -1; }
  .doku-rechts .gliederung-karte { display: none; }
  .chat-seite { grid-template-columns: minmax(0, 1fr); }
  .chat-seite > .karte:last-child { display: none; }
}
@media (max-width: 860px) {
  .seitenleiste { transform: translateX(-100%); transition: transform .25s; box-shadow: none; }
  .app.menue-offen .seitenleiste { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
  .schleier { position: fixed; inset: 0; background: rgba(29, 29, 29, .4); z-index: 25; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .app.menue-offen .schleier { opacity: 1; pointer-events: auto; }
  .haupt { margin-left: 0; }
  .kopfleiste { padding: 10px 16px; }
  .menue-knopf { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--blau); color: var(--gold); flex: none; cursor: pointer; }
  .menue-knopf svg { width: 22px; height: 22px; }
  .suche kbd { display: none; }
  .suchtreffer { left: 16px; width: calc(100% - 32px); }
  .inhalt { padding: 4px 16px 48px; }
  .held, .doku-kopf { padding: 24px 22px; border-radius: 16px; }
  .text { padding: 22px 20px 26px; }
  .karte-kopf { padding: 16px 18px 0; }
  .karte-inhalt { padding: 12px 18px 18px; }
  .listen-eintrag { padding: 12px 18px; }
  .chat-seite { height: calc(100vh - 220px); height: calc(100dvh - 220px); }
  .verwaltung th:nth-child(4), .verwaltung td:nth-child(4) { display: none; }
  .verwaltung td, .verwaltung th { padding: 10px 14px; }
}
@media (max-width: 520px) {
  .raster-karten { grid-template-columns: minmax(0, 1fr); }
  .bereiche, .kategorien { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bereich { padding: 14px; gap: 6px; }
  .bereich small { font-size: .8rem; }
  .kennzahl b { font-size: 2rem; }
  .listen-eintrag .rechts { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Hilfsklassen (statt style-Attributen, die die CSP sperrt) ---------- */
[data-u=mt24] { margin-top: 24px; }
[data-u=mt8] { margin-top: 8px; }
[data-u=mb16] { margin-bottom: 16px; }
[data-u=mb20] { margin-bottom: 20px; }
[data-u=mb24] { margin-bottom: 24px; }
[data-u=p8] { padding: 8px; }
[data-u=abstand] { height: 10px; }
[data-u=reihe] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
[data-u=fuellen] { flex: 1; min-height: 0; }
[data-u=schmal] { max-width: 560px; }
[data-u=formular] { display: grid; gap: 14px; }
[data-u=rechts] { text-align: right; white-space: nowrap; }

/* ---------- Rechte ---------- */
.rechte p { margin: 0 0 12px; }
.haken { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: .95rem; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.haken:hover { background: var(--grund); }
.haken input { width: 18px; height: 18px; accent-color: var(--blau); flex: none; }
.haken-alle { box-shadow: inset 0 0 0 1.5px var(--linie); margin-bottom: 10px; }
.haken-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 8px; }
.haken input:disabled + * , .haken:has(input:disabled) { color: var(--leise); }