/* ========================================================================== Shop 2026 — shop-cart.css (Stufe 1: Politur der Ticketseiten) Laeuft NUR, wenn die neue Shop-Shell aktiv ist (). Wird in der Minify-Gruppe "cssshop" NACH eventpage/static/theme/ticket-bridge.css gebuendelt: die Bridge mappt die --ep-*-Tokens auf Bootstrap-Primitive, diese Datei ergaenzt nur, was der Bridge fuer die Ticketauswahl/Kasse fehlt: - Ticketvarianten als Grid (Name/Beschreibung links, Preis + Stepper rechts) - Stepper-Reihenfolge/-Reset gegen Legacy-Absolutpositionen (style.css) - Kassenbox als Bestellpanel, Sticky-Spalte ab 992px (Klassen setzt shop-cart.js) - Zahlarten als waehlbare Karten mit Logo, Text und Radio-Indikator - Summentabelle als Definitionsliste auf dem Handy - Sticky-Mobile-Leiste .shop-cartbar (Markup erzeugt shop-cart.js) Grundregel: jede Regel ist unter [data-shop-theme] gescoped. !important nur dort, wo cart.php Inline-Styles setzt. IDs/Klassen aus cart.php bleiben unangetastet. ========================================================================== */ /* ---- Grundflaeche / Ueberlauf ---------------------------------------------- */ [data-shop-theme] .shop-legacy { min-width: 0; overflow-x: clip; } [data-shop-theme] .shop-legacy .container { max-width: 100%; } /* Event-Kopf (eheadblocksub): Titel, Datum, Ort, Kurztext, Veranstalter, Eventinfos-Button in einer ruhigen Skala */ /* Die Event-Karte ist ein .panel, direkt darin liegt eine Bootstrap-.row mit -15px Rand, die ueber die Kartenkante hinausragt (Ticketkarten klebten rechts am Rand). */ [data-shop-theme] .shop-legacy .panel > .row[itemscope] { margin-left: 0; margin-right: 0; } [data-shop-theme] .shop-legacy .panel-bodyx > .col-xs-12[id^="e"] { padding: 16px 20px 20px; } /* Das alte Skin gab .eventblock 15px Innenabstand + 4px-Balken; im Theme bekommt die ganze Info-Spalte eine eigene Flaeche, Bootstrap-Row/Col darin werden neutralisiert. */ [data-shop-theme] .shop-legacy .eheadblocksub { padding: 18px 20px 16px; margin-bottom: 0; border-bottom: var(--ep-border-w) solid var(--ep-line); } [data-shop-theme] .shop-legacy .eheadblocksub > .row { margin-left: 0; margin-right: 0; } [data-shop-theme] .shop-legacy .eheadblocksub > .row > .col-xs-12 { padding-left: 0; padding-right: 0; } [data-shop-theme] .shop-legacy .eheadblocksub .eventblock { padding: 0; margin: 0; border: 0; } [data-shop-theme] .shop-legacy .eheadblocksub .eventblock { display: flex; flex-direction: column; gap: 6px; } [data-shop-theme] .shop-legacy h2.event { font-size: clamp(1.375rem, 3.2vw, 1.875rem); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 4px; overflow-wrap: anywhere; hyphens: auto; } [data-shop-theme] .shop-legacy .eventblock h3 { font-family: var(--ep-font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--ep-text); line-height: 1.45; margin: 0; } [data-shop-theme] .shop-legacy .eventblock h3 small { display: block; margin-top: 2px; white-space: normal; } [data-shop-theme] .shop-legacy .eventblock h3 small, [data-shop-theme] .shop-legacy .eventblock h4 { font-family: var(--ep-font-body); color: var(--ep-muted); font-weight: 400; font-size: .9375rem; line-height: 1.5; letter-spacing: 0; margin: 0; } [data-shop-theme] .shop-legacy .eventblock h4 { margin-top: 4px; } [data-shop-theme] .shop-legacy .onbottom p.small { font-size: .875rem; line-height: 1.5; margin: 12px 0; padding: 0; } [data-shop-theme] .shop-legacy .onbottom .btn.outline { margin-bottom: 4px; } [data-shop-theme] .shop-legacy .softed { color: var(--ep-muted); } [data-shop-theme] .shop-legacy hr { margin: calc(var(--ep-gap) * .9) 0; border-top: var(--ep-border-w) solid var(--ep-line); } /* Ausklappbare Kurzbeschreibungen (cart.php setzt Hintergrund/Farbe inline) */ [data-shop-theme] .ticket-desc { background: var(--ep-surface-2) !important; color: var(--ep-text) !important; border-radius: var(--ep-radius-sm) !important; font-size: .875rem !important; line-height: 1.45; } [data-shop-theme] .ticket-card-title .glyphicon-info-sign { cursor: pointer; } [data-shop-theme] .ticket-card-title [role="button"]:focus-visible { outline: 3px solid var(--ep-focus, var(--ep-primary)); outline-offset: 2px; border-radius: 3px; } /* ---- Ticketkarten: ruhige Panels, Varianten als Grid ----------------------- */ [data-shop-theme] .ticket-card { min-width: 0; padding: 18px 20px; margin-bottom: 14px; box-shadow: none; } [data-shop-theme] .ticket-card:hover { box-shadow: var(--ep-shadow); } [data-shop-theme] .ticket-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 1.0625rem; margin-bottom: 2px; } [data-shop-theme] .ticket-card-info { font-size: .8125rem; margin-bottom: 8px; } [data-shop-theme] .ticket-variant { display: grid; /* Desktop: eine Zeile — Name | Einzelpreis | Menge | Zeilensumme */ grid-template-columns: minmax(0, 1fr) auto auto minmax(72px, auto); grid-template-areas: "label price qty sum"; align-items: center; column-gap: 18px; row-gap: 2px; padding: 12px 0; border-bottom: var(--ep-border-w) solid var(--ep-line); } [data-shop-theme] .ticket-variant:last-child { border-bottom: 0; padding-bottom: 4px; } [data-shop-theme] .ticket-variant .variant-label { grid-area: label; min-width: 0; flex: none; width: auto; font-size: .9375rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; } [data-shop-theme] .ticket-variant .variant-label .ticket-desc { font-weight: 400; } [data-shop-theme] .ticket-variant .variant-price { grid-area: price; width: auto; text-align: right; font-size: 1rem; font-weight: 600; color: var(--ep-text); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-shop-theme] .ticket-variant .variant-price s { color: var(--ep-muted); font-weight: 400; font-size: .875rem; } [data-shop-theme] .ticket-variant .variant-qty { grid-area: qty; width: auto; display: block; } [data-shop-theme] .ticket-variant .variant-qty::before { content: none; } [data-shop-theme] .ticket-variant .variant-sum { grid-area: sum; width: auto; text-align: right; font-size: .8125rem; font-weight: 500; color: var(--ep-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-shop-theme] .ticket-variant.is-combo .variant-label { padding-left: 14px; color: var(--ep-text); border-left: 2px solid var(--ep-line-strong); } [data-shop-theme] .ticket-variant .ticket-unavailable { grid-column: price / -1; text-align: right; } /* Nicht verfuegbar / bald: gedimmt, aber lesbar */ [data-shop-theme] .ticket-card .ticket-unavailable, [data-shop-theme] .ticket-card .ticket-upcoming { display: inline-block; padding: .3em .75em; border-radius: 999px; font-style: normal; font-size: .8125rem; font-weight: 600; background: var(--ep-surface-2); } [data-shop-theme] .ticket-card .ticket-unavailable { color: var(--ep-muted); } [data-shop-theme] .ticket-card:has(> .ticket-unavailable) { background: var(--ep-surface-2); border-style: dashed; box-shadow: none; } [data-shop-theme] .ticket-card:has(> .ticket-unavailable) .ticket-card-title { color: var(--ep-muted); } [data-shop-theme] .ticket-card:has(> .ticket-unavailable):hover { box-shadow: none; } [data-shop-theme] .ticket-variant:has(> .ticket-unavailable) .variant-label { color: var(--ep-muted); } [data-shop-theme] .ticket-variant .variant-price { color: var(--ep-text); font-weight: 500; } [data-shop-theme] .ticket-variant .variant-sum { font-weight: 700; font-variant-numeric: tabular-nums; } /* Bundle-Badges auf Tokens (cart.php setzt Pastellfarben inline im