/* ============================================================
   ESVÖ – Markenfarben aus dem Vereins-Logo (Flagge)
   Rot #E5322C (primär) · Teal #76A6A1 (Akzent) · Grau #BFBFBF
   ============================================================ */
:root{
  --esv-red:#E5322C;
  --esv-red-dark:#b3211c;
  --esv-teal:#76A6A1;
  --esv-teal-dark:#5d8a85;
  --esv-grey:#bfbfbf;

  --bs-primary:#E5322C;
  --bs-primary-rgb:229,50,44;
  --bs-link-color:#E5322C;
  --bs-link-color-rgb:229,50,44;
  --bs-link-hover-color:#b3211c;
  --bs-link-hover-color-rgb:179,33,28;
}

/* Links */
a{color:var(--esv-red);text-decoration:none;}
a:hover,a:focus{color:var(--esv-red-dark);text-decoration:underline;}

/* Buttons */
.btn-primary{
  --bs-btn-bg:var(--esv-red);--bs-btn-border-color:var(--esv-red);
  --bs-btn-hover-bg:var(--esv-red-dark);--bs-btn-hover-border-color:var(--esv-red-dark);
  --bs-btn-active-bg:var(--esv-red-dark);--bs-btn-active-border-color:var(--esv-red-dark);
}
.btn-outline-primary{
  --bs-btn-color:var(--esv-red);--bs-btn-border-color:var(--esv-red);
  --bs-btn-hover-bg:var(--esv-red);--bs-btn-hover-border-color:var(--esv-red);
}

/* Alte UIkit-Buttons (uk-button) als richtige Marken-Buttons darstellen */
a.uk-button, a.uk-button-primary{
  display:inline-block;
  margin:.15rem .3rem .15rem 0;
  padding:.32rem .85rem;
  background:var(--esv-red);
  color:#fff !important;
  border-radius:5px;
  font-size:.9rem;
  font-weight:600;
  line-height:1.45;
  text-decoration:none !important;
  transition:background .15s;
}
a.uk-button:hover, a.uk-button-primary:hover{ background:var(--esv-red-dark); color:#fff !important; }
/* Verlinkte Bilder NICHT als roten Button darstellen */
a.uk-button:has(img), a.uk-button-primary:has(img){
  background:none !important; padding:0 !important; border-radius:0; display:inline;
}

/* Kopfbereich: weißer Header + Logo-Größe + roter Markenstreifen */
.container-header,.header.container-header,.header{
  background:#ffffff !important;
  border-bottom:4px solid var(--esv-red);
}
.container-header *{color:#1f1f1f;}
.navbar-brand img{max-height:74px;width:auto;}

/* Navigation */
.container-nav{background:#fff;border-bottom:1px solid #e9e9e9;}
.container-nav .nav-link{color:#222;font-weight:600;}
.container-nav .nav-link:hover{color:var(--esv-red);}
.container-nav .nav-item.current>.nav-link,
.container-nav .nav-item.active>.nav-link{
  color:var(--esv-red);
  box-shadow:inset 0 -3px 0 var(--esv-teal);
}

/* Überschriften mit dezentem Teal-Akzent */
h1,h2,h3{color:#1f1f1f;}
.item-page h1,.item-page h2,
.page-header h1,.page-header h2,
.blog .page-header h2{
  border-bottom:3px solid var(--esv-teal);
  padding-bottom:.35rem;
}

/* Modul-/Card-Titel im Markenstil */
.card-header{
  background:var(--esv-teal);
  color:#fff;
  font-weight:600;
}

/* Breadcrumb ("You are here …") ausblenden */
.mod-breadcrumbs{display:none !important;}

/* Artikel-Info-Block ("Details" + Zugriffe/Hits-Zähler) ausblenden */
.article-info{display:none !important;}

/* Webcam-Karten */
.webcam-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:.9rem;
  margin:1.2rem 0;
}
.webcam-card{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.85rem 1rem;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  text-decoration:none !important;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.webcam-card:hover{
  border-color:var(--esv-red);
  box-shadow:0 6px 16px rgba(229,50,44,.18);
  transform:translateY(-2px);
}
.webcam-card .wc-name{color:var(--esv-red);font-weight:700;}
.webcam-card .wc-desc{color:#666;font-size:.88rem;}

/* Bildergalerie: Raster + CSS-Lightbox */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:.55rem;
  margin:1.2rem 0;
}
.gallery-grid a{display:block; overflow:hidden; border-radius:6px; line-height:0;}
.gallery-grid img{
  width:100%; height:130px; object-fit:cover; display:block;
  cursor:zoom-in; transition:transform .25s;
}
.gallery-grid a:hover img{transform:scale(1.07);}
.lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.88);
  display:none; align-items:center; justify-content:center; padding:2rem;
  cursor:zoom-out;
}
.lightbox:target{display:flex;}
.lightbox img{max-width:96%; max-height:96%; border-radius:6px; box-shadow:0 6px 40px rgba(0,0,0,.6);}

/* Footer */
.container-footer{background:#262626;}
.container-footer,.container-footer p{color:#cfcfcf;}
.container-footer a{color:#fff;}
.container-footer a:hover{color:var(--esv-teal);}
.footer-brand{text-align:center; padding:.4rem 0;}
.footer-brand p{margin:.25rem 0;}
.footer-nav{display:flex; flex-wrap:wrap; gap:.35rem 1.3rem; justify-content:center; margin-top:.5rem;}
.footer-nav a{color:#e0e0e0; font-weight:600;}
.footer-nav a:hover{color:var(--esv-teal);}