:root{
    --r: 0px; /* kantig */
    --card-border: rgba(127,127,127,.22);
    --soft-bg: rgba(127,127,127,.08);
    --auth-header-bg: rgba(209, 210, 210, 0.25);
}

:root[data-bs-theme="dark"] {
  --auth-header-bg: rgba(18, 22, 30, .30);
}


  .auth-wrap{   
    display: grid;
    place-items: center;
    padding: 2rem 0rem;
  }

  /* Background can stay subtle and theme-friendly */
  .auth-bg{
   background: inherit;
    /*
      radial-gradient(900px 420px at 18% 10%, rgba(13,110,253,.10), transparent 55%),
      radial-gradient(900px 420px at 82% 10%, rgba(25,135,84,.10), transparent 55%);
    */
  }
  [data-bs-theme="dark"].auth-bg{
    
    background: inherit;
    /*
      radial-gradient(900px 420px at 18% 10%, rgba(13,110,253,.18), transparent 55%),
      radial-gradient(900px 420px at 82% 10%, rgba(25,135,84,.16), transparent 55%);
    */
  }

  .auth-card{
    border-radius: var(--r);
    border: 1px solid var(--card-border);
    background: var(--bs-body-bg);
    box-shadow: 0 18px 45px rgba(2,6,23,.10);
  }
  [data-bs-theme="dark"] .auth-card{
    box-shadow: 0 18px 55px rgba(0,0,0,.55);
  }


  .auth-card-wide{
    padding-left: 0;
    padding-right: 0;
    }

    .auth-card-wide > .auth-head,
    .auth-card-wide > .p-4{
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    }

    /* auf sehr großen Screens noch etwas mehr Luft */
    @media (min-width: 1400px){
    .auth-card-wide > .auth-head,
    .auth-card-wide > .p-4{
        padding-left: 2.75rem;
        padding-right: 2.75rem;
    }
    }

  .auth-head{
    border-bottom: 1px solid var(--card-border);
  }

  .brandline{
    display:flex; align-items:center; gap:.6rem;
    font-weight: 900; letter-spacing: -.02em;
  }
  .brandmark{
    width: 12px; height: 12px;
    background: var(--bs-primary);
    display:inline-block;
  }

  .helptext{ color: rgba(var(--bs-body-color-rgb), .65); }

  /* Strict inputs */
  .form-control, .form-select, .input-group-text{
    border-radius: var(--r) !important;
    border-color: rgba(127,127,127,.28) !important;
  }
  .form-control:focus, .form-select:focus{
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18) !important;
    border-color: rgba(var(--bs-primary-rgb), .55) !important;
  }

  .input-group-text{
    background: var(--soft-bg) !important;
    border-color: rgba(127,127,127,.28) !important;
  }

  .btn-strict{
    border-radius: var(--r) !important;
    font-weight: 900;
    padding: .7rem 1rem;
  }

  .divider{
    display:flex; align-items:center; gap:.9rem;
    color: rgba(var(--bs-body-color-rgb), .55);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
  }
  .divider::before, .divider::after{
    content:"";
    height: 1px;
    background: rgba(127,127,127,.28);
    flex: 1;
  }

  /* Password rules box */
  .rules{
    border: 1px solid rgba(127,127,127,.22);
    background: var(--soft-bg);
    padding: .75rem .9rem;
    border-radius: var(--r);
    font-size: .92rem;
  }

  /* Make checkbox hit area nicer but still strict */
  .form-check-input{ border-radius: .25rem; }

.bg-darker {  
  background: var(--auth-header-bg);
  border: 1px solid var(--auth-border);
}