/* PortfolioAnalyseTool – Design
   Dunkles Standard-Theme (data-bs-theme="dark") mit hellem Gegenstück (data-bs-theme="light").
   Alle Farben laufen über die Variablen --pa-*; die älteren --fm-*-Namen zeigen darauf, damit Seiten und
   Komponenten ohne Änderung das neue Aussehen bekommen. Akzent-, Gewinn- und Verlustfarbe sowie Schrift und
   Abstände überschreibt die persönliche Einstellung (Oberflaeche.Css()). */

:root,
[data-bs-theme="dark"] {
    --pa-grund: #0a0f1c;
    --pa-flaeche: #111827;
    --pa-flaeche-2: #172033;
    --pa-flaeche-hover: #1c2740;
    --pa-rand: #232f47;
    --pa-rand-stark: #2f3d5c;
    --pa-text: #e5eaf3;
    --pa-text-stark: #ffffff;
    --pa-gedaempft: #8a96ad;
    --pa-schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
    --pa-leiste: #0d1424;
    --pa-chart-raster: rgba(148, 163, 184, 0.14);
    --pa-chart-text: #8a96ad;
    --pa-code: #05080f;
    color-scheme: dark;
}

[data-bs-theme="light"] {
    --pa-grund: #f3f5f9;
    --pa-flaeche: #ffffff;
    --pa-flaeche-2: #f7f9fc;
    --pa-flaeche-hover: #eef3fb;
    --pa-rand: #e2e7ef;
    --pa-rand-stark: #cfd7e3;
    --pa-text: #1b2333;
    --pa-text-stark: #0b1220;
    --pa-gedaempft: #66748b;
    --pa-schatten: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.06);
    --pa-leiste: #ffffff;
    --pa-chart-raster: rgba(100, 116, 139, 0.16);
    --pa-chart-text: #66748b;
    --pa-code: #0f172a;
    color-scheme: light;
}

:root {
    --pa-akzent: #4f8cff;
    --pa-akzent-text: #ffffff;
    --pa-akzent-weich: color-mix(in srgb, var(--pa-akzent) 16%, transparent);
    --pa-positiv: #22c55e;
    --pa-negativ: #f05252;
    --pa-radius: 12px;
    --pa-radius-klein: 8px;

    /* Ältere Namen → neues Design */
    --fm-titel: var(--pa-text-stark);
    --fm-text: var(--pa-text);
    --fm-gedaempft: var(--pa-gedaempft);
    --fm-linie: var(--pa-rand);
    --fm-trenner: var(--pa-rand);
    --fm-gruppe: var(--pa-flaeche-2);
    --fm-summe: var(--pa-flaeche-2);
    --fm-auswahl: var(--pa-akzent-weich);
    --fm-hover: var(--pa-flaeche-hover);
    --fm-positiv: var(--pa-positiv);
    --fm-negativ: var(--pa-negativ);

    --bs-body-font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-border-radius: var(--pa-radius-klein);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--pa-radius);
}

[data-bs-theme] {
    --bs-body-bg: var(--pa-grund);
    --bs-body-color: var(--pa-text);
    --bs-secondary-bg: var(--pa-flaeche-2);
    --bs-tertiary-bg: var(--pa-flaeche-2);
    --bs-border-color: var(--pa-rand);
    --bs-secondary-color: var(--pa-gedaempft);
    --bs-emphasis-color: var(--pa-text-stark);
    --bs-link-color: var(--pa-akzent);
    --bs-link-hover-color: color-mix(in srgb, var(--pa-akzent) 80%, var(--pa-text-stark));
    --bs-link-color-rgb: 79, 140, 255;
}

html, body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    background: var(--pa-grund);
    color: var(--pa-text);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--pa-akzent-weich);
}

a {
    color: var(--pa-akzent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- Seitentitel ---------- */

article h1 {
    color: var(--pa-text-stark);
    font-size: 1.55rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
}

article h2, article .h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pa-text-stark);
}

.text-muted, .form-text {
    color: var(--pa-gedaempft) !important;
}

/* ---------- Aktionsleiste unter dem Titel ---------- */

.fm-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: -0.35rem 0 1rem;
}

.fm-aktionen .fm-aktion {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0 0.8rem;
    border: 1px solid var(--pa-rand);
    border-radius: 999px;
    background: var(--pa-flaeche);
    color: var(--pa-text);
    font-weight: 500;
    font-size: var(--bs-body-font-size); /* Schrift der Anwendung (Einstellungen › Schriftgröße) */
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.fm-aktionen .fm-aktion:hover:not(:disabled) {
    background: var(--pa-flaeche-hover);
    border-color: var(--pa-rand-stark);
    color: var(--pa-text-stark);
}

.fm-aktionen .fm-aktion:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Breiter Dialog (Tabellen) */
.fm-dialog.fm-dialog-breit {
    width: min(880px, 96vw);
}

/* Zwischenüberschrift in Dialogen (wie „Weitere Angaben“ im FinanzManager) */
.fm-dialog-abschnitt {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pa-rand);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pa-gedaempft);
}

/* Aufklappmenü an einer Aktion (z. B. „Neu ▾“) */
.fm-menue-anker {
    position: relative;
}

.fm-menue {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1030;
    min-width: 13rem;
    padding: 0.3rem;
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand-stark);
    border-radius: var(--pa-radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.fm-menue button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: calc(var(--pa-radius) - 4px);
    background: none;
    color: var(--pa-text);
    font-size: 0.86rem;
    text-align: left;
}

.fm-menue button:hover {
    background: var(--pa-flaeche-hover);
    color: var(--pa-text-stark);
}

/* ---------- Karten und Rahmen ---------- */

.card, .fm-gruppe-rahmen, .pa-karte {
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-schatten);
    color: var(--pa-text);
}

a.card:hover {
    border-color: var(--pa-akzent);
    text-decoration: none;
}

.card .card-body > h2:first-child,
.card .card-body > .h5:first-child,
.card .card-body > .h6:first-child {
    color: var(--pa-gedaempft);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fs-3 {
    color: var(--pa-text-stark);
    font-weight: 650 !important;
    letter-spacing: -0.02em;
}

.fm-gruppe-rahmen {
    padding: 0.9rem 1.1rem 1rem;
    margin-bottom: 1rem;
}

.fm-gruppe-rahmen > legend {
    float: none;
    width: auto;
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pa-gedaempft);
    padding: 0;
    margin: 0 0 0.4rem;
}

/* ---------- Tabellen ---------- */

.table-responsive {
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-schatten);
    margin-bottom: 1rem;
}

.table-responsive > .table {
    margin-bottom: 0;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pa-text);
    --bs-table-border-color: var(--pa-rand);
    --bs-table-hover-bg: var(--pa-flaeche-hover);
    --bs-table-hover-color: var(--pa-text-stark);
    --bs-table-striped-bg: var(--pa-flaeche-2);
    margin-bottom: 1rem;
    font-variant-numeric: tabular-nums;
}

.table > thead > tr > th {
    font-size: 0.74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pa-gedaempft);
    background: var(--pa-flaeche-2);
    border-bottom: 1px solid var(--pa-rand);
    white-space: nowrap;
    vertical-align: bottom;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.table > tbody > tr > td {
    border-bottom: 1px solid var(--pa-rand);
    padding-top: calc(var(--fm-zeile, 5px) + 3px);
    padding-bottom: calc(var(--fm-zeile, 5px) + 3px);
}

.table-sm > tbody > tr > td {
    padding-top: calc(var(--fm-zeile, 5px) + 1px);
    padding-bottom: calc(var(--fm-zeile, 5px) + 1px);
}

.table > :not(caption) > * > *:first-child { padding-left: 0.9rem; }
.table > :not(caption) > * > *:last-child { padding-right: 0.9rem; }

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table > tbody > tr:hover > td {
    background: var(--pa-flaeche-hover);
}

.table > tbody > tr.fm-gruppe > td {
    background: var(--pa-flaeche-2);
    color: var(--pa-text-stark);
    font-weight: 650;
}

.table > tbody > tr.fm-zwischensumme > td {
    font-weight: 650;
}

.table > tbody > tr.fm-ausgewaehlt > td {
    background: var(--pa-akzent-weich);
}

.table > tfoot > tr > td,
.table > tfoot > tr > th {
    background: var(--pa-flaeche-2);
    color: var(--pa-text-stark);
    font-weight: 650;
    border-top: 1px solid var(--pa-rand-stark);
    border-bottom: 0;
}

.fm-klickbar > tbody > tr:not(.fm-gruppe):not(.fm-zwischensumme) {
    cursor: pointer;
}

.fm-spaltenlinien .table > tbody > tr > td + td,
.fm-spaltenlinien .table > tfoot > tr > td + td,
.fm-spaltenlinien .table > thead > tr > th + th {
    border-left: 1px solid var(--pa-rand);
}

.text-danger { color: var(--pa-negativ) !important; }
.text-success { color: var(--pa-positiv) !important; }
/* Werte: negativ immer rot, positiv immer grün (Anzeige.Farbe) – ohne !important, eine Farbe der Systemwerte geht vor. */
/* Buchungslisten über der Maske: rollen in sich, die Überschrift bleibt stehen – so bleibt die Buchungsmaske darunter erreichbar. */
.bu-liste-rollen { max-height: 45vh; overflow-y: auto; }
.bu-liste-rollen > .table > thead th { position: sticky; top: 0; z-index: 1; background: var(--pa-flaeche, var(--bs-body-bg)); }
/* Depotverwaltung: markierte Zeile (linke Maustaste), Kurs-Zelle zum Eingeben, Fenster mit den Tageskursen. */
.du-zeile { cursor: pointer; }
.table > tbody > tr.du-markiert > td { --bs-table-bg-state: var(--bs-warning-bg-subtle); background-color: var(--bs-warning-bg-subtle); }
.du-kurs-zelle { cursor: text; }
.du-wp-link { color: inherit; text-decoration: none; }
.du-wp-link:hover { text-decoration: underline; color: var(--bs-link-color); }
.fm-dialog.fm-tageskurse { width: min(720px, 96vw); }
.fm-tageskurse-liste { max-height: 60vh; overflow-y: auto; }
.fm-tageskurse-liste thead th { position: sticky; top: 0; background: var(--pa-flaeche, var(--bs-body-bg)); }
/* Buchungslisten: Klick auf eine Buchung übernimmt sie in die Buchungsmaske; die geladene ist markiert. */
.bu-zeile-klick { cursor: pointer; }
.bu-liste-rollen > .table > tbody > tr.bu-in-maske > td { --bs-table-bg-state: var(--bs-warning-bg-subtle); background-color: var(--bs-warning-bg-subtle); }
/* Buchungslisten: Spaltenkopf zum Umsortieren (Datum, Wertpapier / Empfänger). */
.bu-sortierbar { cursor: pointer; user-select: none; }
.bu-sortierbar:hover { text-decoration: underline; }
/* Buchungslisten: Monatswechsel – die erste Buchung des neuen Monats leicht farbig hinterlegt, darüber ein dezenter farbiger
   Strich (unter der letzten Buchung des Vormonats). */
.bu-liste-rollen > .table > tbody > tr.bu-monatswechsel > td {
    --bu-monat-flaeche: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
    --bs-table-bg: var(--bu-monat-flaeche);
    --bs-table-bg-state: var(--bu-monat-flaeche);
    background-color: var(--bu-monat-flaeche);
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--bs-primary) 40%, var(--bs-body-bg));
}
.pa-betrag-negativ, .table > :not(caption) > * > .pa-betrag-negativ, .form-control.pa-betrag-negativ { color: var(--pa-negativ); }
.pa-betrag-positiv, .table > :not(caption) > * > .pa-betrag-positiv, .form-control.pa-betrag-positiv { color: var(--pa-positiv); }
/* Gruppen- und Summenzeilen setzen eine eigene Schriftfarbe – negativ rot und positiv grün gelten auch dort. */
.table > tbody > tr.fm-gruppe > td.pa-betrag-negativ, .table > tfoot > tr > td.pa-betrag-negativ { color: var(--pa-negativ); }
.table > tbody > tr.fm-gruppe > td.pa-betrag-positiv, .table > tfoot > tr > td.pa-betrag-positiv { color: var(--pa-positiv); }
.text-warning-emphasis { color: #f5b544 !important; }

/* ---------- Formulare und Schaltflächen ---------- */

.form-control, .form-select {
    background-color: var(--pa-flaeche-2);
    border-color: var(--pa-rand);
    color: var(--pa-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--pa-flaeche);
    border-color: var(--pa-akzent);
    color: var(--pa-text-stark);
}

.form-control::placeholder {
    color: var(--pa-gedaempft);
    opacity: 0.8;
}

.form-control:disabled, .form-select:disabled {
    background-color: var(--pa-flaeche);
    opacity: 0.6;
}

/* Datumsfelder: so breit wie ein Datum (TT.MM.JJJJ) mit Kalendersymbol. */
.form-control.pa-datumsfeld {
    width: 10.5rem;
    max-width: 100%;
}

/* Reine Anzeigefelder (z. B. Transaktionsnummer, Kontostand in der Buchung): ohne gefüllten Hintergrund. */
.form-control.pa-anzeigefeld, .form-control.pa-anzeigefeld:focus {
    background-color: transparent;
    box-shadow: none;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pa-gedaempft);
    margin-bottom: 0.25rem;
}

.form-check-input {
    background-color: var(--pa-flaeche-2);
    border-color: var(--pa-rand-stark);
}

.form-check-input:checked {
    background-color: var(--pa-akzent);
    border-color: var(--pa-akzent);
}

.btn {
    border-radius: var(--pa-radius-klein);
    font-weight: 550;
}

.btn-primary {
    --bs-btn-bg: var(--pa-akzent);
    --bs-btn-border-color: var(--pa-akzent);
    --bs-btn-color: var(--pa-akzent-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--pa-akzent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--pa-akzent) 85%, #000);
    --bs-btn-hover-color: var(--pa-akzent-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--pa-akzent) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--pa-akzent) 75%, #000);
    --bs-btn-disabled-bg: var(--pa-akzent);
    --bs-btn-disabled-border-color: var(--pa-akzent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pa-text);
    --bs-btn-border-color: var(--pa-rand-stark);
    --bs-btn-hover-bg: var(--pa-flaeche-hover);
    --bs-btn-hover-border-color: var(--pa-rand-stark);
    --bs-btn-hover-color: var(--pa-text-stark);
    --bs-btn-active-bg: var(--pa-flaeche-hover);
    --bs-btn-active-color: var(--pa-text-stark);
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--pa-akzent-weich);
    outline: none;
}

.alert {
    border-radius: var(--pa-radius-klein);
    border-width: 1px;
}

[data-bs-theme="dark"] .alert-success { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: #86efac; }
[data-bs-theme="dark"] .alert-danger { background: rgba(240, 82, 82, 0.1); border-color: rgba(240, 82, 82, 0.3); color: #fca5a5; }
[data-bs-theme="dark"] .alert-warning { background: rgba(245, 181, 68, 0.1); border-color: rgba(245, 181, 68, 0.3); color: #fcd581; }
[data-bs-theme="dark"] .alert-info { background: var(--pa-akzent-weich); border-color: color-mix(in srgb, var(--pa-akzent) 35%, transparent); color: var(--pa-text); }

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

.fm-reiter {
    border-bottom: 1px solid var(--pa-rand);
    gap: 0.25rem;
}

.fm-reiter .nav-link {
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--pa-gedaempft);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
}

.fm-reiter .nav-link:hover {
    color: var(--pa-text-stark);
}

.fm-reiter .nav-link.active {
    color: var(--pa-text-stark);
    background: none;
    border-bottom-color: var(--pa-akzent);
}

/* ---------- Depotverwaltung ---------- */

/* Gleiche Schrift wie die Felder darüber und der Rest der Anwendung (Einstellung „Schriftgröße“); ▲/▼ in der Aktionsleiste
   vergrößert oder verkleinert sie stufenweise (--du-schrift). */
.fm-depot .table {
    font-size: calc(var(--bs-body-font-size) * var(--du-schrift, 1));
}

/* Spaltenköpfe in derselben Schrift wie die Liste (statt der kleinen Großbuchstaben anderer Tabellen), auch mit ▲/▼;
   ebenso in jeder Tabelle mit ziehbaren Spalten (Kontenübersicht). */
.fm-depot .table > thead > tr > th,
table[data-pa-spalten] > thead > tr > th {
    font-size: 1em;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    min-width: 4.5rem;
    line-height: 1.2;
}

.fm-depot .table > tbody > tr > td {
    white-space: nowrap;
}

/* Depotverwaltung zweizeilig: jede Zeile ein Raster (Spalten und Einzug setzt die Seite), die zweite Hälfte der Spalten
   rückt in eine zweite Zeile; Kopf, Gruppen- und Summenzeilen ebenso – so stehen alle Werte untereinander. */
.fm-depot .table.du-zweizeilig,
.du-zweizeilig > thead, .du-zweizeilig > tbody, .du-zweizeilig > tfoot { display: block; }
.fm-depot .table.du-zweizeilig { width: 100%; min-width: 0; }
.du-zweizeilig tr { display: grid; }
.du-zweizeilig tr > th, .du-zweizeilig tr > td { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.du-zweizeilig > tbody > tr > td:first-child { white-space: normal; }

.fm-pfeil {
    display: inline-block;
    width: 0.9rem;
    font-size: 0.68rem;
    text-align: center;
}

.fm-unterbereich {
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    margin-top: 0.5rem;
    overflow: hidden;
}

.fm-unterbereich-kopf {
    background: var(--pa-flaeche-2);
    color: var(--pa-text-stark);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    display: block;
}

.fm-unterbereich .table {
    font-size: 0.82rem;
}

/* ---------- Dialoge ---------- */

.fm-dialog-hintergrund {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 16, 0.6);
    backdrop-filter: blur(3px);
    z-index: 1040;
}

.fm-dialog {
    position: fixed;
    z-index: 1050;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(580px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand-stark);
    border-radius: var(--pa-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.fm-dialog-titel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--pa-rand);
    font-size: 1rem;
    font-weight: 650;
    color: var(--pa-text-stark);
}

.fm-dialog-inhalt {
    padding: 1rem 1.1rem;
    overflow-y: auto;
    font-size: 0.86rem;
}

.fm-dialog .fm-gruppe-rahmen {
    box-shadow: none;
    background: var(--pa-flaeche-2);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.fm-feld {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
    flex: 1;
    min-width: 0;
}

/* Knöpfe neben einem Feld (z. B. „Ändern“) nicht zusammendrücken – sonst ragen sie ins Nachbarfeld. */
.fm-feld > .btn { flex: 0 0 auto; }

.fm-feld > label {
    flex: 0 0 auto;
    min-width: 7rem;
    margin: 0;
    color: var(--pa-gedaempft);
    font-size: 0.84rem;
}

.fm-feld-zeile {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.fm-dialog-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.6rem;
}

/* ---------- Ansicht anpassen ---------- */

.fm-dialog.fm-dialog-breit {
    width: min(780px, 96vw);
}

.fm-ansicht-spalten {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: start;
}

.fm-ansicht-knoepfe {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 1.4rem;
}

/* Schrift wie die Anwendung (Einstellungen › Schriftgröße) statt der kleineren Dialogschrift; Gruppentitel ohne Großbuchstaben. */
.fm-ansicht-dialog .fm-dialog-inhalt,
.fm-ansicht-dialog .fm-feld > label,
.fm-ansicht-dialog .fm-gruppe-rahmen > legend {
    font-size: var(--bs-body-font-size);
}

.fm-ansicht-dialog .fm-gruppe-rahmen > legend {
    text-transform: none;
    letter-spacing: normal;
}

.fm-ansicht-wahl {
    width: auto;
    min-width: 9rem;
    height: 2rem;
    border-radius: 999px;
}

@media (max-width: 640px) {
    .fm-ansicht-spalten {
        grid-template-columns: 1fr;
    }

    .fm-ansicht-knoepfe {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
    }
}

/* ---------- Wertpapier-Detailanzeige ---------- */

.fm-detail {
    display: grid;
    grid-template-columns: minmax(320px, 440px) 1fr;
    gap: 1.25rem;
    align-items: start;
}

.fm-detail > div {
    min-width: 0;
}

@media (max-width: 1000px) {
    .fm-detail {
        grid-template-columns: 1fr;
    }
}

.fm-kennzahlen {
    width: 100%;
    font-size: 0.86rem;
    margin-bottom: 1rem;
    font-variant-numeric: tabular-nums;
}

.fm-kennzahlen td {
    padding: 0.32rem 0;
    border-bottom: 1px solid var(--pa-rand);
}

.fm-kennzahlen tr:last-child td {
    border-bottom: 0;
}

.fm-kennzahlen td:first-child {
    color: var(--pa-gedaempft);
}

.fm-kennzahlen td:last-child {
    text-align: right;
    white-space: nowrap;
    color: var(--pa-text-stark);
    font-weight: 550;
}

.fm-buchungsliste {
    font-size: 0.82rem;
}

.fm-buchungsliste td {
    white-space: nowrap;
}

.fm-chart {
    width: 100%;
    height: 470px;
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius) var(--pa-radius) 0 0;
}

.fm-chart-rahmen { fill: none; stroke: var(--pa-rand); stroke-width: 1; }
.fm-chart-raster { stroke: var(--pa-chart-raster); stroke-width: 1; }
.fm-chart-raster-x { stroke: var(--pa-chart-raster); stroke-width: 1; }
.fm-chart-text { font-size: 11px; fill: var(--pa-chart-text); font-family: var(--bs-body-font-family); }
.fm-chart-linie { fill: none; stroke: var(--pa-akzent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fm-chart-spanne { stroke: var(--pa-akzent); stroke-width: 1; opacity: 0.4; }
.fm-chart-durchschnitt { stroke: var(--pa-positiv); stroke-width: 1.5; stroke-dasharray: 4 3; }
.fm-chart-heute { stroke: var(--pa-negativ); stroke-width: 1; opacity: 0.6; }
.fm-chart-punkt { fill: var(--pa-akzent); cursor: pointer; }
.fm-chart-treffer { fill: transparent; cursor: pointer; }
.fm-chart-umsatz { fill: var(--pa-akzent); opacity: 0.35; }
.fm-chart-zusatz { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 6 3; }

.fm-chart-legende, .fm-chart-status {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
    background: var(--pa-flaeche-2);
    border: 1px solid var(--pa-rand);
    border-top: 0;
    color: var(--pa-gedaempft);
}

.fm-chart-status {
    border-radius: 0 0 var(--pa-radius) var(--pa-radius);
    color: var(--pa-text);
}

.fm-chart-legende i {
    display: inline-block;
    width: 1.2rem;
    height: 3px;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.fm-chart-leer {
    border: 1px dashed var(--pa-rand-stark);
    border-radius: var(--pa-radius);
    padding: 3rem 1rem;
    text-align: center;
    color: var(--pa-gedaempft);
}

.fm-analyse {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.fm-analyse > section {
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-schatten);
    padding: 1rem 1.2rem;
}

.fm-analyse h2 {
    font-size: 0.8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pa-gedaempft);
    margin-bottom: 0.75rem;
}

.fm-ki-text {
    font-size: 0.9rem;
    line-height: 1.55;
}

.fm-ki-text h3 {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--pa-text-stark);
    margin: 1rem 0 0.35rem;
}

.fm-ki-text ul {
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 1100px) {
    .fm-analyse {
        grid-template-columns: 1fr;
    }
}

.fm-code {
    background: var(--pa-code);
    color: #e6edf3;
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius-klein);
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0.3rem 0 0.7rem;
}

/* ---------- Einstellungen ---------- */

.fm-einstellungen {
    display: grid;
    grid-template-columns: 12rem minmax(0, 42rem);
    gap: 1.25rem;
    align-items: start;
}

.fm-einstellungen-baum {
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    padding: 0.4rem;
}

.fm-einstellungen-baum button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--pa-radius-klein);
    color: var(--pa-text);
    padding: 0.45rem 0.7rem;
}

.fm-einstellungen-baum button:hover {
    background: var(--pa-flaeche-hover);
}

.fm-einstellungen-baum button.aktiv {
    background: var(--pa-akzent-weich);
    color: var(--pa-text-stark);
    font-weight: 600;
}

.fm-farbe {
    width: 3rem;
    height: 2rem;
    padding: 0.15rem;
}

.fm-vorschau {
    border: 1px dashed var(--pa-rand-stark);
    border-radius: var(--pa-radius-klein);
    padding: 0.75rem;
}

@media (max-width: 760px) {
    .fm-einstellungen {
        grid-template-columns: 1fr;
    }
}

/* ---------- Kleinigkeiten ---------- */

.badge {
    font-weight: 600;
}

hr {
    border-color: var(--pa-rand);
    opacity: 1;
}

pre, code {
    color: inherit;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--pa-rand);
}

/* ---------- Dashboard und Widgets ---------- */

.pa-seitenkopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pa-seitenkopf h1 {
    margin-bottom: 0.15rem;
}

.pa-seitenkopf-text {
    color: var(--pa-gedaempft);
    margin: 0;
}

.pa-seitenkopf-aktionen {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.pa-seitenkopf-aktionen .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pa-hinzufuegen {
    width: auto;
    min-width: 13rem;
}

.pa-raster {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    grid-auto-flow: row dense;
}

.pa-widget {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-schatten);
    transition: border-color 0.15s, transform 0.15s, opacity 0.15s;
}

.pa-widget.b3 { grid-column: span 3; }
.pa-widget.b4 { grid-column: span 4; }
.pa-widget.b6 { grid-column: span 6; }
.pa-widget.b8 { grid-column: span 8; }
.pa-widget.b12 { grid-column: span 12; }

@media (max-width: 1280px) {
    .pa-widget.b3 { grid-column: span 6; }
    .pa-widget.b4, .pa-widget.b8 { grid-column: span 12; }
    .pa-widget.b6 { grid-column: span 12; }
}

@media (min-width: 1281px) and (max-width: 1500px) {
    .pa-widget.b4 { grid-column: span 6; }
    .pa-widget.b8 { grid-column: span 12; }
}

@media (max-width: 640px) {
    .pa-widget.b3 { grid-column: span 12; }
}

.pa-widget-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0.2rem;
}

.pa-widget-kopf h2 {
    flex: 1;
    margin: 0;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pa-gedaempft) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    background: var(--pa-akzent-weich);
    color: var(--pa-akzent);
}

.pa-widget-inhalt {
    flex: 1;
    padding: 0.5rem 1rem 1rem;
    min-width: 0;
}

/* Bearbeiten */
.pa-bearbeiten .pa-widget {
    border-style: dashed;
    border-color: var(--pa-rand-stark);
    cursor: grab;
}

.pa-bearbeiten .pa-widget-inhalt {
    pointer-events: none;
    opacity: 0.75;
}

.pa-widget.pa-gezogen {
    opacity: 0.4;
}

.pa-widget.pa-ziel {
    border-color: var(--pa-akzent);
    border-style: solid;
    box-shadow: 0 0 0 3px var(--pa-akzent-weich);
}

.pa-griff {
    color: var(--pa-gedaempft);
    cursor: grab;
}

.pa-widget-werkzeuge {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.pa-widget-werkzeuge button, .pa-widget-werkzeuge select {
    height: 1.7rem;
    min-width: 1.7rem;
    border: 1px solid var(--pa-rand);
    border-radius: 6px;
    background: var(--pa-flaeche-2);
    color: var(--pa-text);
    font-size: 0.78rem;
    padding: 0 0.35rem;
}

.pa-widget-werkzeuge button:hover:not(:disabled) {
    background: var(--pa-flaeche-hover);
    color: var(--pa-text-stark);
}

.pa-widget-werkzeuge button:disabled {
    opacity: 0.35;
}

.pa-bearbeiten-hinweis {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pa-gedaempft);
    font-size: 0.85rem;
}

/* Laden */
.pa-laedt {
    min-height: 9rem;
    padding: 1rem;
}

.pa-skelett {
    height: 100%;
    min-height: 7rem;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--pa-flaeche-2) 25%, var(--pa-flaeche-hover) 50%, var(--pa-flaeche-2) 75%);
    background-size: 200% 100%;
    animation: pa-schimmer 1.4s infinite linear;
}

@keyframes pa-schimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.pa-leer {
    color: var(--pa-gedaempft);
    font-size: 0.86rem;
    padding: 1.25rem 0.25rem;
    text-align: center;
}

.pa-hinweiskarte {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    color: var(--pa-akzent);
}

.pa-hinweiskarte b {
    color: var(--pa-text-stark);
}

.pa-hinweiskarte p {
    margin: 0.2rem 0 0;
    color: var(--pa-gedaempft);
}

/* Kennzahlen */
.pa-kpi-wert {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pa-text-stark);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.pa-kpi-zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
    color: var(--pa-gedaempft);
    font-size: 0.84rem;
}

.pa-kpi-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--pa-flaeche-2);
    font-weight: 650;
    font-size: 0.8rem;
}

.pa-kpi-badge.text-success { background: color-mix(in srgb, var(--pa-positiv) 14%, transparent); }
.pa-kpi-badge.text-danger { background: color-mix(in srgb, var(--pa-negativ) 14%, transparent); }

.pa-kpi-liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.84rem;
}

.pa-kpi-liste span {
    color: var(--pa-gedaempft);
}

.pa-kpi-liste b {
    text-align: right;
    font-weight: 600;
    color: var(--pa-text-stark);
    font-variant-numeric: tabular-nums;
}

.pa-kpi-hinweis {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: #f5b544;
}

.pa-widget-kennzahl {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.pa-widget-kennzahl small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pa-gedaempft);
}

.pa-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.75rem;
    font-size: 0.84rem;
    font-weight: 600;
}

/* Umschalter in Widgets */
.pa-umschalter {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--pa-flaeche-2);
    border: 1px solid var(--pa-rand);
    margin-bottom: 0.75rem;
}

.pa-umschalter button {
    border: 0;
    background: none;
    color: var(--pa-gedaempft);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
}

.pa-umschalter button.aktiv {
    background: var(--pa-akzent);
    color: #fff;
}

/* Flächendiagramm */
.pa-flaeche {
    position: relative;
}

.pa-flaeche svg {
    display: block;
    width: 100%;
    height: 190px;
}

.pa-raster {
    /* (Name kollidiert nicht: Linien im SVG nutzen line.pa-raster) */
}

.pa-flaeche line.pa-raster {
    stroke: var(--pa-chart-raster);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.pa-flaeche-achse {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--pa-chart-text);
    pointer-events: none;
    text-align: right;
}

.pa-flaeche-zeit {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--pa-chart-text);
    margin-top: 0.3rem;
}

.pa-flaeche-legende {
    color: var(--pa-chart-text);
    margin-top: 0.2rem;
}

.pa-legende-strich {
    display: inline-block;
    width: 1.4rem;
    margin-right: 0.35rem;
    vertical-align: middle;
    border-top: 2px solid;
}

.pa-legende-strich.gestrichelt { border-top-style: dashed; }

/* Ringdiagramm */
.pa-ring {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.pa-ring-grafik {
    position: relative;
    width: 170px;
    height: 170px;
    flex-shrink: 0;
}

.pa-ring-grafik svg {
    width: 100%;
    height: 100%;
}

.pa-ring-mitte {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pa-ring-wert {
    font-weight: 700;
    font-size: 1rem;
    color: var(--pa-text-stark);
}

.pa-ring-titel {
    font-size: 0.7rem;
    color: var(--pa-gedaempft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pa-legende {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 10rem;
    font-size: 0.82rem;
}

.pa-legende li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.18rem 0;
}

.pa-legende i {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.pa-legende-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-legende-wert {
    color: var(--pa-text-stark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Balkenliste (größte Positionen) */
.pa-balkenliste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pa-balkenliste a {
    display: grid;
    grid-template-columns: 1fr auto 3.5rem;
    gap: 0.15rem 0.75rem;
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    color: var(--pa-text);
    text-decoration: none !important;
    font-size: 0.84rem;
}

.pa-balkenliste a:hover {
    background: var(--pa-flaeche-hover);
}

.pa-balken-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-balken-wert, .pa-balken-anteil {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pa-balken-anteil {
    color: var(--pa-text-stark);
    font-weight: 600;
}

.pa-balken {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--pa-flaeche-2);
    overflow: hidden;
}

.pa-balken i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--pa-akzent), color-mix(in srgb, var(--pa-akzent) 55%, #22d3ee));
}

/* Gewinner & Verlierer */
.pa-topflop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pa-topflop h4 {
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pa-gedaempft);
    margin: 0 0 0.35rem 0.4rem;
}

.pa-topflop-zeile {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.32rem 0.4rem;
    border-radius: 8px;
    color: var(--pa-text);
    font-size: 0.84rem;
    text-decoration: none !important;
}

.pa-topflop-zeile:hover {
    background: var(--pa-flaeche-hover);
}

.pa-topflop-zeile span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .pa-topflop { grid-template-columns: 1fr; }
}

/* Zeilenliste (Depots, Währungen, Buchungen …) */
.pa-zeilenliste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pa-zeilenliste li + li {
    border-top: 1px solid var(--pa-rand);
}

.pa-zeilenliste li > a, .pa-zeilenliste li > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.4rem;
    color: var(--pa-text);
    text-decoration: none !important;
    border-radius: 8px;
}

.pa-zeilenliste li > a:hover {
    background: var(--pa-flaeche-hover);
}

.pa-zeile-haupt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 550;
    color: var(--pa-text-stark);
}

.pa-zeile-haupt small, .pa-zeile-wert small {
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--pa-gedaempft);
}

.pa-zeile-wert {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pa-zeile-wert small.text-success, .pa-zeile-wert small.text-danger {
    font-weight: 600;
}

.pa-ki-auszug {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--pa-text);
    white-space: normal;
}

/* Status (Kursabruf) */
.pa-status {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--pa-text-stark);
}

.pa-status small {
    display: block;
    font-weight: 450;
    color: var(--pa-gedaempft);
    font-size: 0.78rem;
}

.pa-status-punkt {
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: var(--pa-gedaempft);
    flex-shrink: 0;
}

.pa-status-punkt.gut { background: var(--pa-positiv); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-positiv) 20%, transparent); }
.pa-status-punkt.schlecht { background: var(--pa-negativ); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-negativ) 20%, transparent); }

/* Einstellungen: Farbschema- und Farbwahl */
.pa-themawahl {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pa-themawahl button {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.5rem;
    border: 2px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    background: var(--pa-flaeche-2);
    color: var(--pa-text);
    font-weight: 600;
    font-size: 0.86rem;
}

.pa-themawahl button.aktiv {
    border-color: var(--pa-akzent);
}

.pa-themawahl button > span:last-child {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.pa-themawahl-bild {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    width: 9rem;
    height: 5rem;
    padding: 6px;
    border-radius: 8px;
}

.pa-themawahl-bild i { border-radius: 4px; }
.pa-themawahl-bild i:first-child { grid-row: span 2; }
.pa-themawahl-bild.dunkel { background: #0a0f1c; }
.pa-themawahl-bild.dunkel i { background: #172033; }
.pa-themawahl-bild.hell { background: #f3f5f9; border: 1px solid #e2e7ef; }
.pa-themawahl-bild.hell i { background: #ffffff; border: 1px solid #e2e7ef; }
.pa-themawahl-bild i:nth-child(2) { background: var(--pa-akzent); opacity: 0.85; }

.pa-farbfelder {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.pa-farbfelder button {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 2px var(--pa-flaeche);
}

.pa-farbfelder button.aktiv {
    border-color: var(--pa-text-stark);
}

/* Claude-Desktop-Erweiterung nach dem Erzeugen eines Zugangsschlüssels */
.pa-erweiterung {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.pa-erweiterung .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

details > summary {
    cursor: pointer;
    font-weight: 600;
}

/* Internet-Recherche (über Claude Desktop/MCP gespeichert) */
.fm-analyse > .pa-recherche {
    grid-column: 1 / -1;
}

.pa-recherche-inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: 1.5rem;
    align-items: start;
}

.pa-recherche-inhalt aside h3 {
    font-size: 0.76rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pa-gedaempft);
    margin: 0 0 0.5rem;
}

.pa-quellen {
    padding-left: 1.3rem;
    margin: 0;
    font-size: 0.84rem;
}

.pa-quellen li {
    margin-bottom: 0.55rem;
}

.pa-quellen li small {
    display: block;
    color: var(--pa-gedaempft);
    font-size: 0.75rem;
}

@media (max-width: 1000px) {
    .pa-recherche-inhalt {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================
   Stil „Terminal“ – angelehnt an Börsenterminals: schwarzer Grund, Bernstein-Schrift,
   gelbe Überschriften, Monospace, scharfe Kanten und hohe Informationsdichte.
   html[data-pa-stil] hat Vorrang vor den persönlichen Farben (:root-Block aus Oberflaeche.Css()).
   ====================================================================== */

html[data-pa-stil="terminal"] {
    --pa-grund: #000000;
    --pa-flaeche: #050505;
    --pa-flaeche-2: #101010;
    --pa-flaeche-hover: #241703;
    --pa-rand: #262626;
    --pa-rand-stark: #3a3a3a;
    --pa-text: #ffad33;
    --pa-text-stark: #ffffff;
    --pa-gedaempft: #b9832c;
    --pa-schatten: none;
    --pa-leiste: #000000;
    --pa-chart-raster: rgba(255, 173, 51, 0.12);
    --pa-chart-text: #b9832c;
    --pa-code: #000000;
    --pa-akzent: #ff8c00;
    --pa-akzent-text: #000000;
    --pa-akzent-weich: rgba(255, 140, 0, 0.18);
    --pa-positiv: #00d75f;
    --pa-negativ: #ff3b3b;
    --pa-gelb: #ffd400;
    --pa-radius: 0;
    --pa-radius-klein: 0;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-body-font-family: "Cascadia Mono", "Consolas", "Lucida Console", "Courier New", monospace;
    --bs-body-font-size: 13px;
    --fm-zeile: 2px;
    --pa-nav-hoehe: 28px;
    color-scheme: dark;
}

html[data-pa-stil="terminal"] body {
    letter-spacing: 0.01em;
}

/* Überschriften gelb und in Großbuchstaben */
html[data-pa-stil="terminal"] article h1 {
    color: var(--pa-gelb);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--pa-akzent);
    padding-bottom: 0.3rem;
}

html[data-pa-stil="terminal"] .pa-seitenkopf h1 {
    border-bottom: 0;
}

html[data-pa-stil="terminal"] .pa-widget-kopf h2,
html[data-pa-stil="terminal"] .fm-gruppe-rahmen > legend,
html[data-pa-stil="terminal"] .fm-analyse h2,
html[data-pa-stil="terminal"] .pa-abschnitt,
html[data-pa-stil="terminal"] .pa-kundenwahl label,
html[data-pa-stil="terminal"] .card .card-body > h2:first-child {
    color: var(--pa-gelb) !important;
}

/* Kopfzeilen von Widgets und Tabellen wie Funktionsleisten */
html[data-pa-stil="terminal"] .pa-widget-kopf {
    background: #1a1205;
    border-bottom: 1px solid var(--pa-akzent);
    padding: 0.3rem 0.6rem;
}

html[data-pa-stil="terminal"] .pa-widget-icon {
    background: none;
    color: var(--pa-akzent);
    width: auto;
    height: auto;
}

html[data-pa-stil="terminal"] .pa-widget-inhalt {
    padding: 0.5rem 0.6rem 0.6rem;
}

html[data-pa-stil="terminal"] .pa-raster {
    gap: 4px;
}

html[data-pa-stil="terminal"] .table > thead > tr > th {
    background: #1a1205;
    color: var(--pa-gelb);
    border-bottom: 1px solid var(--pa-akzent);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

html[data-pa-stil="terminal"] .table > tbody > tr:nth-child(even) > td {
    background: #0b0b0b;
}

html[data-pa-stil="terminal"] .table > tbody > tr:hover > td {
    background: var(--pa-flaeche-hover);
    color: var(--pa-text-stark);
}

/* Zahlen weiß, Beschriftungen Bernstein */
html[data-pa-stil="terminal"] .pa-kpi-wert,
html[data-pa-stil="terminal"] .pa-kpi-liste b,
html[data-pa-stil="terminal"] .fm-kennzahlen td:last-child,
html[data-pa-stil="terminal"] .pa-zeile-wert,
html[data-pa-stil="terminal"] .pa-legende-wert {
    color: var(--pa-text-stark);
}

html[data-pa-stil="terminal"] .pa-kpi-wert {
    font-size: 1.5rem;
    letter-spacing: 0;
}

html[data-pa-stil="terminal"] .pa-kpi-wert.text-success,
html[data-pa-stil="terminal"] .pa-kpi-liste b.text-success { color: var(--pa-positiv) !important; }
html[data-pa-stil="terminal"] .pa-kpi-wert.text-danger,
html[data-pa-stil="terminal"] .pa-kpi-liste b.text-danger { color: var(--pa-negativ) !important; }

/* Seitenleiste: Menüpunkte wie Funktionstasten */
html[data-pa-stil="terminal"] .pa-seitenleiste {
    border-right: 1px solid var(--pa-akzent);
}

html[data-pa-stil="terminal"] .pa-menue .pa-punkt {
    color: var(--pa-text);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

html[data-pa-stil="terminal"] .pa-menue .pa-punkt.active {
    background: var(--pa-akzent);
    color: #000;
    box-shadow: none;
}

html[data-pa-stil="terminal"] .pa-menue .pa-punkt.active .pa-icon {
    color: #000;
}

html[data-pa-stil="terminal"] .pa-kopf {
    background: #000;
    border-bottom: 1px solid var(--pa-akzent);
    height: 2.6rem;
}

html[data-pa-stil="terminal"] .pa-chip,
html[data-pa-stil="terminal"] .pa-avatar {
    background: var(--pa-akzent);
    color: #000;
    border-radius: 0;
}

html[data-pa-stil="terminal"] .pa-rund,
html[data-pa-stil="terminal"] .fm-aktionen .fm-aktion,
html[data-pa-stil="terminal"] .pa-umschalter,
html[data-pa-stil="terminal"] .pa-umschalter button,
html[data-pa-stil="terminal"] .pa-kpi-badge,
html[data-pa-stil="terminal"] .fm-ansicht-wahl {
    border-radius: 0;
}

html[data-pa-stil="terminal"] .fm-aktionen .fm-aktion {
    background: #1a1205;
    border-color: var(--pa-akzent);
    color: var(--pa-gelb);
    text-transform: uppercase;
    font-size: 0.76rem;
    height: 1.7rem;
}

html[data-pa-stil="terminal"] .btn-primary,
html[data-pa-stil="terminal"] .pa-umschalter button.aktiv {
    color: #000;
    font-weight: 700;
}

html[data-pa-stil="terminal"] .form-control,
html[data-pa-stil="terminal"] .form-select {
    background-color: #000;
    border-color: var(--pa-rand-stark);
    color: var(--pa-text-stark);
}

/* Karten flach, ohne Schatten */
html[data-pa-stil="terminal"] .pa-widget,
html[data-pa-stil="terminal"] .card,
html[data-pa-stil="terminal"] .fm-gruppe-rahmen,
html[data-pa-stil="terminal"] .table-responsive,
html[data-pa-stil="terminal"] .fm-analyse > section,
html[data-pa-stil="terminal"] .pa-kundenwahl {
    box-shadow: none;
    border-color: var(--pa-rand-stark);
}

/* Diagramme: Kurs orange, Durchschnitt gelb */
html[data-pa-stil="terminal"] .fm-chart-durchschnitt { stroke: var(--pa-gelb); }
html[data-pa-stil="terminal"] .pa-marke-name b { color: var(--pa-akzent); }
html[data-pa-stil="terminal"] .pa-logo { filter: none; }

/* Vorschau in den Einstellungen */
.pa-themawahl-bild.terminal { background: #000; border: 1px solid #ff8c00; }
.pa-themawahl-bild.terminal i { background: #101010; border: 1px solid #3a3a3a; }
.pa-themawahl-bild.terminal i:nth-child(2) { background: #ff8c00; opacity: 1; }

/* ---------- Systemwerte: Programmansicht ---------- */

.fm-programmfeld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--pa-rand);
    border-radius: calc(var(--pa-radius) - 4px);
    background: var(--pa-flaeche);
    cursor: default;
    user-select: none;
}

.fm-programmfeld-name {
    font-weight: 600;
}

.fm-programmfeld-bezug {
    flex-basis: 100%;
    font-size: 0.72rem;
    color: var(--pa-gedaempft);
}

.fm-programmfeld.fm-systemwertfeld {
    border-color: #dc3545;
    cursor: pointer;
}

.fm-programmfeld.fm-systemwertfeld .fm-programmfeld-name {
    color: #dc3545;
}

.fm-programmfeld:hover {
    background: var(--pa-flaeche-hover);
}

/* ---------- Formatleiste (wie Word/Outlook) ---------- */

.fm-formatleiste {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--pa-rand);
    border-radius: calc(var(--pa-radius) - 4px);
    background: var(--pa-flaeche-2, var(--pa-flaeche));
}

.fm-formatleiste-zeile {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.fm-fl-schrift { width: 12rem; }
.fm-fl-groesse { width: 11rem; } /* Platz für „Einstellungen (14)“ */

.fm-fl-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.3rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--pa-text);
    font-size: 0.95rem;
    line-height: 1;
}

.fm-fl-knopf:hover:not(:disabled) { background: var(--pa-flaeche-hover); border-color: var(--pa-rand); }
.fm-fl-knopf.aktiv { background: var(--pa-flaeche-hover); border-color: var(--pa-rand-stark); }
.fm-fl-knopf:disabled { opacity: 0.4; }
.fm-fl-knopf sup { font-size: 0.6em; }
.fm-fl-klein { font-size: 0.8rem; }

.fm-fl-trenner {
    width: 1px;
    height: 1.4rem;
    margin: 0 0.2rem;
    background: var(--pa-rand);
}

.fm-fl-farbe { position: relative; display: inline-flex; }

.fm-fl-farbsymbol {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.fm-fl-farbsymbol i {
    display: block;
    width: 1rem;
    height: 0.22rem;
    margin-top: 1px;
    border: 1px solid var(--pa-rand);
}

.fm-fl-palette {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1060;
    width: 13.5rem;
    padding: 0.4rem;
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand-stark);
    border-radius: var(--pa-radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.fm-fl-auto {
    width: 100%;
    margin-bottom: 0.35rem;
    padding: 0.25rem;
    border: 1px solid var(--pa-rand);
    border-radius: 4px;
    background: none;
    color: var(--pa-text);
    font-size: 0.8rem;
}

.fm-fl-raster {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
}

.fm-fl-feld {
    aspect-ratio: 1;
    border: 1px solid var(--pa-rand);
    border-radius: 2px;
    padding: 0;
}

.fm-fl-feld:hover { outline: 2px solid var(--pa-text-stark); }

.fm-fl-weitere {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.fm-fl-weitere input { width: 2.2rem; height: 1.5rem; padding: 0; border: 0; background: none; }

.fm-fl-vorschau {
    min-height: 1.6rem;
    padding: 0.2rem 0.4rem;
    border-top: 1px dashed var(--pa-rand);
}


/* ---------- Information zu einem Feld (i-Symbol) ---------- */

.fm-feldinfo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.3rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font: italic 700 0.72rem/1 Georgia, serif;
    vertical-align: middle;
    cursor: help;
    user-select: none;
}

.fm-feldinfo:focus-visible { outline: 2px solid var(--pa-text-stark); outline-offset: 2px; }

.fm-dialog-hintergrund.fm-dialog-oben { z-index: 1065; }
.fm-dialog.fm-dialog-oben { z-index: 1070; top: 8vh; }

.fm-feldinfo-inhalt { font-size: 0.92rem; }

.fm-info-pflege {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--pa-rand);
    border-radius: calc(var(--pa-radius) - 4px);
}

.fm-info-pflege summary { cursor: pointer; font-weight: 600; }

/* ---------- Handbuch ---------- */

.fm-handbuch {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.fm-handbuch-inhalt {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 0.8rem;
    border: 1px solid var(--pa-rand);
    border-radius: var(--pa-radius);
    background: var(--pa-flaeche);
    font-size: 0.85rem;
}

.fm-handbuch-inhalt-titel { font-weight: 650; margin-bottom: 0.4rem; }
.fm-handbuch-inhalt ol { padding-left: 1.2rem; margin: 0; }
.fm-handbuch-inhalt ul { padding-left: 0.9rem; list-style: none; font-size: 0.8rem; }
.fm-handbuch-inhalt a { text-decoration: none; }

.fm-handbuch-text { max-width: 52rem; line-height: 1.6; }
.fm-handbuch-text section { padding-bottom: 1rem; border-bottom: 1px solid var(--pa-rand); margin-bottom: 1.5rem; }
.fm-handbuch-text h2 { margin-top: 0.5rem; }
.fm-handbuch-text h3 { font-size: 1.05rem; margin-top: 1.2rem; }
.fm-handbuch-text h4 { font-size: 0.95rem; margin-top: 1rem; }
.fm-handbuch-text [id] { scroll-margin-top: 5rem; } /* unter der festen Kopfleiste */
.fm-handbuch-text :target { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); border-radius: 4px; }

@media (max-width: 900px) {
    .fm-handbuch { grid-template-columns: 1fr; }
    .fm-handbuch-inhalt { position: static; max-height: none; }
}

@media print {
    .pa-seitenleiste, .pa-kopf, .fm-handbuch-inhalt { display: none !important; }
    .fm-handbuch { display: block; }
    .fm-handbuch-text { max-width: none; }

    /* Depotbericht: ganze Breite, Tabelle ohne Rollbalken, Zeilen nicht über den Seitenumbruch, Farben wie am Bildschirm. */
    @page { size: A4 landscape; margin: 12mm; }
    main.pa-inhalt article { max-width: none !important; padding: 0 !important; }
    .fm-depot { overflow: visible !important; }
    .fm-depot .table { width: 100% !important; table-layout: auto !important; }
    .fm-depot tr { break-inside: avoid; }
    .fm-depot thead { display: table-header-group; }
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pa-wasserzeichen { display: flex !important; }
}
/* Berichtskopf des Depotberichts (nur im Ausdruck und in der Druckvorschau sichtbar). */
.du-druckkopf { margin: 1rem 0 0.6rem; }
.du-druckkopf-kunde { font-size: 1.15rem; font-weight: 700; }
.du-druckkopf-abstand { margin-top: 0.8rem; }

/* Druckvorschau des Depotberichts: Blätter in Papiergröße auf grauem Grund. */
.pa-vorschau { position: fixed; inset: 0; z-index: 1090; background: #6c757d; display: flex; flex-direction: column; }
.pa-vorschau-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem;
    background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.pa-vorschau-blaetter { flex: 1; overflow: auto; padding: 24px; }
.pa-vorschau-halter { width: fit-content; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pa-vorschau-zoom { display: flex; align-items: center; gap: 0.35rem; }
.pa-vorschau-zoom .form-select { width: auto; }
.pa-vorschau-blatt { position: relative; flex: none; background: #fff; color: #212529; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); overflow: hidden; }
.pa-vorschau-flaeche { position: absolute; overflow: hidden; }
.pa-vorschau-kopf { position: absolute; left: 0; right: 0; text-align: center; font-size: 9pt; color: #212529; }
.pa-vorschau-fuss { position: absolute; font-size: 8pt; color: #212529; }
.pa-vorschau-wasserzeichen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
    font-size: 6rem; font-weight: 700; color: rgba(0, 0, 0, 0.08); transform: rotate(-30deg); white-space: nowrap; }
@media print { .pa-vorschau { display: none !important; } }

/* Wasserzeichen des Druckdialogs: nur im Ausdruck, schräg über jeder Seite. */
.pa-wasserzeichen { display: none; position: fixed; inset: 0; align-items: center; justify-content: center; pointer-events: none; z-index: 2000;
    font-size: 6rem; font-weight: 700; color: rgba(0, 0, 0, 0.08); transform: rotate(-30deg); white-space: nowrap; }

/* Handbuch als Fenster über dem Programm */
.fm-dialog-hintergrund.fm-handbuchfenster-hintergrund { z-index: 1075; }
.fm-dialog.fm-handbuchfenster { z-index: 1080; top: 3vh; width: min(960px, 96vw); height: 92vh; max-height: 92vh; }
.fm-handbuchfenster .fm-dialog-inhalt { flex: 1; font-size: 0.92rem; }
.fm-handbuchfenster .fm-handbuch-text [id] { scroll-margin-top: 0.5rem; }
.pa-markiert { background: color-mix(in srgb, var(--bs-primary) 18%, transparent); border-radius: 4px; transition: background 0.6s; }
.fm-handbuchfenster h1 { font-size: 1.35rem; }
.fm-handbuchfenster h2 { font-size: 1.15rem; }

/* ---------- Zahlenformate („Zellen formatieren“) ---------- */

.fm-programmfeld.fm-zahlenformatfeld { border-color: #0d6efd; cursor: pointer; }
.fm-programmfeld.fm-zahlenformatfeld .fm-programmfeld-name { color: #0d6efd; }

.fm-zellen {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1rem;
}

.fm-zellen-beispiel {
    margin-bottom: 0.8rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--pa-rand);
    border-radius: 4px;
    font-family: Consolas, monospace;
}

.fm-zellen-beispiel legend { float: none; width: auto; margin: 0; padding: 0 0.2rem; font-size: 0.75rem; font-family: inherit; }

.fm-zellen-negativ {
    display: flex;
    flex-direction: column;
    max-width: 14rem;
    border: 1px solid var(--pa-rand);
    border-radius: 4px;
}

.fm-zellen-negativ button {
    padding: 0.15rem 0.5rem;
    border: 0;
    background: none;
    text-align: left;
    font-family: Consolas, monospace;
}

.fm-zellen-negativ button.aktiv { background: var(--bs-primary); color: #fff !important; }

@media (max-width: 640px) { .fm-zellen { grid-template-columns: 1fr; } }

/* Menüleiste (Einstellungen › Menüleiste): eingeklappt nur Symbole, „Nur Text“ ohne Symbole. */
@media (min-width: 901px) {
    .pa-seitenleiste.eingeklappt { width: 64px !important; }
    .pa-seitenleiste.eingeklappt .pa-marke { flex-direction: column; gap: 0.6rem; padding: 0.9rem 0.4rem; }
    .pa-seitenleiste.eingeklappt .pa-marke-text,
    .pa-seitenleiste.eingeklappt .pa-kundenwahl,
    .pa-seitenleiste.eingeklappt .pa-abschnitt,
    .pa-seitenleiste.eingeklappt .pa-punkt-text { display: none !important; }
    .pa-seitenleiste.eingeklappt .pa-menue { padding: 0 0.45rem 1.5rem; }
    .pa-seitenleiste.eingeklappt .pa-punkt { justify-content: center; padding: 0 !important; }
}

.pa-seitenleiste.nur-text:not(.eingeklappt) .pa-punkt .pa-icon { display: none; }

/* Einstellungen › Menüleiste: Menüpunkte zum An- und Abwählen in Spalten. */
.fm-punktwahl { columns: 2 12rem; column-gap: 1.5rem; }
.fm-punktwahl .form-check { break-inside: avoid; margin-bottom: 0.2rem; }

/* Eigenes Bild eines Menüpunkts (Systemwerte › Menüpunkte) statt des Symbols. */
.pa-menuebild { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.fm-wertbild { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; vertical-align: middle; }

/* ---------- Kennzeichen „Systemwerte pflegen“ am Feld (nur Administratoren) ---------- */

.fm-systemwert-pflege {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 0.25rem;
    border: 1px solid var(--bs-border-color);
    color: var(--pa-gedaempft);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.fm-systemwert-pflege:hover { color: var(--bs-primary); border-color: var(--bs-primary); }
.fm-systemwert-pflege:focus-visible { outline: 2px solid var(--pa-text-stark); outline-offset: 2px; }

/* Feld ohne aktive Systemwerte: auffällig, damit der Administrator sie anlegt. */
.fm-systemwert-pflege.fehlt {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
    font-weight: 700;
}

/* Beleg anzeigen (Doppelklick): PDF im Fenster */
.fm-dialog.fm-beleg-fenster {
    width: min(1000px, 96vw);
    height: 88vh;
    top: 3vh;
    max-width: 99vw;
    max-height: 98vh;
    min-width: 360px;
    min-height: 260px;
    resize: both; /* Größe an der rechten unteren Ecke ziehen; verschieben an der Titelleiste (thema.js) */
}

.fm-beleg-fenster .fm-dialog-titel {
    cursor: move;
    user-select: none;
}

.fm-beleg-fenster .fm-dialog-titel a,
.fm-beleg-fenster .fm-dialog-titel button {
    cursor: pointer;
}

.fm-beleg-fenster .fm-dialog-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fm-beleg-fenster iframe {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--bs-border-color);
    background: #fff;
}

/* Großansicht (⛶ bzw. „In neuem Fenster öffnen“ ohne eigenes Fenster): fast die ganze Fläche, auch nach Verschieben. */
.fm-dialog.fm-beleg-fenster.pa-gross {
    top: 1vh !important;
    left: 1vw !important;
    transform: none !important;
    width: 98vw !important;
    height: 98vh !important;
    max-height: 98vh;
    resize: none;
}

/* Während des Ziehens fängt das PDF keine Mausereignisse ab. */
.fm-beleg-fenster.pa-zieht iframe {
    pointer-events: none;
}

/* Beleg ablegen: PDF hierher ziehen oder klicken (das Dateifeld liegt unsichtbar über der Fläche) */
.fm-ablage {
    position: relative;
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.55rem 0.75rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    cursor: pointer;
}

.fm-ablage.aktiv, .fm-ablage:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.fm-ablage input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Beleg an einer Buchung (Doppelklick zeigt ihn an) */
.fm-beleg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 0.05rem 0.5rem;
    margin: 0 0.35rem 0.25rem 0;
    cursor: pointer;
    user-select: none;
}

/* Suchfeld mit Trefferliste (Wertpapier in Buchungen) */
.fm-suche {
    position: relative;
}

.fm-suche-leeren {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
}

.fm-suche-liste {
    position: absolute;
    z-index: 1040;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    max-height: 22rem;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.fm-suche-liste .list-group-item {
    cursor: pointer;
    padding: 0.35rem 0.75rem;
}

/* Tastenrechner am Betragsfeld (Symbol rechts im Feld) */
.pa-rechnerfeld {
    position: relative;
}

.pa-rechner {
    position: absolute;
    z-index: 1045;
    right: 0;
    top: calc(100% + 2px);
    width: 15rem;
}

.pa-rechner:focus {
    outline: 2px solid var(--pa-akzent);
}

.pa-rechner-anzeige {
    text-align: right;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-tertiary-bg);
}

.pa-rechner-tasten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
}

.pa-rechner-tasten .btn {
    padding: 0.35rem 0;
    font-size: 1rem;
}

/* Fenster „Kosten“ der Buchung: Beschriftung links, Betrag rechts – wie im FinanzManager. */
.fm-dialog.fm-kosten-fenster { width: min(520px, 96vw); }
.fm-kosten-zeile {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.fm-kosten-zeile > .form-label { margin: 0; }
.fm-kosten-summe { text-align: right; margin-top: 0.5rem; }
@media (max-width: 480px) { .fm-kosten-zeile { grid-template-columns: 1fr; } }

/* Kennzeichen „Gemeinschaftskonto“ (Kontenübersicht, Kontoblatt). */
.fm-gemeinschaft { background: var(--pa-flaeche-2); color: var(--pa-text-stark); border: 1px solid var(--pa-rand-stark); font-weight: 500; font-size: 0.72rem; }

/* „Einordnen helfen“: Knopf rechts unter Bereich/Zuordnung; im Fenster „Kosten“ öffnet die Hilfe als Abschnitt darunter. */
.fm-kosten-einordnen { margin-top: 0.2rem; text-align: right; }
.fm-einordnen-eingebettet {
    margin-top: 0.35rem;
    text-align: left;
    border: 1px solid var(--pa-rand-stark);
    border-radius: var(--pa-radius);
    background: var(--pa-flaeche-2);
}
.fm-einordnen-eingebettet .fm-dialog-titel { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.fm-einordnen-eingebettet .fm-dialog-inhalt { padding: 0.6rem 0.75rem; max-height: 45vh; }

/* ✎ in der Feldbeschriftung (FeldLabel): klein wie das i daneben. */
.fm-systemwert-pflege.fm-systemwert-pflege-klein {
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.3rem;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Kosten in Fremdwährung: Betrag in der Währung und daneben umgerechnet in die Systemwährung. */
.fm-dialog.fm-kosten-fenster:has(.fm-kosten-fremd) { width: min(680px, 96vw); }
.fm-kosten-zeile.fm-kosten-fremd,
.fm-kosten-zeile.fm-kosten-kopf { grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1fr); }
.fm-kosten-kopf > span { font-size: 0.78rem; font-weight: 600; color: var(--pa-gedaempft); text-align: right; }
@media (max-width: 480px) { .fm-kosten-zeile.fm-kosten-fremd, .fm-kosten-zeile.fm-kosten-kopf { grid-template-columns: 1fr 1fr; } }

/* Bereichssuche „Zuordnung“: Überschrift je Bereich, darunter seine Zuordnungen eingerückt. */
.fm-suche-liste .list-group-item.fm-suche-gruppe {
    cursor: default;
    padding: 0.3rem 0.75rem 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pa-gedaempft);
    background: var(--pa-flaeche-2);
}
.fm-suche-liste .fm-suche-gruppe ~ .list-group-item:not(.fm-suche-gruppe) { padding-left: 1.5rem; }

/* In Fenstern (z. B. „Kosten“) liegt die Trefferliste im Fluss statt darüber: Das Fenster wird länger und rollt, statt die
   Liste am unteren Rand abzuschneiden – so sind alle Zuordnungen erreichbar. */
.fm-dialog .fm-suche-liste { position: static; margin-top: 2px; max-height: 18rem; }

/* Letzter Eintrag der Bereichssuche: fehlenden Bereich bzw. fehlende Zuordnung anlegen. */
.fm-suche-liste .list-group-item.fm-suche-neu { color: var(--bs-primary); font-weight: 600; border-top: 1px dashed var(--pa-rand); }
/* Beschriftung oben neben dem Feld, auch wenn darunter eine Trefferliste aufgeklappt ist. */
.fm-kosten-zeile { align-items: start; }
.fm-kosten-zeile > .form-label { padding-top: 0.45rem; }

/* Kontenübersicht: Kontoname als Verweis (öffnet Buchungsprogramm bzw. Depotverwaltung) – in der Schrift der Zeile. */
.fm-konto-link { color: inherit; text-decoration: none; }
.fm-konto-link:hover { text-decoration: underline; }

/* Buchungsliste: Eröffnungsbuchung (Anfangssaldo des Kontos) – abgesetzt, nur Anzeige. */
.fm-eroeffnung > td { background: var(--pa-flaeche-2); font-style: italic; }

/* Dashboard „Konten & Depots“: Summenzeile abgesetzt. */
.pa-zeilenliste li.pa-zeile-summe { border-top: 2px solid var(--pa-rand-stark); }

/* Spaltenbreite mit der linken Maustaste ziehen (thema.js, data-pa-spalten): feste Breiten, zu langer Inhalt wird gekürzt. */
table[data-pa-spalten] > thead th { cursor: col-resize; }
/* Wertpapierdetail: Konto ohne gezogene Breite gekürzt, mit gezogener Breite so breit wie die Spalte. */
.fm-buchungsliste td.wd-konto { max-width: 9rem; }
.fm-buchungsliste.pa-spalten-fest td.wd-konto { max-width: none; }
table.pa-spalten-fest > thead th,
table.pa-spalten-fest > tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
}
body.pa-spalte-zieht,
body.pa-spalte-zieht * {
    cursor: col-resize !important;
    user-select: none;
}

/* Depotverwaltung ◀/▶: Breite der Seite statt der Standardbreite (MainLayout, 1680 px); höchste Stufe = ganze Bildschirmbreite. */
main.pa-inhalt article:has(.du-breite-m2) { max-width: 1200px; }
main.pa-inhalt article:has(.du-breite-m1) { max-width: 1440px; }
main.pa-inhalt article:has(.du-breite-1) { max-width: 1920px; }
main.pa-inhalt article:has(.du-breite-2) { max-width: 2240px; }
main.pa-inhalt article:has(.du-breite-3) { max-width: none; }

/* Depotverwaltung: Breite am Griff rechts neben der Liste gezogen (stufenlos, gemerkt); während des Ziehens sofort. */
main.pa-inhalt article:has(.du-breite-frei),
body.du-breite-zieht main.pa-inhalt article { max-width: var(--du-breite-px, 1680px); }
.du-ziehbereich { position: relative; }
.du-ziehgriff {
    position: absolute;
    top: 0;
    right: -0.9rem;
    width: 0.7rem;
    height: 100%;
    cursor: ew-resize;
    border-radius: 0.35rem;
}
.du-ziehgriff::before {
    content: "⋮";
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: var(--bs-secondary-color);
}
.du-ziehgriff:hover, body.du-breite-zieht .du-ziehgriff { background: var(--bs-secondary-bg); }
body.du-breite-zieht, body.du-breite-zieht * { cursor: ew-resize !important; user-select: none; }

/* Einnahmen und Ausgaben: Sortierbaum – je Ebene eine Auswahl, eingerückt mit Baumlinien. */
.ea-baum, .ea-baum ul { list-style: none; margin: 0; padding-left: 0; }
.ea-baum ul { padding-left: 1.4rem; border-left: 1px dashed var(--bs-border-color); margin-left: 0.5rem; }
.ea-baum li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.ea-baum li > ul { flex-basis: 100%; }
/* Bezeichnungen wie die Kontennamen im Fenster „Konten auswählen“: Schrift der Anwendung, normale Stärke, Textfarbe. */
.ea-baum li > .form-label { min-width: 12rem; font-size: var(--bs-body-font-size); font-weight: 400; color: var(--bs-body-color); text-transform: none; letter-spacing: normal; }
.ea-baum li > select { width: auto; min-width: 12rem; }

/* Kurschart: RSI, MACD, Mauszeiger-Anzeige und Zeitleiste (Kurschart.razor, thema.js). */
.fm-chart-feld { position: relative; }
.fm-chart-tipp {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: nowrap;
    background: var(--pa-flaeche);
    color: var(--pa-text);
    border: 1px solid var(--pa-rand-stark);
    border-radius: var(--pa-radius);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}
.fm-chart-fadenkreuz { stroke: var(--pa-gedaempft); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.fm-chart-rsi { fill: none; stroke: #2e86c1; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fm-chart-rsi-band { fill: var(--pa-akzent); opacity: 0.07; }
.fm-chart-macd { fill: none; stroke: #1f618d; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fm-chart-macd-signal { fill: none; stroke: #e67e22; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.fm-chart-macd-plus { fill: var(--pa-positiv); opacity: 0.45; }
.fm-chart-macd-minus { fill: var(--pa-negativ); opacity: 0.45; }
.fm-legende-rsi { background: #2e86c1; }
.fm-legende-macd { background: #1f618d; }
.fm-legende-signal { background: #e67e22; }
.fm-chart-navi {
    display: block;
    width: 100%;
    height: 56px;
    background: var(--pa-flaeche);
    border: 1px solid var(--pa-rand);
    border-top: 0;
    user-select: none;
}
.fm-navi-linie { fill: none; stroke: var(--pa-akzent); stroke-width: 1; opacity: 0.7; vector-effect: non-scaling-stroke; }
.fm-navi-schatten { fill: var(--pa-gedaempft); opacity: 0.18; pointer-events: none; }
.fm-navi-fenster { fill: var(--pa-akzent); opacity: 0.12; stroke: var(--pa-akzent); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: grab; }
.fm-navi-griff { fill: var(--pa-akzent); opacity: 0.85; cursor: ew-resize; }
body.fm-navi-zieht, body.fm-navi-zieht * { cursor: grabbing !important; user-select: none; }
.wd-gd-farbe { display: inline-block; width: 0.9rem; height: 3px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
.fm-chart-kauf { fill: var(--pa-positiv); stroke: var(--pa-flaeche); stroke-width: 0.8; }
.fm-chart-verkauf { fill: var(--pa-negativ); stroke: var(--pa-flaeche); stroke-width: 0.8; }

/* Anmeldung (AnmeldeLayout): ohne Menü und Kopfleiste, Inhalt mittig. */
.pa-anmeldung { min-height: 100vh; background: var(--pa-grund); }
.pa-anmeldung .pa-marke-link { display: flex; align-items: center; gap: 0.6rem; color: var(--pa-text); }
.pa-anmeldung .pa-marke-name { font-size: 1.1rem; }
.pa-anmeldung .pa-marke-name b { color: var(--pa-akzent); font-weight: 600; }
.pa-anmeldung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; }
.pa-anmeldung-inhalt { max-width: 34rem; margin: 2rem auto; padding: 2rem; background: var(--pa-flaeche); border: 1px solid var(--pa-rand); border-radius: var(--pa-radius); }
.pa-anmeldung-inhalt .row > [class*="col-"] { flex: 1 0 100%; max-width: 100%; }

/* Passwortfelder mit Auge (thema.js): rechts im Feld, Klick zeigt bzw. verbirgt das Passwort. */
input[type="password"], input[type="password"].form-control, input[data-pa-passwort], input[data-pa-passwort].form-control {
    padding-right: 2.4rem;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.15rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
input[data-pa-passwort="sichtbar"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-7 0-11-7-11-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 7 11 7a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}