/**
 * Optionen rollen — Roll-Assistent
 *
 * Ausschliesslich Tokens aus dem zentralen Design-System
 * (themes/optionfinder-theme/assets/css/design-system.css). Keine Rueckfallwerte:
 * Sie wuerden ein abweichendes Design erzeugen, sobald ein Token umbenannt wird,
 * statt den Fehler sichtbar zu machen. Keine Pixelwerte fuer Schrift, keine
 * hartkodierten Farben, keine eigenen Radien.
 *
 * Das dunkle Thema kommt ebenfalls aus dem Design-System: Es definiert dieselben
 * Tokens unter [data-theme="dark"] neu. Eigene Dunkel-Regeln sind daher nur dort
 * noetig, wo mit Transparenz statt mit Token-Farben gearbeitet wird.
 */

/* Konvention der Plattform: Werte, die live aus der TWS stammen, stehen in Blau —
   so wie in der Ordereingabe (.ib-order-combo__ref--tws). Der Wert ist dort
   hartkodiert und existiert nicht als Token; hier deshalb komponentenlokal
   benannt. Gehoert mittelfristig als --of-tws ins zentrale Design-System, damit
   beide Stellen dieselbe Quelle haben. */
:root {
    --orl-tws: #2563eb;
    /* Dritte Kartenfarbe. Blau schied aus: Es liegt zu nah am TWS-Blau, mit
       dem auf dieser Seite die Herkunft der Werte gekennzeichnet wird. Gewaehlt
       ist deshalb ein warmer Bernsteinton — deutlich von Teal und Violett
       unterschieden und weit weg von der Herkunftsfarbe. Etwas dunkler als
       --of-warning, damit er nicht als Warnung gelesen wird. */
    /* Getoentes Blau fuer Hinweise — das Design-System fuehrt --of-info,
       aber keine zugehoerige Toenung. */
    --orl-info-light:      rgba(59, 130, 246, 0.10);
    --orl-bernstein:       #b45309;
    --orl-bernstein-light: rgba(180, 83, 9, 0.08);
}
[data-theme="dark"] {
    --orl-tws: #60a5fa;
}

/* Nur fuer Zahlen, die tatsaechlich aus der TWS kommen. Ohne Bridge- UND
   TWS-Verbindung bleiben Werte in normaler Textfarbe — die Farbe ist eine
   Herkunftsangabe, keine Verzierung.
   Die Tabellenzelle wird ausdruecklich mitgenannt: `.orl-table td` setzt eine
   eigene Textfarbe und hat als Kombination aus Klasse und Element die hoehere
   Spezifitaet — ohne diesen Selektor blieben die Werte schwarz, obwohl die
   Klasse korrekt gesetzt war. */
.orl-live,
.orl-table td.orl-live,
.orl-table th.orl-live { color: var(--orl-tws); }

/* Breiter als der uebrige Mitgliederbereich: Die Zieltabelle traegt in der
   Expertenansicht dreizehn Spalten, mehrere davon zweizeilig. Mit der
   Standardbreite brach die Strike-Spalte auf drei Zeilen um — das Warnzeichen
   landete allein auf der letzten. */
.orl-wrap {
    max-width: min(96rem, 100%);
    margin: 0 auto;
    padding: var(--of-space-5) var(--of-space-4) var(--of-space-16);
}

.orl-title {
    font-size: var(--of-text-2xl);
    font-weight: var(--of-weight-bold);
    color: var(--of-text-primary);
    margin: 0 0 var(--of-space-1);
}

.orl-lead {
    font-size: var(--of-text-sm);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-secondary);
    margin: 0 0 var(--of-space-5);
    max-width: 70ch;
}

/* Auf Telefonen ist der Assistent nicht nutzbar: Die Bridge laeuft dort nicht,
   und die Zieltabelle traegt bis zu dreizehn Spalten. Der Menuepunkt ist
   ausgeblendet — wer die Seite dennoch aufruft (Lesezeichen, geteilter Link),
   soll den Grund erfahren statt eine unlesbare Tabelle. */
.orl-nur-desktop { display: none; }
@media (max-width: 768px) {
    .orl-nur-desktop {
        display: block;
        border: 1px solid var(--of-border);
        border-left: 3px solid var(--of-warning);
        border-radius: var(--of-radius-md);
        background: var(--of-bg-card);
        padding: var(--of-space-4);
        margin-bottom: var(--of-space-4);
        font-size: var(--of-text-sm);
        line-height: var(--of-leading-relaxed);
        color: var(--of-text-secondary);
    }
    /* Der Assistent selbst bleibt erreichbar — verborgen waere bevormundend —,
       aber die Tabelle scrollt dann eben waagerecht. */
    .orl-wrap { padding-left: var(--of-space-3); padding-right: var(--of-space-3); }
}

/* ── Anleitung ──────────────────────────────────────────────────────────── */

.orl-guide {
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-md);
    background: var(--of-bg-card);
    margin-bottom: var(--of-space-6);
    overflow: hidden;
}

.orl-guide__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--of-space-3);
    padding: var(--of-space-3) var(--of-space-4);
    cursor: pointer;
    list-style: none;
    background: var(--of-bg-secondary);
}
.orl-guide__summary::-webkit-details-marker { display: none; }

.orl-guide__title {
    font-size: var(--of-text-base);
    font-weight: var(--of-weight-bold);
    color: var(--of-text-primary);
}

/* Pfeil dreht sich beim Aufklappen — reines CSS, kein JS noetig. */
.orl-guide__toggle {
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--of-text-muted);
    border-bottom: 2px solid var(--of-text-muted);
    transform: rotate(45deg);
    transition: transform var(--of-ease-base);
    margin-right: var(--of-space-1);
}
.orl-guide[open] .orl-guide__toggle { transform: rotate(-135deg); }

.orl-guide__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--of-space-5);
    padding: var(--of-space-4);
    border-top: 1px solid var(--of-border);
}

.orl-guide__col h3 {
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-semibold);
    color: var(--of-teal);
    margin: 0 0 var(--of-space-2);
}
.orl-guide__col p,
.orl-guide__col li {
    font-size: var(--of-text-xs);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-secondary);
    margin: 0 0 var(--of-space-2);
}
.orl-guide__col ul { margin: 0; padding-left: var(--of-space-4); }

/* ── Schritte ───────────────────────────────────────────────────────────── */

.orl-step {
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-md);
    background: var(--of-bg-card);
    padding: var(--of-space-4);
    margin-bottom: var(--of-space-4);
}
.orl-step--pending { opacity: .55; }

.orl-step__head {
    display: flex;
    align-items: center;
    gap: var(--of-space-3);
    margin-bottom: var(--of-space-4);
}

.orl-step__nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--of-radius-full);
    background: var(--of-teal);
    color: var(--of-text-inverse);
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-bold);
    flex-shrink: 0;
}

.orl-step__title {
    font-size: var(--of-text-base);
    font-weight: var(--of-weight-bold);
    color: var(--of-text-primary);
    margin: 0;
}

/* ── Schritt 1: Herkunft der Position ───────────────────────────────────── */

.orl-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--of-space-3);
}

.orl-source {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-2);
    text-align: left;
    padding: var(--of-space-4);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-md);
    background: var(--of-bg-secondary);
    cursor: pointer;
    transition: border-color var(--of-ease-fast), background var(--of-ease-fast);
    font-family: var(--of-font-sans);
}
.orl-source:hover {
    border-color: var(--of-teal);
    background: var(--of-bg-card);
}
.orl-source[aria-pressed="true"] {
    border-color: var(--of-teal);
    background: var(--of-bg-card);
    box-shadow: inset 0 0 0 1px var(--of-teal);
}
.orl-source[disabled] { opacity: .55; cursor: not-allowed; }

.orl-source__title {
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-semibold);
    color: var(--of-text-primary);
}
.orl-source__text {
    font-size: var(--of-text-xs);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-secondary);
}
.orl-source__state {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
/* Voraussetzungen der Bridge-Karte: zwei Zeilen, je mit Haken oder Kreuz.
   Der Text bleibt in normaler Schriftfarbe — nur das Zeichen traegt Farbe,
   sonst konkurrieren zwei farbige Zeilen um dieselbe Aufmerksamkeit. */
.orl-checks {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
    margin-top: var(--of-space-1);
}
.orl-check {
    display: flex;
    align-items: center;
    gap: var(--of-space-2);
    font-size: var(--of-text-xs);
    color: var(--of-text-primary);
}
.orl-check__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    font-weight: var(--of-weight-bold);
    line-height: 1;
}
.orl-check[data-orl-ok="yes"] .orl-check__icon::before { content: "✓"; color: var(--of-success); }
.orl-check[data-orl-ok="no"]  .orl-check__icon::before { content: "✗"; color: var(--of-error); }
.orl-check[data-orl-ok="pending"] .orl-check__icon::before { content: "…"; color: var(--of-text-muted); }
.orl-check[data-orl-ok="pending"] { color: var(--of-text-muted); }

.orl-source__state:empty { display: none; }
.orl-source__state--ok   { color: var(--of-success); }
.orl-source__state--off  { color: var(--of-text-muted); }
.orl-source__state--warn { color: var(--of-warning); }

/* Voraussetzung fehlt (Bridge aus oder TWS nicht verbunden). Deutlich sichtbar,
   weil sie den ganzen Bridge-Weg blockiert. */
.orl-alert {
    font-size: var(--of-text-sm);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-primary);
    background: var(--of-bg-secondary);
    border: 1px solid var(--of-warning);
    border-left-width: 3px;
    border-radius: var(--of-radius-sm);
    padding: var(--of-space-3) var(--of-space-4);
    margin-bottom: var(--of-space-4);
}

/* ── Schritt 2: erkannte Strategie ──────────────────────────────────────── */

.orl-recognized {
    font-size: var(--of-text-sm);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-primary);
    margin: 0;
}

/* ── Schritt 3: Roll-Varianten ──────────────────────────────────────────── */

/* Roll-Varianten als umrandete Knoepfe.
   Zuvor waren es Textknoepfe mit farbigem Unterstrich (Muster Sektor-Cockpit).
   Das trug bei zwei Varianten, wurde mit vieren aber unlesbar: Ohne Rahmen war
   nicht mehr erkennbar, dass es sich um eine Auswahl handelt. Grauer Rahmen im
   Ruhezustand, Teal beim Aktiven — Teal ist die Akzentfarbe der Plattform, ein
   eigenes Gruen waere ein zweites Farbsystem. */
/* Zusammenhaengende Schaltergruppe wie der Ansichts-Umschalter: Die Varianten
   schliessen einander aus, und nebeneinanderliegende Felder mit geteilter Kante
   zeigen das. Einzeln stehende Knoepfe lasen sich wie mehrere unabhaengige
   Schalter, von denen man auch keinen oder mehrere druecken koennte. */
.orl-variants {
    display: inline-flex;
    flex-wrap: wrap;
}

/* Ruhezustand identisch zum Ansichts-Umschalter: gleicher Grund, gleiche
   Schriftfarbe. Zwei Schaltergruppen auf einer Seite, die sich im Grau
   unterscheiden, lesen sich als zwei verschiedene Arten von Bedienelement.
   Die Schrift bleibt eine Stufe groesser als dort: Die Variantenwahl ist die
   Entscheidung der Seite, der Ansichts-Umschalter nur eine Voreinstellung. */
.orl-variant {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    padding: var(--of-space-1) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-left-width: 0;
    background: var(--of-bg-secondary);
    color: var(--of-text-muted);
    cursor: pointer;
    transition: color var(--of-ease-fast), border-color var(--of-ease-fast),
                background var(--of-ease-fast);
}
.orl-variant:first-child {
    border-left-width: 1px;
    border-radius: var(--of-radius-md) 0 0 var(--of-radius-md);
}
.orl-variant:last-child {
    border-radius: 0 var(--of-radius-md) var(--of-radius-md) 0;
}
.orl-variant:hover { color: var(--of-text-primary); }

/* Beim Condor: die Seite, die dem Kurs am naechsten liegt. Kein Farbwechsel am
   Text — nur ein kleines Kennzeichen, damit die Auswahl eine Empfehlung bekommt
   und nicht bevormundet wird. */
.orl-eng-marker {
    display: inline-block;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-normal);
    color: var(--of-warning);
    border: 1px solid var(--of-warning);
    border-radius: var(--of-radius-sm);
    padding: 0 var(--of-space-1);
    margin-left: var(--of-space-1);
    cursor: help;
}
.orl-variant[aria-pressed="true"] {
    color: var(--of-text-inverse);
    border-color: var(--of-teal);
    background: var(--of-teal);
}
/* Die geteilte Kante zum naechsten Feld muss mitfaerben, sonst bleibt dort ein
   heller Strich stehen. */
.orl-variant[aria-pressed="true"] + .orl-variant { border-left-color: var(--of-teal); }

/* Auf teal-Grund braucht der Marker einen eigenen hellen Untergrund, sonst
   verschwindet die Warnfarbe. Weiss zu faerben war der falsche Ausweg: Damit
   verlor er seine Bedeutung und sah aus wie ein Teil der Beschriftung. */
.orl-variant[aria-pressed="true"] .orl-eng-marker {
    background: var(--of-bg-card);
    color: var(--of-warning);
    border-color: var(--of-bg-card);
}

/* Erklaerung erscheint erst nach der Auswahl — alle Texte gleichzeitig waeren
   eine Wand, in der die Entscheidung untergeht.
   Optik wie die Hinweisboxen an anderer Stelle (z.B. Bridge-Einrichtung):
   getoenter Hintergrund plus farbige Kante links. */
.orl-variant-info {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
    margin-top: var(--of-space-3);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid rgba(20, 184, 166, .28);
    border-radius: var(--of-radius-md);
    background: rgba(20, 184, 166, .08);
}
/* Ohne diese Regel bleibt der Kasten wegen display:flex sichtbar, obwohl er
   das hidden-Attribut traegt — er stand dann leer ueber der Auswahl. */
.orl-variant-info[hidden] { display: none; }
/* Schrift in derselben Farbe wie Rahmen und Tönung — wie beim Pflichthinweis
   im Order-Dialog. Dort sind die Werte allerdings inline hartkodiert; hier
   kommen sie aus dem Token. */
.orl-variant-info strong {
    font-size: var(--of-text-xs);
    color: var(--of-teal);
}
.orl-variant-info span {
    font-size: var(--of-text-2xs);
    line-height: var(--of-leading-relaxed);
    color: var(--of-teal);
}

.orl-pick.is-active {
    background: var(--of-teal);
    color: var(--of-text-inverse);
}

/* ── Schritt 4: Laufzeit und Ziele ──────────────────────────────────────── */

/* Verfalls-Knoepfe statt Regler — Muster wie im Chart-Modal. Der Verfall, in
   dessen Laufzeit die Quartalszahlen fallen, ist rot: Das ist die haeufigste
   Falle beim Rollen und war bisher nur bei der Neueroeffnung sichtbar. */
.orl-expiries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--of-space-2);
    margin-bottom: var(--of-space-3);
}
/* Drei Zeilen je Kachel — Datum, Restlaufzeit, Zahl der Ziele — brauchen mehr
   Raum als die frueheren zwei. */
.orl-exp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 5.5rem;
    font-family: var(--of-font-sans);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    cursor: pointer;
    transition: border-color var(--of-ease-fast), background var(--of-ease-fast);
}
.orl-exp:hover { border-color: var(--of-teal); }
/* Die geladene Laufzeit muss unabhaengig von der Randfarbe erkennbar sein: Bei
   der Earnings-Laufzeit bleibt der Rand rot, und ein tealfarbener Rand allein
   waere dort nicht zu sehen gewesen. Deshalb zusaetzlich ein farbiger Balken am
   oberen Rand und eine getoente Flaeche. */
.orl-exp.is-active {
    border-color: var(--of-teal);
    background: var(--of-bg-secondary);
    box-shadow: inset 0 2px 0 0 var(--of-teal);
    font-weight: var(--of-weight-semibold);
}
.orl-exp__date {
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    color: var(--of-text-primary);
}
.orl-exp__dte { font-size: var(--of-text-2xs); color: var(--of-text-muted); }
/* Zahl der Roll-Ziele. Steht ohne Ziel in Warnfarbe: Die Kachel ist dann zwar
   anklickbar, hat aber nichts anzubieten — genau das soll man vorher sehen. */
.orl-exp__anz {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    white-space: nowrap;
}
.orl-exp--leer .orl-exp__anz { color: var(--of-warning); }
/* Genaues Datum der Quartalszahlen, eingeschoben an seiner Stelle im
   Zeitstrahl. Bernstein statt Rot: Es ist ein Termin, keine Warnung — die
   Warnung ist die rot umrandete Laufzeit rechts daneben. */
.orl-exp-termin {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    color: var(--of-warning);
    border-left: 2px solid var(--of-warning);
    padding: var(--of-space-1) var(--of-space-2);
    cursor: help;
    white-space: nowrap;
}
.orl-exp-termin__label {
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-normal);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
}

/* Laufzeit mit Quartalszahlen — rot umrandet wie in der Optionskette des
   Chart-Moduls, damit dieselbe Markierung ueberall dasselbe bedeutet. */
.orl-exp--earnings { border-color: var(--of-error); }
.orl-exp--earnings .orl-exp__date { color: var(--of-error); }
/* Rand bleibt rot (Earnings), der Aktiv-Zustand traegt der Balken oben. */
.orl-exp--earnings.is-active {
    border-color: var(--of-error);
    box-shadow: inset 0 2px 0 0 var(--of-teal);
}

/* ── Vorschläge über alle Laufzeiten ────────────────────────────────────── */

.orl-top { margin-bottom: var(--of-space-4); }
/* Ueberschrift der Vorschlagskarten. Als Versalien-Kleinschrift war sie eine
   Rubrikbeschriftung; mit dem ausgeschriebenen Namen ist sie eine Aussage und
   traegt deshalb normale Schrift. */
.orl-top__kopf {
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-semibold);
    color: var(--of-text-primary);
    margin-bottom: var(--of-space-2);
}
/* Feste Dreiteilung, auch wenn nur eine oder zwei Karten uebrig bleiben (zwei
   Kriterien koennen auf dieselbe Option zeigen). Mit auto-fit zog eine einzelne
   Karte ueber die volle Breite und sah aus wie ein Banner statt wie eine von
   drei Moeglichkeiten. */
.orl-top__karten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--of-space-3);
}
@media (max-width: 48rem) {
    .orl-top__karten { grid-template-columns: 1fr; }
}
.orl-top__karte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font-family: var(--of-font-sans);
    padding: var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-md);
    background: var(--of-bg-card);
    cursor: pointer;
    transition: border-color var(--of-ease-fast);
}
.orl-top__karte:hover { border-color: var(--of-text-muted); }

/* Drei Gesichtspunkte, drei Farben. Ein breiter Streifen am linken Rand plus
   ein zart getoenter Grund — kraeftig genug, um die Karten auf einen Blick zu
   unterscheiden, zurueckhaltend genug, dass die Zahlen darin lesbar bleiben.
   Die Farben stammen aus dem Design-System und tragen dort bereits Bedeutung:
   Teal ist die Systemfarbe (Ertrag), Violett steht fuer Persoenliches
   (Sicherheit), Blau ist die Informationsfarbe (Zeit). */
.orl-top__karte--1 { background: var(--of-teal-light); }
.orl-top__karte--2 { background: var(--of-violet-light); }
.orl-top__karte--3 { background: var(--orl-bernstein-light); }
/* Gewaehlter Vorschlag: Der Rahmen sagt „dieser ist gerade im Chart" — die
   Kachelfarben sind schon vergeben und koennen den Zustand nicht mit tragen. */
.orl-top__karte.is-fest {
    outline: 2px solid var(--of-teal);
    outline-offset: -2px;
}
.orl-top__karte--1 .orl-top__titel { color: var(--of-teal); }
.orl-top__karte--2 .orl-top__titel { color: var(--of-violet); }
.orl-top__karte--3 .orl-top__titel { color: var(--orl-bernstein); }

.orl-top__titel {
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
}
.orl-top__ziel {
    font-size: var(--of-text-sm);
    color: var(--of-text-primary);
}
.orl-top__zahlen {
    font-size: var(--of-text-xs);
    color: var(--of-text-secondary);
}
/* Herkunftsfarbe schlaegt die Grundfarbe der Karte. */
.orl-top__zahlen.orl-live { color: var(--orl-tws); }
.orl-top__grund {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    line-height: var(--of-leading-relaxed);
}

/* Kein Kandidat mit Netto-Credit — das ist selbst die Aussage. */
.orl-top--leer {
    font-size: var(--of-text-sm);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-secondary);
    background: var(--of-bg-secondary);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-md);
    padding: var(--of-space-3) var(--of-space-4);
}

/* Bezugszeile: was der Ausstieg aus der bestehenden Position kostet. */
.orl-basis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--of-space-1) var(--of-space-4);
    font-size: var(--of-text-sm);
    color: var(--of-text-primary);
    background: var(--of-bg-secondary);
    /* Im dunklen Modus liegt die Sekundaerfarbe dicht an der Kartenflaeche —
       die Zeile verschwand darin. Die Kante trennt sie in beiden Modi. */
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    padding: var(--of-space-2) var(--of-space-3);
    margin: 0 0 var(--of-space-3);
}
.orl-basis__label {
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
}
/* Jedes Feld der Zeile besteht aus Bezeichnung und Wert. Die Bezeichnungen
   („Kurs", „Strike", „Verfall", „Aktien-Einstand") tragen dieselbe Typografie
   wie die Rubrik links — sonst liest sich eines davon als Wert. */
.orl-basis__feld {
    display: inline-flex;
    align-items: baseline;
    gap: var(--of-space-1);
}
.orl-basis__name {
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
}
.orl-basis__wert { font-weight: var(--of-weight-semibold); }
.orl-basis__rest { font-size: var(--of-text-2xs); color: var(--of-text-muted); }
.orl-basis__rechts { margin-left: auto; }
/* Zweiter Block der Bezugszeile: die Lage der Position. Die Kante trennt ihn
   von der Beschreibung links — beide Haelften beantworten verschiedene Fragen. */
.orl-basis__lage {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--of-space-1) var(--of-space-4);
    /* Immer eigene Zeile, linksbündig unter der Beschreibung. Rechts angesetzt
       rutschte der Block bei langen Zeilen — Iron Condor mit vier Strikes,
       offenen Orders und ruhender Seite — an den rechten Rand einer zweiten
       Zeile und stand dort ohne Bezug. Unten links liest er sich als das, was
       er ist: die zweite Aussage zu derselben Position. */
    flex-basis: 100%;
    padding-top: var(--of-space-2);
    border-top: 1px solid var(--of-border);
}

/* Eingebetteter Kursverlauf. Er steht zwischen Positionszeile und Tabelle und
   bleibt beim Vergleichen der Zeilen stehen — anders als ein Fenster, das man
   je Zeile neu oeffnen muesste. */
.orl-chart-kasten {
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-md);
    background: var(--of-bg-card);
    padding: var(--of-space-3) var(--of-space-3) var(--of-space-2);
    margin-bottom: var(--of-space-4);
}
.orl-chart { width: 100%; height: 520px; position: relative; }

/* Betrag an einer Flaeche. Links am Beginn der Zone statt rechts: Dort stehen
   die Preisschilder der Achse, und zwei Angaben uebereinander waeren beide
   schlechter zu lesen. */
.orl-chart__betrag {
    position: absolute;
    padding: 1px var(--of-space-2);
    border-radius: var(--of-radius-sm);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    white-space: nowrap;
    pointer-events: none;
}
.orl-chart__betrag.is-plus  { background: rgba(16, 185, 129, .12); color: var(--of-success); }
.orl-chart__betrag.is-minus { background: rgba(239, 68, 68, .12);  color: var(--of-error); }

/* Ladehinweis in einem Notiz-Kasten: Spinner und Text auf einer Linie. */
.orl-note--laedt {
    display: flex;
    align-items: center;
    gap: var(--of-space-2);
}

/* Ladeanzeige ueber dem Chart. Oben mittig statt in der Mitte: Dort verdeckt sie
   den Kursverlauf nicht, ist aber im Blick. */
.orl-chart__laedt {
    position: absolute;
    top: var(--of-space-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--of-space-2);
    padding: var(--of-space-1) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-full);
    background: var(--of-bg-card);
    font-size: var(--of-text-2xs);
    color: var(--of-text-secondary);
    pointer-events: none;
}

/* Auf- und zuklappen. Das Dreieck zeigt nach unten, wenn der Chart offen ist —
   dieselbe Richtung wie in der Anleitung oben auf der Seite. */
.orl-chart__falter {
    display: inline-flex;
    align-items: center;
    gap: var(--of-space-2);
    background: none;
    border: 0;
    padding: 0 0 var(--of-space-2);
    cursor: pointer;
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
}
.orl-chart__falter:hover { color: var(--of-text-primary); }
.orl-chart__falter:focus-visible { outline: 2px solid var(--of-teal); outline-offset: 2px; }
.orl-chart__falter-pfeil {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .15s ease;
}
.orl-chart__falter[aria-expanded="false"] .orl-chart__falter-pfeil { transform: rotate(-90deg); }
/* Zugeklappt bleibt nur die Kopfzeile stehen. */
.orl-chart-kasten.is-zu .orl-chart,
.orl-chart-kasten.is-zu .orl-chart__legende { display: none; }
.orl-chart-kasten.is-zu { padding-bottom: var(--of-space-2); }

@media (prefers-reduced-motion: reduce) {
    .orl-chart__falter-pfeil { transition: none; }
}

/* Eigene Ebene ueber dem Chart: senkrechte Termin-Linien und die getoente Zone.
   Ohne Zeigerereignisse, damit das Fadenkreuz des Charts weiter funktioniert. */
.orl-chart__ebene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    /* Ueber der Zeichenflaeche: Die Beschriftungen lagen im hellen Modus
       optisch UNTER der Kurslinie. Ein eigener Grund hinter der Schrift half
       nicht — auf der getoenten Plus-Zone sah er schlechter aus als das
       Problem. */
    z-index: 2;
}
.orl-chart__zone { position: absolute; }
/* Spreadbereich: zwischen verkauftem und absicherndem Strike waechst der
   Verlust. Schraffur statt Flaeche, damit er sich von der Plus-Zone
   unterscheidet und beide uebereinander lesbar bleiben. */
.orl-chart__spread {
    position: absolute;
    background: repeating-linear-gradient(
        45deg,
        rgba(239, 68, 68, 0.10) 0 6px,
        rgba(239, 68, 68, 0)    6px 12px
    );
}
/* Hinter dem absichernden Leg: voller Maximalverlust, aber ohne weitere
   Steigerung. Ruhige Flaeche statt Schraffur — die Schraffur heisst „waechst". */
.orl-chart__maxverlust {
    position: absolute;
    background: rgba(239, 68, 68, 0.07);
}
/* Gegenstueck dazu: der Bereich, in dem der Gewinn noch waechst — zwischen
   Break-even und verkauftem Strike. Gleiche Machart wie die Verlust-Schraffur,
   nur gruen und in die andere Richtung geneigt, damit beide auch dort
   unterscheidbar bleiben, wo sie aneinanderstossen. */
.orl-chart__gewinn {
    position: absolute;
    background: repeating-linear-gradient(
        -45deg,
        rgba(16, 185, 129, 0.12) 0 6px,
        rgba(16, 185, 129, 0)    6px 12px
    );
}
/* Kanten der Zone: duenne Linie mit dem Preis, ab dem sie endet. */
.orl-chart__kante {
    position: absolute;
    border-top: 1px solid;
}
.orl-chart__kante-text {
    position: absolute;
    right: 4px;
    top: -1.05rem;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    white-space: nowrap;
    /* Feiner Saum in der Hintergrundfarbe statt eines Kastens: Auf dem Gitter
       und auf den getoenten Zonen war die Schrift sonst schwer zu lesen, ein
       Kasten sah auf der Plus-Zone aber schlechter aus als das Problem. Der
       Saum legt sich nur um die Buchstaben. */
    text-shadow:
         1px  1px 0 var(--of-bg-primary),
        -1px  1px 0 var(--of-bg-primary),
         1px -1px 0 var(--of-bg-primary),
        -1px -1px 0 var(--of-bg-primary);
}
.orl-chart__termin {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px dashed;
    opacity: .7;
}
.orl-chart__termin.is-stark { border-left-style: solid; opacity: 1; }
.orl-chart__termin-text {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    white-space: nowrap;
    text-shadow:
         1px  1px 0 var(--of-bg-primary),
        -1px  1px 0 var(--of-bg-primary),
         1px -1px 0 var(--of-bg-primary),
        -1px -1px 0 var(--of-bg-primary);
}

.orl-chart__legende {
    display: flex;
    flex-wrap: wrap;
    /* stretch, damit die Kaesten gleich hoch werden — sonst richtet sich jeder
       nach seinem eigenen Inhalt und die Reihe wird unruhig. */
    align-items: stretch;
    gap: var(--of-space-2) var(--of-space-3);
    margin: var(--of-space-2) 0 0;
    font-size: var(--of-text-2xs);
    color: var(--of-text-secondary);
}
/* Jede Gruppe in einem eigenen Kasten. Eine blosse Trennkante genuegte nicht:
   Bei dreizehn Schaltern in einer umbrechenden Zeile war nicht mehr zu sehen,
   welcher Schalter noch zu welcher Ueberschrift gehoert. Der Kasten haelt die
   Gruppe auch dann zusammen, wenn die Zeile umbricht. */
.orl-chart__gruppe {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--of-space-1) var(--of-space-3);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-md);
    /* Gleiche Breite fuer alle drei: Sie teilen sich den Platz zu gleichen
       Teilen, unabhaengig davon, wie lang die Beschriftungen darin sind.
       Die Untergrenze laesst sie umbrechen statt zu zerquetschen. */
    flex: 1 1 0;
    min-width: 15rem;
}
.orl-chart__gruppe-name {
    width: 100%;
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
    margin-bottom: 2px;
}

/* Termine sind senkrechte Linien im Chart — ihr Musterstrich steht deshalb
   ebenfalls senkrecht. */
.orl-chart__l--verfallAlt::before { border-top: none; border-left: 1px dashed #94a3b8; height: .7rem; width: 0; }
.orl-chart__l--verfallNeu::before { border-top: none; border-left: 1px solid  #1e293b; height: .7rem; width: 0; }
.orl-chart__l--earnings::before   { border-top: none; border-left: 2px solid  #f59e0b; height: .7rem; width: 0; }
.orl-chart__l--exdiv::before      { border-top: none; border-left: 1px dashed #b45309; height: .7rem; width: 0; }

/* Jede Beschriftung traegt ihr Linienbild als Strich davor — sonst muesste man
   Farbe und Strichart im Chart suchen. */
.orl-chart__l { display: inline-flex; align-items: center; gap: var(--of-space-2); }
/* Die Legende traegt jetzt Schalter. Das Linienbild bleibt davor stehen, der
   Schalter folgt — sonst muesste man raten, welcher Schalter welche Linie
   meint. Gleiche Bauart wie der 52-Wochen-Schalter. */
.orl-chart__legende .orl-chart__l { cursor: pointer; }
/* Reihenfolge im Eintrag: Schalter, Linienbild, Beschriftung. Ohne die
   ausdrueckliche Reihenfolge stand das Linienbild vorn und der Schalter
   mittendrin — er sah dann aus, als gehoere er zum Text dahinter. */
.orl-chart__legende .orl-chart__l::before { order: 2; }
.orl-chart__legende .orl-chart__l .ofma-dashboard__overlay-switch { order: 1; }
.orl-chart__legende .orl-chart__l .ofma-dashboard__overlay-label { order: 3; }
.orl-chart__legende .orl-chart__l input { position: absolute; opacity: 0; pointer-events: none; }
.orl-chart__l::before {
    content: "";
    width: 1.5rem;
    height: 0;
    border-top-width: 2px;
}
.orl-chart__l--alt::before    { border-top: 1px dashed #94a3b8; }
.orl-chart__l--bealt::before  { border-top: 1px dotted #7dd3fc; }
.orl-chart__l--neu::before    { border-top: 2px solid var(--of-error); }
.orl-chart__l--beneu::before  { border-top: 2px dashed #0ea5e9; }
.orl-chart__l--spread::before {
    border-top: none;
    height: .6rem;
    background: repeating-linear-gradient(45deg, rgba(239,68,68,.25) 0 3px, rgba(239,68,68,0) 3px 6px);
}
.orl-chart__l--zone::before {
    border-top: none;
    height: .6rem;
    background: rgba(14,165,233,0.15);
}
.orl-chart__l--maxverlust::before {
    border-top: none;
    height: .6rem;
    background: rgba(239,68,68,.14);
}
/* 52-Wochen-Spanne: zwei Linien, gruen oben und rot unten — wie im SPY-Chart
   der Willkommensseite. Das Musterbild zeigt beide. */
.orl-chart__l--w52::before {
    border-top: 1px dashed #10b981;
    border-bottom: 1px dashed #ef4444;
    height: .35rem;
}
.orl-chart__l--gewinn::before {
    border-top: none;
    height: .6rem;
    background: repeating-linear-gradient(-45deg, rgba(16,185,129,.3) 0 3px, rgba(16,185,129,0) 3px 6px);
}
/* Gesperrter Schalter: Er haengt an einem anderen und ist ohne ihn wirkungslos.
   Gedaempft und ohne Zeiger — der Grund steht im Tooltip. */
.orl-chart__legende .orl-chart__l[data-orl-gesperrt] {
    opacity: .35;
    cursor: not-allowed;
}
/* Abgeschaltete Linie: Beschriftung gedaempft, damit der Zustand auch ohne
   Blick auf den Schalter zu erkennen ist. */
.orl-chart__legende .orl-chart__l:has(input:not(:checked)) { opacity: .45; }
/* Der Hinweis ist kein Kasten und soll auch nicht mitwachsen. */
.orl-chart__hinweis {
    flex: 0 0 100%;
    text-align: right;
    color: var(--of-text-muted);
}

/* Festgehaltene Zeile: Ihr Ziel bleibt im Chart stehen, auch wenn die Maus
   weiterwandert. */
.orl-targets__row { cursor: pointer; }
/* Festgehaltene Zeile. Eine getoente Flaeche allein genuegt nicht: Im dunklen
   Thema liegt --of-bg-secondary zu nah an der Kartenfarbe. Deshalb zusaetzlich
   eine farbige Kante links, die in beiden Themen traegt. */
.orl-targets__row.is-fest {
    background: var(--of-teal-light);
    box-shadow: inset 3px 0 0 0 var(--of-teal);
}

/* Wechselsymbol in der Laufzeit-Spalte: gekreuzte Pfeile in Textfarbe. Es
   steht fuer einen Tausch, nicht fuer eine Richtung. */
.orl-wechsel {
    color: var(--of-text-primary);
    vertical-align: -2px;
    margin: 0 var(--of-space-1);
}

/* Zugewinn an Laufzeit gegenueber der bestehenden Position. */
.orl-plus { color: var(--of-text-muted); font-size: var(--of-text-2xs); }

/* Earnings-Marker nutzt das zentrale Tooltip-Icon, nur in Warnfarbe statt
   violett — die Mechanik bleibt dieselbe (data-of-tip, zentrales Popup). */
.orl-warn {
    border-color: var(--of-error) !important;
    color: var(--of-error) !important;
}
.orl-warn:hover {
    background: var(--of-error) !important;
    color: #fff !important;
}

/* Zweiter Ergebniswert (Mittelkurs) unter dem konservativen. Bewusst gedaempft:
   Der konservative Wert bleibt die Grundlage der Entscheidung, der mittige ist
   das Ziel, auf das man limitiert. */
.orl-ergebnis__mid {
    display: block;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-normal);
    color: var(--of-text-muted);
}
/* Ergebnis bei Rueckkauf zu 50 Prozent — die Zahl, an der sich beim Vergleichen
   entscheidet, ob eine Zeile ueberhaupt ins Plus fuehren kann. */
.orl-ergebnis__tp {
    display: block;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-normal);
    color: var(--of-success);
    border-bottom: 1px dotted currentColor;
    cursor: default;
}
.orl-ergebnis__tp.is-verlust { color: var(--of-error); }
/* Fehlender Rueckkaufkurs: Die Zahl darueber ist dann zu gut. */
.orl-ergebnis__warn {
    display: block;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-normal);
    color: var(--of-warning);
    border-bottom: 1px dotted currentColor;
    cursor: default;
}

/* Dollarbetrag der Spanne als Nebenangabe zum Prozentwert. */
.orl-spanne { white-space: nowrap; }
.orl-spanne__abs {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
/* Marke fuer ein kaum handelbares Absicherungs-Leg. Eigene Zeile unter der
   Spanne: Sie traegt drei Zahlen und wuerde daneben die Spalte sprengen. */
.orl-illiquid {
    display: block;
    margin-top: 2px;
    width: fit-content;
    padding: 1px var(--of-space-2);
    border-radius: var(--of-radius-sm);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    background: var(--orl-bernstein-light);
    color: var(--orl-bernstein);
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* Lagekennung (unten/oben) neben dem Put-/Call-Badge. Bewusst zurueckhaltend:
   Sie ordnet den Wert zu, sie ist nicht die Aussage. Die Seite selbst zeigt das
   Badge .option-type-badge aus dem Optionsscanner. */
/* Implizite Volatilitaet als zweite Zeile unter dem Delta. Gedaempft: Sie ist
   Kontext zur Praemie, nicht die Entscheidung selbst. Der Pfeil vergleicht mit
   der bestehenden Position und traegt deshalb Richtungsfarben. */
.orl-iv {
    display: block;
    margin-top: 2px;
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    white-space: nowrap;
}
/* Die IV traegt ihre Herkunft selbst: `.orl-iv` setzt eine eigene Textfarbe und
   ueberschriebe sonst das Blau der Zelle. */
.orl-table td .orl-iv.orl-live { color: var(--orl-tws); }

/* Der Pfeil ist die Kernaussage der Zelle und war als schmales Zeichen in
   Kleinschrift kaum zu erkennen — Richtung und Farbe gingen unter. Deshalb
   groesser als der umgebende Text und mit etwas Luft. */
.orl-iv__pfeil {
    margin-left: var(--of-space-1);
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-bold);
    line-height: 1;
    vertical-align: -1px;
}
.orl-iv__pfeil--hoch { color: var(--of-success); }
.orl-iv__pfeil--tief { color: var(--of-warning); }

/* Umschalter Standard/Experte als zusammenhaengende Schaltergruppe: beide
   Ansichten nebeneinander, die aktive in Akzentfarbe. Zwei getrennte Knoepfe
   waeren als Auswahl nicht erkennbar, ein einzelner Knopf verschwiege, dass es
   eine zweite Ansicht gibt. */
.orl-ansicht {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--of-space-2);
}
.orl-ansicht__btn {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    color: var(--of-text-muted);
    background: var(--of-bg-secondary);
    border: 1px solid var(--of-border);
    padding: var(--of-space-1) var(--of-space-3);
    cursor: pointer;
    transition: background var(--of-ease-fast), color var(--of-ease-fast),
                border-color var(--of-ease-fast);
}
/* Die beiden Knoepfe teilen sich eine Kante — sonst sieht es nach zwei
   unabhaengigen Schaltern aus. */
.orl-ansicht__btn:first-child {
    border-radius: var(--of-radius-sm) 0 0 var(--of-radius-sm);
}
.orl-ansicht__btn:last-child {
    border-radius: 0 var(--of-radius-sm) var(--of-radius-sm) 0;
    border-left-width: 0;
}
.orl-ansicht__btn:hover { color: var(--of-text-primary); }
.orl-ansicht__btn.is-active {
    background: var(--of-teal);
    border-color: var(--of-teal);
    color: var(--of-text-inverse);
}
/* Die linke Kante des aktiven rechten Knopfes muss mitfaerben, sonst bleibt
   dort ein heller Strich stehen. */
.orl-ansicht__btn.is-active + .orl-ansicht__btn { border-left-color: var(--of-teal); }

/* Maximalverlust mit CRV-Ampel darunter. Der Betrag traegt die Aussage, das
   Verhaeltnis ordnet ihn ein — deshalb steht die Ampel kleiner in zweiter
   Zeile. Das Badge selbst kommt aus dem zentralen viz-badge-System
   (aktien-scanner.css), damit die Ampel ueberall gleich aussieht. */
.orl-risiko { white-space: nowrap; }
.orl-risiko__crv {
    display: block;
    margin-top: 2px;
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
/* Veraenderung der Kapitalbindung. Gedaempft, solange sie sinkt — sie ist dann
   keine Nachricht. Steigt sie, traegt sie die Warnfarbe. */
.orl-risiko__kapital {
    /* Inline-Block, damit die punktierte Linie am Text endet und nicht ueber
       die ganze Zellenbreite laeuft. */
    display: inline-block;
    margin-top: 2px;
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    border-bottom: 1px dotted currentColor;
    cursor: help;
}
.orl-risiko__kapital.is-mehr { color: var(--orl-bernstein); }
.orl-risiko__crv .viz-badge {
    min-width: 0;
    min-height: 0;
    padding: 0 var(--of-space-1);
    font-size: var(--of-text-2xs);
    letter-spacing: 0;
}

/* Letzte Reserve: Reicht auch die groeszere Breite nicht, scrollt die Tabelle
   in ihrem eigenen Kasten — nie die Seite. */
.orl-step__body,
#orl-target-body { overflow-x: auto; }

/* Leg-Kennung wie im Multi-Leg-Dashboard (.sd-strike-label): kleines Quadrat
   mit P oder C, Farbe = Richtung (rot verkauft, gruen gekauft). Dessen
   Stylesheet wird auf dieser Seite nicht geladen, deshalb hier mit denselben
   Maszen nachgebildet — Farben aber aus den Design-Tokens statt hartkodiert.
   Ohne Richtungsklasse bleibt das Quadrat neutral: Dort ist die SEITE gemeint,
   nicht ein einzelnes Leg. */
.orl-leg-label {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 3px;
    font-size: var(--of-text-4xs);
    font-weight: var(--of-weight-bold);
    color: var(--of-text-inverse);
    background: var(--of-text-muted);
    margin-right: 2px;
    vertical-align: baseline;
}
.orl-leg-label--sell { background: var(--of-error); }
.orl-leg-label--buy  { background: var(--of-success); }

.orl-leg-sep {
    display: inline-block;
    margin: 0 3px;
    color: var(--of-text-muted);
}

/* Lagekennung (unten/oben) neben dem Put-/Call-Badge. Bewusst zurueckhaltend:
   Sie ordnet den Wert zu, sie ist nicht die Aussage. Die Seite selbst zeigt das
   Badge .option-type-badge aus dem Optionsscanner. */
.orl-table .option-type-badge {
    padding: 0 var(--of-space-1);
    font-size: var(--of-text-2xs);
    vertical-align: baseline;
}

.orl-seite {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Zwei Break-even-Punkte untereinander. Die engere Schwelle wird hervorgehoben —
   sie entscheidet ueber das Risiko, die andere ist Kontext. */
.orl-be__zeile { display: block; white-space: nowrap; }
.orl-be__zeile--eng { font-weight: var(--of-weight-semibold); }
.orl-be__zeile--eng .orl-be__abst { color: var(--of-warning); }

/* Laufzeit-Kachel ohne Ziel: gedaempft und gestrichelt umrandet. Nicht
   deaktiviert — man soll sie anklicken koennen und dann die Begruendung
   bekommen, statt vor einem toten Knopf zu stehen. */
.orl-exp--leer {
    opacity: .5;
    border-style: dashed;
}

/* Kurzlebiger Hinweis ueber der Tabelle. */
.orl-note--fluechtig {
    border-left: 3px solid var(--of-info);
    padding-left: var(--of-space-3);
    margin-bottom: var(--of-space-3);
}

/* Ergebnis bei Andienung, unter der Wahrscheinlichkeit. */
.orl-andien {
    display: block;
    font-size: var(--of-text-2xs);
    color: var(--of-success);
    white-space: nowrap;
}
.orl-andien--minus { color: var(--of-error); }

/* Erklärbare Werte kenntlich machen.
   ---------------------------------------------------------------------------
   Die Plattform-Regel lautet: Ein Tooltip haengt an einem sichtbaren
   Fragezeichen. Sie gilt fuer Spaltenkoepfe und einzelne Kennzahlen — dort ist
   das Zeichen eindeutig zuzuordnen.
   In der Positionsliste stehen aber vier Kriterien plus zwei Label je Zeile.
   Sechs Fragezeichen je Zeile waeren unlesbar, und das Zeichen wuerde vom Wert
   ablenken, statt auf ihn hinzuweisen. Deshalb hier die zweite gebraeuchliche
   Kennzeichnung: eine gepunktete Unterstreichung. Sie sagt dasselbe — „hier
   steht mehr" —, ohne die Zeile zu zerreissen. Das Fragezeichen am Spaltenkopf
   erklaert, dass jeder Wert seine eigene Erlaeuterung hat. */
/* In der Bezugszeile nur dort, wo es auch etwas zu lesen gibt: Die Linie haengt
   am Vorhandensein des Attributs, nicht an der Klasse. Vorher trugen alle sechs
   Bezeichnungen die Linie, aber nur vier eine Erlaeuterung. */
.orl-krit,
.orl-empf,
.orl-deckung,
.orl-basis__name[data-of-tip] {
    /* Deutlich genug, um bemerkt zu werden: --of-border-strong war auf hellem
       Grund praktisch unsichtbar. */
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--of-text-muted);
    text-decoration-thickness: 1.5px;
}
/* Muster in der Fussnote — dieselbe Linie, damit man sie wiedererkennt. */
.orl-legend__probe { cursor: default; }
/* Zweite Fussnote schliesst direkt an die erste an. */
.orl-legend + .orl-legend { margin-top: 2px; }
.orl-krit--offen { text-decoration: none; }

/* Empfehlung je Position. Dieselbe Pastell-Machart wie die uebrigen Label.
   Die Farben sagen nicht gut/schlecht, sondern welche Art Handlung ansteht:
   Teal = nichts tun, Violett = pruefen, Bernstein = abschliessen. Gruen und Rot
   sind bewusst nicht dabei — sie wuerden als Bewertung der Position gelesen. */
.orl-empf {
    display: inline-block;
    padding: 1px var(--of-space-2);
    border-radius: var(--of-radius-sm);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    cursor: help;
    white-space: nowrap;
}
/* Die vier Kriterien neben dem Label. Gedaempft heisst „unauffaellig",
   hervorgehoben heisst „diese Schwelle ist gerissen" — damit sieht man auf
   einen Blick, warum zwei Positionen mit gleichem Label verschieden sind. */
.orl-krits {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--of-space-1) var(--of-space-2);
    margin-left: var(--of-space-2);
}
.orl-krit {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    white-space: nowrap;
    cursor: help;
}
.orl-krit + .orl-krit::before {
    content: "·";
    margin-right: var(--of-space-2);
    color: var(--of-border-strong);
}
/* Zwei Aussagen, zwei Mittel: Die FARBE zeigt die Herkunft (blau aus der TWS,
   sonst Datenbank), das GEWICHT zeigt, ob die Schwelle gerissen ist. Beides auf
   die Farbe zu legen, hiesse dieselbe Farbe an zwei Stellen verschieden zu
   lesen. */
.orl-krit.is-aktiv {
    color: var(--of-text-primary);
    font-weight: var(--of-weight-semibold);
}
.orl-krit.orl-live,
.orl-krit.is-aktiv.orl-live { color: var(--orl-tws); }
/* Noch nicht pruefbar — als solches erkennbar, nicht als „unauffaellig". */
.orl-krit--offen { font-style: italic; }
.orl-empf--halten     { background: var(--of-teal-light);       color: var(--of-teal); }
.orl-empf--rollen     { background: var(--of-violet-light);     color: var(--of-violet); }
.orl-empf--schliessen { background: var(--orl-bernstein-light); color: var(--orl-bernstein); }

/* Deckung eines Covered Call als Label — die Aussage ist ein Zustand, kein
   Beiwert, und soll auf einen Blick erfassbar sein. Getoent wie die uebrigen
   Label der Plattform (.option-type-badge): farbige Schrift auf zarter Flaeche,
   nicht weiss auf Vollton. Gruen bestaetigt, Rot widerspricht der
   Strategiebezeichnung, Bernstein heisst: nicht pruefbar. */
.orl-deckung {
    display: inline-block;
    padding: 1px var(--of-space-2);
    border-radius: var(--of-radius-sm);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    letter-spacing: .02em;
    cursor: help;
    white-space: nowrap;
}
.orl-deckung--ja {
    background: rgba(16, 185, 129, 0.15);
    color: var(--of-success);
}
.orl-deckung--nein {
    background: rgba(239, 68, 68, 0.15);
    color: var(--of-error);
}
.orl-deckung--offen {
    background: rgba(245, 158, 11, 0.15);
    color: var(--of-warning);
}

/* Hinweis auf ein Kapitalereignis.
   Gebaut wie der Erklaerkasten der Roll-Varianten (.orl-variant-info), nur in
   Blau statt Teal: gleiche Abstaende, gleiche Schriftgroessen, Rahmen und
   Toenung aus derselben Farbe. Weder Warn- noch Fehlerfarbe — ein Split ist ein
   normaler Vorgang, und die Anzeige kehrt von selbst zurueck. */
.orl-ereignis {
    /* Auch als Vorschau ueber der Zieltabelle verwendet — dort braucht der
       Kasten denselben Abstand nach unten wie die uebrigen Hinweise. */
    margin: 0 0 var(--of-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid rgba(59, 130, 246, .28);
    border-radius: var(--of-radius-md);
    background: rgba(59, 130, 246, .08);
}
.orl-ereignis__titel {
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    color: var(--of-info);
}
.orl-ereignis p {
    font-size: var(--of-text-2xs);
    line-height: var(--of-leading-relaxed);
    color: var(--of-info);
    margin: 0;
}

/* Bilanz der bisherigen Rollvorgaenge. Bewusst eine schlichte Zeile und kein
   Kasten: Sie ist Vorgeschichte, keine Warnung. */
/* Bezeichnung wie die Feldnamen im grauen Balken darüber — gleiche Machart,
   damit die Zeile als Angabe zur Position lesbar ist und nicht als Fußnote. */
/* Bezeichnung wie .orl-basis__label, nur violett. */
.orl-historie__name {
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-violet);
    white-space: nowrap;
}
/* Der Name traegt jetzt das Fragezeichen und ist deshalb selbst eine Zeile aus
   Text und Zeichen. */
.orl-historie__name .of-help-icon { vertical-align: baseline; }
.orl-historie {
    /* Violett ist im Design-System die Farbe fuer Nutzerinhalte — und nichts auf
       dieser Seite ist so sehr Nutzerinhalt wie die eigene Handelshistorie. Als
       graue Fussnote zwischen zwei kraeftigeren Bloecken wurde die Zeile
       schlicht uebersehen. */
    /* Aufbau exakt wie .orl-basis darueber — gleiche Abstaende, gleiche Kante,
       gleiche Schriftgroesse. Verschieden ist allein die Farbe. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--of-space-1) var(--of-space-4);
    font-size: var(--of-text-sm);
    color: var(--of-text-primary);
    background: var(--of-violet-light);
    border: 1px solid rgba(139, 92, 246, .28);
    border-radius: var(--of-radius-sm);
    padding: var(--of-space-2) var(--of-space-3);
    margin: 0 0 var(--of-space-3);
}

/* Fristgebundene Warnung, gleiche Machart wie der Ereignis-Kasten, nur in
   Bernstein: Sie verlangt eine Entscheidung bis zu einem Termin. */
.orl-warnung {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid rgba(180, 83, 9, .28);
    border-radius: var(--of-radius-md);
    background: var(--orl-bernstein-light);
    margin: 0 0 var(--of-space-3);
}
.orl-warnung__titel {
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    color: var(--orl-bernstein);
}
.orl-warnung p {
    font-size: var(--of-text-2xs);
    line-height: var(--of-leading-relaxed);
    color: var(--orl-bernstein);
    margin: 0;
}

/* Dasselbe als Label in der Positionsliste — gleiche Farbe, gleiche Machart wie
   die uebrigen Label dort. */
.orl-ereignis-tag {
    display: inline-block;
    padding: 1px var(--of-space-2);
    border-radius: var(--of-radius-sm);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    background: var(--orl-info-light);
    color: var(--of-info);
    cursor: help;
    white-space: nowrap;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--of-text-muted);
}
/* Auslaufende Position: dieselbe Machart, aber gedaempft — es ist eine
   Zustandsangabe, keine Meldung. */
.orl-ereignis-tag--ruhig {
    background: var(--of-bg-secondary);
    color: var(--of-text-muted);
}


/* Offene TP-/SL-Orders. Warnfarbe, weil vor dem Rollen etwas zu tun ist —
   nicht Fehlerfarbe, denn die Orders sind ja gewollt. */
.orl-orders {
    color: var(--of-warning);
    font-weight: var(--of-weight-semibold);
    cursor: help;
    white-space: nowrap;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--of-text-muted);
}

/* Bestehende Position im Geld. Fehlerfarbe statt Warnfarbe: Das ist kein
   Abwaegen mehr, sondern ein Zustand, der die ganze Rechnung praegt. */
.orl-imgeld {
    color: var(--of-error);
    font-weight: var(--of-weight-semibold);
    cursor: help;
    white-space: nowrap;
}

/* Hinweis auf die stehenbleibende Condor-Seite. Warnfarbe, weil er eine
   Einschraenkung der darunter stehenden Zahlen ist und keine Zusatzangabe. */
.orl-basis__ruhend {
    color: var(--of-warning);
    cursor: help;
    white-space: nowrap;
}

/* Die Legs eines Ziels gehoeren in eine Zeile: Es sind hoechstens zwei plus
   Warnzeichen. Umgebrochen las man den zweiten Strike als eigene Angabe. */
.orl-targets td:first-child { white-space: nowrap; }

/* Zeitwert als zweite Zeile unter der neuen Praemie. Gedaempft, aber nicht
   nebensaechlich: Bei Strikes im Geld ist er der einzige Teil der Praemie, der
   tatsaechlich verdient wird. */
.orl-zeitwert {
    display: block;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-normal);
    color: var(--of-text-muted);
}

/* Ex-Dividenden-Termine in der Laufzeit eines Ziels. Bernstein wie der
   Earnings-Marker: ein Termin, den man kennen muss, keine Fehlermeldung. */
.orl-div { white-space: nowrap; }
.orl-table td.orl-div__tag,
.orl-div__tag { color: var(--of-warning); font-weight: var(--of-weight-semibold); }
.orl-div__betrag { font-size: var(--of-text-2xs); color: var(--of-text-muted); }

/* Spread-Breite. Eine Abweichung von der bestehenden Position wird
   hervorgehoben, aber in Warn- statt in Fehlerfarbe: Sie ist eine Entscheidung
   (mehr Prämie gegen mehr Maximalverlust), kein Fehler. Die Tabellenzelle wird
   mitgenannt, weil `.orl-table td` eine eigene Textfarbe setzt. */
.orl-breite,
.orl-table td.orl-breite { white-space: nowrap; }
.orl-breite--anders,
.orl-table td.orl-breite--anders {
    color: var(--of-warning);
    font-weight: var(--of-weight-semibold);
}

/* Aktionen je Zeile — gleiche Optik wie .wd-row-action im Wheel-Dashboard und
   in den Scanner-Tabellen, damit dieselbe Geste ueberall gleich aussieht. */
.orl-row-actions { white-space: nowrap; text-align: right; }
.orl-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    color: var(--of-text-muted);
    cursor: pointer;
    padding: 0;
    margin-left: var(--of-space-1);
    transition: border-color var(--of-ease-fast), color var(--of-ease-fast);
}
.orl-row-action:hover { border-color: var(--of-teal); color: var(--of-teal); }

/* Break-even mit Abstand zum Kurs. Der Abstand steht kleiner daneben — die
   Zahl allein sagt wenig, erst das Verhaeltnis zum Kurs macht sie lesbar. */
.orl-be { white-space: nowrap; }
.orl-be__abst { font-size: var(--of-text-2xs); color: var(--of-text-muted); }
.orl-be__fehlt { color: var(--of-text-muted); cursor: help; }

.orl-laufzeit { white-space: nowrap; }
.orl-laufzeit strong { color: var(--of-text-primary); font-weight: var(--of-weight-normal); }

#orl-target-body.is-live-loading .orl-targets { opacity: .75; }

#orl-target-body.is-loading { opacity: .5; }

/* Ergebnis-Spalte. Farbe ist plattformweit eine HERKUNFTSANGABE (blau = TWS),
   keine Bewertung — deshalb hier KEIN Gruen/Rot nach Credit und Debit. Die
   Richtung traegt das Vorzeichen; hervorgehoben wird die Zelle ueber das
   Schriftgewicht, weil das kein Farbkanal ist und mit der Herkunftsfarbe nicht
   kollidiert. */
.orl-ergebnis,
.orl-table td.orl-ergebnis { font-weight: var(--of-weight-normal); }
.orl-minus,
.orl-table td.orl-minus  { color: var(--of-text-secondary); }
/* Herkunft schlaegt die Grundfarbe: Ohne diese Regel blieb der Rueckkauf in der
   Tabelle grau, obwohl er aus der TWS stammte — gleiche Spezifitaet, und
   `.orl-minus` stand spaeter. Im grauen Balken war derselbe Wert blau, was wie
   ein Widerspruch aussah. */
.orl-table td.orl-minus.orl-live { color: var(--orl-tws); }
.orl-laufzeit,
.orl-table td.orl-laufzeit { color: var(--of-text-secondary); }

/* Zeile, die zum oben gewaehlten Verfall gehoert (Laufzeit-Modus). */

/* Waehrend des Ladens hervorgehoben: In Grau ging der Hinweis zwischen den
   uebrigen Fussnoten unter, und der Vorgang dauert mehrere Sekunden. Getoenter
   Rahmen in der TWS-Farbe — es geht ja um TWS-Daten. Blockiert weiterhin nichts. */
.orl-ladehinweis {
    display: inline-flex;
    align-items: center;
    color: var(--orl-tws);
    background: rgba(37, 99, 235, .07);
    border: 1px solid var(--orl-tws);
    border-radius: var(--of-radius-sm);
    padding: var(--of-space-1) var(--of-space-3);
}

/* Ladehinweis fuer TWS-Kurse. Bewusst nur ein Hinweis: Die Tabelle bleibt
   bedienbar und zeigt weiter die Schlusskurse, bis die Live-Werte da sind. */
.orl-spinner {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-right: var(--of-space-2);
    border: 2px solid rgba(37, 99, 235, .25);
    border-top-color: var(--orl-tws);
    border-radius: var(--of-radius-full);
    animation: orl-dreh .7s linear infinite;
    vertical-align: -1px;
}
@keyframes orl-dreh { to { transform: rotate(360deg); } }

/* Wer Bewegung im Bild nicht möchte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    .orl-spinner { animation: none; }
}

/* Kurse ausdruecklich auffrischen. Bewusst unauffaellig: Der Normalfall ist,
   dass der angezeigte Stand genuegt — die entscheidende Aktualisierung passiert
   vor der Orderuebergabe. */
.orl-refresh {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-2xs);
    padding: 0 var(--of-space-2);
    margin-left: var(--of-space-2);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    color: var(--of-text-secondary);
    cursor: pointer;
}
.orl-refresh:hover { border-color: var(--of-teal); color: var(--of-teal); }

.orl-legend {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    margin: var(--of-space-2) 0 0;
}

.orl-source-panel { margin-top: var(--of-space-4); }

/* ── Positionsliste aus der Bridge ──────────────────────────────────────── */

.orl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--of-text-sm);
    margin-top: var(--of-space-1);
}
.orl-table th {
    text-align: left;
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
    font-weight: var(--of-weight-semibold);
    padding: var(--of-space-2) var(--of-space-3);
    border-bottom: 1px solid var(--of-border);
    white-space: nowrap;
}
.orl-table td {
    padding: var(--of-space-2) var(--of-space-3);
    border-bottom: 1px solid var(--of-border);
    color: var(--of-text-primary);
}
.orl-table tr:last-child td { border-bottom: 0; }

.orl-pick {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-xs);
    padding: var(--of-space-1) var(--of-space-3);
    border: 1px solid var(--of-teal);
    border-radius: var(--of-radius-sm);
    background: transparent;
    color: var(--of-teal);
    cursor: pointer;
}
.orl-pick:hover { background: var(--of-teal); color: var(--of-text-inverse); }

/* ── Manuelle Erfassung: gefuehrter Ablauf ──────────────────────────────── */

.orl-man__schritt { margin-bottom: var(--of-space-5); }
.orl-man__label {
    display: block;
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
    margin-bottom: var(--of-space-2);
}
.orl-man__select {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-xs);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    color: var(--of-text-primary);
    min-width: 16rem;
}
.orl-man__hinweis {
    font-size: var(--of-text-xs);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-secondary);
    margin: 0 0 var(--of-space-3);
}
#orl-man-rest.is-loading { opacity: .5; }

/* Symbolsuche mit Trefferliste */
.orl-suche { position: relative; max-width: 26rem; }
/* Schriftgroesse wie in den Tabellen und Kacheln dieser Seite.
   `input[type="text"]` wird ausdruecklich mitgenannt: Das Design-System setzt
   fuer genau diesen Selektor --of-text-base, hat damit dieselbe Spezifitaet wie
   `.orl-suche input` und wird NACH dieser Datei geladen — die kuerzere Schreibweise
   verlor deshalb, ohne dass es im Stylesheet zu sehen war. */
.orl-suche input[type="text"] {
    width: 100%;
    font-family: var(--of-font-sans);
    font-size: var(--of-text-xs);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    color: var(--of-text-primary);
}
.orl-suche__liste {
    position: absolute;
    z-index: 20;
    left: 0; right: 0; top: 100%;
    margin-top: var(--of-space-1);
    max-height: 17rem;
    overflow-y: auto;
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    box-shadow: var(--of-shadow-md);
}
.orl-suche__treffer {
    display: flex;
    align-items: baseline;
    gap: var(--of-space-3);
    width: 100%;
    text-align: left;
    font-family: var(--of-font-sans);
    padding: var(--of-space-2) var(--of-space-3);
    border: 0;
    background: none;
    cursor: pointer;
}
.orl-suche__treffer:hover { background: var(--of-bg-secondary); }
/* Firmenname des gewaehlten Werts, neben dem Eingabefeld — dieselbe
   Abstufung wie in der Trefferliste. */
.orl-suche__gewaehlt {
    display: block;
    margin-top: var(--of-space-1);
    font-size: var(--of-text-xs);
    color: var(--of-text-secondary);
}
.orl-suche__kuerzel {
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    color: var(--of-text-primary);
    min-width: 4rem;
}
/* Eine Stufe kleiner als das Kuerzel — das ist die Unterscheidung, die die
   Trefferliste lesbar macht; sie muss erhalten bleiben, auch nachdem beide
   Groessen um eine Stufe gesunken sind. */
.orl-suche__name {
    font-size: var(--of-text-2xs);
    color: var(--of-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Waehrend der Suche: derselbe kleine Kreis wie beim Laden der TWS-Kurse. */
.orl-suche__laedt {
    display: flex;
    align-items: center;
    padding: var(--of-space-2) var(--of-space-3);
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
.orl-suche__leer {
    font-size: var(--of-text-xs);
    color: var(--of-text-muted);
    padding: var(--of-space-3);
}

/* Bereits gewaehlte Legs */
.orl-man__legs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--of-space-2);
    margin-bottom: var(--of-space-3);
}
.orl-man__leg {
    display: inline-flex;
    align-items: center;
    gap: var(--of-space-1);
    font-size: var(--of-text-xs);
    color: var(--of-text-primary);
    background: rgba(20, 184, 166, .08);
    border: 1px solid var(--of-teal);
    border-radius: var(--of-radius-sm);
    padding: var(--of-space-1) var(--of-space-2);
}
.orl-man__leg-x {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-sm);
    line-height: 1;
    border: 0;
    background: none;
    color: var(--of-text-muted);
    cursor: pointer;
    padding: 0 0 0 var(--of-space-1);
}
.orl-man__leg-x:hover { color: var(--of-error); }

/* Optionskette zur Auswahl der gehaltenen Legs */
/* Kontrakte und erhaltene Praemie, nebeneinander unter der Leg-Auswahl. */
.orl-man__felder {
    display: flex;
    flex-wrap: wrap;
    gap: var(--of-space-4);
    margin-top: var(--of-space-3);
}
.orl-man__feld {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
}
.orl-man__feld input[type="number"] {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-xs);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    color: var(--of-text-primary);
    max-width: 12rem;
}

/* Die Kette der manuellen Erfassung scrollt in einem eigenen Kasten. Frueher
   trug die TABELLE selbst `display: block` samt Ueberlauf — damit richtete sie
   ihre Breite nach dem Inhalt und stand als schmale Saeule am linken Rand,
   unabhaengig davon, wie viel Platz daneben frei war. Der Scroll gehoert an den
   Kasten, die Tabelle bleibt eine Tabelle. */
.orl-kette-scroll {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
}
.orl-kette { width: 100%; }
.orl-kette__row.is-atm { background: var(--of-bg-secondary); }
/* Fuer das naechste Leg unmoegliche Strikes: zurueckgenommen, aber lesbar —
   man soll sehen, dass es sie gibt, und warum sie ausscheiden. */
.orl-kette__row--gesperrt { opacity: .5; }
.orl-kette__gesperrt {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
    white-space: nowrap;
}
/* Abstand zum Kurs: Im Geld ist eine Zustandsangabe, keine Bewertung — deshalb
   nur eingefaerbt, nicht hervorgehoben. */
.orl-kette__abst { white-space: nowrap; }
.orl-table td.orl-kette__abst--drin { color: var(--of-error); }

.orl-man-actions {
    display: flex;
    align-items: center;
    gap: var(--of-space-3);
    margin-top: var(--of-space-3);
}

/* ── Manuelle Erfassung ─────────────────────────────────────────────────── */

.orl-manual {
    display: flex;
    flex-wrap: wrap;
    gap: var(--of-space-4);
    margin: var(--of-space-3) 0;
}
.orl-manual label {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
    font-size: var(--of-text-xs);
    color: var(--of-text-secondary);
}
.orl-manual-actions {
    display: flex;
    align-items: center;
    gap: var(--of-space-3);
    margin-top: var(--of-space-3);
}
.orl-submit {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-semibold);
    padding: var(--of-space-2) var(--of-space-5);
    border: 0;
    border-radius: var(--of-radius-sm);
    background: var(--of-teal);
    color: var(--of-text-inverse);
    cursor: pointer;
}
.orl-submit:hover { background: var(--of-teal-hover); }
.orl-manual-error {
    font-size: var(--of-text-xs);
    color: var(--of-error);
}

.orl-manual input,
.orl-manual select {
    font-family: var(--of-font-sans);
    font-size: var(--of-text-sm);
    padding: var(--of-space-2) var(--of-space-3);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg-card);
    color: var(--of-text-primary);
    min-width: 12rem;
}

/* ── Hinweise ───────────────────────────────────────────────────────────── */

.orl-note {
    font-size: var(--of-text-xs);
    line-height: var(--of-leading-relaxed);
    color: var(--of-text-secondary);
    background: var(--of-bg-secondary);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm);
    padding: var(--of-space-3);
}

/* ── Orderuebergabe ──────────────────────────────────────────────────────────
   Eigener, kleiner Dialog statt des Order-Fensters aus dem Scanner: Dort haengt
   die ganze Maske am Zustand des Scanners (gewaehlte Strategie, Kette, Felder).
   Der Rollvorgang hat dagegen eine feste Gestalt — schliessen, eroeffnen, ein
   Nettopreis. Was er braucht, sind vier Angaben und zwei Knoepfe. */
.orl-order-modal {
    position: fixed;
    inset: 0;
    /* Ueber ALLEM. Mit z-index 100 lag das Fenster hinter dem Seiteninhalt und
       war schlicht unsichtbar — der Klick wirkte folgenlos, ohne Fehlermeldung.
       Der Mitgliederbereich arbeitet mit Werten bis 1.000.001 (Scanner-Modals,
       Tooltips); ein Dialog muss darueber liegen. */
    z-index: 1000002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--of-space-4);
    background: rgba(15, 23, 42, .45);
}
.orl-order {
    width: min(34rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--of-space-3);
    padding: var(--of-space-4);
    background: var(--of-bg-card);
    border: 1px solid var(--of-border);
    border-radius: var(--of-radius-lg);
}
.orl-order__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--of-space-3);
}
.orl-order__titel {
    font-size: var(--of-text-base);
    font-weight: var(--of-weight-semibold);
}
.orl-order__zu {
    background: none;
    border: 0;
    font-size: var(--of-text-lg);
    line-height: 1;
    color: var(--of-text-muted);
    cursor: pointer;
}
.orl-order__zu:hover { color: var(--of-text-primary); }
.orl-order__zeile { margin: 0; font-size: var(--of-text-sm); color: var(--of-text-secondary); }
/* Feste Aufteilung: Alle sieben Spalten teilen sich die Breite gleichmaessig.
   Bei automatischer Aufteilung draengten sich Bid, Ask und Mid am rechten Rand,
   waehrend links Platz frei blieb. */
.orl-order__beine {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--of-text-sm);
}
.orl-order__beine td {
    padding: var(--of-space-1) var(--of-space-2) var(--of-space-1) 0;
    border-bottom: 1px solid var(--of-border);
}
.orl-order__beine td:first-child { color: var(--of-text-muted); font-size: var(--of-text-2xs); }
/* Bid, Ask und Mid je Leg. Linksbuendig wie alle uebrigen Tabellen der Seite;
   Ziffern gleicher Breite halten die Nachkommastellen trotzdem in einer Flucht,
   solange die Betraege gleich viele Vorkommastellen haben. */
.orl-order__kurs {
    text-align: left;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Rechenweg vom Leg zum Limit. Steht direkt unter der Tabelle, aus der die
   Zahlen stammen — dazwischen darf nichts liegen. */
.orl-order__rechnung {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: var(--of-text-2xs);
    color: var(--of-text-secondary);
    font-variant-numeric: tabular-nums;
}
.orl-order__rechnung strong { color: var(--of-text-primary); }
.orl-rechnung__teil { white-space: nowrap; }

/* Jede Rechnung ist zugleich der Knopf, der ihr Ergebnis ins Limit setzt. */
.orl-rechnung__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--of-space-1);
    width: 100%;
    height: auto;
    padding: var(--of-space-1) var(--of-space-2);
    text-align: left;
    font: inherit;
    font-size: var(--of-text-2xs);
    line-height: 1.5;
}
.orl-rechnung__titel { font-weight: 600; color: var(--of-text-secondary); }
.orl-rechnung__summe { margin-left: auto; white-space: nowrap; }
/* Im gewaehlten Zustand traegt der Knopf teal als Flaeche — die Schrift darauf
   muss durchgaengig hell werden, sonst bleiben Titel und Legs unlesbar. */
.orl-rechnung__zeile.is-aktiv .orl-rechnung__titel,
.orl-rechnung__zeile.is-aktiv .orl-rechnung__bein,
.orl-rechnung__zeile.is-aktiv strong { color: #fff; }
/* Zu welchem Leg der Betrag gehoert — klein hinter der Zahl, damit die Rechnung
   als Rechnung lesbar bleibt. */
.orl-rechnung__bein {
    margin-left: 3px;
    color: var(--of-text-muted);
    font-size: .9em;
}

/* Richtung des Zahlungsstroms: Sie entscheidet, ob der Rollvorgang etwas
   einbringt oder kostet — dafuer lohnt die Farbe. */
.orl-order__art.is-credit { color: var(--of-success); }
.orl-order__art.is-debit  { color: var(--of-error); }

/* Absicherung der neuen Position. */
.orl-order__absicherung {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
    padding: var(--of-space-2);
    border: 1px solid var(--of-border);
    border-radius: 6px;
}
.orl-order__absicherung-kopf {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
}
.orl-order__abs-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--of-space-2);
    font-size: var(--of-text-xs);
    color: var(--of-text-secondary);
}

/* Zweite Zeile des Stop-Loss: Das Limit steht unter der Bedingung, zu der es
   gehoert, und beginnt auf derselben Linie wie „Stop-Loss bei" — also um die
   Breite des Kaestchens eingerueckt. */
.orl-order__abs-zeile--folge { padding-left: 22px; }
.orl-order__abs-zeile--folge.is-aus { display: none; }

/* Einheit hinter einem Eingabefeld — dieselbe Zurueckhaltung wie „% der Prämie". */
.orl-order__einheit {
    font-size: var(--of-text-xs);
    color: var(--of-text-secondary);
}
/* In der Feldzeile sitzt die Einheit auf Hoehe des Feldes, nicht der Beschriftung. */
.orl-order__einheit--feld { align-self: center; margin-left: -6px; }

/* Der Preis, auf den die Prozentangabe hinauslaeuft. */
.orl-order__abs-preis { color: var(--of-text-muted); }

/* Ohne Haken keine Betragsfelder: Sie haetten keine Wirkung, laden aber zum
   Ausfuellen ein — und wer sie ausfuellt, haelt die Absicherung fuer gesetzt. */
.orl-order__abs-zeile.is-aus input[type="number"],
.orl-order__abs-zeile.is-aus > span:not(:first-of-type) { display: none; }

/* Abstand der Kurs-Stop-Schwelle zum aktuellen Kurs, direkt am Feld. */
.orl-order__abs-abstand {
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
.orl-order__abs-abstand.is-warnung { color: var(--of-error); font-weight: var(--of-weight-semibold); }

/* Warnung, wenn die Schwelle sofort ausloesen wuerde oder sehr weit weg liegt. */
.orl-order__abs-warnung {
    margin: 0;
    padding: 6px 8px;
    border-left: 3px solid var(--of-warning);
    background: var(--of-bg-card);
    font-size: var(--of-text-2xs);
    color: var(--of-text-secondary);
}

/* Hinweis unter den Stop-Zeilen: Was gilt, wenn kein Stop gesetzt wird. */
.orl-order__abs-hinweis {
    margin: 0;
    padding-left: 22px;
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}

/* Ergebnis eines ausgefuehrten Take-Profits, gegen alles gerechnet, was die
   Position bisher eingebracht hat. */
.orl-order__abs-ergebnis {
    margin: 0;
    padding-left: 22px;
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
.orl-order__abs-ergebnis strong { color: var(--of-success); }
.orl-order__abs-ergebnis.is-verlust { color: var(--of-error); }
.orl-order__abs-ergebnis.is-verlust strong { color: var(--of-error); }

/* Orders, die nach dem Rollen ins Leere zeigen — der einzige Punkt im Dialog,
   der ein Eingreifen ausserhalb von OptionFinder verlangt. */
.orl-order__warnung {
    margin: 0;
    padding: var(--of-space-2);
    border-left: 3px solid var(--of-warning);
    background: var(--of-bg-card);
    font-size: var(--of-text-2xs);
    color: var(--of-text-secondary);
}

/* Was nach der Uebergabe zu tun ist. */
.orl-order__danach {
    display: flex;
    flex-direction: column;
    gap: var(--of-space-1);
    padding-top: var(--of-space-2);
    border-top: 1px solid var(--of-border);
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
.orl-order__danach p { margin: 0; }

/* Stand der Kurse. Er gehoert unter die Legs, nicht in die Fusszeile: Er
   gilt fuer die Zahlen darueber. */
.orl-order__stand {
    display: flex;
    align-items: center;
    gap: var(--of-space-2);
    margin: 0;
    font-size: var(--of-text-2xs);
    color: var(--of-text-muted);
}
.orl-order__felder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--of-space-3);
}
.orl-order__felder label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
}
/* Masse wie die Eingabefelder der Ordereingabe im Scanner (.ib-order-field__input):
   26 Pixel hoch, 4 Pixel Rundung. Meine Felder waren deutlich hoeher und staerker
   gerundet — dieselbe Eingabe darf in zwei Masken nicht verschieden aussehen. */
/* EIN Aussehen fuer alle Eingabefelder des Dialogs — Kontrakte, Limit,
   Take-Profit, Stop-Loss. Sie standen vorher in zwei Regeln und liefen
   auseinander, sobald eine davon geaendert wurde.
   Die !important-Angaben halten das Theme fern, das Eingabefeldern eigene
   Groessen und Rundungen gibt. */
.orl-order__felder input,
.orl-order__abs-zeile input[type="number"] {
    height: 26px !important;
    padding: 3px 8px !important;
    font-size: var(--of-text-xs) !important;
    line-height: 1.3;
    border: 1px solid var(--of-border) !important;
    border-radius: 4px !important;
    background: var(--of-bg-card);
    color: var(--of-text-primary);
    box-sizing: border-box;
}
.orl-order__felder input { width: 7rem; }
.orl-order__abs-zeile input[type="number"] { width: 5.5rem; }

/* Gleicher Fokus-Rahmen fuer alle vier Felder. */
.orl-order__felder input:focus,
.orl-order__abs-zeile input[type="number"]:focus {
    outline: none;
    border-color: var(--of-teal) !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, .1);
}

/* Kopfzeile der Leg-Tabelle. */
.orl-order__beine th {
    padding: 0 var(--of-space-2) var(--of-space-1) 0;
    text-align: left;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-caps);
    color: var(--of-text-muted);
    border-bottom: 1px solid var(--of-border);
}
/* Kein Sonderfall fuer die letzte Spalte mehr: Sie war frueher die Aktionsspalte
   und rechtsbuendig; seit dort MID steht, stand der Kopf neben seinen Werten. */

/* Vorgaben fuer das Limit — kleine Schalter neben dem Feld. */
.orl-limit {
    font: inherit;
    font-size: var(--of-text-2xs);
    height: 26px;
    padding: 0 var(--of-space-2);
    border: 1px solid var(--of-border);
    border-radius: 4px;
    background: var(--of-bg-card);
    color: var(--of-text-secondary);
    cursor: pointer;
}
.orl-limit:hover { border-color: var(--of-teal); color: var(--of-teal); }
/* Gewaehlte Vorgabe: Der Klick aendert nur eine Zahl im Nachbarfeld — ohne
   Markierung bleibt offen, welcher der beiden Werte gerade im Limit steht. */
.orl-limit.is-aktiv {
    border-color: var(--of-teal);
    background: var(--of-teal);
    color: #fff;
}
.orl-limit.is-aktiv:hover { color: #fff; }

.orl-order__feldname { display: inline-flex; align-items: center; gap: 4px; }
.orl-order__art { font-size: var(--of-text-2xs); color: var(--of-text-secondary); }
.orl-order__meldung {
    display: flex;
    align-items: center;
    gap: var(--of-space-2);
    padding: var(--of-space-2) var(--of-space-3);
    border-radius: var(--of-radius-sm);
    font-size: var(--of-text-2xs);
    background: var(--of-bg-secondary);
    color: var(--of-text-secondary);
}
.orl-order__meldung.is-ok     { background: var(--of-teal-light);      color: var(--of-teal); }
.orl-order__meldung.is-fehler { background: rgba(239, 68, 68, .10);    color: var(--of-error); }
.orl-order__meldung.is-hinweis{ background: var(--orl-bernstein-light); color: var(--orl-bernstein); }
.orl-order__knoepfe { display: flex; gap: var(--of-space-2); }