/*
 * og-form.css — Oeffentliche Buchungs-Journey
 * Design-Prinzipien: Divi-vertraeglich, neutral, mobile-first, a11y
 * Alle Selektoren auf .og-* gescopet — kein Leak ins Theme.
 * CSS-Variablen oben fuer einfaches Divi-Tuning.
 */

/* ============================================================
   DESIGN-TOKENS (ueberschreibbar via Divi/Theme Customizer)
   ============================================================ */
.og-frontend,
.og-overview,
.og-modal {
    /* Akzentfarbe — ruhiges Blau-Gruen.
       .og-modal MUSS hier mit drin sein: das Modal-Markup steht ausserhalb von
       .og-overview, sonst sind die --og-* Variablen nicht im Scope und alle
       var()-basierten Regeln (padding/border/gap/Farben) fallen auf 0 zurueck. */
    --og-accent:         #3a7d5e;
    --og-accent-hover:   #2e6449;
    --og-accent-text:    #ffffff;

    /* Statusfarben */
    --og-color-offen:    #2d7a3e;
    --og-color-voll:     #b94a1b;
    --og-color-pending:  #8a6900;

    /* Feedback */
    --og-color-success:  #1e5c35;
    --og-color-error:    #a31515;
    --og-bg-success:     #edf7f0;
    --og-bg-error:       #fdf1f1;
    --og-border-success: #9ed3b2;
    --og-border-error:   #f0b4b4;

    /* Neutrale Palette */
    --og-gray-50:        #f8f9fa;
    --og-gray-100:       #f1f3f5;
    --og-gray-200:       #e9ecef;
    --og-gray-300:       #dee2e6;
    --og-gray-400:       #ced4da;
    --og-gray-600:       #6c757d;
    --og-gray-700:       #495057;
    --og-gray-900:       #212529;

    /* Abstands-Skala */
    --og-space-xs:       0.25rem;
    --og-space-sm:       0.5rem;
    --og-space-md:       1rem;
    --og-space-lg:       1.5rem;
    --og-space-xl:       2rem;
    --og-space-2xl:      3rem;

    /* Radien */
    --og-radius-sm:      0.25rem;
    --og-radius-md:      0.5rem;
    --og-radius-lg:      0.75rem;
    --og-radius-xl:      1rem;

    /* Schatten */
    --og-shadow-sm:      0 1px 3px rgba(0,0,0,.08);
    --og-shadow-md:      0 4px 12px rgba(0,0,0,.1);

    /* Uebergaenge */
    --og-transition:     200ms ease;

    /* Typografie */
    --og-font:           inherit;
    --og-font-size-sm:   0.875rem;
    --og-font-size-md:   1rem;
    --og-font-size-lg:   1.125rem;
    --og-font-size-xl:   1.375rem;
    --og-line-height:    1.6;
}


/* ============================================================
   SHELL — .og-frontend
   ============================================================ */
.og-frontend {
    font-family: var(--og-font);
    color: var(--og-gray-900);
    line-height: var(--og-line-height);
    max-width: 36rem;
    margin-inline: auto;
    padding: var(--og-space-md);
    box-sizing: border-box;
}

@media (min-width: 40rem) {
    .og-frontend {
        padding: var(--og-space-xl) var(--og-space-lg);
    }
}

/* Event-Titel im Buchungs-Shell */
.og-frontend > h1 {
    font-family: inherit;
    font-size: var(--og-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--og-space-md);
    line-height: 1.3;
    color: var(--og-gray-900);
}


/* ============================================================
   FEATURED IMAGE — .og-event-thumbnail
   ============================================================ */
.og-event-thumbnail {
    margin-bottom: var(--og-space-lg);
    border-radius: var(--og-radius-lg);
    overflow: hidden;
    line-height: 0;
    background: var(--og-gray-100);
}

.og-event-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
    border-radius: var(--og-radius-lg);
}


/* ============================================================
   BUCHUNGSFORMULAR — .og-form
   ============================================================ */
.og-form {
    display: flex;
    flex-direction: column;
    gap: var(--og-space-sm);
}

/* Formularzeile */
.og-form__row {
    margin: 0;
}

/* Label allgemein */
.og-form__row > label {
    display: flex;
    flex-direction: column;
    gap: var(--og-space-xs);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-gray-700);
    cursor: pointer;
}

/* Pflichtfeld-Stern */
.og-form__row > label[data-required]::after,
.og-form__row--required > label::after {
    content: ' *';
    color: var(--og-color-error);
    font-size: var(--og-font-size-sm);
}

/* Text-Inputs, Select, Textarea (radio/checkbox explizit ausgeschlossen) */
.og-form input[type="text"],
.og-form input[type="email"],
.og-form input[type="tel"],
.og-form input[type="number"],
.og-form select,
.og-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: 1rem; /* mind. 16px — verhindert Zoom auf iOS */
    line-height: 1.5;
    color: var(--og-gray-900);
    background: #fff;
    border: 1.5px solid var(--og-gray-300);
    border-radius: var(--og-radius-md);
    box-shadow: var(--og-shadow-sm);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--og-transition), box-shadow var(--og-transition);
}

.og-form input[type="text"]:hover,
.og-form input[type="email"]:hover,
.og-form input[type="tel"]:hover,
.og-form input[type="number"]:hover,
.og-form select:hover,
.og-form textarea:hover {
    border-color: var(--og-gray-400);
}

.og-form input[type="text"]:focus,
.og-form input[type="email"]:focus,
.og-form input[type="tel"]:focus,
.og-form input[type="number"]:focus,
.og-form select:focus,
.og-form textarea:focus {
    border-color: var(--og-accent);
    box-shadow: 0 0 0 3px rgba(58,125,94,.18);
}

/* Placeholder */
.og-form input::placeholder,
.og-form textarea::placeholder {
    color: var(--og-gray-400);
    opacity: 1;
}

/* Select — eigener Pfeil-Indikator */
.og-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%236c757d'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

/* Textarea */
.og-form textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Nummer-Input — Spinner ausblenden */
.og-form input[type="number"]::-webkit-inner-spin-button,
.og-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.og-form input[type="number"] {
    -moz-appearance: textfield;
}


/* ---- Radio-Gruppe (inline, nebeneinander) ---- */

/* Wrapper-Span, der alle Radio-Optionen einer Gruppe aufnimmt */
.og-form__radio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--og-space-sm);
    margin-top: var(--og-space-xs);
}

.og-form__radio-group .og-form__radio {
    display: flex;
    align-items: center;
    gap: var(--og-space-sm);
    padding: 0.6rem var(--og-space-md);
    font-size: var(--og-font-size-md);
    font-weight: 400;
    color: var(--og-gray-700);
    background: var(--og-gray-50);
    border: 1.5px solid var(--og-gray-200);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    transition: background var(--og-transition), border-color var(--og-transition);
    min-height: 2.75rem; /* Touch-Target */
    /* Optionen teilen sich die volle Breite gleichmaessig (2 -> 50/50, 3 -> 33/33/33),
       brechen aber bei vielen/langen Optionen dank min-width sauber um. */
    flex: 1 1 0;
    min-width: 6rem;
    justify-content: center;
}

.og-form__radio-group .og-form__radio:hover {
    background: #fff;
    border-color: var(--og-accent);
}

/* Rueckwaertskompatibilitaet: direktes Kind ohne Wrapper (aeltere Ausgaben) */
.og-form__row > label > .og-form__radio {
    display: flex;
    align-items: center;
    gap: var(--og-space-sm);
    padding: 0.6rem var(--og-space-md);
    margin-top: var(--og-space-xs);
    font-size: var(--og-font-size-md);
    font-weight: 400;
    color: var(--og-gray-700);
    background: var(--og-gray-50);
    border: 1.5px solid var(--og-gray-200);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    transition: background var(--og-transition), border-color var(--og-transition);
    min-height: 2.75rem; /* Touch-Target */
}

.og-form__row > label > .og-form__radio:hover {
    background: #fff;
    border-color: var(--og-accent);
}

.og-form__radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    border: 2px solid var(--og-gray-400);
    border-radius: 50%;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color var(--og-transition), background var(--og-transition);
    position: relative;
    flex-shrink: 0;
}

.og-form__radio input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(58,125,94,.22);
    border-color: var(--og-accent);
}

.og-form__radio input[type="radio"]:checked {
    background: var(--og-accent);
    border-color: var(--og-accent);
}

.og-form__radio input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 0.375rem;
    height: 0.375rem;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Ausgewaehlte Radio-Zeile hervorheben */
.og-form__radio:has(input[type="radio"]:checked) {
    background: #fff;
    border-color: var(--og-accent);
    color: var(--og-gray-900);
}


/* ---- Toggle — Segmented-Control (Nein | Ja) ---- */

/*
 * .og-toggle-switch: aeusseres <label>, macht die gesamte Flaeche klickbar.
 * .og-toggle--input: Checkbox visuell versteckt (position:absolute;opacity:0),
 *   bleibt im DOM fuer a11y (fokussierbar, Tab-Reihenfolge, required).
 * .og-toggle-track: sichtbarer Schalter, zwei Haelften nebeneinander.
 * Zustand via CSS-Selektoren ueber :checked / :not(:checked) — kein JS.
 */

/* Aeusseres Label — verhindert vertikale Stapelung durch das Row-Label */
.og-form__row > label > span.og-toggle-switch {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: 100%;
    margin-top: var(--og-space-xs);
}

/* Checkbox visuell verstecken, aber fokussierbar halten */
.og-toggle--input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* Sichtbarer Track — zwei Segmente nebeneinander */
.og-toggle-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 2.75rem;
    border: 1.5px solid var(--og-gray-300);
    border-radius: var(--og-radius-md);
    overflow: hidden;
    background: var(--og-gray-100);
    box-shadow: var(--og-shadow-sm);
    transition: border-color var(--og-transition), box-shadow var(--og-transition);
    cursor: pointer;
}

/* Fokus-Ring auf dem Track wenn Checkbox fokussiert */
.og-toggle--input:focus-visible ~ .og-toggle-track {
    border-color: var(--og-accent);
    box-shadow: 0 0 0 3px rgba(58,125,94,.22);
    outline: none;
}

/* Jede Option nimmt die Haelfte ein */
.og-toggle-opt {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem var(--og-space-md);
    font-size: var(--og-font-size-md);
    font-weight: 600;
    line-height: 1.4;
    transition: background var(--og-transition), color var(--og-transition);
    user-select: none;
}

/* === UNCHECKED (AUS): "Nein" aktiv (hervorgehoben), "Ja" gedaempft === */

/* "Nein"-Seite aktiv: dunkleres Grau, gute Lesbarkeit */
.og-toggle--input:not(:checked) ~ .og-toggle-track .og-toggle-opt--off {
    background: var(--og-gray-400);
    color: var(--og-gray-900);
}

/* "Ja"-Seite gedaempft */
.og-toggle--input:not(:checked) ~ .og-toggle-track .og-toggle-opt--on {
    background: var(--og-gray-100);
    color: var(--og-gray-600);
}

/* === CHECKED (EIN): "Ja" aktiv (Akzent), "Nein" gedaempft === */

/* "Nein"-Seite gedaempft */
.og-toggle--input:checked ~ .og-toggle-track .og-toggle-opt--off {
    background: var(--og-gray-100);
    color: var(--og-gray-600);
}

/* "Ja"-Seite aktiv: Akzentfarbe, weisser Text */
.og-toggle--input:checked ~ .og-toggle-track .og-toggle-opt--on {
    background: var(--og-accent);
    color: var(--og-accent-text);
}

/* Trennlinie zwischen den Segmenten */
.og-toggle-opt--off {
    border-right: 1px solid var(--og-gray-300);
}

/* Hover-Feedback auf dem Track */
.og-form__row > label:hover span.og-toggle-switch .og-toggle-track {
    border-color: var(--og-gray-400);
}

/* Label-Zeile mit Toggle-Switch: Row-Label vertikal, Switch darunter */
.og-form__row > label:has(> span.og-toggle-switch) {
    flex-direction: column;
    align-items: stretch;
    font-weight: 600;
    font-size: var(--og-font-size-sm);
    padding: 0;
    gap: 0;
}


/* ---- Checkbox ---- */
.og-form__row > label > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    border: 2px solid var(--og-gray-400);
    border-radius: var(--og-radius-sm);
    background: #fff;
    cursor: pointer;
    outline: none;
    position: relative;
    flex-shrink: 0;
    transition: background var(--og-transition), border-color var(--og-transition);
    vertical-align: middle;
    margin-right: var(--og-space-xs);
}

.og-form__row > label > input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(58,125,94,.22);
    border-color: var(--og-accent);
}

.og-form__row > label > input[type="checkbox"]:checked {
    background: var(--og-accent);
    border-color: var(--og-accent);
}

.og-form__row > label > input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 0.35rem;
    height: 0.6rem;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    position: absolute;
    top: 1px;
    left: 4px;
}

/* Checkbox-Label inline */
.og-form__row > label:has(> input[type="checkbox"]) {
    flex-direction: row;
    align-items: flex-start;
    font-weight: 400;
    font-size: var(--og-font-size-md);
    padding: var(--og-space-xs) 0;
}


/* ---- Conditional-Reihen: sanftes Einblenden ---- */
.og-form__row[data-og-show-if] {
    transition: opacity var(--og-transition);
}
.og-form__row[data-og-show-if][style*="none"] {
    /* JS setzt display:none; Uebergang ist nicht noetig wenn unsichtbar */
    opacity: 0;
}


/* ---- Submit-Button ---- */
.og-form__submit {
    display: block;
    width: 100%;
    margin-top: var(--og-space-md);
    padding: 0.8rem var(--og-space-lg);
    font-family: var(--og-font);
    font-size: var(--og-font-size-md);
    font-weight: 600;
    color: var(--og-accent-text);
    background: var(--og-accent);
    border: none;
    border-radius: var(--og-radius-md);
    box-shadow: var(--og-shadow-sm);
    cursor: pointer;
    min-height: 3rem;
    transition: background var(--og-transition), box-shadow var(--og-transition), transform var(--og-transition);
    letter-spacing: 0.01em;
}

.og-form__submit:hover {
    background: var(--og-accent-hover);
    box-shadow: 0 2px 8px rgba(58,125,94,.25);
}

.og-form__submit:active {
    transform: translateY(1px);
    box-shadow: none;
}

.og-form__submit:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 3px;
}


/* ============================================================
   FEEDBACK-STATES: Vielen Dank! / Bitte pruefen
   ============================================================ */

/* Erfolg — .og-frontend h1 + p (nach Buchung) */
.og-frontend > h1:first-child {
    /* kein Sonderfall noetig — Hauptstil greift */
}

/* Wir wrappen Feedback in divs via PHP? Nein — wir stylen die bekannten
   h1+p / h1+ul Muster mit intelligenten adjacents. */
.og-frontend > h1 + p {
    font-size: var(--og-font-size-md);
    color: var(--og-gray-700);
    margin: 0;
    line-height: var(--og-line-height);
}

/* Erfolgsmeldung (enthalt "Vielen Dank") — Wrapper-Klasse via PHP */
.og-state-success {
    background: var(--og-bg-success);
    border: 1.5px solid var(--og-border-success);
    border-radius: var(--og-radius-lg);
    padding: var(--og-space-lg) var(--og-space-xl);
}

.og-state-success h1 {
    color: var(--og-color-success);
}

.og-state-success p {
    color: var(--og-color-success);
    opacity: 0.85;
}

/* Fehlermeldung (Bitte pruefen) */
.og-state-error {
    background: var(--og-bg-error);
    border: 1.5px solid var(--og-border-error);
    border-radius: var(--og-radius-lg);
    padding: var(--og-space-lg) var(--og-space-xl);
}

.og-state-error h1 {
    color: var(--og-color-error);
}

.og-state-error ul {
    margin: var(--og-space-sm) 0 0;
    padding-left: var(--og-space-lg);
}

.og-state-error ul li {
    color: var(--og-color-error);
    margin-bottom: var(--og-space-xs);
    font-size: var(--og-font-size-sm);
}

/* Ausgebuchter Anlass / kein Formular */
.og-frontend > p {
    font-size: var(--og-font-size-md);
    color: var(--og-gray-600);
    margin: var(--og-space-sm) 0 0;
}


/* ============================================================
   EVENT-UEBERSICHT — .og-overview / .og-card
   ============================================================ */
.og-overview {
    display: grid;
    gap: var(--og-space-lg);
    padding: var(--og-space-xs) 0;
    /* Semantische ul — Browser-Standardstile zuruecksetzen */
    list-style: none;
    margin: 0;
}

@media (min-width: 40rem) {
    .og-overview {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }
}

/* li als Grid-Item: volle Hoehe, kein Eigenstil */
.og-overview > li {
    display: contents;
}

/* Karte */
.og-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--og-gray-200);
    border-radius: var(--og-radius-xl);
    overflow: hidden;
    box-shadow: var(--og-shadow-sm);
    transition: box-shadow var(--og-transition), transform var(--og-transition), border-color var(--og-transition);
}

.og-card:hover {
    box-shadow: var(--og-shadow-md);
    border-color: var(--og-gray-300);
    transform: translateY(-2px);
}

/* Bild-Bereich in der Karte */
.og-card-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--og-gray-100);
    line-height: 0;
    flex-shrink: 0;
}

.og-card-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
}

.og-card:hover .og-card-thumbnail img {
    transform: scale(1.03);
}

/* Karten-Content */
.og-card > h2,
.og-card > p,
.og-card > .og-status,
.og-card > form,
.og-card > a,
.og-card__body > h2,
.og-card__body > p,
.og-card__body > .og-status,
.og-card__body > form,
.og-card__body > a {
    padding-inline: var(--og-space-lg);
}

.og-card > h2:first-of-type,
.og-card__body > h2:first-of-type {
    padding-top: var(--og-space-md);
    margin: 0 0 var(--og-space-xs);
    font-family: inherit;
    font-size: var(--og-font-size-lg);
    font-weight: 700;
    color: var(--og-gray-900);
    line-height: 1.35;
}

.og-card > p,
.og-card__body > p {
    margin: 0 0 var(--og-space-sm);
    font-size: var(--og-font-size-sm);
    color: var(--og-gray-600);
    line-height: 1.5;
}

/* Status-Badge */
.og-status {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    margin: 0 0 var(--og-space-md) var(--og-space-lg);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2rem;
    background: var(--og-gray-100);
    color: var(--og-gray-600);
}

/* Status-Farben via Klassen, die PHP via Wrapper setzen koennte; ohne Klasse: neutrale Farbe */
/* Offen */
.og-card:has(.og-status--offen) .og-status,
.og-status--offen {
    background: #e8f5ec;
    color: var(--og-color-offen);
}

/* Ausgebucht */
.og-card:has(.og-status--voll) .og-status,
.og-status--voll {
    background: #fdf0ea;
    color: var(--og-color-voll);
}

/* CTA-Button auf der Karte */
.og-card > a.button,
.og-card a.og-cta,
.og-card__body > a.button,
.og-card__body a.og-cta {
    display: block;
    margin: auto var(--og-space-lg) var(--og-space-lg);
    padding: 0.65rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--og-accent-text);
    background: var(--og-accent);
    border-radius: var(--og-radius-md);
    min-height: 2.75rem;
    line-height: 1.5;
    transition: background var(--og-transition), box-shadow var(--og-transition);
}

.og-card > a.button:hover,
.og-card a.og-cta:hover,
.og-card__body > a.button:hover,
.og-card__body a.og-cta:hover {
    background: var(--og-accent-hover);
    box-shadow: 0 2px 8px rgba(58,125,94,.22);
}

.og-card > a.button:focus-visible,
.og-card a.og-cta:focus-visible,
.og-card__body > a.button:focus-visible,
.og-card__body a.og-cta:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 3px;
}

/* Body-Wrapper (Flex-Layouts left/right/alternate) */
.og-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* verhindert Ueberlauf bei langen Woertern */
}

/* ---- Featured-Image-Positionen ------------------------------------------ */

/*
 * top (Standard): Bild oben, Body darunter — bestehende Spalten-Anordnung.
 * Auf allen Viewport-Breiten gestapelt; kein Extra-Stil noetig.
 */

/*
 * left / right / alternate: Bild und Body nebeneinander (Flex-row).
 * Mobile-first: unter 36rem immer gestapelt (Bild oben).
 */
@media (min-width: 36rem) {
    .og-card--img-left,
    .og-card--img-right {
        flex-direction: row;
        /* Grid-Spalten-Beschraenkung aufheben: Karte nimmt volle Breite ein */
        grid-column: 1 / -1;
        align-items: stretch;
    }

    .og-card--img-left {
        flex-direction: row;
    }

    .og-card--img-right {
        flex-direction: row-reverse;
    }

    /* Bild-Bereich seitlich: feste Breite, kein aspect-ratio erzwungen */
    .og-card--img-left .og-card-thumbnail,
    .og-card--img-right .og-card-thumbnail {
        flex: 0 0 40%;
        max-width: 40%;
        width: auto;
        aspect-ratio: unset;
        align-self: stretch;
    }

    .og-card--img-left .og-card-thumbnail img,
    .og-card--img-right .og-card-thumbnail img {
        height: 100%;
        min-height: 12rem;
    }
}

/* Leerer Zustand */
.og-overview + p,
.og-overview ~ p {
    color: var(--og-gray-600);
    font-size: var(--og-font-size-md);
}


/* ============================================================
   UEBERSICHT — ZEILEN-LAYOUT (Amelia-Style)
   .og-row: Datums-Block | Thumbnail | Body | Details-Button
   ============================================================ */

/* Zeilen-Container: override des alten Grid-Layouts */
.og-overview {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.og-overview > li {
    display: block;
    border-bottom: 1px solid var(--og-gray-200);
}

.og-overview > li:first-child {
    border-top: 1px solid var(--og-gray-200);
}

/* Screenreader-only utility */
.og-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Zeile */
.og-row {
    position: relative; /* Stacking-Kontext fuer das stretched-link-Overlay */
    display: flex;
    align-items: center;
    gap: var(--og-space-md);
    padding: var(--og-space-md) var(--og-space-md);
    background: #fff;
    cursor: pointer;
    transition: background var(--og-transition);
}

.og-row:hover {
    background: var(--og-gray-50);
}

.og-row:hover .og-row__details-btn {
    background: var(--og-accent);
    color: var(--og-accent-text);
}

/*
 * Stretched-Link-Overlay: Das ::after des Details-Buttons spannt sich ueber
 * die gesamte Zeile und macht sie ohne JS klickbar.
 * Der Button bleibt ein echter <button> — Fokus, Keyboard und Screenreader
 * sind unveraendert. Kein role/tabindex auf .og-row noetig.
 */
.og-row__details-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1; /* ueber den Zeilen-Inhalten, unter z-index:2-Elementen */
    cursor: pointer;
}

/* ---- Datums-Block links ---- */
.og-row__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 4.5rem;
    min-width: 4.5rem;
    min-height: 4rem;
    text-align: center;
    padding: var(--og-space-sm) var(--og-space-xs);
    background: var(--og-gray-50);
    border: 1px solid var(--og-gray-200);
    border-radius: var(--og-radius-md);
}

/* Leerer Datums-Block ohne Datum und ohne Uhrzeit: nicht rendern */
.og-row__date--empty {
    background: transparent;
    border-color: transparent;
}

/* Datums-Block mit nur Uhrzeit: zentriert, etwas schmaler */
.og-row__date--time-only {
    justify-content: center;
    min-height: 3rem;
}

.og-row__day {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--og-gray-900);
}

/* Platzhalter-Strich wenn kein Datum */
.og-row__day--placeholder {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--og-gray-300);
}

.og-row__month {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--og-accent);
    line-height: 1.2;
    margin-top: 0.15em;
}

.og-row__time {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--og-gray-600);
    line-height: 1.2;
    margin-top: 0.2em;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Einzelne Uhrzeit ohne Datum: etwas groesser */
.og-row__time--standalone {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--og-gray-700);
    margin-top: 0;
}

/* ---- Thumbnail in der Zeile ---- */
.og-row__thumb {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--og-radius-md);
    overflow: hidden;
    background: var(--og-gray-100);
    line-height: 0;
    flex-shrink: 0;
}

.og-row__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.og-row:hover .og-row__thumb img {
    transform: scale(1.04);
}

/* ---- Body (Titel + Badge) ---- */
.og-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.og-row__title {
    margin: 0;
    font-family: inherit;
    font-size: var(--og-font-size-md);
    font-weight: 600;
    color: var(--og-gray-900);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status-Badge in Zeile: kompakt */
.og-row__body .og-status {
    margin: 0;
    font-size: 0.6875rem;
    padding: 0.2rem 0.55rem;
    align-self: flex-start;
}

/* ---- Details-Button rechts ---- */
.og-row__actions {
    flex-shrink: 0;
}

.og-row__details-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-accent);
    background: transparent;
    border: 1.5px solid var(--og-accent);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.5rem;
    transition: background var(--og-transition), color var(--og-transition), box-shadow var(--og-transition);
    white-space: nowrap;
}

.og-row__details-btn:hover {
    background: var(--og-accent);
    color: var(--og-accent-text);
    box-shadow: 0 2px 6px rgba(58, 125, 94, 0.2);
}

.og-row__details-btn:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 3px;
}

/* Mobil: Thumbnails und Details-Button anpassen */
@media (max-width: 29.99rem) {
    .og-row {
        gap: var(--og-space-sm);
        padding: var(--og-space-sm) var(--og-space-sm);
    }

    .og-row__title {
        white-space: normal;
    }

    .og-row__thumb {
        flex: 0 0 3rem;
        width: 3rem;
        height: 3rem;
    }

    .og-row__date {
        flex: 0 0 3.5rem;
        min-width: 3.5rem;
    }

    .og-row__day {
        font-size: 1.375rem;
    }

    .og-row__details-btn {
        padding: 0.4rem 0.625rem;
        font-size: 0.75rem;
    }
}


/* ============================================================
   DETAIL-MODAL — .og-modal
   ============================================================ */

/* Wrapper (das ganze overlay + karte) */
.og-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end; /* mobile: sheet von unten */
    justify-content: center;
}

.og-modal[hidden] {
    display: none;
}

/* Verdunklung hinter der Karte */
.og-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

/* Karte */
.og-modal__card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--og-radius-xl) var(--og-radius-xl) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 38rem;
    max-height: 92dvh;
    max-height: 92vh; /* Fallback fuer alte Browser */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Desktop: zentriert, nicht als Bottom-Sheet */
@media (min-width: 40rem) {
    .og-modal {
        align-items: center;
    }

    .og-modal__card {
        border-radius: var(--og-radius-xl);
        box-shadow: 0 8px 48px rgba(0, 0, 0, 0.22);
        max-height: 90dvh;
        max-height: 90vh;
    }
}

/* Schliessenbutton (X) — absolut oben rechts mit ausreichend Abstand */
.og-modal__close {
    position: absolute;
    top: var(--og-space-md);
    right: var(--og-space-md);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid var(--og-gray-300);
    border-radius: 50%;
    cursor: pointer;
    color: var(--og-gray-700);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background var(--og-transition), color var(--og-transition), box-shadow var(--og-transition);
    padding: 0;
}

.og-modal__close svg {
    width: 1rem;
    height: 1rem;
}

.og-modal__close:hover {
    background: #fff;
    color: var(--og-gray-900);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.og-modal__close:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 2px;
}

/* Hero-Bild */
.og-modal__hero {
    flex-shrink: 0;
    width: 100%;
    max-height: 13rem;
    overflow: hidden;
    background: var(--og-gray-100);
    line-height: 0;
}

.og-modal__hero img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 13rem;
    object-fit: cover;
}

/* Scrollbarer Body */
.og-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--og-space-lg) var(--og-space-lg) var(--og-space-md);
    overscroll-behavior: contain;
}

/*
 * Kein Hero: oberes Padding erhoehen, damit der Inhalt nicht unter
 * den absolut positionierten X-Button faellt (2.25rem Button + 1rem Abstand = 3.25rem
 * plus Spielraum = ~4rem Platz gewaehrleistet durch erhoehtes padding-top).
 */
.og-modal__card--no-hero .og-modal__body {
    padding-top: calc(var(--og-space-lg) + 2.5rem);
}

/* Header: Datums-Block + Text nebeneinander */
.og-modal__header {
    display: flex;
    align-items: flex-start;
    gap: var(--og-space-md);
    margin-bottom: var(--og-space-lg);
}

/* Datums-Block im Modal: groesser als in der Zeile */
.og-modal__date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 4.5rem;
    min-width: 4.5rem;
    min-height: 5rem;
    padding: var(--og-space-sm) var(--og-space-sm);
    background: var(--og-gray-50);
    border: 1px solid var(--og-gray-200);
    border-radius: var(--og-radius-md);
    text-align: center;
}

.og-modal__date-block .og-row__day {
    font-size: 2.25rem;
}

.og-modal__date-block .og-row__month {
    font-size: 0.75rem;
}

/* Nur-Uhrzeit-Datums-Block im Modal */
.og-modal__date-block--time-only {
    min-height: 3.5rem;
}

/* Titel + Adresse + Badge */
.og-modal__header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--og-space-sm);
    /* Sicherstellen, dass text nicht hinter X-Button verschwindet,
       wenn kein Hero vorhanden (wird durch padding-top im body abgedeckt). */
}

.og-modal__title {
    margin: 0;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--og-gray-900);
    line-height: 1.25;
}

.og-modal__address {
    display: flex;
    align-items: flex-start;
    gap: var(--og-space-xs);
    margin: 0;
    font-size: var(--og-font-size-sm);
    color: var(--og-gray-600);
    line-height: 1.45;
}

.og-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.1em;
    color: var(--og-gray-400);
    vertical-align: middle;
}

/* Status-Badge im Modal Header */
.og-modal__header-text .og-status {
    align-self: flex-start;
    margin: 0;
}

/* Veranstaltungs-Informationen */
.og-modal__section {
    border-top: 1px solid var(--og-gray-200);
    padding-top: var(--og-space-lg);
    margin-top: var(--og-space-md);
}

.og-modal__section-title {
    margin: 0 0 var(--og-space-md);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--og-gray-400);
}

.og-modal__meta {
    margin: 0 0 var(--og-space-sm);
    font-size: var(--og-font-size-sm);
    color: var(--og-gray-700);
    line-height: 1.55;
}

.og-modal__meta strong {
    font-weight: 600;
    color: var(--og-gray-900);
}

/* Beschreibung: post_content gerendert */
.og-modal__description {
    font-size: var(--og-font-size-sm);
    color: var(--og-gray-700);
    line-height: var(--og-line-height);
}

.og-modal__description p {
    margin: 0 0 var(--og-space-sm);
}

.og-modal__description p:last-child {
    margin-bottom: 0;
}

/* Footer */
.og-modal__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--og-space-md);
    padding: var(--og-space-md) var(--og-space-lg);
    border-top: 1.5px solid var(--og-gray-200);
    background: var(--og-gray-50);
}

/* Abbrechen-Button (sekundaer, Outline) */
.og-modal__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-gray-600);
    background: transparent;
    border: 1.5px solid var(--og-gray-300);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.75rem;
    transition: background var(--og-transition), border-color var(--og-transition), color var(--og-transition);
}

.og-modal__cancel:hover {
    background: var(--og-gray-100);
    border-color: var(--og-gray-400);
    color: var(--og-gray-900);
}

.og-modal__cancel:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 2px;
}

/* Anmelden-CTA: aktiv (Akzentfarbe, weisser Text) */
.og-modal__cta.og-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem var(--og-space-lg);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    color: var(--og-accent-text);
    background: var(--og-accent);
    border: none;
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.75rem;
    transition: background var(--og-transition), box-shadow var(--og-transition);
}

.og-modal__cta.og-cta:hover {
    background: var(--og-accent-hover);
    box-shadow: 0 2px 10px rgba(58, 125, 94, 0.3);
}

.og-modal__cta.og-cta:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 3px;
}

/* Anmelden-CTA: disabled (Anmeldung noch nicht moeglich / ausgebucht) */
.og-modal__cta--disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem var(--og-space-lg);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-gray-400);
    background: var(--og-gray-100);
    border: 1.5px solid var(--og-gray-200);
    border-radius: var(--og-radius-md);
    cursor: not-allowed;
    min-height: 2.75rem;
    user-select: none;
}

/* Body-Scroll sperren wenn Modal offen */
body.og-modal-open {
    overflow: hidden;
}


/* ============================================================
   MANAGE-ANSICHT — Meine Anmeldungen
   ============================================================ */

/* Der Manage-Bereich nutzt die gleichen .og-card Stile.
   Zusaetzlich: Stornieren-Button dezent sekundaer/rot. */

/* Stornieren-Button */
.og-card form button.og-form__cancel {
    display: inline-block;
    margin: 0 var(--og-space-lg) var(--og-space-lg);
    padding: 0.4rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-color-error);
    background: transparent;
    border: 1.5px solid var(--og-color-error);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.5rem;
    transition: background var(--og-transition), color var(--og-transition), box-shadow var(--og-transition);
    opacity: 0.85;
}

.og-card form button.og-form__cancel:hover {
    background: var(--og-bg-error);
    opacity: 1;
}

.og-card form button.og-form__cancel:focus-visible {
    outline: 3px solid var(--og-color-error);
    outline-offset: 2px;
    opacity: 1;
}

/* Manage-Ansicht: Uebersicht-Wrapper erbt grid */
.og-frontend .og-overview {
    max-width: 100%;
}

/* Manage-Titel */
.og-frontend > h1:has(+ .og-card),
.og-frontend > h1:has(+ .og-overview) {
    margin-bottom: var(--og-space-lg);
}

/* ============================================================
   ANMELDUNG AENDERN — .og-manage-edit (details/summary)
   ============================================================ */

/* details-Element als aufklappbarer Bereich */
.og-manage-edit {
    margin: var(--og-space-md) var(--og-space-lg) var(--og-space-lg);
    border: 1.5px solid var(--og-gray-300);
    border-radius: var(--og-radius-md);
    background: var(--og-gray-50);
}

.og-manage-edit__summary {
    padding: var(--og-space-sm) var(--og-space-md);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-gray-700);
    cursor: pointer;
    list-style: none; /* entfernt Standard-Dreieck in Firefox */
    user-select: none;
}

.og-manage-edit__summary::-webkit-details-marker {
    display: none; /* entfernt Standard-Dreieck in Chrome/Safari */
}

.og-manage-edit__summary::before {
    content: '+ ';
    color: var(--og-accent);
}

.og-manage-edit[open] > .og-manage-edit__summary::before {
    content: '- ';
}

.og-manage-edit__summary:focus-visible {
    outline: 2px solid var(--og-accent);
    outline-offset: 2px;
    border-radius: var(--og-radius-sm);
}

.og-manage-edit__body {
    border-top: 1px solid var(--og-gray-200);
    padding: var(--og-space-md) var(--og-space-xs) var(--og-space-xs);
}

/* Das og-form im Edit-Bereich: kein eigener Rahmen noetig */
.og-manage-edit .og-form {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* Submit-Button im Edit-Formular: primaer (gruen/akzent), NICHT rot wie Stornieren */
.og-manage-edit .og-form__submit {
    color: var(--og-accent-text);
    background: var(--og-accent);
    border-color: var(--og-accent);
    opacity: 1;
}

.og-manage-edit .og-form__submit:hover {
    background: var(--og-accent-hover);
    border-color: var(--og-accent-hover);
}