:root{
  --bg:#0f0f10;
  --fg:#f7f7f7;
  --accent:#ff0033;
  --btn-play:#198754;
  --btn-stream:#0d6efd;
  --btn-video:#7b1fa2;
  --btn-audio:#9e9e9e;
  --btn-open:#616161;
  --bg-accent:#ff0d0d;
  --fg:#fff;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Helvetica,Arial,sans-serif;
  background-color: #ff0d0d; /* dein Rot */
  /*background-image: url("/static/bg.png");
  background-repeat: repeat;
  background-size: 6%;  /* ggf. feinjustieren (z.B. 200px 200px) */
  /*background-attachment: fixed;*/  /* optional: ruhiges Parallax-Gefühl */
}
.center{min-height:100%; display:grid; place-items:center; padding:2rem}
.card{
  /*width:min(860px, 92vw);*/ background:#111; color:var(--fg); border-radius:18px;
  box-shadow:0 14px 42px rgba(0,0,0,.35); padding:120px 1.2rem 1rem;
}
h1{margin:0 0 .8rem 0; font-size:1.6rem; font-weight:700}
.stack{display:grid; gap:1rem}
.input-wrap{position:relative}
.input-wrap input{
  width:100%; padding:0.85rem 2.6rem 0.85rem 0.9rem; border-radius:4px; border:1px solid #333;
  background:#0d0d0f; color:#fff; outline:none; font-size:1rem;
}
.input-wrap .clear{
  position:absolute; right:.4rem; top:.4rem; width:2rem; height:2rem; border-radius:4px;
  border:0; background:#2a2a2e; color:#ddd; cursor:pointer; font-size:1.2rem; line-height:0;
}

.buttons{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr; /* mobil: untereinander */
  gap:14px;
}

.buttons button{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  height:52px; width:100%;
  border:0; border-radius:8px;
  box-shadow:var(--shadow);
  color:#fff; font-weight:700;
  background:#1f1f22; cursor:pointer;
  transition:transform .06s ease, filter .12s ease;
  font-size: 1.2rem;
}

.buttons button span { font-size: 1.0rem }

.buttons button:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.buttons button:active{ transform:translateY(0); filter:brightness(.98); }

/* Farben wie im Original */
.buttons .play{ background:var(--btn-play); }
.buttons .stream{ background:var(--btn-stream); }
.buttons .video{ background:var(--btn-video); }
.buttons .audio{ background:var(--btn-audio); }
.buttons .open{ background:var(--btn-open); }

/* Desktop: nebeneinander (3 bzw. 4 Spalten, wenn open existiert) */
@media (min-width:1024px){
  .buttons{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
  }
  /* Wenn der 4. Button im DOM ist, fließen automatisch 4 Spalten.
     (Grid kann das dynamisch. Falls du erzwingen willst:) */
  .buttons:has(.open){
    grid-template-columns:repeat(5, minmax(0,1fr));
  }
}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:rgba(0,0,0,.88); color:#fff; padding:.6rem .9rem; border-radius:.6rem;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}
.toast.err{background:#b00020}
body.loading{cursor:progress}
.overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35);
}
.spinner{
  width:52px; height:52px; border:5px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .buttons{grid-template-columns:1fr 1fr}
}

/* Brand mit Icon über dem Titel, zentriert */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
}

/* Icon-Größen (mobil etwas kleiner, Desktop größer) */
.brand-logo{
  width:128px; height:auto; display:block;
  /* dezent glänzend ohne harten Halo */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  position:fixed; margin-top: -200px;

}
@media (min-width:1024px){
  .brand-logo{ width:128px; }
}

/* Titel mittig unter dem Icon */
.brand h1{
  margin:0;
  text-align:center;
}