/* CardRun 3 — Homepage. Farben und Schrift wie im Spiel (lib/ui/stil.dart):
   Anthrazit-Grund, Gold wie das App-Icon, die vier Kartenfarben. */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-Medium.ttf') format('truetype');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-SemiBold.ttf') format('truetype');
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --grund-oben: #343946;
  --grund-unten: #181b22;
  --panel: rgba(66, 71, 84, 0.55);
  --panel-voll: #2b2f39;
  --rand: rgba(255, 255, 255, 0.09);
  --text: #f4efe4;
  --text-leise: #b4b9c5;
  --gold-hell: #f8dc95;
  --gold: #e9b04a;
  --gold-dunkel: #a4701f;
  --rot: #ff3f31;
  --blau: #417dff;
  --gruen: #12d21b;
  --gelb: #f6d60e;
  --radius: 22px;
  --breite: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Fredoka', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--grund-unten);
  background-image:
    radial-gradient(1100px 620px at 72% -80px, rgba(233, 176, 74, 0.16), transparent 70%),
    linear-gradient(180deg, var(--grund-oben) 0, var(--grund-unten) 980px);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }

.innen {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 24px;
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(24, 27, 34, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}
.kopf .innen {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
  margin-right: auto;
}
.marke img { width: 36px; height: 36px; border-radius: 9px; }
.navi { display: flex; gap: 22px; }
.navi a, .sprache {
  color: var(--text-leise);
  text-decoration: none;
  font-size: 15.5px;
}
.navi a:hover, .sprache:hover { color: var(--text); }
.sprache {
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 4px 12px;
}

/* --- Titel im Stil der App: ◆ GOLDLINIE ◆ -------------------------------- */

.zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e8e2d6;
}
.zeile::before,
.zeile::after {
  content: '';
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.zeile::after { transform: scaleX(-1); }
.zeile span::before,
.zeile span::after {
  content: '◆';
  color: var(--gold);
  font-size: 11px;
  vertical-align: 2px;
  margin: 0 10px;
}

h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0; }

h2 {
  font-size: clamp(28px, 4.2vw, 42px);
  text-align: center;
  margin-bottom: 14px;
}
.vorspann {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
  color: var(--text-leise);
}

section { padding: 88px 0 24px; scroll-margin-top: 64px; }

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold) 55%, var(--gold-dunkel));
  color: #2b1d07;
  font: inherit;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
a.knopf:hover { color: #2b1d07; filter: brightness(1.06); }
.knopf.bald { cursor: default; }

/* --- Startbereich ------------------------------------------------------- */

.start { position: relative; padding: 64px 0 40px; overflow: hidden; }
.start .innen {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
}
.start .ueber {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 15px;
  margin: 0 0 12px;
}
.start h1 {
  font-size: clamp(54px, 9vw, 96px);
  line-height: 0.95;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold) 60%, #c8892c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
  margin-bottom: 22px;
}
.start .lead {
  font-size: clamp(18px, 2.1vw, 21px);
  max-width: 34em;
  margin: 0 0 30px;
}
.start .klein {
  margin: 16px 0 0;
  color: var(--text-leise);
  font-size: 15px;
}
.buehne {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 560px;
}
.buehne::before {
  content: '';
  position: absolute;
  inset: 4% 4% 8%;
  background: radial-gradient(closest-side, rgba(233, 176, 74, 0.32), transparent);
  filter: blur(8px);
}
.buehne .telefon { position: relative; }
.buehne .hinten {
  position: absolute;
  width: 240px;
  left: 4%;
  top: 70px;
  transform: rotate(-9deg);
  opacity: 0.9;
}
.buehne .vorne { width: 280px; margin-left: 120px; transform: rotate(4deg); }

.funkeln {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, var(--gold-hell), transparent),
    radial-gradient(2px 2px at 86% 12%, var(--gold-hell), transparent),
    radial-gradient(3px 3px at 92% 64%, var(--gold), transparent),
    radial-gradient(2px 2px at 8% 72%, var(--gold), transparent),
    radial-gradient(2px 2px at 48% 6%, var(--gold-hell), transparent),
    radial-gradient(2px 2px at 64% 94%, var(--gold-hell), transparent);
  opacity: 0.8;
}

/* --- Telefonrahmen ------------------------------------------------------ */

.telefon {
  width: 260px;
  aspect-ratio: 402 / 874;
  padding: 9px;
  border-radius: 44px;
  background: linear-gradient(145deg, #565c69, #1b1e25 60%);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.telefon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 35px;
}

/* --- Merkmale ----------------------------------------------------------- */

.raster {
  display: grid;
  gap: 18px;
}
.raster.vier { grid-template-columns: repeat(4, 1fr); }

.kachel {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kachel h3 { font-size: 21px; margin: 16px 0 8px; }
.kachel p { margin: 0; color: var(--text-leise); font-size: 16px; }

.karte-symbol {
  width: 44px;
  height: 62px;
  border-radius: 9px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(-6deg);
}
.karte-symbol.rot { background: var(--rot); }
.karte-symbol.gelb { background: var(--gelb); color: #fff; }
.karte-symbol.gruen { background: var(--gruen); }
.karte-symbol.blau { background: var(--blau); }

/* --- Einblicke (Screenshots) -------------------------------------------- */

.galerie {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 24px 34px;
  margin: 0 auto;
  max-width: calc(var(--breite) + 48px);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dunkel) transparent;
}
.galerie figure {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
  text-align: center;
}
.galerie .telefon { width: 200px; border-radius: 34px; padding: 7px; }
/* Passt alles hinein, steht die Reihe mittig — sonst wird gescrollt. */
.galerie > :first-child { margin-left: auto; }
.galerie > :last-child { margin-right: auto; }
.galerie .telefon img { border-radius: 27px; }
.galerie figcaption { margin-top: 14px; color: var(--text-leise); font-size: 15.5px; }

/* --- Gegner und Figuren ------------------------------------------------- */

.figurenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.figur {
  margin: 0;
  background:
    radial-gradient(160px 150px at 50% 30%, rgba(233, 176, 74, 0.2), transparent 70%),
    var(--panel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 14px 18px;
  text-align: center;
}
.figur img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 6%;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
.figur figcaption { margin-top: 10px; }
.figur strong { display: block; font-size: 19px; font-weight: 600; }
.figur span { display: block; color: var(--text-leise); font-size: 15px; line-height: 1.4; margin-top: 4px; }
.figurenraster.sechs { grid-template-columns: repeat(6, 1fr); }
.figurenraster.sechs .figur img { aspect-ratio: 9 / 16; object-position: 50% 0; }
.nachsatz { text-align: center; color: var(--text-leise); margin: 26px 0 0; }

/* --- Duell -------------------------------------------------------------- */

.zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.zweispaltig h2, .zweispaltig .vorspann { text-align: left; margin-left: 0; }
.zweispaltig .zeile { justify-content: flex-start; }
.zweispaltig .zeile::before { display: none; }
.zweispaltig .bild img {
  border-radius: 34px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}
.liste { list-style: none; padding: 0; margin: 0; }
.liste li {
  position: relative;
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid var(--rand);
}
.liste li:last-child { border-bottom: 0; }
.liste li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 17px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold-dunkel));
  transform: rotate(45deg);
}

.ausserdem {
  max-width: 760px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 30px;
}

/* --- Schluss und Fußzeile ----------------------------------------------- */

.schluss { text-align: center; padding: 96px 0 72px; }
.schluss img { width: 112px; height: 112px; border-radius: 26px; margin: 0 auto 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.schluss h2 { margin-bottom: 22px; }

.fuss {
  border-top: 1px solid var(--rand);
  padding: 28px 0 40px;
  color: var(--text-leise);
  font-size: 14.5px;
}
.fuss .innen { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-right: auto; }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--text); }
.fuss .marken { flex-basis: 100%; font-size: 13px; opacity: 0.75; }

/* --- Rechtstexte und Support -------------------------------------------- */

.text {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.text h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 8px; }
.text h2 { font-size: 23px; text-align: left; margin: 36px 0 10px; }
.text h3 { font-size: 18px; margin: 22px 0 6px; }
.text p, .text li { color: #dcd8cf; }
.text .stand { color: var(--text-leise); margin-top: 0; }
.text details {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: 16px;
  padding: 14px 18px;
  margin: 12px 0;
}
.text summary { cursor: pointer; font-weight: 600; color: var(--text); }
.text details p { margin: 10px 0 2px; }
.platzhalter {
  background: var(--gelb);
  color: #1b1b1b;
  border-radius: 5px;
  padding: 0 5px;
}
.kasten {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}

/* --- Schmal --------------------------------------------------------------- */

@media (max-width: 980px) {
  .raster.vier { grid-template-columns: repeat(2, 1fr); }
  .figurenraster.sechs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .navi { display: none; }
  .start { padding-top: 40px; }
  .start .innen { grid-template-columns: 1fr; text-align: center; }
  .start .lead { margin-left: auto; margin-right: auto; }
  .buehne { min-height: 0; margin-top: 10px; }
  .buehne .hinten { display: none; }
  .buehne .vorne { width: 250px; margin-left: 0; transform: none; }
  .zweispaltig { grid-template-columns: 1fr; gap: 28px; }
  .zweispaltig h2, .zweispaltig .vorspann { text-align: center; margin-left: auto; }
  .zweispaltig .zeile { justify-content: center; }
  .zweispaltig .zeile::before { display: block; }
  .zweispaltig .bild { max-width: 420px; margin: 0 auto; }
  section { padding-top: 64px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .innen { padding: 0 16px; }
  .raster.vier { grid-template-columns: 1fr; }
  .figurenraster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .figurenraster.sechs { grid-template-columns: repeat(2, 1fr); }
  .figur { padding: 10px 10px 14px; }
  .figur strong { font-size: 17px; }
  .zeile::before, .zeile::after { width: 28px; }
  .galerie { padding-left: 16px; padding-right: 16px; gap: 18px; }
  .galerie .telefon { width: 180px; }
  .ausserdem { padding: 8px 18px; }
  .text { padding: 40px 16px 32px; }
}