/* v158: Ladebildschirm – „die Druckplatte wird gedruckt“.

   Beim Öffnen der Seite entsteht das Logo Schicht für Schicht unter einer Düse; darunter stehen der
   Fortschritt in Prozent und fünf Schritte mit eigenen Symbolen. Der Fortschritt kommt aus echten
   Schritten der Seite (lader.js). Die Seite wird erst aufgedeckt, wenn sie fertig ist.
   - Das Gerüst steht fest im HTML und erscheint mit dem ersten Bild, noch bevor ein Skript läuft.
   - Fällt lader.js aus, blendet sich der Bildschirm nach 12 Sekunden von selbst aus (dp-lader-notaus).
   - Solange die Mensch-Verifizierung offen ist, tritt er zur Seite.
   - Wer „Bewegung reduzieren“ eingestellt hat, sieht Balken und Zahl, aber keine Bewegung. */

.dp-lader {
  --p: 0;
  --linie: calc(86% - var(--p) * 76%);
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: var(--text, #f2f1ed);
  background:
    radial-gradient(56% 46% at 50% 36%, color-mix(in srgb, var(--accent, #7c9cff) 15%, transparent), transparent 72%),
    linear-gradient(var(--accent-grid, #7c9cff0d) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--accent-grid, #7c9cff0d) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--bg, #17161a);
  font-family: Inter, sans-serif;
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.16, 1, .3, 1), filter .55s ease, visibility 0s linear .6s;
}

.dp-lader:not(.js-gesteuert) {
  animation: dp-lader-notaus .5s ease 12s forwards;
}

@keyframes dp-lader-notaus {
  to { opacity: 0; visibility: hidden; }
}

html.human-verification-pending .dp-lader {
  display: none;
}

.dp-lader.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  filter: blur(6px);
  pointer-events: none;
}

.dp-lader-buehne {
  display: flex;
  width: min(100%, 540px);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Das Logo entsteht Schicht für Schicht ---------- */

.dp-lader-druck {
  position: relative;
  width: clamp(128px, 34vw, 172px);
  aspect-ratio: 1;
  filter: drop-shadow(0 16px 30px var(--accent-soft, #7c9cff24));
}

.dp-lader-druck::after {
  position: absolute;
  right: 14%;
  bottom: 6%;
  left: 14%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, #7c9cff) 30%, transparent), transparent);
  content: "";
  opacity: calc(.35 + var(--p) * .65);
}

.dp-lader-plan,
.dp-lader-gedruckt {
  position: absolute;
  inset: 0;
  -webkit-mask: url('/assets/druckplatte-logo-v110.png') center / contain no-repeat;
  mask: url('/assets/druckplatte-logo-v110.png') center / contain no-repeat;
}

/* Was noch gedruckt wird, steht als blasser Plan da. */
.dp-lader-plan {
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--text, #f2f1ed) 9%, transparent) 0 2px, transparent 2px 4px);
}

/* Was schon gedruckt ist: Farbe der Marke mit feinen Schichtlinien wie aus dem Drucker. */
.dp-lader-gedruckt {
  z-index: 1;
  background:
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0%) 0 2px, rgb(255 255 255 / 16%) 2px 3px),
    linear-gradient(135deg, color-mix(in srgb, var(--text, #f2f1ed) 92%, #10161f) 0%, color-mix(in srgb, var(--accent, #7c9cff) 88%, white) 64%, color-mix(in srgb, var(--accent, #7c9cff) 74%, var(--ready, #45d6c4)) 100%);
  clip-path: inset(var(--linie) 0 0 0);
}

/* Die frische Schicht glüht kurz nach. */
.dp-lader-schicht {
  position: absolute;
  z-index: 2;
  top: var(--linie);
  right: 10%;
  left: 10%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, #7c9cff) 30%, color-mix(in srgb, var(--accent, #7c9cff) 40%, white) 50%, var(--accent, #7c9cff) 70%, transparent);
  box-shadow: 0 0 14px var(--accent, #7c9cff);
  opacity: .85;
}

/* Die Düse fährt über die Schicht, die gerade entsteht. */
.dp-lader-duese {
  position: absolute;
  z-index: 3;
  top: var(--linie);
  left: 50%;
  width: 26px;
  height: 34px;
  margin: -34px 0 0 -13px;
  color: var(--text, #f2f1ed);
  animation: dp-lader-fahrt 1.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  transition: opacity .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.dp-lader-duese svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dp-lader-duese .spitze {
  fill: var(--accent, #7c9cff);
  filter: drop-shadow(0 0 4px var(--accent, #7c9cff));
}

@keyframes dp-lader-fahrt {
  from { translate: -260% 0; }
  to { translate: 260% 0; }
}

.dp-lader.is-fertig .dp-lader-duese {
  opacity: 0;
  transform: translateY(-18px);
}

.dp-lader.is-fertig .dp-lader-schicht {
  opacity: 0;
  transition: opacity .35s ease;
}

/* ---------- Name, Gruß, Fortschritt ---------- */

.dp-lader-marke {
  margin-top: 20px;
  font: 700 clamp(26px, 6.4vw, 36px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.035em;
}

.dp-lader-gruss {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--text-muted, #9c9aa3);
  font-size: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.dp-lader-gruss.ist-da {
  opacity: 1;
  transform: none;
}

.dp-lader-gruss strong {
  color: var(--accent, #7c9cff);
  font-weight: 600;
}

.dp-lader-zahl {
  margin-top: 18px;
  font: 700 clamp(40px, 11vw, 58px)/1 "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.dp-lader-zahl small {
  margin-left: 3px;
  color: var(--text-muted, #9c9aa3);
  font-size: .42em;
  letter-spacing: 0;
}

.dp-lader-leiste {
  position: relative;
  width: min(240px, 62vw);
  height: 4px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 8%);
}

.dp-lader-leiste span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #7c9cff), var(--ready, #45d6c4));
  box-shadow: 0 0 12px var(--accent, #7c9cff);
  transform: scaleX(var(--p));
  transform-origin: left center;
}

.dp-lader-text {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: var(--text-muted, #9c9aa3);
  font: 500 12.5px/1.5 "JetBrains Mono", monospace;
}

/* ---------- Fünf Schritte mit eigenen Symbolen ---------- */

.dp-lader-schritte {
  display: flex;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.dp-lader-schritt {
  display: flex;
  width: 88px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--text-faint, #6c6a72);
  font: 500 10.5px/1.25 Inter, sans-serif;
  transition: color .35s ease;
}

.dp-lader-symbol {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border-soft, #2e2c33);
  border-radius: 13px;
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent), var(--surface, #201f24);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease, color .35s ease;
}

.dp-lader-symbol svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.dp-lader-haken {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: var(--ready, #45d6c4);
  color: #10131a;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, .9, .3, 1.3);
}

.dp-lader-haken svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.6;
}

.dp-lader-schritt.ist-aktiv {
  color: var(--text, #f2f1ed);
}

.dp-lader-schritt.ist-aktiv .dp-lader-symbol {
  border-color: var(--accent-border, #7c9cff59);
  color: var(--accent, #7c9cff);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 0 0 4px var(--accent-soft, #7c9cff24), 0 8px 22px -10px var(--accent, #7c9cff);
}

.dp-lader-schritt.ist-fertig {
  color: var(--text-muted, #9c9aa3);
}

.dp-lader-schritt.ist-fertig .dp-lader-symbol {
  border-color: color-mix(in srgb, var(--ready, #45d6c4) 40%, transparent);
  color: var(--ready, #45d6c4);
}

.dp-lader-schritt.ist-fertig .dp-lader-haken {
  opacity: 1;
  transform: scale(1);
}

@media (width <= 560px) {
  .dp-lader-schritte { gap: 8px; }
  .dp-lader-schritt { width: auto; }
  .dp-lader-schritt > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dp-lader-symbol { width: 40px; height: 40px; border-radius: 12px; }
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: no-preference) {
  .dp-lader-buehne > * {
    animation: dp-lader-auftritt .7s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .dp-lader-buehne > :nth-child(2) { animation-delay: .06s; }
  .dp-lader-buehne > :nth-child(3) { animation-delay: .1s; }
  .dp-lader-buehne > :nth-child(4) { animation-delay: .14s; }
  .dp-lader-buehne > :nth-child(5) { animation-delay: .18s; }
  .dp-lader-buehne > :nth-child(n + 6) { animation-delay: .22s; }

  /* Wird ein Schritt aktiv, zeichnet sich sein Symbol einmal neu; danach pulsiert nur noch der Rahmen. */
  .dp-lader-schritt.ist-aktiv .dp-lader-symbol svg [pathLength] {
    stroke-dasharray: 1;
    animation: dp-lader-zeichnen .9s cubic-bezier(.16, 1, .3, 1) both;
  }

  .dp-lader-schritt.ist-aktiv .dp-lader-symbol {
    animation: dp-lader-puls 1.6s ease-in-out infinite;
  }
}

@keyframes dp-lader-auftritt {
  from { opacity: 0; translate: 0 14px; }
}

@keyframes dp-lader-zeichnen {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes dp-lader-puls {
  50% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 0 0 7px var(--accent-soft, #7c9cff24), 0 8px 26px -8px var(--accent, #7c9cff); }
}

@media (prefers-reduced-motion: reduce) {
  /* Nur die Kinder: Die Notabschaltung am Bildschirm selbst muss auch hier greifen. */
  .dp-lader * {
    animation: none !important;
  }

  .dp-lader-duese {
    translate: none;
  }

  /* Gruß, Häkchen und Düse blenden nur noch ein und aus, ohne zu gleiten oder zu wachsen. */
  .dp-lader-gruss,
  .dp-lader-haken,
  .dp-lader-duese {
    transform: none !important;
    transition-property: opacity;
  }

  .dp-lader.is-leaving {
    transform: none;
    filter: none;
  }
}

@media print {
  .dp-lader { display: none; }
}

/* v160: Auch das Anmeldefenster (E-Mail und Code) liegt frei – der Ladebildschirm tritt solange zur Seite. */
html.login-pending .dp-lader {
  display: none;
}