/* App "Kudesi Gamedesign" (TikTok-Veröffentlichung): App-Icon, Name und Rechtslinks
   oben auf gamedesign.html, gamedesign-terms.html und gamedesign-privacy.html.
   TikTok verlangt dasselbe App-Icon auf der Website, als Favicon und oben auf
   Terms und Privacy sowie gut sichtbare Links zu beiden (Prüfung 10/2026).
   Nutzt ausschließlich die Tokens aus neonpulse.css. */

.app-id {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 var(--s-5, 20px);
}
.app-id__icon {
  flex: none;
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  border: 1px solid var(--line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
a.app-id { text-decoration: none; }
.app-id__text { min-width: 0; }
.app-id__name,
.app-id__kind { display: block; }
.app-id__name {
  font: var(--display-l);
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
}
.app-id__kind {
  font: var(--mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 8px 0 0;
}

/* Rechtslinks direkt unter dem Seitenkopf: groß genug zum Tippen, auf einen Blick sichtbar. */
.app-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.app-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font: 600 15px/1.2 var(--font-display);
  color: var(--neon-cyan);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  text-decoration: none;
}
.app-legal a:hover,
.app-legal a:focus-visible { border-color: var(--neon-cyan); }
.app-legal a[aria-current="page"] { color: var(--fg-1); border-color: var(--fg-3); }

/* Terms und Privacy: Kopf mit App-Icon über dem Dokumenttitel. */
.legal-page .app-id { margin-bottom: 28px; }
.legal-page .app-id__icon { width: 72px; height: 72px; border-radius: 18px; }
.legal-page .app-id__name { font-size: clamp(26px, 4vw, 36px); }
.legal-page .app-legal { margin: 0 0 36px; }
.legal-page a.app-id:hover,
.legal-page .app-legal a:hover { text-decoration: none; }
.legal-page .app-legal a { color: var(--neon-cyan); }
.legal-page .app-legal a[aria-current="page"] { color: var(--fg-1); }
.legal-page ul { padding-left: 22px; margin: 0 0 var(--s-3, 12px); }

/* Fußzeile der Startseite: App mit Icon und Rechtslinks. */
.footer__app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 14px;
  font: var(--body-sm);
  color: var(--fg-3);
}
.footer__app img { width: 24px; height: 24px; border-radius: 6px; display: block; }
.footer__app-name { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.footer__app a:hover { color: var(--neon-cyan); }

@media (max-width: 560px) {
  .app-id { gap: 14px; }
  .app-id__icon { width: 64px; height: 64px; border-radius: 16px; }
  .legal-page .app-id__icon { width: 56px; height: 56px; border-radius: 14px; }
}