:root {
  --bg: #07090f;
  --bg2: #0c0f18;
  --card: #12151f;
  --card-hover: #181c28;
  --border: #242a3a;
  --text: #eef1f6;
  --muted: #9aa3b5;
  /* Farben aus dem Werbebild: warmes Orange als Hauptfarbe,
     Neon-Blau als Zweitfarbe fuer Leuchtlinien und Akzente */
  --accent: #ff7a3d;
  --accent-hi: #ffa15e;
  --accent2: #3b8bff;
  --green: #34d399;
  --red: #f87171;
  --amber: #fbbf24;
  --radius: 14px;
}

/* ======================================================================
   Gleichmaessiges Skalieren aller Seiten

   Fast jede Schriftgroesse der Seite steht in rem. Damit genuegt eine
   einzige Stellschraube: waechst oder schrumpft die Grundgroesse, ziehen
   Ueberschriften, Beschriftungen, Knopftexte und Kacheltexte auf allen
   Seiten gleichmaessig mit. Sonst muesste jede Seite ihre eigenen
   Sonderregeln fuer jede Bildschirmgroesse pflegen – genau das ist frueher
   auseinandergelaufen.

   Die Groesse haengt an Breite UND Hoehe, der kleinere Wert gewinnt: ein
   flaches Fenster (1920x800) soll genauso zusammenruecken wie ein
   schmales. Richtwerte: 1280 px -> ~14.5 px, Full HD -> ~16 px,
   1440p -> 18 px, ab 4K gedeckelt bei 19 px.

   Unter 760 px (Handy) bleibt es bei 16 px. Dort ist kleinere Schrift
   nicht schicker, sondern nur schlechter lesbar – da arbeiten die
   Umbruch-Regeln der einzelnen Seiten. */
html { font-size: 16px; }
@media (min-width: 761px) {
  html { font-size: clamp(13.5px, min(calc(12px + 0.2344vw), calc(11px + 0.486vh)), 19px); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------------------------------------------------------- Bildlaufleisten
   Zwei Wege fuehren zum Ziel, und sie schliessen sich gegenseitig aus:
   Chrome nimmt die ::-webkit-Regeln nur, solange scrollbar-width auf auto
   steht - sobald "thin" gesetzt ist, zeichnet er stattdessen die schmale
   Systemleiste und ignoriert alles Weitere. Firefox kennt umgekehrt nur
   scrollbar-width/-color. Deshalb: die Standardangaben fuer Firefox, und
   fuer Chrome per @supports wieder auf auto zurueck, damit dort die
   gestaltete Leiste greift. */
* { scrollbar-width: thin; scrollbar-color: #26364f transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
/* Der Rand bleibt durchsichtig, weil die Farbe nur den Inhaltsbereich
   fuellt - so bekommt der Griff Luft zum Rand und wirkt schlanker, ohne
   dass daneben eine sichtbare Spur entsteht. */
::-webkit-scrollbar-thumb {
  background: #26364f; background-clip: content-box;
  border: 3px solid transparent; border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #33486b; background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: #3f5a86; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; }
}
/* Damit die Leiste des Fensters (Startseite, Login, Rechtstexte - ueberall
   dort, wo nicht die App-Huelle scrollt) dunkel bleibt statt hellgrau vom
   System zu kommen. */
html { color-scheme: dark; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Seitenhintergrund
   Zwei feste Ebenen hinter allem: unten das Bild, darueber ein
   Schleier mit Farbnebel und feinem Korn.

   Beide wandern ganz langsam gegeneinander - das gibt Bewegung,
   ohne dass es unruhig wird. Bewegt wird nur per "transform",
   das erledigt die Grafikkarte: keine Neuberechnung der Seite,
   kein spuerbarer Stromverbrauch.

   Feste Ebenen statt "background-attachment: fixed" - das macht
   auf iPhones Aerger.
   ============================================================ */
/* Der bewegte Hintergrund. Das Video haengt app.js in jede Seite ein –
   so steht das Markup nicht 20-mal in den HTML-Dateien. Darunter liegt
   weiterhin ein Standbild: es ist sofort da, waehrend das Video noch
   laedt, und bleibt stehen, wenn jemand weniger Bewegung eingestellt
   hat oder der Browser das Abspielen verweigert. */
.site-bg-video {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; border: 0; background: var(--bg);
  /* Das Video ist violett eingefaerbt - entsaettigt und abgedunkelt
     passt es zum dunklen Grund mit Orange/Blau aus dem Werbebild */
  filter: saturate(0.25) brightness(0.5);
}

body::before {
  content: "";
  /* etwas groesser als das Fenster, damit beim Wandern keine Kante auftaucht */
  position: fixed; inset: -8%; z-index: -3;
  background-color: var(--bg);
  background-image: url("../img/site-bg-video-poster.webp?v=456c9c8b");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: saturate(0.25) brightness(0.5);
  animation: bgFoto 40s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  content: "";
  position: fixed; inset: -18%; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(closest-side, rgba(255, 122, 61, 0.16), transparent 100%) 14% 24% / 62% 58% no-repeat,
    radial-gradient(closest-side, rgba(59, 139, 255, 0.14), transparent 100%) 84% 74% / 66% 62% no-repeat,
    radial-gradient(closest-side, rgba(255, 161, 94, 0.08), transparent 100%) 62% 8% / 54% 52% no-repeat,
    radial-gradient(circle at center, rgba(143, 163, 189, 0.055) 1px, transparent 1.4px),
    linear-gradient(180deg, rgba(8, 12, 20, 0.42) 0%, rgba(8, 12, 20, 0.26) 45%, rgba(8, 12, 20, 0.55) 100%);
  background-size: 180px 180px, auto, auto, auto, 28px 28px, auto;
  animation: bgNebel 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Der Weg bleibt klein genug, dass nie eine Kante ins Bild rutscht:
   die Ebenen sind 8 bzw. 12 Prozent groesser als das Fenster. */
@keyframes bgFoto {
  from { transform: translate3d(-3.4%, 2.2%, 0) scale(1.06); }
  to   { transform: translate3d(3.6%, -2.6%, 0) scale(1.16); }
}
@keyframes bgNebel {
  from { transform: translate3d(6.5%, -4.5%, 0) scale(1.08) rotate(-1.4deg); opacity: 0.72; }
  to   { transform: translate3d(-7%, 5%, 0) scale(1.2) rotate(1.5deg); opacity: 1; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt ein Standbild */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; transform: none; }
  body::before { inset: 0; }
  body::after { inset: 0; }
  .site-bg-video { display: none; }
}

main { flex: 1; width: min(1080px, 94%); margin: 0 auto; padding: 32px 0 64px; }

header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 9, 15, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.scrolled {
  background: rgba(7, 9, 15, 0.88);
  border-bottom-color: var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
/* Drei Bereiche im Flow: links Logo, mittig die Navigation, rechts das Konto.
   Frueher schwebte die Navigation absolut zentriert - dabei hat sie sich auf
   Tablets mit den Knoepfen rechts ueberlagert. */
.header-inner {
  position: relative;
  width: min(1080px, 94%); margin: 0 auto;
  display: flex; align-items: center;
  min-height: 68px; gap: 14px;
}
.main-nav { flex: 0 0 auto; min-width: 0; }
#nav-auth { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
.logo { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.logo-img {
  height: 40px; width: auto; display: block;
}
@media (max-width: 480px) { .logo-img { height: 32px; } }
nav.main-nav { display: flex; align-items: center; gap: 12px; }

.nav-dock {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  background: rgba(16, 24, 38, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px rgba(0, 0, 0, 0.35);
}
.dock-pill {
  position: absolute; top: 5px; left: 5px;
  height: calc(100% - 10px); width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 122, 61, 0.16), rgba(59, 139, 255, 0.2));
  border: 1px solid rgba(255, 122, 61, 0.4);
  box-shadow: 0 0 18px rgba(255, 122, 61, 0.18);
  opacity: 0;
  transition: left 0.4s cubic-bezier(0.3, 1.3, 0.35, 1), width 0.4s cubic-bezier(0.3, 1.3, 0.35, 1),
              transform 0.25s cubic-bezier(0.3, 1.3, 0.35, 1), opacity 0.25s ease;
  pointer-events: none;
}
.dock-link {
  position: relative; z-index: 1;
  padding: 8px 16px; border-radius: 999px;
  color: var(--muted); font-size: 0.88rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease;
}
.dock-link:hover, .dock-link.active { color: var(--text); }

/* Schmale Bildschirme: die Navigation bekommt eine eigene Zeile und laesst
   sich seitlich schieben, statt zu ueberlappen oder ganz zu verschwinden. */
@media (max-width: 980px) {
  .header-inner {
    flex-wrap: wrap;
    padding: 10px 0 12px; min-height: 0; row-gap: 10px;
  }
  .logo { flex: 0 0 auto; }
  #nav-auth { flex: 1 1 auto; }
  .main-nav { order: 3; flex: 1 0 100%; min-width: 100%; }
  .nav-dock {
    width: 100%; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    border-radius: 14px;
  }
  .nav-dock::-webkit-scrollbar { display: none; }
  .dock-link { flex: 1 0 auto; text-align: center; }
}

@media (max-width: 560px) {
  .header-inner { padding: 9px 0 10px; gap: 10px; }
  .dock-link { padding: 8px 13px; font-size: 0.84rem; }
  #nav-auth { gap: 9px; }
}
/* ---------------------------------------------------------- Sprachwahl
   Auf den eigenstaendigen Seiten (Startseite, Anmeldung, Impressum,
   Datenschutz, Richtlinien, Unterstuetzen). Sieht aus wie das Menue in
   der App-Kopfleiste, kommt aber ohne shell.css aus. */
.lang-pick { position: relative; flex-shrink: 0; }
/* Seiten ohne Kopfleiste - dort haengt die Wahl oben rechts im Fenster. */
.lang-pick-frei { position: fixed; top: 14px; right: 16px; z-index: 90; }

.lang-pick-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em;
  transition: border-color 0.15s ease;
}
.lang-pick-btn:hover { border-color: var(--accent); }
.lang-pick-btn i { color: var(--muted); font-size: 0.65rem; }

.lang-pick-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 130;
  width: 214px; padding: 8px;
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(165deg, rgba(17, 29, 50, 0.99), rgba(6, 13, 25, 0.99));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px) scale(0.98); transform-origin: top right;
  transition: all 0.16s ease;
}
.lang-pick-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.lang-pick-kopf { padding: 5px 9px 9px; }
.lang-pick-kopf small {
  display: block; color: #6f83a3; font-size: 0.6rem;
  font-weight: 800; letter-spacing: 0.14em;
}
.lang-pick-kopf span { color: #9fb0cd; font-size: 0.76rem; }
.lang-pick-menu button {
  width: 100%; display: grid; grid-template-columns: 25px minmax(0, 1fr) 22px 12px;
  align-items: center; gap: 8px; padding: 8px 9px;
  border: 1px solid transparent; border-radius: 10px;
  color: #91a4c0; background: transparent; cursor: pointer;
  text-align: left; font: inherit;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.lang-pick-menu button:hover { color: #fff; background: rgba(44, 64, 101, 0.42); }
.lang-pick-menu button.on {
  color: #fff; border-color: rgba(239, 119, 59, 0.2);
  background: linear-gradient(100deg, rgba(255, 122, 61, 0.1), rgba(79, 139, 236, 0.11));
}
.lang-pick-menu button b { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.lang-pick-menu button em { color: #6f83a3; font-size: 0.62rem; font-style: normal; font-weight: 800; }
.lang-pick-menu button i { color: var(--accent); font-style: normal; font-size: 0.7rem; }

@media (max-width: 480px) {
  .lang-pick-btn b { display: none; }
  .lang-pick-frei { top: 10px; right: 10px; }
}

.lang-switch {
  display: flex; gap: 2px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
  flex-shrink: 0;
}
.lang-switch button {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
  padding: 5px 10px; border-radius: 999px; font-family: inherit;
  transition: all 0.15s ease;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.on {
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  color: #1a0d05;
}
/* Flaggen der Sprachauswahl. Stehen hier und nicht in shell.css, weil sie
   auch die Startseite braucht – die laedt shell.css nicht. */
.lang-flag { position:relative; display:inline-block; width:22px; height:14px; flex:0 0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:3px; box-shadow:0 2px 7px rgba(0,0,0,.28); background:#23324d; }
.flag-de { background:linear-gradient(to bottom,#171717 0 33.33%,#d82132 33.33% 66.66%,#efc744 66.66%); }
.flag-fr { background:linear-gradient(to right,#173f91 0 33.33%,#f5f6f8 33.33% 66.66%,#e33a46 66.66%); }
.flag-it { background:linear-gradient(to right,#169b62 0 33.33%,#f5f6f8 33.33% 66.66%,#ce2b37 66.66%); }
.flag-pl { background:linear-gradient(to bottom,#f5f6f8 0 50%,#dc2948 50%); }
.flag-es { background:linear-gradient(to bottom,#b81f32 0 25%,#f4c542 25% 75%,#b81f32 75%); }
.flag-en {
  background:
    linear-gradient(32.5deg,transparent 39%,#fff 39% 45%,#c8102e 45% 50%,#fff 50% 56%,transparent 56%),
    linear-gradient(-32.5deg,transparent 39%,#fff 39% 45%,#c8102e 45% 50%,#fff 50% 56%,transparent 56%),
    #012169;
}
.flag-en::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 39%,#fff 39% 61%,transparent 61%),linear-gradient(transparent 31%,#fff 31% 69%,transparent 69%);
}
.flag-en::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 45%,#c8102e 45% 55%,transparent 55%),linear-gradient(transparent 41%,#c8102e 41% 59%,transparent 59%);
}
.flag-tr { background:#e30a17; }
.flag-tr::before { content:""; position:absolute; left:5px; top:3px; width:7px; height:7px; border-radius:50%; background:#fff; }
.flag-tr::after { content:""; position:absolute; left:7px; top:3px; width:6px; height:6px; border-radius:50%; background:#e30a17; }
.support-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(251, 191, 36, 0.09);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--amber); font-weight: 700; font-size: 0.87rem;
  text-decoration: none; white-space: nowrap;
  transition: all 0.15s ease;
}
.support-btn:hover {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #1a1206; border-color: transparent;
  box-shadow: 0 4px 18px rgba(251, 191, 36, 0.35);
}
.support-btn span { display: inline; }
@media (max-width: 480px) { .support-btn span { display: none; } .support-btn { padding: 9px 13px; } }
.login-btn {
  padding: 8px 20px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  color: #1a0d05; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.login-btn:hover { filter: brightness(1.12); box-shadow: 0 4px 16px rgba(255, 122, 61, 0.3); }
.login-btn:active { transform: scale(0.97); }
/* ============================================================
   Mitglieder-Menü oben rechts
   ============================================================ */
.user-menu { position: relative; }

.user-chip {
  width:42px; height:42px; display:grid; place-items:center;
  padding:4px;
  border: 1px solid var(--border); border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 39, 56, 0.9), rgba(16, 24, 36, 0.9));
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.user-chip:hover {
  border-color: rgba(255, 122, 61, 0.42);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32);
}
.user-chip.open {
  border-color: rgba(255, 122, 61, 0.6);
  background: linear-gradient(180deg, rgba(255, 122, 61, 0.12), rgba(59, 139, 255, 0.1));
  box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.1);
}

/* Avatar mit kleinem Online-Punkt */
.uc-av { position: relative; display: block; flex-shrink: 0; }
.uc-av .avatar { width: 32px; height: 32px; font-size: 0.85rem; }
.user-chip .uc-av .avatar { width:34px; height:34px; }
.uc-on {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); border: 2px solid #101824;
}

.user-chip b { display: block; font-size: 0.86rem; line-height: 1.15; color: var(--text); }
.user-chip small {
  display: block; color: var(--muted); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; margin-top: 1px;
}
.chip-caret {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.22s ease, stroke 0.16s ease;
}
.user-chip:hover .chip-caret { stroke: var(--text); }
.user-chip.open .chip-caret { transform: rotate(180deg); stroke: var(--accent); }

/* ---- die Klappe ---- */
.user-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 296px; max-width: calc(100vw - 24px);
  background: linear-gradient(168deg, rgba(24, 34, 50, 0.98), rgba(12, 18, 28, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px;
  box-shadow: 0 32px 74px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 7px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px) scale(0.96); transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
  z-index: 100;
}
.user-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* Kopfkarte mit farbigem Verlauf */
.ud-card { position: relative; overflow: hidden; border-radius: 13px; margin-bottom: 6px; }
.ud-card-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(59, 139, 255, 0.42), transparent 62%),
    radial-gradient(110% 130% at 0% 100%, rgba(255, 122, 61, 0.28), transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.ud-card-in {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr); gap: 11px;
  align-items: center; padding: 14px 13px 13px;
}
.ud-av {
  width: 42px; height: 42px; font-size: 1.05rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.ud-card-txt { min-width: 0; }
.ud-card-txt b {
  display: block; font-size: 0.95rem; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ud-card-txt small {
  display: block; margin-top: 2px; color: #a9bcd6; font-size: 0.75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ud-card .role-pill {
  grid-column: 1 / -1; justify-self: start; margin-top: 2px;
  font-size: 0.6rem; padding: 3px 10px;
}

.ud-items { display: flex; flex-direction: column; gap: 1px; }
.ud-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 11px; border-radius: 11px;
  color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 550;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.13s ease, color 0.13s ease;
}
.ud-item > span:not(.ud-lang-pair) { flex: 1; min-width: 0; }
.ud-item:hover { background: rgba(255, 255, 255, 0.055); }
.ud-ico {
  width: 30px; height: 30px; padding: 6px; flex-shrink: 0; border-radius: 9px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07);
  stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.13s ease, border-color 0.13s ease, background 0.13s ease;
}
.ud-item:hover .ud-ico {
  stroke: var(--accent); border-color: rgba(255, 122, 61, 0.35); background: rgba(255, 122, 61, 0.1);
}
.ud-arrow {
  width: 14px; height: 14px; flex-shrink: 0; opacity: 0;
  stroke: var(--muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transform: translateX(-4px); transition: opacity 0.14s ease, transform 0.14s ease;
}
.ud-item:hover .ud-arrow { opacity: 1; transform: none; }
.ud-sep { height: 1px; background: rgba(255, 255, 255, 0.07); margin: 6px 10px; }

.ud-lang-label { color: var(--text); font-size: 0.88rem; }
.ud-lang-pair {
  display: flex; gap: 2px; flex-shrink: 0;
  background: rgba(0, 0, 0, 0.32); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.ud-lang-pair .lp {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  color: var(--muted); padding: 3px 9px; border-radius: 999px;
  transition: all 0.12s ease;
}
.ud-item:hover .ud-lang-pair .lp:not(.on) { color: var(--text); }
.ud-lang-pair .lp.on {
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  color: #1a0d05;
}
/* ---- Sprachwahl im Mitgliedermenü ----
   Stand früher als Klappmenü in der Kopfzeile. Hier reicht ein Raster
   aus sieben Flaggen: sichtbar, was es gibt, ein Klick genügt. */
.ud-lang { padding: 4px 4px 2px; }
.ud-lang-kopf {
  display: block; padding: 0 7px 6px;
  color: var(--muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ud-lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ud-lang-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 2px 6px; border-radius: 10px;
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.04);
  color: var(--muted); cursor: pointer; font: inherit;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease, transform 0.13s ease;
}
.ud-lang-grid button b { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; }
.ud-lang-grid button .lang-flag { width: 24px; height: 16px; }
.ud-lang-grid button:hover {
  color: var(--text); background: rgba(255, 255, 255, 0.09); transform: translateY(-1px);
}
.ud-lang-grid button.on {
  color: var(--text); border-color: rgba(255, 122, 61, 0.4);
  background: linear-gradient(150deg, rgba(255, 122, 61, 0.16), rgba(79, 139, 236, 0.16));
}
.ud-lang-grid button.on .lang-flag { box-shadow: 0 0 0 1px rgba(255, 122, 61, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); }

.ud-logout { color: #fca5a5; }
.ud-logout:hover { background: rgba(248, 113, 113, 0.1); color: #fecaca; }
.ud-logout .ud-ico { stroke: #fca5a5; }
.ud-logout:hover .ud-ico { stroke: #fca5a5; border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.12); }

.lang-switch {
  display: flex; gap: 2px; padding: 3px;
  flex-shrink: 0;
}
.lang-switch button {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
  padding: 5px 10px; border-radius: 999px; font-family: inherit;
  transition: all 0.15s ease;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.on {
  color: var(--accent); background: rgba(255, 122, 61, 0.1);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  color: #1a0d05; font-weight: 800; font-size: 0.9rem;
  flex-shrink: 0;
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.05rem;
  border: 1px solid var(--border); background: var(--bg2);
  text-decoration: none;
  transition: all 0.15s ease;
}
.icon-btn:hover { border-color: rgba(59, 139, 255, 0.6); box-shadow: 0 0 18px rgba(59, 139, 255, 0.15); }
@media (max-width: 520px) { .user-chip-info, .chip-caret { display: none; } .user-chip { padding: 4px; gap: 0; } }

.hero { text-align: center; padding: 40px 0 8px; }
.hero h1 { font-size: clamp(1.7rem, 5vw, 2.8rem); letter-spacing: -0.03em; }
.hero p { color: var(--muted); margin-top: 12px; font-size: 1.05rem; }
.hero .formula {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 20px; color: var(--muted); font-size: 0.9rem;
}
.formula b { color: var(--text); }
.formula i { font-style: normal; color: var(--accent); }

.grid-cards {
  display: grid; gap: 18px; margin-top: 36px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }

.cat-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.cat-search { position: relative; flex: 1 1 280px; }
.cat-search input {
  width: 100%; padding: 12px 14px 12px 42px;
  border-radius: 12px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text);
  font-size: 0.95rem; outline: none; transition: border-color 0.15s ease;
}
.cat-search input:focus { border-color: var(--accent); }
.cat-search::before {
  content: "🔍"; position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); font-size: 0.85rem; opacity: 0.7;
}
.cat-sort select {
  appearance: none; -webkit-appearance: none;
  padding: 12px 40px 12px 16px; border-radius: 12px;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238fa3bd' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 15px center;
  border: 1px solid var(--border); color: var(--text);
  font-size: 0.9rem; font-weight: 600; outline: none; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease;
}
.cat-sort select:hover { border-color: rgba(255, 122, 61, 0.4); }
.cat-sort select:focus { border-color: var(--accent); }
.chip-filter {
  padding: 10px 17px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--muted); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s ease;
}
.chip-filter:hover { color: var(--text); border-color: rgba(255, 122, 61, 0.4); }
.chip-filter.active {
  background: linear-gradient(90deg, rgba(255, 122, 61, 0.15), rgba(59, 139, 255, 0.18));
  border-color: rgba(255, 122, 61, 0.55); color: var(--text);
}
.cat-empty {
  grid-column: 1 / -1; color: var(--muted); padding: 34px; text-align: center;
  border: 1px dashed var(--border); border-radius: 13px; font-size: 0.95rem;
}

.dd { position: relative; flex: 0 0 auto; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 200px;
  padding: 12px 16px; border-radius: 12px;
  background-color: var(--bg);
  border: 1px solid var(--border); color: var(--text);
  font-size: 0.9rem; font-weight: 600; outline: none;
  cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease;
}
.dd-btn:hover, .dd.open .dd-btn { border-color: var(--accent); }
.dd-caret { color: var(--muted); font-size: 0.7rem; transition: transform 0.2s ease; }
.dd.open .dd-caret { transform: rotate(180deg); }
.dd-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: linear-gradient(165deg, var(--card), var(--bg2));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  padding: 5px; z-index: 60;
  max-height: 320px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.dd.open .dd-list { opacity: 1; visibility: visible; transform: none; }
.dd-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 13px; border-radius: 9px;
  color: var(--text); background: none; border: none; cursor: pointer;
  font-size: 0.88rem; font-weight: 500; text-align: left; font-family: inherit;
  transition: background 0.1s ease;
}
.dd-opt:hover { background: rgba(255, 122, 61, 0.08); }
.dd-opt.on { background: rgba(255, 122, 61, 0.1); font-weight: 700; }
.dd-check { color: var(--accent); font-weight: 800; }

.act-list { display: flex; flex-direction: column; gap: 9px; }
.act-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 15px;
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-left: 3px solid var(--rc, #334155);
  border-radius: 12px; padding: 12px 18px;
  color: var(--text); text-decoration: none;
  transition: all 0.15s ease;
}
.act-row, .act-row * { text-decoration: none; }
.act-row::before {
  content: ""; position: absolute; inset: 0;
  background: var(--rc, #334155); opacity: 0.05;
  transition: opacity 0.15s ease; pointer-events: none;
}
.act-row:hover {
  border-color: var(--rc, #334155);
  transform: translateX(3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.act-row:hover::before { opacity: 0.1; }
.act-row > * { position: relative; z-index: 1; }
.act-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}
.act-main { flex: 1; min-width: 0; }
.act-main b { display: block; font-size: 0.95rem; letter-spacing: -0.01em; }
.act-tag { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
  font-size: 0.76rem; color: var(--muted); white-space: nowrap;
}
.stat-pill b { color: var(--text); font-variant-numeric: tabular-nums; }
.stat-pill.live { border-color: rgba(52, 211, 153, 0.3); }
.stat-pill.live b { color: var(--green); }
.stat-pill.live .live-dot { width: 6px; height: 6px; }
.act-arrow { color: var(--muted); flex-shrink: 0; transition: all 0.15s ease; }
.act-row:hover .act-arrow { color: var(--accent); transform: translateX(3px); }
@media (max-width: 640px) {
  .act-row { flex-wrap: wrap; gap: 10px 12px; }
  .act-stats { order: 3; width: 100%; padding-left: 54px; margin-top: -4px; }
  .act-arrow { display: none; }
}

.cat-tile {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-radius: 13px;
  padding: 13px 15px; cursor: pointer;
  color: var(--text); text-decoration: none;
  transition: all 0.15s ease;
}
.cat-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.3rem;
  background: rgba(255, 122, 61, 0.07);
  border: 1px solid rgba(255, 122, 61, 0.16);
}
.cat-body { min-width: 0; }
.cat-body b { display: block; font-size: 0.97rem; letter-spacing: -0.01em; }
.cat-live { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.cat-live .live-dot { width: 6px; height: 6px; }
.cat-live b { color: var(--green); font-size: 0.8rem; }
.cat-arrow { margin-left: auto; color: var(--muted); font-size: 0.9rem; flex-shrink: 0; transition: all 0.15s ease; }
.cat-tile:hover {
  border-color: rgba(255, 122, 61, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 122, 61, 0.08);
}
.cat-tile:hover .cat-arrow { color: var(--accent); transform: translateX(3px); }
.cat-tile.locked { opacity: 0.45; cursor: default; }
.cat-tile.locked:hover { transform: none; border-color: var(--border); box-shadow: none; }

.activity-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  color: var(--text); text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.activity-card, .activity-card * { text-decoration: none; }
.activity-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  opacity: 0; transition: opacity 0.18s ease;
}
.activity-card:hover:not(.locked) {
  transform: translateY(-5px);
  border-color: rgba(255, 122, 61, 0.55);
  box-shadow: 0 20px 46px rgba(255, 122, 61, 0.1);
}
.activity-card:hover:not(.locked)::before { opacity: 1; }
.activity-card.locked { opacity: 0.4; cursor: default; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-tile {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.8rem;
  background: linear-gradient(140deg, rgba(255, 122, 61, 0.13), rgba(59, 139, 255, 0.17));
  border: 1px solid rgba(59, 139, 255, 0.35);
}
.card-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.card-desc { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin-top: 6px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 999px; padding: 7px 13px;
  color: var(--green); font-weight: 600; font-size: 0.85rem; white-space: nowrap;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }
.live-count { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.activity-card .btn { margin-top: auto; width: 100%; }
.locked-tag { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.12em; margin-top: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px; border: none;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer; text-decoration: none; text-align: center;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  color: #1a0d05;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-big { font-size: 1.15rem; padding: 17px 34px; }
.btn-small { padding: 8px 14px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.panel {
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; max-width: 520px; margin: 0 auto;
}
.panel-wide { max-width: 720px; }
.panel h2 { margin-bottom: 6px; letter-spacing: -0.01em; }
.panel .sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 22px; }

.field { margin-bottom: 18px; }
.field > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238fa3bd' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background-color: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 1rem; outline: none;
  /* Ohne diese Zeile nimmt <textarea> die Schreibmaschinenschrift des
     Browsers - dann sieht ein Feld anders aus als alle anderen. */
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.12);
}
.field textarea { resize: vertical; min-height: 86px; line-height: 1.5; }

/* Speichern-Knopf: am PC rechts und nur so breit wie noetig - ueber die
   ganze Breite sah er aus wie ein Farbbalken, nicht wie ein Knopf. */
.btn-save { display: block; margin-left: auto; min-width: 210px; }
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented input { display: none; }
.segmented label {
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border);
  cursor: pointer; font-size: 0.9rem; color: var(--muted);
  transition: all 0.12s ease;
}
.segmented input:checked + label {
  background: linear-gradient(120deg, rgba(255, 122, 61, 0.18), rgba(59, 139, 255, 0.22));
  border-color: rgba(255, 122, 61, 0.6); color: var(--text); font-weight: 600;
  box-shadow: 0 0 14px rgba(255, 122, 61, 0.14);
}

.chip-group { margin-bottom: 14px; }
.chip-group:last-child { margin-bottom: 0; }
.chip-group-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700; margin-bottom: 8px;
}
.chip-group .segmented { display: flex; flex-wrap: wrap; gap: 8px; }







.price-card:hover { transform: translateY(-4px); border-color: rgba(255, 122, 61, 0.45); }





















#filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; align-content: start; }
#filter-form .field { margin-bottom: 0; }
#filter-form .field > label { margin-bottom: 7px; font-size: 0.76rem; }
#filter-form .field-select { min-width: 0; }
#filter-form .field-seg, #filter-form .btn { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .main-nav { position: static; left: auto; top: auto; transform: none; margin-left: auto; } #filter-form { grid-template-columns: 1fr; } }

.form-note { color: var(--muted); font-size: 0.85rem; margin-top: 14px; }
.form-error { color: var(--red); font-size: 0.9rem; margin-top: 12px; min-height: 1.2em; }
.link-row { margin-top: 18px; font-size: 0.9rem; color: var(--muted); }
.link-row a { color: var(--accent); }

.queue-panel { text-align: center; max-width: 640px; margin: 0 auto; }
.queue-search-card{position:relative;max-width:700px;padding:28px 48px 34px;overflow:visible;border:1px solid transparent;border-radius:25px;background:radial-gradient(circle at 50% 24%,rgba(31,68,132,.42),transparent 47%),linear-gradient(155deg,rgba(10,29,61,.97),rgba(6,15,35,.98)) padding-box,linear-gradient(125deg,#ff8040,#7864ff 48%,#4c91ff 72%,#ed6420) border-box;box-shadow:inset 0 0 70px rgba(52,111,215,.1),0 0 0 1px rgba(45,178,255,.14),0 0 24px rgba(67,154,255,.4),0 0 46px rgba(67,139,255,.23)}
.queue-search-card::before{content:"";position:absolute;inset:-20px;z-index:-1;border-radius:38px;background:radial-gradient(ellipse,rgba(58,112,255,.16),transparent 65%);filter:blur(15px)}
.queue-card-top{min-height:42px;padding-right:112px;display:flex;align-items:center;justify-content:center;gap:12px}.queue-summary{max-width:400px;min-height:38px;margin:0;padding:8px 17px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(55,138,255,.52);border-radius:999px;color:#dfe9ff;background:rgba(5,17,42,.66);font-size:.73rem;box-shadow:inset 0 0 16px rgba(55,103,221,.08);overflow-wrap:anywhere}.queue-summary svg{width:16px;height:16px;flex:none;fill:#f46d2a;stroke:#ffa679;stroke-width:1.1}.queue-live{min-height:31px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(31,213,177,.4);border-radius:999px;color:#b7f9e8;background:rgba(85,33,7,.28);font-size:.62rem;font-weight:750;white-space:nowrap}.queue-live i{width:7px;height:7px;border-radius:50%;background:#23e7b7;box-shadow:0 0 9px #23e7b7;animation:queuePulse 1.4s ease-in-out infinite alternate}.queue-minimize{position:absolute;right:17px;top:18px;display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(77,137,210,.34);border-radius:10px;color:#b9c9e4;background:rgba(5,15,34,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);font-size:.62rem;font-weight:750;cursor:pointer;transition:.17s ease}.queue-minimize:hover{color:#fff;border-color:rgba(241,133,79,.58);box-shadow:0 0 20px rgba(83,93,255,.18)}.queue-minimize span{font-size:1rem;color:#ff9b69}
.queue-radar{position:relative;width:210px;height:210px;margin:25px auto 5px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 28px,rgba(66,138,232,.25) 29px 30px),linear-gradient(90deg,transparent 49.6%,rgba(64,135,226,.18) 50%,transparent 50.4%),linear-gradient(transparent 49.6%,rgba(64,135,226,.18) 50%,transparent 50.4%);filter:drop-shadow(0 0 15px rgba(38,128,255,.18))}.queue-radar>i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ff9966;box-shadow:0 0 11px 3px rgba(52,175,255,.75)}.queue-radar>i:nth-child(1){left:18px;top:113px}.queue-radar>i:nth-child(2){right:22px;top:55px}.queue-radar>i:nth-child(3){right:44px;bottom:28px}.queue-radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -30deg,transparent 0 82%,rgba(255,114,44,.08) 89%,rgba(255,138,80,.8) 99%,transparent);animation:queueSweep 3s linear infinite}.queue-radar::after{content:"";position:absolute;inset:65px;border:2px solid #ff7834;border-radius:50%;box-shadow:0 0 18px rgba(255,117,48,.66),inset 0 0 15px rgba(77,100,255,.3)}.queue-radar>span{position:absolute;inset:78px;z-index:2;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#163878,#08162f);box-shadow:0 0 18px rgba(61,113,255,.5)}.queue-radar svg{width:32px;height:32px;fill:none;stroke:#ff9966;stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 6px #ff7936)}
.queue-search-card h2{margin:0;color:#f5f8ff;font-size:2rem;letter-spacing:-.035em;text-shadow:0 2px 18px rgba(80,123,255,.28)}.queue-lead{margin:6px 0 24px;color:#a7bce0;font-size:.93rem}.queue-search-card .queue-stats{padding:19px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(52,126,235,.48);border-radius:15px;background:linear-gradient(145deg,rgba(11,31,66,.82),rgba(8,19,43,.78));box-shadow:inset 0 0 28px rgba(59,92,190,.08)}.queue-search-card .queue-stats>div{padding:0 23px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}.queue-search-card .queue-stats>div+div{border-left:1px solid rgba(82,119,181,.3)}.queue-search-card .queue-stats span{display:flex;align-items:center;gap:12px}.queue-search-card .queue-stats svg{width:25px;height:25px;fill:none;stroke:#3ebeff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.queue-search-card .queue-stats b{color:#f0f5ff;font-size:1.45rem}.queue-search-card .queue-stats small{margin-top:7px;color:#b3c6e6;font-size:.72rem;line-height:1.42}.queue-search-card .wait-time{margin:22px auto 0;padding-top:19px;display:flex;align-items:center;justify-content:center;gap:9px;border-top:1px solid rgba(93,121,169,.26);color:#b9c8e1;font-size:.83rem;font-variant-numeric:tabular-nums}.queue-search-card .wait-time svg{width:21px;height:21px;fill:none;stroke:#76a8ff;stroke-width:1.8;stroke-linecap:round}.queue-search-card .wait-time span{color:#e6efff;font-weight:850}.queue-hint{margin:6px 0 20px;color:#7188ab;font-size:.7rem}.queue-search-card .result-actions{margin:0}.queue-search-card #cancel-btn{width:min(450px,100%);min-height:47px;border:1px solid #ff4e7a;color:#ff6c91;background:rgba(28,9,27,.24);box-shadow:inset 0 0 18px rgba(255,56,108,.04);font-size:.76rem}.queue-search-card #cancel-btn:hover{background:rgba(87,15,46,.28);box-shadow:0 0 20px rgba(255,65,116,.12)}
@keyframes queueSweep{to{transform:rotate(360deg)}}@keyframes queuePulse{to{opacity:.45;transform:scale(.75)}}
@media(max-width:760px){.queue-search-card{padding:22px 16px 25px}.queue-card-top{padding:40px 0 0;flex-wrap:wrap}.queue-minimize{right:12px;top:12px}.queue-summary{font-size:.63rem}.queue-radar{width:176px;height:176px}.queue-radar::after{inset:54px}.queue-radar>span{inset:66px}.queue-search-card h2{font-size:1.65rem}.queue-search-card .queue-stats{padding:14px 8px}.queue-search-card .queue-stats>div{padding:0 9px}.queue-search-card .queue-stats small{font-size:.61rem}.queue-search-card .queue-stats svg{width:20px}.queue-search-card .queue-stats b{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){.queue-radar::before,.queue-live i{animation:none}}
.hidden { display: none !important; }

.match-ready-card{position:relative;max-width:700px;padding:28px 40px 32px;overflow:hidden;border:1px solid transparent;border-radius:25px;background:radial-gradient(circle at 50% 22%,rgba(37,83,155,.42),transparent 47%),linear-gradient(155deg,rgba(9,28,60,.98),rgba(6,15,34,.99)) padding-box,linear-gradient(125deg,#ff7733,#7264ff 48%,#4d91ff 76%,#ed6622) border-box;box-shadow:inset 0 0 75px rgba(52,111,215,.1),0 0 0 1px rgba(45,178,255,.12),0 0 27px rgba(67,154,255,.4),0 0 50px rgba(67,139,255,.22)}
.match-ready-card::before,.match-ready-card::after{content:"";position:absolute;width:7px;height:7px;border-radius:2px;background:#56e5d1;box-shadow:92px 27px #5b9aff,-83px 14px #ffb172,146px 51px #4a83ff,-142px 53px #41e2bc;transform:rotate(24deg)}.match-ready-card::before{left:50%;top:74px}.match-ready-card::after{right:21%;top:104px;transform:rotate(-28deg)}
.match-perfect{position:relative;z-index:1;width:max-content;margin:0 auto 12px;padding:8px 15px;display:flex;align-items:center;gap:8px;border:1px solid rgba(31,218,167,.45);border-radius:999px;color:#54edc0;background:rgba(8,101,79,.3);font-size:.62rem;font-weight:850;text-transform:uppercase;box-shadow:0 0 18px rgba(26,213,166,.12)}.match-perfect span{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;color:#043d35;background:#5ce8c3;font-size:.72rem}.match-title{position:relative;z-index:1;margin:0;color:#ff8e56;font-size:clamp(2rem,5vw,2.7rem);line-height:1.05;letter-spacing:-.045em;text-shadow:0 0 22px rgba(43,183,255,.22)}.match-title span{font-size:.72em}.match-lead{position:relative;z-index:1;margin:7px 0 0;color:#f0f5ff;font-size:.92rem;font-weight:750}.match-sub{position:relative;z-index:1;margin:7px 0 15px;color:#879bbd;font-size:.72rem}
.match-filter-chips{position:relative;z-index:1;margin:0 0 16px;padding:9px 10px;display:flex;align-items:center;justify-content:center;gap:7px;overflow-x:auto;border:1px solid rgba(71,126,221,.45);border-radius:13px;background:rgba(13,34,72,.66);scrollbar-width:none}.match-filter-chips::-webkit-scrollbar{display:none}.match-filter-chips>span{min-height:29px;padding:0 10px;display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid rgba(77,120,198,.38);border-radius:10px;color:#dce8ff;background:linear-gradient(145deg,rgba(25,53,105,.9),rgba(14,31,66,.92));font-size:.62rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.match-filter-chips i{color:#7e72ff;font-size:.83rem;font-style:normal}.match-filter-chips b{font-weight:700}
.ready-list{position:relative;z-index:1;list-style:none;text-align:left;margin:0;display:flex;flex-direction:column;gap:6px}.ready-list li{min-height:50px;padding:7px 11px;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(55,100,171,.38);border-radius:11px;background:linear-gradient(100deg,rgba(8,20,43,.9),rgba(11,28,57,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.ready-person{min-width:0;display:flex;align-items:center;gap:13px}.ready-person>i{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:50%;color:#fff;background:linear-gradient(145deg,#5c9aff,#4c91ff);font-size:.85rem;font-weight:800;font-style:normal;box-shadow:inset 0 1px 2px rgba(255,255,255,.25),0 0 14px rgba(72,142,255,.25)}.ready-list li:nth-child(2n) .ready-person>i{background:linear-gradient(145deg,#ff7b39,#4667ec)}.ready-list li:nth-child(3n) .ready-person>i{background:linear-gradient(145deg,#34d6b6,#2587c8)}.ready-person b{overflow:hidden;color:#f2f6ff;font-size:.8rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.ready-list .state-ready,.ready-list .state-waiting{min-width:90px;height:34px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;font-size:.7rem;font-weight:800}.ready-list .state-ready{border:1px solid rgba(36,218,151,.32);color:#49e6aa;background:rgba(13,113,78,.24)}.ready-list .state-waiting{border:1px solid rgba(235,169,47,.3);color:#ffc552;background:rgba(107,73,15,.2)}.ready-list .state-ready i,.ready-list .state-waiting i{font-style:normal}
.ready-progress-row{position:relative;z-index:1;margin:13px 1px 8px;display:grid;grid-template-columns:auto minmax(100px,1fr) 38px;align-items:center;gap:13px;color:#aebfdb;font-size:.68rem}.ready-progress-row>span b{color:#dbe8fb}.ready-progress-row>b{text-align:right;color:#aec1df}.ready-progress{height:10px;padding:1px;overflow:hidden;border:1px solid rgba(74,104,155,.36);border-radius:999px;background:#14243f;box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}.ready-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#45e5aa,#56dfbd);box-shadow:0 0 14px rgba(59,226,170,.7);transition:width .3s ease}.match-ready-card .status-msg{margin:0!important;min-height:10px!important}
.countdown-ring{position:relative;width:150px;height:150px;margin:4px auto 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(101,187,255,.78);border-radius:50%;background:radial-gradient(circle,rgba(24,54,105,.62),rgba(6,17,40,.8) 67%);box-shadow:inset 0 0 28px rgba(44,109,235,.18),0 0 21px rgba(54,148,255,.35)}.countdown-ring>i{position:absolute;inset:-3px;border-radius:50%;border-top:4px solid #4bb8ff;border-right:4px solid #5596ff;border-bottom:4px solid transparent;border-left:4px solid transparent;filter:drop-shadow(0 0 7px #568cff);animation:countRing 5s linear infinite}.countdown{position:relative;z-index:1;margin:0;color:#f5f8ff;font-size:2.05rem;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.countdown.warn{color:#ff6481}.countdown-ring small{position:relative;z-index:1;margin-top:3px;color:#9cafcd;font-size:.6rem}.match-auto-note{margin:10px 0 18px;color:#9fb3d3;font-size:.68rem}.match-auto-note span{margin-right:6px;color:#6faaff;font-size:.82rem}.match-ready-card .result-actions{position:relative;z-index:1;margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}.match-ready-card .result-actions .btn{max-width:none;min-width:0;min-height:50px;border-radius:11px;font-size:.82rem;text-transform:none}.match-ready-card #im-ready{border:0;color:#092342;background:linear-gradient(100deg,#ee6d2d,#6f91f2 57%,#4d91ff);box-shadow:0 9px 25px rgba(62,128,245,.2)}.match-ready-card #im-ready span{width:21px;height:21px;display:inline-grid;place-items:center;margin-right:8px;border-radius:4px;color:#d9fff4;background:#0b956b}.match-ready-card #im-ready:disabled{opacity:.72}.match-ready-card #decline-match{border:1px solid rgba(72,114,181,.45);color:#eff4ff;background:rgba(6,17,36,.68)}.match-ready-card #decline-match span{margin-right:9px;font-size:1.3rem;font-weight:300}
@keyframes countRing{to{transform:rotate(360deg)}}
@media(max-width:620px){.match-ready-card{padding:22px 14px 20px}.match-title{font-size:2rem}.match-lead{font-size:.78rem}.match-filter-chips{justify-content:flex-start}.ready-list .state-ready,.ready-list .state-waiting{min-width:76px}.countdown-ring{width:132px;height:132px}.match-ready-card .result-actions{grid-template-columns:1fr}.match-ready-card .result-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.countdown-ring>i{animation:none}}
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.result-actions .btn { min-width: 230px; flex: 1 1 0; max-width: 380px; }

.room-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0 0 26px; }
.member-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.member-card:hover { border-color: rgba(255, 122, 61, 0.45); transform: translateY(-2px); }
.member-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; color: #1a0d05; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
}
img.member-avatar { object-fit: cover; }
.member-info { min-width: 0; flex: 1; }
.m-name { font-weight: 700; font-size: 0.98rem; display: flex; align-items: center; gap: 7px; }
.m-badge {
  font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase;
  background: rgba(255, 122, 61, 0.14); color: var(--accent);
  padding: 2px 9px; border-radius: 999px; flex-shrink: 0;
}
.m-badge.host { background: rgba(59, 139, 255, 0.16); color: #9cc4ff; }
.m-line { color: var(--muted); font-size: 0.82rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.match-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; margin-bottom: 24px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 122, 61, 0.13), rgba(59, 139, 255, 0.18)), var(--card);
  border: 1px solid rgba(255, 122, 61, 0.3);
  text-align: left;
}
.mh-emoji { font-size: 2.5rem; filter: drop-shadow(0 4px 16px rgba(255, 122, 61, 0.35)); }
.match-hero h2 { font-size: 1.28rem; letter-spacing: -0.01em; }
.mh-sub { color: var(--muted); font-size: 0.85rem; margin-top: 5px; }
.mh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.mh-chip {
  font-size: 0.72rem; padding: 3px 11px; border-radius: 999px;
  background: rgba(7, 9, 15, 0.55); border: 1px solid rgba(255, 122, 61, 0.25); color: var(--text);
}

.safety-box {
  margin-bottom: 24px; padding: 16px 18px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 12px; text-align: left;
}
.safety-box b { color: var(--amber); display: block; margin-bottom: 6px; font-size: 0.9rem; }
.safety-box p { color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.safety-box p b { color: var(--text); display: inline; }

.feedback-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; }

.match-check { margin-bottom: 24px; }
.mc-title { font-size: 0.92rem; font-weight: 700; margin-bottom: 11px; }
.mc-title span { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.check-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 0.78rem;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
}
.check-chip b { color: var(--text); font-weight: 600; }
.check-chip.ok { border-color: rgba(52, 211, 153, 0.4); }
.check-chip.warn { border-color: rgba(251, 191, 36, 0.45); }
.check-chip.bad { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.07); }
.check-chip.bad b { color: var(--red); }
.fb-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 12px 14px; font-size: 0.9rem; cursor: pointer;
  text-align: left; transition: all 0.15s ease;
}
.fb-btn:hover { border-color: var(--accent); }
.fb-btn.selected { border-color: var(--green); color: var(--green); }

.room-layout .result-actions { flex-direction: column; align-items: stretch; margin-top: 28px; }
.room-layout .result-actions .btn { min-width: 0; max-width: none; width: 100%; }

.chat-head { position: relative; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; }
.chat-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi)); opacity: 0.55;
}

.profile-data { display: grid; gap: 12px; text-align: left; margin: 20px 0; }
.profile-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--border); padding-bottom: 10px; }
.profile-row span:first-child { color: var(--muted); }

footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px 0; margin-top: auto;
}
.footer-inner {
  width: min(1080px, 94%); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 0.85rem;
}
.footer-brand b { color: var(--text); font-weight: 700; }
.footer-links { display: flex; gap: 20px; }
.footer-links a {
  color: var(--muted); text-decoration: none; font-size: 0.85rem;
  padding: 5px 2px; border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-links a:hover { color: var(--text); border-bottom-color: var(--accent); }
.footer-inner a { color: var(--muted); }
.footer-inner a:hover { color: var(--text); }

.fill-me {
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.55);
  border-radius: 6px; padding: 2px 10px;
  color: var(--amber); font-weight: 600; font-size: 0.85em;
}

.queue-feed { display: flex; flex-direction: column-reverse; gap: 6px; min-height: 96px; margin-top: 16px; font-size: 0.85rem; color: var(--muted); text-align: left; }
.queue-feed div { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; animation: feedin 0.3s ease; overflow-wrap: anywhere; }
.queue-feed b { color: var(--text); }
@keyframes feedin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.admin-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.admin-stat b { display: block; font-size: 1.55rem; font-weight: 800; }
.admin-stat span { color: var(--muted); font-size: 0.8rem; }
.admin-section { margin-top: 30px; }
.admin-section h3 { margin-bottom: 14px; font-size: 1.05rem; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--border); }
.setting-row label { cursor: pointer; }
.setting-row small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 3px; }
.setting-row select { padding: 9px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 0.92rem; }
input[type="checkbox"] { accent-color: var(--accent); width: 19px; height: 19px; cursor: pointer; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 8px; border-bottom: 1px dashed var(--border); overflow-wrap: anywhere; }
.admin-table th { color: var(--muted); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-table .btn-small { padding: 5px 10px; font-size: 0.78rem; }
.admin-table select {
  padding: 7px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 0.85rem; cursor: pointer;
}
.match-log { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.match-log li { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; font-size: 0.88rem; color: var(--muted); overflow-wrap: anywhere; }
.match-log b { color: var(--text); }

.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.dash-head h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -0.02em; }
.dash-sub { color: var(--muted); margin-top: 8px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(5, 9, 14, 0.74);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100; animation: feedin 0.2s ease;
}
.modal {
  width: min(560px, 100%); max-height: min(86vh, 780px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(165deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-radius: 20px;
  position: relative; animation: modalin 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalin { from { opacity: 0; transform: scale(0.95) translateY(14px); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-size: 1rem; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: all 0.15s ease;
}
.modal-close:hover { color: var(--text); border-color: var(--red); }
.modal-head {
  display: flex; align-items: center; gap: 15px;
  padding: 20px 56px 18px 24px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(255, 122, 61, 0.07), rgba(59, 139, 255, 0.09));
}
.modal-emoji {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.6rem;
  background: linear-gradient(140deg, rgba(255, 122, 61, 0.13), rgba(59, 139, 255, 0.17));
  border: 1px solid rgba(59, 139, 255, 0.35);
}
.modal h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.modal form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-body {
  padding: 20px 22px; overflow-y: auto; flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px;
  align-content: start;
}
.modal-body .field { margin-bottom: 0; }
.modal-body .field > label { margin-bottom: 7px; font-size: 0.76rem; }
.modal-body .field-select { min-width: 0; }
.modal-body .field-seg { grid-column: 1 / -1; }
@media (max-width: 560px) { .modal-body { grid-template-columns: 1fr; } }
.modal-footer { padding: 16px 24px 20px; border-top: 1px solid var(--border); flex-shrink: 0; background: rgba(7, 9, 15, 0.4); }
.modal-footer .btn { width: 100%; }

.recent-list { display: flex; flex-direction: column; gap: 10px; }
.match-list { display: flex; flex-direction: column; gap: 10px; }
.match-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 15px;
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-left: 3px solid var(--rc, #334155);
  border-radius: 12px; padding: 13px 18px 13px 16px;
  color: var(--text); text-decoration: none;
  transition: all 0.15s ease;
}
.match-row, .match-row * { text-decoration: none; }
.match-row::before {
  content: ""; position: absolute; inset: 0;
  background: var(--rc, #334155); opacity: 0.05;
  transition: opacity 0.15s ease; pointer-events: none;
}
.match-row:hover {
  border-color: var(--rc, #334155);
  transform: translateX(3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.match-row:hover::before { opacity: 0.1; }
.match-row > * { position: relative; z-index: 1; }
.mr-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}
.mr-main { flex: 1; min-width: 0; }
.mr-main b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; }
.mr-sub { color: var(--muted); font-size: 0.8rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-avatars { display: flex; align-items: center; flex-shrink: 0; }
.rm-av {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--bg2); margin-left: -10px;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 800; color: #07090f;
  overflow: hidden;
}
.rm-av:first-child { margin-left: 0; }
.rm-av img { width: 100%; height: 100%; object-fit: cover; }
.rm-av.you { border-color: rgba(255, 122, 61, 0.7); }
.mr-fb { font-size: 1rem; flex-shrink: 0; }
.mr-time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }
.mr-arrow { color: var(--muted); flex-shrink: 0; transition: all 0.15s ease; }
.match-row:hover .mr-arrow { color: var(--accent); transform: translateX(3px); }

.room-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.room-layout .panel { max-width: none; margin: 0; }
@media (max-width: 900px) { .room-layout { grid-template-columns: 1fr; } }

.chat-panel { display: flex; flex-direction: column; min-height: 500px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.chat-title { font-weight: 700; }
.chat-count { margin-left: auto; font-size: 0.8rem; color: var(--green); display: flex; align-items: center; gap: 7px; }
.chat-log {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding-right: 4px; min-height: 300px; max-height: 430px;
}
.chat-msg { max-width: 86%; font-size: 0.92rem; line-height: 1.45; }
.chat-msg .who { font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; }
.chat-msg .bubble { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 9px 13px; overflow-wrap: anywhere; }
.chat-msg.me { align-self: flex-end; }
.chat-msg.me .who { text-align: right; }
.chat-msg.me .bubble {
  background: linear-gradient(120deg, rgba(255, 122, 61, 0.16), rgba(59, 139, 255, 0.22));
  border-color: rgba(255, 122, 61, 0.4);
}
.chat-msg.sys { align-self: center; max-width: 95%; text-align: center; color: var(--muted); font-size: 0.78rem; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 10px; }
.chat-quick button {
  background: var(--bg); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 6px 13px; font-size: 0.8rem; cursor: pointer;
}
.chat-quick button:hover { border-color: var(--accent); color: var(--text); }
.chat-input-row { display: flex; gap: 9px; }
.chat-input-row input {
  flex: 1; padding: 11px 14px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 0.95rem; outline: none;
}
.chat-input-row input:focus { border-color: var(--accent); }
.chat-send {
  padding: 11px 18px; border-radius: 10px; border: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  color: #1a0d05; font-weight: 800; cursor: pointer; font-size: 0.95rem;
}

/* ---- Kopfkarte des Profils ----
   Frueher trug sie die Klasse "panel" - und damit deren max-width von
   520px, waehrend die Abschnitte darunter ueber die volle Breite gingen.
   Das war der schiefe Eindruck. Jetzt ist sie eigenstaendig. */
.profile-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--card), var(--bg2));
}

/* Das farbige Band oben. Farbe und Zeichen kommen aus der ersten
   Aktivitaet des Nutzers (siehe profile.html), darum hier nur der Aufbau. */
.ph-cover {
  height: 132px; position: relative;
  transition: background 0.4s ease;
  background: linear-gradient(135deg, #ff6b35, #ffa15e);
}
.ph-cover::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(560px 200px at 78% -20%, rgba(255, 255, 255, 0.28), transparent 70%),
    linear-gradient(180deg, transparent 45%, rgba(10, 15, 26, 0.55) 100%);
}
/* feines Punktraster wie im Kopfbereich der Startseite */
.ph-raster {
  position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 1.1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(115deg, #000 6%, transparent 62%);
  mask-image: linear-gradient(115deg, #000 6%, transparent 62%);
}
.ph-wm {
  position: absolute; right: 26px; top: 14px; z-index: 1;
  font-size: 56px; line-height: 1; opacity: 0.3;
  transform: rotate(-9deg);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}

.ph-row {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 0 24px 20px; margin-top: -46px;
  position: relative; z-index: 2;
}
.ph-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile-hero .avatar-big {
  width: 108px; height: 108px; margin: 0;
  border: 4px solid var(--card);
  box-shadow: 0 0 0 2px rgba(255, 122, 61, 0.4), 0 16px 36px rgba(0, 0, 0, 0.5);
}
.profile-hero .avatar-xl { width: 108px; height: 108px; font-size: 2.3rem; }
/* Die Kamera sass halb ausserhalb und wurde vom Rand abgeschnitten. */
.profile-hero .avatar-cam {
  width: 32px; height: 32px; right: 2px; bottom: 2px;
  display: grid; place-items: center;
}
.profile-hero .avatar-cam svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.ph-id { flex: 1; min-width: 230px; padding-bottom: 4px; }
.ph-id h2 { font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.15; }
.ph-badges { margin-top: 7px; }

/* Zwei kleine Angaben unter dem Namen */
.ph-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 11px; color: var(--muted); font-size: 0.83rem;
}
.ph-stat { display: inline-flex; align-items: center; gap: 7px; }
.ph-stat svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: var(--accent); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ph-stat b { color: var(--text); font-weight: 700; }

.profile-hero .mi-chips { margin-top: 11px; gap: 6px; }
.profile-hero .mi-chip { padding: 4px 11px; font-size: 0.76rem; cursor: default; }

.ph-actions { display: flex; gap: 10px; padding-bottom: 4px; }
.ph-actions .btn { padding: 10px 18px; font-size: 0.86rem; border-radius: 11px; white-space: nowrap; }

/* Handy: alles untereinander und mittig.

   Dieser Block stand frueher weit oben in der Datei - also VOR den
   Grundregeln des Profils. Bei gleicher Staerke gewinnt aber die
   spaetere Regel, darum blieb "align-items: flex-end" stehen und das
   Profilbild klebte rechts statt in der Mitte. Jetzt steht der Block
   dort, wo er hingehoert: hinter dem, was er ueberschreiben soll. */
@media (max-width: 640px) {
  .ph-row { flex-direction: column; align-items: center; text-align: center; }
  .ph-stats { justify-content: center; }
  .profile-hero .mi-chips { justify-content: center; }
  .ph-actions { flex-direction: row; width: 100%; }
  .ph-actions .btn { flex: 1; }
  .ph-cover { height: 112px; }
  .ph-wm { font-size: 52px; right: 12px; }
  .btn-save { width: 100%; margin-left: 0; }

  /* Der Zusatztext neben der Ueberschrift hat sich hier gequetscht.
     Am Handy kommt er darunter - der Pfeil bleibt oben rechts. */
  .acc-head { flex-wrap: wrap; }
  .acc-head .acc-hint { order: 3; flex-basis: 100%; margin: 3px 0 0 51px; }
  .acc-arrow { order: 2; }
}

.profile-grid { display: flex; flex-direction: column; gap: 12px; }
.profile-grid .panel { max-width: none; margin: 0; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }

.acc-item {
  border: 1px solid var(--border); border-radius: 15px;
  background: linear-gradient(160deg, var(--card), var(--bg2));
  margin-bottom: 12px; overflow: hidden;
  transition: border-color 0.15s ease;
}
.acc-item:hover { border-color: rgba(255, 122, 61, 0.35); }
.acc-item.open { border-color: rgba(255, 122, 61, 0.45); }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; background: none; border: none;
  color: var(--text); font-size: 0.97rem; font-weight: 700;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background 0.15s ease;
}
.acc-head:hover { background: rgba(255, 122, 61, 0.04); }
/* Runder Rahmen ums Symbol - dieselbe Handschrift wie in der Seitenleiste */
.acc-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(30, 41, 74, 0.9), rgba(8, 12, 24, 0.95));
  border: 1px solid rgba(120, 140, 200, 0.22);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acc-icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.acc-item.open .acc-icon {
  border-color: rgba(255, 122, 61, 0.5);
  box-shadow: 0 0 14px rgba(255, 122, 61, 0.22);
}
.acc-head .acc-hint { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.acc-arrow {
  margin-left: auto; flex-shrink: 0; display: grid; place-items: center;
  color: var(--muted); transition: transform 0.25s ease, color 0.15s ease;
}
.acc-arrow svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.acc-head:hover .acc-arrow { color: var(--text); }
.acc-item.open .acc-arrow { transform: rotate(180deg); color: var(--accent); }
.acc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body-inner {
  overflow: hidden; min-height: 0;
  padding: 4px 18px 18px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.28s ease 0.06s, transform 0.28s ease 0.06s;
}
.acc-item.open .acc-body-inner { opacity: 1; transform: none; }
.acc-item.danger-acc { border-color: rgba(248, 113, 113, 0.35); }
.acc-item.danger-acc .acc-head { color: var(--red); }
.acc-item.danger-acc .acc-head:hover { background: rgba(248, 113, 113, 0.06); }
.acc-item.danger-acc .acc-icon { border-color: rgba(248, 113, 113, 0.3); }
.acc-item.danger-acc .acc-icon svg { stroke: var(--red); }
.acc-item.danger-acc.open .acc-icon { border-color: rgba(248, 113, 113, 0.55); box-shadow: 0 0 14px rgba(248, 113, 113, 0.2); }
.acc-item.danger-acc.open .acc-arrow { color: var(--red); }

.avatar-big {
  position: relative; width: 132px; height: 132px; margin: 0;
  cursor: pointer; border-radius: 50%;
}
.avatar-xl {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  color: #1a0d05; font-weight: 800; font-size: 2.8rem;
  border: 3px solid rgba(255, 122, 61, 0.4);
}
.avatar-xl img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.avatar, span.avatar img { object-fit: cover; }
.avatar-cam {
  position: absolute; right: 2px; bottom: 2px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 1rem;
  transition: all 0.15s ease;
}
.avatar-big:hover .avatar-cam { border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 122, 61, 0.35); }
.avatar-remove { background: none; border: none; color: var(--muted); font-size: 0.8rem; cursor: pointer; margin-top: 10px; text-decoration: underline; }
.avatar-remove:hover { color: var(--red); }

.role-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px; margin-top: 10px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.role-pill.admin { background: rgba(59, 139, 255, 0.14); border: 1px solid rgba(59, 139, 255, 0.45); color: #9cc4ff; }
.role-pill.member { background: rgba(52, 211, 153, 0.09); border: 1px solid rgba(52, 211, 153, 0.35); color: var(--green); }

.stat-row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; margin: 16px 0 24px; }
.stat-row b { color: var(--text); }

.form-section { margin-bottom: 30px; }
.form-section h3 {
  font-size: 1rem; margin-bottom: 16px;
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--border);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.status-msg { min-height: 1.3em; font-size: 0.88rem; margin-top: 12px; color: var(--green); }
.status-msg.err { color: var(--red); }

.support-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 999px; padding: 9px 18px; font-size: 0.87rem;
  color: var(--amber); font-weight: 600; text-decoration: none;
  transition: all 0.15s ease;
}
.support-chip:hover {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #1a1206; border-color: transparent;
  box-shadow: 0 4px 18px rgba(251, 191, 36, 0.3);
}

.my-interests { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.mi-label { color: var(--muted); font-size: 0.85rem; }
.mi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(120deg, rgba(255, 122, 61, 0.1), rgba(59, 139, 255, 0.12));
  border: 1px solid rgba(255, 122, 61, 0.35);
  border-radius: 999px; padding: 7px 14px;
  color: var(--text); font-size: 0.85rem; font-weight: 600; text-decoration: none;
  transition: all 0.15s ease;
}
.mi-chip .cat-arrow { font-size: 0.75rem; color: var(--muted); transition: all 0.15s ease; }
.mi-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.mi-chip:hover .cat-arrow { color: var(--accent); }

.support-hero {
  max-width: 680px; margin: 0 auto 26px; text-align: center;
  background: linear-gradient(165deg, var(--card), var(--bg2));
  border: 1px solid var(--border); border-radius: 20px; padding: 40px 32px;
}
.sh-emoji { font-size: 3.4rem; filter: drop-shadow(0 6px 18px rgba(251, 191, 36, 0.35)); }
.support-hero h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.02em; margin-top: 14px; }
.support-hero p { color: var(--muted); line-height: 1.65; margin-top: 14px; font-size: 1rem; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.sh-hint { margin-top: 18px; font-size: 0.8rem; color: var(--muted); }
.danger-box p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 16px; }

@media (max-width: 900px) {
  main { width: min(1080px, 92%); }
}

@media (max-width: 640px) {
  main { padding-top: 18px; }
  .panel { padding: 20px 16px; }
  nav.main-nav { gap: 10px; }

  .btn-big { font-size: 1rem; padding: 15px 22px; }
  .result-actions { flex-direction: column; align-items: stretch; }
  .result-actions .btn { min-width: 0; max-width: 100%; width: 100%; }
  .feedback-row .fb-btn { flex: 1 1 calc(50% - 5px); font-size: 0.88rem; padding: 12px 10px; }

  .grid-cards { grid-template-columns: 1fr; }
  .room-grid { grid-template-columns: 1fr 1fr; }
  .ready-list { max-width: 100%; }
  .countdown { font-size: 2.2rem; }
  .queue-stats { font-size: 0.95rem; }

  .segmented label { padding: 8px 13px; font-size: 0.85rem; }
  .profile-row span:last-child { text-align: right; overflow-wrap: anywhere; }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

@media (max-width: 420px) {
  .room-grid { grid-template-columns: 1fr; }
}
.profile-hint { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; padding:14px 18px; border-radius:12px; background:rgba(251,191,36,0.07); border:1px solid rgba(251,191,36,0.35); color:var(--text); text-decoration:none; font-size:0.92rem; transition:border-color 0.15s ease; } .profile-hint:hover { border-color:rgba(251,191,36,0.7); } .profile-hint .cat-arrow { color:var(--amber); }
/* ============================================================
   Bilder je Kategorie
   Jede Kategorie kann ein eigenes Icon-Bild und ein Titelbild haben.
   Fehlt eine Datei, bleibt einfach das Emoji bzw. der Farbverlauf
   stehen - es gibt kein Loch und keine Fehlermeldung.
   ============================================================ */

/* -- Icon-Bild über dem Emoji -- */
.act-emo { font-style: normal; line-height: 1; }
.act-pic {
  position: absolute; inset: 0; z-index: 1;
  /* "contain": Die Icons sind freigestellt und sollen vollstaendig zu sehen
     sein - nicht formatfuellend beschnitten wie ein Foto. */
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: inherit;
  pointer-events: none;
}
/* Alle Behälter, in denen ein Kategoriebild liegen kann */
.act-chip-ico, .disc-ico, .near-ico, .trend-rank, .rl-icon, .lb-ico, .modal-emoji, .room-emo {
  position: relative; overflow: hidden;
}
/* Die Icons bringen ihre eigene Kachelform mit. Liegt also ein Bild drin,
   fällt die farbige Kachel dahinter weg - sonst sieht man einen Rand.
   Fehlt ein Bild, bleibt die Kachel mit dem Emoji stehen. */
.act-chip-ico:has(.act-pic),
.near-ico:has(.act-pic),
.trend-rank:has(.act-pic),
.lb-ico:has(.act-pic),
.modal-emoji:has(.act-pic) {
  background: none; border-color: transparent; box-shadow: none;
}
/* Das Emoji darunter würde durch das Bild schimmern */
.act-chip-ico:has(.act-pic) .act-emo,
.disc-ico:has(.act-pic) .act-emo,
.near-ico:has(.act-pic) .act-emo,
.trend-rank:has(.act-pic) .act-emo,
.rl-icon:has(.act-pic) .act-emo,
.lb-ico:has(.act-pic) .act-emo,
.modal-emoji:has(.act-pic) .act-emo { visibility: hidden; }

/* -- Titelbild auf Karten -- */
.act-cover {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit; pointer-events: none;
}
.act-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Schleier, damit die Schrift darüber immer lesbar bleibt.
   Oben bleibt vom Bild am meisten zu sehen, unten steht der Text. */
.act-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(9, 14, 22, 0.34) 0%,
    rgba(9, 14, 22, 0.62) 38%,
    rgba(9, 14, 22, 0.88) 68%,
    rgba(9, 14, 22, 0.96) 100%);
}
/* Zusätzliche Sicherheit bei sehr hellen Motiven hinter Text */
.act-cover ~ * b, .act-cover ~ * small { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }

/* Karten mit Titelbild: Inhalt muss darüber liegen */
/* Nur der Inhalt wird angehoben. Der Herz-Knopf bleibt absolut
   positioniert - siehe .disc-fav in home.css. */
.disc-card > .disc-main { position: relative; z-index: 1; }
.disc-card:hover .act-cover img { transform: scale(1.05); }
.act-cover img { transition: transform 0.4s ease; }

/* Raumkarte: der Kopf ist nur das Bild - ohne Icon davor. */
.room-cover > .act-cover { z-index: 0; }
.room-cover > .act-cover::after {
  background:
    linear-gradient(180deg, rgba(6, 10, 17, 0.34) 0%, rgba(6, 10, 17, 0) 34%, rgba(6, 10, 17, 0.72) 100%);
}

/* ======================================================================
   Enger werden auf flachen Bildschirmen

   Die Schrift skaliert schon ueber die Grundgroesse in :root. Kaesten und
   Abstaende stehen dagegen in Pixeln – die ruecken hier zusammen. Es sind
   dieselben Schwellen wie in shell.css, damit alle Seiten im gleichen
   Moment umschalten und nicht jede fuer sich.

   Unterhalb von 1101 px greift stattdessen das Tablet-/Handy-Raster. */
@media (min-width: 1101px) and (max-height: 1100px) {
  .btn { padding: 11px 19px; }
  .btn-big { padding: 14px 28px; }
  .btn-small { padding: 7px 12px; }
  .panel { padding: 22px; }
  .panel .sub { margin-bottom: 16px; }
  .field { margin-bottom: 14px; }
  .field > label { margin-bottom: 6px; }
  .modal-head { padding: 16px 52px 14px 20px; }
  .modal-emoji { width: 44px; height: 44px; }
  .modal-body { padding: 16px 20px; }
  .modal-footer { padding: 13px 20px 16px; }
  .dash-head { margin-bottom: 20px; }
}

@media (min-width: 1101px) and (max-height: 850px) {
  .btn { padding: 10px 17px; }
  .btn-big { padding: 12px 24px; }
  .panel { padding: 18px; }
  .field { margin-bottom: 11px; }
  .modal-emoji { width: 40px; height: 40px; }
  .dash-head { margin-bottom: 15px; }
}

/* ---------------------------------------------------------- Eingabefelder auf dem Handy
   Safari auf dem iPhone zoomt die Seite selbsttaetig heran, sobald ein
   Textfeld mit weniger als 16px Schrift angetippt wird - und zoomt danach
   nicht von allein zurueck. Der Nutzer landet also nach jedem Antippen in
   einer verschobenen Ansicht und muss von Hand wieder herauszoomen.

   Deshalb gilt hier fuer alle Felder, in die man wirklich schreibt, auf
   schmalen Bildschirmen 16px. Schieberegler, Haken und Schalter sind
   ausgenommen: die loesen kein Zoomen aus und wuerden nur groesser werden.

   Die Grenze liegt bei 760px, weil die Wurzel-Schriftgroesse oben erst ab
   761px mitwaechst - darunter rechnet 1rem ohnehin fest mit 16px. */
@media (max-width: 760px) {
  textarea,
  select,
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"] { font-size: 16px; }
}

/* Der Sprachknopf war 28px hoch - zum Antippen zu knapp. Wieder nur die
   Trefferflaeche, die Beschriftung bleibt unveraendert gross. */
@media (max-width: 760px) {
  .lang-pick-btn { min-height: 40px; }
}

/* ======================================================================
   Handy: fuehlt sich an wie eine App
   Kein grauer Tipp-Blitz, kein Doppeltipp-Zoom auf Knoepfen, keine
   automatische Schriftvergroesserung beim Drehen. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, [role="button"], label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Kopfleiste der Seiten ohne App-Geruest (Login, Registrieren, Impressum …):
   alles in EINE Zeile - Logo links, Knoepfe rechts. Frueher rutschte der
   Musik-Knopf in eine eigene Zeile, darunter stand noch eine Leiste mit
   nur einem "Start"-Link, den das Logo ohnehin schon erledigt. */
@media (max-width: 560px) {
  .site-header .header-inner { gap: 8px; }
  .site-header .logo-img { height: 28px; }
  .site-header #nav-auth { gap: 6px; }
  .site-header .header-inner > .nc-global-music { order: 2; }
  .site-header .nc-music-button { width: 38px; height: 38px; border-radius: 12px; }
  .site-header .support-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .site-header .login-btn { padding: 9px 15px; }
  .site-header .lang-pick-btn { padding: 6px 9px; }
  .site-header .main-nav:not(:has(.dock-link + .dock-link)) { display: none; }
}

/* Vom Startbildschirm gestartet: Knopfbeschriftungen sollen sich nicht
   wie Webseitentext markieren lassen. */
@media (display-mode: standalone) {
  .site-header, .tabbar, .topbar, .btn, .dock-link { -webkit-user-select: none; user-select: none; }
}

/* ======================================================================
   Handy-Menue: EIN Aussehen fuer Startseite und App
   Knopf mit drei Strichen und das Blatt von rechts sehen ueberall gleich
   aus - nur der Inhalt unterscheidet sich (eingeloggt / nicht).
   Genutzt von index.html (#m-menu) und shell.js (.app-menu).
   ====================================================================== */
.app-menu:not([open]) { display: none; }
@media (max-width: 760px) {
  /* Knopf: gleich auf allen Seiten */
  html body .m-burger,
  html body .top-burger {
    display: grid; align-content: center; justify-items: center; gap: 4px;
    width: 40px; height: 40px; padding: 0; cursor: pointer; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12); background: rgba(18,21,31,.85);
  }
  html body .m-burger span,
  html body .top-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }
  html body .m-burger span:nth-child(2),
  html body .top-burger span:nth-child(2) { width: 12px; background: var(--accent); }

  /* Blatt */
  .app-menu {
    position: fixed; inset: 0 0 0 auto; margin: 0; width: min(330px, 88vw); height: 100dvh; max-height: none;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; scrollbar-width: none;
    border: 1px solid rgba(255,255,255,.08); border-right: 0; border-radius: 26px 0 0 26px; color: var(--text);
    background:
      radial-gradient(120% 40% at 100% 0%, rgba(255,122,61,.16), transparent 60%),
      radial-gradient(120% 40% at 0% 100%, rgba(59,139,255,.16), transparent 60%),
      linear-gradient(180deg, #121726, #0a0d16);
    box-shadow: -20px 0 60px rgba(0,0,0,.5);
  }
  .app-menu::-webkit-scrollbar { display: none; }
  .app-menu[open] { display: flex; flex-direction: column; gap: 12px; animation: appMenuIn .24s ease; }
  .app-menu::backdrop { background: rgba(3,5,10,.62); backdrop-filter: blur(4px); }

  .app-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 6px; }
  .app-menu-head img { height: 28px; width: auto; }
  .app-menu-x {
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: .9rem;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #d7dbe3;
  }

  /* Eintraege als ruhige Karten mit Symbol-Kachel */
  .app-menu-group { display: flex; flex-direction: column; gap: 7px; }
  .app-menu-group + .app-menu-group,
  .app-menu-group + .app-menu-musik { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
  .app-menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px 7px 7px; cursor: pointer;
    border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
    color: #eef1f6; font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; text-align: left;
    transition: background .15s ease, border-color .15s ease;
  }
  .app-menu-item:active { background: rgba(255,255,255,.07); }
  .app-menu-item i, .app-menu-support i {
    width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 11px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  }
  .app-menu-item svg, .app-menu-support svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .app-menu-item span { flex: 1; }
  .app-menu-item em, .app-menu-support em { font-style: normal; color: #7d8596; font-size: 1.1rem; }
  .app-menu-cta {
    display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 14px;
    background: linear-gradient(95deg, var(--accent), var(--accent-hi)); color: #1a0d05;
    font-weight: 800; font-size: .84rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 8px 22px rgba(255,122,61,.28);
  }

  /* Musik: Karte mit dem animierten Knopf, Player klappt darunter auf */
  .app-menu-musik {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px;
    padding: 10px 10px 10px 14px; border-radius: 14px;
    border: 1px solid rgba(59,139,255,.22); background: linear-gradient(135deg, rgba(59,139,255,.08), rgba(255,255,255,.02));
  }
  .app-menu-musik > span { display: flex; flex-direction: column; gap: 2px; }
  .app-menu-musik b { font-size: .9rem; color: #eef1f6; }
  .app-menu-musik small { font-size: .7rem; color: #8b93a3; }
  .app-menu-musik .top-audio,
  .app-menu-musik .nc-global-music { display: contents !important; }
  .app-menu-musik .top-audio-menu,
  .app-menu-musik .nc-music-menu {
    grid-column: 1 / -1; position: static; width: auto; margin: 0; display: none;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none;
  }
  .app-menu-musik .top-audio-menu.open,
  .app-menu-musik .nc-music-menu.open { display: block; }

  /* Unterstuetzen: dezent, warm, eine Zeile mit Untertitel */
  .app-menu-support {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 8px; cursor: pointer;
    border-radius: 14px; border: 1px solid rgba(255,122,61,.22);
    background: linear-gradient(90deg, rgba(255,122,61,.09), rgba(255,122,61,.02) 70%);
    color: #eef1f6; font: inherit; text-decoration: none; text-align: left;
  }
  .app-menu-support i { background: rgba(255,122,61,.12); border-color: rgba(255,122,61,.25); }
  .app-menu-support span { flex: 1; display: flex; flex-direction: column; gap: 1px; }
  .app-menu-support b { font-size: .88rem; font-weight: 700; }
  .app-menu-support small { font-size: .68rem; color: #9aa2b1; }

  /* Sprache */
  .app-menu-lang small { display: flex; align-items: center; gap: 10px; color: #8b93a3; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; margin: 4px 0 8px; }
  .app-menu-lang small::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
  .app-menu-lang > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .app-menu-lang button {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; cursor: pointer;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
    color: #9aa2b1; font: inherit; font-size: .68rem; font-weight: 700;
  }
  .app-menu-lang button.on { color: #fff; border-color: var(--accent); background: rgba(255,122,61,.1); box-shadow: 0 0 12px rgba(255,122,61,.2); }

  .app-menu-legal {
    margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center; gap: 14px; font-size: .74rem;
  }
  .app-menu-legal a { color: #8b93a3; }
  .app-menu-legal i { width: 1px; height: 12px; background: rgba(255,255,255,.15); }
}
@keyframes appMenuIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) {
  /* Unterstuetzen und Musik nicht in der Liste, sondern ganz unten:
     Liste -> Sprache -> Unterstuetzen -> Musik -> Impressum/Datenschutz */
  .app-menu > .app-menu-support { order: 8; margin-top: auto; }
  .app-menu > .app-menu-musik { order: 9; }
  .app-menu > .app-menu-legal { order: 10; margin-top: 0; }
  .app-menu > .app-menu-lang { padding-bottom: 6px; }
}
@media (max-width: 760px) {
  /* Player klappt nach OBEN auf (ueber der Musik-Zeile) - kein Scrollen */
  .app-menu-musik .top-audio-menu,
  .app-menu-musik .nc-music-menu { grid-row: 1; }
  .app-menu-musik > span,
  .app-menu-musik .top-audio-button,
  .app-menu-musik .nc-music-button { grid-row: 2; }
}
@media (max-width: 760px) {
  /* Player als kleines Fenster UEBER der Musik-Zeile - schiebt nichts weg */
  .app-menu > .app-menu-musik { position: relative; }
  .app-menu-musik .top-audio-menu,
  .app-menu-musik .nc-music-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); top: auto; z-index: 5;
    padding: 12px; border-radius: 16px; box-shadow: 0 -10px 34px rgba(0,0,0,.55);
  }
  /* kompakter: Wellen-Deko weg, Abstaende kleiner */
  .app-menu-musik .top-audio-wave,
  .app-menu-musik .nc-music-wave,
  .app-menu-musik [class*="-wave"] { display: none !important; }
  .app-menu-musik .top-audio-menu > * + *,
  .app-menu-musik .nc-music-menu > * + * { margin-top: 8px; }
}
@media (max-width: 760px) {
  html body .app-menu .app-menu-musik .top-audio-menu,
  html body .app-menu .app-menu-musik .nc-music-menu {
    position: absolute; left: 0; right: 0; width: auto; margin: 0; top: auto; bottom: calc(100% + 8px); z-index: 5; transform-origin: bottom center;
  }
}

/* Musik-Karte im Handy-Menue: gleich aufgebaut wie "Projekt unterstuetzen"
   (Symbol-Kachel links, zwei Zeilen Text, rechts der Musik-Knopf) */
@media (max-width: 760px) {
  html body .app-menu > .app-menu-musik {
    grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
    padding: 8px 8px 8px 8px; border-radius: 14px; border: 1px solid rgba(59,139,255,.25); border-top: 1px solid rgba(59,139,255,.25);
    background: linear-gradient(90deg, rgba(59,139,255,.1), rgba(59,139,255,.02) 70%);
  }
  html body .app-menu > .app-menu-musik::before {
    content: ""; grid-row: 2; width: 36px; height: 36px; border-radius: 11px;
    border: 1px solid rgba(59,139,255,.3);
    background: rgba(59,139,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ab4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E") center / 19px no-repeat;
  }
  html body .app-menu > .app-menu-musik > span { grid-row: 2; gap: 1px; }
  html body .app-menu > .app-menu-musik b { font-size: .88rem; font-weight: 700; }
  html body .app-menu > .app-menu-musik small { font-size: .68rem; }

  /* Der Knopf: ruhige Kachel mit den Klang-Balken (gedimmt, spielend animiert) */
  html body .app-menu-musik .nc-music-button,
  html body .app-menu-musik .top-audio-button {
    grid-row: 2; width: 44px; height: 38px; border-radius: 11px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); box-shadow: none;
  }
  html body .app-menu-musik .nc-music-note,
  html body .app-menu-musik .top-audio-note { display: none; }
  html body .app-menu-musik .nc-music-bars i,
  html body .app-menu-musik .top-audio-bars i { opacity: .65; }
  html body .app-menu-musik .nc-global-music.playing .nc-music-bars i,
  html body .app-menu-musik .top-audio.playing .top-audio-bars i { opacity: 1; }
  html body .app-menu-musik .nc-music-button[aria-expanded="true"],
  html body .app-menu-musik .top-audio-button[aria-expanded="true"] { border-color: rgba(255,122,61,.6); background: rgba(255,122,61,.1); }
}
@media (max-width: 760px) {
  /* Musik-Karte exakt so hoch wie "Projekt unterstuetzen", eine Zeile */
  html body .app-menu > .app-menu-musik { row-gap: 0; padding: 8px 10px 8px 8px; cursor: pointer; }
  html body .app-menu > .app-menu-musik::before,
  html body .app-menu > .app-menu-musik > span,
  html body .app-menu-musik .nc-music-button,
  html body .app-menu-musik .top-audio-button { grid-row: 1; }
  /* Rechts nur die Klang-Balken - kein zweiter Kasten */
  html body .app-menu-musik .nc-music-button,
  html body .app-menu-musik .top-audio-button,
  html body .app-menu-musik .nc-music-button[aria-expanded="true"],
  html body .app-menu-musik .top-audio-button[aria-expanded="true"] {
    width: 34px; height: 36px; border: 0; background: none; box-shadow: none; pointer-events: none;
  }
  html body .app-menu > .app-menu-musik:has([aria-expanded="true"]) { border-color: rgba(255,122,61,.5); }
}

/* ======================================================================
   Handy-Kopf fuer ALLE Seiten (Knopf kommt aus menu.js)
   Einfache Seiten: Logo links, drei Striche rechts - Login, Sprache,
   Spenden und Musik stecken im Menue.
   ====================================================================== */
.m-burger { display: none; }
@media (max-width: 760px) {
  body:not(.app) .site-header #nav-auth,
  body:not(.app) .site-header .main-nav,
  body:not(.app) .site-header .lang-pick,
  body:not(.app) .site-header .lp-lang,
  body:not(.app) .site-header .support-btn,
  body:not(.app) .site-header .header-inner > .nc-global-music { display: none !important; }
  body:not(.app) .site-header .header-inner { flex-wrap: nowrap; justify-content: space-between; min-height: 56px; padding: 0; }
  .site-header .header-inner > .m-burger { order: 9; margin-left: auto; }
  /* Seiten ohne Kopfleiste (z. B. Anmeldung): Knopf schwebt oben rechts */
  html body .m-burger-frei { position: fixed; top: calc(9px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 300; }
  body.register-page .lang-pick-frei,
  body.register-page > .nc-global-music { display: none !important; }
}
@media (max-width: 760px) {
  /* Profil-Karte oben im Menue */
  .app-menu-profil {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; text-decoration: none; color: #eef1f6;
    border: 1px solid rgba(255,122,61,.3);
    background: linear-gradient(120deg, rgba(255,122,61,.14), rgba(59,139,255,.08));
  }
  .app-menu-av {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(135deg, #ff7a3d, #3b8bff); color: #fff; font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 0 0 2px #0b0e16, 0 0 0 3.5px rgba(255,122,61,.8);
  }
  .app-menu-av img { width: 100%; height: 100%; object-fit: cover; }
  .app-menu-profil > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .app-menu-profil b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-menu-profil small { font-size: .74rem; color: #ff9a62; font-weight: 600; }
  .app-menu-profil em { font-style: normal; color: #9aa2b1; font-size: 1.2rem; }
}