/* Farbvariablen (nur Login-Kontext) */
.auth-page {
  --ci-teal: #00d6c6;
  --ci-teal-dark: #00b2a6;
  --ci-teal-ghost: rgba(0, 214, 198, 0.14);
  --anthracite: #343a40;
  --soft-bg: #f4f6f8;
}

/* Seite & Shell */
.auth-page {
  background: linear-gradient(180deg, var(--ci-teal) 0%, #ffffff 55%);
  min-height: 100vh;
}

.auth-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.auth-header {
  background: #ffffff;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  padding: 14px 0;
}

.auth-brandname {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--anthracite);
  letter-spacing: .3px;
}

.auth-logo { height: 40px; width: auto; }

/* Hero-Bereich (Bühne für große Grafik – später nutzbar) */
.auth-hero {
  padding: clamp(24px, 3vw, 40px) 0 48px;
  background: linear-gradient(180deg, var(--ci-teal-ghost) 0%, transparent 100%);
}

.auth-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* Login-Karte zentral & großzügig */
.auth-card {
  width: min(520px, 96%);
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(20px, 3.2vw, 32px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Titel/Subtitel */
.auth-title {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  color: var(--anthracite);
}
.auth-subtitle {
  font-size: .98rem;
  color: #4b5563;
}

/* Form */
.auth-input {
  border-radius: 12px;
  border: 1px solid #d9e2e7;
  padding: 12px 14px;
  transition: box-shadow .15s, border-color .15s;
}
.auth-input:focus {
  border-color: var(--ci-teal);
  box-shadow: 0 0 0 3px rgba(0,214,198,.18);
}

/* Link & Button */
.auth-link {
  color: var(--anthracite);
  text-decoration: none;
  font-size: .9rem;
}
.auth-link:hover { text-decoration: underline; }

.auth-btn {
  background: linear-gradient(180deg, var(--ci-teal) 0%, var(--ci-teal-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,214,198, .35);
  transition: transform .1s ease, filter .15s ease;
}
.auth-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.auth-btn:active { transform: translateY(0); }

/* Footer der Loginseite */
.auth-footer {
  margin-top: auto;
  padding: 24px 0 28px;
  background: #ffffff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -8px 22px rgba(0,0,0,0.06);
}
.auth-footer-link { color: var(--anthracite); text-decoration: none; }
.auth-footer-link:hover { text-decoration: underline; }

/* Responsive Feinschliff */
@media (min-width: 992px) {
  .auth-hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
  }
}
/* ===== Login Header (Update) ===== */
.auth-header {
  background: #ffffff;
  /* Weniger kurvig: */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  /* etwas sanfterer Shadow */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 12px 0;
}

.auth-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}

.auth-brand {
  gap: 10px;
}

.auth-logo {
  /* responsive Skalierung: */
  height: clamp(28px, 4.2vw, 44px);
  width: auto;
  display: block;
}

.auth-brandname {
  font-weight: 700;
  letter-spacing: .2px;
  /* Responsive Schriftgröße: */
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #343a40; /* Anthrazit */
  line-height: 1;
}

/* Bühne unter dem Header etwas schlanker und ruhiger */
.auth-hero {
  padding: clamp(18px, 2.5vw, 28px) 0 40px;
  background: linear-gradient(180deg, rgba(0,214,198,0.12) 0%, transparent 100%);
}

/* Grid für Inhalt unter dem Header (Login-Card + späteres Hero-Bild) */
.auth-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 24px;
}

/* Ab Desktop kann rechts Platz für ein Bild oder Key-Visual entstehen */
@media (min-width: 992px) {
  .auth-hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
}
.login-header {
    background: #ffffff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
}

.login-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.login-header .header-logo {
    height: 50px;
    width: auto;
}

.login-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
}
:root {
  --vd-turquoise: #14c7c2;
  --vd-turquoise-600: #0fa7a4;
  --vd-anth: #1f2428;
  --vd-card-bg: rgba(255,255,255,.88);
  --vd-card-border: rgba(31,36,40,.08);
  --vd-shadow: 0 10px 30px rgba(31,36,40,.15);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vd-card-bg: #ffffff;
    --vd-card-border: rgba(255, 255, 255, 0.06);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- HEADER ---------- */
.site-header {
  width: 100%;
  background: linear-gradient(90deg, var(--vd-turquoise), var(--vd-turquoise-600));
  padding: 16px clamp(16px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  flex-wrap: wrap;
}

.site-header .logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header .logo img {
  height: 40px;
  width: auto;
}

.site-header h1 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------- FOOTER ---------- */
.site-footer {
  width: 100%;
  background: #111;
  color: #ccc;
  padding: 20px clamp(16px, 4vw, 40px);
  font-size: 14px;
  text-align: center;
}

.site-footer a {
  color: var(--vd-turquoise);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ---------- LOGIN-BEREICH ---------- */
.vd-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 60px 40px;
  background:
    radial-gradient(1000px 700px at 75% 25%, rgba(20, 199, 194, 0.15), transparent 60%),
    linear-gradient(180deg, #f7fbfb 0%, #eef7f7 100%);
}

@media (prefers-color-scheme: dark) {
  .vd-login {
    background:
      radial-gradient(1000px 700px at 75% 25%, rgba(20, 199, 194, 0.15), transparent 60%),
      linear-gradient(180deg, #0f1316 0%, #0a0d0f 100%);
  }
}

.vd-login-inner {
  display: grid;
  grid-template-columns: minmax(420px, 600px) 1fr;
  align-items: center;
  gap: 80px;
  max-width: 1400px;
  width: 100%;
}

@media (max-width: 768px) {
  .vd-login-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- LOGIN-KARTE ---------- */
.vd-card {
  position: relative;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--vd-card-border);
  border-radius: 18px;
  padding: clamp(20px, 3.2vw, 36px);
  box-shadow: var(--vd-shadow);
}

.vd-title {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--vd-anth);
}

@media (prefers-color-scheme: dark) {
  .vd-card {
    background: #1b1f23;
    border-color: rgba(255, 255, 255, 0.08);
  }
  .vd-title { color: #eaf6f6; }
}

/* ---------- FORM-FELDER ---------- */
.vd-form input[type="text"],
.vd-form input[type="password"] {
  width: 100%;
  border: 1px solid var(--vd-card-border);
  border-radius: 12px;
  padding: 14px;
  outline: none;
  background: #fff;
}

@media (prefers-color-scheme: dark) {
  .vd-form input[type="text"],
  .vd-form input[type="password"] {
    background: #121519;
    color: #e5f7f6;
    border-color: rgba(255, 255, 255, 0.08);
  }
}

.vd-form button[type="submit"] {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--vd-turquoise) 0%, var(--vd-turquoise-600) 100%);
  color: #052022;
  box-shadow: 0 10px 24px rgba(20, 199, 194, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.vd-form button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.vd-form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(20, 199, 194, 0.28);
}

/* ---------- ILLUSTRATION ---------- */
/* --- Login + Illustration Layout (NEU) --- */
.auth-stage{
  display: grid;
  /* Desktop: Login ~48%, Illustration ~52% – genug Raum für die Grafik */
  grid-template-columns: minmax(460px, 48%) minmax(520px, 52%);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
  max-width: 1440px;
  margin: clamp(24px, 5vh, 80px) auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* Illustration groß, rechts, leicht nach unten versetzt + sanfte Animation */
.auth-hero-illus{
  display: block;
  width: 100%;
  max-width: 1100px; /* größer als zuvor -> kein "winzig" mehr */
  height: auto;
  justify-self: end;  /* nach rechts */
  align-self: start;  /* auf Höhe des Logins */
  margin-top: 28px;   /* ~10% nach unten – Feintuning */
  margin-right: clamp(8px, 2vw, 24px);

  /* sanftes Reinblenden/-gleiten */
  opacity: 0;
  transform: translate(22px, 18px) scale(1.045);
  animation: authIllusIn 1.8s cubic-bezier(.22,.61,.36,1) forwards;

  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 24px 60px rgba(0,0,0,.28))
    drop-shadow(0 6px 18px rgba(20,199,194,.18));
}

@keyframes authIllusIn{
  to { opacity: 1; transform: translate(0,0) scale(1); }
}

/* --- Mobile: Grafik unter dem Login, groß & mittig --- */
@media (max-width: 900px){
  .auth-stage{
    grid-template-columns: 1fr;           /* untereinander */
    gap: clamp(24px, 5vw, 48px);
  }
  .auth-hero-illus{
    justify-self: center;                  /* mittig */
    margin-top: 8px;
    margin-right: 0;
    width: clamp(320px, 94vw, 760px);      /* richtig groß auf Phones */
    max-width: 760px;
    transform: translate(0, 10px) scale(1.03); /* kleinerer Versatz mobil */
  }
}
/* ===== Welcome Screen (index.php) ===== */
.welcome-screen {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(to bottom, #00d6c6, #f8f8f8);
  color: #333;
}

/* zentrierte Karte */
.welcome-card {
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: ws-fadeInUp .8s ease forwards;
}

.welcome-title {
  margin: 0 0 .5rem;
  font-weight: 700;
}

.welcome-sub {
  margin: .25rem 0 1rem;
  color: #555;
  font-size: 0.95rem;
}

/* Fade-in Animation */
@keyframes ws-fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Laufende Punkte (auf Grundlinie) */
.loading-row {
  display: inline-flex;
  align-items: baseline;   /* Punkte auf Textgrundlinie */
  gap: 4px;
  font-size: 1rem;
  color: #444;
}
.loading-row .dot {
  width: .35em;
  height: .35em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: ws-dotsBlink 1.2s infinite both;
  margin-bottom: 2px;      /* noch etwas tiefer */
}
.loading-row .dot:nth-child(2) { animation-delay: .15s; }
.loading-row .dot:nth-child(3) { animation-delay: .30s; }

@keyframes ws-dotsBlink {
  0%, 80%, 100% { opacity: 0; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-1px); }
}
/* Login-Fehlermeldung: Weiß mit sanftem Rotüberzug */
.ra-login-alert-danger {
  background:
    linear-gradient(
      rgba(220, 53, 69, 0.20), /* 20% Rotüberzug */
      rgba(220, 53, 69, 0.20)
    ),
    #ffffff; /* Fester weißer Hintergrund */
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #842029; /* Dunkelroter Text wie im Portal */
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Sanftes Ausblenden */
.ra-login-alert-danger.ra-fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}