/**
 * Einstiegsseite zu den Leichtathletik-Rechenhilfen.
 *
 * Gleiche Gestaltung wie die Anwendungen selbst: Papierton statt Farbverlauf,
 * Linien statt Kästen, keine abgerundeten Ecken, keine Schlagschatten.
 * Die Schriften liegen bereits unter /dreikampf/schriften/ und werden von dort
 * mitbenutzt – es wird nichts von außen geladen.
 */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/dreikampf/schriften/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/dreikampf/schriften/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dreikampf/schriften/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/dreikampf/schriften/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/dreikampf/schriften/plex-mono-500.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --papier: #f2efe9;
  --flaeche: #fbfaf8;
  --weiss: #fff;
  --tinte: #16181a;
  --tinte-weich: #3d4145;
  --grau: #6f6b64;
  --linie: #d5cec2;
  --linie-fein: #e6e1d7;
  --signal: #b23a1f;

  --kondens: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Plex Mono', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.huelle {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* ---------- Kopf ---------- */

.kopfleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  border-bottom: 1px solid var(--linie);
}

.wortmarke {
  font-family: var(--kondens);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: none;
}

.wortmarke span {
  color: var(--signal);
}

.kopf-meta {
  font-family: var(--kondens);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
}

.titelblock {
  padding: 40px 0 30px;
  border-bottom: 2px solid var(--tinte);
}

.kicker {
  margin: 0 0 14px;
  font-family: var(--kondens);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}

/* Lange Fachwörter wie „Leichtathletik" passen auf schmalen Geräten nicht in
   eine Zeile. Ohne Trennung liefen sie über den Rand hinaus, weshalb Buchstaben
   abgeschnitten wurden. Silbentrennung und Umbruch im Wort verhindern das. */
.titelblock h1 {
  margin: 0;
  font-family: var(--kondens);
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: break-word;
}

.lead {
  max-width: 52ch;
  margin: 20px 0 0;
  font-size: 19px;
  line-height: 1.45;
}

/* ---------- Anwendungen ---------- */

.karte {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 0 22px;
  padding: 34px 0 32px;
  border-bottom: 1px solid var(--linie);
}

.karte-nr {
  font-family: var(--kondens);
  font-size: 62px;
  font-weight: 700;
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--linie);
  user-select: none;
}

@supports not (-webkit-text-stroke: 1px red) {
  .karte-nr {
    color: var(--linie);
  }
}

.karte-inhalt {
  min-width: 0;
}

.karte-kurz {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
}

.karte h2 {
  margin: 4px 0 0;
  font-family: var(--kondens);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: break-word;
}

.karte h2 a {
  color: var(--tinte);
  text-decoration: none;
  transition: color 0.14s ease;
}

.karte h2 a:hover {
  color: var(--signal);
}

.karte-text {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--tinte-weich);
  font-size: 16px;
}

.merkmale {
  max-width: 62ch;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 24px;
}

.merkmale li {
  position: relative;
  padding: 7px 0 7px 18px;
  border-bottom: 1px solid var(--linie-fein);
  color: var(--tinte-weich);
  font-size: 15px;
}

.merkmale li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 1px;
  background: var(--signal);
}

.karte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}

.kenndaten {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.kenndaten > div {
  margin-right: 24px;
  padding-right: 24px;
  border-right: 1px solid var(--linie-fein);
}

.kenndaten > div:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

.kenndaten dt {
  font-family: var(--kondens);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
}

.kenndaten dd {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--tinte);
}

.knopf {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 26px;
  border: 1px solid var(--tinte);
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--kondens);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.knopf:hover {
  background: var(--signal);
  border-color: var(--signal);
}

/* Einschränkender Hinweis in einer Karte — sachlich, nicht als Warnkasten. */
.karte-hinweis {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--linie);
  font-size: 15px;
  line-height: 1.55;
  color: var(--grau);
}

/* Karten mit zwei Zielen (Ausdauer testen): zweiter Knopf als Umriss,
   damit die Karte nicht mit zwei gleich schweren Blöcken endet. */
.knopfgruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.knopfgruppe .knopf + .knopf {
  background: transparent;
  color: var(--tinte);
}

.knopfgruppe .knopf + .knopf:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--papier);
}

/* ---------- Gemeinsame Hinweise ---------- */

.hinweis {
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--linie);
}

.hinweis h2 {
  margin: 0 0 20px;
  font-family: var(--kondens);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.hinweis-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--linie-fein);
}

.hinweis-raster > div {
  padding: 16px 22px 18px 0;
  border-right: 1px solid var(--linie-fein);
  border-bottom: 1px solid var(--linie-fein);
}

.hinweis-raster > div:last-child {
  border-right: 0;
}

.hinweis h3 {
  margin: 0 0 6px;
  font-family: var(--kondens);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}

.hinweis p {
  margin: 0;
  max-width: 42ch;
  color: var(--tinte-weich);
  font-size: 14.5px;
}

.quellenhinweis {
  padding: 22px 0 0;
}

.quellenhinweis p {
  max-width: 74ch;
  margin: 0;
  color: var(--grau);
  font-size: 14.5px;
}

.quellenhinweis strong {
  color: var(--tinte);
}

.quellenhinweis a,
.fuss a {
  color: var(--signal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.quellenhinweis a:hover,
.fuss a:hover {
  color: var(--tinte);
}

/* ---------- Fuß ---------- */

.fuss {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  color: var(--grau);
  font-size: 14px;
}

.fuss p {
  margin: 0 0 5px;
}

.fuss a {
  color: var(--tinte-weich);
  border-bottom-color: var(--linie);
  font-weight: 400;
}

.fuss-note {
  font-family: var(--kondens);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte);
}

/* ---------- Tastaturbedienung ---------- */

:where(a, button):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ---------- Schmale Geräte ---------- */

@media (max-width: 720px) {
  .huelle {
    padding: 0 16px 56px;
  }

  .karte {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0 14px;
    padding: 26px 0 24px;
  }

  .karte-nr {
    font-size: 30px;
  }

  .hinweis-raster > div {
    padding-right: 0;
    border-right: 0;
  }

  .karte-fuss .knopf {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Druck ---------- */

@media print {
  body {
    background: #fff;
  }

  .knopf,
  .fuss {
    display: none;
  }
}