/* ============================================================
   gegenbitcoin.com — Gestaltung
   Die Werte unter „gemessen" stammen aus nexo.com, dort am
   31.08.2026 im Browser abgelesen, nicht geschaetzt:
     Bedienfarbe      #14b6b1, Hover #3ecec6   (CTA)
     dunkler Grund    #0a0d11
     Kartenradius     8px (haeufigster Wert), 12px fuer grosse Blöcke
     Schatten         0 4px 20px rgba(4,25,39,.2) — sonst flach
     Typo             16/24 Fliesstext, 20/28 h3, 28/33.6 h2, 36/39.6 h1
     Kursbewegung     Minus #c34d4a, Plus #007e7e (ihr eigenes Teal)
     warme Neutralen  Beige #e4d9c5, Bronze #98836e
   Zwei bewusste Abweichungen, beide begruendet:
     1. Nexos Plus-Ton IST ihr Teal — als „schlaegt Bitcoin" faellt er
        mit der Bedienfarbe zusammen. Deshalb ein Gruen im selben
        Register: #4cb85f, Farbton 131 Grad gegen 178 Grad der Bedienung.
     2. Nexos Rot #c34d4a hat auf unserem dunklen Grund nur 4,15:1.
        Aufgehellt auf #d9605c ergibt 5,36:1.
   Schrift: NexoFont ist geschuetzt und wird nicht verwendet.
   Stattdessen Inter, selbst gehostet — kein Abruf bei Google.
   ============================================================ */

:root{
  /* Grundflaechen */
  --grund:#0a0d11;
  --grund-2:#0e1319;
  --flaeche:#131920;
  --flaeche-2:#19212a;
  --linie:#ffffff14;
  --linie-2:#ffffff26;

  /* Schrift */
  --tinte:#eef1f3;
  --tinte-2:#a8b3bb;
  --tinte-3:#76828a;

  /* Ebene 1 — Bedienung */
  --bedienung:#14b6b1;
  --bedienung-hell:#3ecec6;
  --bedienung-schwach:#14b6b11f;

  /* Ebene 2 — Bedeutung */
  --besser:#4cb85f;
  --besser-flaeche:#4cb85f1c;
  --schlechter:#d9605c;
  --schlechter-flaeche:#d9605c1c;
  --gleichauf:#8b959c;
  --gleichauf-flaeche:#ffffff0d;

  /* Ebene 3 — Bewertung */
  --punkt:#d9b866;

  /* warme Neutralen */
  --beige:#e4d9c5;
  --bronze:#98836e;

  /* Form */
  --r-klein:6px; --r:8px; --r-gross:12px; --r-pille:999px;
  --schatten:0 4px 20px rgba(4,25,39,.45);
  --raster:8px;
  --breite:1160px;

  /* Typo */
  --schrift:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Nexo setzt Zahlen in derselben Schrift mit Tabellenziffern, nicht in einer Schreibmaschinenschrift.
     Deshalb hier ebenfalls Figtree; die Ausrichtung macht font-variant-numeric:tabular-nums. */
  --schrift-zahl:"Figtree",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font:400 16px/1.5 var(--schrift);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 24px}

h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.01em}
h1{font-size:36px;line-height:1.1}
h2{font-size:28px;line-height:1.2}
h3{font-size:20px;line-height:1.4}
p{margin:0 0 16px}
.gross{font-size:19px;line-height:1.55;color:var(--tinte-2)}
.klein{font-size:13px;line-height:1.5;color:var(--tinte-3)}
.zahl{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums;letter-spacing:.02em}

a{color:var(--bedienung);text-decoration:none;
  border-bottom:1px solid #14b6b155;transition:color .15s,border-color .15s}
a:hover{color:var(--bedienung-hell);border-bottom-color:var(--bedienung-hell)}
a:focus-visible,button:focus-visible{outline:2px solid var(--bedienung-hell);outline-offset:2px;border-radius:var(--r-klein)}

/* ---------- Kopf und Sprachblock ----------
   Stehen seit dem 10.10.2026 in assets/kopf.css, der EINEN Quelle, die
   jede Seite laedt — vorher einmal hier und einmal in kopf.css, mit
   verschiedenen Variablennamen und dem Sprachschalter nur an einer
   Stelle. Hier bleibt nichts davon stehen, sonst gibt es wieder zwei
   Wahrheiten. */
/* ---------- Karten ---------- */
.karte{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r-gross);padding:32px}
.karte-flach{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r);padding:24px}

/* ---------- Bedienelemente ---------- */
.chip{font:500 13px/1 var(--schrift);padding:9px 14px;border-radius:var(--r-pille);
  background:transparent;border:1px solid var(--linie-2);color:var(--tinte-2);
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.chip:hover{color:var(--tinte);border-color:var(--tinte-3)}
.chip[aria-pressed="true"]{background:var(--bedienung);border-color:var(--bedienung);color:#04211f;font-weight:600}
.chip .anzahl{font-family:var(--schrift-zahl);font-size:11px;opacity:.75}

/* ---------- Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.kachel{position:relative;text-align:left;cursor:pointer;
  border-radius:var(--r);padding:14px 14px 12px;min-height:104px;
  background:var(--gleichauf-flaeche);border:1px solid var(--linie);
  color:var(--tinte);font-family:var(--schrift);
  display:flex;flex-direction:column;gap:2px;transition:transform .15s,border-color .15s}
.kachel:hover{transform:translateY(-2px);border-color:var(--linie-2)}
.kachel.besser{background:var(--besser-flaeche);border-color:#4cb85f4d}
.kachel.schlechter{background:var(--schlechter-flaeche);border-color:#d9605c4d}
.kachel.raus{border-style:dashed;background:transparent}
.kachel .kuerzel{font:600 17px/1.2 var(--schrift);letter-spacing:-.01em}
.kachel .bereich{font-size:10.5px;color:var(--tinte-3);text-transform:uppercase;letter-spacing:.07em}
.kachel .wert{font-family:var(--schrift-zahl);font-size:16px;font-weight:600;margin-top:auto;letter-spacing:-.005em}
.kachel.besser .wert{color:var(--besser)}
.kachel.schlechter .wert{color:var(--schlechter)}
.kachel .kap{font-family:var(--schrift-zahl);font-size:12px;color:var(--tinte-3)}
.kachel .punkte{position:absolute;top:10px;right:10px;font-family:var(--schrift-zahl);
  font-size:12.5px;font-weight:600;color:var(--punkt)}

/* ---------- Merkmal „bei Nexo handelbar" ---------- */
.merkmal{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--tinte-2);border:1px solid var(--linie-2);border-radius:var(--r-pille);
  padding:4px 10px}
.merkmal i{width:6px;height:6px;border-radius:50%;background:var(--bronze);display:block}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--linie);margin-top:64px;padding:40px 0 56px;
  color:var(--tinte-3);font-size:13px;line-height:1.6}
.fuss a{color:var(--tinte-2);border-bottom-color:var(--linie-2)}

@media (max-width:640px){
  h1{font-size:28px} h2{font-size:22px}
  .karte{padding:24px}
  .kacheln{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Ranglisten (aus der Startseite uebernommen) ---------- */
.mk{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bedienung);margin-bottom:10px}
.zsub{max-width:74ch;color:var(--tinte-2);font-size:15px;line-height:1.6;margin:0 0 16px}
.rhinweis{font-size:13px;color:var(--tinte-3);margin:-4px 0 14px}
.rtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rtabs button{font:600 13px "Figtree",sans-serif;padding:7px 15px;border-radius:8px; border:1px solid var(--linie-2);background:transparent;color:var(--tinte-2);cursor:pointer}
.rtabs button:hover{color:var(--tinte);border-color:var(--tinte-3)}
.rtabs button.on{background:var(--bedienung);border-color:var(--bedienung);color:#04211f}
.rwhat{font-size:13.5px;color:var(--tinte-2);line-height:1.55;max-width:78ch;margin:0 0 14px; padding-left:12px;border-left:2px solid var(--linie-2)}
.rwhat b{color:var(--tinte)}
/* 03.09.2026: Seit die Zeile fuenf Spalten traegt — Rang, Kuerzel, Name mit
   Bezugsgroesse, Anteil und Nebenangabe — passen zweihundertfuenfzig Pixel
   nicht mehr. Bei 420 stehen zwei Spalten nebeneinander, darunter eine. */
/* min(500px,100%) statt 500px: Auf einem 390 Pixel breiten Telefon verlangte
   die feste Untergrenze eine 500 Pixel breite Spalte — die SEITE liess sich
   dadurch seitlich schieben, gemessen 524 statt 390 Pixel. */
.rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(500px,100%),1fr));gap:6px}
/* Fuenf Spalten seit dem 03.09.2026: Rang, Kuerzel, Name mit Bezugsgroesse,
   Anteil (die Sortiergroesse) und die Nebenangabe des jeweiligen Reiters. */
/* Sechs Spalten seit dem 03.09.2026: Rang, Kuerzel, Name mit Bezugsgroesse,
   Anteil, Punktzahl und Marktkapitalisierung. Die drei Reiter sind weg, alles
   steht jetzt nebeneinander in einer Zeile. */
.rrow{display:grid;grid-template-columns:30px 74px 1fr auto auto auto;align-items:center;gap:8px 12px;padding:7px 10px;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche);font-size:12.5px}
.rrow .rn{font-family:"Figtree",sans-serif;color:var(--tinte-3);font-size:11.5px;text-align:right}
.rrow .rt{font-family:"Figtree",sans-serif;font-weight:700;font-size:16px;letter-spacing:.01em}
.rrow .rz{color:var(--tinte-3);font-size:11.5px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;min-width:76px}
/* Die Punktzahl mit ihrer Bezugsgroesse, zwischen Anteil und Marktkapitalisierung. */
.rrow .rp{color:var(--tinte-2);font-size:11.5px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;min-width:74px}
.rrow .rv{color:var(--tinte-2);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
/* Der Name selbst bleibt einzeilig, die Bezugsgroesse darunter darf umbrechen. */
.rrow .rv{white-space:normal;line-height:1.3}
.rrow .rz{font-family:"Figtree",sans-serif;color:var(--tinte);font-size:12px}
.rfoot{font-size:12px;color:var(--tinte-3);margin-top:14px;max-width:78ch;line-height:1.5}

/* ---------- Sechs Zeitfenster ---------- */
.fenster{display:grid;gap:10px;margin:20px 0 0}
/* Die vierte Spalte so breit wie ihr Inhalt. Fest auf 96 px gestellt war sie
   fuer "12 von 35 · Bitcoin 5,72-fach" (166 px) zu eng, und .fx trug
   white-space:nowrap - gemessen am 13.10.2026 lief die Seite dadurch von
   560 px bis 1100 px seitlich ueber, 46 bis 64 px, und zwar LIVE. Bei
   1366 px fiel es nicht auf, weil der Ueberhang in den Seitenrand passte. */
.fzeile{display:grid;grid-template-columns:112px 1fr 72px auto;align-items:center;gap:12px}
.fzeile .fn{font-size:13.5px;color:var(--tinte-2);white-space:nowrap}
.fzeile .fb{position:relative;height:26px;background:#ffffff0a;border-radius:var(--r-klein);overflow:hidden}
.fzeile .fb i{position:absolute;left:0;top:0;bottom:0;background:var(--schlechter);opacity:.85;border-radius:var(--r-klein)}
.fzeile .fb u{position:absolute;top:0;bottom:0;width:1px;background:var(--linie-2);text-decoration:none}
.fzeile .fw{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:14px;text-align:right;color:var(--tinte)}
.fzeile .fx{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums;font-size:12.5px;
  color:var(--tinte-3);text-align:right;white-space:nowrap}
.fzeile.gesamt{border-top:1px solid var(--linie-2);padding-top:12px;margin-top:4px}
.fzeile.gesamt .fn,.fzeile.gesamt .fw{color:var(--tinte);font-weight:600}
.fkopf{display:grid;grid-template-columns:112px 1fr 72px auto;gap:12px;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3);margin-bottom:2px}
.fkopf span:nth-child(3),.fkopf span:nth-child(4){text-align:right}
/* Unter 640 px STAPELT die Zeile: der Text steht unter dem Balken, nicht
   daneben. Drei Spalten plus eine eigene Zeile fuer .fx. Kleinere Schrift
   waere keine Loesung - 166 px in 78 px bekommt man nur mit einer Groesse,
   die niemand mehr liest. */
@media (max-width:640px){
  .fzeile,.fkopf{grid-template-columns:88px 1fr 58px;gap:8px}
  .fzeile .fn{font-size:12px}
  .fzeile .fx{grid-column:1 / -1;text-align:left;white-space:normal;
    padding-left:96px;margin-top:-4px}
  .fkopf span:nth-child(4){grid-column:1 / -1;text-align:left;padding-left:96px}
}
}

/* ---------- Kriterienliste ---------- */
.kritliste{display:grid;gap:10px;margin-top:18px}
.krit{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:14px 16px}
.krit .kp{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:19px;color:var(--punkt);text-align:right;line-height:1.3}
.krit b{font-size:15px;font-weight:600}
.krit p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--tinte-2)}
@media (max-width:640px){.krit{grid-template-columns:44px 1fr;gap:10px;padding:12px}}

/* ---------- Werbehinweis, genau einmal je Seite ---------- */
.werbung{font-size:12.5px;line-height:1.6;color:var(--tinte-3);max-width:78ch;margin:0 0 14px;
  padding:10px 12px;border:1px dashed var(--linie-2);border-radius:var(--r)}
.werbung b{color:var(--tinte-2);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.werbung a{color:var(--bedienung)}
.weiter{display:inline-block;margin-top:6px;font-weight:600;color:var(--bedienung);
  border-bottom:1px solid rgba(20,182,177,.4);text-decoration:none}
.weiter:hover{color:var(--bedienung-hell);border-bottom-color:var(--bedienung-hell)}

/* ---------- Werteverzeichnis und Werteseiten ---------- */
.vzliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:22px}
.vz{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  padding:11px 14px;text-decoration:none;color:var(--tinte)}
.vz:hover{border-color:var(--bedienung);background:var(--flaeche-2)}
.vzt{font-weight:700;font-size:15px;letter-spacing:.01em}
.vzn{color:var(--tinte-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzp{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:13px;color:var(--punkt)}
/* Wahlfreies Kennzeichen an einer EINZELNEN Kachel. Inline und kleiner als die
   Zahl, damit die Zeilenhoehe gleich bleibt — eine hoehere Kachel wuerde ueber
   .vzliste die ganze Reihe mitziehen. */
.vzk{font-family:var(--schrift);font-style:normal;font-weight:600;font-size:10px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-3);margin-left:6px}
/* minmax(0,1fr) statt 1fr: Eine 1fr-Spalte wird nie schmaler als ihr Inhalt.
   Bei 320 Pixeln stand der Steckbrief dadurch 1 Pixel ueber. Gemessen am
   10.10.2026. */
/* C1 (Auftrag 21.10.2026). Die linke Spalte stand auf minmax(0,1fr) und fiel
   damit auf 0 Pixel zusammen, sobald die rechte Spalte (auto) ihre volle
   Inhaltsbreite nahm: gemessen "0px 717.75px" auf /werte/rlc-iexec-rlc.
   Die Beschriftungen lagen dann ueber den Werten. Kein Ueberhangmittel
   sieht das, weil nichts seitlich uebersteht - es ueberlappt INNERHALB der
   Karte; dafuer gibt es jetzt pruefung/ueberlappung.mjs.
   GEMESSEN, nicht geraten, an derselben Seite in beiden Sprachen bei 1366
   und 390 Pixel (Befunde / Blockhoehe):
     minmax(0,1fr) auto        10-19 Befunde   heutiger Stand
     minmax(9ch,1fr) auto       2-5 Befunde    eine FESTE Mindestbreite
                                               reicht nicht: lange
                                               Beschriftungen treten weiter aus
     auto minmax(0,1fr)           0 Befunde    aber 438 px hoch bei 390 px
     minmax(min-content,1fr) auto 0 Befunde    291-333 px - gewaehlt
   min-content ist die Mindestbreite, die mit der Schrift mitgeht; eine
   Zahl in ch haengt an einer Schriftgroesse und hielt die Pruefung nicht. */
.pgrid2{display:grid;grid-template-columns:minmax(min-content,1fr) auto;gap:6px 16px;font-size:14px;margin-top:12px}
.pgrid2 b{overflow-wrap:anywhere}
.pgrid2 span{color:var(--tinte-2)}
.pgrid2 b{font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Symbole in Zeilen ---------- */
.vz{grid-template-columns:26px 56px 1fr auto}
.vzs{width:26px;height:26px;border-radius:50%;object-fit:contain;background:#ffffff08}
.vzs.ers{display:grid;place-items:center;font:700 10px "Figtree",sans-serif;color:var(--tinte-2);
  background:var(--flaeche-2)}
h1.mitsym{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kopfsym{width:26px;height:26px;border-radius:50%;object-fit:contain;background:#ffffff08;flex:none}
.kopfsym.ers{display:grid;place-items:center;font:700 10px "Figtree",sans-serif;color:var(--tinte-2);
  background:var(--flaeche-2)}

/* --- Teil E und F: Kursbild und Zyklustabelle (02.09.2026) ------------------ */
.kursbild{margin:16px 0 0;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r);padding:14px 16px 6px}
.kursbild figcaption{font-size:12.5px;color:var(--tinte-3);margin-bottom:2px}
.kursbild svg{width:100%;height:auto;display:block;overflow:visible}
.kbachse{stroke:var(--linie-2);stroke-width:2}
.kbjetzt{stroke:var(--bedienung);stroke-width:2}
.kbw{font:600 13px var(--schrift-zahl),sans-serif;fill:var(--tinte)}
.kbl{font-size:10.5px;fill:var(--tinte-3)}
.kbj{font:600 11px var(--schrift-zahl),sans-serif;fill:var(--bedienung)}

/* Die Tabelle scrollt in ihrem eigenen Kasten. Fuenf Spalten mit je drei Zeilen
   passen auf keinem Telefon nebeneinander — die Seite darf deshalb trotzdem
   nicht quer laufen. */
.ztabelle{overflow-x:auto;margin-top:4px}
.ztabelle table{border-collapse:collapse;width:100%;min-width:720px;font-size:13px}
.ztabelle th{text-align:left;font:600 10.5px var(--schrift),sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinte-3);padding:0 12px 7px 0;border-bottom:1px solid var(--linie)}
.ztabelle td{padding:9px 12px 9px 0;border-bottom:1px solid var(--linie);vertical-align:top;
  color:var(--tinte-2)}
.ztabelle td b{display:block;color:var(--tinte);font-family:var(--schrift-zahl),sans-serif;
  font-weight:600;font-variant-numeric:tabular-nums}
.ztabelle .zn b{font-family:var(--schrift),sans-serif}
.ztabelle .zk{display:block;font-size:11.5px;color:var(--tinte-3);font-variant-numeric:tabular-nums}
.ztabelle .zd{display:block;font-size:11px;color:var(--tinte-3);margin-top:2px}
.ztabelle .zp{font-size:12px;color:var(--tinte-2)}
.ztabelle .zleer{color:var(--tinte-3);font-style:italic}
/* Der Teil-gemessen-Hinweis sitzt unter seiner Zeile und traegt die Warnfarbe,
   damit niemand die Endpunkte darueber fuer Zyklusgrenzen haelt. */
.ztabelle .zteil td{font-size:11.5px;line-height:1.5;color:var(--tinte-2);
  background:var(--schlechter-flaeche);border-bottom:1px solid var(--linie);padding:7px 12px}
/* Jahr fuer Jahr: eine Zeile je Jahr, jede Zahl mit ihrem Wort davor.
   Nebeneinander gesetzt und unbeschriftet war nicht zu erkennen, welche
   Prozentzahl der Dollar und welche Bitcoin war. */
.ztabelle .jahre td{padding:9px 0 3px;border-bottom:0}
.ztabelle .jk{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-3)}
.ztabelle tr.jahr td{padding:3px 0;border-bottom:0;font-size:12.5px;color:var(--tinte-2);
  font-variant-numeric:tabular-nums}
.ztabelle tr.jahr.letzte td{padding-bottom:16px;border-bottom:1px solid var(--linie)}
.ztabelle tr.jahr td b{display:inline;color:var(--tinte);font-weight:600;margin-right:4px}
.ztabelle .js{color:var(--tinte-3)}
.ztabelle .jb{color:var(--tinte-2)}
/* Der Warnkasten ist ein Absatz, kein Zeilenstapel. */
.ztabelle .zteil td p{margin:0;max-width:none}

/* --- Ranglisten: Umschalter, Anteilspalte und Bezugsgroesse (03.09.2026) ---- */
.rumschalt{display:flex;gap:0;margin:22px 0 6px;border:1px solid var(--linie-2);
  border-radius:9px;overflow:hidden;width:max-content}
.rumschalt button{font:600 12.5px var(--schrift),sans-serif;padding:8px 16px;border:0;
  background:transparent;color:var(--tinte-2);cursor:pointer}
.rumschalt button+button{border-left:1px solid var(--linie-2)}
.rumschalt button.on{background:var(--bedienung);color:#04211f}
.rzeile{font-size:13px;color:var(--tinte-3);margin:10px 0 0}
/* Der Anteil ist die Sortiergroesse und steht deshalb vor der Nebenangabe. */
.rrow .ra{font-family:var(--schrift-zahl),sans-serif;font-weight:600;color:var(--tinte);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rrow .rerr{display:block;font-size:11px;color:var(--tinte-3);margin-top:2px}
/* Gruener Rahmen: seit dem 03.09.2026 die Meldeschwelle von 65 PUNKTEN aus
   Fassung 4 — nicht mehr die alten Konsens-Werte, die es nicht mehr gibt. */
/* Der gruene Rahmen markiert wieder die acht Konsens-Werte aus Abschnitt 10
   der Masterdatei — die Meldeschwellen-Fassung vom 03.09.2026 ist zurueckgenommen. */
.rrow.kon{border-color:var(--besser);background:var(--besser-flaeche)}
/* Telefon: Die Ranglistenzeile bricht um, statt die Seite breit zu machen
   (Auftrag 10.10.2026). Oben Nummer, Kuerzel und Anteil, darunter Name und
   Zahl. Die Felder stehen ausdruecklich an ihrem Platz, weil die automatische
   Verteilung bei fuenf Feldern in drei Spalten sonst eine Luecke laesst. */
@media (max-width:640px){
  .rlist{grid-template-columns:1fr}
  .rrow{grid-template-columns:26px 1fr auto;gap:2px 8px;padding:8px 10px}
  .rrow .rn{grid-area:1/1;text-align:right}
  .rrow .rt{grid-area:1/2;font-size:15px}
  .rrow .ra{grid-area:1/3;justify-self:end}
  .rrow .rv{grid-area:2/2;white-space:normal;overflow:visible;text-overflow:clip;min-width:0}
  .rrow .rz{grid-area:2/3;justify-self:end;min-width:0;white-space:normal;text-align:right}
}
/* Nachtrag: die seit dem 03.09.2026 bewerteten Werte, ohne Rang. */
.rneuh{font:600 17px var(--schrift),sans-serif;margin:34px 0 0;color:var(--tinte)}
.rneup{font-size:12.5px;color:var(--tinte-3);margin:7px 0 12px;max-width:78ch;line-height:1.5}
.rneup b{color:var(--tinte-2)}
.rschwelle{font-size:12.5px;color:var(--tinte-2);margin:14px 0 8px;max-width:78ch;line-height:1.5}
.rschwelle b{color:var(--tinte)}
/* Kreuz an jedem tiefsten Schluss, der aus dem wandernden 720-Tage-Fenster von
   Kraken stammt. Die Zahl kann sich aendern, ohne dass sich der Markt bewegt hat —
   ohne die Kennzeichnung waere sie auf der Seite eine Falschaussage. */
.krk{color:var(--schlechter);font-weight:700;padding-left:1px}
/* Verzeichnis nach Bereichen, 05.09.2026. Die Leiste laeuft mit und SPRINGT nur —
   sie blendet nichts aus, weil sonst die Suche im Browser und der Ueberblick
   kaputtgingen, um den es auf dieser Seite geht. Der Versatz oben haelt Abstand
   zum mitlaufenden Seitenkopf; scroll-margin-top sorgt dafuer, dass eine
   angesprungene Ueberschrift nicht unter Kopf und Leiste verschwindet. */
/* Gemessen am 05.09.2026 im Browser: der mitlaufende Seitenkopf ist 68 Pixel hoch.
   Bei top:56 verschwand die obere Kante der Leiste dahinter. 76 laesst acht Pixel Luft. */
.vznav{position:sticky;top:76px;z-index:20;display:flex;flex-wrap:wrap;gap:6px;
  margin:26px 0 8px;padding:10px 12px;border:1px solid var(--linie-2);border-radius:12px;
  background:var(--flaeche);backdrop-filter:blur(10px)}
.vznav a{display:inline-flex;align-items:center;gap:5px;font:600 12px "Figtree",sans-serif;
  padding:6px 9px;border-radius:8px;border:1px solid var(--linie-2);color:var(--tinte-2);
  text-decoration:none}
.vznav a:hover{color:var(--tinte);border-color:var(--tinte-3);background:var(--flaeche-2)}
.vznav .vzhoch{margin-left:auto;border-style:dashed}
.vzgruppe{margin-top:30px}
.vzgruppe h2{font-size:19px;scroll-margin-top:var(--vzoff,148px);padding-bottom:8px;
  border-bottom:1px solid var(--linie-2)}
.vzgruppe .vzanz{font-weight:500;color:var(--tinte-2);font-size:14px}
.vzgruppe .vzliste{margin-top:12px}
/* Auf dem Telefon umbricht die Leiste sonst auf 159 Pixel und frisst ein Fuenftel
   des Bildschirms — gemessen am 05.09.2026 auf 390 mal 844. Deshalb dort EINE Zeile,
   die sich seitlich schieben laesst, statt vieler Zeilen uebereinander. */
@media (max-width:640px){
  .vznav{top:72px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:8px 10px}
  .vznav::-webkit-scrollbar{display:none}
  .vznav a{flex:0 0 auto;white-space:nowrap}
  .vznav .vzhoch{margin-left:6px}
  .vzgruppe h2{scroll-margin-top:var(--vzoff,140px)}
}
/* Suchfeld im Verzeichnis, 05.09.2026.
   Der Treffer ist TUERKIS umrandet — nie rot, nie gruen. Diese beiden Farben
   bedeuten auf der ganzen Seite "schwaecher" beziehungsweise "staerker als
   Bitcoin"; ein roter Suchtreffer waere eine Falschaussage ueber den Wert. */
.vzsuche{position:relative;display:flex;align-items:center;gap:6px;flex:0 0 auto;
  border:1px solid var(--linie-2);border-radius:8px;padding:0 10px 0 8px;background:var(--flaeche-2)}
.vzsuche:focus-within{border-color:var(--bedienung)}
.vzlupe{display:grid;place-items:center;width:18px;height:18px;cursor:text}
.vzlupe svg{width:15px;height:15px;fill:none;stroke:var(--tinte-3);stroke-width:1.9;
  stroke-linecap:round}
.vzsuche:focus-within .vzlupe svg{stroke:var(--bedienung)}
.vzsuche input{width:132px;border:0;background:transparent;outline:none;color:var(--tinte);
  font:500 12.5px "Figtree",sans-serif;padding:7px 0}
.vzsuche input::placeholder{color:var(--tinte-3)}
.vzsuche input::-webkit-search-cancel-button{-webkit-appearance:none}
.vzsuche input.leer{color:var(--tinte-2)}
.vzstatus{font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums;font-size:11px;
  color:var(--tinte-3);white-space:nowrap}
.vz{scroll-margin-top:var(--vzoff,148px)}
.vz.vztreffer{border-color:var(--bedienung);box-shadow:0 0 0 1px var(--bedienung)}
@keyframes vzblitz{0%{box-shadow:0 0 0 1px var(--bedienung),0 0 0 8px rgba(20,182,177,.30)}
                   100%{box-shadow:0 0 0 1px var(--bedienung),0 0 0 8px rgba(20,182,177,0)}}
.vz.vzblitz{animation:vzblitz .85s ease-out 1}
@media (prefers-reduced-motion:reduce){.vz.vzblitz{animation:none}}
/* Telefon: Die Leiste bleibt EINZEILIG. Das Feld liegt eingeklappt als Lupe da und
   klappt beim Antippen auf — gemessen wurde am 05.09.2026, dass ein dauerhaft
   offenes Feld die Leiste zweizeilig macht. */
@media (max-width:640px){
  .vzsuche input{width:0;padding:7px 0;transition:width .18s ease}
  .vzsuche:focus-within input{width:150px}
  .vzsuche:focus-within{flex:0 0 auto}
  .vz{scroll-margin-top:var(--vzoff,140px)}
}
/* Marker an jedem Prozentwert gegen Bitcoin: Er stammt aus einer Momentaufnahme
   vom 28.08.2026, nicht aus Tagesschlusskursen. Am 05.09.2026 nachgemessen — die
   abgelegten Zahlen sind aus keinem Paar von Tagesschluessen reproduzierbar. */
.mmk{color:var(--tinte-3);font-weight:700;padding-left:1px}

/* ---------- Wofuer es da ist / Vertragsadresse (06.09.2026) ----------
   Beschriftung links, Satz rechts. Anders als .pgrid2 steht der Text hier
   LINKSBUENDIG: Das sind Saetze, keine Messwerte, und rechtsbuendige Saetze
   liest niemand. Unter 640 Pixeln stapelt es, weil eine feste Beschriftungs-
   spalte den Satz dort auf drei Woerter je Zeile quetscht.
   Staerke und Schwaeche tragen bewusst KEINE Farbe: Gruen und Rot bedeuten auf
   dieser Seite durchgaengig "staerker/schwaecher als Bitcoin". */
.wfl{display:grid;grid-template-columns:max-content 1fr;gap:9px 20px;
  margin:14px 0 0;font-size:14.5px;line-height:1.55}
.wfl dt{color:var(--tinte-3);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding-top:3px;white-space:nowrap}
.wfl dd{margin:0;color:var(--tinte)}
@media (max-width:640px){
  .wfl{grid-template-columns:1fr;gap:0}
  .wfl dt{padding-top:12px}
  .wfl dt:first-of-type{padding-top:0}
  .wfl dd{margin:2px 0 0}
}
/* Ueberschrift der beiden Felder auf der Sammelseite der Werte ohne Punktzahl.
   Dort sitzen sie in einer Karte, die es schon gibt — eine zweite Karte darin
   sieht kaputt aus, also nur eine Zwischenueberschrift. */
.fldh{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-3);margin:18px 0 0}
.fldh + .wfl{margin-top:8px}
.vket{margin:10px 0 0;font-size:14.5px;color:var(--tinte-2)}
.vket b{color:var(--tinte);font-weight:600}
/* Die Adresse steht ungekuerzt. Sie bricht deshalb um — abschneiden waere eine
   andere Adresse, und eine halbe Adresse ist die haeufigste Art, den falschen
   Token zu erwischen. user-select:all heisst: EIN Klick markiert sie ganz,
   auch wenn der Kopierknopf nicht arbeitet. */
.vadr{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;
  padding:10px 12px;border:1px solid var(--linie-2);border-radius:8px;
  background:var(--flaeche-2)}
.vadr code{flex:1 1 260px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.5;color:var(--tinte);word-break:break-all;
  -webkit-user-select:all;user-select:all}
.vkop{flex:0 0 auto;font:600 12px "Figtree",system-ui,sans-serif;cursor:pointer;
  padding:6px 12px;border-radius:999px;background:transparent;
  border:1px solid var(--linie-2);color:var(--tinte-2)}
.vkop:hover{color:var(--tinte);border-color:var(--tinte-3)}
.vkop:focus-visible{outline:2px solid var(--bedienung);outline-offset:2px}
/* Kandidaten-Unterseite, 18.09.2026.
   Keine roten und gruenen Markierungen in der Kriterientabelle: Diese beiden Farben
   bedeuten auf der ganzen Seite "schwaecher" beziehungsweise "staerker als Bitcoin".
   Volle und leere Kriterien werden deshalb nur ueber Gewicht und Helligkeit
   unterschieden, nicht ueber Farbe. */
.kvorbehalt{max-width:78ch;margin-top:22px;border:2px solid #d9b866;background:#d9b86612}
.kliste{margin:12px 0 0;padding-left:20px;line-height:1.55}
.kliste li{margin:4px 0}
.ktab{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
.ktab th{text-align:left;font-weight:600;color:var(--tinte-2);border-bottom:1px solid var(--linie-2);padding:7px 10px}
.ktab td{border-bottom:1px solid var(--linie-2);padding:7px 10px;vertical-align:top}
.ktab td:nth-child(2){white-space:nowrap}
.ktab tr.kvoll td:first-child{font-weight:700}
.ktab tr.knull td{color:var(--tinte-3)}
.ktab tr.ksumme td{border-bottom:0;border-top:2px solid var(--linie-2)}
.ktab .kz{text-align:right;font-family:var(--schrift-zahl);font-variant-numeric:tabular-nums}
.kug{color:#d9b866;font-weight:700;padding-left:2px}

/* Hinweis ueber deutsch gebliebenen Abschnitten. Deutlich, aber nicht alarmierend:
   Der Text darunter ist richtig, nur nicht uebersetzt. */
.nurdeutsch{max-width:70ch;margin:18px auto 0;padding:10px 14px;border:1px dashed var(--linie);
  border-radius:var(--r);background:var(--flaeche)}
.nurdeutsch p{margin:0;font:600 13px "Figtree",sans-serif;color:var(--tinte-2)}

/* Zeile fuer englische Leser auf den Steckbriefen, die es nur deutsch gibt. */
.nurde-zeile{margin:0 0 14px;padding:8px 12px;border:1px dashed var(--linie);
  border-radius:var(--r);background:var(--flaeche);font:600 13px "Figtree",sans-serif;
  color:var(--tinte-2)}