/* Stile der Bereiche Leaderboard, Social, Preise, So geht's, Partner, Recht.
   Sie lagen bisher nur inline im Cockpit, deshalb sahen dieselben Inhalte auf den
   eigenen Seiten anders aus. Diese Datei laden Cockpit und Seiten gemeinsam. */

.bereich h1,.bahn h1{font-size:24px;letter-spacing:-.01em;margin-bottom:4px}
.bereich .unter,.bahn .unter{color:var(--gedaempft);font-size:13px;margin-bottom:18px;max-width:70ch}
.formel{display:inline-flex;align-items:center;gap:8px;background:var(--handlung-weich);
  border:1px solid color-mix(in srgb,var(--handlung) 30%,transparent);border-radius:6px;
  padding:6px 12px;font-size:12px;margin-bottom:16px}
.bkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.bkarte.scroller{overflow-x:auto;padding:0}
.podest3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}
.pod3{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:14px 16px}
.pod3 .kz2{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.pod3 .kz2 b{font-size:19px}
.pod3 svg{width:100%;height:38px}
.pod3 .f2{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:6px}
.bpakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.bpaket{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:15px;
  display:flex;flex-direction:column;gap:7px;cursor:pointer;position:relative}
.bpaket:hover{border-color:var(--gedaempft)}
.bpaket.gewaehlt{border-color:var(--handlung);box-shadow:0 0 0 1px var(--handlung)}
.bpaket.empfohlen:before{content:"Unsere Empfehlung";position:absolute;top:-9px;left:12px;
  background:var(--handlung);color:#fff;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;border-radius:4px;padding:2px 7px}
.bpaket .pr{font-size:21px;font-weight:700}
.bpaket .kap{font-size:12px;color:var(--gedaempft)}
.bpaket .kap b{color:var(--text);font-size:16px}

/* Schritte-Strecke: Bauform von anmeldung.html (Chips, Detailkaesten, SSO),
   dazu der eigene Stand aus dem Cockpit-Bereich. Beide Wege rendern jetzt dasselbe. */
.strecke{display:flex;flex-direction:column;gap:0;position:relative;margin:10px 0 30px}
.schritt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;position:relative}
.schritt:not(:last-child):after{content:"";position:absolute;left:21px;top:62px;bottom:-4px;width:2px;background:var(--linie)}
.punktzahl{width:44px;height:44px;border-radius:50%;background:var(--flaeche);border:1px solid var(--linie);
  display:grid;place-items:center;font-weight:700;font-size:16px;z-index:1}
.schritt.frei .punktzahl{border-color:var(--gewinn);color:var(--gewinn)}
.schritt.zahl-pflicht .punktzahl{border-color:var(--handlung);color:var(--handlung)}
.schritt.fertig .punktzahl{background:var(--handlung);border-color:var(--handlung);color:#fff}
.schritt.laeuft .punktzahl{border-color:var(--handlung);color:var(--handlung);box-shadow:0 0 0 3px var(--handlung-weich)}
.schritt.offen{opacity:.62}
.schritt h3{font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chip{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:2px 7px}
.chip.gratis{background:color-mix(in srgb,var(--gewinn) 15%,transparent);color:var(--gewinn)}
.chip.bezahlt{background:var(--handlung-weich);color:var(--handlung)}
.chip.stand{background:var(--erhoben);color:var(--gedaempft)}
.chip.stand.hier{background:var(--handlung);color:#fff}
.schritt p{color:var(--gedaempft);font-size:13.5px;max-width:64ch}
.schritt .detail{margin-top:10px;background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:13px 15px;font-size:12.5px}
.detail b{display:block;margin-bottom:5px;font-size:12px}
.detail ul{list-style:none;display:flex;flex-direction:column;gap:4px;color:var(--gedaempft);margin:0}
.detail li:before{content:"·  "}
.weiterhin{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--handlung);color:#fff;
  border-radius:6px;padding:7px 14px;font-size:13px;font-weight:600;text-decoration:none}
.weiterhin.stiller{background:transparent;color:var(--handlung);border:1px solid var(--linie)}
.zweiteiler{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 30px}
.zweiteiler .karte h3{font-size:14.5px;margin-bottom:10px}
.zweiteiler ul{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13px;margin:0}
.ja:before{content:"✓";color:var(--gewinn);font-weight:700;margin-right:8px}
.nein:before{content:"✕";color:var(--gedaempft);font-weight:700;margin-right:8px}
.nein{color:var(--gedaempft)}
.ssoreihe{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ssoknopf{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--linie);
  border-radius:8px;background:var(--flaeche);color:var(--text);font-size:13px;font-weight:600;text-decoration:none}
.ssoknopf:hover{border-color:var(--gedaempft)}
.ssoknopf svg{width:16px;height:16px;flex:0 0 auto}
@media (max-width:760px){.zweiteiler{grid-template-columns:1fr}}

/* Leaderboard */
.filter{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter select{background:var(--erhoben);border:1px solid var(--linie);border-radius:6px;
  padding:6px 10px;color:var(--text);font:inherit;font-size:12.5px}
.ligaschalter{display:inline-flex;gap:2px;background:var(--erhoben);border-radius:6px;padding:2px}
.ligaschalter button{padding:5px 12px;border-radius:4px;font-size:12px;color:var(--gedaempft);font-weight:600}
.ligaschalter button.an{background:var(--flaeche);color:var(--text);box-shadow:var(--schatten)}
.ligasatz{font-size:12px;color:var(--gedaempft);margin-bottom:14px;max-width:70ch}
.minikurve{width:76px;height:20px;vertical-align:middle}
.traderlink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--gedaempft)}
.traderlink:hover{color:var(--handlung);border-bottom-color:var(--handlung)}
.folgen2{font-size:11px;color:var(--gedaempft);border:1px solid var(--linie);border-radius:4px;padding:2px 9px}
.folgen2:hover{color:var(--handlung);border-color:var(--handlung)}
.folgen2.folgt{color:var(--handlung);border-color:var(--handlung);background:var(--handlung-weich)}
.ichleiste{position:sticky;bottom:0;background:var(--handlung-weich);backdrop-filter:blur(6px);
  border-top:2px solid var(--handlung)}
.ichleiste td{border-bottom:none;font-weight:600}
.ichleiste .ichhinweis{text-align:left;font-weight:500;font-size:12px;color:var(--text);white-space:normal}
.profilweg{display:block;margin-top:8px;font-size:11.5px;font-weight:600;text-decoration:none}
.werbeetikett{font-size:10px;letter-spacing:.06em;color:var(--gedaempft);border:1px solid var(--linie);
  border-radius:4px;padding:2px 7px;vertical-align:middle;text-transform:uppercase}

/* Kauf, auf jeder Fassung gleich */
.kaufblock .bzeile{font-size:13px;color:var(--gedaempft);margin:6px 0 12px}
.kaufblock .bzeile b{color:var(--text)}
.haken{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--gedaempft);
  margin-bottom:8px;line-height:1.45;cursor:pointer;max-width:66ch}
.haken input{margin-top:2px;flex:0 0 auto;accent-color:var(--handlung);width:15px;height:15px}
.absendenknopf{display:block;width:100%;max-width:340px;background:var(--handlung);color:#fff;
  border-radius:7px;padding:12px 18px;font-size:14px;font-weight:600;margin:12px 0 10px}
.absendenknopf:disabled{opacity:.42;cursor:not-allowed}
.kaufdeckel{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:grid;place-items:center;padding:20px}
.kaufkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:24px;
  max-width:440px;width:100%;box-shadow:var(--schatten)}
.kaufkarte p{font-size:13px;color:var(--gedaempft);margin:8px 0 14px}
.ehrlichkasten{background:var(--erhoben);border:1px solid var(--linie);border-radius:8px;padding:11px 13px;
  font-size:12px;color:var(--gedaempft);margin-bottom:16px}
.kaufwege{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:760px){
  .bereich h1,.bahn h1{font-size:20px}
  .filter{gap:6px}
  .filter select,.ligaschalter button{font-size:12px}
}

/* Kaufstrecke, Wortlaut und Bauform aus kauf.html: das war die bessere der zwei Fassungen */
.kaufraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.paketliste{list-style:none;font-size:12px;color:var(--gedaempft);display:flex;flex-direction:column;
  gap:4px;border-top:1px solid var(--gitter);padding-top:9px;margin:0}
.regelzeile{font-size:12px;color:var(--gedaempft);line-height:1.6;margin-bottom:16px;max-width:88ch}
.regelzeile b{color:var(--text)}
.feldzeile{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.feldzeile input{background:var(--erhoben);border:1px solid var(--linie);border-radius:6px;
  padding:9px 11px;color:var(--text);font:inherit;font-size:13px}
.haken.pflicht{background:var(--handlung-weich);border-radius:7px;padding:9px 11px}
.stripezeile{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--gedaempft);margin-bottom:14px}
.kartenlogo{border:1px solid var(--linie);border-radius:3px;padding:1px 6px;font-size:9.5px;font-weight:700;letter-spacing:.03em}
.ablauf ol{margin:6px 0 0 16px;font-size:12px;color:var(--gedaempft);display:flex;flex-direction:column;gap:4px}
.preisanteil{font-size:11.5px;color:var(--gedaempft)}
.filterhinweis{font-size:12px;color:var(--gedaempft);background:var(--erhoben);border-radius:6px;
  padding:8px 11px;margin-bottom:14px;max-width:70ch}

/* Einstellungen */
.einstellung .ekopf{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.einstellung .ekopf b{font-size:13.5px}
.esatz{font-size:12px;color:var(--gedaempft);margin-top:7px;max-width:70ch}

/* Trainingsstand: Stufe, Balken, Abzeichen */
.stufenkarte{border-color:color-mix(in srgb,var(--handlung) 40%,var(--linie))}
.stufenkopf{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.stufenname{display:block; font-size:22px; letter-spacing:-.01em; margin-top:2px}
.stufenzahl{display:flex; align-items:baseline; gap:6px; color:var(--gedaempft); font-size:12.5px}
.stufenzahl b{font-size:30px; color:var(--handlung); font-variant-numeric:tabular-nums}
.fortbalken{height:8px; border-radius:99px; background:var(--erhoben); overflow:hidden; margin:14px 0 10px}
.fortbalken i{display:block; height:100%; border-radius:99px; background:var(--handlung);
  transition:width .6s cubic-bezier(.22,.61,.36,1)}
.abzeichen{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.ab{display:grid; grid-template-columns:26px minmax(0,1fr); gap:11px; align-items:start;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:9px; padding:13px 15px; opacity:.62}
.ab.erreicht{opacity:1; border-color:color-mix(in srgb,var(--gewinn) 45%,var(--linie))}
.ab b{font-size:13.5px; display:block; margin-bottom:2px}
.ab p{font-size:12px; color:var(--gedaempft); margin:0; line-height:1.5}
.abhaken{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--linie); font-size:13px; color:var(--gedaempft); font-weight:700}
.ab.erreicht .abhaken{background:var(--gewinn); border-color:var(--gewinn); color:#fff}

/* Einblendung, wenn ein Abzeichen dazukommt */
.abtoast{position:fixed; right:18px; bottom:18px; z-index:150; display:flex; align-items:flex-start; gap:12px;
  background:var(--flaeche); border:1px solid var(--linie);
  border-left:3px solid var(--gewinn); border-radius:10px; padding:14px 18px 14px 15px;
  box-shadow:var(--schatten); max-width:330px;
  animation:abrein .45s cubic-bezier(.22,.61,.36,1)}
.abtoast .etikett{display:block; color:var(--gewinn)}
.abtoast b{display:block; font-size:14px; margin:3px 0 3px}
.abtoast p{font-size:12px; color:var(--gedaempft); margin:0; line-height:1.5}
@keyframes abrein{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .abtoast{animation:none} .fortbalken i{transition:none} }
@media (max-width:760px){ .abtoast{right:10px; left:10px; bottom:70px; max-width:none} }

/* Rechtstexte */
.entwurfhinweis{background:color-mix(in srgb,var(--warnung) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--warnung) 40%,var(--linie));border-radius:8px;
  padding:13px 15px;font-size:12.5px;line-height:1.55;margin-bottom:20px;max-width:70ch}
.entwurfhinweis b{color:var(--text)}
.rechtnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--linie)}
.rechtnav a{font-size:12.5px;padding:6px 12px;border:1px solid var(--linie);border-radius:99px;
  text-decoration:none;color:var(--gedaempft)}
.rechtnav a:hover{color:var(--handlung);border-color:var(--handlung)}
.rechtblock{margin-bottom:38px;scroll-margin-top:80px;max-width:74ch}
.rechtblock h2{font-size:20px;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--handlung);display:inline-block}
.rechtblock h3{font-size:14.5px;margin:20px 0 7px}
.rechtblock p{font-size:13.5px;line-height:1.65;color:var(--gedaempft);margin-bottom:11px}
.rechtblock p b, .rechtblock li b{color:var(--text)}
.rechtblock .anschrift{color:var(--text)}
.rechtliste{margin:0 0 12px 18px;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:13.5px;line-height:1.6;color:var(--gedaempft)}
.luecke{display:inline-block;background:color-mix(in srgb,var(--warnung) 22%,transparent);
  border:1px dashed var(--warnung);border-radius:4px;padding:0 6px;font-size:12px;
  color:var(--text);font-family:"IBM Plex Mono",monospace}
.vorsaisonhinweis{background:var(--handlung-weich);border:1px solid color-mix(in srgb,var(--handlung) 35%,var(--linie));
  border-radius:8px;padding:13px 15px;font-size:13px;line-height:1.55;margin-bottom:18px;max-width:70ch}
.vorsaisonhinweis b{color:var(--text)}

/* Startseite: Lernblock und Augenzeile */
.augenzeile{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gewinn);
  background:color-mix(in srgb,var(--gewinn) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--gewinn) 35%,transparent);
  border-radius:99px;padding:4px 12px;margin-bottom:14px}
.lernraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.lernkachel{display:flex;flex-direction:column;gap:7px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:11px;padding:18px 20px;text-decoration:none;
  color:var(--text);transition:border-color .15s ease,transform .15s ease}
.lernkachel:hover{border-color:var(--handlung);transform:translateY(-2px)}
.lernnr{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--handlung)}
.lernkachel h3{font-size:15.5px;line-height:1.3;margin:0}
.lernkachel p{font-size:13px;color:var(--gedaempft);line-height:1.58;margin:0;flex:1}
.lernweg{font-size:12.5px;font-weight:600;color:var(--handlung);margin-top:4px}
@media (prefers-reduced-motion:reduce){.lernkachel:hover{transform:none}}
.paketbald{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warnung);border:1px solid color-mix(in srgb,var(--warnung) 45%,transparent);
  border-radius:4px;padding:2px 8px;align-self:flex-start}

/* Oberflächen und Partnerhinweis */
.partnerhinweis{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:15px 17px;margin-bottom:16px;max-width:70ch}
.partnerhinweis p{font-size:12.5px;color:var(--gedaempft);line-height:1.55;margin:0}
.quellenzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;
  color:var(--gedaempft);padding:6px 14px;border-top:1px solid var(--linie);background:var(--flaeche)}
.quellenzeile b{color:var(--text);font-weight:600}
.quellenzeile a{color:var(--handlung);text-decoration:none}
.quellenzeile a:hover{text-decoration:underline}

/* ---------- Serverdaten, Vorsaison und Vormerkung, 29.08.2026 ---------- */
/* Eintraege, die noch nicht fuer den Pool zaehlen, stehen mit in der Liste, aber leiser. */
.nochnicht{color:var(--gedaempft);font-weight:400;font-size:11px;white-space:nowrap}
.kleinname{color:var(--gedaempft);font-weight:400;font-size:12px}
.raus{color:var(--verlust);font-size:11px;font-weight:600}

/* Der Kaufabschluss bleibt in der Vorsaison sichtbar, aber als Vorschau erkennbar:
   halb durchsichtig, nicht anklickbar, mit einem Chip, der den Zeitpunkt nennt. */
.vorschauraster{margin-top:22px;border-top:1px solid var(--linie);padding-top:16px}
.vorschauzeile{font-size:12px;color:var(--gedaempft);margin:0 0 12px;max-width:62ch}
.bkarte.vorschau{opacity:.55;pointer-events:none;filter:saturate(.4)}
.podest3.vorschau{opacity:.55;filter:saturate(.4)}
.spaeterchip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--flaeche2,rgba(127,127,127,.14));color:var(--gedaempft);
  font-size:11px;font-weight:600;vertical-align:middle}

/* "Kommt bald", wenn eine Seite ehrlicherweise noch nichts zeigen kann. */
.baldkasten{border:1px solid var(--linie);border-left:3px solid var(--handlung);
  border-radius:10px;padding:14px 16px;margin:0 0 16px;font-size:13px;line-height:1.55;
  background:var(--flaeche)}
.baldkasten b{display:block;margin-bottom:4px;font-size:14px}

/* Anmeldedialog: der Hauptweg steht oben und sieht anders aus als die Nebenwege. */
.ssoknopf.hauptsso{background:var(--handlung);color:#fff;border-color:var(--handlung);font-weight:650}
/* Ein abgeschalteter Knopf muss abgeschaltet aussehen.
   Am 30.08.2026 hatte der Hauptknopf der Anmeldung disabled=true, aber volle Deckkraft und
   Zeigerhand: Menschen klickten, nichts geschah, und nichts sagte warum. Ein Knopf, der
   nicht tut, muss das zeigen, und daneben muss stehen, was fehlt. */
.ssoknopf:disabled, .ssoknopf[disabled]{
  opacity:.45; cursor:not-allowed; filter:grayscale(.4);
}
.ssoknopf:disabled:hover, .ssoknopf[disabled]:hover{transform:none}
.ssoknopf.hauptsso svg{width:18px;height:18px}
.anmeldwahl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gedaempft);
  margin:10px 0 4px;cursor:pointer}
.anmeldwahl input{margin:0}
/* Die eigene Zeile, wenn man nicht unter den ersten 50 steht: abgesetzt, damit klar ist,
   dass sie nicht der 51. Platz ist, sondern der eigene Stand. */
tr.ichrand td{border-top:2px solid var(--handlung) !important;padding-top:10px}

/* ---------- Partnerlogos in den Farbwelten, 29.08.2026 ---------- */
/* Die Logos stammen aus dem eigenen Bestand von cryptoticker.io, demselben, der im
   Boersenvergleich steht. Sie sind auf 840x420 angelegt, hier auf 120 Breite begrenzt. */
/* Die acht Partnerlogos haben sehr verschiedene Formate: fuenf sind 840x420, Bybit ist
   quadratisch, OKX rund 3,3 zu 1, Crypto.com ein SVG mit 5,3 zu 1. Ein fester Rahmen mit
   object-fit haelt sie auf einer Linie, ohne eines zu verzerren. */
.logofeld{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:58px; margin:0 0 12px;
  border-radius:8px; background:#fff; padding:8px 12px;
}
/* Crypto.com liefert die weisse Fassung. Auf weissem Grund waere sie unsichtbar. */
.logofeld.dunkel{background:#12151b}
.partnerlogo{display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain}

/* Die Quellenkarte ist keine Werbung und darf auch nicht so aussehen: kein Etikett,
   kein Knopf, ruhige Flaeche. */
.partnerhinweis.quellenkarte{border-left:3px solid var(--gedaempft);background:transparent}
.partnerhinweis.quellenkarte p{margin:0}
/* Partnerkarten: das Logo steht oben, der Name darunter, damit die Karte auch beim
   Ueberfliegen erkennbar bleibt. */
.bpaket.partnerkarte{align-items:flex-start}
.bpaket.partnerkarte .partnerlogo{margin:0 0 10px}

/* ---------- Konto sichern, 29.08.2026 ----------
   Der Streifen sitzt unten und nimmt dem Cockpit keine Hoehe weg. Er erscheint erst, wenn
   jemand zeigt, dass er bleibt, und er laesst sich wegklicken. Kein Sperrbildschirm:
   wer gerade eine Position offen hat, darf nicht von einem Dialog ausgesperrt werden. */
.sicherstreif{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:120;
  display:flex; align-items:center; gap:12px; max-width:min(640px, calc(100vw - 24px));
  padding:11px 13px; border-radius:12px; border:1px solid var(--linie);
  background:var(--erhoben); box-shadow:0 8px 28px rgba(0,0,0,.32); font-size:12.5px;
  animation:sicherAuf .28s ease-out;
}
@keyframes sicherAuf{ from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)} }
@media (prefers-reduced-motion:reduce){ .sicherstreif{animation:none} }
.sicherpunkt{width:8px;height:8px;border-radius:50%;background:var(--warnung);flex:0 0 auto}
.sichertext{display:flex;flex-direction:column;gap:2px;min-width:0}
.sichertext b{font-size:13px}
.sichertext span{color:var(--gedaempft);line-height:1.4}
.sicherknopf{
  flex:0 0 auto; padding:8px 13px; border-radius:8px; border:none; cursor:pointer;
  background:var(--handlung); color:#fff; font-size:12.5px; font-weight:650;
}
.sicherzu{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px; border:1px solid var(--linie);
  background:transparent; color:var(--gedaempft); cursor:pointer; font-size:12px;
}
@media (max-width:700px){
  .sicherstreif{flex-wrap:wrap; bottom:64px}
  .sichertext{flex:1 1 100%; order:1}
  .sicherpunkt{order:0}
  .sicherknopf{order:2; flex:1 1 auto}
  .sicherzu{order:3}
}

/* ---------- Als App installieren und aufs Handy mitnehmen, 30.08.2026 ---------- */
.appschritte{margin:10px 0 12px;padding-left:20px;font-size:13px;line-height:1.7;color:var(--text)}
.appschritte li{margin-bottom:5px}
.appschritte b{font-weight:650}
.qrfeld{display:flex;justify-content:center;padding:14px 0 10px}
.qrfeld svg{display:block;padding:10px;box-shadow:0 2px 14px rgba(0,0,0,.25)}

/* In der installierten App gibt es keine Browserleiste: der sichere Bereich am unteren
   Rand (Wischbalken auf dem iPhone) muss dann selbst freigehalten werden. */
body[data-app="1"] .fussnav{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
body[data-app="1"] .sicherstreif{bottom:calc(16px + env(safe-area-inset-bottom))}
@media (max-width:700px){
  body[data-app="1"] .sicherstreif{bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ---------- "Dein Stand wird geholt", 30.08.2026 ----------
   Halbdurchsichtig statt undurchsichtig: man soll sehen, dass das Cockpit da ist und nur
   die Zahlen noch fehlen. Sie verschwindet spaetestens nach 12 Sekunden von selbst. */
.ladeschicht{
  position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--grund) 82%, transparent); backdrop-filter:blur(2px);
}
.ladekasten{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:22px 26px; max-width:340px; border-radius:14px;
  border:1px solid var(--linie); background:var(--erhoben); box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.ladekasten b{font-size:14px}
.ladekasten span:last-child{font-size:12px;color:var(--gedaempft);line-height:1.5}
.ladekreisel{
  width:22px; height:22px; border-radius:50%; margin-bottom:2px;
  border:2px solid var(--linie); border-top-color:var(--handlung);
  animation:ladedreh .8s linear infinite;
}
@keyframes ladedreh{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion:reduce){ .ladekreisel{animation-duration:2.4s} }

/* ---------- Trade-Karte zum Teilen, 30.08.2026 ---------- */
.teilendialog{max-width:460px}
/* Das Bild der Karte.
   Am 30.08.2026 lag das Canvas ueber allen drei Knoepfen des Dialogs, auch ueber dem
   Schliessen-Kreuz: der Kasten hatte Hoehe null, weil ein Canvas ohne feste Hoehe aus dem
   Fluss faellt, und das Bild deckte den ganzen Dialog ab. Man konnte den Dialog weder
   bedienen noch schliessen. Deshalb steht die Hoehe jetzt fest im Verhaeltnis 4 zu 5, und
   das Canvas bleibt darin. */
.teilenbild{
  position:relative; display:block; width:100%; aspect-ratio:4/5;
  margin:12px 0 14px; border-radius:12px; overflow:hidden; background:#0B0D10;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.teilenbild canvas{
  display:block; position:static;
  width:100%; height:100%; object-fit:contain;
}
/* Sicherheitsnetz fuer Browser ohne aspect-ratio: dann greift die Mindesthoehe. */
@supports not (aspect-ratio: 4/5){ .teilenbild{min-height:420px} }
.teilenknoepfe{display:flex;gap:9px}
.teilenknoepfe .ssoknopf{flex:1;margin:0;justify-content:center}
/* Ein Knopf in der Statusmeldung, etwa "Als Bild teilen" direkt nach dem Gewinn. */
.meldeknopf{margin-left:8px;padding:4px 11px;border-radius:7px;border:none;cursor:pointer;
  background:var(--handlung);color:#fff;font-size:12px;font-weight:650}


/* ---------- Partnerkarten, 30.08.2026 ----------
   Mehr Luft als vorher: Dennis am 30.08. "dass es freundlicher aussieht, lockerer und
   nicht so eng alles". Die Karten bekommen deshalb Innenabstand statt Kante an Kante,
   und die beiden Wege stehen untereinander statt gedraengt nebeneinander. */
.bpaket.partnerkarte{
  align-items:stretch; padding:16px; gap:2px;
  border-radius:14px; transition:border-color .16s ease, transform .16s ease;
}
.bpaket.partnerkarte:hover{border-color:var(--handlung); transform:translateY(-2px)}
.bpaket.partnerkarte .pr{margin-top:2px}
.bpaket.partnerkarte .kap{
  font-size:12.5px; line-height:1.55; color:var(--gedaempft); margin:4px 0 12px; min-height:2.6em;
}
.partnerwege{display:flex; flex-direction:column; gap:7px; margin-top:auto}
.partnerwege a{
  display:block; text-align:center; padding:9px 12px; border-radius:9px;
  font-size:12.5px; font-weight:600; text-decoration:none;
  border:1px solid var(--linie); color:var(--text);
}
.partnerwege a:hover{border-color:var(--handlung)}
.partnerwege a.zumanbieter{background:var(--handlung); border-color:var(--handlung); color:#fff}
.partnerwege a.zumanbieter:hover{filter:brightness(1.08)}

/* Das Raster darf atmen: bei acht Karten sonst eine gedraengte Wand. */
.bpakete{gap:14px}
@media (min-width:900px){ .bpakete{grid-template-columns:repeat(4,1fr)} }
@media (min-width:600px) and (max-width:899px){ .bpakete{grid-template-columns:repeat(2,1fr)} }

/* ---------- Seitenfuss, 30.08.2026 ----------
   Impressum, AGB und Datenschutz muessen nach Paragraf 5 DDG leicht erkennbar, unmittelbar
   erreichbar und staendig verfuegbar sein. In der waagerechten Handy-Navigationsleiste
   waren sie das nicht: sie lagen 700 Pixel ausserhalb des Sichtfensters. Hier stehen sie,
   wo jeder sie sucht. */
.seitenfuss{
  margin:40px -18px 0; padding:26px 18px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie); background:var(--flaeche);
}
.fusszeile{
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:flex-start;
  justify-content:space-between; max-width:1100px;
}
.fussmarke b{display:block; font-size:13.5px; margin-bottom:4px}
.fussmarke span{display:block; font-size:12px; color:var(--gedaempft); line-height:1.55; max-width:46ch}
.fusslinks{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center}
.fusslinks a{
  font-size:12.5px; color:var(--text); text-decoration:none;
  border-bottom:1px solid var(--linie); padding-bottom:2px;
}
.fusslinks a:hover{color:var(--handlung); border-bottom-color:var(--handlung)}
.fussunten{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--linie);
  font-size:11.5px; color:var(--gedaempft);
}
.fussunten a{color:var(--gedaempft); text-decoration:underline; text-underline-offset:2px}
@media (max-width:700px){
  .seitenfuss{margin-top:32px}
  .fusslinks{gap:10px 16px}
  .fusslinks a{font-size:13px; padding:4px 0}   /* groessere Tippflaeche */
}