/* Staedte-Uebersicht: seitliche Fahrt durch alle Stadtkanaele als Reels, darunter die Liste mit Vorschaubild */
.ue-kopf { padding-top: calc(var(--kopf-h) + 70px); padding-bottom: 70px; }
.ue-kopf h1 { margin: 0 0 40px; }
.ue-klein { display: block; font-size: clamp(26px, 2.6vw, 44px); margin-bottom: .3em; }
.ue-h1 { container-type: inline-size; }
/* jede grosse Zeile einzeilig: Groesse nach der laengeren Zeile (0.62 je Zeichen inkl. Leerzeichen und Punkt, gemessen 0.55 de / 0.60 en) */
.ue-gross { display: block; white-space: nowrap; font-size: min(clamp(38px, 10.5vw, 196px), calc(100cqi / (var(--lz, 13) * .62))); line-height: .9; }
.ue-unter { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px 70px; align-items: end; }
.ue-unter .lead { margin: 0; }
.ue-rechts { display: grid; gap: 24px; justify-items: start; }
.ue-netz { margin: 0; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.25; }
.ue-fahrt { position: relative; overflow: hidden; border-top: 1px solid var(--linie); }
.ue-buehne { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--kopf-h) + 20px) 40px; }
.ue-reihe { list-style: none; margin: 0; padding: 0 var(--rand); display: flex; gap: clamp(18px, 2vw, 34px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 14px; }
.ue-fahrt.gepinnt .ue-reihe { overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; }
.ue-karte { flex: none; width: max(200px, min(clamp(240px, 21vw, 330px), calc((100svh - var(--kopf-h) - 250px) * 9 / 16))); scroll-snap-align: start; }
.ue-karte:nth-child(even) { margin-top: 6vh; }
.ue-karte a { display: grid; gap: 6px; text-decoration: none; }
.ue-medium { display: block; aspect-ratio: 9 / 16; width: 100%; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ue-karte a:hover .ue-medium { transform: translateY(-8px) rotate(-1.2deg); }
.ue-name { margin-top: 10px; font-size: clamp(28px, 2.6vw, 44px); font-weight: 900; text-transform: uppercase; line-height: 1; }
.ue-zahl { color: var(--nebel); font-size: 16px; }
.ue-zahl b { color: var(--weiss); font-size: 20px; }
.ue-weiter { display: inline-flex; align-items: center; gap: 8px; color: var(--sunset); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.ue-weiter svg { width: 16px; height: 16px; transition: transform .3s; }
.ue-karte a:hover .ue-weiter svg { transform: translateX(5px); }
.ue-liste-teil { position: relative; }
.ue-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.ue-liste li { border-bottom: 1px solid var(--linie); }
.ue-liste a { display: grid; grid-template-columns: 1.2fr 1fr auto 40px; gap: 24px; align-items: center; padding: 22px 0; text-decoration: none; transition: padding .35s ease; }
.ue-liste .n { font-size: clamp(30px, 3.4vw, 58px); font-weight: 900; text-transform: uppercase; line-height: 1; }
.ue-liste .n small { font-size: 13px; letter-spacing: .14em; color: var(--sunset); vertical-align: middle; margin-left: 8px; }
.ue-liste .k { color: var(--nebel); }
.ue-liste .f { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.ue-liste .p { width: 28px; height: 28px; color: var(--sunset); transition: transform .35s; }
.ue-liste a:hover { padding-left: 18px; }
.ue-liste a:hover .n { color: var(--sunset); }
.ue-liste a:hover .p { transform: translateX(8px); }
.ue-vorschau { position: fixed; z-index: 40; left: 0; top: 0; width: 220px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(.85) rotate(-4deg); transition: opacity .25s, transform .35s; }
.ue-vorschau.an { opacity: 1; transform: scale(1) rotate(-4deg); }
.ue-vorschau img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .ue-unter { grid-template-columns: 1fr; }
  .ue-karte { width: 66vw; }
  .ue-karte:nth-child(even) { margin-top: 0; }
  .ue-liste a { grid-template-columns: 1fr auto 26px; gap: 6px 12px; }
  .ue-liste .k { grid-column: 1; grid-row: 2; font-size: 14px; }
  .ue-liste .f { grid-row: 1 / span 2; grid-column: 2; font-size: 16px; }
  .ue-liste .p { grid-row: 1 / span 2; grid-column: 3; width: 22px; }
  .ue-vorschau { display: none; }
}