/* =========================================================================
   en-design.css — kanonischer Design-Layer für bitfarm-archiv.com
   Basis: Swiss-Style-Layer (v2), ergänzt um v1-Regeln, DE-portierte
   Layoutregeln und Konflikt-Fixes. Wird auf ALLEN Unterseiten geladen.
   ========================================================================= */

/* 1) GLOBAL DESIGN TOKENS
   ========================================================================= */
:root {
    --bfa-blue-900: #055382;
    --bfa-blue-700: #0870af;
    --bfa-orange: #ff6600;
    --bfa-white: #ffffff;
    --bfa-gray-100: #f7f8fa;
    --bfa-gray-200: #f0f2f5;
    --bfa-gray-300: #e6e9ee;
    --bfa-gray-700: #2f3842;
    --bfa-gray-900: #1a202c;

    --bfa-font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bfa-font-heading: "Open Sans", "Montserrat", system-ui, sans-serif;

    --bfa-fs-display: 46px;
    --bfa-fs-xxl: 36px;
    --bfa-fs-xl: 28px;
    --bfa-fs-lg: 20px;
    --bfa-fs-md: 16px;

    --bfa-space-3: 24px;
    --bfa-space-4: 32px;
    --bfa-space-5: 40px;

    --bfa-radius-md: 12px;
    --bfa-radius-lg: 20px;

    --bfa-shadow-soft: 0 10px 40px rgba(5, 83, 130, 0.08);
    --bfa-shadow-hover: 0 20px 60px rgba(5, 83, 130, 0.15);
}

/* 2) TYPOGRAPHY
   ========================================================================= */
body {
    font-family: var(--bfa-font-sans) !important;
    color: var(--bfa-gray-700) !important;
    background-color: var(--bfa-gray-100);
    line-height: 1.6;
}

h1, h2, h3, h4, .h1-big, .h2-big, .h2-b-b, .h3-blue {
    font-family: var(--bfa-font-heading) !important;
    color: var(--bfa-blue-900) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-top: 0;
    margin-bottom: var(--bfa-space-3);
    letter-spacing: -0.02em;
}

.h1-big { font-size: var(--bfa-fs-display) !important; }
h2, .h2-big, .h2-b-b { font-size: var(--bfa-fs-xxl) !important; border: none !important; }
h3, .h3-blue { font-size: var(--bfa-fs-xl) !important; }

.orange-h { color: var(--bfa-orange) !important; }

p, .text-left-s {
    font-size: var(--bfa-fs-md);
    margin-bottom: var(--bfa-space-3);
}

/* Textlinks im Content */
.textbox-box-center-wide a:not(.call-to-action):not(.navbar-brand):not(.btn),
.textbox-box-center-2 a:not(.call-to-action):not(.navbar-brand):not(.btn) {
    color: var(--bfa-blue-900);
    text-decoration: underline;
    text-decoration-color: var(--bfa-orange);
    font-weight: 600;
    transition: color 0.2s ease;
}
.textbox-box-center-wide a:not(.call-to-action):hover,
.textbox-box-center-2 a:not(.call-to-action):hover {
    color: var(--bfa-orange);
    text-decoration-color: var(--bfa-blue-900);
}

/* 3) CONTAINER & CARDS
   ========================================================================= */
.textbox-box-center-wide, .textbox-box-center-2 {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Alte Box-Klassen zu Swiss-Cards */
.support-start, aside, .textbox-flex,
.boxclass-2-a-twin, .boxclass-news, .boxclass-start, .boxclass-start-o,
.boxclass-simple, .boxclass-link, .boxclass-link-a, .boxclass-link-b,
.boxclass-simple-flex-2-a {
    background: var(--bfa-white) !important;
    border-radius: var(--bfa-radius-md) !important;
    padding: var(--bfa-space-4) !important;
    margin-bottom: var(--bfa-space-4) !important;
    box-shadow: var(--bfa-shadow-soft) !important;
    border: 1px solid var(--bfa-gray-300) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.support-start:hover, aside:hover, .textbox-flex:hover {
    box-shadow: var(--bfa-shadow-hover) !important;
    border-color: rgba(255, 102, 0, 0.3) !important;
}

/* Verschachtelte Boxen: kein doppeltes Styling */
.support-start aside, div[class*="boxclass"] div[class*="boxclass"] {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.support-start aside:hover, div[class*="boxclass"] div[class*="boxclass"]:hover {
    transform: none !important;
}

/* Flex-Layouts für Side-by-Side Boxen */
.boxclass-simple-flex, .boxclass-simple-flex-1-row, .boxclass-2-a-twin {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bfa-space-4);
    align-items: center;
}
.boxclass-simple-flex > div, .boxclass-simple-flex-1-row > div {
    flex: 1 1 300px;
}

/* 4) CALL-TO-ACTION BUTTONS
   ========================================================================= */
a.call-to-action, a.call-to-action-half, a.call-to-action-faq {
    display: block !important;
    background-color: var(--bfa-orange) !important;
    color: var(--bfa-white) !important;
    padding: 14px 32px !important;
    border-radius: var(--bfa-radius-md) !important;
    font-weight: 700 !important;
    font-size: var(--bfa-fs-md) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    margin-top: 15px;
    /* Zentriert in jedem Kontext (Block, Column-Flex, Table-Cell-Erbe) */
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    border: none !important;
}
/* Direkte Kinder von Row-Flex-Containern: eigene Zeile erzwingen */
.textbox-box-center-wide > a.call-to-action,
.textbox-box-center-wide > a.call-to-action-half,
.textbox-box-center-wide > a.call-to-action-faq,
.textbox-box-center-2 > a.call-to-action,
.textbox-box-center-2 > a.call-to-action-half,
.textbox-box-center-2 > a.call-to-action-faq,
.textbox-box-center-1 > a.call-to-action,
.textbox-box-center-1 > a.call-to-action-half,
.textbox-box-center-1 > a.call-to-action-faq {
    flex: 0 0 100%;
    width: auto;
    max-width: 100%;
}
a.call-to-action:hover, a.call-to-action-half:hover, a.call-to-action-faq:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.4) !important;
    background-color: #e65c00 !important;
    color: var(--bfa-white) !important;
}

/* 5) LISTEN & TOC
   ========================================================================= */
ul.point-list {
    list-style: none !important;
    padding-left: 0 !important;
}
ul.point-list > li {
    position: relative;
    padding-left: 28px !important;
    margin-bottom: 12px;
    font-size: var(--bfa-fs-md);
}
ul.point-list > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--bfa-orange);
    font-weight: bold;
    font-size: 18px;
}

#toc_container {
    background: var(--bfa-white) !important;
    border: 1px solid var(--bfa-orange) !important;
    border-radius: var(--bfa-radius-md) !important;
    padding: var(--bfa-space-4) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    margin: var(--bfa-space-5) auto !important;
    max-width: 800px;
}
.toc_title {
    font-family: var(--bfa-font-heading) !important;
    color: var(--bfa-blue-900) !important;
    font-weight: 800 !important;
    font-size: var(--bfa-fs-xl) !important;
    margin-bottom: var(--bfa-space-3) !important;
    border-bottom: 2px solid var(--bfa-gray-200);
    padding-bottom: 10px;
}
.toc_list, .toc_list ul {
    list-style: none !important;
    padding-left: 0 !important;
}
.toc_list ul {
    padding-left: 20px !important;
    margin-top: 8px;
}
.toc_list li { margin-bottom: 10px; }
.toc_list a {
    color: var(--bfa-gray-700) !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.2s;
}
.toc_list a:hover { color: var(--bfa-orange) !important; }
.toc_list a::before {
    content: "•";
    color: var(--bfa-orange);
    margin-right: 8px;
    font-weight: bold;
}

/* 6) BILDER & MEDIA
   ========================================================================= */
.img-box, .boxclass-simple-flex-img-b {
    border-radius: var(--bfa-radius-md) !important;
    box-shadow: var(--bfa-shadow-soft) !important;
    border: none !important;
    max-width: 100%;
    height: auto;
}

.img-header {
    border-radius: 0 0 var(--bfa-radius-lg) var(--bfa-radius-lg) !important;
    margin-bottom: var(--bfa-space-4);
}

.yt_box {
    border-radius: var(--bfa-radius-md);
    overflow: hidden;
    box-shadow: var(--bfa-shadow-soft);
    aspect-ratio: 16 / 9;
    height: auto !important;
    max-width: 800px;
    margin: var(--bfa-space-4) auto;
}
.yt_box iframe {
    width: 100% !important;
    height: 100% !important;
}

/* 7) SLIDER (Kundenstimmen)
   ========================================================================= */
.sliderElements li figure {
    background: var(--bfa-white) !important;
    border-radius: var(--bfa-radius-md) !important;
    box-shadow: var(--bfa-shadow-soft) !important;
    padding: var(--bfa-space-4) !important;
    border: 1px solid var(--bfa-gray-300) !important;
    text-align: center;
}
.sliderElements li figure img {
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: none !important;
}

/* Fix: Story-Links lesbar (DE-Vorlage: weiß auf blau, kein Underline) */
.sliderElements a,
.sliderElements li figure figcaption a {
    color: var(--bfa-white) !important;
    background: var(--bfa-blue-900);
    text-decoration: none !important;
    font-weight: 600;
    padding: 0.5em;
    border-radius: 5px;
    display: inline-block;
    line-height: 1.6;
    transition: background-color 0.2s ease;
}
.sliderElements a:hover,
.sliderElements li figure figcaption a:hover {
    color: var(--bfa-white) !important;
    background: var(--bfa-blue-700);
    text-decoration: none !important;
}

/* 8) TRIVIA-/INFO-KARTEN (DE-Port: 3 Spalten Desktop, Stack mobil)
   -----------------------------------------------------------------------
   DE-Vorlage .boxclass-simple-flex-2-a: width 31.3%, bis 1200px nebeneinander,
   darunter gestapelt 100%. Global wie im DE-Stylesheet.
   ========================================================================= */
.boxclass-simple-flex-2-a {
    width: 31.3%;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}
.boxclass-simple-flex-2-a .text-left-s {
    text-align: left;
}
@media only screen and (max-width: 1200px) {
    .boxclass-simple-flex-2-a {
        width: 100%;
        margin: 0.2em 0;
        font-size: 17px;
    }
}
/* Legacy-styles.css erzwingt bis 1600px width:100% !important auf
   .full-width-1400 und zerstört damit alle 3-Spalten-Raster — kontern. */
@media (max-width: 1600px) {
    .boxclass-simple-flex-2-a.full-width-1400 {
        width: 31.3% !important;
    }
}
@media (max-width: 1200px) {
    .boxclass-simple-flex-2-a.full-width-1400 {
        width: 100% !important;
    }
}

/* 9) REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .support-start:hover, aside:hover, .textbox-flex:hover,
    div[class*="boxclass"]:hover,
    a.call-to-action:hover, a.call-to-action-half:hover, a.call-to-action-faq:hover {
        transform: none !important;
        transition: none !important;
    }
}