/* ============================================================
   TourneyFlow – Gestaltungsschicht
   ============================================================

   Liegt UEBER style.css und laesst dessen Aufbau unangetastet: Raster,
   Klassennamen und Markup bleiben, was sich aendert ist die Anmutung.
   Dadurch laesst sich die Datei spaeter unveraendert in die beiden anderen
   Auftritte kopieren – dort heissen die Bausteine genauso.

   Drei Regeln, an die sich alles hier haelt:

   1. Kein WebGL, kein Framework, kein Bild fuer Effekte. Tiefe entsteht
      durch Perspektive, gestaffelte Schatten und Lichtkanten – das laedt
      sofort und laeuft auch auf einem sechs Jahre alten Vereinshandy.
   2. Bewegung nur beim ERSTEN Erscheinen eines Abschnitts, nie in
      Dauerschleife im Blickfeld. Was sich staendig bewegt, nervt beim
      dritten Besuch und frisst Akku.
   3. Nichts hiervon darf Bedienbarkeit kosten. Am Ende der Datei stehen
      die Ausnahmen fuer "Bewegung reduzieren" und fuer Geraete ohne
      Unterstuetzung; beide fallen auf eine ruhige, vollstaendige Fassung
      zurueck.
   ============================================================ */

/* @property macht Farbwinkel und Laengen animierbar. Ohne die Typangabe
   springt ein Verlauf von 0 auf 360, statt zu drehen. */
@property --tf-winkel {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}

:root{
  /* Tiefenstufen. Statt eines Schattens je Karte eine Leiter, damit
     "weiter vorn" im ganzen Auftritt dasselbe bedeutet. */
  --tf-t1:0 1px 2px rgba(9,14,30,.05), 0 2px 6px rgba(9,14,30,.06);
  --tf-t2:0 2px 4px rgba(9,14,30,.05), 0 8px 20px rgba(9,14,30,.07),
          0 16px 40px rgba(9,14,30,.05);
  --tf-t3:0 4px 8px rgba(9,14,30,.06), 0 16px 36px rgba(9,14,30,.09),
          0 40px 80px rgba(9,14,30,.10);
  --tf-t4:0 8px 16px rgba(9,14,30,.08), 0 30px 60px rgba(9,14,30,.12),
          0 70px 140px rgba(9,14,30,.14);
  /* Lichtkante: die schmale helle Linie an der Oberkante einer Flaeche.
     Sie tut mehr fuer den Eindruck von Material als jeder Schatten. */
  --tf-kante:inset 0 1px 0 rgba(255,255,255,.92);
  --tf-kante-dunkel:inset 0 1px 0 rgba(255,255,255,.10);

  --tf-glas:rgba(255,255,255,.72);
  --tf-glas-dunkel:rgba(255,255,255,.055);

  /* Bewegungskurven. Das lange Ausschwingen laesst Bewegung teuer wirken;
     ein linearer Verlauf wirkt billig, egal wie aufwendig der Rest ist. */
  --tf-weich:cubic-bezier(.22,.61,.36,1);
  --tf-sanft:cubic-bezier(.16,1,.3,1);

  /* Rauschen gegen Streifenbildung. Grosse, weiche Verlaeufe zeigen auf
     8-Bit-Bildschirmen sonst sichtbare Baender. Erzeugt im Browser, kein
     Bild, keine Anfrage. */
  --tf-rauschen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ============================================================
   1  Kopfbereich
   ============================================================
   Dunkel, weil der Rest der Seite hell ist: Der Wechsel gibt der
   Startseite einen Anfang. Aufgebaut aus vier Ebenen – Grundton,
   Farbschleier, Raster, Rauschen –, die einzeln unauffaellig sind und
   erst zusammen nach Material aussehen. */
.hero{
  position:relative;
  background:var(--bg-dark);
  color:#e7ecf7;
  border-bottom:0;
  padding:calc(var(--sp-6) + 1rem) 0 var(--sp-6);
  isolation:isolate;
  overflow:clip;
}

/* Farbschleier: drei weiche Lichter, die langsam wandern. Sehr langsam –
   die Bewegung soll man bemerken, wenn man hinsieht, nicht sonst. */
.hero::before{
  content:'';position:absolute;inset:-30% -10%;z-index:-2;
  /* Die Deckkraft ist nachgerechnet, nicht nach Gefuehl gewaehlt.
     Mit den urspruenglichen .55/.45/.34 fiel der Fliesstext dort, wo sich
     alle drei Lichter ueberlagern, auf 3,2:1 – unter die Grenze von 4,5:1.
     Der Schleier liegt hinter der Tafel, deren Text hat also einen eigenen
     deckenden Grund; betroffen war allein der Absatz im Kopfbereich. */
  background:
    radial-gradient(38% 46% at 22% 28%, rgba(99,102,241,.34), transparent 68%),
    radial-gradient(34% 40% at 78% 22%, rgba(124,58,237,.28), transparent 70%),
    radial-gradient(46% 52% at 62% 82%, rgba(37,99,235,.22), transparent 72%);
  filter:blur(14px);
  animation:tf-schleier 34s var(--tf-weich) infinite alternate;
}
@keyframes tf-schleier{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-2.5%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(2%,-1%,0) scale(1.02)}
}

/* Raster und Rauschen in einer Ebene. Das Raster wird zum Rand hin
   ausgeblendet, sonst sieht man, wo es aufhoert. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    var(--tf-rauschen);
  background-size:64px 64px, 64px 64px, 140px 140px;
  -webkit-mask-image:radial-gradient(78% 68% at 50% 34%, #000 25%, transparent 82%);
  mask-image:radial-gradient(78% 68% at 50% 34%, #000 25%, transparent 82%);
  opacity:.9;
}

.hero .wrap{position:relative;z-index:1}

/* Auszeichnung ueber der Ueberschrift – als Glasplakette statt als Text.
 *
 * Gilt fuer BEIDE dunklen Koepfe. Auf der Ratgeberseite behielt sie zuerst
 * ihr var(--brand) aus style.css und kam damit auf 3,04:1 gegen den dunklen
 * Grund – zu wenig. Ein Markenton, der auf Weiss gut sitzt, sitzt auf
 * Dunkel eben nicht automatisch mit. */
.hero .eyebrow,
.rg-hero .eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .9rem;border-radius:999px;
  background:var(--tf-glas-dunkel);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:var(--tf-kante-dunkel);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#c9d2ea;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  font-size:var(--fs-xs);
}
/* Der leuchtende Punkt davor: das einzige Element, das dauerhaft
   pulsiert. Er ist klein und steht fuer "live" – bei einer
   Turniersoftware ist das die Aussage der Seite. */
/* Der leuchtende Punkt nur auf der Startseite: Dort steht er fuer "live",
   und das ist die Aussage der Seite. Im Ratgeber waere er eine Behauptung
   ohne Inhalt. */
.hero .eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.65);
  animation:tf-puls 2.6s ease-out infinite;
}
@keyframes tf-puls{
  0%  {box-shadow:0 0 0 0 rgba(74,222,128,.6)}
  70% {box-shadow:0 0 0 9px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

.hero h1{
  color:#fff;font-size:var(--fs-hero);line-height:1.02;
  letter-spacing:-.042em;margin:.7em 0 .45em;
  text-wrap:balance;
}
/* Der Farbverlauf in der zweiten Zeile dreht sich langsam. Ein feststehender
   Verlauf sieht auf grossen Ueberschriften schnell nach Vorlage aus. */
.hero h1 .grad{
  background:linear-gradient(var(--tf-winkel), #a5b4fc 0%, #c4b5fd 38%, #7dd3fc 72%, #a5b4fc 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:tf-drehen 18s linear infinite;
}
@keyframes tf-drehen{ to{--tf-winkel:360deg} }

/* Heller als der erste Entwurf (#a7b3cd): So bleibt Luft nach unten, auch
   wenn der Absatz genau auf einer hellen Stelle des Schleiers steht. */
.hero .lead{
  color:#bcc6de;max-width:44ch;margin-inline:auto;
  font-size:var(--fs-lg);line-height:1.6;text-wrap:pretty;
}
.hero .lead strong{color:#dfe6f5;font-weight:700}

.hero-cta{margin-top:var(--sp-3)}
/* Der Hauptknopf bekommt einen Lichtschein, der auf Dunkel erst wirkt. */
.hero-cta .btn{
  box-shadow:0 8px 22px rgba(79,70,229,.42), var(--tf-kante-dunkel);
  transition:transform .28s var(--tf-sanft), box-shadow .28s var(--tf-sanft);
}
.hero-cta .btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(79,70,229,.52), var(--tf-kante-dunkel);
}
.hero-cta .btn-ghost{
  background:var(--tf-glas-dunkel);color:#dfe6f5;
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .28s var(--tf-sanft), border-color .28s, background .28s;
}
.hero-cta .btn-ghost:hover{
  transform:translateY(-3px);color:#fff;
  border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.1);
}

/* ============================================================
   2  Anzeigetafel im Kopfbereich
   ============================================================
   Das Produkt selbst als Schaustueck – gebaut aus Text und Rahmen, kein
   Bild. Ein Bildschirmfoto waere schaerfer, aber es altert mit jeder
   Programmversion, laedt langsamer und laesst sich nicht uebersetzen. */
.tf-buehne{
  margin-top:var(--sp-5);
  perspective:1400px;
  perspective-origin:50% 22%;
}
.tf-tafel{
  position:relative;max-width:760px;margin:0 auto;
  transform:rotateX(11deg) rotateZ(-.6deg) translateZ(0);
  transform-style:preserve-3d;
  border-radius:18px;
  background:linear-gradient(168deg, #17203a 0%, #101832 48%, #0b1122 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 2px 0 rgba(255,255,255,.07) inset,
    0 40px 80px rgba(0,0,0,.55),
    0 90px 140px rgba(0,0,0,.4);
  padding:1.15rem 1.35rem 1.25rem;
  transition:transform .9s var(--tf-sanft);
}
.tf-tafel-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.75rem;margin-bottom:.95rem;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  color:#8593b4;font-weight:700;
}
.tf-live{
  display:inline-flex;align-items:center;gap:.4rem;
  color:#fca5a5;
}
.tf-live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#ef4444;
  animation:tf-puls-rot 1.8s ease-out infinite;
}
@keyframes tf-puls-rot{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
  70%{box-shadow:0 0 0 7px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}
.tf-tafel-stand{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;
}
.tf-mann{min-width:0}
.tf-mann span{
  display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:#7b89ab;font-weight:700;margin-bottom:.25rem;
}
/* Vereinsnamen sind lang und stehen in schmalen Spalten. break-word zerlegte
   "TV Musterstadt" mitten im Wort zu "TV Musterst / adt" – auf einer Tafel,
   die Lesbarkeit verkaufen soll, ausgerechnet. Deshalb nur an sinnvollen
   Stellen trennen (hyphens:auto greift ueber lang="de") und als letzte
   Rettung umbrechen, statt als erste. */
.tf-mann strong{
  display:block;font-size:clamp(.95rem,.6rem + 1.1vw,1.35rem);font-weight:800;
  color:#e9eefb;letter-spacing:-.02em;line-height:1.2;
  hyphens:auto;overflow-wrap:normal;word-break:normal;
}
.tf-mann.heim strong{color:#93c5fd}
.tf-mann.gast{text-align:right}
.tf-mann.gast strong{color:#fca5a5}
.tf-punkte{
  font-size:clamp(2.6rem,1.6rem + 4.4vw,5rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.55rem;
  text-shadow:0 0 40px rgba(148,163,255,.35);
}
.tf-punkte i{font-style:normal;color:#5c6b96;font-size:.5em;transform:translateY(-.15em)}
.tf-uhr{
  text-align:center;margin-top:.5rem;
  font-size:var(--fs-lg);font-weight:700;color:#cbd5f5;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
/* Laufband – bewusst OHNE Laufen.
 *
 * Der erste Entwurf liess den Text endlos durchlaufen. Das sieht auf einem
 * Bildschirmfoto gut aus und faellt in der Sache durch: WCAG 2.2.2 verlangt
 * fuer Inhalt, der sich laenger als fuenf Sekunden von allein bewegt, eine
 * Moeglichkeit zum Anhalten. Ein Band mit 22 Sekunden Umlauf und ohne Knopf
 * hat die nicht – und ausgerechnet auf der Seite, die Barrierefreiheit
 * verkauft, waere das eine seltsame Visitenkarte.
 *
 * Der Text steht deshalb still und laeuft rechts weich aus. Dass hier etwas
 * lebt, sagen ohnehin die beiden Punkte oben; die sind klein, tragen keine
 * Information und fallen nicht unter das Kriterium. */
.tf-band{
  margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.09);
  font-size:var(--fs-sm);color:#8593b4;
  white-space:nowrap;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
}

/* Zwei kleine Karten, die vor der Tafel schweben. Sie machen aus einem
   flachen Rechteck eine Szene mit Vorder- und Hintergrund. */
.tf-karte{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem .95rem;border-radius:13px;
  /* Deutlich deckender als reines Glas: Ueber dem dunklen Kopfbereich wurde
     aus rgba(255,255,255,.72) ein mattes Grau. Die Karten sollen aber wie
     etwas wirken, das VOR der Tafel schwebt – dafuer brauchen sie Weiss. */
  background:rgba(252,253,255,.94);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--tf-t4), var(--tf-kante);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  font-size:var(--fs-sm);font-weight:700;color:#1a2340;white-space:nowrap;
}
.tf-karte b{color:var(--brand);font-weight:800}
/* Weit genug nach aussen, damit sie neben der abgerundeten Ecke der Tafel
   stehen und nicht halb darauf. */
.tf-karte.eins{top:-1.4rem;left:-2.6rem;transform:translateZ(70px) rotate(-2.5deg)}
.tf-karte.zwei{bottom:-1.6rem;right:-2.2rem;transform:translateZ(95px) rotate(2deg)}
/* Auf mittleren Breiten ist links und rechts kein Platz fuer den Ueberstand. */
@media(max-width:1000px) and (min-width:721px){
  .tf-karte.eins{left:-.6rem}
  .tf-karte.zwei{right:-.4rem}
}
/* Auf dem Handy gibt es kein Davor und Dahinter: Die Karten ruecken aus der
   Szene heraus unter die Tafel. Die Klassen .eins/.zwei muessen dabei
   einzeln genannt werden – sie sind spezifischer als .tf-karte und haetten
   ihre Drehung sonst behalten (genau das ist im ersten Durchgang passiert:
   zwei schraege, uebereinanderliegende Karten mitten auf der Tafel). */
@media(max-width:720px){
  .tf-karte,
  .tf-karte.eins,
  .tf-karte.zwei{
    position:static;transform:none;
    top:auto;left:auto;right:auto;bottom:auto;
    font-size:var(--fs-xs);padding:.5rem .8rem;
    /* Weisses Glas wirkt nur DAVOR. Hier stehen die Karten IN der dunklen
       Tafel – dort wurden aus ihnen graue Pillen. Also dunkles Glas. */
    background:var(--tf-glas-dunkel);
    border-color:rgba(255,255,255,.14);
    box-shadow:var(--tf-kante-dunkel);
    color:#dfe6f5;
  }
  .tf-karte b{color:#a5b4fc}
  .tf-karten{
    display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
    margin-top:1rem;
  }
  .tf-tafel{transform:none;padding:1rem}
  .tf-buehne{perspective:none}
}
/* Auf breiten Schirmen ist .tf-karten nur eine Huelle – die Karten stehen
   darin absolut und schweben vor der Tafel. */
@media(min-width:721px){
  .tf-karten{display:contents}
}

/* ============================================================
   3  Karten und Flaechen im hellen Teil
   ============================================================ */
.section-head h2{letter-spacing:-.035em;text-wrap:balance}
.section-head p{text-wrap:pretty}

/* Produktkarten: leichte Perspektive, die sich beim Zeigen aufrichtet.
   Der Lichtstreif oben ist eine eigene Ebene, damit er den Rand nicht
   mitfaerbt. */
.products{perspective:1600px}
.product{
  position:relative;isolation:isolate;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  box-shadow:var(--tf-t2), var(--tf-kante);
  transform:translateZ(0);
  transition:transform .5s var(--tf-sanft), box-shadow .5s var(--tf-sanft),
             border-color .35s ease;
}
.product::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  padding:1px;
  background:linear-gradient(150deg,
    rgba(99,102,241,.55), rgba(124,58,237,.22) 38%, transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s ease;
}
@media(hover:hover){
  .product:hover{
    transform:translateY(-6px) rotateX(1.6deg) scale(1.007);
    box-shadow:var(--tf-t4), var(--tf-kante);
    border-color:transparent;
  }
  .product:hover::before{opacity:1}
}
/* Bei Tastaturbedienung dasselbe zeigen – sonst sieht nur die Maus den
   Zustand, und genau darauf verlassen sich Bedienhinweise oft. */
.product:focus-within{
  transform:translateY(-6px);
  box-shadow:var(--tf-t4), var(--tf-kante);
}

.product-icon{
  box-shadow:0 8px 20px rgba(79,70,229,.3), var(--tf-kante-dunkel);
}

.pill{
  box-shadow:var(--tf-kante);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* Sportarten-Karten: gleiche Sprache, kleinere Dosis. */
.sportart{
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  box-shadow:var(--tf-t1), var(--tf-kante);
  transition:transform .4s var(--tf-sanft), box-shadow .4s var(--tf-sanft);
}
@media(hover:hover){
  .sportart:hover{transform:translateY(-4px);box-shadow:var(--tf-t3), var(--tf-kante)}
}

/* Der weiche Abschnitt bekommt eine Andeutung von Licht von oben,
   statt einer flachen Fuellung. */
.bg-soft{
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(99,102,241,.07), transparent 70%),
    var(--bg-soft);
}

/* ============================================================
   4  Kopfzeile
   ============================================================ */
.topbar{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 rgba(16,24,40,.06);
  border-bottom:0;
}
.topnav a:not(.btn){position:relative}
/* Unterstreichung, die aus der Mitte waechst. Kleines Detail, aber es ist
   der Unterschied zwischen "Link" und "gestaltetem Link". */
.topnav a:not(.btn)::after{
  content:'';position:absolute;left:50%;right:50%;bottom:6px;height:2px;
  border-radius:2px;background:var(--brand-grad);
  transition:left .3s var(--tf-sanft), right .3s var(--tf-sanft);
}
.topnav a:not(.btn):hover::after{left:.55rem;right:.55rem}

/* Sportarten-Erklärung unter der Überschrift. */
.sportarten-erklaerung{
  font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2);
}

/* Separate Zeile für "Deine Sportart fehlt?" Karte, da sie breiter und unterschiedlich
   strukturiert ist als die Sportarten. Sie sitzt unter dem 7er-Raster. */
.sportart-mehr-container{
  display:grid;grid-template-columns:1fr;max-width:320px;margin-inline:auto;margin-top:var(--sp-4);
}

/* ============================================================
   5  Erscheinen beim Scrollen
   ============================================================
   Ueber scroll-driven animations – ohne JavaScript. Wo der Browser das
   nicht kennt, passiert schlicht nichts und alles steht sofort da; das
   ist der Grund, warum die Startwerte NICHT im Grundzustand stehen. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .product, .sportart, .section-head, .tf-buehne{
      animation:tf-auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%;
    }
    @keyframes tf-auftauchen{
      from{opacity:0;transform:translateY(26px) scale(.985)}
      to  {opacity:1;transform:none}
    }
    /* Die Tafel im Kopfbereich richtet sich beim Scrollen auf, statt
       einzublenden – sie steht schon im Bild, wenn die Seite laedt. */
    .tf-tafel{
      animation:tf-aufrichten linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 38%;
    }
    @keyframes tf-aufrichten{
      from{transform:rotateX(15deg) rotateZ(-.8deg) scale(.97)}
      to  {transform:rotateX(2deg)  rotateZ(0)      scale(1)}
    }
  }
}

/* ============================================================
   6  Ausnahmen
   ============================================================
   "Bewegung reduzieren" ist keine Geschmacksfrage: Fuer Menschen mit
   vestibulaerer Stoerung loesen wandernde Flaechen Schwindel und
   Uebelkeit aus. Alles Bewegte kommt hier zum Stehen – und zwar so, dass
   es im Endzustand stehen bleibt, nicht im Anfangszustand. */
@media (prefers-reduced-motion: reduce){
  .hero::before,
  .hero .eyebrow::before,
  .hero h1 .grad,
  .tf-live::before,
  .tf-band span,
  .tf-tafel{
    animation:none !important;
  }
  .hero h1 .grad{
    /* Ohne Drehung braucht der Verlauf einen festen Winkel, sonst bliebe
       die Zeile beim Anfangswert 0deg stehen und wirkte flach. */
    background:linear-gradient(100deg,#a5b4fc,#c4b5fd 45%,#7dd3fc);
    -webkit-background-clip:text;background-clip:text;
  }
  .tf-band span{padding-left:0}
  .product,.sportart,.section-head,.tf-buehne{opacity:1;transform:none}
  .product:hover,.sportart:hover{transform:none}
  .faq-frage::before{
    transition:none;
  }
}

/* ------------------------------------------------------------
   Schmale Schirme: die Tafel wird umgebaut, nicht nur verkleinert.

   Nebeneinander bleiben fuer die Namen keine 90 Pixel uebrig – da hilft
   keine Schriftgroesse mehr. Deshalb ruecken Heim und Gast in eine eigene
   Zeile und der Spielstand darunter in die volle Breite. Er bleibt damit
   das Groesste auf der Tafel, so wie in der Halle auch.
   ------------------------------------------------------------ */
@media(max-width:620px){
  .tf-tafel-stand{
    grid-template-columns:1fr 1fr;
    grid-template-areas:'heim gast' 'punkte punkte';
    row-gap:.9rem;
  }
  .tf-mann.heim{grid-area:heim}
  .tf-mann.gast{grid-area:gast}
  .tf-punkte{grid-area:punkte;justify-content:center}
  .tf-mann strong{font-size:1.02rem}
}

/* Sehr schmale Geraete: Perspektive kostet dort nur Platz. */
@media(max-width:520px){
  .hero{padding-top:var(--sp-5)}
  .tf-punkte{font-size:clamp(2.4rem,1.4rem + 7vw,3.4rem)}
}

/* ============================================================
   7  Bedienbarkeit
   ============================================================
   Nachgemessen von 320 bis 1440 Pixel Breite. Was hier steht, sind keine
   Vermutungen, sondern die Stellen, an denen die Messung durchgefallen ist.
   ============================================================ */

/* Die 44px-Regel traf bisher nur .topnav a.btn. Knoepfe im Seiteninhalt
   blieben bei 41 Pixeln – "Frag einfach nach" in der Sportarten-Liste war
   der Fall, der es gezeigt hat. */
.btn,.btn-ghost{min-height:44px}

/* Der Markenschriftzug in Kopf- UND Fusszeile war 35 Pixel hoch. Er ist auf
   jeder Seite der Weg zurueck zum Anfang – der groesste Dauergast unter den
   Links und ausgerechnet zu klein. */
.brand{min-height:44px}

/* Die Kontaktangaben: "help@tourneyflow.de" stand als eigener Link auf
   eigener Zeile und war 17 Pixel hoch. Das ist kein Link im Fliesstext,
   sondern das Ziel des ganzen Abschnitts. */
.contact-info a{
  display:inline-flex;align-items:center;
  min-height:44px;
}

/* Einwilligungshaken. Gemessene 13x13 Pixel – das kleinste Bedienelement
   der Seite, und zugleich das, ohne das niemand das Formular abschicken
   kann. Der Haken bekommt eine sichtbare Groesse, und weil das Etikett den
   Haken umschliesst, ist die ganze Zeile die Trefferflaeche. */
.check-line{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.55rem 0;cursor:pointer;
}
.check-line input[type=checkbox]{
  width:1.4rem;height:1.4rem;flex-shrink:0;margin:0;
  accent-color:var(--brand);
  /* Auf die Schriftlinie der ersten Textzeile ausrichten, sonst schwebt der
     Haken ueber dem Satz. */
  margin-top:.12em;
}
.check-line span{flex:1}

/* Lesbarkeit: Zwei Absaetze liefen bei 768 Pixeln auf 103 Zeichen je Zeile.
   Ab etwa 80 Zeichen findet das Auge den Zeilenanfang nicht mehr zuverlaessig
   wieder. Die Karten selbst duerfen breit bleiben – nur der Text nicht. */
.contact-card p,
.contact-card li,
#kontakt form p{max-width:62ch}

/* Die schwebenden Karten ragten bei 768 Pixeln zehn Pixel aus dem Bild und
   wurden dort abgeschnitten. Zwischen 721 und 1000 Pixeln stehen sie
   deshalb innerhalb der Tafel statt daneben. */
@media(max-width:1000px) and (min-width:721px){
  .tf-karte.eins{left:.6rem;top:-1rem}
  .tf-karte.zwei{right:.6rem;bottom:-1rem;max-width:calc(100% - 1.2rem)}
  .tf-karte{white-space:normal}
}

/* Sichtbarer Fokus auch auf dunklem Grund. Der Umriss in var(--brand) geht
   im dunklen Kopfbereich fast unter; dort braucht es Weiss mit dunklem
   Saum, damit er auf jedem Untergrund steht. */
.hero :focus-visible,
.tf-tafel :focus-visible,
.rg-hero :focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(10,15,30,.65);
  border-radius:8px;
}

/* ============================================================
   8  Rechtstexte (Impressum, Datenschutz)
   ============================================================
   Diese Seiten waren blanker Fliesstext auf weissem Grund, ueber die volle
   Breite. Rechtstexte werden selten am Stueck gelesen, sondern durchsucht –
   dafuer braucht es eine Spalte in Lesebreite und Ueberschriften, die man
   beim Scrollen wiederfindet. */
.legal{
  max-width:74ch;
  padding-block:var(--sp-5);
}
.legal h1{
  font-size:var(--fs-2xl);letter-spacing:-.035em;
  margin-bottom:.3em;text-wrap:balance;
}
/* Eine ruhige Kopfzeile statt eines zweiten bunten Bereichs: Diese Seiten
   sollen sachlich wirken, nicht beworben. */
.legal h1+p{color:var(--muted);font-size:var(--fs-lg);margin-bottom:var(--sp-4)}
.legal h2{
  font-size:var(--fs-xl);margin-top:2.2em;padding-top:1.2em;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:1.4em}
.legal h3{font-size:var(--fs-lg);margin-top:1.8em;color:var(--ink-2)}
/* Dieselbe Grenze am Text wie im Ratgeber – 74ch am Umschlag ergaben
   nachgemessen 95 Zeichen je Zeile. Rechtstexte werden ueberflogen; zu
   lange Zeilen machen genau das schwer. */
.legal p,.legal li{color:var(--ink-2);line-height:1.8;max-width:62ch}
.legal address,.legal td,.legal th{max-width:none}
.legal a{text-decoration:underline;text-underline-offset:2px}
/* Adress- und Kontaktbloecke absetzen, damit man sie beim Ueberfliegen
   findet, ohne den Absatz zu lesen. */
.legal address,
.legal blockquote{
  font-style:normal;background:var(--bg-soft);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);padding:var(--sp-3);margin:var(--sp-3) 0;
  box-shadow:var(--tf-kante);
}
/* Sehr lange Zeichenketten (URLs, Registernummern, IBAN) sprengen sonst
   auf dem Handy die Spalte. */
.legal a,.legal code,.legal td{overflow-wrap:anywhere}

/* Die Kontaktadresse im Impressum steht in einem eigenen Absatz
   ("E-Mail: help@tourneyflow.de") und war 17 Pixel hoch. Das ist kein Link
   im Fliesstext, sondern der Grund, warum jemand das Impressum aufschlaegt –
   die Inline-Ausnahme von 2.5.5 greift hier nicht. */
.legal a[href^="mailto:"],
.legal a[href^="tel:"]{
  display:inline-flex;align-items:center;min-height:44px;
}

/* ============================================================
   9  Ratgeber
   ============================================================ */

/* Uebersichtsseite: Kopfbereich in derselben Sprache wie die Startseite,
   nur ruhiger – hier gibt es nichts zu verkaufen, sondern zu lesen. */
.rg-hero{
  position:relative;isolation:isolate;overflow:clip;
  background:var(--bg-dark);color:#e7ecf7;
  padding:var(--sp-6) 0 var(--sp-5);
}
.rg-hero::before{
  content:'';position:absolute;inset:-30% -10%;z-index:-2;
  background:
    radial-gradient(40% 50% at 26% 30%, rgba(99,102,241,.30), transparent 70%),
    radial-gradient(36% 44% at 76% 26%, rgba(124,58,237,.24), transparent 72%);
  filter:blur(14px);
}
.rg-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    var(--tf-rauschen);
  background-size:64px 64px, 64px 64px, 140px 140px;
  -webkit-mask-image:radial-gradient(76% 70% at 50% 36%, #000 25%, transparent 82%);
  mask-image:radial-gradient(76% 70% at 50% 36%, #000 25%, transparent 82%);
}
.rg-hero .wrap{position:relative;z-index:1;text-align:center}
.rg-hero h1{color:#fff;letter-spacing:-.035em;text-wrap:balance}
.rg-hero .lead{color:#bcc6de;max-width:52ch;margin-inline:auto;text-wrap:pretty}

.rg-card{
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--tf-t1), var(--tf-kante);
  transition:transform .4s var(--tf-sanft), box-shadow .4s var(--tf-sanft),
             border-color .3s ease;
  display:flex;flex-direction:column;
}
@media(hover:hover){
  .rg-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--tf-t3), var(--tf-kante);
    border-color:var(--line-2);
  }
}
.rg-card:focus-within{transform:translateY(-5px);box-shadow:var(--tf-t3), var(--tf-kante)}
/* Die Ueberschrift IST der Weg in den Artikel – gemessene 23 Pixel Hoehe
   waren fuer das wichtigste Ziel der Uebersichtsseite zu wenig. Als Block
   ueber die ganze Kartenbreite trifft man sie auch daneben. */
.rg-card h2{margin-bottom:.35em}
.rg-card h2 a{
  display:block;min-height:44px;
  padding:.35rem 0;
  text-wrap:balance;
}
.rg-card > p:not(.rg-meta){flex-grow:1}
.rg-card .rg-meta{margin-top:auto}

/* Artikelseite. Die Lesespalte ist das ganze Design – alles andere ordnet
   sich unter. */
.rg-wrap{max-width:74ch}
.rg h1{letter-spacing:-.035em;text-wrap:balance}
.rg-lead{font-size:var(--fs-lg);color:var(--ink-2);text-wrap:pretty;max-width:56ch}

/* Die Grenze gehoert an den TEXT, nicht an den Umschlag.
 *
 * max-width am .rg-wrap allein reichte nicht: Die Einheit ch bemisst sich an
 * der Breite der Ziffer Null, und die ist schmaler als ein Durchschnitts-
 * zeichen. 74ch am Umschlag ergaben nachgemessen 85 Zeichen je Zeile – ab
 * etwa 80 findet das Auge den naechsten Zeilenanfang nicht mehr sicher.
 * Ueberschriften und Tabellen duerfen die volle Spalte behalten. */
.rg p,.rg li{line-height:1.8;max-width:62ch}
.rg-toc li,.rg-tbl td,.rg-tbl th,.rg-cta p,.rg-more li{max-width:none}
.rg h2{
  margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line);
  letter-spacing:-.025em;text-wrap:balance;
}

/* Brotkrumen: als Pfad lesbar machen, nicht als drei Links nebeneinander. */
.rg-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;
  font-size:var(--fs-sm);color:var(--muted);
}
.rg-crumbs a,
.rg-crumbs span{
  display:inline-flex;align-items:center;min-height:44px;
  padding-inline:.45rem;border-radius:6px;
}
.rg-crumbs a:hover{background:var(--brand-soft)}

/* Inhaltsverzeichnis: die Karte, die am haeufigsten benutzt wird. */
.rg-toc{
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) - .4rem);
  box-shadow:var(--tf-kante);
}
.rg-toc strong{
  display:block;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:.6rem;
}
.rg-toc li{margin:0}
.rg-toc a{
  display:flex;align-items:center;min-height:44px;
  padding:.2rem .5rem;border-radius:7px;
}
.rg-toc a:hover{background:#fff;box-shadow:var(--tf-t1)}

.rg-tip{
  background:linear-gradient(180deg, var(--green-bg), #fff);
  border:1px solid #bbf7d0;border-left:3px solid var(--green);
  border-radius:var(--radius-sm);box-shadow:var(--tf-kante);
}
.rg-formel{overflow-wrap:anywhere}

/* Tabellen sind der haeufigste Grund fuer waagerechtes Scrollen der ganzen
   Seite. Sie bekommen ihren EIGENEN Schiebebereich, damit die Seite still
   steht – und einen Schatten am Rand, damit man sieht, dass da noch etwas
   kommt. */
.rg-tbl{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;border-radius:var(--radius-sm);
  background:
    linear-gradient(90deg,#fff 30%, rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(16,24,40,.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(16,24,40,.14), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}
.rg-tbl th,.rg-tbl td{white-space:nowrap}

/* Abschluss-Karte: der einzige Ort im Ratgeber, der werben darf. */
.rg-cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg-dark);color:#c3cbdd;
  border:0;border-radius:var(--radius-lg);
  padding:var(--sp-4);
  box-shadow:var(--tf-t3);
}
.rg-cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(99,102,241,.38), transparent 70%),
    radial-gradient(50% 80% at 92% 100%, rgba(124,58,237,.30), transparent 72%);
}
.rg-cta h2{color:#fff;border-top:0;margin-top:0;padding-top:0;text-wrap:balance}
.rg-cta strong{color:#dfe6f5}
.rg-cta-note{color:#8b96ad;font-size:var(--fs-sm)}
.rg-cta-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin:var(--sp-3) 0}
.rg-cta .btn-ghost{
  background:var(--tf-glas-dunkel);color:#dfe6f5;border-color:rgba(255,255,255,.18);
}
.rg-cta .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

.rg-more a{
  display:inline-flex;align-items:center;min-height:44px;
}

/* ============================================================
   10  Galerie: Hallensituationen
   ============================================================ */
.hallen-bilder{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-5);
}

.hallenbilder-item{
  margin:0;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);
  box-shadow:var(--tf-t2), var(--tf-kante);
  transition:transform .4s var(--tf-sanft), box-shadow .4s var(--tf-sanft);
}

@media(hover:hover){
  .hallenbilder-item:hover{transform:translateY(-4px);box-shadow:var(--tf-t3), var(--tf-kante)}
}

.hallenbilder-image{
  overflow:hidden;aspect-ratio:16 / 9;flex-shrink:0;
}

.hallenbilder-item img{
  display:block;width:100%;height:100%;object-fit:cover;
}

.hallenbilder-item figcaption{
  padding:var(--sp-3);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);
  background:#fff;
}

/* Auf sehr schmalen Geraeten bleibt ein Bild pro Zeile, nicht zwei. */
@media(max-width:800px){
  .hallen-bilder{grid-template-columns:1fr}
}

/* ============================================================
   11  Ablauf: Schritte zum Turniertag
   ============================================================ */
.ablauf-schritte{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-5);
}

.ablauf-schritt{
  padding:var(--sp-4);background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--tf-t1), var(--tf-kante);
}

.ablauf-schritt-nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:800;font-size:var(--fs-sm);
  margin-bottom:var(--sp-2);
}

.ablauf-schritt h3{
  font-size:var(--fs-lg);margin:var(--sp-2) 0 var(--sp-1);letter-spacing:-.02em;
  min-height:2.3em;
}
@media(max-width:720px){
  .ablauf-schritt h3{min-height:auto}
}

.ablauf-schritt p{
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin:0;
}

/* ============================================================
   12  Ratgeber-Verweise
   ============================================================ */
.ratgeber-karten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-5);align-items:stretch;
}

.ratgeber-karte{
  padding:var(--sp-4);background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--tf-t1), var(--tf-kante);
  transition:transform .4s var(--tf-sanft), box-shadow .4s var(--tf-sanft);
  display:flex;flex-direction:column;height:100%;
}

@media(hover:hover){
  .ratgeber-karte:hover{transform:translateY(-4px);box-shadow:var(--tf-t3), var(--tf-kante)}
}

.ratgeber-karte a{
  display:block;color:inherit;text-decoration:none;
}

.ratgeber-karte h3{
  font-size:var(--fs-lg);margin:0 0 var(--sp-2);letter-spacing:-.02em;color:var(--brand);
}

.ratgeber-karte a > p{
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin:0;flex-grow:1;
}

.ratgeber-zeit{
  font-size:var(--fs-xs);color:var(--muted);margin-top:auto;padding-top:var(--sp-3);
}

/* ============================================================
   13  FAQ: Fragen und Antworten
   ============================================================ */
.faq-liste{
  max-width:70ch;margin-inline:auto;margin-top:var(--sp-5);
}

.faq-item{
  padding:.9rem 0;border-bottom:1px solid var(--line);margin:0;
}

.faq-item:last-child{
  border-bottom:0;
}

.faq-frage{
  font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0;cursor:pointer;
  padding:0;display:flex;align-items:center;list-style:none;min-height:44px;
}

.faq-frage::before{
  content:'▶';
  display:inline-block;
  margin-right:var(--sp-2);
  color:var(--brand);font-weight:800;
  transform:rotate(0deg);
  transition:transform 0.35s var(--tf-weich);
  flex-shrink:0;
}

details[open] .faq-frage::before{
  transform:rotate(90deg);
}

.faq-item:hover .faq-frage{
  color:var(--brand);
}

.faq-antwort{
  font-size:var(--fs-sm);line-height:1.8;color:var(--ink-2);
  margin:var(--sp-3) 0;padding-left:var(--sp-4);
}


/* ---------- Querformat auf dem Handy (hoechstens 500 px hoch) ----------
   Die Kopfzeile ist dann niedriger und nicht fest: sie scrollt mit der Seite.
   Hochformat und Desktop sind nicht betroffen. */
@media (orientation: landscape) and (max-height: 500px){
  .topbar{position:static !important}
  .topbar .wrap{padding-block:.35rem !important}
}
/* Ab 821 px (volle Navigation statt Menuknopf): Die Links bleiben in einer Zeile, damit die Kopfzeile
   nicht zweizeilig wird. Der Knopf "Software laden" behaelt seine 44 px Trefferflaeche. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 821px){
  .topnav{flex-wrap:nowrap !important;gap:.7rem !important}
  .topnav a{white-space:nowrap;font-size:.82rem !important}
  .topbar .brand-logo{width:30px !important;height:30px !important}
}