/*! normalize.css */
                    
*, *::before, *::after {
    box-sizing: border-box;
}
:root {
    --primary: #0d6efd;
    --secondary: #6c757d;
    --color3: #0dcaf0;
    --color4: #198754;
    --white: white;
    --light: #f8f9fa;
    --dark: #212529;
}
body {
    background-color: var(--bs-body-bg);
}
body, html {
    min-height: 100vh;
}



/*-------------------------------------------------------------
   Responsive Layout
------------------------------------------------------------- */
@media (max-width: 991px) {
    body.poster {
        margin-top: 60vh;
    }
}

/*-------------------------------------------------------------
   Background and Layout
------------------------------------------------------------- */
                    
body.poster {
    background-attachment: fixed;
}
.top-5 {
    top: 5px;
}



/*Abstand zur fixed Navbar */
                    
body {
    padding-top: 70px;
}



/*-------------------------------------------------------------
   Theme Colors (Bootstrap Variables Overrides)
------------------------------------------------------------- */
                    
[data-bs-theme="light"] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: rgb(26, 153, 166);
    --bs-secondary: rgb(32, 18, 121);
    --bs-success: #000000;
    --bs-info: rgb(244, 228, 252);
    --bs-warning: #ffc107;
    --bs-danger: #f5930a;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 26, 153, 166;
    --bs-secondary-rgb: 32, 18, 121;
    --bs-success-rgb: 0, 0, 0;
    --bs-info-rgb: 244, 228, 252;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #089138;
    --bs-secondary-text-emphasis: #77efa9;
    --bs-success-text-emphasis: #000;
    --bs-info-text-emphasis: #625b65;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #d1ebed;
    --bs-secondary-bg-subtle: #d2d0e4;
    --bs-success-bg-subtle: #cccccc;
    --bs-info-bg-subtle: #fdfafe;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #adb5bd;
    --bs-primary-border-subtle: #a3d6db;
    --bs-secondary-border-subtle: #a6a0c9;
    --bs-success-border-subtle: #999999;
    --bs-info-border-subtle: #fbf4fe;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-font-sans-serif: "Fira Sans", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-body-font-family: "Fira Sans", sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-link-color: rgb(26, 153, 166);
    --bs-link-hover-color: #157a85;
    --bs-border-radius: 0.25rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-bg: #212529;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-bg: #343a40;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-bg: #2b3035;
    --bs-primary-text-emphasis: #76c2ca;
    --bs-secondary-text-emphasis: #7971af;
    --bs-success-text-emphasis: #666666;
    --bs-info-text-emphasis: #f8effd;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #051f21;
    --bs-secondary-bg-subtle: #060418;
    --bs-success-bg-subtle: #000;
    --bs-info-bg-subtle: #312e32;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-primary-border-subtle: #105c64;
    --bs-secondary-border-subtle: #130b49;
    --bs-link-color: #76c2ca;
    --bs-link-hover-color: #91ced5;
    --bs-border-color: #495057;
}



/*-------------------------------------------------------------
   Custom Text Colors
------------------------------------------------------------- */

.fred-green {
    color: #09b545 !important;
}
.fred-red {
    color: #f91d33 !important;
}
.fred-lightgreen {
    color: #82e4ab !important;
}
.fred-orange {
    color: #f5870a !important;
}
.fred-yellow {
    color: #f1f51d !important;
}
.text-green {
    color: #16ff6a !important;
}



/*-------------------------------------------------------------
   Buttons
------------------------------------------------------------- */
                    
.btn-outline-primary {
    color: #ffffff;
    border-color: #ffffff;
    background-color: transparent;
}
.btn-outline-primary:not(.active) {
    color: #ffffff;
    border-color: #ffffff;
}
.btn-outline-primary.active {
    color: #212529;
    background-color: #ffffff;
    border-color: #ffffff;
}
.btn-outline-primary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.btn-outline-primary:focus, .btn-outline-primary:active {
    box-shadow: none;
}



/*-------------------------------------------------------------
   Glossary Terms (Tooltips)
------------------------------------------------------------- */
                    
/* Glossary terms: minimal styling, preserve original formatting */
.glossary-term {
    display: inline;
    margin: 0;
    padding: 0;
    cursor: help;
    text-decoration: underline dotted currentColor;
    text-decoration-color: inherit;
    text-underline-offset: 3px;
    line-height: inherit;
    white-space: inherit;
    /* Inherit all text properties - !important to override Bootstrap utilities */
    color: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    background: none !important;
    border: none !important;
}
.glossary-term:hover {
    text-decoration-style: solid;
    /* No color change on hover - just make underline solid */
}
h1 .glossary-term, h2 .glossary-term, h3 .glossary-term, h4 .glossary-term, h5 .glossary-term, h6 .glossary-term {
    color: inherit !important;
    font-weight: inherit !important;
}



/*-------------------------------------------------------------
   Tooltip Bubble
------------------------------------------------------------- */
                    
.tooltip-inner {
    background-color: #fff8b3 !important;
    color: #000 !important;
    max-width: 300px;
    text-align: left;
    padding: 8px;
    font-size: 0.9rem;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before, .tooltip.bs-tooltip-bottom .tooltip-arrow::before, .tooltip.bs-tooltip-start .tooltip-arrow::before, .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-top-color: #fff8b3 !important;
    border-bottom-color: #fff8b3 !important;
    border-left-color: #fff8b3 !important;
    border-right-color: #fff8b3 !important;
}

/* Touch devices: Bootstrap tooltips handle tap-to-show natively.
   The previous ::after fallback caused yellow bars in DevTools responsive mode
   because Chrome emulates hover:none while title attributes are still present. */

/*-------------------------------------------------------------
   Blog Accordion – Überschriften & Text
------------------------------------------------------------- */
                    
.blog-headline, .accordion-header .accordion-button {
    color: var(--bs-primary, #1a99a6) !important;
    font-weight: bold;
}



/*Einzug der Blogtexte (leicht) */
                    
.blog-paragraph-container {
    padding-left: 4ch;
}



/*Textfarbe & keine forced Whitespaces */
                    
.accordion-body, .blog-post-text {
    color: #fff !important;
    white-space: normal;

    /*WICHTIG: kein pre-wrap -> keine Extra-Leerzeilen */
    text-indent: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}



/*-------------------------------------------------------------
   Input Styling
------------------------------------------------------------- */
                    
.text-white-input {
    color: #fff !important;
    background-color: transparent;
    border-color: #fff;
}
.text-white-input::placeholder {
    color: #ccc !important;
}



/*-------------------------------------------------------------
   Gauge Styling – Needle, Layout, Bilder, Value/Momentum
-------------------------------------------------------------- */

/*--- Nadel-Farbvarianten (falls du sie später nutzen willst) --- */
                    
#needle.red, #daily-needle.red, #weekly-needle.red {
    fill: #f30a21;
    stroke: #f30a21;
}
#needle.green, #daily-needle.green, #weekly-needle.green {
    fill: #089138;
    stroke: #089138;
}
#needle.bullish, #daily-needle.bullish, #weekly-needle.bullish {
    fill: #77efa9;
    stroke: #77efa9;
    stroke-width: 2;
}
#needle.bearish, #daily-needle.bearish, #weekly-needle.bearish {
    fill: #f5930a;
    stroke: #f5930a;
    stroke-width: 2;
}



/*-------------------------------------------------------------
   Spalten / Grundlayout
-------------------------------------------------------------- */

/*Wrapper für jede Gauge-Spalte (Weekly / Daily) */
                    
.gauge-block {
    margin-bottom: 1rem;
}



/*Titelblock (Period + Date) */
                    
.gauge-title-block {
    margin-bottom: 1rem;
}



/*Bereich: links Value/Momentum, rechts die Gauge */
                    
.gauge-main {
    width: 100%;
}



/*-------------------------------------------------------------
   Value / Momentum links neben der Gauge
-------------------------------------------------------------- */
                    
.gauge-value-position {
    display: flex;
    flex-direction: column;
    justify-content: center;

    /*vertikal mittig auf Gauge-Höhe */
    align-items: flex-end;

    /*Text rechtsbündig */
    height: 300px;

    /*gleiche Höhe wie die Gauge (SVG) */
    position: relative;
    right: 50px;

    /*schiebt den Block in die Gauge hinein */
    line-height: 1.2;
}



/*Mobile: unter der Gauge, nicht mehr hinein geschoben */
@media (max-width: 767.98px) {
    .gauge-main {
        flex-direction: column;
    }

    .gauge-value-position {
        align-items: center;
        right: 50px;
        height: auto;
        margin-bottom: 1rem;
    }

    /* Markov: reduce spacing between Bull/Sideways/Bear arrows */
    .outlook-arrows {
        gap: 2rem !important;
    }
}

/*-------------------------------------------------------------
   Einheitliche Bildgrößen (Impulse + Market Phase)
-------------------------------------------------------------- */

/*Beide Bildtypen benutzen .gauge-img */
                    
.gauge-img {
    display: block;
    width: 100%;
    max-width: 360px;

    /*exakt gleiche Breite */
    height: auto;
    margin: 0.5rem auto 0;

    /*kleiner, einheitlicher Abstand */
}



/*kleine Screens: etwas schmäler */
@media (max-width: 576px) {
    .gauge-img {
        max-width: 280px;
    }
}

/*-------------------------------------------------------------
   Modal Chart Legend
------------------------------------------------------------- */
                    
#legendImage {
    max-height: 90vh;
}



/*-------------------------------------------------------------
   Dropdown-Menü (dunkel)
------------------------------------------------------------- */
                    
.dropdown-menu.black-dropdown {
    background-color: #000;
    color: #fff;
    border: 1px solid #333;
}
.dropdown-menu.black-dropdown .dropdown-item {
    color: #fff;
}
.dropdown-menu.black-dropdown .dropdown-item:hover, .dropdown-menu.black-dropdown .dropdown-item:focus {
    background-color: #444;
    color: #fff;
}
.dropdown-menu.black-dropdown .dropdown-item.active, .dropdown-menu.black-dropdown .dropdown-item.active:hover {
    background-color: var(--bs-primary);
    color: #fff;
}



/*-------------------------------------------------------------
   Mobile Buttons (Dropdowns)
------------------------------------------------------------- */
                    
.d-md-none .dropdown > .btn {
    width: auto;
    min-width: 150px;
}
.d-md-none .dropdown-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}



/*-------------------------------------------------------------
   Auto Width Buttons (Index)
------------------------------------------------------------- */
                    
.btn-auto-width {
    width: auto;
    min-width: max-content;
}



/*============================================================
   BLOG – kompaktere Abstände (Absätze, Überschriften, Listen)
============================================================ */
                    
#latest-blog-post .blog-post-text, #blog-container .blog-paragraph-container {
    white-space: normal;

    /*verhindert zusätzliche Leerzeilen */
    line-height: 1.35;

    /*etwas enger */
}



/*Absätze enger */
                    
#latest-blog-post .blog-post-text > p, #blog-container .blog-paragraph-container > p {
    margin: 0 0 .5rem !important;
}



/*Erstes/letztes Kind ohne Zusatzabstand */
                    
#latest-blog-post .blog-post-text > :first-child, #blog-container .blog-paragraph-container > :first-child {
    margin-top: 0 !important;
}
#latest-blog-post .blog-post-text > :last-child, #blog-container .blog-paragraph-container > :last-child {
    margin-bottom: 0 !important;
}



/*Überschriften enger */
                    
#latest-blog-post .blog-post-text h1, #latest-blog-post .blog-post-text h2, #latest-blog-post .blog-post-text h3, #blog-container .blog-paragraph-container h1, #blog-container .blog-paragraph-container h2, #blog-container .blog-paragraph-container h3 {
    margin-top: .55rem !important;
    margin-bottom: .35rem !important;
}



/*Listen kompakt */
                    
#latest-blog-post .blog-post-text ul, #latest-blog-post .blog-post-text ol, #blog-container .blog-paragraph-container ul, #blog-container .blog-paragraph-container ol {
    margin: .1rem 0 .1rem 1.05rem !important;
    padding-left: 1.05rem !important;
}
#latest-blog-post .blog-post-text li, #blog-container .blog-paragraph-container li {
    margin: 0 !important;
}
#latest-blog-post .blog-post-text li > p, #blog-container .blog-paragraph-container li > p {
    margin: .08rem 0 !important;
}
#latest-blog-post .blog-post-text li > ul, #latest-blog-post .blog-post-text li > ol, #blog-container .blog-paragraph-container li > ul, #blog-container .blog-paragraph-container li > ol {
    margin-top: .10rem !important;
}



/*Accordion-Body oben/unten etwas straffen */
                    
.accordion-body {
    padding-top: .40rem;
    padding-bottom: .50rem;
}



/*Schlankere Zeile für den Play-Button innerhalb des Akkordeons */
                    
.post-play-row {
    margin: .25rem 0 .25rem;
}



/*============================================================
   BLOG-BILDER: halbe Breite, zentriert + Controls/Caption
============================================================ */
                    
#latest-blog-post .blog-post-text img, #blog-container .blog-paragraph-container img {
    width: 50% !important;

    /*halbe Breite erzwingen */
    max-width: 50% !important;

    /*überschreibt .img-fluid (100%) */
    height: auto !important;
    display: block !important;
    margin: .5rem auto .25rem auto !important;

    /*zentriert */
}



/*Enlarge + Caption (Türkis) in einer Reihe unter dem Bild */
                    
.image-controls-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.image-controls-row .btn-enlarge {
    /*Standard-Türkis (Primary) kommt aus dem Theme */
}
.image-controls-row .figure-caption {
    margin: 0;
    color: var(--bs-primary) !important;

    /*Türkis */
}



/*Modal-Bild NICHT beschränken */
                    
#blogImageModal #blogImageModalImg {
    max-width: 100% !important;
    width: auto !important;
    max-height: 100vh !important;
}



/*Mobile: Bilder wieder 100% Breite */
@media (max-width: 576px) {
    #latest-blog-post .blog-post-text img, #blog-container .blog-paragraph-container img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/*Modal Close-Button (weiß, ohne Focus-Schatten) */
                    
#blogImageModal .btn-close {
    filter: invert(1);
    opacity: 1;
}



/*Subscribe-Modal: Close-Button weiß darstellen */
                    
#subscribeModal .btn-close {
    filter: invert(1);

    /*macht das SVG weiß */
    opacity: 1;

    /*voller Kontrast */
}
#subscribeModal .btn-close:focus {
    box-shadow: none;

    /*optional: kein blauer Fokus-Ring */
}
#blogImageModal .btn-close:focus {
    box-shadow: none;
}



/*============================================================
   Tabellen (Markdown)
   – 1 horizontale Linie unter thead
   – Vertikale Linien zwischen Spalten
============================================================ */
                    
#latest-blog-post .blog-post-text table, #blog-container .blog-paragraph-container table {
    width: 100%;
    border-collapse: collapse;
    margin: .4rem 0 .6rem 0;
}
#latest-blog-post .blog-post-text thead tr, #blog-container .blog-paragraph-container thead tr {
    border-bottom: 2px solid rgba(255, 255, 255, .35);
}
#latest-blog-post .blog-post-text th, #blog-container .blog-paragraph-container th, #latest-blog-post .blog-post-text td, #blog-container .blog-paragraph-container td {
    padding: .25rem .55rem;
}



/*vertikale Linien zwischen Spalten */
                    
#latest-blog-post .blog-post-text th + th, #latest-blog-post .blog-post-text td + td, #blog-container .blog-paragraph-container th + th, #blog-container .blog-paragraph-container td + td {
    border-left: 1px solid rgba(255, 255, 255, .25);
}



/*Kopf etwas kräftiger */
                    
#latest-blog-post .blog-post-text th, #blog-container .blog-paragraph-container th {
    font-weight: 700;
}



/*=== BLOG Action Buttons: Play / Copy / Social ============================ */

/*Gemeinsame Höhe/Ausrichtung für Play & Copy (gleich hoch) */
                    
.post-play.btn, .post-action.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;

    /*identische Innenabstände wie Play */
    padding: .25rem .25rem;
    font-size: .90rem;
    line-height: 1;

    /*stabilere Höhe */
    height: 38px;

    /*<- gleiche Höhe erzwingen */
    width: 120px;

    /*Play/Copy-Breite */
    white-space: nowrap;
}



/*Social-Buttons: 1/3 der Play-Breite (40px) */
                    
.post-social.btn {
    width: 40px;

    /*120px / 3 */
    height: 38px;

    /*gleiche Höhe wie Play/Copy */
    padding: 0;

    /*Icon zentriert */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bs-primary) !important;

    /*Türkiser Rand */
    color: var(--bs-primary) !important;

    /*Türkise Iconfarbe falls SVG */
    box-shadow: none !important;
}



/*Icon-Größe in Social-Buttons */
                    
.post-social img {
    height: 16px;
    width: auto;
    display: block;
}



/*Hover/Active States in Türkis */
                    
.post-social.btn:hover, .post-social.btn:focus {
    background: rgba(var(--bs-primary-rgb), .12) !important;
    color: var(--bs-primary) !important;
}
.post-social.btn:active {
    background: rgba(var(--bs-primary-rgb), .18) !important;
}



/*In sehr schmalen Layouts: Socials brechen sauber um */
@media (max-width: 480px) {
    .post-social.btn {
        width: 36px;
        height: 36px;
    }
}

/*=== BLOG Action Buttons =================================== */

/*Play & Copy: gleiche Höhe/Breite */
                    
.post-play.btn, .post-action.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .25rem .25rem;
    font-size: .90rem;
    line-height: 1;
    height: 38px;

    /*identische Höhe */
    width: 120px;

    /*Play/Copy Breite */
    white-space: nowrap;
}



/*Social: kompakte, QUADRATISCHE Icons (Desktop & Mobile) */
                    
.post-social.btn {
    width: 34px;

    /*quadratisch & kleiner */
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bs-primary) !important;

    /*türkiser Rahmen */
    color: var(--bs-primary) !important;
    box-shadow: none !important;
}
.post-social img {
    height: 16px;
    width: 16px;
    object-fit: contain;
    display: block;
}
.post-social.btn:hover, .post-social.btn:focus {
    background: rgba(var(--bs-primary-rgb), .12) !important;
}
.post-social.btn:active {
    background: rgba(var(--bs-primary-rgb), .18) !important;
}



/*Mobile: nativer Share-Button (nur auf Mobile sichtbar) */
                    
.post-share-native.btn {
    height: 38px;
    width: 120px;
}



/*Nur Mobil zeigen, ab md (≥768px) ausblenden */
@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .d-desktop-only {
        display: none !important;
    }
}

/*=== BLOG Actions – final sizing ======================================== */

/*Keep Play & Copy identical height */
                    
.post-play.btn, .post-action.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .25rem .25rem;
    font-size: .90rem;
    line-height: 1;
    height: 38px;
    width: 120px;
    white-space: nowrap;
}



/*Social buttons: icon-only, compact, turquoise border */
                    
.post-social.btn {
    height: 34px;
    min-width: 34px;

    /*square if only icon */
    width: auto;

    /*shrink to icon */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    box-shadow: none !important;
}



/*Icon size + hard cap (in case an asset is larger) */
                    
.post-social img {
    height: 18px;
    width: 18px;
    max-width: 18px;
    max-height: 18px;
    object-fit: contain;
    display: block;
}



/*Native mobile share button (same height as Play/Copy) */
                    
.post-share-native.btn {
    height: 38px;
    width: 120px;
}



/*Mobile/Desktop visibility helpers */
@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .d-desktop-only {
        display: none !important;
    }
}

.follow-us {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.follow-label {
    font-weight: 600;
}
.follow-icon img {
    display: block;
    width: 28px;
    height: 28px;
    transition: transform .15s ease, opacity .15s ease;
}
.follow-icon:hover img {
    transform: translateY(-1px) scale(1.06);
    opacity: .85;
}



/*Mobile Controls: Buttons in einer Zeile, sauberes Wrapping */
                    
.controls-mobile .dropdown {
    min-width: 140px;
}



/*verhindert zu frühes Umbruch-Chaos */
                    
.controls-mobile .legend-btn {
    flex: 0 0 auto;
}



/*Legend wird nicht überbreit */
@media (max-width: 767.98px) {
    .controls-mobile {
        row-gap: .5rem;
    }

    /*angenehme Zeilenhöhe, wenn's wrappt */
}

/*-------------------------------------------------------------
   Navbar Layout
------------------------------------------------------------- */

/*Brand etwas größer */
                    
.navbar .navbar-brand span {
    font-size: 1.25rem;
}



/*Menülinks größer + mehr vertical padding */
                    
.navbar .nav-link {
    font-size: 1.05rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}



/*Dropdown-Items etwas größer */
                    
.navbar .dropdown-menu .dropdown-item {
    font-size: 1rem;
}



/*Farben / Active-State */
                    
.navbar .nav-link {
    color: #1a1b7a;
    opacity: 0.85;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .nav-link.show {
    color: #00a1b5;

    /*dein Türkis/Hellblau */
    opacity: 1;
}
.dropdown-menu .dropdown-item.active {
    background-color: rgba(0,161,181,0.1);
    color: #00a1b5;
}



/*Grundfarbe */

.navbar .nav-link {
    color: #1a1b7a;

    /*dein dunkles Blau */
    opacity: 0.8;
}



/*Hover + aktive Seite + offenes Dropdown (hellblau).
  Wichtig: .show fängt den Open-State der Dropdowns, sonst überschreibt
  Bootstrap's --bs-navbar-active-color den Titel auf weiß/unsichtbar. */

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .nav-link.show {
    color: #00a1b5;

    /*dein Hellblau / Türkis */
    opacity: 1;
}



/*Dropdown-Items: aktive Seite markieren */
                    
.dropdown-menu .dropdown-item.active {
    background-color: rgba(0,161,181,0.1);
    color: #00a1b5;
}



/*Falls Bootstrap nicht greift: Dropdown sichtbar, wenn .show */
                    
.dropdown-menu.show {
    display: block;
}

/* Mobile: make collapsed navbar scrollable when menu exceeds viewport height
   (Analysis dropdown alone has 21 items — easily overflows small screens) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: calc(100vh - 60px);  /* viewport minus navbar header */
        max-height: calc(100dvh - 60px); /* dynamic viewport height (accounts for mobile browser chrome) */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/*Navbar-Dropdowns an die weiße Navbar anpassen */
                    
.navbar .dropdown-menu {
    background-color: #ffffff;

    /*wie Navbar */
    border: 1px solid #e0e0e0;
    border-radius: 0;

    /*clean, ohne abgerundete Ecken – optional */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 220px;

    /*etwas breiter, damit alles gut lesbar ist */
}



/*Textfarbe im Dropdown wie im Hauptmenü */
                    
.navbar .dropdown-menu .dropdown-item {
    color: #1a1b7a;

    /*dein dunkles Blau */
    font-size: 0.98rem;
}



/*Hover / Fokus / Active im Dropdown – passend zum Türkis */
                    
.navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus {
    background-color: rgba(0,161,181,0.08);

    /*leichtes Türkis hinterlegt */
    color: #00a1b5;
}



/*Bereits als aktiv markiertes Untermenü (z.B. aktuelle Seite) */
                    
.navbar .dropdown-menu .dropdown-item.active {
    background-color: rgba(0,161,181,0.12);
    color: #00a1b5;
}
.blog-toc-list {
    max-height: 70vh;
    overflow-y: auto;
}
.blog-toc-item {
    position: relative;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.blog-toc-item a {
    color: #f8f9fa;
    text-decoration: none;
    font-size: 0.9rem;
}
.blog-toc-item a:hover {
    text-decoration: underline;
}
.blog-toc-item.active-blog {
    background-color: rgba(255,255,255,0.1);
    border-left: 3px solid #0d6efd;
}
.blog-viewer-wrapper {
    min-height: 500px;
    max-height: 80vh;
    overflow: hidden;
}
.blog-viewer-frame {
    min-height: 500px;
    height: 80vh;
}



/*-------------------------------------------------------------
   Blog Cards – Struktur, Hover, Layout
------------------------------------------------------------- */
                    
.blog-card {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    position: relative;
}



/*Innerer Bereich, der animiert wird (Header + Snippet) */
                    
.blog-card-inner {
    padding: 1.25rem 1.25rem 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}



/*Hover-Effekt – nur der innere Wrapper bewegt sich */
                    
.blog-card:hover .blog-card-inner {
    transform: translateY(-2px);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.25);
}



/*Weißer Trennstrich zwischen Kacheln */
                    
.blog-card + .blog-card, .blog-card-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}



/*Titel, Meta, Snippet */
                    
.blog-card-title {
    color: #ffffff;
    margin-bottom: 0.35rem;
}
.blog-card-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
}
.blog-card-snippet {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);

    /*Maximal 3 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/*Alle Texte im grünen Blog-Bereich standardmäßig weiß */
                    
section.bg-success, section.bg-success p, section.bg-success span, section.bg-success li {
    color: #ffffff;
}



/*Zähler "Showing X of Y posts" dezent grau lassen */
                    
#blog-count-label {
    color: rgba(255, 255, 255, 0.6);
}



/*Reading time dezent grau lassen */
                    
.blog-card-footer-left {
    color: rgba(255, 255, 255, 0.7);
}



/*-------------------------------------------------------------
   Footer – Reading Time + Play/Share
------------------------------------------------------------- */
                    
.blog-card-footer {
    padding: 0.5rem 1.25rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
}
.blog-card-footer-left {
    color: rgba(255, 255, 255, 0.7);
}
.blog-card-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}



/*Buttons: Kopfhörer + Share Icon */
                    
.icon-button {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.15rem 0.45rem;
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
}
.icon-button:hover {
    background: rgba(255, 255, 255, 0.1);
}



/*-------------------------------------------------------------
   Global Audio Bar
------------------------------------------------------------- */
                    
#global-audio-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;

    /*über Content, unter Modals */
    font-size: 0.85rem;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.85);
}



/*Platz für Audio-Bar schaffen */
                    
body {
    padding-bottom: 60px;

    /*anpassen falls Bar höher wird */
}

@media (max-width: 576px) {
    #global-audio-bar .container {
        padding-inline: 0.75rem;
    }
}

/*==== FORCE WHITE TEXT IN DROPDOWNS (even with text-muted body) === */
                    
body.text-muted .dropdown-menu.black-dropdown, body.text-muted .dropdown-menu.black-dropdown .dropdown-item {
    color: #fff !important;
}



/*Hover, Focus, Active */
                    
body.text-muted .dropdown-menu.black-dropdown .dropdown-item:hover, body.text-muted .dropdown-menu.black-dropdown .dropdown-item:focus, body.text-muted .dropdown-menu.black-dropdown .dropdown-item.active, body.text-muted .dropdown-menu.black-dropdown .dropdown-item.active:hover {
    color: #fff !important;
    background-color: #444 !important;
}



/*Toggle Button (der sichtbare Button am Anfang) */
                    
body.text-muted .dropdown-toggle {
    color: #fff !important;
}



/*White Close Button for ALL Modals */
                    
.btn-close.white-close {
    filter: invert(1);

    /*Macht das icon weiß */
    opacity: 1;

    /*volle Deckkraft */
}
.btn-close.white-close:focus, .btn-close.white-close:active {
    box-shadow: none !important;

    /*kein blauer Fokus */
    outline: none !important;
}
.blog-latest-card {
    position: relative;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
}
.blog-latest-card img {
    border-radius: 8px;
    opacity: 0.92;
    transition: opacity .2s ease-in-out;
}
.blog-latest-card:hover img {
    opacity: 1;
}



/*White close icon for all modals on dark background */
                    
.modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;

    /*gut sichtbar */
}



/*optional: etwas größer */
                    
.modal .btn-close {
    width: 1.1rem;
    height: 1.1rem;
}

/* Resources page - Image switching buttons */
.button-group {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.button-group .btn {
    transition: all 0.3s ease;
    cursor: pointer;
}

.button-group .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button-group .btn.active {
    transform: scale(1.05);
}

/* Historical examples images */
#historical-examples img {
    transition: opacity 0.2s ease;
}

/* Status Box Links (Analysis Overview) */
.status-box-link {
    display: block;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.status-box-link:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.status-box-link img {
    transition: transform 0.2s ease;
}

.status-box-link:hover img {
    transform: scale(1.05);
}

/*-------------------------------------------------------------
   Login / Member Area
------------------------------------------------------------- */

/* Login Card */
[data-page="login"] .card {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form inputs */
[data-page="login"] .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

[data-page="login"] .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(26, 153, 166, 0.25) !important;
}

[data-page="login"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Checkbox styling */
[data-page="login"] .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-page="login"] .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Primary button */
[data-page="login"] .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-weight: 600;
}

[data-page="login"] .btn-primary:hover {
    background-color: #157a85;
    border-color: #157a85;
}

/* Links */
[data-page="login"] a.text-white-50:hover,
[data-page="login"] a.text-white:hover {
    color: var(--bs-primary) !important;
}

/* Google Login Button */
.btn-google {
    background-color: #ffffff;
    color: #757575;
    border: 1px solid #ddd;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    transition: all 0.2s ease;
}

.btn-google:hover {
    background-color: #f5f5f5;
    color: #555;
    border-color: #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-google:active {
    background-color: #eee;
}

/* Divider with text */
.divider-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.divider-with-text::before,
.divider-with-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.divider-with-text span {
    padding: 0 1rem;
}

/*-------------------------------------------------------------
   Dashboard / Member Area
------------------------------------------------------------- */

/* Dashboard page styling */
[data-page="dashboard"] .card {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Member Content Cards */
.member-card {
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: var(--bs-primary);
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.member-card .card-title {
    margin-bottom: 0.5rem;
}

.member-card:hover .card-title {
    color: var(--bs-primary);
}

/*-------------------------------------------------------------
   Pricing Cards
------------------------------------------------------------- */

.pricing-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.pricing-featured {
    border: 2px solid var(--bs-primary);
}

.pricing-badge {
    position: absolute;
    top: 0.75rem;
    right: -2.5rem;
    background: var(--bs-primary);
    color: #fff;
    padding: 0.25rem 3rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    transform: rotate(45deg);
    letter-spacing: 0.5px;
    z-index: 1;
}

.pricing-price {
    font-size: 1rem;
}

.pricing-price .price-currency {
    font-size: 1.5rem;
    vertical-align: top;
    line-height: 1;
}

.pricing-price .price-amount {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.pricing-price .price-period {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.pricing-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-features li:last-child {
    border-bottom: none;
}

/*-------------------------------------------------------------
   Buy Me a Coffee Section
------------------------------------------------------------- */

.coffee-icon svg {
    margin: 0 0.25rem;
}

.coffee-amount {
    min-width: 80px;
    transition: all 0.2s ease;
}

.coffee-amount:hover {
    transform: scale(1.05);
}

.coffee-amount.active {
    background-color: #ffc107 !important;
    color: #000 !important;
    border-color: #ffc107 !important;
}

.coffee-emoji {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

#coffee-checkout-btn {
    transition: all 0.2s ease;
}

#coffee-checkout-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/*-------------------------------------------------------------
   Trust Badges Section
------------------------------------------------------------- */

.miv-trust-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.miv-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.miv-trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 169, 53, 0.5);
}

.miv-trust-badge svg {
    width: 32px;
    height: 32px;
    color: #d4a935;
    margin-bottom: 0.75rem;
}

.miv-trust-badge-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.miv-trust-badge-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
}

.miv-trust-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.miv-trust-review {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.miv-trust-review-stars {
    color: #d4a935;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.miv-trust-review-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    font-style: italic;
}

.miv-trust-review-author {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.miv-trust-disclaimer {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1.5rem;
}

@media (max-width: 991.98px) {
    .miv-trust-badges {
        grid-template-columns: repeat(2, 1fr);
    }
    .miv-trust-reviews {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .miv-trust-badges {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .miv-trust-badge {
        padding: 0.75rem 0.5rem;
        border-radius: 0.5rem;
    }
    .miv-trust-badge svg {
        width: 20px;
        height: 20px;
        margin-bottom: 0.4rem;
    }
    .miv-trust-badge-title {
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }
    .miv-trust-badge-sub {
        font-size: 0.65rem;
    }
    .miv-trust-reviews {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .miv-trust-review {
        padding: 1rem;
    }
    .miv-trust-review-text {
        font-size: 0.8rem;
    }
    .miv-trust-disclaimer {
        font-size: 0.65rem;
    }
    /* Pricing cards on small screens */
    .pricing-price .price-amount {
        font-size: 2.25rem;
    }
    .pricing-price .price-currency {
        font-size: 1.25rem;
    }
    .pricing-features li {
        font-size: 0.875rem;
        padding: 0.375rem 0;
    }
    .pricing-badge {
        font-size: 0.65rem;
        padding: 0.2rem 2.25rem;
    }
    /* Coffee section */
    .coffee-icon span {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 359.98px) {
    /* Very small screens: stack badges vertically */
    .miv-trust-badges {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .miv-trust-badge {
        flex-direction: row;
        text-align: left;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .miv-trust-badge svg {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/*-------------------------------------------------------------
   Analysis Overview - Mobile Responsiveness
------------------------------------------------------------- */

/* Overview card base styles */
.spn-overview-card {
    border-radius: 12px;
}

/* Mobile: Forecast chart smaller bars */
@media (max-width: 767.98px) {
    /* Forecast chart canvas - smaller on mobile */
    #overviewForecastChart {
        width: 100% !important;
        max-width: 360px;
        height: 90px !important;
    }

    /* Gauges + Impulse images in combined cards — same size */
    .spn-overview-card .card-body #overviewWeeklyGauge,
    .spn-overview-card .card-body #overviewDailyGauge,
    #overviewImpulseWeeklyImg,
    #overviewImpulseImg {
        width: 180px !important;
        height: 110px !important;
        object-fit: contain;
    }
    /* Uncertainty gauge + Market Phase — wider */
    .spn-overview-card .card-body #overviewUncertaintyGauge,
    #overviewMarketPhaseImg {
        width: 220px !important;
        height: 130px !important;
        object-fit: contain;
    }

    /* Reduce gap in flex layouts */
    .spn-overview-card .card-body.d-flex.gap-4 {
        gap: 1rem !important;
    }
}

/* Smaller screens - even more compact */
@media (max-width: 575.98px) {
    #overviewForecastChart {
        max-width: 280px;
        height: 80px !important;
    }

    .spn-overview-card .card-body #overviewWeeklyGauge,
    .spn-overview-card .card-body #overviewDailyGauge,
    #overviewImpulseWeeklyImg,
    #overviewImpulseImg {
        width: 150px !important;
        height: 90px !important;
        object-fit: contain;
    }
    .spn-overview-card .card-body #overviewUncertaintyGauge,
    #overviewMarketPhaseImg {
        width: 180px !important;
        height: 105px !important;
        object-fit: contain;
    }

    /* Sector and Risk gauges - slightly smaller */
    #overviewSectorGauge,
    #overviewRiskGauge {
        width: 200px !important;
        height: 120px !important;
    }
}

/*-------------------------------------------------------------
   Chart Toolbar Dropdowns - White Text
------------------------------------------------------------- */

/* Show dropdown in chart toolbar - white text on dark background */
.spn-show-dropdown .dropdown-menu {
    background-color: rgba(30, 30, 50, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
}

.spn-show-dropdown .dropdown-menu label,
.spn-show-dropdown .dropdown-menu .form-check-label {
    color: white !important;
}

.spn-show-dropdown .dropdown-menu .form-check-input {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Data and Timeframe dropdowns */
.spn-data-dropdown .dropdown-menu,
.spn-timeframe-dropdown .dropdown-menu {
    background-color: rgba(30, 30, 50, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.spn-data-dropdown .dropdown-menu .dropdown-item,
.spn-timeframe-dropdown .dropdown-menu .dropdown-item {
    color: white;
}

.spn-data-dropdown .dropdown-menu .dropdown-item:hover,
.spn-timeframe-dropdown .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-primary);
}

.spn-data-dropdown .dropdown-menu .dropdown-item.active,
.spn-timeframe-dropdown .dropdown-menu .dropdown-item.active {
    background-color: var(--bs-primary);
    color: white;
}

/* FRED Viewer Dropdowns — dark-themed select */
/* Darkpool table sticky header — opaque background prevents row overlap */
.dp-sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1a1a2e;
}

/* Darkpool filter dropdowns — turquoise background, white text */
.spn-dp-filter {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-weight: 600;
}
.spn-dp-filter:focus {
    border-color: rgba(255,255,255,0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.15) !important;
}
.spn-dp-filter option {
    background: #0b0f14;
    color: #fff;
}

.economy-dropdown {
    background-color: #1a1a2e;
    color: #ffffff;
    border: 1px solid rgba(26, 153, 166, 0.5);
}
.economy-dropdown:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(26, 153, 166, 0.25);
}
.economy-dropdown option {
    background-color: #1a1a2e;
    color: #ffffff;
}
.economy-dropdown optgroup {
    background-color: #12121f;
    color: var(--bs-primary);
}

/* ─────────────────────────────────────────────────
   Memberstack 2.0 — Login / Signup modal overrides
   Grey input fields → white with black text
   ───────────────────────────────────────────────── */
#ms-modal input[type="email"],
#ms-modal input[type="password"],
#ms-modal input[type="text"],
[data-ms-dialog] input[type="email"],
[data-ms-dialog] input[type="password"],
[data-ms-dialog] input[type="text"],
ms-modal input[type="email"],
ms-modal input[type="password"],
ms-modal input[type="text"],
[data-ms-dialog="login"] input,
[data-ms-dialog="signup"] input,
[data-ms-dialog] input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #d1d5db !important;
    -webkit-text-fill-color: #000000 !important;
}
#ms-modal input::placeholder,
[data-ms-dialog] input::placeholder,
ms-modal input::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
}
/* Memberstack modal background */
[data-ms-dialog] .ms-form-group input,
[data-ms-dialog] .ms-field input {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ============================================================
   Market Breadth horizontal stacked gauge
   Used on analysis_overview.html (compact card) and
   analysis_breadth.html (dashboard, larger height).
   Segments collapse to width:0 when their count is 0.
============================================================ */
.miv-breadth-gauge {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.miv-breadth-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    width: 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.4s ease;
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.18);
}
.miv-breadth-seg:last-child { box-shadow: none; }
.miv-breadth-seg.miv-breadth-seg-sm {
    font-size: 0.85rem;
}
/* Hide segment text when its width is too small to fit (set via inline data-attr on JS) */
.miv-breadth-seg[data-narrow="1"] { font-size: 0; }
/* Larger variant used by the breadth dashboard hero gauge */
.miv-breadth-gauge-lg .miv-breadth-seg {
    font-size: 1.5rem;
}
.miv-breadth-gauge-lg .miv-breadth-seg.miv-breadth-seg-sm {
    font-size: 1.25rem;
}

/* ============================================================
   Dark-mode contrast: .text-white-50 (50% white) is too faint on the
   dark background. Render it full white in dark mode for readability.
   Light mode keeps its own override (theme-light.css). 2026-07-24.
   ============================================================ */
html[data-bs-theme="dark"] .text-white-50 {
    --bs-text-opacity: 1;
    color: #fff !important;
}

/* ===== Wide layout (2026-08-19) ==========================================
   Measured before changing anything: on a 2382px desktop the page used 1320px
   and left 1062px (45 %) as margin. That cap came from Bootstrap's .container
   alone -- there was no override anywhere in our own CSS -- so this one rule
   reaches all 119 pages and 578 .container elements without touching any HTML.

   style.css loads AFTER bootstrap.css, so this wins without !important.

   Two deliberate limits:

   1. NOT edge-to-edge. 1800px is roughly where a chart stops gaining useful
      resolution and a 3440px monitor would just spread everything thin. Below
      1400px nothing changes at all, so phones, tablets and small laptops keep
      the layout they have today.

   2. Prose does NOT widen with it. A 1700px line of body text is the classic
      full-width mistake -- the eye loses the line it is on. Only paragraphs and
      lists that are DIRECT children of a container are constrained: those are
      the page intros and section prose. Text inside a Bootstrap column, a card
      or a table is already bounded by its own box and is left alone, which is
      why this is not a blanket `p { max-width }`. */
@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1800px;
    }

    /* Reading measure for the prose that sits directly in a container. */
    .container > p,
    .container > ul,
    .container > ol,
    .container > .lead {
        max-width: 82ch;
    }
}

/* ============================================================
   Burger button, dark theme (2026-09-16)
   ------------------------------------------------------------
   The navbar is WHITE in both themes, but the page root carries
   data-bs-theme="dark", so Bootstrap hands the toggler its dark-theme
   icon: stroke rgba(255,255,255,.55) on rgb(255,255,255) -- present,
   40x56 px, and invisible. theme-light.css already inverted it, but
   five pages never loaded that file (analysis_cds, analysis_connections,
   analysis_margin_debt, regime_summary, subscription_cancelled), so the
   burger was missing there in dark mode. The rule lives HERE as well,
   in the stylesheet every page loads, so one forgotten <link> can no
   longer take the mobile menu with it. Setting the icon VARIABLE on the ICON ITSELF: Bootstrap
   declares it in `[data-bs-theme=dark] .navbar-toggler-icon`, so a value
   inherited from the navbar never reaches it (measured 2026-09-16).
   ============================================================ */
html[data-bs-theme="dark"] .navbar.bg-white .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] .navbar.bg-white .navbar-toggler {
    --bs-navbar-toggler-border-color: rgba(33, 37, 41, 0.25);
}


/*-------------------------------------------------------------
   Start Here — die Boxen der meistgelesenen Seiten (2026-09-16)
   Ganze Karte als Link. Der Grund steht im Serverlog: 789 Einstiege
   auf "/" und 8 % gingen weiter — ein Textlink am Kartenfuss wurde
   schlicht nicht getroffen. Die Trefferflaeche ist die Karte.
------------------------------------------------------------- */
.miv-start-card {
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.miv-start-card:hover,
.miv-start-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(212, 169, 53, 0.55);
    background-color: rgba(255, 255, 255, 0.04);
}

/* Sichtbarer Fokus: die Karte ist ein <a> und muss per Tastatur
   erreichbar bleiben. Bootstrap entfernt den Umriss auf .card. */
.miv-start-card:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Die Textfarbe der Karten wird BEWUSST nicht hier gesetzt.
   css/theme-light.css regelt sie ueber `html[data-bs-theme="light"] .bg-dark
   .card-text`. Eine Farbe an dieser Stelle gewaenne gegen das Theme und
   machte die Karten im Hellmodus unlesbar -- genau das passierte beim ersten
   Entwurf am 2026-09-16, zusammen mit `bg-black` statt `bg-dark`: das
   Light-Theme haengt an .bg-dark und sieht .bg-black nicht. */

@media (prefers-reduced-motion: reduce) {
    .miv-start-card { transition: none; }
    .miv-start-card:hover,
    .miv-start-card:focus-visible { transform: none; }
}

/* Das kompakte Formular im Hero. Schmaler als das grosse am Seitenfuss,
   damit es neben dem Fliesstext steht statt ihn zu verdraengen. */
.miv-hero-subscribe {
    max-width: 30rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(212, 169, 53, 0.45);
    border-radius: 0.6rem;
}

.miv-hero-subscribe .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   (i) INFO BUTTON + POPOVER  (js/miv_info.js)
   Lives here, not in chart.css: twelve pages fold their
   explanations behind it and analysis_etf_flow.html draws no
   charts at all. style.css is the one stylesheet every page
   loads -- the same reasoning that moved the navbar burger fix.
   ============================================================ */
/* ============================================================
   CDS dashboard tiles + the (i) button (2026-09-16)
   Tiles carry a value, a sparkline and a button; the prose that
   used to frame them lives in js/miv_info.js popovers.
   ============================================================ */
.cds-tile { background: var(--bs-gray-800, #1f2430); border-radius: 8px; padding: 0.75rem 0.85rem; }
.cds-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; }
.cds-tile-label { font-size: 0.78rem; line-height: 1.15; }
.cds-tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cds-tile-spark { min-height: 30px; margin: 0.15rem 0 0.1rem; }
.cds-tile-sub { font-size: 0.72rem; opacity: 0.85; }
.cds-spark { width: 100%; height: 30px; display: block; }
.cds-spark-zero { stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 3 3; }
.cds-spark-none { font-size: 0.68rem; opacity: 0.6; }

.miv-info {
    flex: 0 0 auto; width: 1.25rem; height: 1.25rem; padding: 0; line-height: 1;
    border-radius: 50%; border: 1px solid currentColor; background: transparent;
    color: inherit; font-size: 0.72rem; font-weight: 700; font-style: italic; cursor: pointer;
}
.miv-info:hover, .miv-info:focus-visible { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
/* The LABELLED variant. On analysis_liquidity.html it is not a footnote
   marker beside a heading but the only way to reach a section's text, so it
   has to read and behave as a button: measured at the old 0.1rem padding it
   rendered 142x17 px, well under the 24 px a touch target needs. */
.miv-info-wide {
    width: auto; height: auto; border-radius: 999px;
    padding: 0.3rem 0.85rem; font-style: normal; font-size: 0.8rem;
    line-height: 1.35; white-space: normal; text-align: left;
}
.miv-info-box {
    position: absolute; z-index: 1080; max-width: min(92vw, 30rem);
    background: var(--bs-gray-900, #161a22); color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color, rgba(127,127,127,.4)); border-radius: 0.5rem;
    padding: 0.7rem 0.85rem; box-shadow: 0 6px 24px rgba(0,0,0,0.45); font-size: 0.82rem; line-height: 1.5;
}
[data-bs-theme="light"] .miv-info-box { background: #ffffff; }
/* The button takes its HEADING's colour, which is what makes it read as part of
   that heading -- and on the light canvas that is exactly what breaks it:
   measured 1.46:1 for the amber .text-warning heading of the QE card against
   #eef3f8. In the light theme it falls back to the body colour; the heading
   beside it stays amber and the (i) becomes legible. */
html[data-bs-theme="light"] .miv-info { color: var(--bs-body-color, #212529); }
.miv-info-close { position: absolute; top: 0.15rem; right: 0.35rem; background: none; border: 0; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.miv-info-body { padding-right: 0.8rem; }