/* Wander-App — mobil zuerst, iPhone-Safe-Areas, navy/gold wie die Tour-PDFs */
:root {
  --navy: #0A3078;
  --navy-2: #144A96;
  --navy-deep: #071F4E;
  --gold: #B0894F;
  --gold-lt: #D4B483;
  --ink: #1A1A18;
  --muted: #5A5A54;
  --bg: #EEF0F4;
  --paper: #FFFFFF;
  --line: #D5DAE3;
  --ok: #0B6B4A;
  --warn: #B4531E;
  --alert: #8B1E1E;
  --purple: #5C2D91;
  --day-1: #0A3078;
  --day-2: #0B6B4A;
  --day-3: #B4531E;
  --day-4: #5C2D91;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(10, 48, 120, 0.08), 0 8px 24px rgba(10, 48, 120, 0.06);
  --font: "Liberation Sans", "Segoe UI", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "IBM Plex Serif", "Liberation Serif", Georgia, serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
  min-height: 100dvh;
}
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: var(--navy); }
a:hover { color: var(--navy-2); }

.skip {
  position: absolute; left: -999px; top: 0;
}
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 10000; }

/* —— Header —— */
.site-header {
  background: var(--navy);
  color: #fff;
  padding: calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) 14px calc(16px + var(--safe-left));
  position: sticky;
  top: 0;
  z-index: 2500;
  box-shadow: 0 2px 10px rgba(7, 31, 78, 0.35);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name dates"
    "note note"
    "tabs tabs"
    "kpis kpis";
  align-items: baseline;
  column-gap: 20px;
}
.header-bar { display: contents; }
#tour-name {
  grid-area: name;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}
.header-dates {
  grid-area: dates;
  color: var(--gold-lt);
  font-weight: 600;
  font-size: 0.95rem;
  justify-self: end;
}
.header-note {
  grid-area: note;
  margin: 4px 0 10px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
}
.variant-tabs {
  grid-area: tabs;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.kpis { grid-area: kpis; }
.variant-tabs button {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
}
.variant-tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.variant-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.kpi {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
}
.kpi .lbl { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-lt); }
.kpi .val { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.kpi .sub { line-height: 1.3; }
.kpi .sub { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); margin-top: 1px; }

@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tour-name { font-size: 1.22rem; }
}

/* Schmale Screens: nur Tourname + Varianten-Reiter bleiben kleben, KPIs und Hinweise scrollen mit.
   Während der Navigation (body.is-navigating) ist die Leiste nicht sticky, damit die Karte frei bleibt. */
@media (max-width: 700px) {
  .site-header {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 12px;
    box-shadow: none;
  }
  .header-bar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2500;
    background: var(--navy);
    padding: calc(8px + var(--safe-top)) calc(16px + var(--safe-right)) 8px calc(16px + var(--safe-left));
    box-shadow: 0 2px 10px rgba(7, 31, 78, 0.35);
  }
  #tour-name {
    font-size: 1.05rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .header-bar .variant-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin: 6px 0 0;
    gap: 4px;
  }
  .header-bar .variant-tabs button {
    padding: 4px 10px;
    font-size: 0.78rem;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .header-dates,
  .header-note,
  .kpis {
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }
  .header-dates { margin-top: 10px; }
  .header-note { margin-top: 2px; }
  .kpis { margin-top: 8px; }
  .stage-hero,
  .stage-hero > .card:first-child,
  #map {
    scroll-margin-top: calc(var(--header-h, 0px) + 8px);
  }
  body.is-navigating .header-bar {
    position: static;
    box-shadow: none;
  }
  body.is-navigating .stage-hero,
  body.is-navigating .stage-hero > .card:first-child,
  body.is-navigating #map {
    scroll-margin-top: 8px;
  }
}

/* —— Layout —— */
main { padding: 12px calc(12px + var(--safe-right)) calc(24px + var(--safe-bot)) calc(12px + var(--safe-left)); }
.stage-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .stage-hero { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  overflow: hidden;
}
.card h2, .card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 1.15rem; color: var(--navy-deep); }
.card-body { padding: 12px 14px 14px; }

#map {
  height: 56vh;
  min-height: 320px;
  width: 100%;
  background: #dce3d6;
  isolation: isolate;
  z-index: 0;
  overflow: hidden;
}
@media (min-width: 701px) {
  .stage-hero { scroll-margin-top: 12px; }
}
@media (max-width: 900px) {
  #map { height: 48vh; min-height: 260px; }
}

/* Navy labels on the map — white bold on solid opaque navy */
.wd-label { background: transparent !important; border: none !important; }
.wd-label span {
  background: #0A3078;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: inline-block;
  font-family: var(--font);
}
.wd-label.wd-label-start span { background: #0B6B4A; }
.wd-label.wd-label-end span { background: #5C2D91; }
.wd-label.wd-label-station span { background: #144A96; border: 1px solid var(--gold-lt); }

.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.88rem; min-width: 200px; }
.popup-hotel h3 { margin: 0 0 6px; font-size: 1rem; color: var(--navy); }
.popup-hotel p { margin: 2px 0; }
.popup-hotel a { word-break: break-all; }
.popup-meta { color: var(--muted); font-size: 0.8rem; }

/* Position / direction marker */
.wd-pos {
  width: 22px; height: 22px;
  position: relative;
}
.wd-pos .dot {
  position: absolute; left: 5px; top: 5px;
  width: 12px; height: 12px;
  background: #1a73e8;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(10, 48, 120, 0.3);
}
.wd-pos .pulse {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(26, 115, 232, 0.35);
  animation: pul 1.8s ease-out infinite;
}
@keyframes pul {
  0% { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(2.1); opacity: 0; }
}
.wd-arrow-wrap {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important; border: none !important;
}
.wd-arrow {
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 22px solid #1a73e8;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
  transform-origin: 50% 70%;
}
.wd-arrow.off { border-bottom-color: #c43c1a; }

/* —— Profile —— */
.profile-wrap { padding: 4px 8px 8px; }
#profile-svg { width: 100%; height: 200px; display: block; touch-action: none; }
@media (max-width: 640px) { #profile-svg { height: 168px; } }
.profile-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 0.75rem; color: var(--muted);
  padding: 0 14px 10px;
}
.profile-legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 4px; vertical-align: -1px;
}
.profile-tip {
  font-size: 0.8rem;
  padding: 0 14px 10px;
  color: var(--ink);
  min-height: 1.4em;
}

/* —— Nav panel —— */
.nav-panel { display: flex; flex-direction: column; }
.nav-controls {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px 8px;
}
.btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}
.btn:hover { background: var(--navy-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn.secondary:hover { background: #eef2fb; }
.btn.gold { background: var(--gold); color: #1a1408; }
.btn.gold:hover { background: #c49a5d; }
.btn.danger { background: var(--alert); }
.btn.sm { padding: 5px 9px; font-size: 0.78rem; font-weight: 600; }

.toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--ink);
  user-select: none;
}
.day-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px 8px; }
.day-pills button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.day-pills button[aria-selected="true"] { color: #fff; border-color: transparent; }
.day-pills button[data-day="0"][aria-selected="true"] { background: var(--day-1); }
.day-pills button[data-day="1"][aria-selected="true"] { background: var(--day-2); }
.day-pills button[data-day="2"][aria-selected="true"] { background: var(--day-3); }
.day-pills button[data-day="3"][aria-selected="true"] { background: var(--day-4); }
.day-pills button[data-day="auto"][aria-selected="true"] { background: var(--navy); }

.nav-banner {
  margin: 0 14px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  display: none;
}
.nav-banner.show { display: block; }
.nav-banner.off-route { background: #fde8e0; color: var(--alert); border: 1px solid #e7b0a0; }
.nav-banner.ok { background: #e5f4ec; color: var(--ok); border: 1px solid #b7dcc8; }
.nav-banner.info { background: #eef2fb; color: var(--navy); border: 1px solid #c5d0ea; }

.nav-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 14px 12px;
}
.nav-stat {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
}
.nav-stat .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.nav-stat .val { font-size: 1.05rem; font-weight: 700; color: var(--navy-deep); }
.nav-compass {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px 12px;
}
.compass-rose {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  position: relative;
  background: #f7f8fb;
  flex-shrink: 0;
}
.compass-rose .needle {
  position: absolute;
  left: 50%; top: 8%;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 28px solid var(--navy);
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 80%;
  transition: transform 0.2s linear;
}
.compass-rose .n {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; color: var(--muted);
}
.compass-meta { font-size: 0.82rem; color: var(--muted); }
.geo-note, .ios-note {
  margin: 0 14px 12px;
  font-size: 0.78rem;
  color: var(--muted);
  background: #fff8e8;
  border: 1px solid #ead8a6;
  border-radius: 8px;
  padding: 8px 10px;
}
.geo-note[hidden], .ios-note[hidden], [hidden] { display: none !important; }

.sim-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 14px 12px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  padding-top: 10px;
}
.sim-controls label { font-size: 0.8rem; color: var(--muted); }

/* —— Tables —— */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.data th, table.data td {
  text-align: left;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: #f6f7fa;
  font-weight: 700;
}
table.data tr.exception { background: #fff7ef; }
table.data .tag {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: 3px;
}
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.calc-mark { color: var(--muted); font-size: 0.75rem; }

/* hotels / warnings / travel */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.hotel-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
}
.hotel-card.alt { background: #f7f8fb; }
.hotel-card h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--navy); }
.hotel-card .place { font-weight: 600; color: var(--gold); font-size: 0.82rem; margin-bottom: 6px; }
.hotel-card dl { margin: 0 0 8px; display: grid; grid-template-columns: 110px 1fr; gap: 2px 8px; font-size: 0.86rem; }
.hotel-card dt { color: var(--muted); }
.hotel-card dd { margin: 0; }
.warn-block, .peculiar {
  background: #fff7ef;
  border-left: 3px solid var(--warn);
  padding: 8px 10px;
  margin: 8px 0 0;
  font-size: 0.86rem;
}
.warn-block.warn, .peculiar.level-warn { border-left-color: var(--warn); background: #fff7ef; }
.warn-block.info { border-left-color: var(--navy); background: #eef2fb; }
.warn-block h4, .peculiar h4 { margin: 0 0 4px; font-size: 0.88rem; }
.alt-block {
  background: #f3f6f3;
  border-left: 3px solid var(--ok);
  padding: 8px 10px;
  margin: 8px 0 0;
  font-size: 0.86rem;
}
.alt-block h4 { margin: 0 0 4px; font-size: 0.88rem; color: var(--ok); }

.travel-box, .open-box, .sources-box { font-size: 0.9rem; }
.travel-box p, .open-box li, .sources-box li { margin: 0 0 8px; }
.open-box ol { margin: 0; padding-left: 1.2em; }
.sources-box { color: var(--muted); font-size: 0.8rem; }
.sources-box ol { margin: 0; padding-left: 1.2em; }
.footnotes { font-size: 0.8rem; color: var(--muted); margin: 8px 0 0; }
.footnotes p { margin: 0 0 4px; }

/* request form */
#request-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (max-width: 700px) { #request-form { grid-template-columns: 1fr; } }
#request-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 600; }
#request-form input, #request-form textarea, #request-form select {
  font-weight: 400;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}
#request-form .full { grid-column: 1 / -1; }
#request-form .inline {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
  font-weight: 400;
}
#request-form .inline label { flex-direction: row; font-weight: 400; align-items: center; }
#req-output {
  width: 100%;
  min-height: 180px;
  font-family: ui-monospace, "Liberation Mono", monospace;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f7f8fb;
  resize: vertical;
}
.form-actions { display: flex; gap: 8px; align-items: center; }

footer.site-footer {
  position: static;
  z-index: auto;
  padding: 16px 16px calc(20px + var(--safe-bot));
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--line);
  /* Im normalen Dokumentfluss, nie über der Karte — auch nicht während der Navigation. */
}
footer.site-footer .footer-copy {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--navy-deep);
  font-size: 0.88rem;
  line-height: 1.4;
}
footer.site-footer .footer-meta,
footer.site-footer .footer-licenses {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
@media (max-width: 700px) {
  footer.site-footer {
    padding: 16px 14px calc(22px + var(--safe-bot));
  }
  footer.site-footer .footer-copy {
    font-size: 0.86rem;
  }
}
body.is-navigating footer.site-footer {
  position: static;
  z-index: auto;
}
.subtitle { font-size: 0.92rem; margin: 0 0 12px; color: var(--ink); }
.gpx-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* prefetch progress */
#prefetch-status { font-size: 0.8rem; color: var(--muted); padding: 0 14px 10px; }

/* print: hide nav chrome */
@media print {
  .site-header { position: static; }
  .nav-controls, .sim-controls, .geo-note, #request-form, .btn { display: none !important; }
  #map { height: 400px; break-after: page; }
}

/* Tourauswahl und Suchformular (Schritt 2) */
.header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.tour-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, #4a5568);
}
.tour-picker-wrap select {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy-deep, #071a42);
  border: 1px solid var(--line, #c9d0de);
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff;
  max-width: min(320px, 70vw);
}
.req-status {
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, #c9d0de);
  background: #f7f8fb;
}
.req-status.progress {
  border-color: #0A3078;
  background: #eef2fb;
  color: #0A3078;
}
.req-status.success {
  border-color: #0B6B4A;
  background: #eef8f3;
  color: #0B6B4A;
}
.req-status.error {
  border-color: #8B1E3F;
  background: #fbeeee;
  color: #6b1530;
}
#req-api-note { margin-top: 0; }
@media (max-width: 700px) {
  .tour-picker-wrap select { max-width: 100%; }
}


/* —— Mobile Etappen: Karten statt abgeschnittener Tabelle —— */
.stage-cards { display: none; }
.stage-card {
  background: #fff;
  border: 1px solid var(--line, #c9d0de);
  border-radius: 12px;
  padding: 12px 14px 10px;
  margin: 0 0 12px;
}
.stage-card.exception { background: #fff7ef; border-color: #efd2b5; }
.stage-card header { margin-bottom: 8px; }
.stage-card dl { margin: 0; }
.stage-card .stage-row {
  display: grid;
  grid-template-columns: 11.5em 1fr;
  gap: 4px 10px;
  padding: 5px 0;
  border-top: 1px solid #eef0f4;
  align-items: start;
}
.stage-card .stage-row:first-child { border-top: 0; }
.stage-card dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #5b6472);
}
.stage-card dd {
  margin: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}
@media (max-width: 700px) {
  #stage-table-wrap { display: none; }
  .stage-cards { display: block; }
  .stage-card .stage-row { grid-template-columns: 1fr; gap: 1px 0; }
  .stage-card dd { font-size: 1rem; }
}
@media (min-width: 701px) {
  .stage-cards { display: none !important; }
  #stage-table-wrap { display: block; }
  /* Desktop: falls die Tabelle breiter ist, horizontal scrollen statt abschneiden */
  #stage-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data { min-width: 720px; }
  table.data th, table.data td { white-space: nowrap; }
  table.data td:last-child, table.data th:last-child { white-space: normal; }
}

/* Eigene Route (kein offizieller Weg) klar kennzeichnen */
.own-route {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff3cd;
  color: #6b4e00;
  border: 1px solid #e6c55a;
  font-size: 0.8em;
  line-height: 1.3;
  white-space: normal;
}

/* Wegbelag (Balken mit Legende) */
.surf { margin: 2px 0 8px; }
.surf-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #e5e7eb; }
.surf.compact .surf-bar { height: 8px; border-radius: 4px; min-width: 120px; }
.surf-seg { display: block; height: 100%; }
.surf-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 0.86rem; }
.surf.compact .surf-legend { gap: 2px 8px; font-size: 0.74rem; margin-top: 3px; white-space: normal; }
.surf-leg { display: inline-flex; align-items: center; gap: 5px; }
.surf-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.surf-asphalt { background: #4b5563; }
.surf-gravel { background: #c9a75a; }
.surf-natural { background: #4d8b3a; }
.surf-paved { background: #b5643c; }
.surf-unknown { background: repeating-linear-gradient(45deg, #d1d5db 0 4px, #eef0f3 4px 8px); }
td[data-label="Belag"] { min-width: 170px; white-space: normal; }
/* Tabelle: Strecke mit Hinweis umbrechen, Zellen oben ausrichten */
table.data td { vertical-align: top; }
table.data td[data-label="Strecke"] { white-space: normal; min-width: 210px; max-width: 300px; }
table.data .own-route { display: block; max-width: 290px; }
td[data-label="Belag"] { min-width: 210px; }
.surf.compact .surf-leg { white-space: nowrap; }

/* Option „Asphalt möglichst vermeiden“ */
#request-form label.check-opt { flex-direction: row; gap: .6rem; align-items: flex-start; cursor: pointer;
  align-self: end; padding: 8px 10px; border: 1px solid #d9dee6; border-radius: 8px; background: #f7f9f6; }
#request-form label.check-opt input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin-top: .1rem; flex: 0 0 auto; padding: 0; }
#request-form label.check-opt .small { font-weight: 400; }
.avoid-paved { margin: 0 0 .6rem; font-size: .92rem; }
.avoid-badge { display: inline-block; background: #e6f0e3; color: #2f5d27; border: 1px solid #b9d3b1;
  border-radius: 999px; padding: .1rem .6rem; margin-right: .5rem; font-weight: 600; font-size: .85rem; }

/* An-/Abreise an den Etappen */
.travel-note { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--navy, #1b2f5b); background: #f3f6fb;
  font-size: .82rem; line-height: 1.35; border-radius: 0 6px 6px 0; }
.travel-note strong { font-weight: 700; }
.travel-row td { border-top: 0 !important; padding-top: 0 !important; }
.travel-note details { margin-top: 4px; }
.travel-note summary { cursor: pointer; color: var(--navy, #1b2f5b); font-weight: 600; }
.travel-note details p { margin: 4px 0 0; }
.stage-card .travel-note { margin-top: 0; }
.walk-method { font-weight: 600; color: var(--navy, #1b2f5b); }

/* Sehenswürdigkeiten */
.wd-label-poi span { background: #2f7d32 !important; color: #fff !important; border-color: #1f5a22 !important; }
.wd-label-poi-no span { background: #e6e6e6 !important; color: #555 !important; border-color: #aaa !important; }
.detour-note { margin-top: 4px; font-size: .8rem; color: #2f5d27; }
.poi-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.poi-table th, .poi-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e3e7ee; vertical-align: top; }
.poi-ok td:nth-child(2) { color: #2f7d32; font-weight: 600; }
.poi-no td:nth-child(2) { color: #a33; font-weight: 600; }
@media (max-width: 700px) {
  .poi-table thead { display: none; }
  .poi-table tr { display: block; border: 1px solid #e3e7ee; border-radius: 8px; margin-bottom: 8px; padding: 4px 0; }
  .poi-table td { display: flex; gap: 8px; border: 0; padding: 3px 10px; }
  .poi-table td::before { content: attr(data-label); font-weight: 600; min-width: 110px; color: #555; }
}

/* Sehenswürdigkeiten an der Route */
.sight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sight-card { border: 1px solid #e3e6ea; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.sight-card.sight-user { border-color: #2f7d32; box-shadow: 0 0 0 2px rgba(47,125,50,.15); }
.sight-img { display: block; aspect-ratio: 16/10; background: #f1f3f5; overflow: hidden; }
.sight-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sight-noimg { display: flex; align-items: center; justify-content: center; color: #8a939c; font-size: 13px; }
.sight-credit { font-size: 11px; color: #6b747d; padding: 3px 10px 0; line-height: 1.3; }
.sight-body { padding: 8px 12px 12px; }
.sight-body h3 { font-size: 16px; margin: 4px 0; }
.sight-body p { font-size: 14px; margin: 6px 0; line-height: 1.45; }
.sight-meta { font-size: 12px; color: #6a3d9a; }
.sight-badge { font-size: 11px; color: #2f7d32; font-weight: 600; }
.sight-note { font-size: 12px; color: #6a3d9a; margin-top: 4px; }
.sight-pop img.sight-pop-img { width: 200px; max-width: 100%; border-radius: 6px; display: block; margin-bottom: 4px; }
@media (max-width: 600px) { .sight-grid { grid-template-columns: 1fr; } .sight-img { aspect-ratio: 16/9; } }

/* Sprachausgabe – Typo-Skala: Basis 16 px, Labels 14 px, Überschrift 20 px; Abstände im 8-px-Raster */
.tts-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  font-size: 16px; line-height: 1.5; color: var(--ink); display: grid; gap: 16px; }
.tts-title { margin: 0; font-family: var(--font-serif); font-size: 20px; line-height: 1.3; color: var(--navy-deep); }
.tts-switch { display: flex; align-items: center; gap: 16px; cursor: pointer; min-height: 48px; }
.tts-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tts-switch-track { flex: none; width: 56px; height: 32px; border-radius: 16px; background: #9aa3b2; position: relative; transition: background .15s; }
.tts-switch-thumb { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.tts-switch input:checked + .tts-switch-track { background: var(--navy); }
.tts-switch input:checked + .tts-switch-track .tts-switch-thumb { transform: translateX(24px); }
.tts-switch input:focus-visible + .tts-switch-track { outline: 3px solid var(--gold); outline-offset: 2px; }
.tts-switch-text { display: grid; gap: 0; }
.tts-switch-text strong { font-size: 16px; color: var(--ink); }
.tts-sub { font-size: 14px; color: var(--muted); }
.tts-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px 16px; }
.tts-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.tts-select { min-height: 44px; font-size: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; max-width: 420px; }
.tts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.tts-act { min-height: 44px; padding: 8px 16px; font-size: 16px; font-weight: 700; line-height: 1.25; border-radius: 8px; }
.btn.tts-act:not(.secondary) { background: var(--navy); color: #fff; }
.btn.tts-act:not(.secondary):hover { background: var(--navy-deep); }
.btn.tts-act.secondary { color: var(--navy); border-color: var(--navy); }
.btn.tts-act:disabled { opacity: .55; }
.tts-info { font-size: 14px; line-height: 1.5; color: #2f3b52; background: #eef2fa; border-left: 4px solid var(--navy-2); border-radius: 8px; padding: 8px 16px; }
.tts-info strong { display: block; font-size: 14px; color: var(--navy-deep); margin-bottom: 0; }
.tts-info ul { margin: 0; padding-left: 16px; }
.tts-info li { margin: 0; }
/* Infokarte bei Annäherung */
.sight-info { margin-top: 16px; padding: 16px; border: 2px solid var(--navy); border-radius: var(--radius); background: var(--paper);
  font-size: 16px; line-height: 1.5; display: grid; gap: 8px; box-shadow: var(--shadow); }
.sight-info[hidden] { display: none !important; }
.si-kicker { font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--navy-2); }
.si-main { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.si-main:not(:has(.si-img)) { grid-template-columns: 1fr; }
.si-img { width: 112px; height: 80px; object-fit: cover; border-radius: 8px; display: block; }
.si-name { margin: 0; font-family: var(--font-serif); font-size: 20px; line-height: 1.3; color: var(--navy-deep); }
.si-meta { font-size: 14px; color: var(--muted); }
.si-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
@media (max-width: 600px) {
  .tts-row { grid-template-columns: 1fr; }
  .tts-select { max-width: none; }
  .tts-actions { display: grid; grid-template-columns: 1fr; }
  .btn.tts-act { width: 100%; }
  .si-main { grid-template-columns: 88px 1fr; }
  .si-img { width: 88px; height: 66px; }
}
.sight-actions { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; }
.sight-img.sight-noimg { aspect-ratio: auto; height: 44px; }
.sight-pop .btn.tts-act { margin-top: 8px; font-size: 14px; min-height: 40px; padding: 8px 12px; }

/* ===================== App-Bereiche (Tab-Bar, Ansichten) =====================
   Typo-Skala: Basis 16 px, Labels/Meta 14 px, Überschriften 20 px (H1 24 px); Abstände 8-px-Raster. */
:root { --tabbar-h: 64px; --side-w: 104px; }
body.app-shell { font-size: 16px; line-height: 1.5; padding-bottom: calc(var(--tabbar-h) + var(--safe-bot)); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-shell .views { max-width: 1120px; margin: 0 auto; padding: 16px calc(16px + var(--safe-right)) 24px calc(16px + var(--safe-left)); }
.app-shell .view[hidden], .app-shell .pane[hidden] { display: none !important; }
.app-shell .view > * + *, .app-shell .pane > * + * { margin-top: 16px; }
.app-shell .card { margin: 0; border-radius: var(--radius); }
.app-shell .card-head h2 { font-size: 20px; line-height: 1.3; }
.app-shell .card-body { padding: 16px; }
.view-head h1, .tour-head h1 { margin: 0; font-family: var(--font-serif); font-size: 24px; line-height: 1.25; color: var(--navy-deep); }
.view-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.app-copy { font-size: 14px; color: var(--muted); text-align: center; }

/* Tab-Bar: fest unten (Handy), Seitenleiste (Desktop) */
.tabbar { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--navy-deep); padding: 0 var(--safe-right) var(--safe-bot) var(--safe-left); box-shadow: 0 -2px 12px rgba(7,31,78,.25); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tabbar-h);
  color: #c9d4ea; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.tab svg { width: 24px; height: 24px; fill: currentColor; }
.tab:hover { color: #fff; }
.tab.active { color: var(--navy-deep); background: #fff; box-shadow: inset 0 4px 0 var(--gold); }
.tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (min-width: 900px) {
  body.app-shell { padding-bottom: 0; padding-left: var(--side-w); }
  .tabbar { top: 0; right: auto; width: var(--side-w); grid-template-columns: 1fr; grid-auto-rows: 88px; align-content: start; padding: 16px 0; box-shadow: 2px 0 12px rgba(7,31,78,.2); }
  .tab { min-height: 88px; font-size: 13px; }
  .tab.active { box-shadow: inset 4px 0 0 var(--gold); }
}

/* Tour-Kopf und Reiter */
.tour-head { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; }
.tour-head h1 { color: #fff; font-size: 22px; }
.tour-head .header-dates { font-size: 14px; color: var(--gold-lt); margin: 0; }
.tour-head .header-note { font-size: 14px; margin: 0; color: rgba(255,255,255,.9); }
.tour-head .variant-tabs { margin: 0; }
.tour-head .back-link { color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.tour-head .view-sub { color: rgba(255,255,255,.85); }
.subtabs { position: sticky; top: 0; z-index: 500; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.subtabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 8px; border-radius: 8px; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; line-height: 1.2; }
.subtabs a.active { background: var(--navy); color: #fff; }
.subtabs a:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
@media (max-width: 420px) { .subtabs a { font-size: 13px; padding: 4px; } }

/* Kennzahlen im hellen Bereich */
.views .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.views .kpi { background: var(--paper); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: 8px 16px; }
.views .kpi .lbl { color: var(--navy-2); font-size: 12px; }
.views .kpi .val { font-size: 20px; color: var(--navy-deep); }
.views .kpi .sub { color: var(--muted); font-size: 12px; }

/* Karte (wandert zwischen den Bereichen) */
.map-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #dce3d6; }
.app-shell #map { height: 52vh; min-height: 280px; }
.map-tools { position: absolute; z-index: 600; left: 8px; bottom: 8px; display: flex; gap: 8px; }
.map-tools .btn { min-height: 40px; box-shadow: var(--shadow); }
#slot-etappe #map { height: 44vh; }
#slot-sights #map { height: 40vh; }

/* Tourkarten */
.tour-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tour-card { display: grid; grid-template-rows: auto 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.tour-card:hover { border-color: var(--navy-2); }
.tour-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tc-img { aspect-ratio: 16/9; background: #e8eef7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tc-img img { width: 100%; height: 100%; object-fit: cover; }
.tc-map { background: linear-gradient(135deg, #e9f0e3, #dfe8f5); }
.tour-shape { width: 70%; height: 90%; }
.tc-noimg { font-size: 14px; color: var(--muted); }
.tc-body { padding: 16px; display: grid; gap: 4px; align-content: start; }
.tc-body h3 { margin: 0; font-size: 18px; line-height: 1.3; color: var(--navy-deep); }
.tc-route { font-size: 14px; color: var(--muted); }
.tc-kpis { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; margin-top: 4px; }
.tc-kpis strong { font-size: 16px; color: var(--navy-deep); }
.tc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tc-tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef2fa; color: var(--navy); }
.tc-tag-avoid { background: #e6f2ec; color: var(--ok); }
.tour-cards.compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tour-cards.compact .tc-img { aspect-ratio: 3/1; }

/* Etappen: Karten auf allen Größen, antippbar */
.app-shell #stage-table-wrap { display: none !important; }
.app-shell .stage-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.app-shell .stage-card { margin: 0; cursor: pointer; padding: 16px; }
.app-shell .stage-card:hover { border-color: var(--navy-2); }
.app-shell .stage-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.stage-card-title { font-weight: 700; font-size: 16px; color: var(--navy-deep); margin-left: 8px; }
.stage-spark { margin: 8px 0; }
.mini-profile { width: 100%; height: 64px; display: block; }
#etappe-profile .mini-profile { height: 160px; }
.mini-profile-axis { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-top: 4px; }
.stage-open { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--navy); }
.app-shell .stage-card .stage-row { grid-template-columns: 1fr; gap: 0; }
.etappe-actions { display: flex; }
.etappe-actions .btn { width: 100%; max-width: 420px; min-height: 52px; font-size: 18px; }
.sub-h { font-size: 18px; margin: 16px 0 8px; color: var(--navy-deep); }
.etappe-sights { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.etappe-sights li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; font-size: 14px; }
.etappe-sights img, .es-noimg { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: #eef1f5; display: block; }
#etappe-body .travel-note { margin-bottom: 8px; }

/* Navigation: Karte im Vollbild */
body.in-navi .views { max-width: none; padding: 0; }
.view-navi { position: fixed; inset: 0 0 calc(var(--tabbar-h) + var(--safe-bot)) 0; z-index: 10; background: #dce3d6; }
@media (min-width: 900px) { .view-navi { inset: 0 0 0 var(--side-w); } }
.view-navi > * + * { margin-top: 0 !important; }
.navi-map, .navi-map .map-card { position: absolute; inset: 0; border: 0; border-radius: 0; }
.navi-map #map { height: 100% !important; min-height: 0; }
.navi-map .map-tools { bottom: auto; top: calc(8px + var(--safe-top)); left: 56px; }
.navi-top { position: absolute; z-index: 700; top: calc(8px + var(--safe-top)); left: 56px; right: 64px; display: grid; gap: 8px; pointer-events: none; margin-top: 48px !important; }
.navi-top > * { pointer-events: auto; }
.navi-top .nav-banner { margin: 0; }
.navi-top .nav-banner:not(.show) { display: none; }
.navi-next { background: var(--paper); border-radius: 12px; box-shadow: var(--shadow); padding: 8px 16px; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
.navi-next[hidden] { display: none; }
.nn-lbl { grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--purple); }
.navi-next strong { font-size: 16px; color: var(--ink); }
.nn-dist { font-size: 14px; font-weight: 700; color: var(--navy); }
.navi-panel { position: absolute; z-index: 700; left: 8px; right: 8px; bottom: 8px; max-height: 60%; overflow: auto; background: var(--paper);
  border-radius: 16px; box-shadow: 0 -4px 24px rgba(7,31,78,.25); padding: 8px 16px 16px; }
@media (min-width: 900px) { .navi-panel { left: auto; width: 420px; } }
.navi-grip { display: block; margin: 0 auto 8px; min-height: 32px; padding: 0 16px; border: 0; background: none; color: var(--navy); font-weight: 700; font-size: 14px; cursor: pointer; }
.navi-grip::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 4px; }
.navi-panel .nav-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.navi-panel .nav-stat { padding: 4px 8px; }
.navi-panel .nav-stat .lbl { font-size: 12px; }
.navi-panel .nav-stat .val { font-size: 18px; }
.navi-panel .nav-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 0; }
.navi-panel .nav-controls .btn { min-height: 44px; font-size: 16px; padding: 8px 16px; }
.navi-panel .toggle { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.navi-more { display: grid; gap: 8px; margin-top: 8px !important; }
.navi-more[hidden] { display: none; }
.navi-more .sim-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.navi-more .sim-controls .btn { min-height: 44px; font-size: 14px; }
.navi-more .day-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.navi-more .day-pills button { min-height: 40px; white-space: nowrap; }
.view-navi .sight-info { position: absolute; z-index: 800; left: 8px; right: 8px; top: calc(8px + var(--safe-top)); margin: 0; max-height: 55%; overflow: auto; }
@media (min-width: 900px) { .view-navi .sight-info { left: auto; width: 440px; } }
.fab-tts { position: absolute; z-index: 750; right: 12px; top: calc(64px + var(--safe-top)); width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff;
  background: var(--navy); color: #fff; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fab-tts svg { width: 26px; height: 26px; fill: currentColor; }
.fab-tts:not(.on) { background: #fff; color: var(--navy); border-color: var(--navy); }
.fab-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid #fff; }
.fab-dot[hidden] { display: none; }
.fab-tts:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(7,31,78,.4); }
.sheet-backdrop[hidden], .bottom-sheet[hidden] { display: none; }
.bottom-sheet { position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; background: var(--paper);
  border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + var(--safe-bot)); box-shadow: 0 -8px 32px rgba(7,31,78,.3); animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { .bottom-sheet { left: calc(var(--side-w) + 24px); right: auto; width: 520px; } }
.sheet-handle { width: 48px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 8px; }
.sheet-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef2fa; color: var(--navy); font-size: 18px; cursor: pointer; }
.bottom-sheet .tts-panel { border: 0; padding: 0; margin: 0; }
.bottom-sheet #btn-tts-test { display: inline-flex; }

/* Einstellungen */
.settings .set-grid { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
@media (max-width: 600px) { .settings .set-grid { grid-template-columns: 1fr; gap: 8px; } }
.set-text { margin: 0 0 16px; font-size: 16px; }
.settings .site-footer { background: none; color: var(--ink); text-align: left; padding: 16px; }
.settings .footer-copy { font-size: 16px; font-weight: 700; color: var(--navy-deep); margin: 0 0 8px; }
.settings .footer-meta { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.licenses { margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--ink); }
#prefetch-status { font-size: 14px; margin-top: 8px; }
/* Planen */
.app-shell #sec-request { margin-top: 0 !important; }
.tour-head > * { grid-area: auto !important; position: static !important; }
.tour-head h1#tour-name, .tour-head h1 { font-size: 22px !important; line-height: 1.25; margin: 0; }
.tour-head .variant-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-head .variant-tabs button { min-height: 36px; font-size: 14px; }
/* Navigation kompakt: drei Kennzahlen, Rest unter „Mehr“ */
.navi-panel .nav-stat { display: grid; gap: 0; align-content: start; background: #f3f5f9; border-radius: 10px; }
.navi-panel .nav-stat .lbl { display: block; line-height: 1.3; }
.navi-panel .nav-stat .val { display: block; line-height: 1.2; white-space: nowrap; }
.navi-panel:not(.expanded) .nav-stat:nth-child(1),
.navi-panel:not(.expanded) .nav-stat:nth-child(4),
.navi-panel:not(.expanded) .nav-stat:nth-child(6) { display: none; }
.navi-toggles { display: flex; flex-wrap: wrap; gap: 0 16px; }
.navi-panel .nav-controls .btn { flex: 1 1 0; }
.view-navi .sight-info .tts-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.view-navi .sight-info .btn.tts-act { width: 100%; padding: 8px; font-size: 15px; }
.view-navi .sight-info .si-text { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .tour-card { grid-template-rows: none; grid-template-columns: 112px 1fr; }
  .tc-img { aspect-ratio: auto; height: 100%; min-height: 112px; }
  .tc-body { padding: 8px 16px 16px 16px; }
  .tc-body h3 { font-size: 16px; }
  .tour-cards.compact .tc-img { aspect-ratio: auto; }
}
.stage-card header .tag { color: #fff !important; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 14px; }
.views #sec-stages > .card-head { display: grid; gap: 8px; }
.views #sec-stages > .card-head > *:not(h2) { display: flex; flex-wrap: wrap; gap: 8px; }
.tts-panel .btn.tts-act { justify-content: center; text-align: center; }
.map-slot:not(.navi-map) .map-tools { bottom: 24px; }
/* Stopp-Zustand der Vorlesen-Knöpfe: 44 px, hoher Kontrast */
.btn.is-stop, .btn.tts-stop-btn {
  background: #B3261E !important; color: #fff !important; border: 2px solid #7A1712 !important;
  min-height: 44px; min-width: 44px; font-weight: 700; font-size: 16px; letter-spacing: 0.01em;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.25);
}
.btn.is-stop:hover, .btn.tts-stop-btn:hover { background: #8F1D17 !important; }
.btn.is-stop:focus-visible, .btn.tts-stop-btn:focus-visible { outline: 3px solid #F2C14E; outline-offset: 2px; }
.sight-pop .btn.tts-act, .sight-actions .btn.tts-act { min-height: 44px; }
/* Etappenansicht: Tagesleiste und Blättern */
.day-strip { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 2px 12px; margin: 0 0 8px; scrollbar-width: thin; }
.day-strip[hidden], .etappe-pager[hidden] { display: none; }
.day-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px; padding: 0 16px; border-radius: 22px; font-size: 16px; font-weight: 700; line-height: 1;
  text-decoration: none; color: var(--navy, #0A3078); background: #fff; border: 2px solid var(--navy, #0A3078); white-space: nowrap; }
.day-btn:hover { background: #eef2fa; }
.day-btn.active { background: var(--navy, #0A3078); color: #fff; box-shadow: inset 0 -3px 0 var(--gold, #B0894F); }
.day-btn.day-all { border-style: dashed; font-weight: 600; }
.day-btn:focus-visible { outline: 3px solid var(--gold, #B0894F); outline-offset: 2px; }
.etappe-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 24px; }
.etappe-pager .pager-btn { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 16px; font-weight: 700; text-decoration: none; }
.etappe-pager .pager-next { grid-column: 2; }
.etappe-pager .pager-sub { font-size: 13px; font-weight: 500; opacity: 0.85; }
.day-strip .day-btn.day-all { position: sticky; left: 0; z-index: 2; background: #fff; border-style: solid;
  box-shadow: 10px 0 10px -6px rgba(10, 48, 120, 0.25); }

/* CJK: Systemschriften mit chinesischen/japanischen Glyphen */
html.lang-cjk { --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", "Yu Gothic", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans SC", "Noto Sans JP", sans-serif;
  --font-serif: "Songti SC", "Hiragino Mincho ProN", "Noto Serif CJK SC", "Noto Serif CJK JP", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", serif; }
html.lang-cjk:lang(ja) { --font: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", "PingFang SC", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "Hiragino Sans", serif; }
html.lang-cjk body { word-break: normal; line-break: strict; overflow-wrap: anywhere; }

/* ---------- Aufzeichnen ---------- */
.tabbar { grid-template-columns: repeat(6, 1fr); }
.tab-rec .rec-dot { width: 26px; height: 26px; border-radius: 50%; background: #c0392b; border: 3px solid #fff; box-shadow: 0 0 0 2px #c0392b; display: block; }
.tab-rec.active .rec-dot, body.rec-live .tab-rec .rec-dot { animation: recpulse 1.4s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { box-shadow: 0 0 0 2px #c0392b; } 50% { box-shadow: 0 0 0 6px rgba(192,57,43,.35); } }
.tab { font-size: 11px; }
@media (min-width: 900px) { .tabbar { grid-template-columns: 1fr; } .tab { font-size: 13px; } }
.view-rec { padding-bottom: calc(var(--tabbar-h, 64px) + 16px); }
.rec-map { height: 44vh; min-height: 260px; border-radius: 0 0 14px 14px; overflow: hidden; background: #e8eef7; }
.rec-panel { padding: 12px 14px; display: grid; gap: 10px; }
.rec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rec-status { font-weight: 700; color: var(--navy-deep); font-size: 1.05rem; }
[data-rec-state="recording"] .rec-status { color: #c0392b; }
[data-rec-state="recording"] .rec-status::before { content: "● "; animation: recblink 1s steps(2) infinite; }
@keyframes recblink { 50% { opacity: .2; } }
.rec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.rec-stats .nav-stat { padding: 6px 8px; }
.rec-stats .nav-stat .val { font-size: 18px; }
.rec-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-controls .btn { flex: 1 1 40%; min-height: 52px; font-size: 17px; }
.btn.rec-start { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn.rec-stop { background: var(--navy-deep); color: #fff; }
.rec-extra { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-next { font-size: .9rem; color: var(--navy-deep); background: #fff8e6; border-radius: 10px; padding: 6px 10px; }
.rec-result { padding: 12px; display: grid; gap: 8px; }
.rec-result .btn { text-align: center; }
.rec-ok { font-weight: 700; color: var(--ok, #2e7d32); margin: 0; }
.rec-name-row { display: flex; gap: 8px; }
.rec-name-row input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid #c8d2e3; border-radius: 8px; font: inherit; }
.rec-pending h3 { font-size: 1rem; margin: 4px 0; }
.rec-pend { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.rec-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; }
.rec-dl dt { color: var(--muted); }
.rec-dl dd { margin: 0; font-weight: 600; }
.rec-wps { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.rec-wps li { display: flex; gap: 10px; align-items: center; }
.rec-wps img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; }
.tc-tag-rec { background: #fdecea; color: #a93226; }
.view-rec { overflow-x: hidden; max-width: 100%; }
.rec-stats { padding: 0; }
.rec-stats .nav-stat { min-width: 0; }
.rec-stats .nav-stat .lbl, .rec-stats .nav-stat .val { display: block; }
.rec-stats .nav-stat .val { white-space: normal; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
#rec-updown { font-size: 15px; }
.rec-panel > * { min-width: 0; }
.rec-name-row .btn { flex: 0 0 auto; }
.rec-import, .tours-import { margin: .6rem 0 0; }
.view-head .geo-note { margin-top: .5rem; }
/* Eigenes Bestätigungs-Sheet (statt confirm/prompt) */
.sheet-backdrop { position: fixed; inset: 0; z-index: 5000; background: rgba(10, 20, 40, .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop[hidden] { display: none; }
.sheet { width: 100%; max-width: 520px; background: #fff; border-radius: 18px 18px 0 0; padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.25); }
.sheet-msg { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 600; color: #0a3078; }
.sheet-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: .6rem; border: 1px solid #b8c4d8; border-radius: 10px; margin-bottom: .8rem; }
.sheet-actions { display: grid; gap: .55rem; }
.sheet-actions .btn { width: 100%; min-height: 48px; touch-action: manipulation; }
.rec-controls .btn, .nav-controls .btn { touch-action: manipulation; }
body.sheet-open { overflow: hidden; }

/* Pace: Einheit über dem Wert, Geschwindigkeit darunter */
.rec-stats .nav-stat .lbl .unit { text-transform: none; letter-spacing: 0; font-weight: 600; }
.rec-stats .nav-stat .sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.2; }
.rec-stats .nav-stat .sub:empty { display: none; }