/* Vindicta — Codebreaker · Stylesheet der statischen Ausgabe */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink-950:#0a0708; --ink-900:#100b0d; --ink-850:#161012; --ink-800:#1d1518;
  --blood:#a4142b; --blood-bright:#c8203a; --blood-soft:#e0475f;
  --gold:#c8a04a;
  --line: rgba(255,255,255,.10);

  /* Die drei Marken, an denen die Bereiche drehen. Sie stehen als
     Zahlenfolge da, damit sich rgba(var(--gold-rgb), .4) schreiben
     lässt — so folgt jede Fläche, jeder Rand und jeder Schein dem
     Bereich, ohne dass irgendwo eine Farbe doppelt gepflegt wird. */
  --gold-rgb: 200,160,74;
  --blut-rgb: 164,20,43;
  --hell-rgb: 240,220,168;
  /* Dieselben Töne noch einmal als fertige Farbe — so lassen sie sich
     auch in einem style="…"-Feld einer Seite verwenden. */
  --blut: rgb(164,20,43);
  --zweit: #d69466;
  /* Dieselben Töne als Zahlenfolge — für rgba(var(--zweit-rgb), .4).
     --flaeche-rgb und --kopf-rgb sind der Grund der Kästen und des
     Kopfes; jeder Bereich setzt dafür seine eigene Nacht ein. */
  --zweit-rgb:     214, 148, 102;
  --gold-tief-rgb: 143, 111,  44;
  --flaeche-rgb:    22,  16,  10;
  --kopf-rgb:       13,  10,   7;
}
body {
  background-color: var(--ink-950);
  /* Feines Raster — die Andeutung eines Karteikastens. Steht fest, damit
     es beim Scrollen und unter der Bewegung darüber ruhig bleibt. */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 64px);
  background-attachment: fixed;
  color:#e4e4e7;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  /* Kein -webkit-font-smoothing: Unter Windows schaltet das die
     Subpixel-Glättung ab und die Schrift wirkt dünn und weich.
     Überlassen wir das dem System, wird sie deutlich schärfer. */
  text-rendering: optimizeLegibility;
  padding-bottom:60px;
  min-height:100vh;
}

/* ── Hintergrund ────────────────────────────────────────────────── */
/* Über dem Raster liegen zwei feststehende Ebenen: farbige Schleier, die
   sehr langsam wandern, und darüber Körnung samt Abdunklung zum Rand.
   So wirkt die Fläche nicht wie ein einziger Farbblock. */
body::before,
body::after {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
}

body::before {
  background-image:
    /* Lichtschein oben links und rechts */
    radial-gradient(1100px 620px at 8% -14%, rgba(var(--blut-rgb),.22), transparent 62%),
    radial-gradient(900px 500px at 92% -6%, rgba(var(--gold-rgb),.11), transparent 60%),
    /* Ein zweiter, kühler Schein weiter unten, damit lange Seiten nicht kippen */
    radial-gradient(1000px 700px at 78% 108%, rgba(90,169,230,.10), transparent 62%),
    radial-gradient(700px 500px at 12% 88%, rgba(157,124,216,.09), transparent 60%);
  animation: schleier 48s ease-in-out infinite alternate;
}

body::after {
  /* Körnung gegen Farbstufen in den Verläufen … */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045;
  /* … und eine Abdunklung zum Rand, die den Blick nach innen zieht */
  box-shadow: inset 0 0 240px 60px rgba(0,0,0,.55);
}

@keyframes schleier {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -18px, 0) scale(1.04); }
}

/* Wer Bewegung abbestellt hat, bekommt dieselbe Fläche ohne Drift */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
/* Etwas deckender als früher — die Karten sollen sich vom belebten
   Hintergrund abheben, ohne ihn ganz zu verdecken. */
.panel {
  /* Ohne backdrop-filter: Der Text darin behält die Subpixel-Glättung.
     Dafür deckt der Grund eine Spur mehr, damit der Kasten trotzdem
     vom belebten Hintergrund absteht. */
  border:1px solid var(--line); background:rgba(16,11,13,.9);
  border-radius:12px;
}

header {
  /* Auch hier kein backdrop-filter — der Titel steht darin, und genau
     der soll scharf sein. Der Grund deckt dafür fast vollständig. */
  position:sticky; top:0; z-index:30;
  border-bottom:1px solid rgba(var(--blut-rgb),.3);
  background:rgba(10,7,8,.985);
}
.hrow { display:flex; align-items:center; gap:20px; padding:16px 0; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:16px; text-decoration:none; }
.logo img {
  height:72px; width:auto; max-width:150px; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 0 9px rgba(var(--blut-rgb),.4)); transition:filter .3s;
}
.logo:hover img { filter:drop-shadow(0 0 20px rgba(var(--gold-rgb),.5)); }
.brand-1 { display:block; font-size:26px; font-weight:700; line-height:1.1; letter-spacing:.18em; color:#fafafa; }
.brand-2 { display:block; font-size:21px; font-weight:600; line-height:1.15; letter-spacing:.3em; color:var(--gold); }
.brand-sub { display:block; margin-top:4px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#71717a; }

h1 { font-size:30px; font-weight:700; letter-spacing:-.01em; color:#fafafa; }
.seal { font-family:ui-monospace,Consolas,monospace; font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:rgba(var(--gold-rgb),.8); }
.muted { color:#71717a; font-size:14px; }
.mono { font-family:ui-monospace,Consolas,monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#52525b; }
.sec-title { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:#a1a1aa; margin-bottom:12px; }
.label { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:#71717a; margin-bottom:6px; }
section { margin-top:28px; }

/* Reiter */
/* Die fünf Bereiche der Datenbank. Bewusst groß und als eigene Kacheln
   abgesetzt — sie sind der Haupteinstieg auf dieser Seite. */
.tabs { position:relative; border-bottom:1px solid var(--line); }
/* So viele Kacheln nebeneinander, wie bei 150 px Mindestbreite passen —
   auf dem Schirm fünf, auf dem Handy zwei. */
.tablist {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:8px; padding:12px 12px 14px;
}
.tablist::-webkit-scrollbar { display:none; }
.tab {
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.02);
  padding:14px 10px 12px; font-size:13px; font-weight:500; line-height:1.25;
  color:#a1a1aa; text-decoration:none;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.tab:hover {
  color:#f4f4f5; transform:translateY(-2px);
  border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05);
}
.tab.active {
  color:#fafafa; border-color:var(--c); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px var(--c), 0 10px 26px -14px var(--c);
}
.tab .ico { font-size:26px; line-height:1; transition:transform .3s; }
.tab.active .ico { transform:scale(1.12); }
.tab .cnt {
  border:1px solid var(--line); border-radius:6px; padding:2px 9px;
  font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#71717a;
}
.tab.active .cnt { border-color:currentColor; color:inherit; }
/* Führt das Band nur einen Reiter — wie auf der Seite „Routen" —,
   läuft er nicht über die ganze Breite. */
.tablist > .tab:only-child { max-width:320px; }
.underline { display:none; }

.input {
  width:100%; border:1px solid var(--line); background:var(--ink-850);
  border-radius:8px; padding:9px 12px; font-size:14px; color:#f4f4f5; outline:none;
  font-family:inherit; transition:border-color .2s, box-shadow .2s;
}
.input:focus { border-color:rgba(224,71,95,.5); box-shadow:0 0 0 3px rgba(var(--blut-rgb),.2); }
.input::placeholder { color:#52525b; }

/* Aufklappbarer Bereich, z.B. der Familienfilter in der Datenbank */
.ausklapp { overflow:hidden; }
.ausklapp > summary {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 20px; cursor:pointer; list-style:none;
  transition:background .2s;
}
.ausklapp > summary::-webkit-details-marker { display:none; }
.ausklapp > summary:hover { background:rgba(255,255,255,.03); }
.ausklapp-hinweis {
  font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#52525b;
}
.ausklapp-pfeil {
  margin-left:auto; color:#71717a; font-size:13px; transition:transform .25s;
}
.ausklapp[open] > summary .ausklapp-pfeil { transform:rotate(180deg); }
.ausklapp[open] > summary { border-bottom:1px solid var(--line); }
.ausklapp-inhalt { padding:16px 20px 6px; }

.fac-row { display:flex; flex-wrap:wrap; gap:6px; }
.fac {
  border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:6px;
  padding:5px 10px; font-size:12px; color:#a1a1aa; text-decoration:none; cursor:pointer;
  font-family:inherit; transition:transform .2s, border-color .2s, color .2s;
}
.fac:hover { transform:translateY(-2px); border-color:rgba(var(--blut-rgb),.4); color:#f4f4f5; }
.fac.active { border-color:rgba(var(--blut-rgb),.6); background:rgba(var(--blut-rgb),.2); color:var(--blood-soft); }

.types { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.type { padding:14px 16px; text-decoration:none; display:block; transition:transform .3s, border-color .2s; }
.type:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.25); }
.type .num { font-size:24px; font-weight:600; color:#f4f4f5; }
.type .lbl { margin-top:4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }

.cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card {
  display:flex; gap:16px; padding:12px; text-decoration:none; color:inherit; height:100%;
  transition:transform .3s, border-color .2s, background .2s, box-shadow .3s;
}
.card:hover {
  transform:translateY(-4px); border-color:rgba(var(--blut-rgb),.5); background:rgba(22,16,18,.7);
  box-shadow:0 0 0 1px rgba(var(--blut-rgb),.25), 0 8px 28px -12px rgba(var(--blut-rgb),.55);
}
.thumb {
  width:80px; height:96px; flex-shrink:0; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-800);
  display:grid; place-items:center; font-size:24px;
}
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.card:hover .thumb img { transform:scale(1.05); }
.card h3 { font-size:15px; font-weight:600; color:#f4f4f5; margin-top:8px; transition:color .2s; }
.card:hover h3 { color:var(--blood-soft); }
.card .alias { font-size:12px; color:#71717a; }
.card .sum {
  margin-top:6px; font-size:12px; line-height:1.6; color:#a1a1aa;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.chip {
  display:inline-flex; align-items:center; border:1px solid var(--line);
  background:rgba(255,255,255,.05); border-radius:6px; padding:2px 8px;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#a1a1aa; text-decoration:none;
}
.badge {
  display:inline-flex; align-items:center; border:1px solid; border-radius:6px;
  padding:2px 8px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
}
.t-red    { border-color:rgba(224,71,95,.5);  background:rgba(var(--blut-rgb),.2);  color:var(--blood-soft); }
.t-gold   { border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.1); color:var(--gold); }
.t-orange { border-color:rgba(249,115,22,.4); background:rgba(249,115,22,.1); color:#fdba74; }
.t-blue   { border-color:rgba(14,165,233,.4); background:rgba(14,165,233,.1); color:#7dd3fc; }
.t-green  { border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.1); color:#6ee7b7; }
.t-purple { border-color:rgba(139,92,246,.4); background:rgba(139,92,246,.1); color:#c4b5fd; }
.t-neutral{ border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:#a1a1aa; }

/* Aktenansicht */
.stripe { height:4px; border-radius:12px 12px 0 0; }
.hero { display:flex; gap:20px; padding:24px; flex-wrap:wrap; }
.hero .photo { width:144px; height:176px; border-radius:12px; }
.detail { display:grid; grid-template-columns:1fr 320px; gap:24px; margin-top:24px; }
dl { display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; }
dd { font-size:14px; color:#e4e4e7; white-space:pre-wrap; }
.full { grid-column:1 / -1; }
.entry { border:1px solid var(--line); background:rgba(22,16,18,.5); border-radius:9px; padding:16px; margin-bottom:12px; }
.entry .t { margin-top:8px; font-size:14px; font-weight:500; color:#f4f4f5; }
.entry .b { margin-top:4px; font-size:14px; line-height:1.6; color:#a1a1aa; white-space:pre-wrap; }
.entry.bearbeiten { border-color:rgba(var(--gold-rgb),.45); background:rgba(var(--gold-rgb),.06); }
.entry-knoepfe { display:flex; gap:6px; margin-left:auto; }
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gallery a { display:block; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.gallery img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .4s; }
.gallery a:hover img { transform:scale(1.05); }

.empty { padding:56px 24px; text-align:center; }
.empty .ico { font-size:40px; opacity:.3; }
.empty p { margin-top:12px; font-size:14px; color:#a1a1aa; }

footer { border-top:1px solid rgba(255,255,255,.05); margin-top:48px; padding-top:16px; font-size:11px; color:#52525b; }

/* Auftritt */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pop  { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } }
.rise { animation:rise .52s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0ms); }
.fade { animation:fade .4s ease-out both; animation-delay:var(--d,0ms); }
.pop  { animation:pop .42s cubic-bezier(.34,1.56,.64,1) both; animation-delay:var(--d,0ms); }

.shimmer { position:relative; overflow:hidden; }
.shimmer::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(var(--gold-rgb),.14) 50%, transparent 60%);
  transform:translateX(-100%); transition:transform .85s ease;
}
.shimmer:hover::after { transform:translateX(100%); }

.hidden { display:none !important; }

/* ── Knöpfe ─────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:8px; padding:9px 18px; font-size:14px; font-weight:500;
  font-family:inherit; text-decoration:none; cursor:pointer; border:0;
  transition:transform .25s, background .2s, border-color .2s, color .2s;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--blood); color:#fafafa; }
.btn-primary:hover { background:var(--blood-bright); }
.btn-ghost { border:1px solid var(--line); color:#d4d4d8; background:transparent; }
.btn-ghost:hover { border-color:rgba(255,255,255,.3); color:#fff; }
.btn-danger { border:1px solid rgba(224,71,95,.45); color:var(--blood-soft); background:transparent; }
.btn-danger:hover { background:rgba(var(--blut-rgb),.2); }
.btn-anlegen { border:1px solid; font-weight:600; }
.btn-anlegen .plus { font-size:16px; transition:transform .3s; }
.btn-anlegen:hover .plus { transform:rotate(90deg); }

.linkknopf {
  border:0; background:none; color:#52525b; font-size:12px; font-family:inherit;
  cursor:pointer; padding:0; transition:color .2s;
}
.linkknopf:hover { color:var(--blood-soft); }

/* ── Formulare ──────────────────────────────────────────────────── */
.kopfzeile {
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  justify-content:space-between; padding:20px 24px;
}
.suchzeile { display:flex; gap:12px; padding:0 24px 20px; }

.zwei { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.zwei .ganz { grid-column:1 / -1; }

textarea.input { resize:vertical; line-height:1.6; }
select.input { cursor:pointer; }

.dateifeld { padding:7px 12px; cursor:pointer; }
.dateifeld::file-selector-button {
  margin-right:12px; border:0; border-radius:6px; padding:5px 12px;
  background:rgba(var(--blut-rgb),.25); color:var(--blood-soft);
  font-size:12px; font-family:inherit; cursor:pointer;
}

.frei-feld { margin-top:8px; border-color:rgba(var(--gold-rgb),.35); }

.eigenzeile { display:flex; gap:8px; margin-bottom:8px; }
.eigenzeile .input:first-child { max-width:220px; }

.chronik-form {
  border:1px solid var(--line); background:rgba(22,16,18,.7);
  border-radius:9px; padding:16px;
}

.type.gewaehlt { border-color:rgba(var(--blut-rgb),.6); background:rgba(var(--blut-rgb),.12); }

/* ── Kopfnavigation ─────────────────────────────────────────────── */
/* Eigene Zeile unter Logo und Schriftzug, mittig ausgerichtet. */
/* Zeitauswahl (Lager, VIP-Service) */
.zeitwahl { display:flex; align-items:flex-end; gap:10px; }
.zeitwahl select.input { min-width:140px; }

/* ── Zimmerreservierung ─────────────────────────────────────────── */
/* Zimmerverteilung: eine Karte je Familie, Nummer groß voran */
.zimmerplan-gitter {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:8px; margin-top:8px;
}
.zimmerkarte {
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  background:rgba(255,255,255,.02);
  transition:border-color .2s, background .2s, transform .2s;
}
.zimmerkarte:hover {
  border-color:rgba(var(--gold-rgb),.45); background:rgba(var(--gold-rgb),.08);
  transform:translateY(-2px);
}
.zimmerkarte-nummer {
  flex:none; min-width:44px; text-align:center;
  border-radius:6px; padding:4px 7px;
  background:rgba(var(--gold-rgb),.16); border:1px solid rgba(var(--gold-rgb),.4);
  font-family:ui-monospace,Consolas,monospace; font-size:14px; font-weight:600; color:var(--gold);
}
.zimmerkarte-name {
  min-width:0; font-size:13px; line-height:1.35; color:#e4e4e7;
}
.zimmerplan > summary .ausklapp-hinweis { color:#8a7a55; }

/* Die Kopfzeile über der Verteilung — Hinweis links, „bearbeiten" rechts */
.zimmerplan-kopf {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
/* Eine Nummer, die von der ursprünglichen abweicht */
.zimmerkarte-anders .zimmerkarte-nummer {
  background:rgba(var(--gold-rgb),.28); border-color:rgba(var(--gold-rgb),.7);
}
/* Dieselbe Karte, nur mit Eingabefeld statt Schild */
.zimmerkarte-feld { cursor:text; }
.zimmerkarte-feld .input {
  flex:none; width:78px; padding:5px 8px; text-align:center;
  font-family:ui-monospace,Consolas,monospace; font-size:14px; font-weight:600;
  color:var(--gold);
}
/* Ein Zimmer, das später angelegt wurde */
.zimmerkarte-neu .zimmerkarte-nummer {
  background:rgba(126,196,139,.16); border-color:rgba(126,196,139,.5); color:#a5d8b3;
}
/* Die Zeilen, in denen weitere Zimmer angelegt werden */
.zimmerneu-liste { display:grid; gap:8px; margin-top:8px; }
.zimmerneu {
  display:grid; grid-template-columns:1.4fr 1fr 100px; gap:8px;
}
.zimmerneu .input { padding:7px 10px; font-size:13px; }
.zimmerneu-nummer {
  text-align:center; font-family:ui-monospace,Consolas,monospace;
  font-weight:600; color:var(--gold);
}
@media (max-width:640px) { .zimmerneu { grid-template-columns:1fr; } }


/* Anfrageformular: Name und Zimmer nebeneinander */
.zimmer-form { display:grid; grid-template-columns:1.8fr .9fr; gap:14px 20px; }
@media (max-width:820px) { .zimmer-form { grid-template-columns:1fr; } }

.zimmer {
  border:1px solid var(--line); border-left:3px solid var(--c);
  background:rgba(22,16,18,.5); border-radius:9px; padding:14px 16px; margin-bottom:8px;
}
.zimmer.bearbeiten { border-color:rgba(var(--gold-rgb),.45); background:rgba(var(--gold-rgb),.06); }
.zimmer-kopf { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zimmer-nummer {
  flex:none; min-width:58px; text-align:center;
  border:1px solid var(--c); border-radius:8px; padding:7px 10px;
  font-family:ui-monospace,Consolas,monospace; font-size:15px; color:var(--c);
}
.zimmer-name { font-size:14px; font-weight:500; color:#f4f4f5; }
.zimmer-text {
  margin-top:10px; font-size:13px; line-height:1.6; color:#a1a1aa; white-space:pre-wrap;
}
.zimmer-text .label { display:block; margin-bottom:2px; }
.zimmer-auftrag {
  margin-top:10px; padding:8px 12px; border-radius:7px;
  border:1px solid rgba(200,32,58,.4); background:rgba(200,32,58,.1);
  font-size:12px; color:#f0a0ae;
}
.zimmer-auftrag a { color:var(--blood-soft); text-decoration:none; font-weight:500; }
.zimmer-auftrag a:hover { text-decoration:underline; }
.zimmer-auftragform {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.zimmer-auftragform .btn { padding:7px 14px; font-size:13px; }

/* Die Buchungsbestätigung zum Herunterladen */
.zimmer-blatt {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.zimmer-blatt .btn { padding:7px 14px; font-size:13px; }
.zimmer-warnung {
  margin-top:10px; padding:7px 11px; border-radius:7px;
  border:1px solid rgba(224,71,95,.4); background:rgba(var(--blut-rgb),.14);
  font-size:12px; color:#fca5a5;
}


/* ── Anträge (Red Cycle) ────────────────────────────────────────── */
.antrag-form { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px 20px; }

/* Auswahl dessen, was beantragt wird — große Felder statt Aufklappliste */
.antrag-wahl {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:8px; margin-top:6px;
}
.antragart { display:block; position:relative; cursor:pointer; }
.antragart input {
  position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none;
}
.antragart-feld {
  display:flex; align-items:center; gap:10px; height:100%;
  border:1px solid var(--line); border-radius:9px; padding:11px 13px;
  background:rgba(22,16,18,.5); font-size:13px; color:#a1a1aa;
  transition:border-color .2s, color .2s, background .2s;
}
.antragart-icon { font-size:19px; line-height:1; }
.antragart:hover .antragart-feld { border-color:rgba(255,255,255,.25); color:#e4e4e7; }
.antragart input:checked + .antragart-feld {
  border-color:var(--c); background:rgba(255,255,255,.06); color:#f4f4f5;
  box-shadow:0 0 0 1px var(--c);
}
.antragart input:focus-visible + .antragart-feld {
  outline:2px solid rgba(var(--gold-rgb),.6); outline-offset:2px;
}

.antrag {
  border:1px solid var(--line); border-left:3px solid var(--c);
  background:rgba(22,16,18,.5); border-radius:9px; padding:14px 16px; margin-bottom:8px;
}
.antrag.bearbeiten { border-color:rgba(var(--gold-rgb),.45); background:rgba(var(--gold-rgb),.06); }
.antrag-kopf { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.antrag-art {
  flex:none; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--c); border-radius:7px; padding:5px 10px;
  font-size:12px; color:var(--c); white-space:nowrap;
}
.antrag-name { font-size:14px; font-weight:500; color:#f4f4f5; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.antrag-text {
  margin-top:10px; font-size:13px; line-height:1.6; color:#a1a1aa; white-space:pre-wrap;
}

@media (max-width:700px) {
  .antrag-form { grid-template-columns:1fr; }
  .antrag-kopf { gap:8px; }
}

.hauptnav {
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.18);
}
/* Zwei Reihen untereinander, jede für sich mittig. Wird es sehr eng,
   lässt sich eine Reihe seitlich schieben statt umzubrechen. */
.navzeile {
  display:flex; align-items:flex-end;
  justify-content:center; justify-content:safe center;
  gap:30px; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none;
}
.navzeile::-webkit-scrollbar { display:none; }
.navzeile-zwei {
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:2px;
}

.navlink {
  flex-shrink:0;
  font-size:21px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#a1a1aa; text-decoration:none; padding:10px 2px 8px;
  border-bottom:3px solid transparent; white-space:nowrap;
  transition:color .2s, border-color .2s, text-shadow .3s;
}
.navlink:hover { color:#f4f4f5; }
.navlink.an {
  color:#fafafa; border-color:var(--blood);
  text-shadow:0 0 12px rgba(var(--blut-rgb),.5);
}

/* Knopf oben im Kopf, z.B. fürs Dashboard */
.kopfknopf {
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(157,124,216,.45); border-radius:7px;
  background:rgba(157,124,216,.12); padding:6px 12px;
  font-size:12px; font-weight:500; color:#c4aae8; text-decoration:none; white-space:nowrap;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.kopfknopf:hover {
  color:#e6d9ff; border-color:rgba(157,124,216,.75);
  background:rgba(157,124,216,.22); transform:translateY(-1px);
}
.kopfknopf.an {
  color:#f4f4f5; border-color:rgba(157,124,216,.9);
  background:rgba(157,124,216,.3);
  box-shadow:0 0 0 1px rgba(157,124,216,.35);
}

.kopfrechts { margin-left:auto; display:flex; align-items:center; gap:12px; }

/* Wie viele gerade angemeldet unterwegs sind */
.online {
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(16,185,129,.35); background:rgba(16,185,129,.08);
  border-radius:99px; padding:4px 11px 4px 9px;
  font-size:12px; color:#6ee7b7; white-space:nowrap; cursor:default;
}
.online-punkt {
  width:7px; height:7px; border-radius:50%; background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.6);
  animation:pulsieren 2.4s ease-out infinite;
}
@keyframes pulsieren {
  0%   { box-shadow:0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow:0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
.navname { text-transform:none; letter-spacing:.04em; color:#71717a; }
/* Der eigene Name steht eine Spur größer als die übrige Kopfschrift */
.navname strong { font-size:12.5px; }

/* Das eigene Profilbild vor dem Namen. Rund, mit einem feinen Ring, und
   beim Überfahren hebt es sich leicht an. Hat jemand kein Bild bei
   Discord — oder lädt es nicht —, tritt der Anfangsbuchstabe an seine
   Stelle, in einer Farbe, die sich aus dem Namen ergibt. */
.navbild {
  position:relative; flex:none; display:inline-block; vertical-align:middle;
  width:32px; height:32px; border-radius:50%; overflow:hidden;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.35), 0 2px 8px rgba(0,0,0,.45);
  transition:box-shadow .22s ease, transform .22s ease;
}
.navbild img {
  display:block; width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.navbild-ersatz {
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--c, #c8a04a), rgba(0,0,0,.55));
  color:#0f0b09; font:700 15px/1 ui-sans-serif, system-ui, sans-serif;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.navbild.ohne-bild .navbild-ersatz { display:flex; }
.navbild.ohne-bild img { display:none; }
.navname:hover .navbild {
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.7), 0 4px 12px rgba(0,0,0,.55);
}

.stufe {
  display:inline-block; margin-left:6px; border:1px solid; border-radius:5px;
  padding:1px 6px; font-size:9px; text-transform:uppercase; letter-spacing:.1em;
}
.stufe-leitung   { border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.1); color:var(--gold); }
.stufe-schreiber { border-color:rgba(14,165,233,.4); background:rgba(14,165,233,.1); color:#7dd3fc; }
.stufe-leser     { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#a1a1aa; }
.stufe-bereich   { border-color:rgba(var(--blut-rgb),.45); background:rgba(var(--blut-rgb),.15); color:var(--blood-soft); }

/* ── Anmeldung über Discord ─────────────────────────────────────── */
.discord-knopf {
  width:100%; background:#5865f2; color:#fff; font-weight:600; font-size:15px;
  padding:12px 18px; gap:10px;
}
.discord-knopf:hover { background:#4752c4; }

.notzugang {
  cursor:pointer; list-style:none; font-size:12px; color:#52525b;
  text-align:center; padding:6px; transition:color .2s;
}
.notzugang:hover { color:#a1a1aa; }
.notzugang::-webkit-details-marker { display:none; }
.notzugang::before { content:'▸ '; }
details[open] .notzugang::before { content:'▾ '; }

/* ── Mehrere Personen auswählen ─────────────────────────────────── */
.personenwahl {
  max-height:230px; overflow-y:auto;
  border:1px solid var(--line); border-radius:8px; background:var(--ink-850);
  padding:6px;
}
.personzeile {
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; border-radius:6px; cursor:pointer;
  font-size:14px; color:#d4d4d8; transition:background .15s;
}
.personzeile:hover { background:rgba(255,255,255,.05); }
.personzeile input { accent-color:var(--blood); width:16px; height:16px; cursor:pointer; }
.personzeile:has(input:checked) { background:rgba(var(--blut-rgb),.15); color:#f4f4f5; }
/* Zwischenüberschrift in einer gruppierten Auswahlliste */
.wahl-gruppe {
  margin:10px 0 4px; padding:0 4px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); opacity:.75;
}
.wahl-gruppe:first-child { margin-top:0; }

/* ── Abteilungen ────────────────────────────────────────────────── */
.abt-kopf {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:20px 24px 8px;
}
.abt-name { font-size:20px; font-weight:700; letter-spacing:.06em; }
.abt-zustaendig { margin-top:2px; font-size:13px; color:#a1a1aa; }
.abt-zahlen { display:flex; gap:8px; }

/* ── Verweise zwischen Akten ────────────────────────────────────── */
/* Eine Verknüpfung — überall im Haus dieselbe Handschrift wie in der
   Mitgliederliste einer Familie/Organisation: der Name trägt einen
   feinen goldenen Strich, der beim Überfahren aufleuchtet, und die
   Zeile hebt sich dabei leicht an. */
.verweis {
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(var(--gold-rgb),.16);
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.06), rgba(var(--gold-rgb),.02));
  border-radius:8px; padding:6px 12px; font-size:13px; font-weight:600;
  color:rgb(var(--hell-rgb)); text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012);
  transition:border-color .18s ease, background .18s ease,
             color .18s ease, transform .18s ease;
}
.verweis:hover {
  color:var(--gold-hell); border-color:rgba(var(--gold-rgb),.55);
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.16), rgba(var(--gold-rgb),.06));
  transform:translateY(-1px);
}
/* Man selbst unter mehreren Zugewiesenen */
.verweis-meiner {
  border-color:rgba(var(--gold-rgb),.5); color:var(--gold-hell);
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.07));
}

.auftragzeile {
  display:block; border:1px solid var(--line); background:rgba(22,16,18,.5);
  border-radius:9px; padding:12px; margin-bottom:8px; text-decoration:none;
  transition:transform .2s, border-color .2s, background .2s;
}
.auftragzeile:hover {
  transform:translateY(-2px); border-color:rgba(var(--blut-rgb),.5); background:rgba(22,16,18,.8);
}
.auftragzeile.meiner { border-left:3px solid var(--gold); }
.auftragzeile.meiner:hover { border-color:rgba(var(--gold-rgb),.5); border-left-color:var(--gold); }
.chip-meiner { border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.12); color:var(--gold); }
.auftragtext {
  display:block; margin-top:5px; font-size:12px; line-height:1.6; color:#a1a1aa;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Statuswechsel direkt in der Auftragsakte, ohne den Umweg übers Formular */
.statuszeile {
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:16px;
  border:1px solid var(--line); background:rgba(22,16,18,.7);
  border-radius:9px; padding:12px 14px;
}
.statuszeile .label { margin:0 0 4px; }
.statuszeile select.input { min-width:190px; }

.hinweiszeile {
  margin-top:14px; font-size:12px; line-height:1.7; color:#71717a;
  border-left:2px solid rgba(var(--gold-rgb),.5); padding-left:12px;
}

.auftragkopf { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.auftragtitel { display:block; font-size:14px; font-weight:500; color:#f4f4f5; }
.auftragzeile:hover .auftragtitel { color:var(--blood-soft); }
.auftragzeile .mono { display:block; margin-top:4px; }

/* ── Lost Place ─────────────────────────────────────────────────── */
.ort { overflow:hidden; margin-top:20px; }
.ort-kopf {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:20px 24px 12px;
}
.ort-plz {
  display:inline-flex; align-items:center;
  border:1px solid rgba(126,196,139,.45); background:rgba(126,196,139,.12);
  border-radius:6px; padding:3px 10px;
  font-family:ui-monospace,Consolas,monospace; font-size:14px; font-weight:600;
  letter-spacing:.06em; color:#7ec48b;
}
.ort-name { font-size:19px; font-weight:600; color:#f4f4f5; }
.ort-text { margin-top:8px; font-size:14px; line-height:1.7; color:#a1a1aa; white-space:pre-wrap; max-width:70ch; }

.ort-form { display:grid; grid-template-columns:140px 1fr 210px; gap:12px; }

.ort-galerie {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px;
}
.ort-bild { position:relative; }
.ort-bild a { display:block; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.ort-bild img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .4s; }
.ort-bild:hover img { transform:scale(1.06); }
.ort-bild form { position:absolute; top:6px; right:6px; opacity:0; transition:opacity .2s; }
.ort-bild:hover form { opacity:1; }

/* Welches Bild in der Übersicht steht, sieht man am Bild selbst: das
   erste trägt einen Stern, die übrigen einen Knopf, der es dorthin
   holt. Beides sitzt unten links, damit es dem Löschkreuz oben rechts
   nicht ins Gehege kommt. */
.ort-bild form.ort-waehlen {
  top:auto; right:auto; bottom:6px; left:6px;
}
.ort-marke {
  position:absolute; bottom:6px; left:6px; z-index:2;
  display:inline-flex; align-items:center;
  border:1px solid rgba(126,196,139,.5); border-radius:999px;
  background:rgba(10,8,6,.8); padding:2px 9px;
  font-family:inherit; font-size:10.5px; letter-spacing:.06em;
  color:#7ec48b; white-space:nowrap;
}
.ort-marke.ort-knopf {
  position:static; cursor:pointer;
  border-color:rgba(255,255,255,.2); color:rgba(var(--hell-rgb), .6);
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.ort-marke.ort-knopf:hover {
  color:#7ec48b; border-color:rgba(126,196,139,.6);
  background:rgba(126,196,139,.14);
}
.ort-vorschau a { border-color:rgba(126,196,139,.45); }

/* Die PLZ auf einer Karte der Übersicht */
.ort-plz-chip {
  font-family:ui-monospace,Consolas,monospace; font-weight:600;
  letter-spacing:.06em; color:#7ec48b; border-color:rgba(126,196,139,.4);
}

.ort-hochladen { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.ort-hochladen .input { flex:1; min-width:200px; }
.ort-hochladen .btn { flex-shrink:0; }

@media (max-width:900px) {
  .ort-form { grid-template-columns:140px 1fr; }
}
@media (max-width:700px) {
  .ort-form { grid-template-columns:1fr; }
  .ort-hochladen { flex-direction:column; }
}

/* ── Mitgliederliste ────────────────────────────────────────────── */
.mitgl-kopf {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:20px 24px;
}
.mitgl-liste {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px;
}
.mitgl {
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--line); background:rgba(22,16,18,.5);
  border-radius:9px; padding:9px 12px;
  transition:border-color .2s, background .2s, transform .2s;
}
.mitgl:hover { border-color:rgba(var(--gold-rgb),.35); background:rgba(22,16,18,.85); transform:translateY(-2px); }
.mitgl-bild {
  width:36px; height:36px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--line); object-fit:cover; background:var(--ink-800);
}
.mitgl-ersatz {
  display:grid; place-items:center; border-width:1px; border-style:solid;
  font-size:15px; font-weight:600; color:#a1a1aa;
}
.mitgl-text { min-width:0; display:flex; flex-direction:column; }
.mitgl-name {
  font-size:14px; font-weight:500; color:#f4f4f5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mitgl-text .mono { text-transform:none; letter-spacing:0; margin-top:1px; }

/* ── Dokumentenablage Elite / BRV 141 ───────────────────────────── */
.dok-kopf {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:20px 24px 4px;
}
.dok-form { display:grid; grid-template-columns:170px 1fr 1fr; gap:12px; }

/* Suchleiste mit Aufklapp-Knopf */
.dok-leiste { display:flex; gap:12px; align-items:center; }
.dok-leiste .input { flex:1; min-width:0; }
.dok-leiste .btn { flex-shrink:0; white-space:nowrap; }
#hochladenKnopf .plus { font-size:16px; display:inline-block; transition:transform .3s; }
#hochladenKnopf.offen .plus { transform:rotate(45deg); }
#hochladenKnopf.offen { background:var(--ink-700); color:#d4d4d8; }
#hochladenBereich { animation:rise .3s cubic-bezier(.22,1,.36,1) both; }

/* ── Aktendatenbank ─────────────────────────────────────────────── */
/* Jede Kategorie ist ein eigener aufklappbarer Kasten. Zugeklappt sieht
   man auf einen Blick, was es gibt; aufgeklappt die Unterlagen darin. */
.dokzeilen { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.dokschalter {
  border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer;
  padding:4px 11px; font-family:inherit; font-size:11px; color:#71717a;
  transition:color .2s, border-color .2s;
}
.dokschalter:hover { color:var(--gold); border-color:rgba(var(--gold-rgb),.45); }

.dok-kategorie { overflow:hidden; margin-top:14px; border-left:3px solid var(--c); }
.dok-kategorie > summary {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; cursor:pointer; list-style:none;
  transition:background .2s;
}
.dok-kategorie > summary::-webkit-details-marker { display:none; }
.dok-kategorie > summary:hover { background:rgba(255,255,255,.03); }
.dok-kategorie[open] > summary { border-bottom:1px solid var(--line); }
.dok-kat-icon { font-size:22px; line-height:1; color:var(--c); }
.dok-kat-name {
  font-size:16px; font-weight:600; letter-spacing:.02em; color:var(--c);
}
.dok-kategorie > summary .badge { margin-left:2px; }
.dok-kategorie > summary .ausklapp-pfeil { margin-left:auto; }
.dok-kategorie[open] > summary .ausklapp-pfeil { transform:rotate(180deg); }
.dok-kat-inhalt { padding:8px 20px 18px; }

.dok-zeile { display:flex; align-items:stretch; gap:6px; margin-bottom:8px; flex-wrap:wrap; }

/* Verknüpfte Personen stehen in einer eigenen Zeile unter dem Dokument */
.dok-personen {
  flex-basis:100%; display:flex; gap:6px; flex-wrap:wrap;
  padding:2px 0 4px 14px;
}
.dok-personen .chip { text-transform:none; letter-spacing:0; font-size:12px; transition:color .2s, border-color .2s; }
.dok-personen .chip:hover { color:var(--gold); border-color:rgba(var(--gold-rgb),.4); }
.dok-zeile.bearbeiten {
  display:block; border:1px solid rgba(var(--gold-rgb),.4); background:rgba(22,16,18,.9);
  border-radius:9px; padding:16px;
}
.dok-link {
  flex:1; min-width:0; display:block; text-decoration:none;
  border:1px solid var(--line); background:rgba(22,16,18,.5); border-radius:9px;
  padding:12px 14px; transition:border-color .2s, background .2s, transform .2s;
}
.dok-link:hover {
  border-color:rgba(var(--gold-rgb),.45); background:rgba(22,16,18,.85); transform:translateY(-2px);
}
.dok-titel { display:block; margin-top:6px; font-size:14px; font-weight:500; color:#f4f4f5; }
.dok-link:hover .dok-titel { color:var(--gold); }
.dok-bemerkung { display:block; margin-top:4px; font-size:12px; line-height:1.6; color:#a1a1aa; white-space:pre-wrap; }
.dok-link .mono { display:block; margin-top:6px; text-transform:none; letter-spacing:0; }

/* Bilder in der Ablage bekommen ein kleines Vorschaubild */
.dok-vorschau {
  float:left; width:62px; height:62px; object-fit:cover; margin-right:12px;
  border:1px solid var(--line); border-radius:7px; background:rgba(0,0,0,.3);
}
.dok-link.mit-vorschau::after { content:''; display:block; clear:both; }

@media (max-width:700px) {
  .dok-form { grid-template-columns:1fr; }
  .dok-leiste { flex-direction:column; align-items:stretch; }
}

/* ── Blacklist ──────────────────────────────────────────────────── */
/* ══ Blacklist ═════════════════════════════════════════════════════
   Ruhiger Aufbau: oben Zahlen und Suche, darunter die Liste. Jede
   Zeile kommt versetzt herein und hebt sich beim Überfahren an. */

.bl-zahlen { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.bl-zahl {
  display:flex; flex-direction:column; gap:2px;
  padding:8px 14px; border-radius:9px;
  border:1px solid rgba(var(--blut-rgb), .22); background:rgba(var(--blut-rgb), .07);
}
.bl-zahl-wert { font-size:19px; font-weight:700; color:rgb(var(--hell-rgb)); line-height:1.1; }
.bl-zahl-wort {
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .45);
}
.bl-zahl-such { border-color:rgba(var(--gold-rgb), .35); background:rgba(var(--gold-rgb), .08); }
.bl-zahl-such .bl-zahl-wert { color:var(--gold-hell); }

/* Die Suchzeile */
.bl-suchzeile { position:relative; flex:1 1 260px; max-width:460px; }
.bl-lupe {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:15px; color:rgba(var(--hell-rgb), .3); pointer-events:none;
}
.bl-suche { padding-left:34px !important; padding-right:34px !important; }
.bl-suche::-webkit-search-cancel-button { display:none; }
.bl-loeschen {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:0; border-radius:5px; cursor:pointer;
  background:transparent; color:rgba(var(--hell-rgb), .35); font-size:12px;
  line-height:1; transition:color .15s ease, background .15s ease;
}
.bl-loeschen:hover { color:rgb(var(--hell-rgb)); background:rgba(255,255,255,.06); }

.bl-zeile[hidden] { display:none !important; }

/* Eine Zeile der Blacklist ist eine Karte: links die Kerbe, daneben die
   Nummer als Plakette, dann Name und Grund. Beim Überfahren hebt sie
   sich an, die Kerbe wächst, und ein feiner Lichtstreif läuft einmal
   darüber. */
.bl-zeile {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:16px;
  padding:15px 18px 15px 22px; margin-bottom:9px;
  border:1px solid rgba(var(--blut-rgb), .16);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--blut-rgb), .05), rgba(14,10,14,.85) 55%);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease,
             box-shadow .22s ease, background .22s ease;
}
/* Die Kerbe am linken Rand */
.bl-zeile::before {
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, var(--blood), rgba(var(--blut-rgb), .35));
  transition:width .22s ease, top .22s ease, bottom .22s ease, filter .22s ease;
}
/* Der Lichtstreif, der beim Überfahren einmal durchläuft */
.bl-zeile::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 42%,
             rgba(var(--blut-rgb), .14) 50%, transparent 58%);
  transform:translateX(-100%);
  transition:transform .8s ease;
}
.bl-zeile:hover::after { transform:translateX(100%); }
.bl-zeile:hover {
  transform:translateY(-2px);
  border-color:rgba(var(--blut-rgb), .4);
  box-shadow:0 14px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--blut-rgb), .12) inset;
}
.bl-zeile:hover::before { width:5px; top:6px; bottom:6px; filter:brightness(1.25); }

/* Wird die Zeile gerade beschrieben, wechselt sie ins Gold */
.bl-zeile.bearbeiten {
  border-color:rgba(var(--gold-rgb), .45);
  background:linear-gradient(180deg, rgba(var(--gold-rgb), .08), rgba(14,10,14,.9) 55%);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb), .18) inset;
}
.bl-zeile.bearbeiten::before {
  width:5px; top:6px; bottom:6px;
  background:linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb), .35));
}
.bl-zeile.bearbeiten::after { content:none; }

/* Die Nummer als Plakette */
.bl-nummer {
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  min-width:62px; padding:7px 10px; border-radius:9px;
  border:1px solid rgba(var(--blut-rgb), .3);
  background:rgba(var(--blut-rgb), .1);
  font-family:ui-monospace,Consolas,monospace; font-size:14px; font-weight:700;
  letter-spacing:.03em; color:var(--blood-soft);
  font-variant-numeric:tabular-nums;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.bl-zeile:hover .bl-nummer {
  background:rgba(var(--blut-rgb), .22); border-color:rgba(var(--blut-rgb), .5);
  color:#fff;
}

.bl-mitte { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.bl-name {
  font-size:15.5px; font-weight:700; letter-spacing:.05em;
  color:rgb(var(--hell-rgb)); word-break:break-word; line-height:1.3;
}
.bl-grund {
  font-size:13px; line-height:1.6; color:rgba(var(--hell-rgb), .55);
  white-space:pre-wrap;
}

/* Die Werkzeuge sitzen in einer Gruppe und schieben sich herein */
.bl-knoepfe {
  flex-shrink:0; display:flex; gap:3px; align-items:center;
  padding:3px; border-radius:10px;
  border:1px solid rgba(255,255,255,.05); background:rgba(0,0,0,.25);
}
@media (hover: hover) {
  .bl-zeile .bl-knoepfe {
    opacity:0; transform:translateX(8px);
    transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
  }
  .bl-zeile:hover .bl-knoepfe,
  .bl-zeile:focus-within .bl-knoepfe { opacity:1; transform:none; }
}
.bl-pfeil {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:0; border-radius:7px;
  background:transparent; color:rgba(var(--hell-rgb), .35);
  font-size:11px; font-family:inherit; line-height:1;
  cursor:pointer; text-decoration:none;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.bl-pfeil:hover {
  color:rgb(var(--hell-rgb)); background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.bl-pfeil:disabled { opacity:.2; cursor:default; }
.bl-pfeil:disabled:hover { color:rgba(var(--hell-rgb), .35); background:transparent; transform:none; }
.bl-weg:hover { color:#fff; background:rgba(var(--blut-rgb), .55); }

.bl-form { display:grid; grid-template-columns:120px 1fr 1fr; gap:12px; }

@media (max-width:700px) {
  .bl-form { grid-template-columns:1fr; }
  .bl-zeile { flex-wrap:wrap; gap:10px; }
  .bl-knoepfe { width:100%; justify-content:flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-zeile, .bl-zeile::before, .bl-zeile::after,
  .bl-knoepfe, .bl-pfeil { transition:none; }
  .bl-zeile:hover { transform:none; }
  .bl-zeile:hover::after { transform:translateX(-100%); }
}


/* ── Anlagen ────────────────────────────────────────────────────── */
.anlagezeile { display:flex; align-items:stretch; gap:6px; margin-bottom:8px; }
.anlagelink {
  flex:1; min-width:0; display:block; text-decoration:none;
  border:1px solid var(--line); background:rgba(22,16,18,.5); border-radius:9px;
  padding:10px 12px; transition:border-color .2s, background .2s, transform .2s;
}
.anlagelink:hover {
  border-color:rgba(var(--gold-rgb),.45); background:rgba(22,16,18,.85); transform:translateY(-2px);
}
.anlageart {
  display:inline-block; border:1px solid rgba(var(--gold-rgb),.35); background:rgba(var(--gold-rgb),.1);
  border-radius:4px; padding:1px 6px; font-family:ui-monospace,Consolas,monospace;
  font-size:9px; letter-spacing:.08em; color:var(--gold);
}
.anlagename {
  display:block; margin-top:6px; font-size:13px; color:#e4e4e7;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.anlagelink:hover .anlagename { color:var(--gold-soft, #e3c176); }
.anlagelink .mono { display:block; margin-top:3px; }
.anlageweg {
  border:1px solid var(--line); background:transparent; border-radius:9px;
  padding:0 10px; color:#52525b; font-size:12px; font-family:inherit; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.anlageweg:hover { color:var(--blood-soft); border-color:rgba(224,71,95,.4); }

/* ── Herkunft einer Akte (wer, wann) ────────────────────────────── */
.herkunft {
  margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07);
  font-size:12px; line-height:1.8; color:#71717a;
}
.herkunft strong { color:#a1a1aa; font-weight:500; }

/* ── Meldungen ──────────────────────────────────────────────────── */
.meldung {
  margin-top:20px; border:1px solid; border-radius:9px; padding:12px 16px; font-size:14px;
}
.meldung.ok { border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.1); color:#6ee7b7; }
.meldung.fehler { border-color:rgba(224,71,95,.45); background:rgba(var(--blut-rgb),.15); color:var(--blood-soft); }

/* ── Fotogalerie mit Löschknopf ─────────────────────────────────── */
.galleriebild { position:relative; }
.galleriebild a { display:block; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.galleriebild img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .4s; }
.galleriebild:hover img { transform:scale(1.05); }
.galleriebild form { position:absolute; top:6px; right:6px; opacity:0; transition:opacity .2s; }
.galleriebild:hover form { opacity:1; }
.bildweg {
  border:0; border-radius:5px; padding:3px 7px; cursor:pointer;
  background:rgba(0,0,0,.75); color:#fca5a5; font-size:11px; font-family:inherit;
}
.bildweg:hover { background:#000; }

/* ── Terminkalender ─────────────────────────────────────────────── */
/* Sieben Tage nebeneinander, je Tag sechs Stundenzeilen von 20 bis 2 Uhr.
   Auf schmalen Schirmen wird das Raster waagerecht scrollbar. */
.kalender-hueller { overflow-x:auto; }
.kalender { display:grid; min-width:940px; }

.kal-ecke { border-bottom:1px solid var(--line); }
.kal-kopf {
  display:flex; flex-direction:column; gap:2px; align-items:center;
  padding:12px 8px; border-left:1px solid var(--line); border-bottom:1px solid var(--line);
}
.kal-kopf.heute { background:rgba(90,169,230,.09); }
.kal-wochentag { font-size:13px; font-weight:600; color:#e4e4e7; letter-spacing:.1em; }
.kal-datum { font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#71717a; }
.kal-heute {
  border:1px solid rgba(90,169,230,.5); border-radius:4px; padding:0 5px;
  font-size:9px; letter-spacing:.1em; color:#5aa9e6; text-transform:uppercase;
}

.kal-zeit {
  display:flex; justify-content:flex-end; padding:8px 8px 0 0;
  font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#52525b;
  border-bottom:1px solid var(--line);
}
.kal-zelle {
  position:relative; min-height:64px; padding:6px;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
}
.kal-zelle.heute { background:rgba(90,169,230,.05); }

.kal-termin {
  display:block; margin-bottom:4px; padding:5px 7px; text-decoration:none;
  border:1px solid var(--c); border-left:3px solid var(--c);
  background:var(--cb); border-radius:6px; transition:transform .2s, filter .2s;
}
.kal-termin:hover { transform:translateY(-1px); filter:brightness(1.25); }
.kal-uhr {
  display:block; font-family:ui-monospace,Consolas,monospace;
  font-size:10px; letter-spacing:.06em; color:var(--c);
}
.kal-titel {
  display:block; margin-top:1px; font-size:12px; line-height:1.35; color:#e4e4e7;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kal-fuer {
  display:block; margin-top:2px; font-size:10px; line-height:1.3; color:#71717a;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kal-termin.meiner { box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45); }
.kal-termin.meiner .kal-fuer { color:var(--gold); }

.kal-plus {
  position:absolute; right:5px; bottom:4px; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:5px;
  color:#3f3f46; font-size:13px; text-decoration:none; opacity:0;
  transition:opacity .2s, color .2s, border-color .2s;
}
.kal-zelle:hover .kal-plus { opacity:1; }
.kal-plus:hover { color:#5aa9e6; border-color:rgba(90,169,230,.5); }

/* Terminliste unter dem Raster */
.termin {
  border:1px solid var(--line); border-left:3px solid var(--c);
  background:rgba(22,16,18,.5); border-radius:9px; padding:14px 16px; margin-bottom:8px;
}
.termin.bearbeiten { border-color:rgba(var(--gold-rgb),.45); background:rgba(var(--gold-rgb),.06); }
.termin-kopf { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.termin-uhr {
  border:1px solid var(--c); border-radius:7px; padding:5px 9px;
  font-family:ui-monospace,Consolas,monospace; font-size:13px; color:var(--c);
}
.termin-titel { font-size:14px; font-weight:500; color:#f4f4f5; }
.termin-text {
  margin-top:10px; font-size:13px; line-height:1.6; color:#a1a1aa; white-space:pre-wrap;
}
.termin-fuer { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; }
.termin-fuer .label { color:#52525b; }

/* Ankreuzfelder „Für wen gilt der Termin?"
   Das echte Kästchen liegt unsichtbar hinter der Pille; angezeigt wird der
   Zustand über den Geschwister-Selektor — das greift in jedem Browser. */
.fuerwen { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.fuerwen-wahl { display:inline-flex; position:relative; cursor:pointer; }
.fuerwen-wahl input {
  position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none;
}
.fuerwen-name {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:7px; padding:6px 11px;
  background:rgba(22,16,18,.5); font-size:12px; color:#a1a1aa; white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s;
}
.fuerwen-name::before {
  content:''; width:12px; height:12px; flex:none; border-radius:3px;
  border:1px solid rgba(255,255,255,.25); background:transparent;
  transition:background .2s, border-color .2s;
}
.fuerwen-wahl:hover .fuerwen-name { border-color:rgba(var(--gold-rgb),.35); color:#e4e4e7; }
.fuerwen-wahl input:checked + .fuerwen-name {
  border-color:rgba(var(--gold-rgb),.55); background:rgba(var(--gold-rgb),.1); color:var(--gold);
}
.fuerwen-wahl input:checked + .fuerwen-name::before {
  border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 2px #161012;
}
.fuerwen-wahl input:focus-visible + .fuerwen-name {
  outline:2px solid rgba(var(--gold-rgb),.6); outline-offset:2px;
}
/* Teams über der Mitgliederliste */
.teamleiste {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.02);
}
.team {
  display:inline-flex; align-items:stretch;
  border:1px solid rgba(90,169,230,.45); border-radius:7px; overflow:hidden;
  background:rgba(90,169,230,.1);
}
.teamName {
  border:0; background:none; cursor:pointer; font-family:inherit;
  padding:5px 10px; font-size:12px; color:#8ec5f0; transition:background .2s;
}
.teamName:hover { background:rgba(90,169,230,.2); }
.teamWeg {
  border:0; border-left:1px solid rgba(90,169,230,.35); background:none; cursor:pointer;
  padding:5px 8px; font-family:inherit; font-size:11px; color:#52525b; transition:color .2s, background .2s;
}
.teamWeg:hover { color:var(--blood-soft); background:rgba(var(--blut-rgb),.18); }
.teamLeer { font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#52525b; }
.teamNeuKnopf {
  margin-left:auto; border:1px dashed var(--line); border-radius:7px;
  background:none; cursor:pointer; font-family:inherit;
  padding:5px 11px; font-size:12px; color:#71717a; transition:color .2s, border-color .2s;
}
.teamNeuKnopf:hover { color:var(--gold); border-color:rgba(var(--gold-rgb),.45); }

.teamNeu {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px; margin-bottom:10px;
  border:1px solid rgba(var(--gold-rgb),.35); border-radius:9px; background:rgba(var(--gold-rgb),.06);
}
.teamNeu .input { flex:1; min-width:220px; }
.teamNeu .btn { padding:7px 14px; font-size:13px; }
.teamHinweis { flex-basis:100%; margin:0; }
.teamHinweis.fehler { color:var(--blood-soft); }

/* Übertragen in eine andere Rubrik */
.uebertragen { border-color:rgba(90,169,230,.35); background:rgba(90,169,230,.06); }
.uebertragen select.input { min-width:260px; }
.uebertragen-tipp {
  flex-basis:100%; margin:0; font-size:11px; line-height:1.6; color:#52525b;
}

/* „Alle auswählen“ — steht abgesetzt über der Namensliste */
.fuerwen-alle .fuerwen-name {
  border-style:dashed; color:#71717a;
}
.fuerwen-alle input:checked + .fuerwen-name {
  border-style:solid; border-color:rgba(var(--gold-rgb),.55);
  background:rgba(var(--gold-rgb),.1); color:var(--gold);
}

/* Feste Zuweisung an einen selbst — nichts zum Anklicken */
.fuerwen-fest {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(var(--gold-rgb),.55); border-radius:7px; padding:6px 11px;
  background:rgba(var(--gold-rgb),.1); font-size:12px; color:var(--gold); white-space:nowrap;
}

.termin-fuss {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
}
.statusknopf {
  border:1px solid var(--c); border-radius:6px; padding:4px 10px;
  background:transparent; color:var(--c); font-family:inherit; font-size:11px;
  cursor:pointer; transition:background .2s;
}
.statusknopf:hover { background:var(--cb); }

.termin-form { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px 24px; }
/* Der kleine Satz unter dem Uhrzeitfeld */
.termin-hinweis { margin-top:6px; font-size:11px; line-height:1.45; color:rgba(var(--hell-rgb), .42); }
/* Stehen mehrere Termine in derselben Stunde, rücken sie zusammen */
.kal-zelle .kal-termin + .kal-termin { margin-top:4px; }
@media (max-width:700px) {
  .termin-form { grid-template-columns:1fr; }
  .termin-kopf { gap:8px; }
}

/* ── Rückblick: die Leiste am Fuß der Terminseite ─────────────────
   Zugeklappt eine ruhige Zeile, aufgeklappt eine schmale Liste dessen,
   was in den letzten Monaten anstand. Die Einträge sind hier nur zum
   Nachsehen — bearbeitet wird oben, im laufenden Fenster. */

.rueckblick { margin-bottom:8px; }
.rueckblick > summary { padding:14px 20px; }
.rueckblick > summary .sec-title::before { content:'⏳ '; }
.rueckblick[open] { border-color:rgba(214,148,102,.3); }

/* Der Inhalt schiebt sich beim Aufklappen einmal herein */
@keyframes rueckAuf {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:none; }
}
.rueckblick[open] .ausklapp-inhalt {
  animation:rueckAuf .28s cubic-bezier(.2,.7,.3,1) both;
  padding-bottom:14px;
}

.rueck-monat {
  margin:16px 0 8px; color:#8a7a55;
  display:flex; align-items:center; gap:10px;
}
.rueck-monat::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.rueck-monat:first-child { margin-top:2px; }

/* Eine Zeile je Termin: links Tag und Uhrzeit, in der Mitte worum es
   ging, rechts der Ausgang. Der Farbstreif links zeigt den Status. */
.rueck-zeile {
  position:relative; display:flex; align-items:flex-start; gap:14px;
  padding:9px 12px 9px 15px; margin-bottom:5px;
  border:1px solid var(--line); border-radius:9px;
  background:rgba(255,255,255,.015);
  transition:border-color .2s, background .2s, transform .2s;
}
.rueck-zeile::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  border-radius:0 2px 2px 0; background:var(--c);
  opacity:.65; transition:opacity .2s, top .2s, bottom .2s;
}
.rueck-zeile:hover {
  transform:translateX(2px);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.rueck-zeile:hover::before { opacity:1; top:4px; bottom:4px; }
.rueck-zeile.meiner { box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.28); }

.rueck-wann {
  flex:none; display:flex; flex-direction:column; gap:2px; min-width:76px;
  font-family:ui-monospace,Consolas,monospace;
}
.rueck-tag { font-size:12px; color:#a1a1aa; }
.rueck-uhr { font-size:11px; color:#71717a; }

.rueck-mitte { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.rueck-titel { font-size:13.5px; color:#e4e4e7; word-break:break-word; }
.rueck-unter { font-size:11px; color:#71717a; word-break:break-word; }
.rueck-text {
  font-size:11.5px; color:#877a60; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
}
.rueck-zeile .badge { flex:none; align-self:center; }

@media (max-width:700px) {
  .rueck-zeile { flex-wrap:wrap; gap:8px; }
  .rueck-wann { flex-direction:row; gap:8px; align-items:baseline; }
  .rueck-zeile .badge { align-self:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .rueckblick[open] .ausklapp-inhalt { animation:none; }
  .rueck-zeile:hover { transform:none; }
}

/* Bilder an einem Chronikeintrag — kleiner und querformatig als das
   Bildmaterial der Akte. Steht bewusst nach .gallery und .galleriebild. */
.gallery-eintrag { grid-template-columns:repeat(3,1fr); margin-top:10px; }
.gallery-eintrag img, .gallery-eintrag .galleriebild img { aspect-ratio:4/3; }
@media (max-width:700px) { .gallery-eintrag { grid-template-columns:1fr 1fr; } }

@media (max-width:700px) {
  .zwei { grid-template-columns:1fr; }
  .suchzeile { flex-direction:column; }
  .eigenzeile { flex-wrap:wrap; }
  .eigenzeile .input:first-child { max-width:none; }
}

@media (max-width:900px) {
  .cards, .types, .detail { grid-template-columns:1fr; }
  dl { grid-template-columns:1fr; }
  .brand-1 { font-size:20px; } .brand-2 { font-size:16px; }
  .logo img { height:56px; max-width:118px; }
}

/* Auf schmalen Bildschirmen rücken die Reiter enger zusammen und
   brechen bei Bedarf in mehrere Zeilen um. */
@media (max-width:1050px) {
  .navzeile { gap:24px; }
  .navlink { font-size:18px; letter-spacing:.1em; }
}
/* Auf dem Handy klebt die Kopfzeile oben — sie darf nicht zu viel
   vom Bildschirm wegnehmen. */
@media (max-width:620px) {
  .navzeile { gap:16px; }
  .navlink { font-size:14px; letter-spacing:.06em; padding:7px 2px 5px; }
  .hrow { padding:10px 0; gap:12px; }
  .logo { gap:10px; }
  .logo img { height:44px; max-width:92px; }
  .brand-1 { font-size:17px; letter-spacing:.14em; }
  .brand-2 { font-size:14px; letter-spacing:.22em; }
  .brand-sub { display:none; }
  .navname { font-size:9px; }
  .navname strong { font-size:11px; }
  .navbild { width:26px; height:26px; }
  .navbild-ersatz { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── Lagerbuch ──────────────────────────────────────────────────── */
/* Eine Zeile je Tag, eine Spalte je Ware. Damit die Liste breit sein
   darf, ohne die Seite zu sprengen, rollt sie in einem eigenen Rahmen;
   Kopfzeilen und die beiden ersten Spalten bleiben dabei stehen. */

.lager-zeitwahl { display:flex; align-items:center; gap:8px; }
.lager-zeitwahl .input { width:auto; padding:7px 10px; font-size:13px; }

.lager-rahmen {
  margin-top:14px; max-height:72vh; overflow:auto;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(16,11,13,.72);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.lager-rahmen::-webkit-scrollbar { width:10px; height:10px; }
.lager-rahmen::-webkit-scrollbar-thumb { background:rgba(var(--gold-rgb),.35); border-radius:6px; }
.lager-rahmen::-webkit-scrollbar-track { background:rgba(255,255,255,.03); }

table.lager {
  /* Die Breite der stehenden Namensspalte. Der Klebepunkt der
     Kontrolliert-Spalte rechnet sich daraus — so können die beiden
     nicht auseinanderlaufen. */
  --fest-1: 168px;
  --fest-2: 44px;
  border-collapse:separate; border-spacing:0;
  font-size:12px; color:#e4e4e7;
}
table.lager th, table.lager td {
  border-right:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:0; background-clip:padding-box;
}

/* ── Kopf: Blockname, Sollbestand, gedrehte Warennamen ──────────── */
.lager-blockzeile th {
  position:sticky; top:0; z-index:4; height:26px;
  background:#161012; color:#8a7a55;
  font:600 10px/26px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
}
.lager-block { border-left:1px solid rgba(var(--gold-rgb),.35) !important; padding:0 8px !important; }

.lager-sollzeile th {
  position:sticky; top:26px; z-index:4; height:30px;
  background:#1d1518; color:var(--gold);
  font:600 12px/30px ui-monospace,Consolas,monospace;
}
.lager-sollzeile th.zahl { text-align:center; padding:0 1px !important; }
.lager-sollzeile th.zahl input {
  width:100%; height:24px; border:1px dashed rgba(var(--gold-rgb),.35); border-radius:5px;
  background:rgba(var(--gold-rgb),.08); color:var(--gold); text-align:center;
  font:600 12px/22px ui-monospace,Consolas,monospace;
  -moz-appearance:textfield;
}
.lager-sollzeile th.zahl input::-webkit-outer-spin-button,
.lager-sollzeile th.zahl input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.lager-sollzeile th.zahl input::placeholder { color:#6b5e3f; }
.lager-sollzeile th.zahl input:hover { border-color:rgba(var(--gold-rgb),.6); }
.lager-sollzeile th.zahl input:focus {
  outline:none; border-style:solid; border-color:var(--gold);
  background:rgba(var(--gold-rgb),.18);
}
.lager-sollzeile th.fest-1 {
  color:#8a7a55; font:600 10px/30px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; text-align:left; padding-left:12px !important;
}
.lager-sollhinweis {
  margin-left:6px; padding:1px 5px; border-radius:4px;
  background:rgba(var(--gold-rgb),.14); color:var(--gold);
  font-size:9px; letter-spacing:.08em;
}

.lager-kopfzeile th {
  position:sticky; top:56px; z-index:4; height:150px;
  background:#161012; vertical-align:bottom;
}
/* Hochkant: der Name wird um 90 Grad gekippt und von unten nach oben
   gelesen. Anders als schräg gestellte Schrift bleibt er dabei scharf
   und in voller Größe lesbar. */
.lager-kopfzeile th.dreh { padding:0 0 10px 0 !important; }
.lager-kopfzeile th.dreh > span {
  display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap; text-align:left; letter-spacing:.02em;
  font:600 12px/1 ui-sans-serif,system-ui,sans-serif; color:#e4e4e7;
}
.lager-kopfzeile th.fest-1 {
  vertical-align:bottom; padding:0 0 10px 12px !important; text-align:left;
  font:700 13px/1 ui-sans-serif,system-ui,sans-serif; color:var(--gold);
  letter-spacing:.04em;
}
.lager-kopfzeile th.fest-2 > span { color:#a1a1aa; }
.lager-info-kopf {
  padding:0 10px !important; text-align:left; vertical-align:bottom;
  font:700 12px/1 ui-sans-serif,system-ui,sans-serif; color:var(--gold);
}
.lager-sollzeile .lager-info-kopf {
  color:#8a7a55; font:600 10px/26px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
}
.lager-datum-kopf {
  padding:0 10px !important; text-align:left; vertical-align:bottom;
  font:700 12px/1 ui-sans-serif,system-ui,sans-serif; color:var(--gold);
}

/* ── Stehende Spalten links ─────────────────────────────────────── */
table.lager .fest { position:sticky; z-index:2; background:#120d0f; }
/* width allein ist im Tabellensatz nur ein Vorschlag — erst min und max
   zusammen halten die Spalte wirklich auf ihrer Breite. Nur dann stimmt
   auch der Klebepunkt der Spalte daneben. */
table.lager .fest-1 {
  left:0;
  width:var(--fest-1); min-width:var(--fest-1); max-width:var(--fest-1);
}
table.lager .fest-2 {
  left:var(--fest-1);
  width:var(--fest-2); min-width:var(--fest-2); max-width:var(--fest-2);
  border-right:1px solid rgba(var(--gold-rgb),.35);
}
/* Was in der Namensspalte steht, darf sie nicht auseinanderdrücken. */
table.lager .fest-1 > * { max-width:100%; box-sizing:border-box; }
/* Die stehenden Spalten im Kopf müssen über den Warenköpfen liegen —
   sonst schieben sich Munition, Medkit und die übrigen beim Rollen nach
   links über „Name" und „Kontrolliert".

   Der Selektor beginnt bewusst mit table.lager: Sonst wäre er schwächer
   als die Grundregel table.lager .fest weiter oben, und die setzt die
   Stufe auf 2. Genau daran lag der Fehler. */
table.lager .lager-blockzeile .fest,
table.lager .lager-sollzeile .fest,
table.lager .lager-kopfzeile .fest { z-index:6; }

/* ── Zeilen ─────────────────────────────────────────────────────── */
.lager-zeile:hover td { background-color:rgba(var(--gold-rgb),.05); }
.lager-zeile:hover .fest { background-color:#1a1214; }
.lager-zeile.hat-fehlmenge .fest-1 { box-shadow:inset 3px 0 0 var(--blood-soft); }

.lager-name {
  width:100%; height:30px; padding:0 8px; border:0; border-radius:6px;
  background:rgba(120,120,220,.16); color:#dcdcf5;
  font:600 12px/30px ui-sans-serif,system-ui,sans-serif;
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
.lager-name:focus { outline:1px solid var(--gold); }
.lager-name option { background:#161012; color:#e4e4e7; }
table.lager td.fest-1 { padding:4px 8px !important; }
table.lager td.mitte { text-align:center; }
table.lager td.mitte input[type=checkbox] { accent-color:var(--gold); cursor:pointer; }

.zelle { width:52px; min-width:52px; }
.zelle input {
  width:100%; height:28px; border:0; background:transparent; color:inherit;
  text-align:center; font:600 12px/28px ui-monospace,Consolas,monospace;
  -moz-appearance:textfield;
}
.zelle input::-webkit-outer-spin-button,
.zelle input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.zelle input:focus { outline:1px solid var(--gold); background:rgba(var(--gold-rgb),.10); }

.z-gut     { background:rgba(60,180,110,.22); }
.z-gut input { color:#8fe0a8; }
.z-knapp   { background:rgba(224,71,95,.24); }
.z-knapp input { color:#ffb3bd; }
.z-neutral { background:rgba(255,255,255,.03); }
.z-offen   { background:transparent; }
.z-offen input { color:#71717a; }

.lager-luecke { width:14px; min-width:14px; background:rgba(255,255,255,.02); }

.lager-info { min-width:200px; }
.lager-info input {
  width:100%; height:28px; padding:0 8px; border:0; background:transparent;
  color:#d4d4d8; font:400 12px/28px ui-sans-serif,system-ui,sans-serif;
}
.lager-info input:focus { outline:1px solid var(--gold); background:rgba(var(--gold-rgb),.08); }

.lager-datum { min-width:172px; white-space:nowrap; padding:0 8px !important; }
.lager-datum input {
  height:28px; padding:0 6px; border:0; border-radius:6px;
  background:rgba(255,255,255,.05); color:#e4e4e7;
  font:600 12px/28px ui-monospace,Consolas,monospace;
}
.lager-datum input:focus { outline:1px solid var(--gold); }
.lager-weg {
  margin-left:6px; width:24px; height:24px; padding:0; border-radius:6px;
  border:1px solid rgba(224,71,95,.35); background:transparent;
  color:#e0475f; font-size:12px; line-height:1; cursor:pointer;
  transition:background .2s, color .2s;
}
.lager-weg:hover { background:rgba(224,71,95,.2); color:#ffb3bd; }

/* Die noch leere Zeile am Fuß hebt sich ab */
.lager-neu td { background-color:rgba(var(--gold-rgb),.06); }
.lager-neu .fest { background-color:#1a1512; }
.lager-neu .lager-datum input { background:rgba(var(--gold-rgb),.18); color:var(--gold); }

.lager-leer {
  padding:26px !important; text-align:center; color:#71717a;
  font:400 13px/1.5 ui-sans-serif,system-ui,sans-serif;
}

.lager-fuss {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px;
}

@media (max-width:820px) {
  .lager-rahmen { max-height:66vh; }
  table.lager { --fest-1: 130px; }
  .lager-fuss { flex-direction:column; align-items:stretch; }
  .lager-fuss .btn { width:100%; }
}

/* ── Bereichswahl ───────────────────────────────────────────────── */
/* Die erste Seite nach dem Anmelden: zwei Wappen nebeneinander,
   dazwischen wird entschieden, welchen Teil des Hauses man betritt. */

body.wahlseite { padding-bottom: 0; display: flex; align-items: center; justify-content: center; }

.wahl-rahmen {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 40px 20px 48px;
  text-align: center;
}

.wahl-kopf { margin-bottom: 28px; }
.wahl-kopf h1 {
  margin-top: 6px; font-size: 30px; letter-spacing: .02em;
  text-shadow: 0 0 16px rgba(var(--gold-rgb),.2);
}
.wahl-kopf .muted { margin: 10px auto 0; max-width: 560px; line-height: 1.6; }

.wahl-gitter {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: stretch;
}

.wahl-karte {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 18px 20px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(29,21,24,.85), rgba(16,11,13,.9));
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  animation: auftauchen .5s both; animation-delay: var(--d, 0ms);
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; } }

.wahl-karte::before {
  content: ''; position: absolute; inset: -40% -20% auto -20%; height: 70%;
  background: radial-gradient(closest-side, rgba(var(--gold-rgb),.20), transparent 70%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.wahl-karte:hover {
  transform: translateY(-6px); border-color: rgba(var(--gold-rgb),.55);
  box-shadow: 0 28px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--gold-rgb),.18) inset;
}
.wahl-karte:hover::before { opacity: 1; }
.wahl-redcycle:hover { border-color: rgba(var(--blut-rgb),.6); }
.wahl-redcycle::before { background: radial-gradient(closest-side, rgba(var(--blut-rgb),.24), transparent 70%); }

.wahl-wappen {
  display: flex; align-items: center; justify-content: center;
  width: 150px; height: 150px; max-width: 40vw; max-height: 40vw; margin-bottom: 14px;
  border-radius: 50%; position: relative;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.55));
  transition: transform .35s;
}
.wahl-karte:hover .wahl-wappen { transform: scale(1.04) rotate(-2deg); }
.wahl-wappen img { width: 100%; height: 100%; object-fit: contain; }

/* Das Spiral-Wappen lässt rundherum mehr Luft als die beiden Siegel —
   damit alle drei gleich groß wirken, wird es etwas größer gezogen. */
.wahl-hotel .wahl-wappen img { transform: scale(1.22); }
.logo img[src*="logo-spiral"],
.welt-knopf img[src*="logo-spiral"] { transform: scale(1.2); }

/* Fehlt eine Wappendatei, springt ein Buchstabe ein, damit die Wahl
   trotzdem benutzbar bleibt. */
.wahl-ersatz { display: none; }
.wahl-wappen.ohne-bild {
  border: 2px solid rgba(var(--gold-rgb),.5);
  background: radial-gradient(circle at 50% 35%, rgba(var(--blut-rgb),.35), rgba(16,11,13,.9));
}
.wahl-wappen.ohne-bild .wahl-ersatz {
  display: block; font: 700 84px/1 ui-serif, Georgia, serif; color: var(--gold);
}

.wahl-zeile {
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; color: #8a7a55;
  letter-spacing: .22em; text-transform: uppercase;
}
.wahl-name {
  margin-top: 7px; font: 700 21px/1.15 ui-serif, Georgia, serif; color: var(--gold);
  letter-spacing: .03em;
}
.wahl-unter {
  margin-top: 5px; margin-bottom: 16px;
  font: 600 11px/1.4 ui-sans-serif, system-ui, sans-serif; color: #d4d4d8;
  letter-spacing: .05em;
}
.wahl-text {
  margin-top: 12px; max-width: 300px;
  font: 400 13px/1.6 ui-sans-serif, system-ui, sans-serif; color: #a1a1aa;
}
.wahl-knopf {
  /* schiebt sich nach unten, damit alle Knöpfe auf einer Höhe stehen,
     auch wenn eine Karte weniger Text trägt */
  margin-top: auto; padding: 8px 18px; border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.10);
  font: 600 13px/1 ui-sans-serif, system-ui, sans-serif; color: var(--gold);
  letter-spacing: .04em; transition: background .25s, border-color .25s;
}
.wahl-karte:hover .wahl-knopf { background: rgba(var(--gold-rgb),.22); border-color: var(--gold); }

.wahl-fuss { margin-top: 34px; }

/* Der Wechselknopf im Seitenkopf */
.welt-knopf { display: inline-flex; align-items: center; gap: 7px; }
.welt-knopf img { width: 20px; height: 20px; object-fit: contain; border-radius: 50%; }

/* Bis hinunter zum Handy bleiben die drei nebeneinander, nur kleiner */
@media (max-width: 860px) {
  .wahl-gitter { gap: 12px; }
  .wahl-karte { padding: 16px 10px 14px; }
  .wahl-wappen { width: 110px; height: 110px; margin-bottom: 10px; }
  .wahl-name { font-size: 17px; }
  .wahl-zeile, .wahl-unter { font-size: 9px; letter-spacing: .08em; }
  .wahl-knopf { padding: 7px 12px; font-size: 12px; }
}
@media (max-width: 560px) {
  .wahl-rahmen { padding: 24px 10px 32px; }
  .wahl-kopf h1 { font-size: 22px; }
  .wahl-gitter { gap: 8px; }
  .wahl-karte { padding: 12px 6px 12px; border-radius: 12px; }
  .wahl-wappen { width: 78px; height: 78px; }
  .wahl-name { font-size: 14px; }
  .wahl-unter { display: none; }
  .wahl-knopf { padding: 6px 8px; font-size: 11px; }
  .wahl-knopf span { display: none; }
}

/* ── Spiral Hotel ───────────────────────────────────────────────── */
/* Eigener Bereich, eigene Bausteine: Tabellen zum Durchtippen, die
   fünf Apartments, der Monatskalender und das Kontobuch. */

.hotel-block {
  margin-top: 18px; padding: 16px 18px 6px;
  border-left: 3px solid var(--ton, var(--gold));
}
.hotel-blocktitel {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 10px; color: var(--ton, var(--gold));
}
.hotel-blocktitel .mono { color: #71717a; font-size: 12px; }

.hotel-tabelle-rahmen { overflow-x: auto; padding-bottom: 6px; }
.hotel-tabelle {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
}
.hotel-tabelle th {
  padding: 6px 8px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif; color: #8a7a55;
  letter-spacing: .12em; text-transform: uppercase;
}
.hotel-tabelle td {
  padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
.hotel-tabelle tr:last-child td { border-bottom: 0; }
.hotel-tabelle tbody tr:hover td { background: rgba(var(--gold-rgb),.05); }
.hotel-tabelle td.mitte { text-align: center; }
.hotel-tabelle td.rechts, .hotel-tabelle th.rechts { text-align: right; }
.hotel-tabelle td.stark { font-weight: 600; }

.hotel-tabelle input:not([type=checkbox]),
.hotel-tabelle select {
  width: 100%; height: 30px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: rgba(255,255,255,.04); color: #e4e4e7;
  font: 400 13px/28px ui-sans-serif, system-ui, sans-serif;
}
.hotel-tabelle input.zahl {
  text-align: right; font-family: ui-monospace, Consolas, monospace;
  -moz-appearance: textfield;
}
.hotel-tabelle input.zahl::-webkit-outer-spin-button,
.hotel-tabelle input.zahl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hotel-tabelle input:focus, .hotel-tabelle select:focus {
  outline: none; border-color: var(--gold); background: rgba(var(--gold-rgb),.10);
}
.hotel-tabelle select option { background: #161012; color: #e4e4e7; }

.hotel-wahl { cursor: pointer; }
.hotel-name { font-weight: 600; color: #e4e4e7; margin-right: 6px; }

.hotel-tabelle tr.ist-knapp input.zahl { color: #ffb3bd; background: rgba(224,71,95,.18); }
.hotel-tabelle tr.hotel-neu td { background: rgba(var(--gold-rgb),.06); }
.hotel-tabelle tr.hotel-neu input::placeholder { color: #8a7a55; }
.hotel-leer { padding: 22px !important; text-align: center; color: #71717a; }

.hotel-weg {
  width: 26px; height: 26px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(224,71,95,.35); background: transparent;
  color: #e0475f; font-size: 12px; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s;
}
.hotel-weg:hover { background: rgba(224,71,95,.2); color: #ffb3bd; }

.hotel-summen td { padding: 8px; }
tr.hotel-summe td {
  border-top: 1px solid rgba(var(--gold-rgb),.35); border-bottom: 0;
  padding-top: 12px; color: var(--gold); font-weight: 600;
}
tr.hotel-ohne td { color: #71717a; }
.ist-minus { color: #e0475f !important; }

/* Formulare im Hotel — drei Spalten, auf dem Handy eine */
.hotel-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
@media (max-width: 820px) { .hotel-form { grid-template-columns: 1fr; } }

/* ── Die fünf Apartments ────────────────────────────────────────── */
.hotel-etagen {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px;
}
.hotel-etage {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  text-decoration: none; color: inherit;
  border-left: 3px solid var(--ton, var(--gold));
  animation: auftauchen .45s both; animation-delay: var(--d, 0ms);
  transition: transform .2s, border-color .2s, background .2s;
}
.hotel-etage:hover { transform: translateY(-3px); background: rgba(var(--gold-rgb),.06); }
.hotel-etage.gewaehlt { background: rgba(var(--gold-rgb),.10); box-shadow: 0 0 0 1px rgba(var(--gold-rgb),.3) inset; }
.hotel-etage-nr {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ton) 18%, transparent);
  border: 1px solid var(--ton);
  font: 700 18px/1 ui-serif, Georgia, serif; color: var(--ton);
}
.hotel-etage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hotel-etage-name {
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; color: #8a7a55;
  letter-spacing: .14em; text-transform: uppercase;
}
.hotel-etage-gast {
  font: 600 14px/1.2 ui-sans-serif, system-ui, sans-serif; color: #e4e4e7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hotel-etage-zeit { font: 400 11px/1 ui-monospace, Consolas, monospace; color: #71717a; }
.hotel-etage-frei { font: 600 14px/1.2 ui-sans-serif, system-ui, sans-serif; color: #7ec48b; }
.hotel-etage.belegt .hotel-etage-nr { box-shadow: 0 0 14px color-mix(in srgb, var(--ton) 40%, transparent); }

.hotel-etage-marke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--ton) 18%, transparent);
  border: 1px solid var(--ton); color: var(--ton);
  font: 700 12px/1 ui-serif, Georgia, serif;
}
.hotel-gastdaten {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px;
  font: 400 13px/1.4 ui-sans-serif, system-ui, sans-serif; color: #d4d4d8;
}
.hotel-gastdaten .label { margin: 0 6px 0 0; }

@media (max-width: 900px) {
  .hotel-etagen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .hotel-etagen { grid-template-columns: 1fr; }
}

/* ── Monatskalender ─────────────────────────────────────────────── */
.hotel-monatswahl { display: flex; align-items: center; gap: 8px; }
.hotel-monat {
  min-width: 150px; text-align: center;
  font: 700 15px/1 ui-serif, Georgia, serif; color: var(--gold);
}
.hotel-kalender {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
}
.hotel-kal-kopf {
  padding: 4px 0 6px; text-align: center;
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; color: #8a7a55;
  letter-spacing: .14em; text-transform: uppercase;
}
.hotel-kal-tag {
  min-height: 96px; padding: 5px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  display: flex; flex-direction: column; gap: 3px;
}
.hotel-kal-tag.ist-leer { border-color: transparent; background: transparent; }
.hotel-kal-tag.ist-heute {
  border-color: rgba(var(--gold-rgb),.55); background: rgba(var(--gold-rgb),.07);
}
.hotel-kal-nr {
  align-self: flex-start; min-width: 22px; padding: 1px 5px; border-radius: 5px;
  text-decoration: none; color: #a1a1aa;
  font: 600 11px/1.5 ui-monospace, Consolas, monospace;
  transition: background .2s, color .2s;
}
.hotel-kal-nr:hover { background: rgba(var(--gold-rgb),.2); color: var(--gold); }
.ist-heute .hotel-kal-nr { color: var(--gold); }
.hotel-kal-event {
  display: block; padding: 3px 6px; border-radius: 5px; text-decoration: none;
  background: color-mix(in srgb, var(--ton) 16%, transparent);
  border-left: 2px solid var(--ton); color: #e4e4e7;
  font: 400 11px/1.35 ui-sans-serif, system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .2s;
}
.hotel-kal-event:hover { background: color-mix(in srgb, var(--ton) 30%, transparent); }
.hotel-kal-zeit { color: var(--ton); font-weight: 600; margin-right: 4px; }

@media (max-width: 720px) {
  .hotel-kal-tag { min-height: 68px; padding: 3px; }
  .hotel-kal-titel { display: none; }
  .hotel-kal-event { text-align: center; padding: 2px; }
  .hotel-kal-zeit { margin: 0; font-size: 10px; }
  .hotel-monat { min-width: 0; font-size: 13px; }
}


/* ── Kontobuch ──────────────────────────────────────────────────── */
.hotel-kasse {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; margin-top: 20px;
}
.hotel-stand {
  padding: 18px 20px; border-left: 3px solid var(--gold);
  background: linear-gradient(120deg, rgba(var(--gold-rgb),.10), transparent 70%);
}
.hotel-stand.ist-minus { border-left-color: var(--blood-soft);
  background: linear-gradient(120deg, rgba(224,71,95,.12), transparent 70%); }
.hotel-stand-label {
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; color: #8a7a55;
  letter-spacing: .16em; text-transform: uppercase;
}
.hotel-stand-zahl {
  margin-top: 8px; font: 700 32px/1.1 ui-monospace, Consolas, monospace; color: var(--gold);
  text-shadow: 0 0 15px rgba(var(--gold-rgb),.2);
}
.hotel-stand.ist-minus .hotel-stand-zahl { color: #e0475f; text-shadow: 0 0 15px rgba(224,71,95,.24); }
.hotel-stand-fuss { margin-top: 6px; font: 400 12px/1 ui-monospace, Consolas, monospace; color: #71717a; }

.hotel-startform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hotel-startform .input { width: 160px; font-family: ui-monospace, Consolas, monospace; }

.hotel-kontobuch td { padding: 6px 8px; }

@media (max-width: 820px) {
  .hotel-kasse { grid-template-columns: 1fr; }
  .hotel-stand-zahl { font-size: 26px; }
}

/* ── Hausordnung ────────────────────────────────────────────────── */
/* Sieben Regeln als Tafeln untereinander, jede mit ihrer Zahl im
   Siegelrot des Hauses. */

.regelwerk { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }

.regel {
  display: block; padding: 24px 26px;
  border-left: 3px solid var(--blood);
  animation: auftauchen .5s both; animation-delay: var(--d, 0ms);
  transition: border-color .25s, background .25s;
}
.regel:hover { border-left-color: var(--gold); background: rgba(var(--gold-rgb),.04); }

.regel-inhalt { min-width: 0; }
.regel-titel {
  margin: 0 0 10px; font: 700 17px/1.35 ui-serif, Georgia, serif;
  color: var(--gold); letter-spacing: .01em;
}
.regel-satz {
  margin: 0 0 6px; font: 400 14px/1.65 ui-sans-serif, system-ui, sans-serif;
  color: #d4d4d8;
}
.regel-satz:last-child { margin-bottom: 0; }

.regel-liste { margin: 8px 0 6px; padding: 0; list-style: none; }
.regel-liste li {
  position: relative; padding: 3px 0 3px 20px;
  font: 400 14px/1.6 ui-sans-serif, system-ui, sans-serif; color: #a1a1aa;
}
.regel-liste li::before {
  content: '◆'; position: absolute; left: 2px; top: 3px;
  color: var(--blood-soft); font-size: 9px; line-height: 1.8;
}

.regel-fuss {
  margin: 26px 0 10px; text-align: center;
  font: 400 11px/1 ui-serif, Georgia, serif; color: #52525b;
  letter-spacing: .3em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .regelwerk { gap: 16px; }
  .regel { padding: 18px 16px; }
  .regel-titel { font-size: 15px; }
  .regel-satz, .regel-liste li { font-size: 13px; }
}

/* ── Schichtplan ────────────────────────────────────────────────── */
/* Eine Woche in Spalten, die Stunden in Zeilen. Der Rahmen rollt,
   die Kopfzeile und die Uhrzeitspalte bleiben stehen. */

.schicht-rahmen {
  margin-top: 18px; max-height: 70vh; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(16,11,13,.72);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.schicht-rahmen::-webkit-scrollbar { width: 10px; height: 10px; }
.schicht-rahmen::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb),.35); border-radius: 6px; }
.schicht-rahmen::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }

table.schichtplan {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px;
}
table.schichtplan th, table.schichtplan td {
  border-right: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background-clip: padding-box;
}

table.schichtplan thead th {
  position: sticky; top: 0; z-index: 3; height: 46px; padding: 4px;
  background: #161012; text-align: center;
}
table.schichtplan thead th.ist-heute { background: #1d1512; }
.schicht-tag {
  display: block; font: 700 12px/1.3 ui-sans-serif, system-ui, sans-serif; color: var(--gold);
  letter-spacing: .08em;
}
.schicht-datum { display: block; font: 400 11px/1 ui-monospace, Consolas, monospace; color: #71717a; }
.ist-heute .schicht-datum { color: var(--gold); }

.schicht-zeitkopf {
  position: sticky; left: 0; top: 0; z-index: 5 !important;
  width: 62px; min-width: 62px; background: #161012 !important;
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; color: #8a7a55;
  letter-spacing: .12em; text-transform: uppercase;
}
th.schicht-zeit {
  position: sticky; left: 0; z-index: 2;
  width: 62px; min-width: 62px; padding: 0 8px; text-align: right;
  background: #120d0f;
  font: 500 11px/1 ui-monospace, Consolas, monospace; color: #71717a;
  border-right: 1px solid rgba(var(--gold-rgb),.3);
}

.schicht-zelle {
  height: 30px; padding: 2px; vertical-align: top;
  min-width: 96px;
}
.schicht-zelle.ist-heute { background: rgba(var(--gold-rgb),.045); }

.schicht-block {
  display: block; height: 100%; min-height: 26px; padding: 2px 6px; border-radius: 5px;
  position: relative;
  background: rgba(90,169,230,.16); border-left: 2px solid #5aa9e6;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.schicht-block.meine { background: rgba(var(--gold-rgb),.18); border-left-color: var(--gold); }
.schicht-block:not(.anfang) { opacity: .55; border-radius: 0 0 5px 5px; }

.schicht-name {
  font: 600 11px/1.5 ui-sans-serif, system-ui, sans-serif; color: #dbeafe;
}
.schicht-block.meine .schicht-name { color: #f3e2bd; }
.schicht-aufgabe {
  margin-left: 5px; font: 400 10px/1 ui-sans-serif, system-ui, sans-serif; color: #a1a1aa;
}

.schicht-weg { display: inline; }
.schicht-weg button {
  position: absolute; right: 2px; top: 2px;
  width: 16px; height: 16px; padding: 0; border-radius: 4px;
  border: 0; background: transparent; color: #e0475f;
  font-size: 10px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity .15s, background .15s;
}
.schicht-block:hover .schicht-weg button { opacity: 1; }
.schicht-weg button:hover { background: rgba(224,71,95,.25); }

.schicht-frei {
  display: block; height: 100%; min-height: 26px; border-radius: 5px;
  text-align: center; text-decoration: none; color: transparent;
  font: 600 14px/26px ui-sans-serif, system-ui, sans-serif;
  transition: background .15s, color .15s;
}
.schicht-frei:hover { background: rgba(var(--gold-rgb),.12); color: var(--gold); }

/* Stunden je Person */
.schicht-konto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.schicht-kontozeile {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
}
.schicht-kontozeile.meine { border-color: rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.08); }
.schicht-kontoname { font: 500 12px/1 ui-sans-serif, system-ui, sans-serif; color: #d4d4d8; }
.schicht-kontozahl { font: 700 12px/1 ui-monospace, Consolas, monospace; color: var(--gold); }

@media (max-width: 820px) {
  .schicht-rahmen { max-height: 62vh; }
  .schicht-zelle { min-width: 78px; }
  .schicht-aufgabe { display: none; }
  .schicht-zeitkopf, th.schicht-zeit { width: 50px; min-width: 50px; }
}

/* ── Das Spiral Hotel: die Schauseite ───────────────────────────── */

.haus-vorwort {
  margin-top: 10px; max-width: 720px;
  font: 400 15px/1.7 ui-sans-serif, system-ui, sans-serif; color: #d4d4d8;
}

.haus-kapitel {
  margin-top: 30px;
  animation: auftauchen .55s both; animation-delay: var(--d, 0ms);
}
.haus-text { max-width: 760px; }
.haus-titel {
  margin: 6px 0 12px; font: 700 24px/1.25 ui-serif, Georgia, serif; color: var(--gold);
  letter-spacing: .01em; text-shadow: 0 0 15px rgba(var(--gold-rgb),.2);
}
.haus-satz {
  margin: 0 0 10px; font: 400 14px/1.75 ui-sans-serif, system-ui, sans-serif; color: #d4d4d8;
}
.haus-satz strong { color: #f3e2bd; font-weight: 600; }

/* Bilder: das erste groß über die volle Breite, der Rest daneben */
.haus-bilder {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px;
}
.haus-bilder.viele { grid-template-columns: repeat(4, 1fr); }

.haus-bild {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(16,11,13,.75);
  box-shadow: 0 14px 32px rgba(0,0,0,.4);
  transition: transform .28s, border-color .28s, box-shadow .28s;
}
.haus-bild.gross { grid-column: 1 / -1; }
.haus-bild:hover {
  transform: translateY(-3px); border-color: rgba(var(--gold-rgb),.5);
  box-shadow: 0 20px 44px rgba(0,0,0,.55);
}

.haus-bild img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16 / 7; cursor: zoom-in;
}
.haus-bild.gross img { aspect-ratio: 21 / 8; }

.haus-bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 14px 9px;
  background: linear-gradient(to top, rgba(10,7,8,.92), transparent);
  font: 500 12px/1.4 ui-sans-serif, system-ui, sans-serif; color: #e4e4e7;
}

/* Fehlt die Datei, bleibt eine schlichte Tafel stehen */
.haus-ersatz { display: none; }
.haus-bild.ohne-bild {
  min-height: 130px; display: flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: rgba(var(--gold-rgb),.3);
}
.haus-bild.ohne-bild img { display: none; }
.haus-bild.ohne-bild .haus-ersatz {
  display: block; font: 500 12px/1 ui-sans-serif, system-ui, sans-serif; color: #8a7a55;
  letter-spacing: .1em; text-transform: uppercase;
}
.haus-bild.ohne-bild figcaption { background: none; position: static; padding: 0; }

.haus-fuss {
  margin: 34px 0 10px; text-align: center;
  font: 400 11px/1 ui-serif, Georgia, serif; color: #52525b;
  letter-spacing: .26em; text-transform: uppercase;
}

/* Die Lupe: ein Klick zeigt das Bild groß */
.haus-lupe {
  position: fixed; inset: 0; z-index: 90; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,4,5,.92); backdrop-filter: blur(3px);
  animation: auftauchen .2s both;
}
.haus-lupe[hidden] { display: none; }
.haus-lupe img {
  max-width: 100%; max-height: 100%; border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.7);
}

@media (max-width: 900px) {
  .haus-bilder, .haus-bilder.viele { grid-template-columns: repeat(2, 1fr); }
  .haus-titel { font-size: 20px; }
}
@media (max-width: 560px) {
  .haus-bilder, .haus-bilder.viele { grid-template-columns: 1fr; }
  .haus-bild img, .haus-bild.gross img { aspect-ratio: 16 / 9; }
  .haus-vorwort, .haus-satz { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════ */
/* Spiral Hotel — das Haus trägt Gold                               */
/*                                                                  */
/* Alles hier greift nur unter body.luxus. Red Cycle und       */
/* Codebreaker bleiben unberührt.                                   */
/* ════════════════════════════════════════════════════════════════ */

/* Kupfer und Altrosé statt Blau und Violett — dieselben Helligkeiten,
   damit die Bedeutungen unterscheidbar bleiben, nur eben warm. */
.luxus body::before { background-image:
    /* Lichtschein oben links und rechts */
    radial-gradient(1100px 620px at 8% -14%, rgba(var(--blut-rgb),.22), transparent 62%),
    radial-gradient(900px 500px at 92% -6%, rgba(var(--gold-rgb),.11), transparent 60%),
    /* Ein zweiter, kühler Schein weiter unten, damit lange Seiten nicht kippen */
    radial-gradient(1000px 700px at 78% 108%, rgba(var(--gold-rgb),.10), transparent 62%),
    radial-gradient(700px 500px at 12% 88%, rgba(var(--blut-rgb),.09), transparent 60%); }
.luxus .balken-gelesen { background:rgba(var(--gold-rgb),.75); }
.luxus .kopfknopf { border:1px solid rgba(var(--blut-rgb),.45); background:rgba(var(--blut-rgb),.12); }
.luxus .kopfknopf:hover { border-color:rgba(var(--blut-rgb),.75); background:rgba(var(--blut-rgb),.22); }
.luxus .kopfknopf.an { border-color:rgba(var(--blut-rgb),.9); background:rgba(var(--blut-rgb),.3); box-shadow:0 0 0 1px rgba(var(--blut-rgb),.35); }
.luxus .kal-kopf.heute { background:rgba(var(--gold-rgb),.09); }
.luxus .kal-heute { border:1px solid var(--line); color:var(--zweit); }
.luxus .kal-zelle.heute { background:rgba(var(--gold-rgb),.05); }
.luxus .kal-plus:hover { color:var(--zweit); border-color:var(--line); }
.luxus .team { border:1px solid rgba(var(--gold-rgb),.45); background:rgba(var(--gold-rgb),.1); }
.luxus .teamName:hover { background:rgba(var(--gold-rgb),.2); }
.luxus .teamWeg { border-left:1px solid rgba(var(--gold-rgb),.35); }
.luxus .uebertragen { border-color:rgba(var(--gold-rgb),.35); background:rgba(var(--gold-rgb),.06); }
.luxus .schicht-block { background: rgba(var(--gold-rgb),.16); border-left: 2px solid var(--zweit); }

/* Die Zinkskala des Grundgerüsts, warm nachgezogen. Gleiche Helligkeit,
   anderer Ton — grau steht schlecht neben Gold. Diese Liste steht
   bewusst VOR den Handgriffen darunter, damit die dort getroffenen
   Entscheidungen sie überschreiben. */
.luxus .logo { color: inherit; }
.luxus .brand-sub { color: #877a60; }
.luxus .muted { color: #877a60; }
.luxus .mono { color: #635944; }
.luxus .sec-title { color: #b5a687; }
.luxus .label { color: #877a60; }
.luxus .tab { color: #b5a687; }
.luxus .tab .cnt { color: #877a60; }
.luxus .input::placeholder { color: #635944; }
.luxus .ausklapp-hinweis { color: #635944; }
.luxus .ausklapp-pfeil { color: #877a60; }
.luxus .fac { color: #b5a687; }
.luxus .card .alias { color: #877a60; }
.luxus .card .sum { color: #b5a687; }
.luxus .chip { color: #b5a687; }
.luxus .t-neutral { color: #b5a687; }
.luxus dd { color: #efe6d3; }
.luxus .entry .b { color: #b5a687; }
.luxus .empty p { color: #b5a687; }
.luxus footer { color: #635944; }
.luxus .btn-ghost { color: #ded2ba; }
.luxus .linkknopf { color: #635944; }
.luxus .tag-datum { color: #b5a687; }
.luxus .verlauf-zeit { color: #635944; }
.luxus .verlauf-wer { color: #efe6d3; }
.luxus .verlauf-ziel { color: #b5a687; }
.luxus .zimmerkarte-name { color: #efe6d3; }
.luxus .zimmer-text { color: #b5a687; }
.luxus .antragart-feld { color: #b5a687; }
.luxus .antragart:hover .antragart-feld { color: #efe6d3; }
.luxus .antrag-text { color: #b5a687; }
.luxus .navlink { color: #b5a687; }
.luxus .navname { color: #877a60; }
.luxus .stufe-leser { color: #b5a687; }
.luxus .notzugang { color: #635944; }
.luxus .notzugang:hover { color: #b5a687; }
.luxus .personzeile { color: #ded2ba; }
.luxus .abt-zustaendig { color: #b5a687; }
.luxus .auftragtext { color: #b5a687; }
.luxus .hinweiszeile { color: #877a60; }
.luxus .ort-text { color: #b5a687; }
.luxus .mitgl-ersatz { color: #b5a687; }
.luxus #hochladenKnopf.offen { color: #ded2ba; }
.luxus .dokschalter { color: #877a60; }
.luxus .dok-bemerkung { color: #b5a687; }
.luxus .bl-grund { color: #b5a687; }
.luxus .bl-pfeil { color: #877a60; }
.luxus .bl-pfeil:disabled:hover { color: #877a60; }
.luxus .anlagename { color: #efe6d3; }
.luxus .anlageweg { color: #635944; }
.luxus .herkunft { color: #877a60; }
.luxus .herkunft strong { color: #b5a687; }
.luxus .kal-wochentag { color: #efe6d3; }
.luxus .kal-datum { color: #877a60; }
.luxus .kal-zeit { color: #635944; }
.luxus .kal-titel { color: #efe6d3; }
.luxus .kal-fuer { color: #877a60; }
.luxus .kal-plus { color: #4b4433; }
.luxus .termin-text { color: #b5a687; }
.luxus .termin-fuer .label { color: #635944; }
.luxus .fuerwen-name { color: #b5a687; }
.luxus .fuerwen-wahl:hover .fuerwen-name { color: #efe6d3; }
.luxus .teamWeg { color: #635944; }
.luxus .teamLeer { color: #635944; }
.luxus .teamNeuKnopf { color: #877a60; }
.luxus .uebertragen-tipp { color: #635944; }
.luxus .fuerwen-alle .fuerwen-name { color: #877a60; }
.luxus table.lager { color: #efe6d3; }
.luxus .lager-kopfzeile th.dreh > span { color: #efe6d3; }
.luxus .lager-kopfzeile th.fest-2 > span { color: #b5a687; }
.luxus .lager-name option { color: #efe6d3; }
.luxus .z-offen input { color: #877a60; }
.luxus .lager-info input { color: #ded2ba; }
.luxus .lager-datum input { color: #efe6d3; }
.luxus .lager-leer { color: #877a60; }
.luxus .wahl-unter { color: #ded2ba; }
.luxus .wahl-text { color: #b5a687; }
.luxus .hotel-blocktitel .mono { color: #877a60; }
.luxus .hotel-tabelle input:not([type=checkbox]),
.luxus .hotel-tabelle select { color: #efe6d3; }
.luxus .hotel-tabelle select option { color: #efe6d3; }
.luxus .hotel-name { color: #efe6d3; }
.luxus .hotel-leer { color: #877a60; }
.luxus tr.hotel-ohne td { color: #877a60; }
.luxus .hotel-etage-gast { color: #efe6d3; }
.luxus .hotel-etage-zeit { color: #877a60; }
.luxus .hotel-gastdaten { color: #ded2ba; }
.luxus .hotel-kal-nr { color: #b5a687; }
.luxus .hotel-kal-event { color: #efe6d3; }
.luxus .hotel-stand-fuss { color: #877a60; }
.luxus .regel-satz { color: #ded2ba; }
.luxus .regel-liste li { color: #b5a687; }
.luxus .regel-fuss { color: #635944; }
.luxus .schicht-datum { color: #877a60; }
.luxus th.schicht-zeit { color: #877a60; }
.luxus .schicht-aufgabe { color: #b5a687; }
.luxus .schicht-kontoname { color: #ded2ba; }
.luxus .haus-vorwort { color: #ded2ba; }
.luxus .haus-satz { color: #ded2ba; }
.luxus .haus-bild figcaption { color: #efe6d3; }
.luxus .haus-fuss { color: #635944; }

.luxus {
  /* Wärmere Grundtöne: Nachtbraun statt Blauschwarz, Gold statt Blut.
     Das ist die Palette des Spiral Hotels; Codebreaker und Red Cycle
     setzen weiter unten ihre eigenen Zahlen darüber. */
  --gold-rgb:    212,175,95;
  --hell-rgb:    240,220,168;
  --zweit:       #d69466;
  --gold:        #d4af5f;
  --gold-hell:   #f0dCa8;
  --gold-tief:   #8f6f2c;
  --champagner:  #f5ead2;
  --nacht:       #0d0a07;
  --nacht-warm:  #161009;
  --line:        rgba(var(--gold-rgb),.18);
  --zweit-rgb:     214, 148, 102;   /* Kupfer als zweiter Ton */
  --gold-tief-rgb: 143, 111,  44;
  --flaeche-rgb:    22,  16,  10;   /* Nachtbraun für Kästen */
  --kopf-rgb:       13,  10,   7;   /* und für den Kopf */
  --serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Hoefler Text',
           Garamond, Georgia, 'Times New Roman', serif;

  background-color: var(--nacht);
  color: var(--champagner);
}

/* Der Grund: weiches Kerzenlicht statt rotem Schein */
.luxus::before {
  background-image:
    radial-gradient(1200px 680px at 12% -16%, rgba(var(--gold-rgb),.20), transparent 62%),
    radial-gradient(900px 520px at 88% -8%,  rgba(var(--hell-rgb),.10), transparent 60%),
    radial-gradient(1000px 700px at 80% 108%, rgba(143,111,44,.16), transparent 62%),
    radial-gradient(760px 520px at 8% 92%,   rgba(var(--gold-rgb),.09), transparent 60%);
}
.luxus::after { opacity: .5; }

/* ── Kopf ───────────────────────────────────────────────────────── */
.luxus header {
  border-bottom: 1px solid rgba(var(--gold-rgb),.34);
  background: linear-gradient(180deg, rgba(13,10,7,.96), rgba(13,10,7,.9));
  box-shadow: 0 1px 0 rgba(var(--gold-rgb),.12), 0 10px 30px rgba(0,0,0,.45);
}
.luxus .logo img { filter: drop-shadow(0 0 10px rgba(var(--gold-rgb),.35)); }
.luxus .logo:hover img { filter: drop-shadow(0 0 26px rgba(var(--hell-rgb),.55)); }

.luxus .brand-1 {
  font-family: var(--serif); font-weight: 400; font-size: 24px;
  letter-spacing: .34em; color: var(--champagner);
}
.luxus .brand-2 {
  font-family: var(--serif); font-weight: 400; font-size: 25px;
  letter-spacing: .26em; color: var(--gold-hell);
}
/* Früher lag hier ein Goldverlauf, in die Schrift hineinmaskiert.
   Hübsch — aber background-clip:text kostet die Subpixel-Glättung,
   und das ausgerechnet beim Titel. Jetzt steht dort ein voller Ton;
   der Schriftzug ist damit sichtbar schärfer und immer noch golden.
   Wer den Verlauf zurückwill, setzt diesen Block wieder ein. */
.luxus .brand-2 { color: var(--gold-hell); }
.luxus .brand-sub {
  font-family: var(--serif); font-size: 10px; letter-spacing: .38em;
  color: rgba(var(--gold-rgb),.62); text-transform: uppercase;
}

/* Eine feine Goldlinie zwischen Wappen und Menü */
.luxus .hauptnav { position: relative; }
.luxus .hauptnav::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 86%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.55), transparent);
}

.luxus .navlink {
  font-family: var(--serif); font-weight: 400; font-size: 19px;
  letter-spacing: .2em; color: rgba(245,234,210,.62);
  border-bottom-width: 2px; padding: 12px 2px 9px;
}
.luxus .navlink:hover { color: var(--gold-hell); }
.luxus .navlink.an {
  color: var(--gold-hell); border-color: var(--gold);
  text-shadow: 0 0 13px rgba(var(--gold-rgb),.3);
}
.luxus .navzeile-zwei { border-top-color: rgba(var(--gold-rgb),.12); }

.luxus .kopfknopf {
  border-color: rgba(var(--gold-rgb),.4); background: rgba(var(--gold-rgb),.08);
  color: var(--gold); font-family: var(--serif); letter-spacing: .1em;
}
.luxus .kopfknopf:hover {
  color: var(--gold-hell); border-color: rgba(var(--gold-rgb),.75);
  background: rgba(var(--gold-rgb),.18);
}
.luxus .chip, .luxus .stufe {
  border-color: rgba(var(--gold-rgb),.3); color: rgba(245,234,210,.85);
}
.luxus .navname strong { color: var(--gold) !important; }

/* ── Flächen ────────────────────────────────────────────────────── */
.luxus .panel {
  border: 1px solid rgba(var(--gold-rgb),.2);
  background: linear-gradient(180deg, rgba(24,18,10,.9), rgba(15,11,7,.92));
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(var(--hell-rgb),.08) inset, 0 16px 40px rgba(0,0,0,.42);
}
.luxus .stripe { height: 2px; }

/* ── Schrift ────────────────────────────────────────────────────── */
.luxus h1 {
  font-family: var(--serif); font-weight: 400; font-size: 35px;
  letter-spacing: .04em; color: var(--champagner);
  text-shadow: 0 0 18px rgba(var(--gold-rgb),.22);
}
.luxus h2, .luxus h3 {
  font-family: var(--serif); font-weight: 400; letter-spacing: .02em;
  color: var(--champagner);
}
.luxus .seal {
  font-family: var(--serif); font-size: 11px; letter-spacing: .34em;
  color: rgba(var(--gold-rgb),.82);
}
.luxus .sec-title {
  font-family: var(--serif); font-weight: 400; font-size: 15px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
}
.luxus .label {
  font-family: var(--serif); font-size: 11px; letter-spacing: .2em;
  color: rgba(var(--gold-rgb),.7);
}
.luxus .muted { color: rgba(245,234,210,.55); }
.luxus .mono { color: rgba(var(--gold-rgb),.5); letter-spacing: .12em; }
.luxus .sum { color: rgba(245,234,210,.72); }

/* ── Kacheln ────────────────────────────────────────────────────── */
.luxus .type {
  border-color: rgba(var(--gold-rgb),.2);
  background: linear-gradient(160deg, rgba(var(--gold-rgb),.09), rgba(15,11,7,.9) 60%);
}
.luxus .type:hover { border-color: rgba(var(--gold-rgb),.55); }
.luxus .type .num {
  font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--gold-hell);
}
.luxus .type .lbl { font-family: var(--serif); letter-spacing: .16em; }

/* ── Knöpfe ─────────────────────────────────────────────────────── */
.luxus .btn {
  font-family: var(--serif); font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; border-radius: 6px; padding: 10px 22px;
}
.luxus .btn-primary {
  background: linear-gradient(180deg, #d9b767, #a8823a);
  color: #1a1204; font-weight: 600;
  box-shadow: 0 2px 0 rgba(255,236,190,.35) inset, 0 8px 22px rgba(var(--gold-rgb),.22);
}
.luxus .btn-primary:hover {
  background: linear-gradient(180deg, #f0dca8, #c19a45); color: #150f03;
}
.luxus .btn-ghost {
  border: 1px solid rgba(var(--gold-rgb),.35); color: rgba(245,234,210,.85);
}
.luxus .btn-ghost:hover {
  border-color: var(--gold); color: var(--gold-hell); background: rgba(var(--gold-rgb),.1);
}
.luxus .btn-anlegen { border-color: rgba(var(--gold-rgb),.5) !important; }

/* ── Eingabefelder ──────────────────────────────────────────────── */
.luxus .input {
  border-color: rgba(var(--gold-rgb),.22); background: rgba(10,7,4,.75);
  color: var(--champagner); border-radius: 6px;
}
.luxus .input:focus {
  border-color: rgba(var(--gold-rgb),.75); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.16);
}
.luxus .input::placeholder { color: rgba(245,234,210,.3); }
.luxus select.input option { background: #161009; color: var(--champagner); }

/* ── Tabellen: Lager, Mannschaft, Kontobuch ─────────────────────── */
.luxus .hotel-block {
  border-left-width: 2px;
  background: linear-gradient(180deg, rgba(24,18,10,.9), rgba(15,11,7,.92));
}
.luxus .hotel-blocktitel { font-family: var(--serif); letter-spacing: .2em; }
.luxus .hotel-tabelle th {
  font-family: var(--serif); font-size: 11px; letter-spacing: .2em;
  color: rgba(var(--gold-rgb),.78); border-bottom-color: rgba(var(--gold-rgb),.28);
}
.luxus .hotel-tabelle td { border-bottom-color: rgba(var(--gold-rgb),.1); }
.luxus .hotel-tabelle tbody tr:hover td { background: rgba(var(--gold-rgb),.07); }
.luxus .hotel-tabelle input:not([type=checkbox]),
.luxus .hotel-tabelle select {
  background: rgba(255,240,205,.045); color: var(--champagner); border-radius: 5px;
}
.luxus .hotel-tabelle input:focus, .luxus .hotel-tabelle select:focus {
  border-color: var(--gold); background: rgba(var(--gold-rgb),.14);
}
.luxus .hotel-tabelle tr.hotel-neu td { background: rgba(var(--gold-rgb),.075); }
.luxus tr.hotel-summe td { border-top-color: rgba(var(--gold-rgb),.45); color: var(--gold-hell); }
.luxus .hotel-name { font-family: var(--serif); letter-spacing: .04em; color: var(--champagner); }

/* ── Apartments ─────────────────────────────────────────────────── */
.luxus .hotel-etage { border-left-width: 2px; }
.luxus .hotel-etage-nr, .luxus .hotel-etage-marke {
  font-family: var(--serif); font-weight: 400;
}
.luxus .hotel-etage-name { font-family: var(--serif); letter-spacing: .22em; }
.luxus .hotel-etage-gast, .luxus .hotel-etage-frei {
  font-family: var(--serif); font-weight: 400; font-size: 15px;
}

/* ── Kalender und Schichtplan ───────────────────────────────────── */
.luxus .hotel-monat, .luxus .schicht-tag {
  font-family: var(--serif); font-weight: 400; letter-spacing: .18em; color: var(--gold);
}
.luxus .hotel-kal-kopf, .luxus .schicht-zeitkopf {
  font-family: var(--serif); letter-spacing: .2em; color: rgba(var(--gold-rgb),.7);
}
.luxus .hotel-kal-tag, .luxus .schicht-zelle {
  border-color: rgba(var(--gold-rgb),.14);
}
.luxus .hotel-kal-tag.ist-heute {
  border-color: rgba(var(--gold-rgb),.6); background: rgba(var(--gold-rgb),.09);
}
.luxus .schicht-rahmen, .luxus .hotel-tabelle-rahmen {
  border-color: rgba(var(--gold-rgb),.22);
}
.luxus .schicht-rahmen { background: rgba(15,11,7,.8); }
.luxus table.schichtplan thead th { background: #17110a; }
.luxus .schicht-zeitkopf { background: #17110a !important; }
.luxus table.schichtplan thead th.ist-heute { background: #1f1710; }
.luxus th.schicht-zeit { background: #120d07; border-right-color: rgba(var(--gold-rgb),.3); }
.luxus .schicht-block.meine {
  background: rgba(var(--gold-rgb),.22); border-left-color: var(--gold);
}
.luxus .schicht-block.meine .schicht-name { color: var(--gold-hell); }
.luxus .schicht-name { font-family: var(--serif); letter-spacing: .03em; }
.luxus .schicht-frei:hover { background: rgba(var(--gold-rgb),.14); color: var(--gold-hell); }
.luxus .schicht-kontoname { font-family: var(--serif); letter-spacing: .04em; }
.luxus .schicht-kontozahl { color: var(--gold-hell); }

/* ── Kasse ─────────────────────────────────────────────────────── */
.luxus .hotel-stand {
  border-left-width: 2px;
  background: linear-gradient(120deg, rgba(var(--gold-rgb),.14), transparent 72%);
}
.luxus .hotel-stand-label { font-family: var(--serif); letter-spacing: .26em; }
.luxus .hotel-stand-zahl {
  font-family: var(--serif); font-weight: 400; font-size: 38px; color: var(--gold-hell);
  text-shadow: 0 0 16px rgba(var(--gold-rgb),.2);
}
.luxus .hotel-sollhinweis, .luxus .lager-sollhinweis {
  background: rgba(var(--gold-rgb),.16); color: var(--gold);
}

/* ── Vermietungen und Events (die Streifenkarten) ───────────────── */
.luxus .zimmer {
  border-color: rgba(var(--gold-rgb),.18);
  background: linear-gradient(180deg, rgba(24,18,10,.88), rgba(15,11,7,.92));
}
.luxus .zimmer-name { font-family: var(--serif); font-weight: 400; font-size: 17px; }
.luxus .hotel-kal-event { font-family: var(--serif); letter-spacing: .02em; }

/* ── Die Schauseite ─────────────────────────────────────────────── */
.luxus .haus-titel {
  font-size: 27px; letter-spacing: .03em;
  text-shadow: 0 0 16px rgba(var(--gold-rgb),.2);
}
.luxus .haus-vorwort, .luxus .haus-satz { color: rgba(245,234,210,.8); }
.luxus .haus-satz strong { color: var(--gold-hell); }
.luxus .haus-bild { border-color: rgba(var(--gold-rgb),.22); }
.luxus .haus-bild:hover { border-color: rgba(var(--gold-rgb),.6); }
.luxus .haus-bild figcaption {
  font-family: var(--serif); letter-spacing: .08em; font-size: 13px;
}
.luxus .haus-fuss { color: rgba(var(--gold-rgb),.45); letter-spacing: .3em; }

/* ── Fuß und Kleinkram ──────────────────────────────────────────── */
.luxus footer, .luxus .fuss { border-top-color: rgba(var(--gold-rgb),.16); }
.luxus .empty .ico { filter: sepia(.5) saturate(1.4); }
.luxus .meldung.ok {
  border-color: rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.12); color: var(--gold-hell);
}

/* Das Lagerbuch des Codebreaker hat eigene, fest eingetragene Farben —
   die werden hier nachgezogen, damit nichts kühl heraussticht. */
.luxus .lager-rahmen { border-color: rgba(var(--gold-rgb),.22); background: rgba(15,11,7,.8); }
.luxus .lager-blockzeile th { background: #17110a; color: rgba(var(--gold-rgb),.72); }
.luxus .lager-block { border-left-color: rgba(var(--gold-rgb),.4) !important; }
.luxus .lager-sollzeile th { background: #1c150c; color: var(--gold); }
.luxus .lager-sollzeile th.fest-1 { color: rgba(var(--gold-rgb),.7); }
.luxus .lager-kopfzeile th { background: #17110a; }
.luxus .lager-kopfzeile th.dreh > span { color: var(--champagner); }
.luxus .lager-kopfzeile th.fest-1 { color: var(--gold); font-family: var(--serif); }
.luxus table.lager .fest { background: #120d07; }
.luxus table.lager .fest-2 { border-right-color: rgba(var(--gold-rgb),.35); }
.luxus table.lager th, .luxus table.lager td { border-color: rgba(var(--gold-rgb),.1); }
.luxus .lager-zeile:hover .fest { background-color: #1d1509; }
.luxus .lager-name { background: rgba(var(--gold-rgb),.14); color: var(--champagner); }
.luxus .lager-name option, .luxus .hotel-tabelle select option,
.luxus select.input option { background: #17110a; color: var(--champagner); }
.luxus .lager-luecke { background: rgba(var(--gold-rgb),.05); }
.luxus .lager-datum input { background: rgba(var(--gold-rgb),.1); color: var(--champagner); }
.luxus .lager-neu .fest { background-color: #201709; }
.luxus .lager-sollhinweis { background: rgba(var(--gold-rgb),.16); color: var(--gold); }

/* Verweise ohne eigene Farbe fielen sonst auf das Blau des Browsers zurück. */
.luxus a.panel, .luxus a.auftragzeile { color: inherit; }

/* Die Reiter der Datenbank und weitere kleine Flächen */
.luxus .reiter.an { box-shadow: inset 0 0 0 2px #17110a; }
.luxus .zimmerkarte { background: rgba(var(--gold-rgb),.04); }
.luxus .zimmerkarte-nummer { background: rgba(var(--gold-rgb),.16); border-color: rgba(var(--gold-rgb),.45); }

@media (max-width: 720px) {
  .luxus .brand-1 { font-size: 19px; letter-spacing: .24em; }
  .luxus .brand-2 { font-size: 19px; letter-spacing: .18em; }
  .luxus h1 { font-size: 26px; }
  .luxus .navlink { font-size: 16px; letter-spacing: .14em; }
  .luxus .hotel-stand-zahl { font-size: 29px; }

  /* Auf dem Telefon steht die rechte Kopfhälfte sonst in einer einzigen
     langen Reihe und schiebt die Seite zur Seite. Hier darf sie umbrechen. */
  .kopfrechts {
    flex-wrap: wrap; row-gap: 8px; margin-left: 0; width: 100%;
  }
  .logo img { height: 56px; max-width: 118px; }
  .logo { gap: 12px; }
  .hrow { gap: 12px; }
}

/* ══ Die Akte: Kopf, Datenblatt, Verlauf, Übernahme ═══════════════
   Steht bewusst am Ende des Blattes: Was hier steht, hat das letzte
   Wort. Die Farben kommen aus den Marken des Hauses, damit die Akte
   in allen drei Bereichen gleich aussieht. */

/* ── Kopf der Akte ───────────────────────────────────────────────── */

.hero { gap: 26px; padding: 28px; }
.hero h1 {
  font-size: 30px; line-height: 1.15; letter-spacing: .005em;
  text-wrap: balance;
}
.akte-schilder { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.akte-untertitel {
  margin-top: 6px; font: 400 15px/1.5 var(--serif, ui-serif, Georgia, serif);
  font-style: italic; color: var(--gold, #c8a04a); opacity: .85;
}
.akte-kurztext {
  margin-top: 14px; max-width: 66ch;
  font-size: 14.5px; line-height: 1.75; color: var(--champagner, #e4e4e7);
  white-space: pre-wrap;
}
.akte-knoepfe { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Herkunft: klein, ruhig, immer unten */
.herkunft {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.9;
}

/* ── Datenblatt ──────────────────────────────────────────────────── */

/* Jedes Feld eine eigene Zeile mit Haarlinie darunter — das liest sich
   ruhiger als zwei Spalten dicht an dicht. */
dl { gap: 0 32px; }
dl > div {
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--gold-rgb),.08);
  min-width: 0;
}
dl > div:last-child { border-bottom: 0; }
dt.label { margin-bottom: 4px; opacity: .85; }
dd { font-size: 14.5px; line-height: 1.65; word-break: break-word; }

/* ── Verlauf und Chronik ─────────────────────────────────────────── */

/* Die Einträge stehen an einer Zeitachse. Der Punkt sitzt auf der
   Linie, der Text daneben — so sieht man auf einen Blick, wie viele
   Vermerke es sind und in welcher Reihenfolge sie stehen. */
.chronik-strang { position: relative; margin-top: 22px; padding-left: 26px; }
.chronik-strang::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(to bottom,
    rgba(var(--gold-rgb),.45), rgba(var(--gold-rgb),.14) 70%, transparent);
}

.entry {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(var(--gold-rgb),.035);
  border-radius: 11px; padding: 15px 17px; margin-bottom: 12px;
  transition: border-color .2s, background .2s;
}
.chronik-strang .entry::before {
  content: ''; position: absolute; left: -25px; top: 19px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold, #c8a04a);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.14);
}
.entry:hover { border-color: rgba(var(--gold-rgb),.3); background: rgba(var(--gold-rgb),.06); }

.entry-kopf {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11.5px;
}
/* Doppelt gewichtet, damit die Marke des Hauses das Schild nicht überfärbt */
.chip.art-schild {
  font-weight: 600; letter-spacing: .1em;
  border-color: rgba(var(--gold-rgb),.32); background: rgba(var(--gold-rgb),.1);
  color: var(--gold, #c8a04a);
}
/* Datum und Erfasser treten zurück — der Titel des Eintrags führt. */
.entry-wann { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.entry-wer  { display: inline-flex; align-items: center; gap: 4px; }
.entry-wann, .entry-wer { font-size: 11.5px; color: #b5a687; }

.entry .t {
  margin-top: 10px; font-size: 15.5px; font-weight: 600; line-height: 1.35;
  color: var(--champagner, #f4f4f5);
}
.entry .b {
  margin-top: 7px; font-size: 14px; line-height: 1.75; white-space: pre-wrap;
  border-left: 2px solid rgba(var(--gold-rgb),.22); padding-left: 12px;
}
.entry.bearbeiten {
  border-color: rgba(var(--gold-rgb),.5); background: rgba(var(--gold-rgb),.09);
}
.entry-knoepfe { display: flex; gap: 6px; margin-left: auto; }

/* Der feste Erfasser — sieht aus wie ein Feld, ist aber keines */
.festwert {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 40px; padding: 8px 12px;
  border: 1px dashed rgba(var(--gold-rgb),.28); border-radius: 8px;
  background: rgba(var(--gold-rgb),.05);
}
.festwert-name { font-size: 14px; color: var(--champagner, #e4e4e7); }
.festwert-zeit, .festwert-name + * { color: #b5a687; }
.festwert-zeit {
  margin-left: auto; font-size: 11.5px; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; opacity: .75;
}

/* ── Übernahme in eine andere Rubrik ─────────────────────────────── */

.uebernahme { border-color: rgba(var(--gold-rgb),.28); }
.uebernahme-satz {
  margin: -4px 0 18px; max-width: 68ch; color: #b5a687;
  font-size: 13px; line-height: 1.75;
}
.uebernahme-ziel {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(var(--gold-rgb),.06);
}
.uebernahme-ziel .label { margin: 0 0 5px; }
.uebernahme-ziel select.input { min-width: 220px; width: 100%; }
.uebernahme-ziel > div { flex: 1 1 220px; }
.uebernahme-ziel .btn { flex: 0 0 auto; }

/* Steht unter der Zielauswahl, sobald eine bestehende Akte gewählt ist */
.uebernahme-hinweis {
  margin: 10px 2px 0; font-size: 12px; line-height: 1.55;
  color: rgba(var(--hell-rgb), .62);
  padding-left: 12px; border-left: 2px solid rgba(var(--gold-rgb), .45);
}
.uebernahme-hinweis[hidden] { display: none; }

@media (max-width: 720px) {
  .uebernahme-ziel > div { flex: 1 1 100%; }
  .uebernahme-ziel .btn { width: 100%; }
}

.uebernahme-frage {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 8px;
}
.uebernahme-alle { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.uebernahme-alle .linkknopf { font-size: 11px; letter-spacing: .1em; }

.uebernahme-liste { list-style: none; display: grid; gap: 8px; }

.uebernahme-wahl {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0,0,0,.16);
  transition: border-color .18s, background .18s;
}
.uebernahme-wahl:hover { border-color: rgba(var(--gold-rgb),.35); background: rgba(var(--gold-rgb),.05); }
.uebernahme-wahl input[type=checkbox] {
  flex-shrink: 0; margin-top: 2px; width: 17px; height: 17px;
  accent-color: var(--gold, #c8a04a); cursor: pointer;
}
.uebernahme-wahl:has(input:checked) {
  border-color: rgba(var(--gold-rgb),.5); background: rgba(var(--gold-rgb),.09);
}

.uebernahme-feld { display: block; min-width: 0; flex: 1; }
.uebernahme-titel {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 600; line-height: 1.35;
  color: var(--champagner, #f4f4f5);
}
.uebernahme-zahl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 5px; padding: 1px 6px;
  color: var(--gold, #c8a04a);
}
.uebernahme-quelle {
  display: block; margin-top: 5px; color: #877a60;
  font-size: 11.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.uebernahme-vor {
  display: block; margin-top: 6px; color: #b5a687;
  font-size: 13px; line-height: 1.65; white-space: pre-wrap;
}
.uebernahme-ohne { font-style: italic; opacity: .6; }
.uebernahme-leer { margin-top: 10px; font-size: 13px; font-style: italic; opacity: .7; }

.verweis-schlicht { color: var(--gold, #c8a04a); text-decoration: none; border-bottom: 1px dotted; }
.verweis-schlicht:hover { border-bottom-style: solid; }

@media (max-width: 900px) {
  .hero h1 { font-size: 25px; }
  dl { grid-template-columns: 1fr; }
  .chronik-strang { padding-left: 20px; }
  .chronik-strang .entry::before { left: -19px; }
}
@media (max-width: 560px) {
  .hero { padding: 20px; gap: 18px; }
  .uebernahme-ziel select.input { min-width: 0; width: 100%; }
  .uebernahme-ziel .btn { width: 100%; }
  .festwert-zeit { margin-left: 0; }
}

/* ══ Uhr im Kopf ══════════════════════════════════════════════════ */

.uhr {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--line);
  line-height: 1.15; white-space: nowrap;
}
.uhr-zeit {
  font: 600 17px/1 ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: .06em; color: var(--gold, #c8a04a);
  font-variant-numeric: tabular-nums;
}
.uhr-datum {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #877a60;
}

/* ══ Speisekarte im Extra-Service ═════════════════════════════════ */

.extrakarte { margin-top: 10px; }
.extrakarte-titel {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #877a60; margin-bottom: 7px;
}
.extrakarte-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.extrastueck {
  border: 1px solid var(--line); background: rgba(0,0,0,.2);
  border-radius: 7px; padding: 5px 11px; cursor: pointer;
  font: 500 12.5px/1.3 inherit; color: #b5a687;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.extrastueck:hover {
  border-color: rgba(var(--gold-rgb),.45); color: var(--champagner, #e4e4e7);
  transform: translateY(-1px);
}
.extrastueck.an {
  border-color: rgba(var(--gold-rgb),.7); background: rgba(var(--gold-rgb),.16);
  color: var(--gold, #c8a04a); font-weight: 600;
}
.extrastueck.an::before { content: '✓ '; }

/* ══ Anlagen am VIP-Antrag ════════════════════════════════════════ */

.antragsanlagen {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed rgba(var(--gold-rgb),.22);
}
.anlagenzahl {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border: 1px solid rgba(var(--gold-rgb),.35); border-radius: 5px;
  font-size: 10px; color: var(--gold, #c8a04a);
}
.anlagen-leer { font-size: 12.5px; font-style: italic; color: #877a60; }

.anlagenreihe {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.anlagenstueck {
  position: relative; margin: 0; width: 148px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,.24);
  transition: border-color .2s, transform .2s;
}
.anlagenstueck:hover { border-color: rgba(var(--gold-rgb),.45); transform: translateY(-2px); }
.anlagenstueck.ist-akte { border-color: rgba(var(--gold-rgb),.4); }
.anlagenstueck a { display: block; text-decoration: none; color: inherit; }
.anlagenstueck img {
  display: block; width: 100%; height: 104px; object-fit: cover;
  background: #0d0a07;
}
.anlagen-ico {
  display: flex; align-items: center; justify-content: center;
  height: 104px; font-size: 34px; opacity: .55;
}
.anlagenstueck figcaption {
  padding: 7px 9px 9px; font-size: 11.5px; line-height: 1.4; color: #b5a687;
}
.anlagen-marke {
  display: inline-block; margin-bottom: 3px; padding: 1px 6px;
  border-radius: 4px; background: #000; color: #d4af5f;
  font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.anlagen-name { display: block; word-break: break-word; }
.anlagenstueck .bildweg { position: absolute; top: 6px; right: 6px; }

.anlagen-form {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.anlagen-form .input { flex: 1 1 190px; min-width: 0; }

.aktenwahl-zeile {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.aktenwahl-hinweis { font-size: 11.5px; line-height: 1.5; color: #877a60; flex: 1 1 220px; }

/* Der Auswahlschirm */
.aktenwahl-schirm {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(6,4,3,.86); backdrop-filter: blur(3px);
  animation: auftauchen .2s both;
}
.aktenwahl-schirm[hidden] { display: none; }
.aktenwahl-kasten {
  width: 100%; max-width: 560px; max-height: 84vh; overflow: auto; padding: 22px;
  border: 1px solid rgba(var(--gold-rgb),.35); border-radius: 14px;
  background: linear-gradient(180deg, rgba(24,18,10,.98), rgba(15,11,7,.99));
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.aktenwahl-satz { font-size: 12.5px; line-height: 1.7; color: #b5a687; margin: -4px 0 14px; }
.aktenwahl-liste { display: grid; gap: 6px; margin-top: 12px; }
.aktenwahl-liste.wartet { opacity: .45; pointer-events: none; }
.aktenwahl-zeile-knopf {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.22);
  color: inherit; font: inherit;
  transition: border-color .18s, background .18s, transform .18s;
}
.aktenwahl-zeile-knopf:hover {
  border-color: rgba(var(--gold-rgb),.5); background: rgba(var(--gold-rgb),.09);
  transform: translateX(2px);
}
.aw-icon { font-size: 19px; flex-shrink: 0; }
.aw-text { display: block; min-width: 0; flex: 1; }
.aw-titel { display: block; font-size: 14px; font-weight: 600; color: var(--champagner, #e4e4e7); }
.aw-unter { display: block; font-size: 11.5px; color: #877a60; }
.aw-rubrik {
  flex-shrink: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold, #c8a04a);
}
.aktenwahl-stand { margin-top: 10px; font-size: 12px; color: #877a60; min-height: 17px; }
.aktenwahl-stand.schlimm { color: #e0475f; }

/* ══ Speisekarte ══════════════════════════════════════════════════ */

.karte-blatt {
  margin-top: 22px; padding: 34px 30px 26px;
  border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 16px;
  background:
    radial-gradient(900px 400px at 50% -10%, rgba(var(--gold-rgb),.07), transparent 65%),
    linear-gradient(180deg, rgba(26,19,11,.96), rgba(13,10,7,.98));
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.08), 0 24px 60px rgba(0,0,0,.45);
}

.karte-kopf {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  text-align: center; margin-bottom: 8px;
}
.karte-zier { flex: 1; height: 1px; max-width: 220px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.5)); }
.karte-zier-rechts { background: linear-gradient(90deg, rgba(var(--gold-rgb),.5), transparent); }
.karte-titel {
  margin-top: 4px;
  font: 600 34px/1.15 var(--serif, ui-serif, Georgia, serif);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--champagner, #f5ead2);
  text-shadow: 0 0 18px rgba(var(--gold-rgb),.22);
}

.karte-gruppe {
  margin: 26px 0 6px;
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold, #c8a04a);
  padding-bottom: 8px; border-bottom: 1px solid rgba(var(--gold-rgb),.22);
}

.karte-spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 42px;
}
.karte-spalte { min-width: 0; }

/* Ein Gericht. Beim Überfahren hebt es sich heraus. */
.karte-stueck {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 14px; margin: 0 -14px;
  border-radius: 12px;
  border-bottom: 1px solid rgba(var(--gold-rgb),.1);
  transition: transform .22s cubic-bezier(.2,.8,.3,1),
              box-shadow .22s, background .22s, border-color .22s;
}
.karte-stueck:hover {
  transform: translateY(-4px) scale(1.015);
  background: rgba(var(--gold-rgb),.07);
  border-color: transparent;
  box-shadow: 0 16px 38px rgba(0,0,0,.5), inset 0 0 0 1px rgba(var(--gold-rgb),.32);
  position: relative; z-index: 2;
}

.karte-bild {
  position: relative; flex-shrink: 0;
  width: 104px; height: 104px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(var(--gold-rgb),.12), transparent 70%);
}
.karte-bild img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55));
  transition: transform .22s;
}
.karte-stueck:hover .karte-bild img { transform: scale(1.07); }
.karte-zeichen { display: none; font-size: 42px; opacity: .5; }

/* Der Bogen: eine Datei, zwölf Zellen. Vier Spalten, drei Reihen —
   deshalb 400 % auf 300 % gedehnt, die Zelle wählt die Position. */
.karte-bogen {
  display: block; width: 100%; height: 100%;
  background-size: 400% 300%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55));
  transition: transform .22s;
}
.karte-stueck:hover .karte-bogen { transform: scale(1.07); }

.karte-bild.ohne-bild img { display: none; }
.karte-bild.ohne-bild .karte-zeichen { display: block; }
.karte-bild.ohne-bild {
  border: 1px dashed rgba(var(--gold-rgb),.25);
}

.karte-text { min-width: 0; flex: 1; }
.karte-name {
  font: 400 22px/1.2 var(--serif, ui-serif, Georgia, serif);
  color: var(--gold, #c8a04a); letter-spacing: .01em;
}
.karte-satz {
  margin-top: 6px; font-size: 13px; line-height: 1.6; font-style: italic;
  color: #b5a687;
}
.karte-preis {
  display: flex; align-items: baseline; gap: 10px; margin-top: 10px;
}
.karte-punkte {
  flex: 1; height: 1px; min-width: 20px;
  background-image: radial-gradient(circle, rgba(var(--gold-rgb),.55) 1px, transparent 1px);
  background-size: 5px 1px; background-repeat: repeat-x;
  transform: translateY(-3px);
}
.karte-zahl {
  font: 600 19px/1 var(--serif, ui-serif, Georgia, serif);
  color: var(--champagner, #f5ead2); letter-spacing: .03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.karte-stueck:hover .karte-zahl { color: var(--gold, #c8a04a); }

/* Die Kleinigkeiten als Reihe unter der Karte */
.karte-reihe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px;
  margin-top: 30px; padding: 6px 16px 2px;
  border: 1px solid rgba(var(--gold-rgb),.22); border-radius: 12px;
}
.karte-klein { gap: 12px; padding: 14px 10px; margin: 0 -10px; }
.karte-klein .karte-bild { width: 74px; height: 74px; }
.karte-klein .karte-name { font-size: 17px; }
.karte-klein .karte-satz { font-size: 11.5px; margin-top: 4px; }
.karte-klein .karte-zahl { font-size: 15px; }
.karte-reihe .karte-stueck { border-bottom: 0; }

.karte-fuss {
  margin-top: 28px; text-align: center;
  font: 400 11px/1.8 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: #877a60;
}
.karte-stadt {
  margin-top: 4px; text-align: center;
  font-size: 10px; letter-spacing: .3em; color: rgba(var(--gold-rgb),.6);
}

@media (max-width: 900px) {
  .karte-spalten { grid-template-columns: 1fr; gap: 0; }
  .karte-reihe { grid-template-columns: 1fr; }
  .karte-titel { font-size: 26px; letter-spacing: .07em; }
  .karte-zier { display: none; }
}
@media (max-width: 560px) {
  .karte-blatt { padding: 22px 16px 18px; }
  .karte-stueck { gap: 12px; padding: 14px 10px; margin: 0 -10px; }
  .karte-bild { width: 78px; height: 78px; }
  .karte-name { font-size: 19px; }
  .uhr { padding-left: 0; border-left: 0; align-items: flex-start; }
}

/* ── Das Red Cycle: Leitsatz und Schlusszeile ────────────────────── */

.club-leitsatz {
  margin: 30px auto 4px; max-width: 760px; padding: 26px 30px;
  text-align: center;
  border-top: 1px solid rgba(var(--gold-rgb),.25);
  border-bottom: 1px solid rgba(var(--gold-rgb),.25);
  background: radial-gradient(600px 160px at 50% 50%, rgba(var(--blut-rgb),.14), transparent 70%);
}
.club-satz-gross {
  font: 400 24px/1.5 var(--serif, ui-serif, Georgia, serif);
  color: var(--champagner, #f5ead2);
  text-shadow: 0 0 16px rgba(var(--blut-rgb),.25);
}
.club-satz-klein {
  margin-top: 14px;
  font: 600 11px/1.8 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold, #c8a04a);
}

.club-schluss {
  margin: 42px 0 12px; text-align: center;
  font: 400 21px/1.7 var(--serif, ui-serif, Georgia, serif);
  color: var(--gold, #c8a04a);
  text-shadow: 0 0 18px rgba(var(--gold-rgb),.22);
}
.club-schluss span {
  display: block; margin-top: 2px;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  font-family: ui-sans-serif, system-ui, sans-serif; color: #b5a687;
  text-shadow: none;
}

@media (max-width: 700px) {
  .club-leitsatz { padding: 20px 16px; margin-top: 22px; }
  .club-satz-gross { font-size: 19px; }
  .club-satz-klein { letter-spacing: .18em; }
  .club-schluss { font-size: 17px; }
}

/* ══ Bankett ══════════════════════════════════════════════════════ */

/* ── Der Aushang ─────────────────────────────────────────────────
   Angenommene Runden. Groß gesetzt, damit man sie über den Raum
   hinweg lesen kann; beim Überfahren tritt die Tafel heraus. */

.bankett-aushang {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px; margin-top: 24px;
}

.bankett-tafel {
  position: relative; overflow: hidden;
  padding: 24px 26px 22px;
  border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 14px;
  background:
    radial-gradient(700px 240px at 50% -30%, rgba(var(--blut-rgb),.22), transparent 70%),
    linear-gradient(180deg, rgba(30,22,12,.96), rgba(14,10,7,.98));
  box-shadow: inset 0 1px 0 rgba(var(--hell-rgb),.12), 0 16px 40px rgba(0,0,0,.45);
  transition: transform .26s cubic-bezier(.2,.8,.3,1),
              box-shadow .26s, border-color .26s;
}
.bankett-tafel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold, #c8a04a), rgba(var(--blut-rgb),.9), transparent);
}
.bankett-tafel:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: rgba(var(--gold-rgb),.85);
  box-shadow: inset 0 1px 0 rgba(var(--hell-rgb),.2),
              0 26px 60px rgba(0,0,0,.6),
              0 0 0 1px rgba(var(--gold-rgb),.35),
              0 0 46px rgba(var(--gold-rgb),.18);
}

.bankett-tafel-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.bankett-marke {
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold, #c8a04a);
}
.bankett-frist {
  margin-left: auto; padding: 2px 10px;
  border: 1px solid rgba(var(--gold-rgb),.4); border-radius: 99px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--champagner, #f5ead2); white-space: nowrap;
}

.bankett-tag { margin-top: 12px; }
.bankett-wochentag {
  display: block;
  font: 400 14px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: #b5a687;
}
.bankett-datum {
  display: block; margin-top: 2px;
  font: 600 40px/1.1 var(--serif, ui-serif, Georgia, serif);
  color: var(--champagner, #f5ead2);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(var(--gold-rgb),.22);
}
.bankett-tafel:hover .bankett-datum { color: var(--gold, #c8a04a); }
.bankett-uhrzeit {
  display: block; margin-top: 3px;
  font: 600 19px/1.2 var(--serif, ui-serif, Georgia, serif);
  letter-spacing: .08em; color: var(--gold, #c8a04a);
  font-variant-numeric: tabular-nums;
}


.bankett-gastgeber {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(var(--gold-rgb),.22);
}
.bankett-gastgeber .label { display: block; margin-bottom: 4px; }
.bankett-gastgeber strong {
  font: 600 24px/1.25 var(--serif, ui-serif, Georgia, serif);
  color: var(--gold, #c8a04a); letter-spacing: .01em;
}

/* Die Überschrift über den Themen — im selben Ton wie „Veranstalter",
   damit die beiden Blöcke der Tafel ein Paar bilden. */
.bankett-inhalt {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(var(--gold-rgb),.22);
}
.bankett-inhalt-titel {
  margin-bottom: 8px;
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold, #c8a04a);
}
.bankett-inhalt .bankett-thema { margin-top: 0; }

.bankett-thema {
  margin-top: 14px; padding-left: 14px;
  border-left: 2px solid rgba(var(--gold-rgb),.35);
  font-size: 15px; line-height: 1.7; color: var(--champagner, #e4e4e7);
  white-space: pre-wrap;
}

.bankett-tafel-fuss {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid rgba(var(--gold-rgb),.14);
}
.bankett-tafel-fuss .mono { font-size: 11.5px; color: #877a60; }
.bankett-tafel-fuss form { margin-left: auto; }

/* ── Das Antragsformular ─────────────────────────────────────────── */

.bankett-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}

/* ── Die Anträge ─────────────────────────────────────────────────── */

.bankett-antrag {
  margin-top: 10px; padding: 15px 17px;
  border: 1px solid var(--line); border-left: 3px solid var(--c, var(--gold));
  border-radius: 11px; background: rgba(var(--gold-rgb),.035);
  transition: border-color .2s, background .2s;
}
.bankett-antrag:hover { background: rgba(var(--gold-rgb),.07); }

.bankett-zeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bankett-antrag-tag {
  font-size: 13.5px; color: var(--champagner, #e4e4e7);
  font-variant-numeric: tabular-nums;
}
.bankett-antrag-frist { color: #877a60; }
.bankett-antrag-familie {
  margin-left: auto;
  font: 600 15px/1.2 var(--serif, ui-serif, Georgia, serif);
  color: var(--gold, #c8a04a);
}
.bankett-antrag-grund {
  margin-top: 9px; padding-left: 12px;
  border-left: 2px solid rgba(var(--gold-rgb),.22);
  font-size: 14px; line-height: 1.7; color: #b5a687; white-space: pre-wrap;
}
.bankett-antrag-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.bankett-antrag-fuss .mono { font-size: 11px; color: #877a60; }
.bankett-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.bankett-knoepfe form { display: inline-flex; }

@media (max-width: 700px) {
  .bankett-aushang { grid-template-columns: 1fr; }
  .bankett-datum { font-size: 31px; }
  .bankett-gastgeber strong { font-size: 20px; }
  .bankett-frist { margin-left: 0; }
  .bankett-antrag-familie { margin-left: 0; width: 100%; }
  .bankett-knoepfe { margin-left: 0; }
}

/* Steht der Bereichsname allein — ohne „Vindicta" darüber —, führt er
   den Kopf und bekommt dafür etwas mehr Gewicht. */
.brand-2.allein { font-size: 27px; letter-spacing: .26em; }
.luxus .brand-2.allein { font-size: 31px; letter-spacing: .22em; }

@media (max-width: 900px) {
  .brand-2.allein { font-size: 21px; }
  .luxus .brand-2.allein { font-size: 24px; }
}
@media (max-width: 720px) {
  .luxus .brand-2.allein { font-size: 22px; letter-spacing: .16em; }
}

/* ══ Jeder Bereich seine Farbe ════════════════════════════════════
   Das Gewand ist überall dasselbe — es hängt nur an anderen Marken.
   Wer hier eine Zahl ändert, färbt den ganzen Bereich um: Flächen,
   Ränder, Schein, Knöpfe, Schrift. Doppelt gepflegt wird nichts.

   Spiral Hotel behält, was in .luxus steht: Gold auf Nachtbraun.     */


/* ── Codebreaker: Schwarz und Schwarzlicht ───────────────────────
   Kein Braun, kein Gold. Tiefes Schwarz mit einem violetten Stich,
   dazu das Leuchten einer UV-Röhre — Violett als Leitfarbe, Magenta
   als zweiter Ton. Die Schrift wechselt von der Antiqua auf eine
   schmale Grotesk; das liest sich technischer und passt besser zu
   einem Raum, in dem Akten geführt werden.                          */

.luxus.welt-codebreaker {
  --gold-rgb:   176, 107, 255;   /* Schwarzlicht-Violett */
  --blut-rgb:   226,  60, 200;   /* Magenta als zweiter Ton */
  --hell-rgb:   224, 200, 255;

  --gold:       #b06bff;
  --gold-hell:  #e0c8ff;
  --gold-tief:  #5b2d9e;
  --champagner: #ece7f7;
  --nacht:      #05040a;
  --nacht-warm: #0b0714;
  --line:       rgba(176,107,255,.20);
  --blut:       #e23cc8;
  --zweit:      #e23cc8;
  --zweit-rgb:     226,  60, 200;   /* Magenta als zweiter Ton */
  --gold-tief-rgb:  91,  45, 158;
  --flaeche-rgb:    17,  12,  21;   /* Schwarz mit violettem Stich */
  --kopf-rgb:        8,   6,  11;
}

/* Die Schrift des Hauses: eine schmale Grotesk statt der Antiqua. Sie
   gilt in allen drei Bereichen — Codebreaker, Spiral Hotel und Red
   Cycle sehen gleich aus und unterscheiden sich nur in den Farben. */
.luxus.edel {
  --serif: 'Segoe UI Variable Display', 'Segoe UI', Inter, 'Helvetica Neue',
           ui-sans-serif, system-ui, sans-serif;
}

/* Die Grotesk will engere Sperrung und etwas mehr Gewicht als die
   Antiqua. */
.luxus.edel h1,
.luxus.edel h2,
.luxus.edel .brand-1,
.luxus.edel .brand-2 {
  font-weight: 600; letter-spacing: .04em;
}
.luxus.edel .brand-1 { letter-spacing: .22em; }
.luxus.edel .brand-2 { letter-spacing: .18em; }
.luxus.edel .navlink { font-weight: 600; letter-spacing: .1em; }

/* Der Schein hinter allem: zwei UV-Röhren statt Kerzenlicht */
.luxus.welt-codebreaker::before {
  background-image:
    radial-gradient(1200px 640px at 12% -16%, rgba(176,107,255,.26), transparent 62%),
    radial-gradient(900px 520px at 88% -8%,  rgba(226,60,200,.18),  transparent 60%),
    radial-gradient(1000px 700px at 80% 110%, rgba(120,60,220,.16), transparent 64%),
    radial-gradient(760px 520px at 8% 92%,   rgba(226,60,200,.10),  transparent 62%);
}

/* Was leuchtet, leuchtet kalt */
.luxus.welt-codebreaker .btn-primary,
.luxus.welt-codebreaker .chat-senden {
  background: linear-gradient(180deg, #b06bff, #7a3fd0);
  border-color: rgba(176,107,255,.6);
  color: #0b0614;
  box-shadow: 0 0 22px rgba(176,107,255,.28);
}
.luxus.welt-codebreaker .btn-primary:hover,
.luxus.welt-codebreaker .chat-senden:hover {
  box-shadow: 0 8px 26px rgba(176,107,255,.4);
}



/* ── Der Feinschliff des Hauses ──────────────────────────────────────
   Kanten, Licht und Bewegung — nicht eine neue Anordnung. Es hängt an
   der Klasse .edel und gilt damit im Codebreaker wie im Spiral Hotel;
   die Farben kommen aus den Marken des jeweiligen Bereichs, jedes Haus
   bleibt also bei seinen. Wer keine Bewegung mag, bekommt sie auch
   nicht: Am Ende steht die Ausnahme für „prefers-reduced-motion".    */

/* Das Licht hinter allem atmet — sehr langsam, damit es auffällt, ohne
   sich in den Vordergrund zu drängen. */
@keyframes cb-schimmer {
  0%   { transform: translate3d(0, 0, 0)      scale(1);    opacity: 1; }
  50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.04); opacity: .88; }
  100% { transform: translate3d(0, 0, 0)      scale(1);    opacity: 1; }
}
.luxus.edel::before {
  animation: cb-schimmer 34s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Kästen bekommen eine feine Lichtkante oben und einen tieferen Grund.
   Das wirkt weniger flach als eine einfache Linie ringsum. */
.luxus.edel .panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb),.045), rgba(var(--flaeche-rgb), 0) 42%),
    rgba(var(--flaeche-rgb), .92);
  border-color: rgba(var(--gold-rgb),.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset,
              0 18px 40px rgba(0,0,0,.28);
}
.luxus.edel .panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: 12px 12px 0 0; pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(var(--gold-rgb),.5), rgba(var(--zweit-rgb),.35), transparent);
  opacity: .5; transition: opacity .3s ease;
}
.luxus.edel .panel:hover::before { opacity: .9; }

/* Was anklickbar ist, hebt sich beim Überfahren an — Kacheln, Karten,
   Auftragszeilen. Die Bewegung ist klein; sie soll bestätigen, dass
   dort etwas passiert, nicht auf sich aufmerksam machen. */
.luxus.edel a.panel,
.luxus.edel .type,
.luxus.edel .card,
.luxus.edel .auftragzeile {
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.luxus.edel a.panel:hover,
.luxus.edel .type:hover,
.luxus.edel .card:hover,
.luxus.edel .auftragzeile:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--gold-rgb),.45);
  box-shadow: 0 16px 34px rgba(0,0,0,.42),
              0 0 0 1px rgba(var(--gold-rgb),.14) inset;
}

/* Die gewählte Kachel bekommt einen ruhigen Schein statt eines Rahmens */
.luxus.edel .type.gewaehlt {
  border-color: rgba(var(--gold-rgb),.55);
  box-shadow: 0 0 26px rgba(var(--gold-rgb),.18) inset;
}

/* Abschnittsüberschriften bekommen einen Strich, der ausläuft */
.luxus.edel .sec-title {
  display: flex; align-items: center; gap: 12px;
}
.luxus.edel .sec-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.35), transparent);
}

/* Der Reiter, auf dem man steht, wird von einer Linie unterstrichen,
   die beim Wechsel aufzieht. */
.luxus.edel .navlink { position: relative; }
.luxus.edel .navlink::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 1px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--gold), rgba(var(--zweit-rgb),.6));
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.luxus.edel .navlink:hover::after,
.luxus.edel .navlink.an::after { transform: scaleX(1); }

/* Eingabefelder antworten mit einem weichen Schein statt eines harten
   Rahmens. */
.luxus.edel .input:focus {
  border-color: rgba(var(--gold-rgb),.6);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.12);
}

/* Wer Bewegung abgestellt hat, bekommt sie nirgends. */
@media (prefers-reduced-motion: reduce) {
  .luxus.edel::before { animation: none; }
  .luxus.edel a.panel:hover,
  .luxus.edel .type:hover,
  .luxus.edel .card:hover,
  .luxus.edel .auftragzeile:hover { transform: none; }
  .luxus.edel .navlink::after { transition: none; }
}




/* ── Red Cycle: Rot und Gold ─────────────────────────────────────
   Die Farben des Wappens. Das Rot führt, das Gold setzt die Kanten
   und die Zahlen. Aufbau und Schrift sind die des Codebreakers.    */

.luxus.welt-redcycle {
  --gold-rgb:   224, 182,  74;   /* Gold, eine Spur heller als im Hotel */
  --blut-rgb:   200,  26,  48;   /* das Rot des Wappens */
  --hell-rgb:   247, 233, 207;

  --gold:       #e0b64a;
  --gold-hell:  #f7dfa2;
  --gold-tief:  #8c6a1e;
  --champagner: #f7e9cf;
  --nacht:      #0d0507;
  --nacht-warm: #180a0c;
  --line:       rgba(224,182,74,.20);
  --blut:       #c81a30;
  --zweit:      #d9744a;
  --zweit-rgb:     217, 116,  74;
  --gold-tief-rgb: 140, 106,  30;
  --flaeche-rgb:    24,  10,  12;
  --kopf-rgb:       13,   5,   7;
}

/* Der Schein: Glut statt Kerzenlicht */
.luxus.welt-redcycle::before {
  background-image:
    radial-gradient(1200px 620px at 10% -14%, rgba(200,26,48,.30), transparent 62%),
    radial-gradient(900px 520px at 90% -6%,   rgba(224,182,74,.16), transparent 60%),
    radial-gradient(1000px 700px at 78% 108%, rgba(200,26,48,.16), transparent 62%),
    radial-gradient(700px 500px at 12% 90%,   rgba(224,182,74,.09), transparent 60%);
}

/* Die Knöpfe tragen Gold auf Rot */
.luxus.welt-redcycle .btn-primary {
  background: linear-gradient(180deg, #e6c05a, #a8781f);
  border-color: rgba(224,182,74,.65);
  color: #1a1204;
}

/* Der Balken über den Kästen läuft von Rot ins Gold */
.luxus.welt-redcycle .stripe {
  background: linear-gradient(90deg,
    rgba(var(--blut-rgb),1), rgba(var(--gold-rgb),.9), transparent) !important;
}

/* Die Fassung hinter dem Bereichsnamen — kleiner und etwas
   zurückgenommen, damit der Name führt. */
.brand-fassung {
  font-size: .62em; letter-spacing: .12em; opacity: .8;
  margin-left: .12em; white-space: nowrap;
}

/* ══ Vindicta — die Mitgliedertafel ══════════════════════════════════
   Eine Tafel mit vierzig Plätzen. Schwarze Felder, weiße Linien, der
   Rang als farbige Fläche — so, wie sie vorher in der Tabelle stand. */

.vind-satz {
  margin-top: 10px; font-size: 13px; line-height: 1.6;
  color: rgba(var(--hell-rgb), .62); max-width: 70ch;
}
.vind-satz strong { color: var(--gold-hell); font-weight: 600; }

.vind-tafel { margin-top: 20px; }

.vind-rahmen {
  overflow-x: auto;
  border: 2px solid rgba(var(--hell-rgb), .85);
  border-radius: 4px;
  background: #000;
}

table.vind {
  width: 100%; border-collapse: collapse;
  font-size: 13px; color: #fff;
  background: #000;
}

table.vind th {
  background: #000;
  color: #fff;
  font-family: var(--serif, Georgia, serif);
  font-size: 15px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center; white-space: nowrap;
  padding: 7px 10px;
  border: 2px solid #fff;
}

table.vind td {
  border: 1px solid rgba(255, 255, 255, .9);
  padding: 0;
  background: #111;
  text-align: center;
  vertical-align: middle;
}

/* Die laufende Nummer */
.vind-nr {
  width: 34px; min-width: 34px;
  font-weight: 700; font-size: 12px;
  color: #fff; background: #000 !important;
  padding: 4px 0 !important;
}

/* Die Felder selbst — sie sollen wie Tabellenzellen wirken,
   nicht wie Formularfelder */
.vind-feld {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 0; outline: 0;
  color: #fff; font: inherit; text-align: center;
  padding: 5px 8px;
  border-radius: 0;
}
.vind-feld::placeholder { color: rgba(255, 255, 255, .28); font-style: italic; }
.vind-feld:focus {
  background: rgba(var(--gold-rgb), .16);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .8);
}

.vind-feld-name { font-weight: 700; }
.vind-feld-name.vind-hervor { color: #f2c94c; }
.vind-feld-handy { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.vind-feld-datum { font-variant-numeric: tabular-nums; color-scheme: dark; }

/* Spaltenbreiten */
.vind-name  { min-width: 220px; }
.vind-handy { width: 130px; min-width: 130px; }
.vind-rang  { width: 190px; min-width: 190px; }
.vind-datum { width: 148px; min-width: 148px; }
.vind-weg   { width: 30px; min-width: 30px; background: #000 !important; }
/* Die Bemerkung der Warteliste nimmt, was übrig ist */
.vind-bemerkung { min-width: 220px; }

/* Das Kreuz, das einen Platz räumt */
.vind-loeschen {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 28px; cursor: pointer;
}
.vind-loeschen input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.vind-loeschen span { font-size: 12px; color: rgba(255, 255, 255, .18); }
.vind-loeschen:hover span { color: rgb(var(--blut-rgb)); }
.vind-loeschen input:checked + span { color: rgb(var(--blut-rgb)); font-weight: 700; }

/* Der Rang: eine farbige Fläche, die Farbe kommt aus dem Schema */
.vind-rangwahl {
  width: 100%; box-sizing: border-box;
  border: 0; outline: 0; border-radius: 3px;
  font: inherit; font-weight: 700;
  letter-spacing: .02em; text-align: center;
  padding: 5px 8px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: opacity .15s ease;
}
.vind-rangwahl:focus { box-shadow: 0 0 0 2px var(--gold); }
.vind-rangwahl option { background: #14100c; color: #f5ead2; font-weight: 600; }

/* Freie Plätze treten zurück, bis jemand hineinschreibt */
.vind-leer td { background: #0a0a0a; }
.vind-leer .vind-rangwahl { opacity: .35; }
.vind-leer:focus-within .vind-rangwahl { opacity: 1; }

/* Die Fußzeile mit Zählwerk und Knopf */
.vind-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px;
}
.vind-stand {
  font-size: 13px; color: rgba(var(--hell-rgb), .6);
  margin-right: auto;
}
.vind-stand.schlimm { color: rgb(var(--blut-rgb)); }
.vind-zahl { color: var(--gold-hell); font-weight: 700; }

@media (max-width: 900px) {
  table.vind th { font-size: 13px; padding: 6px 8px; }
  table.vind { font-size: 12px; }
  .vind-name { min-width: 170px; }
  .vind-rang { width: 160px; min-width: 160px; }
}

/* ══ Hausakte: Mitglieder von der Tafel ══════════════════════════════
   Zwei Listen in der Akte „Vindicta" — was hier steht, kommt von der
   Seite „Vindicta" und wird dort gepflegt, nicht hier. */

.haus-zahl {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(var(--gold-rgb), .16); color: var(--gold-hell);
  letter-spacing: .04em;
}

.haus-satz {
  margin: -4px 0 16px; font-size: 12.5px; line-height: 1.6;
  color: rgba(var(--hell-rgb), .55);
}

.haus-rahmen { overflow-x: auto; }

table.haus-liste {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.haus-liste th {
  text-align: left; padding: 0 12px 8px 0;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .42); font-weight: 600;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.haus-liste td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid rgba(var(--gold-rgb), .07);
  vertical-align: middle;
}
table.haus-liste tr:last-child td { border-bottom: 0; }
table.haus-liste tbody tr:hover td { background: rgba(var(--gold-rgb), .04); }

.haus-name { font-weight: 600; color: var(--hell); }
.haus-name.haus-hervor { color: #f2c94c; }
.haus-datum {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: rgba(var(--hell-rgb), .6);
}

.haus-rang {
  display: inline-block; padding: 2px 10px; border-radius: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.haus-rang-alt { opacity: .55; }

.haus-weg { width: 28px; padding-right: 0 !important; text-align: right; }
.haus-streichen {
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-size: 12px; color: rgba(var(--hell-rgb), .2);
  line-height: 1; border-radius: 3px;
}
.haus-streichen:hover { color: rgb(var(--blut-rgb)); background: rgba(var(--blut-rgb), .1); }

/* Der Rufname neben dem Namen in einer Hausliste */
.haus-alias {
  margin-left:7px; font-family:var(--serif,Georgia,serif); font-style:italic;
  font-size:12px; color:var(--gold); opacity:.6;
}
.haus-leer {
  font-size: 13px; color: rgba(var(--hell-rgb), .4); font-style: italic;
  padding: 6px 0;
}

/* Der Name in der Mitgliederliste führt in die Personenakte */
.haus-verweis {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), .3);
  transition: color .15s ease, border-color .15s ease;
}
.haus-verweis:hover {
  color: var(--gold-hell);
  border-bottom-color: var(--gold);
}
.haus-name span[title] { color: rgba(var(--hell-rgb), .75); }

/* „von der Tafel" — Felder, die nicht von Hand gepflegt werden */
.haus-marke {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(var(--gold-rgb), .12);
  color: rgba(var(--hell-rgb), .5);
  vertical-align: middle;
}
.haus-offen { font-size: 13px; color: rgba(var(--hell-rgb), .4); font-style: italic; }

/* Die gewählten Dateien im Anlegeformular */
.anlagen-vorschau {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.anlagen-stueck {
  display: inline-block; padding: 5px 11px; border-radius: 6px;
  font-size: 12px; line-height: 1.3;
  background: rgba(var(--gold-rgb), .1);
  border: 1px solid rgba(var(--gold-rgb), .22);
  color: rgba(var(--hell-rgb), .8);
  max-width: 100%; overflow-wrap: anywhere;
}

/* ══ Spiral Hotel: Hausverbote ═══════════════════════════════════════ */

.hv-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hv-breit { grid-column: 1 / -1; }
@media (max-width: 620px) { .hv-felder { grid-template-columns: 1fr; } }

.hv-zahl {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(var(--blut-rgb), .18); color: rgba(var(--hell-rgb), .85);
  letter-spacing: .04em;
}

.hv-rahmen { overflow-x: auto; }
table.hv-liste { width: 100%; border-collapse: collapse; font-size: 13px; }
table.hv-liste th {
  text-align: left; padding: 0 12px 8px 0; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .42); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
table.hv-liste td {
  padding: 10px 12px 10px 0; vertical-align: top;
  border-bottom: 1px solid rgba(var(--gold-rgb), .07);
}
table.hv-liste tr:last-child td { border-bottom: 0; }
table.hv-liste tbody tr:hover td { background: rgba(var(--blut-rgb), .05); }

.hv-name { font-weight: 700; color: var(--hell); white-space: nowrap; }
.hv-telefon, .hv-datum { font-variant-numeric: tabular-nums; white-space: nowrap;
  color: rgba(var(--hell-rgb), .62); }
.hv-grund { color: rgba(var(--hell-rgb), .72); min-width: 220px; line-height: 1.55; }
.hv-wer { color: rgba(var(--hell-rgb), .45); white-space: nowrap; }
.hv-weg { width: 1%; white-space: nowrap; padding-right: 0 !important; }
.hv-aufheben { font-size: 11px; padding: 5px 12px; }

.hv-leer { font-size: 13px; color: rgba(var(--hell-rgb), .4); font-style: italic; }

/* ══ Exkommunikation ═════════════════════════════════════════════════ */

.exko-knopf { border-color: rgba(var(--blut-rgb), .45); }
.exko-knopf:hover {
  border-color: rgb(var(--blut-rgb));
  background: rgba(var(--blut-rgb), .12);
}

/* ── Das Overlay der Akten ──────────────────────────────────────────
   Dasselbe Fenster für alle Akten — Personen, Routen, Orte, Aufträge:
   Exkommunikation, Aktenblatt und FIB-Ermittlungsakte. Der Grund
   dahinter tritt zurück und wird unscharf, das Fenster fährt kurz
   heran. Auf dem Handy sitzt es unten und schiebt sich hoch — wie man
   es dort erwartet.                                                 */

@keyframes schirmAuf { from { opacity: 0; } to { opacity: 1; } }
@keyframes kastenAuf {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes kastenHoch {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

.exko-schirm {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--gold-rgb), .10), transparent 70%),
    rgba(4, 3, 6, .74);
  backdrop-filter: blur(6px) saturate(.9);
  animation: schirmAuf .22s ease both;
}
.exko-schirm[hidden] { display: none; }

.exko-kasten {
  position: relative; width: 100%; max-width: 560px;
  padding: 26px 26px 24px;
  border: 1px solid rgba(var(--gold-rgb), .22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .07), rgba(var(--flaeche-rgb), 0) 46%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .99), rgba(var(--kopf-rgb), .99));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 40px 90px -30px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(0, 0, 0, .4);
  max-height: min(88vh, 900px); overflow-y: auto; overscroll-behavior: contain;
  animation: kastenAuf .28s cubic-bezier(.2, .8, .3, 1) both;
}
/* Eine Lichtkante an der Oberkante, wie bei den Kästen der Seite */
.exko-kasten::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, transparent,
    rgba(var(--gold-rgb), .55), rgba(var(--zweit-rgb), .4), transparent);
}
/* Der Kopf des Fensters: Zeichen, Titel und das ✕. Er bleibt beim
   Scrollen stehen, damit man immer weiß, worin man gerade steht. */
.exko-kopf {
  position: sticky; top: -26px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  margin: -26px -26px 16px; padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(var(--gold-rgb), .16);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg,
    rgba(var(--gold-rgb), .10), rgba(var(--kopf-rgb), .98) 90%);
  backdrop-filter: blur(4px);
}
.exko-kopf .sec-title { margin: 0; flex: 1; }
.exko-zeichen {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 11px; font-size: 17px;
  color: var(--gold-hell);
  background: rgba(var(--gold-rgb), .14);
  border: 1px solid rgba(var(--gold-rgb), .3);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), .15) inset;
}
.exko-zu {
  flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 14px; line-height: 1; color: rgba(var(--hell-rgb), .6);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--gold-rgb), .2);
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.exko-zu:hover {
  color: #fff; background: rgba(var(--blut-rgb), .28);
  border-color: rgba(var(--blut-rgb), .6); transform: rotate(90deg);
}
.exko-zu:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .3); }

/* Die Knopfreihe am Fuß sitzt auf einer abgesetzten Leiste */
.exko-kasten .exko-fuss,
.exko-kasten > div:last-child:has(> .btn) {
  position: sticky; bottom: -24px;
  margin: 18px -26px -24px; padding: 16px 26px 20px;
  border-top: 1px solid rgba(var(--gold-rgb), .14);
  background: linear-gradient(0deg,
    rgba(var(--kopf-rgb), .99) 70%, rgba(var(--kopf-rgb), 0));
}
.exko-kasten::-webkit-scrollbar { width: 10px; }
.exko-kasten::-webkit-scrollbar-track { background: transparent; }
.exko-kasten::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), .22); border-radius: 5px;
}
.exko-kasten::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), .4); }

@media (max-width: 640px) {
  .exko-schirm { padding: 0; align-items: flex-end; }
  .exko-kasten {
    max-width: none; max-height: 92vh; padding: 20px 18px 22px;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    animation-name: kastenHoch;
  }
  .exko-kasten > .sec-title:first-child {
    top: -20px; margin: -20px -18px 12px; padding: 16px 18px 12px;
    border-radius: 20px 20px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exko-schirm, .exko-kasten { animation: none; }
}
.exko-satz {
  margin: -4px 0 16px; font-size: 12.5px; line-height: 1.65;
  color: rgba(var(--hell-rgb), .58);
}
.exko-stand { margin-top: 10px; font-size: 12.5px; color: rgba(var(--hell-rgb), .55); }
.exko-stand.schlimm { color: rgb(var(--blut-rgb)); }

/* ══ FIB-Ermittlungsakte ═════════════════════════════════════════════ */

.fib-knopf { border-color: rgba(205, 168, 109, .5); }
.fib-knopf:hover { border-color: #cda86d; background: rgba(205, 168, 109, .12); }
.fib-kasten { max-width: 640px; border-color: rgba(205, 168, 109, .45); }
/* .btn setzt display — das hidden-Attribut soll trotzdem greifen */
.fib-kasten [hidden] { display: none !important; }
.fib-felder { margin-top: 6px; }
.fib-felder .label { display: block; margin-top: 12px; }
.fib-felder textarea.input {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px; line-height: 1.55;
}

/* ── Sortierbare Tabellen (haus.js) ── */
.sortierknopf {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.sortierknopf:hover { color: var(--gold); }
.sortierknopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.sortierpfeil { font-size: .8em; opacity: .35; }
.sortierpfeil::after { content: '↕'; }
th[aria-sort] .sortierpfeil { opacity: .9; color: var(--gold); }
th[aria-sort="ascending"] .sortierpfeil::after { content: '▲'; }
th[aria-sort="descending"] .sortierpfeil::after { content: '▼'; }

/* ══ Red Cycle: Stand eines Mitglieds ════════════════════════════════ */

.mitgl-mit-stand { align-items: center; flex-wrap: wrap; gap: 12px; }
.mitgl-mit-stand .mitgl-text { flex: 1 1 180px; min-width: 0; }

.rc-stand {
  display: inline-block; margin-top: 4px; padding: 2px 10px;
  border: 1px solid; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;
}
.rc-wer {
  display: block; margin-top: 4px;
  font-size: 10.5px; color: rgba(var(--hell-rgb), .38);
}
.rc-standwahl { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.rc-standwahl select.input { font-size: 12px; padding: 6px 10px; min-width: 170px; }
.rc-setzen { font-size: 11px; padding: 5px 12px; }

@media (max-width: 620px) {
  .rc-standwahl { flex: 1 1 100%; }
  .rc-standwahl select.input { width: 100%; }
}

/* ══ Kontobuch des Codebreaker ═══════════════════════════════════════ */

.kasse { text-decoration: none; }
.kasse-stand { font-variant-numeric: tabular-nums; font-size: 22px; }
.kasse-zeile {
  margin-top: 6px; font-size: 11px;
  color: rgba(var(--hell-rgb), .42); font-variant-numeric: tabular-nums;
}

.konto-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.konto-breit { grid-column: 1 / -1; }
@media (max-width: 820px) { .konto-felder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .konto-felder { grid-template-columns: 1fr; } }

.konto-hinweis { margin-top: 10px; font-size: 11px; color: rgba(var(--hell-rgb), .38); }
.konto-zahl {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: rgba(var(--gold-rgb), .16); color: var(--gold-hell);
}
.konto-leer { font-size: 13px; color: rgba(var(--hell-rgb), .4); font-style: italic; }

.konto-rahmen { overflow-x: auto; }
table.konto-blatt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.konto-blatt th {
  text-align: left; padding: 0 12px 8px 0; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .42); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
table.konto-blatt td {
  padding: 10px 12px 10px 0; vertical-align: top;
  border-bottom: 1px solid rgba(var(--gold-rgb), .07);
}
table.konto-blatt tr:last-child td { border-bottom: 0; }
table.konto-blatt tbody tr:hover td { background: rgba(var(--gold-rgb), .04); }

.konto-rechts { text-align: right; padding-right: 0 !important; }
.konto-datum { white-space: nowrap; font-variant-numeric: tabular-nums;
  color: rgba(var(--hell-rgb), .6); }
.konto-kasse {
  display: inline-block; padding: 2px 9px; border: 1px solid; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.konto-zweck { color: var(--hell); min-width: 200px; line-height: 1.5; }
.konto-bemerkung { display: block; margin-top: 2px; font-size: 12px;
  color: rgba(var(--hell-rgb), .5); }
.konto-wer { display: block; margin-top: 3px; font-size: 10.5px;
  color: rgba(var(--hell-rgb), .32); }
.konto-betrag { font-variant-numeric: tabular-nums; font-weight: 700;
  white-space: nowrap; font-size: 14px; }
.konto-weg { width: 1%; padding-right: 0 !important; text-align: right; }
.konto-streichen, .ausg-streichen {
  background: none; border: 0; cursor: pointer; padding: 2px 6px;
  font-size: 12px; color: rgba(var(--hell-rgb), .2); line-height: 1; border-radius: 3px;
}
.konto-streichen:hover, .ausg-streichen:hover {
  color: rgb(var(--blut-rgb)); background: rgba(var(--blut-rgb), .1);
}

/* ══ Lagerausgabe ════════════════════════════════════════════════════ */

.ausg-satz { margin: -4px 0 16px; font-size: 12.5px; line-height: 1.6;
  color: rgba(var(--hell-rgb), .55); }
.ausg-zahl {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: rgba(var(--gold-rgb), .16); color: var(--gold-hell);
}
.ausg-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ausg-ware { grid-column: span 2; }
.ausg-breit { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .ausg-felder { grid-template-columns: repeat(2, 1fr); }
  .ausg-ware { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .ausg-felder { grid-template-columns: 1fr; } }

.ausg-form { margin-bottom: 22px; }
.ausg-leer { font-size: 13px; color: rgba(var(--hell-rgb), .4); font-style: italic; }
.ausg-rahmen { overflow-x: auto; }
table.ausg-liste { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ausg-liste th {
  text-align: left; padding: 0 12px 8px 0; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .42); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
table.ausg-liste td {
  padding: 10px 12px 10px 0; vertical-align: top;
  border-bottom: 1px solid rgba(var(--gold-rgb), .07);
}
table.ausg-liste tr:last-child td { border-bottom: 0; }
table.ausg-liste tbody tr:hover td { background: rgba(var(--gold-rgb), .04); }
/* Die Menge steht mittig — auch die Überschrift darüber, sonst
   stünde die Zahl unter einem linksbündigen Wort. */
.ausg-mitte,
table.ausg-liste th.ausg-mitte {
  text-align: center; white-space: nowrap;
  padding-left: 12px; padding-right: 12px;
}
.ausg-datum { white-space: nowrap; font-variant-numeric: tabular-nums;
  color: rgba(var(--hell-rgb), .6); }
.ausg-name { font-weight: 600; color: var(--hell); }
.ausg-menge-zahl { font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--gold-hell); white-space: nowrap; }
.ausg-wer { color: rgba(var(--hell-rgb), .8); white-space: nowrap; }
.ausg-grund { color: rgba(var(--hell-rgb), .65); min-width: 200px; line-height: 1.5; }
.ausg-von { display: block; margin-top: 3px; font-size: 10.5px;
  color: rgba(var(--hell-rgb), .32); }
.ausg-weg { width: 1%; padding-right: 0 !important; text-align: right; }

/* Das Dollarzeichen trägt die Farbe seiner Kasse */
.kasse-kopf { display: flex; align-items: baseline; gap: 8px; }
.kasse-zeichen {
  font-size: 22px; font-weight: 700; line-height: 1;
  font-family: var(--serif, Georgia, serif);
}
.konto-zeichen { font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════
   CODEBREAKER — aufgewertet
   ═══════════════════════════════════════════════════════════════════════

   Derselbe Aufbau wie zuvor: Kopf, zwei Menüreihen, mittiger Inhalt.
   Neu ist die Ausführung — ruhigere Flächen, klarere Zustände, mehr Luft
   und eine Schrift, die Ordnung hält. Die Farben bleiben: Schwarz und
   Schwarzlicht kommen weiter aus --gold-rgb, --blut-rgb und --hell-rgb.

   Alles hängt an body.edel — Red Cycle und Spiral Hotel
   bleiben unberührt.
   ─────────────────────────────────────────────────────────────────── */

body.edel {
  --cb-linie:   rgba(var(--gold-rgb), .15);
  --cb-flaeche: rgba(var(--flaeche-rgb), .86);
  --cb-kopf:    rgba(var(--kopf-rgb), .985);
  --cb-rund: 14px;
}

/* ── Kopf ─────────────────────────────────────────────────────────── */

body.edel header {
  background: var(--cb-kopf);
  border-bottom: 1px solid var(--cb-linie);
  box-shadow: 0 1px 0 rgba(var(--gold-rgb), .06), 0 8px 24px rgba(0, 0, 0, .35);
}
body.edel .hrow { padding: 13px 0; gap: 18px; }
body.edel .logo img { height: 58px; max-width: 126px; }
body.edel .brand-1 { font-size: 22px; }
body.edel .brand-2 { font-size: 17px; }

/* Die Angaben rechts als eine ruhige Gruppe statt vieler Einzelteile */
body.edel .kopfrechts { gap: 10px; }
body.edel .navname {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px;
  background: rgba(var(--gold-rgb), .07);
  border: 1px solid var(--cb-linie);
}
/* In der Kapsel sitzt das Bild ganz links und füllt sie fast aus */
body.edel .navbild { width: 34px; height: 34px; }
body.edel .navbild-ersatz { font-size: 16px; }
body.edel .navname strong { font-size: 13px; }
@media (max-width: 620px) {
  body.edel .navbild { width: 26px; height: 26px; }
  body.edel .navbild-ersatz { font-size: 12px; }
  body.edel .navname strong { font-size: 11px; }
}
body.edel .kopfknopf,
body.edel .online,
body.edel .kopfrechts .chip { border-radius: 999px; }
body.edel .uhr {
  padding-left: 14px; margin-left: 2px;
  border-left: 1px solid var(--cb-linie);
}

/* ── Die zwei Menüreihen ──────────────────────────────────────────── */

body.edel .hauptnav {
  border-top: 1px solid var(--cb-linie);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .05), rgba(0, 0, 0, .22));
}
body.edel .navzeile { gap: 6px; padding: 7px 0; align-items: center; }
body.edel .navzeile-zwei {
  border-top: 1px solid rgba(var(--gold-rgb), .08);
  padding-top: 6px;
}

/* Aus Textlinks werden Schaltflächen: gleiche Höhe, weiche Rundung und
   ein Zustand, den man auf einen Blick sieht. */
body.edel .navlink {
  font-size: 16px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .58);
  padding: 10px 19px;
  border: 1px solid transparent; border-radius: 999px;
  transition: color .16s, background .16s, border-color .16s;
  text-shadow: none;
}
body.edel .navlink:hover {
  color: var(--hell);
  background: rgba(var(--gold-rgb), .09);
}
body.edel .navlink.an {
  color: #fff;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .26), rgba(var(--gold-rgb), .13));
  border-color: rgba(var(--gold-rgb), .45);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .12);
  text-shadow: 0 0 14px rgba(var(--gold-rgb), .5);
}

/* ── Flächen ──────────────────────────────────────────────────────── */

body.edel .panel {
  position: relative;
  background: var(--cb-flaeche);
  border-color: var(--cb-linie);
  border-radius: var(--cb-rund);
}
/* Ein Lichtsaum an der Oberkante gibt Tiefe, ohne den Grund zu verdecken */
body.edel .panel::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--cb-rund) var(--cb-rund) 0 0;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .3), transparent);
  pointer-events: none;
}
body.edel .panel.empty::after { display: none; }

/* ── Schrift ──────────────────────────────────────────────────────── */

body.edel h1 { font-size: 29px; letter-spacing: -.015em; }
body.edel .seal {
  font-size: 9.5px; letter-spacing: .3em;
  color: rgba(var(--gold-rgb), .75);
}
body.edel .sec-title {
  font-size: 11.5px; letter-spacing: .2em;
  color: rgba(var(--hell-rgb), .5);
}
body.edel .muted { color: rgba(var(--hell-rgb), .45); }
body.edel .label { color: rgba(var(--hell-rgb), .5); }

/* ── Kacheln, Reiter, Chips ───────────────────────────────────────── */

body.edel .type {
  border-radius: var(--cb-rund); padding: 16px 18px;
  transition: transform .18s, border-color .18s, background .18s;
}
body.edel .type:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--gold-rgb), .3);
}
body.edel .type.gewaehlt {
  border-color: rgba(var(--gold-rgb), .45);
  background: rgba(var(--gold-rgb), .09);
}

body.edel .tabs { border-bottom-color: var(--cb-linie); }
body.edel .tab {
  border-radius: 10px 10px 0 0;
  transition: background .16s, color .16s;
}
body.edel .tab:hover { background: rgba(var(--gold-rgb), .07); }
body.edel .tab.active { background: rgba(var(--gold-rgb), .1); }

body.edel .chip,
body.edel .badge {
  border-radius: 999px; border-color: rgba(var(--gold-rgb), .22);
}
body.edel .chip { transition: border-color .15s, background .15s; }
body.edel .chip:hover { border-color: rgba(var(--gold-rgb), .45); }

/* ── Felder und Knöpfe ────────────────────────────────────────────── */

body.edel .input {
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  border-color: rgba(var(--gold-rgb), .18);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
body.edel .input:hover { border-color: rgba(var(--gold-rgb), .3); }
body.edel .input:focus {
  border-color: rgba(var(--gold-rgb), .6);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .13);
  background: rgba(0, 0, 0, .42);
  outline: none;
}
body.edel .btn {
  border-radius: 10px;
  transition: transform .12s, border-color .16s, background .16s, box-shadow .16s;
}
body.edel .btn:hover { transform: translateY(-1px); }
body.edel .btn:active { transform: translateY(0); }
body.edel .btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .3);
}

/* ── Tabellen, Meldungen, Fuß ─────────────────────────────────────── */

body.edel .panel table:not(.lager):not(.vind) th {
  border-bottom-color: var(--cb-linie);
  color: rgba(var(--hell-rgb), .42);
}
body.edel .panel table:not(.lager):not(.vind) td {
  border-bottom-color: rgba(var(--gold-rgb), .06);
}
body.edel .meldung { border-radius: 10px; }
body.edel .types { gap: 14px; }
body.edel footer {
  border-top: 1px solid var(--cb-linie);
  margin-top: 44px; padding-top: 24px;
}

/* ── Rollbalken ───────────────────────────────────────────────────── */

body.edel ::-webkit-scrollbar { width: 10px; height: 10px; }
body.edel ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); }
body.edel ::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), .22); border-radius: 5px;
}
body.edel ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-rgb), .4);
}

/* ── Schmale Geräte ───────────────────────────────────────────────── */

@media (max-width: 820px) {
  body.edel .navlink { font-size: 14px; padding: 8px 14px; letter-spacing: .08em; }
  body.edel .navzeile { gap: 5px; }
  body.edel .logo img { height: 46px; max-width: 100px; }
  body.edel .brand-1 { font-size: 18px; }
  body.edel .brand-2 { font-size: 14px; }
  body.edel h1 { font-size: 24px; }
}

/* ══ Auswertung ══════════════════════════════════════════════════════
   Eine Frage oben, darunter der Bericht. Alles auf dieser Seite ist
   Lesestoff — darum breite Zeilen, ruhige Flächen und nur dort Farbe,
   wo etwas zu beachten ist. */

.aw-form { display: block; }
.aw-frage {
  width: 100%; resize: vertical; min-height: 66px;
  font-size: 15px; line-height: 1.5;
}
.aw-knopfzeile {
  display: flex; gap: 10px; align-items: center; margin-top: 12px;
  flex-wrap: wrap;
}

.aw-beispiele {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid rgba(var(--gold-rgb), .1);
}
.aw-beispiel {
  padding: 5px 11px; border-radius: 999px; text-decoration: none;
  font-size: 12px; line-height: 1.4;
  border: 1px solid rgba(var(--gold-rgb), .22);
  background: rgba(var(--gold-rgb), .05);
  color: rgba(var(--hell-rgb), .68);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.aw-beispiel:hover {
  color: var(--gold-hell); border-color: rgba(var(--gold-rgb), .5);
  background: rgba(var(--gold-rgb), .12);
}

/* Die Erklärung, solange noch nichts gefragt wurde */
.aw-kann {
  display: grid; gap: 18px 26px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.aw-kann p { font-size: 13px; line-height: 1.65; color: rgba(var(--hell-rgb), .6); }
.aw-kann-titel {
  font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold) !important; margin-bottom: 5px; font-weight: 600;
}
.aw-hinweis {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(var(--gold-rgb), .1);
  font-size: 12.5px; line-height: 1.65; color: rgba(var(--hell-rgb), .45);
}

/* ── Der Bericht ──────────────────────────────────────────────── */

.aw-gefragt {
  margin-top: 4px; font-family: var(--serif, Georgia, serif);
  font-size: 19px; line-height: 1.45; color: rgb(var(--hell-rgb));
}
.aw-gelesen {
  margin-top: 10px; font-size: 12px; color: rgba(var(--hell-rgb), .45);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.aw-marke {
  padding: 2px 9px; border-radius: 999px; font-size: 11px;
  background: rgba(var(--gold-rgb), .12); color: var(--gold-hell);
  border: 1px solid rgba(var(--gold-rgb), .25);
}

.aw-abschnitt {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(var(--gold-rgb), .12);
}
.aw-titel {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 12px;
}

.aw-daten {
  display: grid; gap: 2px 26px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.aw-daten > div {
  padding: 7px 0; border-bottom: 1px solid rgba(var(--gold-rgb), .07);
}
.aw-daten dt {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .4); font-weight: 600; margin-bottom: 3px;
}
.aw-daten dd { font-size: 13.5px; line-height: 1.55; color: rgb(var(--hell-rgb)); }

.aw-satz {
  font-size: 13.5px; line-height: 1.7; color: rgba(var(--hell-rgb), .78);
  margin-bottom: 8px; max-width: 88ch;
}
.aw-satz:last-child { margin-bottom: 0; }

.aw-verweise {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px;
}

/* Die Einschätzung trägt einen goldenen Balken — sie ist der Teil,
   für den die Seite gemacht ist. */
.aw-wertung {
  border-top: 0; margin-top: 26px; padding: 18px 20px;
  border-left: 3px solid var(--gold);
  background: rgba(var(--gold-rgb), .05);
  border-radius: 0 10px 10px 0;
}
.aw-wertung .aw-satz { color: rgb(var(--hell-rgb)); }

/* Was offenblieb, steht zurückhaltender da */
.aw-luecke {
  border-top: 0; margin-top: 14px; padding: 16px 20px;
  border-left: 3px solid rgba(var(--hell-rgb), .18);
  background: rgba(255, 255, 255, .025);
  border-radius: 0 10px 10px 0;
}
.aw-luecke .aw-titel { color: rgba(var(--hell-rgb), .45); }
.aw-luecke .aw-satz { color: rgba(var(--hell-rgb), .55); font-size: 13px; }

.aw-fuss {
  margin-top: 24px; padding-top: 14px;
  border-top: 1px solid rgba(var(--gold-rgb), .1);
  font-size: 11.5px; color: rgba(var(--hell-rgb), .35); line-height: 1.6;
}

@media (max-width: 620px) {
  .aw-daten { grid-template-columns: 1fr; }
  .aw-gefragt { font-size: 17px; }
}

/* Der Hinweis neben dem Knopf „Auswertung als geschwärzte Akte“ */
.aw-blattstand {
  margin-left: 12px; font-size: 12.5px; color: rgba(var(--hell-rgb), .55);
}
.aw-blattstand.schlimm { color: var(--blood-soft); }

/* Reicht das Erfasste nicht, steht das nicht nebenbei, sondern deutlich */
.aw-mehrdaten {
  border-top: 0; margin-top: 16px; padding: 18px 20px;
  border-left: 3px solid var(--blood-bright);
  background: rgba(200, 32, 58, .07);
  border-radius: 0 10px 10px 0;
}
.aw-mehrdaten .aw-titel { color: var(--blood-soft); }
.aw-mehrdaten .aw-satz { color: rgb(var(--hell-rgb)); }

/* Woher der Bericht stammt — Regeln oder KI */
.aw-quelle {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  border-radius: 999px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: none;
  border: 1px solid rgba(var(--hell-rgb), .18);
  color: rgba(var(--hell-rgb), .5);
}
.aw-quelle-ki {
  border-color: rgba(var(--gold-rgb), .45);
  background: rgba(var(--gold-rgb), .12);
  color: var(--gold-hell);
}
.aw-kihinweis {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  border-left: 3px solid rgba(var(--hell-rgb), .2);
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px; line-height: 1.6; color: rgba(var(--hell-rgb), .55);
}
.aw-schalter {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgba(var(--hell-rgb), .55); cursor: pointer;
}
.aw-schalter input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }

/* Ergebnis des KI-Selbsttests */
.aw-pruefung {
  margin-top: 16px; padding: 12px 16px; border-radius: 9px;
  font-size: 13px; line-height: 1.6;
}
.aw-pruefung strong { display: block; margin-bottom: 3px; }
.aw-pruefung-gut {
  border-left: 3px solid #3fae63; background: rgba(63, 174, 99, .09);
  color: rgba(var(--hell-rgb), .8);
}
.aw-pruefung-gut strong { color: #6ee7b7; }
.aw-pruefung-schlecht {
  border-left: 3px solid var(--blood-bright); background: rgba(200, 32, 58, .08);
  color: rgba(var(--hell-rgb), .8);
}
.aw-pruefung-schlecht strong { color: var(--blood-soft); }
.aw-beispiel-pruefen { border-style: dashed; }

/* Der Schalter für die KI-Einschätzung im Exkommunikationskasten */
.exko-schalter {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 12px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .22);
  background: rgba(var(--gold-rgb), .05);
}
.exko-schalter input { margin-top: 2px; accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
.exko-schalter span { font-size: 12.5px; line-height: 1.6; color: rgba(var(--hell-rgb), .6); }
.exko-schalter strong { display: block; margin-bottom: 2px; color: var(--gold-hell); font-size: 13px; }

/* ══ Ungelesenes im Menü ═════════════════════════════════════════════ */
.navzahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
  border-radius: 999px; background: #c8203a; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px rgba(200, 32, 58, .25);
  animation: navzahl-puls 2.2s ease-in-out infinite;
}
@keyframes navzahl-puls {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 32, 58, .25); }
  50%      { box-shadow: 0 0 0 5px rgba(200, 32, 58, .05); }
}

/* ══ Die Knöpfe zu den anderen Bereichen ═════════════════════════════
   Sie sind der einzige Weg hinüber — also dürfen sie auffallen. */
.kopfknopf.welt-knopf {
  position: relative; overflow: hidden;
  gap: 9px; padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid rgba(var(--gold-rgb), .3);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .10), rgba(var(--gold-rgb), .03));
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s ease,
              box-shadow .18s ease, background .18s ease;
}
.kopfknopf.welt-knopf img { width: 22px; height: 22px; }
.welt-name { white-space: nowrap; }

/* Der Pfeil sitzt zunächst zusammengeschoben und fährt beim Zeigen aus */
.welt-pfeil {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden;
  transform: translateX(-4px);
  transition: max-width .22s ease, opacity .18s ease, transform .22s ease;
}
.kopfknopf.welt-knopf:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--gold-rgb), .65);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .20), rgba(var(--gold-rgb), .07));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--gold-rgb), .18);
}
.kopfknopf.welt-knopf:hover .welt-pfeil {
  max-width: 22px; opacity: .85; transform: translateX(0);
}
.kopfknopf.welt-knopf:active { transform: translateY(0); }

/* Ein Lichtstreif wandert beim Zeigen einmal über den Knopf */
.kopfknopf.welt-knopf::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%,
              rgba(255, 255, 255, .13) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.kopfknopf.welt-knopf:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  .kopfknopf.welt-knopf, .kopfknopf.welt-knopf::after, .welt-pfeil { transition: none; }
  .kopfknopf.welt-knopf:hover { transform: none; }
  .navzahl { animation: none; }
}

@media (max-width: 700px) {
  .kopfknopf.welt-knopf { padding: 7px 12px; font-size: 12.5px; }
  .kopfknopf.welt-knopf img { width: 18px; height: 18px; }
}

/* Umtragen zwischen Personen- und Ereignisakte */
.artwahl { display: flex; gap: 8px; flex-wrap: wrap; }
.artzeile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .22);
  background: rgba(var(--gold-rgb), .04);
  font-size: 13px; color: rgba(var(--hell-rgb), .7);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.artzeile input { accent-color: var(--gold); cursor: pointer; }
.artzeile:has(input:checked) {
  border-color: rgba(var(--gold-rgb), .6);
  background: rgba(var(--gold-rgb), .14);
  color: var(--gold-hell);
}

/* Den Bericht in eine Akte schreiben */
.aw-uebernahmezeile {
  display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center;
}
.aw-uebernahmezeile select { flex: 1 1 280px; max-width: 480px; }

/* Bilder aus einem Vermerk ins Bildmaterial holen */
.bild-alle { margin: 10px 0 4px; }
.bild-alle-knopf {
  background: rgba(var(--gold-rgb), .08); border: 1px solid rgba(var(--gold-rgb), .28);
  color: var(--gold-hell); border-radius: 999px; padding: 5px 13px;
  font-size: 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.bild-alle-knopf:hover { background: rgba(var(--gold-rgb), .18); border-color: rgba(var(--gold-rgb), .55); }
.bildhoch {
  position: absolute; top: 6px; left: 6px;
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .4);
  background: rgba(10, 8, 6, .75); color: var(--gold-hell);
  font-size: 13px; line-height: 1; opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.galleriebild:hover .bildhoch { opacity: 1; }
.bildhoch:hover { background: rgba(var(--gold-rgb), .3); }

/* Der KI-Knopf im Exkommunikationskasten */
.exko-kizeile { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.exko-kistand { font-size: 12.5px; color: rgba(var(--hell-rgb), .55); }
.exko-kistand.schlimm { color: var(--blood-soft); }
.exko-kisatz { font-size: 11.5px; line-height: 1.55; color: rgba(var(--hell-rgb), .38); margin-top: 6px; }

/* Welches Bild oben auf der Akte steht */
.profilmarke {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(var(--gold-rgb), .9); color: #16110a;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.galleriebild.ist-profil a { border-color: rgba(var(--gold-rgb), .55); }
.profilknopf {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .45);
  background: rgba(10, 8, 6, .78); color: var(--gold-hell);
  font-size: 13px; line-height: 1; opacity: 0;
  transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.galleriebild:hover .profilknopf { opacity: 1; }
.profilknopf:hover { background: rgba(var(--gold-rgb), .35); transform: scale(1.1); }

/* ══ Der Kasten vor „Akte als Bild speichern" ════════════════════════ */
.blatt-kasten { max-width: 620px; }
.blatt-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; margin-bottom: 6px;
}
.blatt-alle { display: flex; gap: 6px; }
.blatt-mini {
  background: none; border: 1px solid rgba(var(--gold-rgb), .28);
  color: rgba(var(--hell-rgb), .6); border-radius: 999px;
  padding: 2px 10px; font-size: 11px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.blatt-mini:hover { color: var(--gold-hell); border-color: rgba(var(--gold-rgb), .6); }

.blatt-liste {
  max-height: 210px; overflow-y: auto;
  border: 1px solid rgba(var(--gold-rgb), .18); border-radius: 9px;
  padding: 4px;
}
.blatt-zeile {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 9px; border-radius: 7px; cursor: pointer;
  transition: background .12s ease;
}
.blatt-zeile:hover { background: rgba(var(--gold-rgb), .06); }
.blatt-zeile input { margin-top: 3px; accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
.blatt-zeile:has(input:checked) { background: rgba(var(--gold-rgb), .09); }
.blatt-zeileninhalt {
  display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: baseline;
  font-size: 12.5px; line-height: 1.5; min-width: 0;
}
.blatt-art {
  font-size: 10px; letter-spacing: .1em; padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--gold-rgb), .14); color: var(--gold-hell); white-space: nowrap;
}
.blatt-wann { font-variant-numeric: tabular-nums; color: rgba(var(--hell-rgb), .45); white-space: nowrap; }
.blatt-titel { color: rgba(var(--hell-rgb), .82); overflow-wrap: anywhere; }
.blatt-bilder { font-size: 11px; color: rgba(var(--hell-rgb), .4); white-space: nowrap; }

/* Die Bildauswahl im Blattkasten */
.blatt-bildwahl {
  display: grid; gap: 8px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  max-height: 190px; overflow-y: auto;
  border: 1px solid rgba(var(--gold-rgb), .18); border-radius: 9px; padding: 8px;
}
.blatt-bild {
  position: relative; display: block; cursor: pointer;
  border-radius: 7px; overflow: hidden;
  border: 2px solid transparent; transition: border-color .15s ease, opacity .15s ease;
  opacity: .45;
}
.blatt-bild img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.blatt-bild input {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer;
}
.blatt-bild:has(input:checked) { opacity: 1; border-color: rgba(var(--gold-rgb), .6); }
.blatt-bildmarke {
  position: absolute; bottom: 4px; left: 4px; z-index: 2;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(var(--gold-rgb), .9); color: #16110a;
  font-size: 10px; font-weight: 700; line-height: 1.5;
}

/* ══ THE SPIRAL — die Mitgliedschaft des Hotels ══════════════════════
   Schwarz und Gold wie die Karte, die ausgegeben wird. */

.club-kopf { display: grid; gap: 26px; padding: 26px 24px; align-items: center;
             grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }

/* Die Karte selbst — Maße wie eine Scheckkarte.

   Sitz und Größe der Teile sind dieselben wie auf dem Bild, das
   spiralkarte.php zeichnet: dort in Bruchteilen der Kartenbreite
   gerechnet, hier über cqw — ein Prozent der Kartenbreite. So sieht das
   Muster auf der Seite aus wie das Stück, das herunterkommt, egal wie
   breit die Spalte gerade ist. Wo cqw fehlt, greifen die px-Werte
   darüber; dann sitzt es etwas gröber, aber es sitzt. */
.club-karte {
  position: relative; container-type: inline-size;
  aspect-ratio: 1.586; border-radius: 14px;
  background:
    radial-gradient(120% 90% at 30% 10%, #1a1712 0%, #0b0906 55%, #060504 100%);
  border: 1px solid rgba(201, 162, 74, .3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
}
/* Ein feines Korn, damit die Fläche nicht flach wirkt */
.club-karte::before {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.4) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}
/* Nur die Spirale, nicht der Schriftzug darunter: Das Logo des Hauses
   ist quadratisch, die Spirale sitzt im oberen Drittel. */
.club-spirale {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  width: 30%; aspect-ratio: 1;
  overflow: hidden; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
.club-spirale img { position: absolute; width: 205%; left: -52.4%; top: -28%; display: block; }

.club-name {
  position: absolute; top: 66%; left: 0; right: 0; text-align: center;
  color: #c9a24a; text-transform: uppercase; font-weight: 500;
  font-family: var(--serif, Georgia, serif);
  font-size: 11px; letter-spacing: .62em; text-indent: .62em;
  font-size: max(9px, 2.4cqw);
}
/* Der kurze Strich zwischen Schriftzug und Namen */
.club-strich {
  position: absolute; top: 75.5%; left: 50%; transform: translateX(-50%);
  width: 14.8%; height: 1px;
  background: linear-gradient(90deg,
    rgba(201,162,74,0), rgba(201,162,74,.55), rgba(201,162,74,0));
}
.club-muster {
  position: absolute; top: 80%; left: 0; right: 0; text-align: center;
  color: #e6c87e; font-weight: 600;
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  font-size: max(12px, 3.2cqw);
}
.club-kartenfuss {
  position: absolute; top: 91.5%; left: 5.7%; right: 5.7%;
  display: flex; justify-content: space-between; gap: 8px;
  color: rgba(201, 162, 74, .62); text-transform: uppercase; font-weight: 600;
  font-size: 7px; letter-spacing: .28em;
  font-size: max(8px, 1.2cqw);
  white-space: nowrap;
}
.club-kartensatz {
  margin-top: 10px; font-size: 11.5px; line-height: 1.6;
  color: rgba(var(--hell-rgb), .4);
}

/* Die Karte als Bild — Vorder- und Rückseite, wie sie gedruckt wird.

   Auf der Rückseite stehen Kennung und Monat an den Stellen, die die
   Vorlage dafür vorsieht; ihr dunkler Grund deckt die Platzhalter der
   Vorlage ab. Sitzt einer der beiden Werte nicht genau, genügt es,
   --nr-x/--nr-y bzw. --seit-x/--seit-y hier zu verschieben — alles
   andere bleibt, wie es ist. */
.club-bildkarten { display: grid; gap: 16px; }
.club-bildkarte {
  margin: 0;
  /* Ausgemessen an der Vorlage: die Platzhalter XXXX und XX/XX */
  --nr-x: 62.67%;   --nr-y: 21.26%;
  --seit-x: 78.87%; --seit-y: 21.26%;
}
/* Der Rahmen um das Bild allein — die Bildunterschrift zählt bei den
   Prozentangaben der Werte nicht mit.

   Die Vorlagen sind 1536 × 864 groß und zeigen die Karte mittendrin,
   schwarz umrandet: Sie sitzt bei 352/174 und misst 833 × 515. Genau
   darauf wird hier zugeschnitten, damit Rand und Rundung auf der Karte
   liegen und nicht auf dem schwarzen Feld ringsum. */
.club-kartenbild {
  display: block; position: relative; overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 833 / 515; border-radius: 14px;
  border: 1px solid rgba(201, 162, 74, .3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.club-kartenbild img {
  position: absolute; display: block; max-width: none; height: auto;
  width: 184.4%; left: -42.26%; top: -33.79%;
}
.club-bildkarte figcaption {
  margin-top: 7px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .35);
}
/* Die beiden Werte sitzen genau über den Platzhaltern der Vorlage. Ihr
   dunkler Grund deckt diese ab; er bleibt knapp, damit er der Zeile
   „MEMBER NO." darüber nicht zu nahe kommt. */
.club-kartenwert {
  position: absolute; transform: translateY(-50%);
  /* Times wegen der geraden Ziffern — wie auf der gedruckten Karte */
  font-family: "Times New Roman", Times, serif;
  color: #a8a8a8; white-space: nowrap; line-height: 1;
  font-size: 8px; font-size: max(8px, 1.68cqw);
  letter-spacing: .3em; padding: 1px 2px;
  background: #0b0b0b; box-shadow: 0 0 3px 1px #0b0b0b;
}
.club-kartenwert-nr   { left: var(--nr-x);   top: var(--nr-y); }
.club-kartenwert-seit { left: var(--seit-x); top: var(--seit-y); }

.club-einleitung h1 { margin-bottom: 8px; }
.club-einleitung .muted { max-width: 62ch; line-height: 1.7; }

.club-zahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.club-zahl {
  padding: 10px 16px; border-radius: 10px; min-width: 120px;
  border: 1px solid rgba(var(--gold-rgb), .2);
  background: rgba(var(--gold-rgb), .05);
}
.club-zahl-wert { display: block; font-size: 21px; font-weight: 700; color: rgb(var(--hell-rgb)); }
.club-zahl-wort { display: block; margin-top: 2px; font-size: 11px;
                  letter-spacing: .08em; color: rgba(var(--hell-rgb), .45); }
.club-zahl-warnung { border-color: rgba(210, 50, 60, .4); background: rgba(210, 50, 60, .07); }
.club-zahl-warnung .club-zahl-wert { color: var(--blood-soft); }
.club-gold { color: var(--gold-hell); }

/* Der Beitrag: die Summe gross, das Wort dahinter klein */
.club-summe {
  margin-top: 8px; font-family: var(--serif, Georgia, serif);
  font-size: 30px; color: var(--gold-hell); line-height: 1.3;
}
.club-proMonat {
  font-family: inherit; font-size: 14px; color: rgba(var(--hell-rgb), .4);
  letter-spacing: .04em;
}
.club-satz { margin-top: 10px; font-size: 13px; line-height: 1.7;
             color: rgba(var(--hell-rgb), .55); max-width: 78ch; }

.club-marke {
  display: inline-block; margin-left: 9px; padding: 2px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: none;
  border: 1px solid color-mix(in srgb, var(--m) 55%, transparent);
  background: color-mix(in srgb, var(--m) 14%, transparent);
  color: var(--m); vertical-align: middle;
}

.club-karten { display: grid; gap: 14px; margin-top: 14px;
               grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.club-leistung {
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid rgba(var(--gold-rgb), .14);
  background: rgba(var(--gold-rgb), .035);
}
.club-leistung p { font-size: 12.5px; line-height: 1.65; color: rgba(var(--hell-rgb), .6); }
.club-leistung-titel {
  font-size: 13.5px !important; font-weight: 600; margin-bottom: 6px;
  color: var(--gold-hell) !important;
}

.club-rahmen { overflow-x: auto; margin-top: 12px; }
.club-kennung {
  display: inline-block; padding: 1px 8px; border-radius: 5px; margin-right: 7px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .04em;
  background: rgba(var(--gold-rgb), .13); color: var(--gold-hell);
}
.club-fremd { font-style: italic; color: rgba(var(--hell-rgb), .35); }

/* Das Register */
.club-liste { margin-top: 14px; }
.club-mitglied {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 8px;
  border: 1px solid rgba(var(--gold-rgb), .12);
  background: rgba(255, 255, 255, .015);
}
.club-mitglied.club-offen { border-color: rgba(210, 50, 60, .3); }
.club-foto {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .3);
}
.club-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-foto-leer { font-size: 22px; color: rgba(var(--hell-rgb), .2); }
.club-daten { flex: 1 1 auto; min-width: 0; }
.club-zeile1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
               font-size: 14px; color: rgb(var(--hell-rgb)); }
.club-zeile2 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px;
               font-size: 12px; color: rgba(var(--hell-rgb), .45); }
.club-warnwort { color: var(--blood-soft); }
/* Der Knopf, der die Karte als Bild zieht */
.club-kartenzeile { margin-top:9px; }

/* Die Rechnung unter den Kacheln: Beiträge minus Prämien */
.club-rechnung {
  margin-top:10px; font-size:12px; letter-spacing:.02em;
  color:rgba(var(--hell-rgb), .45);
}
.club-rechnung-klein { color:rgba(var(--hell-rgb), .3); }

/* Der ermäßigte Beitrag unter dem regulären */
.club-ermaessigt {
  margin-top:4px; font-family:var(--serif, Georgia, serif); font-size:19px;
  color:rgba(var(--hell-rgb), .62);
}
.club-ermaessigt .club-proMonat { font-size:12.5px; }

/* Die Saldokachel führt zur Buchhaltung */
.club-zahl-verweis { text-decoration:none; transition:border-color .2s, background .2s; }
.club-zahl-verweis:hover {
  border-color:rgba(var(--gold-rgb), .5); background:rgba(var(--gold-rgb), .1);
}

/* Die Buchhaltung */
.club-zahl-klein {
  display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px;
  font-size:11px; font-weight:600; vertical-align:middle;
  border:1px solid rgba(var(--gold-rgb), .3); background:rgba(var(--gold-rgb), .1);
  color:var(--gold);
}
.club-saldo { display:flex; flex-wrap:wrap; gap:26px; margin-top:12px; }
.club-saldo-teil { display:flex; flex-direction:column; gap:2px; }
.club-saldo-wort {
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .4);
}
.club-saldo-zahl { font-family:var(--serif, Georgia, serif); font-size:21px; }
.club-wer { color:rgba(var(--hell-rgb), .6); }
.club-alias { display:block; font-size:11px; color:rgba(var(--hell-rgb), .35); }

/* Die Gutscheine der Partner am Mitglied */
.club-gutscheine { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.club-gutschein {
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:10.5px; letter-spacing:.03em;
  border:1px solid color-mix(in srgb, var(--m) 45%, transparent);
  background:color-mix(in srgb, var(--m) 12%, transparent); color:var(--m);
}
/* Die beiden Bilder untereinander: Person und Personalausweis */
.club-bilder { flex:0 0 auto; display:flex; flex-direction:column; gap:6px; }

/* ══ Personal ══════════════════════════════════════════════════════ */
/* Der Leitfaden — ein gelesener Text, kein Datenblatt */
.hotel-leitfaden { margin-top:10px; max-width:80ch; }
.hotel-leitfaden p {
  margin:0 0 10px; font-size:14px; line-height:1.75;
  color:rgba(var(--hell-rgb), .78);
}
.hotel-leitfaden p:last-child { margin-bottom:0; }

/* Das Gehalt steht in der Mitarbeiterliste */
.hotel-lohn {
  font-family:ui-monospace,Consolas,monospace; text-align:right;
  color:var(--gold-hell);
}

.personal-sprung { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.personal-sprung a {
  padding:6px 14px; border-radius:999px; text-decoration:none; font-size:12.5px;
  letter-spacing:.03em; color:var(--gold);
  border:1px solid rgba(var(--gold-rgb), .3); background:rgba(var(--gold-rgb), .07);
  transition:background .2s, border-color .2s;
}
.personal-sprung a:hover {
  background:rgba(var(--gold-rgb), .16); border-color:rgba(var(--gold-rgb), .55);
}
.personal-titel {
  margin-top:30px; padding-top:18px; scroll-margin-top:20px;
  border-top:1px solid rgba(var(--gold-rgb), .16);
}
.club-foto-ausweis { border-style:dashed; }
.club-kartenzeile .btn { padding:6px 13px; font-size:12.5px; }

.club-notiz { margin-top: 6px; font-size: 12.5px; line-height: 1.6;
              color: rgba(var(--hell-rgb), .55); white-space: pre-line; }
.club-stand {
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em;
  border: 1px solid color-mix(in srgb, var(--m) 55%, transparent);
  background: color-mix(in srgb, var(--m) 15%, transparent); color: var(--m);
}
.club-karte-marke { font-size: 11px; color: rgba(var(--gold-rgb), .8); }
.club-karte-marke.club-fehlt { color: rgba(var(--hell-rgb), .3); }
.club-knoepfe { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }

/* Die Formulare */
.club-formular {
  padding: 18px 18px 16px; border-radius: 10px; margin-bottom: 12px;
  border: 1px solid rgba(var(--gold-rgb), .28);
  background: rgba(var(--gold-rgb), .05);
}
.club-formular-titel { font-size: 14px; font-weight: 600; color: var(--gold-hell);
                       margin-bottom: 4px; }
.club-felder { display: grid; gap: 12px 16px; margin-top: 10px;
               grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.club-felder label { display: block; }
.club-ganz { grid-column: 1 / -1; }
.club-haken { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px;
              font-size: 13px; color: rgba(var(--hell-rgb), .65); cursor: pointer; }
.club-haken input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }

@media (max-width: 820px) {
  .club-kopf { grid-template-columns: 1fr; }
  .club-karte { max-width: 340px; margin: 0 auto; }
  .club-summe { font-size: 24px; }
}


/* Kopfzeile eines Club-Abschnitts mit dem Knopf „bearbeiten" */
.club-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.club-mini {
  background: none; border: 1px solid rgba(var(--gold-rgb), .28);
  color: rgba(var(--hell-rgb), .6); border-radius: 999px;
  padding: 3px 12px; font-size: 11.5px; cursor: pointer; text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.club-mini:hover { color: var(--gold-hell); border-color: rgba(var(--gold-rgb), .6); }

/* Eine Zeile im Editor für Leistungen und Vertrieb */
.club-zeileneditor {
  padding: 12px 0; border-top: 1px solid rgba(var(--gold-rgb), .12);
}
.club-zeileneditor:first-of-type { border-top: 0; padding-top: 4px; }


/* ── Das Menüband der Archive ────────────────────────────────────────
   Aus den einzelnen Kästen wird eine durchgehende Schiene: ein dunkler
   Trog, darin die Archive als Segmente. Symbol und Zahl stehen in einer
   Zeile, der Name darunter — das nimmt weniger Höhe und liest sich wie
   eine Leiste, nicht wie fünf Kacheln.

   Das gewählte Segment ist ausgefüllt und trägt oben eine Linie, die
   langsam durchläuft. Die übrigen heben sich beim Überfahren an,
   während von unten ein violetter Schein aufsteigt.

   Am Markup ändert sich nichts — die Seite liefert weiterhin Symbol,
   Name und Zahl; hier wird nur anders damit umgegangen.              */

body.edel .tabs {
  border-bottom: 0;
}
body.edel .tablist {
  gap: 6px; padding: 7px;
  border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb), .16);
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .07), rgba(var(--flaeche-rgb), .55) 60%),
    rgba(var(--flaeche-rgb), .8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset,
              0 18px 40px rgba(0, 0, 0, .32);
}

/* Ein Segment: oben Symbol und Zahl, darunter der Name. */
body.edel .tab {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "ico name" "ico zahl";
  align-items: center; justify-items: start;
  gap: 0 10px; text-align: left;
  border: 0; border-radius: 11px;
  background: transparent;
  padding: 11px 13px;
  color: rgba(var(--hell-rgb), .68);
  transition: color .22s ease, background .22s ease,
              transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}

/* Der Schein, der beim Überfahren von unten aufsteigt */
body.edel .tab::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--gold-rgb), .18));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}
body.edel .tab:hover::after { transform: scaleY(1); }
body.edel .tab:hover {
  color: rgb(var(--hell-rgb));
  transform: translateY(-2px);
  border-color: transparent;
  background: transparent;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
}

/* Das Symbol sitzt in einer runden Plakette */
body.edel .tab .ico {
  grid-area: ico;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 17px; line-height: 1;
  border: 1px solid rgba(var(--gold-rgb), .26);
  background: radial-gradient(120% 120% at 50% 0%,
              rgba(var(--gold-rgb), .2), rgba(var(--gold-rgb), .04));
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
              border-color .22s ease, box-shadow .22s ease;
}
body.edel .tab:hover .ico {
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(var(--gold-rgb), .5);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), .22);
}

/* Der Name des Archivs */
body.edel .tab > span:not(.ico):not(.cnt) {
  grid-area: name;
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.25;
  /* Lange Namen wie „Familien & Organisationen" brechen auf zwei
     Zeilen um, statt abgeschnitten zu werden. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 100%;
}

/* Die Zahl als schmale Plakette darunter */
body.edel .tab .cnt {
  grid-area: zahl; margin-top: 3px;
  border-radius: 999px; padding: 2px 9px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hell) !important;
  border: 1px solid rgba(var(--gold-rgb), .22) !important;
  background: rgba(var(--gold-rgb), .1) !important;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}

/* ── Das gewählte Segment ─────────────────────────────────────────── */
body.edel .tab.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .24), rgba(var(--gold-tief-rgb), .1));
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .45) inset,
              0 14px 30px rgba(var(--gold-tief-rgb), .28);
}
body.edel .tab.active::after { transform: scaleY(0); }
body.edel .tab.active .ico {
  transform: none;
  border-color: rgba(var(--hell-rgb), .55);
  box-shadow: 0 0 20px rgba(var(--gold-rgb), .3);
}
body.edel .tab.active .cnt {
  color: var(--nacht) !important; border-color: transparent !important;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold)) !important;
}

/* Die Linie über dem gewählten Segment läuft langsam durch */
@keyframes cb-band-lauf {
  0%   { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}
body.edel .tab.active::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(var(--hell-rgb), .15) 20%,
    var(--gold) 45%, var(--zweit) 55%,
    rgba(var(--hell-rgb), .15) 80%, transparent 100%);
  background-size: 220% 100%;
  animation: cb-band-lauf 3.6s linear infinite;
}

/* Auf schmalen Geräten wird die Schiene zum Streifen, durch den man
   schiebt. */
@media (max-width: 760px) {
  body.edel .tablist {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body.edel .tab {
    flex: 0 0 auto; min-width: 168px; scroll-snap-align: start;
  }
  body.edel .tablist::-webkit-scrollbar { display: block; height: 4px; }
  body.edel .tablist::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-rgb), .35); border-radius: 999px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.edel .tab,
  body.edel .tab::after,
  body.edel .tab .ico { transition: none; }
  body.edel .tab:hover { transform: none; }
  body.edel .tab:hover .ico { transform: none; }
  body.edel .tab.active::before { animation: none; }
}


/* ══ Akten ═════════════════════════════════════════════════════════
   Oben ein Kopf mit drei Zahlen, Suche und Sortierung; darunter die
   Kategorien als Kacheln zum Filtern und die Unterlagen als Karten.
   Jede Dateiart trägt ihre eigene Farbe (--t), jede Kategorie die
   ihre (--c). Alles, was sich bewegt, hält bei „weniger Bewegung" still. */

@keyframes aktRein {
  from { opacity:0; transform:translateY(10px) scale(.985); }
  to   { opacity:1; transform:none; }
}
@keyframes aktSchein {
  from { transform:translate3d(0, 0, 0) scale(1);     opacity:.8; }
  to   { transform:translate3d(-30px, 20px, 0) scale(1.15); opacity:1; }
}

/* ── Kopf ── */
.akt-kopf { position:relative; overflow:hidden; margin-top:24px; padding:22px 24px 18px; }
.akt-schein {
  position:absolute; right:-90px; top:-110px; width:320px; height:320px;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--c) 28%, transparent), transparent 68%);
  animation:aktSchein 9s ease-in-out infinite alternate;
}
.akt-kopf > *:not(.akt-schein) { position:relative; z-index:1; }
.akt-kopf-oben {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.akt-kopf h1 { margin-top:4px; }
.akt-kopf .muted { margin-top:4px; }

.akt-zahlen { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:18px; }
.akt-zahl {
  display:flex; flex-direction:column; gap:2px; padding:11px 14px;
  border:1px solid rgba(var(--gold-rgb), .14); border-radius:12px;
  background:linear-gradient(180deg, rgba(var(--gold-rgb), .06), rgba(var(--gold-rgb), .015));
}
.akt-zahl-wert {
  font-size:26px; font-weight:700; line-height:1.1; color:rgb(var(--hell-rgb));
  font-variant-numeric:tabular-nums;
}
.akt-zahl-wort {
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .45);
}

.akt-suchleiste { display:flex; gap:10px; margin-top:16px; align-items:center; flex-wrap:wrap; }
.akt-suche { position:relative; flex:1 1 320px; }
.akt-suche .input { height:46px; padding-left:40px; padding-right:44px; font-size:14.5px; border-radius:12px; }
.akt-suche-lupe {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:19px; color:rgba(var(--hell-rgb), .4); pointer-events:none;
}
.akt-taste {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font:600 11px/1 ui-monospace, Consolas, monospace; padding:3px 7px;
  border:1px solid rgba(var(--hell-rgb), .15); border-radius:5px;
  color:rgba(var(--hell-rgb), .45); background:rgba(0,0,0,.25);
}
.akt-suche .input:focus ~ .akt-taste { opacity:0; }

.akt-sortierung {
  display:inline-flex; padding:3px; gap:2px; border-radius:12px;
  border:1px solid rgba(var(--gold-rgb), .16); background:rgba(0,0,0,.28);
}
.akt-sortknopf {
  border:0; background:transparent; cursor:pointer;
  padding:8px 13px; border-radius:9px; font:inherit; font-size:12.5px; font-weight:600;
  color:rgba(var(--hell-rgb), .55);
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.akt-sortknopf:hover { color:rgb(var(--hell-rgb)); }
.akt-sortknopf.an {
  color:#fff; background:rgba(var(--gold-rgb), .22);
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb), .45);
}

/* ── Kacheln der Kategorien ── */
.akt-kacheln {
  display:flex; gap:8px; margin-top:16px; padding:2px 2px 6px;
  overflow-x:auto; scroll-snap-type:x proximity;
}
.akt-kacheln::-webkit-scrollbar { height:4px; }
.akt-kachel {
  flex:none; scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px 9px 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(var(--flaeche-rgb), .75);
  color:rgba(var(--hell-rgb), .72); font:inherit; font-size:13px; font-weight:600;
  transition:transform .18s ease, border-color .18s ease, background .18s ease,
             color .18s ease, box-shadow .18s ease;
  animation:aktRein .4s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d, 0ms);
}
.akt-kachel:hover {
  transform:translateY(-1px); color:#fff;
  border-color:color-mix(in srgb, var(--c) 55%, transparent);
}
.akt-kachel.an {
  color:#fff;
  background:color-mix(in srgb, var(--c) 20%, rgba(var(--flaeche-rgb), .9));
  border-color:color-mix(in srgb, var(--c) 65%, transparent);
  box-shadow:0 8px 22px -10px var(--c);
}
.akt-kachel-ico { font-size:15px; line-height:1; color:var(--c); }
.akt-kachel-zahl {
  min-width:22px; text-align:center; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.07);
}
.akt-kachel.an .akt-kachel-zahl { background:var(--c); color:#0b0614; }

/* ── Hochladen ── */
.akt-hochladen { padding:20px; margin-top:14px; border-color:color-mix(in srgb, var(--c) 40%, transparent); }
.akt-ablegen {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:12px; padding:24px 16px; text-align:center; cursor:pointer;
  border:1.5px dashed rgba(var(--gold-rgb), .35); border-radius:14px;
  transition:border-color .18s ease, background .18s ease;
}
.akt-ablegen:hover, .akt-ablegen.drueber {
  border-color:rgba(var(--gold-rgb), .8); background:rgba(var(--gold-rgb), .06);
}
.akt-ablegen.gewaehlt { border-style:solid; border-color:rgba(126,196,139,.7); background:rgba(126,196,139,.06); }
.akt-datei { position:absolute; inset:0; opacity:0; cursor:pointer; }
.akt-ablegen-ico { font-size:26px; line-height:1; color:var(--gold); transition:transform .25s ease; }
.akt-ablegen:hover .akt-ablegen-ico, .akt-ablegen.drueber .akt-ablegen-ico { transform:translateY(-3px); }
.akt-ablegen-text { font-size:14px; font-weight:600; color:rgb(var(--hell-rgb)); word-break:break-all; }
.akt-ablegen-hinweis { font-size:11px; color:rgba(var(--hell-rgb), .45); }

/* ── Gruppen und Karten ── */
.akt-gruppe { margin-top:28px; }
.akt-gruppe[hidden], .akt-karte[hidden] { display:none !important; }
.akt-gruppe-kopf { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.akt-gruppe-ico {
  flex:none; width:32px; height:32px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
  color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.akt-gruppe-name { margin:0; font-size:16px; font-weight:600; letter-spacing:.03em; color:rgb(var(--hell-rgb)); }
.akt-gruppe-zahl {
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
  font-variant-numeric:tabular-nums; color:rgba(var(--hell-rgb), .6);
  background:rgba(255,255,255,.06);
}
.akt-gruppe-linie {
  flex:1; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, transparent), transparent);
}

.akt-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }

.akt-karte {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:14px; border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(var(--gold-rgb), .035), rgba(var(--flaeche-rgb), .94) 40%);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, box-shadow .22s ease;
  animation:aktRein .45s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d, 0ms);
}
.akt-karte.rein { animation:aktRein .32s cubic-bezier(.2,.7,.3,1) both; animation-delay:0ms; }
.akt-karte:hover {
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--t) 45%, transparent);
  box-shadow:0 16px 34px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb, var(--t) 16%, transparent) inset;
}
.akt-karte:target { border-color:rgba(var(--gold-rgb), .7); box-shadow:0 0 0 2px rgba(var(--gold-rgb), .35); }
.akt-karte-link { display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }

.akt-vorschau {
  position:relative; height:118px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--t) 24%, transparent), transparent 70%),
    rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.akt-vorschau.ist-bild img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.akt-karte:hover .akt-vorschau.ist-bild img { transform:scale(1.06); }
.akt-zeichen {
  font-size:42px; line-height:1; filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.akt-karte:hover .akt-zeichen { transform:translateY(-4px) scale(1.08) rotate(-4deg); }
.akt-art {
  position:absolute; left:10px; bottom:10px;
  padding:4px 8px; border-radius:6px;
  font:700 10px/1 ui-monospace, Consolas, monospace; letter-spacing:.08em;
  color:#0b0614; background:var(--t); box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.akt-neu {
  position:absolute; left:10px; top:10px;
  padding:3px 8px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#7ec48b; background:rgba(10,20,12,.7); border:1px solid rgba(126,196,139,.5);
}

.akt-inhalt { display:flex; flex-direction:column; gap:5px; padding:12px 14px 14px; }
.akt-unter {
  align-self:flex-start; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb, var(--c) 75%, white 25%);
}
.akt-titel { font-size:14.5px; font-weight:600; line-height:1.35; color:rgb(var(--hell-rgb)); word-break:break-word; }
.akt-bemerkung {
  font-size:12.5px; line-height:1.5; color:rgba(var(--hell-rgb), .55);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.akt-meta {
  display:flex; flex-wrap:wrap; gap:2px 0; margin-top:4px;
  font:11px/1.5 ui-monospace, Consolas, monospace; color:rgba(var(--hell-rgb), .38);
}
.akt-meta span + span::before { content:'·'; margin:0 7px; opacity:.6; }

.akt-personen { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; margin-top:-4px; }

.akt-knoepfe {
  position:absolute; top:8px; right:8px; z-index:2;
  display:flex; gap:3px; padding:3px; border-radius:10px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  opacity:0; transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
}
.akt-karte:hover .akt-knoepfe, .akt-karte:focus-within .akt-knoepfe { opacity:1; transform:none; }
@media (hover: none) {
  .akt-knoepfe { opacity:1; transform:none; }
  .akt-taste { display:none; }   /* ohne Tastatur hilft der Hinweis nicht */
}

.akt-bearbeiten {
  grid-column:1 / -1; padding:20px;
  border-color:rgba(var(--gold-rgb), .45);
  animation:aktRein .3s cubic-bezier(.2,.7,.3,1) both;
}

@media (max-width:760px) {
  .akt-zahlen { gap:8px; }
  .akt-zahl { padding:9px 10px; }
  .akt-zahl-wert { font-size:21px; }
  .akt-zahl-wort { font-size:9.5px; letter-spacing:.08em; }
  .akt-raster { grid-template-columns:1fr; }
  .akt-vorschau { height:104px; }
}
@media (prefers-reduced-motion: reduce) {
  .akt-schein, .akt-kachel, .akt-karte, .akt-karte.rein, .akt-bearbeiten { animation:none; }
  .akt-karte:hover, .akt-kachel:hover { transform:none; }
  .akt-karte:hover .akt-zeichen, .akt-karte:hover .akt-vorschau.ist-bild img { transform:none; }
}

/* ══ Abwesenheit ═══════════════════════════════════════════════════
   Eine Tafel: links die Mannschaft mit Bild und Namen, daneben die
   sieben Tage der Woche. Jedes Feld ist ein Knopf — ein Klick geht
   einen Zustand weiter. Wer zu oft unabgemeldet fehlt, dessen Name
   färbt sich: erst gelb, dann rot.                                  */

.abw-wochenwahl { display:flex; align-items:center; gap:10px; }
.abw-wochenname {
  font-family:ui-monospace,Consolas,monospace; font-size:13px;
  letter-spacing:.06em; color:rgb(var(--hell-rgb)); white-space:nowrap;
}

.abw-huelle { overflow-x:auto; }
.abw-tafel {
  display:grid;
  grid-template-columns:minmax(210px, 1.4fr) repeat(7, minmax(74px, 1fr));
  min-width:640px;
}

/* Kopfzeile */
.abw-ecke {
  padding:12px 16px; border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .42); font-weight:600;
  display:flex; align-items:flex-end;
}
.abw-kopf {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:10px 6px 8px; border-bottom:1px solid var(--line);
  border-left:1px solid rgba(var(--gold-rgb), .07);
}
.abw-kopf.heute { background:rgba(var(--gold-rgb), .07); }
.abw-wochentag { font-size:12.5px; font-weight:600; letter-spacing:.1em; color:rgb(var(--hell-rgb)); }
.abw-datum {
  font-family:ui-monospace,Consolas,monospace; font-size:11px;
  color:rgba(var(--hell-rgb), .45);
}
.abw-heute {
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(var(--gold-rgb), .4);
  border-radius:999px; padding:0 6px;
}

/* Die Person am linken Rand */
.abw-person {
  display:flex; align-items:center; gap:11px;
  padding:9px 16px; min-width:0;
  border-bottom:1px solid rgba(var(--gold-rgb), .06);
}
.abw-person.ich { background:rgba(var(--gold-rgb), .05); }

.abw-bild {
  position:relative; flex:none; width:32px; height:32px;
  border-radius:50%; overflow:hidden; background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb), .3);
}
.abw-bild img { display:block; width:100%; height:100%; object-fit:cover; }
.abw-ersatz {
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--c, #c8a04a), rgba(0,0,0,.55));
  color:#0f0b09; font:700 14px/1 ui-sans-serif, system-ui, sans-serif;
}
.abw-bild.ohne-bild .abw-ersatz { display:flex; }
.abw-bild.ohne-bild img { display:none; }

.abw-namensfeld { display:flex; flex-direction:column; gap:2px; min-width:0; }
.abw-name {
  font-size:13.5px; font-weight:600; color:rgb(var(--hell-rgb));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .2s ease;
}
/* Zu viele unabgemeldete Tage — der Name spricht für sich */
.abw-name.abw-gelb { color:#e8c15a; text-shadow:0 0 14px rgba(232,193,90,.3); }
.abw-name.abw-rot  { color:#e0475f; text-shadow:0 0 14px rgba(224,71,95,.35); }

.abw-warnzahl {
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .45);
}
.abw-warnzahl.abw-gelb { color:#e8c15a; }
.abw-warnzahl.abw-rot  { color:#e0475f; }

/* Die Bilanz der Leitung: Tage in der Familie, abgemeldet, unabgemeldet */
.abw-bilanz { display:inline-flex; gap:4px; margin-top:2px; flex-wrap:wrap; }
.abw-bilanz-teil {
  padding:1px 6px; border-radius:5px;
  font:600 10px/1.5 ui-monospace, Consolas, monospace;
  color:rgba(var(--hell-rgb), .5); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06); white-space:nowrap;
}
.abw-bilanz-teil.ab { color:#7ec48b; border-color:rgba(126,196,139,.28); background:rgba(126,196,139,.08); }
.abw-bilanz-teil.un { color:#e0475f; border-color:rgba(224,71,95,.28); background:rgba(224,71,95,.08); }

/* Ein Tag */
.abw-zelle {
  display:flex; align-items:center; justify-content:center;
  padding:6px; min-height:48px;
  border-left:1px solid rgba(var(--gold-rgb), .06);
  border-bottom:1px solid rgba(var(--gold-rgb), .06);
}
.abw-zelle.heute { background:rgba(var(--gold-rgb), .04); }
.abw-zelle form { display:flex; }

.abw-feld {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  border:1px dashed rgba(var(--hell-rgb), .14);
  background:transparent; color:rgba(var(--hell-rgb), .2);
  font-family:inherit; font-size:14px; line-height:1;
  cursor:pointer; text-decoration:none;
  transition:transform .16s ease, border-color .16s ease,
             background .16s ease, color .16s ease, box-shadow .16s ease;
}
button.abw-feld:hover {
  transform:translateY(-1px);
  border-color:rgba(var(--gold-rgb), .5);
  color:rgba(var(--hell-rgb), .7);
  background:rgba(var(--gold-rgb), .07);
}
.abw-feld.gesetzt {
  border-style:solid; border-color:var(--c, var(--gold));
  background:color-mix(in srgb, var(--c, #c8a04a) 18%, transparent);
  color:var(--c, var(--gold)); font-weight:700;
  box-shadow:0 0 14px -4px var(--c, transparent);
}
button.abw-feld.gesetzt:hover { filter:brightness(1.2); }
/* Fremde Tage ohne Recht: nur zum Lesen */
.abw-feld.fest { cursor:default; border-style:solid; border-color:transparent; }
.abw-feld.fest:not(.gesetzt) { border-color:rgba(var(--hell-rgb), .07); }

/* Ein Tag mit Grund trägt oben rechts einen kleinen Punkt — lesen lässt
   sich der Grund beim Überfahren. */
.abw-feld { position:relative; }
.abw-feld.mit-grund::after {
  content:''; position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%;
  background:currentColor; box-shadow:0 0 6px currentColor;
}

/* Das Fenster, das beim Abmelden nach dem Grund fragt */
.abw-fenster {
  /* Die Grundregel oben setzt jeden Außenabstand auf null — ohne
     "auto" stünde das Fenster in der linken oberen Ecke statt mittig. */
  margin:auto;
  width:min(440px, calc(100vw - 32px));
  padding:22px 22px 18px; border-radius:16px;
  border:1px solid rgba(var(--gold-rgb), .35);
  background:linear-gradient(180deg, rgba(var(--gold-rgb), .08), rgba(var(--flaeche-rgb), .97) 45%),
             rgb(var(--flaeche-rgb));
  color:rgb(var(--hell-rgb));
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.abw-fenster::backdrop { background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.abw-fenster[open] { animation:abwFenster .22s cubic-bezier(.2,.7,.3,1) both; }
@keyframes abwFenster {
  from { opacity:0; transform:translateY(8px) scale(.98); }
  to   { opacity:1; transform:none; }
}
.abw-fenster-wer {
  margin-top:6px; font-size:15px; font-weight:600; color:rgb(var(--hell-rgb));
}
.abw-freiwillig {
  margin-left:6px; font-size:10px; letter-spacing:.08em; text-transform:none;
  color:rgba(var(--hell-rgb), .4); font-weight:400;
}
.abw-fenster-hinweis {
  margin-top:8px; font-size:11.5px; line-height:1.5; color:rgba(var(--hell-rgb), .45);
}
@media (prefers-reduced-motion: reduce) {
  .abw-fenster[open] { animation:none; }
}

.abw-legende {
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  margin-top:12px; font-size:11.5px; color:rgba(var(--hell-rgb), .5);
}
.abw-legende-teil { display:inline-flex; align-items:center; gap:7px; }
.abw-legende .abw-feld { width:24px; height:24px; font-size:11px; border-radius:7px; }
.abw-punkt {
  display:inline-block; width:10px; height:10px; border-radius:50%;
}
.abw-punkt.abw-gelb { background:#e8c15a; box-shadow:0 0 10px rgba(232,193,90,.5); }
.abw-punkt.abw-rot  { background:#e0475f; box-shadow:0 0 10px rgba(224,71,95,.5); }

@media (max-width:700px) {
  .abw-tafel { grid-template-columns:minmax(150px, 1fr) repeat(7, minmax(52px, 1fr)); }
  .abw-person { padding:8px 10px; gap:8px; }
  .abw-bild { width:26px; height:26px; }
  .abw-name { font-size:12.5px; }
  .abw-feld { width:28px; height:28px; font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .abw-feld { transition:none; }
  button.abw-feld:hover { transform:none; }
}

/* ══ Schwarzes Brett ═══════════════════════════════════════════════
   Zettel an einer Wand: leicht versetzt angeheftet, mit einer Nadel
   oben links. Beim Überfahren richtet sich der Zettel auf.        */
.brett {
  display:grid; gap:14px; margin-top:14px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.brett-zettel {
  position:relative; padding:20px 20px 16px;
  transform:rotate(-.25deg);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.brett-zettel:nth-child(even) { transform:rotate(.3deg); }
.brett-zettel:hover {
  transform:rotate(0) translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.4);
}
.brett-nadel {
  position:absolute; top:-9px; left:16px; font-size:17px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
  transition:transform .25s ease;
}
.brett-zettel:hover .brett-nadel { transform:translateY(-2px) rotate(-8deg); }
.brett-titel {
  margin:0 0 8px; font-size:16px; font-weight:600; letter-spacing:.02em;
  color:rgb(var(--hell-rgb));
}
.brett-text p {
  margin:0 0 8px; font-size:13.5px; line-height:1.7;
  color:rgba(var(--hell-rgb), .78); overflow-wrap:anywhere;
}
.brett-text p:last-child { margin-bottom:0; }
.brett-fuss {
  display:flex; flex-wrap:wrap; gap:4px 12px; margin:14px 0 0;
  padding-top:10px; border-top:1px solid rgba(var(--gold-rgb), .12);
  font-size:11px; color:rgba(var(--hell-rgb), .45);
}
.brett-wann { font-variant-numeric:tabular-nums; color:rgba(var(--hell-rgb), .3); }
.brett-knoepfe {
  position:absolute; top:12px; right:12px; display:flex; gap:4px;
  opacity:0; transition:opacity .2s ease;
}
.brett-zettel:hover .brett-knoepfe,
.brett-zettel:focus-within .brett-knoepfe { opacity:1; }
@media (hover: none) { .brett-knoepfe { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .brett-zettel, .brett-zettel:hover { transform:none; transition:none; }
}


/* ══ Dashboard ══════════════════════════════════════════════════════
   Nutzertabelle, Einzelansicht und Protokoll. Gebaut aus den Farben des
   jeweiligen Bereichs (--gold, --hell-rgb), damit es überall passt. */
.dash-kopf { margin-top:24px; padding:22px 26px; position:relative; overflow:hidden; }
.dash-kopf::after {
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent 70%);
}
.dash-kopf h1 { margin-top:4px; }

@keyframes dashAuf { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes dashEin { from { opacity:0; } to { opacity:1; } }
@keyframes dashWachsen { from { transform:scaleY(0); } to { transform:scaleY(1); } }

/* ── Kacheln ── */
.dash-kacheln {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:12px; margin-top:14px;
}
.dash-kachel {
  display:flex; flex-direction:column; gap:6px; padding:14px 16px;
  color:inherit; text-decoration:none;
  border:1px solid rgba(var(--gold-rgb), .16); border-radius:14px;
  background:linear-gradient(160deg, rgba(var(--gold-rgb), .07), rgba(0,0,0,.2));
  transition:transform .18s ease, border-color .18s ease;
  animation:dashAuf .45s ease both; animation-delay:var(--d, 0ms);
}
a.dash-kachel:hover { transform:translateY(-2px); border-color:var(--c); }
.dash-kachel-oben {
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .6);
}
.dash-kachel-zahl {
  font-size:26px; font-weight:700; line-height:1.15; color:var(--c);
  font-variant-numeric:tabular-nums;
}
.dash-kachel-zahl.klein { font-size:16px; font-family:ui-monospace,Consolas,monospace; }

/* ── Blöcke ── */
.dash-block { margin-top:22px; padding:20px 22px; }
.dash-blockkopf {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px 20px; flex-wrap:wrap; margin-bottom:14px;
}
.dash-titel { margin:0; font-size:19px; }
.dash-blockkopf .muted { margin-top:3px; font-size:12px; }
.dash-werkzeuge { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-namensuche { width:220px; max-width:100%; }
.dash-leer { padding:18px; text-align:center; color:rgba(var(--hell-rgb), .5); }

.dash-zeitraum {
  display:inline-flex; padding:3px; border-radius:999px;
  border:1px solid rgba(var(--gold-rgb), .18); background:rgba(0,0,0,.22);
}
.dash-zeitraum a {
  padding:6px 13px; border-radius:999px; white-space:nowrap;
  font-size:12px; text-decoration:none; color:rgba(var(--hell-rgb), .65);
  transition:background .15s ease, color .15s ease;
}
.dash-zeitraum a:hover { color:rgba(var(--hell-rgb), .95); }
.dash-zeitraum a.an { background:rgba(var(--gold-rgb), .2); color:var(--gold); }

/* ── Tabellen ── */
.dash-rahmen { overflow-x:auto; border:1px solid rgba(var(--gold-rgb), .12); border-radius:12px; }
.dash-tabelle { width:100%; border-collapse:collapse; font-size:13px; }
.dash-tabelle th {
  text-align:left; white-space:nowrap; padding:10px 12px;
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .55); background:rgba(var(--gold-rgb), .06);
  border-bottom:1px solid rgba(var(--gold-rgb), .18);
}
.dash-tabelle td {
  padding:9px 12px; vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,.045); color:rgba(var(--hell-rgb), .86);
}
.dash-tabelle tbody tr:last-child td { border-bottom:0; }
.dash-tabelle th.zahl, .dash-tabelle td.zahl { text-align:right; font-variant-numeric:tabular-nums; }
.dash-protokoll tbody tr:not(.dash-tag):hover td { background:rgba(var(--gold-rgb), .04); }

.dash-zeile { cursor:pointer; animation:dashEin .35s ease both; animation-delay:var(--d, 0ms); }
.dash-zeile td { transition:background .15s ease; }
.dash-zeile:hover td { background:rgba(var(--gold-rgb), .07); }
.dash-zeile.gewaehlt td { background:rgba(var(--gold-rgb), .14); }
.dash-zeile.gewaehlt td:first-child { box-shadow:inset 3px 0 0 var(--gold); }

.dash-person {
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-weight:600; text-decoration:none; color:rgba(var(--hell-rgb), .95);
}
.dash-person:hover { color:var(--gold); }
.dash-kreis {
  flex:none; width:28px; height:28px; border-radius:50%;
  display:inline-grid; place-items:center;
  font-size:12px; font-weight:700; color:#fff; background:var(--c);
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
}
.dash-kreis.gross { width:54px; height:54px; font-size:22px; }
.dash-dauer { font-family:ui-monospace,Consolas,monospace; font-size:12.5px; color:#7ec48b; white-space:nowrap; }
.dash-zeitbalken {
  display:block; min-width:130px; height:3px; margin-top:5px;
  border-radius:2px; background:rgba(255,255,255,.06); overflow:hidden;
}
.dash-zeitbalken span {
  display:block; height:100%; border-radius:2px;
  background:linear-gradient(90deg, #7ec48b, rgba(126,196,139,.45));
}
.dash-null { color:rgba(var(--hell-rgb), .22); }
.dash-zahllink {
  padding:2px 7px; border-radius:6px; font-weight:600;
  color:var(--c); text-decoration:none;
}
.dash-zahllink:hover { background:rgba(255,255,255,.08); }
.dash-klein { font-size:12px; white-space:nowrap; color:rgba(var(--hell-rgb), .6); }

/* ── Einzelansicht ── */
.dash-einzel { border-color:rgba(var(--gold-rgb), .32); animation:dashAuf .4s ease both; }
.dash-einzel-kopf { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dash-einzel-kopf h2 { margin:2px 0 0; font-size:22px; }
.dash-aufheben { margin-left:auto; }
.dash-einzel-raster { display:grid; grid-template-columns:minmax(240px, 1fr) 2fr; gap:16px; margin-top:18px; }
.dash-feldkasten {
  padding:14px 16px; border-radius:12px;
  border:1px solid rgba(var(--gold-rgb), .12); background:rgba(0,0,0,.18);
}
.dash-feldkasten-titel {
  margin-bottom:10px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(var(--hell-rgb), .5);
}
.dash-gesamtzeit {
  font-family:ui-monospace,Consolas,monospace; font-size:23px; font-weight:700;
  line-height:1.25; color:#7ec48b;
}
.dash-eckdaten { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin-top:14px; font-size:12.5px; }
.dash-eckdaten dt { color:rgba(var(--hell-rgb), .5); }
.dash-eckdaten dd { margin:0; color:rgba(var(--hell-rgb), .9); font-variant-numeric:tabular-nums; }

.dash-diagramm { display:flex; align-items:stretch; gap:3px; height:120px; }
.dash-saeule { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.dash-saeule i { flex:1; width:100%; position:relative; display:block; }
.dash-saeule i span {
  position:absolute; left:0; right:0; bottom:0; min-height:2px;
  border-radius:3px 3px 0 0; transform-origin:bottom;
  background:linear-gradient(180deg, #7ec48b, rgba(126,196,139,.3));
  animation:dashWachsen .6s ease both; animation-delay:var(--d, 0ms);
}
.dash-saeule.leer i span { background:rgba(255,255,255,.07); }
.dash-saeule.heute i span { box-shadow:0 0 0 1px var(--gold); }
.dash-saeule em { font-style:normal; font-size:9px; color:rgba(var(--hell-rgb), .4); font-variant-numeric:tabular-nums; }
.dash-saeule.heute em { color:var(--gold); }

.dash-artknoepfe { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.dash-artknopf {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
  text-decoration:none; color:inherit;
  border:1px solid rgba(255,255,255,.06); border-left:3px solid var(--c);
  background:rgba(0,0,0,.18); transition:background .15s ease;
}
.dash-artknopf:hover { background:rgba(255,255,255,.06); }
.dash-artknopf span { font-size:12px; color:rgba(var(--hell-rgb), .8); }
.dash-artknopf b { margin-left:auto; color:var(--c); font-variant-numeric:tabular-nums; }

.dash-haeufig { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.dash-haeufig li { display:flex; align-items:center; gap:10px; font-size:12.5px; color:rgba(var(--hell-rgb), .85); }
.dash-haeufig li b { margin-left:auto; font-variant-numeric:tabular-nums; color:rgba(var(--hell-rgb), .7); }

/* ── Protokoll ── */
.dash-filter { display:grid; gap:12px; margin-bottom:14px; }
.dash-filterzeile { display:grid; grid-template-columns:1.2fr .8fr .8fr 1.6fr auto; gap:10px; align-items:end; }
.dash-filterzeile .label { margin-bottom:4px; }
.dash-filter input[type="date"] { color-scheme:dark; }
.dash-knoepfe { display:flex; gap:8px; }

.dash-arten { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.dash-alle {
  padding:6px 11px; border-radius:999px; font-size:12px; text-decoration:none;
  color:rgba(var(--hell-rgb), .6); border:1px dashed rgba(255,255,255,.16);
}
.dash-alle.an { color:var(--gold); border-style:solid; border-color:rgba(var(--gold-rgb), .5); }
.dash-art { position:relative; cursor:pointer; }
.dash-art input { position:absolute; opacity:0; pointer-events:none; }
.dash-art > span {
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  font-size:12px; color:rgba(var(--hell-rgb), .7);
  border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.2);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.dash-art > span b { font-weight:600; font-variant-numeric:tabular-nums; color:rgba(var(--hell-rgb), .4); }
.dash-art:hover > span { border-color:var(--c); }
.dash-art input:checked + span { color:var(--c); border-color:var(--c); background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px var(--c); }
.dash-art input:checked + span b { color:var(--c); }
.dash-art input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }

.dash-tag td {
  padding:14px 12px 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); background:rgba(var(--gold-rgb), .045);
  border-bottom:1px solid rgba(var(--gold-rgb), .14);
}
.dash-uhrzeit { font-family:ui-monospace,Consolas,monospace; font-size:12px; white-space:nowrap; color:rgba(var(--hell-rgb), .55); }
.dash-abzeichen {
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 10px; border-radius:999px;
  font-size:11.5px; white-space:nowrap; color:var(--c);
  border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.28);
  box-shadow:inset 3px 0 0 var(--c);
}
.dash-vorgang { white-space:nowrap; color:rgba(var(--hell-rgb), .95); }
.dash-ziel { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(var(--hell-rgb), .6); }
.dash-ziel a { color:var(--gold); text-decoration:none; }
.dash-ziel a:hover { text-decoration:underline; }
.dash-namenlink { white-space:nowrap; text-decoration:none; color:rgba(var(--hell-rgb), .9); }
.dash-namenlink:hover { color:var(--gold); }

.dash-seiten {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:14px; font-size:12px; color:rgba(var(--hell-rgb), .55);
}
.dash-seiten .aus { opacity:.35; pointer-events:none; }

@media (max-width:900px) {
  .dash-einzel-raster { grid-template-columns:1fr; }
  .dash-filterzeile { grid-template-columns:1fr 1fr; }
  .dash-filterzeile .dash-knoepfe { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .dash-filterzeile { grid-template-columns:1fr; }
  .dash-namensuche { width:100%; }
  .dash-aufheben { margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-kachel, .dash-zeile, .dash-einzel, .dash-saeule i span { animation:none; }
}


/* ══ Warenpreise ═════════════════════════════════════════════════════
   Dieselben Waren wie im Lager, je Ware Preis, Menge und Wert. */
.preis-rahmen {
  overflow-x: auto; margin-top: 18px;
  border: 1px solid rgba(var(--gold-rgb), .16); border-radius: 12px;
  background: rgba(0, 0, 0, .18);
}
table.preise { width: 100%; border-collapse: collapse; font-size: 14px; }
table.preise th, table.preise td {
  padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05);
}
table.preise thead th {
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .55); background: rgba(var(--gold-rgb), .06);
  border-bottom: 1px solid rgba(var(--gold-rgb), .2);
}
table.preise .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.preise tbody tr[data-ware]:hover td { background: rgba(var(--gold-rgb), .04); }
.preis-blockzeile th {
  text-align: left; padding-top: 18px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid rgba(var(--gold-rgb), .22);
}
.preis-ware { color: rgba(var(--hell-rgb), .9); }
.preis-feld { display: inline-flex; align-items: center; gap: 6px; }
.preis-eingabe { width: 130px; padding: 6px 10px; text-align: right; }
.preis-menge   { width: 96px;  padding: 6px 10px; text-align: right; }
.preis-dollar { font-size: 12px; color: rgba(var(--hell-rgb), .45); }
.preis-wert { font-family: ui-monospace, Consolas, monospace; color: #7ec48b; }
.preis-wert.leer { color: rgba(var(--hell-rgb), .28); }
.preis-summe td {
  font-size: 12.5px; color: rgba(var(--hell-rgb), .6);
  background: rgba(var(--gold-rgb), .035);
}
.preis-blocksumme { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--gold) !important; }
.preis-gesamt td {
  padding: 14px; font-size: 15px; font-weight: 700; border-bottom: 0;
  border-top: 2px solid rgba(var(--gold-rgb), .35);
}
.preis-gesamtwert { font-family: ui-monospace, Consolas, monospace; font-size: 18px; color: var(--gold); }
.preis-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
@media (max-width: 640px) {
  table.preise th, table.preise td { padding: 7px 8px; }
  .preis-eingabe { width: 100px; }
  .preis-menge   { width: 70px; }
}


/* ── Schichtplan: die Nacht über Mitternacht ── */
.schicht-mitternacht th, .schicht-mitternacht td {
  border-top: 2px solid rgba(var(--gold-rgb), .35) !important;
}
.schicht-folgetag {
  margin-left: 4px; font-size: 9px; vertical-align: super;
  color: rgba(var(--gold-rgb), .7);
}

/* ── Personalliste: der hinterlegte Ausweis ── */
.hotel-ausweisbild {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 6px; font-size: 12px;
}
.hotel-ausweislink { color: var(--gold); text-decoration: none; white-space: nowrap; }
.hotel-ausweislink:hover { text-decoration: underline; }
.hotel-ausweisweg {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  color: rgba(var(--hell-rgb), .55); white-space: nowrap;
}
.hotel-datei { position: relative; display: inline-flex; cursor: pointer; }
.hotel-datei input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.hotel-datei span {
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px dashed rgba(var(--gold-rgb), .4); color: rgba(var(--hell-rgb), .75);
}
.hotel-datei:hover span,
.hotel-datei input:focus-visible + span { border-style: solid; border-color: var(--gold); color: var(--gold); }
.hotel-datei.gewaehlt span { border-style: solid; border-color: rgba(126,196,139,.6); color: #7ec48b; }


/* ── Warenpreise als Klappbereich im Lager ── */
.preis-klapp { margin-top: 22px; padding: 0; overflow: hidden; }
.preis-summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; cursor: pointer; list-style: none;
  transition: background .18s ease;
}
.preis-summary::-webkit-details-marker { display: none; }
.preis-summary:hover { background: rgba(var(--gold-rgb), .05); }
.preis-summary-titel { font-size: 15px; font-weight: 600; color: var(--gold); letter-spacing: .04em; }
.preis-summary-wert {
  font-family: ui-monospace, Consolas, monospace; font-size: 17px; font-weight: 700;
  color: var(--gold);
}
.preis-summary-satz { font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.preis-pfeil { margin-left: auto; color: rgba(var(--gold-rgb), .8); transition: transform .25s ease; }
.preis-klapp[open] .preis-pfeil { transform: rotate(180deg); }
.preis-klapp[open] .preis-summary { border-bottom: 1px solid rgba(var(--gold-rgb), .18); }
.preis-inhalt { padding: 18px 20px 20px; animation: preisAuf .25s ease both; }
@keyframes preisAuf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.preis-inhalt .preis-rahmen { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .preis-inhalt { animation: none; }
  .preis-pfeil { transition: none; }
}


/* ══ Wachplan ════════════════════════════════════════════════════════
   Sieben Tage in der Breite, drei Wachen in der Höhe. */
.wach-rahmen {
  overflow-x: auto; margin-top: 16px;
  border: 1px solid rgba(var(--gold-rgb), .16); border-radius: 12px;
  background: rgba(0, 0, 0, .18);
}
table.wachplan { width: 100%; border-collapse: collapse; min-width: 900px; }
table.wachplan th, table.wachplan td {
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  border-right: 1px solid rgba(255, 255, 255, .04);
  padding: 10px 12px; vertical-align: top;
}
table.wachplan tr:last-child th, table.wachplan tr:last-child td { border-bottom: 0; }
table.wachplan thead th {
  text-align: center; background: rgba(var(--gold-rgb), .06);
  border-bottom: 1px solid rgba(var(--gold-rgb), .2);
}
.wach-eckkopf {
  text-align: left !important; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(var(--hell-rgb), .5);
}
.wach-tag { display: block; font-size: 13px; font-weight: 600; color: rgba(var(--hell-rgb), .9); }
.wach-datum { display: block; font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.wach-heute {
  display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(var(--gold-rgb), .18); color: var(--gold);
}
table.wachplan thead th.ist-heute { background: rgba(var(--gold-rgb), .12); }

.wach-schicht { width: 190px; }
.wach-schicht-icon { font-size: 16px; }
.wach-schicht-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--gold); }
.wach-schicht-zeit {
  display: block; margin-top: 2px; font-size: 11px;
  font-family: ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45);
}

.wach-zelle { min-width: 96px; }
.wach-zelle.ist-heute { background: rgba(var(--gold-rgb), .045); }
.wach-zelle.wach-offen { background: rgba(224, 71, 95, .05); }

.wach-block {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 5px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(var(--gold-rgb), .09);
  animation: wachAuf .3s ease both;
}
.wach-block.meiner { border-color: rgba(var(--gold-rgb), .55); background: rgba(var(--gold-rgb), .16); }
.wach-name { font-size: 12.5px; font-weight: 600; color: rgba(var(--hell-rgb), .95); }
.wach-notiz { font-size: 11px; color: rgba(var(--hell-rgb), .5); }
@keyframes wachAuf { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.wach-weg { display: inline; margin-left: auto; }
.wach-weg button {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 11px; color: rgba(var(--hell-rgb), .35);
}
.wach-weg button:hover { color: var(--blood-soft, #e0475f); }

.wach-frei {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; text-decoration: none;
  border: 1px dashed rgba(var(--gold-rgb), .3); color: rgba(var(--gold-rgb), .7);
  font-size: 14px; line-height: 1; transition: all .15s ease;
}
.wach-frei:hover { border-style: solid; border-color: var(--gold); color: var(--gold); transform: scale(1.08); }
.wach-leer { color: rgba(var(--hell-rgb), .22); }

.wach-konto { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wach-kontozeile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .2);
}
.wach-kontozeile.meine { border-color: rgba(var(--gold-rgb), .45); }
.wach-kreis {
  width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--c);
}
.wach-kontoname { font-size: 13px; color: rgba(var(--hell-rgb), .9); }
.wach-kontozahl {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--gold);
}
@media (prefers-reduced-motion: reduce) {
  .wach-block { animation: none; }
  .wach-frei { transition: none; }
}


/* ══ Kopf: neuer Schwung ═════════════════════════════════════════════
   Hinter dem Kopf liegt ein ruhiges Farbspiel, das langsam wandert, und
   am unteren Rand läuft ab und zu ein Lichtstrich durch. Beides nimmt
   die Farben des Bereichs an, in dem man gerade ist. */
header { position: sticky; overflow: hidden; isolation: isolate; }
header::before {
  content: ''; position: absolute; left: -10%; right: -10%; top: -70%; height: 260%;
  z-index: -2; pointer-events: none; opacity: .9;
  background:
    radial-gradient(42% 38% at 18% 45%, rgba(var(--gold-rgb), .18), transparent 70%),
    radial-gradient(36% 42% at 74% 28%, rgba(var(--blut-rgb), .16), transparent 72%),
    radial-gradient(30% 36% at 48% 88%, rgba(var(--gold-rgb), .10), transparent 70%);
  animation: kopfWogen 28s ease-in-out infinite alternate;
}
@keyframes kopfWogen {
  0%   { transform: translate3d(-3%, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(4%, -1%, 0) scale(1.03); }
}
header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .75), transparent);
  background-size: 32% 100%; background-repeat: no-repeat;
  animation: kopfStrich 11s linear infinite;
}
@keyframes kopfStrich {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* Das Wappen atmet leicht und richtet sich beim Überfahren auf */
.logo img { transition: filter .3s ease, transform .35s cubic-bezier(.2, .8, .3, 1); }
.logo:hover img { transform: translateY(-2px) scale(1.04) rotate(-1.5deg); }
.logo span .brand-1, .logo span .brand-2 { transition: letter-spacing .35s ease, color .3s ease; }
.logo:hover .brand-1 { letter-spacing: .21em; }
.logo:hover .brand-2 { letter-spacing: .33em; color: var(--hell, #f0dca8); }

/* Die Fassung als kleines Schild, das ruhig pulst */
.brand-fassung {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .12);
  animation: fassungPuls 4.5s ease-in-out infinite;
}
@keyframes fassungPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .25); }
  50%      { box-shadow: 0 0 10px 1px rgba(var(--gold-rgb), .18); }
}

/* Die Menüpunkte bekommen einen Strich, der aus der Mitte wächst */
.navlink { position: relative; border-bottom-color: transparent !important; }
.navlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.navlink:hover::after { transform: scaleX(.75); }
.navlink.an::after { transform: scaleX(1); }
.navlink.an {
  color: #fafafa;
  text-shadow: 0 0 14px rgba(var(--gold-rgb), .45);
}
.navlink:hover { transform: translateY(-1px); }
.navlink { transition: color .2s, transform .2s, text-shadow .3s; }

/* Der Knopf oben rechts bekommt einen Glanz, der durchläuft */
.kopfknopf { position: relative; overflow: hidden; }
.kopfknopf::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.kopfknopf:hover::before { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  header::before, header::after, .brand-fassung { animation: none; }
  .logo img, .navlink, .navlink::after, .kopfknopf::before { transition: none; }
  .logo:hover img { transform: none; }
}

/* ══ Aufträge ════════════════════════════════════════════════════════ */

.auftrag-fortschritt { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.auftrag-balken {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.auftrag-balken span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(126, 196, 139, .9), rgba(126, 196, 139, .45));
  animation: balkenWachsen 1.1s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes balkenWachsen { from { width: 0 !important; } }
.auftrag-balkenzahl {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  color: rgba(var(--hell-rgb), .55); white-space: nowrap;
}

.auftrag-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  position: relative; overflow: hidden;
}
.auftrag-kachel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--c); opacity: .5; transform: scaleX(.3); transform-origin: left;
  transition: transform .3s ease, opacity .3s ease;
}
.auftrag-kachel:hover::before, .auftrag-kachel.gewaehlt::before { transform: scaleX(1); opacity: 1; }
.auftrag-kachelicon { font-size: 20px; line-height: 1; }
.auftrag-kachel .num { font-size: 26px; font-weight: 700; line-height: 1.1; }

.auftrag-werkzeug {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.auftrag-werkzeugfeld { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.auftrag-suchfeld { width: 220px; padding: 7px 12px; font-size: 13px; }
.auftrag-sortierung { width: auto; padding: 7px 12px; font-size: 13px; }
.auftrag-zurueck { font-size: 12px; color: #877a60; text-decoration: none; white-space: nowrap; }
.auftrag-zurueck:hover { color: var(--gold); }

.auftrag-gruppe { margin-top: 18px; }
.auftrag-gruppe[hidden] { display: none !important; }
.auftrag-gruppenkopf {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(var(--gold-rgb), .14);
}
.auftrag-gruppenicon { font-size: 15px; }
.auftrag-gruppenzahl {
  margin-left: auto; font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: rgba(var(--hell-rgb), .45);
}

.auftrag-karten { display: grid; gap: 10px; }
.auftrag-karte {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px 14px 18px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--line); background: rgba(22, 16, 18, .55);
  animation: karteAuf .4s ease both; animation-delay: var(--d, 0ms);
  transition: transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.auftrag-karte[hidden] { display: none !important; }
.auftrag-karte::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--ton, rgba(var(--gold-rgb), .7));
  transition: top .2s ease, bottom .2s ease;
}
.auftrag-karte:hover {
  transform: translateY(-2px); border-color: rgba(var(--gold-rgb), .4);
  background: rgba(var(--gold-rgb), .06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.auftrag-karte:hover::before { top: 0; bottom: 0; }
.auftrag-karte.t-gold   { --ton: var(--gold); }
.auftrag-karte.t-blue   { --ton: #6ab0e6; }
.auftrag-karte.t-green  { --ton: #7ec48b; }
.auftrag-karte.t-red    { --ton: #e0475f; }
.auftrag-karte.t-orange { --ton: #e0a34a; }
.auftrag-karte.meiner { border-color: rgba(var(--gold-rgb), .45); }
@keyframes karteAuf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.auftrag-icon {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 19px;
  background: rgba(var(--gold-rgb), .09); border: 1px solid rgba(var(--gold-rgb), .18);
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), background .2s ease;
}
.auftrag-karte:hover .auftrag-icon { transform: scale(1.08) rotate(-4deg); background: rgba(var(--gold-rgb), .16); }

.auftrag-inhalt { flex: 1; min-width: 0; }
.auftrag-kopfzeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.auftrag-titel { font-size: 15px; font-weight: 600; color: #f4f4f5; }
.auftrag-karte:hover .auftrag-titel { color: var(--gold); }
.auftrag-prio {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .1); color: rgba(var(--hell-rgb), .6);
}
.auftrag-prio.dringend {
  color: #ff8d7a; border-color: rgba(224, 71, 95, .5); background: rgba(224, 71, 95, .12);
  animation: prioPuls 2.4s ease-in-out infinite;
}
.auftrag-prio.hoch { color: #e9b05f; border-color: rgba(224, 163, 74, .45); background: rgba(224, 163, 74, .1); }
@keyframes prioPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 71, 95, .35); }
  50%      { box-shadow: 0 0 9px 1px rgba(224, 71, 95, .28); }
}

.auftrag-text {
  display: block; margin-top: 5px; font-size: 13px; line-height: 1.5;
  color: rgba(var(--hell-rgb), .55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.auftrag-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.auftrag-niemand { color: rgba(var(--hell-rgb), .4); border-style: dashed; }
.auftrag-person {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 3px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(0, 0, 0, .22);
  color: rgba(var(--hell-rgb), .8);
}
.auftrag-person.meiner { border-color: rgba(var(--gold-rgb), .5); color: var(--gold); }
.auftrag-kreis {
  width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; background: var(--c);
}
.auftrag-fuss {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;
  letter-spacing: .06em; color: rgba(var(--hell-rgb), .35);
}
.auftrag-nummer { margin-left: auto; }
.auftrag-pfeil {
  align-self: center; flex: none; font-size: 16px; color: rgba(var(--gold-rgb), .35);
  transform: translateX(-4px); opacity: 0; transition: all .25s ease;
}
.auftrag-karte:hover .auftrag-pfeil { transform: translateX(0); opacity: 1; color: var(--gold); }
.auftrag-leer { margin-top: 16px; text-align: center; color: rgba(var(--hell-rgb), .45); }

@media (max-width: 640px) {
  .auftrag-werkzeugfeld { margin-left: 0; width: 100%; }
  .auftrag-suchfeld { flex: 1; width: auto; }
  .auftrag-fuss .auftrag-nummer { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auftrag-karte, .auftrag-balken span, .auftrag-prio.dringend { animation: none; }
  .auftrag-karte, .auftrag-icon, .auftrag-pfeil { transition: none; }
}


/* ── Abwesenheit: Zahlen im Kopf und die drei Tage ── */
.abw-kopfzahl { color: var(--c); white-space: nowrap; }

.abw-statistik {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px;
}
.abw-statkarte {
  padding: 14px 16px; border-radius: 12px;
  animation: statAuf .35s ease both;
}
.abw-statkarte.heute {
  border-color: rgba(var(--gold-rgb), .45);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .18);
}
@keyframes statAuf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.abw-stat-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.abw-stat-name {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .75);
}
.abw-statkarte.heute .abw-stat-name { color: var(--gold); }
.abw-stat-datum {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  color: rgba(var(--hell-rgb), .4);
}
.abw-stat-da {
  margin: 8px 0 0; font-size: 26px; font-weight: 700; line-height: 1.1;
  color: rgba(var(--hell-rgb), .95); font-variant-numeric: tabular-nums;
}
.abw-stat-da span {
  margin-left: 6px; font-size: 11.5px; font-weight: 400;
  color: rgba(var(--hell-rgb), .45);
}
.abw-stat-zahlen { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.abw-stat-teil {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  /* Zuerst schlicht, damit es auch ohne color-mix steht */
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .22);
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
.abw-stat-zeichen { font-size: 12px; }
.abw-stat-zahl { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.abw-stat-wort { color: rgba(var(--hell-rgb), .55); }
.abw-bilanz-teil.sp { color: #e0a34a; border-color: rgba(224, 163, 74, .3); background: rgba(224, 163, 74, .08); }

@media (max-width: 760px) {
  .abw-statistik { grid-template-columns: 1fr; }
  .abw-stat-da { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .abw-statkarte { animation: none; } }


/* ── Abwesenheit: die Wahl im Fenster ── */
.abw-wahl { display: grid; gap: 8px; margin-top: 16px; }
.abw-wahlknopf {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.abw-wahlknopf:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--c) 22%, transparent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.abw-wahlknopf:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.abw-wahlknopf[hidden] { display: none !important; }
.abw-wahlzeichen {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px;
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.abw-raeumen { color: rgba(var(--hell-rgb), .55); }
.abw-raeumen[hidden] { display: none !important; }

/* ── Warteliste: das ✕ räumt sofort ── */
button.vind-loeschen {
  width: 100%; border: 0; background: none; font: inherit; padding: 0;
}

/* ── Termine: Stunden ohne Termin stehen niedriger ──
   Der Kalender zeigt den ganzen Tag; leere Stunden rücken zusammen,
   damit man nicht durch vierundzwanzig hohe Zeilen blättern muss. */
.kal-zelle.kal-still { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
.kal-zeit.kal-still { padding-top: 5px; opacity: .7; }

/* ── Schichtplan: halbe Stunden, mehrere Leute je Schicht ──
   Jede Zeile ist eine halbe Stunde; die vollen Stunden tragen eine
   etwas kräftigere Linie. Stehen mehrere Leute in einer Zelle, liegen
   sie untereinander, und ein kleines „+" setzt eine weitere Person dazu. */
.schichtplan tr.schicht-halb th.schicht-zeit { opacity: .6; font-size: 10px; }
.schichtplan tr:not(.schicht-halb) td,
.schichtplan tr:not(.schicht-halb) th { border-top: 1px solid rgba(var(--gold-rgb),.14); }
.schicht-zelle .schicht-block { height: auto; }
.schicht-zelle .schicht-block + .schicht-block { margin-top: 2px; }
.schicht-block:not(.anfang) .schicht-name { opacity: .75; font-weight: 500; }
.schicht-dazu {
  display: block; height: 14px; margin-top: 2px; border-radius: 4px;
  text-align: center; text-decoration: none; color: transparent;
  font: 600 11px/14px ui-sans-serif, system-ui, sans-serif;
  transition: background .15s, color .15s;
}
.schicht-zelle:hover .schicht-dazu { color: var(--gold); background: rgba(var(--gold-rgb),.1); }
.schicht-dazu:focus-visible { color: var(--gold); outline: 1px solid rgba(var(--gold-rgb),.5); }

.schicht-wer { grid-column: 1 / -1; }
.schicht-leute {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
  max-height: 180px; overflow: auto; padding: 2px;
}
.schicht-person {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid rgba(var(--gold-rgb),.2); background: rgba(0,0,0,.25);
  transition: border-color .15s, background .15s;
}
.schicht-person:hover { border-color: rgba(var(--gold-rgb),.45); }
.schicht-person:has(input:checked) {
  border-color: rgba(var(--gold-rgb),.6); background: rgba(var(--gold-rgb),.14);
}
.schicht-person input { accent-color: var(--gold); margin: 0; }

/* Die Fassung („V 2.0") steht bei Hotel und Red Cycle hinter einem
   größeren Namen als beim Codebreaker — damit die Kapsel überall
   gleich groß ist, bekommt sie hier eine feste Größe. */
.brand-2.allein .brand-fassung { font-size: 10.5px; vertical-align: middle; }

/* Feldwerte in den Akten: Der Einzug aus dem Quelltext darf nicht mit
   in den Text rutschen — sonst steht die erste Zeile eingerückt. Das
   <dd> fasst Leerraum darum normal zusammen; nur der Text selbst
   behält seine Zeilenumbrüche. */
dd.feldwert { white-space: normal; }
dd.feldwert .feldtext { white-space: pre-wrap; }

/* ══ Personal: vier Seiten unter einem Menüpunkt ═════════════════════
   Übersicht, Schichtplan, Mannschaft und Leitfaden teilen sich eine
   Reiterleiste. Die Übersicht zeigt Zahlen und Wege, nicht alles auf
   einmal. */
.personal-reiter {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 6px;
  border: 1px solid rgba(var(--gold-rgb), .16); border-radius: 14px;
  background: rgba(var(--flaeche-rgb), .7);
}
.personal-reiterpunkt {
  flex: 1 1 140px; text-align: center; text-decoration: none;
  padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  letter-spacing: .06em; color: rgba(var(--hell-rgb), .62);
  border: 1px solid transparent; transition: background .16s, color .16s, border-color .16s;
}
.personal-reiterpunkt:hover { color: var(--gold-hell); background: rgba(var(--gold-rgb), .08); }
.personal-reiterpunkt.an {
  color: #fff; border-color: rgba(var(--gold-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .24), rgba(var(--gold-rgb), .1));
  box-shadow: 0 0 16px rgba(var(--gold-rgb), .18);
}

.personal-zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-top: 18px;
}
.personal-zahl {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  text-decoration: none; color: inherit;
}
.personal-zahlwert {
  font-size: 30px; font-weight: 600; line-height: 1; color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
}
.personal-zahltext { font-size: 12.5px; color: rgba(var(--hell-rgb), .55); }

.personal-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px; margin-top: 14px; align-items: start;
}
.personal-karte { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.personal-kartenkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.personal-leer { margin: 0; font-size: 13px; color: rgba(var(--hell-rgb), .45); }
.personal-weiter {
  align-self: flex-start; font-size: 12.5px; text-decoration: none; color: var(--gold);
  letter-spacing: .03em;
}
.personal-weiter:hover { color: var(--gold-hell); text-decoration: underline; }
.personal-auszug { margin: 0; font-size: 13.5px; line-height: 1.7; color: rgba(var(--hell-rgb), .72); }

.personal-dienst, .personal-stellenliste {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.personal-dienst li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(var(--gold-rgb), .05); border-left: 2px solid rgba(var(--gold-rgb), .35);
}
.personal-dienst li.meine { border-left-color: var(--gold); background: rgba(var(--gold-rgb), .12); }
.personal-dienstzeit {
  font: 600 12px/1 ui-monospace, Consolas, monospace; color: var(--gold-hell); min-width: 92px;
}
.personal-dienstname { font-size: 13.5px; font-weight: 600; }
.personal-dienstaufgabe { font-size: 12px; color: rgba(var(--hell-rgb), .5); }

.personal-stellenliste li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.personal-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.personal-stellenname { flex: 1; color: rgba(var(--hell-rgb), .75); }
.personal-stellenzahl { font: 600 13px ui-monospace, Consolas, monospace; color: var(--gold-hell); }

/* Mannschaft: Suche und Stellenfilter über der Liste */
.personal-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px;
}
.personal-filter .input { flex: 1 1 260px; max-width: 420px; }
.personal-stellen { display: flex; flex-wrap: wrap; gap: 6px; }
.personal-stelle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 12.5px;
  color: var(--c, rgba(var(--hell-rgb), .8));
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(0, 0, 0, .22);
  transition: background .15s, border-color .15s;
}
.personal-stelle span {
  font: 600 11px/1 ui-monospace, Consolas, monospace; padding: 3px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: rgba(var(--hell-rgb), .8);
}
.personal-stelle:hover { border-color: rgba(var(--gold-rgb), .45); }
.personal-stelle.an { border-color: rgba(var(--gold-rgb), .6); background: rgba(var(--gold-rgb), .14); }
.personal-treffer { margin: 0; flex-basis: 100%; }
.personal-leiste { margin-top: 12px; }
.personal-info { margin-top: 8px; }
.personal-info summary {
  cursor: pointer; font-size: 12px; color: rgba(var(--hell-rgb), .5); width: max-content;
}
.personal-info summary:hover { color: var(--gold); }
.personal-info p { margin: 8px 0 0; }
tr.mann-zeile.hidden { display: none; }
@media (max-width: 620px) {
  .personal-zahlen { grid-template-columns: 1fr 1fr; gap: 10px; }
  .personal-zahl { padding: 14px 15px; }
  .personal-zahlwert { font-size: 24px; }
  .personal-reiterpunkt { flex-basis: 40%; padding: 9px 10px; font-size: 13px; }
}

/* ── Bereichswahl in den Farben des Codebreakers ──
   Die Seite trägt dessen Palette (Schwarz und Schwarzlicht) über
   body.welt-codebreaker; hier werden nur noch die fest eingetragenen
   warmen Töne der Karten auf die Palette umgestellt. */
.wahlseite.welt-codebreaker .wahl-karte {
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb),.92), rgba(var(--kopf-rgb),.94));
  border-color: rgba(var(--gold-rgb),.18);
}
.wahlseite.welt-codebreaker .wahl-zeile { color: rgba(var(--gold-rgb),.75); }
.wahlseite.welt-codebreaker .wahl-name  { color: var(--gold-hell); }
.wahlseite.welt-codebreaker .wahl-unter { color: rgba(var(--hell-rgb),.78); }
.wahlseite.welt-codebreaker .wahl-text  { color: rgba(var(--hell-rgb),.55); }
.wahlseite.welt-codebreaker .wahl-knopf { color: var(--gold-hell); }

/* Schichtplan: Zeiten außerhalb der Schichtzeit eines Tages (Mo–Fr
   nach 01:00 Uhr) sind schraffiert und nehmen keine Einträge an. */
.schicht-zelle.schicht-zu {
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.025) 0 6px, transparent 6px 12px);
}

/* ══ Sanktionen ══════════════════════════════════════════════════════
   Aufgebaut wie die Abwesenheit: oben die Zahlen, darunter die Liste.
   Jede Zeile trägt die Farbe ihrer Art an der linken Kante. */

.sank-kopfzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sank-kopfzahl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px;
  color: var(--c, var(--gold)); border: 1px solid color-mix(in srgb, var(--c, #888) 45%, transparent);
  background: color-mix(in srgb, var(--c, #888) 12%, transparent);
}
.sank-kopfzahl strong { font: 700 13px ui-monospace, Consolas, monospace; }

.sank-statistik {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-top: 18px;
}
.sank-statkarte { padding: 16px 18px; }
.sank-statzahl {
  margin: 0; font-size: 28px; font-weight: 600; line-height: 1;
  color: var(--gold-hell); font-variant-numeric: tabular-nums;
}
.sank-stattext { margin: 6px 0 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .55); }

.sank-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}

.sank-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.sank-filter .input { flex: 1 1 240px; max-width: 380px; }
.sank-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.sank-pille {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 12.5px;
  color: var(--c, rgba(var(--hell-rgb), .75));
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(0, 0, 0, .22);
  transition: background .15s, border-color .15s, transform .15s;
}
.sank-pille span {
  font: 600 11px/1 ui-monospace, Consolas, monospace; padding: 2px 6px;
  border-radius: 999px; background: rgba(255, 255, 255, .08);
}
.sank-pille:hover { border-color: rgba(var(--gold-rgb), .45); transform: translateY(-1px); }
.sank-pille.an { border-color: currentColor; background: rgba(var(--gold-rgb), .14); }
.sank-treffer { margin: 0; flex-basis: 100%; }

.sank-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sank-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px;
  align-items: start; padding: 14px 16px 14px 18px; position: relative; overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.sank-zeile::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  height: auto; border-radius: 0; background: var(--c, var(--gold)); opacity: .85;
}
.sank-zeile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c, #888) 45%, transparent);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
}
.sank-zeile[data-status="AUFGEHOBEN"], .sank-zeile[data-status="ERLEDIGT"] { opacity: .72; }

.sank-bild {
  position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  flex: none; border: 1px solid rgba(var(--gold-rgb), .3);
}
.sank-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sank-ersatz {
  display: none; width: 100%; height: 100%; align-items: center; justify-content: center;
  font: 700 18px/1 ui-sans-serif, system-ui, sans-serif;
  color: #14100b; background: var(--c, var(--gold));
}
.sank-bild.ohne-bild img { display: none; }
.sank-bild.ohne-bild .sank-ersatz { display: flex; }

.sank-inhalt { min-width: 0; }
.sank-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sank-name { font-size: 15.5px; font-weight: 600; color: var(--champagner, #f4f4f5); }
.badge.sank-art {
  color: var(--c, var(--gold));
  border-color: color-mix(in srgb, var(--c, #888) 50%, transparent);
  background: color-mix(in srgb, var(--c, #888) 14%, transparent);
}
.badge.sank-status { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.sank-offen { color: #e0a34a; border-color: rgba(224, 163, 74, .45); }
.sank-erledigt { color: #7ec48b; border-color: rgba(126, 196, 139, .45); }
.sank-aufgehoben { color: #877a60; border-color: rgba(135, 122, 96, .45); }
.sank-zeit { margin: 6px 0 0; font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.sank-grund { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: rgba(var(--hell-rgb), .8); }
.sank-fuss { margin: 8px 0 0; font-size: 11.5px; color: rgba(var(--hell-rgb), .38); }

.sank-taten { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sank-taten form { margin: 0; }
.sank-tat {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; text-decoration: none;
  color: var(--gold-hell); background: transparent;
  border: 1px solid rgba(var(--gold-rgb), .32);
  transition: background .15s, border-color .15s;
}
.sank-tat:hover { background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .6); }
.sank-tat.gefahr { color: #e8879a; border-color: rgba(224, 71, 95, .4); }
.sank-tat.gefahr:hover { background: rgba(var(--blut-rgb), .18); border-color: rgba(224, 71, 95, .7); }

.sank-zahl {
  display: inline-flex; min-width: 26px; justify-content: center; padding: 3px 8px;
  border-radius: 999px; font: 600 12px ui-monospace, Consolas, monospace;
  background: rgba(255, 255, 255, .06); color: rgba(var(--hell-rgb), .6);
}
.sank-zahl.warnt { background: rgba(224, 163, 74, .18); color: #e0a34a; }

@media (max-width: 720px) {
  .sank-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .sank-taten { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .sank-tat { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sank-zeile, .sank-pille { transition: none; }
  .sank-zeile:hover, .sank-pille:hover { transform: none; }
}

/* ══ Termine: Karten, Filter und ein lebendigeres Raster ════════════ */

.term-naechste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-top: 12px;
}
.term-karte {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px 16px 20px; text-decoration: none; color: inherit;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
}
.term-karte::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; height: auto;
  border-radius: 0; background: var(--c, var(--gold));
}
.term-karte:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c, #888) 50%, transparent);
  box-shadow: 0 18px 38px rgba(0,0,0,.45);
}
.term-bald {
  font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c, var(--gold));
}
.term-karte .term-uhr {
  font: 700 26px/1.1 ui-monospace, Consolas, monospace; color: var(--champagner, #f4f4f5);
  font-variant-numeric: tabular-nums;
}
.term-titel { font-size: 14px; font-weight: 600; color: rgba(var(--hell-rgb), .9); }
.term-wann, .term-fuer { font-size: 11.5px; color: rgba(var(--hell-rgb), .45); }

.term-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.term-filter .input { flex: 1 1 240px; max-width: 360px; }
.term-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.term-pille {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 12.5px;
  color: var(--c, rgba(var(--hell-rgb), .75));
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(0,0,0,.22);
  transition: background .15s, border-color .15s, transform .15s;
}
.term-pille span {
  font: 600 11px/1 ui-monospace, Consolas, monospace; padding: 2px 6px;
  border-radius: 999px; background: rgba(255,255,255,.08);
}
.term-pille:hover { border-color: rgba(var(--gold-rgb), .45); transform: translateY(-1px); }
.term-pille.an { border-color: currentColor; background: rgba(var(--gold-rgb), .14); }
.term-treffer { margin: 0; flex-basis: 100%; }

/* Das Raster: die laufende Stunde hebt sich ab, Einträge heben sich
   beim Überfahren, Ausgefiltertes tritt zurück. */
.kal-zeit.kal-jetzt { color: var(--gold); font-weight: 700; }
.kal-zelle.kal-jetzt { box-shadow: inset 0 2px 0 rgba(var(--gold-rgb), .55); }
.kal-termin {
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, opacity .18s, filter .18s;
}
.kal-termin:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.kal-termin.blass { opacity: .18; filter: grayscale(.8); }
.termin { transition: border-color .2s, box-shadow .2s; }

@media (prefers-reduced-motion: reduce) {
  .term-karte, .term-pille, .kal-termin { transition: none; }
  .term-karte:hover, .term-pille:hover, .kal-termin:hover { transform: none; }
}

@media (max-width: 640px) {
  .exko-kopf { top: -20px; margin: -20px -18px 14px; padding: 14px 14px 12px; border-radius: 20px 20px 0 0; }
  .exko-kasten .exko-fuss,
  .exko-kasten > div:last-child:has(> .btn) { margin: 16px -18px -22px; padding: 14px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .exko-zu:hover { transform: none; }
}

/* ══ Termine: die Tagesansicht ═══════════════════════════════════════
   Sieben Karten statt eines Rasters mit vierundzwanzig Zeilen — je Tag
   eine Spalte mit dem, was ansteht. Das Raster bleibt als zweite
   Ansicht bestehen; umgeschaltet wird darüber. */

.term-ansicht {
  display: inline-flex; gap: 4px; margin-top: 20px; padding: 4px;
  border: 1px solid rgba(var(--gold-rgb), .18); border-radius: 999px;
  background: rgba(var(--flaeche-rgb), .7);
}
.term-knopf {
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: rgba(var(--hell-rgb), .6); background: transparent; border: 1px solid transparent;
  transition: color .16s, background .16s, border-color .16s;
}
.term-knopf:hover { color: var(--gold-hell); background: rgba(var(--gold-rgb), .08); }
.term-knopf.an {
  color: #fff; border-color: rgba(var(--gold-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .26), rgba(var(--gold-rgb), .12));
  box-shadow: 0 0 16px rgba(var(--gold-rgb), .2);
}

.term-tage {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 14px; align-items: start;
}
.term-tag {
  display: flex; flex-direction: column; gap: 7px; padding: 14px 14px 12px;
  transition: border-color .2s, box-shadow .2s, opacity .2s;
}
.term-tag.ist-heute {
  border-color: rgba(var(--gold-rgb), .45);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .18) inset, 0 16px 34px rgba(0,0,0,.35);
}
.term-tag.term-gefiltert { opacity: .35; }
.term-tagkopf { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.term-tagname {
  font: 600 13px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(var(--hell-rgb), .85);
}
.term-tagdatum { font: 11.5px/1 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .4); }
.term-heute {
  font: 700 9px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); padding: 3px 7px; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .1);
}
.term-tagzahl {
  margin-left: auto; min-width: 22px; text-align: center; padding: 3px 7px;
  border-radius: 999px; font: 600 11px/1 ui-monospace, Consolas, monospace;
  color: rgba(var(--hell-rgb), .7); background: rgba(255, 255, 255, .06);
}
.term-tagleer { margin: 4px 0; font-size: 12px; color: rgba(var(--hell-rgb), .3); }

.term-eintrag {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px; align-items: center; text-decoration: none; color: inherit;
  padding: 9px 10px 9px 13px; border-radius: 11px;
  border: 1px solid rgba(var(--gold-rgb), .12); background: rgba(255, 255, 255, .025);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .18s, border-color .18s;
}
.term-eintrag::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--c, var(--gold));
}
.term-eintrag:hover {
  transform: translateX(3px); background: rgba(var(--gold-rgb), .09);
  border-color: color-mix(in srgb, var(--c, #888) 45%, transparent);
}
.term-eintrag.meiner { background: rgba(var(--gold-rgb), .1); border-color: rgba(var(--gold-rgb), .3); }
.term-eintraguhr {
  font: 700 13px/1 ui-monospace, Consolas, monospace; color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
}
.term-eintragtext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.term-eintragtitel {
  font-size: 13px; font-weight: 600; color: rgba(var(--hell-rgb), .92);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-eintragmeta {
  font-size: 11px; color: rgba(var(--hell-rgb), .42);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c, var(--gold)); box-shadow: 0 0 8px var(--c, var(--gold));
}
.term-tagplus {
  margin-top: auto; text-align: center; text-decoration: none;
  padding: 7px 10px; border-radius: 9px; font-size: 12px;
  color: rgba(var(--hell-rgb), .35);
  border: 1px dashed rgba(var(--gold-rgb), .22);
  transition: color .16s, border-color .16s, background .16s;
}
.term-tagplus:hover {
  color: var(--gold); border-color: rgba(var(--gold-rgb), .5);
  background: rgba(var(--gold-rgb), .08);
}

@media (prefers-reduced-motion: reduce) {
  .term-eintrag, .term-knopf, .term-tag { transition: none; }
  .term-eintrag:hover { transform: none; }
}

/* ══ Datenbank und Routen — neuer Aufbau ═════════════════════════════
   Kopfband mit Wappen und Kennzahlen, darunter eine Werkzeugleiste
   (suchen, sortieren, Karten oder Liste), die Rubriken als Marken und
   zuletzt die Akten als Karten mit Deckbild. Alles hängt an .db-* und
   gilt nur auf diesen beiden Seiten. */

/* ── Kopfband ──────────────────────────────────────────────────── */
.db-kopf {
  position: relative; overflow: hidden; margin-top: 24px; padding: 0;
  border-color: color-mix(in srgb, var(--c, #888) 30%, transparent);
}
.db-kopf::after {
  content: ''; position: absolute; inset: -60% -20% auto -20%; height: 150%;
  border-radius: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 20% 0%, color-mix(in srgb, var(--c, #888) 22%, transparent), transparent 70%);
  animation: dbSchein 18s ease-in-out infinite alternate;
}
@keyframes dbSchein {
  from { transform: translate3d(-3%, -2%, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(4%, 2%, 0) scale(1.08); opacity: 1; }
}
.db-kopf .tabs { position: relative; z-index: 1; border-bottom-color: rgba(var(--gold-rgb), .14); }
.db-kopfinhalt {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px;
}
.db-wappen {
  display: grid; place-items: center; flex: none; width: 62px; height: 62px;
  border-radius: 18px; font-size: 30px;
  color: var(--c, var(--gold));
  background: color-mix(in srgb, var(--c, #888) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #888) 38%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--c, #888) 22%, transparent) inset;
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.db-kopf:hover .db-wappen { transform: translateY(-2px) rotate(-4deg); }
.db-kopftext { min-width: 200px; flex: 1 1 240px; }
.db-kopftext h1 {
  margin: 4px 0 0; font-size: 30px; line-height: 1.1;
  text-shadow: 0 0 22px color-mix(in srgb, var(--c, #888) 35%, transparent);
}
.db-kopftext .muted { margin-top: 4px; }
.db-kennzahlen { display: flex; gap: 10px; flex-wrap: wrap; }
.db-kennzahl {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 16px;
  border-radius: 13px; border: 1px solid rgba(var(--gold-rgb), .16);
  background: rgba(0, 0, 0, .25); min-width: 104px;
}
.db-kennzahl strong {
  font: 700 19px/1 ui-monospace, Consolas, monospace; color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
}
.db-kennzahl small {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .42);
}
.db-anlegen { flex: none; }

/* ── Werkzeugleiste ────────────────────────────────────────────── */
.db-werkzeuge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px;
}
.db-suchform { display: flex; gap: 8px; flex: 1 1 320px; margin: 0; }
.db-suchfeld { position: relative; flex: 1 1 auto; display: block; }
.db-suchfeld .input { width: 100%; padding-left: 38px; padding-right: 34px; border-radius: 999px; }
.db-lupe {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .5; pointer-events: none;
}
.db-leeren {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1;
  font-size: 11px; color: rgba(var(--hell-rgb), .55);
  background: rgba(255, 255, 255, .06); border: 0;
}
.db-leeren:hover { color: #fff; background: rgba(var(--blut-rgb), .3); }
.db-tief { white-space: nowrap; border-radius: 999px; }
.db-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-sortwahl { display: flex; align-items: center; gap: 8px; }
.db-sortwahl > span {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .4);
}
.db-sortwahl .input { padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.db-ansicht {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .25);
}
.db-knopf {
  width: 36px; height: 32px; border-radius: 999px; cursor: pointer; font-size: 13px;
  color: rgba(var(--hell-rgb), .5); background: transparent; border: 1px solid transparent;
  transition: color .16s, background .16s, border-color .16s;
}
.db-knopf:hover { color: var(--gold-hell); background: rgba(var(--gold-rgb), .1); }
.db-knopf.an {
  color: #fff; border-color: rgba(var(--gold-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .26), rgba(var(--gold-rgb), .12));
}

/* ── Marken zum Filtern ────────────────────────────────────────── */
.db-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.db-chip {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px;
  color: var(--c, rgba(var(--hell-rgb), .72));
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .22);
  transition: transform .16s, background .16s, border-color .16s;
}
.db-chip span {
  font: 600 11px/1 ui-monospace, Consolas, monospace; padding: 2px 7px;
  border-radius: 999px; background: rgba(255, 255, 255, .07);
  color: rgba(var(--hell-rgb), .75);
}
.db-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--c, #888) 55%, transparent);
  background: color-mix(in srgb, var(--c, #888) 12%, transparent);
}
.db-chip.an {
  border-color: currentColor;
  background: color-mix(in srgb, var(--c, #888) 18%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c, #888) 18%, transparent);
}

.db-ausklapp { margin-top: 14px; }

/* ── Überschrift der Ergebnisse ────────────────────────────────── */
.db-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 24px;
}
.db-treffer {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font: 600 11px/1.6 ui-monospace, Consolas, monospace;
  color: var(--gold-hell); background: rgba(var(--gold-rgb), .14);
  border: 1px solid rgba(var(--gold-rgb), .25);
}
.db-zurueck { font-size: 12px; color: rgba(var(--hell-rgb), .45); text-decoration: none; }
.db-zurueck:hover { color: var(--gold); text-decoration: underline; }
.db-nichts { margin-top: 16px; font-size: 13px; color: rgba(var(--hell-rgb), .45); }

/* ── Die Karten ────────────────────────────────────────────────── */
.db-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px; margin-top: 14px;
}
.db-karte {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit; border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb), .14);
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb), .92), rgba(var(--kopf-rgb), .96));
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: transform .24s cubic-bezier(.2,.8,.3,1), border-color .24s, box-shadow .24s;
  animation: auftauchen .45s both; animation-delay: var(--d, 0ms);
}
.db-karte::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--c, var(--gold)), transparent 85%);
}
.db-karte:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c, #888) 45%, transparent);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 1),
              0 0 0 1px color-mix(in srgb, var(--c, #888) 20%, transparent) inset;
}
.db-bild {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 40%,
    color-mix(in srgb, var(--c, #888) 16%, transparent), rgba(0, 0, 0, .5));
}
.db-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.3,1), filter .3s;
  filter: saturate(.9) contrast(1.02);
}
.db-karte:hover .db-bild img { transform: scale(1.06); filter: saturate(1.05); }
.db-zeichen {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; opacity: .3;
}
.db-schein {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55));
}
.db-inhalt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; flex: 1; }
.db-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.db-marke {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; letter-spacing: .04em;
  color: var(--c, rgba(var(--hell-rgb), .7));
  border: 1px solid color-mix(in srgb, var(--c, #888) 40%, transparent);
  background: color-mix(in srgb, var(--c, #888) 10%, transparent);
}
.db-titel {
  font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--champagner, #f4f4f5);
  transition: color .2s;
}
.db-karte:hover .db-titel { color: var(--c, var(--gold-hell)); }
.db-alias { font-size: 12px; color: rgba(var(--hell-rgb), .45); }
.db-satz {
  font-size: 12.5px; line-height: 1.6; color: rgba(var(--hell-rgb), .6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.db-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto;
  padding-top: 10px; border-top: 1px solid rgba(var(--gold-rgb), .1);
  font: 11px/1.4 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .38);
}
.db-wer { color: rgba(var(--hell-rgb), .5); }
.db-pfeil {
  margin-left: auto; font-size: 14px; color: var(--c, var(--gold));
  opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s;
}
.db-karte:hover .db-pfeil { opacity: 1; transform: none; }
.db-karte.hidden { display: none; }

/* ── Die Liste: dieselben Karten, flach nebeneinander ──────────── */
.db-gitter.liste { grid-template-columns: 1fr; gap: 8px; }
.db-gitter.liste .db-karte { flex-direction: row; align-items: stretch; border-radius: 13px; }
.db-gitter.liste .db-karte::before { right: auto; bottom: 0; width: 3px; height: auto; background: var(--c, var(--gold)); }
.db-gitter.liste .db-bild { width: 112px; aspect-ratio: auto; flex: none; }
.db-gitter.liste .db-zeichen { font-size: 24px; }
.db-gitter.liste .db-schein { display: none; }
.db-gitter.liste .db-inhalt { padding: 11px 16px; gap: 4px; }
.db-gitter.liste .db-satz { -webkit-line-clamp: 1; }
.db-gitter.liste .db-titel { font-size: 15px; }
.db-gitter.liste .db-fuss { border-top: 0; padding-top: 4px; }
.db-gitter.liste .db-karte:hover { transform: translateX(4px); }

/* ── Leere Fläche ──────────────────────────────────────────────── */
.db-leer {
  margin-top: 14px; padding: 46px 24px; text-align: center; border-radius: 18px;
  border: 1px dashed rgba(var(--gold-rgb), .28); background: rgba(var(--gold-rgb), .03);
  color: rgba(var(--hell-rgb), .5);
}
.db-leer .ico { font-size: 34px; margin: 0 0 10px; opacity: .6; }

@media (max-width: 760px) {
  .db-kopfinhalt { padding: 18px; gap: 14px; }
  .db-kopftext h1 { font-size: 24px; }
  .db-kennzahl { min-width: 92px; padding: 8px 12px; }
  .db-anlegen { width: 100%; justify-content: center; }
  .db-gitter { grid-template-columns: 1fr; }
  .db-rechts { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .db-karte, .db-chip, .db-wappen, .db-bild img { transition: none; animation: none; }
  .db-karte:hover, .db-chip:hover { transform: none; }
  .db-kopf::after { animation: none; }
}

/* Ohne Deckbild reicht ein schmaler Streifen mit dem Zeichen */
.db-bild.ohne { aspect-ratio: 16 / 5; }
.db-bild.ohne .db-zeichen { font-size: 28px; opacity: .22; }
.db-gitter.liste .db-bild.ohne { aspect-ratio: auto; }

@media (max-width: 760px) {
  /* Auf dem Handy bekommt das Suchfeld die ganze Zeile */
  .db-suchform { flex-wrap: wrap; }
  .db-suchfeld { flex-basis: 100%; }
  .db-tief { flex: 1; }
}

/* Termine: läuft ein Termin über mehrere Stunden, stehen die Folge-
   stunden blasser darunter — wie beim Schichtplan. */
.kal-termin.laeuft {
  opacity: .5; border-top-left-radius: 0; border-top-right-radius: 0;
}
.kal-termin.laeuft .kal-titel { font-size: 10.5px; }
.term-spanne {
  font: 11px/1 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45);
  margin-top: -2px;
}

/* ══ Datenbank und Routen — zweiter Anlauf ═══════════════════════════
   Mehr Tiefe, mehr Bewegung: ein Nordlicht hinter dem Kopfband, Karten
   die sich zum Zeiger neigen und einen Lichtfleck mitführen, Inhalte
   die beim Scrollen einfahren, und eine Werkzeugleiste, die oben
   kleben bleibt. */

/* ── Einfahren beim Scrollen ───────────────────────────────────── */
[data-enthuellen] {
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1);
  transition-delay: var(--d, 0ms);
}
[data-enthuellen].da { opacity: 1; transform: none; }

/* ── Kopfband: Nordlicht statt einfachem Schein ────────────────── */
.db-kopf::after {
  inset: -120% -30% auto -30%; height: 260%;
  background:
    radial-gradient(38% 46% at 22% 30%, color-mix(in srgb, var(--c, #888) 34%, transparent), transparent 70%),
    radial-gradient(30% 40% at 72% 20%, rgba(var(--zweit-rgb), .22), transparent 72%),
    radial-gradient(34% 38% at 52% 78%, color-mix(in srgb, var(--c, #888) 18%, transparent), transparent 70%);
  filter: blur(6px);
  animation: dbNordlicht 26s ease-in-out infinite alternate;
}
@keyframes dbNordlicht {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1) rotate(0deg); opacity: .8; }
  50%  { transform: translate3d(3%, 3%, 0) scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: translate3d(6%, -3%, 0) scale(1.04) rotate(-2deg); opacity: .9; }
}
.db-kopfinhalt { padding: 26px 26px 24px; }
.db-kopftext h1 {
  font-size: 34px; letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--champagner, #fff), color-mix(in srgb, var(--c, #888) 70%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.db-wappen { animation: dbAtmen 6s ease-in-out infinite; }
@keyframes dbAtmen {
  0%, 100% { box-shadow: 0 0 26px color-mix(in srgb, var(--c, #888) 20%, transparent) inset; }
  50%      { box-shadow: 0 0 40px color-mix(in srgb, var(--c, #888) 38%, transparent) inset; }
}
.db-kennzahl { transition: transform .2s, border-color .2s; }
.db-kennzahl:hover { transform: translateY(-2px); border-color: rgba(var(--gold-rgb), .35); }

/* ── Werkzeugleiste klebt oben ─────────────────────────────────── */
.db-marker { display: block; height: 1px; }
.db-werkzeuge {
  position: sticky; top: 8px; z-index: 20; padding: 8px;
  border: 1px solid transparent; border-radius: 999px;
  transition: background .25s, border-color .25s, box-shadow .25s, padding .25s;
}
.db-werkzeuge.klebt {
  background: rgba(var(--kopf-rgb), .92);
  border-color: rgba(var(--gold-rgb), .2);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9);
  backdrop-filter: blur(10px);
}

/* ── Karten: Neigung, Lichtfleck, Zeichen auf dem Deckbild ─────── */
.db-gitter { gap: 12px; }
.db-karte {
  transition: transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s, box-shadow .2s;
}
.db-karte:hover { transform: translateY(-3px); }
.db-lichtfleck {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  border-radius: inherit; transition: opacity .25s;
  background: radial-gradient(240px 240px at var(--lx, 50%) var(--ly, 50%),
    color-mix(in srgb, var(--c, #fff) 22%, transparent), transparent 70%);
  mix-blend-mode: screen;
}
.db-karte:hover .db-lichtfleck { opacity: .9; }
.db-aufbild {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  font-size: 16px; color: var(--c, var(--gold));
  background: rgba(0, 0, 0, .55); border: 1px solid color-mix(in srgb, var(--c, #888) 45%, transparent);
  backdrop-filter: blur(4px);
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.db-karte:hover .db-aufbild { transform: translateY(-2px) rotate(-6deg); }
.db-karte::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--c, var(--gold)), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.db-karte:hover::after { transform: scaleX(1); }
.db-bild { aspect-ratio: 16 / 10; }
.db-titel { font-size: 16.5px; letter-spacing: -.005em; }

/* In der Liste bleibt es flach und ruhig */
.db-gitter.liste .db-karte:hover { transform: translateX(4px); }
.db-gitter.liste .db-aufbild,
.db-gitter.liste .db-lichtfleck { display: none; }
.db-gitter.liste .db-bild { aspect-ratio: auto; }

@media (prefers-reduced-motion: reduce) {
  .db-kopf::after, .db-wappen { animation: none; }
  .db-karte:hover { transform: none; }
  [data-enthuellen] { opacity: 1; transform: none; }
}

/* ══ Die Akte — neuer Aufbau ═════════════════════════════════════════
   Oben ein Kopf mit dem eigenen Bild als unscharfem Grund, darunter
   eine Sprungleiste, die oben kleben bleibt, das Datenblatt als
   Feldkarten und die Chronik als Zeitstrahl. */

.ak-zurueck { margin-top: 18px; }
.ak-zurueck a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 7px 15px; border-radius: 999px; font-size: 12.5px;
  color: rgba(var(--hell-rgb), .6);
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .25);
  transition: color .18s, border-color .18s, transform .18s, background .18s;
}
.ak-zurueck a:hover {
  color: var(--gold-hell); border-color: rgba(var(--gold-rgb), .45);
  background: rgba(var(--gold-rgb), .1); transform: translateX(-3px);
}

.ak-kopf {
  position: relative; overflow: hidden; margin-top: 12px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--c, #888) 30%, transparent);
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb), .92), rgba(var(--kopf-rgb), .97));
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 1);
  animation: akAuf .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes akAuf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ak-grund {
  position: absolute; inset: -12%; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(.75) brightness(.5);
  transform: scale(1.1); opacity: .55;
  animation: akTreiben 30s ease-in-out infinite alternate;
}
@keyframes akTreiben {
  from { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.18) translate3d(1.5%, 1%, 0); }
}
.ak-schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 15% 20%, color-mix(in srgb, var(--c, #888) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(var(--kopf-rgb), .55), rgba(var(--kopf-rgb), .95));
}
.ak-kopfinhalt {
  position: relative; z-index: 2; display: flex; gap: 22px; flex-wrap: wrap;
  padding: 26px 26px 24px;
}
.ak-bild {
  position: relative; flex: none; width: 148px; height: 182px; border-radius: 16px;
  overflow: hidden; background: rgba(0, 0, 0, .45);
  border: 1px solid color-mix(in srgb, var(--c, #888) 45%, transparent);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 1),
              0 0 0 6px color-mix(in srgb, var(--c, #888) 8%, transparent);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.ak-kopf:hover .ak-bild {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 1),
              0 0 0 8px color-mix(in srgb, var(--c, #888) 12%, transparent);
}
.ak-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-bild.ohne { display: grid; place-items: center; }
.ak-zeichen { font-size: 46px; opacity: .35; }
.ak-kopftext { flex: 1 1 320px; min-width: 0; }
.ak-kopftext h1 {
  margin-top: 14px; font-size: 34px; line-height: 1.12; letter-spacing: -.01em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .8);
}
.ak-herkunft { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.ak-marke {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; font-size: 11.5px; color: rgba(var(--hell-rgb), .55);
  border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(0, 0, 0, .3);
}
.ak-taten { margin-top: 16px; }
.ak-taten .btn { border-radius: 999px; }

/* ── Sprungleiste ──────────────────────────────────────────────── */
.ak-sprung {
  position: sticky; top: 8px; z-index: 20;
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; padding: 6px;
  border-radius: 999px; border: 1px solid rgba(var(--gold-rgb), .16);
  background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .9);
}
.ak-sprung a {
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; letter-spacing: .04em; color: rgba(var(--hell-rgb), .55);
  border: 1px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.ak-sprung a:hover { color: var(--gold-hell); background: rgba(var(--gold-rgb), .09); }
.ak-sprung a.an {
  color: #fff; border-color: rgba(var(--gold-rgb), .4);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .24), rgba(var(--gold-rgb), .1));
}
.ak-abschnitt { scroll-margin-top: 90px; }

/* ── Datenblatt als Feldkarten ─────────────────────────────────── */
dl.ak-felder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin-top: 14px;
}
dl.ak-felder > div {
  padding: 12px 14px; border-radius: 13px;
  border: 1px solid rgba(var(--gold-rgb), .12);
  background: rgba(255, 255, 255, .022);
  transition: border-color .2s, background .2s, transform .2s;
}
dl.ak-felder > div:hover {
  border-color: rgba(var(--gold-rgb), .3); background: rgba(var(--gold-rgb), .06);
  transform: translateY(-2px);
}
dl.ak-felder > div.full { grid-column: 1 / -1; }
dl.ak-felder dt.label { margin: 0 0 6px; }
dl.ak-felder dd { margin: 0; }

/* ── Chronik als Zeitstrahl ────────────────────────────────────── */
.ak-chronik .entry {
  position: relative; padding-left: 26px;
}
.ak-chronik .entry::before {
  content: ''; position: absolute; left: 7px; top: 22px; bottom: -14px; width: 1px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .35), transparent);
}
.ak-chronik .entry:last-child::before { display: none; }
.ak-chronik .entry::after {
  content: ''; position: absolute; left: 3px; top: 15px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb), .7);
}

@media (max-width: 760px) {
  .ak-kopfinhalt { padding: 18px; gap: 16px; }
  .ak-bild { width: 104px; height: 128px; }
  .ak-kopftext h1 { font-size: 25px; }
  .ak-sprung { overflow-x: auto; flex-wrap: nowrap; }
  .ak-sprung a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ak-kopf, .ak-grund { animation: none; }
  .ak-kopf:hover .ak-bild, dl.ak-felder > div:hover { transform: none; }
}

/* ── Kacheln kleiner und ruhiger ─────────────────────────────────
   Mehr Akten je Reihe, knappere Zeilen: Der Blick soll über die Liste
   laufen können, nicht über Plakate. */
.db-gitter { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.db-bild { aspect-ratio: 16 / 9; }
.db-bild.ohne { aspect-ratio: 16 / 4; }
.db-bild.ohne .db-zeichen { font-size: 22px; }
.db-aufbild {
  left: 9px; top: 9px; width: 28px; height: 28px; border-radius: 9px; font-size: 13px;
}
.db-karte:hover .db-aufbild { transform: none; }
.db-inhalt { padding: 11px 13px 10px; gap: 5px; }
.db-marke { font-size: 10px; padding: 2px 8px; }
.db-titel { font-size: 14.5px; line-height: 1.25; }
.db-alias { font-size: 11px; }
.db-satz { font-size: 11.5px; line-height: 1.5; -webkit-line-clamp: 2; }
.db-fuss { font-size: 10px; gap: 8px; padding-top: 8px; }
.db-lichtfleck {
  background: radial-gradient(180px 180px at var(--lx, 50%) var(--ly, 50%),
    color-mix(in srgb, var(--c, #fff) 16%, transparent), transparent 70%);
}
.db-karte:hover .db-lichtfleck { opacity: .7; }

/* In der Liste bleiben die Zeilen schmal */
.db-gitter.liste .db-bild { width: 92px; }
.db-gitter.liste .db-inhalt { padding: 9px 14px; }

@media (min-width: 1500px) {
  .db-gitter { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   DAS GEMEINSAME GEWAND — Codebreaker V 7.0, Spiral Hotel, Red Cycle
   ──────────────────────────────────────────────────────────────────────
   Die Farben sind neu abgestimmt: ein tieferes Blauschwarz als Grund,
   Violett als Leitfarbe, dazu Cyan als kühler zweiter Ton — Magenta
   bleibt allein für Gefahr und Löschen. Der Hintergrund trägt ein
   leises Raster und wandernde Lichter, Kästen sind aus Glas mit einer
   Lichtkante, Schaltflächen leuchten im Verlauf.

   Aufbau, Schrift und Bewegung gelten in allen drei Bereichen gleich
   (body.luxus.edel). Jeder Bereich behält nur seine Farben: Violett und
   Cyan im Codebreaker, Gold und Kupfer im Spiral Hotel, Rot und Gold im
   Red Cycle — sie kommen aus den Variablen der jeweiligen Palette.
   ══════════════════════════════════════════════════════════════════════ */

.luxus.welt-codebreaker {
  --gold-rgb:     169, 112, 255;   /* Violett — die Leitfarbe */
  --zweit-rgb:     62, 224, 255;   /* Cyan — der kühle zweite Ton */
  --blut-rgb:     236,  72, 153;   /* Magenta — nur für Gefahr */
  --hell-rgb:     226, 218, 255;
  --flaeche-rgb:   14,  11,  24;
  --kopf-rgb:       7,   6,  14;
  --gold-tief-rgb: 86,  52, 170;

  --gold:       #a970ff;
  --gold-hell:  #d9c7ff;
  --gold-tief:  #5634aa;
  --zweit:      #3ee0ff;
  --blut:       #ec4899;
  --champagner: #ece8f7;
  --nacht:      #06050d;
  --nacht-warm: #0b0916;
  --line:       rgba(169, 112, 255, .18);
  --cb-rund:    16px;
  --knopf-verlauf: linear-gradient(110deg, #8b5cf6, #a970ff 45%, #5bbcff);
  --knopf-schrift: #fff;
}

/* Spiral Hotel und Red Cycle behalten ihre Farben — hier stehen nur die
   Töne, die das gemeinsame Gewand zusätzlich braucht: der Verlauf der
   Knöpfe und die Schrift darauf (auf Gold liest sich Dunkel besser). */
.luxus.welt-hotel {
  --cb-rund: 16px;
  --knopf-verlauf: linear-gradient(110deg, #a8823a, #d4af5f 50%, #ecd08f);
  --knopf-schrift: #1a1207;
}
.luxus.welt-redcycle {
  --cb-rund: 16px;
  --knopf-verlauf: linear-gradient(110deg, #a8781f, #e0b64a 50%, #f0cf7a);
  --knopf-schrift: #1a1204;
}

/* ── Der Grund: Raster, Lichter, feines Rauschen ───────────────── */
body.luxus.edel {
  background-color: var(--nacht);
  background-image:
    linear-gradient(rgba(var(--gold-rgb), .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gold-rgb), .045) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
}
.luxus.edel::before {
  background-image:
    radial-gradient(900px 620px at 10% -10%, rgba(var(--gold-rgb), .30), transparent 62%),
    radial-gradient(760px 520px at 92% 4%,  rgba(var(--zweit-rgb), .16), transparent 60%),
    radial-gradient(900px 700px at 78% 108%, rgba(var(--gold-rgb), .18), transparent 64%),
    radial-gradient(640px 520px at 4% 96%,  rgba(var(--zweit-rgb), .10), transparent 62%);
  animation: cbLichter 38s ease-in-out infinite alternate;
}
@keyframes cbLichter {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); }
}

/* ── Kopf: Glas, Verlaufskante, leuchtende Marke ───────────────── */
body.luxus.edel header {
  background: rgba(var(--kopf-rgb), .82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .6),
                rgba(var(--zweit-rgb), .5), transparent) 1;
  box-shadow: 0 10px 40px -20px rgba(var(--gold-rgb), .45);
}
body.luxus.edel .brand-2 {
  background: linear-gradient(95deg, #fff, var(--gold-hell) 45%, var(--zweit));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.luxus.edel .brand-fassung {
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .25), rgba(var(--zweit-rgb), .2));
  border-color: rgba(var(--zweit-rgb), .45);
  color: #fff; -webkit-text-fill-color: #fff;
  box-shadow: 0 0 14px rgba(var(--zweit-rgb), .25);
}
body.luxus.edel .logo img {
  filter: drop-shadow(0 0 12px rgba(var(--gold-rgb), .55)) drop-shadow(0 0 26px rgba(var(--zweit-rgb), .18));
}
body.luxus.edel .hauptnav {
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .06), rgba(0, 0, 0, .25));
}

/* Reiter: aktiver Punkt mit Verlaufsrahmen und Schein */
body.luxus.edel .navlink {
  color: rgba(var(--hell-rgb), .62);
  transition: color .18s, background .18s, box-shadow .18s, transform .18s;
}
body.luxus.edel .navlink:hover {
  color: #fff; background: rgba(var(--gold-rgb), .12); transform: translateY(-1px);
}
body.luxus.edel .navlink.an {
  color: #fff; border-color: transparent;
  background:
    linear-gradient(rgba(var(--kopf-rgb), .92), rgba(var(--kopf-rgb), .92)) padding-box,
    linear-gradient(95deg, var(--gold), var(--zweit)) border-box;
  box-shadow: 0 0 22px rgba(var(--gold-rgb), .35), 0 0 42px -10px rgba(var(--zweit-rgb), .45);
  text-shadow: 0 0 12px rgba(var(--zweit-rgb), .55);
}
body.luxus.edel .navlink::after {
  background: linear-gradient(90deg, var(--gold), var(--zweit));
}

/* ── Kästen aus Glas mit Lichtkante ────────────────────────────── */
body.luxus.edel .panel {
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .06), rgba(var(--flaeche-rgb), 0) 40%),
    rgba(var(--flaeche-rgb), .78);
  border-color: rgba(var(--gold-rgb), .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
              0 24px 50px -30px rgba(0, 0, 0, .95);
  transition: border-color .25s, box-shadow .25s;
}
body.luxus.edel .panel::after {
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .55),
              rgba(var(--zweit-rgb), .45), transparent);
}
body.luxus.edel .panel:hover {
  border-color: rgba(var(--gold-rgb), .28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset,
              0 26px 60px -30px rgba(0, 0, 0, 1),
              0 0 0 1px rgba(var(--zweit-rgb), .06);
}

/* Überschriften im Verlauf */
body.luxus.edel h1 {
  background: linear-gradient(100deg, #fff 10%, var(--gold-hell) 55%, var(--zweit));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
body.luxus.edel .seal { color: rgba(var(--zweit-rgb), .8); }
body.luxus.edel .sec-title::after {
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .5), rgba(var(--zweit-rgb), .2), transparent);
}

/* ── Schaltflächen ─────────────────────────────────────────────── */
body.luxus.edel .btn-primary,
body.luxus.edel .chat-senden {
  position: relative; overflow: hidden;
  background: var(--knopf-verlauf);
  border-color: rgba(var(--zweit-rgb), .5);
  color: var(--knopf-schrift, #fff); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 8px 26px -10px rgba(var(--gold-rgb), .9), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
body.luxus.edel .btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .6s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
body.luxus.edel .btn-primary:hover::after { left: 130%; }
body.luxus.edel .btn-primary:hover {
  box-shadow: 0 12px 32px -10px rgba(var(--gold-rgb), 1), 0 0 24px rgba(var(--zweit-rgb), .3);
}
body.luxus.edel .btn-ghost {
  border-color: rgba(var(--gold-rgb), .3); color: var(--gold-hell);
}
body.luxus.edel .btn-ghost:hover {
  border-color: rgba(var(--zweit-rgb), .55); color: #fff;
  background: rgba(var(--zweit-rgb), .08);
}

/* ── Felder ────────────────────────────────────────────────────── */
body.luxus.edel .input {
  background: rgba(4, 3, 10, .55); border-color: rgba(var(--gold-rgb), .2);
}
body.luxus.edel .input:focus {
  border-color: rgba(var(--zweit-rgb), .65);
  box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14), 0 0 18px rgba(var(--gold-rgb), .2);
}

/* ── Seiten fahren beim Laden ein ──────────────────────────────── */
@keyframes cbEin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.luxus.edel > .wrap > section,
body.luxus.edel > .wrap > .dok-leiste,
body.luxus.edel > .wrap > nav,
body.luxus.edel > .wrap > div:not(.meldung) {
  animation: cbEin .5s cubic-bezier(.2,.8,.3,1) both;
}
body.luxus.edel > .wrap > :nth-child(2) { animation-delay: 40ms; }
body.luxus.edel > .wrap > :nth-child(3) { animation-delay: 80ms; }
body.luxus.edel > .wrap > :nth-child(4) { animation-delay: 120ms; }
body.luxus.edel > .wrap > :nth-child(5) { animation-delay: 160ms; }
body.luxus.edel > .wrap > :nth-child(n+6) { animation-delay: 200ms; }

/* Tabellen: Zeilen leuchten beim Überfahren */
body.luxus.edel .panel table tbody tr { transition: background .15s; }
body.luxus.edel .panel table tbody tr:hover { background: rgba(var(--gold-rgb), .06); }

/* Rollbalken */
body.luxus.edel ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .45), rgba(var(--zweit-rgb), .3));
}

@media (prefers-reduced-motion: reduce) {
  .luxus.edel::before { animation: none; }
  body.luxus.edel > .wrap > * { animation: none !important; }
  body.luxus.edel .btn-primary::after { display: none; }
}


/* ══ Vindicta — neuer Aufbau ═════════════════════════════════════════ */

.vd-kopf { margin-top: 24px; padding: 24px; }
.vd-kopfreihe { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.vd-kopftext { flex: 1 1 260px; }
.vd-kopftext h1 { margin: 4px 0 0; font-size: 32px; }
.vd-kopftext .muted { margin-top: 4px; }

/* Der Ring zeigt, wie voll die Tafel ist */
.vd-ring {
  --wert: 0; position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(from -90deg, var(--gold) 0, var(--zweit) calc(var(--wert) * 1%),
              rgba(255, 255, 255, .07) calc(var(--wert) * 1%));
  box-shadow: 0 0 30px rgba(var(--gold-rgb), .25);
}
.vd-ring::before {
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  background: rgba(var(--kopf-rgb), .96); border: 1px solid rgba(var(--gold-rgb), .2);
}
.vd-ring span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.vd-ring strong { font: 700 28px/1 ui-monospace, Consolas, monospace; color: #fff; }
.vd-ring small { margin-top: 5px; font-size: 10.5px; letter-spacing: .12em; color: rgba(var(--hell-rgb), .5); text-transform: uppercase; }

.vd-kennzahlen { display: flex; gap: 10px; flex-wrap: wrap; }
.vd-kennzahl {
  display: flex; flex-direction: column; gap: 3px; min-width: 112px;
  padding: 11px 16px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .28);
  transition: transform .18s, border-color .18s, background .18s;
}
.vd-kennzahl:hover {
  transform: translateY(-2px); border-color: rgba(var(--zweit-rgb), .45);
  background: rgba(var(--zweit-rgb), .06);
}
.vd-kennzahl strong { font: 700 20px/1 ui-monospace, Consolas, monospace; color: var(--gold-hell); }
.vd-kennzahl small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--hell-rgb), .45); }

.vd-raenge { margin-top: 20px; }
.vd-rangleiste {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px;
  background: rgba(255, 255, 255, .05);
}
.vd-rangleiste span { min-width: 6px; transition: filter .2s; }
.vd-rangleiste span:hover { filter: brightness(1.3); }
.vd-rangmarken { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.vd-rangmarke { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(var(--hell-rgb), .65); }
.vd-rangmarke i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.vd-rangmarke b { font: 700 12px ui-monospace, Consolas, monospace; color: #fff; }

.vd-sprung a span {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font: 600 10.5px/1.6 ui-monospace, Consolas, monospace;
  background: rgba(255, 255, 255, .08);
}

.vd-teil { margin-top: 18px; padding: 20px 20px 16px; }
.vd-teilkopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.vd-teilkopf h2 { margin: 0; font-size: 19px; }
.vd-teilkopf p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(var(--hell-rgb), .55); max-width: 70ch; }
.vd-teilkopf strong { color: var(--gold-hell); }
.vd-suche { max-width: 280px; border-radius: 999px; }
.vd-teil .vind-rahmen { border-radius: 12px; }
.vd-teil .vind-fuss {
  position: sticky; bottom: 0; z-index: 2; margin: 12px -20px -16px; padding: 12px 20px;
  background: linear-gradient(0deg, rgba(var(--kopf-rgb), .96) 70%, rgba(var(--kopf-rgb), 0));
  border-radius: 0 0 16px 16px;
}
.vind-zeile.vd-aus { display: none; }

/* Die Ehemaligen */
.vd-ehemalige .vd-name { display: block; font-weight: 600; color: var(--champagner, #fff); }
.vd-ehemalige .vd-handy { display: block; margin-top: 2px; font: 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.vd-rang { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: .85; }
.vd-fest { font: 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .6); }
.vd-grund { min-width: 240px; }
.vd-grundfeld { width: 100%; min-height: 34px; resize: none; line-height: 1.5; overflow: hidden; font: inherit; }
.vd-leer { padding: 22px; text-align: center; color: rgba(var(--hell-rgb), .45); }
.vd-nachtrag td { background: rgba(var(--zweit-rgb), .035); }
.vd-handyfeld { margin-top: 6px; }


/* ══ Blacklist — neuer Aufbau ════════════════════════════════════════ */

.bk-kopf { margin-top: 24px; padding: 22px 24px; }
.bk-kopfreihe { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bk-wappen {
  flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  font-size: 28px; color: #ff8fc7;
  background: rgba(var(--blut-rgb), .14); border: 1px solid rgba(var(--blut-rgb), .4);
  box-shadow: 0 0 28px rgba(var(--blut-rgb), .22) inset;
  animation: bkPuls 4s ease-in-out infinite;
}
@keyframes bkPuls {
  0%, 100% { box-shadow: 0 0 22px rgba(var(--blut-rgb), .18) inset; }
  50%      { box-shadow: 0 0 36px rgba(var(--blut-rgb), .38) inset; }
}
.bk-kopftext { flex: 1 1 240px; }
.bk-kopftext h1 { margin: 4px 0 0; font-size: 32px; }
.bk-kennzahlen { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-kennzahl {
  display: flex; flex-direction: column; gap: 3px; min-width: 110px; padding: 11px 16px;
  border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .28);
}
.bk-kennzahl strong { font: 700 20px/1 ui-monospace, Consolas, monospace; color: var(--gold-hell); }
.bk-kennzahl small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--hell-rgb), .45); }

.bk-werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.bk-suchfeld { position: relative; flex: 1 1 280px; max-width: 460px; }
.bk-suchfeld .input { width: 100%; padding-left: 36px; padding-right: 32px; border-radius: 999px; }
.bk-lupe { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.bk-leeren {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: rgba(var(--hell-rgb), .6); font-size: 11px;
}
.bk-marken { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-marke {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 12.5px;
  color: rgba(var(--hell-rgb), .7); background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(var(--gold-rgb), .2); transition: background .15s, border-color .15s, transform .15s;
}
.bk-marke span { font: 600 11px/1 ui-monospace, Consolas, monospace; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.bk-marke:hover { transform: translateY(-1px); border-color: rgba(var(--gold-rgb), .45); }
.bk-marke.an { color: #fff; border-color: rgba(var(--zweit-rgb), .6); background: rgba(var(--gold-rgb), .18); }
.bk-werkzeuge .btn { margin-left: auto; }
.bk-formular { margin-top: 12px; padding: 20px; border-color: rgba(var(--blut-rgb), .4); }

.bk-liste { margin-top: 14px; padding: 6px; }
.bk-rahmen { overflow-x: auto; border-radius: 12px; }
.bk-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; }
.bk-tabelle thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  padding: 12px 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .5); background: rgba(var(--kopf-rgb), .96);
  border-bottom: 1px solid rgba(var(--gold-rgb), .22);
}
.bk-tabelle td {
  padding: 12px 14px; vertical-align: top; font-size: 13.5px;
  border-bottom: 1px solid rgba(var(--gold-rgb), .08);
}
.bk-zeile { animation: cbEin .4s cubic-bezier(.2,.8,.3,1) both; animation-delay: var(--d, 0ms); }
.bk-zeile:hover td { background: rgba(var(--blut-rgb), .045); }
.bk-zeile:target td { background: rgba(var(--zweit-rgb), .08); }
.bk-platz { width: 64px; font: 600 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.bk-nr { width: 90px; }
.bk-nummer {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  font: 700 12px ui-monospace, Consolas, monospace; color: #ff8fc7;
  background: rgba(var(--blut-rgb), .12); border: 1px solid rgba(var(--blut-rgb), .3);
}
.bk-name { min-width: 180px; }
.bk-namenszeile { display: block; font-weight: 600; color: var(--champagner, #fff); }
.bk-akte {
  display: inline-flex; margin-top: 5px; font-size: 11.5px; text-decoration: none;
  color: var(--zweit); padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(var(--zweit-rgb), .3); background: rgba(var(--zweit-rgb), .06);
}
.bk-akte:hover { background: rgba(var(--zweit-rgb), .14); }
.bk-grund { min-width: 240px; line-height: 1.6; color: rgba(var(--hell-rgb), .78); }
.bk-ohne { color: rgba(var(--hell-rgb), .3); }
.bk-seit { width: 110px; font: 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .55); white-space: nowrap; }
.bk-taten { width: 150px; white-space: nowrap; text-align: right; }
.bk-taten form { display: inline; margin: 0; }
.bk-tat {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  margin-left: 3px; cursor: pointer; text-decoration: none; font-size: 12px;
  color: rgba(var(--hell-rgb), .65); background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--gold-rgb), .18);
  transition: background .15s, border-color .15s, color .15s;
}
.bk-tat:hover:not([disabled]) { color: #fff; border-color: rgba(var(--zweit-rgb), .5); background: rgba(var(--zweit-rgb), .1); }
.bk-tat[disabled] { opacity: .3; cursor: default; }
.bk-tat.gefahr:hover { border-color: rgba(var(--blut-rgb), .7); background: rgba(var(--blut-rgb), .2); }
.bk-bearbeiten td { background: rgba(var(--gold-rgb), .06); padding: 18px; }
.bk-leer { padding: 40px 20px; text-align: center; color: rgba(var(--hell-rgb), .45); }
.bk-leer .ico { font-size: 32px; margin: 0 0 8px; opacity: .6; }
.bk-fuss { margin: 10px 12px 6px; font-size: 11.5px; color: rgba(var(--hell-rgb), .4); }

@media (max-width: 760px) {
  .bk-werkzeuge .btn { margin-left: 0; width: 100%; justify-content: center; }
  .vd-ring { width: 88px; height: 88px; }
  .vd-suche { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-wappen, .bk-zeile { animation: none; }
}

/* ══ Streng Geheim ═══════════════════════════════════════════════════
   Der Sperrschirm mit dem Schloss, das leise pulsiert; über der offenen
   Rubrik ein rotes Warnband. */
.gh-sperre {
  margin-top: 18px; padding: 44px 24px 40px; text-align: center;
  border-color: rgba(255, 59, 92, .35);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 59, 92, .14), transparent 70%),
    rgba(var(--flaeche-rgb), .85);
}
.gh-schloss {
  position: relative; width: 84px; height: 84px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 24px;
  background: rgba(255, 59, 92, .12); border: 1px solid rgba(255, 59, 92, .45);
  box-shadow: 0 0 40px rgba(255, 59, 92, .25) inset, 0 0 40px rgba(255, 59, 92, .18);
  animation: ghPuls 2.6s ease-in-out infinite;
}
.gh-koerper { font-size: 38px; }
@keyframes ghPuls {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 59, 92, .2) inset, 0 0 30px rgba(255, 59, 92, .12); }
  50%      { box-shadow: 0 0 46px rgba(255, 59, 92, .4) inset, 0 0 60px rgba(255, 59, 92, .3); }
}
.gh-sperre h2 {
  margin: 6px 0 0; font-size: 30px; letter-spacing: .14em; text-transform: uppercase;
  color: #ff5c77; text-shadow: 0 0 24px rgba(255, 59, 92, .5);
}
.gh-satz { margin: 10px auto 0; max-width: 460px; font-size: 13.5px; line-height: 1.6;
           color: rgba(var(--hell-rgb), .6); }
.gh-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.gh-feld {
  width: min(320px, 100%); text-align: center; letter-spacing: .3em; border-radius: 999px;
  border-color: rgba(255, 59, 92, .4) !important;
}
.gh-feld:focus { box-shadow: 0 0 0 3px rgba(255, 59, 92, .18) !important; }
.gh-kopfknoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gh-sperren { border-color: rgba(255, 59, 92, .45); color: #ff8fa3; }
.gh-band {
  position: relative; z-index: 1; margin: 0; padding: 9px 24px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #ffb3c0;
  background: repeating-linear-gradient(135deg, rgba(255, 59, 92, .16) 0 12px, rgba(255, 59, 92, .08) 12px 24px);
  border-top: 1px solid rgba(255, 59, 92, .35);
}
.gh-band span { color: #ff5c77; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .gh-schloss { animation: none; } }

/* Streng Geheim: „In Streng Geheim einstufen" / „Geheimhaltung auflösen" */
.gh-hinein { border-color: rgba(255, 59, 92, .45) !important; color: #ff8fa3 !important; }
.gh-hinein:hover { background: rgba(255, 59, 92, .14) !important; }
.gh-heraus { border-color: rgba(var(--zweit-rgb), .45) !important; }

/* ══════════════════════════════════════════════════════════════════════
   TOTER BRIEFKASTEN — der vierte Bereich
   ──────────────────────────────────────────────────────────────────────
   Dasselbe Gewand wie die anderen drei (body.luxus.edel), nur in den
   Farben seines Wappens: Neonviolett auf tiefem Schwarz, dazu ein
   helles Flieder als zweiter Ton.
   ══════════════════════════════════════════════════════════════════════ */
.luxus.welt-briefkasten {
  --gold-rgb:     139,  61, 255;   /* Neonviolett — die Leitfarbe */
  --zweit-rgb:    213, 140, 255;   /* Flieder — der zweite Ton */
  --blut-rgb:     236,  72, 153;
  --hell-rgb:     232, 222, 255;
  --flaeche-rgb:   12,   8,  20;
  --kopf-rgb:       5,   3,  10;
  --gold-tief-rgb: 70,  26, 150;

  --gold:       #8b3dff;
  --gold-hell:  #dcc6ff;
  --gold-tief:  #461a96;
  --zweit:      #d58cff;
  --blut:       #ec4899;
  --champagner: #efe8fb;
  --nacht:      #040208;
  --nacht-warm: #0a0612;
  --line:       rgba(139, 61, 255, .2);
  --cb-rund:    16px;
  --knopf-verlauf: linear-gradient(110deg, #6d28d9, #8b3dff 50%, #c77dff);
  --knopf-schrift: #fff;
}

/* ── Der Knopf „Bereiche" im Kopf ───────────────────────────────── */
.kopfknopf.bereiche-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  border-color: rgba(var(--zweit-rgb), .35);
}
.bereiche-zeichen {
  display: inline-grid; grid-template-columns: repeat(2, 5px); gap: 2px;
}
.bereiche-zeichen i {
  width: 5px; height: 5px; border-radius: 1.5px;
  background: rgba(var(--gold-rgb), .9);
  transition: transform .25s, background .25s;
}
.bereiche-zeichen i:nth-child(2), .bereiche-zeichen i:nth-child(3) { background: rgba(var(--zweit-rgb), .9); }
.kopfknopf.bereiche-knopf:hover .bereiche-zeichen i:nth-child(1) { transform: translate(-1px, -1px); }
.kopfknopf.bereiche-knopf:hover .bereiche-zeichen i:nth-child(2) { transform: translate(1px, -1px); }
.kopfknopf.bereiche-knopf:hover .bereiche-zeichen i:nth-child(3) { transform: translate(-1px, 1px); }
.kopfknopf.bereiche-knopf:hover .bereiche-zeichen i:nth-child(4) { transform: translate(1px, 1px); }

/* ── Bereichswahl mit vier Karten ───────────────────────────────── */
.wahl-gitter.wahl-anzahl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wahl-gitter.wahl-anzahl-2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.wahl-briefkasten:hover { border-color: rgba(139, 61, 255, .7) !important; }
.wahl-briefkasten::before { background: radial-gradient(closest-side, rgba(139, 61, 255, .32), transparent 70%); }
.wahl-briefkasten .wahl-wappen img { transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(139, 61, 255, .45)); }
.welt-knopf img[src*="logo-briefkasten"] { transform: scale(1.15); }
@media (max-width: 860px) {
  .wahl-gitter.wahl-anzahl-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Der Kopf der Briefkastenseiten ─────────────────────────────── */
.tb-held {
  position: relative; overflow: hidden; margin-top: 24px;
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 24px 28px;
  background:
    radial-gradient(420px 260px at 8% 50%, rgba(var(--gold-rgb), .22), transparent 70%),
    radial-gradient(520px 300px at 100% 0%, rgba(var(--zweit-rgb), .10), transparent 70%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .92), rgba(var(--kopf-rgb), .94));
}
.tb-held-klein { grid-template-columns: 120px minmax(0, 1fr); }
.tb-heldbild { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.tb-heldbild img {
  position: relative; width: 100%; height: auto;
  filter: drop-shadow(0 0 22px rgba(var(--gold-rgb), .55)) drop-shadow(0 18px 30px rgba(0, 0, 0, .7));
  animation: tbSchweben 6s ease-in-out infinite;
}
.tb-heldschein {
  position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), .45), transparent 68%);
  filter: blur(18px); animation: tbPuls 3.6s ease-in-out infinite;
}
@keyframes tbSchweben { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes tbPuls { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.tb-heldtext h1 { margin: 4px 0 0; font-size: 34px; }
.tb-heldtext .muted { margin-top: 8px; max-width: 620px; line-height: 1.65; }
.tb-heldzahlen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.tb-heldzahl {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .3); background: rgba(var(--gold-rgb), .08);
  font-size: 13px; color: rgba(var(--hell-rgb), .75);
}
.tb-heldzahl strong { font-size: 18px; color: #fff; }
.tb-heldzahl.warnt { border-color: rgba(var(--zweit-rgb), .6); box-shadow: 0 0 22px rgba(var(--zweit-rgb), .2); }
.tb-heldzahl.warnt strong { color: var(--zweit); }
.tb-heldknopf { margin-left: auto; }

/* ── Die Umschläge im Fach ──────────────────────────────────────── */
.tb-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; margin-top: 12px;
}
.tb-umschlag {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; border: 1px solid rgba(var(--gold-rgb), .22);
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb), .95), rgba(var(--kopf-rgb), .96));
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.tb-umschlag::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(200px 200px at var(--lx, 50%) var(--ly, 50%), rgba(var(--gold-rgb), .18), transparent 70%);
}
.tb-umschlag:hover { transform: translateY(-4px); border-color: rgba(var(--gold-rgb), .55);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 30px -10px rgba(var(--gold-rgb), .5); }
.tb-umschlag:hover::after { opacity: 1; }
.tb-umschlagflaeche {
  position: relative; display: grid; place-items: center; height: 170px; width: 100%;
  border: 0; padding: 0; cursor: pointer; overflow: hidden; color: inherit; font: inherit;
  background:
    repeating-linear-gradient(135deg, rgba(var(--gold-rgb), .05) 0 10px, transparent 10px 20px),
    rgba(0, 0, 0, .35);
  border-bottom: 1px solid rgba(var(--gold-rgb), .18);
}
.tb-vorschau { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.tb-umschlag:hover .tb-vorschau { transform: scale(1.04); }
.tb-umschlag.frisch .tb-vorschau { animation: tbAufdecken .7s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes tbAufdecken { from { opacity: 0; transform: scale(1.12); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* Der versiegelte Umschlag: gezeichnet aus zwei Dreiecken und einem Siegel */
.tb-kuvert {
  position: relative; width: 132px; height: 88px; border-radius: 8px;
  background: linear-gradient(160deg, #1c1230, #0c0716);
  border: 1px solid rgba(var(--gold-rgb), .45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(var(--gold-rgb), .55);
  animation: tbWippen 3.2s ease-in-out infinite;
}
.tb-kuvertklappe {
  position: absolute; left: 0; right: 0; top: 0; height: 56%;
  background: linear-gradient(180deg, #24173d, #140c24);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1px solid rgba(var(--gold-rgb), .4);
  transform-origin: top; transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.tb-kuvert::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(20deg, transparent 49.5%, rgba(var(--gold-rgb), .35) 50%, transparent 50.5%),
              linear-gradient(-20deg, transparent 49.5%, rgba(var(--gold-rgb), .35) 50%, transparent 50.5%);
}
.tb-siegel {
  position: absolute; left: 50%; top: 44%; z-index: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: 17px; color: #f4e9ff;
  background: radial-gradient(circle at 35% 30%, #b06bff, #5b1fc2 70%);
  box-shadow: 0 0 0 3px rgba(91, 31, 194, .45), 0 0 18px rgba(var(--gold-rgb), .8);
  animation: tbSiegel 2.4s ease-in-out infinite;
}
@keyframes tbWippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tbSiegel { 0%, 100% { box-shadow: 0 0 0 3px rgba(91, 31, 194, .45), 0 0 12px rgba(var(--gold-rgb), .6); }
                      50% { box-shadow: 0 0 0 3px rgba(91, 31, 194, .45), 0 0 26px rgba(var(--gold-rgb), 1); } }
.tb-umschlag.versiegelt:hover .tb-kuvertklappe { transform: rotateX(160deg); }
.tb-versiegelt {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font: 600 10.5px ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--zweit-rgb), .75);
}
.tb-umschlaginfo { padding: 12px 14px 14px; }
.tb-umschlagtitel { margin: 0; font-weight: 700; color: #fff; line-height: 1.35; overflow-wrap: anywhere; }
.tb-umschlagmeta { margin: 5px 0 0; font-size: 12px; color: rgba(var(--hell-rgb), .55); }
.tb-umschlagmeta strong { color: rgba(var(--hell-rgb), .9); font-weight: 600; }
.tb-umschlagstand { margin: 7px 0 0; font-size: 11.5px; color: rgba(var(--hell-rgb), .45); display: flex; align-items: center; gap: 6px; }
.tb-umschlag.versiegelt .tb-umschlagstand { color: var(--zweit); }
.tb-punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--zweit); box-shadow: 0 0 10px var(--zweit); animation: tbPuls 1.8s ease-in-out infinite;
}

/* Der geöffnete Umschlag */
.exko-kasten.tb-kasten { max-width: 860px; }
.tb-notiz {
  margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  border-left: 3px solid var(--zweit); background: rgba(var(--zweit-rgb), .08); color: rgba(var(--hell-rgb), .88);
  white-space: pre-wrap;
}
.tb-bildrahmen {
  position: relative; margin-top: 14px; min-height: 180px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .4);
}
.tb-bildrahmen img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .5s; }
.tb-bildrahmen img.da { opacity: 1; }
.tb-laden {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 12px ui-monospace, Consolas, monospace; letter-spacing: .12em; color: rgba(var(--zweit-rgb), .85);
}
.tb-laden[hidden] { display: none; }
.tb-laden span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(var(--zweit-rgb), .25); border-top-color: var(--zweit);
  animation: tbDrehen .8s linear infinite;
}
@keyframes tbDrehen { to { transform: rotate(360deg); } }
.btn.tb-raus { color: #e8879a; border-color: rgba(224, 71, 95, .4); }
.btn.tb-raus:hover { background: rgba(224, 71, 95, .14); }

/* ── Hinterlassen: die Schritte ─────────────────────────────────── */
.tb-schritte { display: grid; gap: 16px; margin-top: 20px; }
.tb-schritt { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 22px; }
.tb-schrittnr {
  margin: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 700 18px ui-monospace, Consolas, monospace; color: #fff;
  background: var(--knopf-verlauf); box-shadow: 0 0 24px rgba(var(--gold-rgb), .45);
}
.tb-schrittinhalt .sec-title { margin-top: 8px; }
.tb-empfaenger { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tb-person input { position: absolute; opacity: 0; pointer-events: none; }
.tb-personkarte {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
  cursor: pointer; border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(var(--gold-rgb), .05);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.tb-personkarte:hover { border-color: rgba(var(--gold-rgb), .55); transform: translateY(-1px); }
.tb-person input:checked + .tb-personkarte {
  border-color: var(--zweit); background: rgba(var(--gold-rgb), .18);
  box-shadow: 0 0 0 1px rgba(var(--zweit-rgb), .4), 0 0 26px -6px rgba(var(--gold-rgb), .8);
}
.tb-person input:focus-visible + .tb-personkarte { outline: 2px solid var(--zweit); outline-offset: 2px; }
.tb-personbild {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-weight: 700; color: #0b0614; background: var(--c, var(--gold));
}
.tb-personname { font-weight: 600; color: rgba(var(--hell-rgb), .92); }
.tb-zusatz { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 16px; }
.tb-anonym {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  border: 1px dashed rgba(var(--gold-rgb), .35); font-size: 13px; color: rgba(var(--hell-rgb), .8);
}
.tb-anonym input { accent-color: var(--gold); }

.tb-wegwahl { display: inline-flex; gap: 4px; padding: 4px; margin-top: 12px; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .3); }
.tb-weg-knopf {
  border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600;
  color: rgba(var(--hell-rgb), .65); background: transparent; transition: background .2s, color .2s;
}
.tb-weg-knopf.an { color: #fff; background: var(--knopf-verlauf); box-shadow: 0 0 18px rgba(var(--gold-rgb), .45); }
.tb-weg[hidden] { display: none; }

.tb-aktenliste {
  display: grid; gap: 6px; margin-top: 10px; max-height: 330px; overflow-y: auto; padding-right: 4px;
}
.tb-akte[hidden] { display: none; }
.tb-akte input { position: absolute; opacity: 0; pointer-events: none; }
.tb-aktezeile {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .14); border-left: 3px solid var(--c, var(--gold));
  background: rgba(var(--flaeche-rgb), .6); transition: background .15s, border-color .15s;
}
.tb-aktezeile:hover { background: rgba(var(--gold-rgb), .08); }
.tb-akte input:checked + .tb-aktezeile {
  border-color: rgba(var(--zweit-rgb), .6); background: rgba(var(--gold-rgb), .16);
  box-shadow: 0 0 22px -8px rgba(var(--gold-rgb), .9);
}
.tb-akteicon { font-size: 18px; text-align: center; }
.tb-aktetext { display: flex; flex-direction: column; min-width: 0; }
.tb-aktetitel { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-akterubrik { font-size: 11.5px; color: rgba(var(--hell-rgb), .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-aktenr { font-size: 11px; color: rgba(var(--hell-rgb), .35); }

.tb-vorschaufeld { margin-top: 14px; }
.tb-vorschaufeld[hidden] { display: none; }
.tb-vorschaukopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tb-vorschaurahmen {
  max-height: 360px; overflow-y: auto; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), .25);
  background:
    repeating-linear-gradient(135deg, rgba(var(--gold-rgb), .05) 0 10px, transparent 10px 20px), rgba(0, 0, 0, .4);
  min-height: 120px;
}
.tb-vorschaurahmen img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .5s; }
.tb-vorschaurahmen img.da { opacity: 1; }
#tbAkteKnopf { margin-top: 12px; }
#tbAkteKnopf:disabled { opacity: .45; cursor: not-allowed; }

/* ── Hinterlassen: was man selbst hinterlassen hat ──────────────── */
.tb-gesendet { display: grid; gap: 10px; margin-top: 12px; }
.tb-gesendetzeile {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px;
}
.tb-gesendetbild { display: block; width: 92px; height: 64px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .4); }
.tb-gesendetbild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tb-gesendetnotiz { margin: 6px 0 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .65); font-style: italic; }
.tb-gesendetstand { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tb-gesendetstand form { margin: 0; }
.tb-badge-zu { display: inline-flex; align-items: center; gap: 6px; color: var(--zweit); border-color: rgba(var(--zweit-rgb), .45); }
.tb-badge-auf { color: #7ee0a8; border-color: rgba(126, 224, 168, .4); }

/* ── Der Einwurf im Kasten „Akte als Bild speichern" ────────────── */
.tb-einwurf {
  margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(139, 61, 255, .45);
  background:
    radial-gradient(260px 140px at 0% 0%, rgba(139, 61, 255, .22), transparent 70%),
    rgba(10, 6, 18, .7);
}
.tb-einwurfkopf { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; color: rgba(var(--hell-rgb), .85); }
.tb-einwurfkopf img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(139, 61, 255, .7)); }
.tb-einwurfkopf strong { color: #d7b8ff; }
.tb-einwurfzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tb-einwurfzeile + .tb-einwurfzeile { margin-top: 10px; }
.tb-einwurfzeile .input { flex: 1; min-width: 180px; }
.tb-einwurfknopf { margin-left: auto; border-color: rgba(139, 61, 255, .6) !important; color: #e4d2ff !important; }
.tb-einwurfknopf:hover { background: rgba(139, 61, 255, .2) !important; }

@media (max-width: 720px) {
  .tb-held, .tb-held-klein { grid-template-columns: 1fr; text-align: center; padding: 20px; }
  .tb-heldbild { width: 140px; margin: 0 auto; }
  .tb-heldzahlen { justify-content: center; }
  .tb-heldknopf { margin-left: 0; }
  .tb-schritt { grid-template-columns: 1fr; }
  .tb-gesendetzeile { grid-template-columns: 72px minmax(0, 1fr); }
  .tb-gesendetbild { width: 72px; height: 54px; }
  .tb-gesendetstand { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   „zu erfassen" — der Eingangskorb im Codebreaker
   ══════════════════════════════════════════════════════════════════════ */
.erf-kopfinnen {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  padding: 22px 24px;
}
.erf-zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.erf-zahl {
  min-width: 92px; padding: 10px 14px; border-radius: 14px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--c, var(--gold)) 45%, transparent);
  background: color-mix(in srgb, var(--c, var(--gold)) 10%, transparent);
}
.erf-zahl strong { display: block; font-size: 26px; line-height: 1.1; color: var(--c, #fff); }
.erf-zahl span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .6); }

.erf-formular { padding: 20px; margin-top: 12px; border-color: rgba(var(--zweit-rgb), .35); }
.erf-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.erf-wahlpunkt input { position: absolute; opacity: 0; pointer-events: none; }
.erf-wahlpunkt span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: rgba(var(--hell-rgb), .7);
  border: 1px solid rgba(var(--gold-rgb), .22); transition: all .18s;
}
.erf-wahlpunkt span:hover { border-color: var(--c); color: #fff; }
.erf-wahlpunkt input:checked + span {
  color: var(--c); border-color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: 0 0 18px -6px var(--c);
}
.erf-wahlpunkt input:focus-visible + span { outline: 2px solid var(--zweit); outline-offset: 2px; }

.erf-hochladen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.erf-ablage {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 132px; padding: 16px; border-radius: 16px; cursor: pointer; text-align: center;
  border: 1.5px dashed rgba(var(--gold-rgb), .4); background: rgba(var(--gold-rgb), .04);
  transition: border-color .2s, background .2s, transform .2s;
}
.erf-ablage:hover, .erf-ablage.drueber {
  border-color: var(--zweit); background: rgba(var(--zweit-rgb), .08); transform: translateY(-2px);
}
.erf-ablage.gefuellt { border-style: solid; border-color: rgba(126, 224, 168, .55); background: rgba(126, 224, 168, .06); }
.erf-ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.erf-ablagezeichen { font-size: 28px; line-height: 1; }
.erf-ablagetitel { font-weight: 700; color: #fff; }
.erf-ablagehinweis { font-size: 11.5px; color: rgba(var(--hell-rgb), .5); }
.erf-ablagenamen { font-size: 12px; color: #7ee0a8; overflow-wrap: anywhere; }

.erf-liste { display: grid; gap: 14px; margin-top: 12px; }
.erf-karte {
  position: relative; overflow: hidden; padding: 16px 18px 14px;
  border-left: 3px solid var(--c, var(--gold));
}
.erf-karte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px 200px at var(--lx, 50%) var(--ly, 50%), rgba(var(--gold-rgb), .10), transparent 70%);
}
.erf-karte:hover::after { opacity: 1; }
.erf-kartenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.badge.erf-stufe {
  color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.erf-wer { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(var(--hell-rgb), .6); }
.erf-ersatz {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: #0b0614; background: var(--c);
}
.erf-nummer { margin-left: auto; font-size: 11px; color: rgba(var(--hell-rgb), .3); }
.erf-text { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: rgba(var(--hell-rgb), .9); overflow-wrap: anywhere; }
.erf-leer { color: rgba(var(--hell-rgb), .4); font-style: italic; }
.erf-textform { margin-top: 12px; }

.erf-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.erf-foto { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .4); }
.erf-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.erf-foto:hover img { transform: scale(1.06); }
.erf-foto figcaption {
  position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s;
}
.erf-foto:hover figcaption, .erf-foto:focus-within figcaption { opacity: 1; }
.erf-foto figcaption form { margin: 0; }
.erf-mini {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: none; color: #fff;
  background: rgba(8, 5, 14, .8); border: 1px solid rgba(var(--gold-rgb), .45);
}
.erf-mini.gefahr { color: #ff9aae; border-color: rgba(224, 71, 95, .6); }

.erf-anlagen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.erf-anlagen li { display: flex; align-items: center; gap: 8px; }
.erf-anlagen li form { margin: 0; }
.erf-anlage {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  text-decoration: none; color: rgba(var(--hell-rgb), .88);
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(var(--gold-rgb), .05);
  transition: border-color .15s, background .15s;
}
.erf-anlage:hover { border-color: rgba(var(--zweit-rgb), .5); background: rgba(var(--zweit-rgb), .08); }
.erf-anlagename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.erf-fuss { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid rgba(var(--gold-rgb), .12); }
.erf-einstufen { display: flex; flex-wrap: wrap; gap: 6px; }
.erf-einstufen form, .erf-taten form { margin: 0; }
.erf-stufenknopf {
  cursor: pointer; padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: rgba(var(--hell-rgb), .65); background: transparent;
  border: 1px solid rgba(var(--gold-rgb), .22); transition: all .18s;
}
.erf-stufenknopf:hover { color: var(--c); border-color: var(--c); }
.erf-stufenknopf.an {
  color: var(--c); border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: 0 0 16px -6px var(--c);
}
.erf-taten { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.erf-taten .sank-tat { width: auto; }
.erf-nachladen { position: relative; }
.erf-nachladen summary { list-style: none; }
.erf-nachladen summary::-webkit-details-marker { display: none; }
.erf-nachform {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(320px, 80vw);
  padding: 14px; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .35);
  background: rgba(var(--kopf-rgb), .98); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9);
  animation: kastenAuf .22s ease both;
}
.erf-zuletzt { margin: 8px 0 0; font-size: 11px; color: rgba(var(--hell-rgb), .35); }

@media (max-width: 640px) {
  .erf-hochladen { grid-template-columns: 1fr; }
  .erf-nachform { right: auto; left: 0; }
}

/* ── Termine: die Knöpfe der Leiste und „Heute als Bild" ────────── */
.term-leistenknoepfe { display: inline-flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.term-bildknopf { display: inline-flex; align-items: center; gap: 8px; }
.term-bildzahl {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  font: 700 11px ui-monospace, Consolas, monospace; color: #0b0614; background: var(--zweit, #3ee0ff);
}

@media (prefers-reduced-motion: reduce) {
  .tb-heldbild img, .tb-heldschein, .tb-kuvert, .tb-siegel, .tb-punkt { animation: none; }
}

/* Ab drei anderen Bereichen: die Wechselknöpfe nur mit Wappen */
.kopfknopf.welt-knopf.welt-knopf-kompakt { padding: 5px 7px; gap: 0; }
.kopfknopf.welt-knopf.welt-knopf-kompakt .welt-name,
.kopfknopf.welt-knopf.welt-knopf-kompakt .welt-pfeil { display: none; }
.kopfknopf.welt-knopf.welt-knopf-kompakt img { width: 24px; height: 24px; }
/* Sprünge auf einen Eintrag (erfassen.php#e7) landen unter dem klebenden Kopf */
.erf-karte, .tb-umschlag { scroll-margin-top: 190px; }

/* ══ Toter Briefkasten: Einschreiben und „Eingeschrieben" ═══════════ */
.tbe-weg {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.tbe-weg li {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(var(--flaeche-rgb), .7);
  color: rgba(var(--hell-rgb), .5);
}
.tbe-weg li.an { border-color: rgba(var(--zweit-rgb), .6); color: #fff;
  box-shadow: 0 0 30px -10px rgba(var(--gold-rgb), .8); background: rgba(var(--gold-rgb), .1); }
.tbe-weg li.fertig { border-color: rgba(62, 224, 143, .45); color: rgba(var(--hell-rgb), .85); }
.tbe-punkt {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 700 14px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .6);
  border: 1px solid rgba(var(--gold-rgb), .35);
}
.tbe-weg li.an .tbe-punkt { color: #fff; background: var(--knopf-verlauf); border-color: transparent; }
.tbe-weg li.fertig .tbe-punkt { color: #0b0614; background: #3ee08f; border-color: transparent; }
.tbe-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.tbe-text strong { font-size: 14px; }
.tbe-formular { margin-top: 16px; padding: 22px 24px; }
.tbe-hinweis {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(224, 163, 74, .4); background: rgba(224, 163, 74, .08); color: #f1cf95; font-size: 13px;
}
.tbe-hinweis .tb-punkt { background: #e0a34a; box-shadow: 0 0 10px #e0a34a; }
.tbe-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.tb-gruppe {
  margin: 14px 0 0; font: 600 10.5px ui-monospace, Consolas, monospace; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(var(--zweit-rgb), .75);
}
.tb-gruppe + .tb-empfaenger { margin-top: 8px; }
.tb-personkarte.extern { border-style: dashed; }

.tbm-liste { display: grid; gap: 12px; margin-top: 14px; }
.tbm-zeile {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px;
  align-items: center; padding: 16px 18px; border-left: 3px solid var(--c, var(--gold));
}
.tbm-bild {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  font-size: 20px; font-weight: 700; color: #0b0614; background: var(--c, var(--gold));
  box-shadow: 0 0 22px -6px var(--c, var(--gold));
}
.tbm-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tbm-name { font-size: 17px; font-weight: 700; color: #fff; }
.badge.tbm-status {
  color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.tbm-angaben { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 8px 0 0; font-size: 13.5px; color: rgba(var(--hell-rgb), .85); }
.tbm-angaben a { color: var(--gold-hell); text-decoration: none; }
.tbm-angaben a:hover { text-decoration: underline; }
.tbm-id { margin-left: 6px; font-size: 11px; color: rgba(var(--hell-rgb), .35); }
.tbm-fuss { margin: 6px 0 0; font-size: 11.5px; color: rgba(var(--hell-rgb), .4); }
.sank-tat.tbm-frei { color: #7ee0a8; border-color: rgba(62, 224, 143, .45); }
.sank-tat.tbm-frei:hover { background: rgba(62, 224, 143, .14); border-color: rgba(62, 224, 143, .75); }

@media (max-width: 720px) {
  .tbe-weg, .tbe-felder { grid-template-columns: 1fr; }
  .tbm-zeile { grid-template-columns: 44px minmax(0, 1fr); }
  .tbm-zeile .sank-taten { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .tbm-zeile .sank-tat { width: auto; }
}

/* ══ Das eigene Profilbild ═══════════════════════════════════════════ */
/* Oben im Kopf: das Bild führt zum Profil, ein Stift zeigt es an */
a.navbild-link { position: relative; text-decoration: none; cursor: pointer; transition: box-shadow .2s, transform .2s; }
a.navbild-link:hover { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(var(--zweit-rgb), .7), 0 0 16px rgba(var(--gold-rgb), .6); }
.navbild-stift {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: 12px; color: #fff; background: rgba(8, 5, 14, .6); opacity: 0; transition: opacity .2s;
}
a.navbild-link:hover .navbild-stift { opacity: 1; }

.pb-held {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 28px;
  background:
    radial-gradient(360px 240px at 10% 50%, rgba(var(--gold-rgb), .22), transparent 70%),
    radial-gradient(420px 260px at 100% 0%, rgba(var(--zweit-rgb), .10), transparent 70%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .92), rgba(var(--kopf-rgb), .94));
}
.pb-rahmen { position: relative; display: grid; place-items: center; width: 180px; height: 180px; margin: 0 auto; }
.pb-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold), var(--zweit), var(--gold));
  filter: blur(.5px); animation: pbDrehen 7s linear infinite;
}
.pb-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: rgb(var(--kopf-rgb)); }
@keyframes pbDrehen { to { transform: rotate(360deg); } }
.pb-bild {
  position: relative; z-index: 1; display: grid; place-items: center; width: 164px; height: 164px;
  border-radius: 50%; overflow: hidden; box-shadow: 0 0 40px -6px rgba(var(--gold-rgb), .8);
}
.pb-bild img { width: 100%; height: 100%; object-fit: cover; }
.pb-ersatz {
  display: none; width: 100%; height: 100%; place-items: center;
  font-size: 64px; font-weight: 700; color: #0b0614; background: var(--c, var(--gold));
}
.pb-bild.ohne-bild .pb-ersatz { display: grid; }
.pb-bild.ohne-bild img { display: none; }
.pb-text h1 { margin: 4px 0 0; font-size: 32px; }
.pb-text .muted { margin: 8px 0 12px; max-width: 620px; line-height: 1.65; }

.pb-formular { margin-top: 16px; padding: 22px 24px; }
.pb-hochladen { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: stretch; margin-top: 10px; }
.pb-vorschau { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.pb-vorschau[hidden] { display: none; }
.pb-vorschaubild {
  display: block; width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(var(--zweit-rgb), .7); box-shadow: 0 0 30px -6px rgba(var(--gold-rgb), .9);
  animation: kastenAuf .3s cubic-bezier(.2, .8, .3, 1) both;
}
.pb-vorschaubild img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 720px) {
  .pb-held { grid-template-columns: 1fr; text-align: center; }
  .pb-hochladen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pb-ring { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════
   LAGER — Reiter, Warengruppen und die Kostenkalkulation
   ══════════════════════════════════════════════════════════════════════ */
.lager-reiter {
  position: sticky; top: 0; z-index: 25; display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 20px; padding: 6px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .22);
  background: rgba(var(--kopf-rgb), .88); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
}
.lager-reiterknopf {
  flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 13px; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
  color: rgba(var(--hell-rgb), .62); background: transparent;
  transition: color .18s, background .18s, box-shadow .18s, transform .18s;
}
.lager-reiterknopf:hover { color: #fff; background: rgba(var(--gold-rgb), .1); transform: translateY(-1px); }
.lager-reiterknopf.an {
  color: #fff;
  background:
    linear-gradient(rgba(var(--kopf-rgb), .92), rgba(var(--kopf-rgb), .92)) padding-box,
    linear-gradient(95deg, var(--gold), var(--zweit)) border-box;
  box-shadow: 0 0 22px rgba(var(--gold-rgb), .35);
}
.lager-reiterzeichen { font-size: 16px; }
.lager-reiterzahl {
  padding: 2px 8px; border-radius: 999px; font: 600 11px ui-monospace, Consolas, monospace;
  color: var(--gold-hell); background: rgba(var(--gold-rgb), .16);
}
.lager-tafel { animation: lagerTafel .3s cubic-bezier(.2, .8, .3, 1) both; }
.lager-tafel[hidden] { display: none; }
@keyframes lagerTafel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lager-gruppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lager-aus { display: none !important; }
.preis-klapp.lager-offen { margin-top: 16px; }
.preis-klapp.lager-offen > summary { cursor: default; pointer-events: none; }
.preis-klapp.lager-offen .preis-pfeil { display: none; }
.preis-klapp .lager-gruppen { margin: 0 0 12px; }
.preis-block[hidden] { display: none; }

/* ── Die Kalkulation ─────────────────────────────────────────────── */
.kalk { margin-top: 16px; display: grid; gap: 16px; }
.kalk-kopfleiste { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.kalk-titel { margin: 4px 0 0; font-size: 26px; }
.kalk-unter { margin: 6px 0 0; max-width: 680px; }
.kalk-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kalk-stand { font: 600 11px ui-monospace, Consolas, monospace; letter-spacing: .06em; color: rgba(var(--hell-rgb), .45); }
.kalk-stand.offen { color: #e0a34a; }
.kalk-hinweis {
  margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.6;
  border: 1px dashed rgba(var(--zweit-rgb), .45); background: rgba(var(--zweit-rgb), .06); color: rgba(var(--hell-rgb), .8);
}
.kalk-hinweis code { font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: rgba(var(--gold-rgb), .18); color: #fff; }
.kalk-link { border: 0; background: none; padding: 0; margin-left: 6px; cursor: pointer; font: inherit; color: #ff8fa3; text-decoration: underline; }

.kalk-karte {
  position: relative; overflow: hidden; padding: 18px 20px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2);
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .06), transparent 40%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .94), rgba(var(--kopf-rgb), .96));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 50px -30px rgba(0, 0, 0, .9);
}
.kalk-marke {
  margin: 0; font: 600 10.5px ui-monospace, Consolas, monospace; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(var(--hell-rgb), .55);
}
.kalk-oben { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.kalk-mitte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kalk-unten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.kalk-riesig {
  margin: 10px 0 0; font-size: clamp(38px, 6vw, 66px); line-height: 1; font-weight: 800; letter-spacing: -.02em;
  color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kalk-gross { margin: 10px 0 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; font-variant-numeric: tabular-nums; }
.kalk-mittelgross { margin: 8px 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kalk-rot   { color: #ff4d6d !important; text-shadow: 0 0 28px rgba(255, 77, 109, .35); }
.kalk-gruen { color: #3ee08f !important; text-shadow: 0 0 28px rgba(62, 224, 143, .3); }
.kalk-hell  { color: #fff; }
.kalk-puls { animation: kalkPuls .45s ease; }
@keyframes kalkPuls { 0% { filter: brightness(1.6); transform: translateY(-2px); } 100% { filter: none; transform: none; } }

.kalk-zeitraum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.kalk-kasten {
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(0, 0, 0, .22);
}
.kalk-faktor { margin: 6px 0 0; font-size: 11.5px; color: rgba(var(--hell-rgb), .45); display: flex; align-items: center; gap: 4px; }
.kalk-satz { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(var(--hell-rgb), .62); }
.kalk-balken {
  margin-top: 14px; height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 77, 109, .1); border: 1px solid rgba(255, 77, 109, .25);
}
.kalk-balken span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #ff4d6d, #ff9f43);
  box-shadow: 0 0 16px rgba(255, 77, 109, .6); transition: width .45s cubic-bezier(.2, .8, .3, 1);
}
.kalk-balkentext { margin: 6px 0 0; font-size: 11.5px; color: rgba(var(--hell-rgb), .45); }
.kalk-balkentext strong { color: #ff8fa3; }

/* Die Regler */
.kalk-regler { margin-top: 16px; }
.kalk-reglerkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kalk-reglertitel { font-weight: 700; font-size: 14px; color: #fff; }
.kalk-reglerwert { font-weight: 700; font-size: 15px; color: var(--gold-hell); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kalk-schieber {
  --anteil: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 12px 0 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0, var(--zweit) var(--anteil), rgba(255, 255, 255, .08) var(--anteil));
  outline: none; cursor: pointer;
}
.kalk-schieber::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .25), 0 0 18px rgba(var(--gold-rgb), .8);
  transition: transform .15s;
}
.kalk-schieber::-webkit-slider-thumb:hover { transform: scale(1.15); }
.kalk-schieber::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .25), 0 0 18px rgba(var(--gold-rgb), .8);
}
.kalk-schieber:focus-visible { box-shadow: 0 0 0 2px rgba(var(--zweit-rgb), .6); }
.kalk-skala { display: flex; justify-content: space-between; font: 500 10.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .4); }
.kalk-schnell { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kalk-schnellknopf {
  padding: 7px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  color: rgba(var(--hell-rgb), .75); background: rgba(255, 255, 255, .03); border: 1px solid rgba(var(--gold-rgb), .22);
  transition: all .15s;
}
.kalk-schnellknopf:hover { color: #fff; border-color: rgba(var(--gold-rgb), .55); }
.kalk-schnellknopf.an { color: #fff; background: var(--knopf-verlauf); border-color: transparent; box-shadow: 0 0 16px rgba(var(--gold-rgb), .5); }

/* Listen: Einkauf, Westen, Munition, weitere Kosten */
.kalk-liste { margin-top: 16px; display: grid; }
.kalk-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid rgba(var(--gold-rgb), .1); font-size: 13px; color: rgba(var(--hell-rgb), .72);
}
.kalk-zeile:first-child { border-top: 0; }
.kalk-zeilenname { flex: 1; min-width: 0; }
.kalk-zeile.kalk-summe { color: #fff; }
.kalk-zeile.kalk-summe strong { font-variant-numeric: tabular-nums; }
.kalk-zahlfeld { display: inline-flex; align-items: center; gap: 4px; }
.kalk-zahl {
  width: 110px; padding: 5px 8px; border-radius: 8px; text-align: right;
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff;
  background: transparent; border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.kalk-faktor .kalk-zahl { width: 46px; padding: 2px 4px; font-size: 11.5px; font-weight: 600; color: rgba(var(--hell-rgb), .75); }
.kalk-zahl:hover { border-color: rgba(var(--gold-rgb), .3); }
.kalk-zahl:focus { outline: none; border-color: var(--zweit); background: rgba(var(--zweit-rgb), .08); }
.kalk-einheit { font-weight: 700; color: rgba(var(--hell-rgb), .8); }

/* Bearbeiten */
.kalk-feld {
  width: 100%; padding: 6px 9px; border-radius: 8px; font: inherit; color: #fff;
  background: rgba(var(--zweit-rgb), .06); border: 1px dashed rgba(var(--zweit-rgb), .5);
}
.kalk-feld:focus { outline: none; border-style: solid; border-color: var(--zweit); background: rgba(var(--zweit-rgb), .1); }
.kalk-feld-lang { resize: vertical; min-height: 44px; line-height: 1.5; }
.kalk-marke .kalk-feld { font: inherit; letter-spacing: inherit; text-transform: none; }
.kalk-titel .kalk-feld { font-size: 22px; font-weight: 700; }
.kalk-reglerkopf .kalk-feld { flex: 1; font-weight: 700; }
.kalk-grenzen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; color: rgba(var(--hell-rgb), .5); }
.kalk-grenzen label { display: inline-flex; align-items: center; gap: 4px; }
.kalk-klein { width: 70px; padding: 3px 6px; font-size: 11.5px; }
.kalk-mittel { width: 110px; padding: 3px 6px; font-size: 11.5px; }
.kalk-haken input { accent-color: var(--gold); }
.kalk-zeilenname.kalk-feld { flex: 1; }
.kalk-weg {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 11px;
  color: #ff9aae; background: transparent; border: 1px solid rgba(224, 71, 95, .45);
}
.kalk-plus {
  margin-top: 8px; padding: 7px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--gold-hell); background: transparent; border: 1px dashed rgba(var(--gold-rgb), .45);
}
.kalk-plus:hover { background: rgba(var(--gold-rgb), .1); }
.kalk.kalk-bearbeiten .kalk-karte { border-style: dashed; border-color: rgba(var(--zweit-rgb), .35); }

.kalk-klein-karte { text-align: center; }
.kalk-klein-karte .kalk-satz { max-width: 320px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .kalk-oben, .kalk-mitte { grid-template-columns: 1fr; }
  .kalk-unten { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kalk-zeitraum { grid-template-columns: 1fr; }
  .lager-reiterknopf { flex-basis: 45%; padding: 9px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kalk-puls, .lager-tafel { animation: none; }
}

/* Anmeldeseite: der Weg in den Toten Briefkasten — für jedes Discord-Konto */
.login-briefkasten {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px;
  border-radius: 14px; text-align: left; text-decoration: none; color: inherit;
  border: 1px solid rgba(139, 61, 255, .5);
  background:
    radial-gradient(220px 120px at 0% 50%, rgba(139, 61, 255, .28), transparent 70%),
    rgba(10, 6, 18, .75);
  box-shadow: 0 0 30px -12px rgba(139, 61, 255, .9);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.login-briefkasten:hover { transform: translateY(-2px); border-color: #b57bff; box-shadow: 0 0 36px -8px rgba(139, 61, 255, 1); }
.login-briefkasten img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(139, 61, 255, .8)); }
.login-briefkasten-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: rgba(232, 222, 255, .65); }
.login-briefkasten-text strong { font-size: 14px; color: #e4d2ff; letter-spacing: .04em; }
.login-briefkasten-pfeil { font-size: 18px; color: #c9a2ff; transition: transform .2s; }
.login-briefkasten:hover .login-briefkasten-pfeil { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════════
   TOTER BRIEFKASTEN — Empfängerwahl, „Eingeschrieben", Administration
   ══════════════════════════════════════════════════════════════════════ */

/* ── Die Empfängerwahl („An wen?") ───────────────────────────────── */
.tbw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.tbw-bestand { font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.tbw-bestand strong { color: var(--gold-hell); font-size: 14px; }
.tb-schritt.fehlt { animation: tbwRuetteln .45s ease; border-color: rgba(224, 71, 95, .7); }
@keyframes tbwRuetteln {
  0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

.tbw-suchzeile {
  position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 4px 6px 4px 14px; border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb), .3); background: rgba(0, 0, 0, .3);
  transition: border-color .2s, box-shadow .2s;
}
.tbw-suchzeile:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 4px rgba(var(--zweit-rgb), .12), 0 0 30px -10px rgba(var(--gold-rgb), .9); }
.tbw-lupe { font-size: 20px; color: rgba(var(--zweit-rgb), .8); }
.tbw-suche {
  flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: #fff;
}
.tbw-suche::placeholder { color: rgba(var(--hell-rgb), .35); }
.tbw-tasten { display: flex; gap: 3px; }
.tbw-tasten kbd {
  padding: 2px 6px; border-radius: 6px; font: 600 10px ui-monospace, Consolas, monospace;
  color: rgba(var(--hell-rgb), .5); border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(255, 255, 255, .03);
}

.tbw-gruppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tbw-gruppenknopf {
  padding: 6px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: rgba(var(--hell-rgb), .65); background: transparent; border: 1px solid rgba(var(--gold-rgb), .22);
  transition: all .18s;
}
.tbw-gruppenknopf span { margin-left: 4px; font: 600 11px ui-monospace, Consolas, monospace; opacity: .7; }
.tbw-gruppenknopf:hover { color: #fff; border-color: rgba(var(--gold-rgb), .55); }
.tbw-gruppenknopf.an { color: #fff; background: var(--knopf-verlauf); border-color: transparent; box-shadow: 0 0 18px rgba(var(--gold-rgb), .45); }

.tbw-zuletzt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.tbw-zuletztmarke { font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--zweit-rgb), .7); margin-right: 4px; }
.tbw-schnell {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: rgba(var(--hell-rgb), .85);
  background: rgba(var(--gold-rgb), .08); border: 1px solid rgba(var(--gold-rgb), .25); transition: all .18s;
}
.tbw-schnell:hover { border-color: var(--zweit); background: rgba(var(--gold-rgb), .18); transform: translateY(-1px); }

.tbw-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px;
  margin-top: 12px; max-height: 360px; overflow-y: auto; padding: 4px; margin-left: -4px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), .4) transparent;
}
.tbw-person {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 12px 8px 8px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(var(--flaeche-rgb), .7);
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.tbw-person[hidden] { display: none; }
.tbw-liste.neu .tbw-person:not([hidden]) { animation: tbwRein .32s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes tbwRein { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.tbw-person input { position: absolute; opacity: 0; pointer-events: none; }
.tbw-person:hover, .tbw-person.aktiv { border-color: rgba(var(--gold-rgb), .55); background: rgba(var(--gold-rgb), .1); transform: translateY(-1px); }
.tbw-person.aktiv { box-shadow: 0 0 0 1px rgba(var(--zweit-rgb), .5); }
.tbw-person.gewaehlt, .tbw-person:has(input:checked) {
  border-color: var(--zweit); background: rgba(var(--gold-rgb), .2);
  box-shadow: 0 0 26px -8px rgba(var(--gold-rgb), 1);
}
.tbw-person.extern { border-style: dashed; }
.tbw-bild {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-weight: 800; color: #0b0614; background: var(--c, var(--gold));
  box-shadow: 0 0 14px -4px var(--c, var(--gold));
}
.tbw-bild-klein { width: 24px; height: 24px; font-size: 11px; }
.tbw-text { display: flex; flex-direction: column; min-width: 0; }
.tbw-name { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbw-name mark { background: rgba(var(--zweit-rgb), .35); color: #fff; border-radius: 3px; padding: 0 1px; }
.tbw-gruppe { font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.tbw-haken {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px;
  color: transparent; border: 1px solid rgba(var(--gold-rgb), .3); transition: all .2s;
}
.tbw-person.gewaehlt .tbw-haken, .tbw-person:has(input:checked) .tbw-haken { color: #0b0614; background: #3ee08f; border-color: transparent; transform: scale(1.1); }
.tbw-hinweis { margin: 10px 0 0; font: 500 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .5); }

/* Die getroffene Wahl — die Liste klappt dafür zu */
.tbw-waehler { overflow: hidden; transition: max-height .4s cubic-bezier(.2, .8, .3, 1), opacity .3s; max-height: 900px; }
.tbw-waehler.zu { max-height: 0; opacity: 0; pointer-events: none; }
.tbw-gewaehlt {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid rgba(var(--zweit-rgb), .55);
  background:
    radial-gradient(300px 120px at 0% 50%, rgba(var(--gold-rgb), .25), transparent 70%),
    rgba(var(--flaeche-rgb), .8);
  box-shadow: 0 0 30px -12px rgba(var(--gold-rgb), 1);
}
.tbw-gewaehlt[hidden] { display: none; }
.tbw-gewaehlt.neu { animation: tbwGewaehlt .45s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes tbwGewaehlt { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.tbw-gewaehltbild {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 20px;
  font-weight: 800; color: #0b0614; background: var(--c, var(--gold)); box-shadow: 0 0 22px -4px var(--c, var(--gold));
}
.tbw-gewaehlttext { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tbw-gewaehltmarke { font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--zweit-rgb), .8); }
.tbw-gewaehlttext strong { font-size: 17px; color: #fff; }
.tbw-gewaehltgruppe { font-size: 11.5px; color: rgba(var(--hell-rgb), .5); }
.tbw-siegel { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #0b0614; background: #3ee08f; box-shadow: 0 0 16px rgba(62, 224, 143, .6); }
.tbw-aendern {
  padding: 7px 14px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--gold-hell); background: transparent; border: 1px solid rgba(var(--gold-rgb), .4);
}
.tbw-aendern:hover { background: rgba(var(--gold-rgb), .14); }

/* ── „Eingeschrieben": Kopf mit Zahlen und Verteilung ────────────── */
.tbl-kopf {
  margin-top: 24px; padding: 22px 24px;
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(var(--gold-rgb), .2), transparent 70%),
    radial-gradient(420px 240px at 100% 100%, rgba(var(--zweit-rgb), .1), transparent 70%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .92), rgba(var(--kopf-rgb), .94));
}
.tbl-kopftext h1 { margin: 4px 0 0; font-size: 30px; }
.tbl-kopftext .muted { margin-top: 6px; max-width: 680px; line-height: 1.6; }
.tbl-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.tbl-zahl {
  padding: 14px 16px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, transparent), transparent);
  animation: tblZahl .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms);
}
.tbl-zahl strong { display: block; font-size: 30px; line-height: 1.1; color: var(--c); text-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); }
.tbl-zahl span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }
@keyframes tblZahl { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tbl-verteilung { display: flex; gap: 3px; height: 8px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.tbl-verteilung span {
  width: var(--w); background: var(--c); box-shadow: 0 0 12px var(--c);
  animation: tblBalken .9s cubic-bezier(.2, .8, .3, 1) both; transform-origin: left;
}
@keyframes tblBalken { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Die Warteschlange ───────────────────────────────────────────── */
.tbq { margin-top: 22px; }
.tbq-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tbq-kopf form { margin: 0; }
.tbq-zahl {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 8px; padding: 0 7px;
  border-radius: 999px; font: 700 12px ui-monospace, Consolas, monospace; color: #0b0614; background: #e0a34a;
  box-shadow: 0 0 16px rgba(224, 163, 74, .7); animation: tbPuls 1.8s ease-in-out infinite;
}
.tbq-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.tbq-karte {
  position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 14px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(224, 163, 74, .45);
  background:
    radial-gradient(200px 120px at 0% 0%, rgba(224, 163, 74, .16), transparent 70%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .95), rgba(var(--kopf-rgb), .96));
  animation: tbqRein .45s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms);
  transition: transform .2s, box-shadow .2s;
}
.tbq-karte:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9), 0 0 30px -12px rgba(224, 163, 74, .8); }
@keyframes tbqRein { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.tbq-karte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(180px 180px at var(--lx, 50%) var(--ly, 50%), rgba(224, 163, 74, .14), transparent 70%);
}
.tbq-karte:hover::after { opacity: 1; }
.tbq-bild {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  font-size: 20px; font-weight: 800; color: #0b0614; background: var(--c); box-shadow: 0 0 18px -4px var(--c);
}
.tbq-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .7); }
.tbq-text strong { font-size: 15.5px; color: #fff; }
.tbq-seit { margin-top: 2px; font: 600 10.5px ui-monospace, Consolas, monospace; color: #e0a34a; }
.tbq-taten { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.tbq-taten form { margin: 0; }
.tbq-ja, .tbq-nein {
  width: 100%; padding: 9px 12px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.tbq-ja { color: #0b1a12; background: linear-gradient(110deg, #26c47a, #3ee08f); border: 0; box-shadow: 0 0 18px -4px rgba(62, 224, 143, .8); }
.tbq-ja:hover { transform: translateY(-1px); box-shadow: 0 0 26px -2px rgba(62, 224, 143, .9); }
.tbq-nein { width: 46px; color: #ff9aae; background: transparent; border: 1px solid rgba(224, 71, 95, .5); }
.tbq-nein:hover { background: rgba(224, 71, 95, .16); }

/* ── Alle Eingeschriebenen ───────────────────────────────────────── */
.tbl-werkzeuge {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.tbl-suchzeile {
  flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25);
}
.tbl-suchzeile:focus-within { border-color: var(--zweit); }
.tbl-suchzeile .tbw-suche { padding: 9px 0; font-size: 14px; }
.tbl-sortierung { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(var(--hell-rgb), .5); }
.tbl-sortierung .input { width: auto; padding: 7px 10px; }

.tbl-liste { display: grid; gap: 6px; margin-top: 10px; }
.tbl-zeile {
  position: relative; display: grid; align-items: center; gap: 12px;
  grid-template-columns: 26px 40px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 118px 146px;
  padding: 9px 12px; border-radius: 14px;
  border: 1px solid rgba(var(--gold-rgb), .12); border-left: 3px solid var(--c, var(--gold));
  background: rgba(var(--flaeche-rgb), .72);
  transition: border-color .18s, background .18s, box-shadow .18s;
  scroll-margin-top: 240px;
}
.tbl-zeile[hidden] { display: none; }
.tbl-zeile.rein { animation: tblRein .35s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes tblRein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tbl-zeile:hover { background: rgba(var(--gold-rgb), .08); border-color: rgba(var(--gold-rgb), .3); }
.tbl-zeile.markiert { background: rgba(var(--zweit-rgb), .1); border-color: rgba(var(--zweit-rgb), .5); }
.tbl-zeile:target { animation: tblZiel 1.6s ease; }
@keyframes tblZiel { 0%, 40% { box-shadow: 0 0 0 2px var(--zweit), 0 0 30px rgba(var(--zweit-rgb), .6); } 100% { box-shadow: none; } }
.tbl-listenkopf {
  background: transparent; border: 0; padding-top: 0; padding-bottom: 0;
  font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .4);
}
.tbl-listenkopf:hover { background: transparent; }
.tbl-wahl { display: grid; place-items: center; cursor: pointer; }
.tbl-wahl input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.tbl-bild {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-weight: 800; color: #0b0614; background: var(--c); box-shadow: 0 0 14px -4px var(--c);
}
.tbl-name { display: flex; flex-direction: column; min-width: 0; }
.tbl-name strong { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-name > span { font-size: 11.5px; color: rgba(var(--hell-rgb), .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-id { margin-left: 4px; font: 500 10px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .3); }
.tbl-telefon { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.tbl-telefon a { color: var(--gold-hell); text-decoration: none; }
.tbl-telefon a:hover { text-decoration: underline; }
.tbl-kopieren {
  padding: 2px 6px; border-radius: 6px; cursor: pointer; font-size: 11px; color: rgba(var(--hell-rgb), .5);
  background: transparent; border: 1px solid rgba(var(--gold-rgb), .2); opacity: 0; transition: opacity .15s;
}
.tbl-zeile:hover .tbl-kopieren, .tbl-kopieren.ok { opacity: 1; }
.tbl-kopieren.ok { color: #3ee08f; border-color: rgba(62, 224, 143, .5); }
.tbl-seit { display: flex; flex-direction: column; font-size: 12px; color: rgba(var(--hell-rgb), .65); }
.tbl-entschieden { font-size: 10.5px; color: rgba(var(--hell-rgb), .35); }
.tbl-taten { display: flex; align-items: center; gap: 4px; }
.tbl-taten form { margin: 0; }
.tbl-tat {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 13px; list-style: none; color: rgba(var(--hell-rgb), .75);
  background: transparent; border: 1px solid rgba(var(--gold-rgb), .22); transition: all .15s;
}
.tbl-tat::-webkit-details-marker { display: none; }
.tbl-tat:hover { transform: translateY(-1px); border-color: rgba(var(--gold-rgb), .6); color: #fff; }
.tbl-tat.ja { color: #3ee08f; border-color: rgba(62, 224, 143, .45); }
.tbl-tat.ja:hover { background: rgba(62, 224, 143, .15); }
.tbl-tat.nein:hover, .tbl-tat.weg:hover { background: rgba(224, 71, 95, .15); border-color: rgba(224, 71, 95, .6); }
.tbl-bearbeiten { position: relative; }
.tbl-bearbeitform {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: 260px; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(var(--gold-rgb), .35); background: rgba(var(--kopf-rgb), .98);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .95); animation: kastenAuf .22s ease both;
}
.tbl-bearbeitform .label { margin: 8px 0 4px; }
.tbl-bearbeitform .label:first-of-type { margin-top: 0; }
.tbl-mehr { display: block; margin: 14px auto 0; }
.tbl-mehr[hidden] { display: none; }

/* Die Leiste für die Auswahl */
.tbl-sammel {
  position: fixed; left: 50%; bottom: 20px; z-index: 40; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px;
  border: 1px solid rgba(var(--zweit-rgb), .6); background: rgba(var(--kopf-rgb), .95); backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .9), 0 0 40px -12px rgba(var(--gold-rgb), 1);
  animation: tblSammel .35s cubic-bezier(.2, .8, .3, 1) both;
}
.tbl-sammel[hidden] { display: none; }
@keyframes tblSammel { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translateX(-50%); } }
.tbl-sammelzahl { padding: 0 8px; font-size: 13px; color: rgba(var(--hell-rgb), .75); }
.tbl-sammelzahl strong { color: #fff; font-size: 16px; }
.tbl-sammelknopf {
  padding: 8px 14px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  background: transparent; border: 1px solid rgba(var(--gold-rgb), .35); color: var(--gold-hell);
}
.tbl-sammelknopf.ja { color: #0b1a12; background: linear-gradient(110deg, #26c47a, #3ee08f); border: 0; }
.tbl-sammelknopf.nein { color: #ff9aae; border-color: rgba(224, 71, 95, .55); }
.tbl-sammelknopf.nein:hover { background: rgba(224, 71, 95, .15); }
.tbl-sammelknopf.leer { color: rgba(var(--hell-rgb), .6); }

/* ── Administration ──────────────────────────────────────────────── */
.tba {
  margin-top: 16px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 77, 109, .4);
  background:
    radial-gradient(400px 160px at 0% 0%, rgba(255, 77, 109, .12), transparent 70%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .95), rgba(var(--kopf-rgb), .97));
  box-shadow: 0 0 40px -20px rgba(255, 77, 109, .8);
}
.tba-leiste {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none;
  transition: background .2s;
}
.tba-leiste::-webkit-details-marker { display: none; }
.tba-leiste:hover { background: rgba(255, 77, 109, .06); }
.tba-zeichen {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 18px;
  background: linear-gradient(135deg, rgba(255, 77, 109, .35), rgba(var(--gold-rgb), .3));
  box-shadow: 0 0 18px -4px rgba(255, 77, 109, .9);
}
.tba-titel { font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.tba-kurz { flex: 1; font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.tba-live { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #ff8fa3; }
.tba-live .tb-punkt { background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; }
.tba-pfeil { font-size: 16px; color: rgba(var(--hell-rgb), .6); transition: transform .3s; }
.tba[open] .tba-pfeil { transform: rotate(180deg); }
.tba-inhalt { padding: 4px 18px 18px; animation: tbaAuf .4s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes tbaAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.tba-kacheln { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.tba-kachel {
  padding: 10px 12px; border-radius: 12px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent);
  animation: tblZahl .45s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms);
}
.tba-kachel strong { display: block; font-size: 22px; color: var(--c); }
.tba-kachel span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }

.tba-mitte { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.tba-karte { padding: 14px; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(0, 0, 0, .2); }
.tba-marke { margin: 0 0 10px; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.tba-leer { margin: 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .45); }
.tba-saeulen { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; align-items: end; height: 130px; }
.tba-saeule { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.tba-saeulenbalken {
  width: 100%; height: max(var(--h), 3px); border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--zweit), var(--gold));
  box-shadow: 0 0 14px -4px rgba(var(--gold-rgb), .9);
  transform-origin: bottom; animation: tbaSaeule .7s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms);
}
.tba-saeule.heute .tba-saeulenbalken { background: linear-gradient(180deg, #ffb3c1, #ff4d6d); }
@keyframes tbaSaeule { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tba-saeulenzahl { font: 600 10px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .6); margin-bottom: 3px; }
.tba-saeulentag { margin-top: 4px; font: 500 9.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .35); }
.tba-rang {
  position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; margin-top: 4px;
  border-radius: 8px; font-size: 12.5px; color: rgba(var(--hell-rgb), .85); overflow: hidden;
}
.tba-rang::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .3), rgba(var(--gold-rgb), .06));
  animation: tblBalken .8s cubic-bezier(.2, .8, .3, 1) both; transform-origin: left;
}
.tba-rangname, .tba-rang strong { position: relative; }
.tba-rangname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tba-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.tba-werkzeuge .input { flex: 1 1 260px; }
.tba-tabelle { display: grid; gap: 4px; margin-top: 10px; }
.tba-zeile {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1.6fr) 70px minmax(0, 1fr) 30px;
  padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: rgba(var(--hell-rgb), .8);
  background: rgba(255, 255, 255, .02); border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.tba-zeile[hidden] { display: none; }
.tba-zeile:not(.tba-tabellenkopf):hover { background: rgba(var(--gold-rgb), .08); border-color: rgba(var(--gold-rgb), .2); }
.tba-tabellenkopf { background: transparent; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .4); }
.tba-zeit { font: 500 11.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .55); }
.tba-weg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tba-person { color: #fff; font-weight: 600; }
.tba-pfeil2 { color: var(--zweit); }
.tba-anonym { padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; color: #ff8fa3; border: 1px solid rgba(255, 77, 109, .45); }
.tba-inhalt-zelle { display: flex; flex-direction: column; min-width: 0; }
.tba-titel2 { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tba-quelle { font-size: 11px; color: rgba(var(--hell-rgb), .45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tba-quelle a { color: var(--gold-hell); text-decoration: none; }
.tba-groesse { font: 500 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .5); }
.tba-stand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.badge.tba-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); font-size: 10.5px; }
.tba-badge .tb-punkt { width: 6px; height: 6px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.tba-wann { font: 500 10.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .4); }
.tba-ansehen a { text-decoration: none; font-size: 15px; opacity: .7; transition: opacity .15s, transform .15s; display: inline-block; }
.tba-ansehen a:hover { opacity: 1; transform: scale(1.15); }

@media (max-width: 1100px) {
  .tba-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tba-mitte { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .tbl-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbl-zeile { grid-template-columns: 26px 38px minmax(0, 1fr) auto; }
  .tbl-telefon, .tbl-seit { grid-column: 3 / -1; }
  .tbl-zeile .badge { grid-column: 3; justify-self: start; }
  .tbl-listenkopf { display: none; }
  .tba-zeile { grid-template-columns: 1fr auto; }
  .tba-tabellenkopf { display: none; }
  .tba-zeit, .tba-groesse { font-size: 10.5px; }
  .tbw-tasten { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tbw-person, .tbl-zeile, .tbq-karte, .tba-saeulenbalken, .tbl-verteilung span, .tba-rang::before { animation: none !important; }
}

.tbq-karte[hidden] { display: none; }

/* Stand und Taten stehen in festen Spalten, damit die Überschriften passen */
.tbl-zeile > .badge.tbm-status { justify-self: start; }
.tbl-taten { justify-content: flex-end; }

/* Sanktionen: erledigt / nicht erledigt */
.sank-tat.sank-erledigt { color: #7ee0a8; border-color: rgba(126, 196, 139, .5); }
.sank-tat.sank-erledigt:hover { background: rgba(126, 196, 139, .16); border-color: rgba(126, 196, 139, .8); }
.sank-tat.sank-nichterledigt { color: #f1c27d; border-color: rgba(224, 163, 74, .5); }
.sank-tat.sank-nichterledigt:hover { background: rgba(224, 163, 74, .14); }

/* ══════════════════════════════════════════════════════════════════════
   ABWESENHEIT — neu: Ring, eigener Stand, Tafel mit Suche
   ══════════════════════════════════════════════════════════════════════ */
.aw-held {
  margin-top: 24px; padding: 24px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; align-items: center;
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(var(--gold-rgb), .2), transparent 70%),
    radial-gradient(360px 240px at 100% 100%, rgba(var(--zweit-rgb), .12), transparent 70%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .92), rgba(var(--kopf-rgb), .94));
}
.aw-heldtext h1 { margin: 4px 0 0; font-size: 32px; }
.aw-heldtext .muted { margin-top: 8px; max-width: 620px; line-height: 1.6; }
.aw-heldzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.aw-heldzahl {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px;
  color: rgba(var(--hell-rgb), .75);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.aw-heldzahl strong { font-size: 16px; color: var(--c); }
.aw-heldzeichen { color: var(--c); }

/* Der Ring: abgemeldet, verspätet, unentschuldigt — der Rest ist da */
.aw-ring {
  position: relative; width: 180px; height: 180px; border-radius: 50%; margin: 0 auto;
  background: conic-gradient(
    #7ec48b 0 var(--ab2),
    #e0a34a var(--ab2) var(--sp2),
    #e0475f var(--sp2) var(--un2),
    rgba(var(--zweit-rgb), .55) var(--un2) 360deg);
  box-shadow: 0 0 40px -10px rgba(var(--gold-rgb), .8);
  animation: awRingDreh 1.1s cubic-bezier(.2, .8, .3, 1) both;
}
.aw-ring::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(var(--gold-rgb), .35); animation: awRingUm 30s linear infinite;
}
@keyframes awRingDreh { from { transform: rotate(-120deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes awRingUm { to { transform: rotate(360deg); } }
.aw-ringinnen {
  position: absolute; inset: 16px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(var(--gold-rgb), .18), rgb(var(--kopf-rgb)) 70%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .8);
}
.aw-ringinnen strong { font-size: 42px; line-height: 1; color: #fff; text-shadow: 0 0 24px rgba(var(--gold-rgb), .7); }
.aw-ringinnen span { font-size: 12px; color: rgba(var(--hell-rgb), .6); }
.aw-ringinnen em { margin-top: 4px; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--zweit); }

/* Mein Stand: heute und morgen */
.aw-ich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.aw-ichkarte {
  --c: rgba(var(--zweit-rgb), 1);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(var(--flaeche-rgb), .9) 60%);
  transition: transform .2s, box-shadow .2s;
}
.aw-ichkarte:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9), 0 0 26px -12px var(--c); }
.aw-ichtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-ichtag { font: 600 10.5px ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.aw-ichtext strong { font-size: 16px; color: #fff; }
.aw-ichgrund { font-size: 12px; font-style: italic; color: rgba(var(--hell-rgb), .6); }
.aw-ichkarte form { margin: 0; }
.aw-ichknopf {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; cursor: pointer;
  font-size: 18px; font-weight: 800; color: #fff;
  background: var(--knopf-verlauf); border: 0; box-shadow: 0 0 22px -4px rgba(var(--gold-rgb), .9);
  transition: transform .18s;
}
.aw-ichknopf:hover { transform: scale(1.08) rotate(-4deg); }
.aw-ichknopf.gesetzt { color: #0b0614; background: var(--c); box-shadow: 0 0 22px -4px var(--c); }
.aw-ichknopf.fest { cursor: default; opacity: .8; }

/* Gestern, heute, morgen */
.aw-statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.aw-statkarte {
  position: relative; overflow: hidden; padding: 16px 18px;
  animation: tblZahl .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms);
}
.aw-statkarte.heute { border-color: rgba(var(--zweit-rgb), .55); box-shadow: 0 0 30px -14px rgba(var(--zweit-rgb), 1); }
.aw-statkarte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(200px 160px at var(--lx, 50%) var(--ly, 50%), rgba(var(--gold-rgb), .14), transparent 70%);
}
.aw-statkarte:hover::after { opacity: 1; }
.aw-statkopf { display: flex; justify-content: space-between; margin: 0; font-weight: 700; color: #fff; }
.aw-statdatum { font: 500 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.aw-statda { margin: 8px 0 0; color: rgba(var(--hell-rgb), .55); font-size: 12px; }
.aw-statda strong { font-size: 30px; color: #fff; margin-right: 4px; }
.aw-statbalken { display: flex; gap: 3px; height: 7px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: rgba(var(--zweit-rgb), .14); }
.aw-statbalken span { width: var(--w); background: var(--c); box-shadow: 0 0 10px var(--c); transform-origin: left; animation: tblBalken .9s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
.aw-statteile { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--c); }
.aw-statteile span { color: var(--c); }
.aw-statteile strong { color: #fff; }

/* Woche, Suche, Filter */
.aw-werkzeuge {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 18px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.aw-woche { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); }
.aw-pfeil {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; text-decoration: none;
  font-size: 20px; color: var(--gold-hell); transition: background .15s, transform .15s;
}
.aw-pfeil:hover { background: rgba(var(--gold-rgb), .18); transform: scale(1.08); }
.aw-wochenname { padding: 0 10px; font-weight: 700; color: #fff; white-space: nowrap; }
.aw-suche {
  flex: 1 1 200px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8);
}
.aw-suche:focus-within { border-color: var(--zweit); }
.aw-suche input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }

/* Die Tafel */
.aw-tafelrahmen { margin-top: 12px; padding: 0; overflow-x: auto; }
.aw-tafel { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(7, minmax(64px, 1fr)); min-width: 760px; }
.aw-reihe { display: contents; }
.aw-reihe[hidden] { display: none; }
.aw-ecke, .aw-kopf {
  position: sticky; top: 0; z-index: 2; padding: 12px 10px; background: rgba(var(--kopf-rgb), .96);
  border-bottom: 1px solid rgba(var(--gold-rgb), .2);
}
.aw-ecke { font: 600 10.5px ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); display: flex; align-items: center; gap: 8px; }
.aw-anzahl { padding: 1px 8px; border-radius: 999px; color: var(--gold-hell); background: rgba(var(--gold-rgb), .18); }
.aw-kopf { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.aw-kopf.heute { background: linear-gradient(180deg, rgba(var(--zweit-rgb), .2), rgba(var(--kopf-rgb), .96)); box-shadow: inset 0 -2px 0 var(--zweit); }
.aw-kopf.vergangen { opacity: .6; }
.aw-wochentag { font-weight: 800; color: #fff; }
.aw-datum { font: 500 10.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.aw-kopfzahlen { display: flex; gap: 3px; min-height: 16px; }
.aw-kopfzahlen span { padding: 0 5px; border-radius: 999px; font: 700 10px ui-monospace, Consolas, monospace; color: #0b0614; background: var(--c); }

.aw-person, .aw-zelle {
  padding: 8px 10px; border-bottom: 1px solid rgba(var(--gold-rgb), .08);
  animation: tblRein .4s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms);
}
.aw-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aw-reihe:hover > div { background: rgba(var(--gold-rgb), .05); }
.aw-reihe.ich > div { background: rgba(var(--zweit-rgb), .07); }
.aw-reihe.ich > .aw-person { box-shadow: inset 3px 0 0 var(--zweit); }
.aw-bild { position: relative; display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; }
.aw-bild img { width: 100%; height: 100%; object-fit: cover; }
.aw-ersatz { display: none; width: 100%; height: 100%; place-items: center; font-weight: 800; color: #0b0614; background: var(--c); }
.aw-bild.ohne-bild .aw-ersatz { display: grid; }
.aw-namensfeld { display: flex; flex-direction: column; min-width: 0; }
.aw-name { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-name.aw-gelb { color: #f1c27d; }
.aw-name.aw-rot { color: #ff6b81; text-shadow: 0 0 12px rgba(255, 77, 109, .5); }
.aw-du { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #0b0614; background: var(--zweit); }
.aw-warnzahl { font-size: 11px; color: rgba(var(--hell-rgb), .55); }
.aw-warnzahl.aw-gelb { color: #f1c27d; }
.aw-warnzahl.aw-rot { color: #ff6b81; }
.aw-bilanz { display: flex; gap: 6px; margin-top: 2px; font: 600 10px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.aw-bilanz .ab { color: #7ec48b; } .aw-bilanz .sp { color: #e0a34a; } .aw-bilanz .un { color: #e0475f; }

.aw-zelle { display: grid; place-items: center; }
.aw-zelle.heute { background: rgba(var(--zweit-rgb), .05); }
.aw-zelle form { margin: 0; }
.aw-feld {
  --c: rgba(var(--gold-rgb), .5);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; color: rgba(var(--hell-rgb), .35);
  background: rgba(255, 255, 255, .02); border: 1px dashed rgba(var(--gold-rgb), .2);
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
button.aw-feld:hover { transform: translateY(-2px) scale(1.06); border-color: rgba(var(--zweit-rgb), .7); color: #fff; background: rgba(var(--gold-rgb), .14); }
.aw-feld.gesetzt {
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); color: #0b0614; background: var(--c);
  box-shadow: 0 0 16px -4px var(--c);
}
.aw-feld.gesetzt .aw-zeichen { animation: awPop .35s cubic-bezier(.2, .8, .3, 1.4) both; }
@keyframes awPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.aw-feld.mit-grund { box-shadow: 0 0 16px -4px var(--c), inset 0 0 0 2px rgba(255, 255, 255, .55); }
.aw-feld.fest { cursor: default; }
.aw-feld.fest:not(.gesetzt) { border-style: solid; border-color: rgba(255, 255, 255, .04); background: transparent; }
.aw-feld.vergangen.gesetzt { filter: saturate(.75); }
.aw-schloss { color: rgba(var(--hell-rgb), .15); }
.aw-plus { font-weight: 400; }
.aw-nichts { padding: 14px 16px; margin: 0; }

.aw-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: rgba(var(--hell-rgb), .6); }
.aw-legende > span { display: inline-flex; align-items: center; gap: 8px; }
.aw-legende .aw-feld { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; }
.aw-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.aw-punkt.gelb { background: #f1c27d; box-shadow: 0 0 10px #f1c27d; }
.aw-punkt.rot { background: #ff6b81; box-shadow: 0 0 10px #ff6b81; }

/* Woher die Namen kommen — nur für die Leitung */
.aw-quelle {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px;
  font-size: 12px; color: rgba(var(--hell-rgb), .55);
}
.aw-quelle > span:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.aw-quellpunkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #7ec48b; box-shadow: 0 0 10px #7ec48b;
}
.aw-quelle.gestoert { color: #f1c27d; }
.aw-quelle.gestoert .aw-quellpunkt { background: #e0475f; box-shadow: 0 0 10px #e0475f; }
.aw-quelle a {
  padding: 4px 10px; border-radius: 999px; text-decoration: none; color: inherit;
  border: 1px solid rgba(var(--hell-rgb), .2); transition: border-color .2s, color .2s;
}
.aw-quelle a:hover { border-color: rgba(var(--blut-rgb), .7); color: rgba(var(--hell-rgb), .9); }

/* Das Fenster */
.aw-fenster {
  width: min(440px, 92vw); padding: 22px; border-radius: 20px; color: inherit;
  border: 1px solid rgba(var(--gold-rgb), .35);
  background:
    radial-gradient(300px 160px at 0% 0%, rgba(var(--gold-rgb), .2), transparent 70%),
    linear-gradient(180deg, rgba(var(--flaeche-rgb), .99), rgba(var(--kopf-rgb), .99));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 40px -16px rgba(var(--gold-rgb), .9);
}
.aw-fenster { margin: auto; }
.aw-fenster [hidden] { display: none !important; }
.aw-fenster[open] { animation: kastenAuf .3s cubic-bezier(.2, .8, .3, 1) both; }
.aw-fenster::backdrop { background: rgba(4, 3, 8, .7); backdrop-filter: blur(5px); }
.aw-fensterwer { margin: 6px 0 0; font-weight: 700; color: #fff; }
.aw-freiwillig { font-size: 10px; color: rgba(var(--hell-rgb), .4); text-transform: none; letter-spacing: 0; }
.aw-fensterhinweis { margin: 6px 0 0; font-size: 11.5px; color: rgba(var(--hell-rgb), .45); }
.aw-wahl { display: grid; gap: 8px; margin-top: 16px; }
.aw-wahlknopf {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; color: #fff; text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 18%, transparent), transparent);
  transition: transform .15s, box-shadow .15s;
}
.aw-wahlknopf[hidden] { display: none; }
.aw-wahlknopf:hover { transform: translateX(4px); box-shadow: 0 0 22px -8px var(--c); }
.aw-wahlzeichen { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #0b0614; background: var(--c); }
.aw-fensterfuss { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.aw-raeumen { color: #ff9aae !important; border-color: rgba(224, 71, 95, .5) !important; }

@media (max-width: 760px) {
  .aw-held { grid-template-columns: 1fr; text-align: center; }
  .aw-heldzahlen { justify-content: center; }
  .aw-ich, .aw-statistik { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .aw-ring, .aw-ring::before, .aw-person, .aw-zelle, .aw-statkarte, .aw-statbalken span { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Orte (lostplace.php) — Lagebild mit Radar, Bildkarten, Galerie
   ═══════════════════════════════════════════════════════════════════ */
.ort2-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, 340px);
  align-items: center; gap: 26px; padding: 26px 28px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(126, 196, 139, .14), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(var(--gold-rgb), .1), transparent 60%),
    rgba(var(--flaeche-rgb), .72);
}
.ort2-held::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(var(--gold-rgb), .06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--gold-rgb), .06) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.ort2-heldtext { position: relative; z-index: 1; }
.ort2-held .ort2-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; letter-spacing: .01em; }
.ort2-zahlen { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.ort2-zahlen span {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  color: rgba(var(--hell-rgb), .8); border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .25);
  animation: ort2Rein .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
.ort2-zahlen span[style] { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.ort2-zahlen strong { color: #fff; font-size: 15px; }
.ort2-zahlen span:nth-child(2) { animation-delay: .06s; } .ort2-zahlen span:nth-child(3) { animation-delay: .12s; }
.ort2-zahlen span:nth-child(4) { animation-delay: .18s; } .ort2-zahlen span:nth-child(5) { animation-delay: .24s; }
.ort2-neuknopf .plus { display: inline-block; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.ort2-neuknopf.offen .plus { transform: rotate(45deg); }

/* Das Lagebild */
.ort2-radar {
  position: relative; z-index: 1; aspect-ratio: 1; width: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(126, 196, 139, .1), rgba(0, 0, 0, .55) 72%);
  border: 1px solid rgba(126, 196, 139, .35);
  box-shadow: 0 0 0 6px rgba(126, 196, 139, .05), 0 0 50px rgba(126, 196, 139, .14), inset 0 0 40px rgba(0, 0, 0, .6);
  animation: ort2Auf .8s cubic-bezier(.2, .8, .2, 1) backwards;
}
.ort2-radar::before, .ort2-radar::after { content: ''; position: absolute; background: rgba(126, 196, 139, .18); }
.ort2-radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ort2-radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.ort2-radarring { position: absolute; border-radius: 50%; border: 1px dashed rgba(126, 196, 139, .25); }
.ort2-radarring.r1 { inset: 12%; } .ort2-radarring.r2 { inset: 27%; } .ort2-radarring.r3 { inset: 41%; }
.ort2-radarstrahl {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(126, 196, 139, .45), rgba(126, 196, 139, .08) 50deg, transparent 90deg);
  animation: ort2Kreisen 5.5s linear infinite;
}
.ort2-radarmitte {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #7ec48b; box-shadow: 0 0 0 4px rgba(126, 196, 139, .2), 0 0 16px #7ec48b;
}
.ort2-pin {
  position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 10px var(--c); transition: transform .2s, opacity .3s;
  animation: ort2Pin 2.8s ease-out var(--v, 0s) infinite;
}
.ort2-pin::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--c);
  animation: ort2Welle 2.8s ease-out var(--v, 0s) infinite;
}
.ort2-pin:hover { transform: scale(1.7); z-index: 3; }
.ort2-pin.blass { opacity: .12; animation: none; }
.ort2-pin.blass::after { display: none; }

/* Neuer Ort und Bearbeiten */
.ort2-formular { margin-top: 14px; animation: ort2Auf .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.ort2-formular.hidden { display: none; }
.ort2-felder { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.ort2-katwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.ort2-katpunkt { position: relative; cursor: pointer; }
.ort2-katpunkt input { position: absolute; opacity: 0; pointer-events: none; }
.ort2-katpunkt span {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 12px; font-size: 13px; white-space: nowrap;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--hell-rgb), .75);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.ort2-katpunkt:hover span { transform: translateY(-1px); }
.ort2-katpunkt input:checked + span {
  color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}
.ort2-katpunkt input:focus-visible + span { outline: 2px solid var(--zweit); outline-offset: 2px; }
.ort2-ablage { min-height: 120px; }
.ort2-vorschauen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.ort2-vorschauen:empty { display: none; }
.ort2-vorschauen img {
  width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(var(--gold-rgb), .35);
  animation: ort2Rein .35s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* Suchen und filtern */
.ort2-werkzeuge {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.ort2-suche {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8);
  transition: border-color .2s, box-shadow .2s;
}
.ort2-suche:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14); }
.ort2-suche input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }
.ort2-kats { display: flex; flex-wrap: wrap; gap: 6px; }
.ort2-katknopf {
  --c: var(--zweit);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; color: rgba(var(--hell-rgb), .75);
  border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .2);
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.ort2-katknopf span { padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .08); }
.ort2-katknopf:hover { transform: translateY(-1px); color: #fff; }
.ort2-katknopf.an { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
.ort2-treffer { font-size: 12px; color: rgba(var(--hell-rgb), .55); padding-right: 6px; }

/* Die Bildkarten */
.ort2-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.ort2-karte {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; text-decoration: none; color: inherit;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--flaeche-rgb), .75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
  animation: ort2Rein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.ort2-karte.rein { animation: ort2Rein .4s cubic-bezier(.2, .8, .2, 1) backwards; }
.ort2-karte[hidden] { display: none; }
.ort2-karte::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--c) 22%, transparent), transparent 70%);
  transition: opacity .3s;
}
.ort2-karte:hover {
  transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 65%, transparent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.ort2-karte:hover::before { opacity: 1; }
.ort2-kartenbild {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 28%, transparent), rgba(0, 0, 0, .55));
}
.ort2-kartenbild::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7));
}
.ort2-kartenbild img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .4s; filter: saturate(.85); }
.ort2-karte:hover .ort2-kartenbild img { transform: scale(1.08); filter: saturate(1.05); }
.ort2-kartenicon { font-size: 54px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); transition: transform .4s; }
.ort2-karte:hover .ort2-kartenicon { transform: scale(1.12) rotate(-4deg); }
.ort2-kartenkat, .ort2-kartenzahl {
  position: absolute; z-index: 1; top: 10px; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: #fff;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.ort2-kartenkat { left: 10px; }
.ort2-kartenzahl { right: 10px; border-color: rgba(255, 255, 255, .2); }
.ort2-karteninfo { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; }
.ort2-kartenplz { font-family: var(--mono, monospace); font-size: 12px; color: var(--c); letter-spacing: .04em; }
.ort2-kartenname { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.25; }
.ort2-kartentext { font-size: 13px; color: rgba(var(--hell-rgb), .6); line-height: 1.45; }
.ort2-kartenpfeil {
  position: absolute; right: 14px; bottom: 14px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: #fff; background: color-mix(in srgb, var(--c) 35%, transparent); opacity: 0; transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.ort2-karte:hover .ort2-kartenpfeil { opacity: 1; transform: none; }

/* Ein einzelner Ort */
.ort2-zurueck {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 12px; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 13px; color: rgba(var(--hell-rgb), .75); border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .2);
  transition: color .2s, border-color .2s, transform .2s;
}
.ort2-zurueck:hover { color: #fff; border-color: var(--zweit); transform: translateX(-3px); }
.ort2-titel {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 300px; border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.ort2-titelbild {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 12px, transparent 12px 24px),
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c) 30%, transparent), rgba(0, 0, 0, .7));
}
.ort2-titelbild img { width: 100%; height: 100%; object-fit: cover; animation: ort2Zoom 18s ease-in-out infinite alternate; }
.ort2-titelbild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .85) 100%);
}
.ort2-titelicon { font-size: 110px; opacity: .55; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); animation: ort2Schweben 6s ease-in-out infinite; }
.ort2-titeltext { position: relative; z-index: 1; flex: 1; padding: 26px 28px; }
.ort2-titel .ort2-titeltext h1 { margin: 10px 0 6px; font-size: clamp(28px, 4.5vw, 48px); line-height: 1.05; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.ort2-marken { display: flex; flex-wrap: wrap; gap: 8px; }
.ort2-marken span {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; color: #fff; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18); animation: ort2Rein .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
.ort2-marken .ort2-kat { border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, rgba(0, 0, 0, .5)); }
.ort2-marken .ort2-plz { font-family: var(--mono, monospace); }
.ort2-marken span:nth-child(2) { animation-delay: .08s; } .ort2-marken span:nth-child(3) { animation-delay: .16s; }
.ort2-stand { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.ort2-taten { position: absolute; z-index: 1; top: 16px; right: 16px; display: flex; gap: 8px; }
.ort2-taten form { margin: 0; }
.ort2-tat {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .22); transition: background .2s, border-color .2s, transform .2s;
}
.ort2-tat:hover { transform: translateY(-2px); border-color: var(--zweit); background: rgba(var(--zweit-rgb), .25); }
.ort2-tat.gefahr:hover { border-color: #e0475f; background: rgba(224, 71, 95, .35); }
.ort2-einzel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 16px; margin-top: 16px; align-items: start; }
.ort2-text { margin: 0; line-height: 1.65; color: rgba(var(--hell-rgb), .85); overflow-wrap: anywhere; }
.ort2-leer { color: rgba(var(--hell-rgb), .45); font-style: italic; }
.ort2-galeriekopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ort2-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ort2-bild {
  position: relative; margin: 0; overflow: hidden; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .2);
  animation: ort2Rein .45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.ort2-bild.vorschau { border-color: rgba(var(--gold-rgb), .6); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .2); }
.ort2-bildknopf { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1; }
.ort2-bildknopf img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ort2-bild:hover .ort2-bildknopf img { transform: scale(1.07); }
.ort2-bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 18px 8px 8px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); pointer-events: none;
}
.ort2-bild figcaption > * { pointer-events: auto; }
.ort2-bild figcaption form { margin: 0; }
.ort2-bildmarke {
  padding: 3px 9px; border-radius: 999px; font: inherit; font-size: 11.5px; color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s, background .2s;
}
.ort2-bildmarke.an { cursor: default; opacity: 1; color: var(--gold-hell); border-color: rgba(var(--gold-rgb), .55); }
.ort2-bild:hover .ort2-bildmarke, .ort2-bildmarke:focus-visible { opacity: 1; }
.ort2-bildmarke:not(.an):hover { background: rgba(var(--gold-rgb), .3); }
.ort2-bildweg {
  display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; cursor: pointer;
  font-size: 12px; color: #fff; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .2s, background .2s;
}
.ort2-bild:hover .ort2-bildweg, .ort2-bildweg:focus-visible { opacity: 1; }
.ort2-bildweg:hover { background: rgba(224, 71, 95, .7); }
.ort2-hochladen { margin-top: 14px; }
@media (hover: none) { .ort2-bildmarke, .ort2-bildweg { opacity: 1; } }

/* Vollbild */
.ort2-vollbild {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 40px 70px;
  background: rgba(4, 4, 8, .92); backdrop-filter: blur(8px); animation: ort2Blende .25s ease both;
}
.ort2-vollbild[hidden] { display: none; }
.ort2-vollbild img {
  max-width: 100%; max-height: calc(100vh - 80px); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  opacity: 0; transform: scale(.96); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ort2-vollbild img.da { opacity: 1; transform: none; }
.ort2-vbknopf {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 28px; line-height: 1; color: #fff; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08);
  transition: background .2s, transform .2s;
}
.ort2-vbknopf:hover { background: rgba(var(--zweit-rgb), .35); transform: scale(1.08); }
.ort2-vbknopf.zu { top: 18px; right: 18px; font-size: 18px; }
.ort2-vbknopf.zurueck { left: 14px; top: 50%; margin-top: -24px; }
.ort2-vbknopf.vor { right: 14px; top: 50%; margin-top: -24px; }
.ort2-vbzahl { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255, 255, 255, .7); }

@keyframes ort2Rein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ort2Auf { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ort2Blende { from { opacity: 0; } to { opacity: 1; } }
@keyframes ort2Kreisen { to { transform: rotate(360deg); } }
@keyframes ort2Pin { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ort2Welle { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ort2Zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes ort2Schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 860px) {
  .ort2-held { grid-template-columns: 1fr; }
  .ort2-radar { max-width: 260px; margin: 0 auto; }
  .ort2-einzel { grid-template-columns: 1fr; }
  .ort2-felder { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ort2-held { padding: 20px 16px; }
  .ort2-titel { min-height: 240px; }
  .ort2-titeltext { padding: 18px 16px; }
  .ort2-taten { top: 12px; right: 12px; }
  .ort2-vollbild { padding: 60px 12px; }
  .ort2-vbknopf.zurueck, .ort2-vbknopf.vor { top: auto; bottom: 12px; margin-top: 0; }
  .ort2-gitter { grid-template-columns: 1fr; }
  .ort2-werkzeuge, .aw-werkzeuge { position: static; }
  .aw-woche { flex: 1 1 100%; min-width: 0; justify-content: space-between; }
  .aw-wochenname { min-width: 0; padding: 0 4px; font-size: 13px; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ort2-radarstrahl, .ort2-pin, .ort2-pin::after, .ort2-titelbild img, .ort2-titelicon,
  .ort2-karte, .ort2-bild, .ort2-zahlen span, .ort2-marken span, .ort2-radar { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Routen (routen.php) — Lagezentrale, Routennetz, Karten mit Weg
   ═══════════════════════════════════════════════════════════════════ */
.rt-held {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 400px); align-items: center; gap: 10px 28px;
  margin-top: 22px; padding: 26px 28px 22px;
  background:
    radial-gradient(110% 140% at 100% 0%, rgba(226, 60, 200, .14), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(126, 196, 139, .12), transparent 60%),
    rgba(var(--flaeche-rgb), .74);
}
.rt-held::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: radial-gradient(rgba(var(--gold-rgb), .18) 1px, transparent 1.4px);
  background-size: 22px 22px; animation: rtRaster 40s linear infinite;
  mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
}
.rt-heldtext { position: relative; z-index: 1; }
.rt-held .rt-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.rt-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.rt-kennzahl {
  position: relative; overflow: hidden; padding: 12px 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .25));
  animation: rtRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.rt-kennzahl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--c), transparent); transform-origin: left;
  animation: rtWachsen 1s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 200ms) backwards;
}
.rt-kennzahl strong { display: block; font-size: 26px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.rt-kennzahl strong span { margin: 0 3px; color: rgba(var(--hell-rgb), .35); font-weight: 400; }
.rt-kennzahl small { font-size: 11.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--c) 70%, #fff); }
.rt-anlegen .plus { display: inline-block; transition: transform .3s; }
.rt-anlegen:hover .plus { transform: rotate(90deg); }

/* Das Routennetz */
.rt-netz { position: relative; z-index: 1; animation: rtAuf .8s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.rt-netz svg { display: block; width: 100%; height: auto; overflow: visible; }
.rt-pfad {
  fill: none; stroke: url(#rtWeg); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 7 9; animation: rtFliessen 1.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(226, 60, 200, .35));
}
.rt-pfad.rt-rueck { stroke-width: 1.4; opacity: .35; animation-duration: 2.6s; animation-direction: reverse; }
.rt-teilchen { fill: #fff; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px #e23cc8); }
.rt-kern { fill: rgba(10, 6, 18, .9); stroke: var(--c); stroke-width: 2; filter: drop-shadow(0 0 10px var(--c)); }
.rt-welle {
  fill: none; stroke: var(--c); stroke-width: 1.5; transform-box: fill-box; transform-origin: center;
  animation: rtWelle 2.6s ease-out var(--v, 0s) infinite;
}
.rt-knotenzeichen { font-size: 20px; text-anchor: middle; }
.rt-knotenname {
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-anchor: middle;
  fill: rgba(255, 255, 255, .78); text-transform: uppercase;
}

/* Verteilung der Zustände */
.rt-verteilung { grid-column: 1 / -1; position: relative; z-index: 1; }
.rt-band { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .3); }
.rt-bandteil {
  min-width: 6px; background: var(--c); box-shadow: 0 0 12px var(--c); cursor: pointer; transform-origin: left;
  animation: rtWachsen .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: opacity .25s, filter .25s;
}
.rt-bandteil:hover { filter: brightness(1.25); }
.rt-bandteil.blass { opacity: .2; }

/* Werkzeuge */
.rt-werkzeuge {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.rt-suchform { flex: 1 1 280px; display: flex; gap: 6px; margin: 0; }
.rt-suche {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8);
  transition: border-color .2s, box-shadow .2s;
}
.rt-suche:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14); }
.rt-suche input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }
.rt-tief, .rt-wahl {
  padding: 8px 12px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; color: rgba(var(--hell-rgb), .85);
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); transition: border-color .2s, color .2s;
}
.rt-tief:hover, .rt-wahl:hover { border-color: var(--zweit); color: #fff; }
.rt-wahl option { background: #140c1f; }
.rt-schalter { display: inline-flex; gap: 3px; padding: 3px; border-radius: 13px; border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .25); }
.rt-schalter button {
  padding: 6px 11px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px;
  color: rgba(var(--hell-rgb), .65); background: transparent; transition: color .2s, background .2s;
}
.rt-schalter button:hover { color: #fff; }
.rt-schalter button.an { color: #fff; background: linear-gradient(135deg, rgba(var(--gold-rgb), .35), rgba(var(--zweit-rgb), .25)); box-shadow: 0 0 14px rgba(var(--gold-rgb), .2); }
.rt-stati { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rt-status {
  --c: var(--zweit);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .04em; color: rgba(var(--hell-rgb), .75);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: rgba(0, 0, 0, .2);
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.rt-status span { padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .08); }
.rt-status:hover { transform: translateY(-1px); color: #fff; }
.rt-status.an { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
.rt-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.rt-treffer {
  display: inline-block; min-width: 26px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; text-align: center;
  font: 600 12px/1.4 ui-monospace, Consolas, monospace; color: #fff; background: rgba(var(--gold-rgb), .2);
}
.rt-zurueck { font-size: 13px; color: var(--zweit); text-decoration: none; }
.rt-zurueck:hover { text-decoration: underline; }

/* Die Karten */
.rt-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 12px; }
.rt-karte {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
  text-decoration: none; color: inherit; border: 1px solid rgba(var(--gold-rgb), .16);
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb), .94), rgba(var(--kopf-rgb), .97));
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
  animation: rtRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.rt-karte.rein { animation: rtRein .45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.rt-karte[hidden] { display: none; }
.rt-karte::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--c) 20%, transparent), transparent 70%);
  transition: opacity .3s;
}
.rt-karte::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4;
  background: linear-gradient(90deg, var(--c), var(--r), transparent 90%);
}
.rt-karte:hover {
  transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}
.rt-karte:hover::before { opacity: 1; }
.rt-bild {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 28%, transparent), rgba(0, 0, 0, .6));
}
.rt-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 40%, rgba(0, 0, 0, .65)); }
.rt-bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.rt-karte:hover .rt-bild img { transform: scale(1.08); filter: saturate(1.05); }
.rt-bildzeichen { font-size: 52px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .6)); animation: rtSchweben 5s ease-in-out infinite; }
.rt-oben { position: absolute; z-index: 1; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; gap: 6px; }
.rt-zustand, .rt-risiko, .rt-kat {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: .06em; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
}
.rt-zustand { border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.rt-licht { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: rtBlinken 1.8s ease-in-out infinite; }
.rt-risiko { border: 1px solid color-mix(in srgb, var(--r) 55%, transparent); }
.rt-risiko i { width: 4px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.rt-risiko i.an { background: var(--r); box-shadow: 0 0 6px var(--r); }
.rt-kat { position: absolute; z-index: 1; left: 10px; bottom: 10px; border: 1px solid rgba(255, 255, 255, .18); }
.rt-inhalt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px; flex: 1; }
.rt-code { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; letter-spacing: .06em; color: var(--c); }
.rt-titel { font-size: 18px; font-weight: 700; line-height: 1.25; color: #fff; }
.rt-satz {
  font-size: 13px; line-height: 1.45; color: rgba(var(--hell-rgb), .6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rt-weg {
  display: flex; align-items: flex-start; gap: 0; margin-top: 4px; padding: 10px 10px 8px; border-radius: 14px;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(var(--gold-rgb), .1);
}
.rt-station { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rt-stationpunkt {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px;
  background: rgba(var(--gold-rgb), .12); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 30%, transparent); transition: transform .3s;
}
.rt-karte:hover .rt-stationpunkt { transform: scale(1.12); }
.rt-karte:hover .rt-station:nth-of-type(2) .rt-stationpunkt { transition-delay: .08s; }
.rt-karte:hover .rt-station:nth-of-type(3) .rt-stationpunkt { transition-delay: .16s; }
.rt-stationort {
  max-width: 100%; font-size: 11px; line-height: 1.3; color: rgba(var(--hell-rgb), .75); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rt-station.leer .rt-stationpunkt { opacity: .35; box-shadow: none; border-style: dashed; }
.rt-station.leer .rt-stationort { color: rgba(var(--hell-rgb), .3); }
.rt-wegstrich {
  flex: 0 0 18%; height: 2px; margin-top: 13px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 11px);
  background-size: 22px 2px; opacity: .6; animation: rtStrich 1s linear infinite;
}
.rt-marken { display: flex; flex-wrap: wrap; gap: 5px; }
.rt-marke {
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: rgba(var(--hell-rgb), .8);
  border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(255, 255, 255, .04);
}
.rt-fuss {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(var(--gold-rgb), .1); font-size: 11.5px; color: rgba(var(--hell-rgb), .45);
}
.rt-wer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-pfeil { margin-left: auto; color: var(--c); transition: transform .3s; }
.rt-karte:hover .rt-pfeil { transform: translateX(5px); }

/* Liste */
.rt-gitter.liste { grid-template-columns: 1fr; gap: 8px; }
.rt-gitter.liste .rt-karte { flex-direction: row; border-radius: 14px; }
.rt-gitter.liste .rt-karte::after { right: auto; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--c), var(--r)); }
.rt-gitter.liste .rt-bild { flex: 0 0 150px; aspect-ratio: auto; }
.rt-gitter.liste .rt-bildzeichen { font-size: 30px; }
.rt-gitter.liste .rt-risiko, .rt-gitter.liste .rt-kat { display: none; }
.rt-gitter.liste .rt-inhalt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr); grid-template-areas: 'code weg' 'titel weg' 'marken fuss'; gap: 4px 18px; padding: 10px 16px; }
.rt-gitter.liste .rt-code { grid-area: code; }
.rt-gitter.liste .rt-titel { grid-area: titel; font-size: 15px; }
.rt-gitter.liste .rt-satz { display: none; }
.rt-gitter.liste .rt-weg { grid-area: weg; margin: 0; padding: 6px 8px; }
.rt-gitter.liste .rt-marken { grid-area: marken; }
.rt-gitter.liste .rt-fuss { grid-area: fuss; border: 0; padding: 0; }
.rt-gitter.liste .rt-karte:hover { transform: translateX(4px); }

@keyframes rtRein { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rtAuf { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes rtWachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rtFliessen { to { stroke-dashoffset: -32; } }
@keyframes rtStrich { to { background-position: 22px 0; } }
@keyframes rtWelle { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes rtBlinken { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rtSchweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rtRaster { to { background-position: 220px 110px; } }

@media (max-width: 900px) {
  .rt-held { grid-template-columns: 1fr; }
  .rt-netz { max-width: 420px; width: 100%; margin: 0 auto; }
  .rt-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-gitter.liste .rt-inhalt { grid-template-columns: 1fr; grid-template-areas: 'code' 'titel' 'weg' 'marken' 'fuss'; }
}
@media (max-width: 560px) {
  .rt-held { padding: 20px 16px; }
  .rt-werkzeuge { position: static; }
  .rt-suchform { flex-basis: 100%; }
  .rt-gitter { grid-template-columns: 1fr; }
  .rt-gitter.liste .rt-bild { flex-basis: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-held::before, .rt-pfad, .rt-welle, .rt-licht, .rt-bildzeichen, .rt-wegstrich, .rt-kennzahl, .rt-kennzahl::after,
  .rt-bandteil, .rt-karte, .rt-netz { animation: none !important; }
  .rt-teilchen { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Termine (termine.php) — Uhr, Countdowns, Wochenbalken, Zeitleiste
   ═══════════════════════════════════════════════════════════════════ */
.tm-held {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 24px; align-items: end;
  margin-top: 22px; padding: 26px 28px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(var(--gold-rgb), .16), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(var(--zweit-rgb), .12), transparent 60%),
    rgba(var(--flaeche-rgb), .74);
}
.tm-held::before {
  content: ''; position: absolute; width: 420px; height: 420px; right: -140px; top: -220px; border-radius: 50%;
  border: 1px dashed rgba(var(--gold-rgb), .2); pointer-events: none; animation: tmKreisen 60s linear infinite;
}
.tm-held::after {
  content: ''; position: absolute; width: 300px; height: 300px; right: -80px; top: -160px; border-radius: 50%;
  border: 1px solid rgba(var(--zweit-rgb), .14); pointer-events: none; animation: tmKreisen 40s linear infinite reverse;
}
.tm-heldtext { position: relative; z-index: 1; }
.tm-held .tm-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.tm-uhrblock { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 18px 0 14px; }
.tm-uhr {
  display: flex; align-items: baseline; padding: 8px 16px; border-radius: 16px;
  font: 700 38px/1 ui-monospace, Consolas, monospace; letter-spacing: .02em; color: #fff;
  font-variant-numeric: tabular-nums; border: 1px solid rgba(var(--gold-rgb), .3);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), .14), rgba(0, 0, 0, .35));
  text-shadow: 0 0 22px rgba(var(--gold-rgb), .45);
}
.tm-uhr span { font-size: 20px; color: rgba(var(--gold-rgb), .85); animation: tmTakt 1s steps(2) infinite; }
.tm-countdown {
  --c: var(--gold);
  flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 9px 16px; border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(0, 0, 0, .25));
  transition: transform .25s, box-shadow .25s;
}
a.tm-countdown:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
.tm-countdown.ruhig { --c: #7ec48b; }
.tm-countdownlabel { font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.tm-countdown strong { font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-rest { font: 600 13px/1.3 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .7); font-variant-numeric: tabular-nums; }
.tm-countdown.bald { animation: tmPochen 1.6s ease-in-out infinite; }
.tm-countdown.jetzt { --c: #7ec48b; }
.tm-zahlen { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-zahl {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 13px;
  color: rgba(var(--hell-rgb), .75); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 10%, rgba(0, 0, 0, .25));
  animation: tmRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.tm-zahl i { font-style: normal; color: var(--c); }
.tm-zahl strong { color: #fff; font-size: 15px; }

/* Die Woche als Balken */
.tm-woche {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
  height: 190px; padding: 14px 12px 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(0, 0, 0, .25);
}
.tm-wochentag {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-decoration: none; color: inherit;
  border-radius: 12px; padding: 2px 0; transition: background .2s;
}
.tm-wochentag:hover { background: rgba(var(--gold-rgb), .08); }
.tm-balkenzahl { font: 700 12px/1 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .7); }
.tm-balken { position: relative; flex: 1; width: 62%; max-width: 30px; display: flex; align-items: flex-end; border-radius: 8px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.tm-balken span {
  display: block; width: 100%; height: var(--h); border-radius: 8px;
  background: linear-gradient(180deg, var(--zweit), var(--gold)); box-shadow: 0 0 14px rgba(var(--gold-rgb), .35);
  transform-origin: bottom; animation: tmHoch .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.tm-wochentag:hover .tm-balken span { filter: brightness(1.25); }
.tm-balkentag { font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--hell-rgb), .8); }
.tm-balkendatum { font: 10.5px/1 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .4); }
.tm-wochentag.heute .tm-balkentag { color: var(--gold); }
.tm-wochentag.heute .tm-balken { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .5); }
.tm-wochentag.heute .tm-balken span { background: linear-gradient(180deg, #fff, var(--gold)); animation: tmHoch .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards, tmGluehen 2.4s ease-in-out 1s infinite; }

/* Als Nächstes */
.tm-naechste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.tm-baldkarte {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px;
  border-radius: 18px; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, rgba(var(--flaeche-rgb), .9)), rgba(var(--kopf-rgb), .95));
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
  animation: tmRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.tm-baldkarte::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(220px circle at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--c) 22%, transparent), transparent 70%);
}
.tm-baldkarte:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .95); }
.tm-baldkarte:hover::before { opacity: 1; }
.tm-baldkopf { display: flex; justify-content: space-between; gap: 8px; }
.tm-baldwann { font: 600 10.5px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.tm-baldrest { font: 700 11px/1.4 ui-monospace, Consolas, monospace; color: var(--c); font-variant-numeric: tabular-nums; }
.tm-balduhr { font: 700 30px/1.1 ui-monospace, Consolas, monospace; color: #fff; font-variant-numeric: tabular-nums; }
.tm-balduhr small { font-size: 15px; color: rgba(var(--hell-rgb), .5); }
.tm-baldtitel { font-size: 15px; font-weight: 700; color: rgba(var(--hell-rgb), .95); }
.tm-baldmeta { font-size: 12px; color: rgba(var(--hell-rgb), .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-baldleiste { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .05); }
.tm-baldleiste span { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, transparent, var(--c)); box-shadow: 0 0 10px var(--c); transition: width 1s linear; }
.tm-baldkarte.bald { animation: tmRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards, tmPochen 1.6s ease-in-out 1s infinite; }
.tm-baldkarte.jetzt { --c: #7ec48b; }
.tm-baldkarte.jetzt .tm-baldrest::before { content: '● '; animation: tmTakt 1s steps(2) infinite; }

/* Werkzeuge */
.tm-werkzeuge {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 18px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.tm-suche {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8);
  transition: border-color .2s, box-shadow .2s;
}
.tm-suche:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14); }
.tm-suche input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }
.tm-werkzeuge .term-ansicht { margin-top: 0; }
.tm-werkzeuge .term-leistenknoepfe { display: inline-flex; gap: 6px; margin-left: auto; }
.tm-werkzeuge .term-treffer { flex-basis: 100%; padding-left: 6px; }
.tm-neuknopf .plus { display: inline-block; transition: transform .3s; }
.tm-neuknopf.offen .plus { transform: rotate(45deg); }
.tm-formular {
  margin-top: 12px; padding: 20px; border-color: rgba(var(--gold-rgb), .35);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .1) inset, 0 20px 40px -20px rgba(0, 0, 0, .9);
  animation: tmAuf .4s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* Die Tageskarten */
.tm-tage { margin-top: 14px; }
.tm-tag {
  position: relative; overflow: hidden; border-radius: 18px;
  animation: tmRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s, opacity .2s;
}
.tm-tag::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .5), transparent);
}
.tm-tag:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .9); }
.tm-tag.ist-heute::before { height: 4px; background: linear-gradient(90deg, var(--gold), var(--zweit), var(--gold)); background-size: 200% 100%; animation: tmLauf 3s linear infinite; }
.tm-tag.tm-blitz { animation: tmBlitz 1.2s ease-out; }
.tm-tag .term-eintrag { animation: tmRein .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.tm-tag .term-eintrag:nth-of-type(2) { animation-delay: .06s; }
.tm-tag .term-eintrag:nth-of-type(3) { animation-delay: .12s; }
.tm-tag .term-eintrag:nth-of-type(4) { animation-delay: .18s; }
.tm-tag .term-eintrag:nth-of-type(n+5) { animation-delay: .24s; }
.tm-tag .term-eintrag.vorbei { opacity: .45; filter: saturate(.5); }
.tm-tag .term-eintrag.vorbei:hover { opacity: .85; }
.tm-tag .term-eintrag.laeuft {
  border-color: rgba(126, 196, 139, .6); background: rgba(126, 196, 139, .1);
  box-shadow: 0 0 18px -6px rgba(126, 196, 139, .7);
}
.tm-tag .term-eintrag.laeuft .term-punkt { background: #7ec48b; box-shadow: 0 0 10px #7ec48b; animation: tmTakt 1s steps(2) infinite; }
.tm-jetztlinie { position: relative; display: flex; align-items: center; height: 14px; margin: 2px 0; }
.tm-jetztlinie::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #e0475f, rgba(224, 71, 95, .1)); box-shadow: 0 0 10px rgba(224, 71, 95, .6);
}
.tm-jetztlinie::after {
  content: ''; position: absolute; left: -2px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: #e0475f; box-shadow: 0 0 0 3px rgba(224, 71, 95, .25); animation: tmPuls 1.8s ease-out infinite;
}
.tm-jetztlinie span {
  position: relative; margin-left: auto; padding: 1px 7px; border-radius: 999px;
  font: 700 9.5px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase;
  color: #ffb3c0; background: rgba(var(--kopf-rgb), .95); border: 1px solid rgba(224, 71, 95, .5);
}

/* Das Raster */
.tm-raster { margin-top: 18px; padding: 0; overflow: hidden; animation: tmAuf .4s cubic-bezier(.2, .8, .2, 1) backwards; }
.tm-rasterhinweis { margin: 0; padding: 10px 16px; font-size: 12px; color: rgba(var(--hell-rgb), .5); border-bottom: 1px solid rgba(var(--gold-rgb), .12); }
.tm-jetztstrich {
  position: absolute; left: 0; right: 0; z-index: 2; height: 2px; pointer-events: none;
  background: #e0475f; box-shadow: 0 0 10px rgba(224, 71, 95, .8);
}
.tm-jetztstrich::before {
  content: ''; position: absolute; left: -4px; top: -3.5px; width: 9px; height: 9px; border-radius: 50%;
  background: #e0475f; animation: tmPuls 1.8s ease-out infinite;
}
.tm-raster .kal-termin { animation: tmRein .4s cubic-bezier(.2, .8, .2, 1) backwards; }

/* Die Liste als Zeitleiste */
.tm-liste { position: relative; margin-top: 6px; padding-left: 26px; }
.tm-liste::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(var(--zweit-rgb), .5), transparent);
}
.tm-liste .tm-listentag {
  position: relative; margin: 20px 0 8px; color: var(--gold-hell);
}
.tm-liste .tm-listentag::before {
  content: ''; position: absolute; left: -24px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .18), 0 0 12px var(--gold);
}
.tm-liste .termin {
  position: relative; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .14); border-left: 3px solid var(--c);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 7%, rgba(var(--flaeche-rgb), .9)), rgba(var(--kopf-rgb), .9));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
  animation: tmRein .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
.tm-liste .termin::before {
  content: ''; position: absolute; left: -22px; top: 22px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 8px var(--c);
}
.tm-liste .termin:hover { transform: translateX(4px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9); }
.tm-liste .termin:target { animation: tmBlitz 1.4s ease-out; }
.tm-liste .termin-uhr { background: color-mix(in srgb, var(--c) 12%, transparent); font-weight: 700; }
.tm-liste .termin-titel { font-size: 15px; font-weight: 600; }
.tm-liste .statusknopf { border-radius: 999px; padding: 5px 12px; transition: background .2s, transform .2s; }
.tm-liste .statusknopf:hover { transform: translateY(-1px); }

@keyframes tmRein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tmAuf { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tmHoch { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tmKreisen { to { transform: rotate(360deg); } }
@keyframes tmTakt { 50% { opacity: .25; } }
@keyframes tmPochen { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); } }
@keyframes tmGluehen { 50% { filter: brightness(1.35); } }
@keyframes tmLauf { to { background-position: 200% 0; } }
@keyframes tmPuls { 0% { box-shadow: 0 0 0 0 rgba(224, 71, 95, .6); } 100% { box-shadow: 0 0 0 10px rgba(224, 71, 95, 0); } }
@keyframes tmBlitz { 0% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .8); } 100% { box-shadow: 0 0 0 18px rgba(var(--gold-rgb), 0); } }

@media (max-width: 900px) {
  .tm-held { grid-template-columns: 1fr; }
  .tm-woche { height: 150px; }
}
@media (max-width: 560px) {
  .tm-held { padding: 20px 16px; }
  .tm-uhr { font-size: 30px; }
  .tm-werkzeuge { position: static; }
  .tm-werkzeuge .term-leistenknoepfe { flex: 1 1 100%; min-width: 0; margin-left: 0; flex-wrap: wrap; }
  .tm-werkzeuge .term-leistenknoepfe .btn { flex: 1 1 auto; justify-content: center; }
  .tm-woche { gap: 4px; padding: 10px 6px 8px; }
  .tm-balkendatum { display: none; }
  .tm-liste { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-held::before, .tm-held::after, .tm-uhr span, .tm-countdown, .tm-zahl, .tm-balken span, .tm-baldkarte, .tm-tag,
  .tm-tag::before, .tm-tag .term-eintrag, .tm-jetztlinie::after, .tm-jetztstrich::before, .tm-liste .termin,
  .tm-raster, .tm-formular { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Lager (lager.php) — Kopf mit Soll-Ring, Knapp-Karten, Reiterlicht,
   aufgefrischte Tafeln
   ═══════════════════════════════════════════════════════════════════ */
.lg-held {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) 190px; grid-template-areas: 'text ring' 'gruppen gruppen';
  gap: 18px 28px; align-items: center; margin-top: 22px; padding: 26px 28px 22px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(var(--gold-rgb), .16), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(126, 196, 139, .1), transparent 60%),
    rgba(var(--flaeche-rgb), .74);
}
.lg-held::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(90deg, rgba(var(--gold-rgb), .05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(var(--gold-rgb), .05) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(110deg, transparent 30%, #000 85%);
  -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000 85%);
  animation: lgRaster 30s linear infinite;
}
.lg-heldtext { grid-area: text; position: relative; z-index: 1; }
.lg-held .lg-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.lg-kennzahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.lg-kennzahl {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i z' 's s';
  align-items: center; gap: 2px 8px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .25));
  animation: lgRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.lg-kennzahl:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c) 60%, transparent); }
.lg-kennzahl i { grid-area: i; font-style: normal; font-size: 18px; }
.lg-kennzahl strong { grid-area: z; font-size: 22px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-kennzahl small { grid-area: s; font-size: 11.5px; color: color-mix(in srgb, var(--c) 70%, #fff); }
.lg-kennzahl.warnung i { animation: lgWackeln 2.4s ease-in-out 1s infinite; }

/* Der Soll-Ring */
.lg-ring { grid-area: ring; position: relative; z-index: 1; width: 190px; height: 190px; animation: lgAuf .8s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.lg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.lg-ringgrund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 10; }
.lg-ringwert {
  fill: none; stroke: url(#lgRingVerlauf); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .55));
  animation: lgRing 1.6s cubic-bezier(.2, .8, .2, 1) .2s backwards;
}
.lg-ring::after {
  content: ''; position: absolute; inset: 22px; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(var(--gold-rgb), .25); animation: lgKreisen 30s linear infinite;
}
.lg-ring.voll .lg-ringwert { animation: lgRing 1.6s cubic-bezier(.2, .8, .2, 1) .2s backwards, lgGluehen 2.4s ease-in-out 1.8s infinite; }
.lg-ringtext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lg-ringtext strong { font-size: 40px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(var(--gold-rgb), .5); }
.lg-ringtext strong small { font-size: 18px; color: var(--gold-hell); }
.lg-ringtext > span { margin-top: 4px; font: 600 10px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }

/* Warengruppen */
.lg-gruppenstand { grid-area: gruppen; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; }
.lg-gruppe { display: grid; grid-template-columns: minmax(80px, auto) 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.lg-gruppename { color: rgba(var(--hell-rgb), .8); white-space: nowrap; }
.lg-gruppebalken { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.lg-gruppebalken span {
  display: block; width: var(--p); height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e0475f, #e0b04a 50%, #7ec48b); background-size: 300% 100%;
  background-position: var(--p) 0; box-shadow: 0 0 10px rgba(var(--gold-rgb), .35);
  transform-origin: left; animation: lgWachsen 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.lg-gruppezahl { font: 600 11.5px/1 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .55); }

/* Unter Soll */
.lg-knapp { margin-top: 14px; padding: 0; overflow: hidden; border-color: rgba(224, 71, 95, .3); }
.lg-knapp summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; list-style: none;
  background: linear-gradient(90deg, rgba(224, 71, 95, .12), transparent 60%);
}
.lg-knapp summary::-webkit-details-marker { display: none; }
.lg-knappzahl { padding: 2px 9px; border-radius: 999px; font: 700 12px/1.4 ui-monospace, Consolas, monospace; color: #fff; background: rgba(224, 71, 95, .55); animation: lgPuls 2s ease-out infinite; }
.lg-knapphinweis { font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.lg-knapppfeil { margin-left: auto; color: rgba(var(--hell-rgb), .5); transition: transform .3s; }
.lg-knapp:not([open]) .lg-knapppfeil { transform: rotate(-90deg); }
.lg-knappgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 4px 18px 18px; }
.lg-knappkarte {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name gruppe' 'balken balken' 'werte werte';
  gap: 6px 8px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(224, 71, 95, .22); background: linear-gradient(160deg, rgba(224, 71, 95, .08), rgba(0, 0, 0, .25));
  animation: lgRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s;
}
.lg-knappkarte:hover { transform: translateY(-3px); border-color: rgba(224, 71, 95, .5); }
.lg-knappname { grid-area: name; font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-knappgruppe { grid-area: gruppe; font-size: 10.5px; letter-spacing: .06em; color: rgba(var(--hell-rgb), .4); }
.lg-knappbalken { grid-area: balken; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.lg-knappbalken span {
  display: block; width: var(--p); min-width: 3px; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e0475f, #e0b04a); box-shadow: 0 0 8px rgba(224, 71, 95, .5);
  transform-origin: left; animation: lgWachsen 1s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 150ms) backwards;
}
.lg-knappwerte { grid-area: werte; display: flex; align-items: baseline; gap: 4px; font: 12px/1.2 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .55); }
.lg-knappwerte strong { font-size: 15px; color: #ffb3bd; }
.lg-knappwerte em { margin-left: auto; font-style: normal; color: #ff8fa0; }

/* Die Reiter mit gleitendem Licht */
.lager-reiter { isolation: isolate; }
.lg-reiterlicht {
  position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0; border-radius: 13px; opacity: 0; pointer-events: none;
  background:
    linear-gradient(rgba(var(--kopf-rgb), .92), rgba(var(--kopf-rgb), .92)) padding-box,
    linear-gradient(95deg, var(--gold), var(--zweit)) border-box;
  border: 1px solid transparent; box-shadow: 0 0 24px rgba(var(--gold-rgb), .35);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), height .45s, opacity .3s;
}
.lg-reiterlicht.da { opacity: 1; }
.lager-reiter .lager-reiterknopf.an { background: transparent; box-shadow: none; }
.lager-reiter .lager-reiterknopf.an .lager-reiterzeichen { animation: lgHuepfen .5s cubic-bezier(.2, .8, .2, 1); }

/* Das Buch */
.lager-tafel .lager-rahmen {
  border-radius: 18px; border-color: rgba(var(--gold-rgb), .24);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--gold-rgb), .06) inset;
}
.lager-tafel .zelle { transition: background-color .35s ease, box-shadow .2s; }
.lager-tafel .zelle input { transition: background .2s, box-shadow .2s, transform .15s; }
.lager-tafel .zelle input:focus { outline: none; background: rgba(var(--gold-rgb), .16); box-shadow: 0 0 0 2px var(--gold) inset, 0 0 14px rgba(var(--gold-rgb), .4); }
.lager-tafel .z-gut { background-color: rgba(60, 180, 110, .24); }
.lager-tafel .z-knapp { background-color: rgba(224, 71, 95, .27); }
.lager-tafel .lager-zeile:hover td:not(.fest) { box-shadow: inset 0 0 0 999px rgba(var(--gold-rgb), .07); }
.lager-tafel .lager-zeile:hover .fest-1 { box-shadow: inset 3px 0 0 var(--gold); }
.lager-tafel .lager-zeile.hat-fehlmenge:hover .fest-1 { box-shadow: inset 3px 0 0 var(--blood-soft); }
.lager-tafel .lager-zeile:focus-within td:not(.fest) { box-shadow: inset 0 0 0 999px rgba(var(--zweit-rgb), .08); }
.lager-tafel .lager-zeile { animation: lgZeile .4s ease backwards; }
.lager-tafel .lager-neu td { border-top: 1px dashed rgba(var(--gold-rgb), .45); }
.lager-tafel .lager-neu .fest-1 { box-shadow: inset 3px 0 0 var(--zweit); animation: lgNeu 2.4s ease-in-out infinite; }
.lager-tafel .lager-weg { transition: transform .2s, color .2s; }
.lager-tafel .lager-weg:hover { transform: scale(1.2) rotate(90deg); }
.lager-tafel .lager-fuss .btn-primary { box-shadow: 0 0 22px rgba(var(--gold-rgb), .3); }

/* Lagerausgabe */
.lager-tafel #lagerAusgabe { border-radius: 20px; animation: lgRein .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.lager-tafel .ausg-form {
  padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--gold-rgb), .16);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), .07), rgba(0, 0, 0, .2));
}
.lager-tafel table.ausg-liste tbody tr { animation: lgRein .45s cubic-bezier(.2, .8, .2, 1) backwards; transition: background .2s; }
.lager-tafel table.ausg-liste tbody tr:nth-child(2) { animation-delay: .04s; }
.lager-tafel table.ausg-liste tbody tr:nth-child(3) { animation-delay: .08s; }
.lager-tafel table.ausg-liste tbody tr:nth-child(4) { animation-delay: .12s; }
.lager-tafel table.ausg-liste tbody tr:nth-child(n+5) { animation-delay: .16s; }
.lager-tafel .lg-menge {
  display: inline-block; min-width: 44px; padding: 3px 10px; border-radius: 999px;
  background: rgba(var(--gold-rgb), .14); border: 1px solid rgba(var(--gold-rgb), .3);
}
.lager-tafel .ausg-streichen { transition: transform .2s, color .2s; }
.lager-tafel .ausg-streichen:hover { transform: scale(1.2) rotate(90deg); }

/* Warenpreise */
.lager-tafel .preis-klapp { border-radius: 20px; animation: lgRein .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.lager-tafel .preis-summary-wert { text-shadow: 0 0 18px rgba(var(--gold-rgb), .5); }
.lager-tafel .preise tr[data-ware] { transition: background .2s; }
.lager-tafel .preise tr[data-ware]:hover { background: rgba(var(--gold-rgb), .06); }
.lager-tafel .preis-wert { transition: color .3s; }
.lager-tafel .preis-gesamt td { text-shadow: 0 0 14px rgba(var(--gold-rgb), .4); }
.lager-tafel .preis-eingabe:focus, .lager-tafel .preis-menge:focus { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .2); }

@keyframes lgRein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lgAuf { from { opacity: 0; transform: scale(.85) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes lgRing { from { stroke-dashoffset: 326.73; } }
@keyframes lgWachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lgKreisen { to { transform: rotate(360deg); } }
@keyframes lgGluehen { 50% { filter: drop-shadow(0 0 16px rgba(126, 196, 139, .9)); } }
@keyframes lgPuls { 0% { box-shadow: 0 0 0 0 rgba(224, 71, 95, .6); } 100% { box-shadow: 0 0 0 9px rgba(224, 71, 95, 0); } }
@keyframes lgWackeln { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@keyframes lgHuepfen { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes lgZeile { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgNeu { 50% { box-shadow: inset 6px 0 0 var(--zweit); } }
@keyframes lgRaster { to { background-position: 46px 46px; } }

@media (max-width: 1000px) {
  .lg-kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lg-held { grid-template-columns: 1fr; grid-template-areas: 'text' 'ring' 'gruppen'; }
  .lg-ring { margin: 0 auto; width: 170px; height: 170px; }
  .lg-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lg-held { padding: 20px 16px; }
  .lg-knappgitter { padding: 4px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-held::before, .lg-kennzahl, .lg-kennzahl.warnung i, .lg-ring, .lg-ring::after, .lg-ringwert, .lg-gruppebalken span,
  .lg-knappzahl, .lg-knappkarte, .lg-knappbalken span, .lager-tafel .lager-zeile, .lager-tafel .lager-neu .fest-1,
  .lager-tafel table.ausg-liste tbody tr, .lager-tafel #lagerAusgabe, .lager-tafel .preis-klapp { animation: none !important; }
  .lg-reiterlicht { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Blacklist (blacklist.php) — Sperrsiegel, zuletzt gesperrt, Karten
   ═══════════════════════════════════════════════════════════════════ */
.bl2-held {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.4fr) 200px minmax(200px, .9fr); gap: 22px; align-items: center;
  margin-top: 22px; padding: 26px 28px;
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(var(--blut-rgb), .2), transparent 60%),
    repeating-linear-gradient(135deg, rgba(var(--blut-rgb), .05) 0 2px, transparent 2px 14px),
    rgba(var(--flaeche-rgb), .76);
  border-color: rgba(var(--blut-rgb), .35);
}
.bl2-held::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #ff3d6e, var(--gold), #ff3d6e, transparent); background-size: 200% 100%;
  animation: bl2Lauf 4s linear infinite;
}
.bl2-heldtext { position: relative; z-index: 1; }
.bl2-held .bl2-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.bl2-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.bl2-kennzahl {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: bl2Rein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.bl2-kennzahl:hover { transform: translateY(-3px); }
.bl2-kennzahl strong { font: 700 24px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.bl2-kennzahl small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.bl2-anteil { height: 4px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.bl2-anteil span { display: block; width: var(--p); height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); transform-origin: left; animation: bl2Wachsen 1s cubic-bezier(.2, .8, .2, 1) .4s backwards; }

/* Das Sperrsiegel */
.bl2-siegel { position: relative; width: 190px; height: 190px; margin: 0 auto; display: grid; place-items: center; animation: bl2Auf .8s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.bl2-ring { position: absolute; border-radius: 50%; }
.bl2-ring.r1 { inset: 0; border: 2px dashed rgba(255, 61, 110, .45); animation: bl2Drehen 24s linear infinite; }
.bl2-ring.r2 { inset: 18px; border: 1px solid rgba(var(--gold-rgb), .35); border-top-color: transparent; border-bottom-color: transparent; animation: bl2Drehen 6s linear infinite reverse; }
.bl2-ring.r3 { inset: 38px; background: radial-gradient(circle, rgba(255, 61, 110, .3), rgba(var(--blut-rgb), .1) 65%, transparent 70%); animation: bl2Atmen 3s ease-in-out infinite; }
.bl2-scan {
  position: absolute; inset: 38px; border-radius: 50%; overflow: hidden;
}
.bl2-scan::before {
  content: ''; position: absolute; left: 0; right: 0; height: 30%; top: -30%;
  background: linear-gradient(180deg, transparent, rgba(255, 90, 138, .45), transparent);
  animation: bl2Scan 2.6s ease-in-out infinite;
}
.bl2-zeichen { position: relative; font-size: 64px; line-height: 1; color: #ff5a8a; text-shadow: 0 0 24px rgba(255, 61, 110, .8); }
.bl2-stempel {
  position: absolute; bottom: 30px; padding: 3px 10px; border: 2px solid #ff3d6e; border-radius: 6px;
  font: 800 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #ff6b93;
  background: rgba(10, 4, 10, .7); transform: rotate(-10deg);
  animation: bl2Stempel .6s cubic-bezier(.2, 1.6, .4, 1) .9s backwards;
}

/* Zuletzt gesperrt */
.bl2-zuletzt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.bl2-zuletzttitel { margin: 0 0 2px; font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.bl2-neu {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'nr name' 'nr wann';
  gap: 0 10px; align-items: center; padding: 9px 12px; border-radius: 13px; text-decoration: none; color: inherit;
  border: 1px solid rgba(255, 61, 110, .25); background: linear-gradient(110deg, rgba(var(--blut-rgb), .16), rgba(0, 0, 0, .25));
  animation: bl2Gleiten .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: transform .25s, border-color .25s;
}
.bl2-neu:hover { transform: translateX(-4px); border-color: rgba(255, 61, 110, .6); }
.bl2-neunr { grid-area: nr; padding: 4px 8px; border-radius: 8px; font: 700 12px ui-monospace, Consolas, monospace; color: #ff8fb0; background: rgba(var(--blut-rgb), .2); border: 1px solid rgba(255, 61, 110, .35); }
.bl2-neuname { grid-area: name; font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl2-neuwann { grid-area: wann; font: 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }

/* Werkzeuge */
.bl2-werkzeuge {
  position: sticky; top: 0; z-index: 6; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.bl2-wahl {
  padding: 8px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; color: rgba(var(--hell-rgb), .85);
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25);
}
.bl2-wahl option { background: #140c1f; }
.bl2-ansicht { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .25); }
.bl2-ansicht button { width: 34px; height: 30px; border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; color: rgba(var(--hell-rgb), .6); background: transparent; transition: color .2s, background .2s; }
.bl2-ansicht button.an { color: #fff; background: linear-gradient(135deg, rgba(255, 61, 110, .4), rgba(var(--zweit-rgb), .3)); box-shadow: 0 0 12px rgba(255, 61, 110, .3); }
.bl2-werkzeuge .btn { margin-left: auto; }

/* Die Liste: Zeilen fahren ein, Platz 1–3 stechen hervor */
.bl2-liste .bk-zeile { animation: bl2Rein .45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.bl2-liste .bk-zeile.bl2-rein { animation: bl2Rein .4s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.bl2-liste td.bk-platz span {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 9px;
  font: 700 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .6); background: rgba(255, 255, 255, .05);
}
.bl2-liste td.bk-platz.spitze span { color: #fff; background: linear-gradient(135deg, #ff3d6e, #a4142b); box-shadow: 0 0 14px rgba(255, 61, 110, .55); }
.bl2-liste .bk-tabelle:not(.karten) .bk-zeile:hover td { background: linear-gradient(90deg, rgba(var(--blut-rgb), .1), rgba(var(--blut-rgb), .03)); }
.bl2-liste .bk-tabelle:not(.karten) .bk-zeile:hover td:first-child { box-shadow: inset 3px 0 0 #ff3d6e; }

/* Kartenansicht: dieselben Zeilen, als Steckbriefe angeordnet */
.bl2-liste { padding: 10px; }
.bk-tabelle.karten, .bk-tabelle.karten tbody { display: block; }
.bk-tabelle.karten thead { display: none; }
.bk-tabelle.karten tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bk-tabelle.karten tr.bk-zeile {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: 'platz nr seit' 'name name name' 'grund grund grund' 'taten taten taten';
  align-items: center; padding: 6px 0 8px; border-radius: 18px;
  border: 1px solid rgba(255, 61, 110, .2);
  background: linear-gradient(170deg, rgba(var(--blut-rgb), .1), rgba(var(--kopf-rgb), .92) 45%);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}
.bk-tabelle.karten tr.bk-zeile[hidden] { display: none; }
.bk-tabelle.karten tr.bk-zeile::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff3d6e, transparent 80%);
}
.bk-tabelle.karten tr.bk-zeile::after {
  content: 'Gesperrt'; position: absolute; right: -6px; top: 46px; padding: 2px 10px; border: 2px solid rgba(255, 61, 110, .35);
  border-radius: 6px; font: 800 10px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255, 107, 147, .45); transform: rotate(-12deg); pointer-events: none; transition: color .3s, border-color .3s, transform .3s;
}
.bk-tabelle.karten tr.bk-zeile:hover { transform: translateY(-5px); border-color: rgba(255, 61, 110, .55); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .95), 0 0 24px -10px rgba(255, 61, 110, .6); }
.bk-tabelle.karten tr.bk-zeile:hover::after { color: #ff6b93; border-color: #ff3d6e; transform: rotate(-12deg) scale(1.08); }
.bk-tabelle.karten tr.bk-zeile:target { box-shadow: 0 0 0 2px var(--zweit), 0 0 30px -6px var(--zweit); }
.bk-tabelle.karten td { display: block; width: auto; min-width: 0; padding: 6px 16px; border: 0; background: none !important; }
.bk-tabelle.karten td.bk-platz { grid-area: platz; padding-right: 4px; }
.bk-tabelle.karten td.bk-nr { grid-area: nr; padding-left: 4px; }
.bk-tabelle.karten td.bk-seit { grid-area: seit; text-align: right; }
.bk-tabelle.karten td.bk-name { grid-area: name; padding-top: 4px; }
.bk-tabelle.karten td.bk-name .bk-namenszeile { font-size: 18px; }
.bk-tabelle.karten td.bk-grund { grid-area: grund; font-size: 13px; color: rgba(var(--hell-rgb), .7); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bk-tabelle.karten td.bk-taten { grid-area: taten; text-align: left; padding-top: 8px; margin: 0 12px; border-top: 1px solid rgba(var(--gold-rgb), .1); }
.bk-tabelle.karten td.bk-taten .bk-tat { margin: 0 3px 0 0; }
.bk-tabelle.karten tr.bk-bearbeiten { display: block; grid-column: 1 / -1; border-radius: 18px; overflow: hidden; border: 1px solid rgba(var(--gold-rgb), .35); }
.bk-tabelle.karten tr.bk-bearbeiten td { display: block; }

@keyframes bl2Rein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bl2Auf { from { opacity: 0; transform: scale(.7) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes bl2Gleiten { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes bl2Wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bl2Drehen { to { transform: rotate(360deg); } }
@keyframes bl2Atmen { 50% { transform: scale(1.1); opacity: .7; } }
@keyframes bl2Scan { 0% { top: -30%; } 100% { top: 100%; } }
@keyframes bl2Stempel { from { opacity: 0; transform: rotate(-10deg) scale(2.4); } to { opacity: 1; transform: rotate(-10deg); } }
@keyframes bl2Lauf { to { background-position: 200% 0; } }

@media (max-width: 1000px) {
  .bl2-held { grid-template-columns: minmax(0, 1fr) 170px; }
  .bl2-zuletzt { grid-column: 1 / -1; }
  .bl2-siegel { width: 160px; height: 160px; }
}
@media (max-width: 680px) {
  .bl2-held { grid-template-columns: 1fr; padding: 20px 16px; }
  .bl2-siegel { order: -1; width: 140px; height: 140px; }
  .bl2-zeichen { font-size: 48px; }
  .bl2-stempel { bottom: 20px; }
  .bl2-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl2-werkzeuge { position: static; }
  .bk-tabelle.karten tbody { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bl2-held::after, .bl2-kennzahl, .bl2-anteil span, .bl2-siegel, .bl2-ring, .bl2-scan::before, .bl2-stempel,
  .bl2-neu, .bl2-liste .bk-zeile { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Sanktionen (sanktionen.php) — Ring nach Art, Zustandsband, Laufzeit
   ═══════════════════════════════════════════════════════════════════ */
.sk-held {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.4fr) 190px minmax(170px, .7fr); gap: 22px; align-items: center;
  margin-top: 22px; padding: 26px 28px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(var(--blut-rgb), .16), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(var(--gold-rgb), .12), transparent 60%),
    rgba(var(--flaeche-rgb), .76);
}
.sk-held::before {
  content: ''; position: absolute; inset: auto -20% -60% auto; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--blut-rgb), .14), transparent 65%); animation: skSchweben 9s ease-in-out infinite;
}
.sk-heldtext { position: relative; z-index: 1; }
.sk-held .sk-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.sk-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.sk-kennzahl {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: skRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.sk-kennzahl:hover { transform: translateY(-3px); }
.sk-kennzahl strong { font: 700 24px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.sk-kennzahl small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.sk-kennzahl.warnt { animation: skRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards, skWarnen 2.2s ease-in-out 1s infinite; }
.sk-zustaende { display: flex; gap: 4px; margin-top: 14px; height: 26px; }
.sk-zustand {
  position: relative; min-width: 34px; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 25%, rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  transform-origin: left; animation: skWachsen .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.sk-zustand::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); transform: translateX(-100%); animation: skGlanz 3.5s ease-in-out 1.2s infinite; }
.sk-zustand em { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 9px; font-style: normal; font-size: 11.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ring nach Art */
.sk-ring { position: relative; width: 190px; height: 190px; margin: 0 auto; animation: skAuf .7s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.sk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sk-ringgrund { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 14; }
.sk-bogen {
  fill: none; stroke-width: 14; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .4));
  animation: skBogen 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: stroke-width .25s;
}
.sk-ring:hover .sk-bogen { stroke-width: 16; }
.sk-ringmitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sk-waage { font-size: 22px; color: var(--gold-hell); transform-origin: 50% 20%; animation: skWaage 3.2s ease-in-out infinite; }
.sk-ringmitte strong { font: 700 34px/1 ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 18px rgba(var(--gold-rgb), .5); }
.sk-ringmitte small { font: 600 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.sk-legende { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-legendenpunkt {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: rgba(var(--hell-rgb), .8);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: color-mix(in srgb, var(--c) 8%, rgba(0, 0, 0, .25));
  animation: skGleiten .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: transform .2s, border-color .2s, background .2s;
}
.sk-legendenpunkt i { font-style: normal; color: var(--c); }
.sk-legendenpunkt strong { margin-left: auto; font: 700 13px ui-monospace, Consolas, monospace; color: #fff; }
.sk-legendenpunkt:hover:not([disabled]) { transform: translateX(-4px); border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.sk-legendenpunkt.leer { opacity: .35; cursor: default; }

/* Werkzeuge */
.sk-werkzeuge {
  position: sticky; top: 0; z-index: 6; margin-top: 16px; padding: 10px; border-radius: 18px; gap: 8px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.sk-suche {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8);
  transition: border-color .2s, box-shadow .2s;
}
.sk-suche:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14); }
.sk-suche input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }
.sk-werkzeuge .sk-neuknopf, .sk-nurlesen { margin-left: auto; }
.sk-nurlesen { font-size: 12px; color: rgba(var(--hell-rgb), .45); }
.sk-neuknopf .plus { display: inline-block; transition: transform .3s; }
.sk-neuknopf.offen .plus { transform: rotate(45deg); }
.sk-formular { margin-top: 12px; padding: 20px; border-color: rgba(var(--blut-rgb), .4); animation: skAuf .4s cubic-bezier(.2, .8, .2, 1) backwards; }

/* Die Liste */
.sk-zeile {
  border-radius: 18px; background: linear-gradient(110deg, color-mix(in srgb, var(--c) 8%, rgba(var(--flaeche-rgb), .92)), rgba(var(--kopf-rgb), .92));
  animation: skRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.sk-zeile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at 0% 50%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%);
}
.sk-zeile:hover::before { opacity: 1; }
.sk-zeile:hover { transform: translateY(-3px) translateX(2px); }
.sk-zeile .sank-bild { width: 50px; height: 50px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent); transition: transform .3s; }
.sk-zeile:hover .sank-bild { transform: scale(1.08) rotate(-4deg); }
.sk-zeile[data-status="OFFEN"] .sank-bild { animation: skRing 2.4s ease-out infinite; }
.sk-zeile .badge.sank-status.sank-offen { animation: skBlinken 2s ease-in-out infinite; }
.sk-laufzeit { display: block; height: 5px; margin-top: 8px; max-width: 360px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.sk-laufzeit span {
  display: block; width: var(--p); height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, transparent), var(--c)); box-shadow: 0 0 8px var(--c);
  transform-origin: left; animation: skWachsen 1s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 250ms) backwards;
}
.sk-laufzeit.ohne-ende span {
  background: repeating-linear-gradient(135deg, var(--c) 0 8px, color-mix(in srgb, var(--c) 35%, transparent) 8px 16px);
  background-size: 22.6px 22.6px; animation: skStreifen 1s linear infinite; box-shadow: none; opacity: .8;
}
.sk-zeile .sank-tat { transition: background .15s, border-color .15s, transform .2s; }
.sk-zeile .sank-tat:hover { transform: translateY(-1px); }

/* Je Person */
.sk-personen { margin-top: 12px; padding: 0; overflow: hidden; border-radius: 18px; animation: skRein .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.sk-personen tbody tr { transition: background .2s; }
.sk-personen tbody tr:hover { background: rgba(var(--gold-rgb), .06); }
.sk-verteilung { display: flex; gap: 2px; width: 140px; height: 5px; margin-top: 6px; border-radius: 999px; overflow: hidden; }
.sk-verteilung i { display: block; height: 100%; background: var(--c); transform-origin: left; animation: skWachsen .9s cubic-bezier(.2, .8, .2, 1) .3s backwards; }

@keyframes skRein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes skAuf { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes skGleiten { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes skWachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes skBogen { from { stroke-dasharray: 0 289.03; } }
@keyframes skWaage { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes skSchweben { 50% { transform: translate(-30px, -20px); } }
@keyframes skWarnen { 50% { box-shadow: 0 0 0 4px rgba(224, 163, 74, .18), 0 0 22px rgba(224, 163, 74, .35); } }
@keyframes skGlanz { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes skRing { 0% { box-shadow: 0 0 0 2px rgba(224, 163, 74, .7), 0 0 0 2px rgba(224, 163, 74, .5); } 100% { box-shadow: 0 0 0 2px rgba(224, 163, 74, .7), 0 0 0 10px rgba(224, 163, 74, 0); } }
@keyframes skBlinken { 50% { opacity: .55; } }
@keyframes skStreifen { to { background-position: 22.6px 0; } }

@media (max-width: 1000px) {
  .sk-held { grid-template-columns: minmax(0, 1fr) 170px; }
  .sk-legende { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .sk-ring { width: 170px; height: 170px; }
}
@media (max-width: 680px) {
  .sk-held { grid-template-columns: 1fr; padding: 20px 16px; }
  .sk-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-werkzeuge { position: static; }
  .sk-werkzeuge .sk-neuknopf { margin-left: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-held::before, .sk-kennzahl, .sk-zustand, .sk-zustand::before, .sk-ring, .sk-bogen, .sk-waage, .sk-legendenpunkt,
  .sk-zeile, .sk-zeile .sank-bild, .sk-zeile .badge.sank-status, .sk-laufzeit span, .sk-personen, .sk-verteilung i { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Wachplan (wachplan.php) — Abdeckung, Jetzt im Dienst, lebendiger Plan
   ═══════════════════════════════════════════════════════════════════ */
.wp-held {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.4fr) 180px minmax(220px, .9fr); gap: 22px; align-items: center;
  margin-top: 22px; padding: 26px 28px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(126, 196, 139, .14), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(var(--gold-rgb), .12), transparent 60%),
    rgba(var(--flaeche-rgb), .76);
}
.wp-held::before {
  content: '🛡'; position: absolute; right: 22%; bottom: -60px; font-size: 220px; line-height: 1; opacity: .04;
  pointer-events: none; animation: wpSchweben 8s ease-in-out infinite;
}
.wp-heldtext { position: relative; z-index: 1; }
.wp-held .wp-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.wp-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.wp-kennzahl {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i z' 's s'; align-items: center; gap: 2px 8px;
  padding: 11px 13px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: wpRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.wp-kennzahl:hover { transform: translateY(-3px); }
.wp-kennzahl i { grid-area: i; font-style: normal; font-size: 17px; }
.wp-kennzahl strong { grid-area: z; font: 700 22px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.wp-kennzahl small { grid-area: s; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.wp-kennzahl.warnt i { animation: wpWackeln 2.4s ease-in-out 1s infinite; display: inline-block; }
.wp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.wp-woche {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25);
}
.wp-woche a {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; text-decoration: none;
  font-size: 20px; color: var(--gold-hell); transition: background .2s, transform .2s;
}
.wp-woche a:hover { background: rgba(var(--gold-rgb), .18); transform: scale(1.1); }
.wp-woche span { padding: 0 10px; font: 700 14px ui-monospace, Consolas, monospace; color: #fff; }
.wp-heute { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 13px; color: var(--zweit); border: 1px solid rgba(var(--zweit-rgb), .35); transition: background .2s; }
.wp-heute:hover { background: rgba(var(--zweit-rgb), .12); }
.wp-neuknopf .plus { display: inline-block; transition: transform .3s; }
.wp-neuknopf.offen .plus { transform: rotate(45deg); }

/* Abdeckung */
.wp-ring { position: relative; width: 180px; height: 180px; margin: 0 auto; animation: wpAuf .8s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.wp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wp-ringgrund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 10; }
.wp-ringwert {
  fill: none; stroke: #7ec48b; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(126, 196, 139, .6));
  animation: wpRing 1.6s cubic-bezier(.2, .8, .2, 1) .2s backwards;
}
.wp-ring.voll .wp-ringwert { animation: wpRing 1.6s cubic-bezier(.2, .8, .2, 1) .2s backwards, wpGluehen 2.4s ease-in-out 1.8s infinite; }
.wp-ring::after { content: ''; position: absolute; inset: 20px; border-radius: 50%; border: 1px dashed rgba(126, 196, 139, .3); animation: wpDrehen 30s linear infinite; }
.wp-ringtext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wp-ringtext strong { font: 700 38px/1 ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 18px rgba(126, 196, 139, .5); }
.wp-ringtext strong small { font-size: 16px; color: #a8e0b4; }
.wp-ringtext > span { margin-top: 4px; font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }

/* Jetzt im Dienst */
.wp-dienst {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; border-radius: 18px;
  border: 1px solid rgba(126, 196, 139, .3); background: linear-gradient(160deg, rgba(126, 196, 139, .12), rgba(0, 0, 0, .3));
  animation: wpGleiten .6s cubic-bezier(.2, .8, .2, 1) .25s backwards;
}
.wp-diensttitel { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: #a8e0b4; }
.wp-live { width: 8px; height: 8px; border-radius: 50%; background: #e0475f; box-shadow: 0 0 0 0 rgba(224, 71, 95, .6); animation: wpLive 1.6s ease-out infinite; flex: none; }
.wp-dienstschicht { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.wp-dienstschicht small { display: block; margin-top: 2px; font: 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .5); font-weight: 400; }
.wp-dienstleer { margin: 2px 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .55); }
.wp-dienstleer a { color: var(--zweit); }
.wp-dienstleer.warnt { color: #ff9aae; }
.wp-dienstleute { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-dienstperson {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 12.5px; color: #fff;
  border: 1px solid rgba(126, 196, 139, .35); background: rgba(0, 0, 0, .25);
  animation: wpRein .45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.wp-dienstbalken { display: block; height: 5px; margin-top: 4px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.wp-dienstbalken span { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7ec48b, var(--gold)); box-shadow: 0 0 8px rgba(126, 196, 139, .6); transition: width 1s ease; }
.wp-dienstrest { font: 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .5); }

.wp-formular { margin-top: 12px; padding: 20px; border-color: rgba(var(--gold-rgb), .4); animation: wpAuf .4s cubic-bezier(.2, .8, .2, 1) backwards; }

/* Der Plan */
.wp-plan { border-radius: 18px; border-color: rgba(var(--gold-rgb), .22); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .95); animation: wpRein .5s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.wp-plan table.wachplan thead th { position: relative; }
.wp-plan table.wachplan thead th.ist-heute::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: wpGluehen 2.4s ease-in-out infinite;
}
.wp-plan .wach-zelle { transition: background .25s, box-shadow .25s; }
.wp-plan .wach-zelle:hover { background: rgba(var(--gold-rgb), .07); }
.wp-plan .wach-zelle.wach-offen {
  background: repeating-linear-gradient(135deg, rgba(224, 71, 95, .07) 0 8px, rgba(224, 71, 95, .02) 8px 16px);
  background-size: 22.6px 22.6px; animation: wpStreifen 3s linear infinite;
}
.wp-plan .wach-zelle.ist-heute { box-shadow: inset 1px 0 0 rgba(var(--gold-rgb), .25), inset -1px 0 0 rgba(var(--gold-rgb), .25); }
.wp-plan tr.wp-jetztzeile th.wach-schicht { background: linear-gradient(90deg, rgba(126, 196, 139, .16), transparent); box-shadow: inset 3px 0 0 #7ec48b; }
.wp-plan .wach-zelle.wp-jetzt { background: rgba(126, 196, 139, .12); box-shadow: inset 0 0 0 2px rgba(126, 196, 139, .55), 0 0 22px -6px rgba(126, 196, 139, .7); animation: wpPulsZelle 2.6s ease-in-out infinite; }
.wp-jetztmarke {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  font: 700 9.5px/1.6 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: #a8e0b4; border: 1px solid rgba(126, 196, 139, .45); background: rgba(126, 196, 139, .1);
}
.wp-plan .wach-block {
  border-radius: 10px; animation: wpRein .45s cubic-bezier(.2, .8, .2, 1) backwards;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.wp-plan .wach-block:hover { transform: translateY(-2px); border-color: rgba(var(--gold-rgb), .6); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8); }
.wp-plan tbody tr:nth-child(2) .wach-block { animation-delay: .08s; }
.wp-plan tbody tr:nth-child(3) .wach-block { animation-delay: .16s; }
.wp-plan .wach-frei { opacity: .55; transition: opacity .2s, transform .2s, border-color .2s, color .2s; }
.wp-plan .wach-zelle:hover .wach-frei { opacity: 1; }
.wp-plan .wach-offen .wach-frei { opacity: .9; animation: wpPlus 2.2s ease-in-out infinite; }

/* Je Person */
.wp-personen { margin-top: 20px; padding: 18px 20px; border-radius: 18px; animation: wpRein .5s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
.wp-personenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 22px; margin-top: 12px; }
.wp-person {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'kreis name zahl' 'kreis balken balken';
  align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 13px; border: 1px solid transparent;
  animation: wpRein .45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: background .2s, border-color .2s;
}
.wp-person:hover { background: rgba(var(--gold-rgb), .06); border-color: rgba(var(--gold-rgb), .15); }
.wp-person.meine { border-color: rgba(var(--gold-rgb), .4); background: rgba(var(--gold-rgb), .07); }
.wp-person .wach-kreis { grid-area: kreis; width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); }
.wp-personname { grid-area: name; font-size: 13.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-personzahl { grid-area: zahl; font: 12px ui-monospace, Consolas, monospace; color: var(--gold); }
.wp-personbalken { grid-area: balken; height: 5px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.wp-personbalken span { display: block; width: var(--p); height: 100%; border-radius: 999px; background: var(--c); box-shadow: 0 0 8px var(--c); transform-origin: left; animation: wpWachsen 1s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 200ms) backwards; }

@keyframes wpRein { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wpAuf { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes wpGleiten { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes wpWachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wpRing { from { stroke-dashoffset: 326.73; } }
@keyframes wpGluehen { 50% { filter: drop-shadow(0 0 14px rgba(126, 196, 139, .9)); opacity: .7; } }
@keyframes wpDrehen { to { transform: rotate(360deg); } }
@keyframes wpSchweben { 50% { transform: translateY(-14px) rotate(-4deg); } }
@keyframes wpLive { 0% { box-shadow: 0 0 0 0 rgba(224, 71, 95, .6); } 100% { box-shadow: 0 0 0 8px rgba(224, 71, 95, 0); } }
@keyframes wpWackeln { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@keyframes wpStreifen { to { background-position: 22.6px 0; } }
@keyframes wpPulsZelle { 50% { box-shadow: inset 0 0 0 2px rgba(126, 196, 139, .85), 0 0 30px -4px rgba(126, 196, 139, .8); } }
@keyframes wpPlus { 50% { transform: scale(1.12); border-color: var(--gold); } }

@media (max-width: 1000px) {
  .wp-held { grid-template-columns: minmax(0, 1fr) 170px; }
  .wp-dienst { grid-column: 1 / -1; }
  .wp-ring { width: 160px; height: 160px; }
}
@media (max-width: 680px) {
  .wp-held { grid-template-columns: 1fr; padding: 20px 16px; }
  .wp-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-leiste .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-held::before, .wp-kennzahl, .wp-kennzahl.warnt i, .wp-ring, .wp-ring::after, .wp-ringwert, .wp-dienst, .wp-live, .wp-dienstperson,
  .wp-plan, .wp-plan thead th.ist-heute::after, .wp-plan .wach-zelle.wach-offen, .wp-plan .wach-zelle.wp-jetzt, .wp-plan .wach-block,
  .wp-plan .wach-offen .wach-frei, .wp-personen, .wp-person, .wp-personbalken span { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Kontobuch (konto.php) — Vermögen, Kassen mit Verlauf, Buchen, Monate
   ═══════════════════════════════════════════════════════════════════ */
.kb-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  gap: 22px; align-items: center; margin-top: 22px; padding: 26px 28px;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(63, 174, 99, .14), transparent 55%),
    radial-gradient(90% 140% at 100% 100%, rgba(210, 50, 60, .13), transparent 60%),
    rgba(var(--flaeche-rgb), .76);
}
.kb-held::before {
  content: '$'; position: absolute; left: 34%; top: -70px; font: 700 260px/1 Georgia, serif; color: rgba(var(--gold-rgb), .04);
  pointer-events: none; animation: kbSchweben 9s ease-in-out infinite;
}
.kb-heldtext { position: relative; z-index: 1; }
.kb-held .kb-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.kb-vermoegen { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(var(--gold-rgb), .25); background: linear-gradient(160deg, rgba(var(--gold-rgb), .12), rgba(0, 0, 0, .3)); animation: kbRein .55s cubic-bezier(.2, .8, .2, 1) .05s backwards; }
.kb-vermoegen small { font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.kb-vermoegen strong { font: 700 clamp(28px, 3.6vw, 40px)/1.1 ui-monospace, Consolas, monospace; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(var(--gold-rgb), .45); }
.kb-vermoegen strong em { font-style: normal; color: var(--gold); }
.kb-vermoegen strong.minus { color: #ff9aae; }
.kb-anteile { display: flex; gap: 3px; height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden; }
.kb-anteile i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); transform-origin: left; animation: kbWachsen .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }

/* Die Kassen */
.kb-kassen { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kb-kasse {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 20px;
  text-decoration: none; color: inherit; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 14%, rgba(var(--kopf-rgb), .9)), rgba(var(--kopf-rgb), .95));
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .9);
  animation: kbRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}
.kb-kasse::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--c) 22%, transparent), transparent 70%);
}
.kb-kasse:hover { transform: translateY(-5px); border-color: var(--c); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .95), 0 0 26px -10px var(--c); }
.kb-kasse:hover::before { opacity: 1; }
.kb-kasse.gewaehlt { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.kb-kassekopf { display: flex; align-items: center; gap: 10px; }
.kb-kassezeichen {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none;
  font: 700 22px/1 Georgia, serif; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 35%, transparent);
  animation: kbMuenze 4s ease-in-out infinite;
}
.kb-kassename { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; color: #fff; }
.kb-kassename small { font-size: 11px; font-weight: 400; color: rgba(var(--hell-rgb), .45); }
.kb-kassefilter { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.kb-kassestand { font: 700 26px/1.1 ui-monospace, Consolas, monospace; color: var(--c); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.kb-kassestand.minus { color: #ff9aae; }
.kb-linie { display: block; width: 100%; height: 56px; overflow: visible; }
.kb-strich {
  fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px var(--c));
  animation: kbZeichnen 1.6s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 250ms) backwards;
}
.kb-flaeche { animation: kbBlende 1s ease calc(var(--d, 0ms) + 900ms) backwards; }
.kb-linieleer { font-size: 11.5px; color: rgba(var(--hell-rgb), .35); padding: 18px 0; }
.kb-einaus { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.kb-einaus i { display: block; height: 100%; transform-origin: left; animation: kbWachsen 1s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 300ms) backwards; }
.kb-einaus i.ein { flex: var(--ein); background: #3fae63; }
.kb-einaus i.aus { flex: var(--aus); background: #d2323c; }
.kb-einauszahlen { display: flex; justify-content: space-between; gap: 8px; font: 11px ui-monospace, Consolas, monospace; }
.kb-einauszahlen .ein { color: #6fd08f; }
.kb-einauszahlen .aus { color: #ff8c94; }

/* Buchen */
.kb-buchen { margin-top: 18px; padding: 22px 24px; border-radius: 20px; animation: kbRein .55s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
.kb-schalterreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.kb-schalter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(0, 0, 0, .25); }
.kb-schalter label { position: relative; cursor: pointer; }
.kb-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.kb-schalter span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 13px;
  color: rgba(var(--hell-rgb), .65); transition: color .2s, background .2s, box-shadow .2s, transform .2s;
}
.kb-schalter span b { color: var(--c); font-family: Georgia, serif; }
.kb-schalter label:hover span { color: #fff; }
.kb-schalter input:checked + span {
  color: #fff; background: color-mix(in srgb, var(--c) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 16px -4px var(--c);
  animation: kbKlick .35s cubic-bezier(.2, 1.4, .4, 1);
}
.kb-schalter input:focus-visible + span { outline: 2px solid var(--zweit); outline-offset: 2px; }
.kb-felder { align-items: end; }
.kb-betrag { position: relative; display: block; }
.kb-betrag .input { padding-right: 34px; font: 700 18px ui-monospace, Consolas, monospace; letter-spacing: .02em; }
.kb-betrag em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 16px Georgia, serif; font-style: normal; color: var(--gold); pointer-events: none; }
.kb-vorschau {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: 12px;
  border: 1px dashed rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .2); transition: border-color .3s, background .3s;
}
.kb-vorschau small { font: 600 9.5px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .45); }
.kb-vorschau strong { font: 700 18px/1.2 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .6); font-variant-numeric: tabular-nums; }
.kb-vorschau.aktiv { border-style: solid; border-color: rgba(var(--gold-rgb), .5); background: rgba(var(--gold-rgb), .08); }
.kb-vorschau.aktiv strong { color: #fff; }
.kb-vorschau.minus strong { color: #ff9aae; }
.kb-vorschau strong.tick { animation: kbTick .3s ease; }
.kb-buchknopf { margin-top: 14px; box-shadow: 0 0 22px rgba(var(--gold-rgb), .25); }

/* Die Buchungen */
.kb-blatt { margin-top: 18px; padding: 22px 24px; border-radius: 20px; animation: kbRein .55s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
.kb-blattkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.kb-suche {
  flex: 1 1 220px; max-width: 420px; margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8); transition: border-color .2s, box-shadow .2s;
}
.kb-suche:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14); }
.kb-suche input { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: #fff; }
.kb-filter { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(0, 0, 0, .25); }
.kb-filter button { --c: var(--gold); padding: 6px 11px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12.5px; color: rgba(var(--hell-rgb), .65); background: transparent; transition: color .2s, background .2s; }
.kb-filter button:hover { color: #fff; }
.kb-filter button.an { color: #fff; background: color-mix(in srgb, var(--c) 25%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.kb-blatt tr.kb-monat td { padding: 16px 0 8px; border-bottom: 1px solid rgba(var(--gold-rgb), .2); background: none !important; }
.kb-monatname { font: 700 12px ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); }
.kb-monatsumme { float: right; display: inline-flex; gap: 12px; font: 11.5px ui-monospace, Consolas, monospace; }
.kb-monatsumme .ein { color: #6fd08f; }
.kb-monatsumme .aus { color: #ff8c94; }
.kb-blatt tr.kb-zeile { animation: kbRein .45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: background .2s; }
.kb-blatt tr.kb-zeile td:first-child { box-shadow: inset 2px 0 0 transparent; transition: box-shadow .2s; }
.kb-blatt tr.kb-zeile:hover td:first-child { box-shadow: inset 3px 0 0 var(--c); }
.kb-blatt tr.kb-zeile:hover td { background: rgba(var(--gold-rgb), .05); }
.kb-blatt td.konto-datum { padding-left: 10px; }
.kb-betragschild {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform .2s;
}
.kb-blatt tr.kb-zeile:hover .kb-betragschild { transform: scale(1.05); }

@keyframes kbRein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kbWachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kbZeichnen { from { stroke-dashoffset: 100; } }
@keyframes kbBlende { from { opacity: 0; } to { opacity: 1; } }
@keyframes kbSchweben { 50% { transform: translateY(18px) rotate(6deg); } }
@keyframes kbMuenze { 0%, 70%, 100% { transform: none; } 80% { transform: rotateY(180deg); } 90% { transform: rotateY(360deg); } }
@keyframes kbKlick { 0% { transform: scale(.92); } 100% { transform: none; } }
@keyframes kbTick { 0% { transform: translateY(-4px); opacity: .4; } 100% { transform: none; opacity: 1; } }

@media (max-width: 900px) {
  .kb-held { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kb-held { padding: 20px 16px; }
  .kb-kassen { grid-template-columns: 1fr; }
  .kb-buchen, .kb-blatt { padding: 18px 14px; }
  .kb-schalter { flex: 1 1 100%; }
  .kb-schalter label { flex: 1; }
  .kb-schalter span { justify-content: center; width: 100%; }
  .kb-suche { max-width: none; margin-left: 0; }
  .kb-monatsumme { float: none; display: flex; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-held::before, .kb-vermoegen, .kb-anteile i, .kb-kasse, .kb-kassezeichen, .kb-strich, .kb-flaeche, .kb-einaus i,
  .kb-buchen, .kb-blatt, .kb-blatt tr.kb-zeile, .kb-schalter input:checked + span, .kb-vorschau strong.tick { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Aufträge (auftraege.php) — Fortschrittsring, Reiter, Board, Karten
   ═══════════════════════════════════════════════════════════════════ */
.af-held {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) 190px; grid-template-areas: 'text ring' 'reiter reiter';
  gap: 18px 26px; align-items: center; margin-top: 22px; padding: 26px 28px 20px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(200, 32, 58, .18), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(var(--gold-rgb), .12), transparent 60%),
    rgba(var(--flaeche-rgb), .76);
}
.af-held::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(200, 32, 58, .05) 46px 48px);
  animation: afSchlieren 22s linear infinite;
}
.af-heldtext { grid-area: text; position: relative; z-index: 1; }
.af-held .af-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.af-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.af-kennzahl {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i z' 's s'; align-items: center; gap: 2px 8px;
  padding: 11px 13px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: afRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.af-kennzahl:hover { transform: translateY(-3px); }
.af-kennzahl i { grid-area: i; font-style: normal; font-size: 17px; display: inline-block; }
.af-kennzahl i.dreht { animation: afDrehen 6s linear infinite; }
.af-kennzahl strong { grid-area: z; font: 700 22px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.af-kennzahl small { grid-area: s; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.af-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.af-anlegen .plus { display: inline-block; transition: transform .3s; }
.af-anlegen:hover .plus { transform: rotate(90deg); }
.af-dringend {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #ffb3a6;
  border: 1px solid rgba(224, 71, 95, .55); background: rgba(224, 71, 95, .14);
  animation: afGlut 2s ease-in-out infinite; transition: transform .2s;
}
.af-dringend:hover { transform: translateY(-2px); }
.af-dringend span { display: inline-block; animation: afFlamme 1.2s ease-in-out infinite; }

/* Der Fortschrittsring */
.af-ring { grid-area: ring; position: relative; z-index: 1; width: 190px; height: 190px; animation: afAuf .8s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.af-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.af-ringgrund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 10; }
.af-ringwert { fill: none; stroke: url(#afRingVerlauf); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(200, 32, 58, .5)); animation: afRing 1.6s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
.af-ring::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(200, 32, 58, .35); animation: afDrehen 30s linear infinite; }
.af-ring.voll .af-ringwert { animation: afRing 1.6s cubic-bezier(.2, .8, .2, 1) .2s backwards, afPulsRing 2.4s ease-in-out 1.8s infinite; }
.af-ringtext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.af-ringicon { font-size: 18px; animation: afTropfen 2.6s ease-in-out infinite; }
.af-ringtext strong { font: 700 36px/1 ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 18px rgba(200, 32, 58, .6); }
.af-ringtext strong small { font-size: 16px; color: #ff8d9e; }
.af-ringtext > span:last-child { margin-top: 4px; font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }

/* Reiter */
.af-reiter { grid-area: reiter; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 16px; border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .25); }
.af-reiterknopf {
  flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  text-decoration: none; font-size: 13.5px; font-weight: 600; color: rgba(var(--hell-rgb), .65); border: 1px solid transparent;
  animation: afRein .45s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: color .2s, background .2s, transform .2s, box-shadow .2s;
}
.af-reiterknopf:hover { color: #fff; background: color-mix(in srgb, var(--c) 12%, transparent); transform: translateY(-1px); }
.af-reiterknopf.an { color: #fff; border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 20px -6px var(--c); }
.af-reiterzahl { padding: 1px 8px; border-radius: 999px; font: 700 11px/1.5 ui-monospace, Consolas, monospace; color: #fff; background: color-mix(in srgb, var(--c) 30%, transparent); }

/* Werkzeuge */
.af-werkzeuge {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.af-suchform { flex: 1 1 300px; display: flex; gap: 6px; margin: 0; }
.af-suche { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8); transition: border-color .2s, box-shadow .2s; }
.af-suche:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14); }
.af-suche input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }
.af-tief, .af-wahl { padding: 8px 12px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; color: rgba(var(--hell-rgb), .85); border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); transition: border-color .2s, color .2s; }
.af-tief:hover, .af-wahl:hover { border-color: var(--zweit); color: #fff; }
.af-wahl option { background: #140c1f; }
.af-ansicht { display: inline-flex; gap: 3px; padding: 3px; border-radius: 13px; border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .25); }
.af-ansicht button { padding: 6px 11px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; color: rgba(var(--hell-rgb), .65); background: transparent; transition: color .2s, background .2s; }
.af-ansicht button.an { color: #fff; background: linear-gradient(135deg, rgba(200, 32, 58, .45), rgba(var(--zweit-rgb), .3)); box-shadow: 0 0 14px rgba(200, 32, 58, .3); }
.af-bereich { margin-top: 18px; }
.af-treffer { display: inline-block; min-width: 26px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; text-align: center; font: 600 12px/1.5 ui-monospace, Consolas, monospace; color: #fff; background: rgba(200, 32, 58, .35); }
.af-tiefchip { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; text-decoration: none; color: #fff; border: 1px solid rgba(var(--zweit-rgb), .5); background: rgba(var(--zweit-rgb), .14); transition: background .2s; }
.af-tiefchip:hover { background: rgba(var(--zweit-rgb), .25); }

/* Board: je Stand eine Spalte */
.af-gruppen.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.af-gruppen.board .auftrag-gruppe {
  margin-top: 12px; padding: 12px; border-radius: 20px; border: 1px solid rgba(var(--gold-rgb), .14);
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb), .6), rgba(0, 0, 0, .18));
  animation: afRein .55s cubic-bezier(.2, .8, .2, 1) backwards;
}
.af-gruppen.board .auftrag-gruppe:nth-child(2) { animation-delay: .1s; }
.af-gruppen.board .auftrag-gruppe:nth-child(3) { animation-delay: .2s; }
.af-gruppen.board .auftrag-gruppenkopf { margin: -2px -2px 10px; padding: 4px 4px 10px; }
.af-gruppen.board .auftrag-karte { flex-direction: column; gap: 10px; }
.af-gruppen.board .auftrag-karte .auftrag-icon { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; font-size: 16px; }
.af-gruppen.board .auftrag-karte .auftrag-kopfzeile { padding-right: 40px; }
.af-gruppen.board .auftrag-pfeil { display: none; }
.auftrag-gruppe[data-stand="OFFEN"] .auftrag-gruppenkopf { border-bottom-color: rgba(224, 176, 74, .4); }
.auftrag-gruppe[data-stand="IN BEARBEITUNG"] .auftrag-gruppenkopf { border-bottom-color: rgba(106, 176, 230, .4); }
.auftrag-gruppe[data-stand="ERLEDIGT"] .auftrag-gruppenkopf { border-bottom-color: rgba(126, 196, 139, .4); }
.auftrag-gruppe[data-stand="IN BEARBEITUNG"] .auftrag-gruppenicon { display: inline-block; animation: afDrehen 6s linear infinite; }

/* Die Karten */
.af-bereich .auftrag-karte {
  overflow: hidden; border-radius: 16px; border-color: rgba(var(--gold-rgb), .14);
  background: linear-gradient(160deg, rgba(var(--flaeche-rgb), .92), rgba(var(--kopf-rgb), .95));
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .9);
  animation: afRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}
.af-bereich .auftrag-karte.af-rein { animation: afRein .4s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.af-bereich .auftrag-karte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--ton, var(--gold)) 16%, transparent), transparent 70%);
}
.af-bereich .auftrag-karte:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ton, var(--gold)) 55%, transparent); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--ton, var(--gold)) 20%, transparent); background: linear-gradient(160deg, rgba(var(--flaeche-rgb), .98), rgba(var(--kopf-rgb), .98)); }
.af-bereich .auftrag-karte:hover::after { opacity: 1; }
.af-bereich .auftrag-karte.prio-dringend { border-color: rgba(224, 71, 95, .45); animation: afRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards, afDringendRand 2.4s ease-in-out 1s infinite; }
.af-bereich .auftrag-karte.prio-dringend::before { background: linear-gradient(180deg, #ff5a3c, #e0475f); box-shadow: 0 0 12px rgba(224, 71, 95, .8); }
.af-bereich .auftrag-karte.prio-hoch::before { background: linear-gradient(180deg, #e9b05f, var(--ton, var(--gold))); }
.af-bereich .auftrag-icon { background: linear-gradient(145deg, color-mix(in srgb, var(--ton, var(--gold)) 22%, transparent), rgba(0, 0, 0, .25)); border-color: color-mix(in srgb, var(--ton, var(--gold)) 35%, transparent); }
.af-bereich .auftrag-person { transition: transform .2s; }
.af-bereich .auftrag-karte:hover .auftrag-person { transform: translateY(-1px); }
.af-bereich .auftrag-karte.meiner { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35), 0 12px 28px -18px rgba(0, 0, 0, .9); }

@keyframes afRein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes afAuf { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes afRing { from { stroke-dashoffset: 326.73; } }
@keyframes afPulsRing { 50% { filter: drop-shadow(0 0 16px rgba(126, 196, 139, .9)); } }
@keyframes afDrehen { to { transform: rotate(360deg); } }
@keyframes afTropfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px) scale(1.1); } }
@keyframes afGlut { 50% { box-shadow: 0 0 0 4px rgba(224, 71, 95, .15), 0 0 22px rgba(224, 71, 95, .45); } }
@keyframes afFlamme { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.18) rotate(4deg); } }
@keyframes afDringendRand { 50% { box-shadow: 0 0 0 1px rgba(224, 71, 95, .5), 0 0 24px -6px rgba(224, 71, 95, .7); } }
@keyframes afSchlieren { to { background-position: 480px 0; } }

@media (max-width: 760px) {
  .af-held { grid-template-columns: 1fr; grid-template-areas: 'text' 'ring' 'reiter'; padding: 20px 16px; }
  .af-ring { margin: 0 auto; width: 160px; height: 160px; }
  .af-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-werkzeuge { position: static; }
  .af-gruppen.board { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .af-held::before, .af-kennzahl, .af-kennzahl i.dreht, .af-dringend, .af-dringend span, .af-ring, .af-ring::after, .af-ringwert,
  .af-ringicon, .af-reiterknopf, .af-gruppen.board .auftrag-gruppe, .auftrag-gruppe .auftrag-gruppenicon, .af-bereich .auftrag-karte { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Ereignisse (ereignisse.php) — Seismograph, Zeitleiste, Karten
   ═══════════════════════════════════════════════════════════════════ */
.er-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 24px; align-items: center; margin-top: 22px; padding: 26px 28px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(176, 107, 255, .2), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(255, 122, 224, .08), transparent 60%),
    rgba(var(--flaeche-rgb), .76);
}
.er-held::before {
  content: '⚡'; position: absolute; left: 44%; top: -40px; font-size: 200px; line-height: 1; opacity: .04; pointer-events: none;
  animation: erBlitz 7s ease-in-out infinite;
}
.er-heldtext { position: relative; z-index: 1; }
.er-held .er-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.er-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.er-kennzahl {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i z' 's s'; align-items: center; gap: 2px 8px;
  padding: 11px 13px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: erRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.er-kennzahl:hover { transform: translateY(-3px); }
.er-kennzahl i { grid-area: i; font-style: normal; font-size: 16px; color: var(--c); }
.er-kennzahl strong { grid-area: z; font: 700 22px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.er-kennzahl small { grid-area: s; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.er-anlegen .plus { display: inline-block; transition: transform .3s; }
.er-anlegen:hover .plus { transform: rotate(90deg); }

/* Seismograph */
.er-seismo {
  position: relative; z-index: 1; padding: 14px 16px 10px; border-radius: 18px;
  border: 1px solid rgba(176, 107, 255, .3); background: linear-gradient(170deg, rgba(176, 107, 255, .1), rgba(0, 0, 0, .35));
  animation: erAuf .7s cubic-bezier(.2, .8, .2, 1) .1s backwards;
}
.er-seismotitel { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: #d6b4ff; }
.er-live { width: 8px; height: 8px; border-radius: 50%; background: #ff7ae0; animation: erLive 1.6s ease-out infinite; }
.er-seismo svg { display: block; width: 100%; height: 110px; overflow: visible; }
.er-gitter { stroke: rgba(176, 107, 255, .12); stroke-width: 1; stroke-dasharray: 3 5; }
.er-ausschlag {
  fill: none; stroke: url(#erLinie); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 100; filter: drop-shadow(0 0 5px rgba(176, 107, 255, .8));
  animation: erZeichnen 2.4s cubic-bezier(.4, .1, .2, 1) .3s backwards;
}
.er-stift { fill: #fff; filter: drop-shadow(0 0 6px #ff7ae0) drop-shadow(0 0 12px #b06bff); }
.er-wochen { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 4px; text-align: center; font: 10px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .4); }

/* Werkzeuge */
.er-werkzeuge {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.er-suchform { flex: 1 1 300px; display: flex; gap: 6px; margin: 0; }
.er-suche { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8); transition: border-color .2s, box-shadow .2s; }
.er-suche:focus-within { border-color: var(--zweit); box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14); }
.er-suche input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }
.er-tief { padding: 8px 12px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; color: rgba(var(--hell-rgb), .85); border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); transition: border-color .2s, color .2s; }
.er-tief:hover { border-color: var(--zweit); color: #fff; }
.er-ansicht { display: inline-flex; gap: 3px; padding: 3px; border-radius: 13px; border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(0, 0, 0, .25); }
.er-ansicht button { padding: 6px 11px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; color: rgba(var(--hell-rgb), .65); background: transparent; transition: color .2s, background .2s; }
.er-ansicht button.an { color: #fff; background: linear-gradient(135deg, rgba(176, 107, 255, .45), rgba(var(--zweit-rgb), .3)); box-shadow: 0 0 14px rgba(176, 107, 255, .3); }
.er-stati { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.er-status {
  --c: #b06bff;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .04em; color: rgba(var(--hell-rgb), .75);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: rgba(0, 0, 0, .2); transition: transform .2s, background .2s, color .2s;
}
.er-status span { padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .08); }
.er-status:hover { transform: translateY(-1px); color: #fff; }
.er-status.an { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
.er-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.er-treffer { display: inline-block; min-width: 26px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; text-align: center; font: 600 12px/1.4 ui-monospace, Consolas, monospace; color: #fff; background: rgba(176, 107, 255, .3); }
.er-zurueck { font-size: 13px; color: var(--zweit); text-decoration: none; }
.er-zurueck:hover { text-decoration: underline; }

/* Die Ereignisse — gemeinsame Teile */
.er-liste { margin-top: 12px; }
.er-karte {
  position: relative; display: flex; text-decoration: none; color: inherit;
  animation: erRein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
}
.er-karte.er-rein { animation: erRein .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.er-karte[hidden] { display: none; }
.er-bild {
  position: relative; display: grid; place-items: center; overflow: hidden; flex: none;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 30%, rgba(176, 107, 255, .2)), rgba(0, 0, 0, .65));
}
.er-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 45%, rgba(0, 0, 0, .55)); }
.er-bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.er-bildzeichen { font-size: 44px; color: #d6b4ff; filter: drop-shadow(0 0 16px rgba(176, 107, 255, .8)); animation: erZucken 4s ease-in-out infinite; }
.er-zustand {
  position: absolute; z-index: 1; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: .08em; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
}
.er-licht { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: erBlinken 1.8s ease-in-out infinite; }
.er-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; }
.er-deckname { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; letter-spacing: .06em; color: #d6b4ff; }
.er-titel { font-size: 18px; font-weight: 700; line-height: 1.25; color: #fff; }
.er-satz { font-size: 13px; line-height: 1.5; color: rgba(var(--hell-rgb), .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.er-fakten { display: flex; flex-wrap: wrap; gap: 5px; }
.er-fakten span { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: rgba(var(--hell-rgb), .8); border: 1px solid rgba(176, 107, 255, .2); background: rgba(176, 107, 255, .06); }
.er-fuss { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(var(--gold-rgb), .1); font-size: 11.5px; color: rgba(var(--hell-rgb), .45); }
.er-wer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-pfeil { margin-left: auto; color: #d6b4ff; transition: transform .3s; }

/* Zeitleiste: eine Linie links, je Ereignis eine Datumsmarke */
.er-liste.zeitleiste { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 78px; }
.er-liste.zeitleiste::before {
  content: ''; position: absolute; left: 32px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #ff7ae0, #b06bff 40%, rgba(176, 107, 255, .1));
  transform-origin: top; animation: erLinie 1.2s cubic-bezier(.2, .8, .2, 1) backwards;
}
.er-liste.zeitleiste .er-karte {
  border-radius: 18px; border: 1px solid rgba(176, 107, 255, .2); overflow: visible;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 8%, rgba(var(--flaeche-rgb), .94)), rgba(var(--kopf-rgb), .95));
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}
.er-liste.zeitleiste .er-karte::after {
  content: ''; position: absolute; left: -24px; top: 34px; width: 24px; height: 2px;
  background: linear-gradient(90deg, rgba(176, 107, 255, .7), transparent);
}
.er-liste.zeitleiste .er-marke {
  position: absolute; left: -78px; top: 10px; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 52px; border-radius: 16px; z-index: 1;
  border: 1px solid color-mix(in srgb, var(--c) 55%, rgba(176, 107, 255, .4)); background: rgba(var(--kopf-rgb), .98);
  box-shadow: 0 0 0 4px rgba(var(--kopf-rgb), .9), 0 0 16px -2px rgba(176, 107, 255, .55);
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s;
}
.er-markentag { font: 700 20px/1 ui-monospace, Consolas, monospace; color: #fff; }
.er-markenmonat { font: 10px/1.4 ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .5); }
.er-liste.zeitleiste .er-bild { width: 220px; border-radius: 18px 0 0 18px; }
.er-liste.zeitleiste .er-karte:hover { transform: translateX(6px); border-color: rgba(176, 107, 255, .55); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .95), 0 0 24px -10px rgba(176, 107, 255, .7); }
.er-liste.zeitleiste .er-karte:hover .er-marke { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(var(--kopf-rgb), .9), 0 0 24px rgba(176, 107, 255, .9); }

/* Karten */
.er-liste.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.er-liste.raster .er-karte {
  flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid rgba(176, 107, 255, .18);
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb), .94), rgba(var(--kopf-rgb), .97));
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}
.er-liste.raster .er-karte::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), rgba(176, 107, 255, .18), transparent 70%);
}
.er-liste.raster .er-karte:hover { transform: translateY(-6px); border-color: rgba(176, 107, 255, .55); box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .95), 0 0 0 1px rgba(176, 107, 255, .25); }
.er-liste.raster .er-karte:hover::before { opacity: 1; }
.er-liste.raster .er-bild { aspect-ratio: 16 / 9; width: 100%; }
.er-liste.raster .er-marke {
  position: absolute; z-index: 2; right: 10px; top: 10px; display: flex; align-items: baseline; gap: 4px; padding: 4px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .15);
}
.er-liste.raster .er-markentag { font-size: 13px; }
.er-liste .er-karte:hover .er-bild img { transform: scale(1.08); filter: saturate(1.05); }
.er-liste .er-karte:hover .er-pfeil { transform: translateX(5px); }

@keyframes erRein { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes erAuf { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes erZeichnen { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes erLinie { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes erLive { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 224, .7); } 100% { box-shadow: 0 0 0 8px rgba(255, 122, 224, 0); } }
@keyframes erBlinken { 50% { opacity: .35; } }
@keyframes erBlitz { 0%, 88%, 100% { opacity: .04; } 90% { opacity: .14; } 92% { opacity: .05; } 94% { opacity: .12; } }
@keyframes erZucken { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-2px, 1px) rotate(-6deg); } 91% { transform: translate(2px, -1px) rotate(5deg); } }

@media (max-width: 900px) {
  .er-held { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .er-held { padding: 20px 16px; }
  .er-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .er-werkzeuge { position: static; }
  .er-liste.zeitleiste { padding-left: 0; }
  .er-liste.zeitleiste::before { display: none; }
  .er-liste.zeitleiste .er-karte { flex-direction: column; overflow: hidden; }
  .er-liste.zeitleiste .er-karte::after { display: none; }
  .er-liste.zeitleiste .er-marke { left: auto; right: 10px; top: 10px; height: auto; width: auto; flex-direction: row; gap: 4px; padding: 4px 9px; border-radius: 999px; box-shadow: none; background: rgba(0, 0, 0, .55); }
  .er-liste.zeitleiste .er-markentag { font-size: 13px; }
  .er-liste.zeitleiste .er-bild { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
  .er-liste.raster { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .er-held::before, .er-kennzahl, .er-seismo, .er-ausschlag, .er-live, .er-karte, .er-bildzeichen, .er-licht, .er-liste.zeitleiste::before { animation: none !important; }
  .er-stift { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Die bewegte Schicht — Spiral Hotel (V 2.0), Red Cycle (V 3.0),
   Codebreaker und Toter Briefkasten; vorbereitet von welt3.js.
   Die Tabellenzeilen leuchten nur in Hotel und Red Cycle — im
   Codebreaker haben die Tafeln ihre eigene Gestaltung.
     .v3-atmo     aufsteigende Funken und kreisende Lichtkegel
     .v3-held     der Seitenkopf: laufender Streifen, Glanz, Wappen
     .v3-warten   wartet unten auf seinen Auftritt, .v3-da fährt ein
     .v3-licht    Lichtfleck am Zeiger, .v3-neigt neigt sich zum Zeiger
   ═══════════════════════════════════════════════════════════════════ */
.v3-atmo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.v3-atmo i {
  position: absolute; left: var(--x); bottom: -24px; width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(var(--gold-rgb), .95); box-shadow: 0 0 8px rgba(var(--gold-rgb), .9), 0 0 18px rgba(var(--zweit-rgb), .45);
  opacity: 0; animation: v3Funke var(--t) linear var(--v) infinite;
}
.welt-redcycle .v3-atmo i { background: #ff8a4a; box-shadow: 0 0 8px rgba(255, 106, 48, .95), 0 0 20px rgba(200, 26, 48, .7); }
.v3-kegel {
  position: absolute; left: 50%; top: 30%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 34deg, rgba(var(--gold-rgb), .05) 44deg, transparent 56deg,
              transparent 190deg, rgba(var(--zweit-rgb), .045) 204deg, transparent 220deg);
  animation: v3Kreisen 110s linear infinite;
}
.v3-kegel.k2 { top: 80%; animation-duration: 160s; animation-direction: reverse; opacity: .8; }
.welt-redcycle .v3-kegel { background: conic-gradient(from 0deg, transparent 0deg 34deg, rgba(200, 26, 48, .07) 44deg, transparent 58deg,
              transparent 190deg, rgba(var(--gold-rgb), .04) 204deg, transparent 220deg); }

/* ── Der Seitenkopf ─────────────────────────────────────────────── */
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held {
  overflow: hidden; border-color: rgba(var(--gold-rgb), .34);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -32px rgba(0, 0, 0, 1), 0 0 70px -36px rgba(var(--gold-rgb), .8);
}
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .stripe {
  height: 5px; background-size: 220% 100% !important; animation: v3Streifen 7s linear infinite;
}
body.luxus.edel.welt-hotel .v3-held > .stripe {
  background-image: linear-gradient(90deg, var(--gold), #fff1c9, var(--zweit), var(--gold), #fff1c9, var(--gold)) !important;
}
body.luxus.edel.welt-redcycle .v3-held > .stripe {
  background-image: linear-gradient(90deg, rgba(var(--blut-rgb), 1), var(--gold), #ff8a4a, rgba(var(--blut-rgb), 1), var(--gold), rgba(var(--blut-rgb), 1)) !important;
}
/* Ein Lichtschein wischt in Abständen über den Kopf */
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held::before {
  content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; height: auto; border-radius: 0; opacity: 1; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), rgba(var(--gold-rgb), .08), transparent);
  transform: skewX(-18deg); animation: v3Wisch 8s ease-in-out 1.2s infinite; pointer-events: none;
}
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .fade { position: relative; z-index: 1; padding: 30px 230px 30px 32px !important; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held h1 {
  font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; margin-top: 8px !important;
  background-size: 220% auto; animation: v3Glanz 9s linear infinite;
}
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held .seal { display: inline-flex; align-items: center; gap: 10px; animation: v3Siegel .9s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held .seal::before {
  content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); transform-origin: left;
  animation: v3Linie 1s cubic-bezier(.2, .8, .2, 1) .3s backwards;
}
/* Das Wappen des Hauses schwebt rechts im Kopf */
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .fade::after {
  content: ''; position: absolute; right: 36px; top: 50%; width: 150px; height: 150px; margin-top: -75px;
  background: center / contain no-repeat; opacity: .22; pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(var(--gold-rgb), .6));
  animation: v3Wappen 7s ease-in-out infinite;
}
body.luxus.edel.welt-hotel .v3-held > .fade::after { background-image: url('logo-spiral.png'); }
body.luxus.edel.welt-redcycle .v3-held > .fade::after { background-image: url('logo-redcycle.png'); filter: drop-shadow(0 0 22px rgba(200, 26, 48, .7)); }
/* Im Hotel fächern sich dahinter feine Art-déco-Strahlen auf */
body.luxus.edel.welt-hotel .v3-held > .fade::before {
  content: ''; position: absolute; right: -40px; top: 50%; width: 360px; height: 360px; margin-top: -180px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(var(--gold-rgb), .09) 0deg 2deg, transparent 2deg 12deg);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: v3Kreisen 80s linear infinite;
}
/* Im Red Cycle glimmt dahinter Glut */
body.luxus.edel.welt-redcycle .v3-held > .fade::before {
  content: ''; position: absolute; right: 0; top: 50%; width: 320px; height: 320px; margin-top: -160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(200, 26, 48, .28), rgba(255, 106, 48, .08) 45%, transparent 70%);
  animation: v3Glut 4.5s ease-in-out infinite;
}

/* ── Kacheln: neigen sich, leuchten, Zahlen glühen ─────────────── */
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-neigt {
  transition: transform .18s ease-out, border-color .3s, box-shadow .3s; transform-style: preserve-3d; will-change: transform;
}
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-neigt:hover {
  border-color: rgba(var(--gold-rgb), .5);
  box-shadow: 0 24px 46px -22px rgba(0, 0, 0, 1), 0 0 30px -10px rgba(var(--gold-rgb), .55);
}
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .type .num { text-shadow: 0 0 18px rgba(var(--gold-rgb), .45); transition: transform .3s; display: inline-block; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .type:hover .num { transform: scale(1.12); }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .type > div > span:first-child { display: inline-block; transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .type:hover > div > span:first-child { transform: scale(1.25) rotate(-8deg); }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-licht:hover {
  background-image:
    radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), rgba(var(--gold-rgb), .14), transparent 65%),
    linear-gradient(180deg, rgba(var(--gold-rgb), .06), rgba(var(--flaeche-rgb), 0) 40%);
}

/* ── Tabellen, Abschnitte, Ausklapper, leere Flächen ───────────── */
body.luxus.edel:is(.welt-hotel, .welt-redcycle) .panel table tbody tr { transition: background .2s, box-shadow .2s; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle) .panel table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
body.luxus.edel:is(.welt-hotel, .welt-redcycle) .panel table tbody tr:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb), .1), rgba(var(--gold-rgb), .02)); }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .sec-title::after { transform-origin: left; animation: v3Linie 1.1s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) details.panel[open] > :not(summary) { animation: v3Auf .45s cubic-bezier(.2, .8, .2, 1) backwards; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .panel.empty .ico { display: inline-block; animation: v3Schweben 4s ease-in-out infinite; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .chip { transition: transform .2s, border-color .2s, box-shadow .2s; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(var(--gold-rgb), .7); }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .btn-ghost { transition: border-color .2s, color .2s, background .2s, transform .2s, box-shadow .2s; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .btn-ghost:hover { transform: translateY(-1px); box-shadow: 0 0 18px -6px rgba(var(--zweit-rgb), .6); }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .btn-primary { animation: v3Knopf 4s ease-in-out infinite; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .meldung { animation: v3Meldung .6s cubic-bezier(.2, 1.3, .4, 1) backwards; }

/* ── Einfahren beim Scrollen ───────────────────────────────────── */
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-warten { opacity: 0 !important; transform: translateY(28px) scale(.98) !important; animation: none !important; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-da { animation: v3Ein .8s cubic-bezier(.2, .8, .2, 1) var(--v3d, 0ms) backwards !important; }

/* ── Red Cycle: Hausordnung — römische Ziffern als Siegel ─────── */
body.luxus.edel.welt-redcycle .regelwerk { counter-reset: regel; }
body.luxus.edel.welt-redcycle .regel { counter-increment: regel; position: relative; padding-left: 94px; overflow: hidden; }
body.luxus.edel.welt-redcycle .regel::before {
  content: counter(regel, upper-roman); position: absolute; left: 24px; top: 22px; inset-inline-end: auto; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; opacity: 1; background: radial-gradient(circle at 35% 30%, rgba(200, 26, 48, .5), rgba(60, 6, 12, .9));
  border: 1px solid rgba(var(--gold-rgb), .55); font: 700 17px/1 Georgia, serif; color: var(--gold-hell);
  box-shadow: 0 0 0 4px rgba(200, 26, 48, .12), 0 0 22px rgba(200, 26, 48, .45); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s;
}
body.luxus.edel.welt-redcycle .regel:hover::before { transform: rotate(-12deg) scale(1.08); box-shadow: 0 0 0 6px rgba(200, 26, 48, .18), 0 0 30px rgba(200, 26, 48, .7); }
body.luxus.edel.welt-redcycle .regel:hover { transform: translateX(4px); }
body.luxus.edel.welt-redcycle .regel { transition: border-color .25s, background .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
body.luxus.edel.welt-redcycle .regel-fuss { animation: v3Glanz 9s linear infinite; }

/* ── Haus-Seiten: Bilder atmen, der Leitsatz glüht ─────────────── */
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .haus-bild.gross img { animation: v3Zoom 22s ease-in-out infinite alternate; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .haus-titel { position: relative; display: inline-block; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .haus-titel::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--zweit), transparent); transform-origin: left;
  animation: v3Linie 1.2s cubic-bezier(.2, .8, .2, 1) .3s backwards;
}
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .club-leitsatz { position: relative; }
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .club-satz-gross {
  background: linear-gradient(100deg, #fff 10%, var(--gold-hell) 45%, var(--zweit) 70%, #fff 90%); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: v3Glanz 10s linear infinite;
}

/* ── Speisekarte: Ornamente wachsen, der Titel schimmert ───────── */
body.luxus.edel.welt-redcycle .karte-blatt { position: relative; overflow: hidden; }
body.luxus.edel.welt-redcycle .karte-blatt::before {
  content: ''; position: absolute; inset: 0 auto 0 -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(var(--gold-rgb), .06), transparent); transform: skewX(-18deg);
  animation: v3Wisch 9s ease-in-out 1s infinite;
}
body.luxus.edel.welt-redcycle .karte-zier { transform-origin: center; animation: v3Linie 1.4s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
body.luxus.edel.welt-redcycle .karte-zier-links { transform-origin: right; }
body.luxus.edel.welt-redcycle .karte-zier-rechts { transform-origin: left; }
body.luxus.edel.welt-redcycle .karte-titel {
  background: linear-gradient(100deg, var(--champagner) 20%, #fff 40%, var(--gold) 55%, var(--champagner) 75%); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: v3Glanz 8s linear infinite;
}
body.luxus.edel.welt-redcycle .karte-stadt { animation: v3Atmen 4s ease-in-out infinite; }
body.luxus.edel.welt-redcycle .karte-stueck:hover .karte-bild { box-shadow: 0 0 26px -6px rgba(var(--gold-rgb), .7); }

@keyframes v3Funke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(34px, -52vh) scale(1); } 85% { opacity: .55; } 100% { transform: translate(-24px, -108vh) scale(.35); opacity: 0; } }
@keyframes v3Kreisen { to { transform: rotate(360deg); } }
@keyframes v3Streifen { to { background-position: 220% 0; } }
@keyframes v3Wisch { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes v3Glanz { to { background-position: 220% center; } }
@keyframes v3Siegel { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; } }
@keyframes v3Linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v3Wappen { 0%, 100% { transform: translateY(0) rotate(-3deg); opacity: .2; } 50% { transform: translateY(-10px) rotate(3deg); opacity: .3; } }
@keyframes v3Glut { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes v3Auf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes v3Schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes v3Knopf { 0%, 100% { box-shadow: 0 8px 26px -10px rgba(var(--gold-rgb), .9), 0 0 0 1px rgba(255, 255, 255, .06) inset; } 50% { box-shadow: 0 10px 30px -8px rgba(var(--gold-rgb), 1), 0 0 22px -4px rgba(var(--zweit-rgb), .5), 0 0 0 1px rgba(255, 255, 255, .08) inset; } }
@keyframes v3Meldung { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes v3Ein { from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v3Zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes v3Atmen { 50% { opacity: .55; letter-spacing: .3em; } }

@media (max-width: 760px) {
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .fade { padding: 24px 18px !important; }
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .fade::after { width: 90px; height: 90px; margin-top: -45px; right: 12px; top: 40%; opacity: .12; }
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .fade::before { display: none; }
  body.luxus.edel.welt-redcycle .regel { padding-left: 74px; }
  body.luxus.edel.welt-redcycle .regel::before { left: 16px; width: 42px; height: 42px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-atmo { display: none; }
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .stripe, body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held::before,
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held h1, body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held .seal,
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held .seal::before, body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .fade::after,
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-held > .fade::before, body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .btn-primary,
  body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .haus-bild.gross img, body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .club-satz-gross,
  body.luxus.edel.welt-redcycle .karte-blatt::before, body.luxus.edel.welt-redcycle .karte-titel, body.luxus.edel.welt-redcycle .karte-stadt,
  body.luxus.edel.welt-redcycle .regel-fuss, body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .panel.empty .ico { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Datenbank (index.php) — Umlaufbahnen, Scanlinie, Bestand je Rubrik.
   Die Karten unten behalten Größe und Vorschaubild; sie bekommen nur
   Licht und Bewegung dazu.
   ═══════════════════════════════════════════════════════════════════ */
.db2-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c, #888) 10%, transparent) 70%, color-mix(in srgb, var(--c, #888) 35%, transparent) 99%, transparent);
  animation: db2Scan 7s cubic-bezier(.5, 0, .5, 1) 1s infinite; opacity: 0;
}
.db2-orbit { position: relative; flex: none; width: 92px; height: 92px; display: grid; place-items: center; }
.db2-orbit .db-wappen { position: relative; z-index: 1; }
.db2-bahn { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c, #888) 40%, transparent); animation: db2Kreisen 14s linear infinite; }
.db2-bahn.b2 { inset: -10px; border-style: solid; border-color: color-mix(in srgb, var(--c, #888) 18%, transparent) transparent; animation-duration: 22s; animation-direction: reverse; }
.db2-bahn i { position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--c, var(--gold)); box-shadow: 0 0 10px var(--c, var(--gold)); }
.db2-bahn.b2 i { top: auto; bottom: -4px; background: var(--zweit); box-shadow: 0 0 10px var(--zweit); }
.db-kopf .db-kennzahl { animation: db2Rein .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; position: relative; overflow: hidden; }
.db-kopf .db-kennzahl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--c, var(--gold)), transparent); transform-origin: left;
  animation: db2Wachsen 1s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 250ms) backwards;
}
.db-kopf .db-kennzahl:hover strong { text-shadow: 0 0 14px rgba(var(--gold-rgb), .6); }

/* Bestand je Rubrik */
.db2-bestand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 0 26px 22px; }
.db2-bestandtitel { flex: none; font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .45); }
.db2-band { flex: 1; display: flex; gap: 3px; height: 22px; }
.db2-teil {
  position: relative; min-width: 26px; border-radius: 7px; overflow: hidden; text-decoration: none;
  background: color-mix(in srgb, var(--c) 32%, rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  transform-origin: left; animation: db2Wachsen .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.db2-teil span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 7px; font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; }
.db2-teil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(-100%); animation: db2Glanz 4s ease-in-out 1.4s infinite; }
.db2-teil:hover { transform: translateY(-2px); filter: brightness(1.2); box-shadow: 0 6px 16px -6px var(--c); }
.db2-teil.an { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 0 18px -4px var(--c); }

/* Werkzeugleiste und Marken */
.db-werkzeuge.klebt { border-image: none; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(var(--zweit-rgb), .12), 0 0 24px -12px rgba(var(--zweit-rgb), .5); }
.db-suchfeld .input { transition: border-color .2s, box-shadow .3s, background .2s; }
.db-suchfeld .input:focus { box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .16), 0 0 26px -6px rgba(var(--zweit-rgb), .6); }
.db-chips .db-chip { animation: db2Rein .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.db-chips .db-chip:nth-child(2) { animation-delay: .05s; } .db-chips .db-chip:nth-child(3) { animation-delay: .1s; }
.db-chips .db-chip:nth-child(4) { animation-delay: .15s; } .db-chips .db-chip:nth-child(5) { animation-delay: .2s; }
.db-chips .db-chip:nth-child(n+6) { animation-delay: .25s; }
.db-chips .db-chip.an { animation: db2Rein .45s cubic-bezier(.2, .8, .2, 1) backwards, db2Puls 2.8s ease-in-out 1s infinite; }
.db-treffer { animation: db2Pop .5s cubic-bezier(.2, 1.5, .4, 1) .3s backwards; }

/* Karten: gleiche Größe, mehr Licht */
.db-bild::after {
  content: ''; position: absolute; inset: 0 auto 0 -70%; width: 50%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), color-mix(in srgb, var(--c, #fff) 20%, transparent), transparent);
  transform: skewX(-18deg); transition: left .8s cubic-bezier(.2, .8, .2, 1);
}
.db-karte:hover .db-bild::after { left: 130%; }
.db-karte:hover { box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 1), 0 0 0 1px color-mix(in srgb, var(--c, #888) 25%, transparent) inset, 0 0 32px -12px var(--c, var(--gold)); }
.db-karte:hover .db-zeichen { animation: db2Schweben 2.4s ease-in-out infinite; opacity: .5; }
.db-karte .db-pfeil { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.db-karte:hover .db-pfeil { transform: translateX(5px); }

@keyframes db2Scan { 0% { transform: translateY(-120px); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateY(260px); opacity: .9; } 61%, 100% { transform: translateY(260px); opacity: 0; } }
@keyframes db2Kreisen { to { transform: rotate(360deg); } }
@keyframes db2Rein { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes db2Wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes db2Glanz { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@keyframes db2Puls { 50% { box-shadow: 0 0 0 3px rgba(var(--zweit-rgb), .14), 0 0 18px -4px rgba(var(--zweit-rgb), .55); } }
@keyframes db2Pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes db2Schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 640px) {
  .db2-orbit { width: 74px; height: 74px; }
  .db2-bestand { flex-direction: column; align-items: stretch; padding: 0 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .db2-scan, .db2-bahn, .db-kopf .db-kennzahl, .db-kopf .db-kennzahl::after, .db2-teil, .db2-teil::after,
  .db-chips .db-chip, .db-treffer, .db-karte:hover .db-zeichen { animation: none !important; }
}

/* ── Bewegte Schicht: Codebreaker und Toter Briefkasten ─────────────
   Dieselben Effekte wie in Hotel und Red Cycle, in den eigenen Tönen:
   im Codebreaker kreist im Kopf ein Radar (sein Hintergrund: .cb-hg),
   im Briefkasten violetter Staub und ein pulsierender Siegelring.
   Seiten mit eigenem Kopf behalten ihn — darüber wischt nur Licht.  */
.welt-briefkasten .v3-atmo i { background: rgba(var(--zweit-rgb), .95); box-shadow: 0 0 10px rgba(var(--gold-rgb), .95), 0 0 20px rgba(var(--zweit-rgb), .5); }
.welt-briefkasten .v3-atmo i:nth-of-type(4n) { background: #fff; }

body.luxus.edel.welt-codebreaker .v3-held > .stripe {
  background-image: linear-gradient(90deg, var(--gold), #5ef0ff, var(--zweit), var(--gold), #5ef0ff, var(--gold)) !important;
}
body.luxus.edel.welt-briefkasten .v3-held > .stripe {
  background-image: linear-gradient(90deg, var(--gold), var(--zweit), #fff, var(--gold), var(--zweit), var(--gold)) !important;
}
body.luxus.edel.welt-codebreaker .v3-held > .fade::after { background-image: url('logo.png'); filter: drop-shadow(0 0 22px rgba(var(--gold-rgb), .85)); }
body.luxus.edel.welt-briefkasten .v3-held > .fade::after { background-image: url('logo-briefkasten.png'); filter: drop-shadow(0 0 22px rgba(139, 61, 255, .85)); }
/* Codebreaker: ein Radar kreist hinter dem Wappen */
body.luxus.edel.welt-codebreaker .v3-held > .fade::before {
  content: ''; position: absolute; right: -10px; top: 50%; width: 300px; height: 300px; margin-top: -150px; border-radius: 50%; pointer-events: none;
  background:
    conic-gradient(from 0deg, rgba(94, 240, 255, .22), rgba(var(--gold-rgb), .06) 60deg, transparent 100deg),
    repeating-radial-gradient(circle, transparent 0 34px, rgba(var(--gold-rgb), .14) 34px 35px);
  mask-image: radial-gradient(circle, #000 55%, transparent 71%); -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  animation: v3Kreisen 6s linear infinite;
}
/* Briefkasten: ein Siegelring pulsiert hinter dem Wappen */
body.luxus.edel.welt-briefkasten .v3-held > .fade::before {
  content: ''; position: absolute; right: 6px; top: 50%; width: 260px; height: 260px; margin-top: -130px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(139, 61, 255, .28), rgba(213, 140, 255, .08) 45%, transparent 70%);
  box-shadow: 0 0 0 1px rgba(213, 140, 255, .25) inset;
  animation: v3Glut 4s ease-in-out infinite;
}

/* Eigene Köpfe: ein Lichtschein wischt darüber, der Rand glimmt */
.v3-wisch { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.v3-wisch::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .06), rgba(var(--gold-rgb), .1), transparent);
  transform: skewX(-18deg); mix-blend-mode: screen; animation: v3Wisch 9s ease-in-out 1.5s infinite;
}
body.luxus.edel > .wrap > .v3-kopf { animation: cbEin .5s cubic-bezier(.2, .8, .3, 1) both, v3Rand 6s ease-in-out 1s infinite; }

@keyframes v3Rand {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 50px -30px rgba(0, 0, 0, .95); }
  50% { box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 50px -30px rgba(0, 0, 0, .95), 0 0 60px -28px rgba(var(--gold-rgb), .9); }
}

@media (prefers-reduced-motion: reduce) {
  .v3-wisch::before, body.luxus.edel > .wrap > .v3-kopf,
  body.luxus.edel.welt-codebreaker .v3-held > .fade::before, body.luxus.edel.welt-briefkasten .v3-held > .fade::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — Überschriften in Frontage Condensed Bold
   Gilt für die Überschriften innerhalb der Seiten (h1–h4 und die
   Abschnittstitel), nicht für Kopf und Menü. Die Schrift kennt keine
   Emojis; die fallen auf die übliche Schrift zurück.
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Frontage Condensed';
  src: url('schrift/Frontage-Condensed-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
body.welt-codebreaker .wrap :is(h1, h2, h3, h4, .sec-title) {
  font-family: 'Frontage Condensed', var(--serif, ui-sans-serif), system-ui, sans-serif !important;
  font-weight: 700;
}
body.welt-codebreaker .wrap h1 { letter-spacing: .03em; }
body.welt-codebreaker .wrap :is(h2, h3, h4) { letter-spacing: .04em; }
body.welt-codebreaker .wrap .sec-title { font-size: 14px; letter-spacing: .12em; }

/* Toter Briefkasten — dieselben Überschriften wie im Codebreaker, dazu
   der Titel der zugeklappten Administration (Eingeschrieben) */
body.welt-briefkasten .wrap :is(h1, h2, h3, h4, .sec-title, .tba-titel) {
  font-family: 'Frontage Condensed', var(--serif, ui-sans-serif), system-ui, sans-serif !important;
  font-weight: 700;
}
body.welt-briefkasten .wrap h1 { letter-spacing: .03em; }
body.welt-briefkasten .wrap :is(h2, h3, h4) { letter-spacing: .04em; }
body.welt-briefkasten .wrap .sec-title { font-size: 14px; letter-spacing: .12em; }

/* Spiral Hotel und Red Cycle — ebenfalls die Überschriften des Codebreakers,
   dazu die Titel ihrer Formulare, Leistungen, Kalender und Karten */
body:is(.welt-hotel, .welt-redcycle) .wrap :is(h1, h2, h3, h4, .sec-title, .club-formular-titel,
  .club-leistung-titel, .hotel-kal-titel, .bankett-inhalt-titel, .extrakarte-titel) {
  font-family: 'Frontage Condensed', var(--serif, ui-sans-serif), system-ui, sans-serif !important;
  font-weight: 700;
}
body:is(.welt-hotel, .welt-redcycle) .wrap h1 { letter-spacing: .03em; }
body:is(.welt-hotel, .welt-redcycle) .wrap :is(h2, h3, h4) { letter-spacing: .04em; }
body:is(.welt-hotel, .welt-redcycle) .wrap .sec-title { font-size: 14px; letter-spacing: .12em; }

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — die Akten
   Der Inhalt jeder Akte steht wieder in der Schrift des übrigen
   Codebreakers (Frontage Condensed, siehe unten); die Überschriften der
   Abschnitte, die Feldbezeichnungen und die Sprungleiste im fetten
   Schnitt. OCR-A bleibt allein dem geschwärzten Aktenblatt, das als Bild
   entsteht (aktenbild.js) — und dem Toten Briefkasten.
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'OCR-A';
  src: url('schrift/OCR-A.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
body.welt-codebreaker :is(.ak-kopf, .detail) :is(h1, h2, h3, h4, .sec-title, .label),
body.welt-codebreaker .ak-sprung a {
  font-family: 'Frontage Condensed', var(--serif, ui-sans-serif), system-ui, sans-serif !important;
  font-weight: 700;
}
body.welt-codebreaker :is(.ak-kopf, .detail) .label { font-size: 12.5px; letter-spacing: .1em; }
/* Die Dateiauswahl ist Bedienung, kein Akteninhalt — ohne Großbuchstaben */
body.welt-codebreaker :is(.ak-kopf, .detail) input[type=file] { text-transform: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — Frontage Condensed für alle übrigen Texte
   Dieselbe Familie in zwei Schnitten: Regular für den Text, Bold für
   alles, was ohnehin fett gesetzt ist — Überschriften, Seitenreiter,
   Knöpfe, Zahlen. Das gilt auch für den Inhalt der Akten (siehe
   oben). Zeichen, die die Schrift nicht kennt (Emojis, Pfeile, ✕),
   kommen aus der bisherigen Schrift. Gilt auch für die Bereichswahl,
   die im Gewand des Codebreakers steht.
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Frontage Condensed';
  src: url('schrift/Frontage-Condensed-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
body.welt-codebreaker,
body.welt-codebreaker * {
  font-family: 'Frontage Condensed', var(--serif, ui-sans-serif), system-ui, sans-serif !important;
}
/* Die Seitenreiter im Kopf: wie die Überschriften, im fetten Schnitt */
body.welt-codebreaker .hauptnav .navlink { font-weight: 700; letter-spacing: .07em; }
/* Die Bereichswahl: Überschrift, Namen und Knöpfe im fetten Schnitt */
body.welt-codebreaker.wahlseite :is(h1, .wahl-name, .wahl-knopf) { font-weight: 700; letter-spacing: .05em; }

/* Die Akten stehen in Großbuchstaben — was schon drin steht genauso wie
   das, was man gerade einträgt (haus.js setzt es auch im Feld groß) */
body.welt-codebreaker :is(.ak-zurueck, .ak-kopf, .ak-sprung, .detail) { text-transform: uppercase; }
body.welt-codebreaker [data-grossschrift] :is(input:not([type=file]):not([type=search]), textarea) { text-transform: uppercase; }
body.welt-codebreaker :is(.ak-kopf, .detail) input[type=file] { font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — der Hintergrund (.cb-hg, gesetzt in lib/layout.php)
   Fast schwarz. Roter Rauch mit glimmenden Fäden oben links und unten,
   in der Mitte ein Band aus Punktzeilen wie ein gestörter Bildschirm,
   ein Raster aus weißen Punkten, flackernde Datenstriche, kleine
   Zeichenfetzen, rote Glut — und zum Rand hin wird es dunkel.
   ═══════════════════════════════════════════════════════════════════ */
.cb-hg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #030205; }
.cb-hg > * { position: absolute; }

/* Der Dunst in der Mitte: kühles Grau mit einem Hauch Rot */
.cb-dunst {
  inset: 0;
  background:
    radial-gradient(52% 30% at 50% 60%, rgba(50, 54, 72, .42), transparent 72%),
    radial-gradient(36% 26% at 44% 68%, rgba(96, 26, 46, .28), transparent 70%),
    radial-gradient(30% 22% at 66% 40%, rgba(70, 20, 34, .2), transparent 70%);
  animation: cbAtmen 16s ease-in-out infinite alternate;
}

/* Roter Rauch — weiche Wolken, die langsam treiben */
.cb-rauch {
  border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(214, 14, 40, .42), rgba(140, 6, 24, .14) 48%, transparent 80%);
  animation: cbRauch var(--t, 20s) ease-in-out infinite alternate;
}
.cb-rauch.r1 { left: 12%; top: -14%; width: 30vw; height: 42vh; rotate: -24deg; --t: 19s; }
.cb-rauch.r2 { left: 22%; top: 12%; width: 22vw; height: 26vh; rotate: 30deg; --t: 23s; opacity: .8; }
.cb-rauch.r3 { left: 2%; top: 30%; width: 18vw; height: 30vh; rotate: -10deg; --t: 27s; opacity: .55; }
.cb-rauch.r4 { left: 30%; top: 72%; width: 30vw; height: 36vh; rotate: 12deg; --t: 21s; opacity: .75; }
.cb-rauch.r5 { left: 54%; top: 26%; width: 26vw; height: 30vh; rotate: -8deg; --t: 29s; opacity: .35; }
.cb-rauch.r6 { left: 84%; top: 34%; width: 20vw; height: 34vh; rotate: 18deg; --t: 25s; opacity: .3; }

/* Glimmende Fäden im Rauch */
.cb-faeden { inset: 0; width: 100%; height: 100%; animation: cbTreiben 30s ease-in-out infinite alternate; }
.cb-faeden path {
  fill: none; stroke: #ff1834; stroke-width: 3.2; stroke-linecap: round; opacity: .75;
  stroke-dasharray: 150 46; animation: cbFaden 9s linear infinite, cbGlimmen 4.5s ease-in-out infinite;
}
.cb-faeden .f2 { stroke-width: 4.5; animation-delay: -2s, -1s; }
.cb-faeden .f3 { stroke-width: 2.6; animation-delay: -4s, -2.2s; }
.cb-faeden .f4 { stroke-width: 2.2; opacity: .55; animation-delay: -1s, -3s; }
.cb-faeden .f5 { stroke-width: 3.6; animation-delay: -3s, -.6s; }
.cb-faeden .f6 { stroke-width: 3; animation-delay: -5s, -1.8s; }
.cb-faeden .f7 { stroke-width: 2.4; opacity: .5; animation-delay: -2.5s, -2.7s; }
.cb-faeden .f8 { stroke-width: 2; opacity: .4; animation-delay: -6s, -.3s; }

/* Rauchschwaden: breite rote Bahnen, verwirbelt (Filter in lib/layout.php) */
.cb-faeden .cb-schwaden path { fill: none; stroke: rgba(196, 10, 34, .55); stroke-width: 26; stroke-linecap: round; stroke-dasharray: none; animation: cbSchwaden 8s ease-in-out infinite; opacity: 1; }
.cb-faeden .cb-schwaden path.dick { stroke-width: 44; stroke: rgba(170, 8, 30, .5); animation-delay: -3s; }

/* Das Band aus Punktzeilen */
.cb-raster {
  left: 3%; right: 3%; top: 24%; height: 66%;
  background-image: radial-gradient(circle, rgba(176, 184, 206, .58) 0 .75px, transparent 1.2px);
  background-size: 4px 6px;
  mask-image: radial-gradient(ellipse 50% 46% at 50% 52%, #000 22%, rgba(0, 0, 0, .5) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 52%, #000 22%, rgba(0, 0, 0, .5) 60%, transparent 100%);
  animation: cbZeilen 12s linear infinite, cbFlackern 9s steps(1) infinite;
}
.cb-raster.rot {
  background-image: radial-gradient(circle, rgba(232, 46, 70, .55) 0 .75px, transparent 1.2px);
  mask-image: radial-gradient(ellipse 34% 30% at 34% 64%, #000 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 34% 30% at 34% 64%, #000 10%, transparent 100%);
  opacity: .7; animation: cbZeilen 12s linear infinite, cbFlackern 7s steps(1) -3s infinite;
}
/* Hellere Zeilen, die langsam durchs Band wandern */
.cb-baender {
  left: 5%; right: 5%; top: 28%; height: 58%;
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(196, 204, 226, .07) 22px 25px,
              transparent 25px 39px, rgba(196, 204, 226, .045) 39px 41px);
  mask-image: radial-gradient(ellipse 48% 44% at 50% 52%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 52%, #000 20%, transparent 100%);
  animation: cbBaender 18s linear infinite;
}

/* Das Raster aus weißen Punkten */
.cb-punkte {
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.3px, rgba(255, 255, 255, .28) 1.9px, transparent 3px);
  background-size: 14.83vw 26.57vh;
  background-position: 3.95vw -2.12vh;
  animation: cbFunkeln 5s ease-in-out infinite;
}

/* Datenstriche: kurz, gepunktet, flackernd */
.cb-striche { inset: 0; }
.cb-striche i {
  position: absolute; height: 3px; opacity: var(--o, .3);
  background: repeating-linear-gradient(90deg, rgba(204, 210, 226, .75) 0 2px, transparent 2px 3.5px);
  animation: cbStrich var(--t, 5s) steps(1) var(--v, 0s) infinite;
}
.cb-striche i:nth-child(5n) { background: repeating-linear-gradient(90deg, rgba(232, 60, 80, .6) 0 2px, transparent 2px 3.5px); }
.cb-striche i:nth-child(7n) { height: 2px; filter: blur(.4px); }

/* Zeichenfetzen */
.cb-zeichen { inset: 0; }
.cb-zeichen b {
  position: absolute; font-size: 9px; font-weight: 400; letter-spacing: .14em; white-space: nowrap;
  color: rgba(206, 212, 230, .5); text-shadow: 0 0 6px rgba(206, 212, 230, .35);
  animation: cbFetzen 6s steps(1) var(--v, 0s) infinite;
}
body.welt-codebreaker .cb-zeichen b { font-family: 'OCR-A', Consolas, monospace !important; }

/* Rote Glut */
.cb-glut { inset: 0; }
.cb-glut i {
  position: absolute; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
  background: #ff2a40; box-shadow: 0 0 8px 2px rgba(255, 34, 56, .85), 0 0 22px 4px rgba(200, 10, 30, .55);
  animation: cbGlut var(--t, 9s) ease-in-out var(--v, 0s) infinite alternate;
}

/* Zum Rand hin dunkel */
.cb-vignette {
  inset: 0;
  background: radial-gradient(ellipse 70% 66% at 50% 52%, transparent 30%, rgba(0, 0, 0, .62) 62%, rgba(0, 0, 0, .96) 100%);
}

@keyframes cbAtmen { from { opacity: .8; transform: scale(1); } to { opacity: 1; transform: scale(1.05); } }
@keyframes cbRauch {
  0%   { translate: 0 0; scale: 1; }
  50%  { translate: 3vw 2vh; scale: 1.12; }
  100% { translate: -2vw 4vh; scale: .94; }
}
@keyframes cbTreiben { from { transform: translate(0, 0); } to { transform: translate(-1.2%, 1.5%); } }
@keyframes cbFaden { to { stroke-dashoffset: -196; } }
@keyframes cbSchwaden { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes cbGlimmen { 0%, 100% { opacity: .35; } 45% { opacity: .9; } 55% { opacity: .55; } 70% { opacity: .95; } }
@keyframes cbZeilen { to { background-position: 0 60px; } }
@keyframes cbFlackern { 0% { opacity: 1; } 31% { opacity: .82; } 33% { opacity: 1; } 62% { opacity: .9; } 64% { opacity: .7; } 66% { opacity: 1; } }
@keyframes cbBaender { to { transform: translateY(41px); } }
@keyframes cbFunkeln { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes cbStrich {
  0%   { opacity: var(--o, .3); transform: translateX(0); }
  16%  { opacity: 0; }
  22%  { opacity: calc(var(--o, .3) + .3); transform: translateX(14px); }
  48%  { opacity: var(--o, .3); transform: translateX(0); }
  62%  { opacity: .04; transform: translateX(-9px); }
  70%  { opacity: var(--o, .3); transform: translateX(0); }
  86%  { opacity: calc(var(--o, .3) + .2); }
}
@keyframes cbFetzen { 0% { opacity: .55; } 30% { opacity: .1; } 34% { opacity: .7; } 70% { opacity: .35; } 74% { opacity: 0; } 80% { opacity: .6; } }
@keyframes cbGlut {
  0%   { transform: translate(0, 0); opacity: .35; }
  50%  { opacity: 1; }
  100% { transform: translate(18px, -26px); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-hg *, .cb-hg { animation: none !important; }
}
/* Im Codebreaker bleibt das Schwarz schwarz: weniger Körnung über dem Hintergrund */
body.welt-codebreaker:not(.wahlseite)::after { opacity: .022; }

/* Codebreaker: die Seitenreiter größer — auf schmaleren Schirmen etwas kleiner */
body.welt-codebreaker .hauptnav .navlink { font-size: 19px; letter-spacing: .045em; }
@media (max-width: 1180px) {
  body.welt-codebreaker .hauptnav .navlink { font-size: 18px; letter-spacing: .035em; }
}
@media (max-width: 820px) {
  body.welt-codebreaker .hauptnav .navlink { font-size: 16px; }
}
/* Start: die Begrüßung etwas kleiner als die übrigen Seitenköpfe */
body.luxus.edel.welt-codebreaker .v3-held h1.start-gruss { font-size: clamp(26px, 3.6vw, 40px); }

/* ═══════════════════════════════════════════════════════════════════
   Toter Briefkasten — Dateien, Botschaften, 24 Stunden
   Die Datei-Kacheln und der Fortschritt beim Hochladen, die Werkbank
   für Botschaften und der Player (briefkasten.js): das Bild des Toten
   Briefkastens, das beim Abspielen lebt — Zoom, glühende Augen, ein
   pulsierender Kasten, Glitches, eine Wellenform in Schwarzlicht.
   ═══════════════════════════════════════════════════════════════════ */
.tb-frist { margin: 8px 0 0; font-size: 12.5px; letter-spacing: .04em; color: rgba(var(--zweit-rgb), .85); }
.tb-rest { margin: 4px 0 0; font: 600 11px ui-monospace, Consolas, monospace; letter-spacing: .06em;
  color: rgba(var(--hell-rgb), .45); }

.tb-wegwahl { flex-wrap: wrap; }

/* Kacheln für Dateien und Botschaften */
.tb-dateikachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%; padding: 12px; text-align: center;
}
.tb-dateizeichen { font-size: 42px; line-height: 1; filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), .6)); }
.tb-dateiendung {
  padding: 2px 9px; border-radius: 999px; font: 700 10.5px ui-monospace, Consolas, monospace; letter-spacing: .14em;
  color: #fff; background: rgba(var(--gold-rgb), .35); border: 1px solid rgba(var(--gold-rgb), .55);
}
.tb-dateiname { max-width: 100%; font-size: 12px; color: rgba(var(--hell-rgb), .7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-umschlag.frisch .tb-dateikachel { animation: tbAufdecken .7s cubic-bezier(.2, .8, .3, 1) both; }
.tb-kachelplay {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: grid; place-items: center; border-radius: 50%; font-size: 17px; color: #fff; padding-left: 3px;
  background: rgba(20, 4, 44, .55); border: 1px solid rgba(214, 140, 255, .7);
  box-shadow: 0 0 22px rgba(176, 38, 255, .65), inset 0 0 12px rgba(176, 38, 255, .4);
  transition: transform .25s, box-shadow .25s;
}
.tb-umschlag:hover .tb-kachelplay, .tb-gesendetbotschaft:hover .tb-kachelplay {
  transform: scale(1.12); box-shadow: 0 0 34px rgba(176, 38, 255, .9), inset 0 0 14px rgba(176, 38, 255, .5);
}
.tb-gesendetbotschaft, .tb-gesendetdatei {
  position: relative; padding: 0; cursor: pointer; color: inherit; font: inherit; text-decoration: none;
}
.tb-gesendetdatei { display: grid; place-items: center; align-content: center; gap: 3px; }
.tb-gesendetdatei .tb-dateizeichen { font-size: 24px; }
.tb-gesendetdatei .tb-dateiendung { font-size: 8.5px; padding: 1px 6px; }
.tb-gesendetbotschaft .tb-kachelplay { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 11px; }

/* Die Datei im geöffneten Umschlag */
.tb-dateikarte {
  display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 18px 20px; border-radius: 14px;
  border: 1px solid rgba(var(--gold-rgb), .3);
  background: linear-gradient(120deg, rgba(var(--gold-rgb), .12), rgba(0, 0, 0, .35));
  animation: tbAufdecken .6s cubic-bezier(.2, .8, .3, 1) both;
}
.tb-dateikarte[hidden], .tb-spielerplatz[hidden] { display: none; }
.tb-dateikarte .tb-dateizeichen { font-size: 46px; }
.tb-dateiangaben { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-dateiangaben strong { font-size: 16px; overflow-wrap: anywhere; }
.tb-dateiangaben .mono { font-size: 12px; color: rgba(var(--hell-rgb), .55); }

/* Der Fortschritt beim Hochladen */
.tb-hochladen { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tb-hochladen[hidden] { display: none; }
.tb-hochladenbalken {
  flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(var(--gold-rgb), .3);
}
.tb-hochladenbalken i {
  display: block; width: 0; height: 100%; background: var(--knopf-verlauf);
  box-shadow: 0 0 16px rgba(var(--gold-rgb), .8); transition: width .25s ease;
}
.tb-hochladenzahl { min-width: 46px; text-align: right; font-size: 12px; color: rgba(var(--hell-rgb), .7); }
#tbDateiKnopf, #tbBotschaftKnopf, #tbProbeKnopf { margin-top: 12px; }
#tbDateiKnopf:disabled, #tbBotschaftKnopf:disabled, #tbProbeKnopf:disabled { opacity: .45; cursor: not-allowed; }

/* Die Werkbank der Botschaft */
.tb-botschafttext {
  min-height: 104px; resize: vertical; line-height: 1.6;
  font-family: 'OCR-A', 'OCR A Extended', Consolas, ui-monospace, monospace; font-size: 14px; letter-spacing: .02em;
}
.tb-botschaftzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.tb-zeichenzahl { font-size: 11.5px; color: rgba(var(--hell-rgb), .45); }
.tb-stimmen { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-stimme { position: relative; cursor: pointer; }
.tb-stimme input { position: absolute; opacity: 0; pointer-events: none; }
.tb-stimme > span {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .3);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.tb-stimme strong { font-size: 13px; letter-spacing: .04em; }
.tb-stimme em { font-style: normal; font-size: 11px; color: rgba(var(--hell-rgb), .5); }
.tb-stimme:hover > span { border-color: rgba(var(--gold-rgb), .55); transform: translateY(-1px); }
.tb-stimme input:checked + span {
  border-color: rgba(214, 140, 255, .8); background: linear-gradient(120deg, rgba(109, 40, 217, .45), rgba(176, 38, 255, .18));
  box-shadow: 0 0 22px -4px rgba(176, 38, 255, .8);
}
.tb-stimme input:focus-visible + span { outline: 2px solid var(--zweit); outline-offset: 2px; }
.tb-spielerplatz { margin-top: 14px; }

/* ── Der Player ──────────────────────────────────────────────────── */
.tbp-buehne {
  --pegel: 0; --musik: 0; --gx: 8px; --gy1: 30%; --gy2: 50%;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: 14px 14px 0 0; background: #05010d; user-select: none; -webkit-user-select: none;
  border: 1px solid rgba(139, 61, 255, .4); border-bottom: 0;
  box-shadow: 0 0 calc(16px + var(--pegel) * 46px) rgba(157, 0, 255, calc(.16 + var(--pegel) * .5));
  transition: box-shadow .12s linear;
}
.tbp-bildrahmen { position: absolute; inset: 0; transform-origin: 49% 42%; }
.tbp-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  filter: brightness(calc(.74 + var(--pegel) * .45 + var(--musik) * .18)) saturate(1.18) contrast(1.06);
}
.tbp-buehne:not(.spielt) .tbp-bildrahmen { animation: tbpAtmen 10s ease-in-out infinite alternate; }
.tbp-buehne.spielt .tbp-bildrahmen { animation: tbpZoom 45s cubic-bezier(.25, .1, .25, 1) forwards; }
@keyframes tbpAtmen { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes tbpZoom {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.17) translate(-1.4%, 1%); }
}
/* Die Glitch-Schichten: farbverschobene Streifen */
.tbp-geist { opacity: 0; mix-blend-mode: screen; }
.tbp-geist-a { filter: hue-rotate(-35deg) saturate(3) brightness(1.4); }
.tbp-geist-b { filter: hue-rotate(70deg) saturate(2.6) brightness(1.2); }
.tbp-buehne.glitch .tbp-geist { opacity: .8; clip-path: inset(var(--gy1) 0 var(--gy2) 0); }
.tbp-buehne.glitch .tbp-geist-a { transform: translateX(var(--gx)); }
.tbp-buehne.glitch .tbp-geist-b { transform: translateX(calc(var(--gx) * -1)) translateY(1px); }
.tbp-buehne.glitch .tbp-bild:first-child { transform: translateX(calc(var(--gx) * .25)); filter: brightness(1.15) saturate(1.5); }

/* Die Augen glühen, wenn die Stimme spricht */
.tbp-auge {
  position: absolute; top: 40.4%; width: 3.4%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  mix-blend-mode: screen; transform: translate(-50%, -50%) scale(calc(.55 + var(--pegel) * 1.3));
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 9%, rgba(222, 140, 255, .9) 20%,
              rgba(150, 40, 255, .5) 46%, transparent 70%);
  opacity: calc(.12 + var(--pegel) * 1.2);
}
.tbp-auge-l { left: 45.4%; }
.tbp-auge-r { left: 52.7%; }
/* Der Kasten rechts pulsiert mit der Musik, sein Ring dreht sich */
.tbp-kasten {
  position: absolute; left: 79.3%; top: 54%; width: 23%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(.94 + var(--musik) * .14)); mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(176, 38, 255, .45), rgba(90, 20, 200, .16) 46%, transparent 68%);
  opacity: calc(.18 + var(--musik) * 1.1);
}
.tbp-kasten::after {
  content: ''; position: absolute; inset: 6%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(214, 140, 255, .9) 10%, transparent 13% 30%,
              rgba(214, 140, 255, .7) 33%, transparent 36% 58%, rgba(214, 140, 255, .9) 61%, transparent 64% 100%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66% 69%, transparent 71%);
          mask: radial-gradient(circle, transparent 64%, #000 66% 69%, transparent 71%);
  opacity: .8;
}
.tbp-buehne.spielt .tbp-kasten::after { animation: tbpDrehen 9s linear infinite; }
@keyframes tbpDrehen { to { transform: rotate(360deg); } }
/* Die Stadt flackert */
.tbp-stadt {
  position: absolute; left: 62%; top: 4%; width: 38%; height: 32%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(40% 50% at 70% 60%, rgba(120, 60, 255, .35), transparent 70%);
  opacity: 0;
}
.tbp-buehne.spielt .tbp-stadt { animation: tbpFlackern 3.7s steps(1) infinite; }
@keyframes tbpFlackern { 0%, 100% { opacity: .2; } 12% { opacity: .55; } 14% { opacity: .1; } 47% { opacity: .4; } 49% { opacity: .15; } 80% { opacity: .5; } }

.tbp-welle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tbp-scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 45%, rgba(176, 38, 255, .07) 50%, transparent 55% 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .65));
  background-size: 100% 300%, auto, auto;
}
.tbp-buehne.spielt .tbp-scan { animation: tbpZeile 6s linear infinite; }
@keyframes tbpZeile { from { background-position: 0 100%, 0 0, 0 0; } to { background-position: 0 -200%, 0 0, 0 0; } }

.tbp-hud {
  position: absolute; top: 3.2%; display: inline-flex; align-items: center; gap: 7px; pointer-events: none;
  font: 700 clamp(8px, 1.15vw, 11px)/1 'OCR-A', 'OCR A Extended', Consolas, ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(225, 190, 255, .82);
  text-shadow: 0 0 8px rgba(176, 38, 255, .9);
}
.tbp-hud-l { left: 3%; }
.tbp-hud-r { right: 3%; }
.tbp-hud i { width: 7px; height: 7px; border-radius: 50%; background: #b026ff; box-shadow: 0 0 10px #b026ff; }
.tbp-buehne.spielt .tbp-hud i { background: #ff3df2; box-shadow: 0 0 10px #ff3df2; animation: tbpBlinken 1s steps(1) infinite; }
@keyframes tbpBlinken { 50% { opacity: .15; } }
.tbp-hud b { font-weight: 700; color: #f3e6ff; }

.tbp-untertitel {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: max-content; max-width: 88%;
  margin: 0; padding: 7px 14px; border-radius: 8px; pointer-events: none; text-align: center;
  font: 400 clamp(10px, 1.7vw, 16px)/1.5 'OCR-A', 'OCR A Extended', Consolas, ui-monospace, monospace;
  color: #f4e8ff; text-shadow: 0 0 10px rgba(176, 38, 255, .95), 0 0 2px #000;
  background: rgba(8, 0, 22, .55); border: 1px solid rgba(176, 38, 255, .35);
  transition: opacity .3s;
}
.tbp-untertitel:has(.tbp-text:empty) { opacity: 0; }
.tbp-zeiger { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: #d68cff; box-shadow: 0 0 8px #b026ff; animation: tbpBlinken .8s steps(1) infinite; }
.tbp-buehne:not(.spielt) .tbp-zeiger { display: none; }

.tbp-start {
  position: absolute; left: 50%; top: 50%; width: clamp(54px, 9vw, 84px); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; padding: 0;
  font-size: clamp(18px, 2.8vw, 28px); color: #fff;
  background: radial-gradient(circle, rgba(60, 10, 120, .65), rgba(12, 2, 30, .75));
  border: 1px solid rgba(214, 140, 255, .8);
  box-shadow: 0 0 30px rgba(176, 38, 255, .75), inset 0 0 18px rgba(176, 38, 255, .5);
  transition: opacity .3s, transform .3s, box-shadow .3s;
}
.tbp-start span { padding-left: 4px; }
.tbp-buehne.fertig .tbp-start span { padding-left: 0; }
.tbp-start:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 46px rgba(176, 38, 255, .95), inset 0 0 20px rgba(176, 38, 255, .6); }
.tbp-start:focus-visible { outline: 2px solid #e9b8ff; outline-offset: 4px; }
.tbp-buehne.spielt .tbp-start { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }
.tbp-buehne.laedt .tbp-start { pointer-events: none; }
.tbp-buehne.laedt .tbp-start::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #e9b8ff; border-right-color: rgba(176, 38, 255, .7);
  animation: tbpDrehen .9s linear infinite;
}
.tbp-meldung {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); max-width: 86%; margin: 0;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; text-align: center;
  color: #ffd6f5; background: rgba(40, 0, 30, .75); border: 1px solid rgba(236, 72, 153, .5);
}
.tbp-meldung[hidden] { display: none; }

.tbp-leiste {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 0 0 14px 14px;
  border: 1px solid rgba(139, 61, 255, .4); border-top: 1px solid rgba(139, 61, 255, .25);
  background: linear-gradient(180deg, rgba(20, 6, 44, .95), rgba(6, 2, 14, .98));
  font: 600 11.5px ui-monospace, Consolas, monospace; color: rgba(225, 200, 255, .75);
}
.tbp-knopf {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; cursor: pointer; padding: 0;
  font-size: 11px; color: #fff; background: var(--knopf-verlauf, linear-gradient(110deg, #6d28d9, #8b3dff 50%, #c77dff));
  border: 0; box-shadow: 0 0 14px rgba(176, 38, 255, .6);
}
.tbp-balken { position: relative; flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tbp-balken i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #6d28d9, #b026ff, #e9b8ff);
  box-shadow: 0 0 10px #b026ff; }

.tbp-fenster .tbp-platz { margin-top: 12px; }

@media (max-width: 560px) {
  .tbp-hud-r { display: none; }
  .tb-gesendetzeile { grid-template-columns: 72px minmax(0, 1fr); }
  .tb-gesendetbild { width: 72px; height: 52px; }
  .tb-gesendetstand { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tbp-buehne .tbp-bildrahmen, .tbp-buehne.spielt .tbp-bildrahmen, .tbp-kasten::after,
  .tbp-buehne.spielt .tbp-stadt, .tbp-buehne.spielt .tbp-scan { animation: none !important; }
  .tbp-buehne.glitch .tbp-geist { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Anmeldung — die Wege hinein als Kacheln (login.php)
   Codebreaker mit seinem Logo und der Tote Briefkasten nebeneinander,
   auf dem Handy untereinander. Violettes Leuchten wie die beiden Logos.
   ═══════════════════════════════════════════════════════════════════ */
.login-rahmen { width: 100%; max-width: 560px; padding: 32px; text-align: center; }
.login-kacheln {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px;
}
.login-kacheln.einzeln { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin-left: auto; margin-right: auto; }
.login-kachel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 14px 14px; border-radius: 16px; text-decoration: none; color: inherit; overflow: hidden;
  border: 1px solid rgba(139, 61, 255, .45);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(139, 61, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(14, 6, 26, .92), rgba(5, 2, 10, .96));
  box-shadow: 0 0 24px -10px rgba(139, 61, 255, .8);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.login-kachel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 30%, rgba(214, 160, 255, .14) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0;
}
.login-kachel:hover, .login-kachel:focus-visible {
  transform: translateY(-3px); border-color: #b57bff; outline: none;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), 0 0 38px -8px rgba(139, 61, 255, 1);
}
.login-kachel:hover::after { opacity: 1; animation: loginGlanz 1.2s ease forwards; }
@keyframes loginGlanz { to { background-position: -40% 0; } }
.login-kachelbild { display: grid; place-items: center; width: 100%; height: 132px; }
.login-kachelbild img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 132px; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(139, 61, 255, .65));
  transition: transform .4s cubic-bezier(.2, .8, .3, 1), filter .4s;
}
.login-kachel-tb .login-kachelbild img { max-height: 104px; }
.login-kachel:hover .login-kachelbild img { transform: scale(1.05); filter: drop-shadow(0 0 22px rgba(170, 90, 255, .9)); }
.login-kachel strong { margin-top: 2px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #ecdcff; }
.login-kachelsatz { font-size: 11.5px; line-height: 1.45; color: rgba(232, 222, 255, .6); min-height: 2.9em; }
.login-kachelknopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; width: 100%;
  padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(110deg, #5865f2, #7a4dff); box-shadow: 0 0 18px -6px rgba(88, 101, 242, .9);
  transition: filter .2s;
}
.login-kachel:hover .login-kachelknopf { filter: brightness(1.12); }
@media (max-width: 520px) {
  .login-rahmen { padding: 26px 18px; }
  .login-kacheln { grid-template-columns: minmax(0, 1fr); }
  .login-kachelsatz { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .login-kachel, .login-kachel img { transition: none; }
  .login-kachel:hover::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Abwesenheit — der Wochenschnitt einer Person (Klick auf den Namen)
   Zwei Ringe für Abmelde- und Verspätet-Rate, darunter die letzten
   acht Wochen als Säulen: je Woche sieben Tage hoch.
   ═══════════════════════════════════════════════════════════════════ */
.aw-person.mit-raten { cursor: pointer; border-radius: 12px; transition: background .2s, box-shadow .2s; }
.aw-person.mit-raten:hover, .aw-person.mit-raten:focus-visible {
  outline: none; background: rgba(var(--gold-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3);
}
.aw-person.mit-raten:hover .aw-name { color: var(--gold-hell, #fff); }

.aw-ratenfenster { width: min(480px, 94vw); }
.aw-ratenkopf { display: flex; align-items: center; gap: 12px; }
.aw-ratenbild .aw-bild { width: 44px; height: 44px; }
.aw-ratenwer { flex: 1; min-width: 0; }
.aw-ratenwer .aw-fensterwer { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-ratenzu {
  width: 32px; height: 32px; flex: none; border-radius: 10px; cursor: pointer; font-size: 14px; color: inherit;
  border: 1px solid rgba(var(--gold-rgb), .3); background: rgba(0, 0, 0, .25);
}
.aw-ratenzu:hover { border-color: rgba(var(--gold-rgb), .7); }

.aw-ratenkarten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.aw-ratenkarte {
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 14px 10px 12px; border-radius: 16px;
  text-align: center; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), rgba(0, 0, 0, .2);
}
.aw-ratenring { width: 84px; height: 84px; transform: rotate(-90deg); }
.aw-ratenring circle { fill: none; stroke-width: 4.5; }
.aw-ratenring .grund { stroke: rgba(255, 255, 255, .08); }
.aw-ratenring .wert {
  stroke: var(--c); stroke-linecap: round; stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 4px var(--c)); transition: stroke-dasharray 1s cubic-bezier(.2, .8, .3, 1);
}
.aw-ratenprozent {
  position: absolute; top: 14px; left: 50%; width: 84px; height: 84px; margin-left: -42px;
  display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 13px; color: rgba(var(--hell-rgb), .6);
}
.aw-ratenprozent b { font-size: 22px; line-height: 1; color: #fff; }
.aw-ratentitel { margin-top: 4px; font-weight: 700; font-size: 13px; color: var(--c); }
.aw-ratenschnitt { font-size: 12.5px; color: rgba(var(--hell-rgb), .85); }
.aw-ratenschnitt b { font-size: 15px; color: #fff; }
.aw-ratenanzahl { font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.aw-ratenun { margin: 10px 0 0; font-size: 12px; color: rgba(224, 71, 95, .85); text-align: center; }

.aw-ratenverlauf { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 8px; }
.aw-ratenwoche { display: grid; justify-items: center; gap: 4px; }
.aw-ratenwoche b { font-size: 11px; color: rgba(var(--hell-rgb), .75); }
.aw-ratensaeule {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 30px; height: 70px;
  border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(var(--gold-rgb), .18);
}
.aw-ratensaeule i { display: block; width: 100%; animation: awSaeule .6s cubic-bezier(.2, .8, .3, 1) backwards; transform-origin: bottom; }
.aw-ratensaeule i.ab { background: #7ec48b; }
.aw-ratensaeule i.sp { background: #e0a34a; }
.aw-ratensaeule i.un { background: #e0475f; }
@keyframes awSaeule { from { transform: scaleY(0); } }
.aw-ratenwoche small { font: 600 9.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.aw-ratenwoche.aussen { opacity: .4; }
.aw-ratenwoche.laufend .aw-ratensaeule { border-style: dashed; border-color: rgba(var(--gold-rgb), .5); }
.aw-ratenwoche.laufend small { color: var(--gold-hell, #fff); }
.aw-ratenbasis { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(var(--hell-rgb), .5); text-align: center; }
@media (max-width: 420px) {
  .aw-ratenring { width: 72px; height: 72px; }
  .aw-ratenprozent { width: 72px; height: 72px; margin-left: -36px; }
  .aw-ratenverlauf { gap: 3px; }
  .aw-ratenwoche small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .aw-ratenring .wert { transition: none; }
  .aw-ratensaeule i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Orte und Ereignisse — kleinere Vorschau-Kacheln, mehr Bewegung
   Die Kacheln fliegen beim Laden in 3D herein, ihre Bilder schwenken
   langsam (Ken Burns), ein Lichtschein läuft in Abständen darüber, die
   Marken gleiten herein, beim Überfahren pulsiert der Rahmen und die
   Kachel neigt sich zum Zeiger (welt3.js). Das Schwenken nutzt die
   eigenen Eigenschaften scale/translate — so bleibt transform frei für
   den Zoom beim Überfahren.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes kachelFlip {
  from { opacity: 0; transform: perspective(900px) rotateX(22deg) translateY(26px) scale(.93); filter: blur(4px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes kachelSchwenk { from { scale: 1.02; translate: 0 0; } to { scale: 1.12; translate: -2.5% -1.5%; } }
@keyframes kachelGlanz { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }
@keyframes kachelMarke { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes kachelMarkeRechts { from { opacity: 0; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes kachelPuls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes kachelSchweben { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes kachelPfeil { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
@keyframes kachelFluss { to { background-position: 0 200%; } }
@keyframes kachelRing { 0% { box-shadow: 0 0 0 4px rgba(var(--kopf-rgb), .9), 0 0 0 4px rgba(176, 107, 255, .5); }
                        100% { box-shadow: 0 0 0 4px rgba(var(--kopf-rgb), .9), 0 0 0 14px rgba(176, 107, 255, 0); } }

/* ── Orte ── */
.ort2-gitter { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; }
.ort2-karte { border-radius: 16px; animation: kachelFlip .75s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.ort2-karte.rein { animation: kachelFlip .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.ort2-kartenbild { aspect-ratio: 16 / 9; }
.ort2-kartenbild img { animation: kachelSchwenk 16s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0ms) * -9); }
.ort2-kartenbild::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 48%, color-mix(in srgb, var(--c) 30%, transparent) 52%, transparent 65%);
  translate: -120% 0; animation: kachelGlanz 7s ease-in-out infinite; animation-delay: calc(1.2s + var(--d, 0ms) * 3);
}
.ort2-karte:hover .ort2-kartenbild::before { animation-duration: 1.4s; animation-delay: 0s; }
.ort2-kartenicon { font-size: 40px; animation: kachelSchweben 2.6s ease-in-out infinite alternate; }
.ort2-kartenkat, .ort2-kartenzahl { top: 8px; padding: 4px 8px; font-size: 11px; }
.ort2-kartenkat { left: 8px; animation: kachelMarke .5s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + .35s) backwards; }
.ort2-kartenzahl { right: 8px; animation: kachelMarkeRechts .5s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + .45s) backwards; }
.ort2-karteninfo { gap: 3px; padding: 10px 12px 13px; }
.ort2-kartenplz { font-size: 11px; }
.ort2-kartenname { font-size: 15px; }
.ort2-kartentext { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ort2-kartenpfeil { right: 10px; bottom: 10px; width: 26px; height: 26px; font-size: 13px; }
.ort2-karte:hover .ort2-kartenpfeil { animation: kachelPfeil .9s ease-in-out infinite; }
.ort2-karte::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 75%, transparent), inset 0 0 22px -6px color-mix(in srgb, var(--c) 70%, transparent);
  transition: opacity .3s;
}
.ort2-karte:hover::after { animation: kachelPuls 1.6s ease-in-out infinite; }

/* ── Ereignisse ── */
.er-liste.raster { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 14px; }
.er-karte { animation: kachelFlip .75s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.er-karte.er-rein { animation: kachelFlip .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.er-liste.zeitleiste .er-bild { width: 160px; }
.er-liste.raster .er-karte { border-radius: 16px; }
.er-bild img { animation: kachelSchwenk 16s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0ms) * -9); }
.er-bild::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .15) 48%, rgba(176, 107, 255, .3) 52%, transparent 65%);
  translate: -120% 0; animation: kachelGlanz 7s ease-in-out infinite; animation-delay: calc(1.2s + var(--d, 0ms) * 3);
}
.er-karte:hover .er-bild::before { animation-duration: 1.4s; animation-delay: 0s; }
.er-bildzeichen { font-size: 34px; }
.er-zustand { left: 8px; top: 8px; padding: 3px 8px; font-size: 10px; animation: kachelMarke .5s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + .35s) backwards; }
.er-inhalt { gap: 5px; padding: 11px 14px; }
.er-titel { font-size: 16px; }
.er-satz { font-size: 12.5px; }
.er-fakten span { padding: 2px 8px; font-size: 11px; }
.er-liste .er-karte:hover .er-pfeil { animation: kachelPfeil .9s ease-in-out infinite; }
/* Die Zeitleiste fließt, die Datumsmarken senden einen Ring aus */
.er-liste.zeitleiste::before {
  background: linear-gradient(180deg, #ff7ae0, #b06bff 25%, rgba(176, 107, 255, .15) 50%, #b06bff 75%, #ff7ae0);
  background-size: 100% 200%;
  animation: erLinie 1.2s cubic-bezier(.2, .8, .2, 1) backwards, kachelFluss 6s linear 1.2s infinite;
}
.er-liste.zeitleiste .er-marke { height: 46px; width: 58px; left: -74px; animation: kachelRing 2.4s ease-out infinite; animation-delay: calc(var(--d, 0ms) * 2); }
.er-liste.zeitleiste .er-karte:hover .er-marke { animation-duration: 1s; }
.er-liste.raster .er-karte::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(176, 107, 255, .8), inset 0 0 24px -6px rgba(176, 107, 255, .7);
}
.er-liste.raster .er-karte:hover::after { animation: kachelPuls 1.6s ease-in-out infinite; }

@media (max-width: 760px) {
  .er-liste.zeitleiste .er-bild { width: 100%; }
  .er-liste.zeitleiste .er-marke { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ort2-karte, .ort2-kartenbild img, .ort2-kartenbild::before, .ort2-kartenicon, .ort2-kartenkat, .ort2-kartenzahl,
  .ort2-karte:hover::after, .ort2-karte:hover .ort2-kartenpfeil,
  .er-karte, .er-bild img, .er-bild::before, .er-zustand, .er-liste.zeitleiste::before, .er-liste.zeitleiste .er-marke,
  .er-liste.raster .er-karte:hover::after, .er-liste .er-karte:hover .er-pfeil { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Der Wartungsmodus (lib/wartung.php) — die Seite im Gewand der
   Anmeldung, das Band für die Leitung, der Schalter im Kopf
   ═══════════════════════════════════════════════════════════════════ */
@keyframes wartungDrehen { to { transform: rotate(360deg); } }
@keyframes wartungScan { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 105%; opacity: 0; } }
@keyframes wartungPunkt { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 170, 60, .7); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(255, 170, 60, 0); } }
@keyframes wartungBalken { from { translate: -100% 0; } to { translate: 260% 0; } }
@keyframes wartungAtmen { from { filter: drop-shadow(0 0 12px rgba(139, 61, 255, .5)); } to { filter: drop-shadow(0 0 26px rgba(170, 90, 255, .95)); } }

.wartung-rahmen { max-width: 440px; }
.wartung-karte {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px;
  padding: 20px 18px 18px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(139, 61, 255, .45);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(139, 61, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(14, 6, 26, .92), rgba(5, 2, 10, .96));
  box-shadow: 0 0 30px -10px rgba(139, 61, 255, .9);
  animation: kachelFlip .8s cubic-bezier(.2, .8, .2, 1) backwards;
}
.wartung-bild { position: relative; display: grid; place-items: center; width: 100%; height: 150px; }
.wartung-bild img {
  position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: auto; max-height: 132px;
  animation: wartungAtmen 2.4s ease-in-out infinite alternate;
}
.wartung-ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 2px dashed rgba(170, 90, 255, .45); border-top-color: #c9a2ff; border-right-color: transparent;
  animation: wartungDrehen 9s linear infinite;
}
.wartung-scan {
  position: absolute; z-index: 2; left: 8%; right: 8%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #d6b4ff, transparent); box-shadow: 0 0 12px #b06bff;
  animation: wartungScan 3.2s ease-in-out infinite;
}
.wartung-marke {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffcf8a;
  border: 1px solid rgba(255, 170, 60, .5); background: rgba(255, 170, 60, .08);
}
.wartung-punkt {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ffaa3c;
  animation: wartungPunkt 1.6s ease-in-out infinite;
}
.wartung-titel { margin: 2px 0 0; font-size: 26px; letter-spacing: .06em; color: #fff; }
.wartung-satz { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(232, 222, 255, .7); }
.wartung-notiz {
  margin: 4px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: #f1e4ff;
  border-left: 3px solid #b06bff; background: rgba(176, 107, 255, .1); text-align: left; width: 100%;
}
.wartung-seit { margin: 0; font-size: 11.5px; color: rgba(232, 222, 255, .45); }
.wartung-balken {
  position: relative; display: block; width: 100%; height: 3px; margin-top: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.wartung-balken i {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, #b06bff, #ff7ae0, transparent);
  animation: wartungBalken 1.8s ease-in-out infinite;
}
.wartung-knoepfe { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 6px; }
.wartung-knopf { text-decoration: none; }
.wartung-ab { font-size: 12px; color: rgba(232, 222, 255, .55); }
.wartung-ab:hover { color: #fff; }

/* Auf der Anmeldeseite */
.wartung-hinweis {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 10px 14px; border-radius: 12px; text-align: left;
  font-size: 12.5px; line-height: 1.5; color: #ffe2b8; border: 1px solid rgba(255, 170, 60, .45); background: rgba(255, 170, 60, .08);
}
.wartung-hinweis .wartung-punkt { margin-top: 5px; }
.wartung-hinweis em { display: block; margin-top: 4px; color: rgba(255, 226, 184, .8); }

/* Für die Leitung: das Band oben und der Schalter im Kopf */
.wartung-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 10px 14px; border-radius: 14px;
  font-size: 13px; color: #ffe2b8; border: 1px solid rgba(255, 170, 60, .5);
  background: linear-gradient(110deg, rgba(255, 170, 60, .14), rgba(255, 170, 60, .04));
  box-shadow: 0 0 24px -12px rgba(255, 170, 60, .9);
}
.wartung-band > span:nth-child(2) { flex: 1 1 240px; }
.wartung-band form { margin: 0; }
.wartung-bandknopf {
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; color: #1a0f00;
  border: 0; background: linear-gradient(110deg, #ffcf8a, #ffaa3c);
}
.wartung-bandknopf:hover { filter: brightness(1.08); }
button.kopfknopf.wartung-schalter { font: inherit; cursor: pointer; }
.kopfknopf.wartung-schalter.an { color: #ffcf8a; border-color: rgba(255, 170, 60, .6); box-shadow: 0 0 16px -6px rgba(255, 170, 60, .9); }
.wartung-fenster .aw-fensterwer { color: #ffcf8a; }

@media (prefers-reduced-motion: reduce) {
  .wartung-karte, .wartung-bild img, .wartung-ring, .wartung-scan, .wartung-punkt, .wartung-balken i { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Alle Kacheln in allen Bereichen — die Effekte der Orte (welt3.js
   erkennt die Kacheln und setzt .fx-kachel, .fx-glanz, .fx-schwenk)
     Lichtschein   läuft in Abständen über die Kachel, beim Überfahren schnell
     Rahmen        pulsiert beim Überfahren in der Farbe der Kachel
     Titelbild     schwenkt langsam (eigene Eigenschaften scale/translate,
                   damit transform für den Zoom beim Überfahren frei bleibt)
     Einflug       in 3D, sobald die Kachel beim Scrollen in den Blick kommt
   ═══════════════════════════════════════════════════════════════════ */
body.luxus.edel .fx-kachel { --fxc: var(--c, rgb(var(--gold-rgb))); }
body.luxus.edel .fx-glanz {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: inherit;
}
body.luxus.edel .fx-glanz i {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .11) 48%,
              color-mix(in srgb, var(--fxc) 26%, transparent) 52%, transparent 65%);
  translate: -120% 0; animation: kachelGlanz 7.5s ease-in-out var(--fxv, 1.2s) infinite;
}
body.luxus.edel .fx-kachel:hover > .fx-glanz i { animation-duration: 1.4s; animation-delay: 0s; }
body.luxus.edel .fx-glanz::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fxc) 75%, transparent),
              inset 0 0 22px -6px color-mix(in srgb, var(--fxc) 70%, transparent);
}
body.luxus.edel .fx-kachel:hover > .fx-glanz::after { animation: kachelPuls 1.6s ease-in-out infinite; }
body.luxus.edel .fx-schwenk { animation: kachelSchwenk 16s ease-in-out var(--fxs, 0s) infinite alternate; }

/* Einflug: allein oder mit dem Abschnitt, in dem die Kacheln stehen */
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .fx-kachel.v3-da {
  animation: kachelFlip .75s cubic-bezier(.2, .8, .2, 1) var(--v3d, 0ms) backwards !important;
}
body.luxus.edel:is(.welt-hotel, .welt-redcycle, .welt-codebreaker, .welt-briefkasten) .v3-da .fx-kachel {
  animation: kachelFlip .75s cubic-bezier(.2, .8, .2, 1) calc(var(--fxi, 0) * 70ms + 150ms) backwards;
}

@media (prefers-reduced-motion: reduce) {
  body.luxus.edel .fx-glanz i, body.luxus.edel .fx-schwenk,
  body.luxus.edel .fx-kachel:hover > .fx-glanz::after, body.luxus.edel .fx-kachel { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Abwesenheit — die Knöpfe Grün, Orange, Rot
   Glänzend gewölbt mit wanderndem Lichtschein; die Symbole sind kleine
   Grafiken (abw_symbol): der Haken und das Kreuz zeichnen sich, die Uhr
   läuft. Beim Überfahren nickt der Haken, die Uhr dreht schneller, das
   Kreuz schüttelt sich. Heutige Einträge atmen, ein Grund zeigt sich als
   weißer Punkt.
   ═══════════════════════════════════════════════════════════════════ */
.aw-symbol {
  width: 58%; height: 58%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.aw-symbol .zug { stroke-dasharray: 1; stroke-dashoffset: 0; animation: awZug .55s cubic-bezier(.6, 0, .3, 1) .1s backwards; }
.aw-symbol .zug2 { animation-delay: .32s; }
@keyframes awZug { from { stroke-dashoffset: 1; } }
.aw-symbol .zeiger-l, .aw-symbol .zeiger-k { transform-box: view-box; transform-origin: 12px 12px; }
.aw-symbol .zeiger-l { animation: awUhr 6s linear infinite; }
.aw-symbol .zeiger-k { animation: awUhr 40s linear infinite; }
@keyframes awUhr { to { transform: rotate(360deg); } }
@keyframes awNicken { 0%, 100% { transform: none; } 35% { transform: translateY(-2px) rotate(-10deg) scale(1.15); } 70% { transform: translateY(1px) rotate(4deg); } }
@keyframes awSchuetteln { 0%, 100% { transform: none; } 20% { transform: translateX(-2px) rotate(-8deg); } 40% { transform: translateX(2px) rotate(8deg); } 60% { transform: translateX(-1.5px) rotate(-5deg); } 80% { transform: translateX(1px) rotate(3deg); } }
@keyframes awGlanzLauf { 0%, 72% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes awAtmen { 0%, 100% { box-shadow: 0 6px 18px -8px var(--c), 0 0 14px -6px var(--c), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .25); }
                     50% { box-shadow: 0 6px 22px -6px var(--c), 0 0 26px -2px var(--c), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .25); } }
@keyframes awWahlEin { from { opacity: 0; transform: translateX(-18px) scale(.96); } }

/* Gesetzte Felder auf der Tafel, die eigenen Knöpfe, die Legende */
:is(.aw-feld, .aw-ichknopf).gesetzt {
  position: relative; overflow: hidden; isolation: isolate; color: #10091c;
  background: radial-gradient(120% 95% at 28% 12%, color-mix(in srgb, var(--c) 52%, #fff) 0%, var(--c) 46%,
              color-mix(in srgb, var(--c) 70%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--c) 55%, #fff 45%);
  box-shadow: 0 6px 18px -8px var(--c), 0 0 14px -6px var(--c), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .25);
  transition: transform .22s cubic-bezier(.2, 1.4, .4, 1), box-shadow .22s, filter .22s;
}
:is(.aw-feld, .aw-ichknopf).gesetzt::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 48%, transparent 62%);
  translate: -130% 0; animation: awGlanzLauf 5s ease-in-out infinite;
}
.aw-zelle:nth-child(odd) :is(.aw-feld).gesetzt::before { animation-delay: 1.6s; }
.aw-zelle:nth-child(3n) :is(.aw-feld).gesetzt::before { animation-delay: 3.1s; }
.aw-feld.gesetzt .aw-zeichen, .aw-ichknopf.gesetzt .aw-zeichen {
  display: grid; place-items: center; width: 100%; height: 100%; animation: awPop .4s cubic-bezier(.2, .8, .3, 1.5) both;
}
button:is(.aw-feld, .aw-ichknopf).gesetzt:hover {
  transform: translateY(-3px) scale(1.1); filter: saturate(1.15) brightness(1.06);
  box-shadow: 0 10px 22px -8px var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 0 28px -4px var(--c),
              inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 0, 0, .25);
}
button:is(.aw-feld, .aw-ichknopf).gesetzt:hover::before { animation-duration: 1.1s; animation-delay: 0s; }
button:is(.aw-feld, .aw-ichknopf):active { transform: scale(.92); transition-duration: .08s; }
button:is(.aw-feld, .aw-ichknopf).art-abgemeldet:hover .aw-symbol { animation: awNicken .6s ease-in-out; }
button:is(.aw-feld, .aw-ichknopf).art-unabgemeldet:hover .aw-symbol { animation: awSchuetteln .5s ease-in-out; }
button:is(.aw-feld, .aw-ichknopf).art-verspaetet:hover .zeiger-l { animation-duration: .8s; }
button:is(.aw-feld, .aw-ichknopf).art-verspaetet:hover .zeiger-k { animation-duration: 6s; }
.aw-zelle.heute .aw-feld.gesetzt, .aw-ichknopf.gesetzt { animation: awAtmen 2.6s ease-in-out infinite; }
.aw-feld.mit-grund::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff, 0 0 0 1px rgba(0, 0, 0, .25);
}
.aw-feld.vergangen.gesetzt { filter: saturate(.7) brightness(.92); }
.aw-feld.vergangen.gesetzt::before { animation: none; }
.aw-legende .aw-feld.gesetzt { border-radius: 8px; }
.aw-legende .aw-feld.mit-grund::after { top: 2px; right: 2px; width: 4px; height: 4px; }

/* Leere Felder: das Plus dreht sich, der Rand leuchtet */
button.aw-feld:not(.gesetzt) { transition: transform .2s, border-color .2s, background .2s, box-shadow .2s, color .2s; }
button.aw-feld:not(.gesetzt):hover { border-style: solid; box-shadow: 0 0 18px -6px rgba(var(--zweit-rgb), .9); }
.aw-plus { display: inline-block; transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
button.aw-feld:not(.gesetzt):hover .aw-plus { transform: rotate(90deg) scale(1.25); }

/* Die eigenen Knöpfe (heute, morgen) ohne Eintrag */
.aw-ichknopf:not(.gesetzt) { position: relative; overflow: hidden; }
.aw-ichknopf:not(.gesetzt)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 62%);
  translate: -130% 0; animation: awGlanzLauf 4.2s ease-in-out infinite;
}
.aw-ichknopf .aw-symbol { width: 54%; height: 54%; }

/* Das Fenster: die Wahl als moderne Knöpfe, die gestaffelt hereinfliegen */
.aw-wahlknopf {
  position: relative; overflow: hidden; isolation: isolate; gap: 14px; padding: 11px 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 24%, transparent), rgba(255, 255, 255, .02) 70%);
  transition: transform .22s cubic-bezier(.2, 1.4, .4, 1), box-shadow .22s, border-color .22s;
}
.aw-wahlknopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c) 40%, transparent) 50%, transparent 65%);
  translate: -130% 0;
}
.aw-wahlknopf:hover::before { animation: awGlanzLauf 1s ease-out; }
.aw-wahlknopf:hover { transform: translateX(5px); border-color: var(--c); box-shadow: 0 0 26px -8px var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.aw-wahlknopf:active { transform: scale(.97); }
.aw-fenster[open] .aw-wahlknopf { animation: awWahlEin .4s cubic-bezier(.2, .8, .3, 1) backwards; }
.aw-fenster[open] .aw-wahlknopf:nth-child(2) { animation-delay: .07s; }
.aw-fenster[open] .aw-wahlknopf:nth-child(3) { animation-delay: .14s; }
.aw-wahlzeichen {
  width: 36px; height: 36px; border-radius: 12px; color: #10091c;
  background: radial-gradient(120% 95% at 28% 12%, color-mix(in srgb, var(--c) 52%, #fff) 0%, var(--c) 46%,
              color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: 0 0 16px -4px var(--c), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .25);
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.aw-wahlknopf:hover .aw-wahlzeichen { transform: rotate(-8deg) scale(1.1); }
.aw-wahlknopf[data-art="ABGEMELDET"]:hover .aw-symbol { animation: awNicken .6s ease-in-out; }
.aw-wahlknopf[data-art="UNABGEMELDET"]:hover .aw-symbol { animation: awSchuetteln .5s ease-in-out; }
.aw-wahlknopf[data-art="VERSPAETET"]:hover .zeiger-l { animation-duration: .8s; }

@media (prefers-reduced-motion: reduce) {
  .aw-symbol .zug, .aw-symbol .zeiger-l, .aw-symbol .zeiger-k, :is(.aw-feld, .aw-ichknopf).gesetzt::before,
  .aw-zelle.heute .aw-feld.gesetzt, .aw-ichknopf.gesetzt, .aw-ichknopf:not(.gesetzt)::before,
  .aw-fenster[open] .aw-wahlknopf, button:is(.aw-feld, .aw-ichknopf):hover .aw-symbol { animation: none !important; }
}

/* Auf schmaleren Schirmen zeigt der Wartungs-Knopf nur das Werkzeug */
@media (max-width: 1240px) { .wartung-schalter .wartung-wort { display: none; } }


/* ═══════════════════════════════════════════════════════════════════
   Luxus-Grund — der bewegte Hintergrund von Spiral Hotel und Red Cycle
   (lux_hintergrund in lib/layout.php). Beide tragen den Wirbel aus
   ihren Wappen als feine Goldlinie, über die Lichter wandern.
     Hotel      Art-déco-Strahlen unter einem Kronleuchterschein, Tapete
                mit Doppelstreifen, Bokeh, Champagnerperlen, ein Schein
                wie auf Seide, funkelnder Goldstaub
     Red Cycle  Rauch, gestepptes Leder mit Goldknöpfen und wanderndem
                Lichtband, schwenkende Scheinwerfer, Samtvorhänge,
                fallendes Blattgold, Gold- und Rubinfunken
   Alles bewegt sich langsam und nur über transform und opacity; wer
   weniger Bewegung wünscht, bekommt ein ruhendes Bild.
   ═══════════════════════════════════════════════════════════════════ */
body.luxus.edel:is(.welt-hotel, .welt-redcycle) { background-image: none; }
.lux-hg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.lux-hg span, .lux-hg b, .lux-hg i, .lux-hg em { position: absolute; display: block; }

/* ── Der Wirbel ────────────────────────────────────────────────── */
.lux-wirbel {
  position: absolute; overflow: visible;
  animation: luxDrehen 260s linear infinite, luxAtmen 18s ease-in-out infinite alternate;
}
.lux-wirbel .klingen { fill-opacity: .13; stroke-width: .34; stroke-linejoin: round; }
.lux-wirbel .lichter { fill: none; stroke-width: 1.1; stroke-linecap: round; }
.lux-wirbel .lichter path {
  stroke-dasharray: .1 1.3; stroke-dashoffset: .1; opacity: 0;
  animation: luxLicht 7s cubic-bezier(.45, 0, .55, 1) var(--v) infinite;
}
@keyframes luxDrehen { to { rotate: 360deg; } }
@keyframes luxAtmen { from { scale: 1; } to { scale: 1.045; } }
@keyframes luxLicht {
  0%       { stroke-dashoffset: .1; opacity: 0; }
  8%       { opacity: 1; }
  50%      { opacity: .9; }
  58%, 100% { stroke-dashoffset: -1.05; opacity: 0; }
}
.hotel .lux-wirbel .s1 { stop-color: #8a5f1a; }
.hotel .lux-wirbel .s2 { stop-color: #ffe4a3; }
.hotel .lux-wirbel .s3 { stop-color: #e2b04e; }
.hotel .lux-wirbel .s4 { stop-color: #a37a2a; }
.hotel .lux-wirbel .lichter { stroke: #fff4d6; }
.redcycle .lux-wirbel .s1 { stop-color: #a3142a; }
.redcycle .lux-wirbel .s2 { stop-color: #f7dfa2; }
.redcycle .lux-wirbel .s3 { stop-color: #e0243e; }
.redcycle .lux-wirbel .s4 { stop-color: #e0b64a; }
.redcycle .lux-wirbel .lichter { stroke: #ffe7b0; }
.hotel .lux-wirbel.w1 { width: 96vmax; height: 96vmax; right: -34vmax; top: calc(50% - 48vmax); opacity: .24; }
.hotel .lux-wirbel.w2 { width: 50vmax; height: 50vmax; left: -18vmax; top: -16vmax; opacity: .11; animation-duration: 340s, 23s; animation-direction: reverse, alternate; }
.redcycle .lux-wirbel.w1 { width: 104vmax; height: 104vmax; left: -36vmax; bottom: -46vmax; opacity: .22; }
.redcycle .lux-wirbel.w2 { width: 46vmax; height: 46vmax; right: -13vmax; top: 4vh; opacity: .1; animation-duration: 320s, 21s; animation-direction: reverse, alternate; }

/* ── Funkeln: vierstrahlige Sterne, die kurz aufblitzen ────────── */
.lux-funkeln { inset: 0; }
.lux-funkeln em {
  left: var(--x); top: var(--y); width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background:
    radial-gradient(circle, #fff 0 8%, rgba(255, 238, 196, .65) 15%, transparent 36%),
    linear-gradient(90deg, transparent, rgba(255, 238, 196, .95) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 238, 196, .95) 50%, transparent) center / 1px 100% no-repeat;
  opacity: 0; scale: 0;
  animation: luxFunkeln var(--t) ease-in-out var(--v) infinite;
}
.lux-funkeln em.rubin {
  background:
    radial-gradient(circle, #fff 0 8%, rgba(255, 64, 88, .75) 16%, transparent 38%),
    linear-gradient(90deg, transparent, rgba(255, 120, 132, .95) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 120, 132, .95) 50%, transparent) center / 1px 100% no-repeat;
}
@keyframes luxFunkeln {
  0%, 68%, 100% { opacity: 0; scale: 0; rotate: 0deg; }
  80%           { opacity: 1; scale: 1; rotate: 45deg; }
  90%           { opacity: .5; scale: .45; rotate: 90deg; }
}

/* ── Spiral Hotel ──────────────────────────────────────────────── */
/* Tapete mit Doppelstreifen — nur an den Rändern, die Mitte bleibt ruhig */
.hotel .lux-tapete {
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(var(--gold-rgb), .06) 0 1px, transparent 1px 5px,
              rgba(var(--gold-rgb), .06) 5px 6px, transparent 6px 64px);
  -webkit-mask: radial-gradient(ellipse 62% 72% at 50% 45%, transparent 28%, #000 88%);
          mask: radial-gradient(ellipse 62% 72% at 50% 45%, transparent 28%, #000 88%);
}
/* Art-déco-Strahlen und Fächerbögen, die von oben herab leise pendeln */
.hotel .lux-strahlen {
  left: 50%; top: -8vh; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(var(--gold-rgb), .17) 0deg .4deg, transparent .4deg 4deg),
    repeating-radial-gradient(circle, transparent 0 calc(9vmax - 1px), rgba(var(--gold-rgb), .1) calc(9vmax - 1px) 9vmax);
  -webkit-mask: radial-gradient(circle, #000 0 5%, rgba(0, 0, 0, .7) 19%, transparent 37%);
          mask: radial-gradient(circle, #000 0 5%, rgba(0, 0, 0, .7) 19%, transparent 37%);
  animation: luxPendel 46s ease-in-out infinite alternate;
}
@keyframes luxPendel { from { rotate: -3deg; } to { rotate: 3deg; } }
/* Der Schein eines Kronleuchters, der sanft auf- und abglimmt */
.hotel .lux-krone {
  left: 50%; top: -30vh; width: 90vmax; height: 72vh; margin-left: -45vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .17), rgba(var(--gold-rgb), .07) 45%, transparent);
  animation: luxKrone 9s ease-in-out infinite alternate;
}
@keyframes luxKrone { from { opacity: .6; scale: 1; } to { opacity: 1; scale: 1.06; } }
/* Bokeh: weiche Lichtscheiben mit feinem Rand, die durch den Raum treiben */
.hotel .lux-bokeh { inset: 0; }
.hotel .lux-bokeh b {
  left: var(--x); top: var(--y); width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 140, .1) 0, rgba(var(--gold-rgb), .06) 56%,
              rgba(var(--gold-rgb), .16) 66%, transparent 70%);
  animation: luxSchweben var(--t) ease-in-out var(--v) infinite alternate;
}
@keyframes luxSchweben {
  0%   { translate: 0 0; scale: .9; opacity: .3; }
  50%  { opacity: 1; }
  100% { translate: 6vw -6vh; scale: 1.1; opacity: .45; }
}
/* Champagnerperlen: steigen in Schnüren auf, werden größer und schneller */
.hotel .lux-perlen { inset: 0; }
.hotel .lux-perlen i {
  left: var(--x); bottom: -16px; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 33% 30%, rgba(255, 255, 255, .95) 0 14%, rgba(255, 246, 220, .22) 26%, transparent 62%);
  box-shadow: inset 0 0 0 1px rgba(250, 232, 190, .6), 0 0 7px rgba(240, 220, 168, .4);
  opacity: 0;
  animation: luxPerle var(--t) cubic-bezier(.5, 0, .9, .7) var(--v) infinite, luxWiegen 1.9s ease-in-out var(--v) infinite alternate;
}
.hotel .lux-perlen i:nth-child(odd) { animation-duration: var(--t), 2.6s; }
.hotel .lux-perlen i:nth-child(3n) { animation-duration: var(--t), 1.4s; }
@keyframes luxPerle {
  0%   { translate: 0 0; scale: .5; opacity: 0; }
  8%   { opacity: .95; }
  82%  { opacity: .75; }
  100% { translate: 0 -108vh; scale: 1.2; opacity: 0; }
}
@keyframes luxWiegen { from { transform: translateX(calc(var(--w) * -1)); } to { transform: translateX(var(--w)); } }
/* Ein Schein wie auf Seide, der in Abständen schräg durchs Bild gleitet */
.hotel .lux-schein {
  top: -25%; bottom: -25%; left: 0; width: 42vw;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 205, .04) 42%, rgba(255, 247, 226, .075) 50%,
              rgba(255, 240, 205, .04) 58%, transparent);
  rotate: 18deg; translate: -70vw 0;
  animation: luxSchein 19s ease-in-out 3s infinite;
}
@keyframes luxSchein { 0% { translate: -70vw 0; } 55%, 100% { translate: 150vw 0; } }

/* ── Red Cycle ─────────────────────────────────────────────────── */
/* Rauch in Rot und einem Hauch Gold, der träge durch den Club zieht */
.redcycle .lux-rauch { inset: 0; }
.redcycle .lux-rauch b {
  width: 84vmax; height: 62vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--blut-rgb), .17), rgba(var(--blut-rgb), .05) 55%, transparent);
  animation: luxRauch 48s ease-in-out infinite alternate;
}
.redcycle .lux-rauch .r1 { left: -24vmax; top: -18vmax; }
.redcycle .lux-rauch .r2 { right: -30vmax; top: 26vh; animation-duration: 62s; animation-delay: -20s;
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .08), rgba(var(--gold-rgb), .025) 55%, transparent); }
.redcycle .lux-rauch .r3 { left: 18vw; bottom: -34vmax; animation-duration: 55s; animation-delay: -35s; }
@keyframes luxRauch {
  0%   { translate: 0 0; scale: 1; opacity: .7; }
  50%  { opacity: 1; }
  100% { translate: 10vw -6vh; scale: 1.18; opacity: .6; }
}
/* Gestepptes Leder: Rauten aus Goldnaht, Knöpfe an den Kreuzungen und
   ein leichter Bausch in jedem Feld. Die Mitte bleibt zurückhaltend. */
.redcycle .lux-steppung,
.redcycle .lux-stepplicht i {
  background:
    radial-gradient(circle, rgba(var(--gold-rgb), .55) 0 1.6px, transparent 2.8px) 0 0 / 60px 60px,
    radial-gradient(circle, rgba(var(--gold-rgb), .55) 0 1.6px, transparent 2.8px) 30px 30px / 60px 60px,
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(var(--gold-rgb), .42) 50%, transparent calc(50% + .7px)) 0 0 / 60px 60px,
    linear-gradient(-45deg, transparent calc(50% - .7px), rgba(var(--gold-rgb), .42) 50%, transparent calc(50% + .7px)) 0 0 / 60px 60px,
    radial-gradient(closest-side, rgba(255, 190, 190, .07), transparent) 30px 0 / 60px 60px,
    radial-gradient(closest-side, rgba(255, 190, 190, .07), transparent) 0 30px / 60px 60px;
}
.redcycle .lux-steppung {
  inset: 0; opacity: .2;
  -webkit-mask: radial-gradient(ellipse 70% 76% at 50% 45%, rgba(0, 0, 0, .3) 18%, #000 82%);
          mask: radial-gradient(ellipse 70% 76% at 50% 45%, rgba(0, 0, 0, .3) 18%, #000 82%);
}
/* Das Lichtband: der Rahmen wandert, sein Inhalt wandert gleich weit
   zurück — so bleibt das Muster stehen und nur das Licht zieht darüber. */
.redcycle .lux-stepplicht {
  left: 0; top: 0; width: 38vw; height: 100vh; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
          mask: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  translate: -38vw 0; animation: luxBand 21s cubic-bezier(.45, 0, .55, 1) 2s infinite;
}
.redcycle .lux-stepplicht i {
  left: 0; top: 0; width: 100vw; height: 100vh; opacity: .6;
  translate: 38vw 0; animation: luxBandGegen 21s cubic-bezier(.45, 0, .55, 1) 2s infinite;
}
@keyframes luxBand { 0% { translate: -38vw 0; } 60%, 100% { translate: 100vw 0; } }
@keyframes luxBandGegen { 0% { translate: 38vw 0; } 60%, 100% { translate: -100vw 0; } }
/* Scheinwerfer, die von oben über die Tanzfläche schwenken */
.redcycle .lux-strahl {
  top: -10vh; width: 90vh; height: 135vh; translate: -50% 0; transform-origin: 50% 0;
  background: conic-gradient(from 166deg at 50% 0, transparent 0deg, var(--c) 10deg, var(--c) 18deg, transparent 28deg, transparent 360deg);
  -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .45) 55%, transparent 92%);
          mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .45) 55%, transparent 92%);
  animation: luxSchwenk 19s ease-in-out infinite alternate;
}
.redcycle .lux-strahl.s1 { left: 14%; --c: rgba(var(--blut-rgb), .22); --a: -18deg; --b: 14deg; }
.redcycle .lux-strahl.s2 { left: 52%; --c: rgba(var(--gold-rgb), .12); --a: 12deg; --b: -14deg; animation-duration: 26s; animation-delay: -9s; }
.redcycle .lux-strahl.s3 { left: 88%; --c: rgba(var(--blut-rgb), .2); --a: 20deg; --b: -12deg; animation-duration: 23s; animation-delay: -4s; }
@keyframes luxSchwenk { from { rotate: var(--a); } to { rotate: var(--b); } }
/* Samtvorhänge an den Rändern: Falten, die sich leicht wiegen, und ein
   Glanz, der langsam an ihnen hinabläuft */
.redcycle .lux-vorhang {
  top: -3vh; bottom: -3vh; width: clamp(36px, 12vw, 230px); overflow: hidden; transform-origin: 50% 0; opacity: .55;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 18%, transparent 74%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(90deg, #3a0309 0, #7a0b1a 9px, #a3142a 15px, #5a0612 24px, #2a0206 32px);
  animation: luxVorhang 13s ease-in-out infinite alternate;
}
.redcycle .lux-vorhang.l { left: 0; -webkit-mask: linear-gradient(90deg, #000 30%, transparent); mask: linear-gradient(90deg, #000 30%, transparent); }
.redcycle .lux-vorhang.r { right: 0; -webkit-mask: linear-gradient(270deg, #000 30%, transparent); mask: linear-gradient(270deg, #000 30%, transparent); animation-delay: -6.5s; }
.redcycle .lux-vorhang::after {
  content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 80%;
  background: linear-gradient(180deg, transparent, rgba(255, 130, 150, .13) 50%, transparent);
  animation: luxSamt 11s ease-in-out infinite;
}
.redcycle .lux-vorhang.r::after { animation-delay: -5s; }
@keyframes luxVorhang { from { transform: skewX(-1.2deg) scaleX(.97); } to { transform: skewX(1.2deg) scaleX(1.03); } }
@keyframes luxSamt { from { translate: 0 0; } to { translate: 0 170%; } }
/* Blattgold, das taumelnd herabsinkt */
.redcycle .lux-blattgold { inset: 0; perspective: 600px; }
.redcycle .lux-blattgold i {
  left: var(--x); top: -24px; width: var(--s); height: calc(var(--s) * .8);
  background: linear-gradient(135deg, #8c6a1e, #f7dfa2 45%, #e0b64a 60%, #8c6a1e);
  clip-path: polygon(10% 20%, 60% 0, 100% 35%, 85% 90%, 30% 100%, 0 60%);
  opacity: 0;
  animation: luxFallen var(--t) linear var(--v) infinite, luxTaumeln var(--f) ease-in-out var(--v) infinite alternate;
}
@keyframes luxFallen {
  0%   { translate: 0 0; opacity: 0; }
  8%   { opacity: .85; }
  30%  { translate: calc(var(--d) * 3vw) 32vh; }
  60%  { translate: calc(var(--d) * -2vw) 66vh; }
  88%  { opacity: .7; }
  100% { translate: calc(var(--d) * 2vw) 110vh; opacity: 0; }
}
@keyframes luxTaumeln {
  from { transform: rotateX(10deg) rotateY(-60deg) rotateZ(-20deg); }
  to   { transform: rotateX(70deg) rotateY(50deg) rotateZ(25deg); }
}

@media (max-width: 700px) {
  .hotel .lux-wirbel.w2, .redcycle .lux-wirbel.w2 { display: none; }
  .redcycle .lux-vorhang { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .lux-hg *, .lux-hg *::after { animation: none !important; }
  .lux-perlen, .lux-blattgold, .lux-stepplicht, .lux-funkeln, .hotel .lux-schein { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Kopf in Bewegung — Menüreiter und Kopfknöpfe in allen Bereichen
   (body.luxus.edel); jeder Bereich behält seine Farben aus den
   Variablen. haus.js liefert den Zeiger (--mx/--my), die Neigung zum
   Zeiger (--zx/--zy), die Klickwelle (.kopf-welle) und die einzelnen
   Buchstaben der Reiter (.nb); jeder Reiter trägt seine Nummer (--i).
     Auftritt  die Reiter steigen gestaffelt auf, die Kopfknöpfe fallen ein
     Zeigen    federndes Anheben, Lichtschein am Zeiger, Buchstabenwelle;
               die Symbole spielen mit (Raster dreht, Wappen kreist, …)
     Aktiv     umlaufender Verlaufsrand, atmender Schein, ein Lauflicht in
               der Schrift, ein Glanz, der in Abständen darüberzieht
     Ruhe      ein Glanzstreif wandert der Reihe nach über die Kopfknöpfe,
               die Ziffern der Uhr kippen beim Wechsel herein
   ═══════════════════════════════════════════════════════════════════ */
@property --kopf-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes kopfWinkel { to { --kopf-winkel: 360deg; } }
.ab-pfeil { display: none; }

/* ── Die Menüreiter ─────────────────────────────────────────────── */
body.luxus.edel .hauptnav .navlink {
  overflow: hidden; isolation: isolate;
  translate: var(--zx, 0px) var(--zy, 0px);
  transition: color .25s, background-color .3s, border-color .3s, box-shadow .35s,
              transform .45s cubic-bezier(.2, 1.6, .4, 1), translate .25s ease-out;
  animation: reiterEin .65s cubic-bezier(.2, .9, .3, 1.15) calc(var(--i, 0) * 45ms + 60ms) backwards;
}
@keyframes reiterEin {
  from { opacity: 0; translate: 0 16px; scale: .9; filter: blur(6px); }
  60%  { filter: blur(0); }
}
body.luxus.edel .hauptnav .navlink .nb { display: inline-block; }
body.luxus.edel .hauptnav .navlink:not(.an):hover {
  color: #fff; transform: translateY(-3px) scale(1.05);
  border-color: rgba(var(--gold-rgb), .45);
  background-color: rgba(var(--gold-rgb), .1);
  background-image: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), .38), transparent 70%);
  box-shadow: 0 14px 28px -16px rgba(var(--gold-rgb), .95), 0 0 26px -8px rgba(var(--zweit-rgb), .6),
              inset 0 1px 0 rgba(255, 255, 255, .1);
}
body.luxus.edel .hauptnav .navlink:active { transform: translateY(0) scale(.94); transition-duration: .08s; }

/* Der aktive Reiter: ein Rand aus Verlauf, der umläuft, und ein Schein,
   der atmet */
body.luxus.edel .hauptnav .navlink.an {
  border-color: transparent;
  background:
    radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), .26), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(var(--gold-rgb), .2), rgba(var(--gold-rgb), .05)) padding-box,
    linear-gradient(rgba(var(--kopf-rgb), .9), rgba(var(--kopf-rgb), .9)) padding-box,
    conic-gradient(from var(--kopf-winkel), var(--gold), var(--zweit) 18%, rgba(var(--gold-rgb), .12) 36%,
                   var(--gold) 52%, var(--zweit) 70%, rgba(var(--gold-rgb), .12) 88%, var(--gold)) border-box;
  animation: reiterEin .65s cubic-bezier(.2, .9, .3, 1.15) calc(var(--i, 0) * 45ms + 60ms) backwards,
             kopfWinkel 4.5s linear infinite, reiterAtmen 3.2s ease-in-out infinite;
}
@keyframes reiterAtmen {
  0%, 100% { box-shadow: 0 0 16px rgba(var(--gold-rgb), .28), 0 0 38px -12px rgba(var(--zweit-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .1); }
  50%      { box-shadow: 0 0 28px rgba(var(--gold-rgb), .5), 0 0 60px -10px rgba(var(--zweit-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .14); }
}
body.luxus.edel .hauptnav .navlink.an:hover { transform: translateY(-2px) scale(1.04); }
/* Ein Glanz zieht in Abständen über den aktiven Reiter */
body.luxus.edel .hauptnav .navlink.an::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  animation: reiterGlanz 5.5s ease-in-out 1.2s infinite;
}
@keyframes reiterGlanz { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
/* Die Unterstreichung des aktiven Reiters schimmert */
body.luxus.edel .hauptnav .navlink.an::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--zweit), #fff, var(--zweit), var(--gold), transparent) 0 0 / 200% 100%;
  animation: strichLauf 2.4s linear infinite;
}
@keyframes strichLauf { to { background-position: -200% 0; } }
/* Lauflicht durch die Schrift des aktiven Reiters … */
body.luxus.edel .hauptnav .navlink.an .nb { animation: buchstabeGlimmen 3.2s ease-in-out calc(var(--j, 0) * 80ms) infinite; }
@keyframes buchstabeGlimmen {
  0%, 100% { text-shadow: 0 0 10px rgba(var(--zweit-rgb), .35); }
  50%      { color: #fff; text-shadow: 0 0 14px rgba(var(--zweit-rgb), .95), 0 0 3px rgba(255, 255, 255, .8); }
}
/* … und beim Überfahren wogt jeder Reiter Buchstabe für Buchstabe */
body.luxus.edel .hauptnav .navlink:hover .nb {
  animation: buchstabeWelle .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--j, 0) * 30ms) both;
}
@keyframes buchstabeWelle {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-5px) scale(1.15); color: #fff; text-shadow: 0 0 12px rgba(var(--zweit-rgb), .95); }
}

/* Die Welle, die ein Klick wirft (Reiter und Kopfknöpfe) */
.kopf-welle {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(var(--gold-rgb), .22) 40%, transparent 70%);
  scale: 0; animation: kopfWelle .7s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes kopfWelle { to { scale: 1; opacity: 0; } }

/* ── Die Kopfknöpfe ─────────────────────────────────────────────── */
body.luxus.edel .kopfrechts > * { animation: kopfEin .6s cubic-bezier(.2, .9, .3, 1.25) var(--kd, 0s) backwards; }
body.luxus.edel .kopfrechts > :nth-child(2) { --kd: .05s; }
body.luxus.edel .kopfrechts > :nth-child(3) { --kd: .1s; }
body.luxus.edel .kopfrechts > :nth-child(4) { --kd: .15s; }
body.luxus.edel .kopfrechts > :nth-child(5) { --kd: .2s; }
body.luxus.edel .kopfrechts > :nth-child(6) { --kd: .25s; }
body.luxus.edel .kopfrechts > :nth-child(7) { --kd: .3s; }
body.luxus.edel .kopfrechts > :nth-child(8) { --kd: .35s; }
body.luxus.edel .kopfrechts > :nth-child(n+9) { --kd: .4s; }
@keyframes kopfEin { from { opacity: 0; translate: 0 -14px; scale: .85; filter: blur(4px); } }

body.luxus.edel .kopfrechts :is(.kopfknopf, .chip, .online, .navname) {
  position: relative; isolation: isolate;
  translate: var(--zx, 0px) var(--zy, 0px);
  transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), translate .25s ease-out, box-shadow .3s,
              border-color .3s, background-color .3s, color .25s;
}
body.luxus.edel .kopfrechts :is(.kopfknopf, .chip) { overflow: hidden; }
body.luxus.edel .kopfrechts :is(.kopfknopf, .chip):hover {
  transform: translateY(-3px) scale(1.07); color: #fff;
  border-color: rgba(var(--gold-rgb), .75);
  background-color: rgba(var(--gold-rgb), .14);
  background-image: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), .42), transparent 70%);
  box-shadow: 0 12px 24px -12px rgba(var(--gold-rgb), .9), 0 0 0 1px rgba(var(--gold-rgb), .25),
              0 0 24px -6px rgba(var(--zweit-rgb), .6);
}
body.luxus.edel .kopfrechts :is(.kopfknopf, .chip):active { transform: translateY(0) scale(.93); transition-duration: .08s; }

/* In Ruhe wandert ein Glanzstreif der Reihe nach über die Knöpfe */
body.luxus.edel .kopfrechts .kopfknopf::before {
  z-index: -1; pointer-events: none;
  animation: kopfStreif 8s ease-in-out calc(var(--kd, 0s) * 6 + 2.5s) infinite;
}
@keyframes kopfStreif { 0%, 78% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Der aktive Kopfknopf (Dashboard) bekommt den umlaufenden Rand */
body.luxus.edel .kopfrechts .kopfknopf.an:not(.wartung-schalter):not(:hover) {
  border-color: transparent;
  background:
    linear-gradient(rgba(var(--kopf-rgb), .86), rgba(var(--kopf-rgb), .86)) padding-box,
    conic-gradient(from var(--kopf-winkel), var(--gold), var(--zweit) 25%, rgba(var(--gold-rgb), .12) 50%,
                   var(--zweit) 75%, var(--gold)) border-box;
  box-shadow: 0 0 18px -4px rgba(var(--gold-rgb), .6);
  animation: kopfEin .6s cubic-bezier(.2, .9, .3, 1.25) var(--kd, 0s) backwards, kopfWinkel 4s linear infinite;
}

/* Die Symbole spielen mit */
body.luxus.edel .kk-ico { display: inline-block; }
body.luxus.edel .kopfknopf:hover .kk-ico { animation: symbolHuepfen .7s cubic-bezier(.3, 1.4, .5, 1); }
body.luxus.edel .wartung-schalter:hover .kk-ico { animation: symbolSchrauben .8s ease-in-out; }
@keyframes symbolHuepfen {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-4px) scale(1.25) rotate(-8deg); }
  60%      { transform: translateY(1px) scale(.95) rotate(4deg); }
}
@keyframes symbolSchrauben {
  0%, 100% { transform: none; }
  20%      { transform: rotate(-28deg) scale(1.15); }
  45%      { transform: rotate(18deg) scale(1.15); }
  70%      { transform: rotate(-10deg); }
}
/* Wartung läuft: der Knopf glüht im Takt, das Werkzeug dreht nach */
body.luxus.edel .kopfrechts .wartung-schalter.an {
  animation: kopfEin .6s cubic-bezier(.2, .9, .3, 1.25) var(--kd, 0s) backwards, wartungPuls 2.2s ease-in-out infinite;
}
body.luxus.edel .wartung-schalter.an .kk-ico { animation: symbolSchrauben 2.2s ease-in-out infinite; }
@keyframes wartungPuls {
  0%, 100% { box-shadow: 0 0 10px -4px rgba(255, 170, 60, .7); }
  50%      { box-shadow: 0 0 22px -2px rgba(255, 170, 60, 1), 0 0 0 3px rgba(255, 170, 60, .15); }
}
/* „Bereiche": die vier Felder blinken reihum, beim Zeigen dreht das Raster */
body.luxus.edel .bereiche-zeichen { transition: transform .5s cubic-bezier(.2, 1.6, .4, 1); }
body.luxus.edel .kopfknopf.bereiche-knopf:hover .bereiche-zeichen { transform: rotate(90deg) scale(1.15); }
body.luxus.edel .bereiche-zeichen i { animation: rasterBlinken 3.2s ease-in-out infinite; }
body.luxus.edel .bereiche-zeichen i:nth-child(2) { animation-delay: .4s; }
body.luxus.edel .bereiche-zeichen i:nth-child(4) { animation-delay: .8s; }
body.luxus.edel .bereiche-zeichen i:nth-child(3) { animation-delay: 1.2s; }
@keyframes rasterBlinken { 0%, 60%, 100% { opacity: 1; scale: 1; } 30% { opacity: .35; scale: .7; } }
/* Die Wappen der anderen Bereiche drehen beim Zeigen eine Runde */
body.luxus.edel .kopfknopf.welt-knopf img { transition: filter .3s; }
body.luxus.edel .kopfknopf.welt-knopf:hover img {
  animation: wappenKreisen .9s cubic-bezier(.3, 1.2, .5, 1);
  filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .9));
}
@keyframes wappenKreisen { from { rotate: 0deg; scale: 1; } 50% { scale: 1.3; } to { rotate: 360deg; scale: 1; } }

/* „online": der Punkt sendet Ringe aus */
body.luxus.edel .kopfrechts .online:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 22px -12px rgba(16, 185, 129, .9), 0 0 18px -6px rgba(16, 185, 129, .7);
}
body.luxus.edel .online-punkt { position: relative; }
body.luxus.edel .online-punkt::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(16, 185, 129, .85);
  animation: onlineRing 2.4s ease-out .8s infinite;
}
@keyframes onlineRing { from { scale: 1; opacity: 1; } to { scale: 3.4; opacity: 0; } }

/* Das eigene Bild: ein Ring aus Verlauf kreist darum */
body.luxus.edel .kopfrechts .navname::before {
  content: ''; position: absolute; left: 1px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), var(--gold), transparent 28%, var(--zweit) 50%, transparent 78%, var(--gold));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: kopfWinkel 5s linear infinite;
  transition: scale .4s cubic-bezier(.2, 1.6, .4, 1);
}
body.luxus.edel .kopfrechts .navname:hover {
  border-color: rgba(var(--gold-rgb), .5); background-color: rgba(var(--gold-rgb), .12);
  box-shadow: 0 10px 22px -14px rgba(var(--gold-rgb), .9);
}
body.luxus.edel .kopfrechts .navname:hover::before { scale: 1.1; }
body.luxus.edel .kopfrechts .navname:hover .navbild { transform: scale(1.1) rotate(-6deg); }
@media (max-width: 620px) {
  body.luxus.edel .kopfrechts .navname::before { width: 32px; height: 32px; margin-top: -16px; }
}

/* „Abmelden": beim Zeigen färbt er sich rot, ein Pfeil fährt aus und stupst */
/* Der Pfeil liegt über dem Knopf, damit der Kopf nicht ins Rutschen kommt */
body.luxus.edel .ab-text { display: inline-block; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
body.luxus.edel .ab-pfeil {
  display: block; position: absolute; right: 3px; top: 50%; opacity: 0; translate: -8px -50%;
  font-size: 1.1em; line-height: 1; pointer-events: none;
  transition: opacity .25s, translate .35s cubic-bezier(.2, 1.6, .4, 1);
}
body.luxus.edel .kopf-ab:hover .ab-text { transform: translateX(-7px); }
body.luxus.edel .kopf-ab:hover .ab-pfeil {
  opacity: 1; translate: 0 -50%;
  animation: pfeilStupsen 1s ease-in-out .35s infinite;
}
@keyframes pfeilStupsen { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }
body.luxus.edel .kopfrechts .kopf-ab:hover {
  border-color: rgba(var(--blut-rgb), .7);
  background-image: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--blut-rgb), .45), transparent 70%);
  box-shadow: 0 12px 24px -12px rgba(var(--blut-rgb), .9), 0 0 0 1px rgba(var(--blut-rgb), .3);
}

/* Die Uhr: wechselnde Ziffern kippen herein, der Doppelpunkt blinkt */
body.luxus.edel .uhr-zeit .z, body.luxus.edel .uhr-zeit .dp { display: inline-block; }
body.luxus.edel .uhr-zeit .z.neu { animation: zifferKippen .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes zifferKippen {
  from { opacity: 0; transform: translateY(-70%) rotateX(80deg); filter: blur(2px); color: #fff;
         text-shadow: 0 0 12px rgba(var(--zweit-rgb), 1); }
  60%  { color: #fff; text-shadow: 0 0 10px rgba(var(--zweit-rgb), .8); }
}
body.luxus.edel .uhr-zeit .dp { animation: doppelpunkt 1s steps(1, end) infinite; }
@keyframes doppelpunkt { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  body.luxus.edel .hauptnav .navlink, body.luxus.edel .hauptnav .navlink .nb,
  body.luxus.edel .hauptnav .navlink::before, body.luxus.edel .hauptnav .navlink::after,
  body.luxus.edel .kopfrechts > *, body.luxus.edel .kopfrechts *,
  body.luxus.edel .kopfrechts *::before, body.luxus.edel .kopfrechts *::after { animation: none !important; }
  body.luxus.edel .hauptnav .navlink:hover, body.luxus.edel .kopfrechts :is(.kopfknopf, .chip, .online):hover,
  body.luxus.edel .kopfrechts .navname:hover .navbild { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — Abstimmung (abstimmung.php)
     Kopf      Wahlurne, in die ein Stimmzettel fällt; Zahlen, die
               hochlaufen; „warten auf dich" pulsiert
     Karten    fahren gestaffelt in 3D ein; laufende tragen einen Lichtkometen
               auf dem Rand und einen Live-Punkt
     Antworten Buchstabe A–D in eigener Farbe; ein Klick wirft Funken, die
               Balken füllen sich, die Prozente laufen hoch, vorn sitzt eine
               Krone, die eigene Wahl trägt „Deine Stimme"
     Formular  klappt weich auf, Antworten fliegen herein und hinaus, eine
               Vorschau zeigt die Abstimmung schon beim Schreiben
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopf ──────────────────────────────────────────────────────── */
.abst-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 210px;
  gap: 24px; align-items: center; margin-top: 22px; padding: 26px 30px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(255, 95, 162, .14), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(62, 224, 255, .1), transparent 60%),
    rgba(var(--flaeche-rgb), .78);
}
.abst-held::before {
  content: ''; position: absolute; right: -120px; top: 50%; width: 460px; height: 460px; margin-top: -230px;
  border-radius: 50%; pointer-events: none; opacity: .5;
  background: conic-gradient(from var(--kopf-winkel), rgba(169, 112, 255, .22), transparent 30%, rgba(255, 95, 162, .18) 50%,
              transparent 70%, rgba(62, 224, 255, .2) 85%, rgba(169, 112, 255, .22));
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent);
          mask: radial-gradient(closest-side, #000 30%, transparent);
  animation: kopfWinkel 14s linear infinite;
}
.abst-heldtext { position: relative; z-index: 1; }
body.luxus.edel .abst-held h1 {
  margin: 4px 0 6px; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.02;
  background: linear-gradient(95deg, #fff, #d9c7ff 25%, #ff9ccc 50%, #8ff0ff 75%, #fff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: abstSchrift 9s linear infinite;
}
@keyframes abstSchrift { to { background-position: -200% 0; } }
.abst-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.abst-zahl {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 255, 255, .02));
  animation: abstAuf .6s cubic-bezier(.2, .9, .3, 1.2) var(--d) backwards;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s;
}
.abst-zahl:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 12px 26px -14px var(--c); }
.abst-zahl strong {
  font-size: 32px; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent);
}
.abst-zahl small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--hell-rgb), .6); }
.abst-zahl.ruft { animation: abstAuf .6s cubic-bezier(.2, .9, .3, 1.2) var(--d) backwards, abstRufen 2.4s ease-out 1.2s infinite; }
.abst-zahl.ruft::after {
  content: ''; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 10px var(--c); animation: abstLive 1.4s ease-in-out infinite;
}
@keyframes abstAuf { from { opacity: 0; transform: translateY(12px) scale(.95); } }
@keyframes abstRufen {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes abstLive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }

/* Die Wahlurne: ein Zettel fällt hinein, der Haken zeichnet sich, die Urne glimmt */
.abst-urne { position: relative; z-index: 1; width: 210px; height: 210px; justify-self: center; }
.abst-urne svg { width: 100%; height: 100%; overflow: visible; }
.abst-urne :is(.abst-bahn, .abst-funke, .abst-zettel, .abst-kiste) { transform-box: view-box; transform-origin: 80px 80px; }
.abst-bahn { fill: none; stroke: url(#abstUrneVerlauf); stroke-width: 1.2; stroke-dasharray: 4 7; opacity: .6; animation: abstDrehen 30s linear infinite; }
.abst-bahn.b2 { stroke-dasharray: 1 5; opacity: .45; animation-duration: 22s; animation-direction: reverse; }
.abst-funke { fill: #ff9ccc; filter: drop-shadow(0 0 4px #ff5fa2); animation: abstDrehen 6s linear infinite; }
.abst-funke.f2 { fill: #8ff0ff; filter: drop-shadow(0 0 4px #3ee0ff); animation-duration: 9s; animation-direction: reverse; }
.abst-zettel { animation: abstZettel 4.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.abst-zettel rect { fill: rgba(255, 255, 255, .94); stroke: rgba(169, 112, 255, .6); stroke-width: 1; }
.abst-zettel .zeile { fill: none; stroke: rgba(86, 52, 170, .55); stroke-width: 3; stroke-linecap: round; }
.abst-zettel .haken {
  fill: none; stroke: #ff5fa2; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34; animation: abstHaken 4.2s ease-out infinite;
}
.abst-kiste {
  fill: rgba(var(--flaeche-rgb), .96); stroke: url(#abstUrneVerlauf); stroke-width: 2.4;
  animation: abstKiste 4.2s ease-in-out infinite;
}
.abst-schlitz { fill: #05030a; stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.abst-kante { fill: none; stroke: url(#abstUrneVerlauf); stroke-width: 2; stroke-linecap: round; opacity: .55; }
@keyframes abstDrehen { to { transform: rotate(360deg); } }
@keyframes abstZettel {
  0%       { transform: translateY(-22px) rotate(-8deg); opacity: 0; }
  12%      { opacity: 1; }
  40%, 56% { transform: translateY(0) rotate(0); opacity: 1; }
  84%      { transform: translateY(62px); opacity: 1; }
  90%, 100% { transform: translateY(62px); opacity: 0; }
}
@keyframes abstHaken { 0%, 22% { stroke-dashoffset: 34; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes abstKiste {
  0%, 76%, 100% { filter: drop-shadow(0 0 6px rgba(169, 112, 255, .35)); }
  88%           { filter: drop-shadow(0 0 22px rgba(255, 95, 162, .95)); }
}

/* ── Leiste: Filter und „Neue Abstimmung" ─────────────────────── */
.abst-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 14px; }
.abst-filter {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(var(--flaeche-rgb), .72); border: 1px solid rgba(var(--gold-rgb), .18);
}
.abst-pille {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: rgba(var(--hell-rgb), .62); font: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: color .25s, background .3s, box-shadow .3s, transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.abst-pille span {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 11px; text-align: center;
  background: rgba(255, 255, 255, .08); color: rgba(var(--hell-rgb), .8);
}
.abst-pille:hover { color: #fff; transform: translateY(-2px); }
.abst-pille.an {
  color: #fff;
  background: linear-gradient(110deg, rgba(169, 112, 255, .5), rgba(255, 95, 162, .32) 55%, rgba(62, 224, 255, .3));
  box-shadow: 0 0 18px -6px #a970ff, inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.abst-pille.an span { background: rgba(0, 0, 0, .3); color: #fff; }
.abst-neuknopf .plus { display: inline-block; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.abst-neuknopf.offen .plus { transform: rotate(45deg); }

/* ── Eine neue Abstimmung ──────────────────────────────────────── */
.abst-neu {
  display: grid; grid-template-rows: 1fr; margin-bottom: 18px;
  transition: grid-template-rows .5s cubic-bezier(.2, .8, .3, 1), opacity .35s, padding .4s, margin .4s, border-width .4s, visibility 0s;
}
.abst-neu > form { min-height: 0; overflow: hidden; }
.abst-neu.zu {
  grid-template-rows: 0fr; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; visibility: hidden;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .6, 1), opacity .3s, padding .4s, margin .4s, border-width .4s, visibility 0s .45s;
}
.abst-neuform { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; padding: 2px; }
.abst-feld { position: relative; }
.abst-themafeld { width: 100%; padding-right: 54px !important; font-size: 18px !important; }
.abst-rest {
  position: absolute; right: 14px; top: 50%; translate: 0 -50%; font-size: 12px; color: rgba(var(--hell-rgb), .45);
  font-variant-numeric: tabular-nums; transition: color .2s;
}
.abst-rest.knapp { color: #ff5fa2; }
.abst-antwortlabel { margin-top: 16px; }
.abst-antwortlabel small { opacity: .6; letter-spacing: .04em; }
.abst-antwortzeile {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 10px; align-items: center; margin-bottom: 10px;
}
.abst-antwortzeile .input { width: 100%; transition: border-color .25s, box-shadow .25s; }
.abst-antwortzeile .input:focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.abst-antwortzeile.kommt { animation: abstZeileEin .45s cubic-bezier(.2, .9, .3, 1.3); }
.abst-antwortzeile.geht { overflow: hidden; animation: abstZeileAus .28s ease-in forwards; }
@keyframes abstZeileEin { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
@keyframes abstZeileAus { from { max-height: 60px; } to { opacity: 0; transform: translateX(26px) scale(.94); max-height: 0; margin-bottom: 0; } }
.abst-entfernen {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), .25); cursor: pointer;
  background: rgba(255, 255, 255, .03); color: rgba(var(--hell-rgb), .7); font-size: 20px; line-height: 1;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), color .2s, border-color .2s, background .2s;
}
.abst-entfernen:not(:disabled):hover { transform: rotate(90deg) scale(1.1); color: #ffb3c8; border-color: rgba(255, 95, 162, .6); background: rgba(255, 95, 162, .12); }
.abst-entfernen:disabled { opacity: .22; cursor: default; }
.abst-hinzu {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border-radius: 14px; cursor: pointer;
  border: 1px dashed rgba(var(--gold-rgb), .4); background: rgba(var(--gold-rgb), .04); color: rgba(var(--hell-rgb), .8);
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .25s, background .25s, color .25s, transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.abst-hinzu span { display: inline-block; font-size: 18px; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.abst-hinzu:hover { border-style: solid; border-color: rgba(var(--gold-rgb), .8); background: rgba(var(--gold-rgb), .12); color: #fff; transform: translateY(-2px); }
.abst-hinzu:hover span { transform: rotate(180deg) scale(1.2); }
.abst-neufuss { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.abst-starten span { display: inline-block; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.abst-starten:hover span { transform: translateX(5px); }
.abst-vorschau {
  position: relative; align-self: start; padding: 14px; border-radius: 22px;
  border: 1px dashed rgba(var(--gold-rgb), .28); background: rgba(0, 0, 0, .16);
}
.abst-vorschautitel { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.abst-umfrage.vorschau { animation: none; }
.abst-umfrage.vorschau .abst-option { cursor: default; animation: none; }
.abst-thema.leer, .abst-option.leer .abst-antwort { opacity: .45; }

/* ── Die Karten ────────────────────────────────────────────────── */
.abst-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px;
  perspective: 1400px; margin-bottom: 26px;
}
.abst-umfrage {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px 18px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(var(--gold-rgb), .1), rgba(var(--flaeche-rgb), 0) 45%), rgba(var(--flaeche-rgb), .84);
  border: 1px solid rgba(var(--gold-rgb), .2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 26px 50px -30px rgba(0, 0, 0, .95);
  animation: abstKarteEin .75s cubic-bezier(.2, .9, .3, 1.1) calc(var(--i, 0) * 90ms + 150ms) backwards;
  transition: border-color .3s, box-shadow .35s, transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.abst-umfrage[hidden] { display: none; }
.abst-umfrage:not(.vorschau):hover {
  transform: translateY(-3px); border-color: rgba(var(--gold-rgb), .4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px -30px rgba(0, 0, 0, 1), 0 0 44px -18px rgba(var(--gold-rgb), .9);
}
@keyframes abstKarteEin { from { opacity: 0; transform: translateY(28px) rotateX(12deg) scale(.96); filter: blur(5px); } }
/* Laufende Abstimmungen: ein Lichtkomet zieht über den Rand */
.abst-umfrage.laeuft::before {
  content: ''; position: absolute; inset: 0; z-index: 3; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), transparent 0 58%, rgba(62, 224, 255, .9) 72%,
              rgba(255, 95, 162, .9) 82%, rgba(169, 112, 255, 1) 90%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 6s linear infinite;
}
.abst-schimmer {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  animation: abstSchimmer 8s ease-in-out calc(var(--i, 0) * 1.3s + 2s) infinite;
}
@keyframes abstSchimmer { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.abst-umfragekopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.abst-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8ff0ff; background: rgba(62, 224, 255, .1); border: 1px solid rgba(62, 224, 255, .35);
}
.abst-status i { width: 8px; height: 8px; border-radius: 50%; background: #3ee0ff; box-shadow: 0 0 10px #3ee0ff; animation: abstLive 1.6s ease-in-out infinite; }
.beendet .abst-status { color: rgba(var(--hell-rgb), .62); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.beendet .abst-status i { background: #8a7fa0; box-shadow: none; animation: none; }
.abst-meta { font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.abst-thema { margin: 0; font-size: clamp(22px, 2.4vw, 29px); line-height: 1.1; color: #fff; overflow-wrap: anywhere; }

/* ── Die Antworten ─────────────────────────────────────────────── */
.abst-wahl { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.abst-option {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 9px 16px 9px 10px; border-radius: 16px; text-align: left; cursor: pointer;
  font: inherit; color: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(255, 255, 255, .02) 70%);
  animation: abstOptionEin .55s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i, 0) * 90ms + var(--d, 0ms) + 380ms) backwards;
  transition: transform .4s cubic-bezier(.2, 1.5, .4, 1), border-color .25s, box-shadow .3s;
}
@keyframes abstOptionEin { from { opacity: 0; transform: translateX(-16px); } }
.abst-option:disabled { cursor: default; }
.laeuft .abst-option:not(:disabled):hover {
  transform: translateX(5px) scale(1.012); border-color: var(--c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 12px 28px -14px var(--c), 0 0 32px -12px var(--c);
}
.laeuft .abst-option:not(:disabled):active { transform: scale(.98); transition-duration: .08s; }
.abst-option .abst-buchstabe { transition: transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.laeuft .abst-option:not(:disabled):hover .abst-buchstabe { transform: rotate(-12deg) scale(1.12); }
.abst-buchstabe {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px;
  font-size: 18px; font-weight: 700; line-height: 1; color: #0b0614;
  background: radial-gradient(120% 95% at 28% 12%, color-mix(in srgb, var(--c) 50%, #fff), var(--c) 50%,
              color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 0 16px -4px var(--c), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 6px rgba(0, 0, 0, .25);
}
.abst-antwort { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: .03em; overflow-wrap: break-word; hyphens: auto; }
/* Der Balken füllt sich, sobald das Ergebnis zu sehen ist */
.abst-balken {
  position: absolute; inset: 0; z-index: -1; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 52%, transparent), color-mix(in srgb, var(--c) 24%, transparent));
  transition: transform 1.15s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms);
}
.abst-balken::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-100%); animation: abstBalkenGlanz 3.2s ease-in-out infinite;
}
@keyframes abstBalkenGlanz { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.zeigt .abst-balken { transform: scaleX(calc(var(--anteil, 0) / 100)); }
.zeigt.wartet .abst-balken { transform: scaleX(0); }
.zeigt .vorn .abst-balken {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 72%, transparent), color-mix(in srgb, var(--c) 36%, transparent));
}
.abst-wert { display: none; flex: none; margin-left: auto; text-align: right; line-height: 1; }
.zeigt .abst-wert { display: grid; justify-items: end; gap: 4px; animation: abstWertEin .5s cubic-bezier(.2, .9, .3, 1.2) var(--d, 0ms) backwards; }
.abst-prozent { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); }
.abst-wert small { font-size: 13px; opacity: .7; margin-left: 1px; }
.abst-wert > b, .abst-wert > small { grid-row: 1; }
.abst-wert { grid-template-columns: auto auto; align-items: baseline; }
.abst-anzahl { grid-column: 1 / -1; font-style: normal; font-size: 11px; letter-spacing: .06em; color: rgba(var(--hell-rgb), .62); }
@keyframes abstWertEin { from { opacity: 0; transform: translateX(12px); } }
.abst-krone { display: none; flex: none; color: #f5d27a; font-size: 18px; text-shadow: 0 0 12px rgba(245, 184, 74, .9); }
.zeigt .vorn .abst-krone { display: inline-block; animation: abstKrone 2.4s ease-in-out infinite; }
@keyframes abstKrone { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-3px) rotate(8deg); } }
.abst-deine {
  display: none; flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: 0 0 14px -4px var(--c);
}
.abst-option.meine .abst-deine { display: inline-block; animation: abstDeineEin .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes abstDeineEin { from { opacity: 0; transform: scale(.3); } }
.abst-option.meine {
  border-color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c), 0 0 28px -10px var(--c);
}
.abst-option.gewaehlt { animation: abstGewaehlt .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes abstGewaehlt { 0% { transform: scale(1); } 30% { transform: scale(.96); } 65% { transform: scale(1.03); } 100% { transform: scale(1); } }
.sendet .abst-option { pointer-events: none; }
.abst-funken {
  position: fixed; z-index: 70; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 255, 255, .7);
}
.abst-tipp { margin: -2px 0 0; font-size: 14px; color: rgba(var(--hell-rgb), .55); }
.abst-tipp::before { content: '›'; margin-right: 6px; color: var(--zweit); }

/* ── Der Fuß: Beteiligung und Werkzeuge ───────────────────────── */
.abst-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid rgba(var(--gold-rgb), .12);
}
.abst-teilnahme { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.abst-ring { width: 38px; height: 38px; flex: none; transform: rotate(-90deg); }
.abst-ring circle { fill: none; stroke-width: 4; }
.abst-ring .grund { stroke: rgba(255, 255, 255, .08); }
.abst-ring .wert {
  stroke: url(#abstUrneVerlauf); stroke-linecap: round; stroke-dasharray: var(--quote, 0) 100;
  transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1); animation: abstRingEin 1.4s cubic-bezier(.2, .8, .2, 1) .5s backwards;
}
@keyframes abstRingEin { from { stroke-dasharray: 0 100; } }
.abst-teilzahl { font-size: 13px; color: rgba(var(--hell-rgb), .7); white-space: nowrap; }
.abst-teilzahl b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.abst-gesichter { display: inline-flex; padding-left: 8px; }
.abst-gesicht {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, var(--c, #a970ff), rgba(0, 0, 0, .55));
  box-shadow: 0 0 0 2px rgba(var(--flaeche-rgb), 1);
  animation: abstGesichtEin .45s cubic-bezier(.2, 1.5, .4, 1) calc(var(--n, 0) * 60ms + 450ms) backwards;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.abst-gesicht:hover { transform: translateY(-4px) scale(1.18); z-index: 2; }
.abst-gesicht img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abst-gesicht i { font-style: normal; font-size: 13px; font-weight: 700; color: #0f0b09; }
.abst-gesicht.mehr { background: rgba(255, 255, 255, .1); color: #fff; font-size: 11px; font-weight: 700; }
@keyframes abstGesichtEin { from { opacity: 0; transform: scale(.3) translateY(6px); } }
.abst-werkzeuge { display: flex; gap: 8px; }
.abst-werkzeuge form { margin: 0; }
.abst-werkzeug {
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--hell-rgb), .8);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--gold-rgb), .25);
  transition: color .2s, border-color .2s, box-shadow .3s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.abst-werkzeug:hover { color: #fff; border-color: rgba(var(--gold-rgb), .65); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(var(--gold-rgb), .9); }
.abst-werkzeug.gefahr:hover { color: #ffb3c8; border-color: rgba(255, 95, 162, .7); box-shadow: 0 8px 18px -10px rgba(255, 95, 162, .9); }

.abst-nichts { padding: 30px 0; text-align: center; color: rgba(var(--hell-rgb), .5); }
.abst-neues {
  position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 9px 10px 9px 18px; border-radius: 999px; font-size: 14px; color: #fff;
  background: rgba(var(--kopf-rgb), .92); border: 1px solid rgba(62, 224, 255, .45); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -16px #000, 0 0 30px -10px #3ee0ff;
  animation: abstToast .5s cubic-bezier(.2, 1.4, .4, 1);
}
.abst-neues button {
  padding: 6px 13px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; color: #0b0614;
  background: linear-gradient(110deg, #a970ff, #3ee0ff);
}
@keyframes abstToast { from { opacity: 0; translate: -50% 24px; } }

@media (max-width: 900px) {
  .abst-neuform { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .abst-held { grid-template-columns: 1fr; padding: 22px 18px; }
  .abst-urne { width: 140px; height: 140px; order: -1; }
  .abst-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abst-leiste { flex-direction: column; align-items: stretch; }
  .abst-filter { border-radius: 18px; justify-content: center; }
}
@media (max-width: 480px) {
  .abst-umfrage { padding: 16px 14px 14px; }
  .abst-option { min-height: 52px; gap: 10px; padding-right: 12px; }
  .abst-antwort { font-size: 15px; }
  .abst-deinetext { display: none; }
  .abst-deine { padding: 3px 7px; }
  .abst-krone { font-size: 15px; }
  .abst-prozent { font-size: 20px; }
  .abst-pille { padding: 7px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .abst-held::before, .abst-held h1, .abst-zahl, .abst-zahl.ruft, .abst-zahl.ruft::after, .abst-urne *,
  .abst-umfrage, .abst-umfrage::before, .abst-schimmer, .abst-status i, .abst-option, .abst-balken::after,
  .abst-krone, .abst-deine, .abst-gesicht, .abst-ring .wert, .abst-wert, .abst-neues { animation: none !important; }
  .abst-balken, .abst-neu { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Vindicta — Bloodout-Vormerkung (vindicta.php, vindicta.js)
     Tropfen   je Zeile ein Haken in Tropfenform: beim Zeigen steigt das
               Blut halb, beim Vormerken ganz — mit Welle, Glanz, Herzschlag
               und einem Tropfen, der darunter fällt
     Zeile     läuft von links rot voll, ein Glanz zieht darüber, die Nummer
               schlägt im Takt des Tropfens, am Namen flackert „Bloodout?"
     Kopf      die Zahl der Vorgemerkten pulsiert; „Nur Vorgemerkte" filtert
   ═══════════════════════════════════════════════════════════════════ */
.vind-blut-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.vind-bo { width: 44px; min-width: 44px; background: #000 !important; }
.vind-name { position: relative; }

/* Ein kleiner Tropfen aus CSS — im Kopf, am Filter, in der Spalte */
.vd-blutzahl-tropfen {
  display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 0 50% 50% 50%;
  transform: rotate(45deg); background: linear-gradient(225deg, #ff6b7d, #b00a26);
  box-shadow: 0 0 8px rgba(255, 42, 68, .7);
}

/* ── Der Tropfen ───────────────────────────────────────────────── */
.vind-blut {
  position: relative; display: grid; place-items: center; height: 100%; min-height: 30px;
  padding: 3px 0; cursor: pointer;
}
.vind-blut input { position: absolute; opacity: 0; width: 0; height: 0; }
.vind-blut svg {
  width: 17px; height: 23px; overflow: visible;
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), filter .3s;
}
.vind-blut .huelle { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .34); stroke-width: 1.4; transition: stroke .3s, fill .3s; }
.vind-blut .pegel { transform: translateY(32px); transition: transform .75s cubic-bezier(.3, .8, .25, 1); }
.vind-blut .blut { fill: url(#vindBlutVerlauf); animation: vindWelle 1.6s linear infinite; }
.vind-blut .glanz { fill: none; stroke: rgba(255, 255, 255, 0); stroke-width: 1.6; stroke-linecap: round; transition: stroke .4s .3s; }
@keyframes vindWelle { to { transform: translateX(24px); } }
.vind-blut:hover svg { transform: scale(1.2) rotate(-7deg); }
.vind-blut:hover .huelle { stroke: #ff5468; }
.vind-blut:hover .pegel { transform: translateY(19px); }
.vind-blut input:focus-visible ~ svg { outline: 2px solid #ff5468; outline-offset: 3px; border-radius: 4px; }
.vind-blut input:checked ~ svg .pegel { transform: translateY(-3px); }
.vind-blut input:checked ~ svg .huelle { stroke: #ff8a98; fill: #3a0008; }
.vind-blut input:checked ~ svg .glanz { stroke: rgba(255, 255, 255, .75); }
.vind-blut input:checked ~ svg {
  filter: drop-shadow(0 0 6px rgba(255, 30, 60, .85));
  animation: vindHerz 1.5s ease-in-out infinite;
}
@keyframes vindHerz {
  0%, 40%, 100% { transform: scale(1); }
  12%           { transform: scale(1.22); }
  24%           { transform: scale(1.02); }
  32%           { transform: scale(1.12); }
}
/* Darunter fällt ab und zu ein Tropfen */
.vind-blut-fall {
  position: absolute; left: 50%; top: 60%; width: 4px; height: 5px; margin-left: -2px; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #ff2a44; opacity: 0;
}
.vind-blut input:checked ~ .vind-blut-fall { animation: vindFall 2.6s ease-in .6s infinite; }
@keyframes vindFall {
  0%, 55% { opacity: 0; transform: translateY(0) scale(.3); }
  62%     { opacity: 1; transform: translateY(2px) scale(1); }
  92%     { opacity: .9; transform: translateY(15px) scale(.8, 1.4); }
  100%    { opacity: 0; transform: translateY(19px) scale(.5); }
}
.vind-blut.laedt { pointer-events: none; }
/* Frisch vorgemerkt: der Tropfen fällt herein, ein Ring schlägt aus */
.frisch .vind-blut input:checked ~ svg {
  animation: vindLanden .75s cubic-bezier(.3, 1.4, .5, 1), vindHerz 1.5s ease-in-out .75s infinite;
}
@keyframes vindLanden {
  0%   { transform: translateY(-26px) scale(.7, 1.3); opacity: 0; }
  45%  { transform: translateY(0) scale(1.3, .72); opacity: 1; }
  65%  { transform: scale(.88, 1.12); }
  82%  { transform: scale(1.06, .95); }
  100% { transform: scale(1); }
}
.frisch .vind-blut::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid #ff2a44; pointer-events: none;
  animation: vindRing .8s ease-out .3s backwards;
}
@keyframes vindRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }
.vind-spritzer {
  position: fixed; z-index: 80; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #ff8a98, #c8102e 60%, #6e0014);
  box-shadow: 0 0 6px rgba(255, 42, 68, .8);
}

/* ── Die vorgemerkte Zeile ─────────────────────────────────────── */
/* Vor der allgemeinen Hover-Regel der Tabellen (body.luxus.edel .panel table tbody tr:hover) */
body.luxus.edel .panel table.vind tr.vind-zeile.bloodout,
table.vind tr.vind-zeile.bloodout {
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 90, 110, .2) 50%, transparent 62%) 150% 0 / 300% 100% no-repeat,
    linear-gradient(90deg, rgba(185, 12, 36, .6), rgba(125, 6, 24, .42) 55%, rgba(70, 3, 14, .32)) 0 0 / 100% 100% no-repeat,
    #0c0204;
  animation: vindBlutGlanz 5.5s ease-in-out 1s infinite;
}
@keyframes vindBlutGlanz { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
table.vind tr.vind-zeile.bloodout > td { background: transparent !important; border-color: rgba(255, 120, 135, .9); }
/* Frisch vorgemerkt: das Blut läuft von links ein */
table.vind tr.vind-zeile.bloodout.frisch {
  animation: vindBlutEin .9s cubic-bezier(.3, .7, .2, 1), vindBlutGlanz 5.5s ease-in-out 1s infinite;
}
@keyframes vindBlutEin {
  from { background-size: 300% 100%, 0% 100%; }
  to   { background-size: 300% 100%, 100% 100%; }
}
/* Aufgehoben: es läuft nach rechts ab */
table.vind tr.vind-zeile.bloodout.blut-weg { animation: vindBlutAus .65s ease-in forwards; }
@keyframes vindBlutAus {
  from { background-size: 300% 100%, 100% 100%; background-position: 150% 0, 100% 0; background-color: #0c0204; }
  to   { background-size: 300% 100%, 0% 100%; background-position: 150% 0, 100% 0; background-color: #111; }
}
/* Die Nummer schlägt im Takt des Tropfens */
table.vind tr.bloodout td.vind-nr {
  color: #ff6b7d; text-shadow: 0 0 8px rgba(255, 42, 68, .9);
  animation: vindNrPuls 1.5s ease-in-out infinite;
}
@keyframes vindNrPuls {
  0%, 40%, 100% { box-shadow: inset 4px 0 0 #ff2a44; }
  12%           { box-shadow: inset 4px 0 0 #ff8a98, inset 18px 0 16px -10px rgba(255, 42, 68, .9); }
  32%           { box-shadow: inset 4px 0 0 #ff5468, inset 12px 0 12px -8px rgba(255, 42, 68, .6); }
}
.vind-feld-name { transition: color .4s, text-shadow .4s; }
table.vind tr.bloodout .vind-feld { color: #ffd4da; }
table.vind tr.bloodout .vind-feld-name { color: #ff7d8c; text-shadow: 0 0 10px rgba(255, 42, 68, .8); padding-right: 92px; }
table.vind tr.bloodout.frisch .vind-feld-name { animation: vindNameBlut 1s ease-out; }
@keyframes vindNameBlut { from { color: #fff; text-shadow: 0 0 20px #ff2a44, 0 0 3px #fff; letter-spacing: .08em; } }
table.vind tr.bloodout .vind-rangwahl { box-shadow: 0 0 0 1px rgba(255, 60, 80, .6), 0 0 14px -4px rgba(255, 42, 68, .9); }

/* „Bloodout?" am Namen: flackert ab und zu, ein Tropfen löst sich */
.vind-blut-schild {
  display: none; position: absolute; right: 7px; top: 50%; translate: 0 -50%; pointer-events: none;
  align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: #fff;
  background: linear-gradient(180deg, #e3203c, #8a0016); border: 1px solid rgba(255, 150, 160, .7);
  box-shadow: 0 0 12px -2px rgba(255, 30, 60, .9);
}
.vind-blut-schild::before {
  content: ''; width: 6px; height: 6px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: #fff;
}
.vind-blut-schild::after {
  content: ''; position: absolute; left: 13px; top: 100%; width: 3px; height: 4px; border-radius: 50%;
  background: #e3203c; animation: vindSchildTropf 2.4s ease-in 1.2s infinite; opacity: 0;
}
@keyframes vindSchildTropf {
  0%, 50% { opacity: 0; transform: translateY(-3px) scale(.4); }
  58%     { opacity: 1; transform: translateY(0) scale(1); }
  100%    { opacity: 0; transform: translateY(12px) scale(.7, 1.4); }
}
table.vind tr.bloodout .vind-blut-schild {
  display: inline-flex;
  animation: vindSchildEin .5s cubic-bezier(.2, 1.6, .4, 1) .2s backwards, vindFlackern 5s steps(1) 1.4s infinite;
}
@keyframes vindSchildEin { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
@keyframes vindFlackern {
  0%, 90%, 96%, 100% { opacity: 1; }
  91%, 94%           { opacity: .3; }
  92%                { opacity: .95; transform: translateX(1px); }
}

/* ── Kopf: die Zahl der Vorgemerkten ───────────────────────────── */
.vd-blutzahl { position: relative; }
.vd-blutzahl .vd-blutzahl-tropfen { position: absolute; top: 11px; right: 12px; }
.vd-blutzahl.an {
  border-color: rgba(255, 42, 68, .6);
  background: linear-gradient(150deg, rgba(200, 16, 46, .28), rgba(0, 0, 0, .3));
  animation: vindKennPuls 1.5s ease-in-out infinite;
}
.vd-blutzahl.an strong { color: #ff6b7d; text-shadow: 0 0 14px rgba(255, 42, 68, .9); }
.vd-blutzahl.an .vd-blutzahl-tropfen { animation: vindTropfenPuls 1.5s ease-in-out infinite; }
.vd-blutzahl:not(.an) .vd-blutzahl-tropfen { opacity: .35; box-shadow: none; }
@keyframes vindKennPuls {
  0%, 40%, 100% { box-shadow: 0 0 0 0 rgba(255, 42, 68, 0); }
  12%           { box-shadow: 0 0 24px -4px rgba(255, 42, 68, .85); }
}
@keyframes vindTropfenPuls { 0%, 40%, 100% { transform: rotate(45deg) scale(1); } 12% { transform: rotate(45deg) scale(1.4); } }
.vind-stoss { animation: vindStoss .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes vindStoss { 40% { transform: scale(1.5); } }

/* „Nur Vorgemerkte" neben der Suche */
.vd-werkzeug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-blutfilter {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #ffb3bd; background: rgba(200, 16, 46, .1); border: 1px solid rgba(255, 60, 80, .45);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s, color .25s, background .3s;
}
.vd-blutfilter b {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 12px; color: #fff; background: rgba(255, 42, 68, .28);
}
.vd-blutfilter:hover:not(:disabled) { transform: translateY(-2px); color: #fff; border-color: #ff5468; box-shadow: 0 10px 22px -12px rgba(255, 42, 68, .95); }
.vd-blutfilter[aria-pressed="true"] {
  color: #fff; border-color: #ff7a8a;
  background: linear-gradient(110deg, #c8102e, #6e0014);
  box-shadow: 0 0 22px -6px rgba(255, 42, 68, .95);
}
.vd-blutfilter[aria-pressed="true"] .vd-blutzahl-tropfen { background: #fff; animation: vindTropfenPuls 1.5s ease-in-out infinite; }
.vd-blutfilter:disabled { opacity: .38; cursor: default; }
table.vind.nur-blut tr.vind-zeile:not(.bloodout) { display: none; }

@media (max-width: 900px) {
  .vind-blut-schild { font-size: 0; gap: 0; padding: 4px 5px; }
  table.vind tr.bloodout .vind-feld-name { padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .vind-blut svg, .vind-blut .blut, .vind-blut-fall, .frisch .vind-blut::after, table.vind tr.vind-zeile.bloodout,
  table.vind tr.bloodout td.vind-nr, table.vind tr.bloodout .vind-feld-name, .vind-blut-schild, .vind-blut-schild::after,
  .vd-blutzahl, .vd-blutzahl-tropfen, .vind-stoss { animation: none !important; }
  .vind-blut .pegel, .vind-blut svg { transition: none; }
}


/* ── Abstimmung: wer was gewählt hat ──────────────────────────────
   In jeder Antwort stehen unter ihrem Text die Namen derer, die sie
   gewählt haben — lesbar, ohne Klick. Darunter zum Aufklappen dieselben
   Namen mit Bild, Antwort für Antwort. Beides erscheint mit dem Ergebnis. */
.abst-antwortblock { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.abst-antwortblock .abst-antwort { flex: none; }
.abst-optnamen {
  display: none; flex-wrap: wrap; align-items: baseline; row-gap: 2px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.35; color: rgba(255, 255, 255, .82);
  text-transform: none;
}
.zeigt .abst-optnamen:not(:empty) { display: flex; }
.abst-optname { white-space: nowrap; animation: abstOptnameEin .4s ease calc(var(--n, 0) * 35ms + 250ms) backwards; }
.abst-optname + .abst-optname::before {
  content: '·'; display: inline-block; margin: 0 7px; font-weight: 700;
  color: color-mix(in srgb, var(--c, #a970ff) 70%, #fff);
}
.abst-optname.ich { color: #fff; text-shadow: 0 0 10px var(--c, #a970ff); }
@keyframes abstOptnameEin { from { opacity: 0; transform: translateY(4px); } }

.abst-namen {
  display: none; overflow: hidden; border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(0, 0, 0, .18);
  transition: border-color .3s, box-shadow .3s;
}
.zeigt .abst-namen { display: block; }
.abst-namen[open] { border-color: rgba(var(--gold-rgb), .34); box-shadow: inset 0 0 30px -18px rgba(var(--gold-rgb), .7); }
.abst-namen > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--hell-rgb), .8);
  transition: background .25s, color .25s;
}
.abst-namen > summary::-webkit-details-marker { display: none; }
.abst-namen > summary:hover { background: rgba(var(--gold-rgb), .08); color: #fff; }
.abst-namen > summary::after {
  content: '›'; margin-left: auto; font-size: 22px; line-height: 1;
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1);
}
.abst-namen[open] > summary::after { transform: rotate(90deg); }
.abst-namenzahl {
  min-width: 22px; padding: 1px 8px; border-radius: 999px; text-align: center;
  font-size: 11px; letter-spacing: .04em; color: #fff; background: rgba(255, 255, 255, .09);
}
.abst-namenliste { display: grid; gap: 12px; padding: 4px 14px 14px; }
.abst-namen[open] .abst-namenliste { animation: abstNamenAuf .45s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes abstNamenAuf { from { opacity: 0; transform: translateY(-8px); } }
.abst-namengruppe { display: grid; gap: 7px; padding-left: 11px; border-left: 3px solid var(--c); }
.abst-namenkopf { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
.abst-namenkopf .abst-buchstabe { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.abst-namenkopf > span:not(.abst-buchstabe) { min-width: 0; overflow-wrap: break-word; }
.abst-namenkopf small { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; color: rgba(var(--hell-rgb), .55); }
.abst-namenreihe { display: flex; flex-wrap: wrap; gap: 6px; }
.abst-name {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border-radius: 999px;
  font-size: 13px; color: #fff;
  background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s;
}
.abst-namen[open] .abst-name { animation: abstNameEin .45s cubic-bezier(.2, 1.5, .4, 1) calc(var(--n, 0) * 40ms + 120ms) backwards; }
@keyframes abstNameEin { from { opacity: 0; transform: translateY(6px) scale(.85); } }
.abst-name:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 8px 18px -10px var(--c); }
.abst-name.ich { border-color: var(--c); box-shadow: 0 0 14px -4px var(--c); }
.abst-name em {
  padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--c); color: #0b0614;
}
.abst-name .abst-gesicht { width: 24px; height: 24px; margin: 0; box-shadow: none; animation: none; }
.abst-name .abst-gesicht i { font-size: 11px; }
.abst-niemand { font-size: 12px; font-style: italic; color: rgba(var(--hell-rgb), .42); }

@media (max-width: 480px) {
  .abst-optnamen { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .abst-namen[open] .abst-namenliste, .abst-namen[open] .abst-name, .abst-optname { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — Verwaltung (verwaltung.php)
     Kopf       Emblem mit kreisenden Trabanten in den Farben der Rubriken
     Reiter     vier Kacheln, die aktive mit umlaufendem Rand und einem
                Lichtbalken, der zur gewählten gleitet
     Gangwar    nächster Kampf mit Countdown, kippenden Ziffern, Glut und
                Aufstellung; der letzte als Anzeigetafel mit Urteil; Bilanz
                als Ring und Band; Verlauf als Zeilen
     Fahrzeuge  Karten mit Kennzeichen, Farbe und Code zum Kopieren
     Kleidung   zwei Spalten — Männer und Frauen — mit Codes zum Kopieren
   ═══════════════════════════════════════════════════════════════════ */
.rt-held .rt-heldtext h2.rt-titelgross { margin: 4px 0 6px; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; }

/* ── Kopf ──────────────────────────────────────────────────────── */
.vw-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 180px;
  gap: 22px; align-items: center; margin-top: 22px; padding: 26px 30px;
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(255, 77, 106, .14), transparent 55%),
    radial-gradient(70% 120% at 0% 100%, rgba(62, 224, 255, .1), transparent 60%),
    rgba(var(--flaeche-rgb), .8);
}
.vw-heldtext { position: relative; z-index: 1; }
body.luxus.edel .vw-held h1 {
  margin: 4px 0 6px; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.02;
  background: linear-gradient(95deg, #fff, #ffb3c1 25%, #d9c7ff 50%, #8ff0ff 75%, #fff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vwSchrift 9s linear infinite;
}
@keyframes vwSchrift { to { background-position: -200% 0; } }
.vw-emblem { width: 180px; height: 180px; justify-self: center; }
.vw-emblem svg { width: 100%; height: 100%; overflow: visible; }
.vw-emblem :is(.vw-ring, .vw-sechseck, .vw-trabant) { transform-box: view-box; transform-origin: 80px 80px; }
.vw-ring { fill: none; stroke: url(#vwVerlauf); stroke-width: 1.2; stroke-dasharray: 3 7; opacity: .55; animation: vwDrehen 34s linear infinite; }
.vw-ring.r2 { stroke-dasharray: 1 5; opacity: .4; animation-duration: 24s; animation-direction: reverse; }
.vw-sechseck { fill: rgba(var(--flaeche-rgb), .9); stroke: url(#vwVerlauf); stroke-width: 2; animation: vwAtmen 4s ease-in-out infinite; }
.vw-sechseck.innen { fill: none; stroke-width: 1; opacity: .5; animation: vwDrehen 20s linear infinite reverse; }
.vw-trabant { animation: vwDrehen 12s linear infinite; animation-delay: calc(var(--i) * -.4s); }
.vw-trabant circle { filter: drop-shadow(0 0 6px currentColor); }
.vw-emblemtext {
  font-size: 38px; font-weight: 700; text-anchor: middle; fill: #fff;
  filter: drop-shadow(0 0 10px rgba(193, 140, 255, .9));
}
@keyframes vwDrehen { to { transform: rotate(360deg); } }
@keyframes vwAtmen { 0%, 100% { filter: drop-shadow(0 0 4px rgba(193, 140, 255, .4)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 77, 106, .7)); } }

/* ── Reiter ────────────────────────────────────────────────────── */
.vw-reiter {
  position: relative; display: grid; grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); gap: 12px;
  margin: 18px 0 22px; padding-bottom: 8px;
}
.vw-reiterknopf {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px;
  text-decoration: none; color: rgba(var(--hell-rgb), .75); overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(var(--flaeche-rgb), .8) 70%);
  animation: vwReiterEin .6s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i) * 80ms + 120ms) backwards;
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), border-color .3s, box-shadow .3s, color .25s;
}
@keyframes vwReiterEin { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.vw-reiterknopf::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.vw-reiterknopf:hover { transform: translateY(-3px); color: #fff; border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 14px 30px -18px var(--c); }
.vw-reiterknopf:hover::after, .vw-reiterknopf.an::after { opacity: 1; }
.vw-reiterknopf.an {
  color: #fff; border-color: transparent;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--c) 18%, rgb(var(--flaeche-rgb))), rgb(var(--flaeche-rgb)) 75%) padding-box,
    conic-gradient(from var(--kopf-winkel), var(--c), transparent 30%, color-mix(in srgb, var(--c) 60%, #fff) 50%, transparent 75%, var(--c)) border-box;
  box-shadow: 0 0 30px -10px var(--c);
  animation: vwReiterEin .6s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i) * 80ms + 120ms) backwards, kopfWinkel 5s linear infinite;
}
.vw-reiterzeichen {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; font-size: 22px;
  background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  transition: transform .5s cubic-bezier(.2, 1.6, .4, 1);
}
.vw-reiterknopf:hover .vw-reiterzeichen { transform: rotate(-10deg) scale(1.12); }
.vw-reiterknopf.an .vw-reiterzeichen { box-shadow: 0 0 18px -4px var(--c); animation: vwZeichenPuls 2.6s ease-in-out infinite; }
@keyframes vwZeichenPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.vw-reitertext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vw-reitertext b { font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.vw-reitertext small { font-size: 12px; letter-spacing: .04em; color: rgba(var(--hell-rgb), .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-reiterlicht {
  position: absolute; left: 0; top: 0; height: 3px; width: 0; border-radius: 3px; pointer-events: none;
  background: var(--c, #a970ff); box-shadow: 0 0 14px var(--c, #a970ff);
  transition: transform .5s cubic-bezier(.3, 1.3, .4, 1), width .5s cubic-bezier(.3, 1.3, .4, 1), background .3s, box-shadow .3s;
}

/* ── Rubriken ──────────────────────────────────────────────────── */
.vw-rubrik[hidden] { display: none !important; }
.vw-rubrik.kommt { animation: vwRubrikEin .55s cubic-bezier(.2, .9, .3, 1.05); }
@keyframes vwRubrikEin { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
.vw-kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.vw-kopfzeile h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); display: flex; align-items: center; gap: 10px; }
.vw-kopfzeile h2::before {
  content: ''; width: 6px; height: .9em; border-radius: 3px; background: var(--c);
  box-shadow: 0 0 14px var(--c); animation: vwBalken 2.4s ease-in-out infinite;
}
@keyframes vwBalken { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.vw-kopfzeile p { margin: 4px 0 0; font-size: 14px; color: rgba(var(--hell-rgb), .6); }
.vw-kopfwerkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vw-anzahl {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px;
  font-size: 13px; color: #fff; background: color-mix(in srgb, var(--c) 30%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.vw-suche { max-width: 240px; border-radius: 999px; }
.vw-neuknopf .plus { display: inline-block; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.vw-neuknopf.offen .plus { transform: rotate(45deg); }
.vw-leer { font-size: 13px; color: rgba(var(--hell-rgb), .45); font-style: italic; }
.vw-nichts { padding: 20px 0; text-align: center; color: rgba(var(--hell-rgb), .5); }
.vw-zwischentitel { margin: 26px 0 12px; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--hell-rgb), .85); }
.vw-notiz { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(var(--hell-rgb), .62); }

/* Formulare, die weich auf- und zuklappen */
.vw-formular {
  display: grid; grid-template-rows: 1fr; margin-bottom: 18px;
  transition: grid-template-rows .5s cubic-bezier(.2, .8, .3, 1), opacity .35s, padding .4s, margin .4s, border-width .4s, visibility 0s;
}
.vw-formular > form { min-height: 0; overflow: hidden; }
.vw-formular.zu {
  grid-template-rows: 0fr; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; visibility: hidden;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .6, 1), opacity .3s, padding .4s, margin .4s, border-width .4s, visibility 0s .45s;
}
.vw-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.vw-feld { display: flex; flex-direction: column; gap: 6px; grid-column: span 2; }
.vw-feld.breit { grid-column: 1 / -1; }
.vw-feld.klein { grid-column: span 1; }
.vw-feld .input { width: 100%; }
.vw-codefeld { font-family: ui-monospace, Consolas, monospace !important; font-size: 13px; text-transform: none !important; }
.vw-hinweis { margin: 10px 0 0; font-size: 13px; color: rgba(var(--hell-rgb), .55); }
.vw-formfuss { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.kl-geschlecht { display: inline-flex; gap: 8px; }
.kl-geschlecht label { cursor: pointer; }
.kl-geschlecht input { position: absolute; opacity: 0; width: 0; height: 0; }
.kl-geschlecht span {
  display: inline-block; padding: 9px 16px; border-radius: 999px; font-weight: 700;
  border: 1px solid rgba(var(--gold-rgb), .3); color: rgba(var(--hell-rgb), .7);
  transition: background .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.kl-geschlecht input:checked + span { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, transparent); transform: scale(1.05); }
.kl-geschlecht input:focus-visible + span { outline: 2px solid var(--c); outline-offset: 2px; }

/* Werkzeuge an den Einträgen */
.vw-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vw-werkzeuge form { margin: 0; }
.vw-werkzeuge.eng { gap: 4px; flex-wrap: nowrap; }
.vw-werkzeug {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: rgba(var(--hell-rgb), .8); background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--gold-rgb), .25);
  transition: color .2s, border-color .2s, box-shadow .3s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.vw-werkzeug:hover { color: #fff; border-color: rgba(var(--gold-rgb), .65); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(var(--gold-rgb), .9); }
.vw-werkzeug.gefahr:hover { color: #ffb3c8; border-color: rgba(255, 77, 106, .7); box-shadow: 0 8px 18px -10px rgba(255, 77, 106, .9); }

/* Personen in der Aufstellung */
.vw-person {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border-radius: 999px; font-size: 13px; color: #fff;
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  animation: vwPersonEin .45s cubic-bezier(.2, 1.5, .4, 1) calc(var(--n, 0) * 40ms + 150ms) backwards;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s;
}
.vw-person:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px var(--c); }
.vw-person.ich { border-color: var(--c); box-shadow: 0 0 14px -4px var(--c); }
.vw-person em { padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--c); color: #0b0614; }
.vw-personbild {
  position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, var(--c, #a970ff), rgba(0, 0, 0, .55));
}
.vw-personbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vw-personbild i { font-style: normal; font-size: 11px; font-weight: 700; color: #0f0b09; }
@keyframes vwPersonEin { from { opacity: 0; transform: translateY(6px) scale(.85); } }

/* Codes zum Kopieren */
.vw-code {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: rgba(0, 0, 0, .35);
}
.vw-code.leer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; }
.vw-codekopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 7px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.vw-codetitel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }
.vw-codetext {
  margin: 0; max-height: 92px; overflow: auto; padding: 10px 12px; white-space: pre-wrap; word-break: break-all;
  font-family: ui-monospace, Consolas, monospace !important; font-size: 12.5px; line-height: 1.5; color: #d8fbff;
  text-transform: none !important; user-select: all;
}
.vw-kopieren {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 40%, transparent), color-mix(in srgb, var(--c) 15%, transparent));
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, background .3s;
}
.vw-kopieren:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 20px -10px var(--c); }
.vw-kopieren:active { transform: scale(.94); }
.vw-kopieren.ok { background: linear-gradient(110deg, #22c58b, #149467); border-color: #3fe3a0; }
.vw-kopieren.ok .vw-kopierzeichen { animation: vwHaken .5s cubic-bezier(.2, 1.6, .4, 1); }
.vw-kopieren.ok .vw-kopierzeichen::before { content: '✓'; }
.vw-kopieren.ok .vw-kopierzeichen { font-size: 0; }
.vw-kopieren.ok .vw-kopierzeichen::before { font-size: 13px; }
@keyframes vwHaken { from { transform: scale(0) rotate(-40deg); } }
.vw-code.kopiert::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--c) 45%, transparent) 50%, transparent 70%);
  animation: vwKopierBlitz .7s ease-out forwards;
}
@keyframes vwKopierBlitz { from { transform: translateX(-100%); } to { transform: translateX(100%); opacity: 0; } }

/* Die kleine Meldung unten */
.vw-meldung {
  position: fixed; left: 50%; bottom: 22px; z-index: 60; translate: -50% 30px; opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; color: #fff;
  background: rgba(var(--kopf-rgb), .94); border: 1px solid rgba(63, 227, 160, .5); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -16px #000, 0 0 26px -10px #3fe3a0;
  transition: translate .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s;
}
.vw-meldung.da { translate: -50% 0; opacity: 1; }
.vw-meldung.schlimm { border-color: rgba(255, 77, 106, .6); box-shadow: 0 16px 40px -16px #000, 0 0 26px -10px #ff4d6a; }

/* ── Gangwar ───────────────────────────────────────────────────── */
.gw-buehne { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.gw-naechster, .gw-letzter {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px;
  padding: 22px 24px; border-radius: 22px;
  border: 1px solid rgba(var(--gold-rgb), .22); background: rgba(var(--flaeche-rgb), .86);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 26px 50px -30px rgba(0, 0, 0, .95);
  animation: vwKarteEin .7s cubic-bezier(.2, .9, .3, 1.1) .15s backwards;
}
.gw-letzter { animation-delay: .28s; }
@keyframes vwKarteEin { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.gw-naechster:not(.leer)::before {
  content: ''; position: absolute; inset: 0; z-index: 3; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), transparent 0 60%, rgba(255, 77, 106, .95) 75%, rgba(255, 160, 90, .9) 85%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 5s linear infinite;
}
.gw-glut {
  position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 77, 106, .35), transparent); animation: gwGlut 3.2s ease-in-out infinite;
}
@keyframes gwGlut { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
.gw-marke { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--hell-rgb), .7); }
.gw-puls { width: 9px; height: 9px; border-radius: 50%; background: #ff4d6a; box-shadow: 0 0 10px #ff4d6a; animation: abstLive 1.4s ease-in-out infinite; }
.gw-paarung { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; color: #fff; }
.gw-schwerter { display: inline-block; color: #ff4d6a; text-shadow: 0 0 16px rgba(255, 77, 106, .9); animation: gwKlirren 2.6s ease-in-out infinite; }
@keyframes gwKlirren {
  0%, 70%, 100% { transform: rotate(0) scale(1); }
  76% { transform: rotate(-18deg) scale(1.25); }
  82% { transform: rotate(14deg) scale(1.3); }
  88% { transform: rotate(-6deg) scale(1.1); }
}
.gw-angaben { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-size: 14px; color: rgba(var(--hell-rgb), .72); }
.gw-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gw-zeitfeld {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; perspective: 300px;
  background: linear-gradient(180deg, rgba(255, 77, 106, .16), rgba(0, 0, 0, .3)); border: 1px solid rgba(255, 77, 106, .3);
}
.gw-zeitfeld b { display: inline-block; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(255, 77, 106, .7); }
.gw-zeitfeld b.kippt { animation: gwKippen .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes gwKippen { from { transform: rotateX(90deg); opacity: .2; color: #ffb3c1; } }
.gw-zeitfeld small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }
.gw-naechster.bald .gw-zeitfeld { animation: gwBald 1s ease-in-out infinite; }
@keyframes gwBald { 50% { box-shadow: 0 0 22px -4px rgba(255, 77, 106, .9); border-color: #ff4d6a; } }
.gw-ausstehend { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; color: #ffd1d9; background: rgba(255, 77, 106, .12); border: 1px dashed rgba(255, 77, 106, .5); }
.gw-notiz { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(var(--hell-rgb), .62); }
.gw-aufstellungkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(var(--gold-rgb), .12); font-size: 14px; color: rgba(var(--hell-rgb), .75); }
.gw-aufstellungkopf b { color: #fff; font-size: 16px; }
.gw-aufstellung { display: flex; flex-wrap: wrap; gap: 6px; --c: #ff4d6a; }
.gw-eintragen { margin: 0; }
.gw-dabei {
  position: relative; display: inline-grid; padding: 11px 20px; border-radius: 999px; cursor: pointer; overflow: hidden;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  border: 1px solid rgba(255, 120, 140, .7);
  background: linear-gradient(110deg, #ff4d6a, #c8102e 60%, #ff7a3d);
  box-shadow: 0 10px 26px -12px rgba(255, 77, 106, .95);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, background .35s;
}
.gw-dabei > span { grid-area: 1 / 1; transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.gw-dabei .gw-dabei-ist { opacity: 0; transform: translateY(100%); }
.gw-dabei.ist { background: linear-gradient(110deg, #1f9f6f, #127a52); border-color: #3fe3a0; box-shadow: 0 10px 26px -12px rgba(63, 227, 160, .9); }
.gw-dabei.ist .gw-dabei-ja { opacity: 0; transform: translateY(-100%); }
.gw-dabei.ist .gw-dabei-ist { opacity: 1; transform: none; }
.gw-dabei:hover { transform: translateY(-2px) scale(1.04); }
.gw-dabei:active { transform: scale(.95); }
.gw-dabei.laedt { opacity: .7; pointer-events: none; }
.gw-dabei.stoss { animation: gwStoss .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes gwStoss { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
.gw-eintragen.klein .gw-dabei { padding: 6px 12px; font-size: 12px; }
.gw-ruhe { margin: 6px 0 0; font-size: 46px; opacity: .25; }

/* Die Anzeigetafel des letzten Kampfes */
.gw-letzter { --e: #a970ff; border-color: color-mix(in srgb, var(--e) 40%, transparent); }
.gw-letzter::after {
  content: ''; position: absolute; inset: auto -30% -60% -30%; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--e) 30%, transparent), transparent);
  animation: gwGlut 4s ease-in-out infinite;
}
.gw-urteil {
  align-self: flex-start; margin: 0; padding: 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #0b0614; background: var(--e); box-shadow: 0 0 22px -4px var(--e);
  animation: gwUrteil .7s cubic-bezier(.2, 1.6, .4, 1) .6s backwards;
}
@keyframes gwUrteil { from { opacity: 0; transform: scale(.3) rotate(-8deg); } }
.gw-tafel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.gw-seite { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.gw-seite small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .65); }
.gw-seite b { font-size: clamp(52px, 6vw, 76px); line-height: .95; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 26px color-mix(in srgb, var(--e, #a970ff) 70%, transparent); }
.gw-doppelpunkt { padding-bottom: 12px; font-size: 44px; color: rgba(var(--hell-rgb), .4); animation: vwBalken 1.6s ease-in-out infinite; }
.gw-letzter.leer .gw-seite b { color: rgba(var(--hell-rgb), .25); text-shadow: none; }

/* Die Bilanz */
.gw-bilanz {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 16px; padding: 18px 22px; border-radius: 20px;
  border: 1px solid rgba(var(--gold-rgb), .18); background: rgba(var(--flaeche-rgb), .7);
  animation: vwKarteEin .7s cubic-bezier(.2, .9, .3, 1.1) .4s backwards;
}
.gw-quote {
  --q: 0; position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; flex: none;
  background: conic-gradient(#3fe3a0 calc(var(--q) * 1%), rgba(255, 255, 255, .08) 0);
  animation: gwQuote 1.4s cubic-bezier(.2, .8, .2, 1) .5s backwards;
}
@property --q { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes gwQuote { from { --q: 0; } }
.gw-quote::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: rgb(var(--flaeche-rgb)); }
.gw-quote span { position: relative; font-size: 22px; font-weight: 700; color: #fff; margin-top: -10px; }
.gw-quote small { position: absolute; bottom: 22px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }
.gw-bilanzteile { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.gw-band { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; }
.gw-band span { background: var(--f); box-shadow: 0 0 12px var(--f); transform-origin: left; animation: gwBand .9s cubic-bezier(.2, .8, .2, 1) .6s backwards; }
@keyframes gwBand { from { transform: scaleX(0); } }
.gw-bilanzzahlen { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: rgba(var(--hell-rgb), .7); }
.gw-bilanzzahlen span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 3px; background: var(--f); box-shadow: 0 0 8px var(--f); }
.gw-bilanzzahlen b { color: #fff; }

/* Verlauf und weitere Kämpfe als Zeilen */
.gw-verlauf, .gw-weitere { display: flex; flex-direction: column; gap: 8px; }
.gw-zeile {
  --e: #a970ff; position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 12px 16px 12px 20px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(var(--flaeche-rgb), .72);
  animation: vwZeileEin .5s cubic-bezier(.2, .9, .3, 1.1) calc(var(--n, 0) * 50ms + 250ms) backwards;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), border-color .3s, box-shadow .3s;
}
.gw-zeile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--e); box-shadow: 0 0 12px var(--e); }
.gw-zeile.geplant { --e: #ff4d6a; }
.gw-zeile:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--e) 50%, transparent); box-shadow: 0 10px 24px -16px var(--e); }
@keyframes vwZeileEin { from { opacity: 0; transform: translateX(-14px); } }
.gw-zeilezeit { min-width: 100px; font-size: 13px; color: rgba(var(--hell-rgb), .6); font-variant-numeric: tabular-nums; }
.gw-zeilegegner { flex: 1 1 160px; font-size: 16px; font-weight: 700; color: #fff; }
.gw-zeilegebiet { flex: 0 1 auto; font-size: 13px; color: rgba(var(--hell-rgb), .65); }
.gw-zeileleute { font-size: 13px; color: rgba(var(--hell-rgb), .7); }
.gw-stand { padding: 3px 12px; border-radius: 10px; font-size: 18px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--e) 22%, transparent); border: 1px solid color-mix(in srgb, var(--e) 50%, transparent); font-variant-numeric: tabular-nums; }
.gw-urteilklein { min-width: 100px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--e); }
.gw-aufstellung.klein { flex-basis: 100%; }
.gw-aufstellung.klein .vw-leer { font-size: 12px; }

/* ── Fahrzeuge: die Garage ─────────────────────────────────────────
   Je Fahrzeug ein Stellplatz. Beim Überfahren rollt der Wagen an, die
   Scheinwerfer gehen an; ein Klick klappt den Platz auf — der Wagen fährt
   ein, der Rand bekommt einen umlaufenden Lichtschein, darin der
   Tuning-Code zum Kopieren und (wer darf) zum Hinterlegen. */
.fz-bilanz {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 10px; border-radius: 999px;
  font-size: 12px; color: #fff; background: color-mix(in srgb, var(--c) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.fz-garage { display: flex; flex-direction: column; gap: 12px; }
.fz-platz {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 9%, transparent), rgba(var(--flaeche-rgb), .86) 45%);
  animation: vwZeileEin .55s cubic-bezier(.2, .9, .3, 1.1) calc(var(--n, 0) * 70ms + 150ms) backwards;
  transition: border-color .3s, box-shadow .35s;
}
.fz-platz[hidden] { display: none; }
.fz-platz:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 16px 34px -22px var(--c); }
.fz-platz.offen { border-color: transparent; box-shadow: 0 0 36px -12px var(--c); }
.fz-platz.offen::before {
  content: ''; position: absolute; inset: 0; z-index: 3; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), transparent 0 55%, var(--c) 72%, #fff 80%, var(--c) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 4.5s linear infinite;
}
/* Ein Lichtstreif zieht beim Überfahren über den Platz */
.fz-platz::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--c) 18%, transparent) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
}
.fz-platz:hover::after { animation: fzStreif 1.1s ease-out; }
@keyframes fzStreif { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.fz-kopf {
  display: grid; grid-template-columns: 124px minmax(0, 1fr) auto 26px; align-items: center; gap: 16px;
  width: 100%; padding: 12px 20px 12px 16px; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.fz-kopf:focus-visible { outline: 2px solid var(--c); outline-offset: -5px; border-radius: 20px; }

/* Der Wagen */
.fz-auto { width: 124px; height: 50px; }
.fz-auto svg { width: 100%; height: 100%; overflow: visible; }
.fz-spur { fill: none; stroke: color-mix(in srgb, var(--c) 35%, transparent); stroke-width: 1.5; stroke-dasharray: 6 6; }
.fz-platz.offen .fz-spur, .fz-kopf:hover .fz-spur { animation: fzSpur .6s linear infinite; }
@keyframes fzSpur { to { stroke-dashoffset: 12; } }
.fz-karosse { fill: color-mix(in srgb, var(--c) 26%, #10131c); stroke: var(--c); stroke-width: 1.4; transition: fill .4s; }
.hat-code .fz-karosse { fill: color-mix(in srgb, var(--c) 42%, #10131c); }
.fz-scheibe { fill: rgba(200, 245, 255, .22); stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-width: .8; }
.fz-linie { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.fz-licht { fill: #fff3c4; }
.fz-kegel { fill: rgba(255, 243, 196, 0); transition: fill .4s; }
.fz-kopf:hover .fz-kegel, .fz-platz.offen .fz-kegel { fill: rgba(255, 243, 196, .4); }
.fz-kopf:hover .fz-licht, .fz-platz.offen .fz-licht { filter: drop-shadow(0 0 4px #fff3c4); }
.fz-rad circle { fill: #0b0d14; stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-width: 2; }
.fz-rad path { fill: none; stroke: color-mix(in srgb, var(--c) 60%, #fff); stroke-width: 1.2; }
.fz-rad { transform-box: fill-box; transform-origin: center; }
.fz-kopf:hover .fz-rad { animation: fzRollen .7s linear infinite; }
.fz-platz.offen .fz-rad { animation: fzRollen 2.4s linear infinite; }
@keyframes fzRollen { to { transform: rotate(360deg); } }
.fz-koerper { transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.fz-kopf:hover .fz-koerper { transform: translateX(5px); }
.fz-platz.offen .fz-koerper { animation: fzFederung 2.4s ease-in-out infinite; }
.fz-platz.offen.faehrt .fz-koerper { animation: fzEinfahren .75s cubic-bezier(.2, .9, .3, 1.15), fzFederung 2.4s ease-in-out .75s infinite; }
@keyframes fzFederung { 0%, 100% { transform: translate(5px, 0); } 50% { transform: translate(5px, -1px); } }
@keyframes fzEinfahren { 0% { transform: translateX(-46px); opacity: .15; } 70% { transform: translateX(9px); opacity: 1; } 100% { transform: translateX(5px); } }
.fz-fahrt { fill: none; stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.fz-kopf:hover .fz-fahrt, .fz-platz.offen .fz-fahrt { animation: fzFahrt .8s linear infinite; }
.fz-fahrt.f2 { animation-delay: .3s !important; }
@keyframes fzFahrt { 0% { opacity: 0; transform: translateX(14px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(-10px); } }

/* Name, Zustand, Pfeil */
.fz-titel { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fz-titel b { font-size: 22px; letter-spacing: .05em; color: #fff; overflow-wrap: break-word; }
.fz-titel small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.fz-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .55); border: 1px dashed rgba(var(--hell-rgb), .25);
}
.fz-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--hell-rgb), .3); }
.hat-code .fz-status { color: #b9ffe0; border: 1px solid rgba(63, 227, 160, .55); background: rgba(63, 227, 160, .12); }
.hat-code .fz-status::before { background: #3fe3a0; box-shadow: 0 0 10px #3fe3a0; animation: abstLive 1.8s ease-in-out infinite; }
.fz-pfeil {
  width: 12px; height: 12px; justify-self: center; border-right: 2px solid var(--c); border-bottom: 2px solid var(--c);
  transform: translateY(-3px) rotate(45deg); transition: transform .45s cubic-bezier(.2, 1.6, .4, 1);
}
.fz-platz.offen .fz-pfeil { transform: translateY(3px) rotate(225deg); }

/* Der aufgeklappte Teil */
.fz-inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .8, .3, 1); }
.fz-platz.offen .fz-inhalt { grid-template-rows: 1fr; }
.fz-innen { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 0 20px; transition: padding .45s; }
.fz-platz.offen .fz-innen { padding-bottom: 18px; }
.fz-innen > * { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .4s cubic-bezier(.2, 1.2, .4, 1); }
.fz-platz.offen .fz-innen > * { opacity: 1; transform: none; transition-delay: .12s; }
.fz-platz .vw-code { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.fz-platz .vw-codetext { max-height: 150px; font-size: 13px; }
.fz-platz .vw-kopieren { padding: 9px 18px; font-size: 13px; }
.fz-platz.gespeichert .vw-code { animation: fzGespeichert 1s ease-out; }
@keyframes fzGespeichert { 0% { box-shadow: 0 0 0 0 rgba(63, 227, 160, .9); } 100% { box-shadow: 0 0 0 14px rgba(63, 227, 160, 0); } }
.fz-stand { margin: 0; font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.fz-codeform { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px dashed rgba(var(--gold-rgb), .18); }
.fz-codeform .input { width: 100%; }
.fz-codefuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fz-speichern.laedt { opacity: .6; pointer-events: none; }

@media (max-width: 560px) {
  .fz-kopf { grid-template-columns: 76px minmax(0, 1fr) auto 18px; gap: 10px; padding: 10px 12px; }
  .fz-auto { width: 76px; height: 32px; }
  .fz-titel b { font-size: 18px; }
  .fz-status { padding: 6px; font-size: 0; gap: 0; }
  .fz-innen { padding: 0 12px; }
}

/* ── Kleidung ──────────────────────────────────────────────────── */
.kl-wahl { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(var(--flaeche-rgb), .8); border: 1px solid rgba(var(--gold-rgb), .2); }
.kl-wahl button {
  padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--hell-rgb), .65); background: transparent;
  transition: color .25s, background .3s, box-shadow .3s, transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.kl-wahl button:hover { color: #fff; transform: translateY(-1px); }
.kl-wahl button.an { color: #fff; background: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 0 16px -6px var(--c); }
.kl-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kl-spalten.eine { grid-template-columns: minmax(0, 1fr); }
.kl-spalte { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(var(--flaeche-rgb), .55); animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .15s backwards; }
.kl-spalte[hidden] { display: none; }
.kl-spalte[data-g="M"] { --c: #3ea8ff; }
.kl-spalte[data-g="W"] { --c: #ff6fb5; }
.kl-spaltentitel { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; color: #fff; }
.kl-symbol {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 20px;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  animation: vwZeichenPuls 2.8s ease-in-out infinite;
}
.kl-outfit {
  position: relative; display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 9%, transparent), rgba(0, 0, 0, .2));
  animation: vwZeileEin .5s cubic-bezier(.2, .9, .3, 1.1) calc(var(--n, 0) * 60ms + 250ms) backwards;
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), border-color .3s, box-shadow .3s;
}
.kl-outfit:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 16px 32px -20px var(--c); }
.kl-name { margin: 0; font-size: 18px; color: #fff; }

@media (max-width: 900px) {
  .vw-reiter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-buehne { grid-template-columns: minmax(0, 1fr); }
  .kl-spalten { grid-template-columns: minmax(0, 1fr); }
  .vw-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-feld { grid-column: 1 / -1; }
  .vw-feld.klein { grid-column: span 1; }
}
@media (max-width: 600px) {
  .vw-held { grid-template-columns: 1fr; padding: 22px 18px; }
  .vw-emblem { width: 120px; height: 120px; order: -1; }
  .vw-reiterknopf { padding: 10px 12px; gap: 10px; }
  .vw-reiterzeichen { width: 36px; height: 36px; font-size: 18px; }
  .vw-reitertext b { font-size: 16px; }
  .gw-naechster, .gw-letzter { padding: 18px 16px; }
  .gw-countdown { gap: 6px; }
  .gw-zeilezeit { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-held h1, .vw-emblem *, .vw-reiterknopf, .vw-reiterknopf.an, .vw-reiterzeichen, .vw-rubrik.kommt, .vw-kopfzeile h2::before,
  .vw-person, .gw-naechster, .gw-letzter, .gw-naechster::before, .gw-glut, .gw-puls, .gw-schwerter, .gw-zeitfeld, .gw-zeitfeld b,
  .gw-urteil, .gw-letzter::after, .gw-doppelpunkt, .gw-bilanz, .gw-quote, .gw-band span, .gw-zeile, .fz-platz, .fz-platz::before, .fz-rad, .fz-koerper, .fz-fahrt, .fz-spur, .kl-spalte,
  .kl-symbol, .kl-outfit, .vw-code::after { animation: none !important; }
  .vw-formular, .vw-reiterlicht { transition: none; }
}
/* Codes und Kennzeichen in einer Festbreitenschrift mit Groß- und
   Kleinbuchstaben — die Schrift des Codebreakers kennt nur Versalien */
body.welt-codebreaker :is(.vw-codetext, .vw-codefeld) {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace !important;
}

/* Lager und Kontobuch als Rubriken der Verwaltung: ihre Überschrift wie zuvor */
:is(.lg-held .lg-heldtext, .kb-held .kb-heldtext) h2.vw-titelgross { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }

/* Codebreaker: die Fassung im Kopf eine Spur größer */
body.welt-codebreaker header .brand-fassung { font-size: .82em; padding: 2px 10px; letter-spacing: .1em; vertical-align: .12em; }


/* ═══════════════════════════════════════════════════════════════════
   Rubrik-Symbole (vw_symbol in lib/verwaltung.php) — Verwaltung und Teams
   Jedes Symbol hat eigene bewegliche Teile: Klingen schlagen aufeinander,
   Ware fließt den Weg entlang, Räder drehen, das Hemd schwingt, der Deckel
   hebt sich, die Münze dreht sich, Funkwellen laufen aus, das Fadenkreuz
   rastet ein, der Haken zeichnet sich. In Ruhe leise, beim Zeigen und in
   der gewählten Rubrik deutlich.
   ═══════════════════════════════════════════════════════════════════ */
.vw-reiterzeichen { position: relative; isolation: isolate; color: var(--c); overflow: visible; }
.vw-reiterzeichen::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 16px; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--kopf-winkel), var(--c), transparent 35%, color-mix(in srgb, var(--c) 50%, #fff) 55%, transparent 80%, var(--c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .35s;
}
.vw-reiterknopf.an .vw-reiterzeichen::before { opacity: 1; animation: kopfWinkel 3s linear infinite; }
.vw-reiterknopf.an .vw-reiterzeichen {
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c) 12%, transparent) 70%);
  animation: none;
}
.vw-symbol {
  width: 26px; height: 26px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent));
}
.vw-symbol * { transform-box: fill-box; transform-origin: center; }
.vw-reiterknopf:hover .vw-symbol, .vw-reiterknopf.an .vw-symbol { filter: drop-shadow(0 0 8px var(--c)); }

/* Gangwar: die Klingen schlagen aufeinander, ein Funke springt */
.sy-gangwar .sy-a { transform-origin: 85% 85%; animation: syKlingeA 3.2s ease-in-out infinite; }
.sy-gangwar .sy-b { transform-origin: 15% 85%; animation: syKlingeB 3.2s ease-in-out infinite; }
.sy-gangwar .sy-funke { opacity: 0; animation: syFunke 3.2s ease-out infinite; }
@keyframes syKlingeA { 0%, 60%, 100% { transform: rotate(0); } 72% { transform: rotate(-14deg); } 80% { transform: rotate(5deg); } }
@keyframes syKlingeB { 0%, 60%, 100% { transform: rotate(0); } 72% { transform: rotate(14deg); } 80% { transform: rotate(-5deg); } }
@keyframes syFunke { 0%, 76% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1.2); } 95%, 100% { opacity: 0; transform: scale(1.5); } }
/* Routen: Ware fließt, der Ort hüpft */
.sy-routen .sy-weg { stroke-dasharray: 2.5 3; animation: syFluss 1.6s linear infinite; }
.sy-routen .sy-pin { fill: color-mix(in srgb, var(--c) 30%, transparent); transform-origin: 50% 100%; animation: syHuepf 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.sy-routen .sy-start { fill: currentColor; animation: syPuls 2.4s ease-in-out infinite; }
@keyframes syFluss { to { stroke-dashoffset: -11; } }
@keyframes syHuepf { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-3px) scale(1.1); } 80% { transform: translateY(0) scaleY(.88); } }
@keyframes syPuls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Fahrzeuge: Räder drehen, der Wagen federt, Fahrtstriche */
.sy-fahrzeuge .sy-rad { animation: syRollen 2.2s linear infinite; }
.sy-fahrzeuge .sy-wagen { animation: syFedern 1.1s ease-in-out infinite; }
.sy-fahrzeuge .sy-fahrt { opacity: 0; animation: syStriche 1.1s linear infinite; }
@keyframes syRollen { to { transform: rotate(360deg); } }
@keyframes syFedern { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@keyframes syStriche { 0% { opacity: 0; transform: translateX(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-3px); } }
/* Kleidung: das Hemd schwingt am Bügel */
.sy-kleidung .sy-buegel { transform-origin: 50% 0; animation: sySchwingen 3s ease-in-out infinite; }
.sy-kleidung .sy-knopf { stroke-width: 2.4; }
@keyframes sySchwingen { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
/* Lager: der Deckel hebt sich */
.sy-lager .sy-deckel { transform-origin: 50% 100%; animation: syDeckel 2.8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes syDeckel { 0%, 55%, 100% { transform: translateY(0); } 68% { transform: translateY(-3px) rotate(-6deg); } 82% { transform: translateY(-1px); } }
/* Kontobuch: die Münze dreht sich */
.sy-konto .sy-muenze { animation: syMuenze 3.4s ease-in-out infinite; }
@keyframes syMuenze { 0%, 40%, 100% { transform: scaleX(1); } 55% { transform: scaleX(.12); } 70% { transform: scaleX(1); } }
/* Funkdisziplin: Wellen laufen aus */
.sy-funk .sy-welle { opacity: 0; animation: syWelle 2s ease-out infinite; }
.sy-funk .sy-welle.w2 { animation-delay: .35s; }
@keyframes syWelle { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
/* Einsatz: das Fadenkreuz dreht und rastet ein */
.sy-einsatz .sy-kreuz { animation: syKreuz 4s cubic-bezier(.6, 0, .3, 1) infinite; }
.sy-einsatz .sy-ziel { fill: color-mix(in srgb, var(--c) 40%, transparent); animation: syPuls 1.6s ease-in-out infinite; }
@keyframes syKreuz { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
/* Personenschutz: das Schild glimmt, der Haken zeichnet sich */
.sy-schutz .sy-schild { fill: color-mix(in srgb, var(--c) 18%, transparent); animation: sySchild 3s ease-in-out infinite; }
.sy-schutz .sy-haken { stroke-dasharray: 1; stroke-dashoffset: 1; animation: syHaken 3s ease-out infinite; }
@keyframes sySchild { 0%, 100% { fill: color-mix(in srgb, var(--c) 12%, transparent); } 50% { fill: color-mix(in srgb, var(--c) 34%, transparent); } }
@keyframes syHaken { 0%, 20% { stroke-dashoffset: 1; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
/* Beim Zeigen und in der gewählten Rubrik geht alles schneller */
.vw-reiterknopf:is(:hover, .an) .vw-symbol * { animation-duration: 1.2s !important; }
.vw-reiterknopf:is(:hover, .an) .sy-funk .sy-welle.w2 { animation-delay: .25s; }
.vw-reiterknopf:is(:hover, .an) .sy-routen .sy-weg { animation-duration: .7s !important; }

/* ═══════════════════════════════════════════════════════════════════
   Gangwar: der Hinweis und die Truppe
   ═══════════════════════════════════════════════════════════════════ */
.gw-hinweis {
  position: relative; overflow: hidden; margin-bottom: 16px; padding: 16px 20px; border-radius: 20px;
  border: 1px solid rgba(245, 184, 74, .45);
  background: linear-gradient(120deg, rgba(245, 184, 74, .14), rgba(var(--flaeche-rgb), .85) 55%);
  box-shadow: 0 0 30px -16px rgba(245, 184, 74, .9);
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .1s backwards;
}
.gw-hinweis::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #f5b84a; box-shadow: 0 0 14px #f5b84a;
  animation: vwBalken 2.4s ease-in-out infinite;
}
.gw-hinweis.leer { border-style: dashed; box-shadow: none; background: rgba(var(--flaeche-rgb), .6); }
.gw-hinweis.neu { animation: gwHinweisNeu .8s ease-out; }
@keyframes gwHinweisNeu { 0% { box-shadow: 0 0 0 0 rgba(245, 184, 74, .9); } 100% { box-shadow: 0 0 0 16px rgba(245, 184, 74, 0); } }
.gw-hinweiskopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.gw-hinweiskopf b { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #ffe2a6; }
.gw-hinweiskopf small { margin-left: auto; font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.gw-hinweiszeichen { display: inline-block; font-size: 18px; animation: gwNadel 3s ease-in-out infinite; }
@keyframes gwNadel { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg) translateY(-1px); } }
.gw-hinweistext { margin-top: 8px; font-size: 16px; line-height: 1.55; color: #fff; overflow-wrap: anywhere; }
.gw-hinweisedit { margin-top: 10px; }
.gw-hinweisedit > summary { display: inline-flex; list-style: none; cursor: pointer; }
.gw-hinweisedit > summary::-webkit-details-marker { display: none; }
.gw-hinweisedit[open] > summary { margin-bottom: 10px; }
.gw-hinweisform { margin: 0; animation: vwRubrikEin .4s ease-out; }
.gw-hinweisform textarea { width: 100%; }

.gw-truppe { position: relative; margin-top: 18px; }
.gw-truppekopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.gw-truppekopf .vw-zwischentitel { margin: 0 0 4px; }
.gw-staerke { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 200px; }
.gw-staerkezahl { font-size: 15px; color: rgba(var(--hell-rgb), .7); }
.gw-staerkezahl b { font-size: 28px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(255, 77, 106, .7); }
.gw-staerkebalken { position: relative; width: 200px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.gw-staerkebalken i {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(calc(var(--s, 0) / 100));
  background: linear-gradient(90deg, #ff4d6a, #f5b84a, #3ee0ff, #c18cff); box-shadow: 0 0 12px rgba(255, 77, 106, .8);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.gw-truppe.voll .gw-staerkezahl b { color: #ffb3bd; }
.gw-staerke small { font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.gw-bahnen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gw-bahn {
  display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--r) 35%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--r) 14%, transparent), rgba(var(--flaeche-rgb), .8) 45%);
  animation: vwKarteEin .55s cubic-bezier(.2, .9, .3, 1.1) calc(var(--i, 0) * 70ms + 150ms) backwards;
}
.gw-bahnkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
}
.gw-bahnname { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.gw-bahnzahl {
  min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 700; color: #0b0614;
  background: var(--r); box-shadow: 0 0 12px -2px var(--r);
}
.gw-bahnfeld, .gw-poolfeld {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 76px; padding: 10px;
  transition: background .25s, box-shadow .25s;
}
.gw-bahnfeld { flex: 1; flex-direction: column; flex-wrap: nowrap; }
.gw-bahnfeld.leer::after {
  content: 'leer'; margin: auto; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .3);
}
[data-feld].ueber { background: color-mix(in srgb, var(--r, #a970ff) 18%, transparent); box-shadow: inset 0 0 0 2px var(--r, #a970ff); }
.gw-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 11px 4px 4px; border-radius: 999px;
  font: inherit; font-size: 13px; color: #fff; text-align: left; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--r, #a970ff) 45%, transparent);
  background: color-mix(in srgb, var(--r, #a970ff) 16%, rgba(var(--flaeche-rgb), .9));
  animation: vwPersonEin .4s cubic-bezier(.2, 1.5, .4, 1) calc(var(--n, 0) * 25ms + 150ms) backwards;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s;
}
button.gw-chip { cursor: grab; }
button.gw-chip:hover { transform: translateY(-2px); border-color: var(--r, #a970ff); box-shadow: 0 8px 18px -10px var(--r, #a970ff); }
.gw-chip[hidden] { display: none; }
.gw-chip i {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700;
  color: #0b0614; background: var(--r, #a970ff);
}
.gw-bahnfeld .gw-chip { width: 100%; }
.gw-chip.zieht { opacity: .4; transform: scale(.95); }
.gw-chip.landet { animation: gwLanden .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gwLanden { 0% { transform: scale(.6); opacity: .3; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.gw-pool {
  margin-top: 12px; border-radius: 18px; border: 1px dashed rgba(var(--gold-rgb), .3); background: rgba(var(--flaeche-rgb), .55);
}
.gw-poolkopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px dashed rgba(var(--gold-rgb), .2); }
.gw-poolkopf b { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--hell-rgb), .85); }
.gw-poolkopf small { font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.gw-poolsuche { margin-left: auto; max-width: 220px; border-radius: 999px; }
.gw-poolfeld { min-height: 56px; }
.gw-poolfeld.leer::after { content: 'Alle sind eingeteilt.'; margin: auto; font-size: 13px; color: rgba(var(--hell-rgb), .4); }
.gw-menue {
  position: absolute; z-index: 30; display: flex; flex-direction: column; gap: 4px; min-width: 190px; padding: 8px; border-radius: 16px;
  background: rgba(var(--kopf-rgb), .97); border: 1px solid rgba(var(--gold-rgb), .35); backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -16px #000, 0 0 30px -14px rgba(var(--gold-rgb), .9);
}
.gw-menue.auf { animation: gwMenue .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes gwMenue { from { opacity: 0; transform: translateY(-6px) scale(.95); } }
.gw-menuename { margin: 2px 6px 6px; font-size: 13px; font-weight: 700; color: #fff; }
.gw-menue button {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: transparent;
  transition: background .2s, transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.gw-menue button::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--r, #ff4d6a); box-shadow: 0 0 8px var(--r, #ff4d6a); }
.gw-menue button:hover { background: color-mix(in srgb, var(--r, #ff4d6a) 22%, transparent); transform: translateX(3px); }
.gw-menue button.jetzt { background: color-mix(in srgb, var(--r) 30%, transparent); }
.gw-menue button.jetzt::after { content: '✓'; margin-left: auto; }
.gw-menue button.weg { color: #ffb3bd; }
.gw-menue button.weg::before { background: transparent; box-shadow: none; border: 1px solid #ff4d6a; }
.gw-menue button[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   Teams (teams.php)
   ═══════════════════════════════════════════════════════════════════ */
.ts-emblem .ts-welle { fill: none; stroke: url(#tsVerlauf); stroke-width: 2; transform-box: view-box; transform-origin: 80px 80px; opacity: 0; animation: tsWelle 3s ease-out infinite; }
.ts-emblem .ts-welle.w2 { animation-delay: 1s; }
.ts-emblem .ts-welle.w3 { animation-delay: 2s; }
@keyframes tsWelle { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.4); } }
.ts-emblem .ts-kern { fill: rgba(var(--flaeche-rgb), .95); stroke: url(#tsVerlauf); stroke-width: 2; }
.ts-emblem .ts-mast { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ts-emblem .ts-spitze { fill: #3ee0ff; filter: drop-shadow(0 0 6px #3ee0ff); animation: syPuls 1.2s ease-in-out infinite; }

/* Funkdisziplin */
.ts-banner {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 20px 26px; margin-bottom: 16px; border-radius: 24px; text-align: center;
  border: 1px solid rgba(62, 224, 255, .4);
  background: radial-gradient(70% 120% at 50% 0%, rgba(62, 224, 255, .2), transparent 65%), rgba(var(--flaeche-rgb), .85);
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .1s backwards;
}
.ts-bannerwellen { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ts-bannerwellen i {
  position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(62, 224, 255, .5); opacity: 0; animation: tsBannerWelle 3.6s ease-out infinite;
}
.ts-bannerwellen i:nth-child(2) { animation-delay: 1.2s; }
.ts-bannerwellen i:nth-child(3) { animation-delay: 2.4s; }
@keyframes tsBannerWelle { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(5); } }
.ts-bannermarke { position: relative; margin: 0; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: #8ff0ff; }
.ts-bannertitel {
  position: relative; margin: 0; font-size: clamp(40px, 7vw, 72px); letter-spacing: .12em; line-height: 1;
  background: linear-gradient(95deg, #fff, #8ff0ff 30%, #fff 50%, #8ff0ff 70%, #fff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vwSchrift 6s linear infinite;
}
.ts-bannerzeile { position: relative; margin: 0; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .7); }
.ts-regeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.ts-regel {
  position: relative; overflow: hidden; padding: 20px 22px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--r) 10%, transparent), rgba(var(--flaeche-rgb), .86) 45%);
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) calc(var(--i, 0) * 90ms + 200ms) backwards;
  transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), border-color .3s, box-shadow .35s;
}
.ts-regel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--r) 60%, transparent); box-shadow: 0 18px 36px -22px var(--r); }
.ts-regel::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--r), transparent); }
.ts-regel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ts-regelzeichen {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 19px;
  background: color-mix(in srgb, var(--r) 16%, transparent); border: 1px solid color-mix(in srgb, var(--r) 45%, transparent);
  transition: transform .5s cubic-bezier(.2, 1.6, .4, 1);
}
.ts-regel:hover .ts-regelzeichen { transform: rotate(-10deg) scale(1.12); }
.ts-regel p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: rgba(var(--hell-rgb), .82); }
.ts-regel p:last-child { margin-bottom: 0; }
.ts-regel strong { color: #fff; }
.ts-dreischritt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 14px !important; }
.ts-dreischritt span {
  padding: 7px 16px; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  border: 1px solid color-mix(in srgb, var(--r) 55%, transparent); background: color-mix(in srgb, var(--r) 14%, transparent);
  animation: tsSchritt 3.6s ease-in-out infinite;
}
.ts-dreischritt span:nth-of-type(2) { animation-delay: 1.2s; }
.ts-dreischritt span:nth-of-type(3) { animation-delay: 2.4s; }
.ts-dreischritt i { font-style: normal; color: var(--r); font-size: 20px; }
@keyframes tsSchritt {
  0%, 30%, 100% { background: color-mix(in srgb, var(--r) 14%, transparent); box-shadow: none; transform: scale(1); }
  10%           { background: color-mix(in srgb, var(--r) 45%, transparent); box-shadow: 0 0 22px -4px var(--r); transform: scale(1.08); }
}
.ts-liste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ts-liste li {
  position: relative; padding: 7px 12px 7px 34px; border-radius: 12px; font-size: 15px; color: #fff;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05);
  animation: vwZeileEin .45s cubic-bezier(.2, .9, .3, 1.1) backwards;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), background .25s, border-color .25s;
}
.ts-liste li:nth-child(2) { animation-delay: 60ms; } .ts-liste li:nth-child(3) { animation-delay: 120ms; }
.ts-liste li:nth-child(4) { animation-delay: 180ms; } .ts-liste li:nth-child(5) { animation-delay: 240ms; }
.ts-liste li:nth-child(6) { animation-delay: 300ms; } .ts-liste li:nth-child(7) { animation-delay: 360ms; }
.ts-liste li::before { content: '➜'; position: absolute; left: 12px; top: 7px; color: var(--r); transition: transform .3s; }
.ts-liste li:hover { transform: translateX(4px); background: color-mix(in srgb, var(--r) 10%, transparent); border-color: color-mix(in srgb, var(--r) 35%, transparent); }
.ts-liste li:hover::before { transform: translateX(3px); }
.ts-rang { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ts-rang li {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--r) calc(28% - var(--stufe, 0) * 6%), transparent), transparent 80%);
  border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
}
.ts-rang li:nth-child(2) { --stufe: 1; } .ts-rang li:nth-child(3) { --stufe: 2; } .ts-rang li:nth-child(4) { --stufe: 3; }
.ts-rang b {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; font-size: 16px; color: #1a1204;
  background: linear-gradient(160deg, #fff2c4, var(--r)); box-shadow: 0 0 14px -4px var(--r);
}
.ts-rang li:first-child b { animation: tsKrone 2.4s ease-in-out infinite; }
@keyframes tsKrone { 0%, 100% { box-shadow: 0 0 14px -4px var(--r); } 50% { box-shadow: 0 0 24px 0 var(--r); } }
.ts-rang span { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .04em; }
.ts-beispiel { padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--r); background: rgba(255, 255, 255, .03); font-style: italic; }
.ts-absolut { color: #ff8a9c !important; letter-spacing: .08em; text-transform: uppercase; animation: tsAbsolut 1.6s ease-in-out infinite; }
@keyframes tsAbsolut { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 14px rgba(255, 77, 106, .9); } }
.ts-alarm {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  font-size: 18px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff !important;
  border: 1px solid rgba(255, 77, 106, .7); background: linear-gradient(110deg, rgba(255, 77, 106, .3), rgba(200, 16, 46, .15));
  animation: tsAlarm 2s ease-in-out infinite;
}
@keyframes tsAlarm { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 106, .6); } 50% { box-shadow: 0 0 26px -2px rgba(255, 77, 106, .9); } }
.ts-schluss {
  margin: 20px 0 0; padding: 16px; border-radius: 18px; text-align: center; font-size: 18px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(62, 224, 255, .35); background: linear-gradient(90deg, transparent, rgba(62, 224, 255, .14), transparent);
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .7s backwards, tsAbsolut 3s ease-in-out 1.5s infinite;
}

/* Einsatz und Personenschutz */
.ts-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ts-team {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--t) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--t) 14%, transparent), rgba(var(--flaeche-rgb), .88) 45%);
  animation: vwKarteEin .65s cubic-bezier(.2, .9, .3, 1.1) calc(var(--i, 0) * 120ms + 150ms) backwards;
}
.ts-team::before {
  content: ''; position: absolute; inset: 0; z-index: 3; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), transparent 0 60%, var(--t) 78%, #fff 84%, var(--t) 90%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 6s linear infinite;
}
.ts-teamglut {
  position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--t) 35%, transparent), transparent); animation: gwGlut 4s ease-in-out infinite;
}
.ts-teamkopf { display: flex; align-items: center; gap: 12px; }
.ts-teamzeichen {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; font-size: 22px;
  background: color-mix(in srgb, var(--t) 20%, transparent); border: 1px solid color-mix(in srgb, var(--t) 55%, transparent);
  box-shadow: 0 0 18px -6px var(--t); animation: vwZeichenPuls 2.6s ease-in-out infinite;
}
.ts-teamname {
  flex: 1; min-width: 0; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
input.ts-teamname {
  padding: 4px 8px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--t) 50%, transparent); background: rgba(0, 0, 0, .2);
  font-family: inherit; transition: border-color .25s, box-shadow .25s, background .25s;
}
input.ts-teamname:focus { outline: none; border-style: solid; border-color: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 25%, transparent); background: rgba(0, 0, 0, .35); }
.ts-besetzt { flex: none; font-size: 14px; color: rgba(var(--hell-rgb), .65); }
.ts-besetzt b { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.ts-balken { position: relative; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.ts-balken i {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(calc(var(--s, 0) / 100));
  background: linear-gradient(90deg, var(--t), color-mix(in srgb, var(--t) 50%, #fff)); box-shadow: 0 0 10px var(--t);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ts-plaetze { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ts-platz {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .18);
  animation: vwZeileEin .45s cubic-bezier(.2, .9, .3, 1.1) calc(var(--i, 0) * 120ms + var(--j, 0) * 50ms + 300ms) backwards;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.ts-platz.besetzt { border-color: color-mix(in srgb, var(--t) 40%, transparent); background: color-mix(in srgb, var(--t) 10%, rgba(0, 0, 0, .18)); }
.ts-platz.rastet { animation: tsRasten .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tsRasten { 0% { transform: scale(.97); box-shadow: 0 0 0 0 var(--t); } 60% { transform: scale(1.02); } 100% { transform: scale(1); box-shadow: 0 0 0 10px transparent; } }
.ts-nr {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-size: 15px; font-weight: 700;
  color: rgba(var(--hell-rgb), .6); border: 1px solid rgba(255, 255, 255, .12); transition: color .3s, background .3s, box-shadow .3s;
}
.ts-platz.besetzt .ts-nr { color: #0b0614; background: var(--t); border-color: var(--t); box-shadow: 0 0 12px -2px var(--t); }
.ts-felder { flex: 1; min-width: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ts-felder .input { flex: 1 1 140px; min-width: 0; }
.ts-name:focus, .ts-funktion:focus { border-color: var(--t) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 25%, transparent) !important; }
.ts-pname { font-size: 16px; font-weight: 700; color: #fff; }
.ts-pfunktion {
  padding: 2px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--t) 22%, transparent); border: 1px solid color-mix(in srgb, var(--t) 45%, transparent);
}
.ts-fuss { align-items: center; }
.ts-stand { font-size: 12px; color: rgba(var(--hell-rgb), .5); }

@media (max-width: 900px) {
  .gw-bahnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-teams { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .gw-bahnen { grid-template-columns: minmax(0, 1fr); }
  .gw-staerke { align-items: flex-start; }
  .gw-poolsuche { margin-left: 0; max-width: none; flex-basis: 100%; }
  .ts-team { padding: 16px 14px; }
  .ts-teamname { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-symbol *, .vw-reiterzeichen::before, .gw-hinweis, .gw-hinweis::before, .gw-hinweiszeichen, .gw-bahn, .gw-chip, .gw-menue,
  .ts-emblem *, .ts-banner, .ts-bannerwellen i, .ts-bannertitel, .ts-regel, .ts-dreischritt span, .ts-liste li, .ts-rang b,
  .ts-absolut, .ts-alarm, .ts-schluss, .ts-team, .ts-team::before, .ts-teamglut, .ts-teamzeichen, .ts-platz { animation: none !important; }
  .gw-staerkebalken i, .ts-balken i { transition: none; }
}
.gw-truppekopf > div:first-child { flex: 1 1 320px; }
.gw-staerke { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════
   Regelwerk (regelwerk.php)
     Kopf            Siegel mit pendelnder Waage und kreisenden Trabanten
     Sperre          Hinweis, solange die Grundsätze unbestätigt sind
     Grundsätze      drei Regeln mit Nummer, Wasserzeichen, Folgen
                     (Bloodout), Drei-Tage-Uhr und Stufenleiter; darunter
                     der Haken „Ich akzeptiere …" mit Zähler und Stempel
     Funkdisziplin   die Teams-Stile (ts-*)
     Personenschutz  Schild mit Radar, acht Blöcke, Zitate, Schlussband
   ═══════════════════════════════════════════════════════════════════ */
/* Rubrik-Symbol: die Waage pendelt sich ein */
.sy-grundsatz .sy-waage { transform-origin: 50% 0; animation: syWaage 3.2s ease-in-out infinite; }
@keyframes syWaage { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* ── Kopf ──────────────────────────────────────────────────────── */
body.luxus.edel .rw-held {
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(193, 140, 255, .16), transparent 55%),
    radial-gradient(70% 120% at 0% 100%, rgba(245, 184, 74, .1), transparent 60%),
    rgba(var(--flaeche-rgb), .8);
}
.rw-emblem .rw-siegel {
  fill: rgba(var(--flaeche-rgb), .92); stroke: url(#rwVerlauf); stroke-width: 2;
  transform-box: view-box; transform-origin: 80px 80px; animation: rwSiegel 4s ease-in-out infinite;
}
@keyframes rwSiegel {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(193, 140, 255, .45)); }
  50%      { filter: drop-shadow(0 0 18px rgba(245, 184, 74, .75)); }
}
.rw-waage { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(193, 140, 255, .8)); }
.rw-balken { transform-box: view-box; transform-origin: 80px 64px; animation: rwBalken 4.2s ease-in-out infinite; }
@keyframes rwBalken { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* ── Sperre: noch nicht bestätigt ──────────────────────────────── */
.rw-sperre {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 16px 20px; border-radius: 20px;
  border: 1px solid rgba(255, 77, 106, .55);
  background: linear-gradient(110deg, rgba(255, 77, 106, .2), rgba(var(--flaeche-rgb), .9) 55%, rgba(193, 140, 255, .14));
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .15s backwards, rwSperrePuls 2.4s ease-in-out 1s infinite;
  transition: border-color .5s, background .5s;
}
@keyframes rwSperrePuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 106, .45); } 50% { box-shadow: 0 0 30px -6px rgba(255, 77, 106, .8); } }
.rw-sperre::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 45%, transparent 60%) -150% 0 / 250% 100% no-repeat;
  animation: rwStreif 3.6s ease-in-out infinite;
}
@keyframes rwStreif { 0% { background-position: 150% 0; } 60%, 100% { background-position: -150% 0; } }
.rw-sperreschloss { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; font-size: 26px;
  background: rgba(255, 77, 106, .18); border: 1px solid rgba(255, 77, 106, .5); }
.rw-sperreschloss i { position: absolute; font-style: normal; transition: opacity .4s, transform .5s cubic-bezier(.2, 1.6, .4, 1); }
.rw-sperreschloss .zu { animation: rwRuetteln 3s ease-in-out infinite; }
.rw-sperreschloss .auf, .rw-sperretext .auf { opacity: 0; transform: scale(.4); }
@keyframes rwRuetteln { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(4deg); } }
.rw-sperretext { position: relative; flex: 1 1 320px; display: grid; gap: 2px; min-width: 0; }
.rw-sperretext b { grid-area: 1 / 1; font-size: 19px; letter-spacing: .1em; text-transform: uppercase; color: #fff; transition: opacity .4s, transform .4s; }
.rw-sperretext span { font-size: 14px; color: rgba(var(--hell-rgb), .75); }
.rw-sperrelink {
  position: relative; flex: none; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(120deg, #ff4d6a, #c18cff); box-shadow: 0 10px 24px -12px #ff4d6a;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s;
}
.rw-sperrelink span { display: inline-block; animation: rwPfeil 1.4s ease-in-out infinite; }
@keyframes rwPfeil { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.rw-sperrelink:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 30px -12px #ff4d6a; }
/* Gerade bestätigt: das Schloss springt auf */
.rw-sperre.offen { border-color: rgba(63, 227, 160, .6); animation: none; background: linear-gradient(110deg, rgba(63, 227, 160, .2), rgba(var(--flaeche-rgb), .9) 60%); }
.rw-sperre.offen .zu { opacity: 0; transform: scale(.4); animation: none; }
.rw-sperre.offen .auf { opacity: 1; transform: none; }
.rw-sperre.offen .rw-sperreschloss { background: rgba(63, 227, 160, .18); border-color: rgba(63, 227, 160, .5); }
.rw-sperre.offen .rw-sperrelink { opacity: 0; pointer-events: none; }

/* ── Banner (Grundsätze und Personenschutz) ───────────────────── */
.rw-banner {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 20px 26px; margin-bottom: 18px; border-radius: 24px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%), rgba(var(--flaeche-rgb), .85);
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .1s backwards;
}
.rw-banner::before {
  content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .35;
  background: conic-gradient(from var(--kopf-winkel), transparent, color-mix(in srgb, var(--c) 40%, transparent) 10%, transparent 25%);
  animation: kopfWinkel 9s linear infinite;
}
.rw-banner .ts-bannermarke { color: color-mix(in srgb, var(--c) 60%, #fff); }
.rw-paragraf {
  position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  font-family: Georgia, 'Times New Roman', serif !important; font-size: 220px; line-height: 1; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 45%, transparent);
  animation: rwParagraf 10s ease-in-out infinite;
}
@keyframes rwParagraf {
  0%, 100% { transform: translate(-50%, -52%) rotate(-8deg) scale(1); opacity: .5; }
  50%      { transform: translate(-50%, -48%) rotate(8deg) scale(1.08); opacity: .85; }
}
.rw-bannertitel {
  position: relative; margin: 0; font-size: clamp(40px, 7vw, 72px); letter-spacing: .14em; line-height: 1;
  background: linear-gradient(95deg, #fff, color-mix(in srgb, var(--c) 70%, #fff) 30%, #fff 50%, color-mix(in srgb, var(--c) 70%, #fff) 70%, #fff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vwSchrift 6s linear infinite;
}
.rw-banner .ts-bannerzeile { position: relative; }

/* ── Grundsätze ────────────────────────────────────────────────── */
.rw-regeln { counter-reset: rw; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.rw-satz {
  counter-increment: rw; position: relative; overflow: hidden; isolation: isolate; padding: 22px 22px 20px; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--r) 12%, transparent), rgba(var(--flaeche-rgb), .88) 42%);
  animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) calc(var(--i, 0) * 120ms + 200ms) backwards;
  transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), box-shadow .35s;
}
@keyframes rwSatzEin { from { opacity: 0; transform: perspective(900px) translateY(30px) rotateX(14deg) scale(.96); filter: blur(4px); } }
/* Umlaufender Rand, wenn man auf die Regel zeigt */
.rw-satz::before {
  content: ''; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--kopf-winkel), var(--r), transparent 30%, color-mix(in srgb, var(--r) 50%, #fff) 50%, transparent 75%, var(--r));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 4s linear infinite; transition: opacity .35s;
}
/* Große Nummer als Wasserzeichen */
.rw-satz::after {
  content: counter(rw); position: absolute; right: 10px; top: -18px; z-index: -1; pointer-events: none;
  font-size: 170px; font-weight: 700; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--r) 30%, transparent);
  transition: transform .6s cubic-bezier(.2, 1.4, .4, 1);
}
.rw-satz:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px var(--r); }
.rw-satz:hover::before { opacity: 1; }
.rw-satz:hover::after { transform: translate(-8px, 6px) rotate(-6deg) scale(1.06); -webkit-text-stroke-color: color-mix(in srgb, var(--r) 55%, transparent); }
.rw-satzkopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rw-nummer {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 62px; height: 62px; border-radius: 18px; color: #0b0614;
  background: linear-gradient(150deg, #fff, var(--r)); box-shadow: 0 0 22px -6px var(--r);
}
.rw-nummer::before {
  content: ''; position: absolute; inset: -5px; border-radius: 22px; border: 2px solid var(--r); pointer-events: none;
  opacity: 0; animation: rwRing 2.8s ease-out infinite; animation-delay: calc(var(--i, 0) * .5s);
}
@keyframes rwRing { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.rw-nummer small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.rw-nummer b { font-size: 30px; line-height: .95; color: #0b0614; }
.rw-thema { margin: 0 0 2px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--r); }
.rw-satzkopf h3 { margin: 0; font-size: clamp(22px, 2.2vw, 27px); letter-spacing: .06em; line-height: 1.1; color: #fff; }
.rw-satz > p { margin: 0 0 12px; font-size: 15px; line-height: 1.62; color: rgba(var(--hell-rgb), .84); }
.rw-satz > p:last-child, .rw-satz > ol:last-child { margin-bottom: 0; }
.rw-satz p b { color: #fff; }
.rw-merke {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; color: #fff !important; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--r) 35%, transparent); border-left: 3px solid var(--r);
  background: linear-gradient(90deg, color-mix(in srgb, var(--r) 16%, transparent), transparent 85%);
}
.rw-merke > span { flex: none; font-size: 18px; animation: rwWippen 2.6s ease-in-out infinite; }
@keyframes rwWippen { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-12deg) translateY(-2px); } 60% { transform: rotate(8deg); } }
/* Folgen: Bloodout */
.rw-folge {
  position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; overflow: hidden;
  color: #ffd6dc !important; border: 1px solid rgba(255, 77, 106, .55);
  background: linear-gradient(110deg, rgba(255, 77, 106, .24), rgba(120, 8, 24, .2) 60%, transparent);
  animation: rwFolge 2.6s ease-in-out infinite;
}
.rw-satz .rw-folge b { color: #ff8a9c; letter-spacing: .06em; }
@keyframes rwFolge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 106, .5); } 50% { box-shadow: 0 0 24px -4px rgba(255, 77, 106, .85); } }
.rw-folgezeichen { flex: none; font-size: 20px; line-height: 1.2; animation: rwTropfen 2.2s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes rwTropfen {
  0%, 55%, 100% { transform: translateY(0) scale(1); }
  70%           { transform: translateY(4px) scale(.9, 1.15); }
  82%           { transform: translateY(-1px) scale(1.08, .92); }
}
.rw-gebot {
  margin: 14px 0 !important; padding: 10px 14px; border-radius: 14px; text-align: center; font-size: 16px !important; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff !important;
  border: 1px dashed color-mix(in srgb, var(--r) 55%, transparent); background: color-mix(in srgb, var(--r) 10%, transparent);
  animation: rwGebot 2.4s ease-in-out infinite;
}
@keyframes rwGebot { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 14px var(--r); } }
.rw-ausnahme {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; font-size: 14px !important;
  color: #ffe9b8 !important; border: 1px solid rgba(245, 210, 122, .4);
  background: linear-gradient(100deg, rgba(245, 210, 122, .14), transparent 45%, rgba(245, 210, 122, .1) 55%, transparent) 0 0 / 250% 100%;
  animation: rwSchimmer 5s linear infinite;
}
.rw-ausnahme > span { flex: none; font-size: 18px; }
@keyframes rwSchimmer { to { background-position: -250% 0; } }
/* Die Drei-Tage-Uhr: ein Tag nach dem anderen läuft ab, dann der Bloodout */
.rw-tage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; }
.rw-tag {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; overflow: hidden;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  border: 1px solid color-mix(in srgb, var(--r) 40%, transparent); background: rgba(255, 255, 255, .04);
}
.rw-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--r); box-shadow: 0 0 8px var(--r); animation: rwTag 6s steps(1) infinite; }
.rw-tag::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, color-mix(in srgb, var(--r) 40%, transparent), rgba(255, 77, 106, .35));
  animation: rwTagLauf 6s linear infinite;
}
.rw-tag:nth-child(2)::before, .rw-tag:nth-child(2) i { animation-delay: 1.2s; }
.rw-tag:nth-child(3)::before, .rw-tag:nth-child(3) i { animation-delay: 2.4s; }
@keyframes rwTagLauf { 0% { transform: scaleX(0); } 20%, 80% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); } }
@keyframes rwTag { 0% { background: var(--r); } 20% { background: #ff4d6a; } 85% { background: var(--r); } }
.rw-tagende {
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255, 77, 106, .7); background: rgba(255, 77, 106, .12);
  animation: rwTagEnde 6s ease-in-out infinite;
}
@keyframes rwTagEnde {
  0%, 58%, 92%, 100% { background: rgba(255, 77, 106, .12); box-shadow: none; transform: scale(1); }
  64%, 80%           { background: rgba(255, 77, 106, .55); box-shadow: 0 0 22px -2px #ff4d6a; transform: scale(1.08); }
}
.rw-verweis {
  display: inline-flex; align-items: center; gap: 8px; margin: -2px 0 4px; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  border: 1px solid color-mix(in srgb, var(--r) 45%, transparent); background: color-mix(in srgb, var(--r) 12%, transparent);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, background .3s;
}
.rw-verweis:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--r) 24%, transparent); box-shadow: 0 10px 22px -12px var(--r); }
/* Stufenleiter: Verwarnung → Sanktion → Ausschluss */
.rw-stufen { position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rw-stufen::before {
  content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px;
  background: linear-gradient(#f5b84a, #ff8a5c, #ff4d6a); transform-origin: 50% 0; animation: rwLeiter 4.5s ease-in-out infinite;
}
@keyframes rwLeiter { 0% { transform: scaleY(0); opacity: 1; } 55%, 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.rw-stufen li {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
  padding: 8px 12px 8px 0; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--s) 18%, transparent), transparent 85%);
  animation: rwStufe 4.5s ease-in-out infinite;
}
.rw-stufen li:nth-child(2) { animation-delay: .9s; }
.rw-stufen li:nth-child(3) { animation-delay: 1.8s; }
@keyframes rwStufe {
  0%, 30%, 100% { box-shadow: none; transform: translateX(0); }
  12%           { box-shadow: inset 0 0 0 1px var(--s), 0 0 20px -8px var(--s); transform: translateX(4px); }
}
.rw-stufen b {
  grid-row: span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  font-size: 17px; color: #140508; background: linear-gradient(160deg, #fff, var(--s)); box-shadow: 0 0 14px -4px var(--s);
}
.rw-stufen span { font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.rw-stufen small { font-size: 12px; letter-spacing: .06em; color: rgba(var(--hell-rgb), .62); }

/* ── Die Bestätigung: Haken, Zähler, Stempel ───────────────────── */
.rw-schwur {
  --c: #c18cff;
  position: relative; isolation: isolate; display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px; align-items: center;
  gap: 18px 26px; margin-top: 18px; padding: 24px 26px; border-radius: 26px; border: 1.5px solid transparent;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(193, 140, 255, .16), transparent 55%) padding-box,
    radial-gradient(90% 140% at 100% 100%, rgba(255, 77, 106, .12), transparent 55%) padding-box,
    linear-gradient(rgba(var(--flaeche-rgb), .92), rgba(var(--flaeche-rgb), .92)) padding-box,
    conic-gradient(from var(--kopf-winkel), #c18cff, transparent 25%, #ff4d6a 50%, transparent 75%, #c18cff) border-box;
  animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) .55s backwards, kopfWinkel 6s linear infinite;
}
.rw-schwur.ist-pflicht { box-shadow: 0 0 0 0 rgba(255, 77, 106, .5); animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) .55s backwards, kopfWinkel 3s linear infinite, rwRufen 2.2s ease-in-out 1.4s infinite; }
@keyframes rwRufen { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 106, .45); } 50% { box-shadow: 0 0 40px -6px rgba(255, 77, 106, .75); } }
.rw-schwur.ist-ok {
  --c: #3fe3a0;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(63, 227, 160, .14), transparent 55%) padding-box,
    radial-gradient(90% 140% at 100% 100%, rgba(245, 184, 74, .12), transparent 55%) padding-box,
    linear-gradient(rgba(var(--flaeche-rgb), .92), rgba(var(--flaeche-rgb), .92)) padding-box,
    conic-gradient(from var(--kopf-winkel), #3fe3a0, transparent 25%, #f5b84a 50%, transparent 75%, #3fe3a0) border-box;
}
.rw-schwur.winkt { animation: rwWinken .9s cubic-bezier(.3, 1.6, .5, 1), kopfWinkel 3s linear infinite; }
@keyframes rwWinken { 0% { transform: scale(1); } 30% { transform: scale(1.025); } 60% { transform: scale(.995); } 100% { transform: scale(1); } }
.rw-schwurglut {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; overflow: hidden;
}
.rw-schwurglut::before {
  content: ''; position: absolute; width: 260px; height: 260px; left: -60px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%);
  animation: rwGlutWandern 12s ease-in-out infinite alternate;
}
@keyframes rwGlutWandern { 0% { transform: translate(0, 0); } 50% { transform: translate(380px, 80px); } 100% { transform: translate(760px, -10px); } }
/* Zähler */
.rw-zaehler { position: relative; width: 150px; height: 150px; }
.rw-zaehlring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.rw-ringgrund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 9; }
.rw-ringstriche {
  fill: none; stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 3; stroke-dasharray: 1 5.9;
  transform-box: view-box; transform-origin: 60px 60px; animation: vwDrehen 30s linear infinite reverse;
}
.rw-ringwert {
  fill: none; stroke: url(#rwRingVerlauf); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: var(--anteil, 0) 100; filter: drop-shadow(0 0 6px rgba(255, 77, 106, .7));
  animation: rwRingEin 1.6s cubic-bezier(.3, .9, .3, 1) .7s backwards;
  transition: stroke-dasharray 1.4s cubic-bezier(.3, .9, .3, 1);
}
@keyframes rwRingEin { from { stroke-dasharray: 0 100; } }
.rw-zaehltext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rw-zaehltext b {
  font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #fff 30%, color-mix(in srgb, var(--c) 70%, #fff)); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.rw-zaehltext small { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .6); }
/* Mitte: Zeile, Haken, Stand */
.rw-schwurmitte { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rw-schwurmarke { margin: 0; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.rw-schwurzeile { margin: 0; font-size: 17px; letter-spacing: .06em; color: rgba(var(--hell-rgb), .8); }
.rw-schwurzeile b { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.rw-form { margin: 0; }
.rw-haken {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 16px 20px; border-radius: 18px; cursor: pointer; text-align: left; font: inherit; color: #fff;
  border: 1.5px dashed color-mix(in srgb, var(--c) 65%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 255, 255, .02));
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), border-color .3s, box-shadow .35s, background .4s;
}
.rw-haken:hover:not(:disabled) { transform: translateY(-3px) scale(1.01); border-style: solid; box-shadow: 0 16px 36px -18px var(--c); }
.rw-haken:active:not(:disabled) { transform: scale(.98); }
.rw-haken:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.rw-haken:disabled { cursor: default; }
.rw-kasten {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px;
  border: 2px solid var(--c); background: rgba(0, 0, 0, .25);
  transition: background .4s, box-shadow .4s, transform .5s cubic-bezier(.2, 1.8, .4, 1);
}
.rw-schwur:not(.ist-ok) .rw-kasten { animation: rwKasten 2s ease-in-out infinite; }
@keyframes rwKasten { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.rw-kasten svg { width: 28px; height: 28px; overflow: visible; }
.rw-kasten path {
  fill: none; stroke: #0b0614; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s cubic-bezier(.6, 0, .3, 1) .12s;
}
.rw-haken:hover:not(:disabled) .rw-kasten { transform: rotate(-8deg) scale(1.08); }
.rw-haken:hover:not(:disabled) .rw-kasten path { stroke: var(--c); stroke-dashoffset: .55; }
.rw-hakentext { font-size: clamp(18px, 2vw, 23px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; }
.rw-hakenglanz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
  animation: rwStreif 3.2s ease-in-out infinite;
}
/* Gesetzt */
.ist-ok .rw-haken { border-style: solid; border-color: color-mix(in srgb, var(--c) 70%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 24%, transparent), rgba(255, 255, 255, .02)); box-shadow: 0 0 30px -12px var(--c); }
.ist-ok .rw-kasten { background: linear-gradient(150deg, #fff, var(--c)); box-shadow: 0 0 20px -2px var(--c); }
.ist-ok .rw-kasten path { stroke: #0b0614; stroke-dashoffset: 0; }
.ist-ok .rw-hakenglanz { animation-duration: 5s; }
.rw-schwur.gerade .rw-kasten { animation: rwPlopp .7s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes rwPlopp { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } }
.rw-schwur.gerade .rw-hakentext { animation: rwLeuchten 1.4s ease-out; }
@keyframes rwLeuchten { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 22px var(--c); } 100% { text-shadow: 0 0 0 transparent; } }
/* Läuft gerade */
.rw-schwur.laeuft .rw-kasten::after {
  content: ''; position: absolute; inset: -6px; border-radius: 16px; border: 2px solid transparent; border-top-color: var(--c);
  animation: vwDrehen .8s linear infinite;
}
.rw-schwurstand { margin: 0; font-size: 14px; color: rgba(var(--hell-rgb), .7); }
.ist-pflicht .rw-schwurstand { color: #ffb3c1; }
/* Der Stempel: kommt erst mit dem Haken */
.rw-stempel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transform: scale(2.4) rotate(-30deg); pointer-events: none; }
.rw-stempel svg { width: 104px; height: 104px; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.rw-stempelrand { fill: #b3122e; stroke: #ff4d6a; stroke-width: 1.5; }
.rw-stempelring { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-dasharray: 2 3; transform-box: view-box; transform-origin: 50px 50px; animation: vwDrehen 16s linear infinite; }
.rw-stempeltext { font-family: Georgia, 'Times New Roman', serif !important; font-size: 34px; font-weight: 700; text-anchor: middle; fill: #ffe9b8; }
.rw-stempel small { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #ff8a9c; }
.ist-ok .rw-stempel { opacity: 1; transform: rotate(-12deg); animation: rwStempel .75s cubic-bezier(.3, 1.6, .5, 1) .5s backwards; }
@keyframes rwStempel {
  0%   { opacity: 0; transform: scale(2.4) rotate(-30deg); }
  60%  { opacity: 1; transform: scale(.88) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(-12deg); }
}
.rw-schwur.gerade .rw-stempel { animation-delay: .35s; }
/* Funken */
.rw-funkenfeld { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.rw-funkenfeld i {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--f); box-shadow: 0 0 8px var(--f);
  animation: rwFunke 1.3s cubic-bezier(.2, .7, .4, 1) var(--d) forwards; opacity: 0;
}
.rw-funkenfeld i:nth-child(3n) { border-radius: 50%; width: 6px; height: 6px; }
@keyframes rwFunke {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)) scale(.4); }
}
/* Wer schon bestätigt hat */
.rw-wer { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .07); }
.rw-koepfe { list-style: none; margin: 0; padding: 0 0 0 10px; display: flex; flex-wrap: wrap; row-gap: 8px; }
.rw-kopf {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgb(var(--flaeche-rgb)); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
  font-size: 15px; font-weight: 700; color: #0b0614;
  animation: rwKopfEin .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--k, 0) * 55ms + .8s) backwards;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), z-index 0s;
}
.rw-kopf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.rw-kopf:hover { transform: translateY(-5px) scale(1.18); z-index: 2; }
.rw-kopf.neu { animation: rwKopfNeu .8s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 2px var(--c), 0 0 18px var(--c); }
.rw-mehr { background: rgba(255, 255, 255, .1); color: #fff; font-size: 12px; }
@keyframes rwKopfEin { from { opacity: 0; transform: translateY(10px) scale(.4); } }
@keyframes rwKopfNeu { 0% { opacity: 0; transform: scale(0) rotate(-90deg); } 100% { opacity: 1; transform: none; } }
.rw-namen { flex: 1 1 260px; min-width: 0; }
.rw-namen summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; cursor: pointer; list-style: none;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent);
  transition: background .3s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.rw-namen summary::-webkit-details-marker { display: none; }
.rw-namen summary::after { content: '▾'; transition: transform .3s; }
.rw-namen[open] summary::after { transform: rotate(180deg); }
.rw-namen summary:hover { background: color-mix(in srgb, var(--c) 22%, transparent); transform: translateY(-1px); }
.rw-namenspalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 12px; }
.rw-namen[open] .rw-namenspalten { animation: vwKarteEin .45s cubic-bezier(.2, .9, .3, 1.1); }
.rw-namenkopf { margin: 0 0 8px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.rw-namenkopf.ok { color: #8ff5c8; }
.rw-namenkopf.offen { color: #ffb3c1; }
.rw-namenliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; }
.rw-namenliste li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); font-size: 14px;
}
.rw-namenliste li b { color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-namenliste li small { flex: none; font-size: 12px; color: rgba(var(--hell-rgb), .55); }
.rw-namenliste.offen li { border-color: rgba(255, 77, 106, .2); }

/* ── Personenschutz ────────────────────────────────────────────── */
.rw-schild { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 6px; }
.rw-schild::before {
  content: ''; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), transparent 0 70%, color-mix(in srgb, var(--c) 55%, transparent) 100%);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%); mask: radial-gradient(circle, transparent 42%, #000 43%);
  animation: kopfWinkel 3s linear infinite;
}
.rw-schild::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); animation: rwRing 3s ease-out infinite;
}
.rw-schild svg { width: 74px; height: 74px; overflow: visible; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c) 80%, transparent)); }
.rw-schild svg path:first-child {
  fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round;
  animation: rwSchild 3s ease-in-out infinite;
}
@keyframes rwSchild { 0%, 100% { fill: color-mix(in srgb, var(--c) 12%, transparent); } 50% { fill: color-mix(in srgb, var(--c) 34%, transparent); } }
.rw-schildhaken { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: syHaken 3s ease-out infinite; }
.rw-dreiwort { font-size: clamp(30px, 5vw, 54px); letter-spacing: .08em; background: none; animation: none; }
.rw-dreiwort span {
  display: inline-block;
  background: linear-gradient(95deg, #fff, #ffe2a8 30%, #fff 50%, #ffe2a8 70%, #fff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: rwWort .7s cubic-bezier(.2, 1.4, .4, 1) .3s backwards, vwSchrift 6s linear infinite;
}
.rw-dreiwort span:nth-child(2) { animation-delay: .55s, 0s; }
.rw-dreiwort span:nth-child(3) { animation-delay: .8s, 0s; }
@keyframes rwWort { from { opacity: 0; transform: translateY(18px) scale(.8); filter: blur(6px); } }
.rw-schutzgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.rw-schutzblock .ts-regelzeichen { animation: rwZeichen 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes rwZeichen { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 18px -4px var(--r); } }
.rw-schutznr { color: var(--r); font-variant-numeric: tabular-nums; }
.rw-schutzblock h3 { flex-wrap: wrap; }
.rw-leitsatz {
  padding: 8px 12px; border-radius: 12px; border-left: 3px solid var(--r); font-style: italic; color: #fff !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--r) 14%, transparent), transparent 80%);
}
.rw-hinweis {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; font-size: 14px !important;
  color: #ffe2a8 !important; border: 1px solid rgba(245, 184, 74, .55); background: rgba(245, 184, 74, .12);
}
.rw-hinweis > span { flex: none; animation: rwBlinken 1.6s ease-in-out infinite; }
@keyframes rwBlinken { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.9); } }
/* Grundsatz: drei Sätze, die nacheinander aufleuchten */
.rw-grundsatz {
  position: relative; margin-top: 20px; padding: 22px 20px; border-radius: 24px; text-align: center;
  border: 1px solid rgba(245, 184, 74, .35); background: radial-gradient(80% 140% at 50% 0%, rgba(245, 184, 74, .14), transparent 70%), rgba(var(--flaeche-rgb), .82);
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .5s backwards;
}
.rw-grundsatztitel { margin: 0 0 14px; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: #f5d27a; }
.rw-zitate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rw-zitate blockquote {
  margin: 0; padding: 18px 14px; border-radius: 18px; font-size: 18px; font-weight: 700; letter-spacing: .06em; line-height: 1.35; color: #fff;
  border: 1px solid rgba(245, 184, 74, .3); background: rgba(255, 255, 255, .03);
  animation: rwZitat 6s ease-in-out infinite; animation-delay: calc(var(--i) * 2s);
}
@keyframes rwZitat {
  0%, 30%, 100% { border-color: rgba(245, 184, 74, .3); background: rgba(255, 255, 255, .03); box-shadow: none; transform: translateY(0); }
  10%, 20%      { border-color: rgba(245, 184, 74, .85); background: rgba(245, 184, 74, .16); box-shadow: 0 14px 30px -16px #f5b84a; transform: translateY(-4px); }
}
/* Schlussband: Personenschutz – Baron */
.rw-abschluss {
  position: relative; margin-top: 16px; padding: 22px 18px; border-radius: 22px; text-align: center; overflow: hidden; isolation: isolate;
  border: 1.5px solid transparent;
  background:
    linear-gradient(120deg, rgba(245, 184, 74, .16), rgb(var(--flaeche-rgb)) 40%, rgb(var(--flaeche-rgb)) 60%, rgba(245, 184, 74, .16)) padding-box,
    conic-gradient(from var(--kopf-winkel), #f5b84a, transparent 25%, #fff2c4 50%, transparent 75%, #f5b84a) border-box;
  animation: vwKarteEin .6s cubic-bezier(.2, .9, .3, 1.1) .7s backwards, kopfWinkel 6s linear infinite;
}
.rw-abschlusstitel { margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.rw-abschlusstitel > span { display: inline-block; animation: rwKrone 2.4s ease-in-out infinite; }
@keyframes rwKrone { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-8deg); } }
.rw-abschlusszeile { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 16px; letter-spacing: .16em; text-transform: uppercase; }
.rw-abschlusszeile span { color: rgba(var(--hell-rgb), .6); animation: rwZeile 4.5s ease-in-out infinite; }
.rw-abschlusszeile span:nth-child(2) { animation-delay: 1.5s; }
.rw-abschlusszeile span:nth-child(3) { animation-delay: 3s; }
@keyframes rwZeile { 0%, 35%, 100% { color: rgba(var(--hell-rgb), .6); text-shadow: none; } 12%, 22% { color: #fff; text-shadow: 0 0 14px #f5b84a; } }

/* Karten, die erst beim Scrollen in den Blick kommen */
:is(.rw-satz, .rw-schutzblock, .ts-regel, .rw-grundsatz, .rw-abschluss, .ts-schluss, .rw-schwur).wartet { opacity: 0; animation: none !important; }
.wartet .ts-liste li, .wartet .rw-kopf, .wartet .rw-ringwert, .wartet .rw-stempel { animation: none !important; }
:is(.rw-satz, .rw-schutzblock, .ts-regel, .rw-grundsatz, .ts-schluss).da { animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) backwards; }
.rw-abschluss.da { animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) backwards, kopfWinkel 6s linear infinite; }
.ts-schluss.da { animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) backwards, tsAbsolut 3s ease-in-out 1.5s infinite; }
.rw-schwur.da { animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) backwards, kopfWinkel 6s linear infinite; }
.rw-schwur.ist-pflicht.da { animation: rwSatzEin .75s cubic-bezier(.2, .9, .3, 1.1) backwards, kopfWinkel 3s linear infinite, rwRufen 2.2s ease-in-out .9s infinite; }
.rw-schwur.da .rw-ringwert { animation-delay: .3s; }
.rw-schwur.da .rw-kopf { animation-delay: calc(var(--k, 0) * 55ms + .4s); }

@media (max-width: 900px) {
  .rw-schwur { grid-template-columns: 130px minmax(0, 1fr); }
  .rw-zaehler { width: 130px; height: 130px; }
  .rw-zaehltext b { font-size: 40px; }
  .rw-stempel { position: absolute; right: 14px; top: 10px; }
  .rw-stempel svg { width: 72px; height: 72px; }
  .rw-stempel small { display: none; }
}
@media (max-width: 760px) {
  .rw-zitate { grid-template-columns: minmax(0, 1fr); }
  .rw-paragraf { font-size: 160px; }
  .rw-satz { padding: 18px 16px; }
  .rw-satz::after { font-size: 130px; }
  .rw-nummer { width: 54px; height: 54px; }
  .rw-nummer b { font-size: 26px; }
}
@media (max-width: 560px) {
  .rw-schwur { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 20px 16px; text-align: center; }
  .rw-schwurmitte { align-items: center; width: 100%; }
  .rw-haken { padding: 14px 14px; gap: 12px; }
  .rw-hakentext { text-align: left; }
  .rw-wer { justify-content: center; }
  .rw-sperre { padding: 14px 16px; }
  .rw-sperrelink { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-emblem *, .rw-banner, .rw-banner::before, .rw-paragraf, .rw-bannertitel, .rw-satz, .rw-satz::before, .rw-nummer::before,
  .rw-merke > span, .rw-folge, .rw-folgezeichen, .rw-gebot, .rw-ausnahme, .rw-tag i, .rw-tag::before, .rw-tagende, .rw-stufen::before,
  .rw-stufen li, .rw-schild::before, .rw-schild::after, .rw-schild svg *, .rw-dreiwort span, .rw-schutzblock .ts-regelzeichen,
  .rw-hinweis > span, .rw-grundsatz, .rw-zitate blockquote, .rw-abschluss, .rw-abschlusstitel > span, .rw-abschlusszeile span,
  .rw-sperre, .rw-sperre::before, .rw-sperreschloss i, .rw-sperrelink span, .rw-schwur, .rw-schwurglut::before, .rw-ringstriche,
  .rw-ringwert, .rw-kasten, .rw-hakenglanz, .rw-stempel, .rw-stempelring, .rw-kopf, .rw-funkenfeld i,
  .sy-grundsatz .sy-waage { animation: none !important; }
  .rw-schildhaken { stroke-dashoffset: 0; }
  .rw-tag::before { transform: scaleX(1); }
  .wartet { opacity: 1 !important; }
}
.rw-wer:not(:has(li)) { display: none; }

/* ── Menüreihen: nichts wird abgeschnitten ─────────────────────────
   Die Reihen dürfen breiter sein als der Seiteninhalt, die Reiter rücken
   auf schmaleren Schirmen enger zusammen — und passt es dann noch immer
   nicht, rutscht der Rest in eine weitere Zeile, statt hinter dem Rand
   zu verschwinden. Auf dem Handy bleibt die Reihe zum Wischen. */
@media (min-width: 821px) {
  body .hauptnav .navzeile { max-width: 1320px; flex-wrap: wrap; row-gap: 6px; }
  body.edel .hauptnav .navlink { padding-left: clamp(10px, 1.3vw, 19px); padding-right: clamp(10px, 1.3vw, 19px); }
}
@media (min-width: 821px) and (max-width: 1100px) {
  body.welt-codebreaker .hauptnav .navlink { font-size: 16px; letter-spacing: .03em; }
}
@media (min-width: 821px) and (max-width: 960px) {
  body.welt-codebreaker .hauptnav .navlink { font-size: 15px; letter-spacing: .02em; }
  body.edel .hauptnav .navlink { padding-left: 8px; padding-right: 8px; }
  body.edel .hauptnav .navzeile { gap: 4px; }
}

/* ── Abwesenheit: der Grund per Klick ──────────────────────────────
   Gesetzte Felder, die sich nicht ändern lassen, öffnen beim Klick ein
   Fenster mit Stand, Grund und wer eingetragen hat; im Fenster zum
   Ändern steht dasselbe über der Auswahl. */
.aw-feld.fest.gesetzt[data-grund-zeigen] { cursor: pointer; }
.aw-feld.fest.gesetzt[data-grund-zeigen]:hover { transform: scale(1.1); box-shadow: 0 0 18px -4px var(--c); }
.aw-feld.fest.gesetzt[data-grund-zeigen]:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.aw-grundanzeige {
  --c: rgba(var(--gold-rgb), .8);
  position: relative; margin-top: 12px; padding: 12px 14px 12px 16px; border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 80%);
  animation: awGrundEin .45s cubic-bezier(.2, .9, .3, 1.1) .08s backwards;
}
.aw-grundanzeige::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.aw-grundanzeige[hidden] { display: none; }
@keyframes awGrundEin { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
.aw-grundart { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0b0614; background: var(--c); }
.aw-grundanzeige p { margin: 8px 0 0; }
.aw-grundtext { font-size: 16px; font-weight: 700; line-height: 1.45; color: #fff; overflow-wrap: anywhere; }
.aw-grundleer { font-size: 13px; font-style: italic; color: rgba(var(--hell-rgb), .55); }
.aw-grundanzeige small { display: block; margin-top: 6px; font-size: 11.5px; color: rgba(var(--hell-rgb), .45); }
.aw-punkt.aw-klickpunkt { background: rgba(var(--zweit-rgb), .9); box-shadow: 0 0 10px rgba(var(--zweit-rgb), .9); animation: awKlickpunkt 1.8s ease-in-out infinite; }
@keyframes awKlickpunkt { 0%, 100% { transform: scale(1); } 50% { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .aw-grundanzeige, .aw-punkt.aw-klickpunkt { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Erfassung: Übertragen — Fenster mit den Zielen, Vermerk am Eintrag,
   Herkunft im Aktenformular und das Übernahme-Feld auf den Zielseiten
   ═══════════════════════════════════════════════════════════════════ */
.erf-uebertragknopf {
  position: relative; overflow: hidden; color: #fff !important;
  border-color: rgba(62, 224, 255, .55) !important;
  background: linear-gradient(110deg, rgba(62, 224, 255, .22), rgba(169, 112, 255, .18)) !important;
}
.erf-uebertragknopf::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
  animation: erfGlanz 3.4s ease-in-out infinite;
}
@keyframes erfGlanz { 0% { background-position: 150% 0; } 60%, 100% { background-position: -150% 0; } }

/* Der Vermerk am Eintrag */
.erf-vermerk { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.erf-vermerklink {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; text-decoration: none;
  color: #dff9ff; border: 1px solid rgba(62, 224, 255, .4);
  background: linear-gradient(100deg, rgba(62, 224, 255, .16), transparent 80%);
  animation: erfVermerkEin .6s cubic-bezier(.2, .9, .3, 1.2) both;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s;
}
.erf-vermerklink:hover { transform: translateX(3px); box-shadow: 0 0 22px -8px #3ee0ff; }
.erf-vermerklink b { color: #fff; }
.erf-vermerklink small { display: block; font-size: 11px; color: rgba(var(--hell-rgb), .55); }
.erf-vermerkzeichen {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; font-weight: 800;
  color: #04121a; background: #3ee0ff; box-shadow: 0 0 14px -2px #3ee0ff; animation: erfPfeil 2.4s ease-in-out infinite;
}
@keyframes erfVermerkEin { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes erfPfeil { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
.erf-vermerk form { margin: 0; }

/* Das Fenster */
.erf-zielfenster {
  width: min(940px, calc(100vw - 32px)); max-height: min(86vh, 900px); margin: auto; padding: 0; overflow: hidden; display: none;
  border-radius: 26px; color: var(--hell, #fff); border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(var(--kopf-rgb), .97), rgba(var(--kopf-rgb), .97)) padding-box,
    conic-gradient(from var(--kopf-winkel), #3ee0ff, transparent 25%, #a970ff 50%, transparent 75%, #3ee0ff) border-box;
  box-shadow: 0 40px 90px -30px #000, 0 0 60px -20px rgba(62, 224, 255, .5);
}
.erf-zielfenster[open] { display: flex; flex-direction: column; animation: erfFensterAuf .45s cubic-bezier(.2, .9, .3, 1.15), kopfWinkel 6s linear infinite; }
.erf-zielfenster::backdrop { background: rgba(4, 3, 8, .72); backdrop-filter: blur(6px); }
@keyframes erfFensterAuf { from { opacity: 0; transform: translateY(26px) scale(.95); filter: blur(6px); } }
.erf-zielkopf {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: radial-gradient(80% 160% at 0% 0%, rgba(62, 224, 255, .16), transparent 60%);
}
.erf-zielmarke { margin: 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #8ff0ff; }
.erf-zielkopf h2 { margin: 2px 0 4px; font-size: clamp(24px, 3vw, 32px); }
.erf-zielvorschau { margin: 0; font-size: 13px; color: rgba(var(--hell-rgb), .65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px; }
.erf-zielzu {
  flex: none; width: 36px; height: 36px; border-radius: 12px; cursor: pointer; font: inherit; color: #fff;
  border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); transition: transform .3s, background .3s;
}
.erf-zielzu:hover { transform: rotate(90deg); background: rgba(255, 77, 106, .25); }
.erf-zielinhalt { overflow-y: auto; padding: 8px 24px 24px; display: grid; gap: 18px; }
.erf-zielgruppe { animation: erfGruppeEin .5s cubic-bezier(.2, .9, .3, 1.1) calc(var(--g) * 90ms + 120ms) backwards; }
@keyframes erfGruppeEin { from { opacity: 0; transform: translateY(14px); } }
.erf-zielgruppenkopf { margin: 10px 0 2px; font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.erf-zielgruppenzeile { margin: 0 0 10px; font-size: 12px; color: rgba(var(--hell-rgb), .5); }
.erf-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.erf-ziel {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 16px;
  text-decoration: none; color: #fff; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(255, 255, 255, .02) 70%);
  animation: erfKachelEin .45s cubic-bezier(.2, 1.3, .4, 1) calc(var(--i) * 35ms + 200ms) backwards;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), border-color .25s, box-shadow .3s;
}
@keyframes erfKachelEin { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.erf-ziel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(140px circle at 20% 50%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%);
}
.erf-ziel:hover, .erf-ziel:focus-visible { transform: translateY(-3px) scale(1.02); border-color: var(--c); box-shadow: 0 16px 30px -18px var(--c); outline: none; }
.erf-ziel:hover::before, .erf-ziel:focus-visible::before { opacity: 1; }
.erf-ziel.geht { animation: erfGeht .3s ease-in forwards; }
@keyframes erfGeht { to { transform: scale(1.06); box-shadow: 0 0 40px -4px var(--c); filter: brightness(1.4); } }
.erf-zielzeichen {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 20px;
  background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  transition: transform .45s cubic-bezier(.2, 1.6, .4, 1);
}
.erf-ziel:hover .erf-zielzeichen { transform: rotate(-10deg) scale(1.12); }
.erf-zieltext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.erf-zieltext b { font-size: 15px; line-height: 1.15; letter-spacing: .03em; overflow-wrap: break-word; }
.erf-zieltext small { font-size: 11.5px; color: rgba(var(--hell-rgb), .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erf-zielpfeil { flex: none; color: var(--c); font-weight: 800; transition: transform .3s; }
.erf-ziel:hover .erf-zielpfeil { transform: translateX(4px); }
/* An eine bestehende Akte */
.erf-anhaengen { display: grid; gap: 10px; }
.erf-akten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.erf-akte {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; color: #fff; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03);
  animation: erfKachelEin .35s cubic-bezier(.2, 1.3, .4, 1) calc(var(--i) * 30ms) backwards;
  transition: transform .25s, border-color .25s, background .25s;
}
.erf-akte:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.erf-akte.an { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 20px -8px var(--c); }
.erf-aktezeichen { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.erf-aktetext { min-width: 0; display: flex; flex-direction: column; }
.erf-aktetext b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erf-aktetext small { font-size: 11px; color: rgba(var(--hell-rgb), .5); }
.erf-aktenleer { padding: 8px 12px; font-size: 13px; color: rgba(var(--hell-rgb), .5); }
.erf-anhaengenform { padding: 14px; border-radius: 16px; border: 1px solid rgba(62, 224, 255, .35); background: rgba(62, 224, 255, .06); }
.erf-anhaengenform.kommt { animation: erfGruppeEin .4s cubic-bezier(.2, .9, .3, 1.2); }
.erf-anhaengenform[hidden] { display: none; }
.erf-gewaehlt { margin: 0 0 6px; font-weight: 700; color: #fff; }
.erf-losknopf { margin-top: 10px; }

/* Herkunft im Aktenformular */
.erf-herkunft {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 14px 18px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 18%, transparent), rgba(var(--flaeche-rgb), .85) 60%);
}
.erf-herkunftzeichen { font-size: 26px; animation: erfPfeil 2.4s ease-in-out infinite; }
.erf-herkunft > div { flex: 1 1 280px; }
.erf-herkunfttitel { margin: 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.erf-herkunftzeile { margin: 2px 0 0; font-size: 13px; color: rgba(var(--hell-rgb), .7); }
.erf-herkunftlink { font-size: 12px; color: rgba(var(--hell-rgb), .6); text-decoration: none; }
.erf-herkunftlink:hover { color: #fff; }

/* Das Übernahme-Feld auf den Zielseiten */
.uebernahme {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; width: min(380px, calc(100vw - 36px)); border-radius: 22px; overflow: hidden;
  color: #fff; border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(var(--kopf-rgb, 14, 10, 24), .96), rgba(var(--kopf-rgb, 14, 10, 24), .96)) padding-box,
    conic-gradient(from var(--kopf-winkel), #3ee0ff, transparent 30%, #a970ff 55%, transparent 80%, #3ee0ff) border-box;
  box-shadow: 0 30px 60px -24px #000, 0 0 40px -16px rgba(62, 224, 255, .6);
  backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(30px) scale(.94);
  transition: opacity .45s, transform .55s cubic-bezier(.2, 1.4, .4, 1);
  animation: kopfWinkel 5s linear infinite;
}
.uebernahme.da { opacity: 1; transform: none; }
.uebernahme.geht { opacity: 0; transform: translateY(30px) scale(.9); }
.uebernahme.erledigt { box-shadow: 0 30px 60px -24px #000, 0 0 50px -10px #3fe3a0; }
.uebernahme-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: radial-gradient(90% 160% at 0% 0%, rgba(62, 224, 255, .2), transparent 60%); }
.uebernahme-zeichen { font-size: 22px; animation: erfPfeil 2.4s ease-in-out infinite; }
.uebernahme-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uebernahme-titel b { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.uebernahme-titel small { font-size: 11px; color: rgba(255, 255, 255, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uebernahme-mini { flex: none; width: 28px; height: 28px; border-radius: 9px; cursor: pointer; font: inherit; color: #fff; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.uebernahme-koerper { display: grid; gap: 10px; padding: 0 14px 14px; max-height: 60vh; overflow-y: auto; transition: max-height .4s, padding .4s; }
.uebernahme.zu .uebernahme-koerper { max-height: 0; padding-bottom: 0; overflow: hidden; }
.uebernahme-text { margin: 0; max-height: 160px; overflow-y: auto; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; font-size: 13px; line-height: 1.5; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.uebernahme-text.leer { font-style: italic; color: rgba(255, 255, 255, .55); }
.uebernahme-knoepfe, .uebernahme-fuss { display: flex; gap: 8px; flex-wrap: wrap; }
.uebernahme-knopf, .uebernahme-fertig, .uebernahme-verwerfen {
  flex: 1 1 auto; padding: 9px 12px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #fff;
  border: 1px solid rgba(62, 224, 255, .4); background: rgba(62, 224, 255, .12); transition: transform .25s, background .25s, box-shadow .25s;
}
.uebernahme-knopf:hover, .uebernahme-fertig:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px #3ee0ff; }
.uebernahme-knopf.an { background: rgba(62, 224, 255, .35); animation: uebernahmePuls 1.2s ease-in-out infinite; }
@keyframes uebernahmePuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(62, 224, 255, .5); } 50% { box-shadow: 0 0 0 6px transparent; } }
.uebernahme-fertig { border-color: rgba(63, 227, 160, .55); background: linear-gradient(110deg, rgba(63, 227, 160, .3), rgba(63, 227, 160, .1)); }
.uebernahme-fertig:disabled { opacity: .6; cursor: wait; }
.uebernahme-verwerfen { flex: 0 0 auto; border-color: rgba(255, 255, 255, .15); background: transparent; font-weight: 600; color: rgba(255, 255, 255, .7); }
.uebernahme-hinweis { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.uebernahme-dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.uebernahme-dateien a { display: block; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; color: #dff9ff; text-decoration: none; background: rgba(255, 255, 255, .04); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uebernahme-dateien a:hover { background: rgba(62, 224, 255, .15); }
.uebernahme-meldung { margin: 0; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; background: rgba(255, 77, 106, .18); transition: opacity .4s; }
.uebernahme-meldung.gut { background: rgba(63, 227, 160, .18); }
.uebernahme-meldung.geht { opacity: 0; }
body.uebernahme-waehlt :is(textarea, input[type="text"], input[type="search"], input:not([type]), [contenteditable="true"]):hover {
  outline: 2px dashed #3ee0ff; outline-offset: 2px; cursor: copy;
}
.uebernahme-gefuellt { animation: uebernahmeGefuellt 1.2s ease-out; }
@keyframes uebernahmeGefuellt { 0% { box-shadow: 0 0 0 0 rgba(62, 224, 255, .9); } 100% { box-shadow: 0 0 0 14px transparent; } }

@media (prefers-reduced-motion: reduce) {
  .erf-uebertragknopf::after, .erf-vermerklink, .erf-vermerkzeichen, .erf-zielfenster[open], .erf-zielgruppe, .erf-ziel, .erf-akte,
  .erf-herkunftzeichen, .uebernahme, .uebernahme-zeichen, .uebernahme-knopf.an { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Dashboard: Rubriken, Übersicht und Anwesenheitstafel
   ═══════════════════════════════════════════════════════════════════ */
/* Rubrik-Symbole */
.sy-uebersicht .sy-saeule { transform-origin: 50% 100%; animation: sySaeule 2.6s cubic-bezier(.3, 1.5, .5, 1) infinite; fill: color-mix(in srgb, var(--c) 25%, transparent); }
.sy-uebersicht .sy-saeule.s2 { animation-delay: .25s; }
.sy-uebersicht .sy-saeule.s3 { animation-delay: .5s; }
@keyframes sySaeule { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.45); } 70% { transform: scaleY(1.08); } }
.sy-anwesenheit .sy-kalenderhaken { stroke-dasharray: 1; stroke-dashoffset: 1; animation: syHaken 2.8s ease-out infinite; stroke-width: 2.2; }
.sy-nutzer .sy-zweiter { animation: syNicken 2.4s ease-in-out infinite; }
@keyframes syNicken { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
.sy-protokoll .sy-zeile { stroke-dasharray: 1; stroke-dashoffset: 1; animation: syZeile 3s ease-out infinite; }
.sy-protokoll .sy-zeile.z2 { animation-delay: .35s; }
.sy-protokoll .sy-zeile.z3 { animation-delay: .7s; }
@keyframes syZeile { 0%, 10% { stroke-dashoffset: 1; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }

/* Kopf: Radar und der heutige Anteil */
body.luxus.edel .dash-held {
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(63, 227, 160, .14), transparent 55%),
    radial-gradient(70% 120% at 0% 100%, rgba(201, 162, 39, .12), transparent 60%),
    rgba(var(--flaeche-rgb), .8);
}
.dash-emblem .dash-radar { transform-box: view-box; transform-origin: 80px 80px; animation: vwDrehen 5s linear infinite; }
.dash-emblem .dash-radar path { fill: url(#dashVerlauf); opacity: .28; }
.dash-emblem .dash-kern { fill: rgba(var(--flaeche-rgb), .94); stroke: url(#dashVerlauf); stroke-width: 2; animation: vwAtmen 4s ease-in-out infinite; }
.dash-emblem .dash-kernring {
  fill: none; stroke: #3fe3a0; stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--anteil, 0) 100;
  transform-box: view-box; transform-origin: 80px 80px; transform: rotate(-90deg);
  filter: drop-shadow(0 0 6px #3fe3a0); animation: dashRingEin 1.6s cubic-bezier(.3, .9, .3, 1) .5s backwards;
}
@keyframes dashRingEin { from { stroke-dasharray: 0 100; } }
.dash-emblem .dash-kernzahl { font-size: 30px; font-weight: 700; text-anchor: middle; fill: #fff; }
.dash-emblem .dash-kernklein { font-size: 9px; letter-spacing: .12em; text-anchor: middle; fill: rgba(255, 255, 255, .6); text-transform: uppercase; }

/* Kacheln: Glanz, Schein, Zahlen, die hochlaufen */
.dash-kacheln { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.dash-kachel {
  position: relative; overflow: hidden; isolation: isolate; padding: 16px 18px; border-radius: 18px;
  border-color: color-mix(in srgb, var(--c) 30%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .22) 70%);
  animation: dashKachelEin .6s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: var(--d, 0ms);
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), border-color .25s, box-shadow .3s;
}
@keyframes dashKachelEin { from { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(4px); } }
a.dash-kachel:hover, .dash-kachel:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 18px 34px -20px var(--c); }
.dash-kachel::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%);
  animation: dashSchein 4s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 3);
}
@keyframes dashSchein { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.dash-kachelglanz {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .1) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
  animation: erfGlanz 5s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 4);
}
.dash-kachel-zahl { font-size: 30px; text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.dash-kachel-oben > span { display: inline-block; animation: rwWippen 3s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 2); }

/* Übersicht: heute und zuletzt aktiv */
.dash-uebersicht { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.dash-heute, .dash-zuletzt { padding: 20px 22px; margin: 0; animation: dashKachelEin .6s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: var(--d, 0ms); }
.dash-heutekopf { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-heutering { position: relative; width: 120px; height: 120px; flex: none; }
.dash-heutering svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-ringgrund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 10; }
.dash-ringwert {
  fill: none; stroke: #3fe3a0; stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--anteil, 0) 100;
  filter: drop-shadow(0 0 8px rgba(63, 227, 160, .8)); animation: dashRingEin 1.6s cubic-bezier(.3, .9, .3, 1) .4s backwards;
}
.dash-heutering > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-heutering b { font-size: 36px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.dash-heutering small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }
.dash-heutetitel { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.dash-weiter { display: inline-block; margin-top: 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #3fe3a0; text-decoration: none; transition: transform .3s; }
.dash-weiter:hover { transform: translateX(4px); }
.dash-koepfe { list-style: none; margin: 16px 0 0; padding: 0 0 0 10px; display: flex; flex-wrap: wrap; row-gap: 8px; }
.dash-koepfe li {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgb(var(--flaeche-rgb)); box-shadow: 0 0 0 2px rgba(63, 227, 160, .55);
  animation: rwKopfEin .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--k, 0) * 45ms + .5s) backwards;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.dash-koepfe li:hover { transform: translateY(-5px) scale(1.2); z-index: 2; }
.dash-koepfe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.dash-koepfe li span { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; color: #0b0614; background: var(--c); }
.dash-koepfe .dash-mehr { font-size: 12px; color: #fff; background: rgba(255, 255, 255, .12); }
.dash-zuletztliste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.dash-zuletztliste li { animation: vwZeileEin .45s cubic-bezier(.2, .9, .3, 1.1) calc(var(--k, 0) * 50ms + .3s) backwards; }
.dash-zuletztliste a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05);
  transition: transform .25s, background .25s, border-color .25s;
}
.dash-zuletztliste a:hover { transform: translateX(4px); background: rgba(106, 176, 230, .12); border-color: rgba(106, 176, 230, .4); }
.dash-zuletztname { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-zuletztzeit { flex: none; font-size: 12px; color: rgba(var(--hell-rgb), .55); }

/* Anwesenheit: Leiste und Tafel */
.dash-awleiste { position: relative; top: auto; margin-top: 0; }
.dash-tafelrahmen { margin-top: 12px; padding: 0; overflow-x: auto; }
.dash-tafel { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(7, minmax(64px, 1fr)); min-width: 760px; }
.dash-reihe { display: contents; }
.dash-reihe[hidden] { display: none; }
.dash-ecke, .dash-tagkopf {
  position: sticky; top: 0; z-index: 2; padding: 12px 10px; background: rgba(var(--kopf-rgb), .96);
  border-bottom: 1px solid rgba(var(--gold-rgb), .2);
}
.dash-ecke { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.dash-tagkopf { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.dash-tagkopf.heute { background: linear-gradient(180deg, rgba(63, 227, 160, .2), rgba(var(--kopf-rgb), .96)); box-shadow: inset 0 -2px 0 #3fe3a0; }
.dash-tagkopf.zukunft { opacity: .5; }
.dash-tagzahl { font-size: 12px; font-weight: 700; color: #3fe3a0; font-variant-numeric: tabular-nums; }
.dash-tagbalken { width: 70%; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.dash-tagbalken i { display: block; height: 100%; width: var(--anteil, 0%); border-radius: inherit; background: linear-gradient(90deg, #3fe3a0, #9ff5cf);
  box-shadow: 0 0 8px #3fe3a0; animation: dashBalkenEin 1.2s cubic-bezier(.3, .9, .3, 1) .4s backwards; }
@keyframes dashBalkenEin { from { width: 0; } }
.dash-person2, .dash-zelle {
  padding: 8px 10px; border-bottom: 1px solid rgba(var(--gold-rgb), .08);
  animation: tblRein .45s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms);
}
.dash-person2 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-reihe:hover > div { background: rgba(63, 227, 160, .05); }
.dash-zelle { display: grid; place-items: center; }
.dash-zelle.heute { background: rgba(63, 227, 160, .05); }
.dash-wochenzahl { font-size: 11px; color: rgba(var(--hell-rgb), .55); }
.dash-wochenzahl b { color: #fff; }
.dash-wochenzahl em { font-style: normal; color: #3fe3a0; }
.dash-feld {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 15px; font-weight: 800;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s;
}
.dash-feld.da {
  color: #04140c; background: linear-gradient(150deg, #9ff5cf, #3fe3a0); box-shadow: 0 0 14px -3px #3fe3a0;
  animation: dashDaEin .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--d, 0ms) + 200ms);
}
.dash-zelle.heute .dash-feld.da { animation: dashDaEin .5s cubic-bezier(.2, 1.6, .4, 1) both, dashDaPuls 2.4s ease-in-out 1s infinite; }
@keyframes dashDaEin { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
@keyframes dashDaPuls { 0%, 100% { box-shadow: 0 0 10px -3px #3fe3a0; } 50% { box-shadow: 0 0 22px 0 #3fe3a0; } }
.dash-feld.weg { color: rgba(255, 107, 129, .55); border: 1px dashed rgba(255, 107, 129, .3); background: rgba(255, 107, 129, .04); }
.dash-feld.offen { color: #e0a34a; border: 1px dashed rgba(224, 163, 74, .6); animation: dashOffen 1.8s ease-in-out infinite; }
@keyframes dashOffen { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 163, 74, .35); } 50% { box-shadow: 0 0 0 5px transparent; } }
.dash-feld.zukunft { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.dash-feld:hover { transform: scale(1.18); }
.dash-legende .dash-feld { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; margin-right: 4px; animation: none; }

@media (max-width: 900px) {
  .dash-uebersicht { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sy-uebersicht .sy-saeule, .sy-anwesenheit .sy-kalenderhaken, .sy-nutzer .sy-zweiter, .sy-protokoll .sy-zeile,
  .dash-emblem *, .dash-kachel, .dash-kachel::after, .dash-kachelglanz, .dash-kachel-oben > span, .dash-heute, .dash-zuletzt,
  .dash-ringwert, .dash-koepfe li, .dash-zuletztliste li, .dash-tagbalken i, .dash-person2, .dash-zelle, .dash-feld { animation: none !important; }
  .sy-anwesenheit .sy-kalenderhaken, .sy-protokoll .sy-zeile { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Terminkalender — noch lebendiger: Zeigeruhr, Schriftzug im Verlauf,
   umlaufende Ränder, Karten mit Tiefe
   ═══════════════════════════════════════════════════════════════════ */
body.luxus.edel .tm-held .tm-heldtext h1 {
  background: linear-gradient(95deg, #fff, var(--gold-hell, #f0dca8) 25%, #fff 45%, color-mix(in srgb, var(--zweit, #3ee0ff) 70%, #fff) 70%, #fff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vwSchrift 8s linear infinite;
}
.tm-uhrblock { align-items: center; }
/* Die Zeigeruhr */
.tm-analog {
  position: relative; flex: none; width: 86px; height: 86px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35), 0 0 30px -8px rgba(var(--gold-rgb), .7);
  animation: tmUhrEin .8s cubic-bezier(.2, 1.4, .4, 1) .2s backwards;
}
@keyframes tmUhrEin { from { opacity: 0; transform: scale(.4) rotate(-90deg); } }
.tm-analog::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), var(--gold), transparent 30%, var(--zweit, #3ee0ff) 55%, transparent 80%, var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 6s linear infinite;
}
.tm-analog svg { width: 100%; height: 100%; display: block; }
.tm-zifferblatt { fill: rgba(var(--flaeche-rgb), .9); stroke: rgba(var(--gold-rgb), .3); stroke-width: 1; }
.tm-striche path { stroke: rgba(var(--gold-rgb), .7); stroke-width: 2; stroke-linecap: round; }
.tm-zeiger { stroke-linecap: round; transform-box: view-box; transform-origin: 50px 50px; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: vwDrehen; }
.tm-zeiger.std { stroke: #fff; stroke-width: 4; animation-duration: 43200s; animation-delay: var(--std); }
.tm-zeiger.min { stroke: var(--gold-hell, #f0dca8); stroke-width: 3; animation-duration: 3600s; animation-delay: var(--min); }
.tm-zeiger.sek { stroke: #e0475f; stroke-width: 1.5; animation-duration: 60s; animation-delay: var(--sek); filter: drop-shadow(0 0 3px #e0475f); }
.tm-mitte { fill: #e0475f; stroke: #fff; stroke-width: 1; }

/* Die Zahlen nach Status: sanftes Leuchten */
.tm-zahl { transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s; }
.tm-zahl:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 22px -12px var(--c); }
.tm-zahl i { display: inline-block; animation: rwWippen 3.2s ease-in-out infinite; animation-delay: var(--d, 0ms); }

/* Als Nächstes: umlaufender Rand beim Überfahren, Glanz */
.tm-baldkarte { isolation: isolate; }
.tm-baldkarte::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; z-index: 2;
  background: conic-gradient(from var(--kopf-winkel), var(--c), transparent 30%, color-mix(in srgb, var(--c) 50%, #fff) 50%, transparent 75%, var(--c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 4s linear infinite; transition: opacity .3s;
}
.tm-baldkarte:hover::after, .tm-baldkarte.bald::after, .tm-baldkarte.jetzt::after { opacity: 1; }

/* Die Tageskarten: Tiefe beim Überfahren, heute mit umlaufendem Rand */
.tm-tage { perspective: 1200px; }
.tm-tag { transform-style: preserve-3d; }
.tm-tag:hover { transform: translateY(-5px) rotateX(3deg); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .95), 0 0 30px -18px rgba(var(--gold-rgb), .8); }
.tm-tag.ist-heute { isolation: isolate; }
.tm-tag.ist-heute::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), var(--gold), transparent 25%, var(--zweit, #3ee0ff) 50%, transparent 75%, var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 5s linear infinite;
}
.term-tagzahl { transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.tm-tag:hover .term-tagzahl { transform: scale(1.25); color: #fff; background: rgba(var(--gold-rgb), .35); }
.term-eintrag { transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), background .2s, border-color .2s, box-shadow .3s; }
.term-eintrag:hover { transform: translateX(5px) scale(1.02); box-shadow: 0 10px 20px -14px var(--c, var(--gold)); }
.term-eintrag::before { transition: box-shadow .3s, width .3s; }
.term-eintrag:hover::before { width: 4px; box-shadow: 0 0 10px var(--c, var(--gold)); }
.term-tagplus { transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), background .25s; }
.term-tagplus:hover { transform: scale(1.04); }

/* Die Liste: einfahren, Statusstreifen, der leuchtet */
.tm-liste .termin {
  position: relative; overflow: hidden;
  animation: tmRein .5s cubic-bezier(.2, .8, .2, 1) backwards;
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), border-color .2s, box-shadow .3s;
}
.tm-liste .termin:nth-child(2) { animation-delay: .04s; } .tm-liste .termin:nth-child(3) { animation-delay: .08s; }
.tm-liste .termin:nth-child(4) { animation-delay: .12s; } .tm-liste .termin:nth-child(5) { animation-delay: .16s; }
.tm-liste .termin:nth-child(n+6) { animation-delay: .2s; }
.tm-liste .termin::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--gold));
  box-shadow: 0 0 12px var(--c, var(--gold)); opacity: .8;
}
.tm-liste .termin:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--c, #888) 50%, transparent); box-shadow: 0 14px 28px -20px var(--c, var(--gold)); }

/* Das Raster: Termine ploppen herein */
.kal-termin { animation: tmTerminPlopp .5s cubic-bezier(.2, 1.5, .4, 1) backwards; }
@keyframes tmTerminPlopp { from { opacity: 0; transform: scale(.8) translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .tm-analog, .tm-analog::before, .tm-zeiger, .tm-zahl i, .tm-baldkarte::after, .tm-tag.ist-heute::after, .tm-liste .termin, .kal-termin,
  body.luxus.edel .tm-held .tm-heldtext h1 { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Akten — noch lebendiger: Mappe mit Blättern, Schriftzug im Verlauf,
   federnde Kategorien, Karten mit Glanz und Tiefe
   ═══════════════════════════════════════════════════════════════════ */
body.luxus.edel .akt-kopf h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  background: linear-gradient(95deg, #fff, color-mix(in srgb, var(--c) 70%, #fff) 30%, #fff 50%, #8ff0ff 75%, #fff) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vwSchrift 8s linear infinite;
}
/* Die Mappe */
.akt-emblem { flex: none; width: 170px; margin-left: auto; margin-right: 8px; animation: aktMappeEin .8s cubic-bezier(.2, 1.4, .4, 1) .15s backwards; }
@keyframes aktMappeEin { from { opacity: 0; transform: translateY(16px) scale(.85); } }
.akt-emblem svg { width: 100%; height: auto; display: block; overflow: visible; }
.akt-boden { fill: color-mix(in srgb, var(--c) 30%, transparent); filter: blur(4px); animation: aktBoden 4s ease-in-out infinite; }
@keyframes aktBoden { 0%, 100% { transform: scaleX(1); opacity: .7; } 50% { transform: scaleX(.85); opacity: .4; } }
.akt-boden { transform-box: fill-box; transform-origin: center; }
.akt-mappe { stroke: url(#aktVerlauf); stroke-width: 2; stroke-linejoin: round; }
.akt-mappe.hinten { fill: rgba(var(--flaeche-rgb), .9); }
.akt-mappe.vorn { fill: color-mix(in srgb, var(--c) 18%, rgb(var(--flaeche-rgb))); filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, .5)); }
.akt-blatt rect { fill: #f4efe4; stroke: rgba(0, 0, 0, .15); }
.akt-blatt path { stroke: rgba(40, 30, 20, .45); stroke-width: 3; stroke-linecap: round; }
.akt-blatt { transform-box: fill-box; transform-origin: 50% 100%; animation: aktBlatt 4.2s cubic-bezier(.45, 0, .3, 1) infinite; }
.akt-blatt.b1 { --dreh: -9deg; animation-delay: 0s; }
.akt-blatt.b2 { --dreh: 2deg; animation-delay: .35s; }
.akt-blatt.b3 { --dreh: 10deg; animation-delay: .7s; }
@keyframes aktBlatt {
  0%, 100% { transform: translateY(12px) rotate(0); }
  35%, 60% { transform: translateY(-10px) rotate(var(--dreh)); }
}
.akt-funkel { fill: #fff; filter: drop-shadow(0 0 4px var(--c)); animation: aktFunkel 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.akt-funkel.f2 { animation-delay: .8s; }
.akt-funkel.f3 { animation-delay: 1.6s; }
@keyframes aktFunkel { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }

/* Die Zahlen */
.akt-zahl { transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.akt-zahl:hover { transform: translateY(-3px) scale(1.05); }

/* Kategorien: federn, die gewählte mit umlaufendem Rand */
.akt-kachel { position: relative; isolation: isolate; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), border-color .2s, box-shadow .3s, background .2s; }
.akt-kachel:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px var(--c); }
.akt-kachel-ico { display: inline-block; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.akt-kachel:hover .akt-kachel-ico { transform: rotate(-12deg) scale(1.25); }
.akt-kachel.an::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--kopf-winkel), var(--c), transparent 30%, color-mix(in srgb, var(--c) 50%, #fff) 50%, transparent 75%, var(--c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 4s linear infinite;
}
.akt-kachel.federt { animation: aktFedern .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes aktFedern { 0% { transform: scale(1); } 30% { transform: scale(.9); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Gruppen: über den Strich läuft ein Licht, das Zeichen wippt */
.akt-gruppe-linie { position: relative; overflow: visible; }
.akt-gruppe-linie::after {
  content: ''; position: absolute; top: -2px; left: 0; width: 46px; height: 5px; border-radius: 5px;
  background: radial-gradient(closest-side, var(--c), transparent); filter: blur(.5px);
  animation: aktLicht 3.6s ease-in-out infinite;
}
@keyframes aktLicht { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 46px); opacity: 0; } }
.akt-gruppe-ico { display: inline-block; animation: rwWippen 3.4s ease-in-out infinite; }

/* Karten: Glanz beim Überfahren, Tiefe, Dateizeichen schweben */
.akt-raster { perspective: 1200px; }
.akt-karte { isolation: isolate; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), border-color .25s, box-shadow .35s; }
.akt-karte::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
  opacity: 0; transition: opacity .3s;
}
.akt-karte:hover::after { opacity: 1; animation: erfGlanz 1.2s ease-out; }
.akt-karte:hover { box-shadow: 0 22px 40px -22px var(--t, var(--c)), 0 0 0 1px color-mix(in srgb, var(--t, var(--c)) 45%, transparent); }
.akt-zeichen { animation: aktSchweben 4s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 2); }
@keyframes aktSchweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.akt-neu { animation: aktNeu 1.8s ease-in-out infinite; }
@keyframes aktNeu { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t, #3fe3a0) 60%, transparent); } 50% { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--t, #3fe3a0) 60%, transparent); } }
.akt-karte.welle { animation: aktWelle .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: var(--d, 0ms); }
@keyframes aktWelle { from { opacity: 0; transform: translateY(22px) rotateX(18deg) scale(.94); filter: blur(4px); } }

@media (max-width: 700px) {
  .akt-emblem { width: 120px; margin-left: 0; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .akt-emblem, .akt-emblem *, .akt-kachel.an::after, .akt-kachel.federt, .akt-gruppe-linie::after, .akt-gruppe-ico, .akt-zeichen, .akt-neu,
  .akt-karte.welle, .akt-karte:hover::after, body.luxus.edel .akt-kopf h1 { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Umbau Oktober 2026
     Kopf         ein bewegter Hintergrund in den Farben des Bereichs:
                  wandernde Schleier, ein durchziehendes Raster, ein
                  Lichtstreif
     Verwaltung   das Zeichen der Rubrik Sanktionen
     Akten        kleinere Karten mit mehr Bewegung, Band je Kategorie,
                  Liste statt Kacheln, Kategorien zum Einklappen
   ═══════════════════════════════════════════════════════════════════ */
/* ── Kopf ──────────────────────────────────────────────────────── */
.kopfwelt { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.kopfwelt i { position: absolute; display: block; }
.kw-schleier { top: -80%; width: 46%; height: 260%; border-radius: 50%; filter: blur(38px); opacity: .55; }
.kw-schleier.s1 {
  left: -14%; background: radial-gradient(closest-side, rgba(var(--gold-rgb), .5), transparent);
  animation: kwWandernA 17s ease-in-out infinite alternate;
}
.kw-schleier.s2 {
  right: -14%; background: radial-gradient(closest-side, rgba(var(--zweit-rgb, var(--gold-rgb)), .45), transparent);
  animation: kwWandernB 21s ease-in-out infinite alternate;
}
.kw-schleier.s3 {
  left: 30%; width: 36%; opacity: .35; background: radial-gradient(closest-side, rgba(var(--blut-rgb, var(--gold-rgb)), .4), transparent);
  animation: kwWandernC 25s ease-in-out infinite alternate;
}
@keyframes kwWandernA { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(70%, 6%, 0) scale(1.25); } 100% { transform: translate3d(140%, -4%, 0) scale(.95); } }
@keyframes kwWandernB { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-60%, -6%, 0) scale(.9); } 100% { transform: translate3d(-130%, 4%, 0) scale(1.2); } }
@keyframes kwWandernC { 0% { transform: translate3d(-60%, 0, 0) scale(.9); } 100% { transform: translate3d(80%, 0, 0) scale(1.15); } }
.kw-raster {
  left: 0; right: 0; top: -36px; bottom: 0;
  background-image:
    linear-gradient(rgba(var(--gold-rgb), .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gold-rgb), .07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
  animation: kwRaster 9s linear infinite;
}
@keyframes kwRaster { to { transform: translateY(36px); } }
.kw-glanz {
  top: 0; bottom: 0; left: -40%; width: 26%; transform: skewX(-22deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .06) 40%, rgba(var(--zweit-rgb, var(--gold-rgb)), .14) 55%, transparent);
  animation: kwGlanz 8s ease-in-out infinite;
}
@keyframes kwGlanz { 0% { left: -40%; } 45%, 100% { left: 130%; } }
.kw-funken i { width: 3px; height: 3px; border-radius: 50%; background: rgba(var(--gold-rgb), .9); box-shadow: 0 0 8px rgba(var(--gold-rgb), .9);
  animation: kwFunke var(--t, 9s) linear infinite; animation-delay: var(--v, 0s); left: var(--x, 50%); bottom: -6px; }
.kw-funken { position: absolute; inset: 0; }
@keyframes kwFunke { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-160px); opacity: 0; } }

/* ── Verwaltung: Sanktionen ────────────────────────────────────── */
.sy-sanktionen .sy-hammer { transform-origin: 100% 100%; animation: syHammer 2.2s cubic-bezier(.5, 0, .2, 1.3) infinite; }
.sy-sanktionen .sy-schlag { opacity: 0; animation: syAufschlag 2.2s ease-out infinite; }
@keyframes syHammer { 0%, 100% { transform: rotate(0); } 38% { transform: rotate(-30deg); } 52% { transform: rotate(5deg); } 62% { transform: rotate(0); } }
@keyframes syAufschlag { 0%, 50% { opacity: 0; } 55% { opacity: 1; } 78%, 100% { opacity: 0; } }

/* ── Akten: Kategorien kompakter ───────────────────────────────── */
.akt-kacheln .akt-kachel { padding: 7px 12px; gap: 7px; border-radius: 12px; font-size: 12.5px; }
.akt-kacheln .akt-kachel .akt-kachel-zahl { font-size: 10.5px; padding: 1px 7px; }
.akt-kacheln .akt-kachel { animation: aktKachelEin .5s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0ms) backwards; }
@keyframes aktKachelEin { from { opacity: 0; transform: translateY(10px) scale(.85); } }

/* Das Band je Kategorie */
.akt-band { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.akt-bandtitel { flex: none; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hell-rgb), .45); }
.akt-bandleiste { flex: 1; min-width: 0; display: flex; gap: 3px; height: 26px; }
.akt-bandteil {
  position: relative; overflow: hidden; min-width: 38px; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; color: #0b0614;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c));
  box-shadow: 0 0 14px -4px var(--c); transform-origin: 0 50%;
  animation: aktBandEin .9s cubic-bezier(.2, 1.1, .4, 1) var(--d, 0ms) backwards;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), filter .25s;
}
.akt-bandteil span { position: relative; z-index: 1; white-space: nowrap; }
.akt-bandteil::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%) 150% 0 / 250% 100% no-repeat;
  animation: erfGlanz 4.5s ease-in-out infinite; animation-delay: var(--d, 0ms);
}
.akt-bandteil:hover { transform: translateY(-2px) scaleY(1.18); filter: brightness(1.15); }
@keyframes aktBandEin { from { transform: scaleX(0); opacity: 0; } }

/* Ansicht und Einklappen */
.akt-ansichtknopf {
  border: 0; background: transparent; cursor: pointer; padding: 8px 12px; border-radius: 9px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: rgba(var(--hell-rgb), .55);
  transition: background .18s, color .18s, box-shadow .18s, transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.akt-ansichtknopf:hover { color: rgb(var(--hell-rgb)); transform: translateY(-1px); }
.akt-ansichtknopf.an { color: #fff; background: rgba(var(--gold-rgb), .22); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); }
.akt-allezu { border: 1px solid rgba(var(--gold-rgb), .16); background: rgba(0, 0, 0, .28); border-radius: 12px; padding: 10px 14px; }
.akt-gruppe-kopf { cursor: pointer; user-select: none; }
.akt-gruppe-kopf:hover .akt-gruppe-name { color: #fff; }
.akt-gruppe-auf {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font: inherit; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent);
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), background .25s;
}
.akt-gruppe-kopf:hover .akt-gruppe-auf { background: color-mix(in srgb, var(--c) 25%, transparent); }
.akt-gruppe.zu .akt-gruppe-auf { transform: rotate(-90deg); }
.akt-klappe { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1); }
.akt-klappe > .akt-raster { min-height: 0; overflow: hidden; padding: 8px 6px 12px; margin: -8px -6px 0; }
.akt-gruppe.zu .akt-klappe { grid-template-rows: 0fr; }
.akt-klappe > .akt-raster { transition: padding .5s cubic-bezier(.2, .8, .2, 1); }
.akt-gruppe.zu .akt-klappe > .akt-raster { padding-top: 0; padding-bottom: 0; }
.akt-gruppen.sucht .akt-gruppe.zu .akt-klappe > .akt-raster { padding-top: 8px; padding-bottom: 12px; }
.akt-gruppen.sucht .akt-gruppe.zu .akt-klappe { grid-template-rows: 1fr; }
.akt-gruppe.zu .akt-gruppe-zahl { background: color-mix(in srgb, var(--c) 30%, transparent); color: #fff; }

/* Kleinere Karten, mehr Bewegung */
.akt-raster { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.akt-karte { border-radius: 13px; }
.akt-gruppen .akt-karte:not(.rein):not(.welle) { animation: aktWelle .65s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: var(--d, 0ms); }
.akt-vorschau { height: 84px; }
.akt-zeichen { font-size: 32px; }
.akt-art { left: 8px; bottom: 8px; padding: 3px 6px; font-size: 9px; }
.akt-neu { left: 8px; top: 8px; padding: 2px 7px; font-size: 9px; }
.akt-inhalt { gap: 3px; padding: 9px 11px 11px; }
.akt-unter { font-size: 9.5px; }
.akt-titel { font-size: 13px; line-height: 1.3; }
.akt-bemerkung { font-size: 11.5px; -webkit-line-clamp: 1; }
.akt-meta { font-size: 10px; margin-top: 2px; }
.akt-personen { padding: 0 11px 10px; }
.akt-personen .chip { font-size: 11px; padding: 2px 8px; }
.akt-knoepfe { top: 6px; right: 6px; }
/* Leuchtrand beim Überfahren */
.akt-karte::before {
  content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--kopf-winkel), var(--t, var(--c)), transparent 30%, color-mix(in srgb, var(--t, var(--c)) 50%, #fff) 50%, transparent 75%, var(--t, var(--c)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kopfWinkel 3.5s linear infinite; transition: opacity .3s;
}
.akt-karte:hover::before, .akt-karte:focus-within::before { opacity: 1; }
.akt-karte:hover .akt-art { transform: translateX(3px); box-shadow: 0 0 12px var(--t); }
.akt-art { transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s; }
/* Jede Dateiart bewegt sich anders */
.akt-karte[data-art="pdf"] .akt-zeichen { animation: aktSchweben 4s ease-in-out infinite, aktBlaettern 5s ease-in-out infinite; }
.akt-karte:is([data-art="doc"], [data-art="docx"], [data-art="odt"], [data-art="rtf"]) .akt-zeichen { animation: aktSchweben 4s ease-in-out infinite, aktWackeln 3.4s ease-in-out infinite; }
.akt-karte:is([data-art="xls"], [data-art="xlsx"], [data-art="ods"], [data-art="csv"]) .akt-zeichen { animation: aktSchweben 4s ease-in-out infinite, aktPochen 2.6s ease-in-out infinite; }
.akt-karte[data-art="txt"] .akt-zeichen { animation: aktSchweben 4s ease-in-out infinite, aktWackeln 4.2s ease-in-out infinite reverse; }
.akt-karte .akt-zeichen { animation-delay: calc(var(--d, 0ms) * 2), calc(var(--d, 0ms) * 3); }
@keyframes aktBlaettern { 0%, 72%, 100% { transform: perspective(200px) rotateY(0); } 82% { transform: perspective(200px) rotateY(-180deg); } 92% { transform: perspective(200px) rotateY(-360deg); } }
@keyframes aktWackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } }
@keyframes aktPochen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.akt-vorschau.ist-bild::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
  animation: erfGlanz 5s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 3);
}

/* Die Liste: eine Zeile je Unterlage */
.akt-gruppen.liste .akt-raster { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.akt-gruppen.liste .akt-karte { flex-direction: row; border-radius: 12px; }
.akt-gruppen.liste .akt-karte.fx-kachel { transform: none !important; }
.akt-gruppen.liste .akt-karte-link { flex-direction: row; align-items: center; min-width: 0; }
.akt-gruppen.liste .akt-vorschau { flex: none; width: 58px; height: 52px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .05); }
.akt-gruppen.liste .akt-zeichen { font-size: 24px; }
.akt-gruppen.liste :is(.akt-art, .akt-neu, .akt-personen) { display: none; }
.akt-gruppen.liste .akt-inhalt { flex: 1; min-width: 0; flex-direction: row; align-items: center; gap: 14px; padding: 8px 14px; }
.akt-gruppen.liste .akt-unter { flex: none; align-self: center; }
.akt-gruppen.liste .akt-titel { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.akt-gruppen.liste .akt-bemerkung { flex: 0 1 28%; min-width: 0; -webkit-line-clamp: 1; }
.akt-gruppen.liste .akt-meta { flex: none; margin: 0; }
.akt-gruppen.liste .akt-knoepfe { top: 50%; transform: translateY(-50%); }
.akt-gruppen.liste .akt-karte:hover .akt-knoepfe { transform: translateY(-50%); }
.akt-gruppen.liste .akt-karte:hover { transform: translateX(4px); }

@media (max-width: 700px) {
  .akt-band { flex-direction: column; align-items: stretch; gap: 6px; }
  .akt-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .akt-gruppen.liste .akt-inhalt { flex-wrap: wrap; gap: 4px 10px; }
  .akt-gruppen.liste .akt-bemerkung { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kopfwelt i, .kw-funken i, .sy-sanktionen .sy-hammer, .sy-sanktionen .sy-schlag, .akt-kacheln .akt-kachel, .akt-bandteil, .akt-bandteil::after,
  .akt-gruppen .akt-karte, .akt-karte::before, .akt-karte .akt-zeichen, .akt-vorschau.ist-bild::after { animation: none !important; }
  .akt-klappe { transition: none; }
}

/* Die Reiter der Datenbank — seit die Akten dazugehören sieben — in einer
   Reihe: Zeichen, Name und Zahl übereinander, lange Namen trennen sich */
@media (min-width: 761px) {
  body.edel .tablist { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  body.edel .tablist .tab {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "name" "zahl";
    justify-items: center; text-align: center; gap: 5px 0; padding: 10px 6px;
  }
  body.edel .tablist .tab > span:not(.ico):not(.cnt) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  body.edel .tablist .tab .cnt { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — Schwarz und Schwarzlicht, düster
   Fast völlige Dunkelheit. Nur gedämpftes UV-Violett glimmt, wie unter
   einer Schwarzlichtröhre in einem sonst lichtlosen Raum: Flächen
   schwarz, die Schrift ein kühles, gedecktes Grau-Lila, das Leuchten
   sparsam und tief. Rot bleibt allein der Gefahr.
   ═══════════════════════════════════════════════════════════════════ */
.luxus.welt-codebreaker {
  --gold-rgb:      138,  77, 255;   /* UV-Violett — die Leitfarbe */
  --zweit-rgb:     177,  60, 224;   /* dunkles UV-Magenta — der zweite Ton */
  --blut-rgb:      208,  33,  95;   /* nur für Gefahr */
  --hell-rgb:      214, 208, 228;
  --flaeche-rgb:     8,   6,  12;
  --kopf-rgb:        3,   2,   6;
  --gold-tief-rgb:  61,  26, 138;

  --gold:       #8a4dff;
  --gold-hell:  #c4adff;
  --gold-tief:  #3d1a8a;
  --zweit:      #b13ce0;
  --blut:       #d0215f;
  --champagner: #e4dff0;
  --nacht:      #020103;
  --nacht-warm: #05030a;
  --line:       rgba(138, 77, 255, .14);
  --knopf-verlauf: linear-gradient(180deg, #120b20, #060409);
  --knopf-schrift: #c4adff;
}

/* Knöpfe: schwarz, ein violetter Rand, der leise glimmt */
body.luxus.edel.welt-codebreaker .btn-primary,
body.luxus.edel.welt-codebreaker .chat-senden {
  border-color: rgba(var(--gold-rgb), .55); text-shadow: 0 0 10px rgba(var(--gold-rgb), .45);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .12) inset, 0 8px 24px -16px rgba(var(--gold-rgb), .8);
}
body.luxus.edel.welt-codebreaker .btn-primary:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .25) inset, 0 0 26px -6px rgba(var(--gold-rgb), .7);
}
body.luxus.edel.welt-codebreaker .btn-primary::after { background: linear-gradient(100deg, transparent, rgba(var(--gold-rgb), .2), transparent); }

/* Panels: schwarz, nur eine feine violette Kante */
body.luxus.edel.welt-codebreaker .panel {
  background: rgba(var(--flaeche-rgb), .9);
  border-color: rgba(var(--gold-rgb), .1);
}
body.luxus.edel.welt-codebreaker .panel:hover { border-color: rgba(var(--gold-rgb), .24); }
body.luxus.edel.welt-codebreaker .panel::after { opacity: .5; }

/* Überschriften: kaltes Weiß, das ins Violette verläuft */
body.luxus.edel.welt-codebreaker h1,
body.luxus.edel.welt-codebreaker .vw-held h1,
body.luxus.edel.welt-codebreaker .tm-held .tm-heldtext h1,
body.luxus.edel.welt-codebreaker .akt-kopf h1 {
  background: linear-gradient(95deg, #eeeaf6, #cbbdf0 30%, #9f7cff 50%, #cbbdf0 70%, #eeeaf6) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
body.luxus.edel.welt-codebreaker .start-gruss { text-shadow: 0 0 22px rgba(var(--gold-rgb), .3) !important; }

/* Der Kopf der Startseite: Streifen und Radar im Schwarzlicht statt Cyan */
body.luxus.edel.welt-codebreaker .v3-held > .stripe {
  background-image: linear-gradient(90deg, transparent, var(--gold), var(--zweit), transparent, var(--gold), transparent) !important;
}
body.luxus.edel.welt-codebreaker .v3-held > .fade::before {
  background:
    conic-gradient(from 0deg, rgba(var(--gold-rgb), .18), rgba(var(--zweit-rgb), .05) 60deg, transparent 100deg),
    repeating-radial-gradient(circle, transparent 0 34px, rgba(var(--gold-rgb), .12) 34px 35px);
}

/* Kopf: tiefschwarz, das Farbspiel nur ein Glimmen */
body.luxus.edel.welt-codebreaker header {
  background: rgba(var(--kopf-rgb), .92);
  border-image: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .45), rgba(var(--zweit-rgb), .3), transparent) 1;
  box-shadow: 0 10px 40px -24px rgba(0, 0, 0, 1), 0 0 30px -18px rgba(var(--gold-rgb), .5);
}
body.welt-codebreaker header::before { opacity: .4; }
body.welt-codebreaker .kw-schleier { opacity: .22; }
body.welt-codebreaker .kw-schleier.s3 { opacity: .1; }
body.welt-codebreaker .kw-raster { opacity: .4; }
body.welt-codebreaker .kw-glanz { opacity: .5; }
body.welt-codebreaker .kw-funken { opacity: .5; }

/* Hintergrund: fast völlige Dunkelheit, darin glimmt UV-Violett */
.cb-hg { background: #010102; }
.cb-dunst {
  background:
    radial-gradient(52% 30% at 50% 60%, rgba(22, 16, 36, .5), transparent 72%),
    radial-gradient(36% 26% at 44% 68%, rgba(70, 26, 140, .16), transparent 70%),
    radial-gradient(30% 22% at 66% 40%, rgba(90, 20, 120, .12), transparent 70%);
}
.cb-rauch { background: radial-gradient(closest-side, rgba(110, 50, 230, .2), rgba(70, 20, 150, .07) 48%, transparent 80%); }
.cb-faeden { opacity: .4; }
.cb-faeden path { stroke: #8a4dff; }
.cb-faeden .cb-schwaden path { stroke: rgba(100, 44, 210, .24); }
.cb-faeden .cb-schwaden path.dick { stroke: rgba(80, 30, 170, .22); }
/* Raster und Glut flackern über die Deckkraft — gedämpft wird über die Helligkeit */
.cb-raster { filter: brightness(.45) hue-rotate(20deg); }
.cb-raster.rot { background-image: radial-gradient(circle, rgba(170, 90, 255, .5) 0 .75px, transparent 1.2px); filter: brightness(.4); }
.cb-baender { opacity: .6; }
.cb-striche i { filter: brightness(.6); }
.cb-striche i:nth-child(5n) { background: repeating-linear-gradient(90deg, rgba(160, 80, 255, .6) 0 2px, transparent 2px 3.5px); }
.cb-zeichen b { color: rgba(190, 170, 235, .38); text-shadow: 0 0 6px rgba(138, 77, 255, .4); }
.cb-glut i { background: #a46bff; filter: brightness(.65); box-shadow: 0 0 8px 2px rgba(138, 77, 255, .65), 0 0 20px 4px rgba(90, 30, 200, .4); }
.cb-punkte { filter: brightness(.5); }
.cb-vignette { background: radial-gradient(ellipse 66% 62% at 50% 52%, transparent 18%, rgba(0, 0, 0, .74) 56%, rgba(0, 0, 0, .99) 100%); }
/* Hinweise ohne Inhalt („Noch nichts angeheftet …"): gedämpftes Grau-Lila statt Beige */
body.luxus.welt-codebreaker .empty p { color: rgba(var(--hell-rgb), .5); }

/* ═══════════════════════════════════════════════════════════════════
   Anmeldung — zweigeteilt (login.php)
   Links KennsteLars: die Twitch-Seite in ihrem eigenen Stil — tiefes
   Violett, Gelb in Gotham Ultra, das Logo als Wasserzeichen. Rechts
   GTA RP: Codebreaker und Toter Briefkasten wie bisher. Dazwischen eine
   Naht, die vom Gelb ins Schwarzlicht verläuft. Auf dem Handy untereinander.
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Gotham Ultra';
  src: url('twitch/schrift/gotham-ultra.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
.login-geteilt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 100vh; min-height: 100svh; }
.login-seite { position: relative; display: grid; place-items: center; min-width: 0; padding: 48px 28px; overflow: hidden; }
.login-gta { z-index: 1; }
.login-gta::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(251, 193, 2, .7) 30%, rgba(138, 77, 255, .8) 70%, transparent);
  box-shadow: 0 0 18px 1px rgba(138, 77, 255, .45);
}
.login-marke {
  display: inline-block; margin-bottom: 18px; padding: 6px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
}
.login-marke-gta { color: #c4adff; border: 1px solid rgba(138, 77, 255, .55); background: rgba(138, 77, 255, .1); box-shadow: 0 0 22px -8px rgba(138, 77, 255, .9); }
.login-marke-kl {
  font-family: 'Gotham Ultra', 'Arial Black', sans-serif; font-weight: 900; letter-spacing: .14em;
  color: #fbc102; border: 1px solid rgba(251, 193, 2, .55); background: rgba(251, 193, 2, .08);
}

/* KennsteLars */
.login-kl {
  text-decoration: none; color: #fff; text-align: center;
  background: linear-gradient(158deg, #17052b 0%, #1c0a32 46%, #240e3d 100%);
}
.login-kl::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 40%, rgba(251, 193, 2, .1), transparent 70%);
  opacity: .5; transition: opacity .6s;
}
.login-kl:hover::after, .login-kl:focus-visible::after { opacity: 1; }
.login-kl:focus-visible { outline: 3px solid #fbc102; outline-offset: -6px; }
/* Die Codebreaker-Schrift (Frontage, mit !important für alles) gilt hier nicht —
   KennsteLars spricht in Gotham Ultra und einer klaren Textschrift */
body.welt-codebreaker .login-kl,
body.welt-codebreaker .login-kl * {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
}
body.welt-codebreaker .login-kl :is(.login-kl-titel, .login-marke-kl) {
  font-family: 'Gotham Ultra', 'Arial Black', sans-serif !important;
}
.login-kl-hg { position: absolute; inset: 0; pointer-events: none; }
.login-kl-hg img {
  position: absolute; top: 4%; left: -20%; width: 150%; max-width: none; height: auto;
  opacity: .07; filter: grayscale(1) brightness(1.5); transform: rotate(-8deg);
  animation: loginWasser 30s ease-in-out infinite alternate;
}
@keyframes loginWasser { to { transform: rotate(-5deg) translate(-3%, 4%) scale(1.04); } }
.login-kl-inhalt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(520px, 100%); }
.login-kl-logo {
  width: min(430px, 100%); height: auto; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .5));
  animation: loginLogo 1s cubic-bezier(.2, .8, .2, 1) both, loginSchweben 7s ease-in-out 1s infinite;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
@keyframes loginLogo { from { opacity: 0; transform: translateY(-20px) scale(.92) rotate(-3deg); } }
@keyframes loginSchweben { 50% { transform: translateY(-7px) rotate(-.6deg); } }
.login-kl-rahmen { position: relative; display: block; width: 100%; margin-top: 26px; padding: 18px 0; }
.login-kl-rahmen svg {
  position: absolute; top: 0; bottom: 0; left: 34%; right: -60%; width: auto; height: 100%;
  border: 1px solid rgba(251, 193, 2, .42); overflow: hidden;
}
.login-kl-rahmen svg g { fill: none; stroke: rgba(251, 193, 2, .2); animation: loginTreiben 24s ease-in-out infinite alternate; }
.login-kl-rahmen svg path { vector-effect: non-scaling-stroke; stroke-width: 1; }
@keyframes loginTreiben { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
.login-kl-titel {
  position: relative; display: block; font-family: 'Gotham Ultra', 'Arial Black', sans-serif; font-weight: 900;
  font-size: clamp(34px, 4.6vw, 62px); line-height: .92; text-transform: uppercase; color: #fbc102;
  text-shadow: 0 10px 34px rgba(0, 0, 0, .3);
}
.login-kl-satz { margin-top: 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.login-kl-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
  margin-top: 26px; min-width: 220px; padding: 14px 26px; border-radius: 14px;
  background: #fbc102; color: #1c0a32; font-size: 15px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 14px 34px -14px rgba(251, 193, 2, .9), inset 0 -2px 0 rgba(0, 0, 0, .12);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s, box-shadow .3s;
}
.login-kl-knopf::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
}
.login-kl:hover .login-kl-knopf { transform: translateY(-2px); background: #ffd84a; box-shadow: 0 20px 44px -16px rgba(251, 193, 2, 1); }
.login-kl:hover .login-kl-knopf::after { transform: translateX(120%); transition: transform .8s ease; }
.login-kl:hover .login-kl-logo { transform: scale(1.04) rotate(-1deg); }
.login-kl-knopf svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.login-kl:hover .login-kl-knopf svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .login-geteilt { grid-template-columns: minmax(0, 1fr); }
  .login-seite { padding: 40px 16px; }
  .login-kl { padding-top: 46px; padding-bottom: 46px; }
  .login-gta::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 193, 2, .7) 30%, rgba(138, 77, 255, .8) 70%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-kl-hg img, .login-kl-logo, .login-kl-rahmen svg g { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Vindicta — Verwarnung und Funktion (vindicta.php, vindicta.js)
     Warnzeichen  rechts neben dem Bluttropfen ein Dreieck: beim Zeigen
                  steigt Gelb halb, beim Verwarnen ganz — das Ausrufe-
                  zeichen wird dunkel, das Zeichen blinkt wie ein
                  Warnlicht, Funken schießen heraus
     Zeile        läuft von links gelb voll (ein Bloodout bleibt rot und
                  liegt darüber), die Nummer blinkt, am Namen „Verwarnung"
     Kopf         die Zahl der Verwarnten; „Nur Verwarnte" filtert
     Funktion     eine schlichte Auswahl neben dem Rang
   ═══════════════════════════════════════════════════════════════════ */
.vind-vw { width: 44px; min-width: 44px; background: #000 !important; }
.vind-funktion { width: 178px; min-width: 178px; }

/* Ein kleines Warnzeichen aus CSS — im Kopf, am Filter, in der Spalte */
.vd-warnzahl-zeichen {
  display: inline-block; flex: none; width: 12px; height: 11px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #fff3a3, #ffc400);
}

/* ── Das Warnzeichen ───────────────────────────────────────────── */
.vind-warn {
  position: relative; display: grid; place-items: center; height: 100%; min-height: 30px;
  padding: 3px 0; cursor: pointer;
}
.vind-warn input { position: absolute; opacity: 0; width: 0; height: 0; }
.vind-warn svg {
  width: 22px; height: 22px; overflow: visible;
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), filter .3s;
}
.vind-warn .huelle {
  fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .34); stroke-width: 1.4; stroke-linejoin: round;
  transition: stroke .3s, fill .3s;
}
.vind-warn .pegel { transform: translateY(26px); transition: transform .7s cubic-bezier(.3, .8, .25, 1); }
.vind-warn .fuellung { fill: url(#vindWarnVerlauf); animation: vindWelle 1.6s linear infinite; }
.vind-warn .ausruf { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2.2; stroke-linecap: round; transition: stroke .3s .2s; }
.vind-warn .punkt { fill: rgba(255, 255, 255, .45); transition: fill .3s .2s; }
.vind-warn:hover svg { transform: scale(1.2) rotate(6deg); }
.vind-warn:hover .huelle { stroke: #ffd21f; }
.vind-warn:hover .pegel { transform: translateY(14px); }
.vind-warn input:focus-visible ~ svg { outline: 2px solid #ffd21f; outline-offset: 3px; border-radius: 4px; }
.vind-warn input:checked ~ svg .pegel { transform: translateY(-3px); }
.vind-warn input:checked ~ svg .huelle { stroke: #fff1a0; fill: #3a2c00; }
.vind-warn input:checked ~ svg .ausruf { stroke: #2a1d00; }
.vind-warn input:checked ~ svg .punkt { fill: #2a1d00; }
.vind-warn input:checked ~ svg { animation: vindWarnlicht 1.8s ease-in-out infinite; }
@keyframes vindWarnlicht {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 200, 0, .5)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 210, 31, 1)) brightness(1.15); }
}
.vind-warn.laedt { pointer-events: none; }
/* Frisch verwarnt: das Zeichen schlägt herein, ein Ring geht auf */
.warn-frisch .vind-warn input:checked ~ svg {
  animation: vindWarnEin .7s cubic-bezier(.3, 1.5, .5, 1), vindWarnlicht 1.8s ease-in-out .7s infinite;
}
@keyframes vindWarnEin {
  0%   { transform: scale(.3) rotate(-30deg); }
  60%  { transform: scale(1.35) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.warn-frisch .vind-warn::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid #ffd21f; pointer-events: none;
  animation: vindRing .8s ease-out .2s backwards;
}
.vind-warnfunke {
  position: fixed; z-index: 80; width: 3px; height: 10px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, #fff6b8, #ffc400); box-shadow: 0 0 6px rgba(255, 200, 0, .9);
}

/* ── Die verwarnte Zeile: gelb, solange kein Bloodout darüberliegt ── */
body.luxus.edel .panel table.vind tr.vind-zeile.verwarnt:not(.bloodout),
table.vind tr.vind-zeile.verwarnt:not(.bloodout) {
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 230, 120, .16) 50%, transparent 62%) 150% 0 / 300% 100% no-repeat,
    linear-gradient(90deg, rgba(200, 150, 0, .45), rgba(150, 110, 0, .28) 55%, rgba(80, 60, 0, .2)) 0 0 / 100% 100% no-repeat,
    #0c0a02;
  animation: vindWarnGlanz 6s ease-in-out 1s infinite;
}
@keyframes vindWarnGlanz { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
table.vind tr.vind-zeile.verwarnt:not(.bloodout) > td { background: transparent !important; border-color: rgba(255, 214, 90, .85); }
table.vind tr.vind-zeile.verwarnt.warn-frisch:not(.bloodout) {
  animation: vindWarnZeileEin .9s cubic-bezier(.3, .7, .2, 1), vindWarnGlanz 6s ease-in-out 1s infinite;
}
@keyframes vindWarnZeileEin {
  from { background-size: 300% 100%, 0% 100%; }
  to   { background-size: 300% 100%, 100% 100%; }
}
table.vind tr.vind-zeile.verwarnt.warn-weg:not(.bloodout) { animation: vindWarnAus .65s ease-in forwards; }
@keyframes vindWarnAus {
  from { background-size: 300% 100%, 100% 100%; background-position: 150% 0, 100% 0; background-color: #0c0a02; }
  to   { background-size: 300% 100%, 0% 100%; background-position: 150% 0, 100% 0; background-color: #111; }
}
/* Die Nummer blinkt wie ein Warnlicht */
table.vind tr.verwarnt:not(.bloodout) td.vind-nr {
  color: #ffd21f; text-shadow: 0 0 8px rgba(255, 200, 0, .9);
  animation: vindWarnNr 1.8s ease-in-out infinite;
}
@keyframes vindWarnNr {
  0%, 100% { box-shadow: inset 4px 0 0 #c99a00; }
  50%      { box-shadow: inset 4px 0 0 #ffe066, inset 16px 0 14px -10px rgba(255, 200, 0, .9); }
}
table.vind tr.verwarnt:not(.bloodout) .vind-feld { color: #fff4c8; }
table.vind tr.verwarnt:not(.bloodout) .vind-feld-name { color: #ffd84d; text-shadow: 0 0 10px rgba(255, 190, 0, .7); }
table.vind tr.verwarnt:not(.bloodout) .vind-rangwahl { box-shadow: 0 0 0 1px rgba(255, 210, 31, .6), 0 0 14px -4px rgba(255, 200, 0, .9); }
/* Beide Vermerke: das Rot bleibt, das Warnzeichen leuchtet in seiner Zelle */
table.vind tr.bloodout.verwarnt td.vind-vw { box-shadow: inset 0 0 0 1px rgba(255, 210, 31, .7); }

/* Die Schilder am Namen: „Bloodout?" und „Verwarnung" nebeneinander */
.vind-schilder {
  position: absolute; right: 7px; top: 50%; translate: 0 -50%;
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.vind-schilder .vind-blut-schild { position: relative; right: auto; top: auto; translate: none; }
.vind-warn-schild {
  display: none; position: relative; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: #2a1d00;
  background: linear-gradient(180deg, #ffe45c, #e0a800); border: 1px solid rgba(255, 240, 160, .8);
}
.vind-warn-schild::before {
  content: '!'; display: grid; place-items: end center; width: 11px; height: 10px; padding-bottom: 0;
  font-size: 8px; font-weight: 900; line-height: 1; color: #ffe45c; background: #2a1d00;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
table.vind tr.verwarnt .vind-warn-schild {
  display: inline-flex;
  animation: vindSchildEin .5s cubic-bezier(.2, 1.6, .4, 1) .2s backwards, vindWarnSchild 1.8s ease-in-out 1s infinite;
}
@keyframes vindWarnSchild {
  0%, 100% { box-shadow: 0 0 6px -2px rgba(255, 200, 0, .6); }
  50%      { box-shadow: 0 0 16px 0 rgba(255, 210, 31, 1); }
}
table.vind tr.verwarnt .vind-feld-name { padding-right: 116px; }
table.vind tr.bloodout.verwarnt .vind-feld-name { padding-right: 205px; }

/* ── Kopf: die Zahl der Verwarnten ─────────────────────────────── */
.vd-warnzahl { position: relative; }
.vd-warnzahl .vd-warnzahl-zeichen { position: absolute; top: 11px; right: 12px; }
.vd-warnzahl.an {
  border-color: rgba(255, 200, 0, .6);
  background: linear-gradient(150deg, rgba(200, 150, 0, .26), rgba(0, 0, 0, .3));
  animation: vindWarnKenn 1.8s ease-in-out infinite;
}
.vd-warnzahl.an strong { color: #ffd84d; text-shadow: 0 0 14px rgba(255, 200, 0, .9); }
.vd-warnzahl.an .vd-warnzahl-zeichen { animation: vindWarnZeichen 1.8s ease-in-out infinite; }
.vd-warnzahl:not(.an) .vd-warnzahl-zeichen { opacity: .35; }
@keyframes vindWarnKenn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 0, 0); }
  50%      { box-shadow: 0 0 22px -4px rgba(255, 200, 0, .8); }
}
@keyframes vindWarnZeichen { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* „Nur Verwarnte" neben „Nur Vorgemerkte" */
.vd-warnfilter {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #ffe58a; background: rgba(200, 150, 0, .1); border: 1px solid rgba(255, 200, 0, .45);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s, color .25s, background .3s;
}
.vd-warnfilter b {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 12px; color: #fff; background: rgba(255, 200, 0, .28);
}
.vd-warnfilter:hover:not(:disabled) { transform: translateY(-2px); color: #fff; border-color: #ffd21f; box-shadow: 0 10px 22px -12px rgba(255, 200, 0, .95); }
.vd-warnfilter[aria-pressed="true"] {
  color: #2a1d00; border-color: #fff1a0;
  background: linear-gradient(110deg, #ffd21f, #c99a00);
  box-shadow: 0 0 22px -6px rgba(255, 200, 0, .95);
}
.vd-warnfilter[aria-pressed="true"] b { color: #2a1d00; background: rgba(255, 255, 255, .45); }
.vd-warnfilter[aria-pressed="true"] .vd-warnzahl-zeichen { background: #2a1d00; }
.vd-warnfilter:disabled { opacity: .38; cursor: default; }
table.vind.nur-warn tr.vind-zeile:not(.verwarnt) { display: none; }

/* ── Die Funktion: eine schlichte Auswahl, die wie eine Zelle wirkt ── */
.vind-funktionswahl {
  width: 100%; box-sizing: border-box; border: 0; outline: 0; border-radius: 3px; cursor: pointer;
  font: inherit; font-weight: 600; letter-spacing: .02em; text-align: center; text-align-last: center;
  padding: 5px 22px 5px 8px; color: #fff; appearance: none; -webkit-appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .55) 50%) right 12px center / 5px 5px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .55) 50%, transparent 50%) right 7px center / 5px 5px no-repeat,
    rgba(var(--gold-rgb), .12);
  transition: background-color .2s, box-shadow .2s, color .2s;
}
.vind-funktionswahl.leer { color: rgba(255, 255, 255, .32); font-style: italic; font-weight: 400; background-color: transparent; }
.vind-funktionswahl:hover { background-color: rgba(var(--gold-rgb), .2); }
.vind-funktionswahl:focus { box-shadow: 0 0 0 2px var(--gold); }
.vind-funktionswahl option { background: #14100c; color: #f5ead2; font-style: normal; font-weight: 600; }
.vind-leer .vind-funktionswahl { opacity: .35; }
.vind-leer:focus-within .vind-funktionswahl { opacity: 1; }

@media (max-width: 900px) {
  .vind-warn-schild { font-size: 0; gap: 0; padding: 4px 5px; }
  table.vind tr.verwarnt .vind-feld-name { padding-right: 28px; }
  table.vind tr.bloodout.verwarnt .vind-feld-name { padding-right: 56px; }
  .vind-funktion { width: 150px; min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .vind-warn svg, .vind-warn .fuellung, .warn-frisch .vind-warn::after, table.vind tr.vind-zeile.verwarnt,
  table.vind tr.verwarnt td.vind-nr, .vind-warn-schild, .vd-warnzahl, .vd-warnzahl-zeichen { animation: none !important; }
  .vind-warn .pegel, .vind-warn svg { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Teams — Informationsbeschaffung (teams.php)
   Ein einzelnes Team steht mittig statt in der halben Breite; das
   Symbol der Rubrik ist eine Lupe, die sucht, mit blitzendem Glas.
   ═══════════════════════════════════════════════════════════════════ */
.ts-teams.einzeln { grid-template-columns: minmax(0, 640px); justify-content: center; }
.sy-info .sy-lupe { animation: syLupe 3.6s ease-in-out infinite; }
.sy-info .sy-glas { stroke-width: 1.6; opacity: .9; animation: syGlas 3.6s ease-in-out infinite; }
@keyframes syLupe {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25%      { transform: translate(-1.6px, .8px) rotate(-6deg); }
  50%      { transform: translate(.8px, -1.4px) rotate(4deg); }
  75%      { transform: translate(1.4px, .9px) rotate(-3deg); }
}
@keyframes syGlas { 0%, 40%, 100% { opacity: .25; } 50%, 60% { opacity: 1; } }

/* Die Tafel trägt jetzt Funktion und Verwarnung — die Spalten rücken
   etwas zusammen, damit alles in den Rahmen passt und beide Vermerke
   rechts sichtbar bleiben (nur die Tafel, nicht Warteliste und Ehemalige) */
#vindTabelle .vind-name     { min-width: 190px; }
#vindTabelle .vind-handy    { width: 104px; min-width: 104px; }
#vindTabelle .vind-rang     { width: 150px; min-width: 150px; }
#vindTabelle .vind-funktion { width: 160px; min-width: 160px; }
#vindTabelle .vind-datum    { width: 126px; min-width: 126px; }
#vindTabelle .vind-bo, #vindTabelle .vind-vw { width: 40px; min-width: 40px; }
#vindTabelle .vind-weg      { width: 28px; min-width: 28px; }
#vindTabelle th { padding-left: 6px; padding-right: 6px; font-size: 13px; }
#vindTabelle .vind-feld-datum { padding-left: 2px; padding-right: 2px; font-size: 12px; min-width: 0; }
#vindTabelle .vind-funktionswahl { font-size: 11px; letter-spacing: 0; padding-left: 4px; padding-right: 16px; }
/* Beide Vermerke zugleich: die Schilder am Namen werden zu Zeichen */
table.vind tr.bloodout.verwarnt :is(.vind-blut-schild, .vind-warn-schild) { font-size: 0; gap: 0; padding: 4px 5px; }
table.vind tr.bloodout.verwarnt .vind-feld-name { padding-right: 62px; }
/* Das Schild „Verwarnung" etwas kleiner, damit der Name Platz behält;
   lange Namen enden in markierten Zeilen mit „…" statt hart */
.vind-warn-schild { font-size: 9px; letter-spacing: .06em; gap: 4px; padding: 2px 6px 2px 4px; }
table.vind tr.verwarnt .vind-feld-name { padding-right: 88px; }
table.vind tr:is(.bloodout, .verwarnt) .vind-feld-name:not(:focus) { text-overflow: ellipsis; }
table.vind tr.bloodout.verwarnt .vind-feld-name { padding-right: 62px; }

/* ═══════════════════════════════════════════════════════════════════
   Vindicta — nach Funktion filtern (vindicta.php, vindicta.js)
   Unter „Nur Vorgemerkte" und „Nur Verwarnte" je vergebener Funktion ein
   Knopf mit Anzahl. Neue Knöpfe springen herein, der gewählte leuchtet
   im Schwarzlicht; es gilt immer nur ein Filter zugleich.
   ═══════════════════════════════════════════════════════════════════ */
.vd-funktionsfilter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin: -4px 0 14px; padding: 10px 12px; border-radius: 16px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(var(--gold-rgb), .16);
}
.vd-funktionsfilter[hidden] { display: none; }
.vd-funktionsfilter-titel {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(var(--hell-rgb), .5);
}
.vd-funktionsknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-funktionsknopf {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-hell); background: rgba(var(--gold-rgb), .08); border: 1px solid rgba(var(--gold-rgb), .38);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s, color .25s, background .3s;
}
.vd-funktionsknopf b {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 11px; color: #fff; background: rgba(var(--gold-rgb), .3);
}
.vd-funktionsknopf:hover { transform: translateY(-2px); color: #fff; border-color: var(--gold); box-shadow: 0 10px 22px -12px rgba(var(--gold-rgb), .95); }
.vd-funktionsknopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vd-funktionsknopf[aria-pressed="true"] {
  color: #fff; border-color: rgba(var(--hell-rgb), .7);
  background: linear-gradient(110deg, rgba(var(--gold-rgb), .9), rgba(var(--zweit-rgb), .75));
  box-shadow: 0 0 22px -6px rgba(var(--gold-rgb), .95);
}
.vd-funktionsknopf[aria-pressed="true"] b { background: rgba(255, 255, 255, .25); }
.vd-funktionsknopf.kommt { animation: vdFunktionKommt .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i, 0) * 40ms) backwards; }
@keyframes vdFunktionKommt { from { opacity: 0; transform: scale(.5) translateY(6px); } }
table.vind.nur-funktion tr.vind-zeile:not(.funktion-treffer) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vd-funktionsknopf.kommt { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Vindicta — Gesprächsbedarf (vindicta.php, vindicta.js)
     Sprechblase  rechts neben dem Warnzeichen: beim Zeigen steigt Weiß
                  halb, beim Vermerken ganz — darin tippen drei Punkte,
                  kleine Blasen steigen auf
     Zeile        läuft von links weiß voll (Bloodout und Verwarnung
                  liegen darüber), die Nummer glimmt, am Namen das Schild
     Kopf         die Zahl; „Nur Gesprächsbedarf" filtert
   ═══════════════════════════════════════════════════════════════════ */
.vind-gb { width: 40px; min-width: 40px; background: #000 !important; }

/* Eine kleine Sprechblase aus CSS — im Kopf, am Filter, in der Spalte */
.vd-sprechzahl-zeichen {
  position: relative; display: inline-block; flex: none; width: 12px; height: 9px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .6);
}
.vd-sprechzahl-zeichen::after {
  content: ''; position: absolute; left: 2px; bottom: -3px; width: 4px; height: 4px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ── Die Sprechblase ───────────────────────────────────────────── */
.vind-sprech {
  position: relative; display: grid; place-items: center; height: 100%; min-height: 30px;
  padding: 3px 0; cursor: pointer;
}
.vind-sprech input { position: absolute; opacity: 0; width: 0; height: 0; }
.vind-sprech svg {
  width: 21px; height: 21px; overflow: visible;
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), filter .3s;
}
.vind-sprech .huelle {
  fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .34); stroke-width: 1.4; stroke-linejoin: round;
  transition: stroke .3s, fill .3s;
}
.vind-sprech .pegel { transform: translateY(26px); transition: transform .7s cubic-bezier(.3, .8, .25, 1); }
.vind-sprech .fuellung { fill: url(#vindSprechVerlauf); animation: vindWelle 1.6s linear infinite; }
.vind-sprech .punkt { fill: rgba(255, 255, 255, .45); transition: fill .3s .2s; }
.vind-sprech:hover svg { transform: scale(1.2) rotate(-6deg); }
.vind-sprech:hover .huelle { stroke: #fff; }
.vind-sprech:hover .pegel { transform: translateY(13px); }
.vind-sprech input:focus-visible ~ svg { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.vind-sprech input:checked ~ svg .pegel { transform: translateY(-3px); }
.vind-sprech input:checked ~ svg .huelle { stroke: #fff; fill: #26252f; }
.vind-sprech input:checked ~ svg .punkt { fill: #1c1b26; animation: vindTippen 1.2s ease-in-out infinite; }
.vind-sprech input:checked ~ svg .punkt.p2 { animation-delay: .15s; }
.vind-sprech input:checked ~ svg .punkt.p3 { animation-delay: .3s; }
@keyframes vindTippen { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-1.8px); opacity: 1; } }
.vind-sprech input:checked ~ svg { animation: vindSprechLicht 2.2s ease-in-out infinite; }
@keyframes vindSprechLicht {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45)); }
  50%      { filter: drop-shadow(0 0 9px rgba(255, 255, 255, .95)); }
}
.vind-sprech.laedt { pointer-events: none; }
/* Frisch vermerkt: die Blase springt herein, ein Ring geht auf */
.sprech-frisch .vind-sprech input:checked ~ svg {
  animation: vindSprechEin .7s cubic-bezier(.3, 1.5, .5, 1), vindSprechLicht 2.2s ease-in-out .7s infinite;
}
@keyframes vindSprechEin {
  0%   { transform: scale(.3) translateY(8px); }
  60%  { transform: scale(1.3) translateY(-2px); }
  100% { transform: none; }
}
.sprech-frisch .vind-sprech::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid #fff; pointer-events: none;
  animation: vindRing .8s ease-out .2s backwards;
}
.vind-sprechblase {
  position: fixed; z-index: 80; pointer-events: none; border-radius: 45% 45% 45% 12%;
  background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .85);
}

/* ── Die Zeile: weiß, solange weder Bloodout noch Verwarnung darüberliegt ── */
body.luxus.edel .panel table.vind tr.vind-zeile.gespraech:not(.bloodout):not(.verwarnt),
table.vind tr.vind-zeile.gespraech:not(.bloodout):not(.verwarnt) {
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .14) 50%, transparent 62%) 150% 0 / 300% 100% no-repeat,
    linear-gradient(90deg, rgba(235, 235, 250, .3), rgba(200, 200, 222, .16) 55%, rgba(140, 140, 165, .1)) 0 0 / 100% 100% no-repeat,
    #0b0b0f;
  animation: vindSprechGlanz 6.5s ease-in-out 1s infinite;
}
@keyframes vindSprechGlanz { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
table.vind tr.vind-zeile.gespraech:not(.bloodout):not(.verwarnt) > td { background: transparent !important; border-color: rgba(255, 255, 255, .9); }
table.vind tr.vind-zeile.gespraech.sprech-frisch:not(.bloodout):not(.verwarnt) {
  animation: vindSprechZeileEin .9s cubic-bezier(.3, .7, .2, 1), vindSprechGlanz 6.5s ease-in-out 1s infinite;
}
@keyframes vindSprechZeileEin {
  from { background-size: 300% 100%, 0% 100%; }
  to   { background-size: 300% 100%, 100% 100%; }
}
table.vind tr.vind-zeile.gespraech.sprech-weg:not(.bloodout):not(.verwarnt) { animation: vindSprechAus .65s ease-in forwards; }
@keyframes vindSprechAus {
  from { background-size: 300% 100%, 100% 100%; background-position: 150% 0, 100% 0; background-color: #0b0b0f; }
  to   { background-size: 300% 100%, 0% 100%; background-position: 150% 0, 100% 0; background-color: #111; }
}
/* Die Nummer glimmt weiß */
table.vind tr.gespraech:not(.bloodout):not(.verwarnt) td.vind-nr {
  color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .9);
  animation: vindSprechNr 2.2s ease-in-out infinite;
}
@keyframes vindSprechNr {
  0%, 100% { box-shadow: inset 4px 0 0 #9c9aae; }
  50%      { box-shadow: inset 4px 0 0 #fff, inset 16px 0 14px -10px rgba(255, 255, 255, .8); }
}
table.vind tr.gespraech:not(.bloodout):not(.verwarnt) .vind-feld { color: #fff; }
table.vind tr.gespraech:not(.bloodout):not(.verwarnt) .vind-feld-name { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .7); }
table.vind tr.gespraech:not(.bloodout):not(.verwarnt) .vind-rangwahl { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 14px -4px rgba(255, 255, 255, .9); }
/* Liegt ein anderer Vermerk darüber, leuchtet die Blase in ihrer Zelle */
table.vind tr.gespraech:is(.bloodout, .verwarnt) td.vind-gb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }

/* Das Schild „Gesprächsbedarf" am Namen */
.vind-sprech-schild {
  display: none; position: relative; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; color: #15141c;
  background: linear-gradient(180deg, #ffffff, #d6d4e2); border: 1px solid rgba(255, 255, 255, .9);
}
.vind-sprech-schild::before {
  content: ''; width: 9px; height: 7px; border-radius: 2px; background: #15141c;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 45% 75%, 15% 100%, 20% 75%, 0 75%);
}
table.vind tr.gespraech .vind-sprech-schild {
  display: inline-flex;
  animation: vindSchildEin .5s cubic-bezier(.2, 1.6, .4, 1) .2s backwards, vindSprechSchild 2.2s ease-in-out 1s infinite;
}
@keyframes vindSprechSchild {
  0%, 100% { box-shadow: 0 0 6px -2px rgba(255, 255, 255, .5); }
  50%      { box-shadow: 0 0 14px 0 rgba(255, 255, 255, .95); }
}
table.vind tr.gespraech .vind-feld-name { padding-right: 112px; }
/* Zwei oder drei Vermerke: die Schilder am Namen werden zu Zeichen */
table.vind tr:is(.bloodout.verwarnt, .bloodout.gespraech, .verwarnt.gespraech) :is(.vind-blut-schild, .vind-warn-schild, .vind-sprech-schild) {
  font-size: 0; gap: 0; padding: 4px 5px;
}
table.vind tr:is(.bloodout.verwarnt, .bloodout.gespraech, .verwarnt.gespraech) .vind-feld-name { padding-right: 62px; }
table.vind tr.bloodout.verwarnt.gespraech .vind-feld-name { padding-right: 90px; }

/* ── Kopf: die Zahl mit Gesprächsbedarf ────────────────────────── */
.vd-sprechzahl { position: relative; }
.vd-sprechzahl .vd-sprechzahl-zeichen { position: absolute; top: 12px; right: 12px; }
.vd-sprechzahl.an {
  border-color: rgba(255, 255, 255, .55);
  background: linear-gradient(150deg, rgba(220, 220, 240, .16), rgba(0, 0, 0, .3));
  animation: vindSprechKenn 2.2s ease-in-out infinite;
}
.vd-sprechzahl.an strong { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .85); }
.vd-sprechzahl.an .vd-sprechzahl-zeichen { animation: vindWarnZeichen 2.2s ease-in-out infinite; }
.vd-sprechzahl:not(.an) .vd-sprechzahl-zeichen { opacity: .35; box-shadow: none; }
@keyframes vindSprechKenn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 0 22px -4px rgba(255, 255, 255, .7); }
}

/* „Nur Gesprächsbedarf" neben den anderen Filtern */
.vd-sprechfilter {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #ecebf5; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .4);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s, color .25s, background .3s;
}
.vd-sprechfilter b {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 12px; color: #fff; background: rgba(255, 255, 255, .2);
}
.vd-sprechfilter:hover:not(:disabled) { transform: translateY(-2px); color: #fff; border-color: #fff; box-shadow: 0 10px 22px -12px rgba(255, 255, 255, .9); }
.vd-sprechfilter[aria-pressed="true"] {
  color: #15141c; border-color: #fff;
  background: linear-gradient(110deg, #ffffff, #cfcde0);
  box-shadow: 0 0 22px -6px rgba(255, 255, 255, .95);
}
.vd-sprechfilter[aria-pressed="true"] b { color: #15141c; background: rgba(21, 20, 28, .12); }
.vd-sprechfilter[aria-pressed="true"] .vd-sprechzahl-zeichen { background: #15141c; box-shadow: none; }
.vd-sprechfilter:disabled { opacity: .38; cursor: default; }
table.vind.nur-sprech tr.vind-zeile:not(.gespraech) { display: none; }

/* Die Tafel mit drei Vermerkspalten: alles rückt noch etwas zusammen */
#vindTabelle .vind-bo, #vindTabelle .vind-vw, #vindTabelle .vind-gb { width: 34px; min-width: 34px; }
#vindTabelle .vind-weg  { width: 24px; min-width: 24px; }
#vindTabelle .vind-rang { width: 140px; min-width: 140px; }
#vindTabelle .vind-name { min-width: 180px; }
#vindTabelle th { font-size: 12px; }

@media (max-width: 900px) {
  .vind-sprech-schild { font-size: 0; gap: 0; padding: 4px 5px; }
  table.vind tr.gespraech .vind-feld-name { padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .vind-sprech svg, .vind-sprech .fuellung, .vind-sprech .punkt, .sprech-frisch .vind-sprech::after, table.vind tr.vind-zeile.gespraech,
  table.vind tr.gespraech td.vind-nr, .vind-sprech-schild, .vd-sprechzahl, .vd-sprechzahl-zeichen { animation: none !important; }
  .vind-sprech .pegel, .vind-sprech svg { transition: none; }
}
/* Das Schild am Namen sagt kurz „Gespräch" — so behält der Name Platz */
table.vind tr.gespraech .vind-feld-name { padding-right: 78px; }
table.vind tr:is(.bloodout.verwarnt, .bloodout.gespraech, .verwarnt.gespraech) .vind-feld-name { padding-right: 62px; }
table.vind tr.bloodout.verwarnt.gespraech .vind-feld-name { padding-right: 90px; }

/* ═══════════════════════════════════════════════════════════════════
   Offline (lib/wartung.php) — wie die Wartung, nur in Rot: der Knopf
   im Kopf, das Band oben, der Hinweis auf der Anmeldeseite und die
   Offline-Seite mit einem Netzschalter über dem Logo
   ═══════════════════════════════════════════════════════════════════ */
.kopfknopf.offline-schalterknopf.an {
  color: #ffb3c4; border-color: rgba(255, 60, 100, .65); box-shadow: 0 0 16px -6px rgba(255, 60, 100, .9);
  animation: offlinePuls 1.6s ease-in-out infinite;
}
@keyframes offlinePuls { 50% { box-shadow: 0 0 22px -4px rgba(255, 60, 100, 1); } }
.offline-band {
  color: #ffd0da; border-color: rgba(255, 60, 100, .55);
  background: linear-gradient(110deg, rgba(255, 60, 100, .18), rgba(255, 60, 100, .04));
  box-shadow: 0 0 24px -12px rgba(255, 60, 100, .95);
}
.offline-band .wartung-punkt, .offline-hinweis .wartung-punkt, .offline-marke .wartung-punkt { background: #ff3c64; }
.offline-band .wartung-bandknopf { color: #fff; background: linear-gradient(110deg, #ff5c80, #c8103c); }
.offline-fenster .aw-fensterwer { color: #ff9db2; }
.offline-fenster .offline-los { background: linear-gradient(110deg, #ff5c80, #c8103c); color: #fff; border-color: #ff8aa3; }
.offline-hinweis { color: #ffd0da; border-color: rgba(255, 60, 100, .5); background: rgba(255, 60, 100, .1); }
.offline-hinweis em { color: rgba(255, 208, 218, .85); }
.offline-karte { border-color: rgba(255, 60, 100, .5); box-shadow: 0 0 30px -10px rgba(255, 60, 100, .9); }
.offline-karte .wartung-bild img { filter: grayscale(.85) brightness(.7); animation: none; }
.offline-karte .wartung-ring { border-color: rgba(255, 60, 100, .45); border-top-color: #ff6b8a; border-right-color: transparent; animation-duration: 18s; }
.offline-marke { color: #ff9db2; border-color: rgba(255, 60, 100, .5); background: rgba(255, 60, 100, .1); }
/* Der Netzschalter: ein Ring mit Strich, der langsam pulsiert */
.offline-schalter {
  position: absolute; z-index: 2; width: 58px; height: 58px; border-radius: 50%;
  border: 4px solid #ff3c64; border-top-color: transparent;
  box-shadow: 0 0 22px rgba(255, 60, 100, .8), inset 0 0 12px rgba(255, 60, 100, .5);
  animation: offlineSchalter 2.4s ease-in-out infinite;
}
.offline-schalter::after {
  content: ''; position: absolute; left: 50%; top: -10px; width: 4px; height: 28px; margin-left: -2px; border-radius: 3px;
  background: #ff3c64; box-shadow: 0 0 10px rgba(255, 60, 100, .9);
}
@keyframes offlineSchalter { 50% { opacity: .55; transform: scale(.94); } }

/* Profil: der Name des Admin-Zugangs */
.pb-namezeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pb-namezeile .input { flex: 1 1 240px; }

@media (prefers-reduced-motion: reduce) {
  .kopfknopf.offline-schalterknopf.an, .offline-schalter { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Datenbank — die Zeichen im Band (reiter() in lib/layout.php)
   Größer, in der Farbe ihrer Rubrik: Das Zeichen schwebt in seiner
   Plakette, ein Lichtring kreist beim Zeigen und um die gewählte
   Rubrik, beim Darüberfahren springt es kurz an.
   ═══════════════════════════════════════════════════════════════════ */
body.edel .tablist .tab .ico {
  position: relative; width: 48px; height: 48px; font-size: 25px;
  border-color: color-mix(in srgb, var(--c, rgb(var(--gold-rgb))) 45%, transparent);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--c, rgb(var(--gold-rgb))) 34%, transparent),
                    color-mix(in srgb, var(--c, rgb(var(--gold-rgb))) 6%, transparent));
  box-shadow: 0 0 16px -6px var(--c, rgb(var(--gold-rgb)));
}
body.edel .tablist .tab .ico i {
  display: block; font-style: normal; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
  animation: dbZeichenSchweben 3.4s ease-in-out infinite;
}
body.edel .tablist .tab:nth-child(2) .ico i { animation-delay: -.5s; }
body.edel .tablist .tab:nth-child(3) .ico i { animation-delay: -1s; }
body.edel .tablist .tab:nth-child(4) .ico i { animation-delay: -1.5s; }
body.edel .tablist .tab:nth-child(5) .ico i { animation-delay: -2s; }
body.edel .tablist .tab:nth-child(6) .ico i { animation-delay: -2.5s; }
body.edel .tablist .tab:nth-child(7) .ico i { animation-delay: -3s; }
@keyframes dbZeichenSchweben { 0%, 100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
/* Der Lichtring um die Plakette */
body.edel .tablist .tab .ico::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 2px; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--c, rgb(var(--gold-rgb))) 74%, #fff 80%,
                             var(--c, rgb(var(--gold-rgb))) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .3s;
  animation: dbZeichenRing 2.8s linear infinite;
}
@keyframes dbZeichenRing { to { transform: rotate(360deg); } }
body.edel .tablist .tab:hover .ico::before { opacity: .9; animation-duration: 1.2s; }
body.edel .tablist .tab.active .ico::before { opacity: 1; }
body.edel .tablist .tab:hover .ico {
  transform: translateY(-2px) scale(1.08);
  border-color: var(--c, rgb(var(--gold-rgb)));
  box-shadow: 0 0 24px -4px var(--c, rgb(var(--gold-rgb)));
}
body.edel .tablist .tab:hover .ico i { animation: dbZeichenSprung .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dbZeichenSprung {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.3) rotate(-12deg); }
  65%  { transform: scale(1.1) rotate(8deg); }
  100% { transform: scale(1.15) rotate(0); }
}
body.edel .tablist .tab.active .ico {
  border-color: color-mix(in srgb, var(--c, rgb(var(--gold-rgb))) 70%, #fff);
  animation: dbZeichenPuls 2.4s ease-in-out infinite;
}
@keyframes dbZeichenPuls {
  0%, 100% { box-shadow: 0 0 14px -4px var(--c, rgb(var(--gold-rgb))); }
  50%      { box-shadow: 0 0 30px 0 var(--c, rgb(var(--gold-rgb))); }
}
@media (max-width: 760px) {
  body.edel .tablist .tab .ico { width: 40px; height: 40px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  body.edel .tablist .tab .ico i, body.edel .tablist .tab .ico::before, body.edel .tablist .tab.active .ico { animation: none !important; }
}
@media (max-width: 760px) {
  body.edel .tablist .tab { grid-template-columns: 40px 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Abwesenheit — die Quoten seit der Aufnahme (nur Leitung, Stv. Leitung)
   Unter der Zählzeile je Name zwei kleine Balken: an wie viel Prozent
   aller Tage abgemeldet, an wie viel verspätet. Sie laufen beim Laden ein.
   ═══════════════════════════════════════════════════════════════════ */
.aw-quote { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; font-size: 10px; color: rgba(var(--hell-rgb), .5); }
.aw-quote-teil { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.aw-quote-teil i {
  position: relative; display: inline-block; width: 28px; height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.aw-quote-teil i::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; transform-origin: left;
  transform: scaleX(var(--q, 0)); animation: awQuoteEin 1.1s cubic-bezier(.2, .8, .2, 1) .3s backwards;
}
.aw-quote-teil.ab i::after { background: #7ec48b; box-shadow: 0 0 6px rgba(126, 196, 139, .8); }
.aw-quote-teil.sp i::after { background: #e0a34a; box-shadow: 0 0 6px rgba(224, 163, 74, .8); }
.aw-quote-teil b { font: 700 10.5px ui-monospace, Consolas, monospace; }
.aw-quote-teil.ab b { color: #7ec48b; }
.aw-quote-teil.sp b { color: #e0a34a; }
@keyframes awQuoteEin { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .aw-quote-teil i::after { animation: none; } }

/* ── Terminkalender: aus dem Rückblick eine Ereignisakte ────────────
   Rechts in der Zeile stehen Status und der Weg zur Akte untereinander.
   Der Knopf leuchtet im Violett der Ereignisse auf. */
.rueck-rechts {
  flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  align-self:center;
}
.rueck-rechts .badge { align-self:flex-end; }
.rueck-akte {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(176,107,255,.35);
  background:rgba(176,107,255,.08);
  color:#cfa8ff; font-size:11px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.rueck-akte::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.rueck-akte:hover {
  color:#fff; background:rgba(176,107,255,.22); border-color:rgba(176,107,255,.7);
  box-shadow:0 0 14px rgba(176,107,255,.35); transform:translateY(-1px);
}
.rueck-akte:hover::after { transform:translateX(120%); }
.rueck-akte span { display:inline-block; transition:transform .25s; }
.rueck-akte:hover span { transform:scale(1.25) rotate(-10deg); }
.rueck-akte.da { border-style:dashed; background:transparent; color:#b48ae6; }
@media (max-width:700px) {
  .rueck-rechts { flex-direction:row; align-self:flex-start; align-items:center; }
}
@media (prefers-reduced-motion: reduce) {
  .rueck-akte, .rueck-akte span, .rueck-akte::after { transition:none; }
}

/* ══ Große Ereignisakten ════════════════════════════════════════════
   Mehrere Ereignisakten, ein Zusammenhang. Leitfarbe Magenta (#ff5fd2)
   über dem Violett der Ereignisse. Rubrikband, Kopf mit kreisendem
   Netz, Karten mit Mini-Netz und Kette, das Verknüpfungsnetz auf der
   Aktenseite, das Verknüpfen in der Ereignisliste. */

/* ── Das Band über beiden Rubriken ── */
.ge-rubriken {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-top: 22px; padding: 5px; border-radius: 18px;
  border: 1px solid rgba(176, 107, 255, .28);
  background: linear-gradient(90deg, rgba(176, 107, 255, .08), rgba(255, 95, 210, .08)), rgba(0, 0, 0, .3);
}
.ge-rubrikgleiter {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 7px); border-radius: 14px;
  background: linear-gradient(135deg, rgba(176, 107, 255, .5), rgba(176, 107, 255, .18));
  box-shadow: 0 0 22px rgba(176, 107, 255, .35), inset 0 0 0 1px rgba(214, 180, 255, .35);
  animation: geGleiterEin .7s cubic-bezier(.2, .9, .2, 1) backwards;
}
.ge-rubriken[data-aktiv="gross"] .ge-rubrikgleiter {
  left: calc(50% + 2px);
  background: linear-gradient(135deg, rgba(255, 95, 210, .5), rgba(176, 107, 255, .25));
  box-shadow: 0 0 22px rgba(255, 95, 210, .4), inset 0 0 0 1px rgba(255, 170, 235, .4);
  animation-name: geGleiterEinRechts;
}
@keyframes geGleiterEin { from { left: calc(50% + 2px); opacity: .4; } }
@keyframes geGleiterEinRechts { from { left: 5px; opacity: .4; } }
.ge-rubrik {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px; text-decoration: none;
  color: rgba(var(--hell-rgb), .62); font-size: 14px; font-weight: 600; letter-spacing: .03em;
  transition: color .25s, transform .25s;
}
.ge-rubrik:hover { color: #fff; transform: translateY(-1px); }
.ge-rubrik.an { color: #fff; }
.ge-rubrikzeichen { font-size: 18px; color: var(--c); filter: drop-shadow(0 0 8px var(--c)); transition: transform .35s cubic-bezier(.2, .9, .2, 1.4); }
.ge-rubrik:hover .ge-rubrikzeichen, .ge-rubrik.an .ge-rubrikzeichen { transform: scale(1.18) rotate(-8deg); }
.ge-rubrik.an .ge-rubrikzeichen { animation: geZeichenPuls 2.6s ease-in-out infinite; }
@keyframes geZeichenPuls { 50% { filter: drop-shadow(0 0 14px var(--c)); } }
.ge-rubrikzahl {
  min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center;
  font: 600 12px/1.4 ui-monospace, Consolas, monospace; color: #fff;
  background: color-mix(in srgb, var(--c) 32%, rgba(0, 0, 0, .3));
}

/* ── Kopf der Rubrik ── */
.ge-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 24px; align-items: center; margin-top: 16px; padding: 26px 28px;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(255, 95, 210, .2), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(176, 107, 255, .14), transparent 60%),
    rgba(var(--flaeche-rgb), .76);
}
.ge-heldtext { position: relative; z-index: 1; }
.ge-held h1 { margin: 4px 0 6px; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.05;
  background: linear-gradient(90deg, #fff, #ffc2ef 45%, #d6b4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ge-heldknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ge-anlegen { background: linear-gradient(135deg, #ff5fd2, #b06bff) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 26px -10px rgba(255, 95, 210, .9); }
.ge-ausliste:hover { border-color: rgba(255, 95, 210, .6) !important; color: #fff !important; }

/* Das kreisende Netz rechts im Kopf */
.ge-orbit { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; margin: 0 auto; }
.ge-ring {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px dashed rgba(255, 95, 210, .32);
  animation: geKreisen 18s linear infinite;
}
.ge-ring.r1 { width: 100%; height: 100%; }
.ge-ring.r2 { width: 70%; height: 70%; border-color: rgba(176, 107, 255, .4); animation-duration: 12s; animation-direction: reverse; }
.ge-ring.r3 { width: 42%; height: 42%; border-style: solid; border-color: rgba(255, 95, 210, .25); animation-duration: 8s; }
.ge-ring i {
  position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%;
  background: #ff9ae6; box-shadow: 0 0 12px #ff5fd2, 0 0 26px rgba(255, 95, 210, .6);
}
.ge-ring i:nth-child(2) { top: auto; bottom: -6px; background: #d6b4ff; box-shadow: 0 0 12px #b06bff; }
.ge-ring i:nth-child(3) { top: calc(50% - 6px); left: -6px; background: #7ea8e6; box-shadow: 0 0 12px #7ea8e6; }
.ge-ring.r2 i { width: 9px; height: 9px; top: -4.5px; left: calc(50% - 4.5px); }
.ge-ring.r2 i:nth-child(2) { top: auto; bottom: -4.5px; }
.ge-ring.r2 i:nth-child(3) { top: calc(50% - 4.5px); left: -4.5px; }
.ge-sonne {
  position: absolute; inset: 0; margin: auto; width: 26%; height: 26%; display: grid; place-items: center;
  border-radius: 50%; font-size: clamp(26px, 3vw, 38px); color: #fff;
  background: radial-gradient(circle, rgba(255, 95, 210, .55), rgba(176, 107, 255, .25) 60%, transparent 72%);
  text-shadow: 0 0 18px #ff5fd2; animation: geSonne 3.4s ease-in-out infinite;
}
@keyframes geKreisen { to { transform: rotate(360deg); } }
@keyframes geSonne { 50% { transform: scale(1.1); text-shadow: 0 0 30px #ff5fd2, 0 0 50px #b06bff; } }

/* ── Die Karten der Rubrik ── */
.ge-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; margin-top: 12px; }
.ge-karte {
  position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255, 95, 210, .25));
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 95, 210, .12), transparent 55%),
    linear-gradient(160deg, rgba(var(--flaeche-rgb), .9), rgba(0, 0, 0, .55));
  animation: geKarteEin .7s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards;
  transition: transform .35s cubic-bezier(.2, .85, .2, 1), border-color .3s, box-shadow .35s;
}
.ge-karte[hidden] { display: none; }
.ge-karte.ge-rein { animation: geKarteEin .5s cubic-bezier(.2, .85, .2, 1) backwards; }
.ge-karte:hover {
  transform: translateY(-4px); border-color: rgba(255, 95, 210, .6);
  box-shadow: 0 24px 46px -22px rgba(0, 0, 0, .95), 0 0 30px -12px rgba(255, 95, 210, .8);
}
.ge-karte::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 48%, rgba(255, 95, 210, .12) 52%, transparent 65%);
  transform: translateX(-100%); transition: transform .9s ease;
}
.ge-karte:hover::before { transform: translateX(100%); }
@keyframes geKarteEin { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(4px); } }
.ge-kartenlink { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ge-kartenlink:focus-visible { outline: 2px solid #ff5fd2; outline-offset: -2px; }
.ge-kartennetz {
  position: relative; display: grid; place-items: center; padding: 10px 6px 30px;
  border-right: 1px solid rgba(255, 95, 210, .15);
  background: radial-gradient(circle at 50% 45%, rgba(255, 95, 210, .16), transparent 70%), rgba(0, 0, 0, .25);
}
.ge-ohnenetz { font-size: 46px; opacity: .35; animation: geSonne 3.4s ease-in-out infinite; }
.ge-kartenzahl {
  position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55);
}
.ge-kartenzahl strong { font: 700 15px ui-monospace, Consolas, monospace; color: #ffc2ef; letter-spacing: 0; }
.ge-karteninhalt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; pointer-events: none; min-width: 0; }
.ge-karteninhalt a { pointer-events: auto; }
.ge-kartenkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ge-zustand { position: static !important; }
.ge-nr { font-size: 11px; color: rgba(var(--hell-rgb), .4); }
.ge-kartentitel { margin: 0; font-size: 19px; line-height: 1.2; color: #fff; word-break: break-word; }
.ge-kartensatz { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(var(--hell-rgb), .72);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ge-karte .er-fakten span { border-color: rgba(255, 95, 210, .22); background: rgba(255, 95, 210, .06); }

/* Die Kette der Ereignisse: Perlen auf einer Schnur */
.ge-kette { position: relative; display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 4px 0 2px; padding: 0; list-style: none; }
.ge-kette li { position: relative; display: flex; align-items: center; animation: geGlied .5s cubic-bezier(.2, .9, .2, 1.3) calc(var(--d, 0ms) + 260ms + var(--j) * 80ms) backwards; }
.ge-kette li + li::before { content: ''; width: 10px; height: 1px; margin-right: 4px; background: linear-gradient(90deg, rgba(255, 95, 210, .7), rgba(176, 107, 255, .5)); }
.ge-kette a {
  display: inline-flex; align-items: center; gap: 6px; max-width: 200px; padding: 3px 10px 3px 6px; border-radius: 999px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none;
  font-size: 11.5px; color: rgba(var(--hell-rgb), .85);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: rgba(0, 0, 0, .3);
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.ge-kette a:hover { color: #fff; border-color: var(--c); transform: translateY(-1px); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.ge-kette a i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px var(--c); }
@keyframes geGlied { from { opacity: 0; transform: scale(.6); } }
.ge-karte .er-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; font-size: 11.5px; color: rgba(var(--hell-rgb), .5); }
.ge-karte .er-pfeil { margin-left: auto; color: #ff9ae6; transition: transform .3s; }
.ge-karte:hover .er-pfeil { transform: translateX(5px); }
.ge-schwarz {
  padding: 2px 9px; border-radius: 999px; text-decoration: none; font-size: 11px; color: #e8e2f0;
  border: 1px solid rgba(255, 255, 255, .18); background: #050407; transition: border-color .2s, box-shadow .2s;
}
.ge-schwarz:hover { border-color: rgba(255, 95, 210, .7); box-shadow: 0 0 12px rgba(255, 95, 210, .4); }

/* ── Das Netz (SVG) — groß auf der Aktenseite, klein auf den Karten ── */
.ge-netz { display: block; width: 100%; height: auto; overflow: visible; }
.ge-netz.klein { max-width: 190px; }
.ge-bahn { fill: none; stroke: rgba(255, 95, 210, .14); stroke-width: 1; stroke-dasharray: 4 7; animation: geBahn 40s linear infinite; }
.ge-bahn.zwei { stroke: rgba(176, 107, 255, .16); animation-direction: reverse; animation-duration: 28s; }
@keyframes geBahn { to { stroke-dashoffset: -220; } }
.ge-quer { stroke: rgba(176, 107, 255, .28); stroke-width: 1; stroke-dasharray: 3 5; animation: geQuer .9s ease var(--d, 0ms) backwards; }
@keyframes geQuer { from { opacity: 0; } }
.ge-strahl {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(255, 95, 210, .7));
  animation: geStrahl 1.1s cubic-bezier(.4, .1, .2, 1) var(--d, 0ms) backwards;
}
.ge-netz.klein .ge-strahl { stroke-width: 1.4; }
@keyframes geStrahl { from { stroke-dashoffset: 100; } }
.ge-funke { fill: #fff; filter: drop-shadow(0 0 4px #ff5fd2) drop-shadow(0 0 8px #b06bff); }
.ge-kernhof { animation: geKernhof 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes geKernhof { 50% { opacity: .55; transform: scale(1.12); } }
.ge-kern { fill: #14091a; stroke: #ff5fd2; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(255, 95, 210, .9)); }
.ge-kernzeichen { fill: #fff; text-anchor: middle; dominant-baseline: central; }
.ge-knoten { animation: geKnoten .6s cubic-bezier(.2, .9, .2, 1.5) var(--d, 0ms) backwards; }
@keyframes geKnoten { from { opacity: 0; transform: scale(.2); } }
.ge-knotenhof { fill: color-mix(in srgb, var(--c) 22%, transparent); animation: geKnotenhof 2.8s ease-in-out infinite; animation-delay: var(--d, 0ms); transform-box: fill-box; transform-origin: center; }
@keyframes geKnotenhof { 50% { transform: scale(1.35); opacity: .4; } }
.ge-knotenpunkt { fill: #0d0a12; stroke: var(--c); stroke-width: 2; filter: drop-shadow(0 0 6px var(--c)); transition: fill .25s; }
.ge-knotennr { fill: #fff; font: 700 11px ui-monospace, Consolas, monospace; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ge-knotentitel { fill: rgba(var(--hell-rgb), .85); font-size: 12px; font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .8); stroke-width: 3px; stroke-linejoin: round; }
.ge-knotenlink { cursor: pointer; }
.ge-knotenlink:hover .ge-knotenpunkt { fill: var(--c); }
.ge-knotenlink:hover .ge-knotentitel { fill: #fff; }
.ge-knotenlink:focus-visible .ge-knotenpunkt { stroke: #fff; }

/* ── Auf der Aktenseite: das Verknüpfungsnetz und die Zeitleiste ── */
.ge-verbund {
  position: relative; overflow: hidden; margin-top: 18px; padding: 22px 24px 24px;
  border-color: rgba(255, 95, 210, .3);
  background:
    radial-gradient(70% 90% at 50% 30%, rgba(255, 95, 210, .12), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgba(176, 107, 255, .1), transparent 70%),
    rgba(var(--flaeche-rgb), .8);
}
.ge-verbundkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ge-verbundzahl { padding: 3px 10px; border-radius: 999px; font: 600 11.5px ui-monospace, Consolas, monospace; color: #fff; background: rgba(255, 95, 210, .25); }
.ge-verbundaendern { margin-left: auto; font-size: 12.5px; color: #ff9ae6; text-decoration: none; }
.ge-verbundaendern:hover { text-decoration: underline; }
.ge-verbundflaeche { max-width: 640px; margin: 14px auto 6px; }
.ge-verbundleer { display: grid; justify-items: center; gap: 6px; padding: 26px 10px 10px; text-align: center; color: rgba(var(--hell-rgb), .65); }
.ge-verbundleer span { font-size: 40px; opacity: .5; animation: geSonne 3.4s ease-in-out infinite; }
.ge-verbundleer p { margin: 0; }

.ge-zeitleiste { position: relative; display: grid; gap: 10px; margin: 16px 0 0; padding: 0 0 0 44px; list-style: none; }
.ge-zeitleiste::before {
  content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #ff5fd2, #b06bff 60%, rgba(176, 107, 255, .1));
  transform-origin: top; animation: geStrang 1.2s cubic-bezier(.4, .1, .2, 1) .2s backwards;
}
@keyframes geStrang { from { transform: scaleY(0); } }
.ge-glied { position: relative; animation: geGliedEin .6s cubic-bezier(.2, .85, .2, 1) calc(var(--d, 0ms) + 300ms) backwards; }
@keyframes geGliedEin { from { opacity: 0; transform: translateX(-16px); } }
.ge-gliednr {
  position: absolute; left: -44px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  font: 700 12px ui-monospace, Consolas, monospace; color: #fff; background: #0d0a12;
  border: 2px solid var(--c); box-shadow: 0 0 0 4px rgba(0, 0, 0, .4), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
}
.ge-gliedkarte {
  display: flex; align-items: stretch; gap: 14px; padding: 10px; border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 8%, transparent), rgba(0, 0, 0, .3));
  transition: transform .3s cubic-bezier(.2, .85, .2, 1), border-color .25s, box-shadow .3s;
}
.ge-gliedkarte:hover { transform: translateX(6px); border-color: var(--c); box-shadow: 0 0 22px -8px var(--c); }
.ge-gliedbild { flex: none; width: 92px; min-height: 76px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(176, 107, 255, .35), rgba(0, 0, 0, .6)); font-size: 30px; }
.ge-gliedbild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .85, .2, 1); }
.ge-gliedkarte:hover .ge-gliedbild img { transform: scale(1.08); }
.ge-gliedtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ge-gliedkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ge-gliedwann { font-size: 11.5px; color: rgba(var(--hell-rgb), .6); }
.ge-gliedtitel { font-size: 15.5px; color: #fff; word-break: break-word; }
.ge-glieddeck { font-size: 12px; color: #d6b4ff; }
.ge-gliedsatz { font-size: 12.5px; line-height: 1.5; color: rgba(var(--hell-rgb), .7); }
.ge-gliedfakten { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: rgba(var(--hell-rgb), .55); }
.ge-gliedpfeil { align-self: center; color: var(--c); font-size: 18px; transition: transform .3s; }
.ge-gliedkarte:hover .ge-gliedpfeil { transform: translateX(4px); }

/* Ereignisakte: „Teil der Großen Ereignisakte" */
.ge-teilband {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding: 10px 14px; border-radius: 16px;
  border: 1px solid rgba(255, 95, 210, .35);
  background: linear-gradient(90deg, rgba(255, 95, 210, .14), rgba(176, 107, 255, .06) 60%, transparent), rgba(0, 0, 0, .25);
}
.ge-teilzeichen { font-size: 20px; color: #ff9ae6; filter: drop-shadow(0 0 8px #ff5fd2); animation: geZeichenPuls 2.6s ease-in-out infinite; --c: #ff5fd2; }
.ge-teilwort { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .6); }
.ge-teillink {
  padding: 4px 12px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; color: #fff;
  border: 1px solid rgba(255, 95, 210, .5); background: rgba(255, 95, 210, .12); transition: background .2s, box-shadow .2s;
}
.ge-teillink:hover { background: rgba(255, 95, 210, .28); box-shadow: 0 0 16px rgba(255, 95, 210, .45); }
.ge-teillink span { display: inline-block; transition: transform .25s; }
.ge-teillink:hover span { transform: translateX(3px); }
.ge-schwarzknopf { border-color: rgba(255, 255, 255, .2) !important; background: #050407 !important; color: #f1ecf7 !important; }
.ge-schwarzknopf:hover { box-shadow: 0 0 18px rgba(255, 95, 210, .45); border-color: rgba(255, 95, 210, .6) !important; }

/* Formular: aus der Ereignisliste verknüpft */
.ge-herkunftkette { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ge-herkunftkette span {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; color: #fff;
  border: 1px solid rgba(255, 95, 210, .4); background: rgba(255, 95, 210, .1);
  animation: geGlied .45s cubic-bezier(.2, .9, .2, 1.3) calc(200ms + var(--j) * 70ms) backwards;
}

/* ── Verknüpfen: der Knopf in der Ereignisliste und die Werkbank ── */
.ge-verknuepfen {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 600; color: #ffc2ef;
  border: 1px solid rgba(255, 95, 210, .4); background: rgba(255, 95, 210, .08);
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.ge-verknuepfen:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 0 16px rgba(255, 95, 210, .35); }
.ge-verknuepfen span { display: inline-block; transition: transform .5s; }
.ge-verknuepfen:hover span { transform: rotate(360deg); }
.ge-teilvon { border-color: rgba(255, 95, 210, .45) !important; background: rgba(255, 95, 210, .12) !important; color: #ffc2ef !important; }
.ge-verknuepfknopf { border-color: rgba(255, 95, 210, .45) !important; color: #ffc2ef !important; }
.ge-verknuepfknopf:hover { box-shadow: 0 0 16px rgba(255, 95, 210, .4); color: #fff !important; }

.ge-werkbank {
  position: relative; margin-top: 16px; padding: 20px 22px 0; scroll-margin-top: calc(var(--kopfhoehe, 270px) + 16px);
  border-color: rgba(255, 95, 210, .35);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 95, 210, .12), transparent 60%),
    radial-gradient(70% 100% at 0% 100%, rgba(176, 107, 255, .1), transparent 60%),
    rgba(var(--flaeche-rgb), .85);
}
.ge-werkbank.vorgewaehlt { box-shadow: 0 0 0 1px rgba(255, 95, 210, .5), 0 0 34px -10px rgba(255, 95, 210, .7); }
.ge-wbkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ge-wbtitel { display: flex; align-items: center; gap: 12px; }
.ge-wbzeichen {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, #ff5fd2, #b06bff); box-shadow: 0 0 18px rgba(255, 95, 210, .55);
  animation: geSonne 3.4s ease-in-out infinite;
}
.ge-wbsuche { flex: 0 1 280px; }
.ge-wbleer { margin: 14px 0 20px; font-size: 13.5px; color: rgba(var(--hell-rgb), .7); }
.ge-wbleer a { color: #ff9ae6; }
.ge-wbflaeche { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; margin-top: 14px; align-items: start; }
.ge-wbliste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px;
  max-height: 440px; overflow-y: auto; padding: 4px 6px 12px 2px;
}
.ge-wbwahl {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 8px 34px 8px 8px; border-radius: 14px; cursor: pointer; user-select: none;
  border: 1px solid color-mix(in srgb, var(--c) 28%, rgba(255, 255, 255, .06));
  background: rgba(0, 0, 0, .28);
  animation: geGliedEin .45s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.ge-wbwahl[hidden] { display: none; }
.ge-wbwahl:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ge-wbwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ge-wbwahl:focus-within { box-shadow: 0 0 0 2px rgba(255, 95, 210, .7); }
.ge-wbwahl.an, .ge-wbwahl:has(input:checked) {
  border-color: #ff5fd2; background: linear-gradient(120deg, rgba(255, 95, 210, .2), rgba(176, 107, 255, .12));
  box-shadow: 0 0 18px -6px rgba(255, 95, 210, .8);
}
.ge-wbhaken {
  position: absolute; right: 9px; top: 50%; width: 22px; height: 22px; margin-top: -11px; display: grid; place-items: center;
  border-radius: 50%; font-size: 12px; font-weight: 800; color: transparent;
  border: 2px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .4);
  transition: background .2s, border-color .2s, color .2s, transform .3s cubic-bezier(.2, .9, .2, 1.6);
}
.ge-wbwahl.an .ge-wbhaken, .ge-wbwahl:has(input:checked) .ge-wbhaken { color: #fff; border-color: #ff5fd2; background: #ff5fd2; transform: scale(1.15); box-shadow: 0 0 12px #ff5fd2; }
.ge-wbbild { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; font-size: 22px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 40%, rgba(176, 107, 255, .3)), rgba(0, 0, 0, .6)); }
.ge-wbbild img { width: 100%; height: 100%; object-fit: cover; }
.ge-wbtext { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ge-wbtext strong { font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ge-wbtext small { font-size: 11px; color: rgba(var(--hell-rgb), .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ge-wbschilder { display: flex; flex-wrap: wrap; gap: 4px; }
.ge-wbschilder em { font-style: normal; font-size: 10px; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px; }
.ge-wbstand { color: #fff; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 18%, transparent); }
.ge-wbteil { color: #ffc2ef; border: 1px solid rgba(255, 95, 210, .4); background: rgba(255, 95, 210, .1); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ge-wbnichts { grid-column: 1 / -1; margin: 6px 2px; font-size: 13px; color: rgba(var(--hell-rgb), .6); }
.ge-wbvorschau { position: sticky; top: 0; padding: 10px; border-radius: 16px; border: 1px solid rgba(255, 95, 210, .2); background: rgba(0, 0, 0, .25); text-align: center; }
.ge-wbvorschau svg { display: block; width: 100%; height: auto; overflow: visible; }
.ge-wbstrahl { stroke: rgba(255, 122, 224, .75); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 95, 210, .8)); animation: geWbStrahl .5s cubic-bezier(.2, .85, .2, 1) backwards; stroke-dasharray: 200; }
@keyframes geWbStrahl { from { stroke-dashoffset: 200; } }
.ge-wbknoten { fill: #0d0a12; stroke: var(--c, #b06bff); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--c, #b06bff)); animation: geKnoten .45s cubic-bezier(.2, .9, .2, 1.5) backwards; transform-box: fill-box; transform-origin: center; }
.ge-wbvorschautext { margin: 4px 0 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #ffc2ef; }
.ge-wbfuss {
  position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 8px -22px 0; padding: 12px 22px; border-radius: 0 0 18px 18px;
  border-top: 1px solid rgba(255, 95, 210, .25); background: rgba(var(--kopf-rgb), .95); backdrop-filter: blur(10px);
}
.ge-wbzahl { font-size: 13px; color: rgba(var(--hell-rgb), .7); }
.ge-wbzahl b { display: inline-block; font: 800 18px ui-monospace, Consolas, monospace; color: #fff; }
.ge-wbzahl b.ge-zuck { animation: geZuck .35s cubic-bezier(.2, .9, .2, 1.6); }
@keyframes geZuck { 40% { transform: scale(1.3); color: #ff9ae6; } }
.ge-wbzahl small { font-size: 12px; }
.ge-wbchips { flex: 1 1 200px; display: flex; flex-wrap: wrap; gap: 5px; max-height: 54px; overflow: auto; }
.ge-wbchip { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: #fff; border: 1px solid rgba(255, 95, 210, .45); background: rgba(255, 95, 210, .14); animation: geGlied .35s cubic-bezier(.2, .9, .2, 1.4); }
.ge-wblos { opacity: .55; filter: grayscale(.4); transition: opacity .2s, filter .2s; }
.ge-wblos.bereit { opacity: 1; filter: none; background: linear-gradient(135deg, #ff5fd2, #b06bff) !important; border-color: transparent !important; color: #fff !important; animation: geBereit 2s ease-in-out infinite; }
.ge-wbzuwenig .ge-wbfuss { animation: geWbWackeln .45s ease; }
@keyframes geWbWackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 760px) {
  .ge-wbflaeche { grid-template-columns: 1fr; }
  .ge-wbvorschau { position: static; order: -1; max-width: 220px; margin: 0 auto; }
  .ge-wbliste { max-height: 360px; }
  .ge-werkbank { padding: 16px 16px 0; }
  .ge-wbfuss { margin: 8px -16px 0; padding: 12px 16px; }
}
@keyframes geBereit { 50% { box-shadow: 0 0 24px rgba(255, 95, 210, .8); } }

@media (max-width: 760px) {
  .ge-held { grid-template-columns: 1fr; }
  .ge-orbit { max-width: 180px; order: -1; }
  .ge-karte { grid-template-columns: 1fr; }
  .ge-kartennetz { border-right: 0; border-bottom: 1px solid rgba(255, 95, 210, .15); }
  .ge-rubrik { flex-wrap: wrap; gap: 6px; padding: 10px 8px; font-size: 13px; }
  .ge-gliedbild { width: 64px; min-height: 64px; }
  .ge-zeitleiste { padding-left: 38px; }
  .ge-gliednr { left: -38px; width: 28px; height: 28px; }
  .ge-zeitleiste::before { left: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ge-ring, .ge-sonne, .ge-bahn, .ge-kernhof, .ge-knotenhof, .ge-wahlzeichen, .ge-verknuepfen.an span,
  .ge-rubrik.an .ge-rubrikzeichen, .ge-teilzeichen, .ge-wahllos.bereit { animation: none; }
  .ge-funke { display: none; }
}

/* ── Terminkalender → Ereignisakte: Herkunft im Formular ── */
.termin-herkunft .erf-herkunftzeichen { animation-duration: 3s; }

/* ══ Tribunal ═══════════════════════════════════════════════════════
   Geschlossene Beratung: Gold der Waage über tiefem Weinrot. Kopf mit
   schwingender Waage, gleitende Reiter, Live-Chat, Ablage als Pinnwand,
   Gesprächsprotokoll mit Quotenringen und Sanktionsleiste. */
.tr-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(240px, 340px);
  gap: 22px; align-items: center; margin-top: 22px; padding: 24px 26px;
  border-color: rgba(224, 176, 74, .32);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(224, 176, 74, .16), transparent 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(164, 20, 43, .22), transparent 60%),
    rgba(var(--flaeche-rgb), .8);
}
.tr-held::after {
  content: '§'; position: absolute; right: 30%; top: -60px; font: 700 240px/1 Georgia, serif; color: #e0b04a; opacity: .035; pointer-events: none;
  animation: trParagraph 9s ease-in-out infinite;
}
@keyframes trParagraph { 50% { transform: translateY(14px) rotate(4deg); opacity: .06; } }
.tr-wappen { width: 132px; height: 132px; filter: drop-shadow(0 0 18px rgba(224, 176, 74, .35)); animation: trWappenEin .9s cubic-bezier(.2, .9, .2, 1.2) backwards; }
@keyframes trWappenEin { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
.tr-wappen svg { width: 100%; height: 100%; overflow: visible; }
.tr-wappenring { fill: none; stroke: rgba(224, 176, 74, .35); stroke-width: 1; stroke-dasharray: 3 6; transform-origin: 60px 60px; animation: trDrehen 30s linear infinite; }
.tr-wappenring.zwei { stroke: rgba(164, 20, 43, .5); stroke-dasharray: 1 4; animation-direction: reverse; animation-duration: 20s; }
@keyframes trDrehen { to { transform: rotate(360deg); } }
.tr-balken { transform-origin: 60px 35px; animation: trWaage 5s ease-in-out infinite; }
.tr-schale.links { transform-origin: 30px 35px; animation: trSchale 5s ease-in-out infinite; }
.tr-schale.rechts { transform-origin: 90px 35px; animation: trSchale 5s ease-in-out infinite; }
@keyframes trWaage { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes trSchale { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
.tr-heldtext { position: relative; z-index: 1; min-width: 0; }
.tr-heldtext h1 {
  margin: 4px 0 6px; font-size: clamp(32px, 4.6vw, 52px); line-height: 1; letter-spacing: .04em;
  background: linear-gradient(90deg, #fff4d6, #e0b04a 55%, #ff8a8a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tr-schloss {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 12px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #ffd98a;
  border: 1px solid rgba(224, 176, 74, .4); background: rgba(224, 176, 74, .08);
}
.tr-kennzahlen { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-kennzahl {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i z' 's s'; gap: 2px 8px; align-items: center;
  padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: trAuf .55s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; transition: transform .25s;
}
.tr-kennzahl:hover { transform: translateY(-3px); }
.tr-kennzahl i { grid-area: i; font-style: normal; font-size: 15px; }
.tr-kennzahl strong { grid-area: z; font: 700 21px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.tr-kennzahl small { grid-area: s; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.tr-kennzahl.warnt { animation: trAuf .55s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards, trWarnen 2.2s ease-in-out 1s infinite; }
@keyframes trWarnen { 50% { box-shadow: 0 0 18px rgba(224, 71, 95, .55); border-color: rgba(224, 71, 95, .8); } }
@keyframes trAuf { from { opacity: 0; transform: translateY(14px); } }

/* Reiter mit Gleiter */
.tr-reiter {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 16px; padding: 5px; border-radius: 18px;
  border: 1px solid rgba(224, 176, 74, .25); background: rgba(0, 0, 0, .3);
}
.tr-reitergleiter {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 18px) / 3); border-radius: 14px;
  background: linear-gradient(135deg, rgba(224, 176, 74, .42), rgba(164, 20, 43, .32));
  box-shadow: 0 0 22px rgba(224, 176, 74, .3), inset 0 0 0 1px rgba(255, 217, 138, .35);
  transition: transform .45s cubic-bezier(.2, .9, .2, 1.1);
}
.tr-reiter[data-an="ablage"] .tr-reitergleiter { transform: translateX(calc(100% + 4px)); }
.tr-reiter[data-an="protokoll"] .tr-reitergleiter { transform: translateX(calc(200% + 8px)); }
.tr-reiterknopf {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px; border-radius: 14px;
  text-decoration: none; font-size: 14px; font-weight: 600; color: rgba(var(--hell-rgb), .6); transition: color .25s;
}
.tr-reiterknopf[aria-selected="true"] { color: #fff; }
.tr-reiterknopf:hover { color: #fff; }
.tr-reiterknopf em { font-style: normal; min-width: 22px; padding: 1px 7px; border-radius: 999px; font: 600 11px/1.5 ui-monospace, Consolas, monospace; background: rgba(255, 255, 255, .1); }
.tr-neu { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #e0475f; animation: trPuls 1.2s ease-in-out infinite; }
@keyframes trPuls { 50% { box-shadow: 0 0 12px #e0475f; transform: scale(1.08); } }
.tr-rubrik { margin-top: 14px; }
.tr-rubrik.tr-rein { animation: trRubrik .45s cubic-bezier(.2, .85, .2, 1); }
@keyframes trRubrik { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* ── Chat ── */
.tr-chat { display: flex; flex-direction: column; height: min(72vh, 680px); padding: 0; overflow: hidden; border-color: rgba(224, 176, 74, .25); }
.tr-chatkopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(224, 176, 74, .15); font-size: 13px; font-weight: 600; color: #ffd98a; background: rgba(0, 0, 0, .25); }
.tr-live { width: 9px; height: 9px; border-radius: 50%; background: #7ec48b; box-shadow: 0 0 0 0 rgba(126, 196, 139, .7); animation: trLive 1.8s ease-out infinite; }
@keyframes trLive { to { box-shadow: 0 0 0 10px rgba(126, 196, 139, 0); } }
.tr-chatstand { margin-left: auto; font: 500 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.tr-chatstand.weg { color: #e0475f; }
.tr-verlauf {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(224, 176, 74, .06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 28px);
}
.tr-chatleer { margin: auto; text-align: center; color: rgba(var(--hell-rgb), .5); }
.tr-chatleer span { display: block; font-size: 46px; opacity: .5; animation: trWaage 5s ease-in-out infinite; }
.tr-tag { align-self: center; margin: 8px 0 2px; padding: 3px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; color: rgba(var(--hell-rgb), .55); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .06); }
.tr-nachricht { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.tr-nachricht.eigen { align-self: flex-end; flex-direction: row-reverse; }
.tr-nachricht.neu { animation: trNachricht .45s cubic-bezier(.2, .9, .2, 1.15); }
.tr-nachricht.eigen.neu { animation-name: trNachrichtEigen; }
@keyframes trNachricht { from { opacity: 0; transform: translateX(-18px) scale(.96); } }
@keyframes trNachrichtEigen { from { opacity: 0; transform: translateX(18px) scale(.96); } }
.tr-nachricht.weg { transition: opacity .3s, transform .3s; opacity: 0; transform: scale(.9); }
.tr-absender {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  font: 700 12px ui-monospace, Consolas, monospace; color: #0b0906; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent);
}
.tr-absender { position: relative; overflow: hidden; width: 36px; height: 36px; transition: transform .25s; }
.tr-absender img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tr-absender.mit-bild { background: #0b0906; box-shadow: 0 0 0 2px var(--c), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.tr-nachricht:hover .tr-absender { transform: scale(1.1); }
.tr-blase {
  position: relative; min-width: 0; padding: 8px 12px 9px; border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(var(--flaeche-rgb), .95);
}
.tr-nachricht.eigen .tr-blase {
  border-radius: 16px 16px 4px 16px; border-color: rgba(224, 176, 74, .35);
  background: linear-gradient(135deg, rgba(224, 176, 74, .26), rgba(164, 20, 43, .22));
}
.tr-blasenkopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 11px; }
.tr-blasenkopf strong { font-size: 12px; }
.tr-nachricht.eigen .tr-blasenkopf strong { display: none; }
.tr-blasenkopf span { color: rgba(var(--hell-rgb), .4); font-family: ui-monospace, Consolas, monospace; }
.tr-blasentext { font-size: 14px; line-height: 1.5; color: #f1eadb; white-space: pre-wrap; word-break: break-word; }
.tr-chatweg { margin-left: auto; padding: 0 4px; border: 0; background: none; cursor: pointer; font-size: 11px; color: rgba(var(--hell-rgb), .35); opacity: 0; transition: opacity .2s, color .2s; }
.tr-blase:hover .tr-chatweg { opacity: 1; }
.tr-chatweg:hover { color: #e0475f; }
.tr-eingabe { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid rgba(224, 176, 74, .15); background: rgba(0, 0, 0, .3); }
.tr-eingabe textarea {
  flex: 1; min-height: 44px; max-height: 160px; resize: none; padding: 11px 14px; border-radius: 14px;
  border: 1px solid rgba(224, 176, 74, .25); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.tr-eingabe textarea:focus { border-color: #e0b04a; box-shadow: 0 0 0 3px rgba(224, 176, 74, .15); }
.tr-senden {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; color: #1a1208;
  background: linear-gradient(135deg, #ffe7a8, #e0b04a); box-shadow: 0 6px 18px -6px rgba(224, 176, 74, .9);
  transition: transform .2s, box-shadow .2s;
}
.tr-senden:hover { transform: scale(1.08) rotate(-8deg); box-shadow: 0 0 22px rgba(224, 176, 74, .7); }
.tr-eingabe.flug .tr-senden { animation: trFlug .5s cubic-bezier(.2, .9, .2, 1); }
@keyframes trFlug { 40% { transform: translateX(10px) rotate(-20deg) scale(.9); } }

/* ── Ablage ── */
.tr-ablegen { padding: 16px 18px; border-color: rgba(224, 176, 74, .22); }
.tr-artwahl { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid rgba(224, 176, 74, .25); background: rgba(0, 0, 0, .3); }
.tr-artwahl input { position: absolute; opacity: 0; pointer-events: none; }
.tr-artwahl span { display: block; padding: 7px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; color: rgba(var(--hell-rgb), .65); transition: background .25s, color .25s; }
.tr-artwahl input:checked + span { color: #fff; background: linear-gradient(135deg, rgba(224, 176, 74, .45), rgba(164, 20, 43, .3)); box-shadow: 0 0 12px rgba(224, 176, 74, .3); }
.tr-artwahl input:focus-visible + span { outline: 2px solid #e0b04a; }
.tr-ablegenfelder { display: grid; gap: 8px; margin-top: 12px; }
.tr-ablage-datei { display: block; cursor: pointer; }
.tr-ablage-datei[hidden] { display: none; }
.tr-ablage-datei input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tr-dateizone {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; border-radius: 14px;
  border: 2px dashed rgba(224, 176, 74, .35); background: rgba(224, 176, 74, .04); color: rgba(var(--hell-rgb), .7); font-size: 13px;
  transition: border-color .2s, background .2s, transform .2s;
}
.tr-dateizone b { font-size: 20px; color: #e0b04a; animation: trHoch 1.6s ease-in-out infinite; }
@keyframes trHoch { 50% { transform: translateY(-4px); } }
.tr-ablage-datei:hover .tr-dateizone, .tr-ablage-datei.drueber .tr-dateizone { border-color: #e0b04a; background: rgba(224, 176, 74, .1); transform: scale(1.01); }
.tr-ablegenfuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.tr-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.tr-filter button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
  color: rgba(var(--hell-rgb), .7); border: 1px solid rgba(224, 176, 74, .25); background: rgba(0, 0, 0, .2); transition: all .2s;
}
.tr-filter button span { padding: 0 6px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .08); }
.tr-filter button.an { color: #fff; border-color: #e0b04a; background: rgba(224, 176, 74, .2); box-shadow: 0 0 12px rgba(224, 176, 74, .25); }
.tr-ablage { columns: 3 260px; column-gap: 14px; margin-top: 12px; }
.tr-stueck {
  position: relative; break-inside: avoid; margin: 0 0 14px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(var(--flaeche-rgb), .92);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
  animation: trStueck .6s cubic-bezier(.2, .85, .2, 1.1) var(--d, 0ms) backwards;
  transition: transform .3s cubic-bezier(.2, .85, .2, 1), box-shadow .3s, border-color .3s;
}
.tr-stueck[hidden] { display: none; }
.tr-stueck.tr-rein { animation: trStueck .45s cubic-bezier(.2, .85, .2, 1.1) backwards; }
@keyframes trStueck { from { opacity: 0; transform: translateY(16px) rotate(var(--neig, 0deg)) scale(.95); } }
.tr-stueck:hover { transform: translateY(-4px) rotate(0deg); border-color: rgba(224, 176, 74, .45); box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .95), 0 0 20px -10px rgba(224, 176, 74, .7); }
.tr-stueck.tr-notiz {
  transform: rotate(calc(var(--neig, 0deg) * .5));
  background: linear-gradient(170deg, rgba(255, 231, 168, .12), rgba(255, 231, 168, .03) 60%), rgba(var(--flaeche-rgb), .95);
  border-color: rgba(224, 176, 74, .25);
}
.tr-stueck.tr-notiz::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #e0b04a, #a4142b); }
.tr-stueck.geheftet { border-color: rgba(224, 71, 95, .55); }
.tr-nadel { position: absolute; z-index: 2; right: 10px; top: 6px; font-size: 18px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); animation: trNadel .5s cubic-bezier(.2, .9, .2, 1.6) .3s backwards; }
@keyframes trNadel { from { transform: translateY(-20px) scale(1.4); opacity: 0; } }
.tr-bildknopf { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; overflow: hidden; }
.tr-bildknopf img { display: block; width: 100%; max-height: 320px; object-fit: cover; transition: transform .7s cubic-bezier(.2, .85, .2, 1), filter .4s; filter: saturate(.85); }
.tr-stueck:hover .tr-bildknopf img { transform: scale(1.05); filter: saturate(1.05); }
.tr-dateiblatt { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'e n' 'e g'; gap: 2px 12px; align-items: center; padding: 14px; text-decoration: none; color: inherit; background: rgba(0, 0, 0, .25); }
.tr-endung {
  grid-area: e; position: relative; width: 48px; height: 58px; display: grid; place-items: end center; padding-bottom: 8px; border-radius: 6px 14px 6px 6px;
  font: 700 10px ui-monospace, Consolas, monospace; color: #1a1208; background: linear-gradient(160deg, #ffe7a8, #e0b04a);
  transition: transform .3s cubic-bezier(.2, .9, .2, 1.4);
}
.tr-dateiblatt:hover .tr-endung { transform: rotate(-6deg) translateY(-2px); }
.tr-dateiname { grid-area: n; font-size: 13.5px; font-weight: 600; color: #fff; word-break: break-word; }
.tr-dateigroesse { grid-area: g; font-size: 11.5px; color: #ffd98a; }
.tr-stueckinhalt { padding: 12px 14px 4px; }
.tr-stueckinhalt h3 { margin: 0 0 4px; font-size: 15px; color: #fff; word-break: break-word; }
.tr-stueckinhalt p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(var(--hell-rgb), .8); word-break: break-word; }
.tr-stueckfuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 10px; font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.tr-stuecktaten { display: inline-flex; gap: 2px; }
.tr-stuecktaten form { margin: 0; }
.tr-stuecktaten button { padding: 3px 6px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 13px; opacity: .55; transition: opacity .2s, background .2s, transform .2s; }
.tr-stuecktaten button:hover { opacity: 1; background: rgba(255, 255, 255, .08); transform: scale(1.12); }
.tr-lupe { max-width: min(92vw, 1100px); padding: 0; border: 1px solid rgba(224, 176, 74, .4); border-radius: 18px; background: #0b0906; color: #fff; overflow: hidden; }
.tr-lupe::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
.tr-lupe[open] { animation: trLupe .35s cubic-bezier(.2, .9, .2, 1.1); }
@keyframes trLupe { from { opacity: 0; transform: scale(.9); } }
.tr-lupe img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.tr-lupe p { margin: 0; padding: 10px 16px; font-size: 13px; color: #ffd98a; }
.tr-lupezu { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .6); }

/* ── Gesprächsprotokoll ── */
.tr-protokoll { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.tr-leute { position: sticky; top: calc(var(--kopfhoehe, 170px) + 12px); padding: 14px; max-height: calc(100vh - var(--kopfhoehe, 170px) - 24px); display: flex; flex-direction: column; border-color: rgba(224, 176, 74, .22); }
.tr-leutekopf { display: flex; align-items: center; justify-content: space-between; }
.tr-leutezahl { padding: 1px 9px; border-radius: 999px; font: 600 12px ui-monospace, Consolas, monospace; color: #fff; background: rgba(224, 176, 74, .25); }
.tr-leutesuche { margin: 10px 0 8px; }
.tr-leuteliste { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -4px; padding: 0 4px; }
.tr-person {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: inherit;
  border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s;
}
.tr-person[hidden] { display: none; }
.tr-person:hover { background: rgba(224, 176, 74, .07); transform: translateX(3px); }
.tr-person.an { border-color: rgba(224, 176, 74, .55); background: linear-gradient(90deg, rgba(224, 176, 74, .18), rgba(164, 20, 43, .1)); box-shadow: 0 0 16px -6px rgba(224, 176, 74, .6); }
.tr-person.an::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: #e0b04a; }
.tr-person.ehemalig { opacity: .65; }
.tr-bild { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(224, 176, 74, .35); background: rgba(224, 176, 74, .12); font: 700 12px ui-monospace, Consolas, monospace; color: #ffd98a; }
.tr-bild img { width: 100%; height: 100%; object-fit: cover; }
.tr-bild.gross { width: 64px; height: 64px; font-size: 20px; border-width: 2px; box-shadow: 0 0 0 4px rgba(224, 176, 74, .12), 0 0 22px rgba(224, 176, 74, .3); }
.tr-personmitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tr-personname { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-personname small { font-weight: 400; font-size: 10px; color: rgba(var(--hell-rgb), .5); }
.tr-quoten { display: flex; gap: 8px; }
.tr-quote { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .6); }
.tr-quote i { position: relative; width: 30px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tr-quote i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--q); border-radius: 2px; animation: trBalken 1s cubic-bezier(.2, .85, .2, 1) .3s backwards; }
.tr-quote.ab i::after { background: #e0a34a; }
.tr-quote.sp i::after { background: #7ea8e6; }
@keyframes trBalken { from { width: 0; } }
.tr-personzahlen { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; }
.tr-gz { color: rgba(var(--hell-rgb), .55); }
.tr-oz { padding: 0 6px; border-radius: 999px; color: #fff; background: rgba(224, 71, 95, .7); animation: trPuls 1.8s ease-in-out infinite; }

.tr-dossier { padding: 20px 22px; border-color: rgba(224, 176, 74, .28); background: radial-gradient(80% 60% at 0% 0%, rgba(224, 176, 74, .1), transparent 60%), rgba(var(--flaeche-rgb), .85); }
.tr-dossierkopf { display: flex; align-items: center; gap: 14px; }
.tr-dossierkopf h2 { margin: 2px 0 0; font-size: clamp(22px, 3vw, 30px); color: #fff; }
.tr-dossierzu { margin-left: auto; align-self: flex-start; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; color: rgba(var(--hell-rgb), .6); border: 1px solid rgba(255, 255, 255, .12); transition: all .2s; }
.tr-dossierzu:hover { color: #fff; border-color: #e0b04a; transform: rotate(90deg); }
.tr-dossierwerte { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 18px; }
.tr-ring { position: relative; width: 136px; display: grid; justify-items: center; gap: 4px; }
.tr-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.tr-ringgrund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 9; }
.tr-ringwert {
  fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: var(--voll); stroke-dashoffset: var(--wert);
  filter: drop-shadow(0 0 6px var(--c)); animation: trRing 1.6s cubic-bezier(.2, .85, .2, 1) .2s backwards;
}
@keyframes trRing { from { stroke-dashoffset: var(--voll); } }
.tr-ringmitte { position: absolute; top: 0; left: 0; right: 0; height: 120px; display: grid; place-content: center; text-align: center; }
.tr-ringmitte strong { font: 700 20px ui-monospace, Consolas, monospace; color: #fff; }
.tr-ringmitte small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.tr-ringfuss { font-size: 11px; color: rgba(var(--hell-rgb), .5); }
.tr-sanktionszahlen { flex: 1 1 220px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-sz { padding: 10px; border-radius: 14px; text-align: center; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .25); animation: trAuf .5s cubic-bezier(.2, .85, .2, 1) .3s backwards; }
.tr-sz strong { display: block; font: 700 24px ui-monospace, Consolas, monospace; color: #fff; }
.tr-sz small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }
.tr-sz.offen { border-color: rgba(224, 163, 74, .35); }
.tr-sz.offen.warnt { border-color: rgba(224, 71, 95, .7); background: rgba(224, 71, 95, .12); animation: trAuf .5s cubic-bezier(.2, .85, .2, 1) .3s backwards, trWarnen 2.2s ease-in-out 1s infinite; }
.tr-sz.erledigt { border-color: rgba(126, 196, 139, .35); }
.tr-verwaltung { margin-top: 16px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .12); }
.tr-vs { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #fff; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); }
.tr-vs em { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .35); }
.tr-vs em.offen { color: #ffcf7a; } .tr-vs em.erledigt { color: #9be0a8; } .tr-vs em.aufgehoben { color: #b0a58c; }

.tr-neues { margin-top: 18px; border-radius: 16px; border: 1px solid rgba(224, 176, 74, .3); background: rgba(0, 0, 0, .2); overflow: hidden; }
.tr-neues summary { list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 600; color: #ffd98a; transition: background .2s; }
.tr-neues summary::-webkit-details-marker { display: none; }
.tr-neues summary span { display: inline-block; margin-right: 6px; transition: transform .3s; }
.tr-neues[open] summary span { transform: rotate(45deg); }
.tr-neues summary:hover { background: rgba(224, 176, 74, .08); }
.tr-neuform { padding: 4px 16px 16px; animation: trRubrik .4s cubic-bezier(.2, .85, .2, 1); }
.tr-zweier { display: grid; grid-template-columns: 180px 1fr; gap: 10px; margin-bottom: 8px; }
.tr-schalter { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; cursor: pointer; font-size: 13.5px; color: #fff; }
.tr-schalter input { position: absolute; opacity: 0; }
.tr-schalter span { position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .12); transition: background .25s; }
.tr-schalter span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.2, .9, .2, 1.4); }
.tr-schalter input:checked + span { background: #e0475f; box-shadow: 0 0 12px rgba(224, 71, 95, .6); }
.tr-schalter input:checked + span::after { transform: translateX(18px); }
.tr-schalter input:focus-visible + span { outline: 2px solid #e0b04a; }
.tr-sanktionsfelder { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(224, 71, 95, .35); background: rgba(224, 71, 95, .06); animation: trRubrik .35s cubic-bezier(.2, .85, .2, 1); }
.tr-sanktionsfelder[hidden] { display: none; }
.tr-artenwahl, .tr-statuswahl { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-artenwahl input, .tr-statuswahl input { position: absolute; opacity: 0; }
.tr-artenwahl span, .tr-statuswahl span { display: inline-block; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; color: rgba(var(--hell-rgb), .75); border: 1px solid color-mix(in srgb, var(--c, #e0b04a) 40%, transparent); background: rgba(0, 0, 0, .25); transition: all .2s; }
.tr-artenwahl input:checked + span { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); transform: scale(1.05); }
.tr-statuswahl input:checked + span { color: #fff; border-color: #e0b04a; background: rgba(224, 176, 74, .25); }
.tr-artenwahl input:focus-visible + span, .tr-statuswahl input:focus-visible + span { outline: 2px solid #e0b04a; }

.tr-gespraeche { position: relative; display: grid; gap: 12px; margin: 20px 0 0; padding: 0 0 0 28px; list-style: none; }
.tr-gespraeche::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #e0b04a, rgba(164, 20, 43, .4)); transform-origin: top; animation: geStrang 1s cubic-bezier(.4, .1, .2, 1) backwards; }
.tr-gespraech { position: relative; animation: trAuf .5s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; }
.tr-gpunkt { position: absolute; left: -26px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: #0b0906; border: 2px solid #e0b04a; box-shadow: 0 0 10px rgba(224, 176, 74, .5); }
.tr-gespraech.s-offen .tr-gpunkt { border-color: var(--s, #e0475f); box-shadow: 0 0 12px var(--s, #e0475f); animation: trPuls 1.8s ease-in-out infinite; }
.tr-gespraech.s-erledigt .tr-gpunkt { border-color: #7ec48b; background: #7ec48b; }
.tr-gkarte { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .25); transition: border-color .25s, transform .25s; }
.tr-gkarte:hover { border-color: rgba(224, 176, 74, .35); transform: translateX(3px); }
.tr-gespraech.tr-blitz .tr-gkarte, .auf-protokoll.auf-blitz { animation: trBlitz 1.6s ease-out .3s 2; }
@keyframes trBlitz { 30% { box-shadow: 0 0 0 3px rgba(224, 176, 74, .7), 0 0 30px rgba(224, 176, 74, .5); } }
.tr-gkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tr-gdatum { font-size: 11.5px; color: #ffd98a; }
.tr-gkopf strong { font-size: 15px; color: #fff; }
.tr-gtext { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(var(--hell-rgb), .82); word-break: break-word; }
.tr-gsanktion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; border-left: 3px solid var(--s, #e0475f); background: color-mix(in srgb, var(--s, #e0475f) 10%, transparent); }
.tr-gsart { font-size: 12.5px; font-weight: 700; color: #fff; }
.tr-gsstand { padding: 1px 8px; border-radius: 999px; font-size: 11px; background: rgba(0, 0, 0, .35); }
.tr-gespraech.s-offen .tr-gsstand { color: #ffcf7a; }
.tr-gespraech.s-erledigt .tr-gsstand { color: #9be0a8; }
.tr-gespraech.s-erledigt .tr-gsanktion { opacity: .8; }
.tr-gstext { flex-basis: 100%; font-size: 12.5px; color: rgba(var(--hell-rgb), .75); }
.tr-gsumschalten { margin: 0 0 0 auto; }
.tr-gsumschalten button { padding: 4px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; color: #fff; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .3); transition: all .2s; }
.tr-gsumschalten button:hover { border-color: #7ec48b; background: rgba(126, 196, 139, .2); }
.tr-gfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.tr-gfuss form { margin: 0 0 0 auto; }
.tr-gweg { border: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .2s, transform .2s; }
.tr-gweg:hover { opacity: 1; transform: scale(1.15); }

.tr-uebersicht { padding: 20px 22px; }
.tr-wahlhinweis { display: flex; align-items: center; gap: 14px; }
.tr-wahlpfeil { font-size: 28px; color: #e0b04a; animation: trWinken 1.6s ease-in-out infinite; }
@keyframes trWinken { 50% { transform: translateX(-8px); } }
.tr-juengste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tr-jung {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; text-decoration: none; color: inherit;
  border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--s, rgba(224, 176, 74, .6)); background: rgba(0, 0, 0, .25);
  animation: trAuf .5s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; transition: transform .25s, border-color .25s;
}
.tr-jung:hover { transform: translateY(-3px); border-color: rgba(224, 176, 74, .4); }
.tr-jungname { font-size: 13.5px; font-weight: 700; color: #fff; }
.tr-jungthema { font-size: 12.5px; color: rgba(var(--hell-rgb), .75); }
.tr-jungfuss { font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.tr-jungfuss b { color: #ffcf7a; font-weight: 600; }

@media (max-width: 900px) {
  .tr-held { grid-template-columns: 96px minmax(0, 1fr); }
  .tr-wappen { width: 96px; height: 96px; }
  .tr-kennzahlen { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .tr-protokoll { grid-template-columns: 1fr; }
  .tr-leute { position: static; max-height: 360px; }
}
@media (max-width: 600px) {
  .tr-held { grid-template-columns: 1fr; padding: 18px; }
  .tr-wappen { margin: 0 auto; }
  .tr-kennzahlen { grid-template-columns: 1fr 1fr; }
  .tr-reiterknopf { flex-direction: column; gap: 2px; font-size: 12px; padding: 8px 4px; }
  .tr-nachricht { max-width: 92%; }
  .tr-zweier { grid-template-columns: 1fr; }
  .tr-chat { height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-balken, .tr-schale, .tr-wappenring, .tr-held::after, .tr-live, .tr-oz, .tr-neu, .tr-wahlpfeil, .tr-dateizone b, .tr-chatleer span { animation: none; }
}

/* ══ Aufstellung ════════════════════════════════════════════════════
   Antreten: Grün der Reihe über dem Gold des Hauses. Im Kopf tritt eine
   Formation an, die Protokolle stehen als Karten mit Datumsblock. */
.auf-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 22px; align-items: center; margin-top: 22px; padding: 24px 26px; border-color: rgba(126, 196, 139, .3);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(126, 196, 139, .16), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(var(--gold-rgb), .1), transparent 60%),
    rgba(var(--flaeche-rgb), .8);
}
.auf-heldtext h1 { margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; background: linear-gradient(90deg, #fff, #b9f0c4 50%, #e0b04a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auf-kennzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.auf-kennzahl { min-width: 110px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(126, 196, 139, .3); background: linear-gradient(160deg, rgba(126, 196, 139, .14), rgba(0, 0, 0, .3)); animation: trAuf .55s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; transition: transform .25s; }
.auf-kennzahl:hover { transform: translateY(-3px); }
.auf-kennzahl strong { display: block; font: 700 22px ui-monospace, Consolas, monospace; color: #fff; }
.auf-kennzahl small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #9be0a8; }
.auf-nurlesen { margin: 12px 0 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .6); }
.auf-reihe { position: relative; display: grid; gap: 14px; justify-items: center; padding: 18px 0; perspective: 500px; }
.auf-glied { display: flex; gap: 14px; transform: rotateX(30deg); }
.auf-glied span {
  width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d6ffe0, #7ec48b 55%, #2d6b3a);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .8), 0 0 10px rgba(126, 196, 139, .45);
  animation: aufAntreten 1s cubic-bezier(.2, .9, .2, 1.3) calc(var(--r) * 180ms + var(--i) * 70ms) backwards, aufAtmen 3.2s ease-in-out calc(1.6s + var(--i) * 120ms) infinite;
}
.auf-glied:first-child span { background: radial-gradient(circle at 35% 30%, #fff1c9, #e0b04a 55%, #7a5414); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .8), 0 0 10px rgba(224, 176, 74, .5); }
@keyframes aufAntreten { from { opacity: 0; transform: translateX(-60px) scale(.4); } }
@keyframes aufAtmen { 50% { transform: translateY(-3px); } }
.auf-fahne { position: absolute; right: 8%; top: 0; font-size: 30px; animation: aufGruss 2.6s ease-in-out infinite; transform-origin: bottom left; }
@keyframes aufGruss { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } 90% { transform: rotate(6deg); } }

.auf-form { margin-top: 16px; padding: 18px 20px; border-color: rgba(126, 196, 139, .28); }
.auf-form.bearbeitet { border-color: rgba(224, 176, 74, .55); box-shadow: 0 0 24px -10px rgba(224, 176, 74, .6); }
.auf-formkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.auf-abbrechen { font-size: 13px; color: rgba(var(--hell-rgb), .6); }
.auf-zweier { display: grid; grid-template-columns: 200px 1fr; gap: 10px; }
.auf-zeilen { display: grid; gap: 10px; margin-top: 14px; }
.auf-zeile {
  position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 14px;
  border: 1px solid rgba(126, 196, 139, .22); background: rgba(0, 0, 0, .22);
  animation: trAuf .45s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; transition: border-color .2s;
}
.auf-zeile:focus-within { border-color: rgba(126, 196, 139, .6); box-shadow: 0 0 18px -8px rgba(126, 196, 139, .7); }
.auf-zeile.neu { animation: aufNeu .45s cubic-bezier(.2, .9, .2, 1.2); }
@keyframes aufNeu { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.auf-zeile.raus { transition: opacity .25s, transform .25s; opacity: 0; transform: translateX(30px); }
.auf-zeilennr { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 700 13px ui-monospace, Consolas, monospace; color: #0b0906; background: linear-gradient(135deg, #b9f0c4, #7ec48b); box-shadow: 0 0 12px rgba(126, 196, 139, .45); }
.auf-zeilenfelder { min-width: 0; }
.auf-zeileweg { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .3); cursor: pointer; color: rgba(var(--hell-rgb), .6); transition: all .2s; }
.auf-zeileweg:hover { color: #fff; border-color: #e0475f; background: rgba(224, 71, 95, .2); transform: rotate(90deg); }
.auf-formfuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; }
.auf-mehr span { display: inline-block; transition: transform .3s; }
.auf-mehr:hover span { transform: rotate(90deg); }

.auf-werkzeuge { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding: 10px; border-radius: 18px; border: 1px solid rgba(126, 196, 139, .22); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px); }
.auf-suche { flex: 1 1 260px; }
.auf-personfilter { flex: 0 1 240px; width: auto; }
.auf-treffer { font-size: 12.5px; color: rgba(var(--hell-rgb), .6); }
.auf-treffer strong { color: #9be0a8; font-family: ui-monospace, Consolas, monospace; }
.auf-liste { display: grid; gap: 14px; margin-top: 14px; }
.auf-protokoll {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(126, 196, 139, .2); background: linear-gradient(120deg, rgba(126, 196, 139, .06), rgba(var(--flaeche-rgb), .92) 40%);
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .9);
  animation: geKarteEin .6s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; transition: transform .3s cubic-bezier(.2, .85, .2, 1), border-color .3s;
}
.auf-protokoll[hidden] { display: none; }
.auf-protokoll.auf-rein { animation: geKarteEin .45s cubic-bezier(.2, .85, .2, 1) backwards; }
.auf-protokoll:hover { transform: translateY(-3px); border-color: rgba(126, 196, 139, .5); }
.auf-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 6px; text-align: center; background: linear-gradient(180deg, rgba(126, 196, 139, .2), rgba(0, 0, 0, .3)); border-right: 1px solid rgba(126, 196, 139, .2); }
.auf-tag { font: 700 32px/1 ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 14px rgba(126, 196, 139, .6); }
.auf-monat { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #9be0a8; }
.auf-wochentag { font-size: 10.5px; color: rgba(var(--hell-rgb), .5); }
.auf-inhalt { padding: 14px 16px; min-width: 0; }
.auf-protokollkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.auf-protokollkopf h3 { margin: 0; font-size: 17px; color: #fff; }
.auf-anzahl { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; color: #9be0a8; border: 1px solid rgba(126, 196, 139, .35); }
.auf-personen { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.auf-personen li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); animation: trAuf .45s cubic-bezier(.2, .85, .2, 1) calc(var(--d, 0ms) + 200ms + var(--j) * 60ms) backwards; }
.auf-bild { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 700 11.5px ui-monospace, Consolas, monospace; color: #0b0906; background: linear-gradient(135deg, #b9f0c4, #7ec48b); }
.auf-bild img { width: 100%; height: 100%; object-fit: cover; }
.auf-personen strong { font-size: 13.5px; color: #fff; }
.auf-personen strong small { font-weight: 400; font-size: 10.5px; color: rgba(var(--hell-rgb), .45); }
.auf-personen p { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: rgba(var(--hell-rgb), .8); word-break: break-word; }
.auf-personen p.auf-leer { color: rgba(var(--hell-rgb), .35); }
.auf-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.auf-taten { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.auf-taten a, .auf-taten button { font: inherit; font-size: 12px; color: #9be0a8; text-decoration: none; border: 0; background: none; cursor: pointer; padding: 0; }
.auf-taten button { color: rgba(224, 71, 95, .8); }
.auf-taten a:hover, .auf-taten button:hover { text-decoration: underline; }
.auf-taten form { margin: 0; }
@media (max-width: 700px) {
  .auf-held { grid-template-columns: 1fr; }
  .auf-reihe { order: -1; padding: 6px 0; }
  .auf-zweier { grid-template-columns: 1fr; }
  .auf-protokoll { grid-template-columns: 70px minmax(0, 1fr); }
  .auf-tag { font-size: 24px; }
  .auf-zeile { grid-template-columns: 28px 1fr auto; gap: 8px; }
  .auf-zeilennr { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .auf-glied span, .auf-fahne { animation: none; }
}

/* ══ Dashboard · Ranking: wer arbeitet wirklich? ════════════════════
   Ein Podest für die ersten drei, darunter die ganze Liste mit Balken,
   Tätigkeiten, Online-Zeit und dem Urteil (sehr aktiv … sammelt Zeit). */
.dash-rang { padding: 22px 24px; }
.dash-rangkopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dash-rangkopf > div { flex: 1 1 360px; }
.dash-rangzeit { display: inline-flex; gap: 3px; padding: 3px; border-radius: 13px; border: 1px solid rgba(255, 122, 69, .3); background: rgba(0, 0, 0, .25); }
.dash-rangzeit a { padding: 6px 12px; border-radius: 10px; font-size: 13px; text-decoration: none; color: rgba(var(--hell-rgb), .65); transition: color .2s, background .2s; }
.dash-rangzeit a:hover { color: #fff; }
.dash-rangzeit a.an { color: #fff; background: linear-gradient(135deg, rgba(255, 122, 69, .5), rgba(224, 176, 74, .3)); box-shadow: 0 0 14px rgba(255, 122, 69, .35); }
.dash-ranghinweis { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 9px 14px; border-radius: 12px; font-size: 13px; color: #ffd6a0; border: 1px solid rgba(224, 163, 74, .4); background: rgba(224, 163, 74, .1); }

.dash-podest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; max-width: 640px; margin: 26px auto 8px; }
.dash-platz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; animation: dashPlatz .8s cubic-bezier(.2, .9, .2, 1.2) backwards; }
.dash-platz.p1 { animation-delay: .35s; }
.dash-platz.p2 { animation-delay: .15s; }
.dash-platz.p3 { animation-delay: .5s; }
@keyframes dashPlatz { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.dash-krone { position: absolute; top: -26px; font-size: 24px; animation: dashKrone 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 210, 90, .8)); }
@keyframes dashKrone { 50% { transform: translateY(-4px) rotate(-6deg); } }
.dash-kreis.gross { width: 54px; height: 54px; font-size: 20px; box-shadow: 0 0 0 3px rgba(0, 0, 0, .4), 0 0 20px color-mix(in srgb, var(--c) 60%, transparent); }
.dash-platz.p1 .dash-kreis.gross { width: 64px; height: 64px; font-size: 24px; }
.dash-platzname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #fff; font-size: 14px; }
.dash-platzpunkte { font-size: 11.5px; color: rgba(var(--hell-rgb), .6); }
.dash-platzpunkte b { font: 700 15px ui-monospace, Consolas, monospace; color: #fff; }
.dash-sockel {
  position: relative; width: 100%; display: grid; place-items: start center; padding-top: 10px; border-radius: 14px 14px 4px 4px; overflow: hidden;
  font: 800 26px ui-monospace, Consolas, monospace; color: rgba(0, 0, 0, .55);
  transform-origin: bottom; animation: dashSockel 1s cubic-bezier(.2, .85, .2, 1) backwards; animation-delay: inherit;
}
.dash-platz.p1 .dash-sockel { height: 120px; background: linear-gradient(180deg, #ffe08a, #c9a227); box-shadow: 0 0 30px rgba(255, 210, 90, .45); }
.dash-platz.p2 .dash-sockel { height: 88px; background: linear-gradient(180deg, #e6ebf2, #9aa3b0); }
.dash-platz.p3 .dash-sockel { height: 64px; background: linear-gradient(180deg, #f0b98a, #a8693a); }
.dash-sockel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: dashGlanz 3.6s ease-in-out 1.4s infinite; }
@keyframes dashSockel { from { transform: scaleY(0); } }
@keyframes dashGlanz { 40%, 100% { transform: translateX(120%); } }
.dash-platz:hover .dash-kreis.gross { transform: scale(1.08); }

.dash-rangliste { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.dash-rangzeile {
  display: grid; grid-template-columns: 34px 38px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid var(--u); background: rgba(0, 0, 0, .22);
  animation: dashZeile .55s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; transition: transform .25s, border-color .25s, background .25s;
}
.dash-rangzeile:hover { transform: translateX(4px); background: rgba(255, 255, 255, .03); border-color: rgba(255, 122, 69, .35); border-left-color: var(--u); }
@keyframes dashZeile { from { opacity: 0; transform: translateY(10px); } }
.dash-rangnr { font: 800 16px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); text-align: center; }
.dash-rangzeile:nth-child(1) .dash-rangnr { color: #ffd25a; }
.dash-rangzeile:nth-child(2) .dash-rangnr { color: #d6dbe3; }
.dash-rangzeile:nth-child(3) .dash-rangnr { color: #e0a070; }
.dash-rangmitte { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dash-rangname { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dash-rangname a { font-weight: 700; color: #fff; text-decoration: none; }
.dash-rangname a:hover { text-decoration: underline; }
.dash-urteil { padding: 1px 9px; border-radius: 999px; font-size: 11px; color: #fff; border: 1px solid color-mix(in srgb, var(--u) 60%, transparent); background: color-mix(in srgb, var(--u) 22%, transparent); }
.dash-rangbalken { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dash-rangbalken i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--anteil); border-radius: 3px; background: linear-gradient(90deg, #ff7a45, #ffd25a); box-shadow: 0 0 10px rgba(255, 122, 69, .6); animation: dashBalken 1.2s cubic-bezier(.2, .85, .2, 1) calc(var(--d, 0ms) + 200ms) backwards; }
@keyframes dashBalken { from { width: 0; } }
.dash-rangteile { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-rangteile span { padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #fff; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.dash-rangteile small { font-size: 10px; color: rgba(var(--hell-rgb), .6); }
.dash-rangzahlen { display: grid; justify-items: end; gap: 1px; text-align: right; }
.dash-rangzahlen strong { font: 800 22px/1 ui-monospace, Consolas, monospace; color: #fff; }
.dash-rangzahlen small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #ffb38a; }
.dash-rangzahlen span { font-size: 11px; color: rgba(var(--hell-rgb), .55); white-space: nowrap; }
.dash-rangformel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 18px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .1); font-size: 11.5px; color: rgba(var(--hell-rgb), .5); }
.dash-rangformel b { color: #ffb38a; }
@media (max-width: 640px) {
  .dash-rangzeile { grid-template-columns: 26px 34px minmax(0, 1fr); }
  .dash-rangzahlen { grid-column: 2 / -1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; text-align: left; }
  .dash-podest { gap: 8px; }
  .dash-platz.p1 .dash-sockel { height: 96px; }
  .dash-platz.p2 .dash-sockel { height: 72px; }
  .dash-platz.p3 .dash-sockel { height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-krone, .dash-sockel::after { animation: none; }
}

/* ══ Erfassung — die neue Bühne ═════════════════════════════════════
   Kopf mit Trichter (Blätter fallen hinein, ein Ring zeigt, wie viel
   eingestuft ist), Kennzahlen, Fortschrittsbalken, eine klebende
   Werkzeugleiste, Tagesköpfe, Stempel auf eingestuften Karten und Karten,
   die beim Scrollen einfliegen. Alles unter .erf-buehne — die erf-Klassen
   auf anderen Seiten (Formular, Übernahme) bleiben unberührt. */
.erf-buehne .erf-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center;
  margin-top: 22px; padding: 26px 28px;
  border-color: rgba(var(--zweit-rgb), .3);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(62, 224, 143, .12), transparent 55%),
    radial-gradient(70% 120% at 0% 100%, rgba(var(--gold-rgb), .12), transparent 60%),
    rgba(var(--flaeche-rgb), .8);
}
.erf-buehne .erf-held::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  animation: erfRaster 14s linear infinite;
}
@keyframes erfRaster { to { background-position: 460px 0; } }
.erf-heldtext { position: relative; z-index: 1; min-width: 0; }
.erf-heldtext h1 {
  margin: 4px 0 6px; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.02;
  background: linear-gradient(90deg, #fff, #b9ffd9 45%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.erf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin: 16px 0 12px; }
.erf-kpi {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i z' 's s'; gap: 2px 8px; align-items: center;
  padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: erfKpi .55s cubic-bezier(.2, .9, .2, 1.15) var(--d, 0ms) backwards; transition: transform .25s, box-shadow .25s;
}
.erf-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--c) 70%, transparent); }
.erf-kpi i { grid-area: i; font-style: normal; font-size: 15px; color: var(--c); }
.erf-kpi strong { grid-area: z; font: 700 22px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.erf-kpi small { grid-area: s; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.erf-kpi.warnt { animation: erfKpi .55s cubic-bezier(.2, .9, .2, 1.15) var(--d, 0ms) backwards, erfWarnt 2.4s ease-in-out 1s infinite; }
@keyframes erfKpi { from { opacity: 0; transform: translateY(14px) scale(.95); } }
@keyframes erfWarnt { 50% { box-shadow: 0 0 18px rgba(224, 163, 74, .5); border-color: rgba(224, 163, 74, .8); } }
.erf-fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.erf-fortschrittbalken { position: relative; flex: 1 1 220px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.erf-fortschrittbalken i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; animation: erfBalken 1.4s cubic-bezier(.2, .85, .2, 1) .3s backwards; }
.erf-fortschrittbalken i.eingestuft { background: linear-gradient(90deg, #3ee08f, #b9ffd9); box-shadow: 0 0 10px rgba(62, 224, 143, .6); }
.erf-fortschrittbalken i.uebertragen { background: repeating-linear-gradient(45deg, #3ee0ff 0 6px, #1fb6d4 6px 12px); opacity: .9; animation-delay: .7s; }
@keyframes erfBalken { from { width: 0; } }
.erf-fortschrittwort { font-size: 12px; color: rgba(var(--hell-rgb), .6); }
.erf-fortschrittwort b { color: #fff; font-family: ui-monospace, Consolas, monospace; }

/* Der Trichter */
.erf-trichter { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.erf-trichter svg { position: absolute; inset: 10px; width: 180px; height: 180px; overflow: visible; }
.erf-trichterbahn { fill: none; stroke: rgba(var(--zweit-rgb), .3); stroke-width: 1; stroke-dasharray: 3 7; transform-origin: 80px 80px; animation: erfDrehen 26s linear infinite; }
@keyframes erfDrehen { to { transform: rotate(360deg); } }
.erf-trichtergrund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 9; }
.erf-trichterwert {
  fill: none; stroke: url(#erfRing); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 80px 80px;
  stroke-dasharray: var(--anteil) 100; filter: drop-shadow(0 0 6px rgba(62, 224, 143, .7));
  animation: erfRingLauf 1.8s cubic-bezier(.2, .85, .2, 1) .2s backwards;
}
.erf-trichter { --anteil: 0; }
@keyframes erfRingLauf { from { stroke-dasharray: 0 100; } }
.erf-radar { transform-origin: 80px 80px; animation: erfDrehen 4.5s linear infinite; }
.erf-radar path { fill: url(#erfRing); opacity: .16; }
.erf-trichterkern { fill: rgba(0, 0, 0, .55); stroke: rgba(var(--gold-rgb), .35); stroke-width: 1; }
.erf-trichterzahl { fill: #fff; font: 700 30px ui-monospace, Consolas, monospace; text-anchor: middle; dominant-baseline: central; }
.erf-trichterklein { fill: #e0a34a; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; }
.erf-blatt { position: absolute; z-index: 2; left: 50%; top: -8px; font-size: 20px; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); animation: erfFallen 5.2s cubic-bezier(.5, 0, .7, 1) infinite; }
.erf-blatt.b1 { --x: -46px; animation-delay: 0s; }
.erf-blatt.b2 { --x: 34px; animation-delay: 1.3s; }
.erf-blatt.b3 { --x: -14px; animation-delay: 2.6s; }
.erf-blatt.b4 { --x: 52px; animation-delay: 3.9s; }
@keyframes erfFallen {
  0% { opacity: 0; transform: translate(var(--x), -10px) rotate(-20deg) scale(1); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(-50%, 86px) rotate(200deg) scale(.7); }
  85%, 100% { opacity: 0; transform: translate(-50%, 96px) rotate(260deg) scale(.2); }
}

/* Leiste mit dem großen Knopf */
.erf-aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.erf-rechte { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .55); }
.erf-neuknopf { position: relative; overflow: hidden; padding: 12px 22px !important; font-size: 15px !important; box-shadow: 0 10px 26px -12px rgba(var(--gold-rgb), .9); }
.erf-neuknopf::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: erfGlanz 4s ease-in-out 1s infinite; }
@keyframes erfGlanz { 30%, 100% { transform: translateX(120%); } }
.erf-neuknopf .plus { display: inline-block; transition: transform .35s cubic-bezier(.2, .9, .2, 1.4); }
.erf-neuknopf.offen .plus { transform: rotate(45deg); }

/* Das Formular als Schreibfeld */
.erf-buehne .erf-komponist { position: relative; border-color: rgba(62, 224, 143, .35); box-shadow: 0 0 34px -18px rgba(62, 224, 143, .8); animation: erfKomponist .45s cubic-bezier(.2, .9, .2, 1.05); }
@keyframes erfKomponist { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
.erf-komponistkopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.erf-komponistzeichen { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #0b0906; background: linear-gradient(135deg, #b9ffd9, #3ee08f); animation: erfSchreiben 2.2s ease-in-out infinite; }
@keyframes erfSchreiben { 50% { transform: rotate(-12deg) translateY(-2px); } }
.erf-zeichenzahl { margin-left: auto; font-size: 11px; color: rgba(var(--hell-rgb), .45); transition: color .2s; }
.erf-zeichenzahl.knapp { color: #e0a34a; }
.erf-buehne .erf-komponist textarea:focus { box-shadow: 0 0 0 3px rgba(62, 224, 143, .18); border-color: #3ee08f; }
.erf-buehne .erf-ablage .erf-ablagezeichen { transition: transform .35s cubic-bezier(.2, .9, .2, 1.5); }
.erf-buehne .erf-ablage:hover .erf-ablagezeichen, .erf-buehne .erf-ablage.drueber .erf-ablagezeichen { transform: translateY(-4px) scale(1.15) rotate(-6deg); }
.erf-buehne .erf-ablage.gefuellt { border-color: rgba(62, 224, 143, .6); background: rgba(62, 224, 143, .07); }

/* Werkzeugleiste */
.erf-buehne .erf-werkzeug {
  position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 18px; padding: 10px; border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb), .2); background: rgba(var(--kopf-rgb), .9); backdrop-filter: blur(10px);
}
.erf-suchfeld { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), .25); background: rgba(0, 0, 0, .25); color: rgba(var(--zweit-rgb), .8); transition: border-color .2s, box-shadow .2s; }
.erf-suchfeld:focus-within { border-color: #3ee08f; box-shadow: 0 0 0 3px rgba(62, 224, 143, .14); }
.erf-suchfeld input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; }
.erf-suchfeld kbd { padding: 1px 7px; border-radius: 6px; font: 600 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .55); border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); }
.erf-buehne .erf-werkzeug .sank-pillen { flex: 1 1 100%; }
.erf-buehne .erf-werkzeug .sank-pille { transition: transform .2s, background .2s, box-shadow .2s; }
.erf-buehne .erf-werkzeug .sank-pille:hover { transform: translateY(-1px); }
.erf-buehne .erf-werkzeug .sank-pille.an { box-shadow: 0 0 14px color-mix(in srgb, var(--c, var(--gold)) 40%, transparent); }
.erf-eingang { display: flex; align-items: center; gap: 4px; margin-top: 22px; }

/* Tagesköpfe */
.erf-tagkopf { display: flex; align-items: center; gap: 10px; margin: 10px 0 -2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--hell-rgb), .6); }
.erf-tagkopf.hidden { display: none; }
.erf-tagkopf span { padding: 3px 12px; border-radius: 999px; font-weight: 700; color: #fff; border: 1px solid rgba(var(--gold-rgb), .35); background: rgba(var(--gold-rgb), .1); }
.erf-tagkopf i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .4), transparent); }
.erf-tagkopf small { font-size: 10.5px; letter-spacing: .06em; text-transform: none; color: rgba(var(--hell-rgb), .45); }

/* Karten */
.erf-buehne .erf-karte {
  border-left-width: 4px; transition: transform .3s cubic-bezier(.2, .85, .2, 1), box-shadow .3s, border-color .3s;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 7%, transparent), rgba(var(--flaeche-rgb), .9) 45%);
}
.erf-buehne .erf-karte:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .95), 0 0 24px -14px var(--c); }
.erf-buehne .erf-karte.offen { border-left-style: dashed; }
.erf-buehne .erf-karte.offen .erf-stufe { animation: erfOffenPuls 2s ease-in-out infinite; }
@keyframes erfOffenPuls { 50% { box-shadow: 0 0 12px rgba(224, 163, 74, .55); } }
.erf-stempel {
  position: absolute; right: 18px; top: 46px; z-index: 0; padding: 4px 12px; border-radius: 6px; pointer-events: none;
  font: 800 14px/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; color: var(--c);
  border: 2px solid var(--c); opacity: .22; transform: rotate(-12deg);
  animation: erfStempel .5s cubic-bezier(.2, .9, .2, 1.6) .4s backwards;
}
.erf-buehne .erf-karte.v3-da .erf-stempel { animation: erfStempel .5s cubic-bezier(.2, .9, .2, 1.6) .35s backwards; }
@keyframes erfStempel { from { opacity: 0; transform: rotate(-30deg) scale(2.2); } 70% { opacity: .35; } }
.erf-buehne .erf-karte > *:not(.erf-stempel) { position: relative; z-index: 1; }
.erf-buehne .erf-foto img { transition: transform .6s cubic-bezier(.2, .85, .2, 1), filter .4s; }
.erf-buehne .erf-stufenknopf { transition: transform .2s, color .2s, border-color .2s, background .2s, box-shadow .2s; }
.erf-buehne .erf-stufenknopf:hover { transform: translateY(-1px); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.erf-buehne .erf-stufenknopf.an { box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }

@media (max-width: 760px) {
  .erf-buehne .erf-held { grid-template-columns: 1fr; padding: 20px; }
  .erf-trichter { order: -1; width: 150px; height: 150px; }
  .erf-trichter svg { inset: 8px; width: 134px; height: 134px; }
  .erf-stempel { top: 52px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .erf-blatt, .erf-radar, .erf-trichterbahn, .erf-neuknopf::after, .erf-komponistzeichen, .erf-buehne .erf-held::before, .erf-buehne .erf-karte.offen .erf-stufe { animation: none; }
  .erf-blatt { display: none; }
}

/* ── Erfassung: „✔ Erledigt" ── */
.erf-buehne .erf-erledigtform { margin: 0; }
.erf-buehne .erf-erledigt { position: relative; overflow: hidden; }
.erf-buehne .erf-erledigt.bereit {
  color: #fff; border-color: #3ee0ff; background: rgba(62, 224, 255, .16);
  animation: erfErledigtBereit 2.2s ease-in-out infinite;
}
@keyframes erfErledigtBereit { 50% { box-shadow: 0 0 16px rgba(62, 224, 255, .55); } }
.erf-buehne .erf-erledigt::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.erf-buehne .erf-erledigt:hover::after { transform: translateX(120%); }
.erf-buehne .erf-karte.geht-erledigt { transition: opacity .35s, transform .35s; opacity: 0; transform: translateX(40px) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .erf-buehne .erf-erledigt.bereit { animation: none; }
}

/* ══ Startseite: heute steht ein Gangwar an ═════════════════════════
   Ein glühendes Banner zwischen Begrüßung und Schwarzem Brett. Der
   Rand pulsiert, die Schwerter schlagen aneinander, ein Lichtstreif
   zieht darüber. Eingetragen → grün beruhigt; kurz vor Beginn → schneller. */
.start-gw {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  margin-top: 18px; padding: 18px 22px; border-radius: 20px; text-decoration: none; color: inherit;
  border: 1px solid rgba(255, 77, 106, .55);
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(255, 77, 106, .28), transparent 55%),
    linear-gradient(110deg, rgba(60, 8, 18, .92), rgba(var(--flaeche-rgb), .92) 60%);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .95), 0 0 0 0 rgba(255, 77, 106, .6);
  animation: startGwEin .7s cubic-bezier(.2, .9, .2, 1.1) var(--d, 0ms) backwards, startGwRand 2.4s ease-in-out 1s infinite;
  transition: transform .3s cubic-bezier(.2, .85, .2, 1), border-color .3s;
}
body.luxus.edel > .wrap > a.start-gw { animation: startGwEin .7s cubic-bezier(.2, .9, .2, 1.1) var(--d, 0ms) backwards, startGwRand 2.4s ease-in-out 1s infinite; }
.start-gw:hover { transform: translateY(-3px); border-color: #ff4d6a; }
@keyframes startGwEin { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes startGwRand { 50% { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .95), 0 0 26px 2px rgba(255, 77, 106, .45); } }
.start-gw.gleich { animation-duration: .7s, 1.1s; }
.start-gw-glut {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .1) 48%, rgba(255, 77, 106, .22) 52%, transparent 65%);
  transform: translateX(-100%); animation: startGwGlanz 3.6s ease-in-out 1.2s infinite;
}
@keyframes startGwGlanz { 45%, 100% { transform: translateX(100%); } }
.start-gw-zeichen {
  position: relative; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
  font-size: 30px; color: #fff; background: radial-gradient(circle, rgba(255, 77, 106, .55), rgba(255, 77, 106, .08) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 160, .5), 0 0 22px rgba(255, 77, 106, .55);
}
.start-gw-zeichen::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(255, 77, 106, .55);
  animation: startGwKreis 9s linear infinite;
}
@keyframes startGwKreis { to { transform: rotate(360deg); } }
.start-gw-zeichen span { display: inline-block; animation: startGwSchlag 1.6s ease-in-out infinite; filter: drop-shadow(0 0 8px #ff4d6a); }
@keyframes startGwSchlag { 0%, 60%, 100% { transform: scale(1) rotate(0); } 70% { transform: scale(1.25) rotate(-12deg); } 80% { transform: scale(1.1) rotate(8deg); } }
.start-gw-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.start-gw-marke { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff8fa3; }
.start-gw-puls { width: 9px; height: 9px; border-radius: 50%; background: #ff4d6a; box-shadow: 0 0 0 0 rgba(255, 77, 106, .7); animation: startGwPuls 1.4s ease-out infinite; }
@keyframes startGwPuls { to { box-shadow: 0 0 0 10px rgba(255, 77, 106, 0); } }
.start-gw-paarung { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.15; color: #fff; word-break: break-word; }
.start-gw-paarung em { font-style: normal; font-size: .7em; color: #ff8fa3; margin: 0 4px; }
.start-gw-angaben { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: rgba(var(--hell-rgb), .75); }
.start-gw-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.start-gw-uhr { font: 700 15px ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 10px rgba(255, 77, 106, .7); white-space: nowrap; }
.start-gw-knopf {
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: #fff;
  background: linear-gradient(135deg, #ff4d6a, #b0203a); box-shadow: 0 8px 20px -8px rgba(255, 77, 106, .9);
  transition: transform .25s, box-shadow .25s;
}
.start-gw:hover .start-gw-knopf { transform: translateX(4px); box-shadow: 0 0 20px rgba(255, 77, 106, .8); }
.start-gw.dabei { border-color: rgba(63, 227, 160, .55); background: radial-gradient(120% 160% at 0% 50%, rgba(63, 227, 160, .18), transparent 55%), linear-gradient(110deg, rgba(10, 40, 30, .9), rgba(var(--flaeche-rgb), .92) 60%); }
.start-gw.dabei .start-gw-knopf { background: linear-gradient(135deg, #3fe3a0, #1f9a6a); color: #062016; box-shadow: 0 8px 20px -8px rgba(63, 227, 160, .9); }
.start-gw.laeuft .start-gw-uhr { color: #f5b84a; text-shadow: none; }
@media (max-width: 640px) {
  .start-gw { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .start-gw-zeichen { width: 50px; height: 50px; font-size: 24px; }
  .start-gw-rechts { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .start-gw, body.luxus.edel > .wrap > a.start-gw, .start-gw-glut, .start-gw-zeichen::after, .start-gw-zeichen span, .start-gw-puls { animation: none; }
}

/* Sprung von der Startseite: der Kampf landet unter dem klebenden Kopf, nicht dahinter */
.gw-naechster { scroll-margin-top: 220px; }

/* ══ Startseite: was ansteht — für dich ══════════════════════════════
   Gangwar-Banner mit „Ich bin dabei", die eigenen Aufträge als Notizen
   (je dringender, desto lebhafter) und die eigenen Termine. Was vorbei
   ist, gleitet hinaus (.geht). */
.start-fuermich { display: grid; gap: 14px; margin-top: 18px; }
.start-fuermich .start-gw { margin-top: 0; }
.start-gw button.start-gw-knopf { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.start-gw-form { margin: 0; }
.start-gw-knopf .ist { display: none; }
.start-gw.dabei .start-gw-knopf .ja { display: none; }
.start-gw.dabei .start-gw-knopf .ist { display: inline; }
.start-gw-link { font-size: 12px; color: rgba(var(--hell-rgb), .65); text-decoration: none; }
.start-gw-link:hover { color: #fff; text-decoration: underline; }
.start-gw.wartet { opacity: .7; pointer-events: none; }
.start-gw.jubel { animation: startGwJubel .7s cubic-bezier(.2, .9, .2, 1.3); }
@keyframes startGwJubel { 30% { transform: scale(1.02); box-shadow: 0 0 40px rgba(63, 227, 160, .7); } }
.start-gw.geht, .start-termin.geht { transition: opacity .55s, transform .55s, max-height .55s; opacity: 0; transform: translateX(40px); }
.start-gw.heute .start-gw-marke { color: #ffb3c0; }

.start-spalten { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.start-spalten.eine { grid-template-columns: minmax(0, 1fr); }
.start-block { padding: 16px 18px; }
.start-blockkopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.start-blockzeichen { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 17px; background: rgba(var(--gold-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); }
.start-blockzahl { min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center; font: 700 12px/1.5 ui-monospace, Consolas, monospace; color: #fff; background: rgba(var(--gold-rgb), .25); }
.start-blocklink { margin-left: auto; font-size: 12px; color: var(--gold); text-decoration: none; }
.start-blocklink:hover { text-decoration: underline; }

/* Die Auftrags-Notizen */
.start-zettel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.start-auftrag {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 12px; border-radius: 6px 6px 14px 6px;
  text-decoration: none; color: inherit; transform: rotate(calc(var(--neig, 0deg) * .6));
  border: 1px solid rgba(var(--gold-rgb), .22);
  background: linear-gradient(170deg, rgba(255, 231, 168, .1), rgba(255, 231, 168, .02) 55%), rgba(var(--flaeche-rgb), .95);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .95);
  animation: startZettelEin .6s cubic-bezier(.2, .9, .2, 1.15) var(--d, 0ms) backwards;
  transition: transform .3s cubic-bezier(.2, .85, .2, 1), box-shadow .3s, border-color .3s;
}
.start-auftrag:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 22px 36px -18px rgba(0, 0, 0, .95), 0 0 22px -10px rgba(var(--gold-rgb), .7); }
@keyframes startZettelEin { from { opacity: 0; transform: translateY(-18px) rotate(-6deg) scale(.95); } }
.start-auftragnadel { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--nadel, #c9a227) 55%, #3a2a08); box-shadow: 0 3px 4px rgba(0, 0, 0, .6); }
.start-auftragkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.start-auftragprio { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--hell-rgb), .8); border: 1px solid rgba(255, 255, 255, .15); }
.start-auftragneu { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0b0906; background: #3fe3a0; animation: startNeu 1.6s ease-in-out infinite; }
@keyframes startNeu { 50% { box-shadow: 0 0 12px rgba(63, 227, 160, .8); } }
.start-auftragstand { margin-left: auto; font-size: 10px; letter-spacing: .08em; color: rgba(var(--hell-rgb), .5); }
.start-auftragtitel { font-size: 15px; line-height: 1.25; color: #fff; word-break: break-word; }
.start-auftragtext { font-size: 12.5px; line-height: 1.5; color: rgba(var(--hell-rgb), .72); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.start-auftragfrist { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: rgba(var(--hell-rgb), .85); border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .3); }
.start-auftragfrist.bald { color: #ffd98a; border-color: rgba(224, 176, 74, .5); }
.start-auftragfrist.heute { color: #ffb38a; border-color: rgba(255, 122, 69, .6); background: rgba(255, 122, 69, .12); }
.start-auftragfrist.ueberfaellig { color: #fff; border-color: #ff4d6a; background: rgba(255, 77, 106, .35); animation: startUeberfaellig 1s ease-in-out infinite; }
@keyframes startUeberfaellig { 50% { box-shadow: 0 0 12px rgba(255, 77, 106, .8); } }
.start-auftragweiter { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--gold); }
.start-auftragweiter span { display: inline-block; transition: transform .25s; }
.start-auftrag:hover .start-auftragweiter span { transform: translateX(4px); }
/* Priorität: von ruhig bis Alarm */
.start-auftrag.prio-niedrig { --nadel: #8a8f98; opacity: .92; }
.start-auftrag.prio-normal { --nadel: #c9a227; }
.start-auftrag.prio-hoch { --nadel: #f08a4b; border-color: rgba(240, 138, 75, .5); animation: startZettelEin .6s cubic-bezier(.2, .9, .2, 1.15) var(--d, 0ms) backwards, prioHochGlut 2.6s ease-in-out 1s infinite; }
.start-auftrag.prio-hoch .start-auftragprio { color: #ffcf9a; border-color: rgba(240, 138, 75, .55); background: rgba(240, 138, 75, .12); }
.start-auftrag.prio-dringend {
  --nadel: #ff4d6a; border: 2px solid #ff4d6a;
  background: linear-gradient(170deg, rgba(255, 77, 106, .2), rgba(255, 77, 106, .04) 60%), rgba(var(--flaeche-rgb), .96);
  animation: startZettelEin .6s cubic-bezier(.2, .9, .2, 1.15) var(--d, 0ms) backwards, prioDringendPuls 1.15s ease-in-out .6s infinite;
}
.start-auftrag.prio-dringend .start-auftragprio { color: #fff; border-color: #ff4d6a; background: #e0254a; animation: prioFlackern 1.3s steps(2, end) infinite; }
.start-auftrag.frist-ueberfaellig { border-color: #ff4d6a; }

/* Die Termine */
.start-terminliste { display: grid; gap: 8px; }
.start-termin {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 14px; text-decoration: none; color: inherit; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 28%, rgba(255, 255, 255, .06)); border-left: 3px solid var(--c);
  background: rgba(0, 0, 0, .25);
  animation: startTerminEin .5s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; transition: transform .25s, border-color .25s, background .25s;
}
.start-termin:hover { transform: translateX(4px); background: rgba(255, 255, 255, .04); }
@keyframes startTerminEin { from { opacity: 0; transform: translateX(-14px); } }
.start-termintag { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, rgba(0, 0, 0, .3)); }
.start-termintag b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.start-termintag span { font: 600 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .65); }
.start-termin.heute .start-termintag { background: linear-gradient(160deg, rgba(var(--gold-rgb), .4), rgba(var(--gold-rgb), .12)); }
.start-termintext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.start-termintext strong { font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-termintext small { font-size: 11.5px; color: rgba(var(--hell-rgb), .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-terminuhr { font: 600 11.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .75); white-space: nowrap; text-align: right; }
.start-termin.laeuft { border-color: rgba(63, 227, 160, .55); }
.start-termin.laeuft::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #3fe3a0, transparent); animation: startLaeuft 2s linear infinite; }
.start-termin.laeuft .start-terminuhr { color: #3fe3a0; }
@keyframes startLaeuft { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (max-width: 860px) {
  .start-spalten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .start-termin { grid-template-columns: 48px minmax(0, 1fr); }
  .start-terminuhr { grid-column: 2; text-align: left; }
}

/* ══ Aufträge: Priorität sichtbar machen ═════════════════════════════
   Niedrig ruht, Normal atmet leise, Hoch glüht bernsteinfarben, Dringend
   steht rot umrandet und pulsiert mit Warnstreifen. Überfällige Fristen
   färben jede Karte rot. Erledigtes bleibt ruhig. */
.af-bereich .auftrag-karte.prio-niedrig { border-color: rgba(255, 255, 255, .08); }
.af-bereich .auftrag-karte.prio-niedrig::before { opacity: .45; }
.af-bereich .auftrag-karte.prio-normal::before { animation: prioAtmen 4.5s ease-in-out infinite; }
.af-bereich .auftrag-karte.prio-hoch {
  border-color: rgba(240, 138, 75, .45);
  animation: afRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards, prioHochGlut 2.6s ease-in-out 1s infinite;
}
.af-bereich .auftrag-karte.prio-hoch .auftrag-icon { animation: prioWippen 3s ease-in-out infinite; }
.af-bereich .auftrag-karte.prio-dringend {
  border: 2px solid #ff4d6a;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 77, 106, .07) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(60, 8, 18, .92), rgba(var(--kopf-rgb), .95));
  background-size: 40px 40px, auto;
  animation: afRein .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards, prioDringendPuls 1.15s ease-in-out .5s infinite, prioStreifen 1.6s linear infinite;
}
.af-bereich .auftrag-karte.prio-dringend::before { width: 4px; background: linear-gradient(180deg, #ff8a5c, #ff4d6a); box-shadow: 0 0 14px #ff4d6a; animation: prioFlackern 1.3s steps(2, end) infinite; }
.af-bereich .auftrag-karte.prio-dringend .auftrag-icon { animation: prioZittern .9s ease-in-out infinite; }
.af-bereich .auftrag-karte.prio-dringend .auftrag-prio.dringend { color: #fff; background: #e0254a; border-color: #ff4d6a; animation: prioFlackern 1.3s steps(2, end) infinite; }
.af-bereich .auftrag-karte.frist-ueberfaellig { border-color: #ff4d6a; }
.af-bereich .auftrag-karte.ist-erledigt { opacity: .78; }
.auftrag-frist { font-variant-numeric: tabular-nums; }
.auftrag-frist.bald { color: #ffd98a !important; border-color: rgba(224, 176, 74, .5) !important; }
.auftrag-frist.heute { color: #ffb38a !important; border-color: rgba(255, 122, 69, .6) !important; background: rgba(255, 122, 69, .12) !important; }
.auftrag-frist.ueberfaellig { color: #fff !important; border-color: #ff4d6a !important; background: rgba(255, 77, 106, .35) !important; animation: startUeberfaellig 1s ease-in-out infinite; }
@keyframes prioAtmen { 50% { opacity: .55; } }
@keyframes prioHochGlut { 50% { box-shadow: 0 0 0 1px rgba(240, 138, 75, .45), 0 0 22px -6px rgba(240, 138, 75, .6); } }
@keyframes prioDringendPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 106, .55), 0 14px 30px -18px rgba(0, 0, 0, .9); }
  50% { box-shadow: 0 0 0 4px rgba(255, 77, 106, .18), 0 0 30px 2px rgba(255, 77, 106, .55); }
}
@keyframes prioStreifen { to { background-position: 40px 0, 0 0; } }
@keyframes prioFlackern { 50% { opacity: .65; } }
@keyframes prioWippen { 50% { transform: rotate(-6deg) scale(1.05); } }
@keyframes prioZittern { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-1px, 1px) rotate(-6deg); } 40% { transform: translate(1px, -1px) rotate(6deg); } 60% { transform: translate(-1px, 0) rotate(-4deg); } 80% { transform: translate(1px, 1px) rotate(3deg); } }

/* Die Auftragsakte selbst: Kopf nach Priorität, darunter die Frist */
.ak-kopf.ak-prio-hoch { box-shadow: 0 0 0 1px rgba(240, 138, 75, .45); animation: akAuf .5s cubic-bezier(.2,.8,.3,1) both, prioHochGlut 2.6s ease-in-out .5s infinite; }
.ak-kopf.ak-prio-dringend { border: 2px solid #ff4d6a; animation: akAuf .5s cubic-bezier(.2,.8,.3,1) both, prioDringendPuls 1.15s ease-in-out .5s infinite; }
.ak-kopf.ak-prio-dringend::after {
  content: 'DRINGEND'; position: absolute; right: 18px; top: 16px; z-index: 3; padding: 4px 12px; border-radius: 6px;
  font: 800 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; color: #fff; background: #e0254a;
  box-shadow: 0 0 16px rgba(255, 77, 106, .8); animation: prioFlackern 1.3s steps(2, end) infinite;
}
.ak-frist {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: 16px;
  border: 1px solid rgba(var(--gold-rgb), .3); background: linear-gradient(90deg, rgba(var(--gold-rgb), .12), rgba(0, 0, 0, .25));
}
.ak-fristuhr { font-size: 22px; animation: prioWippen 2.4s ease-in-out infinite; }
.ak-fristtext { display: flex; flex-direction: column; }
.ak-fristtext small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hell-rgb), .55); }
.ak-fristtext strong { font-size: 15px; color: #fff; }
.ak-fristrest { margin-left: auto; padding: 4px 12px; border-radius: 999px; font: 600 12.5px ui-monospace, Consolas, monospace; color: #fff; background: rgba(0, 0, 0, .35); }
.ak-frist.bald { border-color: rgba(224, 176, 74, .6); }
.ak-frist.heute { border-color: rgba(255, 122, 69, .7); background: linear-gradient(90deg, rgba(255, 122, 69, .18), rgba(0, 0, 0, .25)); }
.ak-frist.ueberfaellig { border-color: #ff4d6a; background: linear-gradient(90deg, rgba(255, 77, 106, .3), rgba(0, 0, 0, .25)); animation: prioDringendPuls 1.15s ease-in-out infinite; }
.ak-frist.ueberfaellig .ak-fristrest { background: #e0254a; }
@media (prefers-reduced-motion: reduce) {
  .start-auftrag, .start-auftragneu, .start-auftragfrist, .start-termin, .start-termin.laeuft::after,
  .af-bereich .auftrag-karte, .af-bereich .auftrag-karte::before, .af-bereich .auftrag-karte .auftrag-icon, .auftrag-frist,
  .ak-kopf, .ak-kopf::after, .ak-frist, .ak-fristuhr { animation: none !important; }
}

/* ══ Große Ereignisakte: Werkbank-Kopf, Lagebild, Ereignisse mit Inhalt,
   Gesamtchronik ═════════════════════════════════════════════════════ */
.ge-wbzu {
  margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; text-decoration: none;
  color: rgba(var(--hell-rgb), .7); border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); transition: all .25s;
}
.ge-wbzu:hover { color: #fff; border-color: #ff5fd2; transform: rotate(90deg); }
.ge-wbkopf .ge-wbsuche { order: 3; flex-basis: 100%; }
.ge-wbabbruch { margin-left: auto; }

.ge-lagezahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 8px; margin-top: 14px; }
.ge-lagezahl {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i z' 's s'; gap: 2px 8px; align-items: center;
  padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0, 0, 0, .3));
  animation: geKarteEin .55s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards;
}
.ge-lagezahl i { grid-area: i; font-style: normal; font-size: 15px; }
.ge-lagezahl strong { grid-area: z; font: 700 21px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.ge-lagezahl strong.klein { font-size: 14px; }
.ge-lagezahl small { grid-area: s; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.ge-lageraster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 10px; }
.ge-lageraster .ge-verbundflaeche { margin: 0; }
.ge-lagelisten { display: grid; gap: 14px; }
.ge-lageliste .label { margin: 0 0 6px; }
.ge-lagechips { display: flex; flex-wrap: wrap; gap: 6px; }
.ge-lagechips > * {
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 95, 210, .35); background: rgba(255, 95, 210, .08);
  animation: geGlied .45s cubic-bezier(.2, .9, .2, 1.3) calc(300ms + var(--j, 0) * 60ms) backwards; transition: background .2s, box-shadow .2s;
}
.ge-lagechips a:hover { background: rgba(255, 95, 210, .22); box-shadow: 0 0 14px rgba(255, 95, 210, .4); }
.ge-lageleer { margin: 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .45); }
.ge-verbundleer strong { color: #fff; }
.ge-verbundleer .btn { margin-top: 10px; }

.ge-ereignisse, .ge-gesamt { margin-top: 18px; padding: 22px 24px 24px; border-color: rgba(176, 107, 255, .28); }
.ge-ereignisse .ge-gliedkarte { display: block; padding: 0; overflow: hidden; }
.ge-ereignisse .ge-gliedkarte:hover { transform: none; }
.ge-gliedoben { display: flex; align-items: stretch; gap: 14px; padding: 10px; }
.ge-gliedoben .ge-gliedbild { text-decoration: none; }
.ge-ereignisse .ge-gliedtitel { color: #fff; text-decoration: none; font-weight: 700; }
.ge-ereignisse .ge-gliedtitel:hover { color: var(--c); }
.ge-ereignisse .ge-gliedpfeil { text-decoration: none; padding: 0 6px; }
.ge-ereignisse .ge-gliedkarte:hover .ge-gliedpfeil { transform: translateX(4px); }
.ge-gliedinhalt { display: grid; gap: 10px; padding: 0 14px 14px 116px; }
.ge-gliedinhalt:empty { display: none; }
.ge-gliedsatz { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(var(--hell-rgb), .85); word-break: break-word; }
.ge-gliedabsatz { padding: 8px 12px; border-radius: 12px; border-left: 3px solid var(--c); background: rgba(0, 0, 0, .25); }
.ge-gliedabsatz b, .ge-gliedchronik b { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.ge-gliedabsatz p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(var(--hell-rgb), .82); }
.ge-gliedleute { display: flex; flex-wrap: wrap; gap: 6px; }
.ge-gliedhaus, .ge-gliedzeuge { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; text-decoration: none; color: rgba(var(--hell-rgb), .85); border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .25); }
.ge-gliedzeuge:hover { color: #fff; border-color: var(--c); }
.ge-gliedfotos { display: grid; grid-template-columns: repeat(4, minmax(0, 92px)); gap: 6px; }
.ge-gliedfotos a { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.ge-gliedfotos img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .85, .2, 1); }
.ge-gliedfotos a:hover img { transform: scale(1.1); }
.ge-gliedchronik ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ge-gliedchronik li { display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .05); }
.ge-chronikkopf { font: 500 11px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .5); }
.ge-chronikkopf em { font-style: normal; padding: 0 6px; margin-right: 4px; border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--c) 30%, transparent); }
.ge-gliedchronik strong { font-size: 13px; color: #fff; }
.ge-chroniktext { font-size: 12.5px; line-height: 1.5; color: rgba(var(--hell-rgb), .72); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.ge-gliedleer { margin: 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .5); }
.ge-gliedleer a { color: #ff9ae6; }

.ge-gesamtliste { position: relative; display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.ge-gesamtliste::before { content: ''; position: absolute; left: 98px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #ff5fd2, #b06bff 60%, rgba(176, 107, 255, .1)); }
.ge-gesamtliste li { display: grid; grid-template-columns: 84px 16px minmax(0, 1fr); gap: 0 10px; align-items: start; animation: geGliedEin .5s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards; }
.ge-gesamtdatum { padding-top: 10px; font-size: 11.5px; text-align: right; color: rgba(var(--hell-rgb), .55); }
.ge-gesamtpunkt { margin-top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #0d0a12; border: 2px solid #ff5fd2; box-shadow: 0 0 8px rgba(255, 95, 210, .7); position: relative; left: 1px; }
.ge-gesamtinhalt { padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .06); }
.ge-gesamtkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; }
.ge-gesamtquelle { font-size: 12px; font-weight: 600; color: #ffc2ef; text-decoration: none; }
.ge-gesamtquelle:hover { text-decoration: underline; }
.ge-gesamtkopf em { font-style: normal; font-size: 10px; letter-spacing: .08em; padding: 0 7px; border-radius: 999px; color: rgba(var(--hell-rgb), .7); border: 1px solid rgba(255, 255, 255, .15); }
.ge-gesamtinhalt strong { font-size: 13.5px; color: #fff; }
.ge-gesamtinhalt p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(var(--hell-rgb), .75); word-break: break-word; }
.ge-gesamtmehr { margin: 12px 0 0; font-size: 12px; color: rgba(var(--hell-rgb), .5); }
@media (max-width: 760px) {
  .ge-lagezahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ge-lagezahl.breit { grid-column: 1 / -1; }
  .ge-lageraster { grid-template-columns: 1fr; }
  .ge-gliedinhalt { padding: 0 12px 12px; }
  .ge-gliedfotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ge-gesamtliste::before { left: 7px; }
  .ge-gesamtliste li { grid-template-columns: 16px minmax(0, 1fr); }
  .ge-gesamtdatum { grid-column: 2; text-align: left; padding-top: 0; }
  .ge-gesamtpunkt { grid-row: 1 / span 2; grid-column: 1; }
  .ge-gesamtinhalt { grid-column: 2; }
}

/* ── Erfassung: erledigt markiert — darf jeder löschen ── */
.erf-buehne .erf-karte.ist-erledigt { border-left-color: #7ec48b; border-left-style: solid; opacity: .82; }
.erf-buehne .erf-karte.ist-erledigt:hover { opacity: 1; }
.erf-stempel.erledigt { --c: #7ec48b; color: #7ec48b; border-color: #7ec48b; opacity: .3; }
.erf-erledigtvermerk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; padding: 8px 12px; border-radius: 12px;
  font-size: 13px; color: #c9f5d2; border: 1px solid rgba(126, 196, 139, .45); background: rgba(126, 196, 139, .1);
}
.erf-erledigtvermerk small { color: rgba(var(--hell-rgb), .55); }
.erf-erledigtvermerk form { margin: 0 0 0 auto; }
.erf-erledigtweg {
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
  border: 1px solid #e0475f; background: linear-gradient(135deg, rgba(224, 71, 95, .85), rgba(160, 20, 40, .85));
  box-shadow: 0 6px 16px -8px rgba(224, 71, 95, .9); transition: transform .2s, box-shadow .2s;
}
.erf-erledigtweg:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(224, 71, 95, .6); }
.erf-allewegform { margin: 0; }
.erf-alleweg { border-color: rgba(224, 71, 95, .5) !important; color: #ffb3c0 !important; }
.erf-alleweg span { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; color: #fff; background: rgba(224, 71, 95, .6); }
.erf-alleweg:hover { box-shadow: 0 0 16px rgba(224, 71, 95, .45); color: #fff !important; }

/* Dashboard · Ranking: Profilbilder und der Hinweis auf die Mitglieder */
.dash-rangliste .dash-kreis, .dash-podest .dash-kreis { position: relative; overflow: hidden; }
.dash-rangliste .dash-kreis img, .dash-podest .dash-kreis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dash-rangliste .dash-kreis { width: 38px; height: 38px; }
.dash-rangkreis { margin: 8px 0 0; font-size: 12px; color: rgba(var(--hell-rgb), .6); }
.dash-rangkreis b { color: #fff; }

/* ══ Abstimmung: wer noch nicht abgestimmt hat ═══════════════════════ */
.abst-fehlen { margin-top: 12px; border-radius: 14px; border: 1px solid rgba(245, 184, 74, .35); background: rgba(245, 184, 74, .06); overflow: hidden; }
.abst-fehlen.vorbei { border-color: rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .2); }
.abst-fehlen.leer { border-color: rgba(63, 227, 160, .4); background: rgba(63, 227, 160, .06); }
.abst-fehlen summary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; list-style: none; font-size: 13px; color: rgba(var(--hell-rgb), .85); }
.abst-fehlen summary::-webkit-details-marker { display: none; }
.abst-fehlen summary:hover { background: rgba(255, 255, 255, .03); }
.abst-fehlenzeichen { font-size: 15px; }
.abst-fehlen:not(.vorbei):not(.leer) .abst-fehlenzeichen { animation: abstSanduhr 2.4s ease-in-out infinite; }
@keyframes abstSanduhr { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.abst-fehlenwort { font-weight: 700; letter-spacing: .04em; }
.abst-fehlenzahl { min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center; font: 700 12px/1.5 ui-monospace, Consolas, monospace; color: #1a1208; background: #f5b84a; }
.abst-fehlen.vorbei .abst-fehlenzahl { color: #fff; background: rgba(255, 255, 255, .18); }
.abst-fehlen.leer .abst-fehlenzahl { color: #062016; background: #3fe3a0; }
.abst-fehlenalle { font-size: 12px; color: #3fe3a0; }
.abst-fehlenpfeil { margin-left: auto; color: rgba(var(--hell-rgb), .5); transition: transform .3s; }
.abst-fehlen[open] .abst-fehlenpfeil { transform: rotate(180deg); }
.abst-fehlenliste { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 12px; }
.abst-fehlenliste:empty { display: none; }
.abst-fehlt {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; font-size: 12px; color: rgba(var(--hell-rgb), .9);
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .3);
  animation: abstFehltEin .4s cubic-bezier(.2, .9, .2, 1.3) calc(var(--n, 0) * 25ms) backwards;
}
@keyframes abstFehltEin { from { opacity: 0; transform: scale(.7); } }
.abst-fehlt.ich { color: #fff; border-color: #f5b84a; background: rgba(245, 184, 74, .2); box-shadow: 0 0 12px rgba(245, 184, 74, .4); }
.abst-fehlt small { color: #ffd98a; }
.abst-fehltbild { position: relative; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; font-size: 10px; font-weight: 700; color: #fff; background: var(--c); }
.abst-fehltbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .abst-fehlenzeichen, .abst-fehlt { animation: none !important; } }

/* ══ Philosophie ════════════════════════════════════════════════════
   Gold der Uhr über dem Violett des Hauses. Kopf mit tickender Uhr und
   Live-Anzeige, die Tagesleiste mit „jetzt"-Marke, zwei Regelkarten, die
   Woche mit den freien Tagen und der Stempel des Vorbehalts. */
.ph-held {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 26px; align-items: center;
  margin-top: 22px; padding: 28px 30px; border-color: rgba(224, 176, 74, .32);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(224, 176, 74, .16), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(var(--zweit-rgb), .14), transparent 60%),
    rgba(var(--flaeche-rgb), .82);
}
.ph-held::before {
  content: '∞'; position: absolute; left: 38%; top: -70px; font: 300 260px/1 Georgia, serif; color: #e0b04a; opacity: .04; pointer-events: none;
  animation: phSchweben 10s ease-in-out infinite;
}
@keyframes phSchweben { 50% { transform: translateY(16px) rotate(-4deg); opacity: .07; } }
.ph-heldtext { position: relative; z-index: 1; min-width: 0; }
.ph-heldtext h1 {
  margin: 4px 0 6px; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: .06em;
  background: linear-gradient(90deg, #fff5da, #e0b04a 45%, #f5d27a 60%, #c18cff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: phGlanz 8s ease-in-out infinite;
}
@keyframes phGlanz { 50% { background-position: 100% 0; } }

/* Die Live-Anzeige */
.ph-jetzt {
  --c: #e0b04a;
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  margin-top: 18px; padding: 14px 18px; border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 18%, transparent), rgba(0, 0, 0, .3) 70%);
  box-shadow: 0 0 30px -14px var(--c); transition: border-color .6s, box-shadow .6s, background .6s;
  animation: phAuf .6s cubic-bezier(.2, .9, .2, 1.1) .2s backwards;
}
.ph-jetzt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .08) 50%, transparent 65%);
  transform: translateX(-100%); animation: phStreif 5s ease-in-out 1s infinite;
}
@keyframes phStreif { 40%, 100% { transform: translateX(100%); } }
.ph-jetzt[data-zustand="frei"] { --c: #3fe3a0; }
.ph-jetzt[data-zustand="frei-zeit"] { --c: #7ea8e6; }
.ph-jetzt[data-zustand="bald"] { --c: #f5b84a; }
.ph-jetzt[data-zustand="familie"] { --c: #ff5a7a; animation: phAuf .6s cubic-bezier(.2, .9, .2, 1.1) .2s backwards, phPuls 2s ease-in-out 1s infinite; }
@keyframes phPuls { 50% { box-shadow: 0 0 34px -6px var(--c); } }
@keyframes phAuf { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ph-jetztlicht { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); animation: phLicht 1.6s ease-out infinite; }
@keyframes phLicht { to { box-shadow: 0 0 0 12px transparent; } }
.ph-jetzttext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-jetzttext small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.ph-jetzttext strong { font-size: 20px; color: #fff; }
.ph-jetzttext span { font-size: 13px; color: rgba(var(--hell-rgb), .75); }
.ph-jetztuhr { font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }

/* Die Uhr */
.ph-uhr { position: relative; width: 220px; margin: 0 auto; animation: phAuf .8s cubic-bezier(.2, .9, .2, 1.2) backwards; }
.ph-uhr svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 0 18px rgba(224, 176, 74, .25)); }
.ph-uhrbahn { fill: none; stroke: rgba(224, 176, 74, .25); stroke-width: 1; stroke-dasharray: 2 6; transform-origin: 100px 100px; animation: phDrehen 60s linear infinite; }
@keyframes phDrehen { to { transform: rotate(360deg); } }
.ph-uhrrand { fill: rgba(10, 8, 6, .65); stroke: rgba(224, 176, 74, .35); stroke-width: 2; }
.ph-uhrbogen { fill: none; stroke: #ff5a7a; stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; filter: drop-shadow(0 0 6px rgba(255, 90, 122, .8)); animation: phBogen 2.6s ease-in-out infinite; }
@keyframes phBogen { 50% { stroke: #e0b04a; filter: drop-shadow(0 0 10px rgba(224, 176, 74, .9)); } }
.ph-uhrstrich { stroke: rgba(var(--hell-rgb), .35); stroke-width: 2; stroke-linecap: round; }
.ph-uhrstrich.gross { stroke: #e0b04a; stroke-width: 3; }
.ph-zeiger { transform-origin: 100px 100px; transition: transform .4s cubic-bezier(.2, .9, .2, 1.4); }
.ph-zeiger line { stroke-linecap: round; }
.ph-zeiger.stunde line { stroke: url(#phGold); stroke-width: 6; }
.ph-zeiger.minute line { stroke: #fff5da; stroke-width: 4; }
.ph-zeiger.sekunde line { stroke: #ff5a7a; stroke-width: 1.6; }
.ph-zeiger.sekunde { transition: transform .25s cubic-bezier(.4, 2.2, .5, 1); }
.ph-uhrkern { fill: #e0b04a; stroke: #1a1208; stroke-width: 2; }
.ph-uhrmarke {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px;
  font: 700 13px ui-monospace, Consolas, monospace; letter-spacing: .12em; color: #1a1208; background: linear-gradient(135deg, #fff1c9, #e0b04a);
  box-shadow: 0 6px 16px -6px rgba(224, 176, 74, .9);
}

/* Abschnitte */
.ph-abschnitt { margin-top: 30px; }
.ph-abschnittkopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ph-abschnittzahl {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; flex: none;
  font: 700 18px Georgia, serif; color: #1a1208; background: linear-gradient(135deg, #fff1c9, #e0b04a);
  box-shadow: 0 0 22px rgba(224, 176, 74, .45); animation: phAuf .6s cubic-bezier(.2, .9, .2, 1.3) backwards;
}
.ph-abschnittkopf h2 { margin: 2px 0 0; font-size: clamp(22px, 3vw, 30px); color: #fff; letter-spacing: .04em; }

/* Die Tagesleiste */
.ph-tag { padding: 18px 20px 26px; }
.ph-tagleiste {
  position: relative; height: 34px; border-radius: 12px; overflow: visible;
  background: linear-gradient(90deg, rgba(126, 168, 230, .18), rgba(126, 168, 230, .08) 70%, rgba(126, 168, 230, .12));
  border: 1px solid rgba(255, 255, 255, .08);
}
.ph-tagfamilie {
  position: absolute; top: -1px; bottom: -1px; left: var(--beginn); right: -1px; display: flex; align-items: center; justify-content: center;
  border-radius: 0 12px 12px 0; overflow: hidden; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #ff5a7a, #c13a5c); box-shadow: 0 0 22px rgba(255, 90, 122, .5);
  transform-origin: left; animation: phFuellen 1.4s cubic-bezier(.2, .85, .2, 1) .3s backwards;
}
.ph-tagfamilie::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 8px, transparent 8px 16px); background-size: 32px 32px; animation: phStreifen 1.5s linear infinite; }
.ph-tagfamilie span { position: relative; z-index: 1; }
@keyframes phFuellen { from { transform: scaleX(0); } }
@keyframes phStreifen { to { background-position: 32px 0; } }
.ph-tag.frei .ph-tagfamilie { background: linear-gradient(90deg, rgba(63, 227, 160, .5), rgba(63, 227, 160, .25)); box-shadow: none; }
.ph-tagfamilie span { white-space: nowrap; }
.ph-wort-frei { display: none; }
.ph-tag.frei .ph-wort-an { display: none; }
.ph-tag.frei .ph-wort-frei { display: inline; }
.ph-tag.laeuft .ph-tagfamilie { animation: phFuellen 1.4s cubic-bezier(.2, .85, .2, 1) .3s backwards, phPulsLeiste 1.6s ease-in-out 1.6s infinite; }
@keyframes phPulsLeiste { 50% { box-shadow: 0 0 34px rgba(255, 90, 122, .85); } }
.ph-tagjetzt { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px #e0b04a; transition: left 1s linear; z-index: 2; }
.ph-tagjetzt b { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; font: 700 10px ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: #1a1208; background: #fff5da; white-space: nowrap; }
.ph-tagskala { position: relative; height: 18px; margin-top: 8px; }
.ph-tagskala span { position: absolute; transform: translateX(-50%); font: 500 10.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .45); }
.ph-tagskala span:first-child { transform: none; }
.ph-tagskala span:nth-child(5) { transform: translateX(-100%); }
.ph-tagskala .ph-tagskalamarke { color: #ff8aa3; font-weight: 700; top: 14px; }

/* Die Regelkarten */
.ph-regeln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.ph-regel {
  position: relative; overflow: hidden; padding: 22px 22px 20px; border-radius: 20px;
  animation: phKarte .7s cubic-bezier(.2, .85, .2, 1.05) var(--d, 0ms) backwards; transition: transform .35s cubic-bezier(.2, .85, .2, 1), box-shadow .35s;
}
.ph-regel:hover { transform: translateY(-4px); }
@keyframes phKarte { from { opacity: 0; transform: translateY(24px) rotateX(8deg); } }
.ph-regel-zeit { border-color: rgba(255, 90, 122, .4); background: radial-gradient(90% 90% at 0% 0%, rgba(255, 90, 122, .14), transparent 60%), rgba(var(--flaeche-rgb), .9); }
.ph-regel-zeit:hover { box-shadow: 0 0 30px -10px rgba(255, 90, 122, .7); }
.ph-regel-frei { border-color: rgba(126, 168, 230, .4); background: radial-gradient(90% 90% at 100% 0%, rgba(126, 168, 230, .16), transparent 60%), rgba(var(--flaeche-rgb), .9); }
.ph-regel-frei:hover { box-shadow: 0 0 30px -10px rgba(126, 168, 230, .7); }
.ph-regelzeichen { position: absolute; right: 18px; top: 16px; font-size: 34px; opacity: .9; animation: phWippen 3.4s ease-in-out infinite; }
@keyframes phWippen { 50% { transform: translateY(-5px) rotate(-6deg); } }
.ph-regelmarke { margin: 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #e0b04a; }
.ph-regel h3 { margin: 4px 0 10px; font-size: 24px; color: #fff; }
.ph-gross { display: inline-block; font: 800 1.35em/1 ui-monospace, Consolas, monospace; background: linear-gradient(90deg, #fff5da, #ff8aa3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-regel p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: rgba(var(--hell-rgb), .85); }
.ph-regel strong { color: #fff; }
.ph-pflicht {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255, 90, 122, .55); background: rgba(255, 90, 122, .12); animation: phPflicht 2.4s ease-in-out 1s infinite;
}
@keyframes phPflicht { 50% { box-shadow: 0 0 22px -4px rgba(255, 90, 122, .6); } }
.ph-pflicht p { margin: 0; }
.ph-pflichtzeichen { font-size: 20px; animation: phZucken 2.4s ease-in-out infinite; }
@keyframes phZucken { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg) scale(1.15); } 90% { transform: rotate(10deg); } }
.ph-knopf .ph-pfeil { display: inline-block; transition: transform .25s; }
.ph-knopf:hover .ph-pfeil { transform: translateX(4px); }
.ph-ruf { position: relative; width: 74px; height: 74px; margin: 14px auto 0; display: grid; place-items: center; }
.ph-rufwelle { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(126, 168, 230, .55); animation: phWelle 2.8s ease-out infinite; }
.ph-rufwelle.zwei { animation-delay: .9s; }
.ph-rufwelle.drei { animation-delay: 1.8s; }
@keyframes phWelle { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.ph-rufkern { position: relative; font-size: 30px; animation: phWippen 2.8s ease-in-out infinite; }

/* Die Woche */
.ph-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ph-tagkarte {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 16px; text-align: center;
  border: 1px solid rgba(224, 176, 74, .25); background: linear-gradient(180deg, rgba(224, 176, 74, .1), rgba(0, 0, 0, .3));
  animation: phKarte .6s cubic-bezier(.2, .85, .2, 1.1) var(--d, 0ms) backwards; transition: transform .3s cubic-bezier(.2, .9, .2, 1.3), box-shadow .3s;
}
.ph-tagkarte:hover { transform: translateY(-5px); }
.ph-tagkarte.frei {
  border-color: rgba(63, 227, 160, .55); background: linear-gradient(180deg, rgba(63, 227, 160, .2), rgba(0, 0, 0, .3));
  box-shadow: 0 0 22px -10px rgba(63, 227, 160, .8);
}
.ph-tagkarte.heute { outline: 2px solid #fff5da; outline-offset: 2px; animation: phKarte .6s cubic-bezier(.2, .85, .2, 1.1) var(--d, 0ms) backwards, phHeute 2.2s ease-in-out 1s infinite; }
@keyframes phHeute { 50% { box-shadow: 0 0 26px rgba(255, 245, 218, .45); } }
.ph-heute { position: absolute; top: -9px; padding: 1px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1a1208; background: #fff5da; }
.ph-tagkurz { font: 800 20px ui-monospace, Consolas, monospace; color: #fff; }
.ph-tagname { font-size: 10.5px; letter-spacing: .06em; color: rgba(var(--hell-rgb), .55); }
.ph-tagzeichen { font-size: 22px; margin: 2px 0; }
.ph-tagkarte.frei .ph-tagzeichen { animation: phMond 4s ease-in-out infinite; }
@keyframes phMond { 50% { transform: rotate(-14deg) scale(1.12); filter: drop-shadow(0 0 8px rgba(63, 227, 160, .8)); } }
.ph-tagwert { font-size: 11px; font-weight: 700; color: #ffd98a; }
.ph-tagkarte.frei .ph-tagwert { color: #9ff5c8; text-transform: uppercase; letter-spacing: .08em; }
.ph-freikarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.ph-freikarte {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; border-color: rgba(63, 227, 160, .45);
  background: radial-gradient(90% 120% at 0% 50%, rgba(63, 227, 160, .18), transparent 60%), rgba(var(--flaeche-rgb), .9);
  animation: phKarte .7s cubic-bezier(.2, .85, .2, 1.05) var(--d, 0ms) backwards;
}
.ph-freikarte h3 { margin: 2px 0 0; font-size: 26px; color: #fff; }
.ph-freikarte .ph-regelmarke { color: #3fe3a0; }
.ph-freimond { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; font-size: 28px; background: radial-gradient(circle, rgba(63, 227, 160, .35), rgba(63, 227, 160, .05) 70%); animation: phMond 4s ease-in-out infinite; }

/* Der Vorbehalt */
.ph-vorbehalt { display: flex; justify-content: center; margin: 34px 0 10px; }
.ph-stempel {
  display: inline-block; padding: 12px 26px; border-radius: 10px; transform: rotate(-4deg);
  font: 800 clamp(16px, 2.6vw, 24px)/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #ff8aa3;
  border: 3px double #ff5a7a; background: rgba(255, 90, 122, .08); box-shadow: 0 0 26px -8px rgba(255, 90, 122, .7);
  animation: phStempel .7s cubic-bezier(.2, .9, .2, 1.6) .4s backwards, phStempelPuls 3s ease-in-out 1.5s infinite;
}
@keyframes phStempel { from { opacity: 0; transform: rotate(-24deg) scale(2.2); } }
@keyframes phStempelPuls { 50% { box-shadow: 0 0 36px -4px rgba(255, 90, 122, .9); transform: rotate(-4deg) scale(1.03); } }

@media (max-width: 860px) {
  .ph-held { grid-template-columns: 1fr; padding: 22px; }
  .ph-uhr { width: 170px; order: -1; }
  .ph-regeln, .ph-freikarten { grid-template-columns: 1fr; }
  .ph-woche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ph-jetzt { grid-template-columns: auto minmax(0, 1fr); }
  .ph-jetztuhr { grid-column: 1 / -1; font-size: 18px; }
  .ph-woche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-tagskala span:nth-child(2), .ph-tagskala span:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-buehne *, .ph-held::before { animation: none !important; transition: none !important; }
}
/* Der Stempel bricht auf schmalen Schirmen um */
.ph-stempel { max-width: calc(100% - 24px); text-align: center; line-height: 1.25; }
@media (max-width: 480px) { .ph-stempel { font-size: 15px; letter-spacing: .06em; padding: 10px 16px; } }
.ph-vorbehalt { overflow: hidden; padding: 18px 8px; }

/* ══ Abwesenheit · Raten ab 08.09.2026: Abmeldung und Verspätung getrennt,
      dazu im Fenster der Durchschnitt der letzten 30 und 7 Tage ══════════ */
.aw-quote { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin-top: 4px; }
.aw-quote-teil { gap: 6px; }
.aw-quote-wort { min-width: 78px; font-size: 10px; color: rgba(var(--hell-rgb), .55); }
.aw-quote-teil.ab .aw-quote-wort { color: rgba(126, 196, 139, .8); }
.aw-quote-teil.sp .aw-quote-wort { color: rgba(224, 163, 74, .8); }
.aw-quote-teil i { width: 36px; }
.aw-ratenkarte { gap: 4px; }
.aw-ratenanzahl { font-size: 11.5px; color: rgba(var(--hell-rgb), .6); }
.aw-ratenschnitt { font-size: 11.5px; }
.aw-ratenschnitt b { font-size: 13px; }
.aw-ratenschnitte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 6px; }
.aw-ratenfenster-wert {
  display: grid; justify-items: center; gap: 2px; padding: 7px 4px 6px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: rgba(0, 0, 0, .25);
}
.aw-ratenfenster-wert small { font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase; color: rgba(var(--hell-rgb), .5); }
.aw-ratenfenster-wert b { font: 700 15px/1.1 ui-monospace, Consolas, monospace; color: #fff; }
.aw-ratenfenster-wert em { font-style: normal; font-size: 10px; color: rgba(var(--hell-rgb), .45); }
.aw-ratenbalken { position: relative; display: block; width: 80%; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.aw-ratenbalken i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--c);
  box-shadow: 0 0 6px var(--c); transition: width .9s cubic-bezier(.2, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .aw-ratenbalken i { transition: none; } }
/* ══ Abwesenheit · die Werte unter dem Namen — groß und gut lesbar ══════ */
.aw-tafel.mit-werte { grid-template-columns: minmax(290px, 1.9fr) repeat(7, minmax(64px, 1fr)); min-width: 860px; }
.aw-tafel.mit-werte .aw-person { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.aw-tafel.mit-werte .aw-bild { flex-basis: 40px; width: 40px; height: 40px; margin-top: 2px; }
.aw-tafel.mit-werte .aw-namensfeld { flex: 1; }
.aw-tafel.mit-werte .aw-name { font-size: 15px; }
.aw-werte { display: grid; gap: 5px; margin-top: 6px; }
.aw-wert { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; column-gap: 10px; row-gap: 3px; }
.aw-wert-wort { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.aw-wert.ab .aw-wert-wort { color: #8fd69c; }
.aw-wert.sp .aw-wert-wort { color: #f0b45a; }
.aw-wert-prozent { font: 800 16px/1 ui-monospace, Consolas, monospace; color: #fff; }
.aw-wert-zahl { min-width: 30px; text-align: right; font: 700 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .6); }
.aw-wert-balken {
  grid-column: 1 / -1; position: relative; display: block; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.aw-wert-balken::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; transform-origin: left;
  transform: scaleX(var(--q, 0)); animation: awQuoteEin 1.1s cubic-bezier(.2, .8, .2, 1) .3s backwards;
}
.aw-wert.ab .aw-wert-balken::after { background: #7ec48b; box-shadow: 0 0 8px rgba(126, 196, 139, .8); }
.aw-wert.sp .aw-wert-balken::after { background: #e0a34a; box-shadow: 0 0 8px rgba(224, 163, 74, .8); }
.aw-wert-fuss { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 1px; font: 600 12px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .55); }
.aw-wert-fuss .un { color: #ff7488; }
@media (prefers-reduced-motion: reduce) { .aw-wert-balken::after { animation: none; } }
/* ═══════════════════════════════════════════════════════════════════
   Vindicta — Rang-Up: der vierte Vermerk, in Grün
     Zeichen      ein Pfeil nach oben; beim Vormerken füllt er sich grün,
                  hüpft und leuchtet, kleine Pfeile steigen auf
     Zeile        läuft von links grün voll (die anderen Vermerke liegen
                  darüber), die Nummer glimmt, unter dem Namen das Band
                  „Steht an für Rang-Up!"
     Kopf         die Zahl; „Nur Rang-Up" filtert
   ═══════════════════════════════════════════════════════════════════ */
#vindTabelle .vind-ru { width: 34px; min-width: 34px; background: #000 !important; }
.vd-rangupzahl-zeichen {
  display: inline-block; flex: none; width: 11px; height: 12px; background: #3fe37a;
  clip-path: polygon(50% 0, 100% 48%, 70% 48%, 70% 100%, 30% 100%, 30% 48%, 0 48%);
  filter: drop-shadow(0 0 4px rgba(63, 227, 122, .8));
}
.vind-rangup {
  position: relative; display: grid; place-items: center; height: 100%; min-height: 30px;
  padding: 3px 0; cursor: pointer;
}
.vind-rangup input { position: absolute; opacity: 0; width: 0; height: 0; }
.vind-rangup svg { width: 21px; height: 21px; overflow: visible; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), filter .3s; }
.vind-rangup .huelle {
  fill: rgba(63, 227, 122, .05); stroke: rgba(63, 227, 122, .42); stroke-width: 1.4; stroke-linejoin: round;
  transition: stroke .3s, fill .3s;
}
.vind-rangup .pegel { transform: translateY(26px); transition: transform .7s cubic-bezier(.3, .8, .25, 1); }
.vind-rangup .fuellung { fill: url(#vindRangupVerlauf); animation: vindWelle 1.6s linear infinite; }
.vind-rangup .kerbe { fill: none; stroke: rgba(63, 227, 122, .35); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s .2s; }
.vind-rangup:hover svg { transform: translateY(-2px) scale(1.18); }
.vind-rangup:hover .huelle { stroke: #3fe37a; }
.vind-rangup:hover .pegel { transform: translateY(13px); }
.vind-rangup input:focus-visible ~ svg { outline: 2px solid #3fe37a; outline-offset: 3px; border-radius: 4px; }
.vind-rangup input:checked ~ svg .pegel { transform: translateY(-3px); }
.vind-rangup input:checked ~ svg .huelle { stroke: #b9ffd0; }
.vind-rangup input:checked ~ svg .kerbe { stroke: #06361a; }
.vind-rangup input:checked ~ svg { animation: vindRangupLicht 2s ease-in-out infinite; }
@keyframes vindRangupLicht {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(63, 227, 122, .5)); }
  50%      { transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(63, 227, 122, 1)); }
}
.vind-rangup.laedt { pointer-events: none; }
.rangup-frisch .vind-rangup input:checked ~ svg {
  animation: vindRangupEin .7s cubic-bezier(.3, 1.5, .5, 1), vindRangupLicht 2s ease-in-out .7s infinite;
}
@keyframes vindRangupEin { 0% { transform: scale(.3) translateY(10px); } 60% { transform: scale(1.35) translateY(-5px); } 100% { transform: none; } }
.rangup-frisch .vind-rangup::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid #3fe37a; pointer-events: none; animation: vindRing .8s ease-out .2s backwards;
}
.vind-rangfunke {
  position: fixed; z-index: 80; pointer-events: none; background: #3fe37a;
  clip-path: polygon(50% 0, 100% 55%, 68% 55%, 68% 100%, 32% 100%, 32% 55%, 0 55%);
  filter: drop-shadow(0 0 4px rgba(63, 227, 122, .9));
}

/* Die Zeile: grün, solange kein anderer Vermerk darüberliegt */
body.luxus.edel .panel table.vind tr.vind-zeile.rangup:not(.bloodout):not(.verwarnt):not(.gespraech),
table.vind tr.vind-zeile.rangup:not(.bloodout):not(.verwarnt):not(.gespraech) {
  background:
    linear-gradient(100deg, transparent 38%, rgba(160, 255, 200, .16) 50%, transparent 62%) 150% 0 / 300% 100% no-repeat,
    linear-gradient(90deg, rgba(63, 227, 122, .32), rgba(30, 160, 85, .16) 55%, rgba(10, 80, 40, .1)) 0 0 / 100% 100% no-repeat,
    #07120b;
  animation: vindRangupGlanz 6s ease-in-out 1s infinite;
}
@keyframes vindRangupGlanz { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
table.vind tr.vind-zeile.rangup:not(.bloodout):not(.verwarnt):not(.gespraech) > td { background: transparent !important; border-color: rgba(63, 227, 122, .75); }
table.vind tr.vind-zeile.rangup.rangup-frisch:not(.bloodout):not(.verwarnt):not(.gespraech) {
  animation: vindRangupZeileEin .9s cubic-bezier(.3, .7, .2, 1), vindRangupGlanz 6s ease-in-out 1s infinite;
}
@keyframes vindRangupZeileEin { from { background-size: 300% 100%, 0% 100%; } to { background-size: 300% 100%, 100% 100%; } }
table.vind tr.vind-zeile.rangup.rangup-weg:not(.bloodout):not(.verwarnt):not(.gespraech) { animation: vindRangupAus .65s ease-in forwards; }
@keyframes vindRangupAus {
  from { background-size: 300% 100%, 100% 100%; background-position: 150% 0, 100% 0; background-color: #07120b; }
  to   { background-size: 300% 100%, 0% 100%; background-position: 150% 0, 100% 0; background-color: #111; }
}
table.vind tr.rangup:not(.bloodout):not(.verwarnt):not(.gespraech) td.vind-nr {
  color: #b9ffd0; text-shadow: 0 0 8px rgba(63, 227, 122, .9); animation: vindRangupNr 2s ease-in-out infinite;
}
@keyframes vindRangupNr {
  0%, 100% { box-shadow: inset 4px 0 0 #1f9a52; }
  50%      { box-shadow: inset 4px 0 0 #3fe37a, inset 16px 0 14px -10px rgba(63, 227, 122, .8); }
}
table.vind tr.rangup:not(.bloodout):not(.verwarnt):not(.gespraech) .vind-feld-name { color: #eafff1; text-shadow: 0 0 10px rgba(63, 227, 122, .6); }
table.vind tr.rangup:not(.bloodout):not(.verwarnt):not(.gespraech) .vind-rangwahl { box-shadow: 0 0 0 1px rgba(63, 227, 122, .7), 0 0 14px -4px rgba(63, 227, 122, .9); }
table.vind tr.rangup:is(.bloodout, .verwarnt, .gespraech) td.vind-ru { box-shadow: inset 0 0 0 1px rgba(63, 227, 122, .8); }

/* Das Band unter dem Namen */
.vind-rangup-band {
  display: none; align-items: center; gap: 5px; margin: 4px 0 1px 6px; padding: 2px 9px 2px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; white-space: nowrap;
  color: #04260f; background: linear-gradient(180deg, #8dffb4, #2fd06a); border: 1px solid rgba(190, 255, 215, .9);
}
.vind-rangup-band::before {
  content: ''; width: 9px; height: 10px; background: #04260f;
  clip-path: polygon(50% 0, 100% 48%, 70% 48%, 70% 100%, 30% 100%, 30% 48%, 0 48%);
}
table.vind tr.rangup .vind-rangup-band {
  display: inline-flex;
  animation: vindSchildEin .5s cubic-bezier(.2, 1.6, .4, 1) .2s backwards, vindRangupBand 2s ease-in-out 1s infinite;
}
@keyframes vindRangupBand {
  0%, 100% { box-shadow: 0 0 6px -2px rgba(63, 227, 122, .5); }
  50%      { box-shadow: 0 0 16px 0 rgba(63, 227, 122, 1); }
}

/* Kopf: die Zahl und der Filter */
.vd-rangupzahl { position: relative; }
.vd-rangupzahl .vd-rangupzahl-zeichen { position: absolute; top: 12px; right: 12px; }
.vd-rangupzahl.an {
  border-color: rgba(63, 227, 122, .6);
  background: linear-gradient(150deg, rgba(63, 227, 122, .18), rgba(0, 0, 0, .3));
  animation: vindRangupKenn 2s ease-in-out infinite;
}
.vd-rangupzahl.an strong { color: #b9ffd0; text-shadow: 0 0 14px rgba(63, 227, 122, .9); }
.vd-rangupzahl:not(.an) .vd-rangupzahl-zeichen { opacity: .35; filter: none; }
@keyframes vindRangupKenn { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 227, 122, 0); } 50% { box-shadow: 0 0 22px -4px rgba(63, 227, 122, .8); } }
.vd-rangupfilter {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #c9ffd9; background: rgba(63, 227, 122, .08); border: 1px solid rgba(63, 227, 122, .5);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s, border-color .3s, color .25s, background .3s;
}
.vd-rangupfilter b { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center; font-size: 12px; color: #fff; background: rgba(63, 227, 122, .25); }
.vd-rangupfilter:hover:not(:disabled) { transform: translateY(-2px); color: #fff; border-color: #3fe37a; box-shadow: 0 10px 22px -12px rgba(63, 227, 122, .9); }
.vd-rangupfilter[aria-pressed="true"] { color: #04260f; border-color: #8dffb4; background: linear-gradient(110deg, #8dffb4, #2fd06a); box-shadow: 0 0 22px -6px rgba(63, 227, 122, .95); }
.vd-rangupfilter[aria-pressed="true"] b { color: #04260f; background: rgba(4, 38, 15, .14); }
.vd-rangupfilter[aria-pressed="true"] .vd-rangupzahl-zeichen { background: #04260f; filter: none; }
.vd-rangupfilter:disabled { opacity: .38; cursor: default; }
table.vind.nur-rangup tr.vind-zeile:not(.rangup) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vind-rangup svg, .vind-rangup .fuellung, .rangup-frisch .vind-rangup::after, table.vind tr.vind-zeile.rangup,
  table.vind tr.rangup td.vind-nr, .vind-rangup-band, .vd-rangupzahl { animation: none !important; }
  .vind-rangup .pegel, .vind-rangup svg { transition: none; }
}
/* ══ Tribunal · Gesprächsprotokolle: je Person eine Kachel ═══════════ */
.tr-pk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px; }
.tr-pk-summe { font: 600 11.5px ui-monospace, Consolas, monospace; color: rgba(var(--hell-rgb), .5); }
.tr-pkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tr-pkachel {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(224, 176, 74, .18);
  background: linear-gradient(160deg, rgba(224, 176, 74, .07), rgba(0, 0, 0, .3) 55%), rgba(0, 0, 0, .25);
  animation: trAuf .5s cubic-bezier(.2, .85, .2, 1) var(--d, 0ms) backwards;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.tr-pkachel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #e0b04a, rgba(var(--zweit-rgb), .7));
}
.tr-pkachel.mit-offen::before { background: linear-gradient(180deg, #ff6b6b, #e0a34a); box-shadow: 0 0 12px rgba(255, 107, 107, .6); }
.tr-pkachel:hover { transform: translateY(-3px); border-color: rgba(224, 176, 74, .42); box-shadow: 0 16px 34px -20px rgba(224, 176, 74, .7); }
.tr-pk-person { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.tr-pk-person .tr-bild { width: 42px; height: 42px; font-size: 14px; }
.tr-pk-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-pk-wer b { font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-pk-wer b small { font-weight: 400; font-size: 10px; color: rgba(var(--hell-rgb), .5); }
.tr-pk-wer small { font-size: 11.5px; color: rgba(var(--hell-rgb), .55); }
.tr-pk-pfeil { font-size: 18px; color: #e0b04a; transition: transform .25s; }
.tr-pk-person:hover .tr-pk-pfeil { transform: translateX(4px); }
.tr-pk-werte { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-pk-wert {
  padding: 2px 9px; border-radius: 999px; font: 700 11px ui-monospace, Consolas, monospace;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .3); color: rgba(var(--hell-rgb), .75);
}
.tr-pk-wert.offen { color: #ffcf7a; border-color: rgba(255, 207, 122, .45); background: rgba(255, 170, 60, .12); }
.tr-pk-wert.erledigt { color: #9be0a8; border-color: rgba(155, 224, 168, .4); }
.tr-pk-wert.ohne { font-weight: 500; color: rgba(var(--hell-rgb), .45); }
.tr-pk-wert.ab { color: #e0a34a; }
.tr-pk-wert.sp { color: #7ea8e6; }
.tr-pk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tr-pk-liste a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 10px;
  text-decoration: none; color: inherit; background: rgba(255, 255, 255, .03); border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.tr-pk-liste a:hover { background: rgba(224, 176, 74, .08); border-color: rgba(224, 176, 74, .3); }
.tr-pk-datum { font-size: 11px; color: rgba(var(--hell-rgb), .5); }
.tr-pk-thema { font-size: 13px; color: rgba(var(--hell-rgb), .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-pk-s {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #fff; background: color-mix(in srgb, var(--s) 35%, transparent); border: 1px solid color-mix(in srgb, var(--s) 70%, transparent);
}
.tr-pk-s.erl { opacity: .65; }
.tr-pk-mehr { align-self: flex-start; font-size: 12px; color: #e0b04a; text-decoration: none; }
.tr-pk-mehr:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tr-pkachel { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker V 10.1.0 — Schwarzlicht mit Türkis
   Das Dunkel bleibt, das Violett bleibt die Leitfarbe — dazu kommt
   Türkis als Highlight: Kanten, aktive Reiter, Fokus, Zahlen, Linien.
   Weil --zweit jetzt Türkis ist, ziehen alle Stellen mit, die den
   zweiten Ton schon kennen (Abwesenheit „heute", eigene Zeile, Ringe …).
   ═══════════════════════════════════════════════════════════════════ */
.luxus.welt-codebreaker {
  --tuerkis:       #2ee6d0;
  --tuerkis-hell:  #a8f8ee;
  --tuerkis-rgb:   46, 230, 208;
  --zweit:         #2ee6d0;
  --zweit-rgb:     46, 230, 208;
  --gold-rgb:      150,  92, 255;
  --gold:          #965cff;
  --gold-hell:     #d4c3ff;
  --hell-rgb:      224, 220, 240;
  --flaeche-rgb:    10,   9,  18;
  --line:          rgba(150, 92, 255, .16);
  --knopf-schrift: #e8fffb;
}

/* Der Grund: zum violetten Glimmen ein türkiser Schein */
body.luxus.edel.welt-codebreaker {
  background-image:
    linear-gradient(rgba(var(--gold-rgb), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tuerkis-rgb), .03) 1px, transparent 1px);
}
.luxus.edel.welt-codebreaker::before {
  background-image:
    radial-gradient(900px 600px at 8% -12%, rgba(var(--gold-rgb), .26), transparent 62%),
    radial-gradient(780px 520px at 94% 2%,  rgba(var(--tuerkis-rgb), .16), transparent 60%),
    radial-gradient(900px 700px at 80% 110%, rgba(var(--gold-rgb), .16), transparent 64%),
    radial-gradient(700px 520px at 2% 98%,  rgba(var(--tuerkis-rgb), .12), transparent 62%);
}
.cb-dunst {
  background:
    radial-gradient(52% 30% at 50% 60%, rgba(22, 16, 36, .5), transparent 72%),
    radial-gradient(36% 26% at 40% 70%, rgba(80, 36, 170, .18), transparent 70%),
    radial-gradient(30% 22% at 68% 38%, rgba(20, 150, 140, .14), transparent 70%);
}

/* Kopf: Glas, Verlaufskante Violett → Türkis, die Fassung als türkise Kapsel */
body.luxus.edel.welt-codebreaker header {
  border-image: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .6), rgba(var(--tuerkis-rgb), .7), transparent) 1;
  box-shadow: 0 10px 40px -24px rgba(0, 0, 0, 1), 0 0 34px -16px rgba(var(--tuerkis-rgb), .45);
}
body.luxus.edel.welt-codebreaker .brand-fassung {
  color: #04211d; -webkit-text-fill-color: #04211d;
  background: linear-gradient(100deg, var(--tuerkis-hell), var(--tuerkis));
  border-color: rgba(var(--tuerkis-rgb), .9);
  box-shadow: 0 0 16px rgba(var(--tuerkis-rgb), .45);
}
body.luxus.edel.welt-codebreaker .kopfknopf { transition: border-color .2s, color .2s, box-shadow .2s, transform .2s; }
body.luxus.edel.welt-codebreaker .kopfknopf:hover {
  border-color: rgba(var(--tuerkis-rgb), .7); color: #fff;
  box-shadow: 0 0 18px -6px rgba(var(--tuerkis-rgb), .8); transform: translateY(-1px);
}

/* Reiter: der aktive mit türkisem Schein und einer Leuchtlinie */
body.luxus.edel.welt-codebreaker .navlink:hover { color: var(--tuerkis-hell); background: rgba(var(--tuerkis-rgb), .08); }
body.luxus.edel.welt-codebreaker .navlink.an {
  background:
    linear-gradient(rgba(var(--kopf-rgb), .94), rgba(var(--kopf-rgb), .94)) padding-box,
    linear-gradient(95deg, var(--gold), var(--tuerkis)) border-box;
  box-shadow: 0 0 22px rgba(var(--gold-rgb), .3), 0 0 36px -8px rgba(var(--tuerkis-rgb), .6);
  text-shadow: 0 0 12px rgba(var(--tuerkis-rgb), .7);
}
body.luxus.edel.welt-codebreaker .navlink::after { background: linear-gradient(90deg, var(--gold), var(--tuerkis)); }

/* Kästen: Glas mit violettem Licht oben links, türkisem unten rechts,
   die Lichtkante oben läuft von Violett nach Türkis */
body.luxus.edel.welt-codebreaker .panel {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(var(--gold-rgb), .07), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(var(--tuerkis-rgb), .045), transparent 60%),
    rgba(var(--flaeche-rgb), .9);
  border-color: rgba(var(--gold-rgb), .14);
}
body.luxus.edel.welt-codebreaker .panel::after {
  opacity: .9;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .6), rgba(var(--tuerkis-rgb), .7), transparent);
}
body.luxus.edel.welt-codebreaker .panel:hover {
  border-color: rgba(var(--tuerkis-rgb), .28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 26px 60px -30px rgba(0, 0, 0, 1), 0 0 26px -14px rgba(var(--tuerkis-rgb), .55);
}

/* Überschriften: kaltes Weiß, das über Violett ins Türkis läuft */
body.luxus.edel.welt-codebreaker h1,
body.luxus.edel.welt-codebreaker .vw-held h1,
body.luxus.edel.welt-codebreaker .tm-held .tm-heldtext h1,
body.luxus.edel.welt-codebreaker .akt-kopf h1 {
  background: linear-gradient(95deg, #f3f1fb, #cdbdff 30%, #a07cff 48%, var(--tuerkis) 66%, #f3f1fb) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
body.luxus.edel.welt-codebreaker .seal { color: rgba(var(--tuerkis-rgb), .9); text-shadow: 0 0 10px rgba(var(--tuerkis-rgb), .35); }
body.luxus.edel.welt-codebreaker .sec-title::after { background: linear-gradient(90deg, rgba(var(--tuerkis-rgb), .7), rgba(var(--gold-rgb), .35), transparent); }
body.luxus.edel.welt-codebreaker .label { color: rgba(var(--tuerkis-rgb), .75); }

/* Knöpfe: dunkles Glas mit Verlaufsrand, die Schrift türkis-hell */
body.luxus.edel.welt-codebreaker .btn-primary,
body.luxus.edel.welt-codebreaker .chat-senden {
  border: 1px solid transparent; color: var(--tuerkis-hell);
  background:
    linear-gradient(180deg, rgba(26, 18, 46, .96), rgba(6, 14, 18, .96)) padding-box,
    linear-gradient(100deg, var(--gold), var(--tuerkis)) border-box;
  text-shadow: 0 0 10px rgba(var(--tuerkis-rgb), .45);
  box-shadow: 0 8px 24px -14px rgba(var(--tuerkis-rgb), .8), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
body.luxus.edel.welt-codebreaker .btn-primary:hover,
body.luxus.edel.welt-codebreaker .chat-senden:hover {
  color: #fff; box-shadow: 0 0 28px -6px rgba(var(--tuerkis-rgb), .75), 0 0 0 1px rgba(var(--tuerkis-rgb), .25) inset;
}
body.luxus.edel.welt-codebreaker .btn-primary::after { background: linear-gradient(100deg, transparent, rgba(var(--tuerkis-rgb), .25), transparent); }
body.luxus.edel.welt-codebreaker .btn-ghost { border-color: rgba(var(--gold-rgb), .32); }
body.luxus.edel.welt-codebreaker .btn-ghost:hover { border-color: rgba(var(--tuerkis-rgb), .7); color: var(--tuerkis-hell); background: rgba(var(--tuerkis-rgb), .08); }

/* Felder: türkiser Fokus, türkiser Cursor */
body.luxus.edel.welt-codebreaker .input { caret-color: var(--tuerkis); }
body.luxus.edel.welt-codebreaker .input:focus {
  border-color: rgba(var(--tuerkis-rgb), .75);
  box-shadow: 0 0 0 3px rgba(var(--tuerkis-rgb), .15), 0 0 20px rgba(var(--tuerkis-rgb), .18);
}
body.luxus.edel.welt-codebreaker :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid rgba(var(--tuerkis-rgb), .85); outline-offset: 2px;
}

/* Tabellen: Kopfzeile mit türkiser Unterkante, Zeilen glimmen beim Überfahren */
body.luxus.edel.welt-codebreaker .panel table thead th {
  color: var(--tuerkis-hell);
  border-bottom-color: rgba(var(--tuerkis-rgb), .35);
}
body.luxus.edel.welt-codebreaker .panel table tbody tr:hover { background: linear-gradient(90deg, rgba(var(--tuerkis-rgb), .07), rgba(var(--gold-rgb), .04)); }

/* Kleinigkeiten: Chips, Auswahl, Rollbalken, Startseiten-Streifen */
body.luxus.edel.welt-codebreaker .chip:hover { border-color: rgba(var(--tuerkis-rgb), .55); box-shadow: 0 8px 18px -10px rgba(var(--tuerkis-rgb), .8); }
body.luxus.edel.welt-codebreaker ::selection { background: rgba(var(--tuerkis-rgb), .35); color: #fff; }
body.luxus.edel.welt-codebreaker ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--gold-rgb), .5), rgba(var(--tuerkis-rgb), .45)); }
body.luxus.edel.welt-codebreaker .v3-held > .stripe {
  background-image: linear-gradient(90deg, var(--gold), var(--tuerkis), #c4adff, var(--gold), var(--tuerkis), var(--gold)) !important;
}
body.luxus.edel.welt-codebreaker .v3-held > .fade::before {
  background:
    conic-gradient(from 0deg, rgba(var(--tuerkis-rgb), .26), rgba(var(--gold-rgb), .06) 60deg, transparent 100deg),
    repeating-radial-gradient(circle, transparent 0 34px, rgba(var(--gold-rgb), .14) 34px 35px);
}
body.luxus.edel.welt-codebreaker .meldung:not(.fehler) { border-color: rgba(var(--tuerkis-rgb), .45); box-shadow: 0 0 22px -10px rgba(var(--tuerkis-rgb), .7); }

/* Gangwar · das Menü der Truppe: zu, solange es „hidden" trägt — sonst hob
   display:flex das Verbergen auf und es stand dauerhaft unten im Bild */
.gw-menue[hidden] { display: none !important; }
.gw-menuekopf { display: flex; align-items: center; gap: 8px; }
.gw-menuekopf .gw-menuename { flex: 1; min-width: 0; }
.gw-menue .gw-menuezu {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  font-size: 12px; letter-spacing: 0; color: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .3);
}
.gw-menue .gw-menuezu::before { display: none; }
.gw-menue .gw-menuezu:hover { color: #fff; border-color: #ff4d6a; background: rgba(255, 77, 106, .18); transform: none; }


/* ═══════════════════════════════════════════════════════════════════
   Erfassung — neu im Aufbau der Datenbank (V 10.1.0)
   Kopfband, Werkzeugleiste, Marken und Karten kommen von der Datenbank
   (.db-*); hier steht nur, was die Erfassung zusätzlich braucht: Knöpfe
   statt Links, die Zahlen auf den Karten, das Fenster eines Eintrags.
   ═══════════════════════════════════════════════════════════════════ */
.erf2 [hidden], .erf2-fenster [hidden] { display: none !important; }
.erf2 .db-kopf .db-kennzahl strong { color: var(--c, var(--gold-hell)); }
.erf2 .db-kennzahl.erf2-warnt { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 18px -8px var(--c); }
.erf2 button.db2-teil { padding: 0; font: inherit; cursor: pointer; }
.erf2 button.db-chip { font: inherit; font-size: 12.5px; cursor: pointer; }
.erf2-zeilerechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.erf2 button.db-zurueck { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; }
.erf2-alleweg { margin: 0; }
.erf2-alleweg .btn span {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 11px ui-monospace, Consolas, monospace;
  color: #0c2412; background: #7ec48b;
}
.erf2-rechte { margin: 8px 0 0; font-size: 12px; color: rgba(var(--hell-rgb), .45); }

/* Die Karten: ganz anklickbar, erledigte treten zurück */
.erf2-karte { cursor: pointer; }
.erf2-karte:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.erf2-karte.ist-erledigt { opacity: .72; }
.erf2-karte.ist-erledigt .db-bild img { filter: grayscale(.6) brightness(.8); }
.erf2-karte.ist-erledigt:hover { opacity: 1; }
.erf2-karte .db-titel { overflow-wrap: anywhere; }
.erf2-dateizahl, .erf2-nummer {
  position: absolute; z-index: 1; padding: 2px 8px; border-radius: 999px;
  font: 700 11px ui-monospace, Consolas, monospace; color: #fff;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px);
}
.erf2-dateizahl { left: 10px; bottom: 8px; }
.erf2-nummer { right: 10px; top: 10px; color: var(--c); }
.db-gitter.liste .erf2-dateizahl { left: 6px; bottom: 6px; padding: 1px 6px; font-size: 10px; }
.db-gitter.liste .erf2-nummer { right: 6px; top: 6px; padding: 1px 6px; font-size: 10px; }

/* Die Fenster: „Neu erfassen" und der einzelne Eintrag */
.erf2-fenster { width: min(860px, calc(100vw - 32px)); }
.erf2-formular { overflow-y: auto; padding: 16px 24px 22px; }
.erf2-feldkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.erf2-zeichen { font-size: 11px; color: rgba(var(--hell-rgb), .45); }
.erf2-zeichen.knapp { color: #e0a34a; }
.erf2-formular textarea { width: 100%; resize: vertical; }
.erf2-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.erf2-akte { --c: var(--zweit); }
.erf2-aktehalter { flex: 1; min-height: 0; overflow-y: auto; }
.erf2-detail { display: flex; flex-direction: column; min-height: 100%; }
.erf2-detailkopf {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 14px;
  background: radial-gradient(80% 160% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%), rgba(var(--kopf-rgb), .98);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.erf2-detailwappen {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; font-size: 22px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 22px -6px var(--c);
}
.erf2-detailtitel { flex: 1; min-width: 0; }
.erf2-detailtitel h2 { margin: 2px 0 6px; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.25; overflow-wrap: anywhere; }
.erf2-detailwer { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; color: rgba(var(--hell-rgb), .6); }
.erf2-detailwer .erf-ersatz { width: 22px; height: 22px; font-size: 10px; }
.erf2-detailinhalt { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 24px 18px; }
.erf2-abschnitt { margin: 8px 0 0 !important; display: flex; align-items: center; gap: 8px; }
.erf2-abschnitt span {
  padding: 1px 7px; border-radius: 999px; font: 700 10.5px ui-monospace, Consolas, monospace;
  color: rgba(var(--hell-rgb), .8); background: rgba(255, 255, 255, .07);
}
.erf2-text {
  padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere;
  color: rgba(var(--hell-rgb), .92); background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(var(--gold-rgb), .12); border-left: 3px solid var(--c);
}
.erf2-text.leer { margin: 0; font-style: italic; color: rgba(var(--hell-rgb), .45); }
.erf2-textform textarea { width: 100%; resize: vertical; }

/* Die Bänder: erledigt, übertragen */
.erf2-band {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; font-size: 13px;
  border: 1px solid var(--b); background: color-mix(in srgb, var(--b) 10%, transparent); color: #fff;
}
.erf2-band.erledigt { --b: rgba(126, 196, 139, .55); }
.erf2-band.uebertragen { --b: rgba(46, 230, 208, .55); }
.erf2-band > span:first-child { font-size: 16px; }
.erf2-band a { color: inherit; text-decoration: none; }
.erf2-band a:hover b { text-decoration: underline; }
.erf2-band small { display: block; font-size: 11.5px; color: rgba(var(--hell-rgb), .55); }
.erf2-band form { margin: 0 0 0 auto; }
.erf2-bandknopf {
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .3); transition: background .2s, border-color .2s;
}
.erf2-bandknopf:hover { border-color: var(--zweit); background: rgba(var(--zweit-rgb), .15); }
.erf2-bandknopf.gefahr:hover { border-color: #ff4d6a; background: rgba(255, 77, 106, .2); }

/* Fotos und Anlagen */
.erf2-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.erf2-foto { position: relative; margin: 0; }
.erf2-foto img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), .18); transition: transform .3s, box-shadow .3s;
}
.erf2-foto a:hover img { transform: scale(1.02); box-shadow: 0 10px 24px -12px var(--c); }
.erf2-foto figcaption { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.erf2-foto figcaption form { margin: 0; }
.erf2-mini {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .55); transition: background .2s, border-color .2s;
}
.erf2-mini:hover { border-color: var(--zweit); background: rgba(var(--zweit-rgb), .3); }
.erf2-mini.gefahr:hover { border-color: #ff4d6a; background: rgba(255, 77, 106, .35); }
.erf2-anlagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.erf2-anlagen li { display: flex; align-items: center; gap: 6px; }
.erf2-anlagen li form { margin: 0; }
.erf2-anlage {
  flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none; color: inherit;
  border: 1px solid rgba(var(--gold-rgb), .14); background: rgba(0, 0, 0, .25); transition: border-color .2s, background .2s;
}
.erf2-anlage:hover { border-color: rgba(var(--zweit-rgb), .5); background: rgba(var(--zweit-rgb), .06); }
.erf2-anlagename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.erf2-anlage .mono { font-size: 11px; color: rgba(var(--hell-rgb), .5); }
.erf2-nachreichen summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: rgba(var(--hell-rgb), .75); border: 1px dashed rgba(var(--gold-rgb), .35); transition: border-color .2s, color .2s;
}
.erf2-nachreichen summary::-webkit-details-marker { display: none; }
.erf2-nachreichen summary:hover, .erf2-nachreichen[open] summary { color: #fff; border-color: rgba(var(--zweit-rgb), .6); }
.erf2-nachform { display: grid; gap: 4px; margin-top: 10px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.erf2-zuletzt { margin: 0; font-size: 11.5px; color: rgba(var(--hell-rgb), .4); }

/* Die Taten — unten im Fenster, immer zur Hand */
.erf2-taten {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 24px 16px; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(var(--kopf-rgb), .98);
}
.erf2-stufen, .erf2-rechts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.erf2-stufen form, .erf2-rechts form { margin: 0; }
.erf2-tat {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--c, var(--gold-hell)); background: color-mix(in srgb, var(--c, #a07cff) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #a07cff) 45%, transparent);
  transition: transform .2s, background .2s, box-shadow .2s, color .2s;
}
.erf2-tat:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c, #a07cff) 20%, transparent); box-shadow: 0 6px 16px -8px var(--c, #a07cff); }
.erf2-tat.an { color: #0b0a12; background: var(--c); border-color: var(--c); box-shadow: 0 0 16px -4px var(--c); }
.erf2-tat.bereit { animation: erf2Bereit 2s ease-in-out infinite; }
@keyframes erf2Bereit { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); } }
.erf2-tat.gefahr { --c: #ff6b81; }

@media (max-width: 640px) {
  .erf2-detailkopf, .erf2-detailinhalt, .erf2-taten, .erf2-formular { padding-left: 16px; padding-right: 16px; }
  .erf2-taten { justify-content: flex-start; }
  .erf2-rechts { width: 100%; }
  .erf2-rechts .erf-uebertragknopf { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .erf2-tat.bereit { animation: none; } }

/* Das Fenster eines Eintrags: kein Abstand über dem Kopf (allgemeine section-Regel) */
.erf2-aktehalter > .erf2-detail { margin: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — Ruhiger Grund (V 10.1.0)
   Kein bewegter Hintergrund mehr (Rauch, Datenstriche, Zeichenfetzen,
   Glut, wandernde Lichter — auch nicht im Kopf). Statt fast Schwarz ein
   tiefes Nachtblau-Violett; Kästen, Karten und Kopf heben sich etwas
   heller davon ab. Violett und Türkis bleiben die Lichtfarben.
   ═══════════════════════════════════════════════════════════════════ */
.luxus.welt-codebreaker {
  --nacht:       #12101e;
  --nacht-warm:  #171426;
  --flaeche-rgb:  27,  24,  44;
  --kopf-rgb:     19,  17,  33;
}
body.luxus.edel.welt-codebreaker {
  background-color: #12101e;
  background-image:
    radial-gradient(1100px 700px at 0% -10%, rgba(var(--gold-rgb), .18), transparent 60%),
    radial-gradient(900px 620px at 100% 0%, rgba(var(--tuerkis-rgb), .10), transparent 60%),
    radial-gradient(1200px 800px at 50% 115%, rgba(var(--gold-rgb), .12), transparent 65%),
    linear-gradient(180deg, #151225 0%, #110f1c 100%);
  background-size: auto;
  background-attachment: fixed;
}
/* Die wandernden Lichter hinter allem: aus */
.luxus.edel.welt-codebreaker::before { animation: none !important; opacity: 0; }
/* Der Kopf: kein bewegter Hintergrund, nur Glas */
body.welt-codebreaker header .kopfwelt { display: none; }
body.luxus.edel.welt-codebreaker header { background: rgba(var(--kopf-rgb), .9); }
/* Kästen und Karten: etwas heller, damit sie sich vom Grund abheben */
body.luxus.edel.welt-codebreaker .panel {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(var(--gold-rgb), .08), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(var(--tuerkis-rgb), .05), transparent 60%),
    rgba(var(--flaeche-rgb), .92);
  border-color: rgba(var(--gold-rgb), .2);
}
body.luxus.edel.welt-codebreaker .db-karte {
  background: linear-gradient(180deg, rgba(var(--flaeche-rgb), .96), rgba(var(--kopf-rgb), .98));
  border-color: rgba(var(--gold-rgb), .2);
}
body.luxus.edel.welt-codebreaker .input { background: rgba(10, 9, 20, .6); }

/* Vindicta · Ehemalige: „Wieder aufnehmen" zurück auf die Tafel */
.vd-ehemalige .vd-aufnahme-spalte { width: 1%; white-space: nowrap; text-align: center; }
.vd-aufnehmen {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: #c9fff4; background: rgba(46, 230, 208, .1); border: 1px solid rgba(46, 230, 208, .55);
  transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), background .2s, box-shadow .2s, color .2s;
}
.vd-aufnehmen span { font-size: 14px; transition: transform .3s; }
.vd-aufnehmen:hover:not(:disabled) {
  transform: translateY(-2px); color: #04211d; background: linear-gradient(100deg, #a8f8ee, #2ee6d0);
  box-shadow: 0 8px 20px -10px rgba(46, 230, 208, .9);
}
.vd-aufnehmen:hover:not(:disabled) span { transform: rotate(-45deg) translateX(-2px); }
.vd-aufnehmen:disabled { opacity: .4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════
   Codebreaker — Bewegte Oberfläche (V 10.1.0)
   Der Grund bleibt ruhig; bewegt wird, was man benutzt:
     Kästen      eine Lichtkante läuft oben entlang, ein Lichtschein folgt
                 dem Zeiger (welt3.js setzt --mx / --my)
     Kopf        der aktive Reiter und die Hauptknöpfe tragen einen
                 umlaufenden Verlaufsrand, die Fassung schimmert
     Überschrift der Verlauf wandert langsam durch
     Karten      heben sich, leuchten in ihrer Farbe, das Bild zoomt
     Kennzahlen  heben sich, die Zahl glimmt
     Klicks      eine Welle läuft vom Klickpunkt aus (welt3.js)
     Lesen       oben zeigt eine schmale Leiste, wie weit gescrollt ist
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kästen: wandernde Lichtkante und Zeigerschein ───────────────── */
body.luxus.edel.welt-codebreaker .panel::after {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--gold-rgb), .55) 22%, rgba(var(--tuerkis-rgb), .95) 50%,
              rgba(var(--gold-rgb), .55) 78%, transparent 100%) 0 0 / 200% 100% no-repeat;
  animation: cbKante 8s linear infinite;
}
@keyframes cbKante { from { background-position: 200% 0; } to { background-position: -200% 0; } }
body.luxus.edel.welt-codebreaker .panel {
  background:
    radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--tuerkis-rgb), .075), transparent 60%),
    radial-gradient(120% 70% at 0% 0%, rgba(var(--gold-rgb), .08), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(var(--tuerkis-rgb), .05), transparent 60%),
    rgba(var(--flaeche-rgb), .92);
  transition: border-color .3s, box-shadow .3s;
}
/* Der Kopf der Datenbank und der Erfassung behält seinen eigenen Schein —
   die Lichtkante darf ihn nicht überdecken */
body.luxus.edel.welt-codebreaker .panel.db-kopf::after {
  inset: -60% -20% auto -20%; height: 150%; border-radius: 0; opacity: 1;
  background: radial-gradient(60% 50% at 20% 0%, color-mix(in srgb, var(--c, #888) 22%, transparent), transparent 70%);
  animation: dbSchein 18s ease-in-out infinite alternate;
}

/* ── Überschriften: der Verlauf wandert ─────────────────────────── */
body.luxus.edel.welt-codebreaker h1 { animation: cbTitel 9s ease-in-out infinite alternate; }
@keyframes cbTitel { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ── Kopf: Logo glimmt, Fassung schimmert, Lichtstrich in Türkis ── */
body.luxus.edel.welt-codebreaker .logo img { animation: cbLogo 4.5s ease-in-out infinite; }
@keyframes cbLogo {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), .5)) drop-shadow(0 0 22px rgba(var(--tuerkis-rgb), .12)); }
  50%      { filter: drop-shadow(0 0 16px rgba(var(--gold-rgb), .75)) drop-shadow(0 0 30px rgba(var(--tuerkis-rgb), .35)); }
}
body.luxus.edel.welt-codebreaker .brand-fassung {
  background: linear-gradient(100deg, var(--tuerkis) 0%, var(--tuerkis-hell) 40%, #ffffff 50%, var(--tuerkis-hell) 60%, var(--tuerkis) 100%) 0 0 / 250% 100%;
  animation: cbFassung 5s ease-in-out infinite;
}
@keyframes cbFassung { 0%, 60% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
body.luxus.edel.welt-codebreaker header::after {
  background: linear-gradient(90deg, transparent, rgba(var(--tuerkis-rgb), .95), rgba(var(--gold-rgb), .7), transparent) 0 0 / 32% 100% no-repeat;
  animation: kopfStrich 7s linear infinite;
}
/* Die Reiter fahren beim Laden nacheinander ein */
body.luxus.edel.welt-codebreaker .hauptnav .navlink { animation: cbReiter .5s cubic-bezier(.2, .9, .3, 1.2) backwards; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(2) { animation-delay: 30ms; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(3) { animation-delay: 60ms; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(4) { animation-delay: 90ms; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(5) { animation-delay: 120ms; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(6) { animation-delay: 150ms; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(7) { animation-delay: 180ms; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(8) { animation-delay: 210ms; }
body.luxus.edel.welt-codebreaker .hauptnav .navlink:nth-child(n+9) { animation-delay: 240ms; }
@keyframes cbReiter { from { opacity: 0; transform: translateY(-8px); } }
body.luxus.edel.welt-codebreaker .navlink:hover { transform: translateY(-2px); text-shadow: 0 0 12px rgba(var(--tuerkis-rgb), .6); }
/* Der aktive Reiter: ein Rand, um den Violett und Türkis kreisen */
body.luxus.edel.welt-codebreaker .navlink.an {
  background:
    linear-gradient(rgba(var(--kopf-rgb), .95), rgba(var(--kopf-rgb), .95)) padding-box,
    conic-gradient(from var(--kopf-winkel), var(--gold), var(--tuerkis), #c4adff, var(--tuerkis), var(--gold)) border-box;
  animation: kopfWinkel 5s linear infinite, cbReiter .5s cubic-bezier(.2, .9, .3, 1.2) backwards;
}

/* ── Knöpfe: kreisender Rand, Glanz, Druck ──────────────────────── */
body.luxus.edel.welt-codebreaker .btn-primary,
body.luxus.edel.welt-codebreaker .chat-senden {
  background:
    linear-gradient(180deg, rgba(30, 22, 52, .97), rgba(10, 20, 26, .97)) padding-box,
    conic-gradient(from var(--kopf-winkel), var(--gold), var(--tuerkis), #c4adff, var(--tuerkis), var(--gold)) border-box;
  animation: kopfWinkel 6s linear infinite;
  transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), box-shadow .25s, color .2s;
}
body.luxus.edel.welt-codebreaker .btn-primary:hover,
body.luxus.edel.welt-codebreaker .chat-senden:hover { transform: translateY(-2px); }
body.luxus.edel.welt-codebreaker :is(.btn, .kopfknopf, .db-chip, .erf2-tat, .chip):active { transform: scale(.96); }
body.luxus.edel.welt-codebreaker .btn-primary::after { animation: cbGlanz 5s ease-in-out 1.5s infinite; }
@keyframes cbGlanz { 0%, 70% { left: -60%; } 100% { left: 130%; } }
body.luxus.edel.welt-codebreaker .btn-ghost { transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), border-color .2s, color .2s, background .2s, box-shadow .2s; }
body.luxus.edel.welt-codebreaker .btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(var(--tuerkis-rgb), .9); }

/* ── Karten: heben sich und leuchten in ihrer Farbe ─────────────── */
body.luxus.edel.welt-codebreaker .db-karte { transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), border-color .3s, box-shadow .3s; }
body.luxus.edel.welt-codebreaker .db-karte:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 28px 50px -24px rgba(0, 0, 0, 1), 0 0 0 1px color-mix(in srgb, var(--c, #888) 40%, transparent),
              0 0 34px -12px var(--c, rgba(var(--tuerkis-rgb), .8));
}
body.luxus.edel.welt-codebreaker .db-karte::before { transition: height .3s; }
body.luxus.edel.welt-codebreaker .db-karte:hover::before { height: 4px; box-shadow: 0 0 14px var(--c, var(--tuerkis)); }
body.luxus.edel.welt-codebreaker .db-gitter.liste .db-karte:hover { transform: translateX(6px); }

/* ── Kennzahlen: heben sich, die Zahl glimmt ────────────────────── */
body.luxus.edel.welt-codebreaker :is(.db-kennzahl, .vd-kennzahl, .tr-kennzahl, .dash-kachel) {
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), border-color .3s, box-shadow .3s;
}
body.luxus.edel.welt-codebreaker :is(.db-kennzahl, .vd-kennzahl):hover {
  transform: translateY(-3px); border-color: rgba(var(--tuerkis-rgb), .5);
  box-shadow: 0 12px 26px -14px rgba(var(--tuerkis-rgb), .8);
}
body.luxus.edel.welt-codebreaker :is(.db-kennzahl, .vd-kennzahl) strong { animation: cbZahl 3.5s ease-in-out infinite; }
@keyframes cbZahl { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 14px rgba(var(--tuerkis-rgb), .55); } }

/* ── Marken, Chips, Felder, Tabellen ────────────────────────────── */
body.luxus.edel.welt-codebreaker :is(.db-chip, .chip, .sank-pille) { transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), background .2s, border-color .2s, box-shadow .2s; }
body.luxus.edel.welt-codebreaker :is(.db-chip, .sank-pille):hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px var(--c, rgba(var(--tuerkis-rgb), .9)); }
body.luxus.edel.welt-codebreaker .input:focus { animation: cbFokus .6s ease-out; }
@keyframes cbFokus { from { box-shadow: 0 0 0 8px rgba(var(--tuerkis-rgb), .25), 0 0 24px rgba(var(--tuerkis-rgb), .3); } }
body.luxus.edel.welt-codebreaker .panel table tbody tr > td:first-child { transition: box-shadow .25s; }
body.luxus.edel.welt-codebreaker .panel table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--tuerkis); }
body.luxus.edel.welt-codebreaker .sec-title::after { background-size: 200% 100%; animation: v3Linie 1.1s cubic-bezier(.2, .8, .2, 1) .2s backwards, cbLinie 6s linear 1.3s infinite; }
@keyframes cbLinie { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Die Welle beim Klick (welt3.js) ────────────────────────────── */
.cb-welle {
  position: absolute; z-index: 5; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--tuerkis-rgb), .55), rgba(var(--tuerkis-rgb), 0) 70%);
  animation: cbWelle .6s ease-out forwards;
}
@keyframes cbWelle { from { transform: scale(0); opacity: 1; } to { transform: scale(var(--w, 18)); opacity: 0; } }

/* ── Die Leseleiste oben (welt3.js) ─────────────────────────────── */
.cb-leseleiste {
  position: fixed; left: 0; top: 0; z-index: 9999; height: 2px; width: 100%; pointer-events: none;
  transform-origin: left; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--gold), var(--tuerkis), #c4adff);
  box-shadow: 0 0 10px rgba(var(--tuerkis-rgb), .8);
}

@media (prefers-reduced-motion: reduce) {
  body.luxus.edel.welt-codebreaker :is(h1, .logo img, .brand-fassung, .navlink, .btn-primary, .chat-senden,
    .db-kennzahl strong, .vd-kennzahl strong, .input) { animation: none !important; }
  body.luxus.edel.welt-codebreaker .panel::after, body.luxus.edel.welt-codebreaker header::after,
  body.luxus.edel.welt-codebreaker .btn-primary::after, body.luxus.edel.welt-codebreaker .sec-title::after { animation: none !important; }
  .cb-welle, .cb-leseleiste { display: none; }
}