@charset "UTF-8";

/** Hans blau 	background-color: #4d99e6; **/
/** junkkari Grün background-color: #b4d333; #dffccb; **/
/** Junkkari css 2024 umschaltfunktion für Smartphone im HTML definiert **/
	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	
    body{
        background-color: #fff;
	margin: 0 auto; 
	font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
	line-height: 1.4em; text-wrap: wrap;
	}
	
    p{font-size: 1.2em; margin-bottom: .7em; padding: .3em; line-height: 1.4em; text-wrap: wrap;} /**/ 

    h1{	font-size: 3.5em;
	line-height: 2.5em;
	color: #000; 
	background-color: #ffd950;     /* gelb #FDC905; */
         border: medium solid #E21318;  /* rot */ 
	border-radius: 3px;
	font-weight: bold;
	margin-bottom: 1em;
        }

    h2{ margin-bottom: 1em; font-size: larger; border-bottom: medium solid #E21318; padding: .5em; border-radius: 3px;}

    .pro-info{ margin: 0 auto; margin-bottom: 2em;  
              text-align: center; background-color: #ffd950; border: .2em solid #E21318;
             border-radius: 3px;}
    p > .pro-info{font-size: .8em; }

    /** animation beim Überfahren der Bilder wenn ein Link drauf ist **/
    a > img:hover{ filter:grayscale(100%) }

    /* med-big wird von javascript gesucht zum austausch der Bilddimensionen */
    .med-big{border-radius: 3px;}

    a{ text-decoration: none; }
    
    /* Schalter für Messetermine */
    a.btn, pre.btn{         	
	font-size: 1.7em; line-height: 1.5em;
	background-color: #FDC905;  /* blassgrün #dffccb; */
	color: #000;
	padding: .4em;
	text-wrap: wrap ;
	}
	
    a.btn:hover, pre.btn:hover{ background-color: #E21318; color: #FDC905; }

    .black{ color: black !important; }  /* black wenn in einem Link! */
   
    .plus-link{ width: 100%;  margin-top: 1.5em; padding: .5em;
                    border: medium solid #4d99e6; border-radius: 5px; margin-bottom: 2.5em;}  /* Pluslink am Seitenende */
/*** a .btn:hover::after{content:" Ä";} a .btn:hover::before{content:"Ü ";} ***/

    div#slider{
        position: absolute; /** wird mit relative !important; überschrieben sonst klebt das ganz oben **/
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
	column-gap: .1em;
        }   
/* Slider direkt eigebunden */

/** Kleine Monitore Mobile first  (max-width: 579px) **/

    h1{font-size: 1.3em; padding: 5px; margin-top: .5em;}
    body { width: 380px; margin: 0 auto; text-align: center; margin-top: 2em;}
 
    div#slider{ grid-template-columns: (minmax(380px, 1fr));  /* nur 1 Spalte 360px abox ansonsten 260px wird mit entsprechender */
            width: 380px; overflow: visible; margin: 0 auto;  /* bekommt entsprechende Hintergrundfarbe zum Logo */
            position: absolute;
            z-index: 20; column-gap: .1em;
            }
   
    #logo210{grid-row: 1; grid-column: 1; transition: none;}
 
    #logo210 img{width: 380px; height: auto;}    /* Hintergrund passt sich in die Spalte */
    #messetermine{margin-top: 2em; margin-bottom: 1em; }
    /* #messetermine > .btn::after{content: '\<br\>' }  /* zeilenumbruch ?? */
    .abox{
        width: 380px;  /* muss das dann wieder umschalt
en auf 260px? */
        margin-top: 0;
	border:1px solid silver;
	height:70px;
	overflow:hidden;
	border-radius:3px;
	transition: height .5s ease-in-out, background-color .5s;}
    .abox:hover{
	background-color: #fff;
	height:390px;	
	transition: height .5s ease-in-out, background-color .5s;}
	
    .abox img{ margin: 0 auto; border-radius: 3px; }

    #flexContent { max-width: 360px; margin: 0 auto; text-align: center;}	
    .pro-info{font-size: large;}
    #probox{ margin: 0 auto; width: 360px; margin-top: 5px; } /* hoher Abstand wegen dem Link-Slider */

    a > .btn{font-size: 1.1em; padding: .5em;}	/* Schalter für Messetermine */
	

/* Tabletts */
@media only screen and (min-width: 550px) {
    body { width: 530px;  margin: 0 auto; text-align: center; margin-top: 2em;}
     h1{font-size: 1.9em; padding: 5px;}
    div#slider{ grid-template-columns: (minmax(260px, 1fr)); width: 530px; overflow: visible;}
    
    #logo210{grid-row: 1 / 4; grid-column: 1 / 3; transition: none; text-align: left; } /* grid reihen / spalten */
   
      	#logo210 img{width: 530px; height: auto;}
        .abox{width: 260px!important; } 
        
	#topline { background: #ccff00; height: 30px}
	
        #probox{ margin: 0 auto; margin-top: 10px; width: 100%;} /*  margin-top testen wegen #slider */
	a > .btn{font-size:1.2em; padding: 1.5em;} 	/* Schalter für Messetermine */
        }

/* Mittlere Monitore */
@media only screen and (min-width: 860px) {
	body { width: 820px;  margin: 0 auto; text-align: center; margin-top: 2em;}
	h1{font-size: 2.5em; padding: 5px;}
	
    div#slider{grid-template-columns: (minmax(260px, 1fr)); width: 790px; overflow: visible;}
    #logo210{grid-row: 1 / 4; grid-column: 1 / 3; transition: none; text-align: left; } /* grid reihen / spalten */
   	#logo210 img{width: 452px; height: 210px;}
	.abox{width: 260px!important; }
        
	#topline { background: #ccff00; height: 30px}
    	#probox{ margin: 0 auto; margin-top: 8px; width: 100%;} 
	a > .btn{font-size:1.3em; }
        }

/* Grosse Monitore */
@media only screen and (min-width: 1110px) {
	body { width: 1060px;  margin: 0 auto; text-align: center; margin-top: 2em;}
        #topline { background: #cc99cc; height: 40px}
	h1{font-size: 3em; padding: 5px;}
	
    div#slider{grid-template-columns: (minmax(260px, 1fr)); width: 1060px; overflow: visible;} 
     #logo210{grid-row: 1 / 4; grid-column: 1 / 3; transition: none; text-align: left; } /* grid reihen / spalten */
   /*  #logo210 img{width: 452px; height: 210px;} 
	.abox{width: 260px!important; } */
        
	#flexContent { width: 1060px; } 	
	#probox{ margin: 0 auto; margin-top: 10px; width: 100%;}  /*  margin-top testen wegen #slider */
	a > .btn{font-size:1.4em; }
        }

/* video container */
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } 
#video-container { width:100%; height:100%; background-color:transparent; } 
.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 
.video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }