@font-face {
  font-family: 'TransitFpla';
  src: url('https://fonts.bvg-cdn.de/TransitFpla-Normal.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'TransitWeb';
  src: url('https://fonts.bvg-cdn.de/TransitWeb.woff');
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'TransitWeb';
  src: url('https://fonts.bvg-cdn.de/TransitWeb-Bold.woff');
  font-weight: 700;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'TransitWeb';
  src: url('https://fonts.bvg-cdn.de/TransitWeb-Black.woff');
  font-weight: 900;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --height: 1920px;
  --width: 540px;

  --color-u1: #7dad4c;
  --color-u2: #da421e;
  --color-u3: #16683d;
  --color-u4: #f0d722;
  --color-u5: #7e5330;
  --color-u6: #8c6dab;
  --color-u7: #528dba;
  --color-u8: #224f86;
  --color-u9: #f3791d;

  --color-bvg: #f0d722;
  --color-bus: #95276e;
  --color-tram: #be1414;
  --color-sbahn: #45935d;
  --color-db: #be1414;

  --color-black: #252424;
  --color-white: #ffffff;
  --color-grey: #d1d3d1;

  --linie-text: #ffffff;

  --body-bg: var(--color-white);
  --body-color: var(--color-black);
  --footer-color: rgb(0 0 0 / 0.5);

  --app-bg: var(--color-white);
  --app-border: rgb(0 0 0 / 0.5);
  --app-shadow: rgb(0 0 0 / 0.25);

  --rail-bg: var(--color-grey);
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --body-bg: var(--color-black);
    --body-color: var(--color-white);
    --footer-color: rgb(255 255 255 / 0.5);

    --app-bg: #222222;
    --app-border: rgb(255 255 255 / 0.15);
    --app-shadow: rgb(255 255 255 / 0.15);

    --rail-bg: #666666;
  }
} */

.dark-mode {
  --body-bg: var(--color-black);
  --body-color: var(--color-white);
  --footer-color: rgb(255 255 255 / 0.5);

  --app-bg: #222222;
  --app-border: rgb(255 255 255 / 0.15);
  --app-shadow: rgb(255 255 255 / 0.15);

  --rail-bg: #666666;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[v-cloak] {
  display: none;
  visibility: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: TransitWeb, Arial, Helvetica, sans-serif;
  background: var(--body-bg);
  color: var(--body-color);
}

img {
  display: block;
}

#app {
  position: relative;

  display: grid;
  grid-template-rows: min-content 1fr auto;
  background: var(--app-bg);

  user-select: none;

  width: var(--width);
  border: 1px solid var(--app-border);
  outline: 1rem solid var(--app-bg);
  box-shadow: 0 0 50px var(--app-shadow);
}

/* ---------------------------------------------------- */

.linie-u1,
.linie-u12 {
  --linie-bg: var(--color-u1);
}

.linie-u2 {
  --linie-bg: var(--color-u2);
}

.linie-u3 {
  --linie-bg: var(--color-u3);
}

.linie-u4 {
  --linie-bg: var(--color-u4);
  --linie-text: #000000;
}

.linie-u5 {
  --linie-bg: var(--color-u5);
}

.linie-u6 {
  --linie-bg: var(--color-u6);
}

.linie-u7 {
  --linie-bg: var(--color-u7);
}

.linie-u8 {
  --linie-bg: var(--color-u8);
}

.linie-u9 {
  --linie-bg: var(--color-u9);
}

/* ---------------------------------------------------- */

.missing-data {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bvg);
}

.missing-data > img {
  max-height: 60%;
  max-width: 60%;
}

/* ---------------------------------------------------- */

header.linie-u12 {
  --linie-bg: var(--color-u2);
}

.linie-u12 .bhf-wt .stopline > div:nth-child(2) {
  --linie-bg: linear-gradient(180deg, var(--color-u1) 50%, var(--color-u2) 50%);
}

.linie-u12 .bhf-wt .stopline > div:nth-child(3) {
  --linie-bg: var(--color-u2);
}

.linie-u12 .bhf-wt ~ section {
  --linie-bg: var(--color-u2);
}

.linie-u12 .train {
  --linie-bg: linear-gradient(140deg, var(--color-u1) 50%, var(--color-u2) 50%);
}

/* ---------------------------------------------------- */

header {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 1rem;
}

header > div {
  background: var(--linie-bg);
  color: var(--linie-text);
}

header > div:first-child > img {
  height: 4.75rem;
}

header > div:last-child {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: 1;
  padding: 0 0.75rem;
  height: 50px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

header > div:last-child span {
  font-weight: bold;
}

header > div:last-child svg {
  height: 2rem;
  margin: 0 0.5rem;
}

header > div:last-child svg > polygon {
  fill: var(--linie-text);
}

/* ---------------------------------------------------- */

main {
  display: flex;
  flex-direction: column;
}

main > section {
  display: grid;
  grid-template-columns: 23% 0.75rem 1rem 0.75rem 1.75rem 1fr;
  gap: 0 1rem;
}

/* ---------------------------------------------------- */

footer {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  font-size: 0.5rem;
  color: var(--footer-color);
}

footer > :last-child {
  display: flex;
  gap: 1rem;
  text-align: right;
}

/* ---------------------------------------------------- */

.spacer {
  height: 3rem;
}

.spacer > div:nth-child(1) {
  grid-column: 2;
}

.spacer > div:nth-child(3) {
  grid-column: 4;
}

.spacer > div:nth-child(1),
.spacer > div:nth-child(3) {
  --color-gradient: var(--rail-bg);
  margin-top: -1px;
}

.spacer > div:nth-child(2) {
  --color-gradient: var(--linie-bg);
  grid-column: 3;
}

.disabled-bhf.spacer > div {
  --color-gradient: var(--rail-bg);
}

.spacer > div {
  background-color: transparent;
  background-image: linear-gradient(
    0deg,
    transparent 50%,
    var(--color-gradient) 50%
  );
  background-size: 1rem 1rem;
}

/* ---------------------------------------------------- */

.turn {
  height: 0.75rem;
}

.turn > div {
  position: relative;
}

.turn > div:first-child {
  grid-column: 2;

  /* grid-column: 2 / span 3;

  border-left: 0.75rem solid var(--color-grey);
  border-top: 0.75rem solid var(--color-grey);
  border-right: 0.75rem solid var(--color-grey);
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem; */
}

.turn > div:last-child {
  grid-column: 4;
}

.turn > div::after {
  --turnWidth: 2rem;
  position: absolute;
  top: 0;
  left: calc(var(--turnWidth) / 3 * -1);
  content: '';
  height: 100%;
  width: var(--turnWidth);
  background: var(--rail-bg);
}

.turn:last-child > div {
  margin-top: -1px;
}

/* ---------------------------------------------------- */

.transfers {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  gap: 0.15rem 0;
  flex-wrap: wrap;
}

.transfers > img {
  width: 2rem;
}

/* .disabled-bhf .transfers > img {
  background-blend-mode: luminosity;
} */

.transfers > img.transfer-u1,
.transfers > img.transfer-u2,
.transfers > img.transfer-u3,
.transfers > img.transfer-u4,
.transfers > img.transfer-u5,
.transfers > img.transfer-u6,
.transfers > img.transfer-u7,
.transfers > img.transfer-u8,
.transfers > img.transfer-u9,
.transfers > img.transfer-u12 {
  width: auto;
  height: 1.25rem;
  margin-left: 0.35rem;
}

.transfer-airport {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 1.6rem;
  height: 1.6rem;
  padding: 0.1rem;
  border-radius: 50%;

  background: var(--color-bvg);
}

.transfer-airport > img {
  width: 100%;
}

/* ---------------------------------------------------- */

.symbols {
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbols > div {
  height: 1.5rem;
  width: 1.5rem;
  /* aspect-ratio: 1; */
  background: var(--color-bvg);
}

/* ---------------------------------------------------- */

.railway {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.railway > * {
  background: var(--rail-bg);
  border-bottom: 1px solid var(--app-bg);
}

.is-wip-left:not(.disabled-bhf) > .railway.left-track > *,
.is-wip-right:not(.disabled-bhf) > .railway.right-track > * {
  background-image: linear-gradient(
    135deg,
    var(--color-bvg) 33%,
    var(--color-black) 33%,
    var(--color-black) 66%,
    var(--color-bvg) 66%
  );
  background-repeat: repeat-y;
  background-size: 100% 100%;
  border-bottom: 0;
}

/* ---------------------------------------------------- */

.stopline {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
}

.stopline > * {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;

  background: var(--linie-bg);
  color: var(--linie-text);
}

.stopline > :nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stopline.first-stop > div:first-child,
.stopline.last-stop > div:last-child {
  background: transparent;
}

.stopline.first-stop > div:nth-child(2) {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.stopline.last-stop > div:nth-child(2) {
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}

.stopline > div > .stopline-bull {
  width: 100%;
  height: calc(1rem - 2px);
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  z-index: 99;
}

.selected-bhf .stopline > :nth-child(1)::before,
.selected-bhf .stopline > :nth-child(1)::after,
.selected-bhf .stopline > :nth-child(3)::before,
.selected-bhf .stopline > :nth-child(3)::after {
  position: absolute;
  bottom: 0;

  display: block;
  width: calc(100% + 0.75rem);
  height: 1.75rem;

  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

  pointer-events: none;
  content: ' ';

  z-index: 1;
}

.selected-bhf .stopline > :nth-child(3)::before,
.selected-bhf .stopline > :nth-child(3)::after {
  top: 0;
  transform: rotate(180deg);
}

.selected-bhf .stopline > :nth-child(1)::before,
.selected-bhf .stopline > :nth-child(3)::before {
  background: var(--color-black);
}

.selected-bhf .stopline > :nth-child(1)::after,
.selected-bhf .stopline > :nth-child(3)::after {
  background: var(--color-white);
  scale: 0.85;
}

.selected-bhf .stopline > :nth-child(1)::after {
  margin-bottom: -1px;
}

.selected-bhf .stopline > :nth-child(3)::after {
  margin-top: -1px;
}

.linie-u1 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::before,
.linie-u1 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::after,
.linie-u1 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::before,
.linie-u1 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::after,
.linie-u2 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::before,
.linie-u2 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::after,
.linie-u2 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::before,
.linie-u2 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::after,
.linie-u3 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::before,
.linie-u3 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::after,
.linie-u3 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::before,
.linie-u3 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::after,
.linie-u4 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::before,
.linie-u4 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::after,
.linie-u4 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::before,
.linie-u4 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::after,
.linie-u5 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::before,
.linie-u5 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::after,
.linie-u5 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::before,
.linie-u5 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::after,
.linie-u6 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::before,
.linie-u6 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::after,
.linie-u6 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::before,
.linie-u6 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::after,
.linie-u7 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::before,
.linie-u7 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::after,
.linie-u7 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::before,
.linie-u7 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::after,
.linie-u8 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::before,
.linie-u8 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::after,
.linie-u8 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::before,
.linie-u8 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::after,
.linie-u9 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::before,
.linie-u9 .from-top-to-down.selected-bhf .stopline > :nth-child(1)::after,
.linie-u9 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::before,
.linie-u9 .from-down-to-top.selected-bhf .stopline > :nth-child(3)::after,
.linie-u12 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::before,
.linie-u12 .from-down-to-top.selected-bhf .stopline > :nth-child(1)::after,
.linie-u12 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::before,
.linie-u12 .from-top-to-down.selected-bhf .stopline > :nth-child(3)::after,
.selected-bhf .stopline.first-stop > :nth-child(1)::before,
.selected-bhf .stopline.first-stop > :nth-child(1)::after,
.selected-bhf .stopline.last-stop > :nth-child(3)::before,
.selected-bhf .stopline.last-stop > :nth-child(3)::after {
  display: none;
}

.linie-u1 .from-down-to-top.selected-bhf .stopline > div:nth-child(1),
.linie-u1 .from-top-to-down.selected-bhf .stopline > div:nth-child(3),
.linie-u2 .from-down-to-top.selected-bhf .stopline > div:nth-child(1),
.linie-u2 .from-top-to-down.selected-bhf .stopline > div:nth-child(3),
.linie-u3 .from-down-to-top.selected-bhf .stopline > div:nth-child(1),
.linie-u3 .from-top-to-down.selected-bhf .stopline > div:nth-child(3),
.linie-u4 .from-down-to-top.selected-bhf .stopline > div:nth-child(1),
.linie-u4 .from-top-to-down.selected-bhf .stopline > div:nth-child(3),
.linie-u5 .from-top-to-down.selected-bhf .stopline > div:nth-child(1),
.linie-u5 .from-down-to-top.selected-bhf .stopline > div:nth-child(3),
.linie-u6 .from-top-to-down.selected-bhf .stopline > div:nth-child(1),
.linie-u6 .from-down-to-top.selected-bhf .stopline > div:nth-child(3),
.linie-u7 .from-top-to-down.selected-bhf .stopline > div:nth-child(1),
.linie-u7 .from-down-to-top.selected-bhf .stopline > div:nth-child(3),
.linie-u8 .from-top-to-down.selected-bhf .stopline > div:nth-child(1),
.linie-u8 .from-down-to-top.selected-bhf .stopline > div:nth-child(3),
.linie-u9 .from-top-to-down.selected-bhf .stopline > div:nth-child(1),
.linie-u9 .from-down-to-top.selected-bhf .stopline > div:nth-child(3),
.linie-u12 .from-down-to-top.selected-bhf .stopline > div:nth-child(1),
.linie-u12 .from-top-to-down.selected-bhf .stopline > div:nth-child(3),
.from-top-to-down.selected-bhf .stopline > div:nth-child(2),
.from-down-to-top.selected-bhf .stopline > div:nth-child(2) {
  background: var(--rail-bg);
}

.from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after {
  position: absolute;

  display: block;
  width: 100%;
  height: 100%;

  pointer-events: none;
  content: ' ';

  z-index: 1;

  background: var(--linie-bg);
}

.linie-u1 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u2 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u3 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u4 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u5 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u6 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u7 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u8 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u9 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u12 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after {
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}

.linie-u1 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u2 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u3 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u4 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u5 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u6 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u7 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u8 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u9 .from-top-to-down.selected-bhf .stopline > div:nth-child(2)::after,
.linie-u12 .from-down-to-top.selected-bhf .stopline > div:nth-child(2)::after {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.disabled-bhf .stopline > * {
  background: var(--rail-bg);
}

.disabled-bhf .stopline > div > .stopline-bull {
  border-color: var(--rail-bg);
}

/* ---------------------------------------------------- */

.station {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  font-size: 1.75rem;
  min-height: 4rem;
  /* padding: 1rem 0; */
  white-space: nowrap;
}

.station > span:nth-child(2) {
  font-size: 70%;
}

.selected-bhf .station {
  font-weight: bold;
  margin-left: -4px;
}

.selected-bhf .station > span:nth-child(1) {
  position: absolute;
  pointer-events: none;

  background: var(--linie-bg);
  color: #fff;

  /* border: 1px solid rgba(0, 0, 0, 0.2); */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  padding: 0.5rem;
  line-height: 1;

  border-radius: 12px;
}

.selected-bhf .station > span:nth-child(1)::after {
  position: absolute;
  top: 50%;
  right: 100%;

  content: ' ';

  border-color: transparent;
  border-style: solid;
  border-right-color: var(--linie-bg);

  border-width: 14px;
  margin-top: -14px;
  margin-right: -1px;

  z-index: 1;
  height: 0;
  width: 0;
}

.selected-bhf .station > span:nth-child(2) {
  display: none;
}

/* ---------------------------------------------------- */

.train {
  --scaleX: 1.75;
  --scaleY: 2;

  position: relative;
  z-index: 1;
}

.train::before,
.train::after {
  content: '';
  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  background: var(--app-bg);

  clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%);
  transform: scale(var(--scaleX), var(--scaleY));
}

.train::before {
  border-radius: 2px;
}

.train::after {
  background: var(--linie-bg);
  border-radius: 1px;
  margin: 1px;
}

.linie-u1 .train.direction-a,
.linie-u2 .train.direction-a,
.linie-u3 .train.direction-a,
.linie-u4 .train.direction-a,
.linie-u5 .train.direction-a,
.linie-u6 .train.direction-b,
.linie-u7 .train.direction-b,
.linie-u8 .train.direction-b,
.linie-u9 .train.direction-b,
.linie-u12 .train.direction-a {
  transform: rotate(180deg);
}

.from-top-to-down .train.direction-a::after {
  background: var(--rail-bg);
}

.from-down-to-top .train.direction-b::after {
  background: var(--rail-bg);
}

/* ---------------------------------------------------- */

@media (max-aspect-ratio: 1/1) {
  body {
    padding: 0;
    background: transparent;
    overflow: hidden;
  }

  #app {
    width: 100vw;
    height: 100vh;
    border: 0;
    outline: 0;
    box-shadow: none;
    overflow: hidden;
  }
}

/* ---------------------------------------------------- */

.debug {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: 0 8px;
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(255, 0, 0, 0.5);
  line-height: 1;
  font-family: monospace;
  font-size: 16px;
}