:root {
      --bg: #0f172a;
      --panel: #111827;
      --panel-2: #1f2937;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --line: #374151;
      --accent: #38bdf8;
      --ok: #22c55e;
      --warn: #f59e0b;
      --bad: #ef4444;
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --radius: 18px;
    }
@font-face {
  font-family: "Local Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src:
    url("../fonts/material-symbols-rounded.woff2") format("woff2"),
    url("../fonts/MaterialSymbolsRounded.woff2") format("woff2"),
    url("../fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"),
    url("../fonts/material-symbols-outlined.woff2") format("woff2"),
    url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2"),
    url("../fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"),
    url("../fonts/material-icons-v143-latin-regular.woff2") format("woff2"),
    url("../fonts/MaterialIcons-Regular.woff2") format("woff2");
}

.material-symbols-rounded {
  font-family: "Local Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 1.08em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  vertical-align: -0.15em;
  pointer-events: none;
  user-select: none;
}

.icon-only-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(56,189,248,.16), transparent 34rem),
        radial-gradient(circle at top right, rgba(34,197,94,.08), transparent 28rem),
        var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }



    .engine-version-badge {
      position: absolute;
      top: 12px;
      right: 18px;
      z-index: 2;
      display: inline-block;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(203,213,225,.72);
      font-size: .58rem;
      font-weight: 750;
      line-height: 1;
      letter-spacing: .025em;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      .engine-version-badge {
        top: 9px;
        right: 12px;
        font-size: .54rem;
      }
    }

    main {
      width: min(1240px, calc(100% - 32px));
      margin: 0 auto;
      padding: 32px 0 42px;
    }

    .card {
      background: linear-gradient(180deg, rgba(31,41,55,.86), rgba(17,24,39,.92));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .settings {
      position: relative;
      padding: 22px;
      margin-bottom: 24px;
    }

    .settings h2 {
      margin: 0 0 22px;
      padding-right: 110px;
      font-size: 1.12rem;
      letter-spacing: -.02em;
      line-height: 1.35;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      align-items: start;
    }

    @media (max-width: 980px) {
      .settings-grid { grid-template-columns: 1fr; }
    }

    .setting {
      display: grid;
      gap: 9px;
      margin-bottom: 14px;
    }

    .inline-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    @media (max-width: 760px) {
      .inline-grid { grid-template-columns: 1fr; }
    }

    .watermark-preview {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      border: 1px solid rgba(148,163,184,.18);
      border-radius: 12px;
      background: rgba(15,23,42,.46);
    }

    .watermark-preview img {
      width: 58px;
      height: 58px;
      object-fit: contain;
      border-radius: 10px;
      background:
        linear-gradient(45deg, rgba(148,163,184,.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148,163,184,.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148,163,184,.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.12) 75%);
      background-size: 14px 14px;
      background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
      border: 1px solid rgba(255,255,255,.08);
    }

    .watermark-name {
      color: var(--muted);
      font-size: .86rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    label {
      font-size: .92rem;
      font-weight: 650;
      color: #f3f4f6;
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
    }

    input[type="text"],
    input[type="number"],
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(15,23,42,.65);
      color: var(--text);
      border-radius: 12px;
      padding: 11px 12px;
      outline: none;
      font: inherit;
      font-size: .98rem;
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      padding-right: 46px;
      background-image:
        linear-gradient(45deg, transparent 50%, #cbd5e1 50%),
        linear-gradient(135deg, #cbd5e1 50%, transparent 50%);
      background-position:
        calc(100% - 28px) 50%,
        calc(100% - 21px) 50%;
      background-size: 7px 7px, 7px 7px;
      background-repeat: no-repeat;
    }

    textarea {
      min-height: 86px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(56,189,248,.16);
    }

    .hint {
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.42;
    }

    .check {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: var(--muted);
      line-height: 1.32;
      font-size: .84rem;
      cursor: pointer;
      user-select: none;
      margin: 0;
    }

    .switch-card .check span,
    .check.switch-card span {
      font-size: .72rem;
      line-height: 1.2;
    }

    .check input {
      margin-top: 1px;
      accent-color: var(--accent);
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
    }

    .switch-card {
      min-height: 76px;
      padding: 9px 10px;
      border-radius: 12px;
      border: 1px solid rgba(56,189,248,.22);
      background: rgba(56,189,248,.07);
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .switch-card > .check,
    .check.switch-card {
      min-height: 56px;
    }

    .check.switch-card {
      flex-direction: row;
      align-items: flex-start;
    }

    .switch-card strong,
    .check.switch-card strong {
      display: block;
      color: #e0f2fe;
      margin-bottom: 2px;
      font-size: .82rem;
      line-height: 1.12;
    }

    /* Einheitliche obere Options-Boxen */
    .settings .switch-card,
    .settings .keep-smaller-card {
      min-height: 82px;
      padding: 10px 12px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .settings .switch-card > .check,
    .settings .keep-smaller-card > .check {
      width: 100%;
      min-height: 60px;
      margin: 0;
      display: flex;
      align-items: flex-start;
      font-weight: 400;
    }

    .settings .switch-card > .check span,
    .settings .keep-smaller-card > .check span {
      font-weight: 400;
      font-size: .80rem;
      line-height: 1.26;
    }

    .settings .switch-card > .check strong,
    .settings .keep-smaller-card > .check strong {
      font-weight: 800;
      font-size: .82rem;
      line-height: 1.16;
    }


    .metadata-fields {
      display: grid;
      gap: 9px;
      margin-top: 10px;
    }
    .dropzone .dropzone-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      margin-bottom: 12px;
      color: var(--accent);
      font-size: 2.35rem;
      opacity: .92;
    }

    .file-edit-btn {
      width: 28px;
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(56,189,248,.30);
      background: rgba(56,189,248,.12);
      color: #bae6fd;
      flex: 0 0 auto;
      box-shadow: none;
    }

    .file-edit-btn .material-symbols-rounded {
      font-size: .86rem;
      vertical-align: 0;
    }

    .file-edit-btn:hover,
    .file-edit-btn:focus-visible {
      background: rgba(56,189,248,.24);
      border-color: rgba(56,189,248,.54);
      color: #e0f2fe;
      outline: none;
    }

    .file-edit-btn.is-edited {
      background: rgba(34,197,94,.16);
      border-color: rgba(34,197,94,.42);
      color: #bbf7d0;
    }

    button .material-symbols-rounded,
    .button .material-symbols-rounded,
    .download .material-symbols-rounded {
      font-size: 1.18em;
    }

.dropzone {
      display: grid;
      place-items: center;
      min-height: 245px;
      padding: 32px;
      margin-bottom: 24px;
      text-align: center;
      border: 2px dashed rgba(148,163,184,.52);
      border-radius: var(--radius);
      background: rgba(15,23,42,.56);
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
      cursor: pointer;
    }

    .dropzone.dragover {
      border-color: var(--accent);
      background: rgba(14,165,233,.12);
      transform: translateY(-1px);
    }

    .dropzone svg {
      display: none;
    }

    .dropzone strong {
      display: block;
      font-size: 1.25rem;
      margin-bottom: 6px;
    }

    .dropzone span {
      color: var(--muted);
      line-height: 1.5;
    }

    .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 18px;
    }

    button,
    .button {
      border: 0;
      appearance: none;
      border-radius: 12px;
      padding: 11px 15px;
      font-weight: 750;
      color: #06121f;
      background: var(--accent);
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 42px;
    }

    button:hover,
    .button:hover { background: #7dd3fc; }

    button:disabled {
      background: #64748b;
      color: #cbd5e1;
      cursor: not-allowed;
    }

    .secondary {
      color: var(--text);
      background: rgba(148,163,184,.14);
      border: 1px solid rgba(148,163,184,.2);
    }

    .secondary:hover { background: rgba(148,163,184,.23); }


    #statsOpenBtn,
    #homePageBtn,
    #infoOpenBtn,
    #privacyOpenBtn {
      gap: 4px;
    }

    #statsOpenBtn .material-symbols-rounded,
    #homePageBtn .material-symbols-rounded,
    #infoOpenBtn .material-symbols-rounded,
    #privacyOpenBtn .material-symbols-rounded {
      font-size: 1.08em;
      line-height: 1;
      vertical-align: -0.12em;
    }

    #statsOpenBtn,
    #homePageBtn,
    #infoOpenBtn,
    #privacyOpenBtn {
      transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    #homePageBtn {
      font-weight: 400;
    }

    #statsOpenBtn:hover,
    #statsOpenBtn:focus-visible,
    #homePageBtn:hover,
    #homePageBtn:focus-visible,
    #infoOpenBtn:hover,
    #infoOpenBtn:focus-visible,
    #privacyOpenBtn:hover,
    #privacyOpenBtn:focus-visible {
      background: rgba(56,189,248,.18);
      border-color: rgba(125,211,252,.62);
      color: #e0f2fe;
      box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 16px rgba(56,189,248,.32), inset 0 0 12px rgba(14,165,233,.12);
      transform: translateY(-1px);
      outline: none;
    }

    .small-btn {
      min-height: 23px;
      padding: 4px 6px;
      border-radius: 7px;
      font-size: .66rem;
      font-weight: 800;
      line-height: 1;
    }

    .small-btn.icon-action-btn {
      padding: 0;
      font-size: .78rem;
    }

    .action-btn {
      min-height: 24px;
      padding: 4px 6px;
      border-radius: 7px;
      font-size: .62rem;
      font-weight: 800;
      line-height: 1;
      gap: 3px;
      white-space: nowrap;
    }

    .link-btn {
      min-height: auto;
      padding: 0;
      color: #bae6fd;
      background: transparent;
      border: 0;
      border-radius: 0;
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 800;
    }

    .link-btn:hover {
      background: transparent;
      color: #e0f2fe;
    }


    .meta-detail-btn {
      max-width: 100%;
      display: inline-block;
      padding: 0;
      border: 0;
      background: transparent;
      color: #bae6fd;
      cursor: pointer;
      font-size: .78rem;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .meta-detail-btn:hover {
      background: transparent;
      color: #e0f2fe;
      text-decoration-thickness: 2px;
    }


    .table-card {
      overflow: hidden;
    }

    .table-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 20px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.34);
    }

    .table-head h2 {
      margin: 0;
      font-size: 1.08rem;
    }

    .summary {
      color: var(--muted);
      font-size: .92rem;
      text-align: right;
    }

    .table-wrap {
      overflow-x: hidden;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
    }

    thead,
    tbody {
      display: block;
      width: 100%;
    }

    thead tr,
    tbody tr {
      display: grid;
      grid-template-columns:
        minmax(38px, .20fr)
        minmax(198px, 1.76fr)
        minmax(82px, .56fr)
        minmax(64px, .40fr)
        minmax(76px, .48fr)
        minmax(62px, .38fr)
        minmax(104px, .62fr)
        minmax(54px, .32fr)
        minmax(150px, 1.05fr)
        minmax(132px, .78fr);
      align-items: center;
      column-gap: 0;
      width: 100%;
    }

    th,
    td {
      min-width: 0;
    }

    th:nth-child(4),
    th:nth-child(5),
    th:nth-child(6),
    td:nth-child(4),
    td:nth-child(5),
    td:nth-child(6) {
      text-align: center;
    }

    th:nth-child(8),
    td:nth-child(8) {
      text-align: center;
    }

    th:nth-child(9),
    td:nth-child(9) {
      padding-left: 6px;
      padding-right: 6px;
    }

    th:nth-child(10),
    td:nth-child(10) {
      text-align: left;
      padding-left: 6px;
      padding-right: 0;
    }

    td:nth-child(7) {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    td:nth-child(10) {
      white-space: normal;
    }

    th:nth-child(7),
    td:nth-child(7) {
      padding-left: 0;
      padding-right: 6px;
    }

    th:nth-child(3),
    td:nth-child(3) {
      text-align: center;
      padding-left: 0;
      padding-right: 0;
    }

    td:nth-child(3) {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    td:nth-child(9) .progress {
      width: 100%;
    }

    th.delete-col,
    td.delete-col {
      width: 38px;
      text-align: center;
      padding-left: 14px;
      padding-right: 2px;
    }

    th:nth-child(2),
    td:nth-child(2) {
      padding-left: 11px;
    }


    th,
    td {
      padding: 8px 6px;
      border-bottom: 0;
      text-align: left;
      vertical-align: middle;
      font-size: .86rem;
    }

    thead tr,
    tbody tr {
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    tbody tr:last-child {
      border-bottom: 0;
    }

    thead tr {
      background: rgba(17,24,39,.7);
    }

    th {
      color: #cbd5e1;
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .035em;
      background: transparent;
      white-space: nowrap;
    }

    .file-cell {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .thumb {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      object-fit: cover;
      background: #0b1220;
      border: 1px solid rgba(255,255,255,.09);
      flex: 0 0 auto;
      cursor: zoom-in;
    }

    .thumb:hover,
    .thumb:focus-visible {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(56,189,248,.14);
      outline: none;
    }

    .name {
      font-weight: 700;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: .78rem;
      line-height: 1.1;
    }

    .file-cell > div:last-child {
      min-width: 0;
      max-width: 100%;
    }

    .meta {
      color: var(--muted);
      font-size: .58rem;
      margin-top: 1px;
      line-height: 1.14;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      max-height: 2.28em;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 750;
      white-space: nowrap;
      background: rgba(148,163,184,.14);
      color: #cbd5e1;
    }

    .badge.ok {
      background: rgba(34,197,94,.14);
      color: #bbf7d0;
    }

    .badge.warn {
      background: rgba(245,158,11,.15);
      color: #fde68a;
    }

    .badge.bad {
      background: rgba(239,68,68,.15);
      color: #fecaca;
    }

    .badge.info {
      background: rgba(56,189,248,.14);
      color: #bae6fd;
    }

    .progress {
      width: 100%;
      max-width: none;
      min-width: 0;
      height: 9px;
      border-radius: 999px;
      background: rgba(148,163,184,.18);
      overflow: hidden;
    }

    .bar {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--ok));
      border-radius: inherit;
      transition: width .22s ease;
    }

    .download {
      color: #06121f;
      background: #a7f3d0;
      border-radius: 7px;
      padding: 4px 6px;
      font-size: .62rem;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      line-height: 1;
      margin: 0;
      gap: 3px;
    }

    .download:hover { background: #d1fae5; }

    .actions-cell {
      display: flex;
      gap: 4px;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
    }

    .icon-action-btn {
      width: 28px;
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      border-radius: 8px;
    }

    .icon-action-btn .material-symbols-rounded {
      font-size: 1.14rem;
      vertical-align: -0.16em;
    }

    .action-btn .material-symbols-rounded,
    .download.action-btn .material-symbols-rounded {
      font-size: .95rem;
      vertical-align: -0.18em;
      line-height: 1;
    }

    .action-label {
      display: inline-block;
      line-height: 1;
    }


    /* Feinausrichtung Dateiliste: gewünschte Spaltenblöcke weiter nach links setzen. */
    thead tr > :nth-child(4),
    thead tr > :nth-child(5),
    thead tr > :nth-child(6),
    thead tr > :nth-child(7),
    tbody tr > :nth-child(4),
    tbody tr > :nth-child(5),
    tbody tr > :nth-child(6),
    tbody tr > :nth-child(7) {
      transform: translateX(-20px);
    }

    thead tr > :nth-child(8),
    thead tr > :nth-child(9),
    tbody tr > :nth-child(8),
    tbody tr > :nth-child(9) {
      transform: translateX(-30px);
    }

    thead tr > :nth-child(10),
    tbody tr > :nth-child(10) {
      transform: translateX(-20px);
    }

    .actions-cell .secondary.action-btn {
      padding-left: 6px;
      padding-right: 6px;
      gap: 0;
    }

    .remove-file-btn {
      width: 22px;
      min-width: 22px;
      height: 22px;
      min-height: 22px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(15,23,42,.35);
      color: #94a3b8;
      font-size: .9rem;
      font-weight: 900;
      line-height: 1;
    }

    .remove-file-btn:hover {
      background: rgba(239,68,68,.18);
      border-color: rgba(239,68,68,.42);
      color: #fecaca;
    }

    .remove-file-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    .empty {
      color: var(--muted);
      text-align: center;
      padding: 30px;
    }

    .note {
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.5;
      margin-top: 14px;
    }

    .hidden { display: none !important; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(2,6,23,.78);
      backdrop-filter: blur(8px);
    }

    .modal {
      width: min(980px, 100%);
      max-height: min(86vh, 900px);
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: #111827;
      box-shadow: 0 24px 90px rgba(0,0,0,.55);
      display: flex;
      flex-direction: column;
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.72);
    }

    .modal-head h3 {
      margin: 0;
      font-size: 1.04rem;
      word-break: break-word;
    }

    .modal-body {
      padding: 18px;
      overflow: auto;
    }



    .privacy-text {
      max-width: 860px;
      color: #dbeafe;
      font-size: .92rem;
      line-height: 1.62;
    }

    .privacy-text .privacy-lead {
      margin-top: 0;
      color: #f8fafc;
      font-size: .98rem;
      line-height: 1.6;
    }

    .privacy-text h4 {
      margin: 18px 0 6px;
      color: #f8fafc;
      font-size: .96rem;
    }

    .privacy-text p {
      margin: 0 0 10px;
      color: #cbd5e1;
    }

    .privacy-text a {
      color: #67e8f9;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .privacy-text a:hover {
      color: #a5f3fc;
    }


    .tool-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .tool-info-card {
      border: 1px solid rgba(103, 232, 249, 0.16);
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.42);
      padding: 13px 14px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    }

    .tool-info-card h4 {
      margin-top: 0;
    }

    .tool-info-card ul {
      margin: 8px 0 0 18px;
      padding: 0;
      color: #cbd5e1;
    }

    .tool-info-card li {
      margin: 0 0 6px;
      line-height: 1.48;
    }

    @media (max-width: 720px) {
      .tool-info-grid {
        grid-template-columns: 1fr;
      }
    }

    .close-btn {
      color: var(--text);
      background: rgba(148,163,184,.14);
      border: 1px solid rgba(148,163,184,.2);
      min-height: 36px;
      padding: 8px 10px;
    }

    .kv {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 8px 14px;
      margin: 0 0 16px;
    }

    .kv dt {
      color: #cbd5e1;
      font-weight: 800;
    }

    .kv dd {
      margin: 0;
      color: var(--muted);
      overflow-wrap: anywhere;
    }

    .meta-list {
      display: grid;
      gap: 10px;
    }

    .meta-entry {
      border: 1px solid rgba(148,163,184,.16);
      background: rgba(15,23,42,.56);
      border-radius: 12px;
      padding: 12px;
    }

    .meta-entry strong {
      display: block;
      margin-bottom: 6px;
      color: #f8fafc;
    }

    .meta-entry pre {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      color: #cbd5e1;
      font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .stats-modal-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .stats-kpi {
      border: 1px solid rgba(148,163,184,.16);
      background: rgba(15,23,42,.56);
      border-radius: 12px;
      padding: 12px;
    }

    .stats-kpi strong {
      display: block;
      color: #f8fafc;
      font-size: 1.15rem;
      line-height: 1.15;
      margin-bottom: 4px;
    }

    .stats-kpi span {
      display: block;
      color: var(--muted);
      font-size: .75rem;
      line-height: 1.25;
    }
@media (max-width: 760px) {
      .stats-modal-grid { grid-template-columns: 1fr 1fr; }
    }
.compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    @media (max-width: 760px) {
      .compare-grid { grid-template-columns: 1fr; }
      .kv { grid-template-columns: 1fr; }
    }

    .compare-card {
      border: 1px solid rgba(148,163,184,.16);
      background: rgba(15,23,42,.56);
      border-radius: 14px;
      padding: 12px;
    }

    .compare-card h4 {
      margin: 0 0 10px;
      font-size: .98rem;
    }

    .zoom-control {
      display: grid;
      gap: 6px;
      margin: 0 0 16px;
      color: var(--muted);
      font-size: .92rem;
    }

    .zoom-wrap {
      height: min(58vh, 520px);
      overflow: hidden;
      position: relative;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(45deg, rgba(148,163,184,.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148,163,184,.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148,163,184,.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.12) 75%);
      background-size: 18px 18px;
      background-position: 0 0, 0 9px, 9px -9px, -9px 0px;
      cursor: grab;
      user-select: none;
      touch-action: none;
    }

    .zoom-wrap.dragging {
      cursor: grabbing;
    }

    .compare-card img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform-origin: center center;
      will-change: transform;
      pointer-events: none;
    }

    .compare-stats {
      margin-top: 10px;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.5;
    }

    .image-lightbox {
      position: fixed;
      inset: 0;
      z-index: 160;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(2,6,23,.86);
      backdrop-filter: blur(8px);
      cursor: zoom-out;
    }

    .image-lightbox-inner {
      width: min(96vw, 1220px);
      max-height: 92vh;
      display: grid;
      gap: 10px;
      justify-items: center;
      pointer-events: none;
    }

    .image-lightbox img {
      display: block;
      max-width: 100%;
      max-height: calc(92vh - 38px);
      object-fit: contain;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(15,23,42,.72);
      box-shadow: 0 24px 90px rgba(0,0,0,.55);
    }

    .image-lightbox-caption {
      max-width: min(96vw, 1220px);
      color: #cbd5e1;
      font-size: .78rem;
      line-height: 1.35;
      text-align: center;
      overflow-wrap: anywhere;
    }


    .image-lightbox-close {
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 161;
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(15,23,42,.34);
      color: rgba(226,232,240,.88);
      font-size: 22px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      box-shadow: none;
      backdrop-filter: blur(6px);
    }

    .image-lightbox-close:hover,
    .image-lightbox-close:focus-visible {
      background: rgba(15,23,42,.58);
      color: #ffffff;
      border-color: rgba(255,255,255,.3);
      outline: none;
    }

    .image-lightbox-edit {
      position: fixed;
      top: 18px;
      right: 62px;
      z-index: 161;
      min-height: 34px;
      height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(15,23,42,.34);
      color: rgba(226,232,240,.9);
      font-size: .76rem;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      box-shadow: none;
      backdrop-filter: blur(6px);
    }

    .image-lightbox-edit:hover,
    .image-lightbox-edit:focus-visible {
      background: rgba(15,23,42,.58);
      color: #ffffff;
      border-color: rgba(255,255,255,.3);
      outline: none;
    }

    .image-editor {
      position: fixed;
      inset: 0;
      z-index: 190;
      padding: 18px;
      background: rgba(2,6,23,.9);
      backdrop-filter: blur(8px);
      display: grid;
      place-items: center;
    }

    .editor-shell {
      width: min(1380px, 100%);
      max-height: 94vh;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      gap: 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: #111827;
      box-shadow: 0 24px 90px rgba(0,0,0,.58);
      overflow: hidden;
    }

    .editor-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 15px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.72);
    }

    .editor-head h3 {
      margin: 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: .98rem;
    }

    .editor-close {
      width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      border-radius: 999px;
      color: var(--text);
      background: rgba(148,163,184,.14);
      border: 1px solid rgba(148,163,184,.2);
      font-size: 20px;
      font-weight: 500;
    }

    .editor-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.42);
    }

    .editor-toolbar button,
    .editor-footer button {
      min-height: 32px;
      padding: 7px 10px;
      border-radius: 9px;
      font-size: .75rem;
    }

    .editor-toolbar button.is-active {
      background: rgba(56,189,248,.24);
      color: #e0f2fe;
      border: 1px solid rgba(56,189,248,.38);
    }

    .editor-control {
      display: inline-grid;
      grid-template-columns: auto 92px auto;
      align-items: center;
      gap: 6px;
      color: #cbd5e1;
      font-size: .72rem;
      line-height: 1;
    }

    .editor-control input[type="range"] {
      width: 92px;
    }

    .editor-control input[type="color"] {
      width: 32px;
      height: 28px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid rgba(148,163,184,.3);
      background: transparent;
    }

    .editor-control-number {
      grid-template-columns: auto 84px;
    }

    .editor-control-number input[type="number"] {
      width: 84px;
      border: 1px solid rgba(148,163,184,.26);
      background: rgba(15,23,42,.76);
      color: var(--text);
      border-radius: 8px;
      padding: 5px 8px;
      font: inherit;
      font-size: .74rem;
      min-width: 0;
    }

    .editor-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #cbd5e1;
      font-size: .72rem;
      line-height: 1.2;
      user-select: none;
    }

    .editor-check input {
      width: 14px;
      height: 14px;
      accent-color: var(--accent);
      margin: 0;
    }

    .editor-canvas-wrap {
      min-height: 0;
      overflow: auto;
      display: grid;
      place-items: center;
      padding: 14px;
      background:
        linear-gradient(45deg, rgba(148,163,184,.10) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148,163,184,.10) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148,163,184,.10) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.10) 75%);
      background-size: 18px 18px;
      background-position: 0 0, 0 9px, 9px -9px, -9px 0px;
    }

    #editorCanvas {
      display: block;
      max-width: 100%;
      max-height: 62vh;
      width: auto;
      height: auto;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(15,23,42,.78);
      box-shadow: 0 18px 60px rgba(0,0,0,.42);
      touch-action: none;
    }

    #editorCanvas.editor-canvas-crop { cursor: crosshair; }
    #editorCanvas.editor-canvas-paint { cursor: crosshair; }

    .editor-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 13px;
      border-top: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.62);
    }

    .editor-status {
      min-width: 0;
      color: var(--muted);
      font-size: .76rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .editor-footer-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    @media (max-width: 900px) {
      .editor-control {
        grid-template-columns: 1fr;
        gap: 5px;
      }

      .editor-control input[type="range"] {
        width: 130px;
      }

      .editor-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .editor-footer-actions {
        justify-content: flex-start;
      }
    }


    .stats-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 0 8px;
      color: var(--muted);
      font-size: .76rem;
      line-height: 1.35;
    }

    .stats-pagination.is-single-page {
      justify-content: flex-start;
    }

    .stats-page-info {
      min-width: 0;
      text-align: center;
    }

    .stats-page-btn {
      min-height: 30px;
      padding: 5px 10px;
      white-space: nowrap;
    }

    .stats-page-btn:disabled {
      opacity: .42;
      cursor: not-allowed;
      filter: grayscale(.45);
    }

    .stats-table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      max-width: 100%;
      border: 1px solid rgba(148,163,184,.16);
      border-radius: 12px;
      background: rgba(15,23,42,.42);
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }

    .stats-table {
      width: 830px;
      min-width: 830px;
      max-width: none;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .stats-table thead,
    .stats-table tbody {
      display: table-header-group;
      width: auto;
    }

    .stats-table tbody {
      display: table-row-group;
    }

    .stats-table tr {
      display: table-row;
      width: auto;
      border-bottom: 0;
    }

    .stats-table th,
    .stats-table td {
      display: table-cell;
      padding: 3px 5px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      font-size: .56rem;
      line-height: 1.1;
      text-align: left;
      white-space: nowrap;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      transform: none !important;
      font-variant-numeric: tabular-nums;
    }

    .stats-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      color: #cbd5e1;
      text-transform: uppercase;
      letter-spacing: .015em;
      font-size: .48rem;
      background: rgba(17,24,39,.94);
    }

    .stats-table th:nth-child(1),
    .stats-table td:nth-child(1) { width: 82px; }

    .stats-table th:nth-child(2),
    .stats-table td:nth-child(2) { width: 72px; text-align: center; }

    .stats-table th:nth-child(3),
    .stats-table td:nth-child(3) { width: 44px; text-align: right; }

    .stats-table th:nth-child(4),
    .stats-table td:nth-child(4) { width: 88px; text-align: right; }

    .stats-table th:nth-child(5),
    .stats-table td:nth-child(5) { width: 132px; text-align: right; }

    .stats-table th:nth-child(6),
    .stats-table td:nth-child(6) { width: 66px; text-align: right; }

    .stats-table th:nth-child(7),
    .stats-table td:nth-child(7) { width: 58px; text-align: right; }

    .stats-table th:nth-child(8),
    .stats-table td:nth-child(8) { width: 56px; text-align: center; }

    .stats-table th:nth-child(9),
    .stats-table td:nth-child(9) { width: 82px; text-align: center; }

    .stats-table th:nth-child(10),
    .stats-table td:nth-child(10) { width: 70px; text-align: center; }

    .stats-table tr:last-child td {
      border-bottom: 0;
    }

    .stats-rating {
      display: inline-flex;
      gap: 0;
      color: #fde68a;
      font-size: .62rem;
      line-height: 1;
      letter-spacing: -.05em;
      white-space: nowrap;
    }

    .compare-topbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      margin: 0 0 12px;
      flex-wrap: wrap;
    }

    .compare-topbar .zoom-control {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      margin: 0;
      flex: 0 1 250px;
      min-width: 210px;
      max-width: 250px;
      font-size: .78rem;
    }

    .compare-topbar .zoom-control input {
      width: 170px;
      max-width: 170px;
      flex: 0 1 170px;
    }

    .compare-topbar .zoom-value {
      display: inline-block;
      min-width: 38px;
      text-align: right;
      color: var(--text);
      font-weight: 700;
      font-size: .78rem;
    }

    .compare-rating {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      color: var(--muted);
      font-size: .78rem;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    @media (max-width: 560px) {
      .compare-topbar {
        justify-content: flex-start;
        gap: 10px;
      }

      .compare-topbar .zoom-control {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        justify-content: flex-start;
      }

      .compare-topbar .zoom-control input {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
      }
    }

    .rating-control {
      display: inline-flex;
      gap: 2px;
      align-items: center;
    }

    .rating-star {
      min-height: auto;
      padding: 0 1px;
      border: 0;
      background: transparent;
      color: rgba(253,230,138,.38);
      font-size: 1.02rem;
      line-height: 1;
      cursor: pointer;
    }

    .rating-star:hover,
    .rating-star.is-active {
      color: #fde68a;
      background: transparent;
    }

    .stats-message {
      color: var(--muted);
      font-size: .80rem;
      line-height: 1.45;
      padding: 8px 0;
    }


    .stats-admin-form {
      display: grid;
      gap: 10px;
      max-width: 520px;
    }

    .stats-admin-label {
      color: #e0f2fe;
      font-size: .84rem;
      font-weight: 700;
    }

    .stats-admin-input {
      width: 100%;
      min-height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(125,211,252,.28);
      background: rgba(15,23,42,.86);
      color: #f8fafc;
      padding: 10px 12px;
      outline: none;
    }

    .stats-admin-input:focus {
      border-color: rgba(34,211,238,.78);
      box-shadow: 0 0 0 3px rgba(34,211,238,.14);
    }

    .stats-admin-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding-top: 4px;
    }

    .stats-admin-hint,
    .stats-admin-message {
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.45;
    }

    .stats-admin-message.is-error {
      color: #fecaca;
    }

/* Lokales Hintergrundbild im Datei-Ablegen-Bereich */
.dropzone {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  background-image:
    linear-gradient(90deg, rgba(3, 14, 28, 0.40), rgba(3, 14, 28, 0.12)),
    url("../layouts/bild_unterstuetzt.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(45, 212, 255, 0.34);
}

.dropzone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, 0.10);
  pointer-events: none;
  z-index: 0;
}

.dropzone > * {
  position: relative;
  z-index: 1;
}

.dropzone strong,
.dropzone span {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

.dropzone.dragover {
  background-image:
    linear-gradient(90deg, rgba(3, 14, 28, 0.22), rgba(3, 14, 28, 0.04)),
    url("../layouts/bild_unterstuetzt.jpg");
  border-color: rgba(34, 211, 238, 0.85);
}


.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* Hero-Banner als Uploadfeld */
.hero-dropzone {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 10 / 3;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background-color: #06111f;
  background-image: url("../layouts/bild_unterstuetzt.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255,255,255,0.03);
  cursor: pointer;
}

.hero-dropzone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 11, 20, 0.04), rgba(4, 11, 20, 0.06));
  pointer-events: none;
}

.hero-dropzone::after {
  content: "Klicken oder Dateien hier ablegen · max. 30 Bilder";
  position: absolute;
  left: 22px;
  bottom: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(229, 246, 255, 0.96);
  background: rgba(3, 10, 18, 0.58);
  border: 1px solid rgba(56, 217, 255, 0.28);
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.hero-dropzone > * {
  position: static;
  z-index: auto;
}

.hero-dropzone.dragover {
  border-color: rgba(74, 232, 255, 0.86);
  box-shadow: 0 0 0 3px rgba(44, 211, 255, 0.16), 0 22px 56px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
}

.hero-dropzone.dragover::before {
  background: linear-gradient(180deg, rgba(12, 26, 42, 0.08), rgba(12, 26, 42, 0.12));
}

@media (max-width: 980px) {
  .hero-dropzone {
    aspect-ratio: 10 / 4;
    border-radius: 18px;
  }
}

@media (max-width: 640px) {
  .hero-dropzone {
    aspect-ratio: 10 / 5.2;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
  }

  .hero-dropzone::after {
    left: 14px;
    right: 14px;
    bottom: 12px;
    text-align: center;
    font-size: 0.76rem;
  }
}


/* Oberer Tool-Header mit lokalem Bannerbild */
.tool-header {
  margin: 0 0 18px;
}

.tool-header-image {
  border: 1px solid rgba(255,255,255,.08);
  width: 100%;
  aspect-ratio: 20 / 3;
  border-radius: 18px;
  background-image: url("../layouts/header-bild-komprimierer.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #07111e;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
}

@media (max-width: 900px) {
  .tool-header {
    margin-bottom: 14px;
  }

  .tool-header-image {
    border-radius: 14px;
  }
}

@media (max-width: 640px) {
  .tool-header-image {
    aspect-ratio: 20 / 4.5;
    border-radius: 12px;
    background-position: center center;
  }
}

/* Kompaktere Einstellungsbox unter dem Header */
.settings {
  padding-top: 16px;
  padding-bottom: 16px;
}

.settings-grid {
  gap: 12px;
  align-items: start;
}

.setting {
  gap: 5px;
  margin-bottom: 10px;
}

.setting label {
  margin-bottom: 3px;
}

.setting input,
.setting select,
.setting textarea {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.setting textarea {
  min-height: 58px;
}

.switch-card {
  padding: 10px 12px;
  margin-bottom: 10px;
}

.switch-card .check {
  gap: 9px;
}

.switch-card strong {
  margin-bottom: 2px;
}

.hint {
  margin-top: 4px;
  line-height: 1.25;
}

.metadata-fields {
  gap: 8px;
  margin-top: 10px;
}

.inline-grid {
  gap: 8px;
}

.engine-version-badge {
  top: 10px;
  right: 12px;
}

/* Feinschliff: Header-Border wie Einstellungsbox + Box 2 kompakter */
.tool-header-image {
  border: 1px solid rgba(255,255,255,.08);
}

.settings {
  padding-top: 12px;
  padding-bottom: 12px;
}

.settings-grid {
  gap: 8px;
}

.setting {
  gap: 3px;
  margin-bottom: 7px;
}

.setting label {
  margin-bottom: 1px;
  font-size: 0.82rem;
}

.setting input,
.setting select,
.setting textarea {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.82rem;
}

.setting textarea {
  min-height: 46px;
}

.switch-card {
  padding: 8px 10px;
  margin-bottom: 7px;
}

.switch-card .check {
  gap: 7px;
}

.switch-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.switch-card strong {
  margin-bottom: 1px;
  font-size: 0.84rem;
}

.switch-card span {
  line-height: 1.22;
  font-size: 0.78rem;
}

.hint {
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.18;
}

.metadata-fields {
  gap: 6px;
  margin-top: 7px;
}

.inline-grid {
  gap: 6px;
}

#quality,
#watermarkOpacity,
#watermarkSize,
#watermarkMargin {
  min-height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.keep-smaller-card {
  margin-top: 6px;
}

.engine-version-badge {
  top: 8px;
  right: 10px;
  padding: 4px 8px;
  font-size: 0.72rem;
}

/* Header-Engine-Info und kompakte, einheitliche Checkbox-Boxen */
.tool-header-image {
  position: relative;
}

.header-engine-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(230, 247, 255, 0.96);
  background: rgba(2, 8, 18, 0.62);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.24);
  backdrop-filter: blur(6px);
}

.header-phase-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  right: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(230, 247, 255, 0.96);
  background: rgba(2, 8, 18, 0.62);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.24);
  backdrop-filter: blur(6px);
}

.settings .engine-version-badge:not(.header-engine-badge) {
  display: none;
}

.settings-grid > div {
  display: flex;
  flex-direction: column;
}

.switch-card {
  min-height: 74px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
}

.switch-card .check {
  width: 100%;
  align-items: center;
  gap: 7px;
}

.switch-card .check > span {
  display: block;
}

.switch-card strong {
  display: block;
}

#removeMetadataCard,
.keep-smaller-card,
.settings-grid > div:nth-child(2) > .switch-card,
.settings-grid > div:nth-child(3) > .switch-card:first-child {
  min-height: 74px;
}

.switch-card input[type="checkbox"] {
  flex: 0 0 auto;
}

.keep-smaller-card {
  margin-top: 7px;
}

@media (min-width: 900px) {
  .settings-grid {
    align-items: stretch;
  }

  .settings-grid > div {
    min-height: 100%;
  }
}

@media (max-width: 640px) {
  .header-engine-badge {
    top: 7px;
    right: 8px;
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.66rem;
  }

  .header-phase-badge {
    top: 7px;
    left: 8px;
    right: auto;
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.66rem;
  }

  .switch-card,
  #removeMetadataCard,
  .keep-smaller-card,
  .settings-grid > div:nth-child(2) > .switch-card,
  .settings-grid > div:nth-child(3) > .switch-card:first-child {
    min-height: 68px;
  }
}

/* Feinschliff: obere Checkbox-Boxen kleiner, mehr Abstand zum Qualitätsregler, Tabelle erst bei Dateien */
.table-card.hidden {
  display: none;
}

.settings-grid > div:nth-child(2),
.settings-grid > div:nth-child(3) {
  padding-top: 8px;
}

.switch-card {
  min-height: 60px;
  padding: 6px 9px;
}

#removeMetadataCard,
.keep-smaller-card,
.settings-grid > div:nth-child(2) > .switch-card,
.settings-grid > div:nth-child(3) > .switch-card:first-child {
  min-height: 60px;
}

.switch-card .check {
  gap: 6px;
}

.switch-card input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

.switch-card strong {
  font-size: 0.82rem;
}

.switch-card span {
  font-size: 0.66rem;
  line-height: 1.16;
}

.keep-smaller-card {
  margin-top: 6px;
}

@media (max-width: 640px) {
  .settings-grid > div:nth-child(2),
  .settings-grid > div:nth-child(3) {
    padding-top: 0;
  }

  .switch-card,
  #removeMetadataCard,
  .keep-smaller-card,
  .settings-grid > div:nth-child(2) > .switch-card,
  .settings-grid > div:nth-child(3) > .switch-card:first-child {
    min-height: 58px;
  }
}

/* Fix: Upload-Hintergrundbild darf beim Dragover nicht größer wirken */
.hero-dropzone,
.hero-dropzone:hover,
.hero-dropzone:focus-within,
.hero-dropzone.dragover {
  aspect-ratio: 20 / 6;
  background-size: 100% 100%;
  background-position: center center;
  transform: none;
}

.hero-dropzone::before,
.hero-dropzone.dragover::before {
  background: linear-gradient(180deg, rgba(4, 11, 20, 0.03), rgba(4, 11, 20, 0.05));
}

.hero-dropzone.dragover {
  border-color: rgba(74, 232, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(44, 211, 255, 0.12), 0 18px 46px rgba(0, 0, 0, 0.24);
}

@media (max-width: 980px) {
  .hero-dropzone,
  .hero-dropzone:hover,
  .hero-dropzone:focus-within,
  .hero-dropzone.dragover {
    aspect-ratio: 20 / 7;
    background-size: 100% 100%;
  }
}

@media (max-width: 640px) {
  .hero-dropzone,
  .hero-dropzone:hover,
  .hero-dropzone:focus-within,
  .hero-dropzone.dragover {
    aspect-ratio: 20 / 9;
    background-size: 100% 100%;
  }
}

/* 2px Kantenschliff-Border für beide Hintergrundbild-Boxen */
.tool-header-image,
.hero-dropzone {
  border: 2px solid rgba(78, 220, 255, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(31, 182, 255, 0.10),
    0 18px 46px rgba(0, 0, 0, 0.24);
}

.tool-header-image {
  border-color: rgba(78, 220, 255, 0.34);
}

.hero-dropzone {
  border-color: rgba(78, 220, 255, 0.42);
}

.hero-dropzone.dragover {
  border: 2px solid rgba(88, 242, 255, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 28px rgba(31, 182, 255, 0.14),
    0 0 0 2px rgba(44, 211, 255, 0.12),
    0 18px 46px rgba(0, 0, 0, 0.24);
}

/* Feinschliff: obere Haken-Boxen nur horizontal etwas schmaler + Infotext kleiner */
#removeMetadataCard,
.settings-grid > div:nth-child(2) > .switch-card,
.settings-grid > div:nth-child(3) > .switch-card:first-child,
.keep-smaller-card {
  width: calc(100% - 18px);
  max-width: 340px;
  box-sizing: border-box;
}

#removeMetadataCard > .check > span,
.settings-grid > div:nth-child(2) > .switch-card > .check > span,
.settings-grid > div:nth-child(3) > .switch-card:first-child > .check > span,
.keep-smaller-card > .check > span {
  font-size: 0.60rem;
  line-height: 1.18;
}

#removeMetadataCard > .check > span > strong,
.settings-grid > div:nth-child(2) > .switch-card > .check > span > strong,
.settings-grid > div:nth-child(3) > .switch-card:first-child > .check > span > strong,
.keep-smaller-card > .check > span > strong {
  font-size: 0.82rem;
  line-height: 1.16;
}

@media (max-width: 640px) {
  #removeMetadataCard,
  .settings-grid > div:nth-child(2) > .switch-card,
  .settings-grid > div:nth-child(3) > .switch-card:first-child,
  .keep-smaller-card {
    width: 100%;
    max-width: none;
  }
}

/* Feinschliff Nutzerwunsch: Metadaten- und Neue-Info-Box 30px nach rechts */
#removeMetadataCard,
.settings-grid > div:nth-child(2) > .switch-card {
  margin-left: 30px;
}

@media (max-width: 980px) {
  #removeMetadataCard,
  .settings-grid > div:nth-child(2) > .switch-card {
    width: calc(100% - 48px);
    max-width: none;
  }
}

@media (max-width: 640px) {
  #removeMetadataCard,
  .settings-grid > div:nth-child(2) > .switch-card {
    width: 100%;
    margin-left: 0;
  }
}

/* Korrektur Nutzerwunsch: Original-behalten-Box explizit wie die anderen oberen Haken-Boxen behandeln */
.settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card {
  width: calc(100% - 18px) !important;
  max-width: 340px !important;
  box-sizing: border-box;
}

#keepSmaller + span {
  font-size: 0.60rem !important;
  line-height: 1.18 !important;
}

#keepSmaller + span > strong {
  font-size: 0.82rem !important;
  line-height: 1.16 !important;
}

@media (max-width: 640px) {
  .settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Korrektur Nutzerwunsch: 4 Haken-Boxen exakt ausrichten + Infotext 1px größer */
.settings-grid > div:nth-child(2) > .switch-card:nth-of-type(2) {
  margin-top: 6px;
}

#removeMetadataCard > .check > span,
.settings-grid > div:nth-child(2) > .switch-card:nth-of-type(2) > .check > span,
.settings-grid > div:nth-child(3) > .switch-card:first-child > .check > span,
.settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card > .check > span,
#keepSmaller + span {
  font-size: 0.66rem !important;
  line-height: 1.18 !important;
}

#removeMetadataCard > .check > span > strong,
.settings-grid > div:nth-child(2) > .switch-card:nth-of-type(2) > .check > span > strong,
.settings-grid > div:nth-child(3) > .switch-card:first-child > .check > span > strong,
.settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card > .check > span > strong,
#keepSmaller + span > strong {
  font-size: 0.82rem !important;
  line-height: 1.16 !important;
}

@media (max-width: 640px) {
  .settings-grid > div:nth-child(2) > .switch-card:nth-of-type(2) {
    margin-top: 0;
  }
}

/* Feinschliff Nutzerwunsch: Eingabefelder bei "Neue Info einsetzen" volle Boxbreite nutzen */
#metadataFields {
  width: 100%;
  align-self: stretch;
}

#metadataFields .setting,
#metadataFields input,
#metadataFields textarea {
  width: 100%;
}

@media (max-width: 640px) {
  #metadataFields {
    width: 100%;
    align-self: stretch;
  }
}

/* Mobile-Optimierung: Header, Uploadbox, Einstellungsbereich und Aktionsbuttons */
@media (max-width: 760px) {
  main {
    width: min(100% - 18px, 720px);
    padding-top: 12px;
    padding-bottom: 24px;
  }

  .tool-header {
    margin-bottom: 10px;
  }

  .tool-header-image {
    aspect-ratio: 20 / 5.8;
    border-radius: 14px;
    background-size: cover;
    background-position: center center;
  }

  .header-engine-badge,
  .header-phase-badge {
    top: 7px;
    min-height: 19px;
    padding: 3px 7px;
    font-size: 0.57rem;
    letter-spacing: 0.01em;
    box-shadow: 0 5px 14px rgba(0,0,0,0.22);
    backdrop-filter: blur(5px);
  }

  .header-engine-badge {
    right: 7px;
  }

  .header-phase-badge {
    left: 7px;
  }

  .settings {
    padding: 12px 10px;
    margin-bottom: 14px;
    border-radius: 14px;
  }

  .settings-grid {
    gap: 10px;
  }

  .settings-grid > div {
    gap: 0;
  }

  .setting {
    margin-bottom: 9px;
  }

  .setting label {
    font-size: 0.78rem;
  }

  .setting input,
  .setting select,
  .setting textarea {
    min-height: 32px;
    font-size: 0.78rem;
    padding: 6px 8px;
  }

  .switch-card,
  #removeMetadataCard,
  .keep-smaller-card,
  .settings-grid > div:nth-child(2) > .switch-card,
  .settings-grid > div:nth-child(3) > .switch-card:first-child,
  .settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    margin-left: 0 !important;
    padding: 9px 10px;
    border-radius: 13px;
  }

  .settings-grid > div:nth-child(2) > .switch-card:nth-of-type(2),
  .settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card {
    margin-top: 7px;
  }

  .switch-card .check {
    gap: 8px;
    align-items: flex-start;
  }

  .switch-card input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 1px;
  }

  #removeMetadataCard > .check > span,
  .settings-grid > div:nth-child(2) > .switch-card:nth-of-type(2) > .check > span,
  .settings-grid > div:nth-child(3) > .switch-card:first-child > .check > span,
  .settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card > .check > span,
  #keepSmaller + span {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  #removeMetadataCard > .check > span > strong,
  .settings-grid > div:nth-child(2) > .switch-card:nth-of-type(2) > .check > span > strong,
  .settings-grid > div:nth-child(3) > .switch-card:first-child > .check > span > strong,
  .settings-grid > div:nth-child(3) > .switch-card.keep-smaller-card > .check > span > strong,
  #keepSmaller + span > strong {
    font-size: 0.82rem !important;
    line-height: 1.18 !important;
  }

  .metadata-fields {
    margin-top: 9px;
    gap: 7px;
  }

  .hero-dropzone,
  .hero-dropzone:hover,
  .hero-dropzone:focus-within,
  .hero-dropzone.dragover {
    aspect-ratio: 20 / 9.2;
    border-radius: 14px;
    background-size: cover;
    background-position: center center;
  }

  .hero-dropzone::after {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 6px 9px;
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: normal;
  }

  .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 14px;
  }

  .actions button,
  .actions .button {
    width: 100%;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.15;
    gap: 4px;
    white-space: normal;
    text-align: center;
  }

  .actions button .material-symbols-rounded,
  .actions .button .material-symbols-rounded {
    font-size: 1em;
  }

  .table-card {
    border-radius: 14px;
  }
}

@media (max-width: 430px) {
  main {
    width: calc(100% - 12px);
    padding-top: 8px;
  }

  .tool-header-image {
    aspect-ratio: 20 / 6.7;
    border-radius: 12px;
  }

  .header-engine-badge,
  .header-phase-badge {
    top: 6px;
    min-height: 17px;
    padding: 2px 6px;
    font-size: 0.52rem;
  }

  .header-engine-badge {
    right: 6px;
  }

  .header-phase-badge {
    left: 6px;
  }

  .settings {
    padding: 10px 8px;
  }

  .hero-dropzone,
  .hero-dropzone:hover,
  .hero-dropzone:focus-within,
  .hero-dropzone.dragover {
    aspect-ratio: 20 / 10.5;
    border-radius: 12px;
  }

  .actions {
    gap: 7px;
  }

  .actions button,
  .actions .button {
    min-height: 32px;
    padding: 6px 7px;
    border-radius: 9px;
    font-size: 0.68rem;
  }
}


/* Breite/Höhe-Eingaben für Bildgröße */
.dimension-setting {
  gap: 8px;
}

.dimension-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.dimension-field {
  position: relative;
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .015em;
}

.dimension-field input {
  width: 100%;
  min-width: 0;
  padding-right: 34px;
  text-align: center;
}

.dimension-field::after {
  content: "px";
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  color: rgba(203, 213, 225, 0.72);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1;
  pointer-events: none;
}

.dimension-field input::placeholder {
  color: rgba(148, 163, 184, 0.72);
  opacity: 1;
}

.dimension-field:has(input:disabled)::after {
  color: rgba(148, 163, 184, 0.48);
}

.dimension-proportions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  background: rgba(15,23,42,.34);
  color: rgba(203,213,225,.88);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.2;
}

.dimension-proportions input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

@media (max-width: 520px) {
  .dimension-grid {
    gap: 7px;
  }

  .dimension-proportions {
    font-size: .72rem;
    padding: 6px 7px;
  }
}

/* Feinschliff: Border der Header-/Upload-Bildboxen an Bilderleiste angleichen */
.tool-header-image,
.hero-dropzone {
  border-color: rgba(78, 220, 255, 0.46);
}

/* Zahleneingaben Breite/Höhe: Browser-Pfeile ausblenden */
#maxWidth,
#maxHeight {
  appearance: textfield;
  -moz-appearance: textfield;
}

#maxWidth::-webkit-outer-spin-button,
#maxWidth::-webkit-inner-spin-button,
#maxHeight::-webkit-outer-spin-button,
#maxHeight::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Höhe-Feld bei automatischen Proportionen deaktiviert darstellen */
#maxHeight:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  background: rgba(148, 163, 184, 0.10);
  color: rgba(226, 232, 240, 0.72);
}

/* Qualitätsregler: vertiefter Neo-Schieberegler */
#quality {
  --quality-glow: rgba(56, 189, 248, 0.46);
  --quality-glow-strong: rgba(34, 211, 238, 0.82);
  --quality-track-dark: rgba(3, 10, 18, 0.84);
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 34px;
  margin: 6px 0 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    radial-gradient(circle at 18% 50%, rgba(56, 189, 248, 0.16), transparent 32%),
    var(--quality-track-dark);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.46),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#quality:hover,
#quality:focus-visible,
#quality:active {
  border-color: rgba(56, 189, 248, 0.46);
  box-shadow:
    inset 0 2px 9px rgba(0, 0, 0, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 3px rgba(56, 189, 248, 0.10),
    0 0 22px rgba(34, 211, 238, 0.18);
}

#quality::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.70), rgba(99, 102, 241, 0.50)),
    rgba(15, 23, 42, 0.68);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.48),
    0 0 12px rgba(34, 211, 238, 0.22);
}

#quality::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.48);
}

#quality::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.74), rgba(99, 102, 241, 0.54));
  box-shadow: 0 0 13px rgba(34, 211, 238, 0.24);
}

#quality::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.96), rgba(125, 249, 255, 0.86) 28%, rgba(34, 211, 238, 0.44) 58%, rgba(15, 23, 42, 0.96) 100%);
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.10),
    0 0 16px var(--quality-glow),
    0 4px 10px rgba(0, 0, 0, 0.46);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#quality::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.96), rgba(125, 249, 255, 0.86) 28%, rgba(34, 211, 238, 0.44) 58%, rgba(15, 23, 42, 0.96) 100%);
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.10),
    0 0 16px var(--quality-glow),
    0 4px 10px rgba(0, 0, 0, 0.46);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#quality:hover::-webkit-slider-thumb,
#quality:focus-visible::-webkit-slider-thumb,
#quality:active::-webkit-slider-thumb {
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 0 6px rgba(34, 211, 238, 0.16),
    0 0 25px var(--quality-glow-strong),
    0 4px 12px rgba(0, 0, 0, 0.50);
}

#quality:hover::-moz-range-thumb,
#quality:focus-visible::-moz-range-thumb,
#quality:active::-moz-range-thumb {
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 0 6px rgba(34, 211, 238, 0.16),
    0 0 25px var(--quality-glow-strong),
    0 4px 12px rgba(0, 0, 0, 0.50);
}

@media (max-width: 520px) {
  #quality {
    height: 30px;
    margin-top: 4px;
    margin-bottom: 6px;
    padding-inline: 10px;
  }

  #quality::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -6px;
  }

  #quality::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}


/* Demo 0.48: Qualitäts-Prüfung als Schieberegler im Qualitätsregler-Stil. */
#qualityScanLevel {
  --quality-glow: rgba(56, 189, 248, 0.42);
  --quality-glow-strong: rgba(34, 211, 238, 0.76);
  --quality-track-dark: rgba(3, 10, 18, 0.84);
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 34px;
  margin: 6px 0 3px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    radial-gradient(circle at 18% 50%, rgba(56, 189, 248, 0.16), transparent 32%),
    var(--quality-track-dark);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.46),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#qualityScanLevel:hover,
#qualityScanLevel:focus-visible,
#qualityScanLevel:active {
  border-color: rgba(56, 189, 248, 0.46);
  box-shadow:
    inset 0 2px 9px rgba(0, 0, 0, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 3px rgba(56, 189, 248, 0.10),
    0 0 22px rgba(34, 211, 238, 0.18);
}

#qualityScanLevel::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.70), rgba(99, 102, 241, 0.50)),
    rgba(15, 23, 42, 0.68);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.48),
    0 0 12px rgba(34, 211, 238, 0.22);
}

#qualityScanLevel::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.48);
}

#qualityScanLevel::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.74), rgba(99, 102, 241, 0.54));
  box-shadow: 0 0 13px rgba(34, 211, 238, 0.24);
}

#qualityScanLevel::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.96), rgba(125, 249, 255, 0.86) 28%, rgba(34, 211, 238, 0.44) 58%, rgba(15, 23, 42, 0.96) 100%);
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.10),
    0 0 16px var(--quality-glow),
    0 4px 10px rgba(0, 0, 0, 0.46);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#qualityScanLevel::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.96), rgba(125, 249, 255, 0.86) 28%, rgba(34, 211, 238, 0.44) 58%, rgba(15, 23, 42, 0.96) 100%);
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.10),
    0 0 16px var(--quality-glow),
    0 4px 10px rgba(0, 0, 0, 0.46);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#qualityScanLevel:hover::-webkit-slider-thumb,
#qualityScanLevel:focus-visible::-webkit-slider-thumb,
#qualityScanLevel:active::-webkit-slider-thumb {
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 0 6px rgba(34, 211, 238, 0.16),
    0 0 25px var(--quality-glow-strong),
    0 4px 12px rgba(0, 0, 0, 0.50);
}

#qualityScanLevel:hover::-moz-range-thumb,
#qualityScanLevel:focus-visible::-moz-range-thumb,
#qualityScanLevel:active::-moz-range-thumb {
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 0 6px rgba(34, 211, 238, 0.16),
    0 0 25px var(--quality-glow-strong),
    0 4px 12px rgba(0, 0, 0, 0.50);
}

.quality-scan-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: -1px 2px 8px;
  color: rgba(203, 213, 225, 0.64);
  font-size: 0.63rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.quality-scan-scale span:nth-child(2) {
  text-align: center;
}

.quality-scan-scale span:nth-child(3) {
  text-align: right;
}

.quality-scan-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 520px) {
  #qualityScanLevel {
    height: 30px;
    margin-top: 4px;
    margin-bottom: 2px;
    padding-inline: 10px;
  }

  #qualityScanLevel::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -6px;
  }

  #qualityScanLevel::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

/* UX-/SEO-Feinschliff: Einführung, Vertrauen und Basis/Erweitert-Struktur */
.tool-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 14px;
  align-items: stretch;
  margin: 0 0 18px;
}

.tool-copy-main,
.tool-trust-box {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(31, 41, 55, .72), rgba(17, 24, 39, .82));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .20), inset 0 0 0 1px rgba(255,255,255,.025);
}

.tool-copy-main {
  padding: 15px 18px;
}

.tool-copy h1 {
  margin: 0 0 6px;
  color: #f8fafc;
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.tool-copy p {
  margin: 0;
  max-width: 860px;
  color: #cbd5e1;
  font-size: .88rem;
  line-height: 1.48;
}

.tool-trust-box {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px 16px;
  border-color: rgba(34, 197, 94, .24);
  background:
    radial-gradient(circle at 12% 20%, rgba(34, 197, 94, .13), transparent 12rem),
    linear-gradient(180deg, rgba(20, 83, 45, .30), rgba(17, 24, 39, .86));
}

.tool-trust-box strong {
  color: #bbf7d0;
  font-size: .92rem;
  line-height: 1.15;
}

.tool-trust-box span {
  color: #d1fae5;
  font-size: .72rem;
  line-height: 1.36;
}

.settings-kicker {
  margin: 0 0 10px;
  color: #bae6fd;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.settings-grid-modern {
  grid-template-columns: minmax(260px, .85fr) minmax(0, 2.15fr);
  gap: 14px;
  align-items: stretch;
}

.settings-primary {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 16px;
  background: rgba(15, 23, 42, .28);
}

.field-hint {
  color: rgba(203, 213, 225, .72);
  font-size: .68rem;
  line-height: 1.25;
}

.settings-advanced {
  min-width: 0;
  border: 1px solid rgba(56, 189, 248, .16);
  border-radius: 16px;
  background: rgba(15, 23, 42, .22);
  overflow: hidden;
}

.settings-advanced > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 13px;
  color: #e0f2fe;
  background: rgba(15, 23, 42, .48);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  cursor: pointer;
  user-select: none;
}

.settings-advanced > summary::-webkit-details-marker {
  display: none;
}

.settings-advanced > summary::after {
  content: "⌄";
  flex: 0 0 auto;
  color: rgba(186, 230, 253, .82);
  font-size: 1rem;
  line-height: 1;
  transition: transform .18s ease;
}

.settings-advanced[open] > summary::after {
  transform: rotate(180deg);
}

.settings-advanced > summary span {
  font-size: .86rem;
  font-weight: 850;
  line-height: 1.1;
}

.settings-advanced > summary small {
  margin-left: auto;
  color: rgba(203, 213, 225, .70);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.15;
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.advanced-col {
  min-width: 0;
}

.settings-advanced .switch-card,
.settings-advanced #removeMetadataCard,
.settings-advanced .keep-smaller-card,
.settings-advanced .settings-grid > div:nth-child(2) > .switch-card,
.settings-advanced .settings-grid > div:nth-child(3) > .switch-card:first-child {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

.settings-advanced .switch-card + .switch-card,
.settings-advanced .keep-smaller-card {
  margin-top: 8px;
}

.settings-advanced .switch-card > .check,
.settings-advanced .keep-smaller-card > .check {
  align-items: flex-start;
}

/* Material-Icon-Fallback: keine rohen Ligaturwörter anzeigen, falls Fonts blockiert werden. */
html.icons-pending .material-symbols-rounded {
  width: 1.12em;
  min-width: 1.12em;
  visibility: hidden;
}

html.icons-fallback .material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.12em;
  min-width: 1.12em;
  height: 1.12em;
  overflow: hidden;
  color: currentColor;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0 !important;
  line-height: 1;
  font-feature-settings: normal;
  -webkit-font-feature-settings: normal;
  visibility: visible;
}

html.icons-fallback .material-symbols-rounded::before {
  content: attr(data-fallback);
  display: inline-block;
  font-size: .92rem;
  font-weight: 850;
  line-height: 1;
}

html.icons-fallback .material-symbols-rounded:not([data-fallback])::before {
  content: "•";
}

@media (max-width: 980px) {
  .tool-copy,
  .settings-grid-modern,
  .advanced-grid {
    grid-template-columns: 1fr;
  }

  .settings-advanced > summary {
    align-items: flex-start;
  }

  .settings-advanced > summary small {
    display: none;
  }
}

@media (max-width: 760px) {
  .tool-copy {
    gap: 10px;
    margin-bottom: 14px;
  }

  .tool-copy-main,
  .tool-trust-box {
    border-radius: 14px;
  }

  .tool-copy-main,
  .tool-trust-box,
  .settings-primary,
  .advanced-grid {
    padding: 10px;
  }

  .tool-copy h1 {
    font-size: 1rem;
  }

  .tool-copy p {
    font-size: .76rem;
    line-height: 1.38;
  }

  .tool-trust-box span {
    font-size: .68rem;
  }

  .settings-kicker {
    margin-bottom: 8px;
    font-size: .66rem;
  }

  .settings-advanced > summary {
    min-height: 38px;
    padding: 9px 10px;
  }
}

/* Fester Profi-Bereich mit Tabs statt einklappbarer Details-Box. */
.settings-advanced-tabs {
  display: block;
}

.advanced-tabs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #e0f2fe;
  background: rgba(15, 23, 42, .48);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.advanced-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.advanced-title strong {
  font-size: .86rem;
  font-weight: 850;
  line-height: 1.1;
}

.advanced-title span {
  color: rgba(203, 213, 225, .70);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.15;
}

.advanced-tabs-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 999px;
  background: rgba(2, 6, 23, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.advanced-tab {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 11px;
  color: rgba(226, 232, 240, .78);
  background: transparent;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.advanced-tab:hover,
.advanced-tab:focus-visible {
  color: #f8fafc;
  border-color: rgba(56, 189, 248, .28);
  background: rgba(14, 165, 233, .12);
  outline: none;
}

.advanced-tab.active {
  color: #f8fafc;
  border-color: rgba(56, 189, 248, .42);
  background: linear-gradient(135deg, rgba(14, 165, 233, .24), rgba(59, 130, 246, .18));
  box-shadow: 0 0 16px rgba(14, 165, 233, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.advanced-panel {
  min-width: 0;
}

.quality-pro-card {
  width: 100%;
  min-height: 100%;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 14px;
  background: rgba(15, 23, 42, .34);
  box-sizing: border-box;
}

.quality-pro-card .hint {
  margin-top: 7px;
  color: rgba(203, 213, 225, .68);
  font-size: .67rem;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .advanced-tabs-head {
    align-items: stretch;
    flex-direction: column;
  }

  .advanced-tabs-nav {
    width: 100%;
  }

  .advanced-tab {
    flex: 1 1 0;
    text-align: center;
  }
}

/* Erweiterte Einstellungen: Verlauf bis an die Oberkante ziehen und 3 Profi-Tabs sauber darstellen. */
.settings-advanced-tabs {
  background: linear-gradient(180deg, rgba(14, 165, 233, .12) 0%, rgba(15, 23, 42, .28) 78px, rgba(15, 23, 42, .22) 100%);
  background-clip: padding-box;
}

.settings-advanced-tabs .advanced-tabs-head {
  margin: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(14, 165, 233, .18) 0%, rgba(15, 23, 42, .50) 100%);
}

.advanced-tabs-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.advanced-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.quality-pro-card + .quality-pro-card {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .advanced-tabs-nav {
    justify-content: stretch;
  }
}

/* Update v0.46: Wasserzeichen ohne Untermenü, Meta-Boxen nebeneinander, Größeninfo. */
.dimension-info {
  margin: 0 0 7px;
  color: rgba(203, 213, 225, .72);
  font-size: .69rem;
  font-weight: 650;
  line-height: 1.3;
}

.metadata-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.meta-option-card {
  min-height: 100%;
}

.watermark-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
  gap: 12px;
  padding: 12px;
}

.watermark-control-card,
.watermark-preview-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 14px;
  background: rgba(15, 23, 42, .34);
  box-sizing: border-box;
}

.watermark-card-head,
.watermark-preview-title {
  display: grid;
  gap: 4px;
  margin-bottom: 11px;
}

.watermark-card-head strong,
.watermark-preview-title strong {
  color: #f8fafc;
  font-size: .84rem;
  font-weight: 850;
  line-height: 1.15;
}

.watermark-card-head span,
.watermark-preview-title span {
  color: rgba(203, 213, 225, .70);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.3;
}

.watermark-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 25% 25%, rgba(56, 189, 248, .28), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, .85), rgba(30, 41, 59, .88));
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.watermark-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 6, 23, .04), rgba(2, 6, 23, .34));
}

.watermark-placement-mark {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: min(70%, calc(100% - 16px));
  max-height: min(70%, calc(100% - 16px));
  object-fit: contain;
  transform: translate(0, 0);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .38));
  pointer-events: none;
}

.watermark-pos-top-left .watermark-placement-mark { top: var(--wm-margin, 3%); left: var(--wm-margin, 3%); }
.watermark-pos-top-center .watermark-placement-mark { top: var(--wm-margin, 3%); left: 50%; transform: translateX(-50%); }
.watermark-pos-top-right .watermark-placement-mark { top: var(--wm-margin, 3%); right: var(--wm-margin, 3%); }
.watermark-pos-center-left .watermark-placement-mark { top: 50%; left: var(--wm-margin, 3%); transform: translateY(-50%); }
.watermark-pos-center .watermark-placement-mark { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.watermark-pos-center-right .watermark-placement-mark { top: 50%; right: var(--wm-margin, 3%); transform: translateY(-50%); }
.watermark-pos-bottom-left .watermark-placement-mark { bottom: var(--wm-margin, 3%); left: var(--wm-margin, 3%); }
.watermark-pos-bottom-center .watermark-placement-mark { bottom: var(--wm-margin, 3%); left: 50%; transform: translateX(-50%); }
.watermark-pos-bottom-right .watermark-placement-mark { right: var(--wm-margin, 3%); bottom: var(--wm-margin, 3%); }

@media (max-width: 980px) {
  .metadata-grid,
  .watermark-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .watermark-layout {
    padding: 10px;
  }

  .watermark-control-card,
  .watermark-preview-card {
    padding: 10px;
  }
}

/* Update Demo 0.46: Profi-/Meta-Tabs sauber bündig und ohne angeschnittene Karten. */
.settings-advanced-tabs {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14, 165, 233, .18) 0, rgba(14, 165, 233, .10) 44px, rgba(15, 23, 42, .30) 92px, rgba(15, 23, 42, .22) 100%);
  background-origin: border-box;
  background-clip: border-box;
}

.settings-advanced-tabs .advanced-tabs-head {
  margin: 0;
  padding: 10px 12px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(180deg, rgba(14, 165, 233, .22) 0%, rgba(15, 23, 42, .50) 100%);
}

.advanced-panel {
  min-width: 0;
  overflow: hidden;
}

.advanced-grid,
.metadata-grid,
.meta-direct-grid {
  align-items: start;
}

.advanced-col {
  display: grid;
  gap: 10px;
  align-content: start;
}

.quality-pro-card,
.meta-option-card,
.keep-smaller-card {
  min-height: 0 !important;
  margin: 0 !important;
}

.quality-pro-card + .quality-pro-card,
.settings-advanced .switch-card + .switch-card,
.settings-advanced .keep-smaller-card {
  margin-top: 0 !important;
}

.meta-direct-grid {
  grid-template-columns: minmax(220px, .82fr) minmax(280px, 1.18fr);
}

.meta-clean-card,
.meta-write-card,
.watermark-control-card,
.watermark-preview-card,
.quality-pro-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.meta-write-card {
  padding: 12px;
}

.meta-write-toggle {
  margin-bottom: 10px;
}

.meta-fields-panel {
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.meta-fields-panel .setting {
  margin-bottom: 0;
}

.meta-fields-panel textarea {
  min-height: 58px;
  resize: vertical;
}

.metadata-fields-disabled {
  opacity: .52;
}

.metadata-fields-disabled input,
.metadata-fields-disabled textarea {
  filter: saturate(.72);
}

.meta-card-note {
  margin-top: 9px;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 11px;
  color: rgba(203, 213, 225, .68);
  background: rgba(2, 6, 23, .20);
  font-size: .67rem;
  font-weight: 650;
  line-height: 1.28;
}

.suffix-field {
  position: relative;
  display: block;
  margin: 0;
}

.suffix-field input {
  width: 100%;
  min-width: 0;
  padding-right: 42px;
}

.suffix-field span {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: rgba(203, 213, 225, .72);
  font-size: .72rem;
  font-weight: 800;
  pointer-events: none;
}

@media (max-width: 980px) {
  .meta-direct-grid {
    grid-template-columns: 1fr;
  }
}


/* Update Demo 0.46: Layout-Korrekturen nach Screenshot-Prüfung */
.settings-advanced-tabs {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(14, 165, 233, .26) 0, rgba(14, 165, 233, .18) 50px, rgba(15, 23, 42, .36) 98px, rgba(15, 23, 42, .24) 100%) !important;
}

.settings-advanced-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(14, 165, 233, .30) 0%, rgba(14, 165, 233, .16) 44%, rgba(15, 23, 42, .08) 100%);
  pointer-events: none;
}

.settings-advanced-tabs .advanced-tabs-head,
.settings-advanced-tabs .advanced-panel {
  position: relative;
  z-index: 1;
}

.settings-advanced-tabs .advanced-tabs-head {
  margin: -1px -1px 0;
  padding: 11px 13px 10px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(14, 165, 233, .24) 0%, rgba(15, 23, 42, .50) 100%) !important;
}

.dimension-info {
  font-weight: 400 !important;
}

#targetSizeKb {
  appearance: textfield;
  -moz-appearance: textfield;
}

#targetSizeKb::-webkit-outer-spin-button,
#targetSizeKb::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.watermark-file-setting {
  min-width: 0;
}

.watermark-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.file-picker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(15, 23, 42, .46);
  box-sizing: border-box;
}

.file-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 10px;
  color: #e0f2fe;
  background: rgba(14, 165, 233, .12);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.file-picker-button:hover,
.file-picker-button:focus-visible {
  border-color: rgba(56, 189, 248, .44);
  background: rgba(14, 165, 233, .18);
  outline: none;
}

.file-picker-name,
.watermark-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker-name {
  display: block;
  color: rgba(203, 213, 225, .72);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.2;
}

.watermark-preview {
  min-width: 0;
  overflow: hidden;
}

.watermark-name {
  flex: 1 1 auto;
}

@media (max-width: 520px) {
  .file-picker-row {
    grid-template-columns: 1fr;
  }

  .file-picker-button {
    width: 100%;
  }
}

/* Update Demo 0.46: Erweiterte Einstellungen bündig bis Oberkante + Bild-Einstellung. */
.settings-advanced-tabs {
  padding: 0 !important;
  border-color: rgba(56, 189, 248, .22) !important;
  background: linear-gradient(180deg, rgba(14, 165, 233, .24) 0, rgba(14, 165, 233, .18) 74px, rgba(15, 23, 42, .30) 128px, rgba(15, 23, 42, .22) 100%) !important;
  overflow: hidden !important;
}

.settings-advanced-tabs::before {
  inset: 0 0 auto 0 !important;
  height: 102px !important;
  border-radius: 16px 16px 0 0 !important;
  background: linear-gradient(180deg, rgba(14, 165, 233, .32) 0%, rgba(14, 165, 233, .24) 48%, rgba(14, 165, 233, .10) 100%) !important;
}

.settings-advanced-tabs .advanced-tabs-head {
  margin: 0 !important;
  padding: 12px 13px 11px !important;
  border-radius: 15px 15px 0 0 !important;
  background: linear-gradient(180deg, rgba(14, 165, 233, .30) 0%, rgba(14, 165, 233, .18) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.image-adjustment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap: 12px;
  padding: 12px;
}

.image-adjustment-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 14px;
  background: rgba(15, 23, 42, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  box-sizing: border-box;
}

.adjustment-card-head {
  display: grid;
  gap: 4px;
  margin-bottom: 11px;
}

.adjustment-card-head strong {
  color: #f8fafc;
  font-size: .84rem;
  font-weight: 850;
  line-height: 1.15;
}

.adjustment-card-head span {
  color: rgba(203, 213, 225, .70);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.3;
}

.adjustment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.adjustment-grid .setting {
  margin-bottom: 0;
}

.adjustment-reset-setting {
  align-self: end;
}

.adjustment-reset-btn {
  width: 100%;
  min-height: 38px;
  justify-content: center;
}

.image-adjustment-note ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(203, 213, 225, .72);
  font-size: .70rem;
  font-weight: 600;
  line-height: 1.45;
}

.image-adjustment-note li + li {
  margin-top: 7px;
}

@media (max-width: 980px) {
  .image-adjustment-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .adjustment-grid {
    grid-template-columns: 1fr;
  }
}

/* Demo 0.46 Feinschliff: blauer Verlauf nur im Header der erweiterten Einstellungen. */
.settings-advanced-tabs {
  background: rgba(15, 23, 42, .22) !important;
  overflow: hidden !important;
}

.settings-advanced-tabs::before {
  display: none !important;
  content: none !important;
}

.settings-advanced-tabs .advanced-tabs-head {
  margin: 0 !important;
  padding: 12px 13px 11px !important;
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 1px solid rgba(56, 189, 248, .16) !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(56, 189, 248, .18), transparent 28%),
    linear-gradient(180deg, rgba(25, 90, 140, .34) 0%, rgba(16, 60, 98, .22) 46%, rgba(15, 23, 42, .14) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.settings-advanced-tabs .advanced-panel {
  background: transparent !important;
}


/* Demo 0.46: kleine Presse-Animation unten in der Breite/Höhe-Box. */
.settings-primary {
  display: flex;
  flex-direction: column;
}

.compressor-animation {
  margin-top: auto;
  padding: 12px 10px;
  border: 1px solid rgba(56, 189, 248, .14);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 35%, rgba(56, 189, 248, .11), transparent 48%),
    linear-gradient(180deg, rgba(15, 23, 42, .18), rgba(2, 6, 23, .22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 12px 26px rgba(2, 6, 23, .16);
  overflow: hidden;
}

.compressor-scene {
  position: relative;
  height: 86px;
  min-width: 0;
}

.compressor-tile {
  position: absolute;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(125, 211, 252, .42);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, .25), rgba(15, 23, 42, .86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 16px rgba(56, 189, 248, .16);
  overflow: hidden;
}

.compressor-tile::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 4px;
  height: 8px;
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(135deg, transparent 46%, rgba(186, 230, 253, .80) 47% 58%, transparent 59%),
    linear-gradient(45deg, rgba(34, 197, 94, .55), rgba(56, 189, 248, .42));
}

.compressor-tile i {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(253, 224, 71, .88);
  box-shadow: 0 0 8px rgba(253, 224, 71, .42);
}

.compressor-input {
  left: -34px;
  top: 33px;
  opacity: 0;
  animation: compressor-input-move 4.2s linear infinite;
}

.compressor-input-b {
  animation-delay: .72s;
  transform: scale(.92);
}

.compressor-input-c {
  animation-delay: 1.44s;
  transform: scale(.84);
}

.press-machine {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 64px;
  height: 66px;
  transform: translateX(-50%);
}

.press-top,
.press-base {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 9px;
  border-radius: 5px;
  border: 1px solid rgba(125, 211, 252, .36);
  background: linear-gradient(180deg, rgba(30, 64, 175, .58), rgba(15, 23, 42, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 14px rgba(56, 189, 248, .14);
}

.press-top {
  top: 0;
}

.press-base {
  bottom: 0;
}

.press-piston {
  position: absolute;
  left: 28px;
  top: 9px;
  width: 8px;
  height: 28px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(186, 230, 253, .62), rgba(14, 165, 233, .28));
  box-shadow: 0 0 14px rgba(56, 189, 248, .20);
}

.press-plate {
  position: absolute;
  left: 13px;
  top: 32px;
  width: 38px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(125, 211, 252, .80), rgba(2, 132, 199, .54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 0 18px rgba(56, 189, 248, .34);
  animation: press-plate-pulse 4.2s ease-in-out infinite;
}

.press-glow {
  position: absolute;
  left: 50%;
  top: 47px;
  width: 44px;
  height: 12px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(56, 189, 248, .18);
  filter: blur(6px);
  opacity: .2;
  animation: press-glow-pulse 4.2s ease-in-out infinite;
}

.compressor-output {
  right: -34px;
  top: 32px;
  width: 23px;
  height: 18px;
  border-color: rgba(74, 222, 128, .48);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(15, 23, 42, .90));
  animation: compressor-output-move 4.2s ease-in-out infinite;
}

.compressor-output b {
  position: absolute;
  right: 3px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .92);
  box-shadow: 0 0 10px rgba(34, 197, 94, .48);
}

.compressor-output b::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 3px;
  height: 6px;
  border-right: 1.5px solid rgba(2, 6, 23, .92);
  border-bottom: 1.5px solid rgba(2, 6, 23, .92);
  transform: rotate(42deg);
}

.compressor-arrow {
  position: absolute;
  top: 43px;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .45), transparent);
  opacity: .58;
}

.compressor-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid rgba(125, 211, 252, .58);
  border-right: 1px solid rgba(125, 211, 252, .58);
  transform: rotate(45deg);
}

.compressor-arrow-left {
  left: 29%;
}

.compressor-arrow-right {
  right: 23%;
}

.compressor-caption {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  color: rgba(203, 213, 225, .70);
  font-size: .62rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.compressor-caption strong {
  color: rgba(186, 230, 253, .92);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .015em;
}

@keyframes compressor-input-move {
  0% { left: -34px; opacity: 0; transform: translateY(0) scale(.88); }
  8% { opacity: 1; }
  43% { left: calc(50% - 19px); opacity: 1; transform: translateY(0) scale(.96); }
  52% { left: calc(50% - 16px); opacity: 0; transform: translateY(7px) scale(.72); }
  100% { left: calc(50% - 16px); opacity: 0; transform: translateY(7px) scale(.72); }
}

@keyframes press-plate-pulse {
  0%, 33%, 100% { transform: translateY(0); }
  43%, 52% { transform: translateY(13px); }
  58% { transform: translateY(0); }
}

@keyframes press-glow-pulse {
  0%, 34%, 100% { opacity: .16; transform: translateX(-50%) scaleX(.8); }
  45%, 55% { opacity: .92; transform: translateX(-50%) scaleX(1.12); }
  62% { opacity: .28; transform: translateX(-50%) scaleX(.88); }
}

@keyframes compressor-output-move {
  0%, 50% { right: calc(50% - 16px); opacity: 0; transform: scale(.62); }
  58% { opacity: 1; transform: scale(.72); }
  74% { right: 12px; opacity: 1; transform: scale(1); }
  92% { right: 12px; opacity: 1; transform: scale(1); }
  100% { right: -34px; opacity: 0; transform: scale(.86); }
}

@media (max-width: 760px) {
  .compressor-animation {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compressor-input,
  .compressor-output,
  .press-plate,
  .press-glow {
    animation: none !important;
  }

  .compressor-input-a {
    left: 18px;
    opacity: 1;
  }

  .compressor-input-b,
  .compressor-input-c {
    display: none;
  }

  .compressor-output {
    right: 12px;
    opacity: 1;
    transform: none;
  }
}


/* Feinschliff Presse-Animation: Bild wartet in der Presse, wird gedrückt, verschwindet und kommt rechts optimiert raus. */
.compressor-scene {
  height: 82px;
}

.compressor-caption {
  display: none !important;
}

@keyframes compressor-input-move {
  0% {
    left: -34px;
    opacity: 0;
    transform: translateY(0) scale(.88);
  }
  7% {
    opacity: 1;
  }
  34% {
    left: calc(50% - 19px);
    opacity: 1;
    transform: translateY(0) scale(.96);
  }
  48% {
    left: calc(50% - 19px);
    opacity: 1;
    transform: translateY(0) scale(.96);
  }
  56% {
    left: calc(50% - 17px);
    opacity: 0;
    transform: translateY(10px) scale(.58);
  }
  100% {
    left: calc(50% - 17px);
    opacity: 0;
    transform: translateY(10px) scale(.58);
  }
}

@keyframes press-plate-pulse {
  0%, 33%, 100% {
    transform: translateY(0);
  }
  41% {
    transform: translateY(0);
  }
  48%, 55% {
    transform: translateY(15px);
  }
  64% {
    transform: translateY(0);
  }
}

@keyframes press-glow-pulse {
  0%, 40%, 100% {
    opacity: .14;
    transform: translateX(-50%) scaleX(.72);
  }
  49%, 57% {
    opacity: .95;
    transform: translateX(-50%) scaleX(1.18);
  }
  66% {
    opacity: .24;
    transform: translateX(-50%) scaleX(.86);
  }
}

@keyframes compressor-output-move {
  0%, 57% {
    right: calc(50% - 14px);
    opacity: 0;
    transform: translateY(7px) scale(.50);
  }
  63% {
    right: calc(50% - 14px);
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  78% {
    right: 12px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  93% {
    right: 12px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    right: -34px;
    opacity: 0;
    transform: translateY(0) scale(.86);
  }
}


/* Feinschliff Timing: nur ein Bild fährt in die Presse, die anderen warten links. */
.compressor-scene {
  height: 84px;
}

.compressor-input-a,
.compressor-input-b,
.compressor-input-c {
  top: 33px;
}

.compressor-input-a {
  left: -34px;
  opacity: 0;
  animation: compressor-input-sequential 4.6s linear infinite !important;
  transform: translateY(0) scale(.92);
  z-index: 3;
}

.compressor-input-b,
.compressor-input-c {
  opacity: 1;
  animation: compressor-queue-wait 4.6s ease-in-out infinite !important;
  z-index: 2;
}

.compressor-input-b {
  left: 6px;
  top: 37px;
  transform: scale(.82) rotate(-2deg);
  animation-delay: 0s !important;
}

.compressor-input-c {
  left: 30px;
  top: 26px;
  transform: scale(.78) rotate(3deg);
  animation-delay: 1.1s !important;
}

.press-plate {
  animation: press-plate-sequential 4.6s ease-in-out infinite !important;
}

.press-glow {
  animation: press-glow-sequential 4.6s ease-in-out infinite !important;
}

.compressor-output {
  animation: compressor-output-sequential 4.6s ease-in-out infinite !important;
}

@keyframes compressor-input-sequential {
  0% {
    left: -34px;
    opacity: 0;
    transform: translateY(0) scale(.92);
  }
  8% {
    opacity: 1;
  }
  18% {
    left: 8px;
    opacity: 1;
    transform: translateY(4px) scale(.88);
  }
  34% {
    left: calc(50% - 18px);
    opacity: 1;
    transform: translateY(0) scale(.97);
  }
  43% {
    left: calc(50% - 18px);
    opacity: 1;
    transform: translateY(0) scale(.97);
  }
  52% {
    left: calc(50% - 18px);
    opacity: 1;
    transform: translateY(8px) scale(.64);
  }
  56% {
    left: calc(50% - 18px);
    opacity: 0;
    transform: translateY(11px) scale(.44);
  }
  100% {
    left: calc(50% - 18px);
    opacity: 0;
    transform: translateY(11px) scale(.44);
  }
}

@keyframes compressor-queue-wait {
  0%, 14%, 100% {
    opacity: .94;
    filter: saturate(.95);
  }
  20% {
    opacity: .74;
    filter: saturate(.82);
  }
  26% {
    opacity: .94;
    filter: saturate(.95);
  }
  48% {
    opacity: .78;
    filter: saturate(.88);
  }
  56% {
    opacity: .94;
    filter: saturate(.96);
  }
}

@keyframes press-plate-sequential {
  0%, 39%, 100% {
    transform: translateY(0);
  }
  44% {
    transform: translateY(0);
  }
  50%, 58% {
    transform: translateY(15px);
  }
  66% {
    transform: translateY(0);
  }
}

@keyframes press-glow-sequential {
  0%, 40%, 100% {
    opacity: .14;
    transform: translateX(-50%) scaleX(.72);
  }
  49%, 58% {
    opacity: .95;
    transform: translateX(-50%) scaleX(1.18);
  }
  66% {
    opacity: .24;
    transform: translateX(-50%) scaleX(.86);
  }
}

@keyframes compressor-output-sequential {
  0%, 57% {
    right: calc(50% - 14px);
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  63% {
    right: calc(50% - 14px);
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  79% {
    right: 12px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  94% {
    right: 12px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    right: -34px;
    opacity: 0;
    transform: translateY(0) scale(.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compressor-input-b,
  .compressor-input-c {
    opacity: .88 !important;
    animation: none !important;
  }
}

/* Demo 0.46 Feinschliff: Advanced-Box weich höhenanimieren beim Tabwechsel. */
.settings-advanced-tabs {
  transition: height .28s cubic-bezier(.22, .78, .28, 1), border-color .22s ease, box-shadow .22s ease;
}

.settings-advanced-tabs.advanced-is-animating {
  will-change: height;
}

.advanced-panel.active {
  animation: advanced-panel-soft-enter .22s cubic-bezier(.22, .78, .28, 1) both;
}

@keyframes advanced-panel-soft-enter {
  from {
    opacity: .72;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Demo 0.46 Feinschliff: echte Presse-Warteschlange, jede Karte fährt nacheinander in die Presse. */
.compressor-scene {
  height: 84px;
}

.compressor-input-a,
.compressor-input-b,
.compressor-input-c {
  opacity: .96;
  z-index: 3;
  animation-duration: 13.8s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-delay: 0s !important;
}

.compressor-input-a {
  animation-name: compressor-queue-card-a !important;
}

.compressor-input-b {
  animation-name: compressor-queue-card-b !important;
}

.compressor-input-c {
  animation-name: compressor-queue-card-c !important;
}

.press-plate {
  animation: press-plate-queue-cycle 13.8s cubic-bezier(.22, .78, .28, 1) infinite !important;
}

.press-glow {
  animation: press-glow-queue-cycle 13.8s ease-in-out infinite !important;
}

.compressor-output {
  animation: compressor-output-queue-cycle 13.8s ease-in-out infinite !important;
}

@keyframes compressor-queue-card-a {
  0% { left: 8px; top: 34px; opacity: .98; transform: scale(.84) rotate(-2deg); }
  6% { left: 8px; top: 34px; opacity: .98; transform: scale(.84) rotate(-2deg); }
  15% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.97) rotate(0deg); }
  21% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: translateY(0) scale(.97); }
  27% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(11px) scale(.42); }
  29% { left: 8px; top: 34px; opacity: 0; transform: scale(.84) rotate(-2deg); }
  34%, 100% { left: 8px; top: 34px; opacity: .98; transform: scale(.84) rotate(-2deg); }
}

@keyframes compressor-queue-card-b {
  0%, 35% { left: 31px; top: 25px; opacity: .92; transform: scale(.78) rotate(3deg); }
  48% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.97) rotate(0deg); }
  54% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: translateY(0) scale(.97); }
  60% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(11px) scale(.42); }
  62% { left: 31px; top: 25px; opacity: 0; transform: scale(.78) rotate(3deg); }
  67%, 100% { left: 31px; top: 25px; opacity: .92; transform: scale(.78) rotate(3deg); }
}

@keyframes compressor-queue-card-c {
  0%, 68% { left: 53px; top: 38px; opacity: .88; transform: scale(.74) rotate(-3deg); }
  81% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.97) rotate(0deg); }
  87% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: translateY(0) scale(.97); }
  93% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(11px) scale(.42); }
  95% { left: 53px; top: 38px; opacity: 0; transform: scale(.74) rotate(-3deg); }
  100% { left: 53px; top: 38px; opacity: .88; transform: scale(.74) rotate(-3deg); }
}

@keyframes press-plate-queue-cycle {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% { transform: translateY(0); }
  22%, 27%, 55%, 60%, 88%, 93% { transform: translateY(15px); }
}

@keyframes press-glow-queue-cycle {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% {
    opacity: .14;
    transform: translateX(-50%) scaleX(.72);
  }
  23%, 27%, 56%, 60%, 89%, 93% {
    opacity: .96;
    transform: translateX(-50%) scaleX(1.18);
  }
}

@keyframes compressor-output-queue-cycle {
  0%, 27% { right: calc(50% - 14px); opacity: 0; transform: translateY(8px) scale(.46); }
  30% { right: calc(50% - 14px); opacity: 1; transform: translateY(0) scale(.68); }
  37% { right: 12px; opacity: 1; transform: translateY(0) scale(1); }
  43% { right: -34px; opacity: 0; transform: translateY(0) scale(.86); }

  44%, 60% { right: calc(50% - 14px); opacity: 0; transform: translateY(8px) scale(.46); }
  63% { right: calc(50% - 14px); opacity: 1; transform: translateY(0) scale(.68); }
  70% { right: 12px; opacity: 1; transform: translateY(0) scale(1); }
  76% { right: -34px; opacity: 0; transform: translateY(0) scale(.86); }

  77%, 93% { right: calc(50% - 14px); opacity: 0; transform: translateY(8px) scale(.46); }
  95% { right: calc(50% - 14px); opacity: 1; transform: translateY(0) scale(.68); }
  99% { right: 12px; opacity: 1; transform: translateY(0) scale(1); }
  100% { right: -34px; opacity: 0; transform: translateY(0) scale(.86); }
}

@media (prefers-reduced-motion: reduce) {
  .settings-advanced-tabs,
  .advanced-panel.active {
    transition: none !important;
    animation: none !important;
  }

  .compressor-input-a,
  .compressor-input-b,
  .compressor-input-c,
  .compressor-output,
  .press-plate,
  .press-glow {
    animation: none !important;
  }

  .compressor-input-a { left: 8px; top: 34px; opacity: .98; transform: scale(.84) rotate(-2deg); }
  .compressor-input-b { left: 31px; top: 25px; opacity: .92; transform: scale(.78) rotate(3deg); }
  .compressor-input-c { left: 53px; top: 38px; opacity: .88; transform: scale(.74) rotate(-3deg); }
}


/* Demo 0.46: weichere echte Höhenanimation für die Tab-Box. */
.settings-advanced-tabs.advanced-is-animating {
  contain: layout paint;
  will-change: height;
}

.settings-advanced-tabs.advanced-is-animating .advanced-panel.active {
  animation: advanced-panel-smooth-enter .34s cubic-bezier(.18, .86, .22, 1) both;
}

@keyframes advanced-panel-smooth-enter {
  from {
    opacity: .55;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Die linke Einstellbox nicht mehr künstlich mit der rechten Tab-Höhe stretchen.
   Das reduziert sichtbares Ruckeln bei großen Höhenwechseln. */
.settings-grid-modern {
  align-items: start !important;
}

/* Demo 0.46 Final: weniger Zucken beim Höhenwechsel, ruhiger Inhalt. */
.settings-advanced-tabs {
  transition: height .34s cubic-bezier(.22, .78, .20, 1), border-color .22s ease, box-shadow .22s ease !important;
}

.settings-advanced-tabs.advanced-is-animating {
  will-change: height;
  contain: layout;
}

.settings-advanced-tabs .advanced-panel,
.settings-advanced-tabs .advanced-panel.active,
.settings-advanced-tabs.advanced-is-animating .advanced-panel.active {
  animation: none !important;
  transform: none !important;
}

/* Schöne Presse in der Mitte */
.press-machine {
  width: 76px;
  height: 72px;
  top: 8px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(186, 230, 253, .18), transparent 30%),
    linear-gradient(180deg, rgba(6, 24, 44, .78), rgba(2, 6, 23, .52));
  border: 1px solid rgba(125, 211, 252, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 10px 24px rgba(2, 6, 23, .18);
}

.press-machine::before,
.press-machine::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 9px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(125, 211, 252, .26), rgba(8, 47, 73, .70));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.press-machine::before { left: 8px; }
.press-machine::after { right: 8px; }

.press-top,
.press-base {
  left: 14px;
  right: 14px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, .30);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, .56), rgba(15, 23, 42, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 14px rgba(56, 189, 248, .12);
}

.press-top { top: 4px; }
.press-base { bottom: 4px; }

.press-piston {
  left: 34px;
  top: 13px;
  width: 8px;
  height: 26px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(226, 232, 240, .90), rgba(56, 189, 248, .28));
  box-shadow: 0 0 12px rgba(125, 211, 252, .20);
}

.press-plate {
  left: 18px;
  top: 33px;
  width: 40px;
  height: 11px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(186, 230, 253, .94), rgba(56, 189, 248, .70) 52%, rgba(8, 47, 73, .90) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 0 16px rgba(56, 189, 248, .28),
    0 6px 16px rgba(2, 6, 23, .20);
}

.press-glow {
  top: 49px;
  width: 48px;
  height: 14px;
  background: rgba(56, 189, 248, .22);
}

.compressor-arrow {
  opacity: .72;
}

.compressor-output {
  border-color: rgba(74, 222, 128, .54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 18px rgba(34, 197, 94, .16);
}

@media (prefers-reduced-motion: reduce) {
  .settings-advanced-tabs {
    transition: none !important;
  }
}


/* Demo 0.46: vereinfachte Presse ohne extra Rahmen – nur oberer und unterer Balken. */
.press-machine {
  width: 78px !important;
  height: 66px !important;
  top: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.press-machine::before,
.press-machine::after,
.press-piston,
.press-plate,
.press-glow {
  display: none !important;
  content: none !important;
}

.press-top,
.press-base {
  left: 8px !important;
  right: 8px !important;
  height: 11px !important;
  border: 1px solid rgba(125, 211, 252, .28) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(186, 230, 253, .95), rgba(56, 189, 248, .68) 55%, rgba(8, 47, 73, .94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 14px rgba(56, 189, 248, .16) !important;
}

.press-top {
  top: 9px !important;
  animation: press-top-bar-cycle 13.8s cubic-bezier(.22, .78, .28, 1) infinite !important;
}

.press-base {
  bottom: 9px !important;
  animation: press-bottom-bar-cycle 13.8s cubic-bezier(.22, .78, .28, 1) infinite !important;
}

.compressor-arrow {
  opacity: .62 !important;
}

@keyframes press-top-bar-cycle {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% { transform: translateY(0); }
  22%, 27%, 55%, 60%, 88%, 93% { transform: translateY(13px); }
}

@keyframes press-bottom-bar-cycle {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% { transform: translateY(0); }
  22%, 27%, 55%, 60%, 88%, 93% { transform: translateY(-13px); }
}

@media (prefers-reduced-motion: reduce) {
  .press-top,
  .press-base {
    animation: none !important;
  }
}


/* Demo 0.46: fertige Bilder rechts sammeln und nach und nach per Fadeout verschwinden. */
.compressor-output {
  right: -34px;
  top: 33px;
  opacity: 0;
  z-index: 2;
}

.compressor-output-a,
.compressor-output-b,
.compressor-output-c {
  animation-duration: 13.8s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.compressor-output-a { animation-name: compressor-output-slot-a !important; }
.compressor-output-b { animation-name: compressor-output-slot-b !important; }
.compressor-output-c { animation-name: compressor-output-slot-c !important; }

@keyframes compressor-output-slot-a {
  0%, 28% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  31% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  38% {
    right: 12px;
    top: 34px;
    opacity: 1;
    transform: scale(.94) rotate(2deg);
  }
  47% {
    right: 12px;
    top: 34px;
    opacity: .98;
    transform: scale(.94) rotate(2deg);
  }
  56% {
    right: 12px;
    top: 34px;
    opacity: 0;
    transform: scale(.94) rotate(2deg);
  }
  100% {
    right: 12px;
    top: 34px;
    opacity: 0;
    transform: scale(.94) rotate(2deg);
  }
}

@keyframes compressor-output-slot-b {
  0%, 61% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  64% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  71% {
    right: 34px;
    top: 24px;
    opacity: 1;
    transform: scale(.86) rotate(-3deg);
  }
  80% {
    right: 34px;
    top: 24px;
    opacity: .95;
    transform: scale(.86) rotate(-3deg);
  }
  89% {
    right: 34px;
    top: 24px;
    opacity: 0;
    transform: scale(.86) rotate(-3deg);
  }
  100% {
    right: 34px;
    top: 24px;
    opacity: 0;
    transform: scale(.86) rotate(-3deg);
  }
}

@keyframes compressor-output-slot-c {
  0% {
    right: 57px;
    top: 39px;
    opacity: 0;
    transform: scale(.78) rotate(3deg);
  }
  3% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
  12% {
    right: 57px;
    top: 39px;
    opacity: 0;
    transform: scale(.78) rotate(3deg);
  }
  0%, 93% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  96% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  100% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compressor-output-a,
  .compressor-output-b,
  .compressor-output-c {
    animation: none !important;
  }

  .compressor-output-a { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
  .compressor-output-b { right: 34px; top: 24px; opacity: .86; transform: scale(.86) rotate(-3deg); }
  .compressor-output-c { right: 57px; top: 39px; opacity: .78; transform: scale(.78) rotate(3deg); }
}

/* Korrektur: drittes fertiges Bild rechts stehen lassen und im nächsten Zyklus weich ausblenden. */
@keyframes compressor-output-slot-c {
  0% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
  12% {
    right: 57px;
    top: 39px;
    opacity: 0;
    transform: scale(.78) rotate(3deg);
  }
  13%, 93% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  96% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  100% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
}

/* Demo 0.46 Final Feinschliff: Pfeile weg, rechte Ausgabe länger stehen lassen, Presse mit Vertiefung. */
.compressor-arrow,
.compressor-arrow::after {
  display: none !important;
}

/* Vertiefung in der Mitte der Presse, die beim Pressen mitskaliert. */
.press-machine {
  width: 78px !important;
  height: 66px !important;
  top: 10px !important;
}

.press-plate {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 22px !important;
  width: 42px !important;
  height: 22px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(8, 47, 73, .32) !important;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .44), rgba(15, 23, 42, .72) 44%, rgba(2, 6, 23, .88) 100%) !important;
  box-shadow:
    inset 0 4px 8px rgba(2, 6, 23, .42),
    inset 0 -2px 4px rgba(125, 211, 252, .10),
    0 0 0 1px rgba(255, 255, 255, .02) !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  animation: press-bed-cycle 13.8s cubic-bezier(.22, .78, .28, 1) infinite !important;
}

.press-glow {
  display: block !important;
  position: absolute !important;
  left: 24px !important;
  top: 28px !important;
  width: 30px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(56, 189, 248, .10) !important;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, .12) !important;
  filter: blur(1px) !important;
  z-index: 2 !important;
  animation: press-bed-glow-cycle 13.8s ease-in-out infinite !important;
}

.press-top,
.press-base {
  z-index: 4 !important;
}

@keyframes press-bed-cycle {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% {
    transform: translateY(0) scaleY(1);
    opacity: .96;
  }
  22%, 27%, 55%, 60%, 88%, 93% {
    transform: translateY(0) scaleY(.58);
    opacity: 1;
  }
}

@keyframes press-bed-glow-cycle {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% {
    transform: scaleY(1);
    opacity: .42;
  }
  22%, 27%, 55%, 60%, 88%, 93% {
    transform: scaleY(.46);
    opacity: .22;
  }
}

/* Rechte fertige Bilder bleiben stehen, bis drei platziert sind, und faden dann nacheinander aus. */
.compressor-output {
  animation-duration: 13.8s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  opacity: 0;
  z-index: 2;
}

.compressor-output-a { animation-name: compressor-output-slot-a-final !important; }
.compressor-output-b { animation-name: compressor-output-slot-b-final !important; }
.compressor-output-c { animation-name: compressor-output-slot-c-final !important; }

@keyframes compressor-output-slot-a-final {
  0%, 30% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  31% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  38%, 100% {
    right: 12px;
    top: 34px;
    opacity: .98;
    transform: scale(.94) rotate(2deg);
  }
}

@keyframes compressor-output-slot-b-final {
  0%, 63% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  64% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  71%, 100% {
    right: 34px;
    top: 24px;
    opacity: .94;
    transform: scale(.86) rotate(-3deg);
  }
}

@keyframes compressor-output-slot-c-final {
  0%, 95% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  96% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  100% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
}

/* Nach dem Platzieren der 3 Bilder werden sie im nächsten Zyklus nacheinander ausgeblendet. */
@keyframes compressor-output-slot-a-final {
  0% {
    right: 12px;
    top: 34px;
    opacity: .98;
    transform: scale(.94) rotate(2deg);
  }
  10% {
    right: 12px;
    top: 34px;
    opacity: .98;
    transform: scale(.94) rotate(2deg);
  }
  18% {
    right: 12px;
    top: 34px;
    opacity: 0;
    transform: scale(.94) rotate(2deg);
  }
  19%, 30% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  31% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  38%, 100% {
    right: 12px;
    top: 34px;
    opacity: .98;
    transform: scale(.94) rotate(2deg);
  }
}

@keyframes compressor-output-slot-b-final {
  0% {
    right: 34px;
    top: 24px;
    opacity: .94;
    transform: scale(.86) rotate(-3deg);
  }
  20% {
    right: 34px;
    top: 24px;
    opacity: .94;
    transform: scale(.86) rotate(-3deg);
  }
  28% {
    right: 34px;
    top: 24px;
    opacity: 0;
    transform: scale(.86) rotate(-3deg);
  }
  29%, 63% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  64% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  71%, 100% {
    right: 34px;
    top: 24px;
    opacity: .94;
    transform: scale(.86) rotate(-3deg);
  }
}

@keyframes compressor-output-slot-c-final {
  0% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
  32% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
  40% {
    right: 57px;
    top: 39px;
    opacity: 0;
    transform: scale(.78) rotate(3deg);
  }
  41%, 95% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 0;
    transform: translateY(8px) scale(.46);
  }
  96% {
    right: calc(50% - 14px);
    top: 33px;
    opacity: 1;
    transform: translateY(0) scale(.68);
  }
  100% {
    right: 57px;
    top: 39px;
    opacity: .86;
    transform: scale(.78) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compressor-arrow,
  .compressor-arrow::after {
    display: none !important;
  }

  .press-plate,
  .press-glow,
  .press-top,
  .press-base,
  .compressor-output-a,
  .compressor-output-b,
  .compressor-output-c {
    animation: none !important;
  }

  .compressor-output-a { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
  .compressor-output-b { right: 34px; top: 24px; opacity: .94; transform: scale(.86) rotate(-3deg); }
  .compressor-output-c { right: 57px; top: 39px; opacity: .86; transform: scale(.78) rotate(3deg); }
}


/* Demo 0.46: Qualitätscheck im Profi-Tab. */
.quality-check-btn {
  width: 100%;
  margin-top: 9px;
  min-height: 34px;
  border-radius: 11px;
}

.quality-check-result {
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(56, 189, 248, .14);
  border-radius: 11px;
  background: rgba(2, 6, 23, .18);
  color: rgba(203, 213, 225, .78);
  font-size: .68rem;
  line-height: 1.32;
}

/* Demo 0.46: Presse-Korrektur – Vertiefung so breit wie Balken, Innenschatten, Balken vor dem Bild. */
.press-machine {
  isolation: isolate !important;
}

.press-plate {
  display: block !important;
  left: 8px !important;
  right: 8px !important;
  top: 20px !important;
  width: auto !important;
  height: 26px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(8, 47, 73, .42) !important;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .52), rgba(15, 23, 42, .76) 48%, rgba(2, 6, 23, .94) 100%) !important;
  box-shadow:
    inset 0 7px 12px rgba(0, 0, 0, .46),
    inset 0 -4px 8px rgba(125, 211, 252, .10),
    inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  animation: press-bed-cycle-wide 13.8s cubic-bezier(.22, .78, .28, 1) infinite !important;
}

.press-glow {
  display: block !important;
  left: 13px !important;
  right: 13px !important;
  top: 29px !important;
  width: auto !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(56, 189, 248, .08) !important;
  box-shadow: inset 0 0 10px rgba(56, 189, 248, .12) !important;
  filter: blur(1px) !important;
  z-index: 2 !important;
  animation: press-bed-glow-cycle-wide 13.8s ease-in-out infinite !important;
}

.compressor-input,
.compressor-output {
  z-index: 3 !important;
}

.press-top,
.press-base {
  z-index: 6 !important;
}

@keyframes press-bed-cycle-wide {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% {
    transform: scaleY(1);
    opacity: .96;
  }
  22%, 27%, 55%, 60%, 88%, 93% {
    transform: scaleY(.50);
    opacity: 1;
  }
}

@keyframes press-bed-glow-cycle-wide {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% {
    transform: scaleY(1);
    opacity: .42;
  }
  22%, 27%, 55%, 60%, 88%, 93% {
    transform: scaleY(.42);
    opacity: .20;
  }
}


/* Demo 0.46 Final: Qualitätscheck-Button wieder entfernt. */
.quality-check-btn,
.quality-check-result {
  display: none !important;
}

/* Demo 0.46 Final: Presse heller, ohne Vertiefung, schönere Balken ohne weiße Unterkante. */
.press-machine {
  width: 78px !important;
  height: 66px !important;
  top: 10px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(186,230,253,.18), rgba(186,230,253,.08) 42%, transparent 72%) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  isolation: isolate !important;
}

/* Vertiefung/Innenbett komplett ausblenden */
.press-plate,
.press-glow {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.press-top,
.press-base {
  left: 8px !important;
  right: 8px !important;
  height: 10px !important;
  border: 1px solid rgba(97, 173, 217, .34) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(116, 199, 245, .96) 0%, rgba(67, 155, 208, .92) 54%, rgba(34, 95, 145, .96) 100%) !important;
  box-shadow:
    0 0 12px rgba(56, 189, 248, .16),
    0 3px 8px rgba(2, 6, 23, .12) !important;
}

.press-top {
  top: 11px !important;
  animation: press-top-bar-cycle-clean 13.8s cubic-bezier(.22,.78,.28,1) infinite !important;
}

.press-base {
  bottom: 11px !important;
  animation: press-bottom-bar-cycle-clean 13.8s cubic-bezier(.22,.78,.28,1) infinite !important;
}

/* Bild zwischen den Balken */
.compressor-input,
.compressor-output {
  z-index: 3 !important;
}

/* Balken vor dem Bild */
.press-top,
.press-base {
  z-index: 6 !important;
}

/* Pfeile bleiben weg */
.compressor-arrow,
.compressor-arrow::after {
  display: none !important;
}

@keyframes press-top-bar-cycle-clean {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% { transform: translateY(0); }
  22%, 27%, 55%, 60%, 88%, 93% { transform: translateY(12px); }
}

@keyframes press-bottom-bar-cycle-clean {
  0%, 18%, 31%, 51%, 64%, 84%, 97%, 100% { transform: translateY(0); }
  22%, 27%, 55%, 60%, 88%, 93% { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .press-top,
  .press-base {
    animation: none !important;
  }
}


/* Demo 0.46 Final+: Presse-Hintergrund drückt mit, Balken ohne weiße Linie, 2–5 Sammelbilder links/rechts. */
.compressor-scene {
  height: 88px !important;
}

.press-machine {
  width: 82px !important;
  height: 66px !important;
  top: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  isolation: isolate !important;
}

.press-machine::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  top: 20px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(186,230,253,.26), rgba(125,211,252,.18) 45%, rgba(56,189,248,.10) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 18px rgba(125,211,252,.10) !important;
  transform-origin: center center !important;
  animation: press-bed-light-cycle 24s cubic-bezier(.22,.78,.28,1) infinite !important;
  z-index: 1 !important;
}

.press-machine::after,
.press-piston,
.press-plate,
.press-glow {
  display: none !important;
  content: none !important;
}

.press-top,
.press-base {
  left: 8px !important;
  right: 8px !important;
  height: 10px !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .94) 54%, rgba(43, 109, 160, .96) 100%) !important;
  box-shadow:
    0 0 12px rgba(56, 189, 248, .16),
    0 3px 10px rgba(2, 6, 23, .10) !important;
  z-index: 6 !important;
}

.press-top {
  top: 11px !important;
  animation: press-top-five-cycle 24s cubic-bezier(.22,.78,.28,1) infinite !important;
}

.press-base {
  bottom: 11px !important;
  animation: press-bottom-five-cycle 24s cubic-bezier(.22,.78,.28,1) infinite !important;
}

@keyframes press-bed-light-cycle {
  0%, 18%, 31%, 44%, 57%, 70%, 83%, 100% {
    transform: scaleY(1);
    opacity: .92;
  }
  22%, 26%, 35%, 39%, 48%, 52%, 61%, 65%, 74%, 78% {
    transform: scaleY(.58);
    opacity: .72;
  }
}

@keyframes press-top-five-cycle {
  0%, 18%, 31%, 44%, 57%, 70%, 83%, 100% { transform: translateY(0); }
  22%, 26%, 35%, 39%, 48%, 52%, 61%, 65%, 74%, 78% { transform: translateY(12px); }
}

@keyframes press-bottom-five-cycle {
  0%, 18%, 31%, 44%, 57%, 70%, 83%, 100% { transform: translateY(0); }
  22%, 26%, 35%, 39%, 48%, 52%, 61%, 65%, 74%, 78% { transform: translateY(-12px); }
}

.compressor-arrow,
.compressor-arrow::after {
  display: none !important;
}

.compressor-input,
.compressor-output {
  animation-duration: 24s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  z-index: 3 !important;
}

/* linke Warteschlange: bis zu 5 Bilder sammeln sich */
.compressor-input-a { animation-name: queue-in-a-5 !important; }
.compressor-input-b { animation-name: queue-in-b-5 !important; }
.compressor-input-c { animation-name: queue-in-c-5 !important; }
.compressor-input-d { animation-name: queue-in-d-5 !important; }
.compressor-input-e { animation-name: queue-in-e-5 !important; }

@keyframes queue-in-a-5 {
  0%, 8% { left: 6px; top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  18% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  22%, 26% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  27%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.44); }
}
@keyframes queue-in-b-5 {
  0%, 22% { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  31% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  35%, 39% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  40%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.44); }
}
@keyframes queue-in-c-5 {
  0%, 35% { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  44% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  48%, 52% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  53%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.44); }
}
@keyframes queue-in-d-5 {
  0%, 48% { left: 14px; top: 14px; opacity: .86; transform: scale(.72) rotate(4deg); }
  57% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  61%, 65% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  66%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.44); }
}
@keyframes queue-in-e-5 {
  0%, 61% { left: 40px; top: 52px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  70% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  74%, 78% { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0deg); }
  79%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.44); }
}

/* rechte Ausgabe: bis zu 5 fertige Bilder sammeln sich und faden später nacheinander aus */
.compressor-output-a { animation-name: queue-out-a-5 !important; }
.compressor-output-b { animation-name: queue-out-b-5 !important; }
.compressor-output-c { animation-name: queue-out-c-5 !important; }
.compressor-output-d { animation-name: queue-out-d-5 !important; }
.compressor-output-e { animation-name: queue-out-e-5 !important; }

@keyframes queue-out-a-5 {
  0%, 4% { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
  8%, 23% { right: 12px; top: 34px; opacity: 0; transform: scale(.94) rotate(2deg); }
  24% { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  28%, 100% { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
}
@keyframes queue-out-b-5 {
  0%, 8% { right: 34px; top: 24px; opacity: .94; transform: scale(.86) rotate(-3deg); }
  12%, 39% { right: 34px; top: 24px; opacity: 0; transform: scale(.86) rotate(-3deg); }
  40% { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  44%, 100% { right: 34px; top: 24px; opacity: .94; transform: scale(.86) rotate(-3deg); }
}
@keyframes queue-out-c-5 {
  0%, 12% { right: 57px; top: 39px; opacity: .90; transform: scale(.78) rotate(3deg); }
  16%, 55% { right: 57px; top: 39px; opacity: 0; transform: scale(.78) rotate(3deg); }
  56% { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  60%, 100% { right: 57px; top: 39px; opacity: .90; transform: scale(.78) rotate(3deg); }
}
@keyframes queue-out-d-5 {
  0%, 16% { right: 24px; top: 50px; opacity: .86; transform: scale(.72) rotate(4deg); }
  20%, 71% { right: 24px; top: 50px; opacity: 0; transform: scale(.72) rotate(4deg); }
  72% { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  76%, 100% { right: 24px; top: 50px; opacity: .86; transform: scale(.72) rotate(4deg); }
}
@keyframes queue-out-e-5 {
  0%, 22% { right: 63px; top: 14px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  26%, 87% { right: 63px; top: 14px; opacity: 0; transform: scale(.68) rotate(-4deg); }
  88% { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  92%, 100% { right: 63px; top: 14px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .press-machine::before,
  .press-top,
  .press-base,
  .compressor-input,
  .compressor-output {
    animation: none !important;
  }

  .compressor-input-a { left: 6px; top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  .compressor-input-b { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  .compressor-input-c { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  .compressor-input-d { left: 14px; top: 14px; opacity: .86; transform: scale(.72) rotate(4deg); }
  .compressor-input-e { left: 40px; top: 52px; opacity: .82; transform: scale(.68) rotate(-4deg); }

  .compressor-output-a { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
  .compressor-output-b { right: 34px; top: 24px; opacity: .94; transform: scale(.86) rotate(-3deg); }
  .compressor-output-c { right: 57px; top: 39px; opacity: .90; transform: scale(.78) rotate(3deg); }
  .compressor-output-d { right: 24px; top: 50px; opacity: .86; transform: scale(.72) rotate(4deg); }
  .compressor-output-e { right: 63px; top: 14px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}


/* Demo 0.46 Final++: Bilder bleiben hinter den Pressbalken, Partikel-Effekt beim Pressen. */
.press-machine {
  overflow: visible !important;
}

/* Reinkommende/rausgehende Bilder hinter den Balken */
.compressor-input,
.compressor-output {
  z-index: 3 !important;
}

.press-top,
.press-base {
  z-index: 8 !important;
}

.press-particle {
  position: absolute;
  left: 50%;
  top: 33px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(125,211,252,.92) 45%, rgba(56,189,248,.42) 100%);
  box-shadow: 0 0 8px rgba(125, 211, 252, .42);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  animation: particle-burst-loop 24s linear infinite;
}

.press-particle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: rgba(186,230,253,.28);
  filter: blur(1px);
}

.press-particle-a { --dx: -28px; --dy: -18px; --s: 1.0; }
.press-particle-b { --dx: -20px; --dy: 12px; --s: .9; }
.press-particle-c { --dx: 24px; --dy: -22px; --s: 1.05; }
.press-particle-d { --dx: 30px; --dy: 8px; --s: .95; }
.press-particle-e { --dx: -8px; --dy: -28px; --s: .8; }
.press-particle-f { --dx: 10px; --dy: -30px; --s: .85; }
.press-particle-g { --dx: -32px; --dy: 4px; --s: .78; }
.press-particle-h { --dx: 34px; --dy: -2px; --s: .88; }

.press-particle-a { animation-delay: 0s; }
.press-particle-b { animation-delay: -.18s; }
.press-particle-c { animation-delay: -.05s; }
.press-particle-d { animation-delay: -.12s; }
.press-particle-e { animation-delay: -.09s; }
.press-particle-f { animation-delay: -.15s; }
.press-particle-g { animation-delay: -.03s; }
.press-particle-h { animation-delay: -.21s; }

@keyframes particle-burst-loop {
  0%, 21.8% {
    opacity: 0;
    transform: translate(0, 0) scale(.25);
  }
  22.2% {
    opacity: .95;
    transform: translate(0, 0) scale(.35);
  }
  23.8% {
    opacity: .92;
    transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82));
  }
  26.4% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(var(--s));
  }

  34.8%, 34.9% {
    opacity: 0;
    transform: translate(0, 0) scale(.25);
  }
  35.2% {
    opacity: .95;
    transform: translate(0, 0) scale(.35);
  }
  36.8% {
    opacity: .92;
    transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82));
  }
  39.4% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(var(--s));
  }

  47.8%, 47.9% {
    opacity: 0;
    transform: translate(0, 0) scale(.25);
  }
  48.2% {
    opacity: .95;
    transform: translate(0, 0) scale(.35);
  }
  49.8% {
    opacity: .92;
    transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82));
  }
  52.4% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(var(--s));
  }

  60.8%, 60.9% {
    opacity: 0;
    transform: translate(0, 0) scale(.25);
  }
  61.2% {
    opacity: .95;
    transform: translate(0, 0) scale(.35);
  }
  62.8% {
    opacity: .92;
    transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82));
  }
  65.4% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(var(--s));
  }

  73.8%, 73.9% {
    opacity: 0;
    transform: translate(0, 0) scale(.25);
  }
  74.2% {
    opacity: .95;
    transform: translate(0, 0) scale(.35);
  }
  75.8% {
    opacity: .92;
    transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82));
  }
  78.4% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(var(--s));
  }

  100% {
    opacity: 0;
    transform: translate(0, 0) scale(.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-particle {
    display: none !important;
    animation: none !important;
  }
}


/* Demo 0.46 Final+++: Presse-Animation neu aufgebaut.
   Links warten 3–5 Bilder, fliegen nacheinander in die Presse,
   rechts sammeln sich 3–5 optimierte Bilder und verschwinden danach per Fade-out. */
.compressor-scene {
  height: 92px !important;
}

.compressor-arrow,
.compressor-arrow::after,
.press-piston,
.press-plate,
.press-glow {
  display: none !important;
}

.press-machine {
  position: absolute;
  left: 50%;
  top: 10px !important;
  width: 84px !important;
  height: 68px !important;
  transform: translateX(-50%);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Heller Hintergrund hinter der Presse, der beim Pressen mitskaliert. */
.press-machine::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  top: 21px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(191, 236, 255, .50) 0%, rgba(125, 211, 252, .26) 48%, rgba(56, 189, 248, .12) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 0 18px rgba(125, 211, 252, .16) !important;
  transform-origin: center center !important;
  z-index: 1 !important;
  animation: press-bed-glow-sequence 24s cubic-bezier(.22,.78,.28,1) infinite !important;
}

.press-machine::after {
  display: none !important;
  content: none !important;
}

/* Reinkommende / ausgehende Bilder unter den Balken. */
.compressor-input,
.compressor-output {
  z-index: 3 !important;
  animation-duration: 24s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* Die beiden Pressbalken liegen optisch VOR den Bildern. */
.press-top,
.press-base {
  left: 8px !important;
  right: 8px !important;
  height: 10px !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(92, 190, 243, .98) 0%, rgba(66, 158, 213, .96) 55%, rgba(39, 102, 157, .98) 100%) !important;
  box-shadow:
    0 0 12px rgba(56, 189, 248, .18),
    0 4px 10px rgba(2, 6, 23, .12) !important;
  z-index: 8 !important;
}

.press-top {
  top: 11px !important;
  animation: press-top-sequence 24s cubic-bezier(.22,.78,.28,1) infinite !important;
}

.press-base {
  bottom: 11px !important;
  animation: press-bottom-sequence 24s cubic-bezier(.22,.78,.28,1) infinite !important;
}

/* Linke Warteschlange: 5 Mini-Bilder warten und gehen nacheinander rein. */
.compressor-input-a { animation-name: input-queue-a-final !important; }
.compressor-input-b { animation-name: input-queue-b-final !important; }
.compressor-input-c { animation-name: input-queue-c-final !important; }
.compressor-input-d { animation-name: input-queue-d-final !important; }
.compressor-input-e { animation-name: input-queue-e-final !important; }

@keyframes input-queue-a-final {
  0%, 13%   { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  19%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  22%, 26%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  27%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.42); }
}
@keyframes input-queue-b-final {
  0%, 26%   { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  32%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  35%, 39%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  40%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.42); }
}
@keyframes input-queue-c-final {
  0%, 39%   { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  45%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  48%, 52%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  53%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.42); }
}
@keyframes input-queue-d-final {
  0%, 52%   { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
  58%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  61%, 65%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  66%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.42); }
}
@keyframes input-queue-e-final {
  0%, 65%   { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  71%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  74%, 78%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  79%, 100% { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.42); }
}

/* Rechte Ausgabe: Bilder kommen nacheinander raus, positionieren sich rechts und faden später weg. */
.compressor-output-a { animation-name: output-queue-a-final !important; }
.compressor-output-b { animation-name: output-queue-b-final !important; }
.compressor-output-c { animation-name: output-queue-c-final !important; }
.compressor-output-d { animation-name: output-queue-d-final !important; }
.compressor-output-e { animation-name: output-queue-e-final !important; }

@keyframes output-queue-a-final {
  0%, 27%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  28%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  31%, 85%  { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
  90%, 100% { right: 12px; top: 34px; opacity: 0; transform: scale(.94) rotate(2deg); }
}
@keyframes output-queue-b-final {
  0%, 40%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  41%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  44%, 88%  { right: 34px; top: 22px; opacity: .94; transform: scale(.86) rotate(-3deg); }
  93%, 100% { right: 34px; top: 22px; opacity: 0; transform: scale(.86) rotate(-3deg); }
}
@keyframes output-queue-c-final {
  0%, 53%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  54%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  57%, 91%  { right: 58px; top: 39px; opacity: .90; transform: scale(.78) rotate(3deg); }
  96%, 100% { right: 58px; top: 39px; opacity: 0; transform: scale(.78) rotate(3deg); }
}
@keyframes output-queue-d-final {
  0%, 66%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  67%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  70%, 95%  { right: 22px; top: 52px; opacity: .86; transform: scale(.72) rotate(4deg); }
  99%, 100% { right: 22px; top: 52px; opacity: 0; transform: scale(.72) rotate(4deg); }
}
@keyframes output-queue-e-final {
  0%, 79%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  80%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  83%, 97%  { right: 64px; top: 12px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  100%      { right: 64px; top: 12px; opacity: 0; transform: scale(.68) rotate(-4deg); }
}

/* Schönerer Press-Effekt: fünf Presszyklen. */
@keyframes press-bed-glow-sequence {
  0%, 21%, 34%, 47%, 60%, 73%, 100% {
    transform: scaleY(1);
    opacity: .92;
  }
  22%, 26%, 35%, 39%, 48%, 52%, 61%, 65%, 74%, 78% {
    transform: scaleY(.54);
    opacity: .66;
  }
}

@keyframes press-top-sequence {
  0%, 21%, 34%, 47%, 60%, 73%, 100% { transform: translateY(0); }
  22%, 26%, 35%, 39%, 48%, 52%, 61%, 65%, 74%, 78% { transform: translateY(12px); }
}

@keyframes press-bottom-sequence {
  0%, 21%, 34%, 47%, 60%, 73%, 100% { transform: translateY(0); }
  22%, 26%, 35%, 39%, 48%, 52%, 61%, 65%, 74%, 78% { transform: translateY(-12px); }
}

/* Partikel-Effekt beim Pressen – mehr Glanz und unterschiedliche Richtungen. */
.press-particle {
  position: absolute;
  left: 50%;
  top: 33px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(186,230,253,.96) 34%, rgba(56,189,248,.72) 66%, rgba(56,189,248,.22) 100%);
  box-shadow: 0 0 9px rgba(125, 211, 252, .55);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  animation: particle-burst-final 24s linear infinite !important;
}
.press-particle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: rgba(191,236,255,.28);
  filter: blur(1px);
}
.press-particle-a { --dx: -30px; --dy: -18px; --s: 1.0;  animation-delay: 0s !important; }
.press-particle-b { --dx: -22px; --dy: 12px;  --s: .92; animation-delay: -.06s !important; }
.press-particle-c { --dx: 26px;  --dy: -20px; --s: 1.06; animation-delay: -.12s !important; }
.press-particle-d { --dx: 32px;  --dy: 6px;   --s: .94; animation-delay: -.18s !important; }
.press-particle-e { --dx: -10px; --dy: -29px; --s: .80; animation-delay: -.03s !important; }
.press-particle-f { --dx: 12px;  --dy: -31px; --s: .88; animation-delay: -.09s !important; }
.press-particle-g { --dx: -34px; --dy: 2px;   --s: .78; animation-delay: -.15s !important; }
.press-particle-h { --dx: 36px;  --dy: -2px;  --s: .90; animation-delay: -.21s !important; }

@keyframes particle-burst-final {
  0%, 21.8%   { opacity: 0; transform: translate(0,0) scale(.25); }
  22.2%       { opacity: .98; transform: translate(0,0) scale(.35); }
  23.8%       { opacity: .95; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82)); }
  26.2%       { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  34.8%,34.9% { opacity: 0; transform: translate(0,0) scale(.25); }
  35.2%       { opacity: .98; transform: translate(0,0) scale(.35); }
  36.8%       { opacity: .95; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82)); }
  39.2%       { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  47.8%,47.9% { opacity: 0; transform: translate(0,0) scale(.25); }
  48.2%       { opacity: .98; transform: translate(0,0) scale(.35); }
  49.8%       { opacity: .95; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82)); }
  52.2%       { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  60.8%,60.9% { opacity: 0; transform: translate(0,0) scale(.25); }
  61.2%       { opacity: .98; transform: translate(0,0) scale(.35); }
  62.8%       { opacity: .95; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82)); }
  65.2%       { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  73.8%,73.9% { opacity: 0; transform: translate(0,0) scale(.25); }
  74.2%       { opacity: .98; transform: translate(0,0) scale(.35); }
  75.8%       { opacity: .95; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .82)); }
  78.2%       { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%        { opacity: 0;   transform: translate(0,0) scale(.25); }
}

@media (prefers-reduced-motion: reduce) {
  .press-machine::before,
  .press-top,
  .press-base,
  .compressor-input,
  .compressor-output,
  .press-particle {
    animation: none !important;
  }

  .compressor-input-a { left: 6px; top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  .compressor-input-b { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  .compressor-input-c { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  .compressor-input-d { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
  .compressor-input-e { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }

  .compressor-output-a { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
  .compressor-output-b { right: 34px; top: 22px; opacity: .94; transform: scale(.86) rotate(-3deg); }
  .compressor-output-c { right: 58px; top: 39px; opacity: .90; transform: scale(.78) rotate(3deg); }
  .compressor-output-d { right: 22px; top: 52px; opacity: .86; transform: scale(.72) rotate(4deg); }
  .compressor-output-e { right: 64px; top: 12px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}

/* Demo 0.46 Final++++: Pressbalken wirklich vor den Bildern, linke Warteschlange als Endlos-Loop. */
.press-machine {
  z-index: 7 !important;
}

/* Bilder unter der Presse halten */
.compressor-input,
.compressor-output {
  z-index: 3 !important;
}

/* Die Balken selbst noch weiter nach vorne */
.press-top,
.press-base {
  z-index: 12 !important;
}

/* Endlos-Warteschlange links: Bilder verschwinden nicht dauerhaft,
   sondern kommen nach dem Pressen wieder von links rein und warten. */
.compressor-input-a,
.compressor-input-b,
.compressor-input-c,
.compressor-input-d,
.compressor-input-e {
  animation-duration: 24s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.compressor-input-a { animation-name: input-loop-a !important; }
.compressor-input-b { animation-name: input-loop-b !important; }
.compressor-input-c { animation-name: input-loop-c !important; }
.compressor-input-d { animation-name: input-loop-d !important; }
.compressor-input-e { animation-name: input-loop-e !important; }

@keyframes input-loop-a {
  0%, 12%   { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  13%, 18%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  19%, 23%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  24%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  25%       { left: -24px; top: 34px; opacity: 0; transform: scale(.72) rotate(-6deg); }
  31%       { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  100%      { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
}

@keyframes input-loop-b {
  0%, 25%   { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  26%, 31%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  32%, 36%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  37%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  38%       { left: -24px; top: 22px; opacity: 0; transform: scale(.66) rotate(6deg); }
  44%       { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  100%      { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
}

@keyframes input-loop-c {
  0%, 38%   { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  39%, 44%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  45%, 49%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  50%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  51%       { left: -24px; top: 38px; opacity: 0; transform: scale(.62) rotate(-7deg); }
  57%       { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  100%      { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
}

@keyframes input-loop-d {
  0%, 51%   { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
  52%, 57%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  58%, 62%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  63%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  64%       { left: -24px; top: 12px; opacity: 0; transform: scale(.58) rotate(7deg); }
  70%       { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
  100%      { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
}

@keyframes input-loop-e {
  0%, 64%   { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  65%, 70%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  71%, 75%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  76%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  77%       { left: -24px; top: 54px; opacity: 0; transform: scale(.56) rotate(-8deg); }
  83%       { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  100%      { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .compressor-input-a { left: 6px; top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  .compressor-input-b { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  .compressor-input-c { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  .compressor-input-d { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
  .compressor-input-e { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}

/* Demo 0.46 Final+++++: etwas langsamer und stärkerer Partikel-Effekt mit wechselnden Richtungen. */
.compressor-input,
.compressor-output,
.press-top,
.press-base,
.press-machine::before,
.press-particle,
.compressor-input-a,
.compressor-input-b,
.compressor-input-c,
.compressor-input-d,
.compressor-input-e,
.compressor-output-a,
.compressor-output-b,
.compressor-output-c,
.compressor-output-d,
.compressor-output-e {
  animation-duration: 26s !important;
}

.press-particle {
  width: var(--size, 5px) !important;
  height: var(--size, 5px) !important;
  margin-left: calc(var(--size, 5px) * -0.5) !important;
  margin-top: calc(var(--size, 5px) * -0.5) !important;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(214,243,255,.98) 30%, rgba(125,211,252,.90) 56%, rgba(56,189,248,.38) 100%) !important;
  box-shadow: 0 0 var(--glow, 11px) rgba(125, 211, 252, .62) !important;
}

.press-particle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size, 5px) * 2.4);
  height: 1px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(214,243,255,.92), rgba(255,255,255,0));
  opacity: .85;
  filter: blur(.35px);
}

.press-particle::after {
  inset: -1px !important;
  background: rgba(191,236,255,.34) !important;
  filter: blur(1.2px) !important;
}

/* Pressen etwas ruhiger/schöner mit längerer Gesamtdauer. */
.press-top,
.press-base {
  box-shadow:
    0 0 14px rgba(56, 189, 248, .20),
    0 4px 12px rgba(2, 6, 23, .12) !important;
}

.press-machine::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 0 22px rgba(125, 211, 252, .18) !important;
}

@media (prefers-reduced-motion: reduce) {
  .press-particle::before {
    display: none !important;
  }
}


/* Demo 0.46 Final++++++: langsamere Einflugphase und überlappende Partikel-Bursts. */
.compressor-input,
.compressor-output,
.press-top,
.press-base,
.press-machine::before,
.press-particle,
.compressor-input-a,
.compressor-input-b,
.compressor-input-c,
.compressor-input-d,
.compressor-input-e,
.compressor-output-a,
.compressor-output-b,
.compressor-output-c,
.compressor-output-d,
.compressor-output-e {
  animation-duration: 28s !important;
}

/* Bilder fliegen langsamer in die Presse. */
@keyframes input-loop-a {
  0%, 11%   { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  12%, 20%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  21%, 25%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  26%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  27%       { left: -24px; top: 34px; opacity: 0; transform: scale(.72) rotate(-6deg); }
  34%, 100% { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
}
@keyframes input-loop-b {
  0%, 24%   { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  25%, 33%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  34%, 38%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  39%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  40%       { left: -24px; top: 22px; opacity: 0; transform: scale(.66) rotate(6deg); }
  47%, 100% { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
}
@keyframes input-loop-c {
  0%, 37%   { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  38%, 46%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  47%, 51%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  52%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  53%       { left: -24px; top: 38px; opacity: 0; transform: scale(.62) rotate(-7deg); }
  60%, 100% { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
}
@keyframes input-loop-d {
  0%, 50%   { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
  51%, 59%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  60%, 64%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  65%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  66%       { left: -24px; top: 12px; opacity: 0; transform: scale(.58) rotate(7deg); }
  73%, 100% { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
}
@keyframes input-loop-e {
  0%, 63%   { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  64%, 72%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  73%, 77%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.95) rotate(0); }
  78%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  79%       { left: -24px; top: 54px; opacity: 0; transform: scale(.56) rotate(-8deg); }
  86%, 100% { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}

/* Partikel kräftiger und länger sichtbar. */
.press-particle {
  opacity: 0;
  width: var(--size, 5px) !important;
  height: var(--size, 5px) !important;
  box-shadow: 0 0 var(--glow, 13px) rgba(125, 211, 252, .70) !important;
}

.press-particle-alt {
  animation-name: particle-burst-final-alt !important;
}

/* zweite Gruppe startet versetzt, damit alter Effekt nicht abrupt verschwindet */
@keyframes particle-burst-final {
  0%, 21.8%   { opacity: 0; transform: translate(0,0) scale(.22); }
  22.2%       { opacity: 1; transform: translate(0,0) scale(.34); }
  24.8%       { opacity: .98; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .78)); }
  29.8%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  34.2%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  47.8%,47.9% { opacity: 0; transform: translate(0,0) scale(.22); }
  48.2%       { opacity: 1; transform: translate(0,0) scale(.34); }
  50.8%       { opacity: .98; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .78)); }
  55.8%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  60.2%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  73.8%,73.9% { opacity: 0; transform: translate(0,0) scale(.22); }
  74.2%       { opacity: 1; transform: translate(0,0) scale(.34); }
  76.8%       { opacity: .98; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .78)); }
  81.8%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  86.2%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%        { opacity: 0; transform: translate(0,0) scale(.22); }
}

@keyframes particle-burst-final-alt {
  0%, 34.8%   { opacity: 0; transform: translate(0,0) scale(.22); }
  35.2%       { opacity: 1; transform: translate(0,0) scale(.34); }
  37.8%       { opacity: .98; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .78)); }
  42.8%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  47.2%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  60.8%,60.9% { opacity: 0; transform: translate(0,0) scale(.22); }
  61.2%       { opacity: 1; transform: translate(0,0) scale(.34); }
  63.8%       { opacity: .98; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45)) scale(calc(var(--s) * .78)); }
  68.8%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  73.2%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%        { opacity: 0; transform: translate(0,0) scale(.22); }
}

@media (prefers-reduced-motion: reduce) {
  .press-particle-alt {
    display: none !important;
  }
}


/* Demo 0.46 Final+++++++: Einflug der Mini-Bilder deutlich verlangsamt.
   Vorher war die Gesamtanimation länger, aber der eigentliche Flug in die Presse
   lag noch in zu engen Keyframe-Bereichen. Jetzt dauert jeder Einflug sichtbar länger. */
.compressor-input,
.compressor-output,
.press-top,
.press-base,
.press-machine::before,
.press-particle,
.compressor-input-a,
.compressor-input-b,
.compressor-input-c,
.compressor-input-d,
.compressor-input-e,
.compressor-output-a,
.compressor-output-b,
.compressor-output-c,
.compressor-output-d,
.compressor-output-e {
  animation-duration: 42s !important;
}

/* Links: 5 Bilder bleiben als Warteschlange sichtbar.
   Der Weg von links in die Presse dauert jetzt jeweils ca. 4 Sekunden. */
@keyframes input-loop-a {
  0%, 7%    { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
  14%       { left: 34px; top: 32px; opacity: .98; transform: scale(.92) rotate(-1deg); }
  18%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  19%, 23%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.96) rotate(0); }
  24%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  25%       { left: -24px; top: 34px; opacity: 0; transform: scale(.72) rotate(-6deg); }
  34%, 100% { left: 6px;  top: 34px; opacity: .98; transform: scale(.88) rotate(-2deg); }
}

@keyframes input-loop-b {
  0%, 22%   { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
  29%       { left: 42px; top: 27px; opacity: .97; transform: scale(.88) rotate(1deg); }
  33%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  34%, 38%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.96) rotate(0); }
  39%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  40%       { left: -24px; top: 22px; opacity: 0; transform: scale(.66) rotate(6deg); }
  50%, 100% { left: 26px; top: 22px; opacity: .95; transform: scale(.82) rotate(3deg); }
}

@keyframes input-loop-c {
  0%, 37%   { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
  44%       { left: 48px; top: 34px; opacity: .96; transform: scale(.86) rotate(-1deg); }
  48%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  49%, 53%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.96) rotate(0); }
  54%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  55%       { left: -24px; top: 38px; opacity: 0; transform: scale(.62) rotate(-7deg); }
  65%, 100% { left: 48px; top: 38px; opacity: .90; transform: scale(.76) rotate(-3deg); }
}

@keyframes input-loop-d {
  0%, 52%   { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
  59%       { left: 36px; top: 22px; opacity: .94; transform: scale(.84) rotate(2deg); }
  63%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  64%, 68%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.96) rotate(0); }
  69%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  70%       { left: -24px; top: 12px; opacity: 0; transform: scale(.58) rotate(7deg); }
  80%, 100% { left: 12px; top: 12px; opacity: .86; transform: scale(.72) rotate(4deg); }
}

@keyframes input-loop-e {
  0%, 67%   { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
  74%       { left: 48px; top: 44px; opacity: .92; transform: scale(.82) rotate(-2deg); }
  78%       { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.98) rotate(0); }
  79%, 83%  { left: calc(50% - 18px); top: 33px; opacity: 1; transform: scale(.96) rotate(0); }
  84%       { left: calc(50% - 18px); top: 33px; opacity: 0; transform: translateY(10px) scale(.40); }
  85%       { left: -24px; top: 54px; opacity: 0; transform: scale(.56) rotate(-8deg); }
  95%, 100% { left: 40px; top: 54px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}

/* Press- und Partikelzeitpunkte passend zum langsameren Einflug nach hinten geschoben. */
@keyframes press-bed-glow-sequence {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    transform: scaleY(1);
    opacity: .92;
  }
  20%, 24%, 35%, 39%, 50%, 54%, 65%, 69%, 80%, 84% {
    transform: scaleY(.54);
    opacity: .66;
  }
}

@keyframes press-top-sequence {
  0%, 18%, 33%, 48%, 63%, 78%, 100% { transform: translateY(0); }
  20%, 24%, 35%, 39%, 50%, 54%, 65%, 69%, 80%, 84% { transform: translateY(12px); }
}

@keyframes press-bottom-sequence {
  0%, 18%, 33%, 48%, 63%, 78%, 100% { transform: translateY(0); }
  20%, 24%, 35%, 39%, 50%, 54%, 65%, 69%, 80%, 84% { transform: translateY(-12px); }
}

/* Rechts: Ausgabe kommt nach dem Pressen, nicht sofort beim Einflug. */
@keyframes output-queue-a-final {
  0%, 24%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  26%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  31%, 88%  { right: 12px; top: 34px; opacity: .98; transform: scale(.94) rotate(2deg); }
  93%, 100% { right: 12px; top: 34px; opacity: 0; transform: scale(.94) rotate(2deg); }
}

@keyframes output-queue-b-final {
  0%, 39%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  41%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  46%, 91%  { right: 34px; top: 22px; opacity: .94; transform: scale(.86) rotate(-3deg); }
  96%, 100% { right: 34px; top: 22px; opacity: 0; transform: scale(.86) rotate(-3deg); }
}

@keyframes output-queue-c-final {
  0%, 54%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  56%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  61%, 94%  { right: 58px; top: 39px; opacity: .90; transform: scale(.78) rotate(3deg); }
  99%, 100% { right: 58px; top: 39px; opacity: 0; transform: scale(.78) rotate(3deg); }
}

@keyframes output-queue-d-final {
  0%, 69%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  71%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  76%, 98%  { right: 22px; top: 52px; opacity: .86; transform: scale(.72) rotate(4deg); }
  100%      { right: 22px; top: 52px; opacity: 0; transform: scale(.72) rotate(4deg); }
}

@keyframes output-queue-e-final {
  0%, 84%   { right: calc(50% - 14px); top: 33px; opacity: 0; transform: translateY(8px) scale(.46); }
  86%       { right: calc(50% - 14px); top: 33px; opacity: 1; transform: translateY(0) scale(.68); }
  91%, 100% { right: 64px; top: 12px; opacity: .82; transform: scale(.68) rotate(-4deg); }
}

/* Partikel länger stehen lassen und nicht vor Ende abbrechen. */
@keyframes particle-burst-final {
  0%, 19.6%   { opacity: 0; transform: translate(0,0) scale(.22); }
  20.0%       { opacity: 1; transform: translate(0,0) scale(.34); }
  23.0%       { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  29.0%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  34.0%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  49.6%       { opacity: 0; transform: translate(0,0) scale(.22); }
  50.0%       { opacity: 1; transform: translate(0,0) scale(.34); }
  53.0%       { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  59.0%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  64.0%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  79.6%       { opacity: 0; transform: translate(0,0) scale(.22); }
  80.0%       { opacity: 1; transform: translate(0,0) scale(.34); }
  83.0%       { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  89.0%       { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  94.0%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%        { opacity: 0; transform: translate(0,0) scale(.22); }
}

@keyframes particle-burst-final-alt {
  0%, 34.6%    { opacity: 0; transform: translate(0,0) scale(.22); }
  35.0%        { opacity: 1; transform: translate(0,0) scale(.34); }
  38.0%        { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  44.0%        { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  49.0%        { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  64.6%        { opacity: 0; transform: translate(0,0) scale(.22); }
  65.0%        { opacity: 1; transform: translate(0,0) scale(.34); }
  68.0%        { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  74.0%        { opacity: .55; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  79.0%        { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%         { opacity: 0; transform: translate(0,0) scale(.22); }
}


/* Demo 0.46 Final++++++++: Tabs kompakter, Bild-Text Panel, Presse-Partikel schneller und Press-Glow stärker. */
.advanced-tabs-nav {
  gap: 5px !important;
  padding: 4px !important;
}

.advanced-tab {
  padding: 6px 10px !important;
  font-size: .67rem !important;
}

.advanced-title span {
  font-size: .64rem !important;
}

.image-text-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
  gap: 12px;
  padding: 12px;
}

.image-text-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 14px;
  background: rgba(15, 23, 42, .34);
  box-sizing: border-box;
}

.image-text-main textarea {
  min-height: 90px;
  resize: vertical;
}

.color-input {
  width: 100%;
  min-height: 40px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .92);
}

.text-bg-grid {
  align-items: stretch;
}

.image-text-bg-toggle {
  display: flex;
  align-items: center;
}

.image-text-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 25% 25%, rgba(56, 189, 248, .28), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, .85), rgba(30, 41, 59, .88));
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.image-text-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 6, 23, .04), rgba(2, 6, 23, .26));
}

.image-text-overlay {
  position: absolute;
  z-index: 2;
  display: inline-block;
  max-width: calc(100% - 16px);
  border-radius: 12px;
  line-height: 1.18;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 10px 22px rgba(2, 6, 23, .18);
}

.image-text-overlay.no-bg {
  box-shadow: none;
}

.image-text-overlay span {
  display: inline;
}

.image-text-pos-top-left .image-text-overlay { top: var(--it-margin, 4%); left: var(--it-margin, 4%); }
.image-text-pos-top-center .image-text-overlay { top: var(--it-margin, 4%); left: 50%; transform: translateX(-50%); text-align: center; }
.image-text-pos-top-right .image-text-overlay { top: var(--it-margin, 4%); right: var(--it-margin, 4%); text-align: right; }
.image-text-pos-center-left .image-text-overlay { top: 50%; left: var(--it-margin, 4%); transform: translateY(-50%); }
.image-text-pos-center .image-text-overlay { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.image-text-pos-center-right .image-text-overlay { top: 50%; right: var(--it-margin, 4%); transform: translateY(-50%); text-align: right; }
.image-text-pos-bottom-left .image-text-overlay { bottom: var(--it-margin, 4%); left: var(--it-margin, 4%); }
.image-text-pos-bottom-center .image-text-overlay { bottom: var(--it-margin, 4%); left: 50%; transform: translateX(-50%); text-align: center; }
.image-text-pos-bottom-right .image-text-overlay { right: var(--it-margin, 4%); bottom: var(--it-margin, 4%); text-align: right; }

/* Presse-Partikel schneller und mit Glühen im Hintergrund beim Pressen. */
.press-machine::before {
  animation: press-bed-glow-sequence-fast 42s cubic-bezier(.22,.78,.28,1) infinite !important;
}

.press-particle,
.press-particle-alt {
  animation-duration: 42s !important;
}

.press-particle {
  box-shadow: 0 0 var(--glow, 14px) rgba(125, 211, 252, .82) !important;
}

@keyframes press-bed-glow-sequence-fast {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    transform: scaleY(1);
    opacity: .88;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 18px rgba(125, 211, 252, .15);
  }
  20%, 22.8%, 35%, 37.8%, 50%, 52.8%, 65%, 67.8%, 80%, 82.8% {
    transform: scaleY(.54);
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 28px rgba(125, 211, 252, .34), 0 0 40px rgba(56, 189, 248, .18);
  }
}

@keyframes particle-burst-final {
  0%, 19.8%   { opacity: 0; transform: translate(0,0) scale(.18); }
  20.0%       { opacity: 1; transform: translate(0,0) scale(.32); }
  21.1%       { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .74)); }
  23.0%       { opacity: .60; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .96)); }
  24.8%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  49.8%       { opacity: 0; transform: translate(0,0) scale(.18); }
  50.0%       { opacity: 1; transform: translate(0,0) scale(.32); }
  51.1%       { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .74)); }
  53.0%       { opacity: .60; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .96)); }
  54.8%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  79.8%       { opacity: 0; transform: translate(0,0) scale(.18); }
  80.0%       { opacity: 1; transform: translate(0,0) scale(.32); }
  81.1%       { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .74)); }
  83.0%       { opacity: .60; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .96)); }
  84.8%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%        { opacity: 0; transform: translate(0,0) scale(.18); }
}

@keyframes particle-burst-final-alt {
  0%, 34.8%    { opacity: 0; transform: translate(0,0) scale(.18); }
  35.0%        { opacity: 1; transform: translate(0,0) scale(.32); }
  36.1%        { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .74)); }
  38.0%        { opacity: .60; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .96)); }
  39.8%        { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  64.8%        { opacity: 0; transform: translate(0,0) scale(.18); }
  65.0%        { opacity: 1; transform: translate(0,0) scale(.32); }
  66.1%        { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .74)); }
  68.0%        { opacity: .60; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .96)); }
  69.8%        { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%         { opacity: 0; transform: translate(0,0) scale(.18); }
}

@media (max-width: 980px) {
  .image-text-layout {
    grid-template-columns: 1fr;
  }
}

/* Demo 0.46 fix: Bild-Text wie Wasserzeichen aufbauen, kompakter und sauberer ausrichten. */
.image-text-layout-compact {
  gap: 12px;
  padding: 12px;
  align-items: stretch;
}

.image-text-control-card {
  padding: 11px 12px;
}

.image-text-card-head {
  margin-bottom: 9px;
}

.image-text-content-setting textarea {
  min-height: 74px;
  resize: vertical;
}

.image-text-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.image-text-inline-grid + .image-text-inline-grid {
  margin-top: 2px;
}

.image-text-inline-grid .setting {
  min-width: 0;
}

.image-text-bg-row {
  align-items: stretch;
}

.image-text-bg-toggle .check {
  min-height: 100%;
  align-items: flex-start;
}

.image-text-bg-toggle .check span {
  gap: 2px;
}

.image-text-bg-toggle .check strong {
  display: block;
}

.image-text-preview-card {
  display: flex;
  flex-direction: column;
}

.image-text-stage {
  flex: 1 1 auto;
  min-height: 100%;
}

.image-text-overlay {
  padding: 1.6% 2.1%;
  font-size: clamp(18px, 2.2vw, 28px);
}

.image-text-hint {
  margin-top: 8px;
}

@media (max-width: 980px) {
  .image-text-inline-grid {
    grid-template-columns: 1fr;
  }
}

/* Demo 0.46 fix: Partikel deutlich schneller + sichtbares Glow-Flackern hinter der Presse. */
.press-glow {
  display: block !important;
  position: absolute !important;
  left: 2px !important;
  right: 2px !important;
  top: 15px !important;
  bottom: 15px !important;
  border-radius: 18px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(191, 236, 255, .88) 0%, rgba(125, 211, 252, .42) 28%, rgba(56, 189, 248, .18) 52%, rgba(56, 189, 248, 0) 72%) !important;
  filter: blur(8px) saturate(1.08) !important;
  mix-blend-mode: screen !important;
  opacity: 0;
  animation: press-glow-flicker-strong 42s linear infinite !important;
}

.press-machine::before {
  animation: press-bed-glow-flicker-strong 42s linear infinite !important;
}

.press-particle,
.press-particle-alt {
  animation-duration: 42s !important;
  animation-timing-function: linear !important;
}

.press-particle {
  width: var(--size, 5px) !important;
  height: var(--size, 5px) !important;
  box-shadow:
    0 0 calc(var(--glow, 12px) * 0.7) rgba(255, 255, 255, .82),
    0 0 var(--glow, 12px) rgba(125, 211, 252, .96),
    0 0 calc(var(--glow, 12px) * 1.75) rgba(56, 189, 248, .46) !important;
}

.press-particle-alt {
  box-shadow:
    0 0 calc(var(--glow, 12px) * 0.52) rgba(255, 255, 255, .72),
    0 0 calc(var(--glow, 12px) * 0.95) rgba(125, 211, 252, .78),
    0 0 calc(var(--glow, 12px) * 1.45) rgba(14, 165, 233, .38) !important;
}

@keyframes press-bed-glow-flicker-strong {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    transform: scaleY(1);
    opacity: .92;
    background: radial-gradient(circle at 50% 50%, rgba(191, 236, 255, .54) 0%, rgba(125, 211, 252, .26) 48%, rgba(56, 189, 248, .10) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 16px rgba(125,211,252,.18);
  }
  19.4%, 20.2%, 21.0%, 21.8%, 22.6%, 23.4%,
  34.4%, 35.2%, 36.0%, 36.8%, 37.6%, 38.4%,
  49.4%, 50.2%, 51.0%, 51.8%, 52.6%, 53.4%,
  64.4%, 65.2%, 66.0%, 66.8%, 67.6%, 68.4%,
  79.4%, 80.2%, 81.0%, 81.8%, 82.6%, 83.4% {
    transform: scaleY(.52);
    opacity: 1;
    background: radial-gradient(circle at 50% 50%, rgba(231, 248, 255, .96) 0%, rgba(125, 211, 252, .58) 28%, rgba(56, 189, 248, .22) 68%, rgba(56, 189, 248, 0) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 22px rgba(125,211,252,.34), 0 0 34px rgba(56,189,248,.22);
  }
  19.8%, 20.6%, 21.4%, 22.2%, 23.0%,
  34.8%, 35.6%, 36.4%, 37.2%, 38.0%,
  49.8%, 50.6%, 51.4%, 52.2%, 53.0%,
  64.8%, 65.6%, 66.4%, 67.2%, 68.0%,
  79.8%, 80.6%, 81.4%, 82.2%, 83.0% {
    filter: brightness(1.18);
  }
}

@keyframes press-glow-flicker-strong {
  0%, 18%, 33%, 48%, 63%, 78%, 100% { opacity: 0; transform: scale(.86, .66); }
  19.2%, 20.0%, 20.8%, 21.6%, 22.4%, 23.2%,
  34.2%, 35.0%, 35.8%, 36.6%, 37.4%, 38.2%,
  49.2%, 50.0%, 50.8%, 51.6%, 52.4%, 53.2%,
  64.2%, 65.0%, 65.8%, 66.6%, 67.4%, 68.2%,
  79.2%, 80.0%, 80.8%, 81.6%, 82.4%, 83.2% {
    opacity: .92;
    transform: scale(1.02, .82);
  }
  19.6%, 20.4%, 21.2%, 22.0%, 22.8%,
  34.6%, 35.4%, 36.2%, 37.0%, 37.8%,
  49.6%, 50.4%, 51.2%, 52.0%, 52.8%,
  64.6%, 65.4%, 66.2%, 67.0%, 67.8%,
  79.6%, 80.4%, 81.2%, 82.0%, 82.8% {
    opacity: .54;
    transform: scale(.94, .76);
  }
}

@keyframes particle-burst-snap {
  0%, 19.7% { opacity: 0; transform: translate(0,0) scale(.18); }
  20.0% { opacity: 1; transform: translate(0,0) scale(.34); }
  20.6% { opacity: .98; transform: translate(calc(var(--dx) * .48), calc(var(--dy) * .48)) scale(calc(var(--s) * .78)); }
  21.3% { opacity: .74; transform: translate(calc(var(--dx) * .82), calc(var(--dy) * .82)) scale(calc(var(--s) * .96)); }
  22.0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  0%, 49.7% { }
  50.0% { opacity: 1; transform: translate(0,0) scale(.34); }
  50.6% { opacity: .98; transform: translate(calc(var(--dx) * .48), calc(var(--dy) * .48)) scale(calc(var(--s) * .78)); }
  51.3% { opacity: .74; transform: translate(calc(var(--dx) * .82), calc(var(--dy) * .82)) scale(calc(var(--s) * .96)); }
  52.0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  0%, 79.7% { }
  80.0% { opacity: 1; transform: translate(0,0) scale(.34); }
  80.6% { opacity: .98; transform: translate(calc(var(--dx) * .48), calc(var(--dy) * .48)) scale(calc(var(--s) * .78)); }
  81.3% { opacity: .74; transform: translate(calc(var(--dx) * .82), calc(var(--dy) * .82)) scale(calc(var(--s) * .96)); }
  82.0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.18); }
}

@keyframes particle-burst-snap-alt {
  0%, 34.7% { opacity: 0; transform: translate(0,0) scale(.18); }
  35.0% { opacity: 1; transform: translate(0,0) scale(.34); }
  35.6% { opacity: .98; transform: translate(calc(var(--dx) * .48), calc(var(--dy) * .48)) scale(calc(var(--s) * .78)); }
  36.3% { opacity: .74; transform: translate(calc(var(--dx) * .82), calc(var(--dy) * .82)) scale(calc(var(--s) * .96)); }
  37.0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  0%, 64.7% { }
  65.0% { opacity: 1; transform: translate(0,0) scale(.34); }
  65.6% { opacity: .98; transform: translate(calc(var(--dx) * .48), calc(var(--dy) * .48)) scale(calc(var(--s) * .78)); }
  66.3% { opacity: .74; transform: translate(calc(var(--dx) * .82), calc(var(--dy) * .82)) scale(calc(var(--s) * .96)); }
  67.0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.18); }
}

.press-particle { animation-name: particle-burst-snap !important; }
.press-particle-alt { animation-name: particle-burst-snap-alt !important; }

/* Demo 0.46 final fix: Bild-Text Vorschau wie Wasserzeichen, kompakter und mit Untermenü. */
.image-text-layout-compact {
  gap: 10px !important;
  padding: 10px !important;
  grid-template-columns: minmax(0, 1.14fr) minmax(250px, .86fr) !important;
}

.image-text-control-card,
.image-text-preview-card {
  padding: 10px !important;
}

.image-text-card-head {
  margin-bottom: 8px !important;
}

.image-text-card-head span {
  font-size: .65rem !important;
}

.image-text-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.image-text-subtab {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 10px;
  background: rgba(2, 6, 23, .22);
  color: rgba(226, 232, 240, .84);
  font: inherit;
  font-size: .68rem;
  font-weight: 780;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.image-text-subtab:hover {
  border-color: rgba(56, 189, 248, .24);
  color: #fff;
}

.image-text-subtab.active {
  background: linear-gradient(180deg, rgba(56, 189, 248, .22), rgba(14, 165, 233, .14));
  border-color: rgba(56, 189, 248, .34);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(56,189,248,.08);
}

.image-text-subpanel {
  display: none;
}

.image-text-subpanel.active {
  display: block;
}

.image-text-content-setting textarea {
  min-height: 68px !important;
}

.image-text-inline-grid.compact-gap {
  gap: 8px 10px !important;
}

.image-text-inline-grid.compact-gap + .image-text-inline-grid.compact-gap,
.image-text-subpanel .image-text-inline-grid.compact-gap:first-of-type {
  margin-top: 8px !important;
}

.image-text-bg-toggle .check {
  padding: 10px 11px !important;
}

.image-text-bg-toggle .check span {
  font-size: .67rem;
  line-height: 1.25;
}

.image-text-preview-card {
  align-self: start;
}

.image-text-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9 !important;
  min-height: unset !important;
  background:
    radial-gradient(circle at 25% 25%, rgba(56, 189, 248, .28), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, .85), rgba(30, 41, 59, .88)) !important;
  background-size: cover !important;
  background-position: center !important;
}

.image-text-preview-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-text-stage::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 6, 23, .04), rgba(2, 6, 23, .30)) !important;
}

.image-text-overlay {
  z-index: 2 !important;
  max-width: calc(100% - 18px);
  padding: 1.3% 1.8% !important;
  font-size: clamp(16px, 1.75vw, 24px) !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .17);
}

.image-text-hint {
  margin-top: 9px;
  font-size: .66rem;
}

@media (max-width: 980px) {
  .image-text-layout-compact {
    grid-template-columns: 1fr !important;
  }
}

/* Demo 0.46 final fix: Partikel viel schneller und stärkeres Glow-Flackern beim Pressen. */
.press-glow {
  display: block !important;
  opacity: 0;
  left: -6px !important;
  right: -6px !important;
  top: 10px !important;
  bottom: 10px !important;
  z-index: 2 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0%, rgba(191,236,255,.82) 18%, rgba(125,211,252,.48) 34%, rgba(56,189,248,.18) 52%, rgba(56,189,248,0) 74%) !important;
  filter: blur(10px) saturate(1.18) !important;
  mix-blend-mode: screen !important;
  animation: press-glow-blast 42s linear infinite !important;
}

.press-machine::before {
  animation: press-bed-flash 42s linear infinite !important;
}

.press-particle,
.press-particle-alt {
  animation-duration: 42s !important;
  animation-timing-function: linear !important;
}

.press-particle {
  box-shadow:
    0 0 5px rgba(255,255,255,.92),
    0 0 calc(var(--glow, 12px) * .88) rgba(125,211,252,1),
    0 0 calc(var(--glow, 12px) * 1.8) rgba(56,189,248,.62) !important;
}

.press-particle-alt {
  box-shadow:
    0 0 4px rgba(255,255,255,.76),
    0 0 calc(var(--glow, 12px) * .72) rgba(125,211,252,.90),
    0 0 calc(var(--glow, 12px) * 1.35) rgba(14,165,233,.50) !important;
}

@keyframes press-bed-flash {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    transform: scaleY(1);
    opacity: .93;
    background: radial-gradient(circle at 50% 50%, rgba(191,236,255,.50) 0%, rgba(125,211,252,.24) 48%, rgba(56,189,248,.08) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 16px rgba(125,211,252,.18);
  }
  19.2%, 19.8%, 20.4%, 21.0%, 21.6%, 22.2%, 22.8%, 23.4%,
  34.2%, 34.8%, 35.4%, 36.0%, 36.6%, 37.2%, 37.8%, 38.4%,
  49.2%, 49.8%, 50.4%, 51.0%, 51.6%, 52.2%, 52.8%, 53.4%,
  64.2%, 64.8%, 65.4%, 66.0%, 66.6%, 67.2%, 67.8%, 68.4%,
  79.2%, 79.8%, 80.4%, 81.0%, 81.6%, 82.2%, 82.8%, 83.4% {
    transform: scaleY(.52);
    opacity: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0%, rgba(191,236,255,.88) 15%, rgba(125,211,252,.62) 34%, rgba(56,189,248,.26) 62%, rgba(56,189,248,0) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 24px rgba(191,236,255,.44), 0 0 40px rgba(56,189,248,.26);
  }
}

@keyframes press-glow-blast {
  0%, 18%, 33%, 48%, 63%, 78%, 100% { opacity: 0; transform: scale(.78, .58); }
  19.15%, 19.75%, 20.35%, 20.95%, 21.55%, 22.15%, 22.75%, 23.35%,
  34.15%, 34.75%, 35.35%, 35.95%, 36.55%, 37.15%, 37.75%, 38.35%,
  49.15%, 49.75%, 50.35%, 50.95%, 51.55%, 52.15%, 52.75%, 53.35%,
  64.15%, 64.75%, 65.35%, 65.95%, 66.55%, 67.15%, 67.75%, 68.35%,
  79.15%, 79.75%, 80.35%, 80.95%, 81.55%, 82.15%, 82.75%, 83.35% {
    opacity: .98;
    transform: scale(1.06, .92);
  }
  19.45%, 20.05%, 20.65%, 21.25%, 21.85%, 22.45%, 23.05%,
  34.45%, 35.05%, 35.65%, 36.25%, 36.85%, 37.45%, 38.05%,
  49.45%, 50.05%, 50.65%, 51.25%, 51.85%, 52.45%, 53.05%,
  64.45%, 65.05%, 65.65%, 66.25%, 66.85%, 67.45%, 68.05%,
  79.45%, 80.05%, 80.65%, 81.25%, 81.85%, 82.45%, 83.05% {
    opacity: .46;
    transform: scale(.92, .74);
  }
}

@keyframes particle-burst-lightning {
  0%, 19.84% { opacity: 0; transform: translate(0,0) scale(.16); }
  19.98% { opacity: 1; transform: translate(0,0) scale(.38); }
  20.22% { opacity: .98; transform: translate(calc(var(--dx) * .60), calc(var(--dy) * .60)) scale(calc(var(--s) * .84)); }
  20.52% { opacity: .56; transform: translate(calc(var(--dx) * .90), calc(var(--dy) * .90)) scale(calc(var(--s) * 1.02)); }
  20.86% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  49.84% { opacity: 0; transform: translate(0,0) scale(.16); }
  49.98% { opacity: 1; transform: translate(0,0) scale(.38); }
  50.22% { opacity: .98; transform: translate(calc(var(--dx) * .60), calc(var(--dy) * .60)) scale(calc(var(--s) * .84)); }
  50.52% { opacity: .56; transform: translate(calc(var(--dx) * .90), calc(var(--dy) * .90)) scale(calc(var(--s) * 1.02)); }
  50.86% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  79.84% { opacity: 0; transform: translate(0,0) scale(.16); }
  79.98% { opacity: 1; transform: translate(0,0) scale(.38); }
  80.22% { opacity: .98; transform: translate(calc(var(--dx) * .60), calc(var(--dy) * .60)) scale(calc(var(--s) * .84)); }
  80.52% { opacity: .56; transform: translate(calc(var(--dx) * .90), calc(var(--dy) * .90)) scale(calc(var(--s) * 1.02)); }
  80.86% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.16); }
}

@keyframes particle-burst-lightning-alt {
  0%, 34.84% { opacity: 0; transform: translate(0,0) scale(.16); }
  34.98% { opacity: 1; transform: translate(0,0) scale(.38); }
  35.22% { opacity: .98; transform: translate(calc(var(--dx) * .60), calc(var(--dy) * .60)) scale(calc(var(--s) * .84)); }
  35.52% { opacity: .56; transform: translate(calc(var(--dx) * .90), calc(var(--dy) * .90)) scale(calc(var(--s) * 1.02)); }
  35.86% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  64.84% { opacity: 0; transform: translate(0,0) scale(.16); }
  64.98% { opacity: 1; transform: translate(0,0) scale(.38); }
  65.22% { opacity: .98; transform: translate(calc(var(--dx) * .60), calc(var(--dy) * .60)) scale(calc(var(--s) * .84)); }
  65.52% { opacity: .56; transform: translate(calc(var(--dx) * .90), calc(var(--dy) * .90)) scale(calc(var(--s) * 1.02)); }
  65.86% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.16); }
}

.press-particle { animation-name: particle-burst-lightning !important; }
.press-particle-alt { animation-name: particle-burst-lightning-alt !important; }


/* Demo 0.46 fix: Bild-Text Hintergrund korrekt steuerbar. */
.image-text-subtabs {
  gap: 4px !important;
  margin-bottom: 7px !important;
}

.image-text-subtab {
  min-height: 26px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  font-size: .62rem !important;
  line-height: 1 !important;
}

.image-text-control-card {
  padding: 9px 10px !important;
}

.image-text-card-head {
  margin-bottom: 7px !important;
}

.image-text-card-head strong {
  font-size: .80rem !important;
}

.image-text-card-head span {
  font-size: .62rem !important;
  line-height: 1.22 !important;
}

.image-text-content-setting textarea {
  min-height: 58px !important;
}

.image-text-inline-grid.compact-gap {
  gap: 7px 9px !important;
}

.image-text-inline-grid.compact-gap + .image-text-inline-grid.compact-gap {
  margin-top: 6px !important;
}

.image-text-mini-note {
  display: flex;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(56, 189, 248, .10);
  border-radius: 11px;
  background: rgba(2, 6, 23, .16);
  color: rgba(203, 213, 225, .70);
  font-size: .63rem;
  line-height: 1.26;
}

.image-text-overlay {
  position: absolute;
  isolation: isolate;
  background: transparent !important;
  overflow: visible;
}

.image-text-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 12px;
  background: var(--it-bg-color, rgba(6, 17, 31, .55));
  transform: scale(var(--it-bg-scale, 1));
  transform-origin: center center;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .20);
  pointer-events: none;
}

.image-text-overlay.no-bg::before {
  opacity: 0;
}

/* Demo 0.46 fix: Partikel 50% langsamer als der letzte schnelle Stand, Glow deutlich sichtbar. */
.press-machine {
  filter: drop-shadow(0 0 0 transparent);
}

.press-glow {
  display: block !important;
  opacity: 0;
  left: -14px !important;
  right: -14px !important;
  top: 4px !important;
  bottom: 4px !important;
  z-index: 2 !important;
  border-radius: 28px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(191,236,255,.95) 16%, rgba(125,211,252,.62) 34%, rgba(56,189,248,.30) 56%, rgba(56,189,248,0) 78%) !important;
  filter: blur(12px) saturate(1.35) !important;
  mix-blend-mode: screen !important;
  animation: press-glow-super-visible 42s linear infinite !important;
}

.press-machine::before {
  animation: press-bed-super-visible 42s linear infinite !important;
}

.press-top,
.press-base {
  animation-timing-function: cubic-bezier(.22, .78, .28, 1) !important;
}

/* Burst von ca. 0,37s auf ca. 0,56s verlangsamt. */
@keyframes particle-burst-medium {
  0%, 19.80% { opacity: 0; transform: translate(0,0) scale(.16); }
  20.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  20.40% { opacity: .98; transform: translate(calc(var(--dx) * .46), calc(var(--dy) * .46)) scale(calc(var(--s) * .78)); }
  20.92% { opacity: .66; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  21.32% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  49.80% { opacity: 0; transform: translate(0,0) scale(.16); }
  50.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  50.40% { opacity: .98; transform: translate(calc(var(--dx) * .46), calc(var(--dy) * .46)) scale(calc(var(--s) * .78)); }
  50.92% { opacity: .66; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  51.32% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  79.80% { opacity: 0; transform: translate(0,0) scale(.16); }
  80.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  80.40% { opacity: .98; transform: translate(calc(var(--dx) * .46), calc(var(--dy) * .46)) scale(calc(var(--s) * .78)); }
  80.92% { opacity: .66; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  81.32% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.16); }
}

@keyframes particle-burst-medium-alt {
  0%, 34.80% { opacity: 0; transform: translate(0,0) scale(.16); }
  35.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  35.40% { opacity: .98; transform: translate(calc(var(--dx) * .46), calc(var(--dy) * .46)) scale(calc(var(--s) * .78)); }
  35.92% { opacity: .66; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  36.32% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  64.80% { opacity: 0; transform: translate(0,0) scale(.16); }
  65.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  65.40% { opacity: .98; transform: translate(calc(var(--dx) * .46), calc(var(--dy) * .46)) scale(calc(var(--s) * .78)); }
  65.92% { opacity: .66; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(calc(var(--s) * .98)); }
  66.32% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.16); }
}

.press-particle { animation-name: particle-burst-medium !important; }
.press-particle-alt { animation-name: particle-burst-medium-alt !important; }

@keyframes press-glow-super-visible {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    opacity: 0;
    transform: scale(.70, .46);
  }
  19.0%, 19.7%, 20.4%, 21.1%, 21.8%, 22.5%, 23.2%, 23.9%,
  34.0%, 34.7%, 35.4%, 36.1%, 36.8%, 37.5%, 38.2%, 38.9%,
  49.0%, 49.7%, 50.4%, 51.1%, 51.8%, 52.5%, 53.2%, 53.9%,
  64.0%, 64.7%, 65.4%, 66.1%, 66.8%, 67.5%, 68.2%, 68.9%,
  79.0%, 79.7%, 80.4%, 81.1%, 81.8%, 82.5%, 83.2%, 83.9% {
    opacity: 1;
    transform: scale(1.18, .98);
  }
  19.35%, 20.05%, 20.75%, 21.45%, 22.15%, 22.85%, 23.55%,
  34.35%, 35.05%, 35.75%, 36.45%, 37.15%, 37.85%, 38.55%,
  49.35%, 50.05%, 50.75%, 51.45%, 52.15%, 52.85%, 53.55%,
  64.35%, 65.05%, 65.75%, 66.45%, 67.15%, 67.85%, 68.55%,
  79.35%, 80.05%, 80.75%, 81.45%, 82.15%, 82.85%, 83.55% {
    opacity: .36;
    transform: scale(.92, .70);
  }
}

@keyframes press-bed-super-visible {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    transform: scaleY(1);
    opacity: .94;
    background: radial-gradient(circle at 50% 50%, rgba(191,236,255,.56) 0%, rgba(125,211,252,.27) 48%, rgba(56,189,248,.10) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(125,211,252,.20);
  }
  19.0%, 19.7%, 20.4%, 21.1%, 21.8%, 22.5%, 23.2%, 23.9%,
  34.0%, 34.7%, 35.4%, 36.1%, 36.8%, 37.5%, 38.2%, 38.9%,
  49.0%, 49.7%, 50.4%, 51.1%, 51.8%, 52.5%, 53.2%, 53.9%,
  64.0%, 64.7%, 65.4%, 66.1%, 66.8%, 67.5%, 68.2%, 68.9%,
  79.0%, 79.7%, 80.4%, 81.1%, 81.8%, 82.5%, 83.2%, 83.9% {
    transform: scaleY(.50);
    opacity: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(191,236,255,.92) 17%, rgba(125,211,252,.64) 36%, rgba(56,189,248,.28) 65%, rgba(56,189,248,0) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 28px rgba(191,236,255,.54), 0 0 48px rgba(56,189,248,.34);
  }
}


/* Demo 0.46 final: Bild-Text Background/Drag Fix */
.image-text-mini-note {
  display: none !important;
}

.image-text-overlay {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.02 !important;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.image-text-overlay.is-dragging {
  cursor: grabbing;
}

.image-text-overlay span,
#imageTextOverlayContent {
  display: block !important;
  line-height: 1.02 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.image-text-overlay::before {
  inset: 0 !important;
  border-radius: 12px;
  transform: scale(var(--it-bg-scale, 1)) !important;
  transform-origin: center center !important;
}

/* Custom position from mouse-drag in preview */
.image-text-pos-custom .image-text-overlay {
  position: absolute !important;
}

/* Make font size / weight preview changes win against previous important rules. */
.image-text-overlay {
  font-size: inherit;
}

/* Presse: glow als sichtbares eigenes Feld hinter den Balken, nicht subtil. */
.press-glow {
  display: block !important;
  position: absolute !important;
  left: -20px !important;
  right: -20px !important;
  top: -2px !important;
  bottom: -2px !important;
  z-index: 2 !important;
  opacity: 0;
  border-radius: 30px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,1) 0%,
      rgba(215,244,255,.98) 14%,
      rgba(125,211,252,.72) 32%,
      rgba(56,189,248,.36) 54%,
      rgba(56,189,248,0) 78%) !important;
  filter: blur(13px) saturate(1.45) !important;
  mix-blend-mode: screen !important;
  animation: press-glow-obvious 42s linear infinite !important;
}

.press-machine::before {
  z-index: 1 !important;
  animation: press-bed-obvious 42s linear infinite !important;
}

.press-top,
.press-base {
  z-index: 9 !important;
}

/* 50% langsamer als der letzte schnelle Partikelstand. */
@keyframes particle-burst-user-medium {
  0%, 19.78% { opacity: 0; transform: translate(0,0) scale(.16); }
  20.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  20.42% { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  20.95% { opacity: .66; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .98)); }
  21.36% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  49.78% { opacity: 0; transform: translate(0,0) scale(.16); }
  50.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  50.42% { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  50.95% { opacity: .66; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .98)); }
  51.36% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  79.78% { opacity: 0; transform: translate(0,0) scale(.16); }
  80.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  80.42% { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  80.95% { opacity: .66; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .98)); }
  81.36% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.16); }
}

@keyframes particle-burst-user-medium-alt {
  0%, 34.78% { opacity: 0; transform: translate(0,0) scale(.16); }
  35.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  35.42% { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  35.95% { opacity: .66; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .98)); }
  36.36% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  64.78% { opacity: 0; transform: translate(0,0) scale(.16); }
  65.00% { opacity: 1; transform: translate(0,0) scale(.38); }
  65.42% { opacity: .98; transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .42)) scale(calc(var(--s) * .78)); }
  65.95% { opacity: .66; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .98)); }
  66.36% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(0,0) scale(.16); }
}

.press-particle { animation-name: particle-burst-user-medium !important; }
.press-particle-alt { animation-name: particle-burst-user-medium-alt !important; }

@keyframes press-glow-obvious {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    opacity: 0;
    transform: scale(.70, .44);
  }
  19.0%, 19.55%, 20.1%, 20.65%, 21.2%, 21.75%, 22.3%, 22.85%, 23.4%,
  34.0%, 34.55%, 35.1%, 35.65%, 36.2%, 36.75%, 37.3%, 37.85%, 38.4%,
  49.0%, 49.55%, 50.1%, 50.65%, 51.2%, 51.75%, 52.3%, 52.85%, 53.4%,
  64.0%, 64.55%, 65.1%, 65.65%, 66.2%, 66.75%, 67.3%, 67.85%, 68.4%,
  79.0%, 79.55%, 80.1%, 80.65%, 81.2%, 81.75%, 82.3%, 82.85%, 83.4% {
    opacity: 1;
    transform: scale(1.22, .98);
  }
  19.28%, 19.83%, 20.38%, 20.93%, 21.48%, 22.03%, 22.58%, 23.13%,
  34.28%, 34.83%, 35.38%, 35.93%, 36.48%, 37.03%, 37.58%, 38.13%,
  49.28%, 49.83%, 50.38%, 50.93%, 51.48%, 52.03%, 52.58%, 53.13%,
  64.28%, 64.83%, 65.38%, 65.93%, 66.48%, 67.03%, 67.58%, 68.13%,
  79.28%, 79.83%, 80.38%, 80.93%, 81.48%, 82.03%, 82.58%, 83.13% {
    opacity: .30;
    transform: scale(.88, .70);
  }
}

@keyframes press-bed-obvious {
  0%, 18%, 33%, 48%, 63%, 78%, 100% {
    transform: scaleY(1);
    opacity: .94;
    background: radial-gradient(circle at 50% 50%, rgba(191,236,255,.55) 0%, rgba(125,211,252,.26) 48%, rgba(56,189,248,.10) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(125,211,252,.18);
  }
  19.0%, 19.55%, 20.1%, 20.65%, 21.2%, 21.75%, 22.3%, 22.85%, 23.4%,
  34.0%, 34.55%, 35.1%, 35.65%, 36.2%, 36.75%, 37.3%, 37.85%, 38.4%,
  49.0%, 49.55%, 50.1%, 50.65%, 51.2%, 51.75%, 52.3%, 52.85%, 53.4%,
  64.0%, 64.55%, 65.1%, 65.65%, 66.2%, 66.75%, 67.3%, 67.85%, 68.4%,
  79.0%, 79.55%, 80.1%, 80.65%, 81.2%, 81.75%, 82.3%, 82.85%, 83.4% {
    transform: scaleY(.48);
    opacity: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(215,244,255,.96) 14%, rgba(125,211,252,.66) 36%, rgba(56,189,248,.28) 65%, rgba(56,189,248,0) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 28px rgba(215,244,255,.54), 0 0 52px rgba(56,189,248,.36);
  }
}


/* Demo 0.46 final text cleanup + separate background width/height controls */
.image-text-card-head span,
.image-text-hint,
.image-text-mini-note,
#imageTextPreviewNote {
  display: none !important;
}

.image-text-bg-toggle .check span {
  gap: 0 !important;
}

.image-text-bg-toggle .check strong {
  margin: 0 !important;
}

.image-text-overlay::before {
  transform: scale(var(--it-bg-scale-x, 1), var(--it-bg-scale-y, 1)) !important;
  transform-origin: center center !important;
}


/* Demo 0.48: Bild-Text Hintergrund als klarer Aktiv-Button, Abstand-Regler entfernt. */
.image-text-bg-toggle {
  display: flex;
}

.image-text-bg-button {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(2, 6, 23, .26);
  color: rgba(203, 213, 225, .74);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .01em;
  user-select: none;
  transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .16s ease;
}

.image-text-bg-button input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.image-text-bg-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1em;
}

.image-text-bg-button:has(input:checked) {
  color: #f8fafc;
  border-color: rgba(56, 189, 248, .42);
  background:
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, .28), transparent 58%),
    linear-gradient(180deg, rgba(56, 189, 248, .30), rgba(14, 165, 233, .18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 18px rgba(56, 189, 248, .16);
}

.image-text-bg-button:active {
  transform: translateY(1px);
}

/* Falls alte Check-Styles greifen, im Bild-Text-Hintergrund überschreiben. */
.image-text-bg-toggle .check {
  display: none !important;
}

/* Demo 0.48 Nacharbeit: kleinere Bild-Text-Schrift, sichtbarer Press-Glow und kompaktere Profi-Tabs. */
.settings-advanced-tabs .advanced-tabs-head {
  padding: 7px 10px 6px !important;
  gap: 8px !important;
  min-height: 0 !important;
}

.settings-advanced-tabs .advanced-title {
  gap: 1px !important;
}

.settings-advanced-tabs .advanced-title strong {
  font-size: .78rem !important;
  line-height: 1.04 !important;
}

.settings-advanced-tabs .advanced-title span {
  font-size: .58rem !important;
  line-height: 1.05 !important;
}

.settings-advanced-tabs .advanced-tabs-nav {
  gap: 3px !important;
  padding: 3px !important;
  min-height: 0 !important;
}

.settings-advanced-tabs .advanced-tab {
  min-height: 22px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: .60rem !important;
  line-height: 1 !important;
}

.press-machine {
  overflow: visible !important;
  isolation: isolate !important;
}

.press-machine::before {
  z-index: 1 !important;
  animation: press-bed-v048-final-glow 42s linear infinite !important;
}

.press-glow {
  display: block !important;
  position: absolute !important;
  left: -18px !important;
  right: -18px !important;
  top: 1px !important;
  bottom: 1px !important;
  z-index: 7 !important;
  opacity: 0;
  pointer-events: none !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,1) 0%,
      rgba(222,247,255,.98) 13%,
      rgba(125,211,252,.76) 30%,
      rgba(56,189,248,.42) 52%,
      rgba(56,189,248,0) 78%) !important;
  filter: blur(10px) saturate(1.55) !important;
  mix-blend-mode: screen !important;
  animation: press-glow-v048-final-flicker 42s linear infinite !important;
}

.press-top,
.press-base {
  z-index: 12 !important;
}

@keyframes press-glow-v048-final-flicker {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    opacity: 0;
    transform: scale(.72, .46);
  }
  19.00%, 19.42%, 19.84%, 20.26%, 20.68%, 21.10%, 21.52%, 21.94%, 22.36%, 22.78%, 23.20%, 23.62%,
  34.00%, 34.42%, 34.84%, 35.26%, 35.68%, 36.10%, 36.52%, 36.94%, 37.36%, 37.78%, 38.20%, 38.62%,
  49.00%, 49.42%, 49.84%, 50.26%, 50.68%, 51.10%, 51.52%, 51.94%, 52.36%, 52.78%, 53.20%, 53.62%,
  64.00%, 64.42%, 64.84%, 65.26%, 65.68%, 66.10%, 66.52%, 66.94%, 67.36%, 67.78%, 68.20%, 68.62%,
  79.00%, 79.42%, 79.84%, 80.26%, 80.68%, 81.10%, 81.52%, 81.94%, 82.36%, 82.78%, 83.20%, 83.62% {
    opacity: 1;
    transform: scale(1.28, 1.02);
  }
  19.21%, 19.63%, 20.05%, 20.47%, 20.89%, 21.31%, 21.73%, 22.15%, 22.57%, 22.99%, 23.41%, 23.83%,
  34.21%, 34.63%, 35.05%, 35.47%, 35.89%, 36.31%, 36.73%, 37.15%, 37.57%, 37.99%, 38.41%, 38.83%,
  49.21%, 49.63%, 50.05%, 50.47%, 50.89%, 51.31%, 51.73%, 52.15%, 52.57%, 52.99%, 53.41%, 53.83%,
  64.21%, 64.63%, 65.05%, 65.47%, 65.89%, 66.31%, 66.73%, 67.15%, 67.57%, 67.99%, 68.41%, 68.83%,
  79.21%, 79.63%, 80.05%, 80.47%, 80.89%, 81.31%, 81.73%, 82.15%, 82.57%, 82.99%, 83.41%, 83.83% {
    opacity: .34;
    transform: scale(.94, .74);
  }
}

@keyframes press-bed-v048-final-glow {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    transform: scaleY(1);
    opacity: .82;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 15px rgba(125,211,252,.14);
  }
  19.00%, 20.26%, 21.52%, 22.78%, 34.00%, 35.26%, 36.52%, 37.78%, 49.00%, 50.26%, 51.52%, 52.78%,
  64.00%, 65.26%, 66.52%, 67.78%, 79.00%, 80.26%, 81.52%, 82.78% {
    transform: scaleY(.46);
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 26px rgba(222,247,255,.54), 0 0 50px rgba(56,189,248,.38);
  }
  19.63%, 20.89%, 22.15%, 23.41%, 34.63%, 35.89%, 37.15%, 38.41%, 49.63%, 50.89%, 52.15%, 53.41%,
  64.63%, 65.89%, 67.15%, 68.41%, 79.63%, 80.89%, 82.15%, 83.41% {
    transform: scaleY(.58);
    opacity: .72;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(125,211,252,.24);
  }
}


/* Demo 0.48 Nacharbeit 2: Glow exakt mittig in der Presse, Bilder 20% schneller, Partikel länger sichtbar. */
.compressor-animation {
  --compressor-cycle-v049: 33.6s;
}

.compressor-input,
.compressor-output,
.compressor-input-a,
.compressor-input-b,
.compressor-input-c,
.compressor-input-d,
.compressor-input-e,
.compressor-output-a,
.compressor-output-b,
.compressor-output-c,
.compressor-output-d,
.compressor-output-e,
.press-top,
.press-base,
.press-machine::before {
  animation-duration: var(--compressor-cycle-v049) !important;
}

.press-machine {
  overflow: visible !important;
  isolation: isolate !important;
}

.press-machine::before {
  z-index: 1 !important;
  animation-name: press-bed-v049-fast-center !important;
  animation-duration: var(--compressor-cycle-v049) !important;
  animation-timing-function: linear !important;
}

.press-glow {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: 68px !important;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  opacity: 0;
  pointer-events: none !important;
  z-index: 7 !important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,1) 0%,
      rgba(225,248,255,.98) 12%,
      rgba(125,211,252,.78) 31%,
      rgba(56,189,248,.48) 54%,
      rgba(56,189,248,0) 82%) !important;
  filter: blur(9px) saturate(1.65) !important;
  mix-blend-mode: screen !important;
  animation: press-glow-v049-center-flicker var(--compressor-cycle-v049) linear infinite !important;
}

.press-top,
.press-base {
  z-index: 12 !important;
}

.press-particle,
.press-particle-alt {
  animation-duration: var(--compressor-cycle-v049) !important;
}

.press-particle {
  animation-name: particle-burst-v049-long !important;
}

.press-particle-alt {
  animation-name: particle-burst-v049-long-alt !important;
}

@keyframes press-glow-v049-center-flicker {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.62, .42);
  }
  19.00%, 19.42%, 19.84%, 20.26%, 20.68%, 21.10%, 21.52%, 21.94%, 22.36%, 22.78%, 23.20%, 23.62%,
  34.00%, 34.42%, 34.84%, 35.26%, 35.68%, 36.10%, 36.52%, 36.94%, 37.36%, 37.78%, 38.20%, 38.62%,
  49.00%, 49.42%, 49.84%, 50.26%, 50.68%, 51.10%, 51.52%, 51.94%, 52.36%, 52.78%, 53.20%, 53.62%,
  64.00%, 64.42%, 64.84%, 65.26%, 65.68%, 66.10%, 66.52%, 66.94%, 67.36%, 67.78%, 68.20%, 68.62%,
  79.00%, 79.42%, 79.84%, 80.26%, 80.68%, 81.10%, 81.52%, 81.94%, 82.36%, 82.78%, 83.20%, 83.62% {
    opacity: .98;
    transform: translate(-50%, -50%) scale(1.24, 1.08);
  }
  19.21%, 19.63%, 20.05%, 20.47%, 20.89%, 21.31%, 21.73%, 22.15%, 22.57%, 22.99%, 23.41%, 23.83%,
  34.21%, 34.63%, 35.05%, 35.47%, 35.89%, 36.31%, 36.73%, 37.15%, 37.57%, 37.99%, 38.41%, 38.83%,
  49.21%, 49.63%, 50.05%, 50.47%, 50.89%, 51.31%, 51.73%, 52.15%, 52.57%, 52.99%, 53.41%, 53.83%,
  64.21%, 64.63%, 65.05%, 65.47%, 65.89%, 66.31%, 66.73%, 67.15%, 67.57%, 67.99%, 68.41%, 68.83%,
  79.21%, 79.63%, 80.05%, 80.47%, 80.89%, 81.31%, 81.73%, 82.15%, 82.57%, 82.99%, 83.41%, 83.83% {
    opacity: .36;
    transform: translate(-50%, -50%) scale(.88, .74);
  }
}

@keyframes press-bed-v049-fast-center {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    transform: scaleY(1);
    opacity: .84;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 15px rgba(125,211,252,.14);
  }
  19.00%, 20.26%, 21.52%, 22.78%, 34.00%, 35.26%, 36.52%, 37.78%, 49.00%, 50.26%, 51.52%, 52.78%,
  64.00%, 65.26%, 66.52%, 67.78%, 79.00%, 80.26%, 81.52%, 82.78% {
    transform: scaleY(.46);
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 28px rgba(222,247,255,.58), 0 0 52px rgba(56,189,248,.42);
  }
  19.63%, 20.89%, 22.15%, 23.41%, 34.63%, 35.89%, 37.15%, 38.41%, 49.63%, 50.89%, 52.15%, 53.41%,
  64.63%, 65.89%, 67.15%, 68.41%, 79.63%, 80.89%, 82.15%, 83.41% {
    transform: scaleY(.58);
    opacity: .74;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 20px rgba(125,211,252,.28);
  }
}

@keyframes particle-burst-v049-long {
  0%, 19.6%   { opacity: 0; transform: translate(0,0) scale(.22); }
  20.0%       { opacity: 1; transform: translate(0,0) scale(.34); }
  23.5%       { opacity: .98; transform: translate(calc(var(--dx) * .40), calc(var(--dy) * .40)) scale(calc(var(--s) * .76)); }
  31.0%       { opacity: .62; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .96)); }
  42.0%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  49.6%       { opacity: 0; transform: translate(0,0) scale(.22); }
  50.0%       { opacity: 1; transform: translate(0,0) scale(.34); }
  53.5%       { opacity: .98; transform: translate(calc(var(--dx) * .40), calc(var(--dy) * .40)) scale(calc(var(--s) * .76)); }
  61.0%       { opacity: .62; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .96)); }
  72.0%       { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  79.6%       { opacity: 0; transform: translate(0,0) scale(.22); }
  80.0%       { opacity: 1; transform: translate(0,0) scale(.34); }
  83.5%       { opacity: .98; transform: translate(calc(var(--dx) * .40), calc(var(--dy) * .40)) scale(calc(var(--s) * .76)); }
  91.0%       { opacity: .62; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .96)); }
  100%        { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
}

@keyframes particle-burst-v049-long-alt {
  0%, 34.6%    { opacity: 0; transform: translate(0,0) scale(.22); }
  35.0%        { opacity: 1; transform: translate(0,0) scale(.34); }
  38.5%        { opacity: .98; transform: translate(calc(var(--dx) * .40), calc(var(--dy) * .40)) scale(calc(var(--s) * .76)); }
  46.0%        { opacity: .62; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .96)); }
  57.0%        { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }

  64.6%        { opacity: 0; transform: translate(0,0) scale(.22); }
  65.0%        { opacity: 1; transform: translate(0,0) scale(.34); }
  68.5%        { opacity: .98; transform: translate(calc(var(--dx) * .40), calc(var(--dy) * .40)) scale(calc(var(--s) * .76)); }
  76.0%        { opacity: .62; transform: translate(calc(var(--dx) * .76), calc(var(--dy) * .76)) scale(calc(var(--s) * .96)); }
  87.0%        { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  100%         { opacity: 0; transform: translate(0,0) scale(.22); }
}

@media (prefers-reduced-motion: reduce) {
  .press-glow {
    animation: none !important;
    opacity: .22 !important;
    transform: translate(-50%, -50%) scale(.92, .72) !important;
  }
}

/* Demo 0.48 Nacharbeit: Profi-Menüpunkte wieder etwas höher. */
.settings-advanced-tabs .advanced-tabs-nav {
  padding: 4px !important;
}

.settings-advanced-tabs .advanced-tab {
  min-height: 27px !important;
  padding: 6px 9px !important;
  font-size: .63rem !important;
  line-height: 1 !important;
}

/* Demo 0.48: Zielgröße aus Qualität nach links unter Formate verschoben. */
.output-format-setting {
  margin-bottom: 10px;
}

.target-size-setting {
  margin: 0 0 13px;
  padding: 10px 10px 9px;
  border: 1px solid rgba(56, 189, 248, .13);
  border-radius: 13px;
  background:
    radial-gradient(circle at 14% 10%, rgba(56, 189, 248, .12), transparent 34%),
    rgba(2, 6, 23, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.target-size-setting > label:first-child {
  color: #dbeafe;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .015em;
}

.target-size-setting .hint {
  margin-top: -1px;
  font-size: .64rem;
  line-height: 1.28;
}

/* Demo 0.48 Nacharbeit: Pressbalken werden beim Zusammenpressen leicht neongruen. */
.press-top {
  animation-name: press-top-five-cycle-neongreen !important;
}

.press-base {
  animation-name: press-bottom-five-cycle-neongreen !important;
}

.press-glow {
  animation-name: press-glow-v050-center-green-flicker !important;
}

.press-machine::before {
  animation-name: press-bed-v050-fast-center-green !important;
}

@keyframes press-top-five-cycle-neongreen {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    transform: translateY(0);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .94) 54%, rgba(43, 109, 160, .96) 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, .16), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.02);
  }
  19.00%, 20.26%, 21.52%, 22.78%, 34.00%, 35.26%, 36.52%, 37.78%, 49.00%, 50.26%, 51.52%, 52.78%,
  64.00%, 65.26%, 66.52%, 67.78%, 79.00%, 80.26%, 81.52%, 82.78% {
    transform: translateY(12px);
    background: linear-gradient(180deg, rgba(172, 255, 205, .98) 0%, rgba(74, 255, 153, .88) 52%, rgba(18, 145, 91, .94) 100%);
    box-shadow: 0 0 12px rgba(110, 255, 180, .32), 0 0 28px rgba(42, 255, 138, .26), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.18) brightness(1.06);
  }
  19.63%, 20.89%, 22.15%, 23.41%, 34.63%, 35.89%, 37.15%, 38.41%, 49.63%, 50.89%, 52.15%, 53.41%,
  64.63%, 65.89%, 67.15%, 68.41%, 79.63%, 80.89%, 82.15%, 83.41% {
    transform: translateY(12px);
    background: linear-gradient(180deg, rgba(138, 244, 186, .96) 0%, rgba(56, 220, 135, .82) 54%, rgba(19, 126, 85, .92) 100%);
    box-shadow: 0 0 10px rgba(110, 255, 180, .24), 0 0 22px rgba(42, 255, 138, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.12) brightness(1.03);
  }
}

@keyframes press-bottom-five-cycle-neongreen {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    transform: translateY(0);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .94) 54%, rgba(43, 109, 160, .96) 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, .16), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.02);
  }
  19.00%, 20.26%, 21.52%, 22.78%, 34.00%, 35.26%, 36.52%, 37.78%, 49.00%, 50.26%, 51.52%, 52.78%,
  64.00%, 65.26%, 66.52%, 67.78%, 79.00%, 80.26%, 81.52%, 82.78% {
    transform: translateY(-12px);
    background: linear-gradient(180deg, rgba(172, 255, 205, .98) 0%, rgba(74, 255, 153, .88) 52%, rgba(18, 145, 91, .94) 100%);
    box-shadow: 0 0 12px rgba(110, 255, 180, .32), 0 0 28px rgba(42, 255, 138, .26), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.18) brightness(1.06);
  }
  19.63%, 20.89%, 22.15%, 23.41%, 34.63%, 35.89%, 37.15%, 38.41%, 49.63%, 50.89%, 52.15%, 53.41%,
  64.63%, 65.89%, 67.15%, 68.41%, 79.63%, 80.89%, 82.15%, 83.41% {
    transform: translateY(-12px);
    background: linear-gradient(180deg, rgba(138, 244, 186, .96) 0%, rgba(56, 220, 135, .82) 54%, rgba(19, 126, 85, .92) 100%);
    box-shadow: 0 0 10px rgba(110, 255, 180, .24), 0 0 22px rgba(42, 255, 138, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.12) brightness(1.03);
  }
}

@keyframes press-glow-v050-center-green-flicker {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.62, .42);
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(225,248,255,.98) 12%, rgba(125,211,252,.78) 31%, rgba(56,189,248,.48) 54%, rgba(56,189,248,0) 82%);
  }
  19.00%, 19.42%, 19.84%, 20.26%, 20.68%, 21.10%, 21.52%, 21.94%, 22.36%, 22.78%, 23.20%, 23.62%,
  34.00%, 34.42%, 34.84%, 35.26%, 35.68%, 36.10%, 36.52%, 36.94%, 37.36%, 37.78%, 38.20%, 38.62%,
  49.00%, 49.42%, 49.84%, 50.26%, 50.68%, 51.10%, 51.52%, 51.94%, 52.36%, 52.78%, 53.20%, 53.62%,
  64.00%, 64.42%, 64.84%, 65.26%, 65.68%, 66.10%, 66.52%, 66.94%, 67.36%, 67.78%, 68.20%, 68.62%,
  79.00%, 79.42%, 79.84%, 80.26%, 80.68%, 81.10%, 81.52%, 81.94%, 82.36%, 82.78%, 83.20%, 83.62% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1.18, 1.02);
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0%, rgba(211,255,230,.95) 14%, rgba(96,255,170,.74) 36%, rgba(42,255,138,.46) 58%, rgba(42,255,138,0) 84%);
  }
  19.21%, 19.63%, 20.05%, 20.47%, 20.89%, 21.31%, 21.73%, 22.15%, 22.57%, 22.99%, 23.41%, 23.83%,
  34.21%, 34.63%, 35.05%, 35.47%, 35.89%, 36.31%, 36.73%, 37.15%, 37.57%, 37.99%, 38.41%, 38.83%,
  49.21%, 49.63%, 50.05%, 50.47%, 50.89%, 51.31%, 51.73%, 52.15%, 52.57%, 52.99%, 53.41%, 53.83%,
  64.21%, 64.63%, 65.05%, 65.47%, 65.89%, 66.31%, 66.73%, 67.15%, 67.57%, 67.99%, 68.41%, 68.83%,
  79.21%, 79.63%, 80.05%, 80.47%, 80.89%, 81.31%, 81.73%, 82.15%, 82.57%, 82.99%, 83.41%, 83.83% {
    opacity: .32;
    transform: translate(-50%, -50%) scale(.84, .70);
    background: radial-gradient(circle at 50% 50%, rgba(225,255,238,.90) 0%, rgba(96,255,170,.58) 36%, rgba(42,255,138,.28) 60%, rgba(42,255,138,0) 84%);
  }
}

@keyframes press-bed-v050-fast-center-green {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    transform: scaleY(1);
    opacity: .84;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 15px rgba(125,211,252,.14);
  }
  19.00%, 20.26%, 21.52%, 22.78%, 34.00%, 35.26%, 36.52%, 37.78%, 49.00%, 50.26%, 51.52%, 52.78%,
  64.00%, 65.26%, 66.52%, 67.78%, 79.00%, 80.26%, 81.52%, 82.78% {
    transform: scaleY(.46);
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(220,255,235,.16), 0 0 24px rgba(102,255,178,.42), 0 0 48px rgba(42,255,138,.28);
  }
  19.63%, 20.89%, 22.15%, 23.41%, 34.63%, 35.89%, 37.15%, 38.41%, 49.63%, 50.89%, 52.15%, 53.41%,
  64.63%, 65.89%, 67.15%, 68.41%, 79.63%, 80.89%, 82.15%, 83.41% {
    transform: scaleY(.58);
    opacity: .76;
    box-shadow: inset 0 0 0 1px rgba(220,255,235,.10), 0 0 18px rgba(102,255,178,.26);
  }
}


/* Demo 0.48 Nacharbeit: Pressbalken im Pressmoment deutlich neongruen + Advanced-Header etwas hoeher. */
.settings-advanced-tabs .advanced-tabs-head {
  padding: 11px 12px 10px !important;
  min-height: 44px !important;
  gap: 10px !important;
}

.settings-advanced-tabs .advanced-title strong {
  font-size: .91rem !important;
  line-height: 1.12 !important;
}

.press-top,
.press-base {
  animation-duration: var(--compressor-cycle-v049, 33.6s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  border-color: rgba(125, 211, 252, .38) !important;
}

.press-top {
  animation-name: press-top-five-cycle-neon-solid-final !important;
}

.press-base {
  animation-name: press-bottom-five-cycle-neon-solid-final !important;
}

@keyframes press-top-five-cycle-neon-solid-final {
  0%, 18.80%, 24.20%, 33.80%, 39.20%, 48.80%, 54.20%, 63.80%, 69.20%, 78.80%, 84.20%, 100% {
    transform: translateY(0);
    border-color: rgba(125, 211, 252, .38);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .95) 52%, rgba(43, 109, 160, .97) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 12px rgba(56, 189, 248, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.04) brightness(1);
  }
  19.10%, 19.95%, 20.80%, 21.65%, 22.50%, 23.35%,
  34.10%, 34.95%, 35.80%, 36.65%, 37.50%, 38.35%,
  49.10%, 49.95%, 50.80%, 51.65%, 52.50%, 53.35%,
  64.10%, 64.95%, 65.80%, 66.65%, 67.50%, 68.35%,
  79.10%, 79.95%, 80.80%, 81.65%, 82.50%, 83.35% {
    transform: translateY(12px);
    border-color: rgba(190, 255, 218, .95);
    background: linear-gradient(180deg, rgba(238, 255, 244, 1) 0%, rgba(109, 255, 171, .98) 26%, rgba(24, 255, 125, .96) 64%, rgba(9, 154, 86, .98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 0 16px rgba(129, 255, 190, .86), 0 0 34px rgba(30, 255, 130, .56), 0 0 58px rgba(22, 163, 74, .32), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.42) brightness(1.18);
  }
  19.52%, 20.37%, 21.22%, 22.07%, 22.92%, 23.77%,
  34.52%, 35.37%, 36.22%, 37.07%, 37.92%, 38.77%,
  49.52%, 50.37%, 51.22%, 52.07%, 52.92%, 53.77%,
  64.52%, 65.37%, 66.22%, 67.07%, 67.92%, 68.77%,
  79.52%, 80.37%, 81.22%, 82.07%, 82.92%, 83.77% {
    transform: translateY(12px);
    border-color: rgba(146, 255, 195, .88);
    background: linear-gradient(180deg, rgba(210, 255, 229, .98) 0%, rgba(72, 255, 152, .93) 38%, rgba(15, 214, 105, .94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .50), 0 0 13px rgba(129, 255, 190, .64), 0 0 28px rgba(30, 255, 130, .42), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.30) brightness(1.11);
  }
}

@keyframes press-bottom-five-cycle-neon-solid-final {
  0%, 18.80%, 24.20%, 33.80%, 39.20%, 48.80%, 54.20%, 63.80%, 69.20%, 78.80%, 84.20%, 100% {
    transform: translateY(0);
    border-color: rgba(125, 211, 252, .38);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .95) 52%, rgba(43, 109, 160, .97) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 12px rgba(56, 189, 248, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.04) brightness(1);
  }
  19.10%, 19.95%, 20.80%, 21.65%, 22.50%, 23.35%,
  34.10%, 34.95%, 35.80%, 36.65%, 37.50%, 38.35%,
  49.10%, 49.95%, 50.80%, 51.65%, 52.50%, 53.35%,
  64.10%, 64.95%, 65.80%, 66.65%, 67.50%, 68.35%,
  79.10%, 79.95%, 80.80%, 81.65%, 82.50%, 83.35% {
    transform: translateY(-12px);
    border-color: rgba(190, 255, 218, .95);
    background: linear-gradient(180deg, rgba(238, 255, 244, 1) 0%, rgba(109, 255, 171, .98) 26%, rgba(24, 255, 125, .96) 64%, rgba(9, 154, 86, .98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 0 16px rgba(129, 255, 190, .86), 0 0 34px rgba(30, 255, 130, .56), 0 0 58px rgba(22, 163, 74, .32), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.42) brightness(1.18);
  }
  19.52%, 20.37%, 21.22%, 22.07%, 22.92%, 23.77%,
  34.52%, 35.37%, 36.22%, 37.07%, 37.92%, 38.77%,
  49.52%, 50.37%, 51.22%, 52.07%, 52.92%, 53.77%,
  64.52%, 65.37%, 66.22%, 67.07%, 67.92%, 68.77%,
  79.52%, 80.37%, 81.22%, 82.07%, 82.92%, 83.77% {
    transform: translateY(-12px);
    border-color: rgba(146, 255, 195, .88);
    background: linear-gradient(180deg, rgba(210, 255, 229, .98) 0%, rgba(72, 255, 152, .93) 38%, rgba(15, 214, 105, .94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .50), 0 0 13px rgba(129, 255, 190, .64), 0 0 28px rgba(30, 255, 130, .42), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.30) brightness(1.11);
  }
}

/* Demo 0.48 Nacharbeit: Qualitäts-Prüfung auf 5 Stufen, Profi-Buttons etwas groesser, Neon direkt auf Pressbalken. */
.quality-scan-scale {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  font-size: .58rem !important;
}

.quality-scan-scale span {
  text-align: center !important;
  white-space: nowrap;
}

.quality-scan-scale span:first-child {
  text-align: left !important;
}

.quality-scan-scale span:last-child {
  text-align: right !important;
}

.settings-advanced-tabs .advanced-tabs-nav {
  padding: 5px !important;
  gap: 5px !important;
}

.settings-advanced-tabs .advanced-tab {
  min-height: 31px !important;
  padding: 7px 11px !important;
  font-size: .68rem !important;
  line-height: 1.05 !important;
}

.press-top,
.press-base {
  position: absolute !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.press-top::before,
.press-base::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0;
  z-index: 2 !important;
  background:
    linear-gradient(180deg,
      rgba(245, 255, 249, 1) 0%,
      rgba(150, 255, 198, .98) 26%,
      rgba(24, 255, 125, .96) 63%,
      rgba(7, 160, 86, .98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .76),
    0 0 12px rgba(170, 255, 212, .95),
    0 0 28px rgba(36, 255, 136, .72),
    0 0 52px rgba(22, 163, 74, .46) !important;
  filter: saturate(1.45) brightness(1.18) !important;
  animation: press-bar-neon-overlay-v051 var(--compressor-cycle-v049, 33.6s) linear infinite !important;
}

@keyframes press-bar-neon-overlay-v051 {
  0%, 18.80%, 24.20%, 33.80%, 39.20%, 48.80%, 54.20%, 63.80%, 69.20%, 78.80%, 84.20%, 100% {
    opacity: 0;
    transform: scale(.98, .86);
  }
  19.10%, 19.95%, 20.80%, 21.65%, 22.50%, 23.35%,
  34.10%, 34.95%, 35.80%, 36.65%, 37.50%, 38.35%,
  49.10%, 49.95%, 50.80%, 51.65%, 52.50%, 53.35%,
  64.10%, 64.95%, 65.80%, 66.65%, 67.50%, 68.35%,
  79.10%, 79.95%, 80.80%, 81.65%, 82.50%, 83.35% {
    opacity: 1;
    transform: scale(1.04, 1.18);
  }
  19.52%, 20.37%, 21.22%, 22.07%, 22.92%, 23.77%,
  34.52%, 35.37%, 36.22%, 37.07%, 37.92%, 38.77%,
  49.52%, 50.37%, 51.22%, 52.07%, 52.92%, 53.77%,
  64.52%, 65.37%, 66.22%, 67.07%, 67.92%, 68.77%,
  79.52%, 80.37%, 81.22%, 82.07%, 82.92%, 83.77% {
    opacity: .74;
    transform: scale(1.02, 1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-top::before,
  .press-base::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Demo 0.48 Nacharbeit: Neon dezenter, Partikel schneller und weicher. */
.press-top {
  animation-name: press-top-five-cycle-neon-soft-v052 !important;
}

.press-base {
  animation-name: press-bottom-five-cycle-neon-soft-v052 !important;
}

.press-top::before,
.press-base::before {
  inset: -1px !important;
  background:
    linear-gradient(180deg,
      rgba(232, 255, 241, .82) 0%,
      rgba(122, 255, 183, .58) 34%,
      rgba(30, 220, 120, .46) 68%,
      rgba(11, 122, 78, .58) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 0 9px rgba(128, 255, 190, .32),
    0 0 18px rgba(34, 255, 132, .20) !important;
  filter: saturate(1.10) brightness(1.03) !important;
  animation-name: press-bar-neon-overlay-v052-soft !important;
  animation-timing-function: linear !important;
}

.press-glow {
  filter: blur(8px) saturate(1.10) !important;
  animation-name: press-glow-v052-soft-green !important;
}

.press-machine::before {
  animation-name: press-bed-v052-soft-green !important;
}

.press-particle,
.press-particle-alt {
  animation-duration: var(--compressor-cycle-v049, 33.6s) !important;
  animation-timing-function: linear !important;
  transform-origin: center center !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
}

.press-particle {
  animation-name: particle-burst-v052-smooth-fast !important;
}

.press-particle-alt {
  animation-name: particle-burst-v052-smooth-fast-alt !important;
}

@keyframes press-top-five-cycle-neon-soft-v052 {
  0%, 18.80%, 24.20%, 33.80%, 39.20%, 48.80%, 54.20%, 63.80%, 69.20%, 78.80%, 84.20%, 100% {
    transform: translateY(0);
    border-color: rgba(125, 211, 252, .38);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .95) 52%, rgba(43, 109, 160, .97) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 12px rgba(56, 189, 248, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.02) brightness(1);
  }
  19.10%, 19.95%, 20.80%, 21.65%, 22.50%, 23.35%,
  34.10%, 34.95%, 35.80%, 36.65%, 37.50%, 38.35%,
  49.10%, 49.95%, 50.80%, 51.65%, 52.50%, 53.35%,
  64.10%, 64.95%, 65.80%, 66.65%, 67.50%, 68.35%,
  79.10%, 79.95%, 80.80%, 81.65%, 82.50%, 83.35% {
    transform: translateY(12px);
    border-color: rgba(157, 255, 199, .62);
    background: linear-gradient(180deg, rgba(159, 230, 196, .96) 0%, rgba(80, 210, 145, .86) 50%, rgba(20, 135, 86, .94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 10px rgba(110, 255, 180, .28), 0 0 20px rgba(34, 255, 132, .18), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.13) brightness(1.04);
  }
  19.52%, 20.37%, 21.22%, 22.07%, 22.92%, 23.77%,
  34.52%, 35.37%, 36.22%, 37.07%, 37.92%, 38.77%,
  49.52%, 50.37%, 51.22%, 52.07%, 52.92%, 53.77%,
  64.52%, 65.37%, 66.22%, 67.07%, 67.92%, 68.77%,
  79.52%, 80.37%, 81.22%, 82.07%, 82.92%, 83.77% {
    transform: translateY(12px);
    border-color: rgba(132, 240, 185, .50);
    background: linear-gradient(180deg, rgba(136, 220, 184, .92) 0%, rgba(57, 185, 126, .78) 48%, rgba(19, 111, 78, .90) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 8px rgba(110, 255, 180, .20), 0 0 16px rgba(34, 255, 132, .12), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.08) brightness(1.02);
  }
}

@keyframes press-bottom-five-cycle-neon-soft-v052 {
  0%, 18.80%, 24.20%, 33.80%, 39.20%, 48.80%, 54.20%, 63.80%, 69.20%, 78.80%, 84.20%, 100% {
    transform: translateY(0);
    border-color: rgba(125, 211, 252, .38);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .95) 52%, rgba(43, 109, 160, .97) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 12px rgba(56, 189, 248, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.02) brightness(1);
  }
  19.10%, 19.95%, 20.80%, 21.65%, 22.50%, 23.35%,
  34.10%, 34.95%, 35.80%, 36.65%, 37.50%, 38.35%,
  49.10%, 49.95%, 50.80%, 51.65%, 52.50%, 53.35%,
  64.10%, 64.95%, 65.80%, 66.65%, 67.50%, 68.35%,
  79.10%, 79.95%, 80.80%, 81.65%, 82.50%, 83.35% {
    transform: translateY(-12px);
    border-color: rgba(157, 255, 199, .62);
    background: linear-gradient(180deg, rgba(159, 230, 196, .96) 0%, rgba(80, 210, 145, .86) 50%, rgba(20, 135, 86, .94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 10px rgba(110, 255, 180, .28), 0 0 20px rgba(34, 255, 132, .18), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.13) brightness(1.04);
  }
  19.52%, 20.37%, 21.22%, 22.07%, 22.92%, 23.77%,
  34.52%, 35.37%, 36.22%, 37.07%, 37.92%, 38.77%,
  49.52%, 50.37%, 51.22%, 52.07%, 52.92%, 53.77%,
  64.52%, 65.37%, 66.22%, 67.07%, 67.92%, 68.77%,
  79.52%, 80.37%, 81.22%, 82.07%, 82.92%, 83.77% {
    transform: translateY(-12px);
    border-color: rgba(132, 240, 185, .50);
    background: linear-gradient(180deg, rgba(136, 220, 184, .92) 0%, rgba(57, 185, 126, .78) 48%, rgba(19, 111, 78, .90) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 8px rgba(110, 255, 180, .20), 0 0 16px rgba(34, 255, 132, .12), 0 3px 10px rgba(2, 6, 23, .12);
    filter: saturate(1.08) brightness(1.02);
  }
}

@keyframes press-bar-neon-overlay-v052-soft {
  0%, 18.80%, 24.20%, 33.80%, 39.20%, 48.80%, 54.20%, 63.80%, 69.20%, 78.80%, 84.20%, 100% {
    opacity: 0;
    transform: scale(.99, .88);
  }
  19.10%, 19.95%, 20.80%, 21.65%, 22.50%, 23.35%,
  34.10%, 34.95%, 35.80%, 36.65%, 37.50%, 38.35%,
  49.10%, 49.95%, 50.80%, 51.65%, 52.50%, 53.35%,
  64.10%, 64.95%, 65.80%, 66.65%, 67.50%, 68.35%,
  79.10%, 79.95%, 80.80%, 81.65%, 82.50%, 83.35% {
    opacity: .32;
    transform: scale(1.02, 1.10);
  }
  19.52%, 20.37%, 21.22%, 22.07%, 22.92%, 23.77%,
  34.52%, 35.37%, 36.22%, 37.07%, 37.92%, 38.77%,
  49.52%, 50.37%, 51.22%, 52.07%, 52.92%, 53.77%,
  64.52%, 65.37%, 66.22%, 67.07%, 67.92%, 68.77%,
  79.52%, 80.37%, 81.22%, 82.07%, 82.92%, 83.77% {
    opacity: .18;
    transform: scale(1.01, 1.04);
  }
}

@keyframes press-glow-v052-soft-green {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.62, .42);
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.72) 0%, rgba(225,248,255,.60) 12%, rgba(125,211,252,.38) 31%, rgba(56,189,248,.20) 54%, rgba(56,189,248,0) 82%);
  }
  19.00%, 19.84%, 20.68%, 21.52%, 22.36%, 23.20%,
  34.00%, 34.84%, 35.68%, 36.52%, 37.36%, 38.20%,
  49.00%, 49.84%, 50.68%, 51.52%, 52.36%, 53.20%,
  64.00%, 64.84%, 65.68%, 66.52%, 67.36%, 68.20%,
  79.00%, 79.84%, 80.68%, 81.52%, 82.36%, 83.20% {
    opacity: .48;
    transform: translate(-50%, -50%) scale(1.04, .88);
    background: radial-gradient(circle at 50% 50%, rgba(238,255,246,.72) 0%, rgba(138,255,193,.50) 35%, rgba(42,255,138,.24) 60%, rgba(42,255,138,0) 84%);
  }
  19.42%, 20.26%, 21.10%, 21.94%, 22.78%, 23.62%,
  34.42%, 35.26%, 36.10%, 36.94%, 37.78%, 38.62%,
  49.42%, 50.26%, 51.10%, 51.94%, 52.78%, 53.62%,
  64.42%, 65.26%, 66.10%, 66.94%, 67.78%, 68.62%,
  79.42%, 80.26%, 81.10%, 81.94%, 82.78%, 83.62% {
    opacity: .22;
    transform: translate(-50%, -50%) scale(.84, .68);
    background: radial-gradient(circle at 50% 50%, rgba(225,255,238,.48) 0%, rgba(96,255,170,.30) 36%, rgba(42,255,138,.12) 60%, rgba(42,255,138,0) 84%);
  }
}

@keyframes press-bed-v052-soft-green {
  0%, 18.65%, 24.05%, 33.65%, 39.05%, 48.65%, 54.05%, 63.65%, 69.05%, 78.65%, 84.05%, 100% {
    transform: scaleY(1);
    opacity: .84;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 15px rgba(125,211,252,.14);
  }
  19.00%, 20.26%, 21.52%, 22.78%, 34.00%, 35.26%, 36.52%, 37.78%, 49.00%, 50.26%, 51.52%, 52.78%,
  64.00%, 65.26%, 66.52%, 67.78%, 79.00%, 80.26%, 81.52%, 82.78% {
    transform: scaleY(.46);
    opacity: .92;
    box-shadow: inset 0 0 0 1px rgba(220,255,235,.10), 0 0 16px rgba(102,255,178,.20), 0 0 28px rgba(42,255,138,.12);
  }
  19.63%, 20.89%, 22.15%, 23.41%, 34.63%, 35.89%, 37.15%, 38.41%, 49.63%, 50.89%, 52.15%, 53.41%,
  64.63%, 65.89%, 67.15%, 68.41%, 79.63%, 80.89%, 82.15%, 83.41% {
    transform: scaleY(.58);
    opacity: .72;
    box-shadow: inset 0 0 0 1px rgba(220,255,235,.07), 0 0 12px rgba(102,255,178,.14);
  }
}

@keyframes particle-burst-v052-smooth-fast {
  0%, 19.45% { opacity: 0; transform: translate(0, 0) scale(.20) rotate(0deg); }
  19.85% { opacity: .18; transform: translate(calc(var(--dx) * .03), calc(var(--dy) * .03)) scale(.25) rotate(4deg); }
  20.25% { opacity: .86; transform: translate(calc(var(--dx) * .10), calc(var(--dy) * .10)) scale(.40) rotate(10deg); }
  21.20% { opacity: .94; transform: translate(calc(var(--dx) * .30), calc(var(--dy) * .30)) scale(calc(var(--s) * .58)) rotate(18deg); }
  22.80% { opacity: .78; transform: translate(calc(var(--dx) * .56), calc(var(--dy) * .56)) scale(calc(var(--s) * .78)) rotate(28deg); }
  25.20% { opacity: .42; transform: translate(calc(var(--dx) * .84), calc(var(--dy) * .84)) scale(calc(var(--s) * .94)) rotate(38deg); }
  28.80% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(48deg); }

  49.45% { opacity: 0; transform: translate(0, 0) scale(.20) rotate(0deg); }
  49.85% { opacity: .18; transform: translate(calc(var(--dx) * .03), calc(var(--dy) * .03)) scale(.25) rotate(4deg); }
  50.25% { opacity: .86; transform: translate(calc(var(--dx) * .10), calc(var(--dy) * .10)) scale(.40) rotate(10deg); }
  51.20% { opacity: .94; transform: translate(calc(var(--dx) * .30), calc(var(--dy) * .30)) scale(calc(var(--s) * .58)) rotate(18deg); }
  52.80% { opacity: .78; transform: translate(calc(var(--dx) * .56), calc(var(--dy) * .56)) scale(calc(var(--s) * .78)) rotate(28deg); }
  55.20% { opacity: .42; transform: translate(calc(var(--dx) * .84), calc(var(--dy) * .84)) scale(calc(var(--s) * .94)) rotate(38deg); }
  58.80% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(48deg); }

  79.45% { opacity: 0; transform: translate(0, 0) scale(.20) rotate(0deg); }
  79.85% { opacity: .18; transform: translate(calc(var(--dx) * .03), calc(var(--dy) * .03)) scale(.25) rotate(4deg); }
  80.25% { opacity: .86; transform: translate(calc(var(--dx) * .10), calc(var(--dy) * .10)) scale(.40) rotate(10deg); }
  81.20% { opacity: .94; transform: translate(calc(var(--dx) * .30), calc(var(--dy) * .30)) scale(calc(var(--s) * .58)) rotate(18deg); }
  82.80% { opacity: .78; transform: translate(calc(var(--dx) * .56), calc(var(--dy) * .56)) scale(calc(var(--s) * .78)) rotate(28deg); }
  85.20% { opacity: .42; transform: translate(calc(var(--dx) * .84), calc(var(--dy) * .84)) scale(calc(var(--s) * .94)) rotate(38deg); }
  88.80% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(48deg); }
  100% { opacity: 0; transform: translate(0, 0) scale(.20) rotate(0deg); }
}

@keyframes particle-burst-v052-smooth-fast-alt {
  0%, 34.45% { opacity: 0; transform: translate(0, 0) scale(.20) rotate(0deg); }
  34.85% { opacity: .18; transform: translate(calc(var(--dx) * .03), calc(var(--dy) * .03)) scale(.25) rotate(-4deg); }
  35.25% { opacity: .84; transform: translate(calc(var(--dx) * .10), calc(var(--dy) * .10)) scale(.40) rotate(-10deg); }
  36.20% { opacity: .92; transform: translate(calc(var(--dx) * .30), calc(var(--dy) * .30)) scale(calc(var(--s) * .58)) rotate(-18deg); }
  37.80% { opacity: .74; transform: translate(calc(var(--dx) * .56), calc(var(--dy) * .56)) scale(calc(var(--s) * .78)) rotate(-28deg); }
  40.20% { opacity: .40; transform: translate(calc(var(--dx) * .84), calc(var(--dy) * .84)) scale(calc(var(--s) * .94)) rotate(-38deg); }
  43.80% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(-48deg); }

  64.45% { opacity: 0; transform: translate(0, 0) scale(.20) rotate(0deg); }
  64.85% { opacity: .18; transform: translate(calc(var(--dx) * .03), calc(var(--dy) * .03)) scale(.25) rotate(-4deg); }
  65.25% { opacity: .84; transform: translate(calc(var(--dx) * .10), calc(var(--dy) * .10)) scale(.40) rotate(-10deg); }
  66.20% { opacity: .92; transform: translate(calc(var(--dx) * .30), calc(var(--dy) * .30)) scale(calc(var(--s) * .58)) rotate(-18deg); }
  67.80% { opacity: .74; transform: translate(calc(var(--dx) * .56), calc(var(--dy) * .56)) scale(calc(var(--s) * .78)) rotate(-28deg); }
  70.20% { opacity: .40; transform: translate(calc(var(--dx) * .84), calc(var(--dy) * .84)) scale(calc(var(--s) * .94)) rotate(-38deg); }
  73.80% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(-48deg); }
  100% { opacity: 0; transform: translate(0, 0) scale(.20) rotate(0deg); }
}

/* Demo 0.48 Nacharbeit: Live-Schätzung im Qualitätsbereich. */
.quality-estimate-card {
  position: relative;
  overflow: hidden;
  padding: 11px 12px;
  border: 1px solid rgba(34, 211, 238, .22);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, .14), transparent 42%),
    linear-gradient(180deg, rgba(15, 23, 42, .62), rgba(2, 6, 23, .48));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 12px 30px rgba(2, 6, 23, .18);
}

.quality-estimate-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(226, 232, 240, .92);
  font-size: .72rem;
  letter-spacing: .01em;
  margin-bottom: 7px;
}

.quality-estimate-head .material-symbols-rounded {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(103, 232, 249, .94);
  text-shadow: 0 0 12px rgba(34, 211, 238, .36);
}

.quality-estimate-main {
  font-size: .86rem;
  font-weight: 800;
  color: rgba(240, 249, 255, .96);
  line-height: 1.2;
}

.quality-estimate-sub {
  margin-top: 5px;
  color: rgba(203, 213, 225, .72);
  font-size: .66rem;
  line-height: 1.28;
}

.quality-scan-scale {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.quality-scan-scale span {
  text-align: center !important;
}

.quality-scan-scale span:first-child {
  text-align: left !important;
}

.quality-scan-scale span:last-child {
  text-align: right !important;
}

/* Demo 0.48 Nacharbeit: Pressbalken beim Pressen sichtbar, aber leicht grün. */
.press-top,
.press-base {
  position: absolute !important;
  display: block !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.press-top::after,
.press-base::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 0;
  background:
    linear-gradient(180deg,
      rgba(235, 255, 244, .82) 0%,
      rgba(125, 255, 190, .62) 36%,
      rgba(38, 228, 132, .50) 68%,
      rgba(20, 140, 88, .54) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 0 10px rgba(113, 255, 184, .30),
    0 0 20px rgba(34, 255, 132, .18) !important;
  mix-blend-mode: screen;
  animation: press-bar-soft-green-visible-v053 var(--compressor-cycle-v049, 33.6s) linear infinite !important;
}

@keyframes press-bar-soft-green-visible-v053 {
  0%, 18.35%, 24.75%, 33.35%, 39.75%, 48.35%, 54.75%, 63.35%, 69.75%, 78.35%, 84.75%, 100% {
    opacity: 0;
    transform: scale(.98, .86);
  }
  18.85%, 19.70%, 20.55%, 21.40%, 22.25%, 23.10%, 23.95%,
  33.85%, 34.70%, 35.55%, 36.40%, 37.25%, 38.10%, 38.95%,
  48.85%, 49.70%, 50.55%, 51.40%, 52.25%, 53.10%, 53.95%,
  63.85%, 64.70%, 65.55%, 66.40%, 67.25%, 68.10%, 68.95%,
  78.85%, 79.70%, 80.55%, 81.40%, 82.25%, 83.10%, 83.95% {
    opacity: .52;
    transform: scale(1.02, 1.12);
  }
  19.28%, 20.12%, 20.98%, 21.82%, 22.68%, 23.52%,
  34.28%, 35.12%, 35.98%, 36.82%, 37.68%, 38.52%,
  49.28%, 50.12%, 50.98%, 51.82%, 52.68%, 53.52%,
  64.28%, 65.12%, 65.98%, 66.82%, 67.68%, 68.52%,
  79.28%, 80.12%, 80.98%, 81.82%, 82.68%, 83.52% {
    opacity: .34;
    transform: scale(1.01, 1.06);
  }
}

.press-top::before,
.press-base::before {
  animation-name: press-bar-neon-overlay-v053-visible !important;
}

@keyframes press-bar-neon-overlay-v053-visible {
  0%, 18.35%, 24.75%, 33.35%, 39.75%, 48.35%, 54.75%, 63.35%, 69.75%, 78.35%, 84.75%, 100% {
    opacity: 0;
    transform: scale(.99, .88);
  }
  18.85%, 20.55%, 22.25%, 23.95%,
  33.85%, 35.55%, 37.25%, 38.95%,
  48.85%, 50.55%, 52.25%, 53.95%,
  63.85%, 65.55%, 67.25%, 68.95%,
  78.85%, 80.55%, 82.25%, 83.95% {
    opacity: .38;
    transform: scale(1.02, 1.08);
  }
  19.70%, 21.40%, 23.10%,
  34.70%, 36.40%, 38.10%,
  49.70%, 51.40%, 53.10%,
  64.70%, 66.40%, 68.10%,
  79.70%, 81.40%, 83.10% {
    opacity: .24;
    transform: scale(1.01, 1.04);
  }
}


/* Demo 0.495 Nacharbeit: Pressbalken beim tatsächlichen Pressmoment leicht grün sichtbar halten. */
.press-top,
.press-base {
  overflow: visible !important;
  isolation: isolate !important;
  will-change: transform, background, box-shadow, filter !important;
}

.press-top {
  animation-name: press-top-five-cycle-green-visible-v0495 !important;
}

.press-base {
  animation-name: press-bottom-five-cycle-green-visible-v0495 !important;
}

.press-top::after,
.press-base::after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  z-index: 8 !important;
  pointer-events: none !important;
  opacity: 0;
  mix-blend-mode: normal !important;
  background: linear-gradient(180deg,
    rgba(228, 255, 240, .70) 0%,
    rgba(100, 245, 170, .52) 48%,
    rgba(22, 168, 104, .56) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 8px rgba(91, 255, 172, .24),
    0 0 15px rgba(34, 197, 94, .14) !important;
  animation: press-bar-green-overlay-v0495 var(--compressor-cycle-v049, 33.6s) linear infinite !important;
}

@keyframes press-top-five-cycle-green-visible-v0495 {
  0%, 18.70%, 24.35%, 33.70%, 39.35%, 48.70%, 54.35%, 63.70%, 69.35%, 78.70%, 84.35%, 100% {
    transform: translateY(0);
    border-color: rgba(125, 211, 252, .38);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .95) 52%, rgba(43, 109, 160, .97) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 12px rgba(56, 189, 248, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.02) brightness(1);
  }
  19.05%, 19.90%, 20.75%, 21.60%, 22.45%, 23.30%,
  34.05%, 34.90%, 35.75%, 36.60%, 37.45%, 38.30%,
  49.05%, 49.90%, 50.75%, 51.60%, 52.45%, 53.30%,
  64.05%, 64.90%, 65.75%, 66.60%, 67.45%, 68.30%,
  79.05%, 79.90%, 80.75%, 81.60%, 82.45%, 83.30% {
    transform: translateY(12px);
    border-color: rgba(134, 239, 172, .70);
    background: linear-gradient(180deg, rgba(134, 210, 184, .98) 0%, rgba(66, 188, 130, .88) 52%, rgba(18, 120, 78, .96) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 9px rgba(74, 222, 128, .26), 0 0 18px rgba(34, 197, 94, .14), 0 3px 10px rgba(2,6,23,.12);
    filter: saturate(1.12) brightness(1.035);
  }
  19.48%, 20.32%, 21.18%, 22.02%, 22.88%, 23.72%,
  34.48%, 35.32%, 36.18%, 37.02%, 37.88%, 38.72%,
  49.48%, 50.32%, 51.18%, 52.02%, 52.88%, 53.72%,
  64.48%, 65.32%, 66.18%, 67.02%, 67.88%, 68.72%,
  79.48%, 80.32%, 81.18%, 82.02%, 82.88%, 83.72% {
    transform: translateY(12px);
    border-color: rgba(110, 231, 183, .54);
    background: linear-gradient(180deg, rgba(118, 199, 182, .96) 0%, rgba(50, 162, 116, .82) 52%, rgba(18, 102, 74, .94) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 7px rgba(74, 222, 128, .20), 0 0 14px rgba(34, 197, 94, .10), 0 3px 10px rgba(2,6,23,.12);
    filter: saturate(1.08) brightness(1.02);
  }
}

@keyframes press-bottom-five-cycle-green-visible-v0495 {
  0%, 18.70%, 24.35%, 33.70%, 39.35%, 48.70%, 54.35%, 63.70%, 69.35%, 78.70%, 84.35%, 100% {
    transform: translateY(0);
    border-color: rgba(125, 211, 252, .38);
    background: linear-gradient(180deg, rgba(86, 180, 232, .98) 0%, rgba(68, 156, 210, .95) 52%, rgba(43, 109, 160, .97) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 12px rgba(56, 189, 248, .18), 0 3px 10px rgba(2, 6, 23, .10);
    filter: saturate(1.02) brightness(1);
  }
  19.05%, 19.90%, 20.75%, 21.60%, 22.45%, 23.30%,
  34.05%, 34.90%, 35.75%, 36.60%, 37.45%, 38.30%,
  49.05%, 49.90%, 50.75%, 51.60%, 52.45%, 53.30%,
  64.05%, 64.90%, 65.75%, 66.60%, 67.45%, 68.30%,
  79.05%, 79.90%, 80.75%, 81.60%, 82.45%, 83.30% {
    transform: translateY(-12px);
    border-color: rgba(134, 239, 172, .70);
    background: linear-gradient(180deg, rgba(134, 210, 184, .98) 0%, rgba(66, 188, 130, .88) 52%, rgba(18, 120, 78, .96) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 9px rgba(74, 222, 128, .26), 0 0 18px rgba(34, 197, 94, .14), 0 3px 10px rgba(2,6,23,.12);
    filter: saturate(1.12) brightness(1.035);
  }
  19.48%, 20.32%, 21.18%, 22.02%, 22.88%, 23.72%,
  34.48%, 35.32%, 36.18%, 37.02%, 37.88%, 38.72%,
  49.48%, 50.32%, 51.18%, 52.02%, 52.88%, 53.72%,
  64.48%, 65.32%, 66.18%, 67.02%, 67.88%, 68.72%,
  79.48%, 80.32%, 81.18%, 82.02%, 82.88%, 83.72% {
    transform: translateY(-12px);
    border-color: rgba(110, 231, 183, .54);
    background: linear-gradient(180deg, rgba(118, 199, 182, .96) 0%, rgba(50, 162, 116, .82) 52%, rgba(18, 102, 74, .94) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 7px rgba(74, 222, 128, .20), 0 0 14px rgba(34, 197, 94, .10), 0 3px 10px rgba(2,6,23,.12);
    filter: saturate(1.08) brightness(1.02);
  }
}

@keyframes press-bar-green-overlay-v0495 {
  0%, 18.70%, 24.35%, 33.70%, 39.35%, 48.70%, 54.35%, 63.70%, 69.35%, 78.70%, 84.35%, 100% {
    opacity: 0;
    transform: scale(.99, .90);
  }
  19.05%, 20.75%, 22.45%, 23.30%,
  34.05%, 35.75%, 37.45%, 38.30%,
  49.05%, 50.75%, 52.45%, 53.30%,
  64.05%, 65.75%, 67.45%, 68.30%,
  79.05%, 80.75%, 82.45%, 83.30% {
    opacity: .42;
    transform: scale(1.018, 1.08);
  }
  19.90%, 21.60%, 22.88%,
  34.90%, 36.60%, 37.88%,
  49.90%, 51.60%, 52.88%,
  64.90%, 66.60%, 67.88%,
  79.90%, 81.60%, 82.88% {
    opacity: .26;
    transform: scale(1.01, 1.03);
  }
}

/* Demo 0.495 Nacharbeit: Statistik-Button kompakt, Icon wieder sichtbar. */
.actions #statsOpenBtn {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  padding-inline: 13px !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.actions #statsOpenBtn .stats-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: currentColor !important;
}

.actions #statsOpenBtn .stats-btn-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

@media (max-width: 980px) {
  .actions #statsOpenBtn {
    width: 100% !important;
  }
}

/* Demo 0.495 Nacharbeit: Footer-Aktionsbuttons typografisch vereinheitlicht. */
.actions #statsOpenBtn,
.actions #homePageBtn,
.actions #infoOpenBtn,
.actions #privacyOpenBtn {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
}

@media (max-width: 640px) {
  .actions #statsOpenBtn,
  .actions #homePageBtn,
  .actions #infoOpenBtn,
  .actions #privacyOpenBtn {
    font-size: 0.72rem !important;
  }
}

@media (max-width: 430px) {
  .actions #statsOpenBtn,
  .actions #homePageBtn,
  .actions #infoOpenBtn,
  .actions #privacyOpenBtn {
    font-size: 0.68rem !important;
  }
}