/*=============================================================
  BAS – Ergänzungen 2026
  (Online-Anmeldung, Navigation, Darstellungs- & A11y-Fixes)
  Wird NACH style.css und slider.css geladen.
=============================================================*/

:root {
	--bas-orange: #FF6600;        /* Logofarbe. Nur als Fläche/Akzent – als Textfarbe auf Weiß nur 2,9:1 */
	--bas-ink: #111;              /* Text auf Orange: 6,4:1 */
	--bas-blue: #164F99;          /* Logo-Blau, 8:1 auf Weiß */
	--bas-light: #f7fbfe;
	--bas-text: #333;
	--focus-ring: #164F99;
}

/*---------- Layout-Grundlagen ----------*/
/* body{height:100%} aus style.css verhindert position:sticky und kappt Inhalte */
html, body { height: auto; min-height: 100%; }
/* Anker-Ziele nicht unter der Sticky-Navigation verstecken (WCAG 2.4.11) */
html { scroll-padding-top: 110px; }

/*---------- Sticky-Navigation ohne Layout-Sprung ----------*/
#sticker,
#sticker.stick {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Eingeklappte (gescrollte) Leiste: 10 % transparent, Unschärfe hält die Schrift lesbar */
#sticker.menu-shrink {
	background-color: rgba(255, 255, 255, .9) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/*---------- Fokus sichtbar (WCAG 2.4.7) ----------*/
a:focus,
button:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--focus-ring) !important;
	outline-offset: 2px;
}
.header_area a:focus-visible { outline-color: #1a1a1a !important; }
.footer_top a:focus-visible,
.footer a:focus-visible,
[tabindex="-1"]:focus { outline: none !important; }

/*---------- Skip-Link (WCAG 2.4.1) ----------*/
.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100000;
	background: var(--bas-blue);
	color: #fff !important;
	padding: 10px 18px;
	border-radius: 0 0 6px 6px;
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { top: 0; }

/*---------- Navigation: Umbruch statt Überlauf ----------*/
@media (min-width: 768px) {
	#sticker .container > .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	#sticker .container > .row:before,
	#sticker .container > .row:after { display: none; }
	#sticker .navbar-header { flex: 0 0 auto; float: none; }
	#sticker .navbar-collapse {
		flex: 1 1 auto;
		min-width: 0;
		float: none;
		padding-right: 0;
	}
	#sticker .navbar-nav.navbar-right {
		float: none !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		row-gap: 4px;
		margin: 0;
	}
	#sticker .navbar-nav > li { float: none; }
	#sticker .navbar-nav > li > a {
		padding: 10px 12px;
		white-space: nowrap;
	}
}

/*---------- Navigation: Hover- und Aktiv-Zustand ----------*/
/* Kein orangefarbener Text mehr (2,9:1). Stattdessen Orange-Balken + fette Schrift;
   der aktive Punkt trägt zusätzlich aria-current (scripts.js). */
#sticker .navbar-nav > li:not(.nav-cta) > a {
	position: relative;
	color: var(--bas-ink) !important;
	background: transparent !important;
}
#sticker .navbar-nav > li:not(.nav-cta) > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 3px;
	border-radius: 2px;
	background: var(--bas-orange);
	transform: scaleX(0);
	transition: transform .2s ease;
}
#sticker .navbar-nav > li:not(.nav-cta) > a:hover::after,
#sticker .navbar-nav > li:not(.nav-cta) > a:focus-visible::after,
#sticker .navbar-nav > li.active:not(.nav-cta) > a::after { transform: scaleX(1); }
/* Fett ohne Breitenänderung (kein Springen der Nachbarpunkte beim Scrollen) */
#sticker .navbar-nav > li.active:not(.nav-cta) > a { text-shadow: .45px 0 0 currentColor, -.45px 0 0 currentColor; }
@media (max-width: 767px) {
	#sticker .navbar-nav > li:not(.nav-cta) > a::after { left: 8px; right: auto; width: 40px; }
}

/*---------- Nav-Punkt „Online-Anmeldung" (farbig abgesetzt) ----------*/
#sticker .navbar-nav > li.nav-cta > a,
#sticker .navbar-nav > li.nav-cta.active > a {
	background: var(--bas-orange);
	color: var(--bas-ink) !important;
	border-radius: 4px;
}
#sticker .navbar-nav > li.nav-cta > a:hover,
#sticker .navbar-nav > li.nav-cta > a:focus {
	background: var(--bas-ink);
	color: var(--bas-orange) !important;
}
@media (min-width: 768px) {
	#sticker .navbar-nav > li.nav-cta { margin-left: 10px; }
	#sticker .navbar-nav > li.nav-cta > a { padding: 10px 16px; }
}
@media (max-width: 767px) {
	#sticker .navbar-nav > li.nav-cta > a {
		display: inline-block;
		margin: 10px 0 10px 8px;
		padding: 10px 16px;
	}
}
.navbar-default .navbar-toggle .icon-bar { background-color: var(--bas-ink); }

/*---------- Topbar: Logofarbe, schwarze Schrift ----------*/
.header_area { background: var(--bas-orange); }
.top-info-left a,
.top-info-left a:hover { color: var(--bas-ink); }

/*---------- Hero: scharfes Bild auf Contentbreite, dasselbe Bild unscharf dahinter ----------*/
.hero {
	position: relative;
	overflow: hidden;
	background: #f6f4f0;
}
.hero__bg {
	position: absolute;
	inset: -60px;                     /* Überstand, damit der Weichzeichner keine hellen Kanten zeigt */
	/* hell und freundlich: weicher Schleier über dem unscharfen Bild */
	background:
		linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)),
		url(../img/stock/hero-bg-blur.jpg) center / cover no-repeat;
	filter: blur(18px) saturate(1.1);
}
.hero__container { position: relative; z-index: 1; }
.hero__stage { position: relative; }
.hero__figure { position: relative; margin: 0; }
.hero__img { display: block; width: 100%; height: auto; }
.hero .img-credit { right: 10px; bottom: 10px; }   /* unten rechts: Tischkante statt Kindergesicht */
.hero__text h1 {
	font-family: 'Ubuntu Bold', 'Ubuntu', sans-serif;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 16px;
}
.hero__text p {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	margin: 0 0 26px;
}
.hero__btn {
	display: inline-block;
	background: var(--bas-orange);
	color: var(--bas-ink);
	font-family: 'Ubuntu Medium', 'Ubuntu', sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px 30px;
	border-radius: 4px;
	text-decoration: none;
}
.hero__btn:hover,
.hero__btn:focus { background: var(--bas-ink); color: var(--bas-orange); text-decoration: none; }

/* Desktop: Text im rechten Drittel des Bildes, nur dort abgedunkelt */
@media (min-width: 992px) {
	.hero__figure { box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
	.hero__figure::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, rgba(255,255,255,0) 42%, rgba(255,255,255,.72) 62%, rgba(255,255,255,.86) 100%);
		/* Schleier nur hinter dem Text, nach unten auslaufend – Kinder rechts unten bleiben klar */
		-webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 76%);
		mask-image: linear-gradient(to bottom, #000 52%, transparent 76%);
		pointer-events: none;
	}
	.hero__text {
		position: absolute;
		z-index: 2;
		top: 11%;
		right: 0;
		width: 34%;
		padding-right: 3%;
	}
	.hero__text h1 { font-size: 48px; line-height: 54px; color: var(--bas-ink); }
	.hero__text p { font-size: 20px; line-height: 30px; color: #222; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.hero__text h1 { font-size: 40px; line-height: 46px; }
	.hero__text p { font-size: 18px; line-height: 26px; margin-bottom: 20px; }
}
/* Tablet + Mobil: Text unter dem Bild – die Gesichter bleiben frei */
@media (max-width: 991px) {
	/* Text steht unter dem Bild auf hellem Grund -> dunkle Schrift */
	.hero__text { text-align: center; padding: 26px 16px 32px; }
	.hero__text h1 { color: var(--bas-ink); }
	.hero__text p { color: #333; }
	.hero__text h1 { font-size: 32px; line-height: 38px; }
	.hero__text p { font-size: 18px; line-height: 26px; margin-bottom: 22px; }
}
@media (max-width: 767px) {
	.hero__container { width: 100%; padding-left: 0; padding-right: 0; }
	.hero__text h1 { font-size: 26px; line-height: 32px; }
}

/*---------- Lange Wörter in Überschriften (Reflow 320 px, WCAG 1.4.10) ----------*/
h1, h2, h3, h4 {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}
@media only screen and (max-width: 360px) {
	.device_about h2 { font-size: 24px; line-height: 32px; }
}

/*---------- Leistungen: gleich hohe Kacheln ----------*/
@media (min-width: 768px) {
	.row-eq { display: flex; flex-wrap: wrap; }
	.row-eq:before,
	.row-eq:after { display: none; }
	.row-eq > [class*="col-"] { display: flex; float: none; }
	.row-eq > [class*="col-"] > * { flex: 1 1 auto; width: 100%; }
}

/*---------- „BAS in Zahlen": kein horizontaler Überlauf mobil ----------*/
@media only screen and (max-width: 480px) {
	.counter_bg {
		display: block;
		padding: 30px 15px 0;
	}
}

/*---------- Leistungen: h4 -> h3, Optik unverändert ----------*/
.service-box h3 {
	font-size: 18px;
	line-height: 1.2;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 15px;
}
.service-box i { background: var(--bas-orange); color: var(--bas-ink); }

/*---------- „BAS in Zahlen": Zahlen als Text, schwarz + Orange-Akzent ----------*/
.single_counting .timer {
	font-family: 'Ubuntu Bold', 'Ubuntu', sans-serif;
	font-size: 60px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--bas-ink);
	margin: 0 0 14px;
	position: relative;
	padding-bottom: 12px;
}
.single_counting .timer::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 4px;
	margin-left: -20px;
	border-radius: 2px;
	background: var(--bas-orange);
}

/*---------- Nach-oben-Button (jetzt <button>) ----------*/
.topcontrol {
	border: 0;
	padding: 0;
	z-index: 999;
	background: var(--bas-orange);
	color: var(--bas-ink);
}
.topcontrol:hover,
.topcontrol:focus-visible { background: var(--bas-ink); color: var(--bas-orange); }

/*---------- Footer: Telefon/Adresse als Text + Links ----------*/
.footer-phone {
	font-family: 'Ubuntu', sans-serif;
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 30px;
}
.footer-phone a,
.footer_top_contact a { color: #fff; text-decoration: none; }
.footer-phone a:hover,
.footer_top_contact a:hover { color: var(--bas-orange); text-decoration: underline; }
.footer_top_contact {
	font-style: normal;
	margin: 0;
}
.footer_top_contact p {
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
	margin-bottom: 20px;
}
.footer_top_contact .footer-hint { font-size: .9em; }

/*---------- Impressum / Datenschutz ----------*/
.device_about h1 {
	border-bottom: 1px solid #e8e8e9;
	color: #333;
	font-size: 35px;
	font-weight: 600;
	line-height: 40px;
	margin: 0 0 20px;
	padding: 10px 0;
	text-transform: uppercase;
	width: 90%;
}
.device_about .h-sub {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	color: #333;
	margin: 24px 0 10px;
	border: 0;
	padding: 0;
	text-transform: none;
	width: auto;
}
/* Abschnitts-h2 im Fließtext (Datenschutz) kleiner als der Seitentitel */
.device_about p ~ h2,
.device_about div ~ h2 {
	font-size: 24px;
	line-height: 30px;
	margin-top: 40px;
	width: 100%;
}
.device_about a { color: var(--bas-blue); text-decoration: underline; }
.device_about a:hover { color: #0d3466; }
.bildnachweise { margin: 0 0 20px 20px; padding: 0; }
.bildnachweise li { list-style: disc; margin: 0; padding: 0; }

/*---------- Bilder mit Bildnachweis (Adobe Stock) ----------*/
.bas-figure {
	position: relative;
	margin: 0 0 20px;
}
.bas-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
/* Bildnachweis: kleines „©" in der Ecke, Name klappt bei Hover, Fokus oder Antippen auf.
   Screenreader lesen den Namen immer mit. Zielgröße 24 × 24 px (WCAG 2.5.8). */
.img-credit {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 3;
	margin: 0;
	max-width: calc(100% - 16px);
}
.img-credit__btn {
	display: flex;
	align-items: center;
	height: 24px;
	min-width: 24px;
	padding: 0 6px;
	border: 0;
	border-radius: 12px;
	background: rgba(0, 0, 0, .6);   /* weiße Schrift: mind. 5,7:1 auch über hellem Bild */
	color: #fff;
	font: 12px/24px 'Open Sans', sans-serif;
	letter-spacing: .2px;
	cursor: pointer;
	opacity: .75;
	transition: opacity .2s ease;
}
.img-credit__icon { flex: 0 0 auto; width: 12px; text-align: center; font-size: 13px; }
.img-credit__text {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .3s ease, margin .3s ease;
}
.img-credit__btn:hover,
.img-credit__btn:focus-visible,
.img-credit__btn.is-open { opacity: 1; }
.img-credit__btn:hover .img-credit__text,
.img-credit__btn:focus-visible .img-credit__text,
.img-credit__btn.is-open .img-credit__text { max-width: 340px; margin-left: 6px; }

/*---------- Section „Online-Anmeldung" ----------*/
.anmeldung-area { background: var(--bas-light); }
.anmeldung-intro { padding-bottom: 20px; }
.anmeldung-intro p { margin-bottom: 20px; }
.anmeldung-lead {
	font-size: 20px;
	line-height: 32px;
	color: var(--bas-text);
}
.anmeldung-standorte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.anmeldung-standorte li {
	background: #fff;
	border: 1px solid #dfe7ee;
	border-radius: 4px;
	padding: 6px 14px;
	color: var(--bas-text);
	line-height: 26px;
}
.anmeldung-standorte li i {
	color: var(--bas-orange);
	margin-right: 8px;
}
.anmeldung-box {
	background: #fff;
	border: 1px solid #e3eaf0;
	border-top: 4px solid #d5dde5;
	border-radius: 4px;
	padding: 24px;
	margin-bottom: 20px;
}
.anmeldung-box--primary { border-top-color: var(--bas-orange); }
.anmeldung-actions { margin-top: 10px; }
.anmeldung-box .btn-bas {
	display: block;
	width: 100%;
	text-align: center;
	text-transform: none;
	font-size: 16px;
	letter-spacing: 0;
	white-space: nowrap;
	padding: 12px 16px;
}
@media (min-width: 1200px) {
	.anmeldung-actions { display: flex; }
	.anmeldung-actions:before,
	.anmeldung-actions:after { display: none; }
	.anmeldung-actions > [class*="col-"] { display: flex; float: none; }
	.anmeldung-actions .anmeldung-box { display: flex; flex-direction: column; width: 100%; }
	.anmeldung-actions .anmeldung-box .btn-bas { margin-top: auto; }
}
.bas-figure--anmeldung { margin-bottom: 20px; }
@media (max-width: 991px) {
	.bas-figure--anmeldung { max-width: 560px; }
}
.anmeldung-box h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--bas-text);
	margin-bottom: 10px;
}
.anmeldung-box p {
	line-height: 26px;
	margin-bottom: 18px;
}
.anmeldung-box hr {
	border-top: 1px solid #e3eaf0;
	margin: 28px 0 24px;
}
.btn-bas {
	display: inline-block;
	font-family: 'Ubuntu Medium', 'Ubuntu', sans-serif;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 4px;
	border: 2px solid var(--bas-orange);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-bas i { margin-left: 6px; font-size: 13px; }
.btn-bas-primary {
	background: var(--bas-orange);
	color: var(--bas-ink);
}
.btn-bas-primary:hover,
.btn-bas-primary:focus {
	background: var(--bas-ink);
	border-color: var(--bas-ink);
	color: var(--bas-orange);
	text-decoration: none;
}
.btn-bas-secondary {
	background: #fff;
	border-color: var(--bas-ink);
	color: var(--bas-ink);
}
.btn-bas-secondary:hover,
.btn-bas-secondary:focus {
	background: var(--bas-ink);
	color: #fff;
	text-decoration: none;
}
.anmeldung-hinweis {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border-left: 4px solid var(--bas-blue);
	border-radius: 4px;
	padding: 18px 22px;
	margin-top: 10px;
}
.anmeldung-hinweis i {
	color: var(--bas-blue);
	font-size: 22px;
	line-height: 30px;
}
.anmeldung-hinweis a {
	color: var(--bas-blue);
	text-decoration: underline;
}
.anmeldung-hinweis a:hover { color: #0d3466; }
@media (max-width: 767px) {
	.btn-bas { display: block; text-align: center; }
	.anmeldung-box { padding: 24px 20px; }
}

/*---------- Bewegung reduzieren (WCAG 2.3.3 / Nutzerpräferenz) ----------*/
@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.wow { visibility: visible !important; }
}