/* Helikon e.V. – Website (helikon-gesellschaft.de) */
:root{
  --red-deep:#3a0610;
  --paper:#F4F1EC;
  --paper-dim:rgba(244,241,236,.72);
  --line:rgba(244,241,236,.22);
  --focus:#F4F1EC;
  --font-display:"neue-haas-grotesk-display","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:"neue-haas-grotesk-text","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad-x:clamp(1rem,4.2vw,5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--red-deep)}
body{margin:0;color:var(--paper);font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
::selection{background:var(--paper);color:var(--red-deep)}

/* Hintergrundbild (alle Seiten) */
.bg{position:fixed;inset:0;z-index:-1;background-color:var(--red-deep);
  background-image:url(/_site/bg-1920.54ec9b4c4f.jpg);
  background-image:image-set(url(/_site/bg-1920.79baf01b0a.webp) type("image/webp"),url(/_site/bg-1920.54ec9b4c4f.jpg) type("image/jpeg"));
  background-size:cover;background-position:52% 50%}
@media (max-width:960px){
  .bg{background-image:image-set(url(/_site/bg-960.cea09ab4fe.webp) type("image/webp"),url(/_site/bg-1920.54ec9b4c4f.jpg) type("image/jpeg"))}
}

/* Startseite – 8 Vollbild-Panels, horizontal gewischt (Steuerung: site.js).
   Maße in Container-Einheiten (cqw/cqh) statt vw/vh, damit sie auch im gedrehten Hochkant-Modus stimmen. */
html:has(> body.home),body.home{height:100%;overflow:hidden;overscroll-behavior:none}
.viewport{position:fixed;inset:0;overflow:hidden;container-type:size;touch-action:none;
  --pad-x:clamp(1rem,4.2cqw,5rem);
  --pad-b:clamp(2rem,6cqh,4.5rem);
  --logo-w:clamp(200px,22cqw,440px);
  --logo-h:calc(var(--logo-w) * 404.87 / 1100);
  --nav-fs:clamp(.95rem,1.15cqw,1.25rem);
  --nav-space:calc(var(--nav-fs) * 6.5);
  --claim-fs:clamp(2.5rem,6.1cqw,8.5rem);
  --sub-fs:clamp(.95rem,1.3cqw,1.6rem);
  --act-fs:clamp(.72rem,.8cqw,.95rem);
  --ease:cubic-bezier(.65,0,.35,1)}
/* Mobil hochkant: Inhalt um 90° drehen = Querformat erzwingen (auch bei Rotationssperre).
   Gleiche Bedingung in site.js (ROTATE_MQ) – beide gemeinsam ändern. */
@media (orientation:portrait) and (pointer:coarse){
  .viewport{inset:auto;top:0;left:0;width:100vh;width:100dvh;height:100vw;
    transform-origin:0 0;transform:translateX(100vw) rotate(90deg)}
}

.track{display:flex;width:100%;height:100%;transition:transform .8s var(--ease)}
.track.no-anim,.track.dragging{transition:none}
.track.snapping{transition:transform .35s cubic-bezier(.25,1,.5,1)}
.panel{position:relative;isolation:isolate;flex:0 0 100%;height:100%;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) var(--nav-space);
  grid-template-rows:1fr auto 1fr var(--logo-h);
  grid-template-areas:". ." "copy ." ". ." ". .";
  padding:0 var(--pad-x) var(--pad-b);background:#0c0c0e}
.panel--hero{background-color:var(--red-deep);
  background-image:url(/_site/bg-1920.54ec9b4c4f.jpg);
  background-image:image-set(url(/_site/bg-1920.79baf01b0a.webp) type("image/webp"),url(/_site/bg-1920.54ec9b4c4f.jpg) type("image/jpeg"));
  background-size:cover;background-position:52% 50%}
@media (max-width:960px){
  .panel--hero{background-image:image-set(url(/_site/bg-960.cea09ab4fe.webp) type("image/webp"),url(/_site/bg-1920.54ec9b4c4f.jpg) type("image/jpeg"))}
}
.panel-img{position:absolute;inset:0;z-index:-1}
.panel-img img{display:block;width:100%;height:100%;object-fit:cover}
.panel-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 38%,rgba(0,0,0,0) 68%)}

.copy,.panel > .claim{grid-area:copy;min-width:0}
.claim{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:var(--claim-fs);line-height:.92;letter-spacing:-.025em}
.claim span{display:block;white-space:nowrap}
.sub{margin:clamp(.9rem,2.4cqh,1.75rem) 0 0;max-width:34em;font-size:var(--sub-fs);line-height:1.4;text-wrap:pretty}
.actions{margin:clamp(1rem,3.2cqh,2.25rem) 0 0;display:flex;flex-wrap:wrap;gap:.6em 2.4em}
.act{display:inline-flex;align-items:center;gap:.8em;margin:-.6em 0;padding:.6em 0;border:0;background:none;
  color:inherit;font-family:var(--font-text);font-size:var(--act-fs);letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;cursor:pointer}
.act-icon{display:inline-grid;place-items:center;width:1.9em;height:1.9em;border:1px solid currentColor;border-radius:50%;
  font-size:1.05em;line-height:1;letter-spacing:0}
.act:hover .act-icon{background:var(--paper);color:#111}

/* Feste Ebene: Logo + Links wischen nicht mit. Raster wie das bisherige Hero → gleiche Positionen. */
.chrome{position:absolute;inset:0;z-index:2;pointer-events:none;display:grid;
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;
  grid-template-areas:". nav" "logo logo";padding:0 var(--pad-x) var(--pad-b)}
.chrome > *{pointer-events:auto}
.nav{grid-area:nav;align-self:center;display:flex;flex-direction:column;gap:.55em;
  font-family:var(--font-text);font-size:var(--nav-fs);letter-spacing:.14em;text-align:right}
.nav a,.drawer-nav a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.nav a:hover,.drawer-nav a:hover{color:#fff;text-decoration-thickness:2px}
.logo-link{grid-area:logo;justify-self:center;display:block}
.logo-link img{display:block;width:var(--logo-w);height:auto}

/* Panel 8 – Team */
.panel--team{background:radial-gradient(120% 95% at 45% 40%,#1c1c20 0%,#0c0c0e 72%);
  grid-template-columns:auto minmax(0,1fr) var(--nav-space);
  grid-template-areas:". . ." "copy team ." ". . ." ". . .";
  --pw:min(15.6cqw,28cqh)}
.panel--team .copy{align-self:center}
.panel--team .sub{max-width:12.5em}
.team{grid-area:team;align-self:center;margin-left:clamp(1rem,2.4cqw,3.25rem)}
.people{list-style:none;margin:0;padding:0;display:flex;gap:clamp(.75rem,2cqw,2.75rem)}
.people li{flex:0 1 var(--pw);width:var(--pw);min-width:0}
.people img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:#18181b}
.person{margin:.9em 0 0;font-size:clamp(.72rem,1.05cqw,1.25rem);line-height:1.3}
.person strong{display:block;font-weight:500}
.person span{display:block;color:var(--paper-dim)}
.mail{margin:clamp(1rem,3.4cqh,2.5rem) 0 0;font-size:clamp(.8rem,1.15cqw,1.35rem)}
.mail a{white-space:nowrap;text-decoration-thickness:1px;text-underline-offset:.28em}

/* „+ more“-Textfeld (fährt rechts ein, verdeckt die festen Links) */
.scrim{position:absolute;inset:0;z-index:3}
.drawer{position:absolute;top:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;
  width:clamp(18rem,33.34cqw,56rem);max-width:100%;
  padding:clamp(3.5rem,13cqh,9rem) clamp(1.25rem,3.6cqw,4.5rem) var(--pad-b);
  background:rgba(10,10,15,.88);
  visibility:hidden;transform:translateX(100%);
  transition:transform .55s var(--ease),visibility 0s linear .55s}
.drawer.is-open{visibility:visible;transform:none;transition:transform .55s var(--ease)}
.viewport.drawer-open .chrome .nav{visibility:hidden;transition:visibility 0s .35s}
.drawer-close{position:absolute;top:clamp(.75rem,5.5cqh,3.5rem);right:clamp(.75rem,2.6cqw,3.5rem);
  width:2.75rem;height:2.75rem;display:grid;place-items:center;padding:0;border:0;background:none;
  color:inherit;font:300 2rem/1 var(--font-text);cursor:pointer}
.drawer-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  font-size:clamp(.82rem,1.3cqw,1.5rem);line-height:1.5}
.drawer-body p{margin:0 0 1em}
.drawer-body .muted{color:var(--paper-dim)}
.drawer-nav{display:flex;flex-wrap:wrap;gap:.5em 1.6em;padding-top:1.25rem;
  font-family:var(--font-text);font-size:var(--nav-fs);letter-spacing:.14em}
@container (max-height:500px){
  .drawer{width:50cqw;padding-top:3rem;background:rgba(10,10,15,.97)}
  .copy .claim{font-size:min(var(--claim-fs),11cqh)}
  .drawer-close{top:.25rem}
  .drawer-body{font-size:.8rem;line-height:1.45}
  .drawer-nav{padding-top:.75rem}
}

/* Reduzierte Bewegung: überblenden statt wischen */
@media (prefers-reduced-motion:reduce){
  .track{display:block;position:relative;transform:none!important;transition:none}
  .panel{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 0s .5s,visibility 0s .5s}
  .panel.is-active{z-index:1;opacity:1;visibility:visible;transition:opacity .5s ease}
  .drawer{transform:none;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s}
  .drawer.is-open{opacity:1;transition:opacity .3s ease}
}

/* Unterseiten */
.bg--dim::after{content:"";position:absolute;inset:0;background:rgba(14,2,5,.86)}
.page{max-width:1240px;margin:0 auto;padding:clamp(1.25rem,4vh,2.5rem) var(--pad-x) clamp(3rem,10vh,6rem)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding-bottom:clamp(1.25rem,4vh,2.5rem);border-bottom:1px solid var(--line)}
.page-head .logo-small img{display:block;width:clamp(140px,14vw,200px);height:auto}
.page-head nav{display:flex;gap:1.5em;font-size:.95rem;letter-spacing:.14em}
.page-head nav a{text-decoration:none;color:var(--paper-dim)}
.page-head nav a[aria-current="page"],.page-head nav a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.28em}
.page h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5.5vw,5rem);
  line-height:.95;letter-spacing:-.02em;margin:clamp(2.5rem,8vh,5rem) 0 clamp(2rem,5vh,3rem)}
.legal{max-width:68ch;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.55}
.legal h2{font-family:var(--font-display);font-weight:700;font-size:1.25em;letter-spacing:-.01em;
  margin:2.2em 0 .5em}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 1em;color:var(--paper)}
.legal a{text-underline-offset:.2em}