/* ---------------------------------------------------------------
   Eigene Ergaenzungen zum Sandbox-Template.
   Bewusst in einer eigenen Datei, damit ein Template-Update
   style.css ersetzen kann, ohne diese Anpassungen mitzunehmen.
   --------------------------------------------------------------- */

/* Sanftes Scrollen zu den Sprungzielen der Navigation.
   Das Template bindet seinen eigenen Smooth-Scroll nur an Links mit
   der Klasse .scroll und rechnet die fixierte Navigation nicht heraus.
   Nativ ueber CSS geloest: scroll-padding-top haelt die Zielueberschrift
   unter der Navigationsleiste frei. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

/* Wer im Betriebssystem reduzierte Bewegung eingestellt hat,
   bekommt den Sprung ohne Animation. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Aktiver Menuepunkt.
   Das Template setzt dafuer --bs-navbar-active-color, laesst die
   Variable aber leer - ohne eigene Regel bliebe die Markierung
   unsichtbar. Zusaetzlich eine Linie, damit der Zustand nicht allein
   ueber die Farbe transportiert wird. */
.navbar-nav .nav-link.active {
	color: var(--bs-primary) !important;
	font-weight: 600;
	position: relative;
}
@media (min-width: 992px) {
	.navbar-nav .nav-link.active::after {
		content: "";
		position: absolute;
		left: .8rem;
		right: .8rem;
		bottom: .35rem;
		height: 2px;
		background: var(--bs-primary);
	}
}

/* Hero-Schaltflaeche: weisser Rahmen, damit sie auf dem Foto dieselbe
   Kontur hat wie die daneben stehende Umriss-Schaltflaeche. */
.hero-btn {
	border: 2px solid #fff !important;
}
.hero-btn:hover,
.hero-btn:focus {
	border-color: #fff !important;
}

/* Bildspalte im Abschnitt "So arbeiten wir".
   Sie ist absolut positioniert, die Prozentangabe bezieht sich also
   auf die Sektion und damit auf die Fensterbreite. */
@media (min-width: 992px) {
	.ablauf-bild {
		width: 47%;
	}
}

/* Abstand der Textspalte zur diagonalen Bildkante im Abschnitt
   "So arbeiten wir". Ohne ihn steht der Text fast an der Kante, und
   die Diagonale schneidet zusaetzlich in den Zwischenraum hinein. */
@media (min-width: 992px) {
	.ablauf-text {
		padding-left: 3rem;
	}
}