/* /Pages/DashBoards/EmmaDashboardSeite.razor.rz.scp.css */

/* Emma-Dashboard – im Stil der App (Messing auf Pergament, dunkler Kopf). ::deep, weil Radzen-Bausteine eigene Komponenten sind. */

.hd[b-gj3mk7y3h9] { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; width: 100%; box-sizing: border-box; align-self: stretch; }

.hd[b-gj3mk7y3h9]  .hd-kpis { width: 100%; }



/* ── Kopf ── */

.hd[b-gj3mk7y3h9]  .hd-kopf {

    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;

    padding: 1.1rem 1.4rem; border-radius: 12px; color: var(--sp-kopf-text, #ecdcb9);

    background:

        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sp-bernstein, #d98a1c) 28%, transparent) 0%, transparent 55%),

        linear-gradient(135deg, var(--sp-kopf, #241e17) 0%, color-mix(in srgb, var(--sp-kopf, #241e17) 80%, var(--sp-kupfer, #a1532f)) 100%);

    border: 1px solid var(--sp-kopf-linie, #5a4a33);

    box-shadow: 0 2px 10px rgba(0, 0, 0, .18), inset 0 1px 0 color-mix(in srgb, var(--sp-glanz, #c9a157) 35%, transparent);

}

.hd[b-gj3mk7y3h9]  .hd-gruss-zeile { font-family: var(--sp-font-display, Georgia, serif); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--sp-glanz, #c9a157); letter-spacing: .02em; line-height: 1.15; }

.hd[b-gj3mk7y3h9]  .hd-datum { font-size: 1rem; opacity: .9; margin-top: 2px; }

.hd[b-gj3mk7y3h9]  .hd-stand { font-size: .8rem; color: var(--sp-kopf-text-2, #a8977a); margin-top: 6px; }

.hd[b-gj3mk7y3h9]  .hd-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.hd[b-gj3mk7y3h9]  .hd-laeuft { font-size: .85rem; color: var(--sp-glanz, #c9a157); display: inline-flex; align-items: center; gap: 6px; max-width: 360px; }

.hd[b-gj3mk7y3h9]  .hd-zahnrad { display: inline-block; animation: hd-dreh-b-gj3mk7y3h9 2.4s linear infinite; font-size: 1.1rem; }

@keyframes hd-dreh-b-gj3mk7y3h9 { to { transform: rotate(360deg); } }



/* ── Kennzahlen ── */

.hd[b-gj3mk7y3h9]  .hd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }

.hd[b-gj3mk7y3h9]  .hd-kpi {

    position: relative; padding: .8rem 1rem; border-radius: 10px; background: var(--sp-flaeche, #fffaf0);

    border: 1px solid var(--sp-rahmen, #cdb68a); box-shadow: var(--sp-schatten); overflow: hidden;

}

.hd[b-gj3mk7y3h9]  .hd-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sp-glanz, #c9a157); }

.hd[b-gj3mk7y3h9]  .hd-kpi.kritisch::before { background: var(--sp-signal, #a8321f); }

.hd[b-gj3mk7y3h9]  .hd-kpi.ruhig::before { background: var(--sp-patina, #2f6f60); }

.hd[b-gj3mk7y3h9]  .hd-kpi-icon { position: absolute; right: .7rem; top: .6rem; font-size: 1.6rem; opacity: .25; color: var(--sp-messing, #8a6424); }

.hd[b-gj3mk7y3h9]  .hd-kpi-wert { font-family: var(--sp-font-display, Georgia, serif); font-size: 2rem; line-height: 1; color: var(--sp-tinte, #2b2118); }

.hd[b-gj3mk7y3h9]  .hd-kpi.kritisch .hd-kpi-wert { color: var(--sp-signal, #a8321f); }

.hd[b-gj3mk7y3h9]  .hd-kpi-text { font-size: .8rem; color: var(--sp-tinte-2, #6b5a45); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

.hd[b-gj3mk7y3h9]  .hd-kpi-mano { display: flex; align-items: center; justify-content: center; padding: .25rem; grid-row: span 2; }



/* ── Raster ── */

.hd[b-gj3mk7y3h9]  .hd-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; }

@media (max-width: 1100px) { .hd[b-gj3mk7y3h9]  .hd-raster { grid-template-columns: minmax(0, 1fr); } }

.hd[b-gj3mk7y3h9]  .hd-spalte { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; align-content: start; }

.hd[b-gj3mk7y3h9]  aside.hd-spalte { grid-template-columns: minmax(0, 1fr); }

.hd[b-gj3mk7y3h9]  .hd-abschnitt-titel {

    display: flex; align-items: center; justify-content: space-between; font-family: var(--sp-font-display, Georgia, serif);

    color: var(--sp-messing, #8a6424); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--sp-rahmen, #cdb68a); padding-bottom: 4px;

}



/* ── Karten ── */

.hd[b-gj3mk7y3h9]  .hd-karte {

    background: var(--sp-flaeche, #fffaf0); border: 1px solid var(--sp-rahmen, #cdb68a); border-radius: 10px; padding: .8rem 1rem;

    box-shadow: var(--sp-schatten); min-width: 0;

}

.hd[b-gj3mk7y3h9]  .hd-karte.kritisch { border-color: color-mix(in srgb, var(--sp-signal, #a8321f) 55%, var(--sp-rahmen, #cdb68a)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-signal, #a8321f) 25%, transparent), var(--sp-schatten); }

.hd[b-gj3mk7y3h9]  .hd-karte-kopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; color: var(--sp-messing, #8a6424); }

.hd[b-gj3mk7y3h9]  .hd-karte-kopf h3 { font-family: var(--sp-font-display, Georgia, serif); font-size: 1rem; margin: 0; flex: 1; color: var(--sp-tinte, #2b2118); letter-spacing: .02em; }

.hd[b-gj3mk7y3h9]  .hd-zahl {

    min-width: 1.8rem; text-align: center; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: .85rem;

    background: color-mix(in srgb, var(--sp-glanz, #c9a157) 30%, transparent); color: var(--sp-tinte, #2b2118);

}

.hd[b-gj3mk7y3h9]  .hd-zahl.kritisch { background: var(--sp-signal, #a8321f); color: #fff; }

.hd[b-gj3mk7y3h9]  .hd-zahl.ruhig { background: color-mix(in srgb, var(--sp-patina, #2f6f60) 20%, transparent); color: var(--sp-patina, #2f6f60); }

.hd[b-gj3mk7y3h9]  .hd-zeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .88rem; }

.hd[b-gj3mk7y3h9]  .hd-zeilen li { padding: 3px 0 3px 10px; border-left: 2px solid color-mix(in srgb, var(--sp-rahmen, #cdb68a) 60%, transparent); overflow-wrap: anywhere; }

.hd[b-gj3mk7y3h9]  .hd-zeilen li.warn { border-left-color: var(--sp-signal, #a8321f); color: var(--sp-signal, #a8321f); }

.hd[b-gj3mk7y3h9]  .hd-zeilen li.zwischentitel { border-left: none; padding-left: 0; font-weight: 600; color: var(--sp-tinte-2, #6b5a45); margin-top: 4px; }

.hd[b-gj3mk7y3h9]  .hd-mehr { border: none; background: none; padding: 4px 0 0; color: var(--sp-messing, #8a6424); font-size: .8rem; cursor: pointer; }

.hd[b-gj3mk7y3h9]  .hd-mehr:hover { color: var(--sp-kupfer, #a1532f); text-decoration: underline; }

.hd[b-gj3mk7y3h9]  .hd-leer { display: flex; gap: .75rem; align-items: flex-start; color: var(--sp-tinte-2, #6b5a45); grid-column: 1 / -1; }

.hd[b-gj3mk7y3h9]  .hd-leer .rzi { font-size: 2rem; color: var(--sp-glanz, #c9a157); }

.hd[b-gj3mk7y3h9]  .hd-leer p { margin: 0; }

.hd[b-gj3mk7y3h9]  .hd-leer.klein { font-size: .85rem; }

.hd[b-gj3mk7y3h9]  .hd-klein { font-size: .75rem; color: var(--sp-tinte-2, #6b5a45); }

.hd[b-gj3mk7y3h9]  .hd-fehler { font-size: .8rem; color: var(--sp-signal, #a8321f); margin-top: 4px; }



/* ── Aktien ── */

.hd[b-gj3mk7y3h9]  .hd-aktie-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }

.hd[b-gj3mk7y3h9]  .hd-aktie-name { font-weight: 600; }

.hd[b-gj3mk7y3h9]  .hd-weg { border: none; background: none; font-size: 1.2rem; line-height: 1; color: var(--sp-tinte-2, #6b5a45); cursor: pointer; opacity: .5; }

.hd[b-gj3mk7y3h9]  .hd-weg:hover { opacity: 1; color: var(--sp-signal, #a8321f); }

.hd[b-gj3mk7y3h9]  .hd-aktie-kurs { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: .35rem 0 .25rem; }

.hd[b-gj3mk7y3h9]  .hd-aktie-kurs > span:first-child { font-family: var(--sp-font-display, Georgia, serif); font-size: 1.6rem; }

.hd[b-gj3mk7y3h9]  .hd-aktie-kurs small { font-size: .8rem; color: var(--sp-tinte-2, #6b5a45); }

.hd[b-gj3mk7y3h9]  .hd-aenderung { font-weight: 700; font-size: .9rem; padding: 2px 8px; border-radius: 6px; }

.hd[b-gj3mk7y3h9]  .hd-aenderung.plus { color: var(--sp-patina, #2f6f60); background: color-mix(in srgb, var(--sp-patina, #2f6f60) 14%, transparent); }

.hd[b-gj3mk7y3h9]  .hd-aenderung.minus { color: var(--sp-signal, #a8321f); background: color-mix(in srgb, var(--sp-signal, #a8321f) 12%, transparent); }

.hd[b-gj3mk7y3h9]  .hd-spark { width: 100%; height: 56px; display: block; }

.hd[b-gj3mk7y3h9]  .hd-spark .linie { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }

.hd[b-gj3mk7y3h9]  .hd-spark.plus .linie { stroke: var(--sp-patina, #2f6f60); }

.hd[b-gj3mk7y3h9]  .hd-spark.minus .linie { stroke: var(--sp-signal, #a8321f); }

.hd[b-gj3mk7y3h9]  .hd-spark .flaeche { stroke: none; opacity: .14; }

.hd[b-gj3mk7y3h9]  .hd-spark.plus .flaeche { fill: var(--sp-patina, #2f6f60); }

.hd[b-gj3mk7y3h9]  .hd-spark.minus .flaeche { fill: var(--sp-signal, #a8321f); }

.hd[b-gj3mk7y3h9]  .hd-spanne { display: flex; justify-content: space-between; }



/* ── Recherchen ── */

.hd[b-gj3mk7y3h9]  .hd-ergebnis {

    white-space: pre-wrap; font-size: .88rem; margin-top: .4rem; max-height: 9.5em; overflow: hidden; position: relative; overflow-wrap: anywhere;

}

.hd[b-gj3mk7y3h9]  .hd-ergebnis:not(.offen)::after {

    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5em; background: linear-gradient(transparent, var(--sp-flaeche, #fffaf0));

}

.hd[b-gj3mk7y3h9]  .hd-ergebnis.offen { max-height: none; }

.hd[b-gj3mk7y3h9]  .hd-links { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: 3px; font-size: .82rem; }

.hd[b-gj3mk7y3h9]  .hd-links li::before { content: "↗ "; color: var(--sp-glanz, #c9a157); }

.hd[b-gj3mk7y3h9]  .hd-links a { color: var(--sp-messing, #8a6424); }



/* ── Neue Beobachtung ── */

.hd[b-gj3mk7y3h9]  .hd-neu { display: flex; flex-direction: column; gap: .5rem; }

.hd[b-gj3mk7y3h9]  .hd-neu-art { display: flex; gap: .4rem; }

.hd[b-gj3mk7y3h9]  .hd-neu-art button {

    flex: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--sp-rahmen, #cdb68a); background: var(--sp-flaeche-2, #f7efdf); cursor: pointer; color: var(--sp-tinte, #2b2118);

}

.hd[b-gj3mk7y3h9]  .hd-neu-art button.aktiv { border-color: var(--sp-glanz, #c9a157); box-shadow: var(--sp-glow); background: var(--sp-flaeche, #fffaf0); font-weight: 600; }

.hd[b-gj3mk7y3h9]  .hd-haken { display: flex; align-items: center; gap: 6px; font-size: .85rem; }



@media (max-width: 600px) {

    .hd[b-gj3mk7y3h9]  .hd-kopf { padding: .9rem 1rem; }

    .hd[b-gj3mk7y3h9]  .hd-spalte { grid-template-columns: minmax(0, 1fr); }

}



/* ── Preisvergleich ── */

.hd[b-gj3mk7y3h9]  .hd-preisfelder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }

.hd[b-gj3mk7y3h9]  .hd-preis.erreicht { border-color: var(--sp-patina, #2f6f60); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp-patina, #2f6f60) 35%, transparent), var(--sp-schatten); }

.hd[b-gj3mk7y3h9]  .hd-tiefst {

    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; padding: .55rem .75rem; border-radius: 8px; text-decoration: none; color: inherit;

    background: linear-gradient(135deg, color-mix(in srgb, var(--sp-glanz, #c9a157) 22%, transparent), color-mix(in srgb, var(--sp-glanz, #c9a157) 6%, transparent));

    border: 1px solid color-mix(in srgb, var(--sp-glanz, #c9a157) 55%, transparent);

}

.hd[b-gj3mk7y3h9]  .hd-tiefst:hover { box-shadow: var(--sp-glow); }

.hd[b-gj3mk7y3h9]  .hd-tiefst-preis { font-family: var(--sp-font-display, Georgia, serif); font-size: 1.8rem; line-height: 1; color: var(--sp-tinte, #2b2118); }

.hd[b-gj3mk7y3h9]  .hd-tiefst-text { font-size: .8rem; color: var(--sp-tinte-2, #6b5a45); line-height: 1.25; }

.hd[b-gj3mk7y3h9]  .hd-ziel { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--sp-patina, #2f6f60); }

.hd[b-gj3mk7y3h9]  .hd-angebote { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.hd[b-gj3mk7y3h9]  .hd-angebote a {

    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .5rem; align-items: center;

    padding: 4px 6px; border-radius: 6px; text-decoration: none; color: inherit; font-size: .84rem; overflow: hidden;

}

.hd[b-gj3mk7y3h9]  .hd-angebote a:hover { background: var(--sp-flaeche-2, #f7efdf); }

.hd[b-gj3mk7y3h9]  .hd-quelle { font-size: .72rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--sp-flaeche-2, #f7efdf); border: 1px solid var(--sp-rahmen, #cdb68a); }

.hd[b-gj3mk7y3h9]  .hd-angebot-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hd[b-gj3mk7y3h9]  .hd-angebot-preis { font-weight: 700; }

.hd[b-gj3mk7y3h9]  .hd-mehrpreis { font-size: .75rem; color: var(--sp-signal, #a8321f); min-width: 4.5em; text-align: right; }

.hd[b-gj3mk7y3h9]  .hd-balken { position: absolute; left: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--sp-signal, #a8321f) 45%, transparent); }



.hd[b-gj3mk7y3h9]  .hd-kopf-knoepfe { display: inline-flex; gap: 2px; }

.hd[b-gj3mk7y3h9]  .hd-stift { border: none; background: none; font-size: .95rem; line-height: 1; color: var(--sp-tinte-2, #6b5a45); cursor: pointer; opacity: .55; padding: 0 2px; }

.hd[b-gj3mk7y3h9]  .hd-stift:hover { opacity: 1; color: var(--sp-messing, #8a6424); }



/* ── Neuigkeiten (Tickets/E-Mails) ── */

.hd[b-gj3mk7y3h9]  .hd-neuigkeiten-quelle { margin-top: .15rem; font-style: italic; }

.hd[b-gj3mk7y3h9]  .hd-neuigkeiten.hd-neu-da { border-left: 3px solid var(--sp-glanz, #c9a157); }

.hd[b-gj3mk7y3h9]  .hd-neuigkeiten.hd-neu-da .hd-aktie-name::after {

    content: "neu"; margin-left: .4rem; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;

    padding: .05rem .35rem; border-radius: 6px; vertical-align: middle;

    color: var(--sp-flaeche, #fffaf0); background: var(--sp-glanz, #c9a157);

}

/* /Shared/LoginLogoutButton.razor.rz.scp.css */

.navbar-toggler[b-x08vivaeu6] {

    background-color: rgba(255, 255, 255, 0.1);

}



.top-row[b-x08vivaeu6] {

    height: 3.5rem;

    background-color: rgba(0,0,0,0.4);

}



.navbar-brand[b-x08vivaeu6] {

    font-size: 1.1rem;

}



.oi[b-x08vivaeu6] {

    width: 2rem;

    font-size: 1.1rem;

    vertical-align: text-top;

    top: -2px;

}



.nav-item[b-x08vivaeu6] {

    font-size: 0.9rem;

    padding-bottom: 0.5rem;

}



    .nav-item:first-of-type[b-x08vivaeu6] {

        padding-top: 1rem;

    }



    .nav-item:last-of-type[b-x08vivaeu6] {

        padding-bottom: 1rem;

    }



    .nav-item[b-x08vivaeu6]  a {

        color: #d7d7d7;

        border-radius: 4px;

        height: 3rem;

        display: flex;

        align-items: center;

        line-height: 3rem;

    }



.nav-item[b-x08vivaeu6]  a.active {

    background-color: rgba(255,255,255,0.25);

    color: white;

}



.nav-item[b-x08vivaeu6]  a:hover {

    background-color: rgba(255,255,255,0.1);

    color: white;

}



@media (min-width: 641px) {

    .navbar-toggler[b-x08vivaeu6] {

        display: none;

    }



    .collapse[b-x08vivaeu6] {

        /* Never collapse the sidebar for wide screens */

        display: block;

    }

    

    .nav-scrollable[b-x08vivaeu6] {

        /* Allow sidebar to scroll for tall menus */

        height: calc(100vh - 3.5rem);

        overflow-y: auto;

    }

}