/* Header */

/* Hero / Header-Bild — immer vollständig sichtbar */
header {
  width: 100%;
  height: auto;
  overflow: hidden;
}

header img {
  display: block;
  width: 100%;
  height: auto;         /* automatische Höhe = kein Beschnitt */
  object-fit: contain;  /* immer ganz sichtbar */
}

/* Ende Header */


/* Basics */

/* Footer */
:root{--gap:2rem}
.hero-section{
  padding: 10vh 0 8vh;
}
.section-padding{
  padding: 2rem 0;
}

.site-footer{
  margin-top: 3rem;
  padding: 1rem 0;
  background: #2e4348;
  color: #ffffff;
}
.site-footer a{color:#ffffff;text-decoration:none}
.site-footer a:hover{color:#ea421e;text-decoration:none}
.card h3{margin-bottom:.5rem}
.top-bar, .title-bar {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* End Footer */

.fettrot {  
  color: #760000;  
  font-weight: bold;
}

.fettblau {  
  color: #2e4348;  
  font-weight: bold;
}

.img-left {  
  margin: 0 0 1rem 1rem; /* Abstand unten und links */
  max-width: 100%;      /* feste Maximalbreite fürs Bild */
  height: auto;
  display: block;  
  float: left;
}

.img-right {
  float: right;
  margin: 0 0 1rem 1rem; /* Abstand unten und links */
  max-width: 100%;      /* feste Maximalbreite fürs Bild */
  height: auto;
  display: block;
}

/* Ab Tablet runter: Float aufheben */
@media (max-width: 768px) {
  .img-right {
    float: none;
    display: block;
    margin: 0 auto 1rem auto; /* Bild zentriert, mit Abstand unten */
    max-width: 100%;          /* nimmt volle Breite */
  }
}

.img-middle {  
  text-align: center;  
  margin-bottom: 3px;
}

.inline-list {  
  font-size: 75%;
}


/* FARBEN */

h1, h2, h3, h5, a {
    color: #ea421e;
    }

h1 small, h2 small, h3 small, h4 small, h5 small {
    color: #ea421e;
}

h6 {
    color: #2e4348;
}

h6 small {
    color: #ea421e;
}

a {
    color: #7798a1;
}

a:hover, a:focus {
    color: #ea421e;
}

/* Galerie Styling */
.gallery .cell {
  padding: 6px; /* gleichmäßiger Abstand */
}

.gallery img {
  width: 200px;
  height: 133px;           /* feste Höhe für ein schönes Raster */
  object-fit: cover;       /* Bild wird zugeschnitten statt verzerrt */
  display: block;
  border-radius: 8px;      /* runde Ecken */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Video */
.responsive-video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}