/*
 * Korrekturen am Design-Export.
 *
 * Bewusst eine eigene Datei: tools/build.py erzeugt index.html neu aus
 * design/iScore-Landing.dc.html: alles, was direkt dort stuende, waere beim
 * naechsten Import weg. Diese Datei wird nach dem Inline-<style> geladen und
 * gewinnt daher.
 *
 * Das Design enthaelt keine einzige Media Query, es skaliert ueber clamp().
 * Fuer Schriftgroessen traegt das, fuer die Navigation nicht.
 */

/* ------------------------------------------------------ Geräteformat ---
 * Das Seitenverhältnis aller Telefon-Rahmen — Hero, Galerie und die drei
 * unten. Im Design hatte jeder Bereich sein eigenes: der Hero war mit 0.643
 * zu breit, die Galerie mit 0.520 zu schmal, und die unteren wurden vom
 * Flex-Container auf 0.157 gestreckt.
 *
 * Hier steht es genau einmal. Wenn die Screenshots ein anderes Format
 * bekommen, nur diesen Wert ändern.
 *
 * Aktuell auf das native Format des iPhone 17 Pro Max gesetzt: 1320x2868 =
 * 0.4602. Damit werden die Screenshots vollständig gezeigt. Auf 9:16 (0.5625)
 * gestellt, würde object-fit:cover oben und unten je rund 9 Prozent
 * wegschneiden — bei den Screens mit Kopfzeile trifft das genau die
 * Statusleiste und die Tab-Bar.
 */
:root {
  --phone-ar: 1320 / 2868;
}

/* Rahmen und Bilder halten das Format, statt sich vom Container strecken zu
   lassen. !important, weil die Maße im Export als inline-style stehen. */
[data-phone-screen],
[data-gcard] img,
[data-fan] img {
  aspect-ratio: var(--phone-ar) !important;
  height: auto !important;
  object-fit: cover;
  object-position: top;
}

/* Der Flex-Container unten streckt seine Kinder sonst auf volle Zeilenhöhe —
   genau das hat die unteren Telefone auf 0.157 gezogen. */
[data-fan] > * {
  align-self: flex-end !important;
  flex: none;
}

/* Gerätrahmen der drei unteren Telefone. Derselbe Verlauf wie beim
   Hero-Telefon, damit die Kante als Metall gelesen wird und nicht als
   Strich. Der Wrapper trägt Rahmen und Schatten, das Bild liegt mit etwas
   kleinerem Radius darin — sonst blitzt an den Ecken der Hintergrund durch. */
.fan-phone {
  position: relative;
  background: linear-gradient(155deg, #39414F 0%, #0C0F14 38%, #12161D 62%, #3A424E 100%);
}

/* ---------------------------------------------------------- Navigation ---
 * Unter ~760px reicht der Platz nicht fuer fuenf Menuepunkte: "Smart Search"
 * bricht zweizeilig um, "Get the app" dreizeilig, und die Leiste waechst von
 * 66px auf 106px und schiebt sich ueber den Inhalt. Auf einem One-Pager sind
 * die Sprungmarken verzichtbar — Logo und CTA reichen.
 */
@media (max-width: 760px) {
  [data-nav] > div > a:not([href*="apps.apple"]):not([href="#download"]) {
    display: none;
  }
  [data-nav] a[href="#download"] {
    white-space: nowrap;
  }
}

/* ------------------------------------------------------- Store-Buttons ---
 * Apple- und Google-Play-Logo stecken als Inline-SVG im Markup, keine
 * externen Dateien. Das Apple-Zeichen nimmt currentColor an und passt sich
 * damit der Buttonfarbe an; das Play-Dreieck behält seine vier Markenfarben,
 * weshalb der Button darunter hell sein muss — auf dem Lime würde es matschen.
 */
.store-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;          /* feste Spur, sonst schiebt das schmalere Apple-Zeichen
                           den Text anders ein als das breitere Play-Dreieck */
  margin-right: 2px;
}
.store-logo svg,
.store-logo img { display: block }

/* Beide Buttons gleich breit.
 * Ohne das ist Google Play rund 11px breiter, weil "Google Play" laenger setzt
 * als "App Store" und das Play-Dreieck breiter baut als das Apple-Zeichen.
 * grid-auto-columns:1fr in einem inhaltsbreiten Raster gibt beiden Spalten die
 * Breite der groesseren — das haelt auch, wenn die Beschriftung uebersetzt wird.
 */
.store-row {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: center;
  /* width:max-content laesst das Raster auf Inhaltsbreite schrumpfen (sonst
     fuellt 1fr die volle Containerbreite und zieht die Buttons auseinander),
     min-width:max-content an den Buttons verhindert, dass 1fr sie dabei unter
     ihre Textbreite zusammenstaucht. Beides zusammen ergibt zwei Spalten in
     der Breite der groesseren — auch nach einer Uebersetzung. */
  width: max-content;
  margin-inline: auto;
}
.store-row > a { min-width: max-content }
.store-row > a { justify-content: center }

/* Unter ~560px ist nebeneinander zu eng — dann untereinander, wie zuvor. */
@media (max-width: 560px) {
  .store-row {
    grid-auto-flow: row;
    justify-items: center;
  }
  .store-row > a { width: min(280px, 100%) }
}

/* Der Play-Button trug vorher Glas-Optik und war dadurch kaum als Schaltfläche
   zu erkennen. Jetzt gefüllt wie der App-Store-Button, nur in Off-White statt
   Lime — beide wirken gleich wertig, bleiben aber klar unterscheidbar. */
a[href*="play.google"] {
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* --------------------------------------------- Abdeckungs-Popups (SEO) ---
 * Zwei <dialog> mit allen Liga-, Vereins- und Nationalteam-Namen. Der Inhalt
 * steht im Markup und wird von tools/build-coverage-html.py erzeugt; nur so
 * bekommt ihn eine Suchmaschine überhaupt zu sehen.
 */
.cov-trigger {
  margin-top: 16px;
  padding: 8px 14px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(212, 245, 66, .08);
  border: 1px solid rgba(212, 245, 66, .28);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.cov-trigger:hover {
  background: rgba(212, 245, 66, .16);
  border-color: rgba(212, 245, 66, .5);
}

.cov-dialog {
  width: min(860px, 92vw);
  max-height: min(78vh, 760px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: #0E1116;
  color: #F4F2ED;
  overflow: hidden;
}
.cov-dialog::backdrop {
  background: rgba(6, 8, 12, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cov-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: covIn .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes covIn {
  from { opacity: 0; transform: translateY(14px) scale(.98) }
  to   { opacity: 1; transform: none }
}

.cov-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px clamp(18px, 3vw, 30px) 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.cov-head h3 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em }
.cov-head p  { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(244, 242, 237, .5) }
.cov-x {
  margin-left: auto; flex: none;
  width: 34px; height: 34px;
  font-size: 22px; line-height: 1;
  color: rgba(244, 242, 237, .6);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  cursor: pointer;
}
.cov-x:hover { color: #F4F2ED; background: rgba(255, 255, 255, .11) }

.cov-search { display: block; padding: 14px clamp(18px, 3vw, 30px) }
.cov-search input {
  width: 100%;
  padding: 11px 15px;
  font-family: inherit; font-size: 14.5px;
  color: #F4F2ED;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
}
.cov-search input:focus { outline: none; border-color: rgba(212, 245, 66, .45) }
.cov-search input::placeholder { color: rgba(244, 242, 237, .32) }

.cov-body {
  padding: 4px clamp(18px, 3vw, 30px) 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cov-group { margin-top: 20px }
.cov-group h4 {
  margin: 0 0 10px;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244, 242, 237, .42);
}
.cov-n { color: rgba(212, 245, 66, .55) }
.cov-group ul {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 16px;
}
.cov-group li { font-size: 14px; color: rgba(244, 242, 237, .82) }
.cov-sub {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgba(244, 242, 237, .38);
}
.cov-empty { margin: 26px 0; font-size: 14px; color: rgba(244, 242, 237, .45) }

.cov-foot {
  margin: 0;
  padding: 13px clamp(18px, 3vw, 30px);
  font-family: 'Space Mono', monospace;
  font-size: 10.5px; letter-spacing: .1em;
  color: rgba(244, 242, 237, .34);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* Seite hinter dem offenen Popup nicht mitscrollen lassen */
body.cov-locked { overflow: hidden }

/* --------------------------------------------------------------- Fokus ---
 * Der Export setzt keine Fokus-Stile. Ohne die ist die Seite per Tastatur
 * nicht bedienbar, was besonders die Store-Buttons trifft.
 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #D4F542;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------- Bewegungsarmut ---
 * Ergaenzend zu site.js: die reinen CSS-Animationen (Marquee, Kenburns,
 * Pulsieren) laufen sonst weiter, auch wenn das System Ruhe anfordert.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}