/* FRIGISINGA – schlanke Neufassung (ohne Webflow) */

:root{
  --brand:#7c6da9;      /* Hauptfarbe der aktuellen Ausgabe */
  --black:#000;
  --white:#fff;
  --content-font:"freight-text-pro",Georgia,"Times New Roman",serif;
  --ui-font:"nobel","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--brand);
  color:var(--white);
  font-family:var(--content-font);
  font-size:1rem;
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;border:0}
a{color:inherit}
::selection{background:var(--brand);color:#fff}

/* ---------- Hero mit Zoom-F ---------- */
.hero{position:relative;height:300vh}
.hero-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;background:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
.zoom-f{width:88vw;will-change:transform;transform-origin:center center;backface-visibility:hidden}
.zoom-f img{width:100%;height:auto}

.hero-overlay{position:absolute;z-index:5;will-change:opacity}
.labels{top:2em;right:2em;width:7em}
.claim{bottom:2em;right:2em;width:15em}
.logo{bottom:2em;left:2em;width:14em}
.logo img{width:100%}
.arrow{bottom:82px;left:50%;transform:translateX(-50%)}
.arrow img{width:28px}

/* ---------- Inhaltsbereiche (weiß) ---------- */
.section-content{background:var(--white);color:var(--black);padding:6em 0 4em}
.container{width:720px;max-width:52.5em;margin:0 auto 8em;padding:0 20px}
.container:last-child{margin-bottom:0}

.h2{
  font-family:var(--ui-font);text-transform:uppercase;
  font-size:2em;font-weight:700;line-height:1.3;margin:0 0 30px;color:var(--black);
}
.content{
  font-family:var(--content-font);font-size:1.3em;font-weight:400;line-height:1.6;color:var(--black);
  margin:0 0 10px;
}
.content em{font-style:italic}

.btn{
  display:inline-block;background:var(--white);color:var(--black);
  border:1px solid var(--black);padding:12px 32px;margin-top:24px;
  font-family:var(--ui-font);font-size:.8em;letter-spacing:1px;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;
}
.btn:hover{background:var(--brand);color:var(--white);border-color:var(--brand)}

.space{height:3em}

/* ---------- Hefte ---------- */
.heft{display:flex;align-items:center;margin-top:56px}
.heft:first-child{margin-top:0}
.heft__img{flex:0 0 50%;max-width:50%}
.heft__text{flex:0 0 50%;max-width:50%;padding:4em}

/* ---------- Horizontale Galerie ---------- */
.gallery{height:400vh;background:var(--white)}
.gallery-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.gallery-track{display:flex;height:100%;will-change:transform}
.gallery-track img{height:100vh;width:auto;max-width:none}

/* ---------- Footer ---------- */
.silhouette{padding:0 8em}
.silhouette__shape{position:relative;display:block;width:1000px;max-width:100%;margin:0 auto}
.silhouette__shape img{display:block;width:100%;visibility:hidden}
.silhouette__shape::after{content:"";position:absolute;inset:0;background:var(--brand);
  -webkit-mask:url(../images/silhouette-4.svg) center/100% 100% no-repeat;
          mask:url(../images/silhouette-4.svg) center/100% 100% no-repeat}
.labels-footer{display:none;margin:0 auto;width:8em}
.links-footer{
  font-family:var(--ui-font);font-size:.8em;letter-spacing:1px;text-align:center;
  color:var(--black);margin-top:18px;line-height:1.5;
}
.a-footer{color:var(--black);text-decoration:none;transition:color .2s}
.a-footer:hover{color:var(--brand)}
.a{color:var(--black);text-decoration:none;transition:color .2s}
.a:hover{color:var(--brand)}

/* ---------- Datenschutz-Seite ---------- */
.body-plain{background:var(--brand)}

/* ---------- Scroll-Einblendungen ---------- */
.fade{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.fade.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  body{font-size:.87rem}
  .container{width:100%;padding:0 4em}
  .hero{height:100vh;height:100dvh}
  .hero-sticky{height:100vh;height:100dvh}
  .zoom-f{width:12vw}
  .gallery{display:block;height:auto;background:var(--white);padding:2em 0}
  .gallery-sticky{position:static;height:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gallery-track{transform:none!important;height:auto;gap:0;padding:0;width:max-content}
  .gallery-track img{height:70vh;width:auto;flex:0 0 auto;max-width:none}
}
@media (max-width:767px){
  body{font-size:.75rem}
  .content{font-size:1.5em}
  .labels{display:none}
  .claim{top:2em;right:2em;bottom:auto;left:auto;width:60vw;max-width:22em}
  .zoom-f{width:11vw}
  .logo{width:12em;bottom:calc(7em + env(safe-area-inset-bottom))}
  .arrow{bottom:calc(8.5em + env(safe-area-inset-bottom))}
  .btn{font-size:1em}
  .a-footer{font-size:1.2em}
  .labels-footer{display:block}
  .silhouette{padding:0}
  .heft{flex-direction:column;margin-top:2.5em}
  .heft__img,.heft__text{flex:0 0 100%;max-width:100%}
  .heft__text{padding:1.5em 0 0;text-align:center}
}
@media (max-width:479px){
  .claim{width:64vw}
  .zoom-f{width:11vw}
  .logo{width:10em}
  .a-footer{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none}
}