/* ==========================================================================
   BBB Mobile / Responsive Feinschliff
   Wird als letzte CSS-Datei geladen - ergaenzt frontend.css und layout.css
   und behebt gezielt Mobile-Brueche. Nichts hier sollte Desktop veraendern.
   ========================================================================== */

/* --- Page-Intro: wiederverwendbare Kopfbereich-Klasse (Headline + Lede) ---
 * Ersetzt diverse inline styles "max-width:60ch;margin:0 auto;text-align:center". */
.page-intro {
    max-width: 60ch;
    margin: 0 auto var(--sp-8);
    text-align: center;
}
.page-intro .lede { margin: 0 auto; }

/* =========================================================================
   Hero: Logo-Visual auf Mobile kleiner, nicht screen-fuellend
   ========================================================================= */
@media (max-width: 720px) {
    .hero__visual {
        aspect-ratio: 1 / 1;
        max-width: 320px;
        margin: 0 auto;
        padding: var(--sp-6);
    }
    .hero__visual-logo { width: min(60%, 220px); }
    .hero__visual-slogan { font-size: var(--fs-18); }
}

/* =========================================================================
   Event-Detail (events_show.php)
   Die bisherigen Inline-Styles werden durch saubere Klassen ersetzt,
   damit das Layout auf Mobile mitspielt (DL stacked, CTA wrapped).
   ========================================================================= */
.event-detail {
    max-width: 820px;
}
.event-detail__title {
    margin-top: var(--sp-4);
}
.event-detail__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sp-3) var(--sp-6);
    margin: var(--sp-6) 0;
}
.event-detail__facts dt {
    font-weight: var(--fw-semibold);
}
.event-detail__facts dd {
    margin: 0;
}
.event-detail__gallery-heading {
    margin-top: var(--sp-8);
}
.event-detail__cta {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
    flex-wrap: wrap;
}
@media (max-width: 520px) {
    /* Fakten (Wann/Wo) stacken: Label oben, Wert drunter */
    .event-detail__facts {
        grid-template-columns: 1fr;
        gap: var(--sp-1) 0;
    }
    .event-detail__facts dt {
        margin-top: var(--sp-3);
        font-size: var(--fs-12);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-muted);
    }
    .event-detail__facts dt:first-of-type {
        margin-top: 0;
    }
    /* CTA-Leiste: Buttons full-width, damit Daumen-freundlich */
    .event-detail__cta .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* =========================================================================
   Meeting-Point Navi-Buttons: Mobile full-width
   ========================================================================= */
@media (max-width: 520px) {
    .meeting-point__actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* =========================================================================
   Event-Card auf Mobile: with-image ordnet Bild oben + Body unten an.
   Bisher: 180px|1fr|auto - auf Mobile gab es kollidierende Spalten.
   ========================================================================= */
@media (max-width: 560px) {
    .event-card {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        padding: var(--sp-4);
    }
    .event-card__date {
        /* Horizontale Datumszeile statt grosse Kachel */
        display: inline-flex;
        align-items: baseline;
        gap: var(--sp-2);
        padding: var(--sp-1) var(--sp-3);
        width: max-content;
    }
    .event-card__day {
        font-size: var(--fs-20);
        line-height: 1.1;
    }
    .event-card__month {
        font-size: var(--fs-11);
        margin-top: 0;
    }
    .event-card--with-image {
        grid-template-columns: 1fr;
    }
    .event-card__image img {
        aspect-ratio: 16 / 9;
    }
    .event-card__cta,
    .event-card__cta .btn {
        width: 100%;
    }
    .event-card__cta .btn {
        justify-content: center;
    }
}

/* =========================================================================
   Kalender-Monatsansicht auf Mobile -> Agenda-Liste
   7-Spalten-Grid ist auf 375px unbenutzbar (Eventnamen werden gekappt).
   Umbauen zu vertikaler Liste: pro Event-Tag eine Zeile mit gross lesbarem
   Datum links und Event-Namen rechts. Tage ohne Events werden ausgeblendet
   (bis auf "Heute"). Vor- und Folgemonats-Tage werden komplett verborgen.
   ========================================================================= */
@media (max-width: 640px) {
    .calendar { border: 0; background: transparent; }
    .calendar__header {
        padding: var(--sp-3) 0;
        background: transparent;
        border-bottom: 1px solid var(--color-border);
        flex-wrap: wrap;
        gap: var(--sp-2);
    }
    .calendar__nav { flex-wrap: wrap; }
    .calendar__nav .btn { flex: 1 1 auto; justify-content: center; }

    .calendar__grid {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        padding: var(--sp-3) 0;
    }
    .calendar__dow { display: none; }
    .calendar__day--other { display: none; }

    /* Tage des aktuellen Monats ohne Events verstecken (bis auf Heute) */
    .calendar__day:not(.calendar__day--today):not(:has(.calendar__event)) {
        display: none;
    }

    .calendar__day {
        aspect-ratio: auto;
        min-height: 0;
        padding: var(--sp-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: var(--sp-3);
        align-items: center;
    }
    .calendar__day--today {
        border-color: var(--color-bordeaux);
        background: color-mix(in srgb, var(--color-gold) 12%, var(--color-surface));
    }
    .calendar__day-num {
        font-family: var(--font-display);
        font-size: var(--fs-24);
        color: var(--color-bordeaux);
        text-align: center;
    }
    .calendar__day--today .calendar__day-num { color: var(--color-bordeaux-dark); }

    /* Event-Chips: kein nowrap mehr, ganze Breite, stapelbar */
    .calendar__event {
        display: block;
        white-space: normal;
        line-height: 1.4;
        padding: var(--sp-1) var(--sp-3);
        font-size: var(--fs-14);
    }
    .calendar__event + .calendar__event { margin-top: 2px; }

    /* Tage ohne Events (nur "Heute" uebrig) bekommen dezenten Hinweis */
    .calendar__day--today:not(:has(.calendar__event))::after {
        grid-column: 2;
        content: "Heute - keine Termine";
        color: var(--color-text-muted);
        font-size: var(--fs-14);
    }
}

/* FallbackFür Browser ohne :has() (alte iOS < 15.4, Firefox < 121):
   Alle Tage werden gezeigt. Optisch weniger gedraengt, aber funktional. */
@supports not (selector(:has(*))) {
    @media (max-width: 640px) {
        .calendar__day { display: grid; }
    }
}

/* =========================================================================
   Subscribe-Box & Anleitungen (calendar.php)
   ========================================================================= */
.subscribe-box__intro {
    flex: 1 1 260px;
    min-width: 0;
}
.subscribe-box__lede {
    margin: var(--sp-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-14);
}
.subscribe-hints__steps {
    padding-left: var(--sp-5);
    margin: var(--sp-1) 0 0;
}
.subscribe-hints__after-steps {
    margin-top: var(--sp-3);
}

@media (max-width: 520px) {
    .subscribe-box { padding: var(--sp-4); }
    .subscribe-box__urlrow {
        flex-direction: column;
        align-items: stretch;
    }
    .subscribe-box__urlrow .btn { width: 100%; }
    .subscribe-box__actions { width: 100%; }
    .subscribe-box__actions .btn { flex: 1 1 calc(50% - var(--sp-2)); justify-content: center; }
}

/* =========================================================================
   Site-Footer Bottom: gleichmaessig umbrechen auf Mobile statt zu quetschen
   ========================================================================= */
@media (max-width: 560px) {
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
        text-align: left;
    }
    .site-footer__tools {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* =========================================================================
   Breadcrumb: auf Mobile kann der Slug-Teil lang werden -> umbrechen
   ========================================================================= */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.breadcrumb > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* =========================================================================
   Admin-Edit-FAB auf Mobile: ueber dem iOS-Safe-Area positionieren, damit
   er nicht unter der Browser-Bottom-Bar verschwindet.
   ========================================================================= */
@supports (padding: env(safe-area-inset-bottom)) {
    .admin-edit-fab {
        bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
    }
    @media (max-width: 640px) {
        .admin-edit-fab {
            bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
        }
    }
}