/* MyTradingHelper – Website-Stylesheet. Tokens und Komponenten aus dem Branding-Skill. */

@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --navy-900: #0f1f4d; --navy-800: #16275a; --navy: #1f3571; --navy-600: #2a4a8c;
  --blue: #35519a; --blue-500: #3e6fbc; --blue-300: #8091bc;
  --tint: #e0ebff; --paper: #f5f8fd; --card: #ffffff;
  --red: #e23a4e; --red-700: #c22a3d; --red-hell: #ff5d70;
  --green: #1fbf75; --candle-red: #e8412f;
  --ink: #1a2342; --muted: #5a6889; --line: #e2e8f4;
  --disp: "Montserrat", -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --hero-verlauf: radial-gradient(120% 90% at 70% 10%, #2a4a8c 0%, #1f3571 38%, #16275a 70%, #0f1f4d 100%);
  --sek-verlauf: radial-gradient(120% 80% at 80% 0%, #3e6fbc 0%, #35519a 40%, #2a4a8c 75%, #1f3571 100%);
  --btn-verlauf: linear-gradient(135deg, #ff5d70, #e23a4e 45%, #c22a3d);
  --schatten: 0 10px 30px rgba(26, 35, 66, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.68; font-size: 17px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--red-700); text-decoration: none; }
a:hover { color: var(--red); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* Typografie */
h1, h2, h3, h4 { font-family: var(--disp); color: var(--navy); line-height: 1.15; margin: 0 0 14px; }
h1 { font-weight: 900; font-size: clamp(2rem, 4.2vw, 2.8rem); letter-spacing: -.015em; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-weight: 700; font-size: 1.2rem; }
.sec-title { position: relative; padding-left: 16px; }
.sec-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 3px; background: var(--red); }
.sec-title.hell { color: #fff; }
.sec-title.klein { font-size: 1.25rem; }
.lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 8px; max-width: 720px; }
.eyebrow { font-family: var(--disp); letter-spacing: .32em; font-size: .72rem; font-weight: 700; color: var(--blue-300); text-transform: uppercase; margin-bottom: 20px; }
.label { font-family: var(--disp); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #aebbe0; }
.pill, .badge { display: inline-block; font-family: var(--disp); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.pill { background: var(--tint); color: var(--navy); }
.badge { background: var(--red); color: #fff; }
.mehr { font-family: var(--disp); font-weight: 700; font-size: .95rem; }

/* Buttons */
.btn { display: inline-block; font-family: var(--disp); font-weight: 800; font-size: 1rem; letter-spacing: .02em; background: var(--btn-verlauf); color: #fff; border: none; border-radius: 12px; padding: 15px 30px; cursor: pointer; box-shadow: 0 12px 30px rgba(226, 58, 78, .4); transition: transform .15s, box-shadow .15s; text-align: center; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(226, 58, 78, .5); color: #fff; }
.btn-klein { font-size: .88rem; padding: 11px 20px; box-shadow: 0 8px 22px rgba(226, 58, 78, .35); }
.btn-rahmen { background: transparent; border: 2px solid var(--blue-300); box-shadow: none; padding: 13px 28px; }
.btn-rahmen:hover { box-shadow: none; border-color: #fff; }

/* Header */
.kopf { background: var(--navy-900); color: #fff; position: sticky; top: 0; z-index: 50; }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 36px; height: 76px; }
.marke { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--disp); font-weight: 800; font-size: 1.15rem; white-space: nowrap; flex-shrink: 0; }
.marke img { height: 44px; width: auto; }
.hauptnav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.hauptnav li { position: relative; }
.hauptnav > ul > li > a { display: inline-block; padding: 10px 10px; font-family: var(--disp); font-weight: 600; font-size: .84rem; color: #dbe6ff; border-radius: 8px; white-space: nowrap; }
.hauptnav > ul > li > a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hauptnav > ul > li.aktiv > a { color: var(--red-hell); background: rgba(255, 255, 255, .08); }
.hauptnav > ul > li.aktiv > .aufklappen { color: var(--red-hell); }
.aufklappen { position: absolute; right: 0; top: 10px; width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: #dbe6ff; }
.aufklappen::after { content: ""; display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 4px auto 0; }
.hat-kinder > a { padding-right: 26px !important; }
.untermenu { list-style: none; margin: 0; padding: 8px; position: absolute; left: 0; top: 100%; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 38px rgba(26, 35, 66, .18); display: none; z-index: 60; }
.untermenu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--navy); font-size: .92rem; font-weight: 500; }
.untermenu a:hover { background: var(--tint); }
.untermenu li.aktiv > a { color: var(--red-700); font-weight: 700; background: var(--tint); }
.hauptnav li.offen > .untermenu { display: block; }
@media (hover: hover) and (min-width: 1100px) { .hauptnav li.hat-kinder:hover > .untermenu { display: block; } }
.nav-cta { margin-left: 8px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; }
.burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 1099px) {
  .burger { display: flex; }
  .hauptnav { position: fixed; inset: 76px 0 0 0; background: var(--navy-900); overflow-y: auto; padding: 16px 24px 40px; display: none; }
  body.nav-offen .hauptnav { display: block; }
  body.nav-offen { overflow: hidden; }
  .hauptnav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .hauptnav > ul > li > a { display: block; padding: 14px 12px; font-size: 1.05rem; }
  .aufklappen { top: 0; right: 0; width: 56px; height: 56px; color: #fff; }
  .hat-kinder > a { padding-right: 60px !important; }
  .untermenu { position: static; background: rgba(255, 255, 255, .06); border: 0; box-shadow: none; min-width: 0; margin: 0 0 8px; }
  .untermenu a { color: #dbe6ff; padding: 10px 16px; }
  .untermenu a:hover { background: rgba(255, 255, 255, .1); }
  .untermenu li.aktiv > a { color: var(--red-hell); background: rgba(255, 255, 255, .1); }
  .hauptnav li.offen > .untermenu { display: block; }
  .hauptnav li.offen > .aufklappen::after { transform: rotate(-135deg); margin-top: 8px; }
  .nav-cta { margin: 16px 0 0; }
  .nav-cta .btn { display: block; }
}

/* Hero */
.hero { position: relative; color: #fff; overflow: hidden; padding: 64px 0 72px; background: var(--hero-verlauf); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.06; margin: 0 0 16px; }
.hero h1 em { font-style: normal; color: var(--red-hell); }
.hero-sub { font-size: 1.15rem; color: #d8e0f5; max-width: 560px; margin: 0; }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.hero-text { min-width: 0; }
.hero-bild { display: flex; justify-content: center; }
.hero-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.hero-karte { display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 24px; color: #fff; transition: transform .15s, background .15s; }
.hero-karte:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .11); color: #fff; }
.hero-karte strong { font-family: var(--disp); font-weight: 800; font-size: 1.1rem; }
.hero-karte > span:not(.ic):not(.mehr) { font-size: .95rem; color: #aebbe0; }
.hero-karte .mehr { color: #ff8d9b; margin-top: 4px; }
@media (max-width: 860px) {
  .hero { padding: 44px 0 56px; }
  .hero-raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero-bild { order: -1; }
  .hero-stage { transform: scale(.68); transform-origin: top center; margin-bottom: -138px; }
  .hero-karten { grid-template-columns: 1fr; margin-top: 28px; }
}

/* Hero-Animation "Kurs läuft durch die Idee" (läuft einmal, ca. 5 s). Chart hängt an der Bühne, damit die
   Logokerzen bei jeder Breite Teil der Serie sind; der Hero schneidet den weit überstehenden Chart ab. */
.hero { isolation: isolate; }
.hero-stage { position: relative; width: 380px; height: 430px; max-width: 100%; }
.hs-bg { position: absolute; left: -1600px; top: -260px; width: 3200px; height: 1000px; max-width: none; z-index: -1; overflow: visible; pointer-events: none; }
.hs-grid { animation: hsGrid .5s ease-out .05s 1 both; }
.hs-st { opacity: 0; animation: hsFade .65s ease-out 1 both; }
.hs-k { opacity: 0; animation: hsGrow .4s cubic-bezier(.2, .8, .2, 1) 1 both; }
.hs-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hsDraw 4.1s linear .25s 1 both; }
.hs-area { opacity: 0; animation: hsFade 1s ease-out 1.3s 1 both; }
.hs-punkte { opacity: 0; animation: hsFade .5s ease-out 2.7s 1 both; }
.hs-chart { animation: hsDim .8s ease-in-out 4.3s 1 both; }
.hs-peak { opacity: 0; animation: hsPeak .75s ease-out 2.55s 1 both; }
.hs-logo { position: absolute; left: 100px; top: 78px; width: 180px; height: 275px; transform-origin: 50% 50%; opacity: .18; animation: hsSharpen .9s ease-out 2.7s 1 both; }
.hs-burst { position: absolute; left: 189px; top: 204px; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 190, 1) 0%, rgba(255, 214, 102, .6) 40%, rgba(255, 214, 102, 0) 70%); opacity: 0; animation: hsBurst .6s ease-out 3.5s 1 both; }
.hs-halo { position: absolute; left: 190px; top: 215px; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 102, .32) 0%, rgba(255, 214, 102, .1) 45%, rgba(255, 214, 102, 0) 70%); opacity: 0; animation: hsHalo .8s ease-in-out 3.5s 1 both; }
@keyframes hsGrid { from { opacity: 0; } to { opacity: 1; } }
@keyframes hsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hsGrow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes hsDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hsDim { from { opacity: 1; } to { opacity: .28; } }
@keyframes hsPeak { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes hsSharpen { 0% { opacity: .18; transform: scale(1.14); } 70% { opacity: 1; transform: scale(1); } 85% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hsBurst { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(8); } }
@keyframes hsHalo { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
/* Endzustand ohne Animation (zweiter Aufruf in der Sitzung oder reduzierte Bewegung) */
.hero-stage.statisch *, .hero-stage.statisch { animation: none !important; }
.hero-stage.statisch .hs-line { stroke-dashoffset: 0; }
.hero-stage.statisch .hs-chart { opacity: .28; }
.hero-stage.statisch .hs-st, .hero-stage.statisch .hs-k, .hero-stage.statisch .hs-area, .hero-stage.statisch .hs-punkte, .hero-stage.statisch .hs-logo, .hero-stage.statisch .hs-halo { opacity: 1; }
.hero-stage.statisch .hs-k { transform: none; }
.hero-stage.statisch .hs-peak, .hero-stage.statisch .hs-burst { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-stage *, .hero-stage { animation: none !important; }
  .hero-stage .hs-line { stroke-dashoffset: 0; }
  .hero-stage .hs-chart { opacity: .28; }
  .hero-stage .hs-st, .hero-stage .hs-k, .hero-stage .hs-area, .hero-stage .hs-punkte, .hero-stage .hs-logo, .hero-stage .hs-halo { opacity: 1; }
  .hero-stage .hs-k { transform: none; }
  .hero-stage .hs-peak, .hero-stage .hs-burst { opacity: 0; }
}

/* Abschnitte und Karten */
.abschnitt { padding: 72px 0; }
.abschnitt-eng { padding-top: 0; }
.abschnitt-navy { background: var(--navy-900); color: #fff; }
.abschnitt-kopf { max-width: 720px; margin-bottom: 28px; }
.karten-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .karten-raster { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 8px; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(26, 35, 66, .12); }
.card h3 { margin: 0; font-size: 1.1rem; }
.card p { margin: 0; font-size: .95rem; color: var(--muted); flex-grow: 1; }
.card-link { color: var(--ink); }
.card-link:hover { color: var(--ink); }
.card-link .mehr { color: var(--red-700); margin-top: 6px; }
.ic { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--navy), var(--blue-500)); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex-shrink: 0; }
.ic-rot { background: linear-gradient(135deg, var(--red), var(--red-700)); }
.ic svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-dunkel { background: var(--sek-verlauf); border: 0; color: #fff; }
.card-dunkel .mehr { color: #fff; margin-top: auto; }
.ratgeber-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ratgeber-liste li { display: flex; gap: 10px; align-items: flex-start; }
.ratgeber-liste .badge { margin-top: 3px; font-size: .62rem; padding: 3px 9px; white-space: nowrap; }
.ratgeber-liste a { color: #fff; font-family: var(--disp); font-weight: 700; font-size: .92rem; line-height: 1.3; }
.card-navy { background: var(--navy-800); border: 1px solid rgba(255, 255, 255, .1); color: #fff; padding: 28px; gap: 10px; }
.card-navy h3 { color: #fff; font-weight: 800; font-size: 1.25rem; }
.card-navy p { color: #aebbe0; }
.card-navy .btn { align-self: flex-start; font-size: .9rem; padding: 12px 20px; margin-top: 6px; }
/* Für Dich auf der Startseite: blauer Verlauf mit Candlestick-Chart, Glaskarten (hebt sich vom Footer ab) */
.abschnitt-verlauf { position: relative; overflow: hidden; background: var(--sek-verlauf); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.abschnitt-verlauf > .wrap { position: relative; z-index: 1; }
.fd-chart { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; }
@media (max-width: 700px) { .fd-chart { top: auto; height: auto; } }
.card-glas { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; padding: 28px; gap: 10px; box-shadow: 0 12px 32px rgba(15, 31, 77, .25); }
.card-glas:hover { box-shadow: 0 18px 40px rgba(15, 31, 77, .35); }
.card-glas h3 { color: #fff; font-weight: 800; font-size: 1.25rem; }
.card-glas p { color: #dbe6ff; }
.card-glas .btn { align-self: flex-start; font-size: .9rem; padding: 12px 20px; margin-top: 6px; }
.card-glas .btn-rahmen { border-color: rgba(255, 255, 255, .75); }
.card-glas .btn-rahmen:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.autor-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 40px; display: flex; gap: 36px; align-items: center; box-shadow: var(--schatten); }
.autor-foto img { width: 160px; height: 160px; border-radius: 16px; object-fit: cover; background: var(--navy); }
.autor-box p { color: var(--muted); margin: 0 0 10px; }
@media (max-width: 700px) { .autor-box { flex-direction: column; text-align: left; padding: 28px; } }

/* Teilen-Buttons unter Beiträgen */
.beitrag-teilen { padding-bottom: 40px; }
.teilen-titel { font-family: var(--disp); font-weight: 800; font-size: 1rem; color: var(--navy); margin: 0 0 12px; }
.teilen-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.teilen-buttons a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; color: #fff; font-family: var(--disp); font-weight: 700; font-size: .86rem; transition: transform .15s, opacity .15s; }
.teilen-buttons a:hover { color: #fff; transform: translateY(-2px); opacity: .92; }
.teilen-buttons svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.teilen-facebook { background: #1877f2; }
.teilen-linkedin { background: #0a66c2; }
.teilen-x { background: #0f1419; }
.teilen-xing { background: #006567; }

/* Seiten und Beiträge */
.seite-kopf, .beitrag-kopf { background: var(--hero-verlauf); color: #fff; padding: 48px 0 40px; }
.seite-kopf h1, .beitrag-kopf h1 { color: #fff; }
/* Titelbild im Beitragskopf (Standard für alle Beiträge über posts.json, einzeln per kopfbild: false abschaltbar) */
.beitrag-kopf.mit-bild, .seite-kopf.mit-bild { position: relative; overflow: hidden; }
.beitrag-kopf.mit-bild::before, .seite-kopf.mit-bild::before { content: ""; position: absolute; inset: 0; background: var(--kopfbild) var(--kopfbild-pos, center 30%) / cover no-repeat; opacity: .38; filter: saturate(.85); }
.beitrag-kopf.mit-bild::after, .seite-kopf.mit-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 31, 77, .8) 0%, rgba(15, 31, 77, .45) 50%, rgba(15, 31, 77, .12) 100%); }
.beitrag-kopf.mit-bild .wrap, .seite-kopf.mit-bild .wrap { position: relative; z-index: 1; }
/* Broker-Artikel: Logo als helle Karte rechts im Kopf */
.kopf-zeile-beitrag { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.kopf-text { min-width: 0; }
.kopf-logo { flex-shrink: 0; background: #fff; border-radius: 16px; padding: 18px 26px; box-shadow: 0 14px 34px rgba(15, 31, 77, .35); display: flex; align-items: center; justify-content: center; }
.kopf-logo img { display: block; width: auto; height: auto; max-width: 220px; max-height: 84px; object-fit: contain; }
@media (max-width: 700px) { .kopf-zeile-beitrag { flex-direction: column; align-items: flex-start; gap: 20px; } .kopf-logo { padding: 12px 18px; } .kopf-logo img { max-width: 170px; max-height: 64px; } }
.seite-kopf .lead, .beitrag-kopf .lead { color: #d8e0f5; }
.brotkrumen { font-family: var(--disp); font-size: .8rem; font-weight: 600; color: var(--blue-300); margin: 0 0 12px; }
.brotkrumen a { color: #dbe6ff; }
.beitrag-meta { display: flex; align-items: center; gap: 12px; color: #aebbe0; font-size: .9rem; margin: 0; flex-wrap: wrap; }
.prose { max-width: 760px; padding-top: 40px; padding-bottom: 56px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; }
.prose img { border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 20px 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--tint); font-family: var(--disp); font-weight: 700; color: var(--navy); }
.prose blockquote { border-left: 5px solid var(--red); margin: 20px 0; padding: 4px 0 4px 18px; color: var(--muted); }
.prose ul li::marker { color: var(--red); }
.prose a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.btn, .btn:hover { text-decoration: none; }
.beitrag-weiter { padding-bottom: 64px; }
.link-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.link-liste a { color: var(--navy); font-weight: 500; }
@media (max-width: 600px) { .link-liste { grid-template-columns: 1fr; } }

/* Formulare */
.formular { display: grid; gap: 16px; max-width: 640px; }
.formular label { font-family: var(--disp); font-weight: 700; font-size: .9rem; color: var(--navy); display: block; margin-bottom: 6px; }
.formular input, .formular select, .formular textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.formular ::placeholder { color: #9aa6c2; opacity: 1; }
.formular select:invalid { color: #9aa6c2; }
.formular select option { color: var(--ink); }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; }
.formular .zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.formular .zustimmung input { width: auto; margin-top: 4px; }
.formular .honigtopf { position: absolute; left: -9999px; }
.hinweis-klein { font-size: .85rem; color: var(--muted); }

/* Footer */
.fuss { background: var(--navy-900); color: #aebbe0; padding: 56px 0 40px; font-size: .86rem; }
.fuss-oben { padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.fuss-raster { display: grid; grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); gap: 32px 28px; align-items: start; }
.fuss-logo { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-family: var(--disp); font-weight: 800; font-size: 1rem; line-height: 1.5; }
.fuss-logo img { height: 36px; width: auto; margin-top: -6px; }
.fuss-tagline { color: var(--blue-300); margin: 12px 0 18px; font-size: .88rem; max-width: 260px; }
.fuss-titel { font-family: var(--disp); font-weight: 800; font-size: .95rem; margin: 0 0 12px; }
.fuss-titel a { color: #fff; }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fuss-spalte li a { color: #aebbe0; font-size: .84rem; line-height: 1.35; display: inline-block; }
.fuss-spalte li a:hover { color: #fff; }
.fuss .risk { max-width: 860px; margin: 0 auto 26px; text-align: center; background: rgba(226, 58, 78, .1); border: 1px solid rgba(226, 58, 78, .3); border-radius: 12px; padding: 18px 22px; color: #d8e0f5; }
.fuss .risk b { color: #ff8d9b; }
.fuss-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .06); font-family: var(--disp); font-weight: 600; }
.fuss a { color: #dbe6ff; }
.fuss a:hover { color: #fff; }
.fuss-copy { text-align: center; color: var(--blue-300); margin: 0; }
.fuss-copy a { color: var(--blue-300); }
@media (max-width: 1000px) { .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Social-Icons (Footer hell auf Navy, Variante dunkel auf Weiß) */
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.social a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.social-dunkel a { background: var(--navy); }
.social-dunkel a:hover { background: var(--red); }

/* Autorenbox (unter Beiträgen und auf Über uns) */
.autorbox { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; box-shadow: var(--schatten); margin: 0 0 8px; }
.ab-foto img { width: 100%; height: auto; border-radius: 16px; display: block; margin: 0; }
.ab-name { font-family: var(--disp); font-weight: 800; font-size: 1.35rem; color: var(--navy); margin: 0 0 10px; }
.ab-zeilen { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .95rem; }
.prose .ab-zeilen li::marker { content: ""; }
.beitrag-autor { padding-bottom: 40px; }
.prose .autorbox { margin: 8px 0 28px; }
@media (max-width: 640px) { .autorbox { grid-template-columns: 1fr; padding: 24px; } .ab-foto { max-width: 220px; } }

/* Zwei-Klick-Embeds und Consent-Farben */
div[data-service] { margin: 20px 0; border-radius: 12px; overflow: hidden; }
#cc-main { --cc-font-family: var(--body); --cc-btn-primary-bg: var(--red); --cc-btn-primary-border-color: var(--red); --cc-btn-primary-hover-bg: var(--red-700); --cc-btn-primary-hover-border-color: var(--red-700); --cc-primary-color: var(--navy); --cc-btn-border-radius: 10px; --cc-modal-border-radius: 14px; }

/* Importierte Inhaltsboxen (ehemalige Elementor-Vorlagen: Vorteile/Nachteile, CTA, Broker) */
/* MyTradingHelper Tipp: helle Karte mit Birnenlogo in Navy-Kachel */
.prose .tipp { display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px; margin: 28px 0; background: linear-gradient(135deg, var(--tint) 0%, #fff 55%); border: 1px solid #d5e0f7; border-radius: 16px; box-shadow: var(--schatten); }
.prose .tipp-ic { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--blue-500)); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(31, 53, 113, .25); }
.prose .tipp-ic img { height: 34px; width: auto; margin: 0; border-radius: 0; display: block; }
.prose .tipp-text { min-width: 0; }
.prose .tipp-label { margin: 0 0 6px; font-family: var(--disp); font-weight: 800; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.prose .tipp-text p { margin: 0; font-size: .98rem; line-height: 1.6; }
.prose .tipp a { font-weight: 700; }
@media (max-width: 560px) { .prose .tipp { padding: 18px; gap: 14px; } .prose .tipp-ic { width: 44px; height: 44px; border-radius: 12px; } .prose .tipp-ic img { height: 28px; } }
/* Newsletter-CTA im Beitrag: Karte mit Mail-Vorschau, Hinweistext einklappbar */
.prose .nl-cta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px 28px; margin: 30px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--schatten); }
.prose .nl-cta-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.prose .nl-cta-titel { margin: 0; font-family: var(--disp); font-weight: 800; font-size: 1.25rem; color: var(--navy); }
.prose .nl-cta ul.haken { margin: 0; }
.prose .nl-cta ul.haken li { font-size: .95rem; margin: 0 0 8px; }
.prose .nl-cta ul.haken li:last-child { margin-bottom: 0; }
.prose .nl-cta-text p { margin: 0; }
.prose .nl-cta .btn { font-size: .92rem; padding: 12px 22px; text-decoration: none; }
.prose .nl-cta .nl-vorschau { box-shadow: 0 10px 24px rgba(26, 35, 66, .08); }
.prose .nl-cta .nl-zeile { border-color: var(--line); }
.prose .nl-cta .nl-zeile b { color: var(--navy); }
.prose .nl-cta .nl-zeile span { color: var(--muted); }
.prose .nl-hinweis { grid-column: 1 / -1; font-size: .78rem; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.prose .nl-hinweis summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.prose .nl-hinweis p { margin: 8px 0 0; font-size: inherit; }
@media (max-width: 700px) { .prose .nl-cta { grid-template-columns: 1fr; padding: 22px 20px; } }
/* Faktenbox: Navy-Kopf mit Birnenlogo und Zähler, Fakten zweispaltig mit roten Rauten (keine Checkliste) */
.prose .fakten { margin: 30px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--schatten); overflow: hidden; }
.prose .fakten h2.fk-kopf { display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 22px 13px 54px; background: var(--navy) url(/assets/img/logo.png) 20px center / auto 28px no-repeat; color: #fff; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; line-height: 1.3; }
.prose .fakten .fk-zahl { margin-left: auto; font-family: var(--body); font-weight: 500; font-size: .76rem; letter-spacing: 0; text-transform: none; color: #aebbe0; white-space: nowrap; }
.prose .fakten ul.fk-liste { list-style: none; margin: 0; padding: 20px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; background: var(--paper); }
.prose .fakten ul.fk-liste li { position: relative; margin: 0; padding-left: 24px; font-size: .95rem; line-height: 1.55; }
.prose .fakten ul.fk-liste li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 10px; height: 10px; background: var(--red); border-radius: 3px; transform: rotate(45deg); }
@media (max-width: 640px) { .prose .fakten ul.fk-liste { grid-template-columns: 1fr; padding: 18px; } .prose .fakten h2.fk-kopf { font-size: .8rem; padding-right: 16px; } }
/* CTA-Leiste: fixierte Leiste am unteren Rand, erscheint beim Scrollen (Frontmatter ctaLeiste), nie über dem Cookie-Banner */
.cta-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(15, 31, 77, .96); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -10px 30px rgba(15, 31, 77, .25); transform: translateY(110%); transition: transform .25s ease; padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.cta-leiste.sichtbar { transform: translateY(0); }
.cta-leiste .wrap { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cta-leiste .btn { font-size: .92rem; padding: 12px 22px; text-decoration: none; }
.cta-leiste .btn-rahmen { border-color: rgba(255, 255, 255, .7); }
.cta-leiste .btn-rahmen:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
body.mit-cta-leiste { padding-bottom: 72px; }
@media (max-width: 600px) { .cta-leiste .wrap { gap: 8px; } .cta-leiste .btn { flex: 1 1 0; font-size: .82rem; padding: 12px 10px; } }
/* Sprung-Button: groß und mittig, springt zu einem Ziel auf derselben Seite */
.prose .sprung { text-align: center; margin: 34px 0; }
.prose .sprung .btn-gross { font-size: 1.15rem; padding: 19px 40px; text-decoration: none; }
.prose .brokertabelle[id] { scroll-margin-top: 100px; }
.prose h2[id], .prose h3[id], .prose h4[id] { scroll-margin-top: 96px; }
@media (max-width: 1099px) { .prose h2[id], .prose h3[id], .prose h4[id] { scroll-margin-top: 134px; } }
@media (max-width: 600px) { .prose .sprung .btn-gross { display: block; font-size: 1.02rem; padding: 17px 20px; } }
.prose .box { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: var(--schatten); margin: 28px 0; }
.prose .box-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; }
.prose .box-spalte { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.prose .box p { margin: 0 0 10px; font-size: .95rem; }
.prose .box p:last-child { margin-bottom: 0; }
.prose .box-titel { font-family: var(--disp); font-weight: 800; color: var(--navy); font-size: 1.15rem; margin: 0 0 8px; }
.prose .box img { max-height: 90px; width: auto; display: block; margin: 0 auto 6px; }
.prose .box .btn { font-size: .92rem; padding: 12px 22px; text-decoration: none; }
.prose ul.haken { list-style: none; padding: 0; margin: 0 0 10px; }
.prose ul.haken li { position: relative; padding-left: 26px; margin: 0 0 6px; font-size: .95rem; }
.prose ul.haken li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
.prose .box .btn + p, .prose .box p:has(.btn) + p { font-size: .8rem; color: var(--muted); }

/* Hub-Seiten, Angebote, Kontakt, Galerie, Embeds */
.hub-anzahl { font-family: var(--disp); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-300); margin: 8px 0 0; }
.abschnitt-hub { padding: 8px 0 72px; }
.card-bildwrap { position: relative; margin: -26px -24px 10px; }
.card-bildwrap .card-bild { border-radius: 14px 14px 0 0; margin: 0; }
.card-bildwrap .badge { position: absolute; top: 12px; right: 12px; }
.card-beitrag { overflow: hidden; }
.kat-broker .card-bild { object-fit: contain; background: #fff; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.card-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.angebote .angebot { gap: 10px; }
.angebot-aktionen { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; align-items: flex-start; }
.angebot .btn { font-size: .92rem; padding: 12px 22px; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.kontakt-text { padding-top: 0; padding-bottom: 0; }
.kontakt-formular { padding: 28px; }
.kontakt-formular:hover { transform: none; }
.feld-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .kontakt-raster { grid-template-columns: 1fr; } .feld-zeile { grid-template-columns: 1fr; } }
.prose .box-kompakt { padding: 16px 20px; margin: 18px 0; }
.prose .box-kompakt img { max-height: 110px; }
.prose .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 20px 0 28px; }
.prose .galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin: 0; display: block; }
.prose .galerie a { display: block; }
.prose .embed { margin: 20px 0; border-radius: 12px; overflow: hidden; background: var(--navy-900); aspect-ratio: 16 / 9; }
.prose .embed[data-service="spotify"] { aspect-ratio: auto; min-height: 232px; }
.prose ol li::marker { color: var(--red); font-weight: 700; }
.prose h3 { font-size: 1.15rem; }

/* Symbole in Aufzählungen (data-ic aus der alten Seite übernommen) */
.prose ul.haken li[data-ic] { padding-left: 30px; }
.prose ul.haken li[data-ic]::before { background-color: transparent; border-radius: 0; width: 20px; height: 20px; top: 3px; background-size: 20px; background-repeat: no-repeat; background-position: center; }
.prose ul.haken li[data-ic="lizenz"]::before, .prose .kf-kachel[data-ic="lizenz"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="schloss"]::before, .prose .kf-kachel[data-ic="schloss"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="hebel"]::before, .prose .kf-kachel[data-ic="hebel"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="copy"]::before, .prose .kf-kachel[data-ic="copy"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 5a3.5 3.5 0 0 1 0 7M21.5 20a6.5 6.5 0 0 0-4.5-6.2'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="statistik"]::before, .prose .kf-kachel[data-ic="statistik"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10M11 20V4M17 20v-7M2 20h20'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="gebuehren"]::before, .prose .kf-kachel[data-ic="gebuehren"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6'/%3E%3Cpath d='M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="plattform"]::before, .prose .kf-kachel[data-ic="plattform"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="assets"]::before, .prose .kf-kachel[data-ic="assets"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='12' width='4' height='8'/%3E%3Crect x='10' y='7' width='4' height='13'/%3E%3Crect x='17' y='3' width='4' height='17'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="signale"]::before, .prose .kf-kachel[data-ic="signale"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l2 2H4z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="chart"]::before, .prose .kf-kachel[data-ic="chart"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 3 5-7 4 4'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="konten"]::before, .prose .kf-kachel[data-ic="konten"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="spread"]::before, .prose .kf-kachel[data-ic="spread"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="tools"]::before, .prose .kf-kachel[data-ic="tools"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="lupe"]::before, .prose .kf-kachel[data-ic="lupe"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="plus"]::before, .prose .kf-kachel[data-ic="plus"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231fbf75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5M8 11h6M11 8v6'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="minus"]::before, .prose .kf-kachel[data-ic="minus"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e23a4e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5M8 11h6'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="punkt"]::before, .prose .kf-kachel[data-ic="punkt"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f3571'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }

/* Brokerbox: Logo | Regulierung | Qualitäten | CTA (breiter als der Lesetext) */
.prose .brokerbox, .prose .brokertabelle, .prose .procon, .prose .cta-session { width: 100%; margin: 30px 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--schatten); font-size: .88rem; line-height: 1.45; }
.prose .brokerbox { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) 160px; gap: 14px 18px; align-items: start; padding: 18px 20px; }
.prose .bb-logo, .prose .bb-cta { align-self: center; }
.prose .brokerbox > .bb-risiko { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; }
.prose .brokerbox p { margin: 0; font-size: inherit; }
.prose .bb-logo img { max-height: 64px; max-width: 100%; width: auto; display: block; margin: 0 auto; border-radius: 0; }
.prose .bb-titel { font-family: var(--disp); font-weight: 800; color: var(--navy); font-size: .98rem; margin: 0 0 8px; }
.prose .brokerbox ul.haken, .prose .brokertabelle ul.haken { margin: 0; }
.prose .brokerbox ul.haken li, .prose .brokertabelle ul.haken li { font-size: inherit; margin: 0 0 7px; }
.prose .brokerbox ul.haken li:last-child, .prose .brokertabelle ul.haken li:last-child { margin-bottom: 0; }
.prose .bb-cta, .prose .bt-cta { text-align: center; }
.prose .bb-cta .btn, .prose .bt-cta .btn { display: block; font-size: .9rem; padding: 12px 18px; text-decoration: none; }
.prose .bb-risiko { font-size: .72rem; line-height: 1.4; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 900px) { .prose .brokerbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .prose .bb-logo, .prose .bb-cta { grid-column: 1 / -1; } .prose .bb-cta .btn { display: inline-block; min-width: 220px; } .prose .brokerbox > .bb-risiko { text-align: center; } }
@media (max-width: 560px) { .prose .brokerbox { grid-template-columns: 1fr; padding: 18px; } }

/* Broker-Vergleichstabelle: Kopfzeile Navy, Zeilen abwechselnd */
.prose .brokertabelle { overflow: hidden; }
.prose .bt-kopf, .prose .bt-zeile { display: grid; grid-template-columns: 224px minmax(0, 1fr) 196px; gap: 24px; padding: 20px 24px; align-items: center; }
.prose .bt-kopf { background: var(--navy); color: #fff; font-family: var(--disp); font-weight: 800; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 14px 24px; }
.prose .bt-zeile { border-top: 1px solid var(--line); }
.prose .bt-zeile:nth-child(odd) { background: var(--paper); }
.prose .bt-broker { text-align: center; }
.prose .bt-broker p { margin: 0 0 8px; font-size: inherit; }
.prose .bt-broker img { max-height: 76px; max-width: 170px; width: auto; display: block; margin: 0 auto 10px; border-radius: 0; }
.prose .bt-broker em, .prose .bt-broker u { font-style: normal; text-decoration: none; }
.prose .bt-cta p { margin: 0; }
@media (max-width: 760px) { .prose .bt-kopf { display: none; } .prose .bt-zeile { grid-template-columns: 1fr; gap: 16px; } .prose .bt-cta .btn { display: inline-block; min-width: 220px; } }

/* Vor-/Nachteile: eine Karte, Navy-Kopfzeile "<Titel> unter der Lupe", getönte Flächen (Variante 4) */
.prose .procon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; margin: 30px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--schatten); overflow: hidden; }
.prose .procon::before { content: attr(data-titel) " unter der Lupe"; grid-column: 1 / -1; margin: -14px -14px 0; padding: 13px 22px 13px 54px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/svg%3E") 22px center / 22px no-repeat; color: #fff; font-family: var(--disp); font-weight: 800; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
.prose .pc-pro, .prose .pc-kontra { position: relative; padding: 20px 20px 22px; border-radius: 12px; overflow: hidden; }
.prose .pc-pro { background: #eefaf4; }
.prose .pc-kontra { background: #fdeef0; }
.prose .pc-pro::after, .prose .pc-kontra::after { content: ""; position: absolute; right: -18px; top: -18px; width: 120px; height: 120px; opacity: .16; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231fbf75' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5M8 11h6M11 8v6'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose .pc-kontra::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e23a4e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5M8 11h6'/%3E%3C/svg%3E"); }
.prose .pc-titel { position: relative; font-family: var(--disp); font-weight: 800; font-size: 1.1rem; color: var(--navy); line-height: 1.2; margin: 0 0 14px; padding: 0 0 0 14px; border-left: 5px solid var(--green); }
.prose .pc-kontra .pc-titel { border-left-color: var(--red); }
.prose .procon ul.haken { margin: 0; position: relative; }
.prose .procon ul.haken li { margin: 0 0 10px; font-size: .95rem; padding-left: 38px; }
.prose .procon ul.haken li:last-child { margin-bottom: 0; }
.prose .procon ul.haken li[data-ic]::before { width: 26px; height: 26px; border-radius: 50%; background-color: #fff; background-size: 16px; top: 0; }
@media (max-width: 640px) { .prose .procon { grid-template-columns: 1fr; } .prose .procon::before { font-size: .82rem; } }

/* CTA-Box One-on-One Session (Navy-Karte, Text links, Kasten mit drei Punkten rechts) */
.prose .cta-session { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; padding: 30px 34px; margin: 34px 0; border-radius: 16px; background: var(--hero-verlauf); color: #fff; box-shadow: 0 14px 34px rgba(15, 31, 77, .25); border: 0; }
.prose .cta-session p { color: #d8e0f5; font-size: .95rem; margin: 0 0 10px; }
.prose .cta-session p:last-child { margin-bottom: 0; }
.prose .cs-eyebrow { font-family: var(--disp); letter-spacing: .3em; font-size: .7rem; font-weight: 700; color: var(--blue-300) !important; text-transform: uppercase; margin-bottom: 8px !important; }
.prose .cs-titel { font-family: var(--disp); font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: #fff !important; margin-bottom: 14px !important; }
.prose .cs-titel em { font-style: normal; color: var(--red-hell); }
.prose .cs-box { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 22px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.prose .cs-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.prose .cs-punkte li { position: relative; padding-left: 30px; font-size: .95rem; color: #fff; line-height: 1.4; }
.prose .cs-punkte li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.prose .cs-box .btn { display: block; text-align: center; font-size: .95rem; padding: 14px 20px; }
@media (max-width: 760px) { .prose .cta-session { grid-template-columns: 1fr; padding: 24px 22px; } }

/* Inhaltsverzeichnis in Beiträgen (Seitenleiste auf Desktop, aufklappbar auf schmalen Bildschirmen) */
.beitrag-raster { padding-top: 40px; padding-bottom: 56px; }
.beitrag-raster .prose { padding-top: 0; padding-bottom: 0; }
.toc summary { list-style: none; cursor: default; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.toc summary::-webkit-details-marker { display: none; }
.toc-label { font-family: var(--disp); letter-spacing: .24em; font-size: .68rem; font-weight: 700; color: var(--blue-300); text-transform: uppercase; }
.toc-stand { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.toc-balken { height: 3px; border-radius: 2px; background: var(--line); margin: 8px 0 12px; overflow: hidden; }
.toc-balken span { display: block; height: 100%; width: 0; background: var(--red); transition: width .25s; }
.toc-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.toc-liste a { display: block; padding: 5px 0 5px 12px; border-left: 3px solid transparent; font-size: .82rem; line-height: 1.35; color: var(--muted); font-weight: 500; text-decoration: none; }
.toc-liste .toc-h3 a { padding-left: 24px; font-size: .78rem; }
.toc-liste a:hover { color: var(--navy); }
.toc-liste a[aria-current="true"] { color: var(--navy); font-weight: 700; border-left-color: var(--red); }
@media (min-width: 1100px) {
  .beitrag-raster.mit-toc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .beitrag-raster.mit-toc .prose { max-width: none; }
  .toc-spalte { position: sticky; top: 92px; align-self: start; }
  .toc-liste { max-height: calc(100vh - 220px); overflow-y: auto; scrollbar-width: thin; }
  .beitrag-raster.mit-toc .prose .brokerbox { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 170px; gap: 14px 18px; padding: 18px 20px; }
  .beitrag-raster.mit-toc .prose .bt-kopf, .beitrag-raster.mit-toc .prose .bt-zeile { grid-template-columns: 200px minmax(0, 1fr) 176px; gap: 18px; }
}
@media (max-width: 1099px) {
  .toc-spalte { margin-bottom: 28px; max-width: 760px; margin-left: auto; margin-right: auto; }
  .toc { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
  .toc summary { cursor: pointer; align-items: center; }
  .toc-label { font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--navy); font-weight: 800; padding-left: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h13'/%3E%3C/svg%3E") left center/18px no-repeat; }
  .toc-balken { margin: 10px 0 6px; }
  .toc-liste { margin-top: 6px; }
  .toc-liste a { padding-top: 7px; padding-bottom: 7px; font-size: .9rem; }
  .toc:not([open]) .toc-balken { margin-bottom: 0; }
  /* Klebende Inhaltsleiste: bleibt beim Scrollen unter der Kopfzeile, schrumpft zur schmalen Zeile mit Fortschrittsstrich */
  .toc-spalte { position: sticky; top: 76px; z-index: 30; }
  .toc { position: relative; transition: border-radius .15s, box-shadow .15s; }
  .toc summary::after { content: ""; width: 10px; height: 10px; margin-left: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg) translateY(-3px); flex-shrink: 0; transition: transform .15s; }
  .toc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .toc-stand { margin-left: auto; }
  .toc-spalte.geklebt .toc { border-radius: 0 0 12px 12px; box-shadow: 0 10px 24px rgba(26, 35, 66, .14); padding: 10px 16px; }
  .toc-spalte.geklebt .toc:not([open]) .toc-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; margin: 0; border-radius: 0; background: transparent; }
  .toc-spalte.geklebt .toc[open] .toc-liste { max-height: 60vh; overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
  @media (max-width: 800px) { .toc-spalte.geklebt { max-width: none; margin-left: -24px; margin-right: -24px; } .toc-spalte.geklebt .toc { border-left: 0; border-right: 0; border-radius: 0; padding: 10px 24px; } }
}

/* Link zum Broker-Bericht als Hinweiskarte (Punkt 10, Vorschlag 3) */
.prose .bericht-link, .bericht-link { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; max-width: 360px; margin: 14px 0; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--navy); text-decoration: none; text-align: left; transition: transform .15s, box-shadow .15s, border-color .15s; }
.prose .bericht-link:hover { color: var(--navy); border-color: var(--blue-300); transform: translateY(-2px); box-shadow: var(--schatten); }
.bericht-link::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E") center/20px no-repeat; }
.bericht-link::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e23a4e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat; }
.bericht-link b { grid-column: 2; grid-row: 1; align-self: end; font-family: var(--disp); font-weight: 800; font-size: .86rem; line-height: 1.2; }
.bericht-link small { grid-column: 2; grid-row: 2; align-self: start; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.prose .bt-broker .bericht-link { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; margin: 8px auto 0; max-width: 224px; padding: 8px 10px; }
.prose .bt-broker .bericht-link::after { display: none; }
.prose .bt-broker .bericht-link::before { width: 28px; height: 28px; background-size: 16px; }
.prose .bt-broker .bericht-link b { font-size: .76rem; }
.prose .bt-broker .bericht-link small { font-size: .66rem; }
.prose ul.haken li[data-ic="rakete"]::before, .prose .kf-kachel[data-ic="rakete"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l-1 5 5-1 9-9a3 3 0 0 0-4-4z'/%3E%3Cpath d='M14 6l4 4M5 15l4 4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="haus"]::before, .prose .kf-kachel[data-ic="haus"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="liste"]::before, .prose .kf-kachel[data-ic="liste"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="smartphone"]::before, .prose .kf-kachel[data-ic="smartphone"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="karte"]::before, .prose .kf-kachel[data-ic="karte"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="einzahlung"]::before, .prose .kf-kachel[data-ic="einzahlung"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M6 9l6 6 6-6M4 21h16'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="auszahlung"]::before, .prose .kf-kachel[data-ic="auszahlung"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M6 9l6-6 6 6M4 21h16'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="demo"]::before, .prose .kf-kachel[data-ic="demo"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 14l2 2 4-4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="schild"]::before, .prose .kf-kachel[data-ic="schild"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="prozent"]::before, .prose .kf-kachel[data-ic="prozent"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="support"]::before, .prose .kf-kachel[data-ic="support"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0'/%3E%3Cpath d='M4 13v5a2 2 0 0 0 2 2h2v-7H4zM20 13v5a2 2 0 0 1-2 2h-2v-7h4'/%3E%3C/svg%3E"); }
.prose ul.haken li[data-ic="geschenk"]::before, .prose .kf-kachel[data-ic="geschenk"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4'/%3E%3Cpath d='M5 12v9h14v-9M12 8v13M12 8c-2-4-6-4-6-1s4 1 6 1zm0 0c2-4 6-4 6-1s-4 1-6 1z'/%3E%3C/svg%3E"); }

/* Key Facts der Broker-Artikel: Kachel-Raster (Vorschlag 2) */
.prose .keyfacts { display: flex; flex-direction: column; gap: 16px; padding: 24px 26px 22px; margin: 34px 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--schatten); }
.prose .kf-titel { font-family: var(--disp); font-weight: 800; font-size: 1.35rem; line-height: 1.15; color: var(--navy); margin: 0; padding-left: 14px; border-left: 5px solid var(--red); }
.prose .kf-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prose .kf-kachel { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px 12px 60px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.prose .kf-kachel::before { content: ""; position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 10px; background-color: var(--tint); background-size: 18px; background-repeat: no-repeat; background-position: center; }
.prose .kf-label { font-family: var(--disp); letter-spacing: .12em; font-size: .66rem; font-weight: 700; color: var(--blue-300); text-transform: uppercase; }
.prose .kf-wert { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.prose .kf-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.prose .kf-fuss .bb-risiko { margin: 0; max-width: 440px; }
.prose .kf-fuss .btn { font-size: .95rem; padding: 13px 26px; text-decoration: none; }
@media (max-width: 640px) { .prose .kf-raster { grid-template-columns: 1fr; } .prose .keyfacts { padding: 20px 18px; } .prose .kf-fuss { flex-direction: column-reverse; align-items: stretch; text-align: center; } .prose .kf-fuss .btn { display: block; } }

/* Key Facts, Variante Kompaktliste (Vorschlag 3): eine Zeile je Fakt, Symbol im Kreis, Wert fett in Navy */
.prose .kf-liste .kf-titel { border-left: 0; padding-left: 0; }
.prose .kf-liste .kf-titel::before { content: "Key Facts"; display: block; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--blue-300); margin-bottom: 4px; }
.prose .kf-liste .kf-raster { grid-template-columns: 1fr; gap: 0; }
.prose .kf-liste .kf-kachel { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 10px 0 10px 50px; border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.prose .kf-liste .kf-kachel:last-child { border-bottom: 0; }
.prose .kf-liste .kf-kachel::before { left: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background-size: 17px; }
.prose .kf-liste .kf-label { letter-spacing: 0; text-transform: none; font-family: var(--body); font-weight: 500; font-size: .9rem; color: var(--muted); }
.prose .kf-liste .kf-wert { font-family: var(--disp); font-weight: 700; font-size: .9rem; color: var(--navy); }
.prose .kf-liste .kf-fuss { justify-content: flex-end; padding-top: 12px; }
@media (max-width: 640px) { .prose .kf-liste .kf-kachel { grid-template-columns: 1fr; gap: 2px; } }

/* TradingView-Gutschrift: helle Karte mit Badge, Häkchen-Kasten und 15$-Wasserzeichen */
.prose .gutschrift { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; padding: 28px 32px; margin: 34px 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--schatten); overflow: hidden; }
.prose .gutschrift::before { content: "15$"; position: absolute; right: 250px; top: -34px; font-family: var(--disp); font-weight: 900; font-size: 190px; line-height: 1; letter-spacing: -.04em; color: var(--tint); opacity: .7; pointer-events: none; }
.prose .gs-badge { position: absolute; top: 18px; right: -34px; transform: rotate(35deg); padding: 6px 48px; background: var(--red); color: #fff; font-family: var(--disp); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; z-index: 1; }
.prose .gs-text, .prose .gs-box { position: relative; }
.prose .gs-text p { margin: 0 0 10px; font-size: .95rem; }
.prose .gs-text p:last-child { margin-bottom: 0; }
.prose .gs-eyebrow { font-family: var(--disp); letter-spacing: .3em; font-size: .7rem; font-weight: 700; color: var(--blue-300); text-transform: uppercase; margin-bottom: 8px !important; }
.prose .gs-titel { padding-left: 14px; border-left: 5px solid var(--red); font-family: var(--disp); font-weight: 800; font-size: 1.35rem; line-height: 1.15; color: var(--navy); margin-bottom: 12px !important; }
.prose .gs-box { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.prose .gs-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prose .gs-punkte li { position: relative; padding-left: 28px; font-size: .88rem; line-height: 1.4; }
.prose .gs-punkte li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.prose .gs-box .btn { display: block; text-align: center; font-size: .9rem; padding: 13px 18px; text-decoration: none; }
@media (max-width: 760px) { .prose .gutschrift { grid-template-columns: 1fr; padding: 24px 22px; } .prose .gutschrift::before { right: -20px; top: auto; bottom: 150px; font-size: 140px; } .prose .gs-badge { font-size: .64rem; right: -40px; top: 14px; } }

/* Häkchen-Listen (Angebotsbänder, Landingpages) */
.haken-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.haken-liste li { position: relative; padding-left: 30px; font-size: .95rem; line-height: 1.45; }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.haken-liste.hell li { color: #fff; }
.haken-liste + p { margin-top: 20px !important; }
.btn-rahmen-navy { background: transparent; color: var(--navy); border: 2px solid var(--navy); box-shadow: none; padding: 13px 26px; }
.btn-rahmen-navy:hover { color: var(--navy); background: var(--tint); box-shadow: none; }

/* Für Dich: Angebotsbänder im Wechsel */
.angebot-band { padding: 56px 0; background: var(--card); }
.angebot-band.band-hell { background: var(--paper); }
.band-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.band-umgekehrt .band-text { order: 2; }
.band-text { display: flex; flex-direction: column; gap: 14px; }
.band-text .badge, .band-text .pill { align-self: flex-start; }
.band-text h2 { margin: 0; }
.band-text p { margin: 0; color: var(--ink); }
.band-aktionen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.band-bild { display: flex; justify-content: center; }
.band-bild img { width: 100%; max-width: 440px; border-radius: 16px; display: block; }
@media (max-width: 800px) { .angebot-band { padding: 40px 0; } .band-raster { grid-template-columns: 1fr; gap: 24px; } .band-umgekehrt .band-text { order: 0; } .band-bild { order: -1; } .band-bild img { max-width: 320px; } }

/* Landingpages (Session, Newsletter): kontrastreich, dunkle und helle Abschnitte im Wechsel */
.landing-hero { position: relative; overflow: hidden; background: var(--hero-verlauf); color: #fff; padding: 64px 0 60px; }
.landing-hero::before { content: ""; position: absolute; right: -60px; top: -80px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 102, .22) 0%, rgba(255, 214, 102, 0) 70%); pointer-events: none; }
.landing-hero-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; align-items: center; }
.landing-hero-text { display: flex; flex-direction: column; gap: 16px; }
.landing-hero .eyebrow { margin: 0; }
.landing-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.06; margin: 0; }
.landing-hero h1 em { font-style: normal; color: var(--red-hell); }
.landing-sub { font-size: 1.1rem; color: #d8e0f5; margin: 0; max-width: 560px; }
.landing-aktionen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.landing-hero-bild { display: flex; justify-content: center; }
.landing-hero-bild img { width: 100%; max-width: 380px; height: auto; border-radius: 12px; padding: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.landing-abschnitt { padding: 56px 0; }
.landing-abschnitt-eng { padding-top: 0; }
.landing-abschnitt .sec-title { margin-bottom: 20px; }
.landing-abschnitt .lead { margin-bottom: 24px; }
.landing-prose { max-width: none; padding: 0; }
.landing-prose .procon { width: 100%; left: auto; transform: none; margin: 0 0 28px; }
.landing-text { max-width: 820px; }
.landing-text p { margin: 0 0 12px; }
.landing-dunkel { background: var(--navy-900); color: #fff; }
.landing-dunkel h3 { color: #fff; margin: 0 0 10px; }
.landing-dunkel p { color: #d8e0f5; }
.landing-zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 36px; align-items: center; }
.landing-zweispaltig p { margin: 0 0 12px; font-size: .97rem; }
.landing-bild-klein { width: 100%; max-width: 360px; border-radius: 12px; margin-top: 18px; display: block; }
.schritte { display: flex; gap: 12px; align-items: stretch; }
.schritt { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 18px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.schritt:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); box-shadow: 0 16px 38px rgba(0, 0, 0, .25); }
.schritt-symbol { width: 68px; height: 68px; border-radius: 50%; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.schritt-symbol img { width: 46px; height: 46px; object-fit: contain; }
.schritt-nr { font-family: var(--disp); letter-spacing: .2em; font-size: .7rem; font-weight: 700; color: var(--red-hell); text-transform: uppercase; margin: 4px 0 0; }
.schritt h3 { font-size: 1.15rem; margin: 0; }
.schritt p { font-size: .9rem; margin: 0; line-height: 1.5; }
.schritt-pfeil { display: flex; align-items: center; width: 26px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5d70' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat; }
.themen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.thema { gap: 10px; }
.thema:hover { transform: translateY(-4px); border-color: var(--blue-300); box-shadow: 0 16px 38px rgba(26, 35, 66, .14); }
.thema h3 { font-size: 1.05rem; padding-left: 12px; border-left: 4px solid var(--red); }
.thema ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ink); }
.thema ul li::marker { color: var(--red); }
.cta-foto { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 30px 34px; border-radius: 16px; background: var(--hero-verlauf); color: #fff; box-shadow: 0 14px 34px rgba(15, 31, 77, .25); }
.cta-foto-bild { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); }
.cta-foto-text { display: flex; flex-direction: column; gap: 8px; }
.cta-foto-text .eyebrow { margin: 0; }
.cta-foto-text h2 { color: #fff; font-size: 1.5rem; margin: 0; }
.cta-schritte { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: .92rem; color: #d8e0f5; }
.cta-schritte li::marker { color: var(--red-hell); font-weight: 700; }
.hinweis-klein.hell { color: var(--blue-300); margin: 4px 0 0; }
.cta-foto-aktion .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .landing-hero-raster { grid-template-columns: 1fr; gap: 24px; }
  .landing-hero-bild img { max-width: 300px; }
  .landing-zweispaltig { grid-template-columns: 1fr; gap: 28px; }
  .schritte { flex-direction: column; }
  .schritt-pfeil { width: auto; height: 26px; transform: rotate(90deg); }
  .themen-raster { grid-template-columns: 1fr; }
  .cta-foto { grid-template-columns: 1fr; text-align: left; padding: 26px 22px; }
  .cta-foto-bild { width: 110px; height: 110px; }
  .cta-foto-aktion .btn { display: block; white-space: normal; }
}

/* Landingpage-Ergänzungen (Newsletter): Vorschau-Karte im Hero, Kennzahlen, rotes CTA-Band */
.nl-vorschau { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.nl-vorschau.hell { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.nl-vorschau.hell:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); box-shadow: 0 16px 38px rgba(0, 0, 0, .25); }
.nl-vorschau-kopf { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--blue-300); margin-bottom: 6px; }
.nl-vorschau-label { font-family: var(--disp); letter-spacing: .2em; font-size: .68rem; font-weight: 700; color: var(--red-hell); text-transform: uppercase; }
.nl-zeile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 32px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.nl-zeile:last-child { border-bottom: 0; }
.nl-zeile::before { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; background-size: 20px; background-repeat: no-repeat; background-position: center; }
.nl-zeile[data-ic="kalender"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5d70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.nl-zeile[data-ic="statistik"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5d70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10M11 20V4M17 20v-7M2 20h20'/%3E%3C/svg%3E"); }
.nl-zeile[data-ic="chart"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5d70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 3 5-7 4 4'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); }
.nl-zeile[data-ic="mail"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5d70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='12' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.nl-zeile b { font-family: var(--disp); font-weight: 700; font-size: .84rem; }
.nl-zeile span { font-size: .78rem; color: #d8e0f5; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: -30px; position: relative; z-index: 1; }
.kennzahl { padding: 18px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(26, 35, 66, .1); display: flex; flex-direction: column; gap: 2px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.kennzahl:hover { transform: translateY(-4px); border-color: var(--blue-300); box-shadow: 0 16px 38px rgba(26, 35, 66, .14); }
.kennzahl b { font-family: var(--disp); font-weight: 900; font-size: 1.6rem; color: var(--red); }
.kennzahl span { font-size: .84rem; color: var(--muted); }
.landing-zweispaltig-bild { grid-template-columns: minmax(0, 1fr) 320px; margin-top: 0; align-items: center; }
.landing-bildspalte img { width: 100%; border-radius: 14px; display: block; }
.schritte-hell .schritt { background: var(--card); border-color: var(--line); box-shadow: var(--schatten); }
.schritte-hell .schritt:hover { background: var(--card); border-color: var(--blue-300); box-shadow: 0 16px 38px rgba(26, 35, 66, .14); }
.schritte-hell .schritt h3 { color: var(--navy); }
.schritte-hell .schritt p { color: var(--muted); }
.schritte-hell .schritt-nr { color: var(--red); }
.landing-abschnitt .schritte + .hinweis-klein { margin: 22px 0 0; }
.cta-band { padding: 40px 0; background: var(--btn-verlauf); color: #fff; }
.cta-band-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta-band h2 { color: #fff; font-size: 1.6rem; margin: 0 0 6px; }
.cta-band p { margin: 0; color: #ffe1e5; }
.btn-weiss { background: #fff; color: var(--red-700); box-shadow: 0 12px 30px rgba(15, 31, 77, .25); }
.btn-weiss:hover { color: var(--red-700); }
@media (max-width: 900px) { .kennzahlen { grid-template-columns: 1fr; margin-top: 20px; } .landing-zweispaltig-bild { grid-template-columns: 1fr; } .landing-bildspalte img { max-width: 320px; } .cta-band-raster { grid-template-columns: 1fr; } }

/* Über uns: Auftritte als Bild-Text-Bänder, Galerien aufklappbar, Broker-Fächer */
.prose .auftritte { display: flex; flex-direction: column; gap: 36px; margin: 8px 0 40px; }
.prose .auftritt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; }
.prose .auftritt-umgekehrt .auftritt-medien { order: 2; }
.prose .auftritt-medien .embed { margin: 0; }
.prose .auftritt-text { display: flex; flex-direction: column; gap: 8px; }
.prose .auftritt-art { font-family: var(--disp); letter-spacing: .2em; font-size: .7rem; font-weight: 700; color: var(--red); text-transform: uppercase; margin: 0; }
.prose .auftritt-text h3 { margin: 0; font-size: 1.35rem; }
.prose .auftritt-text p { margin: 0; color: var(--muted); font-size: .95rem; }
.prose .auftritt-link { display: inline-block; margin-top: 6px; font-family: var(--disp); font-weight: 700; font-size: .9rem; text-decoration: none; }
.prose .auftritt-galerie { margin-top: 10px; }
.prose .auftritt-galerie summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--tint); color: var(--navy); font-family: var(--disp); font-weight: 700; font-size: .8rem; }
.prose .auftritt-galerie summary::-webkit-details-marker { display: none; }
.prose .auftritt-galerie summary::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3571' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px no-repeat; transition: transform .15s; }
.prose .auftritt-galerie[open] summary::before { transform: rotate(180deg); }
.prose .auftritt-galerie .galerie { margin: 14px 0 0; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
@media (max-width: 700px) { .prose .auftritt { grid-template-columns: 1fr; gap: 16px; } .prose .auftritt-umgekehrt .auftritt-medien { order: 0; } }
.prose a.partner-kachel { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--navy-900); overflow: hidden; text-decoration: none; color: #fff; }
.prose .partner-kachel .pk-foto { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; object-fit: cover; margin: 0; border-radius: 0; }
.prose .partner-kachel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-900) 36%, rgba(15, 31, 77, .55) 62%, rgba(15, 31, 77, 0) 100%); }
.prose .partner-kachel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(15, 31, 77, 0), rgba(15, 31, 77, .85)); }
.prose .partner-kachel .pk-inhalt { position: relative; z-index: 1; box-sizing: border-box; height: 100%; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.prose .partner-kachel .pk-logo { height: 26px; width: auto; align-self: flex-start; margin: 0; border-radius: 0; }
.prose .partner-kachel .pk-text { display: flex; flex-direction: column; gap: 6px; }
.prose .partner-kachel .pk-chip { align-self: flex-start; font-family: var(--disp); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--red); border-radius: 999px; padding: 5px 10px; }
.prose .partner-kachel .pk-titel { font-family: var(--disp); font-weight: 800; font-size: 1.25rem; line-height: 1.15; color: #fff; }
.prose .partner-kachel .pk-datum { font-size: .82rem; font-weight: 600; color: #dbe6ff; }
.prose a.partner-kachel:hover .pk-foto { transform: scale(1.03); }
.prose .partner-kachel .pk-foto { transition: transform .25s; }
@media (max-width: 700px) { .prose .partner-kachel .pk-inhalt { padding: 20px; } .prose .partner-kachel .pk-logo { height: 24px; } .prose .partner-kachel .pk-titel { font-size: 1.15rem; } }
.prose .broker-faecher { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--schatten); overflow: hidden; }
.prose .faecher-buehne { position: relative; height: 300px; background: var(--paper); }
.prose .faecher-karte { position: absolute; left: 50%; bottom: 20px; width: 140px; height: 180px; margin-left: -70px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(26, 35, 66, .14); transform-origin: 50% 130%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.prose a.faecher-karte { text-decoration: none; }
.prose .faecher-karte img { height: 30px; width: auto; max-width: 84px; object-fit: contain; margin: 0; border-radius: 0; }
.prose .faecher-karte span { font-family: var(--disp); letter-spacing: .16em; font-size: .6rem; font-weight: 700; color: var(--blue-300); text-transform: uppercase; }
.prose .faecher-karte:nth-child(1) { transform: translateX(-210px) rotate(-27deg); } .prose .faecher-karte:nth-child(2) { transform: translateX(-140px) rotate(-18deg); } .prose .faecher-karte:nth-child(3) { transform: translateX(-70px) rotate(-9deg); } .prose .faecher-karte:nth-child(4) { transform: translateX(0px) rotate(0deg); } .prose .faecher-karte:nth-child(5) { transform: translateX(70px) rotate(9deg); } .prose .faecher-karte:nth-child(6) { transform: translateX(140px) rotate(18deg); } .prose .faecher-karte:nth-child(7) { transform: translateX(210px) rotate(27deg); }
.prose .faecher-karte:hover { z-index: 2; box-shadow: 0 20px 40px rgba(26, 35, 66, .22); }
.prose .faecher-karte:nth-child(1):hover { transform: translateX(-210px) rotate(-27deg) translateY(-16px); } .prose .faecher-karte:nth-child(2):hover { transform: translateX(-140px) rotate(-18deg) translateY(-16px); } .prose .faecher-karte:nth-child(3):hover { transform: translateX(-70px) rotate(-9deg) translateY(-16px); } .prose .faecher-karte:nth-child(4):hover { transform: translateX(0px) rotate(0deg) translateY(-16px); } .prose .faecher-karte:nth-child(5):hover { transform: translateX(70px) rotate(9deg) translateY(-16px); } .prose .faecher-karte:nth-child(6):hover { transform: translateX(140px) rotate(18deg) translateY(-16px); } .prose .faecher-karte:nth-child(7):hover { transform: translateX(210px) rotate(27deg) translateY(-16px); }
.prose .faecher-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 28px 26px; }
.prose .faecher-text h3 { margin: 0 0 4px; font-size: 1.25rem; }
.prose .faecher-text p { margin: 0; color: var(--muted); font-size: .92rem; }
.prose .faecher-text .btn { text-decoration: none; white-space: nowrap; }
@media (max-width: 700px) { .prose .faecher-buehne { height: 240px; } .prose .faecher-karte { width: 110px; height: 140px; margin-left: -55px; } .prose .faecher-karte:nth-child(1) { transform: translateX(-90px) rotate(-30deg); } .prose .faecher-karte:nth-child(2) { transform: translateX(-60px) rotate(-20deg); } .prose .faecher-karte:nth-child(3) { transform: translateX(-30px) rotate(-10deg); } .prose .faecher-karte:nth-child(5) { transform: translateX(30px) rotate(10deg); } .prose .faecher-karte:nth-child(6) { transform: translateX(60px) rotate(20deg); } .prose .faecher-karte:nth-child(7) { transform: translateX(90px) rotate(30deg); } .prose .faecher-text { grid-template-columns: 1fr; } }