/* Markt-Radar -- Oberflaeche.
   Heller Hintergrund, wenig Farbe, klare Kanten: Die Seite zeigt viele Zahlen,
   und je ruhiger der Rahmen ist, desto eher liest man sie. Gruen und Rot sind
   ausschliesslich fuer Kursrichtung und Urteil reserviert -- werden sie zur
   Dekoration benutzt, stumpft die Ampel ab. */

:root {
  --bg: #f2f4f7;
  --flaeche: #ffffff;
  --flaeche-leise: #f7f9fb;
  --rand: #dde2e9;
  --rand-stark: #c6cedb;
  --text: #17202b;
  --text-leise: #56616f;
  --text-schwach: #8892a0;
  --akzent: #15589e;
  --akzent-hell: #e9f1fa;
  --gut: #0a7a45;
  --gut-bg: #e6f4ed;
  --schlecht: #c22a37;
  --schlecht-bg: #fbebed;
  --warn: #9a6100;
  --warn-bg: #fdf3e3;
  --radius: 8px;
  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --schatten: 0 1px 2px rgba(23, 32, 43, 0.06);
}

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

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

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.011em; }

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

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

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

.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 11px 20px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}

.marke {
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.marke span { 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: #fff; }
.knopf.haupt:hover:not(:disabled) { background: #12497f; border-color: #12497f; }
.knopf.schlicht { font-size: 12.5px; padding: 6px 12px; color: var(--text-leise); }
.knopf.mittig { display: block; margin: 18px auto 0; }

/* ----------------------------------------------------------------- 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 8px 26px rgba(23, 32, 43, 0.14);
  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: rgba(21, 88, 158, 0.16);
  transition: width 0.35s ease;
}

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

.lage {
  max-width: 1240px; margin: 16px auto 0; 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; }

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

.reiter {
  position: sticky; top: 55px; z-index: 25;
  display: flex; gap: 2px; overflow-x: auto;
  max-width: 1240px; margin: 18px auto 0; padding: 0 20px;
  border-bottom: 1px solid var(--rand);
}
.reiter button {
  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;
}
.reiter button:hover { color: var(--text); }
.reiter button[aria-selected="true"] { color: var(--akzent); border-bottom-color: var(--akzent); }

/* ---------------------------------------------------------------- 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 10px 30px rgba(23, 32, 43, 0.18);
  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 3px 10px rgba(23, 32, 43, 0.10); }

.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: #b9e0cb;
}
.urteilsmarke[data-a="beobachten"] { background: var(--akzent-hell); color: var(--akzent); border-color: #bcd6ef; }
.urteilsmarke[data-a="warten"], .urteilsmarke[data-a="reduzieren"] {
  background: var(--warn-bg); color: var(--warn); border-color: #edd6ac;
}
.urteilsmarke[data-a="meiden"], .urteilsmarke[data-a="verkaufen"] {
  background: var(--schlecht-bg); color: var(--schlecht); border-color: #eec2c6;
}

.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; }
.index-kachel {
  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 .n { font-size: 11.5px; color: var(--text-schwach); }
.index-kachel .w { 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 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; }

.tabelle {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden; 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 {
  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);
}
.tabellenkopf span:nth-child(n+3) { text-align: right; }
.zeile {
  padding: 10px 15px;
  border-bottom: 1px solid var(--flaeche-leise);
  cursor: pointer;
}
.zeile:last-child { border-bottom: none; }
.zeile:hover { background: var(--flaeche-leise); }
.zeile.eigen { background: #f5faff; }
.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;
}

/* ----------------------------------------------------------------- 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 #eec2c6;
  border-radius: 6px; font-size: 13px; color: #8f1f29;
}

.warnkasten {
  margin-top: 10px; padding: 10px 14px 10px 32px; position: relative;
  background: var(--warn-bg); border: 1px solid #edd6ac;
  border-radius: 6px; font-size: 13px; color: #7a4d00;
}
.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); border-color: var(--akzent); color: #fff; }
.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(--text); color: #fff;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(23, 32, 43, 0.28);
  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: rgba(23, 32, 43, 0.35); }
.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: -14px 0 40px rgba(23, 32, 43, 0.16);
}
.detail-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.detail-kopf h2 { font-size: 21px; }
.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); }

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

@media (max-width: 1000px) {
  .kopf { flex-wrap: wrap; }
  .suchfeld { order: 3; flex-basis: 100%; max-width: none; }
  .kopf-rechts { margin-left: auto; }
  .reiter { top: 0; position: static; }
  .tabellenkopf, .zeile { grid-template-columns: 30px minmax(120px, 2fr) 88px 70px 96px; }
  .tabellenkopf span:nth-child(5), .tabellenkopf span:nth-child(6), .tabellenkopf span:nth-child(7),
  .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; }
}