/* go4live Event Manager — frontend.css v1.0.0
 * Öffentliche Event-Seiten · Mobile-first · Brand-Farben via CSS-Variablen
 * ============================================================ */

:root {
    --g4l-fe-brand:      #009FD4;
    --g4l-fe-brand-d:    #0070A0;
    --g4l-fe-brand-l:    #E6F6FB;
    --g4l-fe-lsm:        #5B4FCF;
    --g4l-fe-lsm-l:      #EEEDFE;
    --g4l-fe-ok:         #27B06E;
    --g4l-fe-ok-l:       #EAF3DE;
    --g4l-fe-warn:       #F09F27;
    --g4l-fe-warn-l:     #FDF3E2;
    --g4l-fe-warn-d:     #9A6205;
    --g4l-fe-err:        #E24B4A;
    --g4l-fe-err-l:      #FCEBEB;
    --g4l-fe-text:       #1a1a1a;
    --g4l-fe-muted:      #666;
    --g4l-fe-border:     rgba(0, 0, 0, 0.1);
    --g4l-fe-surface:    #ffffff;
    --g4l-fe-bg:         #F6F7F9;
    --g4l-fe-radius:     10px;
    --g4l-fe-radius-sm:  6px;
    --g4l-fe-max:        640px;
    /* v1.4.68 — Ein Wert für den seitlichen Abstand aller Bausteine der
       Landing-Seite. Vorher hatte jeder Baustein seinen eigenen: 0, 14,
       16 und 20 Pixel nebeneinander, was am Telefon als schiefe Kante
       sichtbar war. */
    --g4l-fe-gutter:     16px;
}

/* ============================================================
   BASE
   ============================================================ */
#g4l-fe-root, #g4l-fe-root * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
#g4l-fe-root {
    /* v1.4.104 — Größen-Leiter: vier Stufen statt 68 Einzelwerte.
       Fließtext 16px (Lesestandard; beendet nebenbei das iPhone-
       Hineinzoomen bei Eingabefeldern unter 16px), Begleittext 14,
       Untergrenze für Inhaltliches 13, Etiketten (Großbuchstaben,
       Pillen) bewusst kleiner. */
    --g4l-fe-fs:     16px;
    --g4l-fe-fs-2:   14px;
    --g4l-fe-fs-3:   13px;
    --g4l-fe-fs-lbl: 12.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--g4l-fe-fs, 16px);
    color: var(--g4l-fe-text);
    background: var(--g4l-fe-bg);
    min-height: 100vh;
}

/* ============================================================
   PAGE CONTAINER
   ============================================================ */
.g4l-page {
    max-width: var(--g4l-fe-max);
    margin: 0 auto;
    background: var(--g4l-fe-surface);
    min-height: 100vh;
}

/* ============================================================
   BANNER
   ============================================================ */
/* v1.4.101 — Höhe wählbar über CSS-Variablen (Rückfall = bisherige
   Werte). Bei „Panorama" gewinnt das Seitenverhältnis: aspect-ratio
   greift und die feste Höhe weicht, gedeckelt bei 480px. */
.g4l-banner {
    position: relative;
    height: var(--g4l-fe-banner-h, 220px);
    background: linear-gradient(160deg, #1a6fa8 0%, #26a59a 100%);
    background-size: cover;
    background-position: center;
}
.g4l-banner {
    aspect-ratio: var(--g4l-fe-banner-ratio, auto);
    /* v1.4.108 — Deckel 600: Kino (16:9) erreicht im breiten Spalten-
       Layout (1060px) knapp 600px — beim alten Deckel 480 hätte cover
       am Desktop wieder beschnitten, genau was die Stufe verhindert. */
    max-height: 600px;
    min-height: 100px;
}
.g4l-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.05) 40%, rgba(0,0,0,.5) 100%);
}
.g4l-banner__tags {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
}
.g4l-banner__share {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   BADGES
   ============================================================ */
.g4l-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}
.g4l-badge--type    { background: rgba(0,159,212,.85); color: #fff; }
.g4l-badge--lsm     { background: rgba(91,79,207,.85); color: #fff; }
.g4l-badge--sold    { background: var(--g4l-fe-err-l); color: var(--g4l-fe-err); font-size: 11px; padding: 3px 9px; border-radius: 10px; }

/* ============================================================
   EVENT BODY
   ============================================================ */
.g4l-event-body { padding: 18px var(--g4l-fe-gutter) 16px; }
.g4l-event-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--g4l-fe-text);
    line-height: 1.25;
    margin: 0 0 8px;
}
.g4l-event-desc {
    font-size: var(--g4l-fe-fs, 16px);
    color: var(--g4l-fe-muted);
    line-height: 1.65;
    margin: 0 0 14px;
}

/* ============================================================
   META LIST
   ============================================================ */
.g4l-meta-list { display: flex; flex-direction: column; gap: 10px; }
.g4l-meta-item { display: flex; align-items: flex-start; gap: 10px; }
.g4l-meta-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--g4l-fe-brand);
    margin-top: 1px;
}
.g4l-meta-primary  { font-size: 15.5px; font-weight: 600; color: var(--g4l-fe-text); }
.g4l-meta-secondary{ font-size: var(--g4l-fe-fs-2, 14px); color: var(--g4l-fe-muted); margin-top: 1px; }

/* ============================================================
   TICKET WIDGET
   ============================================================ */
.g4l-ticket-widget {
    margin: 0 var(--g4l-fe-gutter);
    border: 1px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    overflow: hidden;
}
.g4l-tw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: var(--g4l-fe-bg);
    border-bottom: 0.5px solid var(--g4l-fe-border);
}
.g4l-tw-title  { font-size: 13px; font-weight: 700; color: var(--g4l-fe-text); }
.g4l-tw-lsm    { font-size: 11px; background: var(--g4l-fe-lsm-l); color: var(--g4l-fe-lsm); padding: 2px 8px; border-radius: 10px; font-weight: 500; }

.g4l-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--g4l-fe-border);
    gap: 12px;
}
.g4l-ticket-row:last-of-type { border-bottom: none; }
.g4l-ticket-row--full { opacity: .6; }
.g4l-ticket-info { flex: 1; min-width: 0; }
.g4l-ticket-name { font-size: 14px; font-weight: 600; color: var(--g4l-fe-text); margin-bottom: 2px; }
.g4l-ticket-desc { font-size: var(--g4l-fe-fs-3, 13px); color: var(--g4l-fe-muted); }
.g4l-ticket-cap  { font-size: 11.5px; color: var(--g4l-fe-muted); margin-top: 2px; }
/* Wirklich knapp (drei Plätze oder weniger) — nur dann farblich betont,
   damit die Hervorhebung ihre Bedeutung behält. */
.g4l-ticket-cap.is-low { color: #C9660A; font-weight: 600; }
.g4l-ticket-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.g4l-ticket-price { font-size: 14px; font-weight: 700; color: var(--g4l-fe-brand); }
.g4l-ticket-price--free { color: var(--g4l-fe-ok); }

.g4l-qty { display: flex; align-items: center; gap: 8px; }
.g4l-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--g4l-fe-border);
    background: var(--g4l-fe-surface);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--g4l-fe-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    user-select: none;
}
.g4l-qty-btn:hover    { background: var(--g4l-fe-brand-l); border-color: var(--g4l-fe-brand); color: var(--g4l-fe-brand); }
.g4l-qty-btn:active   { transform: scale(.92); }
.g4l-qty-num { font-size: 15px; font-weight: 700; min-width: 20px; text-align: center; color: var(--g4l-fe-text); }

.g4l-tw-footer { padding: 12px 14px; background: var(--g4l-fe-bg); border-top: 0.5px solid var(--g4l-fe-border); }
.g4l-tw-total  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.g4l-tw-total-lbl { font-size: 12.5px; color: var(--g4l-fe-muted); }
.g4l-tw-total-val { font-size: 18px; font-weight: 700; color: var(--g4l-fe-text); }

/* ============================================================
   CTA BUTTON
   ============================================================ */
.g4l-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 14px;
    border-radius: 28px;
    border: none;
    background: var(--g4l-fe-brand);
    color: #fff;
    font-size: var(--g4l-fe-fs, 16px);
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.g4l-cta-btn:hover    { background: var(--g4l-fe-brand-d); }
.g4l-cta-btn:active   { transform: scale(.98); }
.g4l-cta-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
.g4l-cta-btn--form      { margin-top: 4px; }
a.g4l-cta-btn            { text-decoration: none; box-sizing: border-box; }
/* Kalender-Knöpfe auf der ticketfreien Bestätigung (v1.4.120) */
.g4l-confirm-cal { display: flex; gap: 8px; margin: 0 0 8px; }
.g4l-confirm-cal .g4l-cta-btn { margin: 0; padding: 12px; font-size: var(--g4l-fe-fs-2, 14px); }
.g4l-cta-btn--secondary {
    background: transparent;
    color: var(--g4l-fe-brand);
    border: 1.5px solid var(--g4l-fe-brand);
    margin-top: 10px;
}
.g4l-cta-btn--secondary:hover { background: var(--g4l-fe-brand-l); }
.g4l-cta-btn--lsm {
    background: var(--g4l-fe-lsm);
    margin-top: 10px;
}
.g4l-cta-btn--lsm:hover { background: #4a3fb0; }

/* ============================================================
   PDF LINK
   ============================================================ */
.g4l-pdf-link { padding: 0 var(--g4l-fe-gutter); }
.g4l-pdf-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--g4l-fe-brand);
    text-decoration: none;
}
.g4l-pdf-link a:hover { text-decoration: underline; }

/* ============================================================
   NO TICKETS
   ============================================================ */
.g4l-no-tickets {
    padding: 32px var(--g4l-fe-gutter);
    text-align: center;
    color: var(--g4l-fe-muted);
}
.g4l-no-tickets-icon { font-size: 32px; margin-bottom: 8px; }

/* ============================================================
   FORM HEADER
   ============================================================ */
.g4l-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--g4l-fe-border);
    background: var(--g4l-fe-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}
.g4l-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--g4l-fe-border);
    background: var(--g4l-fe-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g4l-fe-text);
    flex-shrink: 0;
}
.g4l-form-header-title { font-size: 15px; font-weight: 700; color: var(--g4l-fe-text); }
.g4l-form-header-sub   { font-size: var(--g4l-fe-fs-3, 13px); color: var(--g4l-fe-muted); margin-top: 1px; }

/* ============================================================
   CART SUMMARY
   ============================================================ */
.g4l-cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--g4l-fe-brand-l);
    padding: 10px 16px;
    font-size: 13px;
}
.g4l-cart-summary-items { color: var(--g4l-fe-brand-d); font-weight: 500; }
.g4l-cart-summary-price { color: var(--g4l-fe-brand-d); font-weight: 700; }

/* ============================================================
   FORM
   ============================================================ */
.g4l-form { padding: 16px; display: flex; flex-direction: column; gap: 0; }
.g4l-form-section { margin-bottom: 16px; }
.g4l-field { margin-bottom: 12px; }
.g4l-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g4l-label {
    display: block;
    font-size: var(--g4l-fe-fs-3, 13px);
    font-weight: 600;
    color: var(--g4l-fe-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.g4l-req { color: var(--g4l-fe-err); }
.g4l-input {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius-sm);
    background: var(--g4l-fe-surface);
    color: var(--g4l-fe-text);
    /* 16px ist Pflicht: darunter zoomt das iPhone in jedes Feld hinein. */
    font-size: var(--g4l-fe-fs, 16px);
    transition: border-color .12s, box-shadow .12s;
    -webkit-appearance: none;
}
.g4l-input:focus {
    outline: none;
    border-color: var(--g4l-fe-brand);
    box-shadow: 0 0 0 3px rgba(0,159,212,.12);
}
.g4l-textarea { resize: vertical; min-height: 90px; }

.g4l-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--g4l-fe-text);
    cursor: pointer;
    margin-bottom: 10px;
    line-height: 1.5;
}
.g4l-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--g4l-fe-brand);
    margin-top: 2px;
    cursor: pointer;
}
.g4l-checkbox a { color: var(--g4l-fe-brand); }

.g4l-form-error {
    background: var(--g4l-fe-err-l);
    border: 1px solid var(--g4l-fe-err);
    border-radius: var(--g4l-fe-radius-sm);
    padding: 10px 13px;
    font-size: 13.5px;
    color: var(--g4l-fe-err);
    margin-bottom: 12px;
}
.g4l-form-hint {
    font-size: var(--g4l-fe-fs-3, 13px);
    color: var(--g4l-fe-muted);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}

/* ============================================================
   LOADING / SPINNER
   ============================================================ */
.g4l-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}
.g4l-page--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    min-height: 60vh;
}
.g4l-spinner-large {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--g4l-fe-brand);
    border-radius: 50%;
    animation: g4l-spin .75s linear infinite;
    margin-bottom: 14px;
}
.g4l-spinner-large--dark { border-color: rgba(255,255,255,.2); border-top-color: #fff; }
.g4l-processing-text { font-size: 14px; color: var(--g4l-fe-muted); }
@keyframes g4l-spin { to { transform: rotate(360deg); } }

/* ============================================================
   CONFIRMATION
   ============================================================ */
.g4l-page--confirm, .g4l-page--cancel {
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.g4l-confirm-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--g4l-fe-ok-l);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.g4l-confirm-icon--cancel { background: var(--g4l-fe-err-l); }
.g4l-confirm-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--g4l-fe-text);
    margin-bottom: 7px;
    text-align: center;
}
.g4l-confirm-sub {
    font-size: 14px;
    color: var(--g4l-fe-muted);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 380px;
}
.g4l-mail-note {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--g4l-fe-ok-l);
    color: #3B6D11;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--g4l-fe-radius-sm);
    margin-bottom: 16px;
    width: 100%;
    max-width: 400px;
}

/* QR Code */
.g4l-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--g4l-fe-bg);
    border: 1px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    padding: 18px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 320px;
}
.g4l-qr-wrap svg  { border-radius: 4px; max-width: 100%; height: auto; }
.g4l-qr-token {
    font-family: monospace;
    font-size: 11px;
    color: var(--g4l-fe-muted);
    margin-top: 10px;
    word-break: break-all;
    text-align: center;
}
.g4l-qr-hint  { font-size: var(--g4l-fe-fs-3, 13px); color: var(--g4l-fe-muted); margin-top: 5px; text-align: center; }

/* Confirm detail block */
.g4l-confirm-detail {
    border: 0.5px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    overflow: hidden;
    margin-bottom: 16px;
    width: 100%;
    max-width: 400px;
}
.g4l-cd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
    border-bottom: 0.5px solid var(--g4l-fe-border);
    gap: 10px;
}
.g4l-cd-row:last-child { border-bottom: none; }
.g4l-cd-row span { color: var(--g4l-fe-muted); flex-shrink: 0; }
.g4l-cd-row strong { color: var(--g4l-fe-text); text-align: right; }
.g4l-cancel-link { margin-top: 14px; font-size: 13px; }
.g4l-cancel-link a { color: var(--g4l-fe-muted); text-decoration: underline; }

/* Cancel note */
/* Hinweise zur Anreise (v1.4.33) — direkt beim Ort, wo man sie sucht */
.g4l-loc-notes {
    background: color-mix(in srgb, var(--g4l-fe-text) 4%, transparent);
    border-radius: 8px; padding: 9px 11px; margin-top: 8px;
    font-size: var(--g4l-fe-fs-2, 14px); line-height: 1.6; color: var(--g4l-fe-muted);
}
.g4l-loc-notes b {
    display: block; font-size: 10.5px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--g4l-fe-muted); margin-bottom: 3px;
}

/* Formatierte Beschreibung (v1.4.32) — Typografie folgt dem Event-Design */
.g4l-event-desc--rich { font-size: var(--g4l-fe-fs, 16px); line-height: 1.65; color: var(--g4l-fe-muted); }
.g4l-event-desc--rich p  { margin: 0 0 11px; }
.g4l-event-desc--rich h2 { font-size: 20px; font-weight: 800; color: var(--g4l-fe-text); margin: 22px 0 8px; letter-spacing: -.01em; }
.g4l-event-desc--rich h3 { font-size: 16px; font-weight: 700; color: var(--g4l-fe-text); margin: 18px 0 7px; }
.g4l-event-desc--rich h4 { font-size: var(--g4l-fe-fs-2, 14px); font-weight: 700; color: var(--g4l-fe-text);
    margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.g4l-event-desc--rich h2:first-child, .g4l-event-desc--rich h3:first-child, .g4l-event-desc--rich h4:first-child { margin-top: 0; }
.g4l-event-desc--rich ul,
.g4l-event-desc--rich ol { margin: 0 0 11px; padding-left: 22px; }
.g4l-event-desc--rich li { margin: 0 0 4px; }
.g4l-event-desc--rich a  { color: var(--g4l-fe-brand); }
.g4l-event-desc--rich hr { border: none; border-top: 1px solid var(--g4l-fe-border); margin: 16px 0; }
.g4l-event-desc--rich blockquote { margin: 0 0 11px; padding: 2px 0 2px 14px;
    border-left: 3px solid var(--g4l-fe-brand); color: var(--g4l-fe-text); }

/* Inhalte- und Programmblock. Die Regel stand bisher im mitgelieferten
   Stilblock der Galerie und hatte dort gar keinen Seitenabstand — der
   Block lag am Telefon bündig an den Bildschirmkanten, während alles
   darüber und darunter eingerückt war. */
.g4l-x-wrap { margin: 0 var(--g4l-fe-gutter) 16px; }

/* Event-Footer (v1.4.59) — im Spaltenlayout über beide Spalten, sonst
   säße er in der Textspalte und ließe die rechte Seite leer stehen. */
.g4l-foot-wrap { margin-top: 0; }
@media (min-width: 900px) {
  .g4l-page--landing-classic > .g4l-foot-wrap,
  .g4l-page--landing-editorial > .g4l-foot-wrap { grid-column: 1 / -1; }
}
.g4l-foot__lab { color: var(--g4l-fe-muted); }
.g4l-foot__org { color: var(--g4l-fe-muted); border-top-color: var(--g4l-fe-border); }
.g4l-foot__links a { color: var(--g4l-fe-muted); }

/* Begleitpersonen bei der Direktanmeldung (v1.4.42) */
.g4l-comp { margin-top: 14px; }
.g4l-comp__row {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--g4l-fe-border);
    border-radius: 9px; padding: 8px 10px;
}
.g4l-comp__l { flex: 1; font-size: 14px; }
.g4l-comp__b {
    width: 30px; height: 30px; flex: none;
    border: 1px solid var(--g4l-fe-border); border-radius: 7px;
    background: transparent; color: var(--g4l-fe-text);
    font-size: 16px; line-height: 1; cursor: pointer;
}
.g4l-comp__b:disabled { opacity: .35; cursor: default; }
.g4l-comp__n { min-width: 22px; text-align: center; font-weight: 700; }

/* Erkannte Einladung (v1.4.26) */
.g4l-invite {
    display: flex; gap: 9px; align-items: flex-start;
    background: var(--g4l-fe-brand-l);
    border-radius: 9px; padding: 11px 13px; margin: 0 0 16px;
    font-size: 13.5px; line-height: 1.5; color: var(--g4l-fe-text);
}
.g4l-invite svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--g4l-fe-brand); }

/* Kalender-Popover auf der Landing-Seite (v1.4.20) */
.g4l-cal { position: relative; margin-top: 7px; }
.g4l-cal__trig {
    display: inline-flex; align-items: center; gap: 5px;
    font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 5px 10px; border-radius: 7px;
    border: 1px solid var(--g4l-fe-border);
    background: transparent; color: var(--g4l-fe-brand);
    cursor: pointer; transition: background .15s ease;
}
.g4l-cal__trig:hover { background: var(--g4l-fe-brand-l); }
.g4l-cal__trig svg { width: 13px; height: 13px; flex: none; }
.g4l-cal__pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 234px; padding: 5px;
    background: var(--g4l-fe-surface);
    border: 1px solid var(--g4l-fe-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .18);
    animation: g4lCalIn .12s ease;
}
.g4l-cal__pop[hidden] { display: none; }
@keyframes g4lCalIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.g4l-cal__opt {
    display: block; padding: 8px 10px; border-radius: 8px;
    text-decoration: none; color: var(--g4l-fe-text);
}
.g4l-cal__opt:hover { background: var(--g4l-fe-brand-l); }
.g4l-cal__opt b { display: block; font-size: 13.5px; font-weight: 600; }
.g4l-cal__opt small { display: block; font-size: 11.5px; color: var(--g4l-fe-muted); margin-top: 1px; }

/* Rückfrage vor der Stornierung (v1.4.16) */
/* Adresszeile unter „Ort" in den Detail-Karten (v1.4.103) */
.g4l-cd-sub {
    display: block; font-weight: 400; font-size: var(--g4l-fe-fs-3, 13px);
    color: var(--g4l-fe-muted, #666); margin-top: 1px;
}

/* Übertragen-Hinweis im Absagedialog (v1.4.96) */
.g4l-cancel-alt {
    display: flex; gap: 10px; align-items: flex-start; text-align: left;
    max-width: 460px; margin: 18px auto 0;
    background: var(--g4l-fe-surface, #fff);
    border: 1px solid var(--g4l-fe-border, #e6e8eb);
    border-radius: var(--g4l-fe-radius, 10px);
    padding: 12px 14px; font-size: var(--g4l-fe-fs-2, 14px); line-height: 1.55;
    color: var(--g4l-fe-muted, #666);
}
.g4l-cancel-alt svg { flex-shrink: 0; margin-top: 2px; color: var(--g4l-fe-brand, #009FD4); }
.g4l-cancel-alt a { color: var(--g4l-fe-brand, #009FD4); font-weight: 600; }

.g4l-cancel-keep,
.g4l-cancel-go {
    font: inherit;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 28px;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease;
}
.g4l-cancel-keep {
    border: 1px solid var(--g4l-fe-border);
    background: var(--g4l-fe-surface);
    color: var(--g4l-fe-text);
}
.g4l-cancel-go {
    border: none;
    background: #E24B4A;
    color: #fff;
}
.g4l-cancel-go:hover  { background: #C93A39; }
.g4l-cancel-go:active { transform: scale(.98); }
.g4l-cancel-go:disabled { opacity: .6; cursor: default; }

.g4l-cancel-done-note {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--g4l-fe-ok-l);
    color: #3B6D11;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--g4l-fe-radius-sm);
    margin-bottom: 14px;
    width: 100%;
    max-width: 400px;
}

/* ============================================================
   HYBRID ZUGANG
   ============================================================ */
.g4l-page--hybrid { padding: 16px; }
.g4l-hybrid-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.g4l-hybrid-badge {
    background: var(--g4l-fe-lsm-l);
    color: var(--g4l-fe-lsm);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
}
.g4l-hybrid-sub { font-size: 12px; color: var(--g4l-fe-muted); }

.g4l-hybrid-player {
    background: #0a0a14;
    border-radius: var(--g4l-fe-radius);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
}
.g4l-player-placeholder { text-align: center; color: rgba(255,255,255,.4); }
.g4l-player-placeholder p { font-size: 13px; margin-top: 6px; }
.g4l-player-ready {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
}
.g4l-live-dot { color: var(--g4l-fe-err); font-size: 18px; animation: g4l-blink 1.4s ease-in-out infinite; }
@keyframes g4l-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

.g4l-hybrid-info {
    border: 0.5px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    overflow: hidden;
    margin-bottom: 14px;
}

/* ============================================================
   TOAST
   ============================================================ */
#g4l-fe-toasts {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.g4l-fe-toast {
    background: #1a1a1a;
    color: #fff;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: 24px;
    transform: translateY(8px);
    opacity: 0;
    transition: all .25s;
    pointer-events: auto;
}
.g4l-fe-toast--in { transform: translateY(0); opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .g4l-field-row { grid-template-columns: 1fr; }
    .g4l-event-title { font-size: 20px; }
    .g4l-banner { height: var(--g4l-fe-banner-h-m, 180px); }
}

/* Die Bausteine tragen unten keinen eigenen Rand mehr; ohne diese Zeile
   endete die Seite bündig am letzten Kasten. */
@media (max-width: 899px) {
    .g4l-page--landing:not(.g4l-page--landing-editorial) { padding-bottom: 24px; }
}

@media (min-width: 641px) {
    #g4l-fe-root {
        background: var(--g4l-fe-bg);
        padding: 24px 16px;
    }
    .g4l-page {
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 16px rgba(0,0,0,.08);
        min-height: auto;
    }
}

/* ── Feature 2: Livestream CTA ─────────────────────────────── */
.g4l-livestream-cta { margin: 0 var(--g4l-fe-gutter); padding: 16px 18px; background: var(--g4l-fe-brand, #185FA5); border-radius: 12px; }
.g4l-livestream-cta--offline { background: #f3f4f6; }
.g4l-lc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.g4l-lc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: lc-pulse 1.4s infinite; }
.g4l-lc-live-dot--off { background: #9ca3af; animation: none; }
@keyframes lc-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.g4l-lc-live-lbl { font-size: 13px; font-weight: 500; color: #fff; }
.g4l-lc-viewers { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.15); padding: 2px 8px; border-radius: 20px; }
.g4l-lc-desc { font-size: 12.5px; color: rgba(255,255,255,.85); margin-bottom: 12px; }
.g4l-lc-btn { display: block; text-align: center; background: #fff; color: var(--g4l-fe-brand, #185FA5); font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 8px; text-decoration: none; margin-bottom: 10px; transition: opacity .15s; }
.g4l-lc-btn:hover { opacity: .9; }
.g4l-lc-ticket-row { display: flex; gap: 6px; }
.g4l-lc-code-input { flex: 1; font-size: 12.5px; padding: 7px 10px; border-radius: 7px; border: none; background: rgba(255,255,255,.2); color: #fff; }
.g4l-lc-code-input::placeholder { color: rgba(255,255,255,.6); }
.g4l-lc-code-btn { padding: 7px 14px; border-radius: 7px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.g4l-lc-code-btn:hover { background: rgba(255,255,255,.1); }
.g4l-lc-msg { font-size: 11.5px; padding: 5px 8px; border-radius: 5px; margin-top: 6px; }
.g4l-lc-msg--ok  { background: rgba(255,255,255,.15); color: #fff; }
.g4l-lc-msg--err { background: rgba(255,100,100,.25); color: #fff; }

/* ============================================================
   [g4l_events] Shortcode
   ============================================================ */
.g4l-sc-events{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#0a1020}
.g4l-sc-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.g4l-sc-filter-btn{font-size:12.5px;padding:5px 14px;border-radius:20px;border:0.5px solid #c8d0dc;background:transparent;cursor:pointer;color:#5a6b80;transition:all .12s;font-family:inherit}
.g4l-sc-filter-btn:hover{border-color:#378ADD;color:#185FA5}
.g4l-sc-filter-btn.active{background:#E6F1FB;border-color:#378ADD;color:#185FA5}
.g4l-sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.g4l-sc-list{display:flex;flex-direction:column;gap:10px}
.g4l-sc-card{background:#fff;border:0.5px solid #c8d0dc;border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .12s,transform .12s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.g4l-sc-card:hover{border-color:#a8b4c4;transform:translateY(-2px)}
.g4l-sc-banner{width:100%;aspect-ratio:16/9;background:#1d2d3e;position:relative;overflow:hidden;flex-shrink:0}
.g4l-sc-banner img{width:100%;height:100%;object-fit:cover}
.g4l-sc-banner-ph{width:100%;height:100%}
.g4l-sc-type-badge{position:absolute;bottom:8px;left:10px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.4);color:#fff;backdrop-filter:blur(4px)}
.g4l-sc-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:6px}
.g4l-sc-title{font-size:14px;font-weight:500;line-height:1.3}
.g4l-sc-meta{font-size:11.5px;color:#5a6b80;display:flex;align-items:center;gap:4px}
.g4l-sc-meta svg{width:12px;height:12px;flex-shrink:0}
.g4l-sc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.g4l-sc-price{font-size:12.5px;font-weight:500;color:#0a1020}
.g4l-sc-cta{display:inline-block;font-size:var(--g4l-fe-fs-3, 13px);padding:6px 14px;border-radius:6px;border:0.5px solid #B5D4F4;background:#E6F1FB;color:#185FA5;cursor:pointer;font-family:inherit;transition:all .12s}
.g4l-sc-cta:hover{background:#378ADD;border-color:#378ADD;color:#fff}
/* list layout */
.g4l-sc-list .g4l-sc-card{flex-direction:row;align-items:stretch}
.g4l-sc-list .g4l-sc-banner{width:120px;aspect-ratio:unset;flex-shrink:0}
.g4l-sc-list .g4l-sc-body{flex-direction:row;align-items:center;gap:12px}
.g4l-sc-list .g4l-sc-footer{margin-top:0;padding-top:0;flex-shrink:0}
/* loading / empty */
.g4l-sc-loading{padding:32px;text-align:center;color:#5a6b80;font-size:13px}
.g4l-sc-empty{padding:32px;text-align:center;color:#5a6b80;font-size:13px;border:0.5px dashed #c8d0dc;border-radius:12px}
.g4l-sc-login-hint{font-size:14px;color:#5a6b80;padding:16px;border:0.5px solid #c8d0dc;border-radius:8px}

/* ============================================================
   [g4l_my_tickets] Shortcode
   ============================================================ */
.g4l-sc-my-tickets{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#0a1020}
.g4l-sc-tickets-list{display:flex;flex-direction:column;gap:10px}
.g4l-sc-ticket{background:#fff;border:0.5px solid #c8d0dc;border-radius:12px;overflow:hidden;display:flex}
.g4l-sc-ticket-accent{width:5px;flex-shrink:0}
.g4l-sc-ticket-body{padding:12px 16px;flex:1;min-width:0}
.g4l-sc-ticket-ev{font-size:11px;color:#5a6b80;margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.g4l-sc-ticket-title{font-size:14px;font-weight:500;margin-bottom:5px;line-height:1.3}
.g4l-sc-ticket-meta{font-size:11.5px;color:#5a6b80;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g4l-sc-ticket-meta svg{width:11px;height:11px;flex-shrink:0}
.g4l-sc-ticket-status{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px}
.g4l-sc-ticket-status--confirmed{background:#f0fdf4;color:#15803d}
.g4l-sc-ticket-status--pending{background:#fef3c7;color:#92400e}
.g4l-sc-ticket-status--used{background:#f1efed;color:#5a6b80}
.g4l-sc-ticket-qr{padding:12px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-left:0.5px dashed #c8d0dc;flex-shrink:0}
.g4l-sc-ticket-qr svg{width:52px;height:52px}
.g4l-sc-ticket-qr span{font-size:9.5px;color:#5a6b80}
.g4l-sc-ticket-type{font-size:10px;font-weight:500;padding:2px 7px;border-radius:10px;background:#E6F1FB;color:#185FA5}
.g4l-sc-ticket-type--on_site{background:#E6F1FB;color:#185FA5}
.g4l-sc-ticket-type--hybrid{background:#EAF3DE;color:#3B6D11}
.g4l-sc-ticket-type--livestream{background:#EEEDFE;color:#3C3489}
.g4l-sc-tickets-empty{padding:32px;text-align:center;color:#5a6b80;font-size:13px;border:0.5px dashed #c8d0dc;border-radius:12px}

/* ── Landing Page: Layout-Varianten + Token-Anwendung ───────── */
/* Token-Anwendung — wenn vorhanden, überschreibt Defaults aus :root */
#g4l-fe-root .g4l-page--landing { background: var(--g4l-fe-surface); color: var(--g4l-fe-text); }
#g4l-fe-root .g4l-event-desc { color: var(--g4l-fe-muted); }
#g4l-fe-root .g4l-meta-secondary { color: var(--g4l-fe-muted); }
#g4l-fe-root .g4l-event-body { border-radius: var(--g4l-fe-radius); }

/* Banner-Stile */
.g4l-banner--solid, .g4l-banner--gradient { background-position: center; background-size: cover; }
.g4l-banner--none { display: none; }

/* Layout-Variante: Hero Split — Banner rechts, Content links, dunkler Hintergrund */
@media (min-width: 720px) {
  .g4l-page--landing-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--g4l-fe-text);
    color: #fff;
  }
  .g4l-page--landing-hero .g4l-banner {
    grid-row: 1 / span 2;
    grid-column: 2;
    height: 100%;
    min-height: 320px;
  }
  .g4l-page--landing-hero .g4l-event-body {
    grid-row: 1;
    grid-column: 1;
    padding: 40px 32px;
  }
  .g4l-page--landing-hero .g4l-event-title { color: #fff; font-size: 32px; }
  .g4l-page--landing-hero .g4l-event-desc { color: rgba(255,255,255,.78); }
  .g4l-page--landing-hero .g4l-meta-primary { color: #fff; }
  .g4l-page--landing-hero .g4l-meta-secondary { color: rgba(255,255,255,.65); }
  .g4l-page--landing-hero .g4l-meta-icon { color: rgba(255,255,255,.7); }
  .g4l-page--landing-hero .g4l-rail {
    grid-row: 2;
    grid-column: 1;
    padding: 0 32px 32px;
    gap: 14px;
  }
  /* Der dunkle Grund ist hier die Fläche — die Eckdaten brauchen weder
     Kasten noch zusätzliche Einrückung. */
  .g4l-page--landing-hero .g4l-rail__card { padding: 0; background: none; }
  /* Ohne Banner bliebe die rechte Hälfte leer — dann eine Spalte.
     Das galt schon vor dem Umbau, fiel aber nicht auf, solange die
     Variante selten genutzt wurde. */
  .g4l-page--landing-hero:not(:has(> .g4l-banner)) {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .g4l-page--landing-hero .g4l-livestream-cta { margin: 0; }
  .g4l-page--landing-hero .g4l-pdf-link { padding-left: 0; padding-right: 0; }
  .g4l-page--landing-hero .g4l-ticket-widget {
    margin: 0;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
  }
  .g4l-page--landing-hero .g4l-tw-title { color: #fff; }
  .g4l-page--landing-hero .g4l-ticket-name { color: #fff; }
  .g4l-page--landing-hero .g4l-ticket-desc,
  .g4l-page--landing-hero .g4l-ticket-cap { color: rgba(255,255,255,.65); }
  .g4l-page--landing-hero .g4l-ticket-cap.is-low { color: #FFC48A; }
}

/* ── Zweispaltiges Desktop-Layout (v1.4.38) ──────────────────
   Der Gewinn ist nicht die gefüllte Fläche, sondern die Position des
   Anmeldeknopfs: Er bleibt im Blick, während man liest. Mobil bleibt
   alles wie bisher — eine Spalte, gleiche Reihenfolge. */
/* Ein Abstand für die ganze Spalte statt eigener Ränder je Baustein.
   Ränder addieren sich in einer Flex-Spalte (sie fallen nicht zusammen) —
   daraus entstanden Lücken von 4, 16, 20 und 36 Pixeln in derselben
   Kolonne. */
.g4l-rail { display: flex; flex-direction: column; gap: 16px; }
/* Mobil trug der Textkörper die seitlichen Abstände; die Eckdaten stehen
   jetzt außerhalb davon und brauchen sie selbst. */
.g4l-rail__card { padding: 0 var(--g4l-fe-gutter); }

@media (min-width: 900px) {
  .g4l-page--landing-classic,
  .g4l-page--landing-editorial {
    max-width: 1060px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    column-gap: 34px;
    align-items: start;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 48px;
  }

  /* Banner über beide Spalten und über die Seitenränder hinaus — er ist
     der einzige Baustein, der bündig abschließen soll.
     Wichtig: feste Höhe durch ein Seitenverhältnis ersetzen. Sonst
     schneidet ein gestaltetes Bannerbild bei doppelter Breite doppelt
     so viel weg wie am Telefon; genau das machte die breite Seite
     unruhig. Das Verhältnis entspricht der bisherigen Darstellung. */
  .g4l-page--landing-classic > .g4l-banner,
  .g4l-page--landing-editorial > .g4l-banner {
    grid-column: 1 / -1;
    margin: 0 -40px 26px;
    height: auto;
    /* v1.4.110 — Verhältnis-Stufen (Kino 16:9, Panorama 21:9) bringen
       ihr Verhältnis mit; feste Stufen behalten das bewährte 64:22. */
    aspect-ratio: var(--g4l-fe-banner-ratio-wide, 64 / 22);
    max-height: var(--g4l-fe-banner-maxh-wide, 380px);
  }

  .g4l-page--landing-classic > .g4l-event-body,
  .g4l-page--landing-editorial > .g4l-event-body,
  .g4l-page--landing-classic > .g4l-x-wrap,
  .g4l-page--landing-editorial > .g4l-x-wrap {
    grid-column: 1;
    margin-left: 0;
    margin-right: 0;
  }

  .g4l-page--landing-classic > .g4l-event-body {
    padding: 0 0 12px;
  }

  /* Rechte Spalte bleibt beim Scrollen stehen. */
  .g4l-page--landing-classic > .g4l-rail,
  .g4l-page--landing-editorial > .g4l-rail {
    grid-column: 2;
    grid-row: 2 / span 99;
    position: sticky;
    top: 20px;
    gap: 16px;
  }
  .g4l-page--landing-classic:not(:has(> .g4l-banner)) > .g4l-rail,
  .g4l-page--landing-editorial:not(:has(> .g4l-banner)) > .g4l-rail {
    grid-row: 1 / span 99;
  }
  /* Ohne Banner fehlt der Deckel: Dann braucht die Seite oben Luft,
     sonst klebt der Titel an der Fensterkante. */
  .g4l-page--landing-classic:not(:has(> .g4l-banner)) { padding-top: 38px; }
  /* Ist das Fenster niedriger als die Spalte, darf sie nicht kleben —
     sonst käme man an den Absendeknopf nicht heran. */
  @media (max-height: 900px) {
    .g4l-page--landing-classic > .g4l-rail,
    .g4l-page--landing-editorial > .g4l-rail { position: static; }
  }

  /* Zeilenlänge begrenzen: überschüssige Breite geht an den Rand, nicht
     in die Zeile. Ab etwa 68 Zeichen leidet die Lesbarkeit. */
  .g4l-page--landing-classic .g4l-event-desc,
  .g4l-page--landing-editorial .g4l-event-desc { max-width: 64ch; }

  /* Größere Fläche verträgt — und braucht — etwas mehr Schrift. */
  .g4l-page--landing-classic .g4l-event-title,
  .g4l-page--landing-editorial .g4l-event-title { font-size: 30px; margin-bottom: 12px; }
  .g4l-page--landing-classic .g4l-event-desc,
  .g4l-page--landing-editorial .g4l-event-desc { font-size: 15px; }

  /* Eckdaten: getönte Fläche statt harter Rahmen. Ein weißer Kasten mit
     Rand auf weißem Grund wirkt aufgesetzt; die Tönung ordnet sich unter
     und lässt das Anmeldefeld der Blickfang bleiben. */
  .g4l-rail__card {
    background: color-mix(in srgb, var(--g4l-fe-text) 3.5%, transparent);
    border-radius: var(--g4l-fe-radius);
    padding: 18px 20px;
  }
  .g4l-rail__card .g4l-meta-list { padding-bottom: 0; gap: 14px; }

  .g4l-rail > .g4l-ticket-widget,
  .g4l-rail > .g4l-livestream-cta { margin: 0; }
  /* In der schmalen Spalte ist der Seitenabstand schon durch die Spalte
     selbst gegeben — sonst stünden diese beiden 16 Pixel weiter innen
     als der Ticketkasten daneben. */
  .g4l-rail > .g4l-pdf-link,
  .g4l-rail > .g4l-no-tickets { padding-left: 0; padding-right: 0; }
  /* Das Anmeldefeld ist der Zweck der Spalte — es darf sich abheben. */
  .g4l-rail > .g4l-ticket-widget {
    background: var(--g4l-fe-surface);
    box-shadow: 0 8px 26px -16px rgba(16, 22, 28, .3);
  }
}

/* ── Layout-Variante: Editorial ──────────────────────────────
   Keine eigene Grundfläche: Banner, Text und Anmeldung schweben als
   einzelne Karten. Der Untergrund kommt von der Seite selbst, damit
   nichts als abgesetzter Block endet.
   (v1.4.39 — vorher lag hinter allem eine getönte Fläche.) */
#g4l-fe-root:has(> .g4l-page--landing-editorial) {
    background: var(--g4l-fe-bg);
    min-height: 100vh;
}
.g4l-page--landing-editorial {
  background: transparent;
  padding: 22px 16px 34px;
}
.g4l-page--landing-editorial .g4l-banner,
.g4l-page--landing-editorial .g4l-event-body,
.g4l-page--landing-editorial .g4l-ticket-widget,
.g4l-page--landing-editorial .g4l-livestream-cta {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Jede Karte steht für sich: eigene Ecken, eigener Schatten, Abstand
   dazwischen. Der Banner ist dabei eine Karte wie die anderen — nicht
   der Deckel einer gemeinsamen. */
.g4l-page--landing-editorial .g4l-banner {
  border-radius: calc(var(--g4l-fe-radius, 10px) + 4px);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 6px 24px -10px rgba(16, 22, 28, .22);
}
.g4l-page--landing-editorial .g4l-x-wrap { margin-left: 0; margin-right: 0; }
.g4l-page--landing-editorial .g4l-event-body {
  background: var(--g4l-fe-surface);
  border-radius: calc(var(--g4l-fe-radius, 10px) + 4px);
  padding: 24px 26px;
  margin-top: 0;
  box-shadow: 0 6px 24px -12px rgba(16, 22, 28, .18);
}
.g4l-page--landing-editorial .g4l-rail__card {
  background: var(--g4l-fe-surface);
  border-radius: calc(var(--g4l-fe-radius, 10px) + 4px);
  padding: 18px 20px;
  margin: 16px auto 0;
  max-width: 640px;
  box-shadow: 0 6px 24px -12px rgba(16, 22, 28, .18);
}
.g4l-page--landing-editorial .g4l-ticket-widget {
  border: none;
  background: var(--g4l-fe-surface);
  border-radius: calc(var(--g4l-fe-radius, 10px) + 4px);
  box-shadow: 0 6px 24px -12px rgba(16, 22, 28, .18);
}

/* v1.4.70 — Die Eckdatenkarte stand am Telefon schmaler und mittig,
   während Text- und Anmeldekarte die volle Breite hatten.
   Ursache: Die Bausteine dieser Spalte sind Flex-Elemente. Ein
   Flex-Element mit automatischen Rändern quer zur Achse wird NICHT
   mehr auf die Spaltenbreite gedehnt (CSS Flexbox 9.6) — es schrumpft
   auf seinen Inhalt und setzt sich mittig. Die Ränder stehen hier zum
   Zentrieren unter 640 Pixeln; gedacht war das für den Textkörper, der
   kein Flex-Element ist und deshalb unauffällig blieb. An der
   Anmeldekarte fiel es ebenfalls nicht auf, weil ihr Inhalt breiter
   ist als die Spalte und sie dadurch ohnehin ausfüllt.
   Eine ausdrückliche Breite stellt die Dehnung wieder her; das
   Zentrieren unter 640 Pixeln bleibt erhalten. */
.g4l-page--landing-editorial .g4l-rail > .g4l-rail__card,
.g4l-page--landing-editorial .g4l-rail > .g4l-ticket-widget,
.g4l-page--landing-editorial .g4l-rail > .g4l-livestream-cta,
.g4l-page--landing-editorial .g4l-rail > .g4l-no-tickets,
.g4l-page--landing-editorial .g4l-rail > .g4l-pdf-link { width: 100%; }

/* Zweispaltig: Die 640er-Begrenzung gilt nur einspaltig — in der
   Spaltenansicht setzt das Raster die Breite. */
@media (min-width: 900px) {
  .g4l-page--landing-editorial > .g4l-banner,
  .g4l-page--landing-editorial > .g4l-event-body,
  .g4l-page--landing-editorial .g4l-rail > .g4l-ticket-widget,
  .g4l-page--landing-editorial .g4l-rail > .g4l-livestream-cta,
  .g4l-page--landing-editorial .g4l-rail__card {
    max-width: none;
  }
  /* Der Banner bleibt auch hier eine schwebende Karte — er läuft NICHT
     über den Rand wie in der klassischen Variante. */
  .g4l-page--landing-editorial > .g4l-banner {
    margin: 0 0 24px;
  }
  .g4l-page--landing-editorial > .g4l-event-body {
    padding: 28px 30px;
  }
  .g4l-page--landing-editorial .g4l-rail__card { margin: 0; }
  /* Die Kurzschreibweise weiter oben im Block setzt alle vier Seiten
     zurück und steht später in der Datei als der allgemeine Teil — die
     Desktop-Ränder deshalb hier noch einmal ausdrücklich. */
  .g4l-page--landing-editorial {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 48px;
  }
}

/* CTA-Stil: outline */
.g4l-page--landing[data-layout] .g4l-cta-btn { border-radius: var(--g4l-fe-radius); }
#g4l-fe-root .g4l-cta-btn--outline,
#g4l-fe-root .g4l-page--landing[data-cta="outline"] .g4l-cta-btn:not([disabled]) {
  background: transparent;
  color: var(--g4l-fe-brand);
  border: 1.5px solid var(--g4l-fe-brand);
}
#g4l-fe-root .g4l-page--landing[data-cta="outline"] .g4l-cta-btn:not([disabled]):hover {
  background: var(--g4l-fe-brand);
  color: #fff;
}


/* ============================================================
   ZAHLUNG OFFEN  (v1.3.34)
   Eigener Zustand zwischen Formular und Bestätigung. Bewusst
   ruhiger als die Bestätigung: hier ist noch nichts fertig.
   ============================================================ */
.g4l-page--payment {
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.g4l-confirm-icon--pay { background: var(--g4l-fe-warn-l); }

/* Fortschritt: reserviert -> Zahlung -> Ticket */
.g4l-pay-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 400px;
    justify-content: center;
}
.g4l-pay-step { display: flex; align-items: center; gap: 6px; }
.g4l-pay-step__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--g4l-fe-border);
    flex-shrink: 0;
}
.g4l-pay-step__t { font-size: 12px; color: var(--g4l-fe-muted); white-space: nowrap; }
.g4l-pay-step__line { width: 24px; height: 1px; background: var(--g4l-fe-border); flex-shrink: 0; }
.g4l-pay-step.is-done .g4l-pay-step__dot { background: var(--g4l-fe-ok); }
.g4l-pay-step.is-done .g4l-pay-step__t   { color: var(--g4l-fe-text); }
.g4l-pay-step.is-now  .g4l-pay-step__dot { background: var(--g4l-fe-warn); box-shadow: 0 0 0 3px var(--g4l-fe-warn-l); }
.g4l-pay-step.is-now  .g4l-pay-step__t   { color: var(--g4l-fe-warn-d); font-weight: 600; }

/* Betrag */
.g4l-pay-amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 400px;
    padding: 14px 16px;
    background: var(--g4l-fe-surface);
    border: 1px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    margin-bottom: 12px;
}
.g4l-pay-amount__lbl { font-size: 13px; color: var(--g4l-fe-muted); }
.g4l-pay-amount__val { font-size: 22px; font-weight: 700; color: var(--g4l-fe-text); letter-spacing: -0.02em; }

/* Verwendungszweck — der eine Wert, den der Gast wirklich braucht */
.g4l-pay-ref {
    width: 100%;
    max-width: 400px;
    padding: 14px 16px;
    background: var(--g4l-fe-warn-l);
    border: 1px solid rgba(240, 159, 39, 0.35);
    border-radius: var(--g4l-fe-radius);
    margin-bottom: 12px;
}
.g4l-pay-ref__lbl {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g4l-fe-warn-d);
    margin-bottom: 7px;
    font-weight: 600;
}
.g4l-pay-ref__row { display: flex; align-items: center; gap: 10px; }
.g4l-pay-ref__code {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--g4l-fe-text);
    letter-spacing: 0.04em;
    word-break: break-all;
}
.g4l-pay-copy {
    flex-shrink: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    border: 1px solid rgba(240, 159, 39, 0.5);
    background: var(--g4l-fe-surface);
    color: var(--g4l-fe-warn-d);
    border-radius: var(--g4l-fe-radius-sm);
    cursor: pointer;
}
.g4l-pay-copy:hover  { background: #fff; border-color: var(--g4l-fe-warn); }
.g4l-pay-copy:focus-visible { outline: 2px solid var(--g4l-fe-warn-d); outline-offset: 2px; }
.g4l-pay-copy.is-done { color: var(--g4l-fe-ok); border-color: var(--g4l-fe-ok); }

/* Zahlungsdaten des Veranstalters */
.g4l-pay-box {
    width: 100%;
    max-width: 400px;
    padding: 14px 16px;
    background: var(--g4l-fe-surface);
    border: 1px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    margin-bottom: 12px;
}
.g4l-pay-box__lbl {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g4l-fe-muted);
    margin-bottom: 7px;
    font-weight: 600;
}
.g4l-pay-box__body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--g4l-fe-text);
    word-break: break-word;
}
.g4l-pay-note {
    width: 100%;
    max-width: 400px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--g4l-fe-muted);
    margin-bottom: 16px;
}
.g4l-mail-note--pay { background: var(--g4l-fe-warn-l); color: var(--g4l-fe-warn-d); }

@media (max-width: 420px) {
    .g4l-pay-steps { gap: 5px; }
    .g4l-pay-step__line { width: 14px; }
    .g4l-pay-step__t { font-size: 11px; }
}

.g4l-pay-fail {
    width: 100%;
    max-width: 400px;
    padding: 12px 14px;
    background: var(--g4l-fe-err-l);
    border: 1px solid rgba(226, 75, 74, 0.35);
    border-radius: var(--g4l-fe-radius-sm);
    font-size: 13.5px;
    line-height: 1.55;
    color: #8A2B2A;
    margin-bottom: 14px;
}
.g4l-pay-fail strong { display: block; margin-bottom: 2px; }

/* ============================================================
   TEILNEHMER UND MEHRERE TICKETS  (v1.3.42)
   ============================================================ */
.g4l-sec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.g4l-sec-t { font-size: 17px; font-weight: 700; color: var(--g4l-fe-text); letter-spacing: -0.015em; }
.g4l-sec-c { font-size: 13px; color: var(--g4l-fe-muted); }

/* Teilnehmerblock */
.g4l-att {
    border: 1px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    padding: 14px 16px 4px;
    margin-bottom: 10px;
    background: var(--g4l-fe-bg);
}
.g4l-att--self { padding-bottom: 14px; background: var(--g4l-fe-brand-l); border-color: rgba(0,159,212,.3); }
.g4l-att__h { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.g4l-att__n {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    background: var(--g4l-fe-brand); color: #fff;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.g4l-att__t { font-size: 14px; font-weight: 700; color: var(--g4l-fe-text); }
.g4l-att__hint { font-size: 12.5px; color: var(--g4l-fe-muted); margin: -4px 0 10px; line-height: 1.45; }
.g4l-att--self .g4l-att__hint { margin: 0; }
.g4l-att__self-toggle { margin-bottom: 12px; }

/* Ausgestellte Tickets */
.g4l-seats { width: 100%; max-width: 400px; margin-bottom: 16px; }
.g4l-seat {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--g4l-fe-border);
    border-radius: var(--g4l-fe-radius);
    background: var(--g4l-fe-surface);
}
.g4l-seat__qr { width: 46px; height: 46px; flex: none; }
.g4l-seat__qr svg { width: 100%; height: 100%; display: block; }
.g4l-seat__tx { min-width: 0; text-align: left; }
.g4l-seat__nm { font-size: 15px; font-weight: 650; color: var(--g4l-fe-text); }
.g4l-seat__m { font-size: 12.5px; color: var(--g4l-fe-muted); }
.g4l-seat__b {
    margin-left: auto; flex: none; white-space: nowrap;
    font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: var(--g4l-fe-ok-l); color: #1B7F4F;
}
.g4l-seat__b--mail { background: var(--g4l-fe-brand-l); color: var(--g4l-fe-brand-d); }
.g4l-seat__b--hand { background: var(--g4l-fe-warn-l); color: var(--g4l-fe-warn-d); }

/* QR-Code wird vom Server nachgeladen (v1.3.44) */
.g4l-qr-load {
    width: 100%; aspect-ratio: 1; min-height: 40px;
    background: var(--g4l-fe-bg);
    border-radius: 4px;
    animation: g4lQrPulse 1.4s ease-in-out infinite;
}
@keyframes g4lQrPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .g4l-qr-load { animation: none; } }
.g4l-qr-fail { font-size: 12.5px; color: var(--g4l-fe-muted); text-align: center; padding: 12px 6px; }
.g4l-seat__qr svg, .g4l-qr-wrap svg { width: 100%; height: auto; display: block; }

/* ── Direktanmeldung auf der Landing-Seite (v1.3.74) ───── */
.g4l-inlineform__b { padding: 4px 14px 0; }
.g4l-inlineform .g4l-form-section { border: none; padding: 0; margin-bottom: 4px; }
.g4l-inlineform .g4l-tw-footer { display: block; }
.g4l-inlineform .g4l-cta-btn { width: 100%; }
.g4l-inlineform .g4l-form-error { margin: 0 14px 14px; }

/* Fangfeld gegen automatische Ausfueller (v1.3.95).
   Kein display:none/visibility:hidden — beides ueberspringen viele Bots
   gezielt. Stattdessen aus dem sichtbaren Bereich schieben und von
   Screenreadern (aria-hidden im Markup) sowie Tab-Reihenfolge (tabindex=-1)
   ausnehmen. Fuer Menschen unsichtbar, fuer Bots ein Feld wie jedes andere. */
.g4l-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}