/*
.some-element:hover,
.some-element:active {
    background-color: red;  
}

via js_basics.js gibt es die class touch im HTML
.touch .some-element:hover,
.touch .some-element:active {
    background-color: blue;  
}
*/

main {margin: 0 1em;}
article p {color: light-dark(#000,#f0f0f0); /* muss wg mobile sein, warum auch immer */}
p {color: light-dark(#000,#f0f0f0)} /* */
hr.blau {background: #0255B3; height: 16px; border: none; margin: 2em 0 1em 0}
video {width: 100%;border:none;}
video[poster] {object-fit:cover; /* fill*/}
.no-js .js {display:none;}
.caption {
  font-size: .8em; 
  margin-bottom: 2em;
  color: light-dark(#000,#f0f0f0);
}

img {
  width: auto;
  max-width: 100%
}

h2 {
  color: light-dark(#040f0b, #fff); 
  text-wrap: pretty; 
}
h2 + p {
  margin-top:-1em 
}

#termine h3 {color: light-dark(#0255B3, #fff)}

h3.meta_datum {
  font-size:1em; 
  margin-top:3em;
  margin-bottom:-1em; /* MQ */
}
@media (min-width: 800px) {
  h3.meta_datum {
    margin-bottom:-2em;
  }
}  

hr.dotted {
  border: 1px dashed;
  border-color: #ddd;
  margin: 2em 0;
}

.entree {text-align: center;}
.mbs5 {margin-block-start: 5em;}
.center {text-align: center;}

/* /////////////////////////////////////////////////////////////// */

/* Mobile-First: Bilder untereinander */
.box_image {
  display: flex;
  flex-direction: column;
}

.box_image img {
  width: 100%;
  margin-bottom: 10px; /* Abstand unten zwischen den Bildern */
  object-fit: cover; /* Alternativen: contain, fill, je nach gewünschtem Verhalten */
}
.box_image figure {
    margin-top: 10px;
}
.box_image figure:first-child {
    margin-top: 0;
}
/* Ab 800px: Bilder nebeneinander */
@media (min-width: 800px) {
  .box_image {
    flex-direction: row;
  }
  
  .box_image img {
    width: calc(100% - 5px); /* 50% der Breite abzüglich 5px, um insgesamt 10px Abstand zu haben */
    margin-bottom: 0; /* Den unteren Abstand entfernen, da die Bilder jetzt nebeneinander sind */
    margin-right: 10px; /* Abstand rechts für das erste Bild */
  }
  .box_image figure {
		margin-top: 0;
	}
	.box_image figcaption {
		max-width: 380px;
	}
  /* Für das letzte Bild den rechten Abstand aufheben */
  .box_image img:last-child {
    margin-right: 0;
  }
}
a.arrow_top {
	color: #0255B3;
	position: fixed; right: 16px; bottom: 1em; 
    font-size: 2em;
	text-decoration: none;
}   
.hidden {
    display: none;
}

.visible {
    display: block;
}
.headline {font-weight: bold;} 

span.blue {color: #0255B3;}
mark.blue {padding: 2px 4px; background: #0255B3; border-radius: 4px}
a.blue {padding: 2px 4px; background: #0255B3; border-radius: 4px; color:#fff; text-decoration:none }
a.blue:hover {color:#0255B3; background:#dadada; }

.totop {
  z-index: 99; 
  width: 48px; 
  height: 48px;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background:#EEF8FD; 
  border: none;
  border-radius: 4px;
  cursor: pointer; 
  display: flex;
  align-items: center; 
  justify-content: center; 
} 

.totop:hover,
.totop:active {
  background:#dadada; 
} 
.totop:hover .svg_arrow_top,
.svg_arrow_top:hover,
.svg_arrow_top:active {
  fill: #000; 
}
/* class in der php-Variable für den im SVG-Code */ 
.svg_arrow_top {
    display: inline; 
    height: 24px;
    width: 24px;
    fill: #0255B3;; 
    margin-right: 0;
    margin-bottom: -4px; 
} 

/* #termine */
/* Navigation Styling */
.month-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
}
.month-navigation li {
	flex: 1 1 calc(33.333% - 10px); /* 3 Spalten mobil */
	text-align: center;
	margin-bottom: 10px;
}
.month-navigation a {
	display: block;
	padding: 10px;
	background-color:light-dark(#f0f0f0,#005bc2);
	color:light-dark(#000,#f0f0f0);
	text-decoration: none;
	border-radius: 5px;
	font-size: 0.9rem;
}
.month-navigation a:hover {
	background-color: #ddd;
  color: light-dark(#000,#333)
}
@media (min-width: 768px) {
	.month-navigation li {
		flex: 1 1 calc(20% - 10px); /* 5 Spalten auf größeren Geräten */
	}
}
/* Styling für Monatsüberschriften */
.month-header {
	font-size: 1.2rem;
	font-weight: bold;
	margin-top: 24px;
	margin-bottom: 16px;
  margin-left: 0; /* MQ */
	color: #0174be;
}
@media (min-width: 768px) {
  .month-header {
    margin-left: -48px; /* MQ */
  }
}  

.termin {border-bottom: 1px dashed;}
.termin {border-bottom-color: light-dark(#ddd,#666);}

h2 span a {text-decoration: none; font-size: 1rem; font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif; letter-spacing: 0;}

/* /////////////////////////////////////////////////////////////// */
article {
  margin-block-start: 2em; 
}

/* /////////////////////////////////////////////////////////////// 
flexbox für Bild und Text
*/
.wrap_img_and_text {
  display: flex;
  flex-direction: column; /* Mobile: Bild über Text */
  align-items: center;
  max-width: 100%;
}

.termin .wrap_img_and_text {margin-top: 36px}

.img_container {
  width: 100%;
  max-width: 300px;
}

.img_container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.der_text {
  width: 100%;
  color: light-dark(#000,#f0f0f0);
}

/* Desktop-Ansicht */
@media (min-width: 768px) {
  .wrap_img_and_text {
      flex-direction: row;
      align-items: flex-start;
  }

  .img_container {
      width: 40%;
      margin-right: 16px;
      margin-bottom: 0;
  }

  .der_text {
      width: 60%;
      margin-block-start: -1em;
  }
  .der_text h2 {margin-block-start: 0;}
}

.credit {font-size: smaller}
/* /////////////////////////////////////////////////////////////// */

figcaption {
  padding: 8px 8px 16px 8px;
  line-height: 1.2;
  font-size: smaller;
  color: #666;
}

/* 
class via js_basics.js 
und 
$thumb_figcaption = "<span class='zoom-message'></span>"; in fcts_veranstaltungen.php
*/
.touch .zoom-message:before {
  content: "Zum Vergrößern und Hineinzoomen: tippen!";
}

.no-touch .zoom-message:before {
  content: "Zum Vergrößern auf das Bild klicken!";
}

/* für Bilder mit JS-Popup //////////////////////////////////////// */
.js_popup figcaption {background: #ddd; padding: 16px 8px 16px 16px}

img.js_thumbnail {
    /* width: 300px;  */
    /* height: auto; */
    cursor: pointer; 
    border: 1px solid;
    border-color: light-dark(#ddd,#666);
}
.js_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* wg transform raus: display: none; */
  /* visibility: hidden; 
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease; */
  /* 2025-02-06 14:35 */
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;

  visibility: hidden; /* Versteckt, aber nimmt Platz ein */
  display: none; /* Komplett versteckt, wird per JS gesteuert */
}

.js_popup.show { 
  opacity: 1;
  transform: scale(1);
  visibility: visible;

  display: flex;
}

.js_popup-container {
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;    
}
.js_popup img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 95vw;  /* bessere Nutzung des Platzes auf kleinen Bildschirmen */
    max-height: 85vh; /* damit es nicht den gesamten Screen überdeckt */
    cursor: pointer; /* grab? */
    border-radius: 4px;
    transition: transform 0.3s ease;

    object-fit: contain; /* stellt sicher, dass das Bild nie verzerrt wird */
}

@media (max-width: 600px) {
    /* JS regelt Orientierung landscape */
    .js_popup img {
        max-width: 90vw;
        max-height: 80vh;
    }
}

.close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 2rem;
    background: none;
    color: white;
    border: none;
    cursor: pointer;
}