/* =====================================================================
   Notch (Aussparung) oben links – mit abgerundeter Innenecke
   ---------------------------------------------------------------------
   Schneidet oben links eine echte Ecke aus dem Feld heraus, sodass der
   Seitenhintergrund durchscheint. Funktioniert auch bei Feldern mit
   Bild-/Verlaufshintergrund (z.B. dem Cover-Blur), weil hier wirklich
   geclippt und nicht überdeckt wird.

   VERWENDUNG
   1. Klasse .has-notch an das Feld hängen.
   2. Pro Feld die Größe über die drei Variablen setzen:
        --notch-w : Breite der Aussparung
        --notch-h : Höhe der Aussparung
        --notch-r : Radius der Innenecke
   3. Den Text ("NOW", "SONG VOTING", …) getrennt in die Aussparung
      setzen – siehe .notch-label unten.

   Das border-radius des Feldes bleibt unabhängig davon erhalten.

   WIE ES FUNKTIONIERT
   Vier Mask-Ebenen: drei bauen die Notch-Form zusammen (zwei Rechtecke
   + ein Viertelkreis für die runde Innenecke), die vierte ist die volle
   Fläche. Über "exclude" wird die Notch-Form von der Fläche abgezogen.
   ===================================================================== */

.has-notch {
  /* Standardwerte – pro Feld überschreiben */
  --notch-w: 100%;
  --notch-h: 15px;
  --notch-r: 15px;

  -webkit-mask-image:
    /* 1) volle Fläche (wird unten per exclude abgezogen) */
    linear-gradient(#000, #000),
    /* 2) Viertelkreis = runde Innenecke */
    radial-gradient(
      circle var(--notch-r)
      at calc(var(--notch-w) - var(--notch-r)) calc(var(--notch-h) - var(--notch-r)),
      #000 99%, transparent 100%
    ),
    /* 3) Rechteck, links vom Radius */
    linear-gradient(#000, #000),
    /* 4) Rechteck, oberhalb des Radius */
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(#000, #000),
    radial-gradient(
      circle var(--notch-r)
      at calc(var(--notch-w) - var(--notch-r)) calc(var(--notch-h) - var(--notch-r)),
      #000 99%, transparent 100%
    ),
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);

  -webkit-mask-size:
    100% 100%,
    100% 100%,
    calc(var(--notch-w) - var(--notch-r)) var(--notch-h),
    var(--notch-w) calc(var(--notch-h) - var(--notch-r));
  mask-size:
    100% 100%,
    100% 100%,
    calc(var(--notch-w) - var(--notch-r)) var(--notch-h),
    var(--notch-w) calc(var(--notch-h) - var(--notch-r));

  -webkit-mask-position: 0 0, 0 0, 0 0, 0 0;
  mask-position: 0 0, 0 0, 0 0, 0 0;

  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  /* volle Fläche minus Notch-Form */
  -webkit-mask-composite: xor, source-over, source-over, source-over;
  mask-composite: exclude, add, add, add;
}

/* Feste Breite pro Feld – Labels sind statische Texte, nowrap verhindert
   Umbrüche, also ist die Breite auf jedem Gerät konstant. */
.player_item.has-notch      { --notch-w: 115px; }   /* NOW */

@media only screen and (max-width: 1200px){
.player_item.has-notch      { --notch-w: 95px; }   /* NOW */
}

/* ---------------------------------------------------------------------
   Die Breite (--notch-w) setzt notch.js automatisch anhand der echten
   Textbreite des Labels – pro Feld ist also nichts festzulegen. Nur die
   Höhe und den Innenradius kannst du hier global anpassen (siehe oben in
   .has-notch) oder pro Feld überschreiben, z.B.:
     .maxradio_vote.has-notch { --notch-h: 46px; }
   --------------------------------------------------------------------- */

/* Umgebender Container: nötig, damit das Label absolut positioniert
   an der Ecke des Feldes sitzt. */
.notch-wrap {
  position: relative;
}

/* ---------------------------------------------------------------------
   Das Label, das IN der Aussparung sitzt.
   Als eigenes Element vor dem Feld platzieren (nicht im maskierten Feld –
   die Mask würde es mit wegschneiden).
   --------------------------------------------------------------------- */
.notch-label {
  position: relative;
  top: 15px;
  line-height: 25px;
  text-transform: uppercase;
  text-align: left;
  padding: 5px 20px 5px 0;
  font-size: 25px;
  font-weight: 700;
  display: table;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 1;
}

@media only screen and (max-width: 1200px){
.notch-label {
  font-size: 20px;
}
}