:root { --bg:#f4f1ea; --flaeche:#fff; --rand:#e4ded2; --text:#1f1d1a; --leise:#6d675d; --akzent:#2f6f62; --akzent-hell:#dcece7; color-scheme:light; }
@media(prefers-color-scheme:dark) {
  :root:not([data-thema="hell"]) { --bg:#121211; --flaeche:#1c1b19; --rand:#34322e; --text:#eeeae3; --leise:#b0a99e; --akzent:#6cc3ac; --akzent-hell:#1f3631; color-scheme:dark; }
}
:root[data-thema="dunkel"] { --bg:#121211; --flaeche:#1c1b19; --rand:#34322e; --text:#eeeae3; --leise:#b0a99e; --akzent:#6cc3ac; --akzent-hell:#1f3631; color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; color:inherit; }
button,a,input { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--akzent); outline-offset:3px; }
.nur-screenreader { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.kopf { border-bottom:1px solid var(--rand); }
.marke { display:flex; align-items:center; gap:12px; max-width:1500px; margin:auto; padding:18px 24px; }
.marke h1 { font-size:1.12rem; letter-spacing:-.02em; line-height:1.3; margin:0; font-weight:700; }
.logo { display:flex; gap:4px; }
.logo i { display:block; width:14px; height:24px; border-radius:4px; background:var(--akzent); transform:rotate(-6deg); }
.logo i+i { background:#e07a5f; transform:rotate(6deg); }
.thema-knopf { margin-left:auto; display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--rand); border-radius:50%; background:var(--flaeche); cursor:pointer; }
main { max-width:1500px; margin:auto; padding:12px 24px 40px; }
.imagen-auswahl { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; font-size:.88rem; color:var(--leise); }
.imagen-zaehler { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; font-size:.8rem; text-align:right; }
.imagen-zaehler span { white-space:nowrap; }
.imagen-auswahl label { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--text); cursor:pointer; position:relative; }
.auswahl-schalter input { position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.schalter-spur { display:inline-flex; align-items:center; width:38px; height:24px; padding:3px; background:var(--rand); border-radius:99px; transition:background .16s; }
.schalter-spur span { display:block; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .16s; }
.auswahl-schalter input:checked+.schalter-spur { background:var(--akzent); }
.auswahl-schalter input:checked+.schalter-spur span { transform:translateX(14px); }
.auswahl-schalter input:focus-visible+.schalter-spur { outline:3px solid var(--akzent); outline-offset:3px; }
.imagen-feed { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.imagen-karte { background:var(--flaeche); border:1px solid var(--rand); border-radius:18px; overflow:hidden; }
.imagen-bild { display:block; width:100%; border:0; padding:0; background:var(--bg); cursor:zoom-in; }
.imagen-bild img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; }
.imagen-bild:focus-visible { outline-offset:-3px; }
.imagen-text { padding:14px 16px 18px; }
.imagen-nummer { color:var(--leise); font-size:.72rem; }
.imagen-text h2 { margin:4px 0 6px; font-size:1rem; line-height:1.4; }
.imagen-text p { margin:0; color:var(--leise); font-size:.85rem; }
.imagen-like { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:14px; padding:8px 14px; background:var(--flaeche); border:1px solid var(--rand); border-radius:12px; cursor:pointer; font-size:.88rem; }
.imagen-like span { font-size:1.4rem; line-height:1; }
.imagen-like[aria-pressed="true"] { background:var(--akzent-hell); color:var(--akzent); border-color:var(--akzent); }
.imagen-like:disabled { opacity:.55; cursor:wait; }
.imagen-like-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.imagen-like-zeile .imagen-like { margin-top:0; }
.imagen-like-anzahl { font-size:.8rem; color:var(--leise); white-space:nowrap; }
#imagenLeer,#imagenFehler { color:var(--leise); font-size:.9rem; }
#imagenFehler button { border:0; padding:8px; background:none; text-decoration:underline; color:var(--akzent); cursor:pointer; }
.lichtkasten { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:60px 20px 20px; background:rgba(15,15,13,.94); color:#fff; overflow:auto; }
.lichtkasten figure { margin:0; max-width:1448px; width:100%; text-align:center; }
.lichtkasten img { display:block; max-width:100%; max-height:72svh; width:auto; height:auto; margin:auto; object-fit:contain; }
.lichtkasten figcaption { margin:14px auto 0; max-width:850px; font-size:.85rem; }
.lichtkasten figcaption p { margin:6px 0 12px; }
.lichtkasten a { color:#b1e3d5; padding:8px; display:inline-block; }
.lk-zu { position:fixed; top:10px; right:14px; width:44px; height:44px; border:0; border-radius:50%; background:#fff2; color:#fff; cursor:pointer; font-size:1.2rem; }
.toast { position:fixed; z-index:70; left:50%; bottom:24px; transform:translateX(-50%); max-width:calc(100vw - 28px); width:max-content; padding:12px 18px; background:var(--text); color:#fff; border-radius:14px; text-align:center; font-size:.85rem; }
@media(max-width:1100px) { .imagen-feed { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .marke { padding:15px 16px; } .marke h1 { font-size:1.05rem; } main { padding:8px 12px 28px; } .imagen-feed { grid-template-columns:minmax(0,1fr); gap:16px; } .lichtkasten { padding:60px 12px 20px; } .lichtkasten img { max-height:60svh; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }