/* Dashboard (Karte), Medaillen-Vitrine und Zeremonie. Farben und Schriften kommen aus basis.css (CSS-Variablen),
   die Farben der Marke stehen in basis.css. Keine fremden Inhalte, kein Inline-Stil. */

:root {
  --k-grund: var(--grund, #0A0A0F);
  --k-grund2: var(--grund2, #0E0E15);
  --k-text: var(--text, #F4F3F0);
  --k-gedaempft: var(--text-leise, rgba(244, 243, 240, .66));
  --k-linie: var(--linie, rgba(244, 243, 240, .1));
  --k-signal: var(--signal);
  --k-signal2: var(--signal2);
  --k-signal3: var(--signal3);
  --k-kopf: var(--schrift-kopf, 'Space Grotesk', system-ui, sans-serif);
  --k-fliess: var(--schrift-text, 'Inter', system-ui, sans-serif);
  --k-fl: rgba(244, 243, 240, .045);
  --k-fl2: rgba(244, 243, 240, .075);
  --k-ease: cubic-bezier(.16, 1, .3, 1);
}

.kd, .vt, .zr, .md-blatt { font-family: var(--k-fliess); color: var(--k-text); }
.kd *, .vt *, .zr *, .md-blatt * { box-sizing: border-box; }

/* ---------- Kopf, gleich in jeder Ansicht ---------- */
.kd, .vt { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding: 20px max(var(--rand), env(safe-area-inset-right)) 56px max(var(--rand), env(safe-area-inset-left)); }
.kd > .kd-box:not(.kd-raster *) { margin-bottom: var(--luecke); }
.kd-kopf { display: grid; gap: 6px; margin-bottom: var(--luecke); }
.kd-kicker { font: 600 12px/1 var(--k-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--k-signal3); }
.kd-titel { margin: 0; font: 700 clamp(30px, 6vw, 44px)/1.05 var(--k-kopf); letter-spacing: -.02em; }
.kd-satz { margin: 0; font-size: 16px; line-height: 1.5; color: var(--k-gedaempft); }

/* ---------- Raster ---------- */
.kd-raster { display: grid; gap: var(--luecke); }
.kd-unten { display: grid; gap: var(--luecke); margin-top: var(--luecke); }
.kd-spalte { display: contents; }
.kd-hebel { order: 1; } .kd-letzte { order: 2; } .kd-naechste { order: 3; } .kd-weiter { order: 4; }
@media (max-width: 559px) { .kd-datum { display: none; } .kd-zeile { grid-template-columns: 64px minmax(0, 1fr); } }
@media (min-width: 1000px) {
  .kd-raster { grid-template-columns: 340px minmax(0, 1fr); gap: var(--luecke); align-items: stretch; }
  .kd-unten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luecke); margin-top: var(--luecke); }
  .kd-spalte { display: flex; flex-direction: column; gap: var(--luecke); }
  .kd-spalte > :last-child { flex: 1; }
}

.kd-box { position: relative; background: var(--k-fl); border: 1px solid var(--k-linie); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kd-box-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kd-box-titel { margin: 0; font: 600 12px/1.2 var(--k-kopf); letter-spacing: .16em; text-transform: uppercase; color: var(--k-gedaempft); }
.kd-link { color: var(--k-signal3); font: 600 14px/1.2 var(--k-fliess); text-decoration: none; white-space: nowrap; padding: 12px 0; }
.kd-link:hover { text-decoration: underline; }

/* ---------- Bühne und Karte ---------- */
.kk-buehne { display: grid; justify-items: center; align-content: start; gap: 10px; }
.kk-bildunter { margin: 0; font-size: 14px; line-height: 1.4; color: var(--k-gedaempft); text-align: center; }

.kk {
  --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 18%; --sx: 40%; --w: 0deg; --glanz: .3;
  --kb: min(380px, calc(100vw - 2 * var(--rand)), max(240px, calc(52vh * .6786))); --e: calc(var(--kb) / 380);
  position: relative; width: var(--kb); aspect-ratio: 380 / 560; perspective: 900px;
  -webkit-tap-highlight-color: transparent; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.kk-schatten { position: absolute; inset: 10% 4% -2%; background: radial-gradient(closest-side, var(--kk-leucht), transparent); filter: blur(34px); opacity: .5; z-index: 0; pointer-events: none; }
.kk-dreh { position: absolute; inset: 0; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s var(--k-ease); will-change: transform; animation: kk-rein 1s var(--k-ease) backwards; }
.kk.ist-aktiv .kk-dreh { transition: transform .1s linear; }
@keyframes kk-rein { from { opacity: 0; transform: translateY(26px) rotateY(-16deg) scale(.93); } to { opacity: 1; transform: translateY(0) rotateY(0) scale(1); } }

.kk-form { position: absolute; inset: 0; background: var(--kk-rahmen); clip-path: polygon(0 0, calc(100% - 46 * var(--e)) 0, 100% calc(46 * var(--e)), 100% 100%, calc(46 * var(--e)) 100%, 0 calc(100% - 46 * var(--e))); }
.kk-innen { position: absolute; inset: 3px; overflow: hidden; background: var(--kk-flaeche); clip-path: polygon(0 0, calc(100% - 44 * var(--e)) 0, 100% calc(44 * var(--e)), 100% 100%, calc(44 * var(--e)) 100%, 0 calc(100% - 44 * var(--e))); }
.kk-muster { position: absolute; inset: 0; background:
  linear-gradient(118deg, transparent 0 56%, var(--kk-band) 56% 57.500%, transparent 57.500% 61%, var(--kk-band) 61% 62%, transparent 62%),
  repeating-linear-gradient(118deg, var(--kk-fein) 0 1px, transparent 1px 9px); }
.kk-licht { position: absolute; inset: 0; background: radial-gradient(120% 70% at 18% 0%, var(--kk-oben), transparent 60%), radial-gradient(90% 50% at 90% 100%, var(--kk-unten), transparent 60%); }
.kk-holo { position: absolute; inset: -30%; background: conic-gradient(from var(--w) at 50% 45%, var(--signal3), #0A0A0F 12%, var(--signal) 26%, var(--signal-hell) 38%, #0A0A0F 50%, var(--signal2) 64%, #0A0A0F 76%, var(--signal3) 100%); mix-blend-mode: screen; opacity: .22; display: none; }
.kk-glanz { position: absolute; inset: 0; pointer-events: none; opacity: var(--glanz); transition: opacity .5s; mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .3), transparent 42%),
    linear-gradient(115deg, transparent calc(var(--sx) - 14%), rgba(255, 255, 255, .13) var(--sx), transparent calc(var(--sx) + 14%)); }
.kk.ist-aktiv { --glanz: 1; }

.kk-inhalt { position: absolute; inset: 0; padding: calc(22 * var(--e)) calc(22 * var(--e)) calc(20 * var(--e)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--kk-text); }
.kk-oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kk-zahl { font: 700 max(64px, calc(88 * var(--e)))/.86 var(--k-kopf); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px var(--kk-leucht); }
.kk-klein { display: block; margin-top: 8px; font: 600 max(10px, calc(11 * var(--e)))/1 var(--k-kopf); letter-spacing: .2em; text-transform: uppercase; opacity: 1; }
.kk-stufe { display: inline-block; margin-top: 6px; font: 700 max(12px, calc(14 * var(--e)))/1 var(--k-kopf); letter-spacing: .22em; text-transform: uppercase; color: var(--kk-akzent); }
.kk-rechts { text-align: right; padding-top: 4px; display: grid; gap: 10px; justify-items: end; }
.kk-marke { font: 700 max(11px, calc(13 * var(--e)))/1 var(--k-kopf); letter-spacing: .26em; text-transform: uppercase; opacity: .9; }
.kk-note { display: grid; justify-items: end; gap: 6px; }
.kk-note b { font: 700 max(32px, calc(42 * var(--e)))/.9 var(--k-kopf); letter-spacing: -.02em; color: var(--kk-akzent); }

/* Das Feld hält die Höhe, das Netz liegt absolut darin: Safari löst height: 100% in der Rasterzeile sonst nicht auf und das Netz rutscht über den Namen */
.kk-netzfeld { position: relative; width: 100%; min-height: 0; }
.kk-netz { position: absolute; inset: 0; width: calc(100% - 12 * var(--e)); height: 100%; margin-inline: auto; display: block; overflow: visible; }
.kk-ring { fill: none; stroke: var(--kk-gitter); stroke-width: 1; }
.kk-achse { stroke: var(--kk-gitter); stroke-width: 1; }
.kk-st1 { stop-color: var(--kk-netz1); }
.kk-st2 { stop-color: var(--kk-netz2); }
.kk-flaeche { fill: url(#kk-verlauf); stroke: var(--kk-netzlinie); stroke-width: 2.500; stroke-linejoin: round; transform-origin: 170px 150px; animation: kk-netz 1.100s var(--k-ease) .35s backwards; filter: drop-shadow(0 0 10px var(--kk-leucht)); }
@keyframes kk-netz { from { transform: scale(.04); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kk-halo { fill: var(--kk-netzlinie); opacity: .25; transform-box: fill-box; transform-origin: center; animation: kk-punkt .6s var(--k-ease) 1.2s backwards; }
.kk-punkt { fill: #fff; stroke: var(--kk-netzlinie); stroke-width: 2.500; transform-box: fill-box; transform-origin: center; animation: kk-punkt .6s var(--k-ease) 1.2s backwards; }
@keyframes kk-punkt { from { transform: scale(0); } 60% { transform: scale(1.6); } to { transform: scale(1); } }
.kk-bez { font: 600 15px/1 var(--k-kopf); letter-spacing: .06em; text-transform: uppercase; fill: var(--kk-text); opacity: .78; }
.kk-wert { font: 700 23px/1 var(--k-kopf); fill: var(--kk-text); font-variant-numeric: tabular-nums; }
@media (max-width: 340px) { .kk-bez { font-size: 17px; } }

.kk-unten { display: grid; gap: 4px; padding-left: calc(10 * var(--e)); }
.kk-name { font: 700 max(22px, calc(28 * var(--e)))/1.1 var(--k-kopf); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-trenner { height: 2px; margin: 0 0 12px; background: linear-gradient(90deg, var(--kk-akzent), transparent 80%); opacity: .8; }

/* Materialien: Stufe über data-stufe */
.kk[data-stufe="bronze"] {
  --kk-rahmen: linear-gradient(135deg, #F6C397 0%, #8E4C22 38%, #E8AB78 62%, #7A3F1A 100%);
  --kk-flaeche: linear-gradient(165deg, #5C2F16 0%, #3A1D0E 50%, #25120A 100%);
  --kk-oben: rgba(255, 190, 130, .32); --kk-unten: rgba(255, 120, 60, .16); --kk-band: rgba(255, 200, 150, .06); --kk-fein: rgba(255, 210, 170, .035);
  --kk-text: #FFE9D4; --kk-akzent: #FFC38F; --kk-leucht: rgba(255, 140, 70, .55);
  --kk-netz1: rgba(255, 196, 140, .62); --kk-netz2: rgba(255, 140, 70, .2); --kk-netzlinie: #FFCF9F; --kk-gitter: rgba(255, 215, 180, .2);
}
.kk[data-stufe="silber"] {
  --kk-rahmen: linear-gradient(135deg, #FFFFFF 0%, #8D96A4 36%, #E4E9F0 62%, #7B8492 100%);
  --kk-flaeche: linear-gradient(165deg, #505967 0%, #313740 52%, #1D2128 100%);
  --kk-oben: rgba(235, 242, 255, .34); --kk-unten: rgba(150, 180, 220, .16); --kk-band: rgba(255, 255, 255, .06); --kk-fein: rgba(255, 255, 255, .035);
  --kk-text: #F3F6FA; --kk-akzent: #D8E3F2; --kk-leucht: rgba(170, 195, 230, .5);
  --kk-netz1: rgba(235, 243, 255, .6); --kk-netz2: rgba(160, 190, 230, .2); --kk-netzlinie: #FFFFFF; --kk-gitter: rgba(235, 243, 255, .2);
}
.kk[data-stufe="gold"] {
  --kk-rahmen: linear-gradient(135deg, #FFEDA8 0%, #B27B0F 36%, #FFD76F 62%, #9A6609 100%);
  --kk-flaeche: linear-gradient(165deg, #7C5611 0%, #4A3208 50%, #2B1D05 100%);
  --kk-oben: rgba(255, 224, 130, .38); --kk-unten: rgba(255, 170, 40, .18); --kk-band: rgba(255, 226, 140, .07); --kk-fein: rgba(255, 230, 160, .035);
  --kk-text: #FFF4D2; --kk-akzent: #FFD86E; --kk-leucht: rgba(255, 190, 50, .55);
  --kk-netz1: rgba(255, 224, 130, .66); --kk-netz2: rgba(255, 170, 40, .2); --kk-netzlinie: #FFE08A; --kk-gitter: rgba(255, 232, 170, .2);
}
.kk[data-stufe="platin"] {
  --kk-rahmen: linear-gradient(135deg, #F7F8F9 0%, #A4A9B0 30%, #ECEEF0 55%, #8B9199 80%, #DADDE1 100%);
  --kk-flaeche: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .025) 1px 2px), linear-gradient(160deg, #E8EAEC 0%, #CBCFD3 46%, #AEB3B9 100%);
  --kk-oben: rgba(255, 255, 255, .5); --kk-unten: rgba(120, 126, 134, .22); --kk-band: rgba(255, 255, 255, .1); --kk-fein: rgba(40, 44, 50, .03);
  --kk-text: #1C1F24; --kk-akzent: #2E3238; --kk-leucht: rgba(205, 210, 216, .5);
  --kk-netz1: rgba(36, 40, 46, .5); --kk-netz2: rgba(36, 40, 46, .14); --kk-netzlinie: #1F2328; --kk-gitter: rgba(30, 34, 40, .24);
}

/* Verdienst: Kreis mit den Netto-Leads, daneben der Betrag. Der gestrichelte Rest zeigt, dass immer noch mehr geht. */
.kd-links { display: grid; gap: var(--luecke); align-content: start; min-width: 0; }
.kd-verdienst { background: linear-gradient(135deg, rgba(var(--signal-rgb), .34), rgba(var(--signal-rgb), .08) 60%), var(--k-fl); border-color: rgba(var(--signal2-rgb), .36); }
.kd-v { display: flex; align-items: center; gap: 20px; }
.kd-v-kreis { position: relative; flex: none; width: 124px; height: 124px; display: grid; place-items: center; }
.kd-v-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.kd-v-spur, .kd-v-fuell { fill: none; }
.kd-v-spur { stroke: rgba(255, 255, 255, .3); stroke-width: 10; stroke-dasharray: .7 1.1; }
.kd-v-fuell { stroke: var(--k-signal3); stroke-width: 10; stroke-linecap: round; stroke-dasharray: calc(var(--p) * 100) 100; animation: kd-v-auf 1.1s ease-out; }
@keyframes kd-v-auf { from { stroke-dasharray: 0 100; } }
.kd-v-mitte { display: grid; justify-items: center; gap: 2px; }
.kd-v-mitte b { font: 700 32px/1 var(--k-kopf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-v-mitte span { font-size: 12px; line-height: 1.1; color: var(--k-gedaempft); white-space: nowrap; }
.kd-v-wert { display: grid; gap: 2px; min-width: 0; }
.kd-v-wert b { font: 700 32px/1.05 var(--k-kopf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-v-wert span { font-size: 14px; color: var(--k-gedaempft); }

/* Leerzustand: Geisterkarte */
.kk-leer .kk-inhalt { grid-template-rows: minmax(0, 1fr) auto; text-align: center; justify-items: center; }
.kk-leer .kk-netz { opacity: .55; }
.kk-leer .kk-ring, .kk-leer .kk-achse { stroke-dasharray: 3 5; }
.kk-leer-text { display: grid; gap: 10px; justify-items: center; padding-bottom: 6px; }
.kk-leer-text p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--kk-text); opacity: .86; }
.kk-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--k-signal3); color: #0A0A0F; font: 700 15px/1 var(--k-kopf); text-decoration: none; border: 0; cursor: pointer; transition: transform .12s ease-out, filter .2s; }
.kk-knopf:hover { filter: brightness(1.08); }
.kk-knopf:active { transform: scale(.97); }
.kk-knopf-leise { background: var(--k-fl2); color: var(--k-text); }

/* Lädt */
.kk-lade .kk-dreh { animation: none; }
.kk-lade .kk-form { background: var(--k-linie); }
.kk-lade .kk-innen { background: var(--k-grund2); }
.kk-lade .kk-innen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%); background-size: 200% 100%; animation: kd-schimmer 1.400s linear infinite; }
@keyframes kd-schimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* ---------- Kriterien ---------- */
.kd-krit { display: flex; flex-direction: column; flex: 1; gap: 0; }
.kd-k { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 6px; align-content: center; padding: 14px 0; border-top: 1px solid var(--k-linie); }
.kd-k:first-child { border-top: 0; padding-top: 0; }
.kd-k:last-child { padding-bottom: 0; }
.kd-k-bez { font: 600 12px/1.2 var(--k-kopf); letter-spacing: .16em; color: var(--k-gedaempft); }
.kd-k-anzeige { font: 600 18px/1.25 var(--k-kopf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-k-wert { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 34px/1 var(--k-kopf); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kd-k-bahn { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--k-fl2); overflow: hidden; }
.kd-k-fuell { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--k-signal), var(--k-signal3)); transform-origin: left; transform: scaleX(var(--p)); animation: kd-fuell 1s var(--k-ease) .5s backwards; }
@keyframes kd-fuell { from { transform: scaleX(0); } }
.kd-k-top { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.3; color: var(--k-gedaempft); }
.kd-k-hinweis { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.3; color: var(--k-gedaempft); }

/* ---------- Hebel ---------- */
.kd-hebel { background: linear-gradient(135deg, rgba(var(--signal-rgb), .34), rgba(var(--signal-rgb), .08) 60%), var(--k-fl); border-color: rgba(var(--signal2-rgb), .36); }
.kd-hebel-kopf { margin: 0; font: 700 clamp(24px, 4vw, 30px)/1.15 var(--k-kopf); letter-spacing: -.01em; }
.kd-hebel-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--k-gedaempft); }

/* ---------- Zeilen (Medaille mit Text) ---------- */
.kd-box .kd-zeilen { flex: 1; align-content: space-evenly; }
.kd-zeilen { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kd-zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: calc(100% + 16px); padding: 8px; margin: 0 -8px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.kd-zeile:hover { background: var(--k-fl); }
.kd-zeile:active { transform: scale(.985); }
.kd-zeile img { width: 64px; height: 64px; display: block; }
.kd-zeile-txt { min-width: 0; display: grid; gap: 4px; }
.kd-zeile-name { font: 700 17px/1.2 var(--k-kopf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-zeile-info { font-size: 14px; line-height: 1.3; color: var(--k-gedaempft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-zeile-zahl { font: 600 14px/1 var(--k-kopf); color: var(--k-gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-zeile-bahn { height: 6px; border-radius: 99px; background: var(--k-fl2); overflow: hidden; }
.kd-zeile-bahn i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--k-signal), var(--k-signal3)); transform-origin: left; transform: scaleX(var(--p)); }
.kd-zeile.ist-offen img { filter: grayscale(1) brightness(.5); }
.kd-leise { margin: 0; font-size: 16px; line-height: 1.5; color: var(--k-gedaempft); }

/* ---------- Weiter ---------- */
.kd-weiter-modul { margin: 0; font: 600 12px/1.2 var(--k-kopf); letter-spacing: .16em; text-transform: uppercase; color: var(--k-gedaempft); }
.kd-weiter-titel { margin: 0; font: 700 22px/1.2 var(--k-kopf); }
.kd-weiter .kk-knopf { align-self: flex-start; }
.kd-weiter-bahn { height: 6px; border-radius: 99px; background: var(--k-fl2); overflow: hidden; }
.kd-weiter-bahn i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--k-signal), var(--k-signal3)); transform-origin: left; transform: scaleX(var(--p)); }

/* ---------- Fehler ---------- */
.kd-fehler { display: grid; gap: 14px; justify-items: start; padding: 22px; border: 1px solid var(--k-linie); border-radius: 18px; background: var(--k-fl); }
.kd-fehler p { margin: 0; font-size: 16px; line-height: 1.5; }

/* ============ Vitrine ============ */
.vt { display: grid; gap: var(--luecke); }
.vt-summe { display: grid; gap: 18px; padding: 22px; border-radius: 20px; border: 1px solid rgba(var(--signal2-rgb), .3);
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--signal-rgb), .4), transparent 60%), var(--k-fl); }
.vt-summe-zahl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vt-summe-zahl b { font: 700 clamp(56px, 14vw, 84px)/.9 var(--k-kopf); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.vt-summe-zahl span { font: 600 clamp(18px, 4vw, 24px)/1.2 var(--k-kopf); color: var(--k-gedaempft); }
.vt-bahn { height: 10px; border-radius: 99px; background: var(--k-fl2); overflow: hidden; }
.vt-bahn i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--k-signal), var(--k-signal3)); transform-origin: left; transform: scaleX(var(--p)); animation: kd-fuell 1.100s var(--k-ease) .2s backwards; }
.vt-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luecke); }
@media (min-width: 700px) { .vt-stufen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vt-stufe { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; background: var(--k-fl); }
@media (min-width: 700px) { .vt-stufe { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; text-align: left; gap: 8px; padding: 8px 10px; } }
.vt-stufe img { width: 40px; height: 40px; display: block; }
.vt-stufe b { display: block; font: 700 18px/1 var(--k-kopf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-stufe small { display: block; margin-top: 3px; font: 600 12px/1 var(--k-kopf); letter-spacing: .12em; text-transform: uppercase; color: var(--k-gedaempft); }

.vt-gruppe { display: grid; gap: 12px; }
.vt-gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--k-linie); }
.vt-gruppe-titel { margin: 0; font: 700 20px/1.2 var(--k-kopf); }
.vt-gruppe-zahl { font: 600 14px/1 var(--k-kopf); color: var(--k-gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-regal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 12px 12px; border-radius: 18px; background: linear-gradient(180deg, var(--k-fl) 0, rgba(244, 243, 240, .015) 100%); border: 1px solid var(--k-linie); }
@media (min-width: 560px) { .vt-regal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .vt-regal { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 18px 14px 14px; } }

.md { --glow: rgba(255, 255, 255, .4); position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 6px 2px 4px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; transition: transform .15s ease-out; }
.md:active { transform: scale(.95); }
.md:hover .md-bild { transform: translateY(-3px) scale(1.04); }
.md:focus-visible { outline: 2px solid var(--k-signal3); outline-offset: 2px; }
.md-bild { position: relative; display: block; width: 100%; max-width: 124px; aspect-ratio: 1; transition: transform .25s var(--k-ease); }
.md-bild img { width: 100%; height: 100%; display: block; }
.md[data-stufe="bronze"] { --glow: rgba(240, 150, 80, .6); }
.md[data-stufe="silber"] { --glow: rgba(200, 220, 255, .55); }
.md[data-stufe="gold"] { --glow: rgba(255, 196, 60, .65); }
.md[data-stufe="platin"] { --glow: rgba(170, 205, 245, .6); }
.md[data-stufe="diamant"] { --glow: rgba(80, 200, 255, .7); }
.md[data-stufe="legende"] { --glow: rgba(var(--signal-glut-rgb), .8); }
.md.ist-erreicht .md-bild img { filter: drop-shadow(0 4px 12px var(--glow)); }
.md.ist-offen .md-bild img { filter: grayscale(1) brightness(.5) contrast(1.05); opacity: .9; }
.md-anzahl { position: absolute; top: 0; right: 4px; min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center; border-radius: 99px; background: var(--k-signal3); color: #0A0A0F; font: 700 14px/1 var(--k-kopf); box-shadow: 0 0 0 3px var(--k-grund); }
.md-zeile { display: block; width: 100%; min-height: 18px; font: 600 14px/1.3 var(--k-kopf); color: var(--k-gedaempft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.md-zeile.md-name { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.md.ist-erreicht .md-zeile { color: var(--k-text); }
.md-name { display: none; }
@media (min-width: 560px) { .md-name { display: block; } }
.md-mini { display: block; width: 70%; height: 4px; border-radius: 99px; background: var(--k-fl2); overflow: hidden; }
.md-mini i { display: block; height: 100%; width: 100%; background: var(--k-signal3); transform-origin: left; transform: scaleX(var(--p)); }

/* Blatt mit Details (Sheet am Handy, Fenster am Rechner) */
.md-blatt { position: fixed; inset: 0; z-index: 900; display: grid; align-items: end; justify-items: center; }
.md-schleier { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(4, 3, 8, .72); opacity: 0; transition: opacity .25s ease-out; cursor: default; }
.md-panel { position: relative; width: 100%; max-height: 88vh; max-height: 88dvh; overflow: auto; display: grid; justify-items: center; gap: 12px; padding: 30px 22px calc(26px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: linear-gradient(180deg, #181420, #0E0C14); border: 1px solid var(--k-linie); border-bottom: 0; transform: translateY(100%); transition: transform .4s var(--k-ease); text-align: center; }
.md-blatt.ist-offen .md-schleier { opacity: 1; }
.md-blatt.ist-offen .md-panel { transform: translateY(0); }
@media (min-width: 700px) {
  .md-blatt { align-items: center; }
  .md-panel { width: 460px; border-radius: 24px; border-bottom: 1px solid var(--k-linie); transform: translateY(24px) scale(.96); opacity: 0; transition: transform .35s var(--k-ease), opacity .25s; }
  .md-blatt.ist-offen .md-panel { transform: none; opacity: 1; }
}
.md-zu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 99px; background: var(--k-fl2); color: var(--k-text); font: 400 24px/1 var(--k-fliess); cursor: pointer; }
.md-zu:focus-visible { outline: 2px solid var(--k-signal3); }
.md-gross { position: relative; width: 200px; height: 200px; }
.md-gross img { width: 100%; height: 100%; display: block; animation: md-dreh .9s var(--k-ease) backwards; }
.md-gross.ist-offen img { filter: grayscale(1) brightness(.4) contrast(1.1); animation: none; }
@keyframes md-dreh { from { transform: rotateY(-180deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.md-stufenmarke { display: inline-block; padding: 5px 10px; border-radius: 99px; font: 700 11px/1 var(--k-kopf); letter-spacing: .18em; text-transform: uppercase; color: #0A0A0F; background: var(--md-farbe, #fff); }
.md-titel { margin: 0; font: 700 30px/1.1 var(--k-kopf); letter-spacing: -.01em; }
.md-text { margin: 0; font-size: 17px; line-height: 1.5; color: var(--k-gedaempft); }
.md-status { width: 100%; display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--k-fl); font-size: 16px; line-height: 1.4; }
.md-status b { font-family: var(--k-kopf); font-variant-numeric: tabular-nums; }
.md-status .vt-bahn { height: 8px; }
.md-panel[data-stufe="bronze"] { --md-farbe: #F0B889; }
.md-panel[data-stufe="silber"] { --md-farbe: #E4EAF2; }
.md-panel[data-stufe="gold"] { --md-farbe: #FFD76F; }
.md-panel[data-stufe="platin"] { --md-farbe: #C5D9EE; }
.md-panel[data-stufe="diamant"] { --md-farbe: #7FE3FF; }
.md-panel[data-stufe="legende"] { --md-farbe: #FF6BAE; }

/* ============ Zeremonie ============ */
.zr { position: fixed; inset: 0; z-index: 1000; overflow: hidden; display: grid; place-items: center; background: rgba(5, 3, 9, 0); transition: background .4s ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; outline: none; }
.zr.ist-an { background: rgba(5, 3, 9, .985); }
.zr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zr-blitz { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% var(--zr-y, 42%), #fff 0, rgba(255, 150, 210, .75) 30%, rgba(var(--signal-rgb), .25) 60%, transparent 80%); }
.zr-blitz.ist-blitz { animation: zr-blitz .55s ease-out; }
@keyframes zr-blitz { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.zr-welle { position: absolute; left: 50%; top: var(--zr-y, 42%); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid var(--zr-farbe, var(--signal3)); box-shadow: 0 0 40px var(--zr-farbe, var(--signal3)), inset 0 0 30px var(--zr-farbe, var(--signal3)); opacity: 0; pointer-events: none; }
.zr-welle.ist-welle { animation: zr-welle .9s cubic-bezier(.1, .7, .2, 1); }
@keyframes zr-welle { from { transform: scale(.2); opacity: .95; } to { transform: scale(9); opacity: 0; } }
.zr-buehne { position: relative; width: 100%; padding: 0 20px; display: grid; justify-items: center; align-content: center; gap: 14px; text-align: center; perspective: 900px; }
.zr-medaille { width: min(62vw, 300px); aspect-ratio: 1; position: relative; transform-style: preserve-3d; opacity: 0; }
.zr-medaille img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 30px var(--zr-farbe, var(--signal3))); }
.zr-medaille.ist-flug { animation: zr-flug 1.100s cubic-bezier(.2, .9, .25, 1.05) forwards, zr-schweben 3.200s ease-in-out 1.100s infinite; }
@keyframes zr-flug { 0% { opacity: 0; transform: translateZ(-900px) rotateY(-900deg) scale(.2); } 30% { opacity: 1; } 78% { transform: translateZ(60px) rotateY(18deg) scale(1.08); } 100% { opacity: 1; transform: translateZ(0) rotateY(0) scale(1); } }
@keyframes zr-schweben { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-7px) rotateY(6deg); } }
.zr-medaille.ist-sammel, .zr-medaille.ist-summe { opacity: 1; width: min(100%, 560px); aspect-ratio: auto; display: grid; justify-items: center; gap: 16px; }
.zr-text { display: grid; gap: 8px; justify-items: center; min-height: 128px; }
.zr-text > * { opacity: 0; transform: translateY(14px); }
.zr-text.ist-text > * { animation: zr-hoch .6s var(--k-ease) forwards; }
.zr-text.ist-text > :nth-child(2) { animation-delay: .1s; }
.zr-text.ist-text > :nth-child(3) { animation-delay: .22s; }
@keyframes zr-hoch { to { opacity: 1; transform: none; } }
.zr-kicker { margin: 0; font: 700 14px/1 var(--k-kopf); letter-spacing: .34em; text-transform: uppercase; color: var(--zr-farbe, var(--signal3)); }
.zr-name { margin: 0; font: 700 clamp(34px, 9vw, 56px)/1.05 var(--k-kopf); letter-spacing: -.02em; color: #fff; }
.zr-grund { margin: 0; font-size: 18px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.zr-zaehler { position: absolute; top: 22px; left: 22px; font: 600 14px/1 var(--k-kopf); letter-spacing: .14em; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.zr-fuss { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .55); pointer-events: none; }
.zr-fuss.ist-hinweis { animation: zr-puls 1.800s ease-in-out infinite; }
@keyframes zr-puls { 50% { opacity: .45; } }
.zr-leiste { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.zr-knopf { min-width: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #fff; font: 600 14px/1 var(--k-fliess); cursor: pointer; }
.zr-knopf:focus-visible { outline: 2px solid var(--signal3); }
.zr-gitter { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: min(100%, 560px); }
.zr-gitter img { width: clamp(64px, 17vw, 96px); height: auto; aspect-ratio: 1; opacity: 0; transform: scale(.3) rotate(-30deg); animation: zr-pop .6s cubic-bezier(.2, 1.3, .3, 1) forwards; animation-delay: calc(var(--i) * 70ms + 500ms); filter: drop-shadow(0 0 12px rgba(var(--signal3-rgb), .5)); }
@keyframes zr-pop { to { opacity: 1; transform: none; } }
.zr-summe-zahl { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.zr-summe-zahl b { font: 700 clamp(80px, 24vw, 140px)/.9 var(--k-kopf); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(var(--signal3-rgb), .7); }
.zr-summe-zahl span { font: 600 clamp(22px, 5vw, 32px)/1 var(--k-kopf); color: rgba(255, 255, 255, .7); }
.zr-summe-bahn { width: min(80vw, 420px); height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.zr-summe-bahn i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--signal), var(--signal3)); transform-origin: left; transform: scaleX(var(--p)); transition: transform 1.400s var(--k-ease); }

/* ---------- Handy: Karte rund 52 % der Bildhöhe, fünf Werte kompakt ---------- */
@supports (height: 1svh) { .kk { --kb: min(380px, calc(100vw - 2 * var(--rand)), max(240px, calc(52svh * .6786))); } }
@media (min-width: 700px) and (min-height: 700px) { .kk { --kb: 380px; } }
@media (max-height: 699px) and (min-width: 560px) { .kk { --kb: min(380px, calc(80vh * .6786)); } }
@supports (height: 1svh) { @media (max-height: 699px) and (min-width: 560px) { .kk { --kb: min(380px, calc(80svh * .6786)); } } }
@media (min-width: 1000px) { .kk { --kb: 340px; } }
@media (max-width: 559px) and (max-height: 800px) { .kk-bez { font-size: 17px; } .kk-wert { font-size: 24px; } }
@media (max-width: 559px) {
  .kk { --kb: calc(100vw - 2 * var(--rand)); }
  .kd-titel { font-size: 1.6rem; }
  .kd-kopf { gap: 4px; }
  .kk-bildunter { font-size: 14px; }
  .kd-box { padding: 16px; gap: 10px; }
  .kd-k { padding: 10px 0; row-gap: 4px; }
  .kd-k-bez { grid-column: 1; grid-row: 1; }
  .kd-k-top { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-size: 13px; }
  .kd-k-anzeige { grid-column: 1; grid-row: 2; font-size: 16px; white-space: normal; overflow: visible; text-overflow: clip; }
  .kd-k-wert { grid-column: 2; grid-row: 2; justify-self: end; font-size: 28px; }
  .kd-k-bahn { grid-row: 3; height: 6px; }
  .kd-zeile-name, .kd-zeile-info { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Ruhiges Standbild bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
  .kk-dreh, .kk-flaeche, .kk-halo, .kk-punkt, .kd-k-fuell, .vt-bahn i, .md-gross img, .kk-lade .kk-innen::after { animation: none !important; }
  .kk-dreh, .md, .md-bild, .md-panel, .md-schleier, .zr, .zr-summe-bahn i { transition: none !important; }
  .zr-medaille.ist-flug { animation: none; opacity: 1; }
  .zr-text.ist-text > * { animation: none; opacity: 1; transform: none; }
  .zr-blitz, .zr-welle, .zr-canvas { display: none; }
  .zr-fuss.ist-hinweis { animation: none; }
  .zr-gitter img { animation: none; opacity: 1; transform: none; }
}