/* Deckanalyzer. Handy zuerst. Baut auf style.css und karte.css auf. */


.deck-seite {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.4rem max(1.1rem, env(safe-area-inset-left)) 4rem max(1.1rem, env(safe-area-inset-right));
}

/* ------------------------------------------------------------- Einstieg */

.einstieg { max-width: 38rem; padding-top: 1.6rem; }

.einstieg h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 6.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  max-width: 22ch;          /* die globale 15ch-Regel gilt der alten Startseite */
  text-wrap: balance;
}
.einstieg-text { color: var(--text-2); font-size: 1.02rem; margin-bottom: 1.7rem; }

.deck-form { display: flex; flex-direction: column; }
.deck-form textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;            /* verhindert das Hineinzoomen auf iOS */
  line-height: 1.55;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.85rem 0.95rem;
  resize: vertical;
  min-height: 12rem;
  -webkit-appearance: none;
}
.deck-form textarea:focus {
  outline: none;
  border-color: var(--accent-hot);
  background: rgba(255, 255, 255, 0.075);
}
.deck-form textarea::placeholder { color: var(--text-3); }
.feld-hilfe { font-size: 0.82rem; color: var(--text-3); margin: 0.55rem 0 1.1rem; }
.deck-form .cta { margin-top: 0; max-width: none; }

.fehler {
  color: #FFB59E;
  background: rgba(234, 54, 1, 0.12);
  border-left: 3px solid var(--accent);
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  margin-bottom: 1.2rem;
}

.beispiel { margin-top: 1.8rem; }
.beispiel summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-2);
  padding: 0.4rem 0;
}
.beispiel summary:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; border-radius: 3px; }
.beispiel p { font-size: 0.9rem; color: var(--text-3); margin: 0.4rem 0 0.7rem; }
.knopf-schlicht {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}
.knopf-schlicht:hover { border-color: var(--gold); color: var(--gold); }

/* ------------------------------------------------------------- Ergebnis */

.ergebnis { display: flex; flex-direction: column; gap: 1.3rem; }

/* Ohne display greift margin-bottom nicht, ein <a> ist inline.
   Deshalb lag der Knopf auf der Ueberschrift. */
.zurueck {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 40px;
  font-size: 0.86rem;
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.36rem 0.9rem;
}
.zurueck:hover { color: var(--gold); border-color: var(--gold); }

/* Die Einstufung, das Kopfergebnis */
.bracket {
  border-radius: 6px;
  padding: 1.3rem 1.25rem 1.4rem;
  border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, #242C33 0%, #191F24 100%);
}
.bracket .stufe {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0.15rem 0 0.4rem;
  font-family: var(--f-display);
  font-size: 1.7rem;
  line-height: 1;
}
.bracket .stufe span {
  font-size: 3.2rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.bracket .stufe-satz { margin: 0 0 0.9rem; color: var(--text-2); font-size: 1rem; }
.bracket .gruende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bracket .gruende li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--text-2);
}
.bracket .gruende li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 0.45rem; height: 1px;
  background: currentColor; opacity: 0.55;
}
.bracket .einschraenkung { margin: 1rem 0 0; font-size: 0.79rem; color: var(--text-3); }

.bracket-2 .stufe span { color: #A8DCC0; }
.bracket-3 .stufe span { color: var(--gold); }
.bracket-4 .stufe span { color: var(--accent-hot); }
.bracket-4 { border-color: rgba(255, 96, 0, 0.4); }
.bracket-3 { border-color: rgba(217, 182, 80, 0.4); }

/* Kennzahlen */
.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.kachel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.85rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.kachel .kz {
  font-family: var(--f-display);
  font-size: 1.65rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kachel .kb { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-3); }

/* Bloecke */
.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1.05rem 1.1rem 1.15rem;
}
.block-text {
  font-size: 0.9rem; color: var(--text-3); margin: 0 0 0.9rem;
  max-width: 96ch; text-wrap: pretty;
}
.block-text:last-child { margin-bottom: 0; margin-top: 0.9rem; }
.block-text strong { color: var(--text); font-weight: 600; }

.kartenliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kartenliste li a, .kartenliste.grau li {
  display: inline-block;
  font-size: 0.86rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(217, 182, 80, 0.12);
  border: 1px solid rgba(217, 182, 80, 0.34);
  color: #E9CE8C;
  text-decoration: none;
}
.kartenliste li a:hover { background: rgba(217, 182, 80, 0.22); }
.kartenliste.grau li { background: rgba(255,255,255,0.05); border-color: var(--line-strong); color: var(--text-3); }

.combo-liste .ergebnis-zeile { margin: 0; font-size: 0.86rem; color: #E6C77A; }
.combo-liste.fast li { border-style: dashed; }
.combo-liste.fast .ergebnis-zeile { color: var(--text-3); }

/* Soll-Ist */
.soll { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.soll li { display: grid; grid-template-columns: 5.6rem 1fr auto; align-items: center; gap: 0.7rem; }
.soll-name { font-size: 0.86rem; color: var(--text-2); }
.balken { height: 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.balken i { display: block; height: 100%; border-radius: 999px; background: var(--text-3); }
.soll li.passt  .balken i { background: #6FCF97; }
.soll li.wenig  .balken i { background: var(--accent-hot); }
.soll li.viel   .balken i { background: var(--gold); }
.soll-zahl { font-size: 0.88rem; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.soll-zahl em { font-style: normal; color: var(--text-3); font-size: 0.78rem; margin-left: 0.15rem; }

/* Manakurve */
.kurve {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 9rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--line-strong);
  background-image: repeating-linear-gradient(to top, transparent 0 24%, rgba(255,255,255,0.045) 24% calc(24% + 1px));
}
.saeule { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.3rem; }
.saeule-zahl { font-size: 0.72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.saeule-balken {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #F0D48A 0%, var(--gold) 45%, rgba(217,182,80,0.28) 100%);
  min-height: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  transition: filter 0.15s ease;
}
.saeule:hover .saeule-balken { filter: brightness(1.18); }
.saeule-label { font-size: 0.72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Farben und Typen */
.zweispalt { display: grid; gap: 1.4rem; }
.farbliste, .typliste, .preisliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.farbliste li, .typliste li, .preisliste li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; color: var(--text-2);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.farbliste li:last-child, .typliste li:last-child, .preisliste li:last-child { border-bottom: 0; padding-bottom: 0; }
.farbliste em, .typliste em, .preisliste em {
  margin-left: auto; font-style: normal; color: var(--text);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.preisliste a { color: var(--text-2); text-decoration: none; }
.preisliste a:hover { color: var(--gold); }

@media (min-width: 34rem) {
  .kacheln { grid-template-columns: repeat(4, 1fr); }
  .zweispalt { grid-template-columns: 1fr 1fr; }
  .kurve { height: 10rem; gap: 0.5rem; }
}

@media (min-width: 40rem) {
  .deck-seite { padding: 2.2rem 1.4rem 5rem; }
  /* Mittig statt links am Rand. Mobile bleibt linksbuendig, dort ist die
     Spalte ohnehin so breit wie der Schirm. */
  .einstieg { margin-inline: auto; padding-top: 1.5rem; }
  .einstieg h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
  .bracket { padding: 1.7rem 1.7rem 1.8rem; }
  .bracket .stufe span { font-size: 4rem; }
}

/* ------------------------------------------------------- Was auffaellt */

.tipps {
  background: linear-gradient(165deg, #242C33 0%, #191F24 100%);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 1.1rem 1.15rem 1.2rem;
}
.tippliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
/* Schweregrad als Wort in einer eigenen Spalte statt als Farbbalken links.
   Der Balken war dasselbe Muster wie die Kacheln, die rausgeflogen sind. */
.tippliste { gap: 0; }
.tippliste li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  grid-template-areas: "stufe titel" ".     text";
  gap: 0.12rem 0.9rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.tippliste li:first-child { border-top: 0; padding-top: 0.15rem; }
.t-stufe {
  grid-area: stufe;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding-top: 0.22rem;
  color: var(--text-3);
}
.tippliste strong { grid-area: titel; font-size: 0.99rem; font-weight: 600; color: var(--text); }
.t-text { grid-area: text; font-size: 0.89rem; line-height: 1.5; color: var(--text-2); }
.t-wichtig .t-stufe { color: #F2A493; }
.t-hinweis .t-stufe { color: #E9CE8C; }
.t-idee    .t-stufe { color: #B9A5E8; }
.t-gut     .t-stufe { color: #A8DCC0; }

@media (min-width: 40rem) {
  .tipps { padding: 1.5rem 1.6rem 1.6rem; }
}


/* ------------------------------------------------- Farbverteilung als Band */

.farbband {
  display: flex;
  height: 0.85rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  margin-bottom: 0.9rem;
}
.farbband i { display: block; height: 100%; }
.farbband .fb-W { background: var(--mana-w); }
.farbband .fb-U { background: var(--mana-u); }
.farbband .fb-B { background: var(--mana-b); }
.farbband .fb-R { background: var(--mana-r); }
.farbband .fb-G { background: var(--mana-g); }

.farbliste li em { font-variant-numeric: tabular-nums; }
.farbliste .anteil { font-size: 0.78rem; color: var(--text-3); margin-left: 0.45rem; font-weight: 400; }

/* Zielbereich auf dem Soll-Balken sichtbar machen */
.balken { position: relative; }
.balken .ziel {
  position: absolute;
  top: -2px; bottom: -2px;
  border-left: 1px solid rgba(255,255,255,0.35);
  border-right: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}

/* ------------------------------------------------------------- Deckkopf */
/* Rangfolge: Rueckweg klein, Name gross, Aktionen daneben, Fakten darunter. */

.deckkopf { margin: 0 0 1.6rem; }

.deckkopf-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  font-size: 0.82rem;
  color: var(--text-3);
  text-decoration: none;
}
.deckkopf-zurueck::before { content: '←'; }
.deckkopf-zurueck:hover { color: var(--gold); }

.deckkopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  margin: 0.15rem 0 0.5rem;
}

.deckkopf-name {
  flex: 1 1 16ch;
  /* style.css setzt global h1 { text-wrap: balance; max-width: ... }. Das
     staucht die Ueberschrift auf gleich lange Zeilen und liess sie hier auf
     halber Breite stehen, waehrend rechts Platz frei blieb. */
  text-wrap: pretty;
  max-width: none;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  line-height: 1.15;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.deckkopf-tat { display: flex; gap: 0.45rem; flex-wrap: wrap; }

/* Schmal: der Name bekommt die ganze Zeile, die Knoepfe ruecken darunter.
   Sonst quetscht sich der Titel auf 3 Zeilen, waehrend rechts Platz frei
   bleibt. */
@media (max-width: 40rem) {
  /* Kein Flex hier: mit flex-wrap in Spaltenrichtung entstehen Spalten,
     nicht Zeilen, und der Titel blieb auf 223px stehen. */
  .deckkopf-zeile { display: block; }
  .deckkopf-name { margin-bottom: 0.7rem; }
}
.deckkopf-tat .knopf-schlicht { text-decoration: none; min-height: 40px; }

.deckkopf-fakten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  font-size: 0.84rem;
  color: var(--text-3);
}
.deckkopf-fakten > li { display: inline-flex; align-items: center; gap: 0.45rem; }
.deckkopf-fakten > li + li::before {
  content: '·';
  color: var(--line-strong);
}
.deckkopf-fakten .ist-format { gap: 0.4rem; }
.deckkopf-fakten form { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }

.deckkopf-fakten select {
  color-scheme: dark;
  font: inherit;
  font-weight: 600;
  min-height: 32px;
  color: var(--gold);
  background: rgba(217,182,80,0.12);
  border: 1px solid rgba(217,182,80,0.35);
  border-radius: 999px;
  padding: 0 1.7rem 0 0.7rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 0.85rem center, right 0.58rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.deckkopf-fakten select:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }
.deckkopf-quelle { color: var(--text-3); }

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ------------------------------------------------------------ Importwege */

.importwege { margin-bottom: 1.5rem; }
.reiter { display: flex; gap: 0.3rem; margin-bottom: 0.9rem; }
.reiter label {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.reiter label:hover { color: var(--text-2); }
.feld { display: none; }
#weg-text:checked  ~ .reiter label[for="weg-text"],
#weg-datei:checked ~ .reiter label[for="weg-datei"],
#weg-link:checked  ~ .reiter label[for="weg-link"] {
  color: var(--text);
  background: rgba(217,182,80,0.14);
  border-color: rgba(217,182,80,0.45);
}
#weg-text:checked  ~ .feld-text,
#weg-datei:checked ~ .feld-datei,
#weg-link:checked  ~ .feld-link { display: block; }

.ablage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 2.1rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--text-3);
  cursor: pointer;
  text-align: center;
}
.ablage:hover { border-color: var(--gold); color: var(--text-2); }
.ablage strong { color: var(--text); font-size: 0.98rem; font-weight: 600; }
.ablage span { font-size: 0.82rem; }

.feld-link input[type=url] {
  width: 100%;
  font-size: 16px;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  -webkit-appearance: none;
}
.feld-link input[type=url]:focus { outline: none; border-color: var(--accent-hot); }

/* Zweite Handlung, also leiser als der Hauptknopf: eine Zeile statt eines
   zweiten Balkens in voller Breite. */
.beispiel-zeile {
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.55rem;
  font-size: 0.88rem;
  color: var(--text-3);
}

.beispiel-knopf {
  appearance: none;
  border: 0;
  background: none;
  padding: 0.4rem 0;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(217, 182, 80, 0.4);
  cursor: pointer;
}
.beispiel-knopf:hover { text-decoration-color: var(--gold); }
.beispiel-knopf:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; border-radius: 3px; }


/* -------------------------------------------------------------- Deckliste */

.deckliste .dl-gruppe { margin-bottom: 1.1rem; }
.deckliste .dl-gruppe:last-of-type { margin-bottom: 0; }

.dl-titel {
  margin: 0 0 0.4rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--text-2);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.dl-titel em {
  font-style: normal;
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-variant-numeric: tabular-nums;
}

.dl-liste { list-style: none; margin: 0; padding: 0; }
.dl-liste li {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  grid-template-areas: "anzahl name preis" ". kosten kosten";
  align-items: center;
  gap: 0 0.5rem;
  min-height: 40px;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  font-size: 0.92rem;
}
.dl-liste li:last-child { border-bottom: 0; }
.dl-anzahl {
  grid-area: anzahl;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-size: 0.82rem;
}
.dl-name {
  grid-area: name;
  color: var(--text-2);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-name:hover { color: var(--gold); }
.dl-kosten { grid-area: kosten; font-size: 0.8rem; display: flex; gap: 0.1rem; flex-wrap: wrap; }
.dl-preis {
  grid-area: preis;
  font-size: 0.8rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dl-liste li.ist-gc .dl-name { color: #E9CE8C; font-weight: 600; }

@media (min-width: 34rem) {
  .dl-liste li {
    grid-template-columns: 1.7rem 1fr auto auto;
    grid-template-areas: "anzahl name kosten preis";
    gap: 0 0.75rem;
    min-height: 34px;
  }
  .dl-kosten { justify-content: flex-end; }
  .dl-preis { min-width: 4.2rem; text-align: right; }
}



/* ------------------------------------------------ Wahrscheinlichkeitsrechner */

.r-felder { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; }
.r-felder label { display: flex; flex-direction: column; gap: 0.4rem; }
.r-felder label > span { font-size: 0.85rem; color: var(--text-2); }
.r-felder label > span b { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 700; }

.r-felder select {
  font-size: 16px;
  min-height: 46px;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.6rem 2rem 0.6rem 0.8rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 1rem center, right 0.72rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.r-felder select:focus { outline: none; border-color: var(--accent-hot); }

/* Schieberegler mit ordentlichem Griff, sonst ist er am Daumen nicht zu treffen */
.r-schieber input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
.r-schieber input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}
.r-schieber input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}
.r-schieber input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #14181B;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.r-schieber input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #14181B;
}
.r-schieber input[type=range]:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 4px; border-radius: 999px; }

.r-ergebnis {
  background: linear-gradient(165deg, #242C33 0%, #191F24 100%);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.r-zahl {
  margin: 0 0 0.55rem;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.r-leiste {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
  margin-bottom: 0.7rem;
}
.r-leiste i { display: block; height: 100%; border-radius: 999px; transition: width 0.18s ease; }
.r-leiste i.gut    { background: linear-gradient(90deg, #4EA97B, #6FCF97); }
.r-leiste i.mittel { background: linear-gradient(90deg, #C29A3C, var(--gold)); }
.r-leiste i.mager  { background: linear-gradient(90deg, #B3421F, var(--accent-hot)); }
.r-satz { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-2); }

.r-tabelle { display: flex; flex-direction: column; gap: 0.4rem; }
.rt-zeile { display: grid; grid-template-columns: 5rem 1fr 3.2rem; align-items: center; gap: 0.6rem; }
.rt-tief { font-size: 0.8rem; color: var(--text-3); }
.rt-balken { height: 0.4rem; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.rt-balken i { display: block; height: 100%; border-radius: 999px; background: var(--gold); opacity: 0.8; }
.rt-wert { font-size: 0.8rem; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }

@media (min-width: 34rem) {
  .r-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
  .r-felder label:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .r-leiste i { transition: none; }
}

/* Aufgeklappte Auswahllisten: Windows nimmt sonst die Systemfarben und
   zeigt hellen Text auf hellem Grund. */
select option,
select optgroup {
  background-color: #1D2429;
  color: #FFFFFF;
}
.r-felder select,
.suchmaske select {
  color-scheme: dark;
  text-overflow: ellipsis;
}

/* ------------------------------------------------- Deckliste: zwei Ansichten */

.dl-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.dl-kopf .klein-label { margin: 0; }

.dl-ansicht { display: flex; gap: 0.25rem; }
.dl-ansicht label {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.dl-ansicht label:hover { color: var(--text-2); }
#dl-bilder:checked ~ label[for="dl-bilder"],
#dl-liste:checked  ~ label[for="dl-liste"] {
  color: #14181B;
  background: var(--gold);
  border-color: var(--gold);
}

/* Umschalten: die Regler liegen vor dem Inhalt, deshalb greift der Geschwister-Selektor */
.deckliste .dl-gitter { display: none; }
.deckliste .dl-liste  { display: none; }
.deckliste:has(#dl-bilder:checked) .dl-gitter { display: grid; }
.deckliste:has(#dl-liste:checked)  .dl-liste  { display: block; }

/* Falls der Browser :has noch nicht kann, bleiben die Bilder sichtbar */
@supports not selector(:has(*)) {
  .deckliste .dl-gitter { display: grid; }
  .dl-ansicht { display: none; }
}

.dl-gitter {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
}
.dl-gitter li { display: flex; flex-direction: column; gap: 0.28rem; }
.dl-gitter a {
  position: relative;
  display: block;
  border-radius: 4.75% / 3.5%;
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--line);
  transition: transform 0.13s ease, border-color 0.13s ease;
}
.dl-gitter a:hover { transform: translateY(-2px); border-color: rgba(217,182,80,0.55); }
.dl-gitter a:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }
.dl-gitter img { width: 100%; height: auto; display: block; background: var(--surface); }
.dl-gitter li.ist-gc a { border-color: rgba(217,182,80,0.75); box-shadow: 0 0 0 1px rgba(217,182,80,0.35); }

.dl-kein-bild {
  display: grid;
  place-items: center;
  aspect-ratio: 146 / 204;
  padding: 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-3);
  background: var(--surface);
}

.dl-marke, .dl-gc {
  position: absolute;
  line-height: 1;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.18rem 0.4rem;
  font-size: 0.68rem;
}
.dl-marke {
  left: 0.28rem; top: 0.28rem;
  background: rgba(10,13,15,0.88);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.dl-gc {
  right: 0.28rem; top: 0.28rem;
  background: var(--gold);
  color: #14181B;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
}

.dl-untertitel {
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-gitter li.ist-gc .dl-untertitel { color: #E9CE8C; }

@media (min-width: 34rem) {
  .dl-gitter { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.55rem; }
}
@media (min-width: 52rem) {
  .dl-gitter { grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); }
  .deckliste:has(#dl-liste:checked) .dl-inhalt { column-count: 2; column-gap: 2.2rem; }
  .deckliste:has(#dl-liste:checked) .dl-gruppe { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-gitter a { transition: none; }
}

/* --------------------------------------------------------------- Deckprofil */

.profil-inhalt { display: flex; flex-direction: column; gap: 1.3rem; }

.profil-netz { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.netz { width: min(100%, 22rem); height: auto; display: block; }
.netz-ring    { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.netz-speiche { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.netz-flaeche {
  fill: rgba(217,182,80,0.22);
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linejoin: round;
}
.netz-punkt { fill: #F0D48A; stroke: #14181B; stroke-width: 1.5; }
.netz-text {
  fill: var(--text-2);
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.netz-wert {
  fill: var(--gold);
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profil-pl {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.profil-pl strong {
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin: 0 0.3rem 0 0.4rem;
  letter-spacing: 0;
}
.profil-pl span { font-size: 0.72rem; }

.profil-werte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.profil-werte li {
  display: grid;
  grid-template-columns: 7.2rem 1fr 2.2rem;
  grid-template-areas: "name balken zahl" "text text text";
  align-items: center;
  gap: 0.15rem 0.6rem;
}
.pw-name { grid-area: name; font-size: 0.86rem; font-weight: 600; color: var(--text-2); }
.pw-balken {
  grid-area: balken;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.pw-balken i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217,182,80,0.55), var(--gold));
}
.pw-zahl {
  grid-area: zahl;
  text-align: right;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pw-text { grid-area: text; font-size: 0.78rem; line-height: 1.4; color: var(--text-3); }

@media (min-width: 46rem) {
  .profil-inhalt { flex-direction: row; align-items: center; gap: 2rem; }
  .profil-netz { flex: 0 0 22rem; }
  .netz { width: 22rem; }
  .profil-werte { flex: 1 1 auto; }
}

/* --------------------------------------------------------- Teilen & Export */

.teilen { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.teilen .knopf-schlicht { text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.teilen code {
  font-size: 0.84rem;
  color: var(--text-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  word-break: break-all;
}
.teilen-block { margin-top: 2.2rem; }
.teilen-block .klein-label { margin-bottom: 0.6rem; }

.export-seite .zurueck { margin-bottom: 1.6rem; }
.export-seite h1 { margin-top: 0; }
.export-seite .einstieg-text { margin-bottom: 1.5rem; }
.exportwege { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.exportwege a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 5px;
  text-decoration: none;
}
.exportwege a:hover { border-color: rgba(217,182,80,0.6); border-left-color: var(--gold); background: var(--surface-2); }
.exportwege strong { color: var(--text); font-size: 1rem; font-weight: 600; }
.exportwege span { color: var(--text-3); font-size: 0.88rem; line-height: 1.45; }

/* ------------------------------------------------------ Starthand-Simulator */

.h-karten {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.h-karten li { position: relative; }
.h-karten img, .h-kein-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 146 / 204;
  display: block;
  border-radius: 4.75% / 3.5%;
  border: 1px solid var(--line);
  background: var(--surface);
}
.h-karten li.ist-land img { border-color: rgba(111,207,151,0.5); }

.h-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-bottom: 0.6rem;
  font-size: 0.86rem;
  color: var(--text-3);
}
.h-zahlen b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-right: 0.15rem;
}

.h-urteil {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  padding-left: 0.85rem;
  border-left: 3px solid var(--line-strong);
  color: var(--text-2);
}
.h-urteil.gut      { border-left-color: #6FCF97; }
.h-urteil.mittel   { border-left-color: var(--gold); }
.h-urteil.schlecht { border-left-color: var(--accent); }

.h-knoepfe { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.h-knoepfe .cta { margin-top: 0; width: auto; max-width: none; padding: 0.75rem 1.4rem; }
.h-knoepfe .knopf-schlicht { min-height: 48px; }

@media (min-width: 34rem) {
  .h-karten { grid-template-columns: repeat(7, 1fr); gap: 0.6rem; }
}

/* -------------------------------------------------------- Budget-Alternativen */

.tauschliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.tauschliste > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.tauschliste > li:last-child { border-bottom: 0; padding-bottom: 0; }

.tausch-raus { display: flex; align-items: center; gap: 0.7rem; }
.tausch-raus img {
  width: 3.4rem; height: auto; flex: 0 0 auto;
  border-radius: 5%; border: 1px solid rgba(234,84,54,0.4);
}
.tausch-raus > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.t-name { font-size: 0.92rem; color: var(--text); text-decoration: none; font-weight: 600; }
a.t-name:hover { color: var(--gold); }
.t-preis { font-size: 0.82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.t-preis.teuer { color: #F2A493; font-weight: 600; }

.tausch-pfeil { color: var(--text-3); display: flex; align-items: center; padding-left: 1rem; }
.tausch-pfeil svg { transform: rotate(90deg); }

.tausch-rein { list-style: none; margin: 0; padding: 0 0 0 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.tausch-rein a { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; }
.tausch-rein img {
  width: 100%; height: auto;
  border-radius: 4.75% / 3.5%;
  border: 1px solid rgba(111,207,151,0.35);
}
.tausch-rein a:hover img { border-color: rgba(111,207,151,0.8); }
.tausch-rein .t-name { font-size: 0.76rem; font-weight: 400; color: var(--text-2); line-height: 1.25; }
.tausch-rein .t-preis { color: #A8DCC0; font-weight: 600; font-size: 0.78rem; }

@media (min-width: 46rem) {
  .tauschliste > li {
    grid-template-columns: 13rem 2.4rem 1fr;
    align-items: center;
    gap: 0.9rem;
  }
  .tausch-pfeil { padding-left: 0; justify-content: center; }
  .tausch-pfeil svg { transform: none; }
  .tausch-rein { padding-left: 0; }
}

/* ------------------------------------------------------------- Nervfaktor */

.nerv-kopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.nerv-skala { display: flex; gap: 0.3rem; }
.nerv-skala span {
  width: 2.4rem; height: 0.55rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
}
.nerv-skala span.an.s1 { background: #6FCF97; }
.nerv-skala span.an.s2 { background: #A8DCC0; }
.nerv-skala span.an.s3 { background: var(--gold); }
.nerv-skala span.an.s4 { background: var(--accent-hot); }
.nerv-skala span.an.s5 { background: var(--accent); }

.nerv-zahl {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.8rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.nerv-zahl span {
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nerv-satz { margin: 0 0 1rem; font-size: 1rem; color: var(--text-2); }

.nervliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.6rem;
}
.nervliste a { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; }
.nervliste img {
  width: 100%; height: auto;
  border-radius: 4.75% / 3.5%;
  border: 1px solid rgba(234,84,54,0.35);
}
.nervliste a:hover img { border-color: rgba(234,84,54,0.75); }
.nv-name { font-size: 0.72rem; line-height: 1.25; color: var(--text-3); }
.nv-wert {
  font-size: 0.8rem; font-weight: 700; color: #F2A493;
  font-variant-numeric: tabular-nums;
}

/* Unsichtbarer Anker fuer Abschnitte, deren Ueberschrift bedingt erscheint */
.anker { display: block; height: 0; }

.einstieg-klein {
  /* Kein eigenes Textmass hier: die Einstiegsspalte ist mit 38rem schon das
     Mass. Ein zusaetzliches 46ch liess den Satz auf halber Breite umbrechen,
     waehrend rechts nichts stand. */
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-3);
  text-wrap: pretty;
}

/* ---------------------------------------------- Budget, kompakte Fassung */

.tauschliste { list-style: none; margin: 0; padding: 0; }
.tauschliste > li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  grid-template-areas: "bild raus" "bild rein";
  align-items: center;
  gap: 0.2rem 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.tauschliste > li:first-child { border-top: 0; }
.tauschliste > li.weitere { display: none; }
.tauschliste.offen > li.weitere { display: grid; }

.tauschliste > li > img {
  grid-area: bild;
  width: 2.6rem;
  height: auto;
  border-radius: 6%;
  border: 1px solid rgba(234, 84, 54, 0.3);
}
.t-raus { grid-area: raus; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.t-name { font-size: 0.93rem; font-weight: 600; color: var(--text); text-decoration: none; }
a.t-name:hover { color: var(--gold); }
.t-preis { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--text-3); }
.t-preis.teuer { color: #F2A493; font-weight: 600; }

.t-rein { grid-area: rein; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.t-rein li { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.82rem; }
.t-rein a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.16); }
.t-rein a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.t-rein em { font-style: normal; color: #A8DCC0; font-variant-numeric: tabular-nums; }

.mehr-knopf { margin-top: 0.9rem; }

@media (min-width: 46rem) {
  .tauschliste > li {
    grid-template-columns: 3rem minmax(11rem, 15rem) 1fr;
    grid-template-areas: "bild raus rein";
    gap: 0.9rem;
    padding: 0.5rem 0;
  }
  .tauschliste > li > img { width: 3rem; }
  .t-raus { flex-direction: column; gap: 0.05rem; align-items: flex-start; }
}

/* Daumenmass durchgehend */
.knopf-schlicht, .zurueck, .dl-ansicht label, .teilen a, .teilen .knopf-schlicht {
  min-height: 44px;
}

@media (max-width: 34rem) {
  /* Auf schmalem Schirm kostet eine eigene Spalte fuer ein kurzes Wort zu viel
     Platz. Der Schweregrad steht dann ueber der Ueberschrift. */
  .tippliste li {
    grid-template-columns: 1fr;
    grid-template-areas: "stufe" "titel" "text";
    gap: 0.1rem;
  }
  .t-stufe { padding-top: 0; }
}


/* Zusammengehoerende Bloecke stehen enger beieinander als die Gruppen
   untereinander. Sonst sieht eine Gruppe aus wie vier Einzelteile. */
.gruppe { display: flex; flex-direction: column; gap: 0.45rem; }
.ergebnis > .gruppe { margin: 0.5rem 0; }

/* =========================================================== Rangfolge
   Die Abschnittsueberschriften waren 10,7px in Versalien und damit kleiner
   als die 16,8px-Unterpunkte darin: die Rangfolge stand auf dem Kopf.
   Vier Ebenen, von laut nach leise:
     Gruppenmarke   klein, Versalien, grau     SIMULATION
     Abschnitt h2   Beleren 1,25rem, weiss     Manabasis-Labor
     Unterpunkt h3  wie vom Modul gesetzt      Farbdeckung
     Fliesstext     0,86rem, gedaempft
   ------------------------------------------------------------------- */

.deck-seite .block h2.klein-label,
.deck-seite .tipps > h2.klein-label {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin-bottom: 0.35rem;
  gap: 0.55rem;
}

/* Die Zaehl-Pille bleibt leise und faellt zurueck in die Grundschrift. */
.deck-seite .block h2.klein-label .anzahl,
.deck-seite .tipps > h2.klein-label .anzahl {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: center;
}

/* Einleitungen treten zurueck, es sind 20 auf der Seite.
   Das Maass bleibt bei rund 80 Zeichen, weil 107 (der Median dieser Texte)
   auf einer Zeile zu lang zum Lesen waeren. Damit der Umbruch nach Absicht
   aussieht und nicht nach Zufall, laufen die Zeilen gleich lang: sonst endet
   Zeile 1 mitten in "was du brauchst" und rechts bleibt der halbe Block leer. */
.deck-seite .block-text {
  font-size: 0.86rem;
  color: var(--text-3);
  max-width: 80ch;
  text-wrap: balance;
}

/* -------------------------------------------------------- Gruppenmarke */
/* Die Navigation verspricht Charakter, Staerke, Mana, Simulation. Vorher
   tauchten diese Woerter auf der Seite nirgends auf. */

.gruppe-marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2.1rem 0 0.55rem;
  font-family: var(--f-body);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gruppe-marke::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.gruppe-marke:first-of-type { margin-top: 1.2rem; }

/* Luft zwischen den Gruppen, damit man die Kanten spuert. */
.deck-seite .gruppe { gap: 0.55rem; margin: 0 0 0.6rem; }

/* Rolle des teuren Kartenplatzes in der Tauschliste */
.t-rolle {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  vertical-align: middle;
}

/* ------------------------------------------------------------ Ladezustand */
/* Die Seite wird serverseitig gebaut. Beim ersten Aufruf eines Decks dauert
   das ein paar Sekunden, weil Scryfall frisch abgefragt wird. Der Knopf sagt,
   dass etwas laeuft, statt die Seite tot wirken zu lassen. */

.cta.laedt {
  cursor: progress;
  background: linear-gradient(135deg, #C9531F 0%, #A83512 100%);
  box-shadow: none;
}

/* Punkt, der um den Text kreist: kein Fortschrittsbalken, der eine Genauigkeit
   vortaeuscht, die es nicht gibt. */
.cta.laedt::after {
  content: '';
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .cta.laedt::after { animation: mz-kreisel 0.8s linear infinite; }
}

@keyframes mz-kreisel { to { transform: rotate(360deg); } }

.laden-schritt {
  margin: 0.6rem 0 0;
  font-size: 0.84rem;
  color: var(--text-3);
  min-height: 1.3em;
}
.laden-schritt::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .laden-schritt::before { animation: mz-pulsen 1.4s ease-in-out infinite; }
}
@keyframes mz-pulsen { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Der Beispieldeck-Knopf ist eine Textzeile, kein Balken. */
.beispiel-knopf.laedt { cursor: progress; opacity: 0.7; }