/* ============================================================
   handball-app.tourneyflow.de – Uebersetzung auf die Grundschicht
   ============================================================

   Laedt NACH tf-base.css und nach styles.css. Diese Datei enthaelt keine
   eigenen Farben oder Schatten – sie sagt nur, welcher Baustein aus
   tf-base.css auf welchen Klassennamen dieses Auftritts gehoert.

   Dieser Auftritt ist auf Bootstrap gebaut und hat ein eigenes Vokabular:
   .hero-section statt .hero, .navbar statt .topbar, .site-foot statt .foot,
   .feature-card / .news-card / .pricing-card statt .product. Deshalb eine
   eigene Datei und nicht dieselbe wie auf tourneyflow.de.
   ============================================================ */

/* ---------- Kopfbereich ---------- */

/* Denselben dunklen Kopf wie auf tourneyflow.de, ohne das Markup
   anzufassen: Die vier Ebenen aus tf-base.css werden hier auf
   .hero-section gelegt.

   WARUM :not(.bg-light) ueberall dransteht:
   Zwei Seiten (anleitung.html, gallery.html) tragen "hero-section bg-light"
   und wollen bewusst einen HELLEN Kopf. Ohne die Einschraenkung stritten
   sich meine eigenen Regeln: .bg-light gewann beim Hintergrund, meine
   Schriftfarbe machte den Text trotzdem weiss – gemessene 1,06:1, also
   weisse Ueberschrift auf hellgrauem Grund. Die Seiten waren unlesbar.
   Wer einen hellen Kopf will, behaelt ihn jetzt samt dunkler Schrift. */
.hero-section:not(.bg-light){
  position:relative;isolation:isolate;overflow:clip;
  background:var(--tf-dunkel);color:#e7ecf7;
  border-bottom:0;
}
.hero-section:not(.bg-light)::before{
  content:'';position:absolute;inset:-30% -10%;z-index:-2;
  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;
}
.hero-section:not(.bg-light)::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(80% 74% at 46% 40%, #000 25%, transparent 84%);
  mask-image:radial-gradient(80% 74% at 46% 40%, #000 25%, transparent 84%);
}
.hero-section:not(.bg-light) .container{position:relative;z-index:1}

/* Die Auszeichnung war Text in der Markenfarbe – auf hellem Grund gut, auf
   dem neuen dunklen Grund nur noch 3:1. Jetzt Glasplakette. */
.hero-section:not(.bg-light) .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 !important;
}
/* Der Punkt steht fuer "live" – bei einer Anzeigetafel ist das die Aussage
   der Seite. Das einzige, was hier dauerhaft pulsiert. */
.hero-section:not(.bg-light) .hero-eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
  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-section:not(.bg-light) .hero-title{color:#fff;letter-spacing:-.038em;line-height:1.05}
/* .text-primary ist Bootstrap und faerbt die zweite Zeile im Markenton –
   auf Dunkel zu dunkel. Hier der Verlauf wie auf der Startseite. */
.hero-section:not(.bg-light) .hero-title .text-primary{
  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 !important;
  animation:tf-drehen 18s linear infinite;
}
@keyframes tf-drehen{ to{--tf-winkel:360deg} }

.hero-section:not(.bg-light) .hero-subtitle{color:#bcc6de !important;max-width:46ch;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* Die beiden Seiten mit hellem Kopf behalten ihre dunkle Schrift – der
   Untertitel war dort aber mit #86868B auf hellgrauem Grund nur 3,41:1.
   Das stand schon vor diesem Umbau so. */
.hero-section.bg-light .hero-subtitle{color:#6E6E73}
.hero-section:not(.bg-light) .btn-outline-primary{
  background:var(--tf-glas-dunkel);color:#dfe6f5;
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero-section:not(.bg-light) .btn-outline-primary:hover{
  background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.34);
}
.hero-actions .btn{transition:transform .28s var(--tf-sanft),box-shadow .28s var(--tf-sanft)}
.hero-actions .btn:hover{transform:translateY(-3px)}

/* Die schwebenden Karten ueber dem Produktbild: dieselbe Glasflaeche wie
   die Karten im Kopfbereich von tourneyflow.de. */
/* Die Schriftfarbe MUSS hier gesetzt werden.
 *
 * .hero-section faerbt jetzt allen Text hell (#e7ecf7), weil der Grund
 * dunkel ist. Die schwebenden Karten haben aber einen eigenen, hellen
 * Grund – dort ergab die geerbte Farbe weiss auf weiss, gemessene 1,08:1.
 * Die Karten waren schlicht unsichtbar. */
.floating-elements .floating-card{
  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%);
  color:#1a2340;
}
.floating-elements .floating-card i,
.floating-elements .floating-card .bi{color:var(--brand,#4f46e5)}
.image-stack .main-image{box-shadow:0 30px 70px rgba(0,0,0,.5)}

/* Fokus im dunklen Bereich sichtbar machen. */
.hero-section:not(.bg-light) :focus-visible{
  outline:3px solid #fff;outline-offset:3px;
  box-shadow:0 0 0 6px rgba(10,15,30,.65);border-radius:8px;
}

/* ---------- Kopfzeile ---------- */

/* Die Menuepunkte waren auf dem Desktop 41 Pixel hoch. Die vorhandene Regel
   dafuer stand in einer @media(max-width:991.98px) und griff nur am Handy –
   auf dem Desktop blieb Bootstraps Vorgabe von 8 Pixel Polsterung stehen. */
.navbar-nav .nav-link{
  display:flex;align-items:center;min-height:44px;
}
.navbar.fixed-top{
  background:rgba(255,255,255,.78) !important;
  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;
}

/* ---------- Karten ---------- */

/* Alle Kartenarten dieses Auftritts auf dieselbe Tiefenleiter stellen.
   Vorher hatte jede ihren eigenen Schatten – .news-card einen, .feature-card
   einen anderen –, und dadurch lagen sie optisch auf verschiedenen Ebenen,
   obwohl sie gleichrangig sind. */
.feature-card,.news-card,.pricing-card,.testimonial-card,.event-card,.content-card{
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  box-shadow:var(--tf-t2), var(--tf-kante);
  transition:transform .5s var(--tf-sanft), box-shadow .5s var(--tf-sanft),
             border-color .35s ease;
}
@media(hover:hover){
  .feature-card:hover,.news-card:hover,.pricing-card:hover,
  .testimonial-card:hover,.event-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--tf-t4), var(--tf-kante);
  }
}
/* Bei Tastaturbedienung dasselbe zeigen – sonst sieht nur die Maus, was
   gerade ausgewaehlt ist. */
.feature-card:focus-within,.news-card:focus-within,.pricing-card:focus-within,
.event-card:focus-within{
  transform:translateY(-6px);box-shadow:var(--tf-t4), var(--tf-kante);
}
.feature-icon{box-shadow:0 8px 20px rgba(79,70,229,.28), var(--tf-kante-dunkel)}

.gallery-item{
  box-shadow:var(--tf-t1), var(--tf-kante);
  transition:transform .45s var(--tf-sanft), box-shadow .45s var(--tf-sanft);
}
@media(hover:hover){
  .gallery-item:hover{transform:translateY(-5px);box-shadow:var(--tf-t3)}
}

/* ---------- Abschnitte ---------- */
.section-title{letter-spacing:-.032em;text-wrap:balance}
.section-subtitle{text-wrap:pretty;max-width:62ch;margin-inline:auto}
/* Der weiche Abschnitt bekommt eine Andeutung von Licht von oben statt
   einer flachen Fuellung. */
.section-padding.bg-light,.bg-light{
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(79,70,229,.06), transparent 70%),
    var(--bg-soft, #f6f8fb) !important;
}

/* ---------- Lesbarkeit ---------- */

/* Fliesstext der Rechtstexte war zu blass: #86868B auf Weiss ergibt 3,62:1
   und liegt damit unter der Anforderung von 4,5:1. Das stand schon vor
   diesem Umbau so – gefunden erst, als ueber diese Seiten gemessen wurde.
   #6E6E73 kommt auf 5,07:1 und bleibt optisch zurueckhaltend.
   Die Seiten setzen ihre Farbe in einem eingebetteten <style>, der NACH
   dieser Datei kommt; deshalb hier ein Selektor mit mehr Gewicht statt
   !important. */
.content-card .privacy-section p,
.content-card .privacy-section ul,
.content-card .privacy-section li,
.content-card .imprint-section p,
.content-card .imprint-section ul,
.content-card .imprint-section li,
.content-card .manual-section p,
.content-card .manual-section li{color:#6E6E73}

/* Rechtstexte und Anleitung liefen ueber die volle Spaltenbreite. Ab etwa
   80 Zeichen findet das Auge den naechsten Zeilenanfang nicht mehr sicher. */
.privacy-section p,.privacy-section li,
.imprint-section p,.imprint-section li,
.manual-section p,.manual-section li,
.content-card p,.content-card li{max-width:62ch}
.content-card td,.content-card th{max-width:none}

/* Tabellen mit eigenem Schiebebereich statt waagerechtem Seitenscrollen. */
.content-card table,.privacy-section table,.manual-section table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}

/* Das Inhaltsverzeichnis der Anleitung: gemessene 17 bis 41 Pixel hohe
   Eintraege. Es ist die Navigation dieser Seite und gehoert damit zu den
   Zielen, die man auf dem Handy sicher treffen muss. */
.content-card ul li > a,
.manual-section ul li > a{
  display:flex;align-items:center;min-height:44px;
}
/* Aufzaehlungen im Fliesstext sind davon ausgenommen – dort steht der Link
   mitten im Satz und wuerde die Zeile zerreissen. */
.content-card p a,.manual-section p a,.privacy-section p a{
  display:inline;min-height:0;
}

/* ---------- Erscheinen beim Scrollen ---------- */
/* Diese Seiten benutzen AOS (data-aos) und laden dafuer eine Bibliothek.
   Wo der Browser scroll-driven animations kennt, uebernimmt die Grundschicht
   – das ist ruhiger und braucht kein JavaScript. AOS bleibt als Rueckfall. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .feature-card,.news-card,.pricing-card,.testimonial-card,
    .event-card,.gallery-item,.section-title{
      animation:tf-auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%;
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-section:not(.bg-light)::before,
  .hero-eyebrow::before,
  .hero-title .text-primary{animation:none !important}
  .hero-title .text-primary{
    background:linear-gradient(100deg,#a5b4fc,#c4b5fd 45%,#7dd3fc);
    -webkit-background-clip:text;background-clip:text;
  }
  .feature-card,.news-card,.pricing-card,.testimonial-card,
  .event-card,.gallery-item,.section-title{
    opacity:1 !important;transform:none !important;animation:none !important;
  }
}

/* ---------- Bedienbarkeit: Sprungmarke ---------- */
.tf-sprung{
  position:absolute;
  top:-9999px;
  left:-9999px;
  display:inline-block;
  padding:0.5rem 1rem;
  min-height:44px;
  background:var(--brand, #4f46e5);
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  z-index:9999;
}
.tf-sprung:focus,
.tf-sprung:focus-visible{
  top:10px;
  left:10px;
  outline:none;
}

/* ---------- Schrift der Code-Elemente ---------- */
/* Die Dateinamen und Menuepfade der Anleitung standen in Bootstraps Vorgabe
   #d63384 auf #e9ecef: 3,80:1, zu wenig fuer kleine Schrift (Soll 4,5:1).
   #B02A63 ergibt 5,27:1 und bleibt auf Weiss ueber 6:1. */
code{color:#B02A63}

/* ---------- Querformat auf dem Handy (hoechstens 500 px hoch) ----------
   Die Navigation ist dann niedriger und nicht fest: sie scrollt mit der Seite,
   damit mehr vom Inhalt sichtbar bleibt. Hochformat und Desktop sind nicht betroffen. */
@media (orientation: landscape) and (max-height: 500px){
  .navbar.fixed-top{position:relative !important;top:auto !important;padding:.25rem 0 !important}
  .navbar-brand img{height:30px !important;width:auto !important}
  .navbar-toggler{padding:.2rem .45rem !important}
}