:root{
  --vcg-green:#95C11F;
  --mag-bg:#f3f5f7;
  --mag-text:#111;
  --mag-muted:#6b7280;
  --mag-border:rgba(0,0,0,.08);
  --mag-radius:8px;
  --mag-shadow:0 8px 24px rgba(0,0,0,.06);

  /* Wird per JS gesetzt: komplette Headerhöhe (.header.noprint inkl. .topnav + .navbar) */
  --site-header-h: 0px;
}

/* =========================================================
1) SITE HEADER (dein bestehender <section class="header noprint">)
   -> fixed + hide/show per class
========================================================= */
section.header.noprint{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1100;                 /* über sticky magazin */
  background: #fff;

  transition: transform .35s ease, opacity .35s ease;
  will-change: transform, opacity;
}

/* Header ausblenden beim Scroll */
section.header.noprint.is-hidden{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Platz schaffen für fixed Header */
body{
  padding-top: var(--site-header-h);
}

/* =========================================================
2) MAGAZIN STICKY BLOCK (Titel + Subnav)
   -> klebt an Viewport, aber unterhalb vom fixed Header,
      solange Header sichtbar ist.
========================================================= */
.magazin-page{
  background: var(--mag-bg);
  margin-top: -20px;
}
.magazin-content-page{
  background: #fff;
  margin-top: -20px;
}

/* sticky wrapper */
.magazin-sticky{
  position: sticky;
  top: 0;
  z-index: 1040;
  background: #fff;
  border-bottom: 1px solid var(--mag-border);
}
.magazin-sticky.is-stuck{
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.magazin-page #carouselMagazinIndicators {
  min-height: unset;
}

/* Offset unter dem fixed Header (solange Header sichtbar ist) */
.magazin-sticky__offset{
  transform: translateY(var(--site-header-h));
  transition: transform .35s ease;
}
.magazin-sticky__offset.header-hidden{
  transform: translateY(0px);
}
html.no-scroll .magazin-sticky__offset,
body.no-scroll .magazin-sticky__offset
 {
  transform: translateY(0);
  transition: unset;
}
.magazin-sticky__offset.no-transform-animation {
  transition: none !important;
}

/* =========================================================
3) Magazin Titel (Playfair Display)
========================================================= */
.magazin-head{ background:#fff; }
.magazin-head__title{
  margin: 0 0 -7px 0;
  font-family: "Playfair Display";
  font-size: 57px;
  font-weight: 400;
  line-height: 76px;
  color: var(--mag-text);
}
.magazin-head__subtitle{
  font-family: "Playfair Display";
  font-size: 21px;
  font-weight: 400;
  line-height: 28px;
  color: var(--mag-muted);
}

.magazin-page > .container.magazin-content,
.magazin-page > div > .container.magazin-content {
  margin-top: 100px;
}

.magazin-page > .content-contentsite.bg-white .container.magazin-content,
.magazin-page > .content-contentsite.bg-white > .container.magazin-content {
  margin-top: unset;
}

.magazin-page .content-contentsite {
  min-height: unset;
}
.magazin-page .magazin-content #bildarrow,
.magazin-content-page .magazin-content #bildarrow {
  margin-left: 10px;
  margin-top: -45px;
}

/* =========================================================
4) Magazin Navigation (Desktop centered, Mobile scroll)
========================================================= */
.mag-nav{
  background:#fff;
  border-bottom: 1px solid var(--mag-border);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
}

.mag-nav__inner{
  display:flex;
  align-items:center;
  gap: 1.75rem;
  height:44px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.mag-nav__inner::-webkit-scrollbar{ display:none; }

@media (min-width: 769px){
  .mag-nav__inner{ justify-content:center; }
}

.mag-nav__item{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:50px;
  font-weight:600;
  font-size:13px;
  margin: 0 10px;
  color: var(--mag-text);
  text-decoration:none;
  white-space:nowrap;
}
.mag-nav__item:hover{
  color: var(--mag-text);
  text-decoration: none;
}

.mag-nav__icon{ width:18px; height:18px; }

.mag-nav__item.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:11px;
  height:2px;
  border-radius:999px;
  background: var(--vcg-green);
}
.mag-nav__item:hover::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:11px;
  height:2px;
  border-radius:999px;
  background: var(--vcg-green);
}

.mag-nav__fade{
  position:absolute;
  right:0; top:0;
  width:44px;
  height:100%;
  pointer-events:none;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}

/* =========================================================
5) Breadcrumb + Artikelkarte
========================================================= */
.mag-breadcrumb{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--mag-muted);
}
.mag-breadcrumb a{ color:inherit; text-decoration:none; }
.mag-breadcrumb a:hover{ text-decoration:underline; }

.mag-article{
  border-radius: var(--mag-radius);
  overflow:hidden;
}
.mag-article__img{
  width:100%;
  display:block;
  aspect-ratio: 16/7;
  object-fit: cover;
}
.mag-article__meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--mag-text);
  opacity:.75;
}
.mag-article__headline{
  margin:.6rem 0 .6rem;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height:1.15;
  font-weight:800;
  color: var(--mag-text);
}
.mag-article__text{
  margin:0;
  font-size:18px;
  line-height:1.55;
  color: var(--mag-muted);
  max-width:72ch;
}
.mag-article__more{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin-top:.9rem;
  color: var(--vcg-green);
  font-weight:600;
  text-decoration:none;
}
.mag-article__more:hover{ text-decoration:underline; text-underline-offset:3px; }
.mag-article__arrow{ font-size:22px; line-height:1; }

@media (max-width: 991px){
  .magazin-sticky {
    margin-top: -75px;
  }
  .mag-nav__inner {
    gap: 3px;
  }
  .magazin-page #carouselMagazinIndicators {
    min-height: unset;
  }
  .magazin-page .magazin-content .magazin-titelbild-blur,
  .magazin-content-page .magazin-content .magazin-titelbild-blur {
    width: 100%;
  }
  .magazin-head__title {
    font-size: 37px;
    line-height: 49px;
    letter-spacing: -0.5px;
    margin-bottom: 2px;
  }
  .magazin-head__subtitle {
    font-family: "Playfair Display";
    font-size: 13px;
    color: #25292E;
    line-height: 17px;
  }
}

@media (max-width: 768px){
  .mag-nav__inner{ height:46px; gap:3px; }
  .mag-nav__item{ height:46px; font-size:13px; }
  .mag-nav__item.is-active::after,
  .mag-nav__item:hover::after{ bottom:11px; }

  .mag-article{
    border-radius:0;
    box-shadow:none;
    background:transparent;
    overflow:visible;
  }
  .mag-article__img{ aspect-ratio:4/3; border-radius:0; }
  .mag-article__body{ background:#fff; }
  .mag-article__text{ font-size:17px; }
  .magazin-page > .container.magazin-content {
    margin-top: 75px;
  }
  .magazin-page > div > .container.magazin-content {
    margin-top: 50px;
  }
  .magazin-content-page .main-content-area {
    margin-top: 75px;
  }
}