[hidden]{display:none!important}
:root{
  --bg:#F1D4AE; --card:#FBEBD6; --ink:#2B1E14; --muted:#6B5440; --line:#D9B287;
  --sea:#CFE3E4; --land:#F8E8CF; --land-edge:#D2B58D; --grid:#B3CFD1;
  --accent:#0B6E76; --route:#A8321C; --plan:#8C7A68; --ph:#E8C79E;
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#2B1D12; --card:#37271A; --ink:#F4E6D4; --muted:#C0A586; --line:#4C3826;
    --sea:#14282B; --land:#3E3122; --land-edge:#5E4A33; --grid:#22393C;
    --accent:#5CC4CB; --route:#F08A5D; --plan:#8A7560; --ph:#3E2D1E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#2B1D12; --card:#37271A; --ink:#F4E6D4; --muted:#C0A586; --line:#4C3826;
  --sea:#14282B; --land:#3E3122; --land-edge:#5E4A33; --grid:#22393C;
  --accent:#5CC4CB; --route:#F08A5D; --plan:#8A7560; --ph:#3E2D1E;
  color-scheme: dark;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body)}
#app{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);padding-block:28px 40px}
a{color:var(--accent)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Kopf */
.kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:28px}
.eyebrow{margin:0 0 6px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font:400 clamp(34px,5.5vw,58px)/1.02 var(--display);letter-spacing:-.01em;text-wrap:balance}
.zahlen{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0}
.zahlen div{display:grid;gap:2px}
.zahlen dt{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.zahlen dd{margin:0;font:400 22px/1.2 var(--display);font-variant-numeric:tabular-nums}

/* Raster */
.raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:36px;align-items:start}
@media (max-width:860px){.raster{grid-template-columns:1fr}}
.karte-box{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)}
@media (max-width:860px){.karte-box{position:static}}
#karte{display:block;width:100%;height:auto;max-height:78vh;border-radius:6px;border:1px solid var(--line);background:var(--sea)}
@media (max-width:860px){#karte{max-height:60vh}}
.legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;font:12px/1.4 var(--mono);color:var(--muted)}
.legende span{display:inline-flex;align-items:center;gap:7px}
.legende i{display:inline-block;width:20px;height:0;border-top:3px solid var(--route)}
.legende .l-geplant{border-top:2px dashed var(--plan)}
.legende .l-hier{width:10px;height:10px;border:2px solid var(--route);border-radius:50%;background:var(--card)}

/* Karte */
.k-sea{fill:var(--sea)}
.k-land{fill:var(--land);stroke:var(--land-edge);stroke-width:.8}
.k-grid{stroke:var(--grid);stroke-width:.6;fill:none}
.k-gridlabel{fill:var(--muted);font:9px var(--mono);opacity:.8}
.k-plan{fill:none;stroke:var(--plan);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.k-weg{fill:none;stroke:var(--route);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.k-punkt{fill:var(--card);stroke:var(--plan);stroke-width:2;cursor:pointer}
.k-punkt.erlebt{stroke:var(--route)}
.k-punkt.aktiv{fill:var(--route);stroke:var(--route)}
.k-stop:hover .k-punkt{stroke-width:3}
.k-name{fill:var(--ink);font:500 11px var(--body);paint-order:stroke;stroke:var(--land);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.k-hier{fill:none;stroke:var(--route);stroke-width:2}
@media (prefers-reduced-motion:no-preference){
  .k-hier{animation:puls 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes puls{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
}
.k-massstab line{stroke:var(--ink);stroke-width:1.5}
.k-massstab text{fill:var(--ink);font:10px var(--mono)}
.k-inset rect{fill:var(--card);stroke:var(--line)}
.k-inset text{fill:var(--muted);font:10px var(--mono)}
.k-inset .k-inset-titel{fill:var(--ink);font:500 11px var(--body)}

/* Liste */
.etappe{margin:0 0 30px}
.etappe h2{margin:0 0 10px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tage{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tag-zeile{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:baseline;width:100%;padding:12px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.tag-zeile:hover{background:var(--card)}
.tz-nr{font:500 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.tz-titel{font-weight:600}
.tz-sub{display:block;font-size:14px;color:var(--muted)}
.tz-status{font:11px var(--mono);letter-spacing:.04em;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid var(--line);color:var(--muted)}
.tz-status.erlebt{border-color:transparent;background:var(--route);color:#fff}
.tag-zeile.geplant .tz-titel{font-weight:500;color:var(--muted)}
.tag-zeile.aktiv{background:var(--card);box-shadow:inset 3px 0 0 var(--route)}

/* Tagesansicht */
.zurueck{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;font-size:14px}
.tag-kopf .eyebrow{margin-bottom:8px}
.tag-kopf h2{margin:0 0 14px;font:400 clamp(28px,4vw,40px)/1.1 var(--display);text-wrap:balance}
.fakten{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 22px;padding:12px 0;border-block:1px solid var(--line)}
.fakten div{display:grid}
.fakten dt{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fakten dd{margin:0;font-variant-numeric:tabular-nums}
.bericht{max-width:65ch}
.bericht p{margin:0 0 1em}
.hinweis{padding:16px 18px;border:1px dashed var(--line);border-radius:6px;color:var(--muted);max-width:65ch}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:26px 0 0}
.foto{margin:0;cursor:zoom-in;border:0;padding:0;background:none;text-align:left}
.foto .bild{aspect-ratio:4/3;max-width:100%;border-radius:4px;overflow:hidden;background:var(--ph)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.platzhalter{display:grid;place-items:center;width:100%;height:100%;font:11px var(--mono);color:var(--muted);background:repeating-linear-gradient(135deg,var(--ph) 0 10px,transparent 10px 20px)}
.foto figcaption{font-size:13px;color:var(--muted);margin-top:5px}
.blaettern{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:16px;border-top:1px solid var(--line)}
.blaettern button{border:0;background:none;padding:4px 0;cursor:pointer;color:var(--accent);font-weight:500;text-align:left}
.blaettern button:last-child{text-align:right}
.blaettern button[disabled]{visibility:hidden}

/* Leuchtkasten */
.leuchtkasten{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:rgba(8,14,16,.88)}
.leuchtkasten figure{margin:0;max-width:min(1100px,100%)}
#lk-bild{aspect-ratio:4/3;width:min(1000px,90vw);max-height:80vh;border-radius:4px;overflow:hidden;background:#1C2C30}
#lk-bild img{width:100%;height:100%;object-fit:contain}
#lk-bild .platzhalter{color:#93A4A7;background:repeating-linear-gradient(135deg,#1C2C30 0 10px,#15242A 10px 20px)}
.leuchtkasten figcaption{color:#E4EDED;margin-top:10px}
.lk-zu{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:18px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}

.fuss{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);font:12px/1.6 var(--mono);color:var(--muted)}
#lk-bild .bild{width:100%;height:100%}
.etappe-datum{color:var(--muted);opacity:.75;letter-spacing:.04em}