/* ============================================================
   Galerie — Oberfläche
   ============================================================ */

:root{
  --bg:#fbfbf9;
  --bg-alt:#f4f4f1;
  --surface:#ffffff;
  --ink:#111112;
  --ink-2:#5a5a5f;
  --ink-3:#9a9aa0;
  --line:#e6e6e1;
  --accent:#1f4fff;
  --accent-soft:rgba(31,79,255,.07);
  --radius:16px;
  --radius-s:10px;
  --shadow:0 1px 2px rgba(17,17,18,.04), 0 10px 30px -12px rgba(17,17,18,.10);
  --shadow-lg:0 2px 4px rgba(17,17,18,.05), 0 26px 60px -18px rgba(17,17,18,.22);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1280px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0b0b0c;
  --bg-alt:#111113;
  --surface:#161618;
  --ink:#f5f5f3;
  --ink-2:#a3a3a8;
  --ink-3:#6b6b71;
  --line:#26262a;
  --accent:#7d9bff;
  --accent-soft:rgba(125,155,255,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 26px 60px -18px rgba(0,0,0,.85);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease),color .4s var(--ease);
}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.03em;line-height:1.12}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- Kopf ---------- */
.appbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2rem);
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.appbar__left,.appbar__right{display:flex;align-items:center;gap:.6rem}
.appbar__back{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink-2);transition:.25s var(--ease);flex:none;
}
.appbar__back:hover{background:var(--bg-alt);color:var(--ink)}
.appbar__back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.appbar__id{display:flex;align-items:center;gap:.65rem;min-width:0}
.appbar__mark{
  width:26px;height:26px;border-radius:6px;flex:none;
  background:
    radial-gradient(circle at 68% 32%, #fff 0 14%, transparent 15%),
    linear-gradient(135deg,var(--accent),#0b2a8a);
  box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line);
}
.appbar__id strong{display:block;font-weight:500;font-size:.94rem;line-height:1.2}
.appbar__id small{display:block;font-size:.76rem;color:var(--ink-3);line-height:1.3}

.iconbtn{
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex:none;
  border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink-2);font-size:1rem;line-height:1;transition:.25s;
}
.iconbtn:hover{background:var(--bg-alt);color:var(--ink)}
.iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-moon{display:none}
html[data-theme="dark"] .i-sun{display:none}
html[data-theme="dark"] .i-moon{display:block}

/* ---------- Einleitung ---------- */
.app{max-width:var(--max);margin:0 auto;padding:clamp(2.2rem,5vw,3.6rem) clamp(1rem,4vw,2rem) 5rem}
.kicker{
  display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:.9rem;
}
.intro{max-width:620px;margin-bottom:2.4rem}
.intro__h1{font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:-.04em;margin-bottom:.9rem}
.intro__h1 em{font-family:var(--serif);font-style:italic;color:var(--accent)}
.intro__lead{color:var(--ink-2);font-size:1.04rem}

/* ---------- Filter ---------- */
.filterleiste{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;margin-bottom:2rem}
.filtergruppe{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font:inherit;font-size:.84rem;padding:.4rem .95rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:.25s var(--ease);white-space:nowrap;
}
.chip:hover{color:var(--ink);border-color:var(--ink-3)}
.chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip--reset{color:var(--accent);border-style:dashed}
.chip--reset:hover{border-color:var(--accent);color:var(--accent)}

.ladehinweis,.leer{color:var(--ink-3);font-size:.94rem;padding:2rem 0}

/* ---------- Masonry ---------- */
.masonry{columns:3 300px;column-gap:14px}
@media (max-width:640px){ .masonry{columns:1} }

.kachel{
  break-inside:avoid;margin:0 0 14px;position:relative;display:block;width:100%;
  padding:0;border:0;background:var(--bg-alt);border-radius:var(--radius);
  overflow:hidden;cursor:zoom-in;
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.kachel:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kachel.is-hidden{display:none}
.kachel img{
  width:100%;height:auto;opacity:0;
  transition:opacity .7s var(--ease),transform .8s var(--ease);
}
.kachel img.is-da{opacity:1}
.kachel:hover img{transform:scale(1.035)}

.kachel__info{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .8rem;text-align:left;
  background:linear-gradient(to top, rgba(6,6,8,.82), rgba(6,6,8,.35) 55%, transparent);
  color:#fff;opacity:0;transform:translateY(8px);
  transition:.4s var(--ease);pointer-events:none;
}
.kachel:hover .kachel__info,
.kachel:focus-visible .kachel__info{opacity:1;transform:none}
.kachel__info b{display:block;font-weight:500;font-size:.95rem;letter-spacing:-.02em}
.kachel__info span{
  display:block;font-size:.78rem;opacity:.85;font-variant-numeric:tabular-nums;
  margin-top:.15rem;
}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(.6rem,2vw,1.6rem)}
.lb__bd{position:absolute;inset:0;background:rgba(8,8,10,.86);backdrop-filter:blur(10px);animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}}

.lb__box{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 350px;
  width:min(1500px,100%);max-height:calc(100dvh - 2rem);
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);animation:pop .45s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.985)}}
.lb__box.ohne-daten{grid-template-columns:minmax(0,1fr)}
.lb__box.ohne-daten .lb__daten{display:none}

.lb__buehne{
  position:relative;margin:0;background:#0a0a0b;display:grid;place-items:center;
  min-height:240px;overflow:hidden;
}
.lb__buehne img{
  max-width:100%;max-height:calc(100dvh - 2rem);width:auto;height:auto;
  object-fit:contain;animation:bildAn .5s var(--ease);
}
@keyframes bildAn{from{opacity:0}}
.lb__zaehler{
  position:absolute;left:1rem;bottom:1rem;font-size:.76rem;color:#fff;
  background:rgba(8,8,10,.55);backdrop-filter:blur(6px);
  padding:.28rem .7rem;border-radius:999px;font-variant-numeric:tabular-nums;
}

.lb__daten{
  display:flex;flex-direction:column;gap:1.1rem;padding:1.4rem;
  overflow-y:auto;border-left:1px solid var(--line);background:var(--surface);
}
.lb__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;padding-right:.2rem}
.lb__kopf h2{font-size:1.3rem;letter-spacing:-.03em}
.lb__ort{font-size:.82rem;color:var(--ink-3);margin-top:.2rem}
.lb__text{font-size:.92rem;color:var(--ink-2)}
.lb__hinweis{font-size:.86rem;color:var(--ink-3)}

/* Belichtungsdreieck */
.belichtung{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:1rem;display:grid;gap:.9rem;
}
.belichtung__reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;text-align:center}
.belichtung__wert{
  font-family:var(--serif);font-size:1.4rem;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.skalen{display:grid;gap:.7rem}
.skala{display:grid;gap:.3rem}
.skala__kopf{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.skala__spur{position:relative;height:4px;border-radius:99px;background:var(--line)}
.skala__punkt{
  position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);
  transform:translate(-50%,-50%);transition:left .6s var(--ease);
}

/* Metadatenliste */
.meta{margin:0;display:grid;gap:0}
.meta > div{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--line);
}
.meta > div:last-child{border-bottom:0}
.meta dt{font-size:.82rem;color:var(--ink-3)}
.meta dd{margin:0;font-size:.86rem;text-align:right;font-variant-numeric:tabular-nums}

/* Karte */
.karte{
  position:relative;border:1px solid var(--line);border-radius:var(--radius-s);
  overflow:hidden;background:var(--bg-alt);
}
.karte__kacheln{
  display:grid;grid-template-columns:repeat(3,1fr);width:100%;aspect-ratio:3/2;
  overflow:hidden;filter:saturate(.75);
}
html[data-theme="dark"] .karte__kacheln{filter:saturate(.6) brightness(.72) contrast(1.05)}
.karte__kacheln img{width:100%;height:100%;object-fit:cover;background:var(--line)}
.karte__punkt{
  position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;
  background:var(--accent);border:2px solid #fff;
  transform:translate(-50%,-100%) rotate(-45deg);
  box-shadow:0 3px 8px rgba(0,0,0,.4);pointer-events:none;
}
.karte__fuss{
  display:flex;justify-content:space-between;gap:.8rem;align-items:center;
  padding:.6rem .8rem;font-size:.78rem;color:var(--ink-2);
  border-top:1px solid var(--line);background:var(--surface);
}
.karte__fuss a{color:var(--accent);white-space:nowrap}
.karte__fuss a:hover{text-decoration:underline}
.karte__quelle{
  position:absolute;right:.4rem;bottom:3rem;font-size:.62rem;color:#fff;
  background:rgba(8,8,10,.55);padding:.1rem .4rem;border-radius:4px;
}
/* Kacheln nicht erreichbar — sauberer Ersatz statt kaputter Bildsymbole */
.karte--flach .karte__kacheln,
.karte--flach .karte__punkt,
.karte--flach .karte__quelle{display:none}
.karte--flach::before{
  content:"Kartenausschnitt nicht verfügbar";
  display:grid;place-items:center;aspect-ratio:3/2;
  font-size:.8rem;color:var(--ink-3);
  background:
    repeating-linear-gradient(45deg, var(--bg-alt) 0 10px, var(--surface) 10px 20px);
}

/* Navigation */
.lb__nav{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;color:#fff;background:rgba(20,20,24,.55);
  backdrop-filter:blur(8px);transition:.25s var(--ease);
}
.lb__nav:hover{background:rgba(20,20,24,.85);transform:translateY(-50%) scale(1.07)}
.lb__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb__nav--prev{left:clamp(.5rem,1.6vw,1.2rem)}
.lb__nav--next{right:clamp(.5rem,1.6vw,1.2rem)}

@media (max-width:900px){
  .lb__box{grid-template-columns:minmax(0,1fr);max-height:calc(100dvh - 1.2rem)}
  .lb__daten{border-left:0;border-top:1px solid var(--line);max-height:46dvh}
  .lb__buehne img{max-height:52dvh}
  .lb__nav{width:40px;height:40px}
  .lb__nav--next{right:.5rem}
  .lb__nav--prev{left:.5rem}
}

/* ---------- PIN ---------- */
.pinwrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem}
.pinwrap__bd{position:absolute;inset:0;background:rgba(8,8,10,.6);backdrop-filter:blur(6px)}
.pinwrap__box{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:2.2rem;max-width:380px;width:100%;text-align:center;
  box-shadow:var(--shadow-lg);animation:pop .4s var(--ease);
}
.pinwrap__box h3{font-size:1.5rem;margin-bottom:.5rem}
.modal-x{
  position:absolute;top:.9rem;right:.9rem;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  font-size:1.2rem;line-height:1;cursor:pointer;transition:.25s;
}
.modal-x:hover{background:var(--bg-alt);color:var(--ink)}
.pin__hint{font-size:.88rem;color:var(--ink-2);margin-bottom:1.3rem}
.pin__input{
  width:100%;font-size:1.6rem;letter-spacing:.5em;text-align:center;
  padding:.65rem .5rem;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--bg);transition:border-color .25s;
}
.pin__input:focus{border-color:var(--accent);outline:none}
.pin__err{font-size:.85rem;color:#d03b3b;margin:.7rem 0 0}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.7rem 1.3rem;border-radius:999px;font-size:.92rem;font-weight:500;
  border:1px solid transparent;transition:.28s var(--ease);
}
.btn--primary{background:var(--ink);color:var(--bg);box-shadow:var(--shadow)}
.btn--primary:hover{box-shadow:var(--shadow-lg)}
.btn--ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink-3)}
.btn--sm{padding:.42rem .9rem;font-size:.83rem}
.pinwrap__box .btn{margin-top:1.3rem}

/* ---------- Editor ---------- */
.editor{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:140;
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  animation:edIn .45s var(--ease);
}
@keyframes edIn{from{transform:translateX(100%)}}
.editor__bar{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem 1rem;flex-wrap:wrap;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--line);flex:none;
}
.editor__bar strong{display:block;font-weight:500;font-size:.95rem;white-space:nowrap}
.editor__bar small{display:block;font-size:.76rem;color:var(--ink-3)}
.editor__acts{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.editor__body{flex:1;overflow-y:auto;padding:1.1rem;display:grid;gap:.8rem;align-content:start}

.ed-field{display:grid;gap:.3rem}
.ed-field > span{font-size:.76rem;color:var(--ink-3)}
.ed-field input,.ed-field textarea{
  width:100%;font-size:.9rem;padding:.5rem .65rem;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);resize:vertical;transition:border-color .25s;
}
.ed-field input:focus,.ed-field textarea:focus{border-color:var(--accent);outline:none}
.ed-box{
  border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-alt);
  padding:.8rem;display:grid;grid-template-columns:64px 1fr;gap:.7rem;align-items:start;
}
.ed-box img{width:64px;height:64px;object-fit:cover;border-radius:7px;background:var(--line)}
.ed-box__felder{display:grid;gap:.5rem;min-width:0}
.ed-box__datei{font-size:.7rem;color:var(--ink-3);word-break:break-all}

/* ---------- Toast & Fuß ---------- */
.toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:210;
  background:var(--ink);color:var(--bg);font-size:.88rem;
  padding:.7rem 1.2rem;border-radius:999px;box-shadow:var(--shadow-lg);
}
.appfoot{
  max-width:var(--max);margin:0 auto;padding:1.6rem clamp(1rem,4vw,2rem) 2.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-3);
}
.appfoot a{color:var(--ink-2);border-bottom:1px solid var(--line)}
.appfoot a:hover{color:var(--ink)}

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

/* Ladezustand und Fehlerfall in der Bildbühne */
.lb__buehne.laedt::after{
  content:"";position:absolute;width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);border-top-color:#fff;
  animation:dreh .8s linear infinite;
}
@keyframes dreh{to{transform:rotate(360deg)}}
.lb__buehne.kaputt::after{
  content:"Bild konnte nicht geladen werden";
  position:absolute;font-size:.86rem;color:rgba(255,255,255,.6);
  padding:0 1.5rem;text-align:center;
}
.lb__buehne.laedt img{opacity:.25}
.lb__buehne img{transition:opacity .3s var(--ease)}

/* ---------- Editor: Hochladen, Warnung, Löschen ---------- */
.editor__upload{padding:1rem 1.1rem 0;flex:none}
.ablage{
  display:grid;place-items:center;gap:.3rem;text-align:center;cursor:pointer;
  padding:1.3rem 1rem;border:1.5px dashed var(--line);border-radius:var(--radius-s);
  background:var(--bg-alt);transition:.25s var(--ease);
}
.ablage:hover,.ablage.drueber{border-color:var(--accent);background:var(--accent-soft)}
.ablage svg{width:22px;height:22px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ablage.drueber svg{stroke:var(--accent)}
.ablage span{font-size:.86rem;color:var(--ink-2)}
.ablage b{font-weight:500;color:var(--ink)}
.ablage small{font-size:.74rem;color:var(--ink-3)}

.fortschritt{height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:.6rem}
.fortschritt > div{height:100%;width:0;background:var(--accent);transition:width .2s linear}

.warnung{
  margin:.9rem 1.1rem 0;padding:.7rem .85rem;border-radius:var(--radius-s);
  font-size:.8rem;line-height:1.5;
  color:#8a2b2b;background:rgba(208,59,59,.09);border:1px solid rgba(208,59,59,.3);
}
html[data-theme="dark"] .warnung{color:#ffb4b4}

.ed-box__kopf{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.ed-weg{
  background:none;border:0;cursor:pointer;font-size:.74rem;color:var(--ink-3);
  padding:.15rem .4rem;border-radius:5px;transition:.2s;flex:none;
}
.ed-weg:hover{color:#d03b3b;background:rgba(208,59,59,.1)}

/* ---------- Werkzeuge auf der Bildfläche ---------- */
.lb__werkzeuge{
  position:absolute;top:clamp(.5rem,1.6vw,1rem);right:clamp(.5rem,1.6vw,1rem);
  z-index:4;display:flex;gap:.4rem;
}
.lb__wz{
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;color:#fff;background:rgba(20,20,24,.55);
  backdrop-filter:blur(8px);transition:.25s var(--ease);
}
.lb__wz:hover{background:rgba(20,20,24,.85);transform:scale(1.07)}
.lb__wz svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* ausgeblendete Daten: Knopf zeigt den Zustand */
.lb__wz.is-aus{background:rgba(255,255,255,.9);color:#111}
.lb__wz.is-aus:hover{background:#fff}
@media (max-width:900px){
  .lb__wz{width:34px;height:34px}
  .lb__werkzeuge{top:.5rem;right:.5rem}
}

/* ---------- Editor: Sortieren ---------- */
.sortleiste{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  margin-top:.8rem;font-size:.76rem;color:var(--ink-3);
}
.ed-box{grid-template-columns:auto 64px 1fr!important;position:relative}
.ed-griff{
  align-self:center;cursor:grab;color:var(--ink-3);font-size:1rem;line-height:1;
  padding:.2rem .1rem;user-select:none;
}
.ed-griff:active{cursor:grabbing}
.ed-box.zieht{opacity:.45}
.ed-box.ziel{outline:2px dashed var(--accent);outline-offset:2px}
.ed-box__acts{display:flex;gap:.1rem;flex:none}
.ed-link[disabled]{opacity:.3;cursor:not-allowed}
.ed-link[disabled]:hover{color:var(--ink-3);background:none}