/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
	--sbw: 0px;
}

/* =========================================================
   Barrierefreiheit – projektweite Grundlagen
   ========================================================= */

/* Sichtbarer Fokusindikator auf allen bedienbaren Elementen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #1C4C71;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Auf dunklen bzw. farbigen Flächen weißer Fokusrahmen */
#brxe-hsec01 a:focus-visible,
#brxe-mbox01 a:focus-visible,
.brxe-popup-42 a:focus-visible,
.brxe-popup-42 button:focus-visible,
.brxe-popup-43 a:focus-visible,
.brxe-popup-43 button:focus-visible,
#brxe-isld01 .swiper-button:focus-visible,
#brxe-isld01 .swiper-pagination-bullet:focus-visible {
	outline-color: #FFFFFF;
}

/* Bewegung reduzieren, wenn das System es verlangt (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Parallax-Effekt am Sprechstunden-Kasten stilllegen */
	[data-brx-motion-parallax] {
		translate: none !important;
		transform: none !important;
	}
}

/* Links im Fließtext müssen ohne Farbwahrnehmung erkennbar sein (WCAG 1.4.1) */
.brxe-text a,
.brxe-text-basic a,
.brxe-post-content a {
	color: #1C4C71 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.brxe-text a:hover,
.brxe-text-basic a:hover,
.brxe-post-content a:hover {
	color: #677633 !important;
}

/* Karten-Raster, die als semantische Liste ausgezeichnet sind */
ul.brxe-block,
ul.brxe-container,
ul.brxe-div {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Qualifikationen: grüner Akzentstrich links an der Karte */
.qual-card {
	border-left-color: #677633 !important;
}

/* Fokusrahmen auf dunklen Flaechen (Abschnitte mit Klasse .on-dark) */
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark [tabindex]:focus-visible {
	outline-color: #FFFFFF;
}

/* Nur fuer Screenreader */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Rechtstexte (Impressum, Datenschutz) */
.legal-text h2 {
	font-family: Oswald, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.25;
	color: #1C4C71;
	margin: 46px 0 14px;
}

.legal-text h3 {
	font-family: Oswald, sans-serif;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.3;
	color: #1C4C71;
	margin: 32px 0 10px;
}

.legal-text h4 {
	font-family: Oswald, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.35;
	color: #677633;
	margin: 24px 0 8px;
}

.legal-text > *:first-child {
	margin-top: 0;
}

.legal-text p {
	margin: 0 0 18px;
}

.legal-text ul {
	margin: 0 0 18px;
	padding-left: 22px;
	list-style: disc;
}

.legal-text li {
	margin-bottom: 7px;
}

.legal-text dl {
	margin: 0 0 18px;
}

.legal-text dt {
	font-weight: 700;
	margin-top: 18px;
}

.legal-text dd {
	margin: 4px 0 0;
}

.legal-text .legal-note {
	color: #C4005D;
}

.legal-text small {
	font-size: 13px;
	color: #717171;
}

/* Lange URLs im Rechtstext umbrechen lassen */
.legal-text {
	overflow-wrap: anywhere;
}

/* =========================================================
   Anforderungsformulare (Rezept, Überweisung)
   ========================================================= */

/* Hinweisliste über dem Formular */
.hinweis-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #E3E3E3;
}

.hinweis-liste > li {
	border-bottom: 1px solid #E3E3E3;
}

/* --- Schritt-Karten --- */
.brxe-form {
	display: block;
}

.form-step {
	margin-bottom: 22px;
	padding: 30px 36px 34px;
	border: 1px solid #D1D1D1;
	border-radius: 4px;
	background-color: #FFFFFF;
	box-shadow: 0 2px 14px rgba(28, 76, 113, .06);
}

.form-step-kopf {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid #E3E3E3;
}

.form-step-nr {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #1C4C71;
	font-family: Oswald, sans-serif;
	font-size: 22px;
	line-height: 1;
	color: #FFFFFF;
}

.form-step-titel {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: #1C4C71;
}

.form-step-titel span:not(.sr-only) {
	display: block;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	color: #717171;
}

/* Zweispaltiges Raster innerhalb eines Schritts.
   Die Breiten stehen bewusst hier und nicht in den Bricks-Feldeinstellungen:
   Bricks erzeugt daraus positionsabhaengiges CSS (:nth-child), das nicht mehr
   passt, sobald die Felder in Schritt-Karten umgruppiert werden. */
.form-step {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	align-content: start;
}

.form-step-kopf,
.form-step .form-group {
	grid-column: 1 / -1;
}

.form-step .form-group {
	margin-bottom: 20px;
}

.form-step .form-group:has( [name="vorname"] ),
.form-step .form-group:has( [name="name"] ),
.form-step .form-group:has( [name="geburtsdatum"] ),
.form-step .form-group:has( [name="telefon"] ),
.form-step .form-group:has( [name="email"] ),
.form-step .form-group:has( [name="email2"] ),
.form-step .form-group:has( [name="rezept_2"] ),
.form-step .form-group:has( [name="rezept_3"] ),
.form-step .form-group:has( [name="rezept_4"] ),
.form-step .form-group:has( [name="rezept_5"] ),
.form-step .form-group:has( [name="rezept_6"] ),
.form-step .form-group:has( [name="ueberweisung_2"] ),
.form-step .form-group:has( [name="ueberweisung_3"] ),
.form-step .form-group:has( [name="ueberweisung_4"] ) {
	grid-column: span 1;
}

@media (max-width: 767px) {
	.form-step {
		grid-template-columns: 1fr;
	}

	.form-step .form-group {
		grid-column: 1 / -1 !important;
	}

	.form-step {
		padding: 24px 20px 26px;
	}

	.form-step-kopf {
		gap: 12px;
		margin-bottom: 20px;
	}

	.form-step-nr {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	.form-step-titel {
		font-size: 20px;
	}
}

/* --- Eingabefelder mit schwebender Beschriftung ---
   Wie auf der Originalseite: kein Kasten, nur eine Linie unter dem Feld.
   Die Linie traegt die Abgrenzung und muss dafuer 3:1 gegen den Untergrund
   erreichen (WCAG 1.4.11) — #666666 auf Weiss liegt bei 5,7:1, also deutlich
   darueber. Optisch ist das trotzdem viel ruhiger als ein umlaufender Rahmen.

   Die Beschriftung liegt im Ruhezustand im Feld und wandert bei Fokus oder
   Inhalt klein nach oben. Sie verschwindet nie — anders als ein reiner
   Platzhalter, der genau beim Ausfuellen weg ist (WCAG 3.3.2). */

.brxe-form .form-group {
	position: relative;
}

.brxe-form input[type="text"],
.brxe-form input[type="email"],
.brxe-form input[type="tel"],
.brxe-form input[type="number"],
.brxe-form input[type="url"],
.brxe-form textarea,
.brxe-form select {
	width: 100%;
	padding: 24px 2px 8px;
	border: 0;
	border-bottom: 1px solid #666666;
	border-radius: 0;
	background-color: transparent;
	font-family: Merriweather, Georgia, serif;
	font-size: 16px;
	line-height: 1.4;
	color: #333333;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.brxe-form select {
	padding-left: 0;
}

.brxe-form textarea {
	min-height: 110px;
}

.brxe-form input:hover,
.brxe-form textarea:hover,
.brxe-form select:hover {
	border-bottom-color: #1C4C71;
}

/* Fokus.
   Der allgemeine 3-px-Rahmen aus dem Fokusstil passt hier nicht: Um ein Feld
   ohne Kasten legt er einen Kasten. Stattdessen aendern sich drei Dinge
   gleichzeitig — die Linie verdoppelt sich optisch (ohne Sprung), das Feld
   bekommt einen blauen Hauch und die Beschriftung wird blau. */
.brxe-form input[type="text"]:focus-visible,
.brxe-form input[type="email"]:focus-visible,
.brxe-form input[type="tel"]:focus-visible,
.brxe-form input[type="number"]:focus-visible,
.brxe-form input[type="url"]:focus-visible,
.brxe-form textarea:focus-visible,
.brxe-form select:focus-visible {
	outline: none;
}

.brxe-form input:focus,
.brxe-form textarea:focus,
.brxe-form select:focus {
	border-bottom-color: #1C4C71;
	box-shadow: inset 0 -1px 0 #1C4C71;
	background-color: #F1F5F9;
}

/* Ruhezustand: Beschriftung sitzt im Feld */
.brxe-form .form-group > label {
	position: absolute;
	top: 19px;
	left: 2px;
	z-index: 1;
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: #6B6B6B;
	pointer-events: none;
	transition: top .15s ease, font-size .15s ease, color .15s ease;
}

/* Schwebend: bei Fokus, bei Inhalt und bei Auswahllisten immer */
.brxe-form .form-group:has( input:focus ) > label,
.brxe-form .form-group:has( textarea:focus ) > label,
.brxe-form .form-group:has( select:focus ) > label,
.brxe-form .form-group:has( input:not(:placeholder-shown) ) > label,
.brxe-form .form-group:has( textarea:not(:placeholder-shown) ) > label,
.brxe-form .form-group:has( > select ) > label {
	top: 1px;
	font-size: 12.5px;
	font-weight: 500;
	color: #54595F;
}

.brxe-form .form-group:has( input:focus ) > label,
.brxe-form .form-group:has( textarea:focus ) > label,
.brxe-form .form-group:has( select:focus ) > label {
	color: #1C4C71;
}

/* Platzhalter erst zeigen, wenn das Feld den Fokus hat — sonst
   konkurriert er mit der Beschriftung an derselben Stelle */
.brxe-form ::placeholder {
	color: #6B6B6B;
	font-family: Merriweather, Georgia, serif;
	font-size: 15px;
	opacity: 0;
	transition: opacity .15s ease;
}

.brxe-form :focus::placeholder {
	opacity: 1;
}

/* Feld mit Fehler: die Linie traegt die Aussage mit, nicht nur die Meldung */
.brxe-form input[aria-invalid="true"],
.brxe-form .form-group.invalid input,
.brxe-form .form-group.invalid select,
.brxe-form .form-group.invalid textarea {
	border-bottom-color: #C4005D;
	box-shadow: inset 0 -1px 0 #C4005D;
}

/* Gruppenbeschriftung bei Auswahlfeldern bleibt normal darueber */
.brxe-form .form-group > .label {
	display: block;
	margin-bottom: 10px;
	text-transform: none;
	letter-spacing: 0;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #54595F;
}

/* --- Auswahloptionen als anklickbare Kästchen (WCAG 2.5.8) --- */
.brxe-form .options-wrapper {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brxe-form .options-wrapper li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #D1D1D1;
	border-radius: 4px;
	background-color: #FFFFFF;
	transition: border-color .15s ease, background-color .15s ease;
}

.brxe-form .options-wrapper li:hover {
	border-color: #1C4C71;
}

.brxe-form .options-wrapper li:has(input:checked) {
	border-color: #1C4C71;
	background-color: #F1F5F9;
}

.brxe-form .options-wrapper label {
	margin: 0;
	cursor: pointer;
	font-family: Merriweather, Georgia, serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #333333;
	text-transform: none;
}

.brxe-form input[type="radio"],
.brxe-form input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: #1C4C71;
	cursor: pointer;
}

/* --- Datenschutzhinweis --- */
.brxe-form .form-datenschutz {
	margin: 0 0 16px;
	padding: 16px 18px;
	border-left: 3px solid #677633;
	background-color: #F6F6F6;
	font-family: Merriweather, Georgia, serif;
	font-size: 15px;
	line-height: 1.65;
	color: #54595F;
}

.brxe-form .form-datenschutz a {
	color: #1C4C71;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.brxe-form .form-datenschutz a:hover {
	color: #677633;
}

/* --- Absendeknopf --- */
.brxe-form .submit-button-wrapper {
	margin-top: 34px;
}

.brxe-form button[type="submit"] {
	padding: 16px 38px;
	border: 0;
	border-radius: 4px;
	background-color: #1C4C71;
	font-family: Oswald, sans-serif;
	font-size: 19px;
	font-weight: 400;
	letter-spacing: .02em;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color .15s ease;
}

.brxe-form button[type="submit"]:hover {
	background-color: #143A57;
}

/* --- Meldungen --- */
.brxe-form .message {
	margin-top: 26px;
	padding: 18px 20px;
	border-radius: 4px;
	font-family: Merriweather, Georgia, serif;
	font-size: 16px;
	line-height: 1.6;
}

.brxe-form .message.success {
	border-left: 3px solid #677633;
	background-color: #EDEFE2;
	color: #3F4A1F;
}

.brxe-form .message.error {
	border-left: 3px solid #C4005D;
	background-color: #FBEDF3;
	color: #8A0041;
}

/* Fehlermeldungen nicht nur farbig (WCAG 1.4.1) */
.brxe-form .form-group-error-message,
.brxe-form li.error {
	margin-top: 6px;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #C4005D;
}

/* --- Handy --- */
@media (max-width: 767px) {
	.brxe-form .form-group {
		width: 100% !important;
	}

	.brxe-form button[type="submit"] {
		width: 100%;
	}
}

/* Fussnoten zu den Apotheken (erscheinen mit der Apothekenauswahl) */
.apotheken-hinweis {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-family: Roboto, sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: #54595F;
}

.apotheken-hinweis li + li {
	margin-top: 6px;
}

.apotheken-hinweis li > span:first-child {
	margin-right: 4px;
	font-weight: 700;
	color: #677633;
}

/* Erlaeuterung in einer Zwischenueberschrift */
.brxe-form .form-section span {
	font-family: Roboto, sans-serif;
	font-size: 14px;
	color: #717171;
}

/* Ausgeblendete Feldgruppen muessen wirklich verschwinden.
   Bricks setzt auf .form-group ein display, das das HTML-Attribut [hidden]
   aushebelt - ohne !important bleiben bedingte Felder sichtbar. */
.brxe-form .form-group[hidden] {
	display: none !important;
}

/* =========================================================
   Impressionen: Bildunterschriften
   ========================================================= */

/* Die Unterschrift ist zugleich die Textalternative zum Bild: Die Fotos
   liegen als CSS-Hintergrund im Slider und koennen deshalb kein alt tragen.
   Als Band am unteren Rand statt frei im Bild - nur so ist der Kontrast
   unabhaengig davon, ob das Foto an dieser Stelle hell oder dunkel ist. */
#brxe-isld01 .slider-content {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	margin: 0;
	padding: 13px 56px 28px;
	background-color: rgba(28, 76, 113, .94);
	text-align: left;
}

#brxe-isld01 .slider-content .content,
#brxe-isld01 .slider-content p {
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #FFFFFF;
}

/* Die Punkte sitzen im Band mit */
#brxe-isld01 .swiper-pagination {
	z-index: 3;
}

/* Icons als Inline-SVG (siehe functions.php): Groesse und Farbe kommen weiter
   ueber font-size und color des <i>, wie bei der Icon-Schrift */
i.praxis-svg-icon {
	display: inline-block;
	font-style: normal;
	line-height: 1;
}

i.praxis-svg-icon > svg {
	display: block;
	fill: currentColor;
	overflow: visible;
}

/* Fusszeilen-Links: mindestens 24 px hoch (WCAG 2.5.8), auf dem Handy 32 px,
   damit sie sich mit dem Finger sicher treffen lassen. Schrift bleibt gleich. */
#brx-footer .brxe-text-link {
	min-height: 24px;
}

@media (max-width: 767px) {
	#brx-footer .brxe-text-link {
		min-height: 32px;
	}
}

/* Tippflaeche 24 x 24 px (WCAG 2.5.8), der sichtbare Punkt bleibt 8 px */
#brxe-isld01 .swiper-pagination-bullet {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 8px;
	margin: 0 !important;
	background-clip: content-box;
}

@media (max-width: 767px) {
	#brxe-isld01 .slider-content {
		padding: 11px 20px 26px;
	}

	#brxe-isld01 .slider-content .content,
	#brxe-isld01 .slider-content p {
		font-size: 14px;
	}
}

/* Karten, bei denen die ganze Flaeche auf den Link der Ueberschrift fuehrt.
   Der zugaengliche Name bleibt der Ueberschriftentext - es entsteht kein
   zweiter, gleichlautender Link daneben. */
.karte-link {
	position: relative;
}

.karte-link h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.karte-link h3 a {
	text-decoration: none;
	color: inherit;
}

.karte-link:hover h3 a {
	color: #677633;
}

/* Footer-Links: beim Ueberfahren zusaetzlich unterstreichen.
   Das neue Gruen ist dunkler als das urspruengliche und hebt sich vom Grau
   weniger deutlich ab. Die Unterstreichung macht den Zustandswechsel
   unabhaengig von der Farbwahrnehmung erkennbar (WCAG 1.4.1). */
footer a:hover,
footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}


/* Rechtstexte zweispaltig mit hervorgehobenen Kästen (wie Wenzel, 2026-10-02) */
.legal-text .legal-intro {
	margin-bottom: 40px;
}

.legal-text .legal-intro p {
	font-size: 19px;
	line-height: 1.6;
	margin: 0;
}

.legal-text .legal-box {
	margin: 0 0 48px;
	padding: 24px 28px;
	border-left: 3px solid #677633;
	background-color: #F6F6F6;
	break-inside: avoid;
}

.legal-text .legal-box > :last-child {
	margin-bottom: 0;
}

.legal-text .legal-box h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-text .legal-grid {
	column-count: 2;
	column-gap: 64px;
	column-rule: 1px solid #E2E2E2;
}

.legal-text .legal-grid section {
	margin-bottom: 36px;
}

.legal-text .legal-grid h2 {
	font-size: 25px;
	margin: 0 0 12px;
	padding-top: 28px;
	border-top: 1px solid #E2E2E2;
	break-after: avoid;
	break-inside: avoid;
}

.legal-text .legal-grid section:first-child h2 {
	padding-top: 0;
	border-top: 0;
}

.legal-text .legal-grid h3 {
	margin-top: 20px;
	break-after: avoid;
}

.legal-text .legal-grid p {
	orphans: 3;
	widows: 3;
}

.legal-text .legal-grid li,
.legal-text .legal-grid dd {
	break-inside: avoid;
}

.legal-text .legal-grid dt {
	break-after: avoid;
}

.legal-text .legal-grid .legal-box {
	margin: 0 0 18px;
}

.legal-text .legal-grid .legal-box h2 {
	padding-top: 0;
	border-top: 0;
}

.legal-text .legal-grid section.legal-box {
	margin-bottom: 36px;
}

@media (max-width: 860px) {
	.legal-text .legal-grid {
		column-count: 1;
		column-rule: none;
	}

	.legal-text .legal-grid section:first-child h2 {
		padding-top: 0;
	}
}

/* Feste Aufteilung (Impressum): zwei Spalten ohne Linie über dem ersten Abschnitt rechts */
.legal-text .legal-grid--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-count: auto;
	column-gap: 0;
	column-rule: none;
}

.legal-text .legal-grid--split .legal-col:first-child {
	padding-right: 32px;
}

.legal-text .legal-grid--split .legal-col + .legal-col {
	padding-left: 32px;
	border-left: 1px solid #E2E2E2;
}

@media (max-width: 860px) {
	.legal-text .legal-grid--split {
		grid-template-columns: 1fr;
	}

	.legal-text .legal-grid--split .legal-col:first-child {
		padding-right: 0;
	}

	.legal-text .legal-grid--split .legal-col + .legal-col {
		padding-left: 0;
		border-left: 0;
	}

	.legal-text .legal-grid--split .legal-col + .legal-col > section:first-child h2 {
		padding-top: 28px;
		border-top: 1px solid #E2E2E2;
	}
}