/* ===========================================================================
   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;
    font-size: 32px;
    background: linear-gradient(transparent 55%, 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;
    padding: 56px 12px;
}

.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; }

.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;
}