/* Header-Höhe (einmalig!) */
:root{ --header-h: 140px; }
@media (min-width: 1024px){
  :root{ --header-h: 160px; }
}

/* Container – du nutzt in base.css --max, also bitte auch hier */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}
/* Container innerhalb GlobalShell: kein doppeltes Seiten-Padding */
.globalShell .container{
  padding-left: 0;
  padding-right: 0;
}

.section{
  padding-top: 64px;
  padding-bottom: 64px;
  border-top: 1px solid var(--line);
}
.section--first{
  border-top: none;
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Default: Section-Header (Eyebrow/Headline/Lede) zentriert */
.section > .eyebrow,
.section > h1,
.section > h2,
.section > .lede{
  text-align: center;
}
.section > .lede{
  margin-left: auto;
  margin-right: auto;
}

/* Opt-out wenn du mal links willst */
.section.section--left > .eyebrow,
.section.section--left > h1,
.section.section--left > h2,
.section.section--left > .lede{
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
/* =========================================================
   2-Spalten Layout (Main + Sidebar)
   Mobile: 1 Spalte
   Desktop (>=1024px): Sidebar rechts, sticky
   ========================================================= */
.pageGrid{
  display: grid;
  gap: 22px;
}

@media (min-width: 1024px){
  .pageGrid--sidebar{
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
  }
}

.pageMain{ min-width: 0; }
.pageSidebar{ min-width: 0; }

@media (min-width: 1024px){
  .pageSidebar{
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
  }
}


.site-footer{
  background:var(--taupe);
  color:var(--taupe-dark);
  padding:0 20px;
  border-top:1px solid rgba(183,169,154,0.25);
}
.footer-content{
  max-width: var(--max);
  margin:0 auto;
  padding:22px 0;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  text-align:center;
}
.footer-brand{
  font-family:"WindSong",cursive;
  font-size:1.6rem;
  margin:0 6px;
}
.footer-teaser{font-weight:600;}
.footer-links,.social-links{display:flex;gap:14px;flex-wrap:wrap;}
.footer-links a,.social-links a{color:var(--taupe-dark);text-decoration:none;}
.footer-links a:hover,.social-links a:hover{text-decoration:underline;}
/* =========================
   Sticky Footer (Footer bleibt unten bei wenig Inhalt)
   ========================= */

html, body{
  height: 100%;
}

/* body hat bei dir class="page" */
body.page{
  min-height: 100svh;      /* besser als 100vh auf Mobile */
  display: flex;
  flex-direction: column;
}

/* Main wächst und schiebt Footer nach unten */
body.page > main{
  flex: 1 0 auto;
}

/* Footer hängt unten */
body.page > footer{
  margin-top: auto;
}
/* layout.css – Footer bleibt unten bei kurzen Seiten */
.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-content{
  flex: 1;
}
/* =========================================================
   GLOBAL SHELL — Sidebars + Center (var(--max))
   Mobile: center -> left -> right
   Ab 1180px: 2 Spalten (center + right), left via Clone in right
   Ab 1600px: 3 Spalten (left + center + right)
   ========================================================= */

/* Defaults GLOBAL (nicht nur Home!) */
:root{
  --sb-right: 320px;
  --sb-left: 300px;
  --sb-gap: 32px;
}

/* Optional: wenn du pro Seite andere Sidebars willst:
.page--home{ --sb-left:300px; --sb-right:320px; }
.page--elemente{ --sb-left:300px; --sb-right:320px; }
*/

.globalShell{
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-areas:
    "center"
    "left"
    "right";
  row-gap: 18px;

  align-items: start;
  overflow: visible;
}

.globalShell__center{ grid-area: center; min-width: 0; }
.globalShell__left  { grid-area: left;   min-width: 0; display: block; }
.globalShell__right { grid-area: right;  min-width: 0; }

/* Default: Clone aus */
.globalShell__leftClone{ display: none; }

/* 2-Spalten: Center + Right */
@media (min-width: 1180px){
  .globalShell{
    /* Gesamtblock bleibt zentriert */
    max-width: calc(var(--max) + var(--sb-right) + var(--sb-gap) + 40px);

    grid-template-columns: minmax(0, var(--max)) var(--sb-right);
    grid-template-areas: "center right";
    column-gap: var(--sb-gap);
    row-gap: 0;
  }

  .globalShell__left{ display: none; }
  .globalShell__leftClone{ display: block; margin-top: 18px; }

  .globalShell__right{
    position: sticky;
    top: calc(var(--header-h) + 18px);
    align-self: start;

    max-height: calc(100vh - var(--header-h) - 36px);
    overflow: auto;
    padding-right: 6px;

    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* 3-Spalten: Left + Center + Right */
@media (min-width: 1600px){
  .globalShell{
    max-width: calc(var(--sb-left) + var(--max) + var(--sb-right) + (2 * var(--sb-gap)) + 40px);

    grid-template-columns: var(--sb-left) minmax(0, var(--max)) var(--sb-right);
    grid-template-areas: "left center right";
    column-gap: var(--sb-gap);
  }

  .globalShell__left{ display: block; }
  .globalShell__leftClone{ display: none; }

  .globalShell__left{
    position: sticky;
    top: calc(var(--header-h) + 18px);
    align-self: start;

    max-height: calc(100vh - var(--header-h) - 36px);
    overflow: auto;
    padding-right: 6px;

    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================================
   SPLIT PANEL STACK (50/50) – wiederverwendbares Modul
   - Außen: Section background (z.B. Salbei)
   - Innen: Frame padding + gap zeigt "Rand"
   - Items: 1fr/1fr, alternierend per nth-child(even)
   - Mobile: untereinander (Bild oben)
   ========================================================= */

.page--elemente-hub .splitPanelStack--sage{
  background: rgb(var(--ed-sage, 196,209,192));
  border-radius: 0;
  padding: 24px 0 30px;
  margin-bottom: clamp(26px, 3.2vw, 44px); /* ✅ Abstand danach: Body (ivory) scheint durch */
}

/* Frame erzeugt den "Salbei-Rand" */
.page--elemente-hub .splitPanelStack__frame{
  --gutter: clamp(14px, 2.2vw, 22px);
  margin-top: 18px;

  display: grid;
  gap: var(--gutter);
  padding: var(--gutter);

  /* Kein eigener Background nötig: Section ist Salbei */
}

/* Item = 50/50 Split */
.page--elemente-hub .splitPanelStack__item{
  background: rgb(var(--ed-ivory, 249,245,239));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 0;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media content";
  align-items: stretch;

  min-height: clamp(240px, 22vw, 320px);
}

/* Alternierung: jede zweite Zeile spiegeln */
.page--elemente-hub .splitPanelStack__item:nth-child(even){
  grid-template-areas: "content media";
}

/* Media links/rechts, immer vollflächig */
.page--elemente-hub .splitPanelStack__media{
  grid-area: media;
  margin: 0;
  width: 100%;
  height: 100%;
}

.page--elemente-hub .splitPanelStack__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content: vertikal mittig */
.page--elemente-hub .splitPanelStack__content{
  grid-area: content;
  padding: clamp(16px, 2.2vw, 24px);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.page--elemente-hub .splitPanelStack__kicker{
  margin: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .84rem;
  opacity: .85;
}

.page--elemente-hub .splitPanelStack__text{
  margin: 0;
  max-width: 62ch;
}

.page--elemente-hub .splitPanelStack__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* Mobile: untereinander (Bild oben, Text unten) */
@media (max-width: 900px){
  .page--elemente-hub .splitPanelStack__item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
    min-height: unset;
  }

  .page--elemente-hub .splitPanelStack__media{
    aspect-ratio: 16 / 9;
  }

  .page--elemente-hub .splitPanelStack__media img{
    height: auto; /* sorgt dafür, dass aspect-ratio sauber greift */
  }
}
/* splitPanelStack: <picture> muss die gleiche Fläche wie <img> füllen */
.page--elemente-hub .splitPanelStack__media > picture{
  display:block;
  width:100%;
  height:100%;
}
.page--elemente-hub .splitPanelStack__media > picture > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.page--element .elementHeroCtas{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* GLOBAL: Buttons-Cluster zentrieren */
.hubQuickcheckBox .hubBtns.hubBtns--center{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  justify-content:center;
  align-items:center;
}
.hubQuickcheckBox .hubBtns.hubBtns--center > .btn{ flex:0 0 auto; }

/* Anchor-Offsets für Fixed Header */
main :is(section, [id]) {
  scroll-margin-top: calc(var(--header-h) + 16px);
}