/**
 * geopoeten.css
 *
 * Kopf, responsive Elemente, Navigation Buttons
 */

/* top right bottom left */

/* 2024-03-04 die grau hinterlegten Kästen <header>, <nav> und <footer> hatten links
 * und/oder rechts mir nicht erklärliche Ränder.
 * Die folgende Definition beseitigt diese Ränder.
 *
 * 2024-03-25 aus af-nvigation kopiert, body mit margin-top=0
 */

body {
	overflow-y: scroll;
	margin: 0;
	padding: 0;
}


/* <header> und <nav> Bereich seien prinzipiell fix, jedoch nicht in landscape Orientierung, 
 * denn dann nähmen sie wertvolle Schirmfläche weg.
 * Sie sind daher eingebettet in einen entsprechenden Kasten 
 */
 
@media (orientation: portrait) {

	body {
		margin-top: 70px;
	}
	.kastenobenfix {
		position: fixed;
		width: 100%;
		top: 0;
		margin: 0;
		padding: 0;
		/* border: 1px fuchsia solid */
	}
}

@media (orientation: landscape) {
	
	body {
		margin-top: 70px;
	}
	.kastenobenfix {
		position: fixed;	/* damit bleibt der Kastenoben auch auf dem Desktop an Ort und Stelle */
		width: 100%;
		top: 0;
		margin: 0;
		padding: 0;
	}
}

/* https://www.rtbwizards.com/helpcenter/editing/typography.html */
.contentBox2a {float: left; width: 48%; padding: 0; margin: 0 2% 0 0;}
.contentBox2b {float: left; width: 48%; padding: 0; margin: 0 0 0 2%;}

/* Text sowohl nach links als auch nach rechts schieben, ohne eine Tabelle zu verwenden 
   Lösung stammt von ChatGPT */
   
.text-teiler {
    width: 100%;
    overflow: visible; /* man möchte doch auch die Unterlängen sehen */
    /* border: 1px solid #888888; */
}

.text-teiler .links {
    float: left;
    text-align: left;
}

.text-teiler .rechts {
    float: right;
    text-align: right;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/* Gemeinsame Stile für den Container */
.spalten {
    display: flex; /* Flexbox-Layout verwenden */
    flex-wrap: wrap;
    /* border: 1px dashed red; */
}

/* Stil für die linke Spalte */
.spalte-bild {
    flex: 0 0 auto; /* Die linke Spalte wird nicht vergrößert oder verkleinert */
    overflow: hidden; /* Verhindert Überlappung von Inhalten */
   	/* border: 1px solid lightgrey; */
}

/* Stil für das Bild in der linken Spalte */
.spalte-bild img {
    /* width: 100%; /* Das Bild füllt die gesamte Breite der linken Spalte aus */
   /*  height: auto; /* Behält das Seitenverhältnis des Bildes bei */
    display: block; /* Stellt sicher, dass das Bild nicht vom Text umflossen wird */
}

/* Stil für die rechte Spalte */
.spalte-text {
    flex: 1; /* Die rechte Spalte wird so viel wie möglich vergrößert */
    overflow: hidden; /* Verhindert Überlappung von Inhalten */
   	/* border: 1px solid lightgrey; */
}

.block-variabel {
    max-width: 800px;
    width: 100%; /* Das Bild füllt die gesamte Breite der linken Spalte aus */
    height: auto; /* Behält das Seitenverhältnis des Bildes bei */
    display: block; /* Stellt sicher, dass das Bild nicht vom Text umflossen wird */
    border: 1px solid red; 
}
/* Anwendung: Video und Text nebeneinander sollen max. so breit sein wie Bilder, also 800 px*/
.block-max400 {
    max-width: 386px;
    width: 100%;
    /* border: 1px solid red;*/
}

/* Spalte links für die "umbrechende Tabelle" */
.spalte-80 {
    flex: 0 0 auto; /* Die Spalte wird nicht vergrößert oder verkleinert */
   	width: 80px;
    overflow: visible; /* alles darstellen, auch wenn Inhalt überlappen sollte */
	display: block;
	/* border: 1px dashed red; /* */
}
.spalte-110 {
    flex: 0 0 auto; /* Die Spalte wird nicht vergrößert oder verkleinert */
   	width: 110px;
    overflow: visible; /* alles darstellen, auch wenn Inhalt überlappen sollte */
	display: block;
	/* border: 1px dashed red; /* */
}


/* Desktop: Blocksatz */
@media screen  {
    .spalte-bild {
	    text-align:justify;	
        margin-right:1em;
	}
    .spalte-text {
	    text-align:justify;	
	}
	p,
	.contentBox2a,
	.contentBox2b 
	{
	    text-align:justify;	
	}
}


/* Mobilgeräte: linksbündig, spalte-text und -bild untereinander */
@media screen and (max-width: 600px) {
    /* Setzt beide Spalten auf volle Breite */
    .spalte-text, .spalte-bild {
        flex: 0 0 100%; /* Beide Spalten nehmen 100% der Breite auf Mobilgeräten ein */
        text-align:left;
    }
	p,
	.contentBox2a,
	.contentBox2b 
	{
		text-align:left;
	}
}

audio {
    border: 1px solid grey;
}
video {
    border: 0px solid grey;  /* hier 1px einsetzen, dann haben die Videos einen kleinen grauen Rahmen */

}


.af-box {
    border: 1px solid red;
    width: auto; 
}


/* Die farbigen Balken in Kopf- und Fußzeile laufen immer über die gesamte Monitorbreite.
 * Der Inhalt soll jedoch (aus Gründen der Lesbarkeit) max. 80em breit werden,
 * und das dann zentriert --> af-content. 
 * Die Inhalte der Seite müssen stets in diesen Container plaziert werden.
 */

.af-content {
    min-width: 100px;
    max-width: 80em;
    margin: 0 auto;		/* auto sorgt für Zentrierung wenn der Bildschirm zu breit wird */
    /* border: 1px solid yellow; */
    padding: 0;
}

/* alternativ könnte man die Zentrierung auch in die <header>, <nav> und <footer> Tags stecken?? TBD */

/*==== top right bottom left ====*/

@media screen {

	/* Basic Element Styling */
	header {
		background: #444;
		color: #fff;		/* unklar: wer erhält diese Farbe? */
		padding: 1em;
	}
	header h1 {
		background: transparent;
		color: #fff;		/* die Schriftfarbe im Header */
		margin: 0 0 0 0;
	}
	header h2 {
		background: transparent;
		color: #fff;
		margin: 0 0 0 0;
	}
	
	nav {
		background: #222222;
		padding: 8px 1em 8px 1em;	/* top right bottom left */

	}
	
	main {
		padding: 0 1em 0 1em;
	}
	
	footer {
		margin: 0;
		background: #eee;
		color: #444;
		padding: 1.5em;
	}
	footer p {
		margin: 0;
	}
	.af-ml2em {		/* responsiver Abstand zw. columns */
		margin-left:2em;
	}
}

@media screen and (max-width: 600px) {

	header {
		padding: 0.75em 10px;
		color: #fff;
		background: #444;
	}
	header h1 {
		font-size: 1.5em;
		line-height: 1em;
		margin: 0;
	}
	header h2 {
		font-size: 1.5em;
		line-height: 1em;
		margin: 0;
	}

	nav {
		padding: 4px 0.75em 4px 0.75em;	/* top right bottom left */
	}

	main, footer {
		padding-left: 4px;	/* auf kleinem Bildschirm seitliche Ränder minimieren */
		padding-right: 4px;
	}

	ul {
		padding-left: 4px;
		padding-right: 4px;
	}
	.af-ml2em {		/* responsiver Abstand zw. columns */
		margin-left:0;
	}

}



/* The Dropdown Button https://www.w3schools.com/csS/css3_buttons.asp
 * https://www.w3schools.com/css/css_dropdowns.asp
 */

	.dropbtn {
	  /* background-color: #4CAF50; /* grün */
	  background-color: #81F1F0; /* türkis #81F1F0 */
	  color: black;
	  padding: 4px;
	  font-size: 16px;
	  margin: 3px 7px 3px 0px;	/* top right bottom left */
	  border: none;		/* border: 1px solid #AAAAAA; */
	  border-radius: 5px;
	  cursor: pointer;
	}
	
	.dropbtn:hover {
	  /* background-color: #3e8e41; /* */
	  background-color: #28BEBC; /* dunkeltürkis #28BEBC */	  
	  color: white;
	}
	
	/* The container < div> - needed to position the dropdown content */
	.dropdown {
	  position: relative;
	  display: inline-block;
	}
	
	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	  border-radius: 5px;
	  z-index: 1;
	}
	
	/* Links inside the dropdown 
	 * das wird defaultmäßig in einer Serifenschrift angezeigt.
	 */
	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
      font-family: Arial, Helvetica, sans-serif;	/* verwende Font wie sonst in der Kopfzeile! */
	}
	
	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {
		/* color: #FF2266; */
		color: #E801EB;		/* neonmagenta #E801EB */	
		background-color: #f1f1f1
	}
	
	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
	  display: block;
	}
	
	/* Change the background color of the dropdown button when the dropdown content is shown 
	.dropdown:hover .dropbtn {
	  background-color: #3e8e41;
	} */


/*.af-main {
    display: table;
    table-layout: fixed;
    width: 90%;
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid #888888;
}*/