/* ============================================================================
   Transport — songintheair.app/transport.html
   ----------------------------------------------------------------------------
   Ergaenzt style.css, ersetzt es nicht. Kopfzeile, Fusszeile, Marke und
   Fokusring kommen von dort; hier stehen nur die Bausteine dieser Seite
   (Praefix .t*) und der Stoerer, den die Startseite mitbenutzt.

   Die Transport-Seite hat eine andere Aufgabe als die Startseite. Dort
   ueberzeugt das Bild und der Text belegt — hier gibt es kein Produktbild,
   nur eine Behauptung, die getragen werden muss. Also traegt die Typografie:
   eine breite Ueberschrift, ein enger Lesesatz darunter, und Substanz in
   Strukturen (drei Saeulen, drei Zahlen, eine Liste) statt in Absaetzen.
   ========================================================================= */

/* ── Der Eintrag in der Kopfzeile ─────────────────────────────────────────
   Chris (2026-09-09): "transport soll jetzt bitte nicht den fokus der app
   klauen." Deshalb steht hier bewusst fast nichts. Erst trug der Eintrag
   einen Punkt in Akzentfarbe und eine hellere Schrift — das machte ihn zum
   lautesten Element der Zeile, lauter als der Knopf zur App. Jetzt ist er
   ein Navigationspunkt wie die anderen; der einzige Akzent der Kopfzeile
   bleibt "Get the app". Das Zubehoer ist auffindbar, nicht aufdringlich.

   Chris (2026-09-09): "transport ist der letzte punkt hinter get the app."
   Deshalb steht der Eintrag NACH dem Knopf, nicht in der Sprungmarken-Zeile.
   Er ist damit das letzte, was die Kopfzeile sagt — auffindbar fuer den, der
   danach sucht, und ohne Anspruch auf den ersten Blick.

   Auf schmalen Geraeten wandert die ganze Zeile hinter den Menueknopf (siehe
   style.css, 'Menue fuer schmale Schirme'). Dort steht Transport direkt unter
   den Sprungmarken. */
.nav-neu {
  color: var(--mist);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
  flex: none;
}
.nav-neu:hover { color: var(--pearl); }

/* Die Sprungmarken schieben sich selbst nach rechts. Steht Transport hinter
   dem Knopf, braucht die Zeile keinen zweiten Schub — sonst reisst sie in
   der Mitte auf. */
.topbar .topnav { margin-left: auto; }
.topbar .topcta { margin-left: 0; }

/* Gemeinsame Randbedingung aller Abschnitte. Ein Wert an einer Stelle, damit
   die Seite eine Kante hat und nicht fuenf leicht verschiedene. */
.thero,
.tklar,
.tsaeulen,
.tzahlen,
.tschluss {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}

/* ── Kopf der Seite ───────────────────────────────────────────────────────
   Linksbuendig, nicht zentriert: der Satz ist lang und ein zentrierter
   Flattersatz ueber drei Zeilen liest sich als Plakat, nicht als Aussage. */
.thero {
  position: relative;
  padding-block: clamp(3.2rem, 8vw, 6rem) clamp(2.4rem, 6vw, 4rem);
}

/* Derselbe Schimmer wie im Hero der Startseite, nur flacher — die Seite
   soll verwandt aussehen, nicht dieselbe sein. */
.thero::before {
  content: "";
  position: absolute;
  inset: -30% -25% auto -25%;
  height: 150%;
  background:
    radial-gradient(50% 40% at 20% 20%, rgba(255,107,46,0.13) 0%, rgba(255,107,46,0) 70%),
    radial-gradient(46% 38% at 78% 62%, rgba(120,80,255,0.11) 0%, rgba(120,80,255,0) 70%);
  pointer-events: none;
  z-index: -1;
}

.thero-links { text-align: left; }

.tkicker {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon);
}

.thero h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  max-width: 18ch;
}

.tlede {
  margin: 1.5rem 0 0;
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  line-height: 1.62;
  color: var(--mist);
  max-width: 46ch;
}
.tlede strong { color: var(--pearl); font-weight: 600; }
.tlede em { font-style: italic; color: var(--neon); }

/* ── Handlungsaufforderung ────────────────────────────────────────────────
   Knopf und Hinweis stehen nebeneinander, solange Platz ist, und untereinander
   sobald nicht. baseline statt center, damit der Hinweis auf der Schriftlinie
   des Knopftextes sitzt und nicht auf halber Knopfhoehe schwebt. */
.tcta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem 1.4rem;
  margin-top: 2.2rem;
}

.tbtn {
  display: inline-block;
  padding: 0.78rem 1.5rem;
  border-radius: 99px;
  background: var(--neon);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .18s ease;
}
.tbtn:hover {
  background: var(--electric);
  color: var(--ink);
  transform: translateY(-2px);
}

.tnote {
  font-size: 0.85rem;
  color: var(--rain);
  letter-spacing: 0.01em;
}

/* ── Klarstellung ─────────────────────────────────────────────────────────
   Der wichtigste Kasten der Seite. Transport ist Zubehoer, und wer das hier
   nicht sofort liest, haelt die App fuer unvollstaendig. Deshalb steht er
   direkt unter dem Kopf und ist als Einschub gesetzt, nicht als Fliesstext. */
.tklar {
  padding-block: clamp(1.8rem, 4vw, 2.6rem);
}
.tklar h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin-bottom: 1rem;
}
.tklar p {
  margin: 0 0 1rem;
  max-width: 58ch;
  color: var(--mist);
  line-height: 1.68;
}
.tklar p:last-child { margin-bottom: 0; }
.tklar strong { color: var(--pearl); font-weight: 600; }

/* Der Balken soll den Text fassen, nicht in leerem Raum stehen: eigene, enge
   Innenabstaende statt der grosszuegigen aus .tklar — sonst laeuft die Linie
   oben und unten sichtbar ueber den Absatz hinaus. */
.tklar-oben {
  border-left: 2px solid var(--neon);
  padding-block: 0.15rem;
  padding-left: clamp(1rem, 3vw, 1.6rem);
  padding-inline-end: 0;
  margin-left: clamp(1.2rem, 4vw, 2.5rem);
  margin-right: clamp(1.2rem, 4vw, 2.5rem);
  margin-block: clamp(1rem, 3vw, 2rem) clamp(2.4rem, 6vw, 4rem);
  max-width: calc(var(--wrap) - 2 * clamp(1.2rem, 4vw, 2.5rem));
}
.tklar-oben p { color: var(--pearl); font-size: 1.02rem; }

.tfein {
  font-size: 0.86rem;
  color: var(--rain);
  line-height: 1.6;
}

/* ── Drei Saeulen ─────────────────────────────────────────────────────────
   Drei Behauptungen, jede mit ihrem eigenen Beleg. Gleich hohe Karten waeren
   hier falsch: die dritte traegt die Zahl, die den Unterschied macht, und darf
   laenger sein. Also Grid ohne Hoehenzwang. */
.tsaeulen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  padding-block: clamp(2.4rem, 6vw, 4rem);
  border-top: 1px solid var(--hairline-soft);
}
.tsaeulen article { min-width: 0; }
.tsaeulen h2 {
  font-size: clamp(1.22rem, 2.4vw, 1.42rem);
  line-height: 1.25;
  margin-bottom: 0.85rem;
}
.tsaeulen p {
  margin: 0;
  color: var(--mist);
  font-size: 0.97rem;
  line-height: 1.66;
}
.tsaeulen strong { color: var(--pearl); font-weight: 600; }

/* ── Zahlenstreifen ───────────────────────────────────────────────────────
   Drei Werte, die man nachpruefen kann. Die Zahl gross und in der
   Display-Schrift, die Erklaerung klein darunter — umgekehrt liest niemand
   die Zahl. */
.tzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-block: clamp(2rem, 5vw, 3.2rem);
  border-block: 1px solid var(--hairline-soft);
}
.tzahlen div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.tzahlen b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--neon);
}
.tzahlen span {
  font-size: 0.87rem;
  color: var(--rain);
  line-height: 1.5;
  max-width: 24ch;
}

/* ── Abschluss: was man braucht ───────────────────────────────────────────── */
.tschluss {
  padding-block: clamp(2.6rem, 6vw, 4.2rem) clamp(3.2rem, 8vw, 5.5rem);
}
.tschluss h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin-bottom: 1.6rem;
}

/* Einkaufsliste. Der Fettdruck traegt den Gegenstand, der Rest die
   Einschraenkung — deshalb kein Aufzaehlungszeichen, sondern eine Haarlinie
   zwischen den Zeilen: das liest sich als Tabelle, nicht als Wunschzettel. */
.tliste {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
  max-width: 60ch;
}
.tliste li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--hairline-soft);
  color: var(--mist);
  font-size: 0.97rem;
  line-height: 1.6;
}
.tliste li:last-child { border-bottom: 1px solid var(--hairline-soft); }
.tliste b {
  color: var(--pearl);
  font-weight: 600;
}

/* ── Stoerer ──────────────────────────────────────────────────────────────
   Wird von der Startseite mitgeladen, nicht nur hier. Eine Karte, die auf
   Transport zeigt, ohne den Lesefluss der Startseite zu unterbrechen:
   deshalb Marke links, Text mittig, Pfeil rechts — ein Muster, das man aus
   Systemeinstellungen kennt und nicht lesen muss, um es zu verstehen. */
.stoerer {
  max-width: var(--wrap);
  margin: clamp(2.4rem, 6vw, 4rem) auto;
  padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}
.stoerer a {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255,107,46,0.07) 0%, rgba(120,80,255,0.05) 100%);
  color: var(--pearl);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .18s ease;
}
.stoerer a:hover {
  border-color: rgba(255,160,96,0.42);
  background: linear-gradient(135deg, rgba(255,107,46,0.12) 0%, rgba(120,80,255,0.08) 100%);
  transform: translateY(-2px);
}
.stoerer a > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.stoerer b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.stoerer b + span {
  font-size: 0.89rem;
  color: var(--mist);
  line-height: 1.55;
}
.marke {
  flex: none;
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--neon);
  white-space: nowrap;
}
.pfeil {
  flex: none;
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--neon);
  transition: transform .18s ease;
}
.stoerer a:hover .pfeil { transform: translateX(4px); }

/* ── Schmale Geraete ──────────────────────────────────────────────────────
   Geprueft bis 375px. Der Pfeil faellt weg, sobald er neben dem Text nur noch
   Platz kostet — die ganze Karte ist der Link, er war nie die Bedienung. */
@media (max-width: 34rem) {
  .thero h1 { max-width: none; }
  .tcta { flex-direction: column; align-items: flex-start; }
  .tbtn { width: 100%; text-align: center; }
  .stoerer a { flex-wrap: wrap; }
  .pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tbtn,
  .stoerer a,
  .pfeil { transition: none; }
  .tbtn:hover,
  .stoerer a:hover { transform: none; }
  .stoerer a:hover .pfeil { transform: none; }
}