/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Standard Definitions
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

* {
	margin:0;
	padding:0;
}


*,
*:before,
*:after {
  box-sizing:inherit;
}

:root{
  /* ---------- Farben: Basis ---------- */
  --ink:#131f24;                       /* Haupttext */
  --ink-soft:rgba(19,31,36,.68);       /* Fliesstext, Meta-Angaben */
  --ink-mute:rgba(19,31,36,.48);       /* Hinweise, Copyright */
  /* --accent:#0a4b47; */                    /* Hausfarbe: Buttons, Eyebrow, Icons */
  --accent: #5ea389;
  --accent-hover:#0d5c57;              /* aufgehellte Variante */

  /* ---------- Farben: Flächen ---------- */
  --bg:#ffffff;                        /* helle Bänder, Kacheln */
  --bg-tint:#f4f6f4;                   /* abgesetzte Bänder */
  --bg-dark:#0a4b47;                   /* dunkle Bänder, falls wieder gebraucht */

  /* ---------- Linien ---------- */
  --line:rgba(19,31,36,.12);           /* Standard-Kontur */
  --line-strong:rgba(19,31,36,.24);    /* Hover, betonte Kanten */
  --line-on-dark:rgba(255,255,255,.16);

  /* ---------- Status ---------- */
  --ok:#5ea389;                        /* geöffnet */
  --alert:#a2482f;                     /* geschlossen, Notfallhinweis */

  /* ---------- Layout ---------- */
  --site-max:1200px;
  --site-pad:20px;
  --band-pad:clamp(60px,7vw,100px);    /* vertikaler Abstand pro Band */
  --gap:18px;                          /* Grid-Abstand Kacheln */

  /* ---------- Radien ---------- */
  --radius-lg:22px;                    /* Bänder, grosse Flächen */
  --radius:18px;                       /* Kacheln */
  --radius-sm:13px;                    /* Icon-Flächen */
  --radius-pill:999px;                 /* Buttons, Status-Pille */

  /* ---------- Schatten ---------- */
  --shadow-sm:0 1px 2px rgba(19,31,36,.05);
  --shadow-lg:0 14px 28px -18px rgba(19,31,36,.45);

  /* ---------- Typografie ---------- */
  --font-head:'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
   --fs-h2:clamp(1.75rem,3.4vw,2.5rem);
  --fs-lead:1rem;
  --fs-meta:.94rem;
  --fs-eyebrow:.8rem;
  --track-eyebrow:.14em;               /* letter-spacing Eyebrow */

  /* ---------- Bewegung ---------- */
  --ease:.25s ease;
}

@media (max-width:768px){
  :root{ --site-pad:10px; }
}

@media (max-width:520px){
  :root{ --radius-lg:16px; --radius:16px; }
}


ul, li, ol {
	margin-bottom: 0px !important;
}

img { 
	border:0;
}

.center {
	text-align:center;
}

.right {
	text-align: right;
}

.bold {
	font-weight:bold;
}

.block {
	display:block;
}	
	
.clearer {
	clear:both;
}

.hidden {
	display:none;
}

.bild_border {
	border:solid 1px #000;
}

.bild {
	border:none;
}

.overflow_hidden {
	overflow:hidden;	
}

.versteckt {
	position:absolute;
	left:-5000px;
}

.float_left {
	float:left;
}

.flex {
	display:flex;
	flex-direction:row;
}




.w40px {
	width:40px;	
}

.w47px {
	width:47px;	
}

.w50px {
	width:50px;	
}

.w60px {
	width:60px;	
}

.w70px {
	width:70px;	
}

.w80px {
	width:80px;	
}

.w100px {
	width:100px;	
}

.w108px {
	width:108px;	
}

.w200px {
	width:200px;	
}

.w220px {
	width:220px;	
}

.w250px {
	width:250px;	
}

.w256px {
	width:256px;	
}

.w300px {
	width:300px;	
}

.w304px {
	width:304px;	
}

.w350px {
	width:350px;	
}

.w400px {
	width:400px;	
}

.w100p {
	width:100%;
}

.mb8px {
	margin-bottom:8px;
}



.margin_bottom_5px {
	margin-bottom:5px;
	min-height:1px;
}

.margin_bottom_10px {
	margin-bottom:10px;
	min-height:1px;
}

.margin_bottom_15px {
	margin-bottom:10px;
	min-height:1px;
}

.margin_bottom_20px {
	margin-bottom:20px;
	min-height:1px;
}

.margin_bottom_30px {
	margin-bottom:30px;
	min-height:1px;
}

.margin_bottom_40px {
	margin-bottom:40px;
	min-height:1px;
}

.margin_bottom_50px {
	margin-bottom:50px;
	min-height:1px;
}

.margin_bottom_60px {
	margin-bottom:60px;
	min-height:1px;
}

.margin_bottom_70px {
	margin-bottom:70px;
	min-height:1px;
}

.margin_bottom_80px {
	margin-bottom:80px;
	min-height:1px;
}

.margin_bottom_90px {
	margin-bottom:90px;
	min-height:1px;
}

.margin_bottom_100px {
	margin-bottom:100px;
	min-height:1px;
}


.margin_bottom_140px {
	margin-bottom:140px;
	min-height:1px;
}

.margin_bottom_150px {
	margin-bottom:150px;
	min-height:1px;
}

.margin_bottom_200px {
	margin-bottom:200px;
	min-height:1px;
}

.margin_bottom_250px {
	margin-bottom:250px;
	min-height:1px;
}

.margin_bottom_280px {
	margin-bottom:280px;
	min-height:1px;
}

@media screen and (min-width:1000px) {
	.margin_bottom_desktop_10px {
		margin-bottom:10px;
		min-height:1px;
	}

	.margin_bottom_desktop_20px {
		margin-bottom:20px;
		min-height:1px;
	}

	.margin_bottom_desktop_40px {
		margin-bottom:40px;
		min-height:1px;
	}

	.margin_bottom_desktop_60px {
		margin-bottom:60px;
		min-height:1px;
	}

	.margin_bottom_desktop_80px {
		margin-bottom:80px;
		min-height:1px;
	}

	.margin_bottom_desktop_100px {
		margin-bottom:100px;
		min-height:1px;
	}

	.desktop_w80p {
		width:80%;
	}

	.desktop_w90p {
		width:90%;
	}
}



.margin_right_10px {
	margin-right:10px;
}

.margin_right_20px {
	margin-right:20px;
}


.padding_left_0px {
	padding-left: 0px !important;
}




@media screen and (min-width:1000px) {

	.padding_right_desktop_50px {
		padding-right:50px !important;
		
 	}	
}




.uppercase {
	text-transform:uppercase;
}

.gold {
	/* color:rgb(207, 194, 161);	 */
	/* color:#cbbe9a; */
	color:#ad8c68;
	
}

.red {
	color: #c00000;
}

.blue {
	color: #71beea;
}

.white {
	color:#fff;
}





/* Tables */

td, th {
	padding: 0px;
}
	
table {
	border-spacing: 0px;
}
	
	


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Title Definitions
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/



h1 {
  	font-family:'Inter', Arial, Helvetica, sans-serif;
 	font-weight: 800;
	margin: 0px 0px 10px 0px !important;
	/* color: #1f1f22; */
	color:#212529;
	/* text-transform: uppercase; */
	line-height: 1.3em !important;
	font-size: 28px !important;
}	

@media screen and (min-width:800px) {
	h1 {
		font-size: calc(20px + 1.1vw) !important;
		margin: 0px 0px 40px 0px !important;
	}
}

@media screen and (min-width:2000px) {
	h1 {
		font-size: 42px !important;
	}
}


h2{
	font-family:'Inter', Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size:clamp(1.75rem, 1.39rem + 1.51vw, 2.75rem) !important;
	line-height:1.25 !important;
	margin:0 0 clamp(10px, 1.6vw, 24px) !important;
	letter-spacing: -.04em !important;
	color:#212529;
}



h3 {
	font-family:'Inter', Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: clamp(1.15rem, 1.1rem + 0.216vw, 1.3rem) !important;
	line-height: 1.35 !important;
	margin: 0 0 clamp(12px, 0.8vw, 20px) !important;
	letter-spacing: .08em !important;
	color:#212529;
}	



#impressum h2 {
	font-size:clamp(1.5rem, 1rem + 1.5vw, 2rem) !important;
	line-height:1.25 !important;
	margin:0 0 clamp(10px, 1.6vw, 24px) !important;
}




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Link Definitions
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


a:link,
a:visited {
	color:#5ea389;
	text-decoration: none;
}

a:hover,
a:active {
	color:#5ea389;
	text-decoration: none;
}



a:active , a:focus {
	outline:none;
}


.link:before {
	content: "";
    display: block;
	background: url('../images/icons/link.svg') no-repeat;
	background-size: auto 13px;
	background-position: 0px 7px;
	background-repeat: no-repeat;
	width: 12px;
	height: 18px;
    float: left;
}

.back:before {
	content: "";
    display: block;
	background: url('../images/icons/back.svg') no-repeat;
	background-size: auto 13px;
	background-position: 0px 8px;
	background-repeat: no-repeat;
	width: 16px;
	height: 22px;
    float: left;
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CMS Login und Debug
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#debug {
	width:940px;
	margin:2px auto 0 auto;
	color: #000; 
	font-size:10px;
}

#upload_iframe_div {
	display:none;
}

#upload_iframe {
	height:500px;
	width:100%;
	border:none;
}

#kontakt_iframe_div {
	display:none;
}

#kontakt_iframe {
	height:40px;
	width:100%;
	text-align:right;
}





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// New CMS Login
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#div_login {
	position:fixed;
	left:0px;
	top:0px;
	width:12px;
	height:12px;
	z-index:5;
}

#loginarea_shade {
	visibility:hidden;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:6;	
	backdrop-filter: blur(0px) opacity(0);
}

.login_area_shade_animation_class {
	animation: backdrop_filter_animation 2s ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes backdrop_filter_animation {
	0% {
		backdrop-filter: blur(0px) opacity(0);
	}
	100% {
		backdrop-filter: blur(5px) opacity(1);
	}
}

#loginarea {
	display:none;
	position:fixed;
	width:300px;
	height:250px;
	top:50%;
	left:50%; 

	font-family: 'inter', Arial, Helvetica, sans-serif;
	
	font-size:15px;
	
	margin-top:-121px;
	margin-left:-150px;
	
	background-color:#fff;
	
	border:solid 1px #666;
	-moz-border-radius:6px;
	border-radius:6px;
	
	padding:24px 12px 24px 12px;	
	z-index:7;	
}


#loginarea .login_title {
	font-size:24px;
	font-weight: 600;
	
	color:#212529;
	
	margin:0px 0px 5px 0px !important;
	border:none;
	
	display:block;
	padding:0;
	text-align:center;
}

#loginarea input {
	font-family: 'inter', Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#212529;
}

#loginarea .input_feld_login {
	width:100%;
	height:48px;
	border:1px solid #ccc; 
	-moz-border-radius:6px;
	border-radius:6px;
	margin-top:8px;
	padding-left:10px;
	cursor:text;
}

#loginarea .input_button_login {
	width:100%;
	height:48px;
    margin-top:8px;
	padding: 0px 8px 0px 8px;
	line-height: 46px;
	border-radius: 6px;
	
	font-family: 'inter', Arial, Helvetica, sans-serif;
	text-align:center;
	color:#fff;
	font-size:15px;
	
	border:solid 1px #444;
	cursor: pointer;

	/*
	background: #3a7ac7;
	background: -webkit-linear-gradient(#5a9fce, #3a7ac7);
	background: -o-linear-gradient(#5a9fce, #3a7ac7);
	background: -moz-linear-gradient(#5a9fce, #3a7ac7);
	background: linear-gradient(#5a9fce, #3a7ac7);
	*/
	
	background-color: #5a9fce;
	background-image: linear-gradient( to bottom, rgba(90, 159, 206, 0.1) 0%, rgba(58, 122, 199, 1) 100% );
	transition: background-color 0.3s ease-in-out;
}


#loginarea .input_button_login:hover {
	border:solid 1px #000;
	background-color: #6caad4;
	background-image: linear-gradient( to bottom, rgba(90, 159, 206, 0.1) 0%, rgba(58, 122, 199, 1) 100% );
	transition: background-color 0.3s ease-in-out;
}

#login_close {
	position:absolute;
	right:12px;
	top:12px;
}

#div_passwort_vergessen {
	margin-top:5px;
	font-family: 'robotolight', Arial, Helvetica, sans-serif;
	font-size:14px;
}



	
/*  
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Basic CSS
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

html {
	height:100%;
	box-sizing: border-box;
}


body{
  color:#212529;

  min-height:100%;
  height:100%;
  display:flex;
  flex-direction:column;


  
   font-size:clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  line-height:1.6;

font-family:'Inter', system-ui, sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;   /* Ergänzung für Firefox auf macOS */
}




#div_wrapper {
	flex: 1 0 auto;
}





/* Default Wrappe */
.wrap{
  width:100%;
  max-width:var(--site-max);
  margin-inline:auto;
  padding-inline:var(--site-pad);
  box-sizing:border-box;
}

@media (max-width:768px){
  .wrap{ padding-inline:10px; }
}





@media screen and (min-width:1000px) {


	#top {
		padding:0px 20px 0px 20px;
		margin:0 auto;
		max-width:1280px;
		line-height:40px;
		font-family:'inter_light', Arial, Helvetica, sans-serif;
		font-size: 16px;
		color:#E3E3E3;
		text-align:right;
		
	}
}



/* Basis = Mobil */
#logo_navigation {
	background-color: transparent;
	position: fixed;
	z-index: 2;
	width: 100%;
	height: 60px;
}

@media screen and (min-width:1000px) {
	/* Desktop-Standard: 120px, auch bevor JS eine Klasse setzt */
	#logo_navigation {
		height: 120px;
		transition: 0.5s;
	}

	#logo_navigation.shrink_off { height: 120px; }
	#logo_navigation.shrink_on  { height: 60px;  }
}

/* Die weisse Fläche als eigene Ebene hinter dem Inhalt */
#logo_navigation::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	z-index: -1;
	opacity: 1;
}

/* Einblenden nur auf der Startseite */
body.startseite #logo_navigation::before {
	opacity: 0;
	animation: bar_fade_in 2s ease-out 2s both;
}

@keyframes bar_fade_in{
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	#logo_navigation::before{ animation:none; opacity:1; }
}





#logo_navigation_wrapper {
	margin:0px auto;	
}

@media screen and (min-width:1000px) {
	#logo_navigation_wrapper {
		max-width:1200px;
		transition: 0.5s;
	}


}




#logo {
	width:190px;
	height:60px;
	background-image:url(../images/layout/praxis/logo_arztpraxis_st_wolfgang.png);
	background-repeat:no-repeat;
	background-position: 10px 12px; 
	display:block;
}

#logo.shrink_off {
	height:60px;	
	background-size:180px;

}
#logo.shrink_on {
	height:60px;	
	background-size:180px;

}

@media screen and (min-width:1000px) {
	
	#logo {
		float:left;
		height:auto;
		width:400px;
		
		background-position: 20px 0px;
		transition: 0.5s;
	}

	#logo.shrink_off {
		height:90px;
		background-size:260px;
		margin-top:32px;
	}

	#logo.shrink_on {
		height:54px;
		background-size:180px;
		margin-top:12px;
	}
}




#content {
	font-family:inherit;
	line-height: 1.6em;
	/* letter-spacing: 0.02em; */
	padding:25px 0px 25px 0px;
	min-height: 200px;
}


@media screen and (min-width:1000px) {
	#content {
		margin:0 auto;

		padding:70px 0px 70px 0px;
		border-bottom:1px solid var(--nf-line);
		
	}
}

#content:has(> .band) {
	padding-top: 0;
	padding-bottom: 0;
}


.content_center {
	/* padding:0px 10px 0px 10px; */
}

@media screen and (min-width:1000px) {
	
	.content_center {
		margin:0 auto;
		max-width:1280px;
		padding:0px 20px 0px 20px;
	}
}
	


/*
#content a:link,
#content a:visited {
	color: #3a7ac7;
	text-decoration: none;
	transition: color 0.5s ease;
}

#content a:hover,
#content a:active {
	color: #3a7ac7;
	text-decoration: underline;
	transition: color 0.5s ease;
}

*/

#content ul {
	padding-left:30px;
	padding-bottom:1.5em;
}

#content ol {
	padding-left:30px;
	padding-bottom:1.5em;
}

#content li {
	padding-top:0.8em;
}


.special_title {
	text-align:center;
	font-family: 'lobster', Arial, Helvetica, sans-serif;
	color:#444;
}

.div_private_und_kmu {
	font-family:'inter_light', Arial, Helvetica, sans-serif;
	font-size:20px;
	text-align:center;
}

.div_private_und_kmu {
	margin-top:-5px;
	font-size: 17px;
}

@media screen and (min-width:800px) {
	.div_private_und_kmu {
		margin-top:calc(-45px + 0.8vw);
		font-size: calc(14px + 0.3vw);
	}
}

@media screen and (min-width:2000px) {
	.div_private_und_kmu {
		margin-top:-30px;
		font-size: 20px;
	}
}


.div_special_text {
	font-size:24px;
	text-align:center;
	font-family: 'lobster', Arial, Helvetica, sans-serif;
	color:#444;
	line-height:1.3em;
	margin-bottom:20px;
}

@media screen and (min-width:800px) {
	
	.div_special_text {
		font-size:28px;
	}
}


.div_content_block_blue {
	background-color:#f6f6f6;
}






.div_flex_wrapper_same_height .flex_entry {
	margin-bottom:2em;
}


@media screen and (min-width:800px) {

	.div_flex_wrapper_same_height {
		display: flex;
	}

	.div_flex_wrapper_same_height .flex_entry {
		display: flex;
		flex-direction: column;
		flex: 1 1 100%;
		width:33%;
		/* 
		In the order, equal to
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 300px;
		*/
		
		/* background-color: #09F; */
		margin-bottom:4em;

	}

	.div_flex_wrapper_same_height .flex_middle_margin {
		margin-left: 2em;
		margin-right: 2em;
	}

}




.div_icon_angebote_neu {
	width:56px;
	margin-bottom:12px;
}

@media screen and (min-width:800px) {
	.div_icon_angebote_neu {
		width:70px;
		margin-bottom:20px;
	}
}

.img_icon_angebote_neu {
	width:100%;
	opacity: 0.85;
}



.h2_spacer_dienstleistungen_neu {
	margin-bottom:2px;
}





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// iFrame
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


#iframe_content {
	font-family: 'robotolight', Arial, Helvetica, sans-serif;
	padding:10px 0px 0px 0px;
}






/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Sprach Switcher
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
 
.language-switcher {
	/* position: relative; */
	display: none;
	position: absolute;
	right:20px;
	top:70px;
  }

  .lang-btn {
	background-color:#fff !important;
	color:#666666;
	padding: 8px 12px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
  }

  .lang-dropdown {
	display: none;
	position: absolute;
	right: 0;
	background-color: white;
	color:#666666;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-top: 5px;
	min-width: 64px;
	z-index: 100;
  }

  .lang-dropdown div {
	padding: 8px 12px;
	cursor: pointer;
  }

  .lang-dropdown div:hover {
	background-color:#fcfaf3;
  }

  .language-switcher.open .lang-dropdown {
	display: block;
  }

  @media screen and (min-width:1000px) {
	.language-switcher {
		display: inline-block;
		right:20px;
		top:24px;
	  }
  }



/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Buttons global
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

a.btn:link,
a.btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: var(--radius-pill);

	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;

	transition: transform .2s ease, opacity .2s ease, background .2s ease, color .2s ease;
}

a.btn-primary:link,
a.btn-primary:visited {
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

a.btn-primary:hover {
	transform: translateY(-2px);
	opacity: .92;
}

a.btn-outline:link,
a.btn-outline:visited {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
}

a.btn-outline:hover {
	border-color: var(--accent);
	color: var(--accent);
}

a.btn:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
	a.btn { transition: none; }
	a.btn-primary:hover { transform: none; }
}

@media (max-width:520px) {
	.actions .btn { flex: 1 1 100%; }
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Headerbild
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/



/*
#header {
	transition: 0.5s;
	font-family: 'open_sanssemibold', Arial, Helvetica, sans-serif;
	position: relative;
	padding-top:60px;
}

@media screen and (min-width:1000px) {
	#header {

	}

	#header.shrink_off {
		padding-top:120px;
	}

	#header.shrink_on {
		padding-top:60px;
	}
}

*/

#header {
	transition: 0.5s;
	font-family: 'open_sanssemibold', Arial, Helvetica, sans-serif;
	position: relative;
	padding-top:0;              
	overflow: hidden;          /* <-- neu */
}

@media screen and (min-width:1000px) {
	#header.shrink_off {
		padding-top:0;             /* war 120px */
	}

	#header.shrink_on {
		padding-top:0;           
	}
}



#flex_header_text {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	overflow:hidden;
	height:100%;
	z-index:2;
	display: flex;
	align-items: center;
	justify-content: center;
}



#header_text_startseite {
	margin-top:-2vw;
	text-align: center;
}

#header_text {
	text-align: center;
}

.header_title {
	font-size:calc(150% + 3vw);
	line-height:1.2em;
	color:#fff; 
}

.header_title_startseite {
	font-size:calc(150% + 3vw);
	line-height:1.6em;
	color:#fff; 

	animation: sub_title_animation 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.header_sub_title_startseite {
	font-size:calc(60% + 1vw);
	color:#fff; 
}

@keyframes sub_title_animation {
    0% {
        line-height:2.5em;
    }
    100% {
        line-height:1.6em;
     }
}



#header img {
	width:100%;
	object-fit: cover;
}
/* ---------- Headerbild: volle Breite, Höhe folgt dem Bild ---------- */

/* ---------- Headerbild ---------- */

/* Mobile: exakt 80% der Bildschirmhöhe, Bild wird zugeschnitten */
#header_zoom {
	position: relative;        /* <-- neu: macht das Clipping zuverlässig */
  overflow: hidden;          /* <-- neu */
	height: calc(80vh - 60px);
	height: calc(80svh - 60px);
}

#header_zoom img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Desktop: volle Bildbreite sichtbar, Höhe folgt dem Bild – gedeckelt */
@media screen and (min-width:1000px) {
	#header_zoom {
		height: auto;
		max-height: 85vh;
	}

	#header_zoom img {
		position: relative;
		height: auto;
		max-height: 85vh;
	}
}



/* ---------- Headerbild: sanfter Zoom-Out ---------- */

#header_zoom img {
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;

	animation: header_fade 1.6s ease-out both,
	           header_zoom_out 8s ease-out both;
}

@keyframes header_zoom_out {
	0%   { transform: scale(1.10); }
	100% { transform: scale(1); }
}

@keyframes header_fade {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#header_zoom img {
		animation: header_fade 1.6s ease-out both;
		transform: none;
	}
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Claim über dem Headerbild  (claim_off = ausgeschaltet)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#header_claim {
	--hc-accent: #5ea389;
}

#header_claim.claim_off {
	display: none;
}

#header_claim.claim_on {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;                 /* unter Navigation (2) und News-Panel (3) */

	display: flex;
	align-items: flex-end;      /* Text sitzt unten */

	/* oben Mindestabstand zur Navigation, unten Freiraum fürs News-Panel */
	padding: 60px 0 60px 0;


	color: #fff;
	pointer-events: none;

	animation: hc_fade_in 1.2s ease-out 0.6s both;
}

/* Verlauf: nur von unten bis etwa Bildmitte */
/* Verlauf: nur von unten bis etwa Bildmitte — Mobile deutlich kräftiger */
#header_claim.claim_on::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72%;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(19, 31, 36, 0.88) 0%,
		rgba(19, 31, 36, 0.68) 35%,
		rgba(19, 31, 36, 0.30) 70%,
		rgba(19, 31, 36, 0.00) 100%
	);
}

@media screen and (min-width:1000px) {
	#header_claim.claim_on::before {
		height: 65%;
		background: linear-gradient(
			to top,
			rgba(19, 31, 36, 0.74) 0%,
			rgba(19, 31, 36, 0.52) 35%,
			rgba(19, 31, 36, 0.18) 72%,
			rgba(19, 31, 36, 0.00) 100%
		);
	}
}

#header_claim .wrap {
	pointer-events: auto;
}

@keyframes hc_fade_in {
	0%   { opacity: 0; transform: translateY(14px); }
	100% { opacity: 1; transform: translateY(0); }
}


/* ---------- Eyebrow ---------- */
#header_claim .hc_eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0 0 14px 0;

	font-size: clamp(0.78rem, 0.72rem + 0.18vw, 0.95rem);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

#header_claim .hc_eyebrow::before {
	content: "";
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--hc-accent);
}


/* ---------- Titel & Lead ---------- */
#header_claim .hc_titel {
	margin: 0 0 16px 0 !important;
	color: #fff !important;

	font-family: 'Inter', Arial, Helvetica, sans-serif;
	font-weight: 800;
	/* skaliert bis 2600px Breite mit, dann Deckel bei 4.6rem */
	font-size: clamp(1.9rem, 0.55rem + 2.55vw, 4.6rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.04em !important;

	max-width: 17ch;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}

#header_claim .hc_lead {
	margin: 0;
	max-width: 50ch;
	font-weight: 300;
	font-size: clamp(0.98rem, 0.82rem + 0.38vw, 1.45rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}


/* ---------- Buttons ---------- */
#header_claim .hc_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(22px, 2vw, 34px);
}

#header_claim a.hc_btn:link,
#header_claim a.hc_btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	padding: clamp(13px, 0.8vw, 17px) clamp(24px, 1.6vw, 32px);
	border-radius: 999px;

	font-size: clamp(0.94rem, 0.86rem + 0.14vw, 1.15rem);
	font-weight: 600;
	text-decoration: none;

	transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

#header_claim .hc_btn svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

#header_claim a.hc_btn_primary:link,
#header_claim a.hc_btn_primary:visited {
	background: var(--hc-accent);
	border: 1px solid var(--hc-accent);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

#header_claim a.hc_btn_primary:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}

#header_claim a.hc_btn_ghost:link,
#header_claim a.hc_btn_ghost:visited {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

#header_claim a.hc_btn_ghost:hover {
	background: #fff;
	border-color: #fff;
	color: #131f24;
	transform: translateY(-2px);
}

#header_claim a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: 999px;
}


/* ---------- Desktop ---------- */
@media screen and (min-width:1000px) {
	#header_claim.claim_on {
	/* padding: 120px 0 140px 0; */
	padding-top:    clamp(100px, 48.9px + 2.844vw, 140px);
	padding-bottom: clamp(100px, 48.9px + 2.844vw, 140px);
	padding-left: 0;
	padding-right: 0;
	}
}



/* ---------- Mobile ---------- */
@media (max-width:520px) {
	#header_claim a.hc_hide_mobile:link,
	#header_claim a.hc_hide_mobile:visited {
		display: none;
	}

	#header_claim .hc_actions .hc_btn {
		flex: 1 1 100%;
	}
}


@media (prefers-reduced-motion: reduce) {
	#header_claim.claim_on {
		animation: none;
	}
	#header_claim a.hc_btn:hover {
		transform: none;
	}
}

/* ---------- Grünes Satz-Punkt-Quadrat ---------- */

.dot {
	display: inline-block;
	width: 0.16em;
	height: 0.16em;
	margin-left: 0.06em;
	vertical-align: baseline;
	background: #5ea389;
	border-radius: 1px;   /* 0 = scharfe Ecken, 50% = Kreis */
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Eyebrow Titel
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.eyebrow-dark{
  display:flex;              /* statt inline-flex – erzwingt eigene Zeile */
  width:fit-content;         /* Strich + Text bleiben zusammen, kein volle Breite */
  align-items:center; gap:10px;
  margin:0px 0px 16px 0px;
  font-size:.8rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:#666
}

.eyebrow-dark::before{
  content:""; width:30px; height:2px; border-radius:2px;
  background:var(--accent);
}

/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// News Panel Startseite
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#news_panel {
	position: relative;
	z-index: 1;

	/* 25px = padding-top von #content, 40px = Überlappung ins Headerbild */
	margin: -65px 10px 30px 10px;

	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 45px -25px rgba(0, 0, 0, 0.45);
	padding: 20px;
}

.news_panel_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 14px;
}

.news_panel_kicker {
	font-family: 'inter', Arial, Helvetica, sans-serif;
  	font-size:0.8rem; 
	font-weight:600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #5ea389;

}

#news_panel a.news_panel_alle:link,
#news_panel a.news_panel_alle:visited {
	font-size: 16px;
	font-weight:600;
	color: #5ea389;
	white-space: nowrap;
	transition: color 0.5s ease;
}

#news_panel a.news_panel_alle:hover {
	color: #4a8a72;
	
}

#news_panel a.news_panel_alle:after {
	content: " \203A";
}

.news_cell_weiterlesen {
	font-size: 1rem;
	color: #6b7275;
	font-size: 0.9rem;
	font-weight: 400;
	color: #5ea389;
}

#news_panel .news_cell_weiterlesen:after {
	content: " \203A";
}

.news_panel_cols {
	display: block;
}

#news_panel a.news_cell:link,
#news_panel a.news_cell:visited {
	display: block;
	color: #212529;
	padding: 16px 0px 16px 0px;
	border-top: solid 1px #eaeaea;
}

#news_panel a.news_cell:first-child {
	border-top: none;
	padding-top: 0px;
}

#news_panel a.news_cell:last-child {
	padding-bottom: 0px;
}

.news_meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.88rem;
	color: #6b7275;
	margin-bottom: 6px;
}

.news_tag {
	font-family: 'inter', Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5ea389;
}

.news_tag_warn {
	color: #a2691f;
}

.news_cell_titel {
	font-family: 'inter', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4em;
	transition: color 0.5s ease;
	
	padding-bottom:10px;
}


#news_panel a.news_cell:hover {
	color: #5ea389;
}

.news_cell_text {
	font-family: 'inter', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.4em;
	transition: color 0.5s ease;

}




@media screen and (min-width:1000px) {

	#news_panel {
		/* 70px = padding-top von #content, 60px = Überlappung ins Headerbild */
		margin: -150px 40px 60px 40px;
		padding: 28px 40px 24px 40px;
		border-radius: 14px;
		box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
	}

	.news_panel_head {
		margin-bottom: 0px;
	}

	.news_panel_cols {
		display: flex;
	}

	#news_panel a.news_cell:link,
	#news_panel a.news_cell:visited {
		flex: 1 1 33%;
		padding: 4px 32px 4px 32px;
		border-top: none;
		border-left: solid 1px #eaeaea;
	}

	#news_panel a.news_cell:first-child {
		padding-left: 0px;
		border-left: none;
	}

	#news_panel a.news_cell:last-child {
		padding-right: 0px;
	}

	.news_cell_titel {
		font-size: 16px;
	}
}



/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Notfall Startseite
//////////////////////////	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* ===================== NOTFALL ===================== */
#notfall {
	scroll-margin-top: 30px;
}

@media screen and (min-width:640px) {
	#notfall {
		scroll-margin-top: 0px;
	}
}

.notfall-band{
  /* ---- HIER FARBEN ANPASSEN ---- */
  --nf-bg:var(--bg-tint);              /* Bandfläche */
  --nf-card:var(--bg);                 /* Kacheln */
  --nf-ink:var(--ink);                 /* Schrift */
  --nf-accent:var(--accent);           /* Hausfarbe */
  --nf-alert:var(--alert);             /* Randstrich beim 144-Hinweis */
  /* ------------------------------- */

  --nf-line:var(--line);
  --nf-soft:var(--ink-soft);
  --nf-mute:rgba(19,31,36,.62);

  padding:var(--band-pad) 0;
  background:var(--nf-bg);
  color:var(--nf-ink);
  border-top:1px solid var(--nf-line);
  box-shadow:var(--edge-light);
}

/* ---------- Kopfbereich ---------- */
.notfall-band .section-head{
  max-width:480px;
  margin-bottom:clamp(32px,4.5vw,32px);
}

.notfall-band h2{
  margin:0 !important;
  color:var(--nf-ink);
  font-size:clamp(1.9rem,3.6vw,2.8rem) !important;
  line-height:1.1 !important;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.notfall-band .section-head p{
  margin-top:16px;
  color:var(--nf-soft);
}

/* ---------- Kacheln ---------- */
.emergency-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.em-card{
  background:var(--nf-card);
  border:1px solid var(--nf-line);
  border-radius:var(--radius);
  padding:40px 28px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.em-card:hover{
  border-color:var(--line-strong);
  box-shadow:0 18px 40px -22px rgba(19,31,36,.25);
}

.em-card .label{
  margin:0 0 12px;
  font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--nf-mute);
}

.notfall-band .em-card a.number,
.notfall-band .em-card a.number:link,
.notfall-band .em-card a.number:visited{
	font-family: 'inter', Arial, Helvetica, sans-serif;
  display:inline-block;
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  font-weight:800; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--nf-ink); text-decoration:none;
  transition:color .2s ease;
}
.notfall-band .em-card a.number:hover{ color:var(--nf-accent); }

.em-card p{
  margin:10px 0 0;
  font-size:0.9rem; line-height:1.6;
  font-weight: 400;
  color:var(--nf-soft);
}

/* ---------- Hinweis 144 ---------- */
.em-note{
  margin:34px 0 0;
  padding-left:18px;
  max-width:62ch;
  font-size:.95rem;
  color:var(--nf-soft);
  border-left:3px solid var(--nf-alert);
}
.notfall-band .em-note a,
.notfall-band .em-note a:link,
.notfall-band .em-note a:visited{
  color:var(--nf-accent); font-weight:600; text-decoration:none;
}
.notfall-band .em-note a:hover{ text-decoration:underline; }

/* ---------- Fokus ---------- */
.notfall-band a:focus-visible{
  outline:3px solid var(--nf-accent); outline-offset:3px; border-radius:6px;
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .emergency-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .em-card{ padding:24px 22px; }
  .em-note{ margin-top:26px; }
}


/* ---------- Hinweis 144 ---------- */
.nf-note{
  display:flex; align-items:center; gap:14px;
  margin:20px 0 0; padding:16px 20px;
  border-radius:16px;
  background:var(--nf-card);
  border:1px solid var(--nf-line);
  color:var(--nf-ink); font-size:1rem; line-height:1.5;
}
.nf-note svg{ flex:none; width:22px; height:22px; color:var(--nf-accent); }
.nf-note a{
  font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--nf-accent);
  transition:border-color .2s ease;
}
.nf-note a:hover{ border-bottom-color:var(--nf-ink); }

/* ---------- Fokus & Motion ---------- */
.notfall-band a:focus-visible{
  outline:3px solid var(--nf-accent); outline-offset:3px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  .nf-dot{ animation:none; }
  .nf-card{ transition:none; }
  .nf-card:hover{ transform:none; }
}

/* ---------- Mobile ---------- */
@media (max-width:520px){
  .nf-card{ padding:22px 20px; }
  .nf-number{ font-size:1.55rem; }
  .nf-note{ align-items:flex-start; padding:15px 17px; font-size:.96rem; }
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Team Startseite
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
/* ===================== TEAM TEASER ===================== */
.band-white{
 --tm-bg:var(--bg);
  --tm-tint:var(--bg-tint);
  --tm-ink:var(--ink);
  --tm-accent:var(--accent);
  --tm-line:var(--line);
  --tm-soft:var(--ink-soft);

   padding:var(--band-pad) 0;
  background:var(--tm-bg);
  color:var(--tm-ink);
  border-top:1px solid var(--tm-line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- Layout ---------- */
.team-teaser{
  display:grid;
  gap:clamp(28px,4vw,60px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .team-teaser{ grid-template-columns:1fr 1fr; }
}

/* ---------- Bild ---------- */
.team-teaser .photo{
  border-radius:22px;
  overflow:hidden;
  background:var(--tm-tint);
}
.team-teaser .photo img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

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

.band-white h2{
  margin:0; color:var(--tm-ink);
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  line-height:1.14; letter-spacing:-.02em;
}
.team-teaser p{
  margin:16px 0 0; max-width:52ch;
  color:var(--tm-soft);
}

/* ---------- Button ---------- */
.band-white .btn-primary,
.band-white .btn-primary:link,
.band-white .btn-primary:visited{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:28px; padding:13px 24px;
  border-radius:999px;
  background:var(--tm-accent); color:#fff;
  font-size:.98rem; font-weight:600; text-decoration:none;
  transition:transform .2s ease, opacity .2s ease;
}
.band-white .btn-primary:hover{ transform:translateY(-2px); opacity:.92; }

/* ---------- Fokus & Motion ---------- */
.band-white a:focus-visible{
  outline:3px solid var(--tm-accent); outline-offset:3px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  .band-white .btn-primary{ transition:none; }
  .band-white .btn-primary:hover{ transform:none; }
}

/* ---------- Mobile ---------- */
@media (max-width:520px){
  .team-teaser .photo{ border-radius:16px; }
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Kontakt Startseite
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.kontakt-band{
	/* ---- HIER FARBEN ANPASSEN ---- */
	--ct-bg:#f4f6f4;                     /* Hintergrund des Bandes */
	--ct-ink:#131f24;                    /* Schriftfarbe */
	--ct-accent:var(--accent);                 /* Akzent für Eyebrow und Button */
	--ct-card:#ffffff;                   /* Fläche des Streifens */
	/* ------------------------------- */

	--ct-line:rgba(19,31,36,.12);
	--ct-soft:rgba(19,31,36,.68);

	padding:clamp(60px,7vw,100px) 0;
	background:var(--ct-bg);
	color:var(--ct-ink);
	border-top:1px solid var(--ct-line);   /* graue Trennlinie */
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- Layout ---------- */
.contact-strip{
  display:grid;
  gap:clamp(24px,3vw,44px);
  grid-template-columns:1fr;
  align-items:center;
  padding:clamp(28px,3.5vw,44px);
  background:var(--ct-card);
  border:1px solid var(--ct-line);
  border-radius:22px;
}
@media (min-width:860px){
  .contact-strip{ grid-template-columns:1fr auto; }
}

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

.kontakt-band h2{
  margin:0; color:var(--ct-ink);
  font-size:clamp(1.6rem,3vw,2.25rem);
  line-height:1.15; letter-spacing:-.02em;
}
.contact-strip p{
  margin:14px 0 0; 
  font-size:1.15rem;
  line-height:1.6;
  color:var(--ct-soft);
}
.ct-status{ margin-top:18px; }

/* ---------- Buttons ---------- */
.contact-strip .actions{
  display:flex; flex-wrap:wrap; gap:12px;
}
.kontakt-band .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px;
  border-radius:999px;
  font-size:.98rem; font-weight:600; text-decoration:none;
  transition:transform .2s ease, opacity .2s ease, background .2s ease, color .2s ease;
}
.kontakt-band .btn-primary,
.kontakt-band .btn-primary:link,
.kontakt-band .btn-primary:visited{
  background:var(--ct-accent); color:#fff;
  border:1px solid var(--ct-accent);
  font-variant-numeric:tabular-nums;
}
.kontakt-band .btn-primary:hover{ transform:translateY(-2px); opacity:.92; }

.kontakt-band .btn-outline,
.kontakt-band .btn-outline:link,
.kontakt-band .btn-outline:visited{
  background:transparent; color:var(--ct-ink);
  border:1px solid var(--ct-line);
}
.kontakt-band .btn-outline:hover{
  border-color:var(--ct-accent); color:var(--ct-accent);
}

/* ---------- Status-Pille ---------- */
.status{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px;
  border-radius:999px;
  font-size:.9rem; font-weight:600;
  background:var(--ct-bg);
  border:1px solid var(--ct-line);
  color:var(--ct-soft);
}
.status .dot{
  width:9px; height:9px; border-radius:50%;
  background:currentColor; flex:none;
}
/* Zustände – werden per JS gesetzt */
.status.is-open{ color:#5ea389; border-color:rgba(28,122,79,.32); }
.status.is-closed{ color:#a2482f; border-color:rgba(162,72,47,.32); }
.status.is-open .dot{
  box-shadow:0 0 0 0 rgba(28,122,79,.5);
  animation:ct-pulse 2.4s ease-out infinite;
}
@keyframes ct-pulse{
  70%{ box-shadow:0 0 0 8px rgba(28,122,79,0); }
  100%{ box-shadow:0 0 0 0 rgba(28,122,79,0); }
}

/* ---------- Fokus & Motion ---------- */
.kontakt-band a:focus-visible{
  outline:3px solid var(--ct-accent); outline-offset:3px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  .kontakt-band .btn{ transition:none; }
  .kontakt-band .btn-primary:hover{ transform:none; }
  .status .dot{ animation:none; }
}

/* ---------- Mobile ---------- */
@media (max-width:520px){
  .contact-strip{ border-radius:16px; padding:24px 20px; }
  .contact-strip .actions .btn{ flex:1 1 100%; }
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Footer
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/




.ft-wave{ color:rgba(19,31,36,.14); }   /* speist currentColor */
.ft-wave .line{ stroke:url(#waveFade); }

/* ===================== FOOTER ===================== */
.site-footer{
	/* ---- HIER FARBEN ANPASSEN ---- */
	--ft-bg:var(--bg-tint);              /* #f4f6f4 – wie die Zwischenbänder */
	--ft-ink:var(--ink);                 /* Haupttext */
	--ft-accent:var(--accent);           /* Hausfarbe für Akzente */
	--ft-card:var(--bg);                 /* weisse Flächen, z. B. Status-Pille */
	/* ------------------------------- */

	--ft-soft:rgba(19,31,36,.72);        /* Nebentext, Links */
	--ft-mute:rgba(19,31,36,.62);        /* Rubriktitel, Copyright */
	--ft-line:rgba(19,31,36,.14);        /* Trennlinien */

	padding:clamp(48px,6vw,76px) 0 0;
	background:var(--ft-bg);
	color:var(--ft-ink);
	font-size:.95rem;
	line-height:1.6;

	border-top:1px solid var(--ft-line);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}


/* ---------- Raster ---------- */
.ft-grid{
  display:grid;
  gap:clamp(28px,4vw,44px);
  grid-template-columns:1fr;
  padding-bottom:clamp(32px,4vw,48px);
}
@media (min-width:640px){
  .ft-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .ft-grid{ grid-template-columns:1.4fr 1fr 1.15fr .95fr; }
}

.ft-hours{ max-width:22em; }


.ft-col h3{
  margin:0 0 16px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--accent);
}

/*
.ft-col h3:hover{
  color:var(--ft-accent);
}
  */

/* ---------- Marke & Anschrift ---------- */
.ft-brand{
  display:inline-block;
  margin-bottom:10px;
  text-decoration:none; color:var(--ft-ink);
}

.img_logo_footer {
	width:200px;

	filter:
		drop-shadow(1px 0 0 #fff)
		drop-shadow(-1px 0 0 #fff)
		drop-shadow(0 1px 0 #fff)
		drop-shadow(0 -1px 0 #fff);
}

/*
.ft-brand .over{
  display:block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ft-mute);
  margin-bottom:4px;
}
*/
.ft-brand .name{
  display:block;
  font-size:1.35rem; font-weight:700; letter-spacing:-.02em;
}
.ft-brand .name i{ font-style:normal; color:var(--ft-accent); }

.site-footer address{
  font-style:normal;
  color:var(--ft-soft);
}
.ft-status{ margin:18px 0 0; }

/* ---------- Linklisten ---------- */
.ft-links{ list-style:none; margin:0; padding:0; }
.ft-links li + li{ margin-top:4px; }

.site-footer a,
.site-footer a:link,
.site-footer a:visited{
  color:var(--ft-soft);
  text-decoration:none;
  transition:color .2s ease;
}
.site-footer a:hover{ color:var(--ft-accent); }

/* Telefonnummer wie normale Links */
.ft-phone{ font-variant-numeric:tabular-nums; }

/* Links mit Icon */
.ft-links a{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.ft-links a svg{
  width:16px; height:16px;
  flex:none;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.75;
}
.ft-links a:hover svg{ opacity:1; }



.ft-hint{
  margin:16px 0 0;
  font-size:.88rem;
  color:var(--ft-mute);
}

/* ---------- Telefonzeiten ---------- */
.ft-hours{ margin:0; }
.ft-hours > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--ft-line);
}
.ft-hours > div:first-child{ border-top:1px solid var(--ft-line); }
.ft-hours dt{ color:var(--ft-mute); white-space:nowrap; }
.ft-hours dd{
  margin:0; text-align:right;
  color:var(--ft-soft);
  font-variant-numeric:tabular-nums;
}

/* ---------- Status-Pille auf hellem Grund ---------- */
.site-footer .status{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 11px;
  border-radius:999px;
  font-size:.87rem; font-weight:600;
  background:var(--ft-card);
  border:1px solid var(--ft-line);
  color:var(--ft-soft);
}
.site-footer .status .dot{
  width:8px; height:8px; border-radius:50%;
  background:currentColor; flex:none;
}
.site-footer .status.is-open{ color:var(--ok); border-color:rgba(28,122,79,.34); }
.site-footer .status.is-closed{ color:var(--alert); border-color:rgba(162,72,47,.34); }

/* ---------- Rechtliches ---------- */
.ft-base{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px 24px;
  padding:20px 0 24px;
  border-top:1px solid var(--ft-line);
  font-size:.86rem;
  color:var(--ft-mute);
}
.ft-legal{ display:flex; gap:22px; }
.site-footer .ft-legal a,
.site-footer .ft-legal a:link,
.site-footer .ft-legal a:visited{ color:var(--ft-mute); }
.site-footer .ft-legal a:hover{ color:var(--ft-accent); }

/* ---------- Fokus ---------- */
.site-footer a:focus-visible{
  outline:3px solid var(--ft-accent);
  outline-offset:3px; border-radius:6px;
}

/* ---------- Mobile ---------- */
@media (max-width:520px){
  .ft-base{ flex-direction:column; align-items:flex-start; }
  .ft-hours > div{ flex-direction:column; gap:2px; }
  .ft-hours dd{ text-align:left; }
}





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Weisser Zwischenblock
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
 
.spacer-white{
  background:var(--bg);
  border-top:1px solid var(--line);
  height:clamp(48px,6vw,80px);
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Seitenkopf Unterseiten
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


.page-hero {


	--ph-bg: #16242b;
	--ph-accent: #5ea389;

	
	/*
	Blau:
	--ph-bg: #2c4a58;
	*/
	
	/*
	Grün
	--ph-bg:#073835;
	*/



	/* Mobile: 60px Navigationshöhe + eigener Abstand */
	padding: calc(60px + clamp(36px, 6vw, 60px)) 0 clamp(48px, 6vw, 80px);
	background: var(--ph-bg);
	color: #fff;
}

@media screen and (min-width:1000px) {
	.page-hero {
		/* Desktop: 120px Navigationshöhe (shrink_off) + eigener Abstand */
		padding-top: calc(120px + clamp(48px, 6vw, 88px));
	}
}


.page-hero .eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0 0 16px;

	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.page-hero .eyebrow::before {
	content: "";
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--ph-accent);
}

.page-hero h1 {
	margin: 0 0 18px !important;
	max-width: 20ch;

	font-family: 'Inter', Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3.2rem) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.04em !important;
	color: #fff !important;
	text-wrap: balance;
}

.page-hero h1 .dot {
	background: var(--ph-accent);
}

.page-hero p {
	margin: 0;
	max-width: 75ch;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.page-hero a.ph-tel:link,
.page-hero a.ph-tel:visited {
	color: #8fd0b6;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.page-hero a.ph-tel:hover {
	color: #fff;
}
/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Angebot Kacheln
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.angebot-band {
	/* ---- HIER FARBEN ANPASSEN ---- */
	--ag-bg: var(--bg-tint);             /* Bandfläche: hellgrau */
	--ag-card: #ffffff;                  /* Kacheln: weiss */
	--ag-tint: #e6f0ee;                  /* Icon-Fläche: grün getönt */
	--ag-accent: #5ea389;                /* Icons, Button */
	/* ------------------------------- */

	--ag-ink: var(--ink);
	--ag-soft: var(--ink-soft);
	--ag-line: var(--line);

	padding: var(--band-pad) 0;
	background: var(--ag-bg);
	color: var(--ag-ink);


}

/* ---------- Raster ---------- */
.services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

@media (max-width:960px) {
	.services { grid-template-columns: 1fr 1fr; }
}

@media (max-width:620px) {
	.services { grid-template-columns: 1fr; }
}

/* ---------- Kachel ---------- */
.service {
	background: var(--ag-card);
	border: 1px solid var(--ag-line);
	border-radius: var(--radius);
	padding: 28px 26px 26px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(22, 36, 43, .25);
	border-color: #cfe0dc;
}

/* ---------- Icon ---------- */
.service .ic {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--ag-tint);
	color: var(--ag-accent);
}

.service .ic svg {
	width: 22px;
	height: 22px;
}

/* ---------- Text ---------- */
.angebot-band .service h3 {
	margin: 16px 0 8px !important;
	font-size: 1.06rem !important;
	font-weight: 600;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
	color: var(--ag-ink);
}

.service p {
	margin: 0;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ag-soft);
}

.service p + p {
	margin-top: 10px;
}


/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce) {
	.service { transition: none; }
	.service:hover { transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width:520px) {
	.service { padding: 24px 22px; }
}



/* ---------- Listen in den Angebotskacheln ---------- */
#content .service ul,
#content .service ol {
	margin: 10px 0 0;
	padding-left: 0;
	padding-bottom: 0;
	list-style: none;
}

#content .service li {
	position: relative;
	padding: 0 0 0 18px;
	margin-bottom: 4px;

	font-size: .9rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ag-soft);
}

#content .service li:last-child {
	margin-bottom: 0;
}

#content .service li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;

	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ag-accent);
}

/* Angebot Links */

.service a:link,
.service a:visited {
	color: var(--ag-accent);
	font-weight: 600;
	text-underline-offset: 2px;
}

.service a::before {
	content: "\203A";
	margin-right: .35em;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1;
	position: relative;
	top: 0px;
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Fragen-Block (weisses Band, seitenübergreifend)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.ag-fragen {
	display: grid;
	gap: clamp(20px, 2.6vw, 36px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width:860px) {
	.ag-fragen { grid-template-columns: 1fr auto; }
}

.ag-fragen h2 {
	margin: 0 !important;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -.02em !important;
	color: var(--ink);
}

.ag-fragen p {
	margin: 12px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.ag-fragen .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width:520px) {
	.ag-fragen .actions .btn { flex: 1 1 100%; }
}








/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Fragen zum Angebot (weisser Trennbereich)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.fragen-band {
	--fr-accent: var(--accent);
	--fr-line: var(--line);
	--fr-soft: var(--ink-soft);

	padding: clamp(56px, 6.5vw, 90px) 0;
	background: var(--bg);

		border-top: 1px solid var(--line);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.fragen-band .contact-strip {
	display: grid;
	gap: clamp(20px, 2.6vw, 36px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width:860px) {
	.fragen-band .contact-strip { grid-template-columns: 1fr auto; }
}

.fragen-band h2 {
	margin: 0 !important;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -.02em !important;
	color: var(--ink);
}

.fragen-band p {
	margin: 12px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fr-soft);
}

.fragen-band .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fragen-band .btn-primary,
.fragen-band .btn-primary:link,
.fragen-band .btn-primary:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: 999px;

	background: var(--fr-accent);
	border: 1px solid var(--fr-accent);
	color: #fff;

	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;

	transition: transform .2s ease, opacity .2s ease;
}

.fragen-band .btn-primary:hover {
	transform: translateY(-2px);
	opacity: .92;
}

.fragen-band a:focus-visible {
	outline: 3px solid var(--fr-accent);
	outline-offset: 3px;
	border-radius: 999px;
}

@media (prefers-reduced-motion:reduce) {
	.fragen-band .btn-primary { transition: none; }
	.fragen-band .btn-primary:hover { transform: none; }
}

@media (max-width:520px) {
	.fragen-band .actions .btn { flex: 1 1 100%; }
}















/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Team: Bandkopf-Bausteine (mehrfach genutzt)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.tm-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0 0 14px;

	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent);
}

.tm-kicker::before {
	content: "";
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.tm-intro-head .eyebrow-dark,
.tm-mpa-head .eyebrow-dark {
	margin-bottom: 26px;
}

/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Team: Kopf + Gruppenfoto
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.tm-intro {
	background: var(--bg);
	padding: clamp(10px, 6.5vw, 20px) 0 clamp(30px, 5vw, 50px);
}

.tm-intro-head {
	max-width: 640px;
	margin-bottom: clamp(32px, 4vw, 52px);
}

.tm-intro .tm-intro-head h2 {
	margin: 0 0 14px !important;
	font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.03em !important;
	color: var(--ink);
}

.tm-intro-head p {
	margin: 0;
	line-height: 1.65;
	color: var(--ink-soft);
}

.tm-gruppenfoto {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 30px 70px -34px rgba(19, 31, 36, .45);
}

.tm-gruppenfoto img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 30%;
}





/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Team: Ärzte
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.tm-aerzte {
	background: var(--bg);
	padding: 0 0 var(--band-pad);
}

.tm-docs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 900px) {
	.tm-docs { grid-template-columns: 1fr; }
}

/* ---------- Karte ---------- */
.tm-doc {
	background: #f6f7f5;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;

	scroll-margin-top: 140px;   /* Anker unter der fixierten Navigation */
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tm-doc:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(22, 36, 43, .25);
	border-color: #cfe0dc;
}

/* ---------- Portrait ---------- */
.tm-portrait {
	margin: 0;
}

.tm-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 20%;
}

/* ---------- Text ---------- */
.tm-doc-body {
	padding: 26px 26px 28px;
}

.tm-aerzte .tm-doc h3 {
	margin: 0 0 2px !important;
	font-size: 1.14rem !important;
	font-weight: 700;
	line-height: 1.3 !important;
	letter-spacing: -.02em !important;
	color: var(--ink);
}

.tm-role,
.tm-mpa .tm-card-body p.tm-role {
	margin: 0 0 14px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}

.tm-doc-body p:last-child {
	margin: 0;
	font-size: .92rem;
	line-height: 1.65;
	color: var(--ink-soft);
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Team: MPA-Karten
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.tm-mpa {
	background: var(--bg-tint);
	padding: var(--band-pad) 0;
	border-top: 1px solid var(--line);
	scroll-margin-top: 140px;
}

.tm-mpa-head {
	max-width: 640px;
	margin-bottom: clamp(36px, 4.5vw, 56px);
}

.tm-mpa .tm-mpa-head h2 {
	margin: 0 0 14px !important;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.03em !important;
	color: var(--ink);
}

.tm-mpa-head p {
	margin: 0;
	line-height: 1.65;
	color: var(--ink-soft);
}

/* ---------- Raster ---------- */
.tm-mpa-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 960px) {
	.tm-mpa-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.tm-mpa-grid { grid-template-columns: 1fr; }
}

/* ---------- Karte ---------- */
.tm-card {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.tm-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -24px rgba(19, 31, 36, .3);
}

.tm-card figure {
	margin: 0;
}

.tm-card figure img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 20%;
}

/* Platzhalter ohne Foto: Initialen auf Tonfläche */
.tm-card .tm-ph {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	background: rgba(94, 163, 137, .12);
}

.tm-card .tm-ph span {
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--accent);
}

/* ---------- Kartentext ---------- */
.tm-card-body {
	padding: 20px 22px 24px;
}

.tm-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: 999px;

	background: var(--accent);
	color: #fff;

	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tm-mpa .tm-card h3 {
	margin: 0 0 8px !important;
	font-size: 1.08rem !important;
	font-weight: 700;
	letter-spacing: -.01em !important;
	color: var(--ink);
}

.tm-card-body p {
	margin: 0 0 4px;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--ink-soft);
}


.tm-namensbild {
	display: block;
	width: auto;
	height: 1.3em;          /* skaliert mit der h3-Schriftgrösse */
	max-width: 100%;
	margin-bottom:8px;
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Team: Fragen-Streifen
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.tm-fragen {
	background: var(--bg);
	padding: clamp(56px, 6.5vw, 90px) 0 20px;
	border-top: 1px solid var(--line);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.tm-fragen-strip {
	display: grid;
	gap: clamp(20px, 2.6vw, 36px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 860px) {
	.tm-fragen-strip { grid-template-columns: 1fr auto; }
}

.tm-fragen h2 {
	margin: 0 !important;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -.02em !important;
	color: var(--ink);
}

.tm-fragen p {
	margin: 12px 0 0;
	line-height: 1.6;
	color: var(--ink-soft);
}


/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.tm-doc,
	.tm-card { transition: none; }
	.tm-doc:hover,
	.tm-card:hover { transform: none; }
}




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// News Übersicht
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* ---------- News-Band ---------- */
.news-band {
	background: var(--bg-tint);
	padding: var(--band-pad) 0;
}

/* ---------- Hervorgehobener Beitrag ---------- */
.news-featured {
	display: grid;
	grid-template-columns: 1.1fr .9fr;

	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 24px;
	overflow: hidden;

	margin-bottom: clamp(36px, 4.5vw, 56px);
	box-shadow: 0 24px 60px -34px rgba(22, 36, 43, .3);
}

/* Beitrag ohne Bild füllt die ganze Breite */
.news-featured.no-media {
	grid-template-columns: 1fr;
}


.news-featured .media {
	position: relative;
	min-height: 340px;
}

.news-featured .media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* ---------- Bild im hervorgehobenen Beitrag: sanfter Zoom-Out ---------- */

/*
.news-featured .media {
	overflow: hidden;
	transform: translateZ(0);  
}

.news-featured .media img {
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	transform: scale(1.01);

	animation: nf_fade 1.6s ease-out both,
	           nf_zoom_out 2s ease-out both;
}

@keyframes nf_zoom_out {
	0%   { transform: scale3d(1.10, 1.10, 1); }
	100% { transform: scale3d(1.01, 1.01, 1); }
}
*/



.news-featured .body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 46px 48px;
}

.news-featured h2 {
	margin: 14px 0 14px !important;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
	line-height: 1.18 !important;
	letter-spacing: -.03em !important;
	color: var(--ink);
}

.news-featured p {
	margin: 0;
	line-height: 1.65;
	color: var(--ink-soft);
}

.news-featured .news-featured-action {
	margin-top: 22px;
}


/* ---------- Datum ---------- */
.news-meta {
	display: flex;
	align-items: center;
	gap: 12px;

	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ink-soft);
}


/* ---------- Kachelraster ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.news-card {
	display: flex;
	flex-direction: column;
	gap: 14px;

	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px 30px;

	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(22, 36, 43, .25);
	border-color: #cfe0dc;
}

.news-card h3 {
	margin: 0 !important;
	font-size: 1.12rem !important;
	font-weight: 600;
	line-height: 1.3 !important;
	letter-spacing: -.012em !important;
	color: var(--ink);
}

.news-card p {
	margin: 0;
	flex: 1;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* ---------- Weiterlesen-Link ---------- */
a.more:link,
a.more:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	font-size: .88rem;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
}

a.more:hover {
	color: #4a8a72;
}

.more svg {
	transition: transform .2s ease;
}

.news-card:hover .more svg,
.news-featured .more:hover svg {
	transform: translateX(4px);
}

/* Abstand im hervorgehobenen Beitrag */
.news-featured a.more {
	margin-top: 22px;
	align-self: flex-start;
}


/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.news-card,
	.news-card .more svg { transition: none; }
	.news-card:hover { transform: none; }
	.news-card:hover .more svg { transform: none; }
}


/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.news-grid { grid-template-columns: 1fr 1fr; }
	.news-featured { grid-template-columns: 1fr; }
	.news-featured .media { min-height: 260px; }
}

@media (max-width: 620px) {
	.news-grid { grid-template-columns: 1fr; }
	.news-featured .body { padding: 34px 30px; }
	.news-card { padding: 26px 24px; }
}




/* ---------- Textkörper aus dem CMS ---------- */
.news-text {
	line-height: 1.65;
	color: var(--ink-soft);
}

.news-text p {
	margin: 0 0 12px;
}

.news-text p:last-child {
	margin-bottom: 0;
}

.news-text ul,
.news-text ol {
	margin: 0 0 12px;
	padding-left: 22px;
}

.news-text li {
	margin-bottom: 4px;
}

.news-text a:link,
.news-text a:visited {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.news-text strong,
.news-text b {
	font-weight: 600;
	color: var(--ink);
}

/* Kachel: Text auf sechs Zeilen begrenzen */
.news-text-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
	font-size: .92rem;
}

/* Hervorgehobener Beitrag: Text auf zehn Zeilen begrenzen */
.news-text-clamp-lg {
	display: -webkit-box;
	-webkit-line-clamp: 10;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-featured .news-text {
	font-size: 1.05rem;
}

/* Fragen Padding fix */
.fragen-band .ag-fragen {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// News Detailseite
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.nd-band {
	background: var(--bg);
	padding: var(--band-pad) 0;
	
}

/* Textbreite begrenzen, damit die Zeilen lesbar bleiben */
.nd-artikel {
	max-width: 68ch;
}

/* ---------- Kopf des Beitrags ---------- */
.nd-kopf {
	margin-bottom: clamp(28px, 3.5vw, 44px);
	padding-bottom: clamp(24px, 3vw, 32px);
	border-bottom: 1px solid var(--line);
}

.nd-datum {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0 0 14px;

	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}

.nd-datum::before {
	content: "";
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.nd-band .nd-kopf h2 {
	margin: 0 !important;
	font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.03em !important;
	color: var(--ink);
	text-wrap: balance;
}

/* ---------- Beitragsbild ---------- */
/*
.nd-bild {
	margin: 0 0 clamp(28px, 3.5vw, 44px);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 24px 55px -32px rgba(19, 31, 36, .4);
}

.nd-bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
	*/

.nd-bild {
	display: table;                 /* schrumpft auf die Bildbreite */
	margin: 0 0 clamp(28px, 3.5vw, 44px);
	max-width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 24px 55px -32px rgba(19, 31, 36, .4);
}

.nd-bild img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 30vh;
}

@media (max-width: 700px) {
	.nd-bild {
		display: block;
		width: 100%;
	}

	.nd-bild img {
		width: 100%;
		max-height: none;
	}
}

/* ---------- Textkörper aus dem CMS ---------- */
.nd-text {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--ink-soft);
}

.nd-text p {
	margin: 0 0 18px;
}

.nd-text p:last-child {
	margin-bottom: 0;
}

.nd-band .nd-text h2 {
	margin: 36px 0 12px !important;
	font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
	line-height: 1.3 !important;
	letter-spacing: -.02em !important;
	color: var(--ink);
}

.nd-band .nd-text h3 {
	margin: 28px 0 10px !important;
	font-size: 1.08rem !important;
	font-weight: 700;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
	color: var(--ink);
}

.nd-text ul,
.nd-text ol {
	margin: 0 0 18px;
	padding-left: 24px;
}

.nd-text li {
	margin-bottom: 8px;
}

.nd-text a:link,
.nd-text a:visited {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.nd-text a:hover {
	color: #3f7a68;
}

.nd-text strong,
.nd-text b {
	font-weight: 600;
	color: var(--ink);
}

.nd-text img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 28px 0;
	border-radius: var(--radius-sm);
}

.nd-text blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--accent);
	font-style: normal;
	color: var(--ink);
}

/* ---------- Zurück-Link ---------- */
.nd-artikel a.nd-zurueck:link,
.nd-artikel a.nd-zurueck:visited {
	margin-top: clamp(36px, 4vw, 52px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--line);
	width: 100%;
}

.nd-zurueck svg {
	transition: transform .2s ease;
}

.nd-artikel a.nd-zurueck:hover svg {
	transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.nd-zurueck svg { transition: none; }
	.nd-artikel a.nd-zurueck:hover svg { transform: none; }
}

.nd-artikel a.nd-datei:link,
.nd-artikel a.nd-datei:visited {
	margin-top: clamp(28px, 3vw, 36px);
}


/* ---------- Mobile ---------- */
@media (max-width: 520px) {
	.nd-text { font-size: .98rem; }
}



/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Kontakt Inhalt
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.kontakt-inhalt {
	/* ---- HIER FARBEN ANPASSEN ---- */
	--ko-bg: var(--bg-tint);             /* Bandfläche: hellgrau */
	--ko-card: #ffffff;                  /* Karten: weiss */
	--ko-accent: var(--accent);
	/* ------------------------------- */

	--ko-ink: var(--ink);
	--ko-soft: var(--ink-soft);
	--ko-line: var(--line);

	padding: var(--band-pad) 0;
	background: var(--ko-bg);
	color: var(--ko-ink);
	border-bottom: 1px solid var(--ko-line);
}

/* ---------- Raster ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

@media (max-width: 900px) {
	.contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Karte ---------- */
.contact-card {
	background: var(--ko-card);
	border: 1px solid var(--ko-line);
	border-radius: var(--radius);
	padding: 38px;
}

.kontakt-inhalt .contact-card h3 {
	margin: 0 0 22px !important;
	font-size: 1.15rem !important;
	font-weight: 700;
	line-height: 1.3 !important;
	letter-spacing: -.01em !important;
	color: var(--ko-ink);
}

/* ---------- Adresse ---------- */
.address p {
	margin: 0 0 24px;
	line-height: 1.7;
	color: var(--ko-soft);
}

.address p strong {
	font-weight: 600;
	color: var(--ko-ink);
}

.kontakt-inhalt a.big-tel:link,
.kontakt-inhalt a.big-tel:visited {
	display: inline-flex;
	margin-bottom: 26px;

	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--ko-accent);
	text-decoration: none;

	transition: color .2s ease;
}

.kontakt-inhalt a.big-tel:hover {
	color: #3f7a68;
}

.address-hinweis {
	margin-bottom: 0 !important;
	font-size: .9rem;
}

/* ---------- Öffnungszeiten ---------- */
table.hours {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}

table.hours td {
	padding: 11px 0;
	border-bottom: 1px solid var(--ko-line);
	color: var(--ko-soft);
	font-variant-numeric: tabular-nums;
}

table.hours td:first-child {
	width: 34%;
	font-weight: 600;
	color: var(--ko-ink);
}

table.hours tr:last-child td {
	border-bottom: none;
}

/* Heutiger Tag – wird per JS gesetzt */
table.hours tr.today td {
	color: var(--ko-accent);
}

table.hours tr.today td:first-child {
	color: var(--ko-accent);
	font-weight: 700;
}

.hours-note {
	display: flex;
	gap: 9px;
	align-items: flex-start;

	margin: 20px 0 0;
	font-size: .87rem;
	line-height: 1.55;
	color: var(--ko-soft);
}

.hours-note svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--ko-accent);
}

/* ---------- Karte (Google Maps) ---------- */
.map {
	grid-column: 1 / -1;
	aspect-ratio: 21 / 9;
	max-height: 560px;

	border: 1px solid var(--ko-line);
	border-radius: var(--radius);
	overflow: hidden;
}

.map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: saturate(.85);
}

/* ---------- Fokus ---------- */
.kontakt-inhalt a:focus-visible {
	outline: 3px solid var(--ko-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
	.contact-card { padding: 26px 24px; }
	.map { aspect-ratio: 4 / 3; max-height: none; }

	table.hours { font-size: .88rem; }
	table.hours td:first-child { width: 30%; }
}



.ko-formular {
	margin-top: 24px;
}

@media (max-width: 520px) {
	.ko-formular {
		width: 100%;
	}
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Anreise (weisses Band)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.anreise-band {
	padding: var(--band-pad) 0;
	background: var(--bg);
}

.anreise-head {
	max-width: 640px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.anreise-band .anreise-head h2 {
	margin: 0 !important;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.03em !important;
	color: var(--ink);
}

.anreise-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 44px);
}

@media (max-width: 860px) {
	.anreise-grid { grid-template-columns: 1fr; }
}

.anreise-band .anreise-item h3 {
	margin: 0 0 10px !important;
	padding-top: 18px;
	border-top: 2px solid var(--accent);

	font-size: 1.02rem !important;
	font-weight: 700;
	letter-spacing: -.01em !important;
	color: var(--ink);
}

.anreise-item p {
	margin: 0;
	font-size: .93rem;
	line-height: 1.65;
	color: var(--ink-soft);
}



/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Kontaktformular
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


#div_kontaktieren_sie_uns {
	display:none;
	text-align: left;
	border-radius:10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	padding:20px;
}


#kontakt_button {
	display: inline-block;
	font-family:'inter_light', Arial, Helvetica, sans-serif;
    padding: 0px 25px 0px 25px;
	border: none;
	
    font-size: 14px;
	line-height: 3em;


    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    
	/*
	background-color: #ad8c68;
	border-color: #ad8c68;
	*/

	background-color: #67b3de;
	border-color: #67b3de;

	text-decoration: none; 
	border-radius: 5px;
}




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Startseiten-Meldung (Overlay)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.sm-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: clamp(16px, 4vw, 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sm-overlay[hidden] {
	display: none;
}

/* ---------- Abdunkelung ---------- */
.sm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(19, 31, 36, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);

	animation: sm_backdrop_in .3s ease-out both;
}

@keyframes sm_backdrop_in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* ---------- Panel ---------- */
.sm-panel {
	position: relative;
	z-index: 1;

	display: grid;
	grid-template-columns: 1fr 1fr;

	width: 100%;
	max-width: min(60vw, 1100px);
	margin: auto;

	background: var(--bg);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 40px 90px -40px rgba(19, 31, 36, .7);

	animation: sm_panel_in .35s cubic-bezier(.2, .8, .3, 1) both .05s;
}

.sm-panel.sm-no-media {
	grid-template-columns: 1fr;
	max-width: min(60vw, 760px);
}

@keyframes sm_panel_in {
	0%   { opacity: 0; transform: translateY(18px) scale(.97); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Bild ---------- */
.sm-media {
	position: relative;
	min-height: 320px;
	background: var(--bg-tint);
}

.sm-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Schliessen ---------- */
.sm-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;

	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;

	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	cursor: pointer;

	box-shadow: 0 4px 14px -4px rgba(19, 31, 36, .4);
	transition: background .2s ease, transform .2s ease;
}

.sm-close:hover {
	background: #fff;
	transform: scale(1.06);
}

.sm-close:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* ---------- Inhalt ---------- */
.sm-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(30px, 4vw, 48px);
}

.sm-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0 0 14px;

	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent);
}

.sm-kicker::before {
	content: "";
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.sm-datum {
	margin: 0 0 8px;
	font-size: .86rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}

.sm-panel h2 {
	margin: 0 0 16px !important;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -.03em !important;
	color: var(--ink);
	text-wrap: balance;
}

.sm-text {
	font-size: .98rem;
	line-height: 1.7;
	color: var(--ink-soft);

	max-height: 55vh;
	overflow-y: auto;
}

.sm-text p {
	margin: 0 0 14px;
}

.sm-text p:last-child {
	margin-bottom: 0;
}

.sm-text a:link,
.sm-text a:visited {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Aktionen ---------- */
.sm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: clamp(24px, 3vw, 32px);
}

.sm-weiter {
	width: 100%;
	padding: 14px 26px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-pill);
	background: var(--accent);

	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;

	transition: transform .2s ease, opacity .2s ease;
}

.sm-weiter:hover {
	transform: translateY(-2px);
	opacity: .92;
}

.sm-weiter:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
	.sm-weiter { transition: none; }
	.sm-weiter:hover { transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {

	.sm-overlay {
		align-items: center;
		padding: 12px;
	}

	.sm-panel,
	.sm-panel.sm-no-media {
		grid-template-columns: 1fr;
		max-width: none;
		margin: auto;
		border-radius: 20px;

		max-height: 92vh;
		overflow-y: auto;
	}

	.sm-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.sm-media img {
		position: relative;
		inset: auto;
	}

	.sm-text {
		max-height: none;
		overflow: visible;
	}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.sm-backdrop,
	.sm-panel { animation: none; }
	.sm-close { transition: none; }
	.sm-close:hover { transform: none; }
}

.sm-logo {
	display: block;
	width: 320px;
	max-width: 60%;
	height: auto;
	margin: 0 0 clamp(20px, 2.5vw, 28px);
}

@media (max-width: 760px) {
	.sm-logo {
		width: 260px;
	}
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Google Maps
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


#adresse {
	margin-bottom:20px;
}

#googlemap {
	width:100%;
	height:320px;
}


@media screen and (min-width:640px) {
	
	#flex_adresse_googlemap {
		display:flex;	
		width:100%;
		
	}
	
	#adresse {
		width:320px;
		
	}
	
	
	#googlemap {
		width:100%;
		height:500px;
	}

}




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Navigation
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#div_burger_icon_wrapper {
	position:absolute;
	top:10px;
	right:10px;	
	/* border:solid 1px #666; */
	border-radius:4px;
	padding-top:9px;
	padding-left:10px;
	padding-right:10px;	
	height:40px;
}

#div_burger_icon {
	display:block;
    border-bottom: 12px double#999;
    border-top: 4px solid #999;
	border-radius:2px;
    height: 20px;
    width: 32px;
}

@media screen and (min-width:1000px) {
	#div_burger_icon_wrapper {
		display:none;	
	}
}


#navigation {
	margin:0 auto;
	transition: 0.5s;
	/* background-color: #e41; */
}

@media screen and (min-width:1000px) {
	#navigation {
		float:right;
	}
}

#navigation ul {
	list-style-type:none;
	z-index:1;
	width:100%;
	
	
}

#navigation1 {
	display:none;
}
	
#ul_navigation_1 {
	display:none;
}

#mobile-menu-icon {
	position:absolute;
	top:17px;
	right:17px;	
}

@media screen and (min-width:1000px) {
	#navigation ul {
		width:auto;
		display:inline-block;
		padding-top:0px;
		background-color:transparent;
		/* background-color: #e4f; */
	}
	
	#mobile-menu-icon {
		display:none;	
	}
}




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Navigation Ebene1
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#navigation .ul_ebene_1 {
	font-family:'inter', Arial, Helvetica, sans-serif;
	font-weight: 400;
	list-style-type:none;
	/* text-transform:uppercase; */
	text-align:right;
	height:2000px;
	background-color: #fff;
}

#navigation .li_ebene_1 {
	border-bottom:solid 1px #eaeaea;
	text-align:left;
	line-height:0px;
}

@media screen and (min-width:1000px) {

	#navigation .ul_ebene_1 {
		height:auto;	
		background-color:transparent;
	}
	
	#navigation .li_ebene_1 {
		float:left;
		position:relative;
		
		border-bottom:none;
	}
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
@media screen and (min-width:1000px) {
	#navigation .a_ebene_1:before {
		top: 0px;
		left: 20px;
		transform: translateY(10px); 
	}
	#navigation .a_ebene_1:after {
		bottom: 0px;
		right: 20px;
		transform: translateY(-10px); 
	}

	#navigation .a_ebene_1:hover:before, #navigation .a_ebene_1:hover:after {
		opacity: 1;
		width: 74%;
		// transform: translateY(0px);
	}

	#navigation .a_ebene_1:before,
	#navigation .a_ebene_1:after {
		position: absolute;
		opacity: 0;
		width: 0px;
		height: 2px;
		content: "";
		background: #00b1ec;
		-webkit-transition: all .3s;
		-o-transition: all .3s;
		transition: all .3s;
	}
}
*/


#navigation .a_ebene_1:link,
#navigation .a_ebene_1:visited {
	display:block;
	
	line-height:60px;
	color:#444;
	
	font-size:18px;
	
	padding-left:20px;
	padding-right:20px;

	transition: color 0.5s ease;
}

#navigation .a_ebene_1:hover {
	z-index:100;	
	color:#5ea389;
	text-decoration: none;
	transition: color 0.5s ease;
}

#navigation .a_ebene_1_active:link,
#navigation .a_ebene_1_active:visited,
#navigation .a_ebene_1_active:hover {
	color:#5ea389;
	z-index:100;
	transition: color 0.5s ease;
}


@media screen and (min-width:1000px) {


	#navigation .a_ebene_1 {
		padding-top:10px;
		padding-bottom:10px;
	}

	#navigation .a_ebene_1:link,
	#navigation .a_ebene_1:visited {
		
		transition: 0.5s;
		
		padding-left:calc(1vw);
		padding-right:calc(1vw);
	}

	#navigation.shrink_off .a_ebene_1:link {
		line-height:100px;
	}

	#navigation.shrink_on .a_ebene_1:link {
		line-height:40px;
	}
	
	
	#navigation .a_ebene_1:hover {
		color:#5ea389;
		/* text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; */
	}
	
	#navigation .a_ebene_1_active:link,
	#navigation .a_ebene_1_active:visited,
	#navigation .a_ebene_1_active:hover {
		color:#5ea389;
		/* text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; */ 
	}
}

/* Breite fix */
@media screen and (min-width:2000px) {

	#navigation .a_ebene_1:link,
	#navigation .a_ebene_1:visited {
		
		transition: 0.5s;
		padding-left:20px;
		padding-right:20px;

	}
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Navigation Ebene2
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#navigation .ul_ebene_2 {
		
	font-family:'inter', Arial, Helvetica, sans-serif;
	
	/* border-bottom:solid 1px #eee; */
	
	
}


@media screen and (min-width:1000px) {
	
	#navigation .ul_ebene_2 {
		position:absolute;
		z-index:500;
		left:22px;
		display:none;
		width:260px;
		
		margin-left:-20px;
		
		background-color:rgba(255,255,255,1);
		box-shadow: 10px 10px 12px rgba(136, 136, 136, 0.26); 
		padding-bottom:6px;
	}

	#navigation .ul_ebene_2.shrink_off {
		top:90px;
	}

	#navigation .ul_ebene_2.shrink_on {
		top:60px;
	}

	/*
	#navigation .ul_ebene_2:before {
		content: "";
		height: 7px;
		width: 100%;
		position: absolute;
		top: -7px;
		background: inherit;
		z-index: 2;
	  }
*/

	
}


#navigation .li_ebene_2 {
	border-top:solid 1px #eaeaea;
	background-color:#fff;
}

@media screen and (min-width:1000px) {
	
	#navigation .li_ebene_2 {
	
		float:none;
		position:relative;
		border-top:none;
		background-color:transparent;
		/* border-bottom:solid 1px #e8e8e8; */
		
		
	}
	
}



#navigation .li_ebene_2_active {
	
	/* background-color:#ededed; */

}

#navigation .a_ebene_2:link,
#navigation .a_ebene_2:visited {
	display:block;
	
	text-transform:none;
	
	font-size:18px;
	line-height:57px;
	
	color:#444;

	

	padding-left:36px;
	padding-right:18px;	
	
}

@media screen and (min-width:1000px) {

	#navigation .a_ebene_2:link,
	#navigation .a_ebene_2:visited {
		font-size:15px;
		line-height:1.5em;
		
		color:#444;
	
		padding-left:20px;

		padding-top:10px;
		padding-bottom:10px;

		transition: color 0.5s ease;
	}

}

#navigation .a_ebene_2:hover {
	color:#5ea389;
	text-decoration: none;
	transition: color 0.5s ease;
}

#navigation .a_ebene_2_active:hover {
	color:#5ea389;
	text-decoration: none;
}

#navigation .a_ebene_2_active:link,
#navigation .a_ebene_2_active:visited {
	color:#5ea389;
	text-decoration: none;
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Navigation Drop Down definitionen
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#navigation li:hover ul ul,
#navigation li li:hover ul ul,
#navigation li li li:hover ul ul,
#navigation li li li li:hover ul ul {
	display:none;
}

#navigation li:hover ul,
#navigation li li:hover ul,
#navigation li li li:hover ul,
#navigation li li li li:hover ul {
	display:block;
}




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Input definitionen
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.input_textfeld {
	font-family: 'robotolight', Arial, Helvetica, sans-serif;
	font-size:14px;

	border:1px solid #999; 
	
	height:32px;
	line-height: 32px;
	border-radius: 3px;
	padding-left:4px !important;
}

.input_textfeld:focus {
	border:1px solid #27a5d9 !important;
}



.input_select {
	font-family: 'robotolight', Arial, Helvetica, sans-serif;
	font-size:14px;

	border:1px solid #999; 
	
	height:32px;
	line-height: 32px;
	border-radius: 3px;
	padding-left:4px !important;
}

.input_select:focus {
	border:1px solid #27a5d9;
}

.input_textarea {
	font-family: 'robotolight', Arial, Helvetica, sans-serif;
	font-size:14px;

	border:1px solid #999; 
	
	height:124px;
	line-height: 16px;
	border-radius: 3px;
	padding-top:4px;
	padding-left:4px;
}

.input_textarea:focus {
	border:1px solid #27a5d9;
}



.div_space_6px {
	margin-bottom:6px;
}

.input_button {
	font-family:'inter_light', Arial, Helvetica, sans-serif;
	text-align:center;
	color:#fff;
	font-size:16px; 
	
	height: 36px;
	padding: 0px 14px 0px 14px;
	line-height: 34px;
	border-radius: 3px;
	
	border:solid 1px #444;
	cursor: pointer;

	background-color: #5a9fce;
	background-image: linear-gradient( to bottom, rgba(90, 159, 206, 0.1) 0%, rgba(58, 122, 199, 1) 100% );
	transition: background-color 0.3s ease-in-out;

	/*
	background: #3a7ac7;
	background: -webkit-linear-gradient(#5a9fce, #3a7ac7);
	background: -o-linear-gradient(#5a9fce, #3a7ac7);
	background: -moz-linear-gradient(#5a9fce, #3a7ac7);
	background: linear-gradient(#5a9fce, #3a7ac7);
	*/
	
}

.input_button:hover {
	border:solid 1px #000;
	background-color: #6caad4;
	background-image: linear-gradient( to bottom, rgba(90, 159, 206, 0.1) 0%, rgba(58, 122, 199, 1) 100% );
	transition: background-color 0.3s ease-in-out;
}





.a_input_button {
	padding: 7px 14px 8px 14px;
	border-radius: 3px;
	background: #7abcff;
	
	border:solid 1px #444;
	
	background-color: #5a9fce;
	background-image: linear-gradient( to bottom, rgba(90, 159, 206, 0.1) 0%, rgba(58, 122, 199, 1) 100% );
	transition: background-color 0.3s ease-in-out;

	/*
	background: #3a7ac7;
	background: -webkit-linear-gradient(#5a9fce, #3a7ac7);
	background: -o-linear-gradient(#5a9fce, #3a7ac7);
	background: -moz-linear-gradient(#5a9fce, #3a7ac7);
	background: linear-gradient(#5a9fce, #3a7ac7);
	*/

	cursor: pointer;
}

.a_input_button:hover {
	border:solid 1px #000;
	background-color: #6caad4;
	background-image: linear-gradient( to bottom, rgba(90, 159, 206, 0.1) 0%, rgba(58, 122, 199, 1) 100% );
	transition: background-color 0.3s ease-in-out;
}

.div_link_button a:link,
.div_link_button a:visited,
.div_link_button a:hover,
.div_link_button a:active {
	
	font-family: 'robotoregular', Arial, Helvetica, sans-serif;
	text-align:center;
	color:#fff !important;
	font-size:15px;
	text-decoration: none !important;
}



	
/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Suche
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


#div_suche_suchbegriff {
	margin-bottom:20px;
}

#div_suche_downloadbereich {
	margin-bottom:20px;
}

@media screen and (min-width:540px) {
	#div_flex_suche { 
		display:flex;
		max-width:600px;
	}

	#div_suche_suchbegriff {
		width:50%;
	}

	#div_suche_downloadbereich {
		width:50%;
		margin-left:20px;
	}

}

/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Shop
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.shop_product {
	width:160px;
	float:left;
	margin-right:15px;
	text-align:center;
	font-size:14px;
	line-height:20px;
	margin-bottom:30px;	
}


.tabelle {
	font-size:15px;	
}

.tabelle_td {
	width:150px;	
}

.tabelle_td_right {
	text-align:right;
	
}

	




/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Blog
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


.div_post_wrapper {
	width:80%;

	padding-top:20px;
	padding-bottom:20px;
	border-bottom:solid 1px #ccc;
	text-align:left;
}



.h1_blog {
	font-size:24px;
	margin-bottom:8px;
	}
	
	
.div_post_daten {
	font-size:12px;
	margin-bottom:8px;
}

	
.span_post_autor {
	color:#09F;
}

.div_answer_daten {
	font-size:12px;
	margin-bottom:2px;
}

.div_answer_text {
	margin-bottom:20px;
}

.div_post_text {
	margin-bottom:20px;
}

.div_answer_anzahl {
	margin-bottom:8px;
	font-weight:bold;
}

.div_answer_new_titel {
	margin-bottom:8px;
}

.div_answer_new_form {
	display:none;
}

.div_answer_name {
	position:absolute;
	left:-2000px;	
}


/* 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Input Definitions für Blog
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


.div_post_wrapper input {
	font-family: 'robotoregular', Arial, Helvetica, sans-serif;
	color:#666;
	width:400px;
	height:20px;
	padding-left:2px;
	color:#666;
	border:1px solid #999;
	margin-bottom:4px;
}

.div_post_wrapper input:focus {
	border:1px solid #09F;
}



.div_post_wrapper select {
	color:#666;
	border:1px solid #999;
}

.div_post_wrapper select:focus {
	border:1px solid #09F;
}


.div_post_wrapper textarea {
	font-family: 'robotoregular', Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px;
	padding-left:2px;
	padding-top:2px;
	width:402px;
	height:100px;
	border:1px solid #999;
	margin-bottom:4px;
}

.div_post_wrapper textarea:focus {
	border:1px solid #09F;
}



.div_post_wrapper .input_button {
	width:80px;
	background-color:#eee;
	border:1px solid #999;
	cursor:pointer;
	height:18px;
}


.div_post_wrapper .my_table {
	border:0;
	border-spacing:0px;
	padding:0px;
	
	
	/* background-color:#0CF;  */
}	

.div_post_wrapper .my_table_text {
	vertical-align:top;
	width:100px;
	height:16px;
}



#blog_iframe_content {
	display:none;
	
}

#upload_iframe {
	height:600px;
	width:100%;
	border:none;
	
}


/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Gallery
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#mobile_gallery_div {
	margin-left:-10px;
	margin-right:-10px;	
	
}


#gallery_kachel_container {
  	text-align: center;
	color:#212529;
	
	/* background-color:#92E9F7; */
}


#gallery_kachel_container input:focus {
	border:none;
}

#gallery_verzeichnis_baum {
	/*
	line-height:28px;
	height:28px;
	*/
	margin-bottom:20px;
}

#gallery_info_body {
	display:none;
	position:absolute;
	background-color:#000000;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:1;	
}


#gallery_info_wrapper {
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:2;
	}
	

#gallery_info_container {
	display:none;
	position:absolute;
	padding:12px;
	width:370px;
	background-color:#7f7f7f;
	border:solid 1px #929292;
	z-index:3;	
	line-height:18px;
}


#gallery_upload_iframe_ordner {
	border:none;
	height:80px;
	width:100%;
	margin-top:8px;
	visibility:hidden;
}

#gallery_upload_iframe_photo {
	border:none;
	height:80px;
	width:100%;
	margin-top:8px;
	visibility:hidden;
}

/* Gallery */


.gallery_kachel {
	
	margin-right:-1px;
	margin-top:-1px;
	padding:8px;
	
	text-align:left;
	
	/* Statt float:left; */
	display:inline-block;
	
	width:180px;
	height:174px;

	font-size:11px;
	background-color:#fff;
	
	border:solid 1px #e4e4e4;
	
	
	
	
	/*
	-webkit-box-shadow: 1px 1px 2px 1px rgba(204,204,204,1);
	-moz-box-shadow: 1px 1px 2px 1px rgba(204,204,204,1);
	box-shadow: 1px 1px 2px 1px rgba(204,204,204,1);
	*/
}


.gallery_thumb_halter {
	width:180px;
	height:120px;
	text-align:center;
	margin-bottom:2px;
	overflow:hidden;
	
}

.gallery_thumb_halter img {

}

.gallery_text_halter {
	width:180px;
	height:52px;
}

.gallery_kachel_thumb_bereich {
	float:left;
	width:13px;
}

.gallery_kachel_thumb_bereich_icons {
	
	}

.gallery_kachel_text_bereich_ordner {
	float:left;
	padding-left:3px;
	width:135px;
	height:52px;
	overflow:hidden;
}

.gallery_kachel_text_bereich_photo {
	float:left;
	width:151px;
	height:52px;
	overflow:hidden;

	
	
}

.gallery_kachel_info_bereich {
	position:relative;
	top:0px;
	left:150px;
	width:30px;
	height:52px;

}

.gallery_kachel_info_bereich_links {
	position:absolute;
	top:0px;
	left:0px;
	width:14px;
	height:52px;
	margin-top:3px;
}

.gallery_kachel_info_bereich_rechts {
	position:absolute;
	top:0px;
	right:0px;
	float:left;
	width:14px;
	height:52px;
	margin-top:3px;
}

.gallery_kachel_info_bereich img {
	cursor:pointer;
	}

.gallery_icons {
	margin-bottom:3px;
	width:13px;	
}


/* Info Fenster */

#gallery_div_info_thumb {
	float:left;
	width:182px;
	height:127px;
	
}

#gallery_div_info_control {
	height:127px;
}

.gallery_edit_icons {
	margin-top:100px;
}

.gallery_info_table {
	width:100%;
	border-collapse:collapse;


}
.gallery_info_table td {
	border-top:1px solid #7f7f7f;
	vertical-align:top;
}

.gallery_info_table_td_left {
	width:100px;
}

.gallery_info_table_padding {
	margin-top:3px;
}

.gallery_align_right {
	text-align:right;
	display:block;
}

.gallery_align_right img {
	cursor:pointer;
}


/* Weitere Klassen */

.transparent80 {
    opacity: .8;
    filter: alpha(opacity=80);
    -moz-opacity: .8;
}

.gallery_thumb {
	/* border:1px solid #666; */
	
	margin-bottom:2px;
	vertical-align:middle;

}





/* Gallery Input */

.gallery_input_feld {
	border:solid 1px #000;
	width:100%;
	
	background-color:#bbbbbb;
	padding-left:2px;
	line-height:14px;
}

.gallery_input_feld_datum {
	width:156px;
}



.gallery_input_feld_titel {
	height:24px;
}

.gallery_input_feld_beschreibung {
	height:24px;
}

.gallery_input_feld_datei {
	cursor:pointer;
	width:80px;

}

.gallery_input_feld_1zeilen {
	white-space:pre;
	padding-top:2px;
	height:15px;
	width:100%;
}

.gallery_input_feld_2zeilen {
	white-space:pre;
	padding-top:2px;
	height:30px;
	width:100%;
}

.gallery_input_feld_5zeilen {
	white-space:pre;
	padding-top:2px;
	height:60px;
	width:100%;
}

.gallery_input_feld_datum_info {
	width:244px;
	padding-top:2px;
	height:13px;
	line-height:13px;
}

.gallery_icon_kalender {
	margin-bottom:-1px;
}

.gallery_input_button {
	margin-top:5px;
	width:89px;
	height:16px;
	border:solid 1px black;
	background-color:#bbbbbb;
	cursor:pointer;
}

.gallery_input_select {
	border:solid 1px #000;
	width:100%;
	height:17px;
	background-color:#bbbbbb;
	font-size:10px;
	padding-left:2px;
}

.gallery_input_text {
	line-height:13px;
	height:13px;
}

.gallery_input_checkbox {
	cursor:pointer;
	border:none;
	background-color:#bbbbbb;
}


.gallery_divinputfile {
	background-image:url(../images/icons/upload.gif);	
	background-repeat:no-repeat; 
	background-position:right;
	height:16px;
	width:182px;
	margin-bottom:1px;
	cursor:pointer;
	overflow:hidden;
}

.gallery_divinputfile .gallery_myfile {
	opacity: 0.0;
	-moz-opacity: 0.0;
	filter: alpha(opacity=00);
	font-size:10px;
	height:16px;
	overflow:hidden;
}



.gallery_fakeinputfile {
	margin-top:-16px;
}


.gallery_fakeinputfile .gallery_fakemyfile {
	width:134px;
	background-color:#bbbbbb;
	border:solid 1px #000;
	font-size:10px;
	padding-left:2px;
	height:14px;
	cursor:pointer;

}




.mobile_gallery_thumb {
	width:24.5%;
	height:24.5%;
	float:left;
	margin-right:0.5%;
	margin-bottom:0.5%;
}


.folder_div {
	line-height:16px;
	font-size:12px;
	width:156px;
	margin-bottom:20px;
	float:left;
	text-align:center;
}

.mobile_gallery_folder_div {
	width:49.5%;
	margin-right:0.5%;
	margin-bottom:5%;
	float:left;
	font-size:12px;
	text-align:left;
}



.mobile_gallery_folder_foto {

}

.mobile_gallery_folder_thumb {
	width:100%;
}


.mobile_gallery_folder_text {
	text-align: center;
}



.video_thumb {
		width:250px;
		height:140px;
	}
	
.gallery_span_path {
	font-size:16px;
}
	
.gallery_span_path_link {	
	color:#108BFD;
	font-size:16px;
	font-weight:bold;

}

@media screen and (min-width:1000px) {
	.video_thumb {
		width:500px;
		height:280px;
	}
}


.content_video {
  display: inline-block;
  text-align:left;
  font-size:11px;
  line-height:20px; 
  padding: 10px 10px 6px 10px;
  margin-left:10px;
  margin-right:10px;
  margin-bottom:20px;
  background: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}


@media screen and (min-width:1000px) {
	.content_video {
		margin-left:20px;
		margin-right:20px;
  		margin-bottom:40px;
	}
}


.video {
	width:100%;	
}



/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Fonts
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/






/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Inter (Free)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter_thin.woff2') format('woff2'),
      url('../fonts/inter/inter_thin.woff') format('woff');
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter_light.woff2') format('woff2'),
      url('../fonts/inter/inter_light.woff') format('woff');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter_regular.woff2') format('woff2'),
      url('../fonts/inter/inter_regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter_semibold.woff2') format('woff2'),
      url('../fonts/inter/inter_semibold.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter_bold.woff2') format('woff2'),
      url('../fonts/inter/inter_bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter_extrabold.woff2') format('woff2'),
      url('../fonts/inter/inter_extrabold.woff') format('woff');
  font-weight:800; font-style:normal; font-display:swap;
}

.inter_light{ font-weight:300; }
.inter_regular{ font-weight:400; }
.inter_semibold, .font_semibold{ font-weight:600; }
.inter_bold{ font-weight:700; }