/**
 * @author      Hiltrud Walter
 * @link        Polio-Berlin.de 
 * @email       walter_h@gmx.de
 * @copyright   Hiltrud Walter
 *
 * HTML5 Template
 * Copyright (C) 2026 Hiltrud Walter
 *
**/

/* ************** ALLGEMEINE FORMATIERUNGEN *********************
*****************************************************************/
@import url(https://fonts.googleapis.com/css?family=Delius+Swash+Caps);

@font-face {
font-family: Sitka;
src: url('./Sitka.ttc');
font-style: normal;
font-weight: normal;
}
@media print {
   div#header,
   div#main-navigation, /* sidebar, */
   div#footer { display: none; }
 }
* {         /* Universal-Selector ==> reset des Browser*/
   font-weight:100;
   font-family: Sitka,Verdana,Helvetica,Arial,Sans-serif;
   font-size: 100.01%; /*relative größe*/
   margin: 0; padding: 0;
      }

/* Blockelemente für IE 8*/
header, nav, section, article, footer {    display: block;}

 
body {
	height: 100%;  width: 100%;
	margin:0em; padding:0;   /* für mobile Ansicht 1em=16px */
   background: url(bg.png) repeat-x;
   color: #871d29;
   font-size: 16px;
}
/* ************************** TYPO ****************************
*****************************************************************/
img {
    width: 100%; height: auto;
}
h1 {
  font-size: 2.0em;      /* 16px*2=32px groß */
    line-height: 2.1em;
  font-weight: 700;
  color: #871d29;
	text-align: left;
}

header h3 {
  margin: 0em; margin-bottom:1em;
  padding: 0em;
  font-size:1.1em;
  line-height: 1.4em;
  font-weight: 300;
  letter-spacing:0.1em;
  color: #871d29;
	text-align: left;
  text-shadow: 3px 1px 0.6em #3A0007;
  text-shadow: 3px 1px 0.6em; /* Fallback */
  filter: dropshadow(color=#3A0007, offx=3, offy=1); }


p, .textfluss{
 font-size: 120%;
 line-height: 1.2em;
 font-size: 95%;
  font-weight: 100;
  color: #3a0007;
  padding: 0em;
	margin: 0em; margin-bottom: 0.4em;
	text-align: left;
	}
.textfluss {text-align: justify;}
.font_klein {margin-top: 10px; font-size: 75%; }  
.schwarz {color: #3a0007; color: hsl(0,100%,0%);}
.rot {color: #871d29;}
.textRechts {text-align: right;}
.fett {font-weight: 900;}
  /*.shadow {  Versatz-links; Versatz-oben Unschärfe Radus Farbe
  -webkit-box-shadow: 6px 6px 11px #000;
  -moz-box-shadow:  6px 6px 11px #000;
   box-shadow: 6px 6px 11px #000 ; 
}
*/
    
a:link,
a:visited {
  text-decoration: underline;
  color: #871d29;
}

a:hover,
a:focus {
   	text-decoration: none;
   	color:#3a0007;
     }
  /* ************************** LAYOUT ****************************
*****************************************************************/
  
#wrapper {      /* container um HP auszurichten*/
position: relative;
  max-width : 1200px;/* um flüssig sein; breite variabel*/
  height: auto !important;
  min-height: 100%;
  margin: 1em auto;
  padding:1em;
  overflow: hidden !important; /* Firefox Scrollleiste */
  background-color: #fafafa;
  border: 2px groove #fc4b3d;
   -transition: background 1s ease-in; /* Firefox */
  -moz-transition: background 1s ease-in; /* WebKit */
  -o-transition: background 1s ease-in; /* Opera */
  transition: background 1s ease-in; /* Standard */
  -webkit-box-shadow: 6px 6px 11px #871d29;
  -moz-box-shadow:  6px 6px 11px #871d29;
   box-shadow: 6px 6px 11px #871d29 ;
 }
#top_header {#3a0007
   float: left;
	width:100%;
	min-width:220px;
	height: 160px;
	background: url(top_vio2.png) no-repeat;
	background-size: 100% 90%;
	margin: 0em;
     border-bottom: 3px  groove #3a0007;
}

 #breadcrumb {
    height:1.2em;  
     width: auto;
     float: left;
     margin: 0 0 .5em 0; 
     padding: 0em 3em;
 }

#breadcrumb a:link{ 
     line-height: 0.4em; 
     background-color: transparent;
     font-size: 60%;
     text-decoration: none;
     text-align: center;
     margin: 0em;
     padding: 0em; padding-right: 0.6em;
     border-right: 1px solid #0d0d0d; }
#breadcrumb a:hover{ text-decoration: underline;}
#breadcrumb a:last-child { border-right: none }

 /* um section und nav gleiche höhe, muss eine box herum 
  * äußere Box wird immer so hoh wie die größere innere box*/
#section-wrapper {                
    float: left;
    width: 100%; 
    height: auto;
    min-height: 320px !important;
}


article {
   margin: 0; margin-bottom: 1em;
   height:auto;    width:auto;
}
#inhalt {
  float:left;
  width: 78%;
  min-width: 320px;
  height: auto;  /* wenn inhalt drin, dann auto*/
  margin:0.6em 0.6em 0 0;
}

.artikeltext p:first-child{
   /* um 1. p-Absatz ggf. anders im Abstand zu machen*/
}
/* *******NAVIGATION ************************
******************************************/

#main-navigation  {
  margin:.8em 2.5em 1em 0;
  padding: 0;
  position: relative;
  width: 13%;
  min-width: 8em;
  height: auto;
  float: left;
}
   /*formatiert Obermenüpunkt */      
#main-navigation ul { margin:0;padding:0;
    list-style: none;} 

  /* verhindert bei Mouseover Höhenverstellung wegen absolute-position  */
#main-navigation ul li {position: relative;}

  /* Normalzustand Obermenüpunkte */
#main-navigation a {
  width: 100%;
  margin-bottom:.3em;       /* abstand zw. menuepunkten*/
  border: none;
  text-decoration:none;
   padding: 0em 0.2em;
  display:block;
}



  /* Einzellink Normalzustand ohne Untermenü*/
#main-navigation h2  {
  font-size: .8em;
  text-align: left;
  font-weight: 600;
  letter-spacing:0.1em;
  text-transform: uppercase;
  text-shadow: 3px 1px 0.6em #3A0007;
  text-shadow: 3px 1px 0.6em; /* Fallback */
  filter: dropshadow(color=#3A0007, offx=3, offy=1);
  }

/*  Untermenue versteckt*/
#main-navigation .submenu {
  position: absolute;
  top:0;  left:7.6em;
  width:120%;
  font-size: small;
  background: #fafafa;
  border: 2px groove rgba(135,29,41,0.6);
   color:#871d29;
  z-index: 2;
  display: none;
}
  /* Untermenü zeigen bei Pseudo-Klasse hover  */
#main-navigation ul li:hover .submenu {
   display:block;
      width:120%;
    color:#871d29;
}

/* Pfeil in weiterf. menüpunkt mit Pseudo-Element*/
#main-navigation .pfeil:before {
   content: "\25B6"; /* rechtspfeil*/
  top:2px;  left:11em;
   font-size: .6em;
    color:#871d29;
   display: block;
   position: absolute;  
 }
 
 
  /*  Obermenüpunkt bzw. Link ohne Untermenü Hovereffekt */
#main-navigation ul a:hover,
#main-navigation ul a:focus,
#main-navigation ul .aktiv { 
position: relative; 
   width: auto;
    color:#3a3939;
/* Permalink - use to edit and share this gradient: 
http://colorzilla.com/gradient-editor/#605d60+0,fafafa+100 */
background: #a1a1a1; /* Old browsers */
background: -moz-linear-gradient(left,  #A1a1a1 0%, #fafafa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #a1a1a1 0%,#fafafa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #A1a1a1 0%,#fafafa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1a1a1', endColorstr='#fafafa',GradientType=1 ); /* IE6-9 */

   background: rgba(0, 100, 100); /* Fallback */
   background-color: rgba(0, 100, 100, 0.1);
   -webkit-transition: background 800ms ease-in; /* Firefox */
   -moz-transition: background 800ms ease-in; /* WebKit */
   -o-transition: background 800ms ease-in; /* Opera */
   transition: background 800ms ease-in; /* Standard */
  }
  

/*--nur für IE-Versionen <=6 erkennbar--*/
* html #main-navigation  ul.submenu  li{ float: left; width: 100%;  }

/*--nur für IE 7 erkennbar--*/
*+ html #main-navigation ul.submenu  li { float: left; width: 100%;}

/*--bewirkt Hover-Effekt für IE <7 
 * auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;  
}

*html #main-navigation ul.submenu  li a {
height: 1%;
}







 footer {
 clear: both;
  width: 100%;  height:1.3em;
  margin:0;      
  padding-top: 0em;
}
 
#footerLinks  {
    float: left;
    width:60%;
 }               
#footerLinks a:link, a:focus{
   text-decoration: none;
   
}
#footerRechts {
    float: right;
    text-align: right;
    width:30%;
}
/*********** IM SECTION zweispaltig******** */

.zweisp {
width: 100%;
  float: left;  /*sonst sind die einzelen Zellen nicht
                  dynamisch darstellbar*/
 }
.spalte1 {
  float:left;
  width:20%;
  font-size: 80%;
	letter-spacing: 1px;
  text-transform: uppercase;
  margin:0 0 0.6em 1.6em;
}

.spalte2 {
	float:left;
	width:70%;
  margin:0 0 0.6em 1.6em;
  text-align: left;
}
.spalte2 a:link,.sp2 a:visited {
  color: #871d29;
  text-decoration: underline;}

.spalte2 a:hover {
color:#0d0d0d;
  }

/*******Fotogalerie mit 8 Spalten und 6 Zeilen********************/
#galeriestart{
	width:100%;
	max-width: 44em;
	height:100%;
	min-height: 300px;
}

.foto, .fotohoch { 
   width: 125%; 
   height: 125%;
   max-width: 182px; 
   max-height: 152px;
   margin:0;      padding:1px;
   overflow: visible;
   display:inline;
   background-color: #871d29;
  -webkit-box-shadow: 2px 3px 5px #808080;
  -moz-box-shadow:  2px 3px 5px #808080;
   box-shadow: 2px 3px 5px #808080 ;
}
.fotohoch {
   width: 100%;
   height: 100%;
   max-width: 59px;
   max-height: 184px;
   
 }
#galeriestart a:hover {
   background-color: #af424f;
  -webkit-box-shadow: 2px 3px 5px #78E2D6;
  -moz-box-shadow:  2px 3px 5px #78E2D6;
   box-shadow: 2px 3px 5px #78E2D6 ;
}
.leerbild {
	visibility: hidden;  /*mit Platzhalter verborgen*/
	}
	
#tab_li {
  width:50%; height:auto;
  float: left;
 }
#tab_re {
  width:50%; height:auto;
  margin: 0 0px 0 0;
  float: right;
}


.tab1 {
	width: 49%;
	height: auto;
	float:left;
 }
.tab2 {
	width: 50%;
	height: auto;
	float:right;
}

.sp1 {
	float:left;
	width: 50%;height:auto;
	padding: 0;
   }
.sp2 {
	float:right;
	width: 49%; height:auto;
	padding:0;}

.liste {
	margin:0.4em 0em 0.8em 0em;
	width:70%;      height: auto;
	display: block;
	text-align: left;
	font-size: 0.9em;
 	line-height: 1.4em;
}

.liste li {
 	list-style: square;
	list-style-position:  inside;
   padding: 0; margin-left:3em;

}
 .liste li a, 
 .liste li a:visited {
   color:  #871d29;
	text-decoration: none;

}
 .liste li a:hover {
	text-decoration:  underline;
	color: #3a0007;

}
  .clearfix {
      clear: both;
  }

.verborgen {
/*http://www.webaim.org/techniques/css/invisiblecontent/*/
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

/***********************************************************
 *    Quellcode von http://www.cssplay.co.uk/menu/cssplay-momentum-swipe-gallery-v2.html
 * CSS DEMOS › Responsive momentum swipe gallery
Date : 24th February 2016
For touch screen, trackpad and mouse
 * **********************************************************/
#info {width:95%;}
div#swipeGallery {
  width:100%; max-width:740px; 
  margin:20px 0;
}

div#thumbHolder {
  height:100%; width:100%; 
  background:transparent; 
  text-align:center; overflow:hidden; position:relative;}
div#thumbHolder ul {
  height:100%; 
  padding:0; margin:0; 
  list-style:none; 
  white-space:nowrap; 
  overflow-y:hidden; overflow-x:auto; 
  text-align:center; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
div#thumbHolder ul li {
  display:inline-block; 
  vertical-align:top; 
  padding:5px 4px;}
div#thumbHolder ul li:first-child {padding-left:0;}
div#thumbHolder ul li:last-child {padding-right:0;}

div#thumbHolder ul li img {
  display:block; 
  margin:0 auto; 
  width:100%; 
  cursor:pointer;}

div#fullHolder {
  width:100%; max-width:740px; min-width: 510px; 
  height:100%; 
  padding-bottom:25%; 
  position:relative;
 }

div#fullHolder ul { 
  padding:0; margin:0; list-style:none;}

div#fullHolder ul li {              
  position:absolute; left:0; top:0;}

div#fullHolder ul li div {display:block; opacity:0; transition:1.2s; width:100%;}
div#fullHolder ul li div img {display:block; padding-bottom:5px; width:100%;}
div#fullHolder ul li div span {display:block; text-align:center; font:normal 14px/18px open-sans, helvetica, arial, sans-serif; color:#444; text-rendering: optimizelegibility;}
div#fullHolder ul li input {display:none; }
div#fullHolder ul li input:checked + div {opacity:1;}