body { margin:0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#f0f0f0; color:#333; }
a { text-decoration:none; color:inherit; }

/* Header */
header.mainHeader {
  background:#1b1b1b;
  color:#fff;
  padding:10px 20px;
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 2px 5px rgba(0,0,0,0.3);
  transition: all 0.5s ease;
}
.header-left {
  display:flex;
  align-items:center;
  gap:10px;
  transition: all 0.5s ease;
}
.header-left img {
  height:50px;
  opacity:0;
  transition: opacity 0.5s ease;
  filter:
    drop-shadow( 1px  1px 1px #fff)
    drop-shadow(-1px  1px 1px #fff)
    drop-shadow( 1px -1px 1px #fff)
    drop-shadow(-1px -1px 1px #fff);
}
#headerText {
  display:inline-block;
  transition: transform 0.5s ease;
  margin-left:-80px;
}
nav { display:flex; gap:30px; flex-wrap:wrap; }
nav a { font-weight:500; white-space: nowrap; transition: color 0.3s; }
nav a:hover { color:#e63946; }

/* Hamburger */
.hamburger { display:none; background:transparent; border:none; cursor:pointer; padding:6px; }
.hamburger svg rect { fill:#fff; transition: all 0.3s; }

/* Banner */ 
.banner {
  position: relative;
  height: 400px; /* Achtung: die Höhe wird in den Folgeseiten überschrieben, vom typoscript */
  /*background: url(https://www.jc-bietigheim.de/template2025/jcb_halle.jpg) center calc(100% - 31%) / cover no-repeat;*/
  background: url(https://www.jc-bietigheim.de/template2026/verein/fullHD/202605_Dojo_Homepage.jpg) center calc(100% - 11%) / cover no-repeat; /* Achtung: wird in den Folgeseiten überschrieben, vom typoscript */
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
}
.banner-logo {
  position: absolute;
  top:20px;
  left:20px;
  max-width:190px;
  height:auto;
  filter:
    drop-shadow( 2px  2px 1px #fff)
    drop-shadow(-2px  2px 1px #fff)
    drop-shadow( 2px -2px 1px #fff)
    drop-shadow(-2px -2px 1px #fff);
  transition: all 0.5s ease;
}
.banner h1 {
  font-size:3em;
  font-weight:bold;
  margin:0;
  text-align:center;

  /*text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;*/
 
  -webkit-text-stroke: 6px #000;
  paint-order: stroke fill;

  padding:0 10px;
}

/* Section Titles */
.section-title { text-align:center; margin:50px 0 30px 0; font-size:2.2em; color:#1b1b1b; position:relative; }
.section-title::after { content:''; display:block; width:60px; height:4px; background:#e63946; margin:10px auto 0 auto; border-radius:2px; }

/* Swiper */
.swiper { width:90%; max-width:1000px; margin:0 auto 60px auto; border-radius:10px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.swiper-slide { position: relative; color:#fff; text-align:center; }
.swiper-slide img { width:100%; height:500px; object-fit:cover; filter: brightness(0.7); transform: scale(1.0); }
.swiper-slide p { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-size:1.2em; max-width:80%; background:rgba(0,0,0,0.5); padding:15px 20px; border-radius:10px; }
.swiper-button-next, .swiper-button-prev { color:#fff; }

/* Departments */
.departments-grid { display:flex; justify-content:space-between; flex-wrap:wrap; width:90%; max-width:1200px; margin:0 auto 60px auto; }
.department-card { background:#fff; border-radius:12px; overflow:clip; cursor:pointer; box-shadow:0 5px 15px rgba(0,0,0,0.1); flex:1 1 180px; margin:10px; margin-top:20px; transition: transform 0.4s, box-shadow 0.4s; text-align:center; position:relative; }
.department-card img { width:100%; height:120px; object-fit:cover; }
.department-card h3 { margin:2px 0; font-size:1.2em; color:#1b1b1b; position:relative; z-index:1; }
.department-card .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.65); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-size:0.95em; opacity:0; transition:opacity 0.3s ease; }
.department-card:hover .overlay { opacity:1; }
.department-card .mobile-text { display:none; margin:10px; font-size:1em; color:#333; }

/* News */
.news-section { width:90%; max-width:1000px; margin:0 auto 60px auto; }
.news-item { background:#fff; padding:20px; border-left:6px solid #e63946; margin-bottom:20px; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.news-item:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.news-item h4 { margin:0 0 10px 0; }
.news-item p { margin:0; }

/* Footer */
footer { background:#1b1b1b; color:#fff; text-align:center; padding:30px 40px; font-size:0.95em; }
footer .footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-bottom:15px; }
footer .footer-links a { color:#fff; font-size:0.9em; transition: color 0.3s; }
footer .footer-links a:hover { color:#e63946; }

/* Responsive */
@media(max-width:768px){
  nav { display:none; flex-direction:column; background:#1b1b1b; position:absolute; top:100%; left:0; width:100%; padding:10px 0; gap:20px; font-size:1.2em; }
  nav.open { display:flex; }
  .hamburger { display:block; background:transparent; border:none; cursor:pointer; padding:6px; }
  .departments-grid { flex-direction:column; }
  .banner-logo { top:10px; left:50%; transform:translateX(-50%); max-width:120px; }
  .banner h1 { font-size:2em; }
  .department-card { flex:1 1 250px; }
  .department-card img { height:190px; }
  .department-card .overlay { display:none; }
  .department-card .mobile-text { display:block; }
}


/* cookie*/
/* keine weiteren informationen */
.cc_more_info {
  display: none;
}
/* kein link symbol im ok button */
body > div.cc_banner-wrapper > div > a::before {
  content: none !important;
}
/*.cc_banner-wrapper {
    max-width: calc( 100vW - 2em );
}*/

.cc_banner-wrapper {
  font-size: 0;
}

/* Schriftgröße für Kindelemente wiederherstellen */
.cc_banner-wrapper * {
  font-size: 16px; /* oder dein gewünschter Wert */
}