body, html {
	height: 100%;
}
body.home.light .home-details h2 span, body.light, body.light .button .button-text, body.light .title-section h2, body.light.about .c100>span, body.light.about .resume-box .time, body.light.about .resume-box p, body.light.blog .post-content .entry-header h4 a {
	color: #666 
}
.button, body {
	position: relative 
}
.button, .portfolio .grid li a, .portfolio .slideshow {
	overflow: hidden 
}
html {
	overflow-x: hidden 
}
body {
	font-family: Poppins, sans-serif;
	font-size: 15px;
	color: #fff;
	font-weight: 500;
	line-height: 1.6;
	background-size: cover;
	background-position: center;
	width: 100%;
	background-color: #005f6a 
}
a {
	color: #edba4e 
}
.poppins-font {
	font-family: 'Futurist Fixed-width';
	src: url(../fonts/FUTRFW.TTF);
	hyphens: auto;
	font-display: swap;
}
.ichBinSandra {
	font-family: 'Futurist Fixed-width';
	src: url(../fonts/FUTRFW.TTF);
	font-display: swap;
}
.open-sans-font {
	font-family: 'Open Sans', sans-serif;
	src: url(../fonts/OpenSans-VariableFont_wdth\,wght.ttf);
	font-display: swap;
}
.title-section {
	font-family: 'Futurist Fixed-width' 
}
hr.separator {
	border-top: 1px solid #252525;
	margin: 70px auto 55px;
	max-width: 40% 
}
.about .about-list .value, .ft-wt-600 {
	font-weight: 600 
}
.about .box-stats.with-margin, .blog .pagination, .mb-30 {
	margin-bottom: 30px 
}
.no-transform {
	transform: none !important 
}
.custom-title {
	padding-bottom: 22px;
	font-size: 26px 
}
body.light {
	background-color: #fff 
}
.about .c100>span, .button, body.light .button:hover .button-text, body.light.blog .page-item.active .page-link, body.light.contact ul.social li a:hover {
	color: #fff 
}
body.home.light .home-details h7 {
	color: #777 
}
body.light .preloader .black_wall, body.light.about .c100, body.light.about .resume-box .time {
	background-color: #eee 
}
body.light .preloader, body.light.about .c100:after, body.light.portfolio .slideshow figure {
	background-color: #fff 
}
body.light .title-bg {
	color: rgba(30, 37, 48, .07) 
}
body.light.about .box-stats {
	border: 1px solid #ddd 
}
body.light.about .resume-box .place:before {
	background-color: #666 
}
body.light.about .resume-box li:after {
	border-left: 1px solid #ddd 
}
body.light.portfolio .slideshow ul>li:after {
	background: rgba(255, 255, 255, .77) 
}
body.light.portfolio .slideshow {
	background: rgba(0, 0, 0, .7) 
}
body.light.contact .contactform input[type=email], body.light.contact .contactform input[type=text], body.light.contact .contactform textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #666 
}
body.light.contact ul.social li a {
	color: #666;
	background: #eee 
}
body.light.blog .post-content {
	background-color: #f2f2f2 
}
body.light.blog .page-link {
	color: #666;
	background-color: #eee;
	border: 1px solid #eee 
}
body.light.blog-post .meta {
	color: #888 
}
body.light hr.separator {
	border-top: 1px solid #ddd 
}
.button {
	display: inline-block;
	line-height: 1.4;
	border-radius: 35px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
	transition: 250ms ease-in-out;
	text-transform: uppercase;
	text-decoration: none !important;
	z-index: 1;
	padding: 16px 70px 16px 35px;
	font-size: 15px;
	font-weight: 600;
	background-color: transparent;
	outline: 0 !important 
}
a.indexButton {
	max-width: 100%;
	min-width: 0;
	white-space: normal
}
.button .button-text {
	position: relative;
	z-index: 2;
	color: #fff;
	transition: .3s ease-out
}
.button:before {
	z-index: -1;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translateX(100%);
	transition: .3s ease-out 
}
.button:hover .button-text, .fa-arrow-right, .fa-briefcase, 
/*.fa-download,*/
.fa-graduation-cap, .ftco-about-section .f-services:hover .text .h3, .ftco-about-section .f-services:hover .text .h4, .ftco-about-section .f-services:hover .text h3, .ftco-about-section .f-services:hover .text h4 {
	color: #005f6a !important 
}
.button:hover:before {
	transform: translateX(0) 
}
.button-icon {
	position: absolute;
	right: -1px;
	top: -1px;
	bottom: 0;
	width: 55px;
	height: 55px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 19px;
	color: #fff;
	border-radius: 50% 
}
.title-section {
	margin: 0 auto;
	width: 100%;
	position: relative;
	padding: 80px 0 
}
/* Frueherer Grossbuchstaben-Titel der Schablone (.title-section h2) ist
   entfallen; der Seitentitel wird ueber .st-page-title gestaltet. */
.title-bg {
	font-size: 100px;
	left: 0;
	letter-spacing: 0;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 50%;
	text-transform: uppercase;
	font-weight: 800;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	color: rgba(255, 255, 255, .07) 
}
.home .color-block {
	position: fixed;
	height: 200%;
	width: 100%;
	transform: rotate(-30deg);
	left: -90%;
	top: -20%
}
/* Large font on desktop: shift diagonal left to prevent title overlap */
@media (min-width: 992px) {
	.home .color-block {
		margin-left: -5vw;
	}
}
/* Landscape/short viewport: shift diagonal further left so it stays clear of text */
@media (min-width: 992px) and (max-height: 700px) {
	.home .color-block {
		margin-left: calc(-13vw - 12vh);
	}
}
.indexImage {
	z-index: 1;
}
.indexLogo {
	width: auto;
	max-height: 150px;
}
.fade-in-image {
	animation: fadeIn 3s;
	-webkit-animation: fadeIn 3s;
	-moz-animation: fadeIn 3s;
	-o-animation: fadeIn 3s;
	-ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
   }
	35% {
		opacity: 0;
   }
	100% {
		opacity: 1;
   }
}
@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
   }
	35% {
		opacity: 0;
   }
	100% {
		opacity: 1;
   }
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
   }
	35% {
		opacity: 0;
   }
	100% {
		opacity: 1;
   }
}
@-o-keyframes fadeIn {
	0% {
		opacity: 0;
   }
	35% {
		opacity: 0;
   }
	100% {
		opacity: 1;
   }
}
@-ms-keyframes fadeIn {
	0% {
		opacity: 0;
   }
	35% {
		opacity: 0;
   }
	100% {
		opacity: 1;
   }
}
.animated {
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 95px;
	margin-bottom: 60px;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-name: fadeInDown 
}
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateY(0) 
   }
	100% {
		opacity: 1;
		transform: rotate(-30deg);
		left: -50%;
		top: -20% 
   }
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateY(-2000px) 
   }
	100% {
		opacity: 1;
		transform: rotate(-30deg);
		left: -50%;
		top: -20% 
   }
}
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft 
}
.home .container-home {
	display: flex;
	align-items: center;
	min-height: 100% 
}
.home .home-details>div {
	max-width: 550px;
	margin: 0 auto 
}
.home .home-details h2 {
	font-size: 45px;
	line-height: 62px;
	font-weight: 700;
	margin: 18px 0 10px;
	position: relative 
}
.home .home-details h2 span {
	color: #fff;
	display: block 
}
.home .home-details h7 {
	color: #eee;
	font-size: 22px;
	font-weight: 400;
	display: block 
}
.home .home-details p {
	margin: 15px 0 28px;
	font-size: 24px;
	line-height: 45px 
}
.about .about-list li:not(:last-child) {
	padding-bottom: 20px
}
.about .about-list .title {
	opacity: .8;
	text-transform: capitalize 
}
.about .box-stats {
	padding: 20px 30px 25px 40px;
	border-radius: 5px;
	border: 1px solid #252525 
}
.about .box-stats h4 {
	position: relative;
	display: inline-block;
	margin: 0;
	font-size: 50px;
	font-weight: 700 
}
.about .box-stats h4:after {
	content: '+';
	position: absolute;
	right: -24px;
	font-size: 33px;
	font-weight: 300;
	top: 2px 
}
.about .box-stats p {
	padding-left: 45px 
}
.about .box-stats p:before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 30px;
	height: 1px;
	background: #777 
}
.about .resume-box ul {
	margin: 0;
	padding: 0;
	list-style: none 
}
.about .resume-box li {
	position: relative;
	padding: 0 20px 0 60px;
	margin: 0 0 50px 
}
.about .resume-box li:after {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	bottom: 0;
	border-left: 1px solid #333 
}
.about .resume-box .icon {
	width: 40px;
	height: 40px;
	position: absolute;
	left: 0;
	right: 0;
	line-height: 40px;
	text-align: center;
	z-index: 1;
	border-radius: 50%;
	color: #fff 
}
.about .resume-box .time {
	color: #fff;
	font-size: 12px;
	padding: 1px 10px;
	display: inline-block;
	margin-bottom: 12px;
	border-radius: 20px;
	font-weight: 600;
	background-color: #252525;
	opacity: .8 
}
.about .resume-box h6 {
	font-size: 18px;
	margin: 7px 0 10px 
}
.about .resume-box p {
	margin: 0;
	color: #eee;
	font-size: 14px 
}
.about .resume-box .place {
	opacity: .8;
	font-weight: 600;
	font-size: 15px;
	position: relative;
	padding-left: 26px 
}
.about .resume-box .place:before {
	position: absolute;
	content: '';
	width: 10px;
	height: 2px;
	background-color: #005f6a;
	left: 7px;
	top: 9px;
	opacity: .8 
}
.about .c100 {
	float: none !important;
	margin: 0 auto;
	background-color: #252525 
}
.about .c100:after {
	background-color: #111 
}
.portfolio .main-content {
	padding-bottom: 60px;
	margin-top: -15px 
}
.portfolio .grid-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0 
}
.portfolio .grid-gallery figure {
	margin: 0 
}
.portfolio .grid-gallery figure img {
	display: block;
	width: 100%;
	border-radius: 5px;
	transition: .3s 
}
.portfolio .grid, .portfolio .grid-wrap {
	margin: 0 auto 
}
.portfolio .grid li {
	width: 33.333333%;
	float: left;
	cursor: pointer;
	padding: 15px 
}
.portfolio .grid figure {
	-webkit-transition: .3s;
	transition: .3s;
	border-radius: 5px;
	padding: 0;
	position: relative;
	overflow: hidden 
}
.portfolio .grid figure img {
	display: block;
	position: relative 
}
.portfolio .grid li figure div {
	position: absolute;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	justify-content: center 
}
.portfolio .grid li figure div span {
	margin: 0;
	text-transform: uppercase;
	color: #fff;
	font-size: 18px 
}
.portfolio .slideshow {
	position: fixed;
	background: rgba(0, 0, 0, .85);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1111;
	opacity: 0;
	visibility: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition: opacity .5s, visibility 0s .5s;
	transition: opacity .5s, visibility 0s .5s;
	text-align: left 
}
.portfolio .slideshow-open .slideshow {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity .5s;
	transition: opacity .5s 
}
.portfolio .slideshow ul {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0, 0, 150px);
	transform: translate3d(0, 0, 150px);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s 
}
.portfolio .slideshow ul.animatable>li {
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s 
}
.portfolio .slideshow-open .slideshow ul {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0) 
}
.portfolio .slideshow ul>li {
	width: 660px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -280px 0 0 -330px;
	visibility: hidden 
}
.portfolio .slideshow ul>li.show {
	visibility: visible 
}
.portfolio .slideshow ul>li:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, .7);
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	z-index: 111;
	border-radius: 10px 
}
.portfolio .slideshow ul>li.current:after {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s, visibility 0s .3s;
	transition: opacity .3s, visibility 0s .3s 
}
.portfolio .slideshow figure {
	width: 100%;
	height: 100%;
	background: #252525;
	padding: 30px;
	overflow: auto;
	border-radius: 10px 
}
.portfolio .slideshow a {
	text-decoration: underline 
}
.portfolio .slideshow figcaption {
	margin-bottom: 15px 
}
.portfolio .slideshow figcaption h4 {
	text-transform: uppercase;
	padding: 10px 0 20px;
	font-weight: 700;
	text-align: center;
	font-size: 33px 
}
.portfolio .slideshow .responsive-video, .portfolio .slideshow .videocontainer {
	max-width: 100%;
	border-radius: 4px;
	display: block;
	object-fit: cover 
}
.portfolio .slideshow .videocontainer {
	position: relative;
	padding-bottom: 56.2%;
	padding-top: 0;
	height: 0;
	max-width: 100%;
	overflow: hidden;
	width: 100%;
	display: block;
	margin: 0;
	border-radius: 4px 
}
.portfolio .slideshow .videocontainer embed, .portfolio .slideshow .videocontainer iframe, .portfolio .slideshow .videocontainer object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0 
}
.portfolio .slideshow .carousel-indicators {
	bottom: 0;
	background: rgba(0, 0, 0, .4);
	padding: 10px 0;
	margin: 0 
}
.portfolio .slideshow .carousel-indicators li {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 0 7px;
	background-color: #fff;
	opacity: 1 
}
.portfolio .slideshow nav span {
	position: fixed;
	z-index: 1000;
	text-align: center;
	cursor: pointer;
	padding: 200px 30px;
	color: #fff 
}
.portfolio .slideshow nav span.nav-next, .portfolio .slideshow nav span.nav-prev {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 41px;
	line-height: 58px 
}
.portfolio .slideshow nav span.nav-prev {
	left: 0 
}
.portfolio .slideshow nav span.nav-next {
	right: 0 
}
.portfolio .slideshow nav span.nav-close {
	top: 30px;
	right: 30px;
	padding: 0 
}
.blog .main-content {
	padding-bottom: 85px
}
.contact .custom-span-contact {
	font-weight: 600;
	padding-left: 50px;
	line-height: 21px;
	padding-top: 5px 
}
.contact .custom-span-contact i {
	left: 0;
	top: 10px;
	font-size: 33px 
}
.contact .custom-span-contact i.fa-phone-square {
	font-size: 39px;
	top: 7px 
}
.contact .custom-span-contact span {
	text-transform: uppercase;
	opacity: .8;
	font-weight: 400 
}
.contact ul.social {
	margin-left: -5px 
}
.contact ul.social li {
	display: inline-block 
}
.contact ul.social li a {
	display: inline-block;
	height: 40px;
	width: 40px;
	line-height: 42px;
	text-align: center;
	color: #fff;
	transition: .3s;
	font-size: 17px;
	margin: 0 6px;
	background: #2b2a2a;
	border-radius: 50% 
}
.contact .contactform input[type=email], .contact .contactform input[type=text] {
	border: 1px solid #111;
	width: 100%;
	background: #252525;
	color: #fff;
	padding: 11px 26px;
	margin-bottom: 30px;
	border-radius: 30px;
	outline: 0 !important;
	transition: .3s 
}
.contact .contactform textarea {
	border: 1px solid #111;
	background: #252525;
	color: #fff;
	width: 100%;
	padding: 12px 26px;
	margin-bottom: 20px;
	height: 160px;
	overflow: hidden;
	border-radius: 30px;
	outline: 0 !important;
	transition: .3s 
}
.contact .contactform .form-message {
	margin: 24px 0 
}
.contact .contactform .output_message {
	display: block;
	color: #fff;
	height: 46px;
	line-height: 46px;
	border-radius: 30px 
}
.contact .contactform .output_message.success {
	background: #28a745 
}
.contact .contactform .output_message.success:before {
	font-family: FontAwesome;
	content: "\f14a";
	padding-right: 10px 
}
.contact .contactform .output_message.error {
	background: #dc3545 
}
.contact .contactform .output_message.error:before {
	font-family: FontAwesome;
	content: "\f071";
	padding-right: 10px 
}
.blog .post-container {
	display: block 
}
.blog .post-content {
	background-color: #252525;
	padding: 20px 25px 25px;
	border-radius: 0 0 5px 5px 
}
.blog .post-thumb, .blog .post-thumb a, .blog .post-thumb a img {
	border-radius: 5px 5px 0 0 
}
.blog .post-content .entry-header h4 {
	line-height: 26px;
	cursor: pointer 
}
.blog .post-content .entry-header h4 a {
	text-decoration: none;
	transition: .5s;
	color: #fff;
	font-size: 20px;
	font-weight: 600 
}
.blog .post-thumb {
	cursor: pointer 
}
.blog .post-container:hover img {
	transform: scale(1.2) 
}
.blog .post-thumb a img {
	transition: .3s 
}
.blog .post-content .entry-content p {
	margin: 15px 0 5px 
}
.blog .page-link {
	color: #fff;
	background-color: #252525;
	border: 1px solid #252525;
	padding: 0;
	margin: 0 10px;
	border-radius: 50% !important;
	width: 43px;
	height: 43px;
	line-height: 43px;
	text-align: center;
	transition: .3s 
}
.blog .page-link:active, .blog .page-link:focus {
	box-shadow: none !important 
}
.blog .page-link:hover {
	color: #fff !important 
}
.blog-post article {
	max-width: 700px;
	margin: 0 auto 
}
/* Die frueheren Schablonenregeln .blog-post article h2 und article h2
   (Schnitt 600, Rand 13px 0 20px, bis 576 px 25 px) sind entfallen. Ihre
   Werte stehen jetzt in .st-section-title und .st-card-title samt der
   blog-post-Variante; als bloss taggebundene Regeln haetten sie jede
   Ueberschrift im Artikel wieder erfasst. */
.blog-post article img {
	border-radius: 5px;
	margin-bottom: 20px 
}
article {
	max-width: 700px;
	margin: 0 auto 
}
article img {
	border-radius: 5px;
	margin-bottom: 20px 
}
.blog-post .meta {
	color: #eee;
	font-size: 13px 
}
.blog-post .meta span {
	padding-right: 15px 
}
.blog-post .meta i {
	padding-right: 3px 
}
@media (min-width:1351px) {
	.portfolio .container-portfolio .grid {
		text-align: left 
   }
}
@media (max-width:1350px) and (min-width:992px) {
	.container, .portfolio .container-portfolio {
		max-width: calc(100% - 195px) 
   }
}
@media (max-width:1200px) {
	.home .home-details h2 {
		padding-left: 0 
   }
	.home .home-details h2:before {
		display: none 
   }
}
@media (max-width:1200px) and (min-width:992px) {
	.home .home-details h2 {
		font-size: 42px;
		line-height: 52px 
   }
}
@media (max-width:1100px) and (min-width:992px) {
	.home .home-details>div {
		max-width: 450px 
   }
}
@media (min-width:1600px) {
	.home .home-details>div {
		max-width: 600px 
   }
}
@media (max-width:991px) {
	body.light .main-img-mobile {
		border: 4px solid #f2eee3 
   }
	.indexImage {
		display: none;
   }
	body.light #menuToggle {
		border: 1px solid #ddd 
   }
	body.light #menu, body.light #menuToggle {
		background: #eee 
   }
	body.light #menuToggle input:checked~span, body.light #menuToggle>span {
		background: #666 
   }
	body.light #menu li a {
		color: #666 
   }
	body.light #menu li:after {
		background: #ddd 
   }
	body.light.portfolio .slideshow nav {
		background: #eee;
		border-bottom: 1px solid #ddd 
   }
	#menu li:last-child:after, .portfolio .slideshow nav span:before, .portfolio .slideshow ul>li:after, body.light.portfolio .slideshow nav span img {
		display: none 
   }
	body.light.portfolio .slideshow nav span.nav-next {
		background-image: url("../img/projects/navigation/right-arrow.png");
		background-size: cover 
   }
	body.light.portfolio .slideshow nav span.nav-prev {
		background-image: url("../img/projects/navigation/left-arrow.png");
		background-size: cover 
   }
	body.light.portfolio .slideshow nav span.nav-close {
		background-image: url("../img/projects/navigation/close-button.png");
		background-size: cover 
   }
	body.light.portfolio .slideshow nav span.nav-next, body.light.portfolio .slideshow nav span.nav-prev {
		top: 51px 
   }
	body.light.portfolio .slideshow {
		background: #fff 
   }
	#menu, #menuToggle>span:first-child {
		transform-origin: 0 0 
   }
	#menuToggle, .portfolio .slideshow {
		background: #252525 
   }
	body.home {
		padding: 25px 
   }
	body.home .main-container {
		padding: 30px 0 !important 
   }
	.home .home-details-container {
		margin: 0 auto 
   }
	.home .home-details, .portfolio .slideshow nav span {
		padding: 0 
   }
	.main-img-mobile {
		border-radius: 50%;
		width: 270px;
		height: 270px;
		border: 4px solid #f2eee3;
		margin: 0 auto 25px;
		display: block 
   }
	.home .home-details h2 {
		font-size: 38px;
		line-height: 48px;
		margin: 29px 0 13px 
   }
	.home .home-details p {
		margin: 10px 0 23px;
		font-size: 20px;
		line-height: 35px 
   }
	#menuToggle {
		display: inline-block;
		position: fixed;
		top: 30px;
		right: 30px;
		z-index: 1111;
		user-select: none;
		padding: 19px 0 0 16px;
		width: 54px;
		height: 54px;
		border-radius: 5px 
   }
	#menu, .portfolio .slideshow ul>li {
		height: 100%;
		left: 0;
		margin: 0;
		top: 0 
   }
	#menuToggle input {
		display: flex;
		width: 54px;
		height: 54px;
		position: absolute;
		cursor: pointer;
		opacity: 0;
		z-index: 2;
		top: 0;
		left: 0 
   }
	#menuToggle>span {
		display: flex;
		width: 23px;
		height: 2px;
		margin-bottom: 5px;
		position: relative;
		background: #fff;
		border-radius: 3px;
		z-index: 1;
		transform-origin: 5px 0;
		transition: transform .5s cubic-bezier(.77, .2, .05, 1), background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s 
   }
	#menuToggle>span:nth-last-child(2) {
		transform-origin: 0 100% 
   }
	#menuToggle input:checked~span {
		opacity: 1;
		transform: rotate(45deg) translate(4px, 0);
		background: #fff 
   }
	#menuToggle input:checked~span:nth-last-child(3) {
		opacity: 0;
		transform: rotate(0) scale(.2, .2) 
   }
	#menuToggle input:checked~span:nth-last-child(2) {
		transform: rotate(-45deg) translate(2px, 4px) 
   }
	#menu {
		position: fixed;
		width: 100%;
		padding-top: 60px;
		background-color: #252525;
		-webkit-font-smoothing: antialiased;
		transform: translate(-100%, 0);
		transition: transform .5s cubic-bezier(.77, .2, .05, 1) 
   }
	#menuToggle input:checked~ul {
		transform: none 
   }
	#menu li {
		position: relative;
		padding-left: 30px 
   }
	#menu li:after {
		position: absolute;
		content: '';
		height: 1px;
		width: calc(100% - 60px);
		background: #333;
		left: 30px 
   }
	#menu li.active a span {
		font-weight: 600 
   }
	#menu li a {
		color: #fff;
		text-transform: uppercase;
		transition-delay: 2s;
		font-size: 26px;
		display: block;
		text-decoration: none;
		padding: 14px 0;
		position: relative 
   }
	#menu li a span {
		position: absolute;
		left: 50px;
		font-weight: 400 
   }
	.portfolio .grid li {
		width: 50% 
   }
	.portfolio .grid li figure div {
		display: none !important 
   }
	.portfolio .slideshow ul>li {
		width: 100%;
		position: absolute;
		right: 0 
   }
	.portfolio .slideshow figure {
		padding: 125px 30px 30px;
		border-radius: 0;
		max-width: 720px;
		margin: 0 auto 
   }
	.portfolio .slideshow nav span.nav-next, .portfolio .slideshow nav span.nav-prev {
		top: 35px;
		width: 32px;
		height: 32px 
   }
	.portfolio .slideshow nav span.nav-next {
		right: 30px 
   }
	.portfolio .slideshow nav span.nav-prev {
		left: 30px 
   }
	.portfolio .slideshow nav span.nav-close img, .portfolio .slideshow nav span.nav-next img, .portfolio .slideshow nav span.nav-prev img {
		width: 32px;
		height: 32px 
   }
	.portfolio .slideshow nav span.nav-close {
		top: 35px;
		right: 0;
		left: 0;
		margin: 0 auto;
		width: 32px;
		height: 32px;
		display: block;
		line-height: 0 
   }
	.portfolio .slideshow nav {
		position: fixed;
		top: 0;
		width: 100%;
		height: 102px;
		background: #252525;
		z-index: 1;
		border-bottom: 1px solid #333
   }
}
@media (max-width:767px) {
	.home .home-details p {
		font-size: 20px;
		line-height: 35px 
   }
}
@media (max-width:576px) {
	body.light .title-section {
		background: #eee;
		border-bottom: 1px solid #ddd 
   }
	body.light #menuToggle {
		border: 0 
   }
	body.light.portfolio .slideshow nav span.nav-next, body.light.portfolio .slideshow nav span.nav-prev {
		top: 31px 
   }
	body {
		font-size: 14px 
   }
	.title-section.revealator-delay1 {
		transform: none !important;
		opacity: 1 !important 
   }
	#menuToggle {
		right: 10px;
		top: 4px;
		padding: 19px 0 0 13px;
		width: 49px;
		height: 49px 
   }
	.home #menuToggle {
		right: 25px;
		top: 25px;
		padding: 17px 0 0 13px 
   }
	#menu li {
		padding-left: 25px 
   }
	#menu li a {
		font-size: 18px 
   }
	#menu li:after {
		width: calc(100% - 50px);
		left: 25px 
   }
	#menu li a span {
		left: 35px 
   }
	.main-content {
		padding-top: 85px 
   }
	.main-content>.container {
		padding: 0 25px 
   }
	.main-img-mobile {
		width: 230px;
		height: 230px 
   }
	.home .home-details h2 {
		font-size: 29px;
		line-height: 39px;
		margin: 18px 0 13px 
   }
	.home .home-details h7 {
		font-size: 19px 
   }
	.title-section {
		padding: 16px 25px 14px;
		background: #252525;
		border-bottom: 1px solid #333;
		margin-bottom: 36px;
		position: fixed;
		right: 0;
		left: 0;
		z-index: 11;
		top: 0 
   }
	.about .box-stats p:before, .title-bg {
		display: none 
   }
	.custom-title {
		font-size: 21px
   }
	.about .resume-box h6 {
		font-size: 17px 
   }
	.about .box-stats {
		padding: 15px 20px 20px 25px 
   }
	.about .c100 {
		transform: scale(.8) 
   }
	.about .box-stats.with-margin {
		margin-bottom: 25px 
   }
	.about .box-stats h4 {
		font-size: 40px 
   }
	.about .box-stats p {
		padding-left: 0 
   }
	.portfolio .main-content {
		padding-bottom: 10px;
		margin-top: -12px 
   }
	.portfolio .grid li {
		width: 100% 
   }
	.portfolio .main-content>.container {
		padding: 0 10px 
   }
	.portfolio .slideshow figure {
		padding: 85px 25px 25px 
   }
	.portfolio .slideshow figcaption h4 {
		font-size: 25px 
   }
	.portfolio .slideshow nav span.nav-next, .portfolio .slideshow nav span.nav-prev {
		top: 9px;
		width: 20px;
		height: 20px 
   }
	.portfolio .slideshow nav span.nav-next {
		right: 20px 
   }
	.portfolio .slideshow nav span.nav-prev {
		left: 20px 
   }
	.portfolio .slideshow nav span.nav-close img, .portfolio .slideshow nav span.nav-next img, .portfolio .slideshow nav span.nav-prev img {
		width: 20px;
		height: 20px 
   }
	.portfolio .slideshow nav span.nav-close {
		top: 21px;
		width: 20px;
		height: 20px 
   }
	.portfolio .slideshow nav {
		height: 62px 
   }
	.blog .main-content {
		padding-bottom: 55px 
   }
	.separator.mt-1 {
		margin-top: 35px !important 
   }
}
.ftco-section, .quote, blockquote, small {
	position: relative;
	hyphens: auto;
}
.flex, .hoverLi p {
	display: flex 
}
.blink {
	animation: .5s infinite blink 
}
@keyframes blink {
	to {
		opacity: 0 
   }
}
.header-sub-title {
	color: #fff;
	font-size: 900px 
}
.subtitle {
	font-size: 54px 
}
#menu li.active a, .about .box-stats h4, .blog .post-container:hover .post-content .entry-header h4 a, .blog .post-content .entry-header h4 a:hover, .blog-post .meta i, .contact .custom-span-contact i, .home h2, .portfolio .grid figure:hover figcaption, .portfolio .slideshow a, .portfolio .slideshow figcaption h4, body.light #menu li.active a {
	color: #f2eee3;
}
#menu li.active a{
	color: #005f6a !important;
}
#menu li.active{
	background-color: white;
}
.about .resume-box .icon, .blog .page-item.active .page-link, .blog .page-link:hover, .btn, .button-icon, .button:before, .contact ul.social li a:hover, .header .icon-box h3, .header ul.icon-menu li.icon-box.active, .header ul.icon-menu li.icon-box:hover, .home .color-block, .home .home-details h2:before, .portfolio .grid li figure div, .portfolio .slideshow .carousel-indicators li.active, .preloader .loader, .title-section hr, body.light .header ul.icon-menu li.icon-box.active, body.light .header ul.icon-menu li.icon-box:hover, body.light.blog .page-item.active .page-link, body.light.blog .page-link:hover, body.light.contact ul.social li a:hover {
	background-color: #f2eee3;
	box-shadow: rgba(0, 0, 0, .75) 0 5px 15px;
	animation-name: fadeInLeft 2 
}
.blog .page-item.active .page-link, .blog .page-link:hover, .button, .contact .contactform input[type=email]:focus, .contact .contactform input[type=text]:focus, .contact .contactform textarea:focus, body.light.blog .page-item.active .page-link, body.light.blog .page-link:hover, body.light.contact .contactform input[type=email]:focus, body.light.contact .contactform input[type=text]:focus, body.light.contact .contactform textarea:focus {
	border: 1px solid #f2eee3 
}
.blog .post-thumb {
	border-bottom: 5px solid #f2eee3 
}
.c100 .bar, .c100.p100 .fill, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .pie {
	border: .08em solid #f2eee3 
}
::selection {
	background: #f2eee3;
	color: #005f6a 
}
::-moz-selection {
	background: #f2eee3;
	color: #005f6a 
}
.ftco-section {
	padding: 8em 0;
	width: 100%;
	overflow-x: hidden 
}
.about-author .bio {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: block 
}
.about-author .desc {
	width: calc(100% - 80px) 
}
.about-author .desc .h4, .about-author .desc h4 {
	font-size: 30px;
	font-weight: 400 
}
.aboutImage {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
@media (max-width:575.98px) {
	.ftco-section {
		padding: 6em 0 
   }
	.aboutImage {
		display: none;
   }
	.about-image {
		height: 400px;
		margin-bottom: 30px 
   }
	.hideonMobile {
		display: none;
   }
	.ichBinSandra {
		text-align: center;
   }
	.indexLogo {
		display: block;
		margin-left: auto;
		margin-right: auto;
   }
}
@media (min-width:575.99px) {
	.hideonFull {
		display: none;
   }
}
.ftco-about-section .img {
	height: 230px 
}
.ftco-about-section .f-services {
	width: 100%;
	padding: 0 
}
.ftco-about-section .f-services .icon {
	margin-bottom: 8px 
}
.ftco-about-section .f-services .icon span {
	font-size: 60px;
	line-height: 1.2;
	color: #c5a880 
}
.ftco-about-section .f-services .text {
	background: #005f6a;
	-moz-transition: .3s;
	-o-transition: .3s;
	-webkit-transition: .3s;
	-ms-transition: .3s;
	transition: .3s 
}
.ftco-about-section .f-services .text .h4, .ftco-about-section .f-services .text h4 {
	font-size: 24px;
	font-weight: 400;
	margin-bottom: 10px 
}
.ftco-about-section .f-services:hover .text {
	background: #f2eee3;
	-webkit-box-shadow: 0 5px 25px -2px rgba(0, 0, 0, .18);
	-moz-box-shadow: 0 5px 25px -2px rgba(0, 0, 0, .18);
	box-shadow: 0 5px 25px -2px rgba(0, 0, 0, .18);
	color: #005f6a 
}
.openinghoursText {
	font-size: clamp(1rem, 2.5vw, 1.4rem);
	overflow: hidden
}
.openinghoursh3 {
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	overflow: hidden
}
@media (min-width:992px) {
	body.light .header ul.icon-menu li.icon-box {
		background-color: #eee 
   }
	body.light .header ul.icon-menu li.icon-box i {
		color: #666 
   }
	body.light .header ul.icon-menu li.icon-box.active, body.light .header ul.icon-menu li.icon-box.active i, body.light .header ul.icon-menu li.icon-box:hover, body.light .header ul.icon-menu li.icon-box:hover i {
		color: #fff 
   }
	.header {
		position: fixed;
		right: 30px;
		bottom: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		height: calc(100vh - 200px);
		top: 100px;
		opacity: 1;
		transition: opacity .3s;
		-webkit-transition: opacity .3s 
   }
	.header.hide-header {
		z-index: 0 !important;
		opacity: 0 
   }
	.header ul.icon-menu {
		margin: 0;
		padding: 0 
   }
	.header ul.icon-menu li.icon-box {
		width: 50px;
		height: 50px;
		list-style: none;
		position: relative;
		display: flex;
		align-items: center;
		transition: .3s;
		margin: 20px 0;
		border-radius: 50%;
		background: #2b2a2a 
   }
	.header ul.icon-menu li.icon-box i {
		color: #f2eee3;
		font-size: 19px;
		transition: .3s 
   }
	.header ul.icon-menu li.icon-box.active, .header ul.icon-menu li.icon-box.active i, .header ul.icon-menu li.icon-box:hover, .header ul.icon-menu li.icon-box:hover i {
		color: #005f6a 
   }
	.header .icon-box h3 {
		font-size: 15px 
   }
	.header .icon-box a {
		display: block;
		padding: 0;
		width: 50px;
		height: 50px 
   }
	.header .icon-box i.fa {
		position: absolute;
		pointer-events: none 
   }
	.header .icon-menu i {
		left: 0;
		right: 0;
		margin: 0 auto;
		display: block;
		text-align: center;
		font-size: 35px;
		top: 15px 
   }
	.header .icon-box h3 {
		z-index: -1;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
		color: #005f6a;
		line-height: 50px;
		font-weight: 500;
		transition: .3s;
		border-radius: 30px;
		text-transform: uppercase;
		padding: 0 25px 0 30px;
		height: 50px 
   }
	.header .icon-box a:hover h3 {
		opacity: 1;
		right: 27px;
		margin: 0;
		text-align: center;
		border-radius: 30px 0 0 30px 
   }
	.home .home-details-container {
		width: 100%;
		height: 100vh 
   }
	body.home {
		overflow: hidden 
   }
	.onlyonMobile {
		display: none 
   }
}
.openinghoursblock1, .openinghoursblock2 {
	padding: 1.5rem 1.2rem;
	border-radius: 8px;
	border: 3px solid #005f6a;
	transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease
}
.openinghoursblock1:hover, .openinghoursblock2:hover {
	background: #f2eee3;
	color: #005f6a;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px)
}
.openinghoursblock1 h3, .openinghoursblock1 p, .openinghoursblock2 h3, .openinghoursblock2 p {
	padding-top: 2%;
	padding-bottom: 2%
}
.openinghoursblock1 table, .openinghoursblock2 table {
	width: auto;
	max-width: 100%
}
.openinghoursblock1 table td, .openinghoursblock2 table td {
	padding: 4px 6px;
	white-space: nowrap
}
.openinghours-hint {
	font-size: clamp(0.85rem, 2vw, 1rem);
	color: inherit;
	font-style: italic;
	margin-top: 0.5rem
}
@media (max-width: 576px) {
	.openinghoursblock1 table td, .openinghoursblock2 table td {
		padding: 3px 4px;
		font-size: clamp(0.85rem, 3.5vw, 1rem)
	}
	.openinghoursblock1, .openinghoursblock2 {
		padding: 1rem 0.5rem
	}
}
@media (max-width:992px) {
	.googlemaps {
		min-height: 90vh
	}
}
.quote {
	text-align: center;
	font-size: 1.5rem;
	margin: 100px auto auto;
	padding: 15px;
	border: 2px solid #000;
	max-width: 70% 
}
.left, .right {
	position: absolute;
	width: 150px;
	z-index: 5;
	font-size: 8rem;
	background-color: #005f6a;
	line-height: 200px;
	color: #edba4e 
}
blockquote {
	color: #fff;
	text-shadow: -1px 1px #555;
	font-style: italic;
	z-index: 10 
}
.left {
	top: -50px;
	left: -20px;
	text-align: left 
}
.right {
	bottom: -50px;
	right: -20px;
	text-align: right 
}
small {
	font-size: 1.7rem;
	color: #edba4e;
	z-index: 10 
}
.hoverLi {
	padding: 2% 5%;
	font-weight: 900;
	cursor: pointer 
}
.hoverLi p {
	color: #005f6a !important;
	margin-top: 100%;
	animation: .5s showLi 
}
.hoverLi:hover, .hoverLi:hover .span::before, .hoverLi:hover h6, .hoverLi:hover p {
	background-color: #f2eee3;
	color: #005f6a;
	animation: .5s showLi;
	border-radius: 5px;
}
.hoverLi:hover {
	box-shadow: rgba(0, 0, 0, .4) 0 5px 15px 
}
@-webkit-keyframes showLi {
	0% {
		opacity: 0 
   }
	100% {
		opacity: 1 
   }
}
.noselect {
	-webkit-touch-callout: none;
   /* iOS Safari */
	-webkit-user-select: none;
   /* Safari */
	-khtml-user-select: none;
   /* Konqueror HTML */
	-moz-user-select: none;
   /* Old versions of Firefox */
	-ms-user-select: none;
   /* Internet Explorer/Edge */
	user-select: none;
   /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.noselectImg{
	pointer-events: none;
}
.noselectWithPointer {
	-webkit-touch-callout: none;
   /* iOS Safari */
	-webkit-user-select: none;
   /* Safari */
	-khtml-user-select: none;
   /* Konqueror HTML */
	-moz-user-select: none;
   /* Old versions of Firefox */
	-ms-user-select: none;
   /* Internet Explorer/Edge */
	user-select: none;
   /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	cursor: pointer;
}
.nowrap {
	white-space: nowrap;
}
a:link {
}
/* visited link */
a:visited {
}
/* mouse over link */
a:hover {
	color: #f2eee3;
}
/* selected link */
a:active {
	color: #800000;
}
@media (min-width:397px) {
	.onlyonsmallDisplay{
		display: none;
   }
}
@media (min-width:341.9px) {
	.onlyonsmallerDisplay{
		display: none;
   }
}
.downloads{
	font-size: 6rem;
}
.formUberschrift {
	font-size: 1.2rem;
}
.location{
	display: none;
}
.formUberschrift {
	font-size: 1.2rem;
}
.btn-primary {
	color: #005f6a;
	background-color: #fff;
	border-radius: var(--border-radius);
	border-color: transparent;
}
.btn-primary:hover {
	background-color: #005f6a;
	border-color: #edba4e;
	box-shadow: inset 0 0 0 20rem var(--darken-1);
}
.btn-primary:focus, .btn-primary:active {
	color: #005f6a;
	background-color: #fff;
	border-radius: var(--border-radius);
	border-color: transparent;
	outline: none !important;
}
.g-recaptcha > div {
	margin: 0 auto;
}
.hrefbluecolor:hover{
	color: #005f6a 
}
.patientenbogenButton{
	background-color: transparent;
	box-shadow: none;
	color: white;
	font-weight: 600;
	margin-left: -13px;
	font-size: 2rem;
}
.btn-custom{
	border: none;
}
.btn-custom:hover{
	color: #edba4e 
}
.cts{
	margin-top: -20px;
	margin-left: 73px 
}
@media print {
	html, body {
		display: none;
	}
}
/* ==========================================================================
   Gruppentherapie: neue Unterseite, achter Navigationspunkt und Kontextverweise
   ========================================================================== */
/* --- Seitentitel der Gruppentherapie-Seite: gestaltet ueber .st-page-title.
       Die frueheren Regeln .gruppentherapie .title-section h1 / h1 span waren
       vollstaendig von .has-st-nav .title-section (Zeile 5533) verdeckt - jede
       dort erklaerte Eigenschaft wird auch dort gesetzt, bei gleicher
       Spezifitaet und spaeter im Quellcode. Sie sind entfallen, weil sie beim
       Tagwechsel sonst wieder gegriffen haetten. --- */
.gruppentherapie .title-bg {
	font-size: clamp(3rem, 11vw, 100px);
	pointer-events: none;
	user-select: none
}
/* --- Ruhiges Artikel-Layout, ca. 700 px Lesebreite --- */
.gt-article {
	max-width: 700px;
	margin: 0 auto;
	overflow-wrap: anywhere;
	hyphens: auto
}
/* Fliesstext im Artikel als Darstellungsklasse .st-body-text. Der
   Absatzselektor entfaellt. Listen (li) werden laut Plan 7.2 nicht
   umgestellt.
   Die weiteren Klassen sind eigenstaendige Darstellungsrollen mit derselben
   Artikelschrift. Sie bezogen Groesse und Zeilenhoehe bisher aus
   .gt-article p und stehen deshalb hier mit ihrer eigenen Klasse, nicht als
   Zusatz zu .st-body-text: es gibt keine Basis- oder Reset-Pflichtklasse. */
.gt-article .st-body-text, .gt-article .st-tiles-intro,
.gt-article .st-panel-close, .gt-article .gt-contact-note,
.gt-article .st-map-route, .gt-article .st-download-action,
.gt-article .gt-context-hint, .gt-article .st-map-consent-actions,
.gt-article li {
	font-size: 17.5px;
	line-height: 1.65
}
/* Werte, die bisher aus dem p-Tag kamen (Bootstrap: margin 0 0 1rem) und aus
   der Vererbung (body: Schnitt 500, Farbe #fff; .gt-article: Umbruch). Damit
   wirkt die Klasse auf h1-h6, p, div und span gleich. Der Unterrand bleibt
   bewusst 1rem und nicht 16px, damit er bei 200 % Textgroesse mitwaechst. */
.gt-article .st-body-text {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
	font-weight: 500;
	font-style: normal;
	color: #fff;
	overflow-wrap: anywhere;
	hyphens: auto
}
.gt-article .blog-excerpt p {
	margin-bottom: 1.15em
}
/* Globale Einstiegsrolle: auch ausserhalb von .gt-article vollstaendig.
   Gemessene Werte eines Absatzes mit dieser Klasse ausserhalb des Artikels:
   display block, Groesse aus der Umgebung geerbt (im Pruefkontext 14 px),
   Zeilenhoehe 1.25 (= 17,5 px) und Unterrand 1rem (= 16 px) aus dem p-Tag.
   font-size: inherit haelt die Umgebungsgroesse und ist tagunabhaengig;
   im Artikel setzt .gt-article .gt-lead weiter die eigene clamp-Groesse,
   die Zeilenhoehe 1.65 und den Rand 0 0 6px - dort aendert sich nichts. */
.gt-lead {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
	font-family: 'Futurist Fixed-width';
	font-size: inherit;
	font-weight: 700;
	font-style: normal;
	color: #f2eee3;
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto
}
/* Im Artikel galt bisher die Zeilenhoehe 1.65 aus .gt-article p und nicht die
   1.25 der Grundklasse (gemessen 59,4 px bei 36 px Schrift). Sie steht hier
   ausdruecklich, damit die Klasse ohne Absatz-Tag denselben Wert behaelt.
   Ausserhalb des Artikels bleibt der dort tatsaechlich wirksame Wert 1.25. */
.gt-article .gt-lead {
	display: block;
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	line-height: 1.65;
	margin: 0 0 6px;
	padding: 0
}
.gt-article .gt-lead-sub {
	display: block;
	font-size: clamp(1rem, 3vw, 1.25rem);
	line-height: 1.45;
	font-weight: 500;
	font-style: italic;
	color: #fff;
	margin: 0 0 28px;
	padding: 0
}
.gt-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin: 0 0 20px;
	padding: 18px 0;
	border-top: 1px solid rgba(242, 238, 227, .25);
	border-bottom: 1px solid rgba(242, 238, 227, .25)
}
.gt-cta {
	display: inline-block;
	max-width: 100%;
	min-width: 0;
	padding: 12px 26px;
	border: 2px solid #f2eee3;
	border-radius: 35px;
	color: #f2eee3;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease
}
.gt-cta:hover, .gt-cta:focus-visible {
	background-color: #f2eee3;
	color: #005f6a
}
.gt-jumplinks ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	text-align: center
}
.gt-jumplinks li {
	margin: 0;
	font-size: 15px
}
.gt-jumplinks a {
	color: #edba4e;
	text-decoration: underline
}
.gt-jumplinks a:hover, .gt-jumplinks a:focus-visible {
	color: #f2eee3
}
.gt-section {
	scroll-margin-top: 110px
}
/* Abschnitts- und Kartentitel: Darstellung unabhaengig vom HTML-Tag.
   Buendelt Groesse, Schnitt, Farbe, Rand und Umbruch aus .gt-article h2 sowie
   die Zeilenhoehe 1.2 aus Bootstrap. Der bisherige Tagselektor .gt-article h2
   entfaellt; die uebrigen Seiten erhalten die Klasse in Phase 2. */
.gt-article .st-section-title, .gt-article .st-card-title {
	display: block;
	margin: 34px 0 16px;
	padding: 0;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #f2eee3;
	overflow-wrap: break-word;
	hyphens: auto
}
.gt-article .st-section-title {
	font-size: clamp(1.35rem, 3.4vw, 1.75rem)
}
/* Auf den acht Seiten mit der Body-Klasse blog-post galt bisher der
   spezifischere Selektor .blog-post article h2 (Zeile 856) mit dem Rand
   13px 0 20px, bis 576 px zusaetzlich 25px Schriftgroesse (Zeile 1277).
   Kontakt, Ueber mich und Impressum tragen blog-post nicht und behalten
   deshalb 34px 0 16px. */
.blog-post .gt-article .st-section-title, .blog-post .gt-article .st-card-title {
	margin: 13px 0 20px
}
@media (max-width: 576px) {
	.blog-post .gt-article .st-section-title {
		font-size: 25px
	}
}
/* Zwischentitel im Artikel: Schritt-, Kachel- und Kastentitel. Die
   Komponentenvarianten weiter unten ueberschreiben Groesse, Rand und Farbe.
   Zeilenhoehe 1.2 kam bisher aus Bootstrap, der Umbruch aus .gt-article. */
.gt-article .st-step-title, .gt-article .st-option-title,
.gt-article .st-callout-title {
	display: block;
	font-size: clamp(1.05rem, 2.6vw, 1.25rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #fff;
	margin: 24px 0 8px;
	padding: 0;
	overflow-wrap: anywhere;
	hyphens: auto
}
.gt-section-highlight {
	border-left: 4px solid #edba4e;
	background: rgba(242, 238, 227, .06);
	border-radius: 6px;
	padding: 4px 22px 10px;
	margin: 34px 0
}
.gt-section-highlight .st-section-title {
	margin-top: 24px
}
.gt-contact-list {
	margin: 18px 0;
	padding: 0
}
.gt-contact-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px
}
.gt-contact-list li i {
	color: #edba4e;
	flex: 0 0 18px
}
.gt-contact-list a {
	overflow-wrap: anywhere;
	text-decoration: underline
}
/* Eigenstaendige Darstellungsklasse: Groesse und Zeilenhoehe oben in der
   Artikelschrift-Gruppe, hier die bisher aus dem p-Tag und der Vererbung
   stammenden Werte. */
.gt-article .gt-contact-note {
	display: block;
	margin: 0 0 .6em;
	padding: 0;
	font-weight: 500;
	font-style: italic;
	color: #fff
}
@media (max-width:576px) {
	.gt-article .st-body-text, .gt-article .st-tiles-intro,
	.gt-article .st-panel-close, .gt-article .gt-contact-note,
	.gt-article .st-map-route, .gt-article .st-download-action,
	.gt-article .gt-context-hint, .gt-article .st-map-consent-actions,
	.gt-article li {
		font-size: 17px
	}
	.gt-section-highlight {
		padding: 4px 14px 10px
	}
}
/* --- Dauerhaft sichtbarer Startseiten-Hinweis --- */
.gt-home-hint {
	max-width: 100%;
	margin: 26px auto 0;
	padding: 16px 18px;
	border: 2px solid #f2eee3;
	border-radius: 8px;
	background: #00535d
}
.gt-home-hint p.gt-home-hint-title {
	margin: 0 0 4px;
	font-size: clamp(1rem, 3.6vw, 1.2rem);
	line-height: 1.35;
	font-weight: 600;
	color: #f2eee3;
	overflow-wrap: break-word;
	hyphens: auto
}
.gt-home-hint p.gt-home-hint-text {
	margin: 0 0 10px;
	font-size: clamp(.9rem, 3vw, 1rem);
	line-height: 1.45;
	color: #fff;
	overflow-wrap: break-word;
	hyphens: auto
}
.gt-home-hint .gt-home-hint-link {
	display: inline-block;
	font-weight: 600;
	color: #edba4e;
	text-decoration: underline;
	overflow-wrap: break-word
}
.gt-home-hint .gt-home-hint-link:hover, .gt-home-hint .gt-home-hint-link:focus-visible {
	color: #f2eee3
}
/* Startseite: vertikales Scrollen bei niedrigen Fenstern bzw. grosser Schrift */
@media (min-width:992px) {
	body.home {
		overflow-x: hidden;
		overflow-y: auto
	}
	.home .home-details-container {
		height: auto;
		min-height: 100vh
	}
	.home .container-home {
		min-height: 100vh
	}
}
/* --- Kontextverweise auf den Bestandsseiten --- */
.gt-context-hint {
	display: block;
	margin: 18px 0 1rem;
	padding: 0;
	font-weight: 600;
	font-style: normal
}
.gt-context-hint a, .gt-offer-link {
	text-decoration: underline
}
.openinghoursblock2:hover .gt-offer-link, .openinghoursblock2:hover .gt-context-hint a {
	color: #005f6a
}
/* --- Sichtbarer Tastaturfokus --- */
a:focus-visible, .gt-cta:focus-visible {
	outline: 3px solid #edba4e;
	outline-offset: 2px
}
/* --- Desktopnavigation: Label beim Tastaturfokus, acht Eintraege bei niedrigen Fenstern --- */
@media (min-width:992px) {
	.header .icon-box a:focus-visible {
		outline: 3px solid #edba4e;
		outline-offset: 3px
	}
	.header .icon-box a:focus h3, .header .icon-box a:focus-visible h3 {
		opacity: 1;
		right: 27px;
		margin: 0;
		text-align: center;
		border-radius: 30px 0 0 30px
	}
}
@media (min-width:992px) and (max-height:800px) {
	.header {
		top: 60px;
		height: calc(100vh - 120px)
	}
	.header ul.icon-menu li.icon-box {
		margin: 12px 0
	}
}
@media (min-width:992px) and (max-height:760px) {
	.header {
		top: 20px;
		height: calc(100vh - 40px)
	}
	.header ul.icon-menu li.icon-box {
		width: 42px;
		height: 42px;
		margin: 5px 0
	}
	.header .icon-box a {
		width: 42px;
		height: 42px
	}
	.header .icon-menu i {
		font-size: 26px;
		top: 11px
	}
	.header .icon-box h3 {
		line-height: 42px;
		height: 42px;
		font-size: 13px;
		padding: 0 20px 0 24px
	}
	.header .icon-box a:hover h3, .header .icon-box a:focus h3, .header .icon-box a:focus-visible h3 {
		right: 23px
	}
}
@media (min-width:992px) and (max-height:520px) {
	.header {
		top: 10px;
		height: calc(100vh - 20px)
	}
	.header ul.icon-menu li.icon-box {
		width: 36px;
		height: 36px;
		margin: 3px 0
	}
	.header .icon-box a {
		width: 36px;
		height: 36px
	}
	.header .icon-menu i {
		font-size: 21px;
		top: 9px
	}
	.header .icon-box h3 {
		line-height: 36px;
		height: 36px;
		font-size: 12px;
		padding: 0 16px 0 20px
	}
	.header .icon-box a:hover h3, .header .icon-box a:focus h3, .header .icon-box a:focus-visible h3 {
		right: 19px
	}
}
/* --- Mobilmenue: kein Tabziel im geschlossenen Zustand, internes Scrollen,
       keine uebereinander liegenden Labelumbrueche --- */
@media (max-width:991px) {
	#menuToggle:focus-within {
		outline: 3px solid #edba4e;
		outline-offset: 2px
	}
	#menu {
		visibility: hidden;
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 40px;
		transition: transform .5s cubic-bezier(.77, .2, .05, 1), visibility 0s linear .5s
	}
	#menuToggle input:checked ~ ul#menu {
		visibility: visible;
		transition: transform .5s cubic-bezier(.77, .2, .05, 1), visibility 0s linear 0s
	}
	#menu li a {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 14px 0;
		transition-delay: 0s
	}
	#menu li a i {
		flex: 0 0 34px;
		width: 34px;
		text-align: left
	}
	#menu li a span {
		position: static;
		left: auto;
		min-width: 0;
		line-height: 1.2;
		overflow-wrap: break-word;
		hyphens: auto
	}
	#menu li:after {
		bottom: 0
	}
	#menu li a:focus-visible {
		outline: 3px solid #edba4e;
		outline-offset: -3px
	}
}
@media (max-width:576px) {
	#menu li a {
		gap: 12px
	}
	#menu li a i {
		flex: 0 0 23px;
		width: 23px
	}
}
/* --- Startseite Desktop: zwei Spalten mit Platz fuer die Navigation --- */
@media (min-width:992px) {
	.home .container-home {
		display: grid;
		grid-template-columns: 45% minmax(0, 1fr)
	}
	.home .indexImage {
		width: 100%
	}
	.home .home-details-container {
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 32px 110px 32px 24px
	}
	.home .home-details {
		width: 100%;
		margin-left: 0;
		padding: 0;
		position: relative;
		z-index: 1;
		overflow-wrap: anywhere;
		hyphens: auto
	}
}
/* --- Gruppentherapie: Titelbereich im normalen Fluss bei mobiler Schriftvergroesserung --- */
@media (max-width:576px) {
	.gruppentherapie .title-section {
		position: relative;
		padding-right: 60px
	}
	.gruppentherapie .main-content {
		padding-top: 20px
	}
}

/* ==========================================================================
   Inhaltsseiten (Stand 26.10.2026): gemeinsamer ruhiger Artikelstil
   Alles ueber die Body-Klasse .st-article gekapselt; Seiten ohne diese
   Klasse bleiben unveraendert. Artikelbreite und Ueberschriften kommen
   weiterhin aus den .gt-article/.gt-section-Regeln oberhalb.
   ========================================================================== */
/* --- Seitentitel: echte H1, lange Titel brechen ohne Ueberbreite --- */
.st-article .title-section .st-page-title {
	font-family: 'Futurist Fixed-width';
	font-size: clamp(1.25rem, 5.5vw, 3rem);
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	margin: 0;
	max-width: 100%;
	line-height: 1.15;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto
}
.st-article .title-section .st-page-title span {
	color: #f2eee3
}
.st-article .title-bg {
	font-size: clamp(2.5rem, 10vw, 100px);
	pointer-events: none;
	user-select: none
}
/* --- Zwischenueberschriften und Themenlisten --- */
.st-article .gt-article .st-subhead {
	display: block;
	font-size: clamp(1rem, 2.4vw, 1.1rem);
	font-weight: 600;
	font-style: italic;
	/* Zeilenhoehe kam bisher aus Bootstrap (h4). */
	line-height: 1.2;
	color: #fff;
	margin: 22px 0 6px;
	padding: 0;
	overflow-wrap: break-word;
	hyphens: auto
}
.st-article .gt-article .st-list-title {
	display: block;
	margin: 22px 0 8px;
	padding: 0;
	font-weight: 600
}
.st-article .st-topics, .st-article .st-qualifications {
	margin: 0 0 1.15em;
	padding-left: 1.3em
}
.st-article .st-topics li, .st-article .st-qualifications li {
	margin-bottom: 10px
}
.st-article .st-topics li em {
	color: #f2eee3;
	font-style: normal;
	font-weight: 600
}
/* --- Portrait auf "Ueber mich": auf allen Breiten sichtbar --- */
.st-article .st-portrait {
	margin: 0 0 28px
}
.st-article .st-portrait-img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
	border-radius: 8px
}
.st-article .st-portrait-caption {
	margin-top: 10px;
	text-align: center;
	font-size: 15px;
	font-style: italic;
	color: #f2eee3
}
/* --- Kontaktangaben: lesbar und kopierbar, ausdruecklich auswaehlbar --- */
.st-article .st-contact-data {
	margin: 18px 0 22px;
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text
}
.st-article .st-contact-data dt {
	margin-top: 14px;
	font-weight: 600;
	color: #f2eee3
}
.st-article .st-contact-data dd {
	margin: 2px 0 0;
	overflow-wrap: anywhere
}
/* Inline-Wert in der Definitionsliste: der Darstellungsmodus inline ist
   ausdruecklich gesetzt, damit die Rolle auch als H1-H6 oder P an derselben
   Stelle gleich aussieht (Planregel 3). Groesse und Zeilenhoehe erbte der
   span bisher von body. */
.st-article .st-contact-data .st-contact-value {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.55
}
.st-article .st-contact-data a {
	text-decoration: underline
}
/* --- Karte mit brauchbarer Hoehe, daneben bleibt der Routenlink --- */
.st-article .st-map {
	margin: 18px 0 12px
}
.st-article .st-map-frame {
	display: block;
	width: 100%;
	height: clamp(260px, 42vw, 420px);
	border: 0;
	border-radius: 8px
}
.st-article .st-map-link {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 1.15em
}
.st-article .st-map-link i {
	color: #edba4e;
	flex: 0 0 18px
}
.st-article .st-map-link a {
	overflow-wrap: anywhere;
	text-decoration: underline
}
/* --- Inhalt im Fluss: kein fest positionierter Titel ueber dem Artikel --- */
@media (max-width:576px) {
	.st-article .title-section {
		position: relative;
		padding-right: 60px
	}
	.st-article .main-content {
		padding-top: 20px
	}
	.st-article .st-portrait-img {
		max-width: 280px
	}
}

/* ==========================================================================
   Navigation und Startseiten-Hinweis (Stand 26.10.2026)
   Zehn Menuepunkte statt acht; rahmenloser Gruppentherapie-Hinweis.
   ========================================================================== */

/* --- Desktoprail: ab 900px Hoehe passen zehn Punkte in der Grundgroesse.
       Zwischen 801 und 899px sonst oberer Beschnitt -> kompaktere Abstaende
       wie in der bestehenden Stufe bis 800px. --- */
@media (min-width:992px) and (min-height:801px) and (max-height:899px) {
	.header {
		top: 60px;
		height: calc(100vh - 120px)
	}
	.header ul.icon-menu li.icon-box {
		margin: 12px 0
	}
}

/* --- Niedrige Desktopfenster (u. a. 1024x600 und 1024x450): die feste Rail
       traegt zehn Punkte nicht mehr. Stattdessen das aufklappbare Menue mit
       ausgeschriebenen Beschriftungen und internem Scrollen. Bootstrap setzt
       .d-lg-block / .d-lg-none mit !important, daher hier ebenfalls.
       Die Rail selbst erhaelt bewusst kein overflow, damit die seitlichen
       Desktoplabels oberhalb dieser Grenze nicht abgeschnitten werden. --- */
@media (min-width:992px) and (max-height:700px) {
	.header ul.icon-menu {
		display: none !important
	}
	.header nav[role="navigation"] {
		display: block !important
	}
	.header {
		top: 0;
		right: 0;
		bottom: auto;
		height: auto;
		display: block;
		z-index: 1100 !important
	}
	#menuToggle {
		display: inline-block;
		position: fixed;
		top: 14px;
		right: 18px;
		z-index: 1111;
		user-select: none;
		padding: 19px 0 0 16px;
		width: 54px;
		height: 54px;
		border-radius: 5px;
		background: #252525
	}
	#menuToggle:focus-within {
		outline: 3px solid #edba4e;
		outline-offset: 2px
	}
	#menuToggle input {
		display: flex;
		width: 54px;
		height: 54px;
		position: absolute;
		cursor: pointer;
		opacity: 0;
		z-index: 2;
		top: 0;
		left: 0;
		margin: 0
	}
	#menuToggle>span {
		display: flex;
		width: 23px;
		height: 2px;
		margin-bottom: 5px;
		position: relative;
		background: #fff;
		border-radius: 3px;
		z-index: 1;
		transform-origin: 5px 0;
		transition: transform .5s cubic-bezier(.77, .2, .05, 1), background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s
	}
	#menuToggle>span:first-child {
		transform-origin: 0 0
	}
	#menuToggle>span:nth-last-child(2) {
		transform-origin: 0 100%
	}
	#menuToggle input:checked~span {
		opacity: 1;
		transform: rotate(45deg) translate(4px, 0);
		background: #fff
	}
	#menuToggle input:checked~span:nth-last-child(3) {
		opacity: 0;
		transform: rotate(0) scale(.2, .2)
	}
	#menuToggle input:checked~span:nth-last-child(2) {
		transform: rotate(-45deg) translate(2px, 4px)
	}
	/* Geschlossen: visibility hidden -> keine unsichtbaren Tastaturziele. */
	#menu {
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 76px 0 40px;
		background-color: #252525;
		-webkit-font-smoothing: antialiased;
		visibility: hidden;
		transform: translate(-100%, 0);
		transform-origin: 0 0;
		transition: transform .5s cubic-bezier(.77, .2, .05, 1), visibility 0s linear .5s
	}
	#menuToggle input:checked~ul#menu {
		visibility: visible;
		transform: none;
		transition: transform .5s cubic-bezier(.77, .2, .05, 1), visibility 0s linear 0s
	}
	#menu li {
		position: relative;
		padding-left: 30px
	}
	#menu li:after {
		position: absolute;
		content: '';
		height: 1px;
		width: calc(100% - 60px);
		background: #333;
		left: 30px;
		bottom: 0
	}
	#menu li:last-child:after {
		display: none
	}
	#menu li a {
		color: #fff;
		text-transform: uppercase;
		font-size: 20px;
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 12px 0;
		position: relative;
		transition-delay: 0s
	}
	#menu li a i {
		flex: 0 0 30px;
		width: 30px;
		text-align: left
	}
	#menu li a span {
		position: static;
		left: auto;
		min-width: 0;
		font-weight: 400;
		line-height: 1.2;
		overflow-wrap: break-word;
		hyphens: auto
	}
	#menu li.active a span {
		font-weight: 600
	}
	#menu li a:focus-visible {
		outline: 3px solid #edba4e;
		outline-offset: -3px
	}
}

/* --- Impressum/Datenschutz: lange externe URLs umbrechen lassen.
       Nur innerhalb .legal-page gekapselt; Menues bleiben unveraendert. --- */
.legal-page .main-content a,
.legal-page .main-content .st-legal-text,
.legal-page .main-content li {
	overflow-wrap: anywhere
}

/* --- Dekoratives Hintergrundwort (.title-bg, aria-hidden): es ist breiter als
       der Abschnitt und kann bei starker Textvergroesserung horizontale
       Ueberbreite erzeugen. Im Abschnitt begrenzen - betrifft nur den
       Titelbereich, nicht die seitlichen Desktoplabels in .header. --- */
.st-article .title-section, .gruppentherapie .title-section {
	overflow: hidden
}

/* --- Startseite: lange Woerter umbrechen lassen, damit starke
       Textvergroesserung keine horizontale Ueberbreite erzeugt.
       "anywhere" wirkt auch auf die Mindestbreite der Flexkinder. --- */
.home .home-details h2.ichBinSandra, .home .home-details p.header-sub-title {
	overflow-wrap: anywhere;
	hyphens: auto
}
/* --- Impressum/Datenschutz: Titel, Zwischentitel und Fliesstext als
       Darstellungsrollen. Die frueheren Regeln hingen an h1-h4 und p. Die
       Rechtsseite hat keine eigenen Titelgroessen; Groesse, Zeilenhoehe und
       Rand der Titel kamen aus Bootstrap und stehen deshalb hier
       ausdruecklich (h2: calc(1.325rem + .9vw) / ab 1200 px 2rem; h3:
       calc(1.3rem + .6vw) / 1.75rem; Rand .5rem; Zeilenhoehe 1.2).
       Der Umbruchschutz fuer 200%-Textvergroesserung haengt jetzt an den
       Klassen. Alles in .legal-page gekapselt; andere Seiten unveraendert. --- */
.legal-page .main-content .st-legal-title,
.legal-page .main-content .st-legal-subtitle {
	display: block;
	margin: 0 0 .5rem;
	padding: 0;
	font-weight: 500;
	font-style: normal;
	line-height: 1.2;
	overflow-wrap: anywhere;
	hyphens: auto;
	word-break: break-word
}
.legal-page .main-content .st-legal-title {
	font-size: calc(1.325rem + .9vw)
}
.legal-page .main-content .st-legal-subtitle {
	font-size: calc(1.3rem + .6vw)
}
@media (min-width: 1200px) {
	.legal-page .main-content .st-legal-title {
		font-size: 2rem
	}
	.legal-page .main-content .st-legal-subtitle {
		font-size: 1.75rem
	}
}
/* Fliesstext: Groesse (15 px), Schnitt und Zeilenhoehe erbt die Rechtsseite
   weiter von body; aus dem p-Tag kamen Rand und Umbruch. Die Zeilenhoehe
   steht ausdruecklich, weil Bootstrap bei h1-h6 auf 1.2 wechseln wuerde. */
.legal-page .main-content .st-legal-text {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
	/* Groesse folgt dem Umgebungstext (body ist ab 576 px 14 px). */
	font-size: inherit;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	word-break: normal;
	hyphens: manual
}
/* strong und span bleiben taggebunden: Hervorhebung und Inline-Typografie
   sind keine Darstellungsrollen (Plan C07). Die Textklassen der Rechtsseite
   sind spezifischer und setzen ihren Umbruch selbst. */
.legal-page .main-content strong,
.legal-page .main-content span {
	overflow-wrap: anywhere
}
.legal-page .main-content table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed
}
.legal-page .main-content td,
.legal-page .main-content th {
	overflow-wrap: anywhere;
	hyphens: auto;
	word-break: break-word
}

/* --- Downloads-Seite: Titelbereich und Schaltflaechen bei 200%-Textvergroesserung
       ohne horizontale Ueberbreite. Kapselt alles in .downloads-page. --- */
.downloads-page .title-section,
.legal-page .title-section {
	overflow: hidden
}
/* Die frueheren Regeln fuer eine H2 im Titelbereich sind entfallen: Kein
   Seitentitel der zwoelf Seiten ist eine H2 (alle nutzen H1), die Regel war
   also unwirksam. Sie haette beim Tagwechsel die Umbruchwerte des
   Seitentitels veraendert (anywhere statt break-word). Den Umbruchschutz
   setzt .st-page-title selbst, auf der Downloads-Seite zusaetzlich
   .st-article .title-section .st-page-title mit word-break. */
.downloads-page .patientenbogenButton {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
	white-space: normal
}
/* Statt h5 und span stehen hier die beiden tatsaechlichen Textrollen im
   Inhalt: Dateiname und Dateiangabe. Eine H5 gibt es auf der Seite nicht;
   der Selektor haette beim Tagwechsel neu gegriffen. Andere Spans als
   .st-file-name und .st-file-meta hat der Inhaltsbereich nicht. */
.downloads-page .main-content a,
.downloads-page .main-content .st-file-name,
.downloads-page .main-content .st-file-meta {
	overflow-wrap: anywhere;
	hyphens: auto
}
@media (max-width:576px) {
	.downloads-page .title-section,
	.legal-page .title-section {
		position: relative;
		padding-right: 60px
	}
	.downloads-page .main-content,
	.legal-page .main-content {
		padding-top: 20px
	}
}

/* ==========================================================================
   Aufgelockertes Layout statt Textschlauch (Stand 27.10.2026)
   Alle Inhaltsseiten im neuen Stil ueber die Artikelklasse .st-rich.
   Beschreibung aller Bausteine und Regeln: docs/styleguide.md.
   st-about-* und st-career-* nur auf "Ueber mich", st-form-* nur auf
   patientenbogen.php. Startseite und Impressum nutzen diese Regeln nicht.
   ========================================================================== */
.gt-article.st-rich {
	max-width: 940px
}
/* --- Kleine goldene Rubrik ueber Ueberschriften und Kapiteln --- */
.st-rich .st-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #edba4e
}
.st-rich .st-kicker::before {
	content: '';
	flex: 0 0 28px;
	height: 2px;
	background: #edba4e
}
.st-rich .gt-section {
	margin-top: 72px
}
.st-rich .gt-section .st-section-title, .st-rich .gt-section .st-card-title {
	margin-top: 0
}
/* --- Einstieg: Portrait mit goldenem Versatzrahmen neben Name und Einleitung --- */
.st-rich .st-about-hero {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
	margin-bottom: 64px
}
.st-rich .st-portrait {
	position: relative;
	margin: 0 18px 18px 0
}
.st-rich .st-portrait::before {
	content: '';
	position: absolute;
	top: 18px;
	right: -18px;
	bottom: -18px;
	left: 18px;
	border: 2px solid #edba4e;
	border-radius: 14px
}
.st-rich .st-portrait::after {
	content: '';
	position: absolute;
	top: -22px;
	left: -22px;
	width: 112px;
	height: 112px;
	background-image: radial-gradient(rgba(242, 238, 227, .45) 1.6px, transparent 1.9px);
	background-size: 14px 14px
}
.st-rich .st-portrait-img {
	position: relative;
	z-index: 1;
	max-width: 100%;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 30, 35, .35)
}
.st-rich .st-about-eyebrow {
	display: block;
	padding: 0;
	font-style: normal;
	margin: 0 0 6px;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #edba4e
}
.st-rich .st-about-name {
	display: block;
	padding: 0;
	font-style: normal;
	margin: 0 0 10px;
	font-size: clamp(1.9rem, 4.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: #f2eee3;
	hyphens: manual
}
.st-rich .st-about-place {
	display: block;
	margin: 0 0 24px;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.65;
	color: rgba(242, 238, 227, .8)
}
.st-rich .st-about-place i {
	margin-right: 6px;
	color: #edba4e
}
.st-rich .st-about-lead {
	display: block;
	margin: 0;
	font-weight: 500;
	font-style: normal;
	padding: 24px 0 0;
	border-top: 1px solid rgba(242, 238, 227, .2);
	font-size: clamp(1.05rem, 1.9vw, 1.2rem);
	line-height: 1.7;
	color: #fff
}
/* --- Auf einen Blick: drei Kennzahlen auf dunklerem Petrol --- */
.st-rich .st-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 64px;
	padding: 0;
	list-style: none;
	background: linear-gradient(135deg, #00535d 0%, #004952 100%);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(0, 30, 35, .25);
	overflow: hidden
}
.st-rich .st-facts li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 26px 28px
}
.st-rich .st-facts li + li {
	border-left: 1px solid rgba(242, 238, 227, .14)
}
.st-rich .st-fact-value {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	color: #edba4e;
	hyphens: manual
}
.st-rich .st-fact-label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: #f2eee3
}
/* --- Werdegang in zwei nebeneinanderstehenden Kapiteln --- */
.st-rich .st-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px
}
.st-rich .st-column .st-body-text:last-child {
	margin-bottom: 0
}
/* --- Kernsatz als ruhiger Zwischenruf mit Ornament --- */
.st-rich .st-statement {
	display: block;
	position: relative;
	max-width: 760px;
	margin: 72px auto 0;
	padding: 40px 24px 0;
	text-align: center;
	font-size: clamp(1.2rem, 2.6vw, 1.55rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.55;
	color: #f2eee3;
	hyphens: manual
}
.st-rich .st-statement::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 140px;
	height: 2px;
	transform: translateX(-50%);
	background: linear-gradient(to right, transparent, #edba4e 30%, #edba4e 70%, transparent)
}
.st-rich .st-statement::after {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	transform: rotate(45deg);
	background: #edba4e;
	box-shadow: 0 0 0 5px #005f6a
}
/* --- Qualifikationen als Kacheln mit Symbol --- */
.st-rich .st-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none
}
.st-rich .st-tiles li {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 16px 20px;
	font-size: 16.5px;
	line-height: 1.5;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 12px
}
.st-rich .st-tiles li:last-child:nth-child(odd) {
	grid-column: 1 / -1
}
.st-rich .st-tiles li i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(237, 186, 78, .14);
	color: #edba4e;
	font-size: 19px
}
/* Alte globale Regel faerbt .fa-graduation-cap mit !important petrol */
.st-rich .st-tiles li i.fa-graduation-cap {
	color: #edba4e !important
}
/* --- Zeitleiste: Jahreszahl links, Karte rechts, aktuelle Station in Gold --- */
.st-rich .st-career-list {
	position: relative;
	margin: 28px 0 0;
	padding: 0;
	list-style: none
}
.st-rich .st-career-list::before {
	content: '';
	position: absolute;
	left: 151px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: linear-gradient(to bottom, #edba4e 0%, rgba(237, 186, 78, .5) 60%, rgba(237, 186, 78, .12) 100%)
}
.st-rich .st-career-item {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	column-gap: 44px;
	align-items: start;
	margin: 0 0 16px
}
.st-rich .st-career-item::before {
	content: '';
	position: absolute;
	left: 146px;
	top: 22px;
	z-index: 1;
	width: 12px;
	height: 12px;
	border: 2px solid #edba4e;
	border-radius: 50%;
	background: #005f6a
}
.st-rich .st-career-item--current::before {
	background: #edba4e;
	box-shadow: 0 0 0 5px rgba(237, 186, 78, .22)
}
.st-rich .st-career-date {
	justify-self: end;
	max-width: 100%;
	margin: 14px 0 0;
	padding: 5px 12px;
	border: 1px solid rgba(237, 186, 78, .5);
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	color: #f2eee3
}
.st-rich .st-career-item--current .st-career-date {
	background: #edba4e;
	border-color: #edba4e;
	color: #00535d
}
.st-rich .st-career-body {
	padding: 16px 22px;
	background: rgba(242, 238, 227, .05);
	border: 1px solid rgba(242, 238, 227, .11);
	border-radius: 12px
}
.st-rich .st-career-item--current .st-career-body {
	background: rgba(237, 186, 78, .09);
	border-color: rgba(237, 186, 78, .45)
}
.st-rich .st-career-title {
	display: block;
	padding: 0;
	margin: 0 0 4px;
	font-size: clamp(1rem, 2.2vw, 1.1rem);
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	overflow-wrap: break-word;
	hyphens: auto
}
.st-rich .st-career-place {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: .88rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.65;
	color: #edba4e
}
.st-rich .st-career-desc {
	display: block;
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-style: normal;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
	overflow-wrap: break-word;
	hyphens: auto
}
/* --- Abschluss: zwei Weiter-Karten statt Fliesstext-Verweis --- */
.st-rich .st-next {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 64px 0 0
}
.st-rich .st-next-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 64px 22px 24px;
	border: 2px solid rgba(242, 238, 227, .35);
	border-radius: 14px;
	color: #f2eee3;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease
}
.st-rich .st-next-kicker {
	display: block;
	margin: 0;
	padding: 0;
	font-size: .78rem;
	font-weight: 700;
	font-style: normal;
	/* Zeilenhoehe 1.6 kam bisher von body (Bootstrap wuerde 1.2 setzen). */
	line-height: 1.6;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #edba4e;
	transition: color .25s ease
}
.st-rich .st-next-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(1.1rem, 2.4vw, 1.3rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	hyphens: manual
}
.st-rich .st-next-link i {
	position: absolute;
	top: 50%;
	right: 24px;
	font-size: 18px;
	color: #edba4e;
	transform: translateY(-50%);
	transition: transform .25s ease, color .25s ease
}
.st-rich .st-next-link:hover, .st-rich .st-next-link:focus-visible {
	background: #f2eee3;
	border-color: #f2eee3;
	color: #005f6a
}
.st-rich .st-next-link:hover .st-next-kicker, .st-rich .st-next-link:focus-visible .st-next-kicker {
	color: #00535d
}
.st-rich .st-next-link:hover i, .st-rich .st-next-link:focus-visible i {
	color: #005f6a;
	transform: translate(4px, -50%)
}
/* --- Sanftere Scroll-Einblendung als der Revealator-Standard (100 px) --- */
.st-rich .revealator-slideup {
	transform: translate(0, 28px)
}
.st-rich .revealator-slideup.revealator-within, .st-rich .revealator-slideup.revealator-above, .st-rich .revealator-slideup.revealator-partially-below {
	transform: none
}
@media (prefers-reduced-motion: reduce) {
	.st-rich .revealator-slideup {
		opacity: 1;
		transform: none;
		transition: none
	}
	.st-rich .st-next-link, .st-rich .st-next-link i, .st-rich .st-next-kicker {
		transition: none
	}
}
/* --- Tablet: Portrait ueber dem Text --- */
@media (max-width: 991px) {
	.st-rich .st-about-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
		margin-bottom: 48px
	}
	.st-rich .st-portrait {
		width: min(320px, calc(100% - 22px));
		margin: 0 auto 18px
	}
}
/* --- Mobil: alles einspaltig, Zeitleiste links --- */
@media (max-width: 767px) {
	.st-rich .gt-section {
		margin-top: 56px
	}
	.st-rich .st-facts {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 48px
	}
	.st-rich .st-facts li {
		padding: 20px 22px
	}
	.st-rich .st-facts li + li {
		border-left: 0;
		border-top: 1px solid rgba(242, 238, 227, .14)
	}
	.st-rich .st-columns, .st-rich .st-tiles, .st-rich .st-next {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-columns {
		gap: 32px
	}
	.st-rich .st-statement {
		margin-top: 56px;
		padding: 36px 4px 0
	}
	.st-rich .st-tiles li {
		padding: 14px 16px
	}
	.st-rich .st-career-list::before {
		left: 7px
	}
	.st-rich .st-career-item {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 30px;
		margin-bottom: 18px
	}
	.st-rich .st-career-item::before {
		left: 2px;
		top: 8px
	}
	.st-rich .st-career-date {
		justify-self: start;
		margin: 0 0 8px
	}
	.st-rich .st-career-body {
		padding: 14px 16px
	}
}
/* --- Kontakt & Anmeldung: Sprunglinks als Pillen --- */
.st-rich .gt-actions + .gt-section {
	margin-top: 48px
}
.st-rich .gt-jumplinks a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid rgba(242, 238, 227, .3);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease
}
.st-rich .gt-jumplinks a:hover, .st-rich .gt-jumplinks a:focus-visible {
	background: #f2eee3;
	border-color: #f2eee3;
	color: #005f6a
}
/* --- Einstieg: Text links, Telefonhinweis und Zusage-Hinweis rechts --- */
.st-rich .st-split {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start
}
/* Unterrand 1rem wie bisher beim p-Tag (waechst bei 200 % Textgroesse mit). */
.st-rich .st-lead {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
	font-size: clamp(1.05rem, 1.9vw, 1.2rem);
	font-weight: 500;
	font-style: normal;
	line-height: 1.7;
	color: #fff
}
.st-rich .st-aside {
	display: flex;
	flex-direction: column;
	gap: 16px
}
.st-rich .st-callout {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	padding: 22px 24px;
	background: linear-gradient(135deg, #00535d 0%, #004952 100%);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(0, 30, 35, .25)
}
.st-rich .st-callout i {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-row: 1 / span 3;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #edba4e;
	color: #00535d;
	font-size: 22px
}
.st-rich .st-callout-text {
	display: block;
	padding: 0;
	font-weight: 500;
	margin: 0 0 2px;
	font-size: 15px;
	line-height: 1.45;
	color: #f2eee3;
	hyphens: manual
}
.st-rich .st-callout-phone {
	font-size: clamp(1.3rem, 2.6vw, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	color: #edba4e;
	text-decoration: none
}
.st-rich .st-callout-phone:hover, .st-rich .st-callout-phone:focus-visible {
	color: #f2eee3;
	text-decoration: underline
}
.st-rich .st-note {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 18px 20px;
	font-size: 15.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	color: #fff;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 12px
}
.st-rich .st-note i {
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 18px;
	color: #edba4e
}
/* --- Praxisangaben als Karten; Erreichbarkeit in Gold hervorgehoben --- */
.st-rich .st-contact-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	margin: 24px 0 0
}
.st-rich .st-contact-card {
	grid-column: span 2;
	padding: 20px 22px;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 14px
}
.st-rich .st-contact-card:nth-child(n+4) {
	grid-column: span 3
}
.st-rich .st-contact-card--accent {
	background: rgba(237, 186, 78, .09);
	border-color: rgba(237, 186, 78, .45)
}
.st-rich .st-contact-data dt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #edba4e
}
.st-rich .st-contact-data dt i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(237, 186, 78, .14);
	font-size: 15px;
	letter-spacing: 0
}
.st-rich .st-contact-data dd {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: #fff
}
.st-rich .st-contact-data dd a {
	font-weight: 600;
	color: #f2eee3;
	text-decoration: underline;
	text-decoration-color: rgba(237, 186, 78, .7);
	text-underline-offset: 3px
}
.st-rich .st-contact-data dd a:hover, .st-rich .st-contact-data dd a:focus-visible {
	color: #edba4e
}
/* --- Anfahrt: Text und Routen-Button neben der Karte mit Goldrahmen --- */
.st-rich .st-map-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 48px;
	align-items: center;
	margin-top: 24px
}
.st-rich .st-map-route {
	display: block;
	margin: 22px 0 0;
	padding: 0;
	font-weight: 500;
	font-style: normal
}
.st-rich .gt-cta i {
	margin-right: 6px
}
.st-rich .st-map {
	position: relative;
	margin: 0 18px 18px 0
}
.st-rich .st-map::before {
	content: '';
	position: absolute;
	top: 18px;
	right: -18px;
	bottom: -18px;
	left: 18px;
	border: 2px solid #edba4e;
	border-radius: 14px
}
.st-rich .st-map-frame {
	position: relative;
	z-index: 1;
	height: clamp(260px, 30vw, 360px);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 30, 35, .35)
}
/* --- Einrichtungen: dunkles Panel mit zwei Anfrage-Karten --- */
.st-rich .st-panel {
	padding: 40px 44px;
	background: linear-gradient(135deg, #00535d 0%, #004952 100%);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(0, 30, 35, .25)
}
.st-rich .st-next--inset {
	margin-top: 24px
}
/* --- Akute Hilfe: goldgerahmter Kasten, Anlaufstellen als Kacheln --- */
.st-rich .st-help {
	padding: 36px 40px;
	background: rgba(237, 186, 78, .06);
	border: 2px solid rgba(237, 186, 78, .55);
	border-radius: 18px
}
.st-rich .st-icon-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px
}
.st-rich .st-icon-head > i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #edba4e;
	color: #00535d;
	font-size: 26px
}
.st-rich .st-icon-head .st-section-title, .st-rich .st-icon-head .st-card-title {
	margin-bottom: 0
}
.st-rich .st-help-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0 0;
	padding: 0
}
.st-rich .st-help-links li {
	margin: 0
}
.st-rich .st-help-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 16px 18px;
	background: rgba(242, 238, 227, .08);
	border: 1px solid rgba(242, 238, 227, .16);
	border-radius: 12px;
	font-weight: 600;
	color: #f2eee3;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease
}
.st-rich .st-help-links a i {
	flex: 0 0 auto;
	color: #edba4e;
	transition: color .25s ease
}
.st-rich .st-help-links a:hover, .st-rich .st-help-links a:focus-visible {
	background: #f2eee3;
	border-color: #f2eee3;
	color: #005f6a
}
.st-rich .st-help-links a:hover i, .st-rich .st-help-links a:focus-visible i {
	color: #005f6a
}
@media (prefers-reduced-motion: reduce) {
	.st-rich .gt-jumplinks a, .st-rich .st-help-links a, .st-rich .st-help-links a i {
		transition: none
	}
}
/* --- Tablet: Praxiskarten zweispaltig --- */
@media (max-width: 991px) {
	.st-rich .st-contact-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
	.st-rich .st-contact-card, .st-rich .st-contact-card:nth-child(n+4) {
		grid-column: auto
	}
	.st-rich .st-contact-card:last-child:nth-child(odd) {
		grid-column: 1 / -1
	}
}
/* --- Mobil: alles einspaltig, Panels mit weniger Innenabstand --- */
@media (max-width: 767px) {
	.st-rich .gt-actions + .gt-section {
		margin-top: 40px
	}
	.st-rich .st-split, .st-rich .st-map-split, .st-rich .st-contact-cards, .st-rich .st-help-links {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-split, .st-rich .st-map-split {
		gap: 28px
	}
	.st-rich .st-map {
		margin-right: 14px
	}
	.st-rich .st-panel, .st-rich .st-help {
		padding: 26px 20px
	}
	.st-rich .st-icon-head > i {
		flex-basis: 46px;
		width: 46px;
		height: 46px;
		font-size: 21px
	}
}
/* --- Ablauf & Kosten: Versicherungskarten mit Symbol --- */
.st-rich .gt-actions + .st-kicker {
	margin-top: 48px
}
.st-rich .st-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px
}
.st-rich .st-cards > .gt-section {
	margin-top: 0
}
.st-rich .st-card {
	padding: 28px 30px;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 16px
}
.st-rich .st-card--wide {
	grid-column: 1 / -1
}
.st-rich .st-card .st-icon-head {
	gap: 16px;
	margin-bottom: 16px
}
.st-rich .st-card .st-icon-head > i {
	flex-basis: 48px;
	width: 48px;
	height: 48px;
	background: rgba(237, 186, 78, .14);
	color: #edba4e;
	font-size: 21px
}
.st-rich .st-card-title {
	font-size: clamp(1.15rem, 2.4vw, 1.35rem)
}
.st-rich .st-card .st-body-text {
	font-size: 16.5px
}
/* Die Infokarte im Kartentext wurde bisher von .st-card p mitgetroffen. */
.st-rich .st-card .st-note {
	font-size: 16.5px
}
.st-rich .st-card .st-body-text:last-child {
	margin-bottom: 0
}
.st-rich .st-card em {
	font-style: normal;
	font-weight: 600;
	color: #edba4e
}
/* Breite Karten: Ueberschrift links, Text rechts statt ueberlanger Zeilen */
.st-rich .st-card--wide, .st-rich .st-option--wide {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	column-gap: 40px;
	align-items: start
}
.st-rich .st-card--wide .st-icon-head {
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0
}
.st-rich .st-card-text .st-note {
	margin-top: 18px
}
/* --- Ablauf: nummerierte Schritte an goldener Linie --- */
.st-rich .st-steps {
	position: relative;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: st-step
}
.st-rich .st-steps::before {
	content: '';
	position: absolute;
	left: 23px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	background: linear-gradient(to bottom, #edba4e 0%, rgba(237, 186, 78, .5) 60%, rgba(237, 186, 78, .12) 100%)
}
.st-rich .st-step {
	position: relative;
	margin: 0 0 44px;
	padding-left: 76px;
	counter-increment: st-step
}
.st-rich .st-step:last-child {
	margin-bottom: 0
}
.st-rich .st-step::before {
	content: counter(st-step);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid #edba4e;
	border-radius: 50%;
	background: #005f6a;
	font-size: 1.25rem;
	font-weight: 700;
	color: #edba4e
}
.st-rich .st-step-title {
	margin: 8px 0 10px;
	font-size: clamp(1.15rem, 2.6vw, 1.35rem);
	color: #f2eee3
}
.st-rich .st-step > .st-body-text:last-child {
	margin-bottom: 0
}
/* --- Behandlungsoptionen als Kacheln innerhalb eines Schritts --- */
.st-rich .st-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 20px 0 0
}
.st-rich .st-option {
	padding: 22px 24px;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 14px
}
.st-rich .st-option--wide {
	grid-column: 1 / -1
}
.st-rich .st-option > i, .st-rich .st-option-head > i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: rgba(237, 186, 78, .14);
	color: #edba4e;
	font-size: 19px
}
.st-rich .st-option .st-subhead {
	margin: 0 0 8px;
	font-size: clamp(1rem, 2.2vw, 1.1rem);
	font-style: normal;
	line-height: 1.35;
	color: #f2eee3
}
.st-rich .st-option .st-body-text {
	font-size: 16px
}
.st-rich .st-option .st-body-text:last-child {
	margin-bottom: 0
}
/* --- Tablet: Optionen einspaltig, breite Karten wieder untereinander --- */
@media (max-width: 991px) {
	.st-rich .st-options {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-card--wide, .st-rich .st-option--wide {
		display: block
	}
	.st-rich .st-card--wide .st-icon-head {
		flex-direction: row;
		align-items: center;
		margin-bottom: 16px
	}
}
/* --- Mobil: Karten einspaltig, Schritte mit kleineren Nummern --- */
@media (max-width: 767px) {
	.st-rich .gt-actions + .st-kicker {
		margin-top: 40px
	}
	.st-rich .st-cards {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-card {
		padding: 22px 20px
	}
	.st-rich .st-steps::before {
		left: 19px
	}
	.st-rich .st-step {
		padding-left: 56px
	}
	.st-rich .st-step::before {
		width: 40px;
		height: 40px;
		font-size: 1.1rem
	}
	.st-rich .st-step-title {
		margin-top: 4px
	}
	.st-rich .st-option {
		padding: 18px 16px
	}
}
/* --- Das Verfahren: Textspalten mit Goldlinie, Dreier-Kacheln --- */
.st-rich .st-lead {
	max-width: 780px
}
.st-rich .st-lead + .st-columns {
	margin-top: 28px
}
.st-rich .st-columns--ruled .st-column {
	padding-top: 18px;
	border-top: 2px solid rgba(237, 186, 78, .45)
}
.st-rich .st-columns + .st-note {
	margin-top: 28px
}
.st-rich .st-columns + .st-statement {
	margin-top: 64px
}
/* Eigenstaendige Darstellungsklasse; Groesse und Zeilenhoehe stehen oben in
   der Artikelschrift-Gruppe unter .gt-article .st-tiles-intro. */
.st-rich .st-tiles-intro {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	font-weight: 600;
	font-style: normal;
	color: #f2eee3
}
.st-rich .st-tiles--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 32px
}
.st-rich .st-tiles--three li:last-child:nth-child(odd) {
	grid-column: auto
}
.st-rich .st-options--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 24px
}
.st-rich .st-option-title {
	margin: 0 0 8px;
	font-size: clamp(1rem, 2.2vw, 1.1rem);
	line-height: 1.35;
	color: #f2eee3
}
/* Dreier-Raster erst ab Desktop; die Regeln oben ueberschreiben sonst die
   frueheren Einspalter-Regeln fuer Tablet und Mobil */
@media (max-width: 991px) {
	.st-rich .st-tiles--three, .st-rich .st-options--three {
		grid-template-columns: minmax(0, 1fr)
	}
}
/* --- Einzelpsychotherapie: Abstaende zwischen den Bausteinen --- */
.st-rich .gt-lead + .st-lead {
	margin-top: 20px
}
.st-rich .st-section-title + .st-columns {
	margin-top: 24px
}
.st-rich .st-columns + .gt-actions {
	margin-top: 36px
}
.st-rich .st-options + .st-note {
	margin-top: 20px
}
.st-rich .st-statement + .gt-context-hint {
	margin-top: 20px;
	text-align: center
}
.st-rich .gt-section + .st-kicker {
	margin-top: 72px
}
/* Telefonkasten: optionale dritte Zeile (Telefonzeit) neben dem Symbol */
.st-rich .st-callout > :not(i) {
	grid-column: 2
}
.st-rich .st-callout-time {
	display: block;
	padding: 0;
	line-height: 1.45;
	margin: 6px 0 0;
	font-size: 14px;
	color: rgba(242, 238, 227, .8)
}
.st-rich .st-panel .st-callout {
	background: rgba(242, 238, 227, .06);
	box-shadow: none
}
@media (max-width: 767px) {
	.st-rich .gt-section + .st-kicker {
		margin-top: 56px
	}
}
/* --- Feature-Kacheln: Symbol mittig mit Flip beim Hovern, dazu dasselbe
       Symbol gross und blass als ruhendes Wasserzeichen --- */
.st-rich .st-options--feature .st-option {
	position: relative;
	overflow: hidden
}
.st-rich .st-options--feature .st-option > :not(.st-option-bg) {
	position: relative;
	z-index: 1
}
.st-rich .st-options--feature .st-option > i:not(.st-option-bg) {
	margin: 0 auto 16px;
	transition: transform .6s ease
}
.st-rich .st-options--feature .st-option:hover > i:not(.st-option-bg) {
	transform: perspective(400px) rotateY(360deg)
}
.st-rich .st-option > i.st-option-bg {
	position: absolute;
	right: -14px;
	bottom: -22px;
	z-index: 0;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: none;
	font-size: 130px;
	line-height: 1;
	color: #edba4e;
	opacity: .07;
	transform: rotate(-12deg);
	pointer-events: none
}
@media (prefers-reduced-motion: reduce) {
	.st-rich .st-options--feature .st-option > i:not(.st-option-bg) {
		transition: none
	}
	.st-rich .st-options--feature .st-option:hover > i:not(.st-option-bg) {
		transform: none
	}
}
/* --- Gruppentherapie: Einstiegsfragen als Kacheln mit Anfuehrungszeichen --- */
.st-rich .st-questions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none
}
.st-rich .st-questions li {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 18px 22px 18px 66px;
	font-size: 17px;
	font-style: italic;
	line-height: 1.5;
	color: #f2eee3;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 14px
}
.st-rich .st-questions li::before {
	content: '\f10d';
	position: absolute;
	top: 50%;
	left: 22px;
	font-family: FontAwesome;
	font-size: 26px;
	font-style: normal;
	line-height: 1;
	color: #edba4e;
	transform: translateY(-50%)
}
.st-rich .st-questions + .st-columns {
	margin-top: 32px
}
/* Ungerade Anzahl Weiter-Karten: die letzte nimmt die volle Breite */
.st-rich .st-next > :last-child:nth-child(odd) {
	grid-column: 1 / -1
}
@media (max-width: 767px) {
	.st-rich .st-questions {
		grid-template-columns: minmax(0, 1fr)
	}
}
/* --- Teamfortbildung & Coaching: Untertitel, Themenkacheln, Anfrage-Kasten --- */
.st-rich .st-subtitle {
	display: block;
	max-width: 780px;
	margin: 0 0 24px;
	padding: 0;
	font-size: clamp(1.1rem, 2.4vw, 1.3rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.45;
	color: #f2eee3;
	overflow-wrap: anywhere;
	hyphens: auto
}
.st-rich .st-columns + .st-tiles-intro {
	margin-top: 40px
}
/* Zweispaltige Kacheln mit ungerader Anzahl: die letzte ueber volle Breite */
.st-rich .st-options:not(.st-options--three) > .st-option:last-child:nth-child(odd) {
	grid-column: 1 / -1
}
/* .st-panel-close ist eine eigenstaendige Darstellungsklasse; Groesse und
   Zeilenhoehe stehen oben in der Artikelschrift-Gruppe. Der Abschlusstext
   steht heute nur nach einer Infokarte, deshalb der Abstand in der
   Nachbarregel und in der Grundklasse 0. */
.st-rich .st-panel-close {
	display: block;
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-style: normal
}
.st-rich .st-note + .st-panel-close {
	margin: 20px 0 0
}
.st-rich .st-split > .st-next {
	margin: 0
}
.st-rich .st-body-text + .st-callout {
	margin-top: 24px
}
.st-rich .st-callout .st-callout-title {
	margin: 0 0 6px;
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	line-height: 1.35;
	color: #f2eee3
}
.st-rich .st-callout .st-body-text {
	margin: 0 0 16px;
	font-size: 16px
}
.st-rich .st-callout .gt-cta {
	justify-self: start
}
/* Anfrage-Kasten mit Button: mobil Symbol oben, Button ueber volle Breite */
@media (max-width: 767px) {
	.st-rich .st-callout--cta {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px
	}
	.st-rich .st-callout--cta i {
		grid-row: auto;
		margin-bottom: 8px
	}
	.st-rich .st-callout--cta > :not(i) {
		grid-column: 1
	}
	.st-rich .st-callout--cta .gt-cta {
		justify-self: stretch
	}
}
/* --- Downloads: Datei-Karte, Bild mit Goldrahmen, Online-Formular im Panel --- */
.st-rich > .gt-section:first-child {
	margin-top: 0
}
.st-rich .st-split--media {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center
}
.st-rich .st-file {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	margin: 24px 0;
	padding: 14px 18px;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 12px
}
.st-rich .st-file i {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(237, 186, 78, .14);
	color: #edba4e;
	font-size: 20px
}
/* Groesse, Zeilenhoehe und Rand standen bisher nur im Span-Grundzustand
   beziehungsweise in der Vererbung von body (15 px / 1.6). Beide Angaben
   sind ausdruecklich gesetzt, damit die Rollen auch als H1-H6 oder P
   gleich aussehen; im Grid werden sie ohnehin blockartig dargestellt. */
.st-rich .st-file-name {
	grid-column: 2;
	display: block;
	margin: 0;
	padding: 0;
	/* Groesse folgt dem Umgebungstext (body ist ab 576 px 14 px). */
	font-size: inherit;
	font-weight: 600;
	font-style: normal;
	line-height: 1.6;
	color: #f2eee3
}
.st-rich .st-file-meta {
	grid-column: 2;
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	color: rgba(242, 238, 227, .75)
}
.st-rich .st-download-action {
	display: block;
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-style: normal
}
.st-rich .st-media {
	position: relative;
	margin: 0 18px 18px 0
}
.st-rich .st-media::before {
	content: '';
	position: absolute;
	top: 18px;
	right: -18px;
	bottom: -18px;
	left: 18px;
	border: 2px solid #edba4e;
	border-radius: 14px
}
.st-rich .st-media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 30, 35, .35)
}
@media (max-width: 767px) {
	.st-rich .st-split--media {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-media {
		margin-right: 14px
	}
}

/* ==========================================================================
   Online-Patientenbogen (patientenbogen.php), Stand 27.10.2026
   Formular-Bausteine st-form-* unter .st-rich; nur auf dieser Seite genutzt.
   ========================================================================== */
.st-rich .st-kicker + .st-section-title, .st-rich .st-kicker + .st-card-title {
	margin-top: 0
}
.st-rich .st-form-notes {
	display: grid;
	gap: 12px;
	margin: 24px 0 0
}
.st-rich .st-form-notes a, .st-rich .st-form-privacy a {
	text-decoration: underline
}
/* --- Hinweis- und Fehlerkasten nach dem Absenden --- */
.st-rich .st-form-alert {
	margin: 32px 0 0;
	padding: 20px 24px;
	background: rgba(255, 180, 168, .1);
	border: 2px solid #ffb4a8;
	border-radius: 14px
}
.st-rich .st-form-alert:focus {
	outline: 3px solid #edba4e;
	outline-offset: 3px
}
/* Titel und Text des Hinweiskastens als Darstellungsrollen. Schnitt 600 und
   Zeilenhoehe 1.2 des Titels kamen aus .gt-article h3 beziehungsweise
   Bootstrap; beim Text kamen Zeilenhoehe 1.65 und Schnitt 500 aus dem
   Artikel-Absatz. */
.st-rich .st-form-alert-title {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #fff;
	overflow-wrap: break-word;
	hyphens: auto
}
.st-rich .st-form-alert-text {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.65;
	color: #fff
}
.st-rich .st-form-alert-text:last-child {
	margin-bottom: 0
}
.st-rich .st-form-alert ul {
	margin: 0;
	padding-left: 1.2em
}
.st-rich .st-form-alert li {
	margin: 4px 0;
	font-size: 15.5px
}
.st-rich .st-form-alert a {
	color: #ffd6cf;
	text-decoration: underline
}
.st-rich .st-form-jumplinks {
	margin: 32px 0 0
}
/* --- Abschnitte als nummerierte Karten --- */
.st-rich .st-form-section {
	min-width: 0;
	margin: 28px 0 0;
	padding: 26px 30px 30px;
	background: rgba(242, 238, 227, .05);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 16px
}
.st-rich .st-form-section > legend {
	float: left;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 0 22px;
	padding: 0;
	font-size: clamp(1.15rem, 2.4vw, 1.35rem);
	font-weight: 600;
	line-height: 1.3;
	color: #f2eee3
}
.st-rich .st-form-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border: 2px solid #edba4e;
	border-radius: 50%;
	font-size: 1.05rem;
	font-weight: 700;
	color: #edba4e
}
.st-rich .st-form-grid {
	clear: both;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px
}
.st-rich .st-form-field {
	grid-column: span 6;
	min-width: 0
}
.st-rich .st-form-field--2 {
	grid-column: span 2
}
.st-rich .st-form-field--3 {
	grid-column: span 3
}
.st-rich .st-form-field--4 {
	grid-column: span 4
}
/* --- Beschriftungen und Eingabefelder --- */
/* label und legend bleiben taggebunden: sie sind die native Beschriftung
   ihres Feldes beziehungsweise ihrer Feldgruppe und keine Darstellungsrolle
   (Plan C07/C08). Fuer eine optionale Ueberschrift innerhalb der
   Gruppenbeschriftung stehen weiter unten .st-form-section-title und
   .st-form-choice-title bereit. */
.st-rich .st-form-field > label, .st-rich .st-form-detail > label, .st-rich .st-form-choice > legend {
	display: block;
	margin: 0 0 7px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	color: #f2eee3
}
.st-rich .st-form-req {
	color: #edba4e
}
.st-rich .st-form-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	color: #fff;
	background: rgba(0, 30, 35, .3);
	border: 1px solid rgba(242, 238, 227, .4);
	border-radius: 10px;
	color-scheme: dark;
	transition: border-color .2s ease, box-shadow .2s ease
}
.st-rich textarea.st-form-input {
	min-height: 96px;
	resize: vertical
}
.st-rich .st-form-input:hover {
	border-color: rgba(242, 238, 227, .7)
}
.st-rich .st-form-input:focus {
	outline: none;
	border-color: #edba4e;
	box-shadow: 0 0 0 3px rgba(237, 186, 78, .4)
}
.st-rich .st-form-input[aria-invalid="true"] {
	border-color: #ffb4a8;
	box-shadow: 0 0 0 1px #ffb4a8
}
.st-rich .st-form-error {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 7px 0 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.45;
	color: #ffd6cf
}
/* --- Ja/Nein als Auswahl-Pillen, Detailfeld darunter --- */
.st-rich .st-form-choice {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0
}
.st-rich .st-form-choice > legend {
	float: none;
	width: auto;
	margin-bottom: 10px;
	font-size: 16.5px
}
/* Optionale Ueberschrift innerhalb der Gruppenbeschriftung. Das legend bleibt
   die native Beschriftung des fieldset; die Ueberschrift steht als Kind
   darin. Groesse, Schnitt und Zeilenhoehe entsprechen dem heutigen
   legend-Text, Rand und Innenabstand sind 0. So bleiben Flex-Layout,
   Nummernsymbol, float, das clear der folgenden Felder und Bootstraps
   legend + * unveraendert. Diese Struktur ist eine bewusste Aenderung
   gegenueber dem heutigen Markup und nur in worker/pruefseite.html erprobt;
   patientenbogen.php behaelt den Text direkt im legend. */
.st-rich .st-form-section > legend > .st-form-section-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(1.15rem, 2.4vw, 1.35rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.3;
	color: inherit
}
.st-rich .st-form-choice > legend > .st-form-choice-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 16.5px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.45;
	color: inherit
}
.st-rich .st-form-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}
.st-rich .st-form-pill {
	position: relative;
	margin: 0
}
.st-rich .st-form-pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0
}
.st-rich .st-form-pill span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	min-height: 44px;
	padding: 8px 22px;
	border: 2px solid rgba(242, 238, 227, .45);
	border-radius: 999px;
	font-weight: 600;
	color: #f2eee3;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease
}
.st-rich .st-form-pill:hover span {
	border-color: #edba4e
}
.st-rich .st-form-pill input:checked + span {
	background: #edba4e;
	border-color: #edba4e;
	color: #00535d
}
.st-rich .st-form-pill input:focus-visible + span {
	outline: 3px solid #edba4e;
	outline-offset: 3px
}
.st-rich .st-form-detail {
	margin-top: 14px
}
.st-rich .st-form-detail > label {
	font-weight: 500;
	color: rgba(242, 238, 227, .9)
}
/* --- Lockfeld fuer Spam-Programme, fuer Menschen unsichtbar --- */
.st-rich .st-form-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden
}
/* --- Einwilligung und Absenden --- */
.st-rich .st-form-submit {
	margin-top: 28px
}
.st-rich .st-form-consent {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 14px;
	align-items: start
}
.st-rich .st-form-consent input {
	width: 22px;
	height: 22px;
	margin: 3px 0 0;
	accent-color: #edba4e;
	cursor: pointer
}
.st-rich .st-form-consent label {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: #f2eee3;
	cursor: pointer
}
.st-rich .st-form-consent + .st-form-error {
	margin-left: 40px
}
.st-rich .st-form-privacy {
	display: block;
	margin: 16px 0 0 40px;
	padding: 0;
	font-size: 14.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.55;
	color: rgba(242, 238, 227, .8)
}
.st-rich .st-form-actions {
	margin-top: 24px
}
.st-rich button.st-form-send {
	font-family: inherit;
	font-size: 16px;
	background: #edba4e;
	border-color: #edba4e;
	color: #00535d;
	cursor: pointer
}
.st-rich button.st-form-send:hover, .st-rich button.st-form-send:focus-visible {
	background: #f2eee3;
	border-color: #f2eee3;
	color: #005f6a
}
.st-rich button.st-form-send:disabled {
	opacity: .7;
	cursor: wait
}
.st-rich .st-form-send i {
	margin-right: 8px
}
@media (prefers-reduced-motion: reduce) {
	.st-rich .st-form-input, .st-rich .st-form-pill span {
		transition: none
	}
}
@media (max-width: 767px) {
	.st-rich .st-form-section {
		padding: 22px 18px 24px
	}
	.st-rich .st-form-field--2, .st-rich .st-form-field--3, .st-rich .st-form-field--4 {
		grid-column: span 6
	}
	.st-rich .st-form-grid {
		gap: 18px
	}
	.st-rich .st-form-privacy, .st-rich .st-form-consent + .st-form-error {
		margin-left: 0
	}
	.st-rich button.st-form-send {
		width: 100%
	}
}

/* ==========================================================================
   Zitatblock mit Animation (.quote.st-quote), Stand 27.10.2026
   Desktop: Anfuehrungszeichen gehen von der Mitte nach links und rechts
   auseinander, leuchten kurz golden auf, danach erscheint das Zitat.
   Mobil: von der Mitte nach oben links und unten rechts.
   Ohne JavaScript oder bei "Bewegung reduzieren": sofort im Endzustand
   (js/st-quote.js setzt st-quote--armed und st-quote--open).
   ========================================================================== */
.quote.st-quote {
	max-width: 900px;
	margin: 90px auto 70px;
	padding: 44px 115px;
	border: 0;
	font-size: 1.5rem;
	text-align: center
}
/* Goldene Linien oben und unten, wachsen von der Mitte aus */
.quote.st-quote::before, .quote.st-quote::after {
	content: '';
	position: absolute;
	left: 115px;
	right: 115px;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(237, 186, 78, .75) 18%, rgba(237, 186, 78, .75) 82%, transparent);
	transition: transform 1s cubic-bezier(.22, 1, .36, 1) .25s
}
.quote.st-quote::before {
	top: 0
}
.quote.st-quote::after {
	bottom: 0
}
.st-quote .left, .st-quote .right {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: auto;
	font-size: 7rem;
	line-height: 1;
	color: #edba4e;
	background: none;
	transition: left 1s cubic-bezier(.22, 1, .36, 1), right 1s cubic-bezier(.22, 1, .36, 1),
		top 1s cubic-bezier(.22, 1, .36, 1), bottom 1s cubic-bezier(.22, 1, .36, 1),
		transform 1s cubic-bezier(.22, 1, .36, 1), opacity .45s ease
}
.st-quote .left {
	left: 10px;
	text-align: left;
	transform: translateY(-50%)
}
.st-quote .right {
	right: 10px;
	text-align: right;
	transform: translateY(-50%)
}
.st-quote blockquote {
	margin: 0 0 14px;
	hyphens: manual;
	transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s ease
}
.st-quote small {
	display: block;
	transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1)
}
/* Ausgangszustand vor dem Hineinscrollen: alles in der Mitte versammelt */
.st-quote--armed .left {
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.4)
}
.st-quote--armed .right {
	right: 50%;
	opacity: 0;
	transform: translate(50%, -50%) scale(.4)
}
.quote.st-quote--armed::before, .quote.st-quote--armed::after {
	transform: scaleX(0)
}
.st-quote--armed blockquote {
	opacity: 0;
	transform: translateY(14px);
	filter: blur(4px)
}
.st-quote--armed small {
	opacity: 0;
	transform: translateY(10px)
}
/* Geoeffnet: Zeichen nach aussen, kurzes goldenes Aufleuchten, Text erscheint */
.st-quote--armed.st-quote--open .left {
	left: 10px;
	opacity: 1;
	transform: translateY(-50%);
	animation: st-quote-glow 1.2s ease .75s
}
.st-quote--armed.st-quote--open .right {
	right: 10px;
	opacity: 1;
	transform: translateY(-50%);
	animation: st-quote-glow 1.2s ease .75s
}
.quote.st-quote--armed.st-quote--open::before, .quote.st-quote--armed.st-quote--open::after {
	transform: scaleX(1)
}
.st-quote--armed.st-quote--open blockquote {
	opacity: 1;
	transform: none;
	filter: none;
	transition-delay: .55s
}
.st-quote--armed.st-quote--open small {
	opacity: 1;
	transform: none;
	transition-delay: .9s
}
@keyframes st-quote-glow {
	0% {
		text-shadow: 0 0 0 rgba(237, 186, 78, 0)
	}
	35% {
		text-shadow: 0 0 18px rgba(237, 186, 78, .95), 0 0 42px rgba(237, 186, 78, .55)
	}
	100% {
		text-shadow: 0 0 0 rgba(237, 186, 78, 0)
	}
}
@media (max-width: 991px) {
	.quote.st-quote {
		padding: 40px 100px
	}
	.quote.st-quote::before, .quote.st-quote::after {
		left: 100px;
		right: 100px
	}
	.st-quote .left, .st-quote .right {
		font-size: 5.5rem
	}
}
/* Mobil: Zeichen wandern von der Mitte nach oben links und unten rechts */
@media (max-width: 767px) {
	.quote.st-quote {
		max-width: none;
		margin: 70px 16px 60px;
		padding: 58px 6px 62px;
		font-size: 1.2rem
	}
	.quote.st-quote::before {
		left: 66px;
		right: 0
	}
	.quote.st-quote::after {
		left: 0;
		right: 66px
	}
	.st-quote .left, .st-quote .right {
		font-size: 4.2rem
	}
	.st-quote .left, .st-quote--armed.st-quote--open .left {
		top: 0;
		left: 0;
		transform: translateY(-42%)
	}
	.st-quote .right, .st-quote--armed.st-quote--open .right {
		top: auto;
		bottom: 0;
		right: 0;
		transform: translateY(42%)
	}
	.st-quote--armed .left {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(.4)
	}
	.st-quote--armed .right {
		top: auto;
		bottom: 50%;
		right: 50%;
		transform: translate(50%, 50%) scale(.4)
	}
	.st-quote small {
		font-size: 1.35rem
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-quote .left, .st-quote .right, .st-quote blockquote, .st-quote small,
	.quote.st-quote::before, .quote.st-quote::after {
		transition: none;
		animation: none
	}
}

/* ==========================================================================
   Startseite (index.html), Stand 27.10.2026: "Bogen & Licht"
   Sandra freigestellt in einem leuchtenden Creme-Bogen (Motiv der Tuer im
   Logo) mit goldenem Versatzrahmen; danach Angebote, Ablauf und Kontakt mit
   den st-rich-Bausteinen. Alles unter .st-home gekapselt.
   ========================================================================== */
.st-home {
	overflow: hidden
}
/* --- Einstieg --- */
.st-home-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: 70px 24px 100px;
	background:
		radial-gradient(ellipse 55% 65% at 27% 55%, rgba(237, 186, 78, .16), transparent 62%),
		linear-gradient(160deg, #006a74 0%, #005f6a 45%, #004a53 100%)
}
.st-home-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 72px;
	align-items: center;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto
}
/* Animation sitzt hier statt am Bogen: so bleibt der Goldrahmen hinter dem Bogen */
.st-home-visual {
	position: relative;
	z-index: 0;
	display: flex;
	justify-content: center;
	animation: st-home-rise 1s cubic-bezier(.22, 1, .36, 1) .1s both
}
/* Warmes Licht hinter dem Bogen, atmet langsam */
.st-home-visual::before {
	content: '';
	position: absolute;
	top: -8%;
	left: 50%;
	z-index: -2;
	width: 78%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(237, 186, 78, .38), rgba(237, 186, 78, 0) 66%);
	filter: blur(8px);
	transform: translateX(-50%);
	animation: st-home-breathe 7s ease-in-out infinite
}
.st-home-arch {
	position: relative;
	width: min(400px, 100%);
	aspect-ratio: 4 / 4.6;
	border-radius: 9999px 9999px 0 0;
	background: radial-gradient(circle at 50% 28%, #fffaf0 0%, #f2eee3 46%, #e2d7bf 100%);
	box-shadow: 0 30px 60px rgba(0, 30, 35, .35)
}
/* Goldener Versatzrahmen in Bogenform */
.st-home-arch::before {
	content: '';
	position: absolute;
	top: 22px;
	right: -22px;
	bottom: -22px;
	left: 22px;
	z-index: -1;
	border: 2px solid #edba4e;
	border-radius: inherit;
	animation: st-home-frame 1.1s cubic-bezier(.22, 1, .36, 1) .55s both
}
/* Punktraster als feiner Akzent */
.st-home-arch::after {
	content: '';
	position: absolute;
	top: 14%;
	left: -46px;
	z-index: -1;
	width: 112px;
	height: 112px;
	background-image: radial-gradient(rgba(242, 238, 227, .45) 1.6px, transparent 1.9px);
	background-size: 14px 14px
}
/* Foto ragt mit dem Kopf leicht ueber den Bogen hinaus */
.st-home-photo {
	position: absolute;
	bottom: 0;
	left: 2%;
	width: 96%;
	height: auto;
	filter: drop-shadow(0 14px 22px rgba(0, 40, 46, .25));
	animation: st-home-rise 1.2s cubic-bezier(.22, 1, .36, 1) .35s both
}
.st-home-intro > * {
	animation: st-home-rise .9s cubic-bezier(.22, 1, .36, 1) both
}
.st-home-intro > :nth-child(1) { animation-delay: .45s }
.st-home-intro > :nth-child(2) { animation-delay: .55s }
.st-home-intro > :nth-child(3) { animation-delay: .65s }
.st-home-intro > :nth-child(5) { animation-delay: .75s }
.st-home-intro > :nth-child(6) { animation-delay: .85s }
.st-home-intro .st-kicker {
	margin-bottom: 14px
}
.st-home-title {
	display: block;
	padding: 0;
	margin: 0 0 12px;
	font-size: clamp(2.6rem, 5.4vw, 4.4rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.01em;
	color: #f2eee3
}
.st-home-title-pre {
	display: block;
	margin-bottom: 8px;
	font-size: .36em;
	font-weight: 500;
	letter-spacing: .02em;
	color: rgba(242, 238, 227, .85)
}
.st-home-role {
	min-height: 1.6em;
	display: block;
	margin: 0 0 30px;
	padding: 0;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	color: #edba4e
}
.st-home-cursor {
	margin-left: 2px;
	animation: st-home-blink 1s steps(1) infinite
}
.st-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 30px
}
.st-home .st-home-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px
}
.st-home .st-home-cta i {
	margin: 0
}
.st-home .st-home-cta:not(.st-home-cta--ghost) {
	background: #edba4e;
	border-color: #edba4e;
	color: #00535d
}
.st-home .st-home-cta:not(.st-home-cta--ghost):hover, .st-home .st-home-cta:not(.st-home-cta--ghost):focus-visible {
	background: #f2eee3;
	border-color: #f2eee3;
	color: #005f6a
}
/* Gruppentherapie-Hinweis als Glaskarte */
.st-home-hint {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	max-width: 520px;
	padding: 16px 20px;
	background: rgba(0, 40, 46, .35);
	border: 1px solid rgba(242, 238, 227, .18);
	border-left: 3px solid #edba4e;
	border-radius: 14px;
	color: #f2eee3;
	text-decoration: none;
	backdrop-filter: blur(6px);
	transition: background-color .25s ease, border-color .25s ease
}
.st-home-hint:hover, .st-home-hint:focus-visible {
	background: rgba(0, 40, 46, .55);
	border-color: rgba(237, 186, 78, .6);
	color: #f2eee3
}
.st-home-hint > i:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #edba4e;
	color: #00535d;
	font-size: 19px
}
.st-home-hint > i:last-child {
	color: #edba4e;
	transition: transform .25s ease
}
.st-home-hint:hover > i:last-child, .st-home-hint:focus-visible > i:last-child {
	transform: translateX(4px)
}
.st-home-hint-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14.5px;
	line-height: 1.45
}
/* Hinweistitel in der Glaskarte. Zeilenhoehe 1.45 kam aus
   .st-home-hint-text, Rand und Blockdarstellung aus der Flex-Umgebung; beide
   stehen ausdruecklich, damit die Rolle auch als H1-H6/P/DIV in einem
   gueltigen Elternkontext gleich aussieht. Im Markup bleibt sie ein span
   innerhalb von span.st-home-hint-text, weil eine Ueberschrift dort kein
   gueltiges Elternelement haette; geprueft in worker/pruefseite.html. */
.st-home-hint-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.45
}
.st-home-hint-link {
	margin-top: 4px;
	font-weight: 600;
	color: #edba4e;
	text-decoration: underline
}
.st-home-scroll {
	position: absolute;
	bottom: 24px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(242, 238, 227, .4);
	border-radius: 50%;
	font-size: 22px;
	color: #f2eee3;
	text-decoration: none;
	transform: translateX(-50%);
	animation: st-home-bob 2.4s ease-in-out infinite
}
.st-home-scroll:hover, .st-home-scroll:focus-visible {
	border-color: #edba4e;
	color: #edba4e
}
/* --- Abschnitte unter dem Einstieg --- */
.st-home-sections {
	max-width: 1060px;
	margin: 0 auto;
	padding: 30px 24px 100px
}
.st-home-section {
	margin-top: 96px
}
.st-home-section:first-child {
	margin-top: 70px
}
/* Abschnittstitel der Startseite: eigene Groesse, aber dieselbe
   Darstellungsrolle wie im Artikel. Die Startseite traegt .st-rich ohne
   .gt-article (Plan C03), deshalb gilt hier nur diese Variante. Die
   Zeilenhoehe 1.2 kam bisher aus Bootstrap. */
.st-home-section .st-section-title {
	display: block;
	margin: 0 0 30px;
	padding: 0;
	font-size: clamp(1.6rem, 3.6vw, 2.2rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #f2eee3
}
/* Angebote: ganze Kachel ist der Link */
/* Senkrechte Flex-Spalte: "Mehr erfahren" sitzt in allen Kacheln unten auf einer Hoehe */
.st-home-offers .st-option {
	display: flex;
	flex-direction: column;
	padding: 30px 26px 26px;
	color: #f2eee3;
	text-decoration: none;
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease
}
.st-home-offers .st-option:hover, .st-home-offers .st-option:focus-visible {
	background: rgba(242, 238, 227, .09);
	border-color: rgba(237, 186, 78, .6);
	color: #f2eee3;
	transform: translateY(-4px)
}
/* Kacheltitel der Startseite. Zeilenhoehe 1.35 und Farbe kommen weiter aus
   .st-rich .st-option-title; Schnitt 500 kam aus body beziehungsweise
   Bootstrap und steht hier ausdruecklich. */
.st-home .st-home-offers .st-option .st-option-title {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 500;
	font-style: normal;
	text-align: center
}
.st-home .st-home-offers .st-option .st-body-text {
	display: block;
	margin: 0 0 18px;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	text-align: center;
	color: rgba(255, 255, 255, .9)
}
.st-home-more {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
	color: #edba4e
}
.st-home-more i {
	transition: transform .25s ease
}
.st-home-offers .st-option:hover .st-home-more i,
.st-home-offers .st-option:focus-visible .st-home-more i {
	transform: translateX(4px)
}
/* Ablauf: drei Schritte an einer goldenen Linie */
.st-home-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: st-home-step
}
.st-home-steps::before {
	content: '';
	position: absolute;
	top: 25px;
	left: 16%;
	right: 16%;
	height: 2px;
	background: linear-gradient(to right, rgba(237, 186, 78, .15), #edba4e, rgba(237, 186, 78, .15))
}
.st-home-steps li {
	position: relative;
	padding-top: 74px;
	text-align: center;
	counter-increment: st-home-step
}
.st-home-steps li::before {
	content: counter(st-home-step);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 2px solid #edba4e;
	border-radius: 50%;
	background: #005f6a;
	font-size: 1.25rem;
	font-weight: 700;
	color: #edba4e;
	transform: translateX(-50%)
}
/* Schritt-Titel der Startseite. Die drei Schritte sind li ohne .st-step,
   deshalb greift hier keine Artikelvariante; Zeilenhoehe 1.2 kam aus
   Bootstrap und steht ausdruecklich. */
.st-home .st-home-steps .st-step-title {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #f2eee3
}
.st-home .st-home-steps .st-body-text {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88)
}
.st-home-steps-more {
	display: block;
	margin: 36px 0 0;
	padding: 0;
	/* Groesse folgt dem Umgebungstext (body ist ab 576 px 14 px). */
	font-size: inherit;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	text-align: center
}
/* Kontakt im dunklen Feld */
.st-home-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center
}
.st-home .st-home-contact .st-section-title {
	margin-bottom: 14px
}
.st-home-contact address {
	margin: 0 0 22px;
	font-size: 16.5px;
	font-style: normal;
	line-height: 1.6;
	color: #f2eee3
}
/* Regionssatz unter beiden Spalten, ueber die volle Kartenbreite */
.st-home-contact-note {
	display: block;
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba(242, 238, 227, .12);
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88)
}
@keyframes st-home-rise {
	from {
		opacity: 0;
		transform: translateY(30px)
	}
	to {
		opacity: 1;
		transform: none
	}
}
@keyframes st-home-frame {
	from {
		opacity: 0;
		transform: translate(-22px, -22px)
	}
	to {
		opacity: 1;
		transform: none
	}
}
@keyframes st-home-breathe {
	0%, 100% {
		opacity: .65;
		transform: translateX(-50%) scale(1)
	}
	50% {
		opacity: 1;
		transform: translateX(-50%) scale(1.06)
	}
}
@keyframes st-home-blink {
	50% {
		opacity: 0
	}
}
@keyframes st-home-bob {
	0%, 100% {
		transform: translate(-50%, 0)
	}
	50% {
		transform: translate(-50%, 6px)
	}
}
/* Platz fuer das feste Symbolmenue rechts */
@media (min-width: 992px) {
	.st-home-hero-inner {
		padding-right: 70px
	}
}
@media (min-width: 992px) and (max-width: 1250px) {
	.st-home-sections {
		padding-right: 96px
	}
}
/* Tablet und Handy: Bogen oben, Text zentriert darunter */
@media (max-width: 991px) {
	.st-home-hero {
		min-height: 0;
		padding: 90px 20px 90px
	}
	.st-home-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
		text-align: center
	}
	.st-home-arch {
		width: min(320px, 76vw)
	}
	.st-home-intro .st-kicker, .st-home-actions {
		justify-content: center
	}
	/* Zentriert: Goldlinie auf beiden Seiten wie bei den Seitentiteln */
	.st-home-intro .st-kicker::after {
		content: '';
		flex: 0 0 28px;
		height: 2px;
		background: #edba4e
	}
	.st-home-hint {
		margin: 0 auto;
		text-align: left
	}
	.st-home-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px
	}
	.st-home-steps::before {
		top: 26px;
		bottom: 26px;
		left: 25px;
		right: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(to bottom, #edba4e, rgba(237, 186, 78, .15))
	}
	.st-home-steps li {
		padding: 10px 0 0 72px;
		text-align: left
	}
	.st-home-steps li::before {
		left: 0;
		transform: none
	}
	.st-home-contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px
	}
}
@media (max-width: 767px) {
	.st-home-section {
		margin-top: 72px
	}
	.st-home-actions {
		flex-direction: column;
		align-items: stretch
	}
	.st-home .st-home-cta {
		justify-content: center
	}
	.st-home-hint {
		grid-template-columns: 40px minmax(0, 1fr)
	}
	.st-home-hint > i:first-child {
		width: 40px;
		height: 40px;
		font-size: 17px
	}
	.st-home-hint > i:last-child {
		display: none
	}
	.st-home-scroll {
		display: none
	}
}
/* Handy: Rubrik bricht um, daher ohne Linien und in zwei gleich langen Zeilen;
   der Innenabstand links gleicht den Buchstabenabstand nach dem letzten Zeichen aus */
@media (max-width: 575px) {
	.st-home-intro .st-kicker {
		display: block;
		padding-left: .14em;
		text-wrap: balance
	}
	.st-home-intro .st-kicker::before, .st-home-intro .st-kicker::after {
		content: none
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-home-visual, .st-home-visual::before, .st-home-arch::before, .st-home-photo,
	.st-home-intro > *, .st-home-cursor, .st-home-scroll {
		animation: none
	}
	.st-home-offers .st-option, .st-home-hint, .st-home-hint > i:last-child, .st-home-more i {
		transition: none
	}
}

/* ==========================================================================
   Navigation (st-nav), Stand 27.10.2026
   Obere Leiste: Logo + Name, Links, "Angebote" als Aufklappmenue, goldener
   Kontakt-Button; beim Scrollen glaesern. Unter 1180 px Menue-Knopf mit
   Vollbildmenue. Steuerung: js/st-nav.js. Seiten mit dieser Navigation
   tragen die Body-Klasse has-st-nav.
   ========================================================================== */
html.st-nav-lock, html.st-nav-lock body {
	overflow: hidden
}
.st-nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	transition: background-color .3s ease, box-shadow .3s ease
}
.st-nav-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 18px 32px;
	transition: padding .3s ease
}
.st-nav--scrolled {
	background: rgba(0, 74, 83, .84);
	border-bottom: 1px solid rgba(237, 186, 78, .25);
	box-shadow: 0 10px 30px rgba(0, 30, 35, .25);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px)
}
.st-nav--scrolled .st-nav-bar {
	padding-top: 10px;
	padding-bottom: 10px
}
.st-nav-brand {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	color: #f2eee3;
	text-decoration: none
}
.st-nav-brand:hover, .st-nav-brand:focus-visible {
	color: #f2eee3
}
.st-nav-name {
	display: flex;
	flex-direction: column;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15
}
.st-nav-name small {
	margin-top: 4px;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #edba4e
}
.st-nav-menu {
	display: flex;
	align-items: center;
	margin-left: auto
}
.st-nav-list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none
}
.st-nav-list > li {
	position: relative;
	margin: 0
}
.st-nav-list > li > a, .st-nav-sub-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	color: #f2eee3;
	text-decoration: none;
	cursor: pointer
}
/* Goldener Strich unter aktivem und ueberfahrenem Punkt */
.st-nav-list > li > a::after, .st-nav-sub-toggle::after {
	content: '';
	position: absolute;
	right: 13px;
	bottom: 3px;
	left: 13px;
	height: 2px;
	border-radius: 2px;
	background: #edba4e;
	transform: scaleX(0);
	transition: transform .3s ease
}
.st-nav-list > li > a:hover, .st-nav-list > li > a:focus-visible, .st-nav-sub-toggle:hover, .st-nav-sub-toggle:focus-visible,
.st-nav-list > li > a[aria-current="page"], .st-nav-sub-toggle.st-nav-current {
	color: #edba4e
}
.st-nav-list > li > a:hover::after, .st-nav-list > li > a:focus-visible::after, .st-nav-sub-toggle:hover::after,
.st-nav-list > li > a[aria-current="page"]::after, .st-nav-sub-toggle.st-nav-current::after {
	transform: scaleX(1)
}
.st-nav-sub-toggle i {
	transition: transform .25s ease
}
.st-nav-has-sub:hover .st-nav-sub-toggle i, .st-nav-sub--open .st-nav-sub-toggle i {
	transform: rotate(180deg)
}
.st-nav-group-label, .st-nav-home, .st-nav-phone, .st-nav-toggle {
	display: none
}
/* Aufklappmenue "Angebote" als Glaskarte */
.st-nav-sub {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	min-width: 290px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: rgba(0, 74, 83, .96);
	border: 1px solid rgba(242, 238, 227, .14);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 30, 35, .35);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s
}
.st-nav-sub::before {
	content: '';
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	height: 10px
}
.st-nav-has-sub:hover .st-nav-sub, .st-nav-sub--open .st-nav-sub {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0)
}
.st-nav-sub li {
	margin: 0
}
.st-nav-sub a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 15px;
	white-space: nowrap;
	color: #f2eee3;
	text-decoration: none
}
.st-nav-sub a i {
	display: flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(237, 186, 78, .14);
	font-size: 15px;
	color: #edba4e
}
.st-nav-sub a:hover, .st-nav-sub a:focus-visible, .st-nav-sub a[aria-current="page"] {
	background: rgba(242, 238, 227, .08);
	color: #edba4e
}
/* Spezifischer als die allgemeine Regel .st-nav-list > li (Abstand, Trennlinie) */
.st-nav-list > li.st-nav-cta-item {
	margin-left: 12px
}
/* Spezifischer als die allgemeine Linkregel der Liste */
.st-nav-list > li > a.st-nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	background: #edba4e;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: #00535d;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, transform .25s ease
}
.st-nav-list > li > a.st-nav-cta::after {
	display: none
}
.st-nav-list > li > a.st-nav-cta:hover, .st-nav-list > li > a.st-nav-cta:focus-visible {
	background: #f2eee3;
	color: #005f6a;
	transform: translateY(-1px)
}
.st-nav-list > li > a.st-nav-cta[aria-current="page"] {
	box-shadow: 0 0 0 2px #f2eee3
}
.st-nav a:focus-visible, .st-nav button:focus-visible {
	outline: 3px solid #edba4e;
	outline-offset: 2px
}
/* --- Unter 1180 px: Menue-Knopf und Vollbildmenue --- */
@media (max-width: 1179px) {
	.st-nav-bar {
		padding: 14px 20px
	}
	.st-nav--scrolled .st-nav-bar {
		padding-top: 10px;
		padding-bottom: 10px
	}
	.st-nav-brand, .st-nav-toggle {
		position: relative;
		z-index: 3
	}
	/* Abdeckung oben, damit Menuepunkte beim Scrollen nicht unter Logo und Knopf durchscheinen */
	.st-nav--open::before {
		content: '';
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2;
		height: 86px;
		background: linear-gradient(to bottom, #006a74 72%, rgba(0, 106, 116, 0));
		pointer-events: none
	}
	.st-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin-left: auto;
		background: rgba(0, 40, 46, .35);
		border: 1px solid rgba(242, 238, 227, .35);
		border-radius: 50%;
		color: #f2eee3;
		cursor: pointer
	}
	.st-nav-burger {
		position: relative;
		width: 20px;
		height: 14px
	}
	.st-nav-burger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: top .3s ease, transform .3s ease, opacity .2s ease
	}
	.st-nav-burger span:nth-child(1) {
		top: 0
	}
	.st-nav-burger span:nth-child(2) {
		top: 6px
	}
	.st-nav-burger span:nth-child(3) {
		top: 12px
	}
	.st-nav--open .st-nav-burger span:nth-child(1) {
		top: 6px;
		transform: rotate(45deg)
	}
	.st-nav--open .st-nav-burger span:nth-child(2) {
		opacity: 0
	}
	.st-nav--open .st-nav-burger span:nth-child(3) {
		top: 6px;
		transform: rotate(-45deg)
	}
	.st-nav-menu {
		position: fixed;
		inset: 0;
		z-index: 1;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		margin: 0;
		padding: 100px 28px 36px;
		overflow-y: auto;
		background:
			radial-gradient(ellipse 80% 45% at 50% 0%, rgba(237, 186, 78, .14), transparent 70%),
			linear-gradient(160deg, #006a74 0%, #004a53 100%);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility .35s
	}
	.st-nav--open .st-nav-menu {
		opacity: 1;
		visibility: visible
	}
	.st-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		max-width: 520px;
		margin: 0 auto
	}
	.st-nav-list > li {
		border-bottom: 1px solid rgba(242, 238, 227, .1);
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .4s ease, transform .4s ease;
		transition-delay: calc(var(--i, 0) * 45ms)
	}
	.st-nav--open .st-nav-list > li {
		opacity: 1;
		transform: none
	}
	.st-nav-home {
		display: block
	}
	.st-nav-list > li > a {
		display: flex;
		padding: 15px 4px;
		font-size: 1.3rem;
		font-weight: 600;
		white-space: normal
	}
	.st-nav-list > li > a::after {
		display: none
	}
	.st-nav-sub-toggle {
		display: none
	}
	.st-nav-group-label {
		display: block;
		padding: 18px 4px 6px;
		font-size: .78rem;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: #edba4e
	}
	.st-nav-sub {
		position: static;
		min-width: 0;
		padding: 0 0 12px;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none
	}
	/* Nach dem Antippen bleibt :hover aktiv; die Verschiebung der Desktop-Karte aufheben */
	.st-nav-has-sub:hover .st-nav-sub, .st-nav-sub--open .st-nav-sub {
		transform: none
	}
	.st-nav-sub a {
		padding: 9px 4px;
		font-size: 1.1rem;
		white-space: normal
	}
	/* Button ohne Trennlinien: weder eigene noch die des Punktes darueber */
	.st-nav-list > li.st-nav-cta-item {
		margin: 26px 0 0;
		border-bottom: 0
	}
	.st-nav-list > li:has(+ .st-nav-cta-item) {
		border-bottom: 0
	}
	.st-nav-list > li > a.st-nav-cta {
		display: flex;
		justify-content: center;
		padding: 15px 22px;
		font-size: 1.05rem
	}
	.st-nav-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 20px;
		font-size: 1.05rem;
		font-weight: 600;
		color: #f2eee3;
		text-decoration: none
	}
	.st-nav-phone i {
		color: #edba4e
	}
}
@media (max-width: 400px) {
	.st-nav-name {
		font-size: 15px
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-nav, .st-nav * {
		transition: none !important
	}
}
/* --- Seiten mit neuer Navigation: Platz oben statt rechts --- */
.has-st-nav .title-section {
	padding-top: 130px
}
.has-st-nav .st-home-hero {
	padding-top: 120px
}
@media (min-width: 992px) {
	.has-st-nav .st-home-hero-inner {
		padding-right: 0
	}
}
@media (min-width: 992px) and (max-width: 1250px) {
	.has-st-nav .st-home-sections {
		padding-right: 24px
	}
}
@media (max-width: 991px) {
	.has-st-nav .st-home-hero {
		padding-top: 110px
	}
}
/* Sprungziele nicht unter der festen Navigationsleiste verstecken */
.has-st-nav [id] {
	scroll-margin-top: 100px
}
/* Handy: alte dunkle, feste Titelleiste des Templates abschalten; die Navigation
   steht jetzt oben, der Titel gehoert wieder in den Seitenfluss */
@media (max-width: 576px) {
	.has-st-nav .title-section {
		position: relative;
		top: auto;
		z-index: auto;
		margin-bottom: 0;
		padding: 104px 20px 28px;
		background: none;
		border-bottom: 0
	}
}

/* ==========================================================================
   Schrift Poppins, selbst gehostet (fonts/poppins, Lizenz SIL OFL 1.1, siehe
   fonts/poppins/OFL.txt). Keine Verbindung zu Google, fuer alle Besucher gleich.
   ========================================================================== */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/poppins/poppins-latin-400-normal.woff2) format('woff2')
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/poppins/poppins-latin-500-normal.woff2) format('woff2')
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/poppins/poppins-latin-600-normal.woff2) format('woff2')
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url(../fonts/poppins/poppins-latin-700-normal.woff2) format('woff2')
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/poppins/poppins-latin-400-italic.woff2) format('woff2')
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 500 900;
	font-display: swap;
	src: url(../fonts/poppins/poppins-latin-500-italic.woff2) format('woff2')
}
/* ==========================================================================
   Seitentitel (Stand 27.10.2026)
   Rubrik, grosser Titel in Poppins und Raute als Abschluss; ruhig, ohne
   Hintergrundbogen. Ersetzt Grossbuchstaben-Titel und Hintergrundwort.
   ========================================================================== */
.has-st-nav .title-section {
	position: relative;
	overflow: hidden;
	padding: 150px 20px 60px;
	text-align: center;
	background: none
}
.has-st-nav .title-bg {
	display: none
}
.st-title-kicker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	font-size: .76rem;
	font-weight: 700;
	font-style: normal;
	/* Zeilenhoehe 1.6 kam bisher von body; Bootstrap wuerde bei h1-h6 auf 1.2
	   wechseln, deshalb hier ausdruecklich. */
	line-height: 1.6;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #edba4e;
	animation: st-title-rise .9s cubic-bezier(.22, 1, .36, 1) .15s both
}
.st-title-kicker::before, .st-title-kicker::after {
	content: '';
	width: 28px;
	height: 2px;
	background: #edba4e
}
/* Seitentitel als Darstellungsklasse .st-page-title. word-break bleibt
   bewusst bei .st-article .title-section (Zeile 2195): Gruppentherapie und
   Impressum tragen diese Body-Klasse nicht und haben heute kein word-break.
   Die Tagselektoren h1/h2 entfallen; die uebrigen Seiten erhalten die Klasse
   in Phase 2. */
.has-st-nav .title-section .st-page-title {
	display: block;
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(1.75rem, 6.2vw, 3.8rem);
	font-weight: 700;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-transform: none;
	color: #f2eee3;
	overflow-wrap: break-word;
	hyphens: auto;
	animation: st-title-rise .9s cubic-bezier(.22, 1, .36, 1) .25s both
}
.has-st-nav .title-section .st-page-title span {
	color: #f2eee3
}
/* Raute mit Goldlinie als Abschluss */
.st-title-ornament {
	position: relative;
	z-index: 1;
	display: block;
	width: 150px;
	height: 12px;
	margin: 24px auto 0;
	animation: st-title-rise .9s cubic-bezier(.22, 1, .36, 1) .4s both
}
.st-title-ornament::before {
	content: '';
	position: absolute;
	top: 5px;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(to right, transparent, #edba4e 30%, #edba4e 70%, transparent)
}
.st-title-ornament::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: #edba4e;
	box-shadow: 0 0 0 5px #005f6a;
	transform: rotate(45deg)
}
@keyframes st-title-rise {
	from {
		opacity: 0;
		transform: translateY(18px)
	}
	to {
		opacity: 1;
		transform: none
	}
}
@media (max-width: 576px) {
	.has-st-nav .title-section {
		padding: 112px 16px 40px
	}
	.st-title-kicker {
		margin-bottom: 12px;
		font-size: .7rem;
		letter-spacing: .16em
	}
	.st-title-kicker::before, .st-title-kicker::after {
		width: 18px
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-title-kicker, .has-st-nav .title-section .st-page-title,
	.st-title-ornament {
		animation: none
	}
}
/* "Futurist Fixed-width" wurde nie geladen (Ersatz-Serifenschrift): ueberall Poppins */
.title-section, .gt-lead, .poppins-font, .ichBinSandra {
	font-family: 'Poppins', sans-serif
}

/* ==========================================================================
   Datenschutz-Einstellungen (st-consent, st-map-consent), Vorschau-Entwurf
   28.10.2026. Die gemeinsame Fusszeile (st-foot) steht im letzten Block.
   Bewusst nicht unter .st-rich gekapselt: Banner und Dialog muessen
   auch ausserhalb des Artikels (Impressum, Patientenbogen) funktionieren.
   Steuerung: js/st-consent.js. Siehe
   docs/cookie-banner-favicon-plan-2026-10-28.md, Abschnitt 3.
   ========================================================================== */

/* Platz am Dokumentende, solange der nicht modale Banner sichtbar ist. Die
   Hoehe setzt das Skript als --st-consent-space; ohne Banner bleibt sie 0. */
body {
	padding-bottom: var(--st-consent-space, 0px)
}
html {
	scroll-padding-bottom: calc(var(--st-consent-space, 0px) + 16px)
}

/* --- Nicht modaler Banner, eigene oberste Ebene ueber der Navigation --- */
.st-consent {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1200;
	display: flex;
	justify-content: center;
	padding: 12px 16px;
	pointer-events: none
}
.st-consent[hidden] {
	display: none
}
.st-consent-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 680px;
	/* Mindestens 80 px Abstand zur Oberkante; nicht mehr als 65 % Viewport-Hoehe
	   (sichert freien Platz fuer Hilfe-Links bei mittleren Fensterhoehen);
	   absolutes Maximum 480 px fuer grosse Bildschirme. */
	max-height: min(calc(100vh - 80px), 65vh, 480px);
	overflow-y: auto;
	padding: 20px 24px;
	background: linear-gradient(135deg, #00535d 0%, #004952 100%);
	border: 2px solid rgba(237, 186, 78, .55);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(0, 30, 35, .45);
	pointer-events: auto
}
/* Banner und Dialog: alle Textrollen setzen Darstellungsmodus, Rand,
   Innenabstand, Groesse, Schnitt und Zeilenhoehe selbst. Die Zeilenhoehe kam
   bisher aus body (1.6) beziehungsweise aus .st-consent-dialog p (1.55);
   Bootstrap wuerde bei h1-h6 auf 1.2 wechseln. */
.st-consent-title {
	flex-shrink: 0;
	display: block;
	margin: 0 0 10px;
	padding: 0;
	color: #f2eee3;
	font-size: clamp(1.1rem, 2.4vw, 1.3rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.25
}
.st-consent-text {
	min-height: 0;
	overflow-y: auto;
	display: block;
	margin: 0 0 16px;
	padding: 0;
	color: #f2eee3;
	font-size: 15.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.55;
	hyphens: auto
}
.st-consent-legal {
	flex-shrink: 0;
	display: block;
	margin: 14px 0 0;
	padding: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6
}
.st-consent-legal a {
	color: #edba4e;
	text-decoration: underline
}
.st-consent-legal a:hover, .st-consent-legal a:focus-visible {
	color: #f2eee3
}
.st-consent-status {
	flex-shrink: 0;
	display: block;
	margin: 10px 0 0;
	padding: 0;
	color: #f2eee3;
	font-size: 15px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6
}
.st-consent-status:empty {
	margin: 0
}

/* --- Aktionen: "Alle ablehnen" und "Alle akzeptieren" sind in Groesse,
       Schrift, Rahmen und Kontrast identisch (eine Klasse, keine Hervorhebung
       einer der beiden Entscheidungen). --- */
.st-consent-actions {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}
.st-consent-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	padding: 11px 22px;
	background: transparent;
	border: 2px solid #f2eee3;
	border-radius: 35px;
	color: #f2eee3;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease
}
.st-consent-btn:hover, .st-consent-btn:focus-visible {
	background-color: #f2eee3;
	color: #005f6a
}
.st-consent-btn--more {
	flex-basis: 100%
}

/* --- Einstellungen als natives dialog (Top Layer, Escape und Fokus) --- */
.st-consent-dialog {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	background: linear-gradient(135deg, #00535d 0%, #004952 100%);
	border: 2px solid rgba(237, 186, 78, .55);
	border-radius: 18px;
	color: #f2eee3
}
.st-consent-dialog::backdrop {
	background: rgba(0, 30, 35, .68)
}
.st-consent-dialog-inner {
	max-height: calc(100vh - 36px);
	overflow-y: auto;
	padding: 24px 26px
}
/* Die beiden Dialogueberschriften erzeugt js/st-consent.js (Zeile 643 und
   651); ihre IDs und die aria-labelledby-Verknuepfung bleiben unveraendert.
   Zeilenhoehe 1.2 kam aus Bootstrap. */
.st-consent-dialog .st-consent-dialog-title {
	display: block;
	margin: 0 0 16px;
	padding: 0;
	color: #f2eee3;
	font-size: clamp(1.15rem, 2.6vw, 1.4rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.2
}
.st-consent-dialog .st-consent-section-title {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: #f2eee3;
	font-size: 1.05rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2
}
/* Ersetzt .st-consent-dialog p: die Textrollen im Dialog. Ohne diese Regel
   wuerden Ueberschriften die Dialogfarbe #f2eee3 erben statt #fff. */
.st-consent-dialog .st-consent-item-text,
.st-consent-dialog .st-consent-note,
.st-consent-dialog .st-consent-more,
.st-consent-dialog .st-consent-legal,
.st-consent-dialog .st-consent-status {
	color: #fff;
	font-size: 15px;
	line-height: 1.55
}
.st-consent-item {
	margin-bottom: 18px;
	padding: 16px 18px;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .14);
	border-radius: 14px
}
/* Beschreibungstext, Hinweis und Weiterlesen-Zeile in einer Dienstekarte. */
.st-consent-item .st-consent-item-text,
.st-consent-item .st-consent-note,
.st-consent-item .st-consent-more {
	margin: 0 0 8px
}
.st-consent-item .st-consent-item-text:last-child,
.st-consent-item .st-consent-note:last-child,
.st-consent-item .st-consent-more:last-child {
	margin-bottom: 0
}
.st-consent-item-text {
	display: block;
	padding: 0;
	font-weight: 500;
	font-style: normal
}
.st-consent-item--needed {
	background: rgba(237, 186, 78, .09);
	border-color: rgba(237, 186, 78, .45)
}
.st-consent-note {
	display: block;
	padding: 0;
	font-weight: 500;
	font-style: normal;
	margin: 8px 0 0;
	color: #f2eee3;
	font-size: 14.5px;
	line-height: 1.5
}
.st-consent-switch {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0 0 12px;
	cursor: pointer
}
.st-consent-switch input {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	accent-color: #edba4e;
	cursor: pointer
}
.st-consent-switch-label {
	color: #f2eee3;
	font-size: 1.05rem;
	font-weight: 600
}
.st-consent-details {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5
}
.st-consent-details dt {
	margin-top: 8px;
	color: #edba4e;
	font-weight: 600
}
.st-consent-details dd {
	margin: 2px 0 0;
	color: #fff
}
.st-consent-more {
	display: block;
	margin: 12px 0 0;
	padding: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6
}
.st-consent-more a, .st-map-consent a {
	color: #edba4e;
	text-decoration: underline
}
.st-consent-more a:hover, .st-consent-more a:focus-visible,
.st-map-consent a:hover, .st-map-consent a:focus-visible {
	color: #f2eee3
}
.st-consent-actions--dialog {
	margin-top: 18px
}
.st-consent-close {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 10px;
	padding: 11px 22px;
	background: transparent;
	border: 1px solid rgba(242, 238, 227, .6);
	border-radius: 35px;
	color: #f2eee3;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease
}
.st-consent-close:hover, .st-consent-close:focus-visible {
	background-color: #f2eee3;
	color: #005f6a
}

/* --- Kartenplatzhalter statt Google-iframe --- */
.st-rich .st-map-consent {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-height: clamp(260px, 30vw, 360px);
	padding: 24px 26px;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .16);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 30, 35, .35)
}
.st-rich .st-map-consent[hidden] {
	display: none
}
.st-rich .st-map-consent-text {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.55
}
.st-rich .st-map-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-style: normal
}
.st-rich .st-map-consent-actions .gt-cta {
	min-height: 44px;
	background: transparent;
	font-family: inherit;
	font-size: 15.5px;
	cursor: pointer
}
.st-rich .st-map-consent-note {
	display: block;
	margin: 0;
	padding: 0;
	color: #f2eee3;
	font-size: 14.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5
}
.st-rich .st-map-revoke-wrap {
	position: relative;
	z-index: 1;
	margin: 14px 0 0
}
.st-rich .st-map-revoke {
	min-height: 44px;
	padding: 11px 22px;
	background: transparent;
	border: 2px solid #f2eee3;
	border-radius: 35px;
	color: #f2eee3;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease
}
.st-rich .st-map-revoke[hidden] {
	display: none
}
.st-rich .st-map-revoke:hover, .st-rich .st-map-revoke:focus-visible {
	background-color: #f2eee3;
	color: #005f6a
}

/* --- Mobil: Banner und Dialog mit Randabstand, Aktionen untereinander --- */
@media (max-width: 575px) {
	.st-consent {
		padding: 12px
	}
	.st-consent-inner {
		padding: 18px 16px
	}
	.st-consent-actions .st-consent-btn {
		flex-basis: 100%
	}
	.st-consent-dialog-inner {
		padding: 18px 16px
	}
	.st-rich .st-map-consent {
		padding: 20px 16px
	}
	.st-rich .st-map-consent-actions .gt-cta {
		width: 100%
	}
}
/* --- Geringe Fensterhoehe: Banner bleibt vollstaendig bedienbar --- */
@media (max-height: 520px) {
	.st-consent-inner {
		/* Ueberschreibt die allgemeine max-height; muss ebenfalls 80px Reserve einhalten. */
		max-height: min(calc(100vh - 80px), 55vh, 380px);
		padding: 14px 16px
	}
	.st-consent-text {
		margin-bottom: 12px
	}
}
/* --- Sehr niedrige Fensterhoehe (z. B. 320x320 Querformat): Banneroberkante
   konstant bei ~167 px halten, damit #akuthilfe-Links (90 px) oberhalb sichtbar
   bleiben (navBottom 69 px + Linkhoehe 90 px + Abstand). Ueberschreibt 520px-Regel. --- */
@media (max-height: 468px) {
	.st-consent-inner {
		max-height: max(calc(100vh - 211px), 60px);
		padding: 10px 14px
	}
}
/* --- Persistenter Speicherfehler-Hinweis (fixiert am unteren Bildschirmrand) ---
   Erscheint statt des Banners wenn Speichern misslungen; beide nie gleichzeitig.
   z-index unter dem Banner (1200), da sie sich nicht ueberlagern sollen. */
.st-storage-notice {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1190;
	margin: 0;
	padding: 10px 20px;
	background: rgba(0, 36, 42, .97);
	border-top: 2px solid rgba(237, 186, 78, .65);
	color: #f2eee3;
	font-size: 15px;
	line-height: 1.5;
	text-align: center
}
.st-storage-notice[hidden] {
	display: none
}

@media (prefers-reduced-motion: reduce) {
	.st-consent-btn, .st-consent-close, .st-foot-btn, .st-rich .st-map-revoke {
		transition: none
	}
}

/* ==========================================================================
   Gemeinsame Fusszeile (st-foot), freigegeben 28.10.2026: vier Spalten auf
   Dunkel-Petrol mit Goldlinie und Raute an der Oberkante, Krisenhinweis in
   der Kontaktspalte, darunter Rechtliches und Einstellungen-Knopf
   (js/st-consent.js). Aktive Seite per aria-current="page".
   Global, also nicht unter .st-rich gekapselt.
   ========================================================================== */
.st-foot {
	position: relative;
	margin-top: 56px;
	padding: 68px 0 28px;
	background: linear-gradient(180deg, #00535d, #004952);
	border-top: 1px solid rgba(237, 186, 78, .25)
}
/* Goldlinie mit Raute auf der Kante, wie der Abschluss des Seitentitels */
.st-foot::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 50%;
	width: 180px;
	height: 2px;
	margin-left: -90px;
	background: linear-gradient(to right, transparent, #edba4e 30%, #edba4e 70%, transparent)
}
.st-foot::after {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	background: #edba4e;
	transform: rotate(45deg)
}
.st-foot-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px
}
.st-foot-grid {
	display: grid;
	grid-template-columns: 1.15fr 1.35fr 1fr 1fr;
	gap: 40px 48px
}
/* --- Schriftzug wie in der Navigation, Adresse, Kontakt-Button --- */
.st-foot-name {
	display: inline-flex;
	flex-direction: column;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;
	color: #f2eee3;
	text-decoration: none
}
.st-foot-name small {
	margin-top: 6px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #edba4e
}
.st-foot-name:hover, .st-foot-name:focus-visible {
	color: #ffffff
}
.st-foot-address {
	margin: 20px 0 0;
	font-size: 15.5px;
	font-style: normal;
	line-height: 1.65;
	color: rgba(242, 238, 227, .85)
}
.st-foot-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 24px;
	padding: 11px 22px;
	border-radius: 999px;
	background: #edba4e;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #00535d;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, transform .25s ease
}
.st-foot-cta:hover, .st-foot-cta:focus-visible {
	background: #f2eee3;
	color: #005f6a;
	transform: translateY(-1px)
}
.st-foot-cta[aria-current="page"] {
	box-shadow: 0 0 0 2px #f2eee3
}
/* --- Spaltentitel im Stil der goldenen Rubrik --- */
.st-foot-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 20px;
	padding: 0;
	font-style: normal;
	font-family: inherit;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #edba4e
}
.st-foot-title::before {
	content: '';
	flex: 0 0 20px;
	height: 2px;
	background: #edba4e
}
.st-foot-links, .st-foot-contact {
	margin: 0;
	padding: 0;
	list-style: none
}
.st-foot-links li {
	margin: 0 0 11px
}
/* Links: goldene Unterstreichung waechst beim Hovern von links */
.st-foot-links a, .st-foot-contact a, .st-foot-nav a {
	padding-bottom: 2px;
	background: linear-gradient(#edba4e, #edba4e) no-repeat 0 100% / 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: #f2eee3;
	text-decoration: none;
	transition: background-size .3s ease, color .25s ease
}
.st-foot-links a:hover, .st-foot-links a:focus-visible,
.st-foot-contact a:hover, .st-foot-contact a:focus-visible,
.st-foot-nav a:hover, .st-foot-nav a:focus-visible {
	background-size: 100% 1px;
	color: #ffffff
}
.st-foot-links a {
	font-size: 15.5px;
	hyphens: auto
}
.st-foot-links a[aria-current="page"], .st-foot-nav a[aria-current="page"] {
	color: #edba4e
}
/* --- Kontaktangaben mit Symbolkreis --- */
.st-foot-contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.5;
	color: #f2eee3
}
.st-foot-contact .fa {
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: -4px;
	border: 1px solid rgba(237, 186, 78, .45);
	border-radius: 50%;
	background: rgba(237, 186, 78, .1);
	font-size: 14px;
	color: #edba4e
}
.st-foot-contact a[href^="tel:"] {
	white-space: nowrap;
	hyphens: manual
}
.st-foot-contact a[href^="mailto:"] {
	overflow-wrap: anywhere
}
.st-foot-label {
	display: block;
	font-size: 13.5px;
	color: rgba(242, 238, 227, .75)
}
/* --- Krisenhinweis: goldgerahmte Link-Karte zur Akuten Hilfe --- */
.st-foot-help {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 14px;
	max-width: 340px;
	margin-top: 22px;
	padding: 12px 16px;
	border: 1px solid rgba(237, 186, 78, .45);
	border-radius: 12px;
	background: rgba(237, 186, 78, .09);
	color: #f2eee3;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease
}
.st-foot-help .fa {
	grid-row: 1 / span 2;
	color: #edba4e;
	transition: color .25s ease, transform .25s ease
}
.st-foot-help .fa-life-ring {
	grid-column: 1;
	font-size: 22px
}
.st-foot-help .fa-long-arrow-right {
	grid-column: 3;
	font-size: 16px
}
.st-foot-help-kicker {
	display: block;
	grid-column: 2;
	margin: 0;
	padding: 0;
	font-size: .7rem;
	font-weight: 700;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #edba4e;
	transition: color .25s ease
}
.st-foot-help-title {
	display: block;
	grid-column: 2;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	color: inherit
}
.st-foot-help:hover, .st-foot-help:focus-visible {
	border-color: #f2eee3;
	background-color: #f2eee3;
	color: #005f6a
}
.st-foot-help:hover .fa, .st-foot-help:focus-visible .fa,
.st-foot-help:hover .st-foot-help-kicker, .st-foot-help:focus-visible .st-foot-help-kicker {
	color: #005f6a
}
.st-foot-help:hover .fa-long-arrow-right, .st-foot-help:focus-visible .fa-long-arrow-right {
	transform: translateX(4px)
}
/* --- Untere Leiste: Rechtliches und Einstellungen --- */
.st-foot-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 52px;
	padding-top: 22px;
	border-top: 1px solid rgba(242, 238, 227, .12)
}
/* Zeilenhoehe 1.6 kam bisher aus body; Bootstrap wuerde bei h1-h6 auf 1.2
   wechseln und die Zeile dadurch verschieben. */
.st-foot-copy {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	color: rgba(242, 238, 227, .78)
}
.st-foot-nav {
	margin-left: auto
}
.st-foot-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0
}
.st-foot-nav li {
	margin: 0
}
.st-foot-nav a {
	font-size: 14.5px
}
.st-foot-consent {
	margin: 0
}
.st-foot-btn {
	min-height: 44px;
	padding: 9px 20px;
	background: transparent;
	border: 1px solid rgba(242, 238, 227, .5);
	border-radius: 35px;
	color: #f2eee3;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease
}
.st-foot-btn[hidden] {
	display: none
}
.st-foot-btn:hover, .st-foot-btn:focus-visible {
	border-color: #f2eee3;
	background-color: #f2eee3;
	color: #005f6a
}
.st-foot-btn:focus-visible {
	outline: 3px solid #edba4e;
	outline-offset: 2px
}
/* --- Umbrueche: Abstand wie Navigation, 2x2 ab Tablet, mobil gestapelt --- */
@media (max-width: 1179px) {
	.st-foot-inner {
		padding: 0 20px
	}
}
@media (max-width: 991px) {
	.st-foot-grid {
		grid-template-columns: 1fr 1fr;
		gap: 44px 32px
	}
}
@media (max-width: 575px) {
	.st-foot {
		padding-top: 52px
	}
	/* Angebote-Spalte breiter, damit "Einzelpsychotherapie" ungetrennt passt */
	.st-foot-grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 36px 16px
	}
	.st-foot-brand, .st-foot-col--contact {
		grid-column: 1 / -1
	}
	.st-foot-bottom {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 40px
	}
	.st-foot-nav {
		margin-left: 0
	}
}
@media (max-width: 359px) {
	.st-foot-grid {
		grid-template-columns: 1fr
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-foot-cta, .st-foot-help, .st-foot-help .fa, .st-foot-help-kicker,
	.st-foot-links a, .st-foot-contact a, .st-foot-nav a {
		transition: none
	}
}

/* ==========================================================================
   Eigene Scrollleiste (st-sb, js/st-scrollbar.js), nur Desktop mit Maus:
   goldener Griff ohne Spur, schwebt ueber dem Inhalt. Ganz oben unsichtbar,
   sichtbar nach dem Scrollen, beim Zeigen mit der Maus und beim Ziehen.
   Das Skript gehoert auf jede Seite mit dieser CSS, sonst fehlt dort die
   Leiste ganz.
   ========================================================================== */
.st-sb {
	display: none
}
@media (hover: hover) and (pointer: fine) {
	/* Die Klasse "js" setzt modernizr synchron im Kopf: die normale Leiste
	   verschwindet vor dem ersten Zeichnen, ohne JavaScript bleibt sie */
	html.js {
		scrollbar-width: none
	}
	html.js::-webkit-scrollbar {
		display: none
	}
	/* Unsichtbare Spur bleibt zeigbar, damit Hovern die Leiste einblendet */
	.st-sb {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1100;
		width: 14px;
		opacity: 0;
		transition: opacity .3s ease
	}
	.st-sb--active, .st-sb:hover, .st-sb--drag {
		opacity: 1
	}
	.st-sb--none, html.st-nav-lock .st-sb {
		display: none
	}
	.st-sb-thumb {
		position: absolute;
		top: 0;
		right: 3px;
		width: 6px;
		border-radius: 3px;
		background: #edba4e;
		transition: width .2s ease, border-radius .2s ease, background-color .2s ease
	}
	.st-sb:hover .st-sb-thumb, .st-sb--drag .st-sb-thumb {
		width: 8px;
		border-radius: 4px
	}
	.st-sb-thumb:hover, .st-sb--drag .st-sb-thumb {
		background: #f2eee3
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-sb, .st-sb-thumb {
		transition: none
	}
}

/* ==========================================================================
   Admin-Seite (admin.php), Stand 28.10.2026
   Bausteine st-admin-* unter .st-rich; nur auf dieser Seite genutzt.
   Anmeldung, Schriftmuster, Farbfelder, Datei-Karten mit Vorschau.
   ========================================================================== */
/* --- Anmeldung --- */
.st-rich .st-admin-login {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto
}
.st-rich .st-admin-form {
	display: grid;
	gap: 20px;
	margin-top: 24px
}
.st-rich .st-admin-form .st-form-send {
	justify-self: start
}
/* Admin-Textrollen: Darstellungsmodus, Rand, Innenabstand, Groesse, Schnitt
   und Zeilenhoehe stehen jeweils in der Klasse. Mehrere Zeilenhoehen kamen
   bisher aus .gt-article p (1.65) und sind deshalb ausdruecklich gesetzt. */
.st-rich .st-admin-notice {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 20px 0 0;
	padding: 14px 18px;
	font-size: 15.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	color: #ffd6cf;
	background: rgba(255, 180, 168, .1);
	border: 2px solid #ffb4a8;
	border-radius: 12px
}
.st-rich .st-admin-notice--ok {
	color: #f2eee3;
	background: rgba(237, 186, 78, .09);
	border-color: rgba(237, 186, 78, .45)
}
.st-rich .st-admin-notice--ok i {
	color: #edba4e
}
/* --- Kopfzeile nach der Anmeldung: Status und Abmelden --- */
.st-rich .st-admin-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px
}
.st-rich .st-admin-status {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.65;
	color: rgba(242, 238, 227, .8)
}
.st-rich .st-admin-status i {
	margin-right: 4px;
	color: #edba4e
}
.st-rich .st-admin-bar form {
	margin: 0
}
.st-rich .st-admin-logout {
	padding: 6px 16px;
	font-family: inherit;
	font-size: 14.5px;
	color: #f2eee3;
	background: transparent;
	border: 1px solid rgba(242, 238, 227, .35);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease
}
.st-rich .st-admin-logout:hover, .st-rich .st-admin-logout:focus-visible {
	color: #005f6a;
	background: #f2eee3;
	border-color: #f2eee3
}
.st-rich .st-admin-logout:focus-visible, .st-rich .st-admin-copy:focus-visible {
	outline: 3px solid #edba4e;
	outline-offset: 2px
}
/* --- Download-Zeilen: Symbol, Beschriftung, Format und Groesse --- */
.st-rich .st-admin-dls {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none
}
.st-rich .st-admin-dls li {
	margin: 0
}
.st-rich .st-admin-dls--grid {
	grid-template-columns: repeat(3, minmax(0, 1fr))
}
.st-rich .st-admin-dls--two {
	grid-template-columns: repeat(2, minmax(0, 1fr))
}
.st-rich .st-admin-dl {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	height: 100%;
	padding: 12px 16px;
	color: #f2eee3;
	text-decoration: none;
	background: rgba(242, 238, 227, .06);
	border: 1px solid rgba(242, 238, 227, .14);
	border-radius: 12px;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease
}
.st-rich .st-admin-dl i {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-row: 1 / span 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(237, 186, 78, .14);
	color: #edba4e;
	font-size: 17px;
	transition: background-color .25s ease, color .25s ease
}
.st-rich .st-admin-dl-label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 15.5px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.35
}
.st-rich .st-admin-dl-meta {
	display: block;
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(242, 238, 227, .72);
	transition: color .25s ease
}
.st-rich .st-admin-dl:hover, .st-rich .st-admin-dl:focus-visible {
	color: #005f6a;
	background: #f2eee3;
	border-color: #f2eee3
}
.st-rich .st-admin-dl:hover i, .st-rich .st-admin-dl:focus-visible i {
	background: rgba(0, 95, 106, .12);
	color: #005f6a
}
.st-rich .st-admin-dl:hover .st-admin-dl-meta, .st-rich .st-admin-dl:focus-visible .st-admin-dl-meta {
	color: rgba(0, 83, 93, .85)
}
.st-rich .st-admin-notes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 20px
}
/* --- Schriftmuster: grosses "Aa" links, Schnitte rechts --- */
.st-rich .st-admin-type {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	margin: 28px 0 0;
	background: rgba(242, 238, 227, .05);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 16px;
	overflow: hidden
}
.st-rich .st-admin-type-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px;
	background: linear-gradient(135deg, #00535d 0%, #004952 100%);
	border-right: 1px solid rgba(242, 238, 227, .12)
}
.st-rich .st-admin-type-sample {
	font-size: clamp(4.5rem, 9vw, 6.5rem);
	font-weight: 600;
	line-height: 1;
	color: #edba4e
}
.st-rich .st-admin-type-name {
	display: block;
	margin: 14px 0 4px;
	padding: 0;
	font-size: 1.35rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.65;
	color: #f2eee3
}
.st-rich .st-admin-type-meta {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	color: rgba(242, 238, 227, .75);
	hyphens: manual
}
.st-rich .st-admin-weights {
	margin: 0;
	padding: 8px 28px;
	list-style: none
}
.st-rich .st-admin-weights li {
	margin: 0;
	padding: 14px 0
}
.st-rich .st-admin-weights li + li {
	border-top: 1px solid rgba(242, 238, 227, .11)
}
.st-rich .st-admin-weight-name {
	display: block;
	margin: 0 0 2px;
	padding: 0;
	line-height: 1.65;
	font-style: normal;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #edba4e
}
.st-rich .st-admin-weight-text {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(1.1rem, 2.3vw, 1.4rem);
	line-height: 1.35;
	color: #fff;
	hyphens: manual
}
.st-rich .st-admin-alphabet {
	grid-column: 1 / -1;
	display: block;
	margin: 0;
	padding: 16px 28px;
	font-size: 15px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.65;
	letter-spacing: .04em;
	color: rgba(242, 238, 227, .8);
	border-top: 1px solid rgba(242, 238, 227, .12);
	overflow-wrap: anywhere;
	hyphens: manual
}
/* --- Farbfelder mit kopierbaren Werten --- */
.st-rich .st-admin-swatches {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none
}
.st-rich .st-admin-swatch {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: rgba(242, 238, 227, .05);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 14px;
	overflow: hidden
}
/* Farbfeld mit Rahmen, damit Petrol auf dem Petrol-Grund sichtbar bleibt */
.st-rich .st-admin-chip {
	display: block;
	height: 104px;
	margin: 8px 8px 0;
	border: 1px solid rgba(242, 238, 227, .22);
	border-radius: 10px
}
.st-rich .st-admin-swatch-title {
	display: block;
	margin: 16px 18px 4px;
	padding: 0;
	font-size: 1.1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #f2eee3
}
/* flex: 1 haelt die Beschreibungen gleich hoch (Plan C17). */
.st-rich .st-admin-swatch-text {
	flex: 1;
	display: block;
	margin: 0 18px;
	padding: 0;
	font-size: 14.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
	hyphens: manual
}
.st-rich .st-admin-codes {
	margin: 14px 18px 16px
}
.st-rich .st-admin-codes > div {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	border-top: 1px solid rgba(242, 238, 227, .1)
}
.st-rich .st-admin-codes dt {
	flex: 0 0 34px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #edba4e
}
.st-rich .st-admin-codes dd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	flex: 1;
	min-width: 0;
	margin: 0
}
.st-rich.st-admin code {
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	color: #fff;
	background: none;
	overflow-wrap: anywhere
}
.st-rich .st-admin-codes code {
	white-space: nowrap
}
.st-rich .st-admin-copy {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 14px;
	color: #f2eee3;
	background: transparent;
	border: 1px solid rgba(242, 238, 227, .25);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease
}
.st-rich .st-admin-copy[hidden] {
	display: none
}
.st-rich .st-admin-copy:hover, .st-rich .st-admin-copy:focus-visible {
	color: #005f6a;
	background: #f2eee3;
	border-color: #f2eee3
}
.st-rich .st-admin-copy--done, .st-rich .st-admin-copy--done:hover {
	color: #00535d;
	background: #edba4e;
	border-color: #edba4e
}
.st-rich .st-admin-subhead {
	display: block;
	margin: 40px 0 0;
	padding: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.25rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #f2eee3
}
/* Farbpaare: Schriftprobe auf Grund, Kontrastwert, Verwendung */
.st-rich .st-admin-pairs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none
}
.st-rich .st-admin-pairs li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 14px;
	font-size: 14.5px;
	line-height: 1.45;
	background: rgba(242, 238, 227, .05);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 12px
}
.st-rich .st-admin-pairs strong, .st-rich .st-admin-tones strong {
	color: #f2eee3
}
.st-rich .st-admin-pair {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	height: 52px;
	font-size: 1.25rem;
	font-weight: 600;
	border: 1px solid rgba(242, 238, 227, .25);
	border-radius: 10px
}
.st-rich .st-admin-tones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 16px 0 24px;
	padding: 0;
	list-style: none
}
.st-rich .st-admin-tones li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5
}
.st-rich .st-admin-mini {
	flex: 0 0 26px;
	height: 26px;
	border: 1px solid rgba(242, 238, 227, .3);
	border-radius: 6px
}
.st-rich .st-admin-tones code {
	font-size: 13.5px
}
/* --- Datei-Karten mit Vorschau (Logo, Bilder) --- */
.st-rich .st-admin-assets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 24px 0 0
}
.st-rich .st-admin-assets--three {
	grid-template-columns: repeat(3, minmax(0, 1fr))
}
.st-rich .st-admin-asset {
	display: flex;
	flex-direction: column;
	background: rgba(242, 238, 227, .05);
	border: 1px solid rgba(242, 238, 227, .12);
	border-radius: 16px;
	overflow: hidden
}
.st-rich .st-admin-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	background: rgba(0, 30, 35, .25)
}
.st-rich .st-admin-assets--three .st-admin-preview {
	aspect-ratio: 1 / 1
}
.st-rich .st-admin-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}
.st-rich .st-admin-preview--dark, .st-rich .st-admin-preview--light {
	padding: 22px
}
.st-rich .st-admin-preview--dark img, .st-rich .st-admin-preview--light img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain
}
.st-rich .st-admin-preview--dark {
	background: linear-gradient(135deg, #00535d 0%, #004952 100%)
}
/* Freigestelltes Portraet auf Creme wie im Bogen der Startseite, unten buendig */
.st-rich .st-admin-preview--light {
	align-items: flex-end;
	padding-bottom: 0;
	background: linear-gradient(180deg, #f7f4ec 0%, #e8e1cf 100%)
}
.st-rich .st-admin-preview--icon img {
	max-width: 140px;
	max-height: 140px
}
.st-rich .st-admin-asset-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 20px 20px
}
/* Rand und Groesse dieser Rubrik werden im Kartenkoerper von der Regel
   darunter uebersteuert (15 px statt .72rem, Rand 0): das war schon vor der
   Umstellung so und bleibt unveraendert. */
.st-rich .st-admin-asset-kicker {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	font-size: .72rem;
	font-weight: 700;
	font-style: normal;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #edba4e
}
.st-rich .st-admin-asset-title {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #f2eee3
}
/* Ersetzt .st-admin-asset-body p: die drei Textrollen im Kartenkoerper. */
.st-rich .st-admin-asset-body .st-admin-asset-kicker,
.st-rich .st-admin-asset-body .st-admin-asset-text,
.st-rich .st-admin-asset-body .st-admin-hint {
	margin: 0;
	font-size: 15px;
	line-height: 1.55
}
.st-rich .st-admin-asset-text {
	display: block;
	padding: 0;
	font-weight: 500;
	font-style: normal
}
/* Downloads unten buendig, auch bei unterschiedlich langen Texten */
.st-rich .st-admin-asset-body .st-admin-dls {
	margin-top: auto;
	padding-top: 16px
}
.st-rich .st-admin-asset-body .st-admin-hint {
	font-size: 13.5px;
	color: rgba(242, 238, 227, .72);
	hyphens: manual
}
.st-rich .st-admin-hint {
	display: block;
	padding: 0;
	font-weight: 500;
	font-style: normal
}
/* --- Flyer: Vorschau beider Seiten, Druckdaten im dunklen Feld --- */
.st-rich .st-admin-flyer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 24px 0 0
}
.st-rich .st-admin-flyer figure {
	margin: 0
}
.st-rich .st-admin-flyer a {
	display: block;
	border-radius: 10px
}
/* Rahmen: die Petrol-Aussenseite hebt sich sonst nicht vom Seitengrund ab */
.st-rich .st-admin-flyer img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(242, 238, 227, .22);
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(0, 30, 35, .35)
}
.st-rich .st-admin-flyer figcaption {
	margin-top: 10px;
	font-size: 14.5px;
	text-align: center;
	color: rgba(242, 238, 227, .8)
}
.st-rich .st-admin-specs {
	margin-top: 28px
}
/* Eigene Groesse gegenueber .st-admin-swatch-title und
   .st-admin-asset-title: die drei Varianten werden nicht vereinheitlicht,
   weil ihre wirksamen Werte sich unterscheiden (Plan C16). */
.st-rich .st-admin-specs .st-icon-head .st-admin-spec-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(1.15rem, 2.4vw, 1.35rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	color: #f2eee3
}
.st-rich .st-admin-spec-list {
	margin: 0
}
.st-rich .st-admin-spec-list > div {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid rgba(242, 238, 227, .12)
}
.st-rich .st-admin-spec-list dt {
	font-size: 14.5px;
	font-weight: 600;
	color: #edba4e
}
.st-rich .st-admin-spec-list dd {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55
}
.st-rich .st-admin-warn {
	margin-top: 20px;
	background: rgba(237, 186, 78, .09);
	border-color: rgba(237, 186, 78, .45)
}
/* --- Patientenbogen: Seitenvorschau schmaler als das Foto der Downloads-Seite --- */
.st-rich .st-admin-sheet {
	justify-self: center;
	width: min(320px, calc(100% - 18px))
}
.st-rich #patientenbogen .st-note {
	margin: 16px 0 24px
}
/* --- Technik: lange Adressen und Dateinamen duerfen umbrechen --- */
.st-rich .st-admin-tech li {
	align-items: flex-start;
	font-size: 15.5px
}
.st-rich .st-admin-tech span {
	min-width: 0;
	overflow-wrap: anywhere;
	hyphens: manual
}
.st-rich .st-admin-tech a {
	color: #edba4e;
	text-decoration: underline
}
.st-rich .st-admin-tech a:hover, .st-rich .st-admin-tech a:focus-visible {
	color: #f2eee3
}
@media (prefers-reduced-motion: reduce) {
	.st-rich .st-admin-dl, .st-rich .st-admin-dl i, .st-rich .st-admin-dl-meta, .st-rich .st-admin-copy, .st-rich .st-admin-logout {
		transition: none
	}
}
/* --- Tablet: Farben und Bilder zweispaltig, Schriftmuster untereinander --- */
@media (max-width: 991px) {
	.st-rich .st-admin-swatches, .st-rich .st-admin-pairs, .st-rich .st-admin-assets--three {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
	.st-rich .st-admin-dls--grid {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-admin-type {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-admin-type-hero {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 24px;
		align-items: center;
		border-right: 0;
		border-bottom: 1px solid rgba(242, 238, 227, .12)
	}
	.st-rich .st-admin-type-sample {
		grid-row: 1 / span 2
	}
	.st-rich .st-admin-type-name {
		align-self: end;
		margin-top: 0
	}
	.st-rich .st-admin-type-meta {
		align-self: start
	}
}
/* --- Mobil: alles einspaltig, Farbfeld links neben den Werten --- */
@media (max-width: 767px) {
	.st-rich .st-admin-assets, .st-rich .st-admin-assets--three, .st-rich .st-admin-flyer,
	.st-rich .st-admin-notes, .st-rich .st-admin-pairs, .st-rich .st-admin-tones {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-admin-assets--three .st-admin-preview {
		aspect-ratio: 4 / 3
	}
	.st-rich .st-admin-weights, .st-rich .st-admin-alphabet {
		padding-left: 20px;
		padding-right: 20px
	}
	.st-rich .st-admin-type-hero {
		padding: 22px 20px
	}
	.st-rich .st-admin-spec-list > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px
	}
}
@media (max-width: 575px) {
	.st-rich .st-admin-swatches {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-admin-swatch {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr)
	}
	.st-rich .st-admin-chip {
		grid-row: 1 / span 3;
		height: auto;
		margin: 8px 0 8px 8px
	}
	.st-rich .st-admin-dls--two {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich .st-admin-swatch-title {
		margin: 14px 16px 4px
	}
	.st-rich .st-admin-swatch-text {
		margin: 0 16px
	}
	.st-rich .st-admin-codes {
		margin: 10px 16px 12px
	}
}

/* --- Trennlinie vor dem Zitat: auf allen Seiten 70 px Abstand nach oben.
       Der letzte Absatz im Inhalt traegt deshalb keinen eigenen Rand. --- */
.st-rich .gt-context-hint:last-child {
	margin-bottom: 0
}
.legal-page .main-content .st-legal-text:last-child {
	margin-bottom: 0
}

/* Portraets: Kanten nach der Browser-Verkleinerung dezent schaerfen.
   Der normierte SVG-Filter erhaelt Helligkeit und Alpha der Originalbilder. */
.st-rich .st-portrait-filter {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none
}
.st-rich .st-portrait-img {
    filter: url(#st-portrait-sharpen)
}
.st-rich .st-home-photo {
    filter: url(#st-portrait-sharpen) drop-shadow(0 14px 22px rgba(0, 40, 46, .25))
}

/* Richtungsanzeigen in Pillenbuttons wie in den Weiter-Karten bewegen. */
.st-rich .gt-cta .fa-long-arrow-right {
	transition: transform .25s ease
}
@media (prefers-reduced-motion: no-preference) {
	.st-rich .gt-cta:hover .fa-long-arrow-right,
	.st-rich .gt-cta:focus-visible .fa-long-arrow-right {
		transform: translateX(4px)
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-rich .gt-cta .fa-long-arrow-right {
		transition: none
	}
}

/* Telefonhinweis: Symbol oben, Text und Rufnummer ueber die volle Breite. */
.st-rich .st-callout--phone {
	grid-template-columns: minmax(0, 1fr);
	align-content: center
}
.st-rich .st-callout--phone > .fa-phone {
	grid-row: auto;
	justify-self: center;
	margin-bottom: 14px
}
.st-rich .st-callout--phone > :not(i) {
	grid-column: 1
}

/* Zusammenarbeit: Anfragebutton am Desktop mittig im gesamten Kasten. */
@media (min-width: 768px) {
	.st-rich #zusammenarbeit .st-callout--cta > i {
		grid-row: 1 / span 2
	}
	.st-rich #zusammenarbeit .st-callout--cta > .gt-cta {
		grid-column: 1 / -1;
		justify-self: center
	}
}

/* Kontaktkasten: Sprechblase auch am Desktop ueber dem Text. */
@media (min-width: 768px) {
	.st-rich #kontakt-aufnehmen .st-callout--cta {
		grid-template-columns: minmax(0, 1fr)
	}
	.st-rich #kontakt-aufnehmen .st-callout--cta > i {
		grid-row: auto;
		margin-bottom: 14px
	}
	.st-rich #kontakt-aufnehmen .st-callout--cta > :not(i) {
		grid-column: 1
	}
}

/* Gruppenhinweis: Linktext mittig unter dem gesamten Karteninhalt. */
.st-rich .st-home-hint {
	row-gap: 8px
}
.st-rich .st-home-hint > .st-home-hint-link {
	grid-column: 1 / -1;
	justify-self: center;
	margin-top: 0;
	font-size: 14.5px;
	line-height: 1.45;
	text-align: center
}
.st-rich .st-home-hint > .fa-long-arrow-right {
	grid-column: 3;
	grid-row: 1
}