a {cursor: pointer;text-decoration: none;}
a:link{color:white;} 
a:visited{color:white;}
a:active {color:white;}
a:hover {color:white;}

/* Hover grey nur auf echten "Maus-Geräten" */
/* Auf Touch-Geräten bleibt :hover aktiv, bis ein anderes Element „hovered“ wird -> unschön */
@media (hover: hover) and (pointer: fine) {
  a:hover  {color: grey;}
}

* {
  box-sizing: border-box;
}
body, html {
	margin: 0;
	height: 100%;
	min-width: 300px;
	background-color: black;
	background-image:none;
	font-size: 18px;
	overflow-x: hidden;
	scroll-behavior: smooth;
	/* https://developer.mozilla.org/de/docs/Web/CSS/Reference/Properties/touch-action */
	touch-action: pinch-zoom; /* nur Zweifinger Zoom erlaubt */
    -ms-touch-action: pinch-zoom;   /* für alte IE / Edge * */
	/* touch-action: pan-y;  nur vertikales Scrollen erlaubt, horizontales blockiert */
	/* -ms-touch-action: pan-y;  für alte IE / Edge */  
}
#header {
	display:block;
	z-index: 0;
}
.textshadow {text-shadow: 0px 0px 0px white, 2px 2px 0px black;}

.hidden {
    opacity: 0;
	transition: opacity 1s ease;
    pointer-events: none;
}
.visible {
    opacity: 1;
	transition: opacity 1s ease;
}
/* Vollflächiger, zentrierender Flex-Container */
#mainlayer_eventfotoalbum {
  position: relative;
  display: flex;
  justify-content: center; /* horizontal zentrieren */
  align-items: center;     /* vertikal zentrieren */
  height: 100dvh; /* volle dynamische Viewport-Höhe */
  width: 100%;
}
/* Innen-Container – keine fixe Höhe nötig */
#image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
}
#swipeArea {
    position: relative;
    will-change: transform;
    /*  transform: translateZ(0);   eigene GPU-Layer */
}
#swipeArea.fade-in {opacity: 1; }
/* Wrapper ebenfalls ohne erzwungene Höhe */
#swipeArea.image-wrapper {
	position: relative;
	width: 100dvw;
	height: 100dvh;
	display: flex;
	justify-content: center;
	align-items: center;
}
#swipeArea:hover {cursor: pointer;}
#swipeArea img {
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Picture soll nicht größer als der Viewport werden */
.picture-wrap {
  position: relative;
  display: inline-block; /* passt sich Bildgröße an */
  max-width: 100%;
  max-height: 100dvh;         /* begrenze Höhe */
}
/* Das WICHTIGE: Bild responsiv ohne Verzerrung */
.picture-wrap img {
  display: block;
  width: 100%;
  height: auto;               /* <— auto! Seitenverhältnis bleibt */
  max-height: 100dvh;         /* optional: Bild nicht höher als Viewport */
  object-fit: contain;        /* Behält das Seitenverhältnis bei und passt das Bild in den Container ein, ohne es abzuschneiden - lässt bei Bedarf leeren Raum. */
}
#swipeImg {
    position: relative;
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;	
}
.swipe-left {transform: translateX(-150%);} /* Bild nach links schieben (Vorwärts) */
.swipe-right {transform: translateX(150%);} /* Bild nach rechts schieben (Zurück) */
.swipe-anim {transition: transform 0.45s ease;}

.fade-in-left {opacity: 0;transform: translateX(-100%);}
.fade-in-right {opacity: 0;transform: translateX(100%);}
.fade-in-active {opacity: 1;transform: translateX(0);transition: opacity .45s ease, transform .35s ease;}
.hidden_img {opacity: 0;}
.visible_img {opacity: 1;}

/* Text-Overlay */
#picture_description_wrapper_evt {
	position: absolute;
	bottom: 0;
	width:100%;
	text-align: center;
	padding: 0px 8px 5px 8px;
	line-height: 1.3;
	pointer-events: none;
	opacity: 0; /* Start: unsichtbar, damit transition mit fade-in laufen kann  */
	transition: opacity 1s ease;
	will-change: opacity;
	z-index: 2;
}
#picture_description_wrapper_evt.fade-in {opacity: 1;}

.picture_description_text_evt {
  font-family:"Comic Sans MS";
  color:black;
  font-size:1.0rem;  
  font-weight:bold;
  text-shadow: 0px 0px 0px black, 1px 1px 0px white;
  background-color: rgba(211, 211, 211, .5);
  border-radius:10px;
  padding: 1px 10px;
}

#toolbarContainerTopLeft, #toolbarContainerTopRight {
	display:block;
	position: absolute;
	top:0px;
	padding-top: 5px;
	visibility: visible;
}
#toolbarContainerTopLeft {left: 0px;margin-left:2%;text-align: left;}
#toolbarContainerTopRight {right:0px;margin-right:2%;}

#eventfoto_titel {
	width:80%;
	color:white;
	font-size:1.0rem;
	font-weight:bolder;
	text-align: left;
}
.toolbarContainerRight_grid {
	display: grid;
	/* Rest wird in eventalbum.funktionen.php gesetzt:
	grid-template-columns: auto auto auto auto; 
	grid-template-areas:
    "eventfoto_info_click gallery_thumbnail_evt button_fullscreen_evt button_exit_evt";
	*/	
}
/* Kein Fullscrenn on IOS */
.toolbar_isIOS {opacity: 0.2;}
.toolbar_isIOS:hover {color:white;cursor:none;}

#eventfoto_download, #eventfoto_info_click, #gallery_thumbnail_evt, #button_fullscreen_evt, #button_exit_evt {
	display: flex;
	align-items: center;
	justify-content: center;
}
#eventfoto_download {grid-area: eventfoto_download;} 
#eventfoto_info_click  {grid-area: eventfoto_info_click;}
#gallery_thumbnail_evt {grid-area: gallery_thumbnail_evt;}
#button_fullscreen_evt {grid-area: button_fullscreen_evt;}
#button_exit_evt {grid-area: button_exit_evt;justify-self: end;}

#button_back_evt, #button_forward_evt {
	position: absolute;
	font-size:1.1rem;
	font-weight:bolder;
	transform: scaleY(8); /* 1.0 = normal, >1 = strecken, <1 = zusammendrücken */
	/* background: rgba(0,0,0,0.2); */
}
.button_back_evt_container, .button_forward_evt_container {margin-top: 30dvh;margin-bottom: 30dvh;}
.button_back_evt_container {margin-left: 5dvh;margin-right: 10dvh;}
.button_forward_evt_container { margin-left: 10dvh;margin-right: 5dvh;}

.button_back_evt {
	justify-content: left; /* horizontal */
	text-align:left;	
	left: 0px;

}
.button_forward_evt {
	justify-content: right; /* horizontal */	
	text-align:right;
	right: 0px;
}
.button_more_nav {color:white;}
a.button_no_more_nav {color:red;}

#exif_layer {
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 50%;
	max-width: 80dvw;
    transform: translate(-50%, -120%);
    transition: transform 0.35s ease;
    pointer-events: none;
	background: rgba(0,0,0,0.4);
	border-radius: 12px;
	padding: 6px;	
}

#exif_layer.visible {
    transform: translate(-50%,0);
    pointer-events: auto;
}
#exif_layer:hover {cursor:pointer;}

#exif_daten {
	position: relative;
	text-align: left;
	width: 100%;
	overflow: auto;
}
.exifheadline{font-size: 0.7rem;;font-weight:bold;color: white;text-align:left;}
.exif{font-size: 0.7rem;font-weight:bold;color:#000000;background: rgba(242,241,225,1);text-align:left;}

/*  Google Icons 
https://fonts.google.com/icons?hl=de

Empfohlen: Wenn Sie Symbolnamen angeben, werden nur die erforderlichen Symbole geladen. 
im <head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=close,download,gallery_thumbnail,home,info,movie_info,open_in_full,play_circle,stop_circle,view_compact,view_compact_alt" />

@font-face in css muss deaktiviert sein
...damit 1x site laden, im network-monitor die font?kit.... downloaden und speichern z.B. font.woff2

namen müssen alphabetisch sein !
close
download
gallery_thumbnail
home
info
movie_info
open_in_full
play_circle
stop_circle
view_compact
view_compact_alt

*/

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: local(''), url('/fonts/font.woff2') format('woff2');  lokal 
} 

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  background-color: rgba(0, 0, 0, .2);
}

@media only screen and ((min-width:1080px) or (min-height:1080px)){
	#eventfoto_titel {font-size: 1.2rem;}
	.picture_description_text_evt {font-size: 1.2rem;}
	.material-symbols-outlined {font-size: 2.0rem;}
	.exif{font-size: 1.1rem;}
	#button_back_evt, #button_forward_evt {font-size:1.4rem;}
}
@media only screen and ((min-width:1404px) or (min-height:1404px)){
	#eventfoto_titel {font-size: 1.5rem;}
	.picture_description_text_evt {font-size: 1.5rem;}
	.material-symbols-outlined {font-size: 2.5rem;}
	#button_back_evt, #button_forward_evt {font-size:1.7rem;}
}