/* hier noch eine Erklärung */



/* Globale Def. ANFANG */
picture {
	display: flex;
}

picture img{
	width: 100%;
	height: auto;
}

section.textbox{
	display:flex;
	justify-content: center;
}

section.intro{
    display: flex;
    background-color: #e9e9e9;
    min-height: 8em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.intro h1{
  font-size: 1.8rem;
  margin: 0;
}

/*Globale Def. ENDE*/ 



/* Definitionen für Blöcke 1col - 3col */

.block1col h1, .block2col h1, .block3col h1 {
  font-size: clamp(1.4rem, 4vw + 1rem, 2.5rem); 
  font-weight: 400;
  color:#0089af;
}
.block1col h2, .block2col h2, .block3col h2 {
  font-size: clamp(1.3rem, 4vw + 1rem, 2rem); 
  font-weight: 400;
  color:#0089af;
}
.block1col h3, .block2col h3, .block3col h3 {
  font-size: clamp(1rem, 2vw + 0.8rem, 1.8rem); 
  font-weight: 400;
  color:#0089af;
}
.block1col h6, .block2col h6, .block3col h6 {
  font-size: clamp(0.8rem, 2vw + 0.5rem, 1.3rem); 
  font-weight: 400;
  line-height: 1.5;
  color:#0089af;
}
.block1col p, .block2col p, .block3col p,
.block1col li, .block2col li, .block3col li {
  font-size: clamp(0.8rem, 2vw + 0.5rem, 1.6rem); 
  font-weight: 400;
  color:#0089af;
}

/* Block 1 Spalte ANFANG */

.block1col-textarea {
  width: 100%;
}


.block1col ul, .block2col ul, .block3col ul
{padding-left: 3em;}

.block1html {
}

/* Block 1 Spalte ENDE */


/* block-bild-text Block 2 Spalten ANFANG */
/* Bild und Text bekommen fix 50 % Breite */

/* Verwendung */
.block1col,
.block2col,
.block3col {
    display: flex;
    flex-direction: row;
    overflow: visible;
    justify-content: center;
  }

/*  ------------NEU ----------------------*/

.block1col-textwrapperouter,
.block1col-imgwrapperouter{
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*padding: 1.5em;*/
	position: relative; /* für Overlay */
	overflow: hidden;
}

/* Ist nur für blockcol1 , da hier druch srcset noch das picture Tag verwendet wird*/ 
.block1col-imgwrapperinner picture img {
    width: auto;       /* macht, dass das Bild die Originalhöhe behält */
}
/* ENDE -->  Ist nur für blockcol1 , da hier druch srcset noch das picture Tag verwendet wird*/ 

.block2col-textwrapperouter,
.block2col-imgwrapperouter
 {
    flex: 1 1 50%;
	max-width: 50%;
  box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*padding: 1.5em;*/
	position: relative; /* für Overlay */
	overflow: hidden;
  }

.block2col-imgwrapperinner figure {
/*  max-width: 500px; */
  height: auto;
}

.block3col-textwrapperouter,
.block3col-imgwrapperouter
 {
    flex: 0 0 33.33%;
	max-width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*padding: 1.5em;*/
	position: relative; /* für Overlay */
	overflow: hidden;
  }  

.block1col-textwrapperouter,
.block2col-textwrapperouter,
.block3col-textwrapperouter
 {
/*  background-color: #e4d9ae; */
  padding: 1rem 0 1rem 0;
  /*overflow-y: auto;*/
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}  

.block1col-imgwrapperouter,
.block2col-imgwrapperouter,
.block3col-imgwrapperouter
{
    align-items: center;
}

.block1col-textwrapperinner,
.block2col-textwrapperinner,
.block3col-textwrapperinner
{
/*	background-color: #fdf4cf; */
	padding: 2em;
	border-radius: 0.8em;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.block1col-text,
.block2col-text,
.block3col-text {
/* width: 60%;  Einstellbar */
/*min-width: 250px; */
/*min-height: 150px;*/
background-color: transparent;
padding: 1em;
margin-bottom: 0 0 1% 5%;
border-radius: 8px;
/*box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
display: flex;
flex-direction: column;
/*justify-content: center;*/
/*align-items: center;*/
/*text-align: center;*/
box-sizing: border-box;
}

.block1col-text > ul,
.block2col-text > ul,
.block3col-text > ul {
	margin-left: 5%;
}

.block1col-imgwrapperinner,
.block2col-imgwrapperinner,
.block3col-imgwrapperinner {
/*
  width: 100%;
  height: 100%;
	position: relative;
	overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
*/
}

.block1col-imgwrapperinner figure,
.block2col-imgwrapperinner figure,
.block3col-imgwrapperinner figure {
/*  
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
*/  
}


/* Beginn Overlays */
.overlay-wrapper
 {
  position: absolute;
  /*top: 10%;
  left: 25%;
  width: 100%;
  height: 100%; */
  /*display: flex;
  flex-direction:column;
  justify-content: center; */
  align-items: flex-start;
  padding: 2em;
  border-radius: 0.8em;
  margin: 0 auto;
  z-index: 99;
  /*pointer-events: none;*/
}

.overlay-text {
  /*background-color: #004d61;
  color: white;*/
  margin: 1em;
  padding: 0.5em 1em;
/*  font-size: 1.1em; */
  pointer-events: auto; /* Falls interaktiv */
}

/* Ende Overlays */

/*  ------------NEU BIS HIERHER ----------------------*/



/* Für 3 Spalten - ist ein bisschen redundant weil sich von 2 spaltig zu 3 spaltig lediglich die
   Prozentangaben der Spalten von 50% auf 33.33% ändert ---
   gibt schöne andere Lösungen z.B. sowas:
   .block-cols {
  display: flex;
  flex-wrap: nowrap;
}

.block-cols[data-cols="2"] > * {
  width: 50%;
  flex: 0 0 50%;
}

.block-cols[data-cols="3"] > * {
  width: 33.33%;
  flex: 0 0 33.33%;
}
*/ 


/* Markdown-blockmd BEGINN */
.markdown-img {
	display: flex;
	justify-content: center;
}
/* Markdown-blockmd ENDE */

/* Buttons  ANFANG */

.linkbutton-row{
	display: flex;
	justify-content: center;
	align-items: center;
}

.linkbutton{
    text-decoration: none;
	padding: 10px;
	border:1px solid #0089af;
	border-radius:28px;
    background: #0089af;
/*    box-shadow: 0 0 5px rgba(255, 255, 255, 0);*/
    color: #fff;
    font-size:1rem;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;  	 
}

.linkbutton:hover,
.linkbutton:focus {
    background: #fff;
    color: #0089af;
    border-color: #0089af; /* optional, falls sich ändern soll */
/*    box-shadow: 0 0 5px rgba(0, 137, 175, 0.4);*/ /* optionaler Effekt */
}

/* Buttons  ENDE */


/* BEGINN TUTORIAL */

.tutorial {
	display: flex;
	align-items: center;
}

.tutorial ul {
	margin-bottom: 0;
}

.tutorial-play-button { 
  --scale: 0.75;              /* <<< hier ändern für Größe (1 = normal, 0.75 = 25% kleiner, 1.25 = 25% größer) */

  background: #c02626;
  border-radius: 50% / 10%;
  color: #FFFFFF;
  font-size: calc(1.2em * var(--scale));
  height: calc(3em * var(--scale));
  width: calc(4em * var(--scale));
  margin: calc(8px * var(--scale)) 0 calc(8px * var(--scale)) calc(6em * var(--scale));
  padding: 0;
  position: relative;
  text-align: center;
  text-indent: calc(0.1em * var(--scale));
  transition: all 150ms ease-out;
}

.tutorial-play-button:hover {
  background: #e60d0d;
}

.tutorial-play-button::before { 
  background: inherit;
  border-radius: 5% / 50%;
  bottom: calc(9% * var(--scale));
  top: calc(9% * var(--scale));
  left: calc(-5% * var(--scale));
  right: calc(-5% * var(--scale));
  content: "";
  position: absolute;
}

.tutorial-play-button::after {
  border-style: solid;
  border-width: calc(1em * var(--scale)) 0 calc(1em * var(--scale)) calc(1.732em * var(--scale));
  border-color: transparent transparent transparent rgba(255, 255, 255);
  content: ' ';
  font-size: calc(0.75em * var(--scale));
  margin: calc(-1em * var(--scale)) 0 0 calc(-0.75em * var(--scale));
  height: 0;
  width: 0;
  position: absolute;
  top: 50%;
}


/* ENDE TUTORIAL */



/* kleiner 800 px */
/* vorerst nur die 3-spaltigen Blöcke */
@media only screen and (max-width: 800px)
{ 
  .block3col{
    flex-direction: column;
  }

  .block3col-textwrapperouter, .block3col-imgwrapperouter{
    flex: 0 0 80%;
    max-width: 100%;
  }
}


/* kleiner als 600 px */
/* all: unset;   -->    alle inline styles überschreiben */
/* mit !important werden inline - style Anweisungen überschrieben */

@media only screen and (max-width: 600px)
{
  section.intro{
    min-height: 5em;
  }

  section.intro h1{
    font-size: 1.2rem;
  }

  .block3col{
    width: 100% !important;
  }  
  .block3col-textwrapperouter, .block3col-imgwrapperouter{
    flex: 0 0 100%;
  }


	.block2col {
	  flex-direction: column;
	  max-height: none;
    width: 100% !important; 
	}

	.block2col-imgwrapper img {
	  width: 100%;
	  height: auto;
	}

  .block2col-imgwrapperinner figure,
  .block2col-imgwrapperinner figure img {
  width: 100% !important;
  height: auto !important;
  }

	.block2col-textsize,
	.block2col-imgsize {
	  padding: 1em;
	}

  .block2col-imgwrapperouter,
  .block2col-textwrapperouter {
    flex: 1 1 100%;  /* volle Breite */
    max-width: 100%;
  }

 .overlay-wrapper
 {
  all: unset;
  width: 100% !important;
  position: absolute;
  left: 50% !important;
  top: 4% !important;
  transform: translateX(-50%) !important;
  align-items: flex-start;
  padding: 2em;
  border-radius: 0.8em;
  margin: 0 auto;
  z-index: 99;
  
}

.block1col-textarea{
  width: 100% !important;
  max-width: 100% !important;
}

.block1col-imgwrapperinner picture img {
    width: 100% !important;
}


.block1col-textwrapperinner,
.block2col-textwrapperinner {
  all: unset;
  width: 100% !important;
}



}