/* ============================================================
   WERWOLF — app.css  (Theme-unabhängige Basis)
   Farben / Fonts kommen aus dem jeweiligen Theme-CSS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{min-height:100vh;font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--text-main);background:var(--bg-deep);transition:background .3s,color .3s}
a{color:var(--accent);text-decoration:none}
main{background:transparent}
a:hover{color:var(--accent-bright)}

.container{max-width:980px;margin:0 auto;padding:0 1.5rem}
.container--sm{max-width:480px}
.page-wrap{padding:2rem 0 4rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.flex{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-wrap{flex-wrap:wrap}
.gap-xs{gap:.35rem}.gap-sm{gap:.6rem}.gap-md{gap:1rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.text-center{text-align:center}.text-right{text-align:right}
.text-dim{color:var(--text-dim)}.text-bright{color:var(--text-bright)}.text-accent{color:var(--accent)}
.text-sm{font-size:.875rem}.text-xs{font-size:.78rem}
.italic{font-style:italic}.bold{font-weight:600}
.uppercase{text-transform:uppercase;letter-spacing:.06em}

/* Nav */
.nav{position:sticky;top:0;z-index:200;background:var(--nav-bg);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);padding:.6rem 0}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__logo{font-family:var(--font-display);font-size:1.15rem;color:var(--accent);display:flex;align-items:center;gap:.45rem;font-weight:700}
.nav__logo-img{height:28px;width:auto;object-fit:contain}
.nav__links{display:flex;align-items:center;gap:.2rem}
.nav__link{padding:.3rem .8rem;border-radius:var(--radius);color:var(--text-dim);font-size:.88rem;font-family:var(--font-display);letter-spacing:.03em;transition:background .18s,color .18s}
.nav__link:hover,.nav__link.active{background:var(--hover-bg);color:var(--accent)}
.nav__link--danger{color:var(--danger-text)}
.nav__link--danger:hover{background:var(--danger-bg);color:var(--danger-bright)}

/* Cards */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}
.card--glow{border-color:var(--accent-border);box-shadow:var(--card-shadow)}
.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1.1rem}

/* Auth */
.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;background:transparent}
.auth-card{width:100%;max-width:430px}
.auth-logo{text-align:center;margin-bottom:2rem;background:transparent}
.auth-logo__icon{font-size:3.5rem;display:block;margin-bottom:.5rem}
.auth-logo__img{max-height:130px;max-width:260px;display:block;margin:0 auto .5rem;background:transparent}
.auth-logo__title{font-family:var(--font-display);font-size:2.2rem;color:var(--accent);letter-spacing:.08em}
.auth-logo__sub{color:var(--text-dim);font-style:italic;font-size:.95rem;margin-top:.25rem}

/* Auth — Theme-Swatch-Leiste */
.auth-theme-row{display:flex;align-items:center;gap:.75rem;margin-top:.9rem;padding:.55rem .75rem;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}
.auth-theme-row__label{font-size:.72rem;color:var(--text-dim);white-space:nowrap;flex-shrink:0}
.auth-theme-row__swatches{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.auth-swatch{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-size:1rem;border:2px solid transparent;transition:transform .15s,border-color .15s,box-shadow .15s;text-decoration:none}
.auth-swatch:hover{transform:scale(1.13)}
.auth-swatch--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);transform:scale(1.1)}

/* Forms */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-family:var(--font-display);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--label-color);margin-bottom:.35rem}
.form-input{width:100%;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius);padding:.6rem .9rem;color:var(--text-bright);font-family:var(--font-body);font-size:1rem;outline:none;transition:border-color .18s,box-shadow .18s}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.form-input::placeholder{color:var(--text-dim);opacity:.7}
select.form-input option{background:var(--card-bg);color:var(--text-main)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.58rem 1.3rem;border:none;border-radius:var(--radius);font-family:var(--font-display);font-size:.88rem;letter-spacing:.04em;cursor:pointer;transition:all .18s;text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn--full{width:100%}.btn--sm{padding:.3rem .75rem;font-size:.8rem}.btn--lg{padding:.75rem 1.75rem;font-size:1rem}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-text);box-shadow:var(--btn-primary-shadow)}
.btn--primary:hover:not(:disabled){background:var(--btn-primary-hover);transform:translateY(-1px);box-shadow:var(--btn-primary-shadow-hover)}
.btn--secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:1px solid var(--border)}
.btn--secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.btn--danger{background:var(--danger-bg-strong);color:var(--danger-bright);border:1px solid var(--danger-border)}
.btn--danger:hover:not(:disabled){filter:brightness(1.15)}
.btn--ghost{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
.btn--ghost:hover:not(:disabled){border-color:var(--text-dim);color:var(--text-bright)}

/* Alerts */
.alert{padding:.7rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.93rem;border:1px solid}
.alert--error{background:var(--alert-error-bg);border-color:var(--alert-error-border);color:var(--alert-error-text)}
.alert--success{background:var(--alert-success-bg);border-color:var(--alert-success-border);color:var(--alert-success-text)}
.alert--info{background:var(--alert-info-bg);border-color:var(--alert-info-border);color:var(--alert-info-text)}
.alert--warn{background:var(--alert-warn-bg);border-color:var(--alert-warn-border);color:var(--alert-warn-text)}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .6rem;border-radius:99px;font-size:.76rem;font-family:var(--font-display);letter-spacing:.04em;border:1px solid}
.tag--alive{background:var(--tag-alive-bg);color:var(--tag-alive-text);border-color:var(--tag-alive-border)}
.tag--dead{background:var(--tag-dead-bg);color:var(--tag-dead-text);border-color:var(--tag-dead-border)}
.tag--lobby{background:var(--panel-bg);color:var(--text-dim);border-color:var(--border)}
.tag--day{background:var(--tag-day-bg);color:var(--tag-day-text);border-color:var(--tag-day-border)}
.tag--night{background:var(--tag-night-bg);color:var(--tag-night-text);border-color:var(--tag-night-border)}
.tag--running{background:var(--alert-success-bg);color:var(--alert-success-text);border-color:var(--alert-success-border)}

/* Role Badge */
.role-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:var(--radius);background:var(--role-bg);border:1px solid var(--accent-border);font-family:var(--font-display);font-size:.82rem}
.role--werewolf{color:#c084fc}.role--seer{color:#67e8f9}.role--witch{color:#86efac}
.role--hunter{color:#fbbf24}.role--amor{color:#f9a8d4}.role--healer{color:#6ee7b7}.role--villager{color:var(--text-dim)}

/* Phase Banner */
.phase-banner{display:flex;align-items:center;justify-content:center;gap:.85rem;padding:.9rem 1.5rem;border-radius:var(--radius-lg);margin-bottom:1.5rem;font-family:var(--font-display);font-size:1.05rem;font-weight:600;letter-spacing:.05em;border:1px solid}
.phase-banner--day{background:var(--phase-day-bg);border-color:var(--phase-day-border);color:var(--phase-day-text)}
.phase-banner--night{background:var(--phase-night-bg);border-color:var(--phase-night-border);color:var(--phase-night-text)}
.phase-banner--lobby{background:var(--panel-bg);border-color:var(--border);color:var(--text-dim)}

/* Player Grid */
.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.65rem}
.player-card{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem .65rem;text-align:center;cursor:pointer;transition:all .18s;position:relative}
.player-card:hover:not(.player-card--dead){border-color:var(--accent-border);background:var(--hover-bg)}
.player-card.selected{border-color:var(--accent);background:var(--selected-bg);box-shadow:0 0 14px var(--accent-glow)}
.player-card--dead{opacity:.4;cursor:default;filter:grayscale(.7)}
.player-card__icon{font-size:1.7rem;display:block;margin-bottom:.35rem}
.player-card__name{font-family:var(--font-display);font-size:.76rem;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-card__role{font-size:.7rem;color:var(--text-dim);margin-top:.15rem}
.player-card__skull{position:absolute;top:.25rem;right:.35rem;font-size:.85rem}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th{font-family:var(--font-display);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);padding:.55rem .85rem;border-bottom:1px solid var(--border);text-align:left}
.table td{padding:.7rem .85rem;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--hover-bg)}

/* Section Title */
.section-title{font-family:var(--font-display);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);padding-bottom:.45rem;border-bottom:1px solid var(--border);margin-bottom:.9rem}

/* Page Header */
.page-header{text-align:center;padding:2.5rem 1rem 1.5rem}
.page-header__icon{font-size:2.8rem;display:block;margin-bottom:.65rem}
.page-header__sub{color:var(--text-dim);font-style:italic;margin-top:.35rem}

/* Divider */
.divider{border:none;border-top:1px solid var(--border);margin:1.25rem 0}

/* Toast */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}
.toast{background:var(--card-bg);border:1px solid var(--accent-border);border-radius:var(--radius);padding:.7rem 1.1rem;color:var(--text-bright);font-size:.88rem;max-width:300px;animation:fadeUp .28s ease both;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.toast--error{border-color:var(--alert-error-border);color:var(--alert-error-text)}
.toast--success{border-color:var(--alert-success-border);color:var(--alert-success-text)}

/* Theme Switcher */
.theme-switcher{display:flex;align-items:center;gap:.35rem}
.theme-btn{height:26px;border-radius:99px;border:2px solid transparent;cursor:pointer;transition:all .18s;font-family:var(--font-display);font-size:.72rem;letter-spacing:.04em;padding:0 .65rem;display:flex;align-items:center;gap:.3rem}
.theme-btn:hover{transform:scale(1.05)}
.theme-btn.active{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 2px var(--accent)}

/* Spinner */
.spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--accent-border);border-radius:3px}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.animate-in{animation:fadeUp .3s ease both}
.pulse{animation:pulse 2.8s ease-in-out infinite}

@media(max-width:640px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .nav__links .nav__link{padding:.25rem .5rem;font-size:.8rem}
  h1{font-size:1.6rem!important}
  .player-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}
}

/* ============================================================
   MOBILE-FIRST NAVIGATION
   Top-Bar (schmal) + fixe Bottom-Tab-Bar + Theme-Sheet
   ============================================================ */

/* Grundabstand unten, damit Inhalt nicht hinter der Tab-Bar verschwindet */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

.nav--top { padding: .5rem 0; }
.nav--top .nav__logo { font-size: 1.05rem; }

.nav__link--icon { padding: .35rem .55rem; font-size: 1rem; line-height: 1; }

.theme-trigger {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text-bright);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.theme-trigger:active { transform: scale(.92); }

/* ── Bottom Tab-Bar ─────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  display: flex;
  background: var(--nav-bg);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .55rem 0 .45rem;
  color: var(--text-dim);
  text-decoration: none;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
}
.tabbar__icon { font-size: 1.35rem; line-height: 1; filter: grayscale(.4); transition: filter .15s, transform .15s; }
.tabbar__label { font-family: var(--font-display); font-size: .68rem; letter-spacing: .03em; }
.tabbar__item.active { color: var(--accent); }
.tabbar__item.active .tabbar__icon { filter: none; transform: translateY(-1px) scale(1.08); }
.tabbar__item:active { background: var(--hover-bg); }

/* ── Theme Bottom-Sheet ─────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 400;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.theme-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 401;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: .75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
  max-height: 80vh;
  overflow-y: auto;
}
.theme-sheet.open { transform: translateY(0); }
.theme-sheet__handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin: 0 auto .9rem;
}
.theme-sheet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1rem .5rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  text-align: center;
}
.theme-option.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-option__swatch {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.theme-option__label { font-family: var(--font-display); font-size: .85rem; color: var(--text-bright); }
.theme-option__desc  { font-size: .68rem; color: var(--text-dim); line-height: 1.3; }

/* Desktop: Tab-Bar zentriert, mehr Abstände in der Top-Bar */
@media (min-width: 768px) {
  .nav--top .nav__inner { gap: 1.5rem; }
  .tabbar { justify-content: center; }
  .tabbar__item { flex: 0 0 140px; max-width: 140px; }
  .tabbar__icon { font-size: 1.45rem; }
}

/* ============================================================
   MOBILE TOUCH-OPTIMIERUNG
   Größere Touch-Ziele, bessere Abstände auf kleinen Screens
   ============================================================ */
@media (max-width: 640px) {
  .container { padding: 0 1rem; }
  .page-wrap { padding: 1.25rem 0 1.5rem; }

  .card { padding: 1.25rem; border-radius: var(--radius-lg); }

  .btn { min-height: 46px; font-size: .92rem; }
  .btn--sm { min-height: 38px; }

  .form-input { min-height: 46px; font-size: 1rem; } /* 16px verhindert iOS-Zoom */

  .player-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .player-card { padding: .7rem .4rem; }
  .player-card__icon { font-size: 1.5rem; }
  .player-card__name { font-size: .7rem; }

  .page-header { padding: 1.5rem 1rem 1rem; }
  .page-header__icon { font-size: 2.2rem; }
  h1 { font-size: 1.45rem !important; }
  h2 { font-size: 1.2rem !important; }

  .phase-banner { font-size: .92rem; padding: .75rem 1rem; flex-wrap: wrap; text-align: center; }

  /* Admin: Aktionen als volle Breite stapeln statt nebeneinander quetschen */
  .admin-action-grid,
  .flex.flex-wrap.gap-sm { flex-direction: column; }
  .admin-action-grid .btn,
  .flex.flex-wrap.gap-sm .btn { width: 100%; }

  /* Tabellen horizontal scrollbar statt umbrechen */
  .table { font-size: .85rem; }
  .table th, .table td { padding: .55rem .6rem; }

  #toast-container { left: 1rem; right: 1rem; bottom: calc(76px + env(safe-area-inset-bottom,0px)); align-items: stretch; }
  .toast { max-width: none; }
}

/* Sehr kleine Screens (z.B. iPhone SE) */
@media (max-width: 360px) {
  .player-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-logo__title { font-size: 1.8rem; }
}

/* Touch: Hover-Effekte deaktivieren auf reinen Touch-Geräten (kein "sticky hover") */
@media (hover: none) {
  .btn--primary:hover:not(:disabled),
  .player-card:hover:not(.player-card--dead),
  .theme-btn:hover { transform: none; box-shadow: inherit; }
}

/* Seiten ohne Tab-Bar (Login/Register): kein Bottom-Padding nötig */
body.no-tabbar { padding-bottom: 0; }

.legal-footer {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  font-size: .78rem;
  color: var(--text-dim);
}
.legal-footer a { color: var(--text-dim); text-decoration: none; }
.legal-footer a:hover { color: var(--accent); }
.legal-footer__sep { margin: 0 .5rem; opacity: .4; }

/* Spielseite mobil: Mein Status oben, Dorfbewohner darunter */
@media (max-width: 640px) {
  .grid-2.game-layout { display: flex; flex-direction: column; }
}

/* Admin: Spielerzeilen mobil umbrechen statt quetschen */
@media (max-width: 480px) {
  .admin-player-row { flex-wrap: wrap; row-gap: .5rem; }
  .admin-player-row > div:last-child { width: 100%; justify-content: flex-end; }
  .admin-player-row select.form-input { flex: 1; }
}

/* Admin: "Manuell töten"-Zeile mobil stapeln */
@media (max-width: 480px) {
  .kill-controls { flex-wrap: wrap; }
  .kill-controls select { flex: 1 1 auto; min-width: 120px; }
  .kill-controls .btn { width: 100%; }
}


/* ── ROLLEN-ICONS (PNG/JPG, Tabelle `roles`) ── */
.role-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}
.role-icon--sm    { width: 1.1rem; height: 1.1rem; }
.role-icon--md    { width: 1.6rem; height: 1.6rem; }
.role-icon--lg    { width: 2.4rem; height: 2.4rem; }
.role-icon--xl    { width: 2.8rem; height: 2.8rem; }
.role-icon--photo { /* Kompatibilitäts-Klasse — verhält sich wie .role-icon */ }

.role-icon-frame { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:10px; background:var(--panel-bg); flex-shrink:0; }

/* ── ICON + SORTIERUNG nebeneinander (Desktop) ── */
.icon-sort-row { display:flex; gap:1.25rem; align-items:flex-start; }
.icon-sort-row__icon { flex:1; min-width:0; }
.icon-sort-row__sort { width:130px; flex-shrink:0; }
@media (max-width:640px) {
  .icon-sort-row { flex-direction:column; }
  .icon-sort-row__sort { width:100%; }
}

/* ============================================================
   ICON-UPLOADER (Rollen-Icon hochladen)
   ============================================================ */
.icon-uploader {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .85rem;
  background: var(--panel-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.icon-uploader__preview {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.icon-uploader__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.icon-uploader__placeholder { font-size: 1.6rem; opacity: .5; }
.icon-uploader__controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

/* ============================================================
   STANDARD-NAVIGATION (Admin/Rollen — Desktop + Handy)
   Im Unterschied zur Mobile-Sheet-Navigation (nav.php) hier:
   - Theme-Switcher als direkte Icon-Reihe (kein Bottom-Sheet)
   - Sekundär-Navigation als schmale Pille statt fixer Tab-Bar
   ============================================================ */

/* Theme-Icon-Reihe in der Top-Bar */
.theme-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.theme-row__btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  border: 2px solid transparent;
  text-decoration: none;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.theme-row__btn:hover { transform: scale(1.12); }
.theme-row__btn.active { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 1px var(--accent); }

/* Sekundäre Navigation: schmale Pille, läuft mit dem normalen
   Seiteninhalt mit (kein position:fixed) — funktioniert dadurch
   identisch und ohne Überlappungsrisiko auf jeder Bildschirmgröße. */
.subnav {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  padding: .5rem 0;
}
.subnav__inner {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .9rem;
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--text-dim);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.subnav__link:hover { color: var(--text-bright); border-color: var(--accent-border); }
.subnav__link.active {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.subnav__icon { line-height: 1; }

/* Mobile: nur Icons zeigen, Text ausblenden — spart Platz */
@media (max-width: 767px) {
  .subnav { padding: .4rem 0; }
  .subnav__inner { gap: .25rem; }
  .subnav__text { display: none; }
  .subnav__link { padding: .55rem .75rem; font-size: 1.2rem; }
}

@media (min-width: 768px) {
  .subnav__inner { gap: .5rem; }
  .subnav__link { padding: .45rem 1.1rem; }
}

/* Sichtbarkeits-Helfer für Mobile/Desktop in nav.php */
@media (max-width: 767px) { .nav--desktop-only { display: none !important; } }
@media (min-width: 768px) { .nav--mobile-only  { display: none !important; } }

/* ============================================================
   EINSTELLUNGEN-SHEET
   ============================================================ */
.settings-sheet-title {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}

.settings-section { margin-bottom: 1.1rem; }

.settings-label {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .55rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.06));
}
.settings-row:last-child { border-bottom: none; }
.settings-row__name { font-size: .9rem; color: var(--text-main); }
.settings-row__ctrl { display: flex; align-items: center; gap: .55rem; }

/* Lautstärke-Slider */
.vol-slider {
  -webkit-appearance: none;
  width: 110px; height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(255,255,255,.12));
}
.vol-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: none; cursor: pointer;
}

/* Toggle-Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 26px;
  cursor: pointer; flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0; width: 0; height: 0;
  position: absolute;
}
.toggle-switch__track {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 99px;
  transition: background .2s;
}
.toggle-switch__track::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .2s, background .2s;
}
.toggle-switch input:checked + .toggle-switch__track { background: var(--accent); }
.toggle-switch input:checked + .toggle-switch__track::before {
  transform: translateX(18px);
  background: #fff;
}

/* Settings-Tab-Bar-Button (button statt a) */
.tabbar__item[onclick] { background: none; border: none; font: inherit; }

/* Einstellungen-Sheet: Kopfzeile mit Schliessen-Button */
.settings-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.settings-sheet-header .settings-sheet-title { margin-bottom: 0; }

.settings-close-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: .3rem .6rem;
  border-radius: var(--radius);
  transition: color .15s, background .15s, border-color .15s;
}
.settings-close-btn:hover {
  color: var(--text-bright);
  background: var(--hover-bg);
  border-color: var(--accent-border);
}

/* ── Position-Override: fixierte Elemente gegen Theme-CSS schützen ──
   Themes setzen body.theme-xxx > * { position:relative; z-index:1 }
   mit Spezifität (0,1,1). Diese Selektoren haben gleiche Spezifität,
   kommen aber NACH dem Theme-CSS → gewinnen per Kaskaden-Reihenfolge.
   z-index muss hier explizit wiederholt werden, sonst bleibt der Theme-
   Wert (1) aktiv und die Tab-Bar liegt unter dem Seiteninhalt. */
body > .nav             { position: sticky; top: 0; z-index: 200; }
body > .tabbar          { position: fixed;  bottom: 0; left: 0; right: 0; z-index: 300; }
body > .sheet-backdrop  { position: fixed;  inset: 0;             z-index: 400; }
body > .theme-sheet     { position: fixed;  bottom: 0; left: 0; right: 0; z-index: 401; }

/* ── Rollen-Karten-Flammeneffekte (global) ────────────────── */
.role-fx {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.role-fx::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center,
    rgba(255,130,0,.45) 0%,
    rgba(255,60,0,.2)  45%,
    transparent        75%);
  animation: flame-outer 2.6s ease-in-out infinite;
  pointer-events: none;
}
.role-fx::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,170,40,.55);
  box-shadow: 0 0 10px rgba(255,110,0,.5), inset 0 0 8px rgba(255,110,0,.2);
  animation: flame-ring 1.9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes flame-outer {
  0%,100% { transform:scale(1);    opacity:.6; }
  50%      { transform:scale(1.13); opacity:1;  }
}
@keyframes flame-ring {
  from { box-shadow: 0 0 6px  rgba(255,110,0,.4), inset 0 0 6px  rgba(255,110,0,.1); border-color:rgba(255,160,30,.4); }
  to   { box-shadow: 0 0 22px rgba(255,80,0,.75), 0 0 44px rgba(255,50,0,.3), inset 0 0 10px rgba(255,120,0,.2); border-color:rgba(255,210,70,.95); }
}

/* Funken-Partikel */
.role-spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: spark-rise var(--dur) ease-in forwards;
  animation-delay: var(--delay);
  left: var(--x);
  top: var(--y);
  background: radial-gradient(circle, #ffe066 30%, #ff8800 100%);
  box-shadow: 0 0 4px #ffaa00;
}
@keyframes spark-rise {
  0%   { transform:translate(0,0) scale(1);   opacity:1; }
  70%  { opacity:.8; }
  100% { transform:translate(var(--tx), var(--ty)) scale(0); opacity:0; }
}

/* Rollen-Badge Glow */
@keyframes badge-glow {
  0%,100% { box-shadow:0 0 4px  rgba(255,150,30,.3); }
  50%      { box-shadow:0 0 14px rgba(255,140,0,.8), 0 0 28px rgba(255,80,0,.35); }
}
.role-badge--glow {
  animation: badge-glow 2.2s ease-in-out infinite;
}

/* Modal-Variante: volle Breite, größere Aura */
.role-fx--modal {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 1.1rem;
}
.role-fx--modal::before { inset:-14px; border-radius:24px; }
.role-fx--modal::after  { inset:-5px;  border-radius:20px; }
.role-fx--modal .role-card-modal__icon { margin-bottom:0; }

/* Flammeneffekt (Aura + Funken) deaktiviert */
.fx-rolecard-off .role-fx::before,
.fx-rolecard-off .role-fx::after { display:none; }
.fx-rolecard-off .role-spark { display:none; }

/* Rollenname-Glow deaktiviert */
.fx-rolename-off .role-badge--glow { animation:none; box-shadow:none; }
.fx-rolename-off .role-card-modal__title.role-badge--glow { animation:none; box-shadow:none; }