/* ==========================================================================
   Simpleshop — Theme-Anbindung für den TidM-Auftritt
   ==========================================================================

   Aufbau: jedes Shop-Modul rendert einen Wrapper ".ss" (siehe die
   ss_*.html.twig im simpleshop-bundle). Alles darin wird hier möglichst
   über TAGS gestylt — h1/h2/h3, table/th/td, form/label/input/select,
   button, a. Klassen kommen nur dort dazu, wo ein Tag allein die Rolle
   nicht hergibt (Karten-Grid, Preis, Panel, Minicart).

   Damit gilt derselbe Stil automatisch für JEDEN Shop und jedes Produkt —
   es gibt bewusst keinen Selektor, der auf eine Shop-ID, eine Modul-ID,
   eine Produkt-ID oder eine Artikelnummer zeigt.

   Ladereihenfolge: main.css → custom.css → shop.css (tl_layout.external).
   Deshalb reicht meist gleiche Spezifität; "!important" steht nur dort,
   wo main.css/custom.css ihrerseits "!important" benutzen — jede solche
   Stelle ist unten einzeln begründet.
   ========================================================================== */

.ss {
	--ss-text: #333;
	--ss-muted: #666;
	--ss-line: var(--tidm-border);
	--ss-accent: var(--tidm-accent);
	--ss-panel: #f7f7f7;
	--ss-radius: 3px;

	font-family: 'Nunito', 'Open Sans', sans-serif;
	color: var(--ss-text);
	line-height: 1.5;
	/* Wie jeder andere Abschnitt des Auftritts Luft nach oben und unten —
	   ohne das klebt der Shop-Inhalt direkt an Navigation und Footer. */
	padding: 1.75rem 0 2.5rem;
}

/* --- Überschriften -------------------------------------------------------
   custom.css setzt die Abschnitts-Überschriften des Auftritts in eine rote
   Box; Shop-Inhalte sind dort per ":not(.ss *)" ausgenommen, deshalb reicht
   hier normales Styling ohne !important. Die Modul-Überschrift ("Warenkorb",
   "Kasse", …) steht ausserhalb von ".ss" und behält die rote Box. */

.ss h1,
.ss h2,
.ss h3,
.ss h4,
.ss h5,
.ss h6 {
	color: #222;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

.ss h1 { font-size: 1.8em; margin: 0 0 0.5rem; }
.ss h2 { font-size: 1.3em; margin: 0 0 0.75rem; }
.ss h3 { font-size: 1.1em; margin: 0 0 0.35rem; }

/* Der Produkttitel ist die Seitenüberschrift der Detailseite und bekommt
   deshalb dieselbe rote Box wie die Modul-Überschriften der übrigen
   Shop-Seiten ("Artikelliste", "Warenkorb", "Kasse"). Die Titel in der
   Kachel-Übersicht (h3) bleiben bewusst schlicht — als Balken wären sie
   dort eine Wand aus Rot. */
.ss-product-reader h1 {
	display: inline-block;
	padding: 2px 15px;
	margin-bottom: 1rem;
	background: var(--ss-accent);
	color: #fff;
	border-radius: var(--ss-radius);
}

.ss p { margin: 0 0 0.75rem; }
.ss small { color: var(--ss-muted); }

/* --- Tabellen (Warenkorb, Bestellbestätigung, Produktattribute) ---------- */

/* Kein Tabellen-Look: nur waagerechte Linien, kein Kasten drumherum, keine
   Spaltentrenner, keine Füllfarbe. main.css bringt für jede Tabelle des
   Auftritts einen Rahmen ("table { border: 1px solid #dcdcdc; background:
   #fff }") und Zellborder oben/links mit ("border-width: 1px 0 0 1px") —
   genau die erzeugen den Kasten und die senkrechten Striche. Hier werden
   sie zurückgesetzt, danach kommt die einzige Linie, die bleiben soll.
   Kein !important nötig: ".ss table" schlägt "table". */
.ss table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	margin: 1rem 0;
}

/* main.css legt die Kopfzeile zusätzlich auf rgba(0,0,0,.02) — ein
   Streifen, der ohne den umgebenden Kasten nur noch nach Schmutz aussieht.
   Die Trennung übernimmt die dickere Linie unter thead. */
.ss thead {
	background: transparent;
}

.ss th,
.ss td {
	text-align: left;
	padding: 0.7rem 0.85rem 0.7rem 0;
	border: 0;
	border-bottom: 1px solid var(--ss-line);
	vertical-align: top;
}

/* Ohne Spaltentrenner braucht die letzte Spalte rechts keinen Abstand mehr,
   sonst stünde die Summe nicht bündig unter der Kopfzeile. */
.ss th:last-child,
.ss td:last-child {
	padding-right: 0;
}

.ss th {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.03em;
}

.ss thead th {
	border-bottom-width: 2px;
	border-bottom-color: #c9c9c9;
}

.ss td small {
	display: block;
	margin-top: 0.15rem;
	line-height: 1.35;
}

.ss .ss-sku {
	color: #999;
	font-size: 0.75em;
	letter-spacing: 0.03em;
}

/* Zahlenspalten rechtsbündig — Beträge lesen sich so deutlich besser
   untereinander. Reine Rolle, kein Bezug auf ein bestimmtes Produkt. */
.ss .ss-num {
	text-align: right;
	white-space: nowrap;
}

.ss td.ss-num {
	vertical-align: middle;
}

/* Mengenfeld in der Tabelle: nur so breit wie eine Zahl braucht. */
.ss td.ss-num input[type='number'] {
	display: inline-block;
	width: 4.5em;
	padding: 0.5em;
	text-align: center;
}

/* Entfernen als dezentes Kreuz statt vollwertigem Button — die Zeile
   soll vom Artikel handeln, nicht von ihrer Löschschaltfläche. */
.ss .ss-remove {
	margin: 0;
	padding: 0;
	width: 1.9em;
	height: 1.9em;
	line-height: 1;
	font-size: 1.1em;
	background: transparent;
	color: #999;
	border: 1px solid var(--ss-line);
	border-radius: 50%;
	cursor: pointer;
	transition: color 120ms ease, border-color 120ms ease;
}

.ss .ss-remove:hover {
	color: var(--ss-accent);
	border-color: var(--ss-accent);
}

/* Der Warenkorb im Kopf trägt nur das Symbol; die Beschriftung aus dem
   Template wird erst im ausgeklappten Menü des Telefons gezeigt (custom.css).
   Der Name für Screenreader hängt am Link selbst (aria-label). */
.ss-minicart__label {
	display: none;
}

.ss-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Formulare ----------------------------------------------------------- */

.ss label {
	/* main.css setzt ".main-content label" auf ein helles Grau-Blau
	   (#98a0ab) — gedacht für Formulare auf dunklem Grund. Der Shop ist
	   hell, dort ist das praktisch unlesbar. */
	display: block;
	color: var(--ss-text);
	margin-bottom: 0.4em;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ss input[type='text'],
.ss input[type='email'],
.ss input[type='tel'],
.ss input[type='number'],
.ss textarea,
.ss select {
	display: block;
	width: 100%;
	max-width: 420px;
	padding: 0.85714em 1.35714em;
	border: 1px solid var(--ss-line);
	border-bottom-color: #cfcfcf;
	border-radius: var(--ss-radius);
	font-family: inherit;
	font-size: 0.93333em;
	color: inherit;
	background: #fff;
	box-sizing: border-box;
}

.ss textarea {
	height: auto;
	min-height: 6em;
}

.ss form > div {
	margin-bottom: 1.2rem;
}

/* Checkbox-Zeilen: Kästchen und Text nebeneinander, Label nicht als
   Überschrift formatiert. Symfony rendert das <label> VOR der Checkbox —
   "order" dreht das optisch um, ohne das Markup anzufassen (die
   Vorlese-Reihenfolge für Screenreader bleibt dabei korrekt, weil das
   Label ohnehin per "for" an die Checkbox gebunden ist). */
.ss div:has(> input[type='checkbox']) {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.ss div:has(> input[type='checkbox']) input[type='checkbox'] {
	order: -1;
	width: auto;
	margin: 0;
	flex: none;
}

.ss div:has(> input[type='checkbox']) label {
	margin-bottom: 0;
	font-weight: normal;
	font-size: 1em;
	text-transform: none;
	letter-spacing: 0;
}

.ss .form-error-message,
.ss .error {
	color: var(--ss-accent);
	font-size: 0.85em;
	margin: 0.3em 0 0;
	padding: 0;
	list-style: none;
}

/* --- Buttons -------------------------------------------------------------
   <button> und input[type=submit] erben den roten Button des Auftritts
   schon aus main.css. Für Links, die als Button auftreten, wird derselbe
   Look hier nachgebaut ('.ss-button'), plus eine Ghost-Variante. */

.ss .ss-button,
.ss .ss-button--ghost {
	display: inline-block;
	padding: 0.85em 1.35em;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: opacity 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ss .ss-button {
	background: var(--ss-accent);
	border-color: var(--ss-accent);
	color: #fff;
}

.ss .ss-button:hover {
	opacity: 0.85;
	color: #fff;
}

.ss .ss-button--ghost {
	background: transparent;
	color: var(--ss-text);
	/* margin-top: main.css gibt jedem <button> ein margin-top:1.2em mit; in
	   Tabellenzellen und Aktionsleisten stört das. */
	margin-top: 0;
}

.ss .ss-button--ghost:hover {
	border-color: var(--ss-accent);
	color: var(--ss-accent);
}

.ss-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

/* --- Hinweise / Meldungen ------------------------------------------------ */

.ss-empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	color: var(--ss-muted);
	padding: 1rem 0;
}

.ss-message {
	color: var(--ss-accent);
	background: #fdecee;
	border: 1px solid #f3c2c8;
	border-radius: var(--ss-radius);
	padding: 0.7em 1em;
	margin: 0.75rem 0;
}

.ss-price {
	font-weight: 700;
	color: var(--ss-accent);
}

/* Gratis ist eine Zusage, kein Betrag — deshalb nicht in der
   Preis-Akzentfarbe, sondern ruhig in der Textfarbe. Zwei Klassen, damit
   die Regel auch den später notierten ".ss-product-reader__price" schlägt. */
.ss .ss-price--free {
	color: var(--ss-text);
}

.ss-stock--out {
	color: var(--ss-accent);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85em;
}

/* Restplätze: normal zurückhaltend, knapp vor dem Ausverkauf in
   Akzentfarbe — die Zahl selbst ist die Information, nicht die Farbe. */
.ss-stock {
	color: var(--ss-muted);
	font-size: 0.85em;
}

.ss-stock--low {
	color: var(--ss-accent);
	font-weight: 700;
}

/* "… im Warenkorb" — zeigt auf einen Blick, was schon gewählt wurde. */
.ss-badge {
	display: inline-block;
	padding: 0.2em 0.7em;
	background: #eef6ef;
	color: #1a7a3c;
	border: 1px solid #cfe6d4;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* "[hidden]" ist nur eine Browser-Voreinstellung ("display:none") und
   verliert gegen jede eigene display-Angabe. Ohne diese Zeile stünde auf
   jeder Karte "0× im Warenkorb", obwohl das Markup die Marke versteckt. */
.ss-badge[hidden] {
	display: none;
}

/* --- Summen -------------------------------------------------------------- */

.ss-totals {
	margin: 1rem 0;
}

.ss-totals p {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0 0 0.3rem;
}

.ss-totals__sum {
	padding-top: 0.5rem;
	border-top: 1px solid var(--ss-line);
	font-size: 1.15em;
}

.ss-totals__sum strong {
	color: var(--ss-accent);
}

.ss-totals__tax {
	color: var(--ss-muted);
	font-size: 0.85em;
}

/* Fuss von Warenkorb und Bestellbestätigung: Zurück-Link links, der
   Abschluss-Block rechts — so liegt die Handlung dort, wo der Blick nach
   dem Lesen der Summen endet. */
.ss-cart__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.ss-cart__footer .ss-totals {
	margin: 0;
	min-width: 320px;
}

.ss-cart__footer .ss-panel {
	margin-bottom: 0;
}

.ss-cart__footer .ss-button {
	display: block;
	margin-top: 1rem;
}

.ss-panel {
	background: var(--ss-panel);
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	padding: 1.2rem 1.4rem;
	margin-bottom: 1.5rem;
}

.ss-panel > :last-child {
	margin-bottom: 0;
}

/* --- Produktliste -------------------------------------------------------- */

/* Jede Kategorie ist ein eigener Abschnitt über die volle Breite und
   wechselt die Fläche wie die Abschnitte der übrigen Seiten (weiß, dann
   #f7f7f7). Das Modul steckt in einem einzigen centered-wrapper, deshalb
   sitzt das Full-Bleed an den Gruppen selbst - dasselbe Vorgehen wie bei der
   Nachrichtenliste im Auftritt. */
.ss-product-list {
	margin: -1.75rem 0 -2.5rem;
}
.ss-product-list__group {
	margin: 0 calc(50% - 50vw);
	padding: 2.25rem calc(50vw - 50%) 2.5rem;
	background: #fff;
	/* Die Kategorieleiste liegt oben fest; ohne Abstand verschwände die
	   Überschrift beim Anspringen darunter. */
	scroll-margin-top: 130px;
}
.ss-product-list__group:nth-of-type(even) {
	background: #f7f7f7;
}
/* Kategorien als Sprungleiste über den Bändern, im Gewand der
   Unternavigation des Auftritts (siehe ss_product_list.html.twig). */
.ss-product-list__nav {
	margin-bottom: 1.25rem;
}

/* Kategorie im Abschnitts-Standard des Auftritts: roter Balken, weisse
   Versalien — dieselbe Form wie die Modul-Überschriften ("Artikelliste",
   "Warenkorb") und der Produkttitel auf der Detailseite. Der Balken ist nur
   so breit wie sein Text, deshalb "inline-block". */
.ss-product-list__group > h2 {
	display: inline-block;
	padding: 2px 15px;
	margin-bottom: 0.9rem;
	background: var(--ss-accent);
	color: #fff;
	border-radius: var(--ss-radius);
	/* Ein langer Kategoriename darf den Balken nicht über die Spalte
	   hinausschieben — siehe denselben Fall beim Produkttitel. */
	max-width: 100%;
	overflow-wrap: anywhere;
}

.ss-product-list__grid {
	display: grid;
	/* Zwei feste Spalten auf dem Desktop. Bewusst keine auto-fill-Formel:
	   die Kategorien haben nur zwei bis drei Artikel, eine dritte Spalte
	   liess die Zeile jedes Mal halb leer stehen. Feste Spaltenzahl heisst
	   auch, dass die Karten über alle Kategorien hinweg gleich breit sind —
	   bei auto-fill richtete sich das nach der Fensterbreite.
	   "minmax(0, 1fr)" statt "1fr": ein langer Titel ohne Leerzeichen
	   sprengt sonst die Spalte, weil 1fr als Minimum die Inhaltsbreite hat. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 1rem 0;
}

/* Kein Kasten: die Infoseite stellt ihre Inhalte als Bild, Überschrift und
   Text nebeneinander, getrennt allein durch die Bandfarben der Abschnitte.
   Der Artikel hier folgt demselben Muster - Fläche, Rahmen und Schatten sind
   deshalb weg. */
.ss-product-card {
	position: relative;
	background: none;
	border: 0;
	border-radius: 0;
	transition:
		transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
		box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1),
		background-color 180ms ease,
		border-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
	/* Beim Überfahren zieht nur das Titel-Schild nach; die Karte selbst
	   bleibt ruhig, sie ist keine Fläche mehr. */
	.ss-product-card:hover h3 {
		background: #8d081e;
	}
}

/* Karte reagiert auf den Druck — sie ist als Ganzes klickbar. */
.ss-product-card:active {
	opacity: 0.9;
	transition-duration: 100ms;
}

/* custom.css kürzt bei "reduce" bereits alle Dauern auf ~0; hier fällt
   zusätzlich die Verschiebung selbst weg, sonst bliebe sie als Sprung. */
@media (prefers-reduced-motion: reduce) {
	.ss-product-card:hover,
	.ss-product-card:active {
		transform: none;
	}
}

.ss-product-card:has(a:focus-visible) {
	outline: 2px solid var(--ss-accent);
	outline-offset: 2px;
}

.ss-product-card a:focus-visible {
	outline: none;
}

/* Karteninhalt als Spalte: Preis und Verfügbarkeit sitzen dadurch bei
   unterschiedlich langen Titeln immer auf gleicher Höhe am Kartenfuss. */
.ss-product-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	color: inherit;
	text-decoration: none;
}

.ss-product-card h3 {
	margin-bottom: auto;
	padding-bottom: 1rem;
	font-size: 1.05em;
	line-height: 1.3;
}

/* Preis und Verfügbarkeit bilden eine abgesetzte Fusszeile — vorher waren
   es drei gleich gewichtete Textzeilen ohne Rhythmus. */
.ss-product-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ss-line);
}

.ss-product-card .ss-price {
	font-size: 1.2em;
}

/* Badge schwebt über der Karte, damit sie die Titel benachbarter Karten
   nicht gegeneinander verschiebt. */
.ss-product-card .ss-badge {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 1;
}

.ss-product-card .ss-stock,
.ss-product-card .ss-stock--out {
	margin-left: auto;
}

.ss-product-card img {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

.ss-product-card__image {
	margin-bottom: 0.85rem;
}

.ss-product-card p {
	margin: 0;
}

.ss-product-card--sold-out {
	opacity: 0.55;
}

/* --- Produktdetail ------------------------------------------------------- */

.ss-product-reader {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin: 1rem 0;
}

.ss-product-reader__image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ss-radius);
}

.ss-product-reader__info {
	flex: 1;
	min-width: 260px;
}

.ss-product-reader__sku {
	color: var(--ss-muted);
	font-size: 0.85em;
}

.ss-product-reader__price {
	font-size: 1.4em;
	font-weight: 700;
	color: var(--ss-accent);
	margin-bottom: 1rem;
}

.ss-product-reader__price small {
	font-weight: normal;
	font-size: 0.5em;
}

.ss-product-reader__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.ss-product-reader__meta:empty {
	display: none;
}

.ss-product-reader__teaser {
	font-size: 1.05em;
	color: #555;
}

/* Attributtabelle ist eine Beschreibungsliste, keine Datentabelle */
.ss-product-reader__info table {
	width: auto;
}

.ss-product-reader__info th {
	padding-left: 0;
	text-transform: none;
	font-size: 0.9em;
}

/* --- In den Warenkorb ---------------------------------------------------- */

/* Kaufzone als abgesetzter Block — sonst schwimmen Menge und Button
   zwischen den Fließtexten, während der Rest des Auftritts mit klar
   abgegrenzten Kästen arbeitet. Der Kasten ist nur so breit wie nötig. */
.ss-add {
	margin-top: 1.5rem;
	max-width: max-content;
}

.ss-add__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
}

.ss-add__field {
	margin: 0;
}

.ss-add select {
	/* !important: main.css hat ein blankes "select { width:100% !important }",
	   das die Auswahlfelder sonst über die volle Zeilenbreite zieht. */
	width: auto !important;
	max-width: none;
}

.ss-add button {
	margin-top: 0;
}

.ss-add__hint,
.ss-add__msg {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.85em;
}

.ss-add__msg {
	color: #1a7a3c;
}

.ss-add__msg:empty {
	display: none;
}

/* --- Kasse ---------------------------------------------------------------
   Zwei Spalten: Adressformular links, Bestellübersicht rechts. Vorher lief
   das Formular als eine einzige 1200px breite Kolonne mit 420px schmalen
   Feldern — viel Leerraum, langer Scrollweg. */

.ss-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: 2.5rem;
	align-items: start;
}

/* Zwei Felder nebeneinander — dasselbe Muster, das der Auftritt beim
   Registrierungsformular nutzt (custom.css, ".mod_registration .formbody").

   Das Raster sitzt auf dem Wrapper, den Symfony um die Felder legt, nicht
   auf dem <form> selbst: dort liegen nur dieser eine Wrapper, das
   versteckte Token-Feld und der Button. */
.ss-checkout form > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5rem;
	align-content: start;
}

.ss-checkout form > div > div {
	margin-bottom: 1.2rem;
}

/* Mehrzeiliges, Zustimmung und Absenden brauchen die volle Breite. */
.ss-checkout form > div > div:has(> textarea),
.ss-checkout form > div > div:has(> input[type='checkbox']),
.ss-checkout form > div > div:has(> select[multiple]) {
	grid-column: 1 / -1;
}

.ss-checkout input[type='text'],
.ss-checkout input[type='email'],
.ss-checkout input[type='tel'],
.ss-checkout textarea,
.ss-checkout select {
	max-width: none;
}

.ss-checkout button[type='submit'] {
	margin-top: 0.5rem;
	justify-self: start;
}

.ss-checkout__summary .ss-panel {
	position: sticky;
	top: 1.5rem;
}

.ss-checkout__items {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.ss-checkout__items li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ss-line);
	font-size: 0.9em;
}

.ss-checkout__qty {
	font-weight: 700;
	color: var(--ss-accent);
}

.ss-checkout__name small {
	display: block;
	color: var(--ss-muted);
	font-size: 0.9em;
}

/* --- Varianten-Modal (per Fancybox eingeblendet) ------------------------- */

/* --- Varianten-Rückfrage --------------------------------------------------
   Steht im Kaufkasten selbst, direkt unter der Auswahl, um die es geht.
   Der Akzentstreifen links macht sie als Einwurf kenntlich, ohne dass sie
   wie eine Fehlermeldung aussieht — es ist eine Frage, keine Absage. */

.ss-add__confirm {
	margin-top: 1rem;
	padding: 0.875rem 1rem;
	border-left: 3px solid var(--ss-accent);
	background: #fff;
	border-radius: var(--ss-radius);
	/* Ohne Höhenanimation: der Kasten wächst nach unten, die Felder
	   darüber bleiben stehen. Nur Deckkraft und ein kurzer Weg. */
	animation: ss-confirm-in 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.ss-add__confirm[hidden] {
	display: none;
}

.ss-add__confirm p {
	margin: 0;
	font-size: 0.9em;
}

.ss-add__confirm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.875rem;
}

.ss-add__confirm-actions button {
	margin-top: 0;
}

@keyframes ss-confirm-in {
	from {
		opacity: 0;
		transform: translate3d(0, -4px, 0);
	}
}

/* --- Miniwarenkorb in der Navigation -------------------------------------
   Steht bewusst ausserhalb des ".ss"-Scopes: der Warenkorb sitzt im
   Header bzw. im mobilen Off-Canvas-Menü und muss dort die Farben der
   Navigation erben, nicht die des Shop-Inhalts.

   ".main-navigation" ist float:right und füllt den Wrapper bis zum rechten
   Rand — ein normal fliessendes Element danach landet deshalb NICHT rechts
   daneben. Also: Platz am Nav reservieren, Icon absolut hineinsetzen. */

.ss-minicart {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 100%;
}

.ss-minicart__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	height: 100%;
	color: inherit;
	text-decoration: none;
	/* 14px wie das Innenabstands-Mass der Hauptmenü-Punkte in custom.css */
	padding: 0 14px;
}

.ss-minicart__toggle svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* Die Blase ist im Ausgangszustand unsichtbar und wird erst gezeigt, wenn
   der Zähler einen Wert über null trägt (siehe Regel unter dieser). Vorher
   war es umgekehrt - sichtbar, dann von JS versteckt -, und beim Neuladen
   blitzte sie einen Moment lang auf. */
.ss-minicart__count {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.35em;
	background: var(--tidm-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1;
}

.ss-minicart__count[data-ss-count]:not([data-ss-count='0']):not([data-ss-count='']) {
	display: inline-flex;
}

.ss-minicart__panel {
	position: absolute;
	right: 0;
	top: 100%;
	min-width: 300px;
	padding: 1rem;
	background: #fff;
	color: #333;
	border: 1px solid var(--tidm-border);
	border-radius: 3px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	visibility: hidden;
	opacity: 0;
	transition: opacity 120ms ease, visibility 120ms ease;
	z-index: 200;
}

.ss-minicart:hover .ss-minicart__panel,
.ss-minicart:focus-within .ss-minicart__panel {
	visibility: visible;
	opacity: 1;
}

.ss-minicart__panel p,
.ss-minicart__panel li,
.ss-minicart__panel strong,
.ss-minicart__panel small {
	color: #333;
}

.ss-minicart__empty {
	margin: 0;
	color: #666;
	font-size: 0.9em;
}

.ss-minicart__list {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.ss-minicart__list li {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--tidm-border);
	font-size: 0.9em;
	text-align: left;
}

.ss-minicart__name small {
	display: block;
	color: #666;
	font-size: 0.9em;
}

.ss-minicart__total {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.9em;
	text-align: left;
}

@media only screen and (min-width: 901px) {
	.main-navigation-wrapper > .main-navigation {
		margin-right: 3.4em;
	}

	.main-navigation-wrapper > .ss-minicart {
		position: absolute;
		top: 0;
		right: 0;
		height: 130px;
		/* Gleiche Übergänge wie die Hauptmenü-Punkte (custom.css):
		   Hintergrund .2s, Höhe .3s linear beim Schrumpfen des Headers. */
		transition: background-color 0.2s ease, height 0.3s linear;
	}

	/* Hover wie bei jedem anderen Menüpunkt: dunkler Block, weisser Inhalt.
	   Farbe und Timing stammen 1:1 aus der Hover-Regel für
	   ".mod_rocksolid_mega_menu ul.level_1 > li" in custom.css. */
	.main-navigation-wrapper > .ss-minicart:hover {
		background-color: #242424;
	}

	.main-navigation-wrapper > .ss-minicart:hover .ss-minicart__toggle {
		color: #fff;
	}

	.header-navigation.nav-shrink .main-navigation-wrapper > .ss-minicart {
		height: 65px;
	}

	.main-navigation-mobile .ss-minicart {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	/* Im Off-Canvas gibt es kein Hover — Panel dort weglassen, das Icon
	   verlinkt direkt auf die Warenkorbseite. */
	.main-navigation-mobile .ss-minicart {
		height: auto;
		padding: 0.75em 1.5em;
	}

	.main-navigation-mobile .ss-minicart__panel {
		display: none;
	}

	.main-navigation-wrapper > .ss-minicart {
		display: none;
	}

	/* Die zwei Desktop-Spalten wären hier je gut 180px breit — eine Spalte. */
	.ss-product-list__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ss-product-reader {
		gap: 1.5rem;
	}

	/* Der rote Titelbalken ist inline-block und damit so breit wie sein
	   Text. Ein langer Produktname ("Nachtwächterrundgang") passt auf dem
	   Telefon in keine Zeile und schob den Balken bisher über den rechten
	   Rand — im Overlay lief er dabei sichtbar aus der abgerundeten Ecke.
	   Kleinere Schrift, und als Sicherheitsnetz Umbruch auch innerhalb
	   eines Wortes. */
	.ss-product-reader h1 {
		font-size: 1.4em;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.ss-actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* Kasse und Warenkorb-Fuss einspaltig, Übersicht wandert unter das
	   Formular; sticky ergibt auf dem Telefon keinen Sinn. */
	.ss-checkout,
	.ss-checkout form > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem 0;
	}

	.ss-checkout__summary .ss-panel {
		position: static;
	}

	.ss-cart__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.ss-cart__footer .ss-totals {
		min-width: 0;
	}

	/* Aufgelöste Tabellenzeilen: Zahlen wieder linksbündig, sonst stehen
	   sie ohne Spaltenkontext verloren am rechten Rand. Statt der
	   weggefallenen Kopfzeile beschriftet jede Zelle sich selbst. */
	.ss .ss-num {
		text-align: left;
	}

	.ss td[data-label] {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
	}

	.ss td[data-label]::before {
		content: attr(data-label);
		color: var(--ss-muted);
		font-size: 0.75em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	/* Die Entfernen-Zelle braucht keine Beschriftung. */
	.ss td:has(> .ss-remove) {
		justify-content: flex-end;
	}

	.ss table,
	.ss thead,
	.ss tbody,
	.ss th,
	.ss td,
	.ss tr {
		display: block;
	}

	/* --- Warenkorb: je Artikel eine Karte ---------------------------------
	   Aufgelöst standen dort fünf Zeilen untereinander (Titel, Einzelpreis,
	   Menge, Summe, Entfernen) und eine einzige Position war 172 px hoch —
	   bei zwei Artikeln füllt das den halben Bildschirm, ohne mehr zu sagen.
	   Dieselben Angaben in zwei Zeilen: oben der Artikel und das Kreuz,
	   darunter Menge, Einzelpreis und Summe nebeneinander.

	   Angesprochen werden die Zellen über eigene Klassen, nicht über
	   data-label: dessen Inhalt ist die übersetzte Spaltenüberschrift und
	   heißt auf der englischen Seite anders. */
	.ss-cart tbody tr {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 0.75rem;
		row-gap: 0.4rem;
		padding: 0.9rem 0;
		border-bottom: 1px solid var(--ss-line);
	}

	.ss-cart tbody tr:last-child {
		border-bottom: 0;
	}

	.ss-cart td.ss-cell--item {
		grid-column: 1 / 3;
		grid-row: 1;
		padding: 0;
	}

	.ss-cart td.ss-cell--remove {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		padding: 0;
	}

	.ss-cart td[data-label].ss-cell--qty {
		grid-column: 1;
		grid-row: 2;
		display: block;
		padding: 0;
	}

	.ss-cart td[data-label].ss-cell--unit {
		grid-column: 2;
		grid-row: 2;
		display: block;
		padding: 0;
		color: var(--ss-muted);
		font-size: 0.85em;
	}

	.ss-cart td[data-label].ss-cell--sum {
		grid-column: 3;
		grid-row: 2;
		display: block;
		padding: 0;
		text-align: right;
	}

	/* Die Spaltennamen fallen weg: in der Karte ist ohne Beschriftung klar,
	   was das Eingabefeld und was der Betrag ist. Beim Einzelpreis steht
	   stattdessen das "à" davor — sonst stünden dort zwei Beträge ohne
	   Unterschied nebeneinander. */
	.ss-cart td[data-label]::before {
		content: none;
	}

	.ss-cart td.ss-cell--unit:not(:empty)::before {
		content: "à ";
		color: inherit;
		font-size: inherit;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
	}

	.ss-cart td.ss-cell--qty input[type='number'] {
		width: 3.6em;
		padding: 0.4em;
	}

	.ss-cart td.ss-cell--sum .ss-price {
		color: var(--ss-accent);
		font-weight: 700;
	}

	/* Auf dem Telefon steht pro Zeile ohnehin nur eine Karte — dort wirkt
	   der Hebe-Effekt beim Antippen unruhig. */
	.ss-product-card:active {
		transform: none;
	}

	.ss thead {
		display: none;
	}

	.ss tr {
		border-bottom: 1px solid var(--ss-line);
		padding: 0.5rem 0;
	}

	.ss td {
		border: 0;
		padding: 0.2rem 0;
	}
}

/* ==========================================================================
   Artikel-Overlay (Fancybox)
   ==========================================================================

   Der Klick auf eine Artikelkarte öffnet das Detail in Fancybox statt die
   Seite zu wechseln — auf dem Desktop als Panel, unter 768px als
   Bottom-Sheet.

   Alles hier hängt an ".ss-fancybox" (mainClass, siehe shop.js). Der
   Stellplatzplan im Anmeldeformular nutzt dieselbe Fancybox mit den
   Standardwerten und darf davon nichts abbekommen — eine ".fancybox__*"-
   Regel ohne diesen Vorsatz träfe ihn mit.

   Fancybox setzt showClass/hideClass auf ".fancybox__content". Weil das nur
   Klassennamen sind, kann dieselbe Klasse per Media Query eine andere
   Animation bekommen: das JS kennt den Unterschied zwischen Panel und
   Sheet gar nicht.
   ========================================================================== */

.ss-fancybox {
	--fancybox-bg: rgba(18, 18, 18, 0.72);
}

/* Achtung: bei type:'html' mit einem einzigen Wurzelelement macht Fancybox
   genau dieses Element zum ".fancybox__content" — Panel und ".ss"-Wrapper
   des Fragments sind hier also EIN Knoten, nicht zwei ineinander. Deshalb
   steht der komplette Innenabstand an dieser einen Stelle; eine zweite
   Regel auf ".ss-product-detail" würde dieselbe Deklaration nur noch
   einmal überschreiben. */
.ss-fancybox .fancybox__content {
	width: min(920px, 92vw);
	padding: 1.75rem 2rem 2rem;
	border-radius: var(--ss-radius);
	background: #fff;
}

/* Auf dem Desktop scrollt der Slide, nicht das Panel. Fancybox setzt den
   Schließen-Knopf absolut auf "top:-38px" INNERHALB von .fancybox__content
   — bekäme das Panel ein eigenes "overflow", würde der Knopf abgeschnitten
   und der Slide finge die Klicks ab. Er wäre sichtbar und trotzdem nicht
   anklickbar. */

/* Nichts erscheint aus dem Nichts: das Panel wächst aus 0.97 und schiebt
   sich die letzten 12px hoch, statt aus einem Punkt aufzuklappen. */
@keyframes f-ss-in {
	from {
		opacity: 0;
		transform: scale(0.97) translate3d(0, 12px, 0);
	}
}

@keyframes f-ss-out {
	to {
		opacity: 0;
		transform: scale(0.985);
	}
}

.f-ss-in {
	animation: 220ms cubic-bezier(0.23, 1, 0.32, 1) both f-ss-in;
}

/* Deutlich unter 500ms: so lange wartet Fancybox in proceedClose(), bevor
   es den Knoten hart aus dem DOM nimmt. Eine längere Animation würde
   mittendrin abgeschnitten. */
.f-ss-out {
	animation: 150ms cubic-bezier(0.23, 1, 0.32, 1) both f-ss-out;
}

/* --- Bottom-Sheet -------------------------------------------------------- */

@media (max-width: 767px) {
	/* Fancybox zentriert den Slide über zwei Pseudo-Elemente mit
	   "margin:auto". Für das Sheet muss beides weg, sonst schwebt der
	   Kasten in der Mitte statt am unteren Rand zu sitzen. */
	.ss-fancybox .fancybox__slide {
		padding: 0;
		align-items: stretch;
	}

	.ss-fancybox .fancybox__slide::before {
		margin: 0;
	}

	.ss-fancybox .fancybox__slide::after {
		display: none;
	}

	.ss-fancybox .fancybox__content {
		align-self: stretch;
		margin-top: auto;
		width: 100%;
		max-width: 100%;
		max-height: 90vh;
		padding: 0.625rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
		border-radius: 14px 14px 0 0;
		/* Hier scrollt der Kasten selbst — das hält den Slide unscrollbar
		   und damit die Wischgeste von Fancybox aktiv (sie schaltet sich
		   bei scrollbarem Slide ab). */
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Griff. Bleibt beim Scrollen oben stehen, damit immer sichtbar ist,
	   dass sich das Sheet nach unten wegwischen lässt. Der Kasten scrollt,
	   der Slide nicht — nur so bleibt die Wischgeste von Fancybox aktiv
	   (sie wird bei scrollbarem Slide abgeschaltet). */
	.ss-fancybox .fancybox__content::before {
		content: '';
		position: sticky;
		top: 0;
		z-index: 1;
		flex: none;
		width: 36px;
		height: 4px;
		margin: 0 auto 1rem;
		border-radius: 2px;
		background: var(--ss-line);
		/* Der Streifen selbst ist nur 4px hoch — der aufgeblasene Schatten
		   deckt den darunter durchscrollenden Inhalt ab. */
		box-shadow: 0 -0.625rem 0 0.625rem #fff;
	}

	/* Kein Schließen-Kreuz im Sheet. Es säße absolut im Kasten und würde
	   beim Scrollen nach oben weglaufen; ausserhalb wiederum schnitte das
	   "overflow" des Kastens es ab. Zum Schließen gibt es den Griff samt
	   Wischgeste, den Hintergrund und die Zurück-Taste — so macht es ein
	   Sheet auf dem Telefon ohnehin. */
	.ss-fancybox .fancybox__content > .f-button.is-close-btn {
		display: none;
	}

	/* Das Sheet kommt aus der Richtung, in die man es auch wieder
	   wegwischt. Kurve: die iOS-Drawer-Kurve — schneller Antritt, langes
	   Ausrollen. */
	@keyframes f-ss-in {
		from {
			transform: translate3d(0, 100%, 0);
		}
	}

	@keyframes f-ss-out {
		to {
			transform: translate3d(0, 100%, 0);
		}
	}

	.f-ss-in {
		animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both f-ss-in;
	}

	.f-ss-out {
		animation: 200ms cubic-bezier(0.32, 0.72, 0, 1) both f-ss-out;
	}
}

/* Im Overlay ist der Kaufkasten das Einzige, worum es geht — dort darf er
   die volle Breite nehmen statt nur so breit zu sein wie sein Inhalt. */
.ss-fancybox .ss-add {
	max-width: none;
}

/* Karte, während ihr Detail geholt wird. */
.ss-product-card a[data-ss-loading] {
	cursor: wait;
	opacity: 0.6;
	transition: opacity 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.f-ss-in {
		animation: 120ms linear both f-fadeIn;
	}

	.f-ss-out {
		animation: 100ms linear both f-fadeOut;
	}

	.ss-add__confirm {
		animation: none;
	}
}

/* --- Mitglieds-Limit ------------------------------------------------------
   Ein Artikel, den das Mitglied schon in maximaler Anzahl besitzt, bleibt
   sichtbar — nur kaufen lässt er sich nicht mehr. Die Marke setzt sich
   deshalb ruhig ab (grau statt grün wie "im Warenkorb"), damit sie nicht
   nach Handlungsaufforderung aussieht. */
.ss-badge--owned {
	background: #eef1f4;
	color: #4a5661;
	border-color: #d7dee4;
}

.ss-product-card__note {
	margin: 0.4rem 0 0;
	font-size: 0.85em;
}

.ss-product-card__note a {
	color: var(--ss-accent);
	text-decoration: underline;
}

/* Die beiden Kästen ersetzen im Artikeldetail das Kaufformular. */
.ss-panel--owned,
.ss-panel--login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	font-weight: 700;
}

.ss-panel--login {
	font-weight: 400;
}

/* --- Meine Bestellungen ---------------------------------------------------- */

.ss-order-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-order-history__item {
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	margin-bottom: 0.75rem;
	background: var(--ss-panel);
}

.ss-order-history__item summary {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	gap: 0.5rem 1.2rem;
	align-items: baseline;
	padding: 0.9rem 1.2rem;
	cursor: pointer;
}

.ss-order__number {
	font-weight: 700;
}

.ss-order__status {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Storniert steht durchgestrichen da: der Eintrag bleibt sichtbar, damit
   nachvollziehbar ist, warum ein Kontingent wieder frei ist. */
.ss-order--cancelled .ss-order__number,
.ss-order--cancelled .ss-order__total {
	text-decoration: line-through;
	opacity: 0.7;
}

.ss-order__total {
	font-weight: 700;
	white-space: nowrap;
}

.ss-order__items {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 0.6rem;
}

.ss-order__items td {
	padding: 0.35rem 1.2rem;
	border-top: 1px solid var(--ss-line);
}

.ss-order__item-total {
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 40rem) {
	.ss-order-history__item summary {
		grid-template-columns: 1fr auto;
	}
}

/* Verfügbar und erlaubt, nur schon im Korb — dieselbe ruhige Farbe wie
   "Bereits erworben", weil auch hier nichts zu tun ist. */
.ss-panel--incart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
}

.ss-panel--incart strong {
	color: #4a5661;
	text-transform: uppercase;
	font-size: 0.9em;
	letter-spacing: 0.03em;
}

/* --- Angleichung an den Auftritt (Designstand 24.09.2026) ---------------- */

/* Preise stehen im Auftritt als rotes Schild (Ticketauswahl der Anmeldung,
   Preistabelle der Partnerseite). In der Karte wie auf der Detailseite. */
.ss-product-card .ss-price,
.ss-product-reader__price {
	display: inline-block;
	padding: 2px 15px;
	border-radius: var(--ss-radius);
	background: var(--ss-accent);
	color: #fff;
	font-weight: 800;
	line-height: 1.5;
}
.ss-product-card .ss-price--free,
.ss .ss-product-reader__price.ss-price--free {
	background: #18181b;
	color: #fff;
}
/* Der Steuerhinweis gehört nicht ins Schild. */
.ss-product-reader__price small {
	display: inline-block;
	margin-left: 10px;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 700;
}

/* Bestand und Artikelnummer als leise Versalien - dieselbe Rolle wie der
   Restbestand an den Ticketkarten. */
.ss-product-card .ss-stock,
.ss-product-card .ss-stock--out,
.ss-product-reader__meta .ss-stock,
.ss-product-reader__meta .ss-stock--out,
.ss-product-reader__sku {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 0.86667em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ss-product-card .ss-stock,
.ss-product-reader__meta .ss-stock,
.ss-product-reader__sku {
	color: var(--tidm-grey, #999);
}
.ss-product-card .ss-stock--low,
.ss-product-reader__meta .ss-stock--low {
	color: var(--ss-accent);
}

/* Die Knöpfe des Shops tragen die Form der Theme-Knöpfe ("Zu den Hotels und
   Pensionen", "Alle Zahlen ansehen"): roter Grund, weiße Versalien. Der
   Geister-Knopf bleibt die zweite Wahl, jetzt mit rotem Rahmen statt grauem. */
.ss button,
.ss input[type="submit"],
.ss .ss-button {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--ss-radius);
}
.ss .ss-button--ghost {
	border: 1px solid var(--ss-accent);
	color: var(--ss-accent);
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--ss-radius);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ss .ss-button--ghost:hover,
.ss .ss-button--ghost:focus-visible {
	background: var(--ss-accent);
	color: #fff;
}


/* --- Artikelliste (Designstand 24.09.2026, Form 24.09. abends) ----------
   Gebaut wie die Ticketauswahl der Anmeldung (.mx5-steps__area): eine
   Spalte, je Artikel ein weisser Kasten mit feinem Rahmen, darin Bezeichnung
   und - am rechten Ende - der Preis als rotes Schild. Das Weitere steht
   unten im Abschnitt "Artikelliste wie die Ticketauswahl". */

.ss-product-list__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0;
}

.ss-product-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	padding: 12px 19px;
	border: 1px solid var(--tidm-border, #dcdcdc);
	border-radius: 3px;
	background: #fff;
}

/* Bild wie die Bilder der Infoseite: Radius 3, ohne Rahmen. */
.ss-product-card__image {
	display: block;
	margin-bottom: 8px;
	line-height: 0;
}
.ss-product-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--ss-radius);
}

/* h4 exakt wie das Theme es setzt (18 px, Versalien, rotes Schild) - hier nur
   der Link darin: weiss, ohne Unterstreichung. */
.ss .ss-product-card h4 {
	display: inline-block;
	margin: 18px 0 5px;
	padding: 2px 15px;
	background: var(--ss-accent);
	color: #fff;
	border-radius: var(--ss-radius);
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	max-width: 100%;
	overflow-wrap: anywhere;
	transition: background-color 0.2s ease;
}
.ss .ss-product-card h4 a {
	color: inherit;
	text-decoration: none;
}
.ss .ss-product-card:hover h4 {
	background: #8d081e;
}
/* Ohne Bild sitzt das Schild direkt oben - wie auf der Infoseite. */
.ss-product-card > h4:first-child,
.ss-product-card > .ss-badge + h4 {
	margin-top: 0;
}

/* Fliesstext wie auf der Infoseite: 15 px, dunkel, 12 px Abstand. */
.ss .ss-product-card__text {
	margin: 12px 0 0;
	color: #242424;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.6;
}

/* Preis und freie Plaetze auf einer Zeile: der Preis kraeftig in Rot, der
   Rest leise daneben. */
.ss .ss-product-card__preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 1rem;
	margin: 14px 0 0;
}
.ss-product-card .ss-price {
	display: inline;
	padding: 0;
	margin: 0;
	background: none;
	color: var(--ss-accent);
	font-size: 1.46667em;
	font-weight: 800;
	line-height: 1.2;
}
.ss-product-card .ss-price--free {
	background: none;
	color: #18181b;
}
.ss-product-card .ss-stock,
.ss-product-card .ss-stock--out,
.ss-product-card .ss-badge--owned {
	margin: 0;
	font-size: 0.93333em;
	letter-spacing: 0.02em;
}

/* Der Knopf ist der Theme-Knopf, wie "Zu den Hotels und Pensionen"; er steht
   in allen Spalten auf gleicher Hoehe. shop.css faerbt Links im Shop dunkel
   und zieht Knoepfe auf volle Breite (Warenkorb, Kasse) - beides gilt hier
   nicht, deshalb ausdruecklich weiss und nur so breit wie der Text. */
.ss-product-card__action {
	margin: auto 0 0;
	padding-top: 18px;
}
.ss .ss-product-card__action .button {
	display: inline-block;
	width: auto;
	color: #fff;
}
.ss .ss-product-card__action .button.-secondary {
	color: #242424;
}

/* Die Marke "x im Warenkorb" schwebt ueber dem Bild. */
.ss-product-card .ss-badge[data-ss-card-count] {
	background: #18181b;
	color: #fff;
	padding: 2px 12px;
	border-radius: var(--ss-radius);
	font-weight: 800;
	font-size: 0.8em;
}

.ss-product-card--sold-out .ss-product-card__image img {
	filter: grayscale(1);
	opacity: 0.6;
}
.ss .ss-product-card--sold-out h4 {
	background: #55555a;
}

@media (max-width: 640px) {
	.ss-product-list__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
}

/* Der Zaehler am Warenkorb im Kopf ist eine Zahl, kein Wort - beim
   Ueberfahren gehoert da keine Unterstreichung hin. */
.ss-minicart__toggle,
.ss-minicart__toggle:hover,
.ss-minicart__toggle:focus-visible {
	text-decoration: none;
}

/* --- Artikelliste wie die Ticketauswahl der Anmeldung (24.09.2026) --------
   Dieselbe Zeile wie ".mx5-steps__area": eine Spalte, weisser Kasten mit
   feinem Rahmen, Bezeichnung als dunkle Versalien, Bestand leise daneben,
   Preis als rotes Schild am rechten Ende, Beschreibung darunter. Zwei
   Spalten mit rotem Titelschild waren ein zweites Gestaltungssystem neben
   dem Formular, in dem derselbe Besucher kurz vorher seine Ticketart
   gewaehlt hat. */
@media (hover: hover) and (pointer: fine) {
	/* Reaktion wie am Ticketkasten (und wie an einem Eingabefeld des
	   Themes): Rahmen eine Spur dunkler, weicher Schatten. Das Titelschild,
	   das frueher nachdunkelte, gibt es hier nicht mehr. */
	.ss .ss-product-card:hover {
		border-color: #cfcfcf #cfcfcf #c5c5c5;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
	}

	.ss .ss-product-card:hover h4 {
		background: none;
	}
}

/* Reihenfolge in der Zeile, unabhaengig von der Reihenfolge im Markup:
   Bild, Bezeichnung, Warenkorb-Marke, Preis/Bestand, Beschreibung, Knopf. */
.ss .ss-product-card__image { order: 0; flex: 1 0 100%; margin: 0 0 8px; }
.ss .ss-product-card h4 { order: 1; }
.ss .ss-product-card .ss-badge[data-ss-card-count] { order: 2; }
.ss .ss-product-card__preis { order: 3; }
.ss .ss-product-card__text { order: 4; }
.ss .ss-product-card__action { order: 5; }

/* Die Bezeichnung: dunkle Versalien in der Schrift der Ueberschriften - das
   rote Schild traegt in dieser Zeile allein der Preis. */
.ss .ss-product-card h4,
.ss .ss-product-card--sold-out h4 {
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	color: #242424;
	font-size: 1em;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

/* Der Link in der Bezeichnung ist nur Text. Eine aeltere Regel macht jeden
   Link in der Karte zu einer Spalte mit 20 px Polster - damit war die
   Titelzeile 60 statt 22 Pixel hoch. */
.ss .ss-product-card h4 a {
	display: inline;
	height: auto;
	padding: 0;
}

/* Die Marke "2 x in deiner Auswahl" steht in der Zeile, nicht darueber: im
   Kasten ist Platz dafuer, und schwebend verdeckte sie den Preis. */
.ss .ss-product-card .ss-badge[data-ss-card-count] {
	position: static;
	top: auto;
	right: auto;
}

/* Preis und Bestand ganz nach rechts, der Bestand links vom Preis - genau
   wie der Restbestand an der Ticketkarte. */
.ss .ss-product-card__preis {
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 12px;
	margin: 0 0 0 auto;
}

.ss .ss-product-card .ss-price {
	display: inline-block;
	padding: 2px 15px;
	border-radius: var(--ss-radius);
	background: var(--ss-accent);
	color: #fff;
	font-size: 1em;
	line-height: 1.5;
	white-space: nowrap;
}

.ss .ss-product-card .ss-price--free {
	background: #18181b;
	color: #fff;
}

/* Beschreibung und Knopf jeweils auf eigener Zeile unter der Kopfzeile. */
.ss .ss-product-card__text {
	flex: 1 0 100%;
	margin: 6px 0 0;
	font-size: 0.9em;
}

.ss .ss-product-card__action {
	flex: 1 0 100%;
	margin: 10px 0 0;
	padding: 0;
}

/* --- Zaehler am Warenkorb im Kopf (24.09.2026) ---------------------------
   Die Blase sitzt auf dem Symbol statt daneben. In der Zeile stehend machte
   sie den Warenkorb breiter, sobald etwas darin lag - und die Flagge daneben
   liegt an einer festen Stelle (right: 50px in custom.css), also schob sich
   der Warenkorb ueber sie. Als Blase auf dem Symbol bleibt die Breite gleich,
   ob null oder zwoelf Stueck darin liegen. */
@media only screen and (min-width: 901px) {
	.main-navigation-wrapper .ss-minicart__toggle {
		position: relative;
		gap: 0;
	}

	.main-navigation-wrapper .ss-minicart__count {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -18px 0 0 2px;
		pointer-events: none;
	}
}

/* --- Kaesten im selben Muster (24.09.2026) --------------------------------
   Artikeldetail, Kasse, Bestaetigung und Bestellungen arbeiten mit ".ss-panel".
   Der lag auf grauem Grund (#f7f7f7) und damit neben dem weissen Ticketkasten
   der Anmeldung. Grau bedeutet im Auftritt "gesperrt" - hier ist nichts
   gesperrt, also weiss mit demselben feinen Rahmen und denselben
   Innenabstaenden wie ".mx5-steps__area". */
.ss .ss-panel,
.ss .ss-add {
	background: #fff;
	border: 1px solid var(--tidm-border, #dcdcdc);
	border-radius: 3px;
	padding: 12px 19px;
}

/* Das Kaufformular ist der Kasten selbst - der Abstand nach oben bleibt. */
.ss .ss-add {
	margin-top: 1.5rem;
}

/* Die Rueckfrage "X durch Y ersetzen?" steht im Formular; sie bekommt keinen
   zweiten Rahmen, sonst liegt Kasten in Kasten. */
.ss .ss-add__confirm {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--tidm-border, #dcdcdc);
}