/* =========================================
   MANI PLAYER – SAFE (Chrome/Edge Fix)
   ========================================= */

/* Variablen NICHT global: nur im Player, damit nichts im Template kollidiert */
.manni-card{
  --manni-accent: #FD7906;
  --manni-accent-2: #ff8a1f;
  --manni-accent-3: #e56600;
  --manni-gray-1: #F6F6F6;
  --manni-gray-2: #E5E5E5;
  --manni-gray-3: #E0E0E0;
  --manni-text: #2f2f2f;
}

/* Box sizing nur im Player */
.manni-card,
.manni-card *{
  box-sizing: border-box;
}

.manni-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  background:var(--manni-gray-1);
  border:1px solid var(--manni-gray-2);
  border-radius:10px;
  max-width:560px;
}

.manni-cover{flex:0 0 68px}
.manni-cover img{
  width:68px;
  height:68px;
  border-radius:10px;
  display:block;
}

.manni-meta{flex:1; min-width:180px}

.manni-title{
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  margin:0;
}

.manni-subtitle{
  font-size:11px;
  opacity:.7;
  margin:2px 0 6px;
}

.manni-progress{
  display:flex;
  align-items:center;
  gap:6px;
  margin:4px 0 6px;
}

.manni-time{
  font-size:11px;
  min-width:32px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  opacity:.8;
}

.manni-bar{
  flex:1;
  height:5px;
  background:var(--manni-gray-3);
  border-radius:999px;
  position:relative;
  cursor:pointer;
}

.manni-bar-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:var(--manni-accent);
  border-radius:999px;
}

.manni-controls{
  display:flex;
  align-items:center;
  gap:6px;
}

.manni-controls button{
  padding:4px 6px;
  border-radius:6px;
  border:1px solid #DADADA;
  background:#F9F9F9;
  cursor:pointer;
  line-height:0;
}

.manni-play{
  width:30px;
  height:30px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* SVG Icons */
.manni-ico{
  width:16px;
  height:16px;
  display:block;
  fill:currentColor;
  color:var(--manni-text);
}
.manni-play .manni-ico{ width:18px; height:18px; }

.manni-spacer{flex:1}
.manni-vol{width:60px}
.manni-meta audio{display:none}

/* Fokus */
.manni-controls button:focus-visible{
  outline:2px solid rgba(253,121,6,.35);
  outline-offset:2px;
  border-color:rgba(253,121,6,.45);
}

/* =========================================
   RANGE – Chrome/Edge FIX
   Wichtig: CLIPPING, sonst malt der Thumb-Shadow riesige Flächen
   ========================================= */

.manni-card input[type="range"]{
  width: 100%;
  display:block;

  /* Clip für den Fill-Trick */
  overflow: hidden;
  border-radius: 999px;

  /* Neutraler Track */
  background: var(--manni-gray-3);

  accent-color: var(--manni-accent);
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border: 0;
}

/* WebKit Track */
.manni-card input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: transparent; /* Track kommt vom input selbst */
}

/* WebKit Thumb + Fill (jetzt sauber geclippt) */
.manni-card input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--manni-accent);
  border: 2px solid #fff;
  margin-top: -4px;

  /* Fill links – aber durch overflow hidden GECLIPPT */
  box-shadow:
    -1000px 0 0 1000px var(--manni-accent),
    0 1px 3px rgba(0,0,0,.25);
}

/* Firefox */
.manni-card input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: var(--manni-gray-3);
}
.manni-card input[type="range"]::-moz-range-progress{
  height: 6px;
  border-radius: 999px;
  background: var(--manni-accent);
}
.manni-card input[type="range"]::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--manni-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Hover/Active */
@media (hover:hover){
  .manni-card input[type="range"]::-webkit-slider-thumb:hover{ background: var(--manni-accent-2); }
  .manni-card input[type="range"]:active::-webkit-slider-thumb{ background: var(--manni-accent-3); }
}

/* =========================================
   DESK HOVER
   ========================================= */

@media (hover:hover){
  .manni-card{
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .manni-card:hover{
    border-color:#d0d0d0;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
  }

  .manni-controls button{
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  }
  .manni-controls button:hover{
    background:#f0f0f0;
    border-color:rgba(253,121,6,.35);
    box-shadow:0 1px 4px rgba(0,0,0,.12);
  }
  .manni-controls button:hover .manni-ico{
    color: var(--manni-accent-3);
  }

  .manni-bar{
    transition: background-color .15s ease;
  }
  .manni-bar:hover{
    background:#d4d4d4;
  }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width:640px){
  .manni-card{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 480px){
  .manni-card{
    max-width: 100%;
    padding: 10px 10px;
    gap: 10px;
  }

  .manni-cover{flex:0 0 72px}
  .manni-cover img{
    width:72px;
    height:72px;
  }

  .manni-subtitle{ display:none; }

  .manni-title{
    font-size:15px;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .manni-time{ min-width: 30px; }

  .manni-controls button{
    padding: 8px 10px;
    border-radius: 10px;
  }

  .manni-play{
    width:40px;
    height:40px;
    border-radius: 12px;
  }

  .manni-vol{ display:none; }

  .manni-spacer{ flex: 0 0 6px; }
}

@media (max-width: 360px){
  .manni-card{
    flex-direction: column;
    align-items: flex-start;
  }
  .manni-cover{flex:0 0 auto}
  .manni-meta{width:100%}
}