/* =====================================================================
   REAL FACILITY · ESG — HORIZONTALER REPORT-PAGER (Deck)
   Überschreibt das vertikale Layout. Seiten = volle Ansichten,
   horizontal nach rechts durchblätterbar, mit Eintritts-Animation.
   ===================================================================== */

html, body{ height:100%; overflow:hidden; }
body{ overscroll-behavior:none; }

/* hide vertical-mode chrome */
#progress, #dotnav{ display:none !important; }

/* ---------------- DECK ---------------- */
#deck{ position:fixed; inset:0; overflow:hidden; z-index:2; }
#rail{
  display:flex; height:100%; width:max-content;
  transform:translate3d(calc(var(--i,0) * -100vw),0,0);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
/* JS sets an explicit inline transform (translate3d(-Nvw)) so the transition
   actually interpolates — a transitioned var() substitution does not in Chrome. */
.no-anim #rail{ transition:none; }

.page{
  flex:0 0 100vw; width:100vw; height:100vh; height:100dvh;
  position:relative; overflow:hidden; scrollbar-width:none;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(72px,9vh,108px) var(--pad) clamp(64px,8vh,92px);
}
.page::-webkit-scrollbar{ width:0; height:0; }
.page-inner{ margin:auto; width:100%; max-width:var(--maxw);
  transform-origin:center center; will-change:transform; }
.page-inner.narrow{ max-width:860px; }
.page-inner.wide{ max-width:1340px; }

/* every page is a fixed brochure leaf — content is auto-scaled by JS to fit; if it would
   get unreadably small the page scrolls internally instead */
.page.dense{ align-items:center; }
.page.dense .page-inner{ margin:auto; }
.page.scrolly{ overflow-y:auto; -webkit-overflow-scrolling:touch; align-items:flex-start; }
.page.scrolly .page-inner{ margin:0 auto; transform:none !important; }

/* ---------- re-point hero / chapter / closing typography ---------- */
#p-hero .h-mark{ width:70px; height:70px; margin-bottom:28px; }
#p-hero h1{ font-size:clamp(2.6rem, 8vw, 6.6rem); letter-spacing:-.035em; }
#p-hero h1 .grad{ background:linear-gradient(110deg, var(--eco), var(--social) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.cover .ch-big{ position:absolute; font-family:var(--font-display); font-weight:700; line-height:.8;
  color:color-mix(in srgb,var(--accent) 13%, transparent); pointer-events:none; z-index:0; letter-spacing:-.04em; }
.cover .ch-inner{ position:relative; z-index:1; }
.cover .ch-no{ font-family:var(--font-display); color:var(--accent); letter-spacing:.2em; font-size:15px; }
.cover h2{ font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.03em; margin:14px 0 0; }
.cover h2 .accent{ color:var(--accent); }
.cover .ch-lead{ font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--text-dim); max-width:56ch; margin-top:24px; }
.cover .ch-std{ margin-top:28px; }

#p-ende .cl-logo{ width:64px; height:64px; margin:0 auto 28px; }
#p-ende .cl-q{ font-family:var(--font-serif); font-style:italic; font-size:clamp(2rem,5.4vw,4rem); line-height:1.16; }
#p-ende .cl-q .grad{ background:linear-gradient(110deg,var(--eco),var(--social)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#p-ende .cl-cite{ margin-top:30px; color:var(--text-dim); font-size:17px; }

/* page accent piping */
.page::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--accent), transparent 70%);
  opacity:.55;
}

/* ---------------- ENTRY ANIMATION ---------------- */
/* Resting state is VISIBLE. The entrance is applied by JS via the Web
   Animations API (with a setTimeout safety net), so content is NEVER
   stranded hidden even if the animation timeline stalls in some context. */
.page [data-anim], .page .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ #rail{ transition:none; } }

/* ---------------- NAV ARROWS ---------------- */
.nav-btn{
  position:fixed; top:50%; transform:translateY(-50%); z-index:50;
  display:grid; place-items:center; cursor:pointer; border:none;
  background:color-mix(in srgb, var(--accent) 14%, rgba(10,15,28,.6));
  border:1px solid color-mix(in srgb,var(--accent) 45%, transparent);
  color:#fff; backdrop-filter:blur(10px);
  transition:transform .35s var(--ease), background .35s, opacity .35s, border-color .35s;
}
.nav-btn svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; }
.nav-next{ right:clamp(16px,3vw,40px); width:74px; height:74px; border-radius:50%; }
.nav-next:hover{ transform:translateY(-50%) scale(1.08); background:var(--accent); color:#04121f; }
.nav-next::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 35%, transparent); animation:halo 2.6s ease-out infinite;
}
@keyframes halo{ 0%{ transform:scale(1); opacity:.6;} 100%{ transform:scale(1.4); opacity:0;} }
.nav-prev{ left:clamp(16px,3vw,40px); width:54px; height:54px; border-radius:50%; opacity:.55; }
.nav-prev:hover{ opacity:1; transform:translateY(-50%) scale(1.08); }
.nav-btn[disabled]{ opacity:0; pointer-events:none; }
@media(max-width:760px){
  .nav-next{ width:60px; height:60px; bottom:84px; top:auto; right:18px; transform:none; }
  .nav-next:hover{ transform:scale(1.06); }
  .nav-next::after{ display:none; }
  .nav-prev{ width:48px; height:48px; bottom:90px; top:auto; left:18px; transform:none; }
  .nav-prev:hover{ transform:scale(1.06); }
}

/* ---------------- BOTTOM PAGER ---------------- */
#pager{ position:fixed; left:0; right:0; bottom:0; z-index:50; height:60px;
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:0 var(--pad); pointer-events:none; }
#pager .ticks{ display:flex; gap:6px; align-items:center; height:16px; pointer-events:auto; }
#pager .tick{ flex:0 0 auto; width:11px; height:4px; min-height:0; align-self:center; padding:0; border:none; appearance:none;
  border-radius:3px; background:var(--border-2); cursor:pointer; transition:width .4s var(--ease), background .4s; }
#pager .tick:hover{ background:var(--text-dim); }
#pager .tick.active{ width:30px; background:var(--accent); }
#pager .tick.chapter{ background:color-mix(in srgb,var(--text-faint) 80%, transparent); }
#pager .counter{ font-family:var(--font-display); font-size:13px; letter-spacing:.12em; color:var(--text-dim);
  pointer-events:auto; font-variant-numeric:tabular-nums; min-width:62px; }
#pager .counter b{ color:var(--accent); }
@media(max-width:760px){ #pager .ticks{ display:none; } #pager{ justify-content:flex-start; } }

/* bottom progress hairline */
#deckbar{ position:fixed; left:0; bottom:0; height:3px; width:0%; z-index:51;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 30%, var(--social)));
  transition:width 1s cubic-bezier(.76,0,.24,1); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent); }

/* ---------------- TOPBAR adjustments ---------------- */
#topbar{ position:fixed; background:transparent; border:none; gap:16px; }
#topbar .brand{ flex:none; }
#topbar .chapnow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim);
  flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
#topbar .chapnow b{ color:var(--accent); }
@media(max-width:960px){ #topbar .chapnow{ visibility:hidden; } }

/* hint → nach rechts */
.scroll-hint{ left:auto; right:clamp(16px,3vw,40px); bottom:auto; top:50%;
  transform:translateY(calc(-50% + 62px)); flex-direction:row; gap:10px; }
.scroll-hint .mouse{ display:none; }
.scroll-hint .rhint{ display:flex; align-items:center; gap:8px; }
@media(max-width:760px){ .scroll-hint{ display:none; } }

/* ---------------- PAGE-LEVEL LAYOUT NEUTRALISERS ---------------- */
.page .section{ padding:0; min-height:0; }
.page .chapter{ min-height:0; }
.page .sec-title{ font-size:clamp(2rem,4.6vw,3.7rem); }

/* cover (chapter) pages */
.page.cover{ overflow:hidden; }
.page.cover .ch-big{ font-size:46vh; right:-1vw; bottom:-8vh; }
.page.cover h2{ font-size:clamp(3rem,11vw,8rem); }

/* hero tweaks for full-screen page */
.page#p-hero{ overflow:hidden; }
.page#p-hero .hero-stats{ margin-top:clamp(34px,6vh,60px); }

/* make dashboard / index pages scroll internally & comfortable */
.page.dense .dash-grid{ margin-top:26px; }
.page.dense .idx{ margin-top:26px; }

/* fade the rail very slightly while moving (handled by JS class) */
#rail.moving .page:not(.active){ }

/* keyboard focus ring */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* services as grid inside the deck page */
#svc-track{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding:0; transform:none !important; }
#svc-track .svc-card{ flex:none; min-height:auto; padding:24px; }
#svc-track .svc-card h3{ font-size:1.2rem; margin:12px 0 10px; }
#svc-track .svc-card p{ font-size:14px; }
#svc-track .svc-card .sicn{ margin-top:18px; }

/* interview leaf: compact 2-column question list so the page fits without shrinking */
#p-interview .iv-list{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,3vw,48px); border-top:1px solid var(--border); }
#p-interview .iv-item{ break-inside:avoid; }
#p-interview .iv-q{ padding:14px 0; font-size:1rem; gap:14px; }
#p-interview .iv-q .qn{ padding-top:3px; }
#p-interview .iv-a-inner{ padding:0 0 20px 0; font-size:15px; }
#p-interview .iv-pull{ font-size:clamp(1.6rem,3vw,2.4rem); }
#p-interview .page-inner{ max-width:1180px; }
@media(max-width:860px){ #p-interview .iv-list{ grid-template-columns:1fr; } }

/* compact dashboard + index for brochure leaves */
.page #dash-grid-e .dcell, .page #dash-grid-s .dcell, .page #dash-grid-g .dcell{ padding:20px 20px; }
.page .dash-grid{ gap:14px; margin-top:22px; }
/* index as 2-column grid so B1–B11 fits at full size */
.page .idx{ margin-top:22px; border-top:none; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,3vw,48px); align-content:start; }
.page .idx-row{ padding:12px 4px; grid-template-columns:64px 1fr; gap:14px; }
.page .idx-row .it{ font-size:15px; }
.page .idx-row .id{ margin-top:3px; font-size:13.5px; }
@media(max-width:860px){ .page .idx{ grid-template-columns:1fr; } }

/* roadmap leaves: two-column bullet lists + tighter rhythm so they fit at full size */
.page .road{ margin-top:34px; }
.page .road-item{ padding:0 0 26px 32px; }
.page .road-item ul{ columns:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px clamp(22px,3vw,44px); align-content:start; }
.page .road-item ul li{ break-inside:avoid; margin-bottom:0; font-size:14.5px; }
.page .road-item .rp{ font-size:1.05rem; }
#p-massnahmen .page-inner, #p-ziele .page-inner{ max-width:1080px; }
#p-massnahmen .road{ margin-top:26px; }
#p-massnahmen .road-item{ padding-bottom:18px; }
#p-massnahmen .road-item ul li{ margin-bottom:0; font-size:14px; }
#p-massnahmen .sec-lead{ margin-top:10px; font-size:1rem; }
@media(max-width:860px){ .page .road-item ul{ grid-template-columns:1fr; } }

/* ---------------- PHOTOS (Higgsfield) ---------------- */
.page-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
.page-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.has-photo .page-inner{ position:relative; z-index:2; }
.cover-photo .ch-big{ z-index:1; mix-blend-mode:soft-light; opacity:.42; }

.scrim-hero{ background:
   radial-gradient(120% 95% at 78% 24%, rgba(7,10,18,.10), transparent 56%),
   linear-gradient(180deg, rgba(7,10,18,.55) 0%, rgba(7,10,18,.34) 30%, rgba(7,10,18,.90) 100%); }
.scrim-left{ background:linear-gradient(100deg, rgba(7,10,18,.95) 0%, rgba(7,10,18,.82) 42%, rgba(7,10,18,.40) 74%, rgba(7,10,18,.16) 100%); }
.scrim-soft{ background:linear-gradient(180deg, rgba(7,10,18,.58), rgba(7,10,18,.84)); }

/* inline side photo within a content layout */
.layout-photo{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,48px); align-items:stretch; margin-top:30px; }
.layout-photo > .ph-col{ display:flex; }
.photo-side{ position:relative; width:100%; min-height:300px; align-self:stretch; border-radius:22px; overflow:hidden; box-shadow:0 30px 60px -34px rgba(0,0,0,.7); }
.photo-side img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media(max-width:900px){ .layout-photo{ grid-template-columns:1fr; } .photo-side{ min-height:220px; } }

/* long single words (Hausverwaltungen …) must wrap, not clip */
.page .kpi .kv, .page .kpi .kl, .page .dcell{ overflow-wrap:break-word; hyphens:auto; min-width:0; }

/* noscript */
.noscript-note{ position:fixed; inset:auto 0 0 0; z-index:99; background:#111; color:#fff; padding:14px; text-align:center; font-size:14px; }

/* ---------------- MOBILE: brochure leaves become scrollable pages ---------------- */
@media(max-width:760px){
  .page{ overflow-y:auto; -webkit-overflow-scrolling:touch; align-items:flex-start;
    padding:76px 18px 130px; touch-action:pan-y; }
  .page-inner{ margin:0 auto; transform:none !important; }
  .page.cover .ch-big{ font-size:34vh; right:-6vw; bottom:-6vh; }
  .exec-grid{ grid-template-columns:1fr; }
  .exec-card, .exec-card.wide{ grid-column:auto; min-height:0; }
  .dash-grid{ grid-template-columns:1fr 1fr; }
  .dcell{ grid-column:span 1 !important; padding:18px; }
  .kpi-grid, .pillars, .gov-grid, .sdg-grid{ grid-template-columns:1fr; }
  #svc-track{ grid-template-columns:1fr; }
  .hero-stats{ flex-wrap:wrap; gap:18px; }
  .layout-photo{ grid-template-columns:1fr; }
  .photo-side{ min-height:200px; }
  .idx-row{ grid-template-columns:56px 1fr; }
  .matrix-wrap{ grid-template-columns:1fr; }
  .iv-head{ grid-template-columns:1fr; }
  .sec-title{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
}