/* =========================================================================
   SAARGOLD MAGAZIN · systeme de design « Faehrtenbuch und Hundeplatz »,
   prefixe frt-. Le carnet de piste et le terrain d'entrainement donnent leur
   nom a chaque module : bahn (la piste = largeur utile), platz (le terrain
   ou tout commence = en-tete), leine (la laisse qui relie = navigation),
   abgang (le depart de la piste = bandeau photo de l'accueil), kennzahlen
   (la bande de chiffres sous le voile), pfad (le fil d'Ariane), feld (le
   champ ou la piste est tracee = section), plakette (surtitre), tafeln /
   tafel (les panneaux plantes au bord du terrain = mosaique et fiche),
   spur / tritt (la trace et le pas = registre date), einstieg (l'entree sur
   la piste = tete d'article), witterung (les conditions de vent = image de
   tete), lauf (la course = colonne de lecture), schiene (le rail collant),
   winkel (l'angle de piste ou l'on ralentit = encadre de note), fund
   (l'objet trouve = poste de donnees), ansage (l'annonce = exergue),
   raster (le quadrillage = tableau de mesures), weiter (a lire ensuite),
   abschluss (la fin de piste = pied de page), zeichen (glyphes SVG :
   patte, Bringholz, Huerde, Zweig), strich (separateur).

   Palette « Schiefer und Sandstein » : le schiste gris-mauve du fond, le
   gres rouge du Sud-Ouest en dominante, la mousse en second accent.
   Angles VIFS partout, fiches en aplat SANS filet, colonne de lecture de
   68ch doublee d'un rail collant, registre date SANS vignette, bandeau
   photo a voile fige en dur. Aucune requete externe, aucune police
   distante, aucun script. Mode sombre automatique.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · le schiste et le gres ---------------------------- */
  --boden:          #eae4e6;  /* schiste pale : fond de toutes les pages   */
  --boden-tief:     #ded4d8;  /* reserves, sections alternees, aplat fiche */
  --boden-hell:     #f7f3f4;  /* encadres, lignes paires des tableaux      */
  --tinte:          #221f27;  /* encre violet-noir : texte courant         */
  --tinte-nacht:    #1b1820;  /* fonds sombres : en-tete, fund, pied       */
  --tinte-leise:    #58515e;  /* legendes, mentions, chapo                 */
  --sandstein:      #7d2c31;  /* DOMINANTE : liens, plaquettes, filets     */
  --sandstein-tief: #5a1c21;  /* survol, appui                             */
  --sandstein-hell: #d59a92;  /* gres sur fond sombre                      */
  --moos:           #2f5347;  /* second accent : legendes de tableau       */
  --moos-hell:      #8fb9a6;  /* mousse sur fond sombre                    */
  --kiesel:         #8c8590;  /* ornements, jamais un texte sur fond clair */
  --naht:           #cdc3c8;  /* filet fin sur fond clair                  */
  --naht-nacht:     #3a343f;  /* filet fin sur fond sombre                 */
  --nacht-boden:    #191620;  /* mode sombre : fond                        */
  --nacht-tief:     #211d29;
  --nacht-hell:     #262130;
  --nacht-schrift:  #ece7ee;
  --nacht-leise:    #a9a1b0;

  /* ---- 2. TYPOGRAPHIE · piles systeme, rien de distant ---------------- */
  --schrift-titel: Charter, "Bitstream Charter", "Sitka Text", Constantia, "Nimbus Roman", serif;
  --schrift-lesetext: "Trebuchet MS", "Lucida Grande", "Fira Sans", Tahoma, "DejaVu Sans", sans-serif;

  --titel-fett: 600;
  --titel-sperr: 0.002em;
  --kapitaelchen-sperrung: 0.18em;

  --satz-groesse: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --satz-durchschuss: 1.62;
  --stufe-h1: clamp(2.05rem, 1.05rem + 3.4vw, 3.7rem);
  --stufe-h2: clamp(1.42rem, 1.08rem + 1.28vw, 2.05rem);
  --stufe-h3: clamp(1.1rem, 1rem + 0.5vw, 1.36rem);
  --stufe-h4: 1.02rem;

  /* ---- 3. RYTHME ------------------------------------------------------ */
  --lauf-breite:  68ch;
  --bahn-breite:  1280px;
  --schiene-breite: 14rem;
  --rand:    clamp(1rem, 3.6vw, 3.4rem);
  --rinne:   clamp(0.85rem, 2vw, 1.8rem);
  --atem:    clamp(2.2rem, 5vw, 4.8rem);
  --versatz-h: clamp(1rem, 2.6vw, 2.8rem);

  /* ---- 4. DETAILS ----------------------------------------------------- */
  --kante:    0;            /* angles vifs partout : aucun rayon */
  --naht-fein: 1px solid var(--naht);
  --tempo:    150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --boden:          var(--nacht-boden);
    --boden-tief:     var(--nacht-tief);
    --boden-hell:     var(--nacht-hell);
    --tinte:          var(--nacht-schrift);
    --tinte-leise:    var(--nacht-leise);
    --sandstein:      #d59a92;
    --sandstein-tief: #e6b8b1;
    --moos:           var(--moos-hell);
    --kiesel:         #7d7684;
    --naht:           #3a343f;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--boden);
  color: var(--tinte);
  font-family: var(--schrift-lesetext);
  font-size: var(--satz-groesse);
  line-height: var(--satz-durchschuss);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.frt-zeichen { display: inline-block; vertical-align: -0.14em; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: var(--titel-fett);
  letter-spacing: var(--titel-sperr);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--stufe-h1); }
h2 { font-size: var(--stufe-h2); }
h3 { font-size: var(--stufe-h3); }
h4 { font-size: var(--stufe-h4); }

p, ul, ol { margin: 0 0 1.1em; }
a {
  color: var(--sandstein);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  transition: color var(--tempo);
}
a:hover { color: var(--sandstein-tief); }
:focus-visible {
  outline: 2px solid var(--sandstein);
  outline-offset: 3px;
  border-radius: var(--kante);
}
hr { border: 0; border-top: var(--naht-fein); margin: var(--atem) 0; }

::selection { background: var(--sandstein); color: #f7f3f4; }

/* Chiffres alignes : dates, skalen, notes, mesures. */
.frt-raster, .frt-fund, .frt-wann, .frt-angaben, .frt-kennzahlen,
.frt-feld__nummer, .frt-abgang__jahrgang, .frt-schiene {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   OSSATURE
   ========================================================================= */

.frt-sprung {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinte-nacht); color: #f2eef0;
  padding: 0.7rem 1.15rem; z-index: 60;
}
.frt-sprung:focus { left: 0.6rem; top: 0.6rem; }

/* La bahn : largeur utile de toute zone de contenu. */
.frt-bahn {
  width: 100%;
  max-width: var(--bahn-breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.frt-gelaende { display: block; }

/* --- Platz : l'en-tete, le terrain ou tout commence --------------------- */
.frt-platz {
  background: var(--tinte-nacht);
  color: #f2eef0;
  border-bottom: 4px solid var(--sandstein);
  padding-block: clamp(0.6rem, 1.1vw, 0.85rem);
}
.frt-platz__reihe {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.frt-platz__marke {
  font-family: var(--schrift-titel);
  font-size: clamp(1.18rem, 0.95rem + 0.85vw, 1.62rem);
  color: #f2eef0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.frt-platz__marke:hover { color: #fff; }
.frt-platz__marke span {
  display: block;
  font-family: var(--schrift-lesetext);
  font-size: 0.6rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein-hell);
  margin-top: 0.26rem;
}
.frt-leine ul {
  display: flex; flex-wrap: wrap;
  gap: 0.25rem 1.05rem;
  list-style: none; margin: 0; padding: 0;
}
.frt-leine__glied a {
  color: #cbc3d0;
  text-decoration: none;
  font-size: 0.79rem;
  letter-spacing: 0.02em;
  padding-block: 0.14rem;
  border-bottom: 2px solid transparent;
  transition: color var(--tempo), border-color var(--tempo);
}
.frt-leine__glied a:hover {
  color: #fff;
  border-bottom-color: var(--sandstein-hell);
}

/* --- Pfad : le fil d'Ariane -------------------------------------------- */
.frt-pfad { padding-block: clamp(0.8rem, 1.7vw, 1.25rem); }
.frt-pfad ol {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.79rem;
  color: var(--tinte-leise);
}
.frt-pfad li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--sandstein);
}
.frt-pfad a { color: var(--tinte-leise); }
.frt-pfad a:hover { color: var(--sandstein); }
.frt-pfad [aria-current="page"] { color: var(--tinte); font-weight: 600; }

/* =========================================================================
   ABGANG · le depart de la piste : bandeau PHOTO pleine largeur, voile
   fige EN DUR (jamais une variable : en theme clair une variable pale
   delaverait la photo en gris), titre et deck poses en bas a gauche dans
   la zone calme, bande de Kennzahlen sous le voile. Le bandeau est une
   BANDE et non un ecran : la mosaique des rubriques commence avant
   700 px de hauteur de page.
   ========================================================================= */

.frt-abgang {
  position: relative;
  isolation: isolate;
  background: var(--tinte-nacht);
  min-height: clamp(232px, 23vw, 330px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.frt-abgang__blick {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.frt-abgang::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(27, 24, 32, 0.90) 0 42%, rgba(27, 24, 32, 0.34) 100%);
}
.frt-abgang__rahmen {
  width: 100%;
  padding-block: clamp(1.15rem, 2.3vw, 1.85rem) clamp(0.75rem, 1.4vw, 1.1rem);
  color: #f2eef0;
}
.frt-abgang__oberzeile {
  display: flex; align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein-hell);
  margin: 0 0 0.6rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.62);
}
.frt-abgang h1 {
  max-width: 32ch;
  font-size: clamp(1.85rem, 1rem + 2.9vw, 3.1rem);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.frt-abgang__deck {
  font-size: clamp(0.95rem, 0.91rem + 0.22vw, 1.06rem);
  line-height: 1.46;
  max-width: 80ch;
  margin: 0.7rem 0 0;
  color: #e2dce5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  text-wrap: pretty;
}
.frt-abgang__jahrgang {
  margin: 0.8rem 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-size: 0.72rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: #b8b0c0;
}
.frt-abgang__jahrgang em {
  font-style: normal;
  color: #fff;
  letter-spacing: 0.09em;
}

/* La bande de chiffres, collee sous le voile. */
.frt-kennzahlen {
  background: var(--tinte-nacht);
  border-bottom: var(--naht-fein);
}
.frt-kennzahlen ol {
  display: flex;
  list-style: none; margin: 0; padding: 0;
  gap: 0;
  overflow-x: auto;
}
.frt-kennzahlen li {
  flex: 1 1 0;
  min-width: max-content;
  padding: 0.62rem 1.1rem;
  border-left: 1px solid var(--naht-nacht);
  font-size: 0.73rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #cbc3d0;
  white-space: nowrap;
}
.frt-kennzahlen li:first-child { border-left: 0; padding-left: 0; }
.frt-kennzahlen li strong { color: var(--sandstein-hell); font-weight: 600; }

/* =========================================================================
   FELD · les sections, numerotees 01 a 06 plus NOTIZ
   ========================================================================= */

.frt-feld { padding-block: clamp(1.3rem, 2.6vw, 2.6rem); }
.frt-feld--gesenkt { background: var(--boden-tief); }
.frt-feld__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: 3px solid var(--sandstein);
  padding-bottom: 0.5rem;
  margin-bottom: clamp(0.95rem, 1.9vw, 1.5rem);
}
.frt-feld__nummer {
  display: inline-block;
  background: var(--sandstein);
  color: #f7f3f4;
  font-family: var(--schrift-lesetext);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  padding: 0.2rem 0.55rem 0.2rem 0.62rem;
  margin-right: 0.75rem;
  vertical-align: 0.22em;
}
.frt-feld__titel { font-size: var(--stufe-h2); }
.frt-feld__notiz {
  margin: 0;
  color: var(--tinte-leise);
  font-size: 0.9rem;
  max-width: 40ch;
}

/* Strich : le separateur entre grandes sections. */
.frt-strich {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.3rem, 1vw, 0.9rem);
  color: var(--kiesel);
}

/* Plakette : surtitre en petites capitales, couleur gres. */
.frt-plakette {
  font-size: 0.72rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein);
  margin: 0 0 0.5rem;
}

/* =========================================================================
   TAFELN · la mosaique de panneaux. Aplat de fond creux, AUCUN filet de
   cadre, angles vifs, et un seul filet vertical de 3 px en gres a gauche
   de l'etiquette : c'est lui qui donne sa texture a la grille.
   ========================================================================= */

.frt-tafeln {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: var(--rinne);
  list-style: none; margin: 0; padding: 0;
}
.frt-tafel { margin: 0; background: var(--boden-tief); }
.frt-feld--gesenkt .frt-tafel { background: var(--boden-hell); }
.frt-tafel--voll  { grid-column: span 6; }
.frt-tafel--breit { grid-column: span 4; }
.frt-tafel--halb  { grid-column: span 3; }
.frt-tafel--klein { grid-column: span 2; }
.frt-tafel--versatz  { transform: translateY(var(--versatz-h)); }
.frt-tafel--versatz2 { transform: translateY(calc(var(--versatz-h) * 0.5)); }
.frt-tafeln--dicht { padding-bottom: var(--versatz-h); }

.frt-tafel__rahmen {
  position: relative;
  overflow: hidden;
  border-radius: var(--kante);
  background: var(--tinte-nacht);
}
/* Le gres monte au survol ; le lien reste sur le titre. */
.frt-tafel__rahmen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(125, 44, 49, 0) 55%, rgba(125, 44, 49, 0.32));
  opacity: 0;
  transition: opacity var(--tempo);
}
.frt-tafel:hover .frt-tafel__rahmen::after,
.frt-tafel:focus-within .frt-tafel__rahmen::after { opacity: 1; }
.frt-tafel__rahmen--pano    { aspect-ratio: 21 / 9; }
.frt-tafel__rahmen--quer    { aspect-ratio: 4 / 3; }
.frt-tafel__rahmen--quadrat { aspect-ratio: 1 / 1; }
.frt-tafel__rahmen--hoch    { aspect-ratio: 3 / 4; }
.frt-tafel__blick {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.frt-tafel:hover .frt-tafel__blick { transform: scale(1.02); }

.frt-tafel__schild {
  padding: 0.75rem 0.9rem 0.95rem;
  border-left: 3px solid var(--sandstein);
}
.frt-tafel__titel { margin: 0 0 0.28rem; }
.frt-tafel__link {
  color: var(--tinte);
  text-decoration: none;
  background-image: linear-gradient(var(--sandstein), var(--sandstein));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--tempo), color var(--tempo);
}
.frt-tafel__link:hover { color: var(--sandstein); background-size: 100% 2px; }
.frt-tafel__notiz {
  margin: 0;
  color: var(--tinte-leise);
  font-size: 0.9rem;
  line-height: 1.5;
}
.frt-tafel__hinweis {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* =========================================================================
   SPUR · le registre date de l'accueil. Une ligne par entree, SANS
   vignette : date en colonne a chiffres tabulaires, rubrique en petites
   capitales, titre, une phrase. Les images du site vivent dans la
   mosaique et en tete d'article, jamais ici.
   ========================================================================= */

.frt-spur {
  list-style: none; margin: 0; padding: 0;
  border-top: 3px solid var(--sandstein);
}
.frt-tritt {
  display: grid;
  grid-template-columns: 7.6rem 1fr;
  gap: 0.2rem 1.6rem;
  padding-block: 0.72rem;
  border-bottom: var(--naht-fein);
  margin: 0;
  transition: background var(--tempo);
}
.frt-tritt:hover { background: var(--boden-hell); }
.frt-wann {
  margin: 0;
  font-size: 0.8rem;
  color: var(--tinte-leise);
  padding-top: 0.15rem;
}
.frt-tritt__marke {
  display: block;
  font-size: 0.66rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein);
  margin-top: 0.14rem;
}
.frt-tritt h3 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
}
.frt-tritt h3 a { color: var(--tinte); text-decoration: none; }
.frt-tritt h3 a:hover { color: var(--sandstein); text-decoration: underline; }
.frt-tritt p { margin: 0; color: var(--tinte-leise); font-size: 0.9rem; }

/* =========================================================================
   ARTICLES · einstieg, witterung, lauf et son rail
   ========================================================================= */

.frt-einstieg {
  padding-block: clamp(0.3rem, 1.4vw, 1rem) clamp(1.2rem, 2.8vw, 2rem);
}
.frt-einstieg h1 { max-width: 24ch; }
.frt-einstieg__vorspann {
  font-size: clamp(1.06rem, 0.99rem + 0.48vw, 1.3rem);
  line-height: 1.52;
  color: var(--tinte-leise);
  max-width: 58ch;
  margin: 0.85rem 0 0;
}
.frt-angaben {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1rem 0 0; padding: 0;
  max-width: 58ch;
  font-size: 0.8rem;
  color: var(--tinte-leise);
  border-top: var(--naht-fein);
  padding-top: 0.75rem;
}
.frt-angaben a { color: var(--tinte-leise); }
.frt-angaben a:hover { color: var(--sandstein); }

.frt-witterung { margin: 0; }
.frt-witterung__blick {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--kante);
}

/* Le lauf et sa schiene : sur les ecrans larges, un rail collant a gauche
   porte le surtitre, la date, la rubrique et le sommaire des h2. Sous
   1080 px il repasse en bloc horizontal au-dessus du texte. */
.frt-lauf {
  padding-block: clamp(1.4rem, 3.2vw, 2.4rem) clamp(1.8rem, 4.2vw, 3rem);
}
/* La mesure vit sur le CONTENEUR, jamais sur un titre : l'unite ch se
   resout avec la police de l'element qui l'emploie, et 68ch sur un h2 en
   serif de 33px vaudrait presque le double de la colonne. */
.frt-lauf__satz { max-width: var(--lauf-breite); }
.frt-lauf__satz > * + * { margin-top: 0.9em; }
.frt-lauf__satz h2 {
  margin-top: 1.7em;
  padding-bottom: 0.24rem;
  border-bottom: var(--naht-fein);
}
.frt-lauf__satz h3 { margin-top: 1.3em; }
.frt-lauf__satz ul, .frt-lauf__satz ol { padding-left: 1.35rem; }
.frt-lauf__satz li + li { margin-top: 0.42em; }
.frt-lauf__satz strong { color: var(--sandstein-tief); }
@media (prefers-color-scheme: dark) {
  .frt-lauf__satz strong { color: #e6b8b1; }
}

.frt-schiene {
  font-size: 0.78rem;
  color: var(--tinte-leise);
  border-top: 3px solid var(--sandstein);
  padding-top: 0.7rem;
  margin-bottom: 1.6rem;
}
.frt-schiene h2 {
  font-family: var(--schrift-lesetext);
  font-size: 0.68rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein);
  border: 0; padding: 0;
  margin: 0 0 0.5rem;
}
.frt-schiene ul { list-style: none; margin: 0; padding: 0; }
.frt-schiene li { padding-block: 0.22rem; border-bottom: var(--naht-fein); }
.frt-schiene li:last-child { border-bottom: 0; }
.frt-schiene a { color: var(--tinte-leise); text-decoration: none; }
.frt-schiene a:hover { color: var(--sandstein); text-decoration: underline; }
.frt-schiene__zeile { display: block; margin-top: 0.6rem; }

@media (min-width: 1081px) {
  .frt-lauf {
    display: grid;
    grid-template-columns: var(--schiene-breite) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 3.4vw, 3.4rem);
    align-items: start;
  }
  .frt-lauf > .frt-schiene {
    grid-column: 1;
    position: sticky;
    top: 1.6rem;
    margin-bottom: 0;
  }
  /* Colonne 2 imposee : sans cette ligne, une page SANS rail (la 404, le
     gabarit de publication) verrait sa colonne de lecture tomber dans la
     piste etroite du rail. */
  .frt-lauf > .frt-lauf__satz { grid-column: 2; }
  /* Les modules de donnees respirent hors de la mesure, vers la droite :
     c'est l'asymetrie du gabarit, la colonne de texte ne bouge pas. */
  .frt-lauf__satz > .frt-raster,
  .frt-lauf__satz > .frt-fund,
  .frt-lauf__satz > .frt-winkel {
    width: calc(100% + 11rem);
    max-width: none;
  }
}

/* Winkel : l'angle de piste, l'encadre qui fait ralentir. */
.frt-winkel {
  margin: 1.6em 0;
  background: var(--boden-hell);
  border-left: 5px solid var(--sandstein);
  border-radius: var(--kante);
  padding: 0.95rem 1.2rem;
  font-size: 0.96em;
}
.frt-winkel h4 {
  font-family: var(--schrift-lesetext);
  font-size: 0.75rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein);
  margin: 0 0 0.45rem;
}
.frt-winkel p, .frt-winkel ul { margin: 0; }
.frt-winkel p + p, .frt-winkel ul { margin-top: 0.45rem; }
.frt-winkel strong { color: var(--sandstein-tief); }

/* Fund : le poste de donnees, fond nuit, chiffres alignes. */
.frt-fund {
  margin: 1.6em 0;
  background: var(--tinte-nacht);
  color: #ece7ee;
  border-radius: var(--kante);
  padding: 1.05rem 1.25rem 1.15rem;
}
.frt-fund h2, .frt-fund h3, .frt-fund h4 {
  font-family: var(--schrift-lesetext);
  font-size: 0.75rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein-hell);
  margin: 0 0 0.65rem;
  border: 0; padding: 0;
}
.frt-fund p, .frt-fund ul { margin: 0; font-size: 0.94rem; color: #ece7ee; }
.frt-fund strong { color: #fff; font-variant-numeric: tabular-nums; }
.frt-fund p + p, .frt-fund ul { margin-top: 0.45rem; }

/* Raster : le tableau de mesures. L'en-tete sombre du donneur cede la
   place a un filet double sous la ligne de tete. */
.frt-raster {
  overflow-x: auto;
  margin: 1.5em 0;
}
.frt-raster table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.91em;
}
.frt-raster th, .frt-raster td {
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--naht);
  vertical-align: top;
}
.frt-raster caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.55rem;
  font-size: 0.73rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--moos);
}
.frt-raster thead th {
  font-family: var(--schrift-lesetext);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tinte);
  border-bottom: 4px double var(--sandstein);
  padding-top: 0;
}
.frt-raster tr:last-child td { border-bottom: 0; }
.frt-raster tbody tr:nth-child(even) { background: var(--boden-hell); }

/* Ansage : la citation en exergue, filet gres a gauche. */
.frt-ansage {
  margin: 1.5em 0;
  padding: 0.15rem 0 0.15rem 1.3rem;
  border-left: 5px solid var(--sandstein);
  font-family: var(--schrift-titel);
  font-size: 1.14em;
  color: var(--sandstein-tief);
}
@media (prefers-color-scheme: dark) { .frt-ansage { color: #e6b8b1; } }

/* Weiter : la piste continue. */
.frt-weiter {
  margin-top: 2.2em;
  padding-top: 1.1rem;
  border-top: 3px solid var(--sandstein);
}
.frt-weiter h2 {
  font-size: 1.16rem;
  border-bottom: 0;
  margin: 0 0 0.5rem;
  padding: 0;
}
.frt-weiter ul { list-style: none; margin: 0; padding: 0; }
.frt-weiter li { padding: 0.28rem 0; }
.frt-weiter li::before {
  content: "\203A";
  color: var(--sandstein);
  margin-right: 0.5rem;
  font-weight: 700;
}

/* =========================================================================
   ABSCHLUSS · le pied de page, la fin de piste
   ========================================================================= */

.frt-abschluss {
  margin-top: var(--atem);
  background: var(--tinte-nacht);
  color: #ece7ee;
  border-top: 4px solid var(--sandstein);
}
.frt-abschluss__reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--rinne) * 1.5);
  padding-block: clamp(1.8rem, 4.2vw, 2.9rem);
}
.frt-abschluss h2 {
  font-family: var(--schrift-lesetext);
  font-size: 0.75rem;
  letter-spacing: var(--kapitaelchen-sperrung);
  text-transform: uppercase;
  color: var(--sandstein-hell);
  margin-bottom: 0.65rem;
}
.frt-abschluss ul { list-style: none; margin: 0; padding: 0; }
.frt-abschluss li { padding-block: 0.2rem; }
.frt-abschluss a { color: #cbc3d0; text-decoration: none; transition: color var(--tempo); }
.frt-abschluss a:hover { color: var(--sandstein-hell); text-decoration: underline; }
.frt-abschluss__fuss {
  border-top: 1px solid var(--naht-nacht);
  padding-block: 1rem;
  font-size: 0.78rem;
  color: #b8b0c0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.9rem;
}
.frt-abschluss__fuss .frt-zeichen { color: var(--sandstein-hell); }

/* =========================================================================
   POINTS DE RUPTURE
   ========================================================================= */

@media (max-width: 1080px) {
  .frt-tafel--breit { grid-column: span 6; }
  .frt-tafel--halb  { grid-column: span 3; }
  .frt-tafel--klein { grid-column: span 3; }
  .frt-tafel--versatz, .frt-tafel--versatz2 { transform: none; }
  .frt-tafeln--dicht { padding-bottom: 0; }
  .frt-schiene { max-width: var(--lauf-breite); }
}

@media (max-width: 760px) {
  .frt-tafeln { grid-template-columns: repeat(2, 1fr); }
  .frt-tafel--breit, .frt-tafel--halb, .frt-tafel--klein { grid-column: span 2; }
  .frt-tritt { grid-template-columns: 1fr; gap: 0.12rem; }
  .frt-wann { padding-top: 0; }
  .frt-tritt__marke { display: inline; margin-left: 0.5rem; }
  .frt-abschluss__reihe { grid-template-columns: 1fr; }
  .frt-feld__kopf { flex-direction: column; gap: 0.3rem; }
  .frt-abgang h1 { max-width: 22ch; }
  .frt-abgang { min-height: clamp(230px, 58vw, 310px); }
  .frt-kennzahlen li { padding-inline: 0.85rem; }
}

@media (max-width: 480px) {
  .frt-leine ul { gap: 0.3rem 0.9rem; }
  .frt-platz__reihe { gap: 0.5rem; }
}

/* Courtoisie de mouvement. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .frt-tafel:hover .frt-tafel__blick { transform: none; }
}

/* Impression : le magazine sur papier. */
@media print {
  .frt-platz, .frt-abschluss, .frt-sprung, .frt-pfad, .frt-strich,
  .frt-kennzahlen, .frt-schiene { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .frt-lauf { display: block; }
  .frt-lauf__satz { max-width: none; }
  .frt-fund { background: #fff; color: #000; border: 1pt solid #000; }
  .frt-abgang { min-height: 0; }
}