:root { --grund: #0f1317; --flaeche: #1a2027; --text: #e9edf1; --leise: #9aa7b4; --akzent: #e8b04a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: inherit; }
button, select { font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid #36414d;
  border-radius: 8px; padding: .45em .9em; cursor: pointer; }
button:hover, button.aktiv { border-color: var(--akzent); color: var(--akzent); }
[hidden] { display: none !important; }

/* --- Einstiegsseite --- */
#held { min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-end;
  background: #1a2027 center / cover no-repeat; }
.held-text { padding: 0 6vw 1.5rem; }
#held h1 { margin: 0; font-size: clamp(2.6rem, 9vw, 6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
#held h1 span { color: var(--akzent); font-weight: 300; }
#held p { margin: .4rem 0 0; font-size: 1.25rem; color: var(--leise); }
#jahre { position: sticky; top: 0; display: flex; gap: .4rem; flex-wrap: wrap; padding: .8rem 6vw;
  background: rgba(15, 19, 23, .85); backdrop-filter: blur(8px); }
#jahre a { text-decoration: none; padding: .3em 1em; border: 1px solid #36414d; border-radius: 99px; }
#jahre a:hover { border-color: var(--akzent); color: var(--akzent); }
#trips { padding: 1rem 6vw 3rem; }
#trips h2 { font-size: 2rem; margin: 2.2rem 0 1rem; scroll-margin-top: 4.5rem; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.trip-karte { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px;
  background: var(--flaeche); text-decoration: none; }
.trip-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.trip-karte:hover img { transform: scale(1.05); }
.trip-text { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); display: flex; flex-direction: column; }
.trip-text .zeit { color: var(--akzent); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.trip-text strong { font-size: 1.5rem; line-height: 1.2; }
.trip-text .anzahl { color: var(--leise); font-size: .85rem; }
.leer, footer { color: var(--leise); }
footer { padding: 1.5rem 6vw 2.5rem; font-size: .9rem; border-top: 1px solid #232b34; }

/* --- Trip: Uebersicht --- */
#kopf { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  padding: .7rem 3vw; background: rgba(15, 19, 23, .9); backdrop-filter: blur(8px); }
#kopf h1 { margin: 0; font-size: 1.3rem; flex: 1 1 12rem; }
.heim { text-decoration: none; color: var(--leise); }
.heim:hover { color: var(--akzent); }
.modi { display: flex; gap: .5rem; flex-wrap: wrap; }
#raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; padding: 4px 3vw 3rem; }
#raster button { position: relative; padding: 0; border: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 1; }
#raster img { width: 100%; height: 100%; object-fit: cover; display: block; }
#raster button:hover img { opacity: .8; }
#raster .video::after { content: "▶"; position: absolute; right: 6px; bottom: 4px; color: #fff;
  text-shadow: 0 0 6px #000; font-size: 1.2rem; }
body.buehne-offen { overflow: hidden; }

/* --- Trip: Buehne --- */
#buehne { position: fixed; inset: 0; z-index: 10; background: #000; display: flex; flex-direction: column; }
#leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .7rem; background: #0b0e11; }
#leiste label { color: var(--leise); display: flex; align-items: center; gap: .4rem; }
#info { margin-left: auto; color: var(--leise); white-space: pre; font-variant-numeric: tabular-nums; }
#flaeche { flex: 1; min-height: 0; display: flex; }
#bild { position: relative; flex: 1; min-width: 0; min-height: 0; }
#foto, #film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#zurueck, #weiter { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 5rem; padding: 0;
  font-size: 2.2rem; background: rgba(0, 0, 0, .35); border: 0; color: #fff; opacity: .6; }
#zurueck:hover, #weiter:hover { opacity: 1; color: var(--akzent); }
#zurueck { left: 0; border-radius: 0 8px 8px 0; }
#weiter { right: 0; border-radius: 8px 0 0 8px; }
#karte-rahmen { display: none; position: relative; flex: 1; min-width: 0; min-height: 0; }
.mit-karte #karte-rahmen { display: block; }
#karte { position: absolute; inset: 0; }
#ohne-ort { position: absolute; z-index: 500; left: 50%; bottom: 2rem; transform: translateX(-50%); margin: 0;
  padding: .5em 1em; border-radius: 8px; background: rgba(0, 0, 0, .75); white-space: nowrap; }
.leaflet-container { font: inherit; color: #222; }
@media (max-aspect-ratio: 1/1) { #flaeche { flex-direction: column; } }

/* --- Passwortseite eines Trips --- */
body.anmelden { min-height: 100vh; display: grid; place-items: center; }
.anmelden main { width: min(22rem, 88vw); display: flex; flex-direction: column; gap: 1.4rem; }
.anmelden h1 { margin: 0; font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.anmelden h1 span { color: var(--akzent); font-weight: 300; }
.anmelden form { display: flex; flex-direction: column; gap: .7rem; }
.anmelden label { color: var(--leise); }
.anmelden input { font: inherit; font-size: 1.2rem; color: var(--text); background: var(--flaeche);
  border: 1px solid #36414d; border-radius: 8px; padding: .6em .8em; }
.anmelden input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.anmelden button { padding: .7em; font-weight: 600; }
#falsch { margin: 0; color: #ff8a8a; }
.anmelden a { color: var(--leise); text-decoration: none; }