:root{
 
  --bg-dark:#141D2D;        /* deep navy */
  --bg-top:#222E46;         /* top gradient navy */
  --bg-darker:#0C1928;      /* darker navy (footer/bottom) */
  --bg-mid:#242E43;         /* panel / card navy */
  
  /* App-Background (Fallback + iOS Safe-Area/Scrim) */
  --app-bg-solid:var(--bg-dark);
  --app-bg-top:var(--bg-top);
  --gold:#BDA16C;           /* NOVEM gold */
  --gold-dark:#A98C59;      /* hover/pressed */
  --line:rgba(189,161,108,.75);

  --text:#ffffff;
  --text-muted:rgba(255,255,255,.45);
  --text-muted-2:rgba(255,255,255,.32);

  --card-bg:rgba(36,46,67,.82);
  --card-border:rgba(200,199,204,.22);  /* iOS-like gray */
  --field-bg:rgba(255,255,255,.04);
  --field-border:rgba(200,199,204,.28);

  --focus:rgba(189,161,108,.85);
  --radius:26px;
}

/* ---- Basis ---- */
html,body{
  height:100%;
  margin:0;
  
  /* Fallback-Farbe (wichtig für iOS/Statusbar) */
  background-color:var(--app-bg-solid);
  
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(189,161,108,.22) 0%, rgba(189,161,108,0) 60%),
    radial-gradient(900px 520px at 95% 18%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-dark) 55%, var(--bg-darker) 100%);
  color:#fff;
  font-family:"Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing:.2px;
}

/* iOS PWA: Safe-Area oben einfärben (gegen "weiße Leiste") */
body::before{
  content:"";
  position:fixed;
  top:0;left:0;right:0;
  height:env(safe-area-inset-top);
  background:var(--app-bg-top);
  pointer-events:none;
  z-index:9999;
}

.text-muted-soft{color:var(--text-muted)!important}

/* ---- Logo/Brand ---- */
.logo{
  width:84px;
  height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
}
.brand-title{
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#fff;
}

/* ---- Login Container + Intro ---- */
.auth-container{max-width:500px}
#loginShell{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .28s ease,transform .28s ease;
}
#loginShell.ready{opacity:1;transform:translateY(0)}
.header-space{margin-top:6vh}
.footer-note{opacity:.85}

/* ---- Card (Glass) ---- */
.card.login-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border:1px solid var(--card-border);
  border-radius:18px;
  backdrop-filter:blur(6px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card.login-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}

/* ---- Inputs ---- */
.form-label{
  font-weight:600;
  color: rgba(255,255,255,.72);
}

/* Pill-Inputs wie in der App */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea{
  background: rgba(12,25,40,.34);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9999px;
  color: var(--text);
  padding: 14px 16px;
  min-height: 52px;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Mehrzeilige Felder sollen nicht „nur Linie“ sein */
textarea{
  border-radius: 22px;
  min-height: 120px;
  resize: vertical;
}

.form-control::placeholder,
textarea::placeholder{
  color: rgba(255,255,255,.45);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus{
  background: rgba(12,25,40,.44);
  border-color: rgba(189,161,108,.78);
  outline: none;
  box-shadow: 0 0 0 3px rgba(189,161,108,.18), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--gold);
  caret-color: var(--gold);
}
.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled{
  background: rgba(12,25,40,.22);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
}


/* ---- Buttons (Gold Pille) ---- */
.btn-gold{
  background:var(--gold);
  border:1px solid rgba(0,0,0,.08);
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:.9rem 1.2rem;
  letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.btn-gold:hover,.btn-gold:focus{
  background:rgba(189,161,108,.92);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
.btn-gold:active{
  background:var(--gold-dark);
  transform:translateY(1px);
}
.btn-gold:hover,.btn-gold:focus{
  filter:brightness(1.03);
  box-shadow:0 12px 28px rgba(202,162,90,.35);
}

.btn-gold-outline{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(200,199,204,.32);
  color:#fff;
  border-radius:999px;
  padding:.9rem 1.2rem;
  font-weight:700;
  box-shadow:none;
}
.btn-gold-outline:hover,.btn-gold-outline:focus{
  background:rgba(255,255,255,.07);
  border-color:rgba(200,199,204,.42);
}

.btn-gold-outline:hover,
.btn-gold-outline:focus{
  background: rgba(202,162,90,.12);
  box-shadow: 0 10px 24px rgba(202,162,90,.25);
  color: var(--gold);
}

/* ---- Language Toggle als Pills ---- */
.btn-group .btn{
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(200,199,204,.24);
  color:rgba(255,255,255,.55);
  padding:.35rem .9rem;
}
.btn-group .btn.active{
  background:var(--gold);
  border-color:rgba(0,0,0,.10);
  color:#fff;
}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- Alerts (Fehlerbox) ---- */
.alert-custom{
  background:#5c1f1a;
  border:1px solid #8b3a3a;
  color:#ff6b6b;
  border-radius:12px;
}

/* ---- App-Layer/Iframe ---- */
#appShell{position:fixed;inset:0;display:none;background:#000;z-index:1}
#wdFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.iframe-wrap{position:relative;width:100%;height:100dvh;overflow:hidden}
.iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

/* Opaques Loading-Overlay */
/* Overlay: statt center -> column stack */
.loading-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;

  background:linear-gradient(180deg,var(--bg-darker),var(--bg-dark));
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:3;
}
.loading-overlay{ justify-content:center; }
.loading-overlay-logo{ margin-top:-10vh; }
.loading-overlay.show{opacity:1;pointer-events:auto}


.loading-overlay-logo{
  width:140px;       /* nach Geschmack */
  height:auto;
  opacity:.95;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.45));
}


.loading-chip{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto;
  gap:.55rem .9rem;
  align-items:center;

  min-width:320px;
  max-width:min(560px, calc(100vw - 2rem));

  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:.95rem 1.1rem;
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}


.spinner-brand.spinner-border{
  grid-column:1;
  grid-row:1;
  --bs-spinner-width:2.1rem;
  --bs-spinner-height:2.1rem;
  border-width:.22rem;
  border-right-color:rgba(255,255,255,.3);
  border-top-color:var(--gold);
  border-left-color:rgba(255,255,255,.3);
  border-bottom-color:rgba(255,255,255,.3);
  filter:drop-shadow(0 6px 18px rgba(202,162,90,.35));
}

/* Deine dot kann optional bleiben – positioniert sie rechts neben Text (Row 1) */
.dot{
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 .25rem rgba(202,162,90,.18);
}

/* Textblock (Titel + Detail) */
.loading-text{
  grid-column:2;
  grid-row:1;
  min-width:0;
}
.loading-title{
  font-weight:700;
  font-size:.95rem;
  line-height:1.2;
}
.loading-detail{
  margin-top:.18rem;
  font-size:.85rem;
  opacity:.85;
  line-height:1.25;
}

/* Progressbar (Bootstrap-kompatibel, aber auch ohne Bootstrap ok) */
.loading-progress{
  grid-column:1 / -1;
  grid-row:2;

  height:8px;
  border-radius:999px;
  overflow:hidden;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* Die eigentliche Bar */
.loading-progress .progress-bar,
#loadingBar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(202,162,90,.55), var(--gold));
  box-shadow:0 6px 16px rgba(202,162,90,.22);
  transition:width .25s ease;
}

/* Steps-Liste */
.loading-steps{
  grid-column:1 / -1;
  grid-row:3;

  margin:.25rem 0 0;
  padding-left:1.1rem;
  font-size:.82rem;
  opacity:.92;
}
.loading-steps .step{
  margin:.2rem 0;
}
.loading-steps .step.is-active{
  font-weight:700;
}
.loading-steps .step.is-done{
  opacity:.65;
  text-decoration:line-through;
}


.loading-chip{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto auto; /* + Logo-Zeile */
  gap:.55rem .9rem;
  align-items:center;

  min-width:320px;
  max-width:min(560px, calc(100vw - 2rem));

  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:.95rem 1.1rem;
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.loading-logo{
  grid-column:1 / -1;
  grid-row:1;
  justify-self:center;
  align-self:center;

  height:28px;       /* ggf. 24–34px */
  width:auto;
  object-fit:contain;

  opacity:.95;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
  margin-bottom:.15rem;
}

.spinner-brand.spinner-border{ grid-row:2; }
.loading-text{ grid-row:2; }

.loading-chip > .dot{
  grid-row:2;
  grid-column:2;
  justify-self:end;
  align-self:start;
  margin-top:.15rem;
}

.loading-progress{ grid-row:3; }
.loading-steps{ grid-row:4; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---- Mobile Finetuning ---- */
@media (max-width:420px){
  .brand-title{font-size:1.05rem}
  .logo{width:72px}
  .auth-container{padding:0 .5rem}
}
@media (max-width:420px){
  .loading-logo{ height:90px; }
  .loading-chip{ min-width:unset; width:calc(100vw - 2rem); }
}



.btn-gold:disabled,
.btn-gold.disabled,
fieldset:disabled .btn-gold{
  opacity:1;
  background:rgba(189,161,108,.45);
  border-color:rgba(189,161,108,.35);
  color:rgba(255,255,255,.82);
  box-shadow:none;
  filter:none;
  transform:none;
  cursor:not-allowed;
}


/* ---- Panels / Cards (app-like) ---- */
.card, .login-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.card-header, .card-footer{
  background:transparent;
  border-color:rgba(200,199,204,.18);
}


/* ---- Topbar (optional pages like resetIndex) ---- */
.navbar, .app-header{
  background:linear-gradient(180deg, rgba(34,46,70,.96) 0%, rgba(20,29,45,.96) 100%);
  border-bottom:1px solid var(--line);
}
.brand-title, .navbar-brand{
  font-weight:800;
  letter-spacing:.06em;
}
.text-gold{color:var(--gold)!important}
.border-gold{border-color:var(--line)!important}
.hr-gold, .gold-line{
  height:1px;
  background:var(--line);
  border:0;
  opacity:1;
}


/* ---- Inputs / Choice controls (optional) ---- */
.form-check-input{
  width:1.35rem;height:1.35rem;
  background:transparent;
  border:2px solid rgba(255,255,255,.70);
}
.form-check-input:focus{box-shadow:none;border-color:rgba(255,255,255,.85)}
.form-check-input:checked{
  background-color:var(--gold);
  border-color:var(--gold);
}
.form-check-input[type=radio]{border-radius:999px}
.form-check-label{color:#fff;font-weight:650}


/* ---- Circular navigation buttons ---- */
.btn-circle{
  width:96px;height:96px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--gold);
  color:#fff;
  border:0;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.btn-circle:hover{background:rgba(189,161,108,.92)}
.btn-circle:active{background:var(--gold-dark);transform:translateY(1px)}


button, input, select, textarea{
  font-family:inherit;
}


/* Headings that use Bootstrap spacing helpers (mb-2) on auth pages should be white */
.auth-container .mb-2,
.login-card .mb-2{
  color: var(--text) !important;
}