/* Sonderaktionen zum Jahresende: zwei hochkante Videos nebeneinander, je mit
   eigenem Kaufknopf. Die Videos kommen aus der Video-Wall (624x1110, ohne Ton).
   Bewusst eine eigene Datei: So laesst sich die Sektion zeigen und wieder
   entfernen, ohne die grosse style.css anzufassen, an der mehrere Sitzungen
   arbeiten. Spaeter kann der Inhalt dort eingefuegt werden. */

/* „Sonderveranstaltungen“ ist ein einziges langes Wort. In der Anton-Schrift
   passt es auf schmalen Handys nicht in eine Zeile und schob die GANZE Seite
   nach rechts (375 statt 431 Pixel breit). Trennung erlauben, sonst laeuft die
   Seite ueber - das faellt nur bei genau dieser Ueberschrift auf. */
#specials-title {
    hyphens: auto;
    overflow-wrap: anywhere;
}
.specials-subtitle {
    margin: 12px 0 0;
    max-width: 640px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
}
/* Untereinander statt nebeneinander (Wunsch Bashaar, 15.10.2026): Jede
   Veranstaltung bekommt eine eigene volle Zeile. Nebeneinander wurden die
   Textspalten zu schmal und jede Veranstaltung wirkte wie eine Randnotiz. */
.specials-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 30px;
}
.special-card {
    display: grid;
    /* Volle Zeile je Veranstaltung: Das Video darf wieder groesser sein, der
       Text hat trotzdem reichlich Platz daneben. */
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
    padding: 22px;
    border: 4px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 8px 8px 0 var(--line);
}
/* Die Ausblick-Kachel (noch kein Verkauf) tritt bewusst zurueck: heller Rahmen,
   kein Schatten. Die beiden buchbaren Abende sollen die Blicke bekommen. */
.special-card-vorschau {
    box-shadow: none;
    border-style: dashed;
}
.special-card-vorschau .special-card-media img { opacity: .9; }
.special-card-media { margin: 0; }
.special-card-media img,
.special-card-media video {
    width: 100%;
    height: auto;
    display: block;
    border: 3px solid var(--line);
    border-radius: 12px;
    background: #181818;
}
/* Flex-Spalte, damit der Kaufknopf unten klebt: Dann stehen die Knoepfe beider
   Karten auf gleicher Hoehe, auch wenn die Texte unterschiedlich lang sind. */
.special-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Groessere Schrift seit 15.10.2026: Seit die Kacheln untereinander stehen,
   ist je Veranstaltung viel Platz frei - vorher wirkte der Text verloren.
   In der Vorschau ausprobiert und von Bashaar freigegeben. */
.special-card .small-pill {
    font-size: 14px;
    padding: 7px 16px;
}
.special-card-body h3 {
    margin: 12px 0 8px;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.1;
}
.special-card-when { margin: 0 0 14px; font-size: clamp(19px, 1.5vw, 24px); font-weight: 900; }
.special-card-text { margin: 0 0 12px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; font-weight: 600; }
.special-card-after { margin: 0 0 20px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; font-weight: 700; opacity: .8; }
/* nowrap: „Tickets sichern“ soll auf einer Zeile stehen, sonst wirkt der Knopf
   wie ein Textblock. Passt auch auf dem Handy in die volle Breite. */
.special-card-cta { display: inline-block; margin-top: auto; white-space: nowrap; }

/* Schmale Bildschirme: Video oben, Text darunter - nebeneinander wird beides zu eng. */
@media (max-width: 560px) {
    .special-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }
    .special-card-media { max-width: 240px; margin-inline: auto; }
    .special-card-body h3 { font-size: 26px; }
    .special-card-when { font-size: 18px; }
    .special-card-text { font-size: 16px; }
    .special-card-after { font-size: 15px; }
    .special-card-cta { width: 100%; text-align: center; }
}