/* SA.G Group – Intranet-Eingang (Stil wie die Solar-Agency-Anmeldung) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body.landing {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #111827; color: #fff; padding: 24px 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;
}

/* schwebende Silhouetten */
.particles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.pt { position: absolute; animation: pwFloat 8s ease-in-out infinite; }
.pt svg { display: block; }
@keyframes pwFloat {
  0%   { transform: translateY(0)     rotate(0deg); }
  33%  { transform: translateY(-20px) rotate(15deg); }
  66%  { transform: translateY(10px)  rotate(-10deg); }
  100% { transform: translateY(0)     rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .pt { animation: none; } }

/* Karte */
.gate {
  position: relative; z-index: 1; width: 360px; max-width: 100%; text-align: center;
  background: #1f2937; border-radius: 14px; padding: 46px 40px 34px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.logo { display: block; width: 210px; height: auto; margin: 0 auto; }
.line { width: 48px; height: 1px; background: rgba(255, 255, 255, .12); margin: 26px auto 20px; }
.label { font-size: 11px; color: #6b7280; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 26px; }

.areas { display: flex; flex-direction: column; gap: 10px; }
.area {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px;
  text-align: left; text-decoration: none; color: #fff; background: #374151; border-radius: 7px; padding: 13px 16px;
  transition: background .15s;
}
.area:hover, .area:focus-visible { background: #4b5563; outline: none; }
.area span { font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.area small { grid-column: 1; font-size: 11.5px; color: rgba(255, 255, 255, .5); margin-top: 2px; }
.area b { grid-row: 1 / span 2; grid-column: 2; font-weight: 400; font-size: 18px; color: rgba(255, 255, 255, .7); transition: transform .15s; }
.area:hover b { transform: translateX(3px); }
.soon { margin-top: 18px; font-size: 10.5px; color: #4b5563; letter-spacing: 1.2px; text-transform: uppercase; }

.who { position: fixed; top: 16px; right: 20px; z-index: 2; font-size: 12px; color: rgba(255, 255, 255, .45); }
.who form { display: inline; }
.who button { background: none; border: 0; color: rgba(255, 255, 255, .75); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lflash { margin-bottom: 18px; padding: 9px 12px; border-radius: 7px; background: #111827; font-size: 12.5px; color: rgba(255, 255, 255, .75); }

@media (max-width: 600px) { .particles .pt:nth-child(2n), .particles .pt:nth-child(3n) { display: none; } }

/* Hinweis vor der automatischen Abmeldung */
.idle-warn { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); background: #1f2937; color: #fff; padding: 14px 18px; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.idle-warn span { color: rgba(255, 255, 255, .75); }
.idle-warn button { background: #374151; color: #fff; border: 1px solid #4b5563; border-radius: 7px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.idle-warn button:hover { background: #4b5563; }