/* Bikeball Tools — Startbildschirm /app (app.html, app-start.js).
   Baut auf styles.css auf (Farben, Kopfzeile, Sprachmenü). Klassen
   beginnen mit as-. Als installierte App trägt <html> die Klasse
   als-app: kein Installationsabschnitt, Platz für die Home-Leiste. */

.as-marke { color: var(--accent); }

.as {
  max-width: 760px; margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3rem) var(--pad) 2.5rem;
}
.as-kopf h1 {
  margin: .2rem 0 .5rem;
  font-size: clamp(2.1rem, 1.6rem + 2.5vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em;
}
.as-kopf .section-index { margin: 0; }
.as-lede { margin: 0; color: var(--muted); max-width: 34em; }
.as-offline {
  margin: 1rem 0 0; padding: .6rem .85rem;
  border: 1px solid rgba(255, 195, 0, .35); border-radius: 12px;
  background: rgba(255, 195, 0, .08); color: var(--accent-2); font-size: .92rem;
}

.as-gruppe { margin-top: 2.25rem; }
.as-gruppe-titel {
  margin: 0 0 .75rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* Kacheln */
.as-kacheln { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); margin-top: .75rem; }
.as-gruppe-titel + .as-kacheln { margin-top: 0; }
@media (min-width: 560px) {
  .as-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Drei nebeneinander: Symbol über dem Text, sonst bricht der Text dauernd um */
@media (min-width: 720px) {
  .as-kacheln-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-kacheln-drei .as-kachel { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem 1.1rem; }
  .as-kacheln-drei .as-pfeil { display: none; }
}

.as-kachel {
  display: flex; align-items: center; gap: .9rem;
  min-height: 72px; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--fg); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.as-kachel:hover { border-color: rgba(255, 255, 255, .22); background: #15151d; }
.as-kachel:active { transform: scale(.985); }
.as-kachel:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.as-ikon {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 75, 31, .12); color: var(--accent);
}
.as-ikon svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.as-text { display: grid; min-width: 0; line-height: 1.3; }
.as-text b { font-size: 1.05rem; letter-spacing: -.01em; }
.as-text small { color: var(--muted); font-size: .88rem; }
.as-pfeil {
  flex: none; margin-left: auto; width: 14px; height: 14px;
  fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Matchday: groß, mit Schnellwegen darunter */
.as-haupt {
  border: 1px solid rgba(255, 75, 31, .35); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 75, 31, .14), rgba(255, 75, 31, .03) 60%), var(--bg-soft);
  overflow: hidden;
}
.as-kachel-gross { border: 0; border-radius: 0; background: none; min-height: 88px; padding: 1.1rem 1.1rem 1rem; }
.as-kachel-gross:hover { background: rgba(255, 255, 255, .03); }
.as-kachel-gross .as-ikon { width: 52px; height: 52px; background: var(--accent); color: #fff; }
.as-kachel-gross .as-ikon svg { width: 28px; height: 28px; }
.as-kachel-gross .as-text b { font-size: 1.3rem; }
.as-schnell {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
}
.as-schnell a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 48px; padding: .5rem; font-size: .92rem; font-weight: 600;
  color: var(--fg); text-decoration: none; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.as-schnell a + a { border-left: 1px solid var(--line-soft); }
.as-schnell a:hover { background: rgba(255, 255, 255, .04); }
.as-schnell a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.as-schnell i {
  width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; flex: none;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); animation: as-puls 2s ease-out infinite;
}
@keyframes as-puls { to { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); } }
@media (prefers-reduced-motion: reduce) { .as-schnell i { animation: none; } }

/* Installieren — nur im Browser */
.as-install {
  margin-top: 2.5rem; padding: 1.25rem;
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px dashed rgba(255, 255, 255, .18); border-radius: var(--radius);
}
.as-install-ikon { flex: none; width: 56px; height: 56px; border-radius: 13px; }
.as-install-text { min-width: 0; }
.as-install h2 { margin: 0 0 .35rem; font-size: 1.15rem; letter-spacing: -.01em; }
.as-install p, .as-install ol { margin: .5rem 0 0; color: var(--muted); font-size: .95rem; }
.as-install b { color: var(--fg); font-weight: 600; }
.as-schritte { padding-left: 1.25rem; }
.as-schritte li + li { margin-top: .25rem; }
.as-fertig { color: var(--accent-2) !important; }
.as-knopf {
  appearance: none; border: 0; cursor: pointer;
  min-height: 44px; padding: .65rem 1.3rem; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700;
}
.as-knopf:hover { filter: brightness(1.08); }
.as-knopf:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.als-app .as-install { display: none; }

.as-fuss {
  max-width: 760px; margin-inline: auto;
  padding: 0 var(--pad) calc(2rem + env(safe-area-inset-bottom, 0px));
  color: var(--muted); font-size: .88rem;
}
.as-fuss a { color: inherit; }

@media (max-width: 420px) {
  .as-install { flex-direction: column; }
}