:root {
	/* Werte 1:1 aus main.css übernommen (dort nicht als Variable geführt,
	   hier als single source of truth für custom.css) */
	--tidm-accent: #b60b27;
	--tidm-border: #dcdcdc;
}

/* Entfernt am 17.08.2026: eine Regel, die #meeting/#areal/#treffen fest
   auf weiße Schrift setzte. Sie stammte aus der Zeit, als der dunkle
   Hintergrund pro Abschnitt von Hand vergeben wurde, und traf die
   Abschnitte allein über ihren Anker-Namen. Seit der Hintergrund über
   die Abschnittszählung entsteht (siehe unten), war sie nicht nur
   überflüssig, sondern falsch: "#areal" liegt auf der Infos-Seite an
   zweiter Stelle und damit auf WEISSEM Grund -- weiße Schrift darauf
   war schlicht unlesbar.
   ".-background-color-1" war ebenfalls in dieser Regel gelistet, bekommt
   seine Schriftfarbe aber schon aus der Utility-Regel darunter (dort mit
   !important), verliert hier also nichts. */

/* Utility background helpers to mirror section colors */
.-background-color-1 { background-color: #18181b !important; color:#fff !important; }
.-background-color-2 { background-color: #f7f7f7 !important; }
/* Weiss als ausdrueckliche Angabe. Noetig, seit zwischen den Abschnitten
   freistehende Elemente liegen (Bildband, Handlungsaufruf): die Automatik
   zaehlt Kinder, und jedes Element dazwischen verschiebt den Wechsel. Wo die
   Farbe stimmen muss, steht sie deshalb am Abschnitt. */
.-bg-weiss { background-color: #fff !important; }

/* ------------------------------------------------------------------
   Automatischer Abschnitts-Wechsel für .centered-wrapper
   ------------------------------------------------------------------
   Muster: 1. Abschnitt dunkel, danach abwechselnd weiß / hellgrau
   (gerade = weiß, ungerade = hellgrau). Entspricht exakt dem Stand, der
   bisher pro Element von Hand im Backend gesetzt wurde.

   Das helle Grau ist seit dem 23.09.2026 der Grund der ganzen Seite
   (.main-content), Weiß wird auf den geraden Abschnitten gesetzt. Vorher war
   es andersherum -- dann stand aber alles, was neben oder unter den
   Abschnitten liegt (kurze Seiten, Raum ueber dem Fusszeilenbereich), auf
   Weiß statt auf dem ruhigen Grau.

   Der ":not([class*='-background-color-'])"-Filter sorgt dafür, dass eine
   im Backend vergebene Farbklasse weiterhin Vorrang hat: die Automatik
   greift nur bei Abschnitten OHNE manuelle Angabe. Deshalb hier auch kein
   "!important" nötig -- kein Konflikt mit den beiden Regeln oben.

   ":not(:only-child)" verhindert, dass ein Abschnitt, der als einziger auf
   der Seite steht (z.B. Simpleshop-Seiten mit genau einem centered-wrapper),
   trotzdem dunkel eingefärbt wird -- die Zählung ist nur für einen
   ECHTEN Wechsel zwischen mehreren Abschnitten gedacht. */
/* Gezaehlt wird ausdruecklich nur unter den Abschnitten: "nth-child(… of
   .centered-wrapper)". Ohne das Selektor-Argument zaehlt der Browser alle
   Geschwister mit - und seit zwischen den Abschnitten freistehende Elemente
   liegen (Bildband, Handlungsaufruf), kippte der Wechsel an jeder solchen
   Stelle. */
.main-content .mod_article > .centered-wrapper:not([class*="-background-color-"]):not(.-bg-weiss):nth-child(1 of .centered-wrapper):not(:only-child) {
	background-color: #18181b;
	color: #fff;
}
.main-content {
	background-color: #f7f7f7;
}
/* Ein Abschnitt, der als einziger auf der Seite steht, bleibt weiß -- er ist
   kein Wechsel, sondern schlicht der Inhalt. */
.main-content .mod_article > .centered-wrapper:not([class*="-background-color-"]):not(.-bg-weiss):nth-child(even of .centered-wrapper),
.main-content .mod_article > .centered-wrapper:not([class*="-background-color-"]):not(.-bg-weiss):only-child {
	background-color: #fff;
}

.pagetitle, .surveyhead, .progressbar_container, p.back {
display: none!important;
}

.question {
display: inline;
	background: var(--tidm-accent)!important;
	padding: 2px 15px!important;
}

.question p {
	display: inline;

  color: #fff!important;
  font-family: 'Nunito', 'Open Sans', sans-serif!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
  margin-bottom: 5px!important;

	color: white;
}

footer {
	background-color:#fff;
	/* Der Fuss beginnt mit einer Linie im dunklen Grau der Bereiche - ohne sie
	   liefe er auf weissem Grund unsichtbar in den Inhalt ueber. */
	border-top: 3px solid #18181b;
}

/* Luft zwischen Inhalt und Fuss. Bewusst als padding-bottom am Inhalt und
   nicht als margin-top/padding-top am Fuss: der Fuss traegt den weissen Grund,
   und ein Abstand an ihm selbst wuerde diese Flaeche mit nach oben ziehen.
   So bleibt der Zwischenraum beim Inhalt, wo er hingehoert.

   Der Abstand haengt am LETZTEN Abschnitt, nicht an .main-content: sonst
   traegt er den Grund der Seite (helles Grau) und steht als grauer Streifen
   zwischen einem weissen letzten Abschnitt und dem weissen Fuss. Am Abschnitt
   selbst hat er immer dessen Farbe - weiss unter weiss, grau unter grau,
   dunkel unter dunkel. Seiten ohne Abschnitte (Shop, Formulare) behalten den
   Abstand an .main-content. */
.main-content {
	padding-bottom: 60px;
}
.main-content:has(.mod_article > .centered-wrapper) {
	padding-bottom: 0;
}
.main-content .mod_article > .centered-wrapper:last-child {
	padding-bottom: 60px;
}
footer nav {
	padding:20px;
}
footer a {
	color:#333;
}

/* ":not(.ss *)" nimmt den kompletten Shop-Inhalt aus: die Simpleshop-Module
   rendern alles in einem ".ss"-Wrapper und bringen ihre eigenen
   Überschriften-Stile in shop.css mit. Ohne diese Ausnahme würde z. B.
   jeder Produkttitel als roter Balken erscheinen. */
.main-content h6:not(.ss *),
.main-content h5:not(.ss *),
.main-content h4:not(.ss *),
.main-content h3:not(.ss *),
.main-content h2:not(.ss *),
.main-content h1:not(.ss *)
{
  color: #fff!important;
  font-family: 'Nunito', 'Open Sans', sans-serif!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
  margin-bottom: 5px!important;
}

.footer-top-link,
.button,
input.submit,
button.submit {
	font-family: 'Nunito', 'Open Sans', sans-serif!important;
	font-weight: 700!important;
	  border-radius: 3px;
}

/* Standard: Überschrift selbst bekommt die rote Box, auch ohne <span>.
   ":not(.ss *)" wie oben: Shop-Inhalte bleiben aussen vor. */
.main-content h6:not(.ss *):not(:has(span)),
.main-content h5:not(.ss *):not(:has(span)),
.main-content h4:not(.ss *):not(:has(span)),
.main-content h3:not(.ss *):not(:has(span)),
.main-content h2:not(.ss *):not(:has(span)),
.main-content h1:not(.ss *):not(:has(span)),
/* Falls doch mal ein <span> in der Überschrift steckt (z. B. RSCE-Headline-Elemente): nur der Span bekommt die Box */
.main-content h6:not(.ss *) span,
.main-content h5:not(.ss *) span,
.main-content h4:not(.ss *) span,
.main-content h3:not(.ss *) span,
.main-content h2:not(.ss *) span,
.main-content h1:not(.ss *) span
{
 display: inline-block;   /* sorgt dafür, dass Zeilen gleich "Boxen" wirken */
  padding: 2px 15px !important;
  background: var(--tidm-accent) !important;
  border-radius: 3px;
}

/* Die Überschrift selbst bleibt ein Block, schrumpft aber auf ihren Text.
   Mit "inline-block" (oben) standen zwei Überschriften hintereinander --
   <h3>…</h3><h4>…</h4> -- in einer Zeile nebeneinander, weil inline-block
   eben nicht umbricht. "width: fit-content" gibt dieselbe eng sitzende Box,
   nur eine je Zeile. Für die <span>-Variante darüber bleibt es bei
   inline-block: dort ist die Überschrift schon der Block. */
.main-content h6:not(.ss *):not(:has(span)),
.main-content h5:not(.ss *):not(:has(span)),
.main-content h4:not(.ss *):not(:has(span)),
.main-content h3:not(.ss *):not(:has(span)),
.main-content h2:not(.ss *):not(:has(span)),
.main-content h1:not(.ss *):not(:has(span)) {
  display: block;
  width: fit-content;
}

.margin-overwrite {
	margin-top:10px!important;
}

/* Der Fuss ist weiss, die Logos brauchen keinen eigenen Grund mehr - nur
   gleich viel Luft nach oben und unten. Der eigene Aussenabstand des Elements
   ("margin-top-m") faellt dafuer weg: mit ihm stand oben fast das Fuenffache
   des unteren Abstands. */
#partner {
	margin-top: 0 !important;
	padding: 45px 20px;
}

/* Partnerlogos: eine Reihe, die sich umbricht - acht nebeneinander am
   Bildschirm, sechs auf dem Tablet, drei am Handy.
   Flex statt Raster, damit eine angebrochene letzte Reihe mittig steht: im
   Raster klebten die uebrigen zwei Logos links und der Rest der Zeile blieb
   leer. Die Breite je Logo rechnet sich aus der Spaltenzahl und den
   Zwischenraeumen, damit die Reihen trotzdem sauber untereinander stehen. */
#partner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#partner li {
	flex: 0 0 calc((100% - 7 * 20px) / 8);
	margin: 0;
	padding: 0;
	list-style: none;
}

#partner img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 1024px) {
	#partner ul {
		gap: 18px;
	}

	#partner li {
		flex-basis: calc((100% - 5 * 18px) / 6);
	}
}

@media screen and (max-width: 600px) {
	#partner ul {
		gap: 14px;
	}

	#partner li {
		flex-basis: calc((100% - 2 * 14px) / 3);
	}
}

#partner img {
	filter: grayscale(1);
}
#partner a:hover img {
	filter: grayscale(0);
}
#partner .image_container a:hover::before,
#partner .image_container a:focus::before {
  background: rgba(204, 0, 0, 0)!important;
}
#partner .image_container a:hover::after,
#partner .image_container a:focus::after {
    content: none!important;
}

.header-navigation {
    background: #fff;
}

/* ------------------------------------------------------------------
   Mobil: Kopfzeile bleibt beim Scrollen stehen
   ------------------------------------------------------------------
   Auf dem Desktop erledigt das script.js, indem es der
   .header-navigation die Klasse "is-fixed" gibt. Auf Schmalansichten
   steigt dieselbe Funktion aber bewusst aus (scroll() prüft
   "max-width: 900px" und ruft resetStyles()) -- dort scrollte die
   Kopfzeile bisher einfach weg.

   Gesetzt wird sticky auf die .page-header, NICHT auf die
   .header-navigation: ein sticky-Element klebt nur innerhalb seines
   Elternelements, und .page-header ist exakt so hoch wie die
   Kopfzeile selbst (45px) -- die Kopfzeile hätte darin keinen
   Spielraum und wäre trotz "sticky" mit hinausgescrollt. Der
   Elternteil von .page-header ist .page und damit seitenhoch.

   Das Mobilmenü hängt direkt am <body> (position: absolute), liegt
   also außerhalb und wird davon nicht beschnitten. */
@media screen and (max-width: 900px) {
    .page-header {
        position: sticky;
        top: 0;
        /* über dem Inhalt; .header-navigation selbst hat z-index 5 */
        z-index: 6;
    }

    /* Derselbe leichte Schatten wie am Desktop unter Kopfzeile und
       Subnavigation (main.css, ".header-navigation.is-fixed") - mobil setzt
       script.js die Klasse nicht, die Kopfzeile stand dort ohne Kante auf
       dem Inhalt. */
    .header-navigation {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    /* Sprungziele um die Höhe der stehenden Kopfzeile (45px) tiefer
       anhalten, sonst verschwindet der Anfang des Abschnitts darunter.
       Betrifft die Sprungmarken aus dem Mobilmenü genauso wie einen
       direkt aufgerufenen Link mit Fragment. */
    .main-content .centered-wrapper[id] {
        scroll-margin-top: 45px;
    }
}

.main-navigation-wrapper
 {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    border:none!important;
}

.submenu {
    box-shadow: none!important;
}

/* Haupt- und Submenü in derselben Schrift wie die Überschriften,
   mit dem Standard-Fallback der Seite (Open Sans) statt generischem sans-serif */
.main-navigation,
.main-navigation a,
.main-navigation strong,
.main-navigation span {
    font-family: 'Nunito', 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
}

    @media only screen and (min-width: 901px) {

        .main-navigation > ul > li.submenu:hover > a:after, .main-navigation > ul > li.submenu:hover > strong:after, .main-navigation > ul > li.submenu:hover > span.active:after,
        .main-navigation > ul > li.submenu:hover > span.trail:after, .main-navigation > ul > li.submenu:hover > span.forward:after {
            content: unset!important;
            box-shadow: none!important;
        }

        .mod_rocksolid_mega_menu ul.level_1 > li {
            height: 130px!important;
            padding-top: 0 !important;
            /* height: linear statt ease -- "ease" macht am Anfang einen
               schnellen Ruck und schleicht am Ende lange nach, das sah wie
               ein Sprung aus (Nutzer-Feedback). Linear läuft gleichmäßig
               synchron mit dem Pfeil-Offset weiter unten. */
            transition: background-color .2s ease, height .3s linear;
        }
        /* Link füllt die ganze Box statt nur einen schmalen Streifen darin
           (vorher per padding-top zentriert -> oben/unten nicht klickbar).

           height:100% statt eines festen Pixelwerts mit eigener Transition:
           der Link folgt damit automatisch der animierten Höhe des li,
           Frame für Frame -- der per flex zentrierte Linktext gleitet
           dadurch smooth mit nach oben statt sofort auf die Endposition zu
           schnappen. Ein eigener height-Übergang auf diesem Selektor wäre
           fragil, weil die spätere Hover-Regel (transition: color) ihn bei
           gleicher Spezifität komplett überschreibt -- genau das war der
           Grund, warum der Text vorher gesprungen ist. */
        .mod_rocksolid_mega_menu ul.level_1 > li > a,
        .mod_rocksolid_mega_menu ul.level_1 > li > strong {
            float: none;
            display: flex;
            align-items: center;
            height: 100%;
            box-sizing: border-box;
        }

        /* Ziehharmonika: Hauptnav schrumpft auf 50% Höhe, sobald custom.js
           beim Runterscrollen die Klasse "nav-shrink" am .header-navigation
           setzt. script.js's eigene "is-fixed"-Klasse geht hier NICHT —
           originalPosition (script.js) ist auf dieser Seite 0, dadurch ist
           is-fixed schon beim Laden aktiv, nicht erst beim Scrollen. */
        .header-navigation.nav-shrink .mod_rocksolid_mega_menu ul.level_1 > li {
            height: 65px !important;
        }
        /* kein eigener height-Wert für a/strong nötig -- die erben ihn per
           height:100% direkt vom animierten li (siehe Kommentar oben) */
        /* Pfeil (::after, main.css) ist durch die volle Box-Höhe mit nach
           unten gerutscht, hier ca. 40px zurück nach oben geschoben. */
        .mod_rocksolid_mega_menu ul.level_1 > li > a.active:not(.highlight):after,
        .mod_rocksolid_mega_menu ul.level_1 > li > a.trail:not(.highlight):after,
        .mod_rocksolid_mega_menu ul.level_1 > li > strong.active:not(.highlight):after,
        .mod_rocksolid_mega_menu ul.level_1 > li > strong.trail:not(.highlight):after {
            bottom: 24px !important;
            /* Einblenden beim Zurückscrollen: sanft, aber erst nachdem die
               Box wieder ihre volle Höhe hat (.3s Verzögerung = height-Dauer),
               sonst wandert der Pfeil sichtbar mit nach unten */
            transition: opacity .2s ease .3s;
        }
        /* Beim Schrumpfen sofort weg (0s, keine Verzögerung): der Pfeil sitzt
           per "bottom" relativ zur Box-Unterkante und wandert daher beim
           Schrumpfen zwangsläufig mit nach oben -- sichtbar wäre das ein
           Sprung Richtung Top (Nutzer-Feedback). Unsichtbar ausblenden statt
           die Bewegung zu kaschieren ist der einzige Weg, der ohne
           Nachjustieren robust bleibt. */
        .header-navigation.nav-shrink .mod_rocksolid_mega_menu ul.level_1 > li > a.active:not(.highlight):after,
        .header-navigation.nav-shrink .mod_rocksolid_mega_menu ul.level_1 > li > a.trail:not(.highlight):after,
        .header-navigation.nav-shrink .mod_rocksolid_mega_menu ul.level_1 > li > strong.active:not(.highlight):after,
        .header-navigation.nav-shrink .mod_rocksolid_mega_menu ul.level_1 > li > strong.trail:not(.highlight):after {
            opacity: 0;
            transition: opacity 0s;
        }
        .mod_rocksolid_mega_menu ul.level_1 > li.submenu.trail,
        .mod_rocksolid_mega_menu ul.level_1 > li.trail,
        .mod_rocksolid_mega_menu ul.level_1 > li.active {
            background-color:var(--tidm-accent);
        }
        /* Nur der Menüpunkt der ersten Ebene selbst wird weiß auf Rot --
           deshalb ">" statt eines Nachfahren-Selektors. Mit "li.trail a"
           traf die Regel auch die Links IM aufgeklappten Untermenü: das
           Dropdown hat weißen Grund, dort war der Text dann unsichtbar
           (fiel nur auf Unterseiten auf, weil der Punkt erst dort "trail"
           statt "active" ist). */
        .mod_rocksolid_mega_menu ul.level_1 > li.trail > a,
        .mod_rocksolid_mega_menu ul.level_1 > li.submenu.trail > a,
        .mod_rocksolid_mega_menu ul.level_1 > li.active > strong {
            color:white!important;
        }

        .mod_rocksolid_mega_menu ul.level_1 > li.trail > a:after,
        .mod_rocksolid_mega_menu ul.level_1 > li.submenu.trail > a:after,
        .mod_rocksolid_mega_menu ul.level_1 > li.active > strong:after {
            background: var(--tidm-accent)!important;
            border: solid #fff!important;
            border-width: 0 2px 2px 0!important;
        }

        /* Hover-Highlight für die Hauptmenü-Punkte (z. B. Shop) — nicht beim aktiven Punkt (bleibt rot) */
        .mod_rocksolid_mega_menu ul.level_1 > li:not(.active):not(.trail):hover {
            background-color: #18181b !important;
        }
        .mod_rocksolid_mega_menu ul.level_1 > li:not(.active):not(.trail):hover > a,
        .mod_rocksolid_mega_menu ul.level_1 > li:not(.active):not(.trail):hover > strong {
            color: #fff !important;
        }
        .mod_rocksolid_mega_menu ul.level_1 > li > a,
        .mod_rocksolid_mega_menu ul.level_1 > li > strong {
            transition: color .2s ease;
        }

        /* Dropdown weicher öffnen (Fade + leichtes Slide-in statt Sofort-Erscheinen) */
        .main-navigation > ul > li > ul {
            transform: translateY(-6px);
            transition: max-height 0s .3s, padding 0s .3s, opacity .25s ease, transform .25s ease;
        }
        .main-navigation > ul > li:hover > ul {
            transform: translateY(0);
        }
        .main-navigation > ul > li > ul li > a,
        .main-navigation > ul > li > ul li > strong {
            transition: background-color .15s ease, color .15s ease;
        }


        /* ANMELDEFORMULAR: zwei Spalten
         *
         * Der Container heißt .formbody - die Regeln standen vorher auf
         * ".fields", eine Klasse, die das Registrierungsmodul nie ausgibt.
         * Deshalb lag das Formular untereinander statt nebeneinander. */
        .mod_registration .formbody {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .mod_registration .formbody > div {
            flex: 0 0 48%;
            margin-bottom: 10px;
        }

        /* Über die volle Breite: Ticketart und Platzwahl (die Karte braucht
           den Platz), Kostenumlage, Zustimmung, Sicherheitsfrage, Absenden. */
        .mod_registration .formbody > .widget:has(select[name="area"]),
        .mod_registration .formbody > .widget:has(select[name="vipplace"]),
        .mod_registration .formbody > .widget-mx5-addons,
        .mod_registration .formbody > .widget-checkbox,
        .mod_registration .formbody > .widget-captcha,
        .mod_registration .formbody > .widget-submit,
        .mod_registration .formbody > .mx5-registration__cost {
            flex: 0 0 100%;
        }


    }

    .secondary-navigation,
    .secondary-navigation a {
        font-family: 'Nunito', 'Open Sans', sans-serif !important;
    }

    .secondary-navigation a.active {
        font-weight: 700;
    }

    /* Hover-Effekt für die Sprungnavigation, analog zur Hauptnav —
       einfaches Einfärben nach Weiß, ohne Block/Glow */
    .secondary-navigation li > a {
        transition: color .2s ease;
    }
    .secondary-navigation li:not(.active) > a:hover {
        color: #fff !important;
    }

    /* ---------------------------------------------------------------
       Breite an den Inhaltsbereich koppeln + einzeilig scrollen
       ---------------------------------------------------------------
       Die Leiste selbst bleibt vollbreit (roter Balken über die ganze
       Fensterbreite), aber die Linkliste darin ist exakt so breit wie
       der Inhalt und läuft nie darüber hinaus.

       Statt fester Pixelwerte wird bewusst DIESELBE Breitenformel wie
       bei ".centered-wrapper-inner" (main.css) benutzt, inklusive der
       Theme-Variablen und des Umschaltpunkts bei 1280px. Damit bleibt
       die Navigation auf jedem Breakpoint bündig zum Inhalt, auch wenn
       am Theme-Raster später etwas geändert wird.

       Das seitliche Padding der nav muss dafür weg, sonst säße die
       Liste um genau diesen Betrag neben der Inhaltskante. */
    /* Die Breitenkappung sitzt auf der nav (nicht auf der Liste), damit die
       Pfeil-Knöpfe sich an deren Kanten hängen können, ohne die
       Breitenformel ein zweites Mal ausrechnen zu müssen. */
    .secondary-navigation {
        position: relative;
        padding-left: 0;
        padding-right: 0;

        /* Breitenformel identisch zu .centered-wrapper-inner */
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .secondary-navigation ul {
        position: relative;
        width: 100%;
        margin: 0;

        /* immer eine Zeile, bei Platzmangel horizontal scrollen */
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;

        /* Zentriert solange alles passt, linksbündig sobald es überläuft.
           Bewusst NICHT über justify-content: center -- damit steht
           überlaufender Flex-Inhalt auf BEIDEN Seiten über, der linke
           Teil ist dann nicht mehr erreichbar und der Browser startet am
           rechten Anschlag (live so beobachtet, auch mit "safe center").
           Die Auto-Margins an erstem/letztem Eintrag schlucken den freien
           Platz und fallen bei Überlauf von selbst auf 0 zurück. */
        justify-content: flex-start;

        /* native Scrollleiste ausblenden: sie säße mitten unter der
           Navigation. Die Scrollbarkeit wird stattdessen über die
           Verlaufskanten unten angedeutet (Klassen aus custom.js). */
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .secondary-navigation ul::-webkit-scrollbar {
        display: none;
    }

    .secondary-navigation li {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* siehe Kommentar bei justify-content: zentriert bei Platz,
       linksbündig bei Überlauf */
    .secondary-navigation li:first-child {
        margin-left: auto;
    }
    /* "last-of-type", nicht "last-child": das letzte Kind der Liste ist der
       Indikator-<span>, den custom.js anhaengt - mit ":last-child" griff die
       Regel nie, und die Leiste stand nur halb zentriert (links auto, rechts
       nicht) am rechten Rand. */
    .secondary-navigation li:last-of-type {
        margin-right: auto;
    }

    @media screen and (max-width: 1280px) {
        .secondary-navigation {
            width: var(--page-inner-width);
            max-width: none;
            margin-left: var(--page-padding-left);
            margin-right: 0;
        }
    }

    /* ---------------------------------------------------------------
       Sichtbare Steuerelemente (Desktop)
       ---------------------------------------------------------------
       Die weiche Verlaufskante allein zeigt nur, DASS etwas abgeschnitten
       ist -- sie lädt nicht zum Bedienen ein und ist mit der Maus ohne
       horizontales Scrollrad kaum nutzbar. Deshalb echte Schaltflächen.
       Nur wo es einen Mauszeiger gibt: auf Touch wischt man ohnehin, dort
       wären die Knöpfe nur im Weg. */
    .secondary-navigation .nav-scroll-btn {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 34px;
        z-index: 3;
        display: none;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
        opacity: .75;
        transition: opacity .2s ease;
    }
    .secondary-navigation .nav-scroll-btn:hover,
    .secondary-navigation .nav-scroll-btn:focus-visible {
        opacity: 1;
    }
    /* Pfeil aus zwei Rahmenkanten -- kein Icon-Font nötig, damit das
       Element unabhängig vom Theme-Zeichensatz funktioniert */
    .secondary-navigation .nav-scroll-btn::before {
        content: "";
        width: 9px;
        height: 9px;
        border: solid currentColor;
        border-width: 2px 2px 0 0;
    }
    .secondary-navigation .nav-scroll-prev {
        left: 0;
    }
    .secondary-navigation .nav-scroll-prev::before {
        transform: rotate(-135deg);
        margin-left: 3px;
    }
    .secondary-navigation .nav-scroll-next {
        right: 0;
    }
    .secondary-navigation .nav-scroll-next::before {
        transform: rotate(45deg);
        margin-right: 3px;
    }

    /* Bewusst an die Breite gekoppelt statt an "(hover: hover) and
       (pointer: fine)": Touch-Notebooks melden einen groben Zeiger und
       hätten dann trotz Desktop-Ansicht gar keine Steuerelemente. 901px
       ist ohnehin die Grenze, ab der main.css die Leiste einblendet. */
    @media screen and (min-width: 901px) {
        .secondary-navigation.can-scroll-left .nav-scroll-prev,
        .secondary-navigation.can-scroll-right .nav-scroll-next {
            display: flex;
        }
    }

    /* Ausblendende Kante als Hinweis, dass seitlich noch Einträge stehen.
       Bewusst per mask-image auf der scrollenden Liste selbst statt über
       Pseudo-Elemente: ":before"/":after" sind am
       .secondary-navigation-wrapper in main.css bereits als Clearfix
       belegt und dürfen nicht umgewidmet werden. Die Maske sitzt
       außerdem automatisch exakt an den Kanten der Liste -- ein
       Pseudo-Element am vollbreiten Wrapper läge daneben, sobald die
       Liste (bis 1200px) schmaler ist als die Leiste.
       Klassen setzt custom.js je nach Scrollposition. */
    .secondary-navigation.can-scroll-right ul {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
    }
    .secondary-navigation.can-scroll-left ul {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent 100%);
                mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent 100%);
    }
    .secondary-navigation.can-scroll-left.can-scroll-right ul {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    }

    /* Gleitender Unterstrich statt starrem border-bottom je Link,
       Position/Breite werden per JS (custom.js) live nachgeführt */
    .secondary-navigation .nav-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 5px;
        background: #fff;
        border-radius: 4px 4px 0 0;
        opacity: 0;
        transition: transform .25s ease, width .25s ease, opacity .2s ease;
        pointer-events: none;
    }
    .secondary-navigation .nav-indicator.is-visible {
        opacity: 1;
    }

    input[type="checkbox"]{
        width: 20px !important;
        height: 20px !important;

    }

    .widget,
    .widget-submit,
    .checkbox_container {
        margin-top: 0!important;
        padding:0!important;

    }

    .mod_registration input.text,
    .mod_registration fieldset,
    .mod_swmFormular input.text,
    .submit {
        margin:0!important;
        width: 100%!important;
    }

    .checkbox_container {
        border: none!important;
    }
    .checkbox_container legend {
        display:none;
    }

    .ce_text a {
        font-weight:bold;
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0.85714em 1.35714em;
        line-height: normal;
        border: 1px solid var(--tidm-border);
        border-bottom-color: #cfcfcf;
        font-size: 0.93333em;
        color: inherit;
        background: #ffffff;
        width: 100%!important;
    }
    select:active,
    select:focus {
        outline: none!important;
        border: 1px solid #cc0000;
    }


    /* Fokus: kein Ring bei Maus-/Touch-Bedienung (die ursprüngliche Absicht
       hier), aber ein deutlich sichtbarer Ring bei Tastaturbedienung.
       Vorher stand hier nur "outline: none" ohne Ersatz -- Tastaturnutzer
       hatten dadurch auf KEINEM Formularfeld und keinem Button eine
       Fokusanzeige (WCAG 2.4.7). ":focus-visible" trennt beide Fälle, das
       macht der Browser selbst, kein JS nötig. */
    input:focus:not(:focus-visible),
    select:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible) {
        outline: none;
    }

    /* Kein Ring an Feldern mit eigenem Rand: main.css faerbt beim Fokus
       schon den Rand rot ("input:focus, textarea:focus"), select ebenso
       weiter oben. Der Ring obendrauf ergaebe zwei Rahmen ineinander.
       Knoepfe, Links und alles ohne eigenen Rand behalten ihn - dort ist er
       die einzige Anzeige. */
    button:focus-visible,
    a:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid var(--tidm-accent);
        outline-offset: 2px;
    }

    /* Auf dunklem Grund hat das Akzentrot zu wenig Kontrast -- dort weiß */
    .-background-color-1 :focus-visible,
    .main-navigation :focus-visible,
    .secondary-navigation :focus-visible,
    .main-content .mod_article > .centered-wrapper:not([class*="-background-color-"]):first-child:not(:only-child) :focus-visible {
        outline-color: #fff;
    }

    /* ANMELDEFORMULAR
     *
     * Das Registrierungsmodul rendert je Feld <div class="widget widget-…>
     * ohne eigene ID - die alten Regeln hier zielten auf #form_totalcost und
     * #form_vipplace aus dem Formulargenerator und griffen deshalb nie.
     * Angesprochen wird jetzt über den Feldnamen im enthaltenen Element.
     */

    /* Zusatzleistungen der gewählten Ticketart. Je Leistung ein Kästchen oder
       ein Auswahlfeld mit der Anzahl (2 × Frühstück); ausgeblendet wird, was
       nicht zur Ticketart gehört. */
    .mx5-addons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 24px;
    }

    .mx5-addons__item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mx5-addons__item select {
        width: auto;
        min-width: 5em;
    }

    .mx5-addons__item label {
        margin: 0;
    }

    .mx5-addons__price {
        font-weight: 700;
        white-space: nowrap;
    }

    .mx5-addons__rest {
        color: #777;
        font-size: .85em;
        white-space: nowrap;
    }

    /* Kostenumlage: eine Zeile, kein Eingabefeld. Der Betrag kommt aus der
       gewählten Ticketart und den angehakten Zusatzleistungen
       (mx5-registration.js); gerechnet wird er beim Absenden serverseitig
       aus den Positionen der Anmeldung. */
    .mx5-registration__cost {
        flex: 0 0 100%;
        margin: 0 0 10px;
        padding: 0.85714em 0;
        line-height: normal;
        border-top: 3px solid var(--tidm-border);
        border-bottom: 3px solid var(--tidm-border);
        font-size: 1em;
        color: inherit;
        font-family: 'Nunito', 'Open Sans', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mx5-registration__cost strong {
        font-weight: 900;
        white-space: nowrap;
    }

    /*SHOP PRODUKT LISTE*/

    .mod_iso_productlist .product {
        background-color: #fff;
    }

    .mod_iso_productlist .product:nth-of-type(2n) {
        background-color: #e6e6e6;
    }

    /*.mod_iso_productlist .product_first {
        background-color: #333;
        color: #fff;
    }

    .mod_iso_productlist .product_first label{
        color: #fff;
    }
    .mod_iso_productlist .product_first select {
        color:#333;
    }
    */

    .mod_iso_productlist .product:last-child {
        margin-bottom: 50px!important;
    }

    .product .submit {
        margin-top: 20px!important;
        font-family: 'Nunito', 'Open Sans', sans-serif !important;
        font-weight: 700 !important;
    }


    .mod_iso_productlist .product_list h3 a {
        color: #fff;
        text-transform: uppercase!important;
        padding: 2px 15px!important;
        background: var(--tidm-accent)!important;
    }

    .mod_iso_productlist .product_list h3 a:hover {
        text-decoration: none!important;
    }


    .no-amount .quantity_container {
        display: none;
    }
    .no-amount .widget {
        margin: 0!important;;
    }

    .mod_iso_productlist .price,
    .mod_iso_productlist .baseprice,
    .mod_iso_productlist .sku {
        display: none!important;
    }

    .mod_iso_cart .edit,
    .mod_iso_cart .subtotal,
    .mod_iso_cart .col_0,
    .mod_iso_cart .foot_1,
    .mod_iso_cart .button_update,
    .mod_iso_cart .button_cart,
    .review .col_0
    {
        display: none;
    }

    .mod_iso_cart td,
    .mod_iso_checkout td {
        border-style: dotted!important;
    }

    .mod_iso_cart .col_1,
    .mod_iso_checkout .col_1  {
        border-left:none!important;
    }

    .mod_iso_cart table,
    .mod_iso_checkout table {
        border: none!important;
    }

    .mod_iso_cart table .product:nth-of-type(2n),
    .mod_iso_checkout table .product:nth-of-type(2n) {
        background-color:#e6e6e6;
    }

    .mod_iso_cart table tfoot td,
    .mod_iso_checkout table tfoot td {
        font-style: normal!important;
        font-weight: 700;
    }

    .mod_iso_checkout .foot_0,
    .mod_iso_checkout .foot_1 {
        display: none;
    }

    .mod_iso_cart .submit,
    .mod_iso_checkout .submit {
        margin-top: 20px!important;
        font-family: 'Nunito', 'Open Sans', sans-serif !important;
        font-weight: 700 !important;
    }

    .mod_iso_cart .actions {
        text-align: center;
        font-weight: 700;
    }

    .mod_iso_checkout .steps,
    .mod_iso_checkout .orderinfo {
        display: none!important;
    }

    .mod_iso_messages p {

        font-family: "Lato","Open Sans", sans-serif;
        font-size: 15px;

    }

    .main-navigation-cart {
        display: none;
    }

    @media screen and (max-width: 599px) {
        .main-navigation-cart {
            display: block;
            position: absolute;
            top: 50%;
            right: var(--safe-area-right);
            margin-top: -1.93333em;
        }
    }

    .main-navigation-cart {
        float: right;
        margin-right: var(--safe-area-right);
    }
    .radio_container,
    .surveytable {
        border: none!important;
    }
    .surveytable textarea {
        width: 100%!important;
    }

    .p1 {
        font-weight: bold!important;
    }


    .main-content input,
    .main-content textarea,
    .main-content select,
    .main-content fieldset {
        width: 100%;
    }
    /* Alle Regeln gelten nur auf Seiten mit <body class="sponsoring"> */
    body.sponsoring .formbody {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;         /* Abstand zwischen den Feldern – bei Bedarf anpassen */
        box-sizing: border-box;
    }

    /* Standard: Alle Felder nehmen 100% der Breite ein, wenn sie allein stehen */
    body.sponsoring .formbody > div[id^="form_"] {
        flex: 0 0 100%;
        box-sizing: border-box;
    }

    /* 1. Feld "Firma" – immer allein in einer Zeile (volle Breite) */
    body.sponsoring #form_Firma {
        flex: 0 0 100%;
    }

    /* 2. Vorname und Nachname – nebeneinander, jeweils ca. 50% (mit Abzug für den Abstand) */
    body.sponsoring #form_Vorname,
    body.sponsoring #form_Nachname {
        flex: 0 0 calc(50% - 10px);
    }

    /* 3. Feld "Straße" – allein in einer Zeile, ca. 50% Breite */
    body.sponsoring #form_Strasse {
        flex: 0 0 calc(50% - 10px);
    }

    /* 4. Felder "PLZ" und "Ort" – nebeneinander, jeweils ca. 50% Breite */
    body.sponsoring #form_PLZ,
    body.sponsoring #form_Ort {
        flex: 0 0 calc(50% - 10px);
    }

    /* 5. Feld "E-Mail" – allein in einer Zeile, ca. 50% Breite */
    body.sponsoring #form_EMail {
        flex: 0 0 calc(50% - 10px);
    }

    /* 6. Feld "Sponsoring-Paket" – allein in einer Zeile (volle Breite) */
    body.sponsoring #form_Sponsoring {
        flex: 0 0 100%;
    }

    /* Damit die Eingabefelder (Input, Textarea) immer 100% der Breite ihres Containers einnehmen */
    body.sponsoring .formbody div[id^="form_"] input[type="text"],
    body.sponsoring .formbody div[id^="form_"] input[type="email"],
    body.sponsoring .formbody div[id^="form_"] textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* Modernes Styling für das Select-Feld im Sponsoring-Paket */
    body.sponsoring #form_Sponsoring select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        padding: 8px 12px;
        font-size: 1em;
        line-height: 1.4;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        /* Hintergrund: Weiß mit eingebettetem Pfeil (SVG), der nach unten zeigt */
        background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4z"/></svg>') no-repeat right 12px center;
        background-size: 12px;
    }

    /* Fokus-Styling für Eingabefelder, Textareas, Selects und Buttons */
    body.sponsoring input:focus,
    body.sponsoring select:focus,
    body.sponsoring textarea:focus,
    body.sponsoring button:focus {
        border-color: var(--tidm-accent);
        outline: none;
    }

    /* Beispielhaftes Button-Styling (z.B. Submit-Button) */
    body.sponsoring button.submit {
        padding: 10px 20px;
        font-family: 'Nunito', 'Open Sans', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        border: none;
        border-radius: 4px;
        background-color: var(--tidm-accent);
        color: #fff;
        cursor: pointer;
    }

    body.sponsoring button.submit:hover {
        background-color: #990000;
    }


    /*SHOP OVERLAY*/

    /* AJAX OVERLAY */
    #iso_ajaxOverlay {
        opacity:1;
        background-color: rgba(24, 24, 27, 0.98) !important;

    }

    #iso_ajaxBox .iso_confirm {
        padding-left: 34px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'><path d='M20.285 6.709a1 1 0 0 0-1.414-1.418l-9.899 9.899-4.243-4.243a1 1 0 1 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0l10.556-10.556z'/></svg>") left center no-repeat;
        background-size: 24px;
    }

    #iso_ajaxBox {
        width: 50%;
        max-width: 600px;
        padding: 24px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff url(/files/mx5/img/loadingspinner.gif) no-repeat right center;
        background-position: calc(100% - 10px) center;
        background-size: 32px;
        border: 2px solid #000;
        font-family: "Lato", "Open Sans", sans-serif;
        font-size: 15px;
        line-height: 18px;
        text-align: left;
        color: #000;
        z-index: 9999;
    }

    /* Nur innerhalb der Mutterklasse .ssc INFO SHOW & SHINE */
    .scc .rs-column {
        padding: 0 !important;
        margin: 0 !important;
    }

    .scc .ce_gallery,
    .scc .ce_gallery.block {
        margin: 0 !important;
    }

    .scc .ce_text.block {
        margin: 0 !important;
        padding: 0 !important;
    }

    h2 span a {
        color: #fff!important;
    }

    /*PAGNINATION*/
    nav.pagination.block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* erlaubt Umbruch */
        gap: 0.5rem;
        margin: 1rem 0;
    }

    nav.pagination.block p {
        margin: 0;
        flex: 1 1 auto;
        text-align: left; /* immer linksbündig */
    }

    nav.pagination.block ul {
        list-style: none;
        display: flex;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
    }

    nav.pagination.block li {
        display: inline;
    }

    nav.pagination.block a,
    nav.pagination.block strong {
        padding: 0.4em 0.7em;
        text-decoration: none;
        font-size: 0.95rem;
        background: var(--tidm-accent);
        color: #fff;
    }

    nav.pagination.block strong.active {
        background: #333;
        color: #fff;
    }

    .image_container img {
        border-radius: 3px;
    }
    /* Newsbox nur bei Desktop --- Responsive --- */
    @media (min-width: 901px) {

        .oneo-no-sidebar .image_container.float_right, .oneo-no-sidebar .image_container.float_left {
            width: 49.5% !important;
            margin-top: 0!important;
        }


    }

    /* PAGINATION --- Responsive --- */
    @media (max-width: 599px) {
        nav.pagination.block {
            flex-direction: column;
            align-items: stretch; /* volle Breite nutzen */
        }

        nav.pagination.block p {
            display:none;
        }

        nav.pagination.block ul {
            justify-content: center; /* Pagination zentriert */
            flex-wrap: wrap;
        }
    }


    select.select {
        position: relative;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 32px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23cc0000' d='M0 0l5 6 5-6z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px 6px;
    }


    /* CHECKBOXEN */
    /* Basis: Container innerhalb des Widgets */
    .widget-checkbox span {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        font-size: 15px;
        line-height: 1.4;
    }

    /* Native Checkbox verstecken (nur die mit class="checkbox") */
    .widget-checkbox .checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Label übernimmt die Klickfläche */
    .widget-checkbox .checkbox + label {
        position: relative;
        padding-left: 42px; /* Platz für das Kästchen */
        cursor: pointer;
    }

    /* Das „Kästchen“ vor dem Text */
    .widget-checkbox .checkbox + label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%); /* perfekte Zentrierung */
        width: 32px;
        height: 32px;
        /* Wie Ueberschriften, Knoepfe und Eingabefelder - vorher als einziges
           Element der Seite eckig. */
        border-radius: 3px;
        border: 1px solid var(--tidm-border);
        box-sizing: border-box;
        background: #fff;
    }

    /* Häkchen / Füllung */
    .widget-checkbox .checkbox + label::after {
        content: "✓";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scale(0); /* zentrieren + unsichtbar skaliert */
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: 'RockSolid Icons';
        font-weight: 700;
        color: #fff;
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* Wenn angehakt */
    .widget-checkbox .checkbox:checked + label::before {
        background: var(--tidm-accent);
        border-color: var(--tidm-accent);
    }

    .widget-checkbox .checkbox:checked + label::after {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    /* Tastatur-Fokus */
    .widget-checkbox .checkbox:focus-visible + label::before {
        outline: 1px solid var(--tidm-accent);
        outline-offset: -1px;
    }

    /* Kleines Extra: der Stern für Pflichtfeld in Rot */
    .widget-checkbox legend .mandatory {
        color: var(--tidm-accent);
        margin-left: 4px;
    }

    .roundNumber {
        display: inline-flex;
        justify-content: center;   /* horizontal zentrieren */
        align-items: center;       /* vertikal zentrieren */
        border: 2px #fff solid;
        border-radius: 50%;        /* perfekter Kreis */
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    h4.priceline {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    h4.priceline .f {
    }

    h4.priceline .fprice {
        background-color: transparent!important;
        border-radius: 0px!important;
        border-top-right-radius: 3px!important;
        border: 1px #fff solid!important;
        border-left:0px!important;
        border-bottom:0px!important;
    }

.disable {
    background-color: #e6e6e6;
}

/* ------------------------------------------------------------------
   Mobilmenü im Stil der übrigen Seite
   ------------------------------------------------------------------
   Das Theme liefert das Menü in einem neutralen Grau-Look mit gemischter
   Groß-/Kleinschreibung. Haupt- und Sprungnavigation der Seite arbeiten
   dagegen mit Nunito, Versalien und Sperrung (main.css .main-navigation
   :2424, .secondary-navigation :2975) -- dieselbe Sprache bekommt hier
   auch das Mobilmenü.

   Angefasst wird ausschließlich die Optik: Struktur, Aufklappmechanik
   (script.js setzt is-expanded/is-collapsed) und Breakpoints bleiben
   unverändert. Kein !important nötig, custom.css wird nach main.css
   geladen und die Selektoren sind gleich aufgebaut. */

.main-navigation-mobile {
    border-top: 0;
    background: #18181b;
}

.main-navigation-mobile.is-active {
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.55);
}

/* Erste Ebene: alle Links in Versalien wie in der Hauptnavigation */
.main-navigation-mobile a,
.main-navigation-mobile strong,
.main-navigation-mobile span.active,
.main-navigation-mobile span.trail,
.main-navigation-mobile span.forward {
    padding: 0.95em 1.15em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    font-family: 'Nunito', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background-color: transparent;
}

.main-navigation-mobile a:hover,
.main-navigation-mobile a:focus,
.main-navigation-mobile strong:hover,
.main-navigation-mobile strong:focus,
.main-navigation-mobile span.active:hover,
.main-navigation-mobile span.trail:hover,
.main-navigation-mobile span.forward:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
}

/* Angesteuerte Seite: rote Fläche wie die Überschriften-Boxen der Seite */
.main-navigation-mobile a.active,
.main-navigation-mobile strong.active,
.main-navigation-mobile span.active {
    color: #fff;
    background-color: var(--tidm-accent);
    box-shadow: none;
}

/* Seite im Pfad: nur ein roter Balken an der Kante */
.main-navigation-mobile a.trail,
.main-navigation-mobile strong.trail,
.main-navigation-mobile span.trail,
.main-navigation-mobile span.forward {
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: inset 3px 0 var(--tidm-accent);
}

/* Zweite Ebene: echte Unterseiten und die Sprungmarken aus dem
   Anker-Modul (ul.anchor-level) bekommen bewusst dasselbe Bild --
   sie sollen sich wie Unterseiten der jeweiligen Seite lesen. */
.main-navigation-mobile ul ul {
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
}

.main-navigation-mobile li li {
    box-shadow: inset 2px 0 rgba(182, 11, 39, 0.45);
}

.main-navigation-mobile li li a,
.main-navigation-mobile li li strong,
.main-navigation-mobile li li span.active,
.main-navigation-mobile li li span.trail,
.main-navigation-mobile li li span.forward {
    padding: 0.8em 1.15em 0.8em 2em;
    border-bottom-color: rgba(255, 255, 255, 0.05);
    font-size: 0.82em;
    letter-spacing: 0.075em;
    color: rgba(255, 255, 255, 0.72);
    background-color: transparent;
}

.main-navigation-mobile li li a:hover,
.main-navigation-mobile li li a:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
}

.main-navigation-mobile li li a.highlight {
    color: #fff;
}

/* Aufklapp-Knopf: rot wenn offen.
   Keine Höhe von 100% -- das Elternelement ist das gesamte <li> samt
   aufgeklapptem Untermenü, der Knopf würde dann mitten im Untermenü
   landen. Er bleibt an der ersten Zeile und übernimmt deren Polsterung. */
.main-navigation-mobile .main-navigation-mobile-expand {
    top: 0;
    padding: 0.95em 1.15em;
    border-width: 0;
    box-shadow: none;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
}

.main-navigation-mobile .main-navigation-mobile-expand:hover,
.main-navigation-mobile .main-navigation-mobile-expand:focus {
    color: #fff;
}

/* Aufgeklappt weiß, nicht rot: die aktuelle Seite hat selbst eine rote
   Zeile, dort wäre ein roter Pfeil unsichtbar. Den Zustand zeigt ohnehin
   das umgeschlagene Icon (main.css setzt "\e00c" statt "\e009"). */
.main-navigation-mobile .is-expanded > .main-navigation-mobile-expand {
    color: #fff;
}

/* Suchfeld und Icon-Reihe an dieselbe Formsprache angleichen
   (3px Radius wie Buttons und Überschriften-Boxen) */
.main-navigation-mobile-search input,
.main-navigation-mobile-search input:hover,
.main-navigation-mobile-search input:focus {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: 'Nunito', 'Open Sans', sans-serif;
    letter-spacing: 0.05em;
}

.main-navigation-mobile-search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.main-navigation-mobile-search button {
    color: rgba(255, 255, 255, 0.7);
}

.main-navigation-mobile-icons.main-navigation-mobile-icons a:hover:before,
.main-navigation-mobile-icons.main-navigation-mobile-icons a:focus:before {
    color: var(--tidm-accent) !important;
}

.timeline {
	margin: 0!important;
}

/* ============================================================
     TidM – Preistabelle "Partner- & Sponsorenpakete" (#price)
     ============================================================ */

  #price.pricing-table {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      align-items: stretch;
      margin: 3em 0;
      padding-top: 16px;
  }

  #price.pricing-table:before,
  #price.pricing-table:after {
      content: none;
  }

  /* ---------- Karte ---------- */
  #price .pricing-table-plan {
      float: none !important;
      width: auto !important;
      margin: 0 !important;
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid #e4e4e7;
      border-radius: 4px;
      overflow: visible;
      transition: border-color .2s ease;
  }

  #price .pricing-table-plan:hover {
      border-color: #c9c9cf;
  }

  #price .pricing-table-plan.-highlighted {
      border: 1px solid #e4e4e7 !important;
  }

  /* ---------- Kopfzeile ---------- */
  #price .pricing-table-plan h3 {
      margin: 0 !important;
      padding: 1.35em 1.2em;
      font-family: 'Nunito', 'Open Sans', sans-serif;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .14em;
      line-height: 1.3;
      text-transform: uppercase;
      color: #18181b !important;
      background: #fff !important;
      border-bottom: 1px solid #e4e4e7;
      border-radius: 3px 3px 0 0;
  }

  #price .pricing-table-plan.-highlighted h3 {
      color: #fff !important;
      background: #18181b !important;
      border-bottom: 0;
      border-radius: 3px 3px 0 0;
  }

  /* ---------- Preisblock ---------- */
  #price .pricing-table-plan p {
      position: relative;
      margin: 0 !important;
      padding: .55em .5em .6em;
      border-bottom: 0;
      font-family: 'Nunito', 'Open Sans', sans-serif;
      font-size: 3.4rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.02em;
      color: #fff;
      background: var(--tidm-accent) !important;
      display: flex;
      align-items: baseline;
      justify-content: center;
  }

  #price .pricing-table-plan p b {
      display: inline-block;
      vertical-align: baseline;
      margin: 0 .12em 0 0;
      font-size: .38em;
      font-weight: 600;
      opacity: .9;
  }

  #price .pricing-table-plan p:after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 50%;
      margin-left: -8px;
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-top-color: var(--tidm-accent);
      border-bottom: 0;
  }

  #price .pricing-table-plan-price-part {
      display: inline-block;
      vertical-align: baseline;
      text-align: left;
      margin-left: .18em;
  }

  #price .pricing-table-plan-price-part i {
      display: block;
      margin: 0;
      font-family: 'Lato', sans-serif;
      font-size: .21em;
      font-style: normal;
      font-weight: 400;
      letter-spacing: .04em;
      opacity: .85;
  }

  /* ---------- Badge "Top" ---------- */
  #price .pricing-table-plan h4 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: visible;
      text-align: center;
      pointer-events: none;
      z-index: 3;
  }

  #price .pricing-table-plan h4 span {
      float: none;
      display: inline-block;
      margin: 0;
      padding: .5em 1.25em;
      font-family: 'Nunito', 'Open Sans', sans-serif;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #fff;
      background: var(--tidm-accent);
      border: 2px solid #fff;
      border-radius: 3px;
      transform: translateY(-50%);
      transform-origin: center;
  }

  /* ---------- Leistungen ---------- */
  #price .pricing-table-plan ul {
      flex: 1 1 auto;
      margin: 1em 1.5em 1.6em !important;
      padding: 0;
      list-style: none;
      text-align: left;
      color: #3f3f46;
  }

  #price .pricing-table-plan li {
      display: flex;
      gap: .7em;
      padding: .7em 0;
      border-top: 1px solid #efeff2;
      font-size: .95rem;
      line-height: 1.5;
      transition: color .2s ease;
  }

  #price .pricing-table-plan li:before {
      content: "";
      flex: 0 0 6px;
      width: 6px;
      height: 6px;
      margin-top: .62em;
      border-radius: 50%;
      background: var(--tidm-accent);
  }

  #price .pricing-table-plan li:hover {
      background: transparent;
      color: #18181b;
  }

  #price .pricing-table-plan li:first-child {
      border-top: 0;
      padding-top: 0;
  }

  /* ---------- Responsive ---------- */
  @media screen and (max-width: 900px) {
      #price.pricing-table {
          grid-template-columns: repeat(2, 1fr);
      }
      #price .pricing-table-plan h4 span {
          font-size: .62rem;
      }
  }

  @media screen and (max-width: 599px) {
      #price.pricing-table {
          grid-template-columns: 1fr;
          gap: 26px;
      }
      #price .pricing-table-plan p {
          font-size: 3.2rem;
      }
  }

  /* ---------- Siegespodest (nur Desktop) ---------- */
  @media screen and (min-width: 901px) {
      #price.pricing-table {
          padding-top: 56px;
      }
      #price .pricing-table-plan.-highlighted {
          margin: -40px 0 0 !important;
      }
      #price .pricing-table-plan.-highlighted h3 {
          padding-top: 1.7em;
          padding-bottom: 1.7em;
      }
      #price .pricing-table-plan.-highlighted p {
          font-size: 3.9rem;
      }
  }

/* ============================================================
   Bewegung reduzieren (Betriebssystem-Einstellung respektieren)
   ============================================================
   Bewusst 0.01ms statt "none": so laufen Übergänge/Animationen
   praktisch sofort ab, feuern aber weiterhin ihre transitionend-/
   animationend-Ereignisse und wenden ihren Endzustand an. Ein hartes
   "animation: none" könnte Elemente unsichtbar lassen, die ihre
   Sichtbarkeit erst am Ende einer Animation bekommen. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* Subnavigation ohne den weissen Strich unter dem aktiven Punkt: der rote
   Reiter sagt schon, wo man steht. */
.secondary-navigation .nav-indicator {
    display: none !important;
}

/* Alle Punkte fett - auf dem roten Band liest sich die Schrift sonst duenn
   weg. */
.secondary-navigation li > a {
    position: relative;
    font-weight: 700;
}

/* Der aktive Punkt wird unterstrichen: eine abgerundete Linie unter dem Wort,
   nicht unter dem ganzen Reiter. Sie sitzt zwischen den Innenabstaenden des
   Links, ist also genau so breit wie der Text. */
.secondary-navigation li.active > a::after,
.secondary-navigation li > a.active::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 9px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
}

/* ---------- Knopf "Nach oben" ---------- */

/* Sitzt auf der Linie, in der Farbe der Linie - rot wird er erst unter dem
   Zeiger. Die sichtbare Flaeche ist das ::after des Links (Theme, main.css),
   der Link selbst ist nur der Rahmen darum. */
.footer-top-link::after {
	background: #18181b;
	color: #fff;
}

.footer-top-link:hover::after,
.footer-top-link:focus::after {
	background: var(--tidm-accent);
	color: #fff;
}

/* Mittig auf der Linie - der Knopf ist 3.33333em hoch, also 1.66667em nach
   oben; die 1.5px sind die halbe Linienstaerke, denn die 3px liegen innerhalb
   des Fusses. Das Theme setzt auf Schmalansichten einen positiven Wert und
   schiebt den Knopf ganz in den Fuss; hier gilt beides gleich. */
.footer-top-link {
	margin-top: calc(-1.66667em - 1.5px) !important;
}

/* ---------- Navigation im Fuss ---------- */

/* Dunkler Streifen wie die Bereiche der Seite, damit der Fuss unter der
   weissen Partnerreihe einen Abschluss bekommt - ueber die volle Breite:
   das Modul steht im 1200er-Raster, deshalb bis zum Fensterrand hinaus und
   derselbe Wert wieder als Innenabstand, damit die Punkte auf der Flucht des
   Inhalts bleiben. */
/* Das Modul im Fuss ist inzwischen eine eigene Navigation ("Individuelle
   Navigation", .mod_customnav). Beide Klassen stehen hier, damit es auch
   dann noch stimmt, wenn irgendwo wieder eine gewoehnliche Navigation
   eingehaengt wird. */
footer .mod_customnav,
footer .mod_navigation {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	/* Genauso hoch wie die Subnavigation oben (51 px): "footer nav" bringt
	   20 px mit, das ist hier zu viel. Nur oben und unten anfassen - links
	   und rechts steckt der Vollbreiten-Trick im Polster. */
	padding-top: 6px;
	padding-bottom: 6px;
	background: #18181b;
}

/* Dieselbe Schrift wie die Hauptnavigation (Nunito, fett) - die Punkte heissen
   ja auch gleich. */
footer .mod_customnav,
footer .mod_customnav a,
footer .mod_customnav strong,
footer .mod_customnav span,
footer .mod_navigation,
footer .mod_navigation a,
footer .mod_navigation strong,
footer .mod_navigation span {
	font-family: 'Nunito', 'Open Sans', sans-serif !important;
	font-weight: 700 !important;
}

/* Auf dem dunklen Grund helle Schrift; unter dem Zeiger das Markenrot. */
footer .mod_customnav a,
footer .mod_customnav strong,
footer .mod_customnav span.active,
footer .mod_navigation a,
footer .mod_navigation strong,
footer .mod_navigation span.active {
	color: #fff !important;
}

footer .mod_customnav a:hover,
footer .mod_customnav a:focus,
footer .mod_navigation a:hover,
footer .mod_navigation a:focus {
	color: var(--tidm-accent) !important;
	/* Kein Unterstrich: die Farbe sagt schon, worauf der Zeiger steht. */
	text-decoration: none !important;
}

/* Bilder bekommen dieselben abgerundeten Ecken wie Ueberschriften, Knoepfe
   und Eingabefelder - Galerie-Kacheln wie Einzelbilder. Kein Rahmen, die
   Bilder bringen ihre Kante selbst mit.
   Der Radius sitzt am Bild selbst; die figure bleibt unangetastet, damit die
   Lightbox-Verlinkung nichts abschneidet. */
.content-gallery img,
.content-image img,
.ce_gallery img,
.ce_image img {
	border-radius: 3px;
}

/* ------------------------------------------------------------------
   Zeitachse waagerecht (rsce_mx5_timeline_h)
   ------------------------------------------------------------------
   Eine Buehne je Jahr: links das Bild, rechts der Text mit der Jahreszahl als
   grosser Zahl im Hintergrund. Darueber die Jahresleiste, die zugleich zeigt,
   wo man ist, und zum Springen dient; rechts daneben die Pfeile.

   Die Buehne hat eine feste Mindesthoehe. Dadurch ist es gleichgueltig, ob
   ein Jahr zwei Zeilen Text hat oder zehn -- nichts springt, nichts steht
   leer herum. */
.mx5-timeline-h {
	--buehne: 320px;
	/* Dieselbe Spaltenluecke wie die zweispaltigen Abschnitte darunter (Areal,
	   Camping ...) - dadurch steht die Kante des Bildes genau auf der Kante
	   der Spalte darunter. */
	--luecke: 40px;
	--schiene: 40px;
	position: relative;
	/* Luft zum Ende des Abschnitts - der Wrapper selbst bringt unten keine
	   mit, die Zeitachse sass sonst auf der Kante. */
	margin-bottom: 48px;
}

/* ---- Jahresleiste ---- */
.mx5-timeline-h__rail {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
	/* Die Linie liegt hinter den Jahreszahlen und traegt die ganze Reihe. */
	position: relative;
}
.mx5-timeline-h__rail:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--tidm-border);
}
.mx5-timeline-h__years {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 4px 0;
}
.mx5-timeline-h__years::-webkit-scrollbar {
	display: none;
}
.mx5-timeline-h__jahr {
	flex: 0 0 auto;
	margin: 0;
	padding: 4px 12px;
	/* Grauer Rahmen schon im Ruhezustand: ohne ihn sah die Reihe aus wie
	   eine Liste von Jahreszahlen, nicht wie Knöpfe. */
	border: 1px solid var(--tidm-border);
	border-radius: 3px;
	background: #fff;
	color: #666;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 0.86667em;
	line-height: 1.6;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* Beim Überfahren zeigt der Knopf, wohin es geht: roter Rahmen, rote
   Schrift. Dasselbe gilt für die Blätterleiste der Nachrichten - beide
   Leisten sind gleich gebaut und sollen sich gleich anfühlen.

   Das laufende Jahr ist ausgenommen: es trägt das rote Schild, roter Text
   darauf wäre unlesbar. In der Blätterleiste stellt sich die Frage nicht,
   dort ist die laufende Seite ein <strong> ohne Link. */
.mx5-timeline-h__jahr:not([aria-current="true"]):hover,
.mx5-timeline-h__jahr:not([aria-current="true"]):focus-visible {
	/* Die Jahre sind <button>, und das Theme faerbt jeden Knopf beim
	   Ueberfahren dunkelrot (button:hover). Auf dem dunkelroten Grund stand
	   dann roter Text. Die Flaeche wird deshalb ausdruecklich wieder auf
	   Weiss gesetzt - die Blaetterleiste besteht aus <a> und ist von der
	   Theme-Regel gar nicht betroffen. */
	background: #fff;
	color: var(--tidm-accent);
	border-color: var(--tidm-accent);
}
/* Das laufende Jahr traegt dasselbe rote Schild wie jede Ueberschrift. */
.mx5-timeline-h__jahr[aria-current="true"] {
	background: var(--tidm-accent);
	border-color: var(--tidm-accent);
	color: #fff;
}

/* ---- Buehne ---- */
.mx5-timeline-h__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Seitlich Luft fuer den Fokusrahmen und die zuruecktretenden Buehnen. */
	margin: 0 -20px;
	padding: 0 20px 8px;
}
.mx5-timeline-h__track::-webkit-scrollbar {
	display: none;
}
.mx5-timeline-h__track:focus-visible {
	outline: 2px solid var(--tidm-accent);
	outline-offset: 4px;
}
.mx5-timeline-h__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	display: grid;
	/* Halbe/halbe wie die Spalten der Abschnitte darunter. */
	grid-template-columns: 1fr 1fr;
	gap: var(--luecke);
	align-items: center;
	min-height: var(--buehne);
	/* Was gerade nicht dran ist, tritt zurueck: beim Blaettern zieht das Auge
	   dadurch mit, statt zwischen zwei gleich lauten Bildern zu pendeln.
	   Nur ueber die Deckkraft, nicht ueber den Massstab - ein verkleinertes
	   Nachbarbild steht sonst sichtbar schmaler als die Spalten darunter. */
	opacity: 0.25;
	transition: opacity 0.45s ease;
}
.mx5-timeline-h__slide.-aktiv {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.mx5-timeline-h__slide {
		opacity: 1;
		transition: none;
	}
}
.mx5-timeline-h__slide.-ohne-bild {
	grid-template-columns: 1fr;
}

.mx5-timeline-h__image {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 3px;
	background: var(--tidm-border);
}
.mx5-timeline-h__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.mx5-timeline-h__body {
	position: relative;
	max-width: 60ch;
}
/* Die Jahreszahl gross und blass hinter dem Text: sie sagt auf einen Blick,
   wo man ist, ohne eine Zeile zu kosten. */
.mx5-timeline-h__gross {
	position: absolute;
	top: -0.42em;
	left: -0.06em;
	z-index: 0;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 5.5em;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(0, 0, 0, 0.06);
	pointer-events: none;
	user-select: none;
}
.mx5-timeline-h__year,
.mx5-timeline-h__subline,
.mx5-timeline-h__text {
	position: relative;
	z-index: 1;
}
.mx5-timeline-h__year {
	margin: 0 0 12px !important;
}
.mx5-timeline-h__subline {
	margin: 0 0 8px !important;
}
.mx5-timeline-h__text p {
	margin: 0 0 0.8em;
}
.mx5-timeline-h__text p:last-child {
	margin-bottom: 0;
}
/* Ohne Bild wird der Text selbst zur Buehne: ein ruhiges Feld in der Hoehe
   der Bildbuehne. Vorher stand der Satz ("431 MX-5 nahmen teil.") als 57 px
   hohe Zeile in einer 463 px hohen leeren Flaeche, daneben eine riesige
   blasse Jahreszahl - das sah nach Fehler aus, nicht nach Gestaltung.

   Die blasse Zahl entfaellt hier: ohne Bild steht die Jahreszahl ohnehin als
   Ueberschrift daneben, zweimal dieselbe Zahl ist eine zu viel. */
.mx5-timeline-h__slide.-ohne-bild .mx5-timeline-h__body {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* So breit wie die Bildbuehne der uebrigen Jahre, mittig - ueber die
	   ganzen 1200 px waere es eine graue Flaeche mit zwei Zeilen darin. */
	/* "width: 100%" muss dabeistehen: mit auto-Raendern richtet sich die
	   Breite sonst nach dem Inhalt, und aus dem Feld wird eine schmale
	   Saeule um zwei Zeilen herum. */
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	padding: 32px 36px;
	background: #f4f4f4;
	border-radius: 3px;
}
.mx5-timeline-h__slide.-ohne-bild .mx5-timeline-h__gross {
	display: none;
}

/* ---- Pfeile ---- */
.mx5-timeline-h__controls {
	position: relative;
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}
/* Vor und zurueck im Markenrot, deckend - keine Transparenz, auch nicht im
   abgeschalteten Zustand: ein durchscheinender Knopf nimmt auf dem dunklen
   Grund die Farbe dahinter an und sieht schmutzig aus. */
.mx5-timeline-h__nav {
	width: var(--schiene);
	height: var(--schiene);
	padding: 0;
	/* Das Theme gibt jedem Knopf einen Aussenabstand nach oben. */
	margin: 0;
	border: 1px solid var(--tidm-accent);
	border-radius: 3px;
	background: var(--tidm-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Chevron aus zwei Rahmenkanten - dasselbe Zeichen wie die Pfeile der
   Unternavigation (.nav-scroll-btn), nur eine Spur groesser. Als Rahmen
   gezeichnet sitzt es exakt mittig, ein Schriftzeichen haengt je nach
   Schnitt zu hoch oder zu weit links. */
.mx5-timeline-h__nav:before {
	content: "";
	width: 10px;
	height: 10px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
}
.mx5-timeline-h__nav.-prev:before {
	transform: rotate(-135deg);
	margin-left: 3px;
}
.mx5-timeline-h__nav.-next:before {
	transform: rotate(45deg);
	margin-right: 3px;
}
.mx5-timeline-h__nav:hover:not(:disabled),
.mx5-timeline-h__nav:focus-visible:not(:disabled) {
	background: #8d081e;
	border-color: #8d081e;
}
.mx5-timeline-h__nav:disabled {
	background: #55555a;
	border-color: #55555a;
	color: #fff;
	cursor: default;
}

/* ---- Auf dunklem Grund ---- */
.-background-color-1 .mx5-timeline-h__rail:before,
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-timeline-h__rail:before {
	background: rgba(255, 255, 255, 0.22);
}
.-background-color-1 .mx5-timeline-h__slide.-ohne-bild .mx5-timeline-h__body,
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-timeline-h__slide.-ohne-bild .mx5-timeline-h__body {
	background: rgba(255, 255, 255, 0.08);
}
.-background-color-1 .mx5-timeline-h__gross,
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-timeline-h__gross {
	color: rgba(255, 255, 255, 0.08);
}
.-background-color-1 .mx5-timeline-h__jahr,
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-timeline-h__jahr {
	background: #18181b;
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.65);
}
.-background-color-1 .mx5-timeline-h__jahr:not([aria-current="true"]):hover,
.-background-color-1 .mx5-timeline-h__jahr:not([aria-current="true"]):focus-visible,
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-timeline-h__jahr:not([aria-current="true"]):hover,
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-timeline-h__jahr:not([aria-current="true"]):focus-visible {
	background: #18181b;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}
.-background-color-1 .mx5-timeline-h__jahr[aria-current="true"],
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-timeline-h__jahr[aria-current="true"] {
	background: var(--tidm-accent);
	border-color: var(--tidm-accent);
	color: #fff;
}
/* Auf dunklem Grund bleiben die Pfeile rot - sie sind die einzige Bedienung
   der Buehne und sollen sich abheben. */

/* ---- Schmal ---- */
@media (max-width: 800px) {
	.mx5-timeline-h {
		--buehne: 0;
		--luecke: 18px;
	}
	.mx5-timeline-h__slide {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 18px;
	}
	.mx5-timeline-h__gross {
		font-size: 4em;
	}
	.mx5-timeline-h__slide.-ohne-bild .mx5-timeline-h__body {
		max-width: none;
		padding: 22px 20px;
	}
}

/* ---- Telefon ----
   Die beiden Pfeile nehmen auf 390 px ein Drittel der Leiste ein (104 von
   357) - gewischt wird dort ohnehin, und die Jahre selbst sind die
   Sprungziele. Ohne sie laeuft die Jahresleiste ueber die volle Breite. */
@media only screen and (max-width: 640px) {
	.mx5-timeline-h__controls {
		display: none;
	}

	/* Die Jahre rasten beim Wischen ein, damit keine halbe Zahl am Rand
	   stehen bleibt. */
	.mx5-timeline-h__years {
		scroll-snap-type: x proximity;
		scroll-padding-left: 2px;
	}

	.mx5-timeline-h__jahr {
		scroll-snap-align: start;
	}

	/* Die blasse Zahl hinter dem Text wird kleiner: bei 4em stand sie quer
	   ueber der Ueberschrift und machte sie schwer lesbar. */
	.mx5-timeline-h__gross {
		font-size: 3.2em;
		top: -0.3em;
	}

	/* Bild etwas hoeher als 16:9 - auf dem Telefon ist der Streifen sonst
	   nur gut 200 px hoch und das Motiv kaum zu erkennen. */
	.mx5-timeline-h__image {
		aspect-ratio: 3 / 2;
	}
}

/* ------------------------------------------------------------------
   Countdown (rsce_mx5_countdown)
   ------------------------------------------------------------------
   Vier Felder nebeneinander, darunter die Einheit als rotes Schild - dieselbe
   Form wie jede Ueberschrift auf der Seite. */
/* Die Ueberschrift gehoert zum Countdown und steht mittig darueber. Das rote
   Schild der Theme-Ueberschriften ist ein Inline-Block, mittig heisst hier
   also: der Block selbst wird zentriert. */
/* Eigener Bereich: oben und unten dieselbe Luft, damit der Countdown zwischen
   dem Abschnitt darueber und dem roten Band darunter fuer sich steht. */
.mx5-countdown-block {
	text-align: center;
	padding: 48px 0 56px;
}
/* Das rote Schild ist im Theme zwar ein Block, aber nur so breit wie sein
   Text ("fit-content") - zentriert wird es deshalb ueber die Aussenabstaende,
   nicht ueber text-align. */
.main-content .mx5-countdown-block .mx5-countdown__ueberschrift,
.mx5-countdown__ueberschrift {
	margin: 0 auto 34px !important;
}

.mx5-countdown {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	margin: 0 auto;
}
.mx5-countdown__feld {
	flex: 1;
	text-align: center;
}
.mx5-countdown__zahl {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 3em;
	line-height: 1.1;
	color: #18181b;
	font-variant-numeric: tabular-nums;
}
.mx5-countdown__einheit {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--tidm-accent);
	color: #fff;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
}
/* Nach Ablauf steht dort ein Satz statt vier Nullen. */
.mx5-countdown.-abgelaufen {
	justify-content: center;
}
.mx5-countdown__ende {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 1.6em;
	color: var(--tidm-accent);
	text-align: center;
}
/* Auf dunklem Grund die Zahlen hell. */
.-background-color-1 .mx5-countdown__zahl,
.main-content .mod_article > .centered-wrapper:first-child:not(:only-child) .mx5-countdown__zahl {
	color: #fff;
}
@media (max-width: 600px) {
	.mx5-countdown__zahl {
		font-size: 2em;
	}
	.mx5-countdown__einheit {
		font-size: 10px;
	}
}

/* ------------------------------------------------------------------
   Handlungsaufruf (rsce_mx5_cta)
   ------------------------------------------------------------------
   Rotes Band ueber die ganze Fensterbreite, innen auf die Inhaltsbreite
   begrenzt. Alles steht mittig untereinander: Dachzeile, Ueberschrift, ein
   Satz, Knopf, Hinweis. Zwei Spalten haben hier nicht getragen -- der Text
   links war kuerzer als seine Spalte, der Knopf rechts stand deshalb immer
   irgendwo, nur nicht in der Mitte. Mittig ist das Band in jeder Breite
   ruhig. */
.mx5-cta {
	position: relative;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	/* Vier Lagen, von oben nach unten:
	   1. warmes Licht oben links - dort steht die Ansage,
	   2. dunkler Zug nach unten rechts, damit das Band Tiefe bekommt,
	   3. feiner Verlauf ueber die Diagonale,
	   4. das Markenrot als Grund. */
	background:
		radial-gradient(60% 120% at 16% -20%, rgba(255, 92, 120, 0.42) 0%, rgba(255, 92, 120, 0) 60%),
		radial-gradient(70% 140% at 96% 120%, rgba(60, 0, 10, 0.55) 0%, rgba(60, 0, 10, 0) 62%),
		linear-gradient(118deg, #c00d2b 0%, #a20a23 46%, #7d0719 100%),
		#b60b27;
}
/* Schraege Streifen wie Fahrtwind - sehr flach gehalten, sie sollen Struktur
   geben und nicht mitreden. Zusaetzlich oben eine helle Haarlinie, die das
   Band vom Abschnitt darueber abhebt. */
.mx5-cta:before {
	content: "";
	position: absolute;
	inset: -20% -10%;
	z-index: 0;
	background: repeating-linear-gradient(
		112deg,
		rgba(255, 255, 255, 0.055) 0px,
		rgba(255, 255, 255, 0.055) 2px,
		rgba(255, 255, 255, 0) 2px,
		rgba(255, 255, 255, 0) 26px
	);
	-webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 38%, #000 100%);
	mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 38%, #000 100%);
	pointer-events: none;
}
/* Die Jahreszahl als Wasserzeichen, halb aus dem Bild geschoben - dieselbe
   Idee wie hinter den Jahren der Zeitachse. */
.mx5-cta:after {
	content: "2027";
	position: absolute;
	right: -0.06em;
	top: 50%;
	z-index: 0;
	transform: translateY(-50%);
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 15em;
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.07);
	pointer-events: none;
	user-select: none;
}

/* Einblenden beim Scrollen wie die Abschnitte. Die Regeln des Themes haengen
   an ".centered-wrapper" - die Klasse traegt das Band nicht, also hier
   dieselbe Mechanik mit denselben Zeiten fuer ".mx5-cta". */
.mx5-cta.-fade-in.not-in-view {
	opacity: 0;
}
.mx5-cta.-fade-in.in-view {
	transition: opacity 1.5s;
}

.mx5-cta__innen {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 52px 20px 54px;
}
/* Haarlinien oben und unten: sie setzen das Band gegen die Abschnitte ab,
   ohne dass ein Rahmen noetig waere. */
.mx5-cta__innen:after {
	content: "";
	position: absolute;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
}

/* Die Trennlinie sitzt genau auf der Haelfte und gehoert zum Container,
   nicht zu einer der beiden Spalten. */
.mx5-cta__innen:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 52px;
	bottom: 54px;
	width: 1px;
	background: rgba(255, 255, 255, 0.22);
}
.mx5-cta__inhalt {
	max-width: 52ch;
	margin: 0;
}
.mx5-cta__kicker {
	margin-bottom: 10px;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}
/* Der lange Selektor ist Absicht: die Theme-Regel fuer Ueberschriften ohne
   <span> setzt das rote Schild mit !important und ist spezifischer als eine
   einzelne Klasse. */
.main-content .mx5-cta .mx5-cta__headline,
.mx5-cta__headline {
	margin: 0 0 12px !important;
	font-family: 'Nunito', 'Open Sans', sans-serif !important;
	font-weight: 800 !important;
	font-size: 2.4em !important;
	line-height: 1.12 !important;
	color: #fff !important;
	text-transform: none !important;
	background: none !important;
	background-color: transparent !important;
	padding: 0 !important;
}
.mx5-cta__text {
	font-size: 1.05em;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}
.mx5-cta__text p {
	margin: 0 0 0.6em;
}
.mx5-cta__text p:last-child {
	margin-bottom: 0;
}
.mx5-cta__text a {
	color: #fff;
	text-decoration: underline;
}

/* Kein Innenabstand und keine Rahmenlinie an dieser Spalte: beides wuerde
   die Mitte verschieben, der Knopf saesse dann um den halben Abstand zu weit
   rechts. Die Trennlinie zeichnet deshalb der Container (siehe unten). */
.mx5-cta__aktion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.mx5-cta__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 17px 38px;
	border-radius: 3px;
	background: #fff;
	color: var(--tidm-accent);
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 1.1em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
/* Chevron wie in der Unternavigation und an der Zeitachse. */
.mx5-cta__knopf:after {
	content: "";
	width: 9px;
	height: 9px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	transition: margin-left 0.2s ease;
}
.mx5-cta__knopf:hover,
.mx5-cta__knopf:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
	background: #18181b;
	color: #fff;
}
.mx5-cta__knopf:hover:after,
.mx5-cta__knopf:focus-visible:after {
	margin-left: 5px;
}
.mx5-cta__hinweis {
	margin-top: 12px;
	font-size: 0.86667em;
	color: rgba(255, 255, 255, 0.8);
}
.mx5-cta__zweit {
	display: inline-block;
	margin-top: 10px;
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.mx5-cta__knopf {
		transition: none;
	}
}

/* Schmal: untereinander, die Trennlinie wandert nach oben. */
@media (max-width: 900px) {
	.mx5-cta__innen {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 38px 20px 40px;
	}
	.mx5-cta__headline {
		font-size: 1.8em !important;
	}
	.mx5-cta:after {
		font-size: 8em;
		opacity: 0.7;
	}
	.mx5-cta__innen:before {
		display: none;
	}
	.mx5-cta__aktion {
		padding-top: 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
		align-items: stretch;
	}
	.mx5-cta__knopf {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   Handlungsaufruf, zweite Fassung: links schwarz, rechts rot
   ------------------------------------------------------------------
   Keine Verlaeufe, kein Schimmer: zwei glatte Flaechen, dazwischen eine
   Schraege. Links steht die Ansage auf Schwarz, rechts der Knopf auf Rot.
   Umschalten im Backend ueber das Feld "Gestaltung". */
.mx5-cta.-stil-dunkel {
	background: #18181b;
}
/* Die rote Haelfte. Der Schnitt laeuft von oben links nach unten rechts -
   eine gerade Kante, keine weiche Blende. */
.mx5-cta.-stil-dunkel:before {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 60%;
	z-index: 0;
	background: var(--tidm-accent);
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
	-webkit-mask-image: none;
	mask-image: none;
	opacity: 1;
	pointer-events: none;
}
/* Ohne Wasserzeichen: auf zwei glatten Flaechen waere es nur Unruhe. */
.mx5-cta.-stil-dunkel:after {
	content: none;
}
.mx5-cta.-stil-dunkel .mx5-cta__kicker {
	color: rgba(255, 255, 255, 0.7);
}
/* Der Knopf steht auf Rot, also weiss - unter dem Zeiger dreht es sich um. */
.mx5-cta.-stil-dunkel .mx5-cta__knopf {
	background: #fff;
	color: var(--tidm-accent);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.mx5-cta.-stil-dunkel .mx5-cta__knopf:hover,
.mx5-cta.-stil-dunkel .mx5-cta__knopf:focus-visible {
	background: #18181b;
	color: #fff;
}
/* Trennlinie und Haarlinie entfallen - die Schraege teilt das Band schon. */
.mx5-cta.-stil-dunkel .mx5-cta__innen:before,
.mx5-cta.-stil-dunkel .mx5-cta__innen:after {
	display: none;
}

@media (max-width: 900px) {
	/* Schmal liegt die Teilung waagerecht: oben schwarz, unten rot. */
	.mx5-cta.-stil-dunkel:before {
		inset: auto 0 0 0;
		width: auto;
		height: 52%;
		clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	}
}

/* ------------------------------------------------------------------
   Handlungsaufruf, dritte Fassung: rot mit Zielflagge
   ------------------------------------------------------------------
   Rote Flaeche, oben und unten ein schmales Karoband wie die Zielflagge.
   Das Karo entsteht aus zwei Verlaeufen (kein Bild), die Kachelgroesse steht
   als Variable - 14px liest sich auf Abstand noch als Flagge, ohne zu
   flimmern. */
.mx5-cta.-stil-flagge {
	--karo: 14px;
	/* Testweise ohne Verlauf: glattes Markenrot. */
	background: var(--tidm-accent);
}
.mx5-cta.-stil-flagge:before,
.mx5-cta.-stil-flagge:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	width: auto;
	height: calc(var(--karo) * 2);
	z-index: 0;
	background:
		repeating-conic-gradient(#18181b 0% 25%, #fff 0% 50%) 0 0 / calc(var(--karo) * 2) calc(var(--karo) * 2);
	clip-path: none;
	opacity: 1;
	-webkit-mask-image: none;
	mask-image: none;
	color: transparent;
	font-size: 0;
	/* Die Grundfassungen setzen an denselben Pseudo-Elementen eine
	   Verschiebung und eine Schriftgroesse (Wasserzeichen "2027"). Beides muss
	   hier ausdruecklich zurueck, sonst sitzt das untere Karoband eine halbe
	   Kachel zu hoch. */
	transform: none;
	line-height: 0;
	letter-spacing: normal;
	pointer-events: none;
}
.mx5-cta.-stil-flagge:before {
	top: 0;
	bottom: auto;
}
.mx5-cta.-stil-flagge:after {
	top: auto;
	bottom: 0;
	/* Die untere Bahn um eine halbe Kachel versetzt, sonst stehen oben und
	   unten dieselben Felder untereinander und es wirkt wie ein Raster. */
	background-position: var(--karo) 0;
}
/* Platz fuer die beiden Baender. */
.mx5-cta.-stil-flagge .mx5-cta__innen {
	padding-top: calc(var(--karo) * 2 + 40px);
	padding-bottom: calc(var(--karo) * 2 + 42px);
}
.mx5-cta.-stil-flagge .mx5-cta__innen:before {
	top: calc(var(--karo) * 2 + 40px);
	bottom: calc(var(--karo) * 2 + 42px);
}
.mx5-cta.-stil-flagge .mx5-cta__innen:after {
	display: none;
}
.mx5-cta.-stil-flagge .mx5-cta__knopf {
	background: #fff;
	color: var(--tidm-accent);
}
.mx5-cta.-stil-flagge .mx5-cta__knopf:hover,
.mx5-cta.-stil-flagge .mx5-cta__knopf:focus-visible {
	background: #18181b;
	color: #fff;
}

@media (max-width: 900px) {
	.mx5-cta.-stil-flagge {
		--karo: 10px;
	}
}

/* ------------------------------------------------------------------
   Bildband mit Parallaxe (rsce_mx5_hero)
   ------------------------------------------------------------------
   Das Bild bleibt wie es ist: keine Einfaerbung, kein Zoom, kein Raster.
   Geblieben ist allein die Parallaxe - der Rahmen um das Bild ist hoeher als
   das Band und wandert beim Scrollen. ("background-attachment: fixed" waere
   der kurze Weg, ruckelt aber auf Mobilgeraeten und ist auf iOS praktisch
   unbrauchbar.) Unten ein leichter Schleier, damit der Uebergang in den
   dunklen Abschnitt darunter nicht als Kante steht. */
.mx5-hero {
	position: relative;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	height: var(--hoehe, 380px);
	overflow: hidden;
	background: #18181b;
}
/* Einblenden wie die Abschnitte. Die Regeln des Themes haengen an
   ".centered-wrapper" - die Klasse traegt das Bildband nicht, also hier
   dieselbe Mechanik mit derselben Zeit. */
.mx5-hero.-fade-in.not-in-view {
	opacity: 0;
}
.mx5-hero.-fade-in.in-view {
	transition: opacity 1.5s;
}

.mx5-hero__lauf {
	position: absolute;
	left: 0;
	right: 0;
	/* Ueberstand fuer die Bewegung. */
	top: -14%;
	bottom: -14%;
	will-change: transform;
}
.mx5-hero__bild {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* Die zweite Bildlage (Einfaerbung) und das Raster sind abgeschaltet - das
   Markup bleibt, damit beides ohne Umbau wieder zu haben ist. */
.mx5-hero__farbe,
.mx5-hero__raster {
	display: none;
}
/* Kein Karoband mehr am Bildband: zusammen mit dem Handlungsaufruf weiter
   unten waren es zwei Karos auf einer Seite - eins zu viel. Geblieben ist
   der dunkle Auslauf, damit das Bild nicht als Kante in den schwarzen
   Abschnitt darunter stoesst. */
.mx5-hero__flagge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(0deg, rgba(24, 24, 27, 0.5) 0%, rgba(24, 24, 27, 0) 100%);
	pointer-events: none;
}

.mx5-hero__text {
	position: absolute;
	inset: auto 0 0 0;
	padding: 28px 20px 26px;
	color: #fff;
	text-align: center;
}
.mx5-hero__text p {
	max-width: 62ch;
	margin: 0 auto;
}

@media (max-width: 800px) {
	.mx5-hero {
		height: var(--hoehe-klein, 240px);
	}
}


/* ------------------------------------------------------------------
   Bildband: Siebdruck (rsce_mx5_hero, Bildwirkung "siebdruck")
   ------------------------------------------------------------------
   Zweifarbig wie ein Plakatdruck: der harte Kontrast macht aus dem Foto
   Flaechen, die rote Lage ersetzt ueber "lighten" alles Dunkle durch das
   Markenrot, und ein feines Punktraster darueber gibt die Rasterung.
   Alles CSS - kein zweites Bild, keine Bibliothek. */
.mx5-hero.-siebdruck .mx5-hero__bild {
	filter: grayscale(1) contrast(2.6) brightness(1.12);
}
.mx5-hero.-siebdruck .mx5-hero__farbe {
	display: block;
	background-image: none !important;
	background-color: var(--tidm-accent);
	/* "lighten": Schwarz wird rot, Weiss bleibt weiss - das ergibt die
	   zwei Farben des Drucks. */
	mix-blend-mode: lighten;
	opacity: 1;
}
.mx5-hero.-siebdruck .mx5-hero__raster {
	display: block;
	background-image: radial-gradient(rgba(0, 0, 0, 0.42) 0.9px, rgba(0, 0, 0, 0) 1.4px);
	background-size: 4px 4px;
	mix-blend-mode: multiply;
	opacity: 0.85;
}
/* Auch im Druck laeuft unten Dunkel aus, nicht Papierweiss: darunter folgt
   der schwarze Abschnitt, und ein heller Saum davor sah aus wie ein Fehler. */
.mx5-hero.-siebdruck .mx5-hero__flagge {
	background: linear-gradient(0deg, rgba(24, 24, 27, 0.6) 0%, rgba(24, 24, 27, 0) 100%);
}

/* Siebdruck, Teil 2: Quadratraster, Fehldruck und Lichtstreif.
   ------------------------------------------------------------------
   Drei Lagen, die nur in der Fassung "siebdruck" sichtbar sind. */

/* Das feine Liniengitter ist raus - gemeint war das Karo der Zielflagge,
   siehe __flagge weiter unten. */
.mx5-hero__gitter {
	display: none;
}

/* Fehldruck und Lichtstreif sind wieder raus - beides wirkte aufgesetzt.
   Die Bewegung kommt jetzt allein aus dem Scrollen (siehe custom.js): das
   Bild wandert und zoomt dabei langsam auf. Markup bleibt stehen, damit
   nichts umgebaut werden muss, falls doch wieder gewuenscht. */
.mx5-hero__versatz,
.mx5-hero__streif {
	display: none !important;
}

/* Bilder mit Lightbox: Der Effekt unter dem Zeiger bleibt der des Themes
   (rote Flaeche und Lupe). Eine eigene Fassung mit Zoom, Verlauf, weissem
   Kreis und Innenkante war zu viel - sie ist wieder raus. */


/* Preistabelle: das Aussehen steckt weiter unten unter "#price" - dieselbe
   Fassung wie auf der Live-Seite. Das Element auf der Seite traegt deshalb
   die CSS-ID "price"; ein zweiter, eigener Satz Regeln waere nur doppelte
   Pflege gewesen. */


/* ------------------------------------------------------------------
   Preistabelle: Vorrang fuer die "#price"-Fassung
   ------------------------------------------------------------------
   Die Ueberschriften-Regel dieses Stylesheets (".main-content h3:not(.ss *)
   :not(:has(span))" - das rote Schild) ist spezifischer als "#price …" und
   hat den Kopf der Karten auf Schildgroesse zusammengezogen. Hier stehen
   deshalb dieselben Werte noch einmal mit ".main-content" davor. Nur das,
   was sonst verliert - alles Uebrige kommt weiter aus dem #price-Block. */
.main-content #price .pricing-table-plan h3 {
	display: block !important;
	/* Das Schild des Themes ist nur so breit wie sein Text ("fit-content") -
	   hier soll der Kopf ueber die ganze Karte laufen. */
	width: auto !important;
	margin: 0 !important;
	padding: 1.35em 1.2em !important;
	font-family: 'Nunito', 'Open Sans', sans-serif !important;
	font-size: 0.74rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	color: #18181b !important;
	background: #fff !important;
	border-bottom: 1px solid #e4e4e7 !important;
	border-radius: 3px 3px 0 0 !important;
}
.main-content #price .pricing-table-plan.-highlighted h3 {
	/* Die hervorgehobene Karte traegt oben etwas mehr Luft - wie live. */
	padding: 1.7em 1.2em !important;
	color: #fff !important;
	background: #18181b !important;
	border-bottom: 0 !important;
}
/* Abstand wie auf der Live-Seite. */
#price.pricing-table {
	gap: 20px;
}

/* ------------------------------------------------------------------
   Preistabelle: Feinschliff
   ------------------------------------------------------------------
   Aufbau und Farben bleiben wie auf der Live-Seite (#price-Block weiter
   oben). Hier nur, was das Lesen erleichtert: gleich hohe Karten, Haken
   statt blosser Aufzaehlung, ruhigere Linien, ein Hinweis unter dem Preis
   und eine Karte, die unter dem Zeiger leicht reagiert. */

/* Gleich hoch: die Merkmalsliste nimmt den Rest der Karte ein, dadurch
   enden alle drei Karten auf derselben Linie. */
#price .pricing-table-plan ul {
	flex: 1;
}

/* Die hervorgehobene Karte steht eine Spur hoeher und wirft einen Schatten -
   ohne dass sich Rahmen oder Farben aendern. */
#price .pricing-table-plan.-highlighted {
	transform: translateY(-8px);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.13);
}

/* Unter dem Zeiger hebt sich jede Karte leicht. */
#price .pricing-table-plan {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
#price .pricing-table-plan:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}
#price .pricing-table-plan.-highlighted:hover {
	transform: translateY(-12px);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	#price .pricing-table-plan,
	#price .pricing-table-plan.-highlighted {
		transition: none;
		transform: none;
	}
	#price .pricing-table-plan:hover {
		transform: none;
	}
}

/* Kleingedrucktes: Standangabe der Teilnahmebedingungen und der
   Nettopreis-Hinweis unter der Preistabelle. Kleiner und leiser als der
   Fliesstext - es gehoert dazu, soll aber nicht mitlesen wollen.
   ".main-content" davor, weil die Textregeln des Themes sonst gewinnen und
   die Zeile auf normaler Groesse stehen bleibt. */
.main-content .rte p.stand,
.main-content .content-text p.stand,
.main-content p.stand,
p.stand {
	margin-top: 28px !important;
	font-size: 0.8em !important;
	line-height: 1.5;
	color: #999 !important;
}

/* ------------------------------------------------------------------
   Luft in den Abschnitten
   ------------------------------------------------------------------
   Die Abschnitte standen ohne Innenabstand da: Text klebte oben und unten an
   der Kante des farbigen Bereichs. Das Theme kennt dafuer Klassen
   (".padding-top-s" = 50px und so weiter), die aber an jedem Element einzeln
   gesetzt werden muessten. Hier steht der Wert deshalb einmal fuer alle;
   wer an einem Abschnitt doch eine Theme-Klasse setzt, gewinnt weiterhin -
   die bringen "!important" mit. */
.main-content .mod_article > .centered-wrapper {
	padding-top: 24px;
	padding-bottom: 24px;
}
/* Der letzte Abschnitt traegt zusaetzlich die Luft zum Fuss (siehe oben). */
.main-content .mod_article > .centered-wrapper:last-child {
	padding-bottom: 64px;
}

/* ------------------------------------------------------------------
   Anmeldestand (rsce_mx5_teilnehmer)
   ------------------------------------------------------------------
   Links die vergebenen Plaetze als grosse Zahl mit Balken, rechts die
   Verteilung auf die Modellreihen. Zahlen in Nunito, Balken im Markenrot -
   dieselbe Sprache wie Countdown und Preistabelle. */
.mx5-stand {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin: 8px 0 4px;
}
/* Die Bezeichnungen sind jetzt Ueberschriften (h4) und tragen damit das
   Schild des Themes wie jede andere Ueberschrift auch. Hier nur der
   Abstand. */
.main-content .mx5-stand__titel,
.mx5-stand__titel {
	margin: 0 0 14px !important;
}
.mx5-stand__zahl {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	line-height: 1;
}
.mx5-stand__zahl strong {
	font-size: 3.2em;
	font-weight: 800;
	color: var(--tidm-accent);
}
.mx5-stand__zahl span {
	margin-left: 0.15em;
	font-size: 1.4em;
	font-weight: 700;
	color: #999;
}
.mx5-stand__plaetze .mx5-stand__balken {
	display: block;
	height: 8px;
	margin-top: 14px;
	border-radius: 4px;
	background: rgba(127, 127, 127, 0.22);
	overflow: hidden;
}
.mx5-stand__balken-wert {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--tidm-accent);
}

/* Modellreihen: Kuerzel, Balken, Zahl - drei Spalten je Zeile. */
.mx5-stand__reihen ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mx5-stand__reihen li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
}
.mx5-stand__reihe {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 0.93333em;
}
.mx5-stand__reihen .mx5-stand__balken {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: rgba(127, 127, 127, 0.22);
	overflow: hidden;
}
.mx5-stand__anzahl {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 0.93333em;
	text-align: right;
	color: #666;
}

/* Auf dunklem Grund heller Text und ruhigere Balkenspur.
   Der Selektor nennt beide Wege, auf denen ein Abschnitt dunkel wird: die
   Utility-Klasse aus dem Theme und die Zaehlung (erster Abschnitt). */
.-background-color-1 .mx5-stand__zahl strong,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-stand__zahl strong {
	color: #fff;
}
.-background-color-1 .mx5-stand__zahl span,
.-background-color-1 .mx5-stand__anzahl,
.-background-color-1 .mx5-stand__personen,
.-background-color-1 .mx5-stand__personen strong,
.-background-color-1 .mx5-auswertung__anzahl,
.-background-color-1 .mx5-auswertung__leer,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-stand__zahl span,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-stand__anzahl,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-stand__personen,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-stand__personen strong,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-auswertung__anzahl,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-auswertung__leer {
	color: rgba(255, 255, 255, 0.75);
}
.-background-color-1 .mx5-stand__balken,
.-background-color-1 .mx5-auswertung__balken,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-stand__balken,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-auswertung__balken {
	background: rgba(255, 255, 255, 0.18);
}
/* Trennlinien der Auswertungen auf dunklem Grund. */
.-background-color-1 .mx5-auswertung li,
.main-content .mod_article > .centered-wrapper:nth-child(1 of .centered-wrapper) .mx5-auswertung li {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 800px) {
	.mx5-stand {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
}

/* ------------------------------------------------------------------
   Auswertung der Anmeldungen (rsce_mx5_statistik)
   ------------------------------------------------------------------
   Eine Zeile je Eintrag: Name, Balken, Anzahl - dieselbe Form wie die
   Modellreihen im Anmeldestand, damit beides zusammengehoert. */
.main-content .mx5-auswertung__titel,
.mx5-auswertung__titel {
	margin: 0 0 14px !important;
}
.mx5-auswertung ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mx5-auswertung li {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) 40px;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--tidm-border);
}
.mx5-auswertung li:last-child {
	border-bottom: 0;
}
.mx5-auswertung__name {
	font-size: 0.93333em;
}
.mx5-auswertung__balken {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: rgba(127, 127, 127, 0.22);
	overflow: hidden;
}
.mx5-auswertung__balken-wert {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--tidm-accent);
}
.mx5-auswertung__anzahl {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 0.93333em;
	text-align: right;
	color: #666;
}
.mx5-auswertung__leer {
	color: #999;
	font-size: 0.93333em;
}
@media (max-width: 600px) {
	.mx5-auswertung li {
		grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr) 34px;
		gap: 10px;
	}
}

/* Weiterführender Link unter einem Abschnitt: der Theme-Knopf (.button
   -small), wie unter Infos bei "Zu den Hotels und Pensionen". Die Klasse
   mehr-link dient hier nur als Haken für die Platzierung. */
.main-content p.mehr-link {
	margin: 0;
}

/* Statistik auf der Startseite: der Verweis auf die Zahlen-Seite steht in der
   Kopfzeile rechts, auf einer Linie mit der Überschrift - unter den Balken ist
   er zwischen Abschnittsende und nächstem Band kaum aufgefallen. Umgesetzt mit
   flex auf dem Wrapper, weil Überschrift, Zahlen und Link drei eigenständige
   Inhaltselemente sind: Kopfzeile teilen sich Text und Link, die Zahlen
   brechen darunter auf volle Breite. */
#statistik .centered-wrapper-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 28px;
}
#statistik .centered-wrapper-inner > .content-text:not(:has(p.mehr-link)) {
	flex: 1 1 320px;
}
#statistik .centered-wrapper-inner > .content-text:has(p.mehr-link) {
	flex: 0 0 auto;
	margin-left: auto;
}
#statistik .centered-wrapper-inner > .mx5-stand {
	flex: 1 1 100%;
}
#statistik p.mehr-link {
	margin: 0;
}
/* Schmal ist neben der Überschrift kein Platz - dann rutscht der Link per
   order wieder unter die Zahlen, statt sich zwischen Überschrift und Balken
   zu schieben. */
@media (max-width: 640px) {
	#statistik .centered-wrapper-inner > .content-text:has(p.mehr-link) {
		flex: 1 1 100%;
		order: 3;
		margin-left: 0;
	}
	#statistik .centered-wrapper-inner > .mx5-stand {
		order: 2;
	}
	#statistik p.mehr-link {
		margin-top: 18px;
	}
}

/* Personenzahl unter den angemeldeten Fahrzeugen. */
.mx5-stand__personen {
	margin-top: 14px;
	font-size: 0.93333em;
	color: #666;
}
.mx5-stand__personen strong {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	color: #242424;
}



/* Newsletter-Formular auf der Startseite: Vorname und Nachname teilen sich
   eine Zeile. Untereinander war die Spalte mit dem Formular rund 140 px
   laenger als der Text daneben, und die Sektion sass sichtbar schief. */
#newsletter .formbody {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
}
#newsletter .formbody > * {
	grid-column: 1 / -1;
}
#newsletter .formbody > .widget-text:nth-child(1 of .widget-text) {
	grid-column: 1;
}
#newsletter .formbody > .widget-text:nth-child(2 of .widget-text) {
	grid-column: 2;
}
@media (max-width: 600px) {
	#newsletter .formbody > .widget-text:nth-child(1 of .widget-text),
	#newsletter .formbody > .widget-text:nth-child(2 of .widget-text) {
		grid-column: 1 / -1;
	}
}

/* Warenkorb im mobilen Menü.
   Im ausgeklappten Menü hing er als nacktes Symbol unter der Navigation:
   88 px breit, links angeschlagen, ohne Beschriftung und ohne Trennlinie -
   daneben stehen Menüpunkte über die volle Breite. Jetzt ist er eine Zeile
   wie die anderen: Symbol, Wort, Anzahl rechts. */
/* Das Polster kommt aus dem Theme (Abstand um die Elemente neben der
   Navigation) und ist dort per !important gesetzt - deshalb hier ebenso. */
.main-navigation-mobile .ss-minicart {
	display: block;
	width: 100%;
	padding: 0 !important;
}
.main-navigation-mobile .ss-minicart__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11.115px 13.455px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 11.7px;
	letter-spacing: 1.17px;
	text-transform: uppercase;
	color: #fff;
}
.main-navigation-mobile .ss-minicart__toggle svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}
/* Die Beschriftung kommt aus dem Template (ss_mini_cart) und ist nur hier
   sichtbar - in der Kopfzeile steht das Symbol allein, im Menü zwischen
   Menüpunkten braucht es das Wort. Sie steht im Markup hinter der Anzahl und
   wird per "order" davor gezogen. */
.main-navigation-mobile .ss-minicart__label {
	display: block;
	order: 2;
	flex: 1 1 auto;
}
.main-navigation-mobile .ss-minicart__toggle svg {
	order: 1;
}
.main-navigation-mobile .ss-minicart__count {
	order: 3;
	flex: 0 0 auto;
	margin-left: auto;
	/* 18 statt 20 Pixel hoch: die Blase gibt sonst die Zeilenhöhe vor und
	   der Warenkorb steht einen Pixel tiefer als die Menüpunkte darüber. */
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 9px;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0;
}
/* Das Vorschaufenster hängt absolut am Symbol und säße im Menü über den
   Menüpunkten; der Tipp führt ohnehin direkt auf die Warenkorb-Seite. */
.main-navigation-mobile .ss-minicart__panel {
	display: none !important;
}

/* Nachrichtenübersicht.
   Kein Kachelraster und keine Trennlinien: jeder Eintrag ist ein eigener
   Abschnitt über die volle Breite und wechselt die Fläche wie überall sonst
   auf der Seite (weiß, dann #f7f7f7). Weil die Einträge im Modul stecken und
   nicht als centered-wrapper vorliegen, greift die Abschnitts-Automatik hier
   nicht - das Full-Bleed steht deshalb an der Nachricht selbst.
   Links das Datum wie eine Marginalie, rechts Titel, Anriss und Verweis. */
.mod_newslist {
	/* Der Abschnitt um die Liste bringt keinen eigenen Rand mehr mit, die
	   Polster sitzen an den Einträgen. */
	margin: -24px 0;
}
.tidm-news {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 28px;
	margin: 0 calc(50% - 50vw);
	padding: 32px calc(50vw - 50%);
	background: #fff;
}
.tidm-news:nth-of-type(even) {
	background: #f7f7f7;
}
/* Das Datum trägt dieselbe Form wie eine Überschrift der Infoseite, nur in
   Schwarz statt Rot - so bleibt das Rot den Titeln vorbehalten. */
.tidm-news__datum {
	align-self: start;
	display: inline-block;
	padding: 2px 15px;
	background: #18181b;
	border-radius: 3px;
	color: #fff;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	/* Dieselbe Größe wie der Titel daneben (h4), damit beide Schilder gleich
	   hoch sind und auf einer Linie liegen. */
	font-size: 1.2em;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
/* Die Titel bleiben rote Schilder wie die Überschriften auf der Infoseite,
   in der Größe einer h4 - dieselbe trägt das Datum daneben. */
.main-content .tidm-news .tidm-news__titel {
	font-size: 1.2em !important;
	line-height: 1.5 !important;
	margin: 0 0 12px !important;
}
.main-content .tidm-news .tidm-news__titel a {
	color: inherit;
	text-decoration: none;
}
/* Kein Unterstrich beim Überfahren: die Zeile zeigt ohnehin an, dass sie
   reagiert (das Schild dunkelt nach, der Chevron bekommt Farbe). Ein
   unterstrichenes Schild sähe daneben nach einem zweiten Ziel aus. */
.main-content .tidm-news .tidm-news__titel a:hover,
.main-content .tidm-news .tidm-news__titel a:focus-visible {
	text-decoration: none;
}
.tidm-news__teaser p {
	margin: 0 0 12px !important;
	color: var(--tidm-text-grey, #666);
}
.tidm-news__teaser p:last-child {
	margin-bottom: 0 !important;
}
/* Die ganze Zeile führt in den Beitrag: der Titel-Link legt sich über sein
   :after über die gesamte Kachel. Das Vorschaubild trägt einen eigenen Link
   auf dasselbe Ziel und liegt darüber - beides führt an denselben Ort. */
.main-content .tidm-news .tidm-news__titel a:after {
	content: "";
	position: absolute;
	inset: 0;
}
.tidm-news__pfeil {
	align-self: center;
	/* Der gedrehte Chevron ragt über seine Box hinaus - ohne den Abstand
	   stünde seine Spitze rechts über der Spaltenkante. */
	margin-right: 4px;
	width: 10px;
	height: 10px;
	border: solid var(--tidm-border);
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	transition: border-color 0.2s ease, margin-left 0.2s ease;
}
/* Beim Überfahren der Zeile zieht das Titel-Schild nach und der Chevron
   bekommt Farbe - so ist zu sehen, dass die ganze Fläche reagiert. */
.tidm-news:hover .tidm-news__pfeil {
	border-color: var(--tidm-accent);
	margin-left: 4px;
}
.main-content .tidm-news:hover .tidm-news__titel {
	background: #8d081e !important;
}

/* Schmal rutscht das Datum über den Titel - eine Marginalie und daneben eine
   Textspalte gehen sich auf dem Telefon sonst gegenseitig aus. */
@media (max-width: 640px) {
	/* Schmal stapeln Datum, Text und Pfeil untereinander - der Pfeil stand
	   dabei allein in einer letzten Zeile unter dem Text und sah aus wie ein
	   vergessenes Zeichen. Er gehört neben das Datum: zwei Spalten in der
	   ersten Zeile, der Text darunter über beide. */
	.tidm-news {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 10px;
	}
	.tidm-news__datum {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
	.tidm-news__pfeil {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		margin-right: 2px;
	}
	.tidm-news__inhalt {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* Der einzelne Beitrag: nur die Datumszeile bekommt eigene Regeln, die
   Zwischenüberschriften bleiben rote Schilder wie auf der Infoseite. */
.mod_newsreader .info {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 0.86667em;
	letter-spacing: 0.04em;
	color: var(--tidm-accent);
	margin: 0 0 16px !important;
}
.mod_newsreader h3 {
	margin-top: 32px !important;
}

/* Nachrichtenbeitrag: zwei Bänder statt einer Fläche.
   Datum, Überschrift und Anriss stehen dunkel im Kopf wie die erste Sektion
   jeder Seite, der Fließtext darunter auf Weiß. Das Modul steckt in einem
   einzigen centered-wrapper, deshalb sitzt das Full-Bleed an den Bändern. */
.tidm-beitrag {
	margin: -24px 0;
}
.tidm-beitrag__kopf,
.tidm-beitrag__text {
	margin: 0 calc(50% - 50vw);
	padding: 40px calc(50vw - 50%);
}
.tidm-beitrag__kopf {
	background: #18181b;
	color: #fff;
}
.tidm-beitrag__text {
	background: #fff;
}
/* Das Datum trägt dieselbe Form wie in der Übersicht, nur umgekehrt: dort
   ein schwarzes Schild auf hellem Grund, hier ein weißes auf dunklem. Als
   blasse Textzeile ging es neben der Überschrift unter. */
.tidm-beitrag__kopf .info {
	display: inline-block;
	margin: 0 0 16px !important;
	padding: 2px 15px;
	background: #fff;
	border-radius: 3px;
	color: #18181b;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 0.93333em;
	line-height: 1.66667;
	letter-spacing: 0.02em;
}
.tidm-beitrag__kopf .tidm-beitrag__anriss p {
	margin: 0 0 12px !important;
	color: #fff;
	font-size: 1.06667em;
}
.tidm-beitrag__kopf .tidm-beitrag__anriss p:last-child {
	margin-bottom: 0 !important;
}
.tidm-beitrag__text > .ce_text > p:first-child {
	margin-top: 0 !important;
}

/* Feinschliff am Beitrag: Lesebreite, Luft und die Rückführung.
   Über die volle Spaltenbreite (1200 px) laufen Zeilen mit weit über 150
   Zeichen - das liest niemand gern. Der Fließtext steht deshalb in einer
   Spalte von rund 75 Zeichen, die Überschriften laufen mit. */
.tidm-beitrag__kopf {
	padding-top: 52px;
	padding-bottom: 48px;
}
.main-content .tidm-beitrag__kopf h1 {
	font-size: 2em !important;
	line-height: 1.25 !important;
	margin: 0 0 18px !important;
}

/* Kopf und Text laufen über die ganze Spaltenbreite, wie alles andere auf
   den Seiten auch. */
.tidm-beitrag__kopf .tidm-beitrag__anriss p {
	font-size: 1.13333em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}
.tidm-beitrag__text {
	padding-top: 44px;
	padding-bottom: 52px;
}

.tidm-beitrag__text p {
	line-height: 1.75;
	margin: 0 0 18px !important;
}
.tidm-beitrag__text ul,
.tidm-beitrag__text ol {
	margin: 0 0 18px 1.2em;
	line-height: 1.75;
}
.tidm-beitrag__text li {
	margin-bottom: 6px;
}
.tidm-beitrag__text a {
	color: var(--tidm-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(182, 11, 39, 0.35);
}
.tidm-beitrag__text a:hover,
.tidm-beitrag__text a:focus-visible {
	border-bottom-color: var(--tidm-accent);
}
/* Die erste Zwischenüberschrift braucht keinen großen Vorlauf, sie steht
   ohnehin am Bandanfang. */
.main-content .tidm-beitrag__text .ce_text > h3:first-child {
	margin-top: 0 !important;
}
@media (max-width: 640px) {
	.tidm-beitrag__kopf {
		padding-top: 36px;
		padding-bottom: 32px;
	}
	.main-content .tidm-beitrag__kopf h1 {
		font-size: 1.6em !important;
	}
	.tidm-beitrag__text {
		padding-top: 32px;
		padding-bottom: 36px;
	}
}


/* Bild des Beitrags: ein eigenes Band zwischen Kopf und Text, über die volle
   Breite. Im Textfluss neben dem Anriss stand es klein und beliebig herum;
   als Band trägt es den Beitrag, so wie der Bildstreifen die Startseite. */
.tidm-beitrag__bild {
	margin: 0 calc(50% - 50vw);
	background: #18181b;
	line-height: 0;
}
.tidm-beitrag__bild .image_container,
.tidm-beitrag__bild figure {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}
.tidm-beitrag__bild img {
	display: block;
	width: 100%;
	height: clamp(220px, 38vw, 520px);
	object-fit: cover;
	border-radius: 0;
}
.tidm-beitrag__bild figcaption,
.tidm-beitrag__bild .caption {
	padding: 10px calc(50vw - 50%);
	background: #fff;
	color: var(--tidm-grey, #999);
	font-size: 0.86667em;
	line-height: 1.5;
}

/* Vorschaubild in der Übersicht: rechts neben Anriss und Verweis, in festem
   Seitenverhältnis zugeschnitten. Einträge ohne Bild nutzen die ganze Breite,
   die Zeile bleibt also in beiden Fällen ruhig. */
.tidm-news__spalten {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}
.tidm-news__text {
	flex: 1 1 auto;
	min-width: 0;
}
.tidm-news__bild {
	flex: 0 0 280px;
	display: block;
	line-height: 0;
}
.tidm-news__bild figure,
.tidm-news__bild .image_container,
.tidm-news__bild a {
	display: block;
	width: 100%;
	margin: 0;
	max-width: none;
}
.tidm-news__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 3px;
}
@media (max-width: 800px) {
	.tidm-news__spalten {
		flex-direction: column-reverse;
		gap: 16px;
	}
	.tidm-news__bild {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* Blätterleiste der Nachrichten, gebaut wie die Jahresleiste der Zeitachse
   unter Infos: eine Linie durch die Reihe, die Seitenzahlen als kleine
   weiße Knöpfe, die laufende Seite als rotes Schild, links und rechts die
   roten Pfeilfelder.
   Zugeschnitten auf .mod_newslist, damit andere Listen (Shop, Suche) ihre
   gewohnte Blätterleiste behalten. */
.mod_newslist .pagination {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 36px 0 0;
	padding: 0;
	border: 0;
}
.mod_newslist .pagination:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--tidm-border);
}
/* "Seite 1 von 2" bleibt für Screenreader stehen, nimmt aber keinen Platz -
   die Leiste zeigt es ohnehin. */
.mod_newslist .pagination > p {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.mod_newslist .pagination ul {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.mod_newslist .pagination ul::-webkit-scrollbar {
	display: none;
}
.mod_newslist .pagination li {
	margin: 0;
	flex: 0 0 auto;
}
.mod_newslist .pagination a,
.mod_newslist .pagination strong {
	display: block;
	padding: 4px 12px;
	border: 1px solid var(--tidm-border);
	border-radius: 3px;
	background: #fff;
	color: var(--tidm-text-grey, #666);
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 0.86667em;
	line-height: 1.6;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.mod_newslist .pagination a:hover,
.mod_newslist .pagination a:focus-visible {
	color: var(--tidm-accent);
	border-color: var(--tidm-accent);
}
/* Die laufende Seite trägt dasselbe rote Schild wie das laufende Jahr der
   Zeitachse. */
.mod_newslist .pagination strong.active {
	background: var(--tidm-accent);
	border-color: var(--tidm-accent);
	color: #fff;
}
/* Vor und Zurück als rote Felder mit Chevron - aus zwei Rahmenkanten
   gezeichnet, damit das Zeichen exakt mittig sitzt. */
/* Beide Pfeile stehen rechts nebeneinander wie an der Zeitachse. Contao gibt
   den Zurück-Pfeil auf der ersten Seite gar nicht erst aus (den Vorwärts-
   Pfeil auf der letzten ebenso wenig) - dann rutschte der verbleibende Pfeil
   an eine andere Stelle. Die fehlende Seite wird deshalb durch ein
   abgeschaltetes Feld ersetzt, wie es die Zeitachse an ihren Enden zeigt.
   Der Chevron steckt dort als SVG im Hintergrund, weil ein Pseudo-Element
   kein zweites tragen kann. */
/* "Anfang" und "Ende" entfallen: die Zeitachse kennt auch nur vor und
   zurück, und die Seitenzahlen daneben führen ohnehin direkt überall hin. */
.mod_newslist .pagination li.first,
.mod_newslist .pagination li.last {
	display: none;
}
.mod_newslist .pagination li.previous {
	order: 3;
	margin-left: auto;
}
.mod_newslist .pagination li.next {
	order: 4;
	margin-left: 6px;
}
.mod_newslist .pagination ul:not(:has(li.previous)) li.next {
	margin-left: 6px;
}
.mod_newslist .pagination ul:before,
.mod_newslist .pagination ul:after {
	width: 40px;
	height: 40px;
	border: 1px solid #55555a;
	border-radius: 3px;
	background-color: #55555a;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
}
/* Erste Seite: kein Zurück - Platzhalter davor. */
.mod_newslist .pagination ul:not(:has(li.previous)):before {
	content: "";
	order: 3;
	margin-left: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M7 1 3 5l4 4' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}
/* Letzte Seite: kein Vorwärts - Platzhalter dahinter. */
.mod_newslist .pagination ul:not(:has(li.next)):after {
	content: "";
	order: 5;
	margin-left: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}
.mod_newslist .pagination li.previous a,
.mod_newslist .pagination li.next a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-color: var(--tidm-accent);
	background: var(--tidm-accent);
	color: #fff;
	font-size: 0;
}
.mod_newslist .pagination li.previous a:hover,
.mod_newslist .pagination li.next a:hover,
.mod_newslist .pagination li.previous a:focus-visible,
.mod_newslist .pagination li.next a:focus-visible {
	background: #8d081e;
	border-color: #8d081e;
	color: #fff;
}
.mod_newslist .pagination li.previous a:before,
.mod_newslist .pagination li.next a:before {
	content: "";
	width: 10px;
	height: 10px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
}
.mod_newslist .pagination li.previous a:before {
	transform: rotate(-135deg);
	margin-left: 3px;
}
/* Vorwärts wie "Weiter" in der Anmeldung: das Wort, dahinter der Chevron.
   Contao schreibt "Vorwärts"/"Next" in den Link - das bleibt für
   Screenreader stehen, sichtbar ist das Wort aus dem Pseudo-Element. */
.mod_newslist .pagination li.next a,
.mod_newslist .pagination ul:not(:has(li.next)):after {
	width: auto;
	gap: 10px;
	padding: 0 16px;
}
.mod_newslist .pagination li.next a:before,
.mod_newslist .pagination ul:not(:has(li.next)):after {
	content: "Weiter";
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 0.80889rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}
:lang(en) .mod_newslist .pagination li.next a:before,
:lang(en) .mod_newslist .pagination ul:not(:has(li.next)):after {
	content: "Continue";
}
.mod_newslist .pagination li.next a:before {
	width: auto;
	height: auto;
	border: 0;
	transform: none;
}
.mod_newslist .pagination li.next a:after {
	content: "";
	width: 10px;
	height: 10px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	margin-right: 3px;
}
/* Letzte Seite: dasselbe Feld grau - der Chevron sitzt hier im Hintergrund. */
.mod_newslist .pagination ul:not(:has(li.next)):after {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-right: 38px;
	color: #fff;
	background-position: right 16px center;
}
/* Die Zahlenreihe steht links, die Pfeile rechts. */
.mod_newslist .pagination li:not(.first):not(.previous):not(.next):not(.last) {
	order: 1;
}

/* Anmeldeseite: das Schrittband des Anmelde-Moduls läuft über die volle
   Breite und sitzt direkt unter der Kopfzeile. Das obere Polster des
   Abschnitts stand als weißer Streifen dazwischen. */
.main-content .mod_article > .centered-wrapper:has(.mod_mx5_registration_steps) {
	padding-top: 0;
}

/* Sprachumschalter: ein Flaggensymbol neben dem Warenkorb, gleiche Höhe und
   gleiches Verhalten wie dort. Gezeigt wird die Flagge der Zielsprache; ein
   Klick wechselt. Flaggen als SVG - Emojis zeigt Windows nicht als Flagge,
   sondern als Buchstabenpaar. */
.mx5-sprache {
	display: inline-flex;
	align-items: center;
	height: 100%;
}
.mx5-sprache__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 100%;
	padding: 0 14px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.mx5-sprache__link svg {
	display: block;
	width: 22px;
	height: 16px;
	border-radius: 2px;
	/* Ohne Kante verläuft das Weiß der deutschen Flagge im hellen Kopf. */
	box-shadow: 0 0 0 1px rgba(36, 36, 36, 0.2);
}
/* In der Kopfzeile trägt das Symbol keine Beschriftung - wie der Warenkorb. */
.main-navigation-wrapper .mx5-sprache__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media only screen and (min-width: 901px) {
	/* Der Kopf arbeitet mit absoluter Lage: der Warenkorb sitzt ganz außen,
	   die Flagge davor. Den Platz macht der rechte Rand der Navigation frei. */
	.main-navigation-wrapper > .mx5-sprache {
		position: absolute;
		top: 0;
		right: 50px;
		height: 130px;
		transition: height 0.3s linear;
	}
	.header-navigation.nav-shrink .main-navigation-wrapper > .mx5-sprache {
		height: 65px;
	}
	/* shop.css wird nach dieser Datei geladen und setzt für den Warenkorb
	   allein 3.4em; mit der Flagge daneben braucht es mehr, deshalb hier
	   eine Klasse mehr im Selektor. */
	.header-navigation .main-navigation-wrapper > .main-navigation {
		margin-right: 7.4em;
	}
	/* Überfahren wie ein Menüpunkt: dunkler Block. */
	.main-navigation-wrapper > .mx5-sprache:hover {
		background-color: #18181b;
	}
	.main-navigation-wrapper > .mx5-sprache:hover svg {
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
	}
}

/* Im Off-Canvas eine eigene Zeile mit Flagge und Sprachnamen - dort ist Platz
   für das Wort, und eine Flagge allein wäre in der Liste zu wenig. */
@media only screen and (max-width: 900px) {
	.main-navigation-wrapper > .mx5-sprache {
		display: none;
	}
	.main-navigation-mobile .mx5-sprache {
		display: block;
		width: 100%;
	}
	.main-navigation-mobile .mx5-sprache__link {
		/* Das Theme setzt jeden Link im Off-Canvas auf "display: block" -
		   ohne diese Zeile stünde der Sprachname unter der Flagge statt
		   daneben, und die Zeile wäre 55 statt 42 Pixel hoch. */
		display: flex;
		gap: 12px;
		height: auto;
		justify-content: flex-start;
		/* Zeile für Zeile dasselbe Maß wie ein Menüpunkt: dort steht
		   11.115px/13.455px Polster auf 18.72px Zeilenhöhe (= 42 px hoch).
		   Mit 5px Polster stand die Flagge 2 px höher als ihre Nachbarn und
		   die Zeile fiel aus der Reihe. */
		line-height: 18.72px;
		padding: 11.115px 13.455px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		font-family: 'Nunito', 'Open Sans', sans-serif;
		font-weight: 700;
		font-size: 11.7px;
		letter-spacing: 1.17px;
		text-transform: uppercase;
		color: #fff;
	}
	.main-navigation-mobile .mx5-sprache__link svg {
		flex: 0 0 auto;
		/* So breit wie das Warenkorbsymbol darunter (18 px), damit die
		   Beschriftungen beider Zeilen auf einer Flucht beginnen. */
		width: 18px;
		height: 13px;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
	}
	.main-navigation-mobile .mx5-sprache__name {
		flex: 1 1 auto;
	}
}

/* ------------------------------------------------------------------
   Bildergalerien (Contao-Inhaltselement "Galerie", .content-gallery)
   ------------------------------------------------------------------
   Das Theme setzt die Kacheln als gefloatete Listenpunkte mit fester
   Pixelbreite (die Bildgröße aus dem Backend, hier 285 px) und fängt den
   Abstand mit negativen Rändern am <ul> ab. Auf dem Telefon stand deshalb
   ein 285 px breites Quadrat in einer 293 px breiten Spalte, dreimal
   untereinander - fast 900 px hoch, seitlich weder bündig noch mittig.

   Stattdessen ein Raster: die Kacheln teilen sich die Breite, statt sie
   vorzugeben. Die Bilder füllen ihre Kachel (object-fit) und behalten ihr
   Seitenverhältnis, egal welche Größe im Backend eingestellt ist. */
.main-content .content-gallery > ul {
	display: grid;
	grid-template-columns: repeat(var(--tidm-gal-spalten, 3), minmax(0, 1fr));
	gap: 10px;
	/* Das Theme setzt Rand und Polster mit "!important" (es faengt damit die
	   Abstaende der gefloateten Kacheln ab) - im Raster sind sie schaedlich,
	   deshalb hier ebenso. */
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Die beiden Aufraeum-Kaestchen des Themes (clearfix) sind im Raster nicht
   unsichtbar: sie belegen die erste und die letzte Zelle, und die Bilder
   rutschten um einen Platz weiter. */
.main-content .content-gallery > ul::before,
.main-content .content-gallery > ul::after {
	display: none;
}

/* Contao gibt die Spaltenzahl als Klasse mit; sie bleibt maßgeblich. */
.main-content .content-gallery.content-gallery--cols-1 > ul { --tidm-gal-spalten: 1; }
.main-content .content-gallery.content-gallery--cols-2 > ul { --tidm-gal-spalten: 2; }
.main-content .content-gallery.content-gallery--cols-4 > ul { --tidm-gal-spalten: 4; }
.main-content .content-gallery.content-gallery--cols-5 > ul { --tidm-gal-spalten: 5; }
.main-content .content-gallery.content-gallery--cols-6 > ul { --tidm-gal-spalten: 6; }

.main-content .content-gallery > ul > li {
	float: none;
	/* Das Theme gibt die Kachelbreite in Prozent vor (31.33 % bei drei
	   Spalten) - im Raster teilt die Spalte die Breite zu. */
	width: auto !important;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 3px;
}

.main-content .content-gallery figure,
.main-content .content-gallery > ul > li > a {
	display: block;
	height: 100%;
	margin: 0;
}

.main-content .content-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/* Beim Überfahren zieht das Bild in seiner Kachel leicht an - dieselbe
   ruhige Reaktion wie an den übrigen klickbaren Flächen. Der Rahmen der
   Kachel schneidet dabei ab (overflow: hidden). */
@media (hover: hover) and (pointer: fine) {
	.main-content .content-gallery > ul > li:hover img {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-content .content-gallery img {
		transition: none;
	}
	.main-content .content-gallery > ul > li:hover img {
		transform: none;
	}
}

/* Auf dem Telefon ein Bild je Zeile über die volle Textbreite. Drei
   Quadrate nebeneinander wären dort je 90 px groß - darauf ist nichts zu
   erkennen. Im Querformat 4:3 statt quadratisch, damit die Reihe nicht zur
   Bildsäule wird. */
@media only screen and (max-width: 640px) {
	.main-content .content-gallery > ul {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.main-content .content-gallery img {
		aspect-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------------
   Nachgeladene Formulare (files/eventpage/js/forms-lazy.js)
   ------------------------------------------------------------------
   Die Formulare stehen auf einer eigenen, versteckten Seite und werden erst
   geholt, wenn der Platzhalter in die Nähe des Bildschirms kommt - nur so
   bleibt die Seite darum herum cachefähig (ein Formular setzt Cookies, und
   eine Antwort mit Cookie gehört nie in einen geteilten Cache).

   Der Platzhalter hält vorab Platz, damit der Text darunter nicht springt,
   wenn das Formular ankommt. Die Höhe ist die eines ausgefüllten
   Newsletter-Formulars; sobald etwas drinsteht, zählt der Inhalt. */
/* Solange das Formular noch nicht da ist, haelt der Platzhalter dessen Hoehe
   frei - sonst springt der Text darunter, wenn es ankommt. */
.tidm-formular:not(:has(form)) {
	min-height: 310px;
}

/* Der Ersatzlink ist für den Fall gedacht, dass das Nachladen nicht klappt -
   im Normalfall sieht ihn niemand. <noscript> geht dafür nicht: Contao
   maskiert das Element in einem HTML-Inhaltselement, der Link stünde samt
   "<noscript>" als Text in der Seite. Sichtbar wird er deshalb über eine
   Klasse (setzt forms-lazy.js beim Fehlschlag) oder über die noscript-Regel
   im Kopf des Layouts. */
.tidm-formular__fallback {
	display: none;
}

.tidm-formular--fehler .tidm-formular__fallback {
	display: block;
}

/* Während des Absendens: die Antwort kommt per XHR, der Kasten bleibt stehen
   und wird eine Spur blasser. */
.tidm-formular[aria-busy='true'] {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

@media only screen and (max-width: 640px) {
	.tidm-formular:not(:has(form)) {
		min-height: 420px;
	}
}

/* Sicherheitsfrage (Rückfall von RockSolid Antispam, templates/form_captcha.html5).
   Die Frage steht als Beschriftung über dem Feld wie bei jedem anderen Feld,
   nur kräftiger - sie ist eine Aufgabe, kein Feldname. Das Feld ist so breit
   wie zwei Ziffern; das Theme zöge es sonst über die ganze Zeile. */
.main-content .widget-captcha label.captcha-label {
	color: #242424;
	font-weight: 600;
	font-size: 1em;
}
.main-content .widget-captcha input.captcha {
	width: 5.5em !important;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* Fehlertexte in Formularen: Markenrot statt des Theme-Pinks (#df3763),
   als kompakte Zeile über dem Feld. Betroffen sind alle Contao-Formulare
   (Kontakt, Newsletter, Sicherheitsfrage). */
form .widget p.error,
form .widget b.error {
	margin: 0 0 0.4em;
	color: var(--tidm-accent);
	font-size: 0.93333em;
	font-weight: 600;
}
form .widget input.error,
form .widget textarea.error,
form .widget select.error {
	border-color: var(--tidm-accent);
}

/* Sicherheitsfrage als Fenster (forms-lazy.js): weiße Karte wie die
   Meldungen der Anmeldung (.mx5-steps__dialog), darin Titel, ein Satz,
   die Aufgabe groß und daneben das schmale Antwortfeld mit dem Knopf. Das
   Originalfeld im Formular bleibt im DOM (die Antwort wird hineinkopiert),
   ist aber unsichtbar. */
.tidm-frage__original {
	display: none;
}
/* Fancybox 5 nimmt das Wurzelelement des HTML-Inhalts selbst als
   .fancybox__content und setzt dort padding 2rem und max-width 100% - die
   Regel steht hinter custom.css und gewinnt bei gleicher Spezifität.
   Deshalb über die mainClass des Fensters (.tidm-frage__fancybox). */
.tidm-frage__fancybox .fancybox__content.tidm-frage {
	width: min(28em, 100%);
	max-width: 28em;
	padding: 32px 32px 28px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
	color: #242424;
}
/* Überschrift wie überall im Inhalt: rotes Schild, weiße Versalien
   (custom.css, ".main-content h3"). Das Fenster hängt außerhalb von
   .main-content, deshalb stehen die Werte hier noch einmal. */
.tidm-frage .tidm-frage__titel {
	display: block;
	width: fit-content;
	margin: 0;
	padding: 2px 15px;
	border-radius: 3px;
	background: var(--tidm-accent, #b60b27);
	color: #fff;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0;
}
/* 12 px zwischen Überschrift und Text wie auf den Infoseiten. */
.tidm-frage__hinweis {
	margin: 12px 0 20px;
	color: #666;
	line-height: 1.6;
}
/* Die Aufgabe als ruhige Fläche - der eine Satz, um den es geht. */
.tidm-frage__aufgabe {
	display: block;
	margin: 0 0 12px;
	padding: 14px 16px;
	border-radius: 3px;
	background: #efefef;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 1.15em;
	line-height: 1.4;
	text-align: center;
	color: #242424;
}
.tidm-frage__zeile {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
/* Feld und Knopf gleich hoch, das Feld wie ein Eingabefeld der Anmeldung. */
.tidm-frage .tidm-frage__feld,
/* Abbruch der Zahlung (payment-return.js): dieselbe Karte wie die
   Sicherheitsfrage, statt Feld und Knopf nur der Weg zurueck zu Stripe und
   leise darunter "Schliessen". */
.tidm-abbruch .tidm-frage__zeile {
	margin-top: 4px;
}
.tidm-abbruch .tidm-abbruch__nochmal.tidm-abbruch__nochmal {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.86667em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	text-decoration: none;
	color: #fff;
}
.tidm-abbruch .tidm-abbruch__nochmal::after {
	content: "";
	width: 9px;
	height: 9px;
	border: solid currentColor;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
}
.tidm-abbruch__zu {
	margin: 12px 0 0 !important;
	text-align: center;
}
.tidm-abbruch__schliessen.tidm-abbruch__schliessen,
.tidm-abbruch__schliessen.tidm-abbruch__schliessen:hover {
	width: auto !important;
	height: auto;
	margin: 0;
	padding: 2px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #666;
	font: inherit;
	font-size: .9em;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	cursor: pointer;
}
.tidm-frage .tidm-frage__knopf {
	height: 44px;
	margin: 0 !important;
	box-sizing: border-box;
}
.tidm-frage .tidm-frage__feld {
	flex: 0 0 5.5em;
	width: 5.5em !important;
	padding: 0 8px;
	border: 1px solid var(--tidm-border, #dcdcdc);
	border-radius: 3px;
	background: #fff;
	text-align: center;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 1.2em;
	letter-spacing: 0.1em;
	color: #242424;
}
.tidm-frage .tidm-frage__feld:focus {
	border-color: var(--tidm-accent, #b60b27);
	outline: 0;
	box-shadow: 0 0 0 1px var(--tidm-accent, #b60b27);
}
.tidm-frage .tidm-frage__knopf {
	flex: 1 1 auto;
	width: auto !important;
	padding: 0 18px;
	border: 1px solid var(--tidm-accent, #b60b27);
	background: var(--tidm-accent, #b60b27);
	color: #fff;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.tidm-frage .tidm-frage__knopf:hover,
.tidm-frage .tidm-frage__knopf:focus-visible {
	background: #8d081e;
	border-color: #8d081e;
}
@media (max-width: 599px) {
	.tidm-frage__fancybox .fancybox__content.tidm-frage {
		padding: 24px 20px 20px;
	}
	.tidm-frage .tidm-frage__titel {
		font-size: 1.05em;
	}
}

/* ========================================
 * Cookiebar (oveleon/contao-cookiebar)
 * Angepasst an das Erscheinungsbild der Seite: Markenrot, eckige Knoepfe,
 * Versalien wie bei den uebrigen Schaltflaechen. Die Bundle-CSS
 * (/bundles/contaocookiebar/default.*.css) laedt vor dieser Datei, gewinnt
 * aber ueber Spezifitaet - deshalb stehen hier durchgehend zwei Klassen.
 * ======================================== */
.contao-cookiebar .cc-inner {
	/* Wie die Partnerpakete-Karten (.pricing-table-plan): weiss, feine Linie,
	   Radius 4, weicher Schatten. Dazu der rote Balken oben als Markenkante. */
	border-radius: 4px;
	border: 1px solid #e4e4e7;
	border-top: 4px solid var(--tidm-accent, #b60b27);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.13);
	font-size: 15px;
}
.contao-cookiebar .cc-head p {
	font-size: 1em;
	line-height: 1.6;
	color: #242424;
}

/* --- Knoepfe: Form wie .button im Theme --- */
.contao-cookiebar .cc-btn {
	/* .button im Theme hat 3 px Radius - hier genauso. */
	border-radius: 3px;
	border: 1px solid var(--tidm-accent, #b60b27);
	padding: 0.95em 1.42857em;
	font-size: 0.93333em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Zustimmen: gefuellt, wie der Hauptknopf der Seite */
.contao-cookiebar .cc-btn.success,
.contao-cookiebar .cc-btn.success:hover,
.contao-cookiebar .cc-btn.success:focus-visible {
	background: var(--tidm-accent, #b60b27);
	color: #ffffff;
}
.contao-cookiebar .cc-btn.success:hover,
.contao-cookiebar .cc-btn.success:focus-visible {
	background: #8d081e;
	border-color: #8d081e;
}
/* Speichern und Ablehnen: umrandet, fuellen sich beim Zeigen */
.contao-cookiebar .cc-btn.save,
.contao-cookiebar .cc-btn.deny {
	background: #ffffff;
	color: var(--tidm-accent, #b60b27);
}
.contao-cookiebar .cc-btn.save:hover,
.contao-cookiebar .cc-btn.save:focus-visible,
.contao-cookiebar .cc-btn.deny:hover,
.contao-cookiebar .cc-btn.deny:focus-visible {
	background: var(--tidm-accent, #b60b27);
	border-color: var(--tidm-accent, #b60b27);
	color: #ffffff;
}

/* --- Gruppenzeile und Detailknopf --- */
.contao-cookiebar .cc-group {
	/* Vorher ein grauer Kasten, der neben dem weissen Rest wie ein Fremdkoerper
	   wirkte. Jetzt eine eigene helle Karte wie die Partnerpakete. */
	border-radius: 4px;
	border: 1px solid #e4e4e7;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.contao-cookiebar .cc-group label.group {
	font-weight: 700;
	color: #242424;
}
.contao-cookiebar .cc-detail-btn {
	/* Ruhiger grauer Schalter statt rotem Text. Grund: die Leiste setzt beim
	   Erscheinen den Fokus selbst auf diesen Knopf - jede Fokus- oder
	   Hover-Gestaltung war dadurch schon beim ersten Blick zu sehen. Er muss
	   also im Ruhezustand gut aussehen, nicht erst beim Zeigen. */
	border: 1px solid #e4e4e7;
	border-radius: 3px;
	background: #f2f2f2;
	color: #555555;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	padding: 7px 10px 7px 12px;
	/* Die Bundle-CSS gibt dem Knopf margin-top (~14 px). Gegen die kommt
	   align-self: center nicht an - er saß dadurch 7 px tiefer als
	   „Essenziell". Deshalb hier ausdruecklich auf 0. */
	margin: 0 8px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: center;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contao-cookiebar .cc-detail-btn:after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
.contao-cookiebar .cc-detail-btn[aria-expanded="true"]:after {
	transform: translateY(1px) rotate(225deg);
}
.contao-cookiebar .cc-detail-btn:hover {
	background: var(--tidm-accent, #b60b27);
	border-color: var(--tidm-accent, #b60b27);
	color: #ffffff;
}
/* Fokus faerbt NICHT um: die Leiste setzt ihn beim Erscheinen selbst hierher,
   der Knopf saehe sonst von Anfang an aus wie der Hauptknopf. Stattdessen ein
   weicher Schein, der auch im Ruhebild nicht stoert. */
.contao-cookiebar .cc-detail-btn:focus-visible:not(.cc-hide-focus) {
	box-shadow: 0 0 0 3px rgba(182, 11, 39, 0.18);
	border-color: var(--tidm-accent, #b60b27);
}

/* --- Schieberegler ---
   Die Leiste zeichnet ihn ueber eigene Variablen; ab Werk ist „an" gruen
   (#399d32 auf #dcf3db) und „gesperrt" grau. Vorher haben hier einzelne
   Regeln nur Teile davon rot uebermalt - daraus wurde ein blasses Rosa.
   Jetzt werden die Variablen selbst gesetzt, der Rest bleibt Bundle-Logik. */
.contao-cookiebar {
	--ccb-checked-bg: var(--tidm-accent, #b60b27);
	--ccb-checked-clr: var(--tidm-accent, #b60b27);
	--ccb-unchecked-bg: #ffffff;
	--ccb-unchecked-clr: #9c9b99;
	--ccb-focus-clr: var(--tidm-accent, #b60b27);
}
/* Knopf weiss auf rotem Grund - sonst laege Rot auf Rot. */
.contao-cookiebar input[type="checkbox"]:checked + label:after {
	background: #ffffff;
}
/* Unsere Regler sind alle gesperrt UND an. Die Bundle-Regel fuer „gesperrt"
   steht hinter der fuer „an" und wuerde sie sonst grau uebermalen. */
.contao-cookiebar input[type="checkbox"]:disabled:checked + label:before {
	background: var(--tidm-accent, #b60b27);
	border-color: var(--tidm-accent, #b60b27);
}
.contao-cookiebar input[type="checkbox"]:disabled:checked + label:after {
	background: #ffffff;
}

/* --- Aufgeklappter Bereich: Innenabstand ---
   Die Bundle-CSS gibt `.cc-cookies` kein Polster. Schieberegler, Texte und
   Infokaesten klebten dadurch auf der Kartenkante, waehrend der Gruppenname
   darueber 11 px eingerueckt steht. Hier ein durchgehender Rand von 16 px,
   der die Kinderzeilen zugleich leicht unter die Gruppe einrueckt. */
.contao-cookiebar .cc-cookies {
	padding: 0 16px 14px;
}
.contao-cookiebar .cc-cookies > p {
	padding: 12px 0 2px;
	margin: 0;
}

/* --- Einzelne Cookies --- */
.contao-cookiebar .cc-cookie {
	/* Zeilen wie in den Partnerpaketen: durch eine feine Linie getrennt,
	   nicht durch einen Balken am Rand. */
	border-top: 1px solid #e4e4e7;
	padding: 14px 0 12px;
}
/* Die Kinderzeilen treten gegenueber der Gruppe zurueck: Gruppenname bleibt
   bei 15 px, der Cookie-Name geht auf 13, Beschreibung und Infokasten auf 12.
   Vorher trug der Cookie-Name dieselben 15 px wie „Essenziell" und stand damit
   gleichrangig daneben. */
.contao-cookiebar .cc-cookie label.cookie {
	font-weight: 600;
	font-size: 13px;
	color: #242424;
}
.contao-cookiebar .cc-cookie p {
	font-size: 12px;
	line-height: 1.55;
}
.contao-cookiebar .cc-cookie-info {
	font-size: 12px;
	line-height: 1.6;
}
.contao-cookiebar .cc-cookies > p {
	font-size: 12.5px;
	line-height: 1.55;
}
.contao-cookiebar .cc-cookie-info {
	border-radius: 3px;
}
.contao-cookiebar .cc-cookie-info span {
	color: #767676;
}

/* --- Fusszeile: Datenschutz / Impressum --- */
.contao-cookiebar .cc-info a,
.contao-cookiebar .cc-footer a {
	color: var(--tidm-accent, #b60b27);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.contao-cookiebar .cc-info a:hover,
.contao-cookiebar .cc-footer a:hover {
	border-bottom-color: var(--tidm-accent, #b60b27);
}

/* --- Schliessen --- */
.contao-cookiebar .cc-close {
	color: #767676;
}
.contao-cookiebar .cc-close:hover,
.contao-cookiebar .cc-close:focus-visible {
	color: var(--tidm-accent, #b60b27);
}

/* --- Tastaturfokus sichtbar halten --- */
/* `cc-hide-focus` haengt die Leiste beim Erscheinen an das zuerst fokussierte
   Element und nimmt es erst weg, wenn jemand wirklich Tab drueckt. Ohne diese
   Bedingung war der Fokus schon im ersten Bild zu sehen - die Bundle-CSS
   prueft an derselben Stelle genauso. */
.contao-cookiebar .cc-focus:focus-visible:not(.cc-hide-focus) {
	outline: 2px solid var(--tidm-accent, #b60b27);
	outline-offset: 2px;
}
/* Der Detailknopf faerbt sich beim Fokus selbst um; ein Ring daneben waere
   doppelt gemoppelt. */
.contao-cookiebar .cc-detail-btn.cc-focus:focus-visible {
	outline: none;
}

/* --- Rangfolge der drei Knoepfe ---
   „Alle akzeptieren" gefuellt, „Auswahl speichern" umrandet daneben,
   „Alle ablehnen" deutlich kleiner und leise: es waehlt nichts ab, was sich
   abwaehlen laesst (alle Cookies sind notwendig), soll aber vorhanden und
   anklickbar bleiben. */
.contao-cookiebar .cc-btn.deny {
	border-color: transparent;
	background: transparent;
	color: #767676;
	font-size: 0.76em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	padding: 0.5em 0.8em;
	align-self: center;
}
.contao-cookiebar .cc-btn.deny:hover,
.contao-cookiebar .cc-btn.deny:focus-visible {
	background: transparent;
	border-color: transparent;
	color: var(--tidm-accent, #b60b27);
	text-decoration: underline;
}

@media (max-width: 599px) {
	.contao-cookiebar .cc-btn {
		width: 100%;
		display: block;
	}
}

/* Link "Privatsphaere-Einstellungen aendern" (Inhaltselement cookiebar_opener,
   steht am Ende der Datenschutzseite) */
.content-cookiebar-opener {
	display: inline-block;
	margin: 1.6em 0;
	color: var(--tidm-accent, #b60b27);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.9em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.content-cookiebar-opener:hover,
.content-cookiebar-opener:focus-visible {
	color: #8d081e;
	border-bottom-color: currentColor;
}