:root {
  --deep-sea: #007E89;
  --sky-blue: #63CFE3;
  --calm-sand: #D6D1C4;
  --sunrise: #FF6C42;
  --queen-blue: #043C5D;
  --gold: #E4C27A;
  --karte-bg: #FBF9F5;
  --schrift-gross: "Bebas Neue", "Work Sans", sans-serif;
  --schrift-text: "Work Sans", sans-serif;
}

* { box-sizing: border-box; }

/* html braucht denselben Hintergrund wie body: beim Überziehen am oberen
   oder unteren Rand (iOS-Gummibandeffekt) blitzt sonst kurz Weiß auf, weil
   Safari dort durch body hindurch auf html schaut. */
html {
  background: var(--queen-blue);
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  background: radial-gradient(circle at 50% -10%, #0a5570 0%, var(--queen-blue) 55%, #021f30 100%);
  color: #fff;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* --- winterlicher Hintergrund -------------------------------------------- */

.hintergrund-schicht {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.stern-punkt {
  position: absolute;
  width: var(--groesse, 2px);
  height: var(--groesse, 2px);
  background: #fff;
  border-radius: 50%;
  animation: funkeln ease-in-out infinite;
}

@keyframes funkeln {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.9; }
}

.schneeflocke {
  position: absolute;
  top: -10px;
  width: var(--groesse, 3px);
  height: var(--groesse, 3px);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  animation: fallen linear infinite;
}

@keyframes fallen {
  0% { transform: translate(0, -10px); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(var(--drift, 0), 108vh); opacity: 0.2; }
}

.herz-deko {
  position: absolute;
  top: -40px;
  width: var(--groesse, 20px);
  height: auto;
  opacity: 0;
  animation: herzFallen linear infinite;
}

@keyframes herzFallen {
  0% { transform: translate(0, -40px) rotate(-8deg); opacity: 0; }
  8% { opacity: 0.22; }
  92% { opacity: 0.16; }
  100% { transform: translate(var(--drift, 0), 110vh) rotate(8deg); opacity: 0; }
}

.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.topbar {
  text-align: center;
  padding: 8px 0 20px;
}

.marke {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.marke-logo {
  width: 190px;
  max-width: 60%;
  height: auto;
  display: block;
}

h1 {
  font-family: var(--schrift-gross);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 10px;
}

.titel-akzent { color: var(--sunrise); }

.untertitel {
  color: var(--calm-sand);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.testleiste {
  background: rgba(255, 108, 66, 0.15);
  border: 1px solid var(--sunrise);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
  color: #ffdccd;
}

.testleiste select {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
}

.heute-bereich { margin-bottom: 40px; }

.scratch-slot {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 6px 6px, rgba(255, 255, 255, 0.35) 1px, transparent 1.3px) 0 0/22px 22px,
    radial-gradient(circle at 50% 0%, #0a5570 0%, var(--queen-blue) 60%, #021f30 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  min-height: 320px;
}

.scratch-slot--modal {
  /* Bewusst KEINE eigene Hoehenbegrenzung/kein eigenes Scrollen mehr hier:
     zwei ineinander verschachtelte Scroll-Bereiche (dieser hier + der
     Hintergrund) haben sich auf dem Handy gegenseitig im Weg gestanden,
     ohne sichtbaren Scrollbalken wirkte das wie "abgeschnitten", obwohl
     technisch noch scrollbar. Jetzt gibt es nur noch EINEN Scroll-Bereich,
     den Hintergrund (.modal-hintergrund) - die Karte selbst ist einfach so
     hoch wie sie sein muss. */
}

.karten-inhalt {
  padding: 30px 18px 22px;
  color: #fff;
  text-align: center;
  opacity: 0;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.karten-inhalt--sichtbar { opacity: 1; transition: opacity 0.2s ease; }

.karten-funkel {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
}

.karten-inhalt--sichtbar .karten-funkel { animation: karteFunkeln 3.2s ease-in-out infinite; }

.karten-funkel--1 { top: 14%; left: 10%; animation-delay: 0.3s !important; }
.karten-funkel--2 { top: 30%; right: 8%; animation-delay: 1.1s !important; background: var(--sky-blue); }
.karten-funkel--3 { bottom: 18%; left: 14%; animation-delay: 1.8s !important; background: var(--sunrise); }

@keyframes karteFunkeln {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0.55; transform: scale(1.3); }
}

.karten-thema {
  font-family: var(--schrift-gross);
  font-size: 23px;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(-8px);
}

.karten-inhalt--sichtbar .karten-thema {
  animation: themaEinblenden 0.5s ease forwards;
}

@keyframes themaEinblenden {
  to { opacity: 1; transform: translateY(0); }
}

.slide-punkte {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.slide-punkt {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.25s ease;
}

.slide-punkt--aktiv {
  width: 20px;
  background: var(--gold);
}

.slide-schiene {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  opacity: 0;
  padding: 22px 4px 6px;
  transition: height 0.3s ease, opacity 0.45s ease 0.1s;
  touch-action: pan-x;
}

.slide-schiene::-webkit-scrollbar { display: none; }

.karten-inhalt--sichtbar .slide-schiene {
  opacity: 1;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
}

/* --- Klebezettel-Karte (Konzept B) --------------------------------------- */

.notiz {
  position: relative;
  background: var(--karte-bg);
  border-radius: 14px;
  padding: 88px 28px 34px 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  color: var(--queen-blue);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

.notiz--ohne-sticker {
  /* Kein Sticker oben links, deshalb braucht es hier auch nicht den grossen
     Freiraum oben, der sonst dafuer reserviert war. */
  padding-top: 30px;
}

.notiz-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 84px;
  height: 26px;
  opacity: 0.88;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.notiz-sticker {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 4px;
  box-sizing: border-box;
}

.notiz-sticker svg, .notiz-sticker img.icon-original-herz { width: 19px; height: 19px; flex-shrink: 0; }

.icon-original-herz { object-fit: contain; display: inline-block; -webkit-user-drag: none; user-drag: none; pointer-events: none; }

.notiz-sticker span {
  font-size: 7.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  max-width: 52px;
  text-align: center;
}

.akzent-sand { background: var(--calm-sand); color: var(--queen-blue); }

.notiz-inhalt { margin-top: 6px; }

.karten-fuss {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.karten-fuss svg, .karten-fuss img.icon-original-herz {
  width: 20px;
  height: 20px;
  opacity: 0.4;
}

.karten-fuss svg:nth-child(2) { color: var(--gold); opacity: 0.7; }
.karten-fuss svg:nth-child(3) { color: var(--sky-blue); opacity: 0.7; }
.karten-fuss svg:nth-child(4) { color: var(--sunrise); opacity: 0.7; }
.karten-fuss svg:nth-child(3) { color: var(--gold); }
.karten-fuss svg:nth-child(4) { color: var(--sky-blue); }

.wisch-hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  transition: opacity 0.4s ease;
}

.wisch-hinweis svg { width: 14px; height: 14px; }

.icon-kreis {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.icon-kreis svg { width: 26px; height: 26px; }

.akzent-deepsea { background: var(--deep-sea); }
.akzent-sunrise { background: var(--sunrise); }
.akzent-skyblue { background: var(--sky-blue); color: var(--queen-blue); }
.akzent-queen { background: var(--queen-blue); }
.akzent-gold { background: var(--gold); color: var(--queen-blue); }

.karten-kategorie {
  font-size: 13px;
  color: #8a8478;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.karten-text {
  font-size: 25px;
  line-height: 1.45;
  font-weight: 700;
}

.karten-text--frage { color: var(--deep-sea); }

.karten-titel {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
}

.karten-anleitung {
  font-size: 18px;
  line-height: 1.6;
  color: #3a4a54;
}

/* --- großes blasses Icon im Hintergrund jeder Fläche --- */

/* --- Heute-Fahne --- */

.heute-fahne {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin: 0 auto 10px;
  padding: 6px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--gold), #c99f4d);
  color: var(--queen-blue);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 16px rgba(228, 194, 122, 0.5);
  animation: fahneWippen 2.8s ease-in-out infinite;
}

.heute-fahne svg { width: 14px; height: 14px; }

@keyframes fahneWippen {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

.satz-anfuehrung {
  position: absolute;
  top: 2px;
  right: 14px;
  font-family: Georgia, serif;
  font-size: 70px;
  color: rgba(0, 126, 137, 0.18);
  line-height: 1;
  pointer-events: none;
}

/* --- Denkfehler-Baustein: Mythos gegen Wahrheit --- */

.mythos-box {
  position: relative;
  background: rgba(255, 108, 66, 0.14);
  border: 1px dashed rgba(255, 108, 66, 0.5);
  border-radius: 16px;
  padding: 16px 18px;
  text-align: left;
  overflow: hidden;
}

.mythos-box .flaeche-icon { color: var(--sunrise); }

.mythos-etikett {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sunrise);
  margin-bottom: 6px;
}

.denkfehler-block {
  font-size: 14px;
  font-style: italic;
  color: #9a5a4a;
  text-decoration: line-through;
  text-decoration-color: rgba(154, 90, 74, 0.5);
}

.wechsel-pfeil {
  display: flex;
  justify-content: center;
  color: var(--sunrise);
  margin: -4px 0;
}

.wechsel-pfeil svg { width: 20px; height: 20px; }

.wahrheit-box {
  background: linear-gradient(160deg, rgba(0, 126, 137, 0.16), rgba(99, 207, 227, 0.24));
  border: 1px solid rgba(0, 126, 137, 0.35);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0, 126, 137, 0.12);
}

.wahrheit-etikett {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--deep-sea);
  margin-bottom: 6px;
}

.perspektive-block {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--queen-blue);
}

/* --- Frage-Baustein: Sprechblase --- */

.frage-blase {
  position: relative;
  background: linear-gradient(160deg, rgba(99, 207, 227, 0.34), rgba(99, 207, 227, 0.12));
  border: 1px solid rgba(99, 207, 227, 0.6);
  border-radius: 20px 20px 20px 4px;
  padding: 22px 20px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(99, 207, 227, 0.18);
}

.frage-blase .flaeche-icon { color: var(--deep-sea); opacity: 0.16; }

/* --- Übungs-Baustein --- */

.uebung-flaeche {
  position: relative;
  background: linear-gradient(160deg, rgba(4, 60, 93, 0.12), rgba(214, 209, 196, 0.4));
  border-left: 4px solid var(--queen-blue);
  border-radius: 4px 16px 16px 4px;
  padding: 18px 20px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(4, 60, 93, 0.1);
}

.uebung-flaeche .flaeche-icon { color: var(--queen-blue); }

.slide--abschluss { gap: 14px; }

.funkel-icon { animation: sternPulsieren 2.4s ease-in-out infinite; }

@keyframes sternPulsieren {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(228, 194, 122, 0)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(228, 194, 122, 0.8)); }
}

.abschluss-zitat {
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  color: var(--deep-sea);
  line-height: 1.5;
}

.abschluss-video {
  width: 100%;
  max-height: 260px;
  border-radius: 14px;
  margin: 4px 0;
  background: #000;
  display: block;
}

.abschluss-hinweis {
  font-size: 11px;
  color: #8a8478;
  border-top: 1px solid var(--calm-sand);
  padding-top: 12px;
}

.echtes-video {
  width: 100%;
  max-height: 320px;
  border-radius: 14px;
  margin: 4px 0;
  background: #000;
  display: block;
}

.teilen-video {
  /* Kein max-height wie bei Annas echten (breiteren) Videos: die Pinguin-
     Clips sind hochkant (9:16), mit der Deckelung entstanden links und
     rechts schwarze Balken. Ohne Deckelung wird die Karte an dieser Stelle
     zwar etwas hoeher, dafuer laeuft das Video randlos ueber die volle
     Breite, ohne etwas vom Bild abzuschneiden. */
  max-height: none;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Im echten Vollbild (Antippen/Klick) muss das wieder zurueckgesetzt werden -
   sonst zwingt object-fit:cover das Video in die 9:16-Box hinein und
   schneidet auf einem breiten Desktop-Bildschirm den groessten Teil ab
   ("die Haelfte fehlt"). Im Vollbild soll das Video ganz normal und
   vollstaendig zu sehen sein, notfalls mit schwarzen Balken. */
.teilen-video:fullscreen,
.teilen-video:-webkit-full-screen {
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.teilen-video-wrap {
  position: relative;
  cursor: pointer;
}

.teilen-vollbild-knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(4, 60, 93, 0.55);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Rein optischer Hinweis "hier draufklicken fuer Vollbild" - Klicks
     sollen ganz normal beim Video darunter ankommen, nicht hier haengen
     bleiben. */
  pointer-events: none;
}

.teilen-vollbild-knopf svg { width: 24px; height: 24px; margin-left: 3px; }

.echtes-audio {
  width: 100%;
  margin: 8px 0;
}

.teilen-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sunrise), #e85a30);
  box-shadow: 0 8px 18px rgba(255, 108, 66, 0.35);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.teilen-button:active {
  transform: scale(0.97);
  box-shadow: 0 4px 10px rgba(255, 108, 66, 0.3);
}

.teilen-button svg, .teilen-button img.icon-original-herz { width: 19px; height: 19px; flex-shrink: 0; }

.teilen-status {
  /* Kein min-height mehr: das hat unten immer 16px+ Platz reserviert,
     auch wenn da noch gar kein Text stand - genau der Weissraum unter
     dem Knopf, den man gesehen hat. Jetzt nimmt es sich nur Platz,
     sobald wirklich eine Meldung drinsteht. */
  margin-top: 8px;
  font-size: 12px;
  color: #8a8478;
}

.teilen-status:empty {
  margin-top: 0;
}

.platzhalter-player {
  position: relative;
  height: 112px;
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, #0a3a4d, #0a3a4d 10px, #0d4459 10px, #0d4459 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.platzhalter-player--audio {
  background: repeating-linear-gradient(135deg, #043c5d, #043c5d 10px, #05506f 10px, #05506f 20px);
}

.platzhalter-glanz {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 48%, transparent 66%);
  transform: translateX(-130%);
  animation: schimmer 3.4s ease-in-out infinite;
}

.platzhalter-spielknopf {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--queen-blue);
  animation: knopfAtmen 2.6s ease-in-out infinite;
}

@keyframes knopfAtmen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}

.platzhalter-spielknopf svg { width: 22px; height: 22px; margin-left: 2px; }

.platzhalter-dauer {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 7px;
  border-radius: 8px;
}

canvas.rubbelflaeche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Zurueck auf "none": "pan-y" sollte Scrollen an der grossen Heute-Karte
     vorbei erlauben, hat auf echten Touchscreens aber das Rubbeln selbst
     kaputt gemacht (der Browser hat viele Rubbel-Bewegungen faelschlich
     als Scroll-Wunsch gewertet). Seit die grosse Heute-Karte komplett
     entfernt ist, muss man vor dem Rubbeln eh nicht mehr daran vorbei
     scrollen - das urspruengliche Problem gibt es also nicht mehr. */
  touch-action: none;
  cursor: grab;
}

.rubbel-hinweis {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.funke {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  animation: sprueh 1s ease-out forwards;
}

@keyframes sprueh {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--drift, 0) * 60px), -90px) scale(0.3); }
}

.gesperrt-hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.gesperrt-hinweis svg, .gesperrt-hinweis img.icon-original-herz { width: 30px; height: 30px; opacity: 0.85; }

.scratch-slot--wartend,
.scratch-slot--kaufen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 6px 6px, rgba(255, 255, 255, 0.28) 1px, transparent 1.3px) 0 0/22px 22px,
    linear-gradient(150deg, #ff8a5c 0%, var(--sunrise) 45%, #d9491f 100%);
}

.kauf-karte {
  position: relative;
  z-index: 1;
  padding: 34px 26px 30px;
  text-align: center;
  color: #fff;
}

.kauf-abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.kauf-abzeichen svg { width: 13px; height: 13px; }

.kauf-titel {
  font-family: var(--schrift-gross);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
  line-height: 1.15;
}

.kauf-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 22px;
}

.kauf-preis {
  font-family: var(--schrift-gross);
  font-size: 44px;
  line-height: 1;
  margin-bottom: 20px;
}

.kauf-preis span {
  font-family: var(--schrift-text);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.kauf-button {
  display: block;
  background: #fff;
  color: var(--sunrise);
  font-weight: 800;
  font-size: 15px;
  padding: 15px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  margin-bottom: 14px;
}

.kauf-hinweis {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.kauf-trenner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
}
.kauf-trenner::before, .kauf-trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.kauf-trenner span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.kauf-email-form {
  display: flex;
  gap: 8px;
}
.kauf-email-eingabe {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.kauf-email-eingabe::placeholder { color: rgba(255, 255, 255, 0.55); }
.kauf-email-form button {
  font-size: 13px;
  font-weight: 700;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--sunrise);
  cursor: pointer;
  flex-shrink: 0;
}
.kauf-email-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin: 8px 0 0;
  min-height: 14px;
}

.tag-kachel-preis {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.3px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
}

.tag-kachel--kaufen {
  background: rgba(255, 255, 255, 0.06);
}
.tag-kachel--kaufen .tag-kachel-zahl { color: rgba(255, 255, 255, 0.55); }

.scratch-slot--wartend::after,
.scratch-slot--kaufen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.45) 48%, transparent 70%);
  transform: translateX(-130%);
  animation: schimmer 3s ease-in-out infinite;
}

.vorbei-hinweis {
  text-align: center;
  padding: 60px 20px;
  max-width: 420px;
  margin: 0 auto;
}
.vorbei-hinweis h2 {
  font-family: var(--schrift-gross);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--sky-blue);
  margin: 0 0 16px;
}
.vorbei-hinweis p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.raster-titel {
  font-family: var(--schrift-gross);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.03em;
  margin: 0 0 18px;
  color: var(--sky-blue);
}

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

.tag-kachel {
  aspect-ratio: 1;
  border-radius: 14px;
  border: none;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
  overflow: hidden;
}

.tag-kachel:active { transform: scale(0.92) !important; }

.tag-kachel-zahl {
  font-family: var(--schrift-gross);
  color: #fff;
  position: absolute;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.tag-kachel-deko {
  position: absolute;
  width: 68px;
  height: 68px;
  opacity: 0.65;
  color: #fff;
  z-index: 0;
}

.tag-kachel--gesperrt .tag-kachel-deko { opacity: 0.25; }

.tag-kachel--gesperrt {
  background: rgba(255, 255, 255, 0.06);
  cursor: default;
}
.tag-kachel--gesperrt .tag-kachel-zahl { color: rgba(255, 255, 255, 0.35); }

.tag-kachel--offen { background: linear-gradient(145deg, var(--deep-sea), #035e66); }
.tag-kachel--offen.tag-kachel--denkfehler { background: linear-gradient(145deg, var(--sunrise), #b8481f); }
.tag-kachel--offen.tag-kachel--frage { background: linear-gradient(145deg, var(--sky-blue), #2a97ad); }
.tag-kachel--offen.tag-kachel--uebung { background: linear-gradient(145deg, var(--queen-blue), #021f30); }
.tag-kachel--offen.tag-kachel--abschluss { background: linear-gradient(145deg, var(--gold), #b48f3f); }

.tag-kachel--verfuegbar {
  background: linear-gradient(145deg, var(--sunrise), #d9502c);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.tag-kachel--verfuegbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 45%, transparent 65%);
  transform: translateX(-120%);
  animation: schimmer 2.6s ease-in-out infinite;
}

@keyframes schimmer {
  0% { transform: translateX(-120%); }
  50%, 100% { transform: translateX(120%); }
}

.tag-kachel--heute {
  background: linear-gradient(145deg, var(--gold), #c99f4d);
  box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(228, 194, 122, 0.7);
  animation: puls 2.2s ease-in-out infinite;
}

.tag-kachel--heute .tag-kachel-zahl { color: var(--queen-blue); }

@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(228, 194, 122, 0.6); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(228, 194, 122, 0.95); }
}

.tag-kachel--wackeln { animation: kachelWackeln 0.55s ease; }

@keyframes kachelWackeln {
  0% { box-shadow: 0 0 0 0 rgba(255, 108, 66, 0); background-color: rgba(255, 108, 66, 0); }
  15% { box-shadow: 0 0 22px 6px rgba(255, 108, 66, 0.95); background-color: rgba(255, 108, 66, 0.85); }
  20% { transform: translateX(-6px) rotate(-5deg); }
  40% { transform: translateX(5px) rotate(4deg); }
  60% { transform: translateX(-4px) rotate(-3deg); }
  80% { transform: translateX(3px) rotate(2deg); }
  70% { box-shadow: 0 0 14px 3px rgba(255, 108, 66, 0.5); background-color: rgba(255, 108, 66, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(255, 108, 66, 0); background-color: rgba(255, 108, 66, 0); }
}

.spass-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--queen-blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  max-width: 82%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.spass-toast--sichtbar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.fusszeile {
  text-align: center;
  margin-top: 44px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.als-app-hinweis {
  font-size: 15px;
  margin-bottom: 14px;
}

.als-app-hinweis a { color: rgba(255, 255, 255, 0.85); }

.fusszeile a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.quellenangabe {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.28);
  margin-top: 6px;
}

.modal-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(2, 20, 32, 0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  z-index: 20;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.modal-schliessen {
  position: absolute;
  top: -14px;
  right: -10px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: var(--queen-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.modal-schliessen svg { width: 18px; height: 18px; }