/* Formate & Deliverables — werkzeugeigene Styles */
.ar-chips{display:flex;flex-wrap:wrap;gap:6px}
.ar-chip{display:inline-flex;align-items:center;gap:6px;background:var(--t-field);border:1px solid var(--t-field-edge);color:var(--ink-dim);border-radius:999px;padding:5px 11px;font-family:var(--mono);font-size:.8rem;cursor:pointer}
.ar-chip i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--c);display:inline-block}
.ar-chip[aria-pressed=true]{color:var(--ink);border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.ar-chip[aria-pressed=true] i{background:var(--c)}
.ar-chip:focus-visible{outline:2px solid var(--emerald-edge);outline-offset:2px}

.ar-file{display:block;position:relative;border:1px dashed var(--t-field-edge);border-radius:10px;padding:10px 12px;font-size:.86rem;color:var(--ink-dim);cursor:pointer;background:var(--t-field)}
.ar-file:hover{border-color:#3a3a40;color:var(--ink)}
.ar-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ar-file:focus-within{box-shadow:0 0 0 3px var(--emerald-bg);border-color:var(--emerald-edge)}

.ar-stage{position:relative;width:100%;min-height:200px;border-radius:12px;overflow:hidden;background:var(--t-field);touch-action:none;outline:none}
.ar-stage:focus-visible{box-shadow:0 0 0 2px var(--emerald-edge)}
.ar-stage.is-drop{box-shadow:inset 0 0 0 2px var(--emerald)}
.ar-canvas{position:absolute;top:0;display:block}
.ar-over{position:absolute;inset:0;width:100%;height:100%}
.ar-rect{pointer-events:stroke;cursor:default}
.ar-rect.is-movable-x{pointer-events:all;cursor:ew-resize}
.ar-rect.is-movable-y{pointer-events:all;cursor:ns-resize}
.ar-lbl{font-family:var(--mono);font-size:11px;paint-order:stroke;stroke:#0C0C0E;stroke-width:3px;pointer-events:none}

.ar-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:0}
.ar-up{color:var(--t-warn)!important}
.ar-ok{color:var(--t-ok)!important}
.ar-pngrow{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

.ar-plats{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.ar-plat{font-size:.86rem!important}
.ar-plat small{font-family:var(--mono);color:var(--ink-mute);font-size:.7rem}

.ar-matrix td{text-align:left}
.ar-matrix td small.ar-spec{display:block;font-family:var(--sans);font-size:.72rem;color:var(--ink-mute);white-space:normal;max-width:260px}
.ar-matrix td.ar-cell{text-align:center;color:var(--ink);font-size:.95rem}
.ar-matrix th:nth-child(n+3){text-align:center}
.ar-h{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin:6px 0 0}
.ar-files{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto;border:1px solid var(--hair-soft);border-radius:10px;background:var(--t-field)}
.ar-files li{padding:5px 10px;border-bottom:1px solid var(--hair-soft);font-size:.8rem}
.ar-files li:last-child{border-bottom:0}
.ar-files code{font-family:var(--mono);color:var(--ink-dim);word-break:break-all}
.ar-files .ar-more{color:var(--ink-mute)}

@media (max-width:560px){.ar-plats{grid-template-columns:1fr}}
@media print{.ar-stage,.ar-pngrow{display:none}}

/* Panels in der Eingabespalte brauchen denselben Abstand wie .tool__in */
[data-tool="aspect-ratio"] .tool__in>[data-panel],[data-tool="aspect-ratio"] .tool__out>[data-panel]{display:flex;flex-direction:column;gap:14px}
[data-tool="aspect-ratio"] .tool__out>[data-panel]{gap:16px}
[data-tool="aspect-ratio"] [hidden]{display:none!important}
.ar-plat{align-items:baseline!important;gap:6px!important}
.ar-plat input{align-self:center}
.ar-matrix th{text-transform:none}
.ar-file{padding:14px 12px;text-align:center}
/* Mobil: die Bildvorschau ist die Antwort — sie steht vor den Eingaben */
@media (max-width:900px){[data-tool="aspect-ratio"] .tool__out{order:-1}}