/* ==========================================================================
   ARO Form Step – Skeleton Screen & Fade-In
   
   Verhindert FOUC (Flash of Uninitialized Content):
   1. CSS: Form startet unsichtbar (opacity: 0) – kein Blitz
   2. JS: .aro-form-skeleton wird als Sibling VOR der Form eingefügt
   3. JS: Nach Init → Skeleton entfernt, Form blendet ein
   ========================================================================== */

/* ── Shimmer-Animation ─────────────────────────────────────────────────── */
@keyframes aro-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

/* ── Shimmer-Gradient für alle Skeleton-Elemente ───────────────────────── */
.aro-form-skeleton *,
.aro-form-skeleton::before {
    background-image: linear-gradient(
        90deg,
        rgba(128,128,128,0.06) 0%,
        rgba(128,128,128,0.16) 40%,
        rgba(128,128,128,0.06) 80%
    );
    background-size: 800px 100%;
    animation: aro-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}

/* ── Skeleton-Wrapper ──────────────────────────────────────────────────── */
.aro-form-skeleton {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    animation: none;
    background: none;
}

/* ── Progress-Zeile ────────────────────────────────────────────────────── */
.aro-skel-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 48px;
}
.aro-skel-dot {
    width: 14px;
    height: 14px;
    border-radius: 50% !important;
    flex-shrink: 0;
}
.aro-skel-connector {
    flex: 1;
    height: 2px;
    border-radius: 2px !important;
}

/* ── Titel ─────────────────────────────────────────────────────────────── */
.aro-skel-title {
    height: 28px;
    width: 55%;
    margin-bottom: 40px;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
.aro-skel-input {
    height: 44px;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 8px !important;
}
.aro-skel-input--half {
    width: 60%;
}

/* ── Label über Input ──────────────────────────────────────────────────── */
.aro-skel-label {
    height: 12px;
    width: 30%;
    margin-bottom: 8px;
    border-radius: 4px !important;
    opacity: 0.7;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.aro-skel-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    gap: 12px;
    animation: none;
    background: none;
    border-radius: 0 !important;
}
.aro-skel-btn {
    height: 44px;
    width: 130px;
    border-radius: 8px !important;
}
.aro-skel-btn--wide {
    width: 160px;
}

/* ── Form: vor Initialisierung unsichtbar ──────────────────────────────── */
form:has([data-aro-step]):not([data-aro-ready]) {
    opacity: 0;
    pointer-events: none;
}

/* ── CSS-Skeleton auf dem Parent (sichtbar VOR JS-Load) ────────────────── */
/* Greift sobald CSS lädt – kein JS nötig. Nutzt ::after damit ::before     */
/* des Parents (YOOtheme) unberührt bleibt.                                  */
*:has(> form:not([data-aro-ready]):has([data-aro-step])) {
    position: relative;
}

*:has(> form:not([data-aro-ready]):has([data-aro-step]))::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;

    background-image:
        /* Progress: 4 Punkte */
        radial-gradient(circle, rgba(128,128,128,.20) 50%, transparent 50%),
        radial-gradient(circle, rgba(128,128,128,.20) 50%, transparent 50%),
        radial-gradient(circle, rgba(128,128,128,.20) 50%, transparent 50%),
        radial-gradient(circle, rgba(128,128,128,.20) 50%, transparent 50%),
        /* Verbindungslinien */
        linear-gradient(rgba(128,128,128,.14) 0%, rgba(128,128,128,.14) 100%),
        linear-gradient(rgba(128,128,128,.14) 0%, rgba(128,128,128,.14) 100%),
        linear-gradient(rgba(128,128,128,.14) 0%, rgba(128,128,128,.14) 100%),
        /* Titel */
        linear-gradient(90deg,rgba(128,128,128,.08) 0%,rgba(128,128,128,.18) 50%,rgba(128,128,128,.08) 100%),
        /* 3 Inputs */
        linear-gradient(90deg,rgba(128,128,128,.07) 0%,rgba(128,128,128,.15) 50%,rgba(128,128,128,.07) 100%),
        linear-gradient(90deg,rgba(128,128,128,.07) 0%,rgba(128,128,128,.15) 50%,rgba(128,128,128,.07) 100%),
        linear-gradient(90deg,rgba(128,128,128,.07) 0%,rgba(128,128,128,.15) 50%,rgba(128,128,128,.07) 100%),
        /* 2 Buttons */
        linear-gradient(90deg,rgba(128,128,128,.12) 0%,rgba(128,128,128,.20) 50%,rgba(128,128,128,.12) 100%),
        linear-gradient(90deg,rgba(128,128,128,.12) 0%,rgba(128,128,128,.20) 50%,rgba(128,128,128,.12) 100%);

    background-size:
        16px 16px, 16px 16px, 16px 16px, 16px 16px,
        calc(25% - 22px) 3px, calc(25% - 22px) 3px, calc(25% - 22px) 3px,
        52% 22px,
        100% 42px, 100% 42px, 65% 42px,
        120px 42px, 150px 42px;

    background-position:
        10%  44px,  37%  44px,  63%  44px,  90%  44px,
        calc(10% + 13px) 51px,
        calc(37% + 13px) 51px,
        calc(63% + 13px) 51px,
        0    115px,
        0    180px,  0    234px,  0    288px,
        0    368px,  right 368px;

    background-repeat: no-repeat;
    animation: aro-shimmer 1.5s ease-in-out infinite;
}

/* ── Form: nach Initialisierung einblenden ─────────────────────────────── */
form:has([data-aro-step])[data-aro-ready] {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease;
}

/* ── JS-Skeleton ausblenden wenn Form ready ────────────────────────────── */
.aro-form-skeleton.aro-form-skeleton--hiding {
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}



/* ==========================================================================
   ARO Form Step – CSS

   Klassen-Übersicht:
   
   Step-Wrapper (aro-form-step-wrap):
     .aro-form-step            Jeder Schritt-Container
     .aro-form-step--active    Aktiver Schritt (sichtbar)
     .aro-form-step--hidden    Versteckter Schritt
   
   Progress-Wrapper (aro-form-step-progress):
     .aro-form-progress        Haupt-Wrapper des Progress-Elements
     .aro-progress-heading     "Schritt X von Y" Überschrift
   
   Indikator-Wrapper:
     .aro-progress-indicator                Gemeinsamer Wrapper
     .aro-progress-indicator--bar           Modifier: Balken
     .aro-progress-indicator--dots          Modifier: Punkte
     .aro-progress-indicator--numbers       Modifier: Zahlen
     .aro-progress-indicator--labels        Modifier: Schritt-Namen
   
   Items (dots / numbers / labels):
     .aro-progress-items                    Flex-Container aller Items
     .aro-progress-items--dots
     .aro-progress-items--numbers
     .aro-progress-items--labels
     .aro-progress-item                     Wrapper: Dot/Zahl + Label
     .aro-progress-item--active             Aktiver Schritt
     .aro-progress-item--completed          Abgeschlossener Schritt
   
   Dot-spezifisch:
     .aro-progress-dot                      Einzelner Punkt
     .aro-progress-dot--active
     .aro-progress-dot--completed
   
   Number-spezifisch:
     .aro-progress-number                   Einzelne Zahl
     .aro-progress-number--active
     .aro-progress-number--completed
   
   Label:
     .aro-progress-label                    Text-Label
     .aro-progress-label--active
     .aro-progress-label--completed
   
   Balken-spezifisch:
     .aro-progress-track                    Grauer Hintergrund-Balken
     .aro-progress-fill                     Farbiger Fortschritts-Balken
   ========================================================================== */

/* ── Step-Wrapper ──────────────────────────────────────────────────────────── */

.aro-form-step {
    /* Standardmäßig wird hidden-Attribut genutzt – kein display:none nötig */
}

.aro-form-step[hidden] {
    display: none !important;
}

.aro-form-step--active {
    display: block;
}

/* ── Progress-Haupt-Wrapper ──────────────────────────────────────────────── */

.aro-form-progress {
    /* Kein eigenes Styling – wird per CSS vom Nutzer gestylt */
}

/* Überschrift "Schritt X von Y" */
.aro-progress-heading {
    display: block;
    /* Margin-bottom wird per uk-margin-*-bottom gesteuert (Builder) */
}

/* ── Indikator-Wrapper ──────────────────────────────────────────────────── */

.aro-progress-indicator {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE: BAR (Balken)
   ══════════════════════════════════════════════════════════════════════════ */

.aro-progress-indicator--bar .aro-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: var(--uk-color-muted, rgba(0, 0, 0, 0.12));
    border-radius: 9999px;
    overflow: hidden;
}

.aro-progress-indicator--bar .aro-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--uk-color-primary, currentColor);
    border-radius: 9999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE: DOTS / NUMBERS / LABELS – gemeinsame Basis
   ══════════════════════════════════════════════════════════════════════════ */

.aro-progress-items {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Verbindungslinie zwischen Items via Pseudo-Element */
.aro-progress-items--dots .aro-progress-item,
.aro-progress-items--numbers .aro-progress-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* Linie rechts (nicht beim letzten Item) */
.aro-progress-items--dots .aro-progress-item:not(:last-child)::after,
.aro-progress-items--numbers .aro-progress-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 8px; /* Höhe der Hälfte des Dots */
    left: calc(50% + 8px);
    right: calc(-50% + 8px);
    height: 2px;
    background-color: var(--uk-color-muted, rgba(0, 0, 0, 0.12));
    z-index: 0;
    transition: background-color 0.3s ease;
}

.aro-progress-items--numbers .aro-progress-item:not(:last-child)::after {
    top: 16px; /* Mitte einer Zahl */
}

/* Abgeschlossene Linie */
.aro-progress-items--dots .aro-progress-item--completed::after,
.aro-progress-items--numbers .aro-progress-item--completed::after {
    background-color: var(--uk-color-primary, currentColor);
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE: DOTS
   ══════════════════════════════════════════════════════════════════════════ */

.aro-progress-dot {
    position: relative;
    z-index: 1;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--uk-color-muted, rgba(0, 0, 0, 0.2));
    border: 2px solid transparent;
    transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.aro-progress-dot--completed {
    background-color: var(--uk-color-primary, currentColor);
    border-color: var(--uk-color-primary, currentColor);
}

.aro-progress-dot--active {
    background-color: #fff;
    border-color: var(--uk-color-primary, currentColor);
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE: NUMBERS
   ══════════════════════════════════════════════════════════════════════════ */

.aro-progress-number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--uk-color-muted, rgba(0, 0, 0, 0.4));
    background-color: var(--uk-color-muted-background, rgba(0, 0, 0, 0.08));
    border: 2px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.aro-progress-number--completed {
    background-color: var(--uk-color-primary, currentColor);
    color: #fff;
    border-color: var(--uk-color-primary, currentColor);
}

.aro-progress-number--active {
    background-color: transparent;
    color: var(--uk-color-primary, currentColor);
    border-color: var(--uk-color-primary, currentColor);
    transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE: LABELS
   ══════════════════════════════════════════════════════════════════════════ */

.aro-progress-items--labels {
    gap: 8px;
}

.aro-progress-items--labels .aro-progress-item {
    display: flex;
    flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   LABELS (geteilt über alle Styles)
   ══════════════════════════════════════════════════════════════════════════ */

.aro-progress-label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--uk-color-muted, rgba(0, 0, 0, 0.4));
    transition: color 0.3s ease, font-weight 0.2s ease;
    max-width: 80px;
    white-space: nowrap;   /* kein Zeilenumbruch */
}

/* Labels-Style: keine dot/number, Label ist das Haupt-Element */
.aro-progress-items--labels .aro-progress-label {
    margin-top: 0;
    padding: 6px 12px;
    max-width: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, font-weight 0.2s ease;
}

.aro-progress-label--active {
    color: var(--uk-color-primary, currentColor);
    font-weight: 600;
}

.aro-progress-label--completed {
    color: var(--uk-color-emphasis, inherit);
    opacity: 0.7;
}

.aro-progress-items--labels .aro-progress-label--active {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--uk-color-primary, currentColor);
}

.aro-progress-items--labels .aro-progress-label--completed {
    background-color: transparent;
    opacity: 0.6;
}

/* ── Nav-Button-Wrapper ───────────────────────────────────────────────────── */

.aro-form-step-nav-wrap {
    /* Kein eigenes Styling – Layout via Builder margin/align */
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE: BAR-DOTS (Hybrid: Balken + Dots + Labels darunter)
   ══════════════════════════════════════════════════════════════════════════

   Render-Reihenfolge:
     .aro-progress-bar-dots-wrap    → Relativer Wrapper (Track + Dots-Overlay)
       .aro-progress-track          → Balken-Spur (full-width)
         .aro-progress-fill         → Fortschritts-Füllung
       .aro-progress-dots-overlay   → Dots-Zeile (absolut, zentriert auf Track)
         .aro-progress-dot          → Einzelner Dot (gebaut per JS)
     .aro-progress-labels-row       → Labels direkt darunter
       .aro-progress-label          → Schritt-Bezeichnung
   ══════════════════════════════════════════════════════════════════════════ */

.aro-progress-indicator--bar-dots .aro-progress-bar-dots-wrap {
    position: relative;
    /* Vertikaler Platz damit die Dots (Höhe) nicht abgeschnitten werden */
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Track */
.aro-progress-indicator--bar-dots .aro-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: var(--uk-color-muted, rgba(0, 0, 0, 0.15));
    border-radius: 9999px;
    overflow: visible; /* Dots sollen über den Track-Rand ragen */
}

.aro-progress-indicator--bar-dots .aro-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--uk-color-primary, currentColor);
    border-radius: 9999px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

/* Dots-Overlay: überdeckt genau den Track, Dots per space-between verteilt */
.aro-progress-indicator--bar-dots .aro-progress-dots-overlay {
    position: absolute;
    inset: 0;                    /* top/right/bottom/left: 0 relativ zum bar-dots-wrap */
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

/* Einzelner Dot im Bar-Dots Stil */
.aro-progress-indicator--bar-dots .aro-progress-dot {
    position: relative;
    z-index: 2;
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--uk-color-muted, rgba(0, 0, 0, 0.2));
    border: 2px solid var(--uk-color-muted-background, #fff);
    flex-shrink: 0;
    transition: background-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.aro-progress-indicator--bar-dots .aro-progress-dot--completed {
    background-color: var(--uk-color-primary, currentColor);
    border-color: var(--uk-color-primary, currentColor);
}

.aro-progress-indicator--bar-dots .aro-progress-dot--active {
    width: 18px;
    height: 18px;
    background-color: var(--uk-color-primary, currentColor);
    border-color: #fff;
    border-width: 3px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uk-color-primary, currentColor) 25%, transparent);
    transform: scale(1.1);
}

/* Labels-Zeile direkt unter dem Wrap */
.aro-progress-indicator--bar-dots .aro-progress-labels-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    gap: 0;
}

/* Jedes Label sitzt zentriert unter seinem Dot */
.aro-progress-indicator--bar-dots .aro-progress-label {
    flex: 1;
    display: block;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;          /* immer mittig – bündig zum Dot */
    white-space: nowrap;         /* kein Zeilenumbruch */
    color: currentColor;
    opacity: 0.3;
    transition: opacity 0.3s ease, font-weight 0.2s ease;
}

.aro-progress-indicator--bar-dots .aro-progress-label--active {
    opacity: 1;
    font-weight: 600;
}

.aro-progress-indicator--bar-dots .aro-progress-label--completed {
    opacity: 0.65;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARO FORM UPLOAD
   ══════════════════════════════════════════════════════════════════════════ */

/* Wrapper */
.aro-upload-wrap {
    position: relative;
}

/* ── Drop-Zone ──────────────────────────────────────────────────────────── */

.aro-upload-zone {
    display: block;
    width: 100%;
    cursor: pointer;
    user-select: none;
    border: 2px dashed var(--uk-color-muted, rgba(0,0,0,0.15));
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Border-Varianten */
.aro-upload-zone--border-dashed { border-style: dashed; }
.aro-upload-zone--border-solid  { border-style: solid;  }
.aro-upload-zone--border-dotted { border-style: dotted; }
.aro-upload-zone--border-none   { border: none; }

/* Ecken-Radius */
.aro-upload-zone--radius-none   { border-radius: 0; }
.aro-upload-zone--radius-small  { border-radius: 4px; }
.aro-upload-zone--radius-medium { border-radius: 12px; }
.aro-upload-zone--radius-large  { border-radius: 20px; }
.aro-upload-zone--radius-pill   { border-radius: 9999px; }

/* Drag-Over Zustand */
.aro-upload-zone--dragging {
    border-color: var(--uk-color-primary, currentColor);
    background-color: color-mix(in srgb, var(--uk-color-primary, currentColor) 6%, transparent);
}

/* ── Innerer Flex-Container ─────────────────────────────────────────────── */

.aro-upload-zone-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

/* Column: Icon über Text */
.aro-upload-zone--column .aro-upload-zone-inner {
    flex-direction: column;
    text-align: center;
}

/* Row: Icon links, Text rechts */
.aro-upload-zone--row .aro-upload-zone-inner {
    flex-direction: row;
    text-align: left;
}

/* ── Icon ───────────────────────────────────────────────────────────────── */

.aro-upload-icon {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.aro-upload-zone:hover .aro-upload-icon,
.aro-upload-zone--dragging .aro-upload-icon {
    opacity: 0.9;
}

/* ── Text-Bereich ───────────────────────────────────────────────────────── */

.aro-upload-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aro-upload-title {
    display: block;
    font-weight: 600;
}

.aro-upload-subtitle {
    display: block;
    opacity: 0.6;
    font-size: 0.875em;
}

/* Button im Label (pointer-events damit Klick auf Label geht) */
.aro-upload-btn {
    display: inline-block;
    margin-top: 8px;
    pointer-events: none;
}

/* ── Fehler ─────────────────────────────────────────────────────────────── */

.aro-upload-error {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875em;
    color: var(--uk-color-danger, #f0506e);
    background-color: color-mix(in srgb, var(--uk-color-danger, #f0506e) 10%, transparent);
}

/* ── Datei-Vorschau-Liste ────────────────────────────────────────────────── */

.aro-upload-file-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.aro-upload-file-list--cols-1 { grid-template-columns: repeat(1, 1fr); }
.aro-upload-file-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.aro-upload-file-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.aro-upload-file-list--cols-4 { grid-template-columns: repeat(4, 1fr); }
.aro-upload-file-list--cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Datei-Item ──────────────────────────────────────────────────────────── */

.aro-upload-file-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Dateiname-Position: über dem Thumbnail */
.aro-upload-file-list--name-above .aro-upload-file-item {
    flex-direction: column-reverse;
}

/* Thumbnail-Wrapper */
.aro-upload-thumb {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thumbnail-Größen: aspect-ratio Box */
.aro-upload-thumb--small  .aro-upload-thumb { aspect-ratio: 1; max-height: 80px; }
.aro-upload-thumb--medium .aro-upload-thumb { aspect-ratio: 1; max-height: 120px; }
.aro-upload-thumb--large  .aro-upload-thumb { aspect-ratio: 1; max-height: 180px; }

.aro-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Nicht-Bild Dateien */
.aro-upload-thumb--file {
    flex-direction: column;
    gap: 2px;
    padding: 12px;
}

.aro-upload-ext {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

/* Dateiname */
.aro-upload-file-name {
    display: block;
    font-size: 11px;
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
    opacity: 0.7;
}

/* Entfernen-Button */
.aro-upload-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background-color 0.2s ease;
    z-index: 2;
}

.aro-upload-remove:hover {
    background-color: rgba(0,0,0,0.8);
}

/* ── Field Value: File-Vorschau ──────────────────────────────────────────── */

.aro-field-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.aro-field-file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 120px;
}

.aro-field-file-thumb {
    width: 100%;
    max-width: 120px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.aro-field-file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.06);
    gap: 2px;
}

.aro-field-file-ext {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.aro-field-file-name {
    display: block;
    font-size: 11px;
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
    opacity: 0.7;
    max-width: 120px;
}