/* CHARLOTTE.AI - Design System
   Warm, seriös, persönlich. Beere als Markenfarbe, klare Statusfarben. */

:root {
  --brand: #8B2E5D;
  --brand-dunkel: #6E2249;
  --brand-hell: #B4507F;
  --brand-zart: #F7E9F0;
  --tinte: #221A28;
  --text: #2D2533;
  --text-2: #6E6377;
  --text-3: #99909F;
  --flaeche: #F7F5F3;
  --karte: #FFFFFF;
  --linie: #E9E4E0;
  --gruen: #1E7F4F;   --gruen-zart: #E3F3EA;
  --amber: #A85B00;   --amber-zart: #FCF0DE;
  --blau: #2456A8;    --blau-zart: #E7EEF9;
  --rot: #B3363C;     --rot-zart: #FBE9EA;
  --violett: #6D3FA8; --violett-zart: #F0E9F9;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(34,26,40,.05), 0 4px 16px rgba(34,26,40,.06);
  --schatten-gross: 0 4px 12px rgba(34,26,40,.08), 0 16px 48px rgba(34,26,40,.12);
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--schrift);
  font-size: 16px; line-height: 1.55;
  color: var(--text); background: var(--flaeche);
  touch-action: manipulation;
}
a { color: var(--brand); text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); }
svg { display: block; }
h1 { font-size: 1.55rem; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin-bottom: .6rem; }
:focus-visible { outline: 3px solid var(--brand-hell); outline-offset: 2px; border-radius: 4px; }

/* Vertraulichkeits-Hinweis (auf jeder Seite sichtbar) */
.vertraulich {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 200;
  font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 14px; background: rgba(168,91,0,.92); color: #fff;
  border-radius: 0 0 9px 9px; pointer-events: none; white-space: nowrap;
}

/* ===== Grundgerüst ===== */
.app { display: flex; min-height: 100dvh; }
.inhalt { flex: 1; min-width: 0; padding: 20px 26px 90px; max-width: 1180px; }

/* Sidebar */
.seite {
  width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100dvh;
  background: linear-gradient(175deg, #241A2E 0%, #1C1424 60%, #251230 100%);
  color: #CFC5D6; display: flex; flex-direction: column; padding: 22px 14px 16px;
}
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 4px 22px; }
.logo-ascii {
  margin: 0; white-space: pre; user-select: none;
  font: 700 6.6px/1.18 Consolas, "Courier New", monospace;
  background: linear-gradient(100deg, #F08BB8 0%, #E05C9A 35%, #B4507F 65%, #9A6BE0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 7px rgba(224,92,154,.55));
  animation: logoGlut 4s ease-in-out infinite;
}
@keyframes logoGlut {
  50% { filter: drop-shadow(0 0 13px rgba(224,92,154,.85)); }
}
.logo-ai {
  align-self: flex-end; color: var(--brand-hell); font-size: .66rem;
  font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
}
.logo-c {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: radial-gradient(120% 120% at 20% 15%, var(--brand-hell), var(--brand-dunkel));
  color: #fff; font-family: Georgia, serif; font-size: 22px;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(139,46,93,.45);
}
.logo-text { font-weight: 700; letter-spacing: .06em; color: #fff; font-size: .95rem; }
.logo-text em { font-style: normal; color: var(--brand-hell); }
.seite nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.seite nav a {
  display: flex; align-items: center; gap: 12px; color: #BFB3C8;
  padding: 11px 12px; border-radius: 10px; font-size: .95rem;
  transition: background .18s, color .18s; min-height: 44px;
}
.seite nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
.seite nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.seite nav a.an { background: rgba(180,80,127,.22); color: #fff; box-shadow: inset 3px 0 0 var(--brand-hell); }
.seite-fuss { display: flex; flex-direction: column; gap: 12px; padding: 12px 10px 0; }
.budget span { font-size: .75rem; color: #9C8FA6; }
.budget-balken { height: 5px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
.budget-balken i { display: block; height: 100%; background: #57B77E; border-radius: 3px; transition: width .4s; }
.budget-balken i.warn { background: #E3A23C; }
.abmelden { color: #9C8FA6; font-size: .85rem; padding: 6px 0; }
.abmelden:hover { color: #fff; }

/* Kopfleiste */
.kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.suche {
  flex: 1; display: flex; align-items: center; gap: 10px; max-width: 460px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px;
  padding: 0 14px; height: 46px; box-shadow: var(--schatten); color: var(--text-3);
}
.suche svg { width: 18px; height: 18px; flex-shrink: 0; }
.suche input { border: 0; outline: 0; flex: 1; height: 100%; background: none; font-size: .95rem; }
.refresh {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px;
  border: 0; border-radius: 12px; color: #fff; font-weight: 600; font-size: .95rem;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dunkel) 100%);
  box-shadow: 0 4px 14px rgba(139,46,93,.35); transition: transform .15s, box-shadow .2s;
}
.refresh:hover { box-shadow: 0 6px 20px rgba(139,46,93,.45); transform: translateY(-1px); }
.refresh:active { transform: scale(.97); }
.refresh svg { width: 18px; height: 18px; }
.refresh.laeuft svg { animation: drehen 1s linear infinite; }
.refresh:disabled { opacity: .6; cursor: wait; }
@keyframes drehen { to { transform: rotate(360deg); } }
.refresh-meldung {
  margin: -8px 0 16px; padding: 12px 16px; border-radius: 10px; font-size: .92rem;
  background: var(--blau-zart); color: var(--blau); border: 1px solid #C9D9F2;
}

/* ===== Karten & Chips ===== */
.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten); padding: 22px;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600;
  padding: 3px 11px 3px 9px; border-radius: 999px; white-space: nowrap;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-braucht  { background: var(--amber-zart);  color: var(--amber); }
.chip-aktiv    { background: var(--blau-zart);   color: var(--blau); }
.chip-wartet   { background: #EFEDEA; color: var(--text-2); }
.chip-fertig   { background: var(--gruen-zart);  color: var(--gruen); }
.chip-vorschlag{ background: var(--violett-zart);color: var(--violett); }
.chip-braucht i { animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }

/* ===== Dashboard ===== */
.gruss { margin-bottom: 4px; }
.gruss-zeile { color: var(--text-2); margin-bottom: 20px; font-size: .98rem; }
.gruss-zeile b { color: var(--amber); }

.buehne { display: grid; grid-template-columns: 1fr 320px; gap: 20px; margin-bottom: 24px; align-items: stretch; }

/* Neuer Vorgang */
.neu-karte { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.neu-karte h2 { margin: 0; }
.neu-karte textarea {
  width: 100%; min-height: 96px; resize: vertical; border: 1.5px solid var(--linie);
  border-radius: 10px; padding: 12px 46px 12px 14px; font-size: 1rem; line-height: 1.5;
  transition: border-color .2s; background: #FDFCFB;
}
.neu-karte textarea:focus { outline: 0; border-color: var(--brand-hell); }
.textarea-huelle { position: relative; }
.mikro {
  position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 10px;
  border: 0; background: var(--brand-zart); color: var(--brand); display: grid; place-items: center;
  transition: background .2s;
}
.mikro svg { width: 19px; height: 19px; }
.mikro.an { background: var(--rot); color: #fff; animation: puls 1.2s infinite; }
.dropzone {
  border: 1.5px dashed #D8CFC8; border-radius: 10px; padding: 13px 14px;
  display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: .92rem;
  cursor: pointer; transition: border-color .2s, background .2s; min-height: 48px;
}
.dropzone svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-3); }
.dropzone:hover, .dropzone.ueber { border-color: var(--brand-hell); background: var(--brand-zart); }
.dz-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-liste span {
  background: var(--brand-zart); color: var(--brand-dunkel); font-size: .8rem;
  padding: 3px 10px; border-radius: 999px;
}
.neu-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: 11px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: .97rem;
  transition: background .2s, transform .15s;
}
.knopf:hover { background: var(--brand-dunkel); }
.knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .55; cursor: wait; }
.knopf-2 { background: #EFEBE8; color: var(--text); }
.knopf-2:hover { background: #E4DED9; }
.knopf-gruen { background: var(--gruen); }
.knopf-gruen:hover { background: #166540; }
.knopf-rot { background: #fff; color: var(--rot); border: 1.5px solid #E8C9CB; }
.knopf-rot:hover { background: var(--rot-zart); }
.knopf-klein { min-height: 38px; padding: 0 16px; font-size: .88rem; border-radius: 9px; }
.freigabe-check { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text-2); cursor: pointer; }
.freigabe-check input { width: 19px; height: 19px; accent-color: var(--brand); }

/* Bubbles */
.bubbles { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.bubble {
  position: relative; border-radius: var(--radius); padding: 20px 22px; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px; min-height: 106px; justify-content: center;
  box-shadow: var(--schatten-gross); transition: transform .2s;
}
a.bubble:hover { transform: translateY(-2px); }
.bubble-aktiv { background: linear-gradient(135deg, #A03A6E 0%, #6E2249 100%); }
.bubble-fertig { background: linear-gradient(135deg, #1E7F4F 0%, #14573A 100%); }
.bubble .zahl { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.bubble .wort { font-size: .95rem; opacity: .92; font-weight: 600; }
.bubble .sub { font-size: .8rem; opacity: .75; }
.bubble::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255,255,255,.09);
}
.bubble::before {
  content: ""; position: absolute; right: 10px; bottom: -50px; width: 100px; height: 100px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}

/* Vorgangslisten */
.abschnitt { margin-bottom: 26px; }
.abschnitt-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf .menge { color: var(--text-3); font-size: .88rem; }
.vliste { display: flex; flex-direction: column; gap: 10px; }
.vkarte {
  display: flex; gap: 14px; align-items: flex-start; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--schatten); transition: transform .16s, box-shadow .2s; color: var(--text);
}
.vkarte:hover { transform: translateY(-1px); box-shadow: var(--schatten-gross); }
.vkarte-mitte { flex: 1; min-width: 0; }
.vkarte-titel { font-weight: 650; margin-bottom: 3px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vkarte-info { color: var(--text-2); font-size: .9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vkarte-meta { color: var(--text-3); font-size: .8rem; white-space: nowrap; text-align: right; line-height: 1.9; }
.vkarte.erledigt-karte { opacity: .82; }
.leer {
  text-align: center; padding: 34px 20px; color: var(--text-2); background: var(--karte);
  border: 1.5px dashed var(--linie); border-radius: var(--radius); font-size: .95rem;
}

/* ===== Vorgangsdetail ===== */
.v-kopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.v-kopf h1 { flex: 1; min-width: 220px; }
.v-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.v-raster { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; }
.timeline { display: flex; flex-direction: column; gap: 12px; }
.tl {
  border-radius: var(--radius); padding: 14px 16px; font-size: .95rem;
  border: 1px solid var(--linie); background: var(--karte); box-shadow: var(--schatten);
}
.tl-kopf { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; align-items: center; flex-wrap: wrap; }
.tl-wer { font-weight: 650; font-size: .88rem; display: flex; align-items: center; gap: 8px; }
.tl-zeit { color: var(--text-3); font-size: .78rem; }
.tl-text { white-space: pre-wrap; word-wrap: break-word; }
.tl-betreff { font-weight: 600; margin-bottom: 4px; }
.tl-charlotte { background: var(--brand-zart); border-color: #EAD3DF; }
.tl-charlotte .tl-wer { color: var(--brand-dunkel); }
.tl-user { background: var(--blau-zart); border-color: #D3DEF0; }
.tl-user .tl-wer { color: var(--blau); }
.tl-mail-ein { border-left: 4px solid var(--blau); }
.tl-mail-aus { border-left: 4px solid var(--gruen); }
.tl-system { background: transparent; box-shadow: none; border-style: dashed; color: var(--text-2); font-size: .85rem; }
.tl-freigabe { border: 2px solid var(--amber); background: #FFFDF8; }
.tl-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(120% 120% at 25% 20%, var(--brand-hell), var(--brand-dunkel));
  color: #fff; display: grid; place-items: center; font-family: Georgia, serif; font-size: .8rem;
}
.freigabe-leiste { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sammelfreigabe {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: #FFFDF8; border: 2px solid var(--amber); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 14px; flex-wrap: wrap;
}
.chat-leiste { display: flex; gap: 10px; margin-top: 16px; position: relative; }
.chat-leiste textarea {
  flex: 1; border: 1.5px solid var(--linie); border-radius: 11px; padding: 11px 48px 11px 14px;
  min-height: 48px; max-height: 160px; resize: vertical; background: var(--karte);
}
.chat-leiste textarea:focus { outline: 0; border-color: var(--brand-hell); }
.seiten-block { display: flex; flex-direction: column; gap: 16px; }
.seiten-block .karte { padding: 16px 18px; }
.seiten-block h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 10px; }
.faden-zeile { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: .88rem; align-items: baseline; }
.faden-zeile:last-child { border-bottom: 0; }
.faden-zeile .fstatus { color: var(--text-2); font-size: .8rem; white-space: nowrap; }
.datei-zeile { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.datei-zeile:last-child { border-bottom: 0; }
.datei-zeile svg { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; }
.datei-zeile a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-zeile .dgr { margin-left: auto; color: var(--text-3); font-size: .76rem; white-space: nowrap; }

/* ===== Formulare (Einstellungen, Login) ===== */
.formular { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-weight: 600; font-size: .9rem; }
.feld .hilfe { color: var(--text-3); font-size: .8rem; }
.feld input, .feld select, .feld textarea {
  border: 1.5px solid var(--linie); border-radius: 10px; padding: 11px 14px;
  background: #FDFCFB; min-height: 46px; width: 100%;
}
.feld textarea { min-height: 90px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; border-color: var(--brand-hell); }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-abschnitt { border-top: 1px solid var(--linie); padding-top: 20px; margin-top: 6px; }
.form-abschnitt h2 { margin-bottom: 2px; }
.form-abschnitt .hilfe { color: var(--text-2); font-size: .88rem; margin-bottom: 14px; }
.meldung-ok { background: var(--gruen-zart); color: var(--gruen); border: 1px solid #BFE3CF; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.meldung-fehler { background: var(--rot-zart); color: var(--rot); border: 1px solid #EFC5C7; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }

/* Login */
.login-body { display: grid; place-items: center; min-height: 100dvh; background:
  radial-gradient(60% 80% at 80% 10%, #31203E 0%, transparent 60%),
  radial-gradient(70% 90% at 10% 90%, #3A1830 0%, transparent 55%), #1C1424; padding: 20px; }
.login-karte {
  width: 100%; max-width: 400px; background: var(--karte); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); padding: 38px 34px;
}
.login-karte .logo { align-items: center; padding-bottom: 8px; width: 100%; }
.login-karte .logo-ascii { font-size: 8.6px; }
.login-karte .logo-ai { align-self: center; }
.login-karte .logo-text { color: var(--tinte); font-size: 1.1rem; }
.login-sub { text-align: center; color: var(--text-2); font-size: .92rem; margin-bottom: 24px; }

/* ===== Tabellen (Kontakte, Fristen, Suche) ===== */
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.tabelle th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); padding: 12px 16px; border-bottom: 1px solid var(--linie); background: #FBFAF8; }
.tabelle td { padding: 12px 16px; border-bottom: 1px solid var(--linie); font-size: .92rem; vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle-scroll { overflow-x: auto; border-radius: var(--radius); }
.frist-faellig td:first-child { color: var(--rot); font-weight: 700; }

/* ===== Gehirn ===== */
.gehirn-buehne { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-gross);
  background: radial-gradient(90% 100% at 70% 0%, #2C1E3A 0%, #14101C 55%, #0D0A12 100%); }
.gehirn-buehne canvas { display: block; width: 100%; cursor: grab; touch-action: none; }
.gehirn-buehne canvas:active { cursor: grabbing; }
.gehirn-filter { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; background: rgba(20,14,28,.72);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 4px; backdrop-filter: blur(8px); }
.gehirn-filter button { border: 0; background: none; color: #B9AEC4; padding: 7px 15px; border-radius: 999px; font-size: .85rem; font-weight: 600; min-height: 36px; }
.gehirn-filter button.an { background: var(--brand); color: #fff; }
.gehirn-info { position: absolute; bottom: 14px; left: 14px; right: 14px; pointer-events: none;
  color: #E8E2EE; font-size: .88rem; background: rgba(20,14,28,.78); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 15px; opacity: 0; transition: opacity .2s; backdrop-filter: blur(8px); }
.gehirn-info.da { opacity: 1; }
.gehirn-legende { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 5px;
  background: rgba(20,14,28,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 14px;
  color: #B9AEC4; font-size: .76rem; backdrop-filter: blur(8px); }
.gehirn-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }

/* ===== Boot-Intro (Systemstart-Sequenz nach Login) ===== */
.boot {
  position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column;
  justify-content: center; gap: 26px; padding: 40px clamp(16px, 6vw, 90px);
  font-family: Consolas, "Courier New", monospace;
  background:
    linear-gradient(rgba(180,80,127,.05) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(180,80,127,.05) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(70% 90% at 80% 5%, #2B1B38 0%, transparent 60%),
    radial-gradient(70% 90% at 10% 95%, #331528 0%, transparent 55%), #0E0B13;
  transition: opacity .7s ease;
}
.boot.aus { opacity: 0; pointer-events: none; }
.boot-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
.boot-raster { display: flex; gap: clamp(20px, 5vw, 70px); align-items: center; justify-content: center; }
.boot-links { flex: 1 1 480px; max-width: 620px; min-width: 0; }
.boot-rechts { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.boot-kopfzeile {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px;
  color: var(--brand-hell); font-size: 12px; letter-spacing: .18em; font-weight: 700;
  border-bottom: 1px solid rgba(180,80,127,.35); padding-bottom: 8px; text-transform: uppercase;
}
.boot-log { font-size: 12.5px; line-height: 1.75; color: #8E8399; min-height: 24.5em; }
.boot-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot-log .zeit { color: #574B63; }
.boot-log .ok { color: #46D68C; font-weight: 700; text-shadow: 0 0 8px rgba(70,214,140,.5); }
.boot-log .warn { color: #E3A23C; font-weight: 700; }
.boot-esel {
  margin: 0; white-space: pre; min-height: 15.5em; text-align: left;
  font: 700 12.5px/1.15 Consolas, "Courier New", monospace;
  color: #D9C08F; text-shadow: 0 0 12px rgba(217,192,143,.5);
}
.boot-esel::after { content: "█"; animation: blinken .7s steps(1) infinite; }
.boot-esel.fertig::after { content: ""; }
@keyframes blinken { 50% { opacity: 0; } }
.boot-logo { font-size: 9px; opacity: 0; transition: opacity .9s; filter: drop-shadow(0 0 10px rgba(224,92,154,.7)); }
.boot-logo.da { opacity: 1; }
.boot-fuss { display: flex; flex-direction: column; gap: 7px; max-width: 860px; width: 100%; margin: 0 auto; }
.boot-hex { color: #574B63; font-size: 11px; letter-spacing: .1em; white-space: nowrap; overflow: hidden; }
.boot-balken {
  height: 16px; border: 1px solid rgba(180,80,127,.55); border-radius: 3px; padding: 3px;
  background: rgba(255,255,255,.03); box-shadow: 0 0 18px rgba(139,46,93,.35) inset;
}
.boot-balken i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--brand-hell) 0 10px, var(--brand-dunkel) 10px 20px);
  box-shadow: 0 0 14px rgba(224,92,154,.8);
  transition: width .3s ease;
}
.boot-zeile { display: flex; justify-content: space-between; gap: 12px; }
.boot-status { color: #B9AEC4; font-size: 13px; letter-spacing: .05em; min-height: 1.4em; }
.boot-status.bereit { color: #46D68C; font-weight: 700; text-shadow: 0 0 10px rgba(70,214,140,.6); }
.boot-prozent { color: var(--brand-hell); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .boot { justify-content: flex-start; padding-top: 26px; overflow-y: auto; }
  .boot-raster { flex-direction: column-reverse; }
  .boot-links { max-width: 100%; flex-basis: auto; }
  .boot-log { min-height: 0; max-height: 34vh; overflow: hidden; font-size: 10.5px; }
  .boot-esel { font-size: 9px; min-height: 0; }
  .boot-logo { font-size: 6.5px; }
}

/* ===== Responsiv ===== */
@media (max-width: 980px) {
  .buehne { grid-template-columns: 1fr; }
  .bubbles { flex-direction: row; }
  .bubble { flex: 1; }
  .v-raster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .inhalt { padding: 14px 14px 92px; }
  .app { flex-direction: column; }
  .seite { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; width: 100%;
    flex-direction: row; align-items: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 100; box-shadow: 0 -4px 20px rgba(0,0,0,.25); }
  .logo, .seite-fuss { display: none; }
  .seite nav { flex-direction: row; width: 100%; justify-content: space-around; gap: 0; }
  .seite nav a { flex-direction: column; gap: 3px; font-size: .64rem; padding: 6px 4px; flex: 1; text-align: center; }
  .seite nav a.an { box-shadow: none; }
  .seite nav a svg { width: 22px; height: 22px; margin: 0 auto; }
  .kopf { flex-wrap: wrap; }
  .suche { order: 2; max-width: none; width: 100%; }
  .refresh { order: 1; margin-left: auto; }
  .bubbles { flex-direction: column; }
  .vkarte-meta { display: none; }
  .feld-reihe { grid-template-columns: 1fr; }
}
/* Reduced-Motion respektieren - aber den Boot-Screen bewusst NICHT abschalten */
@media (prefers-reduced-motion: reduce) {
  *:not(.boot):not(.boot *) { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}