/* v157: Feinschliff – mehr Tiefe, Licht und Bewegung.

   Diese Datei lädt als letztes Stylesheet und ändert nur Aussehen und Bewegung. Regeln für sie:
   - Nichts verschiebt sich: Hier stehen keine Eigenschaften für Größe, Abstand, Raster oder Position.
     Bewegung läuft über opacity, translate, scale, box-shadow, Farben und Hintergrundlagen – und endet
     immer in der Lage, die die Seite ohne diese Datei hätte.
   - Jede Regel beginnt mit :where(:root:not([data-skin])). Die eigene Gestaltung für ein einzelnes Konto
     (data-skin) bleibt unberührt; und weil :where() nichts zur Gewichtung beiträgt, behalten die
     genaueren Regeln der Seite (aktiv, gedrückt, Admin, Handy) das letzte Wort.
   - Farben kommen aus den Variablen der Seite (--accent, --ready, --surface …), damit jedes Farbthema passt.
   - Alles, was sich bewegt, steht in „prefers-reduced-motion: no-preference“. Wer weniger Bewegung
     eingestellt hat, bekommt Tiefe und Licht, aber keine neue Bewegung.
   - Keine Eigenschaft hier trägt !important (Lehre aus v155: was so festgelegt ist, lässt sich nicht animieren). */

:where(:root:not([data-skin])) {
  --dp157-ease: cubic-bezier(.2, .8, .2, 1);
  --dp157-out: cubic-bezier(.16, 1, .3, 1);
  --dp157-kante: inset 0 1px 0 rgb(255 255 255 / 5%);
  --dp157-ruhe: inset 0 1px 0 rgb(255 255 255 / 5%), 0 1px 2px rgb(0 0 0 / 24%), 0 16px 32px -22px rgb(0 0 0 / 78%);
  --dp157-gehoben: inset 0 1px 0 rgb(255 255 255 / 8%), 0 3px 8px rgb(0 0 0 / 28%), 0 28px 48px -24px rgb(0 0 0 / 88%);
  --dp157-schimmer: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 0%) 46%);
}

:where(:root:not([data-skin])) ::selection {
  background-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}

/* ---------- Flächen: eine Lichtkante oben, ein weicher Schatten darunter ---------- */

:where(:root:not([data-skin])) .panel,
:where(:root:not([data-skin])) .mode-banner,
:where(:root:not([data-skin])) .printer-banner {
  background-image: var(--dp157-schimmer);
  box-shadow: var(--dp157-ruhe);
}

:where(:root:not([data-skin])) .idea-card {
  background-image:
    radial-gradient(120% 95% at 0% 0%, color-mix(in srgb, var(--progress) 9%, transparent), transparent 62%),
    var(--dp157-schimmer);
  box-shadow: var(--dp157-ruhe);
  transition: border-color .22s ease, box-shadow .26s ease;
}

:where(:root:not([data-skin])) .queue-item {
  box-shadow: var(--dp157-kante);
  transition: border-color .2s ease, background-color .2s ease;
}

:where(:root:not([data-skin])) .modal {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 2px 6px rgb(0 0 0 / 30%),
    0 44px 90px -34px rgb(0 0 0 / 92%),
    0 0 70px -30px var(--accent-border);
}

:where(:root:not([data-skin])) .search-input,
:where(:root:not([data-skin])) .chip,
:where(:root:not([data-skin])) .btn-ghost,
:where(:root:not([data-skin])) .language-select-wrap {
  box-shadow: var(--dp157-kante);
}

:where(:root:not([data-skin])) .search-input {
  transition: border-color .2s ease, box-shadow .24s ease;
}

:where(:root:not([data-skin])) .search-input:focus-within {
  border-color: var(--accent-border);
  box-shadow: var(--dp157-kante), 0 0 0 3px var(--accent-soft);
}

/* Umschalter: die Schiene liegt etwas tiefer, der gewählte Knopf etwas höher. Der Knopf
   „Auftrag einreichen“ hat seinen eigenen Leuchtrand und bleibt davon ausgenommen. */
:where(:root:not([data-skin])) .seg-switch {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 34%), 0 1px 0 rgb(255 255 255 / 4%);
}

:where(:root:not([data-skin])) .seg-btn.active:not(.submitter-cta) {
  background-image: var(--dp157-schimmer);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 2px 6px rgb(0 0 0 / 32%);
}

/* ---------- Knöpfe: Glanz auf den Hauptknöpfen ---------- */

:where(:root:not([data-skin])) .btn-primary {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 0%) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 10px 22px -12px var(--accent);
}

:where(:root:not([data-skin])) button.btn-primary:not(:disabled):hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%), 0 0 0 1px var(--accent-border), 0 16px 28px -12px var(--accent);
}

:where(:root:not([data-skin])) #submitterBtn.submitter-cta,
:where(:root:not([data-skin])) #submitterBtn.submitter-cta:hover {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 0%) 62%);
}

/* ---------- Kennzahl-Kacheln und Auftragskarten (Computer und Tablet) ----------
   Am Handy haben beide schon eigene Verläufe und Schatten (mobile-layout.css); dort bleibt es dabei. */

@media (width > 640px) {
  :where(:root:not([data-skin])) main {
    background-image: radial-gradient(52% 300px at 50% 0, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
    background-repeat: no-repeat;
  }

  /* Drei Lagen: eine feine Lichtlinie in der Farbe der Kachel ganz oben, ein Schein aus der Ecke, der Schimmer. */
  :where(:root:not([data-skin])) .stat-card {
    background-image:
      linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--dp157-ton, var(--text-muted)) 75%, transparent) 50%, transparent 94%),
      radial-gradient(120% 95% at 0% 0%, color-mix(in srgb, var(--dp157-ton, var(--text-muted)) 14%, transparent), transparent 64%),
      var(--dp157-schimmer);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 100%, 100% 100%;
    box-shadow: var(--dp157-ruhe);
    transition: border-color .2s ease, transform .22s var(--dp157-ease), box-shadow .26s ease, background-color .2s ease, scale .14s ease;
  }

  /* Der Ton folgt der Farbe der Zahl (druckplatte-extra.css: „bereit“ in der Akzentfarbe, „fertig“ in Grün). */
  :where(:root:not([data-skin])) .stat-card.c-ready,
  :where(:root:not([data-skin])) .stat-card.c-accent { --dp157-ton: var(--accent); }
  :where(:root:not([data-skin])) .stat-card.c-finished { --dp157-ton: var(--ready); }
  :where(:root:not([data-skin])) .stat-card.c-progress { --dp157-ton: var(--progress); }
  :where(:root:not([data-skin])) .stat-card.c-fail { --dp157-ton: var(--fail); }

  :where(:root:not([data-skin])) .stat-card .num {
    text-shadow: 0 0 24px color-mix(in srgb, currentColor 30%, transparent);
  }

  :where(:root:not([data-skin])) .stat-card.active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 0 0 1px var(--accent-border), 0 18px 36px -20px var(--accent);
  }

  :where(:root:not([data-skin])) .card {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 0%) 70%);
    box-shadow: var(--dp157-ruhe);
    transition: border-color .22s ease, transform .26s var(--dp157-ease), box-shadow .3s ease;
  }
}

@media (hover: hover) and (pointer: fine) {
  :where(:root:not([data-skin])) .queue-item:hover {
    background-color: color-mix(in srgb, var(--surface-2) 93%, var(--accent));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  }

  :where(:root:not([data-skin])) .idea-card:hover {
    box-shadow: var(--dp157-gehoben);
  }
}

@media (width > 640px) and (hover: hover) and (pointer: fine) {
  :where(:root:not([data-skin])) .stat-card:not(.active):hover {
    border-color: color-mix(in srgb, var(--dp157-ton, var(--text-muted)) 44%, var(--border));
    box-shadow: var(--dp157-gehoben);
  }

  /* Wie die vorhandene Regel in druckplatte-extra.css auch dann, wenn nur das Bild der Karte überfahren wird. */
  :where(:root:not([data-skin])) .card:is(:hover, :has(.interaction-card:hover)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    box-shadow: var(--dp157-gehoben), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

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

@keyframes dp157-auftritt {
  from { opacity: 0; translate: 0 var(--dp157-weg, 18px); }
}

@keyframes dp157-einblenden {
  from { opacity: 0; scale: .98; translate: 0 24px; }
}

@keyframes dp157-kopfzeile {
  to {
    background-color: color-mix(in srgb, var(--bg) 93%, transparent);
    border-bottom-color: color-mix(in srgb, var(--accent) 22%, var(--border-soft));
    box-shadow: 0 18px 36px -22px rgb(0 0 0 / 92%);
  }
}

@keyframes dp157-fokus {
  from { outline-color: transparent; outline-offset: 8px; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Auftritt: Die Bereiche der Seite gleiten von oben nach unten an ihren Platz. Alle starten zugleich,
     die oberen sind früher fertig – so entsteht die Welle ohne Wartezeit, und ein Bereich, der später
     eingeblendet wird (anderer Reiter, Admin-Ansicht), erscheint sofort. Solange die Begrüßung nach dem
     Anmelden noch steht, wartet der Auftritt; er beginnt, wenn sie geht. Während des Tutorials ruht er,
     damit dessen Rahmen genau sitzen. v158: Ebenso wartet er auf den Ladebildschirm (lader.css) und
     beginnt, während dieser ausblendet. */
  :where(:root:not([data-skin]):not(.dp-tour-active)) body:not(:has(> .login-welcome:not(.is-leaving), > .dp-lader:not(.is-leaving))) main > * {
    animation: dp157-auftritt var(--dp157-dauer, .86s) var(--dp157-out) backwards;
  }

  :where(:root:not([data-skin])) main > :nth-child(1) { --dp157-dauer: .44s; --dp157-weg: 10px; }
  :where(:root:not([data-skin])) main > :nth-child(2) { --dp157-dauer: .52s; --dp157-weg: 12px; }
  :where(:root:not([data-skin])) main > :nth-child(3) { --dp157-dauer: .6s; --dp157-weg: 14px; }
  :where(:root:not([data-skin])) main > :nth-child(4) { --dp157-dauer: .68s; --dp157-weg: 16px; }
  :where(:root:not([data-skin])) main > :nth-child(5) { --dp157-dauer: .74s; --dp157-weg: 17px; }
  :where(:root:not([data-skin])) main > :nth-child(6) { --dp157-dauer: .8s; --dp157-weg: 18px; }

  /* Gedrückt: die Kachel gibt kurz nach. */
  :where(:root:not([data-skin])) .stat-card:active { scale: .985; }

  /* Bild in der Auftragskarte: rückt beim Überfahren ein wenig näher (bleibt im Rahmen der Karte). */
  :where(:root:not([data-skin])) .card-media img {
    transition: scale .7s var(--dp157-out);
  }

  /* Tastatur: Der Fokusrahmen zieht sich von außen auf das Element zusammen. */
  :where(:root:not([data-skin])) :focus-visible {
    animation: dp157-fokus .3s var(--dp157-out);
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :where(:root:not([data-skin])) .card:hover .card-media img { scale: 1.05; }

  /* Hauptknöpfe: Beim Überfahren läuft einmal ein Lichtstreifen darüber. Zurück springt er ohne Bewegung. */
  :where(:root:not([data-skin])) button.btn-primary:not(:disabled) {
    background-image:
      linear-gradient(112deg, rgb(255 255 255 / 0%) 38%, rgb(255 255 255 / 34%) 50%, rgb(255 255 255 / 0%) 62%),
      linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 0%) 60%);
    background-position: 135% 0, 0 0;
    background-repeat: no-repeat;
    background-size: 260% 100%, 100% 100%;
  }

  :where(:root:not([data-skin])) button.btn-primary:not(:disabled):hover {
    background-position: -35% 0, 0 0;
    transition:
      transform .18s cubic-bezier(.2, .8, .2, 1),
      box-shadow .18s ease,
      border-color .18s ease,
      background-color .18s ease,
      color .18s ease,
      filter .18s ease,
      background-position .8s var(--dp157-out);
  }
}

/* Mitlaufend beim Scrollen (wo der Browser das kann): Karten blenden ein, wenn sie von unten ins Bild
   kommen, und die Kopfzeile bekommt nach den ersten Zeilen einen Schatten. Beides hängt an der
   Scrollposition, nicht an der Zeit – zeichnet die Seite die Karten neu, flackert nichts. */
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 60%) {
  @media screen and (prefers-reduced-motion: no-preference) {
    :where(:root:not([data-skin])) main .card,
    :where(:root:not([data-skin])) main .idea-card {
      animation: dp157-einblenden linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 180px;
    }
  }

  @media screen and (width > 640px) and (prefers-reduced-motion: no-preference) {
    :where(:root:not([data-skin])) .topbar {
      animation: dp157-kopfzeile linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 140px;
    }
  }
}