/* TRYLL – Stylesheet.
   Oben stehen alle Stellschrauben (Farben, Schriften, Abstände, Bewegung),
   darunter die Teile der Seite in der Reihenfolge, in der sie vorkommen.
   Warum etwas so ist, wie es ist, steht in DESIGN.md. */

/* Stellschrauben: Farben, Schriften, Abstände, Bewegung */

:root {
  /* Farben. Die Seite ist schwarz auf weiß, alles andere ist Abstufung davon. */
  --ink:            #ffffff;
  --fg:             #000000;
  --fg-2:           rgba(0, 0, 0, 0.64);
  --fg-3:           rgba(0, 0, 0, 0.52);
  --signal:         #1a1a1a;

  --feld:           #f0f0f0;
  --fg-zeichen:     #1a1a1a;
  --led:            #ffab1f;
  --led-grund:      #050301;

  /* Schriften aus dem CI, mit Archivo als Ersatz, bis das Adobe-Kit da ist. */
  --face-titel:     'masqualero', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --face-headline:  'itc-benguiat', 'Archivo', Georgia, serif;
  --face-text:      'itc-avant-garde-gothic-pro-condensed', 'itc-avant-garde-gothic-pro',
                    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --face:           var(--face-text);

  /* Sichere Ränder: Notch und Home-Leiste auf dem Handy. */
  --safe-t:         env(safe-area-inset-top, 0px);
  --safe-r:         env(safe-area-inset-right, 0px);
  --safe-b:         env(safe-area-inset-bottom, 0px);
  --safe-l:         env(safe-area-inset-left, 0px);

  --w-aus-hoehe:    calc(38svh * 2.87);
  --w-wordmark:     min(46vw, max(620px, 34vw), var(--w-aus-hoehe));
  --h-mark:         clamp(1.125rem, 1.7vw, 1.5rem);

  --t-display:      clamp(1.8rem, 4.2vw, 3.6rem);
  --t-h2:           clamp(1.7rem, 3.4vw, 2.6rem);
  --t-row:          clamp(1.25rem, 2.9vw, 2.1rem);
  --t-lead:         clamp(1.15rem, 1.9vw, 1.6rem);
  --t-body:         clamp(0.975rem, 1.1vw, 1.0625rem);
  --t-meta:         0.6875rem;

  --lh-tight:       0.86;
  --lh-snug:        1.06;
  --lh-text:        1.55;

  --tr-display:     -0.035em;
  --tr-row:         -0.022em;
  --tr-meta:        0.16em;

  /* Abstände: eine Skala, fest bis 24, darüber fließend mit der Fensterbreite. */
  --sp-3xs:         4px;
  --sp-2xs:         8px;
  --sp-xs:          12px;
  --sp-s:           16px;
  --sp-m:           24px;
  --sp-l:           clamp(32px, 29.33px + 0.74vw, 40px);
  --sp-xl:          clamp(48px, 42.67px + 1.48vw, 64px);
  --sp-2xl:         clamp(64px, 53.33px + 2.96vw, 96px);

  --sp-3xs-xs:      clamp(4px,  1.33px  + 0.74vw, 12px);
  --sp-2xs-xs:      clamp(8px,  6.67px  + 0.37vw, 12px);
  --sp-xs-m:        clamp(12px, 8px     + 1.11vw, 24px);
  --sp-s-m:         clamp(16px, 13.33px + 0.74vw, 24px);
  --sp-s-l:         clamp(16px, 8px     + 2.22vw, 40px);
  --sp-m-l:         clamp(24px, 18.67px + 1.48vw, 40px);
  --sp-m-xl:        clamp(24px, 10.67px + 3.70vw, 64px);
  --sp-l-xl:        clamp(32px, 21.33px + 2.96vw, 64px);

  --sp-head-above:  var(--sp-xl);
  --sp-head-below:  var(--sp-s-m);

  --gutter:         clamp(20px, 4.2vw, 56px);

  --measure:        60ch;
  --head-h:         clamp(52px, 5.5vw, 64px);

  /* Bewegung: drei Kurven, drei Dauern. tryll.js liest sie mit. */
  --ease-aus:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-an:        cubic-bezier(0.55, 0, 1, 0.45);
  --ease-fahrt:     cubic-bezier(0.37, 0, 0.63, 1);

  --dur-kurz:       0.22s;
  --dur-mittel:     0.5s;
  --dur-lang:       0.9s;
}

/* Grundlagen */

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;

}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--face-text);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  font-weight: 500;
  font-stretch: condensed;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .js body.is-loading .wordmark__bild,
  .js body.is-loading .head--travels .head__nav { opacity: 0; }
}

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

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

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--fg);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Layout-Bausteine */

.shell {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-left: calc(var(--gutter) + var(--safe-l));
  padding-right: calc(var(--gutter) + var(--safe-r));
}

.meta {
  font-size: var(--t-meta);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.2;
}

/* Kopfzeile */

.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: calc(var(--head-h) + var(--safe-t) + var(--safe-b));
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  display: flex;
  align-items: center;
  background: transparent;
  pointer-events: none;
  transition: background-color var(--dur-kurz) var(--ease-aus);
}

.head--travels.is-fest:not(.is-faehrt) {
  background: var(--ink);
  pointer-events: auto;
}

.head:not(.head--travels) {
  background: var(--ink);
  pointer-events: auto;
}

.head a { pointer-events: auto; }

.head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .js .head--travels .head__mark { opacity: 0; }
}

.head__mark {
  display: block;
  line-height: 0;
}

.head__logo {
  display: block;
  height: var(--h-mark);
  width: auto;
}

.head__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-m-xl);
}

.link-line {
  position: relative;
  font-size: var(--t-meta);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  display: inline-block;
  transition: font-variation-settings var(--dur-mittel) var(--ease-aus);
}

.head__link {
  padding-block: var(--sp-s);
}

.link-line:focus-visible,
.link-line[aria-current='page'] {
  font-variation-settings: 'wdth' 100, 'wght' 900;
}

@media (hover: hover) and (pointer: fine) {
  .link-line:hover { font-variation-settings: 'wdth' 100, 'wght' 900; }
}

.js .head--travels {
  transition: none;
}

/* Startbild (Splash) */

.splash {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;

}

.splash__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--gutter) + var(--safe-l));
  padding-right: calc(var(--gutter) + var(--safe-r));
  padding-top: calc(var(--head-h) + var(--safe-t));
  padding-bottom: calc(var(--head-h) + var(--safe-b));
}

.wordmark {
  position: relative;
  z-index: 90;
  display: block;

  transform-origin: 0 0;
  will-change: transform;
  width: var(--w-wordmark);
  margin-inline: auto;
  line-height: 0;
  user-select: none;
}

.wordmark__bild {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

.splash__weg { height: var(--weg, 0px); }

/* Der Satz auf der Startseite */

.statement {
  /* Rückt in den Anlauf hinein, damit der Satz schon während der Übergabe auftaucht. */
  margin-top: calc(var(--weg, 0px) * -0.45);
  padding-top: var(--sp-s);
  padding-bottom: var(--sp-l);
}

.statement__text {
  font-family: var(--face-headline);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-display);
  font-variation-settings: 'wdth' 104, 'wght' 700;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  max-width: 20ch;
  text-wrap: balance;
}

.statement__word {
  display: inline-block;
  color: rgba(0, 0, 0, 0.38);
}

/* Artist-Liste */

.roster {

  --polster: var(--sp-2xs-xs);
}

.roster__item + .roster__item { margin-top: 1px; }

.roster__zeile {
  display: block;
}

.roster__knopf {
  display: flex;
  color: inherit;
  text-decoration: none;
  align-items: baseline;
  gap: var(--sp-s);
  width: calc(100% + var(--polster) * 2);
  margin-inline: calc(var(--polster) * -1);
  padding: var(--polster);
  min-height: 48px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-mittel) var(--ease-aus);
}

.roster__name {
  font-family: var(--face-headline);
  font-style: normal;
  font-weight: 700;
  font-size: var(--t-row);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  letter-spacing: var(--tr-row);
  line-height: 1.15;
  transition: font-variation-settings var(--dur-mittel) var(--ease-aus),
              color var(--dur-mittel) var(--ease-aus);
}

.roster__tag {
  margin-left: auto;
  font-size: var(--t-meta);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  transform: translateX(0);

  transition: transform var(--dur-lang) var(--ease-aus),
              color var(--dur-mittel) var(--ease-aus);
}

/* Die Zeile unter dem Zeiger: schwarz, Schrift weiß, die Tätigkeit rückt an den Namen. */
.roster__knopf:focus-visible {
  outline-color: var(--fg);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .roster__item:hover .roster__knopf {
    background-color: var(--fg);
  }

  .roster__item:hover .roster__name {
    font-variation-settings: 'wdth' 100, 'wght' 800;
    color: var(--ink);
  }

  .roster__item:hover .roster__tag {
    transform: translateX(var(--zug, 0px));
    color: var(--ink);
  }
}

/* Abfahrtstafel auf der Artists-Seite */
.dfi {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--sp-xs-m);
  margin-bottom: var(--sp-l);
  background: var(--led-grund);
}

.dfi__screen {
  display: block;
  max-width: 100%;
}

.dfi::before {
  content: '';
  position: absolute;
  inset: var(--sp-3xs-xs);
  border: 1px solid #1a1a1a;
  pointer-events: none;
}

/* Seitenkopf der Artists-Seite */

.page-head {
  padding-top: calc(var(--head-h) + var(--safe-t) + var(--sp-head-above));
  padding-bottom: var(--sp-head-below);
}

.page-head__title {
  font-family: var(--face-titel);
  font-weight: 900;
  font-size: var(--t-display);
  font-variation-settings: 'wdth' 120, 'wght' 900;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
}

.page-head__sub {
  margin-top: var(--sp-m);
  color: var(--fg-2);
  max-width: var(--measure);
}

/* Textseiten (Impressum, Datenschutz) */

.prose {
  max-width: var(--measure);
  padding-top: var(--sp-xl);
}

.prose h2 {
  font-size: var(--t-lead);
  font-variation-settings: 'wdth' 106, 'wght' 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-s);
}

.prose h2:first-child { margin-top: 0; }

.prose p {
  color: var(--fg-2);
  margin-bottom: var(--sp-s);
}

.prose p:last-child { margin-bottom: 0; }

.prose mark {
  background: #ffe9a8;
  color: var(--fg);
  padding: 0.1em 0.25em;
  font-variation-settings: 'wdth' 100, 'wght' 600;
}

/* Abfahrtstafel */

/* Netzplan */

.net {
  position: relative;

  width: min(118vw, max(1240px, 96vw));
  margin-left: auto;
  margin-right: -10vw;

  margin-top: calc(var(--sp-xl) * -1);
  margin-bottom: var(--sp-m);

}

.net__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.net__raster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  --zelle: 3.4;
}

.net__lines--stumm,
.net__trains--stumm { visibility: hidden; }

.net__svg { position: relative; }

.net__line {
  stroke-width: 14;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 720px) {
  .net {
    width: 150vw;
    margin-right: -28vw;
    margin-top: calc(var(--sp-l) * -1);
    margin-bottom: var(--sp-s);
  }

  .net__raster { --zelle: 2.1; }
}

.foot {
  margin-top: var(--sp-s);
  padding-top: var(--sp-m);

  padding-bottom: calc(var(--sp-m-l) + var(--safe-b));
  overflow: clip;
}

.foot__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  flex-wrap: wrap;
}

.js .foot__legal {
  padding-top: calc(var(--head-h) + var(--safe-t));
}

.foot__legal a {
  padding-block: var(--sp-2xs);
  transition: color var(--dur-kurz) var(--ease-aus);
}

@media (hover: hover) and (pointer: fine) {
  .foot__legal a:hover { color: var(--fg); }
}

/* Newsletter */
.abo {
  display: flex;
  align-items: stretch;
  gap: var(--sp-xs);
  max-width: 26rem;
  margin-top: var(--sp-m);
}

.abo__feld {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 0 2px;
  font: inherit;
  font-size: 0.95rem;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.01em;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fg);
  border-radius: 0;
  appearance: none;
  transition: border-bottom-width var(--dur-kurz) var(--ease-aus);
}

.abo__feld::placeholder {
  color: var(--fg-3);
  font-size: var(--t-meta);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}

.abo__feld:focus-visible {
  outline: none;
  border-bottom-width: 2px;
  padding-bottom: 1px;
}

.abo__knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  height: 40px;
  padding: 0 var(--sp-s);
  font: inherit;
  font-size: var(--t-meta);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  background: var(--fg);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition:
    color var(--dur-kurz) var(--ease-aus),
    background-color var(--dur-kurz) var(--ease-aus),
    box-shadow var(--dur-kurz) var(--ease-aus);
}

.abo__pfeil {
  display: inline-block;
  font-size: 1.3em;
  line-height: 1;
  letter-spacing: 0;
  transition: transform var(--dur-mittel) var(--ease-aus);
}

@media (hover: hover) and (pointer: fine) {
  .abo__knopf:hover {
    color: var(--fg);
    background: var(--ink);
    box-shadow: inset 0 0 0 1px var(--fg);
  }
  .abo__knopf:hover .abo__pfeil { transform: translateX(5px); }
}

.abo__knopf:active .abo__pfeil { transform: translateX(8px); }

.abo__knopf:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.abo__antwort {
  flex-basis: 100%;
  min-height: 1.2em;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.abo:has(.abo__antwort:not(:empty)) { flex-wrap: wrap; }
.abo__antwort:empty { display: none; }

.foot__links {
  display: flex;
  gap: var(--sp-m);
}

/* Kleine Bildschirme */

@media (max-width: 720px) {
  :root {
    --tr-meta: 0.13em;
    --w-wordmark: min(74vw, var(--w-aus-hoehe));
  }

  .statement__text { max-width: none; }

  .foot__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2xs);
  }
}

@media (any-pointer: coarse) {
  .head__mark {
    padding-block: var(--sp-s);
    margin-block: calc(var(--sp-s) * -1);
  }

  .foot__legal a {
    padding-block: var(--sp-s);
    margin-block: calc(var(--sp-2xs) * -1);
  }
}

@media (max-width: 400px) {
  :root { --tr-meta: 0.07em; }
}

@media (max-height: 560px) {
  :root {

    --sp-xl:         clamp(24px, 5vh, 40px);
    --sp-2xl:        clamp(40px, 8vh, 64px);
  }

  .page-head { padding-bottom: var(--sp-m); }
  .prose { padding-top: var(--sp-l); }
}

/* Wenn jemand weniger Bewegung wünscht */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .statement__word { color: var(--fg); }

  .splash__weg { height: 0; }
}