/* gallery.css – Nur Galerie */
:root{
      --bg:#f5f5f4;
      --surface:#ffffff;
      --ink:#121212;
      --muted:#5e5e5e;
      --line:rgba(0,0,0,.10);
      --shadow:0 18px 60px rgba(0,0,0,.12);
      --radius:18px;
      --header:#5f6368;
      --headerLine:rgba(255,255,255,.10);
      --headerText:rgba(255,255,255,.92);
      --max:1120px;
    }
    *{box-sizing:border-box}
    body{overflow-x:hidden;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--ink);overflow-x:hidden}
    a{color:inherit}

    /* HEADER */
    header{position:sticky;top:0;z-index:10000;background:var(--header);border-bottom:1px solid var(--headerLine)}
    .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
    .headerWrap{padding:0 14px}
    .brand{margin-left:-10px;display:flex;align-items:center;min-width:200px}
    .headerTop{display:flex;align-items:center;gap:18px;padding:14px 0}
    .brandLogo{height:64px;width:auto;display:block;object-fit:contain}
    @media (max-width:520px){.brandLogo{height:56px}}

    nav#desktopNav{display:flex;flex:1;min-width:0;justify-content:center;align-items:center;gap:clamp(14px,2.0vw,22px);flex-wrap:nowrap}
    nav#desktopNav a{color:var(--headerText);font-weight:600;font-size:clamp(11px,1.05vw,13px);letter-spacing:.12em;text-transform:uppercase;padding:6px 6px;position:relative;opacity:.92;white-space:nowrap;text-decoration:none}
    nav#desktopNav a:hover{opacity:1}
    nav#desktopNav a::after{content:"";position:absolute;left:6px;right:6px;bottom:-2px;height:2px;background:rgba(255,255,255,0);border-radius:999px;transition:background .15s ease}
    nav#desktopNav a:hover::after{background:rgba(255,255,255,.28)}
    nav#desktopNav a.active::after{background:rgba(255,255,255,.55)}

    .navRight{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:flex-end}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--headerText);font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer;text-decoration:none}
    .btn:hover{background:rgba(255,255,255,.10)}
    .btn.primary{background:#fff;color:#0b0c0f;border-color:transparent}
    .iconBtn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
    .iconBtn:hover{background:rgba(255,255,255,.10)}
    .iconBtn svg{width:18px;height:18px;fill:rgba(255,255,255,.88)}

    /* MAIN */
    main{max-width:var(--max); margin:0 auto; padding:26px 18px 70px}
    .sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:14px 0 12px}
    .sectionHead h1{margin:0; font-size:34px; letter-spacing:.06em}
    .sub{margin:0 0 16px;color:var(--muted)}

    .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}

    /* Ruhiger Rahmen + Innen-Scroll */
    .igWrap{padding:14px}
    .igFrame{
      border-radius:16px;
      border:1px solid rgba(0,0,0,.08);
      background:#fff;
      overflow:auto;
      /* Desktop */
      height:min(72vh, 760px);
      /* iOS/Android safe */
      max-height:calc(100dvh - 220px);
      scrollbar-gutter:stable;
      -webkit-overflow-scrolling:touch;
    }
    @media (max-width:520px){
      .sectionHead h1{font-size:28px}
      .igFrame{
        height:72dvh;
        max-height:calc(100dvh - 210px);
      }
    }

    /* Kleine, ruhige Hinweiszeile */
    .igHint{
      margin:12px 4px 0;
      text-align:center;
      font-size:12px;
      color:rgba(0,0,0,.55);
    }

    /* Footer links (optional simpel) */
    footer{max-width:var(--max);margin:0 auto;padding:16px 18px 28px;color:rgba(0,0,0,.55);font-size:12px}
    footer a{color:inherit;text-decoration:none}
    footer a:hover{text-decoration:underline}

    /* Basic right-click / drag prevention (kein echter Download-Schutz, aber erschwert) */
    img{user-select:none;-webkit-user-drag:none}
  
/* === Mobile fixes === */
[hidden]{display:none !important;}
.hamburger{font-size:18px;line-height:1;display:block}

/* Fullscreen Burger Menu */
.mobileMenu{
  position:fixed;
  inset:0;
  background:var(--header);
  padding:84px 22px 22px;
  z-index:10002;
  overflow:auto;
}
.mobileMenu a{
  padding:14px 0;
  font-size:15px;
  letter-spacing:.14em;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mobileMenu a:last-child{border-bottom:0}
.mobileMenu .mobileCta{
  margin-top:auto;
  width:fit-content;
  max-width:85%;
  min-width:0;
  align-self:center;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  text-align:center;
  padding:10px 20px;
  font-size:14px;
}

/* When menu open, lock background scroll */
body.menuOpen{overflow:hidden;}

/* Header mobile simplification */
@media (max-width:980px){
  .navRight .iconBtn{display:none}
  .navRight .btn.primary{display:none}
  .btn.menuBtn{width:44px;height:44px;padding:0;justify-content:center}
}



/* ===== Mobile Drawer Menu (right side, half screen) ===== */
.noScroll{overflow:hidden !important;}
.menuOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:10001;
}
.mobileMenu{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(72vw, 360px);
  background:var(--header);
  color:var(--headerText);
  z-index:10002;
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transform:translateX(100%);
  transition:transform .22s ease;
  box-shadow:-14px 0 44px rgba(11,12,15,.22);
}
.mobileMenu.open{transform:translateX(0);}
.menuOverlay.open{display:block;}
.menuClose{
  align-self:flex-end;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--headerText);
  font-size:28px;
  line-height:1;
}
.mobileMenuLinks{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:2px;
}
.mobileMenuLinks a{
  color:var(--headerText);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  font-size:14px;
  padding:12px 8px;
  border-top:1px solid rgba(255,255,255,.10);
  text-align:right;
}
.mobileMenuLinks a:first-child{border-top:none;}
.mobileCta{
  margin-top:auto;
  width:fit-content;
  max-width:85%;
  min-width:0;
  align-self:center;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  text-align:center;
  padding:10px 20px;
  font-size:14px;
}
@media (max-width:420px){
  .mobileCta{
  margin-top:auto;
  width:fit-content;
  max-width:85%;
  min-width:0;
  align-self:center;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  text-align:center;
  padding:10px 20px;
  font-size:14px;
}
}

/* Header: on mobile show only burger (right) */
@media (max-width:820px){
  nav#desktopNav{display:none !important;}
  .navRight .iconBtn{display:none !important;}
  .navRight .btn.primary{display:none !important;}
  .navRight{margin-left:auto; justify-content:flex-end;}
  .menuBtn{display:inline-flex;}
  .menuBtn{
    width:44px;height:44px;
    border-radius:999px;
    padding:0;
  }
  .hamburger{font-size:22px; line-height:1;}
}

/* Section headers: stack on mobile so titles don't break because of subtext */
@media (max-width:820px){
  .sectionHead{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .sectionHead p{max-width:100%;}
}

/* Gallery mobile: remove reserved height from desktop flex-basis */
@media (max-width:980px){
  .galleryMedia{flex:0 0 auto !important; width:100%;}
}

/* Elfsight: hide any overlay icons/badges inside teaser items (fallback) */
.galleryTeaser .eapps-instagram-feed-posts-item [class*="icon"],
.galleryTeaser .eapps-instagram-feed-posts-item [class*="Icon"],
.galleryTeaser .eapps-instagram-feed-posts-item svg{
  display:none !important;
}


.mobileMenu .mobileCta{display:inline-flex !important;}

@media (max-width:820px){.navRight .iconBtn{display:inline-flex !important;} .navRight .btn.primary{display:none !important;} }

@media (max-width:420px){.iconBtn{width:40px;height:40px;} .btn.menuBtn{width:40px;height:40px;}}

/* --- Mobile menu visibility --- */
.menuBtn{display:none;}
@media (max-width:980px){
  .menuBtn{display:inline-flex;}
}