/* ============================================================
   LEES — Magazin für Weinkultur, Genuss & Haltung
   Design tokens + layout + components
   ============================================================ */

:root{
  /* ---- Palette ---- */
  --paper:        #F4EEE2;   /* warm paper / off-white */
  --paper-2:      #EDE4D3;   /* deeper paper for cards / alt panels */
  --paper-3:      #E5DAC4;   /* deepest warm tone */
  --ink:          #1C1814;   /* warm near-black text */
  --ink-soft:     #4A433B;   /* muted body on paper */
  --night:        #16120E;   /* dark section background */
  --night-2:      #20190F;   /* slightly warmer dark */
  --bordeaux:     #2E3A2E;   /* primary accent — brand green */
  --bordeaux-2:   #20281F;   /* darker green */
  --champagne:    #CBB488;   /* champagne / beige accent */
  --champagne-2:  #B89C6B;
  --forest:       #2E3A2E;   /* deep depth green — used sparingly */
  --line:         rgba(28,24,20,0.16);
  --line-soft:    rgba(28,24,20,0.09);
  --line-light:   rgba(244,238,226,0.18);

  /* ---- Type ---- */
  --serif: "Bodoni Moda", "Times New Roman", serif;
  --sans:  "Schibsted Grotesk", system-ui, sans-serif;

  /* ---- Spacing / density (tweakable) ---- */
  --density: 1;
  --section-y: calc(clamp(4.5rem, 9vw, 8.5rem) * var(--density));
  --gap: calc(clamp(1.4rem, 2.4vw, 2.4rem) * var(--density));
  --container: 1320px;
  --edge: clamp(1.25rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing: border-box; }

html{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

::selection{ background: var(--bordeaux); color: var(--paper); }

img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }

/* ---- Layout helpers ---- */
.container{
  width:100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}
.section{ padding-block: var(--section-y); position: relative; }
.section--tight{ padding-block: calc(var(--section-y) * 0.62); }

/* ---- Type system ---- */
.eyebrow{
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bordeaux);
  display:inline-flex;
  align-items:center;
  gap:0.8em;
}
.eyebrow::before{
  content:"";
  width: 2.2rem; height:1px;
  background: var(--bordeaux);
  display:inline-block;
  opacity:0.7;
}
.eyebrow--plain::before{ display:none; }

h1,h2,h3{ font-family: var(--serif); font-weight: 500; margin:0; line-height: 1.02; letter-spacing: -0.01em; }

.display{
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.018em;
}
.h2{
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.02;
}
.h3{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height:1.1; }

.serif-italic{ font-style: italic; }

.lede{
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 56ch;
}
.body{ color: var(--ink-soft); max-width: 62ch; }

.kicker-num{
  font-family: var(--serif);
  font-style: italic;
  color: var(--bordeaux);
  font-size: 1.05rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --btn-bg: var(--bordeaux);
  --btn-fg: var(--paper);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.95em 1.7em;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 0.7em;
  position: relative;
  overflow: hidden;
  transition: color .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  border-radius: 1px;
  white-space: nowrap;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover::after{ transform: translateY(0); }
.btn .arrow{ transition: transform .5s var(--ease); }
.btn:hover .arrow{ transform: translate(3px,-3px); }

.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost::after{ background: var(--ink); }
.btn--ghost:hover{ --btn-fg: var(--paper); border-color: var(--ink); }

.btn--light{
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
}
.btn--light::after{ background: var(--champagne); }
.btn--light:hover{ --btn-fg: var(--ink); }

.btn--onnight-ghost{
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: var(--line-light);
}
.btn--onnight-ghost::after{ background: var(--paper); }
.btn--onnight-ghost:hover{ --btn-fg: var(--ink); border-color: var(--paper); }

/* text link with animated underline */
.tlink{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  display:inline-flex;
  align-items:center;
  gap:0.55em;
  position:relative;
  padding-bottom: 2px;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.tlink:hover::after{ transform: scaleX(1); transform-origin: left; }
.tlink .arrow{ transition: transform .45s var(--ease); }
.tlink:hover .arrow{ transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
}
.header.scrolled{
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line);
}
.brand{
  display:flex; align-items:center;
  height: clamp(26px, 3.4vw, 38px);
}
.brand img{
  height:100%; width:auto;
  transition: filter .4s var(--ease);
}
.nav{
  display:flex; align-items:center;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
}
.nav__links{
  display:flex; gap: clamp(1.1rem, 2vw, 2rem);
  list-style:none; margin:0; padding:0;
}
.nav__links a{
  font-size: 0.82rem; font-weight:500; letter-spacing:0.02em;
  color: var(--ink); position:relative; padding-block: 4px;
  opacity: 0.78; transition: opacity .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: var(--bordeaux); transform: scaleX(0); transform-origin:right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform: scaleX(1); transform-origin:left; }
.header__actions{ display:flex; align-items:center; gap: 1rem; }
.header__actions .btn{ padding: 0.7em 1.25em; }

.menu-toggle{ display:none; }

@media (max-width: 920px){
  .nav__links{ display:none; }
}
@media (max-width: 620px){
  .header__actions .tlink{ display:none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: var(--section-y);
  position: relative;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__eyebrow{ margin-bottom: 2rem; }
.hero__title{ margin-bottom: 1.6rem; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__sub{ margin-bottom: 2.6rem; max-width: 46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap: 1rem; align-items:center; }

.hero__meta{
  margin-top: clamp(2.5rem,5vw,4rem);
  display:flex; gap: clamp(2rem,4vw,3.5rem);
  flex-wrap:wrap;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.hero__meta .m{ display:flex; flex-direction:column; gap:0.25rem; }
.hero__meta .m b{ font-family: var(--serif); font-size:1.6rem; font-weight:500; }
.hero__meta .m span{ font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-soft); }

.hero__visual{ position: relative; display:flex; justify-content:center; }

/* ============================================================
   Magazine cover mockup
   ============================================================ */
.cover{
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 3 / 4.05;
  background: var(--bordeaux);
  color: var(--paper);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  display:flex; flex-direction:column;
  box-shadow: 0 40px 80px -30px rgba(28,18,14,0.5), 0 2px 0 rgba(0,0,0,0.1);
  will-change: transform;
}
.cover::before{ /* paper texture sheen */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.10), transparent 38%),
    radial-gradient(120% 80% at 80% 0%, rgba(0,0,0,0.18), transparent 60%);
  pointer-events:none;
}
.cover__top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:2; }
.cover__brand img{ height: clamp(22px, 3vw, 30px); width:auto; filter: invert(1) brightness(2); }
.cover__issue{ text-align:right; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; line-height:1.5; opacity:0.85; }
.cover__photo{
  position: relative; z-index:1;
  flex:1; margin-block: clamp(1rem,2vw,1.6rem);
  background:
    repeating-linear-gradient(135deg, rgba(244,238,226,0.10) 0 2px, transparent 2px 11px);
  border: 1px solid rgba(244,238,226,0.22);
  display:flex; align-items:flex-end; justify-content:flex-start;
  overflow:hidden;
}
.cover__photo .ph-label{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.6rem; letter-spacing:0.08em; text-transform:uppercase;
  color: rgba(244,238,226,0.6);
  padding: 0.7rem 0.8rem;
}
.cover__lines{ position:relative; z-index:2; }
.cover__lines .cl-main{
  font-family: var(--serif); font-weight:500; line-height:1.0;
  font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing:-0.01em;
}
.cover__lines .cl-main em{ font-style:italic; color: var(--champagne); }
.cover__lines .cl-sub{
  margin-top:0.7rem; font-size:0.72rem; letter-spacing:0.04em;
  color: rgba(244,238,226,0.78); max-width: 30ch; line-height:1.5;
}
.cover__barcode{
  position:relative; z-index:2; margin-top:1.1rem;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; opacity:0.7;
}
.cover__barcode .bars{
  width: 72px; height: 26px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 1px, transparent 1px 3px, var(--paper) 3px 4px, transparent 4px 6px);
  opacity:0.9;
}
/* paper / light cover variant */
.cover--paper{ background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -34px rgba(28,18,14,0.42); }
.cover--paper .cover__brand img{ filter:none; }
.cover--paper .cover__photo{
  background: repeating-linear-gradient(135deg, rgba(28,24,20,0.07) 0 2px, transparent 2px 11px);
  border-color: var(--line);
}
.cover--paper .cover__photo .ph-label{ color: var(--ink-soft); }
.cover--paper .cover__lines .cl-main em{ color: var(--bordeaux); }
.cover--paper .cover__lines .cl-sub{ color: var(--ink-soft); }
.cover--paper .cover__barcode{ color: var(--ink-soft); opacity:0.8; }
.cover--paper .cover__barcode .bars{ background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 4px, transparent 4px 6px); }

/* floating caption near cover */
.cover-tag{
  position:absolute; z-index:5;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
  padding:0.6em 0.9em; border:1px solid var(--line);
  box-shadow: 0 14px 30px -16px rgba(28,18,14,0.4);
}

/* ============================================================
   Image placeholders
   ============================================================ */
.ph{
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(28,24,20,0.055) 0 2px, transparent 2px 12px),
    var(--paper-2);
  border: 1px solid var(--line);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.ph .ph-label{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--ink-soft);
  padding: 0.85rem 1rem;
}
.ph--dark{
  background:
    repeating-linear-gradient(135deg, rgba(244,238,226,0.07) 0 2px, transparent 2px 12px),
    rgba(244,238,226,0.04);
  border-color: var(--line-light);
}
.ph--dark .ph-label{ color: rgba(244,238,226,0.55); }

/* ============================================================
   Section 1 — Positionierung
   ============================================================ */
.split{
  display:grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse .split__media{ order:-1; }
.split__media .ph{ aspect-ratio: 4/5; height:100%; }
.split__text h2{ margin-bottom: 1.6rem; }
.split__text .body{ margin-bottom: 1.4rem; }

.quote-line{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.35;
  color: var(--ink);
  border-left: 2px solid var(--bordeaux);
  padding-left: 1.4rem;
  margin: 0;
  max-width: 40ch;
}

/* ============================================================
   Section 2 — Themenwelt grid
   ============================================================ */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 2rem; margin-bottom: clamp(2.4rem, 4vw, 4rem);
  flex-wrap: wrap;
}
.section-head h2{ max-width: 16ch; }
.section-head .body{ max-width: 40ch; margin:0; }

.themes{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.theme{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: clamp(1.8rem, 2.6vw, 2.6rem);
  background: transparent;
  position:relative;
  transition: background .55s var(--ease), color .55s var(--ease);
  min-height: clamp(260px, 26vw, 340px);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.theme__num{
  font-family: var(--serif); font-style:italic;
  font-size:0.95rem; color: var(--bordeaux);
  transition: color .55s var(--ease);
}
.theme__title{
  font-family: var(--serif); font-size: clamp(1.45rem,2vw,1.85rem);
  font-weight:500; line-height:1.04; margin-top: auto; margin-bottom:0.8rem;
  letter-spacing:-0.01em;
}
.theme__desc{
  font-size:0.92rem; line-height:1.5; color: var(--ink-soft);
  transition: color .55s var(--ease);
  max-width: 34ch;
}
.theme__arrow{
  margin-top:1.3rem; font-size:0.78rem; letter-spacing:0.04em; font-weight:600;
  display:inline-flex; align-items:center; gap:0.5em;
  opacity:0; transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.theme:hover{ background: var(--ink); color: var(--paper); }
.theme:hover .theme__desc{ color: rgba(244,238,226,0.82); }
.theme:hover .theme__num{ color: var(--champagne); }
.theme:hover .theme__arrow{ opacity:1; transform: translateY(0); }

@media (max-width: 940px){
  .themes{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .themes{ grid-template-columns: 1fr; }
}

/* ============================================================
   Dark section (Editorial Anspruch / CTA)
   ============================================================ */
.night{ background: var(--night); color: var(--paper); }
.night .eyebrow{ color: var(--champagne); }
.night .eyebrow::before{ background: var(--champagne); }
.night .body{ color: rgba(244,238,226,0.74); }
.night .lede{ color: rgba(244,238,226,0.82); }
.night .quote-line{ color: var(--paper); border-color: var(--champagne); }
.night .article__cat{ color: var(--champagne); }
.night .article__excerpt{ color: rgba(244,238,226,0.72); }

.anspruch__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem);
  align-items:center;
}
.statline{
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height:1.08; font-weight:500; letter-spacing:-0.01em;
}
.statline em{ font-style:italic; color: var(--champagne); }

/* ============================================================
   Section 4 — Magazin Vorschau
   ============================================================ */
.issue__grid{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.issue__visual{ display:flex; justify-content:center; position:relative; }
.highlights{ list-style:none; margin: 1.8rem 0 2.4rem; padding:0; }
.highlights li{
  display:flex; gap:1.1rem; align-items:baseline;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.2; font-weight:500;
  transition: padding-left .45s var(--ease), color .45s var(--ease);
}
.night .highlights li{ border-top-color: var(--line-light); }
.highlights li:last-child{ border-bottom:1px solid var(--line); }
.night .highlights li:last-child{ border-bottom-color: var(--line-light); }
.highlights li .n{ font-style:italic; color: var(--bordeaux); font-size:0.85rem; min-width:1.6rem; }
.night .highlights li .n{ color: var(--champagne); }
.highlights li:hover{ padding-left: 0.6rem; }

.issue__meta{ display:flex; gap:2.5rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.issue__meta .im b{ display:block; font-family:var(--serif); font-size:1.5rem; font-weight:500; }
.issue__meta .im span{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-soft); }
.night .issue__meta .im span{ color: rgba(244,238,226,0.6); }

/* ============================================================
   Section 5 — Online / Blog cards
   ============================================================ */
.articles{
  display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,2.4vw,2.2rem);
}
.article{
  display:flex; flex-direction:column;
  cursor:pointer; background: transparent;
}
.article__media{
  aspect-ratio: 4/3.5; margin-bottom:1.3rem; overflow:hidden; position:relative;
}
.article__media .ph{ position:absolute; inset:0; transition: transform .8s var(--ease); }
.article:hover .article__media .ph{ transform: scale(1.04); }
.article__cat{
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
  color: var(--bordeaux); margin-bottom:0.8rem; display:block;
}
.article__title{
  font-family: var(--serif); font-size: clamp(1.3rem,1.8vw,1.7rem);
  font-weight:500; line-height:1.08; margin-bottom:0.7rem; letter-spacing:-0.01em;
}
.article__excerpt{ font-size:0.9rem; line-height:1.55; color: var(--ink-soft); margin-bottom:1rem; max-width:38ch; }
.article__more{ margin-top:auto; }

@media (max-width: 860px){
  .articles{ grid-template-columns:1fr; max-width:520px; }
}

/* ============================================================
   Section 6 — Partner
   ============================================================ */
.partner__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem);
  align-items:center;
}
.logo-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap:1px;
  background: var(--line); border:1px solid var(--line);
}
.logo-slot{
  background: var(--paper);
  aspect-ratio: 3/1.6;
  display:flex; align-items:center; justify-content:center;
  font-family: ui-monospace, Menlo, monospace; font-size:0.62rem; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--ink-soft);
}

/* ============================================================
   Final CTA
   ============================================================ */
.finalcta{ text-align:center; }
.finalcta .display{ margin-inline:auto; max-width: 16ch; margin-bottom:1.6rem; }
.finalcta .lede{ margin-inline:auto; text-align:center; margin-bottom:2.6rem; }
.finalcta .hero__cta{ justify-content:center; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background: var(--night); color: var(--paper); padding-block: clamp(3.5rem,6vw,5.5rem); }
.footer__top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--line-light);
}
.footer__brand img{ height: clamp(34px,5vw,52px); width:auto; filter: invert(1) brightness(2); margin-bottom:1.2rem; }
.footer__brand p{ color: rgba(244,238,226,0.6); max-width:34ch; font-size:0.92rem; }
.footer__col h4{ font-family:var(--sans); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--champagne); margin:0 0 1.1rem; font-weight:600; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
.footer__col a{ font-size:0.92rem; color: rgba(244,238,226,0.78); transition: color .35s var(--ease); }
.footer__col a:hover{ color: var(--paper); }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:2rem; font-size:0.78rem; color: rgba(244,238,226,0.5); letter-spacing:0.02em;
}
.footer__bottom .links{ display:flex; gap:1.5rem; }

@media (max-width: 860px){
  .footer__top{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; }
}

/* ============================================================
   Responsive — collapse splits
   ============================================================ */
@media (max-width: 900px){
  .hero__grid,
  .split,
  .anspruch__grid,
  .issue__grid,
  .partner__grid{ grid-template-columns: 1fr; }
  .split--reverse .split__media{ order:0; }
  .hero__visual{ margin-top: 2.5rem; }
  .split__media .ph{ aspect-ratio: 16/10; }
}

/* ============================================================
   Scroll reveals
   ============================================================ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform: none; }
.reveal[data-delay="1"]{ transition-delay: .08s; }
.reveal[data-delay="2"]{ transition-delay: .16s; }
.reveal[data-delay="3"]{ transition-delay: .24s; }
.reveal[data-delay="4"]{ transition-delay: .32s; }
.reveal[data-delay="5"]{ transition-delay: .40s; }

.line-reveal{ display:block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.in .line-reveal{ transform: translateY(0); }

/* framed images zoom-settle on reveal */
.reveal .figure img{ transform: scale(1.09); }
.reveal.in .figure img{ transform: scale(1); }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal, .line-reveal, .cover{ transition:none !important; transform:none !important; opacity:1 !important; }
  .figure img, .fb-img img, .band .fb-img img, .hero__cover{ transform:none !important; }
}

/* divider */
.rule{ height:1px; background: var(--line); border:0; margin:0; }

/* ============================================================
   Real imagery
   ============================================================ */
.media-img{ width:100%; height:100%; object-fit: cover; display:block; }

.figure{
  position: relative; overflow:hidden;
  background: var(--paper-2);
}
.figure img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s var(--ease); }

/* Hero editorial figure (portrait) */
.hero__figure{
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 3 / 4.05;
  overflow:hidden;
  box-shadow: 0 50px 90px -40px rgba(28,18,14,0.55);
  will-change: transform;
}
.hero__figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__figure .fig-cap{
  position:absolute; left:0; bottom:0; right:0;
  padding: 1.4rem;
  background: linear-gradient(to top, rgba(20,15,12,0.78), transparent);
  color: var(--paper);
  font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
}
.hero__figure .fig-cap b{ font-family:var(--serif); font-style:italic; font-weight:500; text-transform:none; letter-spacing:0; font-size:1.05rem; }

/* Studio panel for cover mockups (matches mockup background) */
.studio{
  background: #E7E5E0;
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow:hidden;
}
.studio img{ width:100%; height:100%; object-fit: contain; display:block; }
.studio--main{ aspect-ratio: 3 / 3.5; }
.studio--mini{ aspect-ratio: 3 / 3.6; }

/* Section-1 portrait media now an image */
.split__media .figure{ aspect-ratio: 4/5.2; height:100%; }

/* ============================================================
   Full-bleed image sections
   ============================================================ */
.fullbleed{
  position: relative;
  color: var(--paper);
  isolation: isolate;
  overflow:hidden;
  min-height: clamp(520px, 74vh, 800px);
  display:flex; align-items:center;
}
.fullbleed > .fb-img{
  position:absolute; inset:0; z-index:-2;
}
.fullbleed > .fb-img img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.14); will-change: transform; }
.fullbleed::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(105deg, rgba(16,12,9,0.86) 0%, rgba(16,12,9,0.66) 45%, rgba(16,12,9,0.42) 100%);
}
.fullbleed .eyebrow{ color: var(--champagne); }
.fullbleed .eyebrow::before{ background: var(--champagne); }
.fullbleed .body{ color: rgba(244,238,226,0.82); }
.fullbleed .lede{ color: rgba(244,238,226,0.9); }

/* ============================================================
   Thin cinematic water band with tagline
   ============================================================ */
.band{
  position: relative; overflow:hidden;
  min-height: clamp(360px, 54vh, 580px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; color: var(--paper); isolation:isolate;
}
.band > .fb-img{ position:absolute; inset:0; z-index:-2; }
.band > .fb-img img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.14); will-change: transform; }
.band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to bottom, rgba(18,13,9,0.30) 0%, rgba(18,13,9,0.50) 60%, rgba(18,13,9,0.66) 100%);
}
.band__tag{
  font-family: var(--serif); font-style:italic; font-weight:500;
  font-size: clamp(1.7rem, 4.4vw, 3.2rem); line-height:1.1;
  letter-spacing:-0.01em; padding-inline: 1rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.band__kicker{
  display:block; font-family:var(--sans); font-style:normal;
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  margin-bottom:1.2rem; opacity:0.9;
}

/* ============================================================
   Issue section — outlook card
   ============================================================ */
.issue__visual{ flex-direction:column; align-items:stretch; gap:0; }
.outlook{
  display:flex; align-items:center; gap:1.2rem;
  margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.outlook .studio--mini{ width: 96px; flex:0 0 96px; border:1px solid var(--line-soft); }
.outlook .ol-text{ font-size:0.84rem; line-height:1.5; }
.outlook .ol-text b{ font-family:var(--serif); font-size:1.05rem; font-weight:500; display:block; margin-bottom:0.2rem; }
.outlook .ol-text span{ color: var(--ink-soft); }

/* article images now real */
.article__media .figure{ position:absolute; inset:0; }
.article:hover .article__media .figure img{ transform: scale(1.05); }

/* ============================================================
   Buy modal
   ============================================================ */
.modal-overlay{
  position: fixed; inset:0; z-index:1000;
  background: rgba(16,12,9,0.55);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
  opacity:0; visibility:hidden; transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  background: var(--paper);
  width: min(100%, 880px);
  max-height: 92vh; overflow:auto;
  display:grid; grid-template-columns: 0.85fr 1.15fr;
  box-shadow: 0 50px 100px -30px rgba(16,12,9,0.6);
  transform: translateY(24px) scale(0.98); transition: transform .5s var(--ease);
  position: relative;
}
.modal-overlay.open .modal{ transform: none; }
.modal__visual{ background:#E7E5E0; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.modal__visual img{ width:100%; height:100%; max-height:380px; object-fit:contain; }
.modal__body{ padding: clamp(1.8rem, 3vw, 2.8rem); display:flex; flex-direction:column; }
.modal__close{
  position:absolute; top:14px; right:16px; z-index:2;
  width:38px; height:38px; border:1px solid var(--line); background:var(--paper);
  cursor:pointer; font-size:1.1rem; line-height:1; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition: background .35s var(--ease), color .35s var(--ease);
}
.modal__close:hover{ background:var(--ink); color:var(--paper); }
.modal__eyebrow{ margin-bottom:1.1rem; }
.modal__title{ font-family:var(--serif); font-size: clamp(1.8rem,3vw,2.5rem); font-weight:500; line-height:1.04; margin:0 0 0.8rem; }
.modal__intro{ color: var(--ink-soft); font-size:0.95rem; line-height:1.55; margin:0 0 1.4rem; }
.modal__facts{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0.1rem 1.5rem; border-top:1px solid var(--line); }
.modal__facts li{ display:flex; justify-content:space-between; gap:1rem; padding:0.7rem 0; border-bottom:1px solid var(--line-soft); font-size:0.88rem; }
.modal__facts li span{ color: var(--ink-soft); }
.modal__facts li b{ font-weight:600; }
.modal__form-label{ font-size:0.8rem; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:0.7rem; }
.modal__form{ display:flex; gap:0.6rem; margin-bottom:0.9rem; }
.modal__form input{
  flex:1; padding:0.95em 1.1em; border:1px solid var(--line); background:var(--paper-2);
  font-family:var(--sans); font-size:0.92rem; color:var(--ink); border-radius:1px; outline:none;
  transition: border-color .3s var(--ease);
}
.modal__form input:focus{ border-color: var(--bordeaux); }
.modal__form .btn{ flex:0 0 auto; }
.modal__note{ font-size:0.74rem; color: var(--ink-soft); line-height:1.5; }
.modal__note a{ text-decoration:underline; }
.modal__success{
  display:none; align-items:center; gap:0.7rem;
  padding:1rem 1.1rem; background: var(--forest); color: var(--paper);
  font-size:0.9rem; margin-bottom:0.9rem;
}
.modal.done .modal__form, .modal.done .modal__form-label{ display:none; }
.modal.done .modal__success{ display:flex; }

@media (max-width: 680px){
  .modal{ grid-template-columns: 1fr; }
  .modal__visual{ max-height:240px; }
  .modal__visual img{ max-height:200px; }
  .modal__form{ flex-direction:column; }
}

/* ============================================================
   Hero cover (product mockup as a studio card)
   ============================================================ */
.hero__cover{
  width: min(100%, 510px);
  aspect-ratio: 1122 / 1402;
  box-shadow: 0 56px 100px -42px rgba(28,18,14,0.52);
  will-change: transform;
}

/* ============================================================
   Green "Erste Ausgabe" section
   ============================================================ */
.issue-green{ background: var(--forest); color: var(--paper); }
.issue-green .eyebrow{ color: var(--champagne); }
.issue-green .eyebrow::before{ background: var(--champagne); }
.issue-green .body{ color: rgba(244,238,226,0.78); max-width: 46ch; }
.issue-green .issue__grid{ align-items: center; }

.facts{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap:1px; background: rgba(244,238,226,0.16);
  border:1px solid rgba(244,238,226,0.16);
  margin-top: 2.2rem;
}
.fact{ background: var(--forest); padding: clamp(1.3rem,2.2vw,1.9rem); }
.fact b{
  font-family: var(--serif); font-weight:500; line-height:0.95;
  font-size: clamp(2.1rem, 4vw, 3.2rem); display:block; letter-spacing:-0.01em;
}
.fact span{
  display:block; margin-top:0.65rem;
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  color: rgba(244,238,226,0.6);
}

.issue-green__side{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.issue-green__mark{ width:100%; display:flex; justify-content:center; }
.issue-green__mark img{ width: min(78%, 340px); height:auto; display:block; }
.issue-green__schwerpunkt{
  font-family: var(--serif); font-size: clamp(1.05rem,1.6vw,1.35rem);
  color: rgba(244,238,226,0.86); letter-spacing:0.02em; margin:0; text-align:center;
}
.issue-green__schwerpunkt em{ font-style:italic; color: var(--champagne); }

@media (max-width: 900px){
  .issue-green .issue__grid{ grid-template-columns: 1fr; }
  .issue-green__side{ order:-1; }
  .issue-green__mark img{ width: min(56%, 260px); }
}