/********************** 24JAN26 10:54 *******************/
/* Letzte   Änderung am 24MAI26 COOKIES @@@@@           */
/* Voretzte Änderung am 29MAI23                         */
/* -------------------------------- Jürg Lienhard ------*/
/* Die vorliegende Version wurde am 2APR23 bei green.ch */
/* produktiv nunter https://lienhard-webdesign.ch/gmv   */
/* als 1.DEMO-Version 2APR23 erfolgreich eingesetzt und */
/* am 33.4.2023 10:40 wieder auf xampp-Entwicklungs-    */
/* umgebung für Nachbearbeitung zurückkoppiert.         */
/* Die vorliegende Version dient als Basis, weil die    */
/* heruntergeladene Version am 2.April 2023 erst nach   */
/* Korrekturen im Head-Bereich funktionierte            */
/********************************************************/
/* Gegenüber Basis-Version sind am 10APR23 noch folgende*/
/* Änderungen vorgenommen worden:                       */
/* .mehrspaltig div kapselt zusätzlich .mehrspaltig img,*/
/* und verhindert so, dass hinterlegtes Image (Foto)    */
/* Frame von .mehrspaltig (2 Columns) überschreitet.    */
/* Erweiterung mit ###10APR23### markiert               */
/*                                                      */
/* ###14APR23### Anpassung content .logo-wrapper        */
/* .logo-text logo-text h1 .wappen für über Video ge-   */
/* legte Textbox "Gianini Consulting" mit vorange-      */
/* stelltem Wappen, damit Ausgabe auch auf Apple/Safari */
/* funktioniert. Neu nicht mehr mit z-index,sondern mit */
/* top: 50%;                                            */
/* left: 50%;                                           */
/* transform: translate3d(-50%, -50%, 0); gelöst. Auf   */
/* Silvia's altem iPad mit Apple/Safari getestet. Logo  */
/* wird nicht mehr rechts seitlich von Video, sondertn  */
/* korrekt zentriert über Mitte von Video angezeigt!    */
/*                                                      */
/* ###15APR23### Neu ab 15.April 2023 nachfolgender     */
/* @media body-Bereich vollständig ausgeblendet. Dadurch*/
/* wird Text auf rechter Seite nicht mehr bei reduzier- */
/* ter Windows-Breite durch Scrollbar überdeckt!        */
/* Am 15APR23 23:30 teilweise wieder rückgängig gemacht,*/
/* Weil img z.B. auf Handy bei MysWettschwil rechts     */
/* Rand überschreitet!                                  */
/* ###16APR23### 100vw durch 100% ersetz, dadurch Text  */
/* rechts nicht mehr durch scrollbar verdeckt!          */
/*                                                      */
/* Buob Punkt 17APR23-2. Tea Green am 18.April 23 ge-   */
/* ändert, neu auch bei * und footer übernimmt Variable */
/*                                                      */
/* --main-background-color.                             */
/* ###13DEZ25### 1:1 abgeleitet aus Version gianini.ch  */
/*               Noch keinerlei Anpassungen vorgenommen */
/*                                                      */
/********************************************************/
:root {
 												 
	--main-background-color: black; /* = Gräulich neu für dean-art.ch auf black gestellt, before #043927 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
	--main-text-color: white; 	/* NEU DUNKELBRAUN, BEFORE 16DEZ25 10:34 #FFFF00; @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
	--main-text-fontsize: 1.05em;    /* = 1.05em Original, leicht auf 1.1em vergrössert am 29MAI25 11:40 &&&&&&&& */

	--sidenav-background-color: black; /* Angepasst am 18APR23 damit Übereinstimmung mit Hellgrünwunsch Buob before #043927, neu black @@@@@@@@@ */
	--sidenav-text-color: white;	   /* NEU WEISS, BEFORE 17DEZ25 10:34 #FFFF00; @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
	--sidenav-fontsize-menu: 1.20em;   /* Generelle einheitliche Text-Fontsize genutzt unter Klasse .content */

	--button-background-color:  white; /* BEFORE GRUEN #043927;, NEU DUNKELBRAUN WIE KACHELN UND TEXT-FARBE @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
	--button-text-color: black; /* @@@@@@@@@@@@@ FARBE NOCH NICHT RICHTIG @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
	--padding-site-distance: 4px;
	--h1-font-size: 1.40em; /* Generelle einheitliche h1-Fontsize   genutzt unter Klasse .content */
	--h2-font-size: 1.20em; /* Generelle einheitliche h2-Fontsize   genutzt unter Klasse .content */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* font-family: Helvetica, Arial, Helvetica, sans-serif; *** Neu ab 9FEB24 unter body gesetzt !!!          */
        /* Nur so funktioniert default festgelegte font-family: Courier für highlight.js. Wenn font-    */
	/* family hier unter * auf Ariel gesetzt wird, wird auch in highlight.js Ariel ausgegeben.      */
	/* background-color: var(--main-background-color); /* Buob Punkt 17APR23-2. ab 18APR23 neu hier */
	color: var(--main-text-color);  	  /* Neu hier übergeordnet ab 28MAR23 10:25 */
	font-size: var(--main-text-fontsize); /* Neu umbenannt am 18APR23 */
}


.mantel { /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& TEST 17JAN26 23:51 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
	background-color: black;
	border: 2px solid white;
	margin: 10px;
	padding: 10px;
}



.another-selector * {
	box-sizing: content-box;
}	

body {
	font-family: Helvetica, Arial, sans-serif; /* Neu ab 9FEB24 hier gesetzt, damit defaultmässig */
        font-weight: 100; /* NEU aAB 11JAN26 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
        /* hinterlegter Courier-Fonts bei code highlight.js nicht überschrieben wird !!!!             */
	/* ab 29DEZ25 nicht mehr genutzt background-image: url('background_sand_001D.jpg'); @@@@@@@@@ */
	background-color: var(--main-background-color); /* am 29DEZ25 19:00 wieder reaktiviert @@@@@@ */
	hyphens: auto; /* Generell mit Silbentrennung */
	/* border: 4px dashed yellow; /* NUR FUER TEST */
} @media (max-width: 600px) {
	body {
		margin: 0;
		padding: 0;
		width: 100%;   /* ###16APR23### */
		height: auto;
	}
	
	img {
		max-width: 100%;
		height: auto;	
	}

	.content .logovideo	{
		width: auto;
		height: 100vh;
		max-width: 100%; 
		max-height: 100%;
	}
}

.courier-text {
	font-family: Courier;
}


/* https://elbnetz.com/elemente-nur-mit-css-ein-und-ausblenden/   */
#akkordeon:not(:target) .inhalt,
#akkordeon:not(:target) .hide,
#akkordeon:target .show {display: none;}
#akkordeon:target .inhalt {display: block;}
.inhalt {
	/* box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); */
	margin:  0px; /* before 5px  */
	padding: 0px;
        font-size: 0.85em; /* Neu so ab 02JUN25 &&&&&&&&&& Schriftgroesse mit Standardschrift 1.05em uebereinstimmend */
}
.show, .hide {
	/* float: right;		/* positioniert Button auf der rechten Seite / ganz neu von mir */
	margin:  2px 2px 2px 2px;  	/* ganz neu von mir */
	padding: 2px 2px 2px 6px;  	/* ORIGINAL padding: 10px; innerhalb Button*/
	text-decoration: none; 		/* Button-Text ohne Underline, ganz neu von mir */
	/* background: rgb(254, 164, 0); zuvor */
	background: var(--button-background-color); /* rgb(51, 153, 255);  /* geändert am 18APR23 */
	box-shadow: none; /* box-shadow:none!important; ORIGINAL */
	color: var(--button-text-color); /* Neu ab 18APR23       */
	font-weight: 300; 	/* von mir bold durch 300 ersetzt    */
	border-radius: 3px;	/* von mir ganz neu eingeführt       */
	border: 1px solid var(--main-text-color);
}

.show:hover, .hide:hover {
	background: rgb(255, 214, 118);
	color: #000; 				/* color:#fff!important; ORIGINAL */
	transition: 0.2s all ease-in-out; 	/* transition:0.2s all ease-in-out!important; ORIGINAL */
}



/* 29DEZ25 Neu eingebunden für DREAMTIME AUSTRALIA Permanent Marker Fonts von Google @@@@@@@@@@ */
.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

/* 29DEZ25 Neu in /fonts abgespeichert für DREAMTIME AUSTRALIA Borealis_Regular Fonts im Verzeichnis /fonts als .tth-Datei hinterlegt @@@@@@@@@@ */
@font-face {
  font-family: 'Borealis_Regular'; /* Schrift speziell nur für DREAMTIME AUSTRALIA */
  color: white;
  src: url('fonts/Borealis_Regular.ttf') format('truetype');
  font-weight: normal;
  font-style:  normal;
}


hr { /* Trennlinie neu seit 28MAR23 13:45 */
	height: 3px;
	border-width: 0;
	background-color: var(--main-text-color);
}

table {    
  margin: 12px 0 10px 0;
  border-collapse: collapse;    
  box-shadow: 4px 4px 4px silver; 
}

/* Luft für Tabellen */
table th, td, tbody {
  padding: 5px;
  border: 1px solid silver;  
}

@media screen and (max-width: 600px) {
  table, th, td {
    font-size: 12px;
    padding: 5px;
  }
} 


/****************************************** 10MAR23 ***/
/* Neues Einblend-Seiten-Menu von easy tutorial 	*/
/* https://www.youtube.com/watch?v=zmun7JzWGPE&t=0s 	*/
/******************************************************/
#sideNav {
	width: 200px;
	height: 100vh;
	position: fixed;
	right: -200px;
	top: 0;	
	/* background: #9999B2; zuvor  */
	background: var(--sidenav-background-color); /* before 18APR23 rgb(51, 153, 255); */
	z-index: 2;
	transition: 1.0s; /* Verzögerte Einblendung */
}

nav ul li {
	list-style: none;
	margin: 30px 10px;
        /* before 02JUN25 &&&& margin: 30px 10px 30px -20px; /* before margin: 30px 10px; */
} @media (max-width: 1000px) {
	nav ul li { 
		margin: 15px 10px 15px 0px; /* before margin: 30px 10px; */
	}
}


nav ul li a {
	text-decoration: none;

	/* color: black; /* ORIG color: */
	font-size: var(--sidenav-fontsize-menu);
	color: var(--sidenav-text-color); /* Anweisung vollständig neu 18APR23 */

/************ Effekt am 2APR22 wieder ausgeblendet  	
	-webkit-text-stroke: 1px black;
	color: transparent;
***************/	
}


/* Übergeodneter Sandwitch-Menu-Button */
/* ------------ inkl. Mobilphoe-Format */
#menuBtn {
	width: 50px;
	position: fixed;
	right: 15px;
	top: 5px;
	z-index: 3;
	cursor: pointer;
} @media (max-width: 1000px) {
	#menuBtn { 
		width: 30px;
	}
}

.closeBtn {
	width: 50px;
	position: fixed;
	right: 18px;
	top: 5px;
	z-index: 4;
	cursor: pointer;
} @media (max-width: 1000px) {
	.closeBtn { 
		width: 30px;
	}
}

/* ENDE 1:1 Original Einblend-Seiten-Menu ***************************************/
/* Nachfolgen von mir ab 6MAR23 easy tutorial erweitert *************************/	
#logoIkon {
	width: 5%;
	position: fixed;
	left: 25px;
	top: 35px;
	z-index: 2;
	cursor: pointer;
}
/* ENDE Neues Einblend-Seiten-Menu von easy tutorial ************/
	
	


/* Style the top navigation bar von w3schools */
.topnav {
  overflow: hidden;
  background-color: #333;
  /* border: 2px dashed green; /* NUR FUER TEST ### von mir eingefügt am 10MAR23 12:40 ### */
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.header {
  background-color: #aaa;
  padding: 10px;
  /* height: 100px; /* Should be removed. Only for demonstration */
}

/* Style the content */
.content {
	/* background-color: var(--main-background-color); @@@@@@@@@@ 16DEZ25 10:15 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
	padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance);
  	/* Neu ab 28MAR23 12:50 Trennung generell übergeordnet .content (nicht mehr body, sonst wird logo-text getrennt */
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    text-align: justify; /* --> Erzwingt BLOCKSATZ !!!! */
	/* border: 4px dashed blue; /* NUR TEST */
} @media (max-width: 600px) {  /* Handy-Portrait ########## NEU ab 15APR23 16:45 ########### */
	.content 	{
		left: 
		/* border: 4px dashed green; /* NUR TEST */	
	}
}


.content h1 {
	padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance);
	font-size: var(--h1-font-size);
} @media (max-width: 600px) {  /* Handy-Portrait */
	.content h1	{
		padding-top: 30px; /* Platz für menuBtn / closeBtn auf Mobilefone oben, sofern nicht Titel umgebrochen ############ OPTION */	
	}
}

.content h2 {
        margin: 10px 2px 2px 2px;;
	/* before 02JUN25 &&&&& padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance); */
	font-size: var(--h2-font-size);
	hyphens: auto;
    /* border: 4px dashed green; /* NUR TEST */ 	
}

.content p {
	padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance);
		/* border: 4px dashed white; /* NUR TEST */
} @media (max-width: 600px) {  /* Handy-Portrait */
	.content p	{
		/* border: 4px dashed white; /* NUR TEST */
	}
}


.content ul {
  margin-bottom: 12px;
  list-style-image: url(reddot.gif);
  font-size: 1em;
  line-height: 1.4;
  margin-left: 1.2em;
  padding-left: 1.2em;
}

.content ol {
  margin-bottom: 12px;  
  font-size: 1em;
  line-height: 1.4;
  margin-left: 1em;
  padding-left: 1em;
}

.content form {
	/* background-color: var(--main-background-color); @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 16DEZ25 10:10 @@@@@@@@@@@@@@@@@@@@ */
	padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance);
	
	/* border: 2px dashed green; /* NUR FUER TEST */
}

/* NEU 29MAR23 19:15 FUER FOTO-AUSGABE */
/* ------------ inkl. Mobilphoe-Format */
.content .foto {	/**************************** AB 3APR23 NICHT MEHR GENUTZT */
padding-bottom: 2px var(--padding-site-distance) 10px var(--padding-site-distance);
	width: 100%;  /* ORIG before 15APR23 width: 100vw; */
	height: auto; /* ORIG before 15APR23 height: 85vh; */
	object-fit:contain;
	/* border: 4px dashed green; /* NUR TEST */
} @media (max-width: 600px) {  /* Handy-Portrait */
	.content .foto	{
		width: 100%; /* nicht 100vw, da so rechts überlappend */
		height: auto;
		/* border: 4px dashed yellow; /* NUR TEST */
	}
}

.content .logovideo	{ /*** NUR VERSUCH 26MAR23 10:54, 15APR23 UNKLAR OB NOCH GENUTZT ***/
	width: 100%;
	height: 100%;
	object-fit: cover;  /* COVER GANZ WICHTIG, DAMIT VIDEO BILDSCHIRM (BESCHNITTEN) VOLL BEDECKT !!! */
}


/* Video-Ausgabe Breite 86% ----------------------------------------------- */
/* ------------------------------------------------- inkl. Mobilphoe-Format */
.content .contentvideo-86	{ /* Nur bei Harry Steinmann genutzt !!!!!!!!!!!!!!!!!!!!!!!!! */
	width: 86%;
    object-fit: fill;
	/* border: 4px dashed yellow; */
}
  @media (max-width: 600px) {  /* Handy-Portrait */
	.content .contentvideo-86	{
		width: 100%; /* nicht 100vw, da so rechts überlappend */
		height: auto;
		/* border: 4px dashed blue; */
	}
}

/* Video-Ausgabe Breite 60% -------------------------------------- */
/* ----------------------------------------- inkl. Mobilphoe-Format */
.content .contentvideo-60	{ /* Nur bei Wasser in Wettswil genutzt */
	width: 60%;
    object-fit: fill;
	/* border: 4px dashed blue; */
}
  @media (max-width: 600px) {  /* Handy-Portrait */
	.content .contentvideo-60	{
		width: 100%; /* nicht 100vw, da so rechts überlappend */
		height: auto;
		/* border: 4px dashed blue; */
	}
}







/* Close-Button innerhalb CMBasic-content Fotos, Videos-16/9 und Videos-4/3 */
/* ------------------------------------------------- inkl. Mobilphoe-Format */
.content .closeBtn { 
	width: 50px;
	position: fixed;
	right: 15px;
	top: 5px;
	z-index: 4;
	cursor: pointer;
} @media (max-width: 600px) { /* Handy-Portrait */
	.content .closeBtn { 
		width: 30px;
	}
}



/* Logo-Wappen innerhalb CMBasic-content Fotos, Videos-16/9 und Videos-4/3 */
/* ------------------------------------------------ inkl. Mobilphoe-Format */
.content .logo {
	width: 70px;
	position: fixed;
	left: 10px;
	top: 10px;
	z-index: 4;
	cursor: pointer;
} @media (max-width: 600px) { /* Handy-Portrait */
	.content .logo { 
		width: 40px;
	}
}
	
	
	
.logo-wrapper { /* ursprünglich bei Frau am Meer .hero */
	width: 100%;
	height: 99.9vh;
	background-image: linear-gradient(rgba(12,3,51,0.0),rgba(12,3,51,0.0)); /* BEFORE 2JAN26 ,0.3 0.0-> TOTAL TRANSPARENT*/
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* border: 4px dashed red; Betrifft umrandung ganzer StartUp-Video */
}


.content .logo-wrapper .logo-text {
	text-align: left; /* 2JAN26 bevor center; */
	position: absolute;
        hyphens: none;	
	bottom: 1%; 	/* Am 29MAI25 12:20 original 50% durch 20% ersetzt, am 12JAN26 top: 20%; durch bottom 20% ersetzt WUNSCH DEAN &&&&&&& */
	left:  50%;	/* z-index, der unter Apple/Safari nicht funktioniert 	 */
	transform: translate3d(-50%, -50%, 0);	/* getestet auf Silvias iPad */
	width: 90%; /* ORIG BEFORE 2JAN26 90%, so belassen*/
        margin-bottom: 10px; /* VON TOP AUF BOTTOM GESETZT WUNSCH DEAN 12JAN26 12:00 BRINGT ES SO NICHT &&&&&&&&&&&&&&&&&&&&&&& */
	/* padding: 0px 10px 5px 10px; /* Innenrand */
        padding: 10px;
	border-radius: 1.0vw;
	background: rgba(0,0,0,0.5);
	border: 0px solid white; /* NEU ab 2JAN26 ohne Border-Rahmen */
	/* border: 4px dashed yellow; /* NUR FUER TEST */
} @media (max-width: 600px) { /* Handy-Portrait */
	.content .logo-wrapper .logo-text {
	border-radius: 20px;
	/* border: 4px solid red; /* NUR FUER TEST */
    }
}

/* Versuch 11JAN26 23:12 */
.logo-text h7 {
	font-family: 'Borealis_Regular', serif; color: white; font-size: 3.7vw;
	margin-left: 0px; 
	padding: 10px 0px 0px 0px; /* ORIG BEFORE 1MAI23 padding: 20px 0px 0px 0px; */
	top: left; /* BEFORE 2JAN26 ORIG center; */
	text-align: left;
	color: rgba(255,255,255, 1.0); 
	font-weight: 600; /* Dicke der Schrift */
	transition: 0.5s;
	/* border: 2px solid red; /* NUR FUER TEST */	
} @media (max-width: 600px) { /* Handy-Portrait */
	.logo-text h7 {
	font-size: 12.7vw;		
	/* border: 2px solid green; /* NUR FUER TEST */
    }
}


.logo-text h1 {
	font-family: Arial; /* xxx 14JAN24 , ab 2JAN26 Tahoma durch Arial ersetzt*/
	font-size: 6.7vw;
	margin-left: 0; 
	padding: 10px 0px 0px 0px; /* ORIG BEFORE 1MAI23 padding: 20px 0px 0px 0px; */
	top: left; /* BEFORE 2JAN26 ORIG center; */
	text-align: left;
	color: rgba(255,255,255, 1.0); 
	font-weight: 600; /* Dicke der Schrift */
	transition: 0.5s;
	/* border: 1px dashed yellow; /* NUR FUER TEST */	
} @media (max-width: 600px) { /* Handy-Portrait */
	.logo-text h1 {
	font-size: 4.7vw;		
	border: 4px solid yellow; /* NUR FUER TEST */
    }
}

.logo-text h1 b { /* xxx 14JAN24 ****************/
	color: #00FF00;       /* giftig grün    */
} @media (max-width: 600px) { /* Handy-Portrait */
	.logo-text h1 b {
	    color: #00FF00;	 /* giftig grün */	
	}
}

.logo-text b { /* xxx 14JAN24 *******************/
	color: #00FF00;	      /* giftig grün    */
} @media (max-width: 600px) { /* Handy-Portrait */
	.logo-text b {
	    color: #00FF00;	 /* giftig grün */	
	}
}



.logo-text h1 .wappen {
	position: absolute;
	left: 5px;
	top: center;
	/********width: clamp(2.2rem, -0.875rem + 8.333vw, 5.5rem); before ORIG */
	width: 7.8vw;
	height: auto;
	padding: 0px 0px 0px 0px; /* ORIG BEFORE 1MAI23 padding: 2px 0px 0px 0px; */
	margin: 0px 30px 0px 20px;
	display: inline;
      /* border: 1px dashed red; /* NUR FUER TEST */	
} @media (max-width: 600px) { /* Handy-Portrait */
	.logo-text h1 .wappen {
		margin: 0px 15px 0px 5px; /* NEU AB 1MAI23 */
		width: 10.0vw;
		/* border: 2px dashed white; /* NUR FUER TEST */
	}
}

/************** ausgeblendet, da nicht erwünscht ev. für mein wettswil
.logo-text h1:hover {
	-webkit-text-stroke: 2px #fff;
	color: transparent;
}	
**************************/

/************ before *****

.logo-text a { 
	text-decoration: none;
	display: inline-block;
	color: red;
	font-size: 24px;
	border: 2px solid #fff;
	padding: 14px 70px;
	border-radius: 50px;
	margin-top: 20px;
}	

***************/
.logo-text a { /* Text unterhalb Logo-Grossschrift */
	padding: 5px;;
	margin-top: 0px;
	text-decoration: none;
	display: inline-block;
	color: white;
	font-size: 2.0vw; /* before ORIG font-size: 24px; */

	border: 1px solid #fff;
	border-radius: 10px;
} @media (max-width: 600px) { /* Handy-Portrait */
	.logo-text a {
		font-size: 4.0vw;
		/* border: 4px dashed yellow; /* NUR FUER TEST */
	}
}


/* Style the footer */
.footer {
	position: relative; /* Am 15APR23 23:39 von sticky wieder auf relative */
	/* bottom: 0;          geändert. Belegt zuviel Platz auf Screen unten  */       
	padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance);
	hyphens: none; /* Worttrennung im Footer gesperrt */
	/* padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance); */
	/* background-color: var(--main-background-color); @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ NEU AB 16DEZ25 10:10 @@@@@@@@@@ */
	/* border: 4px dashed yellow;  /* NUR FUER TEST */
}


.mehrspaltig { 
	padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance);
	columns: 2 20em;  /* columns: 5 10em;   */
	/* border: 4px dashed blue;	/* VON MIR ERGAENZT FUER SUBWINDOWS */
}

.mehrspaltig h1 {
	padding: 0;
	/* border: 4px dashed blue;  /* NUR FUER TEST */
}

.mehrspaltig h2 {
	padding: 0;
	/* border: 4px dashed red;  /* NUR FUER TEST */
}

.mehrspaltig p {
	padding: 0;
	/* border: 4px dashed yellow;  /* NUR FUER TEST */
}

.mehrspaltig img {
	margin: 5px;
	padding: 2px var(--padding-site-distance) 2px var(--padding-site-distance);
	max-width: auto;
	/* border: 4px dashed blue; */
}

.mehrspaltig div { /* Neu eingeführt am 10APR23 speziell für Image-Kapselung, damit image      */
	float: left;   /* innerhalb Frame bleibt (genutzt 1x Hist.Portraits geschützter Bereich    */
	               /* Ursprünglich nur in gmv23_privat, ab 10.April 23 auch hier ###10APR23### */
	/* border: 4px dashed green; /* NUR FUER TEST */
}


/*********************************************** 10MAR23 ***/
/* Neue Image-Gallery mit 45Grad-Image-Dreh beim Anklicken */
/* https://www.youtube.com/watch?v=sHG3Sf6XN9g             */
/***********************************************************/
.img-gallery {
    width: 80%;
    /* float: left; /* Versuch vom 15JAN26 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
    margin: 20px auto 50px; 
	/* von mir margin: 10px 10px 10px 10px; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
}

.img-gallery img {
    width: 100%;
    cursor: pointer;
	border: 1px solid var(--main-text-color);
	border-radius: 5px;
}

.img-gallery img:hover {
    transform: scale(0.8) rotate(-15deg);
    border-radius: 20px;
    box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2;
 }

.full-img {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.full-img img {
    width: 90%;
    max-width: 1000px;
}

.full-img span {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 30px;
    color: #fff; /* weiss */
    cursor: pointer;
}

.cookie-container {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #2f3640;
  color: white;
  padding: 4px 8px; /* Orig 32 */
  /* box-shadow: 0 -2px 16px #2f3640; */
  /* box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39); */
  border: 5px solid red; /* 24JAN26 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ NUR TEST */
  transition: 300ms;
}

.cookie-container.active {
  bottom: 0;
}

.cookie-container p {
  color: white;
}

.cookie-container a {
  color: white;
}

.cookie-btn {
  background: #e84118;
  border: 0;
  color: #f5f6fa;
  padding: 12px 14px;
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.cookie-btn-no { /* momentan nicht genutzt */
  background: #e84118;
  border: 0;
  color: #f5f6fa;
  padding: 12px 14px;
  font-size: 18px;
  margin-top: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  cursor: pointer;
}