/* JU-Galerie — Markenfarben gemessen am Logo (siehe Brand-Notiz):
   JU-Blau #4155FF, Grün #83E500, Dunkelblau #011057. */
:root {
    --ju-blau:   #4155FF;
    --ju-gruen:  #83E500;
    --ju-dunkel: #011057;
    --grund:     #f4f6fb;
    --karte:     #ffffff;
    --text:      #1b2140;
    --gedimmt:   #6b7280;
}
* { box-sizing: border-box; margin: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--grund);
    color: var(--text);
    min-height: 100vh;
}

/* ── Wortmarke ─────────────────────────────────────────────────────── */
.wortmarke { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.wortmarke span { color: var(--ju-blau); }
.wortmarke em { font-style: normal; font-weight: 500; color: var(--ju-gruen); margin-left: .35em; }

/* ── Anmeldung ─────────────────────────────────────────────────────── */
body.anmeldung {
    background: radial-gradient(1200px 800px at 80% -10%, #1b2ba0 0%, var(--ju-dunkel) 55%);
    display: grid; place-items: center; padding: 1rem;
}
.anmelde-karte {
    background: var(--karte);
    border-radius: 20px;
    padding: 2.5rem 2.25rem;
    width: min(26rem, 100%);
    box-shadow: 0 24px 80px rgba(1, 16, 87, .45);
}
.anmelde-karte h1 { font-size: 2rem; margin-top: 1rem; }
.anmelde-karte .unterzeile { color: var(--gedimmt); margin: .25rem 0 1.5rem; }
.anmelde-karte label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.anmelde-karte input[type=text] {
    width: 100%; padding: .8rem 1rem; font-size: 1rem;
    border: 2px solid #dfe3f0; border-radius: 12px; outline: none;
}
.anmelde-karte input[type=text]:focus { border-color: var(--ju-blau); }
.anmelde-karte button {
    width: 100%; margin-top: 1rem; padding: .9rem 1rem;
    background: var(--ju-blau); color: #fff; font-size: 1rem; font-weight: 700;
    border: 0; border-radius: 12px; cursor: pointer;
}
.anmelde-karte button:hover { filter: brightness(1.08); }
.klein { font-size: .85rem; color: var(--gedimmt); margin-top: 1rem; }
.klein a { color: var(--ju-blau); }
.hinweis { border-radius: 12px; padding: 1rem 1.1rem; font-size: .95rem; }
.hinweis.gruen { background: #f2fbe3; border: 1px solid var(--ju-gruen); }
.hinweis.rot   { background: #fdf0f0; border: 1px solid #e2626b; }

/* ── Kopf + Events ─────────────────────────────────────────────────── */
.kopf {
    background: var(--ju-dunkel); color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem clamp(1rem, 3vw, 2rem);
    position: sticky; top: 0; z-index: 20;
}
.kopf .wortmarke span { color: #8d9aff; }
.kopf-rechts { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.angemeldet { opacity: .85; }
.abmelden { color: #aab4ff; text-decoration: none; }
.abmelden:hover { color: #fff; }

.kopf .wortmarke { text-decoration: none; color: #fff; }
.admin-marke {
    background: var(--ju-gruen); color: var(--ju-dunkel);
    font-size: .75rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px;
}

/* ── Admin-Zeilen (Album anlegen, Hochladen) + Kachel-Löschknopf ───── */
.admin-zeile {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: #fffbe8; border: 1px dashed #d9b13b; border-radius: 12px;
    padding: .6rem .8rem; margin: .8rem clamp(1rem, 3vw, 2rem) 0;
}
.auswahl .admin-zeile { margin: 0 0 1rem; }
.admin-zeile input[type=text] {
    flex: 1; min-width: 12rem; padding: .5rem .7rem;
    border: 2px solid #dfe3f0; border-radius: 10px;
}
.admin-zeile button {
    background: var(--ju-blau); color: #fff; border: 0; border-radius: 10px;
    font-weight: 700; padding: .55rem .9rem; cursor: pointer;
}
.upload-balken {
    flex-basis: 100%; height: 10px; border-radius: 999px;
    background: #e6e9f4; overflow: hidden;
}
.upload-balken div {
    width: 0; height: 100%; background: var(--ju-gruen);
    transition: width .3s ease;
}
.upload-text { flex-basis: 100%; font-size: .85rem; color: var(--gedimmt); }

.kachel-loeschen { position: absolute; top: .35rem; right: .35rem; z-index: 2; }
.kachel-loeschen button {
    width: 1.7rem; height: 1.7rem; border: 0; border-radius: 50%;
    background: rgba(178, 24, 43, .92); color: #fff; font-weight: 800; cursor: pointer;
}
.kachel-loeschen button:hover { background: #d21f34; }
body.ansicht-liste .kachel-loeschen { position: static; order: 9; margin-left: auto; }

/* ── Startseite: Galerie-Auswahl ───────────────────────────────────── */
.auswahl { padding: 2rem clamp(1rem, 3vw, 2rem) 3rem; }
.auswahl h1 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.event-karten {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.event-karte {
    display: block; background: var(--karte); border-radius: 16px; overflow: hidden;
    text-decoration: none; color: var(--text);
    box-shadow: 0 2px 10px rgba(1, 16, 87, .08);
    transition: transform .12s ease, box-shadow .12s ease;
}
.event-karte:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(1, 16, 87, .16); }
.event-karte img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.event-cover-leer {
    display: grid; place-items: center; aspect-ratio: 16/10;
    font-size: 3rem; background: #e8ebf7;
}
.event-titel { display: block; font-weight: 700; padding: .8rem 1rem .1rem; }
.event-zahl  { display: block; color: var(--gedimmt); font-size: .85rem; padding: 0 1rem .9rem; }
.event-karte-halter { position: relative; }
.event-karte-halter .event-karte { display: block; height: 100%; }
.event-sortier { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; }
.event-sortier button {
    width: 1.9rem; height: 1.9rem; border: 0; border-radius: 8px; cursor: pointer;
    background: rgba(1, 16, 87, .75); color: #fff; font-size: .8rem;
}
.event-sortier button:hover { background: var(--ju-blau); }

/* ── Brotkrumen + Ordner ───────────────────────────────────────────── */
.brotkrumen {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: 1rem clamp(1rem, 3vw, 2rem) 0; font-size: .95rem;
}
.brotkrumen a { color: var(--ju-blau); text-decoration: none; font-weight: 600; }
.brotkrumen a.hier { color: var(--text); pointer-events: none; }
.brotkrumen span { color: var(--gedimmt); }
.ordner-reihe {
    display: flex; gap: .75rem; flex-wrap: wrap;
    padding: 1rem clamp(1rem, 3vw, 2rem) 0;
}
.ordner-kachel {
    display: flex; align-items: center; gap: .6rem;
    background: var(--karte); color: var(--text); text-decoration: none;
    padding: .7rem 1.1rem; border-radius: 12px; font-weight: 600;
    border: 2px solid transparent;
    box-shadow: 0 2px 10px rgba(1, 16, 87, .08);
}
.ordner-kachel:hover { border-color: var(--ju-blau); }
.ordner-symbol { font-size: 1.3rem; }
.ordner-zahl {
    background: var(--ju-gruen); color: var(--ju-dunkel);
    border-radius: 999px; font-size: .75rem; padding: .1rem .55rem;
}
.leer { color: var(--gedimmt); padding: 2rem 0; }

/* ── Werkzeugleiste: Ansicht + Zoom ────────────────────────────────── */
.werkzeuge {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem clamp(1rem, 3vw, 2rem) 0;
}
.werkzeuge .gruppe {
    display: flex; background: var(--karte); border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(1, 16, 87, .08);
}
.werkzeuge button {
    border: 0; background: none; cursor: pointer; color: var(--gedimmt);
    font-size: 1.05rem; line-height: 1; padding: .55rem .8rem;
}
.werkzeuge button:hover { color: var(--ju-blau); }
.werkzeuge button.aktiv { color: #fff; background: var(--ju-blau); }
.werkzeuge .zoom button { font-size: 1.15rem; font-weight: 700; }

/* ── Medienfläche — drei Ansichten, Größe über --kachel ────────────── */
:root { --kachel: 170px; }
.raster { padding: 1rem clamp(1rem, 3vw, 2rem) 3rem; }
.kachel {
    position: relative; border-radius: 12px; overflow: hidden; cursor: zoom-in;
    background: var(--karte);
    box-shadow: 0 2px 10px rgba(1, 16, 87, .08);
}
.kachel img { display: block; width: 100%; height: auto; object-fit: cover; }
.kachel:hover img { filter: brightness(1.05); }

/* Raster (Standard): gleichmäßige Quadrate, kompakt. */
body.ansicht-raster .raster {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--kachel), 1fr));
}
body.ansicht-raster .kachel img,
body.ansicht-raster .kachel .karteikarte { aspect-ratio: 1/1 !important; height: 100%; }

/* Mosaik: originale Seitenverhältnisse in Spalten. */
body.ansicht-mosaik .raster { columns: var(--kachel); column-gap: .6rem; }
body.ansicht-mosaik .kachel { break-inside: avoid; margin: 0 0 .6rem; }

/* Liste: Dateizeilen wie in Beekeeper, Name aus data-Attribut. */
body.ansicht-liste .raster { display: flex; flex-direction: column; gap: .35rem; }
body.ansicht-liste .kachel {
    display: flex; align-items: center; gap: .8rem;
    padding: .4rem .6rem; overflow: visible;
}
body.ansicht-liste .kachel img,
body.ansicht-liste .kachel .karteikarte {
    width: 52px; height: 52px; flex: 0 0 52px;
    aspect-ratio: auto !important; border-radius: 8px; font-size: 1.3rem;
}
body.ansicht-liste .kachel::after {
    content: attr(data-name);
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .92rem;
}
body.ansicht-liste .kachel[data-video="1"]::after { content: attr(data-name) "  🎬"; }
body.ansicht-liste .abspielen { display: none; }
.karteikarte { display: grid; place-items: center; font-size: 2.5rem; color: var(--gedimmt); }
.abspielen {
    position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.abspielen::after {
    content: ""; width: 54px; height: 54px; border-radius: 50%;
    background: rgba(1, 16, 87, .65) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/26px no-repeat;
    outline: 3px solid rgba(255, 255, 255, .85);
}

/* ── Lightbox ──────────────────────────────────────────────────────── */
.lightbox {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(1, 8, 40, .96);
    display: flex; flex-direction: column;
}
/* Eigenes display schlägt das hidden-Attribut — ohne diese Regel liegt die
   „geschlossene" Lightbox als unsichtbarer Deckel über der ganzen Seite. */
.lightbox[hidden] { display: none; }
.lb-buehne {
    flex: 1; display: grid; place-items: center; min-height: 0; padding: .5rem;
}
.lb-buehne img, .lb-buehne video {
    max-width: 100%; max-height: calc(100vh - 7rem);
    border-radius: 8px;
}
.lb-zu {
    position: absolute; top: .6rem; right: .8rem; z-index: 2;
    background: none; border: 0; color: #fff; font-size: 2.2rem; cursor: pointer; opacity: .8;
}
.lb-zu:hover { opacity: 1; }
.lb-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    background: rgba(255,255,255,.12); border: 0; color: #fff;
    font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer;
}
.lb-pfeil:hover { background: var(--ju-blau); }
.lb-zurueck { left: .8rem; }
.lb-vor { right: .8rem; }
.lb-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.2rem; color: #cdd4f8; font-size: .9rem;
}
.lb-laden {
    background: var(--ju-gruen); color: var(--ju-dunkel); font-weight: 700;
    padding: .55rem 1.1rem; border-radius: 10px; text-decoration: none; white-space: nowrap;
}
.lb-laden:hover { filter: brightness(1.06); }

@media (max-width: 600px) {
    .lb-pfeil { display: none; }          /* am Handy wischt man */
    .kopf .wortmarke em { display: none; }
}