/* ========================================
   BBT APP LAYOUT STYLES
   Reusable layout components for all pages
   ======================================== */

/* ========================================
   CSS VARIABLES / DESIGN TOKENS
   All color variables are defined in custom-variables.css.
   Do NOT redefine them here — it would shadow the configurator's
   live overrides and break per-tenant theming.
   ======================================== */

/* ----------------------------------------
   BASE LAYOUT
   ---------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bbt-surface-white, #ffffff);
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size, 1rem);
  color: var(--bbt-text-default, #004854);
}

.bbt-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bbt-surface-white, #ffffff);
}

/* ----------------------------------------
   HEADER PAGEDETAIL DESKTOP
   ---------------------------------------- */
.pagedetail-header {
  padding-bottom: 1.5rem;
}

.pagedetail-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bbt-text-default, #004854);
  margin: 0 0 0.5rem;
}

/* ----------------------------------------
   WELCOME SECTION
   ---------------------------------------- */

.home-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  margin-bottom: 1rem;
}

.home-welcome-text {
  display: flex;
  flex-direction: column;
}

.home-welcome-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--bbt-text-default, #004854);
}

.home-welcome-sub {
  font-size: 1rem;
  color: var(--bbt-text-default, #575756);
  margin: 0.125rem 0 0;
}

.home-welcome-actions {
  display: flex;
  gap: 0.75rem;
}

.home-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px;
  background-color: #ffffff;
  border-radius: 20px;
  color: var(--bbt-primary: #007e93);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s;
}

.home-action-btn:hover {
  background-color: var(--bbt-primary: #007e93);
  color: #ffffff;
  text-decoration: none;
}

.home-action-btn:hover .badge-notification {
  background-color: #ffffff;
  color: var(--bbt-primary: #007e93);
}

.home-action-icon {
  display: flex;
  align-items: center;
  background-color: var(--bbt-primary: #007e93);
  color: white;
  padding: 8px;
  border-radius: 50%;
}

.home-action-icon .badge-notification {
  position: absolute;
  top: -6px;
  right: -6px;
}

/* ----------------------------------------
   TOP BAR (Desktop)
   ---------------------------------------- */

.bbt-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background-color: var(--bbt-surface-white);
  position: sticky;
  top: 0;
  height: 80px;
  z-index: 1020;
  margin-left: 260px;
  transition: margin-left 0.25s ease;
}

.bbt-topbar-logo {
  display: flex;
  align-items: center;
}

.bbt-logo-img {
  max-width: 100%;
  height: auto;
}

.bbt-topbar-search {
  flex: 1;
  max-width: 400px;
}

.bbt-topbar-search .input-group {
  border-radius: 50rem;
  overflow: hidden;
  border: 1px solid var(--bbt-neutral-200, #d1d1d1);
}

.bbt-topbar-search .input-group-text {
  border: none;
  color: var(--bbt-text-grey, #575756);
  padding-left: 1rem;
}

.bbt-topbar-search .form-control {
  border: none;
  font-size: 0.8125rem;
  padding-right: 1rem;
}

.bbt-topbar-search .form-control:focus {
  box-shadow: none;
}

.bbt-topbar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Nav-tabs language switcher uses existing .nav-tabs styles from bootstrap-override */
.bbt-topbar-right .nav-tabs .nav-link {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

/* ----------------------------------------
   SIDEBAR (Desktop)
   ---------------------------------------- */

.bbt-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background-color: var(--bbt-surface-white);
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition:
    width 0.25s ease,
    transform 0.25s ease;
  overflow: hidden;
}

/* Sidebar header with logo + toggle */
.bbt-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  flex-shrink: 0;
  height: 80px;
  justify-content: space-between;
}

.bbt-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  color: var(--bbt-text-default, #004854);
  cursor: pointer;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.bbt-sidebar-toggle:hover {
  background-color: var(--bbt-neutral-50, #f6f6f5);
}

/* Collapsed sidebar state */
.bbt-sidebar.collapsed {
  width: 60px;
}

.bbt-sidebar.collapsed .bbt-sidebar-header {
  justify-content: center;
  padding: 0.625rem 0.5rem;
}

.bbt-sidebar.collapsed .bbt-topbar-logo {
  display: none;
}

.bbt-sidebar.collapsed .menu-item-label,
.bbt-sidebar.collapsed .menu-item-badge,
.bbt-sidebar.collapsed .bbt-sidebar-user-info,
.bbt-sidebar.collapsed .bbt-sidebar-user-toggle {
  display: none;
}

.bbt-sidebar.collapsed .menu-item {
  justify-content: center;
  padding: 0.75rem 0.5rem;
}

.bbt-sidebar.collapsed .bbt-sidebar-user {
  justify-content: center;
  padding: 0.75rem 0.25rem;
}

.bbt-sidebar.collapsed .bbt-user-dropdown {
  display: none !important;
}

.bbt-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
}

.bbt-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bbt-sidebar-footer {
  border-top: 1px solid var(--bbt-neutral-100, #e7e7e6);
  padding: 0.5rem;
  position: relative;
}

/* User dropdown menu (hidden by default) */
.bbt-user-dropdown {
  display: none;
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

.bbt-user-dropdown.active {
  display: block;
}

/* User profile row */
.bbt-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.15s;
}

.bbt-sidebar-user:hover {
  background-color: var(--bbt-neutral-50, #f6f6f5);
}

.bbt-sidebar-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bbt-sidebar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bbt-text-default, #004854);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bbt-sidebar-user-email {
  font-size: 0.6875rem;
  color: var(--bbt-text-grey, #575756);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bbt-sidebar-user-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bbt-text-grey, #575756);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.bbt-user-dropdown.active~.bbt-sidebar-user .bbt-sidebar-user-toggle {
  transform: rotate(180deg);
}

/* Collapsed state adjustments via .bbt-app class */
.bbt-app.sidebar-collapsed .bbt-topbar {
  margin-left: 60px;
}

.bbt-app.sidebar-collapsed .bbt-main {
  margin-left: 60px;
}

/* ----------------------------------------
   MOBILE APP BAR
   ---------------------------------------- */

.bbt-mobile-appbar {
  display: none;
}

.bbt-mobile-appbar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bbt-text-white);
  margin: 0;
  flex: 1;
  text-align: center;
  margin-right: 2.5rem;
}

.bbt-mobile-back-btn {
  background: none;
  border: none;
  color: var(--bbt-text-white);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bbt-mobile-back-btn:hover {
  opacity: 0.8;
}

/* ==================== MOBILE HEADER ==================== */
.bbt-mobile-header {
  display: none;
  background-color: var(--bs-primary, #007e93);
  color: #ffffff;
  padding: 1rem;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.btn-back {
  background: none;
  border: none;
  padding: 0.5rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  text-align: center;
  margin-right: 3.5rem; /* Balance the back button width */
}

.modal-title-heading {
  color: var(--bs-heading-color, #ffffff);
}

/* ----------------------------------------
   MOBILE BADGES
   ---------------------------------------- */

.bbt-mobile-badges {
  display: none;
}

/* ----------------------------------------
   MAIN CONTENT
   ---------------------------------------- */

.bbt-main {
  margin-left: 260px;
  padding: 1.5rem;
  flex: 1;
  border-radius: 40px 0 0 0;
  background-color: var(--bbt-background, #f1f1f1);
  transition: margin-left 0.25s ease;
  display: flex;
  justify-content: center;
}

.bbt-main-content {
  max-width: 50vw;
  width: 100%;
}

/* Desktop-only fix: keep the top-left rounded corner visible while body scrolls */
@media (min-width: 992px) {
  .bbt-app::before {
    content: "";
    position: fixed;
    top: 80px;
    left: 260px;
    width: 40px;
    height: 40px;
    background: radial-gradient( circle at bottom right, transparent 39px, var(--bbt-surface-white, #ffffff) 40px );
    z-index: 1025;
    pointer-events: none;
  }

  .bbt-app.sidebar-collapsed::before {
    left: 60px;
  }
}

/* ----------------------------------------
   BOTTOM NAV (Mobile only)
   ---------------------------------------- */

.bbt-bottom-nav {
  display: none;
}

.bbt-mobile-header {
  display: none;
}

/* ----------------------------------------
   FEATURES OVERLAY (Mobile only)
   ---------------------------------------- */

.bbt-features-overlay {
  display: none;
}

/* ----------------------------------------
   CONTACT OVERLAY (Mobile only)
   ---------------------------------------- */

.bbt-contact-overlay {
  display: none;
}

/* ----------------------------------------
   LANGUAGE MODAL (Mobile only)
   ---------------------------------------- */

.bbt-lang-overlay {
  display: none;
}

/* ----------------------------------------
   FLOATING CONTACT BUTTON (Mobile only)
   ---------------------------------------- */

.bbt-contact-fab {
  display: none;
}

/* ----------------------------------------
   Tabs für alle Seiten
   ---------------------------------------- */
.page-tabs-wrapper .nav-tabs {
  width: 100%;
  margin-bottom: 16px;
}

  .page-tabs-wrapper .nav-tabs .nav-link {
    width: 100%;
    justify-content: center;
  }
/* Tab Subtitle (Pattern father heading) */
.page-tab-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bbt-text-default, #004854);
  margin: 0 0 1rem;
}
/* ----------------------------------------
   Cards BBT
   ---------------------------------------- */
.card {
  border: none;
}

.card-header {
  background-color: var(--bs-card-bg);
}

.card-status {
  background-color: var(--bbt-background, #f1f1f1);
  margin-top: 1.5rem;
}

/* ----------------------------------------
   Titel BBT
   ---------------------------------------- */
.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bbt-text-default, #004854);
  margin: 0 0 1.5rem;
}

/* ========================================
   SETTINGS MODAL
   ======================================== */

.settings-modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.settings-modal-header {
  border-bottom: none;
  padding: 1.5rem 1.75rem 0.5rem;
}

.settings-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.settings-modal-body {
  padding: 1rem 1.75rem 0.5rem;
}

.settings-modal-body .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.settings-modal-body .form-control {
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid var(--bbt-neutral-200, #d1d1d0);
}

  .settings-modal-body .form-control:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bbt-primary-light) 40%, transparent);
  }

/* Settings Edit-Icon - make it clickable */
.input-icon-action {
  pointer-events: auto;
  cursor: pointer;
  color: var(--bbt-text-grey, #575756);
}

.input-icon-action:hover {
  color: var(--bbt-primary, #007e93) !important;
}

/* Attention text */
.settings-attention-text {
  font-size: 0.75rem;
  color: var(--bbt-text-grey, #575756);
  margin-bottom: 1.25rem;
  margin-top: 0.25rem;
}

/* Delete account section */
.settings-delete-section {
  margin-bottom: 0.5rem;
  padding-top: 1rem;
}

.settings-delete-section .btn-outline-danger {
  font-size: 0.8125rem;
  padding: 0.375rem 1rem;
}

.settings-delete-text {
  font-size: 0.8125rem;
  color: var(--bbt-text-default, #004854);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Footer */
.settings-modal-footer {
  border-top: none;
  padding: 1rem 1.75rem 1.5rem;
  gap: 0.75rem;
}

.settings-modal-footer .btn {
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Backdrop */
#settingsModal .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ========================================
   LOG OUT MODAL
   ======================================== */

.logout-modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  background-color: var(--bbt-surface-white, #ffffff);
}

.logout-modal-body {
  padding: 1.75rem;
  text-align: center;
}

.logout-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bbt-text-default, #004854);
  margin-bottom: 0.5rem;
  text-align: left;
}

.logout-modal-text {
  font-size: 0.875rem;
  color: var(--bbt-text-grey, #575756);
  margin-bottom: 1.25rem;
  text-align: left;
}

.logout-modal-actions {
  display: flex;
  justify-content: end;
  gap: 0.75rem;
}

.logout-modal-actions .btn {
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* ========================================
   RESPONSIVE: MOBILE (< 992px)
   ======================================== */

@media (max-width: 991.98px) {

  /* Hide desktop elements */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block;
  }

  .bbt-topbar {
    display: none;
  }

  .bbt-sidebar {
    display: none;
  }

  .bbt-main-content {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
  }

  /* Show mobile elements */
  .bbt-mobile-header {
    display: flex;
  }

  /* Insurance card mobile */
  .home-card {
    padding: 1rem;
  }

  .bbt-mobile-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bbt-primary);
    color: var(--bbt-text-white);
    position: sticky;
    top: 0;
    z-index: 1020;
  }

  .bbt-mobile-appbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .btnOpenSettingsMobile:hover {
      cursor: pointer;
  }

  .bbt-mobile-appbar .avatar {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--bbt-text-white, #ffffff);
  }

  .bbt-mobile-greeting {
    display: flex;
    flex-direction: column;
  }

  .bbt-mobile-greeting-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bbt-text-white);
  }

  .bbt-mobile-greeting-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .bbt-mobile-logout-btn {
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--bbt-error-300);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
  }

  .bbt-mobile-lang-btn {
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid;
    cursor: pointer;
    border-radius: 50%;
  }

  .loggedIn-color {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
  }

  .loggedOut-color {
    background-color: var(--bbt-primary);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
  }

  /* Mobile badges */
  .bbt-mobile-badges {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bbt-primary);
    border-radius: 0 0 1rem 1rem;
  }

  .bbt-badge-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.5rem 0.75rem;
    background-color: var(--bbt-surface-white);
    border-radius: 50rem;
    color: var(--bbt-text-default);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    position: relative;
  }

  .bbt-badge-btn:hover {
    background-color: var(--bbt-neutral-50);
    color: var(--bbt-text-default);
    text-decoration: none;
  }

  .bbt-badge-btn svg {
    color: var(--bbt-primary);
  }

  .bbt-badge-btn .badge-notification {
    margin-left: auto;
  }

  /* Main content mobile */
  .bbt-main {
    margin-left: 0;
    padding: 1rem;
    padding-bottom: 5rem;
    border-radius: 0;
    animation: bbt-page-enter 0.25s ease-out;
  }

  @keyframes bbt-page-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .bbt-app.sidebar-collapsed .bbt-main {
    margin-left: 0;
  }

  .bbt-app.sidebar-collapsed .bbt-topbar {
    margin-left: 0;
  }

  /* Bottom nav mobile */
  .bbt-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--bbt-neutral-100, #e7e7e6);
  }

  /* Features expansion panel (above bottom nav) */
  .bbt-features-overlay {
    display: block;
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 1029;
    pointer-events: none;
    overflow: hidden;
  }

  .bbt-features-backdrop {
    display: none;
  }

  .bbt-features-panel {
    background-color: var(--bbt-surface-white);
    border-radius: 1rem 1rem 0 0;
    padding: 1rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .bbt-features-overlay.active {
    pointer-events: auto;
  }

  .bbt-features-overlay.active .bbt-features-panel {
    transform: translateY(0);
  }

  .bbt-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  /* Language modal */
  .bbt-lang-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* Mobile select overlay must render above edit overlays (z-index: 1065) */
  #bbtGlobalMobileSelectOverlay {
    z-index: 1070;
  }

  .bbt-lang-overlay.active {
    pointer-events: auto;
    opacity: 1;
  }

  .bbt-lang-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .bbt-lang-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bbt-surface-white);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .bbt-lang-overlay.active .bbt-lang-panel {
    transform: translateY(0);
  }

  .bbt-lang-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
  }

  .bbt-lang-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--bbt-text-default);
  }

  .bbt-lang-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    color: var(--bbt-text-grey, #575756);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
  }

  .bbt-lang-close:hover {
    background-color: var(--bbt-neutral-50, #f6f6f5);
  }

  .bbt-lang-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .bbt-lang-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.875rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--bbt-text-default, #004854) !important;
    text-align: left;
    text-decoration: none;
  }

  .bbt-lang-list li:last-child .bbt-lang-option {
    border-bottom: none;
  }

  .bbt-lang-option:hover {
    background-color: var(--bbt-neutral-50, #f6f6f5);
  }

  .bbt-lang-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 0.125rem;
    overflow: hidden;
  }

  .bbt-lang-name {
    flex: 1;
    font-weight: 500;
  }

  .bbt-lang-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bbt-primary);
    opacity: 0;
    transition: opacity 0.15s;
  }

  .bbt-lang-option.active .bbt-lang-check {
    opacity: 1;
  }

  /* Floating contact button (FAB) */
  .bbt-contact-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--bbt-accent, #dc2c78);
    border: none;
    border-radius: 50%;
    color: var(--bbt-text-white, #ffffff);
    cursor: pointer;
    z-index: 1040;
    box-shadow: 0 4px 12px rgba(220, 44, 120, 0.4);
    transition:
      transform 0.2s,
      box-shadow 0.2s;
    z-index: 10;
  }

  .bbt-contact-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(220, 44, 120, 0.5);
  }

  .bbt-contact-fab.active {
    display: none;
  }

  /* Contact overlay */
  .bbt-contact-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .bbt-contact-overlay.active {
    pointer-events: auto;
    opacity: 1;
  }

  .bbt-contact-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 76px;
    background-color: #fcfcfce5;
  }

  .bbt-contact-panel {
    position: absolute;
    bottom: 9rem;
    right: 1rem;
    min-width: 260px;
    transform: translateY(1rem);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .bbt-contact-overlay.active .bbt-contact-panel {
    transform: translateY(0);
  }

  .bbt-contact-close {
    position: absolute;
    bottom: -3.5rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--bbt-surface-white);
    border: none;
    border-radius: 50%;
    color: var(--bbt-text-grey, #575756);
    cursor: pointer;
    box-shadow: var(--bbt-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
  }

  .bbt-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    background: var(--bbt-surface-white);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: var(--bbt-shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));
  }

  .bbt-contact-item+.bbt-contact-item {
    border-top: 1px solid var(--bbt-neutral-100, #e7e7e6);
  }

  .bbt-contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .bbt-contact-label {
    font-size: 0.75rem;
    color: var(--bbt-text-default);
    font-weight: 700;
  }

  .bbt-contact-phone {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bbt-accent-600);
    text-decoration: none;
  }

  .bbt-contact-phone:hover {
    text-decoration: underline;
  }

  .bbt-contact-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    color: var(--bbt-text-default);
    cursor: pointer;
    flex-shrink: 0;
  }

  .bbt-contact-call:hover {
    background-color: var(--bbt-success-200);
  }
}

/* ========================================
   RESPONSIVE: SMALL MOBILE (< 576px)
   ======================================== */

@media (max-width: 575.98px) {
  .bbt-main {
    padding: 0.75rem;
    padding-bottom: 5rem;
  }

  .bbt-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------
   VEKA Karte
   ---------------------------------------- */

.veka-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.veka-image {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .veka-images {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------
   Landing page: Image / Teaser
   ---------------------------------------- */

/* Landing page: Image / Teaser */
.container-teaser {
  position: relative;
  text-align: left;
  /*height: 400px;*/
}

.headerContainer {
  min-height: 400px;
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 0px !important;
  border-radius: 20px;
  /*margin-top: -3rem;*/
}

@media (max-width: 768px) {
  .headerContainer {
    min-height: 280px;
    height: 280px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 0px !important;
    /*margin-top: -3rem;*/
  }

  #cookieInfoBlockText {
    padding-right: 10px;
  }

  #cookieInfoBlockCloser {
    position: relative;
    bottom: 10px;
    right: 0px;
    top: -20px;
  }
}

.background-home {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("./themes/bbt/images/bbtheaderbild.jpg");
}

.bottom-line {
  border-bottom: 1px solid var(--bbt-grey-200, #e5e7eb);
  margin-bottom: 2rem;
}

/* Action Cards Grid - Horizontal Layout (Figma style) */
.action-grid-horizontal-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.action-grid-horizontal-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 1199px) {
  .action-grid-horizontal-2,
  .action-grid-horizontal-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .action-grid-horizontal-2,
  .action-grid-horizontal-4 {
    grid-template-columns: 1fr;
  }
}

.HausarztsucheResult {
  position: relative;
}

.HausarztsucheResult i {
  position: absolute;
  top: 35%;
  right: 50%;
}

.HausarztSucheFenster {
  border-radius: 12px;
  padding: 1rem 1rem 0px;
  margin-bottom: 1rem;
  background-color: var(--bbt-background);
}

#mutationSuccess-alert {
  position: absolute;
  right: 0px;
  top: 80px;
  padding: 25px;
}

a {
    text-decoration: none;
}

.uploadFile-TextArea {
  display: inline;
  width: 97%;
}

.uploadFile-Icon {
  display: inline;
  position: absolute;
  cursor: pointer;
}

/* ----------------------------------------
   Status (Offen / Pendent / Abgeschlossen)
   ---------------------------------------- */

.statusOffen {
  background-color: var(--bbt-error-100);
  color: var(--bbt-error-600);
}

.statusPendent {
  background-color: var(--bbt-warning-100);
  color: var(--bbt-warning-600);
}

.statusClose {
  background-color: var(--bbt-primary-100);
  color: var(--bbt-primary-600);
}

#cookieInfoBlockPortal, #cookieInfoBlockOfferten, #cookieInfoBlockVermittler {
  text-align: center;
  color: grey;
  background: rgba(229, 229, 229, 0.90);
  position: fixed;
  bottom: 0px;
  z-index: 10000;
  width: 100%;
  font-size: 15px;
}

#cookieInfoBlockText {
  padding-bottom: 30px;
  padding-left: 10px;
  padding-right: 200px;
  padding-top: 30px;
}

#cookieInfoBlockCloser {
  position: absolute;
  right: 30px;
  top: 20px;
  cursor: pointer;
}

.home-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  position: relative;
}

.scroll-to-top-btn {
  border-radius: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

  .scroll-to-top-btn:hover {
    background-color: var(--bbt-primary-300);
  }

/* Expand Button */
.btn-expand {
  background: none;
  border: none;
  padding: 0.25rem;
  color: var(--bbt-text-grey, #575756);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

  .btn-expand:hover {
    color: var(--bs-primary, #007e93);
  }

.insurance-card.expanded .btn-expand,
.invoice-card.expanded .btn-expand {
  transform: rotate(90deg);
}

/* ----------------------------------------
   EDIT - MODAL
   ---------------------------------------- */

.bbt-edit-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1065;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

  .bbt-edit-overlay.active {
    pointer-events: auto;
    opacity: 1;
  }

.bbt-edit-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.bbt-edit-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bbt-surface-white, #ffffff);
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
}

.bbt-edit-overlay.active .bbt-edit-panel {
  transform: translateY(0);
}

.bbt-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.bbt-edit-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--bbt-text-default, #004854);
  flex: 1;
  text-align: center;
}

.bbt-edit-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  color: var(--bbt-text-grey, #575756);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}

  .bbt-edit-close:hover {
    background-color: var(--bbt-neutral-50, #f6f6f5);
  }

.bbt-edit-form {
  display: flex;
  flex-direction: column;
}

  .bbt-edit-form .form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bbt-text-default, #004854);
    margin-bottom: 0.5rem;
  }

  .bbt-edit-form .form-control,
  .bbt-edit-form .form-select {
    font-size: 0.875rem;
  }

  /* Date picker wrapper inside overlay */
  .bbt-edit-form .date-picker-wrapper {
    position: relative;
  }

  .bbt-edit-form .date-picker-input {
    padding-right: 2.5rem;
    min-height: 44px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .bbt-edit-form .date-picker-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--bbt-text-grey, #575756);
    width: 18px;
    height: 18px;
  }

@media (min-width: 992px) {
  .bbt-edit-overlay {
    display: none !important;
  }
}

/* ----------------------------------------
   Z-INDEX FOR FLATPICKR & CHOICES.JS IN OVERLAY
   ---------------------------------------- */

/* Flatpickr calendar above overlay (overlay z-index: 1065) */
.flatpickr-calendar {
  z-index: 1070 !important;
}

/* Choices.js dropdown above overlay */
.bbt-edit-form {
  overflow: visible;
}

/* Choices.js dropdown above overlay */
.bbt-edit-overlay .choices {
  position: relative;
  overflow: visible;
}

.bbt-edit-overlay .choices__list--dropdown,
.bbt-edit-overlay .choices__list[aria-expanded] {
  z-index: 1080 !important;
  position: absolute;
}

.bbt-edit-form .choices__inner {
  border: 1px solid var(--bbt-neutral-300, #d1d5db);
  border-radius: 0.375rem;
  min-height: 38px;
  padding: 0.375rem 0.75rem;
}

.bbt-edit-form .choices__list--single {
  padding: 0;
}

/* Date picker inside edit modal */
.bbt-edit-form .date-picker-wrapper {
  position: relative;
}

.bbt-edit-form .date-picker-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--bbt-text-grey, #575756);
}

/* ----------------------------------------
   MOBILE EDIT FORMS
   ---------------------------------------- */

.modal-fullscreen .form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bbt-text-default, #004854);
  margin-bottom: 0.5rem;
}

.modal-fullscreen .form-check {
  padding: 1rem;
  background-color: var(--bbt-surface-white, #ffffff);
  border: 1px solid var(--bbt-neutral-200, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.modal-fullscreen .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
}

.modal-fullscreen .form-check-label {
  font-size: 1rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

.modal-fullscreen .modal-header {
  background-color: var(--bs-primary);
  color: var(--bbt-text-white, #ffffff);
  padding: 1rem 1.25rem;
  border-bottom: none;
  position: relative;
}

.modal-fullscreen .modal-header-content {
  text-align: center;
  flex: 1;
}

.modal-fullscreen .modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 auto;
}

.modal-fullscreen .modal-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0.25rem 0 0;
}

.modal-fullscreen .btn-back {
  background: none;
  border: none;
  color: var(--bbt-text-white, #ffffff);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 1rem;
  cursor: pointer;
}

.modal-fullscreen .btn-back:hover {
  opacity: 0.8;
}

.modal-fullscreen .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.modal-fullscreen .modal-body {
  padding: 1.5rem 1.25rem;
  background-color: var(--bbt-neutral-50, #f9fafb);
}

.modal-fullscreen .modal-footer {
  padding: 1rem 1.25rem;
  border-top: none;
  background-color: var(--bbt-surface-white, #ffffff);
}

input::-ms-reveal {
    display: none;
}

/* DocumentUploader */
.DocumentUploader iframe {
  width: 100%;
  height: 750px;
  background: #FFF;
}