/* Lottis Cloud – Grundstyles */
:root {
  --bg: #f7f5f2;
  --surface: #ffffff;
  --panel: #010101;        /* = Hintergrund des Logos, damit es nahtlos sitzt */
  --panel-text: #f1ece6;
  --panel-muted: #c9bfb4;
  --text: #2b2724;
  --muted: #7a716a;
  --primary: #fcad00;       /* Gold aus dem Logo */
  --primary-dark: #d99400;
  --on-primary: #010101;    /* Schrift auf Gold */
  --link: #9a6400;          /* dunkleres Gold für Text-Links auf hellem Grund */
  --border: #e6e0d9;
  --danger: #c0392b;
  --success-bg: #e7f5ea;
  --success-text: #24663a;
  --error-bg: #fdecea;
  --error-text: #9b2c22;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04);
}
/* Seitenfarben (Version 0.38): grauer Hintergrund, graue Seitenboxen, Rand im Verlauf Gold → Schwarz → Gold.
   Der Kopf ist schwarz oder grau – das stellen Admins unter „Logo & Kopf“ ein (Klasse head-grau am <body>). */
:root {
  --page-bg: #9d9d9d;        /* Hintergrund der Seite */
  --side-bg: #686767;        /* Seitenboxen links/rechts */
  --head-bg: #010101;        /* Kopf (schwarz) */
  --on-page: #1f1c1a;        /* Schrift direkt auf dem grauen Hintergrund */
  --on-page-muted: #34302c;
  --on-page-link: #3d2700;
  --frame: linear-gradient(135deg, #fcad00 0%, #010101 50%, #fcad00 100%);
}
body.head-grau { --head-bg: #484747; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  background: var(--page-bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--link); transition: color .15s ease; }
a:hover { color: var(--primary); }
.page-head a, .col-left a, .col-right a { color: var(--primary); }
h1, h2, h3 { line-height: 1.2; }

.container { width: 100%; max-width: 960px; margin-inline: auto; padding-inline: 16px; }

/* Header / Footer */
/* ---------- Grundgerüst: Kopf + 3 Spalten ---------- */
.page {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;  /* links | Mitte (breiter) | rechts */
  grid-template-areas:
    "head head head"
    "left main right";
  gap: 16px;
  align-items: start;
  align-content: start;  /* Zeilen nicht strecken, wenn die Seite kurz ist */
  grid-template-rows: auto 1fr;
}
.page-head { grid-area: head; }
.col-left  { grid-area: left; }
.col-main  { grid-area: main; min-width: 0; }
.col-right { grid-area: right; }

.page-head, .col-left, .col-right {
  --box-bg: var(--side-bg);
  color: var(--panel-text);
  border: 3px solid transparent;
  background: linear-gradient(var(--box-bg), var(--box-bg)) padding-box, var(--frame) border-box;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.page-head { --box-bg: var(--head-bg); }
.page-head { padding: .5rem 1.25rem; }
.page-head .nav a { color: var(--panel-text); }
.page-head .link-button { color: var(--panel-muted); }
.col-left, .col-right { padding: 1rem; min-height: 300px; }

/* Tablet & Handy: Spalten untereinander */
@media (max-width: 900px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "left" "main" "right";
    grid-template-rows: auto;
  }
  .col-left, .col-right { min-height: 0; }
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .75rem; }
/* Logo: .logo reserviert den Platz im Kopf (--logo-slot), .logo-frame ist das eigentliche Logo-Feld (--logo-size).
   Ragt das Logo heraus (body.logo-over), ist das Feld größer als der Platz und hängt unten über den Kopf hinaus. */
.logo { --logo-size: 120px; --logo-slot: var(--logo-size); --logo-k: 1; position: relative; display: block; line-height: 0; flex: none;
  width: calc(var(--logo-size) * var(--logo-k)); height: calc(var(--logo-slot) * var(--logo-k)); }
.logo-frame { position: absolute; top: calc(var(--logo-dy, 0px) * var(--logo-k)); left: calc(var(--logo-dx, 0px) * var(--logo-k)); width: calc(var(--logo-size) * var(--logo-k)); height: calc(var(--logo-size) * var(--logo-k));
  overflow: hidden; z-index: 30; display: block; }
.logo img { width: 100%; height: 100%; display: block; object-fit: contain;
  transform: translate(var(--logo-x, 0%), var(--logo-y, 0%)) scale(var(--logo-zoom, 1)); transform-origin: center; }
body.logo-over .page-head { position: relative; z-index: 20; }
body.logo-over .logo img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
@media (max-width: 600px) {
  .page-head .logo { --logo-k: .67; }
  /* Handy: Kopf bricht um – kein Überstand, damit nichts verdeckt wird */
  body.logo-over .page-head .logo { height: calc(var(--logo-size) * var(--logo-k)); }
}
.nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* Navigation oben: Maus darüber = gold hinterlegt, aktuelle Seite bleibt gold */
.nav-link {
  display: inline-block; padding: .45rem .95rem; border-radius: 999px; border: 1px solid transparent;
  background: none; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
  color: var(--panel-text);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.page-head .nav .nav-link { color: var(--panel-text); }
.page-head .nav .nav-link:hover,
.page-head .nav .nav-link:focus-visible { background: var(--primary); color: var(--on-primary); outline: none; }
.page-head .nav .nav-link.active { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.site-footer { padding-block: 1.5rem; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--border); }

/* Bausteine */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.narrow { max-width: 440px; margin-inline: auto; }
.hero { text-align: center; padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: .5rem; }
.hero p { max-width: 560px; margin-inline: auto; }
.muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.grid .card { margin: 0; }
.inline { display: inline; margin: 0; }

/* Formulare */
.stack { display: flex; flex-direction: column; gap: .9rem; }
.row { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 200px; }
.row > .button { flex: 0 0 auto; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 500; font-size: .95rem; }
input, select, textarea {
  font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
textarea { resize: vertical; }

.button {
  display: inline-block; background: var(--primary); color: var(--on-primary); border: 0; border-radius: 999px;
  padding: .65rem 1.3rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--primary-dark); }
.button:disabled { opacity: .6; cursor: wait; }
.button-small { padding: .4rem .9rem; color: var(--on-primary) !important; }
.button-ghost { background: transparent; color: var(--link); border: 1px solid var(--primary); }
.button-ghost:hover { background: var(--primary); color: var(--on-primary); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.danger { color: var(--danger); }

/* Meldungen */
.alert { border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert-success { background: var(--success-bg); color: var(--success-text); }
.alert-error { background: var(--error-bg); color: var(--error-text); }
.form-error { color: var(--error-text); margin: 0; }

/* Admin */
.status-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.status-table th, .status-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.status-table th { width: 40%; font-weight: 500; color: var(--muted); }
.log { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; font-size: .85rem; overflow-x: auto; white-space: pre-wrap; }
code { font-size: .9em; }

/* ---------- Profilbild / Tierbild (quadratisch) ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  aspect-ratio: 1; overflow: hidden; border-radius: 10px;
  background: var(--panel); border: 2px solid var(--primary);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initials { color: var(--primary); font-weight: 700; letter-spacing: .03em; }
.avatar-sm { width: 40px; }  .avatar-sm .avatar-initials { font-size: .95rem; }
.avatar-md { width: 72px; }  .avatar-md .avatar-initials { font-size: 1.6rem; }
.avatar-lg { width: 140px; } .avatar-lg .avatar-initials { font-size: 3rem; }

/* Rechte Spalte: Mein Profil */
.profile-button { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-decoration: none; }
.profile-button .avatar-lg { width: 100%; max-width: 200px; }
.profile-button .avatar-lg .avatar-initials { font-size: 4rem; }
.profile-button .button { width: 100%; text-align: center; }
.col-right .profile-button .button, .col-left .button { color: var(--on-primary); }

/* Anmelden / Registrieren */
.auth-card { margin-top: 1rem; }
.auth-card h1 { margin-bottom: .25rem; }
.auth-card > .muted { margin-top: 0; }
.auth-switch { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); text-align: center; }
.auth-switch p { margin: 0 0 .6rem; color: var(--muted); }

/* Passwort mit Auge */
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 2.8rem; }
.password-eye {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem; border: 0; background: none; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
}
.password-eye:hover { color: var(--link); }
.password-eye .eye-slash { display: none; }
.password-eye.is-visible .eye-slash { display: inline; }
.password-eye.is-visible { color: var(--link); }
.stack-tight { display: flex; flex-direction: column; gap: .35rem; }
.forgot-link { font-size: .88rem; white-space: nowrap; }
.login-options { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-top: .2rem; }
.login-options label.checkbox { font-size: .95rem; flex: 1 1 auto; min-width: 0; }
.login-options .forgot-link { flex: 0 0 auto; padding-top: .1rem; }
.nowrap { white-space: nowrap; }

/* Profilseite */
label.checkbox { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
label.checkbox input { width: auto; margin: 0; }
label.checkbox:has(.checkbox-hint) { align-items: flex-start; }
label.checkbox:has(.checkbox-hint) input { margin-top: .3rem; }
.checkbox-hint { display: block; font-size: .8rem; color: var(--muted); line-height: 1.3; margin-top: .1rem; }
form[data-profile-form] { margin-bottom: 1.25rem; }
.profile-photo { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.profile-photo > .stack { flex: 1 1 260px; }
label.grow-0 { flex: 0 1 140px; }
.pet-head { display: flex; gap: .9rem; align-items: center; margin-bottom: .5rem; }
.pet-head h3 { margin: 0 0 .2rem; }
.pet-head p { margin: 0; }
.pet form { margin-top: .6rem; }

/* Tiere im Profil */
#tiere .grid { margin-bottom: 1rem; }
#tiere .card { box-shadow: none; }
.pet-add > summary { list-style: none; display: inline-block; }
.pet-add > summary::-webkit-details-marker { display: none; }
.pet-add[open] > summary { margin-bottom: 1rem; }
.pet-add-body { border-top: 1px solid var(--border); padding-top: 1rem; }

/* Zuschneide-Fenster */
.cropper { display: flex; flex-direction: column; gap: .75rem; }
.cropper-pick { align-self: flex-start; cursor: pointer; }
.cropper-stage { display: flex; flex-direction: column; gap: .6rem; }
.cropper-stage[hidden] { display: none; }
.cropper-hint { margin: 0; font-size: .9rem; }
.cropper-frame {
  position: relative; width: min(100%, 300px); aspect-ratio: 1; overflow: hidden;
  border-radius: 10px; border: 2px solid var(--primary); background: var(--panel);
  cursor: grab; touch-action: none; user-select: none;
}
.cropper-frame.dragging { cursor: grabbing; }
.cropper-frame img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; }
.cropper-zoom-label { max-width: 300px; }
.cropper-zoom { accent-color: var(--primary); padding: 0; border: 0; background: none; }
.cropper-actions { align-items: center; }
.cropper-actions > * { flex: 0 0 auto; }

/* Wartungsmodus */
.maintenance-body { justify-content: center; background: var(--panel); color: var(--panel-text); }
.maintenance { max-width: 560px; margin: auto; padding: 32px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.maintenance-logo { width: min(220px, 60vw); height: auto; }
.maintenance h1 { color: var(--primary); margin: .5rem 0 0; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.maintenance-text { font-size: 1.1rem; line-height: 1.6; margin: 0; color: var(--panel-text); }
.maintenance-admin { margin-top: 2rem; font-size: .85rem; color: var(--panel-muted) !important; }
.maintenance-admin .link-button { color: var(--panel-muted); }
.maintenance-banner {
  position: sticky; top: 0; z-index: 899; padding: .55rem 1rem; text-align: center; font-weight: 600;
  background: repeating-linear-gradient(45deg, #fcad00, #fcad00 14px, #e89f00 14px, #e89f00 28px); color: #010101;
}
.maintenance-banner { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; justify-content: center; }
.maintenance-banner a { color: #010101; text-decoration: underline; }
.cd-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cd-time {
  font-variant-numeric: tabular-nums; font-weight: 800; padding: .2rem .65rem; border-radius: 999px;
  background: #010101; color: var(--primary); letter-spacing: .02em;
}
.cd-time.is-paused { color: #f1ece6; }
.cd-form { display: inline; margin: 0; }
.cd-btn {
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; padding: .2rem .65rem; border-radius: 999px;
  border: 1.5px solid #010101; background: transparent; color: #010101;
  transition: background-color .15s ease, color .15s ease;
}
.cd-btn:hover { background: #010101; color: var(--primary); }
.cd-admin { margin: .25rem 0 1rem; padding: .6rem .75rem; border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fcad00, #fcad00 14px, #e89f00 14px, #e89f00 28px); }
.countdown.is-paused .countdown-unit { opacity: .75; border-style: dashed; }

/* Countdown auf der Wartungsseite */
.countdown { margin-top: .5rem; }
.countdown-units { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.countdown-unit {
  min-width: 5.2rem; padding: .8rem .6rem; border: 2px solid var(--primary); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; background: #0d0c0b;
}
.countdown-unit span { font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown-unit small { color: var(--panel-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.countdown-target { color: var(--panel-muted); margin: .8rem 0 0; font-size: .95rem; }
.countdown-done { color: var(--primary); font-size: 1.3rem; font-weight: 700; margin: 0; }
.countdown-units[hidden], .countdown-target[hidden], .countdown-done[hidden] { display: none; }
@media (max-width: 420px) { .countdown-unit { min-width: 4.2rem; } }

/* Admin: Wartung */
.countdown-settings { display: flex; flex-direction: column; gap: .6rem; }
.countdown-until { max-width: 280px; }
.countdown-until[hidden] { display: none; }
.admin-actions { align-items: center; }
.admin-actions > * { flex: 0 0 auto; }
.maintenance-off { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.button-danger { background: var(--danger); color: #fff; }
.button-danger:hover { background: #a93226; }

/* ---------- Linke Spalte: Bereiche ---------- */
.side-nav { display: flex; flex-direction: column; gap: .35rem; }
.side-link {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; border-radius: 12px;
  color: var(--panel-text) !important; text-decoration: none; font-weight: 600;
  transition: background-color .18s ease, color .18s ease;
}
.side-link:hover, .side-link:focus-visible { background: var(--primary); color: var(--on-primary) !important; outline: none; }
.side-link.active { background: var(--primary); color: var(--on-primary) !important; }
.side-icon { font-size: 1.2rem; }

/* ---------- Gedenkkerzen ---------- */
.candle { display: inline-block; flex: none; overflow: visible; }
.candle-xs { width: 22px; height: 35px; }
.candle-sm { width: 34px; height: 54px; }
.candle-md { width: 56px; height: 90px; }
.candle-lg { width: 80px; height: 128px; }
.candle-xl { width: 110px; height: 176px; }
/* Flamme: wiegt sich (Hülle), flackert (Kern), Schein pulsiert – jede Kerze mit eigenem Takt */
.candle .flame-outer { transform-box: view-box; transform-origin: 50px 45px; animation: flame-sway var(--d1, 3.1s) ease-in-out var(--delay, 0s) infinite, flame-stretch var(--d2, 1.3s) ease-in-out var(--delay, 0s) infinite; }
.candle .flame-core  { transform-box: view-box; transform-origin: 50px 44px; animation: flame-core var(--d3, .9s) ease-in-out var(--delay, 0s) infinite; }
.candle .candle-glow { transform-box: view-box; transform-origin: 50px 34px; animation: flame-glow var(--d2, 1.3s) ease-in-out var(--delay, 0s) infinite; }
@keyframes flame-sway { 0%,100% { rotate: -2.5deg; } 25% { rotate: 1.5deg; } 50% { rotate: 3deg; } 75% { rotate: -1deg; } }
@keyframes flame-stretch { 0%,100% { scale: 1 1; } 20% { scale: .95 1.07; } 45% { scale: 1.04 .94; } 70% { scale: .97 1.04; } }
@keyframes flame-core { 0%,100% { scale: 1 1; opacity: .85; } 30% { scale: .9 1.08; opacity: 1; } 60% { scale: 1.06 .93; opacity: .75; } }
@keyframes flame-glow { 0%,100% { opacity: .5; scale: 1; } 40% { opacity: .78; scale: 1.06; } 70% { opacity: .6; scale: .97; } }
@media (prefers-reduced-motion: reduce) { .candle .flame-outer, .candle .flame-core, .candle .candle-glow { animation: none; } }

/* ---------- Regenbogentiere ---------- */
.rainbow-hero { position: relative; margin: 0 0 1.5rem; border-radius: var(--radius); overflow: hidden; background: var(--page-bg); }
.rainbow-hero-media { position: relative; aspect-ratio: 20 / 17; overflow: hidden; }
.rainbow-hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  animation: rainbow-drift 26s ease-in-out infinite alternate; transform-origin: 50% 40%;
}
/* Video (läuft über dem Bild, sobald es spielt) */
.rainbow-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
.rainbow-video.is-playing { opacity: 1; }
@keyframes rainbow-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.09) translate(-1%, 1.5%); } }
/* Licht hinter dem Regenbogentor pulsiert */
.rainbow-gate-glow {
  position: absolute; left: 50%; top: 55%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 220, .75) 0%, rgba(255, 236, 170, .35) 35%, rgba(255, 220, 150, 0) 70%);
  mix-blend-mode: screen; animation: rainbow-gate 5s ease-in-out infinite;
}
@keyframes rainbow-gate { 0%,100% { opacity: .35; scale: .92; } 50% { opacity: .85; scale: 1.08; } }
/* funkelnde Sterne */
.rainbow-star {
  position: absolute; width: var(--s); height: var(--s); translate: -50% -50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(255,255,255,0) 60%);
  animation: rainbow-twinkle var(--d) ease-in-out var(--delay) infinite;
}
.rainbow-star::before, .rainbow-star::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: #fff; border-radius: 2px;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8);
}
.rainbow-star::before { width: 260%; height: 2px; }
.rainbow-star::after  { width: 2px; height: 260%; }
@keyframes rainbow-twinkle { 0% { opacity: 0; scale: .3; rotate: -45deg; } 45%,55% { opacity: 1; scale: 1; rotate: 0deg; } 100% { opacity: 0; scale: .3; rotate: 45deg; } }
/* Verlauf ins Dunkle (unten und leicht an den Rändern) */
.rainbow-fade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 58%, color-mix(in srgb, var(--page-bg) 65%, transparent) 78%, var(--page-bg) 93%),
    linear-gradient(to right, color-mix(in srgb, var(--page-bg) 35%, transparent), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, color-mix(in srgb, var(--page-bg) 35%, transparent));
}
.rainbow-hero-text {
  position: relative; margin-top: -20%; padding: 0 1.25rem 1.25rem; text-align: center; z-index: 1;
}
.rainbow-hero-text h1 { margin: 0 0 .4rem; font-size: clamp(1.7rem, 4.5vw, 2.4rem); text-shadow: 0 0 18px var(--page-bg), 0 2px 10px var(--page-bg); }
.rainbow-hero-text p { max-width: 560px; margin: 0 auto 1rem; color: var(--text); text-shadow: 0 0 10px var(--page-bg), 0 1px 6px var(--page-bg); }
@media (max-width: 600px) { .rainbow-hero-text { margin-top: -14%; } .rainbow-hero-text p { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .rainbow-hero-media img, .rainbow-gate-glow, .rainbow-star { animation: none; } .rainbow-star { opacity: .7; } .rainbow-video { display: none; } }
.memorial-empty { text-align: center; padding: 2rem; }
.memorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.memorial-card {
  display: flex; flex-direction: column; background: var(--panel); color: var(--panel-text) !important; text-decoration: none;
  border: 1px solid #2a2622; border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.memorial-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 6px 22px rgba(252, 173, 0, .15); }
.memorial-card-media { aspect-ratio: 4 / 3; background: #0d0c0b; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.memorial-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.memorial-card-placeholder { padding-top: .5rem; }
.memorial-card-body { display: flex; gap: .6rem; padding: .8rem .9rem 1rem; align-items: flex-start; }
.memorial-card-body h2 { font-size: 1.15rem; margin: 0; color: var(--primary); }
.memorial-dates { margin: .15rem 0 0; font-size: .85rem; color: var(--panel-muted); }
.memorial-stats { display: flex; gap: .9rem; margin: .4rem 0 0; font-size: .85rem; color: var(--panel-muted); }
.back-link { margin: 0 0 .75rem; font-size: .92rem; }

.memorial { background: var(--panel); color: var(--panel-text); border: 1px solid #2a2622; border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.memorial-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid #2a2622; }
.memorial-head-text { flex: 1 1 220px; }
.memorial-head h1 { color: var(--primary); margin: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); }
.memorial-by { margin: .3rem 0 0; font-size: .85rem; color: var(--panel-muted); }
.memorial-tools { display: flex; gap: .9rem; font-size: .9rem; }
.memorial-tools .link-button { color: var(--panel-muted); }
.memorial-content { padding-top: 1rem; display: flow-root; }
.memorial-image { float: right; position: relative; width: min(46%, 340px); margin: 0 0 1rem 1.25rem; padding: 0; border: 0; background: none; cursor: zoom-in; }
.memorial-image img { display: block; width: 100%; border-radius: 10px; border: 2px solid var(--primary); }
.memorial-text { font-size: 1.06rem; line-height: 1.75; overflow-wrap: anywhere; }
@media (max-width: 640px) { .memorial-image { float: none; width: 100%; margin: 0 0 1rem; } }

.candle-section { text-align: center; }
.candle-hero { display: flex; gap: 1.25rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.candle-hero > div { text-align: left; }
.candle-count { font-size: 1.15rem; margin: 0 0 .75rem; }
.candle-count strong { color: var(--link); font-size: 1.6rem; }
.candle-done { margin: 0; color: var(--success-text); }
.candle-button { font-size: 1.05rem; padding: .75rem 1.5rem; }
.candle-row { display: flex; flex-wrap: wrap; gap: .6rem .9rem; justify-content: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.candle-row-item { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 44px; }
.candle-row-item small { font-size: .72rem; color: var(--muted); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.condolence-section h2 { margin-top: 0; }

/* Formular */
.field-label { font-weight: 500; font-size: .95rem; }
.memorial-editor .editor-area { min-height: 12rem; }
.candle-picker { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem .8rem; margin: 0; }
.candle-picker legend { font-weight: 500; font-size: .95rem; padding: 0 .3rem; }
.candle-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; }
.candle-option {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .55rem .3rem;
  border: 2px solid transparent; border-radius: 10px; background: var(--panel); color: var(--panel-text); cursor: pointer;
  font-weight: 400; font-size: .78rem; text-align: center; transition: border-color .15s ease;
  hyphens: auto; overflow-wrap: anywhere;
}
.candle-breeds { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.candle-breeds > summary { cursor: pointer; font-weight: 500; font-size: .9rem; padding: .2rem 0 .5rem; }
.candle-breeds[open] > summary { margin-bottom: .2rem; }
.candle-option input { position: absolute; opacity: 0; pointer-events: none; }
.candle-option:hover { border-color: #6b5a2a; }
.candle-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(252, 173, 0, .25); }
.candle-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.memorial-current-image { display: flex; gap: 1rem; align-items: center; }
.memorial-current-image img { width: 120px; border-radius: 8px; }

/* ---------- Kopfzeile: Profilbild mit Menüs ---------- */
.header-inner { display: flex; align-items: center; gap: 1rem; }
.header-inner .nav { margin-left: auto; }
.head-user { flex: none; margin: .1rem .35rem 1.1rem .5rem; }
.head-avatar { display: block; line-height: 0; border-radius: 12px; }
.avatar-head { width: 84px; }
.avatar-head .avatar-initials { font-size: 2rem; }
.corner-menu { position: absolute; bottom: -12px; z-index: 50; }
.corner-left  { left: -12px; }
.corner-right { right: -12px; }
.corner-btn {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #010101; color: var(--primary); border: 2px solid var(--primary); cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6); transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.corner-menu.is-open .corner-btn, .corner-btn:hover { background: var(--primary); color: #010101; transform: scale(1.06); }
.menu-panel {
  position: absolute; top: calc(100% + 8px); min-width: 230px; padding: .45rem;
  background: #0d0c0b; color: var(--panel-text); border: 1.5px solid var(--primary); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .65);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.corner-left .menu-panel  { right: -40px; }
.corner-right .menu-panel { right: 0; }
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* Brücke für die Maus */
.corner-menu.is-open .menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-head { padding: .3rem .6rem .45rem; font-size: .8rem; color: var(--panel-muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #2a2622; margin-bottom: .3rem; }
.menu-item {
  display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .7rem; border-radius: 8px; border: 0;
  background: none; color: var(--panel-text) !important; font: inherit; font-size: .95rem; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--primary); color: #010101 !important; outline: none; }
.menu-form { margin: 0; }
.menu-admin { min-width: 300px; max-width: min(340px, calc(100vw - 32px)); }
.menu-box { border: 1px solid #3a3226; border-radius: 10px; padding: .6rem .7rem; margin: .1rem 0 .4rem; background: #151310; }
.menu-box-title { font-weight: 700; color: var(--primary); margin-bottom: .45rem; }
.upd-row { display: flex; justify-content: space-between; gap: .6rem; font-size: .9rem; }
.upd-new { color: var(--primary); }
.upd-title { margin: .45rem 0 .2rem; font-size: .88rem; font-weight: 600; }
.upd-notes { margin: .2rem 0 .5rem; padding-left: 1.1rem; font-size: .8rem; color: var(--panel-muted); max-height: 9.5rem; overflow-y: auto; }
.upd-notes li { margin-bottom: .2rem; }
.upd-ok { margin: .45rem 0 0; color: #9fdcb0; font-size: .88rem; }
.upd-warn { margin: .45rem 0 0; color: #f3b0a8; font-size: .85rem; }
.upd-form { margin: .3rem 0 0; }

/* Profilbild: Tier groß, Halter klein */
.duo { position: relative; display: inline-block; line-height: 0; }
.duo-owner { position: absolute; right: -14px; bottom: 26px; line-height: 0; border-radius: 9px; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.avatar-mini { width: 34px; border-width: 2px; border-radius: 8px; }
.avatar-mini .avatar-initials { font-size: .8rem; }
.avatar-lg + .duo-owner .avatar-mini, .duo .avatar-lg ~ .duo-owner .avatar-mini { width: 52px; }
.duo .avatar-lg ~ .duo-owner { right: -18px; bottom: 14px; }
.head-user .duo.has-pet { margin-right: 8px; }
.pet-featured { margin: .5rem 0 0; font-size: .88rem; color: var(--link); font-weight: 600; }
.pet-feature-form { margin-top: .5rem !important; }

/* ---------- Nutzerverwaltung ---------- */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--border); color: var(--muted); margin-right: .25rem; }
.badge-gold { border-color: var(--primary); color: var(--link); }
.badge-danger { border-color: var(--danger); color: var(--danger); }
.profile-badges { margin: .4rem 0 0; }
.admin-bar {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-bottom: 1rem; padding: .5rem .8rem; border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fcad00, #fcad00 14px, #e89f00 14px, #e89f00 28px); color: #010101; font-size: .88rem;
}
.admin-bar-title { font-weight: 800; }
.admin-bar-info a { color: #010101; }
.admin-bar-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; align-items: center; }
.admin-bar-btn {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; padding: .22rem .7rem; border-radius: 999px;
  border: 1.5px solid #010101; background: rgba(255,255,255,.25); color: #010101; transition: background-color .15s ease, color .15s ease;
}
.admin-bar-btn:hover { background: #010101; color: var(--primary); }
.admin-bar-btn.is-danger:hover { background: #8e1d12; color: #fff; border-color: #8e1d12; }
.admin-bar-note { font-style: italic; }
.members-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.members-head h1 { margin: 0; }
.members-count { font-size: 1rem; font-weight: 400; }
.members-card { padding: .4rem; overflow-x: auto; }
.members-table { width: 100%; border-collapse: collapse; }
.members-table th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 500; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.members-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.members-table tr:last-child td { border-bottom: 0; }
.members-table tr.is-blocked { opacity: .6; }
.member-link { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: var(--text) !important; }
.member-link span { display: flex; flex-direction: column; line-height: 1.25; }
.member-link small { font-size: .78rem; }
.member-link:hover strong { color: var(--link); }
@media (max-width: 600px) { .hide-sm { display: none; } }
.suggest-pw { align-self: flex-start; font-size: .88rem; color: var(--link); margin-top: -.4rem; }
.role-picker { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .75rem .75rem; margin: 0; display: grid; gap: .5rem; }
.role-picker legend { font-weight: 500; font-size: .95rem; padding: 0 .3rem; }
.role-option { flex-direction: row; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 400; }
.role-option input { width: auto; margin: 0; }
.role-option span { display: flex; flex-direction: column; }
.role-option small { color: var(--muted); font-size: .8rem; }
.role-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(252, 173, 0, .2); }
.role-option.is-disabled { opacity: .55; cursor: not-allowed; }

/* Benutzername über dem Profilbild (Kopfzeile) */
.head-user { display: flex; flex-direction: column; align-items: center; }
.head-avatar-wrap { position: relative; }
.head-username {
  display: block; margin-bottom: .35rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .85rem; font-weight: 700; color: var(--primary) !important; text-decoration: none; text-align: center;
}
.head-username:hover { text-decoration: underline; }

/* Prüfung beim Tippen */
.field-check { font-size: .84rem; margin-top: -.5rem; min-height: 0; }
.field-check.is-ok { color: var(--success-text); }
.field-check.is-bad { color: var(--error-text); }
.field-suggestions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .35rem; }
.field-suggestions small { color: var(--muted); margin-right: .2rem; }
.suggestion {
  font: inherit; font-size: .82rem; padding: .18rem .65rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--primary); background: none; color: var(--link); transition: background-color .15s ease, color .15s ease;
}
.suggestion:hover { background: var(--primary); color: #010101; }
input:disabled { opacity: .65; cursor: not-allowed; }

/* Mitgliederübersicht (Admins) */
.members-sub { margin: .25rem 0 0; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; }
.member-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.1rem .7rem .9rem; text-align: center;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--text) !important; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.member-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.member-card.is-admin { border-color: var(--primary); background: linear-gradient(180deg, rgba(252,173,0,.12), var(--surface) 55%); box-shadow: 0 0 0 1px rgba(252,173,0,.25); }
.member-card.is-owner { border-width: 2.5px; }
.member-card.is-blocked { opacity: .55; filter: grayscale(.6); }
.member-crown { position: absolute; top: .45rem; right: .55rem; font-size: 1.15rem; }
.member-name { font-size: 1.02rem; margin-top: .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.member-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; }
.member-meta { color: var(--muted); font-size: .78rem; }
.member-card .duo-owner { right: -10px; bottom: 6px; }
.member-card .duo-owner .avatar-mini { width: 28px; }
.side-link-admin { font-size: .95rem; }
.side-admin-tag { margin-left: auto; font-size: .68rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid currentColor; opacity: .8; }

/* Namen als Links zum Profil */
.author-link { color: inherit !important; text-decoration: none; }
.author-link:hover strong { color: var(--link); text-decoration: underline; }
.memorial-by a { color: var(--primary); }
.candle-row-item small a { color: var(--muted); text-decoration: none; }
.candle-row-item small a:hover { color: var(--link); }
.profile-actions { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-top: .6rem; }

/* ---------- Nachrichten ---------- */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: 999px; background: #d63a2a; color: #fff; font-size: .75rem; font-weight: 800; margin-left: .2rem;
}
.mail-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mail-head h1 { margin: 0; flex-basis: 100%; }
.mail-head .mail-tabs { margin: 0; flex: 1 1 auto; }
.mail-head-embedded { margin-bottom: 1rem; }
.mail-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.mail-tab {
  display: inline-flex; align-items: center; gap: .2rem; padding: .45rem .9rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border); color: var(--text) !important; font-weight: 500; transition: background-color .15s ease, border-color .15s ease;
}
.mail-tab:hover { border-color: var(--primary); }
.mail-tab.active { background: var(--primary); border-color: var(--primary); color: #010101 !important; font-weight: 700; }
.mail-tab .count { background: #d63a2a; color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 800; }
.mail-tab-admin { border-style: dashed; }
.mail-card { padding: .3rem; }
.mail-empty { padding: 1rem; margin: 0; }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list li + li { border-top: 1px solid var(--border); }
.mail-row { display: flex; gap: .7rem; align-items: center; padding: .65rem .7rem; text-decoration: none; color: var(--text) !important; border-radius: 8px; }
a.mail-row:hover { background: var(--bg); }
.mail-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mail-row-top { display: flex; gap: .5rem; align-items: baseline; }
.mail-row-top time { margin-left: auto; font-size: .8rem; white-space: nowrap; }
.mail-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.mail-list li.is-unread .mail-subject { color: var(--text); font-weight: 700; }
.mail-list li.is-unread .mail-row { box-shadow: inset 3px 0 0 var(--primary); }
.mail-state { font-size: .85rem; letter-spacing: -.1em; }
.mail-message-head { display: flex; gap: .9rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.mail-message-head h2 { margin: 0 0 .2rem; }
.mail-message-head p { margin: 0; font-size: .88rem; }
.mail-body { padding: 1rem 0; line-height: 1.7; overflow-wrap: anywhere; }
.mail-actions { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; align-items: center; padding-top: .8rem; border-top: 1px solid var(--border); }
.mail-report { width: 100%; }
.mail-report > summary { list-style: none; display: inline; cursor: pointer; }
.mail-report > summary::-webkit-details-marker { display: none; }
.mail-report[open] { padding: .7rem .8rem; border: 1px solid var(--danger); border-radius: 10px; margin-top: .3rem; }
.mail-report-form { margin-top: .6rem; }
.message-editor .editor-area { min-height: 10rem; }
.mail-quote { border-left: 3px solid var(--border); padding-left: .8rem; }
.mail-quote summary { cursor: pointer; }
.report.is-open { border-color: var(--danger); }
.report.is-handled { opacity: .85; }
.report-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.report-message { margin: .6rem 0; padding: .6rem .8rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.report-message p { margin: .2rem 0; }
.report-note { font-size: .9rem; }
.report-result { margin: 0; padding: .5rem .7rem; border-radius: 8px; background: var(--success-bg); color: var(--success-text); font-size: .92rem; }
.report-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.report-form label { flex: 1 1 200px; }

/* ---------- Freunde ---------- */
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.friend-card { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .9rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.friend-link { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; color: var(--text) !important; }
.friend-link:hover strong { color: var(--link); }
.friend-actions { display: flex; flex-wrap: wrap; gap: .4rem .6rem; justify-content: center; align-items: center; font-size: .88rem; }
.friend-requests { border-color: var(--primary); }
.friend-requests h2 { display: flex; align-items: center; gap: .4rem; }
.friend-hint { margin-top: 1rem; font-size: .88rem; }
.friend-strip { display: flex; flex-wrap: wrap; gap: .9rem; }
.friend-mini { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-decoration: none; width: 64px; }
.friend-mini small { color: var(--muted); font-size: .75rem; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-mini:hover small { color: var(--link); }
.friend-mini .duo-owner { display: none; }
.friend-data-list { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.friend-data-list dt { color: var(--muted); }
.friend-data-list dd { margin: 0; font-weight: 600; }
.vis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem 1rem; }
.corner-btn { position: relative; }
.corner-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #d63a2a; border: 2px solid #010101; }

/* ---------- Profil-Ansicht mit Reitern ---------- */
.profile-name { margin: 0; font-size: 1.7rem; }
.own-preview {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: 1rem; padding: .45rem .6rem .45rem .9rem;
  border: 1px dashed var(--primary); border-radius: 999px; font-size: .9rem;
}
.own-preview > span { color: var(--muted); }
.own-preview a:not(.button) { padding: .2rem .7rem; border-radius: 999px; text-decoration: none; color: var(--text) !important; }
.own-preview a.active { background: var(--primary); color: #010101 !important; font-weight: 700; }
.own-edit { margin-left: auto; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 0; padding: 0 .3rem; border-bottom: 2px solid var(--primary); }
.profile-tab {
  padding: .6rem .8rem; border-radius: 12px 12px 0 0; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap;
  color: var(--panel-text) !important; background: var(--panel); border: 1px solid #2a2622; border-bottom: 0;
  transition: background-color .15s ease, color .15s ease;
}
.profile-tab:hover { background: #2b2620; }
.profile-tab.active { background: var(--primary); color: #010101 !important; border-color: var(--primary); }
.profile-tab-body { padding-top: 1.1rem; }
.blog-post-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .88rem; }
.blog-post-image { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; margin-top: .75rem; }
.blog-post-meta { margin-top: .6rem; font-size: .88rem; }
.mail-links { display: flex; gap: 1rem; align-items: center; padding: .5rem .7rem; margin: 0; }
.edit-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.edit-head h1 { margin: 0; }

/* Rücksprung beim "Als … anmelden": blutorange, leicht pulsierend */
.impersonate-form { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; margin: 0 auto 0 .4rem; }
.impersonate-back {
  font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; padding: .5rem 1rem; border-radius: 999px; border: 0;
  background: #d6451b; color: #fff; box-shadow: 0 0 0 0 rgba(214, 69, 27, .7);
  animation: impersonate-pulse 2s ease-in-out infinite;
}
.impersonate-back:hover { background: #b8360f; }
.impersonate-note { color: #f0a48a; font-size: .75rem; padding-left: .6rem; }
@keyframes impersonate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 27, .65); } 50% { box-shadow: 0 0 0 10px rgba(214, 69, 27, 0); } }
@media (prefers-reduced-motion: reduce) { .impersonate-back { animation: none; } }
.maintenance .impersonate-back { margin-top: 1.5rem; }

/* Sperr-Zeichen (Berner Sennenhund) in der Ecke des Profilbilds */
.avatar { position: relative; }
.block-mark { position: absolute; right: 2px; bottom: 2px; width: 38%; min-width: 15px; max-width: 46px; aspect-ratio: 1; line-height: 0; z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.block-mark svg { width: 100%; height: 100%; }
.avatar-sm .block-mark { width: 55%; right: -1px; bottom: -1px; }

/* ---------- Toast-Nachrichten ---------- */
.toasts {
  position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: .6rem;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .9rem; border-radius: 12px;
  background: #0d0c0b; color: #f1ece6; border: 1.5px solid; box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  font-weight: 600; line-height: 1.4; opacity: 0; transform: translateX(24px); transition: opacity .25s ease, transform .25s ease;
}
.toast.is-in { opacity: 1; transform: translateX(0); }
.toast.is-out { opacity: 0; transform: translateX(24px); }
.toast.is-success { border-color: #2e9e5b; }
.toast.is-success .toast-icon { color: #2e9e5b; }
.toast.is-error { border-color: #d63a2a; }
.toast.is-error .toast-icon { color: #d63a2a; }
.toast-icon { flex: none; line-height: 0; margin-top: .05rem; }
.toast-text { flex: 1; }
.toast-close { flex: none; border: 0; background: none; color: #a89e94; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.toast-close:hover { color: #fff; }
@media (max-width: 600px) { .toasts { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Eigenes Bestätigungsfenster */
.confirm-dialog { width: min(440px, calc(100vw - 32px)); text-align: center; }
.confirm-text { font-size: 1.05rem; margin: .3rem 0 1.3rem; line-height: 1.5; }
.confirm-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* Fenster mit goldenem Rahmen (Wartungsmodus) */
.gold-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 1.25rem 1.4rem 1.4rem;
  background: var(--surface); color: var(--text); border: 2.5px solid var(--primary); border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(252, 173, 0, .18);
}
.gold-dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(2px); }
.gold-dialog h2 { margin: 0 0 1rem; color: var(--link); }
.gold-dialog-close { position: absolute; top: .7rem; right: .8rem; margin: 0; }
.gold-dialog-close button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--primary); background: none; color: var(--link); cursor: pointer; font-size: 1rem; }
.gold-dialog-close button:hover { background: var(--primary); color: #010101; }

/* ---------- Rechte Spalte: Neueste Flammen ---------- */
.flames-title { font-size: 1.05rem; margin: 0 0 .75rem; color: var(--primary); }
.flame-list { display: flex; flex-direction: column; gap: .35rem; }
.flame-item {
  display: flex; gap: .65rem; align-items: center; padding: .45rem; border-radius: 10px; text-decoration: none;
  color: var(--panel-text) !important; transition: background-color .15s ease;
}
.flame-item:hover { background: #1d1a16; }
.flame-thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--primary); background: #0d0c0b; display: flex; align-items: center; justify-content: center; }
.flame-thumb img { width: 100%; height: 100%; object-fit: cover; }
.flame-thumb .candle-sm { width: 26px; height: 42px; }
.flame-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.flame-info strong { color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flame-info small { font-size: .78rem; color: var(--panel-muted); }
.flame-count { display: inline-flex; align-items: center; gap: .25rem; }
.flame-count .candle-xs { width: 12px; height: 19px; }
.flames-all { display: inline-block; margin-top: .75rem; font-size: .88rem; }
.flames-empty { font-size: .9rem; color: var(--panel-muted); }
/* in der Profil-Ansicht etwas heller */
.card .flame-item { color: var(--text) !important; }
.card .flame-item:hover { background: var(--bg); }
.card .flame-info small { color: var(--muted); }

/* Profil-Ansicht */
.profile-view-head { display: flex; gap: 1.25rem; align-items: center; }
.profile-view-head > div { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) { .profile-view-head { flex-wrap: wrap; } }
.profile-view-head h2 { margin: 0; font-size: 1.6rem; }
.profile-view-head p { margin: .3rem 0 0; }

@media (max-width: 600px) {
  .header-inner { flex-wrap: wrap; }
  .avatar-head { width: 64px; }
  .corner-btn { width: 30px; height: 30px; }
}

/* Hinweis nach einem Update */
.update-banner {
  position: sticky; top: 0; z-index: 900; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--primary); color: var(--on-primary); font-weight: 600;
}
.update-banner .button { background: var(--on-primary); color: var(--primary) !important; }

/* ---------- Ladeanimation ---------- */
.is-loading { position: relative; color: transparent !important; pointer-events: none; cursor: wait; }
.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 3px solid currentColor; border-color: var(--primary) var(--primary) var(--primary) transparent;
  animation: spin .7s linear infinite;
}
.button.is-loading::after { border-color: var(--on-primary) var(--on-primary) var(--on-primary) transparent; }
.button-ghost.is-loading::after { border-color: var(--primary) var(--primary) var(--primary) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-loading::after { animation-duration: 2s; } }

/* ---------- Community: Editor ---------- */
.editor { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.editor:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .35rem; border-bottom: 1px solid var(--border); }
.editor-btn {
  min-width: 2.1rem; height: 2.1rem; padding: 0 .55rem; border-radius: 6px; border: 1px solid transparent;
  background: none; color: var(--text); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
}
.editor-btn:hover, .editor-btn.active { border-color: var(--primary); color: var(--link); }
.editor-btn.is-bold { font-weight: 800; }
.editor-btn.is-italic { font-style: italic; font-family: Georgia, serif; }
.editor-btn.is-strike { text-decoration: line-through; }
.editor-btn.is-image { font-size: .9rem; }
.editor-count { margin-left: auto; font-size: .8rem; padding-right: .3rem; }
.editor-count.too-long { color: var(--error-text); font-weight: 600; }
.editor-area { min-height: 5.5rem; max-height: 22rem; overflow-y: auto; padding: .65rem .75rem; outline: none; white-space: pre-wrap; word-wrap: break-word; }
.editor-compact .editor-area { min-height: 2.8rem; }
.editor-area:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.editor-preview { position: relative; padding: .5rem .75rem .75rem; }
.editor-preview[hidden] { display: none; }
.editor-preview img { max-height: 180px; max-width: 100%; border-radius: 8px; display: block; }
.editor-preview-remove {
  position: absolute; top: .9rem; left: .9rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; font-size: .9rem;
}

/* Smiley-Auswahl */
.emoji-panel { border-bottom: 1px solid var(--border); }
.emoji-panel[hidden] { display: none; }
.emoji-tabs { display: flex; gap: .15rem; padding: .3rem .35rem 0; overflow-x: auto; }
.emoji-tab { background: none; border: 0; border-bottom: 2px solid transparent; font-size: 1.25rem; padding: .25rem .4rem; cursor: pointer; }
.emoji-tab.active { border-bottom-color: var(--primary); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.3rem, 1fr)); max-height: 13rem; overflow-y: auto; padding: .35rem; }
.emoji { background: none; border: 0; font-size: 1.45rem; line-height: 1; padding: .3rem 0; border-radius: 6px; cursor: pointer; }
.emoji:hover { background: var(--surface); }

/* ---------- Community: Beiträge ---------- */
.post-head { display: flex; gap: .7rem; align-items: center; }
.post-author { flex: 1; line-height: 1.3; font-size: .95rem; }
.post-author time { font-size: .82rem; }
.post-tools { align-self: flex-start; display: flex; gap: .9rem; font-size: .85rem; }
.post-delete { font-size: .85rem; }
.post-edit { margin-top: .75rem; }
.post-body { margin: .75rem 0 0; overflow-wrap: anywhere; }
.post-body del, .comment-body del { opacity: .75; }
.post-image { display: block; margin: .75rem 0 0; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; }
.post-image img { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; }
.post-actions { display: flex; gap: .5rem; margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.action {
  background: none; border: 1px solid transparent; border-radius: 999px; padding: .35rem .8rem;
  font: inherit; font-size: .92rem; color: var(--muted); cursor: pointer;
}
.action:hover:not(:disabled) { border-color: var(--border); color: var(--text); }
.action.active { color: var(--link); border-color: var(--primary); font-weight: 600; }
.action:disabled { cursor: default; }
.feed-more { display: block; margin: 0 auto 1rem; }
.feed-more[hidden] { display: none; }

/* Kommentare */
.comments:empty { display: none; }
.comment-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
.comment-replies { margin-top: .5rem; padding-left: .25rem; border-left: 2px solid var(--border); padding-left: .75rem; }
.comment { display: flex; gap: .55rem; align-items: flex-start; }
.comment-main { flex: 1; min-width: 0; }
.comment-bubble { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .7rem; }
.comment-meta { font-size: .85rem; }
.comment-meta time { font-size: .78rem; }
.comment-body { overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: .9rem; font-size: .85rem; padding: .2rem .4rem 0; }
.comment-composer { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.comment-composer[hidden] { display: none; }
.comment-composer-actions { align-items: center; }
.comment-composer-actions > * { flex: 0 0 auto; }
.comment-edit { margin-top: .4rem; }
.comment-edited { font-size: .78rem; font-style: italic; }

/* Lightbox: Bild links, Kommentare rechts */
.post-image { position: relative; }
.post-image-badge {
  position: absolute; right: .6rem; bottom: .6rem; padding: .25rem .65rem; border-radius: 999px;
  background: rgba(1,1,1,.78); color: var(--primary); font-size: .85rem; font-weight: 600;
}
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; padding: 64px 16px 16px; }
.lightbox[hidden] { display: none; }
.lightbox-dialog {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px;
  width: min(100%, 1400px); height: min(100%, 900px);
}
.lightbox-stage { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; cursor: zoom-out; }
.lightbox-stage img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.6); cursor: default; }
.lightbox-panel {
  display: flex; flex-direction: column; gap: .75rem; min-height: 0;
  background: var(--panel); color: var(--panel-text); border: 1px solid var(--primary); border-radius: var(--radius); padding: 1rem;
}
.lightbox-panel .muted { color: var(--panel-muted); }
.lightbox-head { display: flex; gap: .6rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid #2a2622; }
.lightbox-comments { flex: 1; overflow-y: auto; min-height: 0; padding-right: .25rem; }
.lightbox-comments .comment-list:first-child { margin-top: 0; }
.lightbox-panel .comment-bubble { background: #1a1816; border-color: #2a2622; }
.lightbox-panel .editor { background: #1a1816; border-color: #2a2622; }
.lightbox-panel .editor-btn { color: var(--panel-text); }
.lightbox-panel .comment-composer { margin-top: 0; }
.lightbox-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid var(--primary); background: #010101; color: var(--primary); font-size: 1.2rem; cursor: pointer;
}
/* Handy/Tablet: Bild oben, Kommentare darunter */
@media (max-width: 900px) {
  .lightbox { padding: 0; align-items: stretch; }
  .lightbox-close { top: 8px; right: 8px; }
  .lightbox-dialog { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; gap: 0; overflow: hidden; }
  .lightbox-stage { padding: 56px 8px 8px; max-height: 50vh; }
  .lightbox-stage img { max-height: calc(50vh - 64px); }
  .lightbox-panel { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
}
body.no-scroll { overflow: hidden; }

/* ---------- Profilbild-Anzeige wählen ---------- */
.avatar-mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.avatar-mode-option { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 12px; border: 2px solid var(--border, #333);
  border-radius: 14px; cursor: pointer; text-align: center; position: relative; transition: border-color .15s, background .15s; }
.avatar-mode-option:hover { border-color: rgba(252, 173, 0, .5); }
.avatar-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-mode-option:has(input:checked) { border-color: var(--primary); background: rgba(252, 173, 0, .08); }
.avatar-mode-option:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.avatar-mode-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.avatar-mode-preview { min-height: 80px; display: flex; align-items: center; justify-content: center; }
.avatar-mode-preview .duo-owner { right: -12px; bottom: -6px; }
.avatar-mode-label { font-size: .9rem; font-weight: 600; }

/* ---------- Mitglieder: Filter und Suche ---------- */
.member-filter-box { margin-bottom: 1rem; }
.member-filter-box > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.member-filter-box > summary::-webkit-details-marker { display: none; }
.member-filter-box .filter-caret { transition: transform .2s ease; }
.member-filter-box[open] .filter-caret { transform: rotate(180deg); }
.member-filter-box[open] > summary { margin-bottom: .6rem; }
.member-filter-box[open] .member-filter { animation: filter-drop .2s ease; }
@keyframes filter-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.member-filter-active { margin: -.5rem 0 1rem; font-size: .85rem; }
.member-filter { display: grid; gap: 12px; margin-bottom: 0; }
.member-search input { width: 100%; }
.member-filter-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.member-filter-row label:not(.checkbox) { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; min-width: 120px; flex: 1 1 120px; }
.member-filter-row .checkbox { padding-bottom: 8px; }

/* ---------- Admin liest Postfach mit ---------- */
.admin-peek-note { background: rgba(252, 173, 0, .1); border: 1px dashed var(--primary); border-radius: 10px; padding: 10px 14px; font-size: .9rem; margin: 0 0 1rem; }
.mail-heading { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.profile-tab .nav-count { margin-left: 4px; }

/* ---------- Großer Editor (Tierblog, Gedenkeinträge) ---------- */
.rich-editor { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.rich-editor:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; padding: .35rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 3; background: var(--bg); border-radius: 10px 10px 0 0; }
.rich-btn { min-width: 2.15rem; height: 2.15rem; padding: 0 .5rem; border-radius: 6px; border: 1px solid transparent; background: none;
  color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rich-btn:hover, .rich-btn.active { border-color: var(--primary); color: var(--link); }
.rich-btn.is-disabled { opacity: .35; pointer-events: none; }
.rich-btn.is-bold { font-weight: 800; }
.rich-btn.is-italic { font-style: italic; font-family: Georgia, serif; }
.rich-btn.is-under { text-decoration: underline; }
.rich-btn.is-strike { text-decoration: line-through; }
.rich-btn.is-heading { font-weight: 800; font-family: Georgia, serif; }
.rich-btn.is-html { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.rich-sep { width: 1px; height: 1.4rem; background: var(--border); margin: 0 .2rem; }
.rich-color-icon { font-weight: 800; border-bottom: 3px solid #d6451b; line-height: 1.1; padding: 0 2px; }
.rich-bg-icon { font-weight: 800; background: var(--primary); color: #010101; border-radius: 3px; padding: 0 4px; line-height: 1.3; }
.rich-pop-wrap { position: relative; display: inline-flex; }
.rich-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px; padding: .7rem; background: var(--surface);
  border: 1.5px solid var(--primary); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.rich-pop[hidden] { display: none; }
.rich-pop-title { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }
.rich-colors { display: grid; grid-template-columns: repeat(8, 1.6rem); gap: .3rem; margin-bottom: .5rem; }
.rich-swatch { width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.rich-swatch:hover { transform: scale(1.12); outline: 2px solid var(--primary); }
.rich-custom { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin-bottom: .3rem; }
.rich-custom input { width: 2.2rem; height: 1.7rem; padding: 0; border: none; background: none; }
.rich-pop .emoji-panel { position: static; width: 300px; max-width: 80vw; border: 0; box-shadow: none; padding: 0; }
.rich-layouts { display: grid; gap: .3rem; margin-bottom: .5rem; min-width: 250px; }
.rich-layout { display: flex; align-items: center; gap: .6rem; padding: .35rem .45rem; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.rich-layout:hover { border-color: var(--primary); }
.rich-layout small { font-size: .82rem; }
.rich-layout-bars { display: flex; gap: 3px; width: 64px; height: 22px; flex: none; }
.rich-layout-bars span { background: var(--primary); border-radius: 3px; opacity: .85; }
.rich-area { position: relative; min-height: 16rem; padding: .9rem 1rem; outline: none; word-wrap: break-word; }
.rich-area.is-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; }
.rich-area .col { outline: 1px dashed rgba(252, 173, 0, .45); outline-offset: 2px; min-height: 2.5rem; }
.rich-source { display: block; width: 100%; min-height: 16rem; border: 0; border-radius: 0 0 10px 10px; padding: .9rem 1rem; resize: vertical;
  background: #0d0c0b; color: #9fdcb0; font: .85rem/1.5 ui-monospace, Menlo, Consolas, monospace; outline: none; }

/* Inhalt wie ihn Besucher sehen */
.rich-content { line-height: 1.6; }
.rich-content > :first-child { margin-top: 0; }
.rich-content p { margin: 0 0 .7rem; }
.rich-content h2 { font-size: 1.35rem; margin: 1.1rem 0 .5rem; color: var(--primary); }
.rich-content h3 { font-size: 1.12rem; margin: 1rem 0 .4rem; }
.rich-content blockquote { margin: .8rem 0; padding: .4rem 1rem; border-left: 4px solid var(--primary); background: rgba(252,173,0,.07); border-radius: 0 8px 8px 0; font-style: italic; }
.rich-content img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: .4rem 0 .8rem; }
.rich-content ul, .rich-content ol { margin: 0 0 .7rem; padding-left: 1.4rem; }
.rich-content a { color: var(--link); }
.rich-content .cols { display: grid; gap: 1rem; margin: .6rem 0 1rem; }
.rich-content .cols-50-50 { grid-template-columns: 1fr 1fr; }
.rich-content .cols-33-67 { grid-template-columns: 1fr 2fr; }
.rich-content .cols-67-33 { grid-template-columns: 2fr 1fr; }
.rich-content .cols-33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
.rich-content .cols-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
.rich-content .cols-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
.rich-content .cols-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
.rich-content .col { min-width: 0; }
.rich-content .col > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .rich-content .cols { grid-template-columns: 1fr !important; } }

/* Schreibfenster */
.rich-dialog { width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); height: calc(100vh - 24px); padding: 0; overflow: hidden; }
.rich-dialog[open] { display: flex; }
.rich-dialog-inner { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.rich-dialog-head { padding: 1rem 1.4rem .2rem; }
.rich-dialog-head h2 { margin: 0; }
.rich-dialog-body { flex: 1; overflow-y: auto; padding: .6rem 1.4rem 1rem; display: grid; gap: .9rem; align-content: start; }
.rich-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem 1.4rem; border-top: 1px solid var(--border); background: var(--surface); }
.rich-dialog-spacer { flex: 1; }
.rich-title-field input { font-size: 1.15rem; font-weight: 700; }
.rich-preview { border: 1px dashed var(--primary); border-radius: 12px; padding: 1rem 1.2rem; }
.rich-preview[hidden] { display: none; }
.rich-preview-note { margin: 0 0 .8rem; font-size: .85rem; color: var(--primary); font-weight: 600; }
@media (max-width: 640px) {
  .rich-dialog-foot { justify-content: flex-end; }
  .rich-dialog-foot .checkbox { width: 100%; }
  .rich-dialog-spacer { display: none; }
}

/* ---------- Tierblog ---------- */
.sub-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.sub-tab { padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--border); color: var(--text) !important; text-decoration: none; font-weight: 600; font-size: .92rem; }
.sub-tab:hover { border-color: var(--primary); }
.sub-tab.active { background: var(--primary); border-color: var(--primary); color: #010101 !important; }
.blog-block-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.blog-block-head h2 { margin: 0; }
.blog-block-hint { font-size: .85rem; margin: 0 0 .5rem; }
.blog-entry { padding: 1rem 0; border-top: 1px solid var(--border); }
.blog-list .blog-entry:first-child, .blog-block .blog-entry, .rich-preview .blog-entry { border-top: 0; padding-top: 0; }
.blog-entry.is-draft { opacity: .85; }
.blog-entry-head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: .6rem; }
.blog-entry-title { margin: 0; font-size: 1.3rem; }
.blog-entry-date { margin: .15rem 0 0; font-size: .85rem; }
.blog-entry-tools { display: flex; gap: .8rem; flex: none; }
.blog-all-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .4rem; }

/* ---------- Gedenkseite: bis zu 3 Bilder ---------- */
.memorial-gallery { float: right; width: min(46%, 340px); margin: 0 0 1rem 1.25rem; display: grid; gap: .6rem; }
.memorial-gallery .memorial-image { float: none; width: 100%; margin: 0; }
.memorial-gallery.count-2, .memorial-gallery.count-3 { float: none; width: 100%; margin: 0 0 1.1rem; }
.memorial-gallery.count-2 { grid-template-columns: 1fr 1fr; }
.memorial-gallery.count-3 { grid-template-columns: 1fr 1fr 1fr; }
.memorial-gallery.count-2 img, .memorial-gallery.count-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 640px) {
  .memorial-gallery { float: none; width: 100%; margin: 0 0 1rem; }
  .memorial-gallery.count-3 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Profil: Regenbogen ---------- */
.rb-list { display: grid; gap: .6rem; }
.rb-item { display: flex; gap: .9rem; align-items: center; padding: .6rem; border: 1px solid var(--border); border-radius: 12px; }
.rb-thumb { width: 64px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0d0c0b; }
.rb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rb-info { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rb-info a { color: var(--text); text-decoration: none; }
.rb-info small { display: inline-flex; align-items: center; gap: .3rem; }
.rb-info small svg { height: 1.1em; width: auto; }
.rb-tools { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.condolence-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.condolence-link { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem; border: 1px solid var(--border); border-radius: 12px; color: var(--text) !important; text-decoration: none; }
.condolence-link:hover { border-color: var(--primary); }
.condolence-link-candle { flex: none; }
.condolence-link-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.condolence-link-text { font-style: italic; color: var(--muted); }
.m-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.m-slot { border: 1px dashed var(--border); border-radius: 12px; padding: .5rem; display: grid; gap: .4rem; }
.m-slot-img { aspect-ratio: 4 / 3; border-radius: 8px; background: #0d0c0b; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.m-slot-img img { width: 100%; height: 100%; object-fit: cover; }
.m-slot-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: space-between; }
.m-slot-tools label.button { cursor: pointer; }
.rich-preview-wrap .memorial { border: 1px dashed var(--primary); border-radius: 12px; padding: 1rem 1.2rem; }
@media (max-width: 640px) { .m-slots { grid-template-columns: 1fr 1fr; } .rb-item { flex-wrap: wrap; } .rb-tools { flex-direction: row; width: 100%; justify-content: flex-end; } }
.rich-source[hidden], .rich-area[hidden], .rich-editor[hidden], .rich-dialog-body[hidden] { display: none; }
@media (max-width: 640px) {
  .blog-entry-head { flex-direction: column; gap: .4rem; }
}

/* ---------- Postamt (E-Mail-Vorlagen) ---------- */
.postamt-head h1 { margin-top: 0; }
.postamt-list { display: grid; gap: .75rem; }
.postamt-item { display: flex; gap: 1rem; align-items: center; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.postamt-item:hover { border-color: var(--primary); transform: translateY(-1px); }
.postamt-icon { font-size: 1.6rem; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(252, 173, 0, .15); flex: none; }
.postamt-main { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.postamt-subject { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postamt-state { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; flex: none; }
.postamt-edit { display: grid; gap: 1rem; }
.postamt-edit h1 { margin: 0; }
.postamt-edit > p { margin: 0; }
.postamt-edit label input { width: 100%; }
.postamt-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.postamt-chip { display: inline-flex; gap: .35rem; align-items: center; border: 1px solid var(--border); background: var(--surface, transparent); color: inherit;
  border-radius: 999px; padding: .25rem .65rem; font-size: .8rem; cursor: pointer; }
.postamt-chip:hover { border-color: var(--primary); }
.postamt-chip code { color: var(--primary-dark, #a86f00); font-weight: 600; }
.postamt-frame { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.postamt-frame .rich-editor { border: 0; border-radius: 0; }
.postamt-fixed { background: #010101; color: #fcad00; font-size: .8rem; text-align: center; padding: .4rem; letter-spacing: .03em; }
.postamt-fixed:last-child { background: #faf6ef; color: #7a716a; border-top: 1px solid var(--border); }
.postamt-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.postamt-actions .spacer { flex: 1; }
.postamt-preview h2 { margin-top: 0; }
.postamt-iframe { width: 100%; min-height: 520px; border: 1px solid var(--border); border-radius: 12px; background: #f1ece6; }
@media (max-width: 640px) {
  .postamt-item { flex-wrap: wrap; }
  .postamt-state { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .postamt-actions .button { flex: 1 1 auto; }
}

/* ---------- Tier bearbeiten / Rassen-Auswahl ---------- */
.breed-area { display: grid; gap: .75rem; }
.breed-area label { display: flex; flex-direction: column; gap: 4px; }
.breed-area label[hidden] { display: none; }
.pet-edit { margin: .4rem 0; }
.pet-edit > summary { cursor: pointer; list-style: none; display: inline-block; }
.pet-edit > summary::-webkit-details-marker { display: none; }
.pet-edit[open] > summary { margin-bottom: .6rem; }
.pet-edit .pet-form { border: 1px solid var(--border); border-radius: 12px; padding: .9rem; }
.pet-candle { display: inline-flex; vertical-align: middle; margin-left: .3rem; }
.pet-candle .candle-xs { width: 14px; height: 22px; }
.candle-picker.is-auto .candle-option:not(:has(input:checked)) { opacity: .35; cursor: not-allowed; }
.postamt-frame .rich-area a.mail-button { display: inline-block; background: #fcad00; color: #010101; font-weight: 700; text-decoration: none; padding: .55rem 1.1rem; border-radius: 999px; }

/* ---------- Kerzen-Lupe (Maus über kleiner Kerze) ---------- */
.candle-zoom { position: fixed; z-index: 2000; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .9rem 1.1rem .7rem; border-radius: 16px; background: #010101; border: 1px solid #6b5a2a;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(252, 173, 0, .15);
  opacity: 0; transform: translateY(6px) scale(.92); transition: opacity .15s ease, transform .15s ease; visibility: hidden; }
.candle-zoom.is-visible { opacity: 1; transform: none; visibility: visible; }
.candle-zoom.is-measure { visibility: hidden; transition: none; }
.candle-zoom .candle-zoom-svg { width: 140px; height: 224px; }
.candle-zoom-label { color: #fcad00; font-weight: 600; font-size: .9rem; text-align: center; max-width: 180px; }
@media (prefers-reduced-motion: reduce) { .candle-zoom { transition: none; } }
.candle-picker .checkbox-hint[hidden] { display: none; }

/* ---------- Kerzen: Vorschau im Tier-Formular, Übersichtsseite, Kerzenwünsche ---------- */
.breed-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.pet-candle-preview { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .9rem;
  border-radius: 14px; background: #010101; border: 1px solid #6b5a2a; min-width: 150px; text-align: center; }
.pet-candle-preview[hidden] { display: none; }
.pet-candle-preview figcaption { display: flex; flex-direction: column; gap: .15rem; color: #fff; }
.pet-candle-preview figcaption strong { color: #fcad00; }
.pet-candle-preview .link-button { font-size: .8rem; margin-top: .2rem; }
.candle-pop { animation: candle-pop .35s ease; }
@keyframes candle-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .breed-row { grid-template-columns: 1fr; } .pet-candle-preview { justify-self: center; } }
.rainbow-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.candle-page-head h1 { margin-top: 0; }
.candle-search { display: flex; flex-direction: column; gap: 4px; max-width: 420px; margin: .4rem 0 .8rem; }
.candle-jump { margin-bottom: 0; }
.candle-gallery[hidden] { display: none; }
.candle-gallery h2 { margin-top: 0; }
.candle-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.candle-tile { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .9rem .4rem .7rem;
  border-radius: 14px; background: #010101; color: #fff; text-align: center; font-size: .88rem; }
.candle-tile[hidden] { display: none; }
.candle-tile figcaption { color: #fcad00; font-weight: 600; }
.candle-wishes h2 { margin-top: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.wish-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wish-list li { display: flex; gap: .8rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; }
.wish-count { min-width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: var(--primary); color: #010101; font-weight: 700; }
.wish-main { display: flex; flex-direction: column; gap: .1rem; }
.wish-pets { font-size: .8rem; }

/* ---------- Tiere verschieben ---------- */
.pet-grid .pet { position: relative; }
.pet-drag { position: absolute; top: .55rem; right: .55rem; width: 34px; height: 34px; display: none; place-items: center;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted, #7a716a);
  font-size: 1.2rem; line-height: 1; cursor: grab; touch-action: none; user-select: none; }
[data-pet-sort] .pet-drag { display: grid; }
.pet-drag:hover, .pet-drag:focus-visible { border-color: var(--primary); color: var(--primary-dark); }
.pet-grid.is-sorting { cursor: grabbing; user-select: none; }
.pet-grid .pet.is-dragging { z-index: 20; cursor: grabbing; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); border-color: var(--primary); background: var(--surface); }
.pet-grid .pet.is-dragging .pet-drag { cursor: grabbing; }
.pet-sort-hint { font-size: .85rem; margin: -.3rem 0 .8rem; }
.pet-drag-demo { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; }
[data-pet-sort] .pet .pet-head { padding-right: 2.4rem; }

/* ---------- Tierbörse ---------- */
:root { --k-verkauf: #fcad00; --k-tausch: #2e9e5b; --k-suche: #3f51b5; --k-verschenken: #e91e63; }
.boerse-hero { background: linear-gradient(135deg, #010101, #2b2118); color: #fff; border-radius: 16px; padding: 1.3rem 1.4rem 1.1rem; margin-bottom: .8rem; }
.boerse-hero h1 { margin: 0 0 .25rem; color: var(--primary); }
.boerse-hero p { margin: 0; color: #ddd; }
.boerse-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.boerse-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 .8rem; }
.boerse-tab { display: inline-flex; gap: .35rem; align-items: center; padding: .4rem .85rem; border-radius: 999px; background: #fff; color: #2b2118 !important;
  text-decoration: none; font-size: .9rem; border: 2px solid transparent; }
.boerse-tab b { font-weight: 700; opacity: .75; }
.boerse-tab:hover { border-color: var(--primary); }
.boerse-tab.active { background: var(--primary); font-weight: 700; }
.boerse-tab.tab-tausch.active { background: var(--k-tausch); color: #fff !important; }
.boerse-tab.tab-suche.active { background: var(--k-suche); color: #fff !important; }
.boerse-tab.tab-verschenken.active { background: var(--k-verschenken); color: #fff !important; }
.boerse-tab-me { background: transparent; color: #fcad00 !important; border-color: rgba(252, 173, 0, .5); }
.boerse-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.boerse-filter .boerse-search { grid-column: 1 / -1; }
.boerse-filter input, .boerse-filter select { width: 100%; min-width: 0; background: #fff; color: #2b2118; border-color: transparent; }
.boerse-filter select option { color: #2b2118; }
@media (max-width: 640px) { .boerse-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.boerse-resultbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: 0 0 .8rem; }
.boerse-resultbar .button { margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.ad-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ad-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .12); border-color: var(--primary); }
.ad-card-link { position: absolute; inset: 0; z-index: 1; }
.ad-card-img { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #fff1cf, #ffd88a); }
.kind-tausch .ad-card-img { background: linear-gradient(135deg, #dcf5e6, #a8e0bd); }
.kind-suche .ad-card-img { background: linear-gradient(135deg, #e3e7ff, #b9c2ff); }
.kind-verschenken .ad-card-img { background: linear-gradient(135deg, #ffe4ee, #ffbcd4); }
.ad-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ad-card-icon { font-size: 3.6rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15)); }
.ad-badge { position: absolute; top: .55rem; left: .55rem; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; background: var(--k-verkauf); color: #010101; }
.ad-badge-tausch { background: var(--k-tausch); color: #fff; }
.ad-badge-suche { background: var(--k-suche); color: #fff; }
.ad-badge-verschenken { background: var(--k-verschenken); color: #fff; }
.ad-fav { position: absolute; top: .45rem; right: .45rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92);
  color: #b7ad9f; font-size: 1.15rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transition: transform .15s ease; }
.ad-fav:hover { transform: scale(1.1); }
.ad-fav.is-on { color: #f5a400; }
.ad-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; font-size: 1rem; }
.ad-card-body { padding: .7rem .85rem .8rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.ad-card-title { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.ad-price { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--primary-dark); }
.ad-price-tausch { color: var(--k-tausch); font-size: .92rem; }
.ad-price-suche { color: var(--k-suche); }
.ad-price-verschenken { color: var(--k-verschenken); }
.ad-meta { margin: 0; display: flex; justify-content: space-between; gap: .4rem; flex-wrap: wrap; font-size: .76rem; color: var(--muted); }
.ad-meta-who { margin-top: auto; padding-top: .3rem; }
.ad-card.is-gone { opacity: .65; }
.boerse-empty { text-align: center; padding: 2rem 1rem; }
.boerse-empty-icon { font-size: 3rem; margin: 0; }
.boerse-guest-note { font-size: .9rem; background: rgba(252, 173, 0, .1); border: 1px dashed var(--primary); border-radius: 12px; padding: .7rem 1rem; }
.pager { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin: 0 0 1rem; }
.pager-link { min-width: 2.2rem; text-align: center; padding: .35rem .6rem; border-radius: 10px; border: 1px solid var(--border); text-decoration: none; }
.pager-link.active { background: var(--primary); color: #010101; font-weight: 700; border-color: var(--primary); }
/* Einzelansicht */
.ad-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4rem; }
.ad-gallery-main { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center; background: linear-gradient(135deg, #fff1cf, #ffd88a); }
.kind-tausch .ad-gallery-main { background: linear-gradient(135deg, #dcf5e6, #a8e0bd); }
.kind-suche .ad-gallery-main { background: linear-gradient(135deg, #e3e7ff, #b9c2ff); }
.kind-verschenken .ad-gallery-main { background: linear-gradient(135deg, #ffe4ee, #ffbcd4); }
.ad-gallery-open { all: unset; cursor: zoom-in; width: 100%; height: 100%; }
.ad-gallery-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-detail-icon { font-size: 6rem; }
.ad-gallery .ad-badge { font-size: .85rem; }
.ad-thumbs { display: flex; gap: .45rem; margin-top: .5rem; flex-wrap: wrap; }
.ad-thumb { width: 70px; height: 56px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: none; }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ad-thumb.is-on { border-color: var(--primary); }
.ad-info h1 { margin: 0 0 .3rem; font-size: 1.6rem; overflow-wrap: anywhere; }
.ad-price-big { font-size: 2rem; }
.ad-price-big small { font-size: .9rem; color: var(--muted); font-weight: 500; margin-left: .3rem; }
.ad-price-tausch.ad-price-big { font-size: 1.15rem; }
.ad-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0; font-size: .92rem; }
.ad-facts dt { color: var(--muted); }
.ad-facts dd { margin: 0; }
.ad-seller { display: flex; gap: .7rem; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: .6rem .7rem; text-decoration: none; color: inherit; margin-bottom: .9rem; }
.ad-seller:hover { border-color: var(--primary); }
.ad-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ad-fav-btn.is-on { background: rgba(252, 173, 0, .15); }
.ad-report { font-size: .85rem; color: var(--muted); }
.ad-sep { border: 0; border-top: 1px solid var(--border); margin: 1.3rem 0 1rem; }
.ad-sub { font-size: 1.1rem; margin: 0 0 .5rem; }
.ad-body { line-height: 1.6; overflow-wrap: anywhere; }
.ad-owner { margin-top: 1.2rem; background: rgba(252, 173, 0, .08); border: 1px dashed var(--primary); border-radius: 12px; padding: .8rem 1rem; display: grid; gap: .55rem; }
.ad-owner-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.boerse-state-note { background: rgba(63, 81, 181, .08); border: 1px dashed var(--k-suche); border-radius: 12px; padding: .6rem .9rem; font-size: .9rem; }
.boerse-zoom { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .88); display: grid; place-items: center; }
.boerse-zoom[hidden] { display: none; }
.boerse-zoom img { max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); font-size: 2rem; line-height: 1; cursor: pointer; }
.zoom-prev { left: 14px; } .zoom-next { right: 14px; }
.zoom-nav[hidden] { display: none; }
.zoom-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .9rem; }
.report-dialog { width: min(480px, calc(100vw - 24px)); border-radius: 16px; border: 2px solid var(--primary); }
.report-dialog h2 { margin-top: 0; }
.row-end { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
/* Schreibfenster */
.boerse-kinds { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.boerse-kinds legend { font-weight: 600; margin-bottom: .4rem; }
.boerse-kind { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; padding: .75rem .4rem;
  border: 2px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.boerse-kind input { position: absolute; opacity: 0; pointer-events: none; }
.boerse-kind-icon { font-size: 1.9rem; }
.boerse-kind small { color: var(--muted); font-size: .75rem; }
.boerse-kind:has(input:checked) { border-color: var(--k-verkauf); background: rgba(252, 173, 0, .1); }
.boerse-kind.kind-tausch:has(input:checked) { border-color: var(--k-tausch); background: rgba(46, 158, 91, .1); }
.boerse-kind.kind-suche:has(input:checked) { border-color: var(--k-suche); background: rgba(63, 81, 181, .1); }
.boerse-kind.kind-verschenken:has(input:checked) { border-color: var(--k-verschenken); background: rgba(233, 30, 99, .08); }
.boerse-kind:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.boerse-kind:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.boerse-dialog [hidden] { display: none !important; }
.boerse-handover { display: flex; flex-direction: column; gap: .35rem; }
.boerse-dialog .row { align-items: start; }
.boerse-free { margin: 0; color: var(--k-verschenken); font-weight: 600; }
.boerse-photos { display: flex; flex-wrap: wrap; gap: .55rem; }
.boerse-photo { position: relative; width: 110px; height: 88px; border-radius: 12px; overflow: hidden; border: 2px solid var(--border); }
.boerse-photo img { width: 100%; height: 100%; object-fit: cover; }
.boerse-photo.is-cover { border-color: var(--primary); }
.photo-cover { position: absolute; left: 4px; bottom: 4px; background: var(--primary); color: #010101; font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 0 .4rem; }
.photo-btn { position: absolute; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75rem; cursor: pointer; }
.photo-btn:not(.photo-del) { left: 4px; }
.photo-del { right: 4px; }
.boerse-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; border-style: dashed; cursor: pointer; color: var(--primary-dark); }
.boerse-photo-add span { font-size: 1.5rem; }
.boerse-place { margin: 0; }
.danger-text { color: #d32f2f; }
.boerse-preview-grid { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
.boerse-preview-body { white-space: pre-line; }
/* rechte Spalte */
.boerse-latest { margin-bottom: 1.2rem; }
.boerse-latest-list { display: grid; gap: .55rem; }
.boerse-latest-item { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: var(--panel-text) !important; font-size: .85rem; }
.boerse-latest-item strong { display: block; color: var(--panel-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.boerse-latest-item small { font-weight: 700; }
.boerse-latest-img { width: 42px; height: 42px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-size: 1.3rem; background: #2a2520; }
.boerse-latest-img img { width: 100%; height: 100%; object-fit: cover; }
.boerse-latest .ad-price-verkauf { color: #fcad00; } .boerse-latest .ad-price-tausch { color: #7fd89f; }
.boerse-latest .ad-price-suche { color: #9fa8ff; } .boerse-latest .ad-price-verschenken { color: #ff8fb6; }
@media (max-width: 720px) {
  .ad-detail-grid { grid-template-columns: 1fr; }
  .boerse-kinds { grid-template-columns: repeat(2, 1fr); }
  .boerse-preview-grid { grid-template-columns: 1fr; }
  .ad-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
  .ad-price-big { font-size: 1.6rem; }
}
/* Profil-Reiter Börse */
.sub-tab-action { margin-left: auto; background: var(--primary); color: #010101 !important; font-weight: 700; }
.boerse-own h2 { margin-top: 0; }
.boerse-own-hint { font-size: .85rem; margin-top: -.3rem; }
.own-ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.own-ad { display: flex; gap: .8rem; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: .5rem .6rem; }
.own-ad-img { width: 64px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-size: 1.6rem; background: linear-gradient(135deg, #fff1cf, #ffd88a); }
.own-ad.kind-tausch .own-ad-img { background: linear-gradient(135deg, #dcf5e6, #a8e0bd); }
.own-ad.kind-suche .own-ad-img { background: linear-gradient(135deg, #e3e7ff, #b9c2ff); }
.own-ad.kind-verschenken .own-ad-img { background: linear-gradient(135deg, #ffe4ee, #ffbcd4); }
.own-ad-img img { width: 100%; height: 100%; object-fit: cover; }
.own-ad-main { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.own-ad-main > a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own-ad-line { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; font-size: .88rem; }
.ad-badge-inline { position: static; font-size: .7rem; }
.own-ad-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.search-list li { align-items: center; }
.search-del { margin-left: auto; }
@media (max-width: 640px) { .own-ad { flex-wrap: wrap; } .own-ad-actions { width: 100%; } .sub-tab-action { margin-left: 0; } }

/* Cronjob-Adresse */
.cron-url { display: flex; gap: .5rem; align-items: center; }
.cron-url input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.cron-last { font-size: .9rem; }

/* Logo & Kopf (Admin) */
.logo-editor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin: .6rem 0 1rem; }
.logo-stage { --head-bg: #010101; display: flex; align-items: center; gap: 1rem; min-height: 150px; position: relative; padding: .8rem 1rem; border-radius: var(--radius);
  border: 3px solid transparent; background: linear-gradient(var(--head-bg), var(--head-bg)) padding-box, var(--frame) border-box; }
.logo-stage.is-grau { --head-bg: #484747; }
.logo-stage-nav { margin-left: auto; color: #f1ece6; font-size: .85rem; opacity: .7; }
.logo-live .logo-frame { cursor: grab; touch-action: none; outline: 1px dashed rgba(252, 173, 0, .45); outline-offset: 2px; }
.logo-live .logo-frame.is-dragging { cursor: grabbing; }
.logo-stage.is-over { align-items: flex-start; margin-bottom: 150px; }
.logo-stage.is-over .logo img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.logo-stage.is-over::after { content: 'Bereich unter dem Kopf'; position: absolute; left: 0; right: 0; top: calc(100% + 6px); height: 140px;
  border: 1px dashed #9d9d9d; border-radius: 10px; background: #9d9d9d; color: #34302c; font-size: .75rem; display: grid; place-items: center; }
.logo-view-form { display: grid; gap: .55rem; }
.logo-view-form label { display: flex; flex-direction: column; gap: .2rem; }
.logo-view-form input[type=range] { width: 100%; accent-color: var(--primary); }
.logo-head-choice { display: grid; gap: .3rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.logo-files { display: grid; gap: .5rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.logo-upload { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.head-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; border: 1px solid #888; }
@media (max-width: 760px) { .logo-editor { grid-template-columns: 1fr; } }
.logo-view-form label.checkbox { flex-direction: row; align-items: center; gap: .45rem; }

/* ---------- Lesbarkeit auf den neuen Farben (0.38) ----------
   Direkt auf dem grauen Seitenhintergrund: dunkle Schrift und dunkle Links.
   In weißen Karten, Fenstern und Anzeigen gelten wieder die normalen Farben. */
.col-main, .site-footer { --muted: var(--on-page-muted); --link: var(--on-page-link); color: var(--on-page); }
.col-main .card, .col-main .ad-card, .col-main .member-card, .col-main dialog, .col-main .report, .col-main .boerse-guest-note {
  --muted: #7a716a; --link: #9a6400; color: var(--text);
}
.site-footer { border-top-color: rgba(0, 0, 0, .18); }
.back-link a, .boerse-resultbar a, .member-filter-active a { font-weight: 600; }
.col-main > .button-ghost, .col-main .rainbow-hero .button-ghost, .member-filter-box > summary.button-ghost {
  background: rgba(255, 255, 255, .55); color: #2b2118; border-color: var(--primary);
}
.col-main .sub-tab:not(.active):not(.sub-tab-action) { background: rgba(255, 255, 255, .75); color: #2b2118; }
/* Seitenboxen (grau): helle Schrift, kräftigeres Gold */
.col-left, .col-right, .page-head { --panel-muted: #efe9e2; }
.col-left a, .col-right a { color: #ffd257; }
.col-right .flames-title, .col-left .flames-title { color: #ffd257; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.col-right small, .col-right .muted, .col-left small { color: #f5f0ea; }

/* Tierbörse: Versandkosten unter dem Preis */
.ad-ship { margin: -.15rem 0 0; font-size: .8rem; font-weight: 600; color: #5c4a2a; }
.ad-ship-big { font-size: .95rem; margin: -.4rem 0 .4rem; }

/* ---------- Kopf und Seitenspalten bleiben stehen (0.41), nur die Mitte scrollt ----------
   --sticky-top = Höhe der Hinweisleisten ganz oben (Wartung/Update), --head-h = Höhe des Kopfes – beides setzt app.js. */
@media (min-width: 901px) {
  .page-head, body.logo-over .page-head { position: sticky; top: var(--sticky-top, 0px); z-index: 20; }
  /* Streifen in Hintergrundfarbe hinter Kopf und Lücke, damit dort kein Inhalt durchscheint */
  body::before {
    content: ''; position: fixed; left: 0; right: 0; top: 0; z-index: 15; pointer-events: none;
    height: calc(var(--sticky-top, 0px) + var(--head-h, 0px) + 16px); background: var(--page-bg);
  }
  body.no-sticky-band::before { display: none; }
  /* Sprungziele (#passwort, #logo …) nicht hinter dem stehenden Kopf verstecken */
  [id] { scroll-margin-top: calc(var(--sticky-top, 0px) + var(--head-h, 0px) + 24px); }
  .col-left, .col-right {
    position: sticky; top: calc(var(--sticky-top, 0px) + var(--head-h, 0px) + 16px); z-index: 10;
    max-height: calc(100vh - var(--sticky-top, 0px) - var(--head-h, 0px) - 32px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(252, 173, 0, .5) transparent;
  }
  .col-left, .col-right { min-height: min(300px, calc(100vh - var(--sticky-top, 0px) - var(--head-h, 0px) - 32px)); }
}

/* Passwort ändern */
.password-form .row { align-items: start; }

/* Nachname für Freunde: ausgeschrieben oder abgekürzt */
.vis-last { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: 0 0 .2rem; padding: .45rem .7rem;
  border-left: 3px solid var(--primary); background: rgba(252, 173, 0, .07); border-radius: 0 8px 8px 0; }
.vis-last .field-label { font-size: .85rem; }
.vis-last[hidden] { display: none; }

/* Tierbörse: Artikelnummer, Suchfeld, Vorschau-Kärtchen in Nachrichten (0.43) */
.boerse-search-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: .5rem; }
.boerse-search-row input { width: 100%; }
.boerse-nr input { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
@media (max-width: 640px) { .boerse-search-row { grid-template-columns: 1fr; } }
.ad-nr { margin-top: -.1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; }
.ad-nr-big { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }
.own-ad-nr { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; }
.ad-mini { display: flex; gap: .8rem; align-items: center; padding: .55rem .7rem; margin: .4rem 0 .9rem; border: 1px solid var(--border);
  border-left: 4px solid var(--k-verkauf); border-radius: 12px; background: #fffaf0; color: var(--text) !important; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
.ad-mini.kind-tausch { border-left-color: var(--k-tausch); }
.ad-mini.kind-suche { border-left-color: var(--k-suche); }
.ad-mini.kind-verschenken { border-left-color: var(--k-verschenken); }
a.ad-mini:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.ad-mini-img { width: 76px; height: 76px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-size: 2rem;
  background: linear-gradient(135deg, #fff1cf, #ffd88a); }
.ad-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.ad-mini-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.ad-mini-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-mini .ad-price { font-size: 1rem; }
.ad-mini-go { font-size: 1.4rem; color: var(--primary-dark); }
.ad-mini-gone { color: var(--muted) !important; background: transparent; }

/* Logo verschieben (Admin) */
.logo-move { display: grid; gap: .45rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .55rem 0; }
.logo-move-row { display: flex; align-items: center; gap: .4rem; }
.logo-move-row input[type=range] { flex: 1; }
.logo-nudge { width: 34px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font-size: .85rem; color: var(--primary-dark); touch-action: none; user-select: none; }
.logo-nudge:hover { border-color: var(--primary); }
.logo-nudge:active { background: rgba(252, 173, 0, .2); }
.logo-move .link-button { justify-self: start; font-size: .85rem; }

/* ======================================================================
   Handy-Darstellung (0.46): kompakter Kopf oben, Navigationsleiste unten,
   Reiter wischbar, keine linke Spalte – übersichtlich wie eine App.
   ====================================================================== */
.tabbar { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .page { padding: 8px 8px 12px; gap: 10px; }
  /* Kopf: klein und oben fest */
  .page-head { position: sticky; top: 0; z-index: 40; padding: .35rem .7rem; border-radius: 0 0 14px 14px; margin: -8px -8px 0;
    border-width: 0 0 3px 0; padding-top: calc(.35rem + env(safe-area-inset-top, 0px)); }
  .header-inner { flex-wrap: nowrap; gap: .6rem; padding-block: .2rem; }
  .page-head .logo, body.logo-over .page-head .logo { --logo-size: 52px !important; --logo-dx: 0px !important; --logo-dy: 0px !important; --logo-k: 1 !important;
    width: 52px; height: 52px; }
  .page-head .nav { display: none; }                 /* die Hauptpunkte stehen unten in der Leiste */
  .head-user { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: .55rem; }
  .head-username { order: -1; font-size: .85rem; }
  .avatar-head { width: 46px !important; }
  .avatar-head .avatar-initials { font-size: 1.15rem; }
  .head-avatar-wrap .corner-menu { bottom: -10px; }
  .head-avatar-wrap .corner-btn { width: 24px; height: 24px; }
  .impersonate-form { flex-direction: column; gap: .1rem; }
  .impersonate-note { display: none; }
  /* linke Spalte entfällt (steht unten in der Leiste), rechte Spalte kompakt unter dem Inhalt */
  .col-left .side-nav-box { display: none; }   /* Menü steht am Handy unten in der Leiste */
  .col-right { min-height: 0; padding: .8rem; }
  .card { padding: 1rem; border-radius: 14px; }
  h1 { font-size: 1.45rem; }
  /* Reiter und Filter-Knöpfe: eine Zeile zum Wischen statt mehrerer Zeilen */
  .profile-tabs, .sub-tabs, .boerse-tabs, .mail-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .profile-tabs::-webkit-scrollbar, .sub-tabs::-webkit-scrollbar, .boerse-tabs::-webkit-scrollbar, .mail-tabs::-webkit-scrollbar { display: none; }
  .profile-tab, .sub-tab, .boerse-tab, .mail-tab { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .sub-tab-action { margin-left: 0; }
  .mail-head { flex-wrap: wrap; }
  /* Profil: kleineres Bild, Name daneben */
  .profile-view-head { gap: .9rem; align-items: center; flex-direction: row !important; flex-wrap: nowrap !important; text-align: left !important; }
  .profile-view-head > .duo, .profile-view-head > .avatar { flex: none; }
  .profile-view-head > div:last-child { min-width: 0; }
  .profile-view-head .avatar-lg { width: 84px; }
  .profile-view-head .avatar-lg .avatar-initials { font-size: 1.9rem; }
  .profile-view-head .duo .avatar-lg ~ .duo-owner .avatar-mini { width: 34px; }
  .profile-view-head .duo .avatar-lg ~ .duo-owner { right: -10px; bottom: 6px; }
  .profile-name { font-size: 1.3rem; margin: 0; }
  .own-preview { padding: .45rem .6rem; gap: .35rem; font-size: .85rem; }
  .own-preview .own-edit { margin-left: auto; }
  .site-footer { padding-block: 1rem; text-align: center; }
  /* Navigationsleiste unten */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 2px;
    background: #010101; border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #fcad00, #010101 50%, #fcad00) 1;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
  }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: 12px;
    color: #f1ece6 !important; text-decoration: none; font-size: .68rem; font-weight: 600; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
  .tab-icon { position: relative; font-size: 1.35rem; line-height: 1.1; filter: grayscale(.25); }
  .tab.active { background: rgba(252, 173, 0, .16); color: #fcad00 !important; }
  .tab.active .tab-icon { filter: none; transform: translateY(-1px); }
  .tab:active { background: rgba(252, 173, 0, .25); }
  .tab-badge { position: absolute; top: -4px; right: -12px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
    background: #d32f2f; color: #fff; font-size: .65rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #010101; }
}
/* Toasts über der Navigationsleiste */
@media (max-width: 600px) { .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
/* Als installierte App (ohne Browserleiste): etwas mehr Luft oben */
@media (display-mode: standalone) and (max-width: 900px) {
  .page-head { padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
}

/* ======================================================================
   Chat (0.47): links Verlauf, rechts Teilnehmer, unten Eingabe
   ====================================================================== */
.chat { display: flex; flex-direction: column; height: calc(100vh - var(--sticky-top, 0px) - var(--head-h, 180px) - 48px); min-height: 460px;
  background: var(--surface); border-radius: 16px; border: 3px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--frame) border-box; overflow: hidden; color: var(--text); }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
.chat-title h1 { margin: 0; font-size: 1.2rem; }
.chat-title small { display: block; font-size: .75rem; }
.chat-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.chat-btn { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: .3rem .65rem; font-size: .8rem; cursor: pointer; }
.chat-btn:hover { border-color: var(--primary); }
.chat-btn.is-on { background: rgba(252, 173, 0, .2); border-color: var(--primary); font-weight: 700; }
.chat-btn-close:hover { border-color: #d32f2f; color: #d32f2f; }
.chat-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 210px; }
.chat-body[hidden] { display: none; }
.chat-log { overflow-y: auto; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; background: #faf7f2; }
.chat-empty { margin: auto; text-align: center; }
.chat-msg { display: flex; gap: .5rem; align-items: flex-start; }
.chat-msg .chat-avatar { width: 34px; flex: none; }
.chat-bubble { background: #fff; border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: .35rem .65rem .45rem; max-width: 85%; min-width: 0; }
.chat-msg.is-mine { flex-direction: row-reverse; }
.chat-msg.is-mine .chat-bubble { background: #fff3d1; border-color: #f2d48a; border-radius: 14px 4px 14px 14px; }
.chat-msg.is-mention .chat-bubble { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(252, 173, 0, .35); }
.chat-msg.is-highlight .chat-bubble { background: #ffe9e6; border-color: #d32f2f; box-shadow: 0 0 0 3px rgba(211, 47, 47, .3); }
.chat-msg.is-deleted .chat-bubble { opacity: .7; }
.chat-meta { display: flex; align-items: baseline; gap: .45rem; font-size: .75rem; color: var(--muted); }
.chat-name { all: unset; cursor: pointer; font-weight: 700; color: #6b4a00; font-size: .82rem; }
.chat-name:hover { text-decoration: underline; }
.chat-msg-actions { margin-left: auto; display: inline-flex; gap: .15rem; opacity: 0; transition: opacity .15s ease; }
.chat-msg:hover .chat-msg-actions, .chat-msg:focus-within .chat-msg-actions { opacity: 1; }
@media (hover: none) { .chat-msg-actions { opacity: .7; } }
.chat-mini { border: 0; background: none; cursor: pointer; font-size: .85rem; padding: 0 .15rem; }
.chat-text { font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; color: var(--text); }
.chat-mention { background: rgba(252, 173, 0, .25); border-radius: 4px; padding: 0 .15rem; font-weight: 600; }
.chat-mention.is-me { background: var(--primary); color: #010101; }
.chat-system { justify-content: center; align-items: baseline; gap: .4rem; font-size: .8rem; color: #5c4a2a; }
.chat-system span { background: rgba(252, 173, 0, .15); border-radius: 999px; padding: .15rem .7rem; }
.chat-system time { font-size: .7rem; color: var(--muted); }
.chat-people { border-left: 1px solid var(--border); padding: .6rem; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
.chat-people h2 { font-size: .9rem; margin: 0; }
.chat-people ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.chat-person { display: flex; align-items: center; gap: .45rem; padding: .3rem .35rem; border-radius: 10px; cursor: pointer; user-select: none; }
.chat-person:hover, .chat-person:focus-visible { background: rgba(252, 173, 0, .12); outline: none; }
.chat-person.is-me { cursor: default; }
.chat-person.is-invited { opacity: .6; }
.chat-person-av { position: relative; flex: none; }
.chat-person-av .chat-avatar { width: 30px; }
.online-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #9e9e9e; border: 2px solid #fff; }
.online-dot.is-on { background: #2e9e5b; }
.chat-box-online .online-dot { position: static; display: inline-block; vertical-align: -1px; border-color: transparent; }
.chat-person-name { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-tag { font-weight: 400; font-size: .68rem; color: var(--muted); }
.chat-people-hint { font-size: .7rem; margin-top: auto; }
.chat-typing { min-height: 1.2rem; margin: 0; padding: 0 .9rem; font-size: .78rem; color: var(--muted); font-style: italic; }
.chat-muted { margin: 0; padding: .3rem .9rem; font-size: .85rem; color: #9b2c22; background: #fdecea; }
.chat-form { position: relative; display: flex; gap: .45rem; align-items: flex-end; padding: .5rem .7rem .7rem; border-top: 1px solid var(--border); }
.chat-form[hidden] { display: none; }
.chat-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; border-radius: 12px; padding: .55rem .7rem; font: inherit; }
.chat-emoji-btn { border: 0; background: none; font-size: 1.4rem; cursor: pointer; padding: .2rem; }
.chat-emoji-panel { position: absolute; bottom: calc(100% + 4px); left: .7rem; z-index: 5; width: min(340px, calc(100% - 1.4rem)); }
.chat-invite-box { padding: 1rem; background: rgba(252, 173, 0, .1); border-bottom: 1px solid var(--border); }
.chat-invite-box[hidden] { display: none; }
.chat-menu { position: fixed; z-index: 2500; min-width: 210px; background: #010101; color: #f1ece6; border: 1px solid var(--primary); border-radius: 12px;
  padding: .35rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.chat-menu-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #fcad00; padding: .3rem .55rem .4rem; border-bottom: 1px solid #2a2622; margin-bottom: .2rem; }
.chat-menu-item { all: unset; cursor: pointer; padding: .45rem .55rem; border-radius: 8px; font-size: .88rem; }
.chat-menu-item:hover, .chat-menu-item:focus-visible { background: rgba(252, 173, 0, .2); }
.chat-report-quote { font-style: italic; }
/* Beitritt */
.chat-join { text-align: center; max-width: 620px; margin-inline: auto; }
.chat-join-icon { font-size: 3rem; margin: 0; }
.chat-rules { text-align: left; background: #fffaf0; border: 1px solid #f2d48a; border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0; }
.chat-rules ul { margin: .4rem 0; padding-left: 1.2rem; }
.chat-join-actions { justify-content: center; }
/* rechte Spalte */
.chat-box { margin-bottom: 1.2rem; }
.chat-box-online { margin: 0 0 .5rem; font-size: .85rem; color: var(--panel-text); }
.chat-box-enter { width: 100%; justify-content: center; }
.chat-box-sub { font-size: .8rem; margin: .8rem 0 .3rem; color: #ffd257; text-transform: uppercase; letter-spacing: .05em; }
.chat-rooms, .chat-invites { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .25rem; }
.chat-rooms[hidden], .chat-invites[hidden], .chat-box-sub[hidden] { display: none; }
.chat-room-link { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .35rem .5rem; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #f5f0ea !important; text-decoration: none; font-size: .85rem; }
.chat-room-link:hover { background: rgba(252, 173, 0, .2); }
.chat-room-link span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-invite { background: rgba(252, 173, 0, .15); border-radius: 8px; padding: .45rem .5rem; font-size: .82rem; color: #f5f0ea; display: grid; gap: .3rem; }
.chat-invite-actions { display: flex; gap: .5rem; align-items: center; }
.chat-invite .link-button { color: #f5f0ea; }
/* eigenes Fenster (Popup am PC): nur der Chat */
.chat-window-body .page-head, .chat-window-body .col-left, .chat-window-body .col-right, .chat-window-body .site-footer,
.chat-window-body .tabbar, .chat-window-body::before { display: none !important; }
.chat-window-body { padding-bottom: 0 !important; }
.chat-window-body .page { display: block; max-width: none; padding: 6px; }
.chat-window-body .chat { height: calc(100vh - 12px); min-height: 0; }
@media (min-width: 901px) { .chat-window-body .chat-body { grid-template-columns: minmax(0, 1fr) 170px; } }
/* Handy: Chat als Vollbild-Ansicht, Teilnehmer als Zeile über dem Verlauf */
@media (max-width: 900px) {
  .chat { height: calc(100vh - var(--head-h, 70px) - 104px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--head-h, 70px) - 104px - env(safe-area-inset-bottom, 0px));
    min-height: 380px; border-radius: 14px; }
  /* Teilnehmer: über den kleinen Pfeil oben rechts als Klappliste über dem Verlauf */
  .chat-body { grid-template-columns: 1fr; position: relative; }
  .chat-people { display: none; position: absolute; top: 0; right: 0; z-index: 6; width: min(260px, 85%); max-height: 70%;
    background: #fff; border: 1px solid var(--primary); border-radius: 0 0 0 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
  .chat.people-open .chat-people { display: flex; }
  .chat-people-hint { display: none; }
  .chat-people-toggle { display: inline-flex; }
  .chat-head { padding: .45rem .6rem; }
  .chat-title small { display: none; }
  .chat-btn span { display: none; }
  .chat-btn { padding: .3rem .5rem; font-size: .95rem; }
  .chat-window-body .chat { height: calc(100dvh - 12px); }
}

/* Favoriten: gemerkte Chaträume */
.fav-rooms { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.fav-room { display: flex; align-items: center; gap: .8rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 12px; color: inherit; text-decoration: none; }
.fav-room:hover { border-color: var(--primary); }
.fav-room-icon { font-size: 1.6rem; }
.fav-room-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.report-chat { white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; background: #faf7f2; border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .7rem; margin: .4rem 0; overflow-x: auto; }
[data-chat-badge][hidden] { display: none !important; }

/* Freigabe neuer Anmeldungen */
.badge-pending { background: #fff3d1; color: #6b4a00; border: 1px solid #f2d48a; }
.member-card.is-pending { border-color: #f2d48a; background: #fffaf0; }
.pending-note { background: #fff3d1; border: 1px dashed var(--primary); border-radius: 12px; padding: .6rem .9rem; color: #2b2118; }
.admin-bar-pending { font-weight: 700; color: #010101; background: #fff3d1; border-radius: 999px; padding: .15rem .6rem; }

/* Prüf-Warteschlange (0.48) */
.admin-notice { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: 0 0 1rem; padding: .55rem .9rem; border-radius: 12px;
  background: #fff3d1; border: 1px solid #f2d48a; color: #2b2118; font-size: .9rem; }
.admin-notice a { color: #6b4a00; font-weight: 700; }
.review-tabs { margin: .8rem 0 1rem; flex-wrap: wrap; }
.review-step { margin: 0 0 .6rem; }
.review-item { border: 2px solid var(--primary); border-radius: 14px; padding: 1rem; background: #fffdf8; }
.review-head { display: flex; gap: .8rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .6rem; }
.review-head > div { flex: 1 1 220px; min-width: 0; }
.review-open { margin-left: auto; white-space: nowrap; }
.review-context { background: #f2ede6; border-left: 4px solid #c9bba8; border-radius: 8px; padding: .5rem .8rem; margin: 0 0 .7rem; color: #4a3f33; }
.review-context p { margin: .25rem 0 0; }
.review-ctx-img { max-width: 160px; max-height: 120px; border-radius: 8px; margin-top: .4rem; display: block; }
.review-title { font-size: 1.15rem; margin: 0 0 .4rem; }
.review-body { white-space: normal; overflow-wrap: anywhere; font-size: 1rem; }
.review-images { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.review-images img { max-width: 220px; max-height: 180px; border-radius: 10px; object-fit: cover; display: block; }
.review-actions { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin-top: 1rem; align-items: start; }
.review-ok .button { font-size: 1.05rem; padding: .7rem 1.2rem; }
.review-measures fieldset { border: 1px solid #e3d7c6; border-radius: 12px; padding: .6rem .9rem .9rem; display: grid; gap: .45rem; margin: 0; }
.review-measures legend { font-weight: 700; padding: 0 .3rem; }
.review-note { display: grid; gap: .25rem; font-weight: 600; }
.review-note textarea { width: 100%; }
.review-empty { text-align: center; padding: 2rem 1rem; }
.review-empty-icon { font-size: 3rem; margin: 0; }
.review-all { margin-top: 1rem; text-align: right; }
.review-recent { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .9rem; }
.review-act { font-weight: 700; }
.review-act-ok { color: #2f7a43; } .review-act-geloescht, .review-act-gesperrt { color: #b3261e; } .review-act-verwarnt, .review-act-bild { color: #9a6200; }
@media (max-width: 700px) { .review-actions { grid-template-columns: 1fr; } .review-ok .button { width: 100%; justify-content: center; } }

/* ---------- 0.48: rechte Spalte als einzelne Boxen ---------- */
.col-right { background: none !important; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 14px; min-height: 0 !important; }
.side-box {
  --box-bg: var(--side-bg);
  color: var(--panel-text); padding: 1rem; border: 3px solid transparent; border-radius: var(--radius);
  background: linear-gradient(var(--box-bg), var(--box-bg)) padding-box, var(--frame) border-box; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.side-box.chat-box, .side-box.boerse-latest { margin-bottom: 0; }
/* Trauermodus: schwarz mit weißer Schrift */
.side-box-mourning { --box-bg: #000; color: #fff; }
.col-right .side-box-mourning .flames-title, .col-left .side-box-mourning .flames-title { color: #fff; text-shadow: none; }
.side-box-mourning a, .side-box-mourning .flame-item, .side-box-mourning .flame-item * { color: #fff !important; }
.side-box-mourning .flames-empty, .side-box-mourning small { color: #e8e8e8 !important; }
.side-box-mourning .flames-all { color: #fff !important; text-decoration: underline; opacity: .9; }
/* Chat-Teilnehmer in der rechten Spalte */
.chat-people-box .flames-title { margin-bottom: .2rem; }
.chat-people-count { font-size: .85rem; color: #f5f0ea; font-weight: 400; text-shadow: none; }
.chat-people-sub { display: block; margin-bottom: .45rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.chat-people-side { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.chat-people-side .chat-person { color: #f5f0ea; padding: .25rem .3rem; }
.chat-people-side .chat-person:hover { background: rgba(252, 173, 0, .2); }
.chat-people-side .chat-tag { color: #f5f0ea; }
.chat-people-side .chat-person-name { font-size: .84rem; }
.chat-people-side .online-dot { border-color: #686767; }
/* PC (nicht im eigenen Fenster): Teilnehmer stehen rechts, der Verlauf nutzt die volle Breite */
@media (min-width: 901px) {
  .chat.has-side-people .chat-body { grid-template-columns: minmax(0, 1fr); }
  .chat.has-side-people .chat-people { display: none; }
}
@media (max-width: 900px) { .chat-people-box { display: none; } }
.chat { position: relative; }
.chat-people-toggle { display: none; align-self: flex-end; margin: .3rem .6rem -.1rem auto; align-items: center; gap: .3rem; border: 1px solid var(--border);
  background: #fff; color: var(--text); border-radius: 999px; padding: .2rem .6rem; font-size: .82rem; cursor: pointer; }
.chat-people-arrow { transition: transform .15s ease; display: inline-block; }
.chat.people-open .chat-people-arrow { transform: rotate(180deg); }
.chat-window-body .chat-people-toggle { display: none; }
@media (max-width: 900px) { .chat-people-toggle, .chat-window-body .chat-people-toggle { display: inline-flex; } }
/* Raumleitung (Ersteller) */
.chat-owner-tag { font-weight: 700; color: #6b4a00; }
.chat-tag-owner { color: #6b4a00 !important; font-weight: 700 !important; }
.chat-people-side .chat-tag-owner { color: #ffd257 !important; }
.chat-msg.is-owner .chat-bubble { border-left: 3px solid var(--primary); }
.chat-owner-mark { font-weight: 400; }
/* Profilbild anklickbar + Profil-Kachel */
.chat-avatar-btn { all: unset; cursor: pointer; border-radius: 50%; flex: none; display: inline-flex; }
.chat-avatar-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat-msg .chat-avatar-btn .chat-avatar { width: 34px; }
.chat-tile { position: fixed; z-index: 2600; width: min(300px, calc(100vw - 16px)); background: #fff; color: #2b2118; border: 2px solid var(--primary);
  border-radius: 16px; padding: .8rem; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); display: grid; gap: .6rem; }
.chat-tile-close { position: absolute; top: .2rem; right: .45rem; border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: #6b5d4f; }
.chat-tile-head { display: flex; gap: .7rem; align-items: center; padding-right: 1rem; }
.chat-tile-head .avatar { width: 64px; flex: none; }
.chat-tile-head > div { display: grid; gap: .1rem; min-width: 0; }
.chat-tile-head strong { font-size: 1.05rem; }
.chat-tile-pets { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-height: 180px; overflow-y: auto; }
.chat-tile-pets li { display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.chat-tile-pets li > span:last-child { display: grid; }
.chat-tile-pets small { color: #6b5d4f; }
.chat-tile-pet-img { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #f2ede6; flex: none; }
.chat-tile-pet-img img { width: 100%; height: 100%; object-fit: cover; }
.chat-tile-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Admins: ältere Nachrichten */
.chat-older { align-self: center; border: 1px dashed var(--primary); background: #fff; border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; cursor: pointer; color: #6b4a00; }
.chat-older-end { border: 0; background: none; cursor: default; margin: 0; }
/* Admins: Stichwortsuche */
.chat-search-dialog { width: min(640px, calc(100vw - 24px)); }
.chat-search-row { display: flex; gap: .5rem; }
.chat-search-row input { flex: 1; }
.chat-search-words summary { cursor: pointer; font-weight: 600; }
.chat-search-words textarea { width: 100%; margin: .4rem 0; }
.chat-search-results { max-height: 45vh; overflow-y: auto; }
.chat-search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.chat-search-hit { display: grid; gap: .15rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; }
.chat-search-hit:hover { border-color: var(--primary); background: #fffaf0; }
.chat-search-meta { font-size: .78rem; color: #6b5d4f; }
.chat-search-text { font-size: .92rem; overflow-wrap: anywhere; }
.chat-search-terms mark { background: #ffe1dc; color: #9b2c22; border-radius: 4px; padding: 0 .3rem; font-size: .72rem; margin-right: .25rem; }
/* Teilnehmer-Fenster */
.chat-people-all { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.chat-people-all li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.chat-people-all a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.chat-people-all .avatar { width: 30px; }
.chat-window-body .chat-people-page { margin: 0; }

/* Profil in schlanker Ansicht über dem Chat (0.50) */
.profile-frame-dialog { width: min(900px, calc(100vw - 16px)); height: min(88vh, 900px); padding: 0; border: 3px solid var(--primary); border-radius: 16px;
  background: var(--page-bg); overflow: hidden; display: none; flex-direction: column; }
.profile-frame-dialog[open] { display: flex; }
.profile-frame-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.profile-frame-bar { display: flex; justify-content: space-between; align-items: center; padding: .45rem .8rem; background: #010101; color: #fcad00; }
.profile-frame-bar .chat-tile-close { position: static; color: #fff; }
.profile-frame-dialog iframe { flex: 1; width: 100%; border: 0; background: var(--page-bg); }
.chat-window-body .col-main { max-width: 900px; margin-inline: auto; }

/* Ränge & Löschanträge (0.52) */
.admin-bar-request { display: inline-block; position: relative; }
.admin-bar-request > summary { list-style: none; cursor: pointer; }
.admin-bar-request > summary::-webkit-details-marker { display: none; }
.admin-bar-request-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(320px, 85vw); display: grid; gap: .5rem;
  background: #fff; color: #2b2118; border: 2px solid var(--primary); border-radius: 12px; padding: .7rem; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.admin-bar-request-form label { display: grid; gap: .25rem; font-weight: 600; font-size: .85rem; }
.delreq { border: 1px solid var(--border); border-radius: 12px; padding: .8rem; margin: 0 0 .7rem; background: #fffdf8; }
.delreq-head { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; }
.delreq-reason { margin: .5rem 0; padding: .5rem .7rem; background: #f2ede6; border-radius: 8px; overflow-wrap: anywhere; }
.delreq-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.delreq-form input { flex: 1 1 220px; }
.delreq-done { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }

/* Teams & Beförderungen (0.54) */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.team-box { border: 2px solid var(--primary); border-radius: 12px; padding: .7rem .8rem; background: #fffdf8; }
.team-box h3 { margin: 0 0 .5rem; font-size: 1rem; display: grid; }
.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.team-person { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.team-person .avatar { width: 30px; }
.team-free { color: #8a7d6e; font-size: .85rem; padding-left: .3rem; }
.team-assign { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.team-assign-form, .admin-bar-assign { display: inline-flex; gap: .3rem; align-items: center; }
.admin-bar-assign select { padding: .15rem .4rem; font-size: .8rem; border-radius: 999px; }

/* Interne Notizen & Protokoll (0.54) */
.admin-notes { flex-basis: 100%; margin-top: .4rem; background: rgba(255, 255, 255, .85); border-radius: 10px; padding: .4rem .7rem; color: #2b2118; }
.admin-notes > summary { cursor: pointer; font-weight: 700; font-size: .85rem; }
.admin-note { border-left: 3px solid var(--primary); padding: .2rem .6rem; margin: .5rem 0; }
.admin-note p { margin: 0 0 .15rem; overflow-wrap: anywhere; }
.admin-note-form { display: grid; gap: .4rem; margin-top: .5rem; }
.log-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.log-list li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; padding: .35rem .5rem; border-bottom: 1px solid var(--border); }
.log-list time { color: #6b5d4f; font-size: .8rem; }
.log-details { display: block; color: #5c4f42; font-size: .82rem; overflow-wrap: anywhere; }
.stufen-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.stufen-form input { width: 5rem; }
@media (max-width: 600px) { .log-list li { grid-template-columns: 1fr; gap: .1rem; } }

/* Was ist neu? (0.58) */
.versions-search { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.versions-search input { flex: 1 1 260px; }
.versions-count { margin: .5rem 0 0; }
.versions-new-note { background: #fff3d1; border: 1px dashed var(--primary); border-radius: 10px; padding: .5rem .8rem; color: #2b2118; }
.versions-ok { color: #2f7a43; font-weight: 600; }
.version-box { margin-top: 1rem; }
.version-box.is-neu { border: 2px dashed var(--primary); background: #fffaf0; }
.version-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.version-no { font-weight: 800; color: #6b4a00; }
.version-date { margin-left: auto; }
.version-title { font-size: 1.15rem; margin: .4rem 0 .5rem; }
.version-points { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.version-box mark { background: #ffe08a; border-radius: 3px; padding: 0 .1rem; }

/* Lange Menüs am Profilbild scrollen in sich, die Seite bleibt stehen (0.59) */
.menu-panel { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(252, 173, 0, .6) transparent; }

/* Wer kann diese Seite sehen? (nur für Admins, 0.59) */
.audience-tag { display: table; margin: -.35rem 0 .45rem auto; padding: .12rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: rgba(255, 255, 255, .75); color: #3a3026; border: 1px solid rgba(0, 0, 0, .15); white-space: nowrap; }
.audience-admin { background: #fff3d1; border-color: #f2d48a; color: #6b4a00; }
.audience-ober { background: #ffe6c7; border-color: #f0b46a; color: #7a3d00; }
.audience-owner { background: #010101; border-color: var(--primary); color: var(--primary); }
.audience-self { background: #e8eef9; border-color: #b7c7e6; color: #24406f; }

/* ---------- Events (0.60) ---------- */
.events-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.events-title-row h1 { margin: 0; }
.events-tabs { margin-top: .8rem; flex-wrap: wrap; }
.events-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.events-filter select, .events-filter input { width: auto; }
.events-plz { max-width: 11rem; }
.events-cal-nav { display: flex; justify-content: space-between; align-items: center; }
.events-cal-nav h2 { margin: 0; }
.events-today-link { text-align: center; margin: .3rem 0 0; font-size: .85rem; }
.events-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: .8rem; }
.events-cal-wd { text-align: center; font-weight: 700; font-size: .8rem; color: #6b5d4f; padding-bottom: .2rem; }
.events-cal-day { background: #faf7f2; border-radius: 8px; min-height: 84px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.events-cal-day.is-other { opacity: .4; }
.events-cal-day.is-past .events-cal-no { color: #a89c8e; }
.events-cal-day.is-today { outline: 2px solid var(--primary); background: #fffaf0; }
.events-cal-no { font-size: .78rem; font-weight: 700; }
.events-cal-ev { display: block; background: var(--primary); color: #010101 !important; border-radius: 6px; padding: 1px 5px; font-size: .7rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.events-cal-ev.is-multi { background: #7fd89f; }
.events-cal-ev.is-mine { background: #010101; color: var(--primary) !important; }
.events-cal-ev.is-cancelled { background: #e7dfd5; color: #8a7d6e !important; text-decoration: line-through; }
.events-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.events-legend .events-cal-ev { display: inline-block; }
.event-list { display: grid; gap: .1rem; }
.event-row { display: flex; gap: .8rem; align-items: center; padding: .65rem .2rem; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.event-row:hover { background: #fffaf0; }
.event-row.is-cancelled { opacity: .6; }
.event-date { width: 58px; flex: none; text-align: center; background: #010101; color: var(--primary); border-radius: 10px; padding: .35rem 0; font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.event-date small { display: block; color: #fff; font-size: .7rem; font-weight: 600; }
.event-row-main { flex: 1; min-width: 0; display: grid; }
.event-row-main strong { overflow-wrap: anywhere; }
.event-row-badges { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; max-width: 45%; }
@media (max-width: 700px) {
  .event-row { flex-wrap: wrap; } .event-row-badges { max-width: none; justify-content: flex-start; padding-left: calc(58px + .8rem); }
  .events-cal-day { min-height: 54px; } .events-cal-ev { font-size: 0; padding: 0; height: 6px; border-radius: 3px; }
}
/* rechte Spalte */
.events-box-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.events-box-list a { display: flex; gap: .5rem; align-items: center; color: #f5f0ea !important; text-decoration: none; font-size: .85rem; }
.events-box-list small { display: block; color: #f5f0ea; opacity: .8; }
.events-box-date { flex: none; background: #010101; color: var(--primary); border-radius: 8px; padding: .15rem .35rem; font-weight: 800; font-size: .75rem; }

/* Formular */
.ev-form-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .ev-form-grid { grid-template-columns: minmax(0, 1fr); } }
.ev-label { display: grid; gap: .3rem; font-weight: 700; font-size: .9rem; margin: .8rem 0 .35rem; }
.ev-label input, .ev-label textarea { font-weight: 400; }
.ev-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ev-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ev-chip span { display: inline-block; padding: .35rem .75rem; border-radius: 999px; background: #f2ede6; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; }
.ev-chip input:checked + span { background: var(--primary); color: #010101; }
.ev-chip input:focus-visible + span { border-color: #010101; }
.ev-row { display: flex; gap: .6rem; }
.ev-zip { width: 7rem; flex: none; } .ev-grow { flex: 1; }
.ev-small { max-width: 12rem; }
.ev-addr-note, .ev-geo-status { margin: .4rem 0 0; font-size: .85rem; }
.ev-place-results { display: grid; gap: .3rem; margin-top: .3rem; border: 1px solid var(--border); border-radius: 10px; padding: .4rem; background: #fff; }
.ev-place-hit { all: unset; cursor: pointer; display: grid; padding: .35rem .5rem; border-radius: 8px; }
.ev-place-hit:hover, .ev-place-hit:focus-visible { background: #fff3d1; }
.ev-place-hit small { color: #6b5d4f; }
.ev-images { display: flex; flex-wrap: wrap; gap: .5rem; }
.ev-img { position: relative; width: 86px; height: 86px; border-radius: 12px; overflow: hidden; background: #e9e1d6; }
.ev-img img { width: 100%; height: 100%; object-fit: cover; }
.ev-img-add { border: 2px dashed var(--primary); background: #fffaf0; font-weight: 700; color: #6b4a00; cursor: pointer; }
.ev-img-x, .ev-img-star { position: absolute; top: 3px; border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; background: rgba(0, 0, 0, .65); color: #fff; font-size: .85rem; line-height: 1; }
.ev-img-x { right: 3px; } .ev-img-star { left: 3px; }
/* Kalender im Formular */
.ev-cal { margin-top: .8rem; }
.ev-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.ev-cal-nav { border: 1.5px solid var(--primary); background: #fff; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: 800; }
.ev-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.ev-cal-wd { font-weight: 700; font-size: .78rem; color: #6b5d4f; padding: .2rem 0; }
.ev-cal-day { border: 0; background: none; border-radius: 8px; padding: .5rem 0; font: inherit; font-size: .9rem; cursor: pointer; }
.ev-cal-day:hover:not(:disabled) { background: #fff3d1; }
.ev-cal-day:disabled { opacity: .3; cursor: not-allowed; }
.ev-cal-day.is-today { outline: 1.5px solid var(--primary); }
.ev-cal-day.is-range { background: #fff3d1; border-radius: 0; }
.ev-cal-day.is-sel { background: var(--primary); font-weight: 800; color: #010101; }
.ev-cal-hint { font-size: .82rem; margin: .4rem 0; }
.ev-when { display: flex; gap: .4rem; flex-wrap: wrap; }
.ev-when-btn { border: 1.5px solid var(--border); background: #f2ede6; border-radius: 999px; padding: .4rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.ev-when-btn.is-on { background: var(--primary); border-color: var(--primary); }
/* Uhr */
.ev-clock { margin-top: .6rem; display: grid; justify-items: center; }
.ev-clock-time { font-size: 2.3rem; font-weight: 800; display: flex; align-items: center; gap: .1rem; }
.ev-clock-seg { all: unset; cursor: pointer; padding: 0 .35rem; border-radius: 10px; }
.ev-clock-seg.is-on { background: var(--primary); }
.ev-clock-face { width: min(280px, 100%); touch-action: none; user-select: none; cursor: pointer; }
.ev-clock-bg { fill: #faf7f2; stroke: var(--primary); stroke-width: 3; }
.ev-clock-hand { stroke: var(--primary); stroke-width: 3; }
.ev-clock-knob { fill: var(--primary); }
.ev-clock-center { fill: #010101; }
.ev-clock-num { text-anchor: middle; font-size: 15px; font-weight: 600; fill: #2b2118; pointer-events: none; }
.ev-clock-num.is-inner { font-size: 12px; fill: #7a6d60; }
.ev-clock-num.is-sel { font-weight: 800; fill: #010101; }
.ev-clock-tick { fill: #c9bba8; }
.ev-clock-help { text-align: center; font-size: .82rem; margin: .3rem 0 0; }
.ev-preview { border: 2px dashed var(--primary); }
.ev-preview-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: .5rem; }
.ev-preview-title { display: block; font-size: 1.05rem; }
.ev-preview-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.ev-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
/* Event-Seite */
.event-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .event-layout { grid-template-columns: minmax(0, 1fr); } }
.event-hero img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; display: block; }
.event-thumbs { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.event-thumb { border: 2px solid transparent; padding: 0; border-radius: 9px; overflow: hidden; width: 70px; height: 52px; cursor: pointer; background: none; }
.event-thumb.is-on { border-color: var(--primary); }
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0 .2rem; }
.event-title { margin: .3rem 0; overflow-wrap: anywhere; }
.event-body { margin-top: .6rem; }
.event-facts .event-fact { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.event-map { height: 200px; border-radius: 12px; margin-top: .7rem; overflow: hidden; }
.event-buttons { display: grid; gap: .4rem; margin-top: .8rem; }
.event-buttons .button { justify-content: center; text-align: center; }
.event-people { display: flex; flex-wrap: wrap; gap: .5rem; }
.event-person { display: grid; justify-items: center; gap: .1rem; color: inherit; text-decoration: none; width: 58px; }
.event-person small { font-size: .7rem; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-person .avatar { width: 40px; }
.event-people-more { margin: .5rem 0 0; font-size: .85rem; }
.event-organizer { background: #fff3d1; display: grid; gap: .4rem; }
.event-organizer h3 { margin: .5rem 0 0; font-size: .95rem; }
.event-addr-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.event-addr-requests li { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.event-report { text-align: center; }
.event-comments { display: grid; gap: .5rem; }
.event-comment { display: flex; gap: .5rem; align-items: flex-start; }
.event-comment.is-reply { margin-left: 2.4rem; }
.event-comment .avatar { width: 34px; flex: none; }
.event-comment-bubble { background: #faf7f2; border-radius: 4px 14px 14px 14px; padding: .4rem .7rem; min-width: 0; flex: 1; }
.event-comment-meta { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .85rem; }
.event-comment-text { overflow-wrap: anywhere; }
.event-comment-form { display: grid; gap: .4rem; margin-top: .8rem; }
.event-reply-to { margin: 0; font-size: .85rem; }
.event-photos-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.event-photos-head h2 { margin: 0; }
.event-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin-top: .8rem; }
.event-photo { margin: 0; }
.event-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.event-photo figcaption { font-size: .75rem; color: #6b5d4f; display: flex; justify-content: space-between; align-items: center; }
.event-draft-note { background: #fff3d1; border: 1px solid #f2d48a; }

/* Adress-Vorschläge beim Straßenfeld (0.62) */
.addr-suggest-wrap { position: relative; }
.addr-suggest-wrap > input { width: 100%; }
.addr-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: #fff; border: 1.5px solid var(--primary);
  border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); padding: .3rem; display: grid; gap: .1rem; max-height: 280px; overflow-y: auto; }
.addr-suggest[hidden] { display: none; }
.addr-suggest-item { all: unset; cursor: pointer; display: grid; padding: .45rem .6rem; border-radius: 8px; color: #2b2118; font-weight: 400; }
.addr-suggest-item small { color: #6b5d4f; }
.addr-suggest-item:hover, .addr-suggest-item.is-active { background: #fff3d1; }
.addr-suggest .form-error { margin: .3rem .4rem; }

/* Route hierher (0.64) */
.event-route-btn { margin-top: .5rem; width: 100%; justify-content: center; }
.event-route-btn.is-on { background: var(--primary); }
.event-route { display: grid; gap: .45rem; margin-top: .5rem; padding: .6rem; border: 1px solid var(--border); border-radius: 12px; background: #fffdf8; }
.event-route[hidden] { display: none; }
.event-route-from { display: grid; gap: .2rem; font-weight: 700; font-size: .85rem; }
.event-route-from input { font-weight: 400; }
.event-route-modes { display: flex; flex-wrap: wrap; gap: .3rem; }
.event-route-mode { border: 1.5px solid var(--border); background: #f2ede6; border-radius: 999px; padding: .25rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
.event-route-mode.is-on { background: var(--primary); border-color: var(--primary); font-weight: 700; }
.event-route-result { margin: 0; font-size: .95rem; }
.event-nav-link { display: block; margin-top: .5rem; font-weight: 700; font-size: .9rem; }
.event-travel { font-weight: 600; }

.event-map.is-error { height: auto; padding: .6rem; background: #fdecea; color: #9b2c22; font-size: .85rem; }
.event-map.is-error p { margin: 0; }

/* Nächste Events in der rechten Spalte: quadratisches Bild links, Daten rechts daneben (0.68) */
.events-box-list { gap: .6rem; }
.events-box-list a.events-box-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .6rem; row-gap: .05rem; align-items: start; }
.events-box-img { grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #2a2520; display: grid; place-items: center; font-size: 1.5rem; }
.events-box-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.events-box-when { font-size: .74rem; font-weight: 700; color: #ffd257; }
.events-box-title { font-size: .85rem; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.events-box-item small { font-size: .75rem; }
.events-box-item:hover .events-box-title { text-decoration: underline; }

/* ---------- Ein Scrollbalken, Seitenspalten mitlaufend (0.70) ----------
   Die ganze Seite scrollt über den normalen (goldenen) Browser-Scrollbalken. Die Seitenspalten sind „sticky“:
   kurze bleiben oben unter dem Kopf, lange scrollen mit, bis ihr Ende sichtbar ist, und bleiben dann stehen.
   Den genauen Abstand oben setzt app.js (placeCols). */
@media (min-width: 901px) {
  .col-left, .col-right { position: sticky; align-self: start; max-height: none; overflow: visible; min-height: 0; }
}
html { scrollbar-color: #fcad00 #9d9d9d; scrollbar-width: auto; }
html::-webkit-scrollbar { width: 14px; height: 14px; }
html::-webkit-scrollbar-track { background: #9d9d9d; }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd257, #fcad00 45%, #c98a00); border-radius: 10px; border: 3px solid #9d9d9d; }
html::-webkit-scrollbar-thumb:hover { background: #fcad00; }

/* Team & Beförderungen: drei Rang-Boxen oben (0.71) */
.rank-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.rank-box { aspect-ratio: 1; min-height: 210px; display: flex; flex-direction: column; background: #010101; color: #fff; border: 3px solid transparent;
  background: linear-gradient(#010101, #010101) padding-box, var(--frame) border-box; border-radius: 16px; padding: .9rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); overflow: hidden; }
.rank-box h2 { margin: 0 0 .6rem; font-size: 1rem; color: var(--primary); display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.rank-box h2 small { color: #cfc6bb; font-weight: 600; font-size: .8rem; }
.rank-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; overflow-y: auto; }
.rank-box a { display: flex; align-items: center; gap: .55rem; color: #fff !important; text-decoration: none; padding: .3rem .35rem; border-radius: 10px; }
.rank-box a:hover, .rank-box a:focus-visible { background: rgba(252, 173, 0, .2); outline: none; }
.rank-box a span { display: grid; min-width: 0; }
.rank-box a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-box a small { color: #ffd257; font-size: .72rem; }
.rank-box .avatar { width: 38px; flex: none; }
.rank-free { color: #8f877e; font-size: .85rem; padding: .3rem .35rem; border: 1px dashed #4a443d; border-radius: 10px; }
@media (max-width: 900px) { .rank-boxes { grid-template-columns: 1fr; } .rank-box { aspect-ratio: auto; min-height: 0; } }

/* Linke Spalte als einzelne Boxen: „Neueste Kerzen“ oben, darunter das Menü (0.74) */
.col-left { background: none !important; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.col-left .side-box { padding: 1rem; }
.col-left .side-nav-box { min-height: 0; }
@media (max-width: 900px) {
  .page { grid-template-areas: "head" "main" "right" "left"; }   /* Handy: Kerzen unter dem Inhalt */
  .col-left:not(:has(.side-box-mourning)) { display: none; }
}

/* Eventplanung Schritt für Schritt (0.77): Schritte untereinander, „Wann?“ mit Kalender links und Uhr rechts */
.ev-form-steps { display: grid; gap: 1rem; }
.ev-form-steps > .card { margin: 0; }
.ev-when-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: .4rem; }
.ev-when-time .ev-when { justify-content: center; margin-top: .8rem; }
@media (max-width: 760px) { .ev-when-grid { grid-template-columns: minmax(0, 1fr); } }
.ev-label[hidden], .ev-addr-note[hidden] { display: none; }
.ev-subhead { margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border); font-size: 1rem; }
.geo-hint { display: block; margin-top: -.4rem; font-size: .85rem; }

/* Eigenes Profil: Zahnrad oben rechts in der Profilkarte (0.79) */
.profile-view { position: relative; }
.own-gear { position: absolute; top: .8rem; right: .8rem; bottom: auto; z-index: 30; }
.own-gear .menu-panel { right: 0; }
.menu-head-sub { margin-top: .4rem; border-top: 1px solid #2a2622; padding-top: .55rem; }
.menu-item.is-current { color: var(--primary) !important; font-weight: 700; }
.own-preview-note { background: var(--primary); color: #010101 !important; text-decoration: none; font-weight: 700; }
.profile-view-head > div:last-child { padding-right: 2.4rem; }
.own-gear .menu-panel { min-width: 250px; }

/* Meine Kerze (0.80) */
.my-candle { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.my-candle-preview { margin: 0; display: grid; justify-items: center; gap: .4rem; text-align: center; padding: 1rem .5rem; border-radius: 14px; background: #0d0c0b; color: #f5ecd8; }
.my-candle-preview figcaption { display: grid; gap: .15rem; }
.my-candle-preview strong { color: var(--primary); }
.my-candle-preview .muted { color: #b9ab97; }
.my-candle-choice { display: grid; gap: .8rem; }
@media (max-width: 640px) { .my-candle { grid-template-columns: minmax(0, 1fr); } }

/* Verstorbenes Tier: schwarzes Trauerband quer über die obere rechte Ecke des Bildes (0.81) */
.avatar { position: relative; }
.mourning-band { position: absolute; z-index: 2; left: 36%; top: 14%; width: 92%; height: 16%; min-height: 5px;
  background: linear-gradient(#2a2a2a, #010101 35%, #010101 65%, #2a2a2a); transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 2px 5px rgba(0, 0, 0, .5); pointer-events: auto; }
.duo-owner { z-index: 3; }

/* Social Media (0.82) – nur für Freunde */
.social-icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; border-radius: 6px; }
.social-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem 1rem; }
.social-field-label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.profile-social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem !important; }
.profile-social a { display: inline-flex; border-radius: 9px; transition: transform .15s ease, box-shadow .15s ease; }
.profile-social a:hover, .profile-social a:focus-visible { transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.profile-social .social-icon { width: 34px; height: 34px; border-radius: 9px; }

/* Momente in der Prüfung (0.83) */
.review-moment { display: grid; gap: .5rem; margin: .4rem 0 .6rem; }
.review-moment-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.review-moment-media { max-width: min(320px, 100%); max-height: 480px; border-radius: 12px; background: #010101; }
.review-moment-embed { display: flex; gap: .8rem; align-items: center; }
.review-moment-embed img { width: 90px; border-radius: 10px; }

/* ================= Momente (0.83) ================= */
/* Pille unten rechts in der Profilkarte, daneben das ＋ */
.moment-pill-wrap { position: absolute; right: .9rem; bottom: .9rem; display: flex; gap: .4rem; align-items: center; z-index: 5; }
.moment-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .95rem; border-radius: 999px; border: 2px solid var(--primary);
  background: #010101; color: var(--primary); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.moment-pill:hover, .moment-pill:focus-visible { background: var(--primary); color: #010101; transform: translateY(-1px); }
.moment-pill-count { background: var(--primary); color: #010101; border-radius: 999px; padding: 0 .45rem; font-size: .78rem; line-height: 1.5; }
.moment-pill:hover .moment-pill-count { background: #010101; color: var(--primary); }
.moment-pill.has-new { animation: mo-glow 2.2s ease-in-out infinite; }
@keyframes mo-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,173,0,.55); } 50% { box-shadow: 0 0 0 7px rgba(252,173,0,0); } }
.moment-plus { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--primary); background: var(--primary); color: #010101;
  font-size: 1.35rem; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s ease; }
.moment-plus:hover, .moment-plus:focus-visible { transform: scale(1.1) rotate(90deg); }
.profile-view { padding-bottom: 3.6rem; }
@media (min-width: 700px) { .profile-view { padding-bottom: 1.25rem; } .profile-view-head > div:last-child { padding-bottom: 1.6rem; } }

/* Leiste in der Community */
.moments-strip h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.moments-strip-row { display: flex; gap: .8rem; overflow-x: auto; padding: .2rem .1rem .4rem; scrollbar-width: thin; }
.moment-circle { all: unset; cursor: pointer; display: grid; justify-items: center; gap: .3rem; width: 76px; flex: none; text-align: center; }
.moment-ring { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: #c9c2b8; display: block; box-sizing: border-box; }
.moment-circle.has-new .moment-ring { background: conic-gradient(#fcad00, #ffe08a, #b87800, #fcad00); }
.moment-ring-in { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; overflow: hidden; display: grid; place-items: center; background: #010101; box-sizing: border-box; }
.moment-ring-in img { width: 100%; height: 100%; object-fit: cover; }
.moment-ring-in .duo, .moment-ring-in .avatar { width: 100% !important; height: 100%; border: 0; border-radius: 50%; }
.moment-ring-in .duo-owner { display: none; }
.moment-circle-name { font-size: .78rem; font-weight: 600; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment-circle:focus-visible .moment-ring { outline: 2px solid #010101; outline-offset: 2px; }

/* Überlagerung */
html.mo-open { overflow: hidden; }
.mo-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.82); display: grid; place-items: center; padding: 16px; }
.mo-panel { background: #fff; color: var(--text); border-radius: 18px; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 1rem 1.1rem 1.2rem;
  border: 2px solid var(--primary); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mo-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.mo-panel-head h2 { margin: 0; font-size: 1.2rem; }
.mo-x { border: 0; background: #f2ede6; color: #010101; width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; cursor: pointer; flex: none; }
.mo-x:hover { background: var(--primary); }
.mo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.mo-tile { all: unset; cursor: pointer; position: relative; aspect-ratio: 9 / 14; border-radius: 12px; overflow: hidden; background: #1b1714; display: block; border: 2px solid transparent; }
.mo-tile.is-new { border-color: var(--primary); }
.mo-tile.is-locked img { filter: grayscale(1) brightness(.5); }
.mo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-tile-ph { display: grid; place-items: center; height: 100%; font-size: 2rem; }
.mo-tile-kind { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; padding: .05rem .4rem; font-size: .8rem; }
.mo-tile-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .45rem .4rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; font-size: .76rem; display: grid; gap: .1rem; }
.mo-tile-info small { color: #ddd; font-size: .7rem; }
.mo-tile:focus-visible { outline: 3px solid var(--primary); }
.mo-add { margin-top: .9rem; width: 100%; }

/* Player */
.mo-player-wrap { padding: 0; }
.mo-stage { position: relative; width: min(430px, 100vw); height: min(100dvh, 860px); background: #010101; color: #fff; display: grid; grid-template-rows: auto auto 1fr auto;
  border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
@media (max-width: 500px) { .mo-stage { border-radius: 0; height: 100dvh; } }
.mo-bars { display: flex; gap: 4px; padding: 10px 10px 0; }
.mo-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.mo-bars i b { display: block; height: 100%; width: 0; background: #fff; }
.mo-bars i.is-full b { width: 100%; }
.mo-head { display: flex; align-items: center; gap: .5rem; padding: 8px 10px; }
.mo-who { display: grid; min-width: 0; flex: 1; }
.mo-who-name { color: #fff !important; font-weight: 700; text-decoration: none; }
.mo-who small { color: #cfc6b8; font-size: .75rem; }
.mo-head .mo-x { background: rgba(255,255,255,.15); color: #fff; }
.mo-media { position: relative; min-height: 0; display: grid; place-items: center; background: #010101; overflow: hidden; }
.mo-photo, .mo-video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; }
.mo-tap { all: unset; position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mo-tap-l { left: 0; } .mo-tap-r { right: 0; }
.mo-tap.is-slim { width: 14%; }
.mo-media.has-embed .mo-tap { width: 9%; }
.mo-stage.is-paused .mo-bars { opacity: .5; }
.mo-locked { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; background: rgba(214,58,42,.92); color: #fff; padding: .5rem .7rem; border-radius: 10px; font-size: .85rem; }
.mo-music { position: absolute; bottom: 10px; left: 10px; z-index: 3; background: rgba(0,0,0,.6); padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; }
.mo-foot { padding: 8px 12px 12px; display: grid; gap: .45rem; background: #0d0c0b; }
.mo-under { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mo-heart { display: inline-flex; align-items: center; gap: .35rem; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 999px;
  padding: .3rem .8rem; font: inherit; cursor: pointer; transition: transform .15s ease; }
.mo-heart span { font-size: 1.15rem; line-height: 1; }
.mo-heart.is-on { border-color: #e0245e; background: rgba(224,36,94,.18); }
.mo-heart:active { transform: scale(1.12); }
.mo-sound, .mo-views { border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .85rem; cursor: pointer; }
.mo-views { margin-left: auto; }
.mo-caption { margin: 0; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mo-reply { display: flex; gap: .4rem; }
.mo-reply input { flex: 1; min-width: 0; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: #fff; padding: .45rem .85rem; font: inherit; font-size: .9rem; }
.mo-reply input::placeholder { color: #aaa; }
.mo-menu { position: relative; }
.mo-menu-btn { border: 0; background: rgba(255,255,255,.15); color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.mo-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; background: #0d0c0b; border: 1.5px solid var(--primary); border-radius: 12px; padding: .35rem; min-width: 230px; display: grid; }
.mo-menu-panel[hidden] { display: none; }
.mo-menu-item { all: unset; cursor: pointer; padding: .5rem .65rem; border-radius: 8px; color: #fff; font-size: .9rem; }
.mo-menu-item:hover, .mo-menu-item:focus-visible { background: var(--primary); color: #010101; }
.mo-menu-item.is-danger { color: #ff9b8f; }
.mo-menu-item.is-danger:hover { color: #010101; }
/* TikTok/YouTube: erst nach Klick laden */
.mo-embed { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.mo-embed-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) blur(1px); }
.mo-embed-info { position: relative; z-index: 3; display: grid; gap: .45rem; justify-items: center; text-align: center; padding: 1.2rem; max-width: 340px; }
.mo-embed-info strong { font-size: 1.05rem; }
.mo-embed-info small { color: #ddd; }
.mo-embed-note { font-size: .74rem !important; color: #bbb !important; }
.mo-embed-frame { width: 100%; height: 100%; border: 0; background: #010101; }
.mo-viewer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.mo-viewer-list a { font-weight: 600; }

/* Neuer Moment */
.mo-create { display: grid; gap: .75rem; }
.mo-create.is-busy { cursor: progress; }
.mo-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.mo-tab { border: 1.5px solid var(--border); background: #f2ede6; border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.mo-tab.is-on { background: var(--primary); border-color: var(--primary); }
.mo-pane { display: grid; gap: .55rem; }
.mo-pane[hidden] { display: none; }
.mo-drop { display: grid; place-items: center; text-align: center; padding: 1.2rem; border: 2px dashed var(--primary); border-radius: 14px; cursor: pointer; font-weight: 700; background: #fffaf0; }
.mo-drop small { display: block; font-weight: 400; color: var(--muted); margin-top: .25rem; font-size: .82rem; }
.mo-drop:hover { background: #fff3d1; }
.mo-prev { max-width: 100%; max-height: 300px; border-radius: 12px; justify-self: center; background: #010101; }
.mo-prev[hidden] { display: none; }
.mo-link-preview { border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; font-size: .9rem; }
.mo-link-preview[hidden] { display: none; }
.mo-ok { color: #2a8a3a; font-weight: 800; }
.mo-note { margin: 0; font-size: .84rem; color: var(--muted); background: #faf7f2; border-radius: 10px; padding: .45rem .65rem; }
.mo-note[hidden] { display: none; }
.mo-audience { border: 0; padding: 0; margin: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.mo-audience legend { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; padding: 0; }
.mo-audience .ev-chip span { display: grid; text-align: left; border-radius: 12px; }
.mo-audience .ev-chip small { font-weight: 400; font-size: .74rem; }
.mo-progress { display: grid; gap: .3rem; }
.mo-progress[hidden] { display: none; }
.mo-progress i { height: 8px; border-radius: 4px; background: #f2ede6; overflow: hidden; display: block; }
.mo-progress b { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }
.mo-progress span { font-size: .85rem; color: var(--muted); }
.mo-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* TikTok/YouTube in Community-Beiträgen (0.84) */
.post-embed { position: relative; margin-top: .7rem; border-radius: 14px; overflow: hidden; background: #010101; color: #fff;
  min-height: 240px; display: grid; place-items: center; max-width: 420px; }
.post-embed-tiktok, .post-embed-tiktok.is-playing { aspect-ratio: 9 / 16; max-width: 340px; }
.post-embed-youtube { aspect-ratio: 16 / 9; }
.post-embed-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.post-embed-info { position: relative; display: grid; gap: .45rem; justify-items: center; text-align: center; padding: 1rem; max-width: 320px; }
.post-embed-info small { color: #ddd; }
.post-embed-note { font-size: .74rem; color: #bbb !important; }
.post-embed.is-playing { display: block; }
.post-embed-frame { width: 100%; height: 100%; border: 0; display: block; min-height: 240px; }
.post-link-preview { margin-top: .4rem; font-size: .88rem; padding: .45rem .65rem; border-radius: 10px; background: #faf7f2; border: 1px solid var(--border); }
.post-link-preview[hidden] { display: none; }

/* ================= Podcast im Tierblog (0.85) ================= */
.pod-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.pod-cover { width: 120px; height: 120px; border-radius: 16px; overflow: hidden; flex: none; border: 2px solid var(--primary);
  background: linear-gradient(135deg, #fcad00, #6b4200); display: grid; place-items: center; font-size: 3rem; }
.pod-cover img { width: 100%; height: 100%; object-fit: cover; }
.pod-cover-sm { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 12px; }
.pod-info { flex: 1; min-width: 220px; display: grid; gap: .35rem; }
.pod-info h2 { margin: 0; font-size: 1.4rem; }
.pod-desc { margin: 0; }
.pod-stats { margin: 0; font-size: .88rem; }
.pod-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .2rem; }
.pod-why { margin: 0; background: #faf7f2; border-radius: 10px; padding: .45rem .7rem; font-size: .9rem; }
.pod-quota { margin: .2rem 0 0; font-size: .8rem; }
.pod-quota-bar { display: block; height: 5px; border-radius: 3px; background: #f2ede6; overflow: hidden; max-width: 320px; }
.pod-quota-bar b { display: block; height: 100%; background: var(--primary); }
.pod-empty { margin: 1rem 0 0; }
.pod-list { margin-top: .8rem; display: grid; }
.pod-ep { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--border); }
.pod-ep.is-target { background: #fffaf0; border-radius: 12px; padding: .75rem .6rem; }
.pod-ep.is-locked .pod-ep-title { opacity: .55; }
.pod-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #010101; color: var(--primary); font-size: 1rem; cursor: pointer; flex: none; display: grid; place-items: center; transition: transform .15s ease; }
.pod-play:hover, .pod-play:focus-visible { transform: scale(1.08); }
.pod-ep.is-playing .pod-play { background: var(--primary); color: #010101; }
.pod-ep-main { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.pod-ep-title { font-size: 1rem; overflow-wrap: anywhere; }
.pod-ep-desc summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.pod-ep-desc p { margin: .3rem 0 0; font-size: .92rem; }
.pod-ep-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem .4rem; flex: none; max-width: 230px; text-align: right; }
.pod-ep-side > small, .pod-ep-side > .pod-ep-tools { flex-basis: 100%; justify-content: flex-end; }
.pod-chip { border: 1.5px solid var(--border); background: #fff; border-radius: 999px; padding: .15rem .6rem; font: inherit; font-size: .85rem; cursor: pointer; }
.pod-chip.is-on { border-color: #e0245e; background: #fff0f4; }
.pod-ep-side .pod-ep-side-row { display: flex; gap: .3rem; }
.pod-ep-tools { display: flex; gap: .5rem; font-size: .82rem; }
.pod-resume { color: #8a5a00; font-weight: 600; }
.pod-resume[hidden] { display: none; }
.pod-comments { margin-top: .4rem; background: #faf7f2; border-radius: 10px; padding: .55rem .7rem; display: grid; gap: .45rem; }
.pod-comments[hidden] { display: none; }
.pod-comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.pod-comment-form { display: flex; gap: .4rem; }
.pod-comment-form input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .pod-ep { flex-wrap: wrap; } .pod-ep-side { width: 100%; grid-auto-flow: column; justify-content: start; align-items: center; } .pod-cover { width: 92px; height: 92px; } }

/* Mini-Player unten */
.pod-player { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 900; width: min(760px, calc(100vw - 24px));
  background: #010101; color: #fff; border: 2px solid var(--primary); border-radius: 16px; padding: .55rem .8rem; display: flex; gap: .7rem; align-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.pod-player[hidden] { display: none; }
html.has-pod-player body { padding-bottom: 96px; }
@media (max-width: 760px) { .pod-player { bottom: calc(var(--tabbar-h, 64px) + 8px); flex-wrap: wrap; } }
.pod-player-cover { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; background: #2a2622; font-size: 1.4rem; }
.pod-player-cover img { width: 100%; height: 100%; object-fit: cover; }
.pod-player-main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.pod-player-main strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-player-main input[type=range] { width: 100%; accent-color: var(--primary); margin: 0; }
.pod-player-time { font-size: .74rem; color: #bbb; }
.pod-player-ctl { display: flex; gap: .3rem; align-items: center; }
.pod-player-ctl button { border: 0; background: none; color: #fff; font: inherit; font-size: .85rem; cursor: pointer; padding: .3rem .35rem; border-radius: 8px; }
.pod-player-ctl button:hover { background: rgba(255,255,255,.12); }
.pod-player-ctl .pod-player-play { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #010101; font-size: 1rem; font-weight: 800; }
.pod-player-ctl .pod-player-speed { border: 1px solid var(--primary); color: var(--primary); border-radius: 999px; padding: .1rem .5rem; font-size: .75rem; }

/* Dialoge */
.pod-dialog { display: grid; gap: .75rem; }
.pod-pane { display: grid; gap: .55rem; justify-items: stretch; }
.pod-pane[hidden] { display: none; }
.pod-wave { width: 100%; height: 90px; background: #faf7f2; border-radius: 12px; }
.pod-rec-time { text-align: center; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pod-rec-ctl { display: flex; justify-content: center; }
.pod-rec-btn { width: 72px; height: 72px; border-radius: 50%; border: 0; background: #d63a2a; color: #fff; font-size: 1.6rem; cursor: pointer; box-shadow: 0 0 0 6px rgba(214,58,42,.18); }
.pod-rec-btn.is-rec { animation: pod-pulse 1.4s ease-in-out infinite; }
.pod-rec-btn:disabled { opacity: .35; cursor: default; }
@keyframes pod-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(214,58,42,.25); } 50% { box-shadow: 0 0 0 14px rgba(214,58,42,.05); } }
.pod-rec-row { display: flex; gap: .4rem; justify-content: center; }
.pod-rec-row .mo-tab:disabled { opacity: .45; cursor: default; }
.pod-rec-hint { text-align: center; }
.pod-preview { width: 100%; }
.pod-preview[hidden] { display: none; }
.pod-cover-pick { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.pod-feed { margin: 0; font-size: .85rem; background: #faf7f2; border-radius: 10px; padding: .5rem .65rem; overflow-wrap: anywhere; }
.pod-feed[hidden] { display: none; }

/* Community-Box */
.pod-latest h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.pod-latest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pod-latest a { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit !important; padding: .35rem .45rem; border-radius: 12px; }
.pod-latest a:hover { background: #fffaf0; }
.pod-latest a > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.pod-latest-cover { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #fcad00, #6b4200); display: grid; place-items: center; flex: none; }
.pod-latest-cover img { width: 100%; height: 100%; object-fit: cover; }
.pod-latest-play { width: 34px; height: 34px; border-radius: 50%; background: #010101; color: var(--primary); display: grid; place-items: center; flex: none; font-size: .8rem; }

/* Prüfbereiche */
.review-scope { margin: .3rem 0 0; background: #fffaf0; border: 1px solid #f0d9a0; border-radius: 10px; padding: .45rem .7rem; font-size: .9rem; }
.rank-scope { display: block; font-size: .72rem; color: var(--muted); }
.review-audio { width: min(420px, 100%); }
.pod-player-ctl .pod-player-play:hover { background: #ffc233; }

/* Prüfbereiche in der Admin-Leiste: Haken links, Text daneben – eine saubere Liste (0.87) */
.admin-scope .admin-bar-request-form { width: min(380px, 90vw); gap: .35rem; }
.admin-scope .admin-bar-request-form > .muted { font-size: .85rem; line-height: 1.4; margin-bottom: .2rem; }
.admin-scope .admin-bar-request-form label.checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; padding: .45rem .55rem;
  border-radius: 10px; border: 1px solid var(--border); font-weight: 500; font-size: .9rem; line-height: 1.3; text-align: left; cursor: pointer; }
.admin-scope .admin-bar-request-form label.checkbox:hover { background: #fffaf0; }
.admin-scope .admin-bar-request-form label.checkbox:has(input:checked) { border-color: var(--primary); background: #fff6df; }
.admin-scope .admin-bar-request-form label.checkbox input { width: 18px; height: 18px; margin: .05rem 0 0; flex: none; accent-color: #b87800; }
.admin-scope .admin-bar-request-form .button { margin-top: .3rem; }
.admin-scope .admin-bar-request-form label.scope-all { border-style: dashed; border-color: var(--primary); }

/* Rangabzeichen: Wappen mit silbernen Sternen (0.90) */
.rank-badge { display: inline-block; vertical-align: middle; flex: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.rank-badge-xs { width: 15px; height: 18px; }
.rank-badge-sm { width: 20px; height: 24px; }
.rank-badge-md { width: 28px; height: 33px; }
.rank-badge-lg { width: 40px; height: 47px; }
.rank-badge-wrap { display: inline-flex; align-items: center; }
.profile-name .rank-badge { margin-left: .35rem; vertical-align: -.15em; }
.rank-pill { display: inline-flex; align-items: center; gap: .35rem; }
.badge-rank { color: #fff; border: 0; background: linear-gradient(#2f6ad0, #0f2f70); }
.badge-rank-3 { color: #3b2600; background: linear-gradient(#ffe08a, #fcad00 55%, #c68600); }
.chat-tag-rank { display: inline-flex; align-items: center; gap: .2rem; }
.member-crown .rank-badge { width: 24px; height: 28px; }
.badge-rank-2 { background: linear-gradient(#b8243a, #5a0a17); }

/* Datenschutz & Seitenregeln / Admin-Regeln (0.91) */
.rules-text h2 { font-size: 1.2rem; margin: 1.4rem 0 .4rem; }
.rules-text h3 { font-size: 1.05rem; margin: 1.2rem 0 .35rem; color: #8a5a00; }
.rules-text ul, .rules-text ol { margin: .2rem 0 .6rem; padding-left: 1.3rem; display: grid; gap: .3rem; }
.rules-text p { margin: .45rem 0; }
.rules-end { margin-top: 1.4rem; font-size: .8rem; }
.rules-ranks { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; color: var(--muted); }
.rules-window { box-shadow: none; border: 0; margin: 0; }
.rules-accept { align-items: flex-start; padding: .55rem .65rem; border: 1.5px dashed var(--primary); border-radius: 12px; background: #fffaf0; }
.rules-accept:has(input:checked) { border-style: solid; background: #f0faf0; border-color: #4a9a4a; }
.rules-dialog { width: min(720px, calc(100vw - 24px)); height: min(86dvh, 820px); padding: 0; border: 2px solid var(--primary); border-radius: 18px;
  display: none; flex-direction: column; overflow: hidden; }
.rules-dialog[open] { display: flex; }
.rules-dialog::backdrop { background: rgba(0,0,0,.65); }
.rules-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; background: #010101; color: var(--primary); }
.rules-dialog-head h2 { margin: 0; font-size: 1.1rem; }
.rules-dialog-x { border: 0; background: rgba(255,255,255,.15); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.rules-dialog-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.rules-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .65rem 1rem; border-top: 1px solid var(--border); background: #faf7f2; flex-wrap: wrap; }
.rules-dialog-foot small { margin-right: auto; }
.rules-dialog-foot small[hidden] { display: none; }
.rules-window h1 { display: none; }
[data-parent-wrap][hidden], [data-age-note][hidden] { display: none; }

/* Jugendschutz (0.93) */
.youth-card h1 { margin-top: 0; }
.youth-rules { background: #f3f8ff; border: 1px solid #c9dcf5; border-radius: 12px; padding: .7rem .9rem; margin: .8rem 0; }
.youth-rules ul { margin: .4rem 0 .5rem; padding-left: 1.2rem; display: grid; gap: .2rem; }
.youth-resend summary { cursor: pointer; color: var(--muted); margin: .6rem 0; }
.kids-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kids-list li { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 12px; }
.kids-list small { flex: 1; min-width: 200px; }
.youth-note { background: #f3f8ff; border-radius: 10px; padding: .5rem .7rem; }
.youth-tag { color: #1f4fa0; }
.chat-switch { display: flex; gap: .35rem; margin-bottom: .6rem; flex-wrap: wrap; }
.chat-switch a { padding: .35rem .85rem; border-radius: 999px; background: #f2ede6; text-decoration: none; color: #2b2118 !important; font-weight: 600; font-size: .9rem; }
.chat-switch a.is-on { background: var(--primary); color: #010101 !important; }
.chat-switch small { font-weight: 400; }

/* Verwaltungsmenü: Untermenüs (0.94) */
.menu-group { margin: .15rem 0; }
.menu-group > summary { list-style: none; cursor: pointer; justify-content: space-between; font-weight: 700; }
.menu-group > summary::-webkit-details-marker { display: none; }
.menu-group > summary::after { content: '▸'; color: var(--primary); transition: transform .15s ease; }
.menu-group[open] > summary::after { transform: rotate(90deg); }
.menu-group-items { border-left: 2px solid #3a3226; margin: .1rem 0 .3rem .7rem; padding-left: .35rem; }

/* Wer war wann online? (nur Hauptadmins, 0.94) */
.act-list { display: grid; gap: .8rem; margin-top: .8rem; }
.act-row { border: 1px solid var(--border); border-radius: 14px; padding: .7rem .8rem; }
.act-head { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.act-head > div { display: grid; flex: 1; min-width: 160px; }
.act-stats { display: flex; gap: .8rem; margin: 0; flex-wrap: wrap; }
.act-stats div { text-align: center; }
.act-stats dt { font-size: .72rem; color: var(--muted); }
.act-stats dd { margin: 0; font-weight: 800; }
.act-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin-top: .7rem; }
.act-day { display: grid; justify-items: center; gap: .15rem; }
.act-bar { width: 100%; height: 48px; background: #f2ede6; border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.act-bar b { display: block; width: 100%; background: linear-gradient(#fcad00, #c68600); border-radius: 6px 6px 0 0; }
.act-day small { font-size: .68rem; color: var(--muted); }

/* Untermenüs am PC und Tablet im Querformat zur Seite ausklappen (Handy – auch quer – und Tablet hochkant: nach unten) – 0.95/0.96 */
@media (min-width: 761px) and (min-height: 500px) and (orientation: landscape), (min-width: 1100px) {
  .menu-group > summary::after { content: '◂'; transform: none !important; }
  .menu-group[open] > summary { background: var(--primary); color: #010101 !important; }
  .menu-group-items { position: fixed; z-index: 70; min-width: 250px; max-height: 80vh; overflow: auto; margin: 0; padding: .45rem;
    background: #0d0c0b; border: 1.5px solid var(--primary); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .65); }
  .menu-group-items[data-side="right"] { box-shadow: 0 14px 40px rgba(0, 0, 0, .65); }
}
/* geöffnetes Menü ohne transform – sonst würden die seitlichen Untermenüs (position: fixed) am Menü statt am Bildschirm ausgerichtet */
.corner-menu.is-open .menu-panel { transform: none; }

/* ---------- Menü anpassen (0.97) ---------- */
.mn-card { max-width: 760px; margin-inline: auto; }
.mn-root, .mn-kids { list-style: none; margin: 0; padding: 0; }
.mn-root { display: grid; gap: .35rem; margin-top: 1rem; user-select: none; -webkit-user-select: none; }
.mn-root input { user-select: text; -webkit-user-select: text; }
.mn-link { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border: 1px solid #3a3226; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.mn-link:hover { border-color: var(--primary); }
.mn-handle { color: var(--primary); font-size: 1.2rem; cursor: grab; user-select: none; touch-action: none; padding: .1rem .25rem; }
.mn-root.is-sorting, .mn-root.is-sorting * { cursor: grabbing; user-select: none; }
.mn-label { flex: 1; min-width: 0; }
.mn-who { font-size: .75rem; color: var(--muted, #a99c86); white-space: nowrap; }
.mn-move { display: inline-flex; gap: .2rem; }
.mn-btn { background: transparent; border: 1px solid #3a3226; color: var(--link); border-radius: 7px; min-width: 2rem; height: 2rem; cursor: pointer; }
.mn-btn:hover, .mn-btn:focus-visible { border-color: var(--primary); }
.mn-group { border: 1px dashed var(--primary); border-radius: 12px; padding: .5rem; }
.mn-group-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.mn-title { flex: 1; min-width: 0; font-weight: 700; }
.mn-kids { display: grid; gap: .3rem; min-height: 2.4rem; margin-left: 1.2rem; padding: .2rem; border-left: 2px solid #3a3226; }
.mn-kids:empty::before { content: 'Leer – ziehe Links hierher'; color: var(--muted, #a99c86); font-size: .85rem; padding: .5rem; }
.mn-dragging { opacity: .6; outline: 2px solid var(--primary); }
.mn-flash { box-shadow: 0 0 0 2px var(--primary); }
.mn-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; align-items: center; }
.mn-actions form { margin: 0; }
@media (max-width: 560px) {
  .mn-who { display: none; }
  .mn-kids { margin-left: .4rem; }
}

/* ---------- Chat: Bilder und Videos (0.97) ---------- */
.chat-body { display: grid; gap: .35rem; }
.chat-image { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; max-width: min(280px, 100%); }
.chat-image-img { display: block; width: 100%; max-height: 320px; object-fit: cover; background: #eee; }
.chat-image-gone { font-style: italic; }
.chat-embed, .chat-embed.post-embed-tiktok, .chat-embed.post-embed-youtube { width: min(300px, 100%); max-width: 100%; margin: 0; aspect-ratio: auto; min-height: 140px; }
.chat-embed.post-embed-youtube.is-playing { aspect-ratio: 16 / 9; min-height: 0; }
.chat-embed.post-embed-tiktok.is-playing { aspect-ratio: 9 / 16; width: min(240px, 100%); }
.chat-embed .post-embed-info { padding: .65rem .7rem; gap: .3rem; }
.chat-embed .post-embed-info strong { font-size: .92rem; }
.chat-embed .post-embed-play { padding: .3rem .9rem; font-size: .88rem; min-height: 0; }
.chat-embed .post-embed-note { font-size: .68rem; }
@media (max-width: 560px) { .chat-form { gap: .25rem; padding-inline: .45rem; } .chat-emoji-btn { font-size: 1.25rem; padding: .1rem; } }
.chat-attach { position: absolute; bottom: calc(100% + 4px); left: .7rem; right: .7rem; z-index: 4; display: flex; align-items: center; gap: .6rem;
  padding: .4rem .5rem; background: #fff; border: 1px solid var(--primary); border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.chat-attach[hidden] { display: none; }
.chat-attach img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.chat-attach span { flex: 1; font-size: .85rem; }
.chat-lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.chat-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.chat-lightbox img { display: block; max-width: 96vw; max-height: 90vh; border-radius: 10px; cursor: zoom-out; }
.chat-lightbox-close { position: absolute; top: -.6rem; right: -.6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid #fff; background: #111; color: #fff; font-size: 1rem; cursor: pointer; }
.report-image { display: block; max-width: min(360px, 100%); border-radius: 10px; border: 1px solid var(--border); margin: .4rem 0; }