/* ============================================================
   login-nw.css – Login/Register-Seite im NW-Layout
   Bootstrap wird via Layout geladen (useBootstrap="1").
   ============================================================ */

/* ── NW-Navbar: Bootstrap + mögliche Overrides zurücksetzen ─── */
nav.navbar {
  background: #1e2b2b !important;
  border-bottom: 1px solid #2a3a2a !important;
  box-shadow: none !important;
  height: 62px !important;
  padding: 0 !important;
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-items: unset !important;
}

nav.navbar .nav-list {
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}

nav.navbar .nav-list>li {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* ── Seiten-Layout: Card zentriert unter dem Nav ───────────── */
.login-page-wrap {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 3rem;
  position: relative;
  overflow: hidden;
}

/* Dekorative Hintergrundblobs */
.login-page-wrap::before,
.login-page-wrap::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.login-page-wrap::before {
  width: clamp(280px, 60vw, 680px);
  height: clamp(280px, 60vw, 680px);
  background: radial-gradient(circle, #F2F5F0 0%, transparent 70%);
  opacity: .08;
  top: clamp(-220px, -20vw, -80px);
  right: clamp(-160px, -15vw, -60px);
}

.login-page-wrap::after {
  width: clamp(220px, 45vw, 460px);
  height: clamp(220px, 45vw, 460px);
  background: radial-gradient(circle, #2D6A4F 0%, transparent 70%);
  opacity: .12;
  bottom: clamp(-160px, -15vw, -60px);
  left: clamp(-120px, -12vw, -50px);
}

/* ── Login-Card ─────────────────────────────────────────────── */
.login-card {
  width: 100%;
  max-width: 480px;
  background: rgba(242, 245, 240, .97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: none !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 24px 80px rgba(30, 45, 36, .35),
    0 0 0 1px rgba(255, 255, 255, .18);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Akzentstreifen oben */
.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2D6A4F, #7aaa50);
  border-radius: 1.5rem 1.5rem 0 0;
}

/* ── Logo-Kreis ─────────────────────────────────────────────── */
.login-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 28px rgba(45, 106, 79, .4);
}

.login-logo i {
  font-size: 2rem;
  color: #fff;
}

/* ── Titel & Untertitel ─────────────────────────────────────── */
.site-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  letter-spacing: .05em;
  color: #1e2d24;
  line-height: 1.1;
  margin-bottom: .2rem;
}

.site-sub {
  font-size: clamp(.78rem, 1.6vw, .88rem);
  color: #6b7f6e;
  font-weight: 400;
  font-style: italic;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: none !important;
  gap: .5rem;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.25rem !important;
}

.nav-tabs .nav-link {
  font-size: clamp(.85rem, 1.5vw, .95rem);
  font-weight: 600;
  text-align: center;
  border-radius: .65rem !important;
  border: 2px solid transparent !important;
  padding: .65rem .75rem;
  transition: all .2s;
  background: #fff !important;
  color: #6b7f6e;
  border-color: #cdd9c9 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.nav-tabs .nav-link:hover {
  color: #2D6A4F;
  border-color: #7aaa50 !important;
  background: #f6faf4 !important;
}

.nav-tabs .nav-link.active {
  color: #fff !important;
  font-weight: 700;
  background: linear-gradient(135deg, #2D6A4F, #7aaa50) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(45, 106, 79, .35);
}


/* ── Tab-Hinweis ─────────────────────────────────────────────── */
.tab-hint {
  font-size: clamp(.75rem, 1.3vw, .82rem);
  color: #7f9a7b;
}

/* ── Form-Labels ─────────────────────────────────────────────── */
.form-label {
  font-size: clamp(.72rem, 1.3vw, .8rem);
  font-weight: 600;
  color: #1e2d24;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .35rem;
}

/* ── Input Group ─────────────────────────────────────────────── */
.input-group-text {
  background: #F2F5F0;
  border-color: #cdd9c9;
  color: #7f9a7b;
  font-size: 1rem;
  transition: border-color .2s;
}

.form-control {
  background: #fff;
  border-color: #cdd9c9;
  color: #1e2d24;
  font-size: clamp(.85rem, 1.5vw, .95rem);
  transition: border-color .2s, box-shadow .2s;
}

.form-control::placeholder {
  color: #b5c9b5;
}

.form-control:focus {
  border-color: #7aaa50;
  box-shadow: 0 0 0 .2rem rgba(122, 170, 80, .22);
}

.input-group:focus-within .input-group-text {
  border-color: #7aaa50;
}

/* ── Submit-Button ───────────────────────────────────────────── */
.btn-primary-custom {
  font-size: clamp(.9rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #2D6A4F, #7aaa50);
  border: none;
  color: #fff;
  border-radius: .65rem;
  padding: .72rem;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(45, 106, 79, .38);
}

.btn-primary-custom:hover {
  opacity: .9;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(45, 106, 79, .48);
}

.btn-primary-custom:active {
  transform: translateY(0);
}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
  font-size: clamp(.78rem, 1.4vw, .86rem);
  border-radius: .65rem;
  border-left-width: 4px;
}

.alert-info {
  background: rgba(122, 170, 80, .1);
  border-color: rgba(122, 170, 80, .4);
  color: #2D6A4F;
}

.alert-success {
  background: rgba(45, 106, 79, .1);
  border-color: rgba(45, 106, 79, .4);
  color: #2D6A4F;
}

.alert-danger {
  background: rgba(180, 60, 60, .07);
  border-color: rgba(180, 60, 60, .3);
  color: #7a2020;
}