/* =====================================================================
   PP2 Hub — Look „Spielhalle"
   =====================================================================

   Warmes Graphit als Fläche, darauf Kacheln und Tasten, die wie echte
   Bauteile aussehen: Sie haben eine dunkle Unterkante, heben sich beim
   Überfahren ein Stück an und sinken beim Drücken ein. Eingabefelder
   liegen dagegen vertieft in der Fläche. Mehr Tiefe gibt es nicht —
   keine Verläufe, kein Leuchten, kein Glas, keine Daueranimation.

   Farbe: Gelb ist die Farbe der Tasten, die man drücken soll (Filter,
   Spielen im Überfahren, Hauptknöpfe in Formularen). Die Etiketten auf
   den Titelbildern zeigen die Spielart in einer von fünf Farben
   (data-farbe an der Kachel in index.html). Alles andere ist Graphit
   und gebrochenes Weiß; die bunten Titelbilder tragen den Rest.

   Schrift: Dela Gothic One für Überschriften, Spielnamen und das Logo,
   selbst gehostet unter /fonts/ (SIL Open Font License, Lizenz
   daneben, nur lateinische Zeichen, 14 KB). Der Fließtext läuft in der
   Systemschrift des Geräts.
   ===================================================================== */

@font-face {
  font-family: "Dela Gothic One";
  src: url("/fonts/dela-gothic-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #1c1b19;
  --color-surface: #272522;
  --color-raised: #33302b;
  --color-raised-hover: #3d3a34;
  --color-well: #141312;
  --color-edge: #0d0c0b;
  --color-text: #f3efe7;
  --color-text-muted: #a7a195;
  --color-border: rgba(243, 239, 231, 0.09);
  --color-border-light: rgba(243, 239, 231, 0.05);
  --color-border-strong: rgba(243, 239, 231, 0.28);

  /* Die Taste, die man drücken soll */
  --taste: #f6c400;
  --taste-hover: #ffd31f;
  --taste-kante: #9a7b00;
  --taste-tinte: #1c1b19;

  /* Spielarten auf den Etiketten (data-farbe) */
  --art-gelb: #f6c400;
  --art-gruen: #5cba63;
  --art-rot: #ec4a35;
  --art-orange: #f39130;
  --art-hell: #ddd6c7;

  --header-height: 64px;
  --radius: 14px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Dela Gothic One", "Arial Black", var(--font-body);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-height) + 70px);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Dela Gothic One gibt es nur in einer Stärke; nichts nachfetten. */
h1, h2, .logo, .game-title, .laden-marke {
  font-synthesis: none;
}

a {
  text-decoration: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--taste);
  outline-offset: 3px;
}

::selection {
  background: var(--taste);
  color: var(--taste-tinte);
}

[hidden] {
  display: none !important;
}

/* ---- Tasten -----------------------------------------------------------

   Eine Taste ist eine Fläche mit einer dunklen Unterkante (box-shadow
   ohne Unschärfe). Beim Drücken rutscht sie um die Kante nach unten.
   .btn ist die dunkle Taste, .btn-primary die gelbe. Dieselbe Mechanik
   haben Filter, Sprachwahl und der Spielen-Knopf auf den Kacheln.
   ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border-radius: 10px;
  padding: 9px 15px;
  cursor: pointer;
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: 0 3px 0 var(--color-edge);
  transition: transform 0.07s ease, box-shadow 0.07s ease, background 0.12s ease;
}

.btn:hover {
  background: var(--color-raised-hover);
}

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

.btn-primary {
  background: var(--taste);
  color: var(--taste-tinte);
  box-shadow: 0 4px 0 var(--taste-kante);
}

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

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--taste-kante);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

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

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  height: var(--header-height);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Das Logo: eine kleine gelbe Taste vor dem Namen. */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-text);
}

.logo::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--taste);
  box-shadow: 0 3px 0 var(--taste-kante);
}

.search-bar {
  position: relative;
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-well);
  border-radius: 10px;
  padding: 9px 13px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5);
}

.search-bar:focus-within {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 0;
}

.search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
}

.search-bar input::placeholder {
  color: var(--color-text-muted);
}

.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.search-clear:hover,
.search-clear:focus-visible {
  background: var(--color-raised);
  color: var(--color-text);
}

/* Vorschläge unter dem Suchfeld (js/script.js) */
.vorschlaege {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--color-edge), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.vorschlaege-kopf {
  padding: 6px 10px 4px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.vorschlaege a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.vorschlaege a:hover,
.vorschlaege a.aktiv {
  background: var(--color-raised);
}

.vorschlaege mark {
  background: transparent;
  color: var(--taste);
  font-weight: 700;
}

.header-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.submit-link {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Sprachwahl: zwei kleine Tasten, die gewählte steht erhaben. */
.sprachwahl {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.sprachwahl button {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.sprachwahl button:hover {
  color: var(--color-text);
}

.sprachwahl button[aria-pressed="true"] {
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: 0 3px 0 var(--color-edge);
}

/* ---- Inhalt --------------------------------------------------------- */

.main-content {
  flex: 1;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 28px;
}

/* ---- Kopf der Startseite ------------------------------------------- */

/*
 * Der Satz ist das Erste, was man sieht, und darf groß sein: zwei
 * Zeilen am Rechner, drei auf dem Handy. Darunter sofort die Spiele.
 */
.kopf {
  padding: 18px 0 28px;
}

.kopf-titel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

/* Umbrochen wird nur zwischen den Sätzen, nie mitten in einem. */
.kopf-titel .zeile {
  display: inline-block;
  white-space: nowrap;
}

.kopf-titel .zeile:not(:last-child) {
  margin-right: 0.28em;
}

/* Ein Spiel zum Sofortstarten unter dem Satz. */
.los-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 22px 0 0;
}

.los {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 12px;
  background: var(--taste);
  color: var(--taste-tinte);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--taste-kante);
  transition: transform 0.07s ease, box-shadow 0.07s ease, background 0.12s ease;
}

.los:hover {
  background: var(--taste-hover);
}

.los:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--taste-kante);
}

.los svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: none;
}

.los-oder {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---- Leiste: Filtern und Sortieren --------------------------------- */

.leiste {
  position: sticky;
  top: var(--header-height);
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 24px;
  padding: 12px 0 14px;
  background: var(--color-bg);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip,
.sort {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 7px 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform 0.07s ease, box-shadow 0.07s ease, color 0.12s ease;
}

.chip:hover,
.sort:hover {
  color: var(--color-text);
}

.chip[aria-pressed="true"] {
  background: var(--taste);
  color: var(--taste-tinte);
  box-shadow: 0 3px 0 var(--taste-kante);
}

.sort[aria-pressed="true"] {
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: 0 3px 0 var(--color-edge);
}

.chip:active,
.sort:active {
  transform: translateY(2px);
  box-shadow: none;
}

.sortieren {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.sort {
  font-size: 0.85rem;
}

.zaehlung {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Kacheln -------------------------------------------------------- */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 28px 22px;
}

/*
 * Eine Kachel ist ein Bauteil wie die Tasten: Fläche mit Unterkante.
 * Beim Überfahren hebt sie sich, beim Klick sinkt sie ein, und ihr
 * Spielen-Knopf wird gelb. Das Titelbild sitzt eingelassen darin.
 */
.game-card {
  --akzent: #ffffff;
  --genre: var(--art-hell);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 5px 0 var(--color-edge);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.game-card[data-farbe="gelb"] { --genre: var(--art-gelb); }
.game-card[data-farbe="gruen"] { --genre: var(--art-gruen); }
.game-card[data-farbe="rot"] { --genre: var(--art-rot); }
.game-card[data-farbe="orange"] { --genre: var(--art-orange); }
.game-card[data-farbe="hell"] { --genre: var(--art-hell); }

.game-card:hover,
.game-card.zeigt,
.game-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--color-edge);
}

.game-card:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--color-edge);
}

.game-card:focus-visible {
  outline: 2px solid var(--taste);
  outline-offset: 4px;
}

.game-card.aus {
  display: none;
}

.game-thumb {
  position: relative;
  display: block;
  margin: 8px 8px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}

.game-thumb .karte-art,
.game-thumb video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-thumb video {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-thumb video.laeuft {
  opacity: 1;
}

/* Spielart und „Neu" über dem Bild */
.karte-oben {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.game-genre,
.game-neu {
  padding: 5px 8px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.1;
  border-radius: 6px;
  color: var(--taste-tinte);
}

.game-genre {
  background: var(--genre);
}

.game-neu {
  background: var(--color-text);
}

.game-play { display: none; }

/* Handy oder PC, unten links im Bild. */
.karte-geraet {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  padding: 4px 8px 4px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 6px;
  background: rgba(20, 19, 18, 0.82);
  color: var(--color-text);
  pointer-events: none;
}

.karte-geraet svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.karte-geraet span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Zwei Gruppen auf Touchgeräten (js/hub.js) ---------------------- */

.gruppe-kopf {
  margin: 0 0 16px;
}

.gruppe-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
}

.gruppe-titel svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--taste);
}

.gruppe-zeile {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.gruppe-pc {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}

.gruppe-teilen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 13px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-raised);
  border: none;
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--color-edge);
  cursor: pointer;
}

.gruppe-teilen:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--color-edge);
}

.gruppe-teilen svg {
  width: 14px;
  height: 14px;
}

.game-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 14px 16px 16px;
}

.game-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.12;
}

.game-tagline {
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.karte-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.karte-modus {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Spielen: dunkle Taste, die gelb wird, sobald die Kachel gemeint ist. */
.karte-los {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text);
  background: var(--color-raised);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--color-edge);
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.karte-los svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.game-card:hover .karte-los,
.game-card.zeigt .karte-los,
.game-card:focus-visible .karte-los {
  color: var(--taste-tinte);
  background: var(--taste);
  box-shadow: 0 3px 0 var(--taste-kante);
}

/*
 * Handy. Viele kommen zuerst hier an — über ein Video, einen Link im
 * Chat — und entscheiden in Sekunden, ob sie bleiben. Darum: Kopf in
 * zwei flachen Zeilen, Filter in einer wischbaren Reihe, und die
 * Spiele zu zweit nebeneinander statt eines pro Bildschirm. Nur das
 * neueste Spiel steht oben über die volle Breite, als Aufmacher.
 */
@media (max-width: 640px) {
  .main-content { padding: 20px 16px; }

  .kopf { padding: 4px 0 16px; }
  .kopf-titel { font-size: clamp(1.75rem, 8.6vw, 2.4rem); line-height: 1.06; }
  .los-zeile { margin-top: 16px; }
  .los { padding: 12px 18px; font-size: 1rem; }
  .los-oder { display: none; }

  /* Der Kopf ist hier zweizeilig und scrollt mit. */
  .site-header { position: relative; }

  /* Die Leiste klebt nicht: Auf einem kleinen Schirm soll sie den
     Spielen keinen Platz nehmen. */
  .leiste {
    position: static;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 0 4px;
  }

  /* Auf dem Handy wischt man durch die Filter statt umzubrechen;
     der Rand rechts blendet aus und zeigt, dass es weitergeht. Unten
     etwas Luft, damit die Kante der gewählten Taste sichtbar bleibt. */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }

  .chips::-webkit-scrollbar { display: none; }

  .chip {
    white-space: nowrap;
    padding: 7px 11px;
    font-size: 0.86rem;
  }

  .sortieren { margin-left: 0; }

  .sort {
    padding: 5px 9px;
    font-size: 0.8rem;
  }

  .zaehlung {
    margin-left: auto;
    font-size: 0.8rem;
  }

  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
  }

  .game-card {
    border-radius: 13px;
    box-shadow: 0 4px 0 var(--color-edge);
  }

  .game-thumb {
    margin: 5px 5px 0;
    aspect-ratio: 4 / 3;
    border-radius: 9px;
  }

  .karte-oben {
    top: 7px;
    left: 7px;
    right: 7px;
    gap: 4px;
  }

  .game-genre,
  .game-neu {
    padding: 3px 6px;
    font-size: 0.64rem;
    border-radius: 5px;
  }

  .game-genre {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .game-neu { flex-shrink: 0; }

  .karte-geraet {
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    gap: 4px;
    padding: 2px 6px 2px 5px;
    font-size: 0.62rem;
    border-radius: 5px;
  }

  .karte-geraet svg {
    width: 11px;
    height: 11px;
  }

  .gruppe-pc {
    margin-top: 30px;
    padding-top: 22px;
  }

  .game-info {
    gap: 4px;
    padding: 10px 10px 11px;
  }

  .game-title {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
  }

  .game-tagline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.3;
  }

  /* Der Fuß sitzt immer unten, auch wenn die Nachbarkachel mehr Text hat. */
  .karte-fuss {
    gap: 6px;
    padding-top: 8px;
  }

  .karte-modus {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.7rem;
  }

  .karte-los {
    flex-shrink: 0;
    gap: 5px;
    padding: 6px 9px;
    font-size: 0.76rem;
    border-radius: 8px;
  }

  .karte-los svg {
    width: 9px;
    height: 9px;
  }

  /*
   * Breit über beide Spalten: das erste sichtbare Spiel als Aufmacher,
   * und das letzte, falls es sonst allein in seiner Reihe stünde.
   * Gezählt werden nur Kacheln, die Filter und Suche übrig lassen.
   * Das zweite Raster auf Touchgeräten (.nebenraster, „Am besten am
   * PC") hat keinen Aufmacher; dort steht die letzte Kachel an
   * ungerader Stelle allein.
   */
  .game-grid:not(.nebenraster) > .game-card:nth-child(1 of :not(.aus, [hidden])),
  .game-grid:not(.nebenraster) > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(even of :not(.aus, [hidden])),
  .nebenraster > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(odd of :not(.aus, [hidden])) {
    grid-column: 1 / -1;
  }

  .game-grid:not(.nebenraster) > .game-card:nth-child(1 of :not(.aus, [hidden])) .game-thumb,
  .game-grid:not(.nebenraster) > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(even of :not(.aus, [hidden])) .game-thumb,
  .nebenraster > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(odd of :not(.aus, [hidden])) .game-thumb {
    aspect-ratio: 16 / 9;
  }

  .game-grid:not(.nebenraster) > .game-card:nth-child(1 of :not(.aus, [hidden])) .game-info,
  .game-grid:not(.nebenraster) > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(even of :not(.aus, [hidden])) .game-info,
  .nebenraster > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(odd of :not(.aus, [hidden])) .game-info {
    gap: 6px;
    padding: 12px 14px 14px;
  }

  .game-grid:not(.nebenraster) > .game-card:nth-child(1 of :not(.aus, [hidden])) .game-title,
  .game-grid:not(.nebenraster) > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(even of :not(.aus, [hidden])) .game-title,
  .nebenraster > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(odd of :not(.aus, [hidden])) .game-title {
    font-size: 1.3rem;
  }

  .game-grid:not(.nebenraster) > .game-card:nth-child(1 of :not(.aus, [hidden])) .game-tagline,
  .game-grid:not(.nebenraster) > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(even of :not(.aus, [hidden])) .game-tagline,
  .nebenraster > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(odd of :not(.aus, [hidden])) .game-tagline {
    font-size: 0.9rem;
    -webkit-line-clamp: 3;
  }

  .game-grid:not(.nebenraster) > .game-card:nth-child(1 of :not(.aus, [hidden])) .karte-modus,
  .game-grid:not(.nebenraster) > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(even of :not(.aus, [hidden])) .karte-modus,
  .nebenraster > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(odd of :not(.aus, [hidden])) .karte-modus {
    font-size: 0.8rem;
  }

  .game-grid:not(.nebenraster) > .game-card:nth-child(1 of :not(.aus, [hidden])) .karte-los,
  .game-grid:not(.nebenraster) > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(even of :not(.aus, [hidden])) .karte-los,
  .nebenraster > .game-card:nth-last-child(1 of :not(.aus, [hidden])):nth-child(odd of :not(.aus, [hidden])) .karte-los {
    padding: 9px 15px;
    font-size: 0.88rem;
  }

.more-soon {
    margin-top: 32px;
    font-size: 0.86rem;
  }
}

/* Wer weniger Bewegung will, bekommt Tasten und Kacheln ohne Heben und Sinken. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .chip,
  .sort,
  .game-card,
  .karte-los,
  .game-thumb video {
    transition: none;
  }

  .btn:active,
  .chip:active,
  .sort:active,
  .gruppe-teilen:active,
  .game-card:hover,
  .game-card.zeigt,
  .game-card:focus-visible,
  .game-card:active {
    transform: none;
  }
}

.keine-treffer {
  text-align: center;
  color: var(--color-text-muted);
  margin-top: 24px;
}

.more-soon {
  max-width: 620px;
  margin: 56px auto 0;
  text-align: center;
  text-wrap: balance;
  line-height: 1.6;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .more-soon { margin-top: 32px; font-size: 0.86rem; }
}

.more-soon a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--taste);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---- Fußzeile ------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 28px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/*
 * Kopf auf dem Handy: oben Logo und Sprache, darunter die Suche.
 * „Schlag uns was vor" fällt hier weg — der Link steht unter den
 * Spielen noch einmal.
 */
@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px 12px;
    gap: 10px;
  }

  .logo { font-size: 1.2rem; }
  .submit-link { display: none; }
  .sprachwahl { margin-left: auto; }

  .sprachwahl button {
    padding: 5px 8px;
    font-size: 0.76rem;
  }

  .search-bar {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
    padding: 8px 12px;
  }

  /* Unter 16 px vergrößert iOS die Seite, sobald man ins Feld tippt. */
  .search-bar input { font-size: 16px; }

  .site-footer {
    padding: 22px 16px;
    font-size: 0.8rem;
  }

  .footer-links { gap: 6px 14px; }
}

/* Spiel einreichen */
.submit-page {
  max-width: 640px;
  margin: 0 auto;
}

.submit-page.wide {
  max-width: 860px;
}

.submit-page h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 0 10px;
}

.submit-page .lead {
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 32px;
}

.submit-page .lead a {
  color: var(--color-text);
  text-decoration: underline;
}

.submit-form {
  display: grid;
  gap: 20px;
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
}

.field > span {
  font-size: 0.85rem;
  font-weight: 600;
}

.field em,
.check em {
  font-style: normal;
  color: var(--color-text-muted);
}

.field small {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.field input,
.field select,
.field textarea,
.code-row input {
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-well);
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5);
  padding: 10px 12px;
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.code-row input:focus {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 0;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.4;
}

.check input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Vorschlagen: die Art als Reihe von Knöpfen statt als Auswahlliste. */
.arten {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.arten legend {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 6px;
}

.arten-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arten-wahl label {
  position: relative;
  cursor: pointer;
}

.arten-wahl input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.arten-wahl span {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 9px;
  background: var(--color-raised);
  box-shadow: 0 3px 0 var(--color-edge);
  transition: background 0.12s ease, color 0.12s ease;
}

.arten-wahl label:hover span {
  background: var(--color-raised-hover);
}

.arten-wahl input:checked + span {
  background: var(--taste);
  color: var(--taste-tinte);
  box-shadow: 0 3px 0 var(--taste-kante);
}

.arten-wahl input:focus-visible + span {
  outline: 2px solid var(--taste);
  outline-offset: 3px;
}

.submit-form .btn-primary {
  justify-self: start;
  padding: 10px 28px;
  font-size: 0.95rem;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.meldung.bad {
  color: #ff6b7d;
  font-weight: 600;
}

.danke {
  background: var(--color-surface);
  box-shadow: 0 5px 0 var(--color-edge);
  border-radius: var(--radius);
  padding: 24px;
}

.danke h2 {
  margin: 0 0 8px;
}

.danke p {
  line-height: 1.5;
}

.danke .btn {
  display: inline-block;
  margin: 4px 8px 0 0;
}

/* Verwaltung der Einreichungen */
.code-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.code-row input {
  max-width: 280px;
}

.einreichungen {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 16px;
}

.einreichung {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 8px;
}

.einreichung-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px 8px;
}

.einreichung-link {
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.einreichung-text {
  margin: 0;
  white-space: pre-line;
  line-height: 1.5;
}

.einreichung-meta {
  color: var(--color-text-muted);
}

.einreichung .btn {
  justify-self: start;
}

.einreichung-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Video zur umgesetzten Idee (js/ideen-video.js) */
.video-werkstatt,
.strecken-bereich {
  margin: 24px 0 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  display: grid;
  gap: 16px;
}

.video-werkstatt h2,
.strecken-bereich h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
}

.video-werkstatt .lead,
.strecken-bereich .lead {
  margin: 0;
}

.video-buehne {
  display: grid;
  justify-items: center;
}

.video-buehne canvas,
.video-buehne video {
  width: min(100%, 300px);
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  background: var(--color-well);
}

.video-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.strecken-spiel h3 {
  margin: 8px 0;
  font-size: 1rem;
}

.strecken-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.strecken-liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
}

.strecken-liste .platz {
  min-width: 2ch;
  font-weight: 800;
  color: var(--taste);
}

.strecken-liste .zahlen {
  color: var(--color-text-muted);
  flex: 1;
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: 32px 16px;
  }
}

/* =====================================================================
   Ladescreen beim Wechsel in ein Spiel — siehe js/script.js
   ===================================================================== */

#laden {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--color-bg);
}

#laden[hidden] { display: none; }

.laden-inhalt {
  width: min(420px, 100%);
}

.laden-marke {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: center;
}

.laden-leiste {
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.laden-fuell {
  display: block;
  height: 100%;
  background: var(--taste);

  /*
   * Gefuellt wird ueber scaleX statt ueber die Breite: Das kostet kein
   * neues Layout je Bild. Ohne transition — die Kurve kommt Bild fuer
   * Bild aus dem Skript, eine Ueberblendung wuerde sie verschmieren.
   */
  transform: scaleX(0);
  transform-origin: left center;
}

.laden-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.laden-prozent {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Inhaltsseiten — Impressum, Datenschutz, Nutzungsbedingungen, Über,
   Kontakt. Dieselbe Sprache wie der Hub: Graphit, Überschriften in
   Dela Gothic One, Links mit gelber Unterstreichung.
   ===================================================================== */

.seite {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  /* Der Seitenabstand kommt von .main-content — hier nur unten Luft. */
  padding: 0 0 24px;
}

.seite h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.1;
}

.seite .stand {
  margin: 0 0 32px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.seite h2 {
  margin: 40px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
}

.seite h3 {
  margin: 22px 0 6px;
  font-size: 0.95rem;
}

.seite p,
.seite li {
  line-height: 1.65;
}

.seite ul,
.seite ol {
  padding-left: 22px;
}

.seite li { margin-bottom: 6px; }

.seite a {
  text-decoration: underline;
  text-decoration-color: var(--taste);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.seite a:hover { color: var(--taste); }

/* Anschrift und andere Blöcke, die Zeilenumbrüche behalten müssen. */
.anschrift {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  line-height: 1.6;
}

/*
 * Noch auszufüllende Stelle. Bewusst laut: Ein Impressum mit einem
 * Platzhalter darin ist schlimmer als gar keins, und beim Überfliegen
 * übersieht man eckige Klammern.
 */
.fehlt {
  padding: 1px 6px;
  background: #4a3b10;
  border-bottom: 2px solid #d9a520;
  font-weight: 700;
  white-space: nowrap;
}

.hinweis {
  margin: 28px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Fußzeile mit den Pflichtlinks */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* Social-Media-Kanäle unter den Pflichtlinks */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.footer-social a { text-decoration: none; font-weight: 600; }
.footer-social a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .seite h1 { font-size: 1.5rem; }
}

/* ---- Ratgeber, Anleitungen, Neuigkeiten ------------------------------
   Diese Seiten gibt es je Sprache unter eigener Adresse (Deutsch unter
   /de/…). Oben ein Menü und die Sprachwahl als Links zur anderen
   Fassung, über der Überschrift die Brotkrumen. */

.kopf-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.kopf-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.kopf-nav a:hover { color: var(--color-text); }

.kopf-nav a[aria-current] {
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: 0 3px 0 var(--color-edge);
}

.sprachwahl a {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--color-text-muted);
}

.sprachwahl a:hover { color: var(--color-text); }

.sprachwahl a[aria-current] {
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: 0 3px 0 var(--color-edge);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.brotkrumen li + li::before {
  content: "›";
  margin-right: 8px;
}

.seite .brotkrumen a { text-decoration: none; }
.seite .brotkrumen a:hover { text-decoration: underline; color: var(--color-text); }
.brotkrumen [aria-current] { color: var(--color-text); }

/* Screenshots aus den Spielen, mit Bildunterschrift. */
.seite figure {
  margin: 26px 0;
}

.seite figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-well);
}

.seite figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.ratgeber-liste { list-style: none; padding: 0; }
.ratgeber-liste li { margin-bottom: 14px; }
.ratgeber-liste a { font-weight: 600; }
.ratgeber-liste span { display: block; color: var(--color-text-muted); font-size: 0.92rem; }

.spiel-start { margin-top: 28px; }

@media (max-width: 640px) {
  /* Oben Logo und Sprache, darunter das Menü über die ganze Breite. */
  .kopf-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }

  .kopf-nav a { padding: 6px 10px; font-size: 0.85rem; }
}

/* =====================================================================
   Werbespalte neben dem Inhalt
   ===================================================================== */

.hub-raster {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Im Raster bringt die Reihe den Seitenabstand mit. */
.hub-raster .main-content {
  max-width: none;
  margin: 0;
  padding: 28px 0;
}

.werbe-spalte {
  display: none;
  flex: 0 0 160px;
  padding-top: 48px;
}

/*
 * Ab 940 px. Darunter bleibt die Spalte nicht nur unsichtbar, sondern
 * ohne Breite — und das Werbemodul laedt nur, was Platz hat. Eine
 * Anzeige, die niemand sieht, soll auch nicht abgerufen werden.
 *
 * Die Schwelle lag zuerst bei 1100 px. Ein Tablet quer hat aber oft
 * nur rund 1000 CSS-Pixel, und damit sah dort niemand je eine
 * Anzeige. 940 laesst neben der Spalte noch ueber 700 px fuer die
 * Kacheln — genug fuer vier nebeneinander.
 */
@media (min-width: 940px) {
  .werbe-spalte { display: block; }
}

.werbung {
  position: sticky;
  top: 84px;
  width: var(--werbung-breite, 160px);
}

/* „Anzeige" darüber — Kennzeichnungspflicht. */
.werbung-marke {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Ohne eingetragene Kennung nur die Fläche. */
.werbung.leer::after {
  content: '';
  display: block;
  height: var(--werbung-hoehe, 600px);
  border: 1px dashed var(--color-border-light);
  background: var(--color-surface);
}

/* Auf dem Handy 16 statt 24 px Rand: so passen zwei Kacheln
   nebeneinander. Steht am Ende, damit es die Werbespalten-Regeln
   oben überschreibt. */
@media (max-width: 640px) {
  .hub-raster {
    padding: 0 16px;
  }

  .hub-raster .main-content {
    padding: 14px 0 28px;
  }
}

/* Unauffälliger Weg zu /verwaltung in der Fußzeile. Die Seite ist
   ohnehin durch den Wartungscode geschützt. */
.verwaltung-link {
  color: inherit;
}

.verwaltung-link:hover {
  text-decoration: underline;
}

/* ---- Tägliche Belohnungen (js/belohnung.js) ------------------------ */

.belohnung-knopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.belohnung-knopf:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.bel-geschenk {
  display: flex;
  color: var(--color-text-muted);
}

.bel-geschenk svg,
.bel-muenze,
.bel-flamme {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.bel-punkt {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 0 2px var(--color-bg);
  display: none;
}

.belohnung-knopf.bereit {
  border-color: rgba(255, 200, 58, 0.55);
}

.belohnung-knopf.bereit .bel-geschenk {
  color: #ffc83a;
  animation: bel-wackeln 2.4s ease-in-out infinite;
}

.belohnung-knopf.bereit .bel-punkt {
  display: block;
  animation: bel-puls 1.6s ease-out infinite;
}

@keyframes bel-wackeln {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-14deg); }
  82% { transform: rotate(12deg); }
  88% { transform: rotate(-8deg); }
  94% { transform: rotate(4deg); }
}

@keyframes bel-puls {
  0% { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 2px rgba(255, 77, 109, 0.6); }
  100% { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 10px rgba(255, 77, 109, 0); }
}

/* Das Fenster */

.belohnung {
  width: min(520px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: rgba(13, 15, 23, 0.97);
  color: var(--color-text);
  font-family: var(--font-body);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--color-border);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.belohnung[open] {
  animation: bel-auf 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.belohnung::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

@keyframes bel-auf {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

.bel-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  background: rgba(13, 15, 23, 0.97);
}

.bel-kopf h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.bel-zu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  cursor: pointer;
}

.bel-zu:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text);
}

.bel-stand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px;
}

.bel-wert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.bel-wert svg {
  width: 22px;
  height: 22px;
}

.bel-wert b {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.bel-wert span {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.15;
}

.bel-teil {
  padding: 18px 20px 4px;
}

.bel-teil:last-child {
  padding-bottom: 20px;
}

.bel-teil h3 {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bel-zeile {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.bel-tage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.bel-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.bel-tag-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.bel-tag-lohn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.bel-tag-lohn svg {
  width: 12px;
  height: 12px;
}

.bel-tag.gross {
  border-color: rgba(255, 200, 58, 0.4);
  background: rgba(255, 200, 58, 0.07);
}

.bel-tag.dran {
  border-color: #ffc83a;
  background: rgba(255, 200, 58, 0.14);
  box-shadow: 0 0 18px rgba(255, 200, 58, 0.25);
}

.bel-tag.dran .bel-tag-name {
  color: #ffc83a;
}

.bel-tag.erledigt {
  opacity: 0.45;
}

.bel-tag.erledigt .bel-tag-lohn::after {
  content: "✓";
  margin-left: 2px;
  color: #3dffb0;
}

.bel-bonus {
  width: 100%;
  padding: 11px 18px;
  font-size: 0.95rem;
  background: #ffc83a;
  border-color: #ffc83a;
  color: #2a1d00;
}

.bel-bonus:hover {
  background: #ffd567;
  color: #2a1d00;
}

.bel-hinweis {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.bel-aufgaben {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bel-aufgabe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.bel-aufgabe.fertig {
  border-color: rgba(61, 255, 176, 0.45);
}

.bel-aufgabe.abgeholt {
  opacity: 0.5;
}

.bel-aufgabe-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
}

.bel-balken {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.bel-balken i {
  display: block;
  height: 100%;
  background: var(--color-text);
  transform-origin: left;
}

.bel-aufgabe-lohn {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.bel-aufgabe-lohn svg {
  width: 13px;
  height: 13px;
}

.bel-los {
  flex-shrink: 0;
  min-width: 72px;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.bel-los:hover {
  background: rgba(255, 255, 255, 0.12);
}

.bel-hol {
  border-color: #3dffb0;
  background: #3dffb0;
  color: #002a1a;
}

.bel-hol:hover {
  background: #7affc9;
}

.bel-fortschritt,
.bel-haken {
  flex-shrink: 0;
  min-width: 72px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.bel-haken {
  color: #3dffb0;
  font-size: 1rem;
}

.bel-uhr {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.bel-restzeit {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.bel-farben {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.bel-farbe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bel-farbe:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
}

.bel-farbe.aktiv {
  border-color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}

.bel-farbe.zu-teuer {
  cursor: default;
  opacity: 0.5;
}

.bel-tupfer {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tupfer);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tupfer) 55%, transparent);
}

.bel-tupfer.prism {
  background: conic-gradient(#ff4d6d, #ffc83a, #3dffb0, #49c6ff, #7b6bff, #ff7eb6, #ff4d6d);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
}

.bel-farbe-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.bel-farbe-preis {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.bel-farbe-preis svg {
  width: 11px;
  height: 11px;
}

.bel-farbe.aktiv .bel-farbe-preis {
  color: var(--color-text);
}

.bel-plus {
  position: fixed;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: #ffc83a;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.bel-plus svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .belohnung-knopf {
    margin-left: auto;
    padding: 4px 10px 4px 8px;
    font-size: 0.8rem;
  }

  .belohnung-knopf ~ .sprachwahl { margin-left: 0; }

  /* Auf dem Handy als Blatt von unten. */
  .belohnung {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
  }

  .belohnung[open] {
    animation-name: bel-hoch;
  }

  @keyframes bel-hoch {
    from { transform: translateY(40px); opacity: 0; }
  }

  .bel-kopf,
  .bel-stand,
  .bel-teil { padding-left: 16px; padding-right: 16px; }

  .bel-tage { gap: 4px; }
  .bel-tag { padding: 8px 0 7px; }
  .bel-tag-name { font-size: 0.6rem; }
  .bel-tag-lohn { font-size: 0.78rem; }
  .bel-tag-lohn svg { display: none; }

  .bel-aufgabe { gap: 8px; }
  .bel-los,
  .bel-fortschritt,
  .bel-haken { min-width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .belohnung-knopf.bereit .bel-geschenk,
  .belohnung-knopf.bereit .bel-punkt,
  .belohnung[open] { animation: none; }
}

/* Verwaltung: Weg zurück ins Dashboard */
.zurueck-link {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.zurueck-link a {
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
}

.zurueck-link a:hover {
  opacity: 1;
  text-decoration: underline;
}