/* Markt-Radar -- Oberflaeche.
   Tiefer, blaustichiger Grund, wenig Farbe, klare Kanten: Die Seite zeigt viele
   Zahlen, und auf dunklem Untergrund treten sie hervor, ohne zu blenden. Gruen
   und Rot sind ausschliesslich fuer Kursrichtung und Urteil reserviert -- werden
   sie zur Dekoration benutzt, stumpft die Ampel ab. Blau ist die einzige
   Schmuckfarbe und markiert, was anklickbar ist. */

/* Zwei Paletten, ein Regelsatz. Alles Farbige steht als Variable hier oben;
   im uebrigen Blatt und in app.js taucht kein Farbwert mehr auf. Der dunkle
   Satz ist die Vorgabe, der helle ueberschreibt nur die Farben -- Abstaende,
   Radien und Schriften bleiben unberuehrt.

   Im Hellen sind Gruen, Rot und Blau kraeftiger und dunkler angesetzt als im
   Dunklen. Dieselben Toene wuerden auf Weiss verblassen, und gerade die
   Kursampel darf nicht zum Raten zwingen. */
:root {
  --bg: #090D14;
  --flaeche: #111823;
  --flaeche-leise: #0C121B;
  --flaeche-hoch: #18212E;
  --rand: #1E2836;
  --rand-stark: #2E3C4E;
  --text: #DEE5ED;
  --text-leise: #97A4B5;
  --text-schwach: #8494A6;
  --akzent: #5B9DD9;
  --akzent-tief: #08121C;
  --akzent-hell: #142C43;
  --akzent-rand: #29506F;
  --akzent-hover: #7CB4E4;
  --gut: #41B583;
  --gut-bg: #10261D;
  --gut-rand: #1E4A38;
  --schlecht: #E2646E;
  --schlecht-bg: #2A1519;
  --schlecht-rand: #4C2429;
  --warn: #DCA243;
  --warn-bg: #271E10;
  --warn-rand: #4A3A1B;
  --eigen: rgba(91, 157, 217, 0.08);
  --schleier: rgba(3, 6, 11, 0.68);
  --wurf: 0, 0, 0;
  --radius: 8px;
  --schrift: Barlow, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  /* Barlow Semi Condensed wird nicht mehr ausgeliefert -- sie trug die
     Wortmarke und ein halbes Dutzend Ueberschriften und kostete dafuer
     dreiundzwanzig Kilobyte bei jedem Aufruf. Wer sie auf dem Geraet hat,
     bekommt sie weiter; alle anderen bekommen Barlow, die ohnehin schon
     geladen ist. Die Stelle bleibt als eigene Variable stehen: Sie sagt
     "hier steht eine Ueberschrift", und das bleibt richtig. */
  --schrift-eng: "Barlow Semi Condensed", Barlow, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --schatten: 0 1px 2px rgba(var(--wurf), 0.45);
  /* Hoehe der stehenden Leiste. app.js misst sie; der Wert hier gilt nur fuer
     die ersten Bildschirmaufbauten, bevor die Messung greift. */
  --leiste-h: 106px;
}

/* Der helle Satz. Einmal fuer "System steht auf hell und der Nutzer hat nichts
   anderes gewaehlt", einmal fuer die ausdrueckliche Wahl. */
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) {
    --bg: #F1F4F8;
    --flaeche: #FFFFFF;
    --flaeche-leise: #EDF1F6;
    --flaeche-hoch: #E4EAF2;
    --rand: #DCE3EC;
    --rand-stark: #B5C1D0;
    --text: #14202E;
    --text-leise: #4B5A6C;
    --text-schwach: #5A6878;
    --akzent: #1C6AAC;
    --akzent-tief: #FFFFFF;
    --akzent-hell: #E3EEF8;
    --akzent-rand: #A9CBE7;
    --akzent-hover: #15578E;
    --gut: #14764C;
    --gut-bg: #E3F3EB;
    --gut-rand: #B2DAC5;
    --schlecht: #B01F2C;
    --schlecht-bg: #FBE8EA;
    --schlecht-rand: #EEBFC4;
    --warn: #8A5A05;
    --warn-bg: #FAF0DA;
    --warn-rand: #E6D0A0;
    --eigen: rgba(28, 106, 172, 0.07);
    --schleier: rgba(20, 32, 46, 0.42);
    --wurf: 24, 40, 60;
    --schatten: 0 1px 2px rgba(var(--wurf), 0.10);
  }
}
:root[data-thema="hell"] {
  --bg: #F1F4F8;
  --flaeche: #FFFFFF;
  --flaeche-leise: #EDF1F6;
  --flaeche-hoch: #E4EAF2;
  --rand: #DCE3EC;
  --rand-stark: #B5C1D0;
  --text: #14202E;
  --text-leise: #4B5A6C;
  --text-schwach: #5A6878;
  --akzent: #1C6AAC;
  --akzent-tief: #FFFFFF;
  --akzent-hell: #E3EEF8;
  --akzent-rand: #A9CBE7;
  --akzent-hover: #15578E;
  --gut: #14764C;
  --gut-bg: #E3F3EB;
  --gut-rand: #B2DAC5;
  --schlecht: #B01F2C;
  --schlecht-bg: #FBE8EA;
  --schlecht-rand: #EEBFC4;
  --warn: #8A5A05;
  --warn-bg: #FAF0DA;
  --warn-rand: #E6D0A0;
  --eigen: rgba(28, 106, 172, 0.07);
  --schleier: rgba(20, 32, 46, 0.42);
  --wurf: 24, 40, 60;
  --schatten: 0 1px 2px rgba(var(--wurf), 0.10);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Sagt dem Browser, in welcher Welt er Bildlaufleisten, Auswahlkaesten und
   Ankreuzfelder zeichnen soll. Ohne das bleiben die Systembauteile im
   Hellmodus dunkel -- und ein dunkles Auswahlfeld auf weissem Grund ist der
   sichtbarste Riss, den ein halber Themenwechsel hinterlaesst. */
:root { color-scheme: dark; }
:root[data-thema="hell"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) { color-scheme: light; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-eng);
  font-weight: 600; letter-spacing: 0;
}

/* Zahlen stehen in Spalten untereinander -- ohne Tabellenziffern tanzen sie. */
.mono, .kuerzel { font-variant-numeric: tabular-nums; }

main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }

.klein { font-size: 12px; color: var(--text-schwach); }

/* ------------------------------------------------------------------ Kopf */

/* Kopf, Fortschrittsbalken und Reiterstreifen sind eine einzige stehende
   Leiste. Frueher klebten Kopf und Reiter getrennt, der Reiter auf eine feste
   Hoehe von 55px gesetzt -- die aber nicht stimmte, sobald sich die Kopfhoehe
   aenderte. Als ein Block kann nichts mehr verrutschen, und weil der Block
   deckend ist, laeuft auch kein Inhalt mehr hindurch. */
.kopfleiste {
  position: sticky; top: 0; z-index: 30;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  box-shadow: 0 8px 20px -10px rgba(var(--wurf), 0.55);
}

.kopf {
  display: flex; align-items: center; gap: 20px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--rand);
}

.marke {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--schrift-eng);
  font-size: 21px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.marke span { color: var(--akzent); }
/* Die Schuessel: zwei Boegen und ein Punkt -- das Zeichen der Seite. */
.marke svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--akzent); }

.kopf-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.stand { font-size: 12px; color: var(--text-schwach); text-align: right; line-height: 1.35; }

.knopf {
  padding: 8px 15px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.knopf:hover:not(:disabled) { background: var(--flaeche-leise); border-color: var(--akzent); }
.knopf:disabled { opacity: 0.55; cursor: default; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tief); font-weight: 600; }
.knopf.haupt:hover:not(:disabled) { background: var(--akzent-hover); border-color: var(--akzent-hover); }
.knopf.schlicht { font-size: 12.5px; padding: 6px 12px; color: var(--text-leise); }
.knopf.mittig { display: block; margin: 18px auto 0; }

/* Knopf, der nur ein Zeichen traegt. Quadratisch, damit er neben dem
   beschrifteten Knopf nicht wie ein abgeschnittener aussieht. */
.knopf.nur-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; width: 34px; height: 34px; color: var(--text-leise);
}
.knopf.nur-zeichen svg { width: 17px; height: 17px; }
/* Das Zeichen zeigt, wohin es geht, nicht wo man ist: Im Dunklen die Sonne. */
.zeichen-sonne { display: block; }
.zeichen-mond { display: none; }
:root[data-thema="hell"] .zeichen-sonne { display: none; }
:root[data-thema="hell"] .zeichen-mond { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) .zeichen-sonne { display: none; }
  :root:not([data-thema="dunkel"]) .zeichen-mond { display: block; }
}

/* Namen, die ein Wertpapier oeffnen.

   Diese standen ueberall als <div> oder <span> mit einem Klickhandler --
   sichtbar anklickbar, mit Zeigefinger und Farbwechsel beim Ueberfahren, aber
   fuer Tastatur und Sprachausgabe schlicht nicht vorhanden. Jetzt sind es
   Knoepfe. Der Kasten drumherum kann keiner werden: Empfehlungskarten tragen
   selbst Knoepfe (merken, vergleichen, ins Depot), und ein Knopf im Knopf ist
   ungueltig. Also traegt der Name die Rolle -- er ist ohnehin das, was man
   anklickt.

   Der Satz steht bewusst frueh in dieser Datei: Die einzelnen Namensregeln
   weiter unten setzen Groesse und Gewicht und sollen dabei das letzte Wort
   behalten. Deshalb auch keine font-Kurzform, die wuerde sie ueberschreiben. */
.namensknopf {
  display: inline-block; max-width: 100%; vertical-align: baseline;
  padding: 0; margin: 0;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: inherit; text-align: left;
  color: inherit; background: none; border: none;
  cursor: pointer;
}
.namensknopf:hover { color: var(--akzent); }
.namensknopf:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 3px;
}

/* ----------------------------------------------------------------- Suche */

.suchfeld { position: relative; flex: 1 1 380px; max-width: 560px; }
.such-lupe {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-schwach); pointer-events: none;
}
.suchfeld input {
  width: 100%;
  padding: 9px 34px 9px 35px;
  font: inherit; font-size: 14px;
  color: var(--text);
  background: var(--flaeche-leise);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.suchfeld input:focus {
  outline: none; background: var(--flaeche);
  border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell);
}
.suchfeld input::-webkit-search-cancel-button { display: none; }
.such-leeren {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 19px; line-height: 1;
  background: none; border: none; color: var(--text-schwach); cursor: pointer; padding: 0 4px;
}
.such-leeren:hover { color: var(--text); }

.such-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 40;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(var(--wurf), 0.35);
  overflow: hidden;
  max-height: 60vh; overflow-y: auto;
}
.such-liste.unten { top: calc(100% + 3px); }
.such-treffer {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--flaeche-leise);
}
.such-treffer:last-child { border-bottom: none; }
.such-treffer:hover, .such-treffer.aktiv { background: var(--akzent-hell); }
.such-treffer .kuerzel { font-family: var(--mono); font-size: 12px; color: var(--akzent); min-width: 74px; }
.such-treffer .st-name { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.such-treffer .st-art {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--flaeche-leise); color: var(--text-schwach); border: 1px solid var(--rand);
}
.such-hinweis { padding: 11px 13px; font-size: 13px; color: var(--text-schwach); }

/* ----------------------------------------------------------- Fortschritt */

.fortschritt {
  position: relative;
  display: flex; align-items: center;
  height: 28px; padding: 0 20px;
  background: var(--akzent-hell);
  border-bottom: 1px solid var(--rand);
  font-size: 12.5px; color: var(--akzent);
  overflow: hidden;
}
.fortschritt span { position: relative; z-index: 1; }
.fortschritt-balken {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--akzent-hell);
  transition: width 0.35s ease;
}

/* ------------------------------------------------------------- Marktlage */

.lage {
  max-width: 1240px; margin: 18px auto -4px; padding: 0 20px;
}
.lage-inhalt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--text-schwach);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.lage-inhalt[data-lage="Rückenwind"] { border-left-color: var(--gut); }
.lage-inhalt[data-lage="Gemischt"] { border-left-color: var(--warn); }
.lage-inhalt[data-lage="Gegenwind"] { border-left-color: var(--schlecht); }
.lage-titel { font-weight: 650; font-size: 14.5px; }
.lage-text { font-size: 13.4px; color: var(--text-leise); margin-top: 2px; }

/* Stoerungskasten: gleiche Breite und Form wie die Lage darueber, damit er
   zum Rest gehoert -- nur in Warnfarbe und mit einem Knopf, der den Versuch
   wiederholt. Er ersetzt den Satz, der frueher klein in der Kopfzeile stand
   und dort niemandem auffiel. */
.stoerung {
  max-width: 1240px; margin: 18px auto 0; padding: 13px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--warn-bg);
  border: 1px solid var(--warn-rand);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
}
@media (min-width: 1281px) { .stoerung { margin-inline: auto; } }
@media (max-width: 1280px) { .stoerung { margin-inline: 20px; } }
.stoerung-text { flex: 1 1 260px; min-width: 0; }
.stoerung-text strong { display: block; font-size: 14.5px; font-weight: 650; }
.stoerung-text span { display: block; font-size: 13.4px; color: var(--text-leise); margin-top: 2px; }
.stoerung .knopf { flex: 0 0 auto; }

/* Die Kurzform: eine Zeile statt eines Absatzes.

   Derselbe Marktkontext stand als ausgeschriebener Kasten auf jeder Ansicht
   ausser der Startseite -- dreimal derselbe Text auf drei Bildschirmen. Beim
   dritten Mal liest ihn niemand mehr. Der ganze Text steht jetzt einmal auf
   der Startseite; hier bleibt, was man beim Lesen einer Rangliste im Kopf
   haben muss, und ein Weg zum Rest. */
.lage-kurz {
  align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 9px 14px;
}
.lage-kurztext { font-size: 13.2px; color: var(--text-leise); }
.lage-mehr {
  margin-left: auto; font-size: 12.8px; color: var(--akzent);
  text-decoration: none; white-space: nowrap;
}
.lage-mehr:hover { text-decoration: underline; }
.lage-mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------------- Reiter */

/* Der Streifen geht ueber die volle Fensterbreite; die Reiter selbst stehen
   ueber das Innenabstands-Maximum buendig zum Inhalt darunter. Ein auf 1240px
   beschnittener Streifen liesse den Inhalt links und rechts daran vorbei. */
.reiter {
  display: flex; gap: 2px;
  overflow-x: auto; overflow-y: hidden;
  padding: 0 max(20px, calc((100% - 1240px) / 2));
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }

/* Auf schmalen Geraeten passen die sechs Reiter nicht nebeneinander. Statt
   einer Scrollleiste, die auf dem Handy ohnehin unsichtbar bleibt, franst die
   Seite aus, an der noch etwas steht -- das liest sich als Aufforderung zu
   wischen, ohne dass ein Pfeil Platz wegnimmt. */
.reiter.mehr-rechts {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.reiter.mehr-links {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
          mask-image: linear-gradient(to right, transparent, #000 40px);
}
.reiter.mehr-links.mehr-rechts {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.reiter button {
  position: relative;
  font: inherit; font-size: 14px; font-weight: 550;
  padding: 9px 15px;
  color: var(--text-leise);
  background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color 0.12s;
}
.reiter button:hover { color: var(--text); }
.reiter button[aria-selected="true"] { color: var(--akzent); border-bottom-color: var(--akzent); }
.reiter button:focus-visible {
  outline: none; color: var(--text);
  box-shadow: inset 0 0 0 2px var(--akzent-hell);
}

/* ---------------------------------------------------------------- Tafeln */

.tafel-kopf { margin-bottom: 18px; }
.tafel-kopf h1 { font-size: 21px; }
.tafel-kopf p { margin: 5px 0 0; font-size: 13.8px; color: var(--text-leise); max-width: 700px; }

.abschnitt {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-schwach); margin: 26px 0 10px; font-weight: 600;
}

/* --------------------------------------------------------------- Klapper */

.klapp {
  margin-top: 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.klapp > summary {
  cursor: pointer; list-style: none;
  padding: 11px 15px;
  font-size: 13.6px; font-weight: 550; color: var(--text-leise);
  display: flex; align-items: center; gap: 8px;
}
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary::before { content: "▸"; color: var(--akzent); transition: transform 0.15s; }
.klapp[open] > summary::before { transform: rotate(90deg); }
.klapp > summary:hover { color: var(--text); }
.klapp .zaehler { color: var(--text-schwach); font-weight: 400; }
.klapp-inhalt { padding: 0 15px 15px; font-size: 13.5px; color: var(--text-leise); }
.klapp-inhalt p { margin: 0 0 9px; }
.klapp-inhalt ul { margin: 0 0 9px; padding-left: 19px; }
.klapp-inhalt li { margin-bottom: 5px; }
.klapp-inhalt b { color: var(--text); }

/* -------------------------------------------------------------- Begriffe */

.begriff {
  font: inherit; color: inherit; background: none; border: none; padding: 0;
  cursor: help; border-bottom: 1px dotted var(--text-schwach);
}
.begriff:hover { color: var(--akzent); border-bottom-color: var(--akzent); }

.begriffbox {
  position: absolute; z-index: 80; max-width: 330px;
  padding: 13px 15px 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(var(--wurf), 0.38);
  font-size: 13px; color: var(--text-leise);
}
.begriffbox h4 { font-size: 13.5px; color: var(--text); margin-bottom: 4px; padding-right: 18px; }
.begriffbox p { margin: 0; }
.begriffbox-zu {
  position: absolute; top: 5px; right: 8px;
  font: inherit; font-size: 17px; line-height: 1;
  background: none; border: none; color: var(--text-schwach); cursor: pointer;
}

/* ----------------------------------------------------------- Kartenraster */

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.karten.eng { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px 15px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.karte:hover { border-color: var(--rand-stark); box-shadow: 0 4px 14px rgba(var(--wurf), 0.28); }

.karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.karte-name { font-size: 15px; font-weight: 650; line-height: 1.25; }
.karte-unter { font-size: 11.5px; color: var(--text-schwach); margin-top: 1px; }
.kuerzel { font-family: var(--mono); font-size: 11.5px; color: var(--akzent); }

.urteilsmarke {
  flex-shrink: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 4px; white-space: nowrap;
  background: var(--flaeche-leise); color: var(--text-leise); border: 1px solid var(--rand);
}
.urteilsmarke[data-a="kaufen"], .urteilsmarke[data-a="nachkaufen"] {
  background: var(--gut-bg); color: var(--gut); border-color: var(--gut-rand);
}
.urteilsmarke[data-a="beobachten"] { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent-rand); }
.urteilsmarke[data-a="warten"], .urteilsmarke[data-a="reduzieren"] {
  background: var(--warn-bg); color: var(--warn); border-color: var(--warn-rand);
}
.urteilsmarke[data-a="meiden"], .urteilsmarke[data-a="verkaufen"] {
  background: var(--schlecht-bg); color: var(--schlecht); border-color: var(--schlecht-rand);
}

.karte-zahlen {
  display: flex; flex-wrap: wrap; gap: 3px 16px;
  margin: 10px 0 0;
  font-size: 12.6px; color: var(--text-schwach);
  font-variant-numeric: tabular-nums;
}
.karte-zahlen b { color: var(--text); font-weight: 600; }

.karte-spark { margin: 9px 0 2px; height: 32px; }
.karte-spark svg { display: block; width: 100%; height: 32px; }

.gruende { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.gruende li { font-size: 12.7px; color: var(--text-leise); padding-left: 14px; position: relative; }
.gruende li::before { content: "•"; position: absolute; left: 2px; color: var(--gut); }
.gruende li.gegen::before { color: var(--schlecht); }

.karte-fuss {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--rand);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 11.8px; color: var(--text-schwach);
  font-variant-numeric: tabular-nums;
}
.karte-fuss b { color: var(--text-leise); }

/* --------------------------------------------------------------- Indizes */

.index-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }

/* Die Kachel ist ein Knopf, kein Kasten. Sie war ein <div> mit einem
   Klickhandler -- unerreichbar fuer Tastatur und Sprachausgabe, und das
   direkt unter der Zeile "Ein Klick auf eine Kachel öffnet den Kursverlauf".
   Als <button> braucht sie die Vorgaben des Browsers zurueckgesetzt: linke
   Ausrichtung, eigene Schrift, kein Systemrand. */
.index-kachel {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 11px 13px; cursor: pointer;
  transition: border-color 0.12s;
}
.index-kachel:hover { border-color: var(--akzent); }
.index-kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.index-kachel .n { display: block; font-size: 11.5px; color: var(--text-schwach); }
.index-kachel .w { display: block; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 1px; }
.index-kachel .z { display: flex; gap: 9px; font-size: 11.5px; margin-top: 1px; }
.index-kachel .z .leise { color: var(--text-schwach); }
/* VIX und Zehnjahreszins tragen keine Ampel -- steigend heisst dort nicht
   besser. Die Zahl steht in der normalen Textfarbe. */
.index-kachel .z .neutral { color: var(--text-leise); }
.index-kachel svg { display: block; margin-top: 6px; width: 100%; height: 26px; }

/* ---------------------------------------------------------- Kennzahlreihe */

.kennzahlreihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px; margin-top: 12px;
}
.kachel {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 12px 14px;
}
.kachel .k-label { font-size: 11.5px; color: var(--text-schwach); }
.kachel .k-wert { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 1px; }
.kachel .k-neben { font-size: 11.5px; color: var(--text-schwach); margin-top: 1px; }
.kachel p { margin: 7px 0 0; font-size: 12.6px; color: var(--text-leise); }

.balkenspur { height: 7px; border-radius: 4px; background: var(--schlecht-bg); overflow: hidden; margin-top: 8px; }
.balkenspur i { display: block; height: 100%; background: var(--gut); }

.merksaetze { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.merksaetze li {
  position: relative; padding: 10px 14px 10px 31px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); font-size: 13.4px; color: var(--text-leise);
}
.merksaetze li::before { content: "→"; position: absolute; left: 13px; color: var(--akzent); }

/* -------------------------------------------------------------- Branchen */

.branchen { display: grid; gap: 4px; }
.branche {
  display: grid; grid-template-columns: 148px 1fr 68px 96px;
  align-items: center; gap: 12px;
  padding: 7px 13px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px;
  font-size: 13px;
}
.branche .spur { position: relative; height: 7px; background: var(--flaeche-leise); border-radius: 4px; }
.branche .spur i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.branche .b-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.branche .b-neben { text-align: right; font-size: 11.5px; color: var(--text-schwach); font-variant-numeric: tabular-nums; }

.kgv-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.kgv-zelle {
  padding: 9px 12px; background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-radius: 6px; font-size: 12.5px;
}
.kgv-zelle b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); }

/* ------------------------------------------------------------ Filterchips */

.filterchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  padding: 5px 12px; font: inherit; font-size: 12.5px;
  color: var(--text-leise); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: var(--rand-stark); }
.chip[aria-pressed="true"] { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent); }

.ereigniskarte { border-left: 3px solid var(--text-schwach); }
.ereigniskarte[data-r="positiv"] { border-left-color: var(--gut); }
.ereigniskarte[data-r="negativ"] { border-left-color: var(--schlecht); }
.ereigniskarte .e-titel { margin-top: 7px; font-weight: 600; font-size: 14px; }
.ereigniskarte .e-text { margin-top: 4px; font-size: 12.8px; color: var(--text-leise); }

/* --------------------------------------------------------------- Tabelle */

.filterleiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filterleiste input[type="search"], .filterleiste select {
  padding: 8px 11px; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 6px;
}
.filterleiste input[type="search"] { min-width: 210px; }
.filterleiste select { cursor: pointer; }
.filterleiste input:focus, .filterleiste select:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell);
}
.haken {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-leise);
  padding: 8px 11px; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 6px; cursor: pointer;
}
.haken input { accent-color: var(--akzent); cursor: pointer; }

/* Die Zeile zwischen Filterleiste und Tabelle: wie viele Titel gerade zu
   sehen sind, wie viele ein Filter verbirgt, und ein Weg zurueck. */
.listen-zahl {
  margin: 10px 0 12px; font-size: 12.5px; color: var(--text-leise);
}
.listen-zahl b { color: var(--text); font-weight: 600; }
.listen-zahl .lz-weg { color: var(--warn); }
.listen-zahl .lz-reset {
  font: inherit; font-size: 12.5px; padding: 0;
  color: var(--akzent); background: none; border: none;
  border-bottom: 1px solid currentColor; cursor: pointer;
}
.listen-zahl .lz-reset:hover { color: var(--akzent-hover); }
.listen-zahl .lz-reset:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* clip statt hidden: Beides schneidet die Ecken sauber ab, aber hidden macht
   den Kasten zum Scrollbehaelter -- und darin kann der Tabellenkopf nicht mehr
   am Fenster kleben, weil er dann an einem Behaelter klebt, der nie scrollt. */
.tabelle {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: clip; box-shadow: var(--schatten);
}
.tabellenkopf, .zeile {
  display: grid;
  grid-template-columns: 38px minmax(180px, 2.2fr) 100px 78px 84px 68px 82px 110px;
  gap: 10px; align-items: center;
}
.tabellenkopf {
  position: sticky; top: var(--leiste-h); z-index: 12;
  padding: 9px 15px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-schwach); background: var(--flaeche-leise);
  border-bottom: 1px solid var(--rand);
  box-shadow: 0 4px 10px -8px rgba(var(--wurf), 0.7);
}
.tabellenkopf > * { text-align: left; }
.tabellenkopf > *:nth-child(n+3) { text-align: right; }

/* Sortieren per Klick auf die Spalte. Der Pfeil steht nur an der Spalte, nach
   der gerade sortiert wird -- ein Pfeil an jeder Spalte waere Rauschen. */
.tabellenkopf button {
  font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: inherit; background: none; border: none; padding: 0;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.12s;
}
.tabellenkopf > *:nth-child(n+3) button { justify-content: flex-end; }
.tabellenkopf button:hover { color: var(--text-leise); }
.tabellenkopf button.aktiv { color: var(--akzent); }
.tabellenkopf button::after {
  content: ""; width: 0; height: 0; opacity: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
}
.tabellenkopf button.aktiv::after { opacity: 1; }
.tabellenkopf button.aktiv[data-richtung="ab"]::after { border-top: 4.5px solid currentColor; }
.tabellenkopf button.aktiv[data-richtung="auf"]::after { border-bottom: 4.5px solid currentColor; }
.tabellenkopf button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 2px; }
/* Die Zeile ist ein <button>. Das kostet ein paar Zeilen Zuruecksetzen --
   Browser geben Knoepfen eine eigene Schrift, eine Mitte-Ausrichtung, einen
   Systemrand und eine Hintergrundfarbe -- und bringt dafuer alles mit, was
   ein <div> mit Klickhandler nicht hat: Tabulator, Eingabetaste, Leertaste,
   eine Rolle fuer die Sprachausgabe und einen Fokusring. */
.zeile {
  width: 100%; text-align: left;
  font: inherit; color: inherit;
  background: none; border: none;
  padding: 10px 15px;
  border-bottom: 1px solid var(--flaeche-leise);
  cursor: pointer;
}
.zeile:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: -2px;
  background: var(--flaeche-leise);
}
.zeile:last-child { border-bottom: none; }
.zeile:hover { background: var(--flaeche-leise); }
.zeile.eigen { background: var(--eigen); }
.zeile .rang { font-size: 12.5px; color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.zeile .z-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .z-unter { font-size: 11.5px; color: var(--text-schwach); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.zahl.leise { color: var(--text-schwach); font-size: 12.5px; }
.gut { color: var(--gut); }
.schlecht { color: var(--schlecht); }

.depotmarke {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--akzent-hell); color: var(--akzent);
  padding: 1px 5px; border-radius: 3px; margin-left: 5px;
}

/* Bewertungsbalken statt nackter Zahl: Man sieht sofort, wo eine Zeile im
   Feld steht, ohne die Zahlen der Nachbarzeilen zu vergleichen. */
.bewertung { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bewertung .b-zahl { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.bewertung .b-spur { width: 52px; height: 6px; border-radius: 3px; background: var(--flaeche-leise); overflow: hidden; }
.bewertung .b-spur i { display: block; height: 100%; }

.leer-hinweis {
  padding: 30px 20px; text-align: center;
  color: var(--text-schwach); font-size: 13.5px;
}

/* --------------------------------------------------- Vergleichsmaßstab */

.bilanz { margin: 26px 0 4px; }
.bilanz-leer {
  padding: 16px 18px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius); box-shadow: var(--schatten);
  font-size: 13.6px; color: var(--text-leise);
}
.bilanz-leer p { margin: 0 0 9px; max-width: 74ch; }
.bilanz-leer p:last-child { margin-bottom: 0; }
.bilanz-leer b { color: var(--text); }
.bilanz-gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.bilanz-feld {
  padding: 13px 15px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.bz-name {
  font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-schwach); margin-bottom: 8px;
}
.bz-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13.4px; color: var(--text-leise);
}
.bz-zeile b { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.bz-abstand {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--rand);
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bilanz-fuss { margin: 10px 0 0; max-width: 80ch; }

/* --------------------------------------------------------- Kursherkunft */

/* Woher der Kurs stammt und wie alt er ist. Steht klein unter der Zahl --
   wer eine Zahl zur Grundlage macht, muss beides sehen koennen. */
.kursherkunft {
  margin: 3px 0 0;
  font-size: 11.5px; color: var(--text-schwach);
  letter-spacing: 0.01em;
}

.detail-kopf-knoepfe { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ------------------------------------------------------------- Merkliste */

/* Der Stern ist bewusst kein Blickfang: Er faerbt sich erst, wenn er gesetzt
   ist. Sechs Dutzend leuchtende Sterne in einer Rangliste wuerden gegen die
   Bewertungsbalken antreten, und die sind die Aussage. */
.merken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text-schwach);
  transition: color 0.12s;
}
.merken svg { width: 16px; height: 16px; }
.merken:hover { color: var(--warn); }
.merken[aria-pressed="true"] { color: var(--warn); }
.merken[aria-pressed="true"] svg { fill: currentColor; }
.merken:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; border-radius: 4px; }

.merk { margin-bottom: 26px; }
.merk .abschnittkopf { margin-top: 0; }
.merk-leer {
  padding: 16px; font-size: 13.4px; color: var(--text-schwach);
  background: var(--flaeche); border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
}
.zaehler {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-schwach);
}

/* ----------------------------------------------------------------- Depot */

.depot-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 15px 16px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.depot-form .feld { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 0 1 130px; }
.depot-form .feld.gross { flex: 1 1 250px; }
.depot-form .feld > span { font-size: 11.8px; color: var(--text-schwach); }
.depot-form .feld em { font-style: normal; opacity: 0.75; }
.depot-form input {
  padding: 9px 11px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 6px;
}
.depot-form input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }

.hinweis-fehler {
  margin: 10px 0 0; padding: 10px 14px;
  background: var(--schlecht-bg); border: 1px solid var(--schlecht-rand);
  border-radius: 6px; font-size: 13px; color: var(--schlecht);
}

.warnkasten {
  margin-top: 10px; padding: 10px 14px 10px 32px; position: relative;
  background: var(--warn-bg); border: 1px solid var(--warn-rand);
  border-radius: 6px; font-size: 13px; color: var(--warn);
}
.warnkasten::before { content: "!"; position: absolute; left: 14px; font-weight: 700; color: var(--warn); }

.positionen { display: grid; gap: 10px; margin-top: 14px; }
.position {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 3px solid var(--text-schwach);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 13px 15px;
}
.position[data-a="nachkaufen"] { border-left-color: var(--gut); }
.position[data-a="halten"] { border-left-color: var(--akzent); }
.position[data-a="reduzieren"] { border-left-color: var(--warn); }
.position[data-a="verkaufen"] { border-left-color: var(--schlecht); }
.position-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.position-kopf .p-name { font-size: 15px; font-weight: 650; cursor: pointer; }
.position-kopf .p-name:hover { color: var(--akzent); }

.zahlenband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 7px; margin-top: 11px; font-variant-numeric: tabular-nums;
}
.zahlenband div { background: var(--flaeche-leise); border-radius: 6px; padding: 6px 9px; }
.zahlenband .zb-label { font-size: 10.5px; color: var(--text-schwach); text-transform: uppercase; letter-spacing: 0.03em; }
.zahlenband .zb-wert { font-size: 14px; font-weight: 600; margin-top: 1px; }

.begruendung { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.begruendung li { font-size: 12.9px; color: var(--text-leise); padding-left: 14px; position: relative; }
.begruendung li::before { content: "•"; position: absolute; left: 2px; color: var(--text-schwach); }

.entfernen {
  margin-top: 10px;
  font: inherit; font-size: 12px; color: var(--text-schwach);
  background: none; border: 1px solid var(--rand); border-radius: 5px;
  padding: 4px 10px; cursor: pointer;
}
.entfernen:hover { color: var(--schlecht); border-color: var(--schlecht); }

.depot-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* ----------------------------------------------------------- Kursverlauf */

.chart {
  margin-top: 14px; padding: 12px 13px 10px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
}
.chart-leiste { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.chart-spannen { display: flex; gap: 3px; flex-wrap: wrap; }
.chart-spannen button {
  font: inherit; font-size: 12px; font-weight: 550; padding: 4px 10px;
  color: var(--text-leise); background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-radius: 5px; cursor: pointer;
}
.chart-spannen button:hover { border-color: var(--rand-stark); }
.chart-spannen button[aria-pressed="true"] { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); }
.chart-bilanz { font-size: 12.5px; color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.chart-bilanz b { font-size: 13.5px; }
.chart-flaeche { position: relative; }
.chart-flaeche svg { display: block; width: 100%; height: 210px; touch-action: pan-y; }
.chart-flaeche.laedt { opacity: 0.45; }
.chart-fuss { font-size: 11.6px; color: var(--text-schwach); margin-top: 5px; }

.charttip {
  position: absolute; z-index: 90; pointer-events: none;
  padding: 6px 10px;
  background: var(--flaeche-hoch); color: var(--text); border: 1px solid var(--rand-stark);
  border-radius: 6px; box-shadow: 0 8px 22px rgba(var(--wurf), 0.38);
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.charttip .t-datum { opacity: 0.7; font-size: 11px; }
.charttip .t-kurs { font-size: 14px; font-weight: 650; }

/* ---------------------------------------------------------------- Detail */

.schleier { position: fixed; inset: 0; z-index: 50; background: var(--schleier); }
.detail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(660px, 100vw); overflow-y: auto;
  padding: 22px 24px 60px;
  background: var(--bg);
  border-left: 1px solid var(--rand);
  box-shadow: -18px 0 48px rgba(var(--wurf), 0.40);
}
.detail-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.detail-kopf h2 { font-size: 21px; }

/* --- Woran das Depot hängt: Branchen, Regionen, Währungen --- */

.roentgen { margin-top: 22px; }
.abschnittkopf.klein { margin-bottom: 0; }
.abschnittkopf.klein h2 { font-size: 17px; }
.rg-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  border-top: 1px solid var(--rand);
}
.rg-block { padding: 14px 20px 16px; border-left: 1px solid var(--rand); min-width: 0; }
.rg-block:first-child { border-left: none; padding-left: 0; }
.rg-block h3 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-schwach); margin-bottom: 10px;
}
.rg-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px 38px;
  align-items: center; gap: 9px; padding: 3px 0;
}
.rg-name {
  font-size: 13.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-spur { height: 7px; background: var(--flaeche-hoch); border-radius: 2px; }
.rg-spur i { display: block; height: 100%; background: var(--akzent); opacity: 0.8; border-radius: 2px; }
.rg-wert {
  font-family: var(--mono); font-size: 12px; text-align: right;
  color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.rg-hinweis { margin: 10px 0 0; font-size: 12.4px; color: var(--text-schwach); }
@media (max-width: 760px) {
  .rg-block { border-left: none; padding-left: 0; border-top: 1px solid var(--rand); }
  .rg-block:first-child { border-top: none; }
}

/* Sortierung ueber der Positionsliste. Rechtsbuendig, damit sie die
   Warnungen darueber nicht vom Rand wegdraengt. */
.depot-sortierung {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; margin: 14px 0 8px;
}
.depot-sortierung label {
  font-size: 12px; color: var(--text-schwach);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650;
}
@media (max-width: 560px) {
  .depot-sortierung { justify-content: space-between; }
  .depot-sortierung select { flex: 0 1 auto; min-width: 0; }
}

/* --- Schlagzeilen zu einem auffälligen Titel --- */

.e-warum {
  margin-top: 10px; padding: 4px 9px; font-size: 12.4px;
  color: var(--akzent); background: none;
  border: 1px solid var(--rand-stark); border-radius: 5px; cursor: pointer;
}
.e-warum:hover:not(:disabled) { border-color: var(--akzent); background: var(--akzent-hell); }
.e-warum:disabled { opacity: 0.6; cursor: default; }
.e-news { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.e-news a {
  display: block; text-decoration: none;
  padding-left: 10px; border-left: 2px solid var(--rand-stark);
}
.e-news a:hover { border-left-color: var(--akzent); }
.en-titel { display: block; font-size: 13px; color: var(--text); line-height: 1.35; }
.e-news a:hover .en-titel { color: var(--akzent); }
.en-quelle { display: block; margin-top: 2px; font-size: 11.6px; color: var(--text-schwach); }
.en-leer { margin: 0; font-size: 12.6px; color: var(--text-schwach); }

/* --- Was in Euro davon übrig bleibt --- */

.d-euro {
  margin-top: 10px; padding: 10px 12px;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: var(--radius);
}
.de-kurs { font-size: 13.5px; color: var(--text-leise); }
.de-kurs b { font-family: var(--mono); color: var(--text); margin-left: 4px; }
.de-renditen { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.de-zeile {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.2px;
}
.de-name { color: var(--text-schwach); min-width: 62px; }
.de-zeile b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.de-statt { color: var(--text-schwach); font-size: 12.4px; }
.de-fuss { margin: 8px 0 0; font-size: 12.2px; color: var(--text-schwach); }

/* WKN und ISIN. Sie stehen hier, um abgetippt oder kopiert zu werden --
   deshalb Festbreitenschrift und ein Klickziel, das gross genug fuer einen
   Daumen ist. */
.kennung { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; }
.kennung-paar { display: inline-flex; align-items: center; gap: 6px; }
.kennung-name {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-schwach);
}
.kennung-wert {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--flaeche-hoch); border: 1px solid var(--rand);
  border-radius: 5px; padding: 3px 8px; min-height: 26px;
  cursor: pointer; letter-spacing: 0.02em;
}
.kennung-wert:hover { border-color: var(--akzent); color: var(--akzent); }
.kennung-wert.kopiert { color: var(--gut); border-color: var(--gut-rand); background: var(--gut-bg); }
.schliessen {
  font: inherit; font-size: 24px; line-height: 1;
  color: var(--text-schwach); background: none; border: none; cursor: pointer; padding: 2px 6px;
}
.schliessen:hover { color: var(--text); }

.detail-preis { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.detail-preis .d-kurs { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }

.urteilblock {
  display: flex; align-items: center; gap: 15px;
  margin: 16px 0;
  padding: 15px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.ring { flex-shrink: 0; }
.urteilblock .u-stufe { font-size: 16px; font-weight: 650; }
.urteilblock .u-fazit { font-size: 13.3px; color: var(--text-leise); margin-top: 3px; }
.urteilblock .urteilsmarke { margin-top: 7px; display: inline-block; }

.detail h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-schwach); margin: 24px 0 10px; font-weight: 600;
}

.gruendeliste { display: grid; gap: 8px; }
.grund {
  padding: 11px 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--gut);
  border-radius: 6px;
}
.grund.gegen { border-left-color: var(--schlecht); }
.grund-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.grund-kopf b { font-size: 13.5px; }
.grund-kopf span { font-family: var(--mono); font-size: 12.5px; }
.grund p { margin: 4px 0 0; font-size: 13px; color: var(--text-leise); }

.gruppenliste { display: grid; gap: 7px; }
.gruppe { display: grid; grid-template-columns: 160px 1fr 40px; gap: 12px; align-items: center; font-size: 13px; }
.gruppe .g-name { color: var(--text-leise); }
.gruppe .g-spur { height: 7px; border-radius: 4px; background: var(--rand); overflow: hidden; }
.gruppe .g-spur i { display: block; height: 100%; border-radius: 4px; }
.gruppe .g-wert { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }

.kennzahlgitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kennzahl {
  padding: 10px 12px; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 6px;
}
.kennzahl .kz-label { font-size: 11.5px; color: var(--text-schwach); }
.kennzahl .kz-wert { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }
.kennzahl .kz-vergleich { font-size: 11.5px; margin-top: 2px; }

.nachrichten { display: grid; gap: 7px; }
.nachrichten a {
  display: block; padding: 10px 13px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 6px; color: var(--text); text-decoration: none;
}
.nachrichten a:hover { border-color: var(--akzent); }
.nachrichten .n-titel { font-size: 13.5px; font-weight: 550; }
.nachrichten .n-quelle { font-size: 11.5px; color: var(--text-schwach); margin-top: 2px; }

.detail-text { font-size: 13px; color: var(--text-leise); }
.detail-lade { padding: 40px 0; text-align: center; color: var(--text-schwach); }

footer {
  max-width: 1240px; margin: 0 auto;
  padding: 24px 20px 44px;
  border-top: 1px solid var(--rand);
  font-size: 12.5px; color: var(--text-schwach);
}
footer p { margin: 0 0 8px; max-width: 880px; }
footer strong { color: var(--text-leise); }

/* Wer dahintersteckt -- auf der Startseite, abgesetzt vom Pflichttext. */
.ueber-mich {
  margin-bottom: 20px; padding: 16px 18px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
}
.ueber-mich h2 {
  margin: 0 0 8px; font-size: 14px; font-weight: 650; color: var(--text);
  letter-spacing: 0.01em;
}
.ueber-mich p { margin: 0 0 8px; max-width: 78ch; }
.ueber-mich p:last-child { margin-bottom: 0; }
.ueber-mich a { color: var(--akzent); }

/* -------------------------------------------------------- Schmale Geräte */

@media (max-width: 1000px) {
  /* Der Kopf bricht hier auf zwei Zeilen um. Damit die stehende Leiste nicht
     ein Viertel des Bildschirms frisst, wird sie enger gesetzt. */
  .kopf { flex-wrap: wrap; gap: 12px; padding: 9px 14px; }
  .suchfeld { order: 3; flex-basis: 100%; max-width: none; }
  .suchfeld input { padding: 7px 32px 7px 33px; }
  .kopf-rechts { margin-left: auto; }
  .reiter button { padding: 8px 12px; font-size: 13.5px; }
  .tabellenkopf, .zeile { grid-template-columns: 30px minmax(120px, 2fr) 88px 70px 96px; }
  .tabellenkopf .sp-3m, .tabellenkopf .sp-kgv, .tabellenkopf .sp-div,
  .zeile .sp-3m, .zeile .sp-kgv, .zeile .sp-div { display: none; }
  .branche { grid-template-columns: 110px 1fr 60px; }
  .branche .b-neben { display: none; }
  .gruppe { grid-template-columns: 120px 1fr 36px; }
  main { padding: 18px 14px 50px; }
  .lage { padding: 0 14px; }
  .reiter { padding: 0 14px; }
}

/* ============================================================== Startseite

   Die Startseite ist kein Dashboard, sondern ein Aufschlag: Wie steht der
   Markt, was folgt daraus, und wo geht es weiter. Alles Weitere haengt an
   den Bereichskarten -- von hier kommt man ueberall hin. */

.start-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--rand);
}
.start-marke {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-schwach);
}
.start-marke .punkt { color: var(--rand-stark); }
.start-these {
  margin: 18px 0 0;
  font-family: var(--schrift-eng);
  font-size: clamp(30px, 4.6vw, 50px); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.005em; text-wrap: balance; max-width: 17ch;
}
.start-these em { font-style: normal; color: var(--akzent); }
.start-lede {
  margin: 16px 0 0; max-width: 58ch;
  font-size: 16.5px; color: var(--text-leise);
}
/* Auf der Startseite steht der Marktkontext in voller Laenge: Marke, Zahlen
   und der ausgeschriebene Satz, was daraus folgt. */
.start-lage { margin-top: 20px; }
.start-lage-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.start-lage-text {
  margin: 10px 0 0; max-width: 62ch;
  font-size: 14px; line-height: 1.55; color: var(--text-leise);
}
.regime-marke {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 11px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--rand-stark); border-radius: 999px;
  background: var(--flaeche);
}
.regime-marke .led { width: 8px; height: 8px; border-radius: 50%; background: var(--text-schwach); }
.regime-marke[data-lage="Rückenwind"] { border-color: var(--gut-rand); background: var(--gut-bg); color: var(--gut); }
.regime-marke[data-lage="Rückenwind"] .led { background: var(--gut); }
.regime-marke[data-lage="Gemischt"] { border-color: var(--warn-rand); background: var(--warn-bg); color: var(--warn); }
.regime-marke[data-lage="Gemischt"] .led { background: var(--warn); }
.regime-marke[data-lage="Gegenwind"] { border-color: var(--schlecht-rand); background: var(--schlecht-bg); color: var(--schlecht); }
.regime-marke[data-lage="Gegenwind"] .led { background: var(--schlecht); }
.start-lage-kopf .lage-neben { font-size: 13.5px; color: var(--text-schwach); }

/* --- Boersenuhr: welche Handelsplaetze gerade geoeffnet sind --- */

.uhr {
  align-self: start;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); overflow: hidden;
}
.uhr-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-bottom: 1px solid var(--rand);
  background: var(--flaeche-leise);
}
.uhr-kopf h2 { font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-leise); }
.uhr-kopf .jetzt { font-family: var(--mono); font-size: 12px; color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.platz {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: 11px 13px; border-bottom: 1px solid var(--rand);
}
.platz:last-child { border-bottom: none; }
.platz .p-ort { font-size: 14px; font-weight: 550; }
.platz .p-zeit { font-family: var(--mono); font-size: 12.5px; color: var(--text-leise); text-align: right; font-variant-numeric: tabular-nums; }
.platz .p-spur { grid-column: 1 / -1; height: 3px; background: var(--flaeche-hoch); margin-top: 3px; }
.platz .p-spur i { display: block; height: 100%; background: var(--rand-stark); }
.platz .p-status { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-schwach); }
.platz .p-ort::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rand-stark); margin-right: 7px; vertical-align: 1px;
}
.platz[data-offen="ja"] .p-ort::before { background: var(--gut); }
.platz[data-offen="ja"] .p-spur i { background: var(--gut); }
.platz[data-offen="ja"] .p-status { color: var(--gut); }

/* --- Bereiche: von hier geht es ueberall hin --- */

.abschnittkopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 20px; margin: 38px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rand);
}
.abschnittkopf h2 { font-size: 19px; }
.abschnittkopf p { margin: 0; font-size: 12.5px; color: var(--text-schwach); }

.bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bereich {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px 17px 17px; text-align: left;
  font: inherit; color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.bereich:hover { border-color: var(--akzent); background: var(--flaeche-hoch); }
.bereich:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bereich .b-zahl {
  font-family: var(--mono); font-size: 25px; font-weight: 500; line-height: 1;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}
.bereich .b-zahl.leise { color: var(--text-schwach); font-size: 19px; }
.bereich .b-name { font-family: var(--schrift-eng); font-size: 17.5px; font-weight: 600; }
.bereich .b-text { font-size: 13.2px; color: var(--text-leise); }
.bereich .b-pfeil { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--akzent); }

/* --- Heute im Blick --- */

.blick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rand); }
.blick-teil { padding: 16px 20px 18px; border-left: 1px solid var(--rand); }
.blick-teil:first-child { border-left: none; padding-left: 0; }
.blick-teil .bl-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-schwach);
}
.blick-teil .bl-name {
  margin-top: 8px; font-family: var(--schrift-eng); font-size: 20px; font-weight: 600;
  cursor: pointer;
}
.blick-teil .bl-name:hover { color: var(--akzent); }
.blick-teil .bl-wert { margin-top: 3px; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.blick-teil .bl-text { margin-top: 8px; font-size: 13.2px; color: var(--text-leise); }

/* --- Seit dem letzten Lauf: Zu- und Abgänge mit ihrem Grund --- */

.wandel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  border-top: 1px solid var(--rand);
}
.wandel-block { padding: 16px 20px 18px; border-left: 1px solid var(--rand); min-width: 0; }
.wandel-block:first-child { border-left: none; padding-left: 0; }
.wandel-block h3 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-schwach); display: flex; align-items: center; gap: 7px;
}
.wandel-zahl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0;
  background: var(--flaeche-hoch); border-radius: 4px; padding: 1px 5px; color: var(--text-leise);
}
.wandel-block ul { list-style: none; margin: 11px 0 0; padding: 0; }
.wandel-block li { margin-bottom: 13px; min-width: 0; }
.wandel-block li:last-child { margin-bottom: 0; }
.wandel-name {
  font-weight: 600; font-size: 14.5px; text-align: left; line-height: 1.25;
  display: block; max-width: 100%; overflow-wrap: anywhere;
}
.wandel-name:hover { color: var(--akzent); }
.wandel-zahlen {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 3px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
.wandel-delta { font-weight: 650; }
.wandel-delta.gut { color: var(--gut); }
.wandel-delta.schlecht { color: var(--schlecht); }
/* Der Grund ist die eigentliche Aussage -- er steht als ganzer Satz da und
   nicht als Kürzel, auch wenn das eine Zeile mehr kostet. */
.wandel-grund { display: block; margin-top: 4px; font-size: 12.8px; color: var(--text-schwach); }
.wandel-leer { margin: 11px 0 0; font-size: 13.2px; color: var(--text-schwach); max-width: 52ch; }
@media (max-width: 820px) {
  .wandel-block { border-left: none; padding-left: 0; border-top: 1px solid var(--rand); }
  .wandel-block:first-child { border-top: none; }
}

/* --- Methode: die Gewichte, nach denen gerechnet wird --- */

.methode { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; }
.methode-text p { margin: 0 0 11px; font-size: 14.5px; color: var(--text-leise); max-width: 46ch; }
.methode-text p:last-child { margin-bottom: 0; }
.gewichte { display: flex; flex-direction: column; }
.gewicht {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) 52px;
  align-items: center; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--rand);
}
.gewicht:last-child { border-bottom: none; }
.gewicht .g-name { font-size: 14px; }
.gewicht .g-spur { height: 8px; background: var(--flaeche-hoch); }
.gewicht .g-spur i { display: block; height: 100%; background: var(--akzent); opacity: 0.85; }
.gewicht .g-wert { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--text-leise); font-variant-numeric: tabular-nums; }

/* --- Selbst gewichten: was die Gewichte mit der Rangliste machen --- */

.eigengewicht { margin-top: 20px; border-top: 1px solid var(--rand); padding-top: 14px; }
.eigengewicht > summary {
  cursor: pointer; font-size: 13.5px; color: var(--akzent);
  list-style-position: outside; padding: 2px 0;
}
.eigengewicht > summary:hover { color: var(--akzent-hover); }
.eg-inhalt { padding-top: 14px; }
.eg-vorwort { font-size: 13.4px; color: var(--text-leise); max-width: 62ch; margin: 0 0 16px; }
.eg-regler { display: flex; flex-direction: column; gap: 2px; }
.eg-zeile {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) 52px;
  align-items: center; gap: 14px; padding: 5px 0;
}
.eg-zeile label { font-size: 14px; }
.eg-zeile input[type="range"] { width: 100%; accent-color: var(--akzent); cursor: pointer; }
.eg-wert {
  font-family: var(--mono); font-size: 13px; text-align: right;
  color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.eg-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 14px;
}
.eg-summe { font-size: 12.6px; color: var(--text-schwach); }
.eg-bilanz { font-size: 13.8px; color: var(--text-leise); margin: 20px 0 10px; max-width: 62ch; }
.eg-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rand); }
.eg-liste li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px minmax(0, 210px);
  align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--rand); font-size: 14px;
}
.eg-rang { font-family: var(--mono); font-size: 12px; color: var(--text-schwach); text-align: right; }
.eg-name { text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.eg-name:hover { color: var(--akzent); }
.eg-note { font-family: var(--mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.eg-sprung { font-size: 12.4px; color: var(--text-schwach); text-align: right; }
.eg-sprung.gut { color: var(--gut); }
.eg-sprung.schlecht { color: var(--schlecht); }
@media (max-width: 700px) {
  .eg-zeile { grid-template-columns: 96px minmax(0, 1fr) 46px; gap: 10px; }
  .eg-liste li { grid-template-columns: 24px minmax(0, 1fr) 40px; row-gap: 2px; }
  .eg-sprung { grid-column: 2 / -1; text-align: left; }
}

/* --- Zahlen zum Haus --- */

.haus {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}
.haus div { padding: 17px 18px 18px; border-left: 1px solid var(--rand); }
.haus div:first-child { border-left: none; padding-left: 0; }
.haus b {
  display: block; font-family: var(--mono); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.haus span {
  display: block; margin-top: 5px;
  font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-schwach);
}

@media (max-width: 900px) {
  .start-kopf { grid-template-columns: 1fr; gap: 24px; }
  .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blick { grid-template-columns: 1fr; }
  .blick-teil { border-left: none; border-top: 1px solid var(--rand); padding-left: 0; padding-right: 0; }
  .blick-teil:first-child { border-top: none; }
  .methode { grid-template-columns: 1fr; gap: 20px; }
  .haus { grid-template-columns: 1fr 1fr; }
  .haus div:nth-child(odd) { border-left: none; padding-left: 0; }
  .haus div:nth-child(n + 3) { border-top: 1px solid var(--rand); }
}
/* --------------------------------------------------- Rangliste als Karten

   Unter 640px reicht die Breite fuer keine Tabelle mehr. Fuenf Spalten
   brauchen mindestens 404px; auf einem 375px-Geraet schob das ausgerechnet
   die Bewertung -- die wichtigste Spalte -- aus dem Bild. Jede Zeile wird
   deshalb zur Karte, und die Note steht gross rechts, wo sie zuerst
   auffaellt. */
@media (max-width: 640px) {
  .tabellenkopf { display: none; }
  .zeile {
    grid-template-columns: 26px minmax(0, auto) 1fr auto;
    grid-template-areas:
      "rang name  name note"
      "rang kurs  tag  note";
    gap: 2px 10px;
    padding: 11px 13px;
  }
  .zeile .rang { grid-area: rang; align-self: center; }
  .zeile > div:nth-child(2) { grid-area: name; min-width: 0; }
  .zeile > .zahl:nth-child(3) { grid-area: kurs; text-align: left; }
  .zeile > .zahl:nth-child(4) { grid-area: tag; text-align: left; }
  .zeile .bewertung {
    grid-area: note; align-self: center;
    flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .zeile .bewertung .b-zahl { font-size: 21px; min-width: 0; }
  .zeile .bewertung .b-spur { width: 44px; }
  .zeile .z-name { white-space: normal; }

  /* Die Filterleiste stapelt sich, sonst quetschen sich vier Kaesten in
     eine Zeile, die keiner mehr treffen kann. */
  .filterleiste { flex-direction: column; align-items: stretch; }
  .filterleiste > * { width: 100%; }
}

/* -------------------------------------------------- Der Kopf auf dem Handy

   Auf einem 375x812-Gerät belegte die stehende Leiste 275 Pixel: Logo-Zeile,
   Knopfzeile, Suchfeld über die volle Breite und eine Reiternavigation, die
   in drei Zeilen umbrach. Ein Drittel des Bildschirms, bevor eine einzige
   Zahl zu sehen war -- auf einer Seite, die aus Zahlen besteht.

   Zwei Änderungen bringen sie unter 140 Pixel:

     Die Suche liegt hinter einer Lupe. Sie ist nicht weg, sie ist einen
     Fingertipp entfernt -- und wer auf dem Handy eine Aktie nachschlagen
     will, tippt ohnehin erst, wenn er das Feld gesehen hat.

     Die Reiter stehen wieder in einer Zeile und lassen sich wischen. Der
     Streifen franst an der Seite aus, an der noch etwas steht (siehe
     .reiter.mehr-rechts weiter oben) -- das liest sich als Aufforderung zu
     wischen, ohne dass ein Pfeil Platz wegnimmt. Sieben gestapelte Reiter
     kosteten drei Zeilen; eine gewischte Zeile kostet eine. */
@media (max-width: 768px) {
  .kopf { flex-wrap: nowrap; gap: 10px; }
  .knopf.nur-schmal { display: inline-flex; }

  /* Zu: Das Feld ist aus dem Fluss genommen, nicht entfernt -- so behält es
     seinen Platz im Tabulatorlauf, sobald es aufgeht. */
  .suchfeld { display: none; }
  .kopfleiste[data-suche="offen"] .suchfeld {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 35; padding: 9px 14px;
    background: var(--flaeche); border-bottom: 1px solid var(--rand);
    box-shadow: 0 8px 20px -12px rgba(var(--wurf), 0.6);
  }
  .kopfleiste[data-suche="offen"] .such-lupe { left: 25px; }
  .kopfleiste[data-suche="offen"] .such-leeren { right: 22px; }
  .kopfleiste[data-suche="offen"] .such-liste { left: 14px; right: 14px; }
  .kopf { position: relative; }
  #btn-suche[aria-expanded="true"] { border-color: var(--akzent); color: var(--akzent); }
  /* Die Reiter bleiben stehen, werden aber unsichtbar, solange das Feld
     darüberliegt: Sie behalten ihre Höhe, also springt nichts, und es lugt
     kein halber Reiterstreifen unter dem Kasten hervor. */
  .kopfleiste[data-suche="offen"] .reiter { visibility: hidden; }
}
@media (min-width: 769px) {
  /* Zwei Klassen, weil .knopf.nur-zeichen ebenfalls zwei hat -- mit einer
     einzigen Klasse verliert die Regel und die Lupe bliebe auf dem Desktop
     neben dem Suchfeld stehen. */
  .knopf.nur-schmal { display: none; }
}

@media (max-width: 560px) {
  /* Marke, Stand und Knopf passen zu dritt nicht in eine Zeile, also faellt
     der Stand hier weg -- er steht auf der Startseite ohnehin gross in der
     Kopfzeile, und dort ist auch Platz fuer die Uhrzeit. */
  .kopf { gap: 8px; padding: 8px 12px; }
  .marke { font-size: 18px; }
  .marke svg { width: 17px; height: 17px; }
  .stand { display: none; }
  .kopf-rechts { gap: 7px; }
  .knopf { padding: 7px 11px; font-size: 13px; }
  .knopf.nur-zeichen { width: 32px; height: 32px; }

  .reiter { padding: 0 12px; }
  .reiter button { padding: 8px 11px; font-size: 13.5px; }

  .bereiche { grid-template-columns: 1fr; }
  .haus { grid-template-columns: 1fr; }
  .haus div { border-left: none; padding-left: 0; border-top: 1px solid var(--rand); }
  .haus div:first-child { border-top: none; }
}

/* ==================================================== Rechtliches & Protokoll

   Zwei Tafeln ohne Reiter oben: Sie haengen im Fuss und an eigenen Adressen.
   Beide sind Lesetafeln -- schmalere Spalte, mehr Zeilenabstand, weniger
   Zahlen als der Rest der Seite. */

.recht { max-width: 760px; }
.recht h2 {
  font-size: 18px; margin: 34px 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--rand);
}
.recht h3 { font-size: 14.5px; margin: 20px 0 6px; color: var(--text); }
.recht p { margin: 0 0 11px; font-size: 14px; line-height: 1.62; color: var(--text-leise); }
.recht b, .recht strong { color: var(--text); font-weight: 600; }

.recht-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.recht-sprung a {
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  color: var(--text-leise); text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 999px;
}
.recht-sprung a:hover { color: var(--akzent); border-color: var(--akzent-rand); }

.rechtblock { scroll-margin-top: calc(var(--leiste-h) + 14px); }
.rechtvor {
  padding: 11px 14px; margin-bottom: 14px !important;
  background: var(--flaeche-leise); border-left: 2px solid var(--akzent-rand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.4px !important;
}
.rechtnote { font-size: 12.8px !important; color: var(--text-schwach) !important; }

.anschrift {
  font-style: normal; line-height: 1.72; font-size: 14px; color: var(--text);
  padding: 13px 15px; margin-bottom: 14px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
}

.rechtliste { margin: 0 0 14px; }
.rechtliste dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-schwach); font-weight: 600; margin-top: 12px;
}
.rechtliste dd {
  margin: 3px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-leise);
}
.rechtaufzaehlung { margin: 0 0 14px; padding-left: 19px; }
.rechtaufzaehlung li {
  font-size: 14px; line-height: 1.6; color: var(--text-leise); margin-bottom: 6px;
}
.tastcode {
  font-family: var(--mono); font-size: 0.88em;
  padding: 1px 5px; background: var(--flaeche-hoch); border-radius: 4px;
}
.binnenlink { color: var(--akzent); text-decoration: none; border-bottom: 1px solid var(--akzent-rand); }
.binnenlink:hover { color: var(--akzent-hover); }

/* --- Verteilung der Einstufungen */
.verteilung { margin: 12px 0 4px; }
.vert-zeile {
  display: grid; grid-template-columns: 148px 1fr 88px;
  align-items: center; gap: 12px; margin-bottom: 7px;
}
.vert-name { font-size: 13px; color: var(--text-leise); }
.vert-zeile .balkenspur {
  height: 8px; background: var(--flaeche-hoch); border-radius: 999px; overflow: hidden;
}
.vert-balken { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.vert-zahl { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--text); }
.vert-proz { color: var(--text-schwach); }
.vert-fuss { margin-top: 12px !important; font-size: 13px !important; }

/* --- Methodik-Logbuch */
.logbuch { list-style: none; margin: 14px 0 0; padding: 0; }
.log-eintrag {
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
}
.log-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.log-kopf time {
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
}
.log-art {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
}
.log-art-regel { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-rand); }
.log-art-seite { color: var(--text-schwach); background: var(--flaeche-hoch); border: 1px solid var(--rand); }
.log-was { margin: 0 0 6px !important; color: var(--text) !important; font-size: 13.4px !important; }
.log-warum { margin: 0 !important; font-size: 12.8px !important; color: var(--text-schwach) !important; }

/* --- Trefferprotokoll */
.prot-zahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px;
}
.prot-zahl {
  padding: 13px 15px; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.prot-zahl b { display: block; font-size: 23px; font-family: var(--schrift-eng); line-height: 1.1; }
.prot-zahl span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-schwach); }
.prot-seit-satz { font-size: 13px; color: var(--text-schwach); margin: 0 0 10px; }
.prot-warnung {
  padding: 12px 14px; font-size: 13.2px; line-height: 1.6; color: var(--text-leise);
  background: var(--warn-bg); border: 1px solid var(--warn-rand);
  border-radius: var(--radius); margin: 0;
}

.protokoll-liste { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.prot-zeile {
  display: grid; grid-template-columns: 1.7fr 1.1fr 1.2fr 0.8fr 0.9fr 0.9fr;
  align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--rand); font-size: 13px;
}
.prot-zeile:last-child { border-bottom: 0; }
.prot-zeile:not(.prot-titelzeile):hover { background: var(--flaeche-leise); }
.prot-titelzeile {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-schwach); font-weight: 600; background: var(--flaeche-leise);
}
.prot-zeile.beendet { opacity: 0.62; }
.prot-name a { color: var(--text); text-decoration: none; }
.prot-name a:hover { color: var(--akzent); }
.prot-kuerzel { margin-left: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--text-schwach); }
.prot-marke {
  margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 999px;
  color: var(--text-schwach); background: var(--flaeche-hoch); border: 1px solid var(--rand);
}
.prot-seit { font-size: 12.3px; color: var(--text-leise); }
.prot-tage { display: block; font-size: 11px; color: var(--text-schwach); }
.prot-kurse, .prot-wert, .prot-massstab, .prot-abstand {
  font-family: var(--mono); font-size: 12.4px; text-align: right;
}
.prot-kurse { color: var(--text-leise); }
.prot-massstab { color: var(--text-schwach); }

/* --- Testdepot
   Die Listen leihen sich das Raster des Trefferprotokolls; neu sind nur die
   Kurve, das Tagebuch und die Regeln. Gruen und Rot stehen im Tagebuch fuer
   Kauf und Verkauf -- das ist ein Urteil, keine Dekoration. */
.td-kurve { margin-bottom: 18px; }
.td-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-bottom: 6px; font-size: 12.5px; color: var(--text-leise);
}
.td-leg-depot::before, .td-leg-bm::before {
  content: ""; display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle;
  border-top: 2px solid var(--akzent);
}
.td-leg-bm::before { border-top: 2px dashed var(--text-schwach); }
.td-lesen { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text); }
.td-svg {
  display: block; width: 100%; height: auto; touch-action: pan-y;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
}
.td-gitter { stroke: var(--rand); stroke-width: 1; }
.td-null { stroke: var(--rand-stark); stroke-width: 1; }
.td-achse { fill: var(--text-schwach); font-size: 11px; font-family: var(--mono); }
.td-linie-depot { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.td-linie-bm { fill: none; stroke: var(--text-schwach); stroke-width: 1.6; stroke-dasharray: 5 4; }
.td-zeiger { stroke: var(--text-leise); stroke-width: 1; }
.td-buch {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
}
.td-eintrag { padding: 12px 14px; border-bottom: 1px solid var(--rand); }
.td-eintrag:last-child { border-bottom: 0; }
.td-eintrag-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-bottom: 6px; font-size: 13px;
}
.td-eintrag-kopf time { font-weight: 600; }
.td-art {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 7px; border-radius: 999px;
  color: var(--text-schwach); background: var(--flaeche-hoch); border: 1px solid var(--rand);
}
.td-art-ausfuehrung { color: var(--akzent); background: var(--akzent-hell); border-color: var(--akzent-rand); }
.td-schritte { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.55; }
.td-schritte li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.td-was { font-size: 11.5px; color: var(--text-schwach); padding-top: 1px; }
.td-was.kauf, .td-was.kauforder { color: var(--gut); }
.td-was.verkauf, .td-was.verkauforder { color: var(--schlecht); }
.td-was.wartet, .td-was.kein-kauf, .td-was.verfallen { color: var(--warn); }
.td-siegel { margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-schwach); overflow-wrap: anywhere; }
.td-pruefung { margin: 0 0 10px; font-size: 12.8px; color: var(--text-leise); }
.td-pruefung.schlecht { color: var(--schlecht); }
.td-monate { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.td-regeln { margin: 0; padding-left: 20px; max-width: 80ch; font-size: 13.4px; line-height: 1.6; color: var(--text-leise); }
.td-regeln li { margin-bottom: 6px; }
.td-regeln b { color: var(--text); }
/* Die Kursspalte traegt hier zwei Waehrungsbetraege und darunter den Stop;
   im Protokollraster brach sie mitten im Betrag um. */
.td-liste .prot-zeile { grid-template-columns: 1.4fr 0.9fr 2fr 0.8fr 0.8fr 0.8fr; }
@media (max-width: 720px) {
  /* Muss hier noch einmal stehen: Die Regel oben ist spezifischer als die
     schmale Fassung des Protokollrasters und wuerde sie sonst ueberstimmen. */
  .td-liste .prot-zeile { grid-template-columns: 1.5fr 0.9fr 0.9fr; }
  .td-schritte li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .td-lesen { margin-left: 0; width: 100%; }
  /* Das Protokollraster zeigt schmal drei Spalten; hier fallen Datum und
     Stueckzahl weg, Ergebnis und Anteil bleiben. */
  .td-liste .prot-seit { display: none; }
}

/* --- Fusszeilen-Verweise */
.fusslinks {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rand);
}
.fusslinks a {
  font-size: 12.8px; color: var(--text-leise); text-decoration: none;
}
.fusslinks a:hover { color: var(--akzent); text-decoration: underline; }

@media (max-width: 720px) {
  .prot-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sechs Spalten passen nicht. Einstand und Massstab fallen weg -- der
     Abstand zum Massstab bleibt, denn er ist die eigentliche Aussage. */
  .prot-zeile { grid-template-columns: 1.5fr 0.9fr 0.9fr; }
  .prot-kurse, .prot-massstab { display: none; }
  .vert-zeile { grid-template-columns: 110px 1fr 70px; gap: 8px; }
}

/* --------------------------------------------------------------- Kipp-Punkte

   Steht im Detailfenster zwischen den Argumenten und der Gruppenrechnung: erst
   was dafuer und dagegen spricht, dann wo es kippt, dann wie es gerechnet ist. */

.kipp-vor { margin-bottom: 10px !important; }
.kipp-marken { display: grid; gap: 8px; margin-bottom: 12px; }
.kipp-marke {
  padding: 11px 13px; background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-left-width: 2px; border-radius: var(--radius);
}
.kipp-runter { border-left-color: var(--schlecht); }
.kipp-hoch { border-left-color: var(--akzent); }
.kipp-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.kipp-kopf b { font-size: 13.5px; }
.kipp-wert { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.kipp-abstand { margin-left: 5px; font-size: 12px; }
.kipp-marke p { margin: 0; font-size: 12.6px; line-height: 1.55; color: var(--text-leise); }

.kipp-hebel { margin: 0 0 10px; padding-left: 18px; }
.kipp-hebel li {
  font-size: 12.8px; line-height: 1.6; color: var(--text-leise); margin-bottom: 4px;
}
.kipp-note {
  margin: 0; padding: 9px 12px; font-size: 12px; line-height: 1.55;
  color: var(--text-schwach); background: var(--flaeche-leise);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------ Peer-Vergleich */

.peer-liste { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.peer-zeile {
  display: grid; grid-template-columns: 1fr 52px 62px 92px;
  align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--rand); font-size: 12.8px;
}
.peer-zeile:last-child { border-bottom: 0; }
.peer-kopf {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-schwach); font-weight: 600; background: var(--flaeche-leise);
}
.peer-selbst { background: var(--eigen); }
.peer-name a { color: var(--text); text-decoration: none; }
.peer-name a:hover { color: var(--akzent); }
.peer-kuerzel { margin-left: 5px; font-family: var(--mono); font-size: 11px; color: var(--text-schwach); }
.peer-kgv, .peer-3m { font-family: var(--mono); font-size: 12.2px; text-align: right; }
.peer-kgv { color: var(--text-leise); }
.peer-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-schwach); }

/* ------------------------------------------------------------- Zusatzfakten */

.fakten { display: grid; gap: 8px; }
.fakt {
  padding: 11px 13px; background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.fakt-warn { background: var(--warn-bg); border-color: var(--warn-rand); }
.fakt-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.fakt-kopf b { font-size: 13.5px; }
.fakt-wert { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.fakt-tage { color: var(--text-schwach); }
.fakt p { margin: 0; font-size: 12.6px; line-height: 1.55; color: var(--text-leise); }

/* ======================================================== Weltausbau 09/2026

   Was hier unten steht, gehoert zu den Erweiterungen vom September 2026:
   Konto, Handelskasten, Watchlist-Knopf mit Wort und der Vergleich. Die
   Farbvariablen der Vergleichsreihen stehen ausnahmsweise hier statt ganz
   oben -- sie gehoeren zu genau einem Bauteil und sonst nirgendwohin. */

:root {
  /* Fuenf gut unterscheidbare Linienfarben. Blau ist die Hausfarbe und steht
     zuerst; die uebrigen sind so gewaehlt, dass sie sich auch bei
     Rot-Gruen-Schwaeche noch in Helligkeit und Ton trennen. */
  --reihe-1: #5B9DD9;
  --reihe-2: #E8A33D;
  --reihe-3: #58C39A;
  --reihe-4: #C77DDB;
  --reihe-5: #E2646E;
}
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) {
    --reihe-1: #1C6AAC;
    --reihe-2: #A96908;
    --reihe-3: #12795A;
    --reihe-4: #8442A8;
    --reihe-5: #B01F2C;
  }
}
:root[data-thema="hell"] {
  --reihe-1: #1C6AAC;
  --reihe-2: #A96908;
  --reihe-3: #12795A;
  --reihe-4: #8442A8;
  --reihe-5: #B01F2C;
}

/* ------------------------------------------------------------ Kleine Knoepfe */

.knopf.klein { font-size: 12.3px; padding: 5px 11px; }
.knopf.breit { width: 100%; }
.knopf.gefahr { color: var(--schlecht); border-color: var(--schlecht-rand); }
.knopf.gefahr:hover:not(:disabled) { background: var(--schlecht-bg); border-color: var(--schlecht); }
.knopf.angemeldet { border-color: var(--gut-rand); color: var(--gut); }

.karte-knoepfe, .positions-knoepfe, .handlungsleiste, .fuss-knoepfe {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.karte-knoepfe { margin-top: 11px; }
.positions-knoepfe { margin-top: 12px; }
.handlungsleiste {
  margin: 14px 0 4px; padding: 12px 0; gap: 8px;
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}

/* Die Urteilsmarke ist jetzt ein Knopf. Sie sah immer schon aus wie einer --
   das war der Fehler. Statt sie unauffaelliger zu machen, tut sie jetzt, was
   sie verspricht: ein Klick oeffnet genau den Vorgang, den sie nennt. */
button.urteilsmarke {
  font-family: inherit; cursor: pointer;
  transition: filter 0.12s, box-shadow 0.12s;
}
button.urteilsmarke:hover { filter: brightness(1.14); box-shadow: var(--schatten); }
button.urteilsmarke:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
:root[data-thema="hell"] button.urteilsmarke:hover { filter: brightness(0.94); }

/* Der Watchlist-Schalter mit ausgeschriebenem Wort. Ein Sternchen allein ist
   eine Vermutung; "Auf Watchlist setzen" ist eine Zusage. */
.knopf.merken-wort { display: inline-flex; align-items: center; gap: 6px; }
.knopf.merken-wort .merk-zeichen { width: 14px; height: 14px; flex-shrink: 0; }
.knopf.merken-wort.aktiv {
  color: var(--warn); border-color: var(--warn-rand); background: var(--warn-bg);
}
.knopf.merken-wort.aktiv .merk-zeichen { fill: currentColor; }

.aussenmarke {
  display: inline-block; margin-left: 7px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--text-schwach); background: var(--flaeche-hoch);
  border: 1px solid var(--rand); border-radius: 4px; vertical-align: 1px;
}

/* ------------------------------------------------------------------- Konto */

.kontoband {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 12px 15px;
  background: var(--flaeche-leise); border: 1px solid var(--rand);
  border-left: 3px solid var(--rand-stark); border-radius: var(--radius);
}
.kontoband[data-an="ja"] { border-left-color: var(--gut); }
.kontoband[data-an="nein"] { border-left-color: var(--warn); }
.kb-text { font-size: 13px; line-height: 1.55; color: var(--text-leise); flex: 1 1 320px; }
.kb-text b { color: var(--text); }

/* --------------------------------------------------- Kaesten (Handel, Konto) */

.kasten-schleier { position: fixed; inset: 0; z-index: 70; background: var(--schleier); }
.kasten {
  position: fixed; z-index: 80;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 20px 22px 22px;
  background: var(--bg); border: 1px solid var(--rand-stark);
  border-radius: 12px; box-shadow: 0 24px 60px rgba(var(--wurf), 0.5);
}
.kasten-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 10px;
}
.kasten-kopf h3 { font-size: 17px; margin: 0; }
.kasten-text {
  margin: 0 0 14px; font-size: 13.2px; line-height: 1.6; color: var(--text-leise);
}
.kasten-text .kuerzel { margin: 0 3px; }
.kasten-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.kasten-hinweis {
  margin: 0 0 12px; font-size: 12.4px; line-height: 1.6; color: var(--text-schwach);
  min-height: 1em;
}
.kasten-knoepfe { display: flex; gap: 9px; justify-content: flex-end; margin-top: 4px; }
.kasten-knoepfe.senkrecht { flex-direction: column; align-items: stretch; }
.kasten-fuss {
  margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--rand);
  font-size: 11.8px; line-height: 1.6; color: var(--text-schwach);
}
.kasten-fuss a { color: var(--akzent); }

.kasten-schalter {
  display: flex; gap: 4px; margin-bottom: 14px; padding: 3px;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: var(--radius);
}
.kasten-schalter button {
  flex: 1; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 550;
  color: var(--text-leise); background: none; border: none; border-radius: 5px; cursor: pointer;
}
.kasten-schalter button.aktiv { background: var(--flaeche-hoch); color: var(--text); }

/* Die Eingabefelder bekamen ihre Form bisher ueber .depot-form -- im Kasten
   griff davon nichts, und Beschriftung und Feld standen nebeneinander in
   einer Zeile. Hier stehen dieselben Regeln noch einmal, an den Kasten
   gebunden. */
.kasten .feld {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.kasten-felder .feld { margin-bottom: 0; }
.kasten .feld > span { font-size: 11.8px; color: var(--text-schwach); }
.kasten .feld em { font-style: normal; opacity: 0.75; }
.kasten .feld input {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 6px;
}
.kasten .feld input:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell);
}

@media (max-width: 460px) {
  .kasten-felder { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- Vergleich */

.vergleich-form { margin-bottom: 14px; }

.vergleich-marken { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vergleich-marke {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 11px; font-size: 13px;
  background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: 999px;
}
.vm-punkt {
  width: 9px; height: 9px; border-radius: 50%; background: var(--farbe); flex-shrink: 0;
}
.vm-name { cursor: pointer; font-weight: 550; }
.vm-name:hover { color: var(--akzent); }
.vm-weg {
  font: inherit; font-size: 16px; line-height: 1; padding: 0 5px;
  color: var(--text-schwach); background: none; border: none; cursor: pointer;
}
.vm-weg:hover { color: var(--schlecht); }

.zeitwahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.vergleich-chart { height: 320px; padding: 0; }
.v-svg { width: 100%; height: 100%; display: block; }
.ch-achse { font-size: 11px; fill: var(--text-schwach); font-family: var(--mono); }
.chart-lade {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 13px; color: var(--text-schwach);
}

.vergleich-legende {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 4px;
  font-size: 12.8px;
}
.vl-eintrag { display: inline-flex; align-items: center; gap: 7px; }
.vl-strich { width: 15px; height: 3px; border-radius: 2px; background: var(--farbe); }
.vl-name { cursor: pointer; }
.vl-name:hover { color: var(--akzent); }
.vl-note {
  flex-basis: 100%; font-size: 11.7px; line-height: 1.6; color: var(--text-schwach);
}

/* Die Zahlentafel. Waagerecht scrollbar statt umbrechend: Fuenf Spalten
   nebeneinander sind der ganze Zweck; ein Umbruch macht daraus wieder
   fuenf Listen untereinander. */
.vergleich-tafel {
  overflow-x: auto;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche);
}
.vt-zeile {
  display: grid;
  grid-template-columns: minmax(148px, 1.3fr) repeat(auto-fit, minmax(112px, 1fr));
  gap: 0; border-bottom: 1px solid var(--rand); min-width: 520px;
}
.vt-zeile:last-child { border-bottom: none; }
.vt-zeile:nth-child(even):not(.vt-kopf) { background: var(--flaeche-leise); }
.vt-name {
  padding: 9px 13px; font-size: 12.7px; color: var(--text-leise);
  border-right: 1px solid var(--rand); display: flex; align-items: center; gap: 6px;
}
.vt-name .klein { color: var(--text-schwach); }
.vt-wert {
  padding: 9px 13px; font-family: var(--mono); font-size: 12.7px;
  display: flex; align-items: center; gap: 7px;
}
.vt-wert.gut { color: var(--gut); }
.vt-wert.schlecht { color: var(--schlecht); }
.vt-bester {
  background: var(--eigen); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--akzent);
}
.vt-kopf { position: sticky; top: 0; background: var(--flaeche-hoch); z-index: 1; }
.vt-kopf .vt-wert {
  flex-direction: column; align-items: flex-start; gap: 2px;
  border-top: 3px solid var(--farbe); font-family: var(--schrift);
}
.vt-titel {
  font: inherit; font-size: 13.2px; font-weight: 600; text-align: left;
  color: var(--text); background: none; border: none; padding: 0; cursor: pointer;
}
.vt-titel:hover { color: var(--akzent); }
.vt-balken {
  flex: 1; height: 5px; min-width: 26px; border-radius: 3px;
  background: var(--flaeche-hoch); overflow: hidden;
}
.vt-balken i { display: block; height: 100%; border-radius: 3px; }

.vergleich-fazit {
  margin-top: 4px; padding: 15px 17px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
}
.vergleich-fazit p { margin: 10px 0 0; font-size: 13.2px; line-height: 1.65; color: var(--text-leise); }
.vf-liste { margin: 0; padding-left: 20px; }
.vf-liste li { margin-bottom: 6px; font-size: 13.3px; line-height: 1.6; }
.vergleich-fazit .kipp-note { font-size: 12px; color: var(--text-schwach); }