/*
 * Nur das, was Elementor nicht selbst kann. Farben, Abstaende, Schriftgroessen
 * und die Einblendungen beim Scrollen stehen im Elementor-Kit und an den
 * Widgets, damit sie im Editor aenderbar bleiben.
 */

:root {
	--elb-ink: #123f66;
	--elb-ink-2: #2a5f8a;
	--elb-ink-3: #537691;
	--elb-brand: #1d71b8;
	--elb-brand-dark: #17588f;
	--elb-gruen: #75b843;
	--elb-gruen-dark: #477425;
	--elb-pill: #d9edc4;
	--elb-pill-hover: #c8e5ac;
	--elb-karte: #e9f4dc;
	--elb-karte-blau: #e4f1fa;
	--elb-flaeche: #f2f7fa;
	--elb-linie: #d5e3ed;
	--elb-sanft: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
	/* Der Kopf klebt oben, also muss ein Sprungziel um seine Hoehe tiefer landen. */
	scroll-padding-top: 9rem;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 1025px) {
	html {
		scroll-padding-top: 10rem;
	}
}

body {
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

:focus-visible {
	outline: 3px solid var(--elb-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Endlos-Laufband: zwei identische Spuren, die zweite schliesst nahtlos an.
   Deshalb muss die Spur im Editor immer die doppelte Bilderzahl enthalten. */
@keyframes elb-laufband {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.elb-laufband {
	overflow: hidden;
}

.elb-laufband-spur {
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
}

.elb-laufband-spur > .elementor-element {
	flex: 0 0 auto;
}

.elb-laufband-spur {
	animation: elb-laufband var(--elb-laufband-dauer, 60s) linear infinite;
}

.elb-laufband:hover .elb-laufband-spur {
	animation-play-state: paused;
}

.elb-laufband-langsam {
	--elb-laufband-dauer: 70s;
}

.elb-laufband-schnell {
	--elb-laufband-dauer: 45s;
}

/* Sanftes Schweben fuer das Herz-Emblem. */
@keyframes elb-schweben {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	50% {
		transform: translate3d(0, -8px, 0) rotate(-4deg);
	}
}

.elb-schweben img {
	animation: elb-schweben 6s ease-in-out infinite;
}

/* Karten, die sich beim Zeigen leicht heben. Elementor kann Hover-Effekte nur
   pro Eigenschaft, die Kombination aus Versatz und Schatten waere dort ein
   Dutzend Felder pro Karte. */
.elb-karte-hebt {
	transition:
		transform 0.5s var(--elb-sanft),
		box-shadow 0.5s var(--elb-sanft),
		border-color 0.5s var(--elb-sanft);
}

.elb-karte-hebt:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 60px -38px rgba(18, 63, 102, 0.6);
	border-color: rgba(29, 113, 184, 0.25);
}

/* Das Bild der Leistungstafel soll die Karte bis unten fuellen. Elementor
   setzt die Hoehe nur am img selbst, die zwei Huellen darueber bleiben auf
   Inhaltshoehe und lassen unten eine Luecke. */
@media (min-width: 1025px) {
	.elb-tafelbild,
	.elb-tafelbild .elementor-widget-container,
	.elb-tafelbild figure,
	.elb-tafelbild a {
		height: 100%;
	}
}

/* Bild zoomt langsam, wenn der Zeiger auf der Karte liegt. */
.elb-bild-zoom img {
	transition: transform 0.9s var(--elb-sanft);
}

.elb-bild-zoom:hover img {
	transform: scale(1.05);
}

/* Aufklapper: Elementors Akkordeon bringt eigene Rahmen mit, die hier stoeren. */
.elb-aufklapper summary::-webkit-details-marker {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.elb-laufband-spur,
	.elb-schweben img {
		animation: none !important;
	}

	.elb-karte-hebt,
	.elb-bild-zoom img,
	.elb-mehr summary,
	.elb-mehr .e-n-accordion-item-title-icon,
	.elb-bild-knopf .elementor-button,
	.elb-bild-knopf .elementor-button-icon {
		transition: none !important;
	}

	.elb-bild-knopf .elementor-button:hover,
	.elb-bild-knopf .elementor-button:hover .elementor-button-icon {
		transform: none;
	}
}

/* Hakenliste in zwei Spalten. Elementors Icon-Liste kennt keine Spalten. */
.elb-liste-2 .elementor-icon-list-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.elb-liste-2 .elementor-icon-list-items {
		grid-template-columns: 1fr 1fr;
	}
}

.elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start;
}

/* Elementor zentriert den Text neben dem Symbol senkrecht. Im Raster wird die
   Zeile so hoch wie die Nachbarzelle, dann rutscht der Text vom Haken weg. */
.elementor-widget .elementor-icon-list-icon + .elementor-icon-list-text {
	align-self: flex-start;
}

.elementor-widget-icon-list .elementor-icon-list-icon {
	padding-top: 0.35em;
}


/* Text auf dunklem Grund: Links erben sonst das Blau aus dem Kit und
   verschwinden fast. */
.elb-dunkel a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.elb-dunkel a:hover {
	color: var(--elb-pill);
}

.elb-dunkel strong {
	color: inherit;
}

/* Hero: zwei Verlaeufe uebereinander, von unten und von links. Elementor kann
   pro Container nur einen, deshalb hier. */
.elb-hero-schleier::before {
	background-image:
		linear-gradient(to top, rgba(18, 63, 102, 0.85), rgba(18, 63, 102, 0.3) 50%, rgba(18, 63, 102, 0.15)),
		linear-gradient(to right, rgba(18, 63, 102, 0.7), rgba(18, 63, 102, 0.15) 50%, transparent);
}

/* Reiter der Leistungen: Nummer klein darueber, Titel in der Serifenschrift. */
.elb-tab-nr {
	display: block;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--elb-brand);
}

/* font-serif text-lg leading-6 lg:text-base, ohne Fettschnitt. */
.elb-tab-titel {
	display: block;
	margin-top: 4px;
	font-family: Fraunces, Georgia, serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: var(--elb-ink);
	hyphens: auto;
}

@media (min-width: 1025px) {
	.elb-tab-titel {
		font-size: 16px;
	}
}

.elb-tabs .e-n-tab-title[aria-selected="true"] .elb-tab-titel {
	color: var(--elb-ink);
}

/* Rundes Abzeichen, das ueber der Bildecke sitzt. */
/* Einblendung beim Laden, nicht beim Scrollen. Fuer alles, was sofort
   sichtbar ist: eine Scroll-Animation liesse es beim Aufruf kurz fehlen. */
@keyframes elb-einblenden {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.elb-einblenden {
	animation: elb-einblenden 0.7s var(--elb-sanft) both;
}

@media (prefers-reduced-motion: reduce) {
	.elb-einblenden {
		animation: none !important;
	}
}

/* Reiter der Leistungen liegen in der Vorlage in einem Raster: eine Spalte auf
   dem Handy, zwei auf dem Tablet, sechs auf dem Schirm. Elementor kann nur
   eine Reihe, die sonst ueber den Rand laeuft. */
.elb-tabs .e-n-tabs-heading {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 768px) {
	.elb-tabs .e-n-tabs-heading {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.elb-tabs .e-n-tabs-heading {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Nummer ueber den Titel, nicht daneben. */
.elb-tabs .e-n-tab-title-text {
	display: block;
	width: 100%;
	text-align: left;
}

.elb-tabs .e-n-tab-title {
	justify-content: flex-start;
	height: 100%;
}

/* Duenne Linie, die die drei Ablaufschritte verbindet. Sie laeuft hinter den
   Karten durch und endet bei den Zahlkreisen. */
.elb-ablauf {
	position: relative;
}

@media (min-width: 1025px) {
	.elb-ablauf::before {
		content: "";
		position: absolute;
		top: 72px;
		left: 16.6%;
		right: 16.6%;
		/* Elementor benutzt dasselbe ::before fuer Hintergrundbilder und gibt ihm
		   die volle Containerbreite. Ohne auto steht die Linie 210 Pixel zu weit
		   rechts und zieht die ganze Seite in die Breite. */
		width: auto;
		height: 1px;
		background: var(--elb-linie);
	}
}

/* Die Leistungsbereiche des Pflegedienstes stehen zu dritt nebeneinander. */
@media (min-width: 1025px) {
	.elb-tabs-breit .e-n-tabs-heading {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* font-serif text-lg leading-6 */
.elb-tabs-breit .elb-tab-titel {
	font-size: 18px;
	margin-top: 0;
}

/* Das Plus im Aufklapper sitzt in einem runden Feld und dreht sich beim
   Oeffnen, wie in der Vorlage. */
.elb-aufklapper .e-n-accordion-item-title-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 999px;
	background: var(--elb-karte-blau) !important;
	color: var(--elb-brand);
	transition: transform 0.3s var(--elb-sanft);
}

.elb-aufklapper .e-n-accordion-item-title-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--elb-brand);
}

.elb-aufklapper details[open] .e-n-accordion-item-title-icon {
	transform: rotate(45deg);
}

/* Im geoeffneten Zustand verschmelzen Titel und Inhalt zu einer Karte:
   unten keine Kante, unten keine runden Ecken. */
.elb-aufklapper details[open] > summary {
	border-color: var(--elb-brand) !important;
	border-bottom-width: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.elb-aufklapper details[open] > .e-con {
	border-color: var(--elb-brand) !important;
}

/* Die obere Kante des Inhalts muss weg, sonst liegt sie doppelt auf der
   unteren Kante des Titels. Das Feld im Widget reicht dafuer nicht: Elementor
   waehlt den Inhalt dort mit :where() aus, also ohne Gewicht, und die
   Voreinstellung des Akkordeons gewinnt. */
.elb-aufklapper details > .e-con {
	border-top-width: 0 !important;
}

/* Flex-Kinder haben von Haus aus min-width:auto und schrumpfen deshalb nicht
   unter ihre Inhaltsbreite. Bei drei Spalten zu 33 Prozent plus Abstand ragt
   die Reihe dann ueber den Rand. min-width:0 laesst sie sauber schrumpfen. */
.e-con > .e-con,
.e-con-inner > .e-con {
	min-width: 0;
}

/* "Mehr anzeigen" ist ein Pillen-Knopf. Elementors Akkordeon bringt einen
   Kasten ueber die volle Breite mit, beides muss hier weg. */
.elb-mehr .e-n-accordion-item {
	border: 0 !important;
	background: none !important;
}

/* inline-flex geht hier nicht: Elementor macht das details-Element zum
   Flex-Container, ein Flex-Kind wird dabei immer blockig. fit-content wirkt. */
.elb-mehr summary {
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	width: fit-content !important;
	padding: 13px 22px 13px 24px !important;
	border: 1px solid var(--elb-linie) !important;
	border-radius: 999px !important;
	background: #fff !important;
	transition:
		background-color 0.3s var(--elb-sanft),
		border-color 0.3s var(--elb-sanft),
		box-shadow 0.3s var(--elb-sanft);
}

.elb-mehr summary:hover,
.elb-mehr details[open] > summary {
	background: var(--elb-karte-blau) !important;
	border-color: rgba(29, 113, 184, 0.35) !important;
}

.elb-mehr summary:hover {
	box-shadow: 0 10px 24px -18px rgba(18, 63, 102, 0.6);
}

/* Winkel nach unten, beim Oeffnen zeigt er nach oben. Gedreht wird die
   Huelle, nicht das SVG: Elementor setzt am SVG selbst ein transform und
   gewinnt sonst. Das !important ist noetig, weil Elementor die Huelle im
   geoeffneten Zustand ebenfalls anfasst. */
.elb-mehr .e-n-accordion-item-title-icon {
	transition: transform 0.3s var(--elb-sanft);
	transform: rotate(0deg) !important;
}

.elb-mehr details[open] > summary .e-n-accordion-item-title-icon {
	transform: rotate(180deg) !important;
}

/* Knopf, der im Bild sitzt. Elementor kann Hover nur je Eigenschaft, der
   kleine Versatz waere dort ein eigenes Feld pro Zustand. */
.elb-bild-knopf .elementor-button {
	transition:
		background-color 0.3s var(--elb-sanft),
		transform 0.3s var(--elb-sanft);
}

.elb-bild-knopf .elementor-button:hover {
	transform: translateY(-2px);
}

/* Der Pfeil laeuft beim Zeigen ein Stueck mit. */
.elb-bild-knopf .elementor-button-icon {
	transition: transform 0.3s var(--elb-sanft);
}

.elb-bild-knopf .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* Kontaktformular. Welche Zusatzfelder gelten, entscheidet das Anliegen
   (formular.js). Elementor kennt keine bedingten Felder, also stehen sie
   verdeckt im Formular, bis das Skript sie einschaltet. Die Feld-Klasse
   setzt Elementor ans Eingabefeld, nicht an die Gruppe, daher :has(). */
.elb-formular .elementor-field-group:has(.elb-bedingt):not(.elb-an) {
	display: none;
}

/* Die Einwilligung steht in der Vorlage als umrandete Karte ohne eigene
   Beschriftung. Das Label braucht Elementor aber fuer die Mail. */
.elb-formular .elementor-field-group-einwilligung > .elementor-field-label {
	display: none;
}

.elb-formular .elementor-field-group-einwilligung .elementor-field-subgroup {
	border: 2px solid var(--elb-linie);
	border-radius: 16px;
	background: #fff;
	padding: 20px;
	color: var(--elb-ink-2);
	font-size: 16px;
	line-height: 1.75;
}

.elb-formular .elementor-field-group-einwilligung input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 6px;
	accent-color: var(--elb-brand);
	flex-shrink: 0;
}

.elb-formular .elementor-field-group-einwilligung .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* Der Datenschutzhinweis steht wie in der Vorlage vor dem Knopf. Das geht
   in Elementor nur als HTML-Feld, und das hat keine eigene Typografie. */
.elb-formular .elb-formularhinweis {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--elb-ink-3);
}

.elb-formular .elb-formularhinweis a {
	color: var(--elb-brand);
	text-decoration: underline;
}

/* Unterstrichene Links im Fliesstext (Karte ansehen, Telefon, E-Mail).
   Elementor kennt keine Textdekoration fuer Links im Texteditor. */
.elb-textlink a {
	color: var(--elb-brand);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}

.elb-textlink a:hover {
	color: var(--elb-brand-dark);
}

/* "Zur Website" mit Pfeil in den Wegweiser-Karten. Die Karte selbst ist der
   Link, deshalb ist das hier nur Text mit einem SVG, das beim Zeigen auf die
   Karte ein Stueck nach oben rechts rutscht wie in der Vorlage. */
.elb-pfeillink p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.elb-pfeillink svg {
	transition: transform 0.3s var(--elb-sanft);
}

.elb-karte-hebt:hover .elb-pfeillink svg {
	transform: translate(2px, -2px);
}

/* Menue-Knopf auf Tablet und Handy: 48 Pixel rund mit hellem Rahmen wie in
   der Vorlage (size-12 border-2 border-linie). Rahmenfarbe und Innenabstand
   bietet das Nav-Menu-Widget nicht an. */
.elb-kopf .elementor-menu-toggle {
	border-style: solid;
	border-color: var(--elb-linie);
	padding: 10px;
}

/* "Mehr erfahren" in der Leistungstafel: ein echter Link mit Pfeil, fett und blau. */
.elb-pfeillink-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--elb-brand);
}

.elb-pfeillink-link a:hover {
	text-decoration: underline;
}

/* Fusszeile: Standortname hell und halbfett, Anschrift gedaempft (Vorlage:
   font-semibold text-white ueber text-white/75). */
.elb-fuss-kontakt strong {
	color: #fff;
	font-weight: 600;
}

/* Hello Elementor gibt jedem Absatz unten 0,9rem Rand, auch dem letzten im
   Textblock. Die Vorlage hat dort nichts. Der Rest liess Karten unten luftiger
   als oben und schob Symbole neben einzeiligem Text nach unten. */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}