/*
Theme Name: astrozeit24
Theme URI: http://www.astrozeit24.de
Description: Sidebar left, Main article, Sidebar right
Author: John Helwig
Version: 2021.5

License: 1ST TEC WEBDESIGN
License URI: http://www.tipps.1st-tec.de
*/

/* Konstanten */
:root {
	--page_max_width: 999px;
	--aside_width: 233px;
	--aside_padding: 15px;
	--section_width: 503px;

	--box_bg_color: #fae3ea;
	--box_bg_color_dark: #f5d4de;
	--box_border_color: #dfabc2;
	--box_padding_right: 0.75em;

	--button_color: #f54199;

	--div_margin_bottom: 1em;

	--font_color: #6d6d6d;

	--header_color: white;
	--header_bg_color: #dfabc2;
	--header_border_color: white;
	--header_dropdown_color: white;
	--header_dropdown_bg_color: rgb(197, 139, 165);	/* #c58ba5 */
	--header_dropdown_bg_color2: rgba(197, 139, 165, 0.85);	/* #c58ba5d9 */
	--header_hover_bg_color: #a36480;

	--header_height: 48px;

	--hr_color: #d7d7d7;

	--morebox_bg_color: white;

	--list_color: #eb588b;
}


* {
	box-sizing: border-box;
	color: inherit;

	font-family: inherit;
	font-size: inherit;

	height: inherit;
	max-height: inherit;
	max-width: inherit;
	width: inherit;
	word-break: normal;	/* 05.07.2023 Geändert break-word; */
	overflow-wrap: anywhere;	/* 05.07.2023 Hinzugefügt */
}

html {
	font-family: "Open Sans", Arial, Verdana, Geneva, Helvetica, sans-serif;
}
audio {
	height: 3em;
	width: 90%;
}
b {
	font-weight: bold;
}
div, p {
	line-height: 1.5em;
	margin-bottom: var(--div_margin_bottom);
}
.block {
	margin-bottom: 0;
}
.block div {
	margin-bottom: 0;
}

form {
	width: auto;
}
form label,
form legend {
	font-weight: bold;
	margin-bottom: var(--div_margin_bottom);
}

h1 {
}
h2 {
	/*background-color: inherit;*/
	color: var(--button_color);
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
}
h3 {
	background-color: var(--header_bg_color);
	color: var(--header_color);
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	/*margin-bottom: var(--div_margin_bottom);*/
	padding: 0.2em;
	text-align: center;
}
h4 {
	/*background-color: inherit;*/
	color: #d192a9;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	/*text-align: left;*/
}

h2 + p {
	margin-top: 0.7em;	/* 15.09.2021 Hinzugefügt */
}

hr {
	border-bottom: 1px solid transparent;
	border-left: 0;
	border-right: 0;
	border-top: 1px solid var(--hr_color);
	margin-bottom: 0.5em;
}
hr.gray {
	border-bottom: 0;
	border-top: 1px solid #ebebeb;
/*	margin: 29px 0 calc( 29px + 0.9em ) 0;*/
}

img {
	display: block;
	height: auto;
	margin: 0 auto var(--div_margin_bottom) auto;	/* 15.09.2021 Geändert margin: 0 auto calc( var(--div_margin_bottom) / 2 ) auto; */
	width: 100%;
	/* beim Image max-width/max-height rausnehmen für ganze Bildschirmbreite */
}
img.left {
	float: left;
}
img.right {
	float: right;
}

strong,
.strong {
	font-weight: bold;
}
small,
.small {
	font-size: small;
}

.left {
	text-align: left;
}
.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: auto;
}
.right {
	text-align: right;
}
.bottom {
	vertical-align: bottom;
}
.middle {
	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
}
.top {
	vertical-align: top;
}

.hidden {
	display: none;
}

ol,
ul {
	display: block;
	line-height: 1.5em;
	margin-left: var(--aside_padding);
	margin-bottom: var(--div_margin_bottom);
	width: auto;
}
ol:not(.none) {
	list-style-type: decimal;
}
ul:not(.none) {
	list-style-type: disc;
}
ol[class^="fa"] li,
ul[class^="fa"] li {
	padding-left: 0.5em;
}
ol li::marker,
ul li::marker {
	color: var(--list_color);
}
ol.dark li::marker,
ul.dark li::marker {
	color: var(--font_color);
}

/* Clear float */
.clear::after {
	clear: both;
	content: "";
	display: table;
}

/* Error */
.error {
	border: 2px solid var(--button_color);
}


/* FontAwesome */
ol.facaret-right li::marker,
ul.facaret-right li::marker {
	content: "\f0da";
	font-family: FontAwesome;
}

ol.facheck li::marker,
ul.facheck li::marker {
	content: "\f00c";
	font-family: FontAwesome;
}

ol.faeye li::marker,
ul.faeye li::marker {
	content: "\f06e";
	font-family: FontAwesome;
}

ol.fastar li::marker,
ul.fastar li::marker {
	content: "\f005";
	font-family: FontAwesome;
}

/* Quelle: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
/* =blockquote and q
-------------------------------------------------------------- */
blockquote, q {
	quotes: "\201C""\201D""\2018""\2019";
}
blockquote {
	background: var(--box_bg_color);
	border-left: 10px solid var(--box_border_color);
	margin-bottom: var(--div_margin_bottom);
	margin-left: 0.5em;
	padding: 0.5em 1em;
	width: auto;
}
blockquote cite {
	display: block;
	font-style: italic;
	text-align: right;
}
blockquote p {
	display: inline;
}
q::before {
	content: open-quote;
}
q::after {
	content: close-quote;
}

/* Modal Forms */
/* How TO - CSS/JS Modal (Quelle: https://www.w3schools.com/howto/howto_css_modals.asp) */
/* The Modal (background) */
#modal {
	animation-duration: 0.4s;
	animation-name: animate_opacity;

	background-color: rgba(0,0,0,0.3); /* Black w/ opacity *//* same as menu overlay */
	/*display: none; /* Hidden by default */
	height: 100%; /* Full height */
	left: 0;
	overflow: auto; /* Enable scroll if needed */
	padding-bottom: calc( 0.5 * var(--header_height) ); /* Location of the box */
	padding-top: calc( 0.5 * var(--header_height) ); /* Location of the box */
	position: fixed; /* Stay in place */
	top: 0;
	width: 100%; /* Full width */
	z-index: 10; /* Sit on top */
}

/* Modal Content */
#modal .modal-content {
	animation-duration: 0.4s;
	animation-name: animate_top, animate_opacity;

	background-color: #fefefe;
	border: 1px solid #888;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	margin: auto;
	max-width: calc( 0.8 * var(--section_width) );
	padding: 0;
	position: relative;
/* center vertical - start
	top: 50%;
	transform: translate(0, -50%);
center vertical - end */
	width: 80%;
}
#modal .modal-content.middle {
	animation-name: animate_top2middle, animate_opacity;
}

/* Add Animation */
@keyframes animate_top {
	from { top: -300px; }
	to {
		top: 0;
		/*top: 50%; /* center vertical */
	}
}
@keyframes animate_top2middle {
	from { top: -300px; }
	to {
		top: 50%; /* center vertical */
	}
}

@keyframes animate_opacity {
	from { opacity: 0; }
	to { opacity: 1; }
}

#modal .modal-content *:not(.iti):not(.iti__flag) {
	width: auto;
}
#modal .modal-content {
	height: auto;
	max-height: 100%;
	overflow: auto;
}

#modal .modal-content.middle {
	top: 50%;
	transform: translateY(-50%);
}

#modal .modal-content .close:not(.button) {
	height: 1.5em;
	width: 1.5em;
}

#modal .modal-content > div:not(:empty) {
/*	padding: var(--div_margin_bottom) 16px 0 16px;*/
	padding-left: 16px;
	padding-right: 16px;
}

#modal .modal-content .modal-header:not(:empty) {
	margin-top: calc( 0.5 * var(--div_margin_bottom) );
}

#modal .modal-content .modal-body { }

#modal .modal-content .modal-body form fieldset *:last-child {
	margin-bottom: 0;
}/*
#modal .modal-content .modal-body form label,
#modal .modal-content .modal-body form legend {
	font-weight: bold;
	margin-bottom: var(--div_margin_bottom);
}*/
#modal .modal-content .modal-body form input:not(.button) {
	width: 100%;
}
#modal .modal-content .modal-body form textarea {
	border: 1px solid black;
	box-shadow: none;
	box-sizing: border-box;
	height: 6em;
	resize: none;
}
#modal .modal-content .modal-body form #message {
	width: 100%;
}

#modal .modal-content .modal-footer {
	margin-bottom: 0;
}
#modal .modal-content .modal-footer:not(:empty) { }

@media screen and (min-width: 533px) {	/* section_width + 2 * aside_padding */
	#modal {
		padding-top: calc( 1.5 * var(--header_height) );
	}
}	/* screen and (min-width: 533px) */


/* Fade (jQuery-Alternative) */
.fade_in {
	opacity: 1;
	transition: all 0.4s ease;
	visibility: visible;
}
.fade_out {
	opacity: 0;
	transition: all 0.4s ease;
	visibility: hidden;
}


/* =Anpassungen zu AddOns
---------------------------------------------------------------*/
/* Anpassungen zu /font-awesome-4.7.0/css/font-awesome.css: */
/*ADD*/.fa-5stars::before {
         content: "\f005\f005\f005\f005\f005";
         letter-spacing: 2px;
       }
/*ADD*/.fa-5stars-o::before {
         content: "\f006\f006\f006\f006\f006";
         letter-spacing: 2px;
       }
/* Anpassungen zu /wp-content/themes/astrozeit24/js/mmenu-js-master/dist/mmenu.css: */
/*ADD*/.mm-menu_offcanvas {
         z-index: 10;
       }
/* Anpassungen zu /wp-content/themes/astrozeit24/js/intl-tel-input-js-master/build/css/intlTelInput.min.css: */
/*ADD*/.iti {
         margin: 0;
         width: 100%;/*inherit;/*auto;*/
       }
       .iti div {
         margin: 0;
       }
/*ADD*/.iti--allow-dropdown .iti__flag-container,
       .iti--separate-dial-code .iti__flag-container {
         width: auto;
       }
/* Anpassungen zu /wp-content/themes/astrozeit24/js/tarteaucitron.js-master/css/tarteaucitron.css: */
/*ADD*/#tarteaucitronRoot * {
         height: auto;
         width: auto;
       }

/* body */
body {
	background-color: white;
}

/*.page*/
.page {
	color: var(--font_color);
	margin: 0 auto;
	max-width: var(--page_max_width);
	width: 100%;
}


/* =Header
---------------------------------------------------------------*/

header {
	background: var(--header_bg_color) none repeat scroll 0 0;
	height: var(--header_height);
	position: fixed;
	top: 0;
	width: 100%;	/*inherit;*/
	z-index: 10;
}
header * {
	color: var(--header_color);
}

header > * {
	border-left: 1px solid var(--header_border_color);
/*	max-height: 100%;*/
	padding: 0 2%;
	width: auto;
}
header > *:first-child {
	border-left: none;
}

header > a {
	float: left;
}
header > a.logo {
	padding: 0 40px;	/*Center logo (logo width=130px): 0 calc( ( 100% - 130px - 2 * ( 2% + 51px + 2% ) ) / 2);*/
	width: auto;
}
header > div {
	float: right;
	margin: 0;
}

header > div.socials {
	display: none;
}
header > a:not(.logo):active,
header > a:not(.logo):hover,
header > div.dropdown:active,
header > div.dropdown:hover,
header > div.socials *:active,
header > div.socials *:hover {
	background-color: var(--header_hover_bg_color);
	transition: background-color 1s ease 0s;
}
header > div.socials *:active img,
header > div.socials *:hover img {
	transform: scale(1.1);
}


/* =Menu
---------------------------------------------------------------*/

#menu {
/*
	--mm-line-height: 20px;
	--mm-listitem-size: 44px;
	--mm-navbar-size: 44px;	/ * 60px * /
	--mm-offset-top: 0;
	--mm-offset-right: 0;
	--mm-offset-bottom: 0;
	--mm-offset-left: 0;
*/
	--mm-color-border: rgba( 255,255,255, 0.25 );
	--mm-color-button: rgba(255,255,255,.8);
	--mm-color-text: rgba(255,255,255,.8);
	--mm-color-text-dimmed: rgba(255,255,255,.8);
	--mm-color-background: var(--header_bg_color);
/*
	--mm-color-background-highlight: rgba( 255,255,255, 0.2 );
	--mm-color-background-emphasis: rgba( 255,255,255, 0.15 );
	--mm-shadow: none;
*/

	width: 80vw;
}
#menu.mm-menu_opened + #top > header {
	top: calc( -1 * var(--header_height) );
}
#menu * {
	height: auto;
}
#menu div {
	margin-bottom: 0;
}
#menu .mm-searchfield input {
	background-image: url("/uploads/images/app/suche_icon.png");
	background-position: 98% center;
	background-repeat: no-repeat;
	background-size: contain;
}
#menu .mm-searchfield input::placeholder {
	color: var(--mm-color-text);
}
#menu .mm-listitem:after {
	left: 0;
}
#menu .mm-listitem__btn {
	background: var(--header_hover_bg_color);
}

div.mm-wrapper__blocker.mm-slideout {
	margin-bottom: 0;
}


/* =Breadcrumb
---------------------------------------------------------------*/
nav.breadcrumb {
	line-height: 2em;	/* Testzweck für google, da anklickbare Elemente zu dicht */
	margin-bottom: var(--div_margin_bottom);
	padding: 0 var(--aside_padding);
}


/* =Sitemap
---------------------------------------------------------------*/
.sitemap li {
	line-height: 2em;	/* Testzweck für google, da anklickbare Elemente zu dicht */
}


/* =Dropdown
---------------------------------------------------------------*/

.dropdown {
	display: inline-block;
	position: relative;
	white-space: nowrap;
}
.dropdown img {
	height: var(--header_height);
	line-height: 0;
	margin: 0;
	padding: 0;
	width: auto;
}

.dropdown:hover .items {
	height: auto;
	opacity: 1;
	transition: height 1s ease 0s,opacity 1s ease 0s;
}

.dropdown .items {
	background-color: var(--header_bg_color);
	height: 0;
	/*line-height: 3em;*/
	margin: 0;
	opacity:0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: var(--header_height);
	transition: all 0.5s ease 0s;
	width: 150%;	/*170px;*/
	/*z-index: -1;*/
}
.dropdown .items * {
	/*height: auto;*/
	margin: 0;
	/*padding: 0;*/
	padding-left: 2%;
	width: auto;
}
.dropdown .items a {
	display: inline-block;
	text-decoration: none;
	width: 100%;
}
.dropdown .items img {
	float: left;
}

.dropdown .items > div:nth-child(2n) {
	background-color: var(--header_dropdown_bg_color);
	background-color: var(--header_dropdown_bg_color2);
}

.dropdown.country {
	background-image: url("/uploads/images/app/icons/flagge_pfeil.png");
	background-position: 75% center;
	background-repeat: no-repeat;
	background-size: contain;
}
.dropdown.country .items a.flag span {
	line-height: var(--header_height);
}
.dropdown.country .items a.flag span.de::after {
	content: "DE";
}
.dropdown.country .items a.flag span.at::after {
	content: "AT";
}
.dropdown.country .items a.flag span.ch::after {
	content: "CH";
}

@media screen and (min-width: 575px) {	/* bei Anzeige von Socials in Header */
	.dropdown .items {
		width: 200%;
	}
	.dropdown.country .items a.flag span.de::after {
		content: "Deutschland";
	}
	.dropdown.country .items a.flag span.at::after {
		content: "Österreich";
	}
	.dropdown.country .items a.flag span.ch::after {
		content: "Schweiz";
	}
}	/* screen and (min-width: 575px) */

/* main */
main {
	margin-top: var(--header_height);
}

/* .headerpic */
.headerpic #branding {
	position: absolute;
	top: var(--header_height);
	z-index: -1;
}


/* =Section
---------------------------------------------------------------*/

section {
/* Um Content zu begrenzen:*/
/* Für ganze Contentbreite scheitert im Tablet-Layout!!*/
margin: 0 auto;
max-width: calc( var(--section_width) + 2 * var(--aside_padding) );
/**/
	padding: 0 var(--aside_padding);
}
#content {
	width: 100%;	/* WICHTIG!! */
}


/* =Quickbuttons
---------------------------------------------------------------*/

#quickbuttons {
	border-bottom: 1px solid var(--hr_color);
	border-top: 1px solid var(--hr_color);
	text-align: center;
}
#quickbuttons div {
	margin-top: var(--div_margin_bottom);	/* Gleicher Abstand oben wie unten */
}
#quickbuttons div > * {
	display: inline-block;
	width: 30%;	/* 3 Stück, etwa 33%, etwas Puffer abziehen... */
}
#quickbuttons div img {
	margin-bottom: 0;
}

#quickbuttons > div:first-child {
	margin-bottom: 0.3em;	/* 02.11.2022 Hinzugefügt */
}

/* rating/rating_bar */
.rating div {
	margin-bottom: 0;
	text-align: left;
}
.rating .average::before {
	content: "Ø ";
	margin-left: .5em;
}
.rating > .fa {
	width: auto;
}
.rating_bar {
	color: #d2d2d2;
	display: inline-block;
	font-size: large;	/*5vw;	/*1.5em;*/
	width: auto;
}
.rating_bar > div {
	/*line-height: 2em;*/
	position: absolute;
	width: auto;
}
/*.rating > .fa::before, */
.rating_bar > div > div > .fa::before {
	color: #edb867;
}
.rating_bar > div > div {
	/*height: 2em;*/
	overflow: hidden;
	transition: width 2s ease 0s;
	white-space: nowrap;
}

.rating .count::after {
	content: " Bewertungen)";
}
.rating .count.eins::after {
	content: " Bewertung)";
}
.rating .count::before {
	content: "(";
}

@media screen and (max-width: 340px) {
	.rating .count::after {
		content: " Bew.)";
	}
	.rating .count.eins::after {
		content: " Bew.)";
	}
}	/* screen and (max-width: 340px) */


/* #rater */
#rater {
	display: block;
}


/* =Tabs (Quelle: http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery)
-------------------------------------------------------------- */

.tabs {
}

/*----- Tab Links -----*/
.tabs .tab-links {
	display: flex;
	margin: 0;
	overflow-x: auto;
	white-space: nowrap;
}

.tabs .tab-links li {
	background-color: var(--box_bg_color_dark);
	list-style: none outside none;
}

.tabs .tab-links a {
	border-right: 1px solid var(--morebox_bg_color);
	color: var(--list_color);
	display: inline-block;
	font-weight: bold;
	padding: 9px 15px;
	text-decoration: none;
	transition: background-color 1s ease 0s;
}
.tabs .tab-links a:hover {
	background-color: var(--header_hover_bg_color);
	color: var(--morebox_bg_color);
}

.tabs .tab-links .active a,
.tabs .tab-links .active a:hover {
	background-color: var(--box_bg_color);
	color: var(--font_color);
}

/*----- Content of Tabs -----*/
.tabs .tab-content {
	border: 1px solid var(--box_border_color);
	padding: var(--div_margin_bottom);
}
.tabs .tab-content .tab {
	display: none;
}
.tabs .tab-content .tab.active {
	display: block;
}
.tabs .tab-content .tab ul:not(.none) {
	padding-left: var(--div_margin_bottom);
}


/* =Agents Summary
---------------------------------------------------------------*/

.summary {
	border: 1px solid var(--box_border_color);
}
.summary > div {
	display: flex;
	margin-bottom: 0;
	padding: 0.5em;
}

.summary .button {
	flex: 0 0 auto;	/* https://css-tricks.com/boxes-fill-height-dont-squish/ */
	/*font-size: 1.4em;*/
	font-weight: bold;
	/*min-height: 5.5em;*/
	text-align: center;
	width: 7.5em;
}
.summary .callbutton {
	background-position: 0.15em, left;
	background-size: contain;
	border-radius: 6px;
	height: 3em;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 3em;
}
/*
.summary .callbutton[data-count]::after {
	background-color: var(--morebox_bg_color);
	border-radius: 50%;
	bottom: -0.75em;
	content: attr(data-count);
	height: 1.5em;
	position: absolute;
	right: -0.75em;
	width: 1.5em;
}
*/
.summary .state_0 {
	background-color: #fceef2;
}
.summary .state_0 .button::before {
	content: "Frei";
}
.summary .state_0 .callbutton {
	background-image: url("/uploads/images/app/icons/phone_icon_gruen_big.png"), linear-gradient(to bottom, #8ba820, #bbcb85, #8ba820);
	border: 1px solid #8ba820;
	box-shadow: 2px 2px 4px #8ba820;
}
/*
.summary .state_0 .callbutton[data-count]::after {
	border: 1px solid #8ba820;
	color: #8ba820;
}
*/
.summary .state_1 {
	background-color: #e8c9d4;
}
.summary .state_1 .button::before {
	content: "Im Gespräch";
}
.summary .state_1 .callbutton {
	background-image: url("/uploads/images/app/icons/phone_icon_rot_big.png"), linear-gradient(to bottom, #833855, #c398a8, #833855);
	border: 1px solid #923f60;
	box-shadow: 2px 2px 4px #833855;
}
/*
.summary .state_1 .callbutton[data-count]::after {
	border: 1px solid #833855;
	color: #833855;
}
*/
.summary .state_2 {
	background-color: #b5b4b4;
	display: none;
}
.summary .state_2 .button::before {
	content: "In Pause";
}
.summary .state_2 .callbutton {
	background-image: url("/uploads/images/app/icons/phone_icon_grau_big.png"), linear-gradient(to bottom, #5a5a5a, #b3b3b3, #5a5a5a);
	border: 1px solid #5a5a5a;
	box-shadow: 2px 2px 4px #5a5a5a;
}
/*
.summary .state_2 .callbutton[data-count]::after {
	border: 1px solid #5a5a5a;
	color: #5a5a5a;
}
*/
.summary .state_3 {
	background-color: #b5b4b4;
	display: none;
}
.summary .state_3 .button::before {
	content: "Abwesend";
}
.summary .state_3 .callbutton {
	background-image: url("/uploads/images/app/icons/phone_icon_grau_big.png"), linear-gradient(to bottom, #5a5a5a, #b3b3b3, #5a5a5a);
	border: 1px solid #5a5a5a;
	box-shadow: 2px 2px 4px #5a5a5a;
}
/*
.summary .state_3 .callbutton[data-count]::after {
	border: 1px solid #5a5a5a;
	color: #5a5a5a;
}
*/
.summary .state_4 {
	background-color: #b5b4b4;
	display: none;
}
.summary .state_4 .button::before {
	content: "Abwesend";
}
.summary .state_4 .callbutton {
	background-image: url("/uploads/images/app/icons/phone_icon_grau_big.png"), linear-gradient(to bottom, #5a5a5a, #b3b3b3, #5a5a5a);
	border: 1px solid #5a5a5a;
	box-shadow: 2px 2px 4px #5a5a5a;
}
/*
.summary .state_4 .callbutton[data-count]::after {
	border: 1px solid #5a5a5a;
	color: #5a5a5a;
}
*/


/* =Agents(_Test)
---------------------------------------------------------------*/

.agent_test {
	border: 1px solid var(--box_border_color);
	padding: 8px;
}

.agent_test > a {
	display: flex;
	margin-bottom: var(--div_margin_bottom);
	text-decoration: none;
}
.agent_test > a * {
	margin-bottom: 0;
}
.agent_test > :last-child {
	margin-bottom: 0;
}

.agent_test .image {
	flex: 1 0 auto;
	max-width: 121px;	/* Beraterbild-Breite */
	min-height: 109px;
	position: relative;	/* NEW-Bild positionieren */
/*
	filter: brightness(1);
	transition: filter 2s ease;
*/
	width: 33%;
}
.agent_test .image::after {
	background-image: linear-gradient(to bottom,#666,#bbb,#666);
	background-color: #999;
	color: #fff;
	content: "Zum Profil";	/* 10.11.2022 Geändert "Profil"; */
	display: block;
	font-size: 1.1em;	/* 10.11.2022 Geändert 1.2em; */
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	text-decoration: underline;
}
.agent_test[data-new] .image::before {
	content: url("/uploads/images/berater/neu.png");
	left: 0;
	position: absolute;
	top: 0;
}

.agent_test .data {
	margin-left: 1em;
	width: calc( 66% - 1em );
}
.agent_test .data .name {
	color: var(--list_color);
	/*display: inline-block;*/
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	/*white-space: nowrap;*/
	width: 100%;
}
.agent_test .data .name > span:first-child::after {
	content: ", ";
}
.agent_test .data .calls::after {
	content: " Beratungen";
}
.agent_test .data .online {
	width: 100%;
}
.agent_test .data .state {
	font-size: 1.2em;
	font-weight: bold;
	/*white-space: nowrap;*/
}

.agent_test .data > :not(.name):not(.online) {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.agent_test.state_0 {
	border: 1px solid #c2d87e;
}
.agent_test.state_1 {
	border: 1px solid #eaced8;
}
.agent_test.state_2 {
	border: 1px solid #d9d9d9;
}
.agent_test.state_3 {
	border: 1px solid #d9d9d9;
}
.agent_test.state_4 {
	border: 1px solid #d9d9d9;
}

.agent_test.state_0 .data .state {
	color: #83a53b;
}
.agent_test.state_1 .data .state {
	color: #a87680;
}
.agent_test.state_2 .data .state {
	color: var(--font_color);
}
.agent_test.state_3 .data .state {
	color: var(--font_color);
}
.agent_test.state_4 .data .state {
	color: var(--font_color);
}

.agent_test.state_0 .data .state .statetext::after {
	content: "Frei";
}
.agent_test.state_1 .data .state .statetext::after {
	content: "Im Gespräch";
}
.agent_test.state_2 .data .state .statetext::after {
	content: "In Pause";
}
.agent_test.state_3 .data .state .statetext::after {
	content: "Abwesend";
}
.agent_test.state_4 .data .state .statetext::after {
	content: "Abwesend";
}

.agent_test.state_0 .mobile .callbutton {
	background-color: #d4e5b5;
	background-image: url("/uploads/images/app/icons/phone_icon_gruen_big.png");
	box-shadow: 2px 2px 4px #8ba820;
	color: #73952a;
}
.agent_test.state_1 .mobile .callbutton {
	background-color: #eaced8;
	background-image: url("/uploads/images/app/icons/phone_icon_rot_big.png");
	box-shadow: 2px 2px 4px #833855;
	color: #833855;
}
.agent_test.state_2 .mobile .callbutton {
	background-color: #d9d9d9;
	background-image: url("/uploads/images/app/icons/phone_icon_grau_big.png");
	box-shadow: 2px 2px 4px #5a5a5a;
	color: #5a5a5a;
}
.agent_test.state_3 .mobile .callbutton {
	background-color: #d9d9d9;
	background-image: url("/uploads/images/app/icons/phone_icon_grau_big.png");
	box-shadow: 2px 2px 4px #5a5a5a;
	color: #5a5a5a;
}
.agent_test.state_4 .mobile .callbutton {
	background-color: #d9d9d9;
	background-image: url("/uploads/images/app/icons/phone_icon_grau_big.png");
	box-shadow: 2px 2px 4px #5a5a5a;
	color: #5a5a5a;
}

.agent_test.state_0 :not(.content) .land:not(.mobile) {
	background-color: #d4e5b5;
}
.agent_test.state_1 :not(.content) .land:not(.mobile) {
	background-color: #eaced8;
}
.agent_test.state_2 :not(.content) .land:not(.mobile) {
	background-color: #d9d9d9;
}
.agent_test.state_3 :not(.content) .land:not(.mobile) {
	background-color: #d9d9d9;
}
.agent_test.state_4 :not(.content) .land:not(.mobile) {
	background-color: #d9d9d9;
}

.agent_test.state_0 .freecall .mobile .callbutton::before {
	content: "Kostenlos anrufen";
}

.agent_test.state_0 .service .mobile .callbutton::before {
	content: "Jetzt anrufen";
}
.agent_test.state_1 .service .mobile .callbutton::before {
	content: "Rückruf vereinbaren";
}
.agent_test.state_2 .service .mobile .callbutton::before {
	content: "Termin vereinbaren";
}
.agent_test.state_3 .service .mobile .callbutton::before {
	content: "Termin vereinbaren";
}
.agent_test.state_4 .service .mobile .callbutton::before {
	content: "Termin vereinbaren";
}


/*
body.night .agent_test .image {
	filter: brightness(1);
	transition: filter 2s ease;
}
*/
body.night .agent_test .number .mobile .callbutton {
	background-color: #d9d9d9;
	background-image: url("/uploads/images/app/icons/phone_icon_down_grau_big.png");
	box-shadow: 2px 2px 4px #5a5a5a;
	color: #5a5a5a;
}

body.night .agent_test .number .mobile .callbutton::before {
	content: "Nachtruhe bis 8:45 Uhr";
}


/* =AgentsProfile
---------------------------------------------------------------*/
#agents.profile {
}
#agents.profile .image::after {
	display: none;	/* kein "Zum Profil" im Langprofil */
}


/* =Agent-Langprofil Arbeitsplan
-------------------------------------------------------------- */
#workplan {
	border: 1px solid var(--box_border_color);
}

#workplan div {
	padding-left: var(--div_margin_bottom);
	padding-right: var(--div_margin_bottom);
}

#workplan .head {
	font-weight: bold;
	text-decoration: underline;
}

#workplan .body .away {
	color: #999999;
}
#workplan .body .time {
	color: #95c11f;
	font-weight: bold;
}


/* =Topagents
---------------------------------------------------------------*/
#topagents {
}
#topagents .topagent > div {
	display: flex;
}
#topagents .topagent > div > a {
	flex: 0 1 auto;
	margin-right: 1em;
	width: auto;
}


/* =call2action
-------------------------------------------------------------- */
.call2action .subline {
	display: none;
}

/* callbutton */
body.night .callbutton {
	background-color: #d9d9d9;
	background-image: url("/uploads/images/app/icons/phone_icon_down_grau_big.png");
	box-shadow: 2px 2px 4px #5a5a5a;
	color: #5a5a5a;
}


.callbutton {
	background-repeat: no-repeat;
	background-position: .8em, left;
	background-size: contain;
	border-radius: 11px;
	margin-bottom: 0.5em;
	padding: 0.8em 0.8em 0.8em 68px;	/*.8em .8em .8em calc(1em + 68px);*/
}
/* Allgemein grüner Button, außer bei Berater, dann wechseln die Farben, d.h. diese Einstellungen sind dann zu ändern: */
.callbutton {
	background-color: #d4e5b5;
	background-image: url("/uploads/images/app/icons/phone_icon_gruen_big.png");
	box-shadow: 2px 2px 4px #8ba820;
	color: #73952a;
}

.callbutton::before {
	/*display: block;*/
	font-size: 1.15em;
	font-weight: bold;
	/*line-height: 2.6rem;*/
	/*margin-right: 0;*/
}

.subline {
	display: flex;
}

.flag {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	flex: 0 1 auto;
	height: auto;
	margin: 0 auto;
	max-width: 60px;
	padding-right: 0.5em;
	padding-top: 0.25em;
	/*width: 60px;*/
	width: 3em;
}

.subline div {
	flex: 0 1 auto;
}

.land > a {
	text-decoration: none;
}

.land.mobile .subline .nummer {
	display: inline;
	font-size: small;
	font-weight: bold;
	padding-right: 0.5em;	/* 13.05.2021 Etwas Luft zwischen Nummer und Preis */
}

.land.mobile .subline .text {
	display: none;
}

.land.mobile .subline .price {
	display: inline;
	font-size: small;
	white-space: nowrap;
}

.land:not(.mobile) div {
	margin: 0;
}
.land:not(.mobile) .flag {
	/*height: 60px;*/
	height: 3em;
	margin: 0;
	max-height: 60px;
}
.land:not(.mobile) .nummer {
	font-size: 1.2em;
	font-weight: bold;
}
.land.de:not(.mobile) {
	display: flex;
}
.land.de:not(.mobile) {
	display: flex;
	flex-wrap: wrap;
}
.land.de:not(.mobile) > a {
	flex: 1 1 auto;
	width: auto;
}


.land.at .flag {
	background-image: url("/uploads/images/app/icons/flagge_at.png");
}
.land.ch .flag {
	background-image: url("/uploads/images/app/icons/flagge_ch.png");
}
.land.de .flag {
	background-image: url("/uploads/images/app/icons/flagge_de.png");
}


/* =Number (Service/Freecall)
-------------------------------------------------------------- */
.number {
}
/*
.number a {
	text-decoration: none;
}
*/
.number .mobile div:not(.callbutton) {
	margin-bottom: 0;
}

.number.freecall .mobile .callbutton::before {
	content: "Kostenlos anrufen";
}
/*
.number.freecall .mobile .guthaben .callbutton::before {
	content: "Guthaben nutzen";
}
*/
.number.service .mobile .callbutton::before {
	content: "Jetzt anrufen";
}

.number.service .mobile.de .subline .nummer::before {
	content: "Kurzwahl ";
}

.number:not(.content) .land:not(.mobile) {
	padding: 0 var(--div_margin_bottom) 0.75em var(--div_margin_bottom);
}
.number:not(.content) .land:not(.mobile) > a:first-child .text {
	text-transform: capitalize;
}
.number:not(.content) .land:not(.mobile) > a:not(:first-child) .text::before {
	content: "oder ";
}

aside .number:not(.content) .land:not(.mobile) {
	padding-left: 0;
	padding-right: 0;
}

body.night .number .mobile .callbutton::before {
	content: "Nachtruhe bis 8:45 Uhr";
}

#content .number.freecall .land:not(.mobile) > a {
	width: auto;
}
#content .number.freecall .land:not(.mobile) > a > div,
#content .number.service .land:not(.de):not(.mobile) > a > div {
	display: table;
	margin: 0 auto;
	width: auto;	/* 29.10.2021 Hinzugefügt */
}


/* =Number (Content)
-------------------------------------------------------------- */
.content > div {
	margin-bottom: 0;
	text-align: center;
	width: auto;
}
.content .morebox {
	color: var(--font_color);
}

/* .close -Corner */
/* A Close in the Corner */
.close:not(.button) {
	background-color: #afafaf;
	background-image: url("/uploads/images/app/close_button.png");
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	height: 2em;
	left: 0;
	margin: 0;
	opacity: 0.75;
	position: absolute;
	top: 0;
	transition: background-color 1s ease 0s;
	width: 2em;
}
.close:not(.button):active,
.close:not(.button):hover {
	background-color: var(--font_color);
	transition: background-color 1s ease 0s;
}

/* .linkbutton */
.linkbutton {
	background-color: var(--header_bg_color);
	color: var(--morebox_bg_color);
	display: table;
	font-size: 1.2em;
	/*margin: 0 auto 1em auto;*/
	padding: 0.75em;
	text-decoration: none;
	width: auto;
}
.linkbutton.red {
	background: linear-gradient(130deg, #fa72b5, #f22a8c);
}
.linkbutton.uppercase {
	text-transform: uppercase;
}

/* input.button */
/* Sparpakete / Bewertungen, etc */
input.button {
	background-color: #fdf5f7;
	border: 3px solid var(--button_color);
	border-radius: 5px;
	color: var(--button_color);
	font-size: initial;
	padding: 0.15em 0.6em;
	transition: background-color 1s ease 0s;
	width: auto;
}
input:not([disabled]).button:hover {
	background-color: var(--box_border_color);
	color: var(--morebox_bg_color);
	transition: background-color 1s ease 0s;
}
/* für iPhone runde Buttons verbieten! */
input.button {
	-webkit-appearance: none;
	border-radius: 0;
/*	padding: 1px 6px;*/
}


/* .box */
.box {
	background-color: var(--box_bg_color);
	padding: 0.5em var(--box_padding_right);
}
.box.dark {
	background-color: var(--box_bg_color_dark);
}
.box.widerruf {
	border: 1px solid var(--font_color);
}
.box > div:last-child {
	margin-bottom: 0;
}

/* accordion */
.accordion {
	margin-bottom: 0;
}
.accordion + * {
	display: none;
}
.accordion.active + * {
	display: block;
}

.accordion::before {
	border: solid #8d0044;
	border-width: 0 3px 3px 0;
	content: " ";
	display: inline-block;
	float: right;
	margin: 0.5em 0.5em 0.25em 0.5em;
	padding: 3px;
	transform: rotate(45deg);
}
.accordion.active::before {
	transform: rotate(-135deg);
}

/* .morebox */
.morebox {
	background-color: var(--morebox_bg_color);
	border: 2px solid #faa0cc;
	color: #f871b3;
	display: inline-block;
	font-size: 1.2em;
	margin: 0.5em 0;
	padding: 0 0.5em;
	text-align: center;
}

/* .circle */
.circle[data-circle]::after,
.circle:not([data-circle]) {
	background-color: #fdf5f7;
	border-radius: 50%;
	color: var(--font_color);
	font-weight: bold;
	height: 1.25em;	/* 60px */
	line-height: 1.2em;	/*54px;*/
	margin-bottom: 0;
	text-align: center;
	width: 1.25em;	/* 60px */
}
.circle:not([data-circle]) {
	font-size: 2em;
}
.circle[data-circle] {
	padding-left: 1.5em;
	position: relative;
}
.circle[data-circle]::after {
	color: var(--button_color);
	content: attr(data-circle);
	font-size: 1.25em;
	left: 0.2em;
	position: absolute;
	top: 0.5em;
	z-index: 1;
}
.circle + .box {
	padding-top: 1em;
}


/* =Load-Spinner
-------------------------------------------------------------- */
.loader {
	background-image: url("/uploads/images/loader.gif");
	height: 32px;
/*		margin: 0 auto;*/
	width: 32px;
}

/* =Waiting-Spinner (für Agents-Summary)
-------------------------------------------------------------- */
@keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
@keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
@keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }

.dots span {
	animation: dots-1 1s infinite steps(1);
}

.dots span::after {
	content: ".";
}
.dots span:first-child + span {
	animation-name: dots-2;
}

.dots span:first-child + span + span {
	animation-name: dots-3;
}

/* =Kunden (News category)
-------------------------------------------------------------- */
#Kunden .title {
	font-style: italic;
}
#Kunden .title > span::after {
	content: ", ";
}
#Kunden .rating::before {
	content: "Bewertung: ";
}
#Kunden .rating > span {
	display: none;
}
#Kunden:not([data-offset]) > *:nth-last-child(2),
#Kunden:not([data-offset]) > *:nth-last-child(1) {
	display: none;
}

/* =Fix on parent
-------------------------------------------------------------- */
.fixonparent {
	background-color: var(--morebox_bg_color);
	margin: calc( -1 * var(--div_margin_bottom) );
	padding: var(--div_margin_bottom);
	position: fixed;
	top: var(--header_height);
	z-index: 1;
}

/* =Table of Content
-------------------------------------------------------------- */
#toc {
	margin-bottom: 0;
}

/* =Products-Images (Guthaben-Paket-Grafiken)
-------------------------------------------------------------- */
.products {
	display: flex;
}

.products > div {
	flex: 0 1 auto;
	margin-bottom: 0;
}

.products > div:not(:first-child) {
	border-left: 1px solid var(--morebox_bg_color);
	padding-left: 2%;
}
.products > div:not(:last-child) {
	padding-right: 2%;
}

.products > div img {
	cursor: pointer;
	transition: all .5s ease-in-out;
}
.products > div img:hover,
.products > div img.active {
	transform: scale(1.1);
	transition: all .5s ease-in-out;
}

/* #telefon_input */
#telefon_input {
	font-size: initial;
	height: 100%;
}

#telefon_input::placeholder {
	font-style: italic;
	font-size: initial;
}
#error-msg,
#valid-msg {
	display: flex;
	justify-content: center;
}
#error-msg {
	margin-bottom: var(--div_margin_bottom);
}

/* =Guthaben Formular
-------------------------------------------------------------- */
#guthaben {}
#guthaben .booking {
	background-color: white;
	margin-left: 1em;
	margin-right: 1em;
	width: auto;
}
#guthaben .step_3,
#guthaben .step_3 > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#guthaben .step_3 > div {
	width: 49%;
}
#guthaben .step_3 > div:nth-child(2n) {
	border-left: 1px solid var(--morebox_bg_color);
	padding-left: 2%;
}
#guthaben .step_3 > div:nth-child(2n+1) {
	padding-right: 2%;
}
#guthaben .step_3 > div:only-child .circle {
	display: none;
}
#guthaben .step_3 > div > div {
	width: 100%;
}
#guthaben .step_3 .step_3a2,
#guthaben .step_3 .step_3b2 {
	padding-bottom: var(--div_margin_bottom);
	padding-top: var(--div_margin_bottom);
}
/*
#guthaben .step_3 [class^="step_3"][class$="1"] {
	order: 1;
}
#guthaben .step_3 [class^="step_3"][class$="2"] {
	order: 2;
}
#guthaben .step_3 [class^="step_3"][class$="3"] {
	order: 3;
}
#guthaben .step_3 [class^="step_3"][class$="4"] {
	order: 4;
}
*/
#guthaben #telefon_input {
/*	max-width: calc( 100% - var(--box_padding_right) );*/
}
#code_input::placeholder {
	font-style: italic;
	font-size: initial;
}


/* Zahlungseingang */
#payment_waiting > div {
	display: flex;
}
#payment_waiting > div > .loader {
	flex: 1 0 auto;
	margin-right: var(--div_margin_bottom);
}
#payment_waiting > div > :last-child {
	margin-bottom: 0;
}

/* =Login-Forms (for our agents)
-------------------------------------------------------------- */
#login_form,
#login_form *:not(.button) {
	min-width: 100%;
}
/* Hack für Berater */
.agent_onlineminuten .cell {
	display: inline-block;
	width: 25%;
}

/* =Table Layout
-------------------------------------------------------------- */
.table {
	display: table;
	hyphens: auto;
	width: 100%;
}
.table:not(.noborder) {
	border-bottom: 1px solid var(--header_bg_color);
	border-left: 1px solid var(--header_bg_color);
}
.table.cols1 .row .cell { width: calc( 100% / 1 ); }
.table.cols2 .row .cell { width: calc( 100% / 2 ); }
.table.cols3 .row .cell { width: calc( 100% / 3 ); }
.table.cols4 .row .cell { width: calc( 100% / 4 ); }
.table.cols5 .row .cell { width: calc( 100% / 5 ); }

.table div:not(.middle) {
	margin-bottom: 0;
}
.table .row {
	display: table-row;
	width: auto;
}
.table .row.header {
	background-color: var(--box_border_color);
	color: white;
	font-weight: bold;
}
/*
.table .row:not(.header):nth-child(odd) {
	background-color: var(--box_bg_color);
}
*/
.table:not(.noborder) .cell {
	border-right: 1px solid var(--header_bg_color);
	border-top: 1px solid var(--header_bg_color);
}
.table .cell {
	display: table-cell;
	padding: 0.5em 0.5em;
}
.table .cell > a {
	display: inline-block;
	height: 100%;
	text-decoration: none;
	width: 100%;
}

/* =Flex Layout for Data no Header
-------------------------------------------------------------- */
.table.data {
	display: flex;
	flex-wrap: wrap;
/*	justify-content: space-between;*/
}
/*
.table.data .cell:nth-child(even) {
	background-color: var(--box_bg_color);
}
*/
.table.data.cols2 .cell { flex: 0 0 calc( 100% / 2 ); }
.table.data.cols3 .cell { flex: 0 0 calc( 100% / 3 ); }
.table.data.cols4 .cell { flex: 0 0 calc( 100% / 4 ); }
.table.data.cols5 .cell { flex: 0 0 calc( 100% / 5 ); }

.table.data .cell {
	flex: 0 0 calc( 100% / 1 );
	margin-bottom: 0;	/* WICHTIG!! */
	margin-top: 0;	/* WICHTIG!! */
	padding: 0.2em;
}
.table.data .cell.middle > * {
	align-items: center;
	display: flex;
}

/* =Flex Table Layout
-------------------------------------------------------------- */
.table.flex {
}

.table.flex div:not(.middle) {
	margin-bottom: 0;
}

.table.flex .row {
	border-top: 1px solid var(--header_bg_color);	/* Dickere Linie zur Abgrenzung */
	display: flex;
	flex-flow: row wrap;
}
.table.flex .row:last-child {
	border-bottom: 0;
}
.table.flex .row.header .cell {
	background-color: var(--box_border_color);
	color: white;
	font-weight: bold;
}
.table.flex .row .cell {
	margin-bottom: 0;	/* WICHTIG! */
	margin-top: 0;	/* WICHTIG! */
/*	white-space: nowrap;*/
	word-break: normal;	/* 05.07.2023 Geändert break-word; */
	overflow-wrap: anywhere;	/* 05.07.2023 Hinzugefügt */
}
.table.flex .row .cell:last-child {
	flex-grow: 1;
}
.table.flex .row .cell.middle {
	display: flex;
	align-items: center;
}

.table.flex .row .cell > a {
	display: inline-block;
	text-decoration: none;
	width: 100%;
}

/* this block changing for other cell flow: */
.table.flex.cols1 .row .cell { width: calc( 100% / 1 ); }
.table.flex.cols2 .row .cell { width: calc( 100% / 2 ); }
.table.flex.cols3 .row .cell { width: calc( 100% / 2 ); }
.table.flex.cols4 .row .cell { width: calc( 100% / 2 ); }
.table.flex.cols5 .row .cell { width: calc( 100% / 2 ); }

.table.flex .row .cell:first-child { width: calc( 100% / 2 ); }


@media screen and (min-width: 533px) {	/* alle Zellen nebeneinander */
	.table.flex.cols1 .row .cell { width: calc( 100% / 1 ); }
	.table.flex.cols2 .row .cell { width: calc( 100% / 2 ); }
	.table.flex.cols3 .row .cell { width: calc( 100% / 3 ); }
	.table.flex.cols4 .row .cell { width: calc( 100% / 4 ); }
	.table.flex.cols5 .row .cell { width: calc( 100% / 5 ); }

	.table.flex.cols1 .row .cell:first-child { width: calc( 100% / 1 ); }
	.table.flex.cols2 .row .cell:first-child { width: calc( 100% / 2 ); }
	.table.flex.cols3 .row .cell:first-child { width: calc( 100% / 3 ); }
	.table.flex.cols4 .row .cell:first-child { width: calc( 100% / 4 ); }
	.table.flex.cols5 .row .cell:first-child { width: calc( 100% / 5 ); }
}	/* screen and (min-width: 533px) */

@media screen and (min-width: 425px) and (max-width: 533px) {	/* erste Zelle je Zeile die ganze Zeile, die anderen drei Zellen nebeneinander: */
	.table.flex.cols1 .row .cell { width: calc( 100% / 1 ); }
	.table.flex.cols2 .row .cell { width: calc( 100% / 1 ); }
	.table.flex.cols3 .row .cell { width: calc( 100% / 2 ); }
	.table.flex.cols4 .row .cell { width: calc( 100% / 3 ); }
	.table.flex.cols5 .row .cell { width: calc( 100% / 4 ); }

	.table.flex .row .cell:first-child {
		width: 100%;
	}
}	/* screen and (min-width: 425px) and (max-width: 533px) */

@media screen and (max-width: 340px) {	/* alle Zellen untereinander */
	.table.flex.cols1 .row .cell { width: calc( 100% / 1 ); }
	.table.flex.cols2 .row .cell { width: calc( 100% / 1 ); }
	.table.flex.cols3 .row .cell { width: calc( 100% / 1 ); }
	.table.flex.cols4 .row .cell { width: calc( 100% / 1 ); }
	.table.flex.cols5 .row .cell { width: calc( 100% / 1 ); }

	.table.flex .row .cell:first-child {
		width: 100%;
	}
}	/* screen and (max-width: 340px) */


/* =Tageshoroskop
-------------------------------------------------------------- */
div[id^="Tageshoroskop_"] .heading {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}
div[id^="Tageshoroskop_"] .imagetext,	/* 23.02.2022 Hinzugefügt */
div[id^="Tageshoroskop_"] .fromto,
div[id^="Tageshoroskop_"] .zodiac {
	display: none;
}
div[id^="Tageshoroskop_"] .imagetext img {
	float: left;
	margin-right: 1em;
}

/* weitere Section Content-Styles */


/* =Kalender
-------------------------------------------------------------- */
.calendar {
	align-items: baseline;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
}
.calendar > * {
	/*border: 1px solid;*/
	border-color: inherit;
	border-style: solid;
	border-width: 1px;
	flex: 0 1 auto;
	margin: 10%;
}
.calendar a.linkbutton {
	background-color: transparent;
	color: inherit;
	height: 3em;
	width: 3em;
}


/* =Footer
---------------------------------------------------------------*/

#footer {
}

/* #callbutton_fix */
#callbutton_fix {
	background-color: var(--morebox_bg_color);
	border-left: 0;
	border-right: 0;
	border-top: 1px solid #afafaf;
	bottom: 0;
	/*display: none;*/
	/*left: 0;*/
	margin: 0 auto 0 calc( -1 * var(--aside_padding) );
	padding: 0.5em 1em 0;
	position: fixed;
	width: 100%; /*inherit;*/
	z-index: 1;
}

#callbutton_fix p {
	font-size: 1.1em;
	margin: 0;
	padding-bottom: 0.25em;
	padding-left: var(--div_margin_bottom);
	text-align: center;
}

@media screen and (min-width: 533px) {	/* section_width + 2 * aside_padding */
	#callbutton_fix {
		border-left: 1px solid #afafaf;
		border-right: 1px solid #afafaf;
	}
}	/* screen and (min-width: 533px) */


/* =Sidebars
---------------------------------------------------------------*/

aside {
	font-size: 3vw;
	max-width: var(--aside_width);
	width: calc( ( 100% - 3 * var(--aside_padding) ) / 2 );
}
#sidebar_left {
	float: left;
	margin-left: var(--aside_padding);
}
#sidebar_right {
	float: right;
	margin-right: var(--aside_padding);
}
aside > * {
	width: auto;
}
aside > h3 {
	text-transform: uppercase;
}
aside > a {
	text-decoration: none;
}


/* screen and (max-width: 340px) */
/* Small Window */
@media screen and (max-width: 340px) {	/* kein Platz mehr für Logo */
	header > *:first-child {
		border-right: 1px solid var(--header_border_color);
	}
	header > a.logo {
		display: none;
	}
/*	Falls auf kleinen Displays das FavIcons dargestellt werden soll: obige Anweisungen auskommentieren, dafür dies reinnehmen
	header > a.logo {
		background-image: url("/uploads/images/favicons/az24_favicon_76.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 50%;
	}
	header > a.logo > img {
		display: none;
	}
*/
}	/* screen and (max-width: 340px) */

/* screen and (min-width: 511px) * /
@media screen and (min-width: 511px) {
	aside {
		font-size: inherit;
	}
}	/* screen and (min-width: 511px) */
/* screen and (min-width: 533px) */
@media screen and (min-width: 533px) {	/* section_width + 2 * aside_padding */
	aside {
		font-size: inherit;
	}

	#sidebar_left {
		margin-left: calc( ( 100% - 2 * var(--aside_width) - 3 * var(--aside_padding) ) / 2 );
	}
	#sidebar_right {
		margin-right: calc( ( 100% - 2 * var(--aside_width) - 3 * var(--aside_padding) ) / 2 );
	}
}	/* screen and (min-width: 533px) */

/* screen and (min-width: 575px) */
/* Tablet & Desktop */
@media screen and (min-width: 575px) {	/* Logo mit Socials */
	header > a.logo {
		/*padding: 0 calc( ( 100% - 130px - 6 * ( 2% + 51px + 2% ) ) / 2);*/
		padding-right: 0;
	}
	header > div.socials {
		border-left: none;
		display: inline-flex;	/*inline-block;*/
		min-width: 260px;
		padding-right: 0;
	}
	header > div.socials a {
		border-left: 1px solid var(--header_border_color);
		flex: 0 0 25%;	/* display: inline-block; float: right; */
		padding: 0 2%;
	}

}	/* screen and (min-width: 575px) */

/* screen and (min-width: 751px) and (max-width: 999px) */
/* Tablet */
@media screen and (min-width: 751px) and (max-width: 999px) {	/* Platz für Sidebars linke Seite */
	section {
		float: right;
		margin-left: 0;
/* Um Content zu begrenzen:*/
margin-right: calc( 100% - var(--aside_width) - 2 * var(--aside_padding) - var(--section_width) );
/* ansonsten:
		margin-right: 0;
*/
/**/
		width: calc( 100% - var(--aside_width) );
	}

	#sidebar_left {
		float: none;
		margin-left: 0;
	}
	#sidebar_right {
		float: left;
		margin: 0;
	}
}	/* @media screen and (min-width: 751px) and (max-width: 1019px) */

/* screen and (min-width: 1000px) */
/* Desktop */
@media screen and (min-width: 1000px) {	/* Platz für Sidebars beide Seiten */
	body {
		background-image: url("/uploads/images/home_baum_kristina_2019.png");	/* 30.04.2019 Hinzugefügt */
		background-position: center top;
		background-repeat: no-repeat;
	}

	section {
		float: left;
		margin-left: var(--aside_width);
		width: calc( var(--page_max_width) - var(--aside_width) - var(--aside_width) );	/*var(--section_width);*/
	}

	#content {
		/*max-width: calc( var(--page_max_width) - var(--aside_width) - var(--aside_padding) - var(--aside_width) - var(--aside_padding) );*/
		width: 100%;
	}
	#sidebar_left {
		float: left;
		margin-left: calc( -1 * var(--section_width) - var(--aside_width) - 2 * var(--aside_padding) );
	}
	#sidebar_right {
		float: right;
		margin-right: 0;
	}
}	/* @media screen and (min-width: 1000px) */

/* print */
/* Print-Version */
@media print {
	* {
		-webkit-print-color-adjust: exact !important;	/* Chrome, Safari */
		color-adjust: exact !important;	/* Firefox */
	}
	header {
		position: relative;
	}
	main {
		margin-top: 0;
	}
	.no-print {
		display: none;
	}
}	/* @media print */