@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");
font-weight:200 800;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-wght-normal.woff2) format("woff2");
font-weight:100 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-wght-italic.woff2) format("woff2");
font-weight:100 900;font-style:italic;font-display:swap}
:root{
--tisch:#e7eaee;--papier:#fff;--tinte:#1c2431;--schiefer:#5d6777;--linie:#d3d9e0;--hauch:#f2f4f7;
--blau:#2a5ca6;--blau-hell:#e3ebf7;--gut:#2e7d4f;--offen:#a86a12;--schwach:#7a8494;--warn:#c2412d;
--mw:#f4edcf;--mw-rand:#c9bd8c;--mu:#3e7cc0;--mb:#3b3640;--mr:#cf4b2c;--mg:#3c8c55;--mc:#b9b4aa;
--kopf:"Bricolage",system-ui,sans-serif;--text:"Public Sans",system-ui,"Segoe UI",sans-serif;
--gut-hauch:#e1f1e7;--schlecht-hauch:#fbe5e1;
--rund:14px;--rund-klein:8px}
@media (prefers-color-scheme:dark){:root{
--tisch:#11151b;--papier:#1a1f27;--tinte:#e5e9ef;--schiefer:#9aa3b2;--linie:#2c3440;--hauch:#212833;
--blau:#8db3ee;--blau-hell:#22314a;--gut:#6cc28e;--offen:#e2ae57;--schwach:#8c96a6;--warn:#ee7a66;--mb:#14121a;
--gut-hauch:#1b3326;--schlecht-hauch:#3b2320}
.mb{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tisch);color:var(--tinte);font:16px/1.6 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--blau);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--kopf);letter-spacing:-.015em;line-height:1.15;margin:0}
h2{font-size:1.45rem;font-weight:700}
h3{font-size:1.05rem;font-weight:650}
p{margin:.5em 0}
.leise{color:var(--schiefer)}
.klein{font-size:.88rem}
.rahmen{max-width:1160px;margin:0 auto;padding:0 16px}

/* Kopfleiste */
.leiste{background:var(--papier);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:20}
.leiste .rahmen{display:flex;align-items:center;gap:20px;min-height:58px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--kopf);font-weight:750;font-size:1.1rem;color:var(--tinte);text-decoration:none}
.marke .pips{gap:3px}.marke .pip{width:9px;height:9px}
.leiste nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.leiste nav a{color:var(--schiefer);text-decoration:none;padding:6px 10px;border-radius:var(--rund-klein);font-size:.95rem;white-space:nowrap}
.leiste nav a:hover{background:var(--hauch);color:var(--tinte)}
.leiste a.sprache{border:1px solid var(--linie);font-weight:700;font-size:.85rem;color:var(--tinte);text-decoration:none;
padding:5px 10px;border-radius:var(--rund-klein);margin-left:-8px}
.leiste a.sprache:hover{background:var(--hauch)}

/* Stärken/Schwächen und Gelerntes */
.procontra{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 22px}
.procontra>div{background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund);padding:14px 18px}
.procontra h3{font-size:.95rem;margin:0 0 8px}.procontra ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.procontra li{display:flex;gap:10px;align-items:baseline;font-size:.95rem}
.procontra li>span:first-child{font-weight:800;width:14px;flex:none;text-align:center}
.procontra li.pro>span:first-child{color:var(--gut)}.procontra li.contra>span:first-child{color:var(--warn)}
.kombos{display:grid;gap:10px}
.schritte{padding-left:20px;display:grid;gap:8px;margin:8px 0}
.gelernt-liste{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.gelernt-liste [class^=tag-]{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:99px;margin-right:4px}
.tag-besser{background:var(--gut-hauch);color:var(--gut)}.tag-schlechter{background:var(--schlecht-hauch);color:var(--warn)}
.tag-gleich{background:var(--hauch);color:var(--schiefer)}
/* Mana-Punkte */
.pips{display:inline-flex;gap:4px;vertical-align:middle}
.pip{display:inline-block;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.mw{background:var(--mw);box-shadow:inset 0 0 0 1px var(--mw-rand)}.mu{background:var(--mu)}.mb{background:var(--mb)}
.mr{background:var(--mr)}.mg{background:var(--mg)}.mc{background:var(--mc)}

/* Startseite */
.hero{padding:48px 0 28px}
.hero h1{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:780;max-width:16ch}
.hero .lead{font-size:1.15rem;max-width:62ch;margin-top:14px}
.hero .stand{margin-top:10px}
.hero.mit-zahlen{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:center}
.kennzahlen{display:grid;grid-template-columns:1fr 1fr;background:var(--papier);border:1px solid var(--linie);
border-radius:var(--rund);overflow:hidden}
.kennzahl{padding:16px 18px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:0 -1px -1px 0;
display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none}
.kennzahl span{font-size:.82rem;color:var(--schiefer)}
.kennzahl b{font-family:var(--kopf);font-weight:760;font-size:1.9rem;line-height:1.15;letter-spacing:-.01em}
.kennzahl small{font-size:.8rem;color:var(--schiefer)}
.kennzahl.spitze b{font-size:1.2rem;line-height:1.25;margin:6px 0 3px;overflow-wrap:anywhere}
a.kennzahl.spitze:hover{background:var(--hauch)}
@media (max-width:899px){.hero.mit-zahlen{grid-template-columns:1fr;gap:22px}
.kennzahl{padding:12px 14px}.kennzahl b{font-size:1.45rem}.kennzahl.spitze b{font-size:1.05rem}}
.podium{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin:8px 0 40px;align-items:end}
.platz{position:relative;display:block;border-radius:var(--rund);overflow:hidden;background:var(--mb);color:#fff;
text-decoration:none;aspect-ratio:4/3;isolation:isolate}
.platz:first-child{aspect-ratio:5/4}
.platz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.platz:hover img{transform:scale(1.04)}
.platz::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,18,0) 35%,rgba(10,12,18,.88))}
.platz .inhalt{position:absolute;left:0;right:0;bottom:0;padding:16px 18px}
.platz .rang{font-family:var(--kopf);font-weight:800;font-size:2.6rem;line-height:1;opacity:.95}
.platz:first-child .rang{font-size:3.4rem}
.platz h3{color:#fff;font-size:1.15rem;margin:6px 0 4px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.platz:first-child h3{font-size:1.4rem}
.platz .werte{font-size:.92rem;opacity:.92}
.platz .pips{margin-left:6px}
.platz .nachweis{position:absolute;top:8px;right:10px;font-size:.66rem;opacity:.8;text-shadow:0 1px 4px rgba(0,0,0,.8);max-width:80%;text-align:right;line-height:1.25}

.abschnitt{padding:28px 0}
.mehr-zeile{display:none}.zeige-alle .mehr-zeile{display:table-row}
.alle-knopf{display:block;width:100%;background:var(--hauch);border:0;border-top:1px solid var(--linie);padding:12px;
font:inherit;font-weight:700;color:var(--blau);cursor:pointer}.alle-knopf:hover{background:var(--blau-hell)}
.zeige-alle .alle-knopf{display:none}
.fragen{display:grid;gap:10px;margin-top:14px;max-width:880px}
.fragen details{background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund);padding:0 18px}
.fragen summary{list-style:none;cursor:pointer;padding:15px 0;font-family:var(--kopf);font-weight:650;font-size:1.05rem;
color:var(--tinte);display:flex;justify-content:space-between;align-items:center;gap:12px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--blau);font-size:1.3rem;line-height:1}
.fragen details[open] summary::after{content:"–"}
.fragen details>div{padding:0 0 16px;color:var(--schiefer)}
.fragen details>div p:first-child{margin-top:0}
.hero-knoepfe{margin-top:14px}.klassen-satz{margin:16px 0 12px}
.feld .podium{margin:0 0 8px}
.abschnitt>h2{margin-bottom:6px}
.abschnitt>.leise{max-width:70ch}

.nur-fans{margin:.6em 0 .8em;padding:.55em .8em;border-left:3px solid var(--blau);background:color-mix(in srgb,var(--blau) 8%,transparent);border-radius:6px}
.nur-fans .schritte{margin:.35em 0 0;padding-left:1.3em}.nur-fans .schritte li{margin:.15em 0}
.fans-marke{display:inline-block;font-size:.78em;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--blau)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.mm-ablauf{margin-top:14px;padding:14px 18px;border:1px solid var(--linie);border-left:3px solid var(--blau);border-radius:var(--rund);background:color-mix(in srgb,var(--blau) 6%,transparent)}
.mm-schritte{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px 24px;margin:10px 0 0;padding:0}
.mm-schritte li{counter-increment:s;position:relative;padding-left:34px;margin:0;font-size:.9rem;line-height:1.4}
.mm-schritte li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--blau);color:var(--papier);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.mm-schritte b{display:block}.mm-schritte span{color:var(--schiefer)}
.mm-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin-top:20px}
.mm-karte{display:flex;flex-direction:column}.mm-karte p{margin:0 0 10px}
.mm-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px}.mm-kopf h3{margin:0 4px 0 0}.mm-kopf .neu-marke{margin-left:0}
.mm-fans{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;color:var(--blau);box-shadow:inset 0 0 0 1px var(--blau)}
.mm-fuss{margin-top:auto;padding-top:6px}.mm-fuss .knopf{margin:0}
.mm-melden{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:20px;padding:14px 18px;border:1px solid var(--linie);border-radius:var(--rund);background:var(--papier)}
.mm-melden .knopf{margin:0}
.kiwarn{color:#b26a00;font-size:.9em;cursor:help}
/* Gesamtzahlen im Kopf der Startseite */
.gesamtleiste{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:0}
.gesamtleiste li{background:var(--hauch);border:1px solid var(--linie);border-radius:99px;padding:5px 12px;font-size:.92rem;color:var(--schiefer)}
.gesamtleiste b{color:var(--tinte);font-weight:800}
/* Hinweis auf die englische Fassung */
.sprachhinweis{background:var(--blau);color:#fff;font-size:.92rem}.sprachhinweis .rahmen{display:flex;gap:12px;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.sprachhinweis a{color:#fff;font-weight:700;text-decoration:underline}.sprachhinweis button{margin-left:auto;background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer;line-height:1}
/* Reiter */
.reiter{display:flex;gap:4px;margin:18px 0 0;border-bottom:1px solid var(--linie);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}.reiter button{white-space:nowrap;flex:none}
.reiter button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font:inherit;font-weight:700;
color:var(--schiefer);cursor:pointer;margin-bottom:-1px}
.reiter button[aria-selected=true]{color:var(--tinte);border-bottom-color:var(--blau)}
.kennzahlen[hidden]{display:none}
.schaetz{margin-top:2px;white-space:nowrap}
.ueber-kopf{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.ueber-kopf .raster{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.kartenbild{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.kartenbild img{width:min(260px,70vw);aspect-ratio:488/680;border-radius:4.75%/3.5%;box-shadow:0 8px 28px rgba(0,0,0,.28);background:var(--hauch)}
.kartenbild img+img{margin-top:8px}
.liste-kopf{display:grid;grid-template-columns:1fr}
.liste-hinweis{margin:0;padding:14px 18px 0;font-size:.95rem}
.liste-kopf .kartenbild{order:-1;padding:16px 0 0}
.liste-kopf .kartenbild img{width:min(220px,60vw)}
@media(min-width:1000px){.liste-kopf:has(.kartenbild){grid-template-columns:1fr 290px}.liste-kopf .kartenbild{order:2;padding:18px 18px 18px 0;position:sticky;top:130px;align-self:start}.liste-kopf .kartenbild img{width:260px}}
.analyse{margin-top:16px}
.analyse .procontra{margin:12px 0 0}.analyse .procontra>div{background:var(--hauch);border:0}
.beleg{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:1px 7px;border-radius:99px;vertical-align:middle;white-space:nowrap}
.neu-marke{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;vertical-align:middle;background:var(--blau);color:#fff;margin-left:6px}
.beleg.b{background:#e3f1e8;color:#1f6b3a}.beleg.i{background:#fbf0d9;color:#8a5a00}.beleg.t{background:#ececf0;color:#55556a}
@media(prefers-color-scheme:dark){.beleg.b{background:#173826;color:#9fe0b6}.beleg.i{background:#3a2c10;color:#f3cd86}.beleg.t{background:#2c2c36;color:#c4c4d4}}
.analyse-raster{display:grid;grid-template-columns:1fr;gap:18px 28px;margin-top:14px}
@media(min-width:640px){.analyse-raster{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.analyse-raster{grid-template-columns:1fr 1fr 1fr}}
.analyse-raster h4{margin:0 0 6px;font-size:.95rem}
.analyse-raster ol{margin:0;padding-left:20px}.analyse-raster li{margin:5px 0;line-height:1.35}
.analyse-raster .erkl{margin:0 0 8px;min-height:2.6em}
@media(min-width:760px){.analyse-raster .erkl{min-height:4.1em}}
.analyse-raster .wert-r{float:right;font-weight:700;font-variant-numeric:tabular-nums;margin-left:8px}
.analyse-raster .zeile2{display:block;line-height:1.3;margin-top:1px}
.zugverteilung{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.zugverteilung li{display:grid;grid-template-columns:76px 1fr 44px;align-items:center;gap:8px;font-size:.9rem}
.zv-bahn{height:10px;border-radius:99px;background:var(--hauch);overflow:hidden}
.zv-bahn span{display:block;height:100%;background:var(--blau);border-radius:99px}
.zugverteilung .wert-r{float:none;text-align:right}
.analyse-raster h4 .unter{font-weight:500;margin-left:4px}

.feld{display:none;scroll-margin-top:135px}.feld.aktiv{display:block}

/* Tabellen */
.tafel{background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund);margin-top:16px;overflow:hidden}
.tafel .kopf{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px;flex-wrap:wrap;border-bottom:1px solid var(--linie)}
.suche{flex:1;min-width:200px;max-width:340px;padding:9px 12px;border-radius:var(--rund-klein);border:1px solid var(--linie);
background:var(--hauch);color:var(--tinte);font:inherit}
.rolle{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th{font-size:.84rem;color:var(--schiefer);font-weight:700;background:var(--hauch)}
td.zahl,th.zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
tbody tr:hover{background:var(--hauch)}
td.rang{font-family:var(--kopf);font-weight:750;color:var(--schiefer);width:3ch}
.tabellen-fuss{margin:10px 14px 4px}
.massstab{margin:12px 14px 0;padding:.6em .9em;border-left:3px solid var(--schiefer);background:color-mix(in srgb,var(--schiefer) 8%,transparent);border-radius:6px}
.massstab ul{margin:.3em 0 0;padding-left:1.2em}
.cmdzelle{display:flex;align-items:center;gap:12px;min-width:220px}
.cmdzelle img,.cmdzelle .ohnebild{width:58px;height:42px;border-radius:6px;object-fit:cover;flex:none;background:var(--hauch)}
.cmdzelle a{font-weight:700;text-decoration:none;color:var(--tinte)}
.nur-mobil{display:none;font-size:.82rem;color:var(--schiefer);margin-top:2px;font-variant-numeric:tabular-nums}
.nur-mobil .status{font-size:.72rem;padding:1px 7px;margin-left:2px}
.cmdzelle a:hover{color:var(--blau);text-decoration:underline}
.quote{display:flex;align-items:center;gap:10px;justify-content:flex-end;min-width:150px}
.quote .bahn{position:relative;width:90px;height:8px;border-radius:99px;background:var(--hauch);box-shadow:inset 0 0 0 1px var(--linie)}
.quote .wert{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--blau)}
.quote .schnitt{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--tinte);opacity:.55}
.status{display:inline-block;font-size:.8rem;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap}
.status.stark{color:var(--gut);background:color-mix(in srgb,var(--gut) 13%,transparent)}
.status.offen{color:var(--offen);background:color-mix(in srgb,var(--offen) 14%,transparent)}
.status.schwach{color:var(--schwach);background:color-mix(in srgb,var(--schwach) 14%,transparent)}
.legende{display:flex;gap:16px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--linie);font-size:.86rem;color:var(--schiefer)}
.leer{padding:18px 16px;color:var(--schiefer)}

/* Inhaltsblöcke */
.spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:14px}
.block{background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund);padding:20px}
.spalten>.block{display:flex;flex-direction:column}.spalten>.block>.knopf{margin-top:auto;align-self:flex-start}
.wz td:nth-child(2){white-space:nowrap}
.block h3{margin-bottom:8px}
.block ul{padding-left:20px;margin:8px 0}
.block li{margin:4px 0}
.knopf{display:inline-block;background:var(--blau);color:var(--papier);border:0;border-radius:var(--rund-klein);padding:10px 16px;
font:inherit;font-weight:700;cursor:pointer;text-decoration:none;margin:10px 8px 0 0}
.knopf.zweit{background:transparent;color:var(--blau);box-shadow:inset 0 0 0 1.5px var(--blau)}
.knopf:hover{filter:brightness(1.08)}

/* Commander-Seite */
.banner{position:relative;color:#fff;background:var(--mb);isolation:isolate;overflow:hidden}
.banner img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(10,12,18,.92) 0%,rgba(10,12,18,.7) 45%,rgba(10,12,18,.25) 100%)}
.banner .rahmen{padding-top:30px;padding-bottom:30px;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end}
.banner-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:auto}
.banner a.zurueck{color:#fff;opacity:.85;text-decoration:none;font-size:.95rem}
.teilen{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;
padding:6px 14px;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;backdrop-filter:blur(4px)}
.teilen:hover{background:rgba(255,255,255,.24)}
.banner a.zurueck:hover{opacity:1;text-decoration:underline}
.banner h1{font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:780;max-width:22ch;margin-top:40px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.banner .unter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:1.02rem}
.banner .andere{margin:10px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.banner .andere a{color:#fff;text-decoration:none;font-size:.88rem;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.banner .andere a:hover{background:rgba(255,255,255,.26)}
.banner .unter .status{background:rgba(255,255,255,.14)}
.banner .unter .status.stark{color:#9fe0b6}.banner .unter .status.offen{color:#f3cd86}.banner .unter .status.schwach{color:#d5dae2}
.banner .pip{width:16px;height:16px}
.kuenstler{position:absolute;right:16px;top:6px;font-size:.72rem;opacity:.7;color:inherit;text-decoration:none}
.kuenstler:hover{opacity:1;text-decoration:underline}
.daten{display:grid;grid-template-columns:repeat(4,1fr);background:var(--papier);border:1px solid var(--linie);
border-radius:var(--rund);margin-top:-26px;position:relative;z-index:2;overflow:hidden}
.daten>div{padding:14px 16px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:0 -1px -1px 0}
.daten>div:last-child:nth-child(4n+3){grid-column:span 2}.daten>div:last-child:nth-child(4n+2){grid-column:span 3}
.daten>div:last-child:nth-child(4n+1){grid-column:span 4}
.daten dt{font-size:.82rem;color:var(--schiefer)}
.daten dd{margin:2px 0 0;font-family:var(--kopf);font-weight:720;font-size:1.35rem;line-height:1.2}
.daten dd small{display:block;font-family:var(--text);font-weight:400;font-size:.8rem;color:var(--schiefer);margin-top:2px}
.ok{color:var(--gut)}.warn{color:var(--warn)}
.notiz{margin-top:18px;max-width:80ch}
.gruppen{columns:2 340px;column-gap:32px;padding:6px 18px 14px}
.gruppe{break-inside:avoid;padding-top:14px}
.gruppe h3{font-size:.98rem;padding-bottom:6px;border-bottom:2px solid var(--tinte);margin-bottom:2px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sortknoepfe{display:inline-flex;gap:4px;flex:none}
.sortknoepfe button{font:inherit;font-size:.78rem;font-weight:600;line-height:1;padding:5px 8px;border-radius:6px;border:1px solid var(--linie);background:transparent;color:var(--schiefer);cursor:pointer;font-variant-numeric:tabular-nums;min-width:38px}
.sortknoepfe button:hover{color:var(--tinte);border-color:var(--schiefer)}
.sortknoepfe button.an{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.gruppe ul{list-style:none;margin:0;padding:0}
.gruppe li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--linie);font-size:.94rem}
.gruppe li .p{color:var(--schiefer);white-space:nowrap;font-variant-numeric:tabular-nums}
.gruppe li .auf{color:var(--schiefer);font-size:.82rem}
.gruppe a.k{color:var(--tinte);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--schiefer) 55%,transparent)}
.summe{margin:4px 0 12px}.summe b{font-family:var(--kopf);font-size:1.3rem;margin:0 8px 0 4px}
.gruppe a.k:hover{color:var(--blau);border-bottom-color:var(--blau)}
.analyse a.k{color:var(--tinte);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--schiefer) 55%,transparent)}
.analyse a.k:hover{color:var(--blau);border-bottom-color:var(--blau)}
.tag{font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:5px;white-space:nowrap}
.tag.gc{color:var(--blau);background:var(--blau-hell)}
.tag.kombo{color:var(--gut);background:color-mix(in srgb,var(--gut) 13%,transparent)}
.tag.kix{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.tag.kim{color:var(--offen);background:color-mix(in srgb,var(--offen) 14%,transparent)}
.zeichen{display:flex;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--linie);font-size:.86rem;color:var(--schiefer)}
#vorschau{position:fixed;width:244px;border-radius:12px;pointer-events:none;z-index:50;display:none;
box-shadow:0 14px 40px rgba(0,0,0,.4)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px;margin-top:16px}
.saeulen{display:flex;align-items:flex-end;gap:8px;height:210px;padding-top:24px}
.saeule{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.saeule .s{width:100%;max-width:54px;background:var(--blau);border-radius:6px 6px 2px 2px;min-height:2px}
.saeule .n{font-size:.82rem;font-weight:700;margin-bottom:4px}
.saeule .l{font-size:.8rem;color:var(--schiefer);margin-top:6px}
.balken{display:grid;grid-template-columns:minmax(90px,36%) 1fr;gap:8px 12px;align-items:center;margin-top:10px}
.balken .name{text-align:right;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balken .spur{position:relative;height:16px}
.balken .wert{position:absolute;top:0;height:16px;background:var(--blau);border-radius:4px}
.balken .wert.unter{background:var(--warn)}
.balken .zahl{position:absolute;top:-1px;font-size:.85rem;font-weight:700;color:var(--tinte);white-space:nowrap}
.balken .ziel-zahl{font-weight:400;color:var(--schiefer)}
.balken.strategie{margin-top:12px;padding-top:12px;border-top:1px solid var(--linie)}
.balken .info{font-size:.9rem}
.balken .ziel{position:absolute;top:-4px;width:2px;height:24px;background:var(--tinte)}
textarea{width:100%;min-height:170px;font:13px/1.45 ui-monospace,Consolas,monospace;background:var(--hauch);
color:var(--tinte);border:1px solid var(--linie);border-radius:var(--rund-klein);padding:12px}
.tausch{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tausch ul{margin:6px 0 0;padding-left:18px}
details summary{cursor:pointer;color:var(--blau);font-weight:700}
.verlauf{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.verlauf span{min-width:34px;text-align:center;padding:4px 6px;border-radius:6px;font-size:.84rem;font-weight:700;
background:var(--hauch);color:var(--schiefer);font-variant-numeric:tabular-nums}
.verlauf span.top3{background:color-mix(in srgb,var(--gut) 18%,transparent);color:var(--gut)}
.verlauf span.top10{background:var(--blau-hell);color:var(--blau)}
.namen{columns:3 220px;column-gap:24px;font-size:.92rem;margin-top:12px}
details.block>summary{font-family:var(--kopf);font-size:1.05rem;color:var(--tinte)}
.ki-deck a.k{color:var(--tinte);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--schiefer)}
.ki-deck td .tag{margin-left:0}
.namen div{break-inside:avoid;padding:2px 0}

/* Fuß */
footer{margin-top:40px;background:var(--papier);border-top:1px solid var(--linie);padding:26px 0 34px;font-size:.84rem;color:var(--schiefer)}
footer .rahmen{display:grid;gap:8px}
footer nav{display:flex;gap:16px;flex-wrap:wrap;font-size:.92rem}

@media (max-width:760px){
.podium{grid-template-columns:1fr;gap:10px}.platz,.platz:first-child{aspect-ratio:auto;height:130px}.platz .rang,.platz:first-child .rang{font-size:2rem}.platz h3,.platz:first-child h3{font-size:1.05rem}.platz .inhalt{padding:12px 14px}
.mobil-aus{display:none}.nur-mobil{display:block}.tausch{grid-template-columns:1fr}
.cmdzelle{min-width:0;gap:10px}.cmdzelle img,.cmdzelle .ohnebild{width:46px;height:34px}
th,td{padding:10px 8px}.reiter button{flex:1 1 auto;padding:10px 8px;font-size:.95rem}
.zeichen{gap:4px 12px;padding:12px 14px;font-size:.8rem}.quote .bahn{width:56px}.quote{min-width:0}
.leiste .rahmen{gap:8px 20px}.leiste a.sprache{margin-left:auto}
.leiste nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;order:3}
.procontra{grid-template-columns:1fr}.banner .rahmen{min-height:230px}.daten{margin-top:-18px;grid-template-columns:repeat(2,1fr)}.daten>div:last-child{grid-column:auto!important}.daten>div:last-child:nth-child(odd){grid-column:span 2!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.platz img{transition:none}}

/* echte Mana-Symbole (Scryfall-SVGs, selbst gehostet) */
.pip.mw,.pip.mu,.pip.mb,.pip.mr,.pip.mg,.pip.mc{box-shadow:none;background-color:transparent;background-size:contain;
background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pip.mw{background-image:url(img/mana/W.svg)}.pip.mu{background-image:url(img/mana/U.svg)}
.pip.mb{background-image:url(img/mana/B.svg)}.pip.mr{background-image:url(img/mana/R.svg)}
.pip.mg{background-image:url(img/mana/G.svg)}.pip.mc{background-image:url(img/mana/C.svg)}
.pip{width:15px;height:15px}.marke .pip{width:12px;height:12px}.banner .pip{width:20px;height:20px}