/* ==========================================================================================
   bildwelt2.css – Bildwelt 2.0 für die Unterseiten (seit 30.09.2026, Vorlage des Nutzers
   „Bondarium_Bildwelt_Unterseiten.pdf“ mit Asset-Paket). Wird auf jeder umgestellten Seite
   direkt nach base.css geladen. Titel-Illustrationen und Kartenbilder: spot-<seite>.svg (160 × 110).
   Regeln: 2,5 px Tinte, Flächen Weiß/Hauch, genau ein Neon-Punkt, Orange nur für Risiko & Kosten.
   ========================================================================================== */
:root { --up: #157C00; --down: #A2561C; }
/* Abschnittskarten: weiß statt Grünverlauf */
.kap, .kap.kap-b { background: #fff; border: 1px solid #E4E3DF; box-shadow: var(--shadow); }
.k-bild { border-color: #E4E3DF; }
/* Abschnittsnummer wie auf der Startseite */
.knr { background: #39FF14; color: #1A1A19; border: 2px solid #1A1A19; box-shadow: none; box-sizing: border-box; }
.lbtn .n { background: #39FF14; color: #1A1A19; border: 1.5px solid #1A1A19; box-sizing: border-box; }
/* Kurz gesagt: Kupon-Punkt statt Glühbirne */
.merk { background: #DCFBD3; }
.merk .mi { background: transparent; width: 20px; height: 20px; }
.merk .mi svg { display: none; }
.merk .mi::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #39FF14; border: 2px solid #1A1A19; }
/* Hub-Karten */
.hub-card.next { background: #DCFBD3; border-color: transparent; }
/* Titel-Illustration auf Themenseiten */
.b2-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 40px; align-items: center; }
.b2-kopf .b2-spot svg { width: 232px; height: 160px; display: block; }
@media (max-width: 720px) { .b2-kopf { grid-template-columns: minmax(0, 1fr); gap: 8px; } .b2-kopf .b2-spot { order: -1; } .b2-kopf .b2-spot svg { width: 160px; height: 110px; } }
/* Risiko-Punkte (Anleihen-ETFs): Tinte statt Ampel */
.kats .dots i { background: #fff !important; border: 1.5px solid #1A1A19; box-sizing: border-box; }
.kats .dots i.on { background: #1A1A19 !important; }
.kats .kat.r4 .dots i.on, .kats .kat.r3 .dots i.on { background: #CF7430 !important; border-color: #CF7430; }
/* Porträts (Guide): Laufzeit-Ring */
.pc .pc-img { position: relative; border-radius: 50%; overflow: visible !important; background: transparent !important; }
.pc .pc-img img { border-radius: 50%; background: #fff; }
.b2-ring { position: absolute; inset: -7%; width: 114%; height: 114%; pointer-events: none; overflow: visible; }   /* Punkt am Ring ragt über den Rand – nicht abschneiden (wie .ppl .ring svg auf der Startseite) */
a.pc { padding-top: 26px; }   /* Platz über dem Ring: Der Punkt oben (Nadine, Jonas) stieß sonst an den Kartenrand; a.pc schlägt .pc im Seitenstil */
@media (max-width: 600px) { a.pc { padding-top: 20px; } }
.ap-badge { background: #39FF14 !important; color: #1A1A19 !important; border: 2px solid #1A1A19; }
.ap-card { background: #fff !important; border: 1px solid #E4E3DF; }
.merk .mi::before { display: block; box-sizing: border-box; }
/* Kartenbilder als Datei (<img class="hub-img">) statt Inline-SVG: Motiv ganz zeigen */
img.hub-img { object-fit: contain; }
.b2-kopf h1 { margin-bottom: 14px; }
.b2-kopf .b2-spot img { width: 232px; height: 160px; display: block; }
@media (max-width: 720px) { .b2-kopf .b2-spot img { width: 160px; height: 110px; } }
/* Aktiver Chip (Länder-Auswahl u. a.): Neon mit Tinten-Rand, wie die Kapitel-Chips */
button.lbtn[aria-pressed="true"] { background: #39FF14; border-color: #1A1A19; color: #1A1A19; }