/** * DWL Events – Frontend * * Eigenständiges, zurückhaltendes Designsystem für alle Ausgaben des Plugins. * * Grundsätze * ---------- * 1. Alles ist auf `.dwl-*` beschränkt. Das Stylesheet verändert nichts, * was nicht zum Plugin gehört. * 2. Farben, Abstände, Radien und Schatten kommen aus CSS-Variablen mit dem * Präfix `--dwl-`. Ein Theme (oder ein Child-Theme) kann jede Variable * überschreiben, ohne eine einzige Regel anfassen zu müssen: * * :root { --dwl-accent: #b8860b; --dwl-radius-lg: 4px; } * * 3. Die Schriftart wird bewusst vom Theme geerbt (`font-family: inherit`). * Größen, Gewichte und Laufweiten legt das Plugin fest, damit die * Hierarchie stimmt. * 4. Dunkle Darstellung: dem (oder einem Wrapper) die Klasse * `dwl-scheme-dark` geben – oder `data-dwl-scheme="dark"` setzen. * * @package DWL_Events */ /* ==================================================================== */ /* 1. Designtokens */ /* ==================================================================== */ :root { /* Flächen */ --dwl-surface: #ffffff; --dwl-surface-sunken: #f6f7f9; --dwl-surface-raised: #ffffff; --dwl-overlay: rgba(12, 16, 22, 0.72); /* Text */ --dwl-ink: #10151c; --dwl-ink-soft: #4a5462; --dwl-ink-faint: #78828f; --dwl-on-accent: #ffffff; /* Linien */ --dwl-line: #e4e7ec; --dwl-line-strong: #cfd5de; /* Akzent (Aktionen, Fokus, aktive Zustände) */ --dwl-accent: #0f5f66; --dwl-accent-hover: #0b4a50; --dwl-accent-soft: rgba(15, 95, 102, 0.08); /* Signalfarben */ --dwl-positive: #1a7f4b; --dwl-positive-soft: rgba(26, 127, 75, 0.1); --dwl-warning: #9a6300; --dwl-warning-soft: rgba(154, 99, 0, 0.1); --dwl-critical: #b32318; --dwl-critical-soft: rgba(179, 35, 24, 0.09); /* Radien – eckig, wie die WooCommerce-Produktseite */ --dwl-radius: 0px; --dwl-radius-lg: 0px; --dwl-radius-pill: 999px; /* Schatten */ --dwl-shadow-sm: 0 1px 2px rgba(16, 21, 28, 0.05); --dwl-shadow-md: 0 6px 20px -8px rgba(16, 21, 28, 0.18), 0 2px 6px rgba(16, 21, 28, 0.05); --dwl-shadow-lg: 0 24px 48px -24px rgba(16, 21, 28, 0.28), 0 4px 12px rgba(16, 21, 28, 0.06); /* Abstände */ --dwl-gap: 1.5rem; --dwl-gap-sm: 0.75rem; --dwl-gap-lg: 2.5rem; /* Typografie */ --dwl-font: inherit; --dwl-font-numeric: inherit; --dwl-text-xs: 0.75rem; --dwl-text-sm: 0.875rem; --dwl-text-base: 1rem; --dwl-text-lg: 1.125rem; --dwl-text-xl: 1.375rem; /* Bewegung */ --dwl-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dwl-speed: 180ms; } .dwl-scheme-dark, [data-dwl-scheme="dark"] { --dwl-surface: #12171f; --dwl-surface-sunken: #1a212b; --dwl-surface-raised: #182029; --dwl-ink: #f2f5f8; --dwl-ink-soft: #b3bdc9; --dwl-ink-faint: #8b96a4; --dwl-line: #2a3341; --dwl-line-strong: #3a4757; --dwl-accent: #4fd1c5; --dwl-accent-hover: #7ee0d7; --dwl-accent-soft: rgba(79, 209, 197, 0.14); --dwl-on-accent: #06231f; --dwl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --dwl-shadow-md: 0 6px 20px -8px rgba(0, 0, 0, 0.6); --dwl-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.75); } /* Gemeinsame Grundlage aller Plugin-Bereiche */ .dwl-event, .dwl-event-box, .dwl-card, .dwl-calendar, .dwl-archive, .dwl-search, .dwl-venue, .dwl-account, .dwl-booking, .dwl-ticket, .dwl-attendee-fields { font-family: var(--dwl-font); color: var(--dwl-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .dwl-event *, .dwl-event-box *, .dwl-card *, .dwl-calendar *, .dwl-booking *, .dwl-account * { box-sizing: border-box; } /* Screenreader-Text, falls das Theme keinen mitbringt */ .dwl-calendar .screen-reader-text, .dwl-event .screen-reader-text, .dwl-card .screen-reader-text, .dwl-booking .screen-reader-text, .dwl-account .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Sichtbarer Fokus – überall gleich */ .dwl-event :focus-visible, .dwl-event-box :focus-visible, .dwl-card :focus-visible, .dwl-calendar :focus-visible, .dwl-booking :focus-visible, .dwl-account :focus-visible, .dwl-venue :focus-visible { outline: 2px solid var(--dwl-accent); outline-offset: 2px; border-radius: 4px; } /* ==================================================================== */ /* 2. Bausteine: Label, Fließtext, Schaltflächen, Badges, Hinweise */ /* ==================================================================== */ .dwl-eyebrow { display: block; margin: 0 0 0.35rem; font-size: var(--dwl-text-xs); font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-summary__total-value, .dwl-card__price, .dwl-ticket-type__price, .dwl-month__time, .dwl-daylist__time, .dwl-btn--page, .dwl-datestamp { font-variant-numeric: tabular-nums; font-family: var(--dwl-font-numeric); } .dwl-muted { color: var(--dwl-ink-soft); font-size: var(--dwl-text-sm); } /* Fließtext mit lesbarer Zeilenlänge */ .dwl-prose { max-width: 68ch; line-height: 1.7; color: var(--dwl-ink-soft); } .dwl-prose > :first-child { margin-top: 0; } .dwl-prose > :last-child { margin-bottom: 0; } .dwl-prose p, .dwl-prose ul, .dwl-prose ol { margin: 0 0 1.1em; } .dwl-prose h2, .dwl-prose h3, .dwl-prose h4 { color: var(--dwl-ink); margin: 1.8em 0 0.6em; line-height: 1.25; letter-spacing: -0.01em; } .dwl-prose a { color: var(--dwl-accent); text-underline-offset: 0.2em; } /* --- Schaltflächen -------------------------------------------------- */ /* Bewusst ohne eigene Optik: Farbe, Rahmen, Radius und Größe kommen vom Theme (die Schaltflächen tragen zusätzlich dessen Klasse `button`). Hier steht nur, was die Anordnung von Symbol und Beschriftung braucht. */ .dwl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; } .dwl-btn--block { display: flex; width: 100%; } .dwl-btn__icon { display: inline-flex; flex: 0 0 auto; } .dwl-btn__icon svg { display: block; width: 1.125em; height: 1.125em; } /* Aktive Ansicht in der Kalender-Umschaltung: nur über Schriftschnitt und Unterstreichung markiert, damit die Theme-Optik erhalten bleibt. */ .dwl-btn--view.is-active, .dwl-btn--page.is-current { font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; } .dwl-btn--page { font-variant-numeric: tabular-nums; } /* --- Badges und Marker ---------------------------------------------- */ .dwl-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3em 0.7em; margin: 0; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-pill); background: var(--dwl-surface); color: var(--dwl-ink-soft); font-size: var(--dwl-text-xs); font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: border-color var(--dwl-speed) var(--dwl-ease), color var(--dwl-speed) var(--dwl-ease), background var(--dwl-speed) var(--dwl-ease); } a.dwl-badge:hover { border-color: var(--dwl-accent); background: var(--dwl-accent-soft); color: var(--dwl-accent); } .dwl-badge--cat { text-transform: uppercase; letter-spacing: 0.08em; } .dwl-badge--soldout { border-color: transparent; background: var(--dwl-critical-soft); color: var(--dwl-critical); } .dwl-badge--positive { border-color: transparent; background: var(--dwl-positive-soft); color: var(--dwl-positive); } .dwl-badge--warning { border-color: transparent; background: var(--dwl-warning-soft); color: var(--dwl-warning); } .dwl-taglist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } /* --- Hinweise ------------------------------------------------------- */ .dwl-empty, .dwl-notice, .dwl-alert { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0 0 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--dwl-line); border-left: 3px solid var(--dwl-ink-faint); border-radius: var(--dwl-radius); background: var(--dwl-surface-sunken); color: var(--dwl-ink-soft); font-size: var(--dwl-text-sm); line-height: 1.55; } .dwl-alert strong { color: var(--dwl-ink); } .dwl-alert--cancelled, .dwl-alert--soldout, .dwl-alert--sold_out { border-left-color: var(--dwl-critical); background: var(--dwl-critical-soft); color: var(--dwl-critical); } .dwl-alert--postponed { border-left-color: var(--dwl-warning); background: var(--dwl-warning-soft); color: var(--dwl-warning); } .dwl-alert--checked { border-left-color: var(--dwl-positive); background: var(--dwl-positive-soft); color: var(--dwl-positive); } .dwl-alert--cancelled strong, .dwl-alert--soldout strong, .dwl-alert--sold_out strong, .dwl-alert--postponed strong, .dwl-alert--checked strong { color: inherit; } .dwl-alert__icon { flex: 0 0 auto; margin-top: 0.1rem; } .dwl-alert__icon svg { display: block; width: 1.1rem; height: 1.1rem; } /* ==================================================================== */ /* 3. Kacheln und Listen */ /* ==================================================================== */ .dwl-eventlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--dwl-gap); margin: 0; padding: 0px 10px !important; list-style: none; } .dwl-eventlist__item { display: flex; margin: 0; } .dwl-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface-raised); overflow: hidden; box-shadow: var(--dwl-shadow-sm); transition: transform var(--dwl-speed) var(--dwl-ease), box-shadow var(--dwl-speed) var(--dwl-ease), border-color var(--dwl-speed) var(--dwl-ease); } .dwl-card:hover { transform: translateY(-3px); border-color: var(--dwl-line-strong); box-shadow: var(--dwl-shadow-lg); } .dwl-card:focus-within { border-color: var(--dwl-accent); } .dwl-card__media { position: relative; background: var(--dwl-surface-sunken); overflow: hidden; } .dwl-card__imagelink { display: block; line-height: 0; } .dwl-card__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 400ms var(--dwl-ease); } .dwl-card:hover .dwl-card__image { transform: scale(1.035); } .dwl-card__placeholder { display: block; width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--dwl-surface-sunken) 0%, var(--dwl-line) 100%); } /* Datumsstempel – die wichtigste Information zuerst */ .dwl-datestamp { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.4rem; padding: 0.45rem 0.5rem; border-radius: calc(var(--dwl-radius) + 2px); background: var(--dwl-surface); box-shadow: var(--dwl-shadow-md); line-height: 1; text-align: center; } .dwl-datestamp__day { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--dwl-ink); } .dwl-datestamp__month { margin-top: 0.2rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dwl-ink-faint); } /* Preisschild über dem Bild */ .dwl-card__price { position: absolute; right: 0.85rem; bottom: 0.85rem; z-index: 2; display: inline-flex; align-items: baseline; gap: 0.3rem; margin: 0; padding: 0.4rem 0.75rem; border-radius: var(--dwl-radius-pill); background: var(--dwl-surface); color: var(--dwl-ink); font-size: var(--dwl-text-sm); font-weight: 700; box-shadow: var(--dwl-shadow-md); } .dwl-card__price-unit { font-size: var(--dwl-text-xs); font-weight: 500; color: var(--dwl-ink-faint); } /* Altersangabe als Aufkleber auf dem Bild – in Kacheln unten links, damit sie dem Datumsstempel oben links und dem Preis unten rechts ausweicht. */ .dwl-age { position: absolute; z-index: 2; margin: 0; padding: 0.3rem 0.7rem; border-radius: var(--dwl-radius-pill); background: var(--dwl-ink); color: #fff; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.03em; line-height: 1.3; white-space: nowrap; box-shadow: var(--dwl-shadow-sm); } .dwl-card__media .dwl-age { bottom: 0.85rem; left: 0.85rem; } .dwl-gallery-view__main .dwl-age { top: 1rem; left: 1rem; } /* Statusbanner quer über dem Bild – deutlich lauter als der Aufkleber, weil es eine Absage oder ein Ausverkauf niemand übersehen soll. */ .dwl-banner { position: absolute; top: 1rem; right: 1rem; z-index: 3; margin: 0; padding: 0.45rem 1rem; border-radius: var(--dwl-radius-pill); background: var(--dwl-critical); color: #fff; font-size: var(--dwl-text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: var(--dwl-shadow-md); } /* Statusfahne */ .dwl-card__flag { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; margin: 0; padding: 0.3rem 0.7rem; border-radius: var(--dwl-radius-pill); background: var(--dwl-critical); color: #fff; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--dwl-shadow-sm); } .dwl-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.75rem; padding: 1.15rem 1.25rem 1.25rem; } .dwl-card__title { margin: 0; font-size: var(--dwl-text-lg); font-weight: 700; line-height: 1.3; letter-spacing: -0.011em; } .dwl-card__title a { color: var(--dwl-ink); text-decoration: none; } .dwl-card__title a:hover { color: var(--dwl-accent); } /* Die ganze Kachel ist klickbar, ohne verschachtelte Links */ .dwl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .dwl-card__facts { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: var(--dwl-text-sm); color: var(--dwl-ink-soft); } .dwl-card__fact { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .dwl-card__fact > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dwl-card__icon { display: inline-flex; flex: 0 0 auto; color: var(--dwl-ink-faint); line-height: 1; } .dwl-card__icon svg { display: block; width: 1rem; height: 1rem; } .dwl-card__action { margin: auto 0 0; padding-top: 0.85rem; border-top: 1px solid var(--dwl-line); font-size: var(--dwl-text-sm); font-weight: 600; } .dwl-card__action a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--dwl-accent); text-decoration: none; } .dwl-card__arrow { display: inline-flex; transition: transform var(--dwl-speed) var(--dwl-ease); } .dwl-card__arrow svg { display: block; width: 1rem; height: 1rem; } .dwl-card:hover .dwl-card__arrow { transform: translateX(3px); } /* ==================================================================== */ /* 4. Kalender, Filter, Blätterfunktion */ /* ==================================================================== */ .dwl-calendar__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 0px solid var(--dwl-line); } .dwl-calendar__title { flex: 1 1 auto; margin: 0; font-size: var(--dwl-text-xl); font-weight: 700; letter-spacing: -0.015em; } .dwl-calendar__nav, .dwl-calendar__views ul { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } /* Filterleiste */ .dwl-filters { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: flex-end; margin-bottom: 1.75rem; padding: 1.15rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface-sunken); } .dwl-filters__field { display: flex; flex: 1 1 10rem; flex-direction: column; gap: 0.3rem; min-width: 10rem; margin: 0; } .dwl-filters__field label { font-size: var(--dwl-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-filters__field--range { flex: 1 1 20rem; flex-direction: row; align-items: center; gap: 0.4rem; } .dwl-filters__actions { flex: 0 0 auto; margin: 0; } .dwl-filters input[type="search"], .dwl-filters input[type="date"], .dwl-filters select { min-height: 2.75rem; padding: 0.5rem 0.7rem; border: 1px solid var(--dwl-line-strong); border-radius: var(--dwl-radius); background: var(--dwl-surface); color: var(--dwl-ink); font-family: inherit; font-size: var(--dwl-text-sm); } /* Monatsansicht */ .dwl-month { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface); overflow: hidden; } .dwl-month th, .dwl-month td { padding: 0.55rem; border-right: 1px solid var(--dwl-line); border-bottom: 1px solid var(--dwl-line); text-align: left; vertical-align: top; font-size: var(--dwl-text-sm); } .dwl-month th:last-child, .dwl-month td:last-child { border-right: 0; } .dwl-month tr:last-child td { border-bottom: 0; } .dwl-month th { background: var(--dwl-surface-sunken); text-align: center; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-month__cell { height: 7.5rem; transition: background var(--dwl-speed) var(--dwl-ease); } .dwl-month__cell:hover { background: var(--dwl-surface-sunken); } .dwl-month__cell.is-outside { background: var(--dwl-surface-sunken); color: var(--dwl-ink-faint); } .dwl-month__cell.is-today { box-shadow: inset 0 0 0 2px var(--dwl-accent); } .dwl-month__cell.is-today .dwl-month__daynum { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: var(--dwl-radius-pill); background: var(--dwl-accent); color: var(--dwl-on-accent); font-weight: 700; text-decoration: none; } .dwl-month__daynum { display: block; margin-bottom: 0.35rem; font-weight: 600; color: var(--dwl-ink-soft); } .dwl-month__events { margin: 0; padding: 0; list-style: none; font-size: var(--dwl-text-xs); } .dwl-month__events li + li { margin-top: 0.25rem; } .dwl-month__events a { color: var(--dwl-ink); text-decoration: none; } .dwl-month__events a:hover { color: var(--dwl-accent); } .dwl-month__time { margin-right: 0.3rem; color: var(--dwl-ink-faint); } /* Wochen- und Tagesansicht */ .dwl-week, .dwl-daylist, .dwl-map__list, .dwl-year { margin: 0; padding: 0; list-style: none; } .dwl-week__day + .dwl-week__day { margin-top: 1.75rem; } .dwl-week__heading { margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--dwl-line); font-size: var(--dwl-text-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-daylist__item { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--dwl-line); transition: background var(--dwl-speed) var(--dwl-ease); } .dwl-daylist__item:hover { background: var(--dwl-surface-sunken); } .dwl-daylist__time { min-width: 6rem; font-size: var(--dwl-text-sm); font-weight: 600; color: var(--dwl-ink-faint); } .dwl-daylist__title { font-weight: 600; } .dwl-daylist__link { color: var(--dwl-ink); text-decoration: none; } .dwl-daylist__link:hover { color: var(--dwl-accent); } .dwl-daylist__venue { font-size: var(--dwl-text-sm); color: var(--dwl-ink-soft); } /* Jahresansicht */ .dwl-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--dwl-gap); } .dwl-year__month { padding: 1rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface); } .dwl-year__list { margin: 0; padding-left: 1.1rem; font-size: var(--dwl-text-sm); color: var(--dwl-ink-soft); } /* Seitennummerierung */ .dwl-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--dwl-line); } .dwl-pagination__count { flex: 1 1 100%; margin: 0; font-size: var(--dwl-text-sm); color: var(--dwl-ink-faint); } .dwl-pagination__list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } /* ==================================================================== */ /* 5. Veranstaltungsseite */ /* ==================================================================== */ .dwl-event { --dwl-hero-radius: calc(var(--dwl-radius-lg) + 6px); max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: var(--dwl-gap-lg); } /* --- Galerie --------------------------------------------------------- */ /* Aufbau wie die WooCommerce-Produktgalerie: Hauptbild über die volle Spaltenbreite, darunter eine Reihe aus vier Vorschaubildern. Das Hauptbild behält sein natürliches Seitenverhältnis und wird nicht beschnitten. */ .dwl-gallery-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 2rem; } .dwl-gallery-view__main { position: relative; margin: 0; background: var(--dwl-surface-sunken); overflow: hidden; } .dwl-gallery-view__main img { display: block; width: 100%; height: auto; } .dwl-gallery-view__nav { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #10151c; cursor: pointer; box-shadow: var(--dwl-shadow-md); opacity: 0; transform: translateY(-50%); transition: opacity var(--dwl-speed) var(--dwl-ease), background var(--dwl-speed) var(--dwl-ease); } .dwl-gallery-view__nav svg { width: 1.15rem; height: 1.15rem; } .dwl-gallery-view:hover .dwl-gallery-view__nav, .dwl-gallery-view__nav:focus-visible { opacity: 1; } @media (hover: none) { .dwl-gallery-view__nav { opacity: 1; } } .dwl-gallery-view__nav:hover { background: #fff; } .dwl-gallery-view__nav--prev { left: 0.85rem; } .dwl-gallery-view__nav--next { right: 0.85rem; } .dwl-gallery-view__counter { position: absolute; right: 0.85rem; bottom: 0.85rem; padding: 0.25rem 0.7rem; border-radius: var(--dwl-radius-pill); background: var(--dwl-overlay); color: #fff; font-size: var(--dwl-text-xs); font-weight: 600; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); } .dwl-gallery-view__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .dwl-gallery-view__thumb { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; transition: box-shadow var(--dwl-speed) var(--dwl-ease); } /* Vorschaubilder quadratisch beschnitten – wie der WooCommerce-Standard („Zuschnitt der Vorschaubilder: 1:1“). */ .dwl-gallery-view__thumb img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; opacity: 0.85; transition: transform 400ms var(--dwl-ease), opacity var(--dwl-speed) var(--dwl-ease); } .dwl-gallery-view__thumb:hover img { transform: scale(1.04); opacity: 1; } .dwl-gallery-view__thumb.is-active { box-shadow: 0 0 0 2px var(--dwl-accent); } .dwl-gallery-view__thumb.is-active img { opacity: 1; } @media (max-width: 782px) { .dwl-gallery-view__thumbs { gap: 0.6rem; } } /* --- Kopfbereich ----------------------------------------------------- */ .dwl-event__intro { margin-bottom: 1.75rem; } .dwl-event__cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; } .dwl-event__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--dwl-ink); text-wrap: balance; } .dwl-event__lead { max-width: 62ch; margin: 0 0 1.25rem; font-size: var(--dwl-text-lg); line-height: 1.6; color: var(--dwl-ink-soft); } /* Eckdaten als Raster statt als Aufzählung */ .dwl-quickfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 0 0 2rem; padding: 0; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-line); list-style: none; overflow: hidden; } .dwl-quickfact { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; padding: 1rem 1.1rem; background: var(--dwl-surface); } .dwl-quickfact__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: var(--dwl-radius); background: var(--dwl-accent-soft); color: var(--dwl-accent); line-height: 1; } .dwl-quickfact__icon svg { display: block; width: 1.1rem; height: 1.1rem; } .dwl-quickfact__body { min-width: 0; } .dwl-quickfact__label { display: block; margin-bottom: 0.15rem; font-size: var(--dwl-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-quickfact__value { display: block; font-size: var(--dwl-text-sm); font-weight: 600; line-height: 1.45; color: var(--dwl-ink); } .dwl-quickfact__value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--dwl-line-strong); } .dwl-quickfact__value a:hover { color: var(--dwl-accent); border-bottom-color: var(--dwl-accent); } /* --- Zweispaltiges Layout -------------------------------------------- */ /* --- Single-Event im WooCommerce-Produktseiten-Aufbau ---------------- */ /* Aus einem evtl. schmalen Theme-Container ausbrechen und den Block auf volle Breite bringen, dann innen auf 1200px zentrieren (theme-unabhängig). */ .dwl-woo { /* Volle Breite mit fester Angabe: width: auto würde in einem Flex- oder Grid-Elternteil auf die Inhaltsbreite zusammenfallen – dann endet auch die weiße Fläche dort. Das waagerechte Scrollen, das die in 100vw enthaltene Scrollleiste erzeugt, wird weiter unten abgefangen. */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); padding-top: 2rem; padding-bottom: 2rem; background: #fff; /* Abstand, mit dem die mitlaufende linke Spalte oben stehen bleibt. 90 px lassen Platz für die mitlaufende Kopfzeile des Themes – sonst schiebt sich die Spalte darunter und wird verdeckt. */ --dwl-sticky-top: 90px; } /* Die weiße Fläche von .dwl-woo deckt nur den eigenen Block ab – darüber und darunter bleibt die Hintergrundfarbe des Themes stehen. Themes wie Astra setzen sie nicht am , sondern am Inhaltscontainer (.ast-separate-container { background-color: var(--ast-global-color-4) }). Deshalb hier beides. Die Klasse dwl-single-event setzt das Plugin nur auf Veranstaltungsseiten, andere Seiten bleiben unberührt. */ body.dwl-single-event, body.dwl-single-event #page, body.dwl-single-event #content, body.dwl-single-event .site-content, body.dwl-single-event .ast-separate-container, body.dwl-single-event .ast-separate-container .ast-article-single, body.dwl-single-event .ast-separate-container .ast-article-post, body.dwl-single-event .ast-plain-container, body.dwl-single-event .entry-content { background-color: #fff; } /* Die Scrollleiste steckt in 100vw mit drin und ragt dadurch rechts über den Rand hinaus – das verstößt gegen WCAG 1.4.10 (Reflow). „clip" schneidet ab, ohne wie „hidden" einen Rollbereich zu erzeugen; mitlaufende Spalten (position: sticky) funktionieren damit weiter. Über :has() greift die Regel nur auf Seiten mit einer Veranstaltung. */ @supports (overflow: clip) and (selector(body:has(.dwl-woo))) { body:has(.dwl-woo) { overflow-x: clip; } } .dwl-woo .dwl-event--single { max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; padding: 0px 15px !important; margin-top: 30px; margin-bottom: 60px; } .dwl-event--single { margin-bottom: var(--dwl-gap-lg); } /* Breadcrumb: Aussehen kommt aus dem Theme (.woocommerce-breadcrumb), das Plugin setzt nur den Abstand nach unten. */ .dwl-event--single .woocommerce-breadcrumb { margin: 0 0 1rem; } /* Linke Spalte (Bild und Kalender) bleibt beim Scrollen stehen, die rechte Spalte mit der Buchung scrollt mit. Ist die linke Spalte höher als der Bildschirm, wird ihr unterer Teil beim Stehenbleiben abgeschnitten – das ist bei mitlaufenden Spalten normal. */ @media (min-width: 961px) { .dwl-woo .dwl-event--single .dwl-event__product > .dwl-event__gallery-col { position: sticky !important; top: var(--dwl-sticky-top, 90px); align-self: start; } /* Die rechte Spalte darf nicht kleben – auch dann nicht, wenn das Theme für .single-product bzw. .product eigene Sticky-Regeln mitbringt. */ .dwl-woo .dwl-event--single .dwl-event__product > .dwl-event__summary { position: static !important; top: auto !important; bottom: auto !important; } } .dwl-woo__crumb-sep { margin: 0 0.5rem; color: var(--dwl-ink-faint); } /* Produktblock: einspaltig als Grundzustand (Mobil zuerst), ab 961 px zweispaltig – links Galerie + Kalender, rechts Zusammenfassung. Das !important muss in beiden Zuständen stehen: Die Theme-Regeln für .product/.single-product tragen es ebenfalls, und eine !important-Regel ohne Medienabfrage würde sonst die schmale Ansicht überstimmen. */ .dwl-event__product { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 2.25rem; align-items: start; margin-bottom: 3rem; float: none !important; } @media (min-width: 961px) { .dwl-event__product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0; } .dwl-event__product > .dwl-event__summary { margin-left: 49px; } } .dwl-event__gallery-col { min-width: 0; container-type: inline-size; } .dwl-gallery-view__main img, .dwl-event__gallery-col .wp-post-image { display: block; width: 100%; height: auto; } .dwl-event__calendar { margin-top: 2rem; } .dwl-event__calendar-title { margin: 0 0 0.9rem; font-size: var(--dwl-text-lg); font-weight: 700; } /* Rechte Spalte – schlicht wie Woo, ohne Kasten um die Buchung */ .dwl-event__summary { min-width: 0; /* Der Kalender steht jetzt in dieser Spalte – seine Behälterabfragen müssen sich auf diese Breite beziehen, nicht auf die Bildspalte. */ container-type: inline-size; } /* Kalender sitzt im Buchungsformular direkt über der Ticketauswahl. */ .dwl-event__summary .dwl-event__calendar { margin-top: 0; margin-bottom: 1.5rem; } .dwl-event__summary .dwl-event__calendar-title { margin: 0 0 0.75rem; } .dwl-event--single .dwl-booking { margin: 0 0 1.5rem; padding: 0; border: 0; background: transparent; } .dwl-event__lead { margin: 0 0 1.25rem; color: var(--dwl-ink-soft); } /* Auf der Single-Seite tragen Kategorien, Titel, Preis und Kurzbeschreibung die WooCommerce-Klassen – Schrift, Farbe und Größe kommen damit vollständig aus dem Theme. Das Plugin setzt hier ausschließlich Abstände. */ .dwl-event--single .single-product-category { margin: 0 0 0.75rem; line-height: 1.5; } .dwl-event--single .price { margin: 0 0 1rem; } .dwl-event--single .price .woocommerce-price-suffix { display: block; margin-top: 0.15rem; } /* Steuersatz-Hinweis unter dem Preis – klein und zurückhaltend. Ist German Market aktiv, bringt es für diese Klassen eigene Regeln mit. */ .dwl-event--single .woocommerce-de_price_taxrate { margin: -0.6rem 0 1rem; font-size: 0.8em; line-height: 1.4; opacity: 0.75; } .dwl-event--single .woocommerce-product-details__short-description { max-width: none; margin: 0 0 1.25rem; } .dwl-event--single .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } /* Der Preis steht auf der Single-Seite bereits über der Kurzbeschreibung – in der Buchung darunter wäre er doppelt. */ .dwl-event--single .dwl-booking__price { display: none; } .dwl-event__meta { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--dwl-line); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; font-size: var(--dwl-text-sm); color: var(--dwl-ink-soft); } /* Tabs / Panels volle Breite darunter */ .dwl-event__tabs { margin-bottom: 3rem; } .dwl-event__panel { padding: 1.5rem 0; border-top: 1px solid var(--dwl-line); } /* Beschreibung und Veranstaltungsort stehen in der rechten Spalte und schließen dort direkt an die Buchung an – etwas engere Abstände als in einem Block über die volle Seitenbreite. */ .dwl-event__summary .dwl-event__panel { padding: 1.25rem 0 0; margin-top: 1.25rem; } .dwl-event__summary .dwl-event__panel > h2 { margin: 0 0 0.75rem; } .dwl-event__summary .dwl-event__panel:last-child { padding-bottom: 0; } .dwl-event__panel > h2 { margin: 0 0 1rem; } /* Ähnliche Veranstaltungen – Grid wie Woo related */ .dwl-event__related { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--dwl-line); } .dwl-eventlist--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } @media (max-width: 960px) { .dwl-eventlist--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .dwl-eventlist--grid { grid-template-columns: minmax(0, 1fr); } } .dwl-event__sidebar { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } @media (max-width: 960px) { .dwl-event__sidebar { position: static; } } .dwl-event__description { max-width: 68ch; line-height: 1.7; color: var(--dwl-ink-soft); } .dwl-event__description > :first-child { margin-top: 0; } .dwl-event__description h2, .dwl-event__description h3 { color: var(--dwl-ink); letter-spacing: -0.01em; } .dwl-event__section { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--dwl-line); } .dwl-event__section > h2 { margin: 0 0 1rem; font-size: var(--dwl-text-xl); font-weight: 700; letter-spacing: -0.015em; color: var(--dwl-ink); } .dwl-event__section > h3 { margin: 1.5rem 0 0.5rem; font-size: var(--dwl-text-base); font-weight: 700; color: var(--dwl-ink); } .dwl-event__address { margin: 0 0 1.25rem; font-size: var(--dwl-text-base); line-height: 1.6; color: var(--dwl-ink-soft); } .dwl-event__address strong { display: block; font-size: var(--dwl-text-lg); color: var(--dwl-ink); } /* Kontaktangaben des Veranstalters */ .dwl-event__contact { margin: 0 0 1rem; padding: 0; list-style: none; font-size: var(--dwl-text-sm); line-height: 1.7; color: var(--dwl-ink-soft); } .dwl-event__venue-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; } .dwl-event__dates { margin: 0; padding: 0; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); list-style: none; overflow: hidden; } .dwl-event__dates li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.85rem 1.1rem; background: var(--dwl-surface); transition: background var(--dwl-speed) var(--dwl-ease); } .dwl-event__dates li + li { border-top: 1px solid var(--dwl-line); } .dwl-event__dates li:hover { background: var(--dwl-surface-sunken); } .dwl-event__dates li a { flex: 1 1 auto; font-size: var(--dwl-text-sm); font-weight: 600; color: var(--dwl-ink); text-decoration: none; } .dwl-event__dates li a:hover { color: var(--dwl-accent); } .dwl-event__dates li.is-current { background: var(--dwl-accent-soft); box-shadow: inset 3px 0 0 var(--dwl-accent); } .dwl-event__related { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--dwl-line); } /* --- Nebenkarte ------------------------------------------------------ */ .dwl-aside-card { padding: 1.25rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface-raised); box-shadow: var(--dwl-shadow-sm); } .dwl-aside-card__title { margin: 0 0 0.85rem; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-aside-card__actions { display: flex; flex-direction: column; gap: 0.5rem; } .dwl-aside-card__meta { display: flex; flex-direction: column; gap: 0.15rem; margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--dwl-line); font-size: var(--dwl-text-sm); color: var(--dwl-ink-faint); } .dwl-aside-card__meta strong { font-size: var(--dwl-text-base); color: var(--dwl-ink); } /* ==================================================================== */ /* 6. Buchungsbereich */ /* ==================================================================== */ /* Die Buchung sitzt in einer ruhig abgesetzten Fläche: heller Ton, dünne Linie, kein Schatten. So hebt sie sich vom Fließtext ab, ohne aufzutragen. */ .dwl-booking { padding: 1.25rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface-sunken); } .dwl-booking__heading { margin: 0 0 0.75rem; font-size: var(--dwl-text-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--dwl-ink); } /* Prominenter Startpreis – bewusst groß, nur die Zahl. */ .dwl-booking__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--dwl-line); line-height: 1.05; color: var(--dwl-ink); } .dwl-booking__price-from { font-size: var(--dwl-text-sm); font-weight: 600; color: var(--dwl-ink-faint); } .dwl-booking__price-value { font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .dwl-booking__price-value .amount, .dwl-booking__price-value bdi { font-weight: inherit; color: inherit; } .dwl-booking__price-unit { font-size: var(--dwl-text-sm); font-weight: 500; color: var(--dwl-ink-faint); } /* Verfügbarkeits-Label (Ampel) unter dem Preis */ .dwl-booking__avail { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; padding: 0.35rem 0.7rem; border-radius: var(--dwl-radius-pill); font-size: var(--dwl-text-sm); font-weight: 600; line-height: 1.3; } .dwl-booking__avail-dot { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; } .dwl-booking__avail--green { background: var(--dwl-positive-soft); color: var(--dwl-positive); } .dwl-booking__avail--amber { background: var(--dwl-warning-soft); color: var(--dwl-warning); } .dwl-booking__avail--red { background: var(--dwl-critical-soft); color: var(--dwl-critical); } /* Gewählter Termin – Feld im Stil der Check-in-Angabe */ .dwl-booking__term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; margin: 0 0 1rem; padding: 0.75rem 0.85rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius); background: var(--dwl-surface); } .dwl-booking__term-label { flex: 0 0 100%; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-booking__term-value { flex: 1 1 auto; font-size: var(--dwl-text-base); font-weight: 700; color: var(--dwl-ink); } .dwl-booking__term-change { flex: 0 0 auto; font-size: var(--dwl-text-sm); color: var(--dwl-accent); } .dwl-booking__form { margin: 0; } .dwl-booking__types { margin: 0 0 1.15rem; padding: 0; border: 0; } .dwl-booking__legend { display: block; width: 100%; margin-bottom: 0.6rem; padding: 0; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dwl-ink-faint); } /* --- Terminauswahl als Kalender --------------------------------------- */ /* Vollbreiter Kalender mit Rahmen, wie in der Vorlage: oben eine Leiste mit Pfeilen an den Rändern und dem Monatsbereich mittig, darunter zwei Monate nebeneinander. */ .dwl-datepicker { margin: 0; padding: 0; border: 0; } .dwl-datepicker--wide { container-type: inline-size; position: relative; max-width: 100%; overflow-x: hidden; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface); } /* Tooltip mit freien Plätzen beim Überfahren eines buchbaren Tages. */ .dwl-datepicker__tip { position: absolute; z-index: 20; transform: translate(-50%, calc(-100% - 8px)); max-width: 220px; padding: 0.4rem 0.6rem; border-radius: var(--dwl-radius); background: var(--dwl-ink); color: var(--dwl-surface); font-size: var(--dwl-text-xs); font-weight: 600; line-height: 1.35; text-align: center; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .dwl-datepicker__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--dwl-ink); } .dwl-datepicker__tip[hidden] { display: none; } .dwl-datepicker__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg) var(--dwl-radius-lg) 0 0; background: var(--dwl-surface-sunken); } .dwl-datepicker__range { margin: 0; font-size: var(--dwl-text-base); font-weight: 700; letter-spacing: -0.01em; text-align: center; color: var(--dwl-ink); } .dwl-datepicker__navbtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border: 1px solid var(--dwl-line-strong); border-radius: var(--dwl-radius); background: var(--dwl-surface); color: var(--dwl-ink-soft); text-decoration: none; } .dwl-datepicker__navbtn svg { width: 0.9rem; height: 0.9rem; } .dwl-datepicker__navbtn:hover { border-color: var(--dwl-accent); color: var(--dwl-accent); } .dwl-datepicker__navbtn.is-disabled { opacity: 0.35; } .dwl-datepicker__months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 1.25rem; } /* Einmonatsansicht (Veranstaltungsseite): immer nur eine Spalte, unabhängig davon, wie breit die Spalte gerade ist. */ .dwl-datepicker--single .dwl-datepicker__months { grid-template-columns: minmax(0, 1fr); } /* Steht ein Monat allein, soll er nicht über die ganze Breite laufen – sonst werden die Tageskacheln unnötig groß. In der zweispaltigen Ansicht liegen die Monate ohnehin unter dieser Grenze, dort wirkt die Regel nicht. */ .dwl-datepicker__month { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; } .dwl-datepicker__caption { margin: 0 0 0.75rem; font-size: var(--dwl-text-sm); font-weight: 700; color: var(--dwl-ink); } .dwl-datepicker__grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .dwl-datepicker__grid th { padding: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: var(--dwl-ink-faint); } .dwl-datepicker__grid th abbr { text-decoration: none; border: 0; cursor: default; } .dwl-datepicker__cell { padding: 2px; text-align: center; } .dwl-datepicker__day { display: flex; align-items: center; justify-content: center; /* Breite kommt aus der Tabellenzelle, die Höhe folgt über das Seitenverhältnis. Eine feste Mindesthöhe würde die Kachel in schmalen Spalten breiter machen als ihre Zelle – genau das hat den Kalender seitlich aus der Seite gedrückt. 24 px sind die Untergrenze für Tippziele (WCAG 2.5.8). */ width: 100%; max-width: 100%; aspect-ratio: 1 / 1; min-height: 24px; border-radius: var(--dwl-radius); font-size: var(--dwl-text-sm); font-variant-numeric: tabular-nums; line-height: 1; color: var(--dwl-ink-faint); text-decoration: none; transition: background var(--dwl-speed) var(--dwl-ease), color var(--dwl-speed) var(--dwl-ease), box-shadow var(--dwl-speed) var(--dwl-ease); } /* Auf sehr schmalen Ansichten die zwei Monate untereinander stellen. */ /* Die zwei Monate stellen sich untereinander, sobald der Kalender selbst zu schmal wird – unabhängig von der Fensterbreite (der Kalender steht in der linken Spalte, die je nach Buchungsspalte schmaler sein kann). */ @container (max-width: 520px) { .dwl-datepicker__months { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } } /* Zweite Sicherung, unabhängig von der Behälterabfrage: Auf schmalen Fenstern steht ohnehin alles einspaltig – dort immer nur ein Monat. Greift auch dann, wenn @container nicht ausgewertet wird. */ @media (max-width: 860px) { .dwl-datepicker__months { grid-template-columns: minmax(0, 1fr) !important; gap: 1.25rem; padding: 1rem 0.75rem; } .dwl-datepicker__bar { padding: 0.75rem; gap: 0.5rem; } .dwl-datepicker__range { font-size: var(--dwl-text-sm); } } @supports not (container-type: inline-size) { @media (max-width: 900px) { .dwl-datepicker__months { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } } } .dwl-datepicker__day.is-outside { visibility: hidden; } .dwl-datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--dwl-line-strong); } /* Buchbar: kräftig und anklickbar */ .dwl-datepicker__day.is-open { background: var(--dwl-accent-soft); color: var(--dwl-accent); font-weight: 700; } .dwl-datepicker__day.is-open:hover { background: var(--dwl-accent); color: var(--dwl-on-accent); } .dwl-datepicker__day.is-selected { background: var(--dwl-accent); color: var(--dwl-on-accent); font-weight: 700; box-shadow: 0 0 0 2px var(--dwl-surface), 0 0 0 4px var(--dwl-accent); } /* Ausverkauft: sichtbar, aber durchgestrichen statt nur blass */ .dwl-datepicker__day.is-soldout { color: var(--dwl-ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; cursor: not-allowed; } .dwl-datepicker__times { margin: 0; padding: 1.25rem 1.5rem; border-top: 1px solid var(--dwl-line); } .dwl-datepicker__times[hidden] { display: none; } .dwl-datepicker__times-title { margin: 0 0 0.5rem; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-datepicker__timelist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .dwl-datepicker__time { display: inline-flex; align-items: center; padding: 0.4rem 0.75rem; border: 1px solid var(--dwl-line-strong); border-radius: var(--dwl-radius-pill); font-size: var(--dwl-text-sm); font-variant-numeric: tabular-nums; color: var(--dwl-ink); text-decoration: none; } .dwl-datepicker__time:hover { border-color: var(--dwl-accent); color: var(--dwl-accent); } .dwl-datepicker__time.is-selected { border-color: transparent; background: var(--dwl-accent); color: var(--dwl-on-accent); font-weight: 700; } .dwl-datepicker__time.is-soldout { color: var(--dwl-ink-faint); text-decoration: line-through; border-style: dashed; } .dwl-datepicker__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0; padding: 1rem 1.5rem; border-top: 1px solid var(--dwl-line); font-size: var(--dwl-text-xs); color: var(--dwl-ink-faint); } .dwl-datepicker__key { display: inline-flex; align-items: center; gap: 0.4rem; } .dwl-datepicker__key::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 3px; } .dwl-datepicker__key--open::before { background: var(--dwl-accent); } .dwl-datepicker__key--soldout::before { background: var(--dwl-line-strong); } /* --- Ticketart-Zeile -------------------------------------------------- */ .dwl-ticket-type { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; justify-content: space-between; padding: 0.85rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius); background: var(--dwl-surface); transition: border-color var(--dwl-speed) var(--dwl-ease), background var(--dwl-speed) var(--dwl-ease); } .dwl-ticket-type + .dwl-ticket-type { margin-top: 0.6rem; } .dwl-ticket-type:hover { border-color: var(--dwl-line-strong); } .dwl-ticket-type.is-selected { border-color: var(--dwl-accent); background: var(--dwl-accent-soft); } .dwl-ticket-type.is-unavailable { background: var(--dwl-surface-sunken); color: var(--dwl-ink-faint); opacity: 0.75; } .dwl-ticket-type__info { display: flex; flex: 1 1 55%; flex-direction: column; gap: 0.2rem; min-width: 0; } .dwl-ticket-type__name { font-size: var(--dwl-text-base); font-weight: 700; color: var(--dwl-ink); } .dwl-ticket-type__price { font-size: var(--dwl-text-base); font-weight: 700; letter-spacing: -0.01em; color: var(--dwl-ink); } .dwl-ticket-type__desc { font-size: var(--dwl-text-sm); line-height: 1.5; color: var(--dwl-ink-soft); } .dwl-ticket-type__meta { font-size: var(--dwl-text-sm); font-weight: 600; color: var(--dwl-ink-faint); } .dwl-ticket-type__qty { flex: 0 0 auto; } .dwl-ticket-type__qty label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* --- Mengenwähler ----------------------------------------------------- */ .dwl-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--dwl-line-strong); border-radius: var(--dwl-radius); background: var(--dwl-surface); overflow: hidden; } /* Mindesthöhe für Tippziele (WCAG 2.5.8 „Zielgröße"). Wirkt nur dort, wo das Theme die Schaltfläche nicht ohnehin größer macht. */ .dwl-btn, .dwl-stepper__btn, .dwl-datepicker__navbtn { min-height: 44px; } .dwl-stepper__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--dwl-ink-soft); font-family: inherit; line-height: 1; cursor: pointer; transition: background var(--dwl-speed) var(--dwl-ease), color var(--dwl-speed) var(--dwl-ease); } .dwl-stepper__btn:hover:not([disabled]) { background: var(--dwl-surface-sunken); color: var(--dwl-ink); } .dwl-stepper__btn[disabled] { opacity: 0.35; cursor: not-allowed; } .dwl-stepper__btn svg { width: 1rem; height: 1rem; } .dwl-booking .dwl-qty, .dwl-stepper .dwl-qty { width: 3rem; min-height: 2.75rem; padding: 0.4rem 0; border: 0; border-right: 1px solid var(--dwl-line); border-left: 1px solid var(--dwl-line); border-radius: 0; background: transparent; color: var(--dwl-ink); font-family: inherit; font-size: var(--dwl-text-base); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; box-shadow: none; -moz-appearance: textfield; appearance: textfield; } .dwl-stepper .dwl-qty::-webkit-outer-spin-button, .dwl-stepper .dwl-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .dwl-qty { width: 5rem; } /* --- Preisübersicht und Abschluss ------------------------------------- */ .dwl-summary { margin: 0 0 1rem; padding: 0.9rem 0 0; border-top: 1px solid var(--dwl-line); } .dwl-summary[hidden] { display: none; } .dwl-summary__title { margin: 0 0 0.6rem; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-summary__lines { margin: 0 0 0.6rem; padding: 0; list-style: none; } .dwl-summary__line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0; font-size: var(--dwl-text-base); color: var(--dwl-ink-soft); } .dwl-summary__line-value { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--dwl-ink); } .dwl-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--dwl-line); } .dwl-summary__total-label { font-size: var(--dwl-text-base); font-weight: 700; color: var(--dwl-ink); } .dwl-summary__total-value { flex: 0 0 auto; font-size: var(--dwl-text-xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--dwl-ink); } .dwl-booking__submit { margin: 0 0 0.75rem; } /* Bestätigung/Fehler nach dem Hinzufügen (ohne Neuladen). */ .dwl-booking__feedback { margin: 0 0 0.85rem; padding: 0.7rem 0.85rem; border-radius: var(--dwl-radius); font-size: var(--dwl-text-sm); line-height: 1.45; } .dwl-booking__feedback[hidden] { display: none; } .dwl-booking__feedback.is-success { background: var(--dwl-positive-soft); color: var(--dwl-positive); } .dwl-booking__feedback.is-error { background: var(--dwl-critical-soft); color: var(--dwl-critical); } .dwl-booking__feedback-link { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } .dwl-form-hint { margin: 0; font-size: var(--dwl-text-xs); line-height: 1.55; color: var(--dwl-ink-faint); } .dwl-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1rem; } .dwl-booking .dwl-field label, .dwl-waitlist .dwl-field label { font-size: var(--dwl-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-booking .dwl-field input, .dwl-booking .dwl-field select, .dwl-waitlist .dwl-field input, .dwl-attendee-fields input, .dwl-attendee-fields select, .dwl-attendee-fields textarea { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; border: 1px solid var(--dwl-line-strong); border-radius: var(--dwl-radius); background: var(--dwl-surface); color: var(--dwl-ink); font-family: inherit; font-size: var(--dwl-text-sm); transition: border-color var(--dwl-speed) var(--dwl-ease), box-shadow var(--dwl-speed) var(--dwl-ease); } .dwl-booking .dwl-field input:focus, .dwl-booking .dwl-field select:focus, .dwl-waitlist .dwl-field input:focus, .dwl-attendee-fields input:focus, .dwl-attendee-fields select:focus, .dwl-attendee-fields textarea:focus { border-color: var(--dwl-accent); box-shadow: 0 0 0 3px var(--dwl-accent-soft); outline: none; } .dwl-required { color: var(--dwl-critical); } .dwl-waitlist { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--dwl-line-strong); } .dwl-waitlist h3 { margin: 0 0 0.35rem; font-size: var(--dwl-text-base); font-weight: 700; color: var(--dwl-ink); } .dwl-waitlist .dwl-form-hint { margin-bottom: 1rem; } .dwl-waitlist .dwl-qty { width: 6rem; } /* Teilnehmerfelder im Checkout */ .dwl-attendee-fields { margin: 1.25rem 0; padding: 1.25rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface-raised); } /* ==================================================================== */ /* 7. Einzelne Veranstaltung per Shortcode */ /* ==================================================================== */ /* Der äußere Kasten hat bewusst keine eigene Optik: kein Rahmen, keine Fläche, kein Schatten. Er stapelt zwei Zonen übereinander – oben Titel/ Beschreibung/Eckdaten neben der Buchung, darunter der Kalender über die volle Breite. So fügt sich der Block in eine vorhandene Seite ein. */ .dwl-event-box { display: flex; flex-direction: column; gap: 2.5rem; margin: 2rem 0; /* Feste Grundgröße, damit der Block unabhängig vom Theme lesbar bleibt (manche Themes stellen die Wurzelgröße auf 14px). Alle rem-Angaben im Block beziehen sich weiterhin auf das Theme; diese Zeile setzt nur die Textgröße des Fließtexts. */ font-size: 16px; line-height: 1.6; /* Abstand, mit dem die mitlaufende Buchungsspalte oben stehen bleibt – derselbe Wert wie auf der Veranstaltungsseite. */ --dwl-sticky-top: 90px; } /* Obere Zone: zweispaltig (Inhalt | Buchung) */ .dwl-event-box__top { display: grid; gap: 2.5rem; align-items: start; } .dwl-event-box--side .dwl-event-box__top { grid-template-columns: minmax(0, 1fr) minmax(300px, 22rem); } .dwl-event-box--stacked .dwl-event-box__top { grid-template-columns: minmax(0, 1fr); } .dwl-event-box__main { min-width: 0; } @media (max-width: 860px) { .dwl-event-box--side .dwl-event-box__top { grid-template-columns: minmax(0, 1fr); } } /* --- Kopf: Titel und Ort --------------------------------------------- */ .dwl-event-box__header { margin-bottom: 1.5rem; } .dwl-event-box__cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; } .dwl-event-box__title { margin: 0 0 0.6rem; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--dwl-ink); text-wrap: balance; } .dwl-event-box__title a { color: inherit; text-decoration: none; } .dwl-event-box__title a:hover { color: var(--dwl-accent); } .dwl-event-box__place { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0; font-size: var(--dwl-text-base); color: var(--dwl-ink-soft); } .dwl-event-box__place-icon { display: inline-flex; flex: 0 0 auto; color: var(--dwl-ink-faint); } .dwl-event-box__place-icon svg { display: block; width: 1rem; height: 1rem; } .dwl-event-box__place-link { color: var(--dwl-accent); text-underline-offset: 0.2em; } /* --- Abschnitte in der Hauptspalte ------------------------------------ */ .dwl-event-box__section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--dwl-line); } /* Die Beschreibung steht ganz oben und braucht keine Trennlinie darüber. */ .dwl-event-box__section--first { margin-top: 0; padding-top: 0; border-top: 0; } .dwl-event-box__subtitle { margin: 0 0 0.9rem; font-size: var(--dwl-text-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--dwl-ink); } /* Eckdaten dreispaltig, wie eine Regelübersicht */ .dwl-factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 1.5rem; margin: 0; } .dwl-factgrid__item { margin: 0; } .dwl-factgrid__item[hidden] { display: none; } .dwl-factgrid__label { margin: 0 0 0.15rem; font-size: var(--dwl-text-sm); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-factgrid__value { margin: 0; font-size: var(--dwl-text-base); font-weight: 600; line-height: 1.4; color: var(--dwl-ink); } /* --- Buchungsspalte --------------------------------------------------- */ .dwl-event-box__aside { min-width: 0; } /* Die Buchungsspalte bleibt beim Scrollen stehen, solange die Inhaltsspalte daneben noch läuft – wie die Bildspalte auf der Veranstaltungsseite. Unter 861 px steht der Block ohnehin einspaltig, dort ergibt Mitlaufen keinen Sinn. Ist die Buchung höher als der Bildschirm, bleibt entsprechend weniger Spielraum zum Stehenbleiben. */ @media (min-width: 861px) { .dwl-event-box--side .dwl-event-box__top > .dwl-event-box__aside { position: sticky; top: var(--dwl-sticky-top, 90px); align-self: start; } } .dwl-event-box--stacked .dwl-event-box__aside { max-width: 32rem; } /* --- Angaben an der Warenkorbposition --------------------------------- */ /* Der Termin steht im Mini-Warenkorb in einer sehr schmalen Spalte. Viele Themes setzen dort white-space: nowrap – dann schiebt ein langer Wert Menge und Preis aus der Zeile und erzeugt eine waagerechte Rollleiste. Die Regel gilt ausschließlich für unseren eigenen Wert. */ .dwl-cart-meta { white-space: normal !important; overflow-wrap: anywhere; } /* ==================================================================== */ /* 8. Archiv, Suche, Karte, Ort, Konto */ /* ==================================================================== */ .dwl-archive__header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--dwl-line); } .dwl-archive__header h1 { margin: 0 0 0.5rem; font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; } .dwl-search { margin-bottom: 2rem; } .dwl-map { width: 100%; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface-sunken); overflow: hidden; } .dwl-map__fallback { margin-top: 0.6rem; font-size: var(--dwl-text-sm); } .dwl-map__list { margin-top: 0.75rem; } .dwl-map__list li { padding: 0.55rem 0; border-bottom: 1px solid var(--dwl-line); font-size: var(--dwl-text-sm); } .dwl-venue__address { margin-bottom: 1.75rem; padding: 1.25rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface-sunken); } .dwl-venue__address h2 { margin: 0 0 0.6rem; font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-venue__address address { font-style: normal; line-height: 1.6; white-space: pre-line; } .dwl-venue__contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.85rem 0 0; padding: 0; list-style: none; font-size: var(--dwl-text-sm); color: var(--dwl-ink-soft); } .dwl-venue__events { margin-top: 2.5rem; } .dwl-my-events { width: 100%; margin-bottom: 2rem; border: 1px solid var(--dwl-line); border-collapse: separate; border-spacing: 0; border-radius: var(--dwl-radius-lg); font-size: var(--dwl-text-sm); overflow: hidden; } .dwl-my-events th, .dwl-my-events td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--dwl-line); text-align: left; vertical-align: top; } .dwl-my-events th { background: var(--dwl-surface-sunken); font-size: var(--dwl-text-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-my-events tr:last-child td { border-bottom: 0; } .dwl-cancel-form { display: inline; } /* ==================================================================== */ /* 9. Ticketansicht */ /* ==================================================================== */ .dwl-ticket { max-width: 640px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-lg); background: var(--dwl-surface); box-shadow: var(--dwl-shadow-lg); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .dwl-ticket__header { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--dwl-line-strong); } .dwl-ticket__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem; margin: 0 0 1.75rem; } .dwl-ticket__facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-ticket__facts dd { margin: 0.2rem 0 0; font-weight: 700; color: var(--dwl-ink); } .dwl-ticket__code, .dwl-ticket__barcode { margin: 0 0 1rem; text-align: center; } .dwl-ticket__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.25rem; letter-spacing: 0.12em; } .dwl-qr { max-width: 240px; height: auto; } /* ==================================================================== */ /* 10. Druck und Bewegung */ /* ==================================================================== */ @media print { .no-print, .dwl-ticket__print { display: none !important; } .dwl-ticket { margin: 0; border: none; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .dwl-event *, .dwl-event-box *, .dwl-card, .dwl-card *, .dwl-calendar *, .dwl-booking * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .dwl-card:hover { transform: none; } } /* ==================================================================== */ /* Kalender: Leiste, Filter und Vorschau */ /* ==================================================================== */ /* --- Navigation -------------------------------------------------------- */ .dwl-calendar__toolbar { justify-content: space-between; gap: 1rem; } .dwl-calendar__nav { align-items: center; gap: 0.25rem; } .dwl-navbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.5rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius); background: var(--dwl-surface); color: var(--dwl-ink-soft); font: inherit; font-size: var(--dwl-text-sm); line-height: 1; cursor: pointer; transition: border-color var(--dwl-speed) var(--dwl-ease), color var(--dwl-speed) var(--dwl-ease); } .dwl-navbtn:hover { border-color: var(--dwl-line-strong); color: var(--dwl-ink); } .dwl-navbtn svg { width: 1rem; height: 1rem; } .dwl-navbtn--today { margin-left: 0.4rem; } .dwl-calendar__title { margin: 0 0.4rem; font-size: var(--dwl-text-lg); font-weight: 700; white-space: nowrap; } /* --- Ansichtsumschaltung ----------------------------------------------- */ .dwl-viewbtn { padding: 0.4rem 0.85rem; border: 1px solid var(--dwl-line); border-radius: var(--dwl-radius-pill); background: var(--dwl-surface); color: var(--dwl-ink-soft); font: inherit; font-size: var(--dwl-text-sm); line-height: 1.2; cursor: pointer; transition: border-color var(--dwl-speed) var(--dwl-ease), color var(--dwl-speed) var(--dwl-ease); } .dwl-viewbtn:hover { border-color: var(--dwl-line-strong); color: var(--dwl-ink); } .dwl-viewbtn.is-active { border-color: var(--dwl-ink); background: var(--dwl-ink); color: #fff; font-weight: 600; } /* --- Filterleiste: schmal statt wuchtig -------------------------------- */ .dwl-filters { gap: 0.6rem 0.75rem; margin-bottom: 1.25rem; padding: 0.85rem; } .dwl-filters__field { flex: 1 1 150px; min-width: 0; margin: 0; } .dwl-filters__field label { display: block; margin-bottom: 0.2rem; font-size: var(--dwl-text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--dwl-ink-faint); } .dwl-filters__field input, .dwl-filters__field select { width: 100%; min-height: 2.25rem; padding: 0.3rem 0.55rem; font-size: var(--dwl-text-sm); } .dwl-filters__actions { flex: 0 0 auto; margin: 0; } /* --- Vorschau beim Überfahren ------------------------------------------ */ .dwl-tip { position: absolute; z-index: 999; display: flex; gap: 0.7rem; width: 17rem; max-width: calc(100vw - 1rem); padding: 0.7rem; border-radius: var(--dwl-radius-lg); background: var(--dwl-surface); box-shadow: var(--dwl-shadow-lg, 0 12px 30px rgba(0, 0, 0, 0.16)); pointer-events: none; } .dwl-tip__image { flex: 0 0 4.5rem; height: 4.5rem; border-radius: var(--dwl-radius); background-position: center; background-size: cover; } .dwl-tip__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .dwl-tip__title { font-size: var(--dwl-text-sm); line-height: 1.3; } .dwl-tip__row { font-size: var(--dwl-text-xs); color: var(--dwl-ink-soft); } .dwl-tip__price { margin-top: 0.15rem; font-size: var(--dwl-text-sm); font-weight: 700; } .dwl-tip__seats { font-size: var(--dwl-text-xs); font-weight: 600; } .dwl-tip__seats--green { color: var(--dwl-positive, #0f7b42); } .dwl-tip__seats--amber { color: var(--dwl-warning, #8a5a00); } .dwl-tip__seats--red { color: var(--dwl-critical, #b3261e); } /* Auf Geräten ohne Mauszeiger stört die Vorschau nur. */ @media (hover: none) { .dwl-tip { display: none; } } /* --- Sprung zum nächsten Treffer --------------------------------------- */ .dwl-navbtn--jump { gap: 0.35rem; margin-left: 0.4rem; border-color: var(--dwl-ink); color: var(--dwl-ink); font-weight: 600; } .dwl-navbtn--jump svg { width: 0.9rem; height: 0.9rem; } .dwl-calendar__jumped { margin: 0 0 0.85rem; padding: 0.55rem 0.8rem; border-radius: var(--dwl-radius); background: var(--dwl-surface-sunken); font-size: var(--dwl-text-sm); color: var(--dwl-ink-soft); } /* ==================================================================== */ /* Kalender auf schmalen Bildschirmen: Punkte statt Titel */ /* ==================================================================== */ .dwl-month__dots { display: none; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .dwl-month__dot { width: 7px; height: 7px; border-radius: 50%; } .dwl-month__dot--more { width: auto; height: auto; background: none !important; font-size: 10px; font-weight: 700; line-height: 7px; color: var(--dwl-ink-faint); } .dwl-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; } @media (max-width: 782px) { /* Titel weglassen – sie brechen sonst buchstabenweise um. */ .dwl-month__events { display: none; } .dwl-month__dots { display: flex; justify-content: center; } .dwl-month__cell { padding: 6px 2px; text-align: center; vertical-align: top; } .dwl-month__cell.has-events { cursor: pointer; } .dwl-month__daynum { font-size: var(--dwl-text-sm); } } /* --- Tagesfenster ------------------------------------------------------ */ .dwl-daydialog { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; } .dwl-daydialog__backdrop { position: absolute; inset: 0; background: rgba(16, 21, 28, 0.5); } .dwl-daydialog__box { position: relative; width: 100%; max-width: 32rem; max-height: 80vh; overflow-y: auto; border-radius: var(--dwl-radius-lg) var(--dwl-radius-lg) 0 0; background: var(--dwl-surface); } .dwl-daydialog__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--dwl-line); background: var(--dwl-surface); } .dwl-daydialog__close { padding: 0 0.35rem; border: 0; background: none; color: var(--dwl-ink-soft); font-size: 1.6rem; line-height: 1; cursor: pointer; } .dwl-daydialog__list { margin: 0; padding: 0; list-style: none; } .dwl-daydialog__item + .dwl-daydialog__item { border-top: 1px solid var(--dwl-line); } .dwl-daydialog__link { display: flex; gap: 0.7rem; padding: 0.9rem 1rem; text-decoration: none; } .dwl-daydialog__dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 0.4rem; border-radius: 50%; } .dwl-daydialog__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .dwl-daydialog__title { font-size: var(--dwl-text-base); line-height: 1.3; } .dwl-daydialog__meta { font-size: var(--dwl-text-sm); color: var(--dwl-ink-soft); } .dwl-daydialog__row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; } .dwl-daydialog__price { font-weight: 700; } .dwl-daydialog__seats { font-size: var(--dwl-text-sm); font-weight: 600; } .dwl-daydialog__seats--green { color: var(--dwl-positive, #0f7b42); } .dwl-daydialog__seats--amber { color: var(--dwl-warning, #8a5a00); } .dwl-daydialog__seats--red { color: var(--dwl-critical, #b3261e); } body.dwl-noscroll { overflow: hidden; } /* --- Restzeit der Platzreservierung im Warenkorb ----------------------- */ .dwl-hold { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0.7rem 0.95rem; border-left: 3px solid var(--dwl-positive, #0f7b42); border-radius: var(--dwl-radius); background: var(--dwl-surface-sunken); font-size: var(--dwl-text-sm); } .dwl-hold__clock { font-variant-numeric: tabular-nums; font-size: var(--dwl-text-base); } .dwl-hold.is-soon { border-left-color: var(--dwl-warning, #8a5a00); } .dwl-hold.is-expired { border-left-color: var(--dwl-critical, #b3261e); } /* --- Eigene Fragen und Antworten --------------------------------------- */ .dwl-question__check { display: flex; align-items: flex-start; gap: 0.5rem; } .dwl-answers { margin: 0.35rem 0 0; padding: 0; list-style: none; font-size: var(--dwl-text-sm); } .dwl-answer__label { color: var(--dwl-ink-faint); } .dwl-answer__value { font-weight: 600; }