:root {
  --brand:       #ED1F50;
  --brand-dark:  #b00042;
  --brand-light: #ff4d8f;
  --bg-light:    #F9FAFB;
  --bg-dark:     #0b0d10;
  --text-light:  #f8f9fb;
  --text-dark:   #111;
  --accent-bg:   #ffe4ef;
  --radius: 1rem;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

html {
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--bg-light);
  color: var(--text-dark);
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

.page{
  min-height:100vh;
}

body.swal2-shown {
  padding-right: 0 !important;
  height: 100vh !important;
  overflow-y: hidden !important; 
}

.layout-main {
  flex: 1 0 auto;
}

/* =========================================
   BASIS STYLES
   ========================================= */
.navbar {
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

.navbar.sticky-top { z-index: 1030; }

.navbar-logo {
  height: 40px;
  max-height: 40px;
  width: auto;
  display: block;
}

.navbar-brand .fw-bold {
  font-size: 1.1rem;
  line-height: 1.1;
}

.navbar-claim {
  font-size: 0.8rem;
  color: #6c757d;
}

/* =========================================
   MOBILE & TABLET STYLES (< 1200px)
   ========================================= */
@media (max-width: 1199.98px) {
  
  .navbar-brand .fw-bold { font-size: 1rem; }
  .navbar-logo { height: 32px; width: auto; }
  .navbar-collapse .nav-link-cta{ display:flex; }

  .navbar-nav .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.05rem;
  }

  .nav-link-cta {
    width: 100%; 
    justify-content: center;
    padding: 0.6rem 1rem;
    font-weight: 600;
  }
}

/* CTA Buttons */
.nav-link-cta {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    transition: all 0.2s ease-in-out;
}

.nav-link-cta.active:hover,
.nav-link-cta.active:focus{
  background-color: transparent !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

.nav-link-cta.active {
    background-color: transparent !important;
    border: 2px solid var(--brand) !important;
    color: var(--brand) !important;
    box-shadow: none !important;
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    flex-shrink: 0;
    background-color: #ED1F50; 
    color: #f4f4f4; 
    font-size: .875rem;
    border-top: 1px solid rgba(244, 244, 244, .3); 
    padding: 2.5rem 0;
}

.site-footer .link-secondary {
    color: #FFFFFF !important; 
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer .link-secondary:hover,
.site-footer .link-secondary:focus {
    color: #f6a8c4 !important; 
    text-decoration: none;
}

.site-footer .d-flex.flex-wrap > a.link-secondary::before {
    content: "|";
    color: #FFFFFF;
    margin-right: 0.75rem;
    margin-left: -0.25rem;
    opacity: 0.6;
}

.site-footer .d-flex.flex-wrap > a.link-secondary:first-child::before {
    content: none;
}

/* =========================================
   STANDARD BUTTONS
   ========================================= */
.btn-primary,
.btn-primary:visited {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  border-radius: .75rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

/* HIER HABE ICH DEN DOPPELTEN CODE GELÖSCHT */

.nav-theme-toggle {
  margin-inline: 0.125rem;
}

.btn-outline-secondary,
.btn-outline-secondary:visited {
  color: #4b5563;
  border-color: #d1d5db;
  border-radius: .75rem;
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #111827;
  border-color: #9ca3af;
  background-color: #f9fafb;
}

/* Dark-Mode global */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg-dark);
    color: #e9ecef;
  }
}

/* Auth- & Verify-Seiten im Dark-Mode */
@media (prefers-color-scheme: dark) {
  .login-card,
  .card-reset,
  .card-verify {
    background: #020617; 
    border-color: rgba(148, 163, 184, 0.6);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75);
    color: #e5e7eb;
  }

  .login-card .text-muted.small,
  .card-reset .text-muted.small,
  .card-verify .text-muted.small {
    color: #9ca3af !important;
  }

  .card-reset > p.small.text-muted {
    color: #cbd5f5 !important;
  }

  .login-card .form-control,
  .card-reset .form-control,
  .card-verify .form-control {
    background-color: #020617;
    border-color: #4b5563;
    color: #e5e7eb;
  }

  .login-card .form-control::placeholder,
  .card-reset .form-control::placeholder,
  .card-verify .form-control::placeholder {
    color: #6b7280;
  }

  .login-card .form-control:focus,
  .card-reset .form-control:focus,
  .card-verify .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.25rem rgba(229, 0, 89, 0.35);
  }

  .card-reset .alert-danger,
  .card-verify .alert-danger {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(248, 113, 113, 0.6);
    color: #fecaca;
  }

  .card-reset .alert-success,
  .card-verify .alert-success {
    background-color: rgba(34, 197, 94, 0.08);
    border-color: rgba(74, 222, 128, 0.6);
    color: #bbf7d0;
  }

  .card-reset .alert-info {
    background-color: rgba(59, 130, 246, 0.09);
    border-color: rgba(96, 165, 250, 0.7);
    color: #dbeafe;
  }

  .login-card .d-flex.justify-content-between a,
  .card-reset .d-flex.justify-content-between a {
    color: #e5e7eb;
  }

  .login-card .d-flex.justify-content-between a:hover,
  .card-reset .d-flex.justify-content-between a:hover {
    color: var(--brand);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] body {
  background: var(--bg-dark);
  color: #e9ecef;
}

html[data-theme="light"] body {
  background: var(--bg-light);
  color: var(--text-dark);
}

html[data-theme="dark"] {
  --bg-card: #171717;
}