/* Motorradtour Nordtschechien 2026 — mobile-first */
:root{
  --blau:#12364d; --blau2:#1d4d6e; --orange:#d7672b; --orange2:#f08a4b;
  --bg:#f4f6f7; --card:#ffffff; --text:#182b3a; --muted:#5b6b78;
  --ok:#2e7d32; --warn:#b26a00; --alarm:#c62828; --linie:#e2e8ec;
  --radius:12px; --schatten:0 2px 10px rgba(18,54,77,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;padding-bottom:74px}
a{color:var(--blau2)}
img{max-width:100%}

/* Kopf */
header.top{background:linear-gradient(135deg,var(--blau),var(--blau2));color:#fff;padding:14px 16px 12px}
header.top .zurueck{color:#bcd6e8;text-decoration:none;font-size:.85rem}
header.top h1{margin:2px 0 2px;font-size:1.25rem;line-height:1.25}
header.top .untertitel{color:#bcd6e8;font-size:.85rem;margin:0}
.kennzahlen{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.kennzahl{background:rgba(255,255,255,.13);border-radius:8px;padding:5px 10px;font-size:.8rem}
.kennzahl b{display:block;font-size:.95rem}

/* Tages-Navigation unten, fest */
nav.tagnav{position:fixed;left:0;right:0;bottom:0;background:var(--blau);display:flex;z-index:1000;box-shadow:0 -2px 8px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom)}
nav.tagnav a{flex:1;text-align:center;color:#bcd6e8;text-decoration:none;padding:9px 2px 8px;font-size:.72rem;line-height:1.25;border-top:3px solid transparent}
nav.tagnav a b{display:block;font-size:.95rem}
nav.tagnav a.aktiv{color:#fff;border-top-color:var(--orange);background:rgba(255,255,255,.08)}

main{padding:14px 12px;max-width:860px;margin:0 auto}
h2{color:var(--blau);font-size:1.1rem;margin:22px 0 10px;border-bottom:3px solid var(--orange);padding-bottom:4px}
h2:first-child{margin-top:4px}
.karte{height:340px;border-radius:var(--radius);box-shadow:var(--schatten);z-index:0}
@media(min-width:700px){.karte{height:440px}}
.hinweis{font-size:.8rem;color:var(--muted);margin:6px 2px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--schatten);padding:14px;margin-bottom:12px}
.card h3{margin:0 0 6px;font-size:1rem;color:var(--blau)}
.card p{margin:6px 0}
.klein{font-size:.85rem;color:var(--muted)}

/* Stopps */
.stopp{display:flex;gap:12px;align-items:flex-start}
.stopp .nr{flex:0 0 40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.stopp.optional .nr{background:#8aa0af}
.stopp .inhalt{flex:1;min-width:0}
.badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:99px;background:#e8eef2;color:var(--blau2);margin-right:6px;vertical-align:middle}
.badge.foto{background:#fdecdf;color:var(--orange)}
.badge.essen{background:#e5f2e6;color:var(--ok)}
.badge.sehen{background:#e3ecf5;color:var(--blau2)}
.badge.opt{background:#eef1f3;color:var(--muted)}
.badge.warnung{background:#fdeaea;color:var(--alarm)}
.stopp .links{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.knopf{display:inline-block;text-decoration:none;font-size:.82rem;font-weight:600;padding:7px 12px;border-radius:8px;background:var(--blau2);color:#fff}
.knopf.hell{background:#e8eef2;color:var(--blau2)}
.knopf.orange{background:var(--orange);color:#fff}
.knopf:active{opacity:.8}

/* Zeitplan */
.zeitplan{list-style:none;margin:0;padding:0}
.zeitplan li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--linie);font-size:.92rem}
.zeitplan li:last-child{border-bottom:0}
.zeitplan .uhr{flex:0 0 52px;font-weight:700;color:var(--orange)}

/* Tabellen */
.tabelle{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.tabelle th{background:var(--blau);color:#fff;text-align:left;padding:8px 10px;font-size:.8rem}
.tabelle td{padding:8px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle tr:last-child td{border-bottom:0}
.scrollbox{overflow-x:auto;border-radius:var(--radius)}

/* Meldungen */
.meldung{border-left:4px solid var(--warn);background:#fff7e8;padding:10px 12px;border-radius:8px;margin:10px 0;font-size:.9rem}
.meldung.rot{border-color:var(--alarm);background:#fdecec}
.meldung.gruen{border-color:var(--ok);background:#eef7ee}
.meldung b{display:block;margin-bottom:2px}

/* Downloads */
.dl-liste{display:flex;flex-direction:column;gap:8px}
.dl-liste a{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:10px;box-shadow:var(--schatten);padding:11px 13px;text-decoration:none;color:var(--text);font-size:.92rem}
.dl-liste a .ikon{flex:0 0 36px;height:36px;border-radius:8px;background:var(--blau2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem}
.dl-liste a .ikon.gpx{background:var(--ok)}
.dl-liste a .ikon.tt{background:#444}
.dl-liste a .ikon.kv{background:var(--orange)}
.dl-liste a small{display:block;color:var(--muted)}

/* Übersicht-Kacheln */
.tage-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.tage-grid{grid-template-columns:1fr 1fr}}
.tagkachel{display:block;text-decoration:none;color:var(--text);background:var(--card);border-radius:var(--radius);box-shadow:var(--schatten);padding:14px;border-left:5px solid var(--orange)}
.tagkachel .tag{font-size:.75rem;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.05em}
.tagkachel h3{margin:2px 0 4px;font-size:1.02rem;color:var(--blau)}
.tagkachel .fakten{font-size:.82rem;color:var(--muted)}

/* Stopp-Fotos */
.stoppfoto{width:100%;max-height:230px;object-fit:cover;border-radius:8px;margin:8px 0 2px;display:block}
.fotocredit{font-size:.68rem;color:var(--muted);margin-bottom:4px}
.card.resv{border-left:5px solid var(--orange);}
.card.resv .links{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}

footer{margin:26px 0 8px;text-align:center;font-size:.75rem;color:var(--muted)}