/* -------------------------------------------------------------
   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;
}

/* -------------------------------------------------------------
   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-term {
    display: inline;
    margin: 0 0.3em;
    padding: 0;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    line-height: inherit;
    white-space: inherit;
}

.glossary-term:hover {
    color: var(--bs-blue, #0d6efd);
}

h1 .glossary-term,
h2 .glossary-term,
h3 .glossary-term,
h4 .glossary-term,
h5 .glossary-term,
h6 .glossary-term {
    color: inherit !important;
    font-weight: inherit;
}

/* -------------------------------------------------------------
   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;
}

@media (hover: none) {
    .glossary-term::after {
        content: attr(title);
        display: block;
        background: #fff8b3;
        color: #000;
        border: 1px solid #aaa;
        padding: 0.5em;
        margin-top: 0.3em;
        font-size: 0.85em;
        white-space: normal;
    }
}

/* -------------------------------------------------------------
   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.red {
    fill: #f30a21;
    stroke: #f30a21;
}

#needle.green {
    fill: #089138;
    stroke: #089138;
}

#needle.bullish {
    fill: #77efa9;
    stroke: #77efa9;
    stroke-width: 2;
}

#needle.bearish {
    fill: #f5930a;
    stroke: #f5930a;
    stroke-width: 2;
}

/* -------------------------------------------------------------
   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: .9;
}

#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 */
}