/* ---------- NAV ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;
  display:flex;align-items:center;
  transition:background-color .35s ease, box-shadow .35s ease;
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
.brand{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--white);text-decoration:none;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.35);}
.nav__links{display:flex;gap:2rem;list-style:none;margin:0;padding:0;}
.nav__links a{
  text-decoration:none;color:var(--white);font-weight:600;font-size:.95rem;
  letter-spacing:.02em;padding:.4rem 0;position:relative;text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--orange);transition:right .3s ease;}
.nav__links a:hover::after,.nav__links a:focus-visible::after{right:0;}
.nav.is-scrolled{background:var(--navy);box-shadow:0 2px 24px rgba(0,0,0,.18);}
.nav.is-scrolled .brand,.nav.is-scrolled .nav__links a{text-shadow:none;}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;width:44px;height:44px;}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--white);margin:5px auto;transition:.3s;}

@media (max-width:760px){
  .nav__toggle{display:block;}
  .nav__links{
    position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;
    background:var(--navy);padding:.5rem 0 1rem;box-shadow:0 12px 24px rgba(0,0,0,.2);
    clip-path:inset(0 0 100% 0);transition:clip-path .3s ease;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0);}
  .nav__links a{padding:.9rem clamp(1.25rem,4vw,2.5rem);text-shadow:none;width:100%;}
  .nav__links a::after{display:none;}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:600;
  font-size:.98rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;border:0;
  padding:.85rem 1.6rem;border-radius:2px;transition:transform .15s ease, background-color .25s ease;
}
.btn--primary{background:var(--orange);color:var(--white);}
.btn--primary:hover{background:var(--orange-soft);transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.5);}
.btn--ghost:hover{border-color:var(--orange);color:var(--orange);}
.btn-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2.2rem;}
.btn--nav{background:var(--navy);color:#fff;}
.btn--nav:hover{background:var(--navy-deep);}

/* ---------- SUB-NAV (Pill-Links, z.B. Über uns) ---------- */
.subnav{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-top:2.4rem;}
.subnav a{
  font-family:var(--sans);font-weight:600;font-size:.85rem;letter-spacing:.04em;
  color:var(--white);text-decoration:none;padding:.6rem 1.3rem;border-radius:2px;
  border:1.5px solid rgba(255,255,255,.35);transition:border-color .2s ease,color .2s ease;
}
.subnav a:hover,.subnav a:focus-visible{border-color:var(--orange);color:var(--orange);}

/* ---------- VERANSTALTUNGEN scroller ---------- */
.events__track{
  display:flex;gap:1.25rem;overflow-x:auto;padding:.5rem .25rem 1.5rem;
  scroll-snap-type:x mandatory;scroll-padding-inline:clamp(1.25rem,4vw,2.5rem);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--navy) transparent;
}
.event{
  flex:0 0 clamp(240px,80vw,320px);scroll-snap-align:start;background:var(--white);
  border:1px solid #dbe6ea;border-radius:4px;overflow:hidden;
  box-shadow:0 4px 20px rgba(20,49,74,.06);display:flex;flex-direction:column;
}
.event__date{background:var(--navy);color:var(--white);padding:1rem 1.4rem;}
.event__day{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1;}
.event__full{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-top:.25rem;}
.event__body{padding:1.4rem;flex:1;}
.event__tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:.5rem;}
.event__title{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);}

/*  VORSTAND  */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;}
.board__card{background:var(--white);border:1px solid #dbe6ea;border-radius:4px;padding:1.8rem 1.6rem;text-align:center;box-shadow:0 4px 20px rgba(20,49,74,.05);}
.board__role{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);}
.board__name{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--navy);margin:.5rem 0 .9rem;}
.mail{
  color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1.5px solid transparent;
  transition:border-color .2s ease;word-break:break-all;
}
.mail:hover{border-color:var(--orange);}
.mail::before{content:"E-Mail wird geladen …";color:#7a8a94;font-weight:400;}
.mail.ready::before{content:none;}

/* ---------- PRINZIPIEN ---------- */
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.principle{background:var(--white);border:1px solid #dbe6ea;border-radius:4px;overflow:hidden;box-shadow:0 4px 20px rgba(20,49,74,.06);}
.principle__media{aspect-ratio:4/3;background:linear-gradient(135deg,#dbe6ea,#eaf2f5);display:flex;align-items:center;justify-content:center;color:#8ba0aa;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #dbe6ea;}
.principle__body{padding:1.6rem 1.5rem;}
.principle__title{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--navy);letter-spacing:.03em;margin-bottom:.6rem;}
.principle__body p{color:#3a4a55;font-size:.95rem;margin:0;}

/* ---------- LEBEN IN DER AKTIVITAS (Galerie) ---------- */
.gallery__track{
  display:flex;gap:1rem;overflow-x:auto;padding:.5rem .25rem 1rem;
  scroll-snap-type:x mandatory;scroll-padding-inline:clamp(1.25rem,4vw,2.5rem);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--navy) transparent;
}
.gallery__item{
  flex:0 0 clamp(160px,42vw,220px);aspect-ratio:3/4;scroll-snap-align:start;border-radius:4px;
  background:linear-gradient(135deg,#dbe6ea,#eaf2f5);border:1px solid #dbe6ea;
  display:flex;align-items:center;justify-content:center;color:#8ba0aa;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:.5rem;
}

/* ---------- GESCHICHTE: Zeitstrahl ---------- */
/* Markup wird zur Laufzeit aus js/timeline.js gerendert, siehe dort für die Daten. */
.timeline-wrap{overflow-x:auto;padding:1rem .25rem 2rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--orange) transparent;}
/* Grid statt Flexbox: 3 explizite Zeilen (oben/Linie/unten), die je Zeile über ALLE
   Einträge hinweg dieselbe Höhe bekommen (= Höhe des längsten Eintrags dieser Zeile).
   So bleibt der Knoten (Zeile 2) garantiert auf einer Linie, egal wie lang der Text
   bei einzelnen Einträgen ist — mit Flexbox war jedes Item unabhängig hoch. */
.timeline{
  display:grid;grid-auto-flow:column;grid-auto-columns:232px;
  grid-template-rows:auto auto auto;width:max-content;margin-inline:auto;
}
.timeline__item{display:contents;}
.timeline__top{grid-row:1;align-self:end;text-align:center;padding:0 1rem 1rem;}
.timeline__bottom{grid-row:3;align-self:start;text-align:center;padding:1rem 1rem 0;}
.timeline__node-row{grid-row:2;position:relative;height:26px;}
.timeline__node-row::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:var(--orange);transform:translateY(-50%);}
.timeline__node{width:15px;height:15px;border-radius:50%;background:var(--navy);border:3px solid var(--orange);margin-inline:auto;position:relative;z-index:1;}
.timeline__date{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--orange);margin-bottom:.35rem;}
.timeline__text{font-size:.8rem;line-height:1.45;color:#e6eef3;margin:0;}