/* ============================================================
   FRANKFURT 2042 — Atmosphäre-Sound v1: kompaktes UI
   Kleiner runder Knopf unten links; Panel nur auf Anforderung.
   Bewusst dezent, damit Reader/Mobil nicht verstellt werden.
   ============================================================ */
.f2s{position:fixed;left:14px;bottom:max(14px, env(safe-area-inset-bottom));z-index:1400;
  font-family:'IBM Plex Mono', ui-monospace, monospace}
.f2s-btn{width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--theme-bg,#0d0906) 82%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--theme-accent,#f60) 30%, transparent) !important;
  color:color-mix(in srgb, var(--theme-text,#f0e8dc) 70%, var(--theme-bg,#0d0906)) !important;
  opacity:.55;transition:opacity .25s, color .25s;box-shadow:0 4px 18px rgba(0,0,0,.45) !important;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:0}
.f2s-btn:hover, .f2s-btn.active{opacity:1}
.f2s-btn.active{color:var(--theme-accent,#f60) !important}

.f2s-panel{position:absolute;left:0;bottom:46px;width:216px;padding:12px 14px;
  background:color-mix(in srgb, var(--theme-bg,#0d0906) 90%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--theme-accent,#f60) 26%, transparent);
  border-left:3px solid var(--theme-accent,#f60);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 16px 44px rgba(0,0,0,.55)}
.f2s-title{font-size:10px;letter-spacing:.24em;margin:0 0 10px;
  color:var(--theme-accent,#f60)}
.f2s-row{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.f2s-tgl{flex:0 0 84px;cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:.12em;
  padding:6px 0;text-align:center;
  background:transparent !important;
  border:1px solid color-mix(in srgb, var(--theme-text,#f0e8dc) 25%, transparent) !important;
  color:color-mix(in srgb, var(--theme-text,#f0e8dc) 60%, var(--theme-bg,#0d0906)) !important;
  box-shadow:none !important}
.f2s-tgl.on{border-color:var(--theme-accent,#f60) !important;
  color:var(--theme-accent,#f60) !important;
  background:color-mix(in srgb, var(--theme-accent,#f60) 10%, transparent) !important}
.f2s-vol{flex:1;accent-color:var(--theme-accent,#f60);height:20px;background:transparent}
.f2s-note{font-size:9.5px;letter-spacing:.06em;margin-top:2px;
  color:color-mix(in srgb, var(--theme-text,#f0e8dc) 45%, var(--theme-bg,#0d0906))}

@media (max-width:720px){
  .f2s{left:10px;bottom:max(10px, env(safe-area-inset-bottom))}
  .f2s-btn{width:34px;height:34px}
  .f2s-panel{width:200px}
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce){
  .f2s-btn,.f2s-panel{background:var(--theme-panel,#1a120c) !important;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .f2s-btn{opacity:.9}
}

/* Sound gespeichert, wartet nur auf erste Geste (Autoplay-Regel) */
.f2s-btn.pend{opacity:.95;color:var(--theme-accent,#f60) !important;
  animation:f2spulse 1.6s ease-in-out infinite}
@keyframes f2spulse{0%,100%{box-shadow:0 4px 18px rgba(0,0,0,.45)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--theme-accent,#f60) 18%, transparent), 0 4px 18px rgba(0,0,0,.45)}}
@media (prefers-reduced-motion: reduce){ .f2s-btn.pend{animation:none} }