/* ==========================================================
   GlicheKom Portal · Northlightframe Branding
   v2026.05.29
   ----------------------------------------------------------
   Dezente, elegante Signatur:
   - .nlf-brand        : Wasserzeichen-Footer (alle Seiten)
   - .nlf-brand-login  : etwas prominentere Login-Variante
   - .nlf-brand-sidebar: winzige Sidebar-Variante (dashboard)
   ----------------------------------------------------------
   Farben: nutzt Portal-Akzent (orange #ff7a00 / #ff9a4d).
   Dark-Theme-only; Light-Theme-Support optional via inherit.
   ========================================================== */

/* ---------- Footer-Wasserzeichen (Standard) ---------- */
.nlf-brand {
  display: block;
  text-align: center;
  margin: 22px auto 14px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.5;
  user-select: none;
  pointer-events: auto;
}

.nlf-brand a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: color 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

.nlf-brand a:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 154, 77, 0.05);
}

.nlf-brand .nlf-brand-main {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: inherit;
  transition: color 0.3s ease;
}

.nlf-brand a:hover .nlf-brand-main {
  color: rgba(255, 255, 255, 0.95);
}

.nlf-brand .nlf-brand-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 154, 77, 0.62);
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.nlf-brand a:hover .nlf-brand-sub {
  color: rgba(255, 154, 77, 0.95);
  border-color: rgba(255, 154, 77, 0.32);
}

/* Gemeinsamer Brand-Dot (Diamant-Akzent) */
.nlf-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: rgba(255, 154, 77, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 154, 77, 0.45);
  flex-shrink: 0;
  transition: transform 0.4s ease, box-shadow 0.3s ease, background 0.3s ease;
}

a:hover .nlf-dot {
  background: rgba(255, 154, 77, 0.95);
  box-shadow: 0 0 8px rgba(255, 154, 77, 0.6);
  transform: scale(1.25);
}

/* ---------- Login-Variante (zarter Trennstrich + Schriftzug) ---------- */
.nlf-brand-login {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 28px auto 6px;
  padding: 0 16px;
  text-align: center;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  user-select: none;
}

.nlf-brand-login .nlf-divider {
  display: block;
  width: 120px;
  height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.10),
    rgba(255, 154, 77, 0.25),
    rgba(255, 255, 255, 0.10),
    transparent
  );
  position: relative;
}

.nlf-brand-login .nlf-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: rgba(255, 154, 77, 0.65);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255, 154, 77, 0.4);
}

.nlf-brand-login a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.25s ease;
}

.nlf-brand-login a:hover {
  background: rgba(255, 154, 77, 0.05);
}

.nlf-brand-login .nlf-main {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s ease;
}

.nlf-brand-login .nlf-sub {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 154, 77, 0.72);
  transition: color 0.25s ease;
}

.nlf-brand-login a:hover .nlf-main {
  color: rgba(255, 255, 255, 0.95);
}

.nlf-brand-login a:hover .nlf-sub {
  color: rgba(255, 154, 77, 1);
}

/* ---------- Sidebar-Variante (winzig, dashboard.html) ---------- */
.nlf-brand-sidebar {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding: 4px 4px 0;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1.4;
  user-select: none;
}

.nlf-brand-sidebar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.3s ease, background 0.3s ease;
}

.nlf-brand-sidebar a:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 154, 77, 0.06);
}

.nlf-brand-sidebar .nlf-label {
  font-weight: 600;
  letter-spacing: 0.4px;
}

.nlf-brand-sidebar .nlf-mid {
  opacity: 0.55;
  font-size: 9.5px;
}

.nlf-brand-sidebar .nlf-sub-line {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 154, 77, 0.55);
  transition: color 0.3s ease;
}

.nlf-brand-sidebar a:hover .nlf-sub-line {
  color: rgba(255, 154, 77, 0.95);
}

/* ---------- Sidebar-Footer Layout-Helper ---------- */
.sidebar-footer .nlf-brand-sidebar {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

/* ---------- Spezial: index.html (Login mit fixem brand-foot) ---------- */
/* index.html hat overflow:hidden auf body — Brand muss in brand-side rein.
   Wir nutzen die brand-foot Zeile + ergänzen einen Klick-Link.            */
.brand-side .brand-foot .nlf-brand-link {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.25s ease;
}

.brand-side .brand-foot .nlf-brand-link:hover {
  color: rgba(255, 154, 77, 0.95);
}

/* index.html: login-side ist flex row-default. Damit Brand unter
   die Card kommt, machen wir die login-side zu column-flex.        */
.login-side:has(.nlf-brand-login) {
  flex-direction: column;
  gap: 0;
}
/* Fallback ohne :has() — wir setzen es immer (kein Schaden) */
main.login-side {
  flex-direction: column;
}
main.login-side > .login-card {
  flex: 0 0 auto;
}
main.login-side > .nlf-brand-login {
  flex: 0 0 auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .nlf-brand {
    font-size: 10.5px;
    margin: 16px auto 12px;
    letter-spacing: 0.3px;
  }

  .nlf-brand-login {
    margin: 22px auto 4px;
  }

  .nlf-brand-login .nlf-divider {
    width: 110px;
    margin-bottom: 10px;
  }

  .nlf-brand-login .nlf-main {
    font-size: 12px;
  }

  .nlf-brand-login .nlf-sub {
    font-size: 9.5px;
    letter-spacing: 1.2px;
  }

  .nlf-brand-sidebar {
    font-size: 10px;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nlf-brand,
  .nlf-brand a,
  .nlf-brand-login a,
  .nlf-brand-login .nlf-main,
  .nlf-brand-login .nlf-sub,
  .nlf-brand-sidebar,
  .nlf-brand-sidebar a {
    transition: none;
  }
}

/* ---------- Print: Watermark sichtbar lassen, aber dezent ---------- */
@media print {
  .nlf-brand,
  .nlf-brand-login,
  .nlf-brand-sidebar {
    color: #555 !important;
  }

  .nlf-brand a,
  .nlf-brand-login a,
  .nlf-brand-sidebar a {
    color: #555 !important;
    border-bottom: none !important;
  }
}