/*
 * m1.css: Design-Fundament von musical1.de (Sven, 28.09.2026), Startpunkt
 * fuer den schrittweisen Relaunch. Oben die Tokens, darunter Komponenten
 * mit Praefix m1-. Keine Regel greift auf Klassen des Themes zu, und keine
 * Komponente erbt bewusst etwas aus style.css: was sie braucht, setzt sie
 * selbst (Listen ohne Punkte, Links ohne Unterstrich, eigene Schrift).
 *
 * Reihenfolge: nach style.css und nach terminmodul.css geladen
 * (functions.php), damit die Komponenten gewinnen und die Variablen des
 * Terminmoduls (--m1tm-*) unten auf die Tokens gemappt werden koennen.
 *
 * Mobil zuerst; Desktop ab 935px wie im Rest der Seite.
 */

/* ============================================================
   Tokens
   ============================================================ */
:root {
    /* Farben: Rot und Schwarz aus image/musical1-logo.svg, Gelb der
       Ticket-Buttons; Grau angeglichen an das Terminmodul. */
    --m1-color-primary: #ba212b;
    --m1-color-primary-dark: #9a1b24;
    --m1-color-ink: #1f1c21;
    --m1-color-text: #1f1c21;
    --m1-color-text-muted: #666;
    --m1-color-text-soft: #8a8a8a;
    --m1-color-accent: #fcd563;
    --m1-color-accent-dark: #f2c53f;
    --m1-color-surface: #fff;
    --m1-color-surface-alt: #f2f3f5;
    --m1-color-tile: #f6f6f7;
    --m1-color-tile-line: #ececec;
    /* Flaechen-Buttons zum Nachladen (Sven, 30.09.2026) */
    --m1-color-control: #f5f5f5;
    --m1-color-control-hover: #ebebeb;
    --m1-color-control-line: #d8d8d8;
    --m1-color-line: #e3e3e3;
    --m1-color-border: #d9d9d9;
    --m1-color-focus: #1f1c21;
    /* Aelterer Name aus plugins/m1-data/assets/css/m1-data-frontend.css,
       dort auf der alten Terminliste im Einsatz; jetzt dieselbe Quelle. */
    --m1-primary: var(--m1-color-primary);

    /* Schrift: Systemschrift wie im Terminmodul, feste Skala. */
    --m1-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --m1-text-2xs: 11px;
    --m1-text-xs: 13px;
    --m1-text-sm: 15px;
    --m1-text-md: 17px;
    --m1-text-lg: 20px;
    --m1-text-xl: 24px;
    --m1-text-2xl: 30px;
    --m1-leading: 1.5;
    --m1-leading-tight: 1.2;

    /* Form */
    --m1-radius: 8px;
    --m1-space-1: 4px;
    --m1-space-2: 8px;
    --m1-space-3: 12px;
    --m1-space-4: 16px;
    --m1-space-5: 24px;
    --m1-space-6: 32px;
    --m1-space-7: 48px;
    --m1-space-8: 72px;
    --m1-tap: 44px;

    /* Abstand zwischen den Abschnitten (Sven, 30.09.2026): mobil 48 px,
       ab 935 px 72 px (je das 1,5-fache des bisherigen Werts) */
    --m1-section-gap: var(--m1-space-7);
    /* Hoechstbreite fuer Fliesstext: Einleitung oben und Seitentext unten,
       linksbuendig an der Inhaltskante (Sven, 30.09.2026) */
    --m1-text-max: 800px;
    /* Abstand von der Navigation zum Seitenkopf (Sven, 30.09.2026) */
    --m1-page-top: var(--m1-space-6);

    /* Raster-Abstaende (Sven, 30.09.2026): eine Quelle fuer alle Kartenraster
       (Beliebte Musicals, Angebote, Magazin) und die Staedtekacheln. Mobil
       12 px zwischen den Spalten, ab 600 px 16 px; zwischen Kartenzeilen mit
       Bild und Titel 16 bzw. 24 px, zwischen Kacheln ohne Text wie Spalten. */
    --m1-grid-gap-x: var(--m1-space-3);
    --m1-grid-gap-y: var(--m1-space-4);
    --m1-tile-gap: var(--m1-space-3);
}

@media (min-width: 935px) {
    :root {
        --m1-section-gap: var(--m1-space-8);
        --m1-page-top: var(--m1-space-7);
    }
}

@media (min-width: 600px) {
    :root {
        --m1-grid-gap-x: var(--m1-space-4);
        --m1-grid-gap-y: var(--m1-space-5);
        --m1-tile-gap: var(--m1-space-4);
    }
}

/* Terminmodul-Variablen auf die Tokens mappen: Ticketsuche, Menue und
   Startseite laufen dann aus einer Quelle. */
.m1tm {
    --m1tm-text: var(--m1-color-text);
    --m1tm-text-grau: var(--m1-color-text-muted);
    --m1tm-grau: var(--m1-color-surface-alt);
    --m1tm-linie: var(--m1-color-line);
    --m1tm-rand: var(--m1-color-border);
    --m1tm-radius: var(--m1-radius);
    --m1tm-schrift: var(--m1-font);
}

/* ============================================================
   Grundlage fuer alles mit m1-Praefix
   ============================================================ */
.m1 {
    font-family: var(--m1-font);
    font-size: var(--m1-text-sm);
    line-height: var(--m1-leading);
    color: var(--m1-color-text);
}

.m1 *,
.m1 *::before,
.m1 *::after {
    box-sizing: border-box;
}

/* Das Theme setzt Ueberschriften und Absaetze mit !important (Georgia,
   Gewicht 300, 2rem, p 1rem/1.7rem). Die Komponenten muessen dagegenhalten,
   sonst erben sie doch; deshalb hier ebenfalls !important, nur unter .m1. */
.m1 h1,
.m1 h2,
.m1 h3 {
    margin: 0;
    font-family: var(--m1-font) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: var(--m1-leading-tight) !important;
    color: var(--m1-color-ink) !important;
    text-wrap: balance;
}

.m1 h1 a,
.m1 h2 a,
.m1 h3 a {
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.m1 h1 {
    font-size: var(--m1-text-xl) !important;
}

.m1 h2 {
    font-size: var(--m1-text-lg) !important;
}

.m1 h3 {
    font-size: var(--m1-text-md) !important;
}

.m1 p {
    margin: 0;
    font-size: var(--m1-text-sm) !important;
    line-height: var(--m1-leading) !important;
}

/* Das Theme gibt Listen im Inhalt Abstand (!important) und jedem li ein
   graues Quadrat davor (.content_inner ul li::before). */
.m1 ul,
.m1 ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .m1.m1: gleiche Spezifitaet wie .content_inner ul:not(.sup-info) li,
   damit die spaetere Regel gewinnt. */
.m1.m1 ul li,
.m1.m1 ol li {
    margin: 0 !important;
    padding: 0;
    position: static;
    line-height: inherit;
}

.m1.m1 ul li::before,
.m1.m1 ol li::before {
    content: none !important;
}

.m1 a {
    color: inherit;
    text-decoration: none;
}

/* Das Theme unterstreicht und faerbt jeden Link beim Hover mit !important
   (a:hover, a:focus in style.css). Unter .m1 steuert jede Komponente ihren
   Hover selbst, ohne Unterstrich. */
.m1 a:hover,
.m1 a:focus {
    color: inherit !important;
    text-decoration: none !important;
}

/* Wo eine Komponente beim Hover eine eigene Farbe hat, setzt sie diese
   deshalb ebenfalls mit !important (Link, roter Button). */

.m1 a:focus-visible,
.m1 button:focus-visible,
.m1 summary:focus-visible {
    outline: 2px solid var(--m1-color-focus);
    outline-offset: 2px;
}

.m1 img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Abschnitt: Kopfzeile mit Titel links, Link rechts
   ============================================================ */
.m1-section {
    margin: 0 0 var(--m1-section-gap);
}

/* Ueberschrift und Link (Sven, 30.09.2026): Die Ueberschrift darf schmaler
   werden und bricht in gleich lange Zeilen um, der Link steht auf der
   Grundlinie ihrer letzten Zeile. Bleiben fuer die Ueberschrift weniger als
   10 Schrifthoehen (kurze Titel wie "Beliebte Musicals" passen dann
   noch in eine Zeile), steht der Link rechts darunter. */
.m1-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-items: last baseline;
    justify-content: space-between;
    gap: var(--m1-space-1) var(--m1-space-3);
    margin: 0 0 var(--m1-space-4);
}

.m1-section-head > h2 {
    flex: 1 1 10em;
    text-wrap: balance;
}

.m1-section-head .m1-link {
    margin-left: auto;
}

.m1 .m1-section-lead {
    margin: var(--m1-space-2) 0 0;
    color: var(--m1-color-text-muted);
}

/* Link mit Pfeil, grau, rot im Hover (wie im Menue) */
.m1-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--m1-color-text-muted);
    font-size: var(--m1-text-sm);
    white-space: nowrap;
}

.m1 .m1-link:hover,
.m1 .m1-link:focus {
    color: var(--m1-color-primary) !important;
}

.m1-link svg {
    width: 14px;
    height: 14px;
}

/* Seitenkopf */
/* Seitenkopf: oben Luft zur Navigation, unten der Abschnittsabstand wie
   zwischen allen Abschnitten (Sven, 30.09.2026) */
.m1-page-head {
    margin: var(--m1-page-top) 0 var(--m1-section-gap);
}

.m1-page-head p {
    margin-top: var(--m1-space-2);
    color: var(--m1-color-text-muted);
    max-width: var(--m1-text-max);
}

/* ============================================================
   Buttons
   ============================================================ */
.m1-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m1-space-2);
    min-height: var(--m1-tap);
    padding: 0 var(--m1-space-4);
    border: 1px solid var(--m1-color-border);
    border-radius: var(--m1-radius);
    background: var(--m1-color-surface);
    color: var(--m1-color-text);
    font: inherit;
    font-size: var(--m1-text-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.m1-btn:hover,
.m1-btn:focus {
    background: var(--m1-color-surface-alt);
    color: var(--m1-color-text);
}

/* .m1 davor: .m1 a setzt color inherit mit hoeherer Spezifitaet */
.m1 .m1-btn-primary {
    border-color: var(--m1-color-primary);
    background: var(--m1-color-primary);
    color: #fff;
}

.m1 .m1-btn-primary:hover,
.m1 .m1-btn-primary:focus {
    border-color: var(--m1-color-primary-dark);
    background: var(--m1-color-primary-dark);
    color: #fff !important;
}

/* Goldener Button fuer Links zu externen Buchungsanbietern (Musicalreisen,
   Sven 30.09.2026) */
.m1 .m1-btn-accent {
    border-color: var(--m1-color-accent);
    background: var(--m1-color-accent);
    color: var(--m1-color-ink);
}

.m1 .m1-btn-accent:hover,
.m1 .m1-btn-accent:focus {
    border-color: var(--m1-color-accent-dark);
    background: var(--m1-color-accent-dark);
    color: var(--m1-color-ink) !important;
}

/* Grosser Button ueber die volle Breite (Spielplan) */
.m1-btn-block {
    display: flex;
    width: 100%;
    min-height: 52px;
    border-radius: 10px;
    font-size: var(--m1-text-md);
    font-weight: 600;
}

/* ============================================================
   Karten (grosse Musical-Kacheln)
   ============================================================ */
.m1-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m1-grid-gap-y) var(--m1-grid-gap-x);
}

.m1-card {
    min-width: 0;
}

.m1-card > a {
    display: block;
}

.m1-card-media {
    position: relative;
    display: block;
    margin: 0 0 var(--m1-space-2);
    overflow: hidden;
    border-radius: var(--m1-radius);
}

/* Keyvisual 16:9 (Sven, 28.09.2026). Ein altes quadratisches Logo (is-fit)
   wird nicht angeschnitten, sondern ganz auf dunkler Flaeche gezeigt. */
.m1-card-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Chip "Premium-Partner*" oben links im Bild (Sven, 01.10.2026): hell und
   neutral, damit er sich von den roten Rabatt-Chips unterscheidet */
.m1-card-badge {
    position: absolute;
    top: var(--m1-space-1);
    left: var(--m1-space-1);
    z-index: 1;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--m1-color-ink);
    font-size: var(--m1-text-2xs);
    font-weight: 600;
    line-height: var(--m1-leading-tight);
}

@media (min-width: 600px) {
    .m1-card-badge {
        top: var(--m1-space-2);
        left: var(--m1-space-2);
        padding: var(--m1-space-1) var(--m1-space-2);
        font-size: var(--m1-text-xs);
    }
}

.m1-card-media.is-fit {
    background: var(--m1-color-ink);
}

.m1-card-media.is-fit img {
    object-fit: contain;
    padding: 4%;
}

/* Text links, Chevron rechts */
.m1-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--m1-space-2);
}

.m1-card-text {
    min-width: 0;
}

.m1-card-body svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--m1-color-text-soft);
}

/* Hover der Karte: Bild zoomt leicht, Titel und Pfeil werden rot, kein
   Unterstrich (Sven, 29.09.2026) */
.m1-card > a:hover .m1-card-media img,
.m1-card > a:focus-visible .m1-card-media img {
    transform: scale(1.04);
}

.m1-card > a:hover .m1-card-title,
.m1-card > a:focus-visible .m1-card-title,
.m1-card > a:hover .m1-card-body svg,
.m1-card > a:focus-visible .m1-card-body svg {
    color: var(--m1-color-primary);
}

.m1-card-title {
    display: block;
    font-size: var(--m1-text-sm);
    font-weight: 700;
    line-height: var(--m1-leading-tight);
    overflow-wrap: anywhere;
}

.m1-card-meta {
    display: block;
    margin-top: var(--m1-space-1);
    color: var(--m1-color-text-muted);
    font-size: var(--m1-text-xs);
}

/* ============================================================
   Modul-Kasten (Spielplan der Startseite, Sven 29.09.2026): hellgrauer
   Kasten, Eyebrow, Ueberschrift, Satz, bis zu zwei Kennzahlen mit
   Trennlinie, roter Button; mobil untereinander, Desktop zweispaltig
   ============================================================ */
.m1-module {
    padding: var(--m1-space-5);
    border: 1px solid var(--m1-color-line);
    border-radius: 14px;
    background: #f8f8f9;
}

/* Kennzahlen: Titel, grosse rote Zahl, Einheit, Pfeil rechts */
.m1 .m1-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--m1-space-5) 0;
}

.m1 .m1-stats-single {
    grid-template-columns: minmax(0, 1fr);
}

.m1-stats > li {
    display: flex;
    min-width: 0;
}

.m1-stats > li + li {
    border-left: 1px solid var(--m1-color-line);
}

.m1-stat-link {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

/* Platz fuer den Pfeil nur neben Zahl und Einheit, der Titel darf die
   ganze Breite nutzen und bricht so nicht um */
.m1-stat-value,
.m1-stat-unit {
    padding-right: var(--m1-space-7);
}

.m1-stats > li + li .m1-stat-link {
    padding-left: var(--m1-space-4);
}

.m1-stat-label {
    font-size: var(--m1-text-sm);
    font-weight: 700;
    line-height: var(--m1-leading-tight);
    color: var(--m1-color-ink);
    white-space: nowrap;
}

.m1-stat-value {
    margin-top: var(--m1-space-2);
    font-size: var(--m1-text-2xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--m1-color-primary);
    font-variant-numeric: tabular-nums;
}

.m1-stat-unit {
    font-size: var(--m1-text-sm);
    color: var(--m1-color-text-muted);
}

.m1-stat-link > svg {
    position: absolute;
    top: 50%;
    right: var(--m1-space-5);
    width: 18px;
    height: 18px;
    color: var(--m1-color-text-soft);
}

.m1-stat-link:hover .m1-stat-label,
.m1-stat-link:focus-visible .m1-stat-label {
    color: var(--m1-color-primary);
}

/* Ohne Kennzahlen folgt der Button direkt auf den Satz */
.m1-module-text + .m1-btn-block {
    margin-top: var(--m1-space-5);
}

/* Sehr schmale Handys unter 360 px (Sven, 01.10.2026): Kennzahlen
   untereinander statt nebeneinander, Kasten und Button etwas kompakter,
   sonst laufen die Titel ineinander und der Button bricht dreizeilig um. */
@media (max-width: 359px) {
    .m1-module {
        padding: var(--m1-space-4);
    }

    .m1 .m1-stats {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--m1-space-4);
    }

    .m1-stats > li + li {
        padding-top: var(--m1-space-4);
        border-top: 1px solid var(--m1-color-line);
        border-left: 0;
    }

    .m1-stats > li + li .m1-stat-link {
        padding-left: 0;
    }

    .m1-btn-block {
        font-size: var(--m1-text-sm);
    }
}

/* ============================================================
   Accordion ohne Kasten (Jahresuebersicht, Sven 29.09.2026): Gruppen
   untereinander mit Trennlinien, Titel und Untertitel links, Anzahl und
   Pfeil rechts; die ganze Zeile klappt auf, alle anfangs zu, mehrere
   duerfen gleichzeitig offen sein
   ============================================================ */
.m1-accordions {
    margin-top: var(--m1-space-5);
    border-top: 1px solid var(--m1-color-line);
}

.m1-accordion {
    border-bottom: 1px solid var(--m1-color-line);
}

.m1-accordion > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "title count icon" "sub count icon";
    align-items: center;
    column-gap: var(--m1-space-4);
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
}

.m1-accordion > summary::-webkit-details-marker {
    display: none;
}

.m1-accordion-title {
    grid-area: title;
    color: var(--m1-color-ink);
    font-size: var(--m1-text-md);
    font-weight: 700;
    line-height: var(--m1-leading-tight);
}

.m1-accordion-sub {
    grid-area: sub;
    margin-top: var(--m1-space-1);
    color: var(--m1-color-text-muted);
    font-size: var(--m1-text-sm);
}

.m1-accordion-count {
    grid-area: count;
    color: var(--m1-color-text-muted);
    font-size: var(--m1-text-sm);
    white-space: nowrap;
}

/* Pfeil nach unten, offen nach oben */
.m1-accordion > summary > svg {
    grid-area: icon;
    width: 20px;
    height: 20px;
    color: var(--m1-color-text-soft);
    transform: rotate(90deg);
    transition: transform 0.2s;
}

.m1-accordion[open] > summary > svg {
    transform: rotate(-90deg);
}

/* Offen: Titel rot, Kopf ohne Abstand nach unten, 16 px bis zum ersten
   Bild (Innenabstand der Zeile) */
/* Titel und Pfeil rot: geoeffnet, beim Ueberfahren und beim Tastaturfokus
   gleich (Sven, 30.09.2026) */
.m1-accordion[open] .m1-accordion-title,
.m1-accordion > summary:hover .m1-accordion-title,
.m1-accordion > summary:focus-visible .m1-accordion-title,
.m1-accordion[open] > summary > svg,
.m1-accordion > summary:hover > svg,
.m1-accordion > summary:focus-visible > svg {
    color: var(--m1-color-primary);
}

.m1-accordion[open] > summary {
    padding-bottom: 0;
}

/* Inhalt eines Akkordeons mit Fliesstext (Startseitentext) */
.m1-accordion-body {
    padding: var(--m1-space-4) 0 var(--m1-space-5);
}

/* Seitentext der Startseite: Trennlinie darueber, Abstand davor und danach
   wie zwischen den Abschnitten (Sven, 30.09.2026) */
.m1.m1-text {
    padding-top: var(--m1-section-gap);
    border-top: 1px solid var(--m1-color-line);
}

/* H2, Einleitung, Akkordeon-Kopf und Inhalt gemeinsam begrenzt, die
   Trennlinie darueber bleibt in voller Breite */
.m1.m1-text > * {
    max-width: var(--m1-text-max);
}

/* Fliesstext (Sven, 30.09.2026): Startseitentext und Akkordeon-Inhalte.
   Grauer Text wie die Einleitungen der Abschnitte, Links nur rot,
   Abstaende aus der Skala; nummerierte Listen wieder mit Ziffern (m1 setzt
   Listen sonst zurueck). */
.m1-prose,
.m1-text > p {
    color: var(--m1-color-text-muted);
}

.m1 .m1-prose p + p,
.m1 .m1-prose p + ol,
.m1 .m1-prose ol + p {
    margin-top: var(--m1-space-3);
}

.m1 .m1-prose h3 {
    margin: var(--m1-space-6) 0 var(--m1-space-2);
}

.m1 .m1-prose > h3:first-child {
    margin-top: 0;
}

.m1.m1-text > h2 + p {
    margin-top: var(--m1-space-3);
}

/* Links im Fliesstext rot und dezent unterstrichen (Sven, 01.10.2026),
   damit sie nicht nur an der Farbe erkennbar sind; beim Ueberfahren
   dunkler und kraeftiger. Einzelwerte mit !important, weil .m1 a:hover
   und :focus oben die Kurzschreibweise text-decoration mit !important
   setzen. */
.m1 .m1-prose a,
.m1.m1-text > p a {
    color: var(--m1-color-primary);
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px;
}

.m1 .m1-prose a:hover,
.m1 .m1-prose a:focus-visible,
.m1.m1-text > p a:hover,
.m1.m1-text > p a:focus-visible {
    color: var(--m1-color-primary-dark) !important;
    text-decoration-thickness: 2px !important;
}

.m1.m1 .m1-prose ol {
    margin: var(--m1-space-3) 0 0;
    padding-left: var(--m1-space-5);
    list-style: decimal;
}

.m1.m1 .m1-prose ol li {
    margin: 0 0 var(--m1-space-1) !important;
    padding-left: var(--m1-space-1);
    font-size: var(--m1-text-sm);
    line-height: var(--m1-leading);
}

/* ============================================================
   Zeilenlisten: quadratisches Bild, Name, Ort, Zeitraum, Pfeil; mobil
   feine Linien zwischen den Zeilen, am Desktop zwei Spalten ohne Linien
   ============================================================ */
.m1 .m1-rows {
    display: grid;
    margin: 0;
}

.m1-row {
    border-top: 1px solid var(--m1-color-line);
}

.m1-rows > .m1-row:first-child {
    border-top: 0;
}

/* Liste direkt unter einer Abschnittsueberschrift (Weitere Musicals) */
.m1 .m1-rows-section {
    margin-top: var(--m1-space-4);
}

.m1-row > a {
    display: flex;
    align-items: center;
    gap: var(--m1-space-4);
    min-height: var(--m1-tap);
    padding: var(--m1-space-4) 0;
}

/* Bild 16:9 (Keyvisual, Sven 29.09.2026), ohne Hintergrund. Ein
   quadratisches Logo ohne Keyvisual (is-fit) steht mittig in der Flaeche,
   mit eigenen runden Ecken. Nur quadratische Bilder (Feed): m1-row-media-square. */
.m1-row-media {
    display: flex;
    justify-content: center;
    flex: none;
    width: 112px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--m1-radius);
}

.m1-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m1-row-media.is-fit {
    border-radius: 0;
}

.m1-row-media.is-fit img {
    width: auto;
    max-width: 100%;
    border-radius: var(--m1-radius);
}

.m1-row-media-square {
    width: 72px;
    aspect-ratio: 1;
}

.m1-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.m1-row-title {
    display: block;
    color: var(--m1-color-ink);
    font-size: var(--m1-text-md);
    font-weight: 700;
    line-height: var(--m1-leading-tight);
    overflow-wrap: anywhere;
}

/* Ort und Zeitraum je eine Zeile, gleich gross und grau, eng beieinander */
.m1-row-meta {
    display: block;
    margin-top: var(--m1-space-1);
    color: var(--m1-color-text-muted);
    font-size: var(--m1-text-sm);
    line-height: var(--m1-leading-tight);
}

.m1-row-meta + .m1-row-meta {
    margin-top: 2px;
}

.m1-row > a > svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--m1-color-text-soft);
}

.m1-row > a:hover .m1-row-title,
.m1-row > a:focus-visible .m1-row-title {
    color: var(--m1-color-primary);
}

/* Verborgene Zeilen: der Server blendet vorab aus (is-hidden immer,
   is-hidden-mobil nur unter dem Desktop-Breakpoint), danach steuert
   js/m1.js nur noch is-hidden (Sven, 30.09.2026) */
.m1-rows .m1-row.is-hidden {
    display: none;
}

@media (max-width: 934px) {
    .m1-rows .m1-row.is-hidden-mobil {
        display: none;
    }
}

/* Mobil: "Mehr anzeigen (+10)" und "Alle N anzeigen" nebeneinander, gleich breit;
   steht nur einer da, geht er ueber die volle Breite (Sven, 29.09.2026) */
/* Mobil nebeneinander und gleich breit; reicht der Platz nicht (sehr
   schmale Geraete), steht der zweite Button darunter ueber die volle Breite */
/* Nach unten kein Innenabstand: am Abschnittsende sorgt der Abschnittsabstand
   fuer die Luft, im Akkordeon der Abstand zur Linie darunter (Sven, 30.09.2026) */
.m1-more {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m1-space-3);
    padding: var(--m1-space-4) 0 0;
}

.m1-accordion .m1-more {
    padding-bottom: var(--m1-space-5);
}

/* Hellgraue Flaeche mit dezentem Rand, zurueckhaltender als die
   Ueberschriften (600, 15 px unter den 17-px-Titeln); Fokus ueber die
   Grundregel .m1 button:focus-visible (2 px Rahmen, 2 px Abstand) */
.m1-more .m1-btn {
    flex: 1 1 0;
    min-width: max-content;
    min-height: var(--m1-tap);
    padding: 0 10px;
    border: 1px solid var(--m1-color-control-line);
    border-radius: var(--m1-radius);
    background: var(--m1-color-control);
    color: var(--m1-color-ink);
    font-weight: 600;
    line-height: var(--m1-leading-tight);
    text-align: center;
    white-space: nowrap;
}

.m1-more .m1-btn:focus {
    background: var(--m1-color-control);
    color: var(--m1-color-ink);
}

.m1-more .m1-btn:hover {
    background: var(--m1-color-control-hover);
}

.m1-more [hidden] {
    display: none;
}

/* ============================================================
   Staedte-Kacheln (Startseite, Sven 30.09.2026): Stil wie im Menue,
   hellgrau mit dezentem Rand, Skyline unten ausgerichtet, Name zentriert
   darunter; mobil 2, Tablet 3, Desktop 4 Spalten, alle gleich hoch
   ============================================================ */
.m1 .m1-city-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m1-tile-gap);
}

.m1-city-grid > li {
    display: flex;
}

.m1-city {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 10px 12px;
    border: 1px solid var(--m1-color-tile-line);
    border-radius: 10px;
    background: var(--m1-color-tile);
    transition: border-color 0.15s;
}

.m1-city img {
    width: 80%;
    aspect-ratio: 300 / 175;
    object-fit: contain;
    object-position: center bottom;
}

.m1-city-name {
    color: var(--m1-color-ink);
    font-size: var(--m1-text-sm);
    font-weight: 600;
    line-height: var(--m1-leading-tight);
    text-align: center;
}

.m1-city:hover,
.m1-city:focus-visible {
    border-color: var(--m1-color-border);
}

.m1 .m1-city:hover .m1-city-name,
.m1 .m1-city:focus-visible .m1-city-name {
    color: var(--m1-color-primary);
}

@media (min-width: 600px) {
    .m1 .m1-city-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================================
   Angebots-Karten (Startseite, Sven 30.09.2026). Mobil (unter 600 px) ein
   Angebot je Zeile: Bild links, rechts oben der Rabattchip, darunter Name
   und Frist, Pfeil rechts aussen mittig wie in den Listen. Ab Tablet
   Karten, siehe unten. Ganze Karte klickbar, keine Rahmen, keine Aussenbox.
   ============================================================ */
.m1 .m1-offer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m1-space-5);
}

/* Mobil (Sven, 30.09.2026): Bild mit fester Breite (144 px, rund 81 px
   hoch), damit es auf breiteren Handys nicht waechst. Chip, Name und
   Frist als Block senkrecht mittig zum Bild (leere 1fr-Zeilen oben und
   unten); bei zweizeiligem Titel ragt der Block nur wenige Pixel ueber
   das Bild, gleichmaessig oben und unten, das Bild steht mittig daneben. */
.m1-offer > a {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr) 18px;
    grid-template-areas:
        "media .     arrow"
        "media chip  arrow"
        "media title arrow"
        "media until arrow"
        "media .     arrow";
    grid-template-rows: 1fr auto auto auto 1fr;
    align-items: start;
    column-gap: var(--m1-space-4);
    row-gap: 0;
}

.m1-offer .m1-card-media {
    grid-area: media;
    align-self: center;
    margin: 0;
}

.m1-offer .m1-card-title {
    grid-area: title;
}

/* mobil ohne Stadt, damit die Zeile ruhig bleibt */
.m1-offer .m1-card-meta {
    display: none;
}

.m1-offer-deal {
    display: contents;
}

.m1-offer-chip {
    grid-area: chip;
    justify-self: start;
    /* 3 px oben: optischer Ausgleich, die Frist darunter hat unter der
       Grundlinie Luft, der Chip nicht; ohne ihn wirkt der zentrierte
       Block 1 bis 2 px zu hoch (Sven, 30.09.2026) */
    margin: 3px 0 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--m1-color-primary);
    color: #fff;
    font-size: var(--m1-text-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Frist immer dunkelgrau, ohne rote Hervorhebung (Sven, 30.09.2026) */
.m1-offer-until {
    grid-area: until;
    margin-top: var(--m1-space-1);
    color: var(--m1-color-text-muted);
    font-size: var(--m1-text-xs);
    line-height: 1.2;
}

.m1-offer-arrow {
    grid-area: arrow;
    align-self: center;
    width: 18px;
    height: 18px;
    color: var(--m1-color-text-soft);
}

.m1-offer > a:hover .m1-offer-arrow,
.m1-offer > a:focus-visible .m1-offer-arrow {
    color: var(--m1-color-primary);
}

/* Ab Tablet (600 px) Karten wie "Beliebte Musicals": Bild, direkt darunter
   Chip und Frist in einer Zeile (in jeder Karte auf derselben Linie, auch
   wenn ein Name umbricht), dann Name mit Pfeil und Stadt. Tablet zwei,
   Desktop drei Spalten (Sven, 30.09.2026). */
@media (min-width: 600px) {
    .m1 .m1-offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--m1-grid-gap-y) var(--m1-grid-gap-x);
    }

    .m1-offer > a {
        grid-template-columns: minmax(0, 1fr) 18px;
        grid-template-areas:
            "media media"
            "deal  deal"
            "title arrow"
            "meta  meta";
        grid-template-rows: auto auto auto 1fr;
        column-gap: var(--m1-space-2);
        row-gap: 0;
    }

    .m1-offer .m1-card-media {
        margin: 0 0 var(--m1-space-3);
    }

    .m1-offer .m1-card-meta {
        display: block;
        grid-area: meta;
    }

    .m1-offer-deal {
        grid-area: deal;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--m1-space-2) var(--m1-space-3);
        margin-bottom: var(--m1-space-2);
    }

    .m1-offer-arrow {
        align-self: start;
        margin-top: 1px;
    }

    .m1-offer-chip,
    .m1-offer-until {
        margin: 0;
    }
}

/* ============================================================
   Musical mit Uebernachtung (Startseite, Sven 30.09.2026): Kasten wie der
   Spielplan (m1-module), Bild ohne Innenabstand bis an die Kante, mobil
   oben als flaches Bild, am Desktop links auf rund 45 %; kompakter
   goldener Button
   ============================================================ */
.m1-module.m1-travel {
    display: grid;
    overflow: hidden;
    padding: 0;
}

.m1-travel-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.m1-travel-text {
    padding: var(--m1-space-5);
}

.m1 .m1-travel-btn {
    min-height: 48px;
    margin-top: var(--m1-space-5);
    padding: 0 var(--m1-space-5);
    border-radius: 10px;
    font-size: var(--m1-text-md);
    font-weight: 600;
}

/* ============================================================
   Eyebrow: rote Zeile in Versalien ueber einer Abschnittsueberschrift
   ============================================================ */
.m1-eyebrow {
    display: block;
    margin: 0 0 var(--m1-space-2);
    color: var(--m1-color-primary);
    font-size: var(--m1-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================================
   Desktop
   ============================================================ */

/* ============================================================
   Magazin (Sven, 30.09.2026): Karten wie oben (16:9-Bild, fetter Titel).
   Mobil wischbar: eine Karte ganz, ein Drittel der naechsten ragt herein;
   jede Karte ist ein Rastpunkt, ein Wisch geht genau eine Karte weiter.
   Die letzte Position ist das rechte Ende: die vierte Karte steht ganz
   da, ohne leeren Ueberhang. Scrollbalken aus. Tablet zwei je Reihe,
   Desktop die ersten drei in einer Reihe, beide ohne Punkte.
   ============================================================ */
.m1 .m1-mag-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--m1-grid-gap-x)) / 1.33);
    gap: var(--m1-grid-gap-x);
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.m1-mag-track::-webkit-scrollbar {
    display: none;
}

.m1-mag-track > li {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.m1-mag-track > li:last-child {
    scroll-snap-align: end;
}

/* Punkte (Sven, 30.09.2026): Liste mit je einem Button; inaktiv graue
   Kreise 10 x 10 px, aktiv ein roter Strich 32 x 10 px mit runden Enden,
   der beim Wischen zur aktiven Position wandert. Alle mittig auf einer
   Linie, sichtbarer Abstand ueberall 20 px (je 10 px Innenabstand der
   unsichtbaren Tippflaeche, damit sie mit dem Finger gut zu treffen sind),
   24 px Abstand zu den Karten. */
.m1 .m1-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    /* unten den unsichtbaren Teil der 24 px hohen Tippflaeche abziehen, damit
       der Abschnittsabstand ab der Unterkante der Punkte gilt */
    margin: var(--m1-space-5) 0 calc((10px - 24px) / 2);
}

.m1.m1 .m1-dots > li {
    display: flex;
}

.m1 .m1-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    cursor: pointer;
}

.m1-dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--m1-color-text-soft); /* 3,5 : 1 auf Weiss, Bedienelement (WCAG 1.4.11) */
    transition: width 0.2s ease, background-color 0.2s ease;
}

.m1-dot.is-active::before {
    width: 32px;
    background: var(--m1-color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .m1-dot::before {
        transition: none;
    }
}

@media (min-width: 600px) {
    .m1 .m1-mag-track {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--m1-grid-gap-y) var(--m1-grid-gap-x);
        overflow: visible;
    }

    .m1 .m1-dots {
        display: none;
    }
}

@media (min-width: 935px) {
    .m1 h1 {
        font-size: var(--m1-text-2xl) !important;
    }

    .m1 h2 {
        font-size: var(--m1-text-xl) !important;
    }

    .m1 p {
        font-size: var(--m1-text-md) !important;
    }


    .m1-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .m1-card-title {
        font-size: var(--m1-text-md);
    }

    .m1 .m1-city-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Magazin am Desktop: drei in einer Reihe wie die anderen Kartenraster;
       der vierte Artikel bleibt im HTML, nur mobil und Tablet sichtbar
       (Sven, 30.09.2026) */
    .m1 .m1-mag-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .m1 .m1-mag-track > li:nth-child(n+4) {
        display: none;
    }

    /* Musicalreisen am Desktop: Bild links auf rund 45 %, volle Hoehe */
    .m1-module.m1-travel {
        grid-template-columns: 45% minmax(0, 1fr);
        align-items: center;
    }

    .m1-travel-media {
        align-self: stretch;
    }

    .m1-travel-media img {
        aspect-ratio: auto;
        min-height: 280px;
    }

    .m1-travel-text {
        padding: var(--m1-space-6) var(--m1-space-7) var(--m1-space-6) var(--m1-space-6);
    }

    /* Angebote am Desktop: drei Spalten (Karte siehe ab 600 px) */
    .m1 .m1-offer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .m1-accordion-title {
        font-size: var(--m1-text-lg);
    }

    /* Jahresuebersicht offen (Sven, 29.09.2026): zwei Spalten mit 64 px
       Abstand, damit der linke Pfeil klar zum linken Eintrag gehoert; je
       Zeile Bild, flexibler Text (lange Titel brechen um), feste
       Pfeilspalte rechts buendig. Keine Linien zwischen den Eintraegen;
       Buttons so breit wie ihr Text, mittig unter beiden Spalten */
    .m1 .m1-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 64px;
    }

    .m1-row {
        border-top: 0;
    }

    .m1-more {
        justify-content: center;
        padding-top: var(--m1-space-5);
    }

    .m1-more .m1-btn {
        flex: 0 0 auto;
        padding: 0 var(--m1-space-5);
    }

    /* Spielplan: Text und Button links, Kennzahlen rechts; ohne Kennzahlen
       bleibt es einspaltig. Der Button ist hier nur so breit wie sein Text. */
    .m1-module {
        padding: var(--m1-space-6);
    }

    .m1-module-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "text stats" "button stats";
        grid-template-rows: auto 1fr;
        column-gap: var(--m1-space-7);
    }

    .m1-module-split .m1-module-text {
        grid-area: text;
    }

    .m1.m1-module-split .m1-stats {
        grid-area: stats;
        align-self: center;
        margin: 0;
    }

    .m1-module-split .m1-btn-block {
        grid-area: button;
        align-self: start;
        justify-self: start;
        margin-top: var(--m1-space-5);
    }

    .m1-module .m1-btn-block {
        display: inline-flex;
        width: auto;
        padding: 0 var(--m1-space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .m1-btn,
    .m1-city,
    .m1-card-media img,
    .m1-accordion > summary > svg {
        transition: none;
    }
}