/* Status-Badge am Termin, Familie 7 (Ticket mit Kerben).
   Quelle und Begruendung der Werte, samt gerechneter Kontraste:
   impact/docs/status-label-2026-09-04/status-label.css

   Bewusst eine echte Datei und kein Inline-Style: WP Rockets Used CSS leert
   jeden Inline-Style, die Selektoren kaemen auf gecachten Seiten nie an. */

.impact-status--ticket {
  --st-kerbe: 0.38em;
  --st-luft: 0.5em;

  display: inline-flex;
  align-items: center;
  /* In einem Flex-Stapel (Kachelansicht, .impact-edbs-meta-stack) wuerde das
     Badge sonst auf die volle Kartenbreite gestreckt. fit-content deckt
     zusaetzlich Blockkontexte ab. */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding-block: 4px;
  padding-inline: calc(var(--st-kerbe) * 2 + var(--st-luft));
  border-radius: 4px;

  background: var(--st-fuellung);
  color: var(--st-tinte);

  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;

  -webkit-mask:
    radial-gradient(circle var(--st-kerbe) at 0 50%, transparent 98%, #000),
    radial-gradient(circle var(--st-kerbe) at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite: source-in;   /* WebKit-Altsyntax, entspricht intersect */
          mask:
    radial-gradient(circle var(--st-kerbe) at 0 50%, transparent 98%, #000) intersect,
    radial-gradient(circle var(--st-kerbe) at 100% 50%, transparent 98%, #000);
}

/* Farbe traegt die Verfuegbarkeit: Teal heisst geht, Orange heisst knapp,
   Grau heisst zu, Blau ist neutrale Auskunft. Ausgebucht ist nicht rot, ein
   voller Kurs ist keine Fehlermeldung. */
/* Gilt fuer beide Formen: das Ticket in Listen und Metaspalten, die
   Eckbanderole auf Karten. Sonst faende das Band keine Fuellung und stuende
   durchsichtig auf der Karte. */
.impact-status.is-stattfindend,
.impact-status-ecke__band.is-stattfindend { --st-fuellung: #2a6259; --st-tinte: #ffffff; }
.impact-status.is-fruehbucher,
.impact-status-ecke__band.is-fruehbucher  { --st-fuellung: #2a6259; --st-tinte: #ffffff; }
.impact-status.is-knapp,
.impact-status-ecke__band.is-knapp        { --st-fuellung: #a84f12; --st-tinte: #ffffff; }
.impact-status.is-ausgebucht,
.impact-status-ecke__band.is-ausgebucht   { --st-fuellung: #4a5a66; --st-tinte: #ffffff; }
.impact-status.is-warteliste,
.impact-status-ecke__band.is-warteliste   { --st-fuellung: #4a5a66; --st-tinte: #ffffff; }
.impact-status.is-bald,
.impact-status-ecke__band.is-bald         { --st-fuellung: #2f6288; --st-tinte: #ffffff; }

/* Anmeldung offen ist der Normalzustand: 65 von 75 kuenftigen Terminen liegen
   unter ihrer Mindestzahl (gemessen 04.09.2026). Als gefuelltes Badge wuerde
   es die seltenen und wichtigen erschlagen, also helle Flaeche mit dunkler
   Schrift, Kontrast 8.00 zu 1. Die Kante haelt es auf weissen Karten
   sichtbar; outline statt border, damit sich die Groesse nicht aendert. */
.impact-status.is-offen,
.impact-status-ecke__band.is-offen        { --st-fuellung: #edf5fa; --st-tinte: #1b4e72;
                                            outline: 1px solid #2f6288; outline-offset: -1px; }

@media print {
  .impact-status--ticket {
    background: transparent;
    color: #000;
    border: 1px solid #000;
    -webkit-mask: none;
            mask: none;
  }
}

/* ==========================================================================
   Familie 9: Eckbanderole
   ==========================================================================
   Uebernommen aus dem Katalog (impact/docs/status-label-2026-09-04/status-label.css),
   Werte und Kontraste dort begruendet. Sie sitzt auf Karten, die einen eigenen
   Koerper haben: Teaser-Kacheln und Programm-Karten. In Listenzeilen bleibt es
   beim Ticket, dort gibt es keine Ecke, in die etwas kleben koennte.

   Geometrie statt geratener Pixel: die Banderole liegt in einem Quadrat von
   --st-ecke Kantenlaenge, buendig in der Kartenecke. Das Band liegt mittig
   darin und dreht 45 Grad, sein Mittelpunkt sitzt auf der Winkelhalbierenden.
   Damit ist der sichtbare Ausschnitt automatisch mittig und rechnerisch so
   lang wie die Diagonale des Quadrats: --st-ecke * Wurzel(2). Bei 116px
   Kante sind das 164px, der laengste Status ("Letzte Plätze") misst 99px.
   Das Band selbst ist doppelt so breit wie das Feld, damit es an beiden
   Seiten sicher herauslaeuft und nicht als Stummel endet.

     <div class="impact-status-ecke">
       <span class="impact-status-ecke__band is-knapp">Letzte Plätze</span>
     </div>
   ========================================================================== */

.impact-status-ecke {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: var(--st-ecke);
  height: var(--st-ecke);
  overflow: hidden;
  pointer-events: none;   /* verdeckt keinen Link darunter */
  z-index: 2;
}

.impact-status-ecke__band {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 200%;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;

  display: block;
  padding-block: 5px;
  text-align: center;

  background: var(--st-fuellung);
  color: var(--st-tinte);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
  white-space: nowrap;

  box-shadow: 0 1px 3px rgb(43 61 74 / 0.18);
}

/* Linke Ecke. Die Drehrichtung kippt, sonst steht die Schrift auf dem Kopf.
   Programm-Karten brauchen das: rechts oben klebt auf schmalen Schirmen das
   Stufen-Icon (.impact-edbs-program-icon), die Banderole wuerde es zudecken. */
.impact-status-ecke--links {
  inset-inline-end: auto;
  inset-inline-start: 0;
}
.impact-status-ecke--links .impact-status-ecke__band {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Schmale Karten bekommen ein kleineres Feld. Gemessen wird die Karte selbst,
   nicht das Fenster: dieselbe Karte ist im Raster schmal und in der Spalte
   breit. Die Grenze liegt bei 320px, weil die Programm-Karten auf dem Handy
   282px breit sind (gemessen bei 390px Schirm) und ein 116px-Feld dort ein
   Drittel der Karte belegt. Bei 84px Kante bleiben 118px nutzbare Breite, das
   traegt den laengsten Status ("Letzte Plätze", 92px bei 11px Schrift). */
@container impact-karte (max-width: 320px) {
  .impact-status-ecke { --st-ecke: 84px; }
  .impact-status-ecke__band { font-size: 11px; letter-spacing: 0.03em; }
}

/* Die Karte, auf der die Banderole sitzt.
   --st-ecke steht hier und nicht am Eckfeld, damit auch das Karten-CSS damit
   rechnen kann, wenn es Platz fuer die Banderole schafft.
   overflow:clip haelt sie innerhalb der abgerundeten Kartenecke. */
.impact-status-traeger {
  --st-ecke: 116px;
  position: relative;
  overflow: clip;
  container: impact-karte / inline-size;
}

/* Kein Freihalter-Float.
   Der Katalog haelt den Platz unter der Banderole mit einem Float frei, dessen
   shape-outside die Diagonale nachzeichnet. Auf unseren Karten wirkt der
   nicht: sowohl die Teaser-Kachel als auch die Programm-Karte sind
   Flex-Stapel, ein Float wird dort zu einem weiteren Flex-Kind und streckt
   die Karte nur um seine eigene Hoehe (gemessen 04.09.2026: 402 auf 480px,
   363 auf 455px). Platz macht stattdessen ein Innenabstand an den Zeilen, die
   oben an die Banderole stossen; er steht im jeweiligen Karten-CSS, weil nur
   die Karte ihre eigene Zeilenfolge kennt. */

@media print {
  .impact-status-ecke__band {
    box-shadow: none;
    border: 1px solid #000;
  }
}