/* ============================================================
   FANTRIPS.CH — Vorschaltseite
   Gleiche Designsprache wie die Hauptseite (Aligne, "editorial
   spec sheet"): 0 px Radius, keine Schatten, keine Verläufe,
   Monospace für alle UI-Elemente, weit laufende Display-Type.

   Unterschied zur Hauptseite: Akzentfarbe ist das Rot aus dem
   Fantrips-Logo statt des blauen Signaltons.
   ============================================================ */

/* --- Schriften: lokal ausgeliefert, latin + latin-ext ---
   Bewusst nicht über Google Fonts eingebunden. Ein Aufruf des
   Google-CDN überträgt die IP-Adresse jeder Besucherin an einen
   Drittanbieter — dieselbe Entscheidung wie auf der Hauptseite. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url('/fonts/roboto-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url('/fonts/roboto-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --- */

:root {
  --ink: #151515;
  --char: #24170f;
  --paper: #ffffff;
  --ash: #ececec;

  /* Markenrot, minimal abgedunkelt.
     Das Logo führt #ED1C24. Dieser Ton erreicht auf Weiss einen Kontrast
     von 4.38 und liegt damit unter der Norm von 4.5 — für Flächen mit
     weisser Schrift und für farbigen Text also nicht zulässig. Um vier
     Prozent abgedunkelt sind es 4.69, und der Unterschied ist mit blossem
     Auge keiner. Im Logo selbst bleibt der Originalton stehen: Für
     Markenzeichen gilt die Kontrastvorgabe ausdrücklich nicht.
     Achtung: auf Anthrazit erreicht das Rot nur 3.72. Dort darf es
     nur für Flächen und grosse Elemente stehen, nie für Fliesstext. */
  --rot: #e41b23;

  --rule: #dcdcdc;
  --rule-dunkel: #3a2b22;
  --muted: #6a6a6a;
  --muted-dunkel: #a9a09a;

  --u: 4px;
  --container: 1200px;
  --gutter: 24px;
  --section: 72px;

  --mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

/* --- Grundlagen --- */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

/* Für Screenreader sichtbar, visuell entfernt. */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Typografie --- */

.display {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.94;
  margin: 0;
}

h1.display {
  font-size: clamp(38px, 7vw, 82px);
}

h2.display {
  font-size: clamp(28px, 4vw, 44px);
}

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.eyebrow--hell {
  color: var(--muted-dunkel);
}

.lead {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

/* --- Marke im Rot: das kleine Quadrat vor Abschnittstiteln --- */

.marke::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--rot);
  margin-right: 10px;
  vertical-align: 0.06em;
}

/* --- Abstände, die früher als style-Attribut im HTML standen ---

   Die Content-Security-Policy in vercel.json erlaubt `style-src 'self'`
   und damit keine style-Attribute. Achtzehn solcher Angaben hat der
   Browser auf der veröffentlichten Seite stillschweigend verworfen; die
   Abstände kamen nie an.

   Auffallen konnte das beim Entwickeln nicht: Der Vorschau-Server in
   vorschau.mjs schickt die Kopfzeile nicht mit, lokal sah also alles
   richtig aus. Gefunden erst beim Mitlesen der Browser-Meldungen auf der
   Live-Seite.

   Hier stehen dieselben Angaben so, dass sie wirken — und die Regel
   bleibt streng. `'unsafe-inline'` bei style-src wäre der kürzere Weg
   gewesen und hätte genau die Absicherung aufgeweicht, für die sie da
   ist. */

/* Titel direkt nach einem Abschnittslabel mit rotem Quadrat.
   Die beiden Titel nach `.eyebrow--hell` sind bewusst nicht erfasst:
   Der im Kopfbereich bekommt seinen Abstand aus `.titel h1`, der im
   Kontaktblock braucht keinen. */
.eyebrow.marke + .display {
  margin-top: 14px;
}

.rechtstext h1.display {
  font-size: clamp(32px, 5vw, 52px);
}

/* Erster Absatz nach dem Titel einer Rechtsseite. Vorher je nach Seite
   20, 24 oder 26 Pixel — ein Unterschied, den niemand sehen konnte und
   der auch nicht gewollt war. */
.rechtstext h1.display + p {
  margin-top: 24px;
}

/* Der Absatz mit dem Knopf am Ende einer Rechtsseite. Vorher 28 und 36. */
.rechtstext .abschluss {
  margin-top: 32px;
}

/* Kleingedrucktes unter dem Anmeldetext. Der Grauton ist dunkler als
   `--muted` und bleibt es: Er trägt hier echten Inhalt, keine Beischrift. */
.anmeldung__hinweis {
  margin-top: 18px;
  color: #4c4c4c;
}

/* Öffnungszeiten unter den Kontaktwegen. */
.direkt__wege .eyebrow {
  margin-top: 6px;
}

/* --- Aktionen --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  background: var(--rot);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--ink);
}

.btn:disabled {
  background: var(--muted);
  cursor: progress;
}

.btn--umriss {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn--umriss:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.btn--breit {
  width: 100%;
}

.link-unter {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link-unter:hover {
  color: var(--rot);
}

/* ============================================================
   Kopf und Titelblock
   ============================================================ */

.kopfband {
  background: var(--char);
  color: #fff;
}

.kopfband__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule-dunkel);
}

/* Das Logo ist eine Vektorgrafik und damit in jeder Grösse scharf.
   Es funktioniert nur auf dunklem Grund: Der Schriftzug ist weiss. */
.logo {
  width: 200px;
  height: auto;
}

.startmarke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.startmarke::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--rot);
  flex: none;
}

.titel {
  background: var(--char);
  color: #fff;
  padding-block: clamp(48px, 7vw, 88px) clamp(48px, 7vw, 80px);
}

.titel__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

.titel h1 {
  margin-block: 18px 22px;
}

.titel .lead {
  color: #e6e0dc;
  max-width: 46ch;
}

.titel__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Rechte Spalte: was wir organisieren, als knappe Aufzählung. */
.titel__liste {
  border-top: 1px solid var(--rule-dunkel);
}

.titel__liste div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule-dunkel);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.titel__liste dt,
.titel__liste span:first-child {
  text-transform: uppercase;
  color: var(--muted-dunkel);
}

.titel__liste span:last-child {
  text-align: right;
  color: #fff;
}

/* ============================================================
   Bildband
   ============================================================ */

.bildband {
  background: var(--char);
}

.bildband img {
  width: 100%;
  height: clamp(240px, 42vw, 520px);
  object-fit: cover;
  /* Gleiche Behandlung wie alle Bilder der Hauptseite. */
  filter: saturate(0.82) contrast(1.04);
}

.bildband__zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 12px 22px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dunkel);
}

/* ============================================================
   Sportarten
   ============================================================ */

.sportarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 40px;
}

.sportart {
  background: var(--paper);
  padding: 28px 24px 30px;
}

.sportart h3 {
  margin-bottom: 18px;
}

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

.sportart li {
  padding-block: 9px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.45;
}

.sportart li:first-child {
  border-top: 0;
}

/* ============================================================
   Leistungen
   ============================================================ */

.leistungen {
  background: var(--ash);
}

.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 36px;
}

.leistung {
  background: var(--ash);
  padding: 26px 22px 28px;
}

.leistung svg {
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.25;
}

.leistung h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.leistung p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #4c4c4c;
}

.hinweis {
  margin-top: 22px;
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================
   Anmeldung
   ============================================================ */

.anmeldung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-top: 36px;
}

.formular {
  border: 1px solid var(--ink);
  padding: clamp(22px, 3vw, 32px);
}

.feld {
  margin-bottom: 16px;
}

.feld label,
.gruppe legend {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.feld input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.feld input:focus {
  border-color: var(--ink);
}

.gruppe {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

.gruppe legend {
  padding: 0;
}

.gruppe__optionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}

.gruppe label,
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  cursor: pointer;
  margin: 0;
}

input[type='checkbox'] {
  appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
}

input[type='checkbox']:checked {
  background: var(--rot);
  border-color: var(--rot);
  /* Häkchen als Hintergrundbild, damit kein zusätzliches Element nötig ist. */
  background-image: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
  background-size: 62% 2px, 62% 2px;
  background-position: 2px 9px, 5px 9px;
  background-repeat: no-repeat;
}

.zustimmung {
  font-size: 12px;
  line-height: 1.45;
  color: #4c4c4c;
  margin-block: 4px 20px;
}

/* Honigtopf: für Menschen unsichtbar, für einfache Bots verlockend. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung {
  margin-top: 16px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.45;
  border-left: 3px solid var(--ink);
  background: var(--ash);
}

.meldung[data-art='fehler'] {
  border-left-color: var(--rot);
}

.meldung[hidden] {
  display: none;
}

.formular small {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted);
}

/* ============================================================
   Direkter Kontakt
   ============================================================ */

.direkt {
  background: var(--ink);
  color: #fff;
}

.direkt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.direkt h2 {
  margin-block: 14px 14px;
}

.direkt p {
  color: #ddd7d3;
  max-width: 52ch;
  margin: 0;
}

.direkt__wege {
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.direkt__wege a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.direkt__wege a:hover {
  color: #fff;
  text-decoration-thickness: 2px;
}

/* ============================================================
   TravelBrain und Fuss
   ============================================================ */

.traeger {
  background: var(--ash);
}

.traeger__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.traeger p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.traeger a {
  display: inline-block;
  margin-top: 16px;
}

footer {
  background: var(--char);
  color: #fff;
  padding-block: 40px 44px;
}

.fuss__raster {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.fuss__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fuss__zeile {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-dunkel);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-dunkel);
}

.fuss__zeile a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================================ */

.rechtstext {
  max-width: 68ch;
}

.rechtstext h2 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.02em;
  margin: 36px 0 10px;
}

.rechtstext p,
.rechtstext li {
  font-size: 14px;
  line-height: 1.65;
}

.rechtstext ul {
  padding-left: 18px;
}

.entwurfshinweis {
  border-left: 3px solid var(--rot);
  background: var(--ash);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* ============================================================
   Schmale Darstellung
   ============================================================ */

@media (max-width: 900px) {
  :root {
    --section: 52px;
    --gutter: 20px;
  }

  .titel__raster,
  .anmeldung__raster,
  .direkt__raster,
  .traeger__raster {
    grid-template-columns: 1fr;
  }

  .titel__raster {
    align-items: start;
  }

  .sportarten,
  .leistungen__raster {
    grid-template-columns: 1fr 1fr;
  }

  /* Drei Karten in zwei Spalten lassen sonst eine leere Zelle stehen,
     in der die Trennfarbe des Rasters durchscheint. */
  .sportart:last-child {
    grid-column: 1 / -1;
  }

  .direkt__raster {
    gap: 24px;
  }
}

@media (max-width: 560px) {
  .kopfband__innen {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .sportarten,
  .leistungen__raster,
  .gruppe__optionen {
    grid-template-columns: 1fr;
  }

  .titel__aktionen .btn {
    width: 100%;
  }
}