/* ===========================================================================
   site.css - Struktur und Layout
   Alle Farben, Schriften und Abstände kommen aus theme.css.
   ========================================================================= */

/* ------------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, picture, svg { display: block; max-width: 100%; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--font-heading);
    /* Die Hauptseite setzt Überschriften auf Gewicht 500, nicht auf den
       Browser-Standard 700. Ohne diese Zeile wirken sie deutlich schwerer. */
    font-weight: var(--fw-heading);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    margin: 0 0 var(--space-4);
}

p { margin: 0 0 var(--space-4); }

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.main { flex: 1 0 auto; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--color-accent);
    color: var(--color-on-accent);
    padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Wie auf der Hauptseite: fett, px-6 py-3, ab 1024px px-8 py-4. */
.button {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-on-accent);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius);
    font-weight: var(--fw-bold);
    line-height: 1.25rem;
    transition: background var(--transition);
}
@media (min-width: 1024px) {
    .button { padding: var(--space-4) var(--space-6); }
}
.button:hover { background: var(--color-accent-hover); color: var(--color-on-accent); text-decoration: none; }
.button__arrow {
    display: inline-block;
    margin-left: var(--space-2);
    transition: transform var(--transition);
}
.button:hover .button__arrow { transform: translateX(3px); }

/* Gedeckte Variante, wie der Kontaktknopf in der Fusszeile der Hauptseite:
   Seitenfarbe auf der helleren Fusszeile, eckig, mit dünnem Linienpfeil.
   Abstände und Höhe übernimmt sie von .button (mobil 44px hoch, 24px seitlich). */
.button--dark {
    display: inline-flex;
    align-items: center;
    gap: 1.125rem;
    font-size: 1rem;   /* erbt sonst ab 1024px die 18px des Fliesstexts */
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 0;
}
.button--dark:hover { background: var(--color-bg); color: var(--color-text); }
.button__line-arrow {
    display: block;
    flex: none;
    width: 14px;
    height: 6px;
    transition: transform var(--transition);
}
.button:hover .button__line-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------- Kopfzeile */
/* Wie auf der Hauptseite: mobil ein schlanker, klebender Kopf mit
   halbtransparentem Grund, ab 1024px ein statischer, luftiger Kopf ohne
   Linie und ohne Schatten. */
.site-header {
    background: color-mix(in srgb, var(--header-bg) 80%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--header-text);
    border-bottom: var(--header-border);
    box-shadow: var(--header-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .site-header { background: var(--header-bg); }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-height-sm);
    /* Mobil sitzt die Kopfzeile näher am Rand als der Inhalt darunter,
       genau wie auf der Hauptseite. */
    padding-inline: var(--header-pad-inline);
}

.site-header__brand { display: flex; align-items: center; }
.site-header__logo {
    width: var(--logo-width);
    height: var(--logo-height);
    color: var(--header-text);   /* der Schriftzug nutzt currentColor */
}
@media (min-width: 1024px) {
    .site-header__logo { width: var(--logo-width-lg); }
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;   /* Rastermass 9px wie auf der Hauptseite gemessen */
    /* Liegt über dem geöffneten Menü-Panel, beide sind Geschwister. */
    position: relative;
    z-index: 130;
    width: 44px; height: 44px;
    /* Die Balken enden gut 8px innerhalb des Kopfzeilenrands, wie gemessen. */
    margin-right: -2px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle__bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--header-text);
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobiles Menü: rechtes Overlay über 5/6 der Fensterbreite, dahinter die
   unscharf gezeichnete Seite. Die Kopfzeile wird dabei durchsichtig
   geschaltet, damit nur noch das Schliesskreuz darüber liegt. */
.site-nav {
    display: none;
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;   /* ohne dvh verschwände die Schaltfläche unter der Browserleiste */
    z-index: 110;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.site-nav.is-open {
    display: flex;
    justify-content: flex-end;
}

.site-nav__panel {
    width: var(--nav-panel-width);
    height: 100%;
    background: var(--header-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--nav-panel-pad);
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.site-nav__link {
    display: block;
    padding: var(--nav-row-gap) 0;
    color: var(--header-link);
    font-size: var(--fs-nav-mobile);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}
.site-nav__link:hover { color: var(--color-accent); text-decoration: none; }

/* Die Kontaktschaltfläche sitzt unten im Panel, gedeckt statt gold. */
.site-nav__cta {
    align-self: flex-start;
    margin-top: auto;
    background: var(--color-surface);
    color: var(--header-link);
    padding: var(--space-3) var(--space-5);
    border-radius: 0;   /* im Menü der Hauptseite hat der Knopf eckige Ecken */
    font-weight: var(--fw-bold);
    line-height: 1.25rem;
    transition: background var(--transition);
}
.site-nav__cta:hover {
    background: var(--color-surface-2);
    color: var(--header-link);
    text-decoration: none;
}
.site-nav__cta .button__arrow { transition: transform var(--transition); }
.site-nav__cta:hover .button__arrow { transform: translateX(3px); }

/* Solange das Menü offen ist, bleibt nur das Schliesskreuz der Kopfzeile
   sichtbar. Die Kopfzeile selbst liegt zwar über dem Panel, zeichnet aber
   nichts und nimmt keine Klicks an. */
body.nav-open { overflow: hidden; }
body.nav-open .site-header {
    z-index: 120;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
    pointer-events: none;
}
body.nav-open .site-header__brand { visibility: hidden; }
/* Das Menü liegt im Kopfzeilen-Element und braucht die Klicks zurück.
   Ein Klick auf die unscharfe Fläche trifft .site-nav selbst und schliesst. */
body.nav-open .site-nav,
body.nav-open .nav-toggle { pointer-events: auto; }

/* Der Umschaltpunkt liegt bei 1024px, wie das lg: der Hauptseite. */
@media (min-width: 1024px) {
    .site-header {
        position: static;
        background: var(--header-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .site-header__inner {
        min-height: 0;
        padding-block: var(--header-pad);
        padding-inline: var(--container-pad);
    }
    .nav-toggle { display: none; }
    .site-nav {
        display: block;
        position: static;
        /* Ohne das Zurücksetzen bliebe die Kopfzeile fensterhoch. */
        height: auto;
        inset: auto;
        z-index: auto;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .site-nav__panel {
        width: auto;
        height: auto;
        background: none;
        display: block;
        overflow: visible;
        padding: 0;
    }
    .site-nav__cta { display: none; }
    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--nav-gap);
        padding: 0;
    }
    .site-nav__link {
        font-size: var(--fs-nav);
        font-weight: var(--fw-nav);
        /* Oben 5px, unten 3px: so steht die Schrift mittig zum Logo und der
           Unterstrich 8px unter der Grundlinie, wie auf der Hauptseite.
           Vorher sass beides 3px bzw. 2px zu hoch. */
        padding: 5px 0 3px;
        border-bottom: 2px solid transparent;
    }
    .site-nav__link.is-active {
        color: var(--header-link-active);
        border-bottom-color: var(--color-accent);
    }
}

/* ------------------------------------------------------------- Seitenkopf */
.page-head {
    padding-block: var(--space-7) var(--space-6);
}
/* 16px unter dem Titel wie auf den Unterseiten der Hauptseite, gemessen von
   der Grundlinie bis zur Versalhöhe der nächsten Zeile (29px). */
.page-head__title { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.page-head__lead {
    /* Grösse und Farbe wie der Fliesstext der Hauptseite: reines Weiss. */
    color: var(--color-text);
    max-width: 62ch;
    margin-bottom: 0;
}
.page-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    margin-bottom: var(--space-4);
}
.page-head__meta .dot { opacity: 0.6; }

/* Brotkrumen wie auf den Unterseiten der Hauptseite: 14px fett, "Home"
   weiss, dünner Chevron, aktueller Eintrag im eigenen Gold. Eigene
   Zeilenhöhe, damit der Abstand zum Titel nicht vom Fliesstext abhängt,
   der ab 1024px grösser wird. */
.breadcrumb {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    line-height: 1.25rem;
    margin-bottom: var(--breadcrumb-gap);
}
.breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
}
.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.breadcrumb__link { color: var(--color-text); }
.breadcrumb__link:hover { color: var(--color-accent); text-decoration: none; }
.breadcrumb__sep {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text);
}
.breadcrumb__current { color: var(--color-accent); }

/* Ab 1024px wie auf der Hauptseite: Brotkrume 16px statt 14px, mehr Luft
   über der Brotkrume, zwischen Brotkrume und Titel und unter dem Titel.
   Gemessen bei 1920px, der Umschaltpunkt 1024px ist eine Annahme. */
@media (min-width: 1024px) {
    .page-head { padding-top: var(--page-head-pad-top-lg); }
    .breadcrumb {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: var(--breadcrumb-gap-lg);
    }
    .page-head__title + .page-head__lead { margin-top: var(--title-lead-gap-lg); }
}

.empty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}
.empty p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Event-Übersicht */
.event-list { padding-bottom: var(--space-7); }
.event-list .empty { margin-bottom: 0; }

.event-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    gap: var(--card-gap);
}
/* Der Container geht bis 1920px. Ohne Begrenzung entstünden dort fünf und
   mehr Spalten, in denen die Karten verloren wirken. */
@media (min-width: 1500px) {
    .event-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.event-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.event-card__link:hover {
    text-decoration: none;
    color: inherit;
    border-color: var(--color-border);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.event-card__media {
    display: block;
    aspect-ratio: var(--card-ratio);
    overflow: hidden;
    background: var(--color-surface);
}
/* <picture> ist nur ein Container ohne eigene Höhe. Ohne diese Regel
   löst height:100% am <img> zu auto auf und die Kachel bleibt unten leer. */
.event-card__media picture { display: block; width: 100%; height: 100%; }
.event-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.event-card__link:hover .event-card__img { transform: scale(1.04); }
.event-card__img--placeholder { display: block; width: 100%; height: 100%; }

.event-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    flex: 1;
}
.event-card__date {
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--color-accent);
    font-weight: var(--fw-medium);
}
.event-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}
.event-card__text {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}
.event-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-tiny);
    color: var(--color-text-muted);
}

/* ------------------------------------------------------------- Fotogalerie */
.gallery {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
    gap: var(--tile-gap);
}

.gallery__item { margin: 0; }

.gallery__link {
    display: block;
    position: relative;
    aspect-ratio: var(--tile-ratio);
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: zoom-in;
}
.gallery__link:hover { text-decoration: none; }
.gallery__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 0);
    transition: background var(--transition);
}
.gallery__link:hover::after { background: rgb(255 255 255 / 0.10); }

.gallery__link picture { display: block; width: 100%; height: 100%; }

.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery__link:hover .gallery__img { transform: scale(1.03); }

/* ------------------------------------------------------- Event-Blätterung */
.event-pager {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-6);
    margin-top: var(--space-6);
}
.event-pager__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
}
.event-pager__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: inherit;
    min-width: 0;
}
@media (min-width: 600px) {
    .event-pager__link { max-width: 45%; }
}
@media (max-width: 599px) {
    .event-pager__inner { flex-direction: column; gap: var(--space-4); }
    .event-pager__link--next { text-align: left; margin-left: 0; }
}
.event-pager__link:hover { text-decoration: none; }
.event-pager__link--next { text-align: right; margin-left: auto; }
.event-pager__dir {
    font-size: var(--fs-tiny);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--color-text-muted);
}
.event-pager__title { font-weight: var(--fw-medium); }
.event-pager__link:hover .event-pager__title { color: var(--color-accent); }

/* --------------------------------------------------------------- Fusszeile */
.site-footer {
    flex-shrink: 0;
    background: var(--footer-bg);
    color: var(--footer-text);
    margin-top: var(--space-8);
    font-size: var(--fs-body);
}
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* Der Button trägt eigene Farben. Ohne diese Regel gewinnt die allgemeine
   Linkfarbe oben über Spezifität und der Text stünde gold auf gold. */
.site-footer a.button { color: var(--color-on-accent); }
.site-footer a.button:hover { color: var(--color-on-accent); text-decoration: none; }
.site-footer a.button--dark,
.site-footer a.button--dark:hover { color: var(--color-text); }

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-5);
}
@media (min-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
        padding-block: var(--space-7);
    }
}

.site-footer__logo {
    width: 80px;
    height: auto;
    color: var(--footer-text);
    margin-bottom: var(--space-5);
}
@media (min-width: 1024px) {
    .site-footer__logo { width: 120px; }
}

.site-footer__name {
    font-weight: var(--fw-bold);
    margin-bottom: 0;   /* Hauptseite: Adresse folgt ohne Zusatzabstand */
}
.site-footer__address {
    font-style: normal;
    margin-bottom: var(--space-5);
}
.site-footer__contact { margin-bottom: 0; }
.site-footer__contact a { font-weight: var(--fw-medium); }

/* Kleine Gold-Überschrift, wie .subtitle auf der Hauptseite. */
.site-footer__subtitle {
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-bold);
    color: var(--footer-heading);
    margin-bottom: var(--space-2);
}
.site-footer__col--kontakt { max-width: 30rem; }
.site-footer__text {
    margin-bottom: 0;
}
.site-footer__col--kontakt .button { margin-top: var(--space-6); }

/* Die Hauptseite setzt in der Fusszeile nirgends eine Schriftgrösse, alles
   erbt die 16px von body. Auch die untere Leiste, sie war hier zu klein.
   Die Trennlinie trägt dort die dunklere Seitenfarbe, nicht ein helles
   Transparenzweiss. */
.site-footer__baseline {
    border-top: 1px solid var(--color-bg);
}
/* Mobil stehen alle Links untereinander in einem Raster von 36px, auch
   Impressum und Datenschutz, wie auf der Hauptseite. Ab 768px eine Zeile,
   die Rechtliches nach rechts schiebt. Der genaue Umschaltpunkt der
   Hauptseite liegt zwischen 393 und 820px, 768px ist eine Annahme. */
.site-footer__baseline-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--nav-gap);
    padding-block: var(--space-4);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3) var(--nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 48rem) {
    .site-footer__baseline-inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .site-footer__links {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
.site-footer__links a { font-weight: var(--fw-medium); }
.site-footer__links a { color: var(--footer-text); }
.site-footer__links a:hover { color: var(--color-accent); }

/* ----------------------------------------------------------- Embed-Modus */
/* Die Seite läuft in einem iframe auf www.incendia.ch: kein eigener
   Seitenkopf, keine Fusszeile, kein zusätzlicher Aussenabstand.            */
.is-embed { min-height: 0; }
.is-embed .main { padding-top: 0; }
.is-embed .page-head { padding-top: var(--space-5); }
.is-embed .container { padding-inline: 0; }
.is-embed .gallery { margin-bottom: var(--space-5); }
.is-embed .event-pager { padding-bottom: var(--space-4); }

/* ------------------------------------------------------ Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   Lightbox
   Das Markup wird von site.js erzeugt. Ohne JavaScript öffnet der Klick
   auf eine Kachel schlicht das grosse Bild.
   ========================================================================= */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lightbox-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    /* Sichere Bereiche auf Geräten mit Notch berücksichtigen. */
    padding: max(env(safe-area-inset-top), 0px) max(env(safe-area-inset-right), 0px)
             max(env(safe-area-inset-bottom), 0px) max(env(safe-area-inset-left), 0px);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* Seitenhintergrund nicht mitscrollen, solange die Lightbox offen ist. */
body.lightbox-open { overflow: hidden; }

.lightbox__stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 0.5rem 4.5rem;
}
@media (min-width: 700px) {
    .lightbox__stage { padding: 4rem 5rem 4.5rem; }
}

.lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

/* Ein Foto wird nie über seine eigene Pixelgrösse hinaus gestreckt.
   Die beiden Variablen setzt site.js pro Bild aus data-width/data-height,
   multipliziert mit 'max_upscale' aus der Konfiguration. Ohne JavaScript
   bleiben die Vorgabewerte stehen und es gilt wie bisher nur die Bühne.

   Nötig ist das, weil ein <img> mit srcset und sizes seine Eigengrösse
   aus dem sizes-Wert ableitet, nicht aus der Datei: bei sizes="100vw"
   beansprucht selbst ein 400 Pixel breites Foto die volle Fensterbreite
   und wird entsprechend unscharf hochgerechnet. */
.lightbox__img {
    max-width: min(100%, var(--foto-max-breite, 100%));
    max-height: min(calc(100vh - 9rem), var(--foto-max-hoehe, 100vh));
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity 120ms linear;
}
.lightbox.is-loading .lightbox__img { opacity: 0.35; }

.lightbox__caption {
    color: var(--lightbox-text);
    font-size: var(--fs-small);
    text-align: center;
    margin-top: var(--space-3);
    max-width: 70ch;
    padding-inline: var(--space-4);
}
.lightbox__caption:empty { display: none; }

/* ---- Bedienelemente ---- */
.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0.35);
    color: var(--lightbox-ui);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgb(0 0 0 / 0.6); color: var(--lightbox-ui-hover); }

.lightbox__close {
    top: 0.75rem; right: 0.75rem;
    width: 44px; height: 44px;
    font-size: 1.5rem;
    line-height: 1;
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
}
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 699px) {
    /* Auf dem Handy wird gewischt; die Pfeile rücken nach unten. */
    .lightbox__nav {
        top: auto;
        bottom: 0.75rem;
        transform: none;
        width: 44px; height: 44px;
    }
    .lightbox__nav--prev { left: 0.75rem; }
    .lightbox__nav--next { right: 0.75rem; }
}

.lightbox__bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-4) 4rem;
    color: var(--lightbox-ui);
    font-size: var(--fs-tiny);
    pointer-events: none;
}
.lightbox__counter { font-variant-numeric: tabular-nums; }
.lightbox__download {
    color: var(--lightbox-ui);
    pointer-events: auto;
    text-decoration: underline;
}
.lightbox__download:hover { color: var(--lightbox-ui-hover); }
.lightbox__download[hidden] { display: none; }

/* Wischgeste: während des Ziehens folgt das Bild dem Finger. */
.lightbox__figure.is-dragging { transition: none; }

/* =========================================================================
   Passwortschutz
   ========================================================================= */

/* ---- Kachel eines gesperrten Events ---- */
.event-card__locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    height: 100%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}
.event-card__locked svg {
    width: 34px; height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
}
.event-card__locked-text {
    font-size: var(--fs-tiny);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}

.event-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
.event-card__badge svg {
    width: 12px; height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Passwortabfrage ---- */
.lock {
    max-width: 30rem;
    margin: 0 auto var(--space-8);
    padding: var(--space-7) var(--space-5);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.lock__icon {
    width: 44px; height: 44px;
    margin: 0 auto var(--space-4);
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lock__title {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-3);
}
.lock__text {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    margin-bottom: var(--space-5);
}

.lock__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}
.lock__label {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}
.lock__input {
    font: inherit;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    /* Auf iOS zoomt Safari bei Schrift unter 16px in das Feld hinein. */
    font-size: max(1rem, var(--fs-body));
}
.lock__input:focus-visible { border-color: var(--color-accent); }
.lock__submit {
    border: 0;
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-align: center;
}

.lock__error {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent-hover);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-small);
    margin-bottom: var(--space-4);
}
/* Rückfall für Browser ohne color-mix. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .lock__error { background: var(--color-bg); border-color: var(--color-accent); }
}

.lock__hint {
    margin: var(--space-5) 0 0;
    font-size: var(--fs-tiny);
    color: var(--color-text-muted);
}

/* ---- Hinweis auf der freigeschalteten Galerie ---- */
.unlock-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--fs-tiny);
    color: var(--color-text-muted);
}
.unlock-state__text { display: inline-flex; align-items: center; gap: 0.5em; }
.unlock-state__text svg {
    width: 14px; height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.unlock-state__button {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}
.unlock-state__button:hover { color: var(--color-accent-hover); }