/* Tippmagie: Oberfläche
   Schriften: Eczar (Titel, Zahlen, Kartenrahmen), Lexend (Text), Atkinson Hyperlegible Mono (Tasten) */

@font-face { font-family: "Eczar"; src: url("schrift/eczar-latin-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Eczar"; src: url("schrift/eczar-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lexend"; src: url("schrift/lexend-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lexend"; src: url("schrift/lexend-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "AtkinsonMono"; src: url("schrift/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --nacht-0: #090b20;
  --nacht-1: #0f1438;
  --nacht-2: #171f55;
  --nacht-3: #232f72;
  --nacht-4: #3547a0;
  --dunst: #1c6a78;
  --pergament: #f1e7cd;
  --pergament-2: #d9cba7;
  --tinte: #1c1a33;
  --text: #f4eedb;
  --text-2: #c7c6dc;
  --text-3: #9092b8;
  --blitz: #8fe8ff;
  --blitz-2: #dcf9ff;
  --glut: #ff7043;
  --glut-2: #ffb38a;
  --gold: #e6c067;
  --silber: #c5cfda;
  --mythic: #f37a3c;
  --mana-w: #f6f0c9;
  --mana-u: #62b4ee;
  --mana-b: #a698bd;
  --mana-r: #f0624d;
  --mana-g: #4fc487;
  --titel: "Eczar", Georgia, "Times New Roman", serif;
  --schrift: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --taste: "AtkinsonMono", ui-monospace, "DejaVu Sans Mono", monospace;
  --weich: cubic-bezier(.2, .7, .2, 1);
  --kf1: var(--mana-u);
  --kf2: var(--mana-r);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nacht-0); color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font: 350 16.5px/1.5 var(--schrift);
  background:
    radial-gradient(1100px 640px at 8% -12%, #2c40a066, transparent 62%),
    radial-gradient(900px 620px at 100% 4%, #1c6a7866, transparent 64%),
    linear-gradient(180deg, #121844 0%, #0b0f2c 52%, #080a1d 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--titel); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
a { color: var(--blitz); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blitz); outline-offset: 3px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ Himmel */
.himmel { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.strom { position: absolute; left: 50%; top: 50%; width: 130vmax; height: 130vmax; border-radius: 50%; mix-blend-mode: screen; filter: blur(48px); }
.strom-wasser {
  translate: -64% -62%; opacity: .34;
  background: conic-gradient(from 20deg, transparent 0 16%, #2b8bd6 30%, transparent 44% 58%, #27c6c0 72%, transparent 88%);
  animation: kreisen 150s linear infinite;
}
.strom-feuer {
  translate: -34% -36%; opacity: .2;
  background: conic-gradient(from 200deg, transparent 0 22%, #e2552c 33%, transparent 46% 68%, #9a3ac6 80%, transparent 92%);
  animation: kreisen 210s linear infinite reverse;
}
@keyframes kreisen { to { rotate: 360deg; } }
body.wetterleuchten .himmel { animation: wetterleuchten .7s ease-out; }
@keyframes wetterleuchten { 0% { filter: brightness(1); } 12% { filter: brightness(2.3) saturate(1.3); } 30% { filter: brightness(1.2); } 42% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
#blitze { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

/* ------------------------------------------------------------------ Gerüst */
.app { position: relative; z-index: 1; max-width: 1340px; margin: 0 auto; padding: 18px clamp(14px, 3vw, 36px) 48px; }

/* Abgeschrägte Ecken mit feiner Lichtkante: die Form aller Tafeln und Knöpfe */
.kante {
  --ecke: 14px; --linie: #8fe8ff66; --linie-2: #ffffff1c;
  position: relative;
  clip-path: polygon(var(--ecke) 0, 100% 0, 100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%, 0 100%, 0 var(--ecke));
}
.kante::before {
  content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, var(--linie), var(--linie-2) 38%, var(--linie-2) 62%, var(--linie));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.kante::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(135deg, transparent calc(var(--ecke) * .7071 - .4px), var(--linie) calc(var(--ecke) * .7071 - .4px) calc(var(--ecke) * .7071 + .9px), transparent calc(var(--ecke) * .7071 + .9px)),
    linear-gradient(315deg, transparent calc(var(--ecke) * .7071 - .4px), var(--linie) calc(var(--ecke) * .7071 - .4px) calc(var(--ecke) * .7071 + .9px), transparent calc(var(--ecke) * .7071 + .9px));
}
.tafel { background: linear-gradient(180deg, #1d2764d9, #131945e6); }
.tafel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tafel-kopf h2 { font-size: 1.55rem; }
.klein { font-size: .86rem; color: var(--text-2); }
.leise { color: var(--text-3); }

.knopf {
  --ecke: 9px; --linie: #fff5; --linie-2: #fff2;
  border: 0; cursor: pointer; font: 700 1rem/1 var(--schrift); padding: .82em 1.3em; color: #230d03;
  background: linear-gradient(180deg, #ffc39f, #ff7d52 52%, #e2532b);
  transition: filter .15s, translate .1s; text-decoration: none; display: inline-flex; align-items: center; gap: .5em;
}
.knopf:hover { filter: brightness(1.1) saturate(1.05); }
.knopf:active { translate: 0 1px; }
.knopf:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }
.knopf.ruhig { color: var(--text); background: linear-gradient(180deg, #2b3884, #1d2764); --linie: #8fe8ff88; }
.knopf.klein-knopf { font-size: .88rem; padding: .62em .95em; }
.knopf[disabled] { filter: grayscale(.7) brightness(.7); cursor: default; }

/* ------------------------------------------------------------------ Kopf */
.kopf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 22px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 800 1.55rem/1 var(--titel); letter-spacing: .005em; }
.marke svg { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 2px 6px #0008); }
.reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.reiter a { color: var(--text-2); text-decoration: none; padding: .5em .9em; font-weight: 600; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.reiter a:hover { color: var(--text); }
.reiter a[aria-current="page"] { color: var(--text); border-bottom-color: var(--glut); }
.reiter .zahl { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; margin-left: .2em; border-radius: 1em; background: var(--glut); color: #230d03; font-size: .8rem; font-weight: 800; }
.schloss { background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 8px; border-radius: 8px; }
.schloss:hover { color: var(--text); background: #ffffff12; }

.stand { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.stand-teil { --ecke: 12px; display: flex; align-items: center; gap: 14px; padding: 12px 18px; min-width: 0; }
.stand-zahl { font: 800 2.1rem/1 var(--titel); font-variant-numeric: tabular-nums; }
.stand-zahl small { font: 600 .95rem/1 var(--schrift); color: var(--text-2); margin-left: .35em; }
.stand-text { min-width: 0; }
.stand-text .klein { margin-top: 3px; line-height: 1.3; }

.stufenring { position: relative; width: 58px; height: 58px; flex: none; }
.stufenring svg { width: 100%; height: 100%; rotate: -90deg; }
.stufenring .bahn { fill: none; stroke: #ffffff1c; stroke-width: 5; }
.stufenring .fuell { fill: none; stroke: url(#ring-verlauf); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s var(--weich); }
.stufenring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.35rem/1 var(--titel); }

.sturmzeichen { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2c3c95, #131945); box-shadow: inset 0 0 0 2px #8fe8ff44; color: var(--text-3); }
.sturmzeichen.aktiv { color: var(--blitz-2); box-shadow: inset 0 0 0 2px #8fe8ffaa, 0 0 22px #8fe8ff55; }
.sturmzeichen svg { width: 30px; height: 30px; }

.laender { display: flex; gap: 6px; flex: none; }
.land { width: 25px; height: 35px; border-radius: 3px; background: linear-gradient(160deg, #5ea76f, #2c6b45); box-shadow: inset 0 0 0 2px #0b0d1f, inset 0 0 0 3px #ffffff33; display: grid; place-items: center; color: #0b1a10; font-size: 13px; transition: rotate .5s var(--weich), scale .5s var(--weich), filter .5s, translate .5s; }
.land.getappt { rotate: 90deg; scale: .8; filter: grayscale(.85) brightness(.55); }   /* kleiner, damit gedrehte Länder einander nicht berühren */
.laender.viele .land { width: 19px; height: 27px; font-size: 10px; }
/* Echte Standardländer als Miniaturkarten */
.land.mit-bild { width: 28px; height: 39px; background: #000; box-shadow: 0 2px 6px #000a, 0 0 0 1px #ffffff30; border-radius: 2px; overflow: hidden; }
.laender.viele .land.mit-bild { width: 22px; height: 31px; }
.land.mit-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hinweisleiste:empty { display: none; }
.hinweisleiste { margin-top: 12px; display: grid; gap: 8px; }
.hinweis { --ecke: 10px; --linie: #e6c06799; padding: 10px 16px; background: #3a2f1acc; color: #f6e7bd; font-size: .95rem; }
.hinweis code { font-family: var(--taste); background: #0005; padding: .1em .4em; border-radius: 4px; font-size: .9em; }
.hinweis.fehler { --linie: #ff8a70; background: #4a1d18cc; color: #ffd9cf; }

main#ansicht { margin-top: 22px; outline: none; }
.fuss { margin-top: 44px; color: var(--text-3); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fuss span { overflow-wrap: anywhere; min-width: 0; }

/* ------------------------------------------------------------------ Akademie */
.akademie { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.akademie > .spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.akademie > .spalte.rand { position: sticky; top: 16px; }

.held { --ecke: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 38px); padding: clamp(18px, 2.6vw, 32px); overflow: hidden; align-items: center; isolation: isolate; }
.held-kunst { position: absolute; inset: -4% -2%; z-index: -1; background-size: cover; background-position: 70% 22%; opacity: .5; animation: gleiten 46s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 78%); mask-image: linear-gradient(90deg, transparent 18%, #000 78%); }
@keyframes gleiten { from { transform: scale(1) translateX(0); } to { transform: scale(1.09) translateX(-2.5%); } }
.held-zeichen { position: absolute; right: -4%; top: 50%; translate: 0 -50%; font-size: clamp(220px, 30vw, 380px); line-height: 1; z-index: -1; opacity: .2;
  background: linear-gradient(140deg, var(--kf1), var(--kf2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held > .karte { --b: clamp(210px, 21vw, 290px); }
.held-text { display: grid; gap: 12px; min-width: 0; }
.held-kapitel { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-weight: 600; }
.held-kapitel .ms { font-size: 1.5rem; color: var(--kf1); }
.held h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); text-wrap: balance; }
.held-tasten { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tastenkappe { font: 700 1.15rem/1 var(--taste); min-width: 2em; padding: .45em .5em .55em; text-align: center; color: var(--tinte); background: linear-gradient(180deg, #fbf6e6, #d8ceb0); border-radius: 7px; box-shadow: 0 3px 0 #8e8468, 0 5px 10px #0007; }
.tastenkappe.wort { font-family: var(--schrift); font-size: 1rem; padding-inline: .8em; }
.held-anleitung { max-width: 56ch; color: var(--text-2); }
.held-anleitung strong { color: var(--text); }
.held-fuss { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 4px; }
.kunstnachweis { position: absolute; right: 26px; bottom: 8px; font-size: .72rem; color: #ffffff8c; z-index: 1; }

/* Ablage: was noch geöffnet werden will */
.ablage { --ecke: 18px; --linie: #e6c067aa; padding: 18px 22px 22px; background: linear-gradient(180deg, #2b2450e0, #1a1740ea); }
.ablage-reihe { display: flex; gap: 18px; overflow-x: auto; padding: 14px 4px 10px; scrollbar-width: thin; align-items: flex-end; }
.abschnitt .ablage-reihe { flex-wrap: wrap; overflow-x: visible; row-gap: 26px; }   /* Seite Belohnungen: alles auf einen Blick */
.ablage-stueck { display: grid; gap: 8px; justify-items: center; flex: none; background: none; border: 0; cursor: pointer; padding: 0; color: var(--text); text-align: center; max-width: 150px; }
.ablage-stueck .klein { line-height: 1.25; }
.ablage-stueck:hover .booster, .ablage-stueck:hover .karte { translate: 0 -6px; }
.ablage-stueck .booster, .ablage-stueck .karte { transition: translate .25s var(--weich); }

/* Weg durch die Kapitel */
.weg { display: grid; gap: 14px; }
.kapitel { --ecke: 16px; --linie: color-mix(in srgb, var(--kf1) 60%, transparent); display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px 20px; padding: 18px 22px 18px 18px; }
.kapitel.zu { filter: saturate(.55) brightness(.8); }
.kapitel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.kapitel-kopf h3 { font-size: 1.45rem; }
.kapitel-kopf .welt { font-size: .82rem; color: var(--text-3); display: inline-flex; gap: .4em; align-items: center; }
.kapitel-lohn { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .84rem; color: var(--text-2); }
.kapitel-lohn .fertig { color: var(--mana-g); font-weight: 700; }
.lohn-marke { display: inline-flex; align-items: center; gap: .35em; padding: .22em .7em; border-radius: 1em; background: #ffffff14; white-space: nowrap; font-size: .84rem; font-weight: 400; color: var(--text-2); }
.lohn-marke.echt { background: #e6c06733; color: #f6e2a8; }

.wappen { grid-row: span 2; width: 78px; height: 104px; display: grid; place-items: center; align-self: start; color: #fff;
  background: linear-gradient(160deg, var(--kf1), var(--kf2)); font-size: 44px; text-shadow: 0 2px 0 #0006; position: relative; }
.wappen::after { content: ""; position: absolute; inset: 4px; border: 1.5px solid #ffffff66; clip-path: inherit; pointer-events: none; }
.wappen.tarkir { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); padding-bottom: 16px; }
.wappen.strixhaven { clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); padding-bottom: 14px; }
.wappen .ms { filter: drop-shadow(0 2px 3px #0008); }
/* Wappen mit der Figur des Kapitels; das Zeichen rückt nach unten */
.wappen.mit-kunst { place-items: end center; font-size: 27px;
  background: linear-gradient(180deg, #0000 34%, color-mix(in srgb, var(--kf2) 78%, #000) 88%), var(--wappen-kunst) center 18% / cover no-repeat, linear-gradient(160deg, var(--kf1), var(--kf2)); }
.wappen.mit-kunst.tarkir { padding-bottom: 25px; }
.wappen.mit-kunst.strixhaven { padding-bottom: 19px; }
.wappen.mit-kunst:not(.tarkir):not(.strixhaven) { padding-bottom: 8px; }

.zauber { display: flex; flex-wrap: wrap; gap: 10px 6px; margin-top: 12px; position: relative; }
.knoten { flex: 1 1 0; min-width: 76px; display: grid; justify-items: center; gap: 5px; padding: 6px 4px 8px; background: none; border: 0; cursor: pointer; position: relative; border-radius: 12px; color: var(--text); }
.knoten::before { content: ""; position: absolute; top: 27px; left: -50%; width: 100%; height: 4px; background: #ffffff1f; z-index: 0; }
.knoten:first-child::before { display: none; }
.knoten.bestanden::before, .knoten.aktuell::before { background: linear-gradient(90deg, var(--kf1), var(--kf2)); }
.knoten:hover { background: #ffffff0f; }
.knoten[aria-pressed="true"] { background: #ffffff17; }
.knoten .ms-cost { font-size: 30px; z-index: 1; box-shadow: 0 0 0 3px var(--nacht-1), -0.06em 0.07em 0 3px #0008; background-color: #b9bcc9; transition: scale .3s var(--weich); }
.knoten.bestanden .ms-cost { background-color: color-mix(in srgb, var(--kf1) 62%, #fff); }
.knoten.gesperrt .ms-cost { background-color: #272c5c; color: #8a8eba; box-shadow: 0 0 0 3px var(--nacht-1), inset 0 0 0 2px #ffffff1f; }
.knoten.gesperrt { color: var(--text-3); }
.knoten.aktuell .ms-cost { animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 3px var(--nacht-1), 0 0 0 5px #8fe8ff99, 0 0 18px 6px #8fe8ff55; } 50% { box-shadow: 0 0 0 3px var(--nacht-1), 0 0 0 8px #8fe8ff33, 0 0 30px 12px #8fe8ff22; } }
.knoten-tasten { font: 600 .82rem/1.15 var(--taste); color: inherit; opacity: .9; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knoten.neu .ms-cost { animation: einschlag .9s var(--weich); }
@keyframes einschlag { 0% { scale: 1; filter: brightness(1); } 30% { scale: 1.5; filter: brightness(2.2); } 100% { scale: 1; filter: brightness(1); } }

.sterne { display: inline-flex; gap: 2px; line-height: 1; }
.stern { width: 1em; height: 1em; fill: #ffffff26; }
.stern.voll { fill: var(--gold); filter: drop-shadow(0 0 4px #e6c06788); }
.stern.frisch { animation: stempel .7s var(--weich) backwards; }
@keyframes stempel { 0% { scale: 3.2; opacity: 0; rotate: -40deg; } 60% { scale: .85; opacity: 1; } 100% { scale: 1; rotate: 0deg; } }

.pruefung { --linie: #e6c067aa; }
.pruefung .wappen { clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); padding: 0; background: linear-gradient(160deg, #e6c067, #b0562d); }
/* Mit Ugins Illustration: das Zeichen rückt nach unten wie bei den Kapiteln */
.pruefung .wappen.mit-kunst { place-items: end center; font-size: 27px; padding-bottom: 14px;
  background: linear-gradient(180deg, #0000 38%, #7a3418e6 86%), var(--wappen-kunst) center 22% / cover no-repeat, linear-gradient(160deg, #e6c067, #b0562d); }
/* Prüfungskarte: sagenhaft selten, mit Glut am Rand */
.pruefungskarte .karte-innen { box-shadow: 0 12px 28px #000a, 0 0 34px 6px #f37a3c66; }
.pruefungskarte .r-text .stufe b { font: 800 1em/1 var(--titel); min-width: 3.2em; }
.pruefungskarte.bestanden .r-pt { background: linear-gradient(180deg, #ffe9a8, #e6c067); }
.ueben-titel { display: flex; align-items: center; gap: 16px; }
.ueben-mentor { width: 64px; height: 64px; flex: none; border-radius: 50%; background: center 20% / cover no-repeat; box-shadow: 0 0 0 3px var(--gold), 0 0 22px #f37a3c88; }

/* Ziele und letzte Zauber */
.ziele { --ecke: 16px; padding: 18px 20px 20px; display: grid; gap: 16px; }
.ziel { display: grid; gap: 6px; }
.ziel-kopf { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.ziel-kopf span:last-child { color: var(--text-2); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.balken { height: 9px; background: #ffffff17; border-radius: 2px; overflow: hidden; transform: skewX(-18deg); }
.balken i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--blitz), #6f9cff); transition: width 1s var(--weich); }
.balken.glut i { background: linear-gradient(90deg, var(--glut-2), var(--glut)); }
.balken.gold i { background: linear-gradient(90deg, #f6e2a8, var(--gold)); }

.letzte { --ecke: 16px; padding: 18px 20px; display: grid; gap: 12px; }
.letzte-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #ffffff14; }
.letzte-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.letzte-zeile b { font: 700 1.25rem/1 var(--titel); font-variant-numeric: tabular-nums; }
.letzte-zeile .klein { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ Karten */
.karte { --b: 200px; width: var(--b); aspect-ratio: 63 / 88; position: relative; container-type: inline-size; perspective: 1100px; flex: none; }
.karte-innen { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 4.75% / 3.4%;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--dreh, 0deg)));
  transition: transform .75s var(--weich); box-shadow: 0 10px 26px #000a; }
.karte.neigt .karte-innen { transition: transform .08s linear; }
.karte.verdeckt { --dreh: 180deg; }
.karte-vorn, .karte-hinten { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; overflow: hidden; }
.karte-hinten { transform: rotateY(180deg); }
.karte-bild { width: 100%; height: 100%; display: block; object-fit: cover; background: #15131a; }
.karte-glanz { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), #fffc, transparent 52%); }
.karte.neigt .karte-glanz { opacity: 1; }
.karte.foil .karte-vorn::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .75;
  background: linear-gradient(115deg, transparent 18%, #ff6ad566 34%, #6ad5ff77 46%, #d5ff6a66 58%, transparent 74%); background-size: 260% 260%;
  background-position: var(--gx, 0%) var(--gy, 0%); animation: folie 5.5s linear infinite; }
.karte.neigt.foil .karte-vorn::after { animation: none; }
@keyframes folie { from { background-position: 0% 0%; } to { background-position: 130% 130%; } }
.karte.klickbar { cursor: pointer; }
.karte-marke { position: absolute; z-index: 3; top: -9px; right: -9px; padding: .25em .6em; font: 800 .78rem/1 var(--schrift); border-radius: 1em; background: var(--glut); color: #230d03; box-shadow: 0 2px 8px #0008; }
.karte-marke.anzahl { background: #0b0d1fe6; color: var(--text); top: auto; bottom: -8px; right: -8px; box-shadow: 0 0 0 1.5px #ffffff44; }

/* Kartenrückseite: eigene Gestaltung mit den fünf Manafarben */
.ruecken { position: absolute; inset: 0; border-radius: inherit; border: 3.6cqw solid #07081a;
  background: radial-gradient(ellipse at 50% 46%, #3a52b4 0%, #1b2466 46%, #0b0f2e 100%); overflow: hidden; }
.ruecken::before { content: ""; position: absolute; inset: 6cqw 5cqw; border-radius: 50% / 46%; border: 1.1cqw solid #e6c067aa; box-shadow: inset 0 0 7cqw #000c, 0 0 5cqw #8fe8ff44; background: radial-gradient(ellipse at 50% 40%, #24307a, #0d1236 70%); }
.ruecken::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #ffffff07 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, #ffffff06 0 2px, transparent 2px 9px); }
.ruecken svg { position: absolute; left: 50%; top: 50%; width: 46cqw; translate: -50% -50%; z-index: 1; filter: drop-shadow(0 1cqw 2cqw #000a); }
.perle { position: absolute; width: 10cqw; height: 10cqw; border-radius: 50%; translate: -50% -50%; z-index: 1; box-shadow: inset -1cqw -1.4cqw 2cqw #0007, inset .8cqw 1cqw 1.6cqw #fff6, 0 0 3cqw currentColor; background: currentColor; }
/* Originale Rückseite: liegt über der Zeichnung, sobald sie geladen ist */
.ruecken-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 2; }
.ruecken.original { border: 0; background: #000; }
.ruecken.original::before, .ruecken.original::after, .ruecken.original svg, .ruecken.original .perle { display: none; }

/* Gezeichneter Kartenrahmen: für Übungszauber, Lektionen und Karten ohne Bild */
.rahmen { position: absolute; inset: 0; background: #131118; padding: 4.3cqw 4.3cqw 0; display: flex; flex-direction: column; color: #17151c; text-align: left; }
.rahmen-flaeche { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.1cqw; padding: 1.5cqw 1.5cqw 2.4cqw; border-radius: 2.4cqw 2.4cqw 5cqw 5cqw / 2.4cqw 2.4cqw 3cqw 3cqw;
  background: linear-gradient(170deg, var(--rf1, #c2cad3), var(--rf2, #8f9aa6)); box-shadow: inset 0 0 0 .5cqw #0004; position: relative; }
.rahmen.f-w { --rf1: #f6f0d8; --rf2: #d4c8a4; }
.rahmen.f-u { --rf1: #4f97d8; --rf2: #1f5795; }
.rahmen.f-b { --rf1: #5a5263; --rf2: #29242f; }
.rahmen.f-r { --rf1: #e2674c; --rf2: #a52f1d; }
.rahmen.f-g { --rf1: #48a673; --rf2: #216540; }
.rahmen.f-gold { --rf1: #edd486; --rf2: #b48c33; }
.r-leiste { display: flex; justify-content: space-between; align-items: center; gap: 1.2cqw; padding: .7cqw 2.2cqw .5cqw; border-radius: 3.4cqw / 50%;
  background: linear-gradient(180deg, #fbf7ea, #dcd3bb); box-shadow: 0 .5cqw 0 #0006, inset 0 0 0 .35cqw #0005; font: 700 5.5cqw/1.2 var(--titel); min-height: 9.4cqw; }
.r-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.r-kosten { display: flex; gap: .5cqw; flex: none; font-size: 4.5cqw; }
.r-kosten .ms-cost { box-shadow: -0.06em 0.07em 0 #111; }
.r-bild { flex: 0 0 43%; margin: 0 1.1cqw; border: .55cqw solid #0b0b10; background: #1b1d33; position: relative; overflow: hidden; }
.r-bild svg, .r-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-bild .zeichen { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34cqw; color: #fff; text-shadow: 0 1cqw 3cqw #0009; }
.r-typ { font-size: 4.5cqw; }
.r-typ .ss { font-size: 6.4cqw; flex: none; }
.r-text { flex: 1; min-height: 0; margin: 0 1.1cqw; padding: 2.2cqw 2.6cqw; background: linear-gradient(180deg, #f6f0de, #e9dfc4); border: .45cqw solid #0007; font: 400 4.25cqw/1.32 var(--schrift); overflow: hidden; display: flex; flex-direction: column; gap: 1.4cqw; position: relative; isolation: isolate; }
/* Wasserzeichen im Textfeld, wie auf gedruckten Karten */
.r-text > .wasserzeichen { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; font-size: 38cqw; line-height: 1; color: #2a2238; opacity: .11; pointer-events: none; }
.r-text em { font-style: italic; color: #3a3644; }
.r-text .stufe { display: grid; grid-template-columns: 17cqw 1fr; align-items: center; gap: 1.6cqw; padding: .9cqw 0; border-bottom: .3cqw solid #0002; font-weight: 600; }
.r-text .stufe:last-of-type { border-bottom: 0; }
.r-text .stufe .sterne { font-size: 4.6cqw; }
.r-text .stufe .stern { fill: #0003; }
.r-text .stufe .stern.voll { fill: #b98613; filter: none; }
.r-text .stufe.erreicht { color: #6b4a00; }
.r-pt { position: absolute; right: 2.2cqw; bottom: 1.1cqw; padding: .5cqw 3cqw .3cqw; border-radius: 3cqw / 50%; background: linear-gradient(180deg, #fbf7ea, #dcd3bb); box-shadow: 0 .5cqw 0 #0006, inset 0 0 0 .35cqw #0005; font: 800 5.6cqw/1.2 var(--titel); }
.r-fuss { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.3cqw 1.4cqw 1.6cqw; color: #c8c8d4; font: 400 2.7cqw/1 var(--schrift); white-space: nowrap; overflow: hidden; }

/* Set-Symbol in Seltenheitsfarbe */
.ss.s-common { color: #17151c; }
.ss.s-uncommon { background: linear-gradient(120deg, #6b7885, #dfe7ee 45%, #6b7885); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss.s-rare { background: linear-gradient(120deg, #8a6a1c, #f3dc8b 45%, #8a6a1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss.s-mythic { background: linear-gradient(120deg, #b23b12, #ffb25c 45%, #b23b12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auf-dunkel .ss.s-common, .ss.s-common.auf-dunkel { color: #e9e6f2; }

/* ------------------------------------------------------------------ Booster und Gutschein */
.booster { --bb: 118px; --f1: #1d7f86; --f2: #6b3fa8; width: var(--bb); aspect-ratio: 5 / 8; position: relative; container-type: inline-size; flex: none; filter: drop-shadow(0 12px 18px #000a); }
.booster-huelle { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(155deg, color-mix(in srgb, var(--f1) 85%, #fff) 0%, var(--f1) 30%, var(--f2) 72%, color-mix(in srgb, var(--f2) 70%, #000) 100%);
  --zahn: 6.5cqw;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zahn) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zahn) 51% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zahn) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zahn) 51% repeat-x; }
.booster-kunst { position: absolute; inset: 9% 0 9%; background-size: cover; background-position: center 25%; opacity: .78; mix-blend-mode: luminosity; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18% 62%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18% 62%, transparent); }
.booster-falz { position: absolute; left: 0; right: 0; height: 8.5%; background: repeating-linear-gradient(90deg, #ffffff38 0 1.2cqw, #0000002e 1.2cqw 2.4cqw); }
.booster-falz.oben { top: 0; border-bottom: .6cqw solid #0003; }
.booster-falz.unten { bottom: 0; border-top: .6cqw solid #0003; }
.booster-inhalt { position: absolute; inset: 12% 6% 12%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; text-align: center; color: #fff; gap: 2cqw; }
.booster-inhalt .ss, .booster-inhalt .ms { font-size: 44cqw; text-shadow: 0 1.4cqw 0 #0005, 0 0 8cqw #fff5; color: #fff; }
.booster-welt { font: 800 12.5cqw/1 var(--titel); text-shadow: 0 .8cqw 0 #0007; letter-spacing: .01em; }
.booster-art { font: 700 6.6cqw/1.15 var(--schrift); padding: 1.6cqw 3.4cqw; background: #0b0d1fd9; border-radius: 1em; white-space: nowrap; }
/* Hülle mit Originalillustration und Magic-Logo */
.booster.mit-kunst .booster-kunst { inset: 0; opacity: 1; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; background-size: cover; background-position: center 28%; }
.booster.mit-kunst .booster-falz { background: repeating-linear-gradient(90deg, #ffffff2e 0 1.2cqw, #00000040 1.2cqw 2.4cqw), #0006; }
.booster-inhalt.mit-logo { grid-template-rows: auto 1fr auto auto; }
.booster-logo { width: 80%; height: auto; display: block; align-self: start; filter: drop-shadow(0 .8cqw 1.4cqw #000d); }
.booster.mit-kunst .booster-inhalt .ss, .booster.mit-kunst .booster-inhalt .ms { font-size: 19cqw; align-self: end; text-shadow: 0 .8cqw 0 #0008, 0 0 5cqw #000a; }
/* Foto des echten Boosters (Einstellung packfoto) */
.booster.foto { aspect-ratio: auto; }
.booster-foto { width: 100%; height: auto; display: block; }
.booster-menge { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; color: #fff; box-shadow: 0 .6cqw 2cqw #0009; }
.booster-glanz { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 30%, #ffffffb3 46%, transparent 58%); background-size: 280% 100%; animation: glanz 4.2s ease-in-out infinite; }
@keyframes glanz { 0%, 55% { background-position: 120% 0; } 100% { background-position: -80% 0; } }

.gutschein { --gb: 290px; width: min(var(--gb), 100%); position: relative; color: var(--tinte); padding: 14px 18px 16px 28px; display: grid; gap: 4px; text-align: left;
  background: linear-gradient(180deg, var(--pergament), var(--pergament-2));
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 9px, #000 9.5px) 0 0 / 100% 26px; mask: radial-gradient(circle at 0 50%, #0000 9px, #000 9.5px) 0 0 / 100% 26px;
  filter: drop-shadow(0 8px 14px #0008); }
.gutschein-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.gutschein-art { font: 700 .8rem/1 var(--schrift); color: #7a5a12; }
.gutschein-grund { font-size: .8rem !important; opacity: .75; }
.gutschein h4 { font-size: 1.3rem; color: var(--tinte); }
.gutschein p { font-size: .9rem; color: #46425c; }
.gutschein .stempel { rotate: 5deg; font: 800 .76rem/1 var(--schrift); padding: .4em .65em; border: 2.5px solid currentColor; border-radius: 6px; color: #b13a1b; opacity: .85; text-align: left; }
.gutschein.eingeloest { filter: grayscale(.5) brightness(.82) drop-shadow(0 4px 8px #0006); }
.gutschein.eingeloest .stempel { color: #2f7d4f; }

/* ------------------------------------------------------------------ Zauberbuch */
.buch-kopf { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.buch-kopf > * { min-width: 0; max-width: 100%; }
.buch-kopf h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-gruppe { display: flex; flex-wrap: wrap; gap: 2px; background: #ffffff10; border-radius: 9px; padding: 3px; max-width: 100%; }
.wahl { background: none; border: 0; padding: .45em .85em; border-radius: 7px; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: .92rem; display: inline-flex; gap: .4em; align-items: center; }
.wahl[aria-pressed="true"] { background: var(--nacht-4); color: #fff; }
.wahl:hover { color: #fff; }
.welten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 22px; }
.weltstand { --ecke: 14px; padding: 14px 18px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; --linie: color-mix(in srgb, var(--f1) 70%, transparent); }
.weltstand .ss { grid-row: span 2; font-size: 2.6rem; color: #fff; }
.weltstand b { font: 700 1.2rem/1.1 var(--titel); }
/* Welt mit der Illustration ihrer Booster-Hülle, nach links ins Dunkel verlaufend */
.weltstand.mit-kunst { background: linear-gradient(90deg, #141a4c 0%, #141a4cf0 38%, #141a4c99 66%, #141a4c33 100%), var(--welt-kunst) right 32% / cover no-repeat, #131945; }
.weltstand.mit-kunst .ss, .weltstand.mit-kunst b { text-shadow: 0 2px 8px #000c; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.raster .karte { --b: 100%; width: 100%; }
.platz { display: grid; gap: 7px; justify-items: center; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-align: center; min-width: 0; }
.platz[disabled] { cursor: default; }
.platz-name { font-size: .84rem; line-height: 1.25; color: var(--text-2); max-width: 100%; overflow-wrap: anywhere; }
.platz.fehlt .karte { opacity: .38; filter: saturate(.4); }
.platz.fehlt .platz-name { color: var(--text-3); }
.platz:not([disabled]):hover .karte-innen { translate: 0 -5px; }
.selten-punkt { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .4em; background: #8d90a8; vertical-align: .05em; }
.selten-punkt.uncommon { background: var(--silber); }
.selten-punkt.rare { background: var(--gold); }
.selten-punkt.mythic { background: var(--mythic); }
.leer { --ecke: 16px; padding: 34px 26px; text-align: center; color: var(--text-2); display: grid; gap: 8px; justify-items: center; }
.leer h2 { font-size: 1.6rem; color: var(--text); }

/* ------------------------------------------------------------------ Belohnungen, Protokoll */
.abschnitt { margin-bottom: 30px; }
.abschnitt > h2 { font-size: 1.6rem; margin-bottom: 14px; }
.gutscheine { display: flex; flex-wrap: wrap; gap: 20px; }
.verlauf { display: grid; gap: 10px; }
.verlauf-zeile { --ecke: 10px; --linie: #ffffff22; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 16px; align-items: center; }
.verlauf-karten { display: flex; gap: 6px; flex-wrap: wrap; }
.verlauf-karten .karte { --b: 46px; }
.verlauf-karten .karte-innen { box-shadow: 0 2px 6px #0008; }

.protokoll { width: 100%; border-collapse: collapse; font-size: .95rem; }
.protokoll th { text-align: left; font-weight: 600; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid #ffffff2a; white-space: nowrap; }
.protokoll td { padding: 10px 12px; border-bottom: 1px solid #ffffff12; vertical-align: middle; }
.protokoll td.zahl, .protokoll th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.protokoll tr.nicht td { color: var(--text-3); }
.protokoll .punkte { font: 700 1.2rem/1 var(--titel); }
.tabellenrahmen { --ecke: 16px; padding: 8px 10px 14px; overflow-x: auto; }
.grund { font-size: .82rem; color: #ffb38a; }

/* ------------------------------------------------------------------ Bühne */
.buehne { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(14px, 3vw, 40px); overflow-y: auto;
  background: radial-gradient(ellipse at 50% 38%, #1d2a78f2, #090b20fa 70%); animation: aufblenden .35s ease-out; }
@keyframes aufblenden { from { opacity: 0; } }
.buehne.geht { animation: abblenden .3s ease-in forwards; }
@keyframes abblenden { to { opacity: 0; } }
.szene { display: grid; gap: 22px; justify-items: center; text-align: center; width: min(1100px, 100%); }
.szene h1 { font-size: clamp(2.1rem, 5.4vw, 4rem); text-wrap: balance; }
.szene .unterzeile { color: var(--text-2); font-size: 1.12rem; max-width: 52ch; }
.szene-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.szene > * { animation: hoch .5s var(--weich) backwards; }
.szene > *:nth-child(2) { animation-delay: .08s; } .szene > *:nth-child(3) { animation-delay: .16s; } .szene > *:nth-child(4) { animation-delay: .24s; } .szene > *:nth-child(5) { animation-delay: .32s; }
@keyframes hoch { from { opacity: 0; translate: 0 18px; } }

.ergebnis { display: grid; justify-items: center; gap: 14px; }
.ergebnis-zahl { font: 800 clamp(4.4rem, 13vw, 8rem)/.9 var(--titel); font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, var(--blitz) 60%, #6f9cff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px #8fe8ff55); }
.ergebnis-zahl + span { display: block; font-weight: 500; color: var(--text-2); margin-top: 6px; }
.ergebnis .sterne { font-size: clamp(2.6rem, 6vw, 3.8rem); gap: 8px; }
.ergebnis .stern:not(.voll) { fill: #ffffff14; stroke: #ffffff59; stroke-width: 1; }
.ergebnis .stern.frisch:nth-child(2) { animation-delay: .25s; } .ergebnis .stern.frisch:nth-child(3) { animation-delay: .5s; }
.beute { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; }
.beute-marke { --ecke: 8px; padding: .5em .9em; background: #ffffff14; font-weight: 600; display: inline-flex; gap: .5em; align-items: center; }
.beute-marke.mana { --linie: #8fe8ffaa; color: var(--blitz-2); }
.beute-marke.rekord { --linie: #e6c067cc; color: #f6e2a8; }
.beute-marke.warnung { --linie: #ff8a70aa; color: #ffd0c2; }

.feier-zeichen { font-size: clamp(110px, 20vw, 190px); line-height: 1; position: relative; display: grid; place-items: center; width: 1.5em; height: 1.5em; }
.feier-zeichen::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, #ffffff22 0 6deg, transparent 6deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%); animation: kreisen 40s linear infinite; }
.feier-zeichen i, .feier-zeichen b { background: linear-gradient(150deg, #fff, var(--kf1) 45%, var(--kf2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 22px #0009); animation: wachsen .9s var(--weich) backwards; }
.feier-zeichen b { font: 800 .8em/1 var(--titel); }
@keyframes wachsen { from { scale: .2; opacity: 0; rotate: -25deg; } }
.feier-kunst { position: absolute; inset: 4%; border-radius: 50%; background-size: cover; background-position: center 22%;
  box-shadow: 0 0 0 4px #ffffff40, 0 0 0 9px #0b0d1f, 0 0 70px 6px var(--kf1); animation: wachsen .9s var(--weich) backwards, schwenk 26s ease-in-out 1s infinite alternate; }
@keyframes schwenk { from { background-size: 100% auto; background-position: 40% 22%; } to { background-size: 128% auto; background-position: 62% 30%; } }
.feier-zeichen.mit-kunst { margin-bottom: .14em; }
.feier-zeichen.mit-kunst > i, .feier-zeichen.mit-kunst > b { position: absolute; left: 50%; bottom: -13%; translate: -50% 0; font-size: .34em; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%;
  background: #0b0d1f; -webkit-background-clip: border-box; background-clip: border-box; color: var(--kf1); box-shadow: 0 0 0 3px var(--kf1), 0 6px 18px #000a; filter: none; animation-delay: .35s; }
.feier-zeichen.mit-kunst > b { font: 800 .3em/1 var(--titel); width: 2.15em; height: 2.15em; padding-top: .12em; }

.tisch { display: flex; flex-wrap: wrap; gap: 26px 30px; justify-content: center; align-items: flex-end; }
.tisch-stueck { display: grid; gap: 10px; justify-items: center; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; max-width: 300px; }
.tisch-stueck:focus-visible, .ablage-stueck:focus-visible, .platz:focus-visible, .knoten:focus-visible { outline: 2px solid var(--blitz); outline-offset: 6px; border-radius: 10px; }
.tisch-stueck .booster { --bb: 150px; animation: schweben 3.4s ease-in-out infinite; }
.tisch-stueck .karte { --b: 150px; }
.tisch-stueck:nth-child(2n) .booster { animation-delay: -1.1s; }
.tisch-stueck.erledigt { opacity: .45; cursor: default; }
.tisch-stueck.erledigt .booster { animation: none; filter: grayscale(.8); }
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* Booster öffnen */
.oeffnen { display: grid; gap: 24px; justify-items: center; width: min(1180px, 100%); }
.oeffnen .booster { --bb: clamp(170px, 26vh, 250px); cursor: pointer; }
.oeffnen .booster.wartet { animation: schweben 3s ease-in-out infinite; }
.oeffnen .booster.ruettelt { animation: ruetteln .5s linear; }
@keyframes ruetteln { 0%, 100% { rotate: 0deg; } 15% { rotate: -5deg; } 30% { rotate: 5deg; } 45% { rotate: -4deg; } 60% { rotate: 4deg; } 80% { rotate: -2deg; } }
.oeffnen .booster.auf { animation: wegsinken .7s var(--weich) forwards; pointer-events: none; }
@keyframes wegsinken { 30% { scale: 1.12; filter: brightness(2.4) drop-shadow(0 0 40px #fff); } 100% { scale: .5; opacity: 0; translate: 0 120px; } }
.faecher { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 16px; --b: 190px; perspective: 1600px; }
.faecher .karte { --b: var(--kb, 190px); transition: translate .7s var(--weich), rotate .7s var(--weich), scale .3s var(--weich), filter .4s; }
.faecher .karte.klickbar:hover { scale: 1.04; }
.faecher .karte.offen.selten-uncommon .karte-innen { box-shadow: 0 10px 26px #000a, 0 0 22px 2px #c5cfda66; }
.faecher .karte.offen.selten-rare .karte-innen { box-shadow: 0 10px 26px #000a, 0 0 30px 6px #e6c067aa; }
.faecher .karte.offen.selten-mythic .karte-innen { box-shadow: 0 10px 26px #000a, 0 0 38px 10px #f37a3ccc; }
.faecher .karte.offen.selten-rare, .faecher .karte.offen.selten-mythic { animation: aufleuchten 1s ease-out; }
@keyframes aufleuchten { 0% { filter: brightness(2.6); scale: 1.14; } 100% { filter: brightness(1); scale: 1; } }
.kartenzeile { display: grid; gap: 8px; justify-items: center; }
.kartenname { font-size: .86rem; color: var(--text-2); max-width: var(--kb, 190px); line-height: 1.25; min-height: 2.5em; opacity: 0; transition: opacity .4s .4s; }
.kartenzeile.offen .kartenname { opacity: 1; }

/* Karte groß ansehen */
.nahsicht { display: grid; grid-template-columns: auto minmax(0, 340px); gap: 34px; align-items: center; text-align: left; }
.nahsicht .karte { --b: min(380px, 78vw, 52vh); }
.nahsicht h2 { font-size: 2rem; }
.nahsicht dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0 0; }
.nahsicht dt { color: var(--text-3); }
.nahsicht dd { margin: 0; }

/* Eltern */
.eltern { --ecke: 18px; width: min(680px, 100%); padding: 26px 28px; text-align: left; display: grid; gap: 18px; }
.eltern h2 { font-size: 1.8rem; }
.eltern label { display: grid; gap: 6px; font-weight: 600; }
.eltern input { font: 700 1.3rem/1 var(--taste); padding: .55em .7em; border-radius: 8px; border: 2px solid #ffffff33; background: #0b0d1f; color: var(--text); width: 9em; letter-spacing: .3em; }
.eltern-liste { display: grid; gap: 12px; }
.eltern-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ffffff1a; }
.eltern dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: .9rem; }
.eltern dt { color: var(--text-3); } .eltern dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Meldungen, Demo */
.meldungen { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 95; display: grid; gap: 10px; justify-items: center; pointer-events: none; width: min(560px, calc(100vw - 28px)); }
.meldung { --ecke: 10px; padding: 12px 18px; background: #1d2764f5; box-shadow: 0 8px 30px #000b; animation: hoch .4s var(--weich); pointer-events: auto; }
.meldung.fehler { --linie: #ff8a70; background: #4a1d18f5; }
.meldung.geht { animation: abblenden .4s forwards; }

.demo { position: fixed; right: 14px; bottom: 14px; z-index: 70; --ecke: 12px; --linie: #e6c067aa; padding: 12px 14px; background: #241d3df2; display: grid; gap: 8px; width: 268px; font-size: .88rem; }
.demo b { font: 700 1rem/1 var(--titel); color: #f6e2a8; }
.demo select { font: inherit; padding: .35em .5em; background: #0b0d1f; color: var(--text); border: 1px solid #ffffff33; border-radius: 6px; width: 100%; }
.demo-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-knoepfe button { font: 600 .84rem/1 var(--schrift); padding: .6em .4em; background: #ffffff17; border: 0; border-radius: 6px; cursor: pointer; color: var(--text); }
.demo-knoepfe button:hover { background: #ffffff2b; }
.demo.zu { width: auto; }
.demo.zu > :not(.demo-kopf) { display: none; }
.demo-kopf { display: flex; justify-content: space-between; gap: 14px; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; width: 100%; }

/* ------------------------------------------------------------------ Üben */
/* Fingerfarben wie in TIPP10 (rot, blau, grün, gelb), heller für den dunklen Grund */
:root { --f-zeige: #f59a8f; --f-mittel: #86bdf7; --f-ring: #8fdc9f; --f-klein: #f3d877; }
.ueben-knopf { margin-top: 2px; }
.ueben { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
.ueben-kopf { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; justify-content: space-between; }
.ueben-kopf h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.ueben-knoepfe { display: flex; gap: 10px; }
.ueben-flaeche { --ecke: 18px; position: relative; padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 30px); min-height: 170px; cursor: text; overflow: hidden; }
.ueben-flaeche[data-phase="fertig"] { min-height: 330px; }
.ueben-eingabe { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; resize: none; border: 0; padding: 0; caret-color: transparent; }
.laufband-rahmen { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.laufband-zeile { position: relative; white-space: pre; font: 500 clamp(1.7rem, 4.4vw, 2.6rem)/1.35 var(--taste); color: var(--text); width: max-content; }
.laufband-zeile.sanft { transition: transform .12s var(--weich); }
.laufband-zeile span { display: inline-block; min-width: .6ch; border-radius: 5px; }
.laufband-zeile .fertig { color: var(--text-3); }
.laufband-zeile .falsch { color: var(--glut-2); text-decoration: underline wavy var(--glut) 2px; text-underline-offset: 5px; }
.laufband-zeile .zeichen-steuer { color: var(--blitz); opacity: .8; }
.laufband-zeile .fertig.zeichen-steuer { opacity: .4; }
.laufband-zeile .hier { color: var(--tinte); background: var(--blitz-2); box-shadow: 0 0 0 3px var(--blitz), 0 0 22px #8fe8ff88; }
.laufband-zeile .hier.fehler { background: var(--glut-2); box-shadow: 0 0 0 3px var(--glut), 0 0 22px #ff704399; }
.laufband-zeile .hier.korrigieren { background: var(--gold); box-shadow: 0 0 0 3px var(--glut); }
.laufband-vorschau { margin-top: 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; font: 400 1.15rem/1.4 var(--taste); color: var(--text-3); }
.ueben-flaeche.fehlschlag { animation: wackeln .22s; }
@keyframes wackeln { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.ueben-flaeche[data-phase="laeuft"] .ueben-schild:empty { display: none; }
.ueben-schild { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 18px; background: #0d1234e6; z-index: 3; }
.ueben-schild:empty { display: none; }
.ueben-schild b { font: 700 clamp(1.5rem, 3vw, 2rem)/1.1 var(--titel); }
.ueben-ergebnis { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 6px 0; }
.ueben-ergebnis span { display: grid; justify-items: center; }
.ueben-ergebnis b { font: 800 2.4rem/1 var(--titel); color: var(--gold); }
.ueben-ergebnis small { color: var(--text-2); }
.ueben-dialog { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: #0d1234f2; z-index: 4; text-align: center; padding: 18px; }
.ueben-dialog p { font: 700 1.4rem/1.2 var(--titel); }
.ueben-dialog-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ueben-leiste { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; }
.ueben-status { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.ueben-status span { display: grid; }
.ueben-status small { font-size: .78rem; color: var(--text-3); }
.ueben-status b { font: 700 1.35rem/1.1 var(--titel); font-variant-numeric: tabular-nums; }
.ueben-finger { font-weight: 600; color: var(--blitz-2); }
.tastatur-platz { display: flex; justify-content: center; }
.tastatur { width: 100%; max-width: 860px; height: auto; }
.tastatur .taste rect, .tastatur .taste path { fill: #1a2258; stroke: #8fe8ff33; stroke-width: 1; transition: fill .08s; }
.tastatur text { fill: var(--text-2); font: 500 13px var(--taste); pointer-events: none; }
.tastatur text.gross, .tastatur text.unten { font-size: 15px; fill: var(--text); }
.tastatur text.oben { font-size: 11px; }
.tastatur text.altgr { font-size: 10px; text-anchor: end; fill: var(--text-3); }
.tastatur text.name { font: 400 9px var(--schrift); }
.tastatur .marke { fill: var(--text-3); }
.tastatur .taste.an[data-farbe="1"] :is(rect, path), .tastatur .taste.grund[data-farbe="1"] :is(rect, path) { fill: var(--f-zeige); }
.tastatur .taste.an[data-farbe="2"] :is(rect, path), .tastatur .taste.grund[data-farbe="2"] :is(rect, path) { fill: var(--f-mittel); }
.tastatur .taste.an[data-farbe="3"] :is(rect, path), .tastatur .taste.grund[data-farbe="3"] :is(rect, path) { fill: var(--f-ring); }
.tastatur .taste.an[data-farbe="4"] :is(rect, path), .tastatur .taste.grund[data-farbe="4"] :is(rect, path) { fill: var(--f-klein); }
.tastatur .taste.grund :is(rect, path) { opacity: .55; }
.tastatur .taste.an :is(rect, path) { stroke: #fff; stroke-width: 2; }
.tastatur .taste:is(.an, .grund) text { fill: var(--tinte); }
.frei { --ecke: 16px; padding: clamp(16px, 2.4vw, 26px); display: grid; gap: 12px; }
.frei .tafel-kopf { margin-bottom: 0; }
.frei.zu .frei-themen { opacity: .45; }
.frei-themen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px 22px; }
.frei-thema h3 { font-size: 1.15rem; margin-bottom: 6px; }
.frei-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.frei-text { font-size: .88rem; padding: .3em .7em; border-radius: 999px; background: #ffffff12; color: var(--text); text-decoration: none; border: 1px solid #8fe8ff33; }
a.frei-text:hover, a.frei-text:focus-visible { background: #8fe8ff2b; }
span.frei-text { cursor: not-allowed; }

/* ------------------------------------------------------------------ Anmeldung (Webdienst) */
body.ohne-profil .reiter, body.ohne-profil .stand, body.ohne-profil #eltern-knopf { display: none; }
.profil { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.profil span { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf:has(.profil:not([hidden])) { grid-template-columns: auto 1fr auto auto; }
.profil .ms { font-size: 1.5rem; color: var(--gold); }
.anmelden-seite { display: grid; gap: 22px; max-width: 980px; margin: 18px auto 0; }
.anmelden-kopf h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.anmelden-kopf p { color: var(--text-2); margin-top: 6px; }
.anmelden-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 22px; align-items: start; }
.anmeldung { --ecke: 16px; padding: clamp(18px, 2.6vw, 28px); display: grid; gap: 12px; }
.anmeldung h2 { font-size: 1.55rem; }
.anmeldung label, .eltern-zugang label { display: grid; gap: 6px; font-weight: 600; }
.anmeldung input[type="text"], .eltern-zugang input { font: 400 1.05rem/1.3 var(--schrift); padding: .7em .8em; border-radius: 8px; border: 1px solid #8fe8ff55; background: #0b1035; color: var(--text); width: 100%; }
.anmeldung .knopf { justify-self: start; }
.beschriftung { display: block; font-weight: 600; margin-bottom: 6px; }
.symbol-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.symbol { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; border: 1px solid #8fe8ff33; background: #ffffff0d; cursor: pointer; font-size: .82rem; }
.symbol input { position: absolute; opacity: 0; pointer-events: none; }
.symbol .ms { font-size: 2rem; color: var(--text-2); }
.symbol:has(input:checked) { border-color: var(--gold); background: #e6c06726; }
.symbol:has(input:checked) .ms { color: var(--gold); }
.symbol:has(input:focus-visible) { outline: 3px solid var(--blitz); outline-offset: 2px; }
.anmelden-eltern { color: var(--text-2); }
.anmelden-eltern summary { cursor: pointer; }
.eltern-zugang { display: grid; gap: 10px; max-width: 360px; margin-top: 12px; }
.eltern-zugang .knopf { justify-self: start; }
.einladung-code b { font: 700 1.3rem/1.4 var(--taste); color: var(--gold); letter-spacing: .06em; }
.zauberwort-zeigen { max-width: 640px; margin: 24px auto; text-align: center; justify-items: center; }
.zauberwort-zeigen .knopf { justify-self: center; }
.zauberwort { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.zauberwort li { font: 700 1.5rem/1 var(--taste); padding: .5em .7em; border-radius: 8px; background: var(--pergament); color: var(--tinte); }

/* ------------------------------------------------------------------ Schmal */
@media (max-width: 1080px) {
  .akademie { grid-template-columns: minmax(0, 1fr); }
  .akademie > .spalte.rand { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); position: static; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .kopf { grid-template-columns: 1fr auto; }
  .reiter { grid-column: 1 / -1; order: 3; }
  .kopf:has(.profil:not([hidden])) { grid-template-columns: 1fr auto auto; }
  .profil span { display: none; }
  .stand { grid-template-columns: 1fr 1fr; order: 4; }
  .stand-teil:last-child { grid-column: 1 / -1; }
  .stand-zahl { font-size: 1.7rem; }
  .held { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .held > .karte { --b: 190px; }
  .kapitel { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; padding: 14px; }
  .wappen { width: 56px; height: 76px; font-size: 30px; }
  .kapitel-lohn { margin-left: 0; flex-basis: 100%; }
  .nahsicht { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .nahsicht dl { text-align: left; }
  .demo { right: 8px; bottom: 8px; }
  .ueben-status b { font-size: 1.1rem; }
  body:has(#demo .demo) .app { padding-bottom: 96px; }   /* Platz unter dem Demo-Kasten im Testprofil */
}
@media (max-width: 520px) {
  .stand { grid-template-columns: 1fr; }
  .stand-teil:last-child { grid-column: auto; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 10px; }
  .knoten { flex-basis: 70px; min-width: 64px; }
  .lohn-marke { white-space: normal; }
  .held { padding: 16px; }
  .kapitel { grid-template-columns: minmax(0, 1fr); }
  .wappen { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .strom { animation: none; }
}