/*
www.pbaumann.de/css/c8.css
2025-08-25
v4.0.0

Aufgaben:
-

/*
--------------------------------------------------------
					1 Fonts
--------------------------------------------------------
*/

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}



/*
--------------------------------------------------------
					2 Allgemeine Selektoren
--------------------------------------------------------
*/

* {
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
	border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}

BODY {
	background-color: rgba(68,68,68,1);
	color: rgba(48,48,48,1);
	font: 0.85rem 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}

.site-wrapper {
	background-color: rgba(255,255,255,1);
	margin: 0 auto 0 auto;
	max-width: 960px;
	overflow: hidden;
	position: relative;
	/* border: 1px solid blue; */
}

A {
	color: rgba(48,48,48,1);
	text-decoration: none;
}

A:hover {
	color: rgba(185,17,9,1);
}

H1, /* Hauptüberschrift Standardseite */
H2, /* Artikel-Teaser index.php und TOP-Seiten */
H3, /* Zwischenüberschriften Standardseite */
H4, /* Kategorien Terminkalender index.php */
H5,	/* Einzelposten Terminkalender index.php */
H6 { /* Überschrift im Footer */
  font-weight: bold;
	line-height: 1.2;
}

H1 {
	font-size: 1.8rem;
	margin: 20px 0 25px 0;
}

H3 {
	font-size: 1.1rem;
	margin: 64px 0 24px;*
}

H5 {
	font-size: 1.2rem;
	padding: 0 0 30px 0;
}

H6 {
	font-size: 1rem;
	margin: 30px 0 16px;
}

HR {
	background-color: rgba(176,176,176,1);
	height: 2px;
	margin: 0 0 30px 0;
	width: 100%;
}

P {
	-ms-hyphens: manual;
	-webkit-hyphens: manual;
	hyphens: manual;
	font-size: .95rem;
	line-height: 1.6;
}



/*
--------------------------------------------------------
					3 Navigation
--------------------------------------------------------
*/

.navi {
	-webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
	box-sizing: content-box;
	overflow: hidden;
	border-bottom: 3px ridge rgba(221,221,221,1);/*rgba(96,96,96,1);*/
	padding: 8px 0;
}

.navi DIV {
	height: 100%;
	margin-bottom: -50px;
	padding-bottom: 50px;
	padding-left: 20px;
	overflow-y: hidden;
	overflow-x: visible;
	white-space: nowrap;
}

.navi DIV SPAN {
	padding-right: 20px;
}

.navi DIV SPAN A {
	font-weight: bold;
	color: rgba(128,128,128,1);
}

.navi DIV SPAN A:hover {
	color: rgba(48,48,48,1);
}

.sichtbar-mob {
  display: none;
}

@media only screen and (max-width: 750px) {
  .sichtbar-mob {
    display: block;
  }
}



/*
--------------------------------------------------------
					4 Header
--------------------------------------------------------
*/

.header {
  padding: 0 0 5px;
}

/* topline ...  ### */

.brand_wrapper {
  position: relative;
}

#brand-small,
#portrait-big {
  display: block;
}

@media only screen and (max-width: 960px) {
	#portrait-big {
		max-width: none;
		position: relative;
		width: 105%;
		clip: rect(0px, 800px, 100%, 90px); /* ### 100% ist nicht erlaubt */
  }
}

@media only screen and (max-width: 750px) {
	#portrait-big {
		width: 110%;
  }
}

@media only screen and (max-width: 500px) {
	#brand-small {
		max-width: none;
		position: relative;
	  width: 200%;
  }
}



/*
--------------------------------------------------------
					5 Article
--------------------------------------------------------
*/

.article {
  padding: 15px;
}


/*
--------------------------------------------------------
					5.1 Spalten-Management für alle Seiten
--------------------------------------------------------
*/

.hauptinhalt {
  float: left;
	margin: 40px 0 40px 0;
  padding: 3% 3% 0 8%; /* 0 5% */
  width: 65%;
}

@media only screen and (max-width: 750px) {
	.hauptinhalt {
    float: none;
		padding: 0 5%;
    width: 100%;
	}
}

.spalte_rechts {
  float: right;
  padding: 0 5%; /*padding: 48px 5%;*/
	width: 35%; }

.spalte_rechts A H4 {
	font-size: 1.2rem;
	margin: 5px 0 5px 0; }

.spalte_rechts A P {
	font-size: 1rem;
	line-height: 1.4;
}

.spalte_rechts A P:first-child {
	color: rgba(185,17,9,1);
}

@media only screen and (max-width: 750px) {
  .spalte_rechts {
    float: none;
    font-size: 1rem;
    width: 100%;
  }
}

.einspalter { /*??? */
	margin: 50px 0 80px 0;
	width: 100%;
}




/*.hauptinhalt {
  float: left;
	margin: 40px 0 40px 0;
  padding: 3% 3% 0 8%;
  width: 65%;	}

@media only screen and (max-width: 750px) {
	.hauptinhalt {
		float: none;
		padding: 0 5%;
    width: 100%; }
}*/




/*
--------------------------------------------------------
					5.2 Standardseite - Allgemeine Ränder im Inhaltsbereich
--------------------------------------------------------
*/

.textkopf {
	margin: 0 0 15px 0;
}

.textkopf,
.bildunterschrift,
.empfehlungen,
.inhalt {
/*.nochfragen { ??? */
	padding: 0 18% 0 18%;
}

@media only screen and (max-width: 960px) {
	.textkopf,
	.bildunterschrift,
	.empfehlungen,
	.inhalt,
	.nochfragen {
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		width: 615px; }
}

@media only screen and (max-width: 750px) {
	.textkopf,
	.bildunterschrift,
	.empfehlungen,
	.inhalt,
	.nochfragen {
		margin-left: 15px;
		margin-right: 15px;
		padding: 0/* 20px*/;
		width: auto; }
}


/*
--------------------------------------------------------
					5.3 Standardseite - Titelbereich
--------------------------------------------------------
*/

.textkopf P:first-child {
	color: rgba(185,17,9,1);
	font-weight: bold;
	font-size: 0.9rem;
}

.textkopf P:last-child {
	font-size: 1rem;
}

.figure,
.figure IMG {
	width: 100%;
}

@media only screen and (min-width: 750px) { /* ### könnte verbessert werden */
	.figure {
		padding: 30px 9% 5px 9%;
	}
}

.bildunterschrift {
	/*margin: 0 0 50px 0;*/
	font-size: 0.8rem;
	font-style: italic;
}

.bildunterschrift .copyright,
.bildunterschrift A {
	color: rgba(136,136,136,1);
}

.bildunterschrift A:hover {
	border-bottom: 1px solid rgba(160,160,160,1);
	/*padding-bottom: 0.1rem; ### v3.2 */
}



/*
--------------------------------------------------------
					5.4 Standardseite - Inhaltsbereich
--------------------------------------------------------
*/

/* .inhalt siehe auch 4.2 */

.inhalt {
	color: rgba(48,48,48,1); /*rgba(68,68,68,1);*/
	font-size: 1rem;
	margin-top: 50px;
}

.textkopf A,
.inhalt A {
	border-bottom: 1px solid rgba(48,48,48,1);
}

.textkopf A:hover,
.inhalt A:hover {
	border-bottom: 1px solid rgba(185,17,9,1);
	color: rgba(185,17,9,1);
}

.inhalt P {
	margin: 0 0 1rem 0;
}

.inhalt .topseite P {
  margin: 0;
}

.inhalt UL {
	margin: 0 0 0 30px;
}

.inhalt LI {
	/*font-size: 1rem;*/
}

.circle-gross {
  float: left;
  width: 180px;
	margin: 0 0 10px 5px;
}

.circle-klein {
	float: left;
	margin: -10px 50px 50px -20px;
	width: 160px;
}

.einschub {
	padding-left: 5%;
}

.listenabstand LI {
	padding-bottom: 15px;
}

@media only screen and (max-width: 600px) {
	.circle-gross {
		width: 120px;
	}
	.circle-klein {
		width: 120px;
	}
}



/*
--------------------------------------------------------
						5.5 Startseite - Inhaltsbereich
--------------------------------------------------------
*/

.sichtbar0,
.sichtbar2 {
  display: none;
}

@media only screen and (max-width: 750px) {
  .sichtbar2 {
    display: block;
  }
  .sichtbar1 {
    display: none;
  }
}

.anriss_bild_text IMG {
	margin: 0 0 10px;
	max-height: 150px;
	width: 42%;
}

.anriss_bild_text A:hover {
  color: rgba(48,48,48,1);
}

.anriss_text P:first-child { /* rote 1. Überschrift */
	color: rgba(185,17,9,1);
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0 0 5px 0;
}

.anriss_text H2 { /* Hauptüberschrift */
  font-size: 1.3rem;
}

.anriss_text P:last-child { /* Erklärung */
  font-size: 1.1rem;
	padding: 10px 0 30px 0;
}

.mehrerfahren {
  color: rgba(160,160,160,1);
	font-weight: bold;
}

.mehrerfahren:hover {
	border-bottom: 1px solid rgba(160,160,160,1);
}

.leer_spalte_rechts {
	height: 100px;
}

.nurmobil {
  display: none;
}

.terminbereich A:hover {
  color: rgba(48,48,48,1);
}

.terminbereich A P:last-child,
.meistgelesen A P:last-child,
.vormerken A P:last-child {
  font-size: 1rem;
	margin: 0 0 30px 0; }

@media only screen and (max-width: 750px) {
	.anriss_bild_text IMG {
		max-width: 215px; /* ### darf größer werden */
  }

	.leer_spalte_rechts {
		height: 10px;
  }

  .nurmobil {
    display: block;
    margin: 0 0 100px 0;
  }
}



/*
--------------------------------------------------------
					5.6 Standardseite - Empfehlungs- und Fragenbereich
--------------------------------------------------------
*/

/* siehe auch 5.2 */

.empfehlungen A,
.nochfragen A {
	border-bottom: 1px solid #303030;
/*font-size: 0.85rem;*/
}

.empfehlungen HR,
.nochfragen HR {
	margin-top: 35px;
}

.empfehlungen UL {
	margin: 0 0 35px 30px;
}

.empfehlungen LI:first-child {
	margin-top: 15px;
}

.empfehlungen P {
	font-weight: bold;
	text-transform: uppercase;
}

.empfehlungen A:hover,
.nochfragen A:hover {
	border-bottom: 1px solid rgba(185,17,9.1);
	color: rgba(185,17,9.1);
}



/*
--------------------------------------------------------
						5.7 Standardseite - Benutzereingaben
--------------------------------------------------------
*/

INPUT,
TEXTAREA {
  border: 1px solid rgba(0,148,255,1);
	border-radius: 7px;
	font: 1rem "Courier New", Courier, monospace;
	padding: 10px;
	width: 100%;
}

LABEL {
	font-size: 0.7rem;
}

FORM P {
	line-height: 1;
}

.pbutton A,
.pbutton INPUT {
  border-radius: 7px;
  padding: 8px 16px;
  float: none;
  color: white;
  letter-spacing: 0.1rem;
  background: rgb(68,68,68,1);
  width: auto;
}

.pbutton A:hover {
  background: rgb(34,34,34,1);
  color: white;
}



.radiobuttonauswahl {
  border: 1px solid rgba(0,148,255,1);
  border-radius: 7px;
  margin-top: -15px;
  padding: 5px;
  text-align: left;
}

input[type="checkbox"],
input[type="radio"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://www.pbaumann.de/img/checkradio.png) left top no-repeat;
    /*cursor:pointer;*/
}
input[type="checkbox"]:checked + label span {
    background:url(https://www.pbaumann.de/img/checkradio.png) -19px top no-repeat;
}

input[type="radio"] + label {
	font-size: 1rem;
}

input[type="radio"] + label span {
	display: inline-block;
	width: 19px;
	height: 19px;
	margin: 0;
	vertical-align:middle;
	background:url(https://www.pbaumann.de/img/checkradio.png) -39px top no-repeat;
}
input[type="radio"]:checked + label span {
	background:url(https://www.pbaumann.de/img/checkradio.png) -58px top no-repeat;
}

INPUT[type="email"],
INPUT[type="text"] {
  background-color: rgba(255,255,255,1);
  color: rgba(48,48,48,1);
}

INPUT[type="radio"] {
  width: 10px;
}



/*
--------------------------------------------------------
					5.8 Terminseite
--------------------------------------------------------
*/

.termin DIV {
  color: rgba(185,17,9,1);
}

.terminseite A,
.terminseite DIV,
.terminseite H2,
.terminseite P {
  color: rgba(48,48,48,1);
}

.terminseite A:hover,
.terminseite DIV:hover,
.terminseite H2:hover,
.terminseite P:hover {
  color: rgba(48,48,48,1);
}

.terminseite H2 {
  padding: 10px 0;
}



/*
--------------------------------------------------------
					6 Footer
--------------------------------------------------------
*/

.footer {
  background-color: rgba(51,51,51,1);
	color: rgba(102,102,102,1);
	font-size: 1rem;
	padding: 25px 15px 15px;
}

.footer A {
  color: rgba(170,170,170,1);
	text-decoration: none;
}

.footer A:hover {
  color: rgba(238,238,238,1);
}

.footer SPAN {
  line-height: 1.6;
}

.footer SPAN::after {
  content: '\A';
  white-space: pre;
}

.fcol {
  float: left;
  /*min-height: 1px;*/
  padding: 0 4% 0;
  position: relative;
  width: 50%;
}

.firstcol {
  text-align: right;
}

.frow {
  /* max-width: 100%;*/
  min-height: 50px;
  width: 100%;
  padding: 0 8%;
  /* width: 960px; */
}

.mycopyright {
  clear: both;
  font-size: 0.5rem;
  margin: 20px 0;
}

.version {
  clear: both;
  font-size: 0.5rem;
  padding: 50px 0;
  text-align: center;
}

@media only screen and (max-width: 650px) {
	.footer,
  .firstcol {
		text-align: center;
	}

  .fcol {
    float: none;
    margin: 50px 0;
    width: 100%;
  }
}



/*
--------------------------------------------------------
					7 Navi-Bottom
--------------------------------------------------------
*/

.navi-bottom {
	background-color: rgba(255,255,255,1);
	border-top: 3px groove rgba(221,221,221,1);
	color: rgba(136,136,136,1);
	font-size: 0.6rem;
	padding: 0;
	position: fixed;
	left: 0px;
	bottom: 0px;
  height: 60px;
	width: 100%;
}

/*.footer IMG {
}

.footer IMG:hover {

}*/

.nb-row {
	padding: 10px 0 0;
	/*padding: 0 8%;*/
	width: 100%;
}

.nb-col {
	float: left;
	/*min-height: 1px; /* ??? */
	position: relative; /* ??? */
	text-align: center;
	width: 25%;
}

.nb-col:nth-child(4) {
	width: 0px;
	visibility: hidden;
}

.nb-col:last-child {
	/*border-right: none;*/
	/*float: left;*/
}

.nb-col A {
	color: rgba(0,0,0,1);
	opacity: 0.8;
	text-decoration: none;
}

.nb-col A:hover {
	opacity: 1;
}

.nb-col A IMG {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50px;
}

.nb-col A SPAN {
	font-size: 10px;
}

@media only screen and (min-width: 470px) {
	.nb-row {
		padding: 10px 10% 0 10%;
	}

@media only screen and (min-width: 600px) {
	.navi-bottom {
		height: 66px;
	}

	.nb-col {
		width: 20%;
	}

	.nb-col:nth-child(4) {
		width: 20%;
		visibility: visible;
	}
}

@media only screen and (min-width: 960px) {
	.navi-bottom {
		margin: 0 auto 0 auto;
		max-width: 960px;
		overflow: hidden;
		position: relative;
		visibility: hidden;
	}

	.nb-col A SPAN {
		font-size: 12px;
	}

	.nb-col:nth-child(4) {
		visibility: hidden;
	}
}





/*
--------------------------------------------------------
					8 clearfix
--------------------------------------------------------
*/

.article:before,
.article:after,
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: "";
    display: table; }

.article:after,
.clearfix:after,
.row:after {
    clear: both; }

.article,
.clearfix ,
.row {
    zoom: 1; /* Für IE6/7 - nicht W3C-konform */ }