/* Teilhabe Tour — base styles
   Colors and type taken from webapp-design.svg */

@font-face {
  font-family: 'HTWBerlin Office';
  src: url('../fonts/HTWBerlinOffice-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HTWBerlin Office';
  src: url('../fonts/HTWBerlinOffice-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-red: rgb(231, 76, 60);
  --color-navy: rgb(27, 27, 42);
  --color-yellow: rgb(240, 215, 34);
  --color-gray: rgb(131, 131, 143);
  --color-text-light: rgb(235, 235, 235);
  --color-text-dark: #111;

  --font-base: 'HTWBerlin Office', 'Helvetica Neue', Arial, sans-serif;

  --shell-width: 480px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  color: var(--color-text-dark);
  background: #f4f4f4;
  -webkit-font-smoothing: antialiased;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* App shell — phone-width column centered on larger screens */

.app-shell {
  max-width: var(--shell-width);
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  position: relative;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

/* Header — geometry traced from webapp-1207-all_1.svg (canvas 1179x2556,
   header region is y 0..458.683). Three red stripes (y 53.5-68.5, 118.5-133.5,
   443.68-458.68, all 15 units/3.27% thick), a logo square, and the
   Stationen/Route nav, all positioned by % so they stay in sync when the
   page resizes. */

.header-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1179 / 458.683;
  container-type: inline-size;
}

.header-stage .stripe {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.848cqw; /* 10 of the 1179 canvas units, same width-relative basis as the .deco lines' stroke-width="10" — cqw instead of a height-% avoids the two rules resolving through different axes and rounding to different pixel thicknesses */
  background: var(--color-red);
}

.header-stage .stripe--a {
  top: 11.665%;
}

.header-stage .stripe--b {
  top: 25.837%;
}

.header-stage .stripe--divider {
  bottom: 0;
}

.header-stage .logo-mark {
  position: absolute;
  left: 7.226%;
  top: 44.807%;
  width: 13.562%;
  height: 34.855%;
  background: var(--color-red);
}

.header-stage .main-nav a {
  position: absolute;
  top: 62.235%; /* vertical center of .logo-mark: 44.807% + 34.855%/2 */
  transform: translateY(-50%);
  color: var(--color-red);
  font-size: 6.107cqw;
  white-space: nowrap;
}

.header-stage .nav-stationen {
  /* "Stationen" is much longer than "Route" — anchor from the right edge
     (matching the logo's 7.226% left inset) so it can't overflow the frame
     regardless of its length, instead of a left position tuned for "Route". */
  right: 7.226%;
}

.header-stage .nav-route {
  left: 38.201%;
}

.header-stage .main-nav a[aria-current="page"] {
  font-weight: 700;
}

/* Hero stage (splash page) — geometry traced from webapp-1207-all_1.svg;
   the stage keeps the same 1179:1821 ratio as the source artboard (cropped
   to the region below the header's divider stripe, canvas y 459..2280) so
   the deco lines, panel, dot and title stay in sync when the page resizes. */

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1179 / 1821;
  overflow: hidden;
  container-type: inline-size;
}

/* route.html's stage holds a .map-instructions panel that can grow taller
   than the fixed-ratio box (e.g. on narrow screens); let it overflow
   downward instead of being clipped. */
.stage--map {
  overflow: visible;
}

.stage .deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stage .panel {
  position: absolute;
  left: 25.88%;
  top: 18.444%;
  width: 56.315%;
  height: 55.191%;
  background: rgb(27, 27, 42);
}

.stage .dot {
  position: absolute;
  left: 58.045%;
  top: 50.357%;
  width: 19.508%;
  height: 12.631%;
  border-radius: 50%;
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6.5cqw;
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
}

.stage .title {
  position: absolute;
  left: 7.226%;
  top: 0.646%;
  margin: 0;
  font-size: 12.214cqw;
  line-height: 0.76;
  font-weight: 400;
}

/* Map page — reuses the .stage/.deco/.panel geometry from the splash page;
   the panel just carries map content instead of the dot + title. */

.stage .route-welcome {
  position: absolute;
  left: 25.88%;
  top: 12%;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-dark);
  white-space: nowrap;
}

/* Title panel, opened by the same .map-pin as .map-instructions. It lives in
   the otherwise-empty gap between the stage top and the picture frame
   (.panel--map starts at 18.444%), with a fixed height so toggling it never
   shifts the picture — it's positioned absolutely like everything else in
   .stage, independent of document flow. */

.stage .map-title-panel {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 2.5%;
  height: 12%;
  margin: 0;
  padding: 10px 16px;
  background: var(--color-navy);
  color: var(--color-text-light);
  overflow: hidden;
  cursor: pointer;
}

.stage .map-title-panel h2 {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.stage .map-title-panel p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.stage .panel--map {
  height: auto;
  background: #eee;
  border: 3px solid var(--color-navy);
  display: flex;
  flex-direction: column;
}

/* map-frame is locked to the source image's own aspect ratio (1956:2506), so
   it hugs the picture with no letterboxing, and the % coordinates on
   .map-pin always line up with the same point in the image no matter how
   the page is resized. */
.stage .panel--map .map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1956 / 2506;
  overflow: hidden;
}

.stage .panel--map .map-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  color: #111;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 3.5cqw;
  line-height: 1;
  cursor: pointer;
}

.stage .panel--map .map-attribution {
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 6px;
  background: #fff;
  color: #333;
  font-size: 0.55rem;
  line-height: 1.3;
  text-align: center;
}

.stage .panel--map .map-attribution a {
  color: #333;
  text-decoration: underline;
}

/* Direction panel, opened by a .map-pin button. It's a separate box below
   .panel--map (not nested inside its border), positioned absolutely below
   the panel's bottom edge. .panel--map's height is deterministic — its
   width (56.315% of stage) plus the image's own ratio (1956:2506) fixes the
   picture at 46.72% of stage height; 18.444% (panel top) + 46.72% + a
   generous allowance for the attribution strip puts the panel's bottom at
   roughly 68% of stage height, so 72% leaves a clear gap under the frame. */

.stage .map-instructions {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 72%;
  margin: 0;
  background: var(--color-navy);
  color: var(--color-text-light);
  padding: 20px;
}

.map-instructions p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* Station page — geometry traced from webapp-1207-all_4.svg; the station
   stage covers canvas y 458.683..2556 (height 2097.317) below the header. */

.stage--station {
  aspect-ratio: 1179 / 2097.317;
}

.station-dot {
  position: absolute;
  z-index: 1;
  left: 16.994%;
  top: 6.599%;
  width: 19.508%;
  height: 10.966%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5cqw;
  font-weight: 400;
}

.station-title {
  position: absolute;
  left: 28.37%;
  top: 6.599%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 5.089cqw;
  font-weight: 400;
  white-space: nowrap;
}

.stage .panel--station {
  left: 16.994%;
  top: 8.481%;
  width: 69.404%;
  height: 65.87%;
  background: var(--color-navy);
  color: var(--color-text-light);
  padding: 3.5cqw 4cqw;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}

.stage .panel--station::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.tab-content {
  display: none;
}

.tab-content.is-active {
  display: block;
}

.tab-content h2 {
  font-size: 3.56cqw;
  font-weight: 400;
  margin: 0 0 3cqw 7.38cqw;
}

.tab-content p {
  font-size: 3.05cqw;
  line-height: 1.45;
  margin: 0 0 3cqw;
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gallery__item {
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  text-align: center;
  padding: 8px;
}

.place-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.place-item {
  display: flex;
  gap: 12px;
}

.place-item__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
  margin-top: 6px;
}

.place-item h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.place-item p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Bottom tab bar — icon + label per tab, positioned at each icon's spot from
   the SVG and vertically centered on it. */

.station-tab {
  position: absolute;
  top: 76.97%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 3.4cqw;
  color: var(--color-text-dark);
  white-space: nowrap;
}

.station-tab--geschichte {
  left: 18.69%;
}

.station-tab--bilder {
  left: 47.21%;
}

.station-tab--orte {
  left: 69.18%;
}

.station-tab__icon {
  width: 5.2cqw;
  height: 3.48cqw;
  background: var(--color-gray);
  flex-shrink: 0;
}

.station-tab.is-active {
  font-weight: 700;
}

/* Prev / next station navigation — label links over the SVG-drawn arrows,
   traced from Sketches/Webapp-1307_4.svg. The yellow dot is a real flex
   sibling of the text (not a separately-positioned SVG shape), so it's
   always centered on the label regardless of font metrics: before
   "Adelbertstraße 96" (next), after "Admiralenstraße 2-3" (prev). Each
   link's `top` is anchored to its dot's vertical center via translateY. */

.station-nav-link {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  font-size: 5.089cqw;
  transform: translateY(-50%);
}

.station-nav-link__dot {
  width: 6.107cqw;
  height: 6.107cqw;
  border-radius: 50%;
  background: var(--color-yellow);
  flex-shrink: 0;
}

.station-nav-link--next {
  left: 19.51%;
  top: 85.13%;
}

.station-nav-link--prev {
  left: 33.91%;
  top: 93.19%;
}

/* Stationen list — traced from teilhabetour-1307-7.svg. Unlike the other
   pages this isn't a fixed-aspect stage, because each card's dark box grows
   with its own description length (1 line vs 2 in the source design). But
   the SVG shows the elements *within* one card precisely overlapping, not
   just stacked with gaps: the dark box's left edge sits exactly on the
   circle's horizontal center and its top overlaps the circle's lower half;
   the red tick crosses the circle's upper half and runs on past the title.
   That overlap is reproduced here with a 90px circle as the reference unit
   (all offsets below are that ratio, e.g. tick-top = 24px = 0.269 * 90px)
   — the circle/tick/title are absolutely positioned against the item's own
   box, while the dark box and route link are normal flow, shifted into
   place by the item's padding so they still respond to content length. */

.station-list {
  list-style: none;
  margin: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.station-list-item {
  position: relative;
  padding-left: 45px;
  padding-top: 60px;
}

.station-list-item__number {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.station-list-item__tick {
  position: absolute;
  z-index: 0;
  left: 41px;
  top: 24px;
  width: 149px;
  height: 4px;
  background: var(--color-red);
}

.station-list-item__title {
  position: absolute;
  left: 97px;
  top: 45px; /* vertical center of the 90px circle, not 50% of the whole card */
  transform: translateY(-50%);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  white-space: nowrap;
}

.station-list-item__title a {
  color: inherit;
  text-decoration: none;
}

.station-list-item__title a:hover {
  text-decoration: underline;
}

.station-list-item__box {
  background: var(--color-navy);
  color: var(--color-text-light);
  padding: 14px 16px 14px 52px; /* left padding puts text at 97px from the item's edge, same as the title */
}

.station-list-item__subtitle {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
}

.station-list-item__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.station-list-item__route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--color-red);
  font-style: italic;
  font-size: 1.25rem;
  text-decoration: none;
}

.station-list-item__route::after {
  content: '';
  flex: 1 1 auto;
  height: 4px;
  background: var(--color-red);
}