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

/* 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: 38px;
    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 > 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 {
    font-size: 0.85rem;
}

.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;
    font-size: 0.8rem;
    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: 0.75rem;
    flex-shrink: 0;
}

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