/* ===========================================================================
   Event-Uploader - Gestaltung der Gaesteseiten
   
   Anmutung nach dem Vorbild klassischer Einladungsseiten: Bordeaux und Altrosa
   auf Weiss, gross gesetzter leichter Fliesstext, Haarlinien statt Ornamente.
   Der "Luxus" entsteht durch Schriftgroesse und Weissraum, nicht durch Deko.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Schriften, selbst gehostet.
   
   Zwei Gruende gegen die Einbindung von Google: der Datenschutz, und dass das
   Netz in einer Veranstaltungslocation Abrufe zu fremden Servern nicht
   zuverlaessig traegt. Alle drei Familien stehen unter der Open Font License.
   
   font-display: swap sorgt dafuer, dass der Text sofort lesbar ist und die
   Schrift nachtraegt - besser als eine Sekunde leere Flaeche auf einem Handy.
   --------------------------------------------------------------------------- */

/* Kyrillisch wird von einer zweiten Schrift unter DEMSELBEN Namen getragen.
   Der Browser waehlt anhand des unicode-range automatisch die passende Datei:
   "Anna" kommt in Great Vibes, "Анна" in Marck Script - beide Schreibschrift,
   ohne dass die Vorlage eine Fallunterscheidung braucht.
   Ohne das faellt der russische Titel auf eine Serifenschrift zurueck, und die
   ganze Anmutung der Seite geht in der zweiten Sprache verloren. */

@font-face {
    font-family: "Great Vibes";
    src: url("/fonts/great-vibes-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

@font-face {
    font-family: "Great Vibes";
    src: url("/fonts/marck-script-cyrillic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/playfair-display-500-cyrillic.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-04FF, U+0500-052F;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/playfair-display-700-cyrillic.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-04FF, U+0500-052F;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("/fonts/nunito-sans-300-cyrillic.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-04FF, U+0500-052F;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("/fonts/nunito-sans-400-cyrillic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-04FF, U+0500-052F;
}

@font-face {
    font-family: "Great Vibes";
    src: url("/fonts/great-vibes-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/playfair-display-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/playfair-display-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("/fonts/nunito-sans-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("/fonts/nunito-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Farben */
    --primary:      #801844;   /* Bordeaux: Ueberschriften, Schaltflaechen */
    --primary-ink:  #ffffff;
    --accent:       #e6a1ac;   /* Altrosa: Linien, Rahmen, Hover */
    --accent-soft:  #e6a1ac7a;
    --bg:           #ffffff;
    --surface:      #ffffff;
    --text:         #222222;
    --muted:        #6b6b6b;
    --success:      #5ca05b;
    --error:        #b00020;

    /* Schriften. Fallbacks sind bewusst artgleich (cursive/serif/sans),
       damit die Seite auch ohne geladene Schriftdateien stimmig bleibt. */
    --font-display: "Great Vibes", "Segoe Script", cursive;
    --font-head:    "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --fs-display: 64px;
    --fs-h2:      50px;
    --fs-h3:      30px;
    --fs-button:  30px;
    --fs-body:    22px;
    --fs-small:   16px;

    --fw-light:   300;
    --fw-medium:  500;
    --fw-bold:    700;

    --lh-display: 1.15;
    --lh-body:    1.4;

    /* Radien nach Bauteil gestaffelt */
    --r-field: 5px;
    --r-card:  10px;
    --r-input: 14px;
    --r-pill:  50px;

    --shadow-soft: 0 1px 20px rgba(0, 0, 0, .08);
    --shadow-lift: 0 10px 30px rgba(0, 0, 0, .15);
    --hairline:    1px solid var(--accent);

    --gap-xs:   10px;
    --gap-s:    20px;
    --gap-m:    40px;   /* auch der Abstand zwischen Formularfeldern */
    --gap-l:    80px;

    --w-max:    1140px;
    --w-text:   68ch;

    --t-color:   color .3s ease, background-color .3s ease, border-color .3s ease;
    --t-tactile: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

@media (max-width: 767px) {
    :root {
        --fs-display: 45px;
        --fs-h2:      30px;
        --fs-h3:      24px;
        --fs-button:  24px;
        --fs-body:    20px;
        --lh-display: 1.2;
        --gap-m:      28px;
        --gap-l:      48px;
    }
}

/* --- Grundlagen --------------------------------------------------------- */

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: var(--lh-body);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 var(--gap-s); color: var(--primary); letter-spacing: 0; }

h1 {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: var(--lh-display);
}

h2 { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.1; }
h3 { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: var(--fw-medium); }

p { margin: 0 0 var(--gap-s); }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; transition: var(--t-color); }
a:hover { color: var(--primary); }

img, video { max-width: 100%; height: auto; }

.wrap {
    max-width: var(--w-max);
    margin: 0 auto;
    padding: 0 var(--gap-s);
}

.prose { max-width: var(--w-text); margin-left: auto; margin-right: auto; }

.center { text-align: center; }
.muted  { color: var(--muted); font-size: var(--fs-small); }
.hidden { display: none !important; }

/* --- Kopfleiste --------------------------------------------------------- */

.topbar {
    background: var(--primary);
    color: var(--primary-ink);
    padding: var(--gap-xs) var(--gap-s);
    text-align: center;
    font-family: var(--font-head);
    font-size: var(--fs-small);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* --- Hero: Foto in Markenfarbe getaucht --------------------------------- */

.hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--gap-l) var(--gap-s);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Das Overlay bindet jedes beliebige Gaestefoto ins Farbschema ein -
   ohne das wirkt ein Schnappschuss im Kopfbereich wie ein Fremdkoerper. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    opacity: .28;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }
.hero--plain { min-height: auto; padding: var(--gap-l) var(--gap-s) var(--gap-m); }
.hero--plain::after { display: none; }

.hero__date {
    font-family: var(--font-head);
    font-size: var(--fs-h3);
    color: var(--primary);
    margin-top: var(--gap-xs);
}

/* --- Abschnitte --------------------------------------------------------- */

.section { padding: var(--gap-l) 0; }
.section--tight { padding: var(--gap-m) 0; }

.rule {
    border: 0;
    border-top: var(--hairline);
    width: 120px;
    margin: var(--gap-m) auto;
}

/* --- Schaltflaechen ----------------------------------------------------- */

.btn {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-ink);
    font-family: var(--font-head);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    border: 0;
    border-radius: var(--r-pill);
    padding: .5em 1.6em;
    cursor: pointer;
    text-decoration: none;
    transition: var(--t-color);
    -webkit-appearance: none;
}

.btn:hover:not(:disabled) { background: var(--accent); color: var(--primary); }

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--ghost {
    background: transparent;
    color: var(--primary);
    border: var(--hairline);
}
.btn--ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--primary); }

.btn--small { font-size: var(--fs-small); padding: .6em 1.4em; font-family: var(--font-body); }

/* --- Formulare ---------------------------------------------------------- */

.field { margin-bottom: var(--gap-m); }

.field label {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    color: var(--primary);
    padding: 0 10px 10px;
}

.field__help { display: block; font-size: var(--fs-small); color: var(--muted); padding: 0 10px 10px; }

.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field textarea,
.field select {
    width: 100%;
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--r-field);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--text);
    transition: var(--t-tactile);
    -webkit-appearance: none;
}

/* Das leichte Anheben beim Fokus macht auf dem Handy spuerbar, welches Feld
   gerade aktiv ist - dort verdeckt die Tastatur oft den halben Bildschirm. */
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.field textarea { min-height: 120px; resize: vertical; }

/* --- Karten und Meldungen ----------------------------------------------- */

.card {
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-soft);
    padding: var(--gap-m) var(--gap-s);
}

.notice {
    border-radius: var(--r-card);
    padding: 16px 20px;
    margin-bottom: var(--gap-s);
    font-size: var(--fs-small);
    border: 1px solid transparent;
}

.notice--error   { background: #fdf2f4; border-color: var(--error);   color: var(--error); }
.notice--success { background: #f2f9f2; border-color: var(--success); color: #2f6b2e; }
.notice--info    { background: var(--accent-soft); border-color: var(--accent); color: var(--primary); }

/* Der Hinweis, der waehrend des Uploads dauerhaft sichtbar bleibt.
   Auf Geraeten ohne Wake-Lock-Unterstuetzung ist er die einzige Verteidigung
   gegen ein einschlafendes Display - deshalb steht er immer da, nicht nur im Fehlerfall. */
.notice--keepawake {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--primary);
    font-size: var(--fs-body);
    text-align: center;
}

/* --- Fusszeile ---------------------------------------------------------- */

.footer {
    border-top: var(--hairline);
    margin-top: var(--gap-l);
    padding: var(--gap-m) var(--gap-s);
    text-align: center;
    font-size: var(--fs-small);
    color: var(--muted);
}

/* --- Bewegung: genau eine Animation ------------------------------------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   Upload-Manager
   =========================================================================== */

.up-fields { margin-bottom: var(--gap-m); }

.up-optional {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-light);
    color: var(--muted);
    margin-left: .6em;
    letter-spacing: 0;
}

/* --- Auswahlfläche ------------------------------------------------------ */

.up-drop {
    border: 1px dashed var(--accent);
    border-radius: var(--r-card);
    padding: var(--gap-m) var(--gap-s);
    text-align: center;
    transition: var(--t-tactile);
}

.up-drop.is-over {
    background: var(--accent-soft);
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.up-drop__hint {
    font-size: var(--fs-small);
    color: var(--muted);
    margin-bottom: var(--gap-s);
}

/* --- Dateiliste --------------------------------------------------------- */

.up-list { list-style: none; margin: var(--gap-s) 0 0; padding: 0; }

.up-item {
    border-bottom: 1px solid var(--accent-soft);
    padding: 14px 4px;
}

.up-item__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-xs);
    font-size: var(--fs-small);
}

/* Lange Dateinamen dürfen die Zeile nicht sprengen - auf dem Handy ist
   ohnehin nur der Anfang lesbar, und die Größe rechts muss sichtbar bleiben. */
.up-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.up-item__size { color: var(--muted); flex: 0 0 auto; }

.up-item__status {
    font-size: var(--fs-small);
    color: var(--muted);
    margin-top: 6px;
    min-height: 1.2em;
}

.up-item--failed .up-item__status { color: var(--error); }
.up-item--done .up-item__status,
.up-item--known .up-item__status { color: var(--success); }

/* --- Fortschrittsbalken ------------------------------------------------- */

.up-bar {
    height: 4px;
    background: var(--accent-soft);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-top: 8px;
}

.up-bar--total { height: 8px; margin-top: 0; }

.up-bar__fill {
    height: 100%;
    width: 0;
    background: var(--primary);
    border-radius: var(--r-pill);
    transition: width .3s ease;
}

.up-item--done .up-bar__fill,
.up-item--known .up-bar__fill { background: var(--success); }
.up-item--failed .up-bar__fill { background: var(--error); }

/* Beim Wiederverbinden zeigt der Balken, dass etwas passiert -
   Stillstand wäre hier das falsche Signal. */
.up-item--retrying .up-bar__fill {
    background: repeating-linear-gradient(
        90deg, var(--accent) 0 12px, var(--primary) 12px 24px
    );
    animation: up-move 1s linear infinite;
}

@keyframes up-move {
    from { background-position: 0 0; }
    to   { background-position: 24px 0; }
}

/* --- Zusammenfassung ---------------------------------------------------- */

.up-summary { margin: var(--gap-m) 0 var(--gap-s); }

.up-summary__text {
    font-family: var(--font-head);
    font-size: var(--fs-h3);
    color: var(--primary);
    text-align: center;
    margin: var(--gap-xs) 0 0;
}

.up-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    justify-content: center;
    align-items: center;
    margin-top: var(--gap-m);
}

/* --- Vorschaubilder auf der Dankeseite ---------------------------------- */

.up-thumbs {
    list-style: none;
    padding: 0;
    margin: var(--gap-s) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.up-thumb {
    aspect-ratio: 1;
    border-radius: var(--r-field);
    overflow: hidden;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-thumb__placeholder { color: var(--primary); font-size: 24px; }

/* ===========================================================================
   Galerie
   =========================================================================== */

.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

@media (min-width: 768px) {
    .gal-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
}

.gal-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--r-field);
    overflow: hidden;
    background: var(--accent-soft);
    cursor: pointer;
    transition: var(--t-tactile);
}

.gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gal-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.gal-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.gal-tile__pending {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-small);
    color: var(--primary);
}

/* Abspielzeichen und Laufzeit liegen auf einem Verlauf, damit sie auch auf
   einem hellen Standbild lesbar bleiben. */
.gal-tile__play,
.gal-tile__time {
    position: absolute;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    pointer-events: none;
}

.gal-tile__play {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(transparent 55%, rgba(0, 0, 0, .35));
}

/* Ein rundes Feld mit Dreieck darin: Auf einem Raster voller Standbilder muss
   ohne Hinsehen erkennbar sein, was sich abspielen lässt. */
.gal-tile__play .ico {
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.gal-tile__time {
    right: 6px;
    bottom: 6px;
    font-family: var(--font-body);
    font-size: 13px;
}

/* --- Grossansicht ------------------------------------------------------- */

.lb {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(20, 4, 10, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Oben die Knöpfe, unten Bildunterschrift und Streifen - dazwischen
       gehört alles dem Bild. */
    padding: 52px 12px 118px;
}

.lb.is-ohne-streifen { padding-bottom: 52px; }

.lb__stage {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb__stage img,
.lb__stage video {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--r-field);
    display: block;
}

.lb__close,
.lb__nav {
    position: absolute;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 12px 18px;
    opacity: .8;
    transition: opacity .2s ease;
}

.lb__close:hover,
.lb__nav:hover { opacity: 1; }

.lb__close {
    top: 8px;
    right: 8px;
    font-size: 34px;
    padding: 12px 18px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb__nav { top: 50%; transform: translateY(-50%); font-size: 44px; }
.lb__nav--prev { left: 4px; }
.lb__nav--next { right: 4px; }

.lb__caption {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: var(--fs-small);
    opacity: .85;
    padding: 0 60px;
}

/* Auf dem Handy sind die Pfeile im Weg - dort wird gewischt. */
@media (max-width: 600px) {
    .lb__nav { display: none; }
    .lb__caption { padding: 0 16px; }
}

/* --- Sprachumschalter --------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-s);
    position: relative;
}

.topbar__title { flex: 0 1 auto; }

/* Rechts abgesetzt, aber im Textfluss - so rutscht er auf schmalen Geraeten
   unter den Titel statt ihn zu ueberdecken. */
.topbar__langs {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

.topbar__lang {
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    border: 0;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 13px;
    letter-spacing: .06em;
    transition: var(--t-color);
}

.topbar__lang:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.topbar__lang.is-active {
    color: var(--primary);
    background: #fff;
}

/* ===========================================================================
   Aufklappbare Hilfe
   
   Mit <details>/<summary> gebaut: Der Browser kann das von sich aus, es
   funktioniert ohne JavaScript und Vorleseprogramme kennen es. Ein eigener
   Nachbau wäre mehr Code und weniger zugänglich.
   =========================================================================== */

.help {
    margin-top: var(--gap-l);
    padding-top: var(--gap-m);
    border-top: var(--hairline);
}

.help__title {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--gap-s);
}

.help__item {
    border-bottom: 1px solid var(--accent-soft);
    padding: 4px 0;
}

.help__q {
    font-family: var(--font-head);
    /* Kleiner als die Überschriften: Fragen sind ganze Sätze und würden in
       30px auf dem Handy zweizeilig brechen — das macht die Liste unruhig. */
    font-size: var(--fs-body);
    line-height: 1.3;
    font-weight: var(--fw-medium);
    color: var(--primary);
    cursor: pointer;
    padding: 14px 34px 14px 4px;
    position: relative;
    list-style: none;
    transition: var(--t-color);
}

/* Das voreingestellte Dreieck wird ersetzt - in beiden Browserfamilien */
.help__q::-webkit-details-marker { display: none; }

.help__q::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    color: var(--accent);
    transition: transform .2s ease, color .2s ease;
}

.help__item[open] .help__q::after {
    content: "–";
    color: var(--primary);
}

.help__q:hover { color: var(--accent); }

.help__a {
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--muted);
    padding: 0 4px 16px;
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .help__item[open] .help__a {
        animation: help-in .25s ease;
    }
    @keyframes help-in {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: none; }
    }
}

/* Eingabefeld für den Zugangscode: gleichmäßige Zeichenbreite und weite
   Sperrung, damit sich beim Abtippen von der Karte keine Verwechslung
   einschleicht. */
.code-input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .18em;
    text-align: center;
    text-transform: lowercase;
}

/* --- Galerie: eigener Scroll-Bereich -------------------------------------
   Die Kopfzeile und die Werkzeuge bleiben stehen, während man durch die
   Bilder blättert. Bei tausend Aufnahmen scrollt man sonst minutenlang an
   allem vorbei, was oben steht - und findet nicht mehr zurück. */

.gal-scroll {
    max-height: calc(100vh - 210px);
    min-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 4px 0;
    margin: 0 -4px;
    border-radius: var(--r-field);
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.gal-scroll::-webkit-scrollbar        { width: 9px; }
.gal-scroll::-webkit-scrollbar-track  { background: transparent; }
.gal-scroll::-webkit-scrollbar-thumb  {
    background: var(--accent);
    border-radius: 6px;
    border: 2px solid var(--bg, #fff);
}

.gal-mehr { margin: var(--gap-m) 0 var(--gap-s); }

/* Auf kleinen Geräten ist der Bildschirm ohnehin das Fenster - dort stört ein
   Kasten im Kasten mehr, als er hilft. */
@media (max-width: 600px) {
    .gal-scroll {
        max-height: none;
        overflow: visible;
    }
}

/* --- Bildunterschrift auf der Kachel ------------------------------------ */

.gal-tile__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 8px 6px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.3;
    color: #fff;
    text-align: left;
    background: linear-gradient(transparent, rgba(0, 0, 0, .62));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 1;
    transition: opacity .15s ease;
}

.gal-grid--ohne-infos .gal-tile__info { opacity: 0; }

/* --- Werkzeugleiste der Verwaltung -------------------------------------- */

.gal-werkzeuge {
    background: #f4f1f2;
    border-top: 1px solid var(--accent-soft);
    border-bottom: 1px solid var(--accent-soft);
    font-family: var(--font-body);
}

.gal-werkzeuge__inhalt {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 0;
    font-size: 14px;
}

.gal-werkzeuge__marke {
    background: var(--primary);
    color: #fff;
    border-radius: 3px;
    padding: 3px 9px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gal-werkzeuge__feld,
.gal-werkzeuge__schalter {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gal-werkzeuge__feld select {
    font-family: inherit;
    font-size: 14px;
    padding: 4px 8px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: #fff;
}

.gal-werkzeuge__link {
    margin-left: auto;
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gal-werkzeuge__link:hover { text-decoration: underline; }

/* --- Großansicht: Streifen, Vollbild, tote Pfeile ----------------------- */

.lb__unten {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 0 10px;
}

.lb__unten .lb__caption {
    position: static;
    padding: 0 60px 8px;
}

.lb__streifen {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.lb__streifen::-webkit-scrollbar { display: none; }

.lb__mini {
    position: relative;
    width: 52px;
    height: 52px;
    flex: none;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, border-color .15s ease;
}

.lb__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__mini:hover { opacity: .85; }

.lb__mini.is-aktiv {
    opacity: 1;
    border-color: #fff;
}

.lb__mini-video {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.lb__mini-video .ico { width: 16px; height: 16px; }

/* Bündig mit dem Schließen-Kreuz: beide gleich hoch, gleich groß, gleicher
   Innenabstand - sonst sitzt eines sichtbar tiefer als das andere. */
.lb__voll {
    position: absolute;
    top: 8px;
    right: 56px;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 12px 18px;
    opacity: .8;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb__voll:hover { opacity: 1; }

/* Ein Pfeil, der wie ein Knopf aussieht und nichts tut, ist ärgerlicher als
   keiner: Man klickt zweimal, bevor man begreift, dass hier Schluss ist. */
.lb__nav.is-aus {
    opacity: .2;
    cursor: default;
    pointer-events: none;
}

/* Das Bild bekommt, was der Rahmen hergibt: Der Streifen unten und die
   Kopfzeile sind abgezogen, mehr nicht. Ein fester Wert wie 68vh ließ auf
   hohen Bildschirmen einen breiten Rand stehen. */
.lb__stage {
    width: 100%;
    height: 100%;
    /* Ohne min-height/min-width schrumpfen Flex-Kinder nie unter die Größe
       ihres Inhalts - ein großes Video sprengt dann den Rahmen. */
    min-height: 0;
    min-width: 0;
}

.lb__stage img,
.lb__stage video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 600px) {
    .lb__streifen { justify-content: flex-start; }
    .lb__mini { width: 44px; height: 44px; }
    .lb__voll { right: 48px; padding: 12px 14px; }
    .lb__close { padding: 12px 14px; }
    .lb { padding: 48px 6px 104px; }
}

/* Im Vollbild zählt nur das Bild - Streifen und Text treten zurück. */
.lb:fullscreen .lb__stage img,
.lb:fullscreen .lb__stage video { max-height: 88vh; }
.lb:fullscreen .lb__streifen { opacity: .35; }
.lb:fullscreen .lb__streifen:hover { opacity: 1; }

/* --- Abschnitte der Feier ------------------------------------------------ */

.gal-kat {
    border-bottom: 1px solid var(--accent-soft);
    background: #fff;
}

.gal-kat__leiste {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}

.gal-kat__leiste::-webkit-scrollbar { display: none; }

.gal-kat__reiter {
    flex: none;
    font-family: var(--font-body);
    font-size: 15px;
    padding: 7px 16px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: var(--t-tactile);
    white-space: nowrap;
}

.gal-kat__reiter:hover { background: var(--accent-soft); }

.gal-kat__reiter.is-aktiv {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.gal-kat__zahl {
    opacity: .6;
    font-size: 13px;
    margin-left: 4px;
}

.gal-kat__reiter.is-aktiv .gal-kat__zahl { opacity: .75; }

/* --- Vorschau-Streifen ---------------------------------------------------
   Damit in der Vorschau nie der Eindruck entsteht, hier laufe der Ernstfall. */

.vorschau-streifen {
    background: repeating-linear-gradient(
        45deg, #f4e2c8, #f4e2c8 12px, #efd9b8 12px, #efd9b8 24px
    );
    color: #6b4a12;
    font-family: var(--font-body);
    font-size: 13px;
    text-align: center;
    padding: 7px 12px;
    letter-spacing: .02em;
}

/* --- Dateiliste: eigener Scroll-Bereich ----------------------------------
   Wer zwanzig Aufnahmen auswählt, hat sonst eine Seite, die metertief wird –
   und der Knopf zum Starten rutscht dabei außer Sicht. Die Liste scrollt
   deshalb in sich, alles darum bleibt stehen. */

.up-list {
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    /* Rand nur, wenn wirklich etwas drinsteht */
    margin: 0;
    padding: 0;
}

.up-list:not(:empty) {
    padding: 4px;
    margin: var(--gap-s) -4px;
    border: 1px solid var(--accent-soft);
    border-radius: var(--r-field);
}

.up-list::-webkit-scrollbar        { width: 8px; }
.up-list::-webkit-scrollbar-track  { background: transparent; }
.up-list::-webkit-scrollbar-thumb  {
    background: var(--accent);
    border-radius: 5px;
    border: 2px solid #fff;
}

/* Auf kleinen Geräten darf die Liste mehr Platz nehmen - dort ist der
   Bildschirm ohnehin das Fenster. */
@media (max-width: 600px) {
    .up-list { max-height: 58vh; }
}

.up-drop__formate {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text);
    opacity: .62;
    margin: 4px 0 10px;
}

/* Ein leerer Textabsatz nimmt keinen Platz - in der Vorschau kann er aber
   jederzeit gefüllt werden, deshalb steht er im Markup. */
.ev-leer { display: none; }

/* Diashow-Knopf – links neben dem Vollbild, gleiche Maße */
.lb__dia {
    position: absolute;
    top: 8px;
    right: 104px;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 12px 18px;
    opacity: .8;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb__dia:hover { opacity: 1; }

/* Läuft sie, ist das zu sehen – sonst drückt man zweimal und stoppt sie
   gleich wieder. */
.lb__dia.is-an {
    opacity: 1;
    color: #ffd479;
}

@media (max-width: 600px) {
    .lb__dia { right: 92px; padding: 12px 14px; }
}

/* --- Sanfter Wechsel zwischen den Abschnitten ---------------------------
   Die alten Kacheln bleiben stehen und werden nur blasser. Sie sofort zu
   entfernen ließ einen farbigen Kasten aufblitzen, bevor die neuen Bilder
   kamen – ein kurzer Blitz sieht nach Fehler aus, auch wenn nichts kaputt ist. */

.gal-grid {
    transition: opacity .18s ease;
}

.gal-grid.is-laedt {
    opacity: .35;
    pointer-events: none;
}

/* --- Abschnitt auf der Kachel ------------------------------------------- */

.gal-tile__kat {
    position: absolute;
    left: 6px;
    top: 6px;
    max-width: calc(100% - 12px);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(20, 4, 10, .62);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* --- Video in der Großansicht ------------------------------------------- */

/* Der Rahmen ums Video muss die Höhe der Bühne übernehmen, nicht nur eine
   Obergrenze davon: Ein `max-height: 100%` bezieht sich auf einen Elternteil,
   dessen Höhe sich am Inhalt bemisst - und der Inhalt ist das Video. Dieser
   Zirkelschluss endete damit, dass ein Hochformat-Video in voller Größe stand
   und oben wie unten aus dem Bild ragte. */
.lb__video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.lb__video video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Ein Standbild mit schmaler Bedienleiste am unteren Rand sieht aus wie ein
   Foto – ohne dieses Zeichen tippt niemand darauf, um es abzuspielen. */
.lb__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .48);
    backdrop-filter: blur(3px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .4);
    transition: opacity .15s ease, transform .15s ease;
}

.lb__play .ico { width: 34px; height: 34px; margin-left: 3px; }

.lb__play:hover { transform: translate(-50%, -50%) scale(1.06); }

.lb__play.is-weg {
    opacity: 0;
    pointer-events: none;
}

/* --- Reihenfolge ändern in der Galerie ---------------------------------- */

.gal-werkzeuge__knopf {
    font: inherit;
    font-size: 14px;
    padding: 5px 14px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.gal-werkzeuge__knopf:hover { background: var(--accent-soft); }

.gal-werkzeuge__knopf.is-an {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.gal-grid.is-sortierend .gal-tile {
    cursor: grab;
    outline: 1px dashed var(--accent);
    outline-offset: 2px;
}

.gal-grid.is-sortierend .gal-tile:active { cursor: grabbing; }

.gal-tile.is-gezogen { opacity: .35; }

.gal-tile.is-ziel {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}