/* Cases — Living Portrait (home section) */

.cases-sec {
  --cases-shadow: 0 22px 50px rgba(26, 23, 20, 0.1);
  --cases-shadow-hot: 0 50px 110px rgba(26, 23, 20, 0.3);
  --cases-video-1: #1b1b1b;
  --cases-video-2: #2a2a2a;
  position: relative;
  color: var(--fg);
  background: var(--bg);
}

html[data-theme='dark'] .cases-sec {
  --cases-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  --cases-shadow-hot: 0 50px 110px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(191, 174, 134, 0.45);
}

  .cases-sec{position:relative;padding:5rem 0 6rem;overflow:hidden}
  .cases-stripe{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ws-gold);opacity:.9}
  .cases-inner{max-width:1320px;margin:0 auto;padding:0 32px}

  .cases-eye{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ws-gold);margin:0 0 22px;display:inline-flex;align-items:center;gap:10px}
  .cases-eye::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ws-gold)}
  .cases-head{display:grid;grid-template-columns:1.2fr 0.8fr;gap:64px;align-items:end;margin-bottom:48px}
  .cases-h{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(40px,5.6vw,84px);line-height:.94;letter-spacing:-.01em;margin:0;text-wrap:balance}
  .cases-h .red{color:var(--ws-gold)}
  .cases-sub{font-size:17px;line-height:1.55;color:var(--fg-mute);max-width:46ch;margin:0;text-wrap:pretty}
  .cases-sub strong{color:var(--fg);font-weight:500}

  /* Half-circle stage */
  .arc{
    position:relative;
    height:600px;
    perspective:1400px;
    user-select:none;
    --tilt-x:0deg; --tilt-y:0deg;
  }
  .arc-track{
    position:absolute;inset:0;
    transform-style:preserve-3d;
    transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--scroll-rot, 0deg));
    transition:transform 600ms var(--ease-expo);
  }

  .card{
    --mx:50%; --my:50%;
    position:absolute;top:50%;left:50%;
    width:300px;height:420px;
    margin:-210px 0 0 -150px;
    background:transparent;border:0;padding:0;font-family:inherit;text-align:left;
    cursor:grab;
    transform-style:preserve-3d;
    /* No transitions on transform/opacity/filter — JS rAF drives those for true continuous motion. */
    will-change:transform, opacity, filter;
  }
  .arc.is-dragging{cursor:grabbing}
  .arc.is-dragging .card,
  .arc.is-dragging .card *{cursor:grabbing}
  .card *{cursor:inherit}
  /* Positions in arc — angles around y-axis + tx */
  .card[data-pos="0"]{ transform:translate3d(0px,-12px,40px) rotate(0deg); z-index:5 }
  .card[data-pos="1"]{ transform:translate3d(220px,18px,-40px) rotate(8deg); filter:brightness(.88); opacity:.85; z-index:4 }
  .card[data-pos="-1"]{ transform:translate3d(-220px,18px,-40px) rotate(-8deg); filter:brightness(.88); opacity:.85; z-index:4 }
  .card[data-pos="2"]{ transform:translate3d(380px,46px,-120px) rotate(16deg); filter:brightness(.72) blur(0.5px); opacity:.55; z-index:2 }
  .card[data-pos="-2"]{ transform:translate3d(-380px,46px,-120px) rotate(-16deg); filter:brightness(.72) blur(0.5px); opacity:.55; z-index:2 }
  .card[data-pos="3"]{ transform:translate3d(520px,80px,-220px) rotate(22deg); filter:brightness(.58) blur(1px); opacity:.25; z-index:1 }
  .card[data-pos="-3"]{ transform:translate3d(-520px,80px,-220px) rotate(-22deg); filter:brightness(.58) blur(1px); opacity:.25; z-index:1 }
  .card[data-pos="off"]{ opacity:0; pointer-events:none; transform:translate3d(0,80px,-300px) rotate(0deg) }

  .card.is-hot[data-pos="0"]{ transform:translate3d(0px,-18px,80px) rotate(0deg) scale(1.02) }

  /* === Editorial card (ÆTERNUM-style) ============================== */
  .card-shell{
    position:relative;width:100%;height:100%;
    color:#F7F3EC;
    --chamfer:30px;
    /* Rose-gold gradient fills the entire shape; an inner pseudo paints the
       black content area inset by 1.5px so the frame is complete on every
       edge — including the angled chamfer cuts. The two extra layered
       gradients add a faded highlight on the top edge + top-right diagonal,
       so the frame reads as a lit 3D metal rim. */
    background:
      linear-gradient(180deg, rgba(255, 240, 210, 0.62) 0%, transparent 16%),
      linear-gradient(225deg, rgba(255, 240, 210, 0.48) 0%, transparent 24%),
      linear-gradient(135deg, #6B4A2C 0%, #C8A876 26%, #E6CCA1 50%, #C8A876 74%, #6B4A2C 100%);
    clip-path:polygon(
      0 6px,
      0.46px 3.70px,
      1.76px 1.76px,
      3.70px 0.46px,
      6px 0,
      calc(100% - var(--chamfer)) 0,
      100% var(--chamfer),
      100% calc(100% - 6px),
      calc(100% - 0.46px) calc(100% - 3.70px),
      calc(100% - 1.76px) calc(100% - 1.76px),
      calc(100% - 3.70px) calc(100% - 0.46px),
      calc(100% - 6px) 100%,
      var(--chamfer) 100%,
      0 calc(100% - var(--chamfer))
    );
    display:grid;
    grid-template-rows:auto 1fr auto auto auto auto;
    gap:4px;
    padding:14px 18px 14px;
    isolation:isolate;
    container-type:inline-size;
    container-name:card;
    box-shadow:var(--cases-shadow);
    transition:box-shadow 480ms var(--ease-expo);
  }
  .card.is-hot .card-shell{box-shadow:var(--cases-shadow-hot)}

  /* Front (centermost) card: animated polished-metal sheen sweep across the frame. */
  .card.is-front .card-shell{
    background:
      linear-gradient(110deg, transparent 35%, rgba(255,250,235,0.70) 50%, transparent 65%) -100% 0 / 220% 100% no-repeat,
      linear-gradient(180deg, rgba(255, 240, 210, 0.62) 0%, transparent 16%),
      linear-gradient(225deg, rgba(255, 240, 210, 0.48) 0%, transparent 24%),
      linear-gradient(135deg, #6B4A2C 0%, #C8A876 26%, #E6CCA1 50%, #C8A876 74%, #6B4A2C 100%);
    animation:sheenSweep 3s ease-in-out infinite;
  }
  @keyframes sheenSweep{
    0%   { background-position: -100% 0, 0 0, 0 0, 0 0; }
    55%  { background-position:  220% 0, 0 0, 0 0, 0 0; }
    100% { background-position:  220% 0, 0 0, 0 0, 0 0; }
  }

  /* Inner black fill with paper grain. Inner polygon is offset so the frame
     thickness reads identically on straight edges AND on the diagonal
     chamfer cuts (perpendicular distance = 1.5px everywhere). */
  .card-shell::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-color: #14110D;
    background-image:
      linear-gradient(rgba(0,0,0,0.93), rgba(0,0,0,0.93)),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Csvg%20x%3D'6'%20y%3D'6'%20width%3D'10'%20height%3D'10'%20viewBox%3D'0%200%20308.23%20357.06'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M161.77%2C0l-35.54%2C20.52v179.29l113.29%2C65.41-82.15%2C47.43-119.04-68.73V63.54L0%2C85.66v182.66l153.7%2C88.74%2C154.53-89.22-143.69-82.96V50.15l98.05%2C56.61v114.32l38.51%2C22.23V80.45L161.77%2C0Z'%2F%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M101.43%2C32.46l-38.32%2C22.12v177.01l102.45%2C59.15%2C37.26-21.51-101.39-58.54s0-178.23%2C0-178.23Z'%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E");
    background-size: auto, 28px 28px;
    background-repeat: no-repeat, repeat;
    background-position: 0 0, 0 0;
    /* Inner polygon mirrors the outer shape, inset by 1.5px in normal direction.
       Rounded corners use inner radius 4.5 with arc centre at (6, 6). */
    clip-path:polygon(
      1.5px 6.0px,
      1.84px 4.28px,
      2.82px 2.82px,
      4.28px 1.84px,
      6.0px 1.5px,
      calc(100% - 30.62px) 1.5px,
      calc(100% - 1.5px) 30.62px,
      calc(100% - 1.5px) calc(100% - 6.0px),
      calc(100% - 1.84px) calc(100% - 4.28px),
      calc(100% - 2.82px) calc(100% - 2.82px),
      calc(100% - 4.28px) calc(100% - 1.84px),
      calc(100% - 6.0px) calc(100% - 1.5px),
      30.62px calc(100% - 1.5px),
      1.5px calc(100% - 30.62px)
    );
  }
  .card-shell > *{position:relative;z-index:1}

  /* Hover shine — a diagonal light sweep across the WHOLE card.
     Clipped to the same chamfered shape so it never spills past the corner. */
  .card-shell .card-spotlight{
    display:block;position:absolute;inset:0;z-index:8;pointer-events:none;
    opacity:1;
    mix-blend-mode:screen;
    background:linear-gradient(110deg,
      transparent 32%,
      rgba(255,255,255,0.10) 44%,
      rgba(255,255,255,0.42) 50%,
      rgba(255,255,255,0.10) 56%,
      transparent 68%);
    background-size:240% 100%;
    background-repeat:no-repeat;
    background-position:-130% 0;
    clip-path:polygon(
      0 6px,
      0.46px 3.70px,
      1.76px 1.76px,
      3.70px 0.46px,
      6px 0,
      calc(100% - var(--chamfer)) 0,
      100% var(--chamfer),
      100% calc(100% - 6px),
      calc(100% - 0.46px) calc(100% - 3.70px),
      calc(100% - 1.76px) calc(100% - 1.76px),
      calc(100% - 3.70px) calc(100% - 0.46px),
      calc(100% - 6px) 100%,
      var(--chamfer) 100%,
      0 calc(100% - var(--chamfer))
    );
  }
  /* Card pulled to the front: shine sweeps once. */
  .card.is-front .card-spotlight{
    opacity:1;
    animation:cardShine 2000ms linear -600ms 1;
  }
  /* Hover: shine sweeps once per hover. */
  .card.is-hot .card-spotlight{
    opacity:1;
    animation:cardShine 2000ms linear -600ms 1;
  }
  /* Mouse left the card: shine sweeps back the other way, once. */
  .card.is-leaving .card-spotlight{
    opacity:1;
    animation:cardShine 2000ms linear -600ms 1 reverse;
  }
  /* Negative delay above skips the empty off-card lead-in so the band appears immediately. */
  @keyframes cardShine{
    0%   { background-position:-130% 0; }
    100% { background-position: 230% 0; }
  }

  /* Top bar: pill (left). Dot is positioned absolutely — see .card-dot below. */
  .card-top{
    display:flex;justify-content:flex-start;align-items:center;
    padding:2px 2px 0;
  }
  .card-pill{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ws-gold);
    padding:4px 9px;
    border:1px solid var(--ws-gold);
    border-radius:999px;
    line-height:1;
  }
  /* Red dot — sits symmetrically on the top-right chamfered corner. The
     diagonal cut has its midpoint at (W - chamfer/2, chamfer/2); we center
     a 9px dot on that point. Pulses softly via an outward ring. */
  .card-dot{
    position:absolute;
    top:calc(var(--chamfer) / 2 - 4.5px);
    right:calc(var(--chamfer) / 2 - 4.5px);
    width:9px;height:9px;border-radius:999px;background:var(--ws-gold);display:block;
    z-index:3;
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
  }

  /* Portrait media — spans into name + rule rows so the photo reaches all the way down to (and behind) the divider */
  .card-media{
    position:relative;margin:0;
    grid-row:2 / span 3;
    grid-column:1;
    z-index:0;
    overflow:hidden;
    background:#1A1714 center/cover no-repeat;
    align-self:stretch;
  }
  .card-photo{position:absolute;inset:0;transition:opacity 500ms var(--ease-expo)}
  .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;filter:saturate(0.94) contrast(1.06)}
  .card-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, transparent 62%, rgba(0,0,0,0.70) 100%)}

  .card-video{
    position:absolute;inset:0;
    background:
      radial-gradient(70% 60% at 35% 40%, rgba(191, 174, 134,0.40), transparent 65%),
      radial-gradient(60% 50% at 80% 70%, rgba(255,255,255,0.10), transparent 70%),
      linear-gradient(135deg, var(--cases-video-1) 0%, var(--cases-video-2) 100%);
    background-size:120% 120%, 110% 110%, 100% 100%;
    opacity:0;transition:opacity 500ms var(--ease-expo);
  }
  .card-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
  .card.is-hot .card-video{opacity:0}
  .card.is-hot .card-photo{opacity:1;transform:none}
  /* Cards WITH video: no gradient placeholder — solid bg until frame is ready. */
  .card:not([data-video=""]) .card-video{
    background:#1A1714;
    background-size:auto;
    animation:none;
  }
  /* Swap photo → video only once seeked to 00:00 — instant cut, no crossfade jump. */
  .card:not([data-video=""]).is-hot.is-video-ready .card-video{opacity:1;transition:none}
  .card:not([data-video=""]).is-hot.is-video-ready .card-photo{opacity:0;transition:none}
  /* Bei Karten mit Video ist das Foto das erste Videobild: gleicher Farbfilter wie das Video, sonst springt die Farbe */
  .card:not([data-video=""]) .card-photo img{filter:none}
  @keyframes vidShift{from{background-position:0% 0%, 100% 100%, 0% 0%} to{background-position:40% 20%, 60% 80%, 0% 0%}}

  /* Massive name typography — sits in the lower band of the portrait, just above the rule */
  .card-name{
    grid-row:3;
    grid-column:1;
    align-self:end;
    position:relative;z-index:1;
    font-family:var(--font-display);
    text-transform:uppercase;
    font-size:clamp(24px, 11.2cqi, 44px);
    line-height:0.88;
    letter-spacing:-0.025em;
    text-align:center;
    margin:0 0 2px;
    padding:0.16em 2px 0;
    color:#F7F3EC;
    white-space:nowrap;
    overflow:hidden;
  }

  /* Divider — 0.5px red hairline with a centred red accent segment on top */
  .card-rule{
    position:relative;z-index:2;
    grid-row:4;grid-column:1;
    height:0.5px;
    background:var(--ws-gold);
    margin:0;
    align-self:end;
  }
  .card-rule::after{
    content:"";
    display:block;
    position:absolute;
    left:50%;top:50%;
    width:34px;height:3px;
    background:var(--ws-gold);
    transform:translate(-50%, -50%);
  }
  .card-rule::after{
    content:"";position:absolute;left:50%;top:-1px;
    width:18px;height:3px;background:var(--ws-gold);
    transform:translateX(-50%);
  }

  /* Foot row: company logo (left) · divider · stats (right) — like ÆTERNUM card */
  .card-foot{
    grid-row:5;grid-column:1;
    display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;
    margin-top:0;
  }
  .card-logo{
    width:42px;height:42px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
  }
  .card-logo img,.card-logo svg{max-width:100%;max-height:100%;object-fit:contain;display:block}
  /* Placeholder until a real company logo is dropped in */
  .card-logo .logo-ph{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:7px;letter-spacing:.18em;
    color:rgba(255,255,255,0.40);text-transform:uppercase;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 4px, transparent 4px 8px);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:2px;
  }

  /* Mono key:value stats — fixed key column so all colons + values align */
  .card-stats{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
  .card-stats .stat{
    display:flex;align-items:baseline;gap:11px;
    font-family:var(--font-mono);
    font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.2;
  }
  .card-stats .stat-k{
    flex:0 0 56px;
    display:flex;justify-content:space-between;
    color:rgba(255,255,255,0.55);margin:0;
  }
  .card-stats .stat-k::after{
    content:":";color:rgba(255,255,255,0.45);margin:0;
  }
  .card-stats .stat-v{margin:0;color:#F7F3EC;flex:1;min-width:0;text-wrap:pretty}

  /* Bottom brand mark */
  .card-brand{
    margin-top:auto;padding-top:8px;
    display:flex;flex-direction:column;align-items:center;gap:3px;
  }
  .brand-name{
    font-family:'Times New Roman', 'Times', serif;
    font-style:italic;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,0.78);
  }
  /* Wordmark logo sits in the normal square tile like every other card */
  .brand-year{
    font-family:var(--font-mono);
    font-size:8.5px;letter-spacing:.55em;
    color:rgba(255,255,255,0.40);
    text-indent:.55em;
  }
  /* URL-style state line: tighter tracking so the link stays legible */
  .brand-year.is-url{
    letter-spacing:.12em;text-indent:.12em;
    color:rgba(255,255,255,0.52);
    text-transform:lowercase;
  }

  /* Quote under arc */
  .arc-quote{
    margin-top:24px;text-align:center;
    font-family:var(--font-body);font-style:italic;font-size:16px;line-height:1.4;
    color:var(--fg-mute);max-width:48ch;margin-left:auto;margin-right:auto;
    transition:opacity 380ms var(--ease-expo);
  }
  .arc-quote cite{display:block;font-style:normal;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-mute);margin-top:8px}
  .arc-quote cite .red{color:var(--ws-gold)}

  .arc-controls{display:flex;justify-content:center;gap:16px;margin-top:24px}
  .arc-btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--fg);width:42px;height:42px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
  .arc-btn:hover{border-color:var(--ws-gold);color:var(--ws-gold)}
  .arc-btn svg{width:14px;height:14px;fill:currentColor}
  .arc-meter{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-mute);align-self:center;min-width:80px;text-align:center}
  .arc-meter .red{color:var(--ws-gold)}

  .cases-foot{margin-top:72px;display:flex;justify-content:center;gap:32px;align-items:center}
  .cases-closer{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(24px,3vw,42px);line-height:1.02;letter-spacing:-.005em;color:var(--fg);margin:0}
  .cases-closer .red{color:var(--ws-gold)}
  .cases-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
  .cta{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:14px 22px;border:1px solid var(--fg);background:transparent;color:var(--fg);text-decoration:none;transition:background-color .25s,color .25s,border-color .25s}
  .cta--primary{background:var(--fg);color:var(--bg)}
  .cta:hover{background:var(--ws-gold);color:var(--bone);border-color:var(--ws-gold)}

  /* ============ Touch rail — phones, portrait tablets, reduced-motion ============
     Replaces the 3D fan on narrow / touch / reduced-motion viewports with a
     swipeable horizontal card rail that shows the REAL portraits and a quote
     block synced to whichever card is centered. Base styles live outside the
     media query so the reduced-motion fallback also gets the correct layout. */
  .arc-mobile{display:none;position:relative}
  .arc-mobile-track{
    display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:12px 0 22px;
    /* side padding lets the first & last card snap to dead-center */
    padding-left:max(22px, calc((100% - min(86vw, 380px)) / 2));
    padding-right:max(22px, calc((100% - min(86vw, 380px)) / 2));
  }
  .arc-mobile-track::-webkit-scrollbar{display:none}
  .arc-mobile .card{
    position:relative;top:auto;left:auto;margin:0;flex:0 0 auto;
    width:min(86vw, 380px);aspect-ratio:5 / 7;height:auto;
    scroll-snap-align:center;cursor:default;
    transform:none !important;filter:none !important;
    transition:opacity .45s var(--ease);
  }
  .arc-mobile .card-photo{opacity:1 !important;transform:none !important}
  .arc-mobile .card-video{display:none !important;opacity:0 !important;animation:none !important}
  .arc-mobile .card-spotlight{display:none !important}
  .arc-mobile .card-shell{box-shadow:var(--cases-shadow)}
  /* gently de-emphasize the off-center cards so the focused one reads as primary */
  .arc-mobile .card{opacity:.5 !important}
  .arc-mobile .card.is-current{opacity:1 !important}

  .arc-mobile-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22px;padding:0 24px}
  .arc-m-nav{display:flex;align-items:center;gap:18px}
  .arc-m-meter{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute);min-width:78px;text-align:center}
  .arc-m-meter .red{color:var(--ws-gold)}
  .arc-m-quote{
    text-align:center;font-family:var(--font-body);font-style:italic;
    font-size:18px;line-height:1.45;color:var(--fg);max-width:30ch;
    min-height:3.1em;transition:opacity .28s var(--ease)
  }
  .arc-m-quote cite{display:block;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);margin-top:12px}
  .arc-m-quote cite .red{color:var(--ws-gold)}

  @media (max-width: 880px){
    .cases-sec{padding:72px 0 84px}
    .cases-head{grid-template-columns:1fr;gap:20px;margin-bottom:30px}
    .cases-sub{font-size:16px;max-width:62ch}
    .arc{display:none}
    .arc-quote{display:none}
    .arc-controls{display:none}
    .arc-mobile{display:block}
    .cases-foot{margin-top:46px}
  }
  @media (max-width: 460px){
    .cases-sec{padding:60px 0 72px}
    .cases-inner{padding:0 18px}
    .cases-eye{margin-bottom:18px}
    .arc-mobile .card{width:86vw}
    .arc-m-quote{font-size:17px}
    .cases-foot{flex-direction:column;gap:12px}
    .cases-ctas{width:100%;flex-direction:column}
    .cta{justify-content:center;width:100%}
  }

  @media (prefers-reduced-motion: reduce){
    .arc{display:none}
    .arc-quote{display:none}
    .arc-controls{display:none}
    .arc-mobile{display:block}
    .card-video,.card-photo,.card-shell{transition:none !important;animation:none !important}
  }

/* Kartenleiste Tablet/Mobil: Touch wischt horizontal, vertikal scrollt die Seite; Maus kann greifen */
.arc-mobile-track { touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.arc-mobile-track img, .arc-mobile-track video { -webkit-user-drag: none; }

/* Zitat etwas näher an die Karten: Bühne unten 12px kürzer, Abstand 16px statt 24px */
.arc-quote { margin-top: 4px; }
@media (min-width: 881px) { .arc { margin-bottom: -12px; } }