/* wantbe — Gestaltung, zweiter Anlauf.
   Alles davor ist verworfen.

   Leitbild: Spielzeug. Dicke Formen, harte bunte Schatten wie Aufkleber,
   federnde Bewegungen mit Überschwingen, Dinge die man anfassen, ziehen,
   werfen und wischen kann. Nichts ist nur zum Lesen da. */

:root {
  --nacht:    #14122e;
  --nacht-2:  #1c1940;
  --tinte:    #0d0b1f;

  --pink:     #ff4d80;
  --gelb:     #ffd23f;
  --gruen:    #22e0a1;
  --cyan:     #3fd0ff;
  --lila:     #a855ff;
  --orange:   #ff8a3d;

  --text:     #fffdf7;
  --text-2:   #b9b4e0;
  --text-3:   #9691c4;   /* 5,66:1 auf der Kartenfarbe */

  --akzent:   var(--lila);
  --gut:      var(--gruen);
  --gefahr:   var(--pink);

  --rund:     28px;
  --rund-s:   18px;
  --breite:   1120px;
  --schmal:   720px;

  --feder:    cubic-bezier(.34, 1.56, .64, 1);   /* schwingt über */
  --weich:    cubic-bezier(.2, .9, .3, 1);

  --schrift:  "Segoe UI", -apple-system, BlinkMacSystemFont, "Nunito",
              Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  display: flex; flex-direction: column; min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Bunte Wolken im Hintergrund */
body::before {
  content: ""; position: fixed; inset: -25vh -25vw; z-index: -3;
  background:
    radial-gradient(30vw 30vw at 12% 18%, rgba(168,85,255,.38), transparent 60%),
    radial-gradient(28vw 28vw at 88% 12%, rgba(63,208,255,.30), transparent 60%),
    radial-gradient(32vw 32vw at 72% 88%, rgba(255,77,128,.30), transparent 60%),
    radial-gradient(26vw 26vw at 22% 92%, rgba(255,210,63,.22), transparent 60%);
  filter: blur(20px);
  animation: wolken 26s ease-in-out infinite alternate;
}
@keyframes wolken {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4vw,-3vh,0) scale(1.12); }
  100% { transform: translate3d(-3vw,3vh,0) scale(1.06); }
}

/* Die Spielwiese: hier fliegen die Kugeln */
#spielwiese { position: fixed; inset: 0; z-index: -2; }
#spielwiese.vorn { z-index: 5; }

#fortschritt {
  position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 60;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, var(--lila), var(--pink), var(--gelb), var(--gruen));
  transition: width .12s linear;
}

main {
  width: 100%; max-width: var(--breite); margin: 0 auto;
  padding: 40px 20px 100px; flex: 1; position: relative; z-index: 2;
}
body.schmal main { max-width: var(--schmal); }

/* ================================================================
   Kopf
   ================================================================ */
.kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 22px;
  background: rgba(20,18,46,.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.marke {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em;
  color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
  transition: transform .3s var(--feder);
}
.marke:hover { transform: scale(1.06) rotate(-2deg); color: var(--text); }
.marke::before {
  content: ""; width: 22px; height: 22px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gelb), var(--pink), var(--lila));
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
  animation: huepf 2.4s var(--feder) infinite;
}
@keyframes huepf {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%     { transform: translateY(-9px) rotate(18deg); }
  55%     { transform: translateY(0) rotate(0deg); }
}
.kopf-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kopf-nav a {
  color: var(--text-2); text-decoration: none; font-size: .93rem; font-weight: 700;
  padding: 9px 16px; border-radius: 99px; transition: all .25s var(--feder);
}
.kopf-nav a:hover { color: var(--text); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.kopf-nav a.an { color: var(--tinte); background: var(--gelb); box-shadow: 0 4px 0 #c9a010; }

/* ================================================================
   Schrift
   ================================================================ */
h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.08; margin: 0 0 .4em;
     font-weight: 900; letter-spacing: -.035em; }
h2 { font-size: 1.35rem; line-height: 1.25; margin: 1.5em 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h2:first-child { margin-top: 0; }
p { margin: 0 0 1em; }
a { color: var(--cyan); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--gelb); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .87em;
       background: rgba(0,0,0,.35); padding: 3px 9px; border-radius: 8px; }
strong { color: #fff; font-weight: 800; }

.ueber { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 900; color: var(--gelb); margin: 0 0 .7em; }
.vorspann { color: var(--text-2); font-size: 1.05rem; }
.vorspann.mitte { text-align: center; }
.klein { font-size: .87rem; color: var(--text-3); }
.gross { font-size: 1.2rem; }
.mitte { text-align: center; }

/* ================================================================
   Karten: dicke Klötze mit hartem Schatten
   ================================================================ */
.karte {
  position: relative;
  background: var(--nacht-2);
  border: 2px solid rgba(255,255,255,.10);
  border-radius: var(--rund);
  padding: 30px;
  margin: 0 0 24px;
  box-shadow: 0 8px 0 rgba(0,0,0,.35);
}
.karte.gefahr { border-color: rgba(255,77,128,.5); box-shadow: 0 8px 0 rgba(120,20,50,.5); }

/* ================================================================
   Startseite
   ================================================================ */
.held { padding: 40px 0 26px; max-width: 780px; position: relative; }
.held h1 { font-size: clamp(2.6rem, 9vw, 5rem); margin-bottom: .25em; }
.held h1 em {
  font-style: normal; display: inline-block; position: relative;
  color: var(--gelb); cursor: grab;
  transition: transform .35s var(--feder);
}
.held h1 em:hover { transform: rotate(-4deg) scale(1.06); }
.held .gross { color: var(--text-2); max-width: 26em; font-weight: 600; }
.knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.8em; }

.wiesen-hinweis {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 800; color: var(--text-3);
  margin-top: 26px; padding: 9px 16px; border-radius: 99px;
  background: rgba(255,255,255,.06); border: 2px dashed rgba(255,255,255,.14);
}
.wiesen-hinweis::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: var(--cyan); animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
        gap: 20px; padding: 20px 0 40px; }
.drei p { color: var(--text-2); font-size: .96rem; margin: 0; }

/* Kacheln: greifbar, kippen beim Anfassen */
.kachel {
  cursor: grab; margin: 0; user-select: none; touch-action: pan-y;
  transition: transform .4s var(--feder), box-shadow .3s, border-color .3s;
  will-change: transform;
}
.kachel:nth-child(1) { --farbe: var(--pink);  }
.kachel:nth-child(2) { --farbe: var(--cyan);  }
.kachel:nth-child(3) { --farbe: var(--gruen); }
.kachel { border-color: var(--farbe); box-shadow: 0 8px 0 color-mix(in srgb, var(--farbe) 45%, black); }
.kachel:hover { transform: translateY(-6px) rotate(-1.4deg) scale(1.02); }
.kachel:active, .kachel.gepackt { cursor: grabbing; transform: scale(.97) rotate(1deg); }
.kachel h2 { color: var(--farbe); }
.kachel-nr {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; border-radius: 18px; margin-bottom: 14px;
  font-size: 1.5rem; font-weight: 900; color: var(--tinte);
  background: var(--farbe); box-shadow: 0 5px 0 color-mix(in srgb, var(--farbe) 45%, black);
  transition: transform .4s var(--feder);
}
.kachel:hover .kachel-nr { transform: rotate(-10deg) scale(1.1); }
.kachel-pfeil {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: .9rem; font-weight: 900; color: var(--farbe);
}
.kachel-pfeil::after { content: "\2192"; transition: transform .3s var(--feder); }
.kachel:hover .kachel-pfeil::after { transform: translateX(7px); }

.zitat { padding: 46px 0; text-align: center; }
.zitat blockquote {
  margin: 0 0 .6em; font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900; letter-spacing: -.03em; color: var(--text);
}
.zitat p { color: var(--text-3); font-size: .94rem; margin: 0; }
.hinweis-block { padding-top: 26px; color: var(--text-3); font-size: .9rem; }

/* ================================================================
   Heute: die Wischkarte
   ================================================================ */
.heute { max-width: var(--schmal); margin: 0 auto; }
.meister-satz { color: var(--gelb); font-size: 1.1rem; font-weight: 700; margin-bottom: 1.4em; }
.meister-satz.gross { font-size: 1.3rem; font-weight: 900; color: var(--text); }

.karten-buehne { position: relative; perspective: 1200px; }

.aufgabe {
  position: relative; z-index: 2;
  background: linear-gradient(160deg, #2a2456, #1c1940);
  border: 3px solid rgba(255,255,255,.14);
  border-radius: 32px; padding: 40px 34px;
  box-shadow: 0 14px 0 rgba(0,0,0,.4), 0 30px 60px rgba(0,0,0,.45);
  cursor: grab; user-select: none; touch-action: pan-y;
  will-change: transform;
  transition: transform .45s var(--feder), box-shadow .3s, border-color .3s;
}
.aufgabe.gepackt { cursor: grabbing; transition: none; }
.aufgabe h1 { font-size: clamp(1.5rem, 4.6vw, 2.1rem); margin-bottom: .4em; }
.aufgabe-text { color: var(--text-2); margin-bottom: 1.3em; }
.aufgabe.erledigt { border-color: var(--gruen); }
.aufgabe.offen-geblieben { border-color: var(--text-3); }

/* Die Stempel, die beim Wischen erscheinen */
.stempel {
  position: absolute; top: 26px; font-size: 1.5rem; font-weight: 900;
  letter-spacing: .04em; padding: 10px 22px; border-radius: 16px;
  border: 4px solid currentColor; opacity: 0; pointer-events: none; z-index: 3;
  transform: rotate(-14deg) scale(.7); transition: opacity .12s, transform .2s var(--feder);
}
.stempel.ja   { left: 26px;  color: var(--gruen); }
.stempel.nein { right: 26px; color: var(--pink); transform: rotate(14deg) scale(.7); }
.stempel.zeig { opacity: 1; transform: rotate(-9deg) scale(1); }
.stempel.nein.zeig { transform: rotate(9deg) scale(1); }

.wisch-hilfe {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 16px; font-size: .82rem; font-weight: 800; color: var(--text-3);
}
.wisch-hilfe span { display: inline-flex; align-items: center; gap: 7px; }
.wisch-hilfe .pfeil { font-size: 1.2rem; animation: winken 2s ease-in-out infinite; }
.wisch-hilfe .links .pfeil  { animation-delay: .3s; }
@keyframes winken {
  0%,100% { transform: translateX(0); opacity: .5; }
  50%     { transform: translateX(6px); opacity: 1; }
}
.wisch-hilfe .links .pfeil { animation-name: winkenLinks; }
@keyframes winkenLinks {
  0%,100% { transform: translateX(0); opacity: .5; }
  50%     { transform: translateX(-6px); opacity: 1; }
}

.marken { display: flex; gap: 9px; flex-wrap: wrap; margin: 0; align-items: center; }
.marke-klein {
  font-size: .8rem; font-weight: 800; color: var(--tinte);
  background: var(--gelb); border-radius: 99px; padding: 6px 15px;
  box-shadow: 0 4px 0 #c9a010;
}
.marke-klein:nth-child(2) { background: var(--cyan); box-shadow: 0 4px 0 #1a8db3; }

/* Schwierigkeit als Kugelreihe */
.balken { display: inline-flex; gap: 6px; align-items: center; }
.balken i {
  width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.16);
  transform: scale(0); animation: kugelAuf .5s var(--feder) forwards;
}
.balken i:nth-child(1) { animation-delay: .30s; }
.balken i:nth-child(2) { animation-delay: .40s; }
.balken i:nth-child(3) { animation-delay: .50s; }
.balken i:nth-child(4) { animation-delay: .60s; }
.balken i:nth-child(5) { animation-delay: .70s; }
.balken i.an { background: var(--orange); box-shadow: 0 0 14px rgba(255,138,61,.6); }
@keyframes kugelAuf { to { transform: scale(1); } }

.rueckmeldung { margin-top: 26px; }
.entscheidung { display: flex; gap: 14px; flex-wrap: wrap; }
.entscheidung .knopf { flex: 1 1 210px; }

.warum-nicht { margin-top: 22px; padding-top: 18px; border-top: 2px dashed rgba(255,255,255,.12); }
.warum-nicht summary {
  cursor: pointer; color: var(--text-2); font-size: .95rem; font-weight: 800;
  list-style: none; padding: 6px 0;
}
.warum-nicht summary::-webkit-details-marker { display: none; }
.warum-nicht summary::before {
  content: "\203A"; color: var(--gelb); margin-right: 10px; font-size: 1.3rem;
  display: inline-block; transition: transform .3s var(--feder);
}
.warum-nicht[open] summary::before { transform: rotate(90deg); }

/* Gründe als dicke Knöpfe */
.wahlen { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.wahl {
  display: inline-flex; align-items: center; gap: 0; cursor: pointer;
  border: 2px solid rgba(255,255,255,.16); border-radius: 99px;
  padding: 11px 20px; font-size: .92rem; font-weight: 800;
  background: rgba(255,255,255,.05); user-select: none;
  transition: all .3s var(--feder);
}
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--cyan); }
.wahl.an {
  background: var(--cyan); color: var(--tinte); border-color: var(--cyan);
  box-shadow: 0 5px 0 #1a8db3; transform: translateY(-2px);
}

.antwort {
  margin-top: 26px; padding: 30px;
  border: 3px solid rgba(255,255,255,.14); border-radius: var(--rund);
  background: var(--nacht-2); box-shadow: 0 8px 0 rgba(0,0,0,.35);
}
.antwort.gut { border-color: var(--gruen); box-shadow: 0 8px 0 #0b6b4c; }
.antwort .rat { color: var(--text-2); }

.ersatz {
  margin-top: 22px; padding: 26px 28px; border-radius: var(--rund);
  border: 3px dashed var(--orange); background: rgba(255,138,61,.09);
}
.ersatz h2 { margin: 0 0 .3em; font-size: 1.2rem; color: var(--orange); }
.ersatz p { color: var(--text-2); margin: 0; }
.mini-formular { margin-top: 20px; }

/* Verlauf als Perlenkette */
.verlauf { margin-top: 46px; padding-top: 24px; border-top: 2px dashed rgba(255,255,255,.10); }
.tage { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 12px; flex-wrap: wrap-reverse; }
.tag {
  font-size: .76rem; font-weight: 900; color: var(--text-3); cursor: pointer;
  border: 2px solid rgba(255,255,255,.14); border-radius: 16px;
  padding: 10px 13px; background: rgba(255,255,255,.05);
  transition: transform .35s var(--feder), border-color .25s, color .25s;
}
.tag:hover { transform: translateY(-7px) rotate(-4deg) scale(1.1); }
.tag.erledigt { border-color: var(--gruen); color: var(--gruen); background: rgba(34,224,161,.12); }
.tag.nicht_geschafft { border-color: rgba(255,255,255,.2); }

/* ================================================================
   Weg
   ================================================================ */
.etappen { list-style: none; padding: 0; margin: 0; }
.etappe {
  display: flex; gap: 20px; padding: 20px 16px; border-radius: var(--rund-s);
  transition: transform .35s var(--feder), background .25s; cursor: default;
}
.etappe:hover { background: rgba(255,255,255,.05); transform: translateX(8px); }
.etappe-nr {
  flex: 0 0 52px; height: 52px; border-radius: 18px;
  display: grid; place-items: center; font-weight: 900; font-size: 1.1rem;
  color: var(--text-3); background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.12);
  transition: transform .4s var(--feder);
}
.etappe:hover .etappe-nr { transform: rotate(-8deg) scale(1.08); }
.etappe.erreicht .etappe-nr {
  color: var(--tinte); background: var(--gruen); border-color: var(--gruen);
  box-shadow: 0 5px 0 #0b6b4c;
}
.etappe.laufend .etappe-nr {
  color: var(--tinte); background: var(--gelb); border-color: var(--gelb);
  box-shadow: 0 5px 0 #c9a010; animation: wippen 2.6s var(--feder) infinite;
}
@keyframes wippen {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-7deg); }
  75%     { transform: rotate(7deg); }
}
.etappe.offen { opacity: .45; }
.etappe h2 { margin: 0 0 .25em; font-size: 1.16rem; }
.etappe p { margin: 0 0 .3em; color: var(--text-2); font-size: .95rem; }

.zielbild { color: var(--text-2); border-left: 4px solid var(--lila); padding-left: 18px; }
.kriterium, .warum { font-size: .95rem; color: var(--text-2); }

/* ================================================================
   Spiegel
   ================================================================ */
.spiegel { text-align: center; }
.avatar { display: grid; place-items: center; margin: 26px 0 22px; }
.avatar-ring {
  --anteil: 0;
  width: 196px; height: 196px; border-radius: 50%; cursor: grab;
  display: grid; place-items: center; align-content: center; position: relative;
  background: conic-gradient(from -90deg,
    var(--gelb) 0%, var(--orange) calc(var(--anteil) * .5%),
    var(--pink) calc(var(--anteil) * 1%), rgba(255,255,255,.09) calc(var(--anteil) * 1%));
  animation: schweben 4.5s ease-in-out infinite;
  transition: transform .4s var(--feder);
}
.avatar-ring:hover { transform: scale(1.05); }
@keyframes schweben {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-14px) rotate(3deg); }
}
.avatar-ring::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: var(--nacht-2); border: 2px solid rgba(255,255,255,.1);
}
.avatar-zahl { position: relative; font-size: 3.6rem; font-weight: 900; line-height: 1;
  letter-spacing: -.05em; color: var(--gelb); }
.avatar-von { position: relative; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); font-weight: 900; }

.stufen { list-style: none; padding: 0; margin: 22px 0 0; text-align: left; }
.stufen li { padding: 13px 0; border-top: 2px dashed rgba(255,255,255,.1); font-size: .94rem; }
.stufen .klein { display: block; }

/* ================================================================
   Formulare
   ================================================================ */
.formular { display: grid; gap: 20px; margin-top: 22px; }
.formular.reihe { grid-template-columns: 1fr auto; align-items: end; }
.feld { display: grid; gap: 8px; }
.feld-name { font-size: .84rem; font-weight: 900; letter-spacing: .02em; color: var(--text-2); }
.pflicht { font-style: normal; font-size: .72rem; color: var(--text-3); font-weight: 700; }
.feld input, .feld select, .feld textarea {
  width: 100%; background: rgba(0,0,0,.32); color: var(--text);
  border: 2px solid rgba(255,255,255,.16); border-radius: var(--rund-s);
  padding: 14px 17px; font: inherit; font-size: 1rem; font-weight: 600;
  transition: all .3s var(--feder);
}
.feld textarea { resize: vertical; line-height: 1.55; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--gelb); background: rgba(0,0,0,.45);
  transform: translateY(-2px); box-shadow: 0 5px 0 rgba(201,160,16,.45);
}
.feld-hinweis { font-size: .84rem; color: var(--text-3); }
.ankreuz { display: flex; gap: 12px; align-items: flex-start; font-size: .91rem; color: var(--text-2); }
.ankreuz input { margin-top: 5px; width: 20px; height: 20px; accent-color: var(--lila); }

/* ================================================================
   Knöpfe: dicke Tasten, die sich eindrücken lassen
   ================================================================ */
.knopf {
  position: relative; display: inline-block; overflow: hidden;
  border: none; border-radius: 99px;
  background: var(--gelb); color: var(--tinte);
  padding: 15px 30px; font-family: inherit; font-size: 1rem; font-weight: 900;
  text-decoration: none; cursor: pointer; text-align: center;
  box-shadow: 0 6px 0 #c9a010;
  transition: transform .18s var(--feder), box-shadow .18s, background .25s;
  will-change: transform;
}
.knopf:hover { background: #ffdd66; color: var(--tinte); transform: translateY(-3px); box-shadow: 0 9px 0 #c9a010; }
.knopf:active, .knopf.gedrueckt { transform: translateY(6px); box-shadow: 0 0 0 #c9a010; }

.knopf.still {
  background: rgba(255,255,255,.10); color: var(--text);
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
}
.knopf.still:hover { background: rgba(255,255,255,.18); color: var(--text); box-shadow: 0 9px 0 rgba(0,0,0,.35); }
.knopf.still:active { box-shadow: 0 0 0; }
.knopf.breit { width: 100%; }
.knopf.gross { padding: 19px 34px; font-size: 1.1rem; }
.knopf.klein { padding: 10px 20px; font-size: .88rem; }
.knopf.gefahr { background: var(--pink); color: var(--tinte); box-shadow: 0 6px 0 #a32350; }
.knopf.gefahr:hover { background: #ff6b95; color: var(--tinte); }

/* Ja/Nein besonders fett */
.entscheidung .knopf[value="ja"]   { background: var(--gruen); box-shadow: 0 6px 0 #0b6b4c; }
.entscheidung .knopf[value="ja"]:hover { background: #4aeeb8; box-shadow: 0 9px 0 #0b6b4c; }
.entscheidung .knopf[value="nein"] { background: rgba(255,255,255,.10); color: var(--text); box-shadow: 0 6px 0 rgba(0,0,0,.35); }

/* ================================================================
   Meldungen
   ================================================================ */
.meldung { border-radius: var(--rund-s); padding: 15px 20px; margin: 0 0 20px;
  font-size: .94rem; font-weight: 700; border: 2px solid; }
.meldung.fehler { background: rgba(255,77,128,.14); border-color: var(--pink); }
.meldung.frage  { background: rgba(168,85,255,.14); border-color: var(--lila); }

.krise { border: 3px solid var(--orange); border-radius: var(--rund);
  padding: 24px 28px; margin: 24px 0; background: rgba(255,138,61,.1); }
.krise h2 { margin-top: 0; color: var(--orange); }
.stellen { padding-left: 20px; }
.stellen li { margin-bottom: .5em; }
.hervor { border-left: 4px solid var(--lila); padding-left: 20px; }

/* ================================================================
   Text und Tabellen
   ================================================================ */
.text h1 { margin-bottom: .3em; }
.text h2 { margin-top: 1.9em; padding-top: .9em; border-top: 2px dashed rgba(255,255,255,.1); }
.text ul { padding-left: 22px; }
.text li { margin-bottom: .4em; }

.daten { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem;
  display: block; overflow-x: auto; }
.daten thead th { text-align: left; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gelb); font-weight: 900; padding: 11px 14px;
  border-bottom: 2px solid rgba(255,255,255,.14); white-space: nowrap; }
.daten td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top; color: var(--text-2); }
.daten tbody tr { transition: background .2s; }
.daten tbody tr:hover { background: rgba(255,255,255,.05); }

/* ================================================================
   Fuss
   ================================================================ */
footer { padding: 30px 20px 40px; color: var(--text-3); font-size: .86rem;
  position: relative; z-index: 2; }
.fuss-inhalt { max-width: var(--breite); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.fuss-inhalt nav { display: flex; gap: 18px; flex-wrap: wrap; }
.fuss-inhalt a { color: var(--text-3); text-decoration: none; font-weight: 700; transition: color .2s; }
.fuss-inhalt a:hover { color: var(--gelb); }
.fuss-klein { max-width: var(--breite); margin: 16px auto 0; color: #524d78; font-size: .79rem; }

/* ================================================================
   Spruch: eine Karte, die man wegschnippen kann
   ================================================================ */
.spruch {
  position: relative; margin: 30px 0 0; padding: 24px 28px;
  cursor: grab; user-select: none; touch-action: pan-y;
  border: 3px solid var(--lila); border-radius: var(--rund);
  background: rgba(168,85,255,.12);
  box-shadow: 0 8px 0 #5c2c99;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .4s var(--feder), box-shadow .3s;
  will-change: transform;
}
.spruch:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 12px 0 #5c2c99; }
.spruch.gepackt { cursor: grabbing; transition: none; }
.spruch-text { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; color: var(--text);
  transition: opacity .2s, transform .2s; min-height: 1.5em; }
.spruch-text.weg { opacity: 0; transform: translateY(-12px) scale(.9); }
.spruch-hinweis { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: #c9a4ff; font-weight: 900; }   /* 8,11:1 statt 4,28:1 */

/* ================================================================
   Kleinkram
   ================================================================ */
[data-auf] { opacity: 0; transform: translateY(26px) scale(.96); }
[data-auf].da { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s var(--feder); }

.haken { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px;
  color: var(--gruen); overflow: visible; z-index: 4; }
.haken circle, .haken path { stroke-dasharray: 200; stroke-dashoffset: 200; }
.haken.los circle { animation: zeichnen .5s ease forwards; }
.haken.los path   { animation: zeichnen .4s .34s ease forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

.knopf.laedt { opacity: .7; pointer-events: none; }
.antwort { opacity: 0; transform: translateY(18px) scale(.96); }
.antwort.da { opacity: 1; transform: none; transition: opacity .5s, transform .6s var(--feder); }

.etappe-meldung {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 40px) scale(.8);
  background: var(--gelb); color: var(--tinte); font-weight: 900;
  border-radius: 99px; padding: 16px 32px; font-size: 1rem; z-index: 60;
  box-shadow: 0 8px 0 #c9a010, 0 22px 50px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .35s, transform .5s var(--feder);
  max-width: calc(100vw - 32px); text-align: center;
}
.etappe-meldung.da { opacity: 1; transform: translate(-50%, 0) scale(1); }

.funke { position: fixed; border-radius: 50%; z-index: 55; pointer-events: none;
  will-change: transform, opacity; }

/* ================================================================
   Klein
   ================================================================ */
@media (max-width: 620px) {
  body { font-size: 16px; }
  main { padding: 26px 15px 70px; }
  .karte { padding: 22px 19px; border-radius: 22px; }
  .aufgabe { padding: 28px 22px; border-radius: 26px; }
  .kopf { padding: 11px 15px; }
  .kopf-nav { gap: 3px; width: 100%; }
  .kopf-nav a { padding: 8px 12px; font-size: .86rem; }
  .formular.reihe { grid-template-columns: 1fr; }
  .held { padding: 26px 0 20px; }
  .avatar-ring { width: 168px; height: 168px; }
  .stempel { font-size: 1.2rem; padding: 8px 16px; }
}

/* ================================================================
   Wer keine Bewegung will
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before, .marke::before, .etappe.laufend .etappe-nr,
  .avatar-ring, .wiesen-hinweis::before, .wisch-hilfe .pfeil { animation: none !important; }
  [data-auf] { opacity: 1 !important; transform: none !important; }
  .balken i { animation: none; transform: scale(1); }
  .haken circle, .haken path { stroke-dashoffset: 0; animation: none; }
  .antwort { opacity: 1; transform: none; }
  .kachel:hover, .tag:hover, .spruch:hover, .etappe:hover,
  .knopf:hover, .wahl:hover, .avatar-ring:hover { transform: none; }
  #spielwiese { display: none; }
}

/* ================================================================
   SOZIALES NETZ UND SPIEL-MECHANIK
   ================================================================ */

/* Farbklassen, überall verwendbar */
.f-lila   { --f: var(--lila);   --fd: #5c2c99; }
.f-pink   { --f: var(--pink);   --fd: #a32350; }
.f-cyan   { --f: var(--cyan);   --fd: #1a8db3; }
.f-gruen  { --f: var(--gruen);  --fd: #0b6b4c; }
.f-gelb   { --f: var(--gelb);   --fd: #c9a010; }
.f-orange { --f: var(--orange); --fd: #b35111; }

/* ---------------- Spielleiste ---------------- */
.spielleiste {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 0 0 22px;
}
.sl-teil {
  display: grid; place-items: center; gap: 2px; text-decoration: none;
  padding: 14px 8px; border-radius: var(--rund-s);
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.10);
  color: var(--text); position: relative;
  transition: transform .3s var(--feder), border-color .25s, background .25s;
}
.sl-teil:hover { transform: translateY(-4px); border-color: var(--gelb); color: var(--text); }
.sl-zahl { font-size: 1.5rem; font-weight: 900; line-height: 1; color: var(--gelb); }
.sl-wort { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 900; color: var(--text-3); }
.sl-teil.heiss .sl-zahl { color: var(--orange); }
.sl-teil.neu { border-color: var(--pink); }
.sl-teil.neu .sl-zahl { color: var(--pink); }
.sl-teil.neu::after {
  content: ""; position: absolute; top: 8px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--pink);
  animation: blink 1.5s ease-in-out infinite;
}
.sl-balken { width: 100%; height: 5px; border-radius: 3px; margin-top: 5px;
  background: rgba(255,255,255,.12); overflow: hidden; }
.sl-balken i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gelb), var(--orange));
  transition: width .9s var(--weich); }

/* ---------------- Umschalter ---------------- */
.umschalter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; }
.umschalter a {
  flex: 0 0 auto; padding: 10px 18px; border-radius: 99px; text-decoration: none;
  font-weight: 800; font-size: .9rem; color: var(--text-2);
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.10);
  transition: all .3s var(--feder);
}
.umschalter a:hover { transform: translateY(-3px); color: var(--text); }
.umschalter a.an { background: var(--gelb); color: var(--tinte); border-color: var(--gelb);
  box-shadow: 0 4px 0 #c9a010; }

/* ---------------- Kopfbild ---------------- */
.kopfbild {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 15px;
  background: var(--f, var(--lila)); color: var(--tinte);
  font-weight: 900; font-size: .95rem; text-decoration: none;
  box-shadow: 0 4px 0 var(--fd, #5c2c99);
  transition: transform .3s var(--feder);
}
.kopfbild:hover { transform: rotate(-8deg) scale(1.08); color: var(--tinte); }
.kopfbild.gross { width: 68px; height: 68px; border-radius: 22px; font-size: 1.4rem;
  box-shadow: 0 6px 0 var(--fd, #5c2c99); }

/* ---------------- Beitrag ---------------- */
.strom { display: grid; gap: 20px; }
.beitrag {
  background: var(--nacht-2); border: 2px solid rgba(255,255,255,.10);
  border-radius: var(--rund); padding: 20px; box-shadow: 0 8px 0 rgba(0,0,0,.35);
}
.beitrag-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.beitrag-wer { flex: 1; display: grid; line-height: 1.3; }
.beitrag-wer a { text-decoration: none; color: var(--text); }
.marke-art { color: var(--gruen); font-weight: 900; }
.serie-klein {
  font-weight: 900; font-size: .85rem; color: var(--tinte); background: var(--orange);
  border-radius: 99px; padding: 4px 12px; box-shadow: 0 3px 0 #b35111;
}
.beitrag-buehne {
  border-radius: var(--rund-s); padding: 26px 22px; margin-bottom: 14px;
  background: linear-gradient(140deg, var(--f, var(--lila)), color-mix(in srgb, var(--f, var(--lila)) 45%, #14122e));
  box-shadow: 0 6px 0 var(--fd, #5c2c99);
}
.beitrag-gross { font-size: 1.3rem; font-weight: 900; line-height: 1.25;
  color: var(--tinte); margin: 0; letter-spacing: -.02em; }
.beitrag-ziel { margin: 8px 0 0; font-size: .84rem; font-weight: 800;
  color: rgba(20,18,46,.68); }
.beitrag-text { color: var(--text-2); margin: 0 0 14px; }

/* Reaktionen */
.reaktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.reakt {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.12); border-radius: 99px;
  padding: 8px 14px; font: inherit; font-size: .82rem; font-weight: 800;
  background: rgba(255,255,255,.05); color: var(--text-2);
  transition: all .28s var(--feder);
}
.reakt:hover { transform: translateY(-4px) rotate(-2deg); border-color: var(--f);
  color: var(--f); background: color-mix(in srgb, var(--f) 14%, transparent); }
.reakt.an { border-color: var(--f); color: var(--tinte); background: var(--f);
  box-shadow: 0 4px 0 var(--fd); }
.reakt-zeichen { font-size: 1rem; font-weight: 900; }
.zaehler { margin-left: auto; font-weight: 900; color: var(--gelb); font-size: 1.05rem; }
.beitrag-kommentare { display: inline-block; font-size: .86rem; font-weight: 800;
  color: var(--text-3); text-decoration: none; }
.beitrag-kommentare:hover { color: var(--cyan); }

/* ---------------- Schreiben ---------------- */
.schreiben textarea {
  width: 100%; background: rgba(0,0,0,.3); color: var(--text);
  border: 2px solid rgba(255,255,255,.14); border-radius: var(--rund-s);
  padding: 14px 16px; font: inherit; font-weight: 600; resize: vertical;
  transition: border-color .25s;
}
.schreiben textarea:focus { outline: none; border-color: var(--gelb); }
.schreiben-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.farbwahl { display: flex; gap: 8px; }
.farbe { width: 28px; height: 28px; border-radius: 10px; cursor: pointer;
  background: var(--f); box-shadow: 0 3px 0 var(--fd);
  transition: transform .3s var(--feder); }
.farbe:hover { transform: translateY(-4px) rotate(-8deg); }
.farbe input { position: absolute; opacity: 0; }
.farbe:has(input:checked) { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------------- Menschen ---------------- */
.menschen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.mensch {
  display: grid; justify-items: center; gap: 7px; text-align: center;
  padding: 18px 12px; border-radius: var(--rund-s);
  background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.10);
  transition: transform .3s var(--feder), border-color .25s;
}
.mensch:hover { transform: translateY(-5px); border-color: var(--cyan); }
.mensch a { text-decoration: none; color: var(--text); font-size: .92rem; }
.mensch .klein { font-size: .76rem; line-height: 1.35; }

/* ---------------- Profil ---------------- */
.profil-kopf { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.profil-kopf h1 { margin: 0; font-size: 1.7rem; }
.profil-ziel { font-size: 1.02rem; }
.zahlenreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 10px; margin: 18px 0; }
.zahlenreihe span { display: grid; place-items: center; gap: 2px;
  padding: 12px 6px; border-radius: var(--rund-s);
  background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.09);
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 900; color: var(--text-3); }
.zahlenreihe b { font-size: 1.35rem; color: var(--gelb); }
.stufenbalken { position: relative; height: 16px; border-radius: 99px;
  background: rgba(255,255,255,.12); margin: 6px 0 6px; overflow: hidden; }
.stufenbalken i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--gelb), var(--orange)); transition: width 1s var(--weich); }
/* Der Text steht UNTER dem Balken, nicht darauf. Weisse Schrift auf Gelb
   ergibt 1,44:1 und ist unlesbar - unter dem Balken sind es 8,45:1. */
.stufenbalken span { position: absolute; left: 0; top: 22px; font-size: .82rem;
  font-weight: 700; color: var(--text-2); white-space: nowrap; }
.stufenbalken { margin-bottom: 34px; }
.folgen-form { margin: 0; }

/* ---------------- Abzeichen ---------------- */
.abzeichen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.abz { display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 14px 8px; border-radius: var(--rund-s); font-size: .7rem; font-weight: 800;
  border: 2px solid; transition: transform .3s var(--feder); }
.abz b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
  font-size: 1rem; font-weight: 900; }
.abz.hat { border-color: var(--f); color: var(--text); background: color-mix(in srgb, var(--f) 12%, transparent); }
.abz.hat b { background: var(--f); color: var(--tinte); box-shadow: 0 4px 0 var(--fd); }
.abz.hat:hover { transform: translateY(-5px) rotate(-5deg); }
.abz.fehlt { border-color: rgba(255,255,255,.09); color: var(--text-3); opacity: .5; }
.abz.fehlt b { background: rgba(255,255,255,.09); color: var(--text-3); }

/* ---------------- Rangliste ---------------- */
.rang { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; }
.rang li { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: var(--rund-s); background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.08); transition: transform .3s var(--feder); }
.rang li:hover { transform: translateX(6px); }
.rang li.ich { border-color: var(--gelb); background: rgba(255,210,63,.12); }
.rang li a { text-decoration: none; color: var(--text); flex: 1; }
.platz { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px;
  font-weight: 900; background: rgba(255,255,255,.08); color: var(--text-3); font-size: .9rem; }
.platz.podest { color: var(--tinte); }
.platz.p1 { background: var(--gelb);   box-shadow: 0 3px 0 #c9a010; }
.platz.p2 { background: var(--cyan);   box-shadow: 0 3px 0 #1a8db3; }
.platz.p3 { background: var(--orange); box-shadow: 0 3px 0 #b35111; }
.rang-punkte { font-weight: 900; color: var(--gelb); }

/* ---------------- Kommentare und Meldungen ---------------- */
.kommentare, .meldungen { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.kommentare li, .meldungen li { display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--rund-s); background: rgba(255,255,255,.05); }
.kommentare li p { margin: 4px 0 0; color: var(--text-2); }
.kommentare li a, .meldungen li a { text-decoration: none; color: var(--text); }
.meldungen li.neu { border-left: 4px solid var(--pink); background: rgba(255,77,128,.09); }

.leer { text-align: center; }
.leer .gross { font-weight: 900; }

@media (max-width: 620px) {
  .spielleiste { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sl-teil { padding: 10px 4px; }
  .sl-zahl { font-size: 1.2rem; }
  .zahlenreihe { grid-template-columns: repeat(3, 1fr); }
  .beitrag-gross { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-teil:hover, .umschalter a:hover, .kopfbild:hover, .reakt:hover,
  .mensch:hover, .abz.hat:hover, .rang li:hover, .farbe:hover { transform: none; }
  .sl-teil.neu::after { animation: none; }
}