div#main { max-width: 100%;}

/* Anmiation verbergen als default */
div#fz { display: none;}


div#text-slide { font-size: 100%; background-color: rgba(240,248,204,0.5);;padding: 0.2em; border-radius: 0.7em; text-align: center; }
div#text-slide #ti { color: #666; background-color: #666; vertical-align: bottom;}
div#text-slide  #grid { display: grid; }
#grid > div { opacity: 0; grid-area: 1/1/2/2; padding: 0 1em;}
div#btns { display: inline-block; width: 100%; text-align: center; padding-bottom: 0.25em;}
div#btns button { display: inline-block; border: solid 1px transparent; background-color: rgba(255,255,255,0.5); color: #666; height: 2em; width: 2em; cursor: pointer;}

#text-slogan #itm { display: inline-block; background-color: #119CD4; color: white; padding: 0 1em; margin: 0.5em 0; font-size: 75%;}
#text-slogan #slgn { display: block; background-color: #B4DC00; color: #004B32; padding: 0 0.5em; margin: 0.25em 0em; }
#slgn .highlight { color: white;}


/* Links */
div#main a { color: #004B32; text-decoration: none;  display: inline-block; background-color: rgba(255,255,255,0.5); padding: 0 0.5em; border-radius: 10px;}

div#text-sub a, div.mini-text a  { letter-spacing: 1px;}

@media only screen and (min-width: 1000px) {
    #text-slogan #slgn { display: inline-block;}
}


@media only screen and (min-width: 800px) {
    body {
	background-image: url("../media/layout/back A.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    }
    div#rr-header { display: none; text-align: center; }

}




/* ================================================================================
   Grosse Bildschirme, mit Hintergrundbild
   ================================================================================ */

@media only screen and (min-width: 800px) {
    .quer, .mini, .text-more, #img-portrait { display: none; }

    div#bar-top { display: none; }
    #text-slogan #mezh { display: inline-block;}
    div#main {
	margin: 0; min-height: 100vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
    }

    div#text-slogan {
	background-repeat: no-repeat;
	background-position: top left;
	background-image: url("../media/icons/glp_transparent.png");
	background-size: 5vw;
	background-position: 20px 20px;
    }

    #grid-main { height: 100vh; }

    div#text-slide h5 { font-size: 125%; letter-spacing: 3px; margin: 1em 0 0 0;}
    #grid p { min-height: 6em; }

}

/* --------------------------------------------------------------------------------
   eher hochformat
   -------------------------------------------------------------------------------- */	

@media only screen and (min-width: 800px) and (max-aspect-ratio: 5/4){

    div#text-slogan {
	width: 40vw; height: 18vw; text-align: center;
	font-size: 4vw; padding: 1em 2em; margin: 0;
    }
    
    div#main {
	background-image: url("../media/pict/portrait A2 transparent.png");
	background-size: 62vw;
	background-position: top right;
    }

    div#text-slide {  width: 50vw; margin-left: 2vw;}
    
    .mini-text, #text-name, #text-fkt { width: 45vw; padding: 1em 2vw; text-align: center;}
    #text-name { font-size: 150%; font-weight: bold;}
    #text-fkt a { margin: 0.25em;}

}

/* --------------------------------------------------------------------------------
   klar Querformat
   -------------------------------------------------------------------------------- */	


@media only screen and (min-width: 800px) and (min-aspect-ratio: 5/4){
    div#text-slogan {
	width: 95%; height: 10vw; text-align: center;
	font-size: 4vw; padding: 0.5em 0.5em 1.5em 0.5em; margin: 0;
    }
    
    div#main {
	background-image: url("../media/pict/portrait A transparent.png");
	background-size: 80vh;
	background-position: bottom right;
	padding-bottom: 4em;
    }

    div#text-slide {  width: 40vw; margin-left: 2vw;}

    .mini-text, #text-name, #text-fkt { width: 40vw; padding: 0.5em 2vw; text-align: center;}
    #text-name { font-size: 150%; font-weight: bold;}
    #text-fkt a { margin: 0.25em;}

}

@media only screen and (min-width: 1500px) and (min-aspect-ratio: 5/4){
    div#text-slide  { margin-left: 12vw;}
    .mini-text, #text-name, #text-fkt { margin-left: 10vw;}
}


/* ================================================================================
   Kleine Bildschirme, rein vertikales Layout	
   ================================================================================ */



@media only screen and (max-width: 799px) {
    div#main { margin: 4em 0; font-size: 100%; width: 100%; }
    div#main div.text-more { text-align: center; padding-bottom: 2em; }
    div#main div.text-more a.more { display: inline-block; padding: 0.25em 1em; background-color: #004B32; color: white;}

    div#text-slogan { font-size: 5vw; padding: 1em 2em; font-weight: bold; text-align: center;  }
    
    
    /* Slide Texte */
    div#main-grid div#text-slide {margin: 1em 2em 2em 2em; }
    #grid  { min-height: 12em; }
    div#text-slide p { padding: 0 1em;  }
    div#text-slide h5 { padding: 0 1em; font-size: 100%;}



    
    /* mini text einblenden */
    div.mini-text { display: block; padding: 2em 0 1em 0; text-align: justify;}

    /* Rand links/rechts für texte */
    div#main-grid > div { margin: 0 2em; } 

    /* quer Bilder als Trenner */
    div#main-grid > div.quer { margin: 1em 0; display: block;}
    div#main-grid > div.quer img { width: 100%;}

    /* Portrait und Beschreibung am Schluss */
    div#main-grid > #img-portrait {
	margin: 0; 
	background-repeat: no-repeat;
	background-image: url("../media/pict/portrait A transparent.png");
	background-size: 100vw;
	height: 100vw;
    }

    div#text-name { padding: 1em 1em 0 1em; text-align: center; font-weight: bold;}
    div#text-fkt { padding: 0.5em 1em 0 1em; text-align: center;}
    div#text-fkt a { display: inline-block; padding: 0.25em 1em; background-color: #004B32; color: white; border-radius: 1em; margin: 0.25em;}
    
}