/* Rewired Profile — baut auf /site.css (Seite, Kopf, Fuß, Farben) und /test/kurztest.css
   (Karte, Knöpfe, Skala) auf; beide bindet index.html ein.
   Farbregel (Joel 15.10.): Türkis = positiv, Gelb = negativ, Weiß/Grau = neutral. */

.titel {
  font-family: var(--f-head); font-weight: 500; font-size: clamp(40px, 9vw, 60px); line-height: 1.04;
  letter-spacing: -0.02em; font-variation-settings: "opsz" 144; margin: 0 0 24px;
}
.kauf { margin-top: 18px; }
.rp-notiz { margin-top: 22px; font-size: 13px; color: var(--muted-fg); }
.wieder { margin-top: 40px; }
.klein-titel { font-size: clamp(36px, 9vw, 52px); margin-bottom: 18px; }
.frage.kurz { min-height: 0; }
.gewinn { color: var(--signal); }
.verlust { color: var(--gold); }

/* Zugang */
.code { margin-top: 28px; }
.label-text { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 8px; }
.code .feld { margin-top: 0; }
.code input { font-family: var(--f-mono); font-size: 15px; letter-spacing: .04em; }
.code .knopf.haupt { margin-top: 12px; }
.code .knopf[disabled] { opacity: .6; cursor: wait; }
.weiter-knopf { margin-top: 16px; }

/* Trading heute */
.gruppe-titel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); margin: 22px 0 10px; }
.auswahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.klein-stufe { min-height: 48px; font-size: 15px; }
[data-action="heute-weiter"][disabled] { opacity: .4; cursor: default; }

/* M1 · Münztisch — die Münze ist das eine Stück mit Glanz; alles drumherum bleibt still. */
.tisch {
  position: relative; border-radius: 22px; border: 1px solid var(--linie); padding: 16px 18px 18px;
  background: radial-gradient(120% 90% at 50% 0%, oklch(23% .02 200 / .9), var(--ink) 70%);
  overflow: hidden;
}
.tisch-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .06em;
  color: var(--muted-fg); margin: 0; text-transform: uppercase; }
.bank { font-size: 18px; color: var(--light); letter-spacing: 0; text-transform: none; transition: color .3s; font-variant-numeric: tabular-nums; }
.bank.gewinn { color: var(--signal); } .bank.verlust { color: var(--gold); }
.tisch-fuss { margin: 6px 0 0; text-align: center; font-size: 14px; color: var(--muted-fg); }

.muenze-buehne {
  position: relative; height: 280px; display: grid; place-items: end center; padding-bottom: 46px;
  perspective: 900px; -webkit-tap-highlight-color: transparent; outline: none; cursor: pointer;
}
.muenze-buehne.klein-buehne { height: 170px; padding-bottom: 30px; cursor: default; }
.muenze-buehne:focus-visible .muenze { outline: 2px solid var(--signal); outline-offset: 6px; border-radius: 50%; }
.flug { position: relative; z-index: 1; }
.muenze { position: relative; width: 128px; height: 128px; transform-style: preserve-3d; will-change: transform; }
.klein-buehne .muenze { width: 96px; height: 96px; }
.seite {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    radial-gradient(circle at 34% 28%, oklch(99% .004 262), oklch(86% .01 262) 38%, oklch(66% .014 262) 78%, oklch(52% .016 262));
  box-shadow: inset 0 0 0 5px oklch(100% 0 0 / .28), inset 0 0 0 7px oklch(30% .02 262 / .35),
              inset 0 -8px 16px oklch(25% .02 262 / .35), 0 2px 0 oklch(40% .015 262);
}
.seite { transform: translateZ(4.5px); }
.seite::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(125deg, transparent 30%, oklch(100% 0 0 / .32) 46%, transparent 58%); mix-blend-mode: soft-light; }
.rand { position: absolute; inset: 1px; border-radius: 50%;
  background: linear-gradient(90deg, oklch(42% .012 262), oklch(62% .012 262) 50%, oklch(40% .012 262)); }
.seite span { font-family: var(--f-head); font-style: italic; font-weight: 600; font-size: 58px; line-height: 1;
  color: oklch(34% .02 262); text-shadow: 0 1px 0 oklch(100% 0 0 / .65), 0 -1px 0 oklch(20% .02 262 / .35); }
.klein-buehne .seite span { font-size: 44px; }
.seite.rueck { transform: rotateX(180deg) translateZ(4.5px); }
.landung { position: absolute; bottom: 24px; left: 50%; width: 150px; height: 30px; margin-left: -75px; border-radius: 50%;
  border: 1.5px solid oklch(100% 0 0 / .35); opacity: 0; pointer-events: none; }
.seite.rueck span { font-family: var(--f-mono); font-style: normal; font-weight: 500; }
.schatten {
  position: absolute; bottom: 30px; left: 50%; width: 120px; height: 18px; margin-left: -60px; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0% 0 0 / .75), transparent); opacity: .55;
}
.klein-buehne .schatten { bottom: 18px; width: 90px; margin-left: -45px; }
.flug.ruht { animation: schweben 3.2s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-6px); } }
.wurf-ergebnis { position: absolute; top: 18px; left: 0; right: 0; margin: 0; text-align: center; font-size: 22px; font-weight: 600;
  opacity: 0; color: var(--light); font-variant-numeric: tabular-nums; }
.wurf-ergebnis.an { opacity: 1; }
.wurf-ergebnis.gewinn { color: var(--signal); } .wurf-ergebnis.verlust { color: var(--gold); }
.wurf-ergebnis.ende { font-family: var(--f-head); font-weight: 500; font-size: 18px; line-height: 1.3; padding: 0 14px; }
.muenze-buehne .flug { transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.muenze-buehne.fertig .flug { transform: translateY(26px) scale(.72); }
.spur { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.spur i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--linie-stark); }
.spur i.w { background: var(--signal); border-color: var(--signal); }
.spur i.l { background: var(--gold); border-color: var(--gold); }
.wurf-knopf { margin-top: 16px; }

.angebot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.angebot-seite { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px;
  background: oklch(100% 0 0 / .03); border: 1px solid var(--linie); }
.angebot-seite span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); }
.angebot-seite b { font-family: var(--f-head); font-size: 34px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; display: inline-block; }
.wette-frage { margin-top: 18px; }

.stimmung { margin-top: 18px; }
.stimmung-frage { margin: 0 0 12px; text-align: center; font-family: var(--f-head); font-weight: 500; font-size: 20px; line-height: 1.3; }
/* Stimmung als Leiste: gelb (schlecht) … neutral … türkis (gut), sieben Punkte darauf */
.stimmung-skala { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 4px 0; }
.stimmung-skala::before { content: ""; position: absolute; left: 7%; right: 7%; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--frost) 50%, var(--signal)); opacity: .55; }
.mood {
  position: relative; justify-self: center; width: 100%; max-width: 42px; aspect-ratio: 1; height: auto; padding: 0; border-radius: 50%; border: 1.5px solid var(--linie-stark);
  background: var(--panel); font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, transform .18s cubic-bezier(.2,.8,.3,1.4), box-shadow .2s;
}
.mood:nth-child(-n+3) { color: color-mix(in oklab, var(--gold) 85%, var(--light)); }
.mood:nth-child(n+5) { color: color-mix(in oklab, var(--signal) 85%, var(--light)); }
.mood:active { transform: scale(.9); }
.mood[aria-checked="true"] { transform: scale(1.18); background: var(--light); color: var(--ink); border-color: var(--light);
  box-shadow: 0 0 0 6px oklch(100% 0 0 / .08); }
.mood:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (hover: hover) { .mood:hover { border-color: var(--muted-fg); } }
.stimmung-enden { display: flex; justify-content: space-between; margin: 8px 2px 0; font-size: 12px; color: var(--muted-fg); }

/* M5 · Die Session */
.hud { display: flex; justify-content: space-between; align-items: flex-end; }
.hud-pnl { display: flex; flex-direction: column; gap: 2px; }
.hud-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); }
.pnl { font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; transition: color .3s; }
.hud-setup { font-size: 13px; color: var(--muted-fg); }
.limit-leiste { margin: 14px 0 16px; }
.limit-spur { position: relative; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--gold) 55%, transparent) 0 3px, var(--frost) 3px); }
.limit-null { position: absolute; top: -3px; width: 1px; height: 12px; background: var(--muted-fg); }
.limit-punkt { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--light); box-shadow: 0 0 0 3px var(--panel); transition: left .5s cubic-bezier(.3,.7,.3,1); }
.limit-leiste.nah .limit-punkt { background: var(--gold); animation: puls 1.1s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 3px var(--panel), 0 0 0 9px color-mix(in oklab, var(--gold) 30%, transparent); } }
.limit-text { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 11px; color: var(--muted-fg); }

.chart-karte { position: relative; border-radius: 18px; border: 1px solid var(--linie); background: var(--ink); padding: 12px 12px 10px; }
.chart-kopf { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.note-a { color: var(--light); } .note-b { color: var(--muted-fg); }
.setup-richtung { color: var(--muted-fg); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.ch-gitter { stroke: var(--frost); stroke-width: 1; }
.ch-entry { stroke: var(--muted-fg); stroke-dasharray: 3 4; stroke-width: 1; }
.ch-ziel { stroke: var(--signal); stroke-width: 1.2; opacity: .8; }
.ch-stop { stroke: var(--gold); stroke-width: 1.2; opacity: .8; }
.ch-text { font-family: var(--f-mono); font-size: 11px; }
.ch-text.gewinn { fill: var(--signal); } .ch-text.verlust { fill: var(--gold); }
.ch-alt { fill: none; stroke: var(--muted-fg); stroke-width: 1.6; stroke-linejoin: round; }
.ch-neu { fill: none; stroke: var(--light); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  }
.ch-neu.aus { stroke: var(--muted-fg); stroke-width: 1.4; opacity: .7; }
.ch-kopf { fill: var(--light); }
.ch-halo { fill: var(--light); opacity: .18; transform-box: fill-box; transform-origin: center; animation: halo 1.2s ease-in-out infinite; }
@keyframes halo { 50% { opacity: .05; transform: scale(1.5); } }
.ch-zone-ziel { fill: var(--signal); opacity: .12; }
.ch-zone-stop { fill: var(--gold); opacity: .14; }
.chart-abzeichen { position: absolute; top: 40px; left: 18px; margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 18px; font-weight: 600;
  opacity: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.chart-abzeichen.an { opacity: 1; }
.chart-abzeichen.gewinn { color: var(--ink); background: var(--signal); box-shadow: 0 0 30px color-mix(in oklab, var(--signal) 45%, transparent); }
.chart-abzeichen.verlust { color: var(--ink); background: var(--gold); box-shadow: 0 0 30px color-mix(in oklab, var(--gold) 45%, transparent); }
.chart-abzeichen.dim { color: var(--muted-fg); background: var(--frost); }
.serie { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.chart-ergebnis { min-height: 2.9em; margin: 6px 2px 0; font-size: 13px; opacity: 0; }
.chart-ergebnis.an { opacity: 1; }
.chart-ergebnis.dim { color: var(--muted-fg); }
.chart-karte.ende { padding: 26px 20px; }
.chart-karte.ende .chart, .chart-karte.ende .chart-kopf { display: none; }
.chart-karte.ende .chart-ergebnis { font-family: var(--f-head); font-size: 22px; line-height: 1.3; margin: 0; }
.chart-karte.blitz-gewinn { animation: blitz-g .7s ease-out; }
.chart-karte.blitz-verlust { animation: blitz-v .7s ease-out; }
@keyframes blitz-g { from { box-shadow: 0 0 0 1px var(--signal), 0 0 40px color-mix(in oklab, var(--signal) 30%, transparent); } }
@keyframes blitz-v { from { box-shadow: 0 0 0 1px var(--gold), 0 0 40px color-mix(in oklab, var(--gold) 30%, transparent); } }
.chart-karte.bruch { border-color: var(--gold); animation: bruch .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes bruch { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.plan { margin: 12px 0 0; }
.plan b { color: var(--light); font-weight: 600; }
.plan b.verlust { color: var(--gold); }
.groessen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.groessen .knopf.haupt { grid-column: 1 / -1; margin-top: 0; }
.chip {
  min-height: 52px; border-radius: 14px; border: 1px solid var(--linie-stark); background: var(--ink); font-size: 15px;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s, opacity .2s; -webkit-tap-highlight-color: transparent;
}
.chip:first-child { color: var(--muted-fg); }
.chip:active { transform: scale(.95); }
.chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.chip[disabled] { opacity: .35; cursor: default; }
.chip.gewaehlt { opacity: 1; background: var(--frost); border-color: var(--light); color: var(--light); }
@media (hover: hover) { .chip:not([disabled]):hover { border-color: var(--muted-fg); } }
.tag-ende { display: block; margin: 14px auto 0; }
.kurz-lead { margin: -14px 0 18px; }

/* Ergebnis · die zwei Messungen */
.mess { margin-top: 14px; padding: 22px 20px; border-radius: var(--radius); background: var(--ink); border: 1px solid var(--linie); }
.mess .label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); margin: 0 0 6px; }
.mess-zahl { font-family: var(--f-body); font-weight: 600; font-size: clamp(64px, 18vw, 92px); line-height: 1; letter-spacing: -.02em;
  margin: 4px 0 10px; font-variant-numeric: lining-nums tabular-nums; }
.mess-satz { font-family: var(--f-head); font-weight: 500; font-size: 21px; line-height: 1.3; margin: 10px 0 0; text-wrap: pretty; }
.mess-notiz { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted-fg); }
.mess .split { font-family: var(--f-mono); font-size: 12px; }
.ausloeser-top { display: grid; gap: 18px; margin-top: 18px; }
.regel { margin: 8px 0 0; padding: 10px 12px; border-left: 2px solid var(--signal); font-size: 15px; line-height: 1.45; font-style: italic; }
.ausloeser-rest { margin-top: 18px; }
.ausloeser-rest summary { cursor: pointer; font-size: 12px; letter-spacing: .06em; color: var(--muted-fg); }
.ausloeser-liste { display: grid; gap: 12px; margin-top: 12px; }
.warum { margin-top: 14px; }
.ergebnis .typ { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .flug.ruht, .limit-leiste.nah .limit-punkt, .chart-karte.bruch, .chart-karte.blitz-gewinn, .chart-karte.blitz-verlust { animation: none; }
  .limit-punkt { transition: none; }
}

/* M2 */
.wahl.hoch .knopf { flex-direction: column; min-height: 110px; gap: 4px; }
.betrag { font-family: var(--f-head); font-size: 34px; font-weight: 600; line-height: 1; }
.wann { font-size: 14px; color: var(--muted-fg); }

/* M3 · Go/No-Go */
.gng-feld {
  position: relative; height: min(62vh, 460px); margin-top: 4vh; border-radius: 24px;
  border: 1px solid var(--linie); background: var(--ink); display: grid; place-items: center;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.gng-punkt { width: 140px; height: 140px; border-radius: 50%; background: transparent; transition: transform .08s; }
.gng-punkt.an.los { background: var(--signal); box-shadow: 0 0 60px oklch(80% 0.105 178 / .45); }
.gng-punkt.an.stopp { background: var(--gold); box-shadow: 0 0 60px oklch(80% 0.120 85 / .45); }
.gng-punkt.getippt { transform: scale(.9); }
.gng-status { position: absolute; font-size: 44px; color: var(--muted-fg); }
.gng-hinweis { text-align: center; }

/* M4 */
.quiz-wahl { grid-template-columns: 1fr; }
.knopf.gewaehlt { border-color: var(--light); background: var(--frost); }
.sicher-skala { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.knopf.prozent { min-height: 50px; font-size: 15px; }
.sicher .klein { margin-top: 10px; }

/* Ergebnis */
.ergebnis .profil { margin-top: 28px; }
.lesen { margin-top: 14px; font-size: 12px; letter-spacing: .06em; color: var(--muted-fg); }
.abschnitt {
  font-family: var(--f-head); font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -.01em;
  margin: 56px 0 12px; padding-top: 28px; border-top: 1px solid var(--frost); display: flex; align-items: baseline; gap: 12px;
}
.abschnitt .nr { font-size: 13px; color: var(--muted-fg); font-weight: 400; }
.zahlen { display: grid; gap: 10px; }
.zahl { padding: 18px 20px; border-radius: var(--radius); background: var(--ink); border: 1px solid var(--linie); }
.zahl-satz { font-family: var(--f-head); font-weight: 500; font-size: 21px; line-height: 1.3; }
.zahl-notiz { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted-fg); }

.netz-bild { margin: 18px auto 6px; max-width: 420px; }
.netz-bild svg { display: block; width: 100%; height: auto; overflow: visible; }
.netz-ring { fill: none; stroke: var(--frost); stroke-width: 1; }
.netz-typ { fill: none; stroke: var(--muted-fg); stroke-width: 1.2; stroke-dasharray: 4 4; }
.netz-du { fill: oklch(91% 0.006 262 / .14); stroke: var(--light); stroke-width: 2; stroke-linejoin: round; }
.netz-punkt { fill: var(--light); }
.netz-text { fill: var(--muted-fg); font-family: var(--f-body); font-size: 11px; }
.achsen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 8px; }
.achse { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--frost); font-size: 15px; }
.achse-wert { color: var(--muted-fg); font-size: 13px; }
.netz-legende { font-size: 12px; color: var(--muted-fg); }

.fallen { display: grid; gap: 14px; margin-top: 18px; }
.falle-kopf { display: flex; justify-content: space-between; font-size: 16px; }
.falle-kopf { gap: 12px; }
.falle-wert { font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
.falle-balken { height: 6px; border-radius: 3px; background: var(--frost); margin-top: 6px; overflow: hidden; }
.falle-balken div { height: 100%; border-radius: 3px; background: var(--muted-fg); }
.falle-zeile.top .falle-name { font-weight: 600; }
.falle-zeile.top .falle-balken div { background: var(--gold); }
.falle-zeile.top .falle-wert { color: var(--gold); }
.falle-moment { font-size: 13px; color: var(--muted-fg); margin-top: 5px; }

.aha { font-family: var(--f-head); font-weight: 500; font-size: 24px; line-height: 1.3; margin: 8px 0 18px; }
.kompass-typ { display: grid; gap: 10px; }
.kompass { margin: 22px 0 14px; }
.legende { display: flex; gap: 18px; font-size: 11px; letter-spacing: .06em; color: var(--muted-fg); }
.legende i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.l-suits, .b-suits { background: var(--light); }
.l-prot, .b-prot { background: var(--signal); }
.dim .gruppe-titel { margin-top: 18px; }
.stil { display: grid; grid-template-columns: 9.5em 1fr 4.6em; gap: 12px; align-items: center; padding: 5px 0; font-size: 14px; }
.stil-balken { display: grid; gap: 3px; }
.stil-balken div { height: 5px; border-radius: 3px; min-width: 2px; }
.stil-wert { font-size: 11px; text-align: right; display: flex; justify-content: flex-end; gap: 8px; }
.w-suits { color: var(--light); } .w-prot { color: var(--signal); }

.werkzeug { display: grid; gap: 10px; }
.werkzeug .karte .label { color: var(--signal); }
.grenzen { padding-left: 18px; list-style: disc; color: var(--muted-fg); font-size: 15px; display: grid; gap: 8px; }
.grenzen b { color: var(--light); font-weight: 600; }
.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
.aktionen .knopf.haupt { margin-top: 0; }
.rechtlich { margin-top: 18px; }
.ergebnis .zurueck { margin-top: 18px; }

@media (max-width: 420px) {
  .auswahl, .achsen { grid-template-columns: 1fr; }
  .stil { grid-template-columns: 8em 1fr 4.2em; font-size: 13px; }
}

/* PDF: dieselbe Seite, ohne Knöpfe, dunkel lassen */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { background: var(--ink) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header, footer, .kt-fortschritt, .aktionen, .zurueck, .rechtlich a, .wieder { display: none !important; }
  main section { padding: 0 !important; }
  main section > div { max-width: none !important; }
  .kt { border: 0; padding: 0; background: none; }
  .screen { animation: none; }
  .abschnitt { break-after: avoid; }
  .karte, .zahl, .falle-zeile, .stil, .dim, .netz-bild, .mess { break-inside: avoid; }
  .ausloeser-rest > div { display: grid !important; }
}
.hinweis-oben { margin: -8px 0 18px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); }

/* ── Feinschliff 20.10.: Reise-Leiste, Haken, Profil gebaut, Ergebnis-Ende ── */
.reise { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; list-style: none; margin: 0 0 26px; padding: 0; }
.reise li { display: grid; gap: 7px; font-size: 10px; letter-spacing: .04em; color: var(--muted-fg); min-width: 0; }
.reise li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reise i { height: 4px; border-radius: 2px; background: var(--frost); }
.reise li.fertig i { background: var(--signal); }
.reise li.jetzt i { background: var(--light); }
.reise li.jetzt { color: var(--light); }
@media (max-width: 420px) { .reise li span { display: none; } .reise li.jetzt span { display: block; overflow: visible; } }
.teil-haken { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--signal) 12%, transparent); color: var(--signal); font-size: 14px; }
.teil-haken i, .gebaut-liste i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--signal); position: relative; }
.teil-haken i::after, .gebaut-liste i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.screen:not([hidden]) .teil-haken { animation: haken .45s cubic-bezier(.2,.8,.3,1.3) .1s both; }
@keyframes haken { from { opacity: 0; transform: scale(.85); } }

.gebaut-liste { list-style: none; margin: 22px 0 8px; padding: 0; display: grid; gap: 2px; }
.gebaut-liste li { display: grid; grid-template-columns: 18px 3.2em 1fr; gap: 12px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--frost); font-size: 16px; animation: zeile .35s ease-out both; }
.gebaut-liste b { font-size: 15px; text-align: right; color: var(--light); font-variant-numeric: tabular-nums; }
@keyframes zeile { from { opacity: 0; transform: translateX(-8px); } }

.mess-zahl.angekommen { animation: angekommen .6s ease-out; }
@keyframes angekommen { 40% { text-shadow: 0 0 34px color-mix(in oklab, var(--gold) 60%, transparent); } }
.ende-satz { margin: 18px 0 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--light);
  font-family: var(--f-head); font-weight: 500; font-size: 20px; line-height: 1.35; text-wrap: pretty; }
.gefuehl { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--light); }

.regeln-karte, .erinnerung { margin-top: 48px; padding: 26px 22px; border-radius: 20px; border: 1px solid var(--linie);
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--signal) 10%, transparent), var(--ink) 60%); }
.erinnerung { margin-top: 14px; background: var(--ink); }
.regeln-titel { font-family: var(--f-head); font-weight: 500; font-size: 28px; line-height: 1.15; margin: 0 0 8px; text-wrap: balance; }
.regeln-text { font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.regeln { list-style: none; counter-reset: regel; margin: 0; padding: 0; display: grid; gap: 0; }
.regeln li { counter-increment: regel; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 4px; padding: 16px 0; border-top: 1px solid var(--frost); }
.regeln li::before { content: counter(regel); grid-row: span 2; font-family: var(--f-head); font-size: 30px; line-height: 1; color: var(--signal); }
.regel-wann { font-size: 11px; letter-spacing: .06em; color: var(--muted-fg); }
.regel-satz { font-family: var(--f-head); font-size: 19px; line-height: 1.35; }
.regeln-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.regeln-knoepfe .knopf { min-height: 48px; font-size: 15px; }
.regeln-status:empty { display: none; }
@media (max-width: 420px) { .regeln-knoepfe { grid-template-columns: 1fr; } }
.erinnern .feld { margin-top: 0; }
.haken-zeile { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 4px; font-size: 14px; line-height: 1.45; color: var(--muted-fg); cursor: pointer; }
.haken-zeile input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--signal); }
.erinnert { margin: 0; padding: 14px 16px; border-radius: 14px; background: color-mix(in oklab, var(--signal) 12%, transparent); color: var(--signal); }
.kalender { background: none; border: 0; cursor: pointer; width: 100%; font: inherit; }

/* Feinheiten an den Aufgaben */
.gng-punkt.an { animation: auf .12s ease-out; }
@keyframes auf { from { transform: scale(.82); } }
.gng-punkt.getippt { box-shadow: 0 0 0 14px oklch(100% 0 0 / .06), 0 0 60px oklch(80% 0.105 178 / .45); }
.gng-status { font-family: var(--f-head); font-size: 64px; color: var(--light); }
.wahl.hoch .knopf { transition: background .15s, border-color .15s, transform .12s; }
.wahl.hoch .knopf:active { transform: scale(.97); border-color: var(--light); }
.angebot-seite b { transition: color .2s; }
.stufe { transition: background .15s, border-color .15s, transform .1s; }
.stufe:active { transform: scale(.99); }
.stufe[aria-checked="true"] .marke::after { animation: marke .2s cubic-bezier(.2,.8,.3,1.4); }
@keyframes marke { from { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
  .ch-halo, .teil-haken, .gebaut-liste li, .mess-zahl.angekommen, .gng-punkt.an, .stufe[aria-checked="true"] .marke::after { animation: none !important; }
}
@media print { .regeln-knoepfe, .erinnerung, .regeln-status { display: none !important; } .regeln-karte { break-inside: avoid; } }