/* =========================================================
   capturedbyemo — Archive
   Magazine-Look: deep wine-red paper, cream ink.
   Two-column parallax (linke Spalte scrollt subtil langsamer).
   Kein Crop, originale Farbe der Bilder garantiert.
   ========================================================= */

body.page-archive {
    --paper-arc:        #490f17;             /* deep wine-red, magazin paper */
    --paper-arc-2:      #3a0c12;             /* tieferes Wein für Card-Bg */
    --ink-arc:          #ede3cd;             /* warm cream */
    --ink-arc-dim:      rgba(237, 227, 205, 0.72);
    --ink-arc-mute:     rgba(237, 227, 205, 0.46);
    --ink-arc-soft:     rgba(237, 227, 205, 0.22);
    --line-arc:         rgba(237, 227, 205, 0.10);
    --line-arc-strong:  rgba(237, 227, 205, 0.22);

    background: var(--paper-arc);
    color: var(--ink-arc);
}

/* Subtler Cream-Grain auf dem Wein, wie Filmkorn auf Papier.
   Bewusst hinter dem Content (z-index: 0), KEIN mix-blend-mode. */
/* =========================================================
   Custom Cursor — Archive Variant
   Echter Negative-Effekt via backdrop-filter: invert(1).
   Über Bildern wird der Inhalt im Cursor-Kreis invertiert.
   "VIEW" Label dezent in der Mitte.
   ========================================================= */
body.page-archive .cb-cursor {
    /* Default-State: Mini-Dot bleibt mit mix-blend-difference (small) */
}
body.page-archive .cb-cursor.is-hover {
    width: 112px;
    height: 112px;
    background: transparent;
    backdrop-filter: invert(1);
    -webkit-backdrop-filter: invert(1);
    /* Default cursor hat mix-blend-difference; im hover-state aus damit
       backdrop-filter sauber wirken kann. */
    mix-blend-mode: normal;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}
body.page-archive .cb-cursor.is-hover .cb-cursor__label {
    opacity: 1;
    color: #fff;
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    /* Slight shadow für Lesbarkeit auf invertierten Inhalt */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

body.page-archive::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.89  0 0 0 0 0.80  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
    background-size: 220px 220px;
    background-repeat: repeat;
    opacity: 0.07;
}
/* Strukturelle Elements über den Grain heben — explizit gescoped damit
   fixed-positioned UI (Lightbox, Counter, etc) NICHT überschrieben wird. */
body.page-archive > main,
body.page-archive > header.nav,
body.page-archive > footer.footer {
    position: relative;
    z-index: 2;
}
body.page-archive > header.nav {
    position: fixed;
    z-index: 90;
}
body.page-archive .arc-card { isolation: isolate; }

/* Nav-Override fürs dunkle Magazin */
body.page-archive .nav,
body.page-archive .nav.is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.page-archive .nav__logo {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    left: clamp(20px, 3.5vw, 40px);
    z-index: 121;
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--ink-arc);
    opacity: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.68),
        0 0 18px rgba(0, 0, 0, 0.45);
}
body.page-archive .nav__list a { color: var(--ink-arc); }
body.page-archive .nav__list a {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}
body.page-archive .nav__burger span { background: var(--ink-arc); }

@media (max-width: 767.98px) {
    body.page-archive .nav__inner {
        align-items: flex-start;
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
    }

    body.page-archive .nav__logo {
        top: calc(env(safe-area-inset-top, 0px) + 16px);
        left: var(--pad);
        font-size: 0.9rem;
        letter-spacing: 0;
        text-transform: none;
    }

    body.page-archive .nav__burger {
        display: none;
    }

    body.page-archive .nav__list {
        display: none;
    }
}

/* =========================================================
   HERO — magazine masthead, scroll-fades out
   ========================================================= */
.arc-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: var(--max);
    margin: 0 auto;
    padding: calc(var(--nav-h) + clamp(40px, 8vh, 80px))
             var(--pad)
             clamp(40px, 8vh, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.arc-hero__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(28px, 5vh, 56px);
}
.arc-hero__title {
    position: relative;
    font-size: clamp(3.5rem, 14vw, 13rem);
    font-weight: 200;
    letter-spacing: var(--hero-title-track, -0.045em);
    line-height: 0.92;
    color: var(--ink-arc);
    opacity: calc(1 - var(--hero-progress, 0) * 0.85);
    transform:
        translateY(calc(var(--hero-progress, 0) * -40px))
        scaleX(calc(1 + var(--hero-progress, 0) * 0.025));
    transition: opacity 0.15s linear, transform 0.15s linear, letter-spacing 0.15s linear, filter 0.15s linear;
    filter: blur(var(--hero-title-blur, 0px));
    will-change: opacity, transform, letter-spacing, filter;
    margin: 0;
    isolation: isolate;
    -webkit-mask-image: linear-gradient(
        180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - var(--hero-title-mask, 0%)),
        rgba(0,0,0,0.12) 100%
    );
    mask-image: linear-gradient(
        180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) calc(100% - var(--hero-title-mask, 0%)),
        rgba(0,0,0,0.12) 100%
    );
}
.arc-hero__title em {
    font-style: italic;
    font-weight: 200;
    color: var(--ink-arc-dim);
    margin-left: 0.04em;
}
.arc-hero__sub {
    position: relative;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(0.86rem, 1vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: lowercase;
    color: var(--ink-arc-dim);
    opacity: calc(1 - var(--hero-progress, 0) * 1.4);
    transition: opacity 0.15s linear;
    animation: scrollHintDrop 1.75s var(--ease) infinite;
    will-change: transform, opacity;
}
.arc-hero__sub .arrow {
    display: inline-block;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--ink-arc);
}
@keyframes scrollHintDrop {
    0%, 100% { transform: translateY(0); opacity: 0.66; }
    50%      { transform: translateY(10px); opacity: 1; }
}
/* =========================================================
   GRID — Two-Column Parallax Masonry (FAT Ice Race style)
   Mobile: single col, kein Parallax.
   Desktop: 2 col, linke Spalte 4% langsamer.
   ========================================================= */
.arc-grid {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(60px, 10vh, 140px)
             clamp(10px, 1.4vw, 22px)
             clamp(120px, 18vh, 220px);
    position: relative;

    /* Mobile-Default: Single-Col, kein Grid */
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vw, 18px);
}
.arc-grid.is-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.6vw, 24px);
    align-items: start;
}

/* Spalten-Container — werden per JS erzeugt und mit Cards gefüllt */
.arc-grid__col {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 24px);
    min-width: 0;
}
.arc-grid__col--left { will-change: transform; }
.arc-grid__col:empty { display: none; }

/* Mobile: kein Parallax */
@media (max-width: 768px) {
    .arc-grid__col--left { transform: none !important; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .arc-grid__col--left { transform: none !important; }
}

/* =========================================================
   CARDS — natural aspect, no crop
   ========================================================= */
.arc-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
    background: var(--paper-arc-2);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 1s var(--ease-out),
        transform 1s var(--ease-out);
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
}
.arc-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.arc-card__img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(237,227,205,0.045), rgba(237,227,205,0.012)),
        var(--paper-arc-2);
}
.arc-card__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition:
        opacity 0.7s var(--ease-out),
        transform 1s var(--ease-out);
}
.arc-card__img.is-loaded {
    opacity: 1;
}
@media (hover: hover) {
    .arc-card:hover .arc-card__img {
        transform: scale(1.02);
    }
}

/* Keyboard-Fokus: dezenter outline-glow für Tab-Navigation,
   nicht sichtbar bei Maus-Klick (:focus-visible). */
.arc-card:focus { outline: none; }
.arc-card:focus-visible {
    outline: 1px solid var(--ink-arc);
    outline-offset: 6px;
}

/* Bewusst kein Hover-Overlay — Bild-Farbe bleibt unangetastet.
   Hover-Affordance kommt allein über das subtile scale(1.02) und
   das Erscheinen der Hover-Meta in der Margin (links unten). */

/* ---------- Placeholder variant (when manifest empty) ---------- */
.arc-card.is-placeholder { cursor: default; }
.arc-card.is-placeholder .arc-card__img-wrap {
    aspect-ratio: var(--ph-ratio, 3 / 2);
    border: 1px solid var(--line-arc);
    background: linear-gradient(135deg, rgba(237,227,205,0.025), rgba(237,227,205,0.005));
    display: flex;
    align-items: center;
    justify-content: center;
}
.arc-card.is-placeholder:hover .arc-card__img-wrap {
    border-color: var(--line-arc-strong);
}
.arc-card__ph {
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: lowercase;
    color: var(--ink-arc-soft);
    font-variant-numeric: tabular-nums;
    transition: color 0.4s var(--ease);
}
.arc-card.is-placeholder:hover .arc-card__ph {
    color: var(--ink-arc-mute);
}

/* =========================================================
   BACK TO TOP — erscheint nach scroll-past-hero, oben
   rechts über dem Counter. Beim Hover wächst die Linie nach
   oben — visualisiert die Reise an den Anfang.
   ========================================================= */
.arc-totop {
    position: fixed;
    bottom: clamp(60px, 9vh, 100px);     /* über dem Counter */
    right: clamp(20px, 3.5vw, 40px);
    z-index: 51;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    background: 0;
    border: 0;
    padding: 10px 0 6px;
    cursor: pointer;
    color: var(--ink-arc-mute);
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: lowercase;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease-out),
        color 0.3s var(--ease);
}
.arc-totop.is-on {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.arc-totop:hover { color: var(--ink-arc); }

.arc-totop__line {
    display: block;
    width: 1px;
    height: 18px;
    background: var(--ink-arc-mute);
    transition: height 0.5s var(--ease-out), background 0.3s var(--ease);
}
.arc-totop:hover .arc-totop__line {
    height: 36px;
    background: var(--ink-arc);
}
.arc-totop.is-firing .arc-totop__line {
    height: 100vh;
    transition: height 0.9s var(--ease-out);
}

.arc-totop__arrow {
    font-size: 0.78rem;
    line-height: 1;
    color: var(--ink-arc);
    transition: transform 0.4s var(--ease-out);
}
.arc-totop:hover .arc-totop__arrow {
    transform: translateY(-2px);
}

.arc-totop__label {
    line-height: 1;
}

/* =========================================================
   FRAME COUNTER — fixed bottom-right, live as you scroll
   ========================================================= */
.arc-counter {
    position: fixed;
    bottom: clamp(20px, 3.5vh, 36px);
    right: clamp(20px, 3.5vw, 40px);
    z-index: 50;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--ink-arc);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease-out);
}
.arc-counter.is-on { opacity: 1; transform: translateY(0); }
.arc-counter__num   { font-weight: 500; letter-spacing: 0.18em; }
.arc-counter__sep   { color: var(--ink-arc-soft); }
.arc-counter__total { color: var(--ink-arc-mute); }

/* =========================================================
   HOVER META — fixed bottom-left, only when hovering a card
   ========================================================= */
.arc-hover-meta {
    position: fixed;
    /* Über dem Settings-Button positionieren (38px Button + ~12px Abstand). */
    bottom: clamp(74px, 10vh, 100px);
    left: clamp(20px, 3.5vw, 40px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--ink-arc-dim);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    max-width: 280px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.arc-hover-meta.is-on {
    opacity: 1;
    transform: translateY(0);
}
.arc-hover-meta__num {
    font-size: 0.7rem;
    color: var(--ink-arc);
    letter-spacing: 0.16em;
    font-weight: 500;
}
.arc-hover-meta__line {
    color: var(--ink-arc-mute);
}
@media (max-width: 768px) {
    .arc-hover-meta { display: none; }
}

/* =========================================================
   LIGHTBOX — premium gallery, smooth & bulletproof
   Pure CSS transitions, no WAAPI conflicts.
   Backdrop fade-in + image scale 0.96 → 1.0.
   ========================================================= */
.arc-lightbox {
    position: fixed;
    inset: 0;
    /* Soft dark overlay — nicht pure black, slightly warm */
    background: rgba(14, 11, 10, 0.95);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(70px, 9vh, 110px) clamp(60px, 8vw, 120px);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: default;
}
.arc-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
/* Closing: same fade-out timing als Open, aber etwas schneller */
.arc-lightbox.is-closing {
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.6, 1);
    pointer-events: none;
}

.arc-lightbox__stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
}
.arc-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: default;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    user-select: none;
    -webkit-user-drag: none;
}
.arc-lightbox.is-open .arc-lightbox__img {
    opacity: 1;
    transform: scale(1);
}
.arc-lightbox.is-closing .arc-lightbox__img {
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.6, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.6, 1);
}
/* Crossfade beim Prev/Next */
.arc-lightbox.is-fading .arc-lightbox__img {
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.6, 1),
                transform 0.22s cubic-bezier(0.4, 0, 0.6, 1);
}

.arc-lightbox__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(22px, 4vh, 40px);
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease) 0.15s;
}
.arc-lightbox.is-open .arc-lightbox__bottom { opacity: 1; }
.arc-lightbox__counter {
    color: rgba(237, 227, 205, 0.85);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    font-variant-numeric: tabular-nums;
}
.arc-lightbox__counter .sep { color: rgba(237, 227, 205, 0.35); margin: 0 8px; }

/* Top-left labeled "← back" button — primary close affordance */
.arc-lightbox__back {
    position: absolute;
    top: clamp(20px, 3vh, 30px);
    left: clamp(20px, 3vw, 40px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    background: 0;
    border: 0;
    color: rgba(237, 227, 205, 0.72);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: lowercase;
    cursor: pointer;
    transition: color 0.3s var(--ease), gap 0.4s var(--ease-out);
    opacity: 0;
}
.arc-lightbox.is-open .arc-lightbox__back {
    opacity: 1;
    transition: color 0.3s var(--ease), gap 0.4s var(--ease-out), opacity 0.5s var(--ease) 0.4s;
}
.arc-lightbox__back:hover {
    color: #fff;
    gap: 16px;
}
.arc-lightbox__back .arrow {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.4s var(--ease-out);
}
.arc-lightbox__back:hover .arrow {
    transform: translateX(-3px);
}

.arc-lightbox__close {
    position: absolute;
    top: clamp(20px, 3vh, 30px);
    right: clamp(20px, 3vw, 40px);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    z-index: 2;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 0.4s var(--ease) 0.2s,
        background 0.3s var(--ease),
        transform 0.4s var(--ease-out);
}
.arc-lightbox.is-open .arc-lightbox__close { opacity: 0.7; }
.arc-lightbox.is-closing .arc-lightbox__close { opacity: 0; transition: opacity 0.2s var(--ease); }
.arc-lightbox.is-open .arc-lightbox__close { opacity: 0.55; }
.arc-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(90deg);
}
.arc-lightbox__close span {
    position: absolute;
    left: 6px; right: 6px;
    height: 1px;
    background: #fff;
}
.arc-lightbox__close span:first-child { transform: rotate(45deg); }
.arc-lightbox__close span:last-child  { transform: rotate(-45deg); }

.arc-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(44px, 6vw, 56px);
    height: clamp(44px, 6vw, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease-out), opacity 0.4s var(--ease) 0.2s;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
}
.arc-lightbox.is-open .arc-lightbox__nav { opacity: 1; }
.arc-lightbox.is-closing .arc-lightbox__nav { opacity: 0; transition: opacity 0.2s var(--ease); }
.arc-lightbox__nav svg { width: 42%; height: 42%; }
.arc-lightbox__nav:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.arc-lightbox__nav--prev { left: clamp(12px, 2vw, 28px); }
.arc-lightbox__nav--next { right: clamp(12px, 2vw, 28px); }
.arc-lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.arc-lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 768px) {
    .arc-lightbox { padding: clamp(50px, 8vh, 80px) clamp(14px, 4vw, 24px); }
    .arc-lightbox__nav {
        width: 44px;
        height: 56px;
        opacity: 0;
        pointer-events: auto;
    }
    .arc-lightbox.is-open .arc-lightbox__nav { opacity: 0.82; }
    .arc-lightbox__nav--prev { left: 4px; }
    .arc-lightbox__nav--next { right: 4px; }
    .arc-lightbox__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =========================================================
   FOOTER (override fürs dunkle Magazin)
   ========================================================= */
body.page-archive .footer {
    background: transparent;
    border-top: 1px solid var(--line-arc);
    color: var(--ink-arc-mute);
}
body.page-archive .footer__inner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: clamp(16px, 2vw, 34px);
    font-size: clamp(0.72rem, 0.82vw, 0.9rem);
    line-height: 1;
    letter-spacing: 0.22em;
}
body.page-archive .footer__inner > * {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    white-space: nowrap;
}
body.page-archive .footer__inner > :first-child {
    justify-content: flex-start;
}
body.page-archive .footer__inner > :last-child {
    justify-content: flex-end;
}
body.page-archive .footer a {
    color: var(--ink-arc);
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
@media (max-width: 768px) {
    body.page-archive .footer__inner {
        grid-template-columns: 1fr;
        justify-items: flex-start;
        gap: 8px;
        font-size: 0.82rem;
    }
    body.page-archive .footer__inner > *,
    body.page-archive .footer__inner > :first-child,
    body.page-archive .footer__inner > :last-child {
        justify-content: flex-start;
    }

    /* Shift counter and back-to-top on mobile to prevent overlapping with the floating contact button */
    .arc-counter {
        bottom: 24px;
        right: 76px;
        font-size: 0.68rem;
        letter-spacing: 0.18em;
    }
    .arc-totop {
        bottom: 76px;
        right: 24px;
        font-size: 0.72rem;
    }
}

/* Reduced motion */
/* =========================================================
   MOBILE TUNING — kleinere Screens (≤600px)
   ========================================================= */
@media (max-width: 480px) {
    .arc-hero {
        padding: calc(var(--nav-h) + 30px) var(--pad) 40px;
    }
    .arc-hero__center { gap: 22px; }
    .arc-hero__title {
        font-size: clamp(2.8rem, 18vw, 5rem);
        letter-spacing: var(--hero-title-track, -0.035em);
    }
    .arc-hero__sub {
        font-size: 0.9rem;
        letter-spacing: 0.2em;
        gap: 12px;
        flex-wrap: nowrap;
        white-space: nowrap;
        color: var(--ink-arc-dim);
    }
    .arc-hero__sub .arrow {
        font-size: 1.2rem;
        color: var(--ink-arc);
    }
    .arc-grid {
        padding: clamp(40px, 6vh, 80px) 0
                 clamp(80px, 14vh, 140px);
    }

    /* Counter und Back-to-Top kleiner und enger zusammen */
    .arc-counter {
        bottom: 24px;
        right: 76px;
        font-size: 0.6rem;
        letter-spacing: 0.16em;
        gap: 6px;
    }
    .arc-counter__num { font-size: 0.62rem; }

    .arc-totop {
        bottom: 76px;
        right: 22px;
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        padding: 8px 0 4px;
        color: var(--ink-arc-dim);
    }
    .arc-totop__line {
        height: 20px;
        background: var(--ink-arc-dim);
    }
    .arc-totop__arrow {
        font-size: 0.95rem;
        color: var(--ink-arc);
    }

    /* Lightbox-Padding auf kleinen Screens */
    .arc-lightbox {
        padding: clamp(50px, 8vh, 80px) 14px;
    }
    .arc-lightbox__back {
        top: 14px;
        left: 14px;
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        gap: 8px;
    }
    .arc-lightbox__back .arrow { font-size: 0.85rem; }
    .arc-lightbox__close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }
    .arc-lightbox__counter {
        font-size: 0.66rem;
        letter-spacing: 0.18em;
    }
    .arc-lightbox__bottom {
        bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arc-card, .arc-card__img,
    .arc-lightbox__img,
    .arc-hero__title, .arc-hero__sub, .arc-hero__bottom,
    .arc-counter, .arc-hover-meta {
        transition: none !important;
        animation: none !important;
    }
    .arc-hero__title {
        filter: none !important;
        letter-spacing: -0.045em !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .arc-card { opacity: 1; transform: none; }
}

@media (hover: none), (pointer: coarse) {
    .arc-card:hover .arc-card__img,
    .arc-card.is-placeholder:hover .arc-card__img-wrap,
    .arc-card.is-placeholder:hover .arc-card__ph,
    .arc-totop:hover,
    .arc-totop:hover .arc-totop__line,
    .arc-totop:hover .arc-totop__arrow,
    .arc-lightbox__back:hover,
    .arc-lightbox__back:hover .arrow,
    .arc-lightbox__close:hover,
    .arc-lightbox__nav:hover,
    .arc-lightbox__nav--prev:hover,
    .arc-lightbox__nav--next:hover {
        transform: none;
    }
}