@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&display=swap');
:root{
      --bgTop:#f7fbff;
      --bgMid:#eaf3fa;
      --bgBot:#d9eaf5;

      --nav:#3b6d93;
      --navHover:#2f638d;
      --underline:#7fb0cc;

      --blue:#3b86b4;
      --blueLight:#bfe4ff;
      --card:#ffffff;
      --text:#163246;
      --muted:#4a6c84;

      --shadow: 0 12px 28px rgba(10, 35, 55, .10);
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      background:#fff;
      color: var(--text);
    }

    /* ---------------- HEADER ---------------- */
    header

    .wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 14px 18px;
      min-height: 70px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 20px;
    }

    

    .logo-svg{
      height: 46px;
      width: auto;
      display:block;
    }

    nav.main-nav{
      display:flex;
      align-items:center;
      gap: 26px;
      flex-wrap: wrap;
      justify-content:flex-end;
    }

    nav.main-nav a{
      text-decoration:none;
      color: var(--nav);
      font-size: 16px;
      font-weight: 600;
      padding: 6px 2px 10px;
      position: relative;
      opacity: .88;
    }

    nav.main-nav a:hover{
      color: var(--navHover);
      opacity: 1;
    }

    nav.main-nav a.active{
      opacity: 1;
    }

    nav.main-nav a.active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:2px;
      height:3px;
      background: var(--underline);
      border-radius: 2px;
    }

    /* ---------------- HERO (nur Bild) ---------------- */
    .hero{
      width: 100%;
      height: clamp(320px, 52vh, 560px);
      overflow: hidden;
      background: #eaf3fa;
      border-bottom: 1px solid rgba(40, 90, 120, .12);
    }

    .hero img{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center 38%;
    }

    /* ---------------- SECTION (Base) ---------------- */
    .section{
      background: linear-gradient(to bottom, #ffffff 0%, #f7fbff 100%);
      padding: 44px 18px 54px;
    }

    .section.alt{
      background: linear-gradient(to bottom, #f7fbff 0%, #ffffff 100%);
    }

    .container{
      max-width: 1100px;
      margin: 0 auto;
    }

    .section-title{
      margin: 0 0 18px;
      font-size: 26px;
      letter-spacing: .2px;
      color: #123247;
      text-align: center;
    }

    /* ---------------- Familienmitglieder ---------------- */
    .members-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .member-card{
      background: var(--card);
      border: 1px solid rgba(40, 90, 120, .10);
      border-radius: 18px;
      padding: 18px 16px 16px;
      box-shadow: 0 10px 24px rgba(10, 35, 55, .08);
      text-align: center;
    }

    .avatar{
      width: 112px;
      height: 112px;
      margin: 2px auto 12px;
      border-radius: 999px;
      border: 6px solid var(--blueLight);
      overflow: hidden;
      background: #eaf3fa;
      box-shadow: 0 8px 16px rgba(10, 35, 55, .10);
    }

    .avatar img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display:block;
    }

    .member-name{
      margin: 0 0 6px;
      font-size: 18px;
      font-weight: 800;
      color: #123247;
    }

    .member-text{
      margin: 0 0 12px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--muted2);
      min-height: 40px;
    }

    .icons{
      display:flex;
      justify-content:center;
      gap: 10px;
      margin-top: 6px;
    }

    .icon-btn{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(40, 90, 120, .14);
      background: #ffffff;
      box-shadow: 0 8px 14px rgba(10, 35, 55, .08);
      transition: transform .12s ease, box-shadow .12s ease;
      text-decoration:none;
    }

    .icon-btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 18px rgba(10, 35, 55, .12);
    }

    .icon{
      width: 18px;
      height: 18px;
      fill: var(--blue);
    }

    /* ---------------- Galerie Slider (4 sichtbar auf Desktop) ---------------- */
    .gallery-shell{
      position: relative;
      margin-top: 14px;
      border-radius: 20px;
    }

    .gallery-viewport{
      overflow: hidden;
      border-radius: 20px;
    }

    .gallery-track{
      display: flex;
      gap: 14px;
      padding: 6px;
      scroll-behavior: smooth;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .gallery-track::-webkit-scrollbar{ display:none; }

    .gallery-item{
      flex: 0 0 calc((100% - 14px * 3) / 4);
      aspect-ratio: 4 / 3;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(40, 90, 120, .12);
      box-shadow: var(--shadow);
      background: #eaf3fa;
      cursor: pointer;
      position: relative;
      transform: translateZ(0);
    }

    .gallery-item img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      transition: transform .35s ease, filter .35s ease;
      filter: saturate(1.05) contrast(1.03);
    }

    .gallery-item:hover img{
      transform: scale(1.05);
      filter: saturate(1.12) contrast(1.08);
    }

    .gallery-arrow{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(40, 90, 120, .16);
      background: rgba(255,255,255,.92);
      box-shadow: 0 12px 22px rgba(10,35,55,.14);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor: pointer;
      z-index: 2;
      user-select:none;
    }

    .gallery-arrow:hover{ transform: translateY(-50%) scale(1.02); }
    .gallery-arrow.left{ left: -10px; }
    .gallery-arrow.right{ right: -10px; }

    .gallery-arrow svg{
      width: 18px;
      height: 18px;
      fill: var(--blue);
    }

    
    /* gallery-arrow-svg-fix */
    .gallery-arrow{ color: var(--blue); }
    .gallery-arrow svg{ width: 18px; height: 18px; fill: none; }
    .gallery-arrow svg path{ stroke: currentColor; }
/* ---------------- Lightbox (Gallery) ---------------- */
    .lightbox{
      
      inset: 0;
      background: rgba(8, 18, 28, .72);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 80;
    }

    .lightbox.open{ display:flex; }

    .lightbox-inner{
      width: min(1100px, 100%);
      max-height: 88vh;
      position: relative;
    }

    .lightbox-img{
      width: 100%;
      height: auto;
      max-height: 88vh;
      display:block;
      border-radius: 18px;
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      object-fit: contain;
      background: rgba(255,255,255,.06);
    }

    .lightbox-close{
      position: absolute;
      top: -12px;
      right: -12px;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.92);
      box-shadow: 0 12px 24px rgba(0,0,0,.28);
      cursor: pointer;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .lightbox-close svg{ width: 18px; height: 18px; fill: #123247; }

    /* ---------------- Urlaubstimeline ---------------- */
    .timeline{
      position: relative;
      margin-top: 10px;
      padding: 18px 0 0;
    }

    .timeline::before{
      content:"";
      position:absolute;
      top: 10px;
      bottom: 10px;
      left: 50%;
      width: 4px;
      transform: translateX(-50%);
      background: linear-gradient(to bottom, rgba(127,176,204,.25), rgba(59,134,180,.55), rgba(127,176,204,.25));
      border-radius: 999px;
    }

    .t-item{
      position: relative;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: center;
      margin: 18px 0;
    }

    .t-item:nth-child(even) .t-card{ grid-column: 2; }
    .t-item:nth-child(even) .t-spacer{ grid-column: 1; }
    .t-spacer{ grid-column: 2; }

    .t-dot{
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: #ffd400;
      box-shadow: 0 0 0 6px rgba(255, 212, 0, .18), 0 10px 20px rgba(10,35,55,.12);
      border: 2px solid rgba(255,255,255,.9);
      z-index: 2;
    }

    .t-card{
      background: var(--card);
      border: 1px solid rgba(40, 90, 120, .10);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 180px 1fr;
      min-height: 132px;
    }

    .t-photo{
      width: 100%;
      height: 100%;
      min-height: 132px;
      background: #eaf3fa;
    }

    .t-photo img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    .t-body{
      padding: 14px 14px 12px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap: 6px;
    }

    .t-year{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      font-weight: 900;
      color: #1f5f87;
      letter-spacing: .4px;
      font-size: 14px;
      text-transform: uppercase;
    }

    .t-place{
      font-size: 18px;
      font-weight: 900;
      margin: 0;
      color:#123247;
    }

    .t-sub{
      margin: 0;
      font-size: 14px;
      color: var(--muted2);
      line-height: 1.45;
    }

    /* ---------------- Hochzeitsvideo ---------------- */
    .video-wrap{
      margin-top: 14px;
      display:flex;
      justify-content:center;
    }

    .video-card{
      width: min(1100px, 100%);
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(40, 90, 120, .12);
      box-shadow: var(--shadow);
      background: #eaf3fa;
      position: relative;
    }

    .video-aspect{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
    }

    .video-thumb{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      cursor:pointer;
    }

    .video-play{
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%, -50%);
      width: 84px;
      height: 84px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.5);
      background: rgba(255,255,255,.88);
      box-shadow: 0 16px 36px rgba(0,0,0,.28);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }

    .video-play svg{ width: 30px; height: 30px; fill: #1f5f87; }

    .video-iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
      display:none;
    }

    .video-card.is-playing .video-thumb,
    .video-card.is-playing .video-play{ display:none; }

    .video-card.is-playing .video-iframe{ display:block; }

    /* Responsive */
    @media (max-width: 980px){
      .members-grid{ grid-template-columns: repeat(2, 1fr); }
      .gallery-item{ flex-basis: calc((100% - 14px * 1) / 2); }
      .gallery-arrow.left{ left: 6px; }
      .gallery-arrow.right{ right: 6px; }

      .timeline::before{ left: 16px; transform:none; }
      .t-item{
        grid-template-columns: 1fr;
        padding-left: 34px;
      }
      .t-item:nth-child(even) .t-card{ grid-column: 1; }
      .t-spacer{ display:none; }
      .t-dot{ left: 16px; }
    }

    @media (max-width: 640px){
      .wrap{ flex-direction:column; align-items:flex-start; }
      nav.main-nav{ gap: 16px; }
      .hero{ height: clamp(280px, 42vh, 420px); }
      .members-grid{ grid-template-columns: 1fr; }
      .gallery-item{ flex-basis: 85%; }

      .t-card{ grid-template-columns: 1fr; }
      .t-photo{ min-height: 160px; }
    }
  
    /* ---------------- Footer ---------------- */
    footer.site-footer{
      padding: 28px 0;
      border-top: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(to bottom, #0f2b3e 0%, #123247 55%, #0b2232 100%);
      color: rgba(255,255,255,.92);
    }

    .footer-wrap{
      width: min(1100px, 92%);
      margin: 0 auto;
    }

    /* Topbar */
    .footer-topbar{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 42px rgba(0,0,0,.20);
    }

    .footer-brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 0;
    }

    .footer-logo{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.08);
      flex: 0 0 auto;
    }
    .footer-logo-img{
      width: 24px;
      height: 24px;
      filter: brightness(0) invert(1);
    }

    .footer-title{
      font-weight: 900;
      letter-spacing: .2px;
      font-size: 18px;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .footer-subtitle{
      opacity: .78;
      font-size: 13.5px;
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .footer-mail{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,.92);
      text-decoration:none;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      flex: 0 0 auto;
    }
    .footer-mail:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.22);
    }
    .footer-mail i{ font-size: 14px; opacity: .95; }

    /* Content cards */
    .footer-content{
      display:grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 14px;
      margin-top: 14px;
    }

    .footer-card{
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      box-shadow: 0 18px 42px rgba(0,0,0,.16);
    }

    .footer-card-title{
      font-weight: 800;
      margin-bottom: 10px;
      letter-spacing: .2px;
      font-size: 14px;
      text-transform: uppercase;
      opacity: .92;
    }

    .footer-links{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
    }

    .footer-links a,
    .footer-legal-links a,
    .footer-bottom a{
      text-decoration:none;
      color: rgba(255,255,255,.84);
      padding: 8px 10px;
      border-radius: 12px;
      transition: background .15s ease, transform .15s ease, color .15s ease;
      border: 1px solid transparent;
    }

    .footer-links a:hover,
    .footer-legal-links a:hover,
    .footer-bottom a:hover{
      background: rgba(255,255,255,0.07);
      transform: translateY(-1px);
      color: rgba(255,255,255,1);
    }

    .footer-legal-links{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .footer-address{
      opacity: .70;
      font-size: 13px;
      line-height: 1.35;
    }

    /* Bottom */
    .footer-bottom{
      margin-top: 14px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 6px 2px;
      opacity: .82;
      font-size: 13px;
    }

    .footer-top{
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.04);
      border-radius: 999px;
      padding: 8px 10px;
    }

    @media (max-width: 820px){
      .footer-topbar{
        flex-direction: column;
        align-items: stretch;
      }
      .footer-mail{
        width: 100%;
        justify-content: center;
      }
      .footer-content{
        grid-template-columns: 1fr;
      }
      .footer-links{
        grid-template-columns: 1fr;
      }
      .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
      }
    }
    }

  
    /* Center logo overlapping hero */
    
    
    
    /* pull logo slightly into hero */
    .hero{ position: relative; }
    @media (min-width: 900px){
      
      
    }
    @media (max-width: 520px){
      
      
    }

    /* Video lightbox */
    .video-preview-btn{ all: unset; cursor:pointer; display:block; max-width: 900px; margin: 0 auto; position:relative; }
    #videoModal{
       inset: 0;
      display: none;
      align-items: center; justify-content: center;
      background: rgba(0,0,0,.86);
      z-index: 10050;
      padding: 24px;
    }
    #videoModal .dialog{
      width: min(980px, 100%);
      position: relative;
    }
    #videoModal .close{
      position:absolute; right:0; top:-46px;
      width:40px; height:40px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.08);
      color: #fff;
      font-size: 18px;
      cursor:pointer;
    }
    #videoModal .frame-wrap{
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.12);
      background: #000;
    }
    #videoModal iframe{
      position:absolute; inset:0;
      width:100%; height:100%;
      border:0;
    }

  





/* ===== FIXED TOP LOGO (does NOT scroll) ===== */
@media (max-width: 640px){
  }




@media (max-width: 640px){
  
  
  nav.main-nav{ margin-left: 0; }
}



@media (max-width: 600px){
  
}


/* ===== RIGHT ALIGNED MENU ===== */
.main-nav{
  margin-left: auto !important;
  display: flex;
  justify-content: flex-end;
}


/* ===== HEADER GRADIENT RESTORE ===== */





/* ===== MENU RIGHT ===== */
.main-nav{
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}


/* ===== MENU ICON STYLE ===== */
.main-nav i{
  margin-right: 8px;
}





body{ margin:0; }
}





}


}


.top-logo-wrapper img{ height: 220px; }
}

/* ===== MOBILE MENU FIX (no wrap) ===== */
@media (max-width: 640px){
  nav.main-nav{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-bottom: 6px;
    max-width: 100%;
  }
  nav.main-nav a{
    font-size: 14px;
    padding: 6px 2px 8px;
  }
  nav.main-nav::-webkit-scrollbar{ display:none; }
}








}





/* ===== HERO CENTER FOCUS ===== */
.hero{
  padding: 0 !important;
  margin: 0 !important;
}

.hero .hero-img{
  width: 100% !important;
  height: 75vh !important;
  max-height: 850px !important;
  object-fit: cover !important;
  object-position: center center !important; /* Fokus Mitte */
  display: block !important;
}

@media (max-width: 768px){
  .hero .hero-img{
    height: 55vh !important;
    object-position: center center !important;
  }
}


/* ===== HERO LOGO OVERLAY ===== */
.hero{ position: relative; }

.hero-logo{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px) scale(.96);
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1), 
              transform 1.6s cubic-bezier(.22,.61,.36,1);
  transition-delay: .4s;
}

.hero-logo img{
  height: 420px;
  width: auto;
  display: block;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.35));
}
@media (max-width: 768px){
  .hero-logo img{ height: 240px; }
}


    /* ---------------- TIMELINE ---------------- */
    .timeline-wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .timeline{
      position: relative;
      margin-top: 40px;
      padding: 10px 0 10px;
    }

    .timeline::before{
      content:"";
      position:absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(127,176,204,.15), rgba(59,134,180,.45), rgba(127,176,204,.15));
      border-radius: 4px;
    }

    .timeline-entry{
      position: relative;
      display: flex;
      width: 100%;
      padding: 18px 0;
    }

    .timeline-entry:nth-child(odd){
      justify-content: flex-start;
      padding-right: 52%;
    }

    .timeline-entry:nth-child(even){
      justify-content: flex-end;
      padding-left: 52%;
    }

    .timeline-dot{
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--blueLight);
      box-shadow: 0 6px 18px rgba(10, 35, 55, .18);
      border: 3px solid rgba(59,134,180,.65);
    }

    .timeline-card{
      width: min(520px, 100%);
      background: var(--card);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: grid;
      grid-template-columns: 170px 1fr;
      min-height: 120px;
    }

    .timeline-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }

    .timeline-content{
      padding: 16px 18px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }

    .timeline-year{
      font-weight: 800;
      letter-spacing: .04em;
      color: var(--blue);
      font-size: 13px;
      text-transform: uppercase;
    }

    .timeline-place{
      font-size: 18px;
      font-weight: 800;
      margin: 0;
    }

    .timeline-sub{
      margin: 0;
      color: var(--muted2);
      line-height: 1.5;
      font-size: 14px;
    }

    .timeline-hint{
      margin-top: 10px;
      color: var(--muted2);
      font-size: 14px;
      opacity: .9;
    }

    @media (max-width: 860px){
      .timeline::before{ left: 18px; transform:none; }
      .timeline-entry{ padding: 16px 0 16px 0; }
      .timeline-entry:nth-child(odd),
      .timeline-entry:nth-child(even){
        justify-content: flex-start;
        padding: 0 0 0 44px;
      }
      .timeline-dot{ left: 18px; }
      .timeline-card{ grid-template-columns: 140px 1fr; }
    }

    @media (max-width: 520px){
      .timeline-card{ grid-template-columns: 1fr; }
      .timeline-card img{ height: 180px; }
    }

  
    .section-title{
      font-family: Georgia, "Times New Roman", serif;
      font-size: 32px;
      margin-bottom: 36px;
      position: relative;
      display: inline-block;
      padding-bottom: 10px;
    }
    .section-title::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width: 70%;
      height: 4px;
      background: linear-gradient(90deg, rgba(59,134,180,.85), rgba(127,176,204,.25));
      border-radius: 4px;
    }


    /* --- Section title centering override --- */
    .section-title{
      display:block !important;
      text-align:center;
      margin-left:auto;
      margin-right:auto;
    }
    .section-title::after{
      left:50% !important;
      transform: translateX(-50%);
      width: 180px !important;
    }


    /* ---------------- MOBILE NAV ---------------- */
    
    .wrap{ gap: 14px; }
    .nav-toggle{
      display:none;
      width: 46px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 22px rgba(10,35,55,.08);
      align-items:center;
      justify-content:center;
      gap: 5px;
      padding: 10px 12px;
      cursor:pointer;
    }
    .nav-toggle span{
      display:block;
      width: 20px;
      height: 2px;
      background: rgba(22,50,70,.75);
      border-radius: 999px;
      transition: transform .18s ease, opacity .18s ease;
    }

    @media (max-width: 860px){
      .nav-toggle{ display:flex; }
      nav.main-
      nav.main-nav a{
        padding: 10px 12px;
        border-radius: 12px;
      }
      nav.main-nav a.active::after{ display:none; }
      .site-header.nav-open nav.main-nav{ display:flex; }
      .site-header.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
      .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
      .site-header.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
    }

    /* ---------------- MOBILE SPACING ---------------- */
    @media (max-width: 520px){
      .section{ padding: 44px 16px; }
      .member-card{ padding: 20px; border-radius: 16px; }
      .avatar img{ width: 124px; height: 124px; }
      .hero{ height: 46vh; min-height: 280px; }
      .footer-grid{ gap: 22px; }
    }


    /* ---------------- SECTION SEPARATORS ---------------- */
    body{
      background: linear-gradient(180deg, rgba(247,251,255,1) 0%, rgba(234,243,250,1) 45%, rgba(255,255,255,1) 100%);
    }

    .section{
      position: relative;
    }

    /* subtle divider between sections */
    .section + .section{
      border-top: 1px solid rgba(40, 90, 120, .10);
    }

    /* decorative gradient bar centered on divider */
    .section + .section::before{
      content:"";
      position:absolute;
      top:-3px;
      left:50%;
      transform: translateX(-50%);
      width: 220px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(127,176,204,.10), rgba(59,134,180,.55), rgba(127,176,204,.10));
      box-shadow: 0 10px 22px rgba(10,35,55,.08);
    }

    /* a bit more breathing room around separators */
    .section{
      padding-top: 64px;
      padding-bottom: 64px;
    }

    @media (max-width: 520px){
      .section{
        padding-top: 52px;
        padding-bottom: 52px;
      }
      .section + .section::before{
        width: 170px;
      }
    }


    /* ---------------- SOCIAL ICON BUTTONS ---------------- */
    .member-card .social-links{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap;}

    .member-card a.social-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin: 10px 6px 0;
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      text-decoration:none;
      background: linear-gradient(135deg, rgba(59,134,180,.9), rgba(127,176,204,.85));
      color:#fff;
      box-shadow: 0 10px 22px rgba(10,35,55,.15);
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .member-card a.social-icon:hover{
      transform: translateY(-3px);
      box-shadow: 0 16px 30px rgba(10,35,55,.22);
      opacity:.95;
    }

    .member-card a.social-icon:active{
      transform: translateY(0);
      box-shadow: 0 6px 14px rgba(10,35,55,.18);
    }


    /* ---------------- MODERN TIMELINE UPGRADE ---------------- */

    .timeline::before{
      background: linear-gradient(180deg, rgba(59,134,180,.15), rgba(59,134,180,.65), rgba(59,134,180,.15));
      width: 3px;
      box-shadow: 0 0 18px rgba(59,134,180,.35);
    }

    .timeline-card{
      backdrop-filter: blur(12px);
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 22px;
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .timeline-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 25px 50px rgba(10,35,55,.25);
    }

    .timeline-card img{
      transition: transform .6s ease;
    }

    .timeline-card:hover img{
      transform: scale(1.08);
    }

    .timeline-year{
      display:inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9));
      color:#fff;
      font-size:12px;
      letter-spacing:.06em;
    }

    .timeline-dot{
      background:#fff;
      border: 4px solid rgba(59,134,180,.75);
      box-shadow: 0 0 0 6px rgba(59,134,180,.15);
    }

    /* Scroll Animation */
    .timeline-entry{
      opacity:0;
      transform: translateY(40px);
      transition: opacity .8s ease, transform .8s ease;
    }

    .timeline-entry.visible{
      opacity:1;
      transform: translateY(0);
    }


    /* ---------------- PREMIUM POLISH + DARK MODE ---------------- */
    :root{
      --bg: #ffffff;
      --bg2: #f6fbff;
      --card2: rgba(255,255,255,.78);
      --text2: #163246;
      --muted2:#4a6c84;
      --line: rgba(40, 90, 120, .10);
    }

    body{
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
      color: var(--text2);
      background: radial-gradient(1200px 700px at 50% -200px, rgba(127,176,204,.35), transparent 60%),
                  linear-gradient(180deg, var(--bg2) 0%, var(--bg) 55%, #ffffff 100%);
    }

    /* unify card backgrounds */
    .member-card, .timeline-card{
      background: var(--card2);
    }

    /* subtle border lines between sections (works with your separators) */
    .section + .section{
      border-top: 1px solid var(--line);
    }

    /* Theme toggle */
    .theme-toggle{
      width: 46px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 22px rgba(10,35,55,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      gap: 6px;
    }
    .theme-toggle .moon{ display:none; }
    body.dark .theme-toggle{ background: rgba(20,25,35,.45); border-color: rgba(255,255,255,.12); }
    body.dark .theme-toggle .sun{ display:none; }
    body.dark .theme-toggle .moon{ display:inline; }

    /* Dark theme overrides */
    body.dark{
      --bg: #0b1020;
      --bg2:#0a0f1e;
      --card2: rgba(20, 25, 35, .62);
      --text2: rgba(255,255,255,.92);
      --muted2: rgba(255,255,255,.72);
      --line: rgba(255,255,255,.10);
    }
    body.dark nav.main-nav a{ color: rgba(255,255,255,.85); }
    body.dark nav.main-nav a:hover{ color: rgba(255,255,255,1); }
    body.dark 
    body.dark .timeline-card{ border: 1px solid rgba(255,255,255,.10); }
    body.dark .member-text, body.dark .timeline-sub, body.dark .timeline-hint{ color: var(--muted2); }
    body.dark .nav-toggle{ background: rgba(20,25,35,.45); border-color: rgba(255,255,255,.12); }
    body.dark .nav-toggle span{ background: rgba(255,255,255,.75); }

    /* Improve section title underline in dark */
    body.dark .section-title::after{
      background: linear-gradient(90deg, rgba(127,176,204,.75), rgba(127,176,204,.12));
    }

    /* Parallax: ensure images clip nicely */
    .timeline-card{ overflow:hidden; }
    .timeline-card img{ will-change: transform; }


    /* ---------------- DARK MODE REFINEMENTS ---------------- */
    body.dark{
      background: radial-gradient(1000px 600px at 50% -120px, rgba(127,176,204,.22), transparent 65%),
                  radial-gradient(900px 520px at 15% 10%, rgba(59,134,180,.14), transparent 60%),
                  linear-gradient(180deg, #070a14 0%, #0b1020 45%, #070a14 100%);
    }

    body.dark .hero{
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: #0b1020;
    }

    body.dark .section.alt{
      background: rgba(255,255,255,.03);
    }

    body.dark .member-card,
    body.dark .timeline-card{
      background: rgba(20, 25, 35, .68);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 42px rgba(0,0,0,.55);
    }

    body.dark .member-card:hover,
    body.dark .timeline-card:hover{
      box-shadow: 0 26px 60px rgba(0,0,0,.65);
    }

    body.dark .section-title{
      color: rgba(255,255,255,.94);
      text-shadow: 0 10px 28px rgba(0,0,0,.45);
    }

    body.dark footer{
      background: rgba(10,15,30,.85) !important;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    body.dark footer a{ color: rgba(255,255,255,.88) !important; }
    body.dark footer a:hover{ color: rgba(255,255,255,1) !important; }

/* ---------------- RECHTLICHES (MODAL) ---------------- */
.footer-links{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap: wrap;
}
.footer-links a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-modal{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
}
.legal-modal.is-open{ display:block; }

.legal-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
}

.legal-modal__dialog{
  position: relative;
  width: min(860px, calc(100% - 28px));
  margin: 5vh auto;
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  max-height: 90vh;
  overflow: hidden;
  outline: none;
}

body.dark .legal-modal__dialog{
  background: rgba(20, 25, 35, .90);
  color: var(--text2);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 72px rgba(0,0,0,.55);
}

.legal-modal__close{
  position:absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  color: inherit;
  opacity: .85;
}
.legal-modal__close:hover{ opacity: 1; }

.legal-modal__body{
  padding: 22px 22px 20px;
  overflow: auto;
  max-height: 90vh;
}

.legal-modal__body h2{ margin: 4px 0 10px; }
.legal-modal__body h3{ margin: 18px 0 8px; }
.legal-modal__body p, .legal-modal__body li{ line-height: 1.55; }
.legal-modal__body a{ color: var(--blue); }
body.dark .legal-modal__body a{ color: rgba(191,228,255,.95); }

body.modal-open{ overflow: hidden; }

/* ---------------- COOKIE BANNER ---------------- */
.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10040;
  display: none;
  padding: 14px;
}
.cookie-banner.is-visible{ display:block; }

.cookie-banner__inner{
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255,255,255,.95);
  color: var(--text);
  border: 1px solid rgba(10, 35, 55, .12);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  padding: 14px 16px;
  display:flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

body.dark .cookie-banner__inner{
  background: rgba(20, 25, 35, .92);
  color: var(--text2);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

.cookie-banner__text p{
  margin: 6px 0 0;
  font-size: 14px;
}

.cookie-banner__text a{ color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
body.dark .cookie-banner__text a{ color: rgba(191,228,255,.95); }

.cookie-banner__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookie-btn{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(10, 35, 55, .18);
  cursor: pointer;
  font-weight: 700;
}
.cookie-btn--primary{
  background: var(--blue);
  color: white;
  border-color: rgba(0,0,0,.0);
}
.cookie-btn--secondary{
  background: rgba(255,255,255,.0);
  color: inherit;
}

body.dark .cookie-btn{ border-color: rgba(255,255,255,.14); }
body.dark .cookie-btn--secondary{ background: rgba(255,255,255,.06); }

@media (max-width: 700px){
  .cookie-banner__inner{ flex-direction: column; align-items: stretch; }
  .cookie-banner__actions{ justify-content: stretch; }
  .cookie-btn{ width: 100%; }
}

    body.dark .timeline::before{
      background: linear-gradient(180deg, rgba(127,176,204,.12), rgba(127,176,204,.55), rgba(127,176,204,.12));
      box-shadow: 0 0 24px rgba(127,176,204,.25);
    }

    /* Active timeline dot */
    .timeline-dot.active{
      background: #fff;
      border-color: rgba(127,176,204,.95);
      box-shadow: 0 0 0 7px rgba(127,176,204,.20), 0 0 28px rgba(127,176,204,.45);
    }

    body.dark .timeline-dot.active{
      background: rgba(255,255,255,.92);
      border-color: rgba(127,176,204,1);
      box-shadow: 0 0 0 8px rgba(127,176,204,.18), 0 0 34px rgba(127,176,204,.55);
    }


    /* ---------------- DARK MODE: SECTION BACKGROUNDS ---------------- */
    body.dark .section{
      background: rgba(255,255,255,.02);
    }
    body.dark .section.alt{
      background: rgba(255,255,255,.035);
    }
    /* keep separators subtle in dark */
    body.dark .section + .section{
      border-top: 1px solid rgba(255,255,255,.08);
    }


    /* ---------------- TYPOGRAPHY UPGRADE ---------------- */
    :root{
      --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
      --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", Times, serif;
    }

    body{
      font-family: var(--font-sans) !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-size: 16px;
      line-height: 1.6;
      letter-spacing: -0.01em;
    }

    .section-title{
      font-family: var(--font-display) !important;
      letter-spacing: -0.02em;
    }

    .member-name{
      font-family: var(--font-sans);
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    .member-text, .timeline-sub, .timeline-hint{
      font-weight: 500;
    }

    nav.main-nav a{
      font-family: var(--font-sans);
      letter-spacing: -0.01em;
    }

    .timeline-place{
      font-family: var(--font-sans);
      font-weight: 800;
      letter-spacing: -0.01em;
    }


    /* ---------------- LIGHTBOX ---------------- */
    .lightbox{
      
      inset: 0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.72);
      z-index: 9999;
      padding: 22px;
    }
    body.dark .lightbox{ background: rgba(0,0,0,.78); }

    .lightbox.open{ display:flex; }

    .lightbox-dialog{
      width: min(980px, 100%);
      max-height: min(86vh, 900px);
      background: rgba(255,255,255,.92);
      border-radius: 22px;
      overflow:hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(10px);
      display:grid;
      grid-template-rows: 1fr auto;
    }
    body.dark .lightbox-dialog{
      background: rgba(20,25,35,.75);
      border-color: rgba(255,255,255,.10);
    }

    .lightbox-media{
      position:relative;
      background: rgba(0,0,0,.10);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    body.dark .lightbox-media{ background: rgba(0,0,0,.18); }

    .lightbox-media img{
      width: 100%;
      height: 100%;
      max-height: 72vh;
      object-fit: contain;
      display:block;
    }

    .lightbox-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 12px 14px;
      color: var(--text2);
    }
    body.dark .lightbox-bar{ color: rgba(255,255,255,.92); }

    .lightbox-caption{
      font-weight: 600;
      color: var(--muted2);
      font-size: 14px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      max-width: 70ch;
    }
    body.dark .lightbox-caption{ color: rgba(255,255,255,.72); }

    .lb-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: 40px;
      width: 44px;
      border-radius: 14px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 22px rgba(10,35,55,.10);
      cursor:pointer;
      user-select:none;
    }
    body.dark .lb-btn{
      background: rgba(20,25,35,.45);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      box-shadow: 0 12px 28px rgba(0,0,0,.45);
    }

    .lb-btn:active{ transform: translateY(1px); }

    .lb-
    .lb-nav .lb-btn{ pointer-events:auto; opacity:.95; }

    @media (max-width: 520px){
      .lightbox{ padding: 14px; }
      .lightbox-caption{ max-width: 40ch; }
    }


    /* Lightbox thumbnail strip */
    .lb-thumbs{
      display:flex;
      align-items:center;
      gap: 8px;
      margin-left: auto;
      margin-right: 10px;
    }
    .lb-thumb{
      width: 42px;
      height: 32px;
      border-radius: 10px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.25);
      opacity:.9;
      cursor:pointer;
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
      flex: 0 0 auto;
    }
    body.dark .lb-thumb{ border-color: rgba(255,255,255,.12); }
    .lb-thumb img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      transform: scale(1.02);
    }
    .lb-thumb.active{ outline: 2px solid rgba(127,176,204,.85); opacity:1; }


    /* ---------------- OFFCANVAS MOBILE NAV ---------------- */
    .nav-overlay{
      
      inset: 0;
      background: rgba(0,0,0,.42);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      z-index: 60;
    }
    body.dark .nav-overlay{ background: rgba(0,0,0,.55); }

    @media (max-width: 860px){
      nav.main-
      .site-header.nav-open nav.main-nav{
        transform: translateX(0);
      }
      .site-header.nav-open + .nav-overlay{
        opacity: 1;
        pointer-events: auto;
      }
      nav.main-nav a{
        background: rgba(255,255,255,.6);
        border: 1px solid rgba(40, 90, 120, .10);
      }
      body.dark nav.main-nav a{
        background: rgba(20,25,35,.55);
        border-color: rgba(255,255,255,.10);
      }
    }


    /* ---------------- IMAGE POLISH ---------------- */
    .gallery-grid img,
    .timeline-card img{
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
    .gallery-grid img{
      filter: saturate(1.02) contrast(1.02);
    }
    body.dark .gallery-grid img,
    body.dark .timeline-card img{
      filter: saturate(1.05) contrast(1.05);
    }


    /* ---------------- TRAVEL MAP ---------------- */
    .travel-map-wrap{
      margin: 18px auto 46px;
      max-width: 1100px;
      border-radius: 24px;
      overflow:hidden;
      border: 1px solid rgba(40, 90, 120, .12);
      background: rgba(255,255,255,.70);
      box-shadow: 0 20px 46px rgba(10,35,55,.10);
    }
    body.dark .travel-map-wrap{
      background: rgba(20,25,35,.60);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 24px 60px rgba(0,0,0,.55);
    }
    .travel-map-head{
      padding: 16px 18px 10px;
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 14px;
    }
    .travel-map-title{
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .travel-map-sub{
      margin: 0;
      color: var(--muted2);
      font-weight: 600;
      font-size: 14px;
    }
    .travel-map{ height: 380px; width: 100%; }
    @media (max-width: 520px){
      .travel-map{ height: 320px; }
      .travel-map-head{ flex-direction: column; align-items:flex-start; }
    }


    /* ---------------- MAP POPUP ---------------- */
    .map-popup{
      width: 300px;
      border-radius: 16px;
      overflow: hidden;
    }
    .map-popup .mp-media{
      height: 240px;
      background: rgba(0,0,0,.08);
      overflow:hidden;
          display:flex;
      align-items:center;
      justify-content:center;
}

    .map-popup .mp-media img{
      width:100%;
      height:100%;
      object-fit: contain; object-position: center;
      display:block;
      }
    .map-popup .mp-body{
      padding: 12px 12px 14px;
    }
    .map-popup .mp-year{
      display:inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9));
      color:#fff;
      font-size:12px;
      letter-spacing:.06em;
      font-weight: 800;
      margin-bottom: 8px;
    }
    .map-popup .mp-title{
      font-weight: 900;
      font-size: 14px;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
      color: var(--text2);
    }
    .map-popup .mp-text{
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted2);
      font-weight: 600;
    }
    /* leaflet popup polish */
    .leaflet-popup-content{ margin: 10px 10px 12px; }
    .leaflet-popup-content-wrapper{
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 44px rgba(0,0,0,.22);
    }
    body.dark .leaflet-popup-content-wrapper{
      background: rgba(20,25,35,.78);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 22px 56px rgba(0,0,0,.55);
    }
    body.dark .leaflet-popup-tip{ background: rgba(20,25,35,.78); }


    /* ---------------- MAP (VARIANTE A / LEAFLET) ---------------- */
    .map-card{ border-radius: 28px; overflow:hidden; border: 1px solid rgba(255,255,255,.40);
      background: rgba(255,255,255,.65); backdrop-filter: blur(14px); box-shadow: 0 40px 90px rgba(10,35,55,.16); }
    body.dark .map-card{ background: rgba(20,25,35,.58); border-color: rgba(255,255,255,.10); box-shadow: 0 48px 110px rgba(0,0,0,.55); }

    .map-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      padding: 18px 18px 14px; border-bottom: 1px solid rgba(40, 90, 120, .10); }
    body.dark .map-top{ border-bottom-color: rgba(255,255,255,.10); }

    .map-stats{ display:flex; gap:12px; flex-wrap:wrap; }
    .map-stats .stat{ padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(40, 90, 120, .12);
      background: rgba(255,255,255,.70); box-shadow: 0 14px 30px rgba(10,35,55,.10); min-width: 92px; }
    body.dark .map-stats .stat{ background: rgba(20,25,35,.48); border-color: rgba(255,255,255,.12);
      box-shadow: 0 18px 40px rgba(0,0,0,.40); }
    .map-stats .num{ font-weight:900; font-size:18px; letter-spacing:-0.02em; }
    .map-stats .lbl{ font-size:12px; font-weight:700; color: var(--muted2); }

    .map-hint{ font-size:12.5px; font-weight:700; color: var(--muted2); white-space:nowrap; }
    @media (max-width:520px){ .map-top{ align-items:flex-start; flex-direction:column; } .map-hint{ white-space:normal; } }

    .map-frame-inner{ position:relative; height: 520px; }
    #travelMap{ height: 520px; width:100%; }
    @media (max-width:520px){ .map-frame-inner, #travelMap{ height: 420px; } }

    /* Modern markers */
    .pin{ position:relative; width:14px; height:14px; border-radius:50%; background: rgba(59,134,180,1);
      box-shadow: 0 0 0 0 rgba(59,134,180,.45); }
    .pin::after{ content:""; position:absolute; inset:-10px; border-radius:999px;
      background: radial-gradient(circle, rgba(59,134,180,.35), transparent 60%);
      animation: pinPulse 2.2s ease-out infinite; pointer-events:none; }
    body.dark .pin{ background: rgba(127,176,204,1); }
    body.dark .pin::after{ background: radial-gradient(circle, rgba(127,176,204,.32), transparent 60%); }
    @keyframes pinPulse{ 0%{ transform: scale(.65); opacity: 0; } 25%{ opacity:.85; } 100%{ transform: scale(1.15); opacity:0; } }
    .pin.active{ transform: scale(1.15); box-shadow: 0 0 0 8px rgba(59,134,180,.18), 0 0 28px rgba(59,134,180,.35); }
    body.dark .pin.active{ box-shadow: 0 0 0 9px rgba(127,176,204,.14), 0 0 34px rgba(127,176,204,.45); }

    /* Popup card */
    .map-popup{ width: 300px; border-radius: 16px; overflow: hidden; }
    .map-popup .mp-media{ height: 240px; background: rgba(0,0,0,.08); overflow:hidden;       display:flex;
      align-items:center;
      justify-content:center;
}

    .map-popup .mp-media img{ width:100%; height:100%; object-fit: contain; object-position: center; display:block; }
    .map-popup .mp-body{ padding: 12px 12px 14px; }
    .map-popup .mp-year{ display:inline-block; padding: 4px 10px; border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9)); color:#fff;
      font-size:12px; letter-spacing:.06em; font-weight:800; margin-bottom: 8px; }
    .map-popup .mp-title{ font-weight: 900; font-size: 14px; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--text2); }
    .map-popup .mp-text{ font-size: 13px; line-height: 1.45; color: var(--muted2); font-weight: 650; }

    .leaflet-popup-content{ margin: 10px 10px 12px; }
    .leaflet-popup-content-wrapper{ border-radius: 18px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0,0,0,.22); }
    body.dark .leaflet-popup-content-wrapper{ background: rgba(20,25,35,.78); border-color: rgba(255,255,255,.10); box-shadow: 0 22px 56px rgba(0,0,0,.55); }
    body.dark .leaflet-popup-tip{ background: rgba(20,25,35,.78); }


    /* ---------------- MAP PREMIUM 2.0 (HUD + FILTER + STATS) ---------------- */
    .map-frame-inner{ overflow:hidden; }

    .map-hud{
      position:absolute;
      inset: 14px 14px auto 14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      pointer-events:none;
      z-index: 450;
    }

    .map-filter{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      pointer-events:auto;
    }

    .pill{
      border: 1px solid rgba(40, 90, 120, .14);
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 26px rgba(10,35,55,.10);
      height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .02em;
      cursor:pointer;
      transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
      user-select:none;
    }
    .pill:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(10,35,55,.14); }
    .pill.active{
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.90));
      color:#fff;
      border-color: rgba(255,255,255,.25);
      box-shadow: 0 20px 44px rgba(59,134,180,.22);
    }
    body.dark .pill{
      background: rgba(20,25,35,.48);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 16px 34px rgba(0,0,0,.40);
      color: rgba(255,255,255,.86);
    }
    body.dark .pill.active{ color:#fff; }

    .map-stats-overlay{
      pointer-events:auto;
      min-width: 190px;
      border-radius: 20px;
      padding: 12px 12px 10px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(14px);
      box-shadow: 0 22px 60px rgba(10,35,55,.16);
    }
    body.dark .map-stats-overlay{
      background: rgba(20,25,35,.55);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 26px 80px rgba(0,0,0,.55);
    }
    .map-stats-overlay .statrow{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 14px;
      padding: 6px 2px;
      border-bottom: 1px dashed rgba(40, 90, 120, .14);
    }
    body.dark .map-stats-overlay .statrow{ border-bottom-color: rgba(255,255,255,.10); }
    .map-stats-overlay .statrow:last-child{ border-bottom:none; padding-bottom: 2px; }
    .map-stats-overlay .k{ font-size: 12px; font-weight: 800; color: var(--muted2); }
    .map-stats-overlay .v{ font-size: 14px; font-weight: 900; letter-spacing: -0.01em; color: var(--text2); white-space: nowrap; }
    body.dark .map-stats-overlay .v{ color: rgba(255,255,255,.92); }

    @media (max-width: 680px){
      .map-hud{ inset: 12px 12px auto 12px; flex-direction: column; align-items: stretch; }
      .map-stats-overlay{ width: 100%; }
    }

    .flag-pin{
      width: 30px; height: 30px; border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      font-size: 12px; font-weight: 900; letter-spacing: -0.02em;
      color: #fff;
      background: linear-gradient(135deg, rgba(59,134,180,.96), rgba(127,176,204,.90));
      border: 1px solid rgba(255,255,255,.28);
      box-shadow: 0 18px 40px rgba(10,35,55,.18);
      backdrop-filter: blur(8px);
    }
    body.dark .flag-pin{ box-shadow: 0 22px 54px rgba(0,0,0,.55); border-color: rgba(255,255,255,.16); }
    .flag-pin.active{
      transform: scale(1.08);
      box-shadow: 0 0 0 8px rgba(127,176,204,.18), 0 26px 70px rgba(10,35,55,.22);
    }
    body.dark .flag-pin.active{
      box-shadow: 0 0 0 9px rgba(127,176,204,.14), 0 30px 90px rgba(0,0,0,.60);
    }

    .leaflet-overlay-pane svg path.route-glow{ filter: drop-shadow(0 0 10px rgba(59,134,180,.22)); }
    body.dark .leaflet-overlay-pane svg path.route-glow{ filter: drop-shadow(0 0 14px rgba(127,176,204,.22)); }


    /* Timeline visibility safety */
    .timeline-item, .timeline-card, .timeline-entry{ opacity: 1 !important; transform: none !important; }


    /* Map HUD visibility safety */
    .map-frame-inner{ position: relative !important; }
    .map-hud{ z-index: 9999 !important; }


    /* Map HUD placement for travel-map-wrap */
    .travel-map-wrap{ position: relative; }
    #travelMap{ height: 520px; width: 100%; border-radius: 22px; overflow: hidden; }
    @media (max-width:520px){ #travelMap{ height: 420px; } }
    .map-hud{ position:absolute; top: 16px; left: 16px; right: 16px; display:flex; justify-content:space-between; gap:12px; pointer-events:none; }
    .map-filter, .map-stats-overlay{ pointer-events:auto; }
    .map-stats-overlay{ max-width: 220px; }
    @media (max-width:680px){ .map-hud{ flex-direction:column; } .map-stats-overlay{ max-width:none; } }
    
    /* Timeline visibility hard fix */
    .timeline{ display:block !important; }
    .timeline-entry{ opacity:1 !important; transform:none !important; display:flex !important; }


    /* Map HUD spacing to avoid header overlap */
    .map-hud{ top: 76px !important; }
    @media (max-width:680px){ .map-hud{ top: 92px !important; } }


    /* Flag marker pins */
    .flag-pin{
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 16px;
      line-height: 1;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(40, 90, 120, .14);
      box-shadow: 0 18px 40px rgba(10,35,55,.18);
      backdrop-filter: blur(10px);
      transform: translateZ(0);
      user-select:none;
    }
    body.dark .flag-pin{
      background: rgba(20,25,35,.55);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 22px 54px rgba(0,0,0,.55);
    }
    .flag-pin.active{
      transform: scale(1.08);
      box-shadow: 0 0 0 8px rgba(127,176,204,.18), 0 26px 70px rgba(10,35,55,.22);
    }
    body.dark .flag-pin.active{
      box-shadow: 0 0 0 9px rgba(127,176,204,.14), 0 30px 90px rgba(0,0,0,.60);
    }
    .flag-pin.home{
      width: 34px;
      height: 34px;
      font-size: 17px;
      background: linear-gradient(135deg, rgba(59,134,180,.18), rgba(127,176,204,.10));
      border-color: rgba(255,255,255,.22);
    }


    /* ---------------- GRAPHIC MAP (EUROPA) ---------------- */
    #travelMap.gmap{
      position: relative;
      width: 100%;
      height: 520px;
      border-radius: 22px;
      overflow: hidden;
      background-image: url('../img/map/world.svg');
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: 0 30px 90px rgba(10,35,55,.14);
    }
    body.dark #travelMap.gmap{
      background-image: none;
      background-size: cover;
      background-position: center;
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 40px 120px rgba(0,0,0,.55);
    }
    @media (max-width:520px){ #travelMap.gmap{ height: 420px; } }

    #gmapLines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
    .gmap-markers{ position:absolute; inset:0; }

    .gpin{
      position:absolute;
      transform: translate(-50%, -50%);
      width: 34px; height: 34px;
      border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      font-size: 17px; line-height: 1;
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(40, 90, 120, .14);
      box-shadow: 0 18px 40px rgba(10,35,55,.18);
      backdrop-filter: blur(10px);
      cursor:pointer; user-select:none;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .gpin:hover{ transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 24px 60px rgba(10,35,55,.22); }
    body.dark .gpin{
      background: rgba(20,25,35,.55);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 22px 54px rgba(0,0,0,.55);
      color: rgba(255,255,255,.95);
    }
    .gpin.active{
      box-shadow: 0 0 0 9px rgba(127,176,204,.18), 0 30px 90px rgba(10,35,55,.22);
    }
    body.dark .gpin.active{
      box-shadow: 0 0 0 10px rgba(127,176,204,.14), 0 34px 100px rgba(0,0,0,.60);
    }
    .gpin.home{
      width: 36px; height: 36px; font-size: 18px;
      background: linear-gradient(135deg, rgba(59,134,180,.18), rgba(127,176,204,.10));
      border-color: rgba(255,255,255,.22);
    }

    .gmap-popup{
      position:absolute;
      right: 16px; bottom: 16px;
      width: min(380px, calc(100% - 32px));
      border-radius: 22px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.92);
      box-shadow: 0 30px 80px rgba(0,0,0,.25);
      backdrop-filter: blur(12px);
      z-index: 5;
    }
    body.dark .gmap-popup{
      background: rgba(20,25,35,.78);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 34px 100px rgba(0,0,0,.55);
    }
    .gmap-popup .mp-close{
      position:absolute; top: 10px; right: 10px;
      height: 38px; width: 40px;
      border-radius: 14px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      cursor:pointer;
      box-shadow: 0 12px 26px rgba(10,35,55,.12);
      z-index: 2;
    }
    body.dark .gmap-popup .mp-close{
      background: rgba(20,25,35,.45);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      box-shadow: 0 14px 32px rgba(0,0,0,.45);
    }
    .gmap-popup .mp-img{ height: 160px; background: rgba(0,0,0,.08); }
    .gmap-popup .mp-img img{ width:100%; height:100%; object-fit: cover; display:block; }
    .gmap-popup .mp-content{ padding: 12px 14px 14px; }
    .gmap-popup .mp-badges{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .gmap-popup .mp-year{
      display:inline-block; padding: 4px 10px; border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9));
      color:#fff; font-size:12px; letter-spacing:.06em; font-weight: 800;
    }
    .gmap-popup .mp-place{
      display:inline-block; padding: 4px 10px; border-radius: 999px;
      border: 1px solid rgba(40, 90, 120, .14);
      background: rgba(255,255,255,.70);
      color: var(--text2); font-size:12px; font-weight: 800;
    }
    body.dark .gmap-popup .mp-place{
      border-color: rgba(255,255,255,.12);
      background: rgba(20,25,35,.45);
      color: rgba(255,255,255,.90);
    }
    .gmap-popup .mp-title{ font-weight: 900; letter-spacing: -0.01em; margin-bottom: 6px; }
    .gmap-popup .mp-text{ color: var(--muted2); font-weight: 650; font-size: 13px; line-height: 1.45; }


    /* ---------------- GRAPHIC MAP PREMIUM LOOK ---------------- */
    #travelMap.gmap::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 20% 10%, rgba(59,134,180,.18), transparent 42%),
        radial-gradient(circle at 80% 35%, rgba(127,176,204,.22), transparent 46%),
        radial-gradient(circle at 55% 75%, rgba(59,134,180,.10), transparent 50%);
      mix-blend-mode: multiply;
      opacity:.55;
      z-index:1;
    }
    body.dark #travelMap.gmap::before{
      mix-blend-mode: screen;
      opacity:.35;
    }

    /* subtle paper/noise texture */
    #travelMap.gmap::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
      opacity:.10;
      z-index:2;
    }
    body.dark #travelMap.gmap::after{ opacity:.14; }

    /* stars in dark mode */
    body.dark #travelMap.gmap .stars{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:2;
      opacity:.55;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.5px);
      background-size: 120px 120px, 180px 180px, 260px 260px;
      background-position: 10px 20px, 60px 80px, 110px 40px;
    }


    /* Ensure markers and lines are above map textures */
    #gmapLines{ z-index:3; }
    .gmap-markers{ z-index:4; }
    .gmap-popup{ z-index:6; }


    /* Mobile navigation toggle (fix) */
    @media (max-width: 900px){
      .main-
      body.dark .main-nav{
        background: rgba(20,25,35,.78);
        border-color: rgba(255,255,255,.10);
        box-shadow: 0 30px 90px rgba(0,0,0,.55);
      }
      .main-nav.open{ display:flex; }
      .site-header .wrap{ position: relative; }
    }


    /* ---------------- MAP MOBILE OPTIMIERUNG ---------------- */
    @media (max-width: 700px){
      #travelMap.gmap{ height: 520px; border-radius: 18px; }
      .map-hud{
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
        gap: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
      }
      .map-filter{ justify-content: flex-start; }
      .pill{ height: 34px; padding: 0 10px; font-size: 12px; }
      .map-stats-overlay{ min-width: 0; width: 100%; border-radius: 18px; padding: 10px 12px; }
      .map-stats-overlay .statrow{ padding: 6px 0; }

      .gpin{ width: 32px; height: 32px; font-size: 16px; }
      .gpin.home{ width: 34px; height: 34px; font-size: 17px; }

      .gmap-popup{
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        border-radius: 18px;
      }
      .gmap-popup .mp-img{ height: 140px; }
    }

    @media (max-width: 420px){
      #travelMap.gmap{ height: 560px; } /* extra room so pins + popup don't feel cramped */
      .pill{ font-size: 11px; }
      .gmap-popup .mp-img{ height: 130px; }
    }


    /* ---------------- MAP MOBILE PANEL ---------------- */
    .map-mobile-panel{ display:none; margin-top: 12px; }
    .map-mobile-panel .map-filter.mobile{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start; }
    .map-stats-mobile{
      margin-top: 12px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 10px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(255,255,255,.35);
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 50px rgba(10,35,55,.12);
    }
    body.dark .map-stats-mobile{
      background: rgba(20,25,35,.78);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 26px 80px rgba(0,0,0,.55);
    }
    .ms-item{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding: 4px 2px; }
    .ms-item span{ color: var(--muted2); font-weight: 750; font-size: 12px; }
    .ms-item strong{ font-weight: 900; }

    @media (max-width: 700px){
      /* Do not cover the map on mobile */
      .map-hud{ display:none !important; }
      .map-mobile-panel{ display:block; }
      #travelMap.gmap{ height: 520px; }
    }


    /* ---------------- MOBILE MENU OFF ---------------- */
    @media (max-width: 900px){
      .nav-toggle{ display:none !important; }
      #mainNav{ display:none !important; }
      body.nav-open #mainNav{ display:none !important; }
    }


    /* ---------- Gallery arrow disabled state ---------- */
    .gallery-arrow.disabled,
    .gallery-arrow:disabled{
      opacity:.45;
      cursor: default;
      filter: grayscale(.2);
    }

    /* ---------- Timeline reveal effect (restore) ---------- */
    .timeline-entry{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .timeline-entry.in-view{ opacity: 1; transform: translateY(0); }

    .timeline-dot{ transition: transform .25s ease, box-shadow .25s ease; }
    .timeline-entry.is-active .timeline-dot{
      transform: scale(1.25);
      box-shadow: 0 0 0 6px rgba(59,134,180,.18);
    }
    body.dark .timeline-entry.is-active .timeline-dot{
      box-shadow: 0 0 0 6px rgba(127,176,204,.18);
    }


    /* --- Mobile: pins a bit smaller, more room --- */
    @media (max-width: 700px){
      .gpin{ width: 30px; height: 30px; font-size: 15px; }
      .gpin.home{ width: 32px; height: 32px; font-size: 16px; }
    }


    /* --- Mobile: Familie als Slider --- */
    @media (max-width: 800px){
      .members-grid{
        display:flex !important;
        gap: 14px !important;
        overflow-x: auto !important;
        padding: 6px 2px 14px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .members-grid::-webkit-scrollbar{ height: 10px; }
      .members-grid::-webkit-scrollbar-thumb{
        background: rgba(127,176,204,.28);
        border-radius: 999px;
      }
      body.dark .members-grid::-webkit-scrollbar-thumb{ background: rgba(127,176,204,.18); }
      .member-card{
        min-width: 82%;
        scroll-snap-align: center;
      }
    }
    @media (max-width: 520px){
      .member-card{ min-width: 88%; }
    }


    /* ---------- Lightbox open state ---------- */
    body.no-scroll{ overflow:hidden; }
    .lightbox{ display:none; }
    .lightbox.open{ display:flex; align-items:center; justify-content:center; }
    .lightbox{ position:fixed; inset:0; background: rgba(10,20,30,.72); z-index: 5000; padding: 18px; }
    body.dark .lightbox{ background: rgba(0,0,0,.78); }
    .lightbox-inner{
      position:relative;
      width: min(980px, 100%);
      border-radius: 22px;
      overflow:hidden;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.20);
      backdrop-filter: blur(10px);
      box-shadow: 0 30px 120px rgba(0,0,0,.55);
    }
    .lightbox-img{ width:100%; height:auto; display:block; max-height: 82vh; object-fit: contain; background: rgba(0,0,0,.20); }
    .lightbox-close{
      position:absolute; top: 10px; right: 10px;
      width: 44px; height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(20,25,35,.55);
      color: #fff;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    .lightbox-close svg{ width: 22px; height: 22px; fill: currentColor; }


    /* ---------------- STATISTIKEN ---------------- */
    .stats-grid{
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 18px;
      margin-top: 18px;
    }

    .stat-card{
      background: var(--card);
      border: 1px solid rgba(40, 90, 120, .10);
      border-radius: 18px;
      padding: 18px 16px;
      box-shadow: 0 10px 24px rgba(10, 35, 55, .08);
      text-align: center;
    }

    .stat-number{
      font-family: 'Fraunces', serif;
      font-size: clamp(34px, 4.2vw, 54px);
      font-weight: 800;
      letter-spacing: .2px;
      color: #123247;
      line-height: 1.05;
      font-variant-numeric: tabular-nums;
    }

    .stat-label{
      margin-top: 8px;
      font-size: 14px;
      color: var(--muted);
      font-weight: 700;
    }

    .stat-hint{
      margin-top: 6px;
      font-size: 12px;
      color: rgba(22, 50, 70, .55);
    }
    .stat-hint .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 999px;
      border: 1px solid rgba(40, 90, 120, .12);
      background: rgba(255,255,255,.75);
    }

    @media (max-width: 980px){
      .stats-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px){
      .stats-grid{ grid-template-columns: 1fr; }
    }

  
/* familie-spacing-fix */
#familie .section-intro{
  margin-bottom: 28px;
}


/* ---- Premium Stats Upgrade ---- */
#stats .stat-number{
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 900;
}

#stats .stat-card{
  transition: transform .3s ease, box-shadow .3s ease;
}

#stats .stat-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

#stats .stat-accent{
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, #3b86b4, #7fb0cc);
  margin: 12px auto 0;
  border-radius: 999px;
  opacity: .9;
}


/* ================= Scroll Reveal ================= */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.reveal-item{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-item.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ================= Premium Stats v2 ================= */
#stats .stat-number{
  background: linear-gradient(90deg, #2f6f98, #3b86b4, #7fb0cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.dark #stats .stat-number{
  background: linear-gradient(90deg, #bfe4ff, #7fb0cc, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(191, 228, 255, .22);
}



body.dark #stats .stat-accent{
  opacity: 1;
}

/* Ensure nothing makes fixed behave like absolute */
    html, body{ transform:none !important; filter:none !important; perspective:none !important; }
  


@media (max-width: 640px){
  
  
  nav.main-nav{ margin-left: 0; }
}



@media (max-width: 600px){
  
}


/* ===== RIGHT ALIGNED MENU ===== */
.main-nav{
  margin-left: auto !important;
  display: flex;
  justify-content: flex-end;
}


/* ===== HEADER GRADIENT RESTORE ===== */





/* ===== MENU RIGHT ===== */
.main-nav{
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}


/* ===== MENU ICON STYLE ===== */
.main-nav i{
  margin-right: 8px;
}





body{ margin:0; }
}





}


}


.top-logo-wrapper img{ height: 220px; }
}

/* ===== MOBILE MENU FIX (no wrap) ===== */
@media (max-width: 640px){
  nav.main-nav{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-bottom: 6px;
    max-width: 100%;
  }
  nav.main-nav a{
    font-size: 14px;
    padding: 6px 2px 8px;
  }
  nav.main-nav::-webkit-scrollbar{ display:none; }
}








}





/* ===== HERO CENTER FOCUS ===== */
.hero{
  padding: 0 !important;
  margin: 0 !important;
}

.hero .hero-img{
  width: 100% !important;
  height: 75vh !important;
  max-height: 850px !important;
  object-fit: cover !important;
  object-position: center center !important; /* Fokus Mitte */
  display: block !important;
}

@media (max-width: 768px){
  .hero .hero-img{
    height: 55vh !important;
    object-position: center center !important;
  }
}


/* ===== HERO LOGO OVERLAY ===== */
.hero{ position: relative; }
.hero-logo{
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}
.hero-logo img{
  height: 420px;
  width: auto;
  display: block;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.35));
}
@media (max-width: 768px){
  .hero-logo img{ height: 240px; }
}


    /* ---------------- TIMELINE ---------------- */
    .timeline-wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .timeline{
      position: relative;
      margin-top: 40px;
      padding: 10px 0 10px;
    }

    .timeline::before{
      content:"";
      position:absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(127,176,204,.15), rgba(59,134,180,.45), rgba(127,176,204,.15));
      border-radius: 4px;
    }

    .timeline-entry{
      position: relative;
      display: flex;
      width: 100%;
      padding: 18px 0;
    }

    .timeline-entry:nth-child(odd){
      justify-content: flex-start;
      padding-right: 52%;
    }

    .timeline-entry:nth-child(even){
      justify-content: flex-end;
      padding-left: 52%;
    }

    .timeline-dot{
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--blueLight);
      box-shadow: 0 6px 18px rgba(10, 35, 55, .18);
      border: 3px solid rgba(59,134,180,.65);
    }

    .timeline-card{
      width: min(520px, 100%);
      background: var(--card);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: grid;
      grid-template-columns: 170px 1fr;
      min-height: 120px;
    }

    .timeline-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }

    .timeline-content{
      padding: 16px 18px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }

    .timeline-year{
      font-weight: 800;
      letter-spacing: .04em;
      color: var(--blue);
      font-size: 13px;
      text-transform: uppercase;
    }

    .timeline-place{
      font-size: 18px;
      font-weight: 800;
      margin: 0;
    }

    .timeline-sub{
      margin: 0;
      color: var(--muted2);
      line-height: 1.5;
      font-size: 14px;
    }

    .timeline-hint{
      margin-top: 10px;
      color: var(--muted2);
      font-size: 14px;
      opacity: .9;
    }

    @media (max-width: 860px){
      .timeline::before{ left: 18px; transform:none; }
      .timeline-entry{ padding: 16px 0 16px 0; }
      .timeline-entry:nth-child(odd),
      .timeline-entry:nth-child(even){
        justify-content: flex-start;
        padding: 0 0 0 44px;
      }
      .timeline-dot{ left: 18px; }
      .timeline-card{ grid-template-columns: 140px 1fr; }
    }

    @media (max-width: 520px){
      .timeline-card{ grid-template-columns: 1fr; }
      .timeline-card img{ height: 180px; }
    }

  
    .section-title{
      font-family: Georgia, "Times New Roman", serif;
      font-size: 32px;
      margin-bottom: 36px;
      position: relative;
      display: inline-block;
      padding-bottom: 10px;
    }
    .section-title::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width: 70%;
      height: 4px;
      background: linear-gradient(90deg, rgba(59,134,180,.85), rgba(127,176,204,.25));
      border-radius: 4px;
    }


    /* --- Section title centering override --- */
    .section-title{
      display:block !important;
      text-align:center;
      margin-left:auto;
      margin-right:auto;
    }
    .section-title::after{
      left:50% !important;
      transform: translateX(-50%);
      width: 180px !important;
    }


    /* ---------------- MOBILE NAV ---------------- */
    
    .wrap{ gap: 14px; }
    .nav-toggle{
      display:none;
      width: 46px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 22px rgba(10,35,55,.08);
      align-items:center;
      justify-content:center;
      gap: 5px;
      padding: 10px 12px;
      cursor:pointer;
    }
    .nav-toggle span{
      display:block;
      width: 20px;
      height: 2px;
      background: rgba(22,50,70,.75);
      border-radius: 999px;
      transition: transform .18s ease, opacity .18s ease;
    }

    @media (max-width: 860px){
      .nav-toggle{ display:flex; }
      nav.main-
      nav.main-nav a{
        padding: 10px 12px;
        border-radius: 12px;
      }
      nav.main-nav a.active::after{ display:none; }
      .site-header.nav-open nav.main-nav{ display:flex; }
      .site-header.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
      .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
      .site-header.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
    }

    /* ---------------- MOBILE SPACING ---------------- */
    @media (max-width: 520px){
      .section{ padding: 44px 16px; }
      .member-card{ padding: 20px; border-radius: 16px; }
      .avatar img{ width: 124px; height: 124px; }
      .hero{ height: 46vh; min-height: 280px; }
      .footer-grid{ gap: 22px; }
    }


    /* ---------------- SECTION SEPARATORS ---------------- */
    body{
      background: linear-gradient(180deg, rgba(247,251,255,1) 0%, rgba(234,243,250,1) 45%, rgba(255,255,255,1) 100%);
    }

    .section{
      position: relative;
    }

    /* subtle divider between sections */
    .section + .section{
      border-top: 1px solid rgba(40, 90, 120, .10);
    }

    /* decorative gradient bar centered on divider */
    .section + .section::before{
      content:"";
      position:absolute;
      top:-3px;
      left:50%;
      transform: translateX(-50%);
      width: 220px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(127,176,204,.10), rgba(59,134,180,.55), rgba(127,176,204,.10));
      box-shadow: 0 10px 22px rgba(10,35,55,.08);
    }

    /* a bit more breathing room around separators */
    .section{
      padding-top: 64px;
      padding-bottom: 64px;
    }

    @media (max-width: 520px){
      .section{
        padding-top: 52px;
        padding-bottom: 52px;
      }
      .section + .section::before{
        width: 170px;
      }
    }


    /* ---------------- SOCIAL ICON BUTTONS ---------------- */
    .member-card .social-links{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap;}

    .member-card a.social-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin: 10px 6px 0;
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      text-decoration:none;
      background: linear-gradient(135deg, rgba(59,134,180,.9), rgba(127,176,204,.85));
      color:#fff;
      box-shadow: 0 10px 22px rgba(10,35,55,.15);
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .member-card a.social-icon:hover{
      transform: translateY(-3px);
      box-shadow: 0 16px 30px rgba(10,35,55,.22);
      opacity:.95;
    }

    .member-card a.social-icon:active{
      transform: translateY(0);
      box-shadow: 0 6px 14px rgba(10,35,55,.18);
    }


    /* ---------------- MODERN TIMELINE UPGRADE ---------------- */

    .timeline::before{
      background: linear-gradient(180deg, rgba(59,134,180,.15), rgba(59,134,180,.65), rgba(59,134,180,.15));
      width: 3px;
      box-shadow: 0 0 18px rgba(59,134,180,.35);
    }

    .timeline-card{
      backdrop-filter: blur(12px);
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 22px;
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .timeline-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 25px 50px rgba(10,35,55,.25);
    }

    .timeline-card img{
      transition: transform .6s ease;
    }

    .timeline-card:hover img{
      transform: scale(1.08);
    }

    .timeline-year{
      display:inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9));
      color:#fff;
      font-size:12px;
      letter-spacing:.06em;
    }

    .timeline-dot{
      background:#fff;
      border: 4px solid rgba(59,134,180,.75);
      box-shadow: 0 0 0 6px rgba(59,134,180,.15);
    }

    /* Scroll Animation */
    .timeline-entry{
      opacity:0;
      transform: translateY(40px);
      transition: opacity .8s ease, transform .8s ease;
    }

    .timeline-entry.visible{
      opacity:1;
      transform: translateY(0);
    }


    /* ---------------- PREMIUM POLISH + DARK MODE ---------------- */
    :root{
      --bg: #ffffff;
      --bg2: #f6fbff;
      --card2: rgba(255,255,255,.78);
      --text2: #163246;
      --muted2:#4a6c84;
      --line: rgba(40, 90, 120, .10);
    }

    body{
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
      color: var(--text2);
      background: radial-gradient(1200px 700px at 50% -200px, rgba(127,176,204,.35), transparent 60%),
                  linear-gradient(180deg, var(--bg2) 0%, var(--bg) 55%, #ffffff 100%);
    }

    /* unify card backgrounds */
    .member-card, .timeline-card{
      background: var(--card2);
    }

    /* subtle border lines between sections (works with your separators) */
    .section + .section{
      border-top: 1px solid var(--line);
    }

    /* Theme toggle */
    .theme-toggle{
      width: 46px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 22px rgba(10,35,55,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      gap: 6px;
    }
    .theme-toggle .moon{ display:none; }
    body.dark .theme-toggle{ background: rgba(20,25,35,.45); border-color: rgba(255,255,255,.12); }
    body.dark .theme-toggle .sun{ display:none; }
    body.dark .theme-toggle .moon{ display:inline; }

    /* Dark theme overrides */
    body.dark{
      --bg: #0b1020;
      --bg2:#0a0f1e;
      --card2: rgba(20, 25, 35, .62);
      --text2: rgba(255,255,255,.92);
      --muted2: rgba(255,255,255,.72);
      --line: rgba(255,255,255,.10);
    }
    body.dark nav.main-nav a{ color: rgba(255,255,255,.85); }
    body.dark nav.main-nav a:hover{ color: rgba(255,255,255,1); }
    body.dark 
    body.dark .timeline-card{ border: 1px solid rgba(255,255,255,.10); }
    body.dark .member-text, body.dark .timeline-sub, body.dark .timeline-hint{ color: var(--muted2); }
    body.dark .nav-toggle{ background: rgba(20,25,35,.45); border-color: rgba(255,255,255,.12); }
    body.dark .nav-toggle span{ background: rgba(255,255,255,.75); }

    /* Improve section title underline in dark */
    body.dark .section-title::after{
      background: linear-gradient(90deg, rgba(127,176,204,.75), rgba(127,176,204,.12));
    }

    /* Parallax: ensure images clip nicely */
    .timeline-card{ overflow:hidden; }
    .timeline-card img{ will-change: transform; }


    /* ---------------- DARK MODE REFINEMENTS ---------------- */
    body.dark{
      background: radial-gradient(1000px 600px at 50% -120px, rgba(127,176,204,.22), transparent 65%),
                  radial-gradient(900px 520px at 15% 10%, rgba(59,134,180,.14), transparent 60%),
                  linear-gradient(180deg, #070a14 0%, #0b1020 45%, #070a14 100%);
    }

    body.dark .hero{
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: #0b1020;
    }

    body.dark .section.alt{
      background: rgba(255,255,255,.03);
    }

    body.dark .member-card,
    body.dark .timeline-card{
      background: rgba(20, 25, 35, .68);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 42px rgba(0,0,0,.55);
    }

    body.dark .member-card:hover,
    body.dark .timeline-card:hover{
      box-shadow: 0 26px 60px rgba(0,0,0,.65);
    }

    body.dark .section-title{
      color: rgba(255,255,255,.94);
      text-shadow: 0 10px 28px rgba(0,0,0,.45);
    }

    body.dark footer{
      background: rgba(10,15,30,.85) !important;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    body.dark footer a{ color: rgba(255,255,255,.88) !important; }
    body.dark footer a:hover{ color: rgba(255,255,255,1) !important; }

    body.dark .timeline::before{
      background: linear-gradient(180deg, rgba(127,176,204,.12), rgba(127,176,204,.55), rgba(127,176,204,.12));
      box-shadow: 0 0 24px rgba(127,176,204,.25);
    }

    /* Active timeline dot */
    .timeline-dot.active{
      background: #fff;
      border-color: rgba(127,176,204,.95);
      box-shadow: 0 0 0 7px rgba(127,176,204,.20), 0 0 28px rgba(127,176,204,.45);
    }

    body.dark .timeline-dot.active{
      background: rgba(255,255,255,.92);
      border-color: rgba(127,176,204,1);
      box-shadow: 0 0 0 8px rgba(127,176,204,.18), 0 0 34px rgba(127,176,204,.55);
    }


    /* ---------------- DARK MODE: SECTION BACKGROUNDS ---------------- */
    body.dark .section{
      background: rgba(255,255,255,.02);
    }
    body.dark .section.alt{
      background: rgba(255,255,255,.035);
    }
    /* keep separators subtle in dark */
    body.dark .section + .section{
      border-top: 1px solid rgba(255,255,255,.08);
    }


    /* ---------------- TYPOGRAPHY UPGRADE ---------------- */
    :root{
      --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
      --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", Times, serif;
    }

    body{
      font-family: var(--font-sans) !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-size: 16px;
      line-height: 1.6;
      letter-spacing: -0.01em;
    }

    .section-title{
      font-family: var(--font-display) !important;
      letter-spacing: -0.02em;
    }

    .member-name{
      font-family: var(--font-sans);
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    .member-text, .timeline-sub, .timeline-hint{
      font-weight: 500;
    }

    nav.main-nav a{
      font-family: var(--font-sans);
      letter-spacing: -0.01em;
    }

    .timeline-place{
      font-family: var(--font-sans);
      font-weight: 800;
      letter-spacing: -0.01em;
    }


    /* ---------------- LIGHTBOX ---------------- */
    .lightbox{
      
      inset: 0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.72);
      z-index: 9999;
      padding: 22px;
    }
    body.dark .lightbox{ background: rgba(0,0,0,.78); }

    .lightbox.open{ display:flex; }

    .lightbox-dialog{
      width: min(980px, 100%);
      max-height: min(86vh, 900px);
      background: rgba(255,255,255,.92);
      border-radius: 22px;
      overflow:hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(10px);
      display:grid;
      grid-template-rows: 1fr auto;
    }
    body.dark .lightbox-dialog{
      background: rgba(20,25,35,.75);
      border-color: rgba(255,255,255,.10);
    }

    .lightbox-media{
      position:relative;
      background: rgba(0,0,0,.10);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    body.dark .lightbox-media{ background: rgba(0,0,0,.18); }

    .lightbox-media img{
      width: 100%;
      height: 100%;
      max-height: 72vh;
      object-fit: contain;
      display:block;
    }

    .lightbox-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 12px 14px;
      color: var(--text2);
    }
    body.dark .lightbox-bar{ color: rgba(255,255,255,.92); }

    .lightbox-caption{
      font-weight: 600;
      color: var(--muted2);
      font-size: 14px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      max-width: 70ch;
    }
    body.dark .lightbox-caption{ color: rgba(255,255,255,.72); }

    .lb-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: 40px;
      width: 44px;
      border-radius: 14px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 22px rgba(10,35,55,.10);
      cursor:pointer;
      user-select:none;
    }
    body.dark .lb-btn{
      background: rgba(20,25,35,.45);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      box-shadow: 0 12px 28px rgba(0,0,0,.45);
    }

    .lb-btn:active{ transform: translateY(1px); }

    .lb-
    .lb-nav .lb-btn{ pointer-events:auto; opacity:.95; }

    @media (max-width: 520px){
      .lightbox{ padding: 14px; }
      .lightbox-caption{ max-width: 40ch; }
    }


    /* Lightbox thumbnail strip */
    .lb-thumbs{
      display:flex;
      align-items:center;
      gap: 8px;
      margin-left: auto;
      margin-right: 10px;
    }
    .lb-thumb{
      width: 42px;
      height: 32px;
      border-radius: 10px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.25);
      opacity:.9;
      cursor:pointer;
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
      flex: 0 0 auto;
    }
    body.dark .lb-thumb{ border-color: rgba(255,255,255,.12); }
    .lb-thumb img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      transform: scale(1.02);
    }
    .lb-thumb.active{ outline: 2px solid rgba(127,176,204,.85); opacity:1; }


    /* ---------------- OFFCANVAS MOBILE NAV ---------------- */
    .nav-overlay{
      
      inset: 0;
      background: rgba(0,0,0,.42);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      z-index: 60;
    }
    body.dark .nav-overlay{ background: rgba(0,0,0,.55); }

    @media (max-width: 860px){
      nav.main-
      .site-header.nav-open nav.main-nav{
        transform: translateX(0);
      }
      .site-header.nav-open + .nav-overlay{
        opacity: 1;
        pointer-events: auto;
      }
      nav.main-nav a{
        background: rgba(255,255,255,.6);
        border: 1px solid rgba(40, 90, 120, .10);
      }
      body.dark nav.main-nav a{
        background: rgba(20,25,35,.55);
        border-color: rgba(255,255,255,.10);
      }
    }


    /* ---------------- IMAGE POLISH ---------------- */
    .gallery-grid img,
    .timeline-card img{
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
    .gallery-grid img{
      filter: saturate(1.02) contrast(1.02);
    }
    body.dark .gallery-grid img,
    body.dark .timeline-card img{
      filter: saturate(1.05) contrast(1.05);
    }


    /* ---------------- TRAVEL MAP ---------------- */
    .travel-map-wrap{
      margin: 18px auto 46px;
      max-width: 1100px;
      border-radius: 24px;
      overflow:hidden;
      border: 1px solid rgba(40, 90, 120, .12);
      background: rgba(255,255,255,.70);
      box-shadow: 0 20px 46px rgba(10,35,55,.10);
    }
    body.dark .travel-map-wrap{
      background: rgba(20,25,35,.60);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 24px 60px rgba(0,0,0,.55);
    }
    .travel-map-head{
      padding: 16px 18px 10px;
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 14px;
    }
    .travel-map-title{
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .travel-map-sub{
      margin: 0;
      color: var(--muted2);
      font-weight: 600;
      font-size: 14px;
    }
    .travel-map{ height: 380px; width: 100%; }
    @media (max-width: 520px){
      .travel-map{ height: 320px; }
      .travel-map-head{ flex-direction: column; align-items:flex-start; }
    }


    /* ---------------- MAP POPUP ---------------- */
    .map-popup{
      width: 300px;
      border-radius: 16px;
      overflow: hidden;
    }
    .map-popup .mp-media{
      height: 240px;
      background: rgba(0,0,0,.08);
      overflow:hidden;
          display:flex;
      align-items:center;
      justify-content:center;
}

    .map-popup .mp-media img{
      width:100%;
      height:100%;
      object-fit: contain; object-position: center;
      display:block;
      }
    .map-popup .mp-body{
      padding: 12px 12px 14px;
    }
    .map-popup .mp-year{
      display:inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9));
      color:#fff;
      font-size:12px;
      letter-spacing:.06em;
      font-weight: 800;
      margin-bottom: 8px;
    }
    .map-popup .mp-title{
      font-weight: 900;
      font-size: 14px;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
      color: var(--text2);
    }
    .map-popup .mp-text{
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted2);
      font-weight: 600;
    }
    /* leaflet popup polish */
    .leaflet-popup-content{ margin: 10px 10px 12px; }
    .leaflet-popup-content-wrapper{
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 44px rgba(0,0,0,.22);
    }
    body.dark .leaflet-popup-content-wrapper{
      background: rgba(20,25,35,.78);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 22px 56px rgba(0,0,0,.55);
    }
    body.dark .leaflet-popup-tip{ background: rgba(20,25,35,.78); }


    /* ---------------- MAP (VARIANTE A / LEAFLET) ---------------- */
    .map-card{ border-radius: 28px; overflow:hidden; border: 1px solid rgba(255,255,255,.40);
      background: rgba(255,255,255,.65); backdrop-filter: blur(14px); box-shadow: 0 40px 90px rgba(10,35,55,.16); }
    body.dark .map-card{ background: rgba(20,25,35,.58); border-color: rgba(255,255,255,.10); box-shadow: 0 48px 110px rgba(0,0,0,.55); }

    .map-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      padding: 18px 18px 14px; border-bottom: 1px solid rgba(40, 90, 120, .10); }
    body.dark .map-top{ border-bottom-color: rgba(255,255,255,.10); }

    .map-stats{ display:flex; gap:12px; flex-wrap:wrap; }
    .map-stats .stat{ padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(40, 90, 120, .12);
      background: rgba(255,255,255,.70); box-shadow: 0 14px 30px rgba(10,35,55,.10); min-width: 92px; }
    body.dark .map-stats .stat{ background: rgba(20,25,35,.48); border-color: rgba(255,255,255,.12);
      box-shadow: 0 18px 40px rgba(0,0,0,.40); }
    .map-stats .num{ font-weight:900; font-size:18px; letter-spacing:-0.02em; }
    .map-stats .lbl{ font-size:12px; font-weight:700; color: var(--muted2); }

    .map-hint{ font-size:12.5px; font-weight:700; color: var(--muted2); white-space:nowrap; }
    @media (max-width:520px){ .map-top{ align-items:flex-start; flex-direction:column; } .map-hint{ white-space:normal; } }

    .map-frame-inner{ position:relative; height: 520px; }
    #travelMap{ height: 520px; width:100%; }
    @media (max-width:520px){ .map-frame-inner, #travelMap{ height: 420px; } }

    /* Modern markers */
    .pin{ position:relative; width:14px; height:14px; border-radius:50%; background: rgba(59,134,180,1);
      box-shadow: 0 0 0 0 rgba(59,134,180,.45); }
    .pin::after{ content:""; position:absolute; inset:-10px; border-radius:999px;
      background: radial-gradient(circle, rgba(59,134,180,.35), transparent 60%);
      animation: pinPulse 2.2s ease-out infinite; pointer-events:none; }
    body.dark .pin{ background: rgba(127,176,204,1); }
    body.dark .pin::after{ background: radial-gradient(circle, rgba(127,176,204,.32), transparent 60%); }
    @keyframes pinPulse{ 0%{ transform: scale(.65); opacity: 0; } 25%{ opacity:.85; } 100%{ transform: scale(1.15); opacity:0; } }
    .pin.active{ transform: scale(1.15); box-shadow: 0 0 0 8px rgba(59,134,180,.18), 0 0 28px rgba(59,134,180,.35); }
    body.dark .pin.active{ box-shadow: 0 0 0 9px rgba(127,176,204,.14), 0 0 34px rgba(127,176,204,.45); }

    /* Popup card */
    .map-popup{ width: 300px; border-radius: 16px; overflow: hidden; }
    .map-popup .mp-media{ height: 240px; background: rgba(0,0,0,.08); overflow:hidden;       display:flex;
      align-items:center;
      justify-content:center;
}

    .map-popup .mp-media img{ width:100%; height:100%; object-fit: contain; object-position: center; display:block; }
    .map-popup .mp-body{ padding: 12px 12px 14px; }
    .map-popup .mp-year{ display:inline-block; padding: 4px 10px; border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9)); color:#fff;
      font-size:12px; letter-spacing:.06em; font-weight:800; margin-bottom: 8px; }
    .map-popup .mp-title{ font-weight: 900; font-size: 14px; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--text2); }
    .map-popup .mp-text{ font-size: 13px; line-height: 1.45; color: var(--muted2); font-weight: 650; }

    .leaflet-popup-content{ margin: 10px 10px 12px; }
    .leaflet-popup-content-wrapper{ border-radius: 18px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0,0,0,.22); }
    body.dark .leaflet-popup-content-wrapper{ background: rgba(20,25,35,.78); border-color: rgba(255,255,255,.10); box-shadow: 0 22px 56px rgba(0,0,0,.55); }
    body.dark .leaflet-popup-tip{ background: rgba(20,25,35,.78); }


    /* ---------------- MAP PREMIUM 2.0 (HUD + FILTER + STATS) ---------------- */
    .map-frame-inner{ overflow:hidden; }

    .map-hud{
      position:absolute;
      inset: 14px 14px auto 14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      pointer-events:none;
      z-index: 450;
    }

    .map-filter{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      pointer-events:auto;
    }

    .pill{
      border: 1px solid rgba(40, 90, 120, .14);
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 26px rgba(10,35,55,.10);
      height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .02em;
      cursor:pointer;
      transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
      user-select:none;
    }
    .pill:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(10,35,55,.14); }
    .pill.active{
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.90));
      color:#fff;
      border-color: rgba(255,255,255,.25);
      box-shadow: 0 20px 44px rgba(59,134,180,.22);
    }
    body.dark .pill{
      background: rgba(20,25,35,.48);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 16px 34px rgba(0,0,0,.40);
      color: rgba(255,255,255,.86);
    }
    body.dark .pill.active{ color:#fff; }

    .map-stats-overlay{
      pointer-events:auto;
      min-width: 190px;
      border-radius: 20px;
      padding: 12px 12px 10px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(14px);
      box-shadow: 0 22px 60px rgba(10,35,55,.16);
    }
    body.dark .map-stats-overlay{
      background: rgba(20,25,35,.55);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 26px 80px rgba(0,0,0,.55);
    }
    .map-stats-overlay .statrow{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 14px;
      padding: 6px 2px;
      border-bottom: 1px dashed rgba(40, 90, 120, .14);
    }
    body.dark .map-stats-overlay .statrow{ border-bottom-color: rgba(255,255,255,.10); }
    .map-stats-overlay .statrow:last-child{ border-bottom:none; padding-bottom: 2px; }
    .map-stats-overlay .k{ font-size: 12px; font-weight: 800; color: var(--muted2); }
    .map-stats-overlay .v{ font-size: 14px; font-weight: 900; letter-spacing: -0.01em; color: var(--text2); white-space: nowrap; }
    body.dark .map-stats-overlay .v{ color: rgba(255,255,255,.92); }

    @media (max-width: 680px){
      .map-hud{ inset: 12px 12px auto 12px; flex-direction: column; align-items: stretch; }
      .map-stats-overlay{ width: 100%; }
    }

    .flag-pin{
      width: 30px; height: 30px; border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      font-size: 12px; font-weight: 900; letter-spacing: -0.02em;
      color: #fff;
      background: linear-gradient(135deg, rgba(59,134,180,.96), rgba(127,176,204,.90));
      border: 1px solid rgba(255,255,255,.28);
      box-shadow: 0 18px 40px rgba(10,35,55,.18);
      backdrop-filter: blur(8px);
    }
    body.dark .flag-pin{ box-shadow: 0 22px 54px rgba(0,0,0,.55); border-color: rgba(255,255,255,.16); }
    .flag-pin.active{
      transform: scale(1.08);
      box-shadow: 0 0 0 8px rgba(127,176,204,.18), 0 26px 70px rgba(10,35,55,.22);
    }
    body.dark .flag-pin.active{
      box-shadow: 0 0 0 9px rgba(127,176,204,.14), 0 30px 90px rgba(0,0,0,.60);
    }

    .leaflet-overlay-pane svg path.route-glow{ filter: drop-shadow(0 0 10px rgba(59,134,180,.22)); }
    body.dark .leaflet-overlay-pane svg path.route-glow{ filter: drop-shadow(0 0 14px rgba(127,176,204,.22)); }


    /* Timeline visibility safety */
    .timeline-item, .timeline-card, .timeline-entry{ opacity: 1 !important; transform: none !important; }


    /* Map HUD visibility safety */
    .map-frame-inner{ position: relative !important; }
    .map-hud{ z-index: 9999 !important; }


    /* Map HUD placement for travel-map-wrap */
    .travel-map-wrap{ position: relative; }
    #travelMap{ height: 520px; width: 100%; border-radius: 22px; overflow: hidden; }
    @media (max-width:520px){ #travelMap{ height: 420px; } }
    .map-hud{ position:absolute; top: 16px; left: 16px; right: 16px; display:flex; justify-content:space-between; gap:12px; pointer-events:none; }
    .map-filter, .map-stats-overlay{ pointer-events:auto; }
    .map-stats-overlay{ max-width: 220px; }
    @media (max-width:680px){ .map-hud{ flex-direction:column; } .map-stats-overlay{ max-width:none; } }
    
    /* Timeline visibility hard fix */
    .timeline{ display:block !important; }
    .timeline-entry{ opacity:1 !important; transform:none !important; display:flex !important; }


    /* Map HUD spacing to avoid header overlap */
    .map-hud{ top: 76px !important; }
    @media (max-width:680px){ .map-hud{ top: 92px !important; } }


    /* Flag marker pins */
    .flag-pin{
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 16px;
      line-height: 1;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(40, 90, 120, .14);
      box-shadow: 0 18px 40px rgba(10,35,55,.18);
      backdrop-filter: blur(10px);
      transform: translateZ(0);
      user-select:none;
    }
    body.dark .flag-pin{
      background: rgba(20,25,35,.55);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 22px 54px rgba(0,0,0,.55);
    }
    .flag-pin.active{
      transform: scale(1.08);
      box-shadow: 0 0 0 8px rgba(127,176,204,.18), 0 26px 70px rgba(10,35,55,.22);
    }
    body.dark .flag-pin.active{
      box-shadow: 0 0 0 9px rgba(127,176,204,.14), 0 30px 90px rgba(0,0,0,.60);
    }
    .flag-pin.home{
      width: 34px;
      height: 34px;
      font-size: 17px;
      background: linear-gradient(135deg, rgba(59,134,180,.18), rgba(127,176,204,.10));
      border-color: rgba(255,255,255,.22);
    }


    /* ---------------- GRAPHIC MAP (EUROPA) ---------------- */
    #travelMap.gmap{
      position: relative;
      width: 100%;
      height: 520px;
      border-radius: 22px;
      overflow: hidden;
      background-image: url('../img/map/world.svg');
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: 0 30px 90px rgba(10,35,55,.14);
    }
    body.dark #travelMap.gmap{
      background-image: none;
      background-size: cover;
      background-position: center;
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 40px 120px rgba(0,0,0,.55);
    }
    @media (max-width:520px){ #travelMap.gmap{ height: 420px; } }

    #gmapLines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
    .gmap-markers{ position:absolute; inset:0; }

    .gpin{
      position:absolute;
      transform: translate(-50%, -50%);
      width: 34px; height: 34px;
      border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      font-size: 17px; line-height: 1;
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(40, 90, 120, .14);
      box-shadow: 0 18px 40px rgba(10,35,55,.18);
      backdrop-filter: blur(10px);
      cursor:pointer; user-select:none;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .gpin:hover{ transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 24px 60px rgba(10,35,55,.22); }
    body.dark .gpin{
      background: rgba(20,25,35,.55);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 22px 54px rgba(0,0,0,.55);
      color: rgba(255,255,255,.95);
    }
    .gpin.active{
      box-shadow: 0 0 0 9px rgba(127,176,204,.18), 0 30px 90px rgba(10,35,55,.22);
    }
    body.dark .gpin.active{
      box-shadow: 0 0 0 10px rgba(127,176,204,.14), 0 34px 100px rgba(0,0,0,.60);
    }
    .gpin.home{
      width: 36px; height: 36px; font-size: 18px;
      background: linear-gradient(135deg, rgba(59,134,180,.18), rgba(127,176,204,.10));
      border-color: rgba(255,255,255,.22);
    }

    .gmap-popup{
      position:absolute;
      right: 16px; bottom: 16px;
      width: min(380px, calc(100% - 32px));
      border-radius: 22px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.92);
      box-shadow: 0 30px 80px rgba(0,0,0,.25);
      backdrop-filter: blur(12px);
      z-index: 5;
    }
    body.dark .gmap-popup{
      background: rgba(20,25,35,.78);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 34px 100px rgba(0,0,0,.55);
    }
    .gmap-popup .mp-close{
      position:absolute; top: 10px; right: 10px;
      height: 38px; width: 40px;
      border-radius: 14px;
      border: 1px solid rgba(40, 90, 120, .18);
      background: rgba(255,255,255,.85);
      cursor:pointer;
      box-shadow: 0 12px 26px rgba(10,35,55,.12);
      z-index: 2;
    }
    body.dark .gmap-popup .mp-close{
      background: rgba(20,25,35,.45);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      box-shadow: 0 14px 32px rgba(0,0,0,.45);
    }
    .gmap-popup .mp-img{ height: 160px; background: rgba(0,0,0,.08); }
    .gmap-popup .mp-img img{ width:100%; height:100%; object-fit: cover; display:block; }
    .gmap-popup .mp-content{ padding: 12px 14px 14px; }
    .gmap-popup .mp-badges{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .gmap-popup .mp-year{
      display:inline-block; padding: 4px 10px; border-radius: 999px;
      background: linear-gradient(135deg, rgba(59,134,180,.95), rgba(127,176,204,.9));
      color:#fff; font-size:12px; letter-spacing:.06em; font-weight: 800;
    }
    .gmap-popup .mp-place{
      display:inline-block; padding: 4px 10px; border-radius: 999px;
      border: 1px solid rgba(40, 90, 120, .14);
      background: rgba(255,255,255,.70);
      color: var(--text2); font-size:12px; font-weight: 800;
    }
    body.dark .gmap-popup .mp-place{
      border-color: rgba(255,255,255,.12);
      background: rgba(20,25,35,.45);
      color: rgba(255,255,255,.90);
    }
    .gmap-popup .mp-title{ font-weight: 900; letter-spacing: -0.01em; margin-bottom: 6px; }
    .gmap-popup .mp-text{ color: var(--muted2); font-weight: 650; font-size: 13px; line-height: 1.45; }


    /* ---------------- GRAPHIC MAP PREMIUM LOOK ---------------- */
    #travelMap.gmap::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 20% 10%, rgba(59,134,180,.18), transparent 42%),
        radial-gradient(circle at 80% 35%, rgba(127,176,204,.22), transparent 46%),
        radial-gradient(circle at 55% 75%, rgba(59,134,180,.10), transparent 50%);
      mix-blend-mode: multiply;
      opacity:.55;
      z-index:1;
    }
    body.dark #travelMap.gmap::before{
      mix-blend-mode: screen;
      opacity:.35;
    }

    /* subtle paper/noise texture */
    #travelMap.gmap::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
      opacity:.10;
      z-index:2;
    }
    body.dark #travelMap.gmap::after{ opacity:.14; }

    /* stars in dark mode */
    body.dark #travelMap.gmap .stars{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:2;
      opacity:.55;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.5px);
      background-size: 120px 120px, 180px 180px, 260px 260px;
      background-position: 10px 20px, 60px 80px, 110px 40px;
    }


    /* Ensure markers and lines are above map textures */
    #gmapLines{ z-index:3; }
    .gmap-markers{ z-index:4; }
    .gmap-popup{ z-index:6; }


    /* Mobile navigation toggle (fix) */
    @media (max-width: 900px){
      .main-
      body.dark .main-nav{
        background: rgba(20,25,35,.78);
        border-color: rgba(255,255,255,.10);
        box-shadow: 0 30px 90px rgba(0,0,0,.55);
      }
      .main-nav.open{ display:flex; }
      .site-header .wrap{ position: relative; }
    }


    /* ---------------- MAP MOBILE OPTIMIERUNG ---------------- */
    @media (max-width: 700px){
      #travelMap.gmap{ height: 520px; border-radius: 18px; }
      .map-hud{
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
        gap: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
      }
      .map-filter{ justify-content: flex-start; }
      .pill{ height: 34px; padding: 0 10px; font-size: 12px; }
      .map-stats-overlay{ min-width: 0; width: 100%; border-radius: 18px; padding: 10px 12px; }
      .map-stats-overlay .statrow{ padding: 6px 0; }

      .gpin{ width: 32px; height: 32px; font-size: 16px; }
      .gpin.home{ width: 34px; height: 34px; font-size: 17px; }

      .gmap-popup{
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        border-radius: 18px;
      }
      .gmap-popup .mp-img{ height: 140px; }
    }

    @media (max-width: 420px){
      #travelMap.gmap{ height: 560px; } /* extra room so pins + popup don't feel cramped */
      .pill{ font-size: 11px; }
      .gmap-popup .mp-img{ height: 130px; }
    }


    /* ---------------- MAP MOBILE PANEL ---------------- */
    .map-mobile-panel{ display:none; margin-top: 12px; }
    .map-mobile-panel .map-filter.mobile{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start; }
    .map-stats-mobile{
      margin-top: 12px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 10px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(255,255,255,.35);
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 50px rgba(10,35,55,.12);
    }
    body.dark .map-stats-mobile{
      background: rgba(20,25,35,.78);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 26px 80px rgba(0,0,0,.55);
    }
    .ms-item{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding: 4px 2px; }
    .ms-item span{ color: var(--muted2); font-weight: 750; font-size: 12px; }
    .ms-item strong{ font-weight: 900; }

    @media (max-width: 700px){
      /* Do not cover the map on mobile */
      .map-hud{ display:none !important; }
      .map-mobile-panel{ display:block; }
      #travelMap.gmap{ height: 520px; }
    }


    /* ---------------- MOBILE MENU OFF ---------------- */
    @media (max-width: 900px){
      .nav-toggle{ display:none !important; }
      #mainNav{ display:none !important; }
      body.nav-open #mainNav{ display:none !important; }
    }


    /* ---------- Gallery arrow disabled state ---------- */
    .gallery-arrow.disabled,
    .gallery-arrow:disabled{
      opacity:.45;
      cursor: default;
      filter: grayscale(.2);
    }

    /* ---------- Timeline reveal effect (restore) ---------- */
    .timeline-entry{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .timeline-entry.in-view{ opacity: 1; transform: translateY(0); }

    .timeline-dot{ transition: transform .25s ease, box-shadow .25s ease; }
    .timeline-entry.is-active .timeline-dot{
      transform: scale(1.25);
      box-shadow: 0 0 0 6px rgba(59,134,180,.18);
    }
    body.dark .timeline-entry.is-active .timeline-dot{
      box-shadow: 0 0 0 6px rgba(127,176,204,.18);
    }


    /* --- Mobile: pins a bit smaller, more room --- */
    @media (max-width: 700px){
      .gpin{ width: 30px; height: 30px; font-size: 15px; }
      .gpin.home{ width: 32px; height: 32px; font-size: 16px; }
    }


    /* --- Mobile: Familie als Slider --- */
    @media (max-width: 800px){
      .members-grid{
        display:flex !important;
        gap: 14px !important;
        overflow-x: auto !important;
        padding: 6px 2px 14px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .members-grid::-webkit-scrollbar{ height: 10px; }
      .members-grid::-webkit-scrollbar-thumb{
        background: rgba(127,176,204,.28);
        border-radius: 999px;
      }
      body.dark .members-grid::-webkit-scrollbar-thumb{ background: rgba(127,176,204,.18); }
      .member-card{
        min-width: 82%;
        scroll-snap-align: center;
      }
    }
    @media (max-width: 520px){
      .member-card{ min-width: 88%; }
    }


    /* ---------- Lightbox open state ---------- */
    body.no-scroll{ overflow:hidden; }
    .lightbox{ display:none; }
    .lightbox.open{ display:flex; align-items:center; justify-content:center; }
    .lightbox{ position:fixed; inset:0; background: rgba(10,20,30,.72); z-index: 5000; padding: 18px; }
    body.dark .lightbox{ background: rgba(0,0,0,.78); }
    .lightbox-inner{
      position:relative;
      width: min(980px, 100%);
      border-radius: 22px;
      overflow:hidden;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.20);
      backdrop-filter: blur(10px);
      box-shadow: 0 30px 120px rgba(0,0,0,.55);
    }
    .lightbox-img{ width:100%; height:auto; display:block; max-height: 82vh; object-fit: contain; background: rgba(0,0,0,.20); }
    .lightbox-close{
      position:absolute; top: 10px; right: 10px;
      width: 44px; height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(20,25,35,.55);
      color: #fff;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    .lightbox-close svg{ width: 22px; height: 22px; fill: currentColor; }

.timeline {
    display: none;
}

header {
    
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

body {
    padding-top: 100px;
}

/* Timeline komplett ausblenden */
.timeline {
    display: none !important;
}

/* Header wieder normal */
header {
    position: relative !important;
}

/* Navigation fixieren */


/* Abstand wegen fixer Navigation */
body {
    padding-top: 80px;
}

/* Timeline komplett ausblenden */
.timeline {
    display: none !important;
}

/* Header normal */
header {
    position: relative !important;
}

/* Hellblaue Leiste (Header-Inhalt) zentrieren */
header, .top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Navigation normal im Flow */


/* Darkmode Button ebenfalls mittig */
.darkmode-toggle, .darkmode-btn {
    margin-left: 20px;
}

/* Kein zusätzlicher Abstand mehr nötig */
body {
    padding-top: 0 !important;
}

/* Fix: Lightbox overlay needs fixed positioning */
.lightbox{ position: fixed !important; inset: 0 !important; }

/* Timeline sicher ausblenden (falls andere Regeln/Inline-Styles greifen) */
.timeline { display: none !important; }
/* .timeline-wrap nicht ausblenden (enthält ggf. andere Inhalte wie die Map) */

/* Einleitungstexte unter Sektiontiteln */
.section-intro{
  margin: 6px auto 0;
  max-width: 70ch;
  opacity: .9;
  text-align: center;
}

/* Map sichtbar halten */
.map, #map, .map-container, iframe.map { display:block !important; visibility: visible !important; opacity: 1 !important; }

/* ===== Visueller Feinschliff ===== */

/* Mehr Luft in den Sektionen (Hero bleibt unverändert) */
.section{
  padding: 80px 20px;
}

/* Titel etwas prägnanter + Abstand */
.section h2{
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 18px;
}

/* Dezente Unterstreichung unter Sektiontiteln */
.section h2::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  border-radius:2px;
  margin:12px auto 0;
  background: var(--blueLight);
}

/* Introtexte zentriert und etwas luftiger */
.section-intro{
  text-align:center;
  margin: 10px auto 0;
  max-width: 70ch;
  opacity: .92;
}

/* Karten/Elemente runder + Hover */
.member-card, .timeline-card, .gallery-item{
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.member-card:hover, .timeline-card:hover, .gallery-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,.08);
}

/* Header-Leiste etwas edler (bleibt hellblau) */


/* Scroll-Reveal Animation */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* Timeline sicher ausblenden (nur Inhalt, nicht Wrapper/Map) */
.timeline{
  display:none !important;
}

/* Map Popup Fotos: immer vollständig anzeigen (keine abgeschnittenen Köpfe/Gesichter) */
.leaflet-popup-content img,
.map-popup img,
.popup img{
  width: 100% !important;
  height: auto !important;
  max-height: 240px;           /* bei Bedarf anpassen */
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

/* Optional: Popup-Inhalt etwas breiter, damit Bilder besser wirken */
.leaflet-popup-content{
  max-width: 260px;
}

/* Map Container sicher relativ positionieren */
#map, .map-container {
  position: relative;
}

/* Reisestatistik als Overlay unten links */
.travel-stats, .reisestatistik {
  position: absolute !important;
  bottom: 20px;
  left: 20px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  z-index: 500;
  max-width: 240px;
  font-size: 0.9rem;
}

/* Popup breiter machen */
.leaflet-popup-content {
  max-width: 320px !important;
}

/* Popup Bilder größer & vollständig sichtbar */
.leaflet-popup-content img {
  width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  object-fit: contain !important;
  border-radius: 10px;
  margin-bottom: 8px;
}

/* Optional: etwas mehr Platz im Popup */
.leaflet-popup-content-wrapper {
  border-radius: 16px;
}

/* Map Container sicher relativ */
#map, .map-container{
  position: relative;
}

/* Desktop: Statistik unten links in der Map */
@media (min-width: 1024px){
  .travel-stats, .reisestatistik{
    position: absolute !important;
    bottom: 20px;
    left: 20px;
    z-index: 500;
    max-width: 260px;
  }
}

/* Mobile: wieder normal im Flow */
@media (max-width: 1023px){
  .travel-stats, .reisestatistik{
    position: relative !important;
    bottom: auto;
    left: auto;
  }
}

/* Desktop: Statistik unten links in der Map (HUD bleibt, Filter oben links) */
@media (min-width: 1024px){
  .travel-map-wrap{ position: relative; }
  .map-frame, .map-frame-inner, #map{ position: relative; }

  .map-hud{
    inset: 14px 14px 14px 14px !important;   /* auch unten Platz geben */
    flex-direction: column !important;       /* oben -> unten */
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: auto !important;
  }

  .map-filter{ align-self: flex-start !important; }

  .map-stats-overlay{
    align-self: flex-start !important;       /* links */
    margin-top: auto !important;             /* nach unten */
  }
}

/* Popup passt sich an das Bild an (keine feste Höhe) */
.gmap-popup .mp-img{
  width: 100%;
  height: auto !important;
  display: block;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: rgba(0,0,0,.04);
}

/* Bild vollständig, mittig, ohne Abschneiden */
.gmap-popup .mp-img img{
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Popup darf breiter werden, aber responsiv bleiben */
.gmap-popup{
  max-width: min(420px, 90vw) !important;
}

/* Überschrift nicht von HUD überdecken */
.travel-map-head{
  position: relative;
  z-index: 5;
}

/* HUD soll innerhalb der Karte sitzen (nicht über dem "Weltkarte"-Header) */
.travel-map-wrap{ position: relative; }

/* Falls HUD relativ zum Wrapper positioniert ist: nach unten schieben */
@media (min-width: 1024px){
  .map-hud{
    top: 88px !important;   /* Platz für Titel + Untertitel */
    left: 14px !important;
    right: 14px !important;
  }
}

/* Auf kleineren Screens etwas weniger Abstand */
@media (max-width: 1023px){
  .map-hud{
    top: 78px !important;
  }
}

/* Popup darf nie höher als 80% der Viewport-Höhe sein */
.gmap-popup{
  max-height: 80vh !important;
  overflow-y: auto !important;
}

/* Bild darf nur einen Teil der Popup-Höhe einnehmen */
.gmap-popup .mp-img img{
  max-height: 60vh !important;   /* reserviert Platz für Text + X */
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Close-Button bleibt sichtbar */
.gmap-popup .mp-close{
  position: absolute !important;
  top: 12px;
  right: 12px;
  z-index: 50;
}

@media (max-width: 760px){
  .map-stats-mobile{
    display:flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 6px 8px;
  }
  .map-stats-mobile::-webkit-scrollbar{ height: 6px; }
  .map-stats-mobile .ms-item{
    flex: 0 0 auto;
    min-width: 120px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(40,90,120,.12);
    display:flex;
    flex-direction: column;
    gap: 4px;
  }
  body.dark .map-stats-mobile .ms-item{
    background: rgba(20,25,35,.55);
    border-color: rgba(255,255,255,.10);
  }
  .map-stats-mobile .ms-item span{ font-size: 11px; opacity: .75; }
  .map-stats-mobile .ms-item strong{ font-weight: 800; font-size: 13px; }
}

.site-footer{
  padding: 18px 12px;
  background: #f5f7fa;
  border-top: 1px solid rgba(0,0,0,.06);
}

.footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 13px;
  opacity: .8;
}

.footer-inner a{
  text-decoration:none;
  color: inherit;
  font-weight: 500;
}

body.dark .site-footer{
  background: #141922;
  border-top-color: rgba(255,255,255,.08);
}

/* Lightbox Navigation */
#lightbox{
  position: fixed;
  inset: 0;
}
#lightbox .lb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select:none;
}
#lightbox .lb-prev{ left: 16px; }
#lightbox .lb-next{ right: 16px; }
#lightbox .lb-nav:hover{ background: rgba(0,0,0,.65); }
@media (max-width: 520px){
  #lightbox .lb-prev{ left: 10px; }
  #lightbox .lb-next{ right: 10px; }
}

/* =====================
   1) Micro-Animationen
   ===================== */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Map Marker: sanftes Pulsieren */
@keyframes pinPulse {
  0%   { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 0 rgba(59,134,180,.35); }
  70%  { transform: translate(-50%,-50%) scale(1.03); box-shadow: 0 0 0 14px rgba(59,134,180,0); }
  100% { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 0 rgba(59,134,180,0); }
}
.gpin:not(.home) {
  animation: pinPulse 2.6s ease-out infinite;
}

/* Buttons/Pills: kleine Bewegung */
.pill { transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.pill:active { transform: translateY(0); }

/* Galerie: leichter Hover */
.gallery-item img {
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}
.gallery-item:hover img { transform: scale(1.03); }

/* =====================
   6) Darkmode Premium
   ===================== */
body.dark .map-stats-overlay{
  background: rgba(20,25,35,.55) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.55) !important;
}
body.dark .map-filter .pill{
  background: rgba(20,25,35,.42) !important;
  border-color: rgba(255,255,255,.10) !important;
}
body.dark .map-filter .pill.active{
  box-shadow: 0 20px 44px rgba(59,134,180,.25) !important;
}

/* Map Popup im Darkmode: besserer Kontrast */
body.dark .gmap-popup{
  background: rgba(20,25,35,.70) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px);
}
body.dark .gmap-popup .mp-content{
  color: rgba(255,255,255,.92);
}
body.dark .gmap-popup .mp-badges span{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
}

/* =====================
   7) Mobile Optimierung
   ===================== */

/* Karte auf Mobile höher + full width */
@media (max-width: 760px){
  .travel-map-wrap{ width: 100%; }
  #travelMap.gmap{
    width: 100%;
    height: 72vh;            /* deutlich angenehmer */
    min-height: 520px;
    border-radius: 18px;
  }
  /* HUD enger und nicht zu breit */
  .map-hud{
    left: 10px !important;
    right: 10px !important;
    top: 76px !important;
    gap: 10px !important;
  }
}

/* Lightbox: Touch-UX Hinweis */
#lightbox.open { touch-action: pan-y; } /* horizontal swipes werden in JS verarbeitet */

/* Mobile: Pin-Animation deaktivieren (verhindert Flackern) */
@media (max-width: 760px){
  .gpin:not(.home){ animation: none !important; }
}

.gpin{
  transition:transform .35s ease, opacity .35s ease;
}
.gpin.hidden{
  opacity:0;
  transform:scale(.7);
}

/* weichere Section Übergänge */
section:not(.hero){
  position:relative;
  padding-top:60px;
}
section:not(.hero)::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(40,90,120,.15), transparent);
}

/* subtiler Hintergrund-Glow bei Map */
.travel-map-wrap{
  position:relative;
}
.travel-map-wrap::after{
  content:"";
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at 50% 40%, rgba(59,134,180,.08), transparent 70%);
  z-index:-1;
}

.hero{ background-attachment: scroll !important; }

.hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nav-ic{
  opacity:.9;
}

/* Subtile Hintergrund-Textur */
body{
  background-image: radial-gradient(circle at 10% 10%, rgba(59,134,180,.06), transparent 35%),
                    radial-gradient(circle at 90% 30%, rgba(127,176,204,.06), transparent 40%),
                    radial-gradient(circle at 50% 90%, rgba(59,134,180,.04), transparent 45%);
  background-attachment: fixed;
}

/* Sections: weichere Übergänge + alternierende Hintergrundflächen */
.section{
  border-radius: 22px;
  margin: 18px auto;
  max-width: 1180px;
}
.section:nth-of-type(even){
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(40,90,120,.08);
}
.section:nth-of-type(odd){
  background: rgba(255,255,255,.25);
}

body.dark .section:nth-of-type(even){
  background: rgba(20,25,35,.42);
  border-color: rgba(255,255,255,.08);
}
body.dark .section:nth-of-type(odd){
  background: rgba(20,25,35,.18);
}

/* Cards/Popups: konsistentere Schatten */
.member-card, .gallery-item, .map-stats-overlay, .gmap-popup, .video-embed{
  box-shadow: 0 18px 44px rgba(10,35,55,.10);
}
body.dark .member-card, body.dark .gallery-item, body.dark .map-stats-overlay, body.dark .gmap-popup, body.dark .video-embed{
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}

/* Smooth hover focus */
a, button{
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* Kleine Trennlinie dezenter */
section:not(.hero)::before{
  opacity: .55;
}

.video-wrap{
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0 12px;
}
.video-local{
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(10,35,55,.12);
  border: 1px solid rgba(40,90,120,.10);
  background: rgba(255,255,255,.6);
}
.video-local video{
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}
body.dark .video-local{
  background: rgba(20,25,35,.45);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}

#scrollProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: rgba(59,134,180,.9);
  box-shadow: 0 6px 18px rgba(59,134,180,.22);
}

/* Subtle animated background gradient */
@keyframes bgShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
body{
  background-size: 200% 200%;
  animation: bgShift 18s ease-in-out infinite;
}

/* Cinematic video card */
.video-card{
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  display: block;
  box-shadow: 0 22px 60px rgba(10,35,55,.14);
  border: 1px solid rgba(40,90,120,.10);
  background: rgba(255,255,255,.6);
}
.video-poster{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.01);
  transition: transform .35s ease, filter .35s ease;
}
.video-card:hover .video-poster{
  transform: scale(1.04);
  filter: saturate(1.05);
}
.video-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 54px;
  color: #fff;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.video-hint{
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.95);
  font-size: 13px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
}

/* Video lightbox */
.video-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  padding: 18px;
}
.video-lightbox.open{ display: flex; }
.video-modal{
  width: min(980px, 96vw);
  max-height: 86vh;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(20,25,35,.75);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.video-modal video{
  width: 100%;
  height: auto;
  max-height: 86vh;
  display: block;
  background: #000;
}
.video-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.video-close:hover{ background: rgba(0,0,0,.65); }

/* Ensure gallery lightbox close button always visible */
.lightbox-close,
#lightboxClose,
.gallery-lightbox .close{
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10000 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  backdrop-filter: blur(8px);
}
.lightbox-close:hover,
#lightboxClose:hover,
.gallery-lightbox .close:hover{
  background: rgba(0,0,0,.8) !important;
}

#lbClose svg{ width:22px; height:22px; }
#lbClose svg path{ fill: currentColor !important; }

.video-card{ position: relative; }
.video-play{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 42px !important;
  background: rgba(255,255,255,.92) !important;
  color: rgba(20,60,90,.95) !important;
  border: 1px solid rgba(40,90,120,.20) !important;
  box-shadow: 0 22px 60px rgba(10,35,55,.18) !important;
  text-shadow: none !important;
}
.video-card:hover .video-play{
  transform: translate(-50%,-50%) scale(1.04) !important;
}
@media (max-width: 760px){
  .video-play{ width: 78px; height: 78px; font-size: 36px !important; }
}

.person-social{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:14px;
}
.person-social .social-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  position:relative;
  color:#fff;
  background: rgba(15, 23, 42, .92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(10,35,55,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.person-social .social-btn svg{
  display:block;
}
.person-social .social-btn svg path{
  stroke: currentColor;
  fill: none;
}
.person-social .social-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 64px rgba(10,35,55,.22);
}
/* Instagram gradient ring like the example */
.person-social .social-btn.instagram::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  background: linear-gradient(135deg, #4f46e5, #ec4899, #f59e0b);
  z-index:-1;
  filter: saturate(1.05);
}
.person-social .social-btn.instagram{
  background: rgba(15, 23, 42, .88);
}
/* Email: clean blue ring */
.person-social .social-btn.email::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  background: linear-gradient(135deg, #38bdf8, #3b82f6);
  z-index:-1;
}
/* Darkmode tweaks */
body.dark .person-social .social-btn{
  background: rgba(7, 12, 20, .85);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

#siteLoader{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(245,250,255,1), rgba(235,246,255,1));
  transition: opacity .35s ease, visibility .35s ease;
}
body.dark #siteLoader{
  background: radial-gradient(circle at 30% 20%, rgba(30,45,70,.95), rgba(10,15,25,.98));
}
#siteLoader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#siteLoader .loader-card{
  width: min(360px, 86vw);
  padding: 22px 22px 18px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(40,90,120,.12);
  box-shadow: 0 26px 80px rgba(10,35,55,.18);
  backdrop-filter: blur(10px);
}
body.dark #siteLoader .loader-card{
  background: rgba(10,15,25,.55);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.loader-logo{
  width: 182px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 14px;
  /* default: visible on light background */
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.18));
}
/* On dark mode, make logo white */
body.dark .loader-logo{
  filter: brightness(0) invert(1) drop-shadow(0 14px 30px rgba(0,0,0,.35));
}

.loader-bar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(40,90,120,.12);
  border: 1px solid rgba(40,90,120,.10);
}
body.dark .loader-bar{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
}
.loader-bar span{
  display: block;
  height: 100%;
  width: 32%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59,134,180,.95), rgba(56,189,248,.95));
  animation: loaderMove 1.05s ease-in-out infinite;
}
@keyframes loaderMove{
  0%{ transform: translateX(-120%); }
  50%{ transform: translateX(90%); }
  100%{ transform: translateX(260%); }
}
.loader-text{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(20,60,90,.85);
}
body.dark .loader-text{
  color: rgba(255,255,255,.82);
}

@keyframes logoFadeIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes logoPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.loader-logo{
  animation: logoFadeIn .8s ease-out both, logoPulse 2.8s ease-in-out 1s infinite;
}


/* Harmonized Darkmode Stats */
body.dark #stats .stat-card{
  background: rgba(22, 35, 48, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

body.dark #stats .stat-number{
  background: none;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(191,228,255,.18);
}

body.dark #stats .stat-label{
  color: rgba(255,255,255,.75);
}


/* ================= Scroll To Top Button ================= */
#scrollTopBtn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b86b4, #7fb0cc);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index: 9999;
}

#scrollTopBtn.visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#scrollTopBtn:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

body.dark #scrollTopBtn{
  background: linear-gradient(135deg, #2f3e4d, #3b6d93);
}


/* ================= Hero Logo Intro ================= */
.hero-logo{
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: .15s;
}


body.is-loaded .hero-logo{
  opacity: 1;
  transform: translateY(0) scale(1);
}


@media (prefers-reduced-motion: reduce){
  .hero-logo{ opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ================= Hero Logo Center Fix ================= */
.hero{ position: relative; }
.hero-inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* above overlay */
}
.hero-overlay{ z-index: 1; }

/* Keep logo block itself centered */
.hero-logo{
  position: relative !important;
  inset: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}
.hero-logo img{
  display: block;
  margin: 0 auto;
}

/* Preserve intro animation */
.hero-logo{
  opacity: 0;
  transform: translateY(30px) scale(.96);
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1), 
              transform 1.6s cubic-bezier(.22,.61,.36,1);
  transition-delay: .4s;
}
body.is-loaded .hero-logo{
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ================= Cine Hero ================= */
.hero{ position: relative; }
.hero-overlay{
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.08), rgba(0,0,0,.22));
}
body.dark .hero-overlay{
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.65));
}
.hero img{
  transform: scale(1.06);
  filter: blur(6px) saturate(1.05) brightness(.98);
  transition: transform 2.2s cubic-bezier(.22,.61,.36,1), filter 2.2s cubic-bezier(.22,.61,.36,1);
}
body.is-loaded .hero img{
  transform: scale(1.0);
  filter: blur(0) saturate(1) brightness(1);
}
@media (prefers-reduced-motion: reduce){
  .hero img{ transform:none !important; filter:none !important; transition:none !important; }
}

/* ================= Visual Hierarchy ================= */
.section-title{
  font-size: clamp(26px, 2.4vw, 34px);
}
.section-intro{
  max-width: 760px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
@media (max-width: 520px){
  .section-intro{ margin-bottom: 22px; }
}

/* ================= Micro Details ================= */
.btn, .icon-btn, .member-card, #stats .stat-card{
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}
.btn:focus-visible, .gallery-arrow:focus-visible, .lb-nav:focus-visible, #scrollTopBtn:focus-visible{
  outline: 3px solid rgba(127,176,204,.45);
  outline-offset: 3px;
}

/* ================= Lightbox Premium ================= */
.lightbox-inner{ position: relative; }
.lb-counter{
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.lightbox-img{
  transition: opacity .22s ease, transform .22s ease;
}
.lightbox-img.is-fading{
  opacity: 0;
  transform: scale(.995);
}

/* === Darkmode Member Name Contrast === */
body.dark .member-name{
  color: var(--nav) !important;
}
/* === End Darkmode Member Name Contrast === */

/* === Slim Footer === */
.footer-slim{
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
}

.footer-slim-wrap{
  width: min(1100px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.footer-slim-copy{
  font-size: 0.92rem;
  color: rgba(0,0,0,0.7);
}

.footer-slim-center{
  justify-self: center;
}

.footer-slim-right{
  justify-self: end;
  display: flex;
  gap: 12px;
}

.footer-slim-right a{
  font-size: 0.92rem;
  color: rgba(0,0,0,0.7);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.footer-slim-right a:hover{
  opacity: 0.6;
}

.footer-email-btn{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.8);
  text-decoration: none;
  font-size: 0.92rem;
  transition: background 0.15s ease;
}

.footer-email-btn:hover{
  background: rgba(0,0,0,0.08);
}

/* Dark mode */
body.dark .footer-slim{
  background: #111;
  border-top: 1px solid rgba(255,255,255,0.1);
}

body.dark .footer-slim-copy,
body.dark .footer-slim-right a{
  color: rgba(255,255,255,0.8);
}

body.dark .footer-email-btn{
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}

@media (max-width: 768px){
  .footer-slim-wrap{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }
  .footer-slim-right{
    justify-self: center;
  }
}
/* === End Slim Footer === */


/* === Mobile Video Play Button Removal === */
@media (max-width: 768px){
  #weddingVideo::-webkit-media-controls-overlay-play-button,
  #weddingVideo::-webkit-media-controls-start-playback-button{
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
  }
}
/* === End Mobile Video Play Button Removal === */


/* === Mobile map full width === */
@media (max-width:768px){
  .travel-map-wrap{
    width:100vw;
    max-width:100vw;
    margin-left:calc(-50vw + 50%);
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }
}
/* === End mobile map full width === */


/* === Travel Penguin Mascot === */

#travelPenguin{
position:fixed;
bottom:20px;
left:20px;
font-size:32px;
cursor:pointer;
z-index:9999;
animation:penguinFloat 3s ease-in-out infinite;
}

@keyframes penguinFloat{
0%{transform:translateY(0px)}
50%{transform:translateY(-6px)}
100%{transform:translateY(0px)}
}

#penguinTip{
position:fixed;
bottom:70px;
left:20px;
background:rgba(0,0,0,0.8);
color:white;
padding:10px 14px;
border-radius:12px;
font-size:14px;
opacity:0;
transform:translateY(10px);
transition:all .3s ease;
z-index:9999;
}

#penguinTip.show{
opacity:1;
transform:translateY(0);
}

/* === End Travel Penguin Mascot === */



/* === Travel Penguin Enhancements === */
#penguinTip{
  max-width: min(320px, calc(100vw - 40px));
  line-height: 1.35;
}

#travelPenguin.penguin-running{
  animation: none !important;
  will-change: left, top;
}

#travelPenguin.penguin-wiggle{
  animation: penguinWiggle .7s ease-in-out;
}

@keyframes penguinWiggle{
  0%{ transform: rotate(0deg) }
  25%{ transform: rotate(-10deg) }
  50%{ transform: rotate(10deg) }
  75%{ transform: rotate(-6deg) }
  100%{ transform: rotate(0deg) }
}
/* === End Travel Penguin Enhancements === */


/* Penguin hover wave */
#travelPenguin:hover{
animation:penguinWave .6s ease-in-out;
}

@keyframes penguinWave{
0%{transform:rotate(0deg)}
25%{transform:rotate(-12deg)}
50%{transform:rotate(12deg)}
75%{transform:rotate(-8deg)}
100%{transform:rotate(0deg)}
}

/* ===== HERO LOGO SIZE (40% smaller) ===== */
.hero-logo img{
  height: 252px !important; /* 420px -> 252px */
  width: auto;
}
@media (max-width: 768px){
  .hero-logo img{ height: 144px !important; } /* 240px -> 144px */
}

/* ===== DE/AT ACCENT CARDS (clean) ===== */
#de-at .country-cards{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#de-at .country-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

body:not(.dark) #de-at .country-card{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

/* subtle diagonal country accent */
#de-at .country-card::before{
  content: "";
  position: absolute;
  inset: -40% -30%;
  transform: rotate(-10deg);
  opacity: .10;
  pointer-events: none;
}

#de-at .country-de::before{
  background: linear-gradient(90deg,
    #000 0%, #000 33%,
    #dd0000 33%, #dd0000 66%,
    #ffce00 66%, #ffce00 100%
  );
}

#de-at .country-at::before{
  background: linear-gradient(90deg,
    #ed2939 0%, #ed2939 33%,
    #ffffff 33%, #ffffff 66%,
    #ed2939 66%, #ed2939 100%
  );
}

#de-at .country-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}

#de-at .country-media img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.16));
}

#de-at .country-meta{
  position: relative;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

#de-at .country-name{
  margin: 0;
  font-size: 1.15rem;
}

#de-at .country-tag{
  margin: 0;
  opacity: .85;
  font-weight: 600;
}

/* ===== DE/AT FLOAT (safe, scoped) ===== */
#de-at .country-media img{
  transform-origin: center;
  animation: deatFloatA 7.2s ease-in-out infinite;
  will-change: transform;
}

#de-at .country-card.country-de .country-media img{ animation-name: deatFloatA; }
#de-at .country-card.country-at .country-media img{
  animation-name: deatFloatB;
  animation-duration: 6.4s;
}

/* Dorothea */
@keyframes deatFloatA{
  0%,100%{ transform: translate3d(0,0,0) rotate(-1deg); }
  50%{ transform: translate3d(0,-24px,0) rotate(1.2deg); }
}

/* Philipp */
@keyframes deatFloatB{
  0%,100%{ transform: translate3d(0,0,0) rotate(1deg); }
  50%{ transform: translate3d(0,-20px,0) rotate(-1.2deg); }
}

@media (prefers-reduced-motion: reduce){
  #de-at .country-media img{ animation: none !important; transform: none !important; }
}

/* ===== DE/AT MOBILE LAYOUT IMPROVEMENT ===== */
@media (max-width: 900px){
  #de-at .country-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #de-at .country-card{
    padding: 12px;
    border-radius: 18px;
  }
  #de-at .country-media{ border-radius: 14px; }
  #de-at .country-name{ font-size: 1.05rem; }
  #de-at .country-tag{ font-size: .95rem; }
}
@media (max-width: 520px){
  #de-at .country-cards{ grid-template-columns: 1fr; }
}

/* ===== Mobile slider fixes: no page scrollbar + visible peek (Familie & Bilder) ===== */

/* Kill horizontal page scrollbar, keep sliders scrollable */
html, body{ overflow-x: hidden; }

@media (max-width: 640px){

  /* --- Familie: keep as horizontal slider + show peek of next card --- */
  #familie .members-grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 16px 12px;   /* padding creates the "peek" */
    margin: 0;
    max-width: 100%;
  }

  #familie .members-grid::-webkit-scrollbar{ display: none; }
  #familie .members-grid{ scrollbar-width: none; }

  #familie .member-card{
    flex: 0 0 78%;            /* < 100% so the 2nd card is visible */
    max-width: 78%;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* --- Bilder: show peek of next image --- */
  .gallery-track{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .gallery-item{
    flex: 0 0 78% !important;  /* < 100% so next item peeks in */
  }
}