/* B&K Vermögen — Gestaltung der B&K-Seiten in Cinerius One PM
 *
 * Farben nach dem offiziellen B&K-Farbschema (BK_Farbschema_Final.pdf), Spalte
 * "sRGB – Office, Web". Die Abstufungen 80/60/40/20 % stammen aus den Farbfeldern des
 * Dokuments; die sind in CMYK angelegt und wurden an den offiziellen sRGB-Wert der
 * jeweiligen 100-%-Farbe angeglichen.
 *
 *   Gold       #b08658   CMYK 25|43|65|17
 *   Bordeaux   #800400   CMYK 00|97|100|50
 *   Koralle    #e83d43   CMYK 00|86|68|0
 *   Anthrazit  #4e4d47   CMYK 00|00|10|83
 *   Hellgrau   #d9dada   CMYK 00|00|00|20
 *
 * Alles hängt unter .bk, damit nichts auf die übrigen PM-Seiten durchschlägt.
 * Schrift: Die Website nutzt Open Sans. Bis sie selbst gehostet ist, steht hier Manrope,
 * das bereits im Projekt liegt — Wechsel über --bk-schrift.
 */

.bk {
    /* Hausfarben mit Abstufungen */
    --bk-gold: #b08658;      --bk-gold-80: #bc9971;      --bk-gold-60: #c9ae8c;      --bk-gold-40: #d8c4ad;      --bk-gold-20: #eaded0;
    --bk-bordeaux: #800400;  --bk-bordeaux-80: #973623;  --bk-bordeaux-60: #af604a;  --bk-bordeaux-40: #c98b77;  --bk-bordeaux-20: #e3bfb1;
    --bk-koralle: #e83d43;   --bk-koralle-80: #ed685f;   --bk-koralle-60: #f18c7e;   --bk-koralle-40: #f6b0a4;   --bk-koralle-20: #fad6cd;
    --bk-anthrazit: #4e4d47; --bk-anthrazit-80: #72726b; --bk-anthrazit-60: #92938d; --bk-anthrazit-40: #b5b5b1; --bk-anthrazit-20: #d8d8d6;
    --bk-hellgrau: #d9dada;  --bk-hellgrau-60: #e7e7e8;  --bk-hellgrau-20: #f6f6f6;

    /* Abgeleitet */
    --bk-rot: #9f1514;       /* Bordeaux mit 30 % Koralle: kräftiger als reines Bordeaux, für Bänder und rote Schrift */
    --bk-bronze: #8c734b;    /* Akzent von bk-vermoegen.de: dunkleres Gold, für kleine goldene Schrift lesbarer */
    --bk-text: #2b2a26;
    --bk-grau: var(--bk-anthrazit-80);
    --bk-linie: var(--bk-hellgrau);
    --bk-schrift: Manrope, "Segoe UI", system-ui, sans-serif;
    --bk-serif: "Source Serif 4", Georgia, serif;

    font-family: var(--bk-schrift);
    color: var(--bk-text);
    background: #fff;
}

.bk-seite { max-width: 1680px; margin: 0 auto; padding: 1.75rem 2rem 1.25rem; }

/* ── Kopf ──────────────────────────────────────────────────────────── */
.bk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
           margin-bottom: 1.5rem; }
.bk-kopf-titel { font-size: clamp(1.65rem, 2.7vw, 2.7rem); font-weight: 800; line-height: 1.08;
                 letter-spacing: -.025em; color: var(--bk-anthrazit); margin: 0; }
.bk-kopf-unter { font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 700; color: var(--bk-bronze);
                 margin: .35rem 0 0; }
.bk-kopf-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .45rem;
                font-size: .9rem; font-weight: 600; color: var(--bk-anthrazit); }
.bk-kopf-meta span:not(:last-child)::after { content: "|"; margin-left: .9rem; color: var(--bk-anthrazit-40); font-weight: 400; }
.bk-beispiel { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem;
               padding: .15rem .6rem; border-radius: 999px; background: var(--bk-gold-20);
               color: var(--bk-bronze); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.bk-beispiel .material-icons { font-size: .95rem; }

/* Logo aus dem offiziellen Farbschema-Dokument (wwwroot/img/bk-logo.svg), darunter der Claim.
   Der Claim skaliert mit der Logobreite (Container-Einheiten) und läuft so immer genau bündig. */
.bk-logo { flex-shrink: 0; width: clamp(12.5rem, 19vw, 18.5rem); container-type: inline-size; }
.bk-logo img { display: block; width: 100%; height: auto; }
.bk-logo-claim { margin-top: .45rem; font-size: 3.05cqw; letter-spacing: .14em; color: var(--bk-anthrazit-80);
                 white-space: nowrap; text-align: justify; text-align-last: justify; }

/* ── Abschnitt mit Farbband ───────────────────────────────────────── */
.bk-abschnitt { border: 1px solid var(--bk-linie); border-radius: 6px; background: #fff;
                box-shadow: 0 1px 3px rgba(60, 50, 30, .06); display: flex; flex-direction: column;
                overflow: hidden; }
.bk-band { display: flex; flex-direction: column; justify-content: center; padding: .55rem 1.1rem;
           color: #fff; min-height: 2.9rem; }
.bk-band-titel { font-size: 1.2rem; font-weight: 800; letter-spacing: -.005em; line-height: 1.2;
                 display: flex; align-items: center; gap: .55rem; }
.bk-band-titel .material-icons { font-size: 1.35rem; }
.bk-band-titel small { font-size: .95rem; font-weight: 600; opacity: .92; }
.bk-band-unter { font-size: .85rem; font-weight: 600; opacity: .92; margin-top: .05rem; }
.bk-band-gold { background: linear-gradient(90deg, var(--bk-gold), var(--bk-gold-80)); }
.bk-band-rot  { background: linear-gradient(90deg, var(--bk-bordeaux), var(--bk-rot)); }
.bk-band-grau { background: linear-gradient(90deg, var(--bk-anthrazit), var(--bk-anthrazit-80)); }
.bk-abschnitt-inhalt { padding: 1rem 1.1rem 1.1rem; flex: 1; }

.bk-raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
@media (max-width: 1100px) { .bk-raster-3 { grid-template-columns: 1fr; } }

/* ── Kennzahlen ────────────────────────────────────────────────────── */
.bk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 1.3fr)); }
.bk-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.bk-kpi { display: flex; align-items: center; gap: .9rem; padding: .35rem 1.1rem; min-width: 0; }
.bk-kpis:not(.bk-kpis-2) .bk-kpi + .bk-kpi { border-left: 1px solid var(--bk-linie); }
.bk-kpis-2 .bk-kpi { border: 1px solid var(--bk-linie); border-radius: 5px; padding: .75rem .9rem; }
.bk-kpi-icon { font-size: 2.7rem !important; color: var(--bk-gold); flex-shrink: 0; }
.bk-kpi-rot .bk-kpi-icon { color: var(--bk-koralle); }
.bk-kpi-rot .bk-kpi-wert { color: var(--bk-rot); }
.bk-kpi-label { font-size: .88rem; font-weight: 700; color: var(--bk-anthrazit); line-height: 1.25; }
.bk-kpi-wert { font-size: clamp(1.35rem, 1.55vw, 1.85rem); font-weight: 800; color: var(--bk-gold); line-height: 1.1;
               letter-spacing: -.02em; white-space: nowrap; }
.bk-kpi-text { font-size: .95rem; font-weight: 700; color: var(--bk-anthrazit); line-height: 1.3; }
.bk-kpi-fuss { font-size: .8rem; color: var(--bk-grau); line-height: 1.3; }
@media (max-width: 1300px) {
    .bk-kpis:not(.bk-kpis-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
    .bk-kpis:not(.bk-kpis-2) .bk-kpi:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 700px) {
    .bk-kpis, .bk-kpis-2 { grid-template-columns: 1fr !important; }
    .bk-kpis .bk-kpi { border-left: 0 !important; }
}

/* ── Balkendiagramm ────────────────────────────────────────────────── */
.bk-balken { --bk-label: minmax(8rem, 12.5rem); font-size: .8rem; }
.bk-balken-zeile, .bk-balken-achse { display: grid; grid-template-columns: var(--bk-label) 1fr var(--bk-zusatz, 0);
                                     align-items: center; column-gap: .6rem; }
.bk-balken-zeile { min-height: 1.72rem; }
.bk-balken-label { text-align: right; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-balken-zeile.ist-portfolio .bk-balken-label { font-weight: 800; color: #222; }
.bk-balken-spur { position: relative; height: 1.15rem; margin-right: 2.6rem;
                  background-image: linear-gradient(90deg, var(--bk-hellgrau-60) 1px, transparent 1px);
                  background-size: var(--bk-raster, 16.66%) 100%; }
.bk-balken-wert { position: absolute; inset: 0 auto 0 0; border-radius: 0 2px 2px 0; }
.bk-balken-standard { background: var(--bk-anthrazit-60); }
.bk-balken-hoch     { background: linear-gradient(90deg, var(--bk-koralle), var(--bk-koralle-80)); }
.bk-balken-portfolio{ background: linear-gradient(90deg, var(--bk-gold), var(--bk-gold-80)); }
.bk-balken-zahl { position: absolute; top: 50%; transform: translateY(-50%); font-weight: 700; color: #222;
                  white-space: nowrap; }
.bk-balken-zusatz { color: var(--bk-grau); font-size: .76rem; white-space: nowrap; }
.bk-balken-zusatz.stufe-hoch, .bk-balken-zusatz.stufe-erhöht { color: var(--bk-rot); }
.bk-balken-zusatz.stufe-mittel { color: var(--bk-bronze); }
.bk-balken-achse { margin-top: .3rem; }
.bk-balken-achse .bk-balken-spur { background: none; height: 1rem; border-top: 1px solid var(--bk-hellgrau); }
.bk-balken-tick { position: absolute; top: .15rem; transform: translateX(-50%); color: #555; font-size: .74rem; }
.bk-legende { margin-top: .8rem; font-size: .74rem; color: var(--bk-grau); display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.bk-legende span + span::before { content: "|"; margin-right: .6rem; color: var(--bk-anthrazit-40); }

/* ── Aufzählung mit Nummern ───────────────────────────────────────── */
.bk-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.bk-punkte li { display: flex; gap: .8rem; align-items: flex-start; font-size: .98rem; font-weight: 600;
                color: #2d2d2d; line-height: 1.35; }
.bk-nr { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #fff;
         display: inline-flex; align-items: center; justify-content: center; font-size: .88rem; font-weight: 800;
         margin-top: -.05rem; }
.bk-nr-gold { background: var(--bk-gold); }
.bk-nr-rot  { background: var(--bk-rot); }
.bk-nr-grau { background: var(--bk-anthrazit); }

/* ── Tabellen ──────────────────────────────────────────────────────── */
.bk-tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; }
.bk-tabelle th { text-align: left; font-weight: 700; color: #333; background: var(--bk-hellgrau-20);
                 padding: .45rem .6rem; border-bottom: 1px solid var(--bk-linie); white-space: nowrap; }
.bk-tabelle td { padding: .5rem .6rem; border-bottom: 1px solid var(--bk-hellgrau-60); vertical-align: top; line-height: 1.3; }
.bk-tabelle tr:last-child td { border-bottom: 0; }
.bk-tabelle .fett { font-weight: 700; color: #222; }
.bk-tabelle-kompakt { font-size: .76rem; }
.bk-tabelle-kompakt th { padding: .35rem .45rem; font-size: .74rem; }
.bk-tabelle-kompakt td { padding: .38rem .45rem; }
.bk-scroll { overflow-x: auto; }

.bk-sens td { font-size: 1.12rem; font-weight: 700; padding: .5rem .8rem; background: var(--bk-hellgrau-20); border-bottom: 3px solid #fff; }
.bk-sens td:nth-child(2) { text-align: center; color: #555; width: 3rem; }
.bk-sens td:last-child { color: var(--bk-bronze); background: #f7f2eb; }
.bk-sens td.neg { color: var(--bk-rot); background: var(--bk-koralle-20); }
.bk-fussnote { font-size: .74rem; color: var(--bk-grau); margin-top: .7rem; }

/* Relevanz-Punkte */
.bk-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--bk-anthrazit-40);
            vertical-align: middle; flex-shrink: 0; }
.bk-punkt-mittel { background: var(--bk-koralle-40); }
.bk-punkt-hoch { background: var(--bk-koralle); }
.bk-punkt-sehrhoch { background: var(--bk-bordeaux); }
.bk-relevanz { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.bk-relevanz-hoch { color: var(--bk-rot); }
.bk-relevanz-sehrhoch { color: var(--bk-bordeaux); font-weight: 700; }

/* ── Fußzeile ──────────────────────────────────────────────────────── */
.bk-fuss { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.5rem; font-size: .72rem;
           letter-spacing: .3em; color: #555; text-transform: uppercase; }
.bk-fuss::before { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bk-gold), var(--bk-gold-40)); }
.bk-fuss span:last-child { order: 2; letter-spacing: .18em; }
@media (max-width: 800px) { .bk-fuss { flex-direction: column; align-items: flex-start; gap: .4rem; }
                            .bk-fuss::before { display: none; } }

@media (max-width: 900px) {
    .bk-seite { padding: 1.25rem 1rem; }
    .bk-kopf { flex-direction: column-reverse; gap: 1rem; }
}

/* ── Verteilungsbild mit Steuerung ─────────────────────────────────── */
.bk-v-raster { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.1rem; align-items: start; }
@media (max-width: 1200px) { .bk-v-raster { grid-template-columns: 1fr; } }
.bk-v-seite { display: flex; flex-direction: column; gap: 1.1rem; }
.bk-v-bildkarte { padding-top: .5rem; }

.bk-verteilung { overflow-x: auto; }
.bk-verteilung svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: var(--bk-schrift); }
.bk-v-svg { touch-action: none; user-select: none; }
.bk-v-svg .bk-v-deko { pointer-events: none; }
.bk-v-flaeche { cursor: crosshair; }
.bk-v-zone { cursor: pointer; opacity: .8; transition: opacity .2s; }
.bk-v-zone:hover, .bk-v-zone.aktiv { opacity: 1; }
.bk-v-zonentext { font-size: 15px; font-weight: 700; fill: #fff; }
.bk-v-zonentext.aktiv { font-size: 16.5px; }
.bk-v-richtung { font-size: 13px; font-weight: 700; fill: var(--bk-anthrazit-80); }
.bk-v-vergleich { stroke: var(--bk-anthrazit); stroke-width: 1.6; stroke-dasharray: 6 5; opacity: .75; }
.bk-v-vergleich-text { font-size: 11.5px; fill: var(--bk-anthrazit); }
.bk-v-fname { font-size: 11.5px; font-weight: 800; fill: #333; }
.bk-v-fproz { font-size: 11px; fill: #555; }
.bk-v-fonds.leer .bk-v-stab { opacity: .3; }
.bk-v-fonds.leer text { fill: #9a9a96; }
.bk-v-griff { cursor: grab; }
.bk-v-svg.zieht, .bk-v-svg.zieht .bk-v-griff { cursor: grabbing; }
.bk-v-griffstab { fill: var(--bk-anthrazit); }
.bk-v-griffpunkt { fill: var(--bk-gold); stroke: #fff; stroke-width: 3; }
.bk-v-gtitel { font-size: 12.5px; font-weight: 800; fill: #fff; }
.bk-v-gtext { font-size: 12px; fill: #333; }

/* Weiche Übergänge beim Umschalten; beim Ziehen aus, sonst hinkt die Glocke der Maus hinterher. */
.bk-v-glocke, .bk-v-einzel, .bk-v-vergleich { transition: d .45s cubic-bezier(.2, .7, .2, 1); }
.bk-v-stab, .bk-v-griffstab { transition: y .45s cubic-bezier(.2, .7, .2, 1), height .45s cubic-bezier(.2, .7, .2, 1); }
.bk-v-kopf { transition: cy .45s cubic-bezier(.2, .7, .2, 1), r .45s cubic-bezier(.2, .7, .2, 1); }
.bk-v-fondstext, .bk-v-griff, .bk-v-griffbox { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.bk-v-svg.zieht * { transition-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) { .bk-v-svg * { transition: none !important; } }

/* Kennzahlen unter dem Bild */
.bk-v-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--bk-linie); margin-top: .3rem; }
.bk-v-kpi { padding: .6rem .9rem; min-width: 0; }
.bk-v-kpi + .bk-v-kpi { border-left: 1px solid var(--bk-linie); }
.bk-v-kpi small { display: block; font-size: .74rem; font-weight: 700; color: var(--bk-anthrazit-80); }
.bk-v-kpi b { font-size: 1.35rem; font-weight: 800; color: var(--bk-gold); letter-spacing: -.02em; white-space: nowrap; }
.bk-v-kpi i { font-style: normal; font-size: .74rem; font-weight: 700; margin-left: .35rem; color: var(--bk-anthrazit-80); white-space: nowrap; }
.bk-v-kpi span { display: block; font-size: .74rem; color: var(--bk-grau); }
.bk-v-vergleichshinweis { font-size: .72rem; color: var(--bk-grau); padding: 0 .9rem .6rem; }
@media (max-width: 800px) {
    .bk-v-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-v-kpi + .bk-v-kpi { border-left: 0; }
}

/* Steuerung */
.bk-v-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; font-weight: 700;
              color: var(--bk-anthrazit-80); margin: .1rem 0 .35rem; }
.bk-v-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem; }
.bk-v-chip { border: 1px solid var(--bk-hellgrau); background: #fff; border-radius: 999px; padding: .2rem .65rem;
             font-size: .8rem; font-weight: 600; color: var(--bk-anthrazit); cursor: pointer; }
.bk-v-chip:hover { border-color: var(--bk-gold); }
.bk-v-chip.aktiv { background: var(--bk-anthrazit); border-color: var(--bk-anthrazit); color: #fff; }
.bk-v-regler, .bk-v-fondsregler input[type=range] { width: 100%; accent-color: var(--bk-gold); margin: 0; }
.bk-v-skala { display: flex; justify-content: space-between; font-size: .7rem; color: var(--bk-grau); }
.bk-v-fondsregler { display: grid; grid-template-columns: .65rem minmax(0, 1fr) auto; align-items: center;
                    column-gap: .45rem; margin: .4rem 0; font-size: .8rem; }
.bk-v-fondsregler input { grid-column: 1 / -1; }
.bk-v-fpunkt { width: .6rem; height: .6rem; border-radius: 50%; }
.bk-v-fnamelang { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-v-fwert { font-weight: 700; font-variant-numeric: tabular-nums; }
.bk-v-fondsregler.leer .bk-v-fnamelang, .bk-v-fondsregler.leer .bk-v-fwert { color: #9a9a96; }
.bk-v-summe { display: flex; justify-content: space-between; border-top: 1px solid var(--bk-linie); padding-top: .45rem;
              margin-top: .4rem; font-size: .8rem; font-weight: 700; }
.bk-v-schalter { display: flex; gap: .45rem; align-items: center; font-size: .8rem; margin-top: .6rem; cursor: pointer; }

/* Szenarien */
.bk-v-szenarien { margin-top: 1.1rem; }
.bk-v-szenarien-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 1.4rem; }
@media (max-width: 1000px) { .bk-v-szenarien-inhalt { grid-template-columns: 1fr; } }
.bk-v-hinweis { font-size: .74rem; color: var(--bk-grau); margin-top: .45rem; }
.bk-v-speichern { display: flex; gap: .4rem; }
.bk-v-speichern input { flex: 1; min-width: 0; border: 1px solid var(--bk-hellgrau); border-radius: 5px; padding: .35rem .55rem;
                        font: inherit; font-size: .82rem; }
.bk-v-knopf { display: inline-flex; align-items: center; gap: .25rem; border: 0; border-radius: 5px; background: var(--bk-gold);
              color: #fff; font-weight: 700; font-size: .8rem; padding: .35rem .7rem; cursor: pointer; white-space: nowrap; }
.bk-v-knopf:disabled { opacity: .45; cursor: not-allowed; }
.bk-v-knopf .material-icons { font-size: 1rem; }
.bk-v-meldung { margin-top: .45rem; font-size: .78rem; color: #2c6650; }
.bk-v-meldung.fehler { color: var(--bk-rot); }
.bk-v-auswahl { width: 100%; border: 1px solid var(--bk-hellgrau); border-radius: 5px; padding: .3rem .45rem; font: inherit;
                font-size: .82rem; background: #fff; }
.bk-v-liste { list-style: none; margin: 0; padding: 0; }
.bk-v-liste li { display: flex; align-items: center; gap: .15rem; padding: .4rem .3rem; border-bottom: 1px solid var(--bk-hellgrau-60); }
.bk-v-liste li.aktiv { background: var(--bk-gold-20); border-radius: 4px; }
.bk-v-listentext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bk-v-listentext strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-v-listentext span { font-size: .72rem; color: var(--bk-grau); }
.bk-v-icon { border: 0; background: none; color: var(--bk-anthrazit-80); padding: .15rem; cursor: pointer; border-radius: 4px; line-height: 1; }
.bk-v-icon:hover { background: var(--bk-hellgrau-20); color: var(--bk-anthrazit); }
.bk-v-icon .material-icons { font-size: 1.15rem; }
.bk-v-klein { border: 1px solid var(--bk-hellgrau); background: #fff; border-radius: 4px; font-size: .72rem; padding: .15rem .45rem; cursor: pointer; }
.bk-v-klein.warn { border-color: var(--bk-rot); color: var(--bk-rot); font-weight: 700; }
.bk-v-dashboardlink { display: flex; align-items: center; gap: .35rem; margin-top: .9rem; font-size: .82rem; font-weight: 700;
                      color: var(--bk-bronze); text-decoration: none; }
.bk-v-dashboardlink:hover { text-decoration: underline; color: var(--bk-bronze); }
.bk-v-dashboardlink .material-icons { font-size: 1.05rem; }

/* Zusammensetzung (Portfolio-Kontext) */
.bk-v-zusammensetzung { display: flex; height: 1.4rem; border-radius: 4px; overflow: hidden; background: var(--bk-hellgrau-20); }
.bk-v-zusammensetzung span { display: block; height: 100%; transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.bk-v-zusammensetzung span + span { border-left: 2px solid #fff; }
.bk-v-zusammensetzung-skala { display: flex; justify-content: space-between; font-size: .7rem; color: var(--bk-grau); margin: .2rem 0 .6rem; }
.bk-v-fakten td:first-child { color: var(--bk-grau); white-space: nowrap; width: 40%; }

/* Portfolio-Auswahl im Dashboard */
.bk-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: -.4rem 0 1.1rem; padding: .55rem .9rem;
              background: var(--bk-hellgrau-20); border: 1px solid var(--bk-hellgrau-60); border-radius: 6px; font-size: .85rem; }
.bk-auswahl label { font-weight: 700; color: var(--bk-anthrazit); }
.bk-auswahl select { border: 1px solid var(--bk-hellgrau); border-radius: 5px; padding: .3rem .5rem; font: inherit; background: #fff; min-width: 16rem; }
.bk-auswahl-lage { color: var(--bk-grau); }
.bk-auswahl-link { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; color: var(--bk-bronze); font-weight: 700; text-decoration: none; }
.bk-auswahl-link:hover { text-decoration: underline; color: var(--bk-bronze); }
.bk-auswahl-link .material-icons { font-size: 1.05rem; }
.bk-gewicht { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-nicht-investiert td, .bk-nicht-investiert td.fett { color: #a3a39f; }
.bk-balken-zeile.ist-gedimmt { opacity: .4; }

.bk-treiber { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 0; margin-top: 1.25rem;
              padding: .9rem 0; border-bottom: 1px solid var(--bk-linie); }
.bk-treiber-kopf { display: flex; flex-direction: column; padding-right: 1.4rem; margin-right: .4rem;
                   border-right: 1px solid var(--bk-linie); }
.bk-treiber-kopf strong { font-size: 1.35rem; font-weight: 800; color: #333; line-height: 1.1; }
.bk-treiber-kopf span { font-size: .85rem; color: var(--bk-grau); }
.bk-treiber-eintrag { display: flex; align-items: center; gap: .8rem; flex: 1 1 13rem; padding: 0 1rem;
                      min-width: 12rem; }
.bk-treiber-eintrag + .bk-treiber-eintrag { border-left: 1px solid var(--bk-linie); }
.bk-treiber-icon { width: 3.3rem; height: 3.3rem; border-radius: 50%; display: inline-flex; align-items: center;
                   justify-content: center; color: #fff; flex-shrink: 0; }
.bk-treiber-icon .material-icons { font-size: 1.75rem; }
.bk-treiber-eintrag strong { display: block; font-size: 1rem; font-weight: 800; color: #333; }
.bk-treiber-eintrag div > span { font-size: .8rem; color: var(--bk-grau); }
.bk-hinweislinie { display: flex; align-items: center; gap: 1rem; margin: .7rem 0 0; font-size: .82rem;
                   color: #444; text-align: center; }
.bk-hinweislinie::before, .bk-hinweislinie::after { content: ""; flex: 1 1 4rem; height: 1px; background: var(--bk-gold); }
@media (max-width: 900px) {
    .bk-treiber-eintrag + .bk-treiber-eintrag { border-left: 0; }
    .bk-treiber-kopf { border-right: 0; flex-basis: 100%; }
}

/* ── Kapitalmarkttermine ───────────────────────────────────────────── */
.bk-kopf-links { flex-direction: row-reverse; justify-content: flex-end; }
.bk-kopf-links > div:first-child { flex: 1; text-align: center; }
.bk-kopf-links .bk-kopf-meta { justify-content: center; font-weight: 500; }
.bk-versal .bk-band-titel { text-transform: uppercase; letter-spacing: .02em; }

.bk-top { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .7rem; }
.bk-top-karte { border: 1px solid var(--bk-linie); border-radius: 5px; padding: .7rem .75rem .8rem; text-align: center;
                background: #fff; box-shadow: 0 1px 2px rgba(60, 50, 30, .05); }
.bk-top-kopf { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: .45rem; }
.bk-top-kopf .bk-punkt { margin-right: auto; }
.bk-top-kopf .material-icons { font-size: 1.55rem; color: #333; }
.bk-top-datum { font-size: .9rem; font-weight: 600; color: #333; margin-right: auto; }
.bk-top-titel { font-size: 1.02rem; font-weight: 800; color: #222; line-height: 1.2; }
.bk-top-text { font-size: .8rem; color: #555; margin-top: .3rem; line-height: 1.3; }
@media (max-width: 1400px) { .bk-top { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .bk-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bk-km-raster { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: 1.1rem; margin: 1.1rem 0; }
@media (max-width: 1250px) { .bk-km-raster { grid-template-columns: 1fr; } }
.bk-aktien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 800px) { .bk-aktien { grid-template-columns: 1fr; } }
.bk-firma { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }

.bk-fazit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk-fazit li { display: flex; gap: .8rem; align-items: flex-start; padding: .2rem 1.1rem; font-size: .88rem;
               font-weight: 600; color: #2d2d2d; line-height: 1.35; }
.bk-fazit li + li { border-left: 1px solid var(--bk-linie); }
.bk-fazit .bk-nr { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
@media (max-width: 1000px) {
    .bk-fazit { grid-template-columns: 1fr; gap: .7rem; }
    .bk-fazit li + li { border-left: 0; }
}