body { font-family: arial,helvetica,sans-serif; 
              margin:0; border:0; padding:0; }

		 header.kopf { color:#ffffff; background-color:#333333; }
		 			
		 div.logo	
		       {   border:1px solid #333333; 
					  color:#ffffff; 		 						 
		 			  background:#333333 url("../fotos/kopfbilder/gerste-1200x360.jpg") center top no-repeat;
		 			  background-size:cover; 	
		 			}


		 @font-face {
  			font-family: 'merienda';
  			font-style: normal;
  			font-weight: 400;
  			src: url('./fonts/merienda-v6-latin-regular.eot'); /* IE9 Compat Modes */
  			src: local('Merienda'), local('Merienda-Regular_0_wt'),
       		url('./fonts/merienda-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       		url('./fonts/merienda-v6-latin-regular.woff') format('woff') /* Modern Browsers */
  
			}
		 div.logo h1, div.logo h2 
		   { 
		    font-family: merienda,tempus sans itc,monotype corsiva,ink free,kristen itc,pristina,cursive;
		    color:#000000; background-color:transparent;
		 	 text-shadow: 0px 0px 20px #E5F27B, 0px 0px 15px #E5F27B, 0px 0px 10px #E5F27B, 0px 0px 5px #E5F27B, 0 -1px #CCCCCC, 1px 0 #CCCCCC, 0 1px #CCCCCC, -1px 0 #CCCCCC;   
		   }		 
		 div.logo a, div.logo a:link, div.logo a:visited, div.logo a:hover, div.logo a:focus, div.logo a:active
		   { color:#000000; background-color:transparent; text-decoration:none; } 


	    header.kopf nav { color:#CCCCCC; background-color:#333333; }
	    header.kopf nav ul li a, header.kopf nav ul li a:link, header.kopf nav ul li a:visited, header.kopf nav ul li a:active 
		    { color:#81D41A; background-color:#333333; text-decoration:none;  }
       header.kopf nav ul li a:focus, header.kopf nav ul li a:hover 
		    { color:#81D41A; background-color:#000000; }


	    header.kopf nav.nav2 { color:#CCCCCC; background-color:#444444; }
		 header.kopf nav.nav2 ul li a, header.kopf nav.nav2 ul li a:link, header.kopf nav.nav2 ul li a:visited, header.kopf nav.nav2 ul li a:active 
		    { color:#81D41A; background-color:#444444; }
       header.kopf nav.nav2 ul li a:focus, header.kopf nav.nav2 ul li a:hover 
		    { color:#81D41A; background-color:#000000; }
		  
		  
		 /* clearfix: */
		 header.kopf:after, header.kopf div.logo:after, header.kopf div.logobox:after, header.kopf nav:after, header.kopf nav ul:after,
		 main:after
		     { content:""; display:table; clear:both; }
		 
		 /* Inhalt formatieren: */   
		 main { color:#000000; background-color:#81D41A; border:1px solid #81D41B; display:block; clear:both; }
		 main h1, main h2 { font-weight:normal; }
	    main h1 { font-size:1.5em; margin-top:1em; }
	    main h2 { font-size:1.3em; }
	    		 
		 main p { margin:1em 0; line-height:150%; }
		 main a, main a:link, main a:visited, main a:active
		    { color:#053300; background-color:#81D41A;  }
	    main a:hover, main a:focus
		    { color:#053300; background-color:#9AE73C;  }
		 main a.tel, main a.tel:link, main a.tel:visited, main a.tel:active,
		 main a[href^="tel"], main a[href^="tel"]:link, main a[href^="tel"]:visited, main a[href^="tel"]:active
		    { color:#000000; background-color:#81D41A; text-decoration:none; }

       main div.inhalt ul li, main div.inhalt ol li 
         { padding-bottom:1em; }  
		    
	    main div.inhalt { padding:0; }
	    
	    main div.inhalt img.portrait { float:right; margin:5px 0 20px 20px; padding:0; border:0 none; display:block; }	
	    
	    table { border:0 none; }
	    table td, table th { border:0 none; padding:0.5em 2em 1.5em 0; 
	                         text-align:left; vertical-align:top; font-style:normal; }	 
	    table p { margin:0;  } /* versehentlich vom Online-HTML-Editor eingefügte einzelne P ohne Abstand */		 
	    table p+p { margin-top:0.5em; } /* ab dem zweiten Absatz mit etwas Abstand oben */		 
		 
		 footer { color:#ffffff; background-color:#333333; } 
		 footer a, footer a:link, footer a:visited { color:#81D41A; background-color:#333333; text-decoration:none; }
		 footer a.tel, footer a.tel:link, footer a.tel:visited { color:#ffffff; background-color:#333333;  }
		 footer br { display:none; }


	    /* Typo3-Macken korrigieren: */
		div.csc-frame-ruler-before::before
 			{  clear:both; border-top:3px solid #FFFFCC; margin-top:1.5em; padding-top:0em; }

		div.csc-frame-ruler-before>h2:first-child
  			{ margin-top:0; }

		/* Tabellen: */
		table.contenttable { border:0 none; }
		tr, table.contenttable tr { border:0 none; }
		td, th, table.contenttable td, table.contenttable th
  			{ text-align:left; vertical-align:top; font-style:normal; border:0 none; padding:0 0.5em 0.5em 0; }
		th { font-weight:bold; }

		td p, th p, td h2, th h2, td h3, th h3 { margin:0 0 0.5em 0; padding-top:0; line-height:125%; }

		div.contentbox ul li { margin-bottom:1em; }


		fieldset { border:0 none; }
		fieldset legend { display:none; } /* redundant, d.h. doppelt in Typo3 bei Radio */

		/* Bild-Unterschriften etwas kleiner: */
		div.csc-textpic .csc-textpic-caption
 			{ font-size:0.85em; font-weight:normal; }
		/* Bild-Unterschriften mit Klasse .kleiner nicht noch kleiner, also 0.85em: */
		div.csc-textpic .csc-textpic-caption .kleiner
 			{ font-size:1em; font-weight:normal; }

		/* Kein Abstand ueber dem Text bei kombinierten Bild-Text-Elementen: */
		div.csc-textpic-text h1, div.csc-textpic-text h2, div.csc-textpic-text h3,
		div.csc-textpic-text p:first-child, 
		body div.inhalt div.frame-type-textpic div.ce-textpic div.ce-bodytext p:first-child
  			{ margin-top:0; /* border:1px dotted red; */ }

		body div.inhalt div.frame-type-textpic div.ce-textpic.ce-right.ce-intext div.ce-gallery
  			{ margin-top:0; /* border:2px dotted blue; */ }


		/* Uploads-Tabelle / Datei-Verweise: */
			.csc-uploads td p, .csc-uploads-fileSize { margin:0; font-size:0.85em; }

		/* MP3-Player linksbuendig: */
		div.csc-textmedia-gallery-row div.csc-textmedia-gallery-column figure
  			{ border:1px dotted #ffffcc; margin:0 0 1em 0; padding-top:0.5em; }
  		audio { margin-bottom:2em; }

		/* Abstand bei Thumbnails in Galerie: */
		div.ce-gallery img { margin:0 0 0 0; }


/* Neues Typo3-Formular formatieren: */

div.form-group { margin:1em 0 0 0; clear:both; min-height:1.5em; }
div.form-group label { width:10em; float:left; }
div.form-group label.control-label { clear:both; }
div.form-group label.form-check-label { width:35em; max-width:100%; }

div.inputs-list div.form-group { float:left; clear:none; margin:0; }
/* "formularnewsletter1-radiobutton-1 */
label[class="control-label"][for="kontaktformular1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularnewsletter1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-2"]+div.input div,
label[class="control-label"][for="zkpgoenner1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-2"]+div.input div
   { float:left; display:inline-block; }
label[class="control-label"][for="kontaktformular1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularnewsletter1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-2"]+div.input div label,
label[class="control-label"][for="zkpgoenner1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-2"]+div.input div label
   { width:6.5em; margin:0 0 0 0; /* border:1px dashed blue; */ }

div.form-group input[type="text"] { width:15em; }

div.form-group textarea { width:30em; max-width:100%; height:8em; }

div.btn-group { margin:1.5em 0 1.5em 0; clear:both; }
button.btn-primary { padding:0.5em; border:1px solid #053300; font-size:1.2em; }


/* Newsletter-Formular: */
/* URL-Feld ausblenden */
/*
label[for="formularnewsletter1-radiobutton-2"],
label[for="formularnewsletter1-radiobutton-2"]+div.input,
div#formularnewsletter1-radiobutton-2,
input#formularnewsletter1-radiobutton-2-0
{ border:3px dotted green; color:green; background-color:yellow; display:none; } 		
*/

/* Link zur Abmeldung ausblenden, soll nur im Mail stehen: */
form#formularnewsletter1-79 div.form-group:nth-of-type(5)
  { position:absolute; top:-9999px; left:-9999px; height:1px; width:1px; overflow:hidden; }

			/* Responsive Design: */
			
		  @media screen and (min-width:55em)  /* Alles über 55 em = 880 Pixel Breite: */
         {
         
        header.kopf div.logobox, nav ul, main div.inhalt, footer p
         { max-width:50rem; margin:0 auto; /* border:1px dotted red; */ }   
         
        div.logo { background-image: url("../fotos/kopfbilder/gerste-4000x1200.jpg"); } 
		  div.logo h1 { font-size:3.5em; /* padding-top:0.3em; */ padding-top:3em; margin:0; }		 
		  div.logo h2 { font-size:2.5em; padding-top:0.5em; padding-bottom:0.3em; margin:0; }		 		   
		  
			/* Button fuer Navigation ausblenden: */
        input#responsive-nav, label.responsive-nav-label { display: none; }

			/* Horizontale Navigation formatieren */
		   header.kopf nav { font-size:1.25em; padding:0.5em 0; }		   
	      header.kopf nav ul { list-style-type:none; margin:0 auto; padding:0; display:block; }
   		header.kopf nav ul li { float:left; width:auto; margin:0; padding:0 1.75em 0 0; display:block; }
   		header.kopf nav.nav1 ul li:last-child { padding:0 0 0 0; float:right; }		 

			main { font-size:1.25em; margin:0; border:1px solid #81D41B; padding:0 0 1em 0; min-height:11em; }	
		   main div.inhalt img.portrait { width:260px; height:195px;  }		 
         main p { text-align:justify; }		 
		 
			footer { padding:1em 0; font-size:1.25em; }  
		   footer p { margin:0.25em auto; }
		   footer span.kontakt { float:right; }	
		   footer span.dot { display:none; }	
		   
		   footer span.url { display:none; }
         
         /* Formular: */
         /* Submit-Button nach rechts einruecken: */
         div.btn-group
           { margin:1.5em 0 1.5em 10em; /* border:1px dotted green; */  }		   
		   
         }		 
	

       @media screen and (max-width:54.99em)  /* Alles unter 55 em = 880 Pixel Breite: */
         {
			
			header.kopf { color:#ffffff; background-color:#cc3333; /* #333333 */ }			
			
			div.logo { border:1px solid #81D41B; }  
			div.logo h1 { font-size:2em; padding-top:2.1em; margin:0; }		 
		   div.logo h2 { font-size:1.2em; padding-bottom:0.5em; margin:0; }		 

			/* Horizontale Navigation formatieren */
		   header.kopf nav { padding:0.5em 0; clear:both; }		   
	      header.kopf nav ul { list-style-type:none; margin:0; padding:0; display:block; }
         header.kopf nav ul li { padding:0.8em 1.7em 0.8em 0; float:left; }
         header.kopf nav ul li:last-child { padding:0.8em 0 0.8em 0;  }
	
         main { min-height:8em; }	
	
	 /* Ein- und Ausblenden der Navigation: */
		   
    /* Fix fuer Android bis 4.2 zwecks Checkbox-Hack:
       Siehe http://timpietrusky.com/advanced-checkbox-hack */
    body { -webkit-animation: bugfix infinite 1s; }
    @-webkit-keyframes bugfix {  from { padding: 0; } to { padding: 0; } }

    /* Input-Checkbox fur Navigations-Schalter-Trick ausblenden */
    input#responsive-nav { display:none; }

    /* Label = Schalter für Navigation anzeigen: */
    label.responsive-nav-label {
    		 position:absolute; top:3em; right:1em;
          display: block; width:1em; height:1.6em; float:right;
          margin: 0 0 1em 0.5em;
          padding: 0 0.2em 0.1em 0.5em;
          border:1px solid #095500;
          border-radius:0.5em;
          cursor:pointer;
          color:#095500;
          background-color:#81D41A;
          font-size:1.5em;
          z-index:20;
        }


    /* Hamburger-Symbol vor dem (inaktiven) Navigations-Label: */
    input#responsive-nav[type=checkbox] ~ label.responsive-nav-label::before {
       content: "\2261"; font-size:1.2em;
       display:block; float:left;
       width: 0.9em;
       height: 1em;
       border:0 none;
       margin:0;
       padding:0;
      }

    /* X-Symbol vor dem (aktiven) Navigations-Label: */
    input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label::before {
       content: "X"; font-size:1em;
       display:block; float:left;
       width: 0.7em;
       height: 1em;
       border:0 none;
       margin:0.2em 0 0 0;
       padding:0;
      }

    /* Navigation vorerst ausblenden: */
    header.kopf nav {
      position: absolute;
      top: -9999px; left:-9999px;
     }

    /* Wenn Schaltflaeche Navigation geklickt: Navigation einblenden */
     input#responsive-nav[type=checkbox]:checked ~ nav, 
	  input#responsive-nav[type=checkbox]:checked ~nav+nav 	
      {
       position: relative;
       top:0; left:0;
      }


      /* Formatierung Inhalt: */
			main { margin:0; border:1px solid #81D41B; }	
		   main div.inhalt img.portrait,
		   body div.inhalt div.frame-type-textpic div.ce-textpic.ce-right.ce-intext div.ce-gallery
  		     { width:45%; height:auto; float:right; margin:0; /* border:2px dotted green; */ padding:0; text-align:right; }		 
		   body div.inhalt div.frame-type-textpic div.ce-textpic.ce-right.ce-intext div.ce-gallery figure.image
  		     { width:100%; height:auto; float:right; margin:0; /* border:3px dotted red; */ padding:0; text-align:right; }		 
		   body div.inhalt div.frame-type-textpic div.ce-textpic.ce-right.ce-intext div.ce-gallery img
  		     { width:100%; height:auto; float:right; margin:0; /* border:3px dotted yellow; */ padding:0; }		 

		 
      /* Formatierung Fusszeile: */
		  footer { padding:1em 0; }  
        footer p { margin:0.25em 0; }
		  footer span.url { display:none; }
		   
	     /* Einheitlicher Abstand links und rechts: */
		   div.logobox, header.kopf nav>ul, main, footer p 
		      { padding-left:2rem; padding-right:2rem; }			
		 
			 }		 

       @media screen and (max-width:47.5em)  /* Alles unter 47.5 em = 760 Pixel Breite: */
         {

			/* Vertikale Navigation formatieren */
		   header.kopf nav { padding:0.5em 0; clear:both; }		   
	      header.kopf nav ul { list-style-type:none; margin:0; padding:0 0 0 2rem; display:block; }
         header.kopf nav ul li, header.kopf nav ul li:last-child
            { padding:0; float:none; clear:both; display:block; }
         header.kopf nav ul li a, header.kopf nav ul li span 
            { padding:0.5em 0.5em 0.5em 0; display:block; width:11em; }

			/* 2. Ebene Navigation (Archiv-Jahreszahlen) weiterhin horizontal: */
         header.kopf nav.nav2 ul li { padding:0; float:left; clear:none; display:block; }
         header.kopf nav.nav2 ul li a, header.kopf nav.nav2 ul li span 
            { padding:0.5em 0.5em 0.5em 0.5em; display:block; width:2.5em; }
         header.kopf nav.nav2 ul li:first-child a, header.kopf nav.nav2 ul li:first-child span 
            { padding:0.5em 0.5em 0.6em 0em; display:block; width:3.5em; }  /* Trick: etwas zuviel Padding unten, damit die Jahrzahlen auch in der 2. Zeile eingerueckt sind! */

			div.logo { background-position:10% 0%; }		  
         
         /* Fusszeile auf (mind.) 3 Zeilen verteilen: */
			 footer { line-height:1.85em; }			 
			 footer span.dot { display:none; }
         footer br { display:block; }
         
         }		 

       @media screen and (max-width:26em)  /* Alles unter 26 em = 416 Pixel Breite: */
         {
			  div.logo { background-position:10% 0%; }		  
				/* Gedankenstrich im Menue ausblenden: */	
			  header.kopf h2 span.dash { display:none; }       
         }		 

       @media screen and (max-width:21em)  /* Alles unter 21 em = 336 Pixel Breite: */
         {
			  /* Navi-Button nach unten verschieben, Abstand unter Logo, damit keine Ueberlagerung: */
			  label.responsive-nav-label { position:absolute; top:1em; right:1em; }			  
			  
			  /* Die Box mit dem Wort "Archiv" genug hoch machen, damit die Jahre auf 3 Zeilen rechts davon stehen: */  
			  header.kopf nav.nav2 ul li:first-child a, header.kopf nav.nav2 ul li:first-child span 
            { padding-bottom:3.5em; }     
         }		 

       /* Angaben zum Ausdrucken auf Papier: */
	    @media print
	       {
			  body, a, a:link, a:visited, 
			  div.logo a:link, div.logo a:visited, footer a:link, footer a:visited
			    { color:#000000; background-color:#ffffff; text-decoration:none; }	        
	        body header.kopf nav, input#responsive-nav, label.responsive-nav-label, span.impressumlink
	          { display:none; }
	        div.logo { border:3px dotted red; }
			  div.logo { border:0 none; }
	        div.logo h1 { font-size:3em; margin-bottom:0.1em; text-shadow:none; text-decoration:none; }
			  div.logo h2 { font-size:1.8em; margin-top:0.1em; text-shadow:none; text-decoration:none; }
			  main { border:0 none; }
	        main div.inhalt img.portrait { width:45%; height:auto; }	
	        footer { margin-top:1em; border-top:1pt solid #666666; padding-top:1em; }
	        footer p { margin:0.5em 0; }
	        footer span.url { display:inline; }
	       }