/* ==========================================================================
   Inszenium Sales Module – INSPINIA ↔ Contao Bridge CSS
   Macht Contao-Standard-Markup INSPINIA-kompatibel
   ========================================================================== */

:root {
    --ins-logo-lg-height: 55px;
}


/* --------------------------------------------------------------------------
   0. TOPBAR SEARCH
   Contao mod_search im topbar_left Slot → INSPINIA Topbar-Suche
   -------------------------------------------------------------------------- */

/* Contao-Wrapper in der Topbar neutralisieren */
.topbar-menu .mod_search {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Topbar-Suchfeld: INSPINIA Topbar-Standard */
.topbar-menu .topbar-search .form-control {
    background: var(--ins-topbar-search-bg, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--ins-topbar-search-border, rgba(255, 255, 255, 0.15));
    color: rgba(255, 255, 255, 0.9);
    padding-left: 36px;
    height: 38px;
    border-radius: var(--ins-border-radius, 0.375rem);
    min-width: 220px;
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
}

.topbar-menu .topbar-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.topbar-menu .topbar-search .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    min-width: 280px;
    box-shadow: none;
}

/* Such-Icon passend zur Topbar */
.topbar-menu .topbar-search .app-search-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.5);
    z-index: 5;
}

.topbar-menu .topbar-search .app-search-icon i {
    font-size: 1rem;
}

/* Dark Theme Anpassung */
[data-bs-theme="dark"] .topbar-menu .topbar-search .form-control {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   1. SIDEBAR NAVIGATION
   Contao mod_navigation → INSPINIA side-nav
   -------------------------------------------------------------------------- */

/* Navigation-Wrapper im Sidebar */
.sidenav-nav-wrap {
    padding: 0;
    padding-bottom: 50px;
}

/* Contao nav element: kein eigenes Styling */
.sidenav-nav-wrap .mod_navigation,
.sidenav-nav-wrap .mod_html,
.sidenav-nav-wrap nav {
    padding: 0;
    margin: 0;
}

/* Alle side-nav Listen in der Sidebar: kein eigenes padding-bottom
   (wird stattdessen auf den Wrapper gesetzt) */
.sidenav-nav-wrap .side-nav,
.sidenav-nav-wrap .mod_navigation ul,
.sidenav-nav-wrap nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 0;
}

/* Jedes li = side-nav-item */
.sidenav-nav-wrap .mod_navigation ul > li,
.sidenav-nav-wrap nav ul > li {
    padding: 0 10px;
}

/* Jeder Link = side-nav-link */
.sidenav-nav-wrap .mod_navigation ul > li > a,
.sidenav-nav-wrap .mod_navigation ul > li > strong.active,
.sidenav-nav-wrap nav ul > li > a,
.sidenav-nav-wrap nav ul > li > strong.active {
    display: flex;
    align-items: center;
    gap: var(--ins-sidenav-item-gap, 10px);
    position: relative;
    white-space: nowrap;
    color: var(--ins-sidenav-item-color);
    transition: color 0.25s ease-in-out;
    line-height: calc(var(--ins-sidenav-item-font-size, 0.9375rem) * 1.25);
    font-size: var(--ins-sidenav-item-font-size, 0.9375rem);
    font-weight: var(--ins-sidenav-item-font-weight, 400);
    padding: var(--ins-sidenav-item-padding-y, 8px) var(--ins-sidenav-item-padding-x, 12px);
    border-radius: 5px;
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* strong.active hat gleiches Styling wie ein Link */
.sidenav-nav-wrap .mod_navigation ul > li > strong.active,
.sidenav-nav-wrap nav ul > li > strong.active {
    cursor: default;
}

/* Hover/Focus/Active */
.sidenav-nav-wrap .mod_navigation ul > li > a:hover,
.sidenav-nav-wrap .mod_navigation ul > li > a:focus,
.sidenav-nav-wrap nav ul > li > a:hover,
.sidenav-nav-wrap nav ul > li > a:focus {
    color: var(--ins-sidenav-item-hover-color);
    text-decoration: none;
}

/* Active Page */
.sidenav-nav-wrap .mod_navigation ul > li.active > a,
.sidenav-nav-wrap .mod_navigation ul > li.active > strong.active,
.sidenav-nav-wrap .mod_navigation ul > li > a.active,
.sidenav-nav-wrap nav ul > li.active > a,
.sidenav-nav-wrap nav ul > li.active > strong.active {
    color: var(--ins-sidenav-item-active-color);
    background-color: var(--ins-sidenav-item-active-bg);
}

/* Trail (Pfad zur aktiven Seite) */
.sidenav-nav-wrap .mod_navigation ul > li.trail > a,
.sidenav-nav-wrap nav ul > li.trail > a {
    color: var(--ins-sidenav-item-hover-color);
}

/* Submenu (level_2) */
.sidenav-nav-wrap .mod_navigation ul ul,
.sidenav-nav-wrap nav ul ul {
    padding-left: 0;
    padding-bottom: 0;
    gap: var(--ins-sidenav-sub-item-gap, 2px);
}

.sidenav-nav-wrap .mod_navigation ul ul > li,
.sidenav-nav-wrap nav ul ul > li {
    padding: 0;
}

.sidenav-nav-wrap .mod_navigation ul ul > li > a,
.sidenav-nav-wrap .mod_navigation ul ul > li > strong.active,
.sidenav-nav-wrap nav ul ul > li > a,
.sidenav-nav-wrap nav ul ul > li > strong.active {
    font-size: var(--ins-sidenav-sub-item-font-size, 0.85rem);
    padding: var(--ins-sidenav-sub-item-padding-y, 5px) var(--ins-sidenav-sub-item-padding-x, 12px)
             var(--ins-sidenav-sub-item-padding-y, 5px)
             calc(var(--ins-sidenav-item-icon-size, 20px) + var(--ins-sidenav-item-padding-x, 12px) + var(--ins-sidenav-item-gap, 10px));
}

/* Level 3+ noch weiter einrücken */
.sidenav-nav-wrap .mod_navigation ul ul ul,
.sidenav-nav-wrap nav ul ul ul {
    padding-left: 15px;
}

/* --------------------------------------------------------------------------
   1b. ICON-SUPPORT
   Icons werden jetzt direkt im nav_default.html5 Template als
   <span class="menu-icon"><i class="ti ti-*"></i></span> gerendert.
   Die alten ::before Pseudo-Element-Icons werden deaktiviert.
   -------------------------------------------------------------------------- */

/* Alte ::before Icons deaktivieren (werden durch menu-icon ersetzt) */
.sidenav-nav-wrap .mod_navigation > ul > li > a::before,
.sidenav-nav-wrap .mod_navigation > ul > li > strong.active::before,
.sidenav-nav-wrap nav > ul > li > a::before,
.sidenav-nav-wrap nav > ul > li > strong.active::before,
.sidenav-nav-wrap .side-nav > .side-nav-item > .side-nav-link::before {
    content: none;
}

/*
   Die alten Page-CSS-Klassen → Tabler Icons Mappings (icon-dashboard, icon-customers etc.)
   wurden entfernt. Icons werden jetzt direkt im nav_default.html5 Template
   über das $iconMap-Array oder über ti-* CSS-Klassen in der Page-Konfiguration gesetzt.
*/

/* --------------------------------------------------------------------------
   2. SIDEBAR USER AREA
   Contao header section als User-Bereich im Sidebar
   -------------------------------------------------------------------------- */

.sidenav-user .mod_login,
.sidenav-user .mod_personalData {
    color: var(--ins-sidenav-item-color);
}

.sidenav-user .mod_login .username,
.sidenav-user .mod_personalData .member-name {
    display: block;
    font-weight: 700;
    color: var(--ins-sidenav-item-active-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidenav-user .mod_login .role,
.sidenav-user .mod_personalData .member-role {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
}

/* Kleiner Logout-Button im User-Bereich */
.sidenav-user .mod_login .submit {
    background: transparent;
    border: 1px solid var(--ins-sidenav-item-color);
    color: var(--ins-sidenav-item-color);
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 12px;
    margin-top: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.sidenav-user .mod_login .submit:hover {
    background: var(--ins-sidenav-item-active-bg);
    color: var(--ins-sidenav-item-active-color);
}

/* --------------------------------------------------------------------------
   3. TOPBAR
   Contao right section als Topbar-Rechts
   -------------------------------------------------------------------------- */

.app-topbar .mod_login {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ins-body-color);
}

.app-topbar .mod_login .member-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-topbar .mod_login img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.app-topbar .mod_login .username {
    font-weight: 600;
    font-size: 14px;
}

/* Topbar Logout-Button */
.app-topbar .mod_login .submit,
.app-topbar .topbar-logout-btn {
    background: transparent;
    border: none;
    color: var(--ins-body-color);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
}

.app-topbar .mod_login .submit:hover,
.app-topbar .topbar-logout-btn:hover {
    background: var(--ins-gray-200);
}

/* --------------------------------------------------------------------------
   4. CONTENT AREA
   Bootstrap-Card-Wrapper für Contao Content-Elemente
   -------------------------------------------------------------------------- */

/* Contao-Artikel in der Content-Area */
.content-page .mod_article {
    margin-bottom: 1.5rem;
}

/* Content-Elemente als Cards */
.content-page .ce_text,
.content-page .ce_image,
.content-page .ce_gallery,
.content-page .ce_table,
.content-page .ce_list,
.content-page .ce_pricing_table,
.content-page .ce_offer_overview,
.content-page .ce_customer_portal,
.content-page .ce_accordion,
.content-page .ce_download,
.content-page .ce_downloads {
    background: var(--ins-card-bg, var(--ins-secondary-bg));
    border: var(--ins-card-border-width, 1px) solid var(--ins-card-border-color, var(--ins-border-color));
    border-radius: var(--ins-card-border-radius, 0.375rem);
    padding: var(--ins-card-spacer-y, 1rem) var(--ins-card-spacer-x, 1.25rem);
    margin-bottom: var(--ins-card-spacer-y, 1rem);
    box-shadow: var(--ins-card-box-shadow, var(--ins-box-shadow-sm));
}

/* Headlines innerhalb Content-Elementen */
.content-page .ce_text h1,
.content-page .ce_text h2,
.content-page .ce_text h3,
.content-page .ce_text h4 {
    color: var(--ins-heading-color, var(--ins-body-color));
    margin-bottom: 0.75rem;
}

/* Content-Element Headlines als Card-Header-Stil */
.content-page .content-headline {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ins-border-color, #e7e9eb);
}

/* --------------------------------------------------------------------------
   5. PAGE TITLE / BREADCRUMB
   Contao-Breadcrumb → INSPINIA page-title-head
   -------------------------------------------------------------------------- */

.content-page .mod_breadcrumb {
    margin-bottom: 1rem;
}

.content-page .mod_breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.content-page .mod_breadcrumb ul li {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--ins-secondary-color, #6c757d);
}

.content-page .mod_breadcrumb ul li + li::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--ins-gray-400, #ced4da);
}

.content-page .mod_breadcrumb ul li:last-child {
    color: var(--ins-body-color);
    font-weight: 500;
}

.content-page .mod_breadcrumb ul li a {
    color: var(--ins-secondary-color, #6c757d);
    text-decoration: none;
}

.content-page .mod_breadcrumb ul li a:hover {
    color: var(--ins-primary);
}

/* INSPINIA Page-Title-Head Styling für Contao Headline-Module */
.page-title-head {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-title-head h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    flex-grow: 1;
}

.page-title-head .breadcrumb {
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   6. CONTAO FORMS → Bootstrap 5
   Login-Formulare, Suche etc.
   -------------------------------------------------------------------------- */

/* Standard Contao-Formulare */
.content-page .widget {
    margin-bottom: 1rem;
}

.content-page .widget label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--ins-body-color);
}

.content-page .widget input[type="text"],
.content-page .widget input[type="email"],
.content-page .widget input[type="password"],
.content-page .widget input[type="search"],
.content-page .widget input[type="url"],
.content-page .widget input[type="tel"],
.content-page .widget input[type="number"],
.content-page .widget input[type="date"],
.content-page .widget textarea,
.content-page .widget select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ins-body-color);
    background-color: var(--ins-input-bg, var(--ins-body-bg));
    background-clip: padding-box;
    border: var(--ins-border-width, 1px) solid var(--ins-input-border-color, var(--ins-border-color));
    border-radius: var(--ins-border-radius, 0.375rem);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

.content-page .widget input:focus,
.content-page .widget textarea:focus,
.content-page .widget select:focus {
    color: var(--ins-body-color);
    background-color: var(--ins-input-bg, var(--ins-body-bg));
    border-color: var(--ins-input-focus-border-color, #86b7fe);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--ins-primary-rgb, 26, 179, 148), 0.25);
}

/* Contao Submit-Buttons */
.content-page .widget .submit,
.content-page .submit_container .submit,
.content-page input[type="submit"],
.content-page button[type="submit"] {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: var(--ins-border-radius, 0.375rem);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: #fff;
    background-color: var(--ins-primary, #1ab394);
    border-color: var(--ins-primary, #1ab394);
}

.content-page .widget .submit:hover,
.content-page .submit_container .submit:hover,
.content-page input[type="submit"]:hover,
.content-page button[type="submit"]:hover {
    color: #fff;
    background-color: var(--ins-primary-darken, #158f76);
    border-color: var(--ins-primary-darken, #158f76);
}

/* Error Messages */
.content-page .widget .error {
    color: var(--ins-danger, #ed5565);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.content-page .widget input.error,
.content-page .widget select.error,
.content-page .widget textarea.error {
    border-color: var(--ins-danger, #ed5565);
    color: inherit;
    font-size: inherit;
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   7. CONTAO LOGIN MODULE
   mod_login als eigenständiges Card-Element
   -------------------------------------------------------------------------- */

.content-page .mod_login {
    background: var(--ins-card-bg, var(--ins-secondary-bg));
    border: var(--ins-card-border-width, 1px) solid var(--ins-card-border-color, var(--ins-border-color));
    border-radius: var(--ins-card-border-radius, 0.375rem);
    padding: 2rem;
    max-width: 420px;
    margin: 2rem auto;
    box-shadow: var(--ins-card-box-shadow, var(--ins-box-shadow-sm));
}

.content-page .mod_login h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.content-page .mod_login .formbody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.content-page .mod_login .submit_container {
    margin-top: 0.5rem;
}

.content-page .mod_login .submit_container .submit {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* Remember-Me Checkbox */
.content-page .mod_login .widget-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-page .mod_login .widget-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.content-page .mod_login .widget-checkbox label {
    margin: 0;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   8. TABELLEN
   Contao Tabellen → Bootstrap-Stil
   -------------------------------------------------------------------------- */

.content-page table {
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--ins-border-color, #e7e9eb);
}

.content-page table th {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ins-secondary-color, #6c757d);
    background: var(--ins-gray-100, #f6f7fb);
    padding: 0.75rem;
    border-bottom: 2px solid var(--ins-border-color, #e7e9eb);
    white-space: nowrap;
}

.content-page table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--ins-border-color, #e7e9eb);
    font-size: 0.875rem;
}

.content-page table tbody tr:hover {
    background-color: var(--ins-gray-100, #f6f7fb);
}

/* --------------------------------------------------------------------------
   9. ALERTS + MESSAGES
   Contao Nachrichten → Bootstrap Alerts
   -------------------------------------------------------------------------- */

.content-page .tl_error,
.content-page .error_message,
.content-page .ce_text .error {
    background-color: rgba(237, 85, 101, 0.15);
    border: 1px solid rgba(237, 85, 101, 0.3);
    color: var(--ins-danger, #ed5565);
    border-radius: var(--ins-border-radius, 0.375rem);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.content-page .tl_confirm,
.content-page .confirm_message {
    background-color: rgba(10, 207, 151, 0.15);
    border: 1px solid rgba(10, 207, 151, 0.3);
    color: var(--ins-success, #0acf97);
    border-radius: var(--ins-border-radius, 0.375rem);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.content-page .tl_info,
.content-page .info_message {
    background-color: rgba(35, 198, 200, 0.15);
    border: 1px solid rgba(35, 198, 200, 0.3);
    color: var(--ins-info, #23c6c8);
    border-radius: var(--ins-border-radius, 0.375rem);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   9b. SEARCH MODULE
   Contao mod_search → INSPINIA Card + app-search
   -------------------------------------------------------------------------- */

/* Suchformular: Icon-Position mit Tabler Icons statt Lucide SVG */
.mod_search .app-search .app-search-icon {
    width: 40px;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.mod_search .app-search .app-search-icon i {
    font-size: 1.125rem;
}

.mod_search .app-search .form-control {
    padding-left: 40px;
}

/* Highlight der Suchbegriffe im Kontext */
.mod_search .border-bottom mark,
.mod_search .border-bottom .highlight {
    background: rgba(var(--ins-warning-rgb, 255, 193, 7), 0.25);
    padding: 0.1em 0.2em;
    border-radius: 0.2rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. PAGINATION
   Contao Seitenumbruch → Bootstrap Pagination (jetzt via pagination.html5)
   -------------------------------------------------------------------------- */

.content-page .pagination,
.card-footer .pagination {
    display: flex;
    padding: 0;
    list-style: none;
    gap: 4px;
    justify-content: center;
    margin: 1.5rem 0;
}

.content-page .pagination li a,
.content-page .pagination li span,
.card-footer .pagination li a,
.card-footer .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: var(--ins-body-color);
    background: var(--ins-card-bg, #fff);
    border: 1px solid var(--ins-border-color, #e7e9eb);
    border-radius: var(--ins-border-radius, 0.375rem);
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.content-page .pagination li a:hover,
.card-footer .pagination li a:hover {
    background: var(--ins-gray-100, #f6f7fb);
    border-color: var(--ins-gray-400, #ced4da);
}

.content-page .pagination li.active span,
.content-page .pagination li span.current,
.card-footer .pagination li.active span,
.card-footer .pagination li span.current {
    background: var(--ins-primary, #1ab394);
    border-color: var(--ins-primary, #1ab394);
    color: #fff;
}

/* Pagination im card-footer: weniger Margin */
.card-footer .pagination {
    margin: 0;
}

/* Disabled page-items */
.pagination .page-item.disabled .page-link {
    opacity: 0.5;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. FOOTER
   Footer-Bereich Styling
   -------------------------------------------------------------------------- */

.footer .mod_html,
.footer .ce_text,
.footer .ce_html {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE ANPASSUNGEN
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* Sidebar-Navigation: kompakterer Abstand auf Tablet */
    .sidenav-nav-wrap .mod_navigation > ul > li > a,
    .sidenav-nav-wrap nav > ul > li > a {
        padding: 6px 10px;
    }
}

/* Mobile: Content-Elemente etwas kleiner padded */
@media (max-width: 767.98px) {
    .content-page .ce_text,
    .content-page .ce_image,
    .content-page .ce_gallery,
    .content-page .ce_table,
    .content-page .ce_list,
    .content-page .ce_pricing_table,
    .content-page .ce_offer_overview,
    .content-page .ce_customer_portal {
        padding: 0.75rem;
    }

    .content-page .mod_login {
        margin: 1rem auto;
        padding: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   13. UTILITY / HELPERS
   -------------------------------------------------------------------------- */

/* Contao Invisible-Klasse */
.content-page .invisible {
    display: none !important;
}

/* Contao ce_hyperlink + ce_toplink */
.content-page .ce_hyperlink a,
.content-page .ce_toplink a {
    color: var(--ins-primary, #1ab394);
    text-decoration: none;
}

.content-page .ce_hyperlink a:hover,
.content-page .ce_toplink a:hover {
    color: var(--ins-primary-darken, #158f76);
    text-decoration: underline;
}

/* Contao Bild mit Bildunterschrift */
.content-page .ce_image figure {
    margin: 0;
}

.content-page .ce_image figcaption {
    font-size: 0.8125rem;
    color: var(--ins-secondary-color, #6c757d);
    margin-top: 0.5rem;
}

/* Contao inside_container fix */
.content-page .inside {
    padding: 0;
}

/* Print Styles — Sidebar + Topbar ausblenden */
@media print {
    .sidenav-menu,
    .app-topbar,
    .footer {
        display: none !important;
    }
    .content-page {
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   11. AUTH PAGES (Login, Passwort-Reset, Feedback)
   ========================================================================== */

/* --- Reset Contao module styling inside auth-box --- */
.auth-box .mod_login,
.auth-box .mod_lostPasswordNotificationCenter,
.auth-box .mod_password,
.auth-box .mod_changePassword {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: none;
}

/* Hide Contao headlines – logo + auth-brand übernimmt */
.auth-box .mod_login > h2,
.auth-box .mod_login > h3,
.auth-box .mod_lostPasswordNotificationCenter > h2,
.auth-box .mod_lostPasswordNotificationCenter > h3,
.auth-box .mod_password > h2,
.auth-box .mod_password > h3 {
    display: none;
}

/* --- Form Fields Styling --- */
.auth-box .widget {
    margin-bottom: 1rem;
}

.auth-box .widget label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    display: block;
}

.auth-box .widget input.text,
.auth-box .widget input.password,
.auth-box .widget input[type="text"],
.auth-box .widget input[type="email"],
.auth-box .widget input[type="password"] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    appearance: none;
    -webkit-appearance: none;
    min-height: 2.6rem;
    border-color: var(--bs-border-color) !important;
    background-color: #fff !important;
}

.auth-box .mod_article .content-login {
    padding: 1rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: var(--bs-border-radius);
    background: #fff;
}

.auth-box .mod_article .content-login .widget input.text,
.auth-box .mod_article .content-login .widget input.password,
.auth-box .mod_article .content-login .widget input[type="text"],
.auth-box .mod_article .content-login .widget input[type="email"],
.auth-box .mod_article .content-login .widget input[type="password"] {
    border: 1px solid var(--bs-border-color) !important;
}

.auth-box .widget input.text:focus,
.auth-box .widget input.password:focus,
.auth-box .widget input[type="text"]:focus,
.auth-box .widget input[type="email"]:focus,
.auth-box .widget input[type="password"]:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--ins-primary, #1ab394);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(26, 179, 148, 0.25);
}

/* --- Lost Password dynamic fields --- */
.auth-box .auth-fields .widget {
    margin-bottom: 1rem;
}

.auth-box .auth-fields .widget label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.auth-box .auth-fields .widget input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* --- Submit Button --- */
.auth-box .widget-submit .submit {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--ins-primary, #1ab394);
    border: 1px solid var(--ins-primary, #1ab394);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.auth-box .widget-submit .submit:hover {
    background-color: var(--ins-primary-dark, #18a689);
    border-color: var(--ins-primary-dark, #18a689);
}

.auth-box .content-login .formbody.is-two-factor {
    max-width: 30rem;
    margin: 0 auto;
}

.auth-box .content-login .formbody.is-two-factor .auth-brand h4 {
    margin-bottom: 0.5rem;
}

.auth-box .content-login .formbody.is-two-factor .auth-brand p {
    font-size: 0.875rem;
}

.auth-box .widget-submit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-box .widget-submit .passkey-login {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
}

.auth-box .widget-submit .passkey-login:hover,
.auth-box .widget-submit .passkey-login:focus {
    border-color: var(--ins-primary, #1ab394);
    background: rgba(26, 179, 148, 0.06);
    color: var(--ins-primary-dark, #18a689);
}

.auth-box .widget-submit .cancel-link {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--ins-secondary-color, #6c757d);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.875rem;
    padding: 0.15rem 0;
}

.auth-box .widget-submit .cancel-link:hover,
.auth-box .widget-submit .cancel-link:focus {
    color: var(--ins-primary-dark, #18a689);
}

.auth-box .widget-submit .error {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-border-radius);
    background: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #dc3545;
    color: #b02a37;
    font-size: 0.8125rem;
}

.auth-box .widget-submit .error:empty {
    display: none;
}

/* --- Checkbox Styling --- */
.auth-box .widget-checkbox .checkbox_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-box .widget-checkbox .tl_checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ins-primary, #1ab394);
}

/* --- Password Reset Link --- */
.auth-box .password-reset {
    text-align: right;
    margin-top: 1rem;
}

.auth-box .password-reset a {
    color: var(--ins-secondary-color, #6c757d);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.875rem;
}

/* --- Card Side Image (Rechte Seite) --- */
.auth-box .card-side-img {
    background-size: cover;
    background-position: center;
}

.auth-box .auth-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* Ohne Bild: Gradient-Fallback */
.auth-box .card-side-img:not([style*="background-image"]) {
    background: linear-gradient(135deg, var(--ins-primary, #1ab394) 0%, var(--ins-secondary, #1c84c6) 100%);
}

/* --- Passkey Button Spinner --- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.auth-box .spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* --- Confirmation / Feedback Pages --- */
.auth-box .ce_text,
.auth-box .content-text {
    text-align: center;
}

.auth-box .ce_text h1,
.auth-box .ce_text h2,
.auth-box .ce_text h3 {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.auth-box .ce_text p {
    color: var(--ins-secondary-color, #6c757d);
}

/* --------------------------------------------------------------------------
   10. SECURITY CTE (Frontend)
   change_password / manage_passkeys / two_factor
   -------------------------------------------------------------------------- */

.content-page .content-change-password,
.content-page .content-manage-passkeys,
.content-page .content-two-factor,
.content-page .mod_personalData {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-white, #fff);
    max-width: 42rem;
}

.content-page .content-two-factor {
    margin-bottom: 0;
}

.content-page .content-change-password .formbody,
.content-page .content-two-factor .tl_two_factor_form .formbody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.content-page .content-change-password .widget,
.content-page .mod_personalData .fields .widget {
    margin-bottom: 0;
}

.content-page .content-change-password h2,
.content-page .content-change-password h3,
.content-page .content-two-factor h3,
.content-page .mod_personalData h2 {
    margin-bottom: 0.75rem;
    font-weight: 700;
}

/* Passkeys */
.content-page .content-manage-passkeys ul {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-page .content-manage-passkeys li.passkey {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}

.content-page .content-manage-passkeys li.passkey .name {
    flex: 1 1 auto;
    font-weight: 700;
}

.content-page .content-manage-passkeys li.passkey .created {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.content-page .content-manage-passkeys li.passkey .actions form {
    display: flex;
    gap: 0.375rem;
    margin: 0;
}

.content-page .content-manage-passkeys li.passkey .actions button {
    padding: 0.3rem 0.75rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid transparent;
    font-size: 0.75rem;
    cursor: pointer;
}

.content-page .content-manage-passkeys li.passkey .actions button[name='edit_passkey'],
.content-page .content-manage-passkeys li.passkey .actions button[name='save_passkey'] {
    background: transparent;
    border-color: var(--ins-primary, #1ab394);
    color: var(--ins-primary, #1ab394);
}

.content-page .content-manage-passkeys li.passkey .actions button[name='edit_passkey']:hover,
.content-page .content-manage-passkeys li.passkey .actions button[name='save_passkey']:hover {
    background: var(--ins-primary, #1ab394);
    color: #fff;
}

.content-page .content-manage-passkeys li.passkey .actions button[name='delete_passkey'] {
    background: transparent;
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.content-page .content-manage-passkeys li.passkey .actions button[name='delete_passkey']:hover {
    background: var(--bs-danger);
    color: #fff;
}

.content-page .content-manage-passkeys button.create {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.55rem 1.25rem;
    background: var(--ins-primary, #1ab394);
    color: #fff;
    border: 1px solid var(--ins-primary, #1ab394);
    border-radius: var(--bs-border-radius);
    font-weight: 700;
    cursor: pointer;
}

.content-page .content-manage-passkeys button.create::before {
    content: '+';
    font-size: 1.1em;
    line-height: 1;
    font-weight: 900;
}

.content-page .content-manage-passkeys p.error,
.content-page .content-login .widget-submit .error,
.content-page .content-two-factor p.error {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-border-radius);
    background: rgba(220, 53, 69, 0.1);
    color: #b02a37;
    border-left: 3px solid var(--bs-danger);
    font-size: 0.8125rem;
}

.content-page .content-manage-passkeys p.error:empty,
.content-page .content-login .widget-submit .error:empty {
    display: none;
}

/* Two-factor */
.content-page .content-two-factor > p {
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
}

.content-page .content-two-factor .qr-code {
    display: flex;
    justify-content: center;
}

.content-page .content-two-factor .qr-code img {
    display: block;
    width: 180px;
    height: 180px;
    border: 2px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
    background: #fff;
}

.content-page .content-two-factor code {
    display: block;
    word-break: break-all;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.content-page .content-two-factor .submit_container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.content-page .content-two-factor .submit_container .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.25rem;
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    font-weight: 600;
}

.content-page .content-two-factor .recovery_codes,
.content-page .content-two-factor .trusted_devices {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.content-page .content-two-factor ul.backup-codes {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.5rem;
}

.content-page .content-two-factor ul.backup-codes li {
    display: flex;
}

.content-page .content-two-factor ul.backup-codes code {
    width: 100%;
    text-align: center;
}

/* --- Error Page CTE inside auth-box --- */
.auth-box .ce_error_page {
    padding: 0;
}

/* --- Dark Mode Adjustments --- */
[data-bs-theme="dark"] .auth-box .card {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .auth-box .input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}