/* ==========================================================================
   1. ANMELDESEITE — Login-Container Overflow-Schutz (GLOBAL)
   ========================================================================== */

body {
  overflow-x: hidden !important;
}

.flex.min-h-screen,
.flex.min-h-dvh,
[class*="min-h-screen"],
[class*="min-h-dvh"] {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ==========================================================================
   2. LOGO-CONTAINER + LOGO-BILD (RESPONSIV)
   ========================================================================== */

/* ── DESKTOP (ab 1600px) ─────────────────────────────────────────────────── */
.mt-6.h-10.w-full.bg-cover {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 220px !important;         /* ← DESKTOP: Abstand oben (Logo → Seitenrand) */
  margin-bottom: 0 !important;          /* ← DESKTOP: Abstand unten (Logo → Tagline) */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.mt-6.h-10.w-full.bg-cover::after {
  content: none !important;
  display: none !important;
}

.mt-6.h-10.w-full.bg-cover img {
  height: auto !important;
  width: 360px !important;              /* ← DESKTOP: Logo-Breite */
  max-width: 360px !important;          /* ← DESKTOP: Logo-Breite (gleicher Wert) */
  margin: 0 auto !important;
  display: block !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

/* ── MACBOOK / GROSSES TABLET (bis 1599px) ───────────────────────────────── */
@media (max-width: 1599px) {
  .mt-6.h-10.w-full.bg-cover {
    margin-top: 10px !important;        /* ← MACBOOK: Abstand oben */
    margin-bottom: 0px !important;      /* ← MACBOOK: Abstand unten */
  }
  .mt-6.h-10.w-full.bg-cover img {
    width: 290px !important;            /* ← MACBOOK: Logo-Breite */
    max-width: 290px !important;        /* ← MACBOOK: Logo-Breite (gleicher Wert) */
  }
}

/* ── TABLET (bis 767px) ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mt-6.h-10.w-full.bg-cover {
    margin-top: 20px !important;        /* ← TABLET: Abstand oben */
    margin-bottom: 0 !important;        /* ← TABLET: Abstand unten */
  }
  .mt-6.h-10.w-full.bg-cover img {
    width: 180px !important;            /* ← TABLET: Logo-Breite */
    max-width: 180px !important;        /* ← TABLET: Logo-Breite (gleicher Wert) */
  }
}

/* ── MOBILE (bis 480px) ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mt-6.h-10.w-full.bg-cover {
    margin-top: 10px !important;        /* ← MOBILE: Abstand oben */
    margin-bottom: 0 !important;        /* ← MOBILE: Abstand unten */
  }
  .mt-6.h-10.w-full.bg-cover img {
    width: 250px !important;            /* ← MOBILE: Logo-Breite */
    max-width: 250px !important;        /* ← MOBILE: Logo-Breite (gleicher Wert) */
  }
}

/* ==========================================================================
   3. TAGLINE — per JS injiziert (#nvx-tagline)
   ========================================================================== */

/* ── DESKTOP (ab 1600px) ─────────────────────────────────────────────────── */
#nvx-tagline {
  display: block !important;
  text-align: center !important;
  font-size: 19px !important;           /* ← DESKTOP: Schriftgröße */
  font-weight: 600 !important;
  margin-top: 8px !important;           /* ← DESKTOP: Abstand über dem Text */
  margin-bottom: 16px !important;       /* ← DESKTOP: Abstand unter dem Text */
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;       /* ← Eine Zeile erzwingen */
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: visible !important;         /* ← Bricht aus Card-Container heraus */
}

/* ── MACBOOK / GROSSES TABLET (bis 1599px) ───────────────────────────────── */
@media (max-width: 1599px) {
  #nvx-tagline {
    font-size: 14px !important;         /* ← MACBOOK: Schriftgröße */
    margin-top: 8px !important;         /* ← MACBOOK: Abstand über dem Text */
    margin-bottom: 14px !important;     /* ← MACBOOK: Abstand unter dem Text */
  }
}

/* ── TABLET (bis 767px) ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #nvx-tagline {
    font-size: 13px !important;         /* ← TABLET: Schriftgröße */
    margin-top: 6px !important;         /* ← TABLET: Abstand über dem Text */
    margin-bottom: 12px !important;     /* ← TABLET: Abstand unter dem Text */
  }
}

/* ── MOBILE (bis 480px) ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #nvx-tagline {
    font-size: 12px !important;         /* ← MOBILE: Schriftgröße */
    margin-top: 4px !important;         /* ← MOBILE: Abstand über dem Text */
    margin-bottom: 10px !important;     /* ← MOBILE: Abstand unter dem Text */
  }
}

/* ==========================================================================
   4. WILLKOMMENSTEXT IM CHAT
   ========================================================================== */

.flex.flex-col.md\:flex-row.items-center.justify-center.gap-2 {
  color: #1e293b !important;
}

.dark .flex.flex-col.md\:flex-row.items-center.justify-center.gap-2 {
  color: #ffffff !important;
}

/* ==========================================================================
   5. AGENT-ICON → WELTKUGEL
   ========================================================================== */

.lucide-feather {
  background-color: currentColor !important;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>') !important;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>') !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.lucide-feather path {
  visibility: hidden !important;
}

/* ==========================================================================
   6. FOOTER AUSBLENDEN
   ========================================================================== */

.absolute.bottom-0.left-0.right-0 {
  display: none !important;
}

/* ==========================================================================
   7. LOGIN-CARD BREITE — für Tagline eine Zeile
   ========================================================================== */

.w-authPageWidth {
  overflow: visible !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#nvx-tagline {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
}
/* ==========================================================================
   8. CHAT-ANSICHT — Logo + Willkommen nach unten schieben
   ========================================================================== */

[class*="pb-16"][class*="transform-gpu"] {
  margin-top: 80px !important;          /* ← Wert erhöhen = weiter nach unten */
}
/* ==========================================================================
   8. PRIMÄRFARBE — Button + Links (Orange statt Grün)
   ========================================================================== */

/* Fortfahren-Button */
button[type="submit"],
button.bg-green-500,
button.bg-green-600,
[class*="bg-green"] {
  background-color: #E8631A !important;
  border-color: #E8631A !important;
}

button[type="submit"]:hover,
button.bg-green-500:hover,
button.bg-green-600:hover {
  background-color: #c9541a !important;
  border-color: #c9541a !important;
}

/* Registrieren-Link */
a.text-green-500,
a.text-green-600,
a[class*="text-green"] {
  color: #E8631A !important;
}

a.text-green-500:hover,
a[class*="text-green"]:hover {
  color: #c9541a !important;
}