/*
 * Histudy compatibility overrides.
 *
 * Extracted from the historical style-a.css/style-b.css branch and kept here
 * so all EYLC customisation follows the untouched Histudy original stylesheet.
 */
:root {
    --color-secondary: #6668e7;
    --secondary-opacity: rgba(115, 102, 231, 0.13);
}

/* Histudy assigns every shadow box its own white background. Let the
   surrounding section determine the surface instead. */
.rbt-shadow-box {
    background: inherit;
}

/* Histudy gives every .rbt-card height: 100% so course cards line up in
   public grids. Tool workspaces also use that class for standalone content
   panels, where the percentage resolves against the stretched main column
   and creates large empty areas. Workspace panels therefore size to their
   content by default; an explicit Bootstrap .h-100 remains authoritative. */
.workspace-shell .rbt-card.card-body {
    height: auto;
}

/* Legacy form-control dimensions. */
input[type=checkbox] ~ label,
input[type=radio] ~ label {
    font-size: 17px;
}

input[type=checkbox] ~ label::before,
input[type=radio] ~ label::before {
    top: 4px;
    width: 17px;
    height: 17px;
}

input[type=checkbox] ~ label::after,
input[type=radio] ~ label::after {
    top: 8px;
    left: 3px;
    width: 12px;
    height: 7px;
}

.rbt-header-top {
    z-index: 9999;
}

.rbt-cart-side-menu {
    z-index: 9999;
}

.rbt-default-form label {
    text-transform: unset;
}

/* Removes the original blue/pink Hero background and image layers. */
.rbt-banner-1 {
    background-image: none;
    background: transparent;
}

.tag-nav-holder {
    position: initial;
    overflow-x: auto;
    color: #ffffff;
    border-bottom: 1px #ffffff solid;
    background: #192335;
    height: 56px;
    margin: 0;
    padding: 0;
}

.tag-nav {
    margin-top: 10px;
    padding: 0;
    white-space: nowrap;
}

.tag-nav-entry {
    padding: 8px 0 8px 0;
    margin-left: 1rem;
    margin-right: 1rem;
    line-height: 32px;
    color: #ffffff;
}

@media screen and (max-width: 1400px) {
    .about-style-1 .thumbnail-wrapper .thumbnail.image-3 {
        left: 133px;
    }
}

@media screen and (max-width: 1199px) {
    .about-style-1 .thumbnail-wrapper .thumbnail.image-3 {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .about-style-1 .rbt-feature-wrapper.ml_dec_20 {
        margin-left: 0 !important;
    }

    .about-style-1 .thumbnail-wrapper .thumbnail.image-3 {
        left: 0;
        top: 0;
        width: 100%;
        display: none !important;
    }

    .rbt-btn {
        font-size: 12px;
    }
}

.bg-gradient-11 {
    background: linear-gradient(180deg, #55C7F5 0%, #FFF 100%) !important
}

.bg-secondary-opacity {
    background: var(--secondary-opacity) !important;
    color: #1173b9 !important;
}

.rbt-btn.btn-gradient {
    background-image: linear-gradient(to right, var(--color-primary), #55c4f1, #55c4f1, var(--color-primary));
}

.rbt-btn.btn-border-gradient {
    background: linear-gradient(90deg, #55C4F1, #0F72B8);
}

.rbt-page-banner-wrapper .rbt-banner-image, .bg-gradient-9 {
    background: linear-gradient(270deg, #55c4f1 0%, var(--color-primary) 100%) !important;
}

.rbt-badge-2 {
    background: rgba(179, 193, 249, 0.8);
    box-shadow: 0 12px 22px 0 rgba(195, 191, 242, 0.28);
}

.legacy-3d {
    display: none;
}

a.tag-nav-entry.active {
    color: #6380ee;
}

ul.user-list-wrapper > li > a.active {
    color: #2f57ef;
}

.height-350 {
    height: 350px;
}

.btn {
    font-size: 1.5rem;
}


/* On-Off-Checkbox-Switch as in cookie banner */
.switch {
    position: relative;
    display: inline-block;
    width: 36px; /* 0.6 times of initial 60px */
    height: 20px; /* 0.6 times of initial 34px */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px; /* 0.6 times of initial 26px */
    width: 16px; /* 0.6 times of initial 26px */
    left: 2px; /* 0.6 times of initial 4px */
    bottom: 2px; /* 0.6 times of initial 4px */
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px); /* 0.6 times of initial 26px */
    -ms-transform: translateX(16px); /* 0.6 times of initial 26px */
    transform: translateX(16px); /* 0.6 times of initial 26px */
}

.slider.round {
    border-radius: 20px; /* 0.6 times of initial 34px */
}

.slider.round:before {
    border-radius: 50%;
}

.cookie-consent {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background-color: #5c6ac4;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    font-size: 14px;
    top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    box-sizing: border-box;
}

html.cookie-consent-active,
body.cookie-consent-active {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.cookie-consent-active {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.cookie-consent .max-w-7xl {
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
}

.cookie-consent .modal-dialog {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.cookie-consent .modal-content {
    max-width: 100%;
}

.cookie-consent .row {
    margin-left: 0;
    margin-right: 0;
}

.cookie-consent .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.nl-dpn {
    display: none;
}


/* Custom Scroll bars */
/* Bug: Mobiler Firefox, Android 153.0.3 Build #2016176519
/* Bug 2029246 (https://bugzilla.mozilla.org/show_bug.cgi?id=2029246) */
/* ::-webkit-scrollbar { width: 8px; height: 8px; } */

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Box fix (e.g. tags) */
.no-shadow {
    box-shadow: none;
}

.rbt-section-gapBottom-half {
    padding-bottom: 60px;
}

.rbt-default-card .inner .content h2.title {
    font-size: 26px;
}

/* Bigger Checkboxes */
input[type=checkbox] ~ label,
input[type=radio] ~ label {
    position: relative;
    font-size: 17px;
    line-height: 25px;
    color: var(--body-color);
    font-weight: 400;
    padding-left: 24px;
    cursor: pointer;
    margin-bottom: 0;
}

input[type=checkbox] ~ label::before,
input[type=radio] ~ label::before {
    content: " ";
    position: absolute;
    top: 4px;
    left: 0;
    width: 17px;
    height: 17px;
    background-color: #fff;
    border: var(--border-width) solid var(--color-border);
    border-radius: 2px;
    transition: all 0.3s;
}

input[type=checkbox] ~ label::after,
input[type=radio] ~ label::after {
    content: " ";
    position: absolute;
    top: 8px;
    left: 3px;
    width: 12px;
    height: 7px;
    background-color: transparent;
    border-bottom: var(--border-width) solid #fff;
    border-left: var(--border-width) solid #fff;
    border-radius: 2px;
    transform: rotate(-45deg);
    opacity: 0;
    transition: all 0.3s;
}

.checkbox-container {
    margin-bottom: 8px;
}

.tab-button-style-2 li a .title {
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 500;
}

a.eylc-video-title-btn {
    top: 5px;
    background-color: #3f4868;
}

a.eylc-video-title-btn:hover {
    background-color: #2d93dd !important;
    top: 8px;
}

.tab-button-style-2 li a::after {
    background-color: initial;
}

a.member-header-link {
    color: #ffffff;
}

a.member-header-link:hover {
    color: #4ab1fc;
    text-decoration: underline;
}

.form-group textarea {
    padding-top: 20px;
    line-height: 20px;
}

.blockquote-footer {
    margin-top: 0;
}

/* ===== Freemium Gate Component ===== */
.freemium-gate-block {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin: .4rem 0;
}

.freemium-gate-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #e0e7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
}

.freemium-gate-icon .feather {
    width: 17px;
    height: 17px;
}

.freemium-gate-body {
    flex: 1;
    min-width: 0;
}

.freemium-gate-title {
    font-weight: 600;
    font-size: .88rem;
    color: #312e81;
    margin: 0 0 .25rem;
}

.freemium-gate-product {
    font-size: .82rem;
    color: #4b5563;
    margin: 0 0 .3rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.freemium-gate-price {
    font-weight: 600;
    color: #4f46e5;
}

.freemium-gate-price.poverty {
    color: #059669;
}

.freemium-gate-price.struck {
    text-decoration: line-through;
    color: #9ca3af;
    font-weight: 400;
}

.freemium-gate-price.free {
    color: #059669;
}

.freemium-gate-hint {
    font-size: .79rem;
    color: #6b7280;
    margin: 0 0 .55rem;
}

.freemium-gate-cta {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    border: 1.5px solid #c7d2fe;
    border-radius: 6px;
    padding: .25rem .7rem;
    transition: background .18s, color .18s;
}

.freemium-gate-cta:hover {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
}

.modal-backdrop {
    background-color: rgba(3, 7, 17, .78);
}

.modal-backdrop.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

.freemium-gate-inline {
    cursor: default;
    opacity: .55;
}

/* Bugreport 2026-08-09: Sprachswitch (.switcher-language, rbt-header-top)
   lag beim Aufklappen hinter dem Benutzermenü (.rbt-user-wrapper). Nach
   Aktenlage (style-a.css) sitzt .rbt-header-top bereits in einem eigenen
   Stacking-Context mit z-index:9999, klar über .rbt-header (99) bzw.
   .rbt-user-wrapper (lokal 2) — der Fehler war vermutlich durch die zu
   hohe z-index:9999 der "Du bist eingeloggt als"-Leiste seit jeher
   verdeckt/unbemerkt (siehe guardian-switch-banner.blade.php, dort seit
   commit 37f6591 auf 50 gesenkt) und wird jetzt erst sichtbar. Fix hier
   ausschließlich am Sprachswitch, ohne den z-index des Benutzermenüs
   (.rbt-user-wrapper, unverändert bei 2) anzufassen.
*/
.rbt-header-top {
    z-index: 10050;
}

ul.rbt-dropdown-menu.switcher-language li.has-child-menu {
    position: relative;
    z-index: 10050;
}

ul.rbt-dropdown-menu.switcher-language li .sub-menu {
    z-index: 10050 !important;
}

/* Bugreport 2026-08-10: Seit Dark-/Sprachwahlschalter rechtsbündig in der
   Top-Leiste sitzen (siehe .rbt-header-sec-col.rbt-header-right oben),
   ragen ihre aufklappenden Untermenüs über den rechten Viewport-Rand
   hinaus. Ursache: style-a.css setzt für .sub-menu sowohl left:0 (geerbte
   Basisregel) als auch right:0 (eigene Regel) gleichzeitig — bei so einem
   Overconstraint hält Chrome an left:0 fest und dehnt die min-width
   (170px) nach RECHTS aus statt den Bereich zwischen beiden Werten zu
   nutzen. Für am rechten Rand sitzende Buttons muss das Menü stattdessen
   nach LINKS aufklappen: left hier explizit deaktivieren, sodass nur
   right:0 zählt. */
ul.rbt-dropdown-menu.switcher-language li .sub-menu {
    left: auto !important;
}

/* Nutzer-Feedback 2026-08-09: Sprachwahlschalter wirkte neben dem
   Theme-Toggle (x-theme-toggle, variant inverse) überdimensioniert — Optik
   explizit auf dessen Maße/Pill-Form angeglichen (gleiche CSS-Variablen aus
   theme-state.blade.php, dort ohnehin auf jeder Seite mit Toggle geladen). */
.rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem !important;
    border-radius: 999px;
    min-height: 37px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

.rbt-header-top ul.rbt-dropdown-menu.switcher-language {
    margin-top: -3px;
    position: relative;
    top: 1px;
}

.rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a .left-image {
    width: 16px;
    height: auto;
    margin-right: 0 !important;
}

.rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a .menu-item {
    /* Histudy uses html { font-size: 10px }; this remains a 14px label. */
    font-size: 1.4rem;
}

.rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a .right-icon {
    font-size: 0.85em;
}

/* Nutzer-Feedback 2026-08-09: "Abgeschlossene Kurse"-Kachel im Dashboard zu
   kontrastarm im Dark Mode. Ursache: --color-violet (#800080) ist ein sehr
   dunkler Ton. Statt einzelner Selektor-Patches (die mit style-a.css' !important
   um Vorrang konkurrieren müssten) direkt die Quelle in style-a.css
   überschrieben: --violet-opacity/--color-violet für den Dark-Mode-Fall neu
   definiert — wirkt dadurch überall, wo diese Variablen verwendet werden
   (.bg-violet-opacity, .color-violet, …). Für den Rest der Seite (Light Mode)
   unverändert. */
:root[data-theme='dark'] {
    --violet-opacity: #8a73f921;
    --color-violet: #917ae3;
}

/* --color-secondary (#b966e7) ist hell genug, um im Dark Mode zu
   funktionieren — hier trotzdem explizit gesetzt statt sich auf die
   Hellmodus-Regel aus style-a.css zu verlassen. */
:root[data-theme='dark'] .bg-secondary-opacity {
    color: var(--color-secondary) !important;
}

/* Rahmen der Dashboard-Zähler-Kacheln (.rbt-counterup, per .rbt-border-
   dashed, Quelle style-a.css) nutzt fest --color-border (heller Lavendel-
   Ton) — in beiden Modi zu kontrastarm, hier pro Modus eigene Farbe. */
.rbt-border-dashed {
    border: 2px dashed #817f88 !important;
}

:root[data-theme='dark'] .rbt-border-dashed {
    border: 2px dashed #a7a5ee !important;
}

/* Nutzer-Vorgabe 2026-08-10: "+"-Expand-Mechanismus der Top-Leiste entfernt
   (siehe Kommentar in master-main.blade.php). Info-Zeile wird echter
   kompakter Button (Desktop + Mobile), Dark-/Sprachwahlschalter sind ab
   jetzt permanent sichtbar statt hinter dem Expand versteckt — auf
   schmalen Screens dafür zu reinen Icon-Buttons verdichtet, damit die
   Zeile weiterhin einzeilig passt. */
.rbt-topbar-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff !important;
    /* 1.28rem at Histudy's 10px root equals the intended ~13px. */
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background 0.2s ease, border-color 0.2s ease;
    max-width: 100%;
}

.rbt-topbar-info-btn:hover,
.rbt-topbar-info-btn:focus {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}

.rbt-topbar-info-btn img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rbt-topbar-info-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rbt-topbar-info-btn i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* theme-state.blade.php uses .8rem globally. Correct it only in the public
   topbar; workspace controls deliberately keep their own compact scale. */
.rbt-header-top .theme-toggle {
    font-size: 1.28rem;
}

.rbt-header-top .theme-toggle__button {
    min-height: 36px;
}

.rbt-header-top.rbt-header-top-1 {
    padding-top: 4px;
}

.rbt-header-top .rbt-header-top-news {
    top: 1px;
}

/* One public dark-mode body background for marketing, auth and members pages.
   The value intentionally inherits the root canvas instead of forcing blue. */
:root[data-theme="dark"] body {
    background-color: inherit !important;
}

/* Public EYLC sections use these tokens in inline component styles. Their
   light values previously remained active because the theme toggle used to
   be limited to Members/Auth pages. */
:root[data-theme="dark"] {
    --eyl-bg-page: #101a2e;
    --eyl-bg-canvas: #0c1526;
    --eyl-surface-card: #16233d;
    --eyl-sand-200: rgba(148, 163, 210, 0.20);
    --eyl-sand-300: rgba(148, 163, 210, 0.32);
    --eyl-stone-500: #a9b7ce;
    --eyl-ink-700: #d4deed;
    --eyl-ink-800: #e2e8f0;
    --eyl-ink-900: #f8fafc;
    --eyl-text-strong: #f8fafc;
    --eyl-text-body: #d4deed;
    --eyl-text-muted: #a9b7ce;
    --eyl-border-soft: rgba(148, 163, 210, 0.20);
    --eyl-border-strong: rgba(148, 163, 210, 0.32);
}

/* An external SVG cannot read CSS variables from this document. Both assets
   therefore contain their respective --eyl-bg-page value directly. */
.rbt-banner-1::after {
    background-image: url("/eylc/images/bg/banner-bg-shape-1-light.svg") !important;
}

:root[data-theme="dark"] .rbt-banner-1::after,
body.active-dark-mode .rbt-banner-1::after {
    background-image: url("/eylc/images/bg/banner-bg-shape-1-dark.svg") !important;
}

/* Public legal pages have page-local text colors that bypass Histudy's
   general heading/body rules. */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] .legal-hero-title,
:root[data-theme="dark"] .legal-content-card h2,
:root[data-theme="dark"] .legal-content-card h3,
:root[data-theme="dark"] .legal-rights-item strong {
    color: var(--theme-text-primary);
}

:root[data-theme="dark"] .legal-content-card p,
:root[data-theme="dark"] .legal-content-card li,
:root[data-theme="dark"] .legal-contact-block,
:root[data-theme="dark"] .legal-rights-item,
:root[data-theme="dark"] .legal-art21-block,
:root[data-theme="dark"] .legal-form-box,
:root[data-theme="dark"] .legal-meta {
    color: var(--theme-text-muted);
}

:root[data-theme="dark"] .legal-content-card h2,
:root[data-theme="dark"] .legal-content-card h3,
:root[data-theme="dark"] .legal-meta {
    border-color: var(--theme-surface-border);
}

/* Explicit white marketing cards (contact, partner application and poverty
   application) are not covered by Histudy's generic card classes. */
:root[data-theme="dark"] .eyl-contact-form-card,
:root[data-theme="dark"] .eyl-wyg-card,
:root[data-theme="dark"] .partner-application-card,
:root[data-theme="dark"] .partner-process-step,
:root[data-theme="dark"] .poverty-application-card,
:root[data-theme="dark"] .poverty-wyg-card,
:root[data-theme="dark"] .poverty-process-step {
    background: var(--theme-surface-card) !important;
    color: var(--theme-text-primary);
    border-color: var(--theme-surface-border) !important;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35);
}

:root[data-theme="dark"] .partner-form-section-header,
:root[data-theme="dark"] .poverty-form-section-header,
:root[data-theme="dark"] .poverty-dropzone__prompt {
    color: var(--theme-text-primary);
    border-color: var(--theme-surface-border);
}

:root[data-theme="dark"] .poverty-dropzone,
:root[data-theme="dark"] .eyl-wyg-icon,
:root[data-theme="dark"] .poverty-wyg-icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--theme-surface-border);
}

/* Product detail: Histudy assigns dark fixed text colors to the struck price
   and product metadata, which became visible once the public theme toggle
   was enabled. */
:root[data-theme="dark"] .rbt-single-product .rbt-price .off-price,
:root[data-theme="dark"] .rbt-single-product .product-price-period {
    color: var(--theme-text-muted) !important;
    opacity: 0.78;
}

:root[data-theme="dark"] .rbt-single-product .product-feature li,
:root[data-theme="dark"] .rbt-single-product .product-feature li span {
    color: var(--theme-text-primary);
}

:root[data-theme="dark"] .rbt-single-product .product-feature li a {
    color: #93c5fd;
}

/* The review form uses Histudy's standalone shadow box, whose white base
   background is not one of the generic public card variants. */
:root[data-theme="dark"] .rbt-single-product .rbt-comment-form.rbt-shadow-box,
body.active-dark-mode .rbt-single-product .rbt-comment-form.rbt-shadow-box {
    /* Histudy's .rbt-shadow-box uses background: var(--color-white).
       Keep that base rule, but resolve its local token to the dark card. */
    --color-white: #101a2e;
    background: #101a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35) !important;
}

:root[data-theme="dark"] .rbt-single-product .rbt-comment-form .title,
body.active-dark-mode .rbt-single-product .rbt-comment-form .title {
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .rbt-single-product .rbt-comment-form .comment-note,
body.active-dark-mode .rbt-single-product .rbt-comment-form .comment-note {
    color: #94a3c3 !important;
}

/* Product groups use Histudy's article wrapper rather than .rbt-card. */
:root[data-theme="dark"] .rbt-article-content-wrapper {
    background: var(--theme-surface-card);
    color: var(--theme-text-primary);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35);
}

:root[data-theme="dark"] .rbt-article-content-wrapper p {
    color: var(--theme-text-muted);
}

/* Topic/tag preview cards inherit Histudy's dark heading token otherwise. */
:root[data-theme="dark"] .tag-preview-title,
:root[data-theme="dark"] .tag-modal-card-title {
    color: var(--theme-text-primary) !important;
}

:root[data-theme="dark"] #tagProductsModal .modal-title,
:root[data-theme="dark"] #topicProductsModal .modal-title {
    color: var(--theme-text-primary) !important;
}

/* A product-card action must retain an obvious CTA signal in dark mode. */
:root[data-theme="dark"] .product-card-cta {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    border: 1px solid rgba(147, 197, 253, 0.62);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.30);
    color: #fff !important;
}

:root[data-theme="dark"] .product-card-cta:hover,
:root[data-theme="dark"] .product-card-cta:focus-visible {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border-color: rgba(219, 234, 254, 0.9);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.42);
    color: #fff !important;
}

/* Library cards are not purchase offers, but their next-step action must be
   just as unmistakable. Histudy's bg-primary-opacity otherwise merges into
   the dark card surface. */
:root[data-theme="dark"] .library-card-cta {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    border: 1px solid rgba(147, 197, 253, 0.62) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.30);
    color: #fff !important;
}

:root[data-theme="dark"] .library-card-cta:hover,
:root[data-theme="dark"] .library-card-cta:focus-visible {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border-color: rgba(219, 234, 254, 0.9) !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.42);
    color: #fff !important;
}

/* Histudy's secondary white CTA becomes a bright, disconnected rectangle on
   dark surfaces. Keep it secondary to the gradient CTA, but make it clear
   and actionable through a blue-tinted surface and visible border. */
:root[data-theme="dark"] .rbt-btn.btn-white {
    background: rgba(147, 197, 253, 0.14) !important;
    border: 1px solid rgba(147, 197, 253, 0.65);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.30);
    color: #dbeafe !important;
}

:root[data-theme="dark"] .rbt-btn.btn-white:hover,
:root[data-theme="dark"] .rbt-btn.btn-white:focus-visible {
    background: #2563eb !important;
    border-color: #93c5fd;
    color: #fff !important;
}

/* Histudy's numbered "about" cards use black PNG icons. */
:root[data-theme="dark"] .service-card-6 .inner .icon img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* When the price and CTA wrap on narrow product cards, retain clear space
   between the price signal and the following action. */
.product-card-bottom {
    row-gap: 16px;
}

/* Unterhalb der xl-Schwelle (1200px) ist die Top-Leiste ohnehin schon auf
   Info-Zeile + Dark-/Sprachwahlschalter reduziert (Telefon/Social-Icons
   bleiben wie bisher d-xl-block, auf Mobile über das Hamburger-Menü
   erreichbar). Hier dafür sorgen, dass diese drei Elemente in EINER Zeile
   bleiben statt (histudy-Standard unter 768px) untereinander gestapelt zu
   werden, und Dark-/Sprachwahlschalter zu Icon-only zu verdichten. */
@media only screen and (max-width: 1199.98px) {
    .rbt-header-top .theme-toggle__button [data-theme-toggle-label],
    .rbt-header-top .theme-toggle__button .theme-toggle__chevron {
        display: none;
    }

    .rbt-header-top .theme-toggle__button {
        padding: 0.35rem 0.55rem;
        gap: 0;
    }

    .rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a .menu-item,
    .rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a .right-icon {
        display: none;
    }

    .rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a {
        padding: 0.35rem 0.55rem !important;
    }

    .rbt-header-top ul.rbt-dropdown-menu.switcher-language > li.has-child-menu > a .left-image {
        margin-right: 0 !important;
    }
}

/* Bugreport 2026-08-10: Dark-/Sprachwahlschalter reagierten auf Mobile nicht
   auf Klicks. Ursache: style-a.css legt unter 767px ein ::after-Pseudoelement
   über die unteren 85% der Top-Leiste (position:absolute, cursor:pointer) —
   das war der Klick-Fänger für den jetzt entfernten "+"-Expand-Mechanismus
   (main.js togglete dafür .active auf .top-expended-activation, wodurch
   dieses ::after per style-a.css-Regel ausgeblendet wurde). Da weder die
   .top-expended-activation-Klasse noch der Expand-Button noch dessen JS-
   Handler noch existieren, bleibt .active für immer aus und das unsichtbare
   Overlay liegt permanent über Theme-Toggle/Sprachwahl und fängt deren
   Klicks ab. Da der gesamte Expand-Mechanismus bewusst entfernt wurde, wird
   das Overlay hier komplett deaktiviert statt die alte .active-Logik zu
   reaktivieren. */
@media only screen and (max-width: 767px) {
    .rbt-header-top.rbt-header-top-1::after {
        display: none !important;
    }
}

@media only screen and (max-width: 767px) {
    .rbt-header-top.rbt-header-top-1 .rbt-header-sec .rbt-header-sec-col {
        flex-basis: auto;
    }

    .rbt-header-top.rbt-header-top-1 .top-expended-wrapper {
        height: auto;
        min-height: 32px;
    }

    .rbt-header-top .rbt-header-sec-col.rbt-header-center {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rbt-header-top .rbt-header-sec-col.rbt-header-right {
        flex: 0 0 auto;
        margin-left: auto;
        margin-top: 0 !important;
    }
}

/* Bugreport 2026-08-10: Login/Registrierung/Passwort-vergessen wirkten auf
   Mobile teils "zusammengecrunscht". Ursache: .form-group ist im Theme
   selbst zweimal widersprüchlich definiert — style-a.css: display:inline-
   block ohne eigene Breite (schrumpft auf Inhalt statt Kartenbreite zu
   nutzen), style-b.css: display:block. Beide Dateien laden auf jeder
   Auth-Seite gleichermaßen; welche Regel greift, ist damit reine
   Ladereihenfolge-Glückssache. Hier eindeutig auf block + volle Breite
   fixiert statt es dem Theme-internen Konflikt zu überlassen. */
.form-group {
    display: block !important;
    width: 100%;
}

/* Firefox renders an autofilled input with an opaque highlight. Histudy keeps
   its floating label behind the input, so it disappears only in that state.
   Float the label explicitly and put it above the field instead. */
.eylc-auth-form .form-group > input:autofill + label {
    top: -10px;
    z-index: 1;
    color: var(--color-primary);
    font-size: 12px;
    pointer-events: none;
}

/* The minicart is a fixed Histudy surface rather than a normal page card,
   therefore it is not covered by the general .bg-color-white dark-mode
   rule. Keep every level of the cart readable: panel, line item, total and
   both actions. */
:root[data-theme="dark"] .rbt-cart-side-menu,
body.active-dark-mode .rbt-cart-side-menu {
    background: var(--theme-surface-card) !important;
    color: var(--theme-text-primary);
    border-left: 1px solid var(--theme-surface-border);
    box-shadow: -18px 0 40px rgba(2, 6, 23, 0.45);
}

:root[data-theme="dark"] .rbt-cart-side-menu .inner-top,
body.active-dark-mode .rbt-cart-side-menu .inner-top,
:root[data-theme="dark"] .rbt-cart-side-menu hr,
body.active-dark-mode .rbt-cart-side-menu hr {
    border-color: var(--theme-surface-border) !important;
}

:root[data-theme="dark"] .rbt-cart-side-menu .title,
body.active-dark-mode .rbt-cart-side-menu .title,
:root[data-theme="dark"] .rbt-cart-side-menu .rbt-cart-subttotal p,
body.active-dark-mode .rbt-cart-side-menu .rbt-cart-subttotal p,
:root[data-theme="dark"] .rbt-cart-side-menu .product-content .title a,
body.active-dark-mode .rbt-cart-side-menu .product-content .title a {
    color: var(--theme-text-primary) !important;
}

:root[data-theme="dark"] .rbt-cart-side-menu .product-content .quantity,
body.active-dark-mode .rbt-cart-side-menu .product-content .quantity,
:root[data-theme="dark"] .rbt-cart-side-menu .empty-cart,
body.active-dark-mode .rbt-cart-side-menu .empty-cart {
    color: var(--theme-text-muted) !important;
}

:root[data-theme="dark"] .rbt-cart-side-menu .product-content .price,
body.active-dark-mode .rbt-cart-side-menu .product-content .price {
    color: #dbeafe !important;
}

:root[data-theme="dark"] .rbt-cart-side-menu .minicart-item + .minicart-item,
body.active-dark-mode .rbt-cart-side-menu .minicart-item + .minicart-item {
    border-top-color: var(--theme-surface-border);
}

:root[data-theme="dark"] .rbt-cart-side-menu .rbt-round-btn,
body.active-dark-mode .rbt-cart-side-menu .rbt-round-btn {
    color: var(--theme-text-muted);
    background: rgba(148, 163, 210, 0.10);
    border-color: rgba(148, 163, 210, 0.35);
}

:root[data-theme="dark"] .rbt-cart-side-menu .rbt-round-btn:hover,
body.active-dark-mode .rbt-cart-side-menu .rbt-round-btn:hover {
    color: #fff;
    background: rgba(59, 130, 246, 0.28);
    border-color: #93c5fd;
}

:root[data-theme="dark"] .rbt-cart-side-menu .btn-border,
body.active-dark-mode .rbt-cart-side-menu .btn-border {
    color: #dbeafe !important;
    background: rgba(147, 197, 253, 0.10);
    border-color: #93c5fd !important;
}

:root[data-theme="dark"] .rbt-cart-side-menu .btn-border:hover,
body.active-dark-mode .rbt-cart-side-menu .btn-border:hover {
    color: #fff !important;
    background: rgba(37, 99, 235, 0.42);
}

/* The full cart has two further standalone white Histudy surfaces: its
   summary box and table body. Match them to the page and sidecart. */
:root[data-theme="dark"] .rbt-cart-area,
body.active-dark-mode .rbt-cart-area {
    background: var(--theme-surface-card) !important;
    color: var(--theme-text-primary);
}

:root[data-theme="dark"] .cart-table .table,
body.active-dark-mode .cart-table .table {
    color: var(--theme-text-primary);
    border-bottom-color: var(--theme-surface-border);
}

:root[data-theme="dark"] .cart-table .table tbody tr td,
body.active-dark-mode .cart-table .table tbody tr td {
    border-bottom-color: var(--theme-surface-border);
}

:root[data-theme="dark"] .cart-table td.pro-title a,
body.active-dark-mode .cart-table td.pro-title a,
:root[data-theme="dark"] .cart-table td.pro-sku span,
body.active-dark-mode .cart-table td.pro-sku span {
    color: var(--theme-text-primary) !important;
}

:root[data-theme="dark"] .cart-table .pro-remove a,
body.active-dark-mode .cart-table .pro-remove a {
    color: var(--theme-text-muted) !important;
}

:root[data-theme="dark"] .cart-summary .cart-summary-wrap,
body.active-dark-mode .cart-summary .cart-summary-wrap {
    background: var(--theme-surface-card) !important;
    border: 1px solid var(--theme-surface-border);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35);
}

:root[data-theme="dark"] .cart-summary .cart-summary-wrap .title,
body.active-dark-mode .cart-summary .cart-summary-wrap .title,
:root[data-theme="dark"] .cart-summary .cart-summary-wrap h2,
body.active-dark-mode .cart-summary .cart-summary-wrap h2 {
    color: var(--theme-text-primary) !important;
}

:root[data-theme="dark"] .cart-summary .cart-summary-wrap p,
body.active-dark-mode .cart-summary .cart-summary-wrap p {
    color: var(--theme-text-muted);
}

:root[data-theme="dark"] .cart-summary .cart-summary-wrap p + p,
body.active-dark-mode .cart-summary .cart-summary-wrap p + p,
:root[data-theme="dark"] .cart-summary .cart-summary-wrap h2,
body.active-dark-mode .cart-summary .cart-summary-wrap h2 {
    border-color: var(--theme-surface-border);
}

/* Checkout uses its own template-local form and order-summary classes. */
:root[data-theme="dark"] .checkout_area,
body.active-dark-mode .checkout_area {
    background: var(--theme-surface-card) !important;
    color: var(--theme-text-primary);
}

:root[data-theme="dark"] .checkout-content-wrapper,
body.active-dark-mode .checkout-content-wrapper {
    background: var(--theme-surface-card) !important;
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-surface-border);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35);
}

:root[data-theme="dark"] .checkout-section-title,
body.active-dark-mode .checkout-section-title,
:root[data-theme="dark"] .checkout-field-group label,
body.active-dark-mode .checkout-field-group label,
:root[data-theme="dark"] .b2b-toggle-row label,
body.active-dark-mode .b2b-toggle-row label,
:root[data-theme="dark"] .checkout-payment-option label,
body.active-dark-mode .checkout-payment-option label,
:root[data-theme="dark"] .checkout-legal-row label,
body.active-dark-mode .checkout-legal-row label,
:root[data-theme="dark"] .cart-line-name,
body.active-dark-mode .cart-line-name,
:root[data-theme="dark"] .cart-line-price,
body.active-dark-mode .cart-line-price,
:root[data-theme="dark"] .checkout-total-row,
body.active-dark-mode .checkout-total-row {
    color: var(--theme-text-primary) !important;
}

:root[data-theme="dark"] .checkout-section-title,
body.active-dark-mode .checkout-section-title,
:root[data-theme="dark"] .cart-line,
body.active-dark-mode .cart-line,
:root[data-theme="dark"] .checkout-total-row,
body.active-dark-mode .checkout-total-row {
    border-color: var(--theme-surface-border);
}

:root[data-theme="dark"] .checkout-field-group input[type="text"],
body.active-dark-mode .checkout-field-group input[type="text"],
:root[data-theme="dark"] .checkout-field-group input[type="email"],
body.active-dark-mode .checkout-field-group input[type="email"] {
    background: #0c1526;
    color: var(--theme-text-primary);
    border-color: rgba(148, 163, 210, 0.4);
}

:root[data-theme="dark"] .checkout-field-group input[readonly],
body.active-dark-mode .checkout-field-group input[readonly] {
    background: rgba(148, 163, 210, 0.12);
    color: var(--theme-text-muted);
}

:root[data-theme="dark"] .checkout-payment-option,
body.active-dark-mode .checkout-payment-option {
    border-color: var(--theme-surface-border);
    background: rgba(148, 163, 210, 0.05);
}

:root[data-theme="dark"] .checkout-payment-option:has(input:checked),
body.active-dark-mode .checkout-payment-option:has(input:checked) {
    border-color: #93c5fd;
    background: rgba(59, 130, 246, 0.14);
}

:root[data-theme="dark"] .checkout-payment-option p,
body.active-dark-mode .checkout-payment-option p,
:root[data-theme="dark"] .cart-line-vat,
body.active-dark-mode .cart-line-vat,
:root[data-theme="dark"] .checkout-vat-row,
body.active-dark-mode .checkout-vat-row,
:root[data-theme="dark"] .checkout-subscription-note,
body.active-dark-mode .checkout-subscription-note {
    color: var(--theme-text-muted);
}

:root[data-theme="dark"] .checkout-subscription-note,
body.active-dark-mode .checkout-subscription-note {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(147, 197, 253, 0.30);
}

:root[data-theme="dark"] .checkout-subscription-note strong,
body.active-dark-mode .checkout-subscription-note strong {
    color: var(--theme-text-primary);
}

/* Header search is a fixed, full-width Histudy overlay. Its white panel and
   input sit outside normal page cards, so theme-state's generic card rules
   do not reach them. */
:root[data-theme="dark"] .rbt-search-dropdown,
body.active-dark-mode .rbt-search-dropdown {
    background: var(--theme-surface-card) !important;
    border-top-color: var(--theme-surface-border);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.45);
}

:root[data-theme="dark"] .rbt-search-dropdown .wrapper form input,
body.active-dark-mode .rbt-search-dropdown .wrapper form input {
    background: #0c1526;
    color: var(--theme-text-primary);
    border-color: rgba(148, 163, 210, 0.4);
}

:root[data-theme="dark"] .rbt-search-dropdown .wrapper form input::placeholder,
body.active-dark-mode .rbt-search-dropdown .wrapper form input::placeholder {
    color: var(--theme-text-muted);
    opacity: 1;
}

:root[data-theme="dark"] .rbt-search-dropdown .rbt-separator,
body.active-dark-mode .rbt-search-dropdown .rbt-separator {
    border-color: var(--theme-surface-border);
}

:root[data-theme="dark"] .rbt-search-dropdown .section-title .rbt-title-style-2,
body.active-dark-mode .rbt-search-dropdown .section-title .rbt-title-style-2 {
    color: var(--theme-text-primary);
}