/* /img/ – billedarkiv for Lolland-Falster.
   Egen identitet, bevidst løsrevet fra schn.dk's terminal: målgruppen er
   almindelige borgere. Farverne er hentet i landsdelen selv – sundblågrøn,
   kalket mur, rød tegl. Ingen webfonte udefra: intet kald til Google, ingen
   IP-lækage. */

:root {
    --sund:   #12333d;   /* dybt havvand – bundfarve på mørke flader */
    --sund-2: #1d5b6a;   /* lysere vand – links og accenter */
    --kalk:   #faf6ef;   /* kalket mur – sidebaggrund */
    --papir:  #ffffff;
    --tegl:   #b8492a;   /* rød tegl – handling, ét sted ad gangen */
    --blaek:  #17201f;
    --daemp:  #5d6b6e;
    --kant:   #dfd7c9;
    --god:    #2f6b4f;

    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --skygge: 0 1px 2px rgba(23, 32, 31, .06), 0 6px 20px rgba(23, 32, 31, .07);

    /* Chevron til <select>. Indlejret som data-URI, så der ikke hentes en
       ekstra fil for én lille pil. */
    --pil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235d6b6e' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    --pil-lys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23faf6ef' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--kalk);
    color: var(--blaek);
    font: 16px/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
}
body.laast { overflow: hidden; }

a { color: var(--sund-2); }

/* ---- Top ------------------------------------------------------------------ */
.top {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--sund);
    color: var(--kalk);
}
.logo { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; color: inherit; }
.logo .tal {
    font: 700 1.35rem/1 var(--sans);
    letter-spacing: .06em;
    background: var(--kalk);
    color: var(--sund);
    padding: .3rem .45rem;
    border-radius: 3px;
}
.logo .by { font-size: .95rem; opacity: .9; }

.top nav { display: flex; align-items: center; gap: 1.25rem; }
.top .link { color: var(--kalk); text-decoration: none; opacity: .85; font-size: .95rem; }
.top .link:hover, .top .link.aktiv { opacity: 1; text-decoration: underline; }
.top .knap {
    background: var(--tegl);
    color: #fff;
    text-decoration: none;
    padding: .55rem 1.1rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: .95rem;
}
.top .knap:hover { background: #a03d21; }

/* ---- Indhold -------------------------------------------------------------- */
main { max-width: 62rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.intro { max-width: 40rem; margin-bottom: 2.5rem; }
.intro.smal { margin-bottom: 2rem; }
.eyebrow {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tegl);
}
h1 {
    margin: 0 0 .75rem;
    font: 400 clamp(1.8rem, 4.5vw, 2.75rem)/1.15 var(--serif);
    letter-spacing: -.01em;
}
.manchet { margin: 0; font-size: 1.08rem; color: var(--daemp); }

.genkendt {
    background: #eef4f2;
    border-left: 3px solid var(--god);
    padding: .75rem 1rem;
    margin: 0 0 1.5rem;
    font-size: .95rem;
    border-radius: 0 3px 3px 0;
}
.nulstil {
    background: none; border: 0; padding: 0;
    color: var(--sund-2); text-decoration: underline; cursor: pointer;
    font: inherit; font-size: .9rem;
}

/* ---- Formular ------------------------------------------------------------- */
.kort {
    background: var(--papir);
    border: 1px solid var(--kant);
    border-radius: 5px;
    box-shadow: var(--skygge);
    padding: .5rem 1.75rem 1.75rem;
}
fieldset { border: 0; padding: 0; margin: 1.75rem 0 0; }
legend {
    padding: 0;
    font: 600 1.05rem/1.3 var(--sans);
    margin-bottom: .35rem;
}
.hjaelp { margin: 0 0 1rem; color: var(--daemp); font-size: .92rem; }

.felter { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Ét felt alene skal ikke strækkes over hele kortets bredde — et navn eller et
   bynavn er kort, og et felt på 60 rem inviterer til at skrive en roman. */
.felter.enkelt { grid-template-columns: minmax(0, 26rem); }
label { display: block; font-size: .92rem; font-weight: 600; }
.paakraevet {
    font-weight: 400;
    font-size: .78rem;
    color: var(--daemp);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-left: .4rem;
}
input[type=text], input[type=email], input[type=tel], input[type=password], textarea, .felter select {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .7rem;
    font: inherit;
    color: var(--blaek);
    background: var(--papir);
    border: 1px solid var(--kant);
    border-radius: 3px;
}
/* Byvælgeren skal se ud som de øvrige felter, ikke som systemets egen kontrol. */
.felter select { appearance: none; padding-right: 2.2rem; background-image: var(--pil); background-repeat: no-repeat; background-position: right .7rem center; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--sund-2); outline-offset: 1px; border-color: var(--sund-2); }

/* Honeypot – skjult for mennesker, men ikke display:none (nogle robotter tjekker det). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Vilkår --------------------------------------------------------------- */
.vilkaar-boks {
    background: #f4f0e7;
    border: 1px solid var(--kant);
    border-radius: 4px;
    padding: 1rem 1.15rem;
    font-size: .93rem;
}
.vilkaar-boks p { margin: 0 0 .75rem; }
.vilkaar-boks p:last-child { margin-bottom: 0; color: var(--daemp); }

.afkryds {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-top: 1rem;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.5;
    cursor: pointer;
}
.afkryds input { margin-top: .28rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--tegl); }

/* ---- Vælg filer ----------------------------------------------------------- */
.drop {
    border: 2px dashed var(--kant);
    border-radius: 5px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    background: #fcfaf6;
    transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--tegl); background: #fdf3ef; }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropknap {
    display: inline-block;
    background: var(--sund);
    color: #fff;
    padding: .7rem 1.5rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}
.dropknap:hover { background: #0d2830; }
.droptekst { margin: .85rem 0 0; color: var(--daemp); font-size: .92rem; }

/* ---- Upload-kø ------------------------------------------------------------ */
.koe { margin-top: 2.5rem; }
.koe h2 { margin: 0 0 .35rem; font: 400 1.5rem/1.2 var(--serif); }
.koeliste { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .85rem; }

.koe-post {
    display: flex;
    gap: 1rem;
    background: var(--papir);
    border: 1px solid var(--kant);
    border-left: 3px solid var(--kant);
    border-radius: 4px;
    padding: .85rem 1rem;
}
.koe-post.klar { border-left-color: var(--god); }
.koe-post.fejl { border-left-color: var(--tegl); background: #fdf5f3; }

.mini {
    flex: none;
    width: 84px; height: 84px;
    background: #eee9df;
    border-radius: 3px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bjaelke { width: 70%; height: 4px; background: var(--kant); border-radius: 2px; overflow: hidden; }
.bjaelke span { display: block; width: 0; height: 100%; background: var(--sund-2); transition: width .15s linear; }

.koe-tekst { flex: 1; min-width: 0; }
.filnavn { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.stat { margin: .15rem 0 0; font-size: .85rem; color: var(--daemp); }
.koe-post.fejl .stat { color: var(--tegl); font-weight: 600; }

.kommentarfelt { margin-top: .7rem; position: relative; }
.kommentarfelt label { font-size: .85rem; font-weight: 600; color: var(--daemp); }
.kommentarfelt textarea { font-size: .93rem; }
.gemt {
    position: absolute; right: .5rem; bottom: .55rem;
    font-size: .75rem; color: var(--god); font-weight: 600;
}

.kvittering {
    margin-top: 1.5rem;
    background: #eef4f2;
    border-left: 3px solid var(--god);
    padding: .9rem 1.1rem;
    border-radius: 0 3px 3px 0;
    font-size: .95rem;
}

/* ---- Gallerisiden ---------------------------------------------------------
   Egen, næsten nøgen ramme: billederne er indholdet, alt andet træder tilbage. */
.galleriside { background: #14181a; color: #f0ece4; }
.galleriside main { max-width: none; margin: 0; padding: 0; }
.galleriside .tomt { padding: 4rem 1.5rem; text-align: center; color: #9aa5a8; }
.galleriside .tomt a { color: #fff; }

/* Byvælger til venstre, upload-knap til højre. Ingen titel, intet logo —
   billederne skal starte med det samme. Baren er sticky, så både filter og
   knap altid er inden for rækkevidde. */
.galleritop {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .7rem .8rem;
    background: rgba(20, 24, 26, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

/* Filteret er hele navigationen i galleriet: vælg by, og siden hentes igen med
   ?by= i URL'en, så et filtreret galleri kan deles som link. */
.byfilter { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.byfilter label { color: #9aa5a8; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.byfilter select {
    appearance: none;
    max-width: 15rem;
    padding: .5rem 2rem .5rem .7rem;
    font: inherit;
    font-size: .95rem;
    color: #f0ece4;
    background: rgba(255, 255, 255, .07) var(--pil-lys) no-repeat right .7rem center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 3px;
}
.byfilter select:hover { background-color: rgba(255, 255, 255, .12); }
.byfilter option { color: var(--blaek); background: var(--papir); }
.byfilter .vis {
    font: inherit; font-size: .9rem; padding: .5rem .8rem; cursor: pointer;
    color: #f0ece4; background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 3px;
}
.galleritop .knap {
    background: var(--tegl);
    color: #fff;
    text-decoration: none;
    padding: .55rem 1.15rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}
.galleritop .knap:hover { background: #a03d21; }

/* ---- Gitteret -------------------------------------------------------------
   Justerede rækker uden JavaScript: hver flise får flex-grow OG flex-basis
   efter sit sideforhold. Alle fliser i en række skaleres derfor med samme
   faktor — rækken fylder bredden ud, højden bliver ens, og intet beskæres.
   ::after suger den overskydende plads i sidste række, så de sidste billeder
   ikke bliver pustet absurd store op. */
.galleri {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
}
.galleri::after { content: ''; flex-grow: 1e9; }

.flise {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #1e2427;
    cursor: pointer;
    min-width: 0;
}
.flise img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, opacity .2s ease;
}
.flise:hover img, .flise:focus-visible img { transform: scale(1.04); }
.flise:focus-visible { outline: 3px solid var(--tegl); outline-offset: -3px; }

.flise figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.25rem .8rem .65rem;
    background: linear-gradient(to top, rgba(8, 12, 14, .88), rgba(8, 12, 14, 0));
    color: #fff;
    font-size: .82rem;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.flise:hover figcaption, .flise:focus-visible figcaption { opacity: 1; }
.flise .tekst { display: block; line-height: 1.35; }
/* Byen står kun når man ser hele landsdelen — er der filtreret, ville den
   gentage sig på hvert eneste billede. */
.flise .stedet {
    display: inline-block;
    margin-top: .3rem;
    padding: .1rem .4rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .16);
    border-radius: 2px;
}
.flise .foto { display: block; opacity: .75; font-size: .75rem; margin-top: .1rem; }

/* ---- Pager ----------------------------------------------------------------
   Galleriet er kant til kant uden luft, så pageren har brug for sin egen
   vejrtrækning under gitteret. Tallene er valgfri genveje; Forrige/Næste er
   det man rent faktisk bruger, og de bliver stående som slukkede i enderne,
   så rækken ikke hopper i bredden mellem side 1 og side 2. */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem 3.5rem;
    color: #cfd6d8;
}
.pagerknap, .pagertal a, .pagertal .nu {
    display: inline-block;
    padding: .5rem .85rem;
    font-size: .95rem;
    text-decoration: none;
    color: #f0ece4;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 3px;
}
.pagerknap:hover, .pagertal a:hover { background: rgba(255, 255, 255, .16); }
.pagerknap.slukket { opacity: .35; }
.pagertal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagertal .nu { background: var(--tegl); border-color: var(--tegl); font-weight: 600; }
.pagertal .spring { padding: 0 .2rem; opacity: .5; }
/* Tælleren står på sin egen linje under knapperne. */
.pagertaeller { flex-basis: 100%; text-align: center; margin: .4rem 0 0; font-size: .85rem; color: #9aa5a8; }

@media (max-width: 34rem) {
    /* På mobil er tallene støj — Forrige/Næste og tælleren er nok. */
    .pagertal { display: none; }
}

.tomt { color: var(--daemp); font-size: 1.05rem; }

/* ---- Lightbox ------------------------------------------------------------- */
.lys {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(12, 24, 28, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
}
.lys[hidden] { display: none; }
.lys figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: .9rem; }
.lys img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 3px;
}
.lys figcaption { color: #f2ece2; text-align: center; max-width: 44rem; margin: 0 auto; }
.lys figcaption p { margin: 0; }
.lys .kredit { margin-top: .3rem; font-size: .88rem; opacity: .7; }

.lys .luk, .lys .pil {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
}
.lys .luk { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.9rem; }
.lys .pil { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2.2rem; }
.lys .venstre { left: 1rem; }
.lys .hoejre { right: 1rem; }
.lys .luk:hover, .lys .pil:hover { background: rgba(255, 255, 255, .28); }
.lys button:focus-visible { outline: 3px solid var(--tegl); outline-offset: 2px; }

/* ---- Bund ----------------------------------------------------------------- */
.bund {
    border-top: 1px solid var(--kant);
    padding: 1.5rem;
    text-align: center;
    color: var(--daemp);
    font-size: .9rem;
}
.bund p { margin: 0; }

/* ---- Admin ---------------------------------------------------------------- */
body.loginside { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--sund); }
.login {
    background: var(--papir);
    padding: 2rem;
    border-radius: 5px;
    width: min(22rem, 90vw);
    box-shadow: var(--skygge);
}
.login h1 { font: 600 1.15rem/1.2 var(--sans); margin: 0 0 1.25rem; }
.fejlbesked { color: var(--tegl); font-size: .9rem; margin: .6rem 0 0; font-weight: 600; }

button {
    font: inherit;
    font-weight: 600;
    padding: .65rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: var(--sund);
    color: #fff;
    cursor: pointer;
}
button:hover { background: #0d2830; }
.login button { width: 100%; margin-top: 1.25rem; }
button.sekundaer { background: var(--papir); color: var(--blaek); border-color: var(--kant); }
button.sekundaer:hover { background: #f0ece4; }
button.farlig { background: var(--papir); color: var(--tegl); border-color: var(--tegl); }
button.farlig:hover { background: var(--tegl); color: #fff; }

.admin { max-width: 76rem; }
.besked { background: #eef4f2; border-left: 3px solid var(--god); padding: .8rem 1rem; border-radius: 0 3px 3px 0; }
.noegletal { color: var(--daemp); margin-bottom: 2rem; }
.gruppe { margin-bottom: 3rem; }
.gruppe h2 { font: 400 1.4rem/1.2 var(--serif); margin: 0 0 1rem; }
.gruppe .antal { font-family: var(--sans); font-size: .8rem; color: var(--daemp); }

.admingitter { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.adminkort {
    display: block;
    background: var(--papir);
    border: 1px solid var(--kant);
    border-radius: 4px;
    overflow: hidden;
    font-weight: 400;
    cursor: pointer;
    position: relative;
}
.adminkort:has(input:checked) { border-color: var(--sund-2); box-shadow: 0 0 0 2px var(--sund-2); }
.adminkort input { position: absolute; top: .6rem; left: .6rem; z-index: 2; width: 1.25rem; height: 1.25rem; accent-color: var(--sund-2); }
.adminkort img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #e9e3d8; }
.ingenmini { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: #f4ece9; color: var(--tegl); font-size: .85rem; }
.adminkort .meta { padding: .7rem .8rem .8rem; }
.adminkort .byen { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sund-2); }
.adminkort .byen em { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tegl); }
.adminkort .kom { margin: 0 0 .35rem; font-size: .9rem; }
.adminkort .fot { margin: 0 0 .35rem; font-size: .88rem; font-weight: 600; }
.adminkort .tek { margin: 0; font-size: .78rem; color: var(--daemp); }
.adminkort .kontakt { overflow-wrap: anywhere; }
.adminkort .hent { display: inline-block; margin-top: .5rem; font-size: .8rem; }

.handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
/* Flyt-til-by hører sammen som ét greb: vælger og knap uden mellemrum. */
.flytby { display: inline-flex; align-items: stretch; }
.flytby select {
    font: inherit; font-size: .95rem; padding: .55rem .7rem;
    color: var(--blaek); background: var(--papir);
    border: 1px solid var(--kant); border-radius: 3px 0 0 3px; border-right: 0;
    max-width: 14rem;
}
.flytby button { border-radius: 0 3px 3px 0; }

/* Byfilteret over listerne. */
.adminfilter { display: flex; align-items: center; gap: .5rem; margin: 0 0 2rem; }
.adminfilter label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--daemp); }
.adminfilter select {
    font: inherit; font-size: .95rem; padding: .5rem .7rem;
    color: var(--blaek); background: var(--papir);
    border: 1px solid var(--kant); border-radius: 3px;
    max-width: 18rem;
}

/* På smalle skærme skal rækkerne være lavere, ellers bliver der kun ét
   billede pr. række og hele den tætpakkede rytme forsvinder. */
@media (max-width: 60rem) {
    .flise { flex-basis: calc(var(--ar, 1.5) * 170px) !important; }
}
@media (max-width: 34rem) {
    .top { flex-direction: column; align-items: flex-start; }
    .koe-post { flex-direction: column; }
    .mini { width: 100%; height: 140px; }
    .galleri { gap: 2px; padding: 2px; }
    /* "By"-etiketten ryger først: selve vælgeren siger det samme. */
    .byfilter label { display: none; }
    .byfilter select { max-width: 9.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .flise:hover img { transform: none; }
}