:root {
  --hg: #faf8f5; --karte: #fff; --text: #2b2724; --leise: #7a716a; --linie: #e4ddd5;
  --akzent: #8a5a2b; --akzent-text: #fff; --gefahr: #b3261e;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --hg: #1c1a18; --karte: #26231f; --text: #ece6df; --leise: #a39a91; --linie: #3a3530;
          --akzent: #d09a5e; --akzent-text: #1c1a18; --gefahr: #f2867e; }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--hg); color: var(--text);
       font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.gesperrt { overflow: hidden; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: normal; margin: 0; font-size: 1.7rem; }

button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; padding: .45rem .6rem; }
textarea { width: 100%; resize: vertical; }
button { background: var(--akzent); color: var(--akzent-text); border: 0; border-radius: 6px; padding: .45rem .9rem; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.link { background: none; color: var(--leise); text-decoration: underline; padding: .45rem .3rem; }
button.gefahr { background: var(--gefahr); color: #fff; }
.meldung { color: var(--gefahr); min-height: 1.2em; margin: .5rem 0 0; }
.meta { color: var(--leise); font-size: .85em; }
.zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.zeile.rechts { justify-content: flex-end; }
.zeile input[type=number] { width: 6.5rem; }
.jahr-wahl { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: .5rem;
             padding: .2rem .4rem; border: 1px solid transparent; border-radius: 6px; }
.jahr-wahl label { display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }
.jahr-wahl input[type=number] { width: 6.5rem; }
.jahr-wahl.fehlt { border-color: var(--gefahr); }

/* Login */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-box { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 2rem; width: 100%; max-width: 380px; }
.login-box h1 { margin-bottom: 1.2rem; }
.login-box label { display: block; margin-bottom: .3rem; }
.login-box input { width: 100%; margin-bottom: .8rem; }
.login-box button[type=submit] { width: 100%; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 5; background: var(--hg); border-bottom: 1px solid var(--linie);
        padding: .8rem 16px; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 1; }
#suche { flex: 1 1 14rem; min-width: 0; }

/* Galerie */
.galerie { padding: 1rem 16px 3rem; max-width: 1400px; margin: 0 auto; }
.gruppe { font-family: Georgia, serif; font-weight: normal; font-size: 1.35rem; margin: 1.5rem 0 .6rem;
          border-bottom: 1px solid var(--linie); padding-bottom: .2rem; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
@media (max-width: 480px) { .raster { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }
.kachel { margin: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.kachel:focus-visible { outline: 3px solid var(--akzent); }
.kachel img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--linie); }
.kachel figcaption { padding: .45rem .6rem .55rem; font-size: .9rem; overflow-wrap: anywhere; }
.kachel figcaption:empty { display: none; }
.leer { text-align: center; color: var(--leise); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.94); color: #eee;
            display: flex; flex-direction: column; align-items: center; justify-content: center; }
#lb-bild { max-width: 100vw; max-height: calc(100vh - 7.5rem); max-height: calc(100dvh - 7.5rem);
           object-fit: contain; user-select: none; }
.lb-pfeil, .lb-zu { position: absolute; background: rgba(255,255,255,.12); color: #fff; border-radius: 50%;
                    width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; padding: 0; }
.lb-pfeil:hover, .lb-zu:hover { background: rgba(255,255,255,.25); }
.lb-pfeil { top: calc(50% - 3.75rem); }
.lb-links { left: .8rem; } .lb-rechts { right: .8rem; }
.lb-zu { top: .8rem; right: .8rem; font-size: 1.4rem; z-index: 1; }
.lb-info { width: 100%; max-width: 900px; padding: .6rem 16px 1rem; text-align: center; }
.lb-info p { margin: .2rem 0; }
.lb-info .meta { color: #aaa; }
.leer-text { color: #888; font-style: italic; }
.lb-knoepfe { display: flex; gap: .5rem; justify-content: center; margin-top: .4rem; }
.lb-info input, .lb-info select, .lb-info textarea { background: #222; color: #eee; border-color: #555; }
.lb-info .zeile { justify-content: center; }
.lb-info .meldung { color: #f2867e; }

/* Hochladen */
dialog { border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); color: var(--text);
         width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 1.2rem; }
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog h2 { margin-top: 0; font-weight: normal; font-family: Georgia, serif; }
.hinweis { color: var(--leise); font-size: .85rem; }
.up-liste { display: flex; flex-direction: column; gap: .8rem; margin-top: .8rem; }
.up-eintrag { display: flex; gap: .8rem; align-items: flex-start; border-top: 1px solid var(--linie); padding-top: .8rem; }
.up-eintrag img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; flex: none; }
.up-felder { flex: 1; min-width: 0; }
.status { color: var(--leise); font-size: .85rem; }