/*
Theme Name: Förderstelle Aktien V1.1
Theme URI: https://foerderstelle-deutschland.de
Author: Förderstelle Deutschland
Author URI: https://foerderstelle-deutschland.de
Description: Weiterentwicklung von Dimas Vorlage V1.0. Arbeitsstand, nicht mit dem eingefrorenen Original verwechseln. Stand 28.08.2026.
Version: 1.1.8
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: foerderstelle-aktien-v1-1
*/

:root{
  --fw-anthrazit: #1A1A1A;
  --fw-anthrazit-hell: #2E2E2E;
  --fw-orange: #F56600;
  --fw-orange-hell: #FCE4D2;
  --fw-weiss: #FFFFFF;
  --fw-stein: #E8EAE9;
  --fw-grau: #5C5C5C;
  --fw-grau-hell: #B8B8B8;
  --fw-gruen: #2F8F4E;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Source Serif 4', serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{ box-sizing: border-box; }
body{ margin: 0; background: var(--fw-weiss); color: var(--fw-anthrazit); font-family: var(--font-body); line-height: 1.6; }
a{ color: inherit; }
header{ display: flex; align-items: center; justify-content: space-between; padding: 22px 48px; border-bottom: 1px solid var(--fw-stein); }
.logo{ display: flex; align-items: center; gap: 10px; }
.logo img{ height: 28px; width: auto; display: block; }
.logo-text{ font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.logo-text .marke{ color: var(--fw-orange); }
.logo-text .sparte{ color: var(--fw-anthrazit); }
nav{ display: flex; gap: 28px; }
nav a{ font-family: var(--font-mono); font-size: 13px; text-decoration: none; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.04em; }
nav a:hover{ color: var(--fw-orange); }
.ticker{ display: flex; overflow-x: auto; border-bottom: 1px solid var(--fw-stein); background: var(--fw-weiss); }
.ticker-item{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-right: 1px solid var(--fw-stein); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; color: inherit; text-decoration: none; }
.ticker-item:hover{ background: var(--fw-stein); }
.zone{ padding: 2px 8px; border-radius: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid transparent; }
.zone.niedrig{ color: var(--fw-gruen); border-color: #C7DBCB; }
.zone.moderat{ color: var(--fw-anthrazit); border-color: var(--fw-stein); }
.zone.attraktiv{ color: var(--fw-orange); border-color: var(--fw-orange-hell); }
.zone.stark{ background: var(--fw-anthrazit); color: var(--fw-weiss); }
.hero{ padding: 64px 48px 40px; max-width: 1100px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.hero-text{ max-width: 480px; flex: 1 1 420px; }
.eyebrow{ font-family: var(--font-mono); font-size: 13px; color: var(--fw-orange); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; }
h1{ font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px; }
.hero p{ font-size: 16px; color: var(--fw-anthrazit); max-width: 480px; margin: 0 0 14px; }
.hero p.pro-line{ font-size: 14px; }
/* Launch 14.10.2026: Hinweis in der Textschrift wie der Absatz darüber, nicht in Mono. */
.hero-cta-hinweis{ font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--fw-anthrazit); margin-top: 12px; }
.hero p strong{ color: var(--fw-anthrazit); font-family: var(--font-display); font-weight: 600; }
.signup{ display: flex; max-width: 420px; border: 2px solid var(--fw-anthrazit); margin-top: 22px; }
.signup input{ flex: 1; border: none; padding: 14px 16px; font-family: var(--font-body); font-size: 15px; outline: none; }
.signup button{ background: var(--fw-anthrazit); color: var(--fw-weiss); border: none; font-family: var(--font-display); font-weight: 600; font-size: 14px; padding: 0 22px; cursor: pointer; white-space: nowrap; }
.signup button:hover{ background: var(--fw-orange); }
/* Hero-Vergleichskarte, ersetzt seit 22.09.2026 das Handy-Mockup mit der
   erfundenen Kursanimation. Bewusst schlicht gehalten, ohne Farben oder
   Effekte, die optische Gestaltung folgt erst, wenn Inhalt und Umschalter
   stehen. Umschalter läuft über eine versteckte Checkbox plus CSS, kein
   eigenes JavaScript, gleiches Prinzip wie das Ausklapp-Element bei den
   drei Depots auf der anderen Seite.
   Vierte Runde, 22.09.2026, nach Nicos Papierskizze: Der Rahmen mit den
   abgerundeten Ecken liegt jetzt auf der ganzen Karte, nicht mehr auf den
   beiden einzelnen Ansichten. Oben in der Karte sitzt ein Reiter-Kopf mit
   den zwei Namen, unten wechselt nur noch der Inhalt. Beide Reiter sind
   Label für dieselbe Checkbox, der jeweils aktive Reiter bekommt eine
   helle Fläche und pointer-events: none, damit ein Klick auf den bereits
   aktiven Reiter nichts auslöst, nur der andere Reiter schaltet um.
   Fünfte Runde, 22.09.2026: Der aktive Reiter ist jetzt dunkel gefüllt statt
   nur leicht eingefärbt, klarer erkennbar. Die drei kleinen Kurven stehen
   jetzt in einer Spalte statt in einer Reihe, breiter gezeichnet, mit
   Prozentzahl statt Multiplikator. Die ganze Karte ist etwas breiter.
   Sechste Runde, 22.09.2026: Die drei kleinen Themenkurven sind komplett raus,
   siehe Docblock in index.php. Die beiden Reiter sind nicht mehr gleich
   breit, Bestseller-Depot wiegt jetzt sichtbar mehr als S&P 500, nach Nicos
   Papierskizze. Der Wechsel zwischen den beiden Ansichten läuft jetzt über
   ein CSS-Grid mit beiden Karten in derselben Zelle, ein- und ausgeblendet
   per visibility statt per display, damit die Karte beim Umschalten nicht
   mehr in der Höhe springt, sondern sich immer nach der größeren der beiden
   Ansichten richtet. Die S&P-Kennzahlen stehen jetzt als Liste untereinander
   statt als drei Spalten nebeneinander. Neu dazu: eine dezente Fußzeile mit
   dem aktuellen Datum, nach Vorbild des Sternchen-Hinweises bei Motley Fool. */
.hero-vergleich{ flex: 0 0 auto; width: 100%; max-width: 420px; border: 1px solid var(--fw-stein); border-radius: 8px; overflow: hidden; }
.hero-umschalter-input{ position: absolute; opacity: 0; pointer-events: none; }
.hero-tabs{ display: flex; border-bottom: 1px solid var(--fw-stein); }
.hero-tab{ text-align: center; padding: 14px 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fw-anthrazit); cursor: pointer; }
.hero-tab-bestseller{ flex: 1.8; border-right: 1px solid var(--fw-stein); }
.hero-tab-sp500{ flex: 1; font-size: 13px; }
/* Launch 14.10.2026: einzelner Reiter, solange die Live-Depot-Karte ausgeblendet ist. */
.hero-tab-einzel{ flex: 1; color: var(--fw-weiss); background: var(--fw-anthrazit); cursor: default; }
.hero-umschalter-input:not(:checked) ~ .hero-tabs .hero-tab-bestseller{ color: var(--fw-weiss); background: var(--fw-anthrazit); pointer-events: none; cursor: default; }
.hero-umschalter-input:checked ~ .hero-tabs .hero-tab-sp500{ color: var(--fw-weiss); background: var(--fw-anthrazit); pointer-events: none; cursor: default; }
.hero-vergleich-flaeche{ display: grid; }
.hero-vergleich-karte{ grid-column: 1; grid-row: 1; padding: 24px; display: flex; flex-direction: column; }
/* Runde 18, 02.10.2026: Fußzeile unten angeschlagen, damit der Risikohinweis in beiden Karten exakt an derselben Stelle steht. */
.hero-vergleich-fuss{ margin-top: auto; padding-top: 14px; }
.hero-karte-sp500{ visibility: hidden; }
.hero-umschalter-input:checked ~ .hero-vergleich-flaeche .hero-karte-bestseller{ visibility: hidden; }
.hero-umschalter-input:checked ~ .hero-vergleich-flaeche .hero-karte-sp500{ visibility: visible; }
.hero-vergleich-label{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.hero-vergleich-zahl{ font-family: var(--font-display); font-size: 40px; font-weight: 700; }
.hero-kurve-svg{ color: var(--fw-anthrazit); flex: 0 0 auto; }
.hero-kurve-randwert{ font-family: var(--font-mono); font-size: 9px; fill: var(--fw-anthrazit); }
.hero-vergleich-kennzahlen{ display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.hero-vergleich-kennzahlen div{ display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-size: 14px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--fw-stein); }
.hero-vergleich-kennzahlen div:last-child{ border-bottom: none; padding-bottom: 0; }
.hero-vergleich-kennzahlen span{ font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.03em; }
.hero-vergleich-stand{ padding: 10px 24px 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fw-grau); text-align: right; border-top: 1px solid var(--fw-stein); }
/* Siebte Runde, 22.09.2026: echter Balkenvergleich in der Bestseller-Karte,
   Bestseller-Depot gegen S&P 500, gleicher Zeitraum. Nutzt .chart, .bar-col,
   .bar und .chart-vergleich weiter unten in dieser Datei, dieselben Klassen
   wie beim alten, entfernten Fünf-Balken-Chart, seither ungenutzt.
   .chart-hero passt Höhe und Abstand an die schmalere Karte an.
   Achte Runde, 23.09.2026: keine Wiederholung der 177-Prozent-Zahl mehr über
   dem Bestseller-Balken, die große Zahl oben deckt das ab. Feste, schmalere
   Balkenbreite statt voller Spaltenbreite, bei sehr kurzen Balken wirkte das
   zuvor wie ein Strich statt wie ein Balken.
   Neunte Runde, 23.09.2026: kein Wert mehr über dem S&P-Balken und keine
   Namen mehr unter beiden Balken, siehe .bar-val und .bar-name weiter unten,
   beide Reiter-Köpfe oben in der Karte nennen die beiden Namen bereits.
   Dadurch stehen beide Balkenspalten jetzt gleich da, nichts mehr kreuz und
   quer verteilt. Die Zeile "Zeitraum: 12 Monate" sitzt jetzt eng unter der
   großen Zahl oben statt unter den Balken, siehe Markup in index.php.
   Zehnte Runde, 23.09.2026, nach Nicos Papierskizze: Die Namen unter den
   Balken sind zurück, Nico wollte doch eine sichtbare Beschriftung an den
   Balken selbst, siehe .bar-name weiter unten. Die Zeile "Zeitraum: 12
   Monate" sitzt jetzt wieder unter den Balken statt unter der großen Zahl,
   mit mehr Raum im Chart insgesamt, damit unten spürbar Platz für diese
   Zeile bleibt. Die Balken sind insgesamt größer, mehr Höhe über den
   Parameter in hero_balken_hoehe() in index.php, dazu etwas breiter. */
.chart-hero{ height: 185px; max-width: 100%; margin-top: 18px; gap: 32px; }
.hero-vergleich-hinweis{ font-family: var(--font-mono); font-size: 10.5px; color: var(--fw-grau); text-align: center; margin-top: 14px; }
/* Elfte Runde, 25.09.2026 (Punkt 5 der Copy-Analyse): kurzer Risikohinweis
   direkt unter der 177-Prozent-Zahl, wird geschärft, sobald Dima seine
   Berechnungsmethode liefert. */
.hero-vergleich-disclaimer{ font-family: var(--font-mono); font-size: 9.5px; color: var(--fw-grau); text-align: center; margin-top: 4px; }
.skala-wrapper{ padding: 8px 48px 56px; max-width: 760px; }
.skala-label{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
/* Farben am 08.09.2026 auf Rot nach Gruen umgestellt, passend zum bekannten Fear-and-Greed-Index.
   Rot und Gruen sind dieselben Toene wie beim Handy-Mockup (Kursanimation), damit bleibt die
   Farbsprache der ganzen Seite konsistent. */
.skala{ position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #E45858 0%, #F0B8A8 25%, var(--fw-stein) 50%, #A9D6B4 75%, #2F8F4E 100%); }
.skala-marker{ position: absolute; top: -6px; left: 68%; width: 20px; height: 20px; border-radius: 50%; background: var(--fw-weiss); border: 3px solid var(--fw-anthrazit); }
.skala-ticks{ display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--fw-anthrazit); text-transform: uppercase; }
section.block{ padding: 56px 48px; }
section.block h2{ font-family: var(--font-display); font-size: 26px; margin: 0 0 32px; }
.block-stein{ background: var(--fw-stein); }
.leistungen{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.leistung{ background: var(--fw-weiss); padding: 22px 24px; border-top: 1px solid var(--fw-stein); }
.leistung .nummer{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-orange); display: block; margin-bottom: 8px; }
.leistung h3{ font-family: var(--font-display); font-size: 16px; margin: 0 0 10px; }
.leistung p{ font-size: 15px; color: var(--fw-anthrazit); margin: 0; }
/* Runde 14, 25.09.2026: .leistung-link macht eine einzelne Kachel klickbar,
   ohne die anderen Kacheln im selben Raster zu verändern. Reine Zusatzklasse
   neben .leistung, Grundstil bleibt identisch. */
.leistung-link{ display: block; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s ease; }
.leistung-link:hover{ box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.chart{ display: flex; align-items: flex-end; gap: 14px; height: 180px; padding: 0 0 12px; max-width: 480px; }
.bar-col{ flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.bar-val{ font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--fw-anthrazit); }
/* Neunte Runde, 23.09.2026: der Bestseller-Balken bleibt volles Anthrazit,
   der S&P-Balken bekommt jetzt ein deutlich helleres Grau statt desselben
   mittleren Grautons. Die Unterscheidung läuft damit rein über Helligkeit
   und Kontrast, ohne Orange im Chart, wie von Nico gewünscht.
   Zehnte Runde, 23.09.2026: feste Balkenbreite von 56 auf 64 Pixel erhöht,
   zusammen mit mehr Balkenhöhe wirken beide Balken insgesamt kräftiger. */
.bar{ width: 64px; background: var(--fw-grau-hell); }
.bar.hoch{ background: var(--fw-anthrazit); }
.chart-caption{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); margin-top: 16px; }

/* Nachtrag 21.09.2026: Zwei-Balken-Vergleich im Ergebnisse-Abschnitt,
   Vergleichsindex gegen unsere aktive Steuerung. Breitere Spalten als beim
   alten Fünf-Balken-Chart, dazu ein Name unter jedem Balken.
   Zehnte Runde, 23.09.2026: .bar-name ist nach Nicos Papierskizze wieder da,
   Bestseller-Depot und S&P 500 stehen jetzt wieder direkt unter ihrem
   jeweiligen Balken. */
.chart-vergleich{ max-width: 320px; gap: 40px; }
.bar-name{ font-family: var(--font-mono); font-size: 11px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; line-height: 1.3; }
.bar-col:last-child .bar-val.bar-val-folgt{ color: var(--fw-anthrazit); }
.bar-val-folgt{ text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; }
.preis-optionen{ display: flex; gap: 24px; flex-wrap: wrap; align-items: stretch; justify-content: center; }
.preis-karte{ background: var(--fw-anthrazit); color: var(--fw-weiss); padding: 36px; max-width: 380px; flex: 1 1 320px; }
.preis-label{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-orange); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.preis-zahl{ font-family: var(--font-display); font-size: 44px; font-weight: 700; margin-bottom: 6px; }
.preis-zahl span{ font-size: 16px; font-weight: 400; color: #B8B8B8; }
.preis-karte p{ color: #C9C9C9; font-size: 15px; margin: 16px 0 0; }
.preis-karte .btn{ margin-top: 22px; }
.preis-bullets{ list-style: none; margin: 16px 0 0; padding: 0; }
.preis-bullets li{ position: relative; padding-left: 18px; font-size: 15px; color: #C9C9C9; margin-bottom: 10px; line-height: 1.5; }
.preis-bullets li::before{ content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--fw-orange); }
.preis-laufzeit{ font-family: var(--font-mono); font-size: 12px !important; color: #B8B8B8 !important; margin-top: 10px !important; }
.preis-zahl-hell{ color: var(--fw-anthrazit); }
.preis-zahl-hell span{ color: var(--fw-anthrazit); }
.preis-laufzeit-hell{ color: var(--fw-anthrazit) !important; }

/* Vierte Runde 11.09.2026, festes Gerüst zwischen Hero und Preise. Chessly.com
   und die Stock-Advisor-Seite von fool.com standen als Vorbild für die
   Abfolge der Abschnitte Pate, nicht fürs Design selbst. */
.vertrauen-leiste{ display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; padding: 26px 48px; border-top: 1px solid var(--fw-stein); border-bottom: 1px solid var(--fw-stein); }
/* Zehnte Runde 25.09.2026: eine einzelne breite Kachel statt drei Textpunkten,
   echte Kennzahl von Dima (35,8 Mio. Euro vermitteltes Sparvolumen) statt
   drei allgemeiner Aussagen. */
/* Nachtrag 25.09.2026: Nico fand die zentrierte Kachel zu mittig für einen
   einzelnen Satz, linksbündig wirkt näher an einer echten Aussage statt an
   einer Kennzahl-Kachel. justify-content auf flex-start statt center. */
.vertrauen-leiste-einzel{ padding: 38px 48px; justify-content: flex-start; }
.vertrauen-kachel{ text-align: left; }
/* Zwölfte Runde, 25.09.2026 (Punkt 8 der Copy-Analyse): Ein Satz mit zwei
   fett gesetzten Zahlen statt einer einzelnen großen Ziffer, Vorbild
   chessly.com, "1,354,517 people like you have tried Chessly!" direkt neben
   dem Anmelde-Button. Unsere Kachel steht ohne Button für sich, deshalb
   etwas größer gesetzt als reiner Fließtext. */
.vertrauen-satz{ font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--fw-anthrazit); max-width: 560px; margin: 0; line-height: 1.45; }
.vertrauen-satz strong{ font-weight: 700; }
.vertrauen-stand{ font-family: var(--font-mono); font-size: 11px; color: var(--fw-grau); margin-top: 10px; }
/* Helle Variante der Preiskarten-Liste, fuer Abschnitte mit hellem statt
   dunklem Hintergrund. Gleicher Aufbau, andere Textfarbe. */
.preis-bullets-hell li{ color: var(--fw-anthrazit); }
.platzhalter-hinweis{ border: 2px dashed var(--fw-stein); padding: 28px; text-align: center; color: var(--fw-anthrazit); font-family: var(--font-mono); font-size: 13px; max-width: 480px; margin: 0 auto; }
.faq-liste{ max-width: 720px; margin: 0 auto; }
.faq-item{ border-top: 1px solid var(--fw-stein); padding: 16px 0; }
.faq-item summary{ cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fw-anthrazit); padding: 4px 0; }
.faq-item summary:hover{ color: var(--fw-orange); }
.faq-item p{ font-size: 14.5px; color: var(--fw-anthrazit); margin: 10px 0 0; line-height: 1.6; }
.verwaltung-karte{ background: var(--fw-orange); color: var(--fw-weiss); padding: 36px; max-width: 380px; flex: 1 1 320px; }
.verwaltung-label{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.verwaltung-zahl{ font-family: var(--font-display); font-size: 44px; font-weight: 700; margin-bottom: 6px; }
.verwaltung-zahl span{ font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.85); }
.verwaltung-karte p{ color: rgba(255,255,255,0.94); font-size: 15px; margin: 16px 0 0; }
.verwaltung-karte .verwaltung-fein{ font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 10px; }
.btn-ghost{ display: inline-block; margin-top: 20px; padding: 12px 22px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fw-weiss); border: 2px solid var(--fw-weiss); text-decoration: none; }
.btn-ghost:hover{ background: var(--fw-weiss); color: var(--fw-orange); }
.cta{ background: var(--fw-weiss); padding: 64px 48px; text-align: center; border-top: 1px solid var(--fw-stein); border-bottom: 1px solid var(--fw-stein); }
.cta h2{ font-family: var(--font-display); font-size: 30px; margin: 0 0 16px; }
.cta-buttons{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.btn{ font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 16px 30px; border: none; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-primary{ background: var(--fw-orange); color: var(--fw-weiss); }
.btn-primary:hover{ background: var(--fw-anthrazit); }
.btn-secondary{ background: transparent; color: var(--fw-anthrazit); border: 2px solid var(--fw-anthrazit); }
.btn-secondary:hover{ background: var(--fw-anthrazit); color: var(--fw-weiss); }
/* Runde 3, 25.09.2026 (Punkt 10 der Copy-Analyse): Vergleichstabelle
   Selbst recherchieren gegen Börsenbrief. Die Börsenbrief-Spalte ist
   hervorgehoben wie der aktive Reiter der Hero-Karte, dunkler Kopf,
   fette Werte. Kein Orange, das bleibt dem Anmelde-Button vorbehalten. */
.screen-reader-text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vergleich-tabelle-wrap{ max-width: 760px; overflow-x: auto; }
.vergleich-tabelle{ width: 100%; border-collapse: collapse; background: var(--fw-weiss); font-size: 15px; table-layout: fixed; }
.vergleich-tabelle th, .vergleich-tabelle td{ padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fw-stein); overflow-wrap: break-word; }
.vergleich-tabelle thead th{ font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fw-anthrazit); width: 37%; }
.vergleich-tabelle thead th:first-child{ width: 26%; }
.vergleich-tabelle thead th.vergleich-hervor{ background: var(--fw-anthrazit); color: var(--fw-weiss); }
.vergleich-tabelle tbody th{ font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.03em; width: 26%; }
.vergleich-tabelle tbody td{ color: var(--fw-anthrazit); }
.vergleich-tabelle tbody td.vergleich-hervor{ color: var(--fw-anthrazit); font-weight: 600; background: #FAFAFA; }
.vergleich-tabelle tbody tr:last-child th, .vergleich-tabelle tbody tr:last-child td{ border-bottom: none; }
.vergleich-fazit{ font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--fw-anthrazit); margin: 24px 0 0; max-width: 760px; }
@media (max-width: 640px){
  .vergleich-tabelle{ font-size: 14px; }
  .vergleich-tabelle th, .vergleich-tabelle td{ padding: 12px 10px; }
  .vergleich-tabelle tbody th{ font-size: 10.5px; }
}
.calendly-platzhalter{ margin: 40px auto 0; max-width: 480px; border: 2px dashed var(--fw-grau); padding: 40px 20px; font-family: var(--font-mono); font-size: 13px; color: var(--fw-anthrazit); }
footer.site-footer{ padding: 28px 48px; font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); border-top: 1px solid var(--fw-stein); }
@media (max-width: 640px){
  header, .hero, .skala-wrapper, section.block, .cta, footer.site-footer{ padding-left: 20px; padding-right: 20px; }
  nav{ display: none; }
  .hero{ flex-direction: column; align-items: flex-start; }
  .hero-visual{ align-self: center; margin-top: 12px; padding: 0; }
  .hero-zahl{ font-size: 56px; }
  .hero-vergleich{ align-self: center; margin-top: 20px; max-width: 100%; }
  .signup{ flex-direction: column; border: none; gap: 10px; }
  .signup input{ border: 2px solid var(--fw-anthrazit); }
}

/* Newsletter-Unterseite, ergänzt am 07.09.2026 */
.logo-sub{ font-family: var(--font-mono); font-size: 11px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--fw-stein); }
.nav-rueck{ background: var(--fw-anthrazit); color: var(--fw-weiss) !important; padding: 10px 18px; border-radius: 3px; }
.nav-rueck:hover{ background: var(--fw-orange); color: var(--fw-weiss) !important; }
.signup-hinweis{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); margin-top: 10px; }
.signup-danke{ font-family: var(--font-mono); font-size: 13px; color: var(--fw-gruen); margin-top: 14px; max-width: 420px; }
.leser-zaehler{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); margin-top: 14px; }
.leser-zaehler b{ color: var(--fw-orange); font-size: 14px; font-weight: 700; }
.ausgabe-karte{ flex: 0 0 auto; width: 340px; background: var(--fw-anthrazit); color: var(--fw-weiss); padding: 28px; border-radius: 4px; box-shadow: 30px 24px 50px -25px rgba(26,26,26,0.4); }
.ausgabe-label{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: #B8B8B8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; }
.ausgabe-label .flagge{ color: var(--fw-orange); }
.ausgabe-titel{ font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
.ausgabe-teaser{ font-size: 14px; color: #C9C9C9; margin: 0 0 18px; }
.ausgabe-link{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-orange); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; }
.ausgabe-link:hover{ text-decoration: underline; }
section.block .block-intro{ font-size: 15px; color: var(--fw-anthrazit); max-width: 620px; margin: 0 0 36px; }
.formate{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.format{ background: var(--fw-weiss); padding: 24px; border-top: 1px solid var(--fw-stein); }
.format .nummer{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-orange); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.format .takt{ background: var(--fw-orange-hell); color: var(--fw-orange); padding: 2px 8px; border-radius: 3px; font-size: 11px; }
.format h3{ font-family: var(--font-display); font-size: 16px; margin: 0 0 10px; }
.format p{ font-size: 14.5px; color: var(--fw-anthrazit); margin: 0; }
.archiv-tools{ display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.archiv-suche{ border: 2px solid var(--fw-anthrazit); padding: 10px 14px; font-family: var(--font-body); font-size: 14px; min-width: 240px; }
.archiv-filter{ display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 14px; border: 1px solid var(--fw-grau); border-radius: 20px; background: none; cursor: pointer; color: var(--fw-anthrazit); }
.filter-chip.aktiv{ background: var(--fw-anthrazit); border-color: var(--fw-anthrazit); color: var(--fw-weiss); }
.archiv-liste{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.archiv-eintrag{ background: var(--fw-weiss); border: 1px solid var(--fw-stein); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.archiv-meta{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--fw-anthrazit); text-transform: uppercase; }
.archiv-meta .tag{ color: var(--fw-orange); }
.archiv-eintrag h3{ font-family: var(--font-display); font-size: 16px; margin: 0; }
.archiv-eintrag p{ font-size: 14px; color: var(--fw-anthrazit); margin: 0; flex: 1; }
.archiv-eintrag a{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); text-decoration: none; }
.archiv-eintrag a:hover{ color: var(--fw-orange); }
.archiv-mehr{ text-align: center; margin-top: 32px; }
.archiv-mehr button{ font-family: var(--font-mono); font-size: 13px; background: none; border: 2px solid var(--fw-anthrazit); padding: 12px 26px; cursor: pointer; }
.archiv-mehr button:hover{ background: var(--fw-anthrazit); color: var(--fw-weiss); }
.rueck-block{ padding: 48px; text-align: center; border-top: 1px solid var(--fw-stein); }
.rueck-block p{ font-size: 15px; color: var(--fw-anthrazit); max-width: 480px; margin: 0 auto 20px; }
.cta .signup{ margin: 0 auto; }
.cta .signup input{ background: var(--fw-weiss); }
@media (max-width: 640px){
  .ausgabe-karte{ width: 100%; }
  .rueck-block{ padding: 32px 20px; }
}

/* Depotmodelle-Fläche, ergänzt am 09.09.2026, dritte Fassung: eigene Unterseite statt Bereich
   im Marktradar, dazu der orange Balken über den Kacheln wieder raus, der wirkte zu sehr nach
   generischer Dashboard-Vorlage und passte nicht zum Rest des Themes. */
.dm-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 980px; margin: 0 auto; }
.dm-card{ background: var(--fw-weiss); border-top: 1px solid var(--fw-stein); display: flex; flex-direction: column; transition: border-color 0.15s ease; }
.dm-card:hover{ border-top-color: var(--fw-orange); }
.dm-media{ width: 62px; height: 62px; border-radius: 50%; background: var(--fw-orange-hell); color: var(--fw-orange); display: flex; align-items: center; justify-content: center; margin: 26px auto 6px; }
.dm-media svg{ width: 28px; height: 28px; }
/* Jede Kachel bekommt einen leicht anderen Farbton, rein über CSS, ohne eigene Bilder. */
.dm-card:nth-child(2) .dm-media{ filter: hue-rotate(8deg); }
.dm-card:nth-child(3) .dm-media{ filter: hue-rotate(16deg); }
.dm-card:nth-child(4) .dm-media{ filter: hue-rotate(-8deg); }
.dm-card:nth-child(5) .dm-media{ filter: hue-rotate(24deg); }
.dm-card:nth-child(6) .dm-media{ filter: hue-rotate(-16deg); }
.dm-card:nth-child(7) .dm-media{ filter: hue-rotate(32deg); }
.dm-card:nth-child(8) .dm-media{ filter: hue-rotate(-24deg); }
.dm-card:nth-child(9) .dm-media{ filter: hue-rotate(40deg); }
.dm-card:nth-child(10) .dm-media{ filter: hue-rotate(-32deg); }
.dm-body{ padding: 6px 24px 24px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.dm-name{ font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.dm-line{ font-size: 14px; color: var(--fw-anthrazit); margin: 0 0 18px; flex: 1; }
.dm-stats{ display: flex; justify-content: center; gap: 24px; margin-bottom: 18px; }
.dm-stat-label{ display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.dm-stat-value{ display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fw-anthrazit); }
.dm-goto{ font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; background: none; border: none; border-top: 1px solid var(--fw-stein); padding-top: 14px; margin-top: auto; cursor: pointer; text-align: center; justify-content: center; color: var(--fw-anthrazit); display: flex; align-items: center; gap: 6px; width: 100%; }
.dm-goto:hover{ color: var(--fw-orange); }
.dm-arrow{ transition: transform 0.15s ease; }
.dm-goto:hover .dm-arrow{ transform: translateX(3px); }
@media (max-width: 900px){ .dm-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .dm-grid{ grid-template-columns: 1fr; } }

/* Detailkarte, standardmäßig ausgeblendet. Das [hidden]-Attribut braucht hier eine eigene
   Regel, weil .depot-detail weiter unten einen eigenen display-Wert setzt und dieser sonst
   die Browser-Vorgabe für [hidden] überschreibt. Genau das war der Fehler in der ersten
   Fassung, alle zehn Karten standen offen da. */
.depot-detail[hidden]{ display: none; }
.depot-detail{ position: relative; background: var(--fw-weiss); box-shadow: 0 20px 44px -22px rgba(26,26,26,0.45); display: flex; gap: 32px; padding: 36px; max-width: 760px; margin: 32px auto 0; align-items: flex-start; }
.depot-detail-close{ position: absolute; top: 14px; right: 16px; background: none; border: none; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--fw-anthrazit); cursor: pointer; padding: 4px; }
.depot-detail-close:hover{ color: var(--fw-orange); }
.depot-detail-media{ flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: var(--fw-orange-hell); color: var(--fw-orange); display: flex; align-items: center; justify-content: center; }
.depot-detail-media svg{ width: 40px; height: 40px; }
.depot-detail-body{ flex: 1; min-width: 0; }
.depot-detail-body h3{ font-family: var(--font-display); font-size: 24px; margin: 4px 0 14px; }
.depot-detail-about{ font-size: 15px; color: var(--fw-anthrazit); margin: 0 0 22px; max-width: 560px; }
.depot-detail-stats{ display: flex; gap: 28px; margin-bottom: 22px; }
.depot-detail-perf{ margin-bottom: 24px; padding: 13px 16px; background: var(--fw-stein); border-left: 3px solid var(--fw-orange); font-size: 13px; color: var(--fw-anthrazit); max-width: 560px; }
.depot-detail-perf b{ color: var(--fw-anthrazit); }
.depot-detail-perf-pending{ border-left-color: var(--fw-grau); }
.depot-detail-cta{ margin-right: 14px; }
.depot-detail-cta-note{ font-family: var(--font-mono); font-size: 11.5px; color: var(--fw-anthrazit); }
@media (max-width: 640px){
  .depot-detail{ flex-direction: column; padding: 28px 20px; gap: 18px; }
  .depot-detail-stats{ flex-wrap: wrap; row-gap: 12px; }
}

/* Depotbetreuung, drei Depots, neue Unterseite vom 11.09.2026, sechste Fassung am
   selben Tag. Apple-Stil, eine Karte je Depot. Die technischen Kennzahlen stehen
   im Ausklapp-Element derselben Karte, nicht mehr in einer zweiten Box darunter.
   Chips sind einheitlich schwarz auf weiß, kein Eyebrow-Wort mehr über dem
   Kartentitel. Die Kennzahlen-Werte stehen in einer festen zweiten Spalte,
   linksbündig, nicht mehr rechtsbündig mit wechselndem Abstand zum Label.
   Eigene db-Klassen, um Kollisionen mit den dm-Klassen der Depotmodelle-Seite zu
   vermeiden. */
.db-karten{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1040px; margin: 0 auto 40px; align-items: start; }
.db-karte{ background: var(--fw-weiss); border: 1px solid var(--fw-stein); padding: 30px 26px; display: flex; flex-direction: column; }
/* Runde 14, 25.09.2026: .db-karte-link macht die ganze Karte klickbar, für
   den Link vom Depot-Einblick zur Live-Depot-Unterseite. .db-karte-mehr ist
   die kleine Hinweiszeile am Kartenende, die den Link ankündigt. .db-karte-
   verweis ist die schlanke Verweis-Karte auf page-depotbetreuung-stufen.php,
   dort statt der vollen Bestseller-Karte, siehe Vierzehnte Fassung dort. */
.db-karte-link{ text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.db-karte-link:hover{ box-shadow: 0 6px 20px rgba(0,0,0,0.09); transform: translateY(-2px); }
.db-karte-mehr{ margin: 18px 0 0; font-size: 13px; font-weight: 600; color: var(--fw-anthrazit); text-decoration: underline; text-underline-offset: 3px; }
.db-karte-verweis{ align-items: center; justify-content: center; text-align: center; gap: 16px; background: var(--fw-stein); }
.db-karte-verweis p{ font-size: 14px; color: var(--fw-anthrazit); margin: 0; line-height: 1.5; }
.db-karte-name{ font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.db-karte-chips{ display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.db-chip{ display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--fw-weiss); color: var(--fw-anthrazit); border: 1px solid var(--fw-anthrazit); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.db-karte-ziel{ font-size: 14.5px; color: var(--fw-anthrazit); margin: 0 0 18px; }
.db-karte-bullets{ list-style: none; margin: 0 0 20px; padding: 0; }
.db-karte-bullets li{ position: relative; padding-left: 18px; font-size: 14px; color: var(--fw-anthrazit); margin-bottom: 11px; line-height: 1.5; }
.db-karte-bullets li strong{ font-family: var(--font-display); font-weight: 600; }
.db-karte-bullets li::before{ content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--fw-orange); }
.db-branchen{ display: flex; align-items: center; gap: 18px; margin: 0 0 20px; padding-top: 4px; }
.db-branchen-grafik{ flex-shrink: 0; line-height: 0; }
.db-donut-svg{ display: block; }
.db-branchen-legende{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.db-branchen-legende li{ display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fw-anthrazit); line-height: 1.3; }
.db-branchen-punkt{ display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hero .btn{ margin-top: 10px; }
.hero-cta-note{ display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--fw-anthrazit); margin-top: 10px; }
.hero-visual{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 30px; }
.hero-zahl{ font-family: var(--font-display); font-weight: 700; font-size: 86px; line-height: 1; color: var(--fw-orange); }
.hero-zahl-text{ font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fw-anthrazit); text-align: center; max-width: 210px; }
.db-karte-details{ margin: 0 0 20px; }
.db-karte-details summary{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fw-anthrazit); cursor: pointer; padding: 2px 0; }
.db-karte-details summary:hover{ color: var(--fw-orange); }
.db-karte-details p{ font-size: 13.5px; color: var(--fw-anthrazit); margin: 10px 0 0; line-height: 1.55; }
.db-karte-cta{ align-self: flex-start; margin-top: 4px; padding: 13px 24px; font-size: 14px; }
.db-karte-platzhalter{ border: 2px dashed var(--fw-stein); }

.db-technisch{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fw-stein); display: grid; grid-template-columns: max-content 1fr; row-gap: 9px; column-gap: 18px; }
.db-technisch-eintrag{ display: contents; }
.db-technisch-label{ font-family: var(--font-mono); font-size: 11px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; align-self: baseline; }
.db-technisch-wert{ font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--fw-anthrazit); text-align: left; }
.db-technisch-skala{ font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fw-anthrazit); }
.db-technisch-wert-folgt{ font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.03em; }

.db-termin-auswahl{ font-family: var(--font-mono); font-size: 13px; color: var(--fw-orange); margin: -8px 0 0; }

@media (max-width: 900px){
  .db-karten{ grid-template-columns: 1fr; }
}

/* Stimmen-Platzhalter auf der Startseite, ergänzt am 17.09.2026. Runder Kreis
   statt Foto, gleiche Stein-Farbe wie .platzhalter-hinweis, damit "hier fehlt
   noch was" auf der ganzen Seite gleich aussieht. Eigene Klasse statt Inline-
   Style, damit sich Größe oder Farbe später an einer Stelle ändern lassen,
   sobald echte Fotos reinkommen, dann übernimmt ein <img> diese Klasse oder
   die Klasse fällt einfach weg. */
.stimmen-avatar-platzhalter{ width: 56px; height: 56px; border-radius: 50%; background: var(--fw-stein); margin: 0 auto 16px; }

/* Kundenbereich Live-Depot, 01.10.2026, page-live-depot.php */
.ld-kennzahlen{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 760px; }
.ld-kennzahl{ border: 1px solid var(--fw-stein); border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ld-kennzahl-label{ font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fw-grau); }
.ld-kennzahl-wert{ font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.ld-tabelle-wrap{ max-width: 960px; overflow-x: auto; }
.ld-tabelle{ width: 100%; border-collapse: collapse; background: var(--fw-weiss); font-size: 15px; }
.ld-tabelle th, .ld-tabelle td{ padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--fw-stein); white-space: nowrap; }
.ld-tabelle td:last-child{ white-space: normal; }
.ld-tabelle thead th{ font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fw-grau); background: var(--fw-weiss); }
.ld-tabelle tbody tr:hover{ background: #FAFAFA; }
.ld-tabelle .ld-zahl{ text-align: right; font-variant-numeric: tabular-nums; }
.ld-plus{ color: var(--fw-gruen); font-weight: 600; }
.ld-minus{ color: #B3261E; font-weight: 600; }
.ld-leer{ color: var(--fw-grau-hell); }
.ld-login form{ max-width: 380px; margin-top: 22px; }
.ld-login label{ display: block; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ld-login input[type="text"], .ld-login input[type="password"]{ width: 100%; padding: 12px 14px; border: 2px solid var(--fw-anthrazit); font-family: var(--font-body); font-size: 15px; }
.ld-login .login-remember label{ text-transform: none; font-family: var(--font-body); font-size: 14px; }
.ld-login input[type="submit"]{ background: var(--fw-orange); color: var(--fw-weiss); border: none; font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 14px 28px; cursor: pointer; }
.ld-login input[type="submit"]:hover{ background: var(--fw-anthrazit); }
.ld-hinweis{ font-family: var(--font-mono); font-size: 13px; margin-top: 18px; }
@media (max-width: 640px){
  .ld-tabelle{ font-size: 14px; }
  .ld-tabelle th, .ld-tabelle td{ padding: 10px 8px; }
  .ld-kennzahl-wert{ font-size: 22px; }
}
.ld-neutral{ color: var(--fw-anthrazit); }

/* Runde 16, 01.10.2026: Feste Inhaltsbreite von 1200px, mittig. Hintergründe
   wie die grauen Abschnitte bleiben über die volle Breite, nur der Inhalt
   rückt per Innenabstand zur Mitte. Auf Bildschirmen bis 1296px bleibt es
   bei den bisherigen 48px Rand. Logo und Hero-Text stehen damit auf einer
   Linie. */
header, .hero, section.block, .vertrauen-leiste, .cta, footer.site-footer{
  padding-left: max(48px, calc((100% - 1200px) / 2));
  padding-right: max(48px, calc((100% - 1200px) / 2));
}
.hero{ max-width: none; }
.nav-kundenbereich{ border: 1px solid var(--fw-anthrazit); border-radius: 3px; padding: 6px 12px; margin: -7px 0; }
.nav-kundenbereich:hover{ border-color: var(--fw-orange); }

/* Runde 17, 01.10.2026: Vertrauens-Leiste mit zwei Zahlen links und den drei
   Schritten "So entsteht jede Entscheidung" rechts. */
.vertrauen-leiste-einzel{ justify-content: space-between; align-items: flex-start; gap: 48px; }
.vt-zahlen{ display: flex; gap: 40px; flex-wrap: wrap; }
.vt-zahl{ max-width: 220px; }
.vt-wert{ font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--fw-anthrazit); }
.vt-text{ font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--fw-anthrazit); margin-top: 6px; line-height: 1.4; }
.vt-prozess{ flex: 0 1 460px; }
.vt-prozess-titel{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.vt-schritte{ list-style: none; counter-reset: vt; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vt-schritte li{ counter-increment: vt; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
.vt-schritte li::before{ content: counter(vt); grid-row: span 2; width: 26px; height: 26px; border: 1px solid var(--fw-anthrazit); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; }
.vt-schritte strong{ font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.vt-schritte span{ font-size: 14.5px; color: var(--fw-anthrazit); line-height: 1.5; }

/* Runde 17: Zeile "Dazu" unter den drei Leistungs-Kacheln, WKN und ISIN im
   persönlichen Bereich in Festbreitenschrift, damit sie sich leicht abtippen lassen. */
.dazu-zeile{ list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--fw-grau-hell); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.dazu-zeile li{ font-size: 14.5px; line-height: 1.5; color: var(--fw-anthrazit); }
.dazu-zeile strong{ display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.ld-kennung{ font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

/* Tablet: Text und Vergleichskarte brechen um, statt sich zu quetschen. */
@media (max-width: 960px){
  .hero{ flex-wrap: wrap; }
}

/* Handy: muss nach dem Block oben stehen, sonst gewinnt der breite Rand. */
@media (max-width: 640px){
  header, .hero, section.block, .vertrauen-leiste, .cta, footer.site-footer{ padding-left: 20px; padding-right: 20px; }
  header{ padding-top: 16px; padding-bottom: 16px; }
  .logo-text{ font-size: 17px; }
  nav{ display: flex; }
  nav a{ display: none; }
  nav a.nav-kundenbereich{ display: inline-block; font-size: 11.5px; padding: 6px 10px; }
  .hero{ padding-top: 36px; padding-bottom: 32px; gap: 8px; }
  .hero-text{ flex: 0 0 auto; }
  .eyebrow{ font-size: 11.5px; margin-bottom: 14px; }
  .hero .btn{ display: block; text-align: center; }
  .hero-vergleich{ width: 100%; }
  .hero-vergleich-karte{ padding: 20px 16px; }
}

/* Runde 18, 02.10.2026: Stichpunkte in den Leistungskacheln statt Fließtext. */
.leistung-punkte{ list-style: none; margin: 0; padding: 0; }
.leistung-punkte li{ font-size: 15px; color: var(--fw-anthrazit); position: relative; padding-left: 18px; margin-top: 6px; line-height: 1.5; }
.leistung-punkte li::before{ content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--fw-anthrazit); }

/* Runde 18, 05.10.2026: Depot-Karte links, "So nutzt du den Einblick" rechts. */
.einblick-raster{ display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; align-items: start; }
.einblick-karte{ width: 100%; }
.einblick-text{ padding-top: 8px; }
.einblick-text h2{ margin-top: 0; }
.einblick-schritte{ gap: 22px; margin-top: 24px; }
.einblick-schritte strong{ font-size: 17px; }
.einblick-schritte span{ font-size: 15px; }
.einblick-details{ margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--fw-stein); }
.einblick-detail-titel{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fw-anthrazit); margin: 18px 0 8px; }
.einblick-anteile, .einblick-umschichtungen{ list-style: none; margin: 0; padding: 0; }
.einblick-anteile li{ display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
.einblick-wert{ margin-left: auto; font-family: var(--font-display); font-weight: 600; }
.einblick-umschichtungen li{ font-size: 14px; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid var(--fw-stein); }
.einblick-umschichtungen li:last-child{ border-bottom: none; }
.einblick-datum{ display: block; font-family: var(--font-mono); font-size: 11px; color: var(--fw-anthrazit); }
.einblick-umschichtungen strong{ font-family: var(--font-display); font-weight: 600; margin-right: 6px; }
.einblick-depotwert{ font-family: var(--font-display); font-size: 20px; font-weight: 700; }
@media (max-width: 820px){
  .einblick-raster{ grid-template-columns: 1fr; gap: 28px; }
  .einblick-text{ order: -1; padding-top: 0; }
}
/* Runde 18, 05.10.2026: kühles Hellgrau für den Einblick-Abschnitt, Karte mit leichtem Schatten. */
.einblick-block{ background: #F3F4F6; }
.einblick-karte{ border-color: transparent; box-shadow: 0 4px 18px rgba(26, 26, 26, 0.08); }
/* Runde 18, 05.10.2026: Ausklappen der Depot-Karte, Schalter an der Unterkante. */
.einblick-mehr-input{ position: absolute; opacity: 0; pointer-events: none; }
.einblick-details{ display: none; margin: 0; padding-top: 4px; border-top: none; }
.einblick-mehr-input:checked ~ .einblick-details{ display: block; }
.einblick-schalter{ display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fw-stein); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fw-anthrazit); cursor: pointer; user-select: none; }
.einblick-schalter:hover{ color: var(--fw-orange); }
.einblick-schalter::after{ content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.einblick-mehr-input:checked ~ .einblick-schalter::after{ transform: translateY(2px) rotate(-135deg); }
.einblick-schalter-weniger{ display: none; }
.einblick-mehr-input:checked ~ .einblick-schalter .einblick-schalter-mehr{ display: none; }
.einblick-mehr-input:checked ~ .einblick-schalter .einblick-schalter-weniger{ display: inline; }
.einblick-mehr-input:focus-visible ~ .einblick-schalter{ outline: 2px solid var(--fw-orange); outline-offset: 4px; }
/* Runde 18, 05.10.2026: FAQ nach Vorbild acquisition.com, immer nur eine Antwort offen. */
.faq-liste{ max-width: 820px; margin: 0; }
.faq-item{ border-top: none; border-bottom: 1px dotted var(--fw-anthrazit); padding: 20px 0; }
.faq-item summary{ list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 19px; font-weight: 700; padding: 0; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s ease; }
.faq-item[open] summary::after{ transform: translateY(3px) rotate(-135deg); }
.faq-item p{ font-size: 16px; line-height: 1.65; margin: 14px 0 0; max-width: 720px; }
/* Runde 18, 05.10.2026: Preisblock mit Zahlweise zum Umschalten. */
.preis-box{ max-width: 460px; background: var(--fw-weiss); padding: 32px; box-shadow: 0 4px 18px rgba(26, 26, 26, 0.08); }
.zw-input{ position: absolute; opacity: 0; pointer-events: none; }
.zw-schalter{ display: flex; gap: 4px; padding: 4px; background: #F3F4F6; border-radius: 6px; margin-bottom: 26px; }
.zw-label{ flex: 1; text-align: center; padding: 9px 6px; border-radius: 4px; cursor: pointer; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--fw-anthrazit); line-height: 1.3; }
.zw-hinweis{ display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fw-orange); margin-top: 2px; }
#zw-jahr:checked ~ .zw-schalter .zw-label-jahr,
#zw-quartal:checked ~ .zw-schalter .zw-label-quartal,
#zw-monat:checked ~ .zw-schalter .zw-label-monat{ background: var(--fw-weiss); box-shadow: 0 1px 4px rgba(26, 26, 26, 0.12); }
.zw-input:focus-visible ~ .zw-schalter{ outline: 2px solid var(--fw-orange); outline-offset: 2px; }
.zw-preis{ display: none; }
#zw-jahr:checked ~ .zw-preis-jahr,
#zw-quartal:checked ~ .zw-preis-quartal,
#zw-monat:checked ~ .zw-preis-monat{ display: block; }
.zw-summe{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); margin-bottom: 22px; }
.preis-stapel{ list-style: none; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--fw-stein); }
.preis-stapel li{ position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; margin-bottom: 10px; color: var(--fw-anthrazit); }
.preis-stapel li::before{ content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 2px solid var(--fw-orange); border-bottom: 2px solid var(--fw-orange); transform: rotate(-45deg); }
.preis-kuendigung{ font-size: 14.5px; color: var(--fw-anthrazit); margin: 0 0 22px; line-height: 1.55; }
.preis-kuendigung strong{ display: block; font-family: var(--font-display); }
@media (max-width: 520px){ .preis-box{ padding: 24px 18px; } }
/* 05.10.2026: Fangfeld für Bots, für Menschen unsichtbar. */
.fsd-fangfeld{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* 05.10.2026: Anmeldeformular untereinander, Beschriftung über jedem Feld. */
.signup.signup-stapel{ display: flex; flex-direction: column; align-items: stretch; gap: 16px; max-width: 420px; border: none; padding: 0; margin-top: 28px; }
.signup-stapel .signup-feld{ display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--fw-anthrazit); }
.signup-stapel input[type="text"], .signup-stapel input[type="email"], .signup-stapel input[type="tel"]{ width: 100%; box-sizing: border-box; border: 1px solid #C9CCD1; border-radius: 4px; padding: 13px 14px; font-family: var(--font-body); font-size: 16px; font-weight: 400; background: var(--fw-weiss); flex: none; }
.signup-stapel input:focus{ outline: none; border-color: var(--fw-anthrazit); box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08); }
.signup-stapel button{ align-self: flex-start; margin-top: 6px; background: var(--fw-orange); color: var(--fw-weiss); border: none; padding: 15px 28px; font-family: var(--font-display); font-size: 15px; font-weight: 600; cursor: pointer; }
.signup-stapel button:hover{ background: var(--fw-anthrazit); }
/* 05.10.2026: Einwilligung, Zahlungshinweis, Rechtsseiten und Fußzeilen-Links. */
.text-zeilen{ line-height: 1.75; }
.signup-einwilligung{ display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--fw-anthrazit); cursor: pointer; }
.signup-einwilligung input{ flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--fw-orange); }
.signup-einwilligung a{ color: #1A5FB4; text-decoration: underline; text-underline-offset: 2px; }
.signup-einwilligung a:hover{ color: #12437F; }
.signup-zahlung{ font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--fw-anthrazit); margin: 0; }
.recht-seite{ max-width: none; } /* Launch 14.10.2026: Breite auf die Kinder verlagert, sonst frisst der Seitenabstand auf großen Bildschirmen die ganze Breite. */
.recht-seite > *{ max-width: 760px; }
.recht-seite h1{ margin-top: 0; }
.recht-text h2{ font-size: 20px; margin: 32px 0 10px; }
.recht-text h3{ font-size: 17px; margin: 24px 0 8px; }
.recht-text p, .recht-text li{ font-size: 15.5px; line-height: 1.7; color: var(--fw-anthrazit); }
.recht-text ul, .recht-text ol{ padding-left: 22px; }
.recht-text a{ color: inherit; text-decoration: underline; }
.recht-stand{ font-family: var(--font-mono); font-size: 12px; margin-top: 32px; }
.recht-links{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.recht-links a{ color: var(--fw-anthrazit); text-decoration: none; }
.recht-links a:hover{ color: var(--fw-orange); }
/* 05.10.2026: Hinweise auf der Anmeldeseite in derselben Schrift wie der Text darüber. */
.signup-notiz{ font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--fw-anthrazit); margin-top: 18px; }
.signup-notiz-fehler{ color: var(--fw-orange); }

/* Runde 19, 09.10.2026: Persönlicher Bereich im Stil der Startseite. */
.ld-kopf{ padding-top: 56px !important; padding-bottom: 36px !important; }
.ld-kopf h1{ margin-bottom: 10px; }
.ld-kopf-text{ font-family: var(--font-body); font-size: 16px; color: var(--fw-anthrazit); margin: 0; }
.ld-uebersicht .einblick-text h2{ margin-bottom: 20px; }
.ld-anteile{ max-width: 420px; }
.ld-anteile li{ padding: 8px 0; border-bottom: 1px solid #E2E4E7; font-size: 15px; }
.ld-anteile li:last-child{ border-bottom: none; }
.ld-sprungmarken{ display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; }
.ld-sprungmarken a{ font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fw-anthrazit); text-decoration: underline; text-underline-offset: 3px; }
.ld-sprungmarken a:hover{ color: var(--fw-orange); }
.ld-risiko{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fw-stein); font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: var(--fw-grau); }
.ld-seite .ld-tabelle-wrap{ max-width: none; background: var(--fw-weiss); border-radius: 8px; box-shadow: 0 4px 18px rgba(26, 26, 26, 0.08); }
.ld-seite .ld-tabelle th, .ld-seite .ld-tabelle td{ padding: 14px 18px; }
.ld-seite .ld-tabelle tbody tr:last-child td{ border-bottom: none; }
.ld-seite .ld-tabelle thead th{ color: var(--fw-anthrazit); }
.ld-name{ font-family: var(--font-display); font-weight: 600; }
.ld-thema .db-branchen-punkt{ margin-right: 8px; vertical-align: 1px; }
/* Zeitleiste der Bewegungen */
.ld-zeitleiste{ list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; max-width: 760px; }
.ld-zeitleiste::before{ content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--fw-grau-hell); }
.ld-bewegung{ position: relative; margin-bottom: 16px; }
.ld-bewegung:last-child{ margin-bottom: 0; }
.ld-bewegung-punkt{ position: absolute; left: -26px; top: 22px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #F3F4F6; box-sizing: content-box; margin-left: -1px; }
.ld-bewegung-karte{ background: var(--fw-weiss); border-radius: 8px; box-shadow: 0 4px 18px rgba(26, 26, 26, 0.08); padding: 18px 22px; }
.ld-bewegung-kopf{ display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ld-bewegung-datum{ font-family: var(--font-mono); font-size: 12px; color: var(--fw-anthrazit); }
.ld-bewegung-art{ display: inline-flex; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--fw-anthrazit); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.ld-bewegung-zeile{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ld-bewegung-name{ font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.ld-bewegung-betrag{ font-family: var(--font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-bewegung-thema{ font-size: 13.5px; color: var(--fw-grau); margin-top: 2px; }
.ld-bewegung-grund{ font-size: 15.5px; line-height: 1.6; color: var(--fw-anthrazit); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--fw-stein); }
/* Handy: Positionstabelle wird zur Kartenliste */
@media (max-width: 640px){
  .ld-kopf{ padding-top: 36px !important; padding-bottom: 24px !important; }
  .ld-seite .ld-tabelle-wrap{ background: none; box-shadow: none; overflow: visible; }
  .ld-tabelle-positionen, .ld-tabelle-positionen tbody, .ld-tabelle-positionen tr, .ld-tabelle-positionen td{ display: block; width: 100%; }
  .ld-tabelle-positionen thead{ display: none; }
  .ld-tabelle-positionen tr{ background: var(--fw-weiss); border-radius: 8px; box-shadow: 0 4px 18px rgba(26, 26, 26, 0.08); padding: 14px 16px; margin-bottom: 12px; }
  .ld-tabelle-positionen tbody tr:hover{ background: var(--fw-weiss); }
  .ld-seite .ld-tabelle-positionen td{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--fw-stein); text-align: right; white-space: normal; }
  .ld-seite .ld-tabelle-positionen td:last-child{ border-bottom: none; }
  .ld-tabelle-positionen td::before{ content: attr(data-label); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fw-grau); text-align: left; }
  .ld-seite .ld-tabelle-positionen td.ld-name{ font-size: 17px; text-align: left; padding-top: 0; }
  .ld-tabelle-positionen td.ld-name::before{ display: none; }
  .ld-thema{ justify-content: flex-end !important; }
  .ld-thema::before{ margin-right: auto; }
  .ld-zeitleiste{ padding-left: 20px; }
  .ld-bewegung-punkt{ left: -20px; }
  .ld-zeitleiste::before{ left: 6px; }
  .ld-bewegung-karte{ padding: 16px; }
  .ld-bewegung-name{ font-size: 16px; }
  .ld-uebersicht .einblick-text{ order: 0; }
  .ld-seite .logo-sub{ display: none; }
}

/* Launch 14.10.2026: Langer Name auf schmalen Handys zweizeilig, damit er neben dem Button Platz hat. */
@media (max-width: 420px){
  .logo-text .marke, .logo-text .sparte{ display: block; line-height: 1.1; }
}

/* Launch 14.10.2026: Notizfeld je Bewegung zum Aufklappen, Hebel als Marke im Kopf. */
.ld-bewegung-hebel{ border-color: var(--fw-orange); color: var(--fw-orange); }
.ld-bewegung-zahlen{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fw-stein); }
.ld-bewegung-zahlen summary{ cursor: pointer; font-family: var(--font-body); font-size: 14.5px; color: var(--fw-anthrazit); list-style-position: inside; }
.ld-bewegung-zahlen summary:hover{ color: var(--fw-orange); }
.ld-bewegung-zahlen dl{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px 20px; margin: 12px 0 0; }
.ld-bewegung-zahlen dt{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fw-anthrazit); }
.ld-bewegung-zahlen dd{ margin: 2px 0 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Launch 14.10.2026: Team-Vorschau mit allen Blöcken, nur für angemeldete Teammitglieder. */
.fsd-vorschau-leiste{ position: sticky; top: 0; z-index: 50; background: var(--fw-orange); color: #fff; font-family: var(--font-body); font-size: 14px; padding: 10px 20px; text-align: center; }
.fsd-vorschau-leiste a{ color: #fff; text-decoration: underline; margin-left: 10px; }
.fsd-vorschau-marke{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fw-orange); border-top: 2px dashed var(--fw-orange); padding: 10px 48px 0; }
@media (max-width: 640px){ .fsd-vorschau-marke{ padding-left: 20px; padding-right: 20px; } }

/* Launch 14.10.2026: hält Wörter mit Bindestrich wie Live-Depot in einer Zeile. */
.nobr{ white-space: nowrap; }