/* ==========================================================================
   Zahlenschlacht – Website-Stylesheet
   Farbpalette 1:1 aus der App (App/Views/Theme.swift) übernommen, damit die
   Website wie eine Fortsetzung der App aussieht statt wie ein separates
   Marketing-Template.
   ========================================================================== */

:root {
  /* Palette aus Theme.swift */
  --parchment: #f4e6c1;
  --card: #fff8e8;
  --ink: #16243b;
  --primary: #236ccb;
  --primary-dark: #184e96;
  --gold: #e9ab2e;
  --orange: #e85b2b;
  --success: #3e8c55;
  --wood: #6b4b2a;

  --ink-soft: rgba(22, 36, 59, 0.66);
  --ink-faint: rgba(22, 36, 59, 0.4);
  --border: rgba(22, 36, 59, 0.16);
  --shadow: rgba(107, 75, 42, 0.28);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --max-width: 1120px;

  --font-display: "Baloo 2", "Poppins", "Segoe UI Rounded", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--parchment);
  line-height: 1.55;
  font-size: 17px;
}

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

a {
  color: var(--primary-dark);
  text-decoration-color: rgba(35, 108, 203, 0.4);
}

a:hover {
  text-decoration-color: currentColor;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

p {
  margin: 0 0 1em;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 88px 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--primary-dark);
  background: rgba(35, 108, 203, 0.12);
  border: 1.5px solid rgba(35, 108, 203, 0.25);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: clamp(28px, 4vw, 38px);
}

.section-head p {
  color: var(--ink-soft);
  font-size: 18px;
}

.lead {
  font-size: 19px;
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 15px 28px;
  border: 2px solid var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--shadow);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-secondary {
  background: var(--orange);
  color: var(--ink);
}

.btn-tertiary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 3px 0 rgba(233, 171, 46, 0.35);
}

.btn-quiet {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  padding: 15px 12px;
}

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.pill-note {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 230, 193, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 2px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  text-decoration: none;
}

.main-nav a:hover {
  color: var(--primary-dark);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-actions .btn {
  padding: 10px 18px;
  font-size: 15px;
}

.nav-toggle {
  display: none;
  border: 2px solid var(--ink);
  background: var(--card);
  border-radius: 10px;
  width: 44px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--ink);
  position: relative;
  border-radius: 2px;
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 3.5px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 56px 0 40px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 50px);
}

.hero .lead {
  margin-bottom: 28px;
}

.hero-visual {
  position: relative;
}

.battlefield-card {
  background: var(--ink);
  border-radius: var(--radius-lg);
  border: 3px solid var(--ink);
  box-shadow: 0 14px 0 var(--shadow), 0 22px 34px rgba(22, 36, 59, 0.25);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.battlefield-stage {
  position: relative;
  width: 100%;
}

.battlefield-stage img.board {
  width: 100%;
  border-radius: 10px;
}

.troop-token {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.troop-token img {
  width: 46px;
}

.troop-token .badge {
  margin-top: -8px;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.troop-token.enemy .badge {
  background: var(--orange);
}

.hq-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  display: flex;
  justify-content: center;
}

.hq-row img {
  width: 62%;
}

.stat-chip {
  position: absolute;
  bottom: -18px;
  right: 22px;
  background: var(--gold);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow);
}

/* ---------- Feature / step cards ---------- */

.grid {
  display: grid;
  gap: 24px;
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: 0 4px 0 var(--shadow);
}

.step-card {
  position: relative;
}

.step-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary-dark);
  background: rgba(35, 108, 203, 0.14);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.step-card h3 {
  font-size: 19px;
}

.step-card p {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-bottom: 0;
}

/* ---------- Vorteilskreis (Dreieck wie in der App-Anleitung) ---------- */

.advantage-wrap {
  max-width: 460px;
  margin: 40px auto 4px;
  /* Der oberste Knoten traegt seinen Text ueber dem Kreis und ragt damit ueber die
     Oberkante des Dreiecks hinaus - ohne diesen Platz schiebt er sich in den Absatz
     darueber. */
  padding-top: 56px;
}

.advantage-triangle {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 375;
  /* Eine Stelle fuer den Kreisdurchmesser: die Verschiebung der Knoten rechnet damit. */
  --token: 96px;
}

.advantage-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Linie und Pfeilspitze sind derselbe Strich, wie in der Anleitung der App. Die
   fruehere Fassung benutzte einen gefuellten SVG-Marker, und Marker skalieren mit
   der Linienstaerke - bei stroke-width 5 wurde aus der Spitze ein Klotz. */
.advantage-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.advantage-node {
  position: absolute;
  z-index: 2;
  /* Nicht die ganze Spalte mittig setzen, sondern den Kreis: sonst verschiebt eine
     Bildunterschrift, die eine Zeile mehr braucht, den Kreis nach oben - und die
     Pfeile, die auf feste Punkte gerechnet sind, treffen ihn nicht mehr. Genau
     deshalb sassen Spaeher und Bogenschuetze vorher auf verschiedenen Hoehen. */
  transform: translate(-50%, calc(var(--token) / -2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 148px;
  text-align: center;
}

/* Der oberste Knoten traegt seinen Text ueber dem Kreis statt darunter: unterhalb
   liegt er mitten im Dreieck, zwischen den beiden Pfeilanfaengen, und wird dort mit
   jeder zusaetzlichen Zeile enger. Oben ist Platz.
   -100% setzt die Unterkante des Knotens auf den Ankerpunkt, + token/2 schiebt sie so
   weit zurueck, dass wieder der Kreis auf dem Punkt sitzt - und nicht die Spalte. */
.advantage-node--top {
  flex-direction: column-reverse;
  transform: translate(-50%, calc(-100% + var(--token) / 2));
}

.advantage-token {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--token);
  height: var(--token);
  border-radius: 50%;
  background: var(--card);
  border: 2.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--shadow);
}

.advantage-token img {
  width: 66px;
}

.advantage-node strong {
  font-family: var(--font-display);
  font-size: 16px;
}

.advantage-node span {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.advantage-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------- Für Eltern ---------- */

.parents {
  background: var(--card);
  border-top: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
}

.parent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.parent-card {
  background: var(--parchment);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 24px 26px;
}

.parent-card .icon {
  font-size: 26px;
  margin-bottom: 10px;
  display: block;
}

/* Bei ungerader Kartenzahl fuellt die letzte Karte die Reihe. */
.parent-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.parent-card h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.parent-card p {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-bottom: 0;
}

/* ---------- Spielwelt gallery ---------- */

.world-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.world-card {
  background: linear-gradient(180deg, #fff8e8 0%, #f4e6c1 100%);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.world-card img {
  height: 150px;
  margin: 0 auto 14px;
  width: auto;
}

.world-card h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.world-card .tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-dark);
  background: rgba(35, 108, 203, 0.12);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

.world-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 0;
}

.world-note {
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
  margin-top: 28px;
}

/* ---------- Modi ---------- */

.modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 860px;
  margin: 0 auto;
}

.mode-card {
  border-radius: var(--radius-md);
  padding: 24px;
  border: 2px solid var(--ink);
}

.mode-card.mode-solo { background: rgba(35, 108, 203, 0.1); }
.mode-card.mode-duo { background: rgba(232, 91, 43, 0.1); }

.mode-card h3 {
  font-size: 18px;
}

.mode-card p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 0;
}

.mode-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  margin-bottom: 10px;
}

/* ---------- Preis / Download ---------- */

.pricing {
  text-align: center;
}

.pricing-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: 0 8px 0 var(--shadow);
}

.pricing-card h3 {
  font-size: 26px;
}

.pricing-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 30px;
  display: grid;
  gap: 10px;
  text-align: left;
}

.pricing-list li {
  display: flex;
  gap: 10px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.pricing-list li::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 13px 22px;
  font-family: var(--font-display);
}

.store-badge .store-badge-text {
  text-align: left;
  line-height: 1.2;
}

.store-badge small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
}

.store-badge strong {
  font-size: 17px;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 760px;
  margin: 0 auto;
}

.faq details {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 4px 22px;
  margin-bottom: 14px;
}

.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 0;
  list-style: none;
  position: relative;
  padding-right: 30px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 22px;
  color: var(--primary-dark);
  transition: transform 0.15s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq p {
  color: var(--ink-soft);
  padding-bottom: 18px;
  margin: 0;
  font-size: 15.5px;
}

/* ---------- Familiengeschichte ---------- */

.family-section {
  padding-top: 8px;
}

.family-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  box-shadow: 0 8px 0 var(--shadow);
  text-align: center;
}

.family-avatars {
  display: flex;
  justify-content: center;
  gap: -10px;
  margin-bottom: 18px;
}

.family-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-left: -14px;
}

.family-avatar:first-child {
  margin-left: 0;
}

.family-avatar.clara { background: var(--gold); }
.family-avatar.marlo { background: rgba(62, 140, 85, 0.45); }
.family-avatar.eltern { background: rgba(35, 108, 203, 0.28); }

.family-card blockquote {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px;
}

.family-card cite {
  display: block;
  font-style: normal;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------- CTA banner ---------- */

.cta-banner {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  margin: 0 24px;
}

.cta-banner h2 {
  color: #fff;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 auto 26px;
}

.cta-banner .btn-row {
  justify-content: center;
}

.cta-banner .btn-tertiary {
  background: #fff;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  padding: 56px 0 28px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.footer-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
}

.site-footer h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 14px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 15px;
}

.site-footer a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Legal pages ---------- */

.legal-page {
  padding: 64px 0 96px;
}

.legal-page .container {
  max-width: 760px;
}

.legal-page h1 {
  font-size: 34px;
}

.legal-page h2 {
  font-size: 21px;
  margin-top: 34px;
}

.legal-page p, .legal-page li {
  color: var(--ink-soft);
  font-size: 16px;
}

.legal-note {
  background: rgba(233, 171, 46, 0.18);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 30px;
  font-size: 15px;
}

.legal-note strong {
  color: var(--ink);
}

.placeholder {
  background: rgba(232, 91, 43, 0.16);
  border-bottom: 2px dashed var(--orange);
  padding: 1px 4px;
  font-style: italic;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    max-width: 440px;
    margin: 0 auto;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .parent-grid,
  .world-grid,
  .modes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Das Burger-Menue muss frueh genug greifen: mit sechs Punkten braucht die
   volle Leiste rund 880px, darunter ragte die Schaltflaeche ueber den Rand
   und die Seite scrollte quer. */
@media (max-width: 900px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--parchment);
    border-bottom: 2px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 18px;
    display: none;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 12px 0;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .nav-toggle {
    display: flex;
  }

  .header-actions .btn span.long {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand span {
    font-size: 18px;
  }

  .header-actions .btn {
    display: none;
  }

  section {
    padding: 60px 0;
  }

  .grid-3,
  .grid-4,
  .parent-grid,
  .world-grid,
  .modes-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    padding: 36px 24px;
    margin: 0 16px;
  }

  .advantage-triangle {
    --token: 72px;
  }

  .advantage-node {
    width: 108px;
  }

  .advantage-token img {
    width: 48px;
  }

  .advantage-node span {
    font-size: 11.5px;
  }
}

/* ---------- Echte Bildschirmfotos ---------- */

.app-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 3px solid var(--ink);
  box-shadow: 0 10px 0 var(--shadow), 0 18px 28px rgba(22, 36, 59, 0.22);
}

.shot {
  margin: 0;
}

.hero-shot {
  max-width: 300px;
  margin: 0 auto;
}

.hero-shot figcaption,
.shot figcaption {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

.shots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 780px) {
  .shots-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .shot figcaption {
    font-size: 14px;
  }
}

/* ---------- Übersicht der zwölf Stufen ---------- */

.levels-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 0 8px 0 var(--shadow);
}

.levels {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

.levels caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.levels thead th {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--card);
}

.levels tbody th,
.levels tbody td {
  padding: 12px 16px;
  border-top: 1px solid rgba(22, 36, 59, 0.14);
  vertical-align: top;
  text-align: left;
}

.levels tbody th {
  font-family: var(--font-display);
  font-size: 17px;
  white-space: nowrap;
}

.levels .grade-row th {
  background: rgba(35, 108, 203, 0.1);
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  color: var(--primary-dark);
}

.levels .ops {
  font-size: 17px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.levels .time {
  white-space: nowrap;
  color: var(--ink-soft);
}

.levels tbody tr:not(.grade-row):hover {
  background: rgba(232, 91, 43, 0.06);
}

.levels-note {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------- Leichter Einstieg ---------- */

.easy {
  background: rgba(35, 108, 203, 0.06);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}

.easy-head {
  max-width: 680px;
}

.easy-head h2 {
  font-size: clamp(28px, 4vw, 38px);
}

.easy-head .lead {
  margin-bottom: 0;
}

/* Streifen mit den fuenf Tutorial-Schritten: auf dem Desktop fuenf Spalten nebeneinander,
   auf dem Telefon ein Streifen zum Wischen (scroll-snap, ohne JavaScript). */
.tutorial-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.tutorial-step {
  position: relative;
  min-width: 0;
}

.tutorial-step-number {
  position: absolute;
  top: -12px;
  left: -8px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  background: var(--gold);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--shadow);
}

.tutorial-step .shot figcaption {
  font-size: 15px;
  text-align: left;
}

.easy-list {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.easy-list li {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}

.easy-list h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.easy-list p {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .tutorial-strip {
    gap: 14px;
  }

  .tutorial-step-number {
    width: 32px;
    height: 32px;
    font-size: 17px;
    top: -10px;
    left: -6px;
  }

  .tutorial-step .shot figcaption {
    font-size: 14px;
  }

  .easy-list {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Telefon: der Streifen wird zum Wischen. Die Bilder sind so breit, dass das naechste am
   rechten Rand deutlich angeschnitten bleibt. Der Streifen laeuft bis an den Bildschirmrand
   (negativer Rand gleicht das Container-Polster aus), unten ist Platz fuer den Schatten. */
@media (max-width: 560px) {
  .tutorial-strip {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 18px 24px 34px;
  }

  .tutorial-step {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .tutorial-step-number {
    width: 38px;
    height: 38px;
    font-size: 20px;
    top: -12px;
    left: -8px;
  }

  .tutorial-step .shot figcaption {
    font-size: 15px;
  }

  .easy-list {
    margin-top: 24px;
  }
}

/* Hinweis unter der Hauptzeile im Hero */
.hero-badge {
  display: inline-block;
  margin: 0 0 20px;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 3px 0 var(--shadow);
}

.hero-badge::after {
  content: "\2193";
  margin-left: 8px;
}

.hero-badge:hover {
  background: #f1bd54;
}