/* Gemeinsame Gestaltung der Textseiten von Titi & Bina: Pixel Run.
   Richtung "Pixel-Nacht": harte Kanten, 4px-Versatzschatten statt Verlauf,
   Gold als einziger Akzent. Markenfarben kommen aus aso-tokens.css.
   Alle Klassen sind mit .aso- praefixiert, damit die Datei auch auf der
   Spielseite geladen werden kann, ohne dem Spiel ins Layout zu greifen. */

:root{
  --aso-page:   #150826;
  --aso-panel:  #221038;
  --aso-line:   #3a2059;
  --aso-text:   #ECE7F5;
  --aso-muted:  #C3B6DC;
}

/* ---------- Seitenrahmen: nur fuer die reinen Textseiten ---------- */
body.aso-page{
  margin:0;
  background:var(--aso-page);
  color:var(--aso-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.62;
  font-size:17px;
  -webkit-text-size-adjust:100%;
}
body.aso-page a{color:var(--brand-2)}
body.aso-page a:hover{color:#fff}

.aso-wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* Lange Woerter wie "Endlosläufer-Bestenliste" duerfen nie ueberlaufen. */
.aso-wrap h1,.aso-wrap h2,.aso-wrap h3,.aso-wrap p,.aso-wrap li,.aso-wrap td,.aso-wrap th{
  overflow-wrap:break-word;
  hyphens:auto;
}

/* ---------- Kopf ---------- */
.aso-top{
  border-bottom:4px solid var(--brand-2);
  background:var(--brand);
  padding:14px 0;
}
.aso-top .aso-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.aso-top img{display:block;image-rendering:pixelated}
body.aso-page .aso-top a{color:var(--on-brand);text-decoration:none;font-weight:700;letter-spacing:.02em}
.aso-top .aso-nav{margin-left:auto;font-size:15px;font-weight:600}
.aso-top .aso-nav a{color:var(--brand-2)}

.aso-hero{padding:34px 0 8px}
.aso-hero h1{
  font-size:clamp(27px,6.2vw,40px);
  line-height:1.18;
  margin:0 0 12px;
  color:var(--brand-2);
  letter-spacing:.01em;
}
.aso-lead{font-size:19px;margin:0 0 20px;color:var(--aso-text)}

/* ---------- Knoepfe ---------- */
.aso-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin:20px 0 6px;
}
body.aso-page a.aso-play,
.aso-play{
  display:inline-block;
  background:var(--brand-2);
  color:var(--brand-ink);
  font-weight:800;font-size:17px;
  text-decoration:none;
  padding:14px 22px;
  border:3px solid var(--brand-ink);
  box-shadow:5px 5px 0 var(--brand);
}
body.aso-page a.aso-play:hover,
.aso-play:hover{color:var(--brand-ink);transform:translate(1px,1px);box-shadow:4px 4px 0 var(--brand)}
.aso-play:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--brand)}
.aso-hint{font-size:14px;color:var(--aso-muted);margin:8px 0 0}

/* ---------- Bausteine ---------- */
.aso-section{padding:30px 0 6px}
.aso-section h2{
  font-size:clamp(21px,4.4vw,26px);
  margin:0 0 6px;color:var(--brand-2);
}
.aso-section h3{font-size:18px;margin:20px 0 4px;color:#fff}
.aso-section p,.aso-section li{color:var(--aso-text)}
.aso-section ul{padding-left:20px;margin:8px 0}
.aso-section li{margin:5px 0}
.aso-rule{border:0;border-top:4px solid var(--aso-line);margin:34px 0 0}

.aso-cards{
  display:grid;gap:14px;margin:16px 0 4px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.aso-card{
  background:var(--aso-panel);
  border:2px solid var(--aso-line);
  border-left:6px solid var(--brand-2);
  padding:16px 18px;
}
.aso-card h3{margin:0 0 4px;font-size:17px;color:var(--brand-2)}
.aso-card p{margin:0;font-size:16px;color:var(--aso-muted)}

.aso-note{
  background:var(--aso-panel);
  border:2px dashed var(--brand-soft);
  padding:14px 18px;margin:18px 0;
}
.aso-note p{margin:4px 0;font-size:16px}

/* ---------- Bildstreifen ---------- */
.aso-shots{
  display:grid;gap:12px;margin:18px 0 4px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.aso-shots figure{margin:0}
.aso-shots img{
  display:block;width:100%;height:auto;
  border:2px solid var(--aso-line);
  image-rendering:pixelated;
  background:var(--brand);
}
.aso-shots figcaption{font-size:14px;color:var(--aso-muted);margin-top:6px}

/* ---------- Tabelle ---------- */
.aso-scroll{overflow-x:auto;margin:16px 0}
.aso-table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
.aso-table th,.aso-table td{
  border:2px solid var(--aso-line);
  padding:10px 12px;text-align:left;vertical-align:top;
}
.aso-table th{background:var(--brand);color:var(--on-brand)}
.aso-table td{background:var(--aso-panel);color:var(--aso-text)}
.aso-table caption{caption-side:top;text-align:left;font-size:14px;color:var(--aso-muted);padding-bottom:8px}

/* ---------- FAQ ---------- */
.aso-faq h3{font-size:17px;margin:20px 0 2px;color:#fff}
.aso-faq p{margin:2px 0 0;color:var(--aso-muted)}

/* ---------- Querverweise und Fuss ---------- */
.aso-more{margin:10px 0 0;padding-left:20px}
.aso-more li{margin:6px 0}
.aso-foot{
  margin-top:36px;border-top:4px solid var(--aso-line);
  padding:20px 0 46px;font-size:14px;color:var(--aso-muted);
}
.aso-foot a{color:var(--brand-2)}
.aso-foot p{margin:5px 0}

@media (max-width:520px){
  .aso-play{width:100%;text-align:center}
  .aso-cta{gap:12px}
}