/* =========================================================================
   Cannabis Grow Deutschland — "Missionskontrolle"
   Futurismus aus Präzision, nicht aus Neon: Graphit-Grund mit Leitstand-
   Raster, Chlorophyllgrün und Bernstein als Signale, Monospace für alles,
   was Messwert oder Metadatum ist. Karten sind weiche Datenmodule mit
   Leuchtkante. Keine externen Assets: Schriften aus dem System, Texturen
   inline erzeugt. Die Seite funktioniert vollständig ohne JavaScript;
   /static/app.js verbessert nur Lightbox und Filter.
   ========================================================================= */

:root {
  /* -- Schrift ---------------------------------------------------------- */
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, Candara,
               Corbel, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono",
               ui-monospace, monospace;

  /* Annäherung an den Logo-Schriftzug: geometrische Groteske mit
     kreisrunden Formen und spitzem A. Century Gothic sitzt am nächsten,
     danach Futura/Avenir (macOS) und Tw Cen MT. Der echte Schriftzug
     bleibt als Grafik — aus einem KI-Logo lässt sich keine Schrift lesen. */
  --font-logo: "Century Gothic", Questrial, Futura, "Avenir Next", Avenir,
               "Tw Cen MT", "Poppins", "Segoe UI", sans-serif;

  /* -- Farbe ------------------------------------------------------------ */
  --ink:        #0b0d10;   /* Grund */
  --ink-1:      #101318;
  --ink-2:      #151a21;
  --ink-3:      #1a212b;

  --paper:      #e8edf2;
  --muted:      #8b98a5;
  --faint:      #55616d;

  --leaf:       #4ade80;   /* Chlorophyll — Primärsignal */
  --leaf-dim:   #16a34a;
  --amber:      #fbbf24;   /* Warnung, Wärme */
  --amber-soft: #fde68a;
  --cyan:       #38bdf8;   /* Messwerte */
  --violet:     #a78bfa;
  --rose:       #f87171;

  --line:        rgba(139, 152, 165, .13);
  --line-strong: rgba(139, 152, 165, .28);
  --grid:        rgba(139, 152, 165, .09);

  /* -- Phasen ----------------------------------------------------------- */
  --ph-keimung: var(--amber-soft);
  --ph-saemling: #86efac;
  --ph-vegetation: var(--leaf);
  --ph-bluete: var(--violet);
  --ph-spuelen: var(--cyan);
  --ph-ernte: var(--amber);
  --ph-trocknen: #d6b88a;
  --ph-curing: #e3c968;
  --ph-abgeschlossen: var(--faint);

  /* -- Maße ------------------------------------------------------------- */
  --radius: 12px;      /* Module */
  --radius-lg: 18px;   /* Karten */
  --radius-xl: 26px;   /* Bühnen */
  --shadow: 0 30px 70px -38px rgba(0, 0, 0, .95);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Leitstand-Raster: feine Linien, nach unten ausgeblendet. Ersetzt das
   Filmkorn des Vorgängers — Präzision statt Patina. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(130% 90% at 50% 0%, #000 25%, transparent 78%);
  opacity: .55;
}

/* Ein Hauch Chlorophyll von oben — die LED-Leiste bleibt, aber kühler. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(110% 50% at 70% -12%, rgba(74, 222, 128, .07), transparent 60%),
    radial-gradient(80% 40% at 10% -8%, rgba(56, 189, 248, .05), transparent 60%);
}

::selection { background: rgba(74, 222, 128, .3); color: #fff; }

a { color: var(--leaf); text-decoration: none; }
a:hover { color: var(--amber-soft); }

h1, h2, h3, h4 {
  font-family: var(--font-logo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0;
}

/* =========================================================================
   Gerüst: Topbar statt Seitenleiste — mehr Bühne für Inhalt.
   ========================================================================= */
.shell { position: relative; z-index: 2; min-height: 100vh; }

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 34px;
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand__logo {
  display: block;
  height: 27px;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(74, 222, 128, .3));
  opacity: .95;
  transition: opacity .3s;
}
.brand:hover .brand__logo { opacity: 1; }

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* umbricht auf schmalen Schirmen, statt zu scrollen —
                        sonst schneidet der Scrollcontainer die Aufklapper ab */
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.nav__group { display: none; } /* Gruppen trägt in der Topbar die Reihenfolge */
.nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  color: var(--muted);
  font-size: 13.5px;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.nav a:hover { color: var(--paper); background: rgba(139, 152, 165, .09); }
.nav a.is-active { color: var(--leaf); background: rgba(74, 222, 128, .12); }
.nav__icon { flex: none; width: 15px; height: 15px; opacity: .8; }
.nav__count {
  min-width: 19px;
  padding: 0 6px;
  border-radius: 100px;
  background: rgba(251, 191, 36, .15);
  border: 1px solid rgba(251, 191, 36, .4);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  line-height: 1.6;
}

/* Aufklapp-Menüs in der Topbar (Wissen, Konto) — ohne JS bedienbar,
   app.js schließt sie zusätzlich beim Klick daneben. */
.nav-drop { position: relative; }
.nav-drop > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  color: var(--muted);
  font-size: 13.5px;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover { color: var(--paper); background: rgba(139, 152, 165, .09); }
.nav-drop > summary.is-active { color: var(--leaf); background: rgba(74, 222, 128, .12); }
.nav-drop__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(16, 19, 24, .97);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.nav-drop__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
}
.nav-drop__panel a:hover { color: var(--paper); background: rgba(74, 222, 128, .08); }

/* Profil-Menü rechts: Panel klappt nach links auf. */
.nav-drop--right .nav-drop__panel { left: auto; right: 0; }
summary.who {
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
  padding: 3px 6px;
  transition: background .18s;
}
summary.who::-webkit-details-marker { display: none; }
summary.who:hover { background: rgba(139, 152, 165, .09); }

/* Der Team-Eintrag setzt sich vom Community-Teil ab. */
.nav__team {
  border: 1px solid var(--line-strong);
  margin-left: 6px;
}

/* Zweitnavigation des Team-Bereichs — unter der Topbar, über dem Inhalt. */
.teamnav {
  /* bewusst nicht sticky: die Topbar kann auf schmalen Schirmen
     mehrzeilig werden, eine feste top-Position würde überlappen */
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 34px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(251, 191, 36, .2);
  background: color-mix(in srgb, var(--ink-1) 88%, transparent);
  backdrop-filter: blur(12px);
}
.teamnav::-webkit-scrollbar { display: none; }
.teamnav__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--amber);
  margin-right: 10px;
  flex: none;
}
.teamnav a {
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.teamnav a:hover { color: var(--paper); background: rgba(139, 152, 165, .09); }
.teamnav a.is-on { color: var(--amber); background: rgba(251, 191, 36, .12); }
.teamnav__back { margin-left: auto; color: var(--faint); font-family: var(--font-mono); font-size: 11.5px; }

.rail__foot { flex: none; margin-left: auto; }
.who { display: flex; align-items: center; gap: 10px; }
.who img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); }
.who__name { display: block; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.who__role {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--leaf);
}
.who__out { color: var(--faint); font-size: 14px; margin-left: 4px; }
.who__out:hover { color: var(--rose); }

/* -- Inhaltsspalte --------------------------------------------------------- */
.main {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 46px 40px 100px;
  max-width: 1240px;
  margin: 0 auto;
}

.page-head { margin-bottom: 42px; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--leaf);
  border: 1px solid rgba(74, 222, 128, .3);
  border-radius: 100px;
  padding: 5px 16px;
  margin-bottom: 20px;
  background: rgba(74, 222, 128, .06);
}
.kicker a { color: inherit; }
.page-head h1 {
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: .98;
}
.page-head h1 em { font-style: normal; color: var(--leaf); }
.lede {
  max-width: 64ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16.5px;
}

.section { margin-top: 58px; }
.section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.section__head h2 { font-size: 22px; }
.section__head .more {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.section__head .more:hover { color: var(--leaf); }

/* =========================================================================
   Bausteine
   ========================================================================= */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  padding: 22px 24px;
}

/* Telemetrie-Kacheln: runde Module mit Leuchtkante oben. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.tile {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  transition: border-color .25s, transform .25s;
}
.tile::after {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c, var(--leaf)), transparent);
  opacity: .75;
}
.tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tile__value {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--c, var(--leaf));
}
.tile__value.is-amber { --c: var(--amber); }
.tile__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* -- Etiketten -------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.badge--phase { color: var(--c, var(--leaf)); border-color: color-mix(in srgb, var(--c, var(--leaf)) 42%, transparent); background: color-mix(in srgb, var(--c, var(--leaf)) 7%, transparent); }
.badge--phase::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c, var(--leaf)); box-shadow: 0 0 8px var(--c, var(--leaf));
}
.badge--bad { color: var(--rose); border-color: rgba(248, 113, 113, .4); }
.badge--warn { color: var(--amber); border-color: rgba(251, 191, 36, .4); }
.badge--good { color: var(--leaf); border-color: rgba(74, 222, 128, .4); }

[data-phase="keimung"]      { --c: var(--ph-keimung); }
[data-phase="saemling"]     { --c: var(--ph-saemling); }
[data-phase="vegetation"]   { --c: var(--ph-vegetation); }
[data-phase="bluete"]       { --c: var(--ph-bluete); }
[data-phase="spuelen"]      { --c: var(--ph-spuelen); }
[data-phase="ernte"]        { --c: var(--ph-ernte); }
[data-phase="trocknen"]     { --c: var(--ph-trocknen); }
[data-phase="curing"]       { --c: var(--ph-curing); }
[data-phase="abgeschlossen"]{ --c: var(--ph-abgeschlossen); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  transition: all .18s;
}
.chip:hover { border-color: var(--leaf-dim); color: var(--paper); background: rgba(74, 222, 128, .07); }
.chip.is-on { background: var(--leaf); border-color: var(--leaf); color: var(--ink); font-weight: 600; }

/* -- Bedienelemente --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14.5px;
  cursor: pointer;
  transition: all .2s;
}
.btn:hover { border-color: var(--leaf); color: var(--leaf); background: rgba(74, 222, 128, .07); }
.btn--primary {
  background: var(--leaf);
  border-color: var(--leaf);
  color: #06170c;
  font-weight: 600;
}
.btn--primary:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #171001;
  box-shadow: 0 0 34px -8px rgba(251, 191, 36, .6);
}
.btn--ghost { border-color: var(--line); color: var(--muted); }
.btn--danger { border-color: rgba(248, 113, 113, .38); color: var(--rose); }
.btn--danger:hover { border-color: var(--rose); background: rgba(248, 113, 113, .1); color: #ffb9b3; }

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}
.field small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 5px; letter-spacing: 0; text-transform: none; font-family: var(--font-body); }

input[type="text"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 8, 10, .65);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .18s, box-shadow .18s;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
select[multiple] { min-height: 140px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--leaf-dim);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .13);
}

.switch { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch:last-child { border-bottom: 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  flex: none;
  width: 40px; height: 22px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: rgba(6, 8, 10, .8);
  position: relative;
  transition: all .22s;
}
.switch__track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--faint);
  transition: all .22s cubic-bezier(.34, 1.4, .64, 1);
}
.switch input:checked + .switch__track { background: rgba(74, 222, 128, .22); border-color: var(--leaf); }
.switch input:checked + .switch__track::after { left: 21px; background: var(--leaf); box-shadow: 0 0 10px var(--leaf); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--amber); outline-offset: 2px; }
.switch__text { font-size: 15px; }
.switch__text small { display: block; color: var(--faint); font-size: 12.5px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 28px; }

.form-bar {
  position: sticky;
  bottom: 0;
  margin-top: 34px;
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(11, 13, 16, .3), var(--ink) 55%);
  backdrop-filter: blur(6px);
}
.form-bar p { margin: 0; color: var(--faint); font-size: 13.5px; }

/* -- Tabellen --------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left;
  padding: 0 14px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr { transition: background .18s; }
.table tbody tr:hover { background: rgba(74, 222, 128, .04); }
.table .num { font-family: var(--font-mono); font-size: 17px; color: var(--leaf); }

/* -- Rangliste -------------------------------------------------------------- */
.rank { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rank__pos {
  flex: none;
  width: 52px;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--faint);
  text-align: right;
}
.rank__pos::before { content: "#"; opacity: .5; font-size: 13px; }
.rank:nth-child(1) .rank__pos { color: var(--amber); text-shadow: 0 0 16px rgba(251, 191, 36, .5); }
.rank:nth-child(2) .rank__pos { color: #cfd8e0; }
.rank:nth-child(3) .rank__pos { color: #c98d5d; }
.rank__avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; }
.rank__body { flex: 1; min-width: 0; }
.rank__name { display: block; font-size: 15.5px; }
.rank__meter { height: 4px; margin-top: 8px; background: rgba(139, 152, 165, .12); border-radius: 4px; overflow: hidden; }
.rank__meter i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--leaf-dim), var(--leaf));
  box-shadow: 0 0 10px var(--leaf);
  border-radius: 4px;
  width: var(--p, 0%);
  animation: grow-w 1.1s cubic-bezier(.22, .8, .3, 1) both;
}
.rank__lvl { flex: none; text-align: right; }
.rank__lvl b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 22px; line-height: 1; color: var(--leaf); }
.rank__lvl span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

/* -- Grow-Karten ------------------------------------------------------------ */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }

.grow {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(165deg, var(--ink-2), var(--ink-1));
  transition: transform .3s cubic-bezier(.22, .8, .3, 1), border-color .3s, box-shadow .3s;
}
.grow:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c, var(--leaf)) 45%, transparent);
  box-shadow: var(--shadow), 0 0 44px -24px var(--c, var(--leaf));
}
.grow__cover {
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 40%, rgba(74, 222, 128, .08), rgba(11, 13, 16, .9));
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.grow__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.grow:hover .grow__cover img { transform: scale(1.045); }
.grow__cover:not(:has(img)) { aspect-ratio: 16 / 5; }
.grow__cover .placeholder { color: var(--line-strong); width: 40px; height: 40px; }
.grow__cover .badge { position: absolute; top: 12px; left: 12px; background: rgba(11, 13, 16, .82); backdrop-filter: blur(4px); }
.grow__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.grow__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--paper); }
.grow__strain { color: var(--muted); font-size: 14px; }
.grow__meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* -- Kompaktliste ------------------------------------------------------------ */
.minis { display: flex; flex-direction: column; }
.mini {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  transition: padding-left .22s, background .22s;
}
.mini:hover { background: rgba(74, 222, 128, .05); padding-left: 12px; }
.mini__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--leaf));
  box-shadow: 0 0 10px var(--c, var(--leaf));
}
.mini__body { flex: 1; min-width: 0; }
.mini__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini__sub {
  display: block;
  font-size: 13px;
  color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini__side { flex: none; text-align: right; }
.mini__phase { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--c, var(--leaf)); }
.mini__day {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* =========================================================================
   Zeitstrahl — das Missionslog. T+-Angabe links, Beitrag als Modul rechts.
   ========================================================================= */
.timeline { position: relative; padding-left: 96px; }
.timeline::before {
  content: "";
  position: absolute; left: 34px; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, var(--leaf), rgba(74, 222, 128, .05));
}
.tl-item { position: relative; padding: 0 0 40px; }
.tl-item::before {
  content: "";
  position: absolute; left: -66px; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--leaf);
  box-shadow: 0 0 12px rgba(74, 222, 128, .55);
}
.tl-item:hover::before { background: var(--leaf); }

/* T+-Spalte: der Missionstag prominent, Datum darunter. */
.tl-t {
  position: absolute; left: -96px; top: 4px;
  width: 56px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--leaf);
  line-height: 1.45;
}
.tl-t small { display: block; color: var(--faint); font-size: 9px; letter-spacing: .08em; }

.tl-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  padding: 20px 24px;
  transition: border-color .25s, transform .25s;
}
.tl-item:hover .tl-card { border-color: rgba(74, 222, 128, .3); transform: translateX(4px); }

.tl-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}
.tl-text { margin: 8px 0 0; }
.tl-metrics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.metric {
  padding: 4px 12px;
  border: 1px solid rgba(56, 189, 248, .25);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cyan);
  background: rgba(56, 189, 248, .07);
}
.metric b { color: var(--paper); font-weight: 600; }
.tl-photo { margin-top: 13px; max-width: 340px; border-radius: var(--radius); border: 1px solid var(--line); display: block; }

/* Missionsbriefing: der erste Beitrag als hervorgehobene Bühne. */
.briefing {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(74, 222, 128, .3);
  background: linear-gradient(140deg, rgba(74, 222, 128, .07), var(--ink-1) 45%);
  box-shadow: var(--shadow), 0 0 60px -30px rgba(74, 222, 128, .4);
  margin: 0 0 54px;
}
.briefing__data { padding: 30px 34px; min-width: 0; }
.briefing__label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 16px;
}
.briefing__label::after { content: ""; flex: 1; height: 1px; background: rgba(74, 222, 128, .25); }
.briefing__text { margin-top: 18px; }
.briefing__foto { position: relative; min-height: 320px; }
.briefing__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.briefing__foto .badge {
  position: absolute; left: 16px; bottom: 14px;
  background: rgba(11, 13, 16, .8); backdrop-filter: blur(6px);
  border-color: rgba(74, 222, 128, .4); color: var(--leaf);
}

/* Sortier-/Ansichtsleiste über dem Verlauf */
.sortbar { display: flex; gap: 6px; }
.sortbar a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.sortbar a.is-on { border-color: var(--leaf); color: var(--leaf); background: rgba(74, 222, 128, .08); }
.sortbar a:hover:not(.is-on) { color: var(--paper); }

/* -- Fotostrecke ------------------------------------------------------------- */
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.strip a { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s, filter .45s; filter: saturate(.95); }
.strip a:hover img { transform: scale(1.07); filter: saturate(1.15); }
.strip a::after {
  content: attr(data-date);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 9px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8));
  opacity: 0; transition: opacity .3s;
}
.strip a:hover::after { opacity: 1; }

/* =========================================================================
   Galerie — Mauerwerk über Spalten, Bildzellen mit Metadaten-Kante.
   ========================================================================= */
.wall { columns: 4 240px; column-gap: 12px; }
.wall a {
  position: relative;
  display: block;
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  break-inside: avoid;
}
.wall img { width: 100%; display: block; transition: transform .4s, filter .4s; filter: saturate(.95); }
.wall a:hover img { transform: scale(1.04); filter: saturate(1.15); }
.wall a::after {
  content: attr(data-label);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 10px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
  opacity: 0; transition: opacity .3s;
}
.wall a:hover::after { opacity: 1; }

/* Lightbox: natives <dialog>, von app.js geöffnet. Ohne JS öffnet der Link
   das Bild wie bisher in einem neuen Tab. */
.lightbox {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(11, 13, 16, .97);
  padding: 10px;
  max-width: min(94vw, 1400px);
  max-height: 94vh;
}
.lightbox::backdrop { background: rgba(4, 5, 7, .85); backdrop-filter: blur(6px); }
.lightbox img { max-width: 100%; max-height: calc(94vh - 70px); display: block; border-radius: var(--radius); }
.lightbox figcaption {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 6px 2px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; color: var(--muted);
}
.lightbox figcaption a { margin-left: auto; }
.lightbox .lb-close {
  background: none; border: 1px solid var(--line-strong); color: var(--muted);
  border-radius: 100px; padding: 4px 14px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
}
.lightbox .lb-close:hover { color: var(--rose); border-color: var(--rose); }

/* =========================================================================
   Diagramme
   ========================================================================= */
.chart { margin: 0 0 26px; color: var(--leaf); }
.chart--amber { color: var(--amber); }
.chart--cyan { color: var(--cyan); }
.chart figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.chart__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}
.chart__now { font-family: var(--font-mono); font-size: 24px; color: currentColor; line-height: 1; }
.chart__now em { font-style: normal; font-size: 12px; color: var(--faint); margin-left: 3px; }
.chart svg { width: 100%; height: 190px; overflow: visible; }

.ch-grid { stroke: rgba(139, 152, 165, .1); stroke-width: 1; }
.ch-band { fill: currentColor; opacity: .055; }
.ch-tick { fill: #7d8a97; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; }
.ch-area { opacity: 0; animation: fade-in .7s ease-out .55s forwards; }
.ch-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px currentColor);
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1.5s cubic-bezier(.3, .8, .35, 1) .12s forwards;
}
.ch-dot { fill: var(--ink); stroke: currentColor; stroke-width: 1.5; opacity: 0; animation: fade-in .3s ease-out forwards; }
.ch-dot:hover { fill: currentColor; r: 4; }
.ch-head { fill: currentColor; opacity: 0; animation: pop .5s cubic-bezier(.34, 1.5, .64, 1) 1.3s forwards; filter: drop-shadow(0 0 8px currentColor); }

/* -- Balkenliste -------------------------------------------------------------- */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.bar__name { flex: none; width: 148px; font-size: 14px; }
.bar__track { flex: 1; height: 6px; background: rgba(139, 152, 165, .1); border-radius: 6px; overflow: hidden; }
.bar__fill {
  display: block; height: 100%; width: var(--w);
  background: linear-gradient(90deg, var(--leaf-dim), var(--leaf));
  border-radius: 6px;
  animation: grow-w .9s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.bar__value { flex: none; font-family: var(--font-mono); font-size: 14px; color: var(--muted); width: 36px; text-align: right; }

/* =========================================================================
   Wissen / Aufklappbares
   ========================================================================= */
details.acc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 9px;
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  transition: border-color .22s;
}
details.acc[open] { border-color: rgba(74, 222, 128, .3); }
details.acc summary {
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .25s;
}
details.acc[open] summary::after { transform: rotate(-135deg); }
details.acc summary:hover { color: var(--leaf); }
.acc__body { padding: 0 20px 20px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 0; }
.acc__body p { margin: 0 0 12px; }
.acc__body p:last-child { margin-bottom: 0; }

.dl { margin: 0; }
.dl dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 15px;
}
.dl dt:first-child { margin-top: 0; }
.dl dd { margin: 5px 0 0; }

/* -- Spezifikationsliste ------------------------------------------------------ */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.specs > div {
  background: rgba(6, 8, 10, .55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
}
.specs dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.specs dd { margin: 5px 0 0; font-size: 15px; }
.specs dd b, .specs dd strong { color: var(--leaf); }

/* =========================================================================
   Meldungen
   ========================================================================= */
.flash-stack { position: fixed; top: 70px; right: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.flash {
  padding: 13px 18px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--leaf);
  border-radius: var(--radius);
  background: rgba(16, 19, 24, .96);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size: 14.5px;
  animation: slide-in .45s cubic-bezier(.22, .8, .3, 1) both;
}
.flash--warn { border-left-color: var(--amber); }
.flash--bad { border-left-color: var(--rose); }

.note {
  border-left: 2px solid var(--amber);
  padding: 4px 0 4px 16px;
  color: var(--muted);
  font-size: 14.5px;
}

.empty { text-align: center; padding: 70px 20px; color: var(--faint); }
.empty svg { width: 46px; height: 46px; opacity: .35; margin-bottom: 16px; }

.probe {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: rgba(6, 8, 10, .75);
  border: 1px solid var(--line);
  border-left: 2px solid var(--rose);
  border-radius: var(--radius);
  padding: 12px 15px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
}

.score {
  font-family: var(--font-mono);
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.03em;
}
.score--good { color: var(--leaf); }
.score--warn { color: var(--amber); }
.score--bad { color: var(--rose); }

/* =========================================================================
   Aufbereitete Discord-Beiträge
   ========================================================================= */
.prose { max-width: 68ch; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 11px; }

.prose h3, .prose h4, .prose h5 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--paper);
  margin: 20px 0 8px;
  line-height: 1.25;
}
.prose h3 { font-size: 19px; }
.prose h4 { font-size: 17px; }
.prose h5 { font-size: 15px; color: var(--muted); }

.prose strong { color: var(--paper); font-weight: 600; }
.prose em { font-style: italic; }
.prose del { color: var(--faint); }
.prose u { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

.prose ul, .prose ol { margin: 8px 0 12px; padding-left: 21px; }
.prose li { margin: 3px 0; }
.prose ul { list-style: none; padding-left: 17px; }
.prose ul > li::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin: 0 9px 0 -13px;
  vertical-align: 3px;
  border-radius: 50%;
  background: var(--leaf-dim);
}

.prose blockquote {
  margin: 11px 0;
  padding: 2px 0 2px 15px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
}

.prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: 1px 5px;
  border-radius: var(--radius);
  background: rgba(6, 8, 10, .7);
  border: 1px solid var(--line);
  color: var(--amber-soft);
}
.prose .codeblock {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 12px 0;
  padding: 12px 15px;
  border-radius: var(--radius);
  background: rgba(6, 8, 10, .75);
  border: 1px solid var(--line);
  color: var(--muted);
  overflow-x: auto;
  white-space: pre;
}

.prose .mention {
  padding: 1px 6px;
  border-radius: 100px;
  background: rgba(74, 222, 128, .1);
  color: var(--leaf);
  font-size: .94em;
  white-space: nowrap;
}

.prose .spoiler {
  background: var(--ink-3);
  color: transparent;
  border-radius: 3px;
  transition: color .2s, background .2s;
}
.prose .spoiler:hover, .prose .spoiler:focus-within { background: rgba(6, 8, 10, .6); color: var(--muted); }

.prose a { overflow-wrap: anywhere; }

.prose .emoji {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -.28em;
  margin: 0 .06em;
  object-fit: contain;
}

.prose .subtext {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--faint);
  margin: 10px 0 0;
}

/* =========================================================================
   Kanal- und Rollenauswahl (unverändert in der Mechanik, neu im Kleid)
   ========================================================================= */
.pick {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 8, 10, .4);
  overflow: hidden;
}
.pick__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 10, .5);
}
.pick__count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--faint);
}
.pick__count.is-on { color: var(--leaf); }

.pick__group { border-bottom: 1px solid var(--line); }
.pick__group:last-child { border-bottom: 0; }
.pick__group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  transition: background .2s;
}
.pick__group > summary::-webkit-details-marker { display: none; }
.pick__group > summary::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .25s;
  flex: none;
}
.pick__group[open] > summary::before { transform: rotate(45deg); }
.pick__group > summary:hover { background: rgba(74, 222, 128, .05); }
.pick__gname { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.pick__gmeta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  flex: none;
}
.pick__gmeta b { color: var(--leaf); }

.pick__list {
  padding: 4px 0 8px;
  max-height: 340px;
  overflow-y: auto;
}
.pick__list--flat { max-height: 400px; }

.pick__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 30px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.pick__item:hover { background: rgba(74, 222, 128, .06); }
.pick__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick__box {
  flex: none;
  width: 15px; height: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  position: relative;
  transition: border-color .2s, background .2s;
}
.pick__item input:checked + .pick__box {
  background: var(--leaf-dim);
  border-color: var(--leaf);
}
.pick__item input:checked + .pick__box::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(40deg);
}
.pick__item input:focus-visible + .pick__box {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.pick__item input:disabled + .pick__box { opacity: .4; }
.pick__item input:disabled ~ .pick__label { color: var(--faint); }
.pick__label { min-width: 0; overflow-wrap: anywhere; }

.pick__typ {
  margin-left: auto;
  flex: none;
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
}
.pick__item.is-managed { opacity: .55; cursor: not-allowed; }

.pick__item.is-gone .pick__label {
  color: var(--rose);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.field select optgroup {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--ink-1);
}
.field select option { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.field small code {
  font-size: 11.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(6, 8, 10, .6);
  border: 1px solid var(--line);
  color: var(--amber-soft);
}

.quote {
  border-left: 2px solid var(--line-strong);
  padding: 6px 0 6px 16px;
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
}
.diff__old, .diff__new {
  padding: 3px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.diff__old { color: var(--faint); background: rgba(6, 8, 10, .55); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.diff__new { color: var(--leaf); background: rgba(74, 222, 128, .07); border-color: rgba(74, 222, 128, .22); }
.diff__arrow { color: var(--faint); }

.list { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.list li + li { margin-top: 5px; }

.split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: start; }
.stack > * + * { margin-top: 22px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--font-mono); font-size: 13px; }
.right { text-align: right; }

/* =========================================================================
   Reiter
   ========================================================================= */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 28px 0 30px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line);
}
.tab {
  position: relative;
  padding: 10px 15px 11px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.tab:hover { color: var(--paper); background: rgba(74, 222, 128, .05); }
.tab.is-on {
  color: var(--paper);
  border-bottom-color: var(--leaf);
}
.tab.is-on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--leaf);
  box-shadow: 0 0 10px var(--leaf);
}
.tab--all {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* =========================================================================
   Vorschaukarte für Nachrichtenvorlagen
   ========================================================================= */
.split-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1080px) {
  .split-text { grid-template-columns: 1fr; }
}

.vorschau {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(6, 8, 10, .45);
  overflow: hidden;
}
.vorschau__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 10, .55);
}
.vorschau__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--leaf-dim);
}
.vorschau__hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.vorschau__body { padding: 16px 15px; }
.vorschau__warnung {
  margin: 0;
  padding: 10px 15px;
  border-top: 1px solid rgba(248, 113, 113, .3);
  background: rgba(248, 113, 113, .07);
  color: var(--rose);
  font-size: 13px;
}
.vorschau__warnung code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(6, 8, 10, .5);
}

.dc-msg { display: flex; gap: 13px; }
.dc-avatar {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(74, 222, 128, .12);
  border: 1px solid var(--line-strong);
  font-size: 17px;
}
.dc-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dc-name { color: var(--leaf); font-size: 14.5px; font-weight: 600; }
.dc-bot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--leaf-dim);
  color: var(--ink);
}
.dc-zeit { font-size: 11.5px; color: var(--faint); }
.dc-text { margin-top: 3px; font-size: 14.5px; }
.dc-text p { margin: 0 0 7px; }

/* =========================================================================
   Events — Contests und Gewinnspiele. Bernstein statt Chlorophyll: die
   Trophäenfarbe hebt den Bereich vom grünen Alltag der Seite ab.
   ========================================================================= */
.kicker--event {
  color: var(--amber);
  border-color: rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .07);
}

.event-card {
  position: relative;
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, rgba(251, 191, 36, .08), var(--ink-1) 50%);
  box-shadow: 0 0 50px -28px rgba(251, 191, 36, .5);
  padding: 26px 30px;
}
.event-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.event-card__head h3 { font-size: 22px; }
.event-card__preise {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber-soft);
}

/* Contest-Tagebuchkarten: Bernstein-Kante, Pokal im Etikett. */
.grow--contest { border-color: rgba(251, 191, 36, .3); --c: var(--amber); }
.grow--contest .grow__cover .badge {
  background: rgba(11, 13, 16, .85);
  color: var(--amber);
  border-color: rgba(251, 191, 36, .5);
}
.grow--contest.is-beendet { opacity: .78; }
.grow--contest.is-beendet:hover { opacity: 1; }

/* News-Meldungen in der Seitenspalte der Übersicht. */
.news-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.news-item:last-of-type { border-bottom: 0; }
.news-item > b { display: block; font-size: 15px; }
.news-item .mini__day { display: block; margin: 2px 0 6px; }

/* Hinweisbanner auf der Übersicht, wenn ein Contest läuft. */
.event-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 18px 24px;
  border: 1px solid rgba(251, 191, 36, .35);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(251, 191, 36, .1), rgba(21, 26, 33, .6) 60%);
}
.event-banner__text { flex: 1; min-width: 220px; }
.event-banner__text b {
  display: block;
  font-family: var(--font-logo);
  text-transform: uppercase;
  font-size: 18px;
  color: var(--amber-soft);
}
.event-banner__text span { color: var(--muted); font-size: 14px; }

/* =========================================================================
   Redaktion — Bearbeitungsformulare auf Wissen, Recht und Sorten.
   Zurückhaltend: ein schmaler Aufklapper, der erst beim Öffnen Platz nimmt.
   ========================================================================= */
details.redaktion {
  margin-top: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
details.redaktion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--faint);
}
details.redaktion > summary::-webkit-details-marker { display: none; }
details.redaktion > summary:hover { color: var(--leaf); }
details.redaktion[open] { border-style: solid; border-color: rgba(74, 222, 128, .3); }
details.redaktion[open] > summary { color: var(--leaf); border-bottom: 1px solid var(--line); }
.redaktion__body { padding: 16px 18px 18px; }
details.redaktion--neu { border-color: rgba(74, 222, 128, .35); margin-top: 22px; }
details.redaktion--neu > summary { color: var(--leaf); }

/* =========================================================================
   Bewegung
   ========================================================================= */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0); transform-origin: center; } to { opacity: 1; transform: scale(1); } }
@keyframes grow-w { from { width: 0; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes puls { 50% { opacity: .4; } }

.reveal { animation: rise .7s cubic-bezier(.22, .8, .3, 1) both; animation-delay: calc(var(--d, 0) * 65ms); }

/* Statuspunkt mit Puls — für „läuft"-Kennzeichnungen. */
.pulse::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 10px var(--leaf);
  margin-right: 8px;
  animation: puls 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ch-line { stroke-dashoffset: 0; }
  .ch-area, .ch-dot, .ch-head { opacity: 1; }
}

/* =========================================================================
   Schmale Bildschirme
   ========================================================================= */
@media (max-width: 1000px) {
  .top { padding: 10px 16px; gap: 14px; }
  .brand__logo { height: 22px; }
  .who__name, .who__role { display: none; }
  .main { padding: 32px 22px 70px; }
  .split { grid-template-columns: 1fr; }
  .briefing { grid-template-columns: 1fr; }
  .briefing__foto { min-height: 240px; }
  .timeline { padding-left: 0; }
  .timeline::before { left: 4px; }
  .tl-item::before { left: 0; }
  .tl-t { position: static; width: auto; text-align: left; display: block; margin: 0 0 6px 20px; }
  .tl-card { margin-left: 20px; }
  .flash-stack { left: 16px; right: 16px; max-width: none; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .main { padding: 26px 16px 60px; }
  .tile__value { font-size: 26px; }
  .bar__name { width: 106px; font-size: 13px; }
  .rank__pos { width: 36px; font-size: 16px; }
  .rank__avatar { display: none; }
  .wall { columns: 2 140px; }
}

/* =========================================================================
   Tagebücher einordnen
   Eine Zeile je Forenbeitrag, rechts die Wahl zwischen Tagebuch, Contest und
   Info. Radio-Knöpfe statt Auswahlliste: alle drei Möglichkeiten sind
   gleichzeitig sichtbar, und man sieht in der Liste sofort, was gesetzt ist.
   ========================================================================= */
.einordnen {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.einordnen__zeile {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  transition: background .18s;
}
.einordnen__zeile:last-child { border-bottom: 0; }
.einordnen__zeile:hover { background: rgba(116, 209, 138, .04); }
/* Als Info eingeordnet: sichtbar zurückgenommen, aber nicht versteckt —
   man muss es zurückholen können. */
.einordnen__zeile.is-info { background: rgba(245, 176, 62, .05); }
.einordnen__zeile.is-info .einordnen__titel { color: var(--muted); }

.einordnen__info { flex: 1 1 320px; min-width: 0; }
.einordnen__titel {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.einordnen__titel:hover { color: var(--leaf); }
.einordnen__meta {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
}
.einordnen__pin { color: var(--amber); }
.einordnen__vorschlag {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--amber);
}
.einordnen__vorschlag b { color: var(--amber-soft); }
.einordnen__fix {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--faint);
}

.einordnen__wahl { display: flex; gap: 5px; flex: none; flex-wrap: wrap; }
.wahl { cursor: pointer; }
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl__box {
  display: block;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
}
.wahl:hover .wahl__box { color: var(--paper); border-color: var(--line-strong); }
.wahl input:checked + .wahl__box {
  color: var(--ink);
  background: var(--leaf-dim);
  border-color: var(--leaf);
}
.wahl--info input:checked + .wahl__box {
  background: var(--amber);
  border-color: var(--amber);
}
.wahl input:focus-visible + .wahl__box {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Verfasser hat den Server verlassen — Häkchen holt das Tagebuch zurück.
   Bernstein statt Grün: es ist ein Hinweis, keine Bestätigung. */
.ehemalig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--amber);
}
.ehemalig input { position: absolute; opacity: 0; width: 0; height: 0; }
.ehemalig__box {
  flex: none;
  width: 14px; height: 14px;
  border: 1px solid rgba(245, 176, 62, .45);
  border-radius: 2px;
  position: relative;
  transition: background .2s, border-color .2s;
}
.ehemalig input:checked + .ehemalig__box {
  background: var(--amber);
  border-color: var(--amber);
}
.ehemalig input:checked + .ehemalig__box::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 3px; height: 7px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(40deg);
}
.ehemalig input:focus-visible + .ehemalig__box {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.einordnen__zeile:has(.ehemalig input:not(:checked)) { opacity: .78; }

/* Zustandszeile bei Tagebüchern Ehemaliger.
   Der Zustand steht VOR dem Häkchen und in Worten — die erste Fassung zeigte
   nur „wird ausgeblendet“ neben einem leeren Kästchen, was sich wie eine
   Aufgabe las, die man abhaken soll. */
.ehemalig-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.ehemalig__status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--faint);
}
.ehemalig__status.is-sichtbar { color: var(--leaf); }
.ehemalig__text { font-size: 12.5px; }

/* Emoji-Zuordnung für die Bewertung.
   Vorher war das ein einzeiliges Textfeld, in das man `<:name:id> = +5`
   tippen musste — die IDs stehen nirgends, wo man sie ablesen könnte, und
   ein Tippfehler fällt erst auf, wenn Reaktionen stumm bleiben. Jetzt liegt
   jedes Emoji des Servers sichtbar da, mit einem Zahlenfeld daneben. */
.emoji-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.emoji-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  transition: border-color .15s ease, background .15s ease;
}
.emoji-karte:focus-within { border-color: var(--leaf); }

/* Belegte heben sich ab — sonst sucht man die zwei eingestellten zwischen
   zwanzig gleich aussehenden Kacheln. */
.emoji-karte.is-belegt {
  border-color: var(--leaf);
  background: color-mix(in srgb, var(--leaf) 7%, var(--card));
}
.emoji-karte.is-weg { border-style: dashed; opacity: .75; }

.emoji-karte__bild { height: 34px; display: grid; place-items: center; }
.emoji-karte__bild img { width: 32px; height: 32px; object-fit: contain; }
.emoji-karte__zeichen { font-size: 27px; line-height: 1; }
.emoji-karte__name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emoji-karte__wert {
  width: 68px;
  text-align: center;
  font-family: var(--font-mono);
  padding: 5px 4px;
}
.emoji-karte__weg {
  font-size: 10px;
  color: var(--amber);
  text-align: center;
  line-height: 1.25;
}

/* Einzelnes Emoji zur Auswahl — dieselbe Kachel, nur mit Auswahlknopf.
   Der Knopf selbst ist versteckt: die Kachel ist die Schaltfläche, und ein
   zusätzlicher kleiner Kreis daneben würde nur die Frage aufwerfen, was man
   nun anklicken soll. */
.emoji-karte--wahl { cursor: pointer; }
.emoji-karte--wahl input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.emoji-karte--wahl:hover { border-color: var(--leaf); }
.emoji-karte--wahl:has(input:focus-visible) { outline: 2px solid var(--leaf); outline-offset: 2px; }

/* Emoji mitten im Fließtext — etwa „<Emoji> gibt XP". Muss zur Schriftgröße
   passen, sonst springt die Zeilenhöhe. */
.rep-emoji {
  display: inline-block;
  vertical-align: -.18em;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
}