/* =====================================================================
   Design-Tokens — kabelage.com
   Konzept: Retro-Elektro-Look. Gelb/Schwarz als Warnfarben-Kombination
   (passend zum Namen "Kabelage"), Hellblau als kühler Kontrast-Akzent.
   Kräftige Kanten statt Schlagschatten, wie ein altes
   Terminal/Werkstatt-Schild statt SaaS-Marketing-Design.
   Signatur-Element: monospace ID-Badges (z. B. #014) in Gelb.
   ===================================================================== */

:root {
  --c-bg: #fff6d6;
  --c-surface: #ffffff;
  --c-surface-alt: #ffeda0;
  --c-text: #111111;
  --c-text-muted: #4a4a4a;
  --c-primary: #111111;
  --c-primary-dark: #000000;
  --c-accent: #ffd400;
  --c-accent2: #3fb6e0;
  --c-border: #111111;
  --c-shadow: var(--c-border);
  --c-danger: #d62828;
  --c-danger-bg: #fbe2e2;
  --c-success: #1f7a4d;
  --c-success-bg: #dff3e6;
  --c-warning: #a15c00;
  --c-warning-bg: #fff1cf;

  --font-display: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'VT323', ui-monospace, monospace;
  --font-brutalist: 'Archivo Black', 'Inter', sans-serif;
  --font-badge: 'DM Mono', 'VT323', ui-monospace, monospace;

  --radius: 4px;
  --gap: 1rem;
  --sidebar-width: 240px;
  --topbar-height: 56px;

  color-scheme: light;
}

[data-theme="dark"] {
  --c-bg: #0b0b0b;
  --c-surface: #171717;
  --c-surface-alt: #221d0a;
  --c-text: #f5e9b8;
  --c-text-muted: #a9a28a;
  --c-primary: #3fb6e0;
  --c-primary-dark: #2c93b8;
  --c-accent: #ffd400;
  --c-accent2: #3fb6e0;
  --c-border: #7d6015;
  --c-shadow: var(--c-border);
  --c-danger: #ff6b5c;
  --c-danger-bg: #3a1e18;
  --c-success: #6fe0a0;
  --c-success-bg: #123322;
  --c-warning: #ffb84d;
  --c-warning-bg: #3a2a0a;

  color-scheme: dark;
}

/* ---------- Reset & Basis ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--c-bg);
  background-image: url('../../files/bg/bg-hell.svg');
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Eigenes, dunkleres Rasterschema fürs Dunkelthema statt des hellen
   Musters - beide liegen als SVG-Kachel unter files/bg/. */
[data-theme="dark"] body {
  background-image: url('../../files/bg/bg-dunkel.svg');
}

h1, h2, h3, h4 {
  font-weight: 400; /* Press Start 2P bringt nur ein Gewicht mit */
  line-height: 1.5;
  margin: 0 0 0.7em;
  letter-spacing: 0.02em;
}

h2, h3, h4 { font-family: var(--font-display); }

/* Press Start 2P ist ein Pixelfont mit sehr breiten Zeichen -
   Größen deutlich kleiner ansetzen als bei einer normalen Sans-Serif,
   sonst brechen Überschriften unschön um oder wirken überdimensioniert. */
h2 { font-size: 1.05rem; }
h3 { font-size: 0.85rem; }

/* Seiten-Haupttitel (h1) im "RAW EDGES"-Look der Brutalist-Vorlage:
   fetter, breiter Grotesk statt Pixelfont, Großbuchstaben, ca. halb so
   groß wie im Vorlage-Hero. Dynamische Teile (z. B. der Nickname) werden
   zusätzlich mit .heading-outline im "hohlen" Zweitstil abgesetzt. */
h1 {
  font-family: var(--font-brutalist);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: clamp(1rem, 4vw, 2.75rem);
}

.heading-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--c-text);
}

/* Username-Überschrift im Profil-Header: h1 ist sonst site-weit auf den
   großgeschriebenen Brutalist-Font festgelegt - hier bewusst eine
   andere, gemischt-groß/kleingeschriebene Schriftart statt der
   Versalien-Pflicht. */
.profile-name {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 2.2rem;
  line-height: 0.9;
}

/* Direkt gefolgt von der Etiketten-Unterzeile (h1 + p unten) reicht ein
   knapperer Abstand als vor "normalem" Folgeinhalt - sonst wirkt es wie
   ein doppelter Zeilenumbruch. */
h1:has(+ p) { margin-bottom: 0.2em; }

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Unterzeile direkt unter einem h1 (z. B. "Schön, dass du da bist...")
   im Etiketten-Look der Vorlage: monospace, invertierte Farben, etwas
   größer als im Vorlage-Original (11px). Gilt seitenweit automatisch für
   jeden Absatz, der direkt auf ein h1 folgt. Der blinkende Terminal-
   Cursor sitzt jetzt hier statt an der Überschrift - wirkt wie gerade
   frisch getippter Text, Cursorfarbe erbt automatisch die invertierte
   Textfarbe des schwarzen Felds. */
h1 + p, .badge-line {
  display: inline-block;
  font-family: var(--font-badge);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  background: var(--c-text);
  color: var(--c-bg);
  padding: 0.4rem 0.75rem;
}
h1 + p { margin: 0.15rem 0 0.7em; }
h1 + p a, .badge-line a {
  color: var(--c-accent);
}
/* Im Dunkel-Modus wird die Box invertiert (background: var(--c-text),
   also creme statt schwarz) - das kraeftige Gelb von --c-accent ist auf
   diesem hellen Untergrund kaum lesbar (User-Feedback 2026-08-22).
   --c-border ist im Dunkel-Modus bereits ein dunkleres Gold-/Braunton,
   dadurch bleibt der Link farblich in derselben Familie, aber lesbar. */
[data-theme="dark"] h1 + p a,
[data-theme="dark"] .badge-line a {
  color: var(--c-border);
}
/* Cursor bewusst nur an der echten Seiten-Unterzeile (h1 + p), nicht an
   jedem beliebigen .badge-line-Einsatz (z. B. "Mitglied seit"/"Gruppen"
   im Profil) - sonst blinken mehrere Cursor gleichzeitig auf einer Seite. */
h1 + p::after {
  content: '_';
  margin-left: 0.15em;
  animation: cursor-blink 1s step-end infinite;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); }

button, input, select, textarea { font-family: inherit; font-size: 1rem; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Layout ---------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Bewusst unsichtbar (kein Hintergrund/Rahmen, nimmt keinen Platz im
   Layout ein) - wirkt wie kein Header vorhanden, Seiteninhalt beginnt
   direkt oben bei 0. Nur die einzelnen Buttons/Chips schweben mit
   eigenem Rahmen darüber (siehe .hamburger/.theme-toggle/.mail-icon/
   .topbar__chip). position:fixed statt sticky, damit die Leiste keine
   Höhe reserviert - trotzdem bleiben die schwebenden Elemente beim
   Scrollen oben fix stehen. pointer-events:none auf der leeren Fläche,
   damit Klicks auf Inhalt darunter durchgehen; die Buttons selbst
   holen sich pointer-events per Regel unten zurück. */
.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: transparent;
  border-bottom: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Einheitlicher Zurueck-Button (ersetzt die frueher vielen einzelnen
   Zurueck-Buttons auf einzelnen Seiten) - wie .topbar__chip, aber mit
   variabler Breite fuer den Text (der auf Mobile ausgeblendet wird). */
.topbar__zurueck {
  width: auto;
  padding: 0 1rem;
  gap: 0.5rem;
}
.topbar__zurueck-text {
  display: none;
}
@media (min-width: 1024px) {
  .topbar__zurueck-text {
    display: inline;
  }
}

/* Brutalist wie der Hamburger-Button: eckiger Rahmen + Hartschatten
   statt Pill-Form, presst sich beim Klicken in seinen Schatten. */
.theme-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  border-radius: 0;
  cursor: pointer;
  color: var(--c-text);
  font-size: 1.2rem;
  box-shadow: 3px 3px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.theme-toggle:hover { background: var(--c-accent2); }
.theme-toggle:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}

/* Eigene Box wie die anderen schwebenden Elemente, da die Topbar
   selbst keinen Hintergrund mehr hat (siehe .topbar) - sonst wäre das
   Icon über beliebigem Seiteninhalt nicht mehr lesbar. */
.mail-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 44px;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--c-text);
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  box-shadow: 3px 3px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.mail-icon:hover {
  text-decoration: none;
  background: var(--c-accent2);
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}

/* Nickname-Chip (User_Profil-Link) - gleiche schwebende Box-Optik. */
/* Icon-only-Button (Person/Zahnrad) statt Text-Chip - gleiche Box-Größe
   wie Hamburger/Mail-Icon. */
.topbar__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  box-shadow: 3px 3px 0 var(--c-shadow);
  color: var(--c-text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.topbar__chip:hover {
  text-decoration: none;
  background: var(--c-accent2);
  color: #111;
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}

/* Profil-Dropdown: klappt unter dem Namens-Button auf, gleicher
   Button-/Tag-Stil wie die Sidebar ("// MENU.EXE"). */
.profile-menu-wrap { position: relative; }

/* Gleiche Button-Breite wie im Hauptmenü (--sidebar-width), Tag- und
   Button-Schriftgröße kommen unverändert von .sidebar__tag/.sidebar__link -
   dadurch sehen alle drei Menüs (Sidebar, Profil-, Admin-Dropdown)
   identisch aus. */
.profile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: var(--sidebar-width);
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  box-shadow: 4px 4px 0 var(--c-shadow);
  padding: 0.75rem;
  z-index: 50;
}
.profile-menu.is-open { display: block; }
.profile-menu .sidebar__tag { margin: 0 0 0.75rem; }
.profile-menu .sidebar__link + .sidebar__link { margin-top: 0.5rem; }

.mail-icon__badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-danger);
  color: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
}

/* Brutalist-Button: dicker Rahmen, versetzter Hartschatten statt weichem
   Schlagschatten, kein Radius - Vorlage: codefronts.com "Brutalist CSS
   Bordered Hamburger Menu". Presst sich beim Öffnen in seinen Schatten
   ("Press"-Effekt), die drei Striche drehen sich zu einem X. */
.hamburger {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  box-shadow: 4px 4px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.hamburger:hover { background: var(--c-accent2); }
.hamburger.is-open {
  background: var(--c-accent);
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--c-shadow);
}
.hamburger span {
  display: block;
  position: absolute;
  left: 50%;
  width: 20px;
  height: 3px;
  background: var(--c-text);
  transform: translateX(-50%);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s;
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger.is-open span { background: #111; }
.hamburger.is-open span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.layout {
  flex: 1;
  display: flex;
  width: 100%;
}

/* Sidebar: standardmäßig als Off-Canvas-Menü (mobil), öffnet wie in der
   Demo von rechts und direkt ab der Fensteroberkante (nicht erst unter
   der - ohnehin unsichtbaren - Topbar). */
.sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--sidebar-width);
  background: var(--c-surface);
  border-left: 3px solid var(--c-border);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 30;
  overflow-y: auto;
  /* Oben zusätzlich Platz wie im Vorlagen-Panel (dort padding-top: 96px),
     sonst würde der erste Punkt vom schwebenden Hamburger-Button
     überdeckt. */
  padding-top: calc(var(--topbar-height) + 0.75rem);
}
.sidebar.is-open { transform: translateX(0); }

/* "// MENU.EXE"-Tag wie in der Vorlage (dort .chm-19__h, dort 11px) -
   überall exakt gleich groß (Sidebar, Profil-Dropdown, Admin-Dropdown),
   Schrift gelb (Akzentfarbe) statt der Vorlagen-Farbe. */
.sidebar__tag {
  display: inline-block;
  margin: 0 0.75rem 0.75rem;
  padding: 0.3rem 0.6rem;
  background: var(--c-border);
  color: var(--c-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem 0.75rem;
}

.sidebar__nav li + li { margin-top: 0.5rem; }

/* Trennlinie zwischen Menü-Kategorien (Start/Community/Spiele/Austausch,
   User-Wunsch 2026-09-03) - eigenes <li> ohne Link, wie im Bootstrap-
   Muster .dropdown-divider, hier im Retro-Look (dickerer Rahmen statt
   dünner Linie, passend zu den brutalistischen 4px-Rahmen der
   .sidebar__link-Buttons). */
.sidebar__divider {
  height: 0;
  margin: 0.4rem 0.2rem;
  border: none;
  border-top: 2px solid var(--c-border);
}

/* Bordered Cards mit Hartschatten statt schlichter Zeilen, Schrift/
   Großschreibung wie die Menü-Buttons in der Vorlage (codefronts.com
   Brutalist-Demo: 'Archivo Black', uppercase, 4px-Rahmen). Schriftgröße
   überall gleich (Sidebar/Profil-/Admin-Dropdown) wie im Profil-Menü,
   sonst würden lange Wörter wie "Nachrichten" zu breit für den Button.
   min-width:0 auf dem Label-Span, damit Flexbox den Text tatsächlich
   umbricht statt ihn über den Rand hinausragen zu lassen. Beim Hover
   "presst" sich der Link in seinen Schatten. */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 4px solid var(--c-border);
  border-radius: 0;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: 3px 3px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s, color 0.2s;
  font-family: var(--font-brutalist);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.sidebar__link > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sidebar__link:hover {
  background: var(--c-accent2);
  color: #111;
  text-decoration: none;
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}
.sidebar__link.is-active {
  background: var(--c-accent);
  color: #111;
  font-weight: 600;
}

/* Gruppierter Menüpunkt (z. B. "Admin-Bereich" mit Unterpunkten) */
.sidebar__group-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-text-muted);
  border-bottom: 2px solid var(--c-border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.3rem;
}

.sidebar__subnav {
  list-style: none;
  margin: 0 0 0.3rem;
  padding: 0;
}
.sidebar__subnav li + li { margin-top: 0.5rem; }
.sidebar__subnav .sidebar__link { padding-left: 1.6rem; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 25;
  display: none;
}
.overlay.is-open { display: block; }

/* Erste Box beginnt etwas tiefer, damit die schwebenden Topbar-Buttons
   (Hamburger/Mail/Chip/Theme) sie nicht überdecken. */
.main {
  flex: 1;
  padding: calc(var(--topbar-height) + 0.75rem) 1.25rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.footer {
  text-align: center;
  padding: 1rem;
  color: var(--c-text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--c-border);
}

.footer__links {
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
}

.footer__links a {
  color: var(--c-text-muted);
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--c-primary);
}

/* ---------- Bausteine ---------- */
.card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* ---------- Avatare ---------- */
.avatar-sm, .avatar-md, .avatar-lg {
  object-fit: cover;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
}
.avatar-sm { width: 64px; height: 64px; }
.avatar-md { width: 112px; height: 112px; }
.avatar-lg { width: 192px; height: 192px; }

/* Modifikator (Punkt 203): .avatar-sm/-md/-lg sind bewusst eckig
   (var(--radius)) fuer Mitgliederlisten/-listen (Mein_Netzwerk.php,
   User_Liste.php, Wichteln_Neu.php, Gruppe_Detail.php-Mitgliederliste) -
   NICHT global geaendert. Nur die Blog-Mini-Userbox (Blog_Beitrag.php)
   soll rund sein, analog zu Basics .user-details__avatar dort
   (border-radius:50%) und konsistent mit dem neuen runden
   .card-post-avatar in den Blog-Kartenlisten. */
.avatar-sm--rund {
  border-radius: 50%;
  /* Gleicher WebKit/Safari-Zuschneide-Bug wie bei .card-post-avatar,
     siehe dortiger Kommentar. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 0.5rem;
}
.avatar-grid__btn {
  padding: 0;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.avatar-grid__btn:hover { border-color: var(--c-accent2); }
.avatar-grid__btn img { width: 100%; height: 56px; object-fit: cover; display: block; }

/* Vorgegebene-Bilder-Auswahlgrid fuer Gruppen-Titelbilder
   (Gruppe_Bearbeiten_Background.php) - groessere Kacheln als
   .avatar-grid, da Querformat-Titelbilder statt quadratischer Avatare,
   sonst gleiches Muster (analog Kala@Basic/assets/css/style.css
   .background-grid). */
.background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.background-grid__btn {
  padding: 0;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  width: 100%;
}
.background-grid__btn:hover { border-color: var(--c-accent2); }
.background-grid__btn img { width: 100%; height: 110px; object-fit: cover; display: block; }

/* Mitglieder-Kacheln: Avatar + Nickname darunter, nebeneinander in
   einer eigenen umrandeten Box (z. B. "Meine Mitgliedschaften" auf
   Gruppen.php). */
.mitglieder-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.mitglieder-box__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 72px;
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.mitglieder-box__item span {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* ---------- Dashboard (Startseite) ---------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* Dekoratives Gelb/Schwarz-Streifenband, sparsam einsetzen
   (z. B. als schmale Trennlinie unter der Topbar) */
.hazard-stripe {
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    var(--c-accent) 0px,
    var(--c-accent) 12px,
    var(--c-primary) 12px,
    var(--c-primary) 24px
  );
}

/* Im Hell-Modus ist --c-primary fast Schwarz (klassischer Gelb/Schwarz-
   Streifen). Im Dunkel-Modus ist --c-primary Hellblau (Hauptakzent) - das
   würde den Streifen unruhig/grell wirken lassen, deshalb dort echtes
   Schwarz statt der hellen --c-text-Farbe (vorheriger Bug: fast weiß). */
[data-theme="dark"] .hazard-stripe {
  background: repeating-linear-gradient(
    45deg,
    var(--c-accent) 0px,
    var(--c-accent) 12px,
    #000 12px,
    #000 24px
  );
}

.id-badge {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--c-accent2);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
}

/* Stift-Icons auf dem Gruppen-Hintergrundbild (Gruppe_Detail.php, Punkt
   84-Nachtrag) - analog zu den Bearbeiten-Badges auf dem Profil-Coverbild
   in Kala@Basic, hier im brutalistischen Retro-Stil (Gelb/Schwarz). Der
   umschliessende Wrapper braucht position:relative. */
.gdetail-edit-btn {
  position: absolute; width: 32px; height: 32px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: var(--c-text);
  border: 2px solid var(--c-border); border-radius: 50%;
}
.gdetail-edit-btn:hover { background: var(--c-surface); text-decoration: none; }
.gdetail-edit-btn--top { top: 8px; left: 8px; }
.gdetail-edit-btn--bg { bottom: 8px; right: 8px; }

/* Aktivitaeten-Buttons auf Gruppe_Detail.php (Punkt 91) - 8 nebeneinander
   auf Desktop, volle Breite auf dem Handy. */
.gdetail-btn-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}
.gdetail-btn-grid > .btn { width: 100%; text-align: center; }
@media (max-width: 576px) {
  .gdetail-btn-grid {
    grid-template-columns: 1fr;
  }
}
/* Zweifarbige Aktivitaeten-Buttons (Punkt 92) - Blau fuer "Das weiss doch
   keiner", Gruen fuer Wichteln, Lila fuer die uebrigen Community-Aktionen
   (Kalender/Linkliste/Forum). */
.gdetail-btn--blau {
  background: linear-gradient(135deg, #1e3c72, #4a90d9);
  color: #fff; border: none;
}
.gdetail-btn--blau:hover { filter: brightness(1.1); color: #fff; }
.gdetail-btn--gruen {
  background: linear-gradient(135deg, #2e7d32, #66bb6a);
  color: #fff; border: none;
}
.gdetail-btn--gruen:hover { filter: brightness(1.1); color: #fff; }
.gdetail-btn--lila {
  background: linear-gradient(135deg, #6a3093, #a044ff);
  color: #fff; border: none;
}
.gdetail-btn--lila:hover { filter: brightness(1.1); color: #fff; }

.copy-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--c-text-muted, var(--c-text));
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  font-size: 0.9rem;
  line-height: 1;
}

.copy-btn:hover,
.copy-btn:focus-visible {
  color: var(--c-primary);
}

.btn {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.55rem 1rem;
  cursor: pointer;
  font-weight: 600;
  background: var(--c-primary);
  color: #fff;
}
.btn:hover { background: var(--c-primary-dark); text-decoration: none; }

.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text);
}
.btn--ghost:hover { background: var(--c-surface-alt); }
.btn--ghost.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.btn--danger { background: var(--c-danger); }
.btn--danger:hover { filter: brightness(0.92); }

.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

.form-group { margin-bottom: 1rem; }
.form-group label:not(.badge-recht):not(.checkbox-label) {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Checkbox + Beschriftungstext in einer Zeile, vertikal zentriert */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.92rem;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
}

/* Statusmeldungen als Terminal-Log-Zeilen: [OK]/[ERROR]-Präfix in
   Mono-Schrift statt schlichter Alert-Box. */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert::before {
  font-family: var(--font-mono);
  font-weight: bold;
  margin-right: 0.5em;
  letter-spacing: 0.05em;
}
.alert--error { background: var(--c-danger-bg); color: var(--c-danger); }
.alert--error::before { content: '[ERROR]'; }
.alert--success { background: var(--c-success-bg); color: var(--c-success); }
.alert--success::before { content: '[OK]'; }

table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.92rem;
  overflow-wrap: break-word;
}
th { color: var(--c-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Breite Tabellen (viele Spalten) auf schmalen Bildschirmen: seitliches
   Scrollen nur innerhalb der Box statt die ganze Seite zu sprengen. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.badge-recht {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.72rem;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin: 0.1rem 0.2rem 0.1rem 0;
}

.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--c-text-muted);
}
/* Terminal-"NO DATA"-Präfix vor reinen Leer-Meldungen - nicht bei den
   404/403/500-Fehlerseiten, die schon ihre eigene Terminal-Überschrift
   haben (h1 als Kind erkennbar). */
.empty-state:not(:has(h1))::before {
  content: 'NO DATA // ';
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.table-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.table-actions form { display: inline-flex; }

/* Stärker als reine Ausgrauung: NUR für wirklich gesperrte/unbestätigte
   Accounts in User_Liste.php - grau UND durchgestrichen. */
.user-eingeschraenkt {
  opacity: 0.55;
  text-decoration: line-through;
}
.user-eingeschraenkt a { color: inherit; }

/* Aktive User, die nur Profil/Nachrichten privat geschaltet haben -
   nur grau, kein Durchstreichen (der Account ist ja weiterhin aktiv). */
.user-privat {
  opacity: 0.55;
}

/* ---------- Wichteln (Secret Santa) ---------- */
/* Festliche Hintergrund-Themes für Wichtel-Runden - seit Punkt 94 als
   zweifarbiger Farbverlauf (User-Wunsch), zusaetzlich optionales Titelbild
   oben in der Karte (.wichteln-bg__bild, gleiche Groesse wie
   .gruppen-card__bg in Kala@Basic). Text in Weiß/Creme für ausreichend
   Kontrast. Neuer Schlüssel in includes/wichteln.php → passende
   .bg-<schluessel>-Klasse hier ergänzen. */
.wichteln-bg { color: #fff6d6; border-color: var(--c-border); overflow: hidden; }
.wichteln-bg h1, .wichteln-bg h2, .wichteln-bg h3, .wichteln-bg a { color: inherit; }
.wichteln-bg h1, .wichteln-bg h2, .wichteln-bg h3 { text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }

/* .badge-recht hat einen eigenen hellen Hintergrund (--c-surface-alt) -
   die cremeweiße Textfarbe von .wichteln-bg würde darauf im hellen
   Theme (blassgelber Badge-Hintergrund) fast unsichtbar sein. */
.wichteln-bg .badge-recht { color: var(--c-text); }

.bg-rot-gold { background: linear-gradient(135deg, #7a1010, #a8841b); }
.bg-tannengruen { background: linear-gradient(135deg, #0f3d24, #2f7a4f); }
.bg-winternacht { background: linear-gradient(135deg, #0d1b3d, #29527a); }

.wichteln-bg__bild {
  width: calc(100% + 2.5rem);
  margin: -1.25rem -1.25rem 1rem;
  height: 90px;
  background-size: cover;
  background-position: center center;
  position: relative;
}
.wichteln-bg__bild::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .25);
}

/* Titelbild oberhalb der Gruppen-Karten (index.php "meine Aktivitäten",
   Kala@Basic-Gegenstueck: .gruppen-card__bg) - Karte hier per Inline-Style
   bereits padding:0, daher keine negative Rand-Kompensation noetig. */
.gruppen-card__bg {
  width: 100%;
  height: 90px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.gruppen-card__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .25);
}

/* Blinkendes Joystick-Icon auf dem Titelbild einer Spiel-Typ-Kachel
   (index.php Gruppen-Karten), zeigt an, dass fuer den User in dieser
   Gruppe noch eine offene Runde dieses Spieltyps wartet. */
.spiel-offen-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  animation: spiel-offen-blink 1.2s ease-in-out infinite;
}
@keyframes spiel-offen-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* Ruhiges (nicht blinkendes) Start-Icon: Spieltyp wurde in dieser Gruppe
   noch nie gespielt und hat aktuell keine offene Runde. */
.spiel-start-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f9e5c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
}

.wichteln-reveal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}
.wichteln-reveal--kompakt { padding: 0.75rem 0; }

.wichteln-reveal__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.wichteln-reveal__avatar {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.15);
}

.wichteln-reveal__mystery {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border: 2px dashed currentColor;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
}

.wichteln-reveal__arrow { font-size: 2.6rem; margin-top: 2rem; }
.wichteln-reveal__arrow img { width: 42px; height: auto; display: block; }

.wichteln-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.wichteln-swatch__preview {
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  display: inline-block;
}

/* ---------- Responsive: Tablet & Desktop ---------- */
@media (min-width: 768px) {
  .main { padding: calc(var(--topbar-height) + 0.75rem) 1.75rem 1.75rem; }
}

/* Ab hier bewusst KEINE Sidebar-/Hamburger-/Overlay-Sonderregeln mehr -
   das Off-Canvas-Menü verhält sich auf Handy, Tablet und Desktop
   identisch (immer per Hamburger auf/zu, nie dauerhaft sichtbar). */
@media (min-width: 1024px) {
  /* Nur Desktop: Wichteln-Bilder (Geber/Empfänger) noch größer, da im
     breiten Layout sonst zu klein neben viel Weißraum. */
  .wichteln-reveal__avatar,
  .wichteln-reveal__mystery { width: 170px; height: 170px; }
  .wichteln-reveal__mystery { font-size: 4rem; }
  .wichteln-reveal__arrow { font-size: 3.5rem; margin-top: 3.2rem; }
  .wichteln-reveal__arrow img { width: 56px; }
}

/* ---------- Kalender (serverseitiges Monats-Grid, kein FullCalendar/jQuery) ---------- */
.kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--c-border);
  border: 2px solid var(--c-border);
}

.kalender-grid__kopf {
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  font-family: var(--font-badge);
  font-size: 0.75rem;
  text-transform: uppercase;
  text-align: center;
  padding: 0.3rem 0;
}

.kalender-day {
  background: var(--c-surface);
  min-height: 84px;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.kalender-day--outside {
  background: var(--c-bg);
  opacity: 0.5;
}

.kalender-day--today {
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

.kalender-day__zahl {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.kalender-dot {
  display: block;
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--kalender-farbe) 25%, transparent);
  color: var(--c-text);
  border-left: 3px solid var(--kalender-farbe);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

a.kalender-dot:hover {
  background: color-mix(in srgb, var(--kalender-farbe) 45%, transparent);
}

@media (max-width: 640px) {
  .kalender-grid__kopf { font-size: 0.65rem; }
  .kalender-day { min-height: 56px; padding: 0.2rem; }
  .kalender-dot { font-size: 0.6rem; }
}

/* Punkt 43: 8 zufaellige 2-farbige Gradient-Designs fuer die Frage-/
   Kommentar-Box im Spiel "Das weiss doch keiner" - feste Farben statt
   Theme-Variablen, bewusst ohne Unterscheidung zwischen hell/dunkel. */
.dwdk-frage-box {
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  font-size: 1.15rem;
}
.dwdk-kategorie-text {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
  margin-bottom: .4rem;
}
.dwdk-frage-text {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}
.dwdk-kommentar-text {
  font-size: 1.35rem;
  font-style: italic;
  margin-top: .75rem;
}
.dwdk-design-1 { background: linear-gradient(135deg, #FF512F, #F09819); color: #ffffff; }
.dwdk-design-2 { background: linear-gradient(135deg, #2193b0, #6dd5ed); color: #ffffff; }
.dwdk-design-3 { background: linear-gradient(135deg, #654ea3, #eaafc8); color: #ffffff; }
.dwdk-design-4 { background: linear-gradient(135deg, #11998e, #38ef7d); color: #07331f; }
.dwdk-design-5 { background: linear-gradient(135deg, #fc5c7d, #6a82fb); color: #ffffff; }
.dwdk-design-6 { background: linear-gradient(135deg, #f7971e, #ffd200); color: #3a2400; }
.dwdk-design-7 { background: linear-gradient(135deg, #232526, #414345); color: #ffffff; }
.dwdk-design-8 { background: linear-gradient(135deg, #ee0979, #ff6a00); color: #ffffff; }

/* Antwort-Kacheln im Spiel "Das weiss doch keiner" (User-Feedback
   2026-08-22): ersetzt die vorherige Radio-Liste + separaten
   "Antworten"-Button - jede Kachel ist selbst ein Submit-Button mit dem
   jeweiligen Options-Wert, Klick sendet also direkt ab und fuehrt sofort
   zum Moderator-Kommentar. 4 Kacheln nebeneinander, auf Schmalbildschirm
   per Grid automatisch 2x2. Farbe = dieselbe .dwdk-design-N-Klasse wie
   die Fragen-Box, damit Frage und Antworten erkennbar zusammengehoeren. */
.dwdk-antwort-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}
@media (max-width: 576px) {
  .dwdk-antwort-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dwdk-antwort-tile {
  border: none;
  border-radius: 12px;
  padding: 1rem .75rem;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.dwdk-antwort-tile:hover,
.dwdk-antwort-tile:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.dwdk-antwort-tile:active {
  transform: translateY(0);
  filter: brightness(.95);
}

/* Schaetzfrage: eigene farbige Box (gleiche .dwdk-design-N-Klasse wie
   die Frage), volle Breite statt normalem .form-group. */
.dwdk-schaetz-box {
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  width: 100%;
}
.dwdk-schaetz-box label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
}
.dwdk-schaetz-box input[type="number"] {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-size: 1.1rem;
}
.dwdk-schaetz-box .dwdk-schaetz-submit {
  margin-top: .75rem;
}

/* Statistik-Dropdown auf Spiel_DWDK.php + beiden Statistik-Seiten -
   natives <details>/<summary> statt eigenem JS, da Retro (anders als
   Basic mit Bootstrap) kein Dropdown-Komponente hat. */
.dwdk-stat-dropdown {
  position: relative;
}
.dwdk-stat-dropdown summary {
  cursor: pointer;
  list-style: none;
}
.dwdk-stat-dropdown summary::-webkit-details-marker {
  display: none;
}
.dwdk-stat-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 220px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  padding: .5rem 0;
  z-index: 20;
}
.dwdk-stat-dropdown__label {
  padding: .35rem 1rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
}
.dwdk-stat-dropdown__menu a,
.dwdk-stat-dropdown__current {
  display: block;
  padding: .5rem 1rem;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.dwdk-stat-dropdown__menu a:hover {
  background: var(--c-surface-alt);
}
.dwdk-stat-dropdown__current {
  font-weight: 700;
  color: var(--c-text-muted);
}

/* Punkt 103 (Retro-Parität): Warn-Alert (z. B. "Runde nicht gewertet")
   und Farbvarianten fuer .badge-recht (z. B. Wer-kennt-mehr-
   Begriffsdatenbank rot/orange/gruen, Spiel-Punkte-Badges). */
.alert--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.alert--warning::before { content: '[WARN]'; }

.badge-recht--success { color: var(--c-success); border-color: var(--c-success); }
.badge-recht--warning { color: var(--c-warning); border-color: var(--c-warning); }
.badge-recht--danger { color: var(--c-danger); border-color: var(--c-danger); }

/* Wichteln: Nachricht/Wunschliste des gezogenen Empfaengers - steht
   ganz unten in jeder Wichteln-Box (Index, Wichteln.php-Kartenliste,
   Wichteln.php-Detailansicht), Hintergrund = Seitenhintergrund
   (var(--c-bg), damit hell/dunkel automatisch passt statt einer festen
   Farbe). Bewusst KEIN Icon/Badge mehr auf dem Profilbild und KEIN
   Blinken (Punkt 111 - Korrektur zu Punkt 109). */
.wichteln-nachricht-feld {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-top: .75rem;
  color: var(--c-text);
  font-size: 1.1rem;
  text-align: left;
}
.wichteln-nachricht-feld i { margin-right: .35rem; }

/* Titelbild auf Blog_Beitrag.php: .card hat in Retro (anders als
   Bootstrap in Basic) direkt padding:1.25rem auf allen vier Seiten
   (siehe .card-Regel oben), und .blog-titelbild ist ein direktes Kind
   von .card - negativer Randausgleich (-1.25rem links/rechts/oben,
   Breite um 2.5rem vergroessert) laesst das Bild trotzdem randlos bis
   an den Kartenrand reichen; oben abgerundete Ecken passend zum
   Karten-Radius (--radius:4px), unten eckig, da darunter weiterer
   Karteninhalt folgt.
   Umgestellt von background-image-Div auf echtes <img> (2026-09-02,
   gleiches Muster/gleiche Begruendung wie bei den Blog-Vorschau-Boxen
   in index.php/Blog.php/Blog_Autor.php): kein fixer/max-Hoehenwert
   mehr - das Bild behaelt seine natuerliche, proportionale Hoehe, die
   Karte waechst/schrumpft automatisch mit. */
.blog-titelbild {
  display: block;
  width: calc(100% + 2.5rem);
  height: auto;
  border-radius: 4px 4px 0 0;
  margin: -1.25rem -1.25rem 1rem -1.25rem;
}

/* Card-Post-Aside (Punkt 200): Pendant zu Basics .card-post--aside fuer
   Titelbild_Format='hochkant' - ein hochformatiges Bild wuerde bei
   width:100%;height:auto (Retros normales Muster) eine ungewoehnlich
   hohe Karte erzeugen. Stattdessen Bild als schmaler Streifen links
   ueber die volle Kartenhoehe (min-width 180px, exakt wie im Basic-
   Vorbild), Text rechts. Bewusst OHNE Mobile-Breakpoint (Punkt 201) -
   Basics .card-post--aside (Shards-Vendor-CSS) bleibt ebenfalls auf
   jeder Bildschirmgroesse im Zeilen-Layout, ein fruehere Umschaltung
   auf gestapeltes Layout unter 480px wich davon ab. */
.card-post-aside {
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
}
.card-post-aside__img {
  width: 180px;
  min-width: 180px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  display: block;
}
.card-post-aside__body {
  padding: 0.75rem 1rem 1rem;
  flex: 1;
  min-width: 0;
}

/* Autor-Avatar in Blog-Karten (Punkt 202): kleiner runder Avatar vor
   "von <Name>" - Pendant zu Basics ueberlappendem card-post__author-
   avatar, aber im schlichten Retro-Look als normales Inline-Element
   in der Autorenzeile statt absolut ueber das Titelbild positioniert. */
.card-post-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--c-border);
  flex-shrink: 0;
  /* Bekannter WebKit/Safari-Bug: border-radius wird bei <img> in
     Kombination mit object-fit nicht zuverlässig als Zuschneide-Maske
     angewendet (Bild bleibt eckig, obwohl border-radius gesetzt ist) -
     die -webkit-mask-image-Deklaration erzwingt das Zuschneiden auch
     dort zusätzlich zu border-radius. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Diskussionen-Karte (Punkt 209): Retro-Pendant zu Basics
   .blog-comments-Demo-Klassen (die es in Retro nicht gibt) - schlichte
   eigene Liste mit rundem Avatar links, Meta-Zeile + Text rechts.
   :last-child ohne Trennlinie/Innenabstand, wie Basics vendor-eigenes
   .blog-comments__item:last-child{border:0}. */
.diskussion-item {
  display: flex;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--c-border);
}
.diskussion-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.diskussion-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Punkt 152: Chat-Mini-Eingabezeile (contenteditable statt <input>, damit
   Fett/Kursiv/Farbe/Schriftgroesse/Bild/Link direkt eingebettet werden
   koennen) - Platzhaltertext per :empty-Trick, da contenteditable kein
   natives placeholder-Attribut kennt. */
.chat-eingabe-editierbar {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background: var(--c-surface);
  color: var(--c-text);
}
.chat-eingabe-editierbar:empty:before {
  content: attr(data-placeholder);
  color: var(--c-text-muted);
}
.chat-farbe-picker {
  width: 32px;
  height: 31px;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: transparent;
}
.chat-text img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 4px;
  display: block;
  margin-top: 0.3rem;
}
#chat-schriftgroesse {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
}
.gruppen-icon-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: 1.1rem;
}
.gruppen-icon-badge:hover { color: var(--c-text); text-decoration: none; }
.gruppen-icon-badge__zahl {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}