/*
Basisdefinition fuer das Theme, v.a. alle Textelemente
Die CSS-Styles werden im Frontend und im Backend-Block-Editor verwendet
*/




/* -------------------------------------------------------------------------- */
/*	1. CSS Reset Basics
/* -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
	}

blockquote:before, blockquote::before,
blockquote:after, blockquote::after {
	content: "";
	}




/* -------------------------------------------------------------------------- */
/*	4. FONTS ALLGEMEIN
/* -------------------------------------------------------------------------- */

/* ------ grundgestaltung text, dazugehoerende links ------ */

* {
	font-family: var(--font-general-family);
	}
h1, h2, h3, h4, h5, h6, 
p, blockquote, address,
big, cite, code, em, font,
img, small, strike, sub, sup, 
li, ol, ul, fieldset, form,
label, legend, button, table,
caption, tr, th, td {
	font-weight: var(--font-general-regular);
	}

.entry-content{
	font-size: 1em;
	line-height: 1.6em;
	}
.footer {
	font-size: 1em;
	line-height: 1.6em !important;
	}

a {
	text-decoration: none;
	}
a:link, 
a:visited {
	text-decoration: underline;
	color: var(--color-general-link);
	}
a:hover {
	text-decoration: underline;
	color: var(--color-general-txt);
	}
a:focus {
	text-decoration: none;
	}
a:active {
	text-decoration: underline;
	}
strong { font-weight: var(--font-general-bold) !important; }

/* ------ grundgestaltung ueberschriften ------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading-family);
	font-weight: var(--font-heading-regular);
	padding: 0 0 0 0;
	display: block;
	}
h1, h3, h5 {  }
h4 { text-transform: uppercase; letter-spacing: 1px; }
h6 { font-weight: var(--font-heading-bold) !important; }

h1 { font-size: 1.4em; line-height: 1.1em; }
h2 { font-size: 1.3em; line-height: 1.15em; }
h3 { font-size: 1.2em; line-height: 1.2em; }
h4 { font-size: 1.1em; line-height: 1.3em; }
h5 { font-size: 1.1em; line-height: 1.3em; }
h6 { font-size: 1.0em; line-height: 1.4em; }

	@media (min-width:782px) {
			h1 { font-size: 1.8em; line-height: 1.1em; }
			h2 { font-size: 1.6em; line-height: 1.15em; }
			h3 { font-size: 1.4em; line-height: 1.2em; }
			h4 { font-size: 1.2em; line-height: 1.3em; }
			h5 { font-size: 1.2em; line-height: 1.3em; }
			h6 { font-size: 1.0em; line-height: 1.4em; }
			}

h1::first-letter, h2::first-letter, h3::first-letter, 
h4::first-letter, h5::first-letter, h6::first-letter {
	position: relative;
	margin-left: -0.07em;
	}

/* ------ grundgestaltung listen ------ */
ul { list-style-type: disc; }
ol { list-style-type: decimal; }

ul,
ol {
	list-style-position: outside;
	padding-left: 1em !important;
	}
.entry-content > ul,
.entry-content > ol {
	padding-left: 2em !important;
	}

li ul {
	list-style: circle;
	list-style-position: outside;
	margin: 0.2em 0 0.2em 0;
	padding-left: 1em;
	}
li ol {
	list-style-position: outside;
	margin: 0.2em 0 0.2em 0;
	padding-left: 1.2em;
	}


/* ------ grundgestaltung backend-stilvorlage "adresse" ------ */
address {
	font-style: italic;
	padding: 0;
	}

/* ------ grundgestaltung backend-stilvorlage "mark" ------ */
mark {
	padding: 0px 0.2em;
	background-color: var(--color-general-link);
	color: white;
	display: inline;
  /* Needs prefixing */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	font-family: inherit;
	font-weight: inherit;
	}

/* ------ gestaltung der horizontalen linie ------ */
hr {
	height: 0;
	border: none;
	border-bottom: 1px solid;
	}

/* ------ gestaltung der horizontalen linie ------ */
small {
	font-size: 0.85em;
	}


/* ------ grundgestaltung tabellen ------ */

table {
	border-collapse: collapse;
	}
table p,
table a:link,
table a:visited {
	margin: 0;
	}
table p+p {
	margin: 0;
	}
tr, td,
.odd tr, .even tr,
.odd td, .even td {
	margin: 0;
	padding: 0;
	}
td, th { vertical-align: top; }
td, th { padding: 0.2em 0.4em; }
th {  }

td img.alignleft {
    margin: 0;
	float: left;
	}


/* ------ Gutenberg > Vordefinierte Schriftgroessen ------ */

.has-small-font-size, 
.has-medium-font-size, 
.has-large-font-size, 
.has-huge-font-size {
	line-height: 1.6em !important;
	}

.has-small-font-size { font-size: 0.85em !important; }
.has-medium-font-size { font-size: 1.2em !important; }
.has-large-font-size { font-size: 1.4em !important; }
.has-huge-font-size { font-size: 1.6em !important; }


/* ------ Gutenberg > Initialbuchstaben ------ */

p.has-drop-cap:not(:focus):first-letter {
	font-size:5em;
	float:left;
	margin: 0.1em 0.05em 0 -0.07em;
	text-transform:uppercase;
	}





/* -------------------------------------------------------------------------- */
/*	BILDER
/* -------------------------------------------------------------------------- */

/* dieser teil verkleinert die bilder, so dass sie in den inhalts-bereich passen.
- wird nur bei bildern angewendet, die via wordpress (by targeting size-* classes) hochgeladen wurden.
- andere bilder werden ignoriert. ansonsten kann auf die anderen bilder die klasse (class) "size-auto" angewendet werden. */
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
img.size-medium-large,
.attachment img {
	max-width: 100%; /* wenn die bilder zu breit fuer das uebergeordnete element sind, werden sie darauf eingepasst. */
	height: auto; /* uebersteuert die hoehe (height) und passt sich proportional an die neue breite an. */
	}
img.size-medium {
	/*width: 50%; /* uebersteuert die hoehe (height) und passt sich proportional an die neue breite an. */
	}

/* ------ die gestaltung der bilder innerhalb des themes ------ */ 
img.alignleft,
.wp-caption.alignleft {
	display: inline;
	float: left;
	margin-right: 0.9em;
	margin-top: 0.3em;
	}
img.alignright,
.wp-caption.alignright {
	display: inline;
	float: right;
	margin-left: 0.9em;
	margin-top: 0.3em;
	}
img.aligncenter,
.wp-caption.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
img.alignleft,
img.alignright,
img.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
	margin-bottom: 0.35em;
    border: none;
	}
.alignnone {
    margin: 0.5em 0.7em -0.5em 0;
	}


/* ------ die gestaltung der bilder mit bildlegende (caption) ------ */
/* ------ gestaltet das caption-grundelement ------ */
.wp-caption {}

/* ------ gestaltet das caption-bild ------ */
.wp-caption img {}

/* ------ gestaltet die caption-bildlegende im detail ------ */
.wp-caption p.wp-caption-text {
	font-size: 0.8em;
	margin-top: -5px;
	}


/* ------ Caption Gestaltung ------ */

.wp-block-image figcaption,
p.wp-caption-text {
	width: 100%;
	margin-top: .5em !important;
	margin-bottom: 1em !important;
	font-size: 0.8em;
	line-height: 1.4em;
	}
p.wp-caption-text {
	margin-top: 0 !important;
	}




/* -------------------------------------------------------------------------- */
/*	FORM - diverse Eingabefelder
/* -------------------------------------------------------------------------- */

/* --- Eingabefeld Text --- */

input[type="text"],
input[type="date"], 
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="search"],
input[type="submit"],
textarea {
	width: 100%;
	margin: 0 !important;
	font-size: 1.1rem;
	line-height: 1.4em;
	font-weight: var(--font-general-regular);
	color: var(--color-general-txt);
	letter-spacing: 0.03em;
	line-height: 30px;
	box-sizing: border-box;
	padding: 2px 7px;
	border: 1px solid #ddd;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-moz-appearance: none;
		-webkit-appearance: none;
    }


/* --- Placeholder in input-Felder & in textarea-Feldern --- */

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
input::-moz-placeholder { /* Firefox 19+ */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
input:-moz-placeholder { /* Firefox 18- */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
input:-ms-input-placeholder { /* IE 10+ */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
input::placeholder { 
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}

textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
textarea::-moz-placeholder {  /* Firefox 19+ */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
textarea:-moz-placeholder { /* Firefox 18- */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
textarea:-ms-input-placeholder { /* IE 10+ */
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}
textarea::placeholder {
	font-size: inherit;
	color: #aaa;
	letter-spacing: 0.01em;
	}



/* --- Farbkorrektur Input-Felder --- */

textarea:focus, 
input:focus {
	outline: 1px solid var(--color-accent) !important;
	}
*:focus {
	outline: 1px solid var(--color-accent) !important;
	}




/* -------------------------------------------------------------------------- */
/*	SUCHE
/* -------------------------------------------------------------------------- */

.search-wrap {
	margin-top: 0 !important;
	margin-bottom: var(--spacer-text) !important;
	}

.searchform {
	width: 100%;
	/*max-width: 350px;*/
	}
.searchform > div {
	position: relative;
	}
.searchform .screen-reader-text {
	font-weight: var(--font-general-bold);
	display: block;
	margin-bottom: 4px;
	}

.searchform input[type="text"],
.searchform input[type="search"],
.wp-block-search input[type="text"],
.wp-block-search input[type="search"] {
	padding: 0 42px 0 10px;
	position: relative;
	background-color: transparent;
	}

.searchform input[type="submit"] {
	font-size: 0 !important;
	background: var(--color-general-txt);
		-webkit-mask-image: url(../img/icon-search.svg);
		-webkit-mask-size: auto 100%;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-image: url(../img/icon-search.svg);
		mask-size: auto 100%;
		mask-repeat: no-repeat;
		mask-position: center;
	position: absolute;
	right: 0;
	bottom: 0;
	border: 0px solid #ddd;
		-moz-border-radius: 0 3px 3px 0;
		-webkit-border-radius: 0 3px 3px 0;
		border-radius: 0 3px 3px 0;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	}

		@media (min-width: 782px) {
			.searchform:hover input[type="text"],
			.searchform:hover input[type="search"] {
				border-color: var(--color-accent) !important;
				}
			.searchform:hover input[type="submit"] {
				background: var(--color-accent);
				}
			}




/* -------------------------------------------------------------------------- */
/*	VERSCHIEDENES
/* -------------------------------------------------------------------------- */

.clear {clear: both;}
.img-full {margin: 1em 0 0 0;}
p:empty::before { content: none; }

.tadv-color,
.tadv-background-color {
	font-family: inherit !important;
	font-weight: inherit !important;
	}

.tadv-background-color { 
	display: inline;
	padding: 0em 0.3em 0.05em 0.3em;
/* Needs prefixing */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	}









/* ------ text-align korrigieren ------ */

.entry-content > .has-text-align-left {
	text-align: left;
	}
.entry-content > .has-text-align-right {
	text-align: right;
	}
.entry-content > .has-text-align-center,
.entry-content .has-text-align-center {
	text-align: center;
	}

	@media (max-width: 599px) {
			.entry-content > .has-text-align-left,
			.entry-content > .has-text-align-right,
			.entry-content .has-text-align-right,
			.entry-content > .has-text-align-center,
			.entry-content > .wp-block-classic p {
				/*text-align: left !important;*/
				}
			}