/* Ergänzungen zum Design-Export: Startseite + Footer (alle Seiten) */
.halls{padding:clamp(80px,9vw,140px) var(--gutter);background:var(--ink);color:var(--cream)}
.halls-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.halls-note{max-width:300px;color:var(--cream-dim);text-align:right;display:flex;flex-direction:column;gap:8px;margin:0 0 12px;font-size:15px}
.halls-note .mono{color:var(--cream)}
.halls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(40px,5vw,72px)}
.hall-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--black);aspect-ratio:3/4.2;color:var(--white);isolation:isolate}
.hall-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hall-card:hover img{transform:scale(1.04)}
.hall-card:after{content:"";position:absolute;inset:0;background:linear-gradient(#17171700 38%,#171717e0 100%)}
.hall-card-body{position:absolute;inset:auto 0 0 0;z-index:1;padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.hall-card-meta{color:#f7f7f3c7;font-size:12px;letter-spacing:.04em}
.hall-card h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,3.4vw,48px);line-height:.9;margin:0 0 4px;font-weight:700}
.hall-card-status{display:flex;align-items:center;gap:8px;color:#f7f7f3c7;font-size:12px;letter-spacing:.04em}
.hall-card-status:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--white)}
.hall-card .text-link{margin-top:12px;font-size:15px}
.hall-card:hover .text-link{color:var(--accent)}
@media (width<=900px){.halls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.halls-note{text-align:left}}
@media (width<=560px){.halls-grid{grid-template-columns:minmax(0,1fr)}.hall-card{aspect-ratio:4/3}}

/* Footer */
.footer{padding-bottom:0}
.footer-sheet{display:flex;flex-direction:column;padding:clamp(40px,5vw,72px) var(--gutter) 0;overflow:hidden}
.footer-panel{padding:0;background:transparent}
.footer-groups{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px clamp(24px,3vw,48px)}
.footer-links--col{flex-direction:column;gap:4px;align-items:flex-start}
.footer-address{margin:0 0 12px}
.footer-address a{border-bottom:1px solid}
.footer-hours li{border:0;padding:3px 0}
.footer-base{margin-top:clamp(32px,4vw,56px)}
.footer-ghost{order:3;margin:clamp(24px,4vw,56px) 0 clamp(16px,2.5vw,32px);line-height:0}
.footer-ghost img{width:100%;height:auto;display:block;opacity:.16}
@media (width<=900px){.footer-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width<=560px){.footer-groups{grid-template-columns:minmax(0,1fr)}}

/* Social-Logos im Footer */
.footer-social{display:flex;gap:8px}
.footer-social a{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--cream-faint);border-radius:var(--radius);color:var(--cream)}
.footer-social a:hover{background:var(--cream);color:var(--black);border-color:var(--cream)}
.footer-social svg{width:20px;height:20px;fill:currentColor}

/* Menü: Hallen groß, Abschnitte kleiner, keine Nummern */
.menu{display:flex;flex-direction:column;gap:0}
.menu-links--sections{margin-top:28px}
.menu-links--sections a{font-size:calc(var(--type-max) * .4);padding:4px 0}

/* Hallen-Links im Footer ohne Unterstrich */
.footer-links--halls a{border-bottom:0}

/* Wortmarke als Logo */
.logo img,.footer-brand img{height:20px;width:auto;display:block}
.menu .logo img{height:20px}
@media (width<=560px){.logo img,.footer-brand img{height:17px}}

/* Öffnungszeiten im Hero (Hallenseiten) */
.hero-hours{margin:0;display:grid;grid-template-columns:auto auto;gap:5px 22px;font-size:14px;line-height:1.3;text-align:left}
.hero-hours div{display:contents}
.hero-hours dt{color:#f7f7f3c7}
.hero-hours dd{margin:0;color:var(--white);font-weight:600;white-space:nowrap}
@media (width<=560px){.hero-hours{font-size:13px;gap:4px 16px}}

/* Programm: große Überschriften, wenig Text (Kundenwunsch 2026-11-02) */
.process-title{font-family:var(--display);text-transform:uppercase;font-size:calc(var(--type-max) * .6);line-height:.86;letter-spacing:-.03em;font-weight:700;max-width:none}
.process-card-body{padding:32px 20px 28px}
.process-card h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;line-height:.95;margin:0 0 12px}
.process-card p{font-size:17px;margin:0 0 22px}
/* Zweite Bild-Animation direkt nach dem Hero (Hallenseiten) */
.statement--intro .statement-text{font-size:calc(var(--type-max) * .82)}
/* Alexander 3.4 (2026-11-05): Bilder größer, weniger Leerraum oben und unten */
/* Shideh 2026-11-05: erstes Bild kommt früher (weniger Leerraum nach dem Hero), Bilder größer, und sie überlappen sich leicht beim Scrollen (Stapel-Versuch) */
/* Shideh: Stapel-Versuch verworfen ("distances now too close, more like the original, images more under the text"):
   wieder Abstände wie ursprünglich, Bilder groß, das erste Bild beginnt unter der Headline */
.statement--intro .statement-photos{padding:58vh 0 36vh;gap:16vh}
.statement--intro .statement-photo{width:clamp(260px,36vw,520px)}
@media (width<=560px){.statement--intro .statement-photo{width:72vw}.statement--intro .statement-photos{padding:50vh 0 30vh;gap:12vh}}

/* ---- Motion (2026-11-04): sehr clean, nur Position + Deckkraft, aus bei reduced motion ---- */
.menu{visibility:hidden;transform:translateY(-100%);transition:transform .55s cubic-bezier(.76,0,.24,1),visibility 0s linear .55s}
.menu.is-open{visibility:visible;transform:none;transition:transform .55s cubic-bezier(.76,0,.24,1)}
.menu-links a{transform:translateY(.5em);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s}
.menu.is-open .menu-links a{transform:none;opacity:1}
.menu.is-open .menu-links--halls a:nth-child(1){transition-delay:.18s}
.menu.is-open .menu-links--halls a:nth-child(2){transition-delay:.24s}
.menu.is-open .menu-links--halls a:nth-child(3){transition-delay:.30s}
.menu.is-open .menu-links--halls a:nth-child(4){transition-delay:.36s}
.menu.is-open .menu-links--sections a:nth-child(1){transition-delay:.44s}
.menu.is-open .menu-links--sections a:nth-child(2){transition-delay:.49s}
.menu.is-open .menu-links--sections a:nth-child(3){transition-delay:.54s}
.menu-foot{opacity:0;transition:opacity .4s}
.menu.is-open .menu-foot{opacity:1;transition-delay:.6s}
.pill{transition:background .25s,color .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.pill:active{transform:scale(.97)}
.price-tab{transition:background .25s,color .25s}
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes settle{from{transform:scale(1.06)}to{transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  img.video-hero-media{animation:settle 6s cubic-bezier(.2,.7,.2,1) both}
  .video-hero-main .mono{animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s both}
  .video-hero-main h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) .25s both}
  .video-hero-side{animation:rise .9s cubic-bezier(.2,.7,.2,1) .45s both}
  .header{animation:fade .8s .5s both}
  .price-panel{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu.is-open,.menu-links a,.menu-foot,.pill,.price-tab{transition:none}
}

/* Shideh 2026-11-04: Telefon + Mail im Footer ohne Linie; Wortmarke unten ungeschnitten auf Tablet/Phone */
.footer-links--col a[href^="tel:"],.footer-links--col a[href^="mailto:"]{border-bottom:0}
/* Wortmarke immer komplett, nie angeschnitten (Shideh 2026-11-04) */

/* Hover-Details (Shideh 2026-11-05: "Yes, add them"): Füllung schiebt sich von links ein, Pfeile rücken nach rechts */
@media (hover:hover){
  .pill,.footer-social a{position:relative;isolation:isolate;overflow:hidden}
  .pill:before,.footer-social a:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.76,0,.24,1)}
  .pill--orange:before{display:none}
  .pill--cream:before{background:var(--white)}
  .pill:hover,.footer-social a:hover{filter:none;color:var(--black);background-color:transparent;border-color:var(--white)}
    /* Alexander 2026-11-05: weiße Buttons werden bei Mouseover zum Rahmen-Button (durchsichtig, weißer Rand), Rahmen-Buttons füllen sich weiß */
  .pill--orange{transition:background .3s,color .3s,box-shadow .3s,transform .25s cubic-bezier(.2,.7,.2,1)}
  .pill--orange:hover{background-color:transparent;color:var(--white);box-shadow:inset 0 0 0 1px #f7f7f38c}
  .pill--cream:hover{background-color:var(--beige)}
  .pill:hover:before,.footer-social a:hover:before{transform:scaleX(1)}
  .footer-social a{transition:color .3s,border-color .3s}
  .icon-arrow{transition:translate .3s cubic-bezier(.2,.7,.2,1)}
  .text-link:hover .icon-arrow,.process-mail:hover .icon-arrow{translate:5px 0}
  .text-link:hover .icon-arrow[style*="180deg"]{translate:-5px 0}
}
@media (prefers-reduced-motion:reduce){
  .pill:before,.footer-social a:before,.icon-arrow{transition:none}
}

/* Shideh 2026-11-05: Startseiten-Animation ruckelte: Video wird nicht mehr skaliert (nur Foto-Hero), Text steigt kürzer */
.video-hero-media{will-change:auto}

/* Innsbruck-Hero ist ein Hochformat-Foto: Bildmitte auf die Kletterin legen (Shideh 2026-11-05) */
[data-hall=innsbruck] img.video-hero-media{object-position:50% 58%}

/* Reveal-Intro (Innsbruck, ein Foto; Shideh 2026-11-05 "different animation in this section"):
   Sektion 180vh hoch, Bühne klebt 100vh; beim Scrollen öffnet sich der Rahmen von innen auf volle Breite,
   das Foto beruhigt sich von 1.15 auf 1, die Headline steigt ein. Ohne Scroll-Timelines: Endzustand statisch. */
.reveal{height:180vh;background:var(--ink-2);view-timeline-name:--reveal;view-timeline-axis:block}
.reveal-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.reveal-frame{margin:0;position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 round 0)}
.reveal-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Shideh 2026-11-05: kein Verlauf über dem Reveal-Foto (Pseudo-Element entfernt) */
.reveal-title{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,8vh,96px);margin:0;color:var(--white);font-family:var(--display);font-size:calc(var(--type-max) * .72);font-weight:700;line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  @keyframes reveal-open{from{clip-path:inset(12vh 14vw round var(--radius))}to{clip-path:inset(0 0 round 0)}}
  @keyframes reveal-settle{from{transform:scale(1.15)}to{transform:none}}
  @keyframes reveal-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .reveal-frame{animation:reveal-open linear both;animation-timeline:--reveal;animation-range:contain 0% contain 70%}
  .reveal-frame img{animation:reveal-settle linear both;animation-timeline:--reveal;animation-range:contain 0% contain 100%}
  .reveal-title{animation:reveal-rise linear both;animation-timeline:--reveal;animation-range:contain 25% contain 65%}
}
@media (width<=560px){.reveal{height:160vh}.reveal-title{font-size:calc(var(--type-max) * .82)}}

/* Halftone-Wortmarke im Footer (footer-halftone.js, 2026-11-05): Canvas ersetzt das <img>, erst wenn es gezeichnet hat */
.footer-ghost.is-halftone img{display:none}
.footer-ghost canvas.footer-halftone{display:block;width:100%;height:auto;max-width:100%;touch-action:pan-y;cursor:default}

/* Startseite: "Wo willst du bouldern?" + Hallen-Buttons rechts im Hero (Shideh 2026-11-05 "move right side") */
.video-hero-side{margin-left:auto}
@media (width<=560px){.video-hero-side{margin-left:0}}

/* Tunnel (Innsbruck, 2026-11-05): Fotos fliegen beim Scrollen in 3D auf den Betrachter zu; tunnel.js setzt die Transforms */
.tunnel{height:320vh;background:var(--ink);color:var(--white)}
.tunnel-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.tunnel-title{position:relative;z-index:0;text-align:center;padding:0 var(--gutter);max-width:720px;pointer-events:none;will-change:transform,opacity}
.tunnel-title .mono{color:#f7f7f3a8;margin:0 0 16px}
.tunnel-title h2{font-family:var(--display);text-transform:uppercase;font-size:calc(var(--type-max) * .55);line-height:.86;letter-spacing:-.03em;font-weight:700;margin:0}
.tunnel-cards{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.tunnel-card{position:absolute;left:50%;top:50%;margin:0;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--black);box-shadow:0 30px 80px #171717b8;outline:1px solid #f7f7f326;will-change:transform,opacity;opacity:0}
.tunnel-card img{width:100%;height:100%;object-fit:cover;display:block}
.tunnel-hint{position:absolute;bottom:32px;left:0;right:0;text-align:center;color:#f7f7f3a8;margin:0;pointer-events:none}
.tunnel-hint:after{content:"";display:block;width:1px;height:24px;margin:8px auto 0;background:linear-gradient(var(--white),transparent)}
@media (width<=560px){.tunnel{height:260vh}.tunnel-title h2{font-size:calc(var(--type-max) * .7)}}
@media (prefers-reduced-motion:reduce){.tunnel-card,.tunnel-title{will-change:auto}}

/* Menü-Icon (Shideh 2026-11-05): Hamburger-Linie rollt sich beim Öffnen zum X, Pfad dreht -45°; Zustand kommt von aria-expanded */
.menu-icon{width:18px;height:18px;flex:none;margin-left:-2px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.menu-icon path{transition:stroke-dasharray .6s cubic-bezier(.2,.7,.2,1),stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)}
.menu-icon-curve{stroke-dasharray:12 63}
.pill[aria-expanded=true] .menu-icon{transform:rotate(-45deg)}
.pill[aria-expanded=true] .menu-icon-curve{stroke-dasharray:20 300;stroke-dashoffset:-32.42px}
@media (prefers-reduced-motion:reduce){.menu-icon,.menu-icon path{transition:none}}

/* Hallenseiten auf iPad und kleiner (Shideh 2026-11-05 "all in right side, on iPad"): sobald Titel und Zeiten nicht mehr in eine Zeile passen,
   steht der ganze Hero-Block (Zeile, Titel, Zeiten, Buttons) links, linksbündig. Desktop (>1100px), Handy (<=560px) und Startseite unverändert (Shideh: "desktop and mobile are good"). */
@media (561px<=width<=1100px){
  /* Korrektur Shideh: "sry left in ipad size" → links, linksbündig */
  .video-hero-content:has(.hero-hours){flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;gap:28px}
  .video-hero-content:has(.hero-hours) .video-hero-side{align-items:flex-start;margin-left:0}
  .video-hero-content:has(.hero-hours) .hero-hours{text-align:left;justify-content:start}
  .video-hero-content:has(.hero-hours) .video-hero-actions{justify-content:flex-start}
}

/* Menü-Links Hover (Alexander 2026-11-05, aus React/motion-Komponente portiert): Pfeil schiebt sich von links ein, Text rückt um Pfeilbreite nach rechts.
   Nur die inneren Spans animieren – das <a> selbst gehört der Öffnungs-Stagger (transform/opacity oben). Keine Farbänderung, kein Skew. */
.menu-links a{position:relative}
.menu-arrow{position:absolute;left:0;flex:none;width:.55em;height:.55em;margin-top:.22em;opacity:0;transform:translateX(-100%);pointer-events:none}
.menu-arrow .icon-arrow{display:block;width:100%;height:100%}
.menu-label{display:block;transform:translateX(0)}
.menu-links a:focus-visible .menu-arrow{opacity:1;transform:none}
.menu-links a:focus-visible .menu-label{transform:translateX(calc(.55em + 16px))}
@media (hover:hover){
  .menu-arrow{transition:transform .3s ease-out,opacity .3s ease-out}
  .menu-label{transition:transform .3s ease-out}
  .menu-links a:hover .menu-arrow{opacity:1;transform:none}
  .menu-links a:hover .menu-label{transform:translateX(calc(.55em + 16px))}
}
@media (prefers-reduced-motion:reduce){
  .menu-arrow,.menu-label{transition:none}
}

/* Shideh 2026-11-05: kein Punkt mehr vor der aktuellen Halle im Menü; der Hover-Pfeil sitzt überall am linken Rand */

/* Preise-Hover (Shideh 2026-11-05 "we need hover effect also in the preise"): Tabs wie die Menü-Links (Pfeil schiebt sich ein, Label rückt nach rechts), Zeilen heben sich leicht ab */
.price-tab{position:relative;display:flex;align-items:flex-start}
.price-tab .menu-arrow{width:.55em;height:.55em;margin-top:.3em;left:14px}
.price-tab .menu-label{display:block}
.price-tab:focus-visible .menu-arrow{opacity:1;transform:none}
.price-tab:focus-visible .menu-label{transform:translateX(calc(.55em + 12px))}
@media (hover:hover){
  .price-tab:hover .menu-arrow{opacity:1;transform:none}
  .price-tab:hover .menu-label{transform:translateX(calc(.55em + 12px))}
  .price-tab.is-active:hover .menu-arrow{opacity:0;transform:translateX(-100%)}
  .price-tab.is-active:hover .menu-label{transform:none}
  .price-list li{transition:padding-left .3s ease-out,background .3s}
  .price-list li:hover{padding-left:12px;background:#f7f7f30d}
}
/* Shideh 2026-11-05: die aktuelle Halle zeigt den Pfeil dauerhaft (an Stelle des früheren Punkts) */
.menu-links--halls a[aria-current=page] .menu-arrow{opacity:1;transform:none}
.menu-links--halls a[aria-current=page] .menu-label{transform:translateX(calc(.55em + 16px))}
/* Shideh 2026-11-05: die drei Dornbirn-Videostills (Sprühwand, Kletterin nah, orange Wand) an den Blitzlicht-Look der echten Fotos angleichen:
   dunkler, mehr Kontrast, etwas satter ("make the effect more like the img we have") */
.statement-photo img[src*="dornbirn-wall"],.statement-photo img[src*="dornbirn-climb"],.statement-photo img[src*="dornbirn-orange"]{filter:brightness(.84) contrast(1.22) saturate(1.1)}

/* ===== Try-out: drei Varianten für die untere Statement-Sektion (try-statement.js setzt data-variant) ===== */
.try-bar{position:fixed;left:50%;bottom:16px;translate:-50% 0;z-index:60;display:flex;gap:6px;padding:6px;border-radius:10px;background:#171717e6;box-shadow:0 0 0 1px var(--cream-faint)}
.try-bar .pill{min-height:32px;font-size:13px;padding:0 12px;white-space:nowrap}

/* 1 Reihe: Headline steht, die drei Fotos stehen darunter nebeneinander und schieben sich nacheinander von rechts ein */
.statement[data-variant=row]{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px)}
.statement[data-variant=row] .statement-sticky{position:static;height:auto;mix-blend-mode:normal;margin-bottom:clamp(40px,6vw,80px)}
.statement[data-variant=row] .statement-photos{flex-direction:row;justify-content:center;align-items:flex-start;gap:clamp(10px,2vw,28px);margin-top:0;padding:0}
.statement[data-variant=row] .statement-photo{align-self:auto;margin:0;flex:none;width:clamp(100px,28vw,360px)}

/* 2 Strip: Headline bleibt geklebt, die drei Fotos fahren als Filmstreifen von rechts nach links durchs Bild */
.statement[data-variant=strip]{height:240vh;view-timeline-name:--st;view-timeline-axis:block}
.statement[data-variant=strip] .statement-photos{position:sticky;top:0;height:100vh;margin-top:-100vh;padding:0;flex-direction:row;align-items:center;gap:clamp(16px,3vw,40px);width:max-content;transform:translateX(100vw)}
.statement[data-variant=strip] .statement-photo{align-self:auto;margin:0;flex:none;width:clamp(180px,26vw,380px)}

/* 3 Fächer: die drei Fotos liegen als Stapel unter der Headline und fächern sich beim Scrollen zu einer Reihe auf */
.statement[data-variant=fan]{height:220vh;view-timeline-name:--st;view-timeline-axis:block}
.statement[data-variant=fan] .statement-photos{position:sticky;top:0;height:100vh;margin-top:-100vh;padding:0;display:grid;place-items:center}
.statement[data-variant=fan] .statement-photo{grid-area:1/1;align-self:center;margin:50vh 0 0;width:clamp(96px,28vw,340px)}  /* margin-top: Fotos sitzen unter der Headline (Shideh: "img a more lower of the text") */
@media (width<=560px){.statement[data-variant=fan] .statement-photo{margin-top:36vh}}
.statement[data-variant=fan] .statement-photo:nth-child(1){transform:translate(-105%,-6%) rotate(-10deg)}
.statement[data-variant=fan] .statement-photo:nth-child(2){transform:translate(0,8%)}
.statement[data-variant=fan] .statement-photo:nth-child(3){transform:translate(105%,-4%) rotate(9deg)}

@media (prefers-reduced-motion:no-preference){
  @keyframes st-slide{from{opacity:0;transform:translateX(80px) rotate(4deg)}to{opacity:1;transform:none}}
  .statement[data-variant=row] .statement-photo{animation:st-slide linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
  .statement[data-variant=row] .statement-photo:nth-child(2){animation-range:entry 20% entry 75%}
  .statement[data-variant=row] .statement-photo:nth-child(3){animation-range:entry 35% entry 90%}

  @keyframes st-strip{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
  .statement[data-variant=strip] .statement-photos{animation:st-strip linear both;animation-timeline:--st;animation-range:contain 0% contain 100%}

  @keyframes st-fan-l{from{transform:translate(0,0) rotate(-5deg)}to{transform:translate(-105%,-6%) rotate(-10deg)}}
  @keyframes st-fan-c{from{transform:translate(0,0) rotate(2deg)}to{transform:translate(0,8%) rotate(0)}}
  @keyframes st-fan-r{from{transform:translate(0,0) rotate(6deg)}to{transform:translate(105%,-4%) rotate(9deg)}}
  .statement[data-variant=fan] .statement-photo{animation:linear both;animation-timeline:--st;animation-range:contain 0% contain 75%}
  .statement[data-variant=fan] .statement-photo:nth-child(1){animation-name:st-fan-l}
  .statement[data-variant=fan] .statement-photo:nth-child(2){animation-name:st-fan-c}
  .statement[data-variant=fan] .statement-photo:nth-child(3){animation-name:st-fan-r}
}

/* Alexander 1.4 (2026-11-05): nur noch #171717 Faded Black und #f7f7f3 Offwhite auf der ganzen Seite → Beige wird zu Offwhite (Menü-Button, aktiver Preis-Tab, giant--ink) */
:root{--beige:#f7f7f3;--cream-faint:#f7f7f333}  /* Shideh 2026-11-05: auch die Haarlinien (--cream-faint war #d7d5ca33 = Grau-Weiß) auf Offwhite */

/* Shideh 2026-11-05: Programm – die Headline bleibt stehen (Text-Drift verworfen: "feels odd and buggy"); stattdessen kommen die Karten
   beim Scrollen von unten herauf und setzen sich fest ("the boxes come down and get fixed"), scroll-getrieben, nur ohne reduced motion */
@media (prefers-reduced-motion:no-preference){
  @keyframes card-settle{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
  /* Shideh: "still a little lag" → kürzerer Weg, früher fertig, eigene Compositor-Ebene */
  .process-card{animation:card-settle linear both;animation-timeline:view();animation-range:entry 0% entry 45%;will-change:transform,opacity}
}
}

/* Shideh 2026-11-05: Intro-Fotos leicht und abwechselnd gedreht ("they don't have to be straight") */
.statement--intro .statement-photo:first-child{rotate:-3deg}
.statement--intro .statement-photo:nth-child(2){rotate:2.5deg}
.statement--intro .statement-photo:nth-child(3){rotate:-2deg}

/* Shideh 2026-11-05: Footer-Spalten proportional statt gleich breit ("use the space better"): Hallen schmal, Zeiten + Kontakt breit, Folge uns schmal;
   Öffnungszeiten-Zeilen bleiben einzeilig (Label | Wert) */
@media (width>900px){
  .footer-groups{grid-template-columns:minmax(120px,.6fr) minmax(320px,1.4fr) minmax(260px,1.2fr) minmax(150px,.6fr)}
  .footer-hours li{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline}
  .footer-hours li span,.footer-hours li strong{white-space:nowrap}
  .footer-hours li strong{justify-self:start}
}

/* Shideh 2026-11-05: Footer auf iPad (561–900px): linke Spalte schmaler (Hallen / Kontakt), rechte breiter (Zeiten / Folge uns), Zeiten-Zeilen einzeilig */
@media (561px<=width<=900px){
  .footer-groups{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px 32px}
  .footer-hours li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline}
  .footer-hours li span,.footer-hours li strong{white-space:nowrap}
  .footer-hours li strong{justify-self:start}
  .footer-hours{font-size:16px}
}
/* Shideh 2026-11-05: auf dem Handy Öffnungszeiten + Kontakt zuerst, dann Folge uns, die Hallenliste zuletzt (steht ohnehin im Menü) */
@media (width<=560px){.footer-groups{display:flex;flex-direction:column}.footer-groups>.footer-group:first-child{order:9}}
/* "Demnächst"-Label neben der Programm-Headline (Innsbruck) */
.process-badge{display:inline-block;margin-top:18px;padding:5px 10px;border:1px solid #f7f7f38c;border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--white)}
/* Shideh 2026-11-05: "Gemeinsam hoch hinaus." auf dem Handy auf die Größe der Preise-Headline (41px statt 29px) */
@media (width<=560px){.process-title{font-size:calc(var(--type-max) * .85)}}

/* Shideh 2026-11-05 (Handy-Screenshot): Fächer-Sektion auf dem Handy kompakter – größere Fotos, kürzerer Lauf, weniger Leerraum danach; Intro rückt näher */
@media (width<=560px){
  .statement[data-variant=fan]{height:150vh}
  .statement[data-variant=fan] .statement-photo{width:40vw;margin-top:30vh}
  .statement[data-variant=fan] .statement-photo:nth-child(1){transform:translate(-62%,-6%) rotate(-10deg)}
  .statement[data-variant=fan] .statement-photo:nth-child(3){transform:translate(62%,-4%) rotate(9deg)}
  .statement--intro .statement-photos{padding:24vh 0 16vh;gap:10vh}
}
@media (width<=560px) and (prefers-reduced-motion:no-preference){
  @keyframes st-fan-l-m{from{transform:translate(0,0) rotate(-5deg)}to{transform:translate(-62%,-6%) rotate(-10deg)}}
  @keyframes st-fan-r-m{from{transform:translate(0,0) rotate(6deg)}to{transform:translate(62%,-4%) rotate(9deg)}}
  .statement[data-variant=fan] .statement-photo{animation-range:contain 0% contain 60%}
  .statement[data-variant=fan] .statement-photo:nth-child(1){animation-name:st-fan-l-m}
  .statement[data-variant=fan] .statement-photo:nth-child(3){animation-name:st-fan-r-m}
}
/* Shideh 2026-11-05 (Handy): kein Loch zwischen Kindergeburtstage und "Wir sehen uns an der Wand" – Programm-Sektion unten knapper, Fächer-Bühne niedriger */
@media (width<=560px){
  .process{padding-bottom:40px}
  .statement[data-variant=fan]{height:125vh}
  .statement[data-variant=fan] .statement-sticky{height:72vh}
  .statement[data-variant=fan] .statement-photos{height:72vh;margin-top:-72vh}
  .statement[data-variant=fan] .statement-photo{margin-top:22vh}
}