/* ==========================================================================
   Texter Schult — Stylesheet (Plain CSS, kein Build)
   Aufbau: 1 Tokens · 2 Schriften · 3 Basis · 4 Typografie · 5 Bausteine
           6 Layout/Rahmen · 7 Header/Navigation · 8 Banner · 9 Elemente
           10 Footer · 11 Animationen
   Breakpoints (wie Live-Seite): 1370 · 1280 · 960 · 768 · 640 · 450 px
   ========================================================================== */

/* 1 · Tokens ---------------------------------------------------------------- */
:root {
	--color-main: #3ed3d6;          /* Akzent: Links, Linien, Aktiv-Zustände */
	--color-main-dark: #23a2a5;     /* Link-Hover */
	--color-main-light: #68dddf;    /* Aufzählungspunkt 2. Ebene */
	--color-button: #4bb7c6;        /* Button, Zeitleisten-Punkt */
	--color-button-hover: #47adb5;  /* Button-Hover, Footer-Links */
	--color-text: #3d3d3d;
	--color-dark: #333;             /* Footer, Sticky-Header, Trenner */
	--color-white: #fff;
	--color-arrow: #aaa;            /* Untermenü-Pfeil */
	--color-dot-muted: #d3d3d1;     /* Slider-Punkte Kundenstimmen */
	--color-shadow: rgba(0, 0, 0, .75);
	--color-shadow-soft: rgba(0, 0, 0, .2);
	--color-line-light: rgba(255, 255, 255, .3);

	--font-body: "Open Sans", Verdana, Arial, sans-serif;
	--font-headline: "Oswald", Verdana, Arial, sans-serif;

	--container: 960px;            /* Inhaltsbreite */
	--container-wide: 1460px;      /* Footer, Banner-Text */
	--container-site: 2000px;      /* maximale Seitenbreite */
	--gutter-width: 92%;

	--ease: .3s ease-in-out;
}

/* 2 · Schriften (lokal) ---------------------------------------------------- */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/open-sans-v15-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-v15-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-v15-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-v15-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/open-sans-v15-latin-800.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/oswald-v16-latin-600.woff2") format("woff2"); }

/* 3 · Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
body {
	font: 400 16px/28px var(--font-body);
	color: var(--color-text);
	background: var(--color-white);
	-webkit-tap-highlight-color: transparent;
}
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, video { vertical-align: middle; max-width: 100%; height: auto; }
figure { margin: 0; }
blockquote { quotes: none; }
button { font: inherit; }
::selection { background: var(--color-main); color: var(--color-white); text-shadow: none; }

hr {
	display: block;
	height: 1px;
	margin: 30px 0;
	border: none;
	background: var(--color-main);
}

a {
	color: var(--color-main);
	text-decoration: none;
	transition: color var(--ease);
}
a:hover { color: var(--color-main-dark); }

/* externe Links: Pfeil-Symbol davor (wie live) */
a[href*="//"] { position: relative; }
a[href*="//"]::before {
	content: "";
	display: inline-block;
	position: relative;
	top: 2px;
	width: 15px;
	min-width: 15px;
	height: 15px;
	margin-right: 10px;
	background: url("../img/icons/external-link.svg") no-repeat center left / 100% auto;
}

/* 4 · Typografie ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	color: var(--color-text);
	text-transform: uppercase;
	line-height: 120%;
}
:is(h1, h2, h3, h4, h5, h6) + :is(p, h1, h2, h3, h4, h5, h6) { padding-top: 10px; }

h1 { font: 600 60px/120% var(--font-headline); }
h2 { font: 500 50px/120% var(--font-headline); }
h3 { font-size: 25px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; line-height: 140%; }
h5 { font-size: 14px; }
h6 { font-size: 18px; }

@media (max-width: 1370px) {
	h1 { font-size: 38px; }
	h2 { font-size: 28px; }
}
@media (max-width: 960px) {
	h1 { font-size: 26px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
}

:is(p, ul, ol) + :is(p, h1, h2, h3, h4, h5, h6) { margin-top: 1em; }

i, em { font-style: italic; }
strong, b { font-weight: 700; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.maincolortext { color: var(--color-main); }

/* 5 · Bausteine ------------------------------------------------------------ */
.button {
	display: inline-block;
	margin-top: 20px;
	padding: 15px 30px;
	border: 1px solid var(--color-button);
	background-color: var(--color-button);
	color: var(--color-white);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--ease);
}
.button:hover {
	border-color: var(--color-button-hover);
	background-color: var(--color-button-hover);
	color: var(--color-white);
}
@media (max-width: 1280px) {
	.button { padding: 12px 20px; font-size: 14px; }
}
@media (max-width: 768px) {
	.button { margin-top: 12px; padding: 8px 18px; font-size: 13px; }
}

/* Listen im Inhalt */
.allcont ul li { position: relative; padding: 5px 10px 5px 25px; }
.allcont ul li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-dark);
}
.allcont ul li ul li { padding: 5px 10px 5px 20px; }
.allcont ul li ul li::before { background: var(--color-main-light); }

.allcont ol { margin: 10px 0; counter-reset: item; }
.allcont ol > li { position: relative; padding: 5px 0 5px 1.7em; counter-increment: item; }
.allcont ol > li::before {
	content: counter(item) ".";
	position: absolute;
	top: 5px;
	left: 0;
	font-weight: 700;
}

/* Tabellen im Inhalt */
/* lange URLs als Linktext dürfen umbrechen (Sicherheitsnetz, kein Texteingriff) */
.allcont a { overflow-wrap: break-word; }

.table_container { overflow: auto; }
.allcont table { width: 100%; margin: 10px 0 5px; }
.allcont table td { padding: 5px 15px 5px 0; }
.allcont table th {
	padding: 10px 15px;
	color: var(--color-main);
	font-weight: 700;
	text-align: left;
}
@media (max-width: 768px) {
	.allcont table tr { display: flex; flex-direction: column; }
}

/* 6 · Layout / Rahmen ------------------------------------------------------ */
.site {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: var(--container-site);
	margin: 0 auto;
	box-shadow: 0 0 10px 0 var(--color-shadow-soft);
}
/* clip: fängt die Einblend-Verschiebung der Animationen ab (wie live) */
.site .main { flex: 1 0 auto; overflow: hidden; }

/* Rahmen eines Inhaltselements */
.cont > .frame {
	width: var(--gutter-width);
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
}
.cont > .frame.frame-layout-10,
.cont > .frame.frame-layout-20 { width: 100%; max-width: none; }
.cont > .frame.frame-layout-20 > .inner {
	width: var(--gutter-width);
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
}

/* erstes/letztes Element ohne Kasten: Abstand zu Banner/Footer */
.cont > .frame:first-child:not(.frame-lightbgbox, .frame-type-textpictures) { margin-top: 80px; }
.cont > .frame:last-child:not(.frame-lightbgbox, .frame-type-textpictures) { margin-bottom: 80px; }

/* heller Kasten */
.frame-lightbgbox {
	padding: 80px 0;
	background: url("../img/Fotolia_102034675_Subscription_XXL.jpg") no-repeat left top / cover;
}
.cont > .frame.frame-layout-10.frame-lightbgbox { padding: 0; }

/* Abstände (Auswahl wie im alten CMS) */
.frame-space-before-extra-small { margin-top: 30px; }
.frame-space-before-small { margin-top: 45px; }
.frame-space-before-medium { margin-top: 70px; }
.frame-space-before-large { margin-top: 130px; }
.frame-space-before-extra-large { margin-top: 200px; }
.frame-space-after-extra-small { margin-bottom: 30px; }
.frame-space-after-small { margin-bottom: 45px; }
.frame-space-after-medium { margin-bottom: 70px; }
.frame-space-after-large { margin-bottom: 130px; }
.frame-space-after-extra-large { margin-bottom: 200px; }
@media (max-width: 450px) {
	.frame-space-before-medium { margin-top: 50px; }
	.frame-space-before-large { margin-top: 80px; }
	.frame-space-before-extra-large { margin-top: 100px; }
	.frame-space-after-medium { margin-bottom: 50px; }
	.frame-space-after-large { margin-bottom: 80px; }
	.frame-space-after-extra-large { margin-bottom: 100px; }
}

/* Spaltenraster (Footer) */
.gridrow { display: grid; gap: 2%; }
.grid3cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 7 · Header / Navigation -------------------------------------------------- */
.head {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 99;
	width: 100%;
	max-width: var(--container-site);
	transform: translateX(-50%);
	transition: all var(--ease);
	backface-visibility: hidden;
}
.head.is-sticky {
	background: var(--color-dark);
	box-shadow: 0 0 10px 0 var(--color-shadow);
}
.head > .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: var(--gutter-width);
	margin-left: auto;
	margin-right: auto;
	transition: all var(--ease);
}
.head .logo {
	width: 430px;
	height: 20px;
	margin: 60px 0;
	background: url("../img/icons/logo.svg") no-repeat 0 / contain;
	transition: all var(--ease);
}
.head .logo a { display: block; width: 100%; height: 100%; }
.head .logo span { display: none; }
.head.is-sticky .logo { margin: 30px 0; }
@media (max-width: 1370px) {
	.head .logo { width: 330px; }
}
@media (max-width: 1280px) {
	.head .logo { margin: 30px 0; }
}

.head .nav { display: flex; gap: 10px; }
.head .nav > li { position: relative; }
.head .nav li a {
	display: block;
	color: var(--color-white);
	font-size: 16px;
	font-weight: 300;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all var(--ease);
}
.head .nav > li > a { position: relative; padding: 10px 15px; }
.head .nav > li.has_sub { padding-right: 10px; }
.head .nav > li:is(:hover, .over, .act) > a { color: var(--color-main); }
@media (max-width: 1370px) {
	.head .nav li a { font-size: 14px; }
}

/* Pfeil an Menüpunkten mit Untermenü */
.head .nav .showSub {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 10;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	transform: translateY(-50%);
	cursor: pointer;
	pointer-events: none;
	transition: all var(--ease);
}
.head .nav .showSub::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	border-top: 5px dashed var(--color-arrow);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	transition: all var(--ease);
}
.head .nav .showSub.open::after { border-top-color: var(--color-white); transform: rotate(180deg); }

/* Untermenü (Desktop) */
.head .nav .subnav {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	background: var(--color-white);
	box-shadow: 0 0 10px 0 var(--color-shadow);
}
.head .nav li:is(:hover, .over) > .subnav { display: flex; }
.head .nav .subnav li { position: relative; }
.head .nav .subnav li + li { border-top: 1px solid var(--color-dark); }
.head .nav .subnav li a { padding: 15px 20px; background: var(--color-main); }
.head .nav .subnav li:is(:hover, .over, .act) > a { background: var(--color-white); color: var(--color-main); }
.head .nav .subnav .subnav { top: 0; left: 100%; padding-left: 5px; }

/* Hamburger */
.open_nav { display: none; }
.hamburger { display: inline-flex; padding: 15px; cursor: pointer; }
.hamburger-box { position: relative; display: inline-block; width: 30px; height: 22px; }
.hamburger-inner { top: 50%; display: block; margin-top: -1px; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	position: absolute;
	width: 30px;
	height: 2px;
	background-color: var(--color-white);
	transition: transform .15s ease;
}
.hamburger-inner::before,
.hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -10px; transition: top .1s .25s ease-in, opacity .1s ease-in; }
.hamburger-inner::after { bottom: -10px; transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19); }
.hamburger--spin .hamburger-inner { transition-duration: .22s; transition-timing-function: cubic-bezier(.55, .055, .675, .19); }
.hamburger--spin.is-active .hamburger-inner {
	transform: rotate(225deg);
	transition-delay: .12s;
	transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top .1s ease-out, opacity .1s .12s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1);
}

/* Mobile Navigation */
@media (max-width: 1280px) {
	.open_nav { display: flex; }
	.head nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		max-height: calc(100vh - 125px);
		max-height: calc(100dvh - 125px);
		overflow-y: auto;
	}
	.head nav.is-open { display: block; }
	.head .nav { flex-direction: column; gap: 0; }
	.head .nav li { width: 100%; }
	.head .nav li a { padding: 20px; background-color: var(--color-main); }
	.head .nav > li > a { padding: 20px; }
	.head .nav li:is(:hover, .over, .act) > a { background: var(--color-white); color: var(--color-main); }
	.head .nav .showSub {
		top: 0;
		width: 69px;
		height: 69px;
		line-height: 69px;
		background: var(--color-dark);
		transform: none;
		pointer-events: all;
	}
	.head .nav .subnav,
	.head .nav .subnav .subnav {
		position: static;
		padding: 0;
		box-shadow: none;
	}
	/* mobil öffnet nur der Pfeil (.is-open), nie :hover — sonst schlägt :hover das Aufklappen */
	.head .nav li:is(:hover, .over) > .subnav:not(.is-open) { display: none; }
	.head .nav .subnav.is-open { display: flex; }
	.head .nav .subnav li + li { border-top: none; }
	.head .nav .subnav li { border-bottom: 1px solid var(--color-dark); }
	.head .nav .subnav li a { padding: 10px 40px; }
	.head .nav .subnav .showSub { width: 47px; height: 47px; line-height: 47px; }
}

/* 8 · Banner --------------------------------------------------------------- */
#subhead { position: relative; overflow: hidden; }
.banner {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.banner .image { position: relative; width: 100%; }
.banner .image img {
	width: 100%;
	height: auto;
	min-height: 430px;
	object-fit: cover;
}
@media (max-width: 640px) {
	.banner:not(.largeHeight) .image img { min-height: 250px; }
}
.banner .text_wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 80%;
	max-width: var(--container-wide);
	color: var(--color-white);
	transform: translate(-50%, -50%);
}
@media (min-width: 2000px) {
	.banner .text_wrap { width: 60%; }
}
.banner .button {
	margin-top: 0;
	border-color: var(--color-white);
	background: transparent;
	color: var(--color-white);
}
.banner .button:hover { border-color: var(--color-main); background: var(--color-main); color: var(--color-white); }

.largetext {
	color: var(--color-white);
	font-size: 90px;
	font-weight: 800;
	line-height: 120%;
	text-transform: uppercase;
}
.smalltext {
	position: relative;
	display: inline-block;
	margin-bottom: 30px;
	color: var(--color-white);
	font-size: 22px;
	line-height: 30px;
	text-transform: uppercase;
}
.smalltext::after {
	content: "";
	position: absolute;
	bottom: -15px;
	left: 50%;
	width: 35px;
	height: 2px;
	background-color: var(--color-main);
	opacity: .7;
	transform: translateX(-50%);
}
@media (max-width: 1370px) {
	.largetext { font-size: 50px; }
	.smalltext { font-size: 20px; }
}
@media (max-width: 768px) {
	.largetext { font-size: 28px; }
}

/* Text-Slider im Banner: Folien übereinander, Überblendung */
.text_slider .slides { display: grid; align-items: center; }
.text_slider .text_slide { grid-area: 1 / 1; }
.text_slider .text_slide:not(.is-active) { opacity: 0; visibility: hidden; }
.text_slider.is-ready .text_slide { transition: opacity .5s ease-in-out, visibility .5s ease-in-out; }

.scrolldown_wrap {
	position: absolute;
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
}
.scrolldown {
	display: block;
	width: 37px;
	height: 37px;
	margin: auto;
	overflow: hidden;
	background: url("../img/icons/arrow-down.svg") no-repeat left top;
	cursor: pointer;
	animation: bounce 3s infinite;
}
@media (max-width: 960px) {
	.scrolldown_wrap { display: none; }
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-20px); }
	60% { transform: translateY(-10px); }
}

/* Slider-Punkte */
.slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 15px;
}
.allcont .slider-dots li { padding: 0; }
.allcont .slider-dots li::before { content: none; }
.slider-dots button {
	display: block;
	transition: all var(--ease); /* wie live: allgemeine Button-Übergänge */
	margin-top: 20px; /* wie live: allgemeine Button-Regel greift auch hier */
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-white);
	color: transparent;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}
.slider-dots button:hover,
.slider-dots .is-active button { background: var(--color-main); }
@media (max-width: 768px) {
	.slider-dots button { margin-top: 12px; }
	.text_slider .slider-dots { display: none; }
}

/* 9 · Elemente ------------------------------------------------------------- */

/* Text-Bild (textpictures / contentpicture) */
.textpictures { position: relative; }
.textpictures_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2%;
}
.textpictures_col { width: 50%; }
.textpictures_image { position: relative; }
@media (max-width: 960px) {
	.textpictures_wrap { flex-direction: column; }
	.textpictures_col { width: 100%; }
	.textpictures_image { order: -1; margin-bottom: 20px; }
	.textpictures_text.reverse { order: -1; margin-bottom: 20px; }
	.textpictures_image.reverse { order: 1; margin-bottom: 0; }
	.textpictures_image.reverse .textpictures_image { margin-bottom: 0; }
	.textpictures_image img { width: 100%; height: auto; min-height: 0; object-fit: contain; }
}
/* erstes Text-Bild in einem Grid-Kasten: oben bündig */
.cont > .frame-type-grid100:first-child > .inner .frame:first-child.frame-type-textpictures .textpictures_wrap { align-items: flex-start; }

/* Layout 10: Bild randabfallend, halbe Seitenbreite */
.frame-layout-10 .textpictures_wrap { gap: 0; }
.frame-layout-10 .textpictures_col.textpictures_text {
	display: flex;
	justify-content: center;
	align-items: center;
}
.frame-layout-10 .textpictures_col.textpictures_text .text_inner {
	width: var(--gutter-width);
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
.frame-layout-10 .textpictures_text :is(.button, button) { margin-top: 20px; }
.frame-layout-10 .textpictures_text table td { padding: 0; }
.frame-layout-10 .textpictures_image img {
	width: 100%;
	height: 100%;
	min-height: 855px;
	object-fit: cover;
}
@media (min-width: 768px) {
	.frame-layout-10 .textpictures_text table td { padding-left: 40px; border-left: 1px solid var(--color-text); }
}
@media (max-width: 960px) {
	.frame-layout-10 .textpictures_col.textpictures_text .text_inner { max-width: none; padding: 20px 0 70px; }
	.frame-layout-10 .textpictures_image img { width: 100%; height: auto; min-height: 0; object-fit: contain; }
}

/* Startseite: erstes Element (Porträt freigestellt, unten bündig) */
.frame-layout-10.frame-type-textpictures:first-child .textpictures_col.textpictures_text { justify-content: flex-start; }
.frame-layout-10.frame-type-textpictures:first-child .textpictures_col.textpictures_text .text_inner { width: 70%; max-width: none; }
.frame-layout-10.frame-type-textpictures:first-child .textpictures_image {
	display: flex;
	align-items: flex-end;
	height: 850px;
}
.frame-layout-10.frame-type-textpictures:first-child .textpictures_image img {
	min-height: 720px;
	max-height: 720px;
	max-width: 745px;
}
@media (max-width: 960px) {
	.frame-layout-10.frame-type-textpictures:first-child .textpictures_col.textpictures_text .text_inner { width: var(--gutter-width); }
	.frame-layout-10.frame-type-textpictures:first-child .textpictures_image { height: auto; }
	.frame-layout-10.frame-type-textpictures:first-child .textpictures_image img { min-height: 0; max-width: none; }
	.page-home .cont > .frame:first-child .textpictures_image { padding-top: 10px; }
}

/* Kundenstimmen-Slider */
.reference_slider_comments { position: relative; }
.reference_slider_comments .slide:not(.is-active) { display: none; }
.reference_slider_comments.is-ready { transition: height .5s ease; }
.reference_slider_comments.is-ready .slide {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s ease;
}
.reference_slider_comments.is-ready .slide.is-active { opacity: 1; visibility: visible; }
.reference_slider_headline + * { margin-top: 1em; }
.reference_slider .comment { line-height: 28px; quotes: "„" "\""; }
.reference_slider .comment::before { content: open-quote; }
.reference_slider .comment::after { content: close-quote; }
.reference_slider .name { padding-top: 1em; font-weight: 700; }
.reference_slider .title { margin-top: 20px; color: var(--color-main); }
.reference_slider .slider-dots { justify-content: flex-start; }
.reference_slider .slider-dots button { background: var(--color-dot-muted); }
.reference_slider .slider-dots button:hover,
.reference_slider .slider-dots .is-active button { background: var(--color-main); }
@media (min-width: 768px) {
	.reference_slider .comment_wrap { padding-left: 40px; border-left: 1px solid var(--color-dark); }
}

/* Zeitleiste */
.timeline_dot {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	margin: auto;
	border-radius: 100%;
	background: var(--color-button);
	color: var(--color-white);
}
.timeline_info { margin: 20px 0 10px; }
.timeline_spacer {
	width: 1px;
	height: 30px;
	margin: 10px auto 20px;
	background: var(--color-dark);
}

/* 10 · Footer -------------------------------------------------------------- */
.foot {
	position: relative;
	padding: 100px 0 20px;
	background-color: var(--color-dark);
	color: var(--color-white);
	font-weight: 300;
}
.foot > .inner,
.foot .subfoot .inner {
	width: var(--gutter-width);
	max-width: var(--container-wide);
	margin-left: auto;
	margin-right: auto;
}
.foot h3 { color: var(--color-white); }
.foot h3 + * { margin-top: 10px; }
.foot p { max-width: 385px; opacity: .7; }
.foot a:not(.hhc) { color: var(--color-button-hover); }
.foot a:not(.hhc):hover { text-decoration: underline; }
.foot .foot_logo { margin-bottom: 20px; }
.foot .foot_logo img { display: block; }
.foot table td { padding: 10px 0; }
.foot table td + td { padding-left: 20px; }
.foot .col3 td { opacity: .7; }
.foot .col3 td a { color: var(--color-white); }
.foot .col3 td a:hover { color: var(--color-button-hover); }
@media (max-width: 1280px) {
	.foot .gridrow { display: flex; flex-direction: column; gap: 30px; margin: 20px 0; }
}
@media (max-width: 450px) {
	.foot table tr { display: flex; flex-direction: column; }
	.foot table td,
	.foot table td + td { padding: 0; }
}

.foot .subfoot {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-line-light);
}
.foot .subfoot .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
.foot .footnavmenu { display: flex; flex-wrap: wrap; gap: 20px; }
.foot .hhc { color: var(--color-white); opacity: .7; }
.foot .hhc:hover { color: var(--color-button-hover); opacity: 1; }
@media (max-width: 1280px) {
	.foot .subfoot .inner { flex-direction: column; align-items: flex-start; }
}

.backtotop {
	position: absolute;
	top: -20px;
	left: 50%;
	display: block;
	width: 45px;
	height: 45px;
	border-radius: 100%;
	background: var(--color-white) url("../img/icons/arrow-up.svg") no-repeat left top;
	box-shadow: 0 0 10px 0 var(--color-shadow);
	transform: translateX(-50%);
}
.backtotop:hover { opacity: .7; }
.backtotop span { display: none; }

/* 11 · Einblend-Animationen (nur mit JS; ohne JS sofort sichtbar) ---------- */
.js .animated.fadeInLeft:not(.go) { opacity: 0; transform: translateX(-20px); }
.js .animated.fadeInRight:not(.go) { opacity: 0; transform: translateX(20px); }
.js .animate.fadeInUp:not(.go) { opacity: 0; transform: translateY(20px); }
.js .go { animation-duration: 1s; animation-fill-mode: both; }
.js .fadeInLeft.go { animation-name: fadeInLeft; }
.js .fadeInRight.go { animation-name: fadeInRight; }
.js .fadeInUp.go { animation-name: fadeInUp; }
@keyframes fadeInLeft {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(400px); }
	to { opacity: 1; transform: translateY(0); }
}