@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root{
  --bg: #9EAFB9;          /* page background – steel blue-grey, sampled from original site */
  --bg-dark: #0B2A52;     /* deep navy for topbar/footer/dark bands */
  --bg-dark-2: #123A63;   /* slightly lighter navy */
  --navy: #003C84;        /* primary accent / link colour, sampled from original site */
  --ink: #101418;         /* near-black for headings */
  --paper: #FFFFFF;
  --steel-light: #C7D1D6; /* light border on white panels */
  --steel: #56707D;       /* muted secondary text */
  --btn-fill: #B7C0C6;    /* button face, sampled from original site */
  --btn-fill-hover: #C7CED2;
  --btn-border: #7C8D97;  /* button border, sampled from original site */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --line-dash: repeating-linear-gradient(
      to right,
      var(--btn-border) 0 22px,
      transparent 22px 38px
  );
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--navy); }
img{ max-width:100%; display:block; }
ul{ margin:0; padding-left:1.2em; }
table{ border-collapse:collapse; width:100%; }
th,td{ text-align:left; padding:.6em .8em; border-bottom:1px solid var(--steel-light); }
th{ font-family:var(--font-display); letter-spacing:.03em; text-transform:uppercase; font-size:.82rem; color:var(--steel); }

.roadline{
  height:4px;
  background:var(--line-dash);
  background-color: var(--bg-dark);
}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--bg-dark);
  color:#D7E0E6;
  font-size:.85rem;
}
.topbar-inner{
  max-width:1120px; margin:0 auto; padding:.5rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar a.fb{ display:inline-flex; align-items:center; gap:.4em; color:#D7E0E6; text-decoration:none; }
.topbar a.fb:hover{ color:#fff; }

.lang-toggle{
  display:inline-flex; background:var(--bg-dark-2); border-radius:999px; padding:3px;
}
.lang-toggle button{
  font-family:var(--font-display);
  font-size:.78rem; letter-spacing:.06em;
  border:none; background:transparent; color:#D7E0E6;
  padding:.32em .9em; border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lang-toggle button.active{ background:#fff; color:var(--bg-dark); }

/* ---------- Header ---------- */
.site-header{
  position:relative;
  background:var(--bg-dark);
  overflow:hidden;
}
.site-header-photo{
  width:100%;
  height:clamp(150px, 26vw, 300px);
  object-fit:cover;
  display:block;
}
.site-header-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,42,82,.95) 0%, rgba(11,42,82,.55) 45%, rgba(11,42,82,.05) 100%);
}
.site-header-inner{
  position:absolute; left:0; right:0; bottom:0;
  max-width:1120px; margin:0 auto; padding:1.2rem 1.25rem 1.1rem;
  display:flex; align-items:center; gap:1rem;
}
.badge{
  width:64px; height:64px; border-radius:50%;
  background:#fff;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  flex:none;
  object-fit:cover;
}
.site-title h1{
  font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; letter-spacing:.01em; margin:0; line-height:1.1;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.site-title p{
  margin:.15rem 0 0; color:#CBD8E0; font-family:var(--font-display);
  font-size:.9rem; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Nav ---------- */
.site-nav{
  background:var(--paper);
  border-top:1px solid var(--steel-light);
}
.site-nav-inner{
  max-width:1120px; margin:0 auto; padding:0 1.25rem;
  display:flex; flex-wrap:wrap; gap:.2rem;
}
.site-nav a{
  display:inline-block;
  font-family:var(--font-display); font-size:.86rem; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  padding:.85rem .8rem; border-bottom:3px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.site-nav a:hover, .site-nav a.active{
  color:var(--navy); border-bottom-color:var(--navy);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--bg-dark);
  color:var(--paper);
  overflow:hidden;
}
.hero-inner{
  max-width:1120px; margin:0 auto; padding:3.4rem 1.25rem 3rem; position:relative; z-index:2;
}
.hero h2{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem, 5vw, 3.2rem); margin:0 0 .5rem; letter-spacing:.01em;
}
.hero .hero-sub{
  color:#CBD8E0; font-size:1.05rem; max-width:640px; margin:0;
}
.hero-route{
  position:absolute; inset:0; z-index:1; opacity:.35; pointer-events:none;
}

/* ---------- Welcome (single-language) ---------- */
.welcome{
  max-width:1120px; margin:0 auto; padding:2.6rem 1.25rem;
  display:grid; grid-template-columns:1fr;
}
.welcome-col{ padding:0 1.6rem; max-width:760px; }
.welcome-col h3{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:1rem; color:var(--navy); margin:0 0 .6rem;
}
.welcome-col p{ line-height:1.6; color:var(--ink); margin:0 0 .8rem; }

/* ---------- Cards ---------- */
.cards{
  max-width:1120px; margin:0 auto; padding:0 1.25rem 3rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
}
.card{
  background:var(--paper); border-left:4px solid var(--navy);
  padding:1.4rem 1.4rem; box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.card h4{
  font-family:var(--font-display); text-transform:uppercase; font-size:.95rem;
  letter-spacing:.04em; margin:0 0 .5rem; color:var(--ink);
}
.card p{ margin:0 0 1rem; color:var(--steel); font-size:.92rem; line-height:1.5; }
.card a{
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; color:var(--navy);
}
.card a:hover{ color:var(--ink); }

/* ---------- Buttons (pill style, matching original mail buttons) ---------- */
.btn-pill{
  display:inline-block;
  font-family:var(--font-body); font-weight:700; font-size:.85rem;
  color:var(--ink); text-decoration:none; text-align:center;
  background:linear-gradient(to bottom, #E4E9EB 0%, var(--btn-fill) 55%, var(--btn-fill) 100%);
  border:1px solid var(--btn-border);
  border-radius:999px;
  padding:.55em 1.4em;
  box-shadow:0 1px 2px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  transition:background .15s ease;
}
.btn-pill:hover{ background:linear-gradient(to bottom, #EFF3F4 0%, var(--btn-fill-hover) 55%, var(--btn-fill-hover) 100%); }

/* ---------- Subpage ---------- */
.page-band{
  background:var(--bg-dark-2); color:var(--paper);
}
.page-band-inner{
  max-width:1120px; margin:0 auto; padding:1.8rem 1.25rem;
}
.page-band h2{
  font-family:var(--font-display); text-transform:uppercase; margin:0 0 .3rem;
  font-size:clamp(1.5rem,4vw,2.1rem);
}
.page-band .lead{ color:#CBD8E0; margin:0; max-width:640px; }
.breadcrumb-back{
  display:inline-block; color:#CBD8E0; font-size:.82rem;
  text-decoration:none; margin-bottom:.6rem;
}
.breadcrumb-back:hover{ color:#fff; text-decoration:underline; }

.child-pages{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem;
  margin-top:1.4rem;
}

.page-content{
  max-width:820px; margin:0 auto; padding:2.4rem 1.25rem 3.5rem;
  line-height:1.65;
  background:var(--paper);
}
.page-content h1,.page-content h2,.page-content h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; color:var(--ink); }
.page-content a{ color:var(--navy); }
.page-content code{ background:var(--steel-light); padding:.1em .4em; border-radius:3px; font-size:.9em; }

/* ---------- Address cards (Adressen) ---------- */
.address-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.6rem;
  margin-top:1rem;
}
.address-card{
  background:var(--paper);
  border:1px solid var(--steel-light);
  padding:1.5rem 1.4rem;
  text-align:center;
}
.address-title{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-weight:600; color:var(--navy); font-size:.92rem;
  margin-bottom:1rem;
}
.address-lines{
  color:var(--ink); font-size:.95rem; line-height:1.7;
  margin-bottom:1rem;
}
.address-contact{
  color:var(--steel); font-size:.92rem; line-height:1.7;
}
.address-contact a{ color:var(--navy); text-decoration:underline; }
.address-contact a:hover{ color:var(--ink); }

/* ---------- Products (Shop) ---------- */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem;
  margin-top:1rem;
}
.product-card{
  background:var(--paper);
  border:1px solid var(--steel-light);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.product-image{
  width:100%; height:170px; object-fit:cover; display:block;
  background:var(--steel-light);
}
.product-image-empty{
  display:flex; align-items:center; justify-content:center;
}
.product-body{ padding:1rem 1.1rem 1.2rem; }
.product-name{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:1rem; margin:0 0 .3rem; color:var(--ink);
}
.product-price{
  font-family:var(--font-display); font-weight:600; color:var(--navy);
  font-size:.95rem; margin-bottom:.5rem;
}
.product-desc{ margin:0; color:var(--steel); font-size:.9rem; line-height:1.5; }

/* ---------- Items (Vorstand / Termine / CZV-Kurse) ---------- */
.items-table{
  margin-top:1rem;
}
.items-table tbody tr:hover{ background:#F4F7F8; }
.items-list{
  list-style:none; margin:1rem 0 0; padding:0;
}
.members-list{
  display:flex; flex-direction:column; gap:1rem;
  margin-top:1rem;
}
.member-card{
  background:var(--paper);
  border:1px solid var(--steel-light);
  border-left:4px solid var(--navy);
  padding:1.1rem 1.4rem;
}
.member-role{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:.82rem; font-weight:600; color:var(--navy);
  margin-bottom:.3rem;
}
.member-name{
  font-weight:600; color:var(--ink); font-size:1.02rem;
  margin-bottom:.55rem;
}
.member-address,
.member-extra{
  color:var(--steel); font-size:.92rem; line-height:1.6;
  margin-bottom:.55rem;
}
.member-contact{
  font-size:.92rem; line-height:1.7;
}
.member-contact a{
  color:var(--navy); text-decoration:underline;
}
.member-contact a:hover{ color:var(--ink); }
.item-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1.2rem;
  padding:.8rem 0; border-bottom:1px solid var(--steel-light);
}
.item-role{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em;
  color:var(--navy); font-weight:600; min-width:170px;
}
.item-detail{ color:var(--steel); font-size:.92rem; }
.item-detail a{ color:var(--navy); text-decoration:none; }
.item-detail a:hover{ text-decoration:underline; }
.items-empty{
  border:1px dashed var(--steel-light);
  padding:1.6rem; text-align:center; color:var(--steel);
  font-size:.92rem; margin-top:1rem;
}

/* ---------- Gallery ---------- */
.gallery-section{
  max-width:1120px; margin:0 auto; padding:0 1.25rem 3.5rem;
  background:var(--paper);
}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:.9rem;
  list-style:none; margin:0; padding:0;
}
.gallery li{
  background:var(--paper);
  border:1px solid var(--steel-light);
  overflow:hidden;
}
.gallery img{
  width:100%; height:130px; object-fit:cover; display:block;
  cursor:zoom-in;
}
.gallery figcaption{
  font-size:.78rem; color:var(--steel); padding:.4rem .6rem;
  font-family:var(--font-body);
}
.gallery-empty{
  border:1px dashed var(--steel-light);
  padding:2rem 1.5rem;
  color:var(--steel);
  font-size:.92rem;
  text-align:center;
  background:var(--paper);
}

/* ---------- Videos ---------- */
.videos-section{
  max-width:1120px; margin:0 auto; padding:0 1.25rem 3.5rem;
  background:var(--paper);
}
.videos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem;
  margin-top:1rem;
}
.video-item{
  background:var(--paper);
  border:1px solid var(--steel-light);
  overflow:hidden;
}
.video-thumb{
  position:relative; width:100%; padding-top:56.25%;
  background:#000; cursor:pointer;
}
.video-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.video-play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:60px; height:60px; border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  padding-left:4px;
  transition:background .15s ease, transform .15s ease;
}
.video-thumb:hover .video-play-badge{
  background:var(--navy);
  transform:translate(-50%, -50%) scale(1.08);
}
.video-thumb-fallback{
  display:flex; align-items:center; justify-content:center;
  cursor:default;
}
.video-thumb-fallback a{
  color:#fff; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.03em; font-size:.85rem; text-decoration:none;
}
.video-thumb-fallback a:hover{ text-decoration:underline; }
.video-caption{
  font-size:.8rem; color:var(--steel); padding:.5rem .7rem;
  font-family:var(--font-body);
}

/* ---------- Lightbox (Vollbildanzeige) ---------- */
.lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(10,14,18,.93);
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:1rem;
  padding:2.2rem; z-index:1000;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-img{
  max-width:92vw; max-height:82vh; object-fit:contain;
  box-shadow:0 6px 30px rgba(0,0,0,.5);
}
.lightbox-video-wrap{
  display:none;
  width:min(92vw, 960px);
  aspect-ratio:16/9;
  box-shadow:0 6px 30px rgba(0,0,0,.5);
  background:#000;
}
.lightbox-video{
  width:100%; height:100%; border:0; display:block;
}
.lightbox-caption{
  color:#EDEFF1; font-size:.92rem; text-align:center; max-width:80vw;
}
.lightbox-close{
  position:absolute; top:1rem; right:1.2rem;
  background:transparent; border:none; color:#fff; font-size:2.4rem;
  line-height:1; cursor:pointer; padding:.2rem .6rem;
}
.lightbox-close:hover{ opacity:.7; }
.lightbox-prev,
.lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; color:#fff;
  font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.lightbox-prev:hover,
.lightbox-next:hover{ background:rgba(255,255,255,.2); }
.lightbox-prev{ left:1rem; }
.lightbox-next{ right:1rem; }
@media (max-width: 640px){
  .lightbox-prev, .lightbox-next{ width:42px; height:42px; font-size:1.25rem; }
  .lightbox-close{ font-size:2rem; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--bg-dark); color:#CBD8E0;
}
.site-footer-inner{
  max-width:1120px; margin:0 auto; padding:2.2rem 1.25rem 2.6rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem;
}
.site-footer h5{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:.85rem; color:#fff; margin:0 0 .6rem;
}
.site-footer p, .site-footer a{ font-size:.88rem; margin:0 0 .3rem; text-decoration:none; color:#CBD8E0; }
.site-footer a:hover{ color:#fff; }
.site-footer .btn-pill,
.site-footer .btn-pill:hover{
  color:var(--ink);
}
.footer-bottom{
  text-align:center; font-size:.78rem; color:#94A9B6;
  padding:.9rem 1.25rem; border-top:1px solid var(--bg-dark-2);
}
.footer-bottom a{ color:#94A9B6; text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .cards{ grid-template-columns:1fr; }
  .site-header-inner{ align-items:flex-start; }
}

:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}