html {
	/* Aenderungswunsch 2026-06-19: kein dauerhaft reservierter (weisser)
	   Scrollbalken-Gutter mehr am rechten Rand. overflow-y:auto blendet die
	   Bildlaufleiste nur bei Bedarf ein, sodass der Inhalt (Hero) bis an den
	   rechten Rand reicht. */
	overflow-y: auto;
	overflow-x: hidden;
}



/* Aenderungswunsch 2026-06-17: Der Header ist jetzt site-weit fixiert
 * (sticky, verkleinert sich beim Scrollen) — siehe Styles.css. Auf der
 * Startseite ist keine Sonderpositionierung des Headers mehr noetig; die
 * frueheren position/z-index-Overrides hier wurden entfernt, damit die
 * fixierte Leiste aus Styles.css greift. */

/* Footer im normalen Layoutfluss (s.u. Hinweis). */
footer {
    position: relative;
}
	
.slideshowHP,
.slick-list,
.slick-track,
.slick-slide,
.slick-slide .image,
.slick-slide .image img,
.content  {
	height:100%;
	overflow: hidden;
}
/* Aenderungswunsch 2026-06-17: Der Hero-Slider auf der Startseite soll genau
 * "100vh minus Headerhoehe" hoch sein. --header-h wird per JS (Script.js) auf
 * die reale Hoehe der Kopfleiste gesetzt; 125px ist der Fallback
 * (Logo ~90px + Padding 35px). Die inneren Slick-Elemente erben ueber die
 * 100%-Kette die Hoehe von .content. */
.content {
	height: calc(100vh - var(--header-h, 100px));
}
.slick-slide .image {
	overflow:hidden;
}
.slick-slide .image img {
	width:auto;
	max-width:none;
	/*
	max-height: 850px;
	max-width: 1920px;	
	*/
}

.slick-slide .text {
	color:#fff;
	/* Aenderungswunsch 2026-06-17: Text vertikal zentriert (gleicher Abstand
	 * nach oben wie nach unten) statt fix top:18%. */
	top: 50%;
	transform: translateY(-50%);
	left: 20%;
	width: 60%;
	background:url('../images/homepage-text-shadow.png') no-repeat;
	background-size: 100% 100%;
}

@media (min-width: 1441px) {
	.slick-slide .text {
		top: 50%;
	}
}

@media (max-width: 1360px) {
	.slick-slide .text {
		top: 50%;
	}
}

.slick-slide .text hr {
	border-bottom:1px solid #fff;
}

.slick-slide .text h1 {
	font-size:52px;
	color:#fff;
	width:100%;
}

@media (max-width: 1280px) {
		.slick-slide .text h1 { font-size:45px; }
}


.slick-dots li button::before {
	border:1px solid #fff;
	background:none;
}
.slick-dots li.slick-active button::before {
	border:1px solid #fff;
	background:rgba(255,255,255,0.5);
}

.slick-dots {
    /* Aenderungswunsch 2026-06-19: Punkte nach unten, damit sie den (jetzt
       vertikal zentrierten) Text nicht mehr verdecken. */
    bottom: 8%;
}

@media (max-width: 1260px) {
		.slick-dots { visibility: hidden; }
}

@media (width: 1280px) {
	.slick-dots { bottom: 8%; }
}

.slick-prev, .slick-next {
	top:20%;	
	right:0;
	width:40%;
	height:50%;
	transform:none;
	background:rgba('255,255,255,0.5');
	background-image:none;
	z-index: 9;
}

.slick-prev {
    left: 0;
	right:auto;	
}


@media (min-width: 1500px) {
	.slick-slide .text h1 {
		font-size: 3.6vw;
		margin: 0 0 2.8rem 0;		
	}
}

.slick-slide .text h2{
	font-size:14px;
	text-align:center;
	/* Aenderungswunsch 2026-06-19: groesserer Abstand zwischen Spruch-Zeile und
	   Fotonachweis -> margin-bottom ergaenzt. */
	margin: 1.8rem 0 1.6rem 0;
	text-transform: uppercase;
}
.slick-slide .text h2:before {
	content:url('../images/arrow-slider.png');
	position:absolute;
	bottom:1.3rem;
	left:0;
}
.slick-slide .text h2:after {
	content:url('../images/arrow-slider2.png');
	position:absolute;
	bottom:1.3rem;	
	right:0;
}

@media (min-width: 1280px) {
	.slick-slide .text h2 {
		font-size: 18px;
	}
}

@media (min-width: 1500px) {
	.slick-slide .text h2 {
		font-size: 22px;
	}
}

.slick-slide .text p {
	font-size:12px;
	line-height:14px;
	text-align:center;
	margin: 0 0 2.3rem 0;
}

@media (max-width: 1280px) {
	.slick-slide .text {
		/*left: 10%;*/
		width: 80%;
		left:10%;
	}
}

/* ==========================================================================
  Teaser
  ========================================================================== */

.teaser {
	position:relative;
	width:100%;
	background:rgba(255,255,255,0.95);
	padding:10px;
	z-index:10;
	cursor:pointer;

	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.teaser .image,
.teaser .text{
	display:inline-block;
	vertical-align:top;
	width:70%;
	cursor:pointer;
}
.teaser .image{
	margin-right:10px;
	width:25%;
	line-height: 0;
}


.teaser h2 {font-size:0.8em;margin:0;}
.teaser h2 a {color:#999;}
.teaser h1 {font-size:1em;color:#58585a;margin:4px 0 5px 0;border-bottom:1px solid #cbcbca;padding:0 0 7px 0;line-height: 1.3em;cursor:pointer; }
.teaser p {margin: 0;font-size: 0.8em;}

@media (min-width: 801px) {
	.teaser {
		position:absolute;
		right:0;
		top:145px;
		max-width:360px;
	}
}

@media (max-width: 1280px) {
	.teaser {
		max-width:200px;
	}
	.teaser .text{
		width:65%;
	}
}

@media (width: 1024px) {
	.teaser {
		top:100px;
		max-width:250px;
	}
	.slick-dots {
		visibility: visible;
	}

	header,
	header .header {
		position:static;
	}

	.slideshowHP, .slick-list, .slick-track, .slick-slide, .slick-slide .image, .slick-slide .image img, .content {
		max-height: 850px!important;height:auto;width:100%;}
	.slideshowHP, .slick-list, .slick-track, .slick-slide, .slick-slide .image, .slick-slide .image img, .content {
		height: auto;width:100%;}
	.slick-dots {
		bottom: 15%; }
}


@media (max-width: 1023px) {

	.slick-slide .text hr {border:0;}
	.slick-slide .text {
		left: 0;
		width: 100%;
	}
	.slick-prev, .slick-next,
	.slick-arrow {visibility: hidden;background:none;}
	.slick-dots {
		bottom: 40px;
		z-index: 100;
		visibility: visible;
	}

	.slick-slide .text h2::before,
	.slick-slide .text h2::after {
		content:" ";
	}
	.slick-slide .text h2 {line-height: 20px;margin-bottom:1em;}


	.teaser.c2 {width:auto;}
	.teaser .text {width:100%!important;}
	.teaser .image {width: 40px;}
	.teaser {max-width: 100%;}

}

@media (width: 1280px) {
	.teaser {
		max-width: 300px;
	}
	.slick-dots {
		bottom: 8%;
	}
}

@media (width: 768px) {
	.slideshowHP, .slick-list, .slick-track, .slick-slide, .slick-slide .image, .slick-slide .image img, .content {max-height: 850px!important;}
}