:root{
  --color-white:#EDECE4;
  --color-black:#000;
  --color-neutral-800:#1D1D1D;
  --color-neutral-700:#272727;
  --color-neutral-500:#4C4A43;
  --color-neutral-300:#A8A593;
  --color-accent-500:#E15E08;
  --color-error-500:#FF0000;
}

/* Base */
body{
  font-family:"IBM Plex Sans" !important;
  color: var(--color-white) !important;
  background-color: var(--color-neutral-800) !important;
}

/* Hintergrundbild */
body.form-membership{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: url("login_bg.jpg") center/cover no-repeat fixed !important;
}

/* Kill Theme-Container (keine Rahmen/Glows vom Template) */
.techwave_fn_sign,
.sign__content,
.form-wrapper,
.form__content,
.login{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* EIN Dialog */
.mim-login{
  width: 440px !important;
  max-width: 92vw !important;
  margin: 0 auto !important;
  background: #000 !important;
  border-radius: 16px !important;
  padding: 26px 32px !important;
  box-shadow: 0 0 2rem rgba(0,0,0,.35) !important;
}

/* Innenabstände vom Theme entfernen */
.mim-login .form__content{
  padding: 0 !important;
  background: transparent !important;
}

/* Logo */
.mim-login .logo-wrapper{
  background: transparent !important;
  margin: 0 0 10px !important;
}
.mim-login .logo-wrapper img{
  display:block !important;
  width:100% !important;
  max-width: 360px !important;     /* macht's kompakter */
  height:auto !important;
  margin:0 auto !important;
  background: transparent !important;
}

/* Falls „MIM.365ai" als extra Element/Overlay kommt */
.mim-login .logo-wrapper img:nth-child(2),
.mim-login .logo-wrapper::before,
.mim-login .logo-wrapper::after{
  content:none !important;
  display:none !important;
}

/* Subheadline */
.mim-login .subheadline{
  width:100%;
  margin: 6px 0 14px !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color:#fff !important;
}

/* Inputs */
.mim-login input[type="text"],
.mim-login input[type="password"],
.mim-login .input{
  width:100% !important;
  background: #1D1D1D !important;
  color:#fff !important;
  border:1px solid #333 !important;
  border-radius:10px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  outline:none !important;
  box-shadow:none !important;
}
.mim-login input::placeholder{
  color: var(--color-neutral-300) !important;
}
.mim-login input:focus{
  border-color: var(--color-accent-500) !important;
  box-shadow: 0 0 0 2px rgba(225,94,8,.20) !important;
}

/* Spacing zwischen Feldern kompakt */
.mim-login .form__username,
.mim-login .form__pass{
  margin-bottom: 12px !important;
}

/* Checkbox Row */
.mim-login .form__options{
  display:flex !important;
  align-items:center !important;
  gap: 18px !important;
  margin: 10px 0 14px !important;
}
.mim-login .form__options label{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  cursor:pointer !important;
  color:#fff !important;
  font-weight: 500 !important;
}
.mim-login .text-danger{
  color: var(--color-accent-500) !important; /* KI Reporting in Orange */
}

/* Checkbox weiß (Theme-unabhängig) */
.mim-login .form__options input[type="checkbox"]{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:16px !important;
  height:16px !important;
  border:2px solid #fff !important;
  border-radius:4px !important;
  background:transparent !important;
  box-shadow:none !important;
  position:relative !important;
}
.mim-login .form__options input[type="checkbox"]:checked::after{
  content:"" !important;
  position:absolute !important;
  left:3px !important;
  top:0px !important;
  width:5px !important;
  height:9px !important;
  border: solid #fff !important;
  border-width:0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Button orange/schwarz */
.mim-login .fn__submit input[type="submit"]{
  width:100% !important;
  background: var(--color-accent-500) !important;
  color: #000 !important;
  border:none !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor:pointer !important;
  box-shadow:none !important;
  outline:none !important;
  transition: background 0.2s !important;
}
.mim-login .fn__submit input[type="submit"]:hover,
.mim-login .fn__submit input[type="submit"]:focus,
.mim-login .fn__submit input[type="submit"]:active{
  background: #CC5507 !important;
  color: #000 !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Version Text */
.mim-login .sign__desc{
  margin-top: 14px !important;
  text-align:center !important;
}
.mim-login .sign__desc p{
  margin:0 !important;
  color:#9a9a9a !important;
  font-size:13px !important;
}
/* =========================
   FINAL TUNING
   ========================= */

/* 1) Mehr "Luft" oben im Dialog + generell mehr Zeilenabstand */
.mim-login{
  padding-top: 36px !important;      /* vorher ~26px */
  padding-bottom: 34px !important;
}

/* Mehr Abstand zwischen den Zeilen/Blöcken */
.mim-login .subheadline{ margin: 10px 0 18px !important; }
.mim-login .form__username,
.mim-login .form__pass{ margin-bottom: 16px !important; }
.mim-login .form__options{ margin: 14px 0 18px !important; }
.mim-login .sign__desc{ margin-top: 18px !important; }

/* 2) "Your Machine Data CoPilot" exakt gleich breit wie Inputs/Logo */
.mim-login .subheadline{
  display:block !important;
  width:100% !important;
  max-width: 100% !important;
}

/* Logo-Block ebenfalls exakt auf 100% (damit alles gleich breit wirkt) */
.mim-login .logo-wrapper{
  width:100% !important;
}

/* 3) Button Text wirklich mittig (Theme überschreibt oft line-height / align) */
.mim-login .fn__submit{
  display:block !important;
  width:100% !important;
}

.mim-login .fn__submit input[type="submit"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height: 1 !important;     /* killt Theme-lineheight */
  height: 44px !important;       /* fixe Höhe -> perfekte Zentrierung */
  padding: 0 16px !important;    /* kein vertikales padding mehr */
}
/* ==================================
   Subheadline wie Bild 2 (Headline)
   ================================== */

/* Headline-Style */
.mim-login .subheadline{
  width: 100% !important;     /* gleiche Breite wie Inputs */
  display: block !important;
  text-align: center !important;
  font-size: 28px !important; /* wie Bild 2 */
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 10px 0 26px !important;  /* mehr Abstand nach unten */
  color: #ffffff !important;
}

/* Mehr Luft generell zwischen den Reihen (wie Bild 2) */
.mim-login{
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}
.mim-login .form__username,
.mim-login .form__pass{
  margin-bottom: 18px !important;
}
.mim-login .form__options{
  margin: 18px 0 22px !important;
}

/* Button Text exakt mittig (falls Theme dazwischenfunkt) */
.mim-login .fn__submit input[type="submit"]{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  text-transform: none !important;  /* falls du "Sign in" statt "SIGN IN" willst */
}
/* ==========================================
   MIM_365ai typing loop (wie dein statisches)
   ========================================== */
/* ===== Typing Logo (echtes Tippen per JS) ===== */

.mim-logo{
  display:flex;
  justify-content:center;
  align-items:baseline;
  white-space:nowrap;
  user-select:none;
  margin: 0 0 12px !important;
}

/* Das Textfeld */
.mim-text{
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
}

/* Farben (JS setzt spans, aber fallback) */
.mim-text .orange{ color: var(--color-accent-500); }
.mim-text .white{ color:#ffffff; }

/* Cursor */
.mim-logo .caret{
  width: 2px;
  height: clamp(34px, 4.5vw, 60px);
  background:#fff;
  margin-left: 8px;
  transform: translateY(6px);
  animation: blink .8s steps(1,end) infinite;
}
@keyframes blink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}
/* Logo-Höhe fix halten (damit Dialog nicht "springt") */
.mim-logo{
  min-height: 84px; /* ggf. anpassen, je nach deiner font-size */
}

/* Text nimmt immer Platz ein, auch wenn leer */
#mimText{
  display:inline-block;
  min-width: 9ch;   /* Platz für "MIM_365ai" reservieren */
}
/* ==============================
   VERTICAL SPACING / RHYTHM
   ============================== */

/* Schwarzer Dialog: mehr Platz nach oben & unten */
.mim-login{
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

/* Typing-Logo → Headline: deutlich mehr Luft */
.mim-logo{
  margin-bottom: 26px !important;
}

/* Headline selbst etwas luftiger */
.mim-login .subheadline{
  margin-bottom: 28px !important;
  line-height: 1.25 !important;
}

/* Inputs weiter auseinander */
.mim-login .form__username{
  margin-bottom: 18px !important;
}
.mim-login .form__pass{
  margin-bottom: 22px !important;
}

/* Checkbox-Zeile weiter nach unten */
.mim-login .form__options{
  margin-top: 20px !important;
  margin-bottom: 26px !important;
}

/* Button bekommt eigenen „Block" */
.mim-login .fn__submit{
  margin-top: 10px !important;
}

/* Versionstext weiter nach unten (Footer-Gefühl) */
.mim-login .sign__desc{
  margin-top: 28px !important;
}
/* ==========================================
   Logo exakt bündig zu den Input-Feldern
   ========================================== */

/* Input-Breite als Referenz: alle 100% innerhalb mim-login */
.mim-login .form__username,
.mim-login .form__pass,
.mim-login .form__options,
.mim-login .form__submit{
  width: 100% !important;
}

/* Logo nimmt exakt dieselbe Breite wie Inputs */
.mim-login .mim-logo{
  width: 100% !important;
  justify-content: flex-start !important; /* links bündig statt center */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Typing-Text auch wirklich links starten */
.mim-login .mim-logo .mim-text,
.mim-login .mim-logo .typewrap{
  display: inline-block !important;
  text-align: left !important;
}

/* Cursor nicht "wegdriften" lassen */
.mim-login .mim-logo .caret{
  margin-left: 6px !important;
}

/* Falls deine Inputs durch Border/Shadow breiter wirken: box-sizing angleichen */
.mim-login *,
.mim-login *::before,
.mim-login *::after{
  box-sizing: border-box !important;
}
/* Logo muss exakt in die Input-Breite passen */
.mim-login .mim-logo{
  width: 100% !important;
  justify-content: flex-start !important;
}

/* Text darf NICHT über die Breite hinaus */
#mimText{
  display: inline-block;
  max-width: 100% !important;
  white-space: nowrap !important;
}