/* www.haukehaller.de */
/* 2017 */


/* =============================================================================
   Kopf
   ========================================================================== */


.wortlogo {
  display: block;
  position: relative;
  top: 0;
  }



.navSchalter a {
  	display: none;
  	}
/******/

footer {
   min-height: 4em;
}

#nachOben {
  position: fixed;
  left: 3%;
  bottom: 1em;
  margin: 0;
}

#nachOben a {
  font-size: 2em;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

#nachOben a:before {
  color: #FFF;
  background-color: #000;
  width: 1.75em;
  height: 1.75em;
  -webkit-border-radius: .875em;
  -moz-border-radius: .875em;
  border-radius: .875em;
  line-height: 1.5;
  border: 1px solid #FFF;
}



/* =============================================================================
Layout
/========================================================================== */
/*
Schriftgröße: 16px
Linenhöhe: 26px / 1,625em
Rasterweite: 16px / 1em
Spaltenbreite: 4 => 64px
Abstand: 1 => 16px

geändert:
Spaltenbreite: 3 => 48px
Abstand: 2 => 32px

Gesamtbreite: 1200px, 15 Spalten
*/

/* Breite, mittig setzen */
.breite {
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding: 0 0 0 .5em; /* halber Abstand -> mittig */
  padding: 0 0 0 0.6666666667%; /* .5em */
  padding: 0 0 0 1.333333333%; /* 1em */
  }


/* Pfusch: breiterer Abstand
.col.spalte {
  padding-left: 1em;
}
*/
.pfad {
  padding-top: 1em;
}

#hauptinhalt {
  padding-top: 1.625em; /* 16 -> 26 */
  padding-bottom: 1.625em;
  }

nav.drei {
  padding-top: 1.55em;
  }


.headerTrenner {
  display: none;
  }

/*
nav.col {
  padding-top: 4.2em;
}
*/
article .nurBilder {
  margin-bottom: 1em;
}

article .nurBilder .breite-1 figure {
  display: inline-block;
  width: 24%;
  margin-bottom: .5em;
  text-align: center;
  vertical-align: middle;
  }

article .nurBilder .breite-1 figure a {
  display: inline-block;
  }

  /* ----------------------
  Spalte: 3
  Abstand: 2
  -------------------------*/
/* MUSS weiter oben stehen:
.breite { padding: 0 0 0 1.333333333%; } */


/* =============================================================================
 Media Queries
 ========================================================================== */
 /* =================
  - 400 (Phone hoch)
  ============== */
 @media only screen and (max-width: 400px) {

  body {
    font-size: 68.75%; /* 11px */
  }

  article .nurBilder .breite-1 figure { width: 32%; } /* 384px */

 }

/* =================
 401 - 767 (Phone quer)
 ============== */
 @media only screen and (min-width: 401px) and (max-width: 820px) {

  body {
    font-size: 75%; /* 12px */
  }
}

/* @media only screen and (min-width: 401px) and (max-width: 767px) { */
@media only screen and (min-width: 401px) and (max-width: 670px) {

    .spalte { font-size: 1em; }

    .spalte .box {
      width: 48%;
      float: left;
      margin-left: 1.9%;
      display: inline-block;
/*
      border-top: .1em solid #CCC;
      border-bottom: none;
*/

  display: inline-block;
  vertical-align: top;
  width: 48%;
  margin: 0 2% 0 0;
  padding: 3% 0;
    }

}

/* =================
 - 767 ---------------------------------------------- (Menü ist ausgeblendet)
 ============== * /
@media only screen and (max-width: 767px) { */
@media only screen and (max-width: 670px) {


  .breite {
 		padding: 0;
 		}

  nav.col {
 		display: none;
 	  }

  .col.spalte {
    padding-left: 0;
  }

  /* Hauptinhalt abgegrenzt: */
  article {
  		border-bottom: .1em solid #CCC;
    }

  #kopf .wortlogo,
 	.gehirn a {
 		color: #FFF;
 		}

  #menu.breite,
  .gehirn {
 		width: 100%;
 		}

  .pfad
  /* „Sie sind hier“ ausblenden: * /
  .pfad .erstes */ {
    display: none;
    }


/*** Navigationsschalter */
 	.navigation {
 		display: none;

    position: absolute;
    background: #fff;

    top: 3em;
    left: 0em;
    width: 100%;
    z-index: 30;

    position: fixed;
    overflow-y: scroll;
    height: 90%;

    border-bottom: solid 1px #000;
    border-top: solid 1px #000;

 	  }
/* */
 	.navSchalter {
    z-index: 50;
    position: fixed;
    top: 1em;
    right: 1em;
 	  }

 	.navSchalter a {
 		background-color: #FFF;
 		color: #222;
    z-index: 60;
    text-decoration: none;

 		display: block;
 		padding: .8em;
 		-webkit-border-radius: 4px;
 		-moz-border-radius: 4px;
 		border-radius: 4px;


    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
 	  }

  .navSchalter.schwarz a {
 		background-color: #222;
 		color: #FFF;
    border: .1em solid #FFF;
  }


  /******/

  .sf-menu li {
  padding-left: 5%;
  }

  .sf-menu li li {
  padding-left: 0;
  }

 	#menu {
 		margin: 0 auto;
 		position: relative;

    /* .navSchalter (s.o.) liegt drüber  */
    z-index: 3;
 		}

 	#menu a, #menu a:hover, #menu strong {
 	/*	background-color: transparent; */
 	  }

 	#menu li {
 		width: 100%;
 		}

 	#menu li {
 		border-bottom: solid 1px #CCC;
 		}

  .sf-menu ul,
  #menu li:last-child,
 	#menu li li {
 		border-bottom: none;
 		}

    /* menu.css zurücksetzen */
    .sf-menu ul {
   		border-bottom: none;
    	width: 100%;
    	padding-left: 2%;
    	margin: 0;
    }

 	.sf-menu li.akt ul  {
 		top: 0;
 		display: block !important;
 		}

    /* 3. Ebene */
    .sf-menu li:hover li ul,
    .sf-menu li.sfHover li ul,
    .sf-menu li.akt:hover li ul {
      position: relative;
      visibility: visible;
      left: 0;
    /*	top: 2.5em;
  /*		z-index: 9;
  -webkit-transition: top 500ms ease-in;
  -moz-transition: top 500ms ease-in;
  -o-transition: top 500ms ease-in;
  transition: top 500ms ease-in; */
      }

 	#kopf,
 	.gehirn {
 		min-height: 1em;
 		}

 	#kopf header {
 		padding: .8em 0;
 		background: #222;
    color: #FFF;
 		width: 100%;
 		}

 	#kopf h1 {
 			margin: 0;
      padding: 0;
 			}

 	.wortlogo {
 		display: block;
 		width: 90%;
 		margin: 0 auto;
 		position: relative;
    top: 0;
 		}

  .spalte {
    padding-top: 1em;
  }

 	#bauch,
 	.fussinhalt,
 	#menu{
 			padding: 0;
 			}

 	.pfad {
 			margin: .5rem 0 1rem 0;
 			}


      article .textMitBild .breite-1,
      article .textMitBild .breite-2,
      aside .textMitBild .breite-1,
      aside .textMitBild .breite-2 { width:	30.6666666667%; } /*	368px */
      /* article .textMitBild .breite-2 { width:	64%; } /*	768px */
      article .textMitBild .breite-3 { width:	97.3333333333%; } /*	1168px */
}

/* =================
 768  ---------------------------------------------- (sichtbares Menü)
 ============== * /
@media only screen and (min-width: 768px) { */
@media only screen and (min-width: 671px) {

  .wortlogo {
    position: relative;
    top:  -2em;
  }

  #kopf {
    margin-bottom: 2.5em;
    padding-bottom: 0;
  }

  #kopf header {
    display: block;
    width: 98.6666666667%;
    height: 15.5em;
    margin: 2.5em 1em 2em 0;

    background-image: url("../dateien/seitenkopfbilder/Panorama.jpg");
    background-size: cover;
  }

  #kopf,
  .gehirn { height: 18em;}

  .navigation {
      position: absolute;
      width: 100%;
  }
  .navigation.affix {
      position: fixed;
      top: 0;
      width: 100%;
      z-index:10;
  }

/* ------------------------------------------------------- Spaltenlayout Gesamtbreite: */

 .col {
   margin-left: 1.333333333%;
   float: left;
   display: block; /* nav.col wird auch wieder sichtbar (s.o.) */
 }

 .infoMenu, /* hat float:right */
 {
   margin-right: 1.333333333%;
 }

 .aneinander,
 .col:first-child {
   margin-left: 0;
 }



  /* Pixelgenaues Layout wäre im vollen Desktop möglich … */
  /* ----------------------
  Spalte: 5
  Abstand: 0
  -------------------------* /
  .aneinander .eins { width: 6.6666666667%; } /* 80px * /
  .aneinander .zwei { width: 13.3333333333%; } /* 160px * /
  .aneinander .drei { width: 20%; } /* 240px * /
  .aneinander .vier { width: 26.6666666667%; } /* 320px * /
  .aneinander .funf { width: 33.3333333333%; } /* 400px * /
  .aneinander .sechs { width: 40%; } /* 480px * /
  .aneinander .sieben { width: 46.6666666667%; } /* 560px * /
  .aneinander .acht { width: 53.3333333333%; } /* 640px * /
  .aneinander .neun { width: 60%; } /* 720px * /
  .aneinander .zehn { width: 66.6666666667%; } /* 800px * /
  .aneinander .elf { width: 73.3333333333%; } /* 880px * /
  .aneinander .zwolf { width: 80%; } /* 960px * /
  .aneinander .dreizehn { width: 86.6666666667%; } /* 1040px * /
  .aneinander .vierzehn { width: 93.3333333333%; } /* 1120px * /
  .aneinander .funfzehn { width: 100%; } /* 1200px */

  /* ----------------------
  Spalte: 4
  Abstand: 1
  -------------------------* /
  .eins { width: 5.3333333333%; } /* 64px * /
  .zwei { width: 12%; } /* 144px * /
  .drei, .sf-menu li { width: 18.6666666667%; } /* 224px * /
  .vier { width: 25.3333333333%; } /* 304px * /
article .textMitBild .breite-1,
  .funf { width: 32%; } /* 384px * /
  .sechs { width: 38.6666666667%; } /* 464px * /
  .sieben { width: 45.3333333333%; } /* 544px * /
  .acht { width: 52%; } /* 624px * /
  .neun { width: 58.6666666667%; } /* 704px * /
article .textMitBild .breite-2,
  .zehn { width: 65.3333333333%; } /* 784px * /
  .elf { width: 72%; } /* 864px * /
  .zwolf { width: 78.6666666667%; } /* 944px * /
  .dreizehn { width: 85.3333333333%; } /* 1024px * /
  .vierzehn { width: 92%; } /* 1104px * /
article .textMitBild .breite-3,
  .funfzehn { width: 98.6666666667%; } /* 1184px */


/* ----------------------
Spalte: 3
Abstand: 2
-------------------------*/
.col { margin-left: 2.666666667%; }
 .infoMenu, /*.sf-menu li */ { margin-right: 2.666666667%; }

  .eins {	width:	4%; } /*	48px */
  .zwei {	width:	10.6666666667%; } /*	128px */
  /* .sf-menu li, */
  .drei {	width:	17.3333333333%; } /*	208px */
  .vier {	width:	24%; } /*	288px */
article .textMitBild .breite-1,
  .funf {	width:	30.6666666667%; } /*	368px */
  .sechs {	width:	37.3333333333%; } /*	448px */
  .sieben {	width:	44%; } /*	528px */
article .textMitBild .breite-2,
  .halb { width: 48.666666667%; }
  .acht {	width:	50.6666666667%; } /*	608px */
  .neun {	width:	57.3333333333%; } /*	688px */
/*article .textMitBild .breite-2,*/
  .zehn {	width:	64%; } /*	768px */
  .elf {	width:	70.6666666667%; } /*	848px */
  .zwolf {	width:	77.3333333333%; } /*	928px */
  .dreizehn {	width:	84%; } /*	1008px */
  .vierzehn {	width:	90.6666666667%; } /*	1088px */
article .textMitBild .breite-3,
  .funfzehn {	width:	97.3333333333%; } /*	1168px */


/* ----------------------*/


}

/* =================
768 - 1023  ---------------------------------------------- (Menü rechts)
 ============== * /


@media only screen and (min-width: 768px) and (max-width: 1023px) {  */
@media only screen and (min-width: 671px) and (max-width: 1023px) {

  nav.col {
    float:right;
    border-bottom: 1px solid #CCC;
    margin-right: 1.333333333%;
    }

    /* ----------------------
    Spalte: 4
    Abstand: 1
    -------------------------* /
    .eins { width: 5.3333333333%; } /* 64px * /
    .zwei { width: 12%; } /* 144px * /
    .drei, .sf-menu li { width: 18.6666666667%; } /* 224px * /
    .vier { width: 25.3333333333%; } /* 304px * /
.startseite aside.drei:not(.extraspalte) .box,
article .textMitBild .breite-1,
article .nurBilder .breite-1 figure,
.drei,  .funf { width: 32%; } /* 384px * /
    .sechs { width: 38.6666666667%; } /* 464px * /
    .sieben { width: 45.3333333333%; } /* 544px * /
    .acht { width: 52%; } /* 624px * /
    .neun { width: 58.6666666667%; } /* 704px * /
article .textMitBild .breite-2,
.neun,    .zehn { width: 65.3333333333%; } /* 784px * /
    .elf { width: 72%; } /* 864px * /
    .zwolf { width: 78.6666666667%; } /* 944px * /
    .dreizehn { width: 85.3333333333%; } /* 1024px * /
    .vierzehn { width: 92%; } /* 1104px * /
.startseite aside.drei:not(.extraspalte),
article .textMitBild .breite-3,
    .funfzehn { width: 98.6666666667%; } /* 1184px * /

    article.col {
      margin-left: 0;
    }

  /* auf der Startseite ist die normale Spalte unter dem Hauptinhalt * /
  aside.drei.spalte .box:first-child {
    padding: 1.95em 0;
  }

    .startseite aside.drei:not(.extraspalte) {
      margin-left: 0;
    }

    .startseite aside.drei:not(.extraspalte) .box {
      float: left;
      margin-left: 1.333333333%;
    }

    /* ----------------------
    Spalte: 3
    Abstand: 2
    -------------------------*/
    .startseite aside.drei:not(.extraspalte) .box { margin-left: 2.666666667%; }
    nav.col { margin-right: 2.666666667%; }

      .eins {	width:	4%; } /*	48px */
      .zwei {	width:	10.6666666667%; } /*	128px */
    /*  .sf-menu li, */
      .drei {	width:	17.3333333333%; } /*	208px */
      .vier {	width:	24%; } /*	288px */
  .startseite aside.drei:not(.extraspalte) .box,
  article .textMitBild .breite-1,
  article .nurBilder .breite-1 figure,
  .drei,
      .funf {	width:	30.6666666667%; } /*	368px */
      .sechs {	width:	37.3333333333%; } /*	448px */
      .sieben {	width:	44%; } /*	528px */
  /**/  article .textMitBild .breite-2, /**/
      .halb { width: 48.666666667%; }
      .acht {	width:	50.6666666667%; } /*	608px */
      .neun {	width:	57.3333333333%; } /*	688px */
/*  article .textMitBild .breite-2, */
  .neun,
      .zehn {	width:	64%; } /*	768px */
      .elf {	width:	70.6666666667%; } /*	848px */
      .zwolf {	width:	77.3333333333%; } /*	928px */
      .dreizehn {	width:	84%; } /*	1008px */
      .vierzehn {	width:	90.6666666667%; } /*	1088px */
  .startseite aside.drei:not(.extraspalte),
  article .textMitBild .breite-3,
      .funfzehn {	width:	97.3333333333%; } /*	1168px */


    /* ----------------------*/

}


/* =================
768 - 1024
 ============== * /
@media only screen and (min-width: 768px) and (max-width: 1024px) { */
@media only screen and (min-width: 821px) and (max-width: 1024px) {

  body {
   font-size: 81.25%; /* 13px */
  }

}

/* =================
1025 - 1333
 ============== */
@media only screen and (min-width: 1025px) and (max-width: 1333px) {

  body {
    font-size: 87.5%; /* 14px */
  }

}

/* =================
1025 -
 ============== */
@media only screen and (min-width: 1024px)  {

  /**/  article .textMitBild .breite-2, /**/
  .halb { width: 48.666666667%; }

  #kopf {
   height: 18em;
  }

  .startseite .bauchinhalt {
/**/   padding-top: 2em; /**/
  }

  #kopf header {
   margin-top: 4.5em;
  }

    #hauptinhalt {
      padding-top: 1.625em; /* 16 -> 26 */
    }

    #hauptinhalt h1 {
      line-height: 1;
      padding-bottom: 2.1666666667em;
    }

    .pfad {
      padding-bottom: 1em;
    }

    nav.drei {
      padding-top: 5.25em;
    }

    .spalte {
      padding-top: 4.675em;
    }

    .headerTrenner {
      display: block;
    	position: relative;
    }

    .headerTrenner .zwolf {
    		border-bottom: solid 1px #CCC;
    			position: relative;
    			top: 4em;
    			left: 0;
    }

    .startseite .headerTrenner .zwolf {
      margin-left: 0;
      width:	97.3333333333%;  /*	1168px */
    }

  #nachOben { display: none !important; }

  /* so sitzen die Inhalte nebeneinander in einer Höhe: */
  #hauptinhalt .seitenliste .box {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin: 0 2% 0 0;
    padding: 3% 0;
  }

  .startseite article.col { margin-left: 0; }

}

/* =================
 Desktop (90% des Schirms sind mehr als die Gesamtbreite)
 ============== */
@media only screen and (min-width: 1334px) {
  /*
  1334px x 90% = 1200px
  75em x 16px = 1200px
  */

  body {
    font-size: 100%; /* 16px */
  }

  .breite {
    width: 75rem; /* 15 Spalten */
    width: 1200px; /* https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/ */
  }

}

/* =================
   Print
   ============== */
@media only print {

	body, p, a,
	.spalte h1,
	.spalte h2,
	.spalte h3 {
		font-size: 11px;
		color: #000;

        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
	}

	.spalte h1,
	.spalte h2,
	.spalte h3 {
		font-weight: bold;
	}

	p , ol, ul {
		margin-bottom: 1.75em;
	}

/*
	ol {
		list-style: decimal outside none;
		padding-left: 1.25em;
	}

	ul {
		list-style: outside none;
		padding-left: 1.25em;
	}
*/


	img {
		width: 50%;
		height: 50%;
	}

	.sprunglinks,
	.navigation,
	.pfad,
	nav,
	nav.col,
	footer,
	a.back,
  .nop {
		display: none;
	}

	a:link, a:visited {
		text-decoration:none;
    font-weight: 700;
	}

	/** /
	a:after {
		content: " ("attr(href)")";
		font-size: 90%;
    font-family: Courier, monospace;
    font-weight: normal;
	}
	/**/

	.col {
		float: left;
		display: block;
	}

	.col:first-child {
		margin-left: 0;
		}

	.vier,
  .drei {
		width:	25%;
		margin-left: 1.5%;
	}

	.sechs,
  .neun {
		width:	68.3333333333%;
	}

/* ENDE @media print */
}