/* Bereiche-Slider + gleitender Tab-Indikator — geteilt von / und /about.
   Markup: section.areas > .areas__stage > ul#areasTrack + .areas__bar. */
/* Gleitender Tab-Indikator (aus der TillyBoard-App, sliding-tab-indicator):
   eine gemeinsame Pille, die mit Nachfedern zum aktiven Tab gleitet */
.tabs__indicator{position:absolute;top:0;left:0;opacity:0;pointer-events:none;box-sizing:border-box;
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  transition:transform 450ms cubic-bezier(.34,1.4,.64,1),width 450ms cubic-bezier(.34,1.4,.64,1),height 450ms cubic-bezier(.34,1.4,.64,1)}
.tabs__indicator[data-mode="hover"]{transition-duration:300ms}
.tabs__indicator[data-mode="drag"]{transition-duration:0ms}
.is-dragging,.is-dragging *{cursor:grabbing!important}
@media (prefers-reduced-motion:reduce){.tabs__indicator{transition:none}}

/* ───────────────────────── Bereiche-Slider ───────────────────────── */
.areas{padding-top:clamp(56px,8vh,96px)}
/* Tab-Leiste liegt unten mittig im aktiven Screen: halbtransparente Pille,
   aktiver Tab dunkel mit Fortschrittsring, daneben Pause/Play */
.areas__stage{--w:min(1120px,78vw);position:relative}
.areas__bar{position:absolute;left:50%;top:calc(var(--p) + (var(--w) - 2*var(--p))*.5625 + (var(--foot) - 48px)/2);transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:10px;max-width:calc(var(--w) - 40px)}
.areas__tabs,.areas__pause{background:rgba(30,26,24,.42);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.areas__tabs{position:relative;display:flex;gap:2px;user-select:none;box-sizing:border-box;height:48px;padding:4px;min-width:0;border-radius:999px;
  overflow-x:auto;scrollbar-width:none}
.areas__tabs::-webkit-scrollbar{display:none}
.areas__tab{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:10px;height:100%;padding:0 18px;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);white-space:nowrap;transition:color .15s ease,background .2s ease}
.areas__tab:hover{color:#fff}
.areas__tab.is-active{color:#fff}
.areas__tabs .tabs__indicator{background:#111113;border-radius:999px}
@media (max-width:760px){.areas__tabs,.areas__pause{background:rgba(52,56,62,.72)}}
.areas__ring{display:none;width:16px;height:16px;flex:none;transform:rotate(-90deg)}
.areas__ring circle{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2.2}
.areas__ring .areas__prog{stroke:#fff;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.areas__tab.is-active .areas__ring{display:block}
.areas__tab.is-active.is-run .areas__prog{animation:areasRing var(--dur,6s) linear forwards}
.areas.is-paused .areas__prog{animation-play-state:paused!important}
@keyframes areasRing{to{stroke-dashoffset:0}}
.areas__pause{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;cursor:pointer;color:#fff;
  transition:background .15s ease}
.areas__pause:hover{background:rgba(70,75,82,.8)}
.areas__pause svg{width:16px;height:16px}
.areas__pause .i-play,.areas.is-paused .areas__pause .i-pause{display:none}
.areas.is-paused .areas__pause .i-play{display:block}
/* Track läuft über die volle Breite; die aktive Karte steht immer mittig,
   die Nachbarn laufen links und rechts ins Dunkle aus (Maske am Rand) */
.areas__track{
  position:relative;list-style:none;margin:0;padding:0 calc((100% - var(--w))/2) 6px;display:flex;gap:clamp(16px,2vw,28px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.areas__track::-webkit-scrollbar{display:none}
.areas__slide{flex:none;width:var(--w);scroll-snap-align:center}
.areas__stage{--p:calc(var(--w)*.055);--foot:96px}
/* Karte mit gemaltem Verlauf (pro Bereich eigene Palette über --a..--d),
   App-Screen eingerückt; unten bleibt Platz für die Tab-Leiste */
.areas__card{position:relative;overflow:hidden;border-radius:28px;
  padding:var(--p) var(--p) var(--foot);
  background:
    radial-gradient(60% 80% at 8% 12%,var(--d) 0,transparent 60%),
    radial-gradient(55% 70% at 92% 18%,var(--a) 0,transparent 62%),
    radial-gradient(70% 90% at 78% 100%,var(--b) 0,transparent 65%),
    radial-gradient(60% 80% at 10% 95%,var(--c) 0,transparent 70%),
    linear-gradient(135deg,var(--a),var(--b));
  opacity:.4;transition:opacity .35s ease}
/* feine Papierstruktur über dem Verlauf */
.areas__card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.areas__slide.is-active .areas__card{opacity:1}
.areas__slide:not(.is-active){cursor:pointer}
.areas__slide:not(.is-active):hover .areas__card{opacity:.6}
.areas__shot{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0c0c0e;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 30px 60px -24px rgba(0,0,0,.55),0 8px 20px -10px rgba(0,0,0,.35)}
.areas__shot img,.areas__shot video{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
@media (max-width:760px){
  .areas__stage{--w:88vw;--foot:var(--p);display:flex;flex-direction:column}
  .areas__card{border-radius:18px}
  .areas__shot{border-radius:8px}
  .areas__track{-webkit-mask-image:none;mask-image:none}
  .areas__bar{position:static;transform:none;order:-1;max-width:calc(100% - 32px);margin:0 auto 16px}
  .areas__tabs,.areas__pause{height:42px}.areas__pause{width:42px}
  .areas__tab{padding:0 14px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.areas__shot{transition:none}}